Merge branch 'dev' into refactor/node-server-adapter

.github/VOUCHED.td

@@ -21,4 +21,3 @@ r44vc0rp
 rekram1-node
 -spider-yamet clawdbot/llm psychosis, spam pinging the team
 thdxr
--OpenCode2026

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

@@ -3,6 +3,14 @@ description: "Setup Bun with caching and install dependencies"
 runs:
   using: "composite"
   steps:
+    - name: Cache Bun dependencies
+      uses: actions/cache@v4
+      with:
+        path: ~/.bun/install/cache
+        key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }}
+        restore-keys: |
+          ${{ runner.os }}-bun-
+
     - name: Get baseline download URL
       id: bun-url
       shell: bash
@@ -23,31 +31,6 @@ runs:
         bun-version-file: ${{ !steps.bun-url.outputs.url && 'package.json' || '' }}
         bun-download-url: ${{ steps.bun-url.outputs.url }}
 
-    - name: Get cache directory
-      id: cache
-      shell: bash
-      run: echo "dir=$(bun pm cache)" >> "$GITHUB_OUTPUT"
-
-    - name: Cache Bun dependencies
-      uses: actions/cache@v4
-      with:
-        path: ${{ steps.cache.outputs.dir }}
-        key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-bun-
-
-    - name: Install setuptools for distutils compatibility
-      run: python3 -m pip install setuptools || pip install setuptools || true
-      shell: bash
-
     - name: Install dependencies
-      run: |
+      run: bun install
-        # Workaround for patched peer variants
-        # e.g. ./patches/ for standard-openapi
-        # https://github.com/oven-sh/bun/issues/28147
-        if [ "$RUNNER_OS" = "Windows" ]; then
-          bun install --linker hoisted
-        else
-          bun install
-        fi
       shell: bash

.github/workflows/publish.yml

@@ -115,9 +115,6 @@ jobs:
             target: x86_64-apple-darwin
           - host: macos-latest
             target: aarch64-apple-darwin
-          # github-hosted: blacksmith lacks ARM64 MSVC cross-compilation toolchain
-          - host: windows-2025
-            target: aarch64-pc-windows-msvc
           - host: blacksmith-4vcpu-windows-2025
             target: x86_64-pc-windows-msvc
           - host: blacksmith-4vcpu-ubuntu-2404
@@ -152,10 +149,6 @@ jobs:
 
       - uses: ./.github/actions/setup-bun
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "24"
-
       - name: Cache apt packages
         if: contains(matrix.settings.host, 'ubuntu')
         uses: actions/cache@v4
@@ -261,10 +254,6 @@ jobs:
           - host: macos-latest
             target: aarch64-apple-darwin
             platform_flag: --mac --arm64
-          # github-hosted: blacksmith lacks ARM64 MSVC cross-compilation toolchain
-          - host: "windows-2025"
-            target: aarch64-pc-windows-msvc
-            platform_flag: --win --arm64
           - host: "blacksmith-4vcpu-windows-2025"
             target: x86_64-pc-windows-msvc
             platform_flag: --win

.github/workflows/test.yml

@@ -6,16 +6,6 @@ on:
       - dev
   pull_request:
   workflow_dispatch:
-
-concurrency:
-  # Keep every run on dev so cancelled checks do not pollute the default branch
-  # commit history. PRs and other branches still share a group and cancel stale runs.
-  group: ${{ case(github.ref == 'refs/heads/dev', format('{0}-{1}', github.workflow, github.run_id), format('{0}-{1}', github.workflow, github.event.pull_request.number || github.ref)) }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
 jobs:
   unit:
     name: unit (${{ matrix.settings.name }})
@@ -50,17 +40,20 @@ jobs:
 
   e2e:
     name: e2e (${{ matrix.settings.name }})
+    needs: unit
     strategy:
       fail-fast: false
       matrix:
         settings:
           - name: linux
             host: blacksmith-4vcpu-ubuntu-2404
+            playwright: bunx playwright install --with-deps
           - name: windows
             host: blacksmith-4vcpu-windows-2025
+            playwright: bunx playwright install
     runs-on: ${{ matrix.settings.host }}
     env:
-      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.playwright-browsers
+      PLAYWRIGHT_BROWSERS_PATH: 0
     defaults:
       run:
         shell: bash
@@ -73,28 +66,9 @@ jobs:
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
-      - name: Read Playwright version
-        id: playwright-version
-        run: |
-          version=$(node -e 'console.log(require("./packages/app/package.json").devDependencies["@playwright/test"])')
-          echo "version=$version" >> "$GITHUB_OUTPUT"
-
-      - name: Cache Playwright browsers
-        id: playwright-cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ github.workspace }}/.playwright-browsers
-          key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright-version.outputs.version }}-chromium
-
-      - name: Install Playwright system dependencies
-        if: runner.os == 'Linux'
-        working-directory: packages/app
-        run: bunx playwright install-deps chromium
-
       - name: Install Playwright browsers
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: packages/app
-        run: bunx playwright install chromium
+        run: ${{ matrix.settings.playwright }}
 
       - name: Run app e2e tests
         run: bun --cwd packages/app test:e2e:local
@@ -112,3 +86,18 @@ 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"

.gitignore

@@ -17,7 +17,7 @@ ts-dist
 /result
 refs
 Session.vim
-/opencode.json
+opencode.json
 a.out
 target
 .scripts

.opencode/.gitignore

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

.opencode/agent/translator.md

@@ -1,7 +1,7 @@
 ---
 description: Translate content for a specified locale while preserving technical terms
 mode: subagent
-model: opencode/gpt-5.4
+model: opencode/gemini-3-pro
 ---
 
 You are a professional translator and localization specialist.

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

@@ -1,5 +1,7 @@
 /// <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}`, {
     ...options,
@@ -22,16 +24,7 @@ interface PR {
 }
 
 export default tool({
-  description: `Use this tool to search GitHub pull requests by title and description.
+  description: 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

@@ -0,0 +1,10 @@
+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,5 +1,7 @@
 /// <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"],
@@ -38,12 +40,7 @@ async function githubFetch(endpoint: string, options: RequestInit = {}) {
 }
 
 export default tool({
-  description: `Use this tool to assign and/or label a GitHub issue.
+  description: DESCRIPTION,
-
-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[]])

.opencode/tool/github-triage.txt

@@ -0,0 +1,6 @@
+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.

AGENTS.md

@@ -122,7 +122,3 @@ 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.zh.md

@@ -137,4 +137,4 @@ OpenCode 内置两种 Agent，可用 `Tab` 键快速切换：
 
 ---
 
-**加入我们的社区** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=de8k6664-1b5e-43f2-8efd-21d6772647b5&qr_code=true) | [X.com](https://x.com/opencode)
+**加入我们的社区** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.zht.md

@@ -137,4 +137,4 @@ OpenCode 內建了兩種 Agent，您可以使用 `Tab` 鍵快速切換。
 
 ---
 
-**加入我們的社群** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=de8k6664-1b5e-43f2-8efd-21d6772647b5&qr_code=true) | [X.com](https://x.com/opencode)
+**加入我們的社群** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

infra/console.ts

@@ -103,12 +103,6 @@ export const stripeWebhook = new stripe.WebhookEndpoint("StripeWebhookEndpoint",
 const zenLiteProduct = new stripe.Product("ZenLite", {
   name: "OpenCode Go",
 })
-const zenLiteCouponFirstMonth50 = new stripe.Coupon("ZenLiteCouponFirstMonth50", {
-  name: "First month 50% off",
-  percentOff: 50,
-  appliesToProducts: [zenLiteProduct.id],
-  duration: "once",
-})
 const zenLitePrice = new stripe.Price("ZenLitePrice", {
   product: zenLiteProduct.id,
   currency: "usd",
@@ -122,8 +116,6 @@ const ZEN_LITE_PRICE = new sst.Linkable("ZEN_LITE_PRICE", {
   properties: {
     product: zenLiteProduct.id,
     price: zenLitePrice.id,
-    priceInr: 92900,
-    firstMonth50Coupon: zenLiteCouponFirstMonth50.id,
   },
 })
 
@@ -202,10 +194,6 @@ const bucketNew = new sst.cloudflare.Bucket("ZenDataNew")
 const AWS_SES_ACCESS_KEY_ID = new sst.Secret("AWS_SES_ACCESS_KEY_ID")
 const AWS_SES_SECRET_ACCESS_KEY = new sst.Secret("AWS_SES_SECRET_ACCESS_KEY")
 
-const SALESFORCE_CLIENT_ID = new sst.Secret("SALESFORCE_CLIENT_ID")
-const SALESFORCE_CLIENT_SECRET = new sst.Secret("SALESFORCE_CLIENT_SECRET")
-const SALESFORCE_INSTANCE_URL = new sst.Secret("SALESFORCE_INSTANCE_URL")
-
 const logProcessor = new sst.cloudflare.Worker("LogProcessor", {
   handler: "packages/console/function/src/log-processor.ts",
   link: [new sst.Secret("HONEYCOMB_API_KEY")],
@@ -224,9 +212,6 @@ new sst.cloudflare.x.SolidStart("Console", {
     EMAILOCTOPUS_API_KEY,
     AWS_SES_ACCESS_KEY_ID,
     AWS_SES_SECRET_ACCESS_KEY,
-    SALESFORCE_CLIENT_ID,
-    SALESFORCE_CLIENT_SECRET,
-    SALESFORCE_INSTANCE_URL,
     ZEN_BLACK_PRICE,
     ZEN_LITE_PRICE,
     new sst.Secret("ZEN_LIMITS"),

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-P0RJfQF8APTYVGP6hLJRrOkRSl5nVDNxdcGcZECPPJE=",
+    "x86_64-linux": "sha256-duBedS4ZTc1as03OM0KB9mKKU21Cywv4o9GHwQZv6Ts=",
-    "aarch64-linux": "sha256-ZtMjTcd35X3JhJIdn3DilFsp7i/IZIcNaKZFnSzW/nk=",
+    "aarch64-linux": "sha256-juvQfuNBqqzeB/TIY9PuUDqgpsdyI54ImowjQLrNhns=",
-    "aarch64-darwin": "sha256-Uw/okFDRxxKQMfEsj8MXuHyhpugxZGgIKtu89Getlz8=",
+    "aarch64-darwin": "sha256-kKgcuEN1oJqHJc+sGjcZ4INWvbZczSTDJ8VHIWAquD4=",
-    "x86_64-darwin": "sha256-ZySIgT1HbWZWnaQ0W0eURKC43BTupRmmply92JDFPWA="
+    "x86_64-darwin": "sha256-hXkFWOL4wi9s8HSrChpqtH4PKSNzbzVgU+0GbAxEUT4="
   }
 }

package.json

@@ -9,7 +9,6 @@
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "dev:desktop": "bun --cwd packages/desktop tauri dev",
     "dev:web": "bun --cwd packages/app dev",
-    "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",
     "dev:storybook": "bun --cwd packages/storybook storybook",
     "typecheck": "bun turbo typecheck",
     "prepare": "husky",
@@ -25,7 +24,6 @@
       "packages/slack"
     ],
     "catalog": {
-      "@effect/platform-node": "4.0.0-beta.35",
       "@types/bun": "1.3.9",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
@@ -43,9 +41,8 @@
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
       "dompurify": "3.3.1",
-      "drizzle-kit": "1.0.0-beta.19-d95b7a4",
+      "drizzle-kit": "1.0.0-beta.16-ea816b6",
-      "drizzle-orm": "1.0.0-beta.19-d95b7a4",
+      "drizzle-orm": "1.0.0-beta.16-ea816b6",
-      "effect": "4.0.0-beta.35",
       "ai": "5.0.124",
       "hono": "4.10.7",
       "hono-openapi": "1.1.2",
@@ -112,8 +109,6 @@
   },
   "patchedDependencies": {
     "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
-    "@openrouter/ai-sdk-provider@1.5.4": "patches/@openrouter%2Fai-sdk-provider@1.5.4.patch",
+    "@openrouter/ai-sdk-provider@1.5.4": "patches/@openrouter%2Fai-sdk-provider@1.5.4.patch"
-    "@ai-sdk/xai@2.0.51": "patches/@ai-sdk%2Fxai@2.0.51.patch",
-    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch"
   }
 }

packages/app/e2e/AGENTS.md

@@ -70,8 +70,6 @@ test("test description", async ({ page, sdk, gotoSession }) => {
 - `openSettings(page)` - Open settings dialog
 - `closeDialog(page, dialog)` - Close any dialog
 - `openSidebar(page)` / `closeSidebar(page)` - Toggle sidebar
-- `waitTerminalReady(page, { term? })` - Wait for a mounted terminal to connect and finish rendering output
-- `runTerminal(page, { cmd, token, term?, timeout? })` - Type into the terminal via the browser and wait for rendered output
 - `withSession(sdk, title, callback)` - Create temp session
 - `withProject(...)` - Create temp project/workspace
 - `sessionIDFromUrl(url)` - Read session ID from URL
@@ -169,42 +167,6 @@ await page.keyboard.press(`${modKey}+B`) // Toggle sidebar
 await page.keyboard.press(`${modKey}+Comma`) // Open settings
 ```
 
-### Terminal Tests
-
-- In terminal tests, type through the browser. Do not write to the PTY through the SDK.
-- Use `waitTerminalReady(page, { term? })` and `runTerminal(page, { cmd, token, term?, timeout? })` from `actions.ts`.
-- These helpers use the fixture-enabled test-only terminal driver and wait for output after the terminal writer settles.
-- After opening the terminal, use `waitTerminalFocusIdle(...)` before the next keyboard action when prompt focus or keyboard routing matters.
-- This avoids racing terminal mount, focus handoff, and prompt readiness when the next step types or sends shortcuts.
-- Avoid `waitForTimeout` and custom DOM or `data-*` readiness checks.
-
-### Wait on state
-
-- Never use wall-clock waits like `page.waitForTimeout(...)` to make a test pass
-- Avoid race-prone flows that assume work is finished after an action
-- Wait or poll on observable state with `expect(...)`, `expect.poll(...)`, or existing helpers
-- Prefer locator assertions like `toBeVisible()`, `toHaveCount(0)`, and `toHaveAttribute(...)` for normal UI state, and reserve `expect.poll(...)` for probe, mock, or backend state
-- Prefer semantic app state over transient DOM visibility when behavior depends on active selection, focus ownership, or async retry loops
-- Do not treat a visible element as proof that the app will route the next action to it
-- When fixing a flake, validate with `--repeat-each` and multiple workers when practical
-
-### Add hooks
-
-- If required state is not observable from the UI, add a small test-only driver or probe in app code instead of sleeps or fragile DOM checks
-- Keep these hooks minimal and purpose-built, following the style of `packages/app/src/testing/terminal.ts`
-- Test-only hooks must be inert unless explicitly enabled; do not add normal-runtime listeners, reactive subscriptions, or per-update allocations for e2e ceremony
-- When mocking routes or APIs, expose explicit mock state and wait on that before asserting post-action UI
-- Add minimal test-only probes for semantic state like the active list item or selected command when DOM intermediates are unstable
-- Prefer probing committed app state over asserting on transient highlight, visibility, or animation states
-
-### Prefer helpers
-
-- Prefer fluent helpers and drivers when they make intent obvious and reduce locator-heavy noise
-- Use direct locators when the interaction is simple and a helper would not add clarity
-- Prefer helpers that both perform an action and verify the app consumed it
-- Avoid composing helpers redundantly when one already includes the other or already waits for the resulting state
-- If a helper already covers the required wait or verification, use it directly instead of layering extra clicks, keypresses, or assertions
-
 ## Writing New Tests
 
 1. Choose appropriate folder or create new one

packages/app/e2e/actions.ts

@@ -1,15 +1,12 @@
-import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
 import { expect, type Locator, type Page } from "@playwright/test"
 import fs from "node:fs/promises"
 import os from "node:os"
 import path from "node:path"
 import { execSync } from "node:child_process"
-import { terminalAttr, type E2EWindow } from "../src/testing/terminal"
 import { createSdk, modKey, resolveDirectory, serverUrl } from "./utils"
 import {
   dropdownMenuTriggerSelector,
   dropdownMenuContentSelector,
-  projectSwitchSelector,
   projectMenuTriggerSelector,
   projectCloseMenuSelector,
   projectWorkspacesToggleSelector,
@@ -18,22 +15,10 @@ import {
   listItemSelector,
   listItemKeySelector,
   listItemKeyStartsWithSelector,
-  promptSelector,
-  terminalSelector,
   workspaceItemSelector,
   workspaceMenuTriggerSelector,
 } from "./selectors"
 
-const phase = new WeakMap<Page, "test" | "cleanup">()
-
-export function setHealthPhase(page: Page, value: "test" | "cleanup") {
-  phase.set(page, value)
-}
-
-export function healthPhase(page: Page) {
-  return phase.get(page) ?? "test"
-}
-
 export async function defocus(page: Page) {
   await page
     .evaluate(() => {
@@ -43,138 +28,6 @@ export async function defocus(page: Page) {
     .catch(() => undefined)
 }
 
-async function terminalID(term: Locator) {
-  const id = await term.getAttribute(terminalAttr)
-  if (id) return id
-  throw new Error(`Active terminal missing ${terminalAttr}`)
-}
-
-export async function terminalConnects(page: Page, input?: { term?: Locator }) {
-  const term = input?.term ?? page.locator(terminalSelector).first()
-  const id = await terminalID(term)
-  return page.evaluate((id) => {
-    return (window as E2EWindow).__opencode_e2e?.terminal?.terminals?.[id]?.connects ?? 0
-  }, id)
-}
-
-export async function disconnectTerminal(page: Page, input?: { term?: Locator }) {
-  const term = input?.term ?? page.locator(terminalSelector).first()
-  const id = await terminalID(term)
-  await page.evaluate((id) => {
-    ;(window as E2EWindow).__opencode_e2e?.terminal?.controls?.[id]?.disconnect?.()
-  }, id)
-}
-
-async function terminalReady(page: Page, term?: Locator) {
-  const next = term ?? page.locator(terminalSelector).first()
-  const id = await terminalID(next)
-  return page.evaluate((id) => {
-    const state = (window as E2EWindow).__opencode_e2e?.terminal?.terminals?.[id]
-    return !!state?.connected && (state.settled ?? 0) > 0
-  }, id)
-}
-
-async function terminalFocusIdle(page: Page, term?: Locator) {
-  const next = term ?? page.locator(terminalSelector).first()
-  const id = await terminalID(next)
-  return page.evaluate((id) => {
-    const state = (window as E2EWindow).__opencode_e2e?.terminal?.terminals?.[id]
-    return (state?.focusing ?? 0) === 0
-  }, id)
-}
-
-async function terminalHas(page: Page, input: { term?: Locator; token: string }) {
-  const next = input.term ?? page.locator(terminalSelector).first()
-  const id = await terminalID(next)
-  return page.evaluate(
-    (input) => {
-      const state = (window as E2EWindow).__opencode_e2e?.terminal?.terminals?.[input.id]
-      return state?.rendered.includes(input.token) ?? false
-    },
-    { id, token: input.token },
-  )
-}
-
-async function promptSlashActive(page: Page, id: string) {
-  return page.evaluate((id) => {
-    const state = (window as E2EWindow).__opencode_e2e?.prompt?.current
-    if (state?.popover !== "slash") return false
-    if (!state.slash.ids.includes(id)) return false
-    return state.slash.active === id
-  }, id)
-}
-
-async function promptSlashSelects(page: Page) {
-  return page.evaluate(() => {
-    return (window as E2EWindow).__opencode_e2e?.prompt?.current?.selects ?? 0
-  })
-}
-
-async function promptSlashSelected(page: Page, input: { id: string; count: number }) {
-  return page.evaluate((input) => {
-    const state = (window as E2EWindow).__opencode_e2e?.prompt?.current
-    if (!state) return false
-    return state.selected === input.id && state.selects >= input.count
-  }, input)
-}
-
-export async function waitTerminalReady(page: Page, input?: { term?: Locator; timeout?: number }) {
-  const term = input?.term ?? page.locator(terminalSelector).first()
-  const timeout = input?.timeout ?? 10_000
-  await expect(term).toBeVisible()
-  await expect(term.locator("textarea")).toHaveCount(1)
-  await expect.poll(() => terminalReady(page, term), { timeout }).toBe(true)
-}
-
-export async function waitTerminalFocusIdle(page: Page, input?: { term?: Locator; timeout?: number }) {
-  const term = input?.term ?? page.locator(terminalSelector).first()
-  const timeout = input?.timeout ?? 10_000
-  await waitTerminalReady(page, { term, timeout })
-  await expect.poll(() => terminalFocusIdle(page, term), { timeout }).toBe(true)
-}
-
-export async function showPromptSlash(
-  page: Page,
-  input: { id: string; text: string; prompt?: Locator; timeout?: number },
-) {
-  const prompt = input.prompt ?? page.locator(promptSelector)
-  const timeout = input.timeout ?? 10_000
-  await expect
-    .poll(
-      async () => {
-        await prompt.click().catch(() => false)
-        await prompt.fill(input.text).catch(() => false)
-        return promptSlashActive(page, input.id).catch(() => false)
-      },
-      { timeout },
-    )
-    .toBe(true)
-}
-
-export async function runPromptSlash(
-  page: Page,
-  input: { id: string; text: string; prompt?: Locator; timeout?: number },
-) {
-  const prompt = input.prompt ?? page.locator(promptSelector)
-  const timeout = input.timeout ?? 10_000
-  const count = await promptSlashSelects(page)
-  await showPromptSlash(page, input)
-  await prompt.press("Enter")
-  await expect.poll(() => promptSlashSelected(page, { id: input.id, count: count + 1 }), { timeout }).toBe(true)
-}
-
-export async function runTerminal(page: Page, input: { cmd: string; token: string; term?: Locator; timeout?: number }) {
-  const term = input.term ?? page.locator(terminalSelector).first()
-  const timeout = input.timeout ?? 10_000
-  await waitTerminalReady(page, { term, timeout })
-  const textarea = term.locator("textarea")
-  await term.click()
-  await expect(textarea).toBeFocused()
-  await page.keyboard.type(input.cmd)
-  await page.keyboard.press("Enter")
-  await expect.poll(() => terminalHas(page, { term, token: input.token }), { timeout }).toBe(true)
-}
-
 export async function openPalette(page: Page) {
   await defocus(page)
   await page.keyboard.press(`${modKey}+P`)
@@ -207,49 +60,9 @@ export async function closeDialog(page: Page, dialog: Locator) {
 }
 
 export async function isSidebarClosed(page: Page) {
-  const button = await waitSidebarButton(page, "isSidebarClosed")
-  return (await button.getAttribute("aria-expanded")) !== "true"
-}
-
-async function errorBoundaryText(page: Page) {
-  const title = page.getByRole("heading", { name: /something went wrong/i }).first()
-  if (!(await title.isVisible().catch(() => false))) return
-
-  const description = await page
-    .getByText(/an error occurred while loading the application\./i)
-    .first()
-    .textContent()
-    .catch(() => "")
-  const detail = await page
-    .getByRole("textbox", { name: /error details/i })
-    .first()
-    .inputValue()
-    .catch(async () =>
-      (
-        (await page
-          .getByRole("textbox", { name: /error details/i })
-          .first()
-          .textContent()
-          .catch(() => "")) ?? ""
-      ).trim(),
-    )
-
-  return [title ? "Error boundary" : "", description ?? "", detail ?? ""].filter(Boolean).join("\n")
-}
-
-export async function assertHealthy(page: Page, context: string) {
-  const text = await errorBoundaryText(page)
-  if (!text) return
-  console.log(`[e2e:error-boundary][${context}]\n${text}`)
-  throw new Error(`Error boundary during ${context}\n${text}`)
-}
-
-async function waitSidebarButton(page: Page, context: string) {
   const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
-  const boundary = page.getByRole("heading", { name: /something went wrong/i }).first()
+  await expect(button).toBeVisible()
-  await button.or(boundary).first().waitFor({ state: "visible", timeout: 10_000 })
+  return (await button.getAttribute("aria-expanded")) !== "true"
-  await assertHealthy(page, context)
-  return button
 }
 
 export async function toggleSidebar(page: Page) {
@@ -260,7 +73,7 @@ export async function toggleSidebar(page: Page) {
 export async function openSidebar(page: Page) {
   if (!(await isSidebarClosed(page))) return
 
-  const button = await waitSidebarButton(page, "openSidebar")
+  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
   await button.click()
 
   const opened = await expect(button)
@@ -277,7 +90,7 @@ export async function openSidebar(page: Page) {
 export async function closeSidebar(page: Page) {
   if (await isSidebarClosed(page)) return
 
-  const button = await waitSidebarButton(page, "closeSidebar")
+  const button = page.getByRole("button", { name: /toggle sidebar/i }).first()
   await button.click()
 
   const closed = await expect(button)
@@ -292,7 +105,6 @@ export async function closeSidebar(page: Page) {
 }
 
 export async function openSettings(page: Page) {
-  await assertHealthy(page, "openSettings")
   await defocus(page)
 
   const dialog = page.getByRole("dialog")
@@ -305,8 +117,6 @@ export async function openSettings(page: Page) {
 
   if (opened) return dialog
 
-  await assertHealthy(page, "openSettings")
-
   await page.getByRole("button", { name: "Settings" }).first().click()
   await expect(dialog).toBeVisible()
   return dialog
@@ -368,12 +178,10 @@ export async function seedProjects(page: Page, input: { directory: string; extra
 
 export async function createTestProject() {
   const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-"))
-  const id = `e2e-${path.basename(root)}`
 
-  await fs.writeFile(path.join(root, "README.md"), `# e2e\n\n${id}\n`)
+  await fs.writeFile(path.join(root, "README.md"), "# e2e\n")
 
   execSync("git init", { cwd: root, stdio: "ignore" })
-  await fs.writeFile(path.join(root, ".git", "opencode"), id)
   execSync("git config core.fsmonitor false", { cwd: root, stdio: "ignore" })
   execSync("git add -A", { cwd: root, stdio: "ignore" })
   execSync('git -c user.name="e2e" -c user.email="e2e@example.com" commit -m "init" --allow-empty', {
@@ -395,24 +203,12 @@ export function slugFromUrl(url: string) {
   return /\/([^/]+)\/session(?:[/?#]|$)/.exec(url)?.[1] ?? ""
 }
 
-async function probeSession(page: Page) {
-  return page
-    .evaluate(() => {
-      const win = window as E2EWindow
-      const current = win.__opencode_e2e?.model?.current
-      if (!current) return null
-      return { dir: current.dir, sessionID: current.sessionID }
-    })
-    .catch(() => null as { dir?: string; sessionID?: string } | null)
-}
-
 export async function waitSlug(page: Page, skip: string[] = []) {
   let prev = ""
   let next = ""
   await expect
     .poll(
-      async () => {
+      () => {
-        await assertHealthy(page, "waitSlug")
         const slug = slugFromUrl(page.url())
         if (!slug) return ""
         if (skip.includes(slug)) return ""
@@ -430,94 +226,6 @@ export async function waitSlug(page: Page, skip: string[] = []) {
   return next
 }
 
-export async function resolveSlug(slug: string) {
-  const directory = base64Decode(slug)
-  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
-  const resolved = await resolveDirectory(directory)
-  return { directory: resolved, slug: base64Encode(resolved), raw: slug }
-}
-
-export async function waitDir(page: Page, directory: string) {
-  const target = await resolveDirectory(directory)
-  await expect
-    .poll(
-      async () => {
-        await assertHealthy(page, "waitDir")
-        const slug = slugFromUrl(page.url())
-        if (!slug) return ""
-        return resolveSlug(slug)
-          .then((item) => item.directory)
-          .catch(() => "")
-      },
-      { timeout: 45_000 },
-    )
-    .toBe(target)
-  return { directory: target, slug: base64Encode(target) }
-}
-
-export async function waitSession(page: Page, input: { directory: string; sessionID?: string }) {
-  const target = await resolveDirectory(input.directory)
-  await expect
-    .poll(
-      async () => {
-        await assertHealthy(page, "waitSession")
-        const slug = slugFromUrl(page.url())
-        if (!slug) return false
-        const resolved = await resolveSlug(slug).catch(() => undefined)
-        if (!resolved || resolved.directory !== target) return false
-        if (input.sessionID && sessionIDFromUrl(page.url()) !== input.sessionID) return false
-
-        const state = await probeSession(page)
-        if (input.sessionID && (!state || state.sessionID !== input.sessionID)) return false
-        if (state?.dir) {
-          const dir = await resolveDirectory(state.dir).catch(() => state.dir ?? "")
-          if (dir !== target) return false
-        }
-
-        return page
-          .locator(promptSelector)
-          .first()
-          .isVisible()
-          .catch(() => false)
-      },
-      { timeout: 45_000 },
-    )
-    .toBe(true)
-  return { directory: target, slug: base64Encode(target) }
-}
-
-export async function waitSessionSaved(directory: string, sessionID: string, timeout = 30_000) {
-  const sdk = createSdk(directory)
-  const target = await resolveDirectory(directory)
-
-  await expect
-    .poll(
-      async () => {
-        const data = await sdk.session
-          .get({ sessionID })
-          .then((x) => x.data)
-          .catch(() => undefined)
-        if (!data?.directory) return ""
-        return resolveDirectory(data.directory).catch(() => data.directory)
-      },
-      { timeout },
-    )
-    .toBe(target)
-
-  await expect
-    .poll(
-      async () => {
-        const items = await sdk.session
-          .messages({ sessionID, limit: 20 })
-          .then((x) => x.data ?? [])
-          .catch(() => [])
-        return items.some((item) => item.info.role === "user")
-      },
-      { timeout },
-    )
-    .toBe(true)
-}
-
 export function sessionIDFromUrl(url: string) {
   const match = /\/session\/([^/?#]+)/.exec(url)
   return match?.[1]
@@ -831,19 +539,12 @@ export async function seedSessionTask(
         .flatMap((message) => message.parts)
         .find((part) => {
           if (part.type !== "tool" || part.tool !== "task") return false
-          if (!("state" in part) || !part.state || typeof part.state !== "object") return false
+          if (part.state.input?.description !== input.description) return false
-          if (!("input" in part.state) || !part.state.input || typeof part.state.input !== "object") return false
+          return typeof part.state.metadata?.sessionId === "string" && part.state.metadata.sessionId.length > 0
-          if (!("description" in part.state.input) || part.state.input.description !== input.description) return false
-          if (!("metadata" in part.state) || !part.state.metadata || typeof part.state.metadata !== "object")
-            return false
-          if (!("sessionId" in part.state.metadata)) return false
-          return typeof part.state.metadata.sessionId === "string" && part.state.metadata.sessionId.length > 0
         })
 
-      if (!part || !("state" in part) || !part.state || typeof part.state !== "object") return
+      if (!part) return
-      if (!("metadata" in part.state) || !part.state.metadata || typeof part.state.metadata !== "object") return
+      const id = part.state.metadata?.sessionId
-      if (!("sessionId" in part.state.metadata)) return
-      const id = part.state.metadata.sessionId
       if (typeof id !== "string" || !id) return
       const child = await sdk.session
         .get({ sessionID: id })
@@ -929,14 +630,8 @@ export async function openStatusPopover(page: Page) {
 }
 
 export async function openProjectMenu(page: Page, projectSlug: string) {
-  await openSidebar(page)
-  const item = page.locator(projectSwitchSelector(projectSlug)).first()
-  await expect(item).toBeVisible()
-  await item.hover()
-
   const trigger = page.locator(projectMenuTriggerSelector(projectSlug)).first()
   await expect(trigger).toHaveCount(1)
-  await expect(trigger).toBeVisible()
 
   const menu = page
     .locator(dropdownMenuContentSelector)
@@ -945,7 +640,7 @@ export async function openProjectMenu(page: Page, projectSlug: string) {
   const close = menu.locator(projectCloseMenuSelector(projectSlug)).first()
 
   const clicked = await trigger
-    .click({ force: true, timeout: 1500 })
+    .click({ timeout: 1500 })
     .then(() => true)
     .catch(() => false)
 

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

@@ -3,11 +3,8 @@ import { serverNamePattern } from "../utils"
 
 test("home renders and shows core entrypoints", async ({ page }) => {
   await page.goto("/")
-  const nav = page.locator('[data-component="sidebar-nav-desktop"]')
 
   await expect(page.getByRole("button", { name: "Open project" }).first()).toBeVisible()
-  await expect(nav.getByText("No projects open")).toBeVisible()
-  await expect(nav.getByText("Open a project to get started")).toBeVisible()
   await expect(page.getByRole("button", { name: serverNamePattern })).toBeVisible()
 })
 

packages/app/e2e/fixtures.ts

@@ -1,16 +1,6 @@
 import { test as base, expect, type Page } from "@playwright/test"
-import type { E2EWindow } from "../src/testing/terminal"
+import { cleanupSession, cleanupTestProject, createTestProject, seedProjects, sessionIDFromUrl } from "./actions"
-import {
+import { promptSelector } from "./selectors"
-  healthPhase,
-  cleanupSession,
-  cleanupTestProject,
-  createTestProject,
-  setHealthPhase,
-  seedProjects,
-  sessionIDFromUrl,
-  waitSlug,
-  waitSession,
-} from "./actions"
 import { createSdk, dirSlug, getWorktree, sessionPath } from "./utils"
 
 export const settingsKey = "settings.v3"
@@ -36,29 +26,6 @@ type WorkerFixtures = {
 }
 
 export const test = base.extend<TestFixtures, WorkerFixtures>({
-  page: async ({ page }, use) => {
-    let boundary: string | undefined
-    setHealthPhase(page, "test")
-    const consoleHandler = (msg: { text(): string }) => {
-      const text = msg.text()
-      if (!text.includes("[e2e:error-boundary]")) return
-      if (healthPhase(page) === "cleanup") {
-        console.warn(`[e2e:error-boundary][cleanup-warning]\n${text}`)
-        return
-      }
-      boundary ||= text
-      console.log(text)
-    }
-    const pageErrorHandler = (err: Error) => {
-      console.log(`[e2e:pageerror] ${err.stack || err.message}`)
-    }
-    page.on("console", consoleHandler)
-    page.on("pageerror", pageErrorHandler)
-    await use(page)
-    page.off("console", consoleHandler)
-    page.off("pageerror", pageErrorHandler)
-    if (boundary) throw new Error(boundary)
-  },
   directory: [
     async ({}, use) => {
       const directory = await getWorktree()
@@ -80,20 +47,21 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
 
     const gotoSession = async (sessionID?: string) => {
       await page.goto(sessionPath(directory, sessionID))
-      await waitSession(page, { directory, sessionID })
+      await expect(page.locator(promptSelector)).toBeVisible()
     }
     await use(gotoSession)
   },
   withProject: async ({ page }, use) => {
     await use(async (callback, options) => {
       const root = await createTestProject()
+      const slug = dirSlug(root)
       const sessions = new Map<string, string>()
       const dirs = new Set<string>()
       await seedStorage(page, { directory: root, extra: options?.extra })
 
       const gotoSession = async (sessionID?: string) => {
         await page.goto(sessionPath(root, sessionID))
-        await waitSession(page, { directory: root, sessionID })
+        await expect(page.locator(promptSelector)).toBeVisible()
         const current = sessionIDFromUrl(page.url())
         if (current) trackSession(current)
       }
@@ -108,16 +76,13 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
 
       try {
         await gotoSession()
-        const slug = await waitSlug(page)
         return await callback({ directory: root, slug, gotoSession, trackSession, trackDirectory })
       } finally {
-        setHealthPhase(page, "cleanup")
         await Promise.allSettled(
           Array.from(sessions, ([sessionID, directory]) => cleanupSession({ sessionID, directory })),
         )
         await Promise.allSettled(Array.from(dirs, (directory) => cleanupTestProject(directory)))
         await cleanupTestProject(root)
-        setHealthPhase(page, "test")
       }
     })
   },
@@ -126,20 +91,6 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
 async function seedStorage(page: Page, input: { directory: string; extra?: string[] }) {
   await seedProjects(page, input)
   await page.addInitScript(() => {
-    const win = window as E2EWindow
-    win.__opencode_e2e = {
-      ...win.__opencode_e2e,
-      model: {
-        enabled: true,
-      },
-      prompt: {
-        enabled: true,
-      },
-      terminal: {
-        enabled: true,
-        terminals: {},
-      },
-    }
     localStorage.setItem(
       "opencode.global.dat:model",
       JSON.stringify({

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

@@ -1,19 +1,41 @@
 import { base64Decode } from "@opencode-ai/util/encode"
+import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import {
+import { defocus, createTestProject, cleanupTestProject, openSidebar, sessionIDFromUrl, waitSlug } from "../actions"
-  defocus,
-  createTestProject,
-  cleanupTestProject,
-  openSidebar,
-  sessionIDFromUrl,
-  setWorkspacesEnabled,
-  waitSession,
-  waitSessionSaved,
-  waitSlug,
-} from "../actions"
 import { projectSwitchSelector, promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 import { dirSlug, resolveDirectory } from "../utils"
 
+async function workspaces(page: Page, directory: string, enabled: boolean) {
+  await page.evaluate(
+    ({ directory, enabled }: { directory: string; enabled: boolean }) => {
+      const key = "opencode.global.dat:layout"
+      const raw = localStorage.getItem(key)
+      const data = raw ? JSON.parse(raw) : {}
+      const sidebar = data.sidebar && typeof data.sidebar === "object" ? data.sidebar : {}
+      const current =
+        sidebar.workspaces && typeof sidebar.workspaces === "object" && !Array.isArray(sidebar.workspaces)
+          ? sidebar.workspaces
+          : {}
+      const next = { ...current }
+
+      if (enabled) next[directory] = true
+      if (!enabled) delete next[directory]
+
+      localStorage.setItem(
+        key,
+        JSON.stringify({
+          ...data,
+          sidebar: {
+            ...sidebar,
+            workspaces: next,
+          },
+        }),
+      )
+    },
+    { directory, enabled },
+  )
+}
+
 test("can switch between projects from sidebar", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
@@ -54,7 +76,9 @@ test("switching back to a project opens the latest workspace session", async ({
     await withProject(
       async ({ directory, slug, trackSession, trackDirectory }) => {
         await defocus(page)
-        await setWorkspacesEnabled(page, slug, true)
+        await workspaces(page, directory, true)
+        await page.reload()
+        await expect(page.locator(promptSelector)).toBeVisible()
         await openSidebar(page)
         await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
 
@@ -76,7 +100,11 @@ test("switching back to a project opens the latest workspace session", async ({
         await expect(btn).toBeVisible()
         await btn.click({ force: true })
 
-        await waitSession(page, { directory: space })
+        // A new workspace can be discovered via a transient slug before the route and sidebar
+        // settle to the canonical workspace path on Windows, so interact with either and assert
+        // against the resolved workspace slug.
+        await waitSlug(page)
+        await expect(page).toHaveURL(new RegExp(`/${next}/session(?:[/?#]|$)`))
 
         // Create a session by sending a prompt
         const prompt = page.locator(promptSelector)
@@ -90,7 +118,6 @@ test("switching back to a project opens the latest workspace session", async ({
         const created = sessionIDFromUrl(page.url())
         if (!created) throw new Error(`Failed to get session ID from url: ${page.url()}`)
         trackSession(created, space)
-        await waitSessionSaved(space, created)
 
         await expect(page).toHaveURL(new RegExp(`/${next}/session/${created}(?:[/?#]|$)`))
 
@@ -98,14 +125,14 @@ test("switching back to a project opens the latest workspace session", async ({
 
         const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
         await expect(otherButton).toBeVisible()
-        await otherButton.click({ force: true })
+        await otherButton.click()
-        await waitSession(page, { directory: other })
+        await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
 
         const rootButton = page.locator(projectSwitchSelector(slug)).first()
         await expect(rootButton).toBeVisible()
-        await rootButton.click({ force: true })
+        await rootButton.click()
 
-        await waitSession(page, { directory: space, sessionID: created })
+        await expect.poll(() => sessionIDFromUrl(page.url()) ?? "").toBe(created)
         await expect(page).toHaveURL(new RegExp(`/session/${created}(?:[/?#]|$)`))
       },
       { extra: [other] },

packages/app/e2e/projects/workspace-new-session.spec.ts

@@ -1,94 +1,109 @@
+import { base64Decode } from "@opencode-ai/util/encode"
 import type { Page } from "@playwright/test"
 import { test, expect } from "../fixtures"
-import {
+import { openSidebar, sessionIDFromUrl, setWorkspacesEnabled, slugFromUrl, waitSlug } from "../actions"
-  openSidebar,
-  resolveSlug,
-  sessionIDFromUrl,
-  setWorkspacesEnabled,
-  waitDir,
-  waitSession,
-  waitSessionSaved,
-  waitSlug,
-} from "../actions"
 import { promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
 import { createSdk } from "../utils"
 
-function item(space: { slug: string; raw: string }) {
+async function waitWorkspaceReady(page: Page, slug: string) {
-  return `${workspaceItemSelector(space.slug)}, ${workspaceItemSelector(space.raw)}`
-}
-
-function button(space: { slug: string; raw: string }) {
-  return `${workspaceNewSessionSelector(space.slug)}, ${workspaceNewSessionSelector(space.raw)}`
-}
-
-async function waitWorkspaceReady(page: Page, space: { slug: string; raw: string }) {
   await openSidebar(page)
-  await expect(page.locator(item(space)).first()).toBeVisible({ timeout: 60_000 })
+  await expect
+    .poll(
+      async () => {
+        const item = page.locator(workspaceItemSelector(slug)).first()
+        try {
+          await item.hover({ timeout: 500 })
+          return true
+        } catch {
+          return false
+        }
+      },
+      { timeout: 60_000 },
+    )
+    .toBe(true)
 }
 
 async function createWorkspace(page: Page, root: string, seen: string[]) {
   await openSidebar(page)
   await page.getByRole("button", { name: "New workspace" }).first().click()
 
-  const next = await resolveSlug(await waitSlug(page, [root, ...seen]))
+  const slug = await waitSlug(page, [root, ...seen])
-  await waitDir(page, next.directory)
+  const directory = base64Decode(slug)
+  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
+  return { slug, directory }
+}
+
+async function openWorkspaceNewSession(page: Page, slug: string) {
+  await waitWorkspaceReady(page, slug)
+
+  const item = page.locator(workspaceItemSelector(slug)).first()
+  await item.hover()
+
+  const button = page.locator(workspaceNewSessionSelector(slug)).first()
+  await expect(button).toBeVisible()
+  await button.click({ force: true })
+
+  const next = await waitSlug(page)
+  await expect(page).toHaveURL(new RegExp(`/${next}/session(?:[/?#]|$)`))
   return next
 }
 
-async function openWorkspaceNewSession(page: Page, space: { slug: string; raw: string; directory: string }) {
+async function createSessionFromWorkspace(page: Page, slug: string, text: string) {
-  await waitWorkspaceReady(page, space)
+  const next = await openWorkspaceNewSession(page, slug)
-
-  const row = page.locator(item(space)).first()
-  await row.hover()
-
-  const next = page.locator(button(space)).first()
-  await expect(next).toBeVisible()
-  await next.click({ force: true })
-
-  await waitSession(page, { directory: space.directory })
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "").toBe("")
-}
-
-async function createSessionFromWorkspace(
-  page: Page,
-  space: { slug: string; raw: string; directory: string },
-  text: string,
-) {
-  await openWorkspaceNewSession(page, space)
 
   const prompt = page.locator(promptSelector)
   await expect(prompt).toBeVisible()
+  await expect(prompt).toBeEditable()
+  await prompt.click()
+  await expect(prompt).toBeFocused()
   await prompt.fill(text)
-  await page.keyboard.press("Enter")
+  await expect.poll(async () => ((await prompt.textContent()) ?? "").trim()).toContain(text)
+  await prompt.press("Enter")
+
+  await expect.poll(() => slugFromUrl(page.url())).toBe(next)
+  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
 
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 15_000 }).not.toBe("")
   const sessionID = sessionIDFromUrl(page.url())
   if (!sessionID) throw new Error(`Failed to parse session id from url: ${page.url()}`)
+  await expect(page).toHaveURL(new RegExp(`/${next}/session/${sessionID}(?:[/?#]|$)`))
+  return { sessionID, slug: next }
+}
 
-  await waitSessionSaved(space.directory, sessionID)
+async function sessionDirectory(directory: string, sessionID: string) {
-  await createSdk(space.directory)
+  const info = await createSdk(directory)
-    .session.abort({ sessionID })
+    .session.get({ sessionID })
+    .then((x) => x.data)
     .catch(() => undefined)
-  return sessionID
+  if (!info) return ""
+  return info.directory
 }
 
 test("new sessions from sidebar workspace actions stay in selected workspace", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
-  await withProject(async ({ slug: root, trackDirectory, trackSession }) => {
+  await withProject(async ({ directory, slug: root, trackSession, trackDirectory }) => {
     await openSidebar(page)
     await setWorkspacesEnabled(page, root, true)
 
     const first = await createWorkspace(page, root, [])
     trackDirectory(first.directory)
-    await waitWorkspaceReady(page, first)
+    await waitWorkspaceReady(page, first.slug)
 
     const second = await createWorkspace(page, root, [first.slug])
     trackDirectory(second.directory)
-    await waitWorkspaceReady(page, second)
+    await waitWorkspaceReady(page, second.slug)
 
-    trackSession(await createSessionFromWorkspace(page, first, `workspace one ${Date.now()}`), first.directory)
+    const firstSession = await createSessionFromWorkspace(page, first.slug, `workspace one ${Date.now()}`)
-    trackSession(await createSessionFromWorkspace(page, second, `workspace two ${Date.now()}`), second.directory)
+    trackSession(firstSession.sessionID, first.directory)
-    trackSession(await createSessionFromWorkspace(page, first, `workspace one again ${Date.now()}`), first.directory)
+
+    const secondSession = await createSessionFromWorkspace(page, second.slug, `workspace two ${Date.now()}`)
+    trackSession(secondSession.sessionID, second.directory)
+
+    const thirdSession = await createSessionFromWorkspace(page, first.slug, `workspace one again ${Date.now()}`)
+    trackSession(thirdSession.sessionID, first.directory)
+
+    await expect.poll(() => sessionDirectory(first.directory, firstSession.sessionID)).toBe(first.directory)
+    await expect.poll(() => sessionDirectory(second.directory, secondSession.sessionID)).toBe(second.directory)
+    await expect.poll(() => sessionDirectory(first.directory, thirdSession.sessionID)).toBe(first.directory)
   })
 })

packages/app/e2e/projects/workspaces.spec.ts

@@ -1,7 +1,7 @@
+import { base64Decode } from "@opencode-ai/util/encode"
 import fs from "node:fs/promises"
 import os from "node:os"
 import path from "node:path"
-import { base64Decode } from "@opencode-ai/util/encode"
 import type { Page } from "@playwright/test"
 
 import { test, expect } from "../fixtures"
@@ -13,10 +13,8 @@ import {
   confirmDialog,
   openSidebar,
   openWorkspaceMenu,
-  resolveSlug,
   setWorkspacesEnabled,
   slugFromUrl,
-  waitDir,
   waitSlug,
 } from "../actions"
 import { dropdownMenuContentSelector, inlineInputSelector, workspaceItemSelector } from "../selectors"
@@ -29,15 +27,15 @@ async function setupWorkspaceTest(page: Page, project: { slug: string }) {
   await setWorkspacesEnabled(page, rootSlug, true)
 
   await page.getByRole("button", { name: "New workspace" }).first().click()
-  const next = await resolveSlug(await waitSlug(page, [rootSlug]))
+  const slug = await waitSlug(page, [rootSlug])
-  await waitDir(page, next.directory)
+  const dir = base64Decode(slug)
 
   await openSidebar(page)
 
   await expect
     .poll(
       async () => {
-        const item = page.locator(workspaceItemSelector(next.slug)).first()
+        const item = page.locator(workspaceItemSelector(slug)).first()
         try {
           await item.hover({ timeout: 500 })
           return true
@@ -49,7 +47,7 @@ async function setupWorkspaceTest(page: Page, project: { slug: string }) {
     )
     .toBe(true)
 
-  return { rootSlug, slug: next.slug, directory: next.directory }
+  return { rootSlug, slug, directory: dir }
 }
 
 test("can enable and disable workspaces from project menu", async ({ page, withProject }) => {
@@ -81,15 +79,15 @@ test("can create a workspace", async ({ page, withProject }) => {
     await expect(page.getByRole("button", { name: "New workspace" }).first()).toBeVisible()
 
     await page.getByRole("button", { name: "New workspace" }).first().click()
-    const next = await resolveSlug(await waitSlug(page, [slug]))
+    const workspaceSlug = await waitSlug(page, [slug])
-    await waitDir(page, next.directory)
+    const workspaceDir = base64Decode(workspaceSlug)
 
     await openSidebar(page)
 
     await expect
       .poll(
         async () => {
-          const item = page.locator(workspaceItemSelector(next.slug)).first()
+          const item = page.locator(workspaceItemSelector(workspaceSlug)).first()
           try {
             await item.hover({ timeout: 500 })
             return true
@@ -101,9 +99,9 @@ test("can create a workspace", async ({ page, withProject }) => {
       )
       .toBe(true)
 
-    await expect(page.locator(workspaceItemSelector(next.slug)).first()).toBeVisible()
+    await expect(page.locator(workspaceItemSelector(workspaceSlug)).first()).toBeVisible()
 
-    await cleanupTestProject(next.directory)
+    await cleanupTestProject(workspaceDir)
   })
 })
 
@@ -121,7 +119,7 @@ test("non-git projects keep workspace mode disabled", async ({ page, withProject
 
       await expect.poll(() => slugFromUrl(page.url()), { timeout: 30_000 }).not.toBe("")
 
-      const activeDir = await resolveSlug(slugFromUrl(page.url())).then((item) => item.directory)
+      const activeDir = base64Decode(slugFromUrl(page.url()))
       expect(path.basename(activeDir)).toContain("opencode-e2e-project-nongit-")
 
       await openSidebar(page)
@@ -333,9 +331,9 @@ test("can reorder workspaces by drag and drop", async ({ page, withProject }) =>
       for (const _ of [0, 1]) {
         const prev = slugFromUrl(page.url())
         await page.getByRole("button", { name: "New workspace" }).first().click()
-        const next = await resolveSlug(await waitSlug(page, [rootSlug, prev]))
+        const slug = await waitSlug(page, [rootSlug, prev])
-        await waitDir(page, next.directory)
+        const dir = base64Decode(slug)
-        workspaces.push(next)
+        workspaces.push({ slug, directory: dir })
 
         await openSidebar(page)
       }

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

@@ -7,18 +7,12 @@ test("shift+enter inserts a newline without submitting", async ({ page, gotoSess
   await expect(page).toHaveURL(/\/session\/?$/)
 
   const prompt = page.locator(promptSelector)
-  await prompt.focus()
+  await prompt.click()
-  await expect(prompt).toBeFocused()
+  await page.keyboard.type("line one")
-
+  await page.keyboard.press("Shift+Enter")
-  await prompt.pressSequentially("line one")
+  await page.keyboard.type("line two")
-  await expect(prompt).toBeFocused()
-
-  await prompt.press("Shift+Enter")
-  await expect(page).toHaveURL(/\/session\/?$/)
-  await expect(prompt).toBeFocused()
-
-  await prompt.pressSequentially("line two")
 
   await expect(page).toHaveURL(/\/session\/?$/)
-  await expect.poll(() => prompt.evaluate((el) => el.innerText)).toBe("line one\nline two")
+  await expect(prompt).toContainText("line one")
+  await expect(prompt).toContainText("line two")
 })

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

@@ -1,5 +1,4 @@
 import { test, expect } from "../fixtures"
-import { runPromptSlash, waitTerminalFocusIdle } from "../actions"
 import { promptSelector, terminalSelector } from "../selectors"
 
 test("/terminal toggles the terminal panel", async ({ page, gotoSession }) => {
@@ -10,9 +9,15 @@ test("/terminal toggles the terminal panel", async ({ page, gotoSession }) => {
 
   await expect(terminal).not.toBeVisible()
 
-  await runPromptSlash(page, { prompt, text: "/terminal", id: "terminal.toggle" })
+  await prompt.click()
-  await waitTerminalFocusIdle(page, { term: terminal })
+  await page.keyboard.type("/terminal")
+  await expect(page.locator('[data-slash-id="terminal.toggle"]').first()).toBeVisible()
+  await page.keyboard.press("Enter")
+  await expect(terminal).toBeVisible()
 
-  await runPromptSlash(page, { prompt, text: "/terminal", id: "terminal.toggle" })
+  await prompt.click()
+  await page.keyboard.type("/terminal")
+  await expect(page.locator('[data-slash-id="terminal.toggle"]').first()).toBeVisible()
+  await page.keyboard.press("Enter")
   await expect(terminal).not.toBeVisible()
 })

packages/app/e2e/selectors.ts

@@ -1,6 +1,5 @@
 export const promptSelector = '[data-component="prompt-input"]'
-export const terminalPanelSelector = '#terminal-panel[aria-hidden="false"]'
+export const terminalSelector = '[data-component="terminal"]'
-export const terminalSelector = `${terminalPanelSelector} [data-component="terminal"]`
 export const sessionComposerDockSelector = '[data-component="session-prompt-dock"]'
 export const questionDockSelector = '[data-component="dock-prompt"][data-kind="question"]'
 export const permissionDockSelector = '[data-component="dock-prompt"][data-kind="permission"]'
@@ -13,9 +12,6 @@ export const sessionTodoToggleButtonSelector = '[data-action="session-todo-toggl
 export const sessionTodoListSelector = '[data-slot="session-todo-list"]'
 
 export const modelVariantCycleSelector = '[data-action="model-variant-cycle"]'
-export const promptAgentSelector = '[data-component="prompt-agent-control"]'
-export const promptModelSelector = '[data-component="prompt-model-control"]'
-export const promptVariantSelector = '[data-component="prompt-variant-control"]'
 export const settingsLanguageSelectSelector = '[data-action="settings-language"]'
 export const settingsColorSchemeSelector = '[data-action="settings-color-scheme"]'
 export const settingsThemeSelector = '[data-action="settings-theme"]'

packages/app/e2e/session/session-composer-dock.spec.ts

@@ -1,16 +1,12 @@
 import { test, expect } from "../fixtures"
-import {
+import { cleanupSession, clearSessionDockSeed, seedSessionQuestion, seedSessionTodos } from "../actions"
-  composerEvent,
-  type ComposerDriverState,
-  type ComposerProbeState,
-  type ComposerWindow,
-} from "../../src/testing/session-composer"
-import { cleanupSession, clearSessionDockSeed, seedSessionQuestion } from "../actions"
 import {
   permissionDockSelector,
   promptSelector,
   questionDockSelector,
   sessionComposerDockSelector,
+  sessionTodoDockSelector,
+  sessionTodoListSelector,
   sessionTodoToggleButtonSelector,
 } from "../selectors"
 
@@ -46,8 +42,12 @@ async function withDockSeed<T>(sdk: Sdk, sessionID: string, fn: () => Promise<T>
 
 async function clearPermissionDock(page: any, label: RegExp) {
   const dock = page.locator(permissionDockSelector)
-  await expect(dock).toBeVisible()
+  for (let i = 0; i < 3; i++) {
-  await dock.getByRole("button", { name: label }).click()
+    const count = await dock.count()
+    if (count === 0) return
+    await dock.getByRole("button", { name: label }).click()
+    await page.waitForTimeout(150)
+  }
 }
 
 async function setAutoAccept(page: any, enabled: boolean) {
@@ -59,120 +59,6 @@ async function setAutoAccept(page: any, enabled: boolean) {
   await expect(button).toHaveAttribute("aria-pressed", enabled ? "true" : "false")
 }
 
-async function expectQuestionBlocked(page: any) {
-  await expect(page.locator(questionDockSelector)).toBeVisible()
-  await expect(page.locator(promptSelector)).toHaveCount(0)
-}
-
-async function expectQuestionOpen(page: any) {
-  await expect(page.locator(questionDockSelector)).toHaveCount(0)
-  await expect(page.locator(promptSelector)).toBeVisible()
-}
-
-async function expectPermissionBlocked(page: any) {
-  await expect(page.locator(permissionDockSelector)).toBeVisible()
-  await expect(page.locator(promptSelector)).toHaveCount(0)
-}
-
-async function expectPermissionOpen(page: any) {
-  await expect(page.locator(permissionDockSelector)).toHaveCount(0)
-  await expect(page.locator(promptSelector)).toBeVisible()
-}
-
-async function todoDock(page: any, sessionID: string) {
-  await page.addInitScript(() => {
-    const win = window as ComposerWindow
-    win.__opencode_e2e = {
-      ...win.__opencode_e2e,
-      composer: {
-        enabled: true,
-        sessions: {},
-      },
-    }
-  })
-
-  const write = async (driver: ComposerDriverState | undefined) => {
-    await page.evaluate(
-      (input) => {
-        const win = window as ComposerWindow
-        const composer = win.__opencode_e2e?.composer
-        if (!composer?.enabled) throw new Error("Composer e2e driver is not enabled")
-        composer.sessions ??= {}
-        const prev = composer.sessions[input.sessionID] ?? {}
-        if (!input.driver) {
-          if (!prev.probe) {
-            delete composer.sessions[input.sessionID]
-          } else {
-            composer.sessions[input.sessionID] = { probe: prev.probe }
-          }
-        } else {
-          composer.sessions[input.sessionID] = {
-            ...prev,
-            driver: input.driver,
-          }
-        }
-        window.dispatchEvent(new CustomEvent(input.event, { detail: { sessionID: input.sessionID } }))
-      },
-      { event: composerEvent, sessionID, driver },
-    )
-  }
-
-  const read = () =>
-    page.evaluate((sessionID) => {
-      const win = window as ComposerWindow
-      return win.__opencode_e2e?.composer?.sessions?.[sessionID]?.probe ?? null
-    }, sessionID) as Promise<ComposerProbeState | null>
-
-  const api = {
-    async clear() {
-      await write(undefined)
-      return api
-    },
-    async open(todos: NonNullable<ComposerDriverState["todos"]>) {
-      await write({ live: true, todos })
-      return api
-    },
-    async finish(todos: NonNullable<ComposerDriverState["todos"]>) {
-      await write({ live: false, todos })
-      return api
-    },
-    async expectOpen(states: ComposerProbeState["states"]) {
-      await expect.poll(read, { timeout: 10_000 }).toMatchObject({
-        mounted: true,
-        collapsed: false,
-        hidden: false,
-        count: states.length,
-        states,
-      })
-      return api
-    },
-    async expectCollapsed(states: ComposerProbeState["states"]) {
-      await expect.poll(read, { timeout: 10_000 }).toMatchObject({
-        mounted: true,
-        collapsed: true,
-        hidden: true,
-        count: states.length,
-        states,
-      })
-      return api
-    },
-    async expectClosed() {
-      await expect.poll(read, { timeout: 10_000 }).toMatchObject({ mounted: false })
-      return api
-    },
-    async collapse() {
-      await page.locator(sessionTodoToggleButtonSelector).click()
-      return api
-    },
-    async expand() {
-      await page.locator(sessionTodoToggleButtonSelector).click()
-      return api
-    },
-  }
-
-  return api
-}
-
 async function withMockPermission<T>(
   page: any,
   request: {
@@ -184,7 +70,7 @@ async function withMockPermission<T>(
     always?: string[]
   },
   opts: { child?: any } | undefined,
-  fn: (state: { resolved: () => Promise<void> }) => Promise<T>,
+  fn: () => Promise<T>,
 ) {
   let pending = [
     {
@@ -233,14 +119,8 @@ async function withMockPermission<T>(
 
   if (sessionList) await page.route("**/session?*", sessionList)
 
-  const state = {
-    async resolved() {
-      await expect.poll(() => pending.length, { timeout: 10_000 }).toBe(0)
-    },
-  }
-
   try {
-    return await fn(state)
+    return await fn()
   } finally {
     await page.unroute("**/permission", list)
     await page.unroute("**/session/*/permissions/*", reply)
@@ -293,12 +173,14 @@ test("blocked question flow unblocks after submit", async ({ page, sdk, gotoSess
       })
 
       const dock = page.locator(questionDockSelector)
-      await expectQuestionBlocked(page)
+      await expect.poll(() => dock.count(), { timeout: 10_000 }).toBe(1)
+      await expect(page.locator(promptSelector)).toHaveCount(0)
 
       await dock.locator('[data-slot="question-option"]').first().click()
       await dock.getByRole("button", { name: /submit/i }).click()
 
-      await expectQuestionOpen(page)
+      await expect.poll(() => page.locator(questionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+      await expect(page.locator(promptSelector)).toBeVisible()
     })
   })
 })
@@ -317,14 +199,15 @@ test("blocked permission flow supports allow once", async ({ page, sdk, gotoSess
         metadata: { description: "Need permission for command" },
       },
       undefined,
-      async (state) => {
+      async () => {
         await page.goto(page.url())
-        await expectPermissionBlocked(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(1)
+        await expect(page.locator(promptSelector)).toHaveCount(0)
 
         await clearPermissionDock(page, /allow once/i)
-        await state.resolved()
         await page.goto(page.url())
-        await expectPermissionOpen(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+        await expect(page.locator(promptSelector)).toBeVisible()
       },
     )
   })
@@ -343,14 +226,15 @@ test("blocked permission flow supports reject", async ({ page, sdk, gotoSession
         patterns: ["/tmp/opencode-e2e-perm-reject"],
       },
       undefined,
-      async (state) => {
+      async () => {
         await page.goto(page.url())
-        await expectPermissionBlocked(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(1)
+        await expect(page.locator(promptSelector)).toHaveCount(0)
 
         await clearPermissionDock(page, /deny/i)
-        await state.resolved()
         await page.goto(page.url())
-        await expectPermissionOpen(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+        await expect(page.locator(promptSelector)).toBeVisible()
       },
     )
   })
@@ -370,14 +254,15 @@ test("blocked permission flow supports allow always", async ({ page, sdk, gotoSe
         metadata: { description: "Need permission for command" },
       },
       undefined,
-      async (state) => {
+      async () => {
         await page.goto(page.url())
-        await expectPermissionBlocked(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(1)
+        await expect(page.locator(promptSelector)).toHaveCount(0)
 
         await clearPermissionDock(page, /allow always/i)
-        await state.resolved()
         await page.goto(page.url())
-        await expectPermissionOpen(page)
+        await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+        await expect(page.locator(promptSelector)).toBeVisible()
       },
     )
   })
@@ -416,12 +301,14 @@ test("child session question request blocks parent dock and unblocks after submi
         })
 
         const dock = page.locator(questionDockSelector)
-        await expectQuestionBlocked(page)
+        await expect.poll(() => dock.count(), { timeout: 10_000 }).toBe(1)
+        await expect(page.locator(promptSelector)).toHaveCount(0)
 
         await dock.locator('[data-slot="question-option"]').first().click()
         await dock.getByRole("button", { name: /submit/i }).click()
 
-        await expectQuestionOpen(page)
+        await expect.poll(() => page.locator(questionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+        await expect(page.locator(promptSelector)).toBeVisible()
       })
     } finally {
       await cleanupSession({ sdk, sessionID: child.id })
@@ -457,15 +344,17 @@ test("child session permission request blocks parent dock and supports allow onc
           metadata: { description: "Need child permission" },
         },
         { child },
-        async (state) => {
+        async () => {
           await page.goto(page.url())
-          await expectPermissionBlocked(page)
+          const dock = page.locator(permissionDockSelector)
+          await expect.poll(() => dock.count(), { timeout: 10_000 }).toBe(1)
+          await expect(page.locator(promptSelector)).toHaveCount(0)
 
           await clearPermissionDock(page, /allow once/i)
-          await state.resolved()
           await page.goto(page.url())
 
-          await expectPermissionOpen(page)
+          await expect.poll(() => page.locator(permissionDockSelector).count(), { timeout: 10_000 }).toBe(0)
+          await expect(page.locator(promptSelector)).toBeVisible()
         },
       )
     } finally {
@@ -476,31 +365,36 @@ test("child session permission request blocks parent dock and supports allow onc
 
 test("todo dock transitions and collapse behavior", async ({ page, sdk, gotoSession }) => {
   await withDockSession(sdk, "e2e composer dock todo", async (session) => {
-    const dock = await todoDock(page, session.id)
+    await withDockSeed(sdk, session.id, async () => {
-    await gotoSession(session.id)
+      await gotoSession(session.id)
-    await expect(page.locator(sessionComposerDockSelector)).toBeVisible()
 
-    try {
+      await seedSessionTodos(sdk, {
-      await dock.open([
+        sessionID: session.id,
-        { content: "first task", status: "pending", priority: "high" },
+        todos: [
-        { content: "second task", status: "in_progress", priority: "medium" },
+          { content: "first task", status: "pending", priority: "high" },
-      ])
+          { content: "second task", status: "in_progress", priority: "medium" },
-      await dock.expectOpen(["pending", "in_progress"])
+        ],
+      })
 
-      await dock.collapse()
+      await expect.poll(() => page.locator(sessionTodoDockSelector).count(), { timeout: 10_000 }).toBe(1)
-      await dock.expectCollapsed(["pending", "in_progress"])
+      await expect(page.locator(sessionTodoListSelector)).toBeVisible()
 
-      await dock.expand()
+      await page.locator(sessionTodoToggleButtonSelector).click()
-      await dock.expectOpen(["pending", "in_progress"])
+      await expect(page.locator(sessionTodoListSelector)).toBeHidden()
 
-      await dock.finish([
+      await page.locator(sessionTodoToggleButtonSelector).click()
-        { content: "first task", status: "completed", priority: "high" },
+      await expect(page.locator(sessionTodoListSelector)).toBeVisible()
-        { content: "second task", status: "cancelled", priority: "medium" },
+
-      ])
+      await seedSessionTodos(sdk, {
-      await dock.expectClosed()
+        sessionID: session.id,
-    } finally {
+        todos: [
-      await dock.clear()
+          { content: "first task", status: "completed", priority: "high" },
-    }
+          { content: "second task", status: "cancelled", priority: "medium" },
+        ],
+      })
+
+      await expect.poll(() => page.locator(sessionTodoDockSelector).count(), { timeout: 10_000 }).toBe(0)
+    })
   })
 })
 
@@ -520,7 +414,8 @@ test("keyboard focus stays off prompt while blocked", async ({ page, sdk, gotoSe
         ],
       })
 
-      await expectQuestionBlocked(page)
+      await expect.poll(() => page.locator(questionDockSelector).count(), { timeout: 10_000 }).toBe(1)
+      await expect(page.locator(promptSelector)).toHaveCount(0)
 
       await page.locator("main").click({ position: { x: 5, y: 5 } })
       await page.keyboard.type("abc")

packages/app/e2e/session/session-model-persistence.spec.ts

@@ -1,359 +0,0 @@
-import type { Locator, Page } from "@playwright/test"
-import { test, expect } from "../fixtures"
-import {
-  openSidebar,
-  resolveSlug,
-  sessionIDFromUrl,
-  setWorkspacesEnabled,
-  waitSession,
-  waitSessionIdle,
-  waitSlug,
-} from "../actions"
-import {
-  promptAgentSelector,
-  promptModelSelector,
-  promptSelector,
-  promptVariantSelector,
-  workspaceItemSelector,
-  workspaceNewSessionSelector,
-} from "../selectors"
-import { createSdk, sessionPath } from "../utils"
-
-type Footer = {
-  agent: string
-  model: string
-  variant: string
-}
-
-type Probe = {
-  dir?: string
-  sessionID?: string
-  model?: { providerID: string; modelID: string }
-}
-
-const escape = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-
-const text = async (locator: Locator) => ((await locator.textContent()) ?? "").trim()
-
-const modelKey = (state: Probe | null) => (state?.model ? `${state.model.providerID}:${state.model.modelID}` : null)
-
-async function probe(page: Page): Promise<Probe | null> {
-  return page.evaluate(() => {
-    const win = window as Window & {
-      __opencode_e2e?: {
-        model?: {
-          current?: Probe
-        }
-      }
-    }
-    return win.__opencode_e2e?.model?.current ?? null
-  })
-}
-
-async function read(page: Page): Promise<Footer> {
-  return {
-    agent: await text(page.locator(`${promptAgentSelector} [data-slot="select-select-trigger-value"]`).first()),
-    model: await text(page.locator(`${promptModelSelector} [data-action="prompt-model"] span`).first()),
-    variant: await text(page.locator(`${promptVariantSelector} [data-slot="select-select-trigger-value"]`).first()),
-  }
-}
-
-async function waitFooter(page: Page, expected: Partial<Footer>) {
-  let hit: Footer | null = null
-  await expect
-    .poll(
-      async () => {
-        const state = await read(page)
-        const ok = Object.entries(expected).every(([key, value]) => state[key as keyof Footer] === value)
-        if (ok) hit = state
-        return ok
-      },
-      { timeout: 30_000 },
-    )
-    .toBe(true)
-  if (!hit) throw new Error("Failed to resolve prompt footer state")
-  return hit
-}
-
-async function waitModel(page: Page, value: string) {
-  await expect.poll(() => probe(page).then(modelKey), { timeout: 30_000 }).toBe(value)
-}
-
-async function choose(page: Page, root: string, value: string) {
-  const select = page.locator(root)
-  await expect(select).toBeVisible()
-  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
-  const item = page
-    .locator('[data-slot="select-select-item"]')
-    .filter({ hasText: new RegExp(`^\\s*${escape(value)}\\s*$`) })
-    .first()
-  await expect(item).toBeVisible()
-  await item.click()
-}
-
-async function variantCount(page: Page) {
-  const select = page.locator(promptVariantSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-slot="select-select-trigger"]').click()
-  const count = await page.locator('[data-slot="select-select-item"]').count()
-  await page.keyboard.press("Escape")
-  return count
-}
-
-async function agents(page: Page) {
-  const select = page.locator(promptAgentSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
-  const labels = await page.locator('[data-slot="select-select-item-label"]').allTextContents()
-  await page.keyboard.press("Escape")
-  return labels.map((item) => item.trim()).filter(Boolean)
-}
-
-async function ensureVariant(page: Page, directory: string): Promise<Footer> {
-  const current = await read(page)
-  if ((await variantCount(page)) >= 2) return current
-
-  const cfg = await createSdk(directory)
-    .config.get()
-    .then((x) => x.data)
-  const visible = new Set(await agents(page))
-  const entry = Object.entries(cfg?.agent ?? {}).find((item) => {
-    const value = item[1]
-    return !!value && typeof value === "object" && "variant" in value && "model" in value && visible.has(item[0])
-  })
-  const name = entry?.[0]
-  test.skip(!name, "no agent with alternate variants available")
-  if (!name) return current
-
-  await choose(page, promptAgentSelector, name)
-  await expect.poll(() => variantCount(page), { timeout: 30_000 }).toBeGreaterThanOrEqual(2)
-  return waitFooter(page, { agent: name })
-}
-
-async function chooseDifferentVariant(page: Page): Promise<Footer> {
-  const current = await read(page)
-  const select = page.locator(promptVariantSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-slot="select-select-trigger"]').click()
-
-  const items = page.locator('[data-slot="select-select-item"]')
-  const count = await items.count()
-  if (count < 2) throw new Error("Current model has no alternate variant to select")
-
-  for (let i = 0; i < count; i++) {
-    const item = items.nth(i)
-    const next = await text(item.locator('[data-slot="select-select-item-label"]').first())
-    if (!next || next === current.variant) continue
-    await item.click()
-    return waitFooter(page, { agent: current.agent, model: current.model, variant: next })
-  }
-
-  throw new Error("Failed to choose a different variant")
-}
-
-async function chooseOtherModel(page: Page): Promise<Footer> {
-  const current = await read(page)
-  const button = page.locator(`${promptModelSelector} [data-action="prompt-model"]`)
-  await expect(button).toBeVisible()
-  await button.click()
-
-  const dialog = page.getByRole("dialog")
-  await expect(dialog).toBeVisible()
-  const items = dialog.locator('[data-slot="list-item"]')
-  const count = await items.count()
-  expect(count).toBeGreaterThan(1)
-
-  for (let i = 0; i < count; i++) {
-    const item = items.nth(i)
-    const selected = (await item.getAttribute("data-selected")) === "true"
-    if (selected) continue
-    await item.click()
-    await expect(dialog).toHaveCount(0)
-    await expect.poll(async () => (await read(page)).model !== current.model, { timeout: 30_000 }).toBe(true)
-    return read(page)
-  }
-
-  throw new Error("Failed to choose a different model")
-}
-
-async function goto(page: Page, directory: string, sessionID?: string) {
-  await page.goto(sessionPath(directory, sessionID))
-  await waitSession(page, { directory, sessionID })
-}
-
-async function submit(page: Page, value: string) {
-  const prompt = page.locator(promptSelector)
-  await expect(prompt).toBeVisible()
-  await prompt.click()
-  await prompt.fill(value)
-  await prompt.press("Enter")
-
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
-  const id = sessionIDFromUrl(page.url())
-  if (!id) throw new Error(`Failed to resolve session id from ${page.url()}`)
-  return id
-}
-
-async function waitUser(directory: string, sessionID: string) {
-  const sdk = createSdk(directory)
-  await expect
-    .poll(
-      async () => {
-        const items = await sdk.session.messages({ sessionID, limit: 20 }).then((x) => x.data ?? [])
-        return items.some((item) => item.info.role === "user")
-      },
-      { timeout: 30_000 },
-    )
-    .toBe(true)
-  await sdk.session.abort({ sessionID }).catch(() => undefined)
-  await waitSessionIdle(sdk, sessionID, 30_000).catch(() => undefined)
-}
-
-async function createWorkspace(page: Page, root: string, seen: string[]) {
-  await openSidebar(page)
-  await page.getByRole("button", { name: "New workspace" }).first().click()
-
-  const next = await resolveSlug(await waitSlug(page, [root, ...seen]))
-  await waitSession(page, { directory: next.directory })
-  return next
-}
-
-async function waitWorkspace(page: Page, slug: string) {
-  await openSidebar(page)
-  await expect
-    .poll(
-      async () => {
-        const item = page.locator(workspaceItemSelector(slug)).first()
-        try {
-          await item.hover({ timeout: 500 })
-          return true
-        } catch {
-          return false
-        }
-      },
-      { timeout: 60_000 },
-    )
-    .toBe(true)
-}
-
-async function newWorkspaceSession(page: Page, slug: string) {
-  await waitWorkspace(page, slug)
-  const item = page.locator(workspaceItemSelector(slug)).first()
-  await item.hover()
-
-  const button = page.locator(workspaceNewSessionSelector(slug)).first()
-  await expect(button).toBeVisible()
-  await button.click({ force: true })
-
-  const next = await resolveSlug(await waitSlug(page))
-  return waitSession(page, { directory: next.directory }).then((item) => item.directory)
-}
-
-test("session model and variant restore per session without leaking into new sessions", async ({
-  page,
-  withProject,
-}) => {
-  await page.setViewportSize({ width: 1440, height: 900 })
-
-  await withProject(async ({ directory, gotoSession, trackSession }) => {
-    await gotoSession()
-
-    await ensureVariant(page, directory)
-    const firstState = await chooseDifferentVariant(page)
-    const first = await submit(page, `session variant ${Date.now()}`)
-    trackSession(first)
-    await waitUser(directory, first)
-
-    await page.reload()
-    await waitSession(page, { directory, sessionID: first })
-    await waitFooter(page, firstState)
-
-    await gotoSession()
-    const fresh = await ensureVariant(page, directory)
-    expect(fresh.variant).not.toBe(firstState.variant)
-
-    const secondState = await chooseOtherModel(page)
-    const second = await submit(page, `session model ${Date.now()}`)
-    trackSession(second)
-    await waitUser(directory, second)
-
-    await goto(page, directory, first)
-    await waitFooter(page, firstState)
-
-    await goto(page, directory, second)
-    await waitFooter(page, secondState)
-
-    await gotoSession()
-    await waitFooter(page, fresh)
-  })
-})
-
-test("session model restore across workspaces", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1440, height: 900 })
-
-  await withProject(async ({ directory: root, slug, gotoSession, trackDirectory, trackSession }) => {
-    await gotoSession()
-
-    await ensureVariant(page, root)
-    const firstState = await chooseDifferentVariant(page)
-    const first = await submit(page, `root session ${Date.now()}`)
-    trackSession(first, root)
-    await waitUser(root, first)
-
-    await openSidebar(page)
-    await setWorkspacesEnabled(page, slug, true)
-
-    const one = await createWorkspace(page, slug, [])
-    const oneDir = await newWorkspaceSession(page, one.slug)
-    trackDirectory(oneDir)
-
-    const secondState = await chooseOtherModel(page)
-    const second = await submit(page, `workspace one ${Date.now()}`)
-    trackSession(second, oneDir)
-    await waitUser(oneDir, second)
-
-    const two = await createWorkspace(page, slug, [one.slug])
-    const twoDir = await newWorkspaceSession(page, two.slug)
-    trackDirectory(twoDir)
-
-    await ensureVariant(page, twoDir)
-    const thirdState = await chooseDifferentVariant(page)
-    const third = await submit(page, `workspace two ${Date.now()}`)
-    trackSession(third, twoDir)
-    await waitUser(twoDir, third)
-
-    await goto(page, root, first)
-    await waitFooter(page, firstState)
-
-    await goto(page, oneDir, second)
-    await waitFooter(page, secondState)
-
-    await goto(page, twoDir, third)
-    await waitFooter(page, thirdState)
-
-    await goto(page, root, first)
-    await waitFooter(page, firstState)
-  })
-})
-
-test("variant preserved when switching agent modes", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1440, height: 900 })
-
-  await withProject(async ({ directory, gotoSession }) => {
-    await gotoSession()
-
-    await ensureVariant(page, directory)
-    const updated = await chooseDifferentVariant(page)
-
-    const available = await agents(page)
-    const other = available.find((name) => name !== updated.agent)
-    test.skip(!other, "only one agent available")
-    if (!other) return
-
-    await choose(page, promptAgentSelector, other)
-    await waitFooter(page, { agent: other, variant: updated.variant })
-
-    await choose(page, promptAgentSelector, updated.agent)
-    await waitFooter(page, { agent: updated.agent, variant: updated.variant })
-  })
-})

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

@@ -1,426 +0,0 @@
-import { waitSessionIdle, withSession } from "../actions"
-import { test, expect } from "../fixtures"
-import { createSdk } from "../utils"
-
-const count = 14
-
-function body(mark: string) {
-  return [
-    `title ${mark}`,
-    `mark ${mark}`,
-    ...Array.from({ length: 32 }, (_, i) => `line ${String(i + 1).padStart(2, "0")} ${mark}`),
-  ]
-}
-
-function files(tag: string) {
-  return Array.from({ length: count }, (_, i) => {
-    const id = String(i).padStart(2, "0")
-    return {
-      file: `review-scroll-${id}.txt`,
-      mark: `${tag}-${id}`,
-    }
-  })
-}
-
-function seed(list: ReturnType<typeof files>) {
-  const out = ["*** Begin Patch"]
-
-  for (const item of list) {
-    out.push(`*** Add File: ${item.file}`)
-    for (const line of body(item.mark)) out.push(`+${line}`)
-  }
-
-  out.push("*** End Patch")
-  return out.join("\n")
-}
-
-function edit(file: string, prev: string, next: string) {
-  return ["*** Begin Patch", `*** Update File: ${file}`, "@@", `-mark ${prev}`, `+mark ${next}`, "*** End Patch"].join(
-    "\n",
-  )
-}
-
-async function patch(sdk: ReturnType<typeof createSdk>, sessionID: string, patchText: string) {
-  await sdk.session.promptAsync({
-    sessionID,
-    agent: "build",
-    system: [
-      "You are seeding deterministic e2e UI state.",
-      "Your only valid response is one apply_patch tool call.",
-      `Use this JSON input: ${JSON.stringify({ patchText })}`,
-      "Do not call any other tools.",
-      "Do not output plain text.",
-    ].join("\n"),
-    parts: [{ type: "text", text: "Apply the provided patch exactly once." }],
-  })
-
-  await waitSessionIdle(sdk, sessionID, 120_000)
-}
-
-async function show(page: Parameters<typeof test>[0]["page"]) {
-  const btn = page.getByRole("button", { name: "Toggle review" }).first()
-  await expect(btn).toBeVisible()
-  if ((await btn.getAttribute("aria-expanded")) !== "true") await btn.click()
-  await expect(btn).toHaveAttribute("aria-expanded", "true")
-}
-
-async function expand(page: Parameters<typeof test>[0]["page"]) {
-  const close = page.getByRole("button", { name: /^Collapse all$/i }).first()
-  const open = await close
-    .isVisible()
-    .then((value) => value)
-    .catch(() => false)
-
-  const btn = page.getByRole("button", { name: /^Expand all$/i }).first()
-  if (open) {
-    await close.click()
-    await expect(btn).toBeVisible()
-  }
-
-  await expect(btn).toBeVisible()
-  await btn.click()
-  await expect(close).toBeVisible()
-}
-
-async function waitMark(page: Parameters<typeof test>[0]["page"], file: string, mark: string) {
-  await page.waitForFunction(
-    ({ file, mark }) => {
-      const view = document.querySelector('[data-slot="session-review-scroll"] .scroll-view__viewport')
-      if (!(view instanceof HTMLElement)) return false
-
-      const head = Array.from(view.querySelectorAll("h3")).find(
-        (node) => node instanceof HTMLElement && node.textContent?.includes(file),
-      )
-      if (!(head instanceof HTMLElement)) return false
-
-      return Array.from(head.parentElement?.querySelectorAll("diffs-container") ?? []).some((host) => {
-        if (!(host instanceof HTMLElement)) return false
-        const root = host.shadowRoot
-        return root?.textContent?.includes(`mark ${mark}`) ?? false
-      })
-    },
-    { file, mark },
-    { timeout: 60_000 },
-  )
-}
-
-async function spot(page: Parameters<typeof test>[0]["page"], file: string) {
-  return page.evaluate((file) => {
-    const view = document.querySelector('[data-slot="session-review-scroll"] .scroll-view__viewport')
-    if (!(view instanceof HTMLElement)) return null
-
-    const row = Array.from(view.querySelectorAll("h3")).find(
-      (node) => node instanceof HTMLElement && node.textContent?.includes(file),
-    )
-    if (!(row instanceof HTMLElement)) return null
-
-    const a = row.getBoundingClientRect()
-    const b = view.getBoundingClientRect()
-    return {
-      top: a.top - b.top,
-      y: view.scrollTop,
-    }
-  }, file)
-}
-
-async function comment(page: Parameters<typeof test>[0]["page"], file: string, note: string) {
-  const row = page.locator(`[data-file="${file}"]`).first()
-  await expect(row).toBeVisible()
-
-  const line = row.locator('diffs-container [data-line="2"]').first()
-  await expect(line).toBeVisible()
-  await line.hover()
-
-  const add = row.getByRole("button", { name: /^Comment$/ }).first()
-  await expect(add).toBeVisible()
-  await add.click()
-
-  const area = row.locator('[data-slot="line-comment-textarea"]').first()
-  await expect(area).toBeVisible()
-  await area.fill(note)
-
-  const submit = row.locator('[data-slot="line-comment-action"][data-variant="primary"]').first()
-  await expect(submit).toBeEnabled()
-  await submit.click()
-
-  await expect(row.locator('[data-slot="line-comment-content"]').filter({ hasText: note }).first()).toBeVisible()
-  await expect(row.locator('[data-slot="line-comment-tools"]').first()).toBeVisible()
-}
-
-async function overflow(page: Parameters<typeof test>[0]["page"], file: string) {
-  const row = page.locator(`[data-file="${file}"]`).first()
-  const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
-  const pop = row.locator('[data-slot="line-comment-popover"][data-inline-body]').first()
-  const tools = row.locator('[data-slot="line-comment-tools"]').first()
-
-  const [width, viewBox, popBox, toolsBox] = await Promise.all([
-    view.evaluate((el) => el.scrollWidth - el.clientWidth),
-    view.boundingBox(),
-    pop.boundingBox(),
-    tools.boundingBox(),
-  ])
-
-  if (!viewBox || !popBox || !toolsBox) return null
-
-  return {
-    width,
-    pop: popBox.x + popBox.width - (viewBox.x + viewBox.width),
-    tools: toolsBox.x + toolsBox.width - (viewBox.x + viewBox.width),
-  }
-}
-
-async function openReviewFile(page: Parameters<typeof test>[0]["page"], file: string) {
-  const row = page.locator(`[data-file="${file}"]`).first()
-  await expect(row).toBeVisible()
-  await row.hover()
-
-  const open = row.getByRole("button", { name: /^Open file$/i }).first()
-  await expect(open).toBeVisible()
-  await open.click()
-
-  const tab = page.getByRole("tab", { name: file }).first()
-  await expect(tab).toBeVisible()
-  await tab.click()
-
-  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
-  await expect(viewer).toBeVisible()
-  return viewer
-}
-
-async function fileComment(page: Parameters<typeof test>[0]["page"], note: string) {
-  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
-  await expect(viewer).toBeVisible()
-
-  const line = viewer.locator('diffs-container [data-line="2"]').first()
-  await expect(line).toBeVisible()
-  await line.hover()
-
-  const add = viewer.getByRole("button", { name: /^Comment$/ }).first()
-  await expect(add).toBeVisible()
-  await add.click()
-
-  const area = viewer.locator('[data-slot="line-comment-textarea"]').first()
-  await expect(area).toBeVisible()
-  await area.fill(note)
-
-  const submit = viewer.locator('[data-slot="line-comment-action"][data-variant="primary"]').first()
-  await expect(submit).toBeEnabled()
-  await submit.click()
-
-  await expect(viewer.locator('[data-slot="line-comment-content"]').filter({ hasText: note }).first()).toBeVisible()
-  await expect(viewer.locator('[data-slot="line-comment-tools"]').first()).toBeVisible()
-}
-
-async function fileOverflow(page: Parameters<typeof test>[0]["page"]) {
-  const viewer = page.locator('[data-component="file"][data-mode="text"]').first()
-  const view = page.locator('[role="tabpanel"] .scroll-view__viewport').first()
-  const pop = viewer.locator('[data-slot="line-comment-popover"][data-inline-body]').first()
-  const tools = viewer.locator('[data-slot="line-comment-tools"]').first()
-
-  const [width, viewBox, popBox, toolsBox] = await Promise.all([
-    view.evaluate((el) => el.scrollWidth - el.clientWidth),
-    view.boundingBox(),
-    pop.boundingBox(),
-    tools.boundingBox(),
-  ])
-
-  if (!viewBox || !popBox || !toolsBox) return null
-
-  return {
-    width,
-    pop: popBox.x + popBox.width - (viewBox.x + viewBox.width),
-    tools: toolsBox.x + toolsBox.width - (viewBox.x + viewBox.width),
-  }
-}
-
-test("review applies inline comment clicks without horizontal overflow", async ({ page, withProject }) => {
-  test.setTimeout(180_000)
-
-  const tag = `review-comment-${Date.now()}`
-  const file = `review-comment-${tag}.txt`
-  const note = `comment ${tag}`
-
-  await page.setViewportSize({ width: 1280, height: 900 })
-
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
-
-    await withSession(sdk, `e2e review comment ${tag}`, async (session) => {
-      await patch(sdk, session.id, seed([{ file, mark: tag }]))
-
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            return diff.length
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(1)
-
-      await project.gotoSession(session.id)
-      await show(page)
-
-      const tab = page.getByRole("tab", { name: /Review/i }).first()
-      await expect(tab).toBeVisible()
-      await tab.click()
-
-      await expand(page)
-      await waitMark(page, file, tag)
-      await comment(page, file, note)
-
-      await expect
-        .poll(async () => (await overflow(page, file))?.width ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-      await expect
-        .poll(async () => (await overflow(page, file))?.pop ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-      await expect
-        .poll(async () => (await overflow(page, file))?.tools ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-    })
-  })
-})
-
-test("review file comments submit on click without clipping actions", async ({ page, withProject }) => {
-  test.setTimeout(180_000)
-
-  const tag = `review-file-comment-${Date.now()}`
-  const file = `review-file-comment-${tag}.txt`
-  const note = `comment ${tag}`
-
-  await page.setViewportSize({ width: 1280, height: 900 })
-
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
-
-    await withSession(sdk, `e2e review file comment ${tag}`, async (session) => {
-      await patch(sdk, session.id, seed([{ file, mark: tag }]))
-
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            return diff.length
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(1)
-
-      await project.gotoSession(session.id)
-      await show(page)
-
-      const tab = page.getByRole("tab", { name: /Review/i }).first()
-      await expect(tab).toBeVisible()
-      await tab.click()
-
-      await expand(page)
-      await waitMark(page, file, tag)
-      await openReviewFile(page, file)
-      await fileComment(page, note)
-
-      await expect
-        .poll(async () => (await fileOverflow(page))?.width ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-      await expect
-        .poll(async () => (await fileOverflow(page))?.pop ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-      await expect
-        .poll(async () => (await fileOverflow(page))?.tools ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
-        .toBeLessThanOrEqual(1)
-    })
-  })
-})
-
-test("review keeps scroll position after a live diff update", async ({ page, withProject }) => {
-  test.skip(Boolean(process.env.CI), "Flaky in CI for now.")
-  test.setTimeout(180_000)
-
-  const tag = `review-${Date.now()}`
-  const list = files(tag)
-  const hit = list[list.length - 4]!
-  const next = `${tag}-live`
-
-  await page.setViewportSize({ width: 1600, height: 1000 })
-
-  await withProject(async (project) => {
-    const sdk = createSdk(project.directory)
-
-    await withSession(sdk, `e2e review ${tag}`, async (session) => {
-      await patch(sdk, session.id, seed(list))
-
-      await expect
-        .poll(
-          async () => {
-            const info = await sdk.session.get({ sessionID: session.id }).then((res) => res.data)
-            return info?.summary?.files ?? 0
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(list.length)
-
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            return diff.length
-          },
-          { timeout: 60_000 },
-        )
-        .toBe(list.length)
-
-      await project.gotoSession(session.id)
-      await show(page)
-
-      const tab = page.getByRole("tab", { name: /Review/i }).first()
-      await expect(tab).toBeVisible()
-      await tab.click()
-
-      const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
-      await expect(view).toBeVisible()
-      const heads = page.getByRole("heading", { level: 3 }).filter({ hasText: /^review-scroll-/ })
-      await expect(heads).toHaveCount(list.length, {
-        timeout: 60_000,
-      })
-
-      await expand(page)
-      await waitMark(page, hit.file, hit.mark)
-
-      const row = page
-        .getByRole("heading", { level: 3, name: new RegExp(hit.file.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) })
-        .first()
-      await expect(row).toBeVisible()
-      await row.evaluate((el) => el.scrollIntoView({ block: "center" }))
-
-      await expect.poll(async () => (await spot(page, hit.file))?.y ?? 0).toBeGreaterThan(200)
-      const prev = await spot(page, hit.file)
-      if (!prev) throw new Error(`missing review row for ${hit.file}`)
-
-      await patch(sdk, session.id, edit(hit.file, hit.mark, next))
-
-      await expect
-        .poll(
-          async () => {
-            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
-            const item = diff.find((item) => item.file === hit.file)
-            return typeof item?.after === "string" ? item.after : ""
-          },
-          { timeout: 60_000 },
-        )
-        .toContain(`mark ${next}`)
-
-      await waitMark(page, hit.file, next)
-
-      await expect
-        .poll(
-          async () => {
-            const next = await spot(page, hit.file)
-            if (!next) return Number.POSITIVE_INFINITY
-            return Math.max(Math.abs(next.top - prev.top), Math.abs(next.y - prev.y))
-          },
-          { timeout: 60_000 },
-        )
-        .toBeLessThanOrEqual(32)
-    })
-  })
-})

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

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openSettings, closeDialog, waitTerminalFocusIdle, withSession } from "../actions"
+import { openSettings, closeDialog, withSession } from "../actions"
 import { keybindButtonSelector, terminalSelector } from "../selectors"
 import { modKey } from "../utils"
 
@@ -302,7 +302,7 @@ test("changing terminal toggle keybind works", async ({ page, gotoSession }) =>
   await expect(terminal).not.toBeVisible()
 
   await page.keyboard.press(`${modKey}+Y`)
-  await waitTerminalFocusIdle(page, { term: terminal })
+  await expect(terminal).toBeVisible()
 
   await page.keyboard.press(`${modKey}+Y`)
   await expect(terminal).not.toBeVisible()

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

@@ -1,5 +1,4 @@
 import { test, expect } from "../fixtures"
-import { waitTerminalFocusIdle, waitTerminalReady } from "../actions"
 import { promptSelector, terminalSelector } from "../selectors"
 import { terminalToggleKey } from "../utils"
 
@@ -14,7 +13,8 @@ test("smoke terminal mounts and can create a second tab", async ({ page, gotoSes
     await page.keyboard.press(terminalToggleKey)
   }
 
-  await waitTerminalFocusIdle(page, { term: terminals.first() })
+  await expect(terminals.first()).toBeVisible()
+  await expect(terminals.first().locator("textarea")).toHaveCount(1)
   await expect(terminals).toHaveCount(1)
 
   // Ghostty captures a lot of keybinds when focused; move focus back
@@ -24,5 +24,5 @@ test("smoke terminal mounts and can create a second tab", async ({ page, gotoSes
 
   await expect(tabs).toHaveCount(2)
   await expect(terminals).toHaveCount(1)
-  await waitTerminalReady(page, { term: terminals.first() })
+  await expect(terminals.first().locator("textarea")).toHaveCount(1)
 })

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

@@ -1,46 +0,0 @@
-import type { Page } from "@playwright/test"
-import { disconnectTerminal, runTerminal, terminalConnects, waitTerminalReady } from "../actions"
-import { test, expect } from "../fixtures"
-import { terminalSelector } from "../selectors"
-import { terminalToggleKey } from "../utils"
-
-async function open(page: Page) {
-  const term = page.locator(terminalSelector).first()
-  const visible = await term.isVisible().catch(() => false)
-  if (!visible) await page.keyboard.press(terminalToggleKey)
-  await waitTerminalReady(page, { term })
-  return term
-}
-
-test("terminal reconnects without replacing the pty", async ({ page, withProject }) => {
-  await withProject(async ({ gotoSession }) => {
-    const name = `OPENCODE_E2E_RECONNECT_${Date.now()}`
-    const token = `E2E_RECONNECT_${Date.now()}`
-
-    await gotoSession()
-
-    const term = await open(page)
-    const id = await term.getAttribute("data-pty-id")
-    if (!id) throw new Error("Active terminal missing data-pty-id")
-
-    const prev = await terminalConnects(page, { term })
-
-    await runTerminal(page, {
-      term,
-      cmd: `export ${name}=${token}; echo ${token}`,
-      token,
-    })
-
-    await disconnectTerminal(page, { term })
-
-    await expect.poll(() => terminalConnects(page, { term }), { timeout: 15_000 }).toBeGreaterThan(prev)
-    await expect.poll(() => term.getAttribute("data-pty-id"), { timeout: 5_000 }).toBe(id)
-
-    await runTerminal(page, {
-      term,
-      cmd: `echo $${name}`,
-      token,
-      timeout: 15_000,
-    })
-  })
-})

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

@@ -1,5 +1,4 @@
 import type { Page } from "@playwright/test"
-import { runTerminal, waitTerminalReady } from "../actions"
 import { test, expect } from "../fixtures"
 import { terminalSelector } from "../selectors"
 import { terminalToggleKey, workspacePersistKey } from "../utils"
@@ -18,7 +17,16 @@ async function open(page: Page) {
   const terminal = page.locator(terminalSelector)
   const visible = await terminal.isVisible().catch(() => false)
   if (!visible) await page.keyboard.press(terminalToggleKey)
-  await waitTerminalReady(page, { term: terminal })
+  await expect(terminal).toBeVisible()
+  await expect(terminal.locator("textarea")).toHaveCount(1)
+}
+
+async function run(page: Page, cmd: string) {
+  const terminal = page.locator(terminalSelector)
+  await expect(terminal).toBeVisible()
+  await terminal.click()
+  await page.keyboard.type(cmd)
+  await page.keyboard.press("Enter")
 }
 
 async function store(page: Page, key: string) {
@@ -48,16 +56,15 @@ test("inactive terminal tab buffers persist across tab switches", async ({ page,
     await gotoSession()
     await open(page)
 
-    await runTerminal(page, { cmd: `echo ${one}`, token: one })
+    await run(page, `echo ${one}`)
 
     await page.getByRole("button", { name: /new terminal/i }).click()
     await expect(tabs).toHaveCount(2)
 
-    await runTerminal(page, { cmd: `echo ${two}`, token: two })
+    await run(page, `echo ${two}`)
 
     await first.click()
     await expect(first).toHaveAttribute("aria-selected", "true")
-
     await expect
       .poll(
         async () => {
@@ -69,7 +76,7 @@ test("inactive terminal tab buffers persist across tab switches", async ({ page,
             second: second.includes(two),
           }
         },
-        { timeout: 5_000 },
+        { timeout: 30_000 },
       )
       .toEqual({ first: false, second: true })
 
@@ -86,7 +93,7 @@ test("inactive terminal tab buffers persist across tab switches", async ({ page,
             second: second.includes(two),
           }
         },
-        { timeout: 5_000 },
+        { timeout: 30_000 },
       )
       .toEqual({ first: true, second: false })
   })

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

@@ -1,5 +1,4 @@
 import { test, expect } from "../fixtures"
-import { waitTerminalReady } from "../actions"
 import { terminalSelector } from "../selectors"
 import { terminalToggleKey } from "../utils"
 
@@ -14,5 +13,5 @@ test("terminal panel can be toggled", async ({ page, gotoSession }) => {
   }
 
   await page.keyboard.press(terminalToggleKey)
-  await waitTerminalReady(page, { term: terminal })
+  await expect(terminal).toBeVisible()
 })

packages/app/e2e/tsconfig.json

@@ -2,8 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "rootDir": "..",
     "types": ["node", "bun"]
   },
-  "include": ["./**/*.ts", "../src/testing/terminal.ts"]
+  "include": ["./**/*.ts"]
 }

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.2.27",
+  "version": "1.2.24",
   "description": "",
   "type": "module",
   "exports": {
@@ -45,8 +45,8 @@
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/active-element": "2.1.3",
     "@solid-primitives/audio": "1.4.2",
-    "@solid-primitives/event-bus": "1.1.2",
     "@solid-primitives/i18n": "2.2.1",
+    "@solid-primitives/event-bus": "1.1.2",
     "@solid-primitives/media": "2.3.3",
     "@solid-primitives/resize-observer": "2.1.3",
     "@solid-primitives/scroll": "2.1.3",
@@ -56,7 +56,6 @@
     "@solidjs/router": "catalog:",
     "@thisbeyond/solid-dnd": "0.7.5",
     "diff": "catalog:",
-    "effect": "catalog:",
     "fuzzysort": "catalog:",
     "ghostty-web": "github:anomalyco/ghostty-web#main",
     "luxon": "catalog:",

packages/app/playwright.config.ts

@@ -6,7 +6,6 @@ const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"
 const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
 const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
 const reuse = !process.env.CI
-const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
 
 export default defineConfig({
   testDir: "./e2e",
@@ -18,7 +17,6 @@ export default defineConfig({
   fullyParallel: process.env.PLAYWRIGHT_FULLY_PARALLEL === "1",
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers,
   reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
   webServer: {
     command,

packages/app/script/e2e-local.ts

@@ -73,7 +73,6 @@ const serverEnv = {
   OPENCODE_E2E_MESSAGE: "Seeded for UI e2e",
   OPENCODE_E2E_MODEL: "opencode/gpt-5-nano",
   OPENCODE_CLIENT: "app",
-  OPENCODE_STRICT_CONFIG_DEPS: "true",
 } satisfies Record<string, string>
 
 const runnerEnv = {

packages/app/src/app.tsx

@@ -1,30 +1,14 @@
 import "@/index.css"
+import { File } from "@opencode-ai/ui/file"
 import { I18nProvider } from "@opencode-ai/ui/context"
 import { DialogProvider } from "@opencode-ai/ui/context/dialog"
 import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import { File } from "@opencode-ai/ui/file"
 import { Font } from "@opencode-ai/ui/font"
-import { Splash } from "@opencode-ai/ui/logo"
 import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { MetaProvider } from "@solidjs/meta"
-import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"
+import { BaseRouterProps, Navigate, Route, Router } from "@solidjs/router"
-import { type Duration, Effect } from "effect"
+import { Component, ErrorBoundary, type JSX, lazy, type ParentProps, Show, Suspense } from "solid-js"
-import {
-  type Component,
-  createMemo,
-  createResource,
-  createSignal,
-  ErrorBoundary,
-  For,
-  type JSX,
-  lazy,
-  onCleanup,
-  type ParentProps,
-  Show,
-  Suspense,
-} from "solid-js"
-import { Dynamic } from "solid-js/web"
 import { CommandProvider } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
@@ -38,21 +22,29 @@ import { NotificationProvider } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
 import { PromptProvider } from "@/context/prompt"
-import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
+import { type ServerConnection, ServerProvider, useServer } from "@/context/server"
 import { SettingsProvider } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
-import { useCheckServerHealth } from "./utils/server-health"
+import { Dynamic } from "solid-js/web"
 
-const HomeRoute = lazy(() => import("@/pages/home"))
+const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
 const Loading = () => <div class="size-full" />
 
+const HomeRoute = () => (
+  <Suspense fallback={<Loading />}>
+    <Home />
+  </Suspense>
+)
+
 const SessionRoute = () => (
   <SessionProviders>
-    <Session />
+    <Suspense fallback={<Loading />}>
+      <Session />
+    </Suspense>
   </SessionProviders>
 )
 
@@ -60,7 +52,7 @@ const SessionIndexRoute = () => <Navigate href="session" />
 
 function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
-  return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
+  return <I18nProvider value={{ locale: language.locale, t: language.t }}>{props.children}</I18nProvider>
 }
 
 declare global {
@@ -70,9 +62,6 @@ declare global {
       deepLinks?: string[]
       wsl?: boolean
     }
-    api?: {
-      setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
-    }
   }
 }
 
@@ -116,10 +105,8 @@ function SessionProviders(props: ParentProps) {
 function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
   return (
     <AppShellProviders>
-      <Suspense fallback={<Loading />}>
+      {props.appChildren}
-        {props.appChildren}
+      {props.children}
-        {props.children}
-      </Suspense>
     </AppShellProviders>
   )
 }
@@ -128,11 +115,7 @@ export function AppBaseProviders(props: ParentProps) {
   return (
     <MetaProvider>
       <Font />
-      <ThemeProvider
+      <ThemeProvider>
-        onThemeApplied={(_, mode) => {
-          void window.api?.setTitlebar?.({ mode })
-        }}
-      >
         <LanguageProvider>
           <UiI18nBridge>
             <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
@@ -149,116 +132,6 @@ export function AppBaseProviders(props: ParentProps) {
   )
 }
 
-const effectMinDuration =
-  (duration: Duration.Input) =>
-  <A, E, R>(e: Effect.Effect<A, E, R>) =>
-    Effect.all([e, Effect.sleep(duration)], { concurrency: "unbounded" }).pipe(Effect.map((v) => v[0]))
-
-function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
-  const server = useServer()
-  const checkServerHealth = useCheckServerHealth()
-
-  const [checkMode, setCheckMode] = createSignal<"blocking" | "background">("blocking")
-
-  // performs repeated health check with a grace period for
-  // non-http connections, otherwise fails instantly
-  const [startupHealthCheck, healthCheckActions] = createResource(() =>
-    props.disableHealthCheck
-      ? true
-      : Effect.gen(function* () {
-          if (!server.current) return true
-          const { http, type } = server.current
-
-          while (true) {
-            const res = yield* Effect.promise(() => checkServerHealth(http))
-            if (res.healthy) return true
-            if (checkMode() === "background" || type === "http") return false
-          }
-        }).pipe(
-          effectMinDuration(checkMode() === "blocking" ? "1.2 seconds" : 0),
-          Effect.timeoutOrElse({ duration: "10 seconds", onTimeout: () => Effect.succeed(false) }),
-          Effect.ensuring(Effect.sync(() => setCheckMode("background"))),
-          Effect.runPromise,
-        ),
-  )
-
-  return (
-    <Show
-      when={checkMode() === "blocking" ? !startupHealthCheck.loading : startupHealthCheck.state !== "pending"}
-      fallback={
-        <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base">
-          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
-        </div>
-      }
-    >
-      <Show
-        when={startupHealthCheck()}
-        fallback={
-          <ConnectionError
-            onRetry={() => {
-              if (checkMode() === "background") healthCheckActions.refetch()
-            }}
-            onServerSelected={(key) => {
-              setCheckMode("blocking")
-              server.setActive(key)
-              healthCheckActions.refetch()
-            }}
-          />
-        }
-      >
-        {props.children}
-      </Show>
-    </Show>
-  )
-}
-
-function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key: ServerConnection.Key) => void }) {
-  const language = useLanguage()
-  const server = useServer()
-  const others = () => server.list.filter((s) => ServerConnection.key(s) !== server.key)
-  const name = createMemo(() => server.name || server.key)
-  const serverToken = "\u0000server\u0000"
-  const unreachable = createMemo(() => language.t("app.server.unreachable", { server: serverToken }).split(serverToken))
-
-  const timer = setInterval(() => props.onRetry?.(), 1000)
-  onCleanup(() => clearInterval(timer))
-
-  return (
-    <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base gap-6 p-6">
-      <div class="flex flex-col items-center max-w-md text-center">
-        <Splash class="w-12 h-15 mb-4" />
-        <p class="text-14-regular text-text-base">
-          {unreachable()[0]}
-          <span class="text-text-strong font-medium">{name()}</span>
-          {unreachable()[1]}
-        </p>
-        <p class="mt-1 text-12-regular text-text-weak">{language.t("app.server.retrying")}</p>
-      </div>
-      <Show when={others().length > 0}>
-        <div class="flex flex-col gap-2 w-full max-w-sm">
-          <span class="text-12-regular text-text-base text-center">{language.t("app.server.otherServers")}</span>
-          <div class="flex flex-col gap-1 bg-surface-base rounded-lg p-2">
-            <For each={others()}>
-              {(conn) => {
-                const key = ServerConnection.key(conn)
-                return (
-                  <button
-                    type="button"
-                    class="flex items-center gap-3 w-full px-3 py-2 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
-                    onClick={() => props.onServerSelected?.(key)}
-                  >
-                    <span class="text-14-regular text-text-strong truncate">{serverName(conn)}</span>
-                  </button>
-                )
-              }}
-            </For>
-          </div>
-        </div>
-      </Show>
-    </div>
-  )
-}
-
 function ServerKey(props: ParentProps) {
   const server = useServer()
   return (
@@ -273,28 +146,25 @@ export function AppInterface(props: {
   defaultServer: ServerConnection.Key
   servers?: Array<ServerConnection.Any>
   router?: Component<BaseRouterProps>
-  disableHealthCheck?: boolean
 }) {
   return (
     <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
-      <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
+      <ServerKey>
-        <ServerKey>
+        <GlobalSDKProvider>
-          <GlobalSDKProvider>
+          <GlobalSyncProvider>
-            <GlobalSyncProvider>
+            <Dynamic
-              <Dynamic
+              component={props.router ?? Router}
-                component={props.router ?? Router}
+              root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+            >
-              >
+              <Route path="/" component={HomeRoute} />
-                <Route path="/" component={HomeRoute} />
+              <Route path="/:dir" component={DirectoryLayout}>
-                <Route path="/:dir" component={DirectoryLayout}>
+                <Route path="/" component={SessionIndexRoute} />
-                  <Route path="/" component={SessionIndexRoute} />
+                <Route path="/session/:id?" component={SessionRoute} />
-                  <Route path="/session/:id?" component={SessionRoute} />
+              </Route>
-                </Route>
+            </Dynamic>
-              </Dynamic>
+          </GlobalSyncProvider>
-            </GlobalSyncProvider>
+        </GlobalSDKProvider>
-          </GlobalSDKProvider>
+      </ServerKey>
-        </ServerKey>
-      </ConnectionGate>
     </ServerProvider>
   )
 }

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

@@ -2,7 +2,6 @@ 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"
-import { useLanguage } from "@/context/language"
 
 type Mem = Performance & {
   memory?: {
@@ -28,17 +27,17 @@ type Obs = PerformanceObserverInit & {
 const span = 5000
 
 const ms = (n?: number, d = 0) => {
-  if (n === undefined || Number.isNaN(n)) return
+  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
+  if (n === undefined || Number.isNaN(n)) return "n/a"
   return `${Math.round(n)}`
 }
 
 const mb = (n?: number) => {
-  if (n === undefined || Number.isNaN(n)) return
+  if (n === undefined || Number.isNaN(n)) return "n/a"
   const v = n / 1024 / 1024
   return `${v >= 1024 ? v.toFixed(0) : v.toFixed(1)}MB`
 }
@@ -75,7 +74,6 @@ function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string;
 }
 
 export function DebugBar() {
-  const language = useLanguage()
   const location = useLocation()
   const routing = useIsRouting()
   const [state, setState] = createStore({
@@ -100,15 +98,14 @@ export function DebugBar() {
     },
   })
 
-  const na = () => language.t("debugBar.na")
   const heap = () => (state.heap.limit ? (state.heap.used ?? 0) / state.heap.limit : undefined)
   const heapv = () => {
     const value = heap()
-    if (value === undefined) return na()
+    if (value === undefined) return "n/a"
     return `${Math.round(value * 100)}%`
   }
-  const longv = () => (state.long.count === undefined ? na() : `${time(state.long.block) ?? na()}/${state.long.count}`)
+  const longv = () => (state.long.count === undefined ? "n/a" : `${time(state.long.block)}/${state.long.count}`)
-  const navv = () => (state.nav.pending ? "..." : (time(state.nav.dur) ?? na()))
+  const navv = () => (state.nav.pending ? "..." : time(state.nav.dur))
 
   let prev = ""
   let start = 0
@@ -362,7 +359,7 @@ export function DebugBar() {
 
   return (
     <aside
-      aria-label={language.t("debugBar.ariaLabel")}
+      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)",
@@ -371,70 +368,67 @@ export function DebugBar() {
     >
       <div class="grid grid-cols-5 gap-px font-mono">
         <Cell
-          label={language.t("debugBar.nav.label")}
+          label="NAV"
-          tip={language.t("debugBar.nav.tip")}
+          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={language.t("debugBar.fps.label")}
+          label="FPS"
-          tip={language.t("debugBar.fps.tip")}
+          tip="Rolling frames per second over the last 5 seconds."
-          value={state.fps === undefined ? na() : `${Math.round(state.fps)}`}
+          value={state.fps === undefined ? "n/a" : `${Math.round(state.fps)}`}
           bad={bad(state.fps, 50, true)}
           dim={state.fps === undefined}
         />
         <Cell
-          label={language.t("debugBar.frame.label")}
+          label="FRM"
-          tip={language.t("debugBar.frame.tip")}
+          tip="Worst frame time over the last 5 seconds."
-          value={time(state.gap) ?? na()}
+          value={time(state.gap)}
           bad={bad(state.gap, 50)}
           dim={state.gap === undefined}
         />
         <Cell
-          label={language.t("debugBar.jank.label")}
+          label="JNK"
-          tip={language.t("debugBar.jank.tip")}
+          tip="Frames over 32ms in the last 5 seconds."
-          value={state.jank === undefined ? na() : `${state.jank}`}
+          value={state.jank === undefined ? "n/a" : `${state.jank}`}
           bad={bad(state.jank, 8)}
           dim={state.jank === undefined}
         />
         <Cell
-          label={language.t("debugBar.long.label")}
+          label="LNG"
-          tip={language.t("debugBar.long.tip", { max: ms(state.long.max) ?? na() })}
+          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={language.t("debugBar.delay.label")}
+          label="DLY"
-          tip={language.t("debugBar.delay.tip")}
+          tip="Worst observed input delay in the last 5 seconds."
-          value={time(state.delay) ?? na()}
+          value={time(state.delay)}
           bad={bad(state.delay, 100)}
           dim={state.delay === undefined}
         />
         <Cell
-          label={language.t("debugBar.inp.label")}
+          label="INP"
-          tip={language.t("debugBar.inp.tip")}
+          tip="Approximate interaction duration over the last 5 seconds. This is INP-like, not the official Web Vitals INP."
-          value={time(state.inp) ?? na()}
+          value={time(state.inp)}
           bad={bad(state.inp, 200)}
           dim={state.inp === undefined}
         />
         <Cell
-          label={language.t("debugBar.cls.label")}
+          label="CLS"
-          tip={language.t("debugBar.cls.tip")}
+          tip="Cumulative layout shift for the current app lifetime."
-          value={state.cls === undefined ? na() : state.cls.toFixed(2)}
+          value={state.cls === undefined ? "n/a" : state.cls.toFixed(2)}
           bad={bad(state.cls, 0.1)}
           dim={state.cls === undefined}
         />
         <Cell
-          label={language.t("debugBar.mem.label")}
+          label="MEM"
           tip={
             state.heap.used === undefined
-              ? language.t("debugBar.mem.tipUnavailable")
+              ? "Used JS heap vs heap limit. Chromium only."
-              : language.t("debugBar.mem.tip", {
+              : `Used JS heap vs heap limit. ${mb(state.heap.used)} of ${mb(state.heap.limit)}.`
-                  used: mb(state.heap.used) ?? na(),
-                  limit: mb(state.heap.limit) ?? na(),
-                })
           }
           value={heapv()}
           bad={bad(heap(), 0.8)}

packages/app/src/components/dialog-connect-provider.tsx

@@ -15,6 +15,7 @@ import { Link } from "@/components/link"
 import { useLanguage } from "@/context/language"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
+import { usePlatform } from "@/context/platform"
 import { DialogSelectModel } from "./dialog-select-model"
 import { DialogSelectProvider } from "./dialog-select-provider"
 
@@ -22,6 +23,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
   const globalSync = useGlobalSync()
   const globalSDK = useGlobalSDK()
+  const platform = usePlatform()
   const language = useLanguage()
 
   const alive = { value: true }
@@ -47,14 +49,13 @@ export function DialogConnectProvider(props: { provider: string }) {
   const [store, setStore] = createStore({
     methodIndex: undefined as undefined | number,
     authorization: undefined as undefined | ProviderAuthAuthorization,
-    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
+    state: "pending" as undefined | "pending" | "complete" | "error",
     error: undefined as string | undefined,
   })
 
   type Action =
     | { type: "method.select"; index: number }
     | { type: "method.reset" }
-    | { type: "auth.prompt" }
     | { type: "auth.pending" }
     | { type: "auth.complete"; authorization: ProviderAuthAuthorization }
     | { type: "auth.error"; error: string }
@@ -76,11 +77,6 @@ export function DialogConnectProvider(props: { provider: string }) {
           draft.error = undefined
           return
         }
-        if (action.type === "auth.prompt") {
-          draft.state = "prompt"
-          draft.error = undefined
-          return
-        }
         if (action.type === "auth.pending") {
           draft.state = "pending"
           draft.error = undefined
@@ -124,7 +120,7 @@ export function DialogConnectProvider(props: { provider: string }) {
     return fallback
   }
 
-  async function selectMethod(index: number, inputs?: Record<string, string>) {
+  async function selectMethod(index: number) {
     if (timer.current !== undefined) {
       clearTimeout(timer.current)
       timer.current = undefined
@@ -134,10 +130,6 @@ export function DialogConnectProvider(props: { provider: string }) {
     dispatch({ type: "method.select", index })
 
     if (method.type === "oauth") {
-      if (method.prompts?.length && !inputs) {
-        dispatch({ type: "auth.prompt" })
-        return
-      }
       dispatch({ type: "auth.pending" })
       const start = Date.now()
       await globalSDK.client.provider.oauth
@@ -145,7 +137,6 @@ export function DialogConnectProvider(props: { provider: string }) {
           {
             providerID: props.provider,
             method: index,
-            inputs,
           },
           { throwOnError: true },
         )
@@ -172,122 +163,6 @@ export function DialogConnectProvider(props: { provider: string }) {
     }
   }
 
-  function OAuthPromptsView() {
-    const [formStore, setFormStore] = createStore({
-      value: {} as Record<string, string>,
-      index: 0,
-    })
-
-    const prompts = createMemo(() => method()?.prompts ?? [])
-    const matches = (prompt: NonNullable<ReturnType<typeof prompts>[number]>, value: Record<string, string>) => {
-      if (!prompt.when) return true
-      const actual = value[prompt.when.key]
-      if (actual === undefined) return false
-      return prompt.when.op === "eq" ? actual === prompt.when.value : actual !== prompt.when.value
-    }
-    const current = createMemo(() => {
-      const all = prompts()
-      const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
-      if (index === -1) return
-      return {
-        index,
-        prompt: all[index],
-      }
-    })
-    const valid = createMemo(() => {
-      const item = current()
-      if (!item || item.prompt.type !== "text") return false
-      const value = formStore.value[item.prompt.key] ?? ""
-      return value.trim().length > 0
-    })
-
-    async function next(index: number, value: Record<string, string>) {
-      if (store.methodIndex === undefined) return
-      const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
-      if (next !== -1) {
-        setFormStore("index", next)
-        return
-      }
-      await selectMethod(store.methodIndex, value)
-    }
-
-    async function handleSubmit(e: SubmitEvent) {
-      e.preventDefault()
-      const item = current()
-      if (!item || item.prompt.type !== "text") return
-      if (!valid()) return
-      await next(item.index, formStore.value)
-    }
-
-    const item = () => current()
-    const text = createMemo(() => {
-      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "text") return
-      return prompt
-    })
-    const select = createMemo(() => {
-      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "select") return
-      return prompt
-    })
-
-    return (
-      <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
-        <Switch>
-          <Match when={item()?.prompt.type === "text"}>
-            <TextField
-              type="text"
-              label={text()?.message ?? ""}
-              placeholder={text()?.placeholder}
-              value={text() ? (formStore.value[text()!.key] ?? "") : ""}
-              onChange={(value) => {
-                const prompt = text()
-                if (!prompt) return
-                setFormStore("value", prompt.key, value)
-              }}
-            />
-            <Button class="w-auto" type="submit" size="large" variant="primary" disabled={!valid()}>
-              {language.t("common.continue")}
-            </Button>
-          </Match>
-          <Match when={item()?.prompt.type === "select"}>
-            <div class="w-full flex flex-col gap-1.5">
-              <div class="text-14-regular text-text-base">{select()?.message}</div>
-              <div>
-                <List
-                  items={select()?.options ?? []}
-                  key={(x) => x.value}
-                  current={select()?.options.find((x) => x.value === formStore.value[select()!.key])}
-                  onSelect={(value) => {
-                    if (!value) return
-                    const prompt = select()
-                    if (!prompt) return
-                    const nextValue = {
-                      ...formStore.value,
-                      [prompt.key]: value.value,
-                    }
-                    setFormStore("value", prompt.key, value.value)
-                    void next(item()!.index, nextValue)
-                  }}
-                >
-                  {(option) => (
-                    <div class="w-full flex items-center gap-x-2">
-                      <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
-                        <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
-                      </div>
-                      <span>{option.label}</span>
-                      <span class="text-14-regular text-text-weak">{option.hint}</span>
-                    </div>
-                  )}
-                </List>
-              </div>
-            </div>
-          </Match>
-        </Switch>
-      </form>
-    )
-  }
-
   let listRef: ListRef | undefined
   function handleKey(e: KeyboardEvent) {
     if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
@@ -426,7 +301,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             error={formStore.error}
           />
           <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.continue")}
+            {language.t("common.submit")}
           </Button>
         </form>
       </div>
@@ -439,6 +314,12 @@ export function DialogConnectProvider(props: { provider: string }) {
       error: undefined as string | undefined,
     })
 
+    onMount(() => {
+      if (store.authorization?.method === "code" && store.authorization?.url) {
+        platform.openLink(store.authorization.url)
+      }
+    })
+
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
@@ -487,7 +368,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             error={formStore.error}
           />
           <Button class="w-auto" type="submit" size="large" variant="primary">
-            {language.t("common.continue")}
+            {language.t("common.submit")}
           </Button>
         </form>
       </div>
@@ -505,6 +386,10 @@ export function DialogConnectProvider(props: { provider: string }) {
 
     onMount(() => {
       void (async () => {
+        if (store.authorization?.url) {
+          platform.openLink(store.authorization.url)
+        }
+
         const result = await globalSDK.client.provider.oauth
           .callback({
             providerID: props.provider,
@@ -585,9 +470,6 @@ export function DialogConnectProvider(props: { provider: string }) {
                   </div>
                 </div>
               </Match>
-              <Match when={store.state === "prompt"}>
-                <OAuthPromptsView />
-              </Match>
               <Match when={store.state === "error"}>
                 <div class="text-14-regular text-text-base">
                   <div class="flex items-center gap-x-2">

packages/app/src/components/dialog-custom-provider-form.ts

@@ -1,159 +0,0 @@
-const PROVIDER_ID = /^[a-z0-9][a-z0-9-_]*$/
-const OPENAI_COMPATIBLE = "@ai-sdk/openai-compatible"
-
-type Translator = (key: string, vars?: Record<string, string | number | boolean>) => string
-
-export type ModelErr = {
-  id?: string
-  name?: string
-}
-
-export type HeaderErr = {
-  key?: string
-  value?: string
-}
-
-export type ModelRow = {
-  row: string
-  id: string
-  name: string
-  err: ModelErr
-}
-
-export type HeaderRow = {
-  row: string
-  key: string
-  value: string
-  err: HeaderErr
-}
-
-export type FormState = {
-  providerID: string
-  name: string
-  baseURL: string
-  apiKey: string
-  models: ModelRow[]
-  headers: HeaderRow[]
-  saving: boolean
-  err: {
-    providerID?: string
-    name?: string
-    baseURL?: string
-  }
-}
-
-type ValidateArgs = {
-  form: FormState
-  t: Translator
-  disabledProviders: string[]
-  existingProviderIDs: Set<string>
-}
-
-export function validateCustomProvider(input: ValidateArgs) {
-  const providerID = input.form.providerID.trim()
-  const name = input.form.name.trim()
-  const baseURL = input.form.baseURL.trim()
-  const apiKey = input.form.apiKey.trim()
-
-  const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
-  const key = apiKey && !env ? apiKey : undefined
-
-  const idError = !providerID
-    ? input.t("provider.custom.error.providerID.required")
-    : !PROVIDER_ID.test(providerID)
-      ? input.t("provider.custom.error.providerID.format")
-      : undefined
-
-  const nameError = !name ? input.t("provider.custom.error.name.required") : undefined
-  const urlError = !baseURL
-    ? input.t("provider.custom.error.baseURL.required")
-    : !/^https?:\/\//.test(baseURL)
-      ? input.t("provider.custom.error.baseURL.format")
-      : undefined
-
-  const disabled = input.disabledProviders.includes(providerID)
-  const existsError = idError
-    ? undefined
-    : input.existingProviderIDs.has(providerID) && !disabled
-      ? input.t("provider.custom.error.providerID.exists")
-      : undefined
-
-  const seenModels = new Set<string>()
-  const models = input.form.models.map((m) => {
-    const id = m.id.trim()
-    const idError = !id
-      ? input.t("provider.custom.error.required")
-      : seenModels.has(id)
-        ? input.t("provider.custom.error.duplicate")
-        : (() => {
-            seenModels.add(id)
-            return undefined
-          })()
-    const nameError = !m.name.trim() ? input.t("provider.custom.error.required") : undefined
-    return { id: idError, name: nameError }
-  })
-  const modelsValid = models.every((m) => !m.id && !m.name)
-  const modelConfig = Object.fromEntries(input.form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
-
-  const seenHeaders = new Set<string>()
-  const headers = input.form.headers.map((h) => {
-    const key = h.key.trim()
-    const value = h.value.trim()
-
-    if (!key && !value) return {}
-    const keyError = !key
-      ? input.t("provider.custom.error.required")
-      : seenHeaders.has(key.toLowerCase())
-        ? input.t("provider.custom.error.duplicate")
-        : (() => {
-            seenHeaders.add(key.toLowerCase())
-            return undefined
-          })()
-    const valueError = !value ? input.t("provider.custom.error.required") : undefined
-    return { key: keyError, value: valueError }
-  })
-  const headersValid = headers.every((h) => !h.key && !h.value)
-  const headerConfig = Object.fromEntries(
-    input.form.headers
-      .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
-      .filter((h) => !!h.key && !!h.value)
-      .map((h) => [h.key, h.value]),
-  )
-
-  const err = {
-    providerID: idError ?? existsError,
-    name: nameError,
-    baseURL: urlError,
-  }
-
-  const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
-  if (!ok) return { err, models, headers }
-
-  return {
-    err,
-    models,
-    headers,
-    result: {
-      providerID,
-      name,
-      key,
-      config: {
-        npm: OPENAI_COMPATIBLE,
-        name,
-        ...(env ? { env: [env] } : {}),
-        options: {
-          baseURL,
-          ...(Object.keys(headerConfig).length ? { headers: headerConfig } : {}),
-        },
-        models: modelConfig,
-      },
-    },
-  }
-}
-
-let row = 0
-
-const nextRow = () => `row-${row++}`
-
-export const modelRow = (): ModelRow => ({ row: nextRow(), id: "", name: "", err: {} })
-export const headerRow = (): HeaderRow => ({ row: nextRow(), key: "", value: "", err: {} })

packages/app/src/components/dialog-custom-provider.test.ts

@@ -1,82 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { validateCustomProvider } from "./dialog-custom-provider-form"
-
-const t = (key: string) => key
-
-describe("validateCustomProvider", () => {
-  test("builds trimmed config payload", () => {
-    const result = validateCustomProvider({
-      form: {
-        providerID: "custom-provider",
-        name: " Custom Provider ",
-        baseURL: "https://api.example.com ",
-        apiKey: " {env: CUSTOM_PROVIDER_KEY} ",
-        models: [{ row: "m0", id: " model-a ", name: " Model A ", err: {} }],
-        headers: [
-          { row: "h0", key: " X-Test ", value: " enabled ", err: {} },
-          { row: "h1", key: "", value: "", err: {} },
-        ],
-        saving: false,
-        err: {},
-      },
-      t,
-      disabledProviders: [],
-      existingProviderIDs: new Set(),
-    })
-
-    expect(result.result).toEqual({
-      providerID: "custom-provider",
-      name: "Custom Provider",
-      key: undefined,
-      config: {
-        npm: "@ai-sdk/openai-compatible",
-        name: "Custom Provider",
-        env: ["CUSTOM_PROVIDER_KEY"],
-        options: {
-          baseURL: "https://api.example.com",
-          headers: {
-            "X-Test": "enabled",
-          },
-        },
-        models: {
-          "model-a": { name: "Model A" },
-        },
-      },
-    })
-  })
-
-  test("flags duplicate rows and allows reconnecting disabled providers", () => {
-    const result = validateCustomProvider({
-      form: {
-        providerID: "custom-provider",
-        name: "Provider",
-        baseURL: "https://api.example.com",
-        apiKey: "secret",
-        models: [
-          { row: "m0", id: "model-a", name: "Model A", err: {} },
-          { row: "m1", id: "model-a", name: "Model A 2", err: {} },
-        ],
-        headers: [
-          { row: "h0", key: "Authorization", value: "one", err: {} },
-          { row: "h1", key: "authorization", value: "two", err: {} },
-        ],
-        saving: false,
-        err: {},
-      },
-      t,
-      disabledProviders: ["custom-provider"],
-      existingProviderIDs: new Set(["custom-provider"]),
-    })
-
-    expect(result.result).toBeUndefined()
-    expect(result.err.providerID).toBeUndefined()
-    expect(result.models[1]).toEqual({
-      id: "provider.custom.error.duplicate",
-      name: undefined,
-    })
-    expect(result.headers[1]).toEqual({
-      key: "provider.custom.error.duplicate",
-      value: undefined,
-    })
-  })
-})

packages/app/src/components/dialog-custom-provider.tsx

@@ -5,15 +5,158 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
-import { batch, For } from "solid-js"
+import { For } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { createStore } from "solid-js/store"
 import { Link } from "@/components/link"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
-import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
 import { DialogSelectProvider } from "./dialog-select-provider"
 
+const PROVIDER_ID = /^[a-z0-9][a-z0-9-_]*$/
+const OPENAI_COMPATIBLE = "@ai-sdk/openai-compatible"
+
+type Translator = ReturnType<typeof useLanguage>["t"]
+
+type ModelRow = {
+  id: string
+  name: string
+}
+
+type HeaderRow = {
+  key: string
+  value: string
+}
+
+type FormState = {
+  providerID: string
+  name: string
+  baseURL: string
+  apiKey: string
+  models: ModelRow[]
+  headers: HeaderRow[]
+  saving: boolean
+}
+
+type FormErrors = {
+  providerID: string | undefined
+  name: string | undefined
+  baseURL: string | undefined
+  models: Array<{ id?: string; name?: string }>
+  headers: Array<{ key?: string; value?: string }>
+}
+
+type ValidateArgs = {
+  form: FormState
+  t: Translator
+  disabledProviders: string[]
+  existingProviderIDs: Set<string>
+}
+
+function validateCustomProvider(input: ValidateArgs) {
+  const providerID = input.form.providerID.trim()
+  const name = input.form.name.trim()
+  const baseURL = input.form.baseURL.trim()
+  const apiKey = input.form.apiKey.trim()
+
+  const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
+  const key = apiKey && !env ? apiKey : undefined
+
+  const idError = !providerID
+    ? input.t("provider.custom.error.providerID.required")
+    : !PROVIDER_ID.test(providerID)
+      ? input.t("provider.custom.error.providerID.format")
+      : undefined
+
+  const nameError = !name ? input.t("provider.custom.error.name.required") : undefined
+  const urlError = !baseURL
+    ? input.t("provider.custom.error.baseURL.required")
+    : !/^https?:\/\//.test(baseURL)
+      ? input.t("provider.custom.error.baseURL.format")
+      : undefined
+
+  const disabled = input.disabledProviders.includes(providerID)
+  const existsError = idError
+    ? undefined
+    : input.existingProviderIDs.has(providerID) && !disabled
+      ? input.t("provider.custom.error.providerID.exists")
+      : undefined
+
+  const seenModels = new Set<string>()
+  const modelErrors = input.form.models.map((m) => {
+    const id = m.id.trim()
+    const modelIdError = !id
+      ? input.t("provider.custom.error.required")
+      : seenModels.has(id)
+        ? input.t("provider.custom.error.duplicate")
+        : (() => {
+            seenModels.add(id)
+            return undefined
+          })()
+    const modelNameError = !m.name.trim() ? input.t("provider.custom.error.required") : undefined
+    return { id: modelIdError, name: modelNameError }
+  })
+  const modelsValid = modelErrors.every((m) => !m.id && !m.name)
+  const models = Object.fromEntries(input.form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
+
+  const seenHeaders = new Set<string>()
+  const headerErrors = input.form.headers.map((h) => {
+    const key = h.key.trim()
+    const value = h.value.trim()
+
+    if (!key && !value) return {}
+    const keyError = !key
+      ? input.t("provider.custom.error.required")
+      : seenHeaders.has(key.toLowerCase())
+        ? input.t("provider.custom.error.duplicate")
+        : (() => {
+            seenHeaders.add(key.toLowerCase())
+            return undefined
+          })()
+    const valueError = !value ? input.t("provider.custom.error.required") : undefined
+    return { key: keyError, value: valueError }
+  })
+  const headersValid = headerErrors.every((h) => !h.key && !h.value)
+  const headers = Object.fromEntries(
+    input.form.headers
+      .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
+      .filter((h) => !!h.key && !!h.value)
+      .map((h) => [h.key, h.value]),
+  )
+
+  const errors: FormErrors = {
+    providerID: idError ?? existsError,
+    name: nameError,
+    baseURL: urlError,
+    models: modelErrors,
+    headers: headerErrors,
+  }
+
+  const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
+  if (!ok) return { errors }
+
+  const options = {
+    baseURL,
+    ...(Object.keys(headers).length ? { headers } : {}),
+  }
+
+  return {
+    errors,
+    result: {
+      providerID,
+      name,
+      key,
+      config: {
+        npm: OPENAI_COMPATIBLE,
+        name,
+        ...(env ? { env: [env] } : {}),
+        options,
+        models,
+      },
+    },
+  }
+}
+
 type Props = {
   back?: "providers" | "close"
 }
@@ -29,10 +172,17 @@ export function DialogCustomProvider(props: Props) {
     name: "",
     baseURL: "",
     apiKey: "",
-    models: [modelRow()],
+    models: [{ id: "", name: "" }],
-    headers: [headerRow()],
+    headers: [{ key: "", value: "" }],
     saving: false,
-    err: {},
+  })
+
+  const [errors, setErrors] = createStore<FormErrors>({
+    providerID: undefined,
+    name: undefined,
+    baseURL: undefined,
+    models: [{}],
+    headers: [{}],
   })
 
   const goBack = () => {
@@ -44,61 +194,25 @@ export function DialogCustomProvider(props: Props) {
   }
 
   const addModel = () => {
-    setForm(
+    setForm("models", (v) => [...v, { id: "", name: "" }])
-      "models",
+    setErrors("models", (v) => [...v, {}])
-      produce((rows) => {
-        rows.push(modelRow())
-      }),
-    )
   }
 
   const removeModel = (index: number) => {
     if (form.models.length <= 1) return
-    setForm(
+    setForm("models", (v) => v.filter((_, i) => i !== index))
-      "models",
+    setErrors("models", (v) => v.filter((_, i) => i !== index))
-      produce((rows) => {
-        rows.splice(index, 1)
-      }),
-    )
   }
 
   const addHeader = () => {
-    setForm(
+    setForm("headers", (v) => [...v, { key: "", value: "" }])
-      "headers",
+    setErrors("headers", (v) => [...v, {}])
-      produce((rows) => {
-        rows.push(headerRow())
-      }),
-    )
   }
 
   const removeHeader = (index: number) => {
     if (form.headers.length <= 1) return
-    setForm(
+    setForm("headers", (v) => v.filter((_, i) => i !== index))
-      "headers",
+    setErrors("headers", (v) => v.filter((_, i) => i !== index))
-      produce((rows) => {
-        rows.splice(index, 1)
-      }),
-    )
-  }
-
-  const setField = (key: "providerID" | "name" | "baseURL" | "apiKey", value: string) => {
-    setForm(key, value)
-    if (key === "apiKey") return
-    setForm("err", key, undefined)
-  }
-
-  const setModel = (index: number, key: "id" | "name", value: string) => {
-    batch(() => {
-      setForm("models", index, key, value)
-      setForm("models", index, "err", key, undefined)
-    })
-  }
-
-  const setHeader = (index: number, key: "key" | "value", value: string) => {
-    batch(() => {
-      setForm("headers", index, key, value)
-      setForm("headers", index, "err", key, undefined)
-    })
   }
 
   const validate = () => {
@@ -108,11 +222,7 @@ export function DialogCustomProvider(props: Props) {
       disabledProviders: globalSync.data.config.disabled_providers ?? [],
       existingProviderIDs: new Set(globalSync.data.provider.all.map((p) => p.id)),
     })
-    batch(() => {
+    setErrors(output.errors)
-      setForm("err", output.err)
-      output.models.forEach((err, index) => setForm("models", index, "err", err))
-      output.headers.forEach((err, index) => setForm("headers", index, "err", err))
-    })
     return output.result
   }
 
@@ -195,32 +305,32 @@ export function DialogCustomProvider(props: Props) {
               placeholder={language.t("provider.custom.field.providerID.placeholder")}
               description={language.t("provider.custom.field.providerID.description")}
               value={form.providerID}
-              onChange={(v) => setField("providerID", v)}
+              onChange={(v) => setForm("providerID", v)}
-              validationState={form.err.providerID ? "invalid" : undefined}
+              validationState={errors.providerID ? "invalid" : undefined}
-              error={form.err.providerID}
+              error={errors.providerID}
             />
             <TextField
               label={language.t("provider.custom.field.name.label")}
               placeholder={language.t("provider.custom.field.name.placeholder")}
               value={form.name}
-              onChange={(v) => setField("name", v)}
+              onChange={(v) => setForm("name", v)}
-              validationState={form.err.name ? "invalid" : undefined}
+              validationState={errors.name ? "invalid" : undefined}
-              error={form.err.name}
+              error={errors.name}
             />
             <TextField
               label={language.t("provider.custom.field.baseURL.label")}
               placeholder={language.t("provider.custom.field.baseURL.placeholder")}
               value={form.baseURL}
-              onChange={(v) => setField("baseURL", v)}
+              onChange={(v) => setForm("baseURL", v)}
-              validationState={form.err.baseURL ? "invalid" : undefined}
+              validationState={errors.baseURL ? "invalid" : undefined}
-              error={form.err.baseURL}
+              error={errors.baseURL}
             />
             <TextField
               label={language.t("provider.custom.field.apiKey.label")}
               placeholder={language.t("provider.custom.field.apiKey.placeholder")}
               description={language.t("provider.custom.field.apiKey.description")}
               value={form.apiKey}
-              onChange={(v) => setField("apiKey", v)}
+              onChange={(v) => setForm("apiKey", v)}
             />
           </div>
 
@@ -228,16 +338,16 @@ export function DialogCustomProvider(props: Props) {
             <label class="text-12-medium text-text-weak">{language.t("provider.custom.models.label")}</label>
             <For each={form.models}>
               {(m, i) => (
-                <div class="flex gap-2 items-start" data-row={m.row}>
+                <div class="flex gap-2 items-start">
                   <div class="flex-1">
                     <TextField
                       label={language.t("provider.custom.models.id.label")}
                       hideLabel
                       placeholder={language.t("provider.custom.models.id.placeholder")}
                       value={m.id}
-                      onChange={(v) => setModel(i(), "id", v)}
+                      onChange={(v) => setForm("models", i(), "id", v)}
-                      validationState={m.err.id ? "invalid" : undefined}
+                      validationState={errors.models[i()]?.id ? "invalid" : undefined}
-                      error={m.err.id}
+                      error={errors.models[i()]?.id}
                     />
                   </div>
                   <div class="flex-1">
@@ -246,9 +356,9 @@ export function DialogCustomProvider(props: Props) {
                       hideLabel
                       placeholder={language.t("provider.custom.models.name.placeholder")}
                       value={m.name}
-                      onChange={(v) => setModel(i(), "name", v)}
+                      onChange={(v) => setForm("models", i(), "name", v)}
-                      validationState={m.err.name ? "invalid" : undefined}
+                      validationState={errors.models[i()]?.name ? "invalid" : undefined}
-                      error={m.err.name}
+                      error={errors.models[i()]?.name}
                     />
                   </div>
                   <IconButton
@@ -272,16 +382,16 @@ export function DialogCustomProvider(props: Props) {
             <label class="text-12-medium text-text-weak">{language.t("provider.custom.headers.label")}</label>
             <For each={form.headers}>
               {(h, i) => (
-                <div class="flex gap-2 items-start" data-row={h.row}>
+                <div class="flex gap-2 items-start">
                   <div class="flex-1">
                     <TextField
                       label={language.t("provider.custom.headers.key.label")}
                       hideLabel
                       placeholder={language.t("provider.custom.headers.key.placeholder")}
                       value={h.key}
-                      onChange={(v) => setHeader(i(), "key", v)}
+                      onChange={(v) => setForm("headers", i(), "key", v)}
-                      validationState={h.err.key ? "invalid" : undefined}
+                      validationState={errors.headers[i()]?.key ? "invalid" : undefined}
-                      error={h.err.key}
+                      error={errors.headers[i()]?.key}
                     />
                   </div>
                   <div class="flex-1">
@@ -290,9 +400,9 @@ export function DialogCustomProvider(props: Props) {
                       hideLabel
                       placeholder={language.t("provider.custom.headers.value.placeholder")}
                       value={h.value}
-                      onChange={(v) => setHeader(i(), "value", v)}
+                      onChange={(v) => setForm("headers", i(), "value", v)}
-                      validationState={h.err.value ? "invalid" : undefined}
+                      validationState={errors.headers[i()]?.value ? "invalid" : undefined}
-                      error={h.err.value}
+                      error={errors.headers[i()]?.value}
                     />
                   </div>
                   <IconButton

packages/app/src/components/dialog-fork.tsx

@@ -66,7 +66,6 @@ export const DialogFork: Component = () => {
       directory: sdk.directory,
       attachmentName: language.t("common.attachment"),
     })
-    const dir = base64Encode(sdk.directory)
 
     sdk.client.session
       .fork({ sessionID, messageID: item.id })
@@ -76,8 +75,10 @@ export const DialogFork: Component = () => {
           return
         }
         dialog.close()
-        prompt.set(restored, undefined, { dir, id: forked.data.id })
+        navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
-        navigate(`/${dir}/session/${forked.data.id}`)
+        requestAnimationFrame(() => {
+          prompt.set(restored)
+        })
       })
       .catch((err: unknown) => {
         const message = err instanceof Error ? err.message : String(err)

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

@@ -6,7 +6,7 @@ import { Keybind } from "@opencode-ai/ui/keybind"
 import { List } from "@opencode-ai/ui/list"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { useNavigate } from "@solidjs/router"
+import { useNavigate, useParams } from "@solidjs/router"
 import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
 import { useGlobalSDK } from "@/context/global-sdk"
@@ -14,8 +14,6 @@ import { useGlobalSync } from "@/context/global-sync"
 import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
 import { decode64 } from "@/utils/base64"
 import { getRelativeTime } from "@/utils/time"
 
@@ -134,14 +132,9 @@ function createFileEntries(props: {
   tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
   language: ReturnType<typeof useLanguage>
 }) {
-  const tabState = createSessionTabs({
-    tabs: props.tabs,
-    pathFromTab: props.file.pathFromTab,
-    normalizeTab: (tab) => (tab.startsWith("file://") ? props.file.tab(tab) : tab),
-  })
   const recent = createMemo(() => {
-    const all = tabState.openedTabs()
+    const all = props.tabs().all()
-    const active = tabState.activeFileTab()
+    const active = props.tabs().active()
     const order = active ? [active, ...all.filter((item) => item !== active)] : all
     const seen = new Set<string>()
     const category = props.language.t("palette.group.files")
@@ -266,11 +259,14 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
   const layout = useLayout()
   const file = useFile()
   const dialog = useDialog()
+  const params = useParams()
   const navigate = useNavigate()
   const globalSDK = useGlobalSDK()
   const globalSync = useGlobalSync()
-  const { params, tabs, view } = useSessionLayout()
   const filesOnly = () => props.mode === "files"
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const tabs = createMemo(() => layout.tabs(sessionKey))
+  const view = createMemo(() => layout.view(sessionKey))
   const state = { cleanup: undefined as (() => void) | void, committed: false }
   const [grouped, setGrouped] = createSignal(false)
   const commandEntries = createCommandEntries({ filesOnly, command, language })
@@ -426,7 +422,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
                   </Show>
                 </div>
                 <Show when={item.keybind}>
-                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", language.t)}</Keybind>
+                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "")}</Keybind>
                 </Show>
               </div>
             </Match>

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

@@ -13,10 +13,8 @@ import { DialogSelectProvider } from "./dialog-select-provider"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
-type ModelState = ReturnType<typeof useLocal>["model"]
+export const DialogSelectModelUnpaid: Component = () => {
-
+  const local = useLocal()
-export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
-  const model = props.model ?? useLocal().model
   const dialog = useDialog()
   const providers = useProviders()
   const language = useLanguage()
@@ -37,8 +35,8 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
         <List
           class="[&_[data-slot=list-scroll]]:overflow-visible"
           ref={(ref) => (listRef = ref)}
-          items={model.list}
+          items={local.model.list}
-          current={model.current()}
+          current={local.model.current()}
           key={(x) => `${x.provider.id}:${x.id}`}
           itemWrapper={(item, node) => (
             <Tooltip
@@ -57,7 +55,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
             </Tooltip>
           )}
           onSelect={(x) => {
-            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+            local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
               recent: true,
             })
             dialog.close()

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

@@ -18,22 +18,19 @@ import { useLanguage } from "@/context/language"
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
 
-type ModelState = ReturnType<typeof useLocal>["model"]
-
 const ModelList: Component<{
   provider?: string
   class?: string
   onSelect: () => void
   action?: JSX.Element
-  model?: ModelState
 }> = (props) => {
-  const model = props.model ?? useLocal().model
+  const local = useLocal()
   const language = useLanguage()
 
   const models = createMemo(() =>
-    model
+    local.model
       .list()
-      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
+      .filter((m) => local.model.visible({ modelID: m.id, providerID: m.provider.id }))
       .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
   )
 
@@ -44,7 +41,7 @@ const ModelList: Component<{
       emptyMessage={language.t("dialog.model.empty")}
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
-      current={model.current()}
+      current={local.model.current()}
       filterKeys={["provider.name", "name", "id"]}
       sortBy={(a, b) => a.name.localeCompare(b.name)}
       groupBy={(x) => x.provider.name}
@@ -66,7 +63,7 @@ const ModelList: Component<{
         </Tooltip>
       )}
       onSelect={(x) => {
-        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+        local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
           recent: true,
         })
         props.onSelect()
@@ -91,7 +88,6 @@ type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "a
 
 export function ModelSelectorPopover(props: {
   provider?: string
-  model?: ModelState
   children?: JSX.Element
   triggerAs?: ValidComponent
   triggerProps?: ModelSelectorTriggerProps
@@ -155,7 +151,6 @@ export function ModelSelectorPopover(props: {
           <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
           <ModelList
             provider={props.provider}
-            model={props.model}
             onSelect={() => setStore("open", false)}
             class="p-1"
             action={
@@ -189,7 +184,7 @@ export function ModelSelectorPopover(props: {
   )
 }
 
-export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
+export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
 
@@ -207,7 +202,7 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
         </Button>
       }
     >
-      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <ModelList provider={props.provider} onSelect={() => dialog.close()} />
       <Button
         variant="ghost"
         class="ml-3 mt-5 mb-6 text-text-base self-start"

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

@@ -14,9 +14,7 @@ import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
-import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
-
-const DEFAULT_USERNAME = "opencode"
 
 interface ServerFormProps {
   value: string
@@ -43,15 +41,13 @@ function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown
   })
 }
 
-function useDefaultServer() {
+function useDefaultServer(platform: ReturnType<typeof usePlatform>, language: ReturnType<typeof useLanguage>) {
-  const language = useLanguage()
+  const [defaultUrl, defaultUrlActions] = createResource(
-  const platform = usePlatform()
-  const [defaultKey, defaultUrlActions] = createResource(
     async () => {
       try {
-        const key = await platform.getDefaultServer?.()
+        const url = await platform.getDefaultServerUrl?.()
-        if (!key) return null
+        if (!url) return null
-        return key
+        return normalizeServerUrl(url) ?? null
       } catch (err) {
         showRequestError(language, err)
         return null
@@ -60,22 +56,20 @@ function useDefaultServer() {
     { initialValue: null },
   )
 
-  const canDefault = createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer)
+  const canDefault = createMemo(() => !!platform.getDefaultServerUrl && !!platform.setDefaultServerUrl)
-  const setDefault = async (key: ServerConnection.Key | null) => {
+  const setDefault = async (url: string | null) => {
     try {
-      await platform.setDefaultServer?.(key)
+      await platform.setDefaultServerUrl?.(url)
-      defaultUrlActions.mutate(key)
+      defaultUrlActions.mutate(url)
     } catch (err) {
       showRequestError(language, err)
     }
   }
 
-  return { defaultKey, canDefault, setDefault }
+  return { defaultUrl, canDefault, setDefault }
 }
 
-function useServerPreview() {
+function useServerPreview(fetcher: typeof fetch) {
-  const checkServerHealth = useCheckServerHealth()
-
   const looksComplete = (value: string) => {
     const normalized = normalizeServerUrl(value)
     if (!normalized) return false
@@ -98,7 +92,7 @@ function useServerPreview() {
     const http: ServerConnection.HttpBase = { url: normalized }
     if (username) http.username = username
     if (password) http.password = password
-    const result = await checkServerHealth(http)
+    const result = await checkServerHealth(http, fetcher)
     setStatus(result.healthy)
   }
 
@@ -121,7 +115,7 @@ function ServerForm(props: ServerFormProps) {
 
   return (
     <div class="px-5">
-      <div class="bg-surface-base rounded-md p-5 flex flex-col gap-3">
+      <div class="bg-surface-raised-base rounded-md p-5 flex flex-col gap-3">
         <div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
           <TextField
             type="text"
@@ -149,7 +143,7 @@ function ServerForm(props: ServerFormProps) {
           <TextField
             type="text"
             label={language.t("dialog.server.add.username")}
-            placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+            placeholder="username"
             value={props.username}
             disabled={props.busy}
             onChange={props.onUsernameChange}
@@ -158,7 +152,7 @@ function ServerForm(props: ServerFormProps) {
           <TextField
             type="password"
             label={language.t("dialog.server.add.password")}
-            placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+            placeholder="password"
             value={props.password}
             disabled={props.busy}
             onChange={props.onPasswordChange}
@@ -176,15 +170,15 @@ export function DialogSelectServer() {
   const server = useServer()
   const platform = usePlatform()
   const language = useLanguage()
-  const { defaultKey, canDefault, setDefault } = useDefaultServer()
+  const fetcher = platform.fetch ?? globalThis.fetch
-  const { previewStatus } = useServerPreview()
+  const { defaultUrl, canDefault, setDefault } = useDefaultServer(platform, language)
-  const checkServerHealth = useCheckServerHealth()
+  const { previewStatus } = useServerPreview(fetcher)
   const [store, setStore] = createStore({
     status: {} as Record<ServerConnection.Key, ServerHealth | undefined>,
     addServer: {
       url: "",
       name: "",
-      username: DEFAULT_USERNAME,
+      username: "",
       password: "",
       adding: false,
       error: "",
@@ -207,7 +201,7 @@ export function DialogSelectServer() {
     setStore("addServer", {
       url: "",
       name: "",
-      username: DEFAULT_USERNAME,
+      username: "",
       password: "",
       adding: false,
       error: "",
@@ -270,7 +264,7 @@ export function DialogSelectServer() {
     const results: Record<ServerConnection.Key, ServerHealth> = {}
     await Promise.all(
       items().map(async (conn) => {
-        results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
+        results[ServerConnection.key(conn)] = await checkServerHealth(conn.http, fetcher)
       }),
     )
     setStore("status", reconcile(results))
@@ -291,8 +285,8 @@ export function DialogSelectServer() {
       navigate("/")
       return
     }
+    server.setActive(ServerConnection.key(conn))
     navigate("/")
-    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
   }
 
   const handleAddChange = (value: string) => {
@@ -368,9 +362,9 @@ export function DialogSelectServer() {
       http: { url: normalized },
     }
     if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
+    if (store.addServer.username) conn.http.username = store.addServer.username
     if (store.addServer.password) conn.http.password = store.addServer.password
-    if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
+    const result = await checkServerHealth(conn.http, fetcher)
-    const result = await checkServerHealth(conn.http)
     setStore("addServer", { adding: false })
     if (!result.healthy) {
       setStore("addServer", { error: language.t("dialog.server.add.error") })
@@ -410,7 +404,7 @@ export function DialogSelectServer() {
       displayName: name,
       http: { url: normalized, username, password },
     }
-    const result = await checkServerHealth(conn.http)
+    const result = await checkServerHealth(conn.http, fetcher)
     setStore("editServer", { busy: false })
     if (!result.healthy) {
       setStore("editServer", { error: language.t("dialog.server.add.error") })
@@ -447,7 +441,7 @@ export function DialogSelectServer() {
       showForm: true,
       url: "",
       name: "",
-      username: DEFAULT_USERNAME,
+      username: "",
       password: "",
       error: "",
       status: undefined,
@@ -500,8 +494,8 @@ export function DialogSelectServer() {
 
   async function handleRemove(url: ServerConnection.Key) {
     server.remove(url)
-    if ((await platform.getDefaultServer?.()) === url) {
+    if ((await platform.getDefaultServerUrl?.()) === url) {
-      platform.setDefaultServer?.(null)
+      platform.setDefaultServerUrl?.(null)
     }
   }
 
@@ -542,7 +536,7 @@ export function DialogSelectServer() {
               if (x) select(x)
             }}
             divider={true}
-            class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
+            class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
           >
             {(i) => {
               const key = ServerConnection.key(i)
@@ -557,7 +551,7 @@ export function DialogSelectServer() {
                     status={store.status[key]}
                     class="flex items-center gap-3 min-w-0 flex-1"
                     badge={
-                      <Show when={defaultKey() === ServerConnection.key(i)}>
+                      <Show when={defaultUrl() === i.http.url}>
                         <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
                           {language.t("dialog.server.status.default")}
                         </span>
@@ -590,14 +584,14 @@ export function DialogSelectServer() {
                             >
                               <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                            <Show when={canDefault() && defaultKey() !== key}>
+                            <Show when={canDefault() && defaultUrl() !== i.http.url}>
-                              <DropdownMenu.Item onSelect={() => setDefault(key)}>
+                              <DropdownMenu.Item onSelect={() => setDefault(i.http.url)}>
                                 <DropdownMenu.ItemLabel>
                                   {language.t("dialog.server.menu.default")}
                                 </DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
                             </Show>
-                            <Show when={canDefault() && defaultKey() === key}>
+                            <Show when={canDefault() && defaultUrl() === i.http.url}>
                               <DropdownMenu.Item onSelect={() => setDefault(null)}>
                                 <DropdownMenu.ItemLabel>
                                   {language.t("dialog.server.menu.defaultRemove")}

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

@@ -1,7 +1,8 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
-import { createEffect, on, Component, Show, onCleanup, createMemo, createSignal } from "solid-js"
+import { createEffect, on, Component, Show, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
+import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
 import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
 import {
@@ -16,6 +17,7 @@ import {
 } from "@/context/prompt"
 import { useLayout } from "@/context/layout"
 import { useSDK } from "@/context/sdk"
+import { useParams } from "@solidjs/router"
 import { useSync } from "@/context/sync"
 import { useComments } from "@/context/comments"
 import { Button } from "@opencode-ai/ui/button"
@@ -25,6 +27,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
+import { RadioGroup } from "@opencode-ai/ui/radio-group"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
@@ -34,12 +37,8 @@ import { Persist, persisted } from "@/utils/persist"
 import { usePermission } from "@/context/permission"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
-import { promptEnabled, promptProbe } from "@/testing/prompt"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
-import { createPromptAttachments } from "./prompt-input/attachments"
+import { createPromptAttachments, ACCEPTED_FILE_TYPES } from "./prompt-input/attachments"
-import { ACCEPTED_FILE_TYPES } from "./prompt-input/files"
 import {
   canNavigateHistoryAtCursor,
   navigatePromptHistory,
@@ -49,7 +48,7 @@ import {
   type PromptHistoryStoredEntry,
   promptLength,
 } from "./prompt-input/history"
-import { createPromptSubmit, type FollowupDraft } from "./prompt-input/submit"
+import { createPromptSubmit } from "./prompt-input/submit"
 import { PromptPopover, type AtOption, type SlashCommand } from "./prompt-input/slash-popover"
 import { PromptContextItems } from "./prompt-input/context-items"
 import { PromptImageAttachments } from "./prompt-input/image-attachments"
@@ -62,11 +61,6 @@ interface PromptInputProps {
   ref?: (el: HTMLDivElement) => void
   newSessionWorktree?: string
   onNewSessionWorktreeReset?: () => void
-  edit?: { id: string; prompt: Prompt; context: FollowupDraft["context"] }
-  onEditLoaded?: () => void
-  shouldQueue?: () => boolean
-  onQueue?: (draft: FollowupDraft) => void
-  onAbort?: () => void
   onSubmit?: () => void
 }
 
@@ -108,21 +102,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const prompt = usePrompt()
   const layout = useLayout()
   const comments = useComments()
+  const params = useParams()
   const dialog = useDialog()
   const providers = useProviders()
   const command = useCommand()
   const permission = usePermission()
   const language = useLanguage()
   const platform = usePlatform()
-  const { params, tabs, view } = useSessionLayout()
   let editorRef!: HTMLDivElement
   let fileInputRef: HTMLInputElement | undefined
   let scrollRef!: HTMLDivElement
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
-  const inset = 56
+  const inset = 44
-  const space = `${inset}px`
 
   const scrollCursorIntoView = () => {
     const container = scrollRef
@@ -157,18 +150,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  const queueScroll = (count = 2) => {
+  const queueScroll = () => {
-    requestAnimationFrame(() => {
+    requestAnimationFrame(scrollCursorIntoView)
-      scrollCursorIntoView()
-      if (count > 1) queueScroll(count - 1)
-    })
   }
 
-  const activeFileTab = createSessionTabs({
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-    tabs,
+  const tabs = createMemo(() => layout.tabs(sessionKey))
-    pathFromTab: files.pathFromTab,
+  const view = createMemo(() => layout.view(sessionKey))
-    normalizeTab: (tab) => (tab.startsWith("file://") ? files.tab(tab) : tab),
-  }).activeFileTab
 
   const commentInReview = (path: string) => {
     const sessionID = params.id
@@ -221,7 +209,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const recent = createMemo(() => {
     const all = tabs().all()
-    const active = activeFileTab()
+    const active = tabs().active()
     const order = active ? [active, ...all.filter((x) => x !== active)] : all
     const seen = new Set<string>()
     const paths: string[] = []
@@ -244,23 +232,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       },
   )
   const working = createMemo(() => status()?.type !== "idle")
-  const tip = () => {
-    if (working()) {
-      return (
-        <div class="flex items-center gap-2">
-          <span>{language.t("prompt.action.stop")}</span>
-          <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
-        </div>
-      )
-    }
-
-    return (
-      <div class="flex items-center gap-2">
-        <span>{language.t("prompt.action.send")}</span>
-        <Icon name="enter" size="small" class="text-icon-base" />
-      </div>
-    )
-  }
   const imageAttachments = createMemo(() =>
     prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"),
   )
@@ -284,15 +255,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   })
 
   const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 })
-  const motion = (value: number) => ({
-    opacity: value,
-    transform: `scale(${0.95 + value * 0.05})`,
-    filter: `blur(${(1 - value) * 2}px)`,
-    "pointer-events": value > 0.5 ? ("auto" as const) : ("none" as const),
-  })
-  const buttons = createMemo(() => motion(buttonsSpring()))
-  const shell = createMemo(() => motion(1 - buttonsSpring()))
-  const control = createMemo(() => ({ height: "28px", ...buttons() }))
 
   const commentCount = createMemo(() => {
     if (store.mode === "shell") return 0
@@ -428,6 +390,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
+  const isFocused = createFocusSignal(() => editorRef)
   const escBlur = () => platform.platform === "desktop" && platform.os === "macos"
 
   const pick = () => fileInputRef?.click()
@@ -527,18 +490,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     setComposing(false)
   }
 
-  const handleCompositionStart = () => {
-    setComposing(true)
-  }
-
-  const handleCompositionEnd = () => {
-    setComposing(false)
-    requestAnimationFrame(() => {
-      if (composing()) return
-      reconcile(prompt.current().filter((part) => part.type !== "image"))
-    })
-  }
-
   const agentList = createMemo(() =>
     sync.data.agent
       .filter((agent) => !agent.hidden && agent.mode !== "primary")
@@ -622,7 +573,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const handleSlashSelect = (cmd: SlashCommand | undefined) => {
     if (!cmd) return
-    promptProbe.select(cmd.id)
     closePopover()
 
     if (cmd.type === "custom") {
@@ -711,20 +661,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     })
   })
 
-  if (promptEnabled()) {
-    createEffect(() => {
-      promptProbe.set({
-        popover: store.popover,
-        slash: {
-          active: slashActive() ?? null,
-          ids: slashFlat().map((cmd) => cmd.id),
-        },
-      })
-    })
-
-    onCleanup(() => promptProbe.clear())
-  }
-
   const selectPopoverActive = () => {
     if (store.popover === "at") {
       const items = atFlat()
@@ -744,27 +680,24 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  const reconcile = (input: Prompt) => {
-    if (mirror.input) {
-      mirror.input = false
-      if (isNormalizedEditor()) return
-
-      renderEditorWithCursor(input)
-      return
-    }
-
-    const dom = parseFromDOM()
-    if (isNormalizedEditor() && isPromptEqual(input, dom)) return
-
-    renderEditorWithCursor(input)
-  }
-
   createEffect(
     on(
       () => prompt.current(),
-      (parts) => {
+      (currentParts) => {
-        if (composing()) return
+        const inputParts = currentParts.filter((part) => part.type !== "image")
-        reconcile(parts.filter((part) => part.type !== "image"))
+
+        if (mirror.input) {
+          mirror.input = false
+          if (isNormalizedEditor()) return
+
+          renderEditorWithCursor(inputParts)
+          return
+        }
+
+        const domParts = parseFromDOM()
+        if (isNormalizedEditor() && isPromptEqual(inputParts, domParts)) return
+
+        renderEditorWithCursor(inputParts)
       },
     ),
   )
@@ -988,45 +921,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     setCurrentHistory("entries", next)
   }
 
-  createEffect(
-    on(
-      () => props.edit?.id,
-      (id) => {
-        const edit = props.edit
-        if (!id || !edit) return
-
-        for (const item of prompt.context.items()) {
-          prompt.context.remove(item.key)
-        }
-
-        for (const item of edit.context) {
-          prompt.context.add({
-            type: item.type,
-            path: item.path,
-            selection: item.selection,
-            comment: item.comment,
-            commentID: item.commentID,
-            commentOrigin: item.commentOrigin,
-            preview: item.preview,
-          })
-        }
-
-        setStore("mode", "normal")
-        setStore("popover", null)
-        setStore("historyIndex", -1)
-        setStore("savedPrompt", null)
-        prompt.set(edit.prompt, promptLength(edit.prompt))
-        requestAnimationFrame(() => {
-          editorRef.focus()
-          setCursorPosition(editorRef, promptLength(edit.prompt))
-          queueScroll()
-        })
-        props.onEditLoaded?.()
-      },
-      { defer: true },
-    ),
-  )
-
   const navigateHistory = (direction: "up" | "down") => {
     const result = navigatePromptHistory({
       direction,
@@ -1043,8 +937,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return true
   }
 
-  const { addAttachment, removeAttachment, handlePaste } = createPromptAttachments({
+  const { addImageAttachment, removeImageAttachment, handlePaste } = createPromptAttachments({
     editor: () => editorRef,
+    isFocused,
     isDialogActive: () => !!dialog.active,
     setDraggingType: (type) => setStore("draggingType", type),
     focusEditor: () => {
@@ -1061,17 +956,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!id) return permission.isAutoAcceptingDirectory(sdk.directory)
     return permission.isAutoAccepting(id, sdk.directory)
   })
-  const acceptLabel = createMemo(() =>
-    language.t(accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable"),
-  )
-  const toggleAccept = () => {
-    if (!params.id) {
-      permission.toggleAutoAcceptDirectory(sdk.directory)
-      return
-    }
-
-    permission.toggleAutoAccept(params.id, sdk.directory)
-  }
 
   const { abort, handleSubmit } = createPromptSubmit({
     info,
@@ -1091,9 +975,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     setPopover: (popover) => setStore("popover", popover),
     newSessionWorktree: () => props.newSessionWorktree,
     onNewSessionWorktreeReset: props.onNewSessionWorktreeReset,
-    shouldQueue: props.shouldQueue,
-    onQueue: props.onQueue,
-    onAbort: props.onAbort,
     onSubmit: props.onSubmit,
   })
 
@@ -1241,20 +1122,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     // Note: Shift+Enter is handled earlier, before IME check
     if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault()
-      if (event.repeat) return
-      if (
-        working() &&
-        prompt
-          .current()
-          .map((part) => ("content" in part ? part.content : ""))
-          .join("")
-          .trim().length === 0 &&
-        imageAttachments().length === 0 &&
-        commentCount() === 0
-      ) {
-        return
-      }
       handleSubmit(event)
     }
   }
@@ -1307,7 +1174,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           onOpen={(attachment) =>
             dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
           }
-          onRemove={removeAttachment}
+          onRemove={removeImageAttachment}
           removeLabel={language.t("prompt.attachment.remove")}
         />
         <div
@@ -1325,11 +1192,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             editorRef?.focus()
           }}
         >
-          <div
+          <div class="relative max-h-[240px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
-            class="relative max-h-[240px] overflow-y-auto no-scrollbar"
-            ref={(el) => (scrollRef = el)}
-            style={{ "scroll-padding-bottom": space }}
-          >
             <div
               data-component="prompt-input"
               ref={(el) => {
@@ -1345,79 +1208,44 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               spellcheck={store.mode === "normal"}
               onInput={handleInput}
               onPaste={handlePaste}
-              onCompositionStart={handleCompositionStart}
+              onCompositionStart={() => setComposing(true)}
-              onCompositionEnd={handleCompositionEnd}
+              onCompositionEnd={() => setComposing(false)}
               onBlur={handleBlur}
               onKeyDown={handleKeyDown}
               classList={{
                 "select-text": true,
-                "w-full pl-3 pr-2 pt-2 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",
               }}
-              style={{ "padding-bottom": space }}
             />
             <Show when={!prompt.dirty()}>
               <div
-                class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 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" }}
-                style={{ "padding-bottom": space }}
               >
                 {placeholder()}
               </div>
             </Show>
           </div>
 
-          <div
-            aria-hidden="true"
-            class="pointer-events-none absolute inset-x-0 bottom-0"
-            style={{
-              height: space,
-              background:
-                "linear-gradient(to top, var(--surface-raised-stronger-non-alpha) calc(100% - 20px), transparent)",
-            }}
-          />
-
           <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
             <input
               ref={fileInputRef}
               type="file"
-              multiple
               accept={ACCEPTED_FILE_TYPES.join(",")}
               class="hidden"
               onChange={(e) => {
-                const list = e.currentTarget.files
+                const file = e.currentTarget.files?.[0]
-                if (list) {
+                if (file) addImageAttachment(file)
-                  for (const file of Array.from(list)) {
-                    void addAttachment(file)
-                  }
-                }
                 e.currentTarget.value = ""
               }}
             />
 
-            <div class="flex items-center gap-1 pointer-events-auto">
-              <Tooltip placement="top" inactive={!prompt.dirty() && !working()} value={tip()}>
-                <IconButton
-                  data-action="prompt-submit"
-                  type="submit"
-                  disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  icon={working() ? "stop" : "arrow-up"}
-                  variant="primary"
-                  class="size-8"
-                  style={buttons()}
-                  aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
-                />
-              </Tooltip>
-            </div>
-          </div>
-
-          <div class="pointer-events-none absolute bottom-2 left-2">
             <div
               aria-hidden={store.mode !== "normal"}
-              class="pointer-events-auto"
+              class="flex items-center gap-1"
               style={{
                 "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
               }}
@@ -1432,7 +1260,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   type="button"
                   variant="ghost"
                   class="size-8 p-0"
-                  style={buttons()}
+                  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}
@@ -1441,6 +1273,85 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   <Icon name="plus" class="size-4.5" />
                 </Button>
               </TooltipKeybind>
+
+              <Tooltip
+                placement="top"
+                inactive={!prompt.dirty() && !working()}
+                value={
+                  <Switch>
+                    <Match when={working()}>
+                      <div class="flex items-center gap-2">
+                        <span>{language.t("prompt.action.stop")}</span>
+                        <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
+                      </div>
+                    </Match>
+                    <Match when={true}>
+                      <div class="flex items-center gap-2">
+                        <span>{language.t("prompt.action.send")}</span>
+                        <Icon name="enter" size="small" class="text-icon-base" />
+                      </div>
+                    </Match>
+                  </Switch>
+                }
+              >
+                <IconButton
+                  data-action="prompt-submit"
+                  type="submit"
+                  disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
+                  tabIndex={store.mode === "normal" ? undefined : -1}
+                  icon={working() ? "stop" : "arrow-up"}
+                  variant="primary"
+                  class="size-8"
+                  style={{
+                    opacity: buttonsSpring(),
+                    transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
+                    filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                  }}
+                  aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+                />
+              </Tooltip>
+            </div>
+          </div>
+
+          <div class="pointer-events-none absolute bottom-2 left-2">
+            <div class="pointer-events-auto">
+              <TooltipKeybind
+                placement="top"
+                gutter={8}
+                title={language.t(
+                  accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
+                )}
+                keybind={command.keybind("permissions.autoaccept")}
+              >
+                <Button
+                  data-action="prompt-permissions"
+                  variant="ghost"
+                  onClick={() => {
+                    if (!params.id) {
+                      permission.toggleAutoAcceptDirectory(sdk.directory)
+                      return
+                    }
+                    permission.toggleAutoAccept(params.id, sdk.directory)
+                  }}
+                  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="chevron-double-right"
+                    size="small"
+                    classList={{ "text-icon-success-base": accepting() }}
+                  />
+                </Button>
+              </TooltipKeybind>
             </div>
           </div>
         </div>
@@ -1453,83 +1364,61 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 class="h-7 flex items-center gap-1.5 max-w-[160px] min-w-0 absolute inset-y-0 left-0"
                 style={{
                   padding: "0 4px 0 8px",
-                  ...shell(),
+                  opacity: 1 - buttonsSpring(),
+                  transform: `scale(${0.95 + (1 - buttonsSpring()) * 0.05})`,
+                  filter: `blur(${buttonsSpring() * 2}px)`,
+                  "pointer-events": buttonsSpring() < 0.5 ? "auto" : "none",
                 }}
               >
                 <span class="truncate text-13-medium text-text-strong">{language.t("prompt.mode.shell")}</span>
                 <div class="size-4 shrink-0" />
               </div>
               <div class="flex items-center gap-1.5 min-w-0 flex-1">
-                <div data-component="prompt-agent-control">
+                <TooltipKeybind
-                  <TooltipKeybind
+                  placement="top"
-                    placement="top"
+                  gutter={4}
-                    gutter={4}
+                  title={language.t("command.agent.cycle")}
-                    title={language.t("command.agent.cycle")}
+                  keybind={command.keybind("agent.cycle")}
-                    keybind={command.keybind("agent.cycle")}
+                >
-                  >
+                  <Select
-                    <Select
+                    size="normal"
-                      size="normal"
+                    options={agentNames()}
-                      options={agentNames()}
+                    current={local.agent.current()?.name ?? ""}
-                      current={local.agent.current()?.name ?? ""}
+                    onSelect={local.agent.set}
-                      onSelect={local.agent.set}
+                    class="capitalize max-w-[160px]"
-                      class="capitalize max-w-[160px] text-text-base"
+                    valueClass="truncate text-13-regular"
-                      valueClass="truncate text-13-regular text-text-base"
+                    triggerStyle={{
-                      triggerStyle={control()}
+                      height: "28px",
-                      triggerProps={{ "data-action": "prompt-agent" }}
+                      opacity: buttonsSpring(),
-                      variant="ghost"
+                      transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                    />
+                      filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
-                  </TooltipKeybind>
+                      "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
-                </div>
+                    }}
-                <div data-component="prompt-model-control">
+                    variant="ghost"
-                  <Show
+                  />
-                    when={providers.paid().length > 0}
+                </TooltipKeybind>
-                    fallback={
+                <Show
-                      <TooltipKeybind
+                  when={providers.paid().length > 0}
-                        placement="top"
+                  fallback={
-                        gutter={4}
-                        title={language.t("command.model.choose")}
-                        keybind={command.keybind("model.choose")}
-                      >
-                        <Button
-                          data-action="prompt-model"
-                          as="div"
-                          variant="ghost"
-                          size="normal"
-                          class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
-                          style={control()}
-                          onClick={() => dialog.show(() => <DialogSelectModelUnpaid model={local.model} />)}
-                        >
-                          <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
+                      <Button
-                        model={local.model}
+                        as="div"
-                        triggerAs={Button}
+                        variant="ghost"
-                        triggerProps={{
+                        size="normal"
-                          variant: "ghost",
+                        class="min-w-0 max-w-[320px] text-13-regular group"
-                          size: "normal",
+                        style={{
-                          style: control(),
+                          height: "28px",
-                          class: "min-w-0 max-w-[320px] text-13-regular text-text-base group",
+                          opacity: buttonsSpring(),
-                          "data-action": "prompt-model",
+                          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
@@ -1542,55 +1431,101 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           {local.model.current()?.name ?? language.t("dialog.model.select.title")}
                         </span>
                         <Icon name="chevron-down" size="small" class="shrink-0" />
-                      </ModelSelectorPopover>
+                      </Button>
                     </TooltipKeybind>
-                  </Show>
+                  }
-                </div>
+                >
-                <div data-component="prompt-variant-control">
                   <TooltipKeybind
                     placement="top"
                     gutter={4}
-                    title={language.t("command.model.variant.cycle")}
+                    title={language.t("command.model.choose")}
-                    keybind={command.keybind("model.variant.cycle")}
+                    keybind={command.keybind("model.choose")}
                   >
-                    <Select
+                    <ModelSelectorPopover
-                      size="normal"
+                      triggerAs={Button}
-                      options={variants()}
+                      triggerProps={{
-                      current={local.model.variant.current() ?? "default"}
+                        variant: "ghost",
-                      label={(x) => (x === "default" ? language.t("common.default") : x)}
+                        size: "normal",
-                      onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
+                        style: {
-                      class="capitalize max-w-[160px] text-text-base"
+                          height: "28px",
-                      valueClass="truncate text-13-regular text-text-base"
+                          opacity: buttonsSpring(),
-                      triggerStyle={control()}
+                          transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                      triggerProps={{ "data-action": "prompt-model-variant" }}
+                          filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
-                      variant="ghost"
+                          "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>
-                </div>
+                </Show>
                 <TooltipKeybind
                   placement="top"
-                  gutter={8}
+                  gutter={4}
-                  title={acceptLabel()}
+                  title={language.t("command.model.variant.cycle")}
-                  keybind={command.keybind("permissions.autoaccept")}
+                  keybind={command.keybind("model.variant.cycle")}
                 >
-                  <Button
+                  <Select
-                    data-action="prompt-permissions"
+                    size="normal"
-                    variant="ghost"
+                    options={variants()}
-                    onClick={toggleAccept}
+                    current={local.model.variant.current() ?? "default"}
-                    classList={{
+                    label={(x) => (x === "default" ? language.t("common.default") : x)}
-                      "h-7 w-7 p-0 shrink-0 flex items-center justify-center": true,
+                    onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
-                      "text-text-base": !accepting(),
+                    class="capitalize max-w-[160px]"
-                      "hover:bg-surface-success-base": accepting(),
+                    valueClass="truncate text-13-regular"
+                    triggerStyle={{
+                      height: "28px",
+                      opacity: buttonsSpring(),
+                      transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
+                      filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                      "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
                     }}
-                    style={control()}
+                    variant="ghost"
-                    aria-label={acceptLabel()}
+                  />
-                    aria-pressed={accepting()}
-                  >
-                    <Icon name="shield" size="small" classList={{ "text-icon-success-base": accepting() }} />
-                  </Button>
                 </TooltipKeybind>
               </div>
             </div>
+            <div class="shrink-0">
+              <RadioGroup
+                options={["shell", "normal"] as const}
+                current={store.mode}
+                value={(mode) => mode}
+                label={(mode) => (
+                  <TooltipKeybind
+                    placement="top"
+                    gutter={4}
+                    openDelay={2000}
+                    title={language.t(mode === "shell" ? "prompt.mode.shell" : "prompt.mode.normal")}
+                    keybind={command.keybind(mode === "shell" ? "prompt.mode.shell" : "prompt.mode.normal")}
+                    class="size-full flex items-center justify-center"
+                  >
+                    <Icon
+                      name={mode === "shell" ? "console" : "prompt"}
+                      class="size-[18px]"
+                      classList={{
+                        "text-icon-strong-base": store.mode === mode,
+                        "text-icon-weak": store.mode !== mode,
+                      }}
+                    />
+                  </TooltipKeybind>
+                )}
+                onSelect={(mode) => mode && setMode(mode)}
+                fill
+                pad="none"
+                class="w-[68px]"
+              />
+            </div>
           </div>
         </DockTray>
       </Show>

packages/app/src/components/prompt-input/attachments.test.ts

@@ -1,44 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { attachmentMime } from "./files"
-import { pasteMode } from "./paste"
-
-describe("attachmentMime", () => {
-  test("keeps PDFs when the browser reports the mime", async () => {
-    const file = new File(["%PDF-1.7"], "guide.pdf", { type: "application/pdf" })
-    expect(await attachmentMime(file)).toBe("application/pdf")
-  })
-
-  test("normalizes structured text types to text/plain", async () => {
-    const file = new File(['{"ok":true}\n'], "data.json", { type: "application/json" })
-    expect(await attachmentMime(file)).toBe("text/plain")
-  })
-
-  test("accepts text files even with a misleading browser mime", async () => {
-    const file = new File(["export const x = 1\n"], "main.ts", { type: "video/mp2t" })
-    expect(await attachmentMime(file)).toBe("text/plain")
-  })
-
-  test("rejects binary files", async () => {
-    const file = new File([Uint8Array.of(0, 255, 1, 2)], "blob.bin", { type: "application/octet-stream" })
-    expect(await attachmentMime(file)).toBeUndefined()
-  })
-})
-
-describe("pasteMode", () => {
-  test("uses native paste for short single-line text", () => {
-    expect(pasteMode("hello world")).toBe("native")
-  })
-
-  test("uses manual paste for multiline text", () => {
-    expect(
-      pasteMode(`{
-  "ok": true
-}`),
-    ).toBe("manual")
-    expect(pasteMode("a\r\nb")).toBe("manual")
-  })
-
-  test("uses manual paste for large text", () => {
-    expect(pasteMode("x".repeat(8000))).toBe("manual")
-  })
-})

packages/app/src/components/prompt-input/attachments.ts

@@ -4,28 +4,26 @@ import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context
 import { useLanguage } from "@/context/language"
 import { uuid } from "@/utils/uuid"
 import { getCursorPosition } from "./editor-dom"
-import { attachmentMime } from "./files"
-import { normalizePaste, pasteMode } from "./paste"
 
-function dataUrl(file: File, mime: string) {
+export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
-  return new Promise<string>((resolve) => {
+export const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
-    const reader = new FileReader()
+const LARGE_PASTE_CHARS = 8000
-    reader.addEventListener("error", () => resolve(""))
+const LARGE_PASTE_BREAKS = 120
-    reader.addEventListener("load", () => {
+
-      const value = typeof reader.result === "string" ? reader.result : ""
+function largePaste(text: string) {
-      const idx = value.indexOf(",")
+  if (text.length >= LARGE_PASTE_CHARS) return true
-      if (idx === -1) {
+  let breaks = 0
-        resolve(value)
+  for (const char of text) {
-        return
+    if (char !== "\n") continue
-      }
+    breaks += 1
-      resolve(`data:${mime};base64,${value.slice(idx + 1)}`)
+    if (breaks >= LARGE_PASTE_BREAKS) return true
-    })
+  }
-    reader.readAsDataURL(file)
+  return false
-  })
 }
 
 type PromptAttachmentsInput = {
   editor: () => HTMLDivElement | undefined
+  isFocused: () => boolean
   isDialogActive: () => boolean
   setDraggingType: (type: "image" | "@mention" | null) => void
   focusEditor: () => void
@@ -37,47 +35,35 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
   const prompt = usePrompt()
   const language = useLanguage()
 
-  const warn = () => {
+  const addImageAttachment = async (file: File) => {
-    showToast({
+    if (!ACCEPTED_FILE_TYPES.includes(file.type)) return
-      title: language.t("prompt.toast.pasteUnsupported.title"),
+
-      description: language.t("prompt.toast.pasteUnsupported.description"),
+    const reader = new FileReader()
-    })
+    reader.onload = () => {
+      const editor = input.editor()
+      if (!editor) return
+      const dataUrl = reader.result as string
+      const attachment: ImageAttachmentPart = {
+        type: "image",
+        id: uuid(),
+        filename: file.name,
+        mime: file.type,
+        dataUrl,
+      }
+      const cursorPosition = prompt.cursor() ?? getCursorPosition(editor)
+      prompt.set([...prompt.current(), attachment], cursorPosition)
+    }
+    reader.readAsDataURL(file)
   }
 
-  const add = async (file: File, toast = true) => {
+  const removeImageAttachment = (id: string) => {
-    const mime = await attachmentMime(file)
-    if (!mime) {
-      if (toast) warn()
-      return false
-    }
-
-    const editor = input.editor()
-    if (!editor) return false
-
-    const url = await dataUrl(file, mime)
-    if (!url) return false
-
-    const attachment: ImageAttachmentPart = {
-      type: "image",
-      id: uuid(),
-      filename: file.name,
-      mime,
-      dataUrl: url,
-    }
-    const cursor = prompt.cursor() ?? getCursorPosition(editor)
-    prompt.set([...prompt.current(), attachment], cursor)
-    return true
-  }
-
-  const addAttachment = (file: File) => add(file)
-
-  const removeAttachment = (id: string) => {
     const current = prompt.current()
     const next = current.filter((part) => part.type !== "image" || part.id !== id)
     prompt.set(next, prompt.cursor())
   }
 
   const handlePaste = async (event: ClipboardEvent) => {
+    if (!input.isFocused()) return
     const clipboardData = event.clipboardData
     if (!clipboardData) return
 
@@ -86,16 +72,21 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
 
     const items = Array.from(clipboardData.items)
     const fileItems = items.filter((item) => item.kind === "file")
+    const imageItems = fileItems.filter((item) => ACCEPTED_FILE_TYPES.includes(item.type))
+
+    if (imageItems.length > 0) {
+      for (const item of imageItems) {
+        const file = item.getAsFile()
+        if (file) await addImageAttachment(file)
+      }
+      return
+    }
 
     if (fileItems.length > 0) {
-      let found = false
+      showToast({
-      for (const item of fileItems) {
+        title: language.t("prompt.toast.pasteUnsupported.title"),
-        const file = item.getAsFile()
+        description: language.t("prompt.toast.pasteUnsupported.description"),
-        if (!file) continue
+      })
-        const ok = await add(file, false)
-        if (ok) found = true
-      }
-      if (!found) warn()
       return
     }
 
@@ -105,30 +96,23 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
     if (input.readClipboardImage && !plainText) {
       const file = await input.readClipboardImage()
       if (file) {
-        await addAttachment(file)
+        await addImageAttachment(file)
         return
       }
     }
 
     if (!plainText) return
 
-    const text = normalizePaste(plainText)
+    if (largePaste(plainText)) {
-
+      if (input.addPart({ type: "text", content: plainText, start: 0, end: 0 })) return
-    const put = () => {
-      if (input.addPart({ type: "text", content: text, start: 0, end: 0 })) return true
       input.focusEditor()
-      return input.addPart({ type: "text", content: text, start: 0, end: 0 })
+      if (input.addPart({ type: "text", content: plainText, start: 0, end: 0 })) return
     }
 
-    if (pasteMode(text) === "manual") {
+    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, plainText)
-      put()
-      return
-    }
-
-    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, text)
     if (inserted) return
 
-    put()
+    input.addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 
   const handleGlobalDragOver = (event: DragEvent) => {
@@ -169,12 +153,11 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
     const dropped = event.dataTransfer?.files
     if (!dropped) return
 
-    let found = false
     for (const file of Array.from(dropped)) {
-      const ok = await add(file, false)
+      if (ACCEPTED_FILE_TYPES.includes(file.type)) {
-      if (ok) found = true
+        await addImageAttachment(file)
+      }
     }
-    if (!found && dropped.length > 0) warn()
   }
 
   onMount(() => {
@@ -190,8 +173,8 @@ export function createPromptAttachments(input: PromptAttachmentsInput) {
   })
 
   return {
-    addAttachment,
+    addImageAttachment,
-    removeAttachment,
+    removeImageAttachment,
     handlePaste,
   }
 }

packages/app/src/components/prompt-input/files.ts

@@ -1,66 +0,0 @@
-import { ACCEPTED_FILE_TYPES, ACCEPTED_IMAGE_TYPES } from "@/constants/file-picker"
-
-export { ACCEPTED_FILE_TYPES }
-
-const IMAGE_MIMES = new Set(ACCEPTED_IMAGE_TYPES)
-const IMAGE_EXTS = new Map([
-  ["gif", "image/gif"],
-  ["jpeg", "image/jpeg"],
-  ["jpg", "image/jpeg"],
-  ["png", "image/png"],
-  ["webp", "image/webp"],
-])
-const TEXT_MIMES = new Set([
-  "application/json",
-  "application/ld+json",
-  "application/toml",
-  "application/x-toml",
-  "application/x-yaml",
-  "application/xml",
-  "application/yaml",
-])
-
-const SAMPLE = 4096
-
-function kind(type: string) {
-  return type.split(";", 1)[0]?.trim().toLowerCase() ?? ""
-}
-
-function ext(name: string) {
-  const idx = name.lastIndexOf(".")
-  if (idx === -1) return ""
-  return name.slice(idx + 1).toLowerCase()
-}
-
-function textMime(type: string) {
-  if (!type) return false
-  if (type.startsWith("text/")) return true
-  if (TEXT_MIMES.has(type)) return true
-  if (type.endsWith("+json")) return true
-  return type.endsWith("+xml")
-}
-
-function textBytes(bytes: Uint8Array) {
-  if (bytes.length === 0) return true
-  let count = 0
-  for (const byte of bytes) {
-    if (byte === 0) return false
-    if (byte < 9 || (byte > 13 && byte < 32)) count += 1
-  }
-  return count / bytes.length <= 0.3
-}
-
-export async function attachmentMime(file: File) {
-  const type = kind(file.type)
-  if (IMAGE_MIMES.has(type)) return type
-  if (type === "application/pdf") return type
-
-  const suffix = ext(file.name)
-  const fallback = IMAGE_EXTS.get(suffix) ?? (suffix === "pdf" ? "application/pdf" : undefined)
-  if ((!type || type === "application/octet-stream") && fallback) return fallback
-
-  if (textMime(type)) return "text/plain"
-  const bytes = new Uint8Array(await file.slice(0, SAMPLE).arrayBuffer())
-  if (!textBytes(bytes)) return
-  return "text/plain"
-}

packages/app/src/components/prompt-input/paste.ts

@@ -1,24 +0,0 @@
-const LARGE_PASTE_CHARS = 8000
-const LARGE_PASTE_BREAKS = 120
-
-function largePaste(text: string) {
-  if (text.length >= LARGE_PASTE_CHARS) return true
-  let breaks = 0
-  for (const char of text) {
-    if (char !== "\n") continue
-    breaks += 1
-    if (breaks >= LARGE_PASTE_BREAKS) return true
-  }
-  return false
-}
-
-export function normalizePaste(text: string) {
-  if (!text.includes("\r")) return text
-  return text.replace(/\r\n?/g, "\n")
-}
-
-export function pasteMode(text: string) {
-  if (largePaste(text)) return "manual"
-  if (text.includes("\n") || text.includes("\r")) return "manual"
-  return "native"
-}

packages/app/src/components/prompt-input/submit.test.ts

@@ -7,17 +7,12 @@ const createdClients: string[] = []
 const createdSessions: string[] = []
 const enabledAutoAccept: Array<{ sessionID: string; directory: string }> = []
 const optimistic: Array<{
-  directory?: string
-  sessionID?: string
   message: {
     agent: string
     model: { providerID: string; modelID: string }
     variant?: string
   }
 }> = []
-const optimisticSeeded: boolean[] = []
-const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
-const promoted: Array<{ directory: string; sessionID: string }> = []
 const sentShell: string[] = []
 const syncedDirectories: string[] = []
 
@@ -33,12 +28,7 @@ const clientFor = (directory: string) => {
     session: {
       create: async () => {
         createdSessions.push(directory)
-        return {
+        return { data: { id: `session-${createdSessions.length}` } }
-          data: {
-            id: `session-${createdSessions.length}`,
-            title: `New session ${createdSessions.length}`,
-          },
-        }
       },
       shell: async () => {
         sentShell.push(directory)
@@ -87,11 +77,6 @@ beforeAll(async () => {
       agent: {
         current: () => ({ name: "agent" }),
       },
-      session: {
-        promote(directory: string, sessionID: string) {
-          promoted.push({ directory, sessionID })
-        },
-      },
     }),
   }))
 
@@ -144,16 +129,9 @@ beforeAll(async () => {
       session: {
         optimistic: {
           add: (value: {
-            directory?: string
-            sessionID?: string
             message: { agent: string; model: { providerID: string; modelID: string }; variant?: string }
           }) => {
             optimistic.push(value)
-            optimisticSeeded.push(
-              !!value.directory &&
-                !!value.sessionID &&
-                !!storedSessions[value.directory]?.find((item) => item.id === value.sessionID)?.title,
-            )
           },
           remove: () => undefined,
         },
@@ -166,21 +144,7 @@ beforeAll(async () => {
     useGlobalSync: () => ({
       child: (directory: string) => {
         syncedDirectories.push(directory)
-        storedSessions[directory] ??= []
+        return [{}, () => undefined]
-        return [
-          { session: storedSessions[directory] },
-          (...args: unknown[]) => {
-            if (args[0] !== "session") return
-            const next = args[1]
-            if (typeof next === "function") {
-              storedSessions[directory] = next(storedSessions[directory]) as Array<{ id: string; title?: string }>
-              return
-            }
-            if (Array.isArray(next)) {
-              storedSessions[directory] = next as Array<{ id: string; title?: string }>
-            }
-          },
-        ]
       },
     }),
   }))
@@ -206,14 +170,11 @@ beforeEach(() => {
   createdSessions.length = 0
   enabledAutoAccept.length = 0
   optimistic.length = 0
-  optimisticSeeded.length = 0
-  promoted.length = 0
   params = {}
   sentShell.length = 0
   syncedDirectories.length = 0
   selected = "/repo/worktree-a"
   variant = undefined
-  for (const key of Object.keys(storedSessions)) delete storedSessions[key]
 })
 
 describe("prompt submit worktree selection", () => {
@@ -246,12 +207,7 @@ describe("prompt submit worktree selection", () => {
     expect(createdClients).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(sentShell).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
-    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
+    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
-    expect(promoted).toEqual([
-      { directory: "/repo/worktree-a", sessionID: "session-1" },
-      { directory: "/repo/worktree-b", sessionID: "session-2" },
-    ])
-    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
   })
 
   test("applies auto-accept to newly created sessions", async () => {
@@ -315,32 +271,4 @@ describe("prompt submit worktree selection", () => {
       },
     })
   })
-
-  test("seeds new sessions before optimistic prompts are added", async () => {
-    const submit = createPromptSubmit({
-      info: () => undefined,
-      imageAttachments: () => [],
-      commentCount: () => 0,
-      autoAccept: () => false,
-      mode: () => "normal",
-      working: () => false,
-      editor: () => undefined,
-      queueScroll: () => undefined,
-      promptLength: (value) => value.reduce((sum, part) => sum + ("content" in part ? part.content.length : 0), 0),
-      addToHistory: () => undefined,
-      resetHistoryNavigation: () => undefined,
-      setMode: () => undefined,
-      setPopover: () => undefined,
-      newSessionWorktree: () => selected,
-      onNewSessionWorktreeReset: () => undefined,
-      onSubmit: () => undefined,
-    })
-
-    const event = { preventDefault: () => undefined } as unknown as Event
-
-    await submit.handleSubmit(event)
-
-    expect(storedSessions["/repo/worktree-a"]).toEqual([{ id: "session-1", title: "New session 1" }])
-    expect(optimisticSeeded).toEqual([true])
-  })
 })

packages/app/src/components/prompt-input/submit.ts

@@ -1,7 +1,6 @@
-import type { Message, Session } from "@opencode-ai/sdk/v2/client"
+import type { Message } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@opencode-ai/ui/toast"
 import { base64Encode } from "@opencode-ai/util/encode"
-import { Binary } from "@opencode-ai/util/binary"
 import { useNavigate, useParams } from "@solidjs/router"
 import type { Accessor } from "solid-js"
 import type { FileSelection } from "@/context/file"
@@ -10,7 +9,7 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
 import { usePermission } from "@/context/permission"
-import { type ContextItem, type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
+import { type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { Identifier } from "@/utils/id"
@@ -26,145 +25,6 @@ type PendingPrompt = {
 
 const pending = new Map<string, PendingPrompt>()
 
-export type FollowupDraft = {
-  sessionID: string
-  sessionDirectory: string
-  prompt: Prompt
-  context: (ContextItem & { key: string })[]
-  agent: string
-  model: { providerID: string; modelID: string }
-  variant?: string
-}
-
-type FollowupSendInput = {
-  client: ReturnType<typeof useSDK>["client"]
-  globalSync: ReturnType<typeof useGlobalSync>
-  sync: ReturnType<typeof useSync>
-  draft: FollowupDraft
-  messageID?: string
-  optimisticBusy?: boolean
-  before?: () => Promise<boolean> | boolean
-}
-
-const draftText = (prompt: Prompt) => prompt.map((part) => ("content" in part ? part.content : "")).join("")
-
-const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttachmentPart => part.type === "image")
-
-export async function sendFollowupDraft(input: FollowupSendInput) {
-  const text = draftText(input.draft.prompt)
-  const images = draftImages(input.draft.prompt)
-  const [, setStore] = input.globalSync.child(input.draft.sessionDirectory)
-
-  const setBusy = () => {
-    if (!input.optimisticBusy) return
-    setStore("session_status", input.draft.sessionID, { type: "busy" })
-  }
-
-  const setIdle = () => {
-    if (!input.optimisticBusy) return
-    setStore("session_status", input.draft.sessionID, { type: "idle" })
-  }
-
-  const wait = async () => {
-    const ok = await input.before?.()
-    if (ok === false) return false
-    return true
-  }
-
-  const [head, ...tail] = text.split(" ")
-  const cmd = head?.startsWith("/") ? head.slice(1) : undefined
-  if (cmd && input.sync.data.command.find((item) => item.name === cmd)) {
-    setBusy()
-    try {
-      if (!(await wait())) {
-        setIdle()
-        return false
-      }
-
-      await input.client.session.command({
-        sessionID: input.draft.sessionID,
-        command: cmd,
-        arguments: tail.join(" "),
-        agent: input.draft.agent,
-        model: `${input.draft.model.providerID}/${input.draft.model.modelID}`,
-        variant: input.draft.variant,
-        parts: images.map((attachment) => ({
-          id: Identifier.ascending("part"),
-          type: "file" as const,
-          mime: attachment.mime,
-          url: attachment.dataUrl,
-          filename: attachment.filename,
-        })),
-      })
-      return true
-    } catch (err) {
-      setIdle()
-      throw err
-    }
-  }
-
-  const messageID = input.messageID ?? Identifier.ascending("message")
-  const { requestParts, optimisticParts } = buildRequestParts({
-    prompt: input.draft.prompt,
-    context: input.draft.context,
-    images,
-    text,
-    sessionID: input.draft.sessionID,
-    messageID,
-    sessionDirectory: input.draft.sessionDirectory,
-  })
-
-  const message: Message = {
-    id: messageID,
-    sessionID: input.draft.sessionID,
-    role: "user",
-    time: { created: Date.now() },
-    agent: input.draft.agent,
-    model: input.draft.model,
-    variant: input.draft.variant,
-  }
-
-  const add = () =>
-    input.sync.session.optimistic.add({
-      directory: input.draft.sessionDirectory,
-      sessionID: input.draft.sessionID,
-      message,
-      parts: optimisticParts,
-    })
-
-  const remove = () =>
-    input.sync.session.optimistic.remove({
-      directory: input.draft.sessionDirectory,
-      sessionID: input.draft.sessionID,
-      messageID,
-    })
-
-  setBusy()
-  add()
-
-  try {
-    if (!(await wait())) {
-      setIdle()
-      remove()
-      return false
-    }
-
-    await input.client.session.promptAsync({
-      sessionID: input.draft.sessionID,
-      agent: input.draft.agent,
-      model: input.draft.model,
-      messageID,
-      parts: requestParts,
-      variant: input.draft.variant,
-    })
-    return true
-  } catch (err) {
-    setIdle()
-    remove()
-    throw err
-  }
-}
-
 type PromptSubmitInput = {
   info: Accessor<{ id: string } | undefined>
   imageAttachments: Accessor<ImageAttachmentPart[]>
@@ -181,9 +41,6 @@ type PromptSubmitInput = {
   setPopover: (popover: "at" | "slash" | null) => void
   newSessionWorktree?: Accessor<string | undefined>
   onNewSessionWorktreeReset?: () => void
-  shouldQueue?: Accessor<boolean>
-  onQueue?: (draft: FollowupDraft) => void
-  onAbort?: () => void
   onSubmit?: () => void
 }
 
@@ -225,8 +82,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     const [, setStore] = globalSync.child(sdk.directory)
     setStore("todo", sessionID, [])
 
-    input.onAbort?.()
-
     const queued = pending.get(sessionID)
     if (queued) {
       queued.abort.abort()
@@ -261,26 +116,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     }
   }
 
-  const clearContext = () => {
-    for (const item of prompt.context.items()) {
-      prompt.context.remove(item.key)
-    }
-  }
-
-  const seed = (dir: string, info: Session) => {
-    const [, setStore] = globalSync.child(dir)
-    setStore("session", (list: Session[]) => {
-      const result = Binary.search(list, info.id, (item) => item.id)
-      const next = [...list]
-      if (result.found) {
-        next[result.index] = info
-        return next
-      }
-      next.splice(result.index, 0, info)
-      return next
-    })
-  }
-
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
 
@@ -296,7 +131,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
 
     const currentModel = local.model.current()
     const currentAgent = local.agent.current()
-    const variant = local.model.variant.current()
     if (!currentModel || !currentAgent) {
       showToast({
         title: language.t("prompt.toast.modelAgentRequired.title"),
@@ -357,7 +191,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
 
     let session = input.info()
     if (!session && isNewSession) {
-      const created = await client.session
+      session = await client.session
         .create()
         .then((x) => x.data ?? undefined)
         .catch((err) => {
@@ -367,11 +201,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
           })
           return undefined
         })
-      if (created) {
+      if (session) {
-        seed(sessionDirectory, created)
-        session = created
         if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
-        local.session.promote(sessionDirectory, session.id)
         layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
         navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
       }
@@ -384,21 +215,14 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       return
     }
 
+    input.onSubmit?.()
+
     const model = {
       modelID: currentModel.id,
       providerID: currentModel.provider.id,
     }
     const agent = currentAgent.name
-    const context = prompt.context.items().slice()
+    const variant = local.model.variant.current()
-    const draft: FollowupDraft = {
-      sessionID: session.id,
-      sessionDirectory,
-      prompt: currentPrompt,
-      context,
-      agent,
-      model,
-      variant,
-    }
 
     const clearInput = () => {
       prompt.reset()
@@ -419,15 +243,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       })
     }
 
-    if (!isNewSession && mode === "normal" && input.shouldQueue?.()) {
-      input.onQueue?.(draft)
-      clearContext()
-      clearInput()
-      return
-    }
-
-    input.onSubmit?.()
-
     if (mode === "shell") {
       clearInput()
       client.session
@@ -480,19 +295,48 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       }
     }
 
+    const context = prompt.context.items().slice()
     const commentItems = context.filter((item) => item.type === "file" && !!item.comment?.trim())
-    const messageID = Identifier.ascending("message")
 
-    const removeOptimisticMessage = () => {
+    const messageID = Identifier.ascending("message")
+    const { requestParts, optimisticParts } = buildRequestParts({
+      prompt: currentPrompt,
+      context,
+      images,
+      text,
+      sessionID: session.id,
+      messageID,
+      sessionDirectory,
+    })
+
+    const optimisticMessage: Message = {
+      id: messageID,
+      sessionID: session.id,
+      role: "user",
+      time: { created: Date.now() },
+      agent,
+      model,
+      variant,
+    }
+
+    const addOptimisticMessage = () =>
+      sync.session.optimistic.add({
+        directory: sessionDirectory,
+        sessionID: session.id,
+        message: optimisticMessage,
+        parts: optimisticParts,
+      })
+
+    const removeOptimisticMessage = () =>
       sync.session.optimistic.remove({
         directory: sessionDirectory,
         sessionID: session.id,
         messageID,
       })
-    }
 
     removeCommentItems(commentItems)
     clearInput()
+    addOptimisticMessage()
 
     const waitForWorktree = async () => {
       const worktree = WorktreeState.get(sessionDirectory)
@@ -549,15 +393,20 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       return true
     }
 
-    void sendFollowupDraft({
+    const send = async () => {
-      client,
+      const ok = await waitForWorktree()
-      sync,
+      if (!ok) return
-      globalSync,
+      await client.session.promptAsync({
-      draft,
+        sessionID: session.id,
-      messageID,
+        agent,
-      optimisticBusy: sessionDirectory === projectDirectory,
+        model,
-      before: waitForWorktree,
+        messageID,
-    }).catch((err) => {
+        parts: requestParts,
+        variant,
+      })
+    }
+
+    void send().catch((err) => {
       pending.delete(session.id)
       if (sessionDirectory === projectDirectory) {
         sync.set("session_status", session.id, { type: "idle" })

packages/app/src/components/server/server-row.tsx

@@ -10,7 +10,6 @@ import {
   type ParentProps,
   Show,
 } from "solid-js"
-import { useLanguage } from "@/context/language"
 import { type ServerConnection, serverName } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
 
@@ -26,7 +25,6 @@ interface ServerRowProps extends ParentProps {
 }
 
 export function ServerRow(props: ServerRowProps) {
-  const language = useLanguage()
   const [truncated, setTruncated] = createSignal(false)
   let nameRef: HTMLSpanElement | undefined
   let versionRef: HTMLSpanElement | undefined
@@ -67,26 +65,22 @@ export function ServerRow(props: ServerRowProps) {
 
   return (
     <Tooltip
-      class="flex-1 min-w-0"
+      class="flex-1"
       value={tooltipValue()}
-      contentStyle={{ "max-width": "none", "white-space": "nowrap" }}
       placement="top-start"
       inactive={!truncated() && !props.conn.displayName}
     >
       <div class={props.class} classList={{ "opacity-50": props.dimmed }}>
-        <div class="flex flex-col items-start min-w-0 w-full">
+        <div class="flex flex-col items-start">
-          <div class="flex flex-row items-center gap-2 min-w-0 w-full">
+          <div class="flex flex-row items-center gap-2">
-            <span ref={nameRef} class={`${props.nameClass ?? "truncate"} min-w-0`}>
+            <span ref={nameRef} class={props.nameClass ?? "truncate"}>
               {name()}
             </span>
             <Show
               when={badge()}
               fallback={
                 <Show when={props.status?.version}>
-                  <span
+                  <span ref={versionRef} class={props.versionClass ?? "text-text-weak text-14-regular truncate"}>
-                    ref={versionRef}
-                    class={`${props.versionClass ?? "text-text-weak text-14-regular truncate"} min-w-0`}
-                  >
                     v{props.status?.version}
                   </span>
                 </Show>
@@ -102,7 +96,7 @@ export function ServerRow(props: ServerRowProps) {
                   {conn().http.username ? (
                     <span class="text-text-weak">{conn().http.username}</span>
                   ) : (
-                    <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
+                    <span class="text-text-weaker">no username</span>
                   )}
                 </span>
                 {conn().http.password && <span class="text-text-weak">••••••••</span>}

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

@@ -2,14 +2,12 @@ import { Match, Show, Switch, createMemo } from "solid-js"
 import { Tooltip, type TooltipProps } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { Button } from "@opencode-ai/ui/button"
+import { useParams } from "@solidjs/router"
 
-import { useFile } from "@/context/file"
 import { useLayout } from "@/context/layout"
 import { useSync } from "@/context/sync"
 import { useLanguage } from "@/context/language"
 import { getSessionContextMetrics } from "@/components/session/session-context-metrics"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
@@ -29,17 +27,14 @@ function openSessionContext(args: {
 
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
-  const file = useFile()
+  const params = useParams()
   const layout = useLayout()
   const language = useLanguage()
-  const { params, tabs, view } = useSessionLayout()
 
   const variant = createMemo(() => props.variant ?? "button")
-  const tabState = createSessionTabs({
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-    tabs,
+  const tabs = createMemo(() => layout.tabs(sessionKey))
-    pathFromTab: file.pathFromTab,
+  const view = createMemo(() => layout.view(sessionKey))
-    normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
-  })
   const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
 
   const usd = createMemo(
@@ -59,7 +54,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const openContext = () => {
     if (!params.id) return
 
-    if (tabState.activeTab() === "context") {
+    if (tabs().active() === "context") {
       tabs().close("context")
       return
     }

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

@@ -1,6 +1,8 @@
 import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
 import type { JSX } from "solid-js"
+import { useParams } from "@solidjs/router"
 import { useSync } from "@/context/sync"
+import { useLayout } from "@/context/layout"
 import { checksum } from "@opencode-ai/util/encode"
 import { findLast } from "@opencode-ai/util/array"
 import { same } from "@/utils/same"
@@ -12,7 +14,6 @@ import { Markdown } from "@opencode-ai/ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
-import { useSessionLayout } from "@/pages/session/session-layout"
 import { getSessionContextMetrics } from "./session-context-metrics"
 import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
 import { createSessionContextFormatter } from "./session-context-format"
@@ -90,10 +91,13 @@ const emptyMessages: Message[] = []
 const emptyUserMessages: UserMessage[] = []
 
 export function SessionContextTab() {
+  const params = useParams()
   const sync = useSync()
+  const layout = useLayout()
   const language = useLanguage()
-  const { params, view } = useSessionLayout()
 
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const view = createMemo(() => layout.view(sessionKey))
   const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
 
   const messages = createMemo(

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

@@ -4,23 +4,23 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
+import { Popover } from "@opencode-ai/ui/popover"
 import { Spinner } from "@opencode-ai/ui/spinner"
+import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/util/path"
+import { useParams } from "@solidjs/router"
 import { createEffect, createMemo, For, onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
 import { useCommand } from "@/context/command"
+import { useGlobalSDK } from "@/context/global-sdk"
 import { useLanguage } from "@/context/language"
 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 { useSessionLayout } from "@/pages/session/session-layout"
-import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
 import { StatusPopover } from "../status-popover"
@@ -48,68 +48,74 @@ type OS = "macos" | "windows" | "linux" | "unknown"
 const MAC_APPS = [
   {
     id: "vscode",
-    label: "session.header.open.app.vscode",
+    label: "VS Code",
     icon: "vscode",
     openWith: "Visual Studio Code",
   },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "Cursor" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "Cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "Zed" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "Zed" },
-  { id: "textmate", label: "session.header.open.app.textmate", icon: "textmate", openWith: "TextMate" },
+  { id: "textmate", label: "TextMate", icon: "textmate", openWith: "TextMate" },
   {
     id: "antigravity",
-    label: "session.header.open.app.antigravity",
+    label: "Antigravity",
     icon: "antigravity",
     openWith: "Antigravity",
   },
-  { id: "terminal", label: "session.header.open.app.terminal", icon: "terminal", openWith: "Terminal" },
+  { id: "terminal", label: "Terminal", icon: "terminal", openWith: "Terminal" },
-  { id: "iterm2", label: "session.header.open.app.iterm2", icon: "iterm2", openWith: "iTerm" },
+  { id: "iterm2", label: "iTerm2", icon: "iterm2", openWith: "iTerm" },
-  { id: "ghostty", label: "session.header.open.app.ghostty", icon: "ghostty", openWith: "Ghostty" },
+  { id: "ghostty", label: "Ghostty", icon: "ghostty", openWith: "Ghostty" },
-  { id: "warp", label: "session.header.open.app.warp", icon: "warp", openWith: "Warp" },
+  { id: "warp", label: "Warp", icon: "warp", openWith: "Warp" },
-  { id: "xcode", label: "session.header.open.app.xcode", icon: "xcode", openWith: "Xcode" },
+  { id: "xcode", label: "Xcode", icon: "xcode", openWith: "Xcode" },
   {
     id: "android-studio",
-    label: "session.header.open.app.androidStudio",
+    label: "Android Studio",
     icon: "android-studio",
     openWith: "Android Studio",
   },
   {
     id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
+    label: "Sublime Text",
     icon: "sublime-text",
     openWith: "Sublime Text",
   },
 ] as const
 
 const WINDOWS_APPS = [
-  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
   {
     id: "powershell",
-    label: "session.header.open.app.powershell",
+    label: "PowerShell",
     icon: "powershell",
     openWith: "powershell",
   },
   {
     id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
+    label: "Sublime Text",
     icon: "sublime-text",
     openWith: "Sublime Text",
   },
 ] as const
 
 const LINUX_APPS = [
-  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
   {
     id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
+    label: "Sublime Text",
     icon: "sublime-text",
     openWith: "Sublime Text",
   },
 ] as const
 
+type OpenOption = (typeof MAC_APPS)[number] | (typeof WINDOWS_APPS)[number] | (typeof LINUX_APPS)[number]
+type OpenIcon = OpenApp | "file-explorer"
+const OPEN_ICON_BASE = new Set<OpenIcon>(["finder", "vscode", "cursor", "zed"])
+
+const openIconSize = (id: OpenIcon) => (OPEN_ICON_BASE.has(id) ? "size-4" : "size-[19px]")
+
 const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
   if (platform.platform === "desktop" && platform.os) return platform.os
   if (typeof navigator !== "object") return "unknown"
@@ -128,15 +134,101 @@ const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown
   })
 }
 
+function useSessionShare(args: {
+  globalSDK: ReturnType<typeof useGlobalSDK>
+  currentSession: () =>
+    | {
+        share?: {
+          url?: string
+        }
+      }
+    | undefined
+  sessionID: () => string | undefined
+  projectDirectory: () => string
+  platform: ReturnType<typeof usePlatform>
+}) {
+  const [state, setState] = createStore({
+    share: false,
+    unshare: false,
+    copied: false,
+    timer: undefined as number | undefined,
+  })
+  const shareUrl = createMemo(() => args.currentSession()?.share?.url)
+
+  createEffect(() => {
+    const url = shareUrl()
+    if (url) return
+    if (state.timer) window.clearTimeout(state.timer)
+    setState({ copied: false, timer: undefined })
+  })
+
+  onCleanup(() => {
+    if (state.timer) window.clearTimeout(state.timer)
+  })
+
+  const shareSession = () => {
+    const sessionID = args.sessionID()
+    if (!sessionID || state.share) return
+    setState("share", true)
+    args.globalSDK.client.session
+      .share({ sessionID, directory: args.projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to share session", error)
+      })
+      .finally(() => {
+        setState("share", false)
+      })
+  }
+
+  const unshareSession = () => {
+    const sessionID = args.sessionID()
+    if (!sessionID || state.unshare) return
+    setState("unshare", true)
+    args.globalSDK.client.session
+      .unshare({ sessionID, directory: args.projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to unshare session", error)
+      })
+      .finally(() => {
+        setState("unshare", false)
+      })
+  }
+
+  const copyLink = (onError: (error: unknown) => void) => {
+    const url = shareUrl()
+    if (!url) return
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        if (state.timer) window.clearTimeout(state.timer)
+        setState("copied", true)
+        const timer = window.setTimeout(() => {
+          setState("copied", false)
+          setState("timer", undefined)
+        }, 3000)
+        setState("timer", timer)
+      })
+      .catch(onError)
+  }
+
+  const viewShare = () => {
+    const url = shareUrl()
+    if (!url) return
+    args.platform.openLink(url)
+  }
+
+  return { state, shareUrl, shareSession, unshareSession, copyLink, viewShare }
+}
+
 export function SessionHeader() {
+  const globalSDK = useGlobalSDK()
   const layout = useLayout()
+  const params = useParams()
   const command = useCommand()
   const server = useServer()
+  const sync = useSync()
   const platform = usePlatform()
   const language = useLanguage()
-  const sync = useSync()
-  const terminal = useTerminal()
-  const { params, view } = useSessionLayout()
 
   const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
   const project = createMemo(() => {
@@ -150,6 +242,12 @@ export function SessionHeader() {
     return getFilename(projectDirectory())
   })
   const hotkey = createMemo(() => command.keybind("file.open"))
+
+  const currentSession = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+  const showShare = createMemo(() => shareEnabled() && !!params.id)
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const view = createMemo(() => layout.view(sessionKey))
   const os = createMemo(() => detectOS(platform))
 
   const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
@@ -163,9 +261,9 @@ export function SessionHeader() {
   })
 
   const fileManager = createMemo(() => {
-    if (os() === "macos") return { label: "session.header.open.finder", icon: "finder" as const }
+    if (os() === "macos") return { label: "Finder", icon: "finder" as const }
-    if (os() === "windows") return { label: "session.header.open.fileExplorer", icon: "file-explorer" as const }
+    if (os() === "windows") return { label: "File Explorer", icon: "file-explorer" as const }
-    return { label: "session.header.open.fileManager", icon: "finder" as const }
+    return { label: "File Manager", icon: "finder" as const }
   })
 
   createEffect(() => {
@@ -181,7 +279,10 @@ export function SessionHeader() {
         Promise.resolve(platform.checkAppExists?.(app.openWith))
           .then((value) => Boolean(value))
           .catch(() => false)
-          .then((ok) => [app.id, ok] as const),
+          .then((ok) => {
+            console.debug(`[session-header] App "${app.label}" (${app.openWith}): ${ok ? "exists" : "does not exist"}`)
+            return [app.id, ok] as const
+          }),
       ),
     ).then((entries) => {
       setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
@@ -190,23 +291,11 @@ export function SessionHeader() {
 
   const options = createMemo(() => {
     return [
-      { id: "finder", label: language.t(fileManager().label), icon: fileManager().icon },
+      { id: "finder", label: fileManager().label, icon: fileManager().icon },
-      ...apps()
+      ...apps().filter((app) => exists[app.id]),
-        .filter((app) => exists[app.id])
-        .map((app) => ({ ...app, label: language.t(app.label) })),
     ] 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({
@@ -221,9 +310,6 @@ export function SessionHeader() {
       ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
   )
   const opening = createMemo(() => openRequest.app !== undefined)
-  const tint = createMemo(() =>
-    messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
-  )
 
   const selectApp = (app: OpenApp) => {
     if (!options().some((item) => item.id === app)) return
@@ -262,6 +348,14 @@ export function SessionHeader() {
       .catch((err: unknown) => showRequestError(language, err))
   }
 
+  const share = useSessionShare({
+    globalSDK,
+    currentSession,
+    sessionID: () => params.id,
+    projectDirectory,
+    platform,
+  })
+
   const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
@@ -274,11 +368,12 @@ export function SessionHeader() {
               type="button"
               variant="ghost"
               size="small"
-              class="hidden md:flex w-[240px] max-w-full min-w-0 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel shadow-none cursor-default"
+              class="hidden md:flex w-[240px] max-w-full min-w-0 pl-0.5 pr-2 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel shadow-none cursor-default"
               onClick={() => command.trigger("file.open")}
               aria-label={language.t("session.header.searchFiles")}
             >
-              <div class="flex min-w-0 flex-1 items-center overflow-visible">
+              <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-visible">
+                <Icon name="magnifying-glass" size="small" class="icon-base shrink-0 size-4" />
                 <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate text-left">
                   {language.t("session.header.search.placeholder", {
                     project: name(),
@@ -288,9 +383,7 @@ export function SessionHeader() {
 
               <Show when={hotkey()}>
                 {(keybind) => (
-                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0 text-text-weaker">
+                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0">{keybind()}</Keybind>
-                    {keybind()}
-                  </Keybind>
                 )}
               </Show>
             </Button>
@@ -301,6 +394,7 @@ export function SessionHeader() {
         {(mount) => (
           <Portal mount={mount()}>
             <div class="flex items-center gap-2">
+              <StatusPopover />
               <Show when={projectDirectory()}>
                 <div class="hidden xl:flex items-center">
                   <Show
@@ -325,7 +419,7 @@ export function SessionHeader() {
                       <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
                         <Button
                           variant="ghost"
-                          class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
+                          class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none disabled:!cursor-default"
                           classList={{
                             "bg-surface-raised-base-active": opening(),
                           }}
@@ -333,12 +427,17 @@ export function SessionHeader() {
                           disabled={opening()}
                           aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
                         >
-                          <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                          <div class="flex size-5 shrink-0 items-center justify-center">
-                            <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                            <Show
-                              <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                              when={opening()}
+                              fallback={<AppIcon id={current().icon} class={openIconSize(current().icon)} />}
+                            >
+                              <Spinner class="size-3.5 text-icon-base" />
                             </Show>
                           </div>
+                          <span class="text-12-regular text-text-strong">{language.t("common.open")}</span>
                         </Button>
+                        <div class="self-stretch w-px bg-border-weak-base" />
                         <DropdownMenu
                           gutter={4}
                           placement="bottom-end"
@@ -350,20 +449,17 @@ export function SessionHeader() {
                             icon="chevron-down"
                             variant="ghost"
                             disabled={opening()}
-                            class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
+                            class="rounded-none h-full w-[24px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
                             classList={{
                               "bg-surface-raised-base-active": opening(),
                             }}
                             aria-label={language.t("session.header.open.menu")}
                           />
                           <DropdownMenu.Portal>
-                            <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
+                            <DropdownMenu.Content>
                               <DropdownMenu.Group>
-                                <DropdownMenu.GroupLabel class="!px-1 !py-1">
+                                <DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
-                                  {language.t("session.header.openIn")}
-                                </DropdownMenu.GroupLabel>
                                 <DropdownMenu.RadioGroup
-                                  class="mt-1"
                                   value={current().id}
                                   onChange={(value) => {
                                     if (!OPEN_APPS.includes(value as OpenApp)) return
@@ -380,8 +476,8 @@ export function SessionHeader() {
                                           openDir(o.id)
                                         }}
                                       >
-                                        <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                        <div class="flex size-5 shrink-0 items-center justify-center">
-                                          <AppIcon id={o.icon} />
+                                          <AppIcon id={o.icon} class={openIconSize(o.icon)} />
                                         </div>
                                         <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
                                         <DropdownMenu.ItemIndicator>
@@ -414,27 +510,146 @@ export function SessionHeader() {
                   </Show>
                 </div>
               </Show>
-              <div class="flex items-center gap-1">
+              <Show when={showShare()}>
-                <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                <div class="flex items-center">
-                  <StatusPopover />
+                  <Popover
-                </Tooltip>
+                    title={language.t("session.share.popover.title")}
-                <TooltipKeybind
+                    description={
-                  title={language.t("command.terminal.toggle")}
+                      share.shareUrl()
-                  keybind={command.keybind("terminal.toggle")}
+                        ? language.t("session.share.popover.description.shared")
-                >
+                        : language.t("session.share.popover.description.unshared")
-                  <Button
+                    }
-                    variant="ghost"
+                    gutter={4}
-                    class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                    placement="bottom-end"
-                    onClick={toggleTerminal}
+                    shift={-64}
-                    aria-label={language.t("command.terminal.toggle")}
+                    class="rounded-xl [&_[data-slot=popover-close-button]]:hidden"
-                    aria-expanded={view().terminal.opened()}
+                    triggerAs={Button}
-                    aria-controls="terminal-panel"
+                    triggerProps={{
+                      variant: "ghost",
+                      class:
+                        "rounded-md h-[24px] px-3 border border-border-weak-base bg-surface-panel shadow-none data-[expanded]:bg-surface-base-active",
+                      classList: {
+                        "rounded-r-none": share.shareUrl() !== undefined,
+                        "border-r-0": share.shareUrl() !== undefined,
+                      },
+                      style: { scale: 1 },
+                    }}
+                    trigger={<span class="text-12-regular">{language.t("session.share.action.share")}</span>}
                   >
-                    <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                    <div class="flex flex-col gap-2">
-                  </Button>
+                      <Show
-                </TooltipKeybind>
+                        when={share.shareUrl()}
-
+                        fallback={
+                          <div class="flex">
+                            <Button
+                              size="large"
+                              variant="primary"
+                              class="w-1/2"
+                              onClick={share.shareSession}
+                              disabled={share.state.share}
+                            >
+                              {share.state.share
+                                ? language.t("session.share.action.publishing")
+                                : language.t("session.share.action.publish")}
+                            </Button>
+                          </div>
+                        }
+                      >
+                        <div class="flex flex-col gap-2">
+                          <TextField
+                            value={share.shareUrl() ?? ""}
+                            readOnly
+                            copyable
+                            copyKind="link"
+                            tabIndex={-1}
+                            class="w-full"
+                          />
+                          <div class="grid grid-cols-2 gap-2">
+                            <Button
+                              size="large"
+                              variant="secondary"
+                              class="w-full shadow-none border border-border-weak-base"
+                              onClick={share.unshareSession}
+                              disabled={share.state.unshare}
+                            >
+                              {share.state.unshare
+                                ? language.t("session.share.action.unpublishing")
+                                : language.t("session.share.action.unpublish")}
+                            </Button>
+                            <Button
+                              size="large"
+                              variant="primary"
+                              class="w-full"
+                              onClick={share.viewShare}
+                              disabled={share.state.unshare}
+                            >
+                              {language.t("session.share.action.view")}
+                            </Button>
+                          </div>
+                        </div>
+                      </Show>
+                    </div>
+                  </Popover>
+                  <Show when={share.shareUrl()} fallback={<div aria-hidden="true" />}>
+                    <Tooltip
+                      value={
+                        share.state.copied
+                          ? language.t("session.share.copy.copied")
+                          : language.t("session.share.copy.copyLink")
+                      }
+                      placement="top"
+                      gutter={8}
+                    >
+                      <IconButton
+                        icon={share.state.copied ? "check" : "link"}
+                        variant="ghost"
+                        class="rounded-l-none h-[24px] border border-border-weak-base bg-surface-panel shadow-none"
+                        onClick={() => share.copyLink((error) => showRequestError(language, error))}
+                        disabled={share.state.unshare}
+                        aria-label={
+                          share.state.copied
+                            ? language.t("session.share.copy.copied")
+                            : language.t("session.share.copy.copyLink")
+                        }
+                      />
+                    </Tooltip>
+                  </Show>
+                </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")}
+                  >
+                    <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>
+
                   <TooltipKeybind
                     title={language.t("command.review.toggle")}
                     keybind={command.keybind("review.toggle")}
@@ -447,7 +662,23 @@ export function SessionHeader() {
                       aria-expanded={view().reviewPanel.opened()}
                       aria-controls="review-panel"
                     >
-                      <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
+                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        <Icon
+                          size="small"
+                          name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-right"}
+                          class="group-hover/review-toggle:hidden"
+                        />
+                        <Icon
+                          size="small"
+                          name="layout-right-partial"
+                          class="hidden group-hover/review-toggle:inline-block"
+                        />
+                        <Icon
+                          size="small"
+                          name={view().reviewPanel.opened() ? "layout-right" : "layout-right-partial"}
+                          class="hidden group-active/review-toggle:inline-block"
+                        />
+                      </div>
                     </Button>
                   </TooltipKeybind>
 

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

@@ -13,6 +13,7 @@ const ROOT_CLASS = "size-full flex flex-col"
 
 interface NewSessionViewProps {
   worktree: string
+  onWorktreeChange: (value: string) => void
 }
 
 export function NewSessionView(props: NewSessionViewProps) {

packages/app/src/components/session/session-sortable-terminal-tab.tsx

@@ -6,10 +6,8 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
 import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { useLanguage } from "@/context/language"
-import { focusTerminalById } from "@/pages/session/helpers"
 
 export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () => void }): JSX.Element {
   const terminal = useTerminal()
@@ -28,7 +26,11 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
   const isDefaultTitle = () => {
     const number = props.terminal.titleNumber
     if (!Number.isFinite(number) || number <= 0) return false
-    return isDefaultTerminalTitle(props.terminal.title, number)
+    const match = props.terminal.title.match(/^Terminal (\d+)$/)
+    if (!match) return false
+    const parsed = Number(match[1])
+    if (!Number.isFinite(parsed) || parsed <= 0) return false
+    return parsed === number
   }
 
   const label = () => {
@@ -51,8 +53,21 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
 
   const focus = () => {
     if (store.editing) return
-    if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+
-    focusTerminalById(props.terminal.id)
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+    const wrapper = document.getElementById(`terminal-wrapper-${props.terminal.id}`)
+    const element = wrapper?.querySelector('[data-component="terminal"]') as HTMLElement
+    if (!element) return
+
+    const textarea = element.querySelector("textarea") as HTMLTextAreaElement
+    if (textarea) {
+      textarea.focus()
+      return
+    }
+    element.focus()
+    element.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true }))
   }
 
   const edit = (e?: Event) => {

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

@@ -0,0 +1,16 @@
+import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+export const SettingsAgents: Component = () => {
+  // TODO: Replace this placeholder with full agents settings controls.
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.agents.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.agents.description")}</p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+export const SettingsCommands: Component = () => {
+  // TODO: Replace this placeholder with full commands settings controls.
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.commands.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.commands.description")}</p>
+      </div>
+    </div>
+  )
+}

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

@@ -12,7 +12,6 @@ import { usePlatform } from "@/context/platform"
 import { useSettings, monoFontFamily } from "@/context/settings"
 import { playSound, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
-import { SettingsList } from "./settings-list"
 
 let demoSoundState = {
   cleanup: undefined as (() => void) | undefined,
@@ -114,11 +113,6 @@ export const SettingsGeneral: Component = () => {
     { value: "dark", label: language.t("theme.scheme.dark") },
   ])
 
-  const followupOptions = createMemo((): { value: "queue" | "steer"; label: string }[] => [
-    { value: "queue", label: language.t("settings.general.row.followup.option.queue") },
-    { value: "steer", label: language.t("settings.general.row.followup.option.steer") },
-  ])
-
   const languageOptions = createMemo(() =>
     language.locales.map((locale) => ({
       value: locale,
@@ -176,9 +170,11 @@ export const SettingsGeneral: Component = () => {
     triggerVariant: "settings" as const,
   })
 
-  const GeneralSection = () => (
+  const AppearanceSection = () => (
     <div class="flex flex-col gap-1">
-      <SettingsList>
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
+
+      <div class="bg-surface-raised-base px-4 rounded-lg">
         <SettingsRow
           title={language.t("settings.general.row.language.title")}
           description={language.t("settings.general.row.language.description")}
@@ -197,70 +193,8 @@ export const SettingsGeneral: Component = () => {
         </SettingsRow>
 
         <SettingsRow
-          title={language.t("settings.general.row.reasoningSummaries.title")}
+          title={language.t("settings.general.row.appearance.title")}
-          description={language.t("settings.general.row.reasoningSummaries.description")}
+          description={language.t("settings.general.row.appearance.description")}
-        >
-          <div data-action="settings-feed-reasoning-summaries">
-            <Switch
-              checked={settings.general.showReasoningSummaries()}
-              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
-          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-shell-tool-parts-expanded">
-            <Switch
-              checked={settings.general.shellToolPartsExpanded()}
-              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.editToolPartsExpanded.title")}
-          description={language.t("settings.general.row.editToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-edit-tool-parts-expanded">
-            <Switch
-              checked={settings.general.editToolPartsExpanded()}
-              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.followup.title")}
-          description={language.t("settings.general.row.followup.description")}
-        >
-          <Select
-            data-action="settings-followup"
-            options={followupOptions()}
-            current={followupOptions().find((o) => o.value === settings.general.followup())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && settings.general.setFollowup(option.value)}
-            variant="secondary"
-            size="small"
-            triggerVariant="settings"
-            triggerStyle={{ "min-width": "180px" }}
-          />
-        </SettingsRow>
-      </SettingsList>
-    </div>
-  )
-
-  const AppearanceSection = () => (
-    <div class="flex flex-col gap-1">
-      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
-
-      <SettingsList>
-        <SettingsRow
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
         >
           <Select
             data-action="settings-color-scheme"
@@ -277,7 +211,6 @@ export const SettingsGeneral: Component = () => {
             variant="secondary"
             size="small"
             triggerVariant="settings"
-            triggerStyle={{ "min-width": "220px" }}
           />
         </SettingsRow>
 
@@ -334,7 +267,51 @@ export const SettingsGeneral: Component = () => {
             )}
           </Select>
         </SettingsRow>
-      </SettingsList>
+      </div>
+    </div>
+  )
+
+  const FeedSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.feed")}</h3>
+
+      <div class="bg-surface-raised-base px-4 rounded-lg">
+        <SettingsRow
+          title={language.t("settings.general.row.reasoningSummaries.title")}
+          description={language.t("settings.general.row.reasoningSummaries.description")}
+        >
+          <div data-action="settings-feed-reasoning-summaries">
+            <Switch
+              checked={settings.general.showReasoningSummaries()}
+              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
+          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-shell-tool-parts-expanded">
+            <Switch
+              checked={settings.general.shellToolPartsExpanded()}
+              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.editToolPartsExpanded.title")}
+          description={language.t("settings.general.row.editToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-edit-tool-parts-expanded">
+            <Switch
+              checked={settings.general.editToolPartsExpanded()}
+              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </div>
     </div>
   )
 
@@ -342,7 +319,7 @@ export const SettingsGeneral: Component = () => {
     <div class="flex flex-col gap-1">
       <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
 
-      <SettingsList>
+      <div class="bg-surface-raised-base px-4 rounded-lg">
         <SettingsRow
           title={language.t("settings.general.notifications.agent.title")}
           description={language.t("settings.general.notifications.agent.description")}
@@ -378,7 +355,7 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
-      </SettingsList>
+      </div>
     </div>
   )
 
@@ -386,7 +363,7 @@ export const SettingsGeneral: Component = () => {
     <div class="flex flex-col gap-1">
       <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
 
-      <SettingsList>
+      <div class="bg-surface-raised-base px-4 rounded-lg">
         <SettingsRow
           title={language.t("settings.general.sounds.agent.title")}
           description={language.t("settings.general.sounds.agent.description")}
@@ -431,7 +408,7 @@ export const SettingsGeneral: Component = () => {
             )}
           />
         </SettingsRow>
-      </SettingsList>
+      </div>
     </div>
   )
 
@@ -439,7 +416,7 @@ export const SettingsGeneral: Component = () => {
     <div class="flex flex-col gap-1">
       <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
 
-      <SettingsList>
+      <div class="bg-surface-raised-base px-4 rounded-lg">
         <SettingsRow
           title={language.t("settings.updates.row.startup.title")}
           description={language.t("settings.updates.row.startup.description")}
@@ -475,7 +452,7 @@ export const SettingsGeneral: Component = () => {
               : language.t("settings.updates.action.checkNow")}
           </Button>
         </SettingsRow>
-      </SettingsList>
+      </div>
     </div>
   )
 
@@ -488,10 +465,10 @@ export const SettingsGeneral: Component = () => {
       </div>
 
       <div class="flex flex-col gap-8 w-full">
-        <GeneralSection />
-
         <AppearanceSection />
 
+        <FeedSection />
+
         <NotificationsSection />
 
         <SoundsSection />
@@ -505,7 +482,7 @@ export const SettingsGeneral: Component = () => {
               <div class="flex flex-col gap-1">
                 <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.desktop.section.wsl")}</h3>
 
-                <SettingsList>
+                <div class="bg-surface-raised-base px-4 rounded-lg">
                   <SettingsRow
                     title={language.t("settings.desktop.wsl.title")}
                     description={language.t("settings.desktop.wsl.description")}
@@ -518,7 +495,7 @@ export const SettingsGeneral: Component = () => {
                       />
                     </div>
                   </SettingsRow>
-                </SettingsList>
+                </div>
               </div>
             )
           }}
@@ -538,7 +515,7 @@ export const SettingsGeneral: Component = () => {
               <div class="flex flex-col gap-1">
                 <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
 
-                <SettingsList>
+                <div class="bg-surface-raised-base px-4 rounded-lg">
                   <SettingsRow
                     title={
                       <div class="flex items-center gap-2">
@@ -556,7 +533,7 @@ export const SettingsGeneral: Component = () => {
                       <Switch checked={value() === "wayland"} onChange={onChange} />
                     </div>
                   </SettingsRow>
-                </SettingsList>
+                </div>
               </div>
             )
           }}
@@ -574,12 +551,12 @@ interface SettingsRowProps {
 
 const SettingsRow: Component<SettingsRowProps> = (props) => {
   return (
-    <div class="flex flex-wrap items-center gap-4 py-3 border-b border-border-weak-base last:border-none sm:flex-nowrap">
+    <div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
-      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <div class="flex flex-col gap-0.5 min-w-0">
         <span class="text-14-medium text-text-strong">{props.title}</span>
         <span class="text-12-regular text-text-weak">{props.description}</span>
       </div>
-      <div class="flex w-full justify-end sm:w-auto sm:shrink-0">{props.children}</div>
+      <div class="flex-shrink-0">{props.children}</div>
     </div>
   )
 }

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

@@ -9,7 +9,6 @@ import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
-import { SettingsList } from "./settings-list"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
@@ -239,7 +238,7 @@ function useKeyCapture(input: {
         showToast({
           title: input.language.t("settings.shortcuts.conflict.title"),
           description: input.language.t("settings.shortcuts.conflict.description", {
-            keybind: formatKeybind(next, input.language.t),
+            keybind: formatKeybind(next),
             titles: [...conflicts.values()].join(", "),
           }),
         })
@@ -407,7 +406,7 @@ export const SettingsKeybinds: Component = () => {
             <Show when={(filtered().get(group) ?? []).length > 0}>
               <div class="flex flex-col gap-1">
                 <h3 class="text-14-medium text-text-strong pb-2">{language.t(groupKey[group])}</h3>
-                <SettingsList>
+                <div class="bg-surface-raised-base px-4 rounded-lg">
                   <For each={filtered().get(group) ?? []}>
                     {(id) => (
                       <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
@@ -433,7 +432,7 @@ export const SettingsKeybinds: Component = () => {
                       </div>
                     )}
                   </For>
-                </SettingsList>
+                </div>
               </div>
             </Show>
           )}

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

@@ -1,5 +0,0 @@
-import { type Component, type JSX } from "solid-js"
-
-export const SettingsList: Component<{ children: JSX.Element }> = (props) => {
-  return <div class="bg-surface-base px-4 rounded-lg">{props.children}</div>
-}

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

@@ -0,0 +1,16 @@
+import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+export const SettingsMcp: Component = () => {
+  // TODO: Replace this placeholder with full MCP settings controls.
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.mcp.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.mcp.description")}</p>
+      </div>
+    </div>
+  )
+}

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

@@ -8,7 +8,6 @@ import { type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
 import { popularProviders } from "@/hooks/use-providers"
-import { SettingsList } from "./settings-list"
 
 type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
 
@@ -101,7 +100,7 @@ export const SettingsModels: Component = () => {
                     <ProviderIcon id={group.category} class="size-5 shrink-0 icon-strong-base" />
                     <span class="text-14-medium text-text-strong">{group.items[0].provider.name}</span>
                   </div>
-                  <SettingsList>
+                  <div class="bg-surface-raised-base px-4 rounded-lg">
                     <For each={group.items}>
                       {(item) => {
                         const key = { providerID: item.provider.id, modelID: item.id }
@@ -125,7 +124,7 @@ export const SettingsModels: Component = () => {
                         )
                       }}
                     </For>
-                  </SettingsList>
+                  </div>
                 </div>
               )}
             </For>

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

@@ -0,0 +1,230 @@
+import { Select } from "@opencode-ai/ui/select"
+import { showToast } from "@opencode-ai/ui/toast"
+import { Component, For, createMemo, type JSX } from "solid-js"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"
+
+type PermissionAction = "allow" | "ask" | "deny"
+
+type PermissionObject = Record<string, PermissionAction>
+type PermissionValue = PermissionAction | PermissionObject | string[] | undefined
+type PermissionMap = Record<string, PermissionValue>
+
+type PermissionItem = {
+  id: string
+  title: string
+  description: string
+}
+
+const ACTIONS = [
+  { value: "allow", label: "settings.permissions.action.allow" },
+  { value: "ask", label: "settings.permissions.action.ask" },
+  { value: "deny", label: "settings.permissions.action.deny" },
+] as const
+
+const ITEMS = [
+  {
+    id: "read",
+    title: "settings.permissions.tool.read.title",
+    description: "settings.permissions.tool.read.description",
+  },
+  {
+    id: "edit",
+    title: "settings.permissions.tool.edit.title",
+    description: "settings.permissions.tool.edit.description",
+  },
+  {
+    id: "glob",
+    title: "settings.permissions.tool.glob.title",
+    description: "settings.permissions.tool.glob.description",
+  },
+  {
+    id: "grep",
+    title: "settings.permissions.tool.grep.title",
+    description: "settings.permissions.tool.grep.description",
+  },
+  {
+    id: "list",
+    title: "settings.permissions.tool.list.title",
+    description: "settings.permissions.tool.list.description",
+  },
+  {
+    id: "bash",
+    title: "settings.permissions.tool.bash.title",
+    description: "settings.permissions.tool.bash.description",
+  },
+  {
+    id: "task",
+    title: "settings.permissions.tool.task.title",
+    description: "settings.permissions.tool.task.description",
+  },
+  {
+    id: "skill",
+    title: "settings.permissions.tool.skill.title",
+    description: "settings.permissions.tool.skill.description",
+  },
+  {
+    id: "lsp",
+    title: "settings.permissions.tool.lsp.title",
+    description: "settings.permissions.tool.lsp.description",
+  },
+  {
+    id: "todoread",
+    title: "settings.permissions.tool.todoread.title",
+    description: "settings.permissions.tool.todoread.description",
+  },
+  {
+    id: "todowrite",
+    title: "settings.permissions.tool.todowrite.title",
+    description: "settings.permissions.tool.todowrite.description",
+  },
+  {
+    id: "webfetch",
+    title: "settings.permissions.tool.webfetch.title",
+    description: "settings.permissions.tool.webfetch.description",
+  },
+  {
+    id: "websearch",
+    title: "settings.permissions.tool.websearch.title",
+    description: "settings.permissions.tool.websearch.description",
+  },
+  {
+    id: "codesearch",
+    title: "settings.permissions.tool.codesearch.title",
+    description: "settings.permissions.tool.codesearch.description",
+  },
+  {
+    id: "external_directory",
+    title: "settings.permissions.tool.external_directory.title",
+    description: "settings.permissions.tool.external_directory.description",
+  },
+  {
+    id: "doom_loop",
+    title: "settings.permissions.tool.doom_loop.title",
+    description: "settings.permissions.tool.doom_loop.description",
+  },
+] as const
+
+const VALID_ACTIONS = new Set<PermissionAction>(["allow", "ask", "deny"])
+
+function toMap(value: unknown): PermissionMap {
+  if (value && typeof value === "object" && !Array.isArray(value)) return value as PermissionMap
+
+  const action = getAction(value)
+  if (action) return { "*": action }
+
+  return {}
+}
+
+function getAction(value: unknown): PermissionAction | undefined {
+  if (typeof value === "string" && VALID_ACTIONS.has(value as PermissionAction)) return value as PermissionAction
+  return
+}
+
+function getRuleDefault(value: unknown): PermissionAction | undefined {
+  const action = getAction(value)
+  if (action) return action
+
+  if (!value || typeof value !== "object" || Array.isArray(value)) return
+
+  return getAction((value as Record<string, unknown>)["*"])
+}
+
+export const SettingsPermissions: Component = () => {
+  const globalSync = useGlobalSync()
+  const language = useLanguage()
+
+  const actions = createMemo(
+    (): Array<{ value: PermissionAction; label: string }> =>
+      ACTIONS.map((action) => ({
+        value: action.value,
+        label: language.t(action.label),
+      })),
+  )
+
+  const permission = createMemo(() => {
+    return toMap(globalSync.data.config.permission)
+  })
+
+  const actionFor = (id: string): PermissionAction => {
+    const value = permission()[id]
+    const direct = getRuleDefault(value)
+    if (direct) return direct
+
+    const wildcard = getRuleDefault(permission()["*"])
+    if (wildcard) return wildcard
+
+    return "allow"
+  }
+
+  const setPermission = async (id: string, action: PermissionAction) => {
+    const before = globalSync.data.config.permission
+    const map = toMap(before)
+    const existing = map[id]
+
+    const nextValue =
+      existing && typeof existing === "object" && !Array.isArray(existing) ? { ...existing, "*": action } : action
+
+    const rollback = (err: unknown) => {
+      globalSync.set("config", "permission", before)
+      const message = err instanceof Error ? err.message : String(err)
+      showToast({ title: language.t("settings.permissions.toast.updateFailed.title"), description: message })
+    }
+
+    globalSync.set("config", "permission", { ...map, [id]: nextValue })
+    globalSync.updateConfig({ permission: { [id]: nextValue } }).catch(rollback)
+  }
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-1 px-4 py-8 sm:p-8 max-w-[720px]">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.permissions.title")}</h2>
+          <p class="text-14-regular text-text-weak">{language.t("settings.permissions.description")}</p>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-6 px-4 py-6 sm:p-8 sm:pt-6 max-w-[720px]">
+        <div class="flex flex-col gap-2">
+          <h3 class="text-14-medium text-text-strong">{language.t("settings.permissions.section.tools")}</h3>
+          <div class="border border-border-weak-base rounded-lg overflow-hidden">
+            <For each={ITEMS}>
+              {(item) => (
+                <SettingsRow title={language.t(item.title)} description={language.t(item.description)}>
+                  <Select
+                    options={actions()}
+                    current={actions().find((o) => o.value === actionFor(item.id))}
+                    value={(o) => o.value}
+                    label={(o) => o.label}
+                    onSelect={(option) => option && setPermission(item.id, option.value)}
+                    variant="secondary"
+                    size="small"
+                    triggerVariant="settings"
+                  />
+                </SettingsRow>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string
+  description: string
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex flex-wrap items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
+      <div class="flex flex-col gap-0.5 min-w-0">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex-shrink-0">{props.children}</div>
+    </div>
+  )
+}

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

@@ -11,7 +11,6 @@ import { useGlobalSync } from "@/context/global-sync"
 import { DialogConnectProvider } from "./dialog-connect-provider"
 import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogCustomProvider } from "./dialog-custom-provider"
-import { SettingsList } from "./settings-list"
 
 type ProviderSource = "env" | "api" | "config" | "custom"
 type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
@@ -137,7 +136,7 @@ export const SettingsProviders: Component = () => {
       <div class="flex flex-col gap-8 max-w-[720px]">
         <div class="flex flex-col gap-1" data-component="connected-providers-section">
           <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.connected")}</h3>
-          <SettingsList>
+          <div class="bg-surface-raised-base px-4 rounded-lg">
             <Show
               when={connected().length > 0}
               fallback={
@@ -170,12 +169,12 @@ export const SettingsProviders: Component = () => {
                 )}
               </For>
             </Show>
-          </SettingsList>
+          </div>
         </div>
 
         <div class="flex flex-col gap-1">
           <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.popular")}</h3>
-          <SettingsList>
+          <div class="bg-surface-raised-base px-4 rounded-lg">
             <For each={popular()}>
               {(item) => (
                 <div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
@@ -233,7 +232,7 @@ export const SettingsProviders: Component = () => {
                 {language.t("common.connect")}
               </Button>
             </div>
-          </SettingsList>
+          </div>
 
           <Button
             variant="ghost"

packages/app/src/components/status-popover.tsx

@@ -14,7 +14,7 @@ import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
-import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health"
+import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
 import { DialogSelectServer } from "./dialog-select-server"
 
 const pollMs = 10_000
@@ -53,8 +53,7 @@ const listServersByHealth = (
   })
 }
 
-const useServerHealth = (servers: Accessor<ServerConnection.Any[]>) => {
+const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, fetcher: typeof fetch) => {
-  const checkServerHealth = useCheckServerHealth()
   const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
 
   createEffect(() => {
@@ -65,7 +64,7 @@ const useServerHealth = (servers: Accessor<ServerConnection.Any[]>) => {
       const results: Record<string, ServerHealth> = {}
       await Promise.all(
         list.map(async (conn) => {
-          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
+          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http, fetcher)
         }),
       )
       if (dead) return
@@ -86,17 +85,15 @@ const useServerHealth = (servers: Accessor<ServerConnection.Any[]>) => {
 const useDefaultServerKey = (
   get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
 ) => {
-  const [state, setState] = createStore({
+  const [url, setUrl] = createSignal<string | undefined>()
-    url: undefined as string | undefined,
+  const [tick, setTick] = createSignal(0)
-    tick: 0,
-  })
 
   createEffect(() => {
-    state.tick
+    tick()
     let dead = false
     const result = get?.()
     if (!result) {
-      setState("url", undefined)
+      setUrl(undefined)
       onCleanup(() => {
         dead = true
       })
@@ -106,7 +103,7 @@ const useDefaultServerKey = (
     if (result instanceof Promise) {
       void result.then((next) => {
         if (dead) return
-        setState("url", next ? normalizeServerUrl(next) : undefined)
+        setUrl(next ? normalizeServerUrl(next) : undefined)
       })
       onCleanup(() => {
         dead = true
@@ -114,7 +111,7 @@ const useDefaultServerKey = (
       return
     }
 
-    setState("url", normalizeServerUrl(result))
+    setUrl(normalizeServerUrl(result))
     onCleanup(() => {
       dead = true
     })
@@ -122,11 +119,11 @@ const useDefaultServerKey = (
 
   return {
     key: () => {
-      const u = state.url
+      const u = url()
       if (!u) return
       return ServerConnection.key({ type: "http", http: { url: u } })
     },
-    refresh: () => setState("tick", (value) => value + 1),
+    refresh: () => setTick((value) => value + 1),
   }
 }
 
@@ -171,7 +168,7 @@ export function StatusPopover() {
   const language = useLanguage()
   const navigate = useNavigate()
 
-  const [shown, setShown] = createSignal(false)
+  const fetcher = platform.fetch ?? globalThis.fetch
   const servers = createMemo(() => {
     const current = server.current
     const list = server.list
@@ -179,10 +176,10 @@ export function StatusPopover() {
     if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
     return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
   })
-  const health = useServerHealth(servers)
+  const health = useServerHealth(servers, fetcher)
   const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
   const mcp = useMcpToggle({ sync, sdk, language })
-  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
+  const defaultServer = useDefaultServerKey(platform.getDefaultServerUrl)
   const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
   const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
   const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
@@ -202,23 +199,18 @@ export function StatusPopover() {
 
   return (
     <Popover
-      open={shown()}
-      onOpenChange={setShown}
       triggerAs={Button}
       triggerProps={{
         variant: "ghost",
-        class: "titlebar-icon w-8 h-6 p-0 box-border",
+        class: "titlebar-icon w-6 h-6 p-0 box-border",
         "aria-label": language.t("status.popover.trigger"),
         style: { scale: 1 },
       }}
       trigger={
-        <div class="relative size-4">
+        <div class="flex size-4 items-center justify-center">
-          <div class="badge-mask-tight size-4 flex items-center justify-center">
-            <Icon name={shown() ? "status-active" : "status"} size="small" />
-          </div>
           <div
             classList={{
-              "absolute -top-px -right-px size-1.5 rounded-full": true,
+              "size-1.5 rounded-full": true,
               "bg-icon-success-base": overallHealthy(),
               "bg-icon-critical-base": !overallHealthy() && server.healthy() !== undefined,
               "bg-border-weak-base": server.healthy() === undefined,
@@ -277,8 +269,8 @@ export function StatusPopover() {
                         aria-disabled={isBlocked()}
                         onClick={() => {
                           if (isBlocked()) return
+                          server.setActive(key)
                           navigate("/")
-                          queueMicrotask(() => server.setActive(key))
                         }}
                       >
                         <ServerHealthIndicator health={health[key]} />

packages/app/src/components/terminal.tsx

@@ -10,7 +10,6 @@ import { useSDK } from "@/context/sdk"
 import { useServer } from "@/context/server"
 import { monoFontFamily, useSettings } from "@/context/settings"
 import type { LocalPTY } from "@/context/terminal"
-import { terminalAttr, terminalProbe } from "@/testing/terminal"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
 import { terminalWriter } from "@/utils/terminal-writer"
 
@@ -18,7 +17,6 @@ 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
@@ -65,13 +63,6 @@ const debugTerminal = (...values: unknown[]) => {
   console.debug("[terminal]", ...values)
 }
 
-const errorName = (err: unknown) => {
-  if (!err || typeof err !== "object") return
-  if (!("name" in err)) return
-  const errorName = err.name
-  return typeof errorName === "string" ? errorName : undefined
-}
-
 const useTerminalUiBindings = (input: {
   container: HTMLDivElement
   term: Term
@@ -165,16 +156,9 @@ export const Terminal = (props: TerminalProps) => {
   const theme = useTheme()
   const language = useLanguage()
   const server = useServer()
-  const directory = sdk.directory
-  const client = sdk.client
-  const url = sdk.url
-  const auth = server.current?.http
-  const username = auth?.username ?? "opencode"
-  const password = auth?.password ?? ""
   let container!: HTMLDivElement
-  const [local, others] = splitProps(props, ["pty", "class", "classList", "autoFocus", "onConnect", "onConnectError"])
+  const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnect", "onConnectError"])
   const id = local.pty.id
-  const probe = terminalProbe(id)
   const restore = typeof local.pty.buffer === "string" ? local.pty.buffer : ""
   const restoreSize =
     restore &&
@@ -202,11 +186,7 @@ export const Terminal = (props: TerminalProps) => {
   const start =
     typeof local.pty.cursor === "number" && Number.isSafeInteger(local.pty.cursor) ? local.pty.cursor : undefined
   let cursor = start ?? 0
-  let seek = start !== undefined ? start : restore ? -1 : 0
   let output: ReturnType<typeof terminalWriter> | undefined
-  let drop: VoidFunction | undefined
-  let reconn: ReturnType<typeof setTimeout> | undefined
-  let tries = 0
 
   const cleanup = () => {
     if (!cleanups.length) return
@@ -221,7 +201,7 @@ export const Terminal = (props: TerminalProps) => {
   }
 
   const pushSize = (cols: number, rows: number) => {
-    return client.pty
+    return sdk.client.pty
       .update({
         ptyID: id,
         size: { cols, rows },
@@ -345,9 +325,6 @@ export const Terminal = (props: TerminalProps) => {
   }
 
   onMount(() => {
-    probe.init()
-    cleanups.push(() => probe.drop())
-
     const run = async () => {
       const loaded = await loadGhostty()
       if (disposed) return
@@ -375,13 +352,7 @@ export const Terminal = (props: TerminalProps) => {
       }
       ghostty = g
       term = t
-      output = terminalWriter((data, done) =>
+      output = terminalWriter((data, done) => t.write(data, done))
-        t.write(data, () => {
-          probe.render(data)
-          probe.settle()
-          done?.()
-        }),
-      )
 
       t.attachCustomKeyEventHandler((event) => {
         const key = event.key.toLowerCase()
@@ -415,7 +386,7 @@ export const Terminal = (props: TerminalProps) => {
         handleLinkClick,
       })
 
-      if (local.autoFocus !== false) focusTerminal()
+      focusTerminal()
 
       if (typeof document !== "undefined" && document.fonts) {
         document.fonts.ready.then(scheduleFit)
@@ -469,136 +440,89 @@ export const Terminal = (props: TerminalProps) => {
         startResize()
       }
 
-      const once = { value: false }
+      // t.onScroll((ydisp) => {
-      const decoder = new TextDecoder()
+      // console.log("Scroll position:", ydisp)
+      // })
 
-      const fail = (err: unknown) => {
+      const once = { value: false }
+      let closing = false
+
+      const url = new URL(sdk.url + `/pty/${id}/connect`)
+      url.searchParams.set("directory", sdk.directory)
+      url.searchParams.set("cursor", String(start !== undefined ? start : restore ? -1 : 0))
+      url.protocol = url.protocol === "https:" ? "wss:" : "ws:"
+      url.username = server.current?.http.username ?? ""
+      url.password = server.current?.http.password ?? ""
+
+      const socket = new WebSocket(url)
+      socket.binaryType = "arraybuffer"
+      ws = socket
+
+      const handleOpen = () => {
+        local.onConnect?.()
+        scheduleSize(t.cols, t.rows)
+      }
+      socket.addEventListener("open", handleOpen)
+      if (socket.readyState === WebSocket.OPEN) handleOpen()
+
+      const decoder = new TextDecoder()
+      const handleMessage = (event: MessageEvent) => {
         if (disposed) return
+        if (closing) return
+        if (event.data instanceof ArrayBuffer) {
+          const bytes = new Uint8Array(event.data)
+          if (bytes[0] !== 0) return
+          const json = decoder.decode(bytes.subarray(1))
+          try {
+            const meta = JSON.parse(json) as { cursor?: unknown }
+            const next = meta?.cursor
+            if (typeof next === "number" && Number.isSafeInteger(next) && next >= 0) {
+              cursor = next
+            }
+          } catch (err) {
+            debugTerminal("invalid websocket control frame", err)
+          }
+          return
+        }
+
+        const data = typeof event.data === "string" ? event.data : ""
+        if (!data) return
+        output?.push(data)
+        cursor += data.length
+      }
+      socket.addEventListener("message", handleMessage)
+
+      const handleError = (error: Event) => {
+        if (disposed) return
+        if (closing) return
         if (once.value) return
         once.value = true
-        local.onConnectError?.(err)
+        console.error("WebSocket error:", error)
+        local.onConnectError?.(error)
       }
+      socket.addEventListener("error", handleError)
 
-      const gone = () =>
+      const handleClose = (event: CloseEvent) => {
-        client.pty
-          .get({ ptyID: id })
-          .then(() => false)
-          .catch((err) => {
-            if (errorName(err) === "NotFoundError") return true
-            debugTerminal("failed to inspect terminal session", err)
-            return false
-          })
-
-      const retry = (err: unknown) => {
         if (disposed) return
-        if (reconn !== undefined) return
+        if (closing) return
-
+        // Normal closure (code 1000) means PTY process exited - server event handles cleanup
-        const ms = Math.min(250 * 2 ** Math.min(tries, 4), 4_000)
+        // For other codes (network issues, server restart), trigger error handler
-        reconn = setTimeout(async () => {
+        if (event.code !== 1000) {
-          reconn = undefined
+          if (once.value) return
-          if (disposed) return
+          once.value = true
-          if (await gone()) {
+          local.onConnectError?.(new Error(`WebSocket closed abnormally: ${event.code}`))
-            if (disposed) return
+        }
-            fail(err)
-            return
-          }
-          if (disposed) return
-          tries += 1
-          open()
-        }, ms)
       }
+      socket.addEventListener("close", handleClose)
 
-      const open = () => {
+      cleanups.push(() => {
-        if (disposed) return
+        closing = true
-        drop?.()
+        socket.removeEventListener("open", handleOpen)
-
+        socket.removeEventListener("message", handleMessage)
-        const next = new URL(url + `/pty/${id}/connect`)
+        socket.removeEventListener("error", handleError)
-        next.searchParams.set("directory", directory)
+        socket.removeEventListener("close", handleClose)
-        next.searchParams.set("cursor", String(seek))
+        if (socket.readyState !== WebSocket.CLOSED && socket.readyState !== WebSocket.CLOSING) socket.close(1000)
-        next.protocol = next.protocol === "https:" ? "wss:" : "ws:"
-        next.username = username
-        next.password = password
-
-        const socket = new WebSocket(next)
-        socket.binaryType = "arraybuffer"
-        ws = socket
-
-        const handleOpen = () => {
-          if (disposed) return
-          tries = 0
-          probe.connect()
-          local.onConnect?.()
-          scheduleSize(t.cols, t.rows)
-        }
-
-        const handleMessage = (event: MessageEvent) => {
-          if (disposed) return
-          if (event.data instanceof ArrayBuffer) {
-            const bytes = new Uint8Array(event.data)
-            if (bytes[0] !== 0) return
-            const json = decoder.decode(bytes.subarray(1))
-            try {
-              const meta = JSON.parse(json) as { cursor?: unknown }
-              const next = meta?.cursor
-              if (typeof next === "number" && Number.isSafeInteger(next) && next >= 0) {
-                cursor = next
-                seek = next
-              }
-            } catch (err) {
-              debugTerminal("invalid websocket control frame", err)
-            }
-            return
-          }
-
-          const data = typeof event.data === "string" ? event.data : ""
-          if (!data) return
-          output?.push(data)
-          cursor += data.length
-          seek = cursor
-        }
-
-        const handleError = (error: Event) => {
-          if (disposed) return
-          debugTerminal("websocket error", error)
-        }
-
-        const stop = () => {
-          socket.removeEventListener("open", handleOpen)
-          socket.removeEventListener("message", handleMessage)
-          socket.removeEventListener("error", handleError)
-          socket.removeEventListener("close", handleClose)
-          if (ws === socket) ws = undefined
-          if (drop === stop) drop = undefined
-          if (socket.readyState !== WebSocket.CLOSED && socket.readyState !== WebSocket.CLOSING) socket.close(1000)
-        }
-
-        const handleClose = (event: CloseEvent) => {
-          if (ws === socket) ws = undefined
-          if (drop === stop) drop = undefined
-          socket.removeEventListener("open", handleOpen)
-          socket.removeEventListener("message", handleMessage)
-          socket.removeEventListener("error", handleError)
-          socket.removeEventListener("close", handleClose)
-          if (disposed) return
-          if (event.code === 1000) return
-          retry(new Error(language.t("terminal.connectionLost.abnormalClose", { code: event.code })))
-        }
-
-        drop = stop
-        socket.addEventListener("open", handleOpen)
-        socket.addEventListener("message", handleMessage)
-        socket.addEventListener("error", handleError)
-        socket.addEventListener("close", handleClose)
-      }
-
-      probe.control({
-        disconnect: () => {
-          if (!ws) return
-          ws.close(4_000, "e2e")
-        },
       })
-
-      open()
     }
 
     void run().catch((err) => {
@@ -616,8 +540,6 @@ export const Terminal = (props: TerminalProps) => {
     disposed = true
     if (fitFrame !== undefined) cancelAnimationFrame(fitFrame)
     if (sizeTimer !== undefined) clearTimeout(sizeTimer)
-    if (reconn !== undefined) clearTimeout(reconn)
-    drop?.()
     if (ws && ws.readyState !== WebSocket.CLOSED && ws.readyState !== WebSocket.CLOSING) ws.close(1000)
 
     const finalize = () => {
@@ -637,7 +559,6 @@ export const Terminal = (props: TerminalProps) => {
     <div
       ref={container}
       data-component="terminal"
-      {...{ [terminalAttr]: id }}
       data-prevent-autofocus
       tabIndex={-1}
       style={{ "background-color": terminalColors().background }}

packages/app/src/components/titlebar.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, Show, untrack } from "solid-js"
+import { createEffect, createMemo, Show, untrack } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -58,12 +58,6 @@ export function Titlebar() {
   })
 
   const path = () => `${location.pathname}${location.search}${location.hash}`
-  const creating = createMemo(() => {
-    if (!params.dir) return false
-    if (params.id) return false
-    const parts = location.pathname.replace(/\/+$/, "").split("/")
-    return parts.at(-1) === "session"
-  })
 
   createEffect(() => {
     const current = path()
@@ -77,7 +71,6 @@ export function Titlebar() {
 
   const canBack = createMemo(() => history.index > 0)
   const canForward = createMemo(() => history.index < history.stack.length - 1)
-  const hasProjects = createMemo(() => layout.projects.list().length > 0)
 
   const back = () => {
     const next = backPath(history)
@@ -213,77 +206,63 @@ export function Titlebar() {
               aria-label={language.t("command.sidebar.toggle")}
               aria-expanded={layout.sidebar.opened()}
             >
-              <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
+              <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                <Icon
+                  size="small"
+                  name={layout.sidebar.opened() ? "layout-left-partial" : "layout-left"}
+                  class="group-hover/sidebar-toggle:hidden"
+                />
+                <Icon size="small" name="layout-left-partial" class="hidden group-hover/sidebar-toggle:inline-block" />
+                <Icon
+                  size="small"
+                  name={layout.sidebar.opened() ? "layout-left" : "layout-left-partial"}
+                  class="hidden group-active/sidebar-toggle:inline-block"
+                />
+              </div>
             </Button>
           </TooltipKeybind>
           <div class="hidden xl:flex items-center shrink-0">
             <Show when={params.dir}>
-              <div
+              <TooltipKeybind
-                class="flex items-center shrink-0 w-8 mr-1"
+                placement="bottom"
-                aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+                title={language.t("command.session.new")}
+                keybind={command.keybind("session.new")}
+                openDelay={2000}
               >
-                <div
+                <Button
-                  class="transition-opacity"
+                  variant="ghost"
-                  classList={{
+                  icon="new-session"
-                    "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
+                  class="titlebar-icon w-8 h-6 p-0 box-border"
-                    "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                  onClick={() => {
+                    if (!params.dir) return
+                    navigate(`/${params.dir}/session`)
                   }}
-                >
+                  aria-label={language.t("command.session.new")}
-                  <TooltipKeybind
+                />
-                    placement="bottom"
+              </TooltipKeybind>
-                    title={language.t("command.session.new")}
-                    keybind={command.keybind("session.new")}
-                    openDelay={2000}
-                  >
-                    <Button
-                      variant="ghost"
-                      icon={creating() ? "new-session-active" : "new-session"}
-                      class="titlebar-icon w-8 h-6 p-0 box-border"
-                      disabled={layout.sidebar.opened()}
-                      tabIndex={layout.sidebar.opened() ? -1 : undefined}
-                      onClick={() => {
-                        if (!params.dir) return
-                        navigate(`/${params.dir}/session`)
-                      }}
-                      aria-label={language.t("command.session.new")}
-                      aria-current={creating() ? "page" : undefined}
-                    />
-                  </TooltipKeybind>
-                </div>
-              </div>
-            </Show>
-            <Show when={hasProjects()}>
-              <div
-                class="flex items-center gap-0 transition-transform"
-                classList={{
-                  "translate-x-0": !layout.sidebar.opened(),
-                  "-translate-x-[36px]": layout.sidebar.opened(),
-                  "duration-180 ease-out": !layout.sidebar.opened(),
-                  "duration-180 ease-in": layout.sidebar.opened(),
-                }}
-              >
-                <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-                  <Button
-                    variant="ghost"
-                    icon="chevron-left"
-                    class="titlebar-icon w-6 h-6 p-0 box-border"
-                    disabled={!canBack()}
-                    onClick={back}
-                    aria-label={language.t("common.goBack")}
-                  />
-                </Tooltip>
-                <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
-                  <Button
-                    variant="ghost"
-                    icon="chevron-right"
-                    class="titlebar-icon w-6 h-6 p-0 box-border"
-                    disabled={!canForward()}
-                    onClick={forward}
-                    aria-label={language.t("common.goForward")}
-                  />
-                </Tooltip>
-              </div>
             </Show>
+            <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}>
+              <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
+                <Button
+                  variant="ghost"
+                  icon="chevron-left"
+                  class="titlebar-icon w-6 h-6 p-0 box-border"
+                  disabled={!canBack()}
+                  onClick={back}
+                  aria-label={language.t("common.goBack")}
+                />
+              </Tooltip>
+              <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
+                <Button
+                  variant="ghost"
+                  icon="chevron-right"
+                  class="titlebar-icon w-6 h-6 p-0 box-border"
+                  disabled={!canForward()}
+                  onClick={forward}
+                  aria-label={language.t("common.goForward")}
+                />
+              </Tooltip>
+            </div>
           </div>
         </div>
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
@@ -303,7 +282,7 @@ export function Titlebar() {
       >
         <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
         <Show when={windows()}>
-          {!tauriApi() && <div class="w-36 shrink-0" />}
+          <div class="w-6 shrink-0" />
           <div data-tauri-decorum-tb class="flex flex-row" />
         </Show>
       </div>

packages/app/src/constants/file-picker.ts

@@ -1,89 +0,0 @@
-export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
-
-export const ACCEPTED_FILE_TYPES = [
-  ...ACCEPTED_IMAGE_TYPES,
-  "application/pdf",
-  "text/*",
-  "application/json",
-  "application/ld+json",
-  "application/toml",
-  "application/x-toml",
-  "application/x-yaml",
-  "application/xml",
-  "application/yaml",
-  ".c",
-  ".cc",
-  ".cjs",
-  ".conf",
-  ".cpp",
-  ".css",
-  ".csv",
-  ".cts",
-  ".env",
-  ".go",
-  ".gql",
-  ".graphql",
-  ".h",
-  ".hh",
-  ".hpp",
-  ".htm",
-  ".html",
-  ".ini",
-  ".java",
-  ".js",
-  ".json",
-  ".jsx",
-  ".log",
-  ".md",
-  ".mdx",
-  ".mjs",
-  ".mts",
-  ".py",
-  ".rb",
-  ".rs",
-  ".sass",
-  ".scss",
-  ".sh",
-  ".sql",
-  ".toml",
-  ".ts",
-  ".tsx",
-  ".txt",
-  ".xml",
-  ".yaml",
-  ".yml",
-  ".zsh",
-]
-
-const MIME_EXT = new Map([
-  ["image/png", "png"],
-  ["image/jpeg", "jpg"],
-  ["image/gif", "gif"],
-  ["image/webp", "webp"],
-  ["application/pdf", "pdf"],
-  ["application/json", "json"],
-  ["application/ld+json", "jsonld"],
-  ["application/toml", "toml"],
-  ["application/x-toml", "toml"],
-  ["application/x-yaml", "yaml"],
-  ["application/xml", "xml"],
-  ["application/yaml", "yaml"],
-])
-
-const TEXT_EXT = ["txt", "text", "md", "markdown", "log", "csv"]
-
-export const ACCEPTED_FILE_EXTENSIONS = Array.from(
-  new Set(
-    ACCEPTED_FILE_TYPES.flatMap((item) => {
-      if (item.startsWith(".")) return [item.slice(1)]
-      if (item === "text/*") return TEXT_EXT
-      const out = MIME_EXT.get(item)
-      return out ? [out] : []
-    }),
-  ),
-).sort()
-
-export function filePickerFilters(ext?: string[]) {
-  if (!ext || ext.length === 0) return undefined
-  return [{ name: "Files", extensions: ext }]
-}

packages/app/src/context/command.tsx

@@ -1,10 +1,9 @@
+import { createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { type Accessor, createEffect, createMemo, onCleanup, onMount } from "solid-js"
-import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
-import { dict as en } from "@/i18n/en"
 import { Persist, persisted } from "@/utils/persist"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
@@ -14,27 +13,6 @@ const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
 const SUGGESTED_PREFIX = "suggested."
 const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new", "file.attach"])
 
-type KeyLabel =
-  | "common.key.ctrl"
-  | "common.key.alt"
-  | "common.key.shift"
-  | "common.key.meta"
-  | "common.key.space"
-  | "common.key.backspace"
-  | "common.key.enter"
-  | "common.key.tab"
-  | "common.key.delete"
-  | "common.key.home"
-  | "common.key.end"
-  | "common.key.pageUp"
-  | "common.key.pageDown"
-  | "common.key.insert"
-  | "common.key.esc"
-
-function keyText(key: KeyLabel, t?: (key: KeyLabel) => string) {
-  return t ? t(key) : en[key]
-}
-
 function actionId(id: string) {
   if (!id.startsWith(SUGGESTED_PREFIX)) return id
   return id.slice(SUGGESTED_PREFIX.length)
@@ -167,7 +145,7 @@ export function matchKeybind(keybinds: Keybind[], event: KeyboardEvent): boolean
   return false
 }
 
-export function formatKeybind(config: string, t?: (key: KeyLabel) => string): string {
+export function formatKeybind(config: string): string {
   if (!config || config === "none") return ""
 
   const keybinds = parseKeybind(config)
@@ -176,10 +154,10 @@ export function formatKeybind(config: string, t?: (key: KeyLabel) => string): st
   const kb = keybinds[0]
   const parts: string[] = []
 
-  if (kb.ctrl) parts.push(IS_MAC ? "⌃" : keyText("common.key.ctrl", t))
+  if (kb.ctrl) parts.push(IS_MAC ? "⌃" : "Ctrl")
-  if (kb.alt) parts.push(IS_MAC ? "⌥" : keyText("common.key.alt", t))
+  if (kb.alt) parts.push(IS_MAC ? "⌥" : "Alt")
-  if (kb.shift) parts.push(IS_MAC ? "⇧" : keyText("common.key.shift", t))
+  if (kb.shift) parts.push(IS_MAC ? "⇧" : "Shift")
-  if (kb.meta) parts.push(IS_MAC ? "⌘" : keyText("common.key.meta", t))
+  if (kb.meta) parts.push(IS_MAC ? "⌘" : "Meta")
 
   if (kb.key) {
     const keys: Record<string, string> = {
@@ -189,29 +167,10 @@ export function formatKeybind(config: string, t?: (key: KeyLabel) => string): st
       arrowright: "→",
       comma: ",",
       plus: "+",
-    }
+      space: "Space",
-    const named: Record<string, KeyLabel> = {
-      backspace: "common.key.backspace",
-      delete: "common.key.delete",
-      end: "common.key.end",
-      enter: "common.key.enter",
-      esc: "common.key.esc",
-      escape: "common.key.esc",
-      home: "common.key.home",
-      insert: "common.key.insert",
-      pagedown: "common.key.pageDown",
-      pageup: "common.key.pageUp",
-      space: "common.key.space",
-      tab: "common.key.tab",
     }
     const key = kb.key.toLowerCase()
-    const displayKey =
+    const displayKey = keys[key] ?? (key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1))
-      keys[key] ??
-      (named[key]
-        ? keyText(named[key], t)
-        : key.length === 1
-          ? key.toUpperCase()
-          : key.charAt(0).toUpperCase() + key.slice(1))
     parts.push(displayKey)
   }
 
@@ -238,10 +197,9 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     })
     const warnedDuplicates = new Set<string>()
 
-    type CommandCatalog = Record<string, CommandCatalogItem>
     const [catalog, setCatalog, _, catalogReady] = persisted(
       Persist.global("command.catalog.v1"),
-      createStore<CommandCatalog>({}),
+      createStore<Record<string, CommandCatalogItem>>({}),
     )
 
     const bind = (id: string, def: KeybindConfig | undefined) => {
@@ -260,7 +218,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
           if (seen.has(opt.id)) {
             if (import.meta.env.DEV && !warnedDuplicates.has(opt.id)) {
               warnedDuplicates.add(opt.id)
-              console.warn(`[command] duplicate command id "${opt.id}" registered; keeping first entry`)
+              console.warn(`[command] duplicate command id \"${opt.id}\" registered; keeping first entry`)
             }
             continue
           }
@@ -275,19 +233,16 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     createEffect(() => {
       if (!catalogReady()) return
 
-      setCatalog(
+      for (const opt of registered()) {
-        registered().reduce((acc, opt) => {
+        const id = actionId(opt.id)
-          const id = actionId(opt.id)
+        setCatalog(id, {
-          acc[id] = {
+          title: opt.title,
-            title: opt.title,
+          description: opt.description,
-            description: opt.description,
+          category: opt.category,
-            category: opt.category,
+          keybind: opt.keybind,
-            keybind: opt.keybind,
+          slash: opt.slash,
-            slash: opt.slash,
+        })
-          }
+      }
-          return acc
-        }, {} as CommandCatalog),
-      )
     })
 
     const catalogOptions = createMemo(() => Object.entries(catalog).map(([id, meta]) => ({ id, ...meta })))
@@ -409,17 +364,17 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
       },
       keybind(id: string) {
         if (id === PALETTE_ID) {
-          return formatKeybind(settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND, language.t)
+          return formatKeybind(settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND)
         }
 
         const base = actionId(id)
         const option = options().find((x) => actionId(x.id) === base)
-        if (option?.keybind) return formatKeybind(option.keybind, language.t)
+        if (option?.keybind) return formatKeybind(option.keybind)
 
         const meta = catalog[base]
         const config = bind(base, meta?.keybind)
         if (!config) return ""
-        return formatKeybind(config, language.t)
+        return formatKeybind(config)
       },
       show: showPalette,
       keybinds(enabled: boolean) {

packages/app/src/context/file.tsx

@@ -43,10 +43,10 @@ export {
   touchFileContent,
 }
 
-function errorMessage(error: unknown, fallback: string) {
+function errorMessage(error: unknown) {
   if (error instanceof Error && error.message) return error.message
   if (typeof error === "string" && error) return error
-  return fallback
+  return "Unknown error"
 }
 
 export const { use: useFile, provider: FileProvider } = createSimpleContext({
@@ -184,7 +184,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
         })
         .catch((e) => {
           if (scope() !== directory) return
-          setLoadError(file, errorMessage(e, language.t("error.chain.unknown")))
+          setLoadError(file, errorMessage(e))
         })
         .finally(() => {
           inflight.delete(key)

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

@@ -4,7 +4,6 @@ import { createGlobalEmitter } from "@solid-primitives/event-bus"
 import { batch, onCleanup } from "solid-js"
 import z from "zod"
 import { createSdkForServer } from "@/utils/server"
-import { useLanguage } from "./language"
 import { usePlatform } from "./platform"
 import { useServer } from "./server"
 
@@ -15,7 +14,6 @@ const abortError = z.object({
 export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
   name: "GlobalSDK",
   init: () => {
-    const language = useLanguage()
     const server = useServer()
     const platform = usePlatform()
     const abort = new AbortController()
@@ -32,7 +30,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     })()
 
     const currentServer = server.current
-    if (!currentServer) throw new Error(language.t("error.globalSDK.noServerAvailable"))
+    if (!currentServer) throw new Error("No server available")
 
     const eventSdk = createSdkForServer({
       signal: abort.signal,
@@ -220,7 +218,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       event: emitter,
       createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
         const s = server.current
-        if (!s) throw new Error(language.t("error.globalSDK.serverNotAvailable"))
+        if (!s) throw new Error("Server not available")
         return createSdkForServer({
           server: s.http,
           fetch: platform.fetch,

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

@@ -1,6 +1,10 @@
 import { describe, expect, test } from "bun:test"
-import { canDisposeDirectory, pickDirectoriesToEvict } from "./global-sync/eviction"
+import {
-import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
+  canDisposeDirectory,
+  estimateRootSessionTotal,
+  loadRootSessionsWithFallback,
+  pickDirectoriesToEvict,
+} from "./global-sync"
 
 describe("pickDirectoriesToEvict", () => {
   test("keeps pinned stores and evicts idle stores", () => {

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

@@ -29,7 +29,6 @@ import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
 import { createChildStoreManager } from "./global-sync/child-store"
 import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./global-sync/event-reducer"
 import { createRefreshQueue } from "./global-sync/queue"
-import { clearSessionPrefetchDirectory } from "./global-sync/session-prefetch"
 import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
 import { trimSessions } from "./global-sync/session-trim"
 import type { ProjectMeta } from "./global-sync/types"
@@ -162,9 +161,7 @@ function createGlobalSync() {
       queue.clear(directory)
       sessionMeta.delete(directory)
       sdkCache.delete(directory)
-      clearSessionPrefetchDirectory(directory)
     },
-    translate: language.t,
   })
 
   const sdkFor = (directory: string) => {
@@ -378,7 +375,6 @@ function createGlobalSync() {
       return globalStore.error
     },
     child: children.child,
-    peek: children.peek,
     bootstrap,
     updateConfig,
     project: projectApi,
@@ -406,3 +402,6 @@ export function useGlobalSync() {
   if (!context) throw new Error("useGlobalSync must be used within GlobalSyncProvider")
   return context
 }
+
+export { canDisposeDirectory, pickDirectoriesToEvict } from "./global-sync/eviction"
+export { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"

packages/app/src/context/global-sync/bootstrap.ts

@@ -139,7 +139,7 @@ export async function bootstrapDirectory(input: {
     const project = getFilename(input.directory)
     showToast({
       variant: "error",
-      title: input.translate("toast.project.reloadFailed.title", { project }),
+      title: `Failed to reload ${project}`,
       description: formatServerError(err, input.translate),
     })
     input.setStore("status", "partial")

packages/app/src/context/global-sync/child-store.test.ts

@@ -21,7 +21,6 @@ describe("createChildStoreManager", () => {
       isLoadingSessions: () => false,
       onBootstrap() {},
       onDispose() {},
-      translate: (key) => key,
     })
 
     Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {

packages/app/src/context/global-sync/child-store.ts

@@ -21,7 +21,6 @@ export function createChildStoreManager(input: {
   isLoadingSessions: (directory: string) => boolean
   onBootstrap: (directory: string) => void
   onDispose: (directory: string) => void
-  translate: (key: string, vars?: Record<string, string | number>) => string
 }) {
   const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
   const vcsCache = new Map<string, VcsCache>()
@@ -130,7 +129,7 @@ export function createChildStoreManager(input: {
           createStore({ value: undefined as VcsInfo | undefined }),
         ),
       )
-      if (!vcs) throw new Error(input.translate("error.childStore.persistedCacheCreateFailed"))
+      if (!vcs) throw new Error("Failed to create persisted cache")
       const vcsStore = vcs[0]
       vcsCache.set(directory, { store: vcsStore, setStore: vcs[1], ready: vcs[3] })
 
@@ -140,7 +139,7 @@ export function createChildStoreManager(input: {
           createStore({ value: undefined as ProjectMeta | undefined }),
         ),
       )
-      if (!meta) throw new Error(input.translate("error.childStore.persistedProjectMetadataCreateFailed"))
+      if (!meta) throw new Error("Failed to create persisted project metadata")
       metaCache.set(directory, { store: meta[0], setStore: meta[1], ready: meta[3] })
 
       const icon = runWithOwner(input.owner, () =>
@@ -149,7 +148,7 @@ export function createChildStoreManager(input: {
           createStore({ value: undefined as string | undefined }),
         ),
       )
-      if (!icon) throw new Error(input.translate("error.childStore.persistedProjectIconCreateFailed"))
+      if (!icon) throw new Error("Failed to create persisted project icon")
       iconCache.set(directory, { store: icon[0], setStore: icon[1], ready: icon[3] })
 
       const init = () =>
@@ -212,7 +211,7 @@ export function createChildStoreManager(input: {
     }
     mark(directory)
     const childStore = children[directory]
-    if (!childStore) throw new Error(input.translate("error.childStore.storeCreateFailed"))
+    if (!childStore) throw new Error("Failed to create store")
     return childStore
   }
 
@@ -226,15 +225,6 @@ export function createChildStoreManager(input: {
     return childStore
   }
 
-  function peek(directory: string, options: ChildOptions = {}) {
-    const childStore = ensureChild(directory)
-    const shouldBootstrap = options.bootstrap ?? true
-    if (shouldBootstrap && childStore[0].status === "loading") {
-      input.onBootstrap(directory)
-    }
-    return childStore
-  }
-
   function projectMeta(directory: string, patch: ProjectMeta) {
     const [store, setStore] = ensureChild(directory)
     const cached = metaCache.get(directory)
@@ -265,7 +255,6 @@ export function createChildStoreManager(input: {
     children,
     ensureChild,
     child,
-    peek,
     projectMeta,
     projectIcon,
     mark,

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

@@ -1,96 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import {
-  clearSessionPrefetch,
-  clearSessionPrefetchDirectory,
-  getSessionPrefetch,
-  runSessionPrefetch,
-  setSessionPrefetch,
-  shouldSkipSessionPrefetch,
-} from "./session-prefetch"
-
-describe("session prefetch", () => {
-  test("stores and clears message metadata by directory", () => {
-    clearSessionPrefetch("/tmp/a", ["ses_1"])
-    clearSessionPrefetch("/tmp/b", ["ses_1"])
-
-    setSessionPrefetch({
-      directory: "/tmp/a",
-      sessionID: "ses_1",
-      limit: 200,
-      cursor: "abc",
-      complete: false,
-      at: 123,
-    })
-
-    expect(getSessionPrefetch("/tmp/a", "ses_1")).toEqual({ limit: 200, cursor: "abc", complete: false, at: 123 })
-    expect(getSessionPrefetch("/tmp/b", "ses_1")).toBeUndefined()
-
-    clearSessionPrefetch("/tmp/a", ["ses_1"])
-
-    expect(getSessionPrefetch("/tmp/a", "ses_1")).toBeUndefined()
-  })
-
-  test("dedupes inflight work", async () => {
-    clearSessionPrefetch("/tmp/c", ["ses_2"])
-
-    let calls = 0
-    const run = () =>
-      runSessionPrefetch({
-        directory: "/tmp/c",
-        sessionID: "ses_2",
-        task: async () => {
-          calls += 1
-          return { limit: 100, cursor: "next", complete: true, at: 456 }
-        },
-      })
-
-    const [a, b] = await Promise.all([run(), run()])
-
-    expect(calls).toBe(1)
-    expect(a).toEqual({ limit: 100, cursor: "next", complete: true, at: 456 })
-    expect(b).toEqual({ limit: 100, cursor: "next", complete: true, at: 456 })
-  })
-
-  test("clears a whole directory", () => {
-    setSessionPrefetch({ directory: "/tmp/d", sessionID: "ses_1", limit: 10, cursor: "a", complete: true, at: 1 })
-    setSessionPrefetch({ directory: "/tmp/d", sessionID: "ses_2", limit: 20, cursor: "b", complete: false, at: 2 })
-    setSessionPrefetch({ directory: "/tmp/e", sessionID: "ses_1", limit: 30, cursor: "c", complete: true, at: 3 })
-
-    clearSessionPrefetchDirectory("/tmp/d")
-
-    expect(getSessionPrefetch("/tmp/d", "ses_1")).toBeUndefined()
-    expect(getSessionPrefetch("/tmp/d", "ses_2")).toBeUndefined()
-    expect(getSessionPrefetch("/tmp/e", "ses_1")).toEqual({ limit: 30, cursor: "c", complete: true, at: 3 })
-  })
-
-  test("refreshes stale first-page prefetched history", () => {
-    expect(
-      shouldSkipSessionPrefetch({
-        message: true,
-        info: { limit: 200, cursor: "x", complete: false, at: 1 },
-        chunk: 200,
-        now: 1 + 15_001,
-      }),
-    ).toBe(false)
-  })
-
-  test("keeps deeper or complete history cached", () => {
-    expect(
-      shouldSkipSessionPrefetch({
-        message: true,
-        info: { limit: 400, cursor: "x", complete: false, at: 1 },
-        chunk: 200,
-        now: 1 + 15_001,
-      }),
-    ).toBe(true)
-
-    expect(
-      shouldSkipSessionPrefetch({
-        message: true,
-        info: { limit: 120, complete: true, at: 1 },
-        chunk: 200,
-        now: 1 + 15_001,
-      }),
-    ).toBe(true)
-  })
-})

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

@@ -1,100 +0,0 @@
-const key = (directory: string, sessionID: string) => `${directory}\n${sessionID}`
-
-export const SESSION_PREFETCH_TTL = 15_000
-
-type Meta = {
-  limit: number
-  cursor?: string
-  complete: boolean
-  at: number
-}
-
-export function shouldSkipSessionPrefetch(input: { message: boolean; info?: Meta; chunk: number; now?: number }) {
-  if (input.message) {
-    if (!input.info) return true
-    if (input.info.complete) return true
-    if (input.info.limit > input.chunk) return true
-  } else {
-    if (!input.info) return false
-  }
-
-  return (input.now ?? Date.now()) - input.info.at < SESSION_PREFETCH_TTL
-}
-
-const cache = new Map<string, Meta>()
-const inflight = new Map<string, Promise<Meta | undefined>>()
-const rev = new Map<string, number>()
-
-const version = (id: string) => rev.get(id) ?? 0
-
-export function getSessionPrefetch(directory: string, sessionID: string) {
-  return cache.get(key(directory, sessionID))
-}
-
-export function getSessionPrefetchPromise(directory: string, sessionID: string) {
-  return inflight.get(key(directory, sessionID))
-}
-
-export function clearSessionPrefetchInflight() {
-  inflight.clear()
-}
-
-export function isSessionPrefetchCurrent(directory: string, sessionID: string, value: number) {
-  return version(key(directory, sessionID)) === value
-}
-
-export function runSessionPrefetch(input: {
-  directory: string
-  sessionID: string
-  task: (value: number) => Promise<Meta | undefined>
-}) {
-  const id = key(input.directory, input.sessionID)
-  const pending = inflight.get(id)
-  if (pending) return pending
-
-  const value = version(id)
-
-  const promise = input.task(value).finally(() => {
-    if (inflight.get(id) === promise) inflight.delete(id)
-  })
-
-  inflight.set(id, promise)
-  return promise
-}
-
-export function setSessionPrefetch(input: {
-  directory: string
-  sessionID: string
-  limit: number
-  cursor?: string
-  complete: boolean
-  at?: number
-}) {
-  cache.set(key(input.directory, input.sessionID), {
-    limit: input.limit,
-    cursor: input.cursor,
-    complete: input.complete,
-    at: input.at ?? Date.now(),
-  })
-}
-
-export function clearSessionPrefetch(directory: string, sessionIDs: Iterable<string>) {
-  for (const sessionID of sessionIDs) {
-    if (!sessionID) continue
-    const id = key(directory, sessionID)
-    rev.set(id, version(id) + 1)
-    cache.delete(id)
-    inflight.delete(id)
-  }
-}
-
-export function clearSessionPrefetchDirectory(directory: string) {
-  const prefix = `${directory}\n`
-  const keys = new Set([...cache.keys(), ...inflight.keys()])
-  for (const id of keys) {
-    if (!id.startsWith(prefix)) continue
-    rev.set(id, version(id) + 1)
-    cache.delete(id)
-    inflight.delete(id)
-  }
-}

packages/app/src/context/highlights.tsx

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from "solid-js"
+import { createEffect, createSignal, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -146,10 +146,8 @@ export const { use: useHighlights, provider: HighlightsProvider } = createSimple
     const settings = useSettings()
     const [store, setStore, _, ready] = persisted("highlights.v1", createStore<Store>({ version: undefined }))
 
-    const [range, setRange] = createStore({
+    const [from, setFrom] = createSignal<string | undefined>(undefined)
-      from: undefined as string | undefined,
+    const [to, setTo] = createSignal<string | undefined>(undefined)
-      to: undefined as string | undefined,
-    })
     const state = { started: false }
     let timer: ReturnType<typeof setTimeout> | undefined
 
@@ -216,14 +214,15 @@ export const { use: useHighlights, provider: HighlightsProvider } = createSimple
 
       if (previous === platform.version) return
 
-      setRange({ from: previous, to: platform.version })
+      setFrom(previous)
+      setTo(platform.version)
       start(previous)
     })
 
     return {
       ready,
-      from: () => range.from,
+      from,
-      to: () => range.to,
+      to,
       get last() {
         return store.version
       },

packages/app/src/context/layout.tsx

@@ -793,67 +793,20 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             },
           },
           review: {
-            open: createMemo(() => s().reviewOpen ?? []),
+            open: createMemo(() => s().reviewOpen),
             setOpen(open: string[]) {
               const session = key()
-              const next = Array.from(new Set(open))
               const current = store.sessionView[session]
               if (!current) {
                 setStore("sessionView", session, {
                   scroll: {},
-                  reviewOpen: next,
+                  reviewOpen: open,
                 })
                 return
               }
 
-              if (same(current.reviewOpen, next)) return
+              if (same(current.reviewOpen, open)) return
-              setStore("sessionView", session, "reviewOpen", next)
+              setStore("sessionView", session, "reviewOpen", open)
-            },
-            openPath(path: string) {
-              const session = key()
-              const current = store.sessionView[session]
-              if (!current) {
-                setStore("sessionView", session, {
-                  scroll: {},
-                  reviewOpen: [path],
-                })
-                return
-              }
-
-              if (!current.reviewOpen) {
-                setStore("sessionView", session, "reviewOpen", [path])
-                return
-              }
-
-              if (current.reviewOpen.includes(path)) return
-              setStore("sessionView", session, "reviewOpen", current.reviewOpen.length, path)
-            },
-            closePath(path: string) {
-              const session = key()
-              const current = store.sessionView[session]?.reviewOpen
-              if (!current) return
-
-              const index = current.indexOf(path)
-              if (index === -1) return
-              setStore(
-                "sessionView",
-                session,
-                "reviewOpen",
-                produce((draft) => {
-                  if (!draft) return
-                  draft.splice(index, 1)
-                }),
-              )
-            },
-            togglePath(path: string) {
-              const session = key()
-              const current = store.sessionView[session]?.reviewOpen
-              if (!current || !current.includes(path)) {
-                this.openPath(path)
-                return
-              }
-
-              this.closePath(path)
             },
           },
         }

packages/app/src/context/local.tsx

@@ -1,422 +1,252 @@
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { base64Encode } from "@opencode-ai/util/encode"
-import { useParams } from "@solidjs/router"
-import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useModels } from "@/context/models"
+import { batch, createMemo } from "solid-js"
-import { useProviders } from "@/hooks/use-providers"
+import { createSimpleContext } from "@opencode-ai/ui/context"
-import { modelEnabled, modelProbe } from "@/testing/model-selection"
-import { Persist, persisted } from "@/utils/persist"
-import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { useProviders } from "@/hooks/use-providers"
+import { useModels } from "@/context/models"
+import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
 
 export type ModelKey = { providerID: string; modelID: string }
 
-type State = {
-  agent?: string
-  model?: ModelKey
-  variant?: string | null
-}
-
-type Saved = {
-  session: Record<string, State | undefined>
-}
-
-const WORKSPACE_KEY = "__workspace__"
-const handoff = new Map<string, State>()
-
-const handoffKey = (dir: string, id: string) => `${dir}\n${id}`
-
-const migrate = (value: unknown) => {
-  if (!value || typeof value !== "object") return { session: {} }
-
-  const item = value as {
-    session?: Record<string, State | undefined>
-    pick?: Record<string, State | undefined>
-  }
-
-  if (item.session && typeof item.session === "object") return { session: item.session }
-  if (!item.pick || typeof item.pick !== "object") return { session: {} }
-
-  return {
-    session: Object.fromEntries(Object.entries(item.pick).filter(([key]) => key !== WORKSPACE_KEY)),
-  }
-}
-
-const clone = (value: State | undefined) => {
-  if (!value) return undefined
-  return {
-    ...value,
-    model: value.model ? { ...value.model } : undefined,
-  } satisfies State
-}
-
 export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
   name: "Local",
   init: () => {
-    const params = useParams()
     const sdk = useSDK()
     const sync = useSync()
     const providers = useProviders()
-    const models = useModels()
+    const connected = createMemo(() => new Set(providers.connected().map((provider) => provider.id)))
 
-    const id = createMemo(() => params.id || undefined)
+    function isModelValid(model: ModelKey) {
-    const list = createMemo(() => sync.data.agent.filter((item) => item.mode !== "subagent" && !item.hidden))
+      const provider = providers.all().find((x) => x.id === model.providerID)
-    const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
-
-    const [saved, setSaved] = persisted(
-      {
-        ...Persist.workspace(sdk.directory, "model-selection", ["model-selection.v1"]),
-        migrate,
-      },
-      createStore<Saved>({
-        session: {},
-      }),
-    )
-
-    const [store, setStore] = createStore<{
-      current?: string
-      draft?: State
-      last?: {
-        type: "agent" | "model" | "variant"
-        agent?: string
-        model?: ModelKey | null
-        variant?: string | null
-      }
-    }>({
-      current: list()[0]?.name,
-      draft: undefined,
-      last: undefined,
-    })
-
-    const validModel = (model: ModelKey) => {
-      const provider = providers.all().find((item) => item.id === model.providerID)
       return !!provider?.models[model.modelID] && connected().has(model.providerID)
     }
 
-    const firstModel = (...items: Array<() => ModelKey | undefined>) => {
+    function getFirstValidModel(...modelFns: (() => ModelKey | undefined)[]) {
-      for (const item of items) {
+      for (const modelFn of modelFns) {
-        const model = item()
+        const model = modelFn()
         if (!model) continue
-        if (validModel(model)) return model
+        if (isModelValid(model)) return model
       }
     }
 
-    const pickAgent = (name: string | undefined) => {
+    let setModel: (model: ModelKey | undefined, options?: { recent?: boolean }) => void = () => undefined
-      const items = list()
-      if (items.length === 0) return undefined
-      return items.find((item) => item.name === name) ?? items[0]
-    }
 
-    createEffect(() => {
+    const agent = (() => {
-      const items = list()
+      const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
-      if (items.length === 0) {
+      const models = useModels()
-        if (store.current !== undefined) setStore("current", undefined)
-        return
-      }
-      if (items.some((item) => item.name === store.current)) return
-      setStore("current", items[0]?.name)
-    })
 
-    const scope = createMemo<State | undefined>(() => {
+      const [store, setStore] = createStore<{
-      const session = id()
+        current?: string
-      if (!session) return store.draft
+      }>({
-      return saved.session[session] ?? handoff.get(handoffKey(sdk.directory, session))
+        current: list()[0]?.name,
-    })
+      })
-
+      return {
-    createEffect(() => {
+        list,
-      const session = id()
+        current() {
-      if (!session) return
+          const available = list()
-
+          if (available.length === 0) return undefined
-      const key = handoffKey(sdk.directory, session)
+          return available.find((x) => x.name === store.current) ?? available[0]
-      const next = handoff.get(key)
+        },
-      if (!next) return
+        set(name: string | undefined) {
-      if (saved.session[session] !== undefined) {
+          const available = list()
-        handoff.delete(key)
+          if (available.length === 0) {
-        return
+            setStore("current", undefined)
-      }
-
-      setSaved("session", session, clone(next))
-      handoff.delete(key)
-    })
-
-    const configuredModel = () => {
-      if (!sync.data.config.model) return
-      const [providerID, modelID] = sync.data.config.model.split("/")
-      const model = { providerID, modelID }
-      if (validModel(model)) return model
-    }
-
-    const recentModel = () => {
-      for (const item of models.recent.list()) {
-        if (validModel(item)) return item
-      }
-    }
-
-    const defaultModel = () => {
-      const defaults = providers.default()
-      for (const provider of providers.connected()) {
-        const configured = defaults[provider.id]
-        if (configured) {
-          const model = { providerID: provider.id, modelID: configured }
-          if (validModel(model)) return model
-        }
-
-        const first = Object.values(provider.models)[0]
-        if (!first) continue
-        const model = { providerID: provider.id, modelID: first.id }
-        if (validModel(model)) return model
-      }
-    }
-
-    const fallback = createMemo<ModelKey | undefined>(() => configuredModel() ?? recentModel() ?? defaultModel())
-
-    const agent = {
-      list,
-      current() {
-        return pickAgent(scope()?.agent ?? store.current)
-      },
-      set(name: string | undefined) {
-        const item = pickAgent(name)
-        if (!item) {
-          setStore("current", undefined)
-          return
-        }
-
-        batch(() => {
-          setStore("current", item.name)
-          setStore("last", {
-            type: "agent",
-            agent: item.name,
-            model: item.model,
-            variant: item.variant ?? null,
-          })
-          const prev = scope()
-          const next = {
-            agent: item.name,
-            model: item.model ?? prev?.model,
-            variant: item.variant ?? prev?.variant,
-          } satisfies State
-          const session = id()
-          if (session) {
-            setSaved("session", session, next)
             return
           }
-          setStore("draft", next)
+          const match = name ? available.find((x) => x.name === name) : undefined
-        })
+          const value = match ?? available[0]
-      },
+          if (!value) return
-      move(direction: 1 | -1) {
+          setStore("current", value.name)
-        const items = list()
+          if (!value.model) return
-        if (items.length === 0) {
+          setModel({
-          setStore("current", undefined)
+            providerID: value.model.providerID,
-          return
+            modelID: value.model.modelID,
-        }
+          })
-
+          if (value.variant)
-        let next = items.findIndex((item) => item.name === agent.current()?.name) + direction
+            models.variant.set({ providerID: value.model.providerID, modelID: value.model.modelID }, value.variant)
-        if (next < 0) next = items.length - 1
+        },
-        if (next >= items.length) next = 0
+        move(direction: 1 | -1) {
-        const item = items[next]
+          const available = list()
-        if (!item) return
+          if (available.length === 0) {
-        agent.set(item.name)
+            setStore("current", undefined)
-      },
+            return
-    }
+          }
-
+          let next = available.findIndex((x) => x.name === store.current) + direction
-    const current = () => {
+          if (next < 0) next = available.length - 1
-      const item = firstModel(
+          if (next >= available.length) next = 0
-        () => scope()?.model,
+          const value = available[next]
-        () => agent.current()?.model,
+          if (!value) return
-        fallback,
+          setStore("current", value.name)
-      )
+          if (!value.model) return
-      if (!item) return undefined
+          setModel({
-      return models.find(item)
+            providerID: value.model.providerID,
-    }
+            modelID: value.model.modelID,
-
+          })
-    const configured = () => {
+          if (value.variant)
-      const item = agent.current()
+            models.variant.set({ providerID: value.model.providerID, modelID: value.model.modelID }, value.variant)
-      const model = current()
+        },
-      if (!item || !model) return undefined
-      return getConfiguredAgentVariant({
-        agent: { model: item.model, variant: item.variant },
-        model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
-      })
-    }
-
-    const selected = () => scope()?.variant
-
-    const snapshot = () => {
-      const model = current()
-      return {
-        agent: agent.current()?.name,
-        model: model ? { providerID: model.provider.id, modelID: model.id } : undefined,
-        variant: selected(),
-      } satisfies State
-    }
-
-    const write = (next: Partial<State>) => {
-      const state = {
-        ...(scope() ?? { agent: agent.current()?.name }),
-        ...next,
-      } satisfies State
-
-      const session = id()
-      if (session) {
-        setSaved("session", session, state)
-        return
       }
-      setStore("draft", state)
+    })()
-    }
 
-    const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean))
+    const model = (() => {
+      const models = useModels()
 
-    const model = {
+      const [ephemeral, setEphemeral] = createStore<{
-      ready: models.ready,
+        model: Record<string, ModelKey | undefined>
-      current,
+      }>({
-      recent,
+        model: {},
-      list: models.list,
+      })
-      cycle(direction: 1 | -1) {
-        const items = recent()
-        const item = current()
-        if (!item) return
 
-        const index = items.findIndex((entry) => entry?.provider.id === item.provider.id && entry?.id === item.id)
+      const resolveConfigured = () => {
+        if (!sync.data.config.model) return
+        const [providerID, modelID] = sync.data.config.model.split("/")
+        const key = { providerID, modelID }
+        if (isModelValid(key)) return key
+      }
+
+      const resolveRecent = () => {
+        for (const item of models.recent.list()) {
+          if (isModelValid(item)) return item
+        }
+      }
+
+      const resolveDefault = () => {
+        const defaults = providers.default()
+        for (const provider of providers.connected()) {
+          const configured = defaults[provider.id]
+          if (configured) {
+            const key = { providerID: provider.id, modelID: configured }
+            if (isModelValid(key)) return key
+          }
+
+          const first = Object.values(provider.models)[0]
+          if (!first) continue
+          const key = { providerID: provider.id, modelID: first.id }
+          if (isModelValid(key)) return key
+        }
+      }
+
+      const fallbackModel = createMemo<ModelKey | undefined>(() => {
+        return resolveConfigured() ?? resolveRecent() ?? resolveDefault()
+      })
+
+      const current = createMemo(() => {
+        const a = agent.current()
+        if (!a) return undefined
+        const key = getFirstValidModel(
+          () => ephemeral.model[a.name],
+          () => a.model,
+          fallbackModel,
+        )
+        if (!key) return undefined
+        return models.find(key)
+      })
+
+      const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean))
+
+      const cycle = (direction: 1 | -1) => {
+        const recentList = recent()
+        const currentModel = current()
+        if (!currentModel) return
+
+        const index = recentList.findIndex(
+          (x) => x?.provider.id === currentModel.provider.id && x?.id === currentModel.id,
+        )
         if (index === -1) return
 
         let next = index + direction
-        if (next < 0) next = items.length - 1
+        if (next < 0) next = recentList.length - 1
-        if (next >= items.length) next = 0
+        if (next >= recentList.length) next = 0
 
-        const entry = items[next]
+        const val = recentList[next]
-        if (!entry) return
+        if (!val) return
-        model.set({ providerID: entry.provider.id, modelID: entry.id })
+
-      },
+        model.set({
-      set(item: ModelKey | undefined, options?: { recent?: boolean }) {
+          providerID: val.provider.id,
-        batch(() => {
+          modelID: val.id,
-          setStore("last", {
-            type: "model",
-            agent: agent.current()?.name,
-            model: item ?? null,
-            variant: selected(),
-          })
-          write({ model: item })
-          if (!item) return
-          models.setVisibility(item, true)
-          if (!options?.recent) return
-          models.recent.push(item)
         })
-      },
+      }
-      visible(item: ModelKey) {
+
-        return models.visible(item)
+      const set = (model: ModelKey | undefined, options?: { recent?: boolean }) => {
-      },
+        batch(() => {
-      setVisibility(item: ModelKey, visible: boolean) {
+          const currentAgent = agent.current()
-        models.setVisibility(item, visible)
+          const next = model ?? fallbackModel()
-      },
+          if (currentAgent) setEphemeral("model", currentAgent.name, next)
-      variant: {
+          if (model) models.setVisibility(model, true)
-        configured,
+          if (options?.recent && model) models.recent.push(model)
-        selected,
+        })
-        current() {
+      }
-          return resolveModelVariant({
+
-            variants: this.list(),
+      setModel = set
-            selected: this.selected(),
+
-            configured: this.configured(),
+      return {
-          })
+        ready: models.ready,
+        current,
+        recent,
+        list: models.list,
+        cycle,
+        set,
+        visible(model: ModelKey) {
+          return models.visible(model)
         },
-        list() {
+        setVisibility(model: ModelKey, visible: boolean) {
-          const item = current()
+          models.setVisibility(model, visible)
-          if (!item?.variants) return []
-          return Object.keys(item.variants)
         },
-        set(value: string | undefined) {
+        variant: {
-          batch(() => {
+          configured() {
-            const model = current()
+            const a = agent.current()
-            setStore("last", {
+            const m = current()
-              type: "variant",
+            if (!a || !m) return undefined
-              agent: agent.current()?.name,
+            return getConfiguredAgentVariant({
-              model: model ? { providerID: model.provider.id, modelID: model.id } : null,
+              agent: { model: a.model, variant: a.variant },
-              variant: value ?? null,
+              model: { providerID: m.provider.id, modelID: m.id, variants: m.variants },
             })
-            write({ variant: value ?? null })
+          },
-          })
+          selected() {
-        },
+            const m = current()
-        cycle() {
+            if (!m) return undefined
-          const items = this.list()
+            return models.variant.get({ providerID: m.provider.id, modelID: m.id })
-          if (items.length === 0) return
+          },
-          this.set(
+          current() {
-            cycleModelVariant({
+            return resolveModelVariant({
-              variants: items,
+              variants: this.list(),
               selected: this.selected(),
               configured: this.configured(),
-            }),
+            })
-          )
+          },
+          list() {
+            const m = current()
+            if (!m) return []
+            if (!m.variants) return []
+            return Object.keys(m.variants)
+          },
+          set(value: string | undefined) {
+            const m = current()
+            if (!m) return
+            models.variant.set({ providerID: m.provider.id, modelID: m.id }, value)
+          },
+          cycle() {
+            const variants = this.list()
+            if (variants.length === 0) return
+            this.set(
+              cycleModelVariant({
+                variants,
+                selected: this.selected(),
+                configured: this.configured(),
+              }),
+            )
+          },
         },
-      },
+      }
-    }
+    })()
 
     const result = {
       slug: createMemo(() => base64Encode(sdk.directory)),
       model,
       agent,
-      session: {
-        reset() {
-          setStore("draft", undefined)
-        },
-        promote(dir: string, session: string) {
-          const next = clone(snapshot())
-          if (!next) return
-
-          if (dir === sdk.directory) {
-            setSaved("session", session, next)
-            setStore("draft", undefined)
-            return
-          }
-
-          handoff.set(handoffKey(dir, session), next)
-          setStore("draft", undefined)
-        },
-        restore(msg: { sessionID: string; agent: string; model: ModelKey; variant?: string }) {
-          const session = id()
-          if (!session) return
-          if (msg.sessionID !== session) return
-          if (saved.session[session] !== undefined) return
-          if (handoff.has(handoffKey(sdk.directory, session))) return
-
-          setSaved("session", session, {
-            agent: msg.agent,
-            model: msg.model,
-            variant: msg.variant ?? null,
-          })
-        },
-      },
     }
-
-    if (modelEnabled()) {
-      createEffect(() => {
-        const agent = result.agent.current()
-        const model = result.model.current()
-        modelProbe.set({
-          dir: sdk.directory,
-          sessionID: id(),
-          last: store.last,
-          agent: agent?.name,
-          model: model
-            ? {
-                providerID: model.provider.id,
-                modelID: model.id,
-                name: model.name,
-              }
-            : undefined,
-          variant: result.model.variant.current() ?? null,
-          selected: result.model.variant.selected(),
-          configured: result.model.variant.configured(),
-          pick: scope(),
-          base: undefined,
-          current: store.current,
-        })
-      })
-
-      onCleanup(() => modelProbe.clear())
-    }
-
     return result
   },
 })

packages/app/src/context/model-variant.test.ts

@@ -44,16 +44,6 @@ describe("model variant", () => {
     expect(value).toBe("high")
   })
 
-  test("lets an explicit default override the configured variant", () => {
-    const value = resolveModelVariant({
-      variants: ["low", "high", "xhigh"],
-      selected: null,
-      configured: "xhigh",
-    })
-
-    expect(value).toBeUndefined()
-  })
-
   test("cycles from configured variant to next", () => {
     const value = cycleModelVariant({
       variants: ["low", "high", "xhigh"],
@@ -73,14 +63,4 @@ describe("model variant", () => {
 
     expect(value).toBe("low")
   })
-
-  test("cycles from an explicit default to the first variant", () => {
-    const value = cycleModelVariant({
-      variants: ["low", "high", "xhigh"],
-      selected: null,
-      configured: "xhigh",
-    })
-
-    expect(value).toBe("low")
-  })
 })

packages/app/src/context/model-variant.ts

@@ -14,7 +14,7 @@ type Model = AgentModel & {
 
 type VariantInput = {
   variants: string[]
-  selected: string | null | undefined
+  selected: string | undefined
   configured: string | undefined
 }
 
@@ -29,7 +29,6 @@ export function getConfiguredAgentVariant(input: { agent: Agent | undefined; mod
 }
 
 export function resolveModelVariant(input: VariantInput) {
-  if (input.selected === null) return undefined
   if (input.selected && input.variants.includes(input.selected)) return input.selected
   if (input.configured && input.variants.includes(input.configured)) return input.configured
   return undefined
@@ -37,7 +36,6 @@ export function resolveModelVariant(input: VariantInput) {
 
 export function cycleModelVariant(input: VariantInput) {
   if (input.variants.length === 0) return undefined
-  if (input.selected === null) return input.variants[0]
   if (input.selected && input.variants.includes(input.selected)) {
     const index = input.variants.indexOf(input.selected)
     if (index === input.variants.length - 1) return undefined

packages/app/src/context/notification-index.ts

@@ -0,0 +1,66 @@
+type NotificationIndexItem = {
+  directory?: string
+  session?: string
+  viewed: boolean
+  type: string
+}
+
+export function buildNotificationIndex<T extends NotificationIndexItem>(list: T[]) {
+  const sessionAll = new Map<string, T[]>()
+  const sessionUnseen = new Map<string, T[]>()
+  const sessionUnseenCount = new Map<string, number>()
+  const sessionUnseenHasError = new Map<string, boolean>()
+  const projectAll = new Map<string, T[]>()
+  const projectUnseen = new Map<string, T[]>()
+  const projectUnseenCount = new Map<string, number>()
+  const projectUnseenHasError = new Map<string, boolean>()
+
+  for (const notification of list) {
+    const session = notification.session
+    if (session) {
+      const all = sessionAll.get(session)
+      if (all) all.push(notification)
+      else sessionAll.set(session, [notification])
+
+      if (!notification.viewed) {
+        const unseen = sessionUnseen.get(session)
+        if (unseen) unseen.push(notification)
+        else sessionUnseen.set(session, [notification])
+
+        sessionUnseenCount.set(session, (sessionUnseenCount.get(session) ?? 0) + 1)
+        if (notification.type === "error") sessionUnseenHasError.set(session, true)
+      }
+    }
+
+    const directory = notification.directory
+    if (directory) {
+      const all = projectAll.get(directory)
+      if (all) all.push(notification)
+      else projectAll.set(directory, [notification])
+
+      if (!notification.viewed) {
+        const unseen = projectUnseen.get(directory)
+        if (unseen) unseen.push(notification)
+        else projectUnseen.set(directory, [notification])
+
+        projectUnseenCount.set(directory, (projectUnseenCount.get(directory) ?? 0) + 1)
+        if (notification.type === "error") projectUnseenHasError.set(directory, true)
+      }
+    }
+  }
+
+  return {
+    session: {
+      all: sessionAll,
+      unseen: sessionUnseen,
+      unseenCount: sessionUnseenCount,
+      unseenHasError: sessionUnseenHasError,
+    },
+    project: {
+      all: projectAll,
+      unseen: projectUnseen,
+      unseenCount: projectUnseenCount,
+      unseenHasError: projectUnseenHasError,
+    },
+  }
+}

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

@@ -0,0 +1,73 @@
+import { describe, expect, test } from "bun:test"
+import { buildNotificationIndex } from "./notification-index"
+
+type Notification = {
+  type: "turn-complete" | "error"
+  session: string
+  directory: string
+  viewed: boolean
+  time: number
+}
+
+const turn = (session: string, directory: string, viewed = false): Notification => ({
+  type: "turn-complete",
+  session,
+  directory,
+  viewed,
+  time: 1,
+})
+
+const error = (session: string, directory: string, viewed = false): Notification => ({
+  type: "error",
+  session,
+  directory,
+  viewed,
+  time: 1,
+})
+
+describe("buildNotificationIndex", () => {
+  test("builds unseen counts and unseen error flags", () => {
+    const list = [
+      turn("s1", "d1", false),
+      error("s1", "d1", false),
+      turn("s1", "d1", true),
+      turn("s2", "d1", false),
+      error("s3", "d2", true),
+    ]
+
+    const index = buildNotificationIndex(list)
+
+    expect(index.session.all.get("s1")?.length).toBe(3)
+    expect(index.session.unseen.get("s1")?.length).toBe(2)
+    expect(index.session.unseenCount.get("s1")).toBe(2)
+    expect(index.session.unseenHasError.get("s1")).toBe(true)
+
+    expect(index.session.unseenCount.get("s2")).toBe(1)
+    expect(index.session.unseenHasError.get("s2") ?? false).toBe(false)
+    expect(index.session.unseenCount.get("s3") ?? 0).toBe(0)
+    expect(index.session.unseenHasError.get("s3") ?? false).toBe(false)
+
+    expect(index.project.unseenCount.get("d1")).toBe(3)
+    expect(index.project.unseenHasError.get("d1")).toBe(true)
+    expect(index.project.unseenCount.get("d2") ?? 0).toBe(0)
+    expect(index.project.unseenHasError.get("d2") ?? false).toBe(false)
+  })
+
+  test("updates selectors after viewed transitions", () => {
+    const list = [turn("s1", "d1", false), error("s1", "d1", false), turn("s2", "d1", false)]
+    const next = list.map((item) => (item.session === "s1" ? { ...item, viewed: true } : item))
+
+    const before = buildNotificationIndex(list)
+    const after = buildNotificationIndex(next)
+
+    expect(before.session.unseenCount.get("s1")).toBe(2)
+    expect(before.session.unseenHasError.get("s1")).toBe(true)
+    expect(before.project.unseenCount.get("d1")).toBe(3)
+    expect(before.project.unseenHasError.get("d1")).toBe(true)
+
+    expect(after.session.unseenCount.get("s1") ?? 0).toBe(0)
+    expect(after.session.unseenHasError.get("s1") ?? false).toBe(false)
+    expect(after.project.unseenCount.get("d1")).toBe(1)
+    expect(after.project.unseenHasError.get("d1") ?? false).toBe(false)
+  })
+})

packages/app/src/context/platform.tsx

@@ -1,11 +1,10 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 import type { Accessor } from "solid-js"
-import { ServerConnection } from "./server"
 
 type PickerPaths = string | string[] | null
 type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
-type OpenFilePickerOptions = { title?: string; multiple?: boolean; accept?: string[]; extensions?: string[] }
+type OpenFilePickerOptions = { title?: string; multiple?: boolean }
 type SaveFilePickerOptions = { title?: string; defaultPath?: string }
 type UpdateInfo = { updateAvailable: boolean; version?: string }
 
@@ -59,10 +58,10 @@ export type Platform = {
   fetch?: typeof fetch
 
   /** Get the configured default server URL (platform-specific) */
-  getDefaultServer?(): Promise<ServerConnection.Key | null>
+  getDefaultServerUrl?(): Promise<string | null>
 
   /** Set the default server URL to use on app startup (platform-specific) */
-  setDefaultServer?(url: ServerConnection.Key | null): Promise<void> | void
+  setDefaultServerUrl?(url: string | null): Promise<void> | void
 
   /** Get the configured WSL integration (desktop only) */
   getWslEnabled?(): Promise<boolean>

packages/app/src/context/prompt.tsx

@@ -1,10 +1,10 @@
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { checksum } from "@opencode-ai/util/encode"
-import { useParams } from "@solidjs/router"
-import { batch, createMemo, createRoot, getOwner, onCleanup } from "solid-js"
 import { createStore, type SetStoreFunction } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { batch, createMemo, createRoot, onCleanup } from "solid-js"
+import { useParams } from "@solidjs/router"
 import type { FileSelection } from "@/context/file"
 import { Persist, persisted } from "@/utils/persist"
+import { checksum } from "@opencode-ai/util/encode"
 
 interface PartBase {
   content: string
@@ -151,11 +151,6 @@ const MAX_PROMPT_SESSIONS = 20
 
 type PromptSession = ReturnType<typeof createPromptSession>
 
-type Scope = {
-  dir: string
-  id?: string
-}
-
 type PromptCacheEntry = {
   value: PromptSession
   dispose: VoidFunction
@@ -250,7 +245,6 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
       }
     }
 
-    const owner = getOwner()
     const load = (dir: string, id: string | undefined) => {
       const key = `${dir}:${id ?? WORKSPACE_KEY}`
       const existing = cache.get(key)
@@ -260,13 +254,10 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
         return existing.value
       }
 
-      const entry = createRoot(
+      const entry = createRoot((dispose) => ({
-        (dispose) => ({
+        value: createPromptSession(dir, id),
-          value: createPromptSession(dir, id),
+        dispose,
-          dispose,
+      }))
-        }),
-        owner,
-      )
 
       cache.set(key, entry)
       prune()
@@ -274,7 +265,6 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
     }
 
     const session = createMemo(() => load(params.dir!, params.id))
-    const pick = (scope?: Scope) => (scope ? load(scope.dir, scope.id) : session())
 
     return {
       ready: () => session().ready(),
@@ -290,8 +280,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
           session().context.updateComment(path, commentID, next),
         replaceComments: (items: FileContextItem[]) => session().context.replaceComments(items),
       },
-      set: (prompt: Prompt, cursorPosition?: number, scope?: Scope) => pick(scope).set(prompt, cursorPosition),
+      set: (prompt: Prompt, cursorPosition?: number) => session().set(prompt, cursorPosition),
-      reset: (scope?: Scope) => pick(scope).reset(),
+      reset: () => session().reset(),
     }
   },
 })

packages/app/src/context/server.tsx

@@ -1,8 +1,9 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { type Accessor, batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
+import { usePlatform } from "@/context/platform"
 import { Persist, persisted } from "@/utils/persist"
-import { useCheckServerHealth } from "@/utils/server-health"
+import { checkServerHealth } from "@/utils/server-health"
 
 type StoredProject = { worktree: string; expanded: boolean }
 type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
@@ -95,7 +96,7 @@ export namespace ServerConnection {
 export const { use: useServer, provider: ServerProvider } = createSimpleContext({
   name: "Server",
   init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
-    const checkServerHealth = useCheckServerHealth()
+    const platform = usePlatform()
 
     const [store, setStore, _, ready] = persisted(
       Persist.global("server", ["server.v3"]),
@@ -196,7 +197,8 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
 
     const isReady = createMemo(() => ready() && !!state.active)
 
-    const check = (conn: ServerConnection.Any) => checkServerHealth(conn.http).then((x) => x.healthy)
+    const fetcher = platform.fetch ?? globalThis.fetch
+    const check = (conn: ServerConnection.Any) => checkServerHealth(conn.http, fetcher).then((x) => x.healthy)
 
     createEffect(() => {
       const current_ = current()

packages/app/src/context/settings.tsx

@@ -22,7 +22,6 @@ export interface Settings {
   general: {
     autoSave: boolean
     releaseNotes: boolean
-    followup: "queue" | "steer"
     showReasoningSummaries: boolean
     shellToolPartsExpanded: boolean
     editToolPartsExpanded: boolean
@@ -46,7 +45,6 @@ const defaultSettings: Settings = {
   general: {
     autoSave: true,
     releaseNotes: true,
-    followup: "steer",
     showReasoningSummaries: false,
     shellToolPartsExpanded: true,
     editToolPartsExpanded: false,
@@ -128,10 +126,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setReleaseNotes(value: boolean) {
           setStore("general", "releaseNotes", value)
         },
-        followup: withFallback(() => store.general?.followup, defaultSettings.general.followup),
-        setFollowup(value: "queue" | "steer") {
-          setStore("general", "followup", value)
-        },
         showReasoningSummaries: withFallback(
           () => store.general?.showReasoningSummaries,
           defaultSettings.general.showReasoningSummaries,

packages/app/src/context/sync-optimistic.test.ts

@@ -1,8 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
-import { applyOptimisticAdd, applyOptimisticRemove, mergeOptimisticPage } from "./sync"
+import { applyOptimisticAdd, applyOptimisticRemove } from "./sync"
-
-type Text = Extract<Part, { type: "text" }>
 
 const userMessage = (id: string, sessionID: string): Message => ({
   id,
@@ -13,7 +11,7 @@ const userMessage = (id: string, sessionID: string): Message => ({
   model: { providerID: "openai", modelID: "gpt" },
 })
 
-const textPart = (id: string, sessionID: string, messageID: string): Text => ({
+const textPart = (id: string, sessionID: string, messageID: string): Part => ({
   id,
   sessionID,
   messageID,
@@ -55,69 +53,4 @@ describe("sync optimistic reducers", () => {
     expect(draft.part.msg_1).toBeUndefined()
     expect(draft.part.msg_2).toHaveLength(1)
   })
-
-  test("mergeOptimisticPage keeps pending messages in fetched timelines", () => {
-    const sessionID = "ses_1"
-    const page = mergeOptimisticPage(
-      {
-        session: [userMessage("msg_1", sessionID)],
-        part: [{ id: "msg_1", part: [textPart("prt_1", sessionID, "msg_1")] }],
-        complete: true,
-      },
-      [{ message: userMessage("msg_2", sessionID), parts: [textPart("prt_2", sessionID, "msg_2")] }],
-    )
-
-    expect(page.session.map((x) => x.id)).toEqual(["msg_1", "msg_2"])
-    expect(page.part.find((x) => x.id === "msg_2")?.part.map((x) => x.id)).toEqual(["prt_2"])
-    expect(page.confirmed).toEqual([])
-    expect(page.complete).toBe(true)
-  })
-
-  test("mergeOptimisticPage keeps missing optimistic parts until the server has them", () => {
-    const sessionID = "ses_1"
-    const page = mergeOptimisticPage(
-      {
-        session: [userMessage("msg_2", sessionID)],
-        part: [{ id: "msg_2", part: [textPart("prt_2", sessionID, "msg_2")] }],
-        complete: true,
-      },
-      [
-        {
-          message: userMessage("msg_2", sessionID),
-          parts: [textPart("prt_1", sessionID, "msg_2"), textPart("prt_2", sessionID, "msg_2")],
-        },
-      ],
-    )
-
-    expect(page.part.find((x) => x.id === "msg_2")?.part.map((x) => x.id)).toEqual(["prt_1", "prt_2"])
-    expect(page.confirmed).toEqual([])
-  })
-
-  test("mergeOptimisticPage confirms echoed messages once all parts arrive", () => {
-    const sessionID = "ses_1"
-    const page = mergeOptimisticPage(
-      {
-        session: [userMessage("msg_2", sessionID)],
-        part: [
-          {
-            id: "msg_2",
-            part: [{ ...textPart("prt_1", sessionID, "msg_2"), text: "server" }, textPart("prt_2", sessionID, "msg_2")],
-          },
-        ],
-        complete: true,
-      },
-      [
-        {
-          message: userMessage("msg_2", sessionID),
-          parts: [textPart("prt_1", sessionID, "msg_2"), textPart("prt_2", sessionID, "msg_2")],
-        },
-      ],
-    )
-
-    expect(page.confirmed).toEqual(["msg_2"])
-    expect(page.part.find((x) => x.id === "msg_2")?.part).toMatchObject([
-      { id: "prt_1", type: "text", text: "server" },
-      { id: "prt_2", type: "text", text: "prt_2" },
-    ])
-  })
 })

packages/app/src/context/sync.tsx

@@ -3,12 +3,6 @@ import { createStore, produce, reconcile } from "solid-js/store"
 import { Binary } from "@opencode-ai/util/binary"
 import { retry } from "@opencode-ai/util/retry"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import {
-  clearSessionPrefetch,
-  getSessionPrefetch,
-  getSessionPrefetchPromise,
-  setSessionPrefetch,
-} from "./global-sync/session-prefetch"
 import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
@@ -32,12 +26,6 @@ const keyFor = (directory: string, id: string) => `${directory}\n${id}`
 
 const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
 
-function merge<T extends { id: string }>(a: readonly T[], b: readonly T[]) {
-  const map = new Map(a.map((item) => [item.id, item] as const))
-  for (const item of b) map.set(item.id, item)
-  return [...map.values()].sort((x, y) => cmp(x.id, y.id))
-}
-
 type OptimisticStore = {
   message: Record<string, Message[] | undefined>
   part: Record<string, Part[] | undefined>
@@ -54,67 +42,6 @@ type OptimisticRemoveInput = {
   messageID: string
 }
 
-type OptimisticItem = {
-  message: Message
-  parts: Part[]
-}
-
-type MessagePage = {
-  session: Message[]
-  part: { id: string; part: Part[] }[]
-  cursor?: string
-  complete: boolean
-}
-
-const hasParts = (parts: Part[] | undefined, want: Part[]) => {
-  if (!parts) return want.length === 0
-  return want.every((part) => Binary.search(parts, part.id, (item) => item.id).found)
-}
-
-const mergeParts = (parts: Part[] | undefined, want: Part[]) => {
-  if (!parts) return sortParts(want)
-  const next = [...parts]
-  let changed = false
-  for (const part of want) {
-    const result = Binary.search(next, part.id, (item) => item.id)
-    if (result.found) continue
-    next.splice(result.index, 0, part)
-    changed = true
-  }
-  if (!changed) return parts
-  return next
-}
-
-export function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[]) {
-  if (items.length === 0) return { ...page, confirmed: [] as string[] }
-
-  const session = [...page.session]
-  const part = new Map(page.part.map((item) => [item.id, sortParts(item.part)]))
-  const confirmed: string[] = []
-
-  for (const item of items) {
-    const result = Binary.search(session, item.message.id, (message) => message.id)
-    const found = result.found
-    if (!found) session.splice(result.index, 0, item.message)
-
-    const current = part.get(item.message.id)
-    if (found && hasParts(current, item.parts)) {
-      confirmed.push(item.message.id)
-      continue
-    }
-
-    part.set(item.message.id, mergeParts(current, item.parts))
-  }
-
-  return {
-    cursor: page.cursor,
-    complete: page.complete,
-    session,
-    part: [...part.entries()].sort((a, b) => cmp(a[0], b[0])).map(([id, part]) => ({ id, part })),
-    confirmed,
-  }
-}
-
 export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddInput) {
   const messages = draft.message[input.sessionID]
   if (messages) {
@@ -182,12 +109,10 @@ 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 optimistic = new Map<string, Map<string, OptimisticItem>>()
     const maxDirs = 30
     const seen = new Map<string, Set<string>>()
     const [meta, setMeta] = createStore({
       limit: {} as Record<string, number>,
-      cursor: {} as Record<string, string | undefined>,
       complete: {} as Record<string, boolean>,
       loading: {} as Record<string, boolean>,
     })
@@ -199,33 +124,6 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       return undefined
     }
 
-    const setOptimistic = (directory: string, sessionID: string, item: OptimisticItem) => {
-      const key = keyFor(directory, sessionID)
-      const list = optimistic.get(key)
-      if (list) {
-        list.set(item.message.id, { message: item.message, parts: sortParts(item.parts) })
-        return
-      }
-      optimistic.set(key, new Map([[item.message.id, { message: item.message, parts: sortParts(item.parts) }]]))
-    }
-
-    const clearOptimistic = (directory: string, sessionID: string, messageID?: string) => {
-      const key = keyFor(directory, sessionID)
-      if (!messageID) {
-        optimistic.delete(key)
-        return
-      }
-
-      const list = optimistic.get(key)
-      if (!list) return
-      list.delete(messageID)
-      if (list.size === 0) optimistic.delete(key)
-    }
-
-    const getOptimistic = (directory: string, sessionID: string) => [
-      ...(optimistic.get(keyFor(directory, sessionID))?.values() ?? []),
-    ]
-
     const seenFor = (directory: string) => {
       const existing = seen.get(directory)
       if (existing) {
@@ -248,15 +146,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
 
     const clearMeta = (directory: string, sessionIDs: string[]) => {
       if (sessionIDs.length === 0) return
-      for (const sessionID of sessionIDs) {
-        clearOptimistic(directory, sessionID)
-      }
       setMeta(
         produce((draft) => {
           for (const sessionID of sessionIDs) {
             const key = keyFor(directory, sessionID)
             delete draft.limit[key]
-            delete draft.cursor[key]
             delete draft.complete[key]
             delete draft.loading[key]
           }
@@ -266,7 +160,6 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
 
     const evict = (directory: string, setStore: Setter, sessionIDs: string[]) => {
       if (sessionIDs.length === 0) return
-      clearSessionPrefetch(directory, sessionIDs)
       for (const sessionID of sessionIDs) {
         globalSync.todo.set(sessionID, undefined)
       }
@@ -287,24 +180,17 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       evict(directory, setStore, stale)
     }
 
-    const fetchMessages = async (input: {
+    const fetchMessages = async (input: { client: typeof sdk.client; sessionID: string; limit: number }) => {
-      client: typeof sdk.client
-      sessionID: string
-      limit: number
-      before?: string
-    }) => {
       const messages = await retry(() =>
-        input.client.session.messages({ sessionID: input.sessionID, limit: input.limit, before: input.before }),
+        input.client.session.messages({ sessionID: input.sessionID, limit: input.limit }),
       )
       const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
       const session = items.map((x) => x.info).sort((a, b) => cmp(a.id, b.id))
       const part = items.map((message) => ({ id: message.info.id, part: sortParts(message.parts) }))
-      const cursor = messages.response.headers.get("x-next-cursor") ?? undefined
       return {
         session,
         part,
-        cursor,
+        complete: session.length < input.limit,
-        complete: !cursor,
       }
     }
 
@@ -316,50 +202,26 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       setStore: Setter
       sessionID: string
       limit: number
-      before?: string
-      mode?: "replace" | "prepend"
     }) => {
       const key = keyFor(input.directory, input.sessionID)
       if (meta.loading[key]) return
 
       setMeta("loading", key, true)
       await fetchMessages(input)
-        .then((page) => {
+        .then((next) => {
           if (!tracked(input.directory, input.sessionID)) return
-          const next = mergeOptimisticPage(page, getOptimistic(input.directory, input.sessionID))
-          for (const messageID of next.confirmed) {
-            clearOptimistic(input.directory, input.sessionID, messageID)
-          }
-          const [store] = globalSync.child(input.directory, { bootstrap: false })
-          const cached = input.mode === "prepend" ? (store.message[input.sessionID] ?? []) : []
-          const message = input.mode === "prepend" ? merge(cached, next.session) : next.session
           batch(() => {
-            input.setStore("message", input.sessionID, reconcile(message, { key: "id" }))
+            input.setStore("message", input.sessionID, reconcile(next.session, { key: "id" }))
             for (const p of next.part) {
               input.setStore("part", p.id, p.part)
             }
-            setMeta("limit", key, message.length)
+            setMeta("limit", key, input.limit)
-            setMeta("cursor", key, next.cursor)
             setMeta("complete", key, next.complete)
-            setSessionPrefetch({
-              directory: input.directory,
-              sessionID: input.sessionID,
-              limit: message.length,
-              cursor: next.cursor,
-              complete: next.complete,
-            })
           })
         })
         .finally(() => {
-          setMeta(
+          if (!tracked(input.directory, input.sessionID)) return
-            produce((draft) => {
+          setMeta("loading", key, false)
-              if (!tracked(input.directory, input.sessionID)) {
-                delete draft.loading[key]
-                return
-              }
-              draft.loading[key] = false
-            }),
-          )
         })
     }
 
@@ -386,15 +248,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         get: getSession,
         optimistic: {
           add(input: { directory?: string; sessionID: string; message: Message; parts: Part[] }) {
-            const directory = input.directory ?? sdk.directory
             const [, setStore] = target(input.directory)
-            setOptimistic(directory, input.sessionID, { message: input.message, parts: input.parts })
             setOptimisticAdd(setStore as (...args: unknown[]) => void, input)
           },
           remove(input: { directory?: string; sessionID: string; messageID: string }) {
-            const directory = input.directory ?? sdk.directory
             const [, setStore] = target(input.directory)
-            clearOptimistic(directory, input.sessionID, input.messageID)
             setOptimisticRemove(setStore as (...args: unknown[]) => void, input)
           },
         },
@@ -416,91 +274,60 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             variant: input.variant,
           }
           const [, setStore] = target()
-          setOptimistic(sdk.directory, input.sessionID, { message, parts: input.parts })
           setOptimisticAdd(setStore as (...args: unknown[]) => void, {
             sessionID: input.sessionID,
             message,
             parts: input.parts,
           })
         },
-        async sync(sessionID: string, opts?: { force?: boolean }) {
+        async sync(sessionID: string) {
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
           const key = keyFor(directory, sessionID)
+          const hasSession = Binary.search(store.session, sessionID, (s) => s.id).found
 
           touch(directory, setStore, sessionID)
 
-          const seeded = getSessionPrefetch(directory, sessionID)
+          if (store.message[sessionID] !== undefined && hasSession && meta.limit[key] !== undefined) return
-          if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
-            batch(() => {
-              setMeta("limit", key, seeded.limit)
-              setMeta("cursor", key, seeded.cursor)
-              setMeta("complete", key, seeded.complete)
-              setMeta("loading", key, false)
-            })
-          }
 
-          return runInflight(inflight, key, async () => {
+          const limit = meta.limit[key] ?? messagePageSize
-            const pending = getSessionPrefetchPromise(directory, sessionID)
-            if (pending) {
-              await pending
-              const seeded = getSessionPrefetch(directory, sessionID)
-              if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
-                batch(() => {
-                  setMeta("limit", key, seeded.limit)
-                  setMeta("cursor", key, seeded.cursor)
-                  setMeta("complete", key, seeded.complete)
-                  setMeta("loading", key, false)
-                })
-              }
-            }
 
-            const hasSession = Binary.search(store.session, sessionID, (s) => s.id).found
+          const sessionReq = hasSession
-            const cached = store.message[sessionID] !== undefined && meta.limit[key] !== undefined
+            ? Promise.resolve()
-            if (cached && hasSession && !opts?.force) return
+            : retry(() => client.session.get({ sessionID })).then((session) => {
+                if (!tracked(directory, sessionID)) return
+                const data = session.data
+                if (!data) return
+                setStore(
+                  "session",
+                  produce((draft) => {
+                    const match = Binary.search(draft, sessionID, (s) => s.id)
+                    if (match.found) {
+                      draft[match.index] = data
+                      return
+                    }
+                    draft.splice(match.index, 0, data)
+                  }),
+                )
+              })
 
-            const limit = meta.limit[key] ?? messagePageSize
+          const messagesReq = loadMessages({
-            const sessionReq =
+            directory,
-              hasSession && !opts?.force
+            client,
-                ? Promise.resolve()
+            setStore,
-                : retry(() => client.session.get({ sessionID })).then((session) => {
+            sessionID,
-                    if (!tracked(directory, sessionID)) return
+            limit,
-                    const data = session.data
-                    if (!data) return
-                    setStore(
-                      "session",
-                      produce((draft) => {
-                        const match = Binary.search(draft, sessionID, (s) => s.id)
-                        if (match.found) {
-                          draft[match.index] = data
-                          return
-                        }
-                        draft.splice(match.index, 0, data)
-                      }),
-                    )
-                  })
-
-            const messagesReq =
-              cached && !opts?.force
-                ? Promise.resolve()
-                : loadMessages({
-                    directory,
-                    client,
-                    setStore,
-                    sessionID,
-                    limit,
-                  })
-
-            await Promise.all([sessionReq, messagesReq])
           })
+
+          return runInflight(inflight, key, () => Promise.all([sessionReq, messagesReq]).then(() => {}))
         },
-        async diff(sessionID: string, opts?: { force?: boolean }) {
+        async diff(sessionID: string) {
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
           touch(directory, setStore, sessionID)
-          if (store.session_diff[sessionID] !== undefined && !opts?.force) return
+          if (store.session_diff[sessionID] !== undefined) return
 
           const key = keyFor(directory, sessionID)
           return runInflight(inflightDiff, key, () =>
@@ -510,7 +337,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             }),
           )
         },
-        async todo(sessionID: string, opts?: { force?: boolean }) {
+        async todo(sessionID: string) {
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
@@ -521,7 +348,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             if (cached === undefined) {
               globalSync.todo.set(sessionID, existing)
             }
-            if (!opts?.force) return
+            return
           }
 
           if (cached !== undefined) {
@@ -545,7 +372,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             if (store.message[sessionID] === undefined) return false
             if (meta.limit[key] === undefined) return false
             if (meta.complete[key]) return false
-            return !!meta.cursor[key]
+            return true
           },
           loading(sessionID: string) {
             const key = keyFor(sdk.directory, sessionID)
@@ -560,17 +387,14 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             const step = count ?? messagePageSize
             if (meta.loading[key]) return
             if (meta.complete[key]) return
-            const before = meta.cursor[key]
-            if (!before) return
 
+            const currentLimit = meta.limit[key] ?? messagePageSize
             await loadMessages({
               directory,
               client,
               setStore,
               sessionID,
-              limit: step,
+              limit: currentLimit + step,
-              before,
-              mode: "prepend",
             })
           },
         },