chore: update nix node_modules hashes

Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-uduwrM143NDSc+tXsi4lVVfoMll2a3BDHRUjuO7GB68=",
-    "aarch64-linux": "sha256-6DUda78XdXY6DP86lIUkweSjys3iG4Y4mo1PiaNuXbg=",
-    "aarch64-darwin": "sha256-AkJwfLULLZVwwz+XU1QcFUZoIS7oVPCn+n/MXEaxrqE=",
-    "x86_64-darwin": "sha256-hAxKGdiITTxQ2uujQt6prNjo3NxGAMMeo+9HlMWK6GU="
+    "x86_64-linux": "sha256-0LlgjOloiMPsRU+uecNoRsWtBP52WXZxFtY6ZAGFJ8Q=",
+    "aarch64-linux": "sha256-BGGCkt8XhWzM8iWRRAUhu5rmN42tMjz+XdEVUNItuaw=",
+    "aarch64-darwin": "sha256-XtKSsen/yCUd72O+pGm46CMKN1mHhJFDhjN1CJtkk9Y=",
+    "x86_64-darwin": "sha256-edd3TfPzEhfHOaYjhMP4D87uqf9zA1Icg9mk8qdkC54="
   }
 }

packages/app/AGENTS.md

@@ -22,12 +22,18 @@
 ## Localization
 
 - NEVER hardcode user-visible English strings in production code. ALWAYS use an i18n key for visible copy, placeholders, accessible labels, tooltips, menus, dialogs, toasts, empty states, and displayed errors.
+- Feature work adds English source strings only. Leave non-English keys absent so the runtime English fallback applies; translations land separately after language review.
+- Render count-sensitive copy only through `language.plural(baseKey, count, params)`. Never select or pass `.zero`, `.one`, `.two`, `.few`, `.many`, or `.other` variants to `language.t(...)`.
 - When migrating existing copy to i18n, preserve the English text byte-for-byte unless the task explicitly requests a copy change.
 - NEVER change existing English text or English keys to facilitate translation. English is intentional, designer-written source copy; adapt locale-specific translations and i18n mechanics around it.
 - Keep locale complexity behind the shared typed i18n APIs. Feature and component code should use `language.t(...)` for ordinary copy and `language.plural(baseKey, count, params)` for count-sensitive copy. It must not inspect the locale, call `Intl.PluralRules`, construct or select plural-category keys such as `.one` or `.other`, or branch on locale-specific grammar.
 - Prefer complete translated phrases. Do not concatenate grammatical fragments or make call sites assemble sentences. Keep placeholders to irreducible dynamic values such as names, paths, and counts.
 - If a translation cannot be expressed by the current API, deepen the shared language/UI i18n module so one typed call owns locale selection, plural resolution, fallback, and interpolation. Do not leak that machinery into product code.
 - Do not translate from model knowledge alone. Verify terminology and grammar with Unicode CLDR locale/plural data, Microsoft Localization Style Guides and terminology, Apple localization/style guidance and localized platform UI, Mozilla localization style guides, Mozilla Pontoon, and the Firefox localization corpus at `github.com/mozilla-l10n/firefox-l10n`.
+- For developer-facing terminology, prefer the words already used by the target language's developer community over literal dictionary translations. Cross-check maintained localized developer products such as Firefox, KDE, and VS Code; use at least two independent corpora when they are available. If established practice keeps an English loanword or acronym, keep it rather than inventing a translation.
+- Translate complete UI phrases in context. A glossary hit is evidence, not permission to translate word-by-word. Check terse labels such as session, prompt, agent, model, fork, shell, terminal, workspace, and worktree in the same grammatical role before choosing a term.
+- Before a locale is ready, audit recurring concepts for one consistent translation and review every value that still equals English. Classify retained English as a product name, provider/tool name, URL, code token, keyboard legend, acronym, asset name, or established borrowing; translate unexplained leftovers.
+- In translation review notes, name the corpora used and call out uncertain or region-specific terminology so native speakers can focus review where it matters.
 - Also use the relevant language authority or official dictionary for the locale (for example RAE/Fundéu, FranceTerme, Duden, TDK, Kotus/Kielitoimiston sanakirja, Språkrådet/Bokmålsordboka, Rada Języka Polskiego/PWN, the Russian and Arabic language academies, the Ukrainian Orthography, Taiwan MOE dictionaries, or the Royal Society of Thailand). Treat the English dictionary as the semantic source of truth and preserve placeholders, code identifiers, product names, and keyboard labels.
 
 ## Tool Calling

packages/app/e2e/performance/README.md

@@ -56,6 +56,32 @@ Benchmarks do not assert machine-dependent performance budgets. Streaming proces
 
 Committed smoke and regression tests continue to own correctness coverage for pagination, tab paint, context resize, collapse state, and composer spacing.
 
+## Desktop profiler
+
+The desktop profiler launches the existing production build directly, creates isolated desktop state, chooses an available CDP port, and writes reports under the OS temporary directory by default.
+
+```sh
+bun run profile:desktop --help
+```
+
+Create a private partial snapshot from the default local database and run Home once:
+
+```sh
+bun run profile:desktop --partial-snapshot-out /tmp/opencode-perf.db \
+  --window-end 2026-08-04T06:14:26.878Z \
+  --scenarios home,calibration --skip-build
+```
+
+Repeat against the immutable partial snapshot:
+
+```sh
+bun run profile:desktop --mode partial-snapshot --db /tmp/opencode-perf.db \
+  --window-end 2026-08-04T06:14:26.878Z \
+  --scenarios home,calibration --runs 3 --skip-build
+```
+
+Partial snapshots contain private application data and must not be committed or shared. The profiler copies each partial snapshot to a per-run working database and remaps selected project paths to temporary workspaces, leaving the source snapshot unchanged. `PROFILE_SUMMARY` is the compact comparison output; `PROFILE_REPORT` points to the complete JSON report with the database hash, invocation parameters, raw runs, and attribution data.
+
 ## Chrome traces
 
 Set `OPENCODE_PERFORMANCE_TRACE_DIR` to emit a standard Chrome DevTools trace for every benchmark page automatically:

packages/app/e2e/performance/desktop-profile/corpus.ts

@@ -0,0 +1,137 @@
+import { Database } from "bun:sqlite"
+import { mkdir, rm } from "node:fs/promises"
+import path from "node:path"
+import { progress } from "./progress"
+import type { Options, Target } from "./types"
+
+export async function createPartialSnapshot(source: string, destination: string, options: Options, targets: Target[]) {
+  await mkdir(path.dirname(destination), { recursive: true })
+  await rm(destination, { force: true })
+  const input = new Database(source, { readonly: true })
+  const schema = input
+    .query(
+      `SELECT type, name, sql FROM sqlite_schema
+       WHERE sql IS NOT NULL AND name NOT LIKE 'sqlite_%'
+       ORDER BY CASE type WHEN 'table' THEN 0 WHEN 'index' THEN 1 ELSE 2 END, name`,
+    )
+    .all() as { type: string; name: string; sql: string }[]
+  input.close()
+
+  const output = new Database(destination, { create: true })
+  output.run("PRAGMA foreign_keys = OFF")
+  schema.filter((item) => item.type === "table").forEach((item) => output.run(item.sql))
+  output.run("ATTACH DATABASE ? AS source", source)
+  const selected = [...new Set(targets.map((target) => target.id))]
+  const placeholders = selected.map(() => "?").join(",")
+
+  for (const table of schema.filter((item) => item.type === "table").map((item) => item.name)) {
+    progress("copying partial snapshot table", { table })
+    if (table === "event") continue
+    if (table === "message") {
+      output.run(
+        `INSERT INTO main.message SELECT * FROM source.message
+         WHERE (time_created >= ? AND time_created < ? AND session_id IN (
+           SELECT id FROM source.session WHERE parent_id IS NULL
+         )) OR session_id IN (${placeholders})`,
+        options.windowStart,
+        options.windowEnd,
+        ...selected,
+      )
+      continue
+    }
+    if (table === "part") {
+      output.run("INSERT INTO main.part SELECT * FROM source.part WHERE message_id IN (SELECT id FROM main.message)")
+      continue
+    }
+    if (["session_context_epoch", "session_input", "session_message", "session_share", "todo"].includes(table)) {
+      output.run(
+        `INSERT INTO main."${table}" SELECT * FROM source."${table}" WHERE session_id IN (${placeholders})`,
+        ...selected,
+      )
+      continue
+    }
+    output.run(`INSERT INTO main."${table}" SELECT * FROM source."${table}"`)
+  }
+  output.run("DETACH DATABASE source")
+  schema.filter((item) => item.type !== "table").forEach((item) => output.run(item.sql))
+  output.close()
+}
+
+export async function fingerprint(file: string) {
+  const input = Bun.file(file)
+  const hasher = new Bun.CryptoHasher("sha256")
+  for await (const chunk of input.stream()) hasher.update(chunk)
+  return { bytes: input.size, sha256: hasher.digest("hex") }
+}
+
+export function loadCorpus(options: Options) {
+  const database = new Database(options.database, { readonly: true })
+  database.run("PRAGMA query_only = ON")
+  const sessions = database
+    .query(
+      `SELECT id, project_id AS projectID, directory, title
+       FROM session AS candidate
+       WHERE parent_id IS NULL
+         AND EXISTS (
+           SELECT 1 FROM message
+           WHERE session_id = candidate.id AND time_created >= ? AND time_created < ?
+         )`,
+    )
+    .all(options.windowStart, options.windowEnd) as { id: string; projectID: string; directory: string; title: string }[]
+  const messageRows = database.query(
+    `SELECT id, data FROM message
+     WHERE session_id = ? AND time_created >= ? AND time_created < ?
+     ORDER BY time_created, id`,
+  )
+  const partRows = database.query(`SELECT data FROM part WHERE message_id = ? ORDER BY id`)
+  const ranked = sessions
+    .map((session) => {
+      const messages = messageRows.all(session.id, options.windowStart, options.windowEnd) as {
+        id: string
+        data: string
+      }[]
+      const parts = messages.flatMap((message) => partRows.all(message.id) as { data: string }[])
+      return {
+        ...session,
+        bytes:
+          messages.reduce((sum, message) => sum + Buffer.byteLength(message.data), 0) +
+          parts.reduce((sum, part) => sum + Buffer.byteLength(part.data), 0),
+        messages: messages.length,
+        parts: parts.length,
+        userTurns: messages.filter((message) => JSON.parse(message.data).role === "user").length,
+      }
+    })
+    .filter((session) => session.messages > 0)
+    .sort((a, b) => a.bytes - b.bytes || a.id.localeCompare(b.id))
+  if (ranked.length === 0) throw new Error("No sessions found in the profile window")
+  const select = (label: Target["label"], percentile: number) => ({
+    label,
+    ...ranked[Math.max(0, Math.ceil(ranked.length * percentile) - 1)]!,
+  })
+  const targets = [select("p50", 0.5), select("p95", 0.95), select("max", 1)] satisfies Target[]
+  const typingText = loadTypingText(database, partRows, messageRows, targets[2]!, options)
+  const projectIDs = [...new Set(ranked.map((session) => session.projectID))]
+  database.close()
+  return { targets, typingText, projectIDs }
+}
+
+function loadTypingText(
+  database: Database,
+  partRows: ReturnType<Database["query"]>,
+  messageRows: ReturnType<Database["query"]>,
+  target: Target,
+  options: Options,
+) {
+  const messages = messageRows.all(target.id, options.windowStart, options.windowEnd) as { id: string; data: string }[]
+  const text = messages
+    .filter((message) => JSON.parse(message.data).role === "user")
+    .flatMap((message) =>
+      (partRows.all(message.id) as { data: string }[]).flatMap((part) => {
+        const data = JSON.parse(part.data)
+        return data.type === "text" && typeof data.text === "string" ? [data.text] : []
+      }),
+    )
+    .sort((a, b) => b.length - a.length)[0]
+  if (!text) throw new Error("No real user prompt found for composer profiling")
+  return text
+}

packages/app/e2e/performance/desktop-profile/desktop-state.ts

@@ -0,0 +1,116 @@
+import { Database } from "bun:sqlite"
+import { mkdir } from "node:fs/promises"
+import path from "node:path"
+import type { Options } from "./types"
+
+export async function prepareDesktopState(
+  options: Options,
+  databasePath: string,
+  userData: string,
+  run: number,
+  projectIDs: string[],
+) {
+  const database = new Database(databasePath)
+  const projects = database.query("SELECT id, worktree, sandboxes FROM project ORDER BY id").all() as {
+    id: string
+    worktree: string
+    sandboxes: string
+  }[]
+  const selected = new Set(projectIDs)
+  const profileProjects = projects.filter((project) => selected.has(project.id))
+  const worktrees =
+    options.mode === "partial-snapshot"
+      ? await remapDirectories(database, profileProjects, path.join(options.output, "workspaces", String(run)))
+      : profileProjects.map((project) => project.worktree)
+  database.close()
+
+  await Bun.write(
+    path.join(userData, "opencode.settings"),
+    JSON.stringify({ firstLaunchOnboardingComplete: true, oldLayoutEligible: true, tauriMigrated: true }),
+  )
+  await Bun.write(
+    path.join(userData, "opencode.global.dat"),
+    JSON.stringify({
+      server: JSON.stringify({
+        list: [],
+        projects: { local: worktrees.map((worktree) => ({ worktree, expanded: true })) },
+        lastProject: worktrees[0] ? { local: worktrees[0] } : {},
+        recentlyClosed: {},
+      }),
+    }),
+  )
+}
+
+async function remapDirectories(
+  database: Database,
+  projects: { id: string; worktree: string; sandboxes: string }[],
+  root: string,
+) {
+  await mkdir(root, { recursive: true })
+  const mappings = new Map<string, string>()
+  const worktrees = await Promise.all(
+    projects.map(async (project, index) => {
+      const worktree = path.join(root, `project-${String(index + 1).padStart(3, "0")}`)
+      await mkdir(worktree, { recursive: true })
+      mappings.set(project.worktree, worktree)
+      const sandboxes = JSON.parse(project.sandboxes) as string[]
+      const nextSandboxes = await Promise.all(
+        sandboxes.map(async (sandbox, sandboxIndex) => {
+          const next = path.join(worktree, `sandbox-${sandboxIndex + 1}`)
+          await mkdir(next, { recursive: true })
+          mappings.set(sandbox, next)
+          return next
+        }),
+      )
+      database.run("UPDATE project SET worktree = ?, sandboxes = ? WHERE id = ?", worktree, JSON.stringify(nextSandboxes), project.id)
+      return worktree
+    }),
+  )
+  const byProject = new Map(projects.map((project, index) => [project.id, worktrees[index]!]))
+  const sessions = database.query("SELECT id, project_id, directory FROM session").all() as {
+    id: string
+    project_id: string
+    directory: string
+  }[]
+  const directories = database.query("SELECT * FROM project_directory").all() as {
+    project_id: string
+    directory: string
+    type: string | null
+    strategy: string | null
+    time_created: number
+  }[]
+  const selected = new Set(projects.map((project) => project.id))
+  const nextDirectories = await Promise.all(
+    directories.filter((item) => selected.has(item.project_id)).map(async (item, index) => {
+      const directory =
+        mappings.get(item.directory) ?? path.join(byProject.get(item.project_id) ?? root, `directory-${index + 1}`)
+      await mkdir(directory, { recursive: true })
+      return { ...item, directory }
+    }),
+  )
+  database.transaction(() => {
+    sessions.filter((session) => selected.has(session.project_id)).forEach((session) =>
+      database.run(
+        "UPDATE session SET directory = ? WHERE id = ?",
+        mappings.get(session.directory) ?? byProject.get(session.project_id) ?? worktrees[0]!,
+        session.id,
+      ),
+    )
+    database.run(
+      `DELETE FROM project_directory WHERE project_id IN (${projects.map(() => "?").join(",")})`,
+      ...projects.map((project) => project.id),
+    )
+    nextDirectories.forEach((item) =>
+      database.run(
+        `INSERT INTO project_directory (project_id, directory, type, strategy, time_created)
+         VALUES (?, ?, ?, ?, ?)`,
+        item.project_id,
+        item.directory,
+        item.type,
+        item.strategy,
+        item.time_created,
+      ),
+    )
+  })()
+  return worktrees
+}

packages/app/e2e/performance/desktop-profile/options.test.ts

@@ -0,0 +1,54 @@
+import { Database } from "bun:sqlite"
+import { afterAll, expect, test } from "bun:test"
+import { mkdir, rm } from "node:fs/promises"
+import path from "node:path"
+import { createPartialSnapshot, fingerprint } from "./corpus"
+import { parseOptions } from "./options"
+
+const directory = path.join(import.meta.dir, `.tmp-${process.pid}`)
+const source = path.join(directory, "source.db")
+const partialSnapshot = path.join(directory, "partial-snapshot.db")
+await mkdir(directory, { recursive: true })
+const database = new Database(source, { create: true })
+database.run("CREATE TABLE sample (value TEXT NOT NULL)")
+database.run("INSERT INTO sample VALUES ('repeatable')")
+database.close()
+
+afterAll(() => rm(directory, { recursive: true, force: true }))
+
+test("parses a portable fixed-window partial snapshot invocation", () => {
+  const options = parseOptions([
+    "--mode",
+    "partial-snapshot",
+    "--db",
+    source,
+    "--window-end",
+    "2026-08-04T06:14:26.878Z",
+    "--window-hours",
+    "24",
+    "--scenarios",
+    "home,calibration",
+    "--runs",
+    "3",
+    "--skip-build",
+  ])!
+
+  expect(options.database).toBe(source)
+  expect(options.windowEnd).toBe(1_785_824_066_878)
+  expect(options.windowStart).toBe(1_785_737_666_878)
+  expect(options.scenarios).toEqual(["home", "calibration"])
+  expect(options.runs).toBe(3)
+  expect(options.build).toBe(false)
+})
+
+test("creates a consistent private partial database snapshot", async () => {
+  const options = parseOptions(["--db", source, "--window-end", "2026-08-04T06:14:26.878Z"])!
+  await createPartialSnapshot(source, partialSnapshot, options, [])
+  const copy = new Database(partialSnapshot, { readonly: true })
+  expect(copy.query("SELECT value FROM sample").get()).toEqual({ value: "repeatable" })
+  copy.close()
+  expect(await fingerprint(partialSnapshot)).toEqual({
+    bytes: expect.any(Number),
+    sha256: expect.stringMatching(/^[a-f0-9]{64}$/),
+  })
+})

packages/app/e2e/performance/desktop-profile/options.ts

@@ -0,0 +1,88 @@
+import { Global } from "@opencode-ai/core/global"
+import { existsSync } from "node:fs"
+import { tmpdir } from "node:os"
+import path from "node:path"
+import { scenarios, type Options, type Scenario } from "./types"
+
+const help = `Desktop renderer profiler
+
+Usage:
+  bun run profile:desktop [options]
+
+Options:
+  --mode local|partial-snapshot
+                                Local corpus or fixed partial snapshot (default: local)
+  --db <path>                  SQLite database (default: opencode data directory)
+  --partial-snapshot-out <path>
+                                Copy the benchmark corpus to a private partial snapshot
+  --output <directory>         Report directory (default: OS temp directory)
+  --window-end <ISO|epoch>     End of corpus window (default: now; required for partial snapshot)
+  --window-hours <hours>       Corpus window size (default: 24)
+  --scenarios <names>          Comma list: ${scenarios.join(",")} (default: all)
+  --runs <count>               Restart Electron and repeat (default: 1)
+  --skip-build                 Use the existing desktop production build
+  --diagnostics                Capture Chrome traces
+  --cpu                        Capture sampled CPU summaries
+  --response-urls              Attribute Response.text durations by URL
+  --help                       Show this message
+
+Partial snapshots contain private application data. Do not commit or share them.
+`
+
+export function parseOptions(args: string[], now = Date.now()): Options | undefined {
+  if (args.includes("--help")) {
+    console.log(help)
+    return
+  }
+
+  const value = (name: string) => {
+    const index = args.indexOf(name)
+    if (index === -1) return
+    const result = args[index + 1]
+    if (!result || result.startsWith("--")) throw new Error(`${name} requires a value`)
+    return result
+  }
+  const mode = value("--mode") ?? "local"
+  if (mode !== "local" && mode !== "partial-snapshot") throw new Error(`Unsupported mode: ${mode}`)
+  const endValue = value("--window-end")
+  if (mode === "partial-snapshot" && !endValue)
+    throw new Error("--window-end is required in partial-snapshot mode")
+  const windowEnd = endValue ? parseTime(endValue) : now
+  const windowHours = number(value("--window-hours") ?? "24", "--window-hours")
+  const selected = (value("--scenarios")?.split(",") ?? [...scenarios]).map((item) => item.trim())
+  if (selected.some((item) => !scenarios.includes(item as Scenario)))
+    throw new Error(`--scenarios must contain only: ${scenarios.join(", ")}`)
+  const database = path.resolve(value("--db") ?? path.join(Global.Path.data, "opencode.db"))
+  if (!existsSync(database)) throw new Error(`Database does not exist: ${database}`)
+
+  return {
+    mode,
+    database,
+    output: path.resolve(
+      value("--output") ?? path.join(tmpdir(), "opencode-performance", new Date(windowEnd).toISOString().replace(/[:.]/g, "-")),
+    ),
+    windowStart: windowEnd - windowHours * 60 * 60 * 1_000,
+    windowEnd,
+    scenarios: selected as Scenario[],
+    runs: number(value("--runs") ?? "1", "--runs"),
+    build: !args.includes("--skip-build"),
+    diagnostics: args.includes("--diagnostics"),
+    cpu: args.includes("--cpu"),
+    responseURLs: args.includes("--response-urls"),
+    partialSnapshotOut: value("--partial-snapshot-out")
+      ? path.resolve(value("--partial-snapshot-out")!)
+      : undefined,
+  }
+}
+
+function parseTime(value: string) {
+  const result = /^\d+$/.test(value) ? Number(value) : Date.parse(value)
+  if (!Number.isFinite(result)) throw new Error(`Invalid --window-end: ${value}`)
+  return result
+}
+
+function number(value: string, option: string) {
+  const result = Number(value)
+  if (!Number.isFinite(result) || result <= 0) throw new Error(`${option} must be greater than zero`)
+  return result
+}

packages/app/e2e/performance/desktop-profile/probe.ts

@@ -0,0 +1,192 @@
+import type { Page } from "@playwright/test"
+import type { Options, ProbeResult } from "./types"
+
+export async function installProbe(page: Page, options: Options) {
+  await page.addInitScript((attributeResponses) => {
+    const state = {
+      longTasks: [] as number[],
+      animationFrames: [] as ProbeResult["animationFrames"],
+      frameGaps: [] as number[],
+      responseText: [] as ProbeResult["responseText"],
+    }
+    ;(window as Window & { __opencodeRendererProfile?: typeof state }).__opencodeRendererProfile = state
+    if (PerformanceObserver.supportedEntryTypes.includes("longtask")) {
+      new PerformanceObserver((list) =>
+        state.longTasks.push(...list.getEntries().map((entry) => entry.duration)),
+      ).observe({ type: "longtask" })
+    }
+    if (PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")) {
+      new PerformanceObserver((list) =>
+        state.animationFrames.push(
+          ...list.getEntries().map((entry) => {
+            const frame = entry as PerformanceEntry & {
+              blockingDuration: number
+              scripts?: {
+                duration: number
+                forcedStyleAndLayoutDuration?: number
+                sourceFunctionName?: string
+                sourceURL?: string
+                sourceCharPosition?: number
+                invoker?: string
+                invokerType?: string
+              }[]
+            }
+            return {
+              duration: frame.duration,
+              blockingDuration: frame.blockingDuration,
+              forcedStyleAndLayoutDuration:
+                frame.scripts?.reduce((sum, script) => sum + (script.forcedStyleAndLayoutDuration ?? 0), 0) ?? 0,
+              scripts:
+                frame.scripts?.map((script) => ({
+                  function: script.sourceFunctionName || "(anonymous)",
+                  source: script.sourceURL?.split("/").at(-1) || "(document)",
+                  position: script.sourceCharPosition ?? -1,
+                  invoker: script.invoker ?? "(unknown)",
+                  invokerType: script.invokerType ?? "(unknown)",
+                  duration: script.duration,
+                  forcedStyleAndLayoutDuration: script.forcedStyleAndLayoutDuration ?? 0,
+                })) ?? [],
+            }
+          }),
+        ),
+      ).observe({ type: "long-animation-frame" })
+    }
+    let previous = performance.now()
+    const frame = (now: number) => {
+      const gap = now - previous
+      if (gap > 20) state.frameGaps.push(gap)
+      previous = now
+      requestAnimationFrame(frame)
+    }
+    requestAnimationFrame(frame)
+    if (!attributeResponses) return
+    const responseText = Response.prototype.text
+    Response.prototype.text = function () {
+      const started = performance.now()
+      const url = this.url
+      return responseText.call(this).then((text) => {
+        state.responseText.push({ url, duration: performance.now() - started })
+        return text
+      })
+    }
+  }, options.responseURLs)
+}
+
+export async function resetProbe(page: Page) {
+  await page.evaluate(() => {
+    const state = (window as Window & { __opencodeRendererProfile?: ProbeResult }).__opencodeRendererProfile
+    if (!state) return
+    state.longTasks.length = 0
+    state.animationFrames.length = 0
+    state.frameGaps.length = 0
+    state.responseText.length = 0
+  })
+}
+
+export async function collectProbe(page: Page) {
+  return page.evaluate(
+    () => (window as Window & { __opencodeRendererProfile?: ProbeResult }).__opencodeRendererProfile!,
+  )
+}
+
+export function summarizeProbe(probe: ProbeResult) {
+  const scripts = new Map<
+    string,
+    {
+      function: string
+      source: string
+      position: number
+      invoker: string
+      invokerType: string
+      durationMs: number
+      forcedStyleAndLayoutMs: number
+    }
+  >()
+  probe.animationFrames
+    .flatMap((frame) => frame.scripts)
+    .forEach((script) => {
+      const key = `${script.source}:${script.position}:${script.invoker}`
+      const current = scripts.get(key) ?? {
+        function: script.function,
+        source: script.source,
+        position: script.position,
+        invoker: script.invoker,
+        invokerType: script.invokerType,
+        durationMs: 0,
+        forcedStyleAndLayoutMs: 0,
+      }
+      current.durationMs += script.duration
+      current.forcedStyleAndLayoutMs += script.forcedStyleAndLayoutDuration
+      scripts.set(key, current)
+    })
+  return {
+    longTasks: {
+      count: probe.longTasks.length,
+      totalMs: sum(probe.longTasks),
+      maxMs: Math.max(0, ...probe.longTasks),
+    },
+    longAnimationFrames: {
+      count: probe.animationFrames.length,
+      totalBlockingMs: sum(probe.animationFrames.map((frame) => frame.blockingDuration)),
+      maxDurationMs: Math.max(0, ...probe.animationFrames.map((frame) => frame.duration)),
+      forcedStyleAndLayoutMs: sum(probe.animationFrames.map((frame) => frame.forcedStyleAndLayoutDuration)),
+      scripts: [...scripts.values()].sort((a, b) => b.durationMs - a.durationMs).slice(0, 15),
+    },
+    frameGaps: {
+      count: probe.frameGaps.length,
+      maxMs: Math.max(0, ...probe.frameGaps),
+    },
+    responseText: probe.responseText
+      .map((item) => ({ path: responsePath(item.url), durationMs: item.duration }))
+      .sort((a, b) => b.durationMs - a.durationMs),
+  }
+}
+
+export async function startCPUProfile(page: Page, enabled: boolean) {
+  if (!enabled) return { stop: async () => [] }
+  const session = await page.context().newCDPSession(page)
+  await session.send("Profiler.enable")
+  await session.send("Profiler.setSamplingInterval", { interval: 1_000 })
+  await session.send("Profiler.start")
+  return {
+    async stop() {
+      const result = await session.send("Profiler.stop")
+      await session.detach()
+      const self = new Map<number, number>()
+      result.profile.samples?.forEach((id, index) => {
+        self.set(id, (self.get(id) ?? 0) + (result.profile.timeDeltas?.[index] ?? 0) / 1_000)
+      })
+      return result.profile.nodes
+        .map((node) => ({
+          function: node.callFrame.functionName || "(anonymous)",
+          source: sourceName(node.callFrame.url),
+          line: node.callFrame.lineNumber + 1,
+          selfMs: self.get(node.id) ?? 0,
+        }))
+        .filter((node) => node.selfMs >= 1)
+        .sort((a, b) => b.selfMs - a.selfMs)
+        .slice(0, 40)
+    },
+  }
+}
+
+function responsePath(value: string) {
+  try {
+    return new URL(value).pathname
+  } catch {
+    return value
+  }
+}
+
+function sourceName(value: string) {
+  if (!value) return "(native)"
+  try {
+    return new URL(value).pathname.split("/").at(-1) || "(document)"
+  } catch {
+    return value.split(/[\\/]/).at(-1) || value
+  }
+}
+
+function sum(values: number[]) {
+  return values.reduce((total, value) => total + value, 0)
+}

packages/app/e2e/performance/desktop-profile/progress.ts

@@ -0,0 +1,7 @@
+const started = performance.now()
+
+export function progress(message: string, details?: Record<string, unknown>) {
+  const elapsed = ((performance.now() - started) / 1_000).toFixed(1)
+  const suffix = details ? ` ${JSON.stringify(details)}` : ""
+  console.error(`[desktop-profile +${elapsed}s] ${message}${suffix}`)
+}

packages/app/e2e/performance/desktop-profile/runtime.ts

@@ -0,0 +1,156 @@
+import { chromium, type Page } from "@playwright/test"
+import { copyFile, mkdir, rm } from "node:fs/promises"
+import path from "node:path"
+import { prepareDesktopState } from "./desktop-state"
+import { progress } from "./progress"
+import type { Options } from "./types"
+
+export async function withDesktop<T>(
+  options: Options,
+  desktop: string,
+  run: number,
+  projectIDs: string[],
+  use: (page: Page) => Promise<T>,
+) {
+  const port = availablePort()
+  const endpoint = `http://127.0.0.1:${port}`
+  const userData = path.join(options.output, `user-data-${run}`)
+  const database =
+    options.mode === "partial-snapshot" ? path.join(options.output, `working-database-${run}.db`) : options.database
+  await rm(userData, { recursive: true, force: true })
+  await mkdir(userData, { recursive: true })
+  if (database !== options.database) await copyFile(options.database, database)
+  await prepareDesktopState(options, database, userData, run, projectIDs)
+  const electron = path.join(
+    desktop,
+    "node_modules",
+    "electron",
+    "dist",
+    (await Bun.file(path.join(desktop, "node_modules", "electron", "path.txt")).text()).trim(),
+  )
+  progress("launching Electron", { run, port })
+  const child = Bun.spawn([electron, "."], {
+    cwd: desktop,
+    env: {
+      ...process.env,
+      OPENCODE_DB: database,
+      OPENCODE_CHANNEL: "dev",
+      OPENCODE_PROFILE_LOAF: "1",
+      OPENCODE_PROFILE_CDP_PORT: String(port),
+      OPENCODE_PROFILE_USER_DATA: userData,
+      OPENCODE_PERFORMANCE_TRACE_DIR: options.diagnostics ? path.join(options.output, "traces", String(run)) : "",
+      OPENCODE_PERFORMANCE_RUN_ID: `desktop-${run}`,
+    },
+    stdout: "pipe",
+    stderr: "pipe",
+  })
+  const stdout = drain(child.stdout, "stdout")
+  const stderr = drain(child.stderr, "stderr")
+  let browser: Awaited<ReturnType<typeof chromium.connectOverCDP>> | undefined
+
+  try {
+    progress("waiting for CDP", { run })
+    await waitForCDP(endpoint, child, stdout, stderr)
+    progress("connecting Playwright", { run })
+    browser = await chromium.connectOverCDP(endpoint)
+    progress("waiting for renderer", { run })
+    const page = await waitForRenderer(browser)
+    progress("waiting for desktop API", { run })
+    await page.waitForFunction(() => typeof window.api === "object", undefined, { timeout: 60_000 })
+    progress("desktop ready", { run })
+    return await use(page)
+  } finally {
+    progress("stopping Electron", { run })
+    await browser?.close().catch(() => {})
+    await killTree(child.pid)
+    await Promise.allSettled([stdout, stderr])
+    if (database !== options.database) {
+      await Bun.sleep(500)
+      await rm(database, { force: true }).catch(() => undefined)
+    }
+  }
+}
+
+export async function run(command: string[], cwd: string, database: string) {
+  const child = Bun.spawn(command, {
+    cwd,
+    env: { ...process.env, OPENCODE_DB: database, OPENCODE_CHANNEL: "dev" },
+    stdout: "inherit",
+    stderr: "inherit",
+  })
+  const code = await child.exited
+  if (code !== 0) throw new Error(`${command.join(" ")} exited with ${code}`)
+}
+
+function availablePort() {
+  const server = Bun.serve({ hostname: "127.0.0.1", port: 0, fetch: () => new Response() })
+  const port = server.port
+  server.stop(true)
+  return port
+}
+
+async function waitForCDP(
+  endpoint: string,
+  child: ReturnType<typeof Bun.spawn>,
+  stdout: Promise<string>,
+  stderr: Promise<string>,
+) {
+  const timeout = Date.now() + 5 * 60_000
+  let heartbeat = Date.now() + 10_000
+  while (Date.now() < timeout) {
+    const ready = await fetch(`${endpoint}/json/version`)
+      .then((response) => response.ok)
+      .catch(() => false)
+    if (ready) return
+    if (child.exitCode !== null)
+      throw new Error(`Desktop exited before CDP was ready (${child.exitCode})\n${await stdout}\n${await stderr}`)
+    if (Date.now() >= heartbeat) {
+      progress("still waiting for CDP")
+      heartbeat = Date.now() + 10_000
+    }
+    await Bun.sleep(250)
+  }
+  throw new Error("Timed out waiting for desktop CDP")
+}
+
+async function waitForRenderer(browser: Awaited<ReturnType<typeof chromium.connectOverCDP>>) {
+  const timeout = Date.now() + 60_000
+  let heartbeat = Date.now() + 10_000
+  while (Date.now() < timeout) {
+    const page = browser
+      .contexts()
+      .flatMap((context) => context.pages())
+      .find((candidate) => candidate.url().startsWith("oc://renderer"))
+    if (page) return page
+    if (Date.now() >= heartbeat) {
+      progress("still waiting for renderer")
+      heartbeat = Date.now() + 10_000
+    }
+    await Bun.sleep(100)
+  }
+  throw new Error("Desktop renderer target was not found")
+}
+
+async function drain(stream: ReadableStream<Uint8Array>, label: string) {
+  const decoder = new TextDecoder()
+  let output = ""
+  let pending = ""
+  for await (const chunk of stream) {
+    const text = decoder.decode(chunk, { stream: true })
+    output = (output + text).slice(-50_000)
+    const lines = (pending + text).split(/\r?\n/)
+    pending = lines.pop() ?? ""
+    lines.filter(Boolean).forEach((line) => progress(`Electron ${label}`, { line: line.slice(0, 500) }))
+  }
+  if (pending) progress(`Electron ${label}`, { line: pending.slice(0, 500) })
+  return output + decoder.decode()
+}
+
+async function killTree(pid: number) {
+  if (process.platform !== "win32") {
+    process.kill(pid, "SIGTERM")
+    return
+  }
+  const child = Bun.spawn(["taskkill", "/pid", String(pid), "/T", "/F"], { stdout: "ignore", stderr: "ignore" })
+  await child.exited
+}

packages/app/e2e/performance/desktop-profile/scenario-utils.ts

@@ -0,0 +1,75 @@
+import type { Page } from "@playwright/test"
+import { progress } from "./progress"
+
+export async function setDesktopRoute(page: Page, route: string) {
+  await page.evaluate(async (value) => {
+    const api = window.api as typeof window.api & { getWindowID?: () => Promise<string> }
+    const id = (await api.getWindowID?.()) ?? "browser"
+    localStorage.setItem(`opencode.desktop.window.${id}.last-active-url`, value)
+  }, route)
+}
+
+export async function waitForQuietDOM(page: Page) {
+  progress("waiting for DOM to settle")
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        let settled = false
+        let timer = setTimeout(done, 750)
+        const deadline = setTimeout(done, 30_000)
+        const observer = new MutationObserver(() => {
+          clearTimeout(timer)
+          timer = setTimeout(done, 750)
+        })
+        observer.observe(document.body, { childList: true, subtree: true, characterData: true })
+        function done() {
+          if (settled) return
+          settled = true
+          clearTimeout(deadline)
+          observer.disconnect()
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+        }
+      }),
+  )
+  progress("DOM settled")
+}
+
+export async function waitForSelector(page: Page, selector: string, label: string) {
+  progress("waiting for UI", { label })
+  try {
+    await page.waitForSelector(selector, { timeout: 30_000 })
+  } catch (error) {
+    progress("UI wait failed", {
+      label,
+      url: page.url(),
+      body: (await page.locator("body").innerText().catch(() => "")).replace(/\s+/g, " ").slice(0, 500),
+    })
+    throw error
+  }
+  progress("UI ready", { label })
+}
+
+export async function domCounts(page: Page, review = false) {
+  return page.evaluate((review) => ({
+    elements: document.getElementsByTagName("*").length,
+    ...(review
+      ? {
+          diffViewers: document.querySelectorAll('[data-component="file"][data-mode="diff"]').length,
+          diffLines: document.querySelectorAll("[data-line]").length,
+        }
+      : {
+          timelineRows: document.querySelectorAll("[data-timeline-row]").length,
+          messageRows: document.querySelectorAll("[data-message-id]").length,
+          markdownRoots: document.querySelectorAll('[data-component="markdown"]').length,
+          diffViewers: document.querySelectorAll('[data-component="file"][data-mode="diff"]').length,
+        }),
+  }), review)
+}
+
+export function sum(values: number[]) {
+  return values.reduce((total, value) => total + value, 0)
+}
+
+export function percentile(values: number[], quantile: number) {
+  return values.toSorted((a, b) => a - b)[Math.max(0, Math.ceil(values.length * quantile) - 1)] ?? 0
+}

packages/app/e2e/performance/desktop-profile/scenarios.ts

@@ -0,0 +1,178 @@
+import type { Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { startChromeTrace } from "../chrome-trace"
+import { collectProbe, resetProbe, startCPUProfile, summarizeProbe } from "./probe"
+import { progress } from "./progress"
+import { domCounts, percentile, setDesktopRoute, sum, waitForQuietDOM, waitForSelector } from "./scenario-utils"
+import type { Options, Target } from "./types"
+
+export async function runScenarios(page: Page, options: Options, targets: Target[], typingText: string) {
+  const results: unknown[] = []
+  if (options.scenarios.includes("home")) results.push(await profileHome(page, options))
+  if (options.scenarios.includes("calibration")) results.push(await profileCalibration(page))
+  if (options.scenarios.includes("session")) {
+    for (const target of targets) results.push(await profileSession(page, options, target))
+  }
+  if (options.scenarios.some((scenario) => ["composer", "history", "review"].includes(scenario))) {
+    await openSession(page, targets[2]!)
+  }
+  if (options.scenarios.includes("composer")) results.push(await profileComposer(page, options, typingText))
+  if (options.scenarios.includes("history")) results.push(await profileHistory(page, options, targets[2]!))
+  if (options.scenarios.includes("review")) {
+    const review = await profileReview(page, options)
+    if (review) results.push(review)
+  }
+  return results
+}
+
+async function profileHome(page: Page, options: Options) {
+  const measured = await measure(page, options, "home", async () => {
+    await setDesktopRoute(page, "/")
+    await page.reload({ waitUntil: "domcontentloaded", timeout: 60_000 })
+    await waitForSelector(page, '[data-component="home-session-row"]', "Home session rows")
+    await waitForQuietDOM(page)
+  })
+  return { ...measured, dom: await domCounts(page) }
+}
+
+async function profileCalibration(page: Page) {
+  await resetProbe(page)
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        setTimeout(function opencodeProfileCalibration() {
+          const end = performance.now() + 80
+          while (performance.now() < end) {
+            // Deliberate benchmark-only main-thread block.
+          }
+          requestAnimationFrame(() => setTimeout(resolve, 100))
+        })
+      }),
+  )
+  return { name: "attribution-calibration", ...summarizeProbe(await collectProbe(page)) }
+}
+
+async function profileSession(page: Page, options: Options, target: Target) {
+  await prepareHome(page)
+  const measured = await measure(page, options, `session-${target.label}`, async () => {
+    await navigateSession(page, target)
+    await waitForSelector(page, '[data-component="prompt-input"]', "session composer")
+    await waitForQuietDOM(page)
+  })
+  return { ...measured, context: targetContext(target), dom: await domCounts(page) }
+}
+
+async function profileComposer(page: Page, options: Options, typingText: string) {
+  const editor = page.locator('[data-component="prompt-input"][contenteditable="true"]').first()
+  await editor.click()
+  await page.keyboard.press("Control+A")
+  await page.keyboard.press("Backspace")
+  const printable = [...typingText].filter((character) => !["\r", "\n", "\t"].includes(character))
+  const measuredText = printable.slice(-120).join("")
+  const prefix = printable.slice(0, -measuredText.length).join("")
+  if (prefix) await page.keyboard.insertText(prefix)
+  await waitForQuietDOM(page)
+  const durations: number[] = []
+  const measured = await measure(page, options, "composer-typing", async () => {
+    for (const character of measuredText) {
+      const started = performance.now()
+      await page.keyboard.type(character)
+      durations.push(performance.now() - started)
+    }
+    await waitForQuietDOM(page)
+  })
+  await page.keyboard.press("Control+A")
+  await page.keyboard.press("Backspace")
+  return {
+    ...measured,
+    context: { promptCharacters: printable.length, measuredCharacters: measuredText.length },
+    typing: {
+      totalMs: sum(durations),
+      meanMs: sum(durations) / durations.length,
+      p50Ms: percentile(durations, 0.5),
+      p95Ms: percentile(durations, 0.95),
+      maxMs: Math.max(...durations),
+    },
+  }
+}
+
+async function profileHistory(page: Page, options: Options, target: Target) {
+  await waitForSelector(page, '[data-component="prompt-input"]', "history session composer")
+  await waitForQuietDOM(page)
+  let requests = 0
+  const onResponse = (response: { url(): string }) => {
+    if (/\/session\/[^/]+\/message(?:\?|$)/.test(response.url())) requests++
+  }
+  page.on("response", onResponse)
+  const measured = await measure(page, options, "session-max-history-boundary", async () => {
+    const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") }).first()
+    await scroller.evaluate((element) => {
+      element.scrollTop = 0
+      element.dispatchEvent(new WheelEvent("wheel", { deltaY: -10_000, bubbles: true }))
+      element.dispatchEvent(new Event("scroll", { bubbles: true }))
+    })
+    const timeout = Date.now() + 60_000
+    while (requests === 0 && Date.now() < timeout) await page.waitForTimeout(50)
+    if (requests === 0) throw new Error("History boundary did not request a page")
+    await waitForQuietDOM(page)
+  })
+  page.off("response", onResponse)
+  return { ...measured, context: targetContext(target), messageRequests: requests }
+}
+
+async function profileReview(page: Page, options: Options) {
+  const button = page.getByRole("button", { name: "Toggle review" })
+  if (!(await button.isVisible().catch(() => false))) return
+  const panel = page.locator("#review-panel")
+  if (await panel.isVisible().catch(() => false)) {
+    await button.click()
+    await panel.waitFor({ state: "hidden", timeout: 60_000 })
+    await waitForQuietDOM(page)
+  }
+  const measured = await measure(page, options, "review-open", async () => {
+    await button.click()
+    await panel.waitFor({ state: "visible", timeout: 60_000 })
+    await waitForQuietDOM(page)
+  })
+  return { ...measured, dom: await domCounts(page, true) }
+}
+
+async function measure(page: Page, options: Options, name: string, action: () => Promise<void>) {
+  progress("scenario started", { name })
+  await resetProbe(page)
+  const stopTrace = options.diagnostics ? await startChromeTrace(page, name) : undefined
+  const cpu = await startCPUProfile(page, options.cpu)
+  const started = performance.now()
+  await action()
+  const result = {
+    name,
+    elapsedMs: performance.now() - started,
+    ...summarizeProbe(await collectProbe(page)),
+    cpu: await cpu.stop(),
+    trace: await stopTrace?.(),
+  }
+  progress("scenario completed", { name, elapsedMs: Math.round(result.elapsedMs), longTasks: result.longTasks.count })
+  return result
+}
+
+async function openSession(page: Page, target: Target) {
+  await navigateSession(page, target)
+  await waitForSelector(page, '[data-component="prompt-input"]', "session composer")
+  await waitForQuietDOM(page)
+}
+
+async function prepareHome(page: Page) {
+  await setDesktopRoute(page, "/")
+  await page.reload({ waitUntil: "domcontentloaded", timeout: 60_000 })
+  await waitForSelector(page, '[data-component="home-session-row"]', "Home session rows")
+  await waitForQuietDOM(page)
+}
+
+async function navigateSession(page: Page, target: Target) {
+  await setDesktopRoute(page, `/server/${base64Encode("sidecar")}/session/${target.id}`)
+  await page.reload({ waitUntil: "domcontentloaded", timeout: 60_000 })
+}
+
+function targetContext(target: Target) {
+  return { serializedBytes: target.bytes, messages: target.messages, parts: target.parts, userTurns: target.userTurns }
+}

packages/app/e2e/performance/desktop-profile/types.ts

@@ -0,0 +1,50 @@
+export const scenarios = ["home", "calibration", "session", "composer", "history", "review"] as const
+
+export type Scenario = (typeof scenarios)[number]
+
+export type Options = {
+  mode: "local" | "partial-snapshot"
+  database: string
+  output: string
+  windowStart: number
+  windowEnd: number
+  scenarios: Scenario[]
+  runs: number
+  build: boolean
+  diagnostics: boolean
+  cpu: boolean
+  responseURLs: boolean
+  partialSnapshotOut?: string
+}
+
+export type Target = {
+  label: "p50" | "p95" | "max"
+  id: string
+  projectID: string
+  directory: string
+  title: string
+  bytes: number
+  messages: number
+  parts: number
+  userTurns: number
+}
+
+export type ProbeResult = {
+  longTasks: number[]
+  animationFrames: {
+    duration: number
+    blockingDuration: number
+    forcedStyleAndLayoutDuration: number
+    scripts: {
+      function: string
+      source: string
+      position: number
+      invoker: string
+      invokerType: string
+      duration: number
+      forcedStyleAndLayoutDuration: number
+    }[]
+  }[]
+  frameGaps: number[]
+  responseText: { url: string; duration: number }[]
+}

packages/app/e2e/performance/profile-desktop.ts

@@ -0,0 +1,107 @@
+import { mkdir } from "node:fs/promises"
+import path from "node:path"
+import { createPartialSnapshot, fingerprint, loadCorpus } from "./desktop-profile/corpus"
+import { parseOptions } from "./desktop-profile/options"
+import { installProbe } from "./desktop-profile/probe"
+import { progress } from "./desktop-profile/progress"
+import { withDesktop, run } from "./desktop-profile/runtime"
+import { runScenarios } from "./desktop-profile/scenarios"
+
+const root = path.resolve(import.meta.dir, "../../../..")
+const desktop = path.join(root, "packages/desktop")
+const options = parseOptions(process.argv.slice(2))
+if (!options) process.exit(0)
+
+await mkdir(options.output, { recursive: true })
+progress("loading corpus", { mode: options.mode })
+let corpus = loadCorpus(options)
+if (options.partialSnapshotOut) {
+  progress("creating partial snapshot")
+  await createPartialSnapshot(options.database, options.partialSnapshotOut, options, corpus.targets)
+  options.database = options.partialSnapshotOut
+  options.mode = "partial-snapshot"
+  corpus = loadCorpus(options)
+}
+if (options.build) {
+  progress("building desktop production bundle")
+  await run(["bun", "run", "build"], desktop, options.database)
+}
+
+progress("corpus ready", { targets: corpus.targets.map((target) => target.label), runs: options.runs })
+const runs = []
+for (let index = 1; index <= options.runs; index++) {
+  runs.push(
+    await withDesktop(options, desktop, index, corpus.projectIDs, async (page) => {
+      await installProbe(page, options)
+      await page.evaluate(() => {
+        const settings = JSON.parse(localStorage.getItem("settings.v3") ?? "{}")
+        localStorage.setItem(
+          "settings.v3",
+          JSON.stringify({ ...settings, general: { ...settings.general, newLayoutDesigns: true } }),
+        )
+      })
+      return runScenarios(page, options, corpus.targets, corpus.typingText)
+    }),
+  )
+}
+
+const report = {
+  schemaVersion: 2,
+  source: options.mode === "partial-snapshot" ? "partial-database-snapshot" : "local-opencode-db",
+  command: process.argv.slice(2),
+  diagnostics: options.diagnostics,
+  profileCPU: options.cpu,
+  database: await fingerprint(options.database),
+  window: {
+    start: new Date(options.windowStart).toISOString(),
+    end: new Date(options.windowEnd).toISOString(),
+  },
+  revision: (await Bun.$`git rev-parse HEAD`.cwd(root).text()).trim(),
+  targets: corpus.targets.map(({ id: _, projectID: __, directory: ___, title: ____, ...target }) => target),
+  summary: summarize(runs),
+  runs: runs.map((results, index) => ({ index: index + 1, results })),
+}
+const file = path.join(options.output, "renderer-profile.json")
+await Bun.write(file, JSON.stringify(report, null, 2))
+console.log(`PROFILE_REPORT ${file}`)
+console.log(`PROFILE_SUMMARY ${JSON.stringify(report.summary)}`)
+console.log(JSON.stringify(report, null, 2))
+
+function summarize(runs: unknown[][]) {
+  type Result = {
+    name: string
+    elapsedMs?: number
+    longTasks: { count: number; totalMs: number; maxMs: number }
+    longAnimationFrames: { totalBlockingMs: number }
+    typing?: { p50Ms: number; p95Ms: number; maxMs: number }
+  }
+  return Object.fromEntries(
+    [...Map.groupBy(runs.flat() as Result[], (result) => result.name)].map(([name, samples]) => [
+      name,
+      {
+        samples: samples.length,
+        elapsedMedianMs: median(samples.flatMap((sample) => sample.elapsedMs ?? [])),
+        longTasks: {
+          maxCount: Math.max(...samples.map((sample) => sample.longTasks.count)),
+          maxTotalMs: Math.max(...samples.map((sample) => sample.longTasks.totalMs)),
+          maxTaskMs: Math.max(...samples.map((sample) => sample.longTasks.maxMs)),
+        },
+        maxBlockingMs: Math.max(...samples.map((sample) => sample.longAnimationFrames.totalBlockingMs)),
+        ...(samples[0]?.typing
+          ? {
+              typingMedianMs: {
+                p50: median(samples.flatMap((sample) => sample.typing?.p50Ms ?? [])),
+                p95: median(samples.flatMap((sample) => sample.typing?.p95Ms ?? [])),
+                max: median(samples.flatMap((sample) => sample.typing?.maxMs ?? [])),
+              },
+            }
+          : {}),
+      },
+    ]),
+  )
+}
+
+function median(values: number[]) {
+  if (values.length === 0) return
+  return values.toSorted((a, b) => a - b)[Math.floor(values.length / 2)]
+}

packages/app/e2e/performance/real-desktop-profile.ts

@@ -0,0 +1 @@
+import "./profile-desktop"

packages/app/e2e/regression/session-request-docks.spec.ts

@@ -111,7 +111,7 @@ test("restores the draft caret before typing after a request dock closes", async
   })
   await mockServer(page, { questions: [] })
   await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-  await transport.waitForConnection()
+  await transport.waitForConnection({ path: "/api/event" })
   await expectSessionTitle(page, title)
 
   const editor = page.locator('[data-component="prompt-input"][contenteditable="true"]')
@@ -132,32 +132,40 @@ test("restores the draft caret before typing after a request dock closes", async
       }),
     )
     .toBe(cursor)
-  await transport.send({
-    directory,
-    payload: {
-      type: "question.asked",
-      properties: {
-        id: "question-caret",
-        sessionID,
-        questions: [
-          {
-            header: "Continue",
-            question: "Continue?",
-            options: [{ label: "Yes", description: "Continue the session" }],
-          },
-        ],
-        tool: { messageID: "message-caret", callID: "call-caret" },
+  await transport.send(
+    {
+      directory,
+      payload: {
+        type: "question.asked",
+        properties: {
+          id: "question-caret",
+          sessionID,
+          questions: [
+            {
+              header: "Continue",
+              question: "Continue?",
+              options: [{ label: "Yes", description: "Continue the session" }],
+            },
+          ],
+          tool: { messageID: "message-caret", callID: "call-caret" },
+        },
       },
     },
-  })
+    undefined,
+    "/api/event",
+  )
   const question = page.locator('[data-component="dock-prompt"][data-kind="question"]')
   await expect(question).toBeVisible()
   await expect(editor).toHaveCount(0)
 
-  await transport.send({
-    directory,
-    payload: { type: "question.rejected", properties: { sessionID, requestID: "question-caret" } },
-  })
+  await transport.send(
+    {
+      directory,
+      payload: { type: "question.rejected", properties: { sessionID, requestID: "question-caret" } },
+    },
+    undefined,
+    "/api/event",
+  )
   await expect(question).toHaveCount(0)
   await expect(editor).toBeVisible()
   await page.keyboard.press("x")

packages/app/e2e/regression/session-timeline-history-root.spec.ts

@@ -18,7 +18,7 @@ import { installSseTransport } from "../utils/sse-transport"
 import { expectSessionTitle } from "../utils/waits"
 
 const initialPageSize = 20
-const historyPageSize = 200
+const historyPageSize = 50
 const assistants = Array.from({ length: initialPageSize + 1 }, (_, index) =>
   assistantMessage([textPart(`prt_history_root_${index}`, `Assistant response ${index}`)], {
     id: `msg_${String(index + 1001).padStart(4, "0")}_history_root_assistant`,

packages/app/e2e/regression/session-timeline-transport.spec.ts

@@ -99,13 +99,15 @@ test("reconnects after a stream error", async ({ page }) => {
 
 test("does not request replay when reconnecting the volatile V2 event stream", async ({ page }) => {
   const timeline = await setupTimeline(page, { protocol: "v2" })
-  const first = await timeline.transport.send(partUpdated(textPart("prt_transport_id", "event with id")), {
-    id: "timeline-event-7",
-  })
+  const first = await timeline.transport.send(
+    partUpdated(textPart("prt_transport_id", "event with id")),
+    { id: "timeline-event-7" },
+    "/api/event",
+  )
   await timeline.waitForPart("prt_transport_id")
 
-  await timeline.transport.error("retry with event id")
-  const connection = await timeline.transport.waitForConnection({ after: first.connectionID })
+  await timeline.transport.error("retry with event id", "/api/event")
+  const connection = await timeline.transport.waitForConnection({ after: first.connectionID, path: "/api/event" })
 
   expect(first.eventID).toBe("timeline-event-7")
   expect(connection.headers["last-event-id"]).toBeUndefined()

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

@@ -0,0 +1,365 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { expect, test, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"
+import { installSseTransport } from "../utils/sse-transport"
+
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+const root = "C:/OpenCode/WorkspaceProject"
+const workspace = "C:/OpenCode/worktree/project/feature"
+const createdWorkspace = "C:/OpenCode/worktree/project/quick-contrast-fix"
+const project = {
+  id: "proj_workspaces",
+  worktree: root,
+  vcs: "git" as const,
+  name: "workspace-project",
+  time: { created: 1, updated: 1 },
+  sandboxes: [workspace],
+}
+const provider = {
+  all: [
+    {
+      id: "opencode",
+      name: "OpenCode",
+      models: { test: { id: "test", name: "Test model", limit: { context: 200_000 } } },
+    },
+  ],
+  connected: ["opencode"],
+  default: { providerID: "opencode", modelID: "test" },
+}
+const diff = {
+  file: "src/workspace.ts",
+  additions: 3,
+  deletions: 1,
+  patch: "@@ -1 +1 @@\n-export const workspace = false\n+export const workspace = true",
+}
+
+function userMessage(sessionID: string, id: string, text: string, withDiff = false) {
+  return {
+    info: {
+      id,
+      sessionID,
+      role: "user",
+      time: { created: 1 },
+      agent: "build",
+      model: { providerID: "opencode", modelID: "test" },
+      ...(withDiff ? { summary: { diffs: [diff] } } : {}),
+    },
+    parts: [{ id: `prt_${id}`, sessionID, messageID: id, type: "text", text }],
+  }
+}
+
+async function init(page: Page, tab: Record<string, unknown>) {
+  await page.addInitScript(
+    ({ root, server, tab }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({ projects: { local: [{ worktree: root, expanded: true }] }, lastProject: { local: root } }),
+      )
+      localStorage.setItem("opencode.window.browser.dat:tabs", JSON.stringify([{ server, ...tab }]))
+    },
+    { root, server, tab },
+  )
+}
+
+test("selects an existing workspace from the start menu", async ({ page }) => {
+  const draftID = "draft_workspaces"
+  await mockOpenCodeServer(page, {
+    directory: root,
+    project,
+    provider,
+    sessions: [],
+    pageMessages: () => ({ items: [] }),
+  })
+  await init(page, { type: "draft", draftID, directory: root })
+
+  await page.goto(`/new-session?draftId=${draftID}`)
+  await expectAppVisible(page.locator('[data-component="prompt-input"]'))
+
+  await page.getByRole("button", { name: /^local$/i }).click()
+  await page.getByRole("menuitem", { name: /Workspace/ }).hover()
+  await page.getByRole("menuitem", { name: "feature" }).click()
+  await expect(page.getByRole("button", { name: /feature/ })).toBeVisible()
+})
+
+test("lists and manually deletes workspaces from settings", async ({ page }) => {
+  const draftID = "draft_workspace_settings"
+  const cleanWorkspace = `${workspace}-clean`
+  const inventory = { ...project, sandboxes: [cleanWorkspace] }
+
+  const transport = await installSseTransport<{ directory: string; payload: Record<string, unknown> }>(page, { server })
+  await mockOpenCodeServer(page, {
+    directory: root,
+    project: inventory,
+    provider,
+    sessions: [],
+    pageMessages: () => ({ items: [] }),
+  })
+  let releaseSessions = () => {}
+  const sessionsReady = new Promise<void>((resolve) => {
+    releaseSessions = resolve
+  })
+  await page.route("**/session?**", async (route) => {
+    const url = new URL(route.request().url())
+    if (route.request().method() !== "GET" || url.pathname !== "/session" || url.searchParams.get("limit") !== "1000")
+      return route.fallback()
+    await sessionsReady
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: "[]",
+    })
+  })
+  await page.route("**/experimental/worktree**", async (route) => {
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "DELETE" },
+      })
+      return
+    }
+    if (route.request().method() !== "DELETE") return route.fallback()
+    await transport.send({
+      directory: "global",
+      payload: {
+        id: "evt_workspace_deleted_settings",
+        type: "project.updated",
+        properties: { ...inventory, sandboxes: [] },
+      },
+    })
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: "true",
+    })
+  })
+  await init(page, { type: "draft", draftID, directory: root })
+
+  await page.goto(`/new-session?draftId=${draftID}`)
+  await transport.waitForConnection()
+  await expectAppVisible(page.locator('[data-component="prompt-input"]'))
+
+  const app = page.locator('[data-component="session-new-design"]')
+  const appNode = await app.elementHandle()
+  await page.getByRole("button", { name: /local|new workspace/i }).click()
+  const workspacesTrigger = page.getByRole("menuitem", { name: /Workspace/ })
+  if (await workspacesTrigger.isVisible()) await workspacesTrigger.hover()
+  await page.getByRole("menuitem", { name: "View all" }).click()
+
+  const settings = page.locator(".settings-v2-dialog")
+  await expect(settings.getByRole("tab", { name: "Workspaces" })).toHaveAttribute("data-selected")
+  expect(await appNode?.evaluate((node) => node.isConnected)).toBe(true)
+  releaseSessions()
+  await expect(settings.getByText(cleanWorkspace, { exact: true })).toBeVisible()
+
+  await settings.getByRole("button", { name: 'Delete workspace "feature-clean"?' }).click()
+  const confirmation = page
+    .locator('[data-component="dialog-v2"]')
+    .filter({ hasText: 'Delete workspace "feature-clean"?' })
+  const removed = page.waitForRequest(
+    (request) => request.method() === "DELETE" && new URL(request.url()).pathname === "/experimental/worktree",
+  )
+  await confirmation.getByRole("button", { name: "Delete workspace" }).click()
+  const request = await removed
+  expect(new URL(request.url()).searchParams.get("directory")).toBe(root)
+  expect(request.postDataJSON()).toEqual({ directory: cleanWorkspace })
+  await expect(settings.getByText(cleanWorkspace, { exact: true })).toHaveCount(0)
+})
+
+test("submits the owning prompt after a new workspace becomes ready", async ({ page }) => {
+  const draftID = "draft_workspace_submit"
+  const sessionID = "ses_workspace_submit"
+  const session = {
+    id: sessionID,
+    slug: "workspace-submit",
+    projectID: project.id,
+    directory: createdWorkspace,
+    title: "New session",
+    version: "dev",
+    time: { created: 1, updated: 2 },
+  }
+  const transport = await installSseTransport<{ directory: string; payload: Record<string, unknown> }>(page, { server })
+  await mockOpenCodeServer(page, {
+    directory: root,
+    project,
+    provider,
+    sessions: [session],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.route("**/experimental/worktree**", async (route) => {
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "POST" },
+      })
+      return
+    }
+    if (route.request().method() !== "POST") return route.fallback()
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify({ name: "quick-contrast-fix", directory: createdWorkspace, branch: "quick-contrast-fix" }),
+    })
+  })
+  await page.route("**/session**", async (route) => {
+    const url = new URL(route.request().url())
+    if (url.pathname !== "/session") return route.fallback()
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "POST" },
+      })
+      return
+    }
+    if (route.request().method() !== "POST") return route.fallback()
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify(session),
+    })
+  })
+  await page.route(`**/session/${sessionID}/prompt_async**`, async (route) => {
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "POST" },
+      })
+      return
+    }
+    await route.fulfill({
+      status: 204,
+      headers: { "access-control-allow-origin": "*" },
+    })
+  })
+  await init(page, { type: "draft", draftID, directory: root })
+
+  await page.goto(`/new-session?draftId=${draftID}`)
+  await transport.waitForConnection()
+  await page.getByRole("button", { name: /^local$/i }).click()
+  await page.getByRole("menuitem", { name: "New workspace" }).click()
+  const editor = page.locator('[data-component="prompt-input"][contenteditable="true"]')
+  await editor.fill("Build workspace support")
+  await page.locator('[data-action="prompt-submit"]').click()
+
+  const lifecycle = page.locator('[data-timeline-row="WorkspaceLifecycle"]')
+  await expect(lifecycle).toContainText("Creating workspace")
+  const sent = page.waitForRequest(
+    (request) =>
+      request.method() === "POST" && new URL(request.url()).pathname === `/session/${sessionID}/prompt_async`,
+  )
+  await transport.send({
+    directory: createdWorkspace,
+    payload: {
+      id: "evt_submit_ready",
+      type: "worktree.ready",
+      properties: { name: "quick-contrast-fix" },
+    },
+  })
+  await sent
+  await expect(lifecycle).toContainText("Workspace created")
+})
+
+test("moves a changed local session through workspace creation without changing lifecycle semantics", async ({
+  page,
+}) => {
+  const sessionID = "ses_workspace_move_new"
+  const messageID = "msg_workspace_move_new"
+  const session = {
+    id: sessionID,
+    slug: "workspace-move-new",
+    projectID: project.id,
+    directory: root,
+    title: "Create a workspace",
+    version: "dev",
+    time: { created: 1, updated: 2 },
+  }
+  const transport = await installSseTransport<{ directory: string; payload: Record<string, unknown> }>(page, { server })
+  await mockOpenCodeServer(page, {
+    directory: root,
+    project,
+    provider,
+    sessions: [session],
+    pageMessages: () => ({ items: [userMessage(sessionID, messageID, "Create isolated workspace", true)] }),
+    vcsDiff: [diff],
+  })
+  await page.route("**/experimental/worktree**", async (route) => {
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "POST" },
+      })
+      return
+    }
+    if (route.request().method() !== "POST") return route.fallback()
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify({ name: "quick-contrast-fix", directory: createdWorkspace, branch: "quick-contrast-fix" }),
+    })
+  })
+  await page.route("**/experimental/control-plane/move-session", async (route) => {
+    if (route.request().method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-methods": "POST" },
+      })
+      return
+    }
+    session.directory = createdWorkspace
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: "null",
+    })
+  })
+  await init(page, { type: "session", sessionId: sessionID })
+
+  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
+  await transport.waitForConnection()
+  await page.locator("[data-session-title]").getByRole("button", { name: "Session details" }).click()
+  const panel = page.locator('[data-component="session-summary-panel"]')
+  await panel.getByRole("button", { name: "Local repository" }).click()
+  await expect(page.getByRole("menuitem", { name: "New workspace" })).toBeVisible()
+  await page.getByRole("menuitem", { name: "New workspace" }).click()
+
+  const lifecycle = page.locator('[data-timeline-row="WorkspaceLifecycle"]')
+  await expect(lifecycle).toContainText("Creating workspace")
+  const moved = page.waitForRequest(
+    (request) =>
+      request.method() === "POST" && new URL(request.url()).pathname === "/experimental/control-plane/move-session",
+  )
+  await transport.send({
+    directory: createdWorkspace,
+    payload: {
+      id: "evt_worktree_ready",
+      type: "worktree.ready",
+      properties: { name: "quick-contrast-fix" },
+    },
+  })
+  expect((await moved).postDataJSON()).toEqual({
+    sessionID,
+    destination: { directory: createdWorkspace },
+    moveChanges: true,
+  })
+  await transport.send({
+    directory: createdWorkspace,
+    payload: {
+      id: "evt_workspace_created",
+      type: "session.next.moved",
+      properties: {
+        timestamp: Date.now(),
+        sessionID,
+        location: { directory: createdWorkspace },
+        subdirectory: "",
+      },
+    },
+  })
+  await expect(lifecycle).toContainText("Workspace created")
+})

packages/app/e2e/utils/sse-transport.ts

@@ -29,23 +29,38 @@ export type SseEventOptions = {
 
 export type SseTransport<T> = {
   server: string
-  waitForConnection(options?: { after?: number; timeout?: number }): Promise<SseConnectionRecord>
-  send(payload: T, options?: SseEventOptions): Promise<SseDeliveryAcknowledgement>
+  waitForConnection(options?: {
+    after?: number
+    timeout?: number
+    path?: SseConnectionRecord["path"]
+  }): Promise<SseConnectionRecord>
+  send(payload: T, options?: SseEventOptions, path?: SseConnectionRecord["path"]): Promise<SseDeliveryAcknowledgement>
   burst(payloads: readonly T[], options?: readonly SseEventOptions[]): Promise<SseDeliveryAcknowledgement[]>
   split(payload: T, cuts: readonly number[], options?: SseEventOptions): Promise<SseDeliveryAcknowledgement>
   heartbeat(options?: SseEventOptions): Promise<SseDeliveryAcknowledgement>
   writeRaw(value: string | Uint8Array, cuts?: readonly number[], marker?: string): Promise<SseDeliveryAcknowledgement>
   close(): Promise<void>
   disconnect(message?: string): Promise<void>
-  error(message?: string): Promise<void>
+  error(message?: string, path?: SseConnectionRecord["path"]): Promise<void>
   connections(): Promise<SseConnectionRecord[]>
   acknowledgements(): Promise<SseDeliveryAcknowledgement[]>
 }
 
 type BrowserCommand<T> =
-  | { type: "send"; deliveries: { payload: T; options?: SseEventOptions }[]; burst: boolean; cuts?: number[] }
+  | {
+      type: "send"
+      deliveries: { payload: T; options?: SseEventOptions }[]
+      burst: boolean
+      cuts?: number[]
+      path?: SseConnectionRecord["path"]
+    }
   | { type: "raw"; bytes: number[]; cuts?: number[]; marker?: string }
-  | { type: "end"; mode: "close" | "disconnect" | "error"; message?: string }
+  | {
+      type: "end"
+      mode: "close" | "disconnect" | "error"
+      message?: string
+      path?: SseConnectionRecord["path"]
+    }
   | { type: "connections" }
   | { type: "acknowledgements" }
 
@@ -73,7 +88,8 @@ export async function installSseTransport<T>(
       let nextConnectionID = 0
       let nextDeliveryID = 0
 
-      const current = () => connections.findLast((connection) => connection.endedAt === undefined)
+      const current = (path?: SseConnectionRecord["path"]) =>
+        connections.findLast((connection) => connection.endedAt === undefined && (!path || connection.path === path))
       const chunks = (bytes: Uint8Array, cuts?: readonly number[]) => {
         const boundaries = [...new Set(cuts ?? [])]
           .filter((cut) => Number.isInteger(cut) && cut > 0 && cut < bytes.byteLength)
@@ -125,8 +141,8 @@ export async function installSseTransport<T>(
         acknowledgements.push(acknowledgement)
         return acknowledgement
       }
-      const end = (mode: "close" | "disconnect" | "error", message?: string) => {
-        const connection = current()
+      const end = (mode: "close" | "disconnect" | "error", message?: string, path?: SseConnectionRecord["path"]) => {
+        const connection = current(path)
         if (!connection) throw new Error("SSE transport has no active connection")
         connection.endedAt = performance.now()
         connection.endedBy = mode
@@ -146,8 +162,8 @@ export async function installSseTransport<T>(
         if (input.type === "connections")
           return connections.map(({ controller: _controller, ...connection }) => connection)
         if (input.type === "acknowledgements") return acknowledgements
-        if (input.type === "end") return end(input.mode, input.message)
-        const connection = current()
+        if (input.type === "end") return end(input.mode, input.message, input.path)
+        const connection = current(input.type === "send" ? input.path : undefined)
         if (!connection) throw new Error("SSE transport has no active connection")
         if (input.type === "raw") {
           marker(input.marker)
@@ -248,12 +264,15 @@ export async function installSseTransport<T>(
     server,
     async waitForConnection(input = {}) {
       const connection = await page.waitForFunction(
-        (after) => {
+        ({ after, path }) => {
           const transport = (window as BrowserTransport).__testSseTransport
           const connections = transport?.command({ type: "connections" }) as SseConnectionRecord[] | undefined
-          return connections?.findLast((connection) => connection.id > after && connection.endedAt === undefined)
+          return connections?.findLast(
+            (connection) =>
+              connection.id > after && connection.endedAt === undefined && (!path || connection.path === path),
+          )
         },
-        input.after ?? 0,
+        { after: input.after ?? 0, path: input.path },
         { timeout: input.timeout },
       )
       let result: SseConnectionRecord | undefined
@@ -265,8 +284,8 @@ export async function installSseTransport<T>(
       if (!result) throw new Error("SSE transport connection disappeared while waiting")
       return result
     },
-    send(payload, eventOptions) {
-      return command({ type: "send", deliveries: [{ payload, options: eventOptions }], burst: false })
+    send(payload, eventOptions, path) {
+      return command({ type: "send", deliveries: [{ payload, options: eventOptions }], burst: false, path })
     },
     burst(payloads, eventOptions = []) {
       return command({
@@ -304,8 +323,8 @@ export async function installSseTransport<T>(
     disconnect(message) {
       return command({ type: "end", mode: "disconnect", message })
     },
-    error(message) {
-      return command({ type: "end", mode: "error", message })
+    error(message, path) {
+      return command({ type: "end", mode: "error", message, path })
     },
     connections() {
       return command({ type: "connections" })

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.18.14",
+  "version": "1.18.15",
   "description": "",
   "type": "module",
   "exports": {
@@ -28,7 +28,8 @@
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:report": "playwright show-report e2e/playwright-report",
     "test:stability": "bun test ./e2e/performance/unit/visual-stability.test.ts && playwright test --config e2e/performance/timeline-stability/playwright.config.ts",
-    "test:bench": "bun test ./e2e/performance/unit && playwright test --config e2e/performance/playwright.config.ts"
+    "test:bench": "bun test ./e2e/performance/unit && playwright test --config e2e/performance/playwright.config.ts",
+    "profile:desktop": "bun run e2e/performance/profile-desktop.ts"
   },
   "license": "MIT",
   "devDependencies": {

packages/app/src/app.tsx

@@ -1,9 +1,9 @@
 import "@/index.css"
 import * as Sentry from "@sentry/solid"
 import { I18nProvider } from "@opencode-ai/ui/context"
+import type { UiI18n } from "@opencode-ai/ui/context/i18n"
 import { DialogProvider } from "@opencode-ai/ui/context/dialog"
 import { FileComponentProvider } from "@opencode-ai/ui/context/file"
-import { File } from "@opencode-ai/session-ui/file"
 import { Font } from "@opencode-ai/ui/font"
 import { Splash } from "@opencode-ai/ui/logo"
 import { ThemeProvider } from "@opencode-ai/ui/theme/context"
@@ -58,18 +58,24 @@ import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
 import { SDKProvider, useSDK } from "@/context/sdk"
 import { WslServersProvider } from "@/wsl/context"
 import DirectoryLayout, { DirectoryDataProvider } from "@/pages/directory-layout"
-import LegacyLayout from "@/pages/layout"
-import NewLayout from "@/pages/layout-new"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
 import { legacySessionHref, legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
 import { createSessionLineage } from "@/pages/session/session-lineage"
 
-import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
-import { NewHome } from "@/pages/home"
-import { LegacyHome } from "@/pages/home/legacy-home"
-
 const NewSession = lazy(() => import("@/pages/new-session"))
+const NewLayout = lazy(() => import("@/pages/layout-new"))
+const NewHome = lazy(() => import("@/pages/home").then((module) => ({ default: module.NewHome })))
+const LegacyLayout = lazy(() => import("@/pages/layout"))
+const LegacyHome = lazy(() => import("@/pages/home/legacy-home").then((module) => ({ default: module.LegacyHome })))
+const File = lazy(() => import("@opencode-ai/session-ui/file").then((module) => ({ default: module.File })))
+const SessionPage = lazy(() => import("@/pages/session").then((module) => ({ default: module.SessionPage })))
+const SessionRouteErrorBoundary = lazy(() =>
+  import("@/pages/session").then((module) => ({ default: module.SessionRouteErrorBoundary })),
+)
+const TargetSessionRouteContent = lazy(() =>
+  import("@/pages/session").then((module) => ({ default: module.TargetSessionRouteContent })),
+)
 
 const SessionRoute = () => {
   const settings = useSettings()
@@ -235,7 +241,13 @@ function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
   return (
     <I18nProvider
-      value={{ locale: language.intl, layoutLocale: language.layoutLocale, t: language.t, plural: language.plural }}
+      value={{
+        locale: language.intl,
+        layoutLocale: language.layoutLocale,
+        t: language.t as UiI18n["t"],
+        plural: language.plural,
+        pluralForm: language.pluralForm,
+      }}
     >
       {props.children}
     </I18nProvider>

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

@@ -29,7 +29,7 @@ import {
 } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { useParams } from "@solidjs/router"
-import { ExternalLink } from "@/components/external-link"
+import { Link } from "@/components/link"
 import { useServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
@@ -389,7 +389,7 @@ function ProviderConnection(props: {
   const settings = useSettings()
   const newLayout = settings.general.newLayoutDesigns
   const providers = useProviders(() => props.directory?.())
-  const directory = () => props.directory?.() ?? decode64(params.dir)
+  const directory = () => (props.directory ? props.directory() : decode64(params.dir))
   const location = () => {
     const value = directory()
     return value ? { directory: value } : undefined
@@ -509,12 +509,7 @@ function ProviderConnection(props: {
     const hint = suffix?.[1]
     return {
       label: suffix ? label.slice(0, -suffix[0].length) : label,
-      hint:
-        hint?.toLowerCase() === "headless"
-          ? language.t("provider.connect.method.headless")
-          : hint?.toLowerCase() === "browser" || (!hint && value?.type === "key")
-            ? language.t("provider.connect.method.browser")
-            : undefined,
+      hint: hint ? hint[0].toUpperCase() + hint.slice(1) : value?.type === "key" ? "Browser" : undefined,
     }
   }
 
@@ -841,12 +836,12 @@ function ProviderConnection(props: {
               <div>{language.t("provider.connect.opencodeZen.line2")}</div>
               <div>
                 {language.t("provider.connect.opencodeZen.visit.prefix")}
-                <ExternalLink
+                <Link
                   href="https://opencode.ai/zen"
                   class="text-v2-text-text-base focus-visible:rounded-xs focus-visible:outline-2 focus-visible:outline-v2-border-border-focus"
                 >
                   {language.t("provider.connect.opencodeZen.visit.link")}
-                </ExternalLink>
+                </Link>
                 {language.t("provider.connect.opencodeZen.visit.suffix")}
               </div>
             </div>
@@ -891,9 +886,9 @@ function ProviderConnection(props: {
               <div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line2")}</div>
               <div class="text-14-regular text-text-base">
                 {language.t("provider.connect.opencodeZen.visit.prefix")}
-                <ExternalLink href="https://opencode.ai/zen" tabIndex={-1}>
+                <Link href="https://opencode.ai/zen" tabIndex={-1}>
                   {language.t("provider.connect.opencodeZen.visit.link")}
-                </ExternalLink>
+                </Link>
                 {language.t("provider.connect.opencodeZen.visit.suffix")}
               </div>
             </div>
@@ -972,9 +967,9 @@ function ProviderConnection(props: {
         <div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
           <div>
             {language.t("provider.connect.oauth.code.visit.prefix")}
-            <ExternalLink href={store.authorization!.url} class="text-v2-text-text-base">
+            <Link href={store.authorization!.url} class="text-v2-text-text-base">
               {language.t("provider.connect.oauth.code.visit.link")}
-            </ExternalLink>
+            </Link>
             {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
           </div>
           <form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
@@ -1011,9 +1006,7 @@ function ProviderConnection(props: {
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.code.visit.prefix")}
-          <ExternalLink href={store.authorization!.url}>
-            {language.t("provider.connect.oauth.code.visit.link")}
-          </ExternalLink>
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
           {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
         </div>
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -1084,9 +1077,7 @@ function ProviderConnection(props: {
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <ExternalLink href={store.authorization!.url}>
-            {language.t("provider.connect.oauth.auto.visit.link")}
-          </ExternalLink>
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
           {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
         </div>
         <TextField

packages/app/src/components/dialog-edit-project-v2.css

@@ -0,0 +1,238 @@
+.project-settings-v2-dialog [data-slot="dialog-container"] {
+  background: var(--v2-background-bg-base);
+}
+
+.project-settings-v2-dialog [data-slot="dialog-body"] {
+  padding: 0;
+  overflow: hidden;
+}
+
+.project-settings-v2 {
+  height: 100%;
+}
+
+.project-settings-v2-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.project-settings-v2-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden !important;
+  user-select: none;
+}
+
+.project-settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
+  user-select: text;
+}
+
+.project-settings-v2-form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.project-settings-v2-scroll {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 24px;
+  min-height: 0;
+  padding: 40px;
+  overflow-y: auto;
+}
+
+.project-settings-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.project-settings-page-header h2 {
+  color: var(--v2-text-text-base);
+  font-size: 15px;
+  font-weight: 640;
+  line-height: 1;
+}
+
+.project-settings-page-header > span {
+  color: var(--v2-text-text-muted);
+  font-size: 11px;
+  font-weight: 440;
+  line-height: 1;
+}
+
+.project-settings-extensions {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 40px;
+}
+
+.project-settings-extension-tabs {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  margin-top: 24px;
+  overflow: visible;
+}
+
+.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
+  width: auto;
+  padding-inline: 0 !important;
+}
+
+.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
+  display: none;
+}
+
+.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger-wrapper"] {
+  border-radius: 6px;
+}
+
+.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger"] {
+  padding-inline: 8px;
+}
+
+.project-settings-extension-tabs [data-slot="tabs-v2-content"] {
+  overflow-y: auto;
+}
+
+.project-settings-extension-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 20px;
+}
+
+.project-settings-extension-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+}
+
+.project-settings-extension-section-header > :last-child {
+  color: var(--v2-text-text-faint);
+  font-size: 11px;
+  font-weight: 440;
+}
+
+.project-settings-extension-link {
+  color: var(--v2-text-text-accent) !important;
+  text-decoration: none;
+}
+
+.project-settings-extension-link:hover {
+  text-decoration: underline;
+}
+
+.project-settings-extension-card {
+  padding-inline: 12px;
+  overflow: hidden;
+  border: 0.5px solid var(--v2-border-border-base);
+  border-radius: 8px;
+  background: var(--v2-background-bg-base);
+}
+
+.project-settings-extension-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 48px;
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.project-settings-extension-row:last-child {
+  border-bottom: 0;
+}
+
+.project-settings-extension-row-main {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.project-settings-extension-row-icon {
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted);
+}
+
+.project-settings-extension-row-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-settings-extension-row-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  color: var(--v2-text-text-muted);
+  font-size: 11px;
+}
+
+.project-settings-extension-row-status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--v2-state-fg-warning);
+}
+
+.project-settings-shared {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.project-settings-shared-trigger {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 6px;
+  color: var(--v2-text-text-base);
+  font-size: 11px;
+  font-weight: 530;
+}
+
+.project-settings-shared-chevron {
+  width: 12px;
+  height: 12px;
+  color: var(--v2-icon-icon-muted);
+  transition: transform 120ms ease;
+}
+
+.project-settings-shared-chevron.open {
+  transform: rotate(90deg);
+}
+
+.project-settings-shared-count {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-muted);
+  font-size: 9px;
+}

packages/app/src/components/dialog-edit-project-v2.tsx

@@ -1,156 +1,223 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
 import { Field } from "@opencode-ai/ui/v2/field-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { TextareaV2 } from "@opencode-ai/ui/v2/textarea-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { For, Show } from "solid-js"
+import { For, Show, createSignal, startTransition } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import { SDKProvider } from "@/context/sdk"
 import { ServerConnection } from "@/context/server"
-import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { createEditProjectModel } from "./edit-project"
+import { ProjectSettingsExtensions } from "./project-settings-extensions"
+import { SettingsServerDataScope } from "./settings-server-picker"
+import "./settings-v2/settings-v2.css"
+import "./dialog-edit-project-v2.css"
 
 export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
+  return (
+    <SettingsServerDataScope server={props.server}>
+      <SDKProvider directory={props.project.worktree}>
+        <ProjectSettingsDialog project={props.project} server={props.server} />
+      </SDKProvider>
+    </SettingsServerDataScope>
+  )
+}
+
+function ProjectSettingsDialog(props: { project: LocalProject; server: ServerConnection.Any }) {
   const language = useLanguage()
   const model = createEditProjectModel(props)
+  const projectName = () => displayName(props.project)
+  const [tab, setTab] = createSignal("general")
+
+  const Footer = () => (
+    <DialogFooter>
+      <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
+        {language.t("common.cancel")}
+      </ButtonV2>
+      <ButtonV2 type="submit" variant="contrast" disabled={model.save.isPending}>
+        {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
+      </ButtonV2>
+    </DialogFooter>
+  )
 
   return (
-    <Dialog fit>
-      <form onSubmit={model.submit} class="contents">
-        <DialogHeader>
-          <DialogTitle>{language.t("dialog.project.edit.title")}</DialogTitle>
-        </DialogHeader>
-        <DividerV2 />
-        <DialogBody class="flex max-h-[min(560px,calc(100vh-160px))] w-full flex-col gap-6 overflow-y-auto px-4 pt-4 pb-1">
-          <Field>
-            <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
-            <TextInputV2
-              autofocus
-              appearance="large"
-              class="!w-full"
-              value={model.store.name}
-              placeholder={model.folderName()}
-              onInput={(event) => model.setStore("name", event.currentTarget.value)}
-            />
-          </Field>
-
-          <div class="flex w-full flex-col gap-2">
-            <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
-              {language.t("dialog.project.edit.icon")}
-            </div>
-            <div class="flex items-center gap-3">
-              <button
-                type="button"
-                aria-label={language.t("dialog.project.edit.icon.alt")}
-                class="relative size-16 shrink-0 cursor-pointer overflow-hidden rounded-[6px] outline outline-1 outline-transparent transition-[background-color,outline-color] focus-visible:outline-v2-border-border-focus"
-                classList={{
-                  "bg-v2-overlay-simple-overlay-hover outline-v2-border-border-focus": model.store.dragOver,
-                }}
-                onMouseEnter={() => model.setStore("iconHover", true)}
-                onMouseLeave={() => model.setStore("iconHover", false)}
-                onDrop={model.drop}
-                onDragOver={model.dragOver}
-                onDragLeave={model.dragLeave}
-                onClick={model.iconClick}
-              >
-                <ProjectAvatar
-                  fallback={model.store.name || model.defaultName()}
-                  src={getProjectAvatarSource(props.project.id, {
-                    color: model.store.color,
-                    url: props.project.icon?.url,
-                    override: model.store.iconOverride,
-                  })}
-                  variant={getProjectAvatarVariant(model.store.color)}
-                  class="!size-16 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[32px]"
-                />
-                <span
-                  class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[6px] bg-v2-background-bg-contrast/80 text-v2-icon-icon-contrast backdrop-blur-[2px] transition-opacity"
-                  classList={{
-                    "opacity-100": model.store.iconHover,
-                    "opacity-0": !model.store.iconHover,
-                  }}
-                >
-                  <Icon name={model.store.iconOverride ? "close" : "outline-share"} />
-                </span>
-              </button>
-              <input
-                ref={(element) => {
-                  model.setIconInput(element)
-                }}
-                type="file"
-                accept="image/*"
-                class="hidden"
-                onChange={model.inputChange}
+    <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
+      <TabsV2
+        orientation="vertical"
+        variant="settings"
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
+        class="project-settings-v2"
+      >
+        <TabsV2.List>
+          <div class="project-settings-v2-nav">
+            <TabsV2.Trigger value="general">
+              <ProjectAvatar
+                fallback={projectName()}
+                variant={getProjectAvatarVariant(props.project.icon?.color)}
+                class="!size-4 shrink-0"
               />
-              <div class="flex select-none flex-col gap-[6px] text-[11px] font-[440] leading-none tracking-[0.05px] text-v2-text-text-muted">
-                <span>{language.t("dialog.project.edit.icon.hint")}</span>
-                <span>{language.t("dialog.project.edit.icon.recommended")}</span>
-              </div>
-            </div>
+              <span class="truncate">{projectName()}</span>
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="scripts">
+              <Icon name="code" size="small" />
+              {language.t("project.settings.scripts")}
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="extensions">
+              <Icon name="extensions" size="small" />
+              {language.t("settings.tab.extensions")}
+            </TabsV2.Trigger>
           </div>
+        </TabsV2.List>
 
-          <Show when={!model.store.iconOverride}>
-            <div class="flex w-full flex-col gap-2">
-              <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
-                {language.t("dialog.project.edit.color")}
+        <TabsV2.Content value="general" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
+              <div class="project-settings-page-header">
+                <h2>{language.t("dialog.project.edit.title")}</h2>
+                <span>{language.t("project.settings.general.description")}</span>
               </div>
-              <div class="-ml-1 flex gap-1.5">
-                <For each={PROJECT_AVATAR_VARIANTS}>
-                  {(color) => (
-                    <button
-                      type="button"
-                      aria-label={language.t("dialog.project.edit.color.select", { color })}
-                      aria-pressed={getProjectAvatarVariant(model.store.color) === color}
-                      class="flex size-8 items-center justify-center rounded-[10px] p-1 outline outline-1 outline-transparent transition-[background-color,outline-color] hover:bg-v2-overlay-simple-overlay-hover focus-visible:outline-v2-border-border-focus"
+
+              <Field>
+                <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
+                <TextInputV2
+                  autofocus
+                  appearance="large"
+                  class="!w-full"
+                  value={model.store.name}
+                  placeholder={model.folderName()}
+                  onInput={(event) => model.setStore("name", event.currentTarget.value)}
+                />
+              </Field>
+
+              <div class="flex w-full flex-col gap-2">
+                <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
+                  {language.t("dialog.project.edit.icon")}
+                </div>
+                <div class="flex items-center gap-3">
+                  <button
+                    type="button"
+                    aria-label={language.t("dialog.project.edit.icon.alt")}
+                    class="relative size-16 shrink-0 cursor-pointer overflow-hidden rounded-[6px] outline outline-1 outline-transparent transition-[background-color,outline-color] focus-visible:outline-v2-border-border-focus"
+                    classList={{
+                      "bg-v2-overlay-simple-overlay-hover outline-v2-border-border-focus": model.store.dragOver,
+                    }}
+                    onMouseEnter={() => model.setStore("iconHover", true)}
+                    onMouseLeave={() => model.setStore("iconHover", false)}
+                    onDrop={model.drop}
+                    onDragOver={model.dragOver}
+                    onDragLeave={model.dragLeave}
+                    onClick={model.iconClick}
+                  >
+                    <ProjectAvatar
+                      fallback={model.store.name || model.defaultName()}
+                      src={getProjectAvatarSource(props.project.id, {
+                        color: model.store.color,
+                        url: props.project.icon?.url,
+                        override: model.store.iconOverride,
+                      })}
+                      variant={getProjectAvatarVariant(model.store.color)}
+                      class="!size-16 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[32px]"
+                    />
+                    <span
+                      class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[6px] bg-v2-background-bg-contrast/80 text-v2-icon-icon-contrast backdrop-blur-[2px] transition-opacity"
                       classList={{
-                        "bg-v2-overlay-simple-overlay-hover [box-shadow:inset_0_0_0_2px_var(--v2-border-border-focus)]":
-                          getProjectAvatarVariant(model.store.color) === color,
-                      }}
-                      onClick={() => {
-                        if (getProjectAvatarVariant(model.store.color) === color && !props.project.icon?.url) return
-                        model.setStore(
-                          "color",
-                          getProjectAvatarVariant(model.store.color) === color ? undefined : color,
-                        )
+                        "opacity-100": model.store.iconHover,
+                        "opacity-0": !model.store.iconHover,
                       }}
                     >
-                      <ProjectAvatar
-                        fallback={model.store.name || model.defaultName()}
-                        variant={getProjectAvatarVariant(color)}
-                        class="!size-6 [&_[data-slot=project-avatar-surface]]:!rounded-[6px]"
-                      />
-                    </button>
-                  )}
-                </For>
+                      <IconV2 name={model.store.iconOverride ? "close" : "share"} />
+                    </span>
+                  </button>
+                  <input
+                    ref={(element) => model.setIconInput(element)}
+                    type="file"
+                    accept="image/*"
+                    class="hidden"
+                    onChange={model.inputChange}
+                  />
+                  <div class="flex select-none flex-col gap-[6px] text-[11px] font-[440] leading-none tracking-[0.05px] text-v2-text-text-muted">
+                    <span>{language.t("dialog.project.edit.icon.hint")}</span>
+                    <span>{language.t("dialog.project.edit.icon.recommended")}</span>
+                  </div>
+                </div>
               </div>
-            </div>
-          </Show>
 
-          <Field>
-            <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
-            <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
-            <TextareaV2
-              class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
-              rows={3}
-              value={model.store.startup}
-              placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
-              spellcheck={false}
-              onInput={(event) => model.setStore("startup", event.currentTarget.value)}
-            />
-          </Field>
-        </DialogBody>
-        <DialogFooter>
-          <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
-            {language.t("common.cancel")}
-          </ButtonV2>
-          <ButtonV2 type="submit" variant="contrast" disabled={model.save.isPending}>
-            {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
-          </ButtonV2>
-        </DialogFooter>
-      </form>
+              <Show when={!model.store.iconOverride}>
+                <div class="flex w-full flex-col gap-2">
+                  <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
+                    {language.t("dialog.project.edit.color")}
+                  </div>
+                  <div class="-ml-1 flex gap-1.5">
+                    <For each={PROJECT_AVATAR_VARIANTS}>
+                      {(color) => (
+                        <button
+                          type="button"
+                          aria-label={language.t("dialog.project.edit.color.select", { color })}
+                          aria-pressed={getProjectAvatarVariant(model.store.color) === color}
+                          class="flex size-8 items-center justify-center rounded-[10px] p-1 outline outline-1 outline-transparent transition-[background-color,outline-color] hover:bg-v2-overlay-simple-overlay-hover focus-visible:outline-v2-border-border-focus"
+                          classList={{
+                            "bg-v2-overlay-simple-overlay-hover [box-shadow:inset_0_0_0_2px_var(--v2-border-border-focus)]":
+                              getProjectAvatarVariant(model.store.color) === color,
+                          }}
+                          onClick={() => {
+                            if (getProjectAvatarVariant(model.store.color) === color && !props.project.icon?.url) return
+                            model.setStore(
+                              "color",
+                              getProjectAvatarVariant(model.store.color) === color ? undefined : color,
+                            )
+                          }}
+                        >
+                          <ProjectAvatar
+                            fallback={model.store.name || model.defaultName()}
+                            variant={getProjectAvatarVariant(color)}
+                            class="!size-6 [&_[data-slot=project-avatar-surface]]:!rounded-[6px]"
+                          />
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </Show>
+            </div>
+            <Footer />
+          </form>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="scripts" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
+              <div class="project-settings-page-header">
+                <h2>{language.t("project.settings.scripts")}</h2>
+                <span>{language.t("project.settings.scripts.description")}</span>
+              </div>
+              <Field>
+                <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
+                <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
+                <TextareaV2
+                  class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
+                  rows={5}
+                  value={model.store.startup}
+                  placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
+                  spellcheck={false}
+                  onInput={(event) => model.setStore("startup", event.currentTarget.value)}
+                />
+              </Field>
+            </div>
+            <Footer />
+          </form>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="extensions" class="project-settings-v2-panel">
+          <ProjectSettingsExtensions />
+        </TabsV2.Content>
+      </TabsV2>
     </Dialog>
   )
 }

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

@@ -88,7 +88,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                   class="w-full"
                   placement="right-start"
                   gutter={6}
-                  openDelay={0}
+                  delay="intent"
                   contentStyle={{ "font-family": "var(--v2-font-family-sans)" }}
                   value={
                     <ModelTooltip

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

@@ -460,7 +460,7 @@ function ModelSelectorPopoverV2View(props: {
                               class="w-full"
                               placement="right-start"
                               gutter={6}
-                              openDelay={0}
+                              delay="intent"
                               value={
                                 <ModelTooltip
                                   model={item}

packages/app/src/components/help-button.tsx

@@ -10,9 +10,6 @@ import introducingTabsVideo from "@/assets/help/introducing-tabs.mp4"
 import homeImage from "@/assets/help/home.png"
 import tabsImage from "@/assets/help/tabs.png"
 
-// TODO: wire to changelog / seen-state when available
-const showPopover = () => true
-
 // can remove this after the tabs rollout has been out for a while
 export function TabsInfoPopup() {
   const settings = useSettings()
@@ -134,7 +131,6 @@ export function TabsInfoPopup() {
             <p>{language.t("help.tabs.home")}</p>
             <img src={homeImage} alt="" class="aspect-video w-full rounded-[6px] object-cover" />
             <p>{language.t("help.tabs.persistence")}</p>
-            <p>{language.t("help.tabs.worktrees")}</p>
           </div>
         </div>
       </DrawerContent>

packages/app/src/components/link.tsx

@@ -0,0 +1,13 @@
+import type { JSX } from "solid-js"
+
+export function Link(props: JSX.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      {...props}
+      target={props.target ?? "_blank"}
+      rel={props.rel ?? "noopener noreferrer"}
+    >
+      {props.children}
+    </a>
+  )
+}

packages/app/src/components/project-settings-extensions.tsx

@@ -0,0 +1,238 @@
+import { Icon } from "@opencode-ai/ui/icon"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { type Component, For, Show, createMemo, createResource, createSignal } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useSync } from "@/context/sync"
+import { Link } from "./link"
+
+type SkillItem = {
+  name: string
+  location: string
+}
+
+const pluginName = (item: string | [string, Record<string, unknown>]) => (typeof item === "string" ? item : item[0])
+const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
+
+const ExtensionCard: Component<{ children: unknown }> = (props) => (
+  <div class="project-settings-extension-card">{props.children as any}</div>
+)
+
+const ExtensionRow: Component<{
+  icon: "mcp" | "cube" | "post-skill" | "code"
+  name: string
+  status?: string
+  children?: unknown
+}> = (props) => (
+  <div class="project-settings-extension-row">
+    <div class="project-settings-extension-row-main">
+      <Icon name={props.icon} class="project-settings-extension-row-icon" />
+      <span class="project-settings-extension-row-name">{props.name}</span>
+    </div>
+    <Show when={props.status}>
+      {(status) => (
+        <span class="project-settings-extension-row-status">
+          <span class="project-settings-extension-row-status-dot" />
+          {status()}
+        </span>
+      )}
+    </Show>
+    {props.children as any}
+  </div>
+)
+
+const SharedSection: Component<{
+  count: number
+  children: unknown
+}> = (props) => {
+  const language = useLanguage()
+  const [open, setOpen] = createSignal(false)
+  return (
+    <Show when={props.count > 0}>
+      <div class="project-settings-shared">
+        <button
+          type="button"
+          class="project-settings-shared-trigger"
+          aria-expanded={open()}
+          onClick={() => setOpen((value) => !value)}
+        >
+          <Icon name="chevron-right" classList={{ "project-settings-shared-chevron": true, open: open() }} />
+          <span>{language.t("project.settings.extensions.shared")}</span>
+          <span class="project-settings-shared-count">{props.count}</span>
+        </button>
+        <Show when={open()}>
+          <ExtensionCard>{props.children}</ExtensionCard>
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+export const ProjectSettingsExtensions: Component = () => {
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const directorySDK = useSDK()
+  const serverSync = useServerSync()
+  const sync = useSync()
+  const toggleMcp = useMcpToggle()
+
+  const [serverMcp] = createResource(
+    serverSDK,
+    (sdk) =>
+      sdk.api.mcp
+        .list()
+        .then((result) => Object.fromEntries(result.data.map((server) => [server.name, server.status])))
+        .catch(() => ({})),
+    { initialValue: {} },
+  )
+  const globalMcpNames = createMemo(() =>
+    [...new Set([...Object.keys(serverSync().data.config.mcp ?? {}), ...Object.keys(serverMcp.latest)])].sort(),
+  )
+  const projectMcpNames = createMemo(() => {
+    const shared = new Set(globalMcpNames())
+    const configured = Object.keys(sync().data.config.mcp ?? {}).filter((name) => !shared.has(name))
+    if (configured.length > 0) return configured.sort()
+    return Object.keys(sync().data.mcp ?? {})
+      .filter((name) => !shared.has(name))
+      .sort()
+  })
+  const mcpEnabled = (name: string) => sync().data.mcp?.[name]?.status === "connected"
+
+  const globalPlugins = createMemo(() => (serverSync().data.config.plugin ?? []).map(pluginName))
+  const projectPlugins = createMemo(() => {
+    const shared = new Set(globalPlugins())
+    return (sync().data.config.plugin ?? []).map(pluginName).filter((name) => !shared.has(name))
+  })
+
+  const [serverSkills] = createResource(
+    serverSDK,
+    (sdk): Promise<SkillItem[]> =>
+      sdk.api.skill.list().then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
+    { initialValue: [] },
+  )
+  const [directorySkills] = createResource(
+    directorySDK,
+    (sdk): Promise<SkillItem[]> =>
+      sdk.api.skill
+        .list({ location: { directory: sdk.directory } })
+        .then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
+    { initialValue: [] },
+  )
+  const projectSkills = createMemo(() => {
+    const shared = new Set(serverSkills.latest.map(skillKey))
+    return directorySkills.latest.filter((item) => !shared.has(skillKey(item)))
+  })
+
+  const mcpRows = (items: string[]) => (
+    <For each={items}>
+      {(name) => (
+        <ExtensionRow icon="mcp" name={name}>
+          <Switch
+            checked={mcpEnabled(name)}
+            disabled={toggleMcp.isPending && toggleMcp.variables === name}
+            hideLabel
+            onChange={() => {
+              if (toggleMcp.isPending) return
+              toggleMcp.mutate(name)
+            }}
+          >
+            {name}
+          </Switch>
+        </ExtensionRow>
+      )}
+    </For>
+  )
+
+  const pluginRows = (items: string[]) => <For each={items}>{(name) => <ExtensionRow icon="cube" name={name} />}</For>
+
+  const skillRows = (items: SkillItem[]) => (
+    <For each={items}>{(item) => <ExtensionRow icon="post-skill" name={item.name} />}</For>
+  )
+
+  return (
+    <div class="project-settings-extensions">
+      <div class="project-settings-page-header">
+        <h2>{language.t("settings.tab.extensions")}</h2>
+        <span>{language.t("project.settings.extensions.description")}</span>
+      </div>
+
+      <TabsV2 variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
+        <TabsV2.List>
+          <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="lsps">{language.t("project.settings.extensions.tab.lsps")}</TabsV2.Trigger>
+        </TabsV2.List>
+
+        <TabsV2.Content value="mcps">
+          <div class="project-settings-extension-section">
+            <div class="project-settings-extension-section-header">
+              <span>{language.t("project.settings.extensions.added")}</span>
+              <span>{language.t("settings.extensions.manageConfig")}</span>
+            </div>
+            <Show when={projectMcpNames().length > 0}>
+              <ExtensionCard>{mcpRows(projectMcpNames())}</ExtensionCard>
+            </Show>
+            <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="plugins">
+          <div class="project-settings-extension-section">
+            <div class="project-settings-extension-section-header">
+              <span>{language.t("project.settings.extensions.added")}</span>
+              <span>{language.t("settings.extensions.manageConfig")}</span>
+            </div>
+            <Show when={projectPlugins().length > 0}>
+              <ExtensionCard>{pluginRows(projectPlugins())}</ExtensionCard>
+            </Show>
+            <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="skills">
+          <div class="project-settings-extension-section">
+            <div class="project-settings-extension-section-header">
+              <span>{language.t("project.settings.extensions.added")}</span>
+              <Link class="project-settings-extension-link" href="https://opencode.ai/docs/skills/">
+                {language.t("settings.extensions.addSkills")}
+              </Link>
+            </div>
+            <Show when={projectSkills().length > 0}>
+              <ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
+            </Show>
+            <SharedSection count={serverSkills.latest.length}>{skillRows(serverSkills.latest)}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="lsps">
+          <div class="project-settings-extension-section">
+            <div class="project-settings-extension-section-header">
+              <span>{language.t("project.settings.extensions.lsp.detected")}</span>
+              <span>{language.t("project.settings.extensions.lsp.description")}</span>
+            </div>
+            <Show when={sync().data.lsp.length > 0}>
+              <ExtensionCard>
+                <For each={sync().data.lsp}>
+                  {(item) => (
+                    <ExtensionRow
+                      icon="code"
+                      name={item.name || item.id}
+                      status={
+                        item.status === "error" ? language.t("project.settings.extensions.setupRequired") : undefined
+                      }
+                    />
+                  )}
+                </For>
+              </ExtensionCard>
+            </Show>
+          </div>
+        </TabsV2.Content>
+      </TabsV2>
+    </div>
+  )
+}

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

@@ -37,6 +37,7 @@ export type PromptInputV2ComposerProps = {
   class?: string
   controller: PromptInputV2ComposerController
   borderUnderlay?: boolean
+  accentSubmit?: boolean
 }
 
 export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class" | "submission">
@@ -53,6 +54,7 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
     <div class="flex flex-col gap-3">
       <PromptInputV2
         controller={props.controller}
+        accentSubmit={props.accentSubmit}
         borderUnderlay={props.borderUnderlay}
         class={props.class}
         variantControlVisible={!props.controller.model.loading}

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

@@ -47,7 +47,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                   </span>
                 }
                 placement="top"
-                openDelay={800}
+                {...(!props.newLayoutDesigns ? { openDelay: 800 } : {})}
               >
                 <div
                   classList={{

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

@@ -53,12 +53,7 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
             <For each={props.comments ?? []}>
               {(item) => (
                 <div class="relative group shrink-0">
-                  <TooltipV2
-                    value={item.comment}
-                    placement="top"
-                    openDelay={800}
-                    contentClass="max-w-[300px] break-words"
-                  >
+                  <TooltipV2 value={item.comment} placement="top" contentClass="max-w-[300px] break-words">
                     <CommentCardV2
                       comment={item.comment ?? ""}
                       path={item.path}

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

@@ -1,18 +1,18 @@
 import { beforeAll, beforeEach, describe, expect, mock, test } from "bun:test"
 import { createStore } from "solid-js/store"
 import type { Prompt, PromptStore } from "@/context/prompt"
-import type { ModelSelection } from "@/context/local"
+import { Worktree } from "@/utils/worktree"
+import { WorkspaceOperation } from "@/utils/workspace-operation"
+import { ServerScope } from "@/utils/server-scope"
 
 let createPromptSubmit: typeof import("./submit").createPromptSubmit
 
-const createdClients: string[] = []
 const createdSessions: string[] = []
-const sessionCreateInputs: Array<{
+type SessionCreateInput = {
   agent?: string
   model?: { id: string; providerID: string; variant?: string }
   location?: { directory: string }
-}> = []
-const enabledAutoAccept: Array<{ server: string; sessionID: string; directory: string }> = []
+}
 const optimistic: Array<{
   directory?: string
   sessionID?: string
@@ -22,24 +22,35 @@ const optimistic: Array<{
     variant?: string
   }
 }> = []
-const optimisticSeeded: boolean[] = []
 const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
-const promoted: Array<{ directory: string; sessionID: string }> = []
 const sentShell: Array<{ sessionID: string; id?: string; command: string }> = []
-const syncedDirectories: string[] = []
+const sentShellDirectories: string[] = []
 const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string }> = []
 const sentPrompts: string[] = []
 const promptInputs: unknown[] = []
 const sentCommands: unknown[] = []
-const commands: Array<{ name: string }> = []
+const updatedDrafts: Array<{ draftID: string; worktree?: string }> = []
+const syncedServers: string[] = []
+const optimisticServers: string[] = []
+const promptCaptures: Array<{ scope?: unknown; target?: unknown }> = []
 let serverSessionSyncs = 0
 
 let params: { id?: string } = {}
 let search: { draftId?: string } = {}
 let selected = "/repo/worktree-a"
 let variant: string | undefined
-let permissionServer = "server-a"
 let createSessionGate: Promise<void> | undefined
+let createWorktreeGate: Promise<void> | undefined
+let worktreeFailure: Error | undefined
+let worktreeHung = false
+let worktreeCreates = 0
+let activeSDK = "server-a"
+let activeServerSync = "server-a"
+let activeDirectorySync = "server-a"
+let commands: Array<{ name: string }> = []
+let worktreeDirectory = "/repo/new-0"
+let worktreeID = 0
+const draftServers: Record<string, string> = {}
 
 let promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
 const [promptStore, setPromptStore] = createStore<PromptStore>({
@@ -67,19 +78,21 @@ const prompt = {
     replaceComments: () => undefined,
     items: () => [],
   },
-  capture: () => prompt,
+  capture: (scope?: unknown, target?: unknown) => {
+    promptCaptures.push({ scope, target })
+    return prompt
+  },
 }
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0))
 
 const clientFor = (directory: string) => {
-  createdClients.push(directory)
   return {
     api: {
       session: {
-        create: async (input: (typeof sessionCreateInputs)[number]) => {
+        create: async (input: SessionCreateInput) => {
           await createSessionGate
           const location = input.location?.directory ?? directory
           createdSessions.push(location)
-          sessionCreateInputs.push(input)
           return {
             id: `session-${createdSessions.length}`,
             projectID: "project",
@@ -102,6 +115,7 @@ const clientFor = (directory: string) => {
         },
         shell: async (input: { sessionID: string; id?: string; command: string }) => {
           sentShell.push(input)
+          sentShellDirectories.push(directory)
         },
       },
     },
@@ -110,7 +124,16 @@ const clientFor = (directory: string) => {
       abort: async () => ({ data: undefined }),
     },
     worktree: {
-      create: async () => ({ data: { directory: `${directory}/new` } }),
+      create: async (_input: unknown, options?: { signal?: AbortSignal }) => {
+        worktreeCreates++
+        if (worktreeHung)
+          return new Promise<never>((_, reject) => {
+            options?.signal?.addEventListener("abort", () => reject(options.signal?.reason), { once: true })
+          })
+        await createWorktreeGate
+        if (worktreeFailure) throw worktreeFailure
+        return { data: { directory: worktreeDirectory } }
+      },
     },
   }
 }
@@ -127,13 +150,13 @@ beforeAll(async () => {
 
   mock.module("@opencode-ai/sdk/v2/client", () => ({
     createOpencodeClient: (input: { directory: string }) => {
-      createdClients.push(input.directory)
       return clientFor(input.directory)
     },
   }))
 
   mock.module("@opencode-ai/ui/toast", () => ({
     Toast: { Region: () => null },
+    toaster: { create: () => undefined, show: () => undefined, dismiss: () => undefined },
     showToast: () => 0,
   }))
 
@@ -151,20 +174,13 @@ beforeAll(async () => {
         current: () => ({ name: "agent" }),
       },
       session: {
-        promote(directory: string, sessionID: string) {
-          promoted.push({ directory, sessionID })
-        },
+        promote: () => undefined,
       },
     }),
   }))
 
   mock.module("@/context/permission", () => {
-    const state = (server: string) => ({
-      enableAutoAccept(sessionID: string, directory: string) {
-        enabledAutoAccept.push({ server, sessionID, directory })
-      },
-    })
-    return { usePermission: () => ({ currentServerState: () => state(permissionServer) }) }
+    return { usePermission: () => ({ currentServerState: () => ({ enableAutoAccept: () => undefined }) }) }
   })
 
   mock.module("@/context/server", () => ({
@@ -173,7 +189,10 @@ beforeAll(async () => {
 
   mock.module("@/context/tabs", () => ({
     useTabs: () => ({
-      draft: () => ({ server: "project-server" }),
+      draft: (draftID: string) => ({ server: draftServers[draftID] ?? "project-server" }),
+      updateDraft: (draftID: string, draft: { worktree?: string }) => {
+        updatedDrafts.push({ draftID, ...draft })
+      },
       promoteDraft: (draftID: string, session: { server: string; sessionId: string }) => {
         promotedDrafts.push({ draftID, ...session })
       },
@@ -194,72 +213,75 @@ beforeAll(async () => {
 
   mock.module("@/context/sdk", () => ({
     useSDK: () => {
-      const sdk = {
-        scope: "local",
-        directory: "/repo/main",
+      return () => ({
+        scope: activeSDK === "server-a" ? ServerScope.local : "server-b",
+        directory: activeSDK === "server-a" ? "/repo/main" : "/repo/other",
         client: rootClient,
         api: rootClient.api,
         url: "http://localhost:4096",
+        createApi: (directory: string) => clientFor(directory).api,
         createClient(opts: any) {
           return clientFor(opts.directory)
         },
-      }
-      return () => sdk
+      })
     },
   }))
 
   mock.module("@/context/sync", () => ({
-    useSync: () => () => ({
-      data: { command: commands },
-      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,
-            )
+    useSync: () => () => {
+      const server = activeDirectorySync
+      return {
+        data: { command: commands },
+        session: {
+          optimistic: {
+            add: (value: {
+              directory?: string
+              sessionID?: string
+              message: { agent: string; model: { providerID: string; modelID: string; variant?: string } }
+            }) => {
+              optimisticServers.push(server)
+              optimistic.push(value)
+            },
+            remove: () => undefined,
           },
-          remove: () => undefined,
         },
-      },
-      set: () => undefined,
-    }),
+        set: () => undefined,
+        project: { worktree: server === "server-a" ? "/repo/main" : "/repo/other" },
+      }
+    },
   }))
 
   mock.module("@/context/server-sync", () => ({
-    useServerSync: () => () => ({
-      session: {
-        remember: () => undefined,
-        set: () => undefined,
-        sync: async () => {
-          serverSessionSyncs++
-        },
-      },
-      child: (directory: string) => {
-        syncedDirectories.push(directory)
-        storedSessions[directory] ??= []
-        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 }>
-            }
+    useServerSync: () => () => {
+      const server = activeServerSync
+      return {
+        session: {
+          remember: () => undefined,
+          set: () => undefined,
+          sync: async () => {
+            serverSessionSyncs++
           },
-        ]
-      },
-    }),
+        },
+        child: (directory: string) => {
+          syncedServers.push(server)
+          storedSessions[directory] ??= []
+          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 }>
+              }
+            },
+          ]
+        },
+      }
+    },
   }))
 
   mock.module("@/context/platform", () => ({
@@ -279,198 +301,153 @@ beforeAll(async () => {
 })
 
 beforeEach(() => {
-  createdClients.length = 0
   createdSessions.length = 0
-  sessionCreateInputs.length = 0
-  enabledAutoAccept.length = 0
   optimistic.length = 0
-  optimisticSeeded.length = 0
-  promoted.length = 0
   promotedDrafts.length = 0
+  updatedDrafts.length = 0
+  sentCommands.length = 0
   sentPrompts.length = 0
   promptInputs.length = 0
-  sentCommands.length = 0
-  commands.length = 0
-  promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
+  syncedServers.length = 0
+  optimisticServers.length = 0
+  promptCaptures.length = 0
   params = {}
   search = {}
   sentShell.length = 0
-  syncedDirectories.length = 0
+  sentShellDirectories.length = 0
   selected = "/repo/worktree-a"
   variant = undefined
-  permissionServer = "server-a"
+  activeSDK = "server-a"
+  activeServerSync = "server-a"
+  activeDirectorySync = "server-a"
+  commands = []
+  promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
+  worktreeDirectory = `/repo/new-${++worktreeID}`
   createSessionGate = undefined
   serverSessionSyncs = 0
+  createWorktreeGate = undefined
+  worktreeFailure = undefined
+  worktreeHung = false
+  worktreeCreates = 0
+  for (const key of Object.keys(draftServers)) delete draftServers[key]
   for (const key of Object.keys(storedSessions)) delete storedSessions[key]
 })
 
+const event = { preventDefault: () => undefined } as unknown as Event
+const makeSubmit = (overrides: Partial<Parameters<typeof createPromptSubmit>[0]> = {}) =>
+  createPromptSubmit({
+    prompt,
+    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,
+    ...overrides,
+  })
+
 describe("prompt submit worktree selection", () => {
-  test("reads the latest worktree accessor value per submit", async () => {
-    const submit = createPromptSubmit({
-      prompt,
-      info: () => undefined,
-      imageAttachments: () => [],
-      commentCount: () => 0,
-      autoAccept: () => false,
-      mode: () => "shell",
-      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,
+  test("admits only one concurrent new-workspace submission", async () => {
+    selected = "create"
+    let release = () => {}
+    createWorktreeGate = new Promise<void>((resolve) => {
+      release = resolve
     })
+    const submit = makeSubmit()
 
-    const event = { preventDefault: () => undefined } as unknown as Event
+    const first = submit.handleSubmit(event)
+    const duplicate = submit.handleSubmit(event)
+    expect(worktreeCreates).toBe(1)
 
-    await submit.handleSubmit(event)
-    selected = "/repo/worktree-b"
-    await submit.handleSubmit(event)
+    release()
+    await Promise.all([first, duplicate])
+    expect(createdSessions).toEqual([worktreeDirectory])
+    Worktree.ready(ServerScope.local, worktreeDirectory)
+    await settle()
 
-    expect(createdClients).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
-    expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
-    expect(sessionCreateInputs).toEqual([
-      {
-        agent: "agent",
-        model: { id: "model", providerID: "provider", variant: undefined },
-        location: { directory: "/repo/worktree-a" },
-      },
-      {
-        agent: "agent",
-        model: { id: "model", providerID: "provider", variant: undefined },
-        location: { directory: "/repo/worktree-b" },
-      },
-    ])
-    expect(sentShell).toEqual([
-      expect.objectContaining({ sessionID: "session-1", id: expect.stringMatching(/^evt_/), command: "ls" }),
-      expect.objectContaining({ sessionID: "session-2", id: expect.stringMatching(/^evt_/), command: "ls" }),
-    ])
-    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
-    expect(serverSessionSyncs).toBe(0)
-    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"])
+    expect(worktreeCreates).toBe(1)
+    expect(createdSessions).toHaveLength(1)
+    expect(sentPrompts).toEqual([worktreeDirectory])
   })
 
-  test("applies auto-accept to newly created sessions", async () => {
-    const submit = createPromptSubmit({
-      prompt,
-      info: () => undefined,
-      imageAttachments: () => [],
-      commentCount: () => 0,
-      autoAccept: () => true,
-      mode: () => "shell",
-      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,
+  test("aborts a hung new-workspace request and allows retry", async () => {
+    selected = "create"
+    worktreeHung = true
+    let resets = 0
+    const submit = makeSubmit({
+      onNewSessionWorktreeReset: () => resets++,
+      worktreeRequestTimeoutMs: 1,
     })
 
-    const event = { preventDefault: () => undefined } as unknown as Event
-
     await submit.handleSubmit(event)
 
-    expect(enabledAutoAccept).toEqual([{ server: "server-a", sessionID: "session-1", directory: "/repo/worktree-a" }])
+    expect(worktreeCreates).toBe(1)
+    expect(createdSessions).toEqual([])
+    expect(selected).toBe("create")
+    expect(promptValue).toEqual([{ type: "text", content: "ls", start: 0, end: 2 }])
+    expect(resets).toBe(0)
+
+    worktreeHung = false
+    await submit.handleSubmit(event)
+    Worktree.ready(ServerScope.local, worktreeDirectory)
+    await settle()
+
+    expect(worktreeCreates).toBe(2)
+    expect(createdSessions).toEqual([worktreeDirectory])
+    expect(sentPrompts).toEqual([worktreeDirectory])
+    expect(resets).toBe(1)
   })
 
-  test("keeps auto-accept bound to the submission server", async () => {
+  test("keeps async submission effects bound to the initiating context", async () => {
+    search = { draftId: "draft-1" }
+    draftServers["draft-1"] = "project-server-a"
+    draftServers["draft-2"] = "project-server-b"
     let release = () => {}
     createSessionGate = new Promise<void>((resolve) => {
       release = resolve
     })
-    const submit = createPromptSubmit({
-      prompt,
-      info: () => undefined,
-      imageAttachments: () => [],
-      commentCount: () => 0,
-      autoAccept: () => true,
-      mode: () => "shell",
-      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,
+    let submitted = 0
+    const submit = makeSubmit({
+      onSubmit: () => submitted++,
     })
 
-    const result = submit.handleSubmit({ preventDefault: () => undefined } as unknown as Event)
-    permissionServer = "server-b"
+    const result = submit.handleSubmit(event)
+    activeSDK = "server-b"
+    activeServerSync = "server-b"
+    activeDirectorySync = "server-b"
+    search.draftId = "draft-2"
     release()
     await result
+    await settle()
 
-    expect(enabledAutoAccept).toEqual([{ server: "server-a", sessionID: "session-1", directory: "/repo/worktree-a" }])
-  })
-
-  test("promotes drafts using the selected project's server", async () => {
-    search = { draftId: "draft-1" }
-    const submit = createPromptSubmit({
-      prompt,
-      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,
-    })
-
-    await submit.handleSubmit({ preventDefault: () => undefined } as unknown as Event)
-
-    expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server", sessionId: "session-1" }])
+    expect(updatedDrafts).toEqual([{ draftID: "draft-1", worktree: undefined }])
+    expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server-a", sessionId: "session-1" }])
+    expect(syncedServers.every((server) => server === "server-a")).toBe(true)
+    expect(optimisticServers).toEqual(["server-a"])
+    expect(promptCaptures.at(-1)?.target).toEqual({ server: "project-server-a", scope: ServerScope.local })
+    expect(WorkspaceOperation.get(ServerScope.local, "session-1")?.status).toBe("complete")
+    expect(WorkspaceOperation.get("server-b" as ServerScope, "session-1")).toBeUndefined()
+    expect(submitted).toBe(0)
   })
 
   test("includes the selected variant on optimistic prompts", async () => {
-    params = { id: "session-1" }
+    params.id = "session-1"
     variant = "high"
 
-    const submit = createPromptSubmit({
-      prompt,
+    const submit = makeSubmit({
       info: () => ({ id: "session-1" }),
-      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,
-      onSubmit: () => undefined,
     })
 
-    const event = { preventDefault: () => undefined } as unknown as Event
-
     await submit.handleSubmit(event)
     await Bun.sleep(0)
 
@@ -500,24 +477,12 @@ describe("prompt submit worktree selection", () => {
     commands.push({ name: "review" })
     promptValue = [{ type: "text", content: "/review staged changes", start: 0, end: 22 }]
 
-    const submit = createPromptSubmit({
-      prompt,
+    const submit = makeSubmit({
       info: () => ({ id: "session-1" }),
-      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,
     })
 
-    await submit.handleSubmit({ preventDefault: () => undefined } as unknown as Event)
+    await submit.handleSubmit(event)
+    await settle()
 
     expect(sentCommands).toEqual([
       {
@@ -533,66 +498,43 @@ describe("prompt submit worktree selection", () => {
     expect(serverSessionSyncs).toBe(0)
   })
 
-  test("uses an injected model selection", async () => {
-    params = { id: "session-1" }
-    const model = {
-      current: () => ({ id: "draft-model", provider: { id: "draft-provider" } }),
-      variant: { current: () => "draft-variant" },
-    } as unknown as ModelSelection
-    const submit = createPromptSubmit({
-      prompt,
-      info: () => ({ id: "session-1" }),
-      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,
-      model,
+  test("waits for a new workspace before sending an initial shell", async () => {
+    selected = "create"
+    const submit = makeSubmit({
+      mode: () => "shell",
     })
 
-    await submit.handleSubmit({ preventDefault: () => undefined } as unknown as Event)
-
-    expect(optimistic[0]).toMatchObject({
-      message: {
-        model: { providerID: "draft-provider", modelID: "draft-model", variant: "draft-variant" },
-      },
-    })
-  })
-
-  test("seeds new sessions before optimistic prompts are added", async () => {
-    const submit = createPromptSubmit({
-      prompt,
-      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(sentShell).toEqual([])
+    expect(WorkspaceOperation.get(ServerScope.local, "session-1")?.status).toBe("pending")
 
-    expect(storedSessions["/repo/worktree-a"]).toHaveLength(1)
-    expect(storedSessions["/repo/worktree-a"]?.[0]).toMatchObject({ id: "session-1", title: "New session 1" })
-    expect(optimisticSeeded).toEqual([true])
+    Worktree.ready(ServerScope.local, worktreeDirectory)
+    await settle()
+
+    expect(sentShellDirectories).toEqual([worktreeDirectory])
+    expect(sentShell[0]).toMatchObject({
+      sessionID: "session-1",
+      command: "ls",
+      agent: "agent",
+      model: { providerID: "provider", modelID: "model" },
+    })
+    expect(WorkspaceOperation.get(ServerScope.local, "session-1")?.status).toBe("complete")
+  })
+
+  test("settles a pending workspace operation when the initial prompt is aborted", async () => {
+    selected = "create"
+    const submit = makeSubmit()
+
+    await submit.handleSubmit(event)
+    expect(WorkspaceOperation.get(ServerScope.local, "session-1")?.status).toBe("pending")
+    params = { id: "session-1" }
+
+    await submit.abort()
+    await settle()
+
+    expect(sentPrompts).toEqual([])
+    expect(WorkspaceOperation.get(ServerScope.local, "session-1")).toMatchObject({
+      status: "failed",
+    })
   })
 })

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

@@ -15,10 +15,12 @@ import { useSDK, type DirectorySDK } from "@/context/sdk"
 import { useSync, type DirectorySync } from "@/context/sync"
 import { Identifier } from "@/utils/id"
 import { Worktree as WorktreeState } from "@/utils/worktree"
+import { WorkspaceOperation } from "@/utils/workspace-operation"
+import { WORKSPACE_PREPARATION_TIMEOUT_MS, workspaceRequestWithTimeout } from "@/utils/workspace-request"
 import { buildRequestParts } from "./build-request-parts"
 import { setCursorPosition } from "./editor-dom"
 import { formatServerError } from "@/utils/server-errors"
-import { ScopedKey } from "@/utils/server-scope"
+import { ScopedKey, type ServerScope } from "@/utils/server-scope"
 import { createPromptSubmissionState } from "./submission-state"
 import { normalizeSessionInfo } from "@/utils/session"
 import { Event } from "@opencode-ai/schema/event"
@@ -27,9 +29,13 @@ import { blobDataUrl } from "@/utils/draft-store"
 type PendingPrompt = {
   abort: AbortController
   cleanup: VoidFunction
+  scope: ServerScope
+  sessionID: string
+  serverSync: ServerSync
 }
 
 const pending = new Map<string, PendingPrompt>()
+const submitting = new Set<string>()
 
 export type FollowupDraft = {
   sessionID: string
@@ -43,6 +49,7 @@ export type FollowupDraft = {
 
 type FollowupSendInput = {
   api: DirectorySDK["api"]["session"]
+  scope: ServerScope
   serverSync: ServerSync
   sync: DirectorySync
   draft: FollowupDraft
@@ -56,6 +63,8 @@ const draftText = (prompt: Prompt) => prompt.map((part) => ("content" in part ?
 const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttachmentPart => part.type === "image")
 
 export async function sendFollowupDraft(input: FollowupSendInput) {
+  const operation = WorkspaceOperation.get(input.scope, input.draft.sessionID)
+  if (operation?.status === "pending" && operation.messageID !== input.messageID) return false
   const text = draftText(input.draft.prompt)
   const images = draftImages(input.draft.prompt)
   const setBusy = () => {
@@ -229,6 +238,7 @@ type PromptSubmitInput = {
   onAbort?: () => void
   onSubmit?: () => void
   model?: ModelSelection
+  worktreeRequestTimeoutMs?: number
 }
 
 export function createPromptSubmit(input: PromptSubmitInput) {
@@ -244,7 +254,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   const params = useParams()
   const [search] = useSearchParams<{ draftId?: string }>()
   const tabs = useTabs()
-  const pendingKey = (sessionID: string) => ScopedKey.from(sdk().scope, sessionID)
+  const pendingKey = (scope: ServerScope, sessionID: string) => ScopedKey.from(scope, sessionID)
+  let pendingSubmission: { key: string; scope: ServerScope; sessionID: string } | undefined
 
   const errorMessage = (err: unknown) => {
     if (err && typeof err === "object" && "message" in err && typeof err.message === "string") return err.message
@@ -257,18 +268,23 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   }
 
   const abort = async () => {
-    const sessionID = params.id
+    const routeSessionID = params.id
+    const owned =
+      pendingSubmission && (!routeSessionID || routeSessionID === pendingSubmission.sessionID)
+        ? pending.get(pendingSubmission.key)
+        : undefined
+    const sessionID = routeSessionID ?? owned?.sessionID
     if (!sessionID) return Promise.resolve()
-
-    serverSync().session.set("todo", sessionID, [])
+    ;(owned?.serverSync ?? serverSync()).session.set("todo", sessionID, [])
 
     input.onAbort?.()
 
-    const key = pendingKey(sessionID)
-    const queued = pending.get(key)
+    const key = owned ? pendingSubmission!.key : pendingKey(sdk().scope, sessionID)
+    const queued = owned ?? pending.get(key)
     if (queued) {
       queued.abort.abort()
       queued.cleanup()
+      WorkspaceOperation.fail(queued.scope, queued.sessionID)
       pending.delete(key)
       return Promise.resolve()
     }
@@ -300,9 +316,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     }
   }
 
-  const seed = (dir: string, info: Session) => {
-    serverSync().session.remember(info)
-    const [, setStore] = serverSync().child(dir)
+  const seed = (target: ServerSync, dir: string, info: Session) => {
+    target.session.remember(info)
+    const [, setStore] = target.child(dir)
     setStore("session", (list: Session[]) => {
       const result = Binary.search(list, info.id, (item) => item.id)
       const next = [...list]
@@ -334,6 +350,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       if (input.working()) void abort()
       return
     }
+    if (params.id && WorkspaceOperation.get(sdk().scope, params.id)?.status === "pending") return
 
     const modelSelection = input.model ?? local.model
     const currentModel = modelSelection.current()
@@ -347,295 +364,377 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       return
     }
 
-    input.addToHistory(currentPrompt, mode)
-    input.resetHistoryNavigation()
-
-    const projectDirectory = sdk().directory
+    const submissionSDK = sdk()
+    const submissionSync = sync()
+    const submissionServerSync = serverSync()
+    const submissionScope = submissionSDK.scope
+    const projectDirectory = submissionSDK.directory
+    const projectRoot = submissionSync.project?.worktree ?? projectDirectory
+    const sessionID = params.id
+    const isNewSession = !sessionID
+    const currentSession = input.info()
+    const draftID = search.draftId
+    const draftServer = draftID ? tabs.draft(draftID).server : undefined
+    const capturePrompt = prompt.capture
+    const localSession = local.session
+    const handoff = layout.handoff
+    const resetWorktree = input.onNewSessionWorktreeReset
+    const onSubmit = input.onSubmit
     const permissionState = permission.currentServerState()
-    const isNewSession = !params.id
     const shouldAutoAccept = isNewSession && input.autoAccept()
     const worktreeSelection = input.newSessionWorktree?.() || "main"
+    const submissionKey = ScopedKey.from(
+      submissionScope,
+      draftID ? `draft:${draftID}` : sessionID ? `session:${sessionID}` : `directory:${projectDirectory}`,
+    )
+    if (submitting.has(submissionKey)) return
+    submitting.add(submissionKey)
 
-    let sessionDirectory = projectDirectory
-    let client = sdk().client
+    try {
+      input.addToHistory(currentPrompt, mode)
+      input.resetHistoryNavigation()
 
-    if (isNewSession) {
-      if (worktreeSelection === "create") {
-        const createdWorktree = await client.worktree
-          .create({ directory: projectDirectory })
-          .then((x) => x.data)
-          .catch((err) => {
+      let sessionDirectory = projectDirectory
+      let client = submissionSDK.client
+      let api = submissionSDK.api.session
+
+      if (isNewSession) {
+        if (worktreeSelection === "create") {
+          const createdWorktree = await workspaceRequestWithTimeout(
+            (signal) => client.worktree.create({ directory: projectDirectory }, { signal }),
+            language.t("prompt.toast.worktreeCreateFailed.title"),
+            input.worktreeRequestTimeoutMs ?? WORKSPACE_PREPARATION_TIMEOUT_MS,
+          )
+            .then((x) => x.data)
+            .catch((err) => {
+              showToast({
+                title: language.t("prompt.toast.worktreeCreateFailed.title"),
+                description: errorMessage(err),
+              })
+              return undefined
+            })
+
+          if (!createdWorktree?.directory) {
             showToast({
               title: language.t("prompt.toast.worktreeCreateFailed.title"),
+              description: language.t("common.requestFailed"),
+            })
+            return
+          }
+          WorktreeState.pending(submissionScope, createdWorktree.directory)
+          sessionDirectory = createdWorktree.directory
+        }
+
+        if (worktreeSelection !== "main" && worktreeSelection !== "create") {
+          sessionDirectory = worktreeSelection
+        }
+
+        if (sessionDirectory !== projectDirectory) {
+          client = submissionSDK.createClient({
+            directory: sessionDirectory,
+            throwOnError: true,
+          })
+          api = submissionSDK.createApi(sessionDirectory).session
+          submissionServerSync.child(sessionDirectory)
+        }
+      }
+
+      let session = currentSession
+      if (!session && isNewSession) {
+        const created = await submissionSDK.api.session
+          .create({
+            agent: currentAgent.name,
+            model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
+            location: { directory: sessionDirectory },
+          })
+          .then(normalizeSessionInfo)
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.sessionCreateFailed.title"),
               description: errorMessage(err),
             })
             return undefined
           })
-
-        if (!createdWorktree?.directory) {
-          showToast({
-            title: language.t("prompt.toast.worktreeCreateFailed.title"),
-            description: language.t("common.requestFailed"),
+        if (created) {
+          seed(submissionServerSync, sessionDirectory, created)
+          session = created
+          await startTransition(() => {
+            if (!session) return
+            if (draftID) tabs.updateDraft(draftID, { worktree: undefined })
+            if (!draftID) resetWorktree?.()
+            if (shouldAutoAccept) permissionState.enableAutoAccept(session.id, sessionDirectory)
+            localSession.promote(sessionDirectory, session.id, {
+              agent: currentAgent.name,
+              model: { providerID: currentModel.provider.id, modelID: currentModel.id },
+              variant: variant ?? null,
+            })
+            handoff.setTabs(base64Encode(sessionDirectory), session.id)
+            if (draftID && draftServer) tabs.promoteDraft(draftID, { server: draftServer, sessionId: session.id })
+            else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
+            submission.retarget(
+              capturePrompt(
+                { dir: base64Encode(sessionDirectory), id: session.id },
+                { server: draftServer, scope: submissionScope },
+              ),
+            )
           })
-          return
         }
-        WorktreeState.pending(sdk().scope, createdWorktree.directory)
-        sessionDirectory = createdWorktree.directory
+      }
+      if (!session) {
+        showToast({
+          title: language.t("prompt.toast.promptSendFailed.title"),
+          description: language.t("prompt.toast.promptSendFailed.description"),
+        })
+        return
       }
 
-      if (worktreeSelection !== "main" && worktreeSelection !== "create") {
-        sessionDirectory = worktreeSelection
+      const model = {
+        modelID: currentModel.id,
+        providerID: currentModel.provider.id,
+      }
+      const agent = currentAgent.name
+      const draft: FollowupDraft = {
+        sessionID: session.id,
+        sessionDirectory,
+        prompt: currentPrompt,
+        context,
+        agent,
+        model,
+        variant,
       }
 
-      if (sessionDirectory !== projectDirectory) {
-        client = sdk().createClient({
-          directory: sessionDirectory,
-          throwOnError: true,
-        })
-        serverSync().child(sessionDirectory)
+      const clearInput = () => {
+        submission.clear()
+        input.setMode("normal")
+        input.setPopover(null)
       }
 
-      input.onNewSessionWorktreeReset?.()
-    }
-
-    let session = input.info()
-    if (!session && isNewSession) {
-      const created = await sdk()
-        .api.session.create({
-          agent: currentAgent.name,
-          model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
-          location: { directory: sessionDirectory },
-        })
-        .then(normalizeSessionInfo)
-        .catch((err) => {
-          showToast({
-            title: language.t("prompt.toast.sessionCreateFailed.title"),
-            description: errorMessage(err),
-          })
-          return undefined
-        })
-      if (created) {
-        seed(sessionDirectory, created)
-        session = created
-        await startTransition(() => {
-          if (!session) return
-          if (shouldAutoAccept) permissionState.enableAutoAccept(session.id, sessionDirectory)
-          local.session.promote(sessionDirectory, session.id, {
-            agent: currentAgent.name,
-            model: { providerID: currentModel.provider.id, modelID: currentModel.id },
-            variant: variant ?? null,
-          })
-          layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
-          const draftID = search.draftId
-          if (draftID) tabs.promoteDraft(draftID, { server: tabs.draft(draftID).server, sessionId: session.id })
-          else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
-          submission.retarget(prompt.capture({ dir: base64Encode(sessionDirectory), id: session.id }))
+      const restoreInput = () => {
+        const restored = submission.restore()
+        if (!restored) return false
+        restored.target.set(restored.prompt, input.promptLength(restored.prompt))
+        if (!submission.current(prompt.capture())) return true
+        input.setMode(mode)
+        input.setPopover(null)
+        requestAnimationFrame(() => {
+          const editor = input.editor()
+          if (!editor) return
+          editor.focus()
+          setCursorPosition(editor, input.promptLength(currentPrompt))
+          input.queueScroll()
         })
+        return true
       }
-    }
-    if (!session) {
-      showToast({
-        title: language.t("prompt.toast.promptSendFailed.title"),
-        description: language.t("prompt.toast.promptSendFailed.description"),
-      })
-      return
-    }
 
-    const model = {
-      modelID: currentModel.id,
-      providerID: currentModel.provider.id,
-    }
-    const agent = currentAgent.name
-    const draft: FollowupDraft = {
-      sessionID: session.id,
-      sessionDirectory,
-      prompt: currentPrompt,
-      context,
-      agent,
-      model,
-      variant,
-    }
+      if (!isNewSession && mode === "normal" && input.shouldQueue?.()) {
+        input.onQueue?.(draft)
+        clearContext(submission.target())
+        clearInput()
+        return
+      }
 
-    const clearInput = () => {
-      submission.clear()
-      input.setMode("normal")
-      input.setPopover(null)
-    }
+      const startWorkspaceOperation = (messageID: string) => {
+        if (!isNewSession) return
+        if (worktreeSelection !== "main" && worktreeSelection !== "create" && sessionDirectory !== projectRoot) {
+          WorkspaceOperation.start(submissionScope, session.id, "move", sessionDirectory, messageID)
+          WorkspaceOperation.complete(submissionScope, session.id)
+        }
+        if (worktreeSelection !== "create") return
+        const worktree = WorktreeState.get(submissionScope, sessionDirectory)
+        WorkspaceOperation.start(submissionScope, session.id, "create", sessionDirectory, messageID)
+        if (worktree?.status === "ready") WorkspaceOperation.complete(submissionScope, session.id)
+        if (worktree?.status === "failed") WorkspaceOperation.fail(submissionScope, session.id)
+      }
 
-    const restoreInput = () => {
-      const restored = submission.restore()
-      if (!restored) return false
-      restored.target.set(restored.prompt, input.promptLength(restored.prompt))
-      if (!submission.current(prompt.capture())) return true
-      input.setMode(mode)
-      input.setPopover(null)
-      requestAnimationFrame(() => {
-        const editor = input.editor()
-        if (!editor) return
-        editor.focus()
-        setCursorPosition(editor, input.promptLength(currentPrompt))
-        input.queueScroll()
-      })
-      return true
-    }
+      const waitForWorktree = async (cleanup: VoidFunction) => {
+        const worktree = WorktreeState.get(submissionScope, sessionDirectory)
+        if (!worktree) return true
+        if (worktree.status === "ready") {
+          WorkspaceOperation.complete(submissionScope, session.id)
+          return true
+        }
+        if (worktree.status === "failed") {
+          WorkspaceOperation.fail(submissionScope, session.id)
+          throw new Error(worktree.message)
+        }
 
-    if (!isNewSession && mode === "normal" && input.shouldQueue?.()) {
-      input.onQueue?.(draft)
-      clearContext(submission.target())
-      clearInput()
-      return
-    }
+        if (sessionDirectory === projectDirectory) {
+          submissionSync.set("session_status", session.id, { type: "busy" })
+        }
 
-    input.onSubmit?.()
-
-    if (mode === "shell") {
-      clearInput()
-      const eventID = Event.ID.create()
-      sdk()
-        .api.session.shell({
+        const controller = new AbortController()
+        const key = pendingKey(submissionScope, session.id)
+        pendingSubmission = { key, scope: submissionScope, sessionID: session.id }
+        pending.set(key, {
+          abort: controller,
+          cleanup,
+          scope: submissionScope,
           sessionID: session.id,
-          id: eventID,
-          command: text,
-          agent,
-          model,
+          serverSync: submissionServerSync,
         })
-        .catch((err) => {
-          showToast({
-            title: language.t("prompt.toast.shellSendFailed.title"),
-            description: errorMessage(err),
-          })
+
+        const abortWait = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
+          if (controller.signal.aborted) {
+            resolve({ status: "failed", message: "aborted" })
+            return
+          }
+          controller.signal.addEventListener(
+            "abort",
+            () => {
+              resolve({ status: "failed", message: "aborted" })
+            },
+            { once: true },
+          )
+        })
+
+        const timeoutMs = 5 * 60 * 1000
+        const timer = { id: undefined as number | undefined }
+        const timeout = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
+          timer.id = window.setTimeout(() => {
+            resolve({
+              status: "failed",
+              message: language.t("workspace.error.stillPreparing"),
+            })
+          }, timeoutMs)
+        })
+
+        const result = await Promise.race([
+          WorktreeState.wait(submissionScope, sessionDirectory),
+          abortWait,
+          timeout,
+        ]).finally(() => {
+          pending.delete(key)
+          if (pendingSubmission?.key === key) pendingSubmission = undefined
+          if (timer.id === undefined) return
+          clearTimeout(timer.id)
+        })
+        if (controller.signal.aborted) return false
+        if (result.status === "failed") {
+          WorkspaceOperation.fail(submissionScope, session.id)
+          throw new Error(result.message)
+        }
+        WorkspaceOperation.complete(submissionScope, session.id)
+        return true
+      }
+
+      if (!draftID || search.draftId === draftID) onSubmit?.()
+
+      if (mode === "shell") {
+        clearInput()
+        const eventID = Event.ID.create()
+        startWorkspaceOperation(eventID)
+        void waitForWorktree(() => {
           restoreInput()
         })
-      return
-    }
-
-    if (text.startsWith("/")) {
-      const [cmdName, ...args] = text.split(" ")
-      const commandName = cmdName.slice(1)
-      const customCommand = sync().data.command.find((c) => c.name === commandName)
-      if (customCommand) {
-        clearInput()
-        const messageID = Identifier.ascending("message")
-        serverSync().session.set("session_status", session.id, { type: "busy" })
-        sdk()
-          .api.session.command({
-            sessionID: session.id,
-            id: messageID,
-            command: commandName,
-            arguments: args.join(" "),
-            agent,
-            model: { id: model.modelID, providerID: model.providerID, variant },
-            files: await Promise.all(
-              images.map(async (attachment) => ({
-                uri: await blobDataUrl(attachment.blob, attachment.mime),
-                name: attachment.filename,
-              })),
-            ),
+          .then((ready) => {
+            if (!ready) return
+            return api.shell({
+              sessionID: session.id,
+              id: eventID,
+              command: text,
+              agent,
+              model,
+            })
           })
           .catch((err) => {
-            serverSync().session.set("session_status", session.id, { type: "idle" })
             showToast({
-              title: language.t("prompt.toast.commandSendFailed.title"),
-              description: formatServerError(err, language.t, language.t("common.requestFailed")),
+              title: language.t("prompt.toast.shellSendFailed.title"),
+              description: errorMessage(err),
             })
             restoreInput()
           })
         return
       }
-    }
 
-    const commentItems = context.filter((item) => item.type === "file" && !!item.comment?.trim())
-    const messageID = Identifier.ascending("message")
-
-    const removeOptimisticMessage = () => {
-      sync().session.optimistic.remove({
-        directory: sessionDirectory,
-        sessionID: session.id,
-        messageID,
-      })
-    }
-
-    for (const item of commentItems) submission.target().context.remove(item.key)
-    clearInput()
-
-    const waitForWorktree = async () => {
-      const worktree = WorktreeState.get(sdk().scope, sessionDirectory)
-      if (!worktree || worktree.status !== "pending") return true
-
-      if (sessionDirectory === projectDirectory) {
-        sync().set("session_status", session.id, { type: "busy" })
+      if (text.startsWith("/")) {
+        const [cmdName, ...args] = text.split(" ")
+        const commandName = cmdName.slice(1)
+        const customCommand = submissionSync.data.command.find((c) => c.name === commandName)
+        if (customCommand) {
+          clearInput()
+          const messageID = Identifier.ascending("message")
+          startWorkspaceOperation(messageID)
+          submissionServerSync.session.set("session_status", session.id, { type: "busy" })
+          void waitForWorktree(() => {
+            submissionServerSync.session.set("session_status", session.id, { type: "idle" })
+            restoreInput()
+          })
+            .then(async (ready) => {
+              if (!ready) return
+              return api.command({
+                sessionID: session.id,
+                id: messageID,
+                command: commandName,
+                arguments: args.join(" "),
+                agent,
+                model: { id: model.modelID, providerID: model.providerID, variant },
+                files: await Promise.all(
+                  images.map(async (attachment) => ({
+                    uri: await blobDataUrl(attachment.blob, attachment.mime),
+                    name: attachment.filename,
+                  })),
+                ),
+              })
+            })
+            .catch((err) => {
+              submissionServerSync.session.set("session_status", session.id, { type: "idle" })
+              showToast({
+                title: language.t("prompt.toast.commandSendFailed.title"),
+                description: formatServerError(err, language.t, language.t("common.requestFailed")),
+              })
+              restoreInput()
+            })
+          return
+        }
       }
 
-      const controller = new AbortController()
+      const commentItems = context.filter((item) => item.type === "file" && !!item.comment?.trim())
+      const messageID = Identifier.ascending("message")
+      startWorkspaceOperation(messageID)
+
+      const removeOptimisticMessage = () => {
+        submissionSync.session.optimistic.remove({
+          directory: sessionDirectory,
+          sessionID: session.id,
+          messageID,
+        })
+      }
+
+      for (const item of commentItems) submission.target().context.remove(item.key)
+      clearInput()
+
       const cleanup = () => {
         if (sessionDirectory === projectDirectory) {
-          sync().set("session_status", session.id, { type: "idle" })
+          submissionSync.set("session_status", session.id, { type: "idle" })
         }
         removeOptimisticMessage()
         if (restoreInput()) restoreCommentItems(submission.target(), commentItems)
       }
 
-      pending.set(pendingKey(session.id), { abort: controller, cleanup })
-
-      const abortWait = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
-        if (controller.signal.aborted) {
-          resolve({ status: "failed", message: "aborted" })
-          return
+      void sendFollowupDraft({
+        api,
+        scope: submissionScope,
+        sync: submissionSync,
+        serverSync: submissionServerSync,
+        draft,
+        messageID,
+        optimisticBusy: sessionDirectory === projectDirectory,
+        before: () => waitForWorktree(cleanup),
+      }).catch((err) => {
+        pending.delete(pendingKey(submissionScope, session.id))
+        if (sessionDirectory === projectDirectory) {
+          submissionSync.set("session_status", session.id, { type: "idle" })
         }
-        controller.signal.addEventListener(
-          "abort",
-          () => {
-            resolve({ status: "failed", message: "aborted" })
-          },
-          { once: true },
-        )
+        showToast({
+          title: language.t("prompt.toast.promptSendFailed.title"),
+          description: errorMessage(err),
+        })
+        removeOptimisticMessage()
+        if (restoreInput()) restoreCommentItems(submission.target(), commentItems)
       })
-
-      const timeoutMs = 5 * 60 * 1000
-      const timer = { id: undefined as number | undefined }
-      const timeout = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
-        timer.id = window.setTimeout(() => {
-          resolve({
-            status: "failed",
-            message: language.t("workspace.error.stillPreparing"),
-          })
-        }, timeoutMs)
-      })
-
-      const result = await Promise.race([
-        WorktreeState.wait(sdk().scope, sessionDirectory),
-        abortWait,
-        timeout,
-      ]).finally(() => {
-        if (timer.id === undefined) return
-        clearTimeout(timer.id)
-      })
-      pending.delete(pendingKey(session.id))
-      if (controller.signal.aborted) return false
-      if (result.status === "failed") throw new Error(result.message)
-      return true
+    } finally {
+      submitting.delete(submissionKey)
     }
-
-    void sendFollowupDraft({
-      api: sdk().api.session,
-      sync: sync(),
-      serverSync: serverSync(),
-      draft,
-      messageID,
-      optimisticBusy: sessionDirectory === projectDirectory,
-      before: waitForWorktree,
-    }).catch((err) => {
-      pending.delete(pendingKey(session.id))
-      if (sessionDirectory === projectDirectory) {
-        sync().set("session_status", session.id, { type: "idle" })
-      }
-      showToast({
-        title: language.t("prompt.toast.promptSendFailed.title"),
-        description: errorMessage(err),
-      })
-      removeOptimisticMessage()
-      if (restoreInput()) restoreCommentItems(submission.target(), commentItems)
-    })
   }
 
   return {

packages/app/src/components/prompt-workspace-selector.tsx

@@ -1,8 +1,7 @@
-import { For, Show } from "solid-js"
+import { createMemo, createSignal, For, Show } from "solid-js"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { Icon } from "@opencode-ai/ui/v2/icon"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { useLanguage } from "@/context/language"
 
@@ -11,25 +10,42 @@ export function PromptWorkspaceSelector(props: {
   projectRoot: string
   workspaces: string[]
   branch?: string
+  onboarding?: boolean
   onChange: (value: string) => void
   onDone: () => void
+  onViewAll: () => void
 }) {
   const language = useLanguage()
-  let pending: string | undefined
+  const [search, setSearch] = createSignal("")
+  let searchInput: HTMLInputElement | undefined
+  let focusSearch = false
+  let pending: { type: "select"; value: string } | { type: "viewAll" } | undefined
   const selected = () => (props.value === props.projectRoot ? "main" : props.value)
+  const workspaces = createMemo(() => {
+    const query = search().trim().toLowerCase()
+    if (!query) return props.workspaces
+    return props.workspaces.filter((workspace) => getFilename(workspace).toLowerCase().includes(query))
+  })
   const icon = () => {
     if (selected() === "main") return "monitor"
     if (selected() === "create") return "workspace-new"
-    return "workspace"
+    return "workspace-isolated"
   }
   const select = (value: string) => {
-    pending = value
+    pending = { type: "select", value }
   }
   const onOpenChange = (open: boolean) => {
-    if (open) return
-    const value = pending
+    if (open) {
+      setSearch("")
+      return
+    }
+    const action = pending
     pending = undefined
-    if (value) props.onChange(value)
+    if (action?.type === "select") props.onChange(action.value)
+    if (action?.type === "viewAll") {
+      props.onViewAll()
+      return
+    }
     props.onDone()
   }
   const label = () => {
@@ -41,87 +57,217 @@ export function PromptWorkspaceSelector(props: {
   return (
     <>
       <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-      <MenuV2 placement="bottom" gutter={4} onOpenChange={onOpenChange}>
-        <MenuV2.Trigger class="flex h-7 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed data-[expanded]:text-v2-text-text-muted">
-          <IconV2 name={icon()} class="shrink-0 text-v2-icon-icon-muted" />
-          <span class="min-w-0 truncate">{label()}</span>
-          <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-        </MenuV2.Trigger>
-        <MenuV2.Portal>
-          <MenuV2.Content class="w-[180px]">
-            <MenuV2.Group>
-              <MenuV2.GroupLabel>{language.t("session.new.workspace.runIn")}</MenuV2.GroupLabel>
-              <MenuV2.Item onSelect={() => select("main")}>
-                <IconV2 name="monitor" />
-                <span class="min-w-0 flex-1 truncate">{language.t("session.new.workspace.local")}</span>
-                <Show when={selected() === "main"}>
-                  <Icon name="check" size="small" class="shrink-0" />
-                </Show>
-              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => select("create")}>
-                <IconV2 name="workspace-new" />
-                <span class="min-w-0 flex-1 truncate">{language.t("workspace.new")}</span>
-                <Show when={selected() === "create"}>
-                  <Icon name="check" size="small" class="shrink-0" />
-                </Show>
-              </MenuV2.Item>
-            </MenuV2.Group>
-            <Show when={props.workspaces.length > 0}>
-              <MenuV2.Separator />
-              <MenuV2.Sub gutter={0} overlap overflowPadding={8}>
-                <MenuV2.SubTrigger>
-                  <IconV2 name="workspace" />
-                  {language.t("session.new.workspace.existing")}
-                </MenuV2.SubTrigger>
-                <MenuV2.Portal>
-                  <MenuV2.SubContent class="max-w-[200px]">
-                    <For each={props.workspaces}>
-                      {(workspace) => (
-                        <MenuV2.Item onSelect={() => select(workspace)}>
-                          <IconV2 name="workspace-isolated" />
-                          <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
-                          <Show when={selected() === workspace}>
-                            <Icon name="check" size="small" class="shrink-0" />
-                          </Show>
-                        </MenuV2.Item>
-                      )}
-                    </For>
-                  </MenuV2.SubContent>
-                </MenuV2.Portal>
-              </MenuV2.Sub>
+      <TooltipV2
+        placement="top"
+        value={
+          props.onboarding ? (
+            <div class="flex flex-col gap-1 text-left">
+              <div class="flex items-center gap-1.5 font-[530] text-v2-text-text-base">
+                <Icon name="workspace-isolated" size="small" class="shrink-0 text-v2-text-text-accent" />
+                <span>{language.t("workspace.onboarding.title")}</span>
+              </div>
+              <span class="font-[440] text-v2-text-text-muted">
+                {language.t("workspace.onboarding.description")}
+              </span>
+            </div>
+          ) : (
+            language.t("session.new.workspace.trigger.tooltip")
+          )
+        }
+        contentClass={props.onboarding ? "max-w-[280px]" : undefined}
+        class="min-w-0"
+      >
+        <MenuV2 placement="bottom" gutter={4} onOpenChange={onOpenChange}>
+          <MenuV2.Trigger
+            aria-description={language.t("session.new.workspace.trigger.tooltip")}
+            class="flex h-6 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed data-[expanded]:text-v2-text-text-muted"
+          >
+            <Icon name={icon()} class="shrink-0 text-v2-icon-icon-muted" />
+            <span class="min-w-0 truncate">{label()}</span>
+            <Show when={props.onboarding}>
+              <span
+                data-slot="workspace-onboarding-dot"
+                aria-hidden="true"
+                class="size-1.5 shrink-0 rounded-full bg-v2-text-text-accent"
+              />
             </Show>
-          </MenuV2.Content>
-        </MenuV2.Portal>
-      </MenuV2>
-      <PromptGitStatus branch={props.branch} />
+            <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+          </MenuV2.Trigger>
+          <MenuV2.Portal>
+            <MenuV2.Content class="w-[200px]">
+              <MenuV2.Group>
+                <MenuV2.GroupLabel>{language.t("session.new.workspace.runIn")}</MenuV2.GroupLabel>
+                <MenuV2.Item onSelect={() => select("main")}>
+                  <Icon name="monitor" />
+                  <TooltipV2
+                    placement="right"
+                    value={
+                      <span class="flex flex-col gap-0.5">
+                        <span>{language.t("session.new.workspace.local")}</span>
+                        <span class="font-[440] text-v2-text-text-muted">
+                          {language.t("session.new.workspace.local.tooltip")}
+                        </span>
+                      </span>
+                    }
+                    class="min-w-0 flex-1"
+                  >
+                    <span class="min-w-0 truncate">{language.t("session.new.workspace.local")}</span>
+                  </TooltipV2>
+                  <Show when={selected() === "main"}>
+                    <Icon name="check" size="small" class="shrink-0" />
+                  </Show>
+                </MenuV2.Item>
+                <MenuV2.Item onSelect={() => select("create")}>
+                  <Icon name="workspace-new" />
+                  <TooltipV2
+                    placement="right"
+                    value={
+                      <span class="flex flex-col gap-0.5">
+                        <span>{language.t("workspace.new")}</span>
+                        <span class="font-[440] text-v2-text-text-muted">
+                          {language.t("session.new.workspace.new.tooltip")}
+                        </span>
+                      </span>
+                    }
+                    class="min-w-0 flex-1"
+                  >
+                    <span class="min-w-0 truncate">{language.t("workspace.new")}</span>
+                  </TooltipV2>
+                  <Show when={selected() === "create"}>
+                    <Icon name="check" size="small" class="shrink-0" />
+                  </Show>
+                </MenuV2.Item>
+              </MenuV2.Group>
+              <Show
+                when={props.workspaces.length > 0}
+                fallback={
+                  <>
+                    <MenuV2.Separator class="h-[0.5px]" />
+                    <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
+                      <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
+                    </MenuV2.Item>
+                  </>
+                }
+              >
+                <MenuV2.Separator class="h-[0.5px]" />
+                <MenuV2.Sub
+                  gutter={0}
+                  overlap
+                  overflowPadding={8}
+                  onOpenChange={(open) => {
+                    if (!open) {
+                      focusSearch = false
+                      return
+                    }
+                    if (!focusSearch || props.workspaces.length < 10) return
+                    focusSearch = false
+                    requestAnimationFrame(() => searchInput?.focus())
+                  }}
+                >
+                  <MenuV2.SubTrigger
+                    onKeyDown={(event) => {
+                      if (
+                        event.key === "ArrowRight" ||
+                        event.key === "ArrowLeft" ||
+                        event.key === "Enter" ||
+                        event.key === " "
+                      )
+                        focusSearch = true
+                    }}
+                  >
+                    <Icon name="workspace-isolated" />
+                    <span class="min-w-0 flex-1 truncate">
+                      {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
+                    </span>
+                  </MenuV2.SubTrigger>
+                  <MenuV2.Portal>
+                    <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                      <Show when={props.workspaces.length >= 10}>
+                        <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2 text-v2-icon-icon-muted">
+                          <Icon name="magnifying-glass" size="small" class="shrink-0" />
+                          <input
+                            ref={(element) => {
+                              searchInput = element
+                            }}
+                            value={search()}
+                            placeholder={language.t("session.new.workspace.search.placeholder")}
+                            aria-label={language.t("session.new.workspace.search.placeholder")}
+                            class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
+                            onInput={(event) => setSearch(event.currentTarget.value)}
+                            onKeyDown={(event) => {
+                              if (
+                                event.key === "Escape" ||
+                                event.key === "ArrowDown" ||
+                                event.key === "ArrowUp" ||
+                                event.key === "Enter"
+                              )
+                                return
+                              event.stopPropagation()
+                            }}
+                          />
+                        </div>
+                      </Show>
+                      <For each={workspaces()}>
+                        {(workspace) => (
+                          <MenuV2.Item onSelect={() => select(workspace)}>
+                            <Icon name="workspace-isolated" />
+                            <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
+                            <Show when={selected() === workspace}>
+                              <Icon name="check" size="small" class="shrink-0" />
+                            </Show>
+                          </MenuV2.Item>
+                        )}
+                      </For>
+                      <MenuV2.Separator class="h-[0.5px]" />
+                      <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
+                        <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
+                      </MenuV2.Item>
+                    </MenuV2.SubContent>
+                  </MenuV2.Portal>
+                </MenuV2.Sub>
+              </Show>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+      </TooltipV2>
+      <PromptGitStatus branch={props.branch} from={selected() === "create"} class="ml-1" />
     </>
   )
 }
 
-export function PromptGitStatus(props: { branch?: string; noGit?: boolean }) {
+export function PromptGitStatus(props: { branch?: string; noGit?: boolean; from?: boolean; class?: string }) {
   const language = useLanguage()
   const label = () => {
     if (props.noGit) return language.t("session.new.git.none")
+    if (!props.branch) return undefined
+    if (props.from) return language.t("session.new.workspace.fromBranch", { branch: props.branch })
     return props.branch
   }
 
+  const icon = () => {
+    if (props.noGit) return "monitor"
+    if (props.from) return "branch-out"
+    return "branch"
+  }
+
   return (
     <Show when={label()}>
       {(value) => (
-        <>
-          <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-          <TooltipV2
-            placement="top"
-            value={value()}
-            class="min-w-0 max-w-[220px]"
-            contentClass="max-w-[calc(100vw-32px)] break-all"
-          >
-            <div class="flex h-7 min-w-0 max-w-[220px] items-center gap-1.5 px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px]">
-              <Icon name="branch" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-              <span class="min-w-0 truncate">{value()}</span>
-            </div>
-          </TooltipV2>
-        </>
+        <TooltipV2
+          placement="top"
+          value={value()}
+          class={`min-w-0 max-w-[220px] ${props.class ?? ""}`}
+          contentClass="max-w-[calc(100vw-32px)] break-all"
+        >
+          <div class="flex h-6 min-w-0 max-w-[220px] items-center gap-1.5 rounded-full bg-v2-background-bg-layer-02 px-2.5 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint">
+            <Icon
+              name={icon()}
+              size="small"
+              class="shrink-0 text-v2-icon-icon-muted"
+            />
+            <span class="min-w-0 truncate">{value()}</span>
+          </div>
+        </TooltipV2>
       )}
     </Show>
   )

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

@@ -9,7 +9,7 @@ import { ServerConnection } from "@/context/server"
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any
   controller: ReturnType<typeof useServerManagementController>
-  onEdit: (server: ServerConnection.Http) => void
+  onEdit: (server: ServerConnection.Any) => void
   open?: boolean
   onOpenChange?: (open: boolean) => void
 }> = (props) => {
@@ -21,6 +21,7 @@ export const ServerRowMenu: Component<{
       labels={serverMenuLabels(language)}
       canDefault={props.controller.canDefault()}
       isDefault={props.controller.defaultKey() === key}
+      canRemove={!ServerConnection.builtin(props.server)}
       onEdit={props.onEdit}
       onSetDefault={() => props.controller.setDefault(key)}
       onRemoveDefault={() => props.controller.setDefault(null)}
@@ -47,15 +48,14 @@ export const ServerRowMenuView: Component<{
   labels: ReturnType<typeof serverMenuLabels>
   canDefault: boolean
   isDefault: boolean
-  onEdit: (server: ServerConnection.Http) => void
+  canRemove: boolean
+  onEdit: (server: ServerConnection.Any) => void
   onSetDefault: () => void
   onRemoveDefault: () => void
   onRemove: () => void
   open?: boolean
   onOpenChange?: (open: boolean) => void
 }> = (props) => {
-  const builtin = () => ServerConnection.builtin(props.server)
-  const httpServer = () => (props.server.type === "http" ? props.server : undefined)
   return (
     <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
       <MenuV2.Trigger
@@ -69,25 +69,17 @@ export const ServerRowMenuView: Component<{
         <MenuV2.Content>
           <MenuV2.Group>
             <MenuV2.GroupLabel>{props.labels.server}</MenuV2.GroupLabel>
-            <MenuV2.Item
-              disabled={builtin() || !httpServer()}
-              onSelect={() => {
-                const server = httpServer()
-                if (server) props.onEdit(server)
-              }}
-            >
-              {props.labels.edit}
-            </MenuV2.Item>
+            <MenuV2.Item onSelect={() => props.onEdit(props.server)}>{props.labels.edit}</MenuV2.Item>
             <Show when={props.canDefault && !props.isDefault}>
               <MenuV2.Item onSelect={props.onSetDefault}>{props.labels.default}</MenuV2.Item>
             </Show>
             <Show when={props.canDefault && props.isDefault}>
               <MenuV2.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</MenuV2.Item>
             </Show>
-            <MenuV2.Separator />
-            <MenuV2.Item disabled={builtin()} onSelect={props.onRemove}>
-              {props.labels.delete}
-            </MenuV2.Item>
+            <Show when={props.canRemove}>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={props.onRemove}>{props.labels.delete}</MenuV2.Item>
+            </Show>
           </MenuV2.Group>
         </MenuV2.Content>
       </MenuV2.Portal>

packages/app/src/components/session-workspace-menu.tsx

@@ -0,0 +1,196 @@
+import type { Project } from "@opencode-ai/sdk/v2/client"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { createStore } from "solid-js/store"
+import { For, Show, type ComponentProps, type JSX } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useSettingsDialog } from "@/components/settings-dialog"
+import { pathKey } from "@/utils/path-key"
+import { Worktree } from "@/utils/worktree"
+import { WorkspaceOperation } from "@/utils/workspace-operation"
+import { showToast } from "@/utils/toast"
+import type { ServerScope } from "@/utils/server-scope"
+import { workspaceDirectories } from "@/utils/workspace"
+import {
+  WORKSPACE_PLACEMENT_REFRESH_TIMEOUT_MS,
+  WORKSPACE_PREPARATION_TIMEOUT_MS,
+  workspaceRequestWithTimeout,
+} from "@/utils/workspace-request"
+
+export function SessionWorkspaceMenu(props: {
+  eligible?: boolean
+  sessionID: string
+  project: Project
+  directory: string
+  messageID?: string
+  placement?: ComponentProps<typeof MenuV2>["placement"]
+  gutter?: number
+  class?: string
+  contentClass?: string
+  children: JSX.Element
+  onOpenChange?: (open: boolean) => void
+}) {
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
+  const openWorkspaces = useSettingsDialog("workspaces")
+  const [store, setStore] = createStore({ selected: undefined as string | undefined })
+  const operationPending = () => WorkspaceOperation.get(serverSDK().scope, props.sessionID)?.status === "pending"
+  const blocked = () =>
+    props.eligible === false || operationPending() || serverSync().session.data.session_working(props.sessionID)
+  const workspaces = () =>
+    workspaceDirectories(props.project).filter((workspace) => pathKey(workspace) !== pathKey(props.directory))
+
+  const fail = (scope: ServerScope, sessionID: string, message: string) => {
+    if (WorkspaceOperation.get(scope, sessionID)?.status === "complete") return
+    WorkspaceOperation.fail(scope, sessionID)
+    showToast({ variant: "error", title: language.t("workspace.move.failed"), description: message })
+  }
+  const move = async (selection: "create" | string) => {
+    if (store.selected || blocked()) return
+    const sdk = serverSDK()
+    const sync = serverSync()
+    const scope = sdk.scope
+    const sessionID = props.sessionID
+    const messageID = props.messageID
+    const root = props.project.worktree
+    const source = props.directory
+    setStore("selected", selection)
+
+    try {
+      const destination =
+        selection === "create"
+          ? await createWorkspace(root, sessionID, messageID, sdk, (message) => fail(scope, sessionID, message), {
+              createFailed: language.t("prompt.toast.worktreeCreateFailed.title"),
+              stillPreparing: language.t("workspace.error.stillPreparing"),
+            })
+          : selection
+      if (!destination) return
+
+      WorkspaceOperation.start(scope, sessionID, selection === "create" ? "create" : "move", destination, messageID)
+      if (sync.session.data.session_working(sessionID)) throw new Error(language.t("workspace.move.failed"))
+      await workspaceRequestWithTimeout(
+        (signal) =>
+          sdk.client.experimental.controlPlane.moveSession(
+            {
+              sessionID,
+              destination: { directory: destination },
+              moveChanges: true,
+            },
+            { signal },
+          ),
+        language.t("workspace.move.failed"),
+        WORKSPACE_PREPARATION_TIMEOUT_MS,
+      )
+      const session = await workspaceRequestWithTimeout(
+        (signal) => sync.session.resolve(sessionID, { force: true, signal }),
+        language.t("workspace.move.failed"),
+        WORKSPACE_PLACEMENT_REFRESH_TIMEOUT_MS,
+      )
+      if (!session || pathKey(session.directory) !== pathKey(destination))
+        throw new Error(language.t("workspace.move.failed"))
+      WorkspaceOperation.complete(scope, sessionID, destination)
+      sync.reindexSession(sessionID, source)
+    } catch (error) {
+      fail(scope, sessionID, error instanceof Error ? error.message : language.t("common.requestFailed"))
+    } finally {
+      setStore("selected", undefined)
+    }
+  }
+
+  return (
+    <MenuV2
+      placement={props.placement ?? "bottom-end"}
+      gutter={props.gutter ?? 4}
+      modal={false}
+      onOpenChange={props.onOpenChange}
+    >
+      <MenuV2.Trigger class={props.class} disabled={blocked()}>
+        {props.children}
+      </MenuV2.Trigger>
+      <MenuV2.Portal>
+        <MenuV2.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
+          <MenuV2.Group>
+            <MenuV2.GroupLabel>{language.t("workspace.move.menu.title")}</MenuV2.GroupLabel>
+            <Show when={pathKey(props.directory) !== pathKey(props.project.worktree)}>
+              <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(props.project.worktree)}>
+                <Icon name="monitor" />
+                {language.t("session.new.workspace.local")}
+              </MenuV2.Item>
+            </Show>
+            <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
+              <Icon name="workspace-new" />
+              {language.t("workspace.new")}
+            </MenuV2.Item>
+            <Show when={workspaces().length > 0}>
+              <MenuV2.Sub gutter={0} overlap overflowPadding={8}>
+                <MenuV2.SubTrigger>
+                  <Icon name="workspace-isolated" />
+                  {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
+                </MenuV2.SubTrigger>
+                <MenuV2.Portal>
+                  <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                    <For each={workspaces()}>
+                      {(workspace) => (
+                        <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(workspace)}>
+                          <Icon name="workspace-isolated" />
+                          <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
+                        </MenuV2.Item>
+                      )}
+                    </For>
+                  </MenuV2.SubContent>
+                </MenuV2.Portal>
+              </MenuV2.Sub>
+            </Show>
+          </MenuV2.Group>
+          <MenuV2.Separator class="h-[0.5px] bg-v2-border-border-base" />
+          <MenuV2.Item onSelect={() => openWorkspaces()}>
+            <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
+          </MenuV2.Item>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
+  )
+}
+
+async function createWorkspace(
+  root: string,
+  sessionID: string,
+  messageID: string | undefined,
+  serverSDK: ReturnType<ReturnType<typeof useServerSDK>>,
+  fail: (message: string) => void,
+  messages: { createFailed: string; stillPreparing: string },
+) {
+  WorkspaceOperation.start(serverSDK.scope, sessionID, "create", root, messageID)
+  const created = await workspaceRequestWithTimeout(
+    (signal) => serverSDK.client.worktree.create({ directory: root }, { signal }),
+    messages.createFailed,
+    WORKSPACE_PREPARATION_TIMEOUT_MS,
+  )
+    .then((result) => result.data)
+    .catch((error) => {
+      fail(error instanceof Error ? error.message : messages.createFailed)
+      return undefined
+    })
+  if (!created?.directory) return
+  WorkspaceOperation.start(serverSDK.scope, sessionID, "create", created.directory, messageID)
+  Worktree.pending(serverSDK.scope, created.directory)
+  const timer = { id: undefined as ReturnType<typeof setTimeout> | undefined }
+  const timeout = new Promise<ReturnType<typeof Worktree.get>>((resolve) => {
+    timer.id = setTimeout(
+      () => resolve({ status: "failed", message: messages.stillPreparing }),
+      WORKSPACE_PREPARATION_TIMEOUT_MS,
+    )
+  })
+  const ready = await Promise.race([Worktree.wait(serverSDK.scope, created.directory), timeout]).finally(() => {
+    if (timer.id) clearTimeout(timer.id)
+  })
+  if (!ready || ready.status === "failed") {
+    fail(ready?.message ?? messages.createFailed)
+    return
+  }
+  return created.directory
+}

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

@@ -123,7 +123,8 @@ export function SessionContextTab() {
     () => {
       const revert = info()?.revert?.messageID
       if (!revert) return userMessages()
-      return userMessages().filter((m) => m.id < revert)
+      const boundary = userMessages().findIndex((message) => message.id === revert)
+      return boundary < 0 ? userMessages() : userMessages().slice(0, boundary)
     },
     emptyUserMessages,
     { equals: same },

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

@@ -451,7 +451,10 @@ function SettingsKeybindsV2View(props: {
     <>
       <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
         <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
+          </div>
           <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
             {language.t("settings.shortcuts.reset.button")}
           </ButtonV2>

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

@@ -7,6 +7,7 @@ import { TextField } from "@opencode-ai/ui/text-field"
 import { type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
+import { useServerSync } from "@/context/server-sync"
 import { popularProviders } from "@/hooks/use-providers"
 import { SettingsList } from "./settings-list"
 import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
@@ -43,6 +44,7 @@ export const SettingsModels: Component = () => {
 const SettingsModelsContent: Component = () => {
   const language = useLanguage()
   const models = useModels()
+  useServerSync()().loadProviders()
 
   const list = useFilteredList<ModelItem>({
     items: (_filter) => models.list(),

packages/app/src/components/settings-server-picker.tsx

@@ -4,34 +4,32 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { QueryClientProvider } from "@tanstack/solid-query"
 import { createMemo, For, type ParentProps, Show } from "solid-js"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { useGlobal } from "@/context/global"
 import { ModelsProvider } from "@/context/models"
 import { ServerConnection } from "@/context/server"
 import { ServerSDKProvider } from "@/context/server-sdk"
 import { ServerSyncProvider } from "@/context/server-sync"
-import { useGlobal } from "@/context/global"
 import { useSettings } from "@/context/settings"
 
 export function SettingsServerScope(props: ParentProps) {
   const global = useGlobal()
   const settings = useSettings()
-
   return (
     <Show when={settings.general.newLayoutDesigns()} fallback={props.children}>
-      <Show when={global.settings.server.selected()}>
-        {(server) => <SettingsServerDataProviders server={server()}>{props.children}</SettingsServerDataProviders>}
+      <Show when={global.settings.server.selected()} keyed>
+        {(server) => <SettingsServerDataScope server={server}>{props.children}</SettingsServerDataScope>}
       </Show>
     </Show>
   )
 }
 
-function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) {
+export function SettingsServerDataScope(props: ParentProps<{ server: ServerConnection.Any }>) {
   const global = useGlobal()
   const serverCtx = () => global.ensureServerCtx(props.server)
-
   return (
     <QueryClientProvider client={serverCtx().queryClient}>
       <ServerSDKProvider server={() => props.server}>
-        <ServerSyncProvider>
+        <ServerSyncProvider server={() => props.server}>
           <ModelsProvider>{props.children}</ModelsProvider>
         </ServerSyncProvider>
       </ServerSDKProvider>

packages/app/src/components/settings-v2/appearance.tsx

@@ -0,0 +1,134 @@
+import { Component, createMemo } from "solid-js"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { useLanguage } from "@/context/language"
+import { Link } from "../link"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import { createAppearanceSettingsController, type AppearanceSettingsController } from "./general-controllers"
+import "./settings-v2.css"
+
+const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
+const fontSettings = {
+  ui: {
+    action: "settings-ui-font",
+    title: "settings.general.row.uiFont.title",
+    description: "settings.general.row.uiFont.description",
+    font: "ui",
+    input: "setUI",
+  },
+  code: {
+    action: "settings-code-font",
+    title: "settings.general.row.font.title",
+    description: "settings.general.row.font.description",
+    font: "code",
+    input: "setCode",
+  },
+  terminal: {
+    action: "settings-terminal-font",
+    title: "settings.general.row.terminalFont.title",
+    description: "settings.general.row.terminalFont.description",
+    font: "terminal",
+    input: "setTerminal",
+  },
+} as const
+
+const FontSetting: Component<{
+  kind: "ui" | "code" | "terminal"
+  fonts: AppearanceSettingsController["fonts"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => fontSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <div class="w-full sm:w-[220px]">
+        <TextInputV2
+          data-action={config().action}
+          type="text"
+          appearance="base"
+          value={props.fonts[config().font]().value}
+          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
+          placeholder={props.fonts[config().font]().placeholder}
+          spellcheck={false}
+          autocorrect="off"
+          autocomplete="off"
+          autocapitalize="off"
+          aria-label={language.t(config().title)}
+          style={{ "font-family": props.fonts[config().font]().family }}
+        />
+      </div>
+    </SettingsRowV2>
+  )
+}
+
+export const SettingsAppearanceV2: Component = () => {
+  const language = useLanguage()
+  const appearance = createAppearanceSettingsController()
+
+  return (
+    <>
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.general.section.appearance")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.appearance.description")}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-section">
+          <SettingsListV2>
+            <SettingsRowV2
+              title={language.t("settings.general.row.colorScheme.title")}
+              description={language.t("settings.general.row.colorScheme.description")}
+            >
+              <SelectV2
+                appearance="inline"
+                data-action="settings-color-scheme"
+                options={schemeOptions}
+                current={schemeOptions.find((option) => option === appearance.scheme.current())}
+                placement="bottom-end"
+                gutter={6}
+                label={(option) => {
+                  if (option === "system") return language.t("theme.scheme.system")
+                  if (option === "light") return language.t("theme.scheme.light")
+                  return language.t("theme.scheme.dark")
+                }}
+                onSelect={(option) => option && appearance.scheme.select(option)}
+              />
+            </SettingsRowV2>
+
+            <SettingsRowV2
+              title={language.t("settings.general.row.theme.title")}
+              description={
+                <>
+                  {language.t("settings.general.row.theme.description")}{" "}
+                  <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+                    {language.t("common.learnMore")}
+                  </Link>
+                </>
+              }
+            >
+              <SelectV2
+                appearance="inline"
+                data-action="settings-theme"
+                options={appearance.theme.options()}
+                current={appearance.theme.current()}
+                placement="bottom-end"
+                gutter={6}
+                value={(option) => option.id}
+                label={(option) => option.name}
+                onSelect={appearance.theme.select}
+              />
+            </SettingsRowV2>
+
+            <FontSetting kind="ui" fonts={appearance.fonts} />
+            <FontSetting kind="code" fonts={appearance.fonts} />
+            <FontSetting kind="terminal" fonts={appearance.fonts} />
+          </SettingsListV2>
+        </div>
+      </div>
+    </>
+  )
+}

packages/app/src/components/settings-v2/dialog-server-v2.tsx

@@ -1,17 +1,62 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
 import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { type Component, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { type ServerConnection } from "@/context/server"
+import { normalizeServerUrl, type ServerConnection, serverName } from "@/context/server"
+import { SettingsServerDataScope } from "../settings-server-picker"
 import { useServerManagementController } from "../dialog-select-server"
+import { createShellOptions, createShellSettingsController } from "./general-controllers"
 import "./settings-v2.css"
 
+const ServerShellField: Component = () => {
+  const language = useLanguage()
+  const controller = createShellSettingsController()
+  const options = createMemo(() =>
+    createShellOptions({
+      shells: controller.shells(),
+      current: controller.current(),
+    }),
+  )
+
+  return (
+    <div class="flex w-full min-w-0 flex-col gap-2">
+      <label class="settings-v2-server-dialog-label">{language.t("settings.general.row.shell.title")}</label>
+      <SelectV2
+        appearance="large"
+        class="!w-full self-stretch"
+        data-action="settings-shell"
+        options={options()}
+        current={options().find((option) => option.value === controller.current()) ?? options()[0]}
+        placement="bottom-end"
+        gutter={6}
+        value={(option) => option.id}
+        label={(option) => {
+          if (option.id === "auto") return language.t("settings.general.row.shell.autoDefault")
+          if (!option.terminalOnly) return option.name
+          return `${option.name} (${language.t("settings.general.row.shell.terminalOnly")})`
+        }}
+        onSelect={(option) => option && controller.select(option.value)}
+      />
+      <span class="text-11-regular text-v2-text-text-muted">
+        {language.t("settings.general.row.shell.description")}
+      </span>
+    </div>
+  )
+}
+
+const ScopedServerShellField: Component<{ server: ServerConnection.Any }> = (props) => (
+  <SettingsServerDataScope server={props.server}>
+    <ServerShellField />
+  </SettingsServerDataScope>
+)
+
 export const DialogServerV2: Component<{
   mode: "add" | "edit"
-  server?: ServerConnection.Http
+  server?: ServerConnection.Any
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
@@ -20,10 +65,12 @@ export const DialogServerV2: Component<{
     navigateOnAdd: false,
   })
   const [opened, setOpened] = createSignal(false)
+  const [step, setStep] = createSignal<"address" | "authenticate">("address")
+  const managed = () => props.mode === "edit" && props.server?.type !== "http"
 
   onMount(() => {
     if (props.mode === "add") controller.startAdd()
-    if (props.mode === "edit" && props.server) controller.startEdit(props.server)
+    if (props.mode === "edit" && props.server?.type === "http") controller.startEdit(props.server)
     setOpened(true)
   })
 
@@ -32,24 +79,62 @@ export const DialogServerV2: Component<{
   })
 
   createEffect(() => {
-    if (!opened()) return
+    if (!opened() || managed()) return
     if (controller.isFormMode()) return
     dialog.close()
   })
 
-  const keyDown = (event: KeyboardEvent) => {
-    if (event.key !== "Enter" || event.isComposing) return
-    event.preventDefault()
+  const authenticate = () => {
+    if (!normalizeServerUrl(controller.formValue())) return
+    if (!controller.formName()) controller.handleFormNameChange()(controller.formValue())
+    setStep("authenticate")
+  }
+
+  const submit = () => {
+    if (managed()) {
+      dialog.close()
+      return
+    }
+    if (props.mode === "add" && step() === "address") {
+      authenticate()
+      return
+    }
     controller.submitForm()
   }
 
-  const title = () =>
-    props.mode === "add" ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")
+  const keyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    submit()
+  }
 
-  const submitLabel = () => {
-    if (controller.formBusy()) return language.t("dialog.server.add.checking")
-    if (props.mode === "add") return language.t("dialog.server.add.button")
-    return language.t("common.save")
+  const showConnectionFields = () => !managed() && (props.mode === "edit" || step() === "authenticate")
+  const shellServer = createMemo<ServerConnection.Any | undefined>(() => {
+    if (managed()) return props.server
+    if (props.mode === "add") return
+    if (!showConnectionFields()) return
+    const url = normalizeServerUrl(controller.formValue())
+    if (!url) return
+    const http: ServerConnection.HttpBase = { url }
+    if (controller.formPassword()) http.password = controller.formPassword()
+    if (controller.formPassword() && controller.formUsername()) http.username = controller.formUsername()
+    return {
+      type: "http",
+      displayName: controller.formName() || undefined,
+      http,
+    }
+  })
+
+  const title = () => {
+    if (props.mode === "edit") return language.t("dialog.server.edit.title")
+    if (step() === "address") return language.t("dialog.server.add.title")
+    return (
+      <span class="flex items-center gap-2">
+        <span class="text-v2-text-text-muted">{language.t("dialog.server.add.title")}</span>
+        <span aria-hidden="true">›</span>
+        <span>{language.t("dialog.server.authenticate.title")}</span>
+      </span>
+    )
   }
 
   return (
@@ -60,73 +145,120 @@ export const DialogServerV2: Component<{
       <DividerV2 />
       <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
         <div class="flex w-full min-w-0 flex-col gap-6">
-          <div class="flex w-full min-w-0 flex-col gap-2">
-            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
-            <TextInputV2
-              type="text"
-              appearance="large"
-              class="!w-full self-stretch"
-              value={controller.formValue()}
-              placeholder={language.t("dialog.server.add.placeholder")}
-              invalid={!!controller.formError()}
-              disabled={controller.formBusy()}
-              autofocus
-              onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
-              onKeyDown={keyDown}
-            />
-            <Show when={controller.formError()}>
-              <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
-            </Show>
-          </div>
-          <div class="flex w-full min-w-0 flex-col gap-2">
-            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
-            <TextInputV2
-              type="text"
-              appearance="large"
-              class="!w-full self-stretch"
-              value={controller.formName()}
-              placeholder={language.t("dialog.server.add.namePlaceholder")}
-              disabled={controller.formBusy()}
-              onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
-              onKeyDown={keyDown}
-            />
-          </div>
-          <div class="grid w-full min-w-0 grid-cols-2 gap-4">
-            <div class="flex min-w-0 flex-col gap-2">
-              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
+          <Show
+            when={props.mode === "add" && step() === "address"}
+            fallback={
+              <>
+                <Show
+                  when={!managed()}
+                  fallback={
+                    <Show when={props.server?.type === "sidecar" && props.server.variant === "wsl"}>
+                      <div class="flex w-full min-w-0 flex-col gap-2">
+                        <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
+                        <TextInputV2
+                          type="text"
+                          appearance="large"
+                          class="!w-full self-stretch"
+                          value={serverName(props.server)}
+                          disabled
+                        />
+                      </div>
+                    </Show>
+                  }
+                >
+                  <div class="flex w-full min-w-0 flex-col gap-2">
+                    <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
+                    <TextInputV2
+                      type="text"
+                      appearance="large"
+                      class="!w-full self-stretch"
+                      value={controller.formValue()}
+                      placeholder={language.t("dialog.server.add.placeholder")}
+                      invalid={!!controller.formError()}
+                      disabled={controller.formBusy()}
+                      onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
+                      onKeyDown={keyDown}
+                    />
+                    <Show when={controller.formError()}>
+                      <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
+                    </Show>
+                  </div>
+                  <div class="flex w-full min-w-0 flex-col gap-2">
+                    <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
+                    <TextInputV2
+                      type="text"
+                      appearance="large"
+                      class="!w-full self-stretch"
+                      value={controller.formName()}
+                      placeholder={language.t("dialog.server.add.namePlaceholder")}
+                      disabled={controller.formBusy()}
+                      onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
+                      onKeyDown={keyDown}
+                    />
+                  </div>
+                  <div class="flex w-full min-w-0 flex-col gap-2">
+                    <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
+                    <TextInputV2
+                      type="text"
+                      appearance="large"
+                      class="!w-full self-stretch"
+                      value={controller.formUsername()}
+                      placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+                      disabled={controller.formBusy()}
+                      onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                      onKeyDown={keyDown}
+                    />
+                  </div>
+                  <div class="flex w-full min-w-0 flex-col gap-2">
+                    <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
+                    <TextInputV2
+                      type="password"
+                      appearance="large"
+                      class="!w-full self-stretch"
+                      value={controller.formPassword()}
+                      placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+                      disabled={controller.formBusy()}
+                      onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
+                      onKeyDown={keyDown}
+                    />
+                  </div>
+                </Show>
+                <Show when={shellServer()} keyed>
+                  {(server) => <ScopedServerShellField server={server} />}
+                </Show>
+              </>
+            }
+          >
+            <div class="flex w-full min-w-0 flex-col gap-2">
+              <label class="settings-v2-server-dialog-label">
+                {language.t("dialog.server.add.url")}
+                <span class="text-v2-text-text-danger">*</span>
+              </label>
               <TextInputV2
                 type="text"
                 appearance="large"
                 class="!w-full self-stretch"
-                value={controller.formUsername()}
-                placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+                value={controller.formValue()}
+                placeholder={language.t("dialog.server.add.placeholder")}
                 disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                autofocus
+                onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
                 onKeyDown={keyDown}
               />
             </div>
-            <div class="flex min-w-0 flex-col gap-2">
-              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
-              <TextInputV2
-                type="password"
-                appearance="large"
-                class="!w-full self-stretch"
-                value={controller.formPassword()}
-                placeholder={language.t("dialog.server.add.passwordPlaceholder")}
-                disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
-                onKeyDown={keyDown}
-              />
-            </div>
-          </div>
+          </Show>
         </div>
       </DialogBody>
       <DialogFooter>
         <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
           {language.t("common.cancel")}
         </ButtonV2>
-        <ButtonV2 variant="contrast" disabled={controller.formBusy()} onClick={controller.submitForm}>
-          {submitLabel()}
+        <ButtonV2
+          variant="contrast"
+          disabled={controller.formBusy() || (props.mode === "add" && step() === "address" && !controller.formValue())}
+          onClick={submit}
+        >
+          {controller.formBusy() ? language.t("dialog.server.add.checking") : language.t("dialog.server.add.button")}
         </ButtonV2>
       </DialogFooter>
     </Dialog>

packages/app/src/components/settings-v2/dialog-settings-v2.tsx

@@ -5,15 +5,21 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { SettingsGeneralV2 } from "./general"
+import { SettingsAppearanceV2 } from "./appearance"
 import { SettingsKeybinds } from "../settings-keybinds"
+import { SettingsNotificationsV2 } from "./notifications"
 import { SettingsProvidersV2 } from "./providers"
 import { SettingsModelsV2 } from "./models"
-import "./settings-v2.css"
 import { SettingsServersV2 } from "./servers"
+import { SettingsProjectsV2 } from "./projects"
+import { SettingsExtensionsV2 } from "./extensions"
+import { SettingsServerScope } from "../settings-server-picker"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLayout } from "@/context/layout"
 import { useTabs } from "@/context/tabs"
 import { useServerSync } from "@/context/server-sync"
+import { useGlobal } from "@/context/global"
+import "./settings-v2.css"
 
 export const DialogSettings: Component<{
   sessionID?: string
@@ -25,8 +31,11 @@ export const DialogSettings: Component<{
   const layout = useLayout()
   const tabs = useTabs()
   const serverSync = useServerSync()
+  const global = useGlobal()
   const [tab, setTab] = createSignal(props.defaultValue ?? "general")
   const directory = createMemo(() => {
+    const server = global.settings.server.selected()
+    if (!server || serverSync() !== global.ensureServerCtx(server).sync) return
     const route = layout.route()
     if (route.type === "dir-new-sesssion") return route.dir
     if (route.type === "draft") {
@@ -52,62 +61,92 @@ export const DialogSettings: Component<{
       >
         <TabsV2.List>
           <div class="flex flex-col justify-between h-full w-full">
-            <div class="flex flex-col gap-3 w-full">
-              <div class="flex flex-col gap-3">
-                <div class="flex flex-col gap-1.5">
-                  <TabsV2.SectionTitle>{language.t("settings.section.desktop")}</TabsV2.SectionTitle>
-                  <div class="flex flex-col gap-1.5 w-full">
-                    <TabsV2.Trigger value="general">
-                      <Icon name="sliders" />
-                      {language.t("settings.tab.general")}
-                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="shortcuts">
-                      <Icon name="keyboard" />
-                      {language.t("settings.tab.shortcuts")}
-                    </TabsV2.Trigger>
-                  </div>
-                </div>
+            <div class="flex flex-col gap-4 w-full">
+              {/* Group 1: Preferences */}
+              <div class="flex flex-col gap-1 w-full">
+                <TabsV2.Trigger value="general">
+                  <Icon name="sliders" />
+                  {language.t("settings.tab.preferences")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="appearance">
+                  <Icon name="appearance" />
+                  {language.t("settings.general.section.appearance")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="notifications">
+                  <Icon name="notifications" />
+                  {language.t("settings.tab.notifications")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="shortcuts">
+                  <Icon name="keyboard" />
+                  {language.t("settings.tab.shortcuts")}
+                </TabsV2.Trigger>
+              </div>
 
-                <div class="flex flex-col gap-1.5">
-                  <TabsV2.SectionTitle>{language.t("settings.section.server")}</TabsV2.SectionTitle>
-                  <div class="flex flex-col gap-1.5 w-full">
-                    <TabsV2.Trigger value="servers">
-                      <Icon name="server" />
-                      {language.t("status.popover.tab.servers")}
-                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="providers">
-                      <Icon name="providers" />
-                      {language.t("settings.providers.title")}
-                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="models">
-                      <Icon name="models" />
-                      {language.t("settings.models.title")}
-                    </TabsV2.Trigger>
-                  </div>
-                </div>
+              {/* Group 2: Environment & Workspaces */}
+              <div class="flex flex-col gap-1 w-full">
+                <TabsV2.Trigger value="servers">
+                  <Icon name="server" />
+                  {language.t("status.popover.tab.servers")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="projects">
+                  <Icon name="folder" />
+                  {language.t("settings.tab.projects")}
+                </TabsV2.Trigger>
+              </div>
+
+              {/* Group 3: Capabilities & Extensions */}
+              <div class="flex flex-col gap-1 w-full">
+                <TabsV2.Trigger value="providers">
+                  <Icon name="providers" />
+                  {language.t("settings.providers.title")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="models">
+                  <Icon name="models" />
+                  {language.t("settings.models.title")}
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="extensions">
+                  <Icon name="extensions" />
+                  {language.t("settings.tab.extensions")}
+                </TabsV2.Trigger>
               </div>
             </div>
+
             <div class="settings-v2-nav-footer">
               <span>{language.t("app.name.desktop")}</span>
               <span>v{platform.version}</span>
             </div>
           </div>
         </TabsV2.List>
+
         <TabsV2.Content value="general" class="settings-v2-panel">
           <SettingsGeneralV2 sessionID={props.sessionID} />
         </TabsV2.Content>
+        <TabsV2.Content value="appearance" class="settings-v2-panel">
+          <SettingsAppearanceV2 />
+        </TabsV2.Content>
+        <TabsV2.Content value="notifications" class="settings-v2-panel">
+          <SettingsNotificationsV2 />
+        </TabsV2.Content>
         <TabsV2.Content value="shortcuts" class="settings-v2-panel">
           <SettingsKeybinds v2 />
         </TabsV2.Content>
         <TabsV2.Content value="servers" class="settings-v2-panel">
           <SettingsServersV2 />
         </TabsV2.Content>
-        <TabsV2.Content value="providers" class="settings-v2-panel">
-          <SettingsProvidersV2 directory={directory} onBack={showProviders} />
-        </TabsV2.Content>
-        <TabsV2.Content value="models" class="settings-v2-panel">
-          <SettingsModelsV2 />
+        <TabsV2.Content value="projects" class="settings-v2-panel">
+          <SettingsProjectsV2 />
         </TabsV2.Content>
+        <SettingsServerScope>
+          <TabsV2.Content value="providers" class="settings-v2-panel">
+            <SettingsProvidersV2 directory={directory} onBack={showProviders} />
+          </TabsV2.Content>
+          <TabsV2.Content value="models" class="settings-v2-panel">
+            <SettingsModelsV2 />
+          </TabsV2.Content>
+          <TabsV2.Content value="extensions" class="settings-v2-panel">
+            <SettingsExtensionsV2 />
+          </TabsV2.Content>
+        </SettingsServerScope>
       </TabsV2>
     </Dialog>
   )

packages/app/src/components/settings-v2/extensions.tsx

@@ -0,0 +1,156 @@
+import { Component, For, createMemo, createResource } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { Link } from "../link"
+import { InlineServerSelect } from "./parts/server-select"
+import "./settings-v2.css"
+
+interface McpRowItem {
+  name: string
+  enabled: boolean
+}
+
+interface PluginRowItem {
+  name: string
+}
+
+export const SettingsExtensionsV2: Component = () => {
+  const language = useLanguage()
+  const serverSdk = useServerSDK()
+  const serverSync = useServerSync()
+  const mcps = createMemo<McpRowItem[]>(() => {
+    const configMcp = serverSync().data.config.mcp ?? {}
+    return Object.entries(configMcp).map(([name, config]) => ({
+      name,
+      enabled: typeof config !== "object" || config === null || !("enabled" in config) || config.enabled !== false,
+    }))
+  })
+
+  const handleMcpToggle = (item: McpRowItem, checked: boolean) => {
+    const before = serverSync().data.config.mcp ?? {}
+    const config = before[item.name]
+    if (typeof config !== "object" || config === null) return
+    const next = { ...before, [item.name]: { ...config, enabled: checked } }
+    serverSync().set("config", "mcp", next)
+    void serverSync()
+      .updateConfig({ mcp: next })
+      .catch(() => serverSync().set("config", "mcp", before))
+  }
+
+  const plugins = createMemo<PluginRowItem[]>(() => {
+    const raw = serverSync().data.config.plugin ?? []
+    return raw.map((item) => {
+      const name = typeof item === "string" ? item : item[0]
+      return { name }
+    })
+  })
+
+  const [skills] = createResource(serverSdk, (sdk) => sdk.api.skill.list().then((result) => result.data), {
+    initialValue: [],
+  })
+
+  return (
+    <>
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.extensions")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.extensions.description")}</span>
+          </div>
+          <InlineServerSelect />
+        </div>
+      </div>
+
+      <div class="settings-v2-tab-body">
+        <TabsV2 variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
+          <TabsV2.List>
+            <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
+          </TabsV2.List>
+
+          <TabsV2.Content value="mcps">
+            <div class="settings-v2-section">
+              <div class="flex items-center justify-between">
+                <span class="text-13-medium text-v2-text-text-base">
+                  {language.t("settings.extensions.availableAll")}
+                </span>
+                <span class="text-13-regular text-v2-text-faint">{language.t("settings.extensions.manageConfig")}</span>
+              </div>
+              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+                <For each={mcps()}>
+                  {(item) => (
+                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
+                      <div class="flex items-center gap-2.5 min-w-0">
+                        <Icon name="mcp" class="text-v2-icon-icon-muted shrink-0" />
+                        <span class="text-13-medium text-v2-text-text-base truncate">{item.name}</span>
+                      </div>
+                      <Switch checked={item.enabled} onChange={(checked) => handleMcpToggle(item, checked)} hideLabel>
+                        {item.name}
+                      </Switch>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          </TabsV2.Content>
+
+          <TabsV2.Content value="plugins">
+            <div class="settings-v2-section">
+              <div class="flex items-center justify-between">
+                <span class="text-13-medium text-v2-text-text-base">
+                  {language.t("settings.extensions.availableAll")}
+                </span>
+                <span class="text-13-regular text-v2-text-faint">{language.t("settings.extensions.manageConfig")}</span>
+              </div>
+              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+                <For each={plugins()}>
+                  {(plugin) => (
+                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
+                      <div class="flex items-center gap-2.5 min-w-0">
+                        <Icon name="cube" class="text-v2-icon-icon-muted shrink-0" />
+                        <span class="text-13-medium text-v2-text-text-base truncate font-mono">{plugin.name}</span>
+                      </div>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          </TabsV2.Content>
+
+          <TabsV2.Content value="skills">
+            <div class="settings-v2-section">
+              <div class="flex items-center justify-between">
+                <span class="text-13-medium text-v2-text-text-base">
+                  {language.t("settings.extensions.availableAll")}
+                </span>
+                <Link
+                  class="text-13-regular text-v2-text-accent hover:underline"
+                  href="https://opencode.ai/docs/skills/"
+                >
+                  {language.t("settings.extensions.addSkills")}
+                </Link>
+              </div>
+              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+                <For each={skills()}>
+                  {(skill) => (
+                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
+                      <div class="flex items-center gap-2.5 min-w-0">
+                        <Icon name="post-skill" class="text-v2-icon-icon-muted shrink-0" />
+                        <span class="text-13-medium text-v2-text-text-base truncate">{skill.name}</span>
+                      </div>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          </TabsV2.Content>
+        </TabsV2>
+      </div>
+    </>
+  )
+}

packages/app/src/components/settings-v2/general-controllers.ts

@@ -1,9 +1,6 @@
-import { createMemo, createResource, onMount, type Accessor } from "solid-js"
+import { createMemo, createResource, onCleanup, onMount, type Accessor } from "solid-js"
 import type { ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useTheme } from "@opencode-ai/ui/theme/context"
-import { usePermission } from "@/context/permission"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
 import {
   monoDefault,
   monoFontFamily,
@@ -17,51 +14,48 @@ import {
   useSettings,
 } from "@/context/settings"
 import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
-import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
+import { useServerSync } from "@/context/server-sync"
 
-export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
-export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
 
-export function createPermissionScopeController(sessionID: Accessor<string | undefined>) {
-  const permission = usePermission()
-  const serverSync = useServerSync()
-  const directory = createMemo(() => {
-    const id = sessionID()
-    if (!id) return undefined
-    return serverSync().session.lineage.peek(id)?.session.directory
-  })
+type ShellSelectOption = {
+  id: string
+  value: string
+  name: string
+  terminalOnly: boolean
+}
 
-  return {
-    accepting: createMemo(() => {
-      const id = sessionID()
-      const dir = directory()
-      if (!id || !dir) return false
-      return permission.isAutoAccepting(id, dir)
+export function createShellOptions(input: { shells: ShellOption[]; current: string | undefined }) {
+  const counts = input.shells.reduce((result, shell) => {
+    result.set(shell.name, (result.get(shell.name) ?? 0) + 1)
+    return result
+  }, new Map<string, number>())
+  const options: ShellSelectOption[] = [
+    { id: "auto", value: "", name: "", terminalOnly: false },
+    ...input.shells.map((shell) => {
+      const ambiguous = (counts.get(shell.name) ?? 0) > 1
+      return {
+        id: shell.path,
+        value: ambiguous ? shell.path : shell.name,
+        name: ambiguous ? shell.path : shell.name,
+        terminalOnly: !shell.acceptable,
+      }
     }),
-    enabled: createMemo(() => !!directory()),
-    set: (checked: boolean) => {
-      const id = sessionID()
-      const dir = directory()
-      if (!id || !dir) return
-      if (checked) return permission.enableAutoAccept(id, dir)
-      permission.disableAutoAccept(id, dir)
-    },
+  ]
+  if (input.current && !options.some((option) => option.value === input.current)) {
+    options.push({ id: input.current, value: input.current, name: input.current, terminalOnly: false })
   }
+  return options
 }
 
 export function createShellSettingsController() {
-  const serverSdk = useServerSDK()
   const serverSync = useServerSync()
-  const [shells] = createResource(
-    async () => {
-      const sdk = serverSdk()
-      if ((await sdk.protocol) === "v1") return (await sdk.client.pty.shells()).data ?? []
-      return [] as ShellOption[]
-    },
-    { initialValue: [] as ShellOption[] },
-  )
+  const [shells] = createResource(async () => [] as ShellOption[], { initialValue: [] as ShellOption[] })
   const current = createMemo(() => serverSync().data.config.shell ?? "")
-
   return {
     shells: () => shells.latest,
     current,
@@ -76,9 +70,7 @@ export function createAppearanceSettingsController() {
   const settings = useSettings()
   const theme = useTheme()
   const themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
-
   onMount(() => void theme.loadThemes())
-
   return {
     scheme: {
       current: theme.colorScheme,
@@ -118,7 +110,7 @@ export type SoundSelectOption = (typeof soundOptions)[number]
 
 export function createSoundSettingsController() {
   const settings = useSettings()
-  const preview = createSoundPreviewController(playSoundById)
+  const preview = soundPreview()
   const channel = (
     enabled: Accessor<boolean>,
     current: Accessor<string>,
@@ -144,30 +136,57 @@ export function createSoundSettingsController() {
       preview.play(option.id)
     },
   })
-
   return {
     agent: channel(
       settings.sounds.agentEnabled,
       settings.sounds.agent,
-      (value) => settings.sounds.setAgentEnabled(value),
-      (id) => settings.sounds.setAgent(id),
+      settings.sounds.setAgentEnabled,
+      settings.sounds.setAgent,
     ),
     permissions: channel(
       settings.sounds.permissionsEnabled,
       settings.sounds.permissions,
-      (value) => settings.sounds.setPermissionsEnabled(value),
-      (id) => settings.sounds.setPermissions(id),
+      settings.sounds.setPermissionsEnabled,
+      settings.sounds.setPermissions,
     ),
     errors: channel(
       settings.sounds.errorsEnabled,
       settings.sounds.errors,
-      (value) => settings.sounds.setErrorsEnabled(value),
-      (id) => settings.sounds.setErrors(id),
+      settings.sounds.setErrorsEnabled,
+      settings.sounds.setErrors,
     ),
   }
 }
 
-export type PermissionScopeController = ReturnType<typeof createPermissionScopeController>
-export type ShellSettingsController = ReturnType<typeof createShellSettingsController>
+function soundPreview() {
+  const state = {
+    cleanup: undefined as (() => void) | undefined,
+    timeout: undefined as NodeJS.Timeout | undefined,
+    run: 0,
+  }
+  const stop = () => {
+    state.run += 1
+    state.cleanup?.()
+    clearTimeout(state.timeout)
+    state.cleanup = undefined
+  }
+  const play = (id: string | undefined) => {
+    stop()
+    if (!id) return
+    const run = ++state.run
+    state.timeout = setTimeout(() => {
+      void playSoundById(id).then((cleanup) => {
+        if (state.run !== run) {
+          cleanup?.()
+          return
+        }
+        state.cleanup = cleanup
+      })
+    }, 100)
+  }
+  onCleanup(stop)
+  return { play, stop }
+}
+
 export type AppearanceSettingsController = ReturnType<typeof createAppearanceSettingsController>
 export type SoundSettingsController = ReturnType<typeof createSoundSettingsController>

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

@@ -3,295 +3,102 @@ import { createMediaQuery } from "@solid-primitives/media"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
-import { useUpdaterAction } from "../updater-action"
+import { useServerSync } from "@/context/server-sync"
 import { useSettings } from "@/context/settings"
-import { ExternalLink } from "../external-link"
+import { useUpdaterAction } from "../updater-action"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
-import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
-import {
-  createAppearanceSettingsController,
-  createPermissionScopeController,
-  createShellOptions,
-  createShellSettingsController,
-  createSoundSettingsController,
-  soundOptions,
-  type AppearanceSettingsController,
-  type PermissionScopeController,
-  type ShellSettingsController,
-  type SoundSettingsController,
-} from "./general-controllers"
 import "./settings-v2.css"
 
-const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
-const fontSettings = {
-  ui: {
-    action: "settings-ui-font",
-    title: "settings.general.row.uiFont.title",
-    description: "settings.general.row.uiFont.description",
-    font: "ui",
-    input: "setUI",
-  },
-  code: {
-    action: "settings-code-font",
-    title: "settings.general.row.font.title",
-    description: "settings.general.row.font.description",
-    font: "code",
-    input: "setCode",
-  },
-  terminal: {
-    action: "settings-terminal-font",
-    title: "settings.general.row.terminalFont.title",
-    description: "settings.general.row.terminalFont.description",
-    font: "terminal",
-    input: "setTerminal",
-  },
-} as const
-const soundSettings = {
-  agent: {
-    action: "settings-sounds-agent",
-    title: "settings.general.sounds.agent.title",
-    description: "settings.general.sounds.agent.description",
-  },
-  permissions: {
-    action: "settings-sounds-permissions",
-    title: "settings.general.sounds.permissions.title",
-    description: "settings.general.sounds.permissions.description",
-  },
-  errors: {
-    action: "settings-sounds-errors",
-    title: "settings.general.sounds.errors.title",
-    description: "settings.general.sounds.errors.description",
-  },
-} as const
-
-const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <SettingsRowV2
-      title={language.t("command.permissions.autoaccept.enable")}
-      description={language.t("toast.permissions.autoaccept.on.description")}
-    >
-      <div data-action="settings-auto-accept-permissions">
-        <Switch
-          checked={props.controller.accepting()}
-          disabled={!props.controller.enabled()}
-          onChange={props.controller.set}
-        />
-      </div>
-    </SettingsRowV2>
-  )
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
 }
 
-const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
-  const language = useLanguage()
-  const options = createMemo(() =>
-    createShellOptions({
-      shells: props.controller.shells(),
-      current: props.controller.current(),
-    }),
-  )
-  return (
-    <SettingsRowV2
-      title={language.t("settings.general.row.shell.title")}
-      description={language.t("settings.general.row.shell.description")}
-    >
-      <SelectV2
-        appearance="inline"
-        data-action="settings-shell"
-        options={options()}
-        current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
-        placement="bottom-end"
-        gutter={6}
-        value={(option) => option.id}
-        label={(option) => {
-          if (option.id === "auto") return language.t("settings.general.row.shell.autoDefault")
-          if (!option.terminalOnly) return option.name
-          return `${option.name} (${language.t("settings.general.row.shell.terminalOnly")})`
-        }}
-        onSelect={(option) => option && props.controller.select(option.value)}
-      />
-    </SettingsRowV2>
-  )
-}
-
-const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-color-scheme"
-            options={schemeOptions}
-            current={schemeOptions.find((option) => option === props.controller.scheme.current())}
-            placement="bottom-end"
-            gutter={6}
-            label={(option) => {
-              if (option === "system") return language.t("theme.scheme.system")
-              if (option === "light") return language.t("theme.scheme.light")
-              return language.t("theme.scheme.dark")
-            }}
-            onSelect={(option) => option && props.controller.scheme.select(option)}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <ExternalLink class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </ExternalLink>
-            </>
-          }
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-theme"
-            options={props.controller.theme.options()}
-            current={props.controller.theme.current()}
-            placement="bottom-end"
-            gutter={6}
-            value={(option) => option.id}
-            label={(option) => option.name}
-            onSelect={props.controller.theme.select}
-          />
-        </SettingsRowV2>
-
-        <FontSetting kind="ui" fonts={props.controller.fonts} />
-        <FontSetting kind="code" fonts={props.controller.fonts} />
-        <FontSetting kind="terminal" fonts={props.controller.fonts} />
-      </SettingsListV2>
-    </div>
-  )
-}
-
-const FontSetting: Component<{
-  kind: "ui" | "code" | "terminal"
-  fonts: AppearanceSettingsController["fonts"]
-}> = (props) => {
-  const language = useLanguage()
-  const config = () => fontSettings[props.kind]
-  return (
-    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <div class="w-full sm:w-[220px]">
-        <TextInputV2
-          data-action={config().action}
-          type="text"
-          appearance="base"
-          value={props.fonts[config().font]().value}
-          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
-          placeholder={props.fonts[config().font]().placeholder}
-          spellcheck={false}
-          autocorrect="off"
-          autocomplete="off"
-          autocapitalize="off"
-          aria-label={language.t(config().title)}
-          style={{ "font-family": props.fonts[config().font]().family }}
-        />
-      </div>
-    </SettingsRowV2>
-  )
-}
-
-const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
-  const language = useLanguage()
-  return (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
-      <SettingsListV2>
-        <SoundSetting kind="agent" channel={props.controller.agent} />
-        <SoundSetting kind="permissions" channel={props.controller.permissions} />
-        <SoundSetting kind="errors" channel={props.controller.errors} />
-      </SettingsListV2>
-    </div>
-  )
-}
-
-const SoundSetting: Component<{
-  kind: "agent" | "permissions" | "errors"
-  channel: SoundSettingsController["agent"]
-}> = (props) => {
-  const language = useLanguage()
-  const config = () => soundSettings[props.kind]
-  return (
-    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <SelectV2
-        appearance="inline"
-        data-action={config().action}
-        options={soundOptions}
-        current={props.channel.current()}
-        value={(option) => option.id}
-        label={(option) => language.t(option.label)}
-        onHighlight={props.channel.highlight}
-        onSelect={props.channel.select}
-        placement="bottom-end"
-        gutter={6}
-      />
-    </SettingsRowV2>
-  )
-}
-
-const LanguageSetting = () => {
-  const language = useLanguage()
-  const options = createMemo(() =>
-    language.locales.map((locale) => ({
-      value: locale,
-      label: language.label(locale),
-    })),
-  )
-  return (
-    <SettingsRowV2
-      title={language.t("settings.general.row.language.title")}
-      description={language.t("settings.general.row.language.description")}
-    >
-      <SelectV2
-        appearance="inline"
-        data-action="settings-language"
-        options={options()}
-        placement="bottom-end"
-        gutter={6}
-        current={options().find((option) => option.value === language.locale())}
-        value={(option) => option.value}
-        label={(option) => option.label}
-        onSelect={(option) => option && language.setLocale(option.value)}
-      />
-    </SettingsRowV2>
-  )
+type ShellSelectOption = {
+  id: string
+  value: string
+  label: string
 }
 
 export const SettingsGeneralV2: Component<{
   sessionID?: string
 }> = (props) => {
   const language = useLanguage()
+  const permission = usePermission()
   const platform = usePlatform()
-  const dialog = useDialog()
+  const serverSync = useServerSync()
   const settings = useSettings()
   const mobile = createMediaQuery("(max-width: 767px)")
   const updater = useUpdaterAction()
-  const permissionScope = createPermissionScopeController(() => props.sessionID)
-  const shell = createShellSettingsController()
-  const appearance = createAppearanceSettingsController()
-  const sounds = createSoundSettingsController()
   const desktop = createMemo(() => platform.platform === "desktop")
 
+  const dir = createMemo(() => {
+    if (!props.sessionID) return undefined
+    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
+  })
+  const accepting = createMemo(() => {
+    const value = dir()
+    if (!value || !props.sessionID) return false
+    return permission.isAutoAccepting(props.sessionID, value)
+  })
+  const toggleAccept = (checked: boolean) => {
+    const value = dir()
+    if (!value || !props.sessionID) return
+    if (checked) {
+      permission.enableAutoAccept(props.sessionID, value)
+      return
+    }
+    permission.disableAutoAccept(props.sessionID, value)
+  }
+
+  const [shells] = createResource(
+    async () => {
+      // TODO: Restore executable shell discovery when the V2 client exposes it.
+      return [] as ShellOption[]
+    },
+    { initialValue: [] as ShellOption[] },
+  )
   const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => desktop() && "getPinchZoomEnabled" in platform,
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
     () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
     { initialValue: false },
   )
 
+  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
+  const shellOptions = createMemo<ShellSelectOption[]>(() => {
+    const current = serverSync().data.config.shell
+    const nameCounts = new Map<string, number>()
+    shells.latest.forEach((shell) => nameCounts.set(shell.name, (nameCounts.get(shell.name) ?? 0) + 1))
+    const options = [
+      autoOption,
+      ...shells.latest.map((shell) => {
+        const ambiguous = (nameCounts.get(shell.name) ?? 0) > 1
+        const value = ambiguous ? shell.path : shell.name
+        return {
+          id: shell.path,
+          value,
+          label: shell.acceptable ? value : `${value} (${language.t("settings.general.row.shell.terminalOnly")})`,
+        }
+      }),
+    ]
+    if (current && !options.some((option) => option.value === current)) {
+      options.push({ id: current, value: current, label: current })
+    }
+    return options
+  })
+  const languageOptions = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+
   const onPinchZoomChange = (checked: boolean) => {
     setPinchZoom(checked)
     const update = platform.setPinchZoomEnabled?.(checked)
@@ -299,39 +106,55 @@ export const SettingsGeneralV2: Component<{
     void update.catch(() => setPinchZoom(!checked))
   }
 
-  const InterfaceSection = () => (
-    <LayoutTransitionToggle
-      title={language.t("settings.general.row.newInterface.title")}
-      badge={language.t("settings.general.row.newInterface.badge")}
-      description={language.t("settings.general.row.newInterface.description")}
-      checked={settings.general.newLayoutDesigns()}
-      onChange={(checked) => {
-        settings.general.setNewLayoutDesigns(checked)
-        if (checked) return
-        void import("@/components/dialog-settings").then((module) => {
-          void dialog.show(() => <module.DialogSettings />)
-        })
-      }}
-    />
-  )
-
-  const InterfaceNoticeSection = () => (
-    <LayoutRetirementNotice
-      title={language.t("settings.general.row.newInterfaceNotice.title")}
-      description={language.t("settings.general.row.newInterfaceNotice.description")}
-      dismiss={language.t("settings.general.row.newInterfaceNotice.dismiss")}
-      onDismiss={() => settings.general.dismissNewInterfaceNotice()}
-    />
-  )
-
   const GeneralSection = () => (
     <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.general")}</h3>
       <SettingsListV2>
-        <LanguageSetting />
+        <SettingsRowV2
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-language"
+            options={languageOptions()}
+            current={languageOptions().find((option) => option.value === language.locale())}
+            placement="bottom-end"
+            gutter={6}
+            value={(option) => option.value}
+            label={(option) => option.label}
+            onSelect={(option) => option && language.setLocale(option.value)}
+          />
+        </SettingsRowV2>
 
-        <PermissionScopeSetting controller={permissionScope} />
+        <SettingsRowV2
+          title={language.t("command.permissions.autoaccept.enable")}
+          description={language.t("toast.permissions.autoaccept.on.description")}
+        >
+          <div data-action="settings-auto-accept-permissions">
+            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
+          </div>
+        </SettingsRowV2>
 
-        <ShellSetting controller={shell} />
+        <SettingsRowV2
+          title={language.t("settings.general.row.shell.title")}
+          description={language.t("settings.general.row.shell.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-shell"
+            options={shellOptions()}
+            current={shellOptions().find((option) => option.value === currentShell()) ?? autoOption}
+            placement="bottom-end"
+            gutter={6}
+            value={(option) => option.id}
+            label={(option) => option.label}
+            onSelect={(option) => {
+              if (!option || option.value === currentShell()) return
+              serverSync().updateConfig({ shell: option.value })
+            }}
+          />
+        </SettingsRowV2>
 
         <SettingsRowV2
           title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -369,6 +192,29 @@ export const SettingsGeneralV2: Component<{
           </div>
         </SettingsRowV2>
 
+        <SettingsRowV2
+          title={language.t("settings.general.row.showCustomAgents.title")}
+          description={language.t("settings.general.row.showCustomAgents.description")}
+        >
+          <div data-action="settings-show-custom-agents">
+            <Switch
+              checked={settings.general.showCustomAgents()}
+              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
+            />
+          </div>
+        </SettingsRowV2>
+
+        <Show when={desktop()}>
+          <SettingsRowV2
+            title={language.t("settings.general.row.pinchZoom.title")}
+            description={language.t("settings.general.row.pinchZoom.description")}
+          >
+            <div data-action="settings-pinch-zoom">
+              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
+            </div>
+          </SettingsRowV2>
+        </Show>
+
         <Show when={mobile() && import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
           <SettingsRowV2
             title={language.t("settings.general.row.mobileTitlebarBottom.title")}
@@ -386,110 +232,9 @@ export const SettingsGeneralV2: Component<{
     </div>
   )
 
-  const AdvancedSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.advanced")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.showFileTree.title")}
-          description={language.t("settings.general.row.showFileTree.description")}
-        >
-          <div data-action="settings-show-file-tree">
-            <Switch
-              checked={settings.general.showFileTree()}
-              onChange={(checked) => settings.general.setShowFileTree(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showSearch.title")}
-          description={language.t("settings.general.row.showSearch.description")}
-        >
-          <div data-action="settings-show-search">
-            <Switch
-              checked={settings.general.showSearch()}
-              onChange={(checked) => settings.general.setShowSearch(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showStatus.title")}
-          description={language.t("settings.general.row.showStatus.description")}
-        >
-          <div data-action="settings-show-status">
-            <Switch
-              checked={settings.general.showStatus()}
-              onChange={(checked) => settings.general.setShowStatus(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showCustomAgents.title")}
-          description={language.t("settings.general.row.showCustomAgents.description")}
-        >
-          <div data-action="settings-show-custom-agents">
-            <Switch
-              checked={settings.general.showCustomAgents()}
-              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const NotificationsSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.agent.title")}
-          description={language.t("settings.general.notifications.agent.description")}
-        >
-          <div data-action="settings-notifications-agent">
-            <Switch
-              checked={settings.notifications.agent()}
-              onChange={(checked) => settings.notifications.setAgent(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.permissions.title")}
-          description={language.t("settings.general.notifications.permissions.description")}
-        >
-          <div data-action="settings-notifications-permissions">
-            <Switch
-              checked={settings.notifications.permissions()}
-              onChange={(checked) => settings.notifications.setPermissions(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.errors.title")}
-          description={language.t("settings.general.notifications.errors.description")}
-        >
-          <div data-action="settings-notifications-errors">
-            <Switch
-              checked={settings.notifications.errors()}
-              onChange={(checked) => settings.notifications.setErrors(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
   const UpdatesSection = () => (
     <div class="settings-v2-section">
       <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
-
       <SettingsListV2>
         <SettingsRowV2
           title={language.t("settings.general.row.releaseNotes.title")}
@@ -502,12 +247,11 @@ export const SettingsGeneralV2: Component<{
             />
           </div>
         </SettingsRowV2>
-
         <SettingsRowV2
           title={language.t("settings.updates.row.check.title")}
           description={language.t("settings.updates.row.check.description")}
         >
-          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={updater.run}>
             {language.t(updater.action().label)}
           </ButtonV2>
         </SettingsRowV2>
@@ -515,55 +259,43 @@ export const SettingsGeneralV2: Component<{
     </div>
   )
 
-  // We can probably remove this, right?
-  const DisplaySection = () => (
-    <Show when={desktop()}>
-      <div class="settings-v2-section">
-        <h3 class="settings-v2-section-title">{language.t("settings.general.section.display")}</h3>
-
-        <SettingsListV2>
-          <SettingsRowV2
-            title={language.t("settings.general.row.pinchZoom.title")}
-            description={language.t("settings.general.row.pinchZoom.description")}
-          >
-            <div data-action="settings-pinch-zoom">
-              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
-            </div>
-          </SettingsRowV2>
-        </SettingsListV2>
-      </div>
-    </Show>
+  const AdvancedSection = () => (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.advanced")}</h3>
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.showStatus.title")}
+          description={language.t("settings.general.row.showStatus.description")}
+        >
+          <div data-action="settings-show-status">
+            <Switch
+              checked={settings.general.showStatus()}
+              onChange={(checked) => settings.general.setShowStatus(checked)}
+            />
+          </div>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
   )
 
   return (
     <>
       <div class="settings-v2-tab-header">
-        <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.preferences")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t("settings.preferences.description")}
+            </span>
+          </div>
+        </div>
       </div>
 
       <div class="settings-v2-tab-body">
-        <Show when={settings.general.layoutTransitionAvailable()}>
-          <InterfaceSection />
-        </Show>
-
-        <Show when={settings.general.newInterfaceNoticeVisible()}>
-          <InterfaceNoticeSection />
-        </Show>
-
         <GeneralSection />
-
-        <AppearanceSection controller={appearance} />
-
-        <NotificationsSection />
-
-        <SoundsSection controller={sounds} />
-
         <Show when={desktop()}>
           <UpdatesSection />
         </Show>
-
-        <DisplaySection />
-
         <AdvancedSection />
       </div>
     </>

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

@@ -11,6 +11,7 @@ import { useModels } from "@/context/models"
 import { useServerSDK } from "@/context/server-sdk"
 import { popularProviders } from "@/hooks/use-providers"
 import { Persist, persisted } from "@/utils/persist"
+import { InlineServerSelect } from "./parts/server-select"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import "./settings-v2.css"
@@ -53,7 +54,13 @@ export const SettingsModelsV2: Component = () => {
   return (
     <>
       <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-        <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.models.description")}</span>
+          </div>
+          <InlineServerSelect />
+        </div>
         <div class="settings-v2-tab-search">
           <TextInputV2
             type="search"

packages/app/src/components/settings-v2/notifications.tsx

@@ -0,0 +1,124 @@
+import { Component } from "solid-js"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import { createSoundSettingsController, soundOptions, type SoundSettingsController } from "./general-controllers"
+import "./settings-v2.css"
+
+const soundSettings = {
+  agent: {
+    action: "settings-sounds-agent",
+    title: "settings.general.sounds.agent.title",
+    description: "settings.general.sounds.agent.description",
+  },
+  permissions: {
+    action: "settings-sounds-permissions",
+    title: "settings.general.sounds.permissions.title",
+    description: "settings.general.sounds.permissions.description",
+  },
+  errors: {
+    action: "settings-sounds-errors",
+    title: "settings.general.sounds.errors.title",
+    description: "settings.general.sounds.errors.description",
+  },
+} as const
+
+const SoundSetting: Component<{
+  kind: "agent" | "permissions" | "errors"
+  channel: SoundSettingsController["agent"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => soundSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <SelectV2
+        appearance="inline"
+        data-action={config().action}
+        options={soundOptions}
+        current={props.channel.current()}
+        value={(option) => option.id}
+        label={(option) => language.t(option.label)}
+        onHighlight={props.channel.highlight}
+        onSelect={props.channel.select}
+        placement="bottom-end"
+        gutter={6}
+      />
+    </SettingsRowV2>
+  )
+}
+
+export const SettingsNotificationsV2: Component = () => {
+  const language = useLanguage()
+  const settings = useSettings()
+  const sounds = createSoundSettingsController()
+
+  return (
+    <>
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.notifications")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t("settings.notifications.description")}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
+          <SettingsListV2>
+            <SettingsRowV2
+              title={language.t("settings.general.notifications.agent.title")}
+              description={language.t("settings.general.notifications.agent.description")}
+            >
+              <div data-action="settings-notifications-agent">
+                <Switch
+                  checked={settings.notifications.agent()}
+                  onChange={(checked) => settings.notifications.setAgent(checked)}
+                />
+              </div>
+            </SettingsRowV2>
+
+            <SettingsRowV2
+              title={language.t("settings.general.notifications.permissions.title")}
+              description={language.t("settings.general.notifications.permissions.description")}
+            >
+              <div data-action="settings-notifications-permissions">
+                <Switch
+                  checked={settings.notifications.permissions()}
+                  onChange={(checked) => settings.notifications.setPermissions(checked)}
+                />
+              </div>
+            </SettingsRowV2>
+
+            <SettingsRowV2
+              title={language.t("settings.general.notifications.errors.title")}
+              description={language.t("settings.general.notifications.errors.description")}
+            >
+              <div data-action="settings-notifications-errors">
+                <Switch
+                  checked={settings.notifications.errors()}
+                  onChange={(checked) => settings.notifications.setErrors(checked)}
+                />
+              </div>
+            </SettingsRowV2>
+          </SettingsListV2>
+        </div>
+
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+          <SettingsListV2>
+            <SoundSetting kind="agent" channel={sounds.agent} />
+            <SoundSetting kind="permissions" channel={sounds.permissions} />
+            <SoundSetting kind="errors" channel={sounds.errors} />
+          </SettingsListV2>
+        </div>
+      </div>
+    </>
+  )
+}

packages/app/src/components/settings-v2/parts/server-select.tsx

@@ -0,0 +1,49 @@
+import { Show, createMemo, type Component } from "solid-js"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { useGlobal } from "@/context/global"
+import { ServerConnection, serverName } from "@/context/server"
+
+const allServers = { type: "all" } as const
+type ServerOption = ServerConnection.Any | typeof allServers
+
+export const InlineServerSelect: Component<{
+  all?: {
+    label: string
+    selected: () => boolean
+    onSelect: () => void
+  }
+  onServerSelect?: () => void
+}> = (props) => {
+  const global = useGlobal()
+  const options = createMemo<ServerOption[]>(() => [...(props.all ? [allServers] : []), ...global.servers.list()])
+  const current = () => (props.all?.selected() ? allServers : global.settings.server.selected())
+
+  return (
+    <Show when={options().length > 1}>
+      <SelectV2
+        appearance="inline"
+        data-action="settings-server-select"
+        options={options()}
+        current={current()}
+        value={(server) => (server.type === "all" ? server.type : ServerConnection.key(server))}
+        label={(server) =>
+          server.type === "all" ? (props.all?.label ?? "") : serverName(server) || ServerConnection.key(server)
+        }
+        optionDisabled={(server) =>
+          server.type === "all" ? false : global.servers.health[ServerConnection.key(server)]?.healthy === false
+        }
+        placement="bottom-end"
+        gutter={6}
+        onSelect={(server) => {
+          if (!server) return
+          if (server.type === "all") {
+            props.all?.onSelect()
+            return
+          }
+          global.settings.server.set(ServerConnection.key(server))
+          props.onServerSelect?.()
+        }}
+      />
+    </Show>
+  )
+}

packages/app/src/components/settings-v2/projects.tsx

@@ -0,0 +1,139 @@
+import { Component, For, Show, createMemo, createSignal } from "solid-js"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
+import { useGlobal } from "@/context/global"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { ServerConnection, serverName } from "@/context/server"
+import { displayName } from "@/pages/layout/helpers"
+import { InlineServerSelect } from "./parts/server-select"
+import { DialogEditProjectV2 } from "../dialog-edit-project-v2"
+import "./settings-v2.css"
+
+export const SettingsProjectsV2: Component = () => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const global = useGlobal()
+  const [allServers, setAllServers] = createSignal(true)
+  const selected = global.settings.server.selected
+  const projects = createMemo(() => {
+    const server = selected()
+    if (!server) return []
+    return global.ensureServerCtx(server).projects.list()
+  })
+
+  type ProjectItem = ReturnType<typeof projects>[number]
+
+  const groups = createMemo(() =>
+    global.servers
+      .list()
+      .map((server) => ({ server, projects: global.ensureServerCtx(server).projects.list() }))
+      .filter((group) => group.projects.length > 0),
+  )
+
+  const openProjectSettings = (project: ProjectItem, server = selected()) => {
+    if (!server) return
+    dialog.push(() => <DialogEditProjectV2 project={project} server={server} />)
+  }
+
+  const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
+    const name = () => displayName(props.project)
+    const color = () => getProjectAvatarVariant(props.project.icon?.color)
+    return (
+      <div
+        class="group flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] cursor-pointer transition-all hover:bg-v2-background-bg-layer-01"
+        onClick={() => openProjectSettings(props.project, props.server)}
+      >
+        <div class="flex items-center gap-2.5 min-w-0 flex-1">
+          <ProjectAvatar fallback={name()} variant={color()} class="shrink-0" />
+          <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
+        </div>
+        <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+          <IconButtonV2
+            type="button"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
+            onClick={(event: MouseEvent) => {
+              event.stopPropagation()
+              openProjectSettings(props.project, props.server)
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.projects.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.projects.description")}</span>
+          </div>
+          <InlineServerSelect
+            all={{
+              label: language.t("settings.projects.server.all"),
+              selected: allServers,
+              onSelect: () => setAllServers(true),
+            }}
+            onServerSelect={() => setAllServers(false)}
+          />
+        </div>
+      </div>
+
+      <div class="settings-v2-tab-body">
+        <Show
+          when={allServers()}
+          fallback={
+            <div class="flex flex-col gap-2 w-full">
+              <Show
+                when={projects().length > 0}
+                fallback={
+                  <div class="py-12 text-center text-v2-text-text-muted text-13-regular">
+                    {language.t("settings.projects.empty")}
+                  </div>
+                }
+              >
+                <Show when={selected()} keyed>
+                  {(server) => (
+                    <For each={projects()}>{(project) => <ProjectRow project={project} server={server} />}</For>
+                  )}
+                </Show>
+              </Show>
+            </div>
+          }
+        >
+          <div class="flex flex-col gap-8 w-full">
+            <Show
+              when={groups().length > 0}
+              fallback={
+                <div class="py-12 text-center text-v2-text-text-muted text-13-regular">
+                  {language.t("settings.projects.empty")}
+                </div>
+              }
+            >
+              <For each={groups()}>
+                {(group) => (
+                  <div class="settings-v2-section">
+                    <h3 class="settings-v2-section-title">
+                      {serverName(group.server) || ServerConnection.key(group.server)}
+                    </h3>
+                    <div class="flex flex-col gap-2 w-full">
+                      <For each={group.projects}>
+                        {(project) => <ProjectRow project={project} server={group.server} />}
+                      </For>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}

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

@@ -6,10 +6,12 @@ import { showToast } from "@/utils/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { createMemo, type Accessor, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { useServerProtocol, useServerSDK } from "@/context/server-sdk"
+import { useServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
 import { DialogConnectProvider, useProviderConnectController } from "../dialog-connect-provider"
 import { DialogCustomProvider } from "../dialog-custom-provider"
+import { SettingsServerScope } from "../settings-server-picker"
+import { InlineServerSelect } from "./parts/server-select"
 import { SettingsListV2 } from "./parts/list"
 import "./settings-v2.css"
 
@@ -36,20 +38,29 @@ export const SettingsProvidersV2: Component<{
   const dialog = useDialog()
   const language = useLanguage()
   const serverSdk = useServerSDK()
-  const protocol = useServerProtocol()
   const serverSync = useServerSync()
   const providers = useProviders(props.directory)
   const providerConnect = useProviderConnectController({ onBack: props.onBack })
 
   const connect = (provider?: string) => {
     providerConnect.select(provider)
-    void dialog.show(() => <DialogConnectProvider directory={props.directory} controller={providerConnect} />)
+    void dialog.show(() => (
+      <SettingsServerScope>
+        <DialogConnectProvider directory={props.directory} controller={providerConnect} />
+      </SettingsServerScope>
+    ))
   }
 
   const connected = createMemo(() => {
-    return providers
-      .connected()
-      .filter((p) => p.id !== "opencode" || Object.values(p.models).find((m) => m.cost?.input))
+    return providers.connected().filter(
+      (provider) =>
+        provider.id !== "opencode" ||
+        Object.values(provider.models).some((model) => {
+          if (typeof model !== "object" || model === null || !("cost" in model)) return false
+          const cost = model.cost
+          return typeof cost === "object" && cost !== null && "input" in cost
+        }),
+    )
   })
 
   const popular = createMemo(() => {
@@ -81,8 +92,7 @@ export const SettingsProvidersV2: Component<{
     return language.t("settings.providers.tag.other")
   }
 
-  const canDisconnect = (item: ProviderItem) =>
-    source(item) !== "env" && (protocol() === "v1" || !isConfigCustom(item.id))
+  const canDisconnect = (item: ProviderItem) => source(item) !== "env" && !isConfigCustom(item.id)
 
   const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
 
@@ -94,41 +104,16 @@ export const SettingsProvidersV2: Component<{
     return true
   }
 
-  const disableProvider = async (providerID: string, name: string) => {
-    if (protocol() !== "v1") return
-    const before = serverSync().data.config.disabled_providers ?? []
-    const next = before.includes(providerID) ? before : [...before, providerID]
-    serverSync().set("config", "disabled_providers", next)
-
-    await serverSync()
-      .updateConfig({ disabled_providers: next })
-      .then(() => {
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
-          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
-        })
-      })
-      .catch((err: unknown) => {
-        serverSync().set("config", "disabled_providers", before)
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-  }
-
   const disconnect = async (providerID: string, name: string) => {
-    if (isConfigCustom(providerID)) {
-      await serverSdk()
-        .client.auth.remove({ providerID })
-        .catch(() => undefined)
-      await disableProvider(providerID, name)
-      return
-    }
+    const location = props.directory() ? { directory: props.directory() } : undefined
     await serverSdk()
-      .client.auth.remove({ providerID })
-      .then(async () => {
-        await serverSdk().client.global.dispose()
+      .api.integration.get({ integrationID: providerID, location })
+      .then(async (integration) => {
+        const credentials = integration.data?.connections.filter((item) => item.type === "credential") ?? []
+        if (credentials.length === 0) throw new Error(`No removable credentials found for ${name}`)
+        await Promise.all(
+          credentials.map((credential) => serverSdk().api.credential.remove({ credentialID: credential.id, location })),
+        )
         showToast({
           variant: "success",
           icon: "circle-check",
@@ -145,7 +130,13 @@ export const SettingsProvidersV2: Component<{
   return (
     <>
       <div class="settings-v2-tab-header">
-        <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.providers.description")}</span>
+          </div>
+          <InlineServerSelect />
+        </div>
       </div>
 
       <div class="settings-v2-tab-body settings-v2-providers">
@@ -224,7 +215,7 @@ export const SettingsProvidersV2: Component<{
               )}
             </For>
 
-            <Show when={protocol() === "v1"}>
+            <Show when={false}>
               <div class="settings-v2-provider-row" data-component="custom-provider-section">
                 <div class="settings-v2-provider-lead">
                   <ProviderIcon
@@ -248,7 +239,11 @@ export const SettingsProvidersV2: Component<{
                   variant="neutral"
                   icon="plus"
                   onClick={() => {
-                    dialog.show(() => <DialogCustomProvider onBack={dialog.close} />)
+                    dialog.show(() => (
+                      <SettingsServerScope>
+                        <DialogCustomProvider onBack={dialog.close} />
+                      </SettingsServerScope>
+                    ))
                   }}
                 >
                   {language.t("common.connect")}

packages/app/src/components/settings-v2/servers.tsx

@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
 import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
-import { ServerConnection, serverName } from "@/context/server"
+import { ServerConnection, serverName, useServer } from "@/context/server"
 import { useServerManagementController } from "../dialog-select-server"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"
@@ -19,6 +19,7 @@ import "./settings-v2.css"
 export const SettingsServersV2: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
+  const server = useServer()
   const controller = useServerManagementController()
   const [store, setStore] = createStore({ filter: "" })
   const wslServers = useFilteredWslServers(() => store.filter)
@@ -27,25 +28,53 @@ export const SettingsServersV2: Component = () => {
     () => controller.sortedItems().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
   )
 
+  const isLocal = (item: ServerConnection.Any) => ServerConnection.local(item)
+
+  const isDefaultServer = (key: ServerConnection.Key, item: ServerConnection.Any) => {
+    const def = controller.defaultKey()
+    if (!def) return isLocal(item)
+    return def === key
+  }
+
   const filtered = createMemo(() => {
     const items = controller.sortedItems().filter((item) => !isWslServer(item))
     const query = store.filter.trim()
-    if (!query) return items
+    if (!query) {
+      return items.slice().sort((a, b) => {
+        const aLocal = isLocal(a)
+        const bLocal = isLocal(b)
+        if (aLocal && !bLocal) return -1
+        if (!aLocal && bLocal) return 1
+        return 0
+      })
+    }
     return fuzzysort
       .go(query, items, {
         keys: [(item) => serverName(item), (item) => item.http.url],
       })
       .map((result) => result.obj)
+      .sort((a, b) => {
+        const aLocal = isLocal(a)
+        const bLocal = isLocal(b)
+        if (aLocal && !bLocal) return -1
+        if (!aLocal && bLocal) return 1
+        return 0
+      })
   })
 
   const openAdd = () => {
     dialog.push(() => <DialogServerV2 mode="add" />)
   }
 
-  const openEdit = (server: ServerConnection.Http) => {
+  const openEdit = (server: ServerConnection.Any) => {
     dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
   }
 
+  const openWslEdit = (key: ServerConnection.Key) => {
+    const item = server.list.find((candidate) => ServerConnection.key(candidate) === key)
+    if (item) openEdit(item)
+  }
+
   return (
     <>
       <div
@@ -53,7 +82,10 @@ export const SettingsServersV2: Component = () => {
         classList={{ "settings-v2-tab-header--stacked": showSearch() }}
       >
         <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.servers.description")}</span>
+          </div>
           <AddServerMenu onAddServer={openAdd} />
         </div>
         <Show when={showSearch()}>
@@ -97,12 +129,11 @@ export const SettingsServersV2: Component = () => {
           }
         >
           <SettingsListV2>
-            <WslServerSettings controller={controller} servers={wslServers} />
             <For each={filtered()}>
               {(item) => {
                 const key = ServerConnection.key(item)
                 const health = () => controller.status()[key]
-                const isDefault = () => controller.defaultKey() === key
+                const isDefault = () => isDefaultServer(key, item)
                 return (
                   <div class="settings-v2-servers-row">
                     <div class="settings-v2-servers-lead">
@@ -131,6 +162,7 @@ export const SettingsServersV2: Component = () => {
                 )
               }}
             </For>
+            <WslServerSettings controller={controller} servers={wslServers} onEdit={openWslEdit} />
           </SettingsListV2>
         </Show>
       </div>

packages/app/src/components/settings-v2/settings-v2.css

@@ -39,6 +39,14 @@
   background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
 }
 
+.settings-v2-tab-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+}
+
 .settings-v2-tab-title {
   font-size: 15px;
   font-weight: 640;
@@ -174,13 +182,13 @@
   max-width: 100%;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] > [data-slot="tabs-v2-list"] {
   background-color: var(--v2-background-bg-layer-01);
 }
 
 @media (max-width: 639px) {
   .settings-v2[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-    [data-slot="tabs-v2-list"] {
+    > [data-slot="tabs-v2-list"] {
     width: 144px;
     min-width: 144px;
     padding-inline: 8px;
@@ -287,7 +295,7 @@
 }
 
 .settings-v2-provider-env-hint {
-  padding-inline-end: 12px;
+  padding-right: 12px;
   font-size: 13px;
   font-weight: 440;
   line-height: 1;
@@ -311,7 +319,7 @@
   line-height: 1;
   color: var(--v2-text-text-accent);
   cursor: pointer;
-  text-align: start;
+  text-align: left;
 }
 
 .settings-v2-providers-view-all:hover {
@@ -361,13 +369,13 @@
 }
 
 .settings-v2-tab-search [data-slot="text-input-v2-input"] {
-  padding-inline-end: 28px;
+  padding-right: 28px;
 }
 
 .settings-v2-tab-search-clear {
   position: absolute;
   top: 50%;
-  inset-inline-end: 6px;
+  right: 6px;
   z-index: 1;
   transform: translateY(-50%);
 }
@@ -727,3 +735,24 @@
   line-height: 1;
   color: var(--v2-state-fg-danger);
 }
+
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
+  width: 280px;
+  padding-inline: 0 !important;
+}
+
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
+  display: none;
+}
+
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger-wrapper"] {
+  border-radius: 6px;
+}
+
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger"] {
+  padding-inline: 8px;
+}

packages/app/src/components/settings-v2/workspaces.tsx

@@ -0,0 +1,475 @@
+import type { Component } from "solid-js"
+import { For, Show, createMemo } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import type { Project, Session } from "@opencode-ai/sdk/v2/client"
+import { useQuery } from "@tanstack/solid-query"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { showToast } from "@/utils/toast"
+import { getRelativeTime } from "@/utils/time"
+import { pathKey } from "@/utils/path-key"
+import { SettingsListV2 } from "./parts/list"
+import { useTabs } from "@/context/tabs"
+import { usePlatform } from "@/context/platform"
+import { clearWorkspaceTerminals } from "@/context/terminal"
+import { ServerConnection } from "@/context/server"
+import {
+  containsDirectory,
+  filterWorkspaceInventory,
+  inspectWorkspaceDeletion,
+  mergeWorkspaceSessionInventory,
+  removeWorkspacesSequentially,
+  sessionsForWorkspace,
+  type WorkspaceDeleteInspection,
+  workspaceInventory,
+} from "@/utils/workspace"
+import { listAllSessions, normalizeSessionInfo } from "@/utils/session"
+import type { ServerScope } from "@/utils/server-scope"
+import "./settings-v2.css"
+
+type Workspace = {
+  directory: string
+  project: Project
+}
+
+export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
+  const tabs = useTabs()
+  const platform = usePlatform()
+  const [store, setStore] = createStore({
+    project: "all",
+    transaction: undefined as "confirm" | "running" | undefined,
+  })
+
+  const workspaces = createMemo(() => workspaceInventory(serverSync().data.project))
+  const projects = createMemo(() => serverSync().data.project.filter((project) => project.sandboxes?.length))
+  const projectName = (project: Project) => project.name || getFilename(project.worktree)
+  const projectOptions = createMemo(() => [
+    { id: "all", label: language.t("settings.workspaces.filter.all") },
+    ...projects().map((project) => ({ id: project.id, label: projectName(project) })),
+  ])
+  const selectedProject = createMemo(() =>
+    store.project === "all" || projects().some((project) => project.id === store.project) ? store.project : "all",
+  )
+  const filtered = createMemo(() => filterWorkspaceInventory(workspaces(), selectedProject()))
+  const captureDeleteContext = () => {
+    const sdk = serverSDK()
+    return { sdk, sync: serverSync(), server: ServerConnection.key(sdk.server), activeDirectory: props.activeDirectory }
+  }
+  const loadSessions = async (context = captureDeleteContext()) => {
+    const protocol = await context.sdk.protocol
+    const fetched =
+      protocol === "v1"
+        ? await context.sdk.api.session.list({ limit: 1000, order: "desc" }).then((response) => {
+            if (response.data.length >= 1000) throw new Error("Incomplete legacy session inventory")
+            return response.data.map(normalizeSessionInfo)
+          })
+        : await listAllSessions(context.sdk.api.session, { order: "desc" })
+    return mergeWorkspaceSessionInventory(
+      fetched,
+      Object.values(context.sync.session.data.info).filter((session): session is Session => !!session),
+    )
+  }
+  const sessionQuery = useQuery(() => ({
+    queryKey: [serverSDK().scope, null, "settings-workspace-sessions"] as const,
+    queryFn: () => loadSessions(),
+    refetchOnMount: "always",
+  }))
+  const workspaceSessions = (workspace: Workspace) => {
+    if (!sessionQuery.isSuccess) return []
+    return sessionsForWorkspace(sessionQuery.data ?? [], workspace.directory)
+  }
+  const sessionCount = (workspace: Workspace) => {
+    if (sessionQuery.isPending) return language.t("session.messages.loading")
+    if (sessionQuery.isError) return language.t("common.requestFailed")
+    const count = workspaceSessions(workspace).length
+    return language.plural("settings.workspaces.sessions", count, {
+      count,
+      project: projectName(workspace.project),
+    })
+  }
+  const lastActive = (workspace: Workspace) => {
+    const updated = workspaceSessions(workspace)[0]?.time.updated
+    if (!updated) return undefined
+    return getRelativeTime(new Date(updated).toISOString(), language.t)
+  }
+  const sessionTime = (session: Session) => {
+    if (!session.time.updated) return undefined
+    return getRelativeTime(new Date(session.time.updated).toISOString(), language.t)
+  }
+
+  const inspect = async (workspace: Workspace, context = captureDeleteContext()) => {
+    const [working, branch, sessions] = await Promise.all([
+      context.sdk.api.vcs.status({ location: { directory: workspace.directory } }),
+      context.sdk.api.vcs.diff({ location: { directory: workspace.directory }, mode: "branch" }),
+      loadSessions(context),
+    ])
+    const result = inspectWorkspaceDeletion({
+      workspace: workspace.directory,
+      activeDirectory: context.activeDirectory,
+      sessions,
+      status: working.data.length > 0 || branch.data.length > 0 ? "dirty" : "clean",
+    })
+    return { result, sessions }
+  }
+  const inspectionMessage = (result: WorkspaceDeleteInspection) => {
+    if (result === "active") return language.t("settings.workspaces.delete.blocked.active")
+    if (result === "linked") return language.t("settings.workspaces.delete.blocked.linked")
+    if (result === "dirty") return language.t("workspace.status.dirty")
+    return language.t("workspace.status.clean")
+  }
+  const blocked = (result: WorkspaceDeleteInspection) => {
+    showToast({
+      variant: "error",
+      title: language.t("workspace.delete.failed.title"),
+      description: inspectionMessage(result),
+    })
+  }
+
+  const remove = async (workspace: Workspace, allowDirty = false, context = captureDeleteContext()) => {
+    const preflight = await inspect(workspace, context)
+    if (preflight.result !== "safe" && (!allowDirty || preflight.result !== "dirty")) {
+      blocked(preflight.result)
+      return
+    }
+    const removed = await context.sdk.client.worktree
+      .remove({
+        directory: workspace.project.worktree,
+        worktreeRemoveInput: { directory: workspace.directory },
+      })
+      .then((result) => result.data)
+      .catch((error) => {
+        showToast({
+          variant: "error",
+          title: language.t("workspace.delete.failed.title"),
+          description: error instanceof Error ? error.message : language.t("common.requestFailed"),
+        })
+        return false
+      })
+    if (!removed) return
+    tabs.store.forEach((tab) => {
+      if (tab.type !== "draft" || tab.server !== context.server) return
+      const directoryMatches = containsDirectory(workspace.directory, tab.directory)
+      const worktreeMatches = tab.worktree && containsDirectory(workspace.directory, tab.worktree)
+      if (!directoryMatches && !worktreeMatches) return
+      tabs.updateDraft(tab.draftID, {
+        directory: directoryMatches ? workspace.project.worktree : tab.directory,
+        worktree: undefined,
+      })
+    })
+    clearWorkspaceTerminals(
+      workspace.directory,
+      preflight.sessions.map((session) => session.id),
+      platform,
+      context.sdk.scope,
+    )
+    context.sync.set(
+      "project",
+      produce((draft) => {
+        const project = draft.find((item) => item.id === workspace.project.id)
+        if (!project) return
+        project.sandboxes = (project.sandboxes ?? []).filter(
+          (directory) => pathKey(directory) !== pathKey(workspace.directory),
+        )
+      }),
+    )
+  }
+
+  let inspectionID = 0
+  const releaseConfirmation = () => {
+    if (store.transaction === "confirm") setStore("transaction", undefined)
+  }
+  const transact = async (task: () => Promise<void>) => {
+    if (store.transaction !== "confirm") return
+    setStore("transaction", "running")
+    try {
+      await task()
+    } catch (error) {
+      showToast({
+        variant: "error",
+        title: language.t("workspace.delete.failed.title"),
+        description: error instanceof Error ? error.message : language.t("common.requestFailed"),
+      })
+    } finally {
+      setStore("transaction", undefined)
+    }
+  }
+  const confirmDelete = (workspace: Workspace) => {
+    if (store.transaction) return
+    const context = captureDeleteContext()
+    const current = ++inspectionID
+    setStore("transaction", "confirm")
+    void dialog.push(
+      () => (
+        <DialogDeleteWorkspace
+          workspace={workspace}
+          scope={context.sdk.scope}
+          inspectionID={current}
+          inspect={() => inspect(workspace, context)}
+          inspectionMessage={inspectionMessage}
+          onDelete={() => transact(() => remove(workspace, true, context))}
+        />
+      ),
+      releaseConfirmation,
+    )
+  }
+  const removeAll = async (inventory: Workspace[], context: ReturnType<typeof captureDeleteContext>) => {
+    await removeWorkspacesSequentially(inventory, (workspace) => remove(workspace, false, context))
+  }
+  const confirmDeleteAll = () => {
+    if (store.transaction) return
+    const context = captureDeleteContext()
+    const inventory = [...filtered()]
+    const project = projectOptions().find((option) => option.id === selectedProject())?.label ?? selectedProject()
+    setStore("transaction", "confirm")
+    void dialog.push(
+      () => (
+        <DialogDeleteAllWorkspaces
+          count={inventory.length}
+          project={project}
+          onDelete={() => transact(() => removeAll(inventory, context))}
+        />
+      ),
+      releaseConfirmation,
+    )
+  }
+
+  return (
+    <>
+      <div class="settings-v2-tab-header settings-v2-workspaces-header">
+        <h2 class="settings-v2-tab-title">{language.t("settings.tab.workspaces")}</h2>
+      </div>
+
+      <div class="settings-v2-tab-body settings-v2-workspaces">
+        <div class="settings-v2-workspaces-toolbar">
+          <span class="settings-v2-workspaces-count">
+            {language.plural("settings.workspaces.count", filtered().length)}
+          </span>
+          <div class="settings-v2-workspaces-toolbar-actions">
+            <Show when={projects().length > 1}>
+              <SelectV2
+                appearance="inline"
+                options={projectOptions()}
+                current={projectOptions().find((option) => option.id === selectedProject())}
+                value={(option) => option.id}
+                label={(option) => option.label}
+                placement="bottom-end"
+                gutter={6}
+                onSelect={(option) => option && setStore("project", option.id)}
+              />
+            </Show>
+            <Show when={filtered().length > 0}>
+              <MenuV2 placement="bottom-end" gutter={4}>
+                <MenuV2.Trigger
+                  as={IconButtonV2}
+                  type="button"
+                  variant="ghost-muted"
+                  size="small"
+                  aria-label={language.t("common.moreOptions")}
+                  disabled={!!store.transaction}
+                  icon={<Icon name="outline-dots" size="small" />}
+                />
+                <MenuV2.Portal>
+                  <MenuV2.Content>
+                    <MenuV2.Item onSelect={confirmDeleteAll}>
+                      <span class="settings-v2-workspaces-delete-all">
+                        {language.t("settings.workspaces.deleteAll")}
+                      </span>
+                    </MenuV2.Item>
+                  </MenuV2.Content>
+                </MenuV2.Portal>
+              </MenuV2>
+            </Show>
+          </div>
+        </div>
+
+        <div class="settings-v2-workspaces-inventory">
+          <Show
+            when={filtered().length > 0}
+            fallback={<div class="settings-v2-workspaces-empty">{language.t("settings.workspaces.empty")}</div>}
+          >
+            <SettingsListV2>
+              <For each={filtered()}>
+                {(workspace) => {
+                  const linked = () => workspaceSessions(workspace)
+                  return (
+                    <div class="settings-v2-workspaces-row">
+                      <div class="settings-v2-workspaces-row-header">
+                        <div class="settings-v2-workspaces-copy">
+                          <div class="settings-v2-workspaces-main">
+                            <TooltipV2
+                              value={workspace.directory}
+                              placement="top-start"
+                              contentClass="max-w-[calc(100vw-32px)] break-all"
+                            >
+                              <span tabIndex={0} aria-label={workspace.directory} class="settings-v2-workspaces-path">
+                                {workspace.directory}
+                              </span>
+                            </TooltipV2>
+                          </div>
+                          <span class="settings-v2-workspaces-meta">{sessionCount(workspace)}</span>
+                        </div>
+                        <div class="settings-v2-workspaces-row-actions">
+                          <Show when={lastActive(workspace)}>
+                            {(value) => (
+                              <TooltipV2
+                                value={language.t("settings.workspaces.lastActiveSession")}
+                                placement="top-end"
+                              >
+                                <span tabIndex={0} class="settings-v2-workspaces-active">
+                                  {value()}
+                                </span>
+                              </TooltipV2>
+                            )}
+                          </Show>
+                          <IconButtonV2
+                            type="button"
+                            variant="ghost-muted"
+                            size="small"
+                            aria-label={language.t("workspace.delete.confirm", {
+                              name: getFilename(workspace.directory),
+                            })}
+                            disabled={!!store.transaction}
+                            icon={<Icon name="trash" size="small" />}
+                            onClick={() => confirmDelete(workspace)}
+                          />
+                        </div>
+                      </div>
+                      <Show when={linked().length > 0}>
+                        <div class="settings-v2-workspaces-sessions">
+                          <For each={linked()}>
+                            {(session) => (
+                              <div class="settings-v2-workspaces-session">
+                                <span>{session.title}</span>
+                                <Show when={sessionTime(session)}>
+                                  {(time) => <span class="settings-v2-workspaces-session-time">{time()}</span>}
+                                </Show>
+                              </div>
+                            )}
+                          </For>
+                        </div>
+                      </Show>
+                    </div>
+                  )
+                }}
+              </For>
+            </SettingsListV2>
+          </Show>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function DialogDeleteAllWorkspaces(props: { count: number; project: string; onDelete: () => Promise<void> }) {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const remove = () => {
+    const deleting = props.onDelete()
+    dialog.close()
+    void deleting
+  }
+
+  return (
+    <Dialog fit>
+      <DialogHeader>
+        <DialogTitleGroup
+          title={language.t("settings.workspaces.deleteAll")}
+          description={
+            <>
+              {language.t("settings.workspaces.deleteAll.confirm", { count: props.count })}
+              <br />
+              {language.t("settings.workspaces.deleteAll.warning", { count: props.count, project: props.project })}
+            </>
+          }
+        />
+      </DialogHeader>
+      <DialogFooter>
+        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
+          {language.t("common.cancel")}
+        </ButtonV2>
+        <ButtonV2 type="button" variant="danger" onClick={remove}>
+          {language.t("settings.workspaces.deleteAll")}
+        </ButtonV2>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+function DialogDeleteWorkspace(props: {
+  workspace: Workspace
+  scope: ServerScope
+  inspectionID: number
+  inspect: () => Promise<{ result: WorkspaceDeleteInspection; sessions: Session[] }>
+  inspectionMessage: (result: WorkspaceDeleteInspection) => string
+  onDelete: () => Promise<void>
+}) {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const status = useQuery(() => ({
+    queryKey: [props.scope, pathKey(props.workspace.directory), "workspace-delete-status", props.inspectionID] as const,
+    queryFn: props.inspect,
+    staleTime: 0,
+  }))
+  const description = () => {
+    if (status.isPending) return language.t("workspace.status.checking")
+    if (status.isError) return language.t("workspace.status.error")
+    return props.inspectionMessage(status.data?.result ?? "unknown")
+  }
+  const remove = () => {
+    const deleting = props.onDelete()
+    dialog.close()
+    void deleting
+  }
+
+  return (
+    <Dialog fit>
+      <DialogHeader>
+        <DialogTitleGroup
+          title={language.t("workspace.delete.title")}
+          description={
+            <>
+              {language.t("workspace.delete.confirm", { name: getFilename(props.workspace.directory) })}
+              <br />
+              <code class="max-w-full rounded-[4px] bg-[color-mix(in_oklch,var(--v2-text-text-base)_8%,transparent)] px-1 py-0.5 font-mono text-xs font-medium leading-4 text-v2-text-text-base break-all">
+                {props.workspace.directory}
+              </code>
+              <br />
+              {language.t("settings.workspaces.delete.warning")}
+              <br />
+              {description()}
+            </>
+          }
+        />
+      </DialogHeader>
+      <DialogFooter>
+        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
+          {language.t("common.cancel")}
+        </ButtonV2>
+        <ButtonV2
+          type="button"
+          variant="danger"
+          disabled={
+            status.isPending || status.isError || (status.data?.result !== "safe" && status.data?.result !== "dirty")
+          }
+          onClick={remove}
+        >
+          {language.t("workspace.delete.button")}
+        </ButtonV2>
+      </DialogFooter>
+    </Dialog>
+  )
+}

packages/app/src/components/titlebar.tsx

@@ -353,6 +353,22 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   keybind: "mod+shift+t",
                   onSelect: () => tabsStoreActions.reopenClosedTab(),
                 },
+                {
+                  id: `tab.prev`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
+                  hidden: true,
+                  onSelect: tabs.previous,
+                },
+                {
+                  id: `tab.next`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowRight,ctrl+tab`,
+                  hidden: true,
+                  onSelect: tabs.next,
+                },
               ].filter((v) => v !== undefined)
             })
 

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

@@ -152,12 +152,6 @@ export async function bootstrapGlobal(input: {
   queryClient: QueryClient
 }) {
   const slow = [
-    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope, input.serverSDK, input.protocol)),
-    () =>
-      input.queryClient.fetchQuery(
-        loadProvidersQuery(input.scope, null, input.serverAPI, input.serverSDK, input.protocol),
-      ),
-    () => input.queryClient.fetchQuery(loadPathQuery(input.scope, null, input.serverSDK, input.protocol)),
     () =>
       input.queryClient
         .fetchQuery(loadProjectsQuery(input.scope, input.serverAPI.project))
@@ -524,17 +518,6 @@ export async function bootstrapDirectory(input: {
           input.queryClient.fetchQuery(
             loadMcpResourcesQuery(input.scope, input.directory, input.api.mcp, input.sdk, input.protocol),
           )),
-      () =>
-        input.queryClient
-          .fetchQuery(loadProvidersQuery(input.scope, input.directory, input.api, input.sdk, input.protocol))
-          .catch((err) => {
-            const project = getFilename(input.directory)
-            showToast({
-              variant: "error",
-              title: input.translate("toast.project.reloadFailed.title", { project }),
-              description: formatServerError(err, input.translate),
-            })
-          }),
     ].filter(Boolean) as (() => Promise<any>)[]
 
     await waitForPaint()

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

@@ -263,10 +263,13 @@ describe("createChildStoreManager", () => {
       manager.child("/project")
       expect(queries[0]?.().enabled).toBe(true)
       expect(queries[3]?.().enabled).toBe(true)
-      expect(queries[4]?.().enabled).toBe(true)
+      expect(queries[4]?.().enabled).toBe(false)
       expect(queries[5]?.().enabled).toBe(true)
       expect(bootstraps).toEqual(["/project"])
 
+      manager.enableProviders("/project")
+      expect(queries[4]?.().enabled).toBe(true)
+
       manager.child("/project", { bootstrap: false })
       expect(queries[0]?.().enabled).toBe(true)
     } finally {

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

@@ -47,6 +47,7 @@ export function createChildStoreManager(input: {
   const mcpToggles = new Map<string, (enabled: boolean) => void>()
   const activeDirectories = new Set<string>()
   const activationToggles = new Map<string, (enabled: boolean) => void>()
+  const providerToggles = new Map<string, (enabled: boolean) => void>()
 
   const markKey = (key: DirectoryKey) => {
     if (!key) return
@@ -122,6 +123,7 @@ export function createChildStoreManager(input: {
     mcpToggles.delete(key)
     activeDirectories.delete(key)
     activationToggles.delete(key)
+    providerToggles.delete(key)
     const dispose = disposers.get(key)
     if (dispose) {
       dispose()
@@ -187,6 +189,7 @@ export function createChildStoreManager(input: {
           const initialIcon = icon[0].value
           const [mcpEnabled, setMcpEnabled] = createSignal(false)
           const [instanceQueriesEnabled, setInstanceQueriesEnabled] = createSignal(false)
+          const [providerEnabled, setProviderEnabled] = createSignal(false)
 
           const pathQuery = useQuery(() => ({ ...input.queryOptions.path(key), enabled: instanceQueriesEnabled() }))
           const mcpQuery = useQuery(() => ({ ...input.queryOptions.mcp(key), enabled: mcpEnabled() }))
@@ -194,7 +197,7 @@ export function createChildStoreManager(input: {
           const lspQuery = useQuery(() => ({ ...input.queryOptions.lsp(key), enabled: instanceQueriesEnabled() }))
           const providerQuery = useQuery(() => ({
             ...input.queryOptions.providers(key),
-            enabled: instanceQueriesEnabled(),
+            enabled: providerEnabled(),
           }))
           const referenceQuery = useQuery(() => ({
             ...input.queryOptions.references(key),
@@ -206,7 +209,7 @@ export function createChildStoreManager(input: {
             projectMeta: initialMeta,
             icon: initialIcon,
             get provider_ready() {
-              return instanceQueriesEnabled() && !providerQuery.isLoading
+              return providerEnabled() && !providerQuery.isLoading
             },
             get provider() {
               const EMPTY = { all: new Map(), connected: [], default: {} }
@@ -263,6 +266,7 @@ export function createChildStoreManager(input: {
           disposers.set(key, dispose)
           mcpToggles.set(key, setMcpEnabled)
           activationToggles.set(key, setInstanceQueriesEnabled)
+          providerToggles.set(key, setProviderEnabled)
 
           const onPersistedInit = (init: Promise<string> | string | null, run: () => void) => {
             if (!(init instanceof Promise)) return
@@ -329,6 +333,12 @@ export function createChildStoreManager(input: {
     if (childStore[0].status !== "loading") input.onMcp(directory, childStore[1])
   }
 
+  function enableProviders(directory: string) {
+    const key = directoryKey(directory)
+    ensureChild(directory)
+    providerToggles.get(key)?.(true)
+  }
+
   // Passive Home/project metadata reads must not initialize the directory.
   // A real directory access enables these queries once for the store lifetime.
   // TODO(v2): After Home switches to v2.project.list and root-filtered,
@@ -387,6 +397,7 @@ export function createChildStoreManager(input: {
     mcp: (directory: string) => mcpDirectories.has(directoryKey(directory)),
     active: (directory: string) => activeDirectories.has(directoryKey(directory)),
     disableMcp,
+    enableProviders,
     disposeDirectory,
     runEviction,
     vcsCache,

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

@@ -15,12 +15,12 @@ const rootSession = (input: { id: string; parentID?: string; archived?: number }
     },
   }) as Session
 
-const userMessage = (id: string, sessionID: string) =>
+const userMessage = (id: string, sessionID: string, created = 1) =>
   ({
     id,
     sessionID,
     role: "user",
-    time: { created: 1 },
+    time: { created },
     agent: "assistant",
     model: { providerID: "openai", modelID: "gpt" },
   }) as Message
@@ -370,13 +370,13 @@ describe("applyDirectoryEvent", () => {
     const sessionID = "ses_1"
     const [store, setStore] = createStore(
       baseState({
-        message: { [sessionID]: [userMessage("msg_1", sessionID), userMessage("msg_3", sessionID)] },
-        part: { msg_2: [textPart("prt_1", sessionID, "msg_2")] },
+        message: { [sessionID]: [userMessage("msg_z", sessionID, 1), userMessage("msg_b", sessionID, 3)] },
+        part: { msg_a: [textPart("prt_1", sessionID, "msg_a")] },
       }),
     )
 
     applyDirectoryEvent({
-      event: { type: "message.updated", properties: { info: userMessage("msg_2", sessionID) } },
+      event: { type: "message.updated", properties: { info: userMessage("msg_a", sessionID, 2) } },
       store,
       setStore,
       push() {},
@@ -384,14 +384,14 @@ describe("applyDirectoryEvent", () => {
       loadLsp() {},
     })
 
-    expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_1", "msg_2", "msg_3"])
+    expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_z", "msg_a", "msg_b"])
 
     applyDirectoryEvent({
       event: {
         type: "message.updated",
         properties: {
           info: {
-            ...userMessage("msg_2", sessionID),
+            ...userMessage("msg_a", sessionID, 2),
             role: "assistant",
           } as Message,
         },
@@ -403,10 +403,10 @@ describe("applyDirectoryEvent", () => {
       loadLsp() {},
     })
 
-    expect(store.message[sessionID]?.find((x) => x.id === "msg_2")?.role).toBe("assistant")
+    expect(store.message[sessionID]?.find((x) => x.id === "msg_a")?.role).toBe("assistant")
 
     applyDirectoryEvent({
-      event: { type: "message.removed", properties: { sessionID, messageID: "msg_2" } },
+      event: { type: "message.removed", properties: { sessionID, messageID: "msg_a" } },
       store,
       setStore,
       push() {},
@@ -414,8 +414,8 @@ describe("applyDirectoryEvent", () => {
       loadLsp() {},
     })
 
-    expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_1", "msg_3"])
-    expect(store.part.msg_2).toBeUndefined()
+    expect(store.message[sessionID]?.map((x) => x.id)).toEqual(["msg_z", "msg_b"])
+    expect(store.part.msg_a).toBeUndefined()
   })
 
   test("upserts and prunes message parts", () => {

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

@@ -15,6 +15,7 @@ import type { State, VcsCache } from "./types"
 import { trimSessions } from "./session-trim"
 import { dropSessionCaches } from "./session-cache"
 import { diffs as list, message as clean } from "@/utils/diffs"
+import { messageKey } from "@/utils/session-message"
 
 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
 const SESSION_CONTENT_EVENTS = new Set([
@@ -275,7 +276,7 @@ export function applyDirectoryEvent(input: {
         input.setStore("message", info.sessionID, [info])
         break
       }
-      const result = Binary.search(messages, info.id, (m) => m.id)
+      const result = Binary.search(messages, messageKey(info), messageKey)
       if (result.found) {
         input.setStore("message", info.sessionID, result.index, reconcile(info))
         break
@@ -295,8 +296,8 @@ export function applyDirectoryEvent(input: {
         produce((draft) => {
           const messages = draft.message[props.sessionID]
           if (messages) {
-            const result = Binary.search(messages, props.messageID, (m) => m.id)
-            if (result.found) messages.splice(result.index, 1)
+            const index = messages.findIndex((message) => message.id === props.messageID)
+            if (index >= 0) messages.splice(index, 1)
           }
           const parts = draft.part[props.messageID]
           if (parts) {
@@ -322,7 +323,7 @@ export function applyDirectoryEvent(input: {
         input.setStore("part", part.messageID, [part])
         break
       }
-      const result = Binary.search(parts, part.id, (p) => p.id)
+      const result = Binary.search(parts, part.id, (item) => item.id)
       if (result.found) {
         input.setStore("part", part.messageID, result.index, reconcile(part))
         break
@@ -345,13 +346,13 @@ export function applyDirectoryEvent(input: {
       )
       const parts = input.store.part[props.messageID]
       if (!parts) break
-      const result = Binary.search(parts, props.partID, (p) => p.id)
+      const result = Binary.search(parts, props.partID, (part) => part.id)
       if (result.found) {
         input.setStore(
           produce((draft) => {
             const list = draft.part[props.messageID]
             if (!list) return
-            const next = Binary.search(list, props.partID, (p) => p.id)
+            const next = Binary.search(list, props.partID, (part) => part.id)
             if (!next.found) return
             list.splice(next.index, 1)
             if (list.length === 0) delete draft.part[props.messageID]
@@ -364,7 +365,7 @@ export function applyDirectoryEvent(input: {
       const props = event.properties as { messageID: string; partID: string; field: string; delta: string }
       const parts = input.store.part[props.messageID]
       if (!parts) break
-      const result = Binary.search(parts, props.partID, (p) => p.id)
+      const result = Binary.search(parts, props.partID, (part) => part.id)
       if (!result.found) break
       const field = props.field as keyof (typeof parts)[number]
       const current = parts[result.index]?.[field]

packages/app/src/context/global-sync/home-session-index.ts

@@ -22,6 +22,7 @@ export const homeSessionIndexKey = (server: string) => ["home", "session-index",
 export const homeSessionEventsKey = (server: string) => ["home", "session-events", server] as const
 
 type HomeSessionPage = { data?: V2SessionListResponse }
+type ProjectedHomeSessionPage = { data?: { data: Session[]; cursor: { next?: string } } }
 
 export async function loadHomeSessionIndex(
   list: (
@@ -31,7 +32,30 @@ export async function loadHomeSessionIndex(
   eventSequence = 0,
   signal?: AbortSignal,
 ) {
-  const data: SessionV2Info[] = []
+  return loadHomeSessionPages(list, parseHomeSessionIndex, eventSequence, signal)
+}
+
+export async function loadProjectedHomeSessionIndex(
+  list: (
+    input: { limit: number; order: "desc"; cursor?: string },
+    options: { signal?: AbortSignal },
+  ) => Promise<ProjectedHomeSessionPage>,
+  eventSequence = 0,
+  signal?: AbortSignal,
+) {
+  return loadHomeSessionPages(list, (sessions) => sessions, eventSequence, signal)
+}
+
+async function loadHomeSessionPages<T>(
+  list: (
+    input: { limit: number; order: "desc"; cursor?: string },
+    options: { signal?: AbortSignal },
+  ) => Promise<{ data?: { data: T[]; cursor: { next?: string } } }>,
+  project: (sessions: T[]) => Session[],
+  eventSequence: number,
+  signal?: AbortSignal,
+) {
+  const data: T[] = []
   let cursor: string | undefined
 
   for (;;) {
@@ -46,7 +70,7 @@ export async function loadHomeSessionIndex(
     const page = response.data!
     data.push(...page.data)
     if (page.data.length < HOME_V2_SESSION_PAGE_LIMIT || !page.cursor.next)
-      return { sessions: parseHomeSessionIndex(data), eventSequence }
+      return { sessions: project(data), eventSequence }
     cursor = page.cursor.next
   }
 }

packages/app/src/context/language.tsx

@@ -2,15 +2,22 @@ import * as i18n from "@solid-primitives/i18n"
 import { createEffect, createMemo, createResource } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { pluralCategory, type UiI18nPluralKey } from "@opencode-ai/ui/context/i18n"
+import {
+  pluralCategory,
+  type UiI18nPluralLookupKey,
+  type UiI18nPluralKey,
+  type UiPluralCategory,
+} from "@opencode-ai/ui/context/i18n"
 import { Persist, persisted } from "@/utils/persist"
 import { dict as en } from "@/i18n/en"
 import { dict as uiEn } from "@opencode-ai/ui/i18n/en"
 import {
   createDesktopNativeBundle,
+  detectDesktopNativeLocale,
   DESKTOP_NATIVE_ENGLISH,
   DESKTOP_NATIVE_LABELS,
   DESKTOP_NATIVE_LOCALES,
+  DESKTOP_NATIVE_LOCALE_TAGS,
   type DesktopNativeBundle,
   type DesktopNativeLocale,
 } from "@/i18n/desktop-native"
@@ -18,7 +25,7 @@ import {
 export type Locale = DesktopNativeLocale
 export type Direction = "ltr" | "rtl"
 
-const RTL_LOCALES: ReadonlySet<Locale> = new Set(["ar", "ur", "pa"])
+const RTL_LOCALES: ReadonlySet<Locale> = new Set(["ar", "ur", "pa", "fa", "dv"])
 
 function localeDirection(locale: Locale): Direction {
   return RTL_LOCALES.has(locale) ? "rtl" : "ltr"
@@ -26,11 +33,13 @@ function localeDirection(locale: Locale): Direction {
 
 type RawDictionary = typeof en & typeof uiEn
 type Dictionary = i18n.Flatten<RawDictionary>
-type PluralKey =
-  | UiI18nPluralKey
-  | "session.question.pending"
-  | "session.followupDock.summary"
-  | "session.revertDock.summary"
+type AppI18nKey = Extract<keyof typeof en, string>
+type AppI18nPluralKey = {
+  [Key in AppI18nKey]: Key extends `${infer Base}.other` ? (`${Base}.one` extends AppI18nKey ? Base : never) : never
+}[AppI18nKey]
+type PluralKey = AppI18nPluralKey | UiI18nPluralKey
+type AppI18nPluralLookupKey = `${AppI18nPluralKey}.${UiPluralCategory}`
+type TranslationKey<Key extends string> = Key extends AppI18nPluralLookupKey | UiI18nPluralLookupKey ? never : Key
 type Source = { dict: Record<string, string> }
 
 function cookie(locale: Locale) {
@@ -39,36 +48,7 @@ function cookie(locale: Locale) {
 
 const LOCALES: readonly Locale[] = DESKTOP_NATIVE_LOCALES
 
-const INTL: Record<Locale, string> = {
-  en: "en",
-  zh: "zh-Hans",
-  zht: "zh-Hant",
-  ko: "ko",
-  de: "de",
-  es: "es",
-  fr: "fr",
-  da: "da",
-  ja: "ja",
-  pl: "pl",
-  ru: "ru",
-  uk: "uk",
-  ar: "ar",
-  no: "nb-NO",
-  br: "pt-BR",
-  th: "th",
-  bs: "bs",
-  tr: "tr",
-  hi: "hi-IN",
-  nl: "nl-NL",
-  id: "id-ID",
-  vi: "vi-VN",
-  it: "it-IT",
-  ur: "ur-PK",
-  pa: "pa-Arab-PK",
-  az: "az-Latn-AZ",
-  fi: "fi-FI",
-  sv: "sv-SE",
-}
+const INTL = DESKTOP_NATIVE_LOCALE_TAGS
 
 const base = i18n.flatten({ ...en, ...uiEn })
 const dicts = new Map<Locale, Dictionary>([["en", base]])
@@ -104,6 +84,40 @@ const loaders: Record<Exclude<Locale, "en">, () => Promise<Dictionary>> = {
   az: () => merge(import("@/i18n/az"), import("@opencode-ai/ui/i18n/az")),
   fi: () => merge(import("@/i18n/fi"), import("@opencode-ai/ui/i18n/fi")),
   sv: () => merge(import("@/i18n/sv"), import("@opencode-ai/ui/i18n/sv")),
+  am: () => merge(import("@/i18n/am"), import("@opencode-ai/ui/i18n/am")),
+  bg: () => merge(import("@/i18n/bg"), import("@opencode-ai/ui/i18n/bg")),
+  bn: () => merge(import("@/i18n/bn"), import("@opencode-ai/ui/i18n/bn")),
+  ca: () => merge(import("@/i18n/ca"), import("@opencode-ai/ui/i18n/ca")),
+  cs: () => merge(import("@/i18n/cs"), import("@opencode-ai/ui/i18n/cs")),
+  dv: () => merge(import("@/i18n/dv"), import("@opencode-ai/ui/i18n/dv")),
+  dz: () => merge(import("@/i18n/dz"), import("@opencode-ai/ui/i18n/dz")),
+  el: () => merge(import("@/i18n/el"), import("@opencode-ai/ui/i18n/el")),
+  et: () => merge(import("@/i18n/et"), import("@opencode-ai/ui/i18n/et")),
+  fa: () => merge(import("@/i18n/fa"), import("@opencode-ai/ui/i18n/fa")),
+  fo: () => merge(import("@/i18n/fo"), import("@opencode-ai/ui/i18n/fo")),
+  hr: () => merge(import("@/i18n/hr"), import("@opencode-ai/ui/i18n/hr")),
+  hu: () => merge(import("@/i18n/hu"), import("@opencode-ai/ui/i18n/hu")),
+  hy: () => merge(import("@/i18n/hy"), import("@opencode-ai/ui/i18n/hy")),
+  is: () => merge(import("@/i18n/is"), import("@opencode-ai/ui/i18n/is")),
+  ka: () => merge(import("@/i18n/ka"), import("@opencode-ai/ui/i18n/ka")),
+  km: () => merge(import("@/i18n/km"), import("@opencode-ai/ui/i18n/km")),
+  lo: () => merge(import("@/i18n/lo"), import("@opencode-ai/ui/i18n/lo")),
+  lt: () => merge(import("@/i18n/lt"), import("@opencode-ai/ui/i18n/lt")),
+  lv: () => merge(import("@/i18n/lv"), import("@opencode-ai/ui/i18n/lv")),
+  mk: () => merge(import("@/i18n/mk"), import("@opencode-ai/ui/i18n/mk")),
+  mn: () => merge(import("@/i18n/mn"), import("@opencode-ai/ui/i18n/mn")),
+  ms: () => merge(import("@/i18n/ms"), import("@opencode-ai/ui/i18n/ms")),
+  my: () => merge(import("@/i18n/my"), import("@opencode-ai/ui/i18n/my")),
+  ne: () => merge(import("@/i18n/ne"), import("@opencode-ai/ui/i18n/ne")),
+  ro: () => merge(import("@/i18n/ro"), import("@opencode-ai/ui/i18n/ro")),
+  si: () => merge(import("@/i18n/si"), import("@opencode-ai/ui/i18n/si")),
+  sk: () => merge(import("@/i18n/sk"), import("@opencode-ai/ui/i18n/sk")),
+  sl: () => merge(import("@/i18n/sl"), import("@opencode-ai/ui/i18n/sl")),
+  sq: () => merge(import("@/i18n/sq"), import("@opencode-ai/ui/i18n/sq")),
+  sr: () => merge(import("@/i18n/sr"), import("@opencode-ai/ui/i18n/sr")),
+  tg: () => merge(import("@/i18n/tg"), import("@opencode-ai/ui/i18n/tg")),
+  tk: () => merge(import("@/i18n/tk"), import("@opencode-ai/ui/i18n/tk")),
+  uz: () => merge(import("@/i18n/uz"), import("@opencode-ai/ui/i18n/uz")),
 }
 
 function loadDict(locale: Locale) {
@@ -121,63 +135,9 @@ export function loadLocaleDict(locale: Locale) {
   return loadDict(locale).then(() => undefined)
 }
 
-const localeMatchers: Array<{ locale: Locale; match: (language: string) => boolean }> = [
-  { locale: "en", match: (language) => language.startsWith("en") },
-  {
-    locale: "zht",
-    match: (language) =>
-      language.startsWith("zh") &&
-      (language.includes("hant") || language.includes("-tw") || language.includes("-hk") || language.includes("-mo")),
-  },
-  { locale: "zh", match: (language) => language.startsWith("zh") },
-  { locale: "ko", match: (language) => language.startsWith("ko") },
-  { locale: "de", match: (language) => language.startsWith("de") },
-  { locale: "es", match: (language) => language.startsWith("es") },
-  { locale: "fr", match: (language) => language.startsWith("fr") },
-  { locale: "da", match: (language) => language.startsWith("da") },
-  { locale: "ja", match: (language) => language.startsWith("ja") },
-  { locale: "pl", match: (language) => language.startsWith("pl") },
-  { locale: "ru", match: (language) => language.startsWith("ru") },
-  { locale: "uk", match: (language) => language.startsWith("uk") },
-  { locale: "ar", match: (language) => language.startsWith("ar") },
-  {
-    locale: "no",
-    match: (language) => language.startsWith("no") || language.startsWith("nb") || language.startsWith("nn"),
-  },
-  { locale: "br", match: (language) => language.startsWith("pt") },
-  { locale: "th", match: (language) => language.startsWith("th") },
-  { locale: "bs", match: (language) => language.startsWith("bs") },
-  { locale: "tr", match: (language) => language.startsWith("tr") },
-  { locale: "hi", match: (language) => language.startsWith("hi") },
-  { locale: "nl", match: (language) => language.startsWith("nl") },
-  { locale: "id", match: (language) => language.startsWith("id") },
-  { locale: "vi", match: (language) => language.startsWith("vi") },
-  { locale: "it", match: (language) => language.startsWith("it") },
-  { locale: "ur", match: (language) => language.startsWith("ur") },
-  {
-    locale: "pa",
-    match: (language) => language.startsWith("pa") && (language.includes("arab") || language.includes("-pk")),
-  },
-  {
-    locale: "az",
-    match: (language) => language.startsWith("az") && !language.includes("arab") && !language.includes("cyrl"),
-  },
-  { locale: "fi", match: (language) => language.startsWith("fi") },
-  { locale: "sv", match: (language) => language.startsWith("sv") },
-]
-
 function detectLocale(): Locale {
   if (typeof navigator !== "object") return "en"
-
-  const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
-  for (const language of languages) {
-    if (!language) continue
-    const normalized = language.toLowerCase()
-    const match = localeMatchers.find((entry) => entry.match(normalized))
-    if (match) return match.locale
-  }
-
-  return "en"
+  return detectDesktopNativeLocale(navigator.languages?.length ? navigator.languages : [navigator.language])
 }
 
 export function normalizeLocale(value: string): Locale {
@@ -198,7 +158,17 @@ function readStoredLocale() {
 }
 
 const warm = readStoredLocale() ?? detectLocale()
-if (warm !== "en") void loadDict(warm)
+const initialLocale =
+  warm === "en"
+    ? Promise.resolve(warm)
+    : loadDict(warm).then(
+        () => warm,
+        () => "en" as const,
+      )
+
+export function loadInitialLocale() {
+  return initialLocale
+}
 
 export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({
   name: "Language",
@@ -226,25 +196,30 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont
       initialValue: dicts.get(initial) ?? base,
     })
 
-    const t = i18n.translator(() => dict() ?? base, i18n.resolveTemplate) as (
-      key: keyof Dictionary,
+    const t = i18n.translator(() => dict() ?? base, i18n.resolveTemplate) as <Key extends string>(
+      key: TranslationKey<Key>,
       params?: Record<string, string | number | boolean>,
     ) => string
 
-    const plural = (key: PluralKey, count: number, params?: Record<string, string | number | boolean>) => {
-      const category = pluralCategory(intl(), count)
+    const pluralForm = (
+      key: PluralKey,
+      category: UiPluralCategory,
+      params?: Record<string, string | number | boolean>,
+    ) => {
       const current = (dict.loading ? base : (dict() ?? base)) as Record<string, string>
       const candidate = `${key}.${category}`
       const fallback = `${key}.other`
-      return i18n.resolveTemplate(current[candidate] ?? current[fallback] ?? fallback, { ...params, count })
+      return i18n.resolveTemplate(current[candidate] ?? current[fallback] ?? fallback, params)
     }
+    const plural = (key: PluralKey, count: number, params?: Record<string, string | number | boolean>) =>
+      pluralForm(key, pluralCategory(intl(), count), { ...params, count })
 
     const label = (value: Locale) => DESKTOP_NATIVE_LABELS[value]
 
     createEffect(() => {
       if (typeof document !== "object") return
       const value = locale()
-      document.documentElement.lang = value
+      document.documentElement.lang = intl()
       document.documentElement.dir = direction()
       document.cookie = cookie(value)
     })
@@ -268,6 +243,7 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont
       label,
       t,
       plural,
+      pluralForm,
       setLocale(next: Locale) {
         setStore("locale", normalizeLocale(next))
       },

packages/app/src/context/prompt.tsx

@@ -8,6 +8,7 @@ import { useServerSDK } from "./server-sdk"
 import { useSettings } from "./settings"
 import { useSDK } from "./sdk"
 import { useTabs, type Tab } from "./tabs"
+import type { ServerScope } from "@/utils/server-scope"
 import {
   createPromptReady,
   createPromptSession,
@@ -104,11 +105,13 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
       params.serverKey ? requireServerKey(params.serverKey) : ServerConnection.key(serverSDK().server)
     const scope = (): PromptScope =>
       search.draftId ? { draftID: search.draftId } : { dir: base64Encode(sdk().directory), id: params.id }
-    const load = (scope: PromptScope) => {
-      const current = settings.general.newLayoutDesigns() ? selectPromptTab(tabs.store, scope, serverKey()) : undefined
-      if (current) return createTabPromptState(tabs, current, serverSDK().scope, scope)
+    const load = (scope: PromptScope, target?: { server?: ServerConnection.Key; scope: ServerScope }) => {
+      const current = settings.general.newLayoutDesigns()
+        ? selectPromptTab(tabs.store, scope, target?.server ?? serverKey())
+        : undefined
+      if (current) return createTabPromptState(tabs, current, target?.scope ?? serverSDK().scope, scope)
 
-      const key = scopeKey(scope)
+      const key = target ? `${target.scope}:${scopeKey(scope)}` : scopeKey(scope)
       const existing = cache.get(key)
       if (existing) {
         cache.delete(key)
@@ -118,7 +121,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
 
       const entry = createRoot(
         (dispose) => ({
-          value: createPromptSession(serverSDK().scope, scope),
+          value: createPromptSession(target?.scope ?? serverSDK().scope, scope),
           dispose,
         }),
         owner,
@@ -130,7 +133,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
     }
 
     const session = createMemo(() => load(scope()))
-    const pick = (scope?: PromptScope) => (scope ? load(scope) : session())
+    const pick = (scope?: PromptScope, target?: { server?: ServerConnection.Key; scope: ServerScope }) =>
+      scope ? load(scope, target) : session()
     const ready = createPromptReady(session)
 
     const withSuspense = <T,>(cb: () => T): (() => T) =>
@@ -146,7 +150,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
 
     return {
       ready,
-      capture: (scope?: PromptScope) => pick(scope).capture(),
+      capture: (scope?: PromptScope, target?: { server?: ServerConnection.Key; scope: ServerScope }) =>
+        pick(scope, target).capture(),
       current: withSuspense(() => session().current()),
       cursor: withSuspense(() => session().cursor()),
       dirty: withSuspense(() => session().dirty()),

packages/app/src/context/server-sdk.test.ts

@@ -1,7 +1,89 @@
 import { describe, expect, test } from "bun:test"
-import { adaptServerEvent, coalesceServerEvents, enqueueServerEvent, resumeStreamAfterPageShow } from "./server-sdk"
+import {
+  adaptServerEvent,
+  adaptWorktreeCompatibilityEvent,
+  applyWorkspaceOperationEvent,
+  applyWorktreeEvent,
+  coalesceServerEvents,
+  enqueueServerEvent,
+  resumeStreamAfterPageShow,
+} from "./server-sdk"
 import type { OpenCodeEvent } from "@opencode-ai/client/promise"
 import type { Event } from "@opencode-ai/sdk/v2/client"
+import { ServerScope } from "@/utils/server-scope"
+import { Worktree } from "@/utils/worktree"
+import { WorkspaceOperation } from "@/utils/workspace-operation"
+
+describe("applyWorktreeEvent", () => {
+  test("adapts global readiness with the created worktree directory", () => {
+    const directory = "/repo/worktree-compatible"
+    const event = adaptWorktreeCompatibilityEvent({
+      directory,
+      payload: { id: "ready", type: "worktree.ready", properties: { name: "compatible" } } as Event,
+    })
+    if (!event) throw new Error("expected worktree event")
+
+    Worktree.pending(ServerScope.local, directory)
+    applyWorktreeEvent(ServerScope.local, event, "failed")
+    expect(Worktree.get(ServerScope.local, directory)).toEqual({ status: "ready" })
+    expect(
+      adaptWorktreeCompatibilityEvent({
+        directory: "/repo",
+        payload: {
+          id: "status",
+          type: "session.status",
+          properties: { sessionID: "session", status: { type: "idle" } },
+        } as Event,
+      }),
+    ).toBeUndefined()
+  })
+
+  test("preserves the server failure message", () => {
+    const directory = "/repo/worktree-failed"
+    Worktree.pending(ServerScope.local, directory)
+
+    applyWorktreeEvent(
+      ServerScope.local,
+      {
+        directory,
+        payload: {
+          id: "failed",
+          type: "worktree.failed",
+          properties: { name: "failed", message: "bootstrap failed" },
+        } as Event,
+      },
+      "fallback",
+    )
+    expect(Worktree.get(ServerScope.local, directory)).toEqual({ status: "failed", message: "bootstrap failed" })
+  })
+})
+
+test("legacy and current moved events complete matching operations", () => {
+  const events = [
+    {
+      id: "legacy",
+      payload: {
+        id: "moved",
+        type: "session.next.moved",
+        properties: { timestamp: Date.now(), sessionID: "legacy", location: { directory: "/workspace" } },
+      } as Event,
+    },
+    {
+      id: "current",
+      payload: adaptServerEvent({
+        id: "moved-current",
+        created: Date.now(),
+        type: "session.moved",
+        data: { sessionID: "current", location: { directory: "/workspace" } },
+      } as OpenCodeEvent),
+    },
+  ]
+  events.forEach((event) => {
+    WorkspaceOperation.start(ServerScope.local, event.id, "move", "/workspace")
+    applyWorkspaceOperationEvent(ServerScope.local, { directory: "/workspace", payload: event.payload })
+    expect(WorkspaceOperation.get(ServerScope.local, event.id)?.status).toBe("complete")
+  })
+})
 
 describe("resumeStreamAfterPageShow", () => {
   test("restarts a stream only after a back-forward cache restore", () => {

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

@@ -13,6 +13,10 @@ import { useGlobal } from "./global"
 import { ServerScope } from "@/utils/server-scope"
 import { detectServerProtocol, type ServerProtocol } from "@/utils/server-protocol"
 import { createCompatibleApi, type CompatibleApi } from "@/utils/server-compat"
+import { Worktree } from "@/utils/worktree"
+import { WorkspaceOperation } from "@/utils/workspace-operation"
+import { decodeVcsDiff } from "@/utils/vcs-diff-decoder"
+import { decodeSessionList } from "./session-message-decoder"
 
 const isAbortError = (error: unknown) =>
   error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
@@ -56,6 +60,11 @@ export function adaptServerEvent(event: OpenCodeEvent): ServerEvent {
   return { id: event.id, type: event.type, properties: event.data, current: event } as ServerEvent
 }
 
+export function adaptWorktreeCompatibilityEvent(event: { directory?: string; payload: Event }) {
+  if (event.payload.type !== "worktree.ready" && event.payload.type !== "worktree.failed") return
+  return { directory: event.directory ?? "global", payload: event.payload }
+}
+
 const coalescedKey = (event: QueuedServerEvent) => {
   if (event.payload.type === "lsp.updated") return `lsp.updated:${event.directory}`
   if (event.payload.type === "message.part.updated") {
@@ -138,6 +147,31 @@ export function coalesceServerEvents(events: QueuedServerEvent[]) {
   return output
 }
 
+export function applyWorktreeEvent(scope: ServerScope, event: QueuedServerEvent, fallback: string) {
+  if (event.payload.type === "worktree.ready") {
+    Worktree.ready(scope, event.directory)
+    return true
+  }
+  if (event.payload.type !== "worktree.failed") return false
+  const message = event.payload.properties.message ?? fallback
+  Worktree.failed(scope, event.directory, message)
+  return true
+}
+
+export function applyWorkspaceOperationEvent(scope: ServerScope, event: QueuedServerEvent) {
+  if (event.payload.current?.type === "session.moved") {
+    WorkspaceOperation.complete(
+      scope,
+      event.payload.current.data.sessionID,
+      event.payload.current.data.location.directory,
+    )
+    return true
+  }
+  if (event.payload.type !== "session.next.moved") return false
+  WorkspaceOperation.complete(scope, event.payload.properties.sessionID, event.payload.properties.location.directory)
+  return true
+}
+
 function currentDelta(event: OpenCodeEvent | undefined): CurrentDelta | undefined {
   if (
     event?.type === "session.text.delta" ||
@@ -186,6 +220,7 @@ type ServerSDKBase = {
 
 function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerScope): ServerSDKBase {
   const platform = usePlatform()
+  const language = useLanguage()
   const abort = new AbortController()
 
   const eventFetch = (() => {
@@ -238,7 +273,11 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
     last = Date.now()
     const output = coalesceServerEvents(events)
     batch(() => {
-      output.forEach((event) => emitter.emit(event.directory, event.payload))
+      output.forEach((event) => {
+        applyWorktreeEvent(scope, event, language.t("common.requestFailed"))
+        applyWorkspaceOperationEvent(scope, event)
+        emitter.emit(event.directory, event.payload)
+      })
     })
 
     buffer.length = 0
@@ -251,12 +290,57 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
   }
 
   let streamErrorLogged = false
+  let worktreeStreamErrorLogged = false
   const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
   let attempt: AbortController | undefined
+  let worktreeAttempt: AbortController | undefined
   let run: Promise<void> | undefined
   let started = false
   let generation = 0
 
+  const consumeWorktreeEvents = async (active: number) => {
+    // Current worktree lifecycle events are still emitted only on the global compatibility stream.
+    while (!abort.signal.aborted && started && generation === active) {
+      const controller = new AbortController()
+      worktreeAttempt = controller
+      const onAbort = () => controller.abort()
+      abort.signal.addEventListener("abort", onAbort)
+      try {
+        const events = (await eventSdk.global.event({ signal: controller.signal })).stream
+        let yielded = Date.now()
+        for await (const event of events) {
+          const queued = adaptWorktreeCompatibilityEvent({
+            directory: event.directory,
+            payload: event.payload as Event,
+          })
+          if (queued) {
+            worktreeStreamErrorLogged = false
+            if (enqueueServerEvent(queue, queued)) schedule()
+          }
+
+          if (Date.now() - yielded < STREAM_YIELD_MS) continue
+          yielded = Date.now()
+          await wait(0)
+        }
+      } catch (error) {
+        if (!isStreamClosed(error, controller.signal) && !worktreeStreamErrorLogged) {
+          worktreeStreamErrorLogged = true
+          console.error("[global-sdk] worktree event stream failed", {
+            url: server.http.url,
+            fetch: eventFetch ? "platform" : "webview",
+            error,
+          })
+        }
+      } finally {
+        abort.signal.removeEventListener("abort", onAbort)
+        if (worktreeAttempt === controller) worktreeAttempt = undefined
+      }
+
+      if (abort.signal.aborted || !started || generation !== active) return
+      await wait(RECONNECT_DELAY_MS)
+    }
+  }
+
   const start = () => {
     if (started) return run
     started = true
@@ -264,6 +348,8 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
     const previous = run
     const current = (async () => {
       if (previous) await previous
+      const kind = await protocol
+      if (kind === "v2") void consumeWorktreeEvents(active)
       // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
       while (!abort.signal.aborted && started && generation === active) {
         attempt = new AbortController()
@@ -272,7 +358,6 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
         }
         abort.signal.addEventListener("abort", onAbort)
         try {
-          const kind = await protocol
           const events =
             kind === "v1"
               ? (await eventSdk.global.event({ signal: attempt.signal })).stream
@@ -320,6 +405,7 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
     started = false
     generation++
     attempt?.abort()
+    worktreeAttempt?.abort()
   }
 
   onMount(() => {
@@ -346,7 +432,7 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
       throwOnError: true,
       directory,
     })
-  const api = createCompatibleApi({ protocol, current: currentApi, legacy })
+  const api = createCompatibleApi({ protocol, current: currentApi, legacy, decodeVcsDiff, decodeSessionList })
 
   return {
     server,
@@ -432,7 +518,19 @@ function createDirSdkContext(directory: string, serverSDK: ServerSDKBase) {
       current: serverSDK.currentApi,
       legacy: (next) => serverSDK.createClient({ directory: next ?? directory, throwOnError: true }),
       directory,
+      decodeVcsDiff,
+      decodeSessionList,
     }),
+    createApi(next: string) {
+      return createCompatibleApi({
+        protocol: serverSDK.protocol,
+        current: serverSDK.currentApi,
+        legacy: (target) => serverSDK.createClient({ directory: target ?? next, throwOnError: true }),
+        directory: next,
+        decodeVcsDiff,
+        decodeSessionList,
+      })
+    },
     event: emitter,
     get url() {
       return serverSDK.url

packages/app/src/context/server-session.test.ts

@@ -223,6 +223,23 @@ describe("server session", () => {
     expect(ctx.store.lineage.peek("child")).toEqual(result)
   })
 
+  test("applies moved session locations without evicting cached state", () => {
+    const current = { ...session("child"), directory: "/repo/worktree", path: undefined }
+    const ctx = setup({ child: current })
+    ctx.store.remember(current)
+
+    ctx.store.apply({
+      type: "session.next.moved",
+      properties: {
+        sessionID: "child",
+        location: { directory: "/repo" },
+        subdirectory: "packages/app",
+      },
+    })
+
+    expect(ctx.store.get("child")).toMatchObject({ directory: "/repo", path: "packages/app" })
+  })
+
   test("loads session content through the server client", async () => {
     const ctx = setup({ root: session("root") })
 
@@ -264,6 +281,7 @@ describe("server session", () => {
 
     expect(requests).toEqual([{ sessionID: "root", limit: 20, order: "desc" }])
     expect(store.data.session_message.root.map((message) => message.id)).toEqual([user.id, assistant.id])
+    expect(store.data.message.root.map((message) => message.id)).toEqual([user.id, assistant.id])
   })
 
   test("extends a current page to include the user for split assistant turns", async () => {
@@ -1497,7 +1515,7 @@ describe("server session", () => {
 
     await store.sync("child", { force: true })
 
-    expect(store.data.message.child).toEqual([boundary, older])
+    expect(store.data.message.child).toEqual([older, boundary])
   })
 
   test("preserves a part update for a message being loaded from history", async () => {

packages/app/src/context/server-session.ts

@@ -18,21 +18,27 @@ import { message as cleanMessage } from "@/utils/diffs"
 import { sessionNotFoundError } from "@/utils/server-errors"
 import { rootSession } from "@/utils/session-route"
 import { normalizeSessionInfo } from "@/utils/session"
-import { normalizeSessionMessages } from "@/utils/session-message"
+import { compareMessages, messageKey, normalizeSessionMessages } from "@/utils/session-message"
 import { dropSessionCaches, pickSessionCacheEvictions, SESSION_CACHE_LIMIT } from "./global-sync/session-cache"
 import { createV2SessionReducer, type V2SessionReduction } from "./server-session-v2-reducer"
 import type { ServerApi } from "@/utils/server"
+import type { DecodedLegacyMessagePage } from "./session-message-decode"
 
 type MessageApi = ServerApi["message"]
 
 const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
-const cmpMessage = (a: Message, b: Message) => a.time.created - b.time.created || cmp(a.id, b.id)
 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
 const initialMessagePageSize = 20
-const historyMessagePageSize = 200
+const historyMessagePageSize = 50
 const sessionInfoLimit = 2_048
 const emptyIDs: ReadonlySet<string> = new Set()
 
+function yieldToMain() {
+  const scheduler = (globalThis as { scheduler?: { yield: () => Promise<void> } }).scheduler
+  if (scheduler) return scheduler.yield()
+  return new Promise<void>((resolve) => setTimeout(resolve, 0))
+}
+
 function needsOlderTurnRoot(source: readonly SessionMessageInfo[]) {
   const boundary = source.find(
     (message) =>
@@ -64,7 +70,7 @@ type MessagePage = {
 function legacyMessageSource(items: { info: Message; parts: Part[] }[]): SessionMessageInfo[] {
   return items
     .slice()
-    .sort((a, b) => cmp(a.info.id, b.info.id))
+    .sort((a, b) => compareMessages(a.info, b.info))
     .map((item) => {
       if (item.info.role === "user") {
         return {
@@ -111,17 +117,16 @@ function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[]) {
   const part = new Map(page.part.map((item) => [item.id, item.part]))
   const observed: { messageID: string; parts: Part[] }[] = []
   for (const item of items) {
-    const result = Binary.search(session, item.message.id, (message) => message.id)
-    if (!result.found) session.splice(result.index, 0, item.message)
+    const result = Binary.search(session, messageKey(item.message), messageKey)
+    const found = result.found
+    if (!found) session.splice(result.index, 0, item.message)
     const current = part.get(item.message.id)
-    const confirmed = result.found
-      ? item.parts.filter((part) => Binary.search(current ?? [], part.id, (value) => value.id).found)
-      : []
-    if (result.found) observed.push({ messageID: item.message.id, parts: confirmed })
+    const confirmed = found ? item.parts.filter((part) => current?.some((value) => value.id === part.id)) : []
+    if (found) observed.push({ messageID: item.message.id, parts: confirmed })
     part.set(
       item.message.id,
       merge(
-        result.found ? (current ?? []) : merge(item.confirmedParts ?? [], current ?? []),
+        found ? (current ?? []) : merge(item.confirmedParts ?? [], current ?? []),
         item.parts.filter((part) => !confirmed.includes(part)),
       ),
     )
@@ -158,6 +163,7 @@ function reconcileFetched<T extends { id: string }>(
     retained?: ReadonlySet<string>
     removed?: ReadonlySet<string>
     preserveUnfetched?: boolean | ((item: T) => boolean)
+    compare?: (a: T, b: T) => number
   } = {},
 ) {
   const result = new Map(fetched.map((item) => [item.id, item]))
@@ -180,10 +186,15 @@ function reconcileFetched<T extends { id: string }>(
     if (!item) result.delete(id)
   }
   for (const id of options.removed ?? emptyIDs) result.delete(id)
-  return [...result.values()].sort((a, b) => cmp(a.id, b.id))
+  const items = [...result.values()]
+  return options.compare ? items.sort(options.compare) : items
 }
 
-type ServerSessionOptions = { retry?: typeof retry; protocol?: Promise<"v1" | "v2"> }
+type ServerSessionOptions = {
+  retry?: typeof retry
+  protocol?: Promise<"v1" | "v2">
+  decodeMessages?: (buffer: ArrayBuffer) => Promise<DecodedLegacyMessagePage>
+}
 
 export function createServerSession(
   client: OpencodeClient,
@@ -301,22 +312,24 @@ export function createServerSession(
     return session
   }
 
-  const resolve = (sessionID: string, options?: { force?: boolean }) => {
+  const resolve = (sessionID: string, options?: { force?: boolean; signal?: AbortSignal }) => {
     const cached = data.info[sessionID]
     if (cached && !options?.force) return Promise.resolve(cached)
-    const pending = requests.get(sessionID)
+    const pending = options?.signal ? undefined : requests.get(sessionID)
     if (pending) return pending
     const active = generation(sessionID)
     const request = sessionApi
-      ? sessionApi.get({ sessionID }).then(normalizeSessionInfo)
-      : client.session.get({ sessionID }).then((result) => {
+      ? sessionApi.get({ sessionID }, { signal: options?.signal }).then(normalizeSessionInfo)
+      : client.session.get({ sessionID }, { signal: options?.signal }).then((result) => {
           if (!result.data) throw sessionNotFoundError(sessionID)
           return result.data
         })
     const resolved = request.then((result) => {
+      if (options?.signal?.aborted) return result
       if (generations.get(sessionID) !== active) return result
       return remember(result)
     })
+    if (options?.signal) return resolved
     requests.set(sessionID, resolved)
     const cleanup = () => {
       if (requests.get(sessionID) === resolved) requests.delete(sessionID)
@@ -413,8 +426,7 @@ export function createServerSession(
     if (!load) return
     // A part event keeps an existing parent when the fetched page omits it without overriding fetched metadata.
     const messages = data.message[sessionID]
-    if (messages && Binary.search(messages, messageID, (message) => message.id).found)
-      load.retainedMessages.add(messageID)
+    if (messages?.some((message) => message.id === messageID)) load.retainedMessages.add(messageID)
     const parts = load.touchedParts.get(messageID)
     if (parts) {
       parts.add(partID)
@@ -437,16 +449,14 @@ export function createServerSession(
       load.touchedParts.set(messageID, new Set(parts))
       load.carriedDeltaParts.set(messageID, new Set(parts))
       const messages = data.message[sessionID]
-      if (messages && Binary.search(messages, messageID, (message) => message.id).found)
-        load.retainedMessages.add(messageID)
+      if (messages?.some((message) => message.id === messageID)) load.retainedMessages.add(messageID)
     }
     for (const [messageID, parts] of load.removedParts) {
       const touched = load.touchedParts.get(messageID) ?? new Set<string>()
       parts.forEach((partID) => touched.add(partID))
       load.touchedParts.set(messageID, touched)
       const messages = data.message[sessionID]
-      if (messages && Binary.search(messages, messageID, (message) => message.id).found)
-        load.retainedMessages.add(messageID)
+      if (messages?.some((message) => message.id === messageID)) load.retainedMessages.add(messageID)
     }
     for (const [messageID, parts] of load.optimisticParts) {
       load.removedMessages.delete(messageID)
@@ -552,10 +562,11 @@ export function createServerSession(
         if (!response.data.length) break
       }
       const response = pages.at(-1)!
+      await yieldToMain()
       const source = pages.flatMap((page) => page.data).toReversed()
       const normalized = normalizeSessionMessages(sessionID, source)
       return {
-        session: normalized.messages.sort((a, b) => cmp(a.id, b.id)),
+        session: normalized.messages.sort(compareMessages),
         part: [...normalized.parts.entries()]
           .map(([id, part]) => ({ id, part: part.sort((a, b) => cmp(a.id, b.id)) }))
           .sort((a, b) => cmp(a.id, b.id)),
@@ -566,13 +577,24 @@ export function createServerSession(
         complete: response.data.length === 0,
       }
     }
-    const response = await (options?.retry ?? retry)(() => {
+    const response = await (options?.retry ?? retry)(async () => {
       onAttempt?.()
-      return client.session.messages({ sessionID, limit, before })
+      if (!options?.decodeMessages) return client.session.messages({ sessionID, limit, before })
+      const response = await client.session.messages({ sessionID, limit, before }, { parseAs: "arrayBuffer" })
+      if (!(response.data instanceof ArrayBuffer)) throw new Error("Session messages response is not an ArrayBuffer")
+      return { response, decoded: await options.decodeMessages(response.data) }
     })
+    await yieldToMain()
+    if ("decoded" in response)
+      return {
+        ...response.decoded,
+        sourceMode: before ? ("older" as const) : ("latest" as const),
+        cursor: response.response.response.headers.get("x-next-cursor") ?? undefined,
+        complete: !response.response.response.headers.get("x-next-cursor"),
+      }
     const items = (response.data ?? []).filter((item) => !!item?.info?.id)
     return {
-      session: items.map((item) => cleanMessage(item.info)).sort((a, b) => cmp(a.id, b.id)),
+      session: items.map((item) => cleanMessage(item.info)).sort(compareMessages),
       part: items.map((item) => ({
         id: item.info.id,
         part: item.parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id)),
@@ -696,7 +718,7 @@ export function createServerSession(
             const normalized = normalizeSessionMessages(sessionID, source)
             return {
               ...page,
-              session: normalized.messages.sort((a, b) => cmp(a.id, b.id)),
+              session: normalized.messages.sort(compareMessages),
               part: [...normalized.parts.entries()]
                 .map(([id, part]) => ({ id, part: part.sort((a, b) => cmp(a.id, b.id)) }))
                 .sort((a, b) => cmp(a.id, b.id)),
@@ -713,6 +735,7 @@ export function createServerSession(
       retained: load?.retainedMessages,
       removed: load?.removedMessages,
       preserveUnfetched,
+      compare: compareMessages,
     })
     batch(() => {
       if (source) setData("session_message", sessionID, reconcile(source))
@@ -754,7 +777,7 @@ export function createServerSession(
     try {
       const page = await fetchMessages(sessionID, limit, before, () => resetMessageLoad(sessionID, load))
       const first = page.session.reduce<Message | undefined>(
-        (oldest, message) => (!oldest || cmpMessage(message, oldest) < 0 ? message : oldest),
+        (oldest, message) => (!oldest || compareMessages(message, oldest) < 0 ? message : oldest),
         undefined,
       )
       if (generations.get(sessionID) !== active) return
@@ -804,14 +827,15 @@ export function createServerSession(
               session: merge(
                 page.session,
                 parents.map((parent) => parent.message),
-              ),
+              ).sort(compareMessages),
               part: merge(
                 page.part,
                 parents.map((parent) => ({ id: parent.message.id, part: parent.parts })),
               ),
             }
       const preserveUnfetched =
-        mode === "prepend" || (!result.complete && (!first || ((message: Message) => cmpMessage(message, first) < 0)))
+        mode === "prepend" ||
+        (!result.complete && (!first || ((message: Message) => compareMessages(message, first) < 0)))
       applyMessagePage(
         sessionID,
         result,
@@ -928,7 +952,7 @@ export function createServerSession(
       .message({ sessionID, messageID })
       .then((message) => {
         const current = data.session_message[sessionID] ?? []
-        const messages = [...current.filter((item) => item.id !== message.id), message].sort((a, b) => cmp(a.id, b.id))
+        const messages = [...current.filter((item) => item.id !== message.id), message].sort(compareMessages)
         projectV2({ sessionID, messages, touched: [message.id] })
       })
       .catch(() => {})
@@ -1018,6 +1042,27 @@ export function createServerSession(
         evict([sessionID])
         return
       }
+      case "session.next.moved": {
+        const props = event.properties as {
+          timestamp: number
+          sessionID: string
+          location: { directory: string; workspaceID?: string }
+          subdirectory?: string
+        }
+        const current = data.info[props.sessionID]
+        if (!current) {
+          void resolve(props.sessionID, { force: true }).catch(() => {})
+          return
+        }
+        remember({
+          ...current,
+          directory: props.location.directory,
+          path: props.subdirectory,
+          workspaceID: props.location.workspaceID,
+          time: { ...current.time, updated: props.timestamp },
+        })
+        return
+      }
       case "todo.updated": {
         const props = event.properties as { sessionID: string; todos: Todo[] }
         setData("todo", props.sessionID, reconcile(props.todos, { key: "id" }))
@@ -1051,7 +1096,7 @@ export function createServerSession(
           setData("message", info.sessionID, [info])
           return
         }
-        const result = Binary.search(messages, info.id, (message) => message.id)
+        const result = Binary.search(messages, messageKey(info), messageKey)
         if (result.found) setData("message", info.sessionID, result.index, reconcile(info))
         if (!result.found)
           setData("message", info.sessionID, (value = []) => {
@@ -1084,8 +1129,8 @@ export function createServerSession(
           produce((draft) => {
             const messages = draft.message[props.sessionID]
             if (messages) {
-              const result = Binary.search(messages, props.messageID, (message) => message.id)
-              if (result.found) messages.splice(result.index, 1)
+              const index = messages.findIndex((message) => message.id === props.messageID)
+              if (index >= 0) messages.splice(index, 1)
             }
             deleteMessageParts(draft, props.messageID)
           }),
@@ -1097,7 +1142,7 @@ export function createServerSession(
         if (SKIP_PARTS.has(part.type)) return
         const messages = data.message[part.sessionID]
         const load = messageLoads.get(part.sessionID)
-        const missing = !messages || !Binary.search(messages, part.messageID, (message) => message.id).found
+        const missing = !messages?.some((message) => message.id === part.messageID)
         // Outside a page load, accepting a part without its ordered parent event would create an unbounded orphan.
         if (
           missing &&
@@ -1341,7 +1386,8 @@ export function createServerSession(
         if (items) items.set(input.message.id, { ...input, parts, confirmedParts: [] })
         if (!items)
           optimistic.set(input.sessionID, new Map([[input.message.id, { ...input, parts, confirmedParts: [] }]]))
-        setData("message", input.sessionID, (messages = []) => merge(messages, [input.message]))
+        indexLegacyMessage(input.message)
+        setData("message", input.sessionID, (messages = []) => merge(messages, [input.message]).sort(compareMessages))
         setData(
           "part_text_accum_delta",
           produce((draft) => {
@@ -1374,6 +1420,9 @@ export function createServerSession(
           )
           return
         }
+        setData("session_message", input.sessionID, (messages) =>
+          messages?.filter((message) => message.id !== input.messageID),
+        )
         setData("message", input.sessionID, (messages) => messages?.filter((message) => message.id !== input.messageID))
         setData(produce((draft) => deleteMessageParts(draft, input.messageID)))
       },

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

@@ -1,18 +1,26 @@
 import { describe, expect, test } from "bun:test"
-import type { OpencodeClient } from "@opencode-ai/sdk/v2/client"
+import type { Event, OpencodeClient, Session } from "@opencode-ai/sdk/v2/client"
 import type {
   McpListInput,
   McpResourceCatalogInput,
   SessionApi,
   SessionInfo,
   SessionListInput,
+  OpenCodeEvent,
 } from "@opencode-ai/client/promise"
 import { QueryClient } from "@tanstack/solid-query"
 import { canDisposeDirectory, pickDirectoriesToEvict } from "./global-sync/eviction"
 import { estimateRootSessionTotal, loadRootSessions } from "./global-sync/session-load"
-import { loadActiveSessionsQuery, loadMcpQuery, loadMcpResourcesQuery, seedActiveSessionStatuses } from "./server-sync"
+import {
+  captureSessionMove,
+  loadActiveSessionsQuery,
+  loadMcpQuery,
+  loadMcpResourcesQuery,
+  seedActiveSessionStatuses,
+} from "./server-sync"
 import { ServerScope } from "@/utils/server-scope"
 import { createServerSession } from "./server-session"
+import { adaptServerEvent } from "./server-sdk"
 import type { ServerApi } from "@/utils/server"
 
 type McpApi = ServerApi["mcp"]
@@ -102,6 +110,52 @@ describe("active session query", () => {
   })
 })
 
+describe("session move normalization", () => {
+  test("captures and applies current moves from the source placement", () => {
+    const session = createServerSession({} as OpencodeClient)
+    session.remember(sessionAt("/source"))
+    const current = {
+      id: "event-current-move",
+      created: 10,
+      type: "session.moved",
+      data: { sessionID: "session", location: { directory: "/destination" } },
+    } as OpenCodeEvent
+    const event = adaptServerEvent(current)
+
+    expect(captureSessionMove(event, session.get)).toEqual({
+      sessionID: "session",
+      from: "/source",
+      refresh: "session.next.moved",
+    })
+    session.applyV2(current)
+    session.apply(event)
+    expect(session.get("session")?.directory).toBe("/destination")
+  })
+
+  test("captures and applies V1 moves from the source placement", () => {
+    const session = createServerSession({} as OpencodeClient)
+    session.remember(sessionAt("/source"))
+    const event = {
+      type: "session.next.moved",
+      properties: {
+        timestamp: 10,
+        sessionID: "session",
+        location: { directory: "/destination" },
+        subdirectory: "packages/app",
+      },
+    } as Event
+
+    expect(captureSessionMove(event, session.get)).toEqual({
+      sessionID: "session",
+      from: "/source",
+      refresh: "session.next.moved",
+    })
+    session.apply(event)
+    expect(session.get("session")).toMatchObject({ directory: "/destination", path: "packages/app" })
+  })
+
+})
+
 describe("pickDirectoriesToEvict", () => {
   test("keeps pinned stores and evicts idle stores", () => {
     const now = 5_000
@@ -174,6 +228,18 @@ function sessionInfo(id: string) {
   } as SessionInfo
 }
 
+function sessionAt(directory: string): Session {
+  return {
+    id: "session",
+    slug: "session",
+    projectID: "project",
+    directory,
+    title: "Session",
+    version: "",
+    time: { created: 1, updated: 1 },
+  }
+}
+
 describe("estimateRootSessionTotal", () => {
   test("keeps exact total for full fetches", () => {
     expect(estimateRootSessionTotal({ count: 42, limit: 10, limited: false })).toBe(42)

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

@@ -8,11 +8,11 @@ import type {
 } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
-import { type Accessor, batch, createMemo, getOwner, onCleanup, onMount, untrack } from "solid-js"
+import { type Accessor, batch, createMemo, createSignal, getOwner, onCleanup, onMount, untrack } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import type { InitError } from "../pages/error"
-import { ServerSDK } from "./server-sdk"
+import { ServerSDK, type ServerEvent } from "./server-sdk"
 import {
   bootstrapDirectory,
   bootstrapGlobal,
@@ -46,6 +46,32 @@ import { ServerConnection, useServer } from "./server"
 import { retry } from "@opencode-ai/core/util/retry"
 import type { ServerScope } from "@/utils/server-scope"
 import { createHomeSessionIndexCache } from "./global-sync/home-session-index"
+
+export function captureSessionMove(event: ServerEvent, get: (sessionID: string) => { directory: string } | undefined) {
+  const sessionID =
+    event.current?.type === "session.moved"
+      ? event.current.data.sessionID
+      : event.type === "session.next.moved"
+        ? event.properties.sessionID
+        : undefined
+  if (!sessionID) return
+  return { sessionID, from: get(sessionID)?.directory, refresh: "session.next.moved" as const }
+}
+
+export function shouldRefreshWorkspaceSessions(event: ServerEvent) {
+  const type: string = event.type
+  const current: string | undefined = event.current?.type
+  return (
+    type === "session.created" ||
+    type === "session.updated" ||
+    type === "session.deleted" ||
+    type === "session.next.moved" ||
+    current === "session.moved" ||
+    current === "session.renamed" ||
+    current === "session.archived" ||
+    current === "session.forked"
+  )
+}
 import { persisted } from "@/utils/persist"
 import type { ServerApi } from "@/utils/server"
 import type {
@@ -59,6 +85,7 @@ import type {
 } from "@opencode-ai/client/promise"
 import { toggleMcp } from "./global-sync/mcp"
 import { createServerSession, type ServerSession } from "./server-session"
+import { decodeSessionMessages } from "./session-message-decoder"
 
 type GlobalStore = {
   ready: boolean
@@ -226,6 +253,7 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
 
   const session = createServerSession(serverSDK.client, serverSDK.api.session, serverSDK.api.message, {
     protocol: serverSDK.protocol,
+    decodeMessages: decodeSessionMessages,
   })
   const queryOptionsApi = makeQueryOptionsApi(
     serverSDK.scope,
@@ -235,31 +263,40 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
     serverSDK.protocol,
   )
 
+  const [providersEnabled, setProvidersEnabled] = createSignal(false)
+  const [backgroundEnabled, setBackgroundEnabled] = createSignal(false)
   const [configQuery, providerQuery, pathQuery] = useQueries(() => ({
-    queries: [queryOptionsApi.globalConfig(), queryOptionsApi.providers(null), queryOptionsApi.path(null)],
+    queries: [
+      { ...queryOptionsApi.globalConfig(), enabled: backgroundEnabled() },
+      { ...queryOptionsApi.providers(null), enabled: providersEnabled() },
+      { ...queryOptionsApi.path(null), enabled: backgroundEnabled() },
+    ],
   }))
   const activeSessionsQuery = useQuery(() =>
-    loadActiveSessionsQuery(serverSDK.scope, {
-      active: async () => {
-        if ((await serverSDK.protocol) === "v1") {
-          const statuses = (await serverSDK.client.session.status()).data ?? {}
-          seedActiveSessionStatuses(session, statuses)
-          for (const sessionID of Object.keys(statuses)) {
+    ({
+      ...loadActiveSessionsQuery(serverSDK.scope, {
+        active: async () => {
+          if ((await serverSDK.protocol) === "v1") {
+            const statuses = (await serverSDK.client.session.status()).data ?? {}
+            seedActiveSessionStatuses(session, statuses)
+            for (const sessionID of Object.keys(statuses)) {
+              void session.resolve(sessionID).catch(() => undefined)
+            }
+            return Object.fromEntries(
+              Object.entries(statuses).flatMap(([sessionID, status]) =>
+                status.type === "idle" ? [] : [[sessionID, { type: "running" as const }]],
+              ),
+            )
+          }
+          const active = await serverSDK.api.session.active()
+          seedActiveSessionStatuses(session, active)
+          for (const sessionID of Object.keys(active)) {
             void session.resolve(sessionID).catch(() => undefined)
           }
-          return Object.fromEntries(
-            Object.entries(statuses).flatMap(([sessionID, status]) =>
-              status.type === "idle" ? [] : [[sessionID, { type: "running" as const }]],
-            ),
-          )
-        }
-        const active = await serverSDK.api.session.active()
-        seedActiveSessionStatuses(session, active)
-        for (const sessionID of Object.keys(active)) {
-          void session.resolve(sessionID).catch(() => undefined)
-        }
-        return active
-      },
+          return active
+        },
+      }),
+      enabled: backgroundEnabled(),
     }),
   )
 
@@ -299,10 +336,36 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
   let bootingRoot = false
   let eventFrame: number | undefined
   let eventTimer: ReturnType<typeof setTimeout> | undefined
+  let providerFrame: number | undefined
+  let providerIdle: number | undefined
+  let providerTimer: ReturnType<typeof setTimeout> | undefined
+
+  onMount(() => {
+    providerFrame = requestAnimationFrame(() => {
+      providerFrame = requestAnimationFrame(() => {
+        providerFrame = undefined
+        providerTimer = setTimeout(() => {
+          providerTimer = undefined
+          if ("requestIdleCallback" in window) {
+            providerIdle = requestIdleCallback(() => {
+              setProvidersEnabled(true)
+              setBackgroundEnabled(true)
+            }, { timeout: 5_000 })
+            return
+          }
+          setProvidersEnabled(true)
+          setBackgroundEnabled(true)
+        }, 10_000)
+      })
+    })
+  })
 
   onCleanup(() => {
     if (eventFrame !== undefined) cancelAnimationFrame(eventFrame)
     if (eventTimer !== undefined) clearTimeout(eventTimer)
+    if (providerFrame !== undefined) cancelAnimationFrame(providerFrame)
+    if (providerIdle !== undefined) cancelIdleCallback(providerIdle)
+    if (providerTimer !== undefined) clearTimeout(providerTimer)
   })
 
   const setProjects = (next: Project[] | ((draft: Project[]) => Project[])) => {
@@ -528,19 +591,55 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
     })
   }
 
+  const reindexSession = (sessionID: string, from?: string) => {
+    const next = session.get(sessionID)
+    if (!next) return
+    indexSession(next)
+    if (!from) return
+    const source = children.children[directoryKey(from)]
+    if (!source) return
+    applyDirectoryEvent({
+      event: {
+        type: "session.moved",
+        properties: {
+          sessionID,
+          projectID: next.projectID,
+          location: { directory: next.directory, workspaceID: next.workspaceID },
+          subpath: next.path,
+        },
+      },
+      directory: from,
+      store: source[0],
+      setStore: source[1],
+      push: queue.push,
+      retainedLimit: sessionMeta.get(directoryKey(from))?.limit,
+      sessionContent: false,
+      permission: session.data.permission,
+      loadLsp() {},
+    })
+  }
+
   const unsub = serverSDK.event.listen((e) => {
     const directory = e.name
     const key = directoryKey(directory)
     const event = e.details
     const eventType: string = event.type
     const recent = bootingRoot || Date.now() - bootedAt < 1500
+    const moved = captureSessionMove(event, session.get)
 
     if (event.current) session.applyV2(event.current)
     session.apply(event)
+    if (moved) reindexSession(moved.sessionID, moved.from)
+    if (shouldRefreshWorkspaceSessions(event)) {
+      void queryClient.invalidateQueries({
+        predicate: (query) =>
+          query.queryKey[0] === serverSDK.scope && query.queryKey[2] === "settings-workspace-sessions",
+      })
+    }
     if (event.type === "session.created" || event.type === "session.updated" || event.type === "session.deleted") {
       homeSessions.apply(event)
     }
-    homeSessions.refresh(event.type)
+    homeSessions.refresh(moved?.refresh ?? event.type)
     if (eventType === "integration.connection.updated") void refreshProviders()
 
     if (directory === "global") {
@@ -572,10 +671,6 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
       return
     }
 
-    if (event.current?.type === "session.moved") {
-      const info = session.get(event.current.data.sessionID)
-      if (info) indexSession(info)
-    }
     if (event.current?.type === "session.forked")
       void session
         .resolve(event.current.data.sessionID, { force: true })
@@ -682,12 +777,15 @@ export function createServerSyncContextInner(serverSDK: ServerSDK) {
     child: children.child,
     peek: children.peek,
     disableMcp: children.disableMcp,
+    enableProviders: children.enableProviders,
     queryOptions: queryOptionsApi,
+    loadProviders: () => setProvidersEnabled(true),
     refreshProviders,
     // bootstrap,
     updateConfig: updateConfigMutation.mutateAsync,
     project: projectApi,
     session,
+    reindexSession,
     homeSessions,
     mcp: {
       toggle: async (directory: string, name: string) => {

packages/app/src/context/session-message-decode.test.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test"
+import type { Message, Part, Session, SessionV2Info } from "@opencode-ai/sdk/v2/client"
+import { decodeHomeSessionPage, decodeLegacyMessagePage, decodeLegacySessionList } from "./session-message-decode"
+
+test("decodes and projects a legacy message page", () => {
+  const info = {
+    id: "message",
+    sessionID: "session",
+    role: "user",
+    time: { created: 1 },
+    agent: "build",
+    model: { providerID: "provider", modelID: "model" },
+  } as Message
+  const part = {
+    id: "part",
+    sessionID: "session",
+    messageID: info.id,
+    type: "text",
+    text: "hello",
+  } as Part
+  const result = decodeLegacyMessagePage(new TextEncoder().encode(JSON.stringify([{ info, parts: [part] }])).buffer)
+
+  expect(result.session).toEqual([info])
+  expect(result.part).toEqual([{ id: info.id, part: [part] }])
+  expect(result.source).toEqual([{ id: info.id, type: "user", text: "hello", time: info.time }])
+})
+
+test("decodes and projects a legacy session list", () => {
+  const session = {
+    id: "session",
+    projectID: "project",
+    directory: "/repo",
+    title: "Session",
+    version: "1",
+    time: { created: 1, updated: 1 },
+  } as Session
+  const result = decodeLegacySessionList(new TextEncoder().encode(JSON.stringify([session])).buffer)
+
+  expect(result).toEqual([
+    expect.objectContaining({ id: session.id, title: session.title, location: { directory: "/repo" } }),
+  ])
+})
+
+test("bounds Home sessions by directory before returning from the decoder", () => {
+  const session = (id: string, directory: string, updated: number) =>
+    ({
+      id,
+      projectID: "project",
+      location: { directory },
+      subpath: "",
+      title: id,
+      time: { created: updated, updated },
+    }) as SessionV2Info
+  const page = {
+    data: [session("old", "/repo", 1), session("new", "/repo", 2), session("other", "/other", 3)],
+    cursor: {},
+  }
+  const result = decodeHomeSessionPage(new TextEncoder().encode(JSON.stringify(page)).buffer, {
+    directories: ["/repo"],
+    limit: 1,
+  })
+
+  expect(result.data.map((item) => item.id)).toEqual(["new"])
+})

packages/app/src/context/session-message-decode.ts

@@ -0,0 +1,94 @@
+import type { SessionInfo, SessionMessageInfo } from "@opencode-ai/client/promise"
+import type { Message, Part, Session, V2SessionListResponse } from "@opencode-ai/sdk/v2/client"
+import { message as cleanMessage } from "@/utils/diffs"
+import { pathKey } from "@/utils/path-key"
+import { parseHomeSessionIndex } from "./global-sync/home-session-index"
+import { takeRecentSessions } from "./global-sync/session-trim"
+
+export type DecodedLegacyMessagePage = {
+  session: Message[]
+  part: { id: string; part: Part[] }[]
+  source: SessionMessageInfo[]
+}
+
+export function decodeLegacyMessagePage(buffer: ArrayBuffer): DecodedLegacyMessagePage {
+  const text = new TextDecoder().decode(buffer)
+  const items = (text ? (JSON.parse(text) as { info?: Message; parts?: Part[] }[]) : []).filter(
+    (item): item is { info: Message; parts: Part[] } => !!item.info?.id && Array.isArray(item.parts),
+  )
+  return {
+    session: items.map((item) => cleanMessage(item.info)).sort((a, b) => compare(a.id, b.id)),
+    part: items.map((item) => ({
+      id: item.info.id,
+      part: item.parts.filter((part) => !!part?.id).sort((a, b) => compare(a.id, b.id)),
+    })),
+    source: items
+      .slice()
+      .sort((a, b) => compare(a.info.id, b.info.id))
+      .map((item) =>
+        item.info.role === "user"
+          ? {
+              id: item.info.id,
+              type: "user" as const,
+              text: item.parts.flatMap((part) => (part.type === "text" ? [part.text] : [])).join("\n"),
+              time: item.info.time,
+            }
+          : {
+              id: item.info.id,
+              type: "assistant" as const,
+              agent: item.info.agent ?? item.info.mode,
+              model: { id: item.info.modelID, providerID: item.info.providerID, variant: item.info.variant },
+              content: [],
+              time: item.info.time,
+            },
+      ),
+  }
+}
+
+export function decodeLegacySessionList(buffer: ArrayBuffer) {
+  const text = new TextDecoder().decode(buffer)
+  return (text ? (JSON.parse(text) as Session[]) : []).map(legacySessionInfo)
+}
+
+export function decodeHomeSessionPage(buffer: ArrayBuffer, options?: { directories: string[]; limit: number }) {
+  const text = new TextDecoder().decode(buffer)
+  const page = (text ? JSON.parse(text) : { data: [], cursor: {} }) as V2SessionListResponse
+  const sessions = parseHomeSessionIndex(page.data)
+  if (!options) return { data: sessions, cursor: page.cursor }
+  const directories = new Set(options.directories.map(pathKey))
+  return {
+    data: [...Map.groupBy(sessions, (session) => pathKey(session.directory))]
+      .filter(([directory]) => directories.has(directory))
+      .flatMap(([, items]) => takeRecentSessions(items, options.limit, Number.NEGATIVE_INFINITY)),
+    cursor: page.cursor,
+  }
+}
+
+export function legacySessionInfo(session: Session): SessionInfo {
+  return {
+    id: session.id,
+    parentID: session.parentID,
+    projectID: session.projectID,
+    agent: session.agent,
+    model: session.model && {
+      id: session.model.id,
+      providerID: session.model.providerID,
+      variant: session.model.variant,
+    },
+    cost: session.cost ?? 0,
+    tokens: session.tokens ?? { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    time: session.time,
+    title: session.title,
+    location: { directory: session.directory, workspaceID: session.workspaceID },
+    subpath: session.path,
+    revert: session.revert && {
+      messageID: session.revert.messageID,
+      partID: session.revert.partID,
+      snapshot: session.revert.snapshot,
+    },
+  }
+}
+
+function compare(a: string, b: string) {
+  return a < b ? -1 : a > b ? 1 : 0
+}

packages/app/src/context/session-message-decoder.ts

@@ -0,0 +1,56 @@
+import type { DecodedLegacyMessagePage } from "./session-message-decode"
+import type { SessionInfo } from "@opencode-ai/client/promise"
+import type { Session } from "@opencode-ai/sdk/v2/client"
+
+type Response = { id: number; data?: unknown; error?: string }
+
+let worker: Worker | undefined
+let nextID = 0
+const pending = new Map<number, { resolve: (value: unknown) => void; reject: (error: Error) => void }>()
+
+export function decodeSessionMessages(buffer: ArrayBuffer) {
+  return decode<DecodedLegacyMessagePage>("messages", buffer)
+}
+
+export function decodeSessionList(buffer: ArrayBuffer) {
+  return decode<SessionInfo[]>("sessions", buffer)
+}
+
+export function decodeHomeSessionPage(buffer: ArrayBuffer, options: { directories: string[]; limit: number }) {
+  return decode<{ data: Session[]; cursor: { next?: string } }>("homeSessions", buffer, options)
+}
+
+function decode<T>(
+  type: "messages" | "sessions" | "homeSessions",
+  buffer: ArrayBuffer,
+  options?: { directories: string[]; limit: number },
+) {
+  const id = ++nextID
+  return new Promise<T>((resolve, reject) => {
+    pending.set(id, { resolve: (value) => resolve(value as T), reject })
+    getWorker().postMessage({ id, type, buffer, options }, [buffer])
+  })
+}
+
+function getWorker() {
+  if (worker) return worker
+  worker = new Worker(new URL("./session-message-decoder.worker.ts", import.meta.url), { type: "module" })
+  worker.onmessage = (event: MessageEvent<Response>) => {
+    const request = pending.get(event.data.id)
+    if (!request) return
+    pending.delete(event.data.id)
+    if (event.data.error) {
+      request.reject(new Error(event.data.error))
+      return
+    }
+    request.resolve(event.data.data)
+  }
+  worker.onerror = (event) => {
+    const error = new Error(event.message)
+    pending.forEach((request) => request.reject(error))
+    pending.clear()
+    worker?.terminate()
+    worker = undefined
+  }
+  return worker
+}

packages/app/src/context/session-message-decoder.worker.ts

@@ -0,0 +1,25 @@
+import { decodeHomeSessionPage, decodeLegacyMessagePage, decodeLegacySessionList } from "./session-message-decode"
+
+type DecoderRequest = {
+  id: number
+  type: "messages" | "sessions" | "homeSessions"
+  buffer: ArrayBuffer
+  options?: { directories: string[]; limit: number }
+}
+
+self.onmessage = (event: MessageEvent<DecoderRequest>) => {
+  try {
+    self.postMessage({
+      id: event.data.id,
+      data: (() => {
+        if (event.data.type === "messages") return decodeLegacyMessagePage(event.data.buffer)
+        if (event.data.type === "sessions") return decodeLegacySessionList(event.data.buffer)
+        return decodeHomeSessionPage(event.data.buffer, event.data.options)
+      })(),
+    })
+  } catch (error) {
+    self.postMessage({ id: event.data.id, error: error instanceof Error ? error.message : String(error) })
+  }
+}
+
+export {}

packages/app/src/context/settings.tsx

@@ -3,6 +3,10 @@ import { batch, createEffect, createMemo, createSignal, onCleanup } from "solid-
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { persisted } from "@/utils/persist"
 import { usePlatform } from "@/context/platform"
+import { ScopedKey, type ServerScope } from "@/utils/server-scope"
+
+export type WorkspaceDefaultDestination = "last-used" | "local" | "new"
+export type WorkspaceLastUsed = "local" | "workspace"
 
 export interface NotificationSettings {
   agent: boolean
@@ -50,6 +54,10 @@ export interface Settings {
   permissions: {
     autoApprove: boolean
   }
+  workspaces: {
+    defaultDestination: WorkspaceDefaultDestination
+    lastUsed: Record<string, WorkspaceLastUsed>
+  }
   notifications: NotificationSettings
   sounds: SoundSettings
 }
@@ -206,6 +214,10 @@ const defaultSettings: Settings = {
   permissions: {
     autoApprove: false,
   },
+  workspaces: {
+    defaultDestination: "last-used",
+    lastUsed: {},
+  },
   notifications: {
     agent: true,
     permissions: true,
@@ -355,6 +367,11 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
       setStore("general", "followup", "steer")
     })
 
+    createEffect(() => {
+      if (!ready() || !newLayoutDesigns() || store.general?.showFileTree !== true) return
+      setStore("general", "showFileTree", false)
+    })
+
     return {
       ready,
       get current() {
@@ -453,7 +470,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         },
       },
       visibility: {
-        fileTree: visible(showFileTree),
+        fileTree: createMemo(() => !newLayoutDesigns()),
         search: visible(showSearch),
         status: visible(showStatus),
         customAgents: visible(showCustomAgents),
@@ -499,6 +516,29 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
           setStore("permissions", "autoApprove", value)
         },
       },
+      workspaces: {
+        defaultDestination: withFallback(
+          () => store.workspaces?.defaultDestination,
+          defaultSettings.workspaces.defaultDestination,
+        ),
+        setDefaultDestination(value: WorkspaceDefaultDestination) {
+          setStore("workspaces", (current) => ({
+            ...defaultSettings.workspaces,
+            ...current,
+            defaultDestination: value,
+          }))
+        },
+        lastUsed(scope: ServerScope, projectID: string) {
+          return store.workspaces?.lastUsed?.[ScopedKey.from(scope, projectID)]
+        },
+        setLastUsed(scope: ServerScope, projectID: string, value: WorkspaceLastUsed) {
+          setStore("workspaces", (current) => ({
+            ...defaultSettings.workspaces,
+            ...current,
+            lastUsed: { ...current?.lastUsed, [ScopedKey.from(scope, projectID)]: value },
+          }))
+        },
+      },
       notifications: {
         agent: withFallback(() => store.notifications?.agent, defaultSettings.notifications.agent),
         setAgent(value: boolean) {

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

@@ -4,11 +4,11 @@ import { applyOptimisticAdd, applyOptimisticRemove, mergeOptimisticPage } from "
 
 type Text = Extract<Part, { type: "text" }>
 
-const userMessage = (id: string, sessionID: string): Message => ({
+const userMessage = (id: string, sessionID: string, created = 1): Message => ({
   id,
   sessionID,
   role: "user",
-  time: { created: 1 },
+  time: { created },
   agent: "assistant",
   model: { providerID: "openai", modelID: "gpt" },
 })
@@ -22,21 +22,21 @@ const textPart = (id: string, sessionID: string, messageID: string): Text => ({
 })
 
 describe("sync optimistic reducers", () => {
-  test("applyOptimisticAdd inserts message in sorted order and stores parts", () => {
+  test("applyOptimisticAdd inserts by creation time", () => {
     const sessionID = "ses_1"
     const draft = {
-      message: { [sessionID]: [userMessage("msg_2", sessionID)] },
+      message: { [sessionID]: [userMessage("msg_z", sessionID, 1)] },
       part: {} as Record<string, Part[] | undefined>,
     }
 
     applyOptimisticAdd(draft, {
       sessionID,
-      message: userMessage("msg_1", sessionID),
-      parts: [textPart("prt_2", sessionID, "msg_1"), textPart("prt_1", sessionID, "msg_1")],
+      message: userMessage("msg_a", sessionID, 2),
+      parts: [textPart("prt_2", sessionID, "msg_a"), textPart("prt_1", sessionID, "msg_a")],
     })
 
-    expect(draft.message[sessionID]?.map((x) => x.id)).toEqual(["msg_1", "msg_2"])
-    expect(draft.part.msg_1?.map((x) => x.id)).toEqual(["prt_1", "prt_2"])
+    expect(draft.message[sessionID]?.map((x) => x.id)).toEqual(["msg_z", "msg_a"])
+    expect(draft.part.msg_a?.map((x) => x.id)).toEqual(["prt_1", "prt_2"])
   })
 
   test("applyOptimisticRemove removes message and part entries", () => {
@@ -60,19 +60,33 @@ describe("sync optimistic reducers", () => {
     const sessionID = "ses_1"
     const page = mergeOptimisticPage(
       {
-        session: [userMessage("msg_1", sessionID)],
-        part: [{ id: "msg_1", part: [textPart("prt_1", sessionID, "msg_1")] }],
+        session: [userMessage("msg_z", sessionID, 1)],
+        part: [{ id: "msg_z", part: [textPart("prt_1", sessionID, "msg_z")] }],
         complete: true,
       },
-      [{ message: userMessage("msg_2", sessionID), parts: [textPart("prt_2", sessionID, "msg_2")] }],
+      [{ message: userMessage("msg_a", sessionID, 2), parts: [textPart("prt_2", sessionID, "msg_a")] }],
     )
 
-    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.session.map((x) => x.id)).toEqual(["msg_z", "msg_a"])
+    expect(page.part.find((x) => x.id === "msg_a")?.part.map((x) => x.id)).toEqual(["prt_2"])
     expect(page.confirmed).toEqual([])
     expect(page.complete).toBe(true)
   })
 
+  test("mergeOptimisticPage uses IDs only to break equal-time ties", () => {
+    const sessionID = "ses_1"
+    const page = mergeOptimisticPage(
+      {
+        session: [userMessage("msg_z", sessionID, 1)],
+        part: [],
+        complete: true,
+      },
+      [{ message: userMessage("msg_a", sessionID, 1), parts: [] }],
+    )
+
+    expect(page.session.map((message) => message.id)).toEqual(["msg_a", "msg_z"])
+  })
+
   test("mergeOptimisticPage keeps missing optimistic parts until the server has them", () => {
     const sessionID = "ses_1"
     const page = mergeOptimisticPage(

packages/app/src/context/sync.tsx

@@ -3,6 +3,7 @@ import { createMemo } from "solid-js"
 import { useServerSync } from "./server-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { messageKey } from "@/utils/session-message"
 
 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
 
@@ -67,7 +68,7 @@ export function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[])
   const confirmed: string[] = []
 
   for (const item of items) {
-    const result = Binary.search(session, item.message.id, (message) => message.id)
+    const result = Binary.search(session, messageKey(item.message), messageKey)
     const found = result.found
     if (!found) session.splice(result.index, 0, item.message)
 
@@ -92,7 +93,7 @@ export function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[])
 export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddInput) {
   const messages = draft.message[input.sessionID]
   if (messages) {
-    const result = Binary.search(messages, input.message.id, (m) => m.id)
+    const result = Binary.search(messages, messageKey(input.message), messageKey)
     messages.splice(result.index, 0, input.message)
   } else {
     draft.message[input.sessionID] = [input.message]
@@ -103,8 +104,8 @@ export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddI
 export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticRemoveInput) {
   const messages = draft.message[input.sessionID]
   if (messages) {
-    const result = Binary.search(messages, input.messageID, (m) => m.id)
-    if (result.found) messages.splice(result.index, 1)
+    const index = messages.findIndex((message) => message.id === input.messageID)
+    if (index >= 0) messages.splice(index, 1)
   }
   delete draft.part[input.messageID]
 }

packages/app/src/context/tab-history.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test"
+import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"
+
+function history(): TabHistory {
+  return { stack: [], index: -1 }
+}
+
+describe("tab history", () => {
+  test("moves backward and forward through selected tabs", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+    const available = new Set(selected.stack)
+
+    const previous = previousTab(selected, available)
+    expect(previous?.key).toBe("b")
+
+    const first = previousTab(previous!.state, available)
+    expect(first?.key).toBe("a")
+
+    const next = nextTab(first!.state, available)
+    expect(next?.key).toBe("b")
+  })
+
+  test("replaces forward history after a new selection", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+    const previous = previousTab(selected, new Set(selected.stack))
+    const next = rememberTab(previous!.state, "d")
+
+    expect(next).toEqual({ stack: ["a", "b", "d"], index: 2 })
+    expect(nextTab(next, new Set(next.stack))).toBeUndefined()
+  })
+
+  test("skips tabs that are no longer open", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+
+    expect(previousTab(selected, new Set(["a", "c"]))?.key).toBe("a")
+  })
+
+  test("skips a repeated current tab after closing the previous selection", () => {
+    const selected = ["a", "b", "c", "b"].reduce(rememberTab, history())
+
+    expect(previousTab(selected, new Set(["a", "b"]))?.key).toBe("a")
+  })
+})

packages/app/src/context/tab-history.ts

@@ -0,0 +1,28 @@
+const MAX_TAB_HISTORY = 100
+
+export type TabHistory = {
+  stack: string[]
+  index: number
+}
+
+export function rememberTab(state: TabHistory, key: string): TabHistory {
+  if (state.stack[state.index] === key) return state
+  const stack = state.stack.slice(0, state.index + 1).concat(key).slice(-MAX_TAB_HISTORY)
+  return { stack, index: stack.length - 1 }
+}
+
+export function previousTab(state: TabHistory, available: Set<string>) {
+  return move(state, -1, available)
+}
+
+export function nextTab(state: TabHistory, available: Set<string>) {
+  return move(state, 1, available)
+}
+
+function move(state: TabHistory, offset: -1 | 1, available: Set<string>) {
+  const current = state.stack[state.index]
+  for (let index = state.index + offset; index >= 0 && index < state.stack.length; index += offset) {
+    const key = state.stack[index]
+    if (key && key !== current && available.has(key)) return { state: { ...state, index }, key }
+  }
+}

packages/app/src/context/tabs.tsx

@@ -13,6 +13,7 @@ import { createTabMemory } from "./tab-memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed-tabs"
 import { createDraftPromptSession, type PromptModel } from "./prompt-state"
 import { migrateTabs } from "./tab-migration"
+import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"
 
 export type SessionTab = {
   type: "session"
@@ -74,6 +75,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
     const memory = createTabMemory(getOwner())
 
     const closing = new Set<string>()
+    let history: TabHistory = { stack: [], index: -1 }
     let recentWrite = 0
     let recentValue: string | undefined
 
@@ -148,10 +150,21 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
 
     const navigateTab = (tab: Tab) => {
       const href = tabHref(tab)
+      history = rememberTab(history, tabKey(tab))
       setRecentKey(tabKey(tab))
       navigate(href)
     }
 
+    const moveHistory = (direction: "previous" | "next") => {
+      const available = new Set(store.map(tabKey))
+      const result = direction === "previous" ? previousTab(history, available) : nextTab(history, available)
+      if (!result) return
+      const tab = store.find((item) => tabKey(item) === result.key)
+      if (!tab) return
+      history = result.state
+      navigateTab(tab)
+    }
+
     const removeTab = (index: number) => {
       const tab = store[index]
       if (!tab) return
@@ -177,6 +190,11 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
     }
 
     const actions = {
+      active() {
+        if (location.pathname === "/") return
+        const key = recentKey()
+        return store.find((tab) => tabKey(tab) === key)
+      },
       addSessionTab: (tab: Omit<SessionTab, "type">) => {
         const next = { type: "session" as const, ...tab }
         const existing = store.find((item) => tabKey(item) === tabKey(next))
@@ -357,8 +375,11 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       select: navigateTab,
       remember(tab: Tab) {
         const key = tabKey(tab)
+        history = rememberTab(history, key)
         if (recentKey() !== key) setRecentKey(key)
       },
+      previous: () => moveHistory("previous"),
+      next: () => moveHistory("next"),
       toggleHome(input: { home: boolean; current?: Tab }) {
         if (input.home) {
           const tab = store.find((tab) => tabKey(tab) === recentKey())

packages/app/src/desktop-menu.test.ts

@@ -2,6 +2,27 @@ import { describe, expect, test } from "bun:test"
 import { DESKTOP_MENU } from "./desktop-menu"
 
 describe("desktop menu", () => {
+  test("navigates between tabs", () => {
+    const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
+      (item) => item.type === "item" && (item.labelKey === "desktop.menu.previousTab" || item.labelKey === "desktop.menu.nextTab"),
+    )
+
+    expect(items).toEqual([
+      {
+        type: "item",
+        labelKey: "desktop.menu.previousTab",
+        command: "tab.prev",
+        accelerator: { macos: "Cmd+Option+Left" },
+      },
+      {
+        type: "item",
+        labelKey: "desktop.menu.nextTab",
+        command: "tab.next",
+        accelerator: { macos: "Cmd+Option+Right" },
+      },
+    ])
+  })
+
   test("exports logs through the desktop command registry", () => {
     const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
       (item) => item.type === "item" && item.labelKey === "desktop.menu.exportLogs",

packages/app/src/desktop-menu.ts

@@ -237,6 +237,19 @@ export const DESKTOP_MENU: DesktopMenu[] = [
       { type: "item", labelKey: "desktop.menu.back", command: "common.goBack", accelerator: { macos: "Cmd+[" } },
       { type: "item", labelKey: "desktop.menu.forward", command: "common.goForward", accelerator: { macos: "Cmd+]" } },
       { type: "separator" },
+      {
+        type: "item",
+        labelKey: "desktop.menu.previousTab",
+        command: "tab.prev",
+        accelerator: { macos: "Cmd+Option+Left" },
+      },
+      {
+        type: "item",
+        labelKey: "desktop.menu.nextTab",
+        command: "tab.next",
+        accelerator: { macos: "Cmd+Option+Right" },
+      },
+      { type: "separator" },
       {
         type: "item",
         labelKey: "desktop.menu.previousSession",

packages/app/src/entry.tsx

@@ -3,6 +3,7 @@
 import * as Sentry from "@sentry/solid"
 import { render } from "solid-js/web"
 import { AppBaseProviders, AppInterface } from "@/app"
+import { loadInitialLocale } from "@/context/language"
 import { type Platform, PlatformProvider } from "@/context/platform"
 import { createBrowserDraftStore } from "@/utils/draft-store"
 import { dict as en } from "@/i18n/en"
@@ -149,29 +150,31 @@ if (import.meta.env.VITE_SENTRY_DSN) {
 }
 
 if (root instanceof HTMLElement) {
-  const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
-  clearAuthToken()
-  const server: ServerConnection.Http = {
-    type: "http",
-    authToken: !!auth,
-    http: {
-      url: getCurrentUrl(),
-      ...auth,
-    },
-  }
-  render(
-    () => (
-      <PlatformProvider value={platform}>
-        <AppBaseProviders>
-          <AppInterface
-            defaultServer={ServerConnection.Key.make(getDefaultUrl())}
-            canonicalLocalServer={ServerConnection.key(server)}
-            servers={[server]}
-            disableHealthCheck
-          />
-        </AppBaseProviders>
-      </PlatformProvider>
-    ),
-    root,
-  )
+  void loadInitialLocale().then((locale) => {
+    const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
+    clearAuthToken()
+    const server: ServerConnection.Http = {
+      type: "http",
+      authToken: !!auth,
+      http: {
+        url: getCurrentUrl(),
+        ...auth,
+      },
+    }
+    render(
+      () => (
+        <PlatformProvider value={platform}>
+          <AppBaseProviders locale={locale}>
+            <AppInterface
+              defaultServer={ServerConnection.Key.make(getDefaultUrl())}
+              canonicalLocalServer={ServerConnection.key(server)}
+              servers={[server]}
+              disableHealthCheck
+            />
+          </AppBaseProviders>
+        </PlatformProvider>
+      ),
+      root,
+    )
+  })
 }

packages/app/src/hooks/use-providers.ts

@@ -21,6 +21,12 @@ export function useProviders(directory: Accessor<string | undefined>) {
   const serverSync = useServerSync()
   const params = useParams()
   const dir = () => (directory ? directory() : decode64(params.dir))
+  createEffect(() => {
+    const value = dir()
+    if (value) {
+      serverSync().enableProviders(value)
+    }
+  })
   const providers = () => {
     const value = dir()
     const projectStore = value ? serverSync().child(value)[0] : undefined

packages/app/src/i18n/desktop-native.test.ts

@@ -5,6 +5,8 @@ import {
   DESKTOP_NATIVE_KEYS,
   DESKTOP_NATIVE_LABELS,
   DESKTOP_NATIVE_LOCALES,
+  DESKTOP_NATIVE_LOCALE_TAGS,
+  detectDesktopNativeLocale,
   DESKTOP_NATIVE_MAX_PAYLOAD_BYTES,
   formatDesktopNativeMessage,
   parseDesktopNativeBundle,
@@ -41,6 +43,40 @@ describe("desktop native translations", () => {
       "Azərbaycanca",
       "Suomi",
       "Svenska",
+      "አማርኛ",
+      "Български",
+      "বাংলা",
+      "Català",
+      "Čeština",
+      "ދިވެހި",
+      "རྫོང་ཁ",
+      "Ελληνικά",
+      "Eesti",
+      "فارسی",
+      "Føroyskt",
+      "Hrvatski",
+      "Magyar",
+      "Հայերեն",
+      "Íslenska",
+      "ქართული",
+      "ខ្មែរ",
+      "ລາວ",
+      "Lietuvių",
+      "Latviešu",
+      "Македонски",
+      "Монгол",
+      "Bahasa Melayu",
+      "မြန်မာ",
+      "नेपाली",
+      "Română",
+      "සිංහල",
+      "Slovenčina",
+      "Slovenščina",
+      "Shqip",
+      "Српски",
+      "Тоҷикӣ",
+      "Türkmençe",
+      "Oʻzbekcha",
     ])
   })
 
@@ -74,3 +110,42 @@ describe("desktop native translations", () => {
     expect(formatDesktopNativeMessage("{{known}} {{unknown}}", { known: "yes" })).toBe("yes {{unknown}}")
   })
 })
+
+describe("desktop native locale detection", () => {
+  test("follows preference order and skips invalid or unsupported tags", () => {
+    expect(detectDesktopNativeLocale(["not_a_locale", "fr-FR"])).toBe("fr")
+    expect(detectDesktopNativeLocale(["eo", "de-DE"])).toBe("de")
+  })
+
+  test("uses Unicode likely subtags for script-sensitive bundles", () => {
+    expect(detectDesktopNativeLocale(["zh-TW"])).toBe("zht")
+    expect(detectDesktopNativeLocale(["zh-SG"])).toBe("zh")
+    expect(detectDesktopNativeLocale(["pa-PK"])).toBe("pa")
+    expect(detectDesktopNativeLocale(["pa-IN", "fr"])).toBe("fr")
+    expect(detectDesktopNativeLocale(["az-Cyrl", "de"])).toBe("de")
+    expect(detectDesktopNativeLocale(["sr-Cyrl"])).toBe("sr")
+    expect(detectDesktopNativeLocale(["sr-Latn", "en"])).toBe("en")
+    expect(detectDesktopNativeLocale(["uz-Latn"])).toBe("uz")
+  })
+
+  test("recognizes Norwegian language tags", () => {
+    expect(detectDesktopNativeLocale(["no"])).toBe("no")
+    expect(detectDesktopNativeLocale(["nb-NO"])).toBe("no")
+    expect(detectDesktopNativeLocale(["nn-NO"])).toBe("no")
+  })
+})
+
+describe("desktop native ICU data", () => {
+  test("accepts every locale in standard Intl formatters", () => {
+    for (const locale of DESKTOP_NATIVE_LOCALES) {
+      const tag = DESKTOP_NATIVE_LOCALE_TAGS[locale]
+      expect(() => new Intl.Locale(tag), `${locale} locale`).not.toThrow()
+      expect(() => new Intl.NumberFormat(tag), `${locale} number`).not.toThrow()
+      expect(() => new Intl.DateTimeFormat(tag), `${locale} date`).not.toThrow()
+      expect(() => new Intl.PluralRules(tag), `${locale} plural`).not.toThrow()
+      expect(() => new Intl.ListFormat(tag), `${locale} list`).not.toThrow()
+      expect(() => new Intl.DisplayNames(tag, { type: "language" }), `${locale} names`).not.toThrow()
+      expect(() => new Intl.Segmenter(tag), `${locale} segmenter`).not.toThrow()
+    }
+  })
+})

packages/app/src/i18n/desktop-native.ts

@@ -27,6 +27,40 @@ export const DESKTOP_NATIVE_LOCALES = [
   "az",
   "fi",
   "sv",
+  "am",
+  "bg",
+  "bn",
+  "ca",
+  "cs",
+  "dv",
+  "dz",
+  "el",
+  "et",
+  "fa",
+  "fo",
+  "hr",
+  "hu",
+  "hy",
+  "is",
+  "ka",
+  "km",
+  "lo",
+  "lt",
+  "lv",
+  "mk",
+  "mn",
+  "ms",
+  "my",
+  "ne",
+  "ro",
+  "si",
+  "sk",
+  "sl",
+  "sq",
+  "sr",
+  "tg",
+  "tk",
+  "uz",
 ] as const
 
 export type DesktopNativeLocale = (typeof DESKTOP_NATIVE_LOCALES)[number]
@@ -60,6 +94,131 @@ export const DESKTOP_NATIVE_LABELS: Record<DesktopNativeLocale, string> = {
   az: "Azərbaycanca",
   fi: "Suomi",
   sv: "Svenska",
+  am: "አማርኛ",
+  bg: "Български",
+  bn: "বাংলা",
+  ca: "Català",
+  cs: "Čeština",
+  dv: "ދިވެހި",
+  dz: "རྫོང་ཁ",
+  el: "Ελληνικά",
+  et: "Eesti",
+  fa: "فارسی",
+  fo: "Føroyskt",
+  hr: "Hrvatski",
+  hu: "Magyar",
+  hy: "Հայերեն",
+  is: "Íslenska",
+  ka: "ქართული",
+  km: "ខ្មែរ",
+  lo: "ລາວ",
+  lt: "Lietuvių",
+  lv: "Latviešu",
+  mk: "Македонски",
+  mn: "Монгол",
+  ms: "Bahasa Melayu",
+  my: "မြန်မာ",
+  ne: "नेपाली",
+  ro: "Română",
+  si: "සිංහල",
+  sk: "Slovenčina",
+  sl: "Slovenščina",
+  sq: "Shqip",
+  sr: "Српски",
+  tg: "Тоҷикӣ",
+  tk: "Türkmençe",
+  uz: "Oʻzbekcha",
+}
+
+export const DESKTOP_NATIVE_LOCALE_TAGS: Record<DesktopNativeLocale, string> = {
+  en: "en",
+  zh: "zh-Hans",
+  zht: "zh-Hant",
+  ko: "ko",
+  de: "de",
+  es: "es",
+  fr: "fr",
+  da: "da",
+  ja: "ja",
+  pl: "pl",
+  ru: "ru",
+  uk: "uk",
+  bs: "bs",
+  ar: "ar",
+  no: "nb-NO",
+  br: "pt-BR",
+  th: "th",
+  tr: "tr",
+  hi: "hi-IN",
+  nl: "nl-NL",
+  id: "id-ID",
+  vi: "vi-VN",
+  it: "it-IT",
+  ur: "ur-PK",
+  pa: "pa-Arab-PK",
+  az: "az-Latn-AZ",
+  fi: "fi-FI",
+  sv: "sv-SE",
+  am: "am-ET",
+  bg: "bg-BG",
+  bn: "bn-BD",
+  ca: "ca-AD",
+  cs: "cs-CZ",
+  dv: "dv-MV",
+  dz: "dz-BT",
+  el: "el-GR",
+  et: "et-EE",
+  fa: "fa-IR",
+  fo: "fo-FO",
+  hr: "hr-HR",
+  hu: "hu-HU",
+  hy: "hy-AM",
+  is: "is-IS",
+  ka: "ka-GE",
+  km: "km-KH",
+  lo: "lo-LA",
+  lt: "lt-LT",
+  lv: "lv-LV",
+  mk: "mk-MK",
+  mn: "mn-MN",
+  ms: "ms-MY",
+  my: "my-MM",
+  ne: "ne-NP",
+  ro: "ro-RO",
+  si: "si-LK",
+  sk: "sk-SK",
+  sl: "sl-SI",
+  sq: "sq-AL",
+  sr: "sr-Cyrl-RS",
+  tg: "tg-Cyrl-TJ",
+  tk: "tk-Latn-TM",
+  uz: "uz-Latn-UZ",
+}
+
+export function detectDesktopNativeLocale(languages: readonly string[]): DesktopNativeLocale {
+  for (const language of languages) {
+    const source = locale(language)
+    if (!source) continue
+    if (["no", "nb", "nn"].includes(source.language)) return "no"
+    const match = DESKTOP_NATIVE_LOCALES.find((candidate) => {
+      const target = locale(DESKTOP_NATIVE_LOCALE_TAGS[candidate])
+      return target?.language === source.language && target.script === source.script
+    })
+    if (match) return match
+  }
+  return "en"
+}
+
+export function desktopNativePluralCategories(locale: DesktopNativeLocale) {
+  return new Intl.PluralRules(DESKTOP_NATIVE_LOCALE_TAGS[locale]).resolvedOptions().pluralCategories
+}
+
+function locale(value: string) {
+  try {
+    return new Intl.Locale(value).maximize()
+  } catch {
+    return undefined
+  }
 }
 
 export const DESKTOP_NATIVE_ENGLISH = {
@@ -97,6 +256,8 @@ export const DESKTOP_NATIVE_ENGLISH = {
   "desktop.menu.toggleFullScreen": "Toggle Full Screen",
   "desktop.menu.back": "Back",
   "desktop.menu.forward": "Forward",
+  "desktop.menu.previousTab": "Previous Tab",
+  "desktop.menu.nextTab": "Next Tab",
   "desktop.menu.previousSession": "Previous Session",
   "desktop.menu.nextSession": "Next Session",
   "desktop.menu.previousProject": "Previous Project",

packages/app/src/i18n/en.ts

@@ -1123,6 +1123,46 @@ export const dict = {
   "session.delete.button": "Delete session",
 
   "workspace.new": "New workspace",
+  "common.viewAll": "View all",
+  "session.new.workspace.local.tooltip": "Use current checkout",
+  "session.new.workspace.new.tooltip": "Create isolated checkout",
+  "session.new.workspace.fromBranch": "from {{branch}}",
+  "session.new.workspace.trigger.tooltip": "Select where to run session",
+  "session.new.workspace.search.placeholder": "Search workspaces",
+  "settings.tab.workspaces": "Workspaces",
+  "settings.workspaces.filter.all": "All projects",
+  "settings.workspaces.empty": "No workspaces",
+  "settings.workspaces.count.one": "{{count}} workspace",
+  "settings.workspaces.count.other": "{{count}} workspaces",
+  "settings.workspaces.sessions.one": "{{count}} session in {{project}}",
+  "settings.workspaces.sessions.other": "{{count}} sessions in {{project}}",
+  "settings.workspaces.lastActiveSession": "Last active session",
+  "settings.workspaces.deleteAll": "Delete all workspaces",
+  "settings.workspaces.deleteAll.confirm": "Delete all {{count}} workspaces?",
+  "settings.workspaces.delete.warning":
+    "The workspace directory and branch will be permanently removed. Deletion proceeds only if it is clean, inactive, and has no linked sessions.",
+  "settings.workspaces.deleteAll.warning":
+    "The {{count}} selected workspaces in {{project}} will be permanently removed only if each is clean, inactive, and has no linked sessions.",
+  "settings.workspaces.delete.blocked.active": "The active workspace cannot be deleted.",
+  "settings.workspaces.delete.blocked.linked": "This workspace has linked sessions and cannot be deleted.",
+  "settings.workspaces.default.title": "Default environment",
+  "settings.workspaces.default.description": "Choose where new sessions start",
+  "settings.workspaces.default.lastUsed": "Last used per project",
+  "settings.workspaces.default.local": "Local directory",
+  "settings.workspaces.default.new": "New workspace",
+  "workspace.move.title": "Move to workspace",
+  "workspace.move.menu.title": "Move session to",
+  "workspace.move.failed": "Failed to move session",
+  "workspace.lifecycle.creating": "Creating workspace",
+  "workspace.lifecycle.created": "Workspace created",
+  "workspace.lifecycle.starting": "Starting session",
+  "workspace.onboarding.title": "Isolate sessions with workspaces",
+  "workspace.onboarding.description": "Each gets its own checkout, so nothing interferes with your local repository",
+  "workspace.lifecycle.moving": "Moving to workspace",
+  "workspace.lifecycle.set": "Workspace set",
+  "session.summary.title": "Session details",
+  "session.summary.noBranch": "No branch",
+  "session.summary.basedOn": "Based on {{branch}}",
   "workspace.type.local": "local",
   "workspace.type.sandbox": "sandbox",
   "workspace.create.failed.title": "Failed to create workspace",