fix: 修正 logo 中 N 和 G 字母造型

N 添加对角线笔画（█▄ █），G 添加内横杠（█ ▀█），
避免与 O 字母造型雷同。同步更新 ui.ts 中的硬编码 wordmark。

packages/app/.gitignore

@@ -0,0 +1,3 @@
+src/assets/theme.css
+e2e/test-results
+e2e/playwright-report

packages/app/AGENTS.md

@@ -0,0 +1,30 @@
+## Debugging
+
+- NEVER try to restart the app, or the server process, EVER.
+
+## Local Dev
+
+- `opencode dev web` proxies `https://app.opencode.ai`, so local UI/CSS changes will not show there.
+- For local UI changes, run the backend and app dev servers separately.
+- Backend (from `packages/opencode`): `bun run --conditions=browser ./src/index.ts serve --port 4096`
+- App (from `packages/app`): `bun dev -- --port 4444`
+- Open `http://localhost:4444` to verify UI changes (it targets the backend at `http://localhost:4096`).
+
+## SolidJS
+
+- Always prefer `createStore` over multiple `createSignal` calls
+
+## Tool Calling
+
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.
+
+## Browser Automation
+
+Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.
+
+Core workflow:
+
+1. `agent-browser open <url>` - Navigate to page
+2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
+3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
+4. Re-snapshot after page changes

packages/app/README.md

@@ -0,0 +1,50 @@
+## Usage
+
+Dependencies for these templates are managed with [pnpm](https://pnpm.io) using `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That said, any package manager will work. This file can safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## E2E Testing
+
+Playwright starts the Vite dev server automatically via `webServer`, and UI tests expect an opencode backend at `localhost:4096` by default.
+
+```bash
+bunx playwright install chromium
+bun run test:e2e:local
+bun run test:e2e:local -- --grep "settings"
+```
+
+Environment options:
+
+- `PLAYWRIGHT_SERVER_HOST` / `PLAYWRIGHT_SERVER_PORT` (backend address, default: `localhost:4096`)
+- `PLAYWRIGHT_PORT` (Vite dev server port, default: `3000`)
+- `PLAYWRIGHT_BASE_URL` (override base URL, default: `http://localhost:<PLAYWRIGHT_PORT>`)
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

packages/app/bunfig.toml

@@ -0,0 +1,3 @@
+[test]
+root = "./src"
+preload = ["./happydom.ts"]

packages/app/create-effect-simplification-spec.md

@@ -0,0 +1,515 @@
+# CreateEffect Simplification Implementation Spec
+
+Reduce reactive misuse across `packages/app`.
+
+---
+
+## Context
+
+This work targets `packages/app/src`, which currently has 101 `createEffect` calls across 37 files.
+
+The biggest clusters are `pages/session.tsx` (19), `pages/layout.tsx` (13), `pages/session/file-tabs.tsx` (6), and several context providers that mirror one store into another.
+
+Key issues from the audit:
+
+- Derived state is being written through effects instead of computed directly
+- Session and file resets are handled by watch-and-clear effects instead of keyed state boundaries
+- User-driven actions are hidden inside reactive effects
+- Context layers mirror and hydrate child stores with multiple sync effects
+- Several areas repeat the same imperative trigger pattern in multiple effects
+
+Keep the implementation focused on removing unnecessary effects, not on broad UI redesign.
+
+## Goals
+
+- Cut high-churn `createEffect` usage in the hottest files first
+- Replace effect-driven derived state with reactive derivation
+- Replace reset-on-key effects with keyed ownership boundaries
+- Move event-driven work to direct actions and write paths
+- Remove mirrored store hydration where a single source of truth can exist
+- Leave necessary external sync effects in place, but make them narrower and clearer
+
+## Non-Goals
+
+- Do not rewrite unrelated component structure just to reduce the count
+- Do not change product behavior, navigation flow, or persisted data shape unless required for a cleaner write boundary
+- Do not remove effects that bridge to DOM, editors, polling, or external APIs unless there is a clearly safer equivalent
+- Do not attempt a repo-wide cleanup outside `packages/app`
+
+## Effect Taxonomy And Replacement Rules
+
+Use these rules during implementation.
+
+### Prefer `createMemo`
+
+Use `createMemo` when the target value is pure derived state from other signals or stores.
+
+Do this when an effect only reads reactive inputs and writes another reactive value that could be computed instead.
+
+Apply this to:
+
+- `packages/app/src/pages/session.tsx:141`
+- `packages/app/src/pages/layout.tsx:557`
+- `packages/app/src/components/terminal.tsx:261`
+- `packages/app/src/components/session/session-header.tsx:309`
+
+Rules:
+
+- If no external system is touched, do not use `createEffect`
+- Derive once, then read the memo where needed
+- If normalization is required, prefer normalizing at the write boundary before falling back to a memo
+
+### Prefer Keyed Remounts
+
+Use keyed remounts when local UI state should reset because an identity changed.
+
+Do this with `sessionKey`, `scope()`, or another stable identity instead of watching the key and manually clearing signals.
+
+Apply this to:
+
+- `packages/app/src/pages/session.tsx:325`
+- `packages/app/src/pages/session.tsx:336`
+- `packages/app/src/pages/session.tsx:477`
+- `packages/app/src/pages/session.tsx:869`
+- `packages/app/src/pages/session.tsx:963`
+- `packages/app/src/pages/session/message-timeline.tsx:149`
+- `packages/app/src/context/file.tsx:100`
+
+Rules:
+
+- If the desired behavior is "new identity, fresh local state," key the owner subtree
+- Keep state local to the keyed boundary so teardown and recreation handle the reset naturally
+
+### Prefer Event Handlers And Actions
+
+Use direct handlers, store actions, and async command functions when work happens because a user clicked, selected, reloaded, or navigated.
+
+Do this when an effect is just watching for a flag change, command token, or event-bus signal to trigger imperative logic.
+
+Apply this to:
+
+- `packages/app/src/pages/layout.tsx:484`
+- `packages/app/src/pages/layout.tsx:652`
+- `packages/app/src/pages/layout.tsx:776`
+- `packages/app/src/pages/layout.tsx:1489`
+- `packages/app/src/pages/layout.tsx:1519`
+- `packages/app/src/components/file-tree.tsx:328`
+- `packages/app/src/pages/session/terminal-panel.tsx:55`
+- `packages/app/src/context/global-sync.tsx:148`
+- Duplicated trigger sets in:
+  - `packages/app/src/pages/session/review-tab.tsx:122`
+  - `packages/app/src/pages/session/review-tab.tsx:130`
+  - `packages/app/src/pages/session/review-tab.tsx:138`
+  - `packages/app/src/pages/session/file-tabs.tsx:367`
+  - `packages/app/src/pages/session/file-tabs.tsx:378`
+  - `packages/app/src/pages/session/file-tabs.tsx:389`
+  - `packages/app/src/pages/session/use-session-hash-scroll.ts:144`
+  - `packages/app/src/pages/session/use-session-hash-scroll.ts:149`
+  - `packages/app/src/pages/session/use-session-hash-scroll.ts:167`
+
+Rules:
+
+- If the trigger is user intent, call the action at the source of that intent
+- If the same imperative work is triggered from multiple places, extract one function and call it directly
+
+### Prefer `onMount` And `onCleanup`
+
+Use `onMount` and `onCleanup` for lifecycle-only setup and teardown.
+
+This is the right fit for subscriptions, one-time wiring, timers, and imperative integration that should not rerun for ordinary reactive changes.
+
+Use this when:
+
+- Setup should happen once per owner lifecycle
+- Cleanup should always pair with teardown
+- The work is not conceptually derived state
+
+### Keep `createEffect` When It Is A Real Bridge
+
+Keep `createEffect` when it synchronizes reactive data to an external imperative sink.
+
+Examples that should remain, though they may be narrowed or split:
+
+- DOM/editor sync in `packages/app/src/components/prompt-input.tsx:690`
+- Scroll sync in `packages/app/src/pages/session.tsx:685`
+- Scroll/hash sync in `packages/app/src/pages/session/use-session-hash-scroll.ts:149`
+- External sync in:
+  - `packages/app/src/context/language.tsx:207`
+  - `packages/app/src/context/settings.tsx:110`
+  - `packages/app/src/context/sdk.tsx:26`
+- Polling in:
+  - `packages/app/src/components/status-popover.tsx:59`
+  - `packages/app/src/components/dialog-select-server.tsx:273`
+
+Rules:
+
+- Keep the effect single-purpose
+- Make dependencies explicit and narrow
+- Avoid writing back into the same reactive graph unless absolutely required
+
+## Implementation Plan
+
+### Phase 0: Classification Pass
+
+Before changing code, tag each targeted effect as one of: derive, reset, event, lifecycle, or external bridge.
+
+Acceptance criteria:
+
+- Every targeted effect in this spec is tagged with a replacement strategy before refactoring starts
+- Shared helpers to be introduced are identified up front to avoid repeating patterns
+
+### Phase 1: Derived-State Cleanup
+
+Tackle highest-value, lowest-risk derived-state cleanup first.
+
+Priority items:
+
+- Normalize tabs at write boundaries and remove `packages/app/src/pages/session.tsx:141`
+- Stop syncing `workspaceOrder` in `packages/app/src/pages/layout.tsx:557`
+- Make prompt slash filtering reactive so `packages/app/src/components/prompt-input.tsx:652` can be removed
+- Replace other obvious derived-state effects in terminal and session header
+
+Acceptance criteria:
+
+- No behavior change in tab ordering, prompt filtering, terminal display, or header state
+- Targeted derived-state effects are deleted, not just moved
+
+### Phase 2: Keyed Reset Cleanup
+
+Replace reset-on-key effects with keyed ownership boundaries.
+
+Priority items:
+
+- Key session-scoped UI and state by `sessionKey`
+- Key file-scoped state by `scope()`
+- Remove manual clear-and-reseed effects in session and file context
+
+Acceptance criteria:
+
+- Switching session or file scope recreates the intended local state cleanly
+- No stale state leaks across session or scope changes
+- Target reset effects are deleted
+
+### Phase 3: Event-Driven Work Extraction
+
+Move event-driven work out of reactive effects.
+
+Priority items:
+
+- Replace `globalStore.reload` effect dispatching with direct calls
+- Split mixed-responsibility effect in `packages/app/src/pages/layout.tsx:1489`
+- Collapse duplicated imperative trigger triplets into single functions
+- Move file-tree and terminal-panel imperative work to explicit handlers
+
+Acceptance criteria:
+
+- User-triggered behavior still fires exactly once per intended action
+- No effect remains whose only job is to notice a command-like state and trigger an imperative function
+
+### Phase 4: Context Ownership Cleanup
+
+Remove mirrored child-store hydration patterns.
+
+Priority items:
+
+- Remove child-store hydration mirrors in `packages/app/src/context/global-sync/child-store.ts:184`, `:190`, `:193`
+- Simplify mirror logic in `packages/app/src/context/global-sync.tsx:130`, `:138`
+- Revisit `packages/app/src/context/layout.tsx:424` if it still mirrors instead of deriving
+
+Acceptance criteria:
+
+- There is one clear source of truth for each synced value
+- Child stores no longer need effect-based hydration to stay consistent
+- Initialization and updates both work without manual mirror effects
+
+### Phase 5: Cleanup And Keeper Review
+
+Clean up remaining targeted hotspots and narrow the effects that should stay.
+
+Acceptance criteria:
+
+- Remaining `createEffect` calls in touched files are all true bridges or clearly justified lifecycle sync
+- Mixed-responsibility effects are split into smaller units where still needed
+
+## Detailed Work Items By Area
+
+### 1. Normalize Tab State
+
+Files:
+
+- `packages/app/src/pages/session.tsx:141`
+
+Work:
+
+- Move tab normalization into the functions that create, load, or update tab state
+- Make readers consume already-normalized tab data
+- Remove the effect that rewrites derived tab state after the fact
+
+Rationale:
+
+- Tabs should become valid when written, not be repaired later
+- This removes a feedback loop and makes state easier to trust
+
+Acceptance criteria:
+
+- The effect at `packages/app/src/pages/session.tsx:141` is removed
+- Newly created and restored tabs are normalized before they enter local state
+- Tab rendering still matches current behavior for valid and edge-case inputs
+
+### 2. Key Session-Owned State
+
+Files:
+
+- `packages/app/src/pages/session.tsx:325`
+- `packages/app/src/pages/session.tsx:336`
+- `packages/app/src/pages/session.tsx:477`
+- `packages/app/src/pages/session.tsx:869`
+- `packages/app/src/pages/session.tsx:963`
+- `packages/app/src/pages/session/message-timeline.tsx:149`
+
+Work:
+
+- Identify state that should reset when `sessionKey` changes
+- Move that state under a keyed subtree or keyed owner boundary
+- Remove effects that watch `sessionKey` just to clear local state, refs, or temporary UI flags
+
+Rationale:
+
+- Session identity already defines the lifetime of this UI state
+- Keyed ownership makes reset behavior automatic and easier to reason about
+
+Acceptance criteria:
+
+- The targeted reset effects are removed
+- Changing sessions resets only the intended session-local state
+- Scroll and editor state that should persist are not accidentally reset
+
+### 3. Derive Workspace Order
+
+Files:
+
+- `packages/app/src/pages/layout.tsx:557`
+
+Work:
+
+- Stop writing `workspaceOrder` from live workspace data in an effect
+- Represent user overrides separately from live workspace data
+- Compute effective order from current data plus overrides with a memo or pure helper
+
+Rationale:
+
+- Persisted user intent and live source data should not mirror each other through an effect
+- A computed effective order avoids drift and racey resync behavior
+
+Acceptance criteria:
+
+- The effect at `packages/app/src/pages/layout.tsx:557` is removed
+- Workspace order updates correctly when workspaces appear, disappear, or are reordered by the user
+- User overrides persist without requiring a sync-back effect
+
+### 4. Remove Child-Store Mirrors
+
+Files:
+
+- `packages/app/src/context/global-sync.tsx:130`
+- `packages/app/src/context/global-sync.tsx:138`
+- `packages/app/src/context/global-sync.tsx:148`
+- `packages/app/src/context/global-sync/child-store.ts:184`
+- `packages/app/src/context/global-sync/child-store.ts:190`
+- `packages/app/src/context/global-sync/child-store.ts:193`
+- `packages/app/src/context/layout.tsx:424`
+
+Work:
+
+- Trace the actual ownership of global and child store values
+- Replace hydration and mirror effects with explicit initialization and direct updates
+- Remove the `globalStore.reload` event-bus pattern and call the needed reload paths directly
+
+Rationale:
+
+- Mirrors make it hard to tell which state is authoritative
+- Event-bus style state toggles hide control flow and create accidental reruns
+
+Acceptance criteria:
+
+- Child store hydration no longer depends on effect-based copying
+- Reload work can be followed from the event source to the handler without a reactive relay
+- State remains correct on first load, child creation, and subsequent updates
+
+### 5. Key File-Scoped State
+
+Files:
+
+- `packages/app/src/context/file.tsx:100`
+
+Work:
+
+- Move file-scoped local state under a boundary keyed by `scope()`
+- Remove any effect that watches `scope()` only to reset file-local state
+
+Rationale:
+
+- File scope changes are identity changes
+- Keyed ownership gives a cleaner reset than manual clear logic
+
+Acceptance criteria:
+
+- The effect at `packages/app/src/context/file.tsx:100` is removed
+- Switching scopes resets only scope-local state
+- No previous-scope data appears after a scope change
+
+### 6. Split Layout Side Effects
+
+Files:
+
+- `packages/app/src/pages/layout.tsx:1489`
+- Related event-driven effects near `packages/app/src/pages/layout.tsx:484`, `:652`, `:776`, `:1519`
+
+Work:
+
+- Break the mixed-responsibility effect at `:1489` into direct actions and smaller bridge effects only where required
+- Move user-triggered branches into the actual command or handler that causes them
+- Remove any branch that only exists because one effect is handling unrelated concerns
+
+Rationale:
+
+- Mixed effects hide cause and make reruns hard to predict
+- Smaller units reduce accidental coupling and make future cleanup safer
+
+Acceptance criteria:
+
+- The effect at `packages/app/src/pages/layout.tsx:1489` no longer mixes unrelated responsibilities
+- Event-driven branches execute from direct handlers
+- Remaining effects in this area each have one clear external sync purpose
+
+### 7. Remove Duplicate Triggers
+
+Files:
+
+- `packages/app/src/pages/session/review-tab.tsx:122`
+- `packages/app/src/pages/session/review-tab.tsx:130`
+- `packages/app/src/pages/session/review-tab.tsx:138`
+- `packages/app/src/pages/session/file-tabs.tsx:367`
+- `packages/app/src/pages/session/file-tabs.tsx:378`
+- `packages/app/src/pages/session/file-tabs.tsx:389`
+- `packages/app/src/pages/session/use-session-hash-scroll.ts:144`
+- `packages/app/src/pages/session/use-session-hash-scroll.ts:149`
+- `packages/app/src/pages/session/use-session-hash-scroll.ts:167`
+
+Work:
+
+- Extract one explicit imperative function per behavior
+- Call that function from each source event instead of replicating the same effect pattern multiple times
+- Preserve the scroll-sync effect that is truly syncing with the DOM, but remove duplicate trigger scaffolding around it
+
+Rationale:
+
+- Duplicate triggers make it easy to miss a case or fire twice
+- One named action is easier to test and reason about
+
+Acceptance criteria:
+
+- Repeated imperative effect triplets are collapsed into shared functions
+- Scroll behavior still works, including hash-based navigation
+- No duplicate firing is introduced
+
+### 8. Make Prompt Filtering Reactive
+
+Files:
+
+- `packages/app/src/components/prompt-input.tsx:652`
+- Keep `packages/app/src/components/prompt-input.tsx:690` as needed
+
+Work:
+
+- Convert slash filtering into a pure reactive derivation from the current input and candidate command list
+- Keep only the editor or DOM bridge effect if it is still needed for imperative syncing
+
+Rationale:
+
+- Filtering is classic derived state
+- It should not need an effect if it can be computed from current inputs
+
+Acceptance criteria:
+
+- The effect at `packages/app/src/components/prompt-input.tsx:652` is removed
+- Filtered slash-command results update correctly as the input changes
+- The editor sync effect at `:690` still behaves correctly
+
+### 9. Clean Up Smaller Derived-State Cases
+
+Files:
+
+- `packages/app/src/components/terminal.tsx:261`
+- `packages/app/src/components/session/session-header.tsx:309`
+
+Work:
+
+- Replace effect-written local state with memos or inline derivation
+- Remove intermediate setters when the value can be computed directly
+
+Rationale:
+
+- These are low-risk wins that reinforce the same pattern
+- They also help keep follow-up cleanup consistent
+
+Acceptance criteria:
+
+- Targeted effects are removed
+- UI output remains unchanged under the same inputs
+
+## Verification And Regression Checks
+
+Run focused checks after each phase, not only at the end.
+
+### Suggested Verification
+
+- Switch between sessions rapidly and confirm local session UI resets only where intended
+- Open, close, and reorder tabs and confirm order and normalization remain stable
+- Change workspaces, reload workspace data, and verify effective ordering is correct
+- Change file scope and confirm stale file state does not bleed across scopes
+- Trigger layout actions that previously depended on effects and confirm they still fire once
+- Use slash commands in the prompt and verify filtering updates as you type
+- Test review tab, file tab, and hash-scroll flows for duplicate or missing triggers
+- Verify global sync initialization, reload, and child-store creation paths
+
+### Regression Checks
+
+- No accidental infinite reruns
+- No double-firing network or command actions
+- No lost cleanup for listeners, timers, or scroll handlers
+- No preserved stale state after identity changes
+- No removed effect that was actually bridging to DOM or an external API
+
+If available, add or update tests around pure helpers introduced during this cleanup.
+
+Favor tests for derived ordering, normalization, and action extraction, since those are easiest to lock down.
+
+## Definition Of Done
+
+This work is done when all of the following are true:
+
+- The highest-leverage targets in this spec are implemented
+- Each removed effect has been replaced by a clearer pattern: memo, keyed boundary, direct action, or lifecycle hook
+- The "should remain" effects still exist only where they serve a real external sync purpose
+- Touched files have fewer mixed-responsibility effects and clearer ownership of state
+- Manual verification covers session switching, file scope changes, workspace ordering, prompt filtering, and reload flows
+- No behavior regressions are found in the targeted areas
+
+A reduced raw `createEffect` count is helpful, but it is not the main success metric.
+
+The main success metric is clearer ownership and fewer effect-driven state repairs.
+
+## Risks And Rollout Notes
+
+Main risks:
+
+- Keyed remounts can reset too much if state boundaries are drawn too high
+- Store mirror removal can break initialization order if ownership is not mapped first
+- Moving event work out of effects can accidentally skip triggers that were previously implicit
+
+Rollout notes:
+
+- Land in small phases, with each phase keeping the app behaviorally stable
+- Prefer isolated PRs by phase or by file cluster, especially for context-store changes
+- Review each remaining effect in touched files and leave it only if it clearly bridges to something external

packages/app/e2e/regression/prompt-thinking-level.spec.ts

@@ -0,0 +1,87 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"
+
+const directory = "C:/OpenCode/PromptThinkingLevelRegression"
+const projectID = "proj_prompt_thinking_level_regression"
+const sessionID = "ses_prompt_thinking_level_regression"
+
+test("shows the V2 thinking level control while relevant", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "prompt-thinking-level-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: {
+            "thinking-model": {
+              id: "thinking-model",
+              name: "Thinking Model",
+              limit: { context: 200_000 },
+              variants: { high: {} },
+            },
+          },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "thinking-model" },
+    },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "prompt-thinking-level-regression",
+        projectID,
+        directory,
+        title: "Prompt thinking level regression",
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.addInitScript(() => {
+    localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  const composer = page.locator('[data-component="session-composer"]')
+  const input = composer.locator('[data-component="prompt-input"]')
+  const control = composer.locator('[data-component="prompt-variant-control"]')
+  await expectAppVisible(composer)
+
+  await idleComposer(page)
+  await expect(control).toBeHidden()
+
+  await composer.hover()
+  await expect(control).toBeVisible()
+
+  await control.locator('[data-action="prompt-model-variant"]').click()
+  const high = page.getByRole("option", { name: "high" })
+  await expect(high).toBeVisible()
+  await page.mouse.move(0, 0)
+  await expect(control).toBeVisible()
+  await expect(high).toBeVisible()
+  await high.click()
+
+  await idleComposer(page)
+  await input.focus()
+  await expect(control).toBeVisible()
+
+  await idleComposer(page)
+  await expect(control).toBeVisible()
+})
+
+async function idleComposer(page: Page) {
+  await page.mouse.move(0, 0)
+  await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
+}

packages/app/e2e/regression/session-list-path-loading.spec.ts

@@ -0,0 +1,41 @@
+import { test } from "@playwright/test"
+import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"
+
+test("shows loaded sessions before the directory path request resolves", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    sessions: fixture.sessions,
+    provider: fixture.provider,
+    directory: fixture.directory,
+    project: fixture.project,
+    pageMessages,
+  })
+
+  let releasePath!: () => void
+  const pathBlocked = new Promise<void>((resolve) => {
+    releasePath = resolve
+  })
+  await page.route("**/path?*", async (route) => {
+    if (!new URL(route.request().url()).searchParams.has("directory")) return route.fallback()
+    await pathBlocked
+    return route.fallback()
+  })
+
+  await page.addInitScript((directory) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({
+        projects: { local: [{ worktree: directory, expanded: true }] },
+        lastProject: { local: directory },
+      }),
+    )
+  }, fixture.directory)
+
+  await page.goto("/")
+  try {
+    await expectAppVisible(page.getByText(fixture.expected.sourceTitle).first())
+  } finally {
+    releasePath()
+  }
+})

packages/app/e2e/regression/session-timeline-collapse-state.spec.ts

@@ -0,0 +1,353 @@
+import { expect, test, type Locator, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/TimelineStateRegression"
+const projectID = "proj_timeline_state_regression"
+const sessionID = "ses_timeline_state_regression"
+const userMessageID = "msg_user_regression"
+const assistantMessageID = "msg_assistant_regression"
+const editPartID = "prt_0001_edit"
+const textPartID = "prt_9999_text"
+const title = "Timeline collapse state regression"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+
+type EventPayload = {
+  directory: string
+  payload: Record<string, unknown>
+}
+
+declare global {
+  interface Window {
+    __timelineDiffProbe: {
+      reset: () => void
+      shadowRoots: () => number
+    }
+  }
+}
+
+const userMessage = {
+  info: {
+    id: userMessageID,
+    sessionID,
+    role: "user",
+    time: { created: 1700000000000 },
+    summary: { diffs: [] },
+    agent: "build",
+    model,
+  },
+  parts: [
+    {
+      id: "prt_user_text",
+      sessionID,
+      messageID: userMessageID,
+      type: "text",
+      text: "Please edit the file.",
+    },
+  ],
+}
+
+const editPart = {
+  id: editPartID,
+  sessionID,
+  messageID: assistantMessageID,
+  type: "tool",
+  callID: "call_edit_regression",
+  tool: "edit",
+  state: {
+    status: "completed",
+    input: { filePath: "src/regression.ts" },
+    output: "Edited src/regression.ts",
+    title: "src/regression.ts",
+    metadata: {
+      filediff: {
+        file: "src/regression.ts",
+        additions: 1,
+        deletions: 1,
+        before: "export const value = 'before'\n",
+        after: "export const value = 'after'\n",
+      },
+      diff: "diff --git a/src/regression.ts b/src/regression.ts\n-export const value = 'before'\n+export const value = 'after'\n",
+    },
+    time: { start: 1700000001000, end: 1700000002000 },
+  },
+}
+
+const streamedTextPart = {
+  id: textPartID,
+  sessionID,
+  messageID: assistantMessageID,
+  type: "text",
+  text: "Streaming added a later assistant text part.",
+}
+
+const assistantMessage = {
+  info: {
+    id: assistantMessageID,
+    sessionID,
+    role: "assistant",
+    time: { created: 1700000001000 },
+    parentID: userMessageID,
+    modelID: model.modelID,
+    providerID: model.providerID,
+    mode: "build",
+    agent: "build",
+    path: { cwd: directory, root: directory },
+    cost: 0.01,
+    tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+    variant: "max",
+  },
+  parts: [editPart],
+}
+
+test.describe("regression: session timeline local row state", () => {
+  test("keeps a manually collapsed tool collapsed when later assistant content streams", async ({ page }) => {
+    const events: EventPayload[] = []
+    await mockServer(page, events)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expectSessionTitle(page, title)
+
+    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
+    await expectAppVisible(wrapper)
+    await expectExpanded(wrapper, true)
+
+    await wrapper.evaluate((element) => {
+      ;(element as HTMLElement).dataset.regressionMarker = "before-stream"
+    })
+    await wrapper.locator('[data-slot="collapsible-trigger"]').first().click()
+    await expectExpanded(wrapper, false)
+
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: streamedTextPart },
+      },
+    })
+
+    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
+
+    expect(await readToolState(page)).toEqual({
+      expanded: false,
+      row: "AssistantPart",
+      streamedTextVisible: true,
+    })
+  })
+
+  test("does not remount an edit diff when sibling parts or diff counts update", async ({ page }) => {
+    const events: EventPayload[] = []
+    await installDiffProbe(page)
+    await mockServer(page, events)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expectSessionTitle(page, title)
+
+    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
+    await expectAppVisible(wrapper)
+    await expectAppVisible(wrapper.locator('[data-component="file"][data-mode="diff"]').first())
+    await markDiffProbe(page)
+
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: streamedTextPart },
+      },
+    })
+
+    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
+    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
+
+    await markDiffProbe(page)
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: editPartWithAdditions(2) },
+      },
+    })
+
+    await expect(wrapper.locator('[data-slot="diff-changes-additions"]').filter({ hasText: "+2" }).first()).toBeVisible(
+      { timeout: 10_000 },
+    )
+    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
+  })
+})
+
+async function configurePage(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+}
+
+async function expectExpanded(locator: Locator, expected: boolean) {
+  await expect.poll(() => locator.evaluate(readExpanded)).toBe(expected)
+}
+
+async function readToolState(page: Page) {
+  return page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate(
+      (element, textPartID) => ({
+        expanded: (() => {
+          const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
+          const aria = trigger?.getAttribute("aria-expanded")
+          if (aria === "true") return true
+          if (aria === "false") return false
+
+          const root = element.querySelector('[data-component="collapsible"]')
+          if (root?.hasAttribute("data-expanded")) return true
+          if (root?.hasAttribute("data-closed")) return false
+
+          const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
+          return !!content && content.getBoundingClientRect().height > 0
+        })(),
+        row: element.closest("[data-timeline-row]")?.getAttribute("data-timeline-row"),
+        streamedTextVisible: !!document.querySelector(`[data-timeline-part-id="${textPartID}"]`),
+      }),
+      textPartID,
+    )
+}
+
+async function installDiffProbe(page: Page) {
+  await page.addInitScript(() => {
+    let shadowRootCount = 0
+    const attachShadow = Element.prototype.attachShadow
+    Element.prototype.attachShadow = function (init) {
+      shadowRootCount += 1
+      return attachShadow.call(this, init)
+    }
+    window.__timelineDiffProbe = {
+      reset: () => {
+        shadowRootCount = 0
+      },
+      shadowRoots: () => shadowRootCount,
+    }
+  })
+}
+
+async function markDiffProbe(page: Page) {
+  await page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate((element) => {
+      const tool = element as HTMLElement
+      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
+      if (!file) throw new Error("missing edit diff file")
+
+      tool.dataset.timelineProbe = "before"
+      file.dataset.timelineProbe = "before"
+      window.__timelineDiffProbe.reset()
+    })
+}
+
+async function readDiffProbe(page: Page) {
+  return page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate((element) => {
+      const tool = element as HTMLElement
+      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
+      return {
+        fileMarker: file?.dataset.timelineProbe,
+        shadowRoots: window.__timelineDiffProbe.shadowRoots(),
+        toolMarker: tool.dataset.timelineProbe,
+      }
+    })
+}
+
+function editPartWithAdditions(additions: number) {
+  return {
+    ...editPart,
+    state: {
+      ...editPart.state,
+      metadata: {
+        ...editPart.state.metadata,
+        filediff: {
+          ...editPart.state.metadata.filediff,
+          additions,
+        },
+      },
+    },
+  }
+}
+
+function readExpanded(element: Element) {
+  const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
+  const aria = trigger?.getAttribute("aria-expanded")
+  if (aria === "true") return true
+  if (aria === "false") return false
+
+  const root = element.querySelector('[data-component="collapsible"]')
+  if (root?.hasAttribute("data-expanded")) return true
+  if (root?.hasAttribute("data-closed")) return false
+
+  const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
+  return !!content && content.getBoundingClientRect().height > 0
+}
+
+async function mockServer(page: Page, events: EventPayload[]) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: project(),
+    provider: provider(),
+    sessions: [session()],
+    pageMessages: () => ({ items: [userMessage, assistantMessage] }),
+    events: () => events.splice(0),
+  })
+}
+
+function project() {
+  return {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "timeline-state-regression",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  }
+}
+
+function session() {
+  return {
+    id: sessionID,
+    slug: "timeline-state-regression",
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created: 1700000000000, updated: 1700000000000 },
+  }
+}
+
+function provider() {
+  return {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  }
+}
+
+function base64Encode(value: string) {
+  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}

packages/app/e2e/regression/session-timeline-context-resize.spec.ts

@@ -0,0 +1,268 @@
+import { expect, test, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ContextResizeRegression"
+const projectID = "proj_context_resize_regression"
+const sessionID = "ses_context_resize_regression"
+const title = "Context resize regression"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+const contextIDs = ["prt_0100_read", "prt_0101_glob", "prt_0102_grep", "prt_0103_list"]
+const followingTextID = "prt_0104_text"
+
+type Message = {
+  info: Record<string, unknown> & { id: string; role: "user" | "assistant" }
+  parts: Record<string, unknown>[]
+}
+
+const messages = [...Array.from({ length: 8 }, (_, index) => turn(index, false)).flat(), ...turn(10, true)]
+
+test.describe("regression: session timeline context group resize", () => {
+  test("remeasures a recent explored context group before the next paint", async ({ page }) => {
+    await page.setViewportSize({ width: 1400, height: 900 })
+    await mockServer(page)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expectSessionTitle(page, title)
+    await expectAppVisible(page.locator(`[data-timeline-part-ids="${contextIDs.join(",")}"]`).first())
+    await expectAppVisible(page.locator(`[data-timeline-part-id="${followingTextID}"]`).first())
+    await settle(page)
+
+    const samples = await sampleExpansion(page)
+    const visibleOverlap = samples.filter((sample) => sample.frame >= 1 && sample.overlap > 0.5)
+
+    console.log("context resize samples", JSON.stringify(samples, null, 2))
+
+    expect(samples[0]?.overlap).toBe(0)
+    expect(visibleOverlap).toEqual([])
+    expect(samples.at(-1)?.expanded).toBe("true")
+  })
+})
+
+async function configurePage(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+}
+
+async function sampleExpansion(page: Page) {
+  return page.evaluate(
+    ({ contextIDs, followingTextID }) =>
+      new Promise<
+        {
+          frame: number
+          label: string
+          scrollTop: number
+          scrollHeight: number
+          contextBottom: number
+          textTop: number
+          overlap: number
+          gap: number
+          expanded: string | null
+        }[]
+      >((resolve) => {
+        const context = document.querySelector<HTMLElement>(`[data-timeline-part-ids="${contextIDs.join(",")}"]`)
+        const text = document.querySelector<HTMLElement>(`[data-timeline-part-id="${followingTextID}"]`)
+        const scroller = context?.closest<HTMLElement>(".scroll-view__viewport")
+        const trigger = context?.querySelector<HTMLElement>('[data-slot="collapsible-trigger"]')
+        const contextRow = context?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
+        const textRow = text?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
+        if (!context || !text || !scroller || !trigger || !contextRow || !textRow)
+          throw new Error("missing regression nodes")
+
+        scroller.scrollTop = scroller.scrollHeight
+        const samples: {
+          frame: number
+          label: string
+          scrollTop: number
+          scrollHeight: number
+          contextBottom: number
+          textTop: number
+          overlap: number
+          gap: number
+          expanded: string | null
+        }[] = []
+        const capture = (frame: number, label: string) => {
+          const contextRect = contextRow.getBoundingClientRect()
+          const textRect = textRow.getBoundingClientRect()
+          samples.push({
+            frame,
+            label,
+            scrollTop: Math.round(scroller.scrollTop * 10) / 10,
+            scrollHeight: Math.round(scroller.scrollHeight * 10) / 10,
+            contextBottom: Math.round(contextRect.bottom * 10) / 10,
+            textTop: Math.round(textRect.top * 10) / 10,
+            overlap: Math.max(0, Math.round((contextRect.bottom - textRect.top) * 10) / 10),
+            gap: Math.max(0, Math.round((textRect.top - contextRect.bottom) * 10) / 10),
+            expanded: trigger.getAttribute("aria-expanded"),
+          })
+        }
+
+        capture(-1, "before")
+        trigger.click()
+        capture(0, "sync-after-click")
+
+        let frame = 1
+        const tick = () => {
+          capture(frame, "raf")
+          frame += 1
+          if (frame > 8) {
+            resolve(samples)
+            return
+          }
+          requestAnimationFrame(tick)
+        }
+        requestAnimationFrame(tick)
+      }),
+    { contextIDs, followingTextID },
+  )
+}
+
+function turn(index: number, target: boolean): Message[] {
+  const userID = id("msg_user", index)
+  const assistantID = id("msg_assistant", index)
+  return [
+    {
+      info: {
+        id: userID,
+        sessionID,
+        role: "user",
+        time: { created: 1700000000000 + index * 10_000 },
+        summary: { diffs: [] },
+        agent: "build",
+        model,
+      },
+      parts: [{ id: id("prt_user", index), sessionID, messageID: userID, type: "text", text: `User message ${index}` }],
+    },
+    {
+      info: {
+        id: assistantID,
+        sessionID,
+        role: "assistant",
+        time: { created: 1700000000000 + index * 10_000 + 1_000, completed: 1700000000000 + index * 10_000 + 2_000 },
+        parentID: userID,
+        modelID: model.modelID,
+        providerID: model.providerID,
+        mode: "build",
+        agent: "build",
+        path: { cwd: directory, root: directory },
+        cost: 0.01,
+        tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+        variant: "max",
+        finish: "stop",
+      },
+      parts: target
+        ? [
+            contextTool(contextIDs[0]!, assistantID, "read", { filePath: "src/recent-a.ts", offset: 0, limit: 120 }),
+            contextTool(contextIDs[1]!, assistantID, "glob", { path: directory, pattern: "**/*.ts" }),
+            contextTool(contextIDs[2]!, assistantID, "grep", { path: directory, pattern: "Explored", include: "*.ts" }),
+            contextTool(contextIDs[3]!, assistantID, "list", { path: "src" }),
+            {
+              id: followingTextID,
+              sessionID,
+              messageID: assistantID,
+              type: "text",
+              text: "This assistant text is immediately after the explored context group.",
+            },
+          ]
+        : [
+            {
+              id: id("prt_text", index),
+              sessionID,
+              messageID: assistantID,
+              type: "text",
+              text: `Assistant filler ${index}. ${"filler ".repeat(60)}`,
+            },
+          ],
+    },
+  ]
+}
+
+function contextTool(partID: string, messageID: string, tool: string, input: Record<string, unknown>) {
+  return {
+    id: partID,
+    sessionID,
+    messageID,
+    type: "tool",
+    callID: `call_${partID}`,
+    tool,
+    state: {
+      status: "completed",
+      input,
+      output: `Completed ${tool}.\n${"detail line\n".repeat(8)}`,
+      title: input.filePath || input.path || input.pattern || "completed",
+      metadata: {},
+      time: { start: 1700000000000, end: 1700000000100 },
+    },
+  }
+}
+
+async function mockServer(page: Page) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: project(),
+    provider: provider(),
+    sessions: [session()],
+    pageMessages: () => ({ items: messages }),
+  })
+}
+
+async function settle(page: Page) {
+  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))
+}
+
+function id(prefix: string, index: number) {
+  return `${prefix}_${String(index).padStart(4, "0")}`
+}
+
+function project() {
+  return {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "context-resize-regression",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  }
+}
+
+function session() {
+  return {
+    id: sessionID,
+    slug: "context-resize-regression",
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created: 1700000000000, updated: 1700000000000 },
+  }
+}
+
+function provider() {
+  return {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  }
+}
+
+function base64Encode(value: string) {
+  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}

packages/app/e2e/smoke/session-timeline.fixture.ts

@@ -0,0 +1,314 @@
+const words = [
+  "alpha",
+  "bravo",
+  "charlie",
+  "delta",
+  "echo",
+  "foxtrot",
+  "golf",
+  "hotel",
+  "india",
+  "juliet",
+  "kilo",
+  "lima",
+  "metro",
+  "nova",
+  "orbit",
+  "pixel",
+  "quartz",
+  "river",
+  "signal",
+  "vector",
+]
+
+const sourceID = "ses_smoke_source"
+const targetID = "ses_smoke_target"
+const directory = "C:/OpenCode/SmokeProject"
+const projectID = "proj_smoke_timeline"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+
+type MessageInfo = Record<string, unknown> & { id: string; role: "user" | "assistant" }
+type MessagePart = Record<string, unknown> & { id: string; type: string; text?: string; tool?: string }
+type Message = { info: MessageInfo; parts: MessagePart[] }
+
+function lorem(seed: number, length: number) {
+  let out = ""
+  let i = seed
+  while (out.length < length) {
+    const word = words[i % words.length]
+    out += (out ? " " : "") + word
+    if (i % 17 === 0) out += ".\n\n"
+    i += 7
+  }
+  return out.slice(0, length)
+}
+
+function id(prefix: string, value: number) {
+  return `${prefix}_smoke_${String(value).padStart(4, "0")}`
+}
+
+function userMessage(sessionID: string, index: number, textLength: number, diffs: unknown[] = []): Message {
+  const messageID = id("msg_user", index)
+  return {
+    info: {
+      id: messageID,
+      sessionID,
+      role: "user",
+      time: { created: 1700000000000 + index * 10_000 },
+      summary: { diffs },
+      agent: "build",
+      model,
+    },
+    parts: [
+      {
+        id: id("prt_user_text", index),
+        sessionID,
+        messageID,
+        type: "text",
+        text: lorem(index, textLength),
+      },
+    ],
+  }
+}
+
+function assistantMessage(sessionID: string, index: number, parentID: string, parts: MessagePart[]): Message {
+  const messageID = id("msg_assistant", index)
+  return {
+    info: {
+      id: messageID,
+      sessionID,
+      role: "assistant",
+      time: { created: 1700000000000 + index * 10_000 + 1_000, completed: 1700000000000 + index * 10_000 + 8_000 },
+      parentID,
+      modelID: model.modelID,
+      providerID: model.providerID,
+      mode: "build",
+      agent: "build",
+      path: { cwd: directory, root: directory },
+      cost: 0.01,
+      tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+      variant: "max",
+      finish: "stop",
+    },
+    parts: parts.map((part) => ({
+      ...part,
+      sessionID,
+      messageID,
+    })),
+  }
+}
+
+function textPart(index: number, partIndex: number, length: number): MessagePart {
+  return { id: id(`prt_text_${partIndex}`, index), type: "text", text: lorem(index * 13 + partIndex, length) }
+}
+
+function reasoningPart(index: number, partIndex: number, length: number): MessagePart {
+  return {
+    id: id(`prt_reasoning_${partIndex}`, index),
+    type: "reasoning",
+    text: lorem(index * 19 + partIndex, length),
+    time: { start: 1700000000000 + index * 10_000, end: 1700000000000 + index * 10_000 + 500 },
+  }
+}
+
+function toolPart(
+  index: number,
+  partIndex: number,
+  tool: string,
+  input: Record<string, unknown>,
+  outputLength = 160,
+): MessagePart {
+  const metadata =
+    tool === "apply_patch"
+      ? { files: [patchFile(index, "update"), patchFile(index + 1, index % 2 === 0 ? "add" : "delete")] }
+      : tool === "edit" || tool === "write"
+        ? {
+            filediff: fileDiff(String(input.filePath ?? `src/generated/file-${index}.ts`), index),
+            diff: patch(index, outputLength),
+            preview: patch(index + 1, 420),
+          }
+        : tool === "question"
+          ? { answers: [["Proceed"], ["Keep sample output"]] }
+          : {}
+  return {
+    id: id(`prt_tool_${tool}_${partIndex}`, index),
+    type: "tool",
+    callID: id("call", index * 10 + partIndex),
+    tool,
+    state: {
+      status: "completed",
+      input,
+      output: lorem(index * 23 + partIndex, outputLength),
+      title: tool === "bash" ? "Verify generated output" : input.filePath || input.path || input.pattern || "completed",
+      metadata,
+      time: { start: 1700000000000 + index * 10_000, end: 1700000000000 + index * 10_000 + 400 },
+    },
+  }
+}
+
+function patchFile(seed: number, type: "add" | "update" | "delete") {
+  return {
+    filePath: `src/generated/patch-${seed}.ts`,
+    relativePath: `src/generated/patch-${seed}.ts`,
+    type,
+    additions: (seed % 7) + 1,
+    deletions: type === "add" ? 0 : seed % 4,
+    patch: patch(seed, 520),
+    before: type === "add" ? undefined : code(seed, 18),
+    after: type === "delete" ? undefined : code(seed + 1, 24),
+  }
+}
+
+function fileDiff(file: string, seed: number) {
+  return {
+    file,
+    additions: (seed % 9) + 1,
+    deletions: seed % 4,
+    before: code(seed, 32),
+    after: code(seed + 1, 38),
+  }
+}
+
+function patch(seed: number, length: number) {
+  return `diff --git a/src/generated/file-${seed}.ts b/src/generated/file-${seed}.ts\n+${lorem(seed, length).replace(/\n/g, "\n+")}`
+}
+
+function code(seed: number, lines: number) {
+  return Array.from({ length: lines }, (_, index) => `export const value${index} = "${lorem(seed + index, 32)}"`).join(
+    "\n",
+  )
+}
+
+function turn(index: number): Message[] {
+  const diff = index % 9 === 0 ? [fileDiff(`src/generated/summary-${index}.ts`, index)] : []
+  const user = userMessage(targetID, index, 100 + (index % 4) * 80, diff)
+  const parts = [
+    ...(index % 5 === 0 ? [reasoningPart(index, 0, 420)] : []),
+    ...(index % 3 === 0
+      ? [
+          toolPart(index, 0, "read", { filePath: `src/generated/file-${index}.ts`, offset: 0, limit: 80 }, 220),
+          toolPart(index, 5, "glob", { path: directory, pattern: `**/*sample-${index}*.ts` }, 140),
+          toolPart(index, 1, "grep", { path: directory, pattern: `sample-${index}`, include: "*.ts" }, 180),
+          toolPart(index, 6, "list", { path: `src/generated/${index}` }, 120),
+        ]
+      : []),
+    textPart(index, 2, 160 + (index % 6) * 90),
+    ...(index % 4 === 0 ? [toolPart(index, 3, "edit", { filePath: `src/generated/file-${index}.ts` }, 700)] : []),
+    ...(index % 6 === 0
+      ? [toolPart(index, 7, "write", { filePath: `src/generated/write-${index}.ts`, content: code(index, 28) }, 560)]
+      : []),
+    ...(index % 8 === 0
+      ? [toolPart(index, 8, "apply_patch", { files: [`src/generated/patch-${index}.ts`] }, 620)]
+      : []),
+    ...(index % 7 === 0
+      ? [toolPart(index, 4, "bash", { command: "bun typecheck", description: "Verify generated output" }, 620)]
+      : []),
+    ...(index % 10 === 0 ? [toolPart(index, 9, "webfetch", { url: "https://example.com/docs/sample" }, 120)] : []),
+    ...(index % 11 === 0 ? [toolPart(index, 10, "websearch", { query: "sample movement notes" }, 240)] : []),
+    ...(index % 13 === 0
+      ? [
+          toolPart(
+            index,
+            11,
+            "question",
+            { questions: [{ question: "Use generated fixture?" }, { question: "Keep same row shape?" }] },
+            120,
+          ),
+        ]
+      : []),
+    ...(index % 17 === 0
+      ? [toolPart(index, 12, "task", { description: "Inspect generated fixture", subagent_type: "explore" }, 160)]
+      : []),
+  ]
+  return [user, assistantMessage(targetID, index, user.info.id, parts)]
+}
+
+const targetMessages = Array.from({ length: 72 }, (_, index) => turn(index)).flat()
+const sourceMessages = Array.from({ length: 12 }, (_, index) => [
+  userMessage(sourceID, index + 1000, 120),
+  assistantMessage(sourceID, index + 1000, id("msg_user", index + 1000), [textPart(index + 1000, 0, 240)]),
+]).flat()
+
+function renderable(part: MessagePart) {
+  if (part.type === "tool" && part.tool === "todowrite") return false
+  if (part.type === "text") return !!part.text.trim()
+  if (part.type === "reasoning") return !!part.text.trim()
+  return part.type !== "step-start" && part.type !== "step-finish" && part.type !== "patch"
+}
+
+function orderedParts(message: Message) {
+  return message.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
+}
+
+export const fixture = {
+  directory,
+  project: {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "smoke-project",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  },
+  provider: {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  },
+  sessions: [
+    {
+      id: sourceID,
+      slug: "source",
+      projectID,
+      directory,
+      title: "Uncommitted changes inquiry",
+      version: "dev",
+      time: { created: 1700000000000, updated: 1700000000000 },
+    },
+    {
+      id: targetID,
+      slug: "target",
+      projectID,
+      directory,
+      title: "Example Game: sample jump movement & sample physics analysis",
+      version: "dev",
+      time: { created: 1700000001000, updated: 1700000001000 },
+    },
+  ],
+  sourceID,
+  targetID,
+  messages: { [sourceID]: sourceMessages, [targetID]: targetMessages },
+  expected: {
+    sourceTitle: "Uncommitted changes inquiry",
+    targetTitle: "Example Game: sample jump movement & sample physics analysis",
+    targetMessageIDs: targetMessages
+      .filter((message) => message.info.role === "user")
+      .map((message) => message.info.id),
+    targetPartIDs: targetMessages.flatMap((message) =>
+      orderedParts(message)
+        .filter(renderable)
+        .map((part) => part.id),
+    ),
+  },
+}
+
+export function pageMessages(sessionID: string, limit: number, before?: string) {
+  const messages = fixture.messages[sessionID as keyof typeof fixture.messages] ?? []
+  const end = before
+    ? Math.max(
+        0,
+        messages.findIndex((message) => message.info.id === before),
+      )
+    : messages.length
+  const start = Math.max(0, end - limit)
+  return {
+    items: messages.slice(start, end),
+    cursor: start > 0 ? messages[start]!.info.id : undefined,
+  }
+}

packages/app/e2e/smoke/session-timeline.spec.ts

@@ -0,0 +1,432 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { fixture, pageMessages } from "./session-timeline.fixture"
+import { trackPageErrors, expectNoSmokeErrors } from "../utils/errors"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { APP_READY_TIMEOUT, expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const forbiddenText = ["Load details", "Show earlier steps"]
+
+type SmokeState = {
+  ids: string[]
+  visibleIds: string[]
+  messageIds: string[]
+  visibleMessageIds: string[]
+  topVisibleId?: string
+  signature: string
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+  errorToasts: string[]
+  forbiddenText: string[]
+}
+
+type SmokeWindow = Window & {
+  __timelineSmokeState?: () => SmokeState
+  __timelineSmokeErrorToasts?: string[]
+  __timelineSmokeForbiddenText?: string[]
+}
+
+test.describe("smoke: session timeline", () => {
+  test.setTimeout(240_000)
+
+  test("renders seeded timeline in order while paging through history", async ({ page }) => {
+    const errors = trackPageErrors(page)
+    await mockOpenCodeServer(page, {
+      sessions: fixture.sessions,
+      provider: fixture.provider,
+      directory: fixture.directory,
+      project: fixture.project,
+      pageMessages,
+    })
+    await configureSmokePage(page, fixture.directory)
+
+    await selectHomeProject(page, fixture.project.name)
+    await navigateToSession(page, fixture.directory, fixture.sourceID, fixture.expected.sourceTitle)
+    await expectSessionReady(page)
+    await navigateToSession(page, fixture.directory, fixture.targetID, fixture.expected.targetTitle)
+    const expectedPartIDs = fixture.expected.targetPartIDs
+    const expectedMessageIDs = fixture.expected.targetMessageIDs
+    await expectSessionTimelineReady(page, expectedPartIDs, expectedMessageIDs, errors)
+    await expectCanScrollToStart(page, expectedPartIDs, expectedMessageIDs, errors)
+  })
+})
+
+async function configureSmokePage(page: Page, directory: string) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+
+  await page.addInitScript((directory) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({
+        projects: {
+          local: [{ worktree: directory, expanded: true }],
+        },
+        lastProject: {
+          local: directory,
+        },
+      }),
+    )
+  }, directory)
+
+  await page.addInitScript(() => {
+    const smoke = window as SmokeWindow
+    smoke.__timelineSmokeErrorToasts = []
+    smoke.__timelineSmokeForbiddenText = []
+    const partSelector = "[data-timeline-part-id], [data-timeline-part-ids]"
+    const idsOf = (el: HTMLElement) =>
+      [el.dataset.timelinePartId, ...(el.dataset.timelinePartIds?.split(",") ?? [])].filter((id): id is string => !!id)
+
+    smoke.__timelineSmokeState = () => {
+      const scroller = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((el) =>
+        el.querySelector("[data-timeline-row], [data-session-title]"),
+      )
+      if (!scroller) {
+        return {
+          ids: [],
+          visibleIds: [],
+          messageIds: [],
+          visibleMessageIds: [],
+          topVisibleId: undefined,
+          signature: "",
+          scrollTop: 0,
+          scrollHeight: 0,
+          clientHeight: 0,
+          errorToasts: smoke.__timelineSmokeErrorToasts ?? [],
+          forbiddenText: smoke.__timelineSmokeForbiddenText ?? [],
+        }
+      }
+
+      const ids: string[] = []
+      const visibleIds: string[] = []
+      const scrollerRect = scroller.getBoundingClientRect()
+      let topVisibleId: string | undefined
+      for (const el of scroller.querySelectorAll<HTMLElement>(partSelector)) {
+        const next = idsOf(el)
+        ids.push(...next)
+
+        const rect = el.getBoundingClientRect()
+        if (rect.bottom >= scrollerRect.top && rect.top <= scrollerRect.bottom) {
+          if (!topVisibleId) topVisibleId = next[0]
+          visibleIds.push(...next)
+        }
+      }
+
+      const messageIds: string[] = []
+      const visibleMessageIds: string[] = []
+      const rows = [...scroller.querySelectorAll<HTMLElement>("[data-message-id]")].map((el) => {
+        const rect = el.getBoundingClientRect()
+        const id = el.dataset.messageId
+        if (id) {
+          messageIds.push(id)
+          if (rect.bottom >= scrollerRect.top && rect.top <= scrollerRect.bottom) visibleMessageIds.push(id)
+        }
+        return {
+          id,
+          top: Math.round(rect.top),
+          bottom: Math.round(rect.bottom),
+        }
+      })
+      const signature = JSON.stringify({
+        top: Math.round(scroller.scrollTop),
+        height: Math.round(scroller.scrollHeight),
+        rows,
+        ids,
+      })
+
+      return {
+        ids,
+        visibleIds,
+        messageIds,
+        visibleMessageIds,
+        topVisibleId,
+        signature,
+        scrollTop: Math.round(scroller.scrollTop),
+        scrollHeight: Math.round(scroller.scrollHeight),
+        clientHeight: Math.round(scroller.clientHeight),
+        errorToasts: smoke.__timelineSmokeErrorToasts ?? [],
+        forbiddenText: smoke.__timelineSmokeForbiddenText ?? [],
+      }
+    }
+    let recordFrame: number | undefined
+    const record = () => {
+      for (const toast of document.querySelectorAll<HTMLElement>('[data-component="toast"][data-variant="error"]')) {
+        const text = toast.textContent?.trim()
+        if (text && !smoke.__timelineSmokeErrorToasts!.includes(text)) smoke.__timelineSmokeErrorToasts!.push(text)
+      }
+      const text = document.body?.textContent ?? ""
+      for (const value of ["Load details", "Show earlier steps"]) {
+        if (text.includes(value) && !smoke.__timelineSmokeForbiddenText!.includes(value)) {
+          smoke.__timelineSmokeForbiddenText!.push(value)
+        }
+      }
+    }
+    const start = () => {
+      const root = document.documentElement ?? document.body
+      if (!root) return
+      new MutationObserver(() => {
+        if (recordFrame) return
+        recordFrame = requestAnimationFrame(() => {
+          recordFrame = undefined
+          record()
+        })
+      }).observe(root, { childList: true, subtree: true })
+      record()
+    }
+    if (document.documentElement ?? document.body) start()
+    else document.addEventListener("DOMContentLoaded", start, { once: true })
+  })
+}
+
+async function expectCanScrollToStart(
+  page: Page,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  errors: string[],
+) {
+  await pointAtTimeline(page)
+  const seenParts = new Set<string>()
+  const seenMessages = new Set<string>()
+  const samples: TraversalSample[] = []
+  let current = await timelineState(page)
+  let unchangedAtTop = 0
+
+  for (let attempt = 0; attempt < 600; attempt++) {
+    collectSeen(current, seenParts, seenMessages)
+    samples.push(sampleTraversal(current, seenParts.size, seenMessages.size))
+    expectNoSmokeErrors(errors, current.errorToasts, current.forbiddenText)
+    expectOrderedIDs(expectedPartIDs, current.ids, "mounted part")
+    expectOrderedIDs(expectedPartIDs, current.visibleIds, "visible part")
+    expectOrderedIDs(expectedMessageIDs, unique(current.messageIds), "mounted message")
+    expectOrderedIDs(expectedMessageIDs, unique(current.visibleMessageIds), "visible message")
+
+    if (
+      current.scrollTop <= 1 &&
+      seenParts.size === expectedPartIDs.length &&
+      seenMessages.size === expectedMessageIDs.length
+    ) {
+      expectCompleteScroll(current, expectedPartIDs, expectedMessageIDs, seenParts, seenMessages, samples)
+      return
+    }
+
+    const before = current
+    const changed = await scrollTimelineUp(page, current)
+    current = await timelineState(page)
+    if (!changed && current.signature === before.signature && current.scrollTop <= 1) unchangedAtTop++
+    else unchangedAtTop = 0
+    if (unchangedAtTop >= 2) break
+  }
+
+  collectSeen(current, seenParts, seenMessages)
+  samples.push(sampleTraversal(current, seenParts.size, seenMessages.size))
+  expectCompleteScroll(current, expectedPartIDs, expectedMessageIDs, seenParts, seenMessages, samples)
+}
+
+async function timelineState(page: Page) {
+  return page.evaluate(
+    () =>
+      (window as SmokeWindow).__timelineSmokeState?.() ?? {
+        ids: [],
+        visibleIds: [],
+        messageIds: [],
+        visibleMessageIds: [],
+        topVisibleId: undefined,
+        signature: "",
+        scrollTop: 0,
+        scrollHeight: 0,
+        clientHeight: 0,
+        errorToasts: [],
+        forbiddenText: [],
+      },
+  )
+}
+
+function timelineScroller(page: Page) {
+  return page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+}
+
+async function pointAtTimeline(page: Page) {
+  const box = await timelineScroller(page).boundingBox()
+  if (!box) throw new Error("Timeline scroller is not visible")
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+}
+
+async function scrollTimelineUp(page: Page, before: SmokeState) {
+  return page.evaluate(
+    (prev) =>
+      new Promise<boolean>((resolve) => {
+        const scroller = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((el) =>
+          el.querySelector("[data-timeline-row], [data-session-title]"),
+        )
+        if (!scroller) {
+          resolve(false)
+          return
+        }
+
+        scroller.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1, deltaMode: 0 }))
+        scroller.scrollTop = Math.max(0, scroller.scrollTop - Math.max(80, Math.round(scroller.clientHeight * 0.45)))
+
+        const read = () => (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+        let frames = 0
+        let stableFrames = 0
+        let last = ""
+        let changed = false
+        const check = () => {
+          const current = read()
+          if (current !== prev) changed = true
+          if (current === last) stableFrames++
+          else {
+            stableFrames = 0
+            last = current
+          }
+          if (changed && stableFrames >= 2) {
+            resolve(true)
+            return
+          }
+          frames++
+          if (frames >= 30) {
+            resolve(changed)
+            return
+          }
+          requestAnimationFrame(check)
+        }
+        requestAnimationFrame(check)
+      }),
+    before.signature,
+  )
+}
+
+function expectOrderedIDs(expected: string[], actual: string[], label: string) {
+  expect(actual.length, `${label} ids should not be empty`).toBeGreaterThan(0)
+  const actualSet = new Set(actual)
+  expect(actual, `${label} ids`).toEqual(expected.filter((id) => actualSet.has(id)))
+}
+
+function unique(values: string[]) {
+  return values.filter((value, index) => values.indexOf(value) === index)
+}
+
+function collectSeen(state: SmokeState, seenParts: Set<string>, seenMessages: Set<string>) {
+  for (const id of state.ids) seenParts.add(id)
+  for (const id of state.visibleIds) seenParts.add(id)
+  for (const id of state.messageIds) seenMessages.add(id)
+  for (const id of state.visibleMessageIds) seenMessages.add(id)
+}
+
+type TraversalSample = ReturnType<typeof sampleTraversal>
+
+function sampleTraversal(state: SmokeState, seenParts: number, seenMessages: number) {
+  return {
+    seenParts,
+    seenMessages,
+    mounted: state.ids.length,
+    visible: state.visibleIds.length,
+    mountedMessages: unique(state.messageIds).length,
+    visibleMessages: unique(state.visibleMessageIds).length,
+    top: state.scrollTop,
+    height: state.scrollHeight,
+    first: state.ids[0],
+    last: state.ids.at(-1),
+    topVisible: state.topVisibleId,
+    visibleFirst: state.visibleIds[0],
+    visibleLast: state.visibleIds.at(-1),
+  }
+}
+
+function sampleSummary(samples: TraversalSample[]) {
+  return samples
+    .filter((_, index) => index % Math.max(1, Math.floor(samples.length / 8)) === 0 || index === samples.length - 1)
+    .map(
+      (sample, index) =>
+        `${index}: seenParts=${sample.seenParts} seenMessages=${sample.seenMessages} mounted=${sample.mounted}/${sample.mountedMessages} visible=${sample.visible}/${sample.visibleMessages} top=${sample.top}/${sample.height} first=${sample.first} last=${sample.last} topVisible=${sample.topVisible} visible=${sample.visibleFirst}..${sample.visibleLast}`,
+    )
+    .join("\n")
+}
+
+async function waitForTimelineStable(page: Page) {
+  await page.waitForFunction(
+    () =>
+      new Promise<boolean>((resolve) => {
+        requestAnimationFrame(() => {
+          const a = (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+          requestAnimationFrame(() => {
+            const b = (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+            requestAnimationFrame(() =>
+              resolve(!!a && a === b && b === ((window as SmokeWindow).__timelineSmokeState?.().signature ?? "")),
+            )
+          })
+        })
+      }),
+  )
+}
+
+async function expectSessionTimelineReady(
+  page: Page,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  errors: string[],
+) {
+  await waitForTimelineStable(page)
+  for (const text of forbiddenText) await expect(page.getByText(text)).toHaveCount(0)
+  const currentState = await timelineState(page)
+  expectNoSmokeErrors(errors, currentState.errorToasts, currentState.forbiddenText)
+  expectOrderedIDs(expectedPartIDs, currentState.ids, "mounted part")
+  expectOrderedIDs(expectedPartIDs, currentState.visibleIds, "visible part")
+  expectOrderedIDs(expectedMessageIDs, unique(currentState.messageIds), "mounted message")
+  expectOrderedIDs(expectedMessageIDs, unique(currentState.visibleMessageIds), "visible message")
+}
+
+function expectCompleteScroll(
+  state: SmokeState,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  seenParts: Set<string>,
+  seenMessages: Set<string>,
+  samples: TraversalSample[],
+) {
+  expect(state.scrollTop, `timeline should reach the start\n${sampleSummary(samples)}`).toBeLessThanOrEqual(1)
+  expect(
+    expectedPartIDs.filter((id) => !seenParts.has(id)),
+    `missing visible timeline parts\n${sampleSummary(samples)}`,
+  ).toEqual([])
+  expect(
+    expectedMessageIDs.filter((id) => !seenMessages.has(id)),
+    `missing visible messages\n${sampleSummary(samples)}`,
+  ).toEqual([])
+  expect(new Set(expectedPartIDs).size).toBe(expectedPartIDs.length)
+  expect(new Set(expectedMessageIDs).size).toBe(expectedMessageIDs.length)
+  expect(expectedPartIDs.length).toBe(331)
+}
+
+async function selectHomeProject(page: Page, projectName: string) {
+  await page.goto("/")
+  const row = page
+    .locator('[data-component="home-project-row"]')
+    .filter({ hasText: new RegExp(projectName, "i") })
+    .first()
+  await expectAppVisible(row)
+  await row.click()
+  await expect(row).toHaveAttribute("data-selected", "", { timeout: APP_READY_TIMEOUT })
+  await expect(page).toHaveURL(/\/$/)
+}
+
+async function navigateToSession(page: Page, directory: string, sessionId: string, expectedTitle: string) {
+  await page.goto(`/${base64Encode(directory)}/session/${sessionId}`)
+  await expectSessionTitle(page, expectedTitle)
+}
+
+async function expectSessionReady(page: Page) {
+  await expectAppVisible(page.getByRole("textbox", { name: /Ask anything/i }))
+}

packages/app/e2e/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "..",
+    "types": ["node", "bun"]
+  },
+  "include": ["./**/*.ts"]
+}

packages/app/e2e/utils/errors.ts

@@ -0,0 +1,18 @@
+import { expect, type Page } from "@playwright/test"
+
+export function trackPageErrors(page: Page) {
+  const errors: string[] = []
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text())
+  })
+  page.on("pageerror", (error) => errors.push(error.stack ?? error.message))
+  return errors
+}
+
+export function expectNoSmokeErrors(consoleErrors: string[], toastErrors: string[], forbiddenText: string[]) {
+  expect({ consoleErrors, toastErrors, forbiddenText }).toEqual({
+    consoleErrors: [],
+    toastErrors: [],
+    forbiddenText: [],
+  })
+}

packages/app/e2e/utils/mock-server.ts

@@ -0,0 +1,92 @@
+import type { Page, Route } from "@playwright/test"
+
+const emptyList = new Set([
+  "/skill",
+  "/command",
+  "/lsp",
+  "/formatter",
+  "/permission",
+  "/question",
+  "/vcs/status",
+  "/vcs/diff",
+])
+const emptyObject = new Set(["/global/config", "/config", "/provider/auth", "/mcp", "/session/status"])
+
+export interface MockServerConfig {
+  provider: unknown
+  directory: string
+  project: unknown
+  sessions: ({ id: string } & Record<string, unknown>)[]
+  pageMessages: (sessionId: string, limit: number, before?: string) => { items: unknown[]; cursor?: string }
+  events?: () => unknown[]
+}
+
+export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
+  const staticRoutes: Record<string, unknown> = {
+    "/provider": config.provider,
+    "/path": {
+      state: config.directory,
+      config: config.directory,
+      worktree: config.directory,
+      directory: config.directory,
+      home: "C:/OpenCode",
+    },
+    "/project": [config.project],
+    "/project/current": config.project,
+    "/agent": [{ name: "build", mode: "primary" }],
+    "/vcs": { branch: "main", default_branch: "main" },
+    "/session": config.sessions,
+  }
+
+  await page.route("**/*", async (route) => {
+    const url = new URL(route.request().url())
+    const targetPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+    if (url.port !== targetPort) return route.fallback()
+
+    const path = url.pathname
+    if (path === "/global/event" || path === "/event") return sse(route, config.events?.())
+    if (path === "/global/health") return json(route, { healthy: true })
+    if (emptyObject.has(path)) return json(route, {})
+    if (emptyList.has(path)) return json(route, [])
+    if (path in staticRoutes) return json(route, staticRoutes[path])
+
+    const sessionMatch = path.match(/^\/session\/([^/]+)$/)
+    if (sessionMatch) {
+      const session = config.sessions.find((s) => s.id === sessionMatch[1])
+      return json(route, session ?? {})
+    }
+
+    if (/^\/session\/[^/]+\/(children|todo|diff)$/.test(path)) return json(route, [])
+
+    const messagesMatch = path.match(/^\/session\/([^/]+)\/message$/)
+    if (messagesMatch) {
+      const limit = Number(url.searchParams.get("limit") ?? 80)
+      const before = url.searchParams.get("before") ?? undefined
+      const pageData = config.pageMessages(messagesMatch[1], limit, before)
+      return json(route, pageData.items, pageData.cursor ? { "x-next-cursor": pageData.cursor } : undefined)
+    }
+
+    return json(route, {})
+  })
+}
+
+function json(route: Route, body: unknown, headers?: Record<string, string>) {
+  return route.fulfill({
+    status: 200,
+    contentType: "application/json",
+    headers: {
+      "access-control-allow-origin": "*",
+      "access-control-expose-headers": "x-next-cursor",
+      ...headers,
+    },
+    body: JSON.stringify(body ?? null),
+  })
+}
+
+function sse(route: Route, events?: unknown[]) {
+  return route.fulfill({
+    status: 200,
+    contentType: "text/event-stream",
+    body: events?.map((event) => `data: ${JSON.stringify(event)}\n\n`).join("") || ": ok\n\n",
+  })
+}

packages/app/e2e/utils/waits.ts

@@ -0,0 +1,11 @@
+import { expect, type Locator, type Page } from "@playwright/test"
+
+export const APP_READY_TIMEOUT = 30_000
+
+export async function expectAppVisible(locator: Locator) {
+  await expect(locator).toBeVisible({ timeout: APP_READY_TIMEOUT })
+}
+
+export async function expectSessionTitle(page: Page, title: string) {
+  await expectAppVisible(page.getByRole("heading", { name: title }))
+}

packages/app/happydom.ts

@@ -0,0 +1,75 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator"
+
+GlobalRegistrator.register()
+
+const originalGetContext = HTMLCanvasElement.prototype.getContext
+// @ts-expect-error - we're overriding with a simplified mock
+HTMLCanvasElement.prototype.getContext = function (contextType: string, _options?: unknown) {
+  if (contextType === "2d") {
+    return {
+      canvas: this,
+      fillStyle: "#000000",
+      strokeStyle: "#000000",
+      font: "12px monospace",
+      textAlign: "start",
+      textBaseline: "alphabetic",
+      globalAlpha: 1,
+      globalCompositeOperation: "source-over",
+      imageSmoothingEnabled: true,
+      lineWidth: 1,
+      lineCap: "butt",
+      lineJoin: "miter",
+      miterLimit: 10,
+      shadowBlur: 0,
+      shadowColor: "rgba(0, 0, 0, 0)",
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      fillRect: () => {},
+      strokeRect: () => {},
+      clearRect: () => {},
+      fillText: () => {},
+      strokeText: () => {},
+      measureText: (text: string) => ({ width: text.length * 8 }),
+      drawImage: () => {},
+      save: () => {},
+      restore: () => {},
+      scale: () => {},
+      rotate: () => {},
+      translate: () => {},
+      transform: () => {},
+      setTransform: () => {},
+      resetTransform: () => {},
+      createLinearGradient: () => ({ addColorStop: () => {} }),
+      createRadialGradient: () => ({ addColorStop: () => {} }),
+      createPattern: () => null,
+      beginPath: () => {},
+      closePath: () => {},
+      moveTo: () => {},
+      lineTo: () => {},
+      bezierCurveTo: () => {},
+      quadraticCurveTo: () => {},
+      arc: () => {},
+      arcTo: () => {},
+      ellipse: () => {},
+      rect: () => {},
+      fill: () => {},
+      stroke: () => {},
+      clip: () => {},
+      isPointInPath: () => false,
+      isPointInStroke: () => false,
+      getTransform: () => ({}),
+      getImageData: () => ({
+        data: new Uint8ClampedArray(0),
+        width: 0,
+        height: 0,
+      }),
+      putImageData: () => {},
+      createImageData: () => ({
+        data: new Uint8ClampedArray(0),
+        width: 0,
+        height: 0,
+      }),
+    } as unknown as CanvasRenderingContext2D
+  }
+  return originalGetContext.call(this, contextType as "2d", _options)
+}

packages/app/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" style="background-color: var(--background-base)">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
+    <title>OpenCode</title>
+    <link rel="icon" type="image/png" href="/favicon-96x96-v3.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-v3.svg" />
+    <link rel="shortcut icon" href="/favicon-v3.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="theme-color" content="#F8F7F7" />
+    <meta property="og:image" content="/social-share.png" />
+    <meta property="twitter:image" content="/social-share.png" />
+    <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
+  </head>
+  <body class="antialiased overscroll-none text-12-regular overflow-hidden">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="flex flex-col h-dvh p-px"></div>
+    <script src="/src/entry.tsx" type="module"></script>
+  </body>
+</html>

packages/app/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@opencode-ai/app",
+  "version": "1.17.4",
+  "description": "",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./desktop-menu": "./src/desktop-menu.ts",
+    "./updater": "./src/updater.ts",
+    "./wsl/types": "./src/wsl/types.ts",
+    "./vite": "./vite.js",
+    "./index.css": "./src/index.css"
+  },
+  "scripts": {
+    "typecheck": "tsgo -b",
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test": "bun run test:unit",
+    "test:unit": "bun test --only-failures --preload ./happydom.ts ./src",
+    "test:unit:watch": "bun test --watch --preload ./happydom.ts ./src",
+    "test:e2e": "playwright test",
+    "test:e2e:local": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report e2e/playwright-report"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.0.11",
+    "@playwright/test": "catalog:",
+    "@sentry/vite-plugin": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "@tsconfig/bun": "1.0.9",
+    "@types/bun": "catalog:",
+    "@types/luxon": "catalog:",
+    "@types/node": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-icons-spritesheet": "3.0.1",
+    "vite-plugin-solid": "catalog:"
+  },
+  "dependencies": {
+    "@kobalte/core": "catalog:",
+    "@opencode-ai/core": "workspace:*",
+    "@opencode-ai/sdk": "workspace:*",
+    "@opencode-ai/ui": "workspace:*",
+    "@sentry/solid": "catalog:",
+    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/active-element": "2.1.3",
+    "@solid-primitives/audio": "1.4.2",
+    "@solid-primitives/event-bus": "1.1.2",
+    "@solid-primitives/event-listener": "2.4.5",
+    "@solid-primitives/i18n": "2.2.1",
+    "@solid-primitives/media": "2.3.3",
+    "@solid-primitives/resize-observer": "2.1.5",
+    "@solid-primitives/scheduled": "1.5.3",
+    "@solid-primitives/scroll": "2.1.3",
+    "@solid-primitives/storage": "catalog:",
+    "@solid-primitives/timer": "1.4.4",
+    "@solid-primitives/websocket": "1.3.1",
+    "@solidjs/meta": "catalog:",
+    "@solidjs/router": "catalog:",
+    "@tanstack/solid-query": "5.91.4",
+    "@thisbeyond/solid-dnd": "0.7.5",
+    "diff": "catalog:",
+    "effect": "catalog:",
+    "fuzzysort": "catalog:",
+    "ghostty-web": "github:anomalyco/ghostty-web#main",
+    "luxon": "catalog:",
+    "marked": "catalog:",
+    "marked-shiki": "catalog:",
+    "remeda": "catalog:",
+    "shiki": "catalog:",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:",
+    "tailwindcss": "catalog:",
+    "virtua": "catalog:"
+  }
+}

packages/app/playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from "@playwright/test"
+
+const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${port}`
+const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"
+const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
+const reuse = !process.env.CI
+const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "./e2e/test-results",
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
+  fullyParallel: process.env.PLAYWRIGHT_FULLY_PARALLEL === "1",
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers,
+  reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
+  webServer: {
+    command,
+    url: baseURL,
+    reuseExistingServer: reuse,
+    timeout: 120_000,
+    env: {
+      VITE_OPENCODE_SERVER_HOST: serverHost,
+      VITE_OPENCODE_SERVER_PORT: serverPort,
+    },
+  },
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+})

packages/app/public/_headers

@@ -0,0 +1,17 @@
+/assets/*.js
+  Content-Type: application/javascript
+
+/assets/*.mjs
+  Content-Type: application/javascript
+
+/assets/*.css
+  Content-Type: text/css
+
+/*.js
+  Content-Type: application/javascript
+
+/*.mjs
+  Content-Type: application/javascript
+
+/*.css
+  Content-Type: text/css

packages/app/public/apple-touch-icon-v3.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon-v3.png

packages/app/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png

packages/app/public/favicon-96x96-v3.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96-v3.png

packages/app/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png

packages/app/public/favicon-v3.ico

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-v3.ico

packages/app/public/favicon-v3.svg

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-v3.svg

packages/app/public/favicon.ico

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico

packages/app/public/favicon.svg

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg

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

@@ -0,0 +1,39 @@
+;(function () {
+  var key = "opencode-theme-id"
+  var themeId = localStorage.getItem(key) || "oc-2"
+
+  if (themeId === "oc-1") {
+    themeId = "oc-2"
+    localStorage.setItem(key, themeId)
+    localStorage.removeItem("opencode-theme-css-light")
+    localStorage.removeItem("opencode-theme-css-dark")
+  }
+
+  var scheme = localStorage.getItem("opencode-color-scheme") || "system"
+  var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
+  var mode = isDark ? "dark" : "light"
+
+  document.documentElement.dataset.theme = themeId
+  document.documentElement.dataset.colorScheme = mode
+
+  // Update theme-color meta tag to match app color scheme
+  var metas = document.querySelectorAll("meta[name='theme-color']")
+  if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#131010" : "#F8F7F7")
+
+  if (themeId === "oc-2") return
+
+  var css = localStorage.getItem("opencode-theme-css-" + mode)
+  if (css) {
+    var style = document.createElement("style")
+    style.id = "oc-theme-preload"
+    style.textContent =
+      ":root{color-scheme:" +
+      mode +
+      ";--text-mix-blend-mode:" +
+      (isDark ? "plus-lighter" : "multiply") +
+      ";" +
+      css +
+      "}"
+    document.head.appendChild(style)
+  }
+})()

packages/app/public/site.webmanifest

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest

packages/app/public/social-share-zen.png

@@ -0,0 +1 @@
+../../ui/src/assets/images/social-share-zen.png

packages/app/public/social-share.png

@@ -0,0 +1 @@
+../../ui/src/assets/images/social-share.png

packages/app/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png

packages/app/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png

packages/app/src/addons/serialize.test.ts

@@ -0,0 +1,319 @@
+import { describe, test, expect, beforeAll, afterEach } from "bun:test"
+import { Terminal, Ghostty } from "ghostty-web"
+import { SerializeAddon } from "./serialize"
+
+let ghostty: Ghostty
+beforeAll(async () => {
+  ghostty = await Ghostty.load()
+})
+
+const terminals: Terminal[] = []
+
+afterEach(() => {
+  for (const term of terminals) {
+    term.dispose()
+  }
+  terminals.length = 0
+  document.body.innerHTML = ""
+})
+
+function createTerminal(cols = 80, rows = 24): { term: Terminal; addon: SerializeAddon; container: HTMLElement } {
+  const container = document.createElement("div")
+  document.body.appendChild(container)
+
+  const term = new Terminal({ cols, rows, ghostty })
+  const addon = new SerializeAddon()
+  term.loadAddon(addon)
+  term.open(container)
+  terminals.push(term)
+
+  return { term, addon, container }
+}
+
+function writeAndWait(term: Terminal, data: string): Promise<void> {
+  return new Promise((resolve) => {
+    term.write(data, resolve)
+  })
+}
+
+describe("SerializeAddon", () => {
+  describe("ANSI color preservation", () => {
+    test("should preserve text attributes (bold, italic, underline)", async () => {
+      const { term, addon } = createTerminal()
+
+      const input = "\x1b[1mBOLD\x1b[0m \x1b[3mITALIC\x1b[0m \x1b[4mUNDER\x1b[0m"
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      expect(origLine!.getCell(0)!.isBold()).toBe(1)
+      expect(origLine!.getCell(5)!.isItalic()).toBe(1)
+      expect(origLine!.getCell(12)!.isUnderline()).toBe(1)
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const line = term2.buffer.active.getLine(0)
+
+      const boldCell = line!.getCell(0)
+      expect(boldCell!.getChars()).toBe("B")
+      expect(boldCell!.isBold()).toBe(1)
+
+      const italicCell = line!.getCell(5)
+      expect(italicCell!.getChars()).toBe("I")
+      expect(italicCell!.isItalic()).toBe(1)
+
+      const underCell = line!.getCell(12)
+      expect(underCell!.getChars()).toBe("U")
+      expect(underCell!.isUnderline()).toBe(1)
+    })
+
+    test("should preserve basic 16-color foreground colors", async () => {
+      const { term, addon } = createTerminal()
+
+      const input = "\x1b[31mRED\x1b[32mGREEN\x1b[34mBLUE\x1b[0mNORMAL"
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const origRedFg = origLine!.getCell(0)!.getFgColor()
+      const origGreenFg = origLine!.getCell(3)!.getFgColor()
+      const origBlueFg = origLine!.getCell(8)!.getFgColor()
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const line = term2.buffer.active.getLine(0)
+      expect(line).toBeDefined()
+
+      const redCell = line!.getCell(0)
+      expect(redCell!.getChars()).toBe("R")
+      expect(redCell!.getFgColor()).toBe(origRedFg)
+
+      const greenCell = line!.getCell(3)
+      expect(greenCell!.getChars()).toBe("G")
+      expect(greenCell!.getFgColor()).toBe(origGreenFg)
+
+      const blueCell = line!.getCell(8)
+      expect(blueCell!.getChars()).toBe("B")
+      expect(blueCell!.getFgColor()).toBe(origBlueFg)
+    })
+
+    test("should preserve 256-color palette colors", async () => {
+      const { term, addon } = createTerminal()
+
+      const input = "\x1b[38;5;196mRED256\x1b[0mNORMAL"
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const origRedFg = origLine!.getCell(0)!.getFgColor()
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const line = term2.buffer.active.getLine(0)
+      const redCell = line!.getCell(0)
+      expect(redCell!.getChars()).toBe("R")
+      expect(redCell!.getFgColor()).toBe(origRedFg)
+    })
+
+    test("should preserve RGB/truecolor colors", async () => {
+      const { term, addon } = createTerminal()
+
+      const input = "\x1b[38;2;255;128;64mRGB_TEXT\x1b[0mNORMAL"
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const origRgbFg = origLine!.getCell(0)!.getFgColor()
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const line = term2.buffer.active.getLine(0)
+      const rgbCell = line!.getCell(0)
+      expect(rgbCell!.getChars()).toBe("R")
+      expect(rgbCell!.getFgColor()).toBe(origRgbFg)
+    })
+
+    test("should preserve background colors", async () => {
+      const { term, addon } = createTerminal()
+
+      const input = "\x1b[48;2;255;0;0mRED_BG\x1b[48;2;0;255;0mGREEN_BG\x1b[0mNORMAL"
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const origRedBg = origLine!.getCell(0)!.getBgColor()
+      const origGreenBg = origLine!.getCell(6)!.getBgColor()
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const line = term2.buffer.active.getLine(0)
+
+      const redBgCell = line!.getCell(0)
+      expect(redBgCell!.getChars()).toBe("R")
+      expect(redBgCell!.getBgColor()).toBe(origRedBg)
+
+      const greenBgCell = line!.getCell(6)
+      expect(greenBgCell!.getChars()).toBe("G")
+      expect(greenBgCell!.getBgColor()).toBe(origGreenBg)
+    })
+
+    test("should handle combined colors and attributes", async () => {
+      const { term, addon } = createTerminal()
+
+      const input =
+        "\x1b[1;38;2;255;0;0;48;2;255;255;0mCOMBO\x1b[0mNORMAL                                                                    "
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const _origFg = origLine!.getCell(0)!.getFgColor()
+      const _origBg = origLine!.getCell(0)!.getBgColor()
+      expect(origLine!.getCell(0)!.isBold()).toBe(1)
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+      const cleanSerialized = serialized.replace(/\x1b\[\d+X/g, "")
+
+      expect(cleanSerialized.startsWith("\x1b[1;")).toBe(true)
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, cleanSerialized)
+
+      const line = term2.buffer.active.getLine(0)
+      const comboCell = line!.getCell(0)
+
+      expect(comboCell!.getChars()).toBe("C")
+      expect(cleanSerialized).toContain("\x1b[1;38;2;255;0;0;48;2;255;255;0m")
+    })
+  })
+
+  describe("round-trip serialization", () => {
+    test("should not produce ECH sequences", async () => {
+      const { term, addon } = createTerminal()
+
+      await writeAndWait(term, "\x1b[31mHello\x1b[0m World")
+
+      const serialized = addon.serialize()
+
+      const hasECH = /\x1b\[\d+X/.test(serialized)
+      expect(hasECH).toBe(false)
+    })
+
+    test("multi-line content should not have garbage characters", async () => {
+      const { term, addon } = createTerminal()
+
+      const content = [
+        "\x1b[1;32m❯\x1b[0m \x1b[34mcd\x1b[0m /some/path",
+        "\x1b[1;32m❯\x1b[0m \x1b[34mls\x1b[0m -la",
+        "total 42",
+      ].join("\r\n")
+
+      await writeAndWait(term, content)
+
+      const serialized = addon.serialize()
+
+      expect(/\x1b\[\d+X/.test(serialized)).toBe(false)
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      for (let row = 0; row < 3; row++) {
+        const line = term2.buffer.active.getLine(row)?.translateToString(true)
+        expect(line?.includes("𑼝")).toBe(false)
+      }
+
+      expect(term2.buffer.active.getLine(0)?.translateToString(true)).toContain("cd /some/path")
+      expect(term2.buffer.active.getLine(1)?.translateToString(true)).toContain("ls -la")
+      expect(term2.buffer.active.getLine(2)?.translateToString(true)).toBe("total 42")
+    })
+
+    test("serialized output should restore after Terminal.reset()", async () => {
+      const { term, addon } = createTerminal()
+
+      const content = [
+        "\x1b[1;32m❯\x1b[0m \x1b[34mcd\x1b[0m /some/path",
+        "\x1b[1;32m❯\x1b[0m \x1b[34mls\x1b[0m -la",
+        "total 42",
+      ].join("\r\n")
+
+      await writeAndWait(term, content)
+
+      const serialized = addon.serialize()
+
+      const { term: term2 } = createTerminal()
+      terminals.push(term2)
+      term2.reset()
+      await writeAndWait(term2, serialized)
+
+      expect(term2.buffer.active.getLine(0)?.translateToString(true)).toContain("cd /some/path")
+      expect(term2.buffer.active.getLine(1)?.translateToString(true)).toContain("ls -la")
+      expect(term2.buffer.active.getLine(2)?.translateToString(true)).toBe("total 42")
+    })
+
+    test("alternate buffer should round-trip without garbage", async () => {
+      const { term, addon } = createTerminal(20, 5)
+
+      await writeAndWait(term, "normal\r\n")
+      await writeAndWait(term, "\x1b[?1049h\x1b[HALT")
+
+      expect(term.buffer.active.type).toBe("alternate")
+
+      const serialized = addon.serialize()
+
+      const { term: term2 } = createTerminal(20, 5)
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      expect(term2.buffer.active.type).toBe("alternate")
+
+      const line = term2.buffer.active.getLine(0)
+      expect(line?.translateToString(true)).toBe("ALT")
+
+      // Ensure a cell beyond content isn't garbage
+      const cellCode = line?.getCell(10)?.getCode()
+      expect(cellCode === 0 || cellCode === 32).toBe(true)
+    })
+
+    test("serialized output written to new terminal should match original colors", async () => {
+      const { term, addon } = createTerminal(40, 5)
+
+      const input = "\x1b[38;2;255;0;0mHello\x1b[0m \x1b[38;2;0;255;0mWorld\x1b[0m!                            "
+      await writeAndWait(term, input)
+
+      const origLine = term.buffer.active.getLine(0)
+      const origHelloFg = origLine!.getCell(0)!.getFgColor()
+      const origWorldFg = origLine!.getCell(6)!.getFgColor()
+
+      const serialized = addon.serialize({ range: { start: 0, end: 0 } })
+
+      const { term: term2 } = createTerminal(40, 5)
+      terminals.push(term2)
+      await writeAndWait(term2, serialized)
+
+      const newLine = term2.buffer.active.getLine(0)
+
+      expect(newLine!.getCell(0)!.getChars()).toBe("H")
+      expect(newLine!.getCell(0)!.getFgColor()).toBe(origHelloFg)
+
+      expect(newLine!.getCell(6)!.getChars()).toBe("W")
+      expect(newLine!.getCell(6)!.getFgColor()).toBe(origWorldFg)
+
+      expect(newLine!.getCell(11)!.getChars()).toBe("!")
+    })
+  })
+})

packages/app/src/addons/serialize.ts

@@ -0,0 +1,634 @@
+/**
+ * SerializeAddon - Serialize terminal buffer contents
+ *
+ * Port of xterm.js addon-serialize for ghostty-web.
+ * Enables serialization of terminal contents to a string that can
+ * be written back to restore terminal state.
+ *
+ * Usage:
+ * ```typescript
+ * const serializeAddon = new SerializeAddon();
+ * term.loadAddon(serializeAddon);
+ * const content = serializeAddon.serialize();
+ * ```
+ */
+
+import type { ITerminalAddon, ITerminalCore, IBufferRange } from "ghostty-web"
+
+// ============================================================================
+// Buffer Types (matching ghostty-web internal interfaces)
+// ============================================================================
+
+interface IBuffer {
+  readonly type: "normal" | "alternate"
+  readonly cursorX: number
+  readonly cursorY: number
+  readonly viewportY: number
+  readonly baseY: number
+  readonly length: number
+  getLine(y: number): IBufferLine | undefined
+  getNullCell(): IBufferCell
+}
+
+interface IBufferLine {
+  readonly length: number
+  readonly isWrapped: boolean
+  getCell(x: number): IBufferCell | undefined
+  translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string
+}
+
+interface IBufferCell {
+  getChars(): string
+  getCode(): number
+  getWidth(): number
+  getFgColorMode(): number
+  getBgColorMode(): number
+  getFgColor(): number
+  getBgColor(): number
+  isBold(): number
+  isItalic(): number
+  isUnderline(): number
+  isStrikethrough(): number
+  isBlink(): number
+  isInverse(): number
+  isInvisible(): number
+  isFaint(): number
+  isDim(): boolean
+}
+
+type TerminalBuffers = {
+  active?: IBuffer
+  normal?: IBuffer
+  alternate?: IBuffer
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null
+}
+
+const isBuffer = (value: unknown): value is IBuffer => {
+  if (!isRecord(value)) return false
+  if (typeof value.length !== "number") return false
+  if (typeof value.cursorX !== "number") return false
+  if (typeof value.cursorY !== "number") return false
+  if (typeof value.baseY !== "number") return false
+  if (typeof value.viewportY !== "number") return false
+  if (typeof value.getLine !== "function") return false
+  if (typeof value.getNullCell !== "function") return false
+  return true
+}
+
+const getTerminalBuffers = (value: ITerminalCore): TerminalBuffers | undefined => {
+  if (!isRecord(value)) return
+  const raw = value.buffer
+  if (!isRecord(raw)) return
+  const active = isBuffer(raw.active) ? raw.active : undefined
+  const normal = isBuffer(raw.normal) ? raw.normal : undefined
+  const alternate = isBuffer(raw.alternate) ? raw.alternate : undefined
+  if (!active && !normal) return
+  return { active, normal, alternate }
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ISerializeOptions {
+  /**
+   * The row range to serialize. When an explicit range is specified, the cursor
+   * will get its final repositioning.
+   */
+  range?: ISerializeRange
+  /**
+   * The number of rows in the scrollback buffer to serialize, starting from
+   * the bottom of the scrollback buffer. When not specified, all available
+   * rows in the scrollback buffer will be serialized.
+   */
+  scrollback?: number
+  /**
+   * Whether to exclude the terminal modes from the serialization.
+   * Default: false
+   */
+  excludeModes?: boolean
+  /**
+   * Whether to exclude the alt buffer from the serialization.
+   * Default: false
+   */
+  excludeAltBuffer?: boolean
+}
+
+export interface ISerializeRange {
+  /**
+   * The line to start serializing (inclusive).
+   */
+  start: number
+  /**
+   * The line to end serializing (inclusive).
+   */
+  end: number
+}
+
+export interface IHTMLSerializeOptions {
+  /**
+   * The number of rows in the scrollback buffer to serialize, starting from
+   * the bottom of the scrollback buffer.
+   */
+  scrollback?: number
+  /**
+   * Whether to only serialize the selection.
+   * Default: false
+   */
+  onlySelection?: boolean
+  /**
+   * Whether to include the global background of the terminal.
+   * Default: false
+   */
+  includeGlobalBackground?: boolean
+  /**
+   * The range to serialize. This is prioritized over onlySelection.
+   */
+  range?: {
+    startLine: number
+    endLine: number
+    startCol: number
+  }
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function constrain(value: number, low: number, high: number): number {
+  return Math.max(low, Math.min(value, high))
+}
+
+function equalFg(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return cell1.getFgColorMode() === cell2.getFgColorMode() && cell1.getFgColor() === cell2.getFgColor()
+}
+
+function equalBg(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return cell1.getBgColorMode() === cell2.getBgColorMode() && cell1.getBgColor() === cell2.getBgColor()
+}
+
+function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean {
+  return (
+    !!cell1.isInverse() === !!cell2.isInverse() &&
+    !!cell1.isBold() === !!cell2.isBold() &&
+    !!cell1.isUnderline() === !!cell2.isUnderline() &&
+    !!cell1.isBlink() === !!cell2.isBlink() &&
+    !!cell1.isInvisible() === !!cell2.isInvisible() &&
+    !!cell1.isItalic() === !!cell2.isItalic() &&
+    !!cell1.isDim() === !!cell2.isDim() &&
+    !!cell1.isStrikethrough() === !!cell2.isStrikethrough()
+  )
+}
+
+// ============================================================================
+// Base Serialize Handler
+// ============================================================================
+
+abstract class BaseSerializeHandler {
+  constructor(protected readonly _buffer: IBuffer) {}
+
+  public serialize(range: IBufferRange, excludeFinalCursorPosition?: boolean): string {
+    let oldCell = this._buffer.getNullCell()
+
+    const startRow = range.start.y
+    const endRow = range.end.y
+    const startColumn = range.start.x
+    const endColumn = range.end.x
+
+    this._beforeSerialize(endRow - startRow + 1, startRow, endRow)
+
+    for (let row = startRow; row <= endRow; row++) {
+      const line = this._buffer.getLine(row)
+      if (line) {
+        const startLineColumn = row === range.start.y ? startColumn : 0
+        const endLineColumn = Math.min(endColumn, line.length)
+
+        for (let col = startLineColumn; col < endLineColumn; col++) {
+          const c = line.getCell(col)
+          if (!c) {
+            continue
+          }
+          this._nextCell(c, oldCell, row, col)
+          oldCell = c
+        }
+      }
+      this._rowEnd(row, row === endRow)
+    }
+
+    this._afterSerialize()
+
+    return this._serializeString(excludeFinalCursorPosition)
+  }
+
+  protected _nextCell(_cell: IBufferCell, _oldCell: IBufferCell, _row: number, _col: number): void {}
+  protected _rowEnd(_row: number, _isLastRow: boolean): void {}
+  protected _beforeSerialize(_rows: number, _startRow: number, _endRow: number): void {}
+  protected _afterSerialize(): void {}
+  protected _serializeString(_excludeFinalCursorPosition?: boolean): string {
+    return ""
+  }
+}
+
+// ============================================================================
+// String Serialize Handler
+// ============================================================================
+
+class StringSerializeHandler extends BaseSerializeHandler {
+  private _rowIndex: number = 0
+  private _allRows: string[] = []
+  private _allRowSeparators: string[] = []
+  private _currentRow: string = ""
+  private _nullCellCount: number = 0
+  private _cursorStyle: IBufferCell
+  private _firstRow: number = 0
+  private _lastCursorRow: number = 0
+  private _lastCursorCol: number = 0
+  private _lastContentCursorRow: number = 0
+  private _lastContentCursorCol: number = 0
+
+  constructor(
+    buffer: IBuffer,
+    private readonly _terminal: ITerminalCore,
+  ) {
+    super(buffer)
+    this._cursorStyle = this._buffer.getNullCell()
+  }
+
+  protected _beforeSerialize(rows: number, start: number, _end: number): void {
+    this._allRows = Array.from<string>({ length: rows })
+    this._allRowSeparators = Array.from<string>({ length: rows })
+    this._rowIndex = 0
+
+    this._currentRow = ""
+    this._nullCellCount = 0
+    this._cursorStyle = this._buffer.getNullCell()
+
+    this._lastContentCursorRow = start
+    this._lastCursorRow = start
+    this._firstRow = start
+  }
+
+  protected _rowEnd(row: number, isLastRow: boolean): void {
+    let rowSeparator = ""
+
+    const nextLine = isLastRow ? undefined : this._buffer.getLine(row + 1)
+    const wrapped = !!nextLine?.isWrapped
+
+    if (this._nullCellCount > 0 && wrapped) {
+      this._currentRow += " ".repeat(this._nullCellCount)
+    }
+
+    this._nullCellCount = 0
+
+    if (!isLastRow && !wrapped) {
+      rowSeparator = "\r\n"
+      this._lastCursorRow = row + 1
+      this._lastCursorCol = 0
+    }
+
+    this._allRows[this._rowIndex] = this._currentRow
+    this._allRowSeparators[this._rowIndex++] = rowSeparator
+    this._currentRow = ""
+    this._nullCellCount = 0
+  }
+
+  private _diffStyle(cell: IBufferCell, oldCell: IBufferCell): number[] {
+    const sgrSeq: number[] = []
+    const fgChanged = !equalFg(cell, oldCell)
+    const bgChanged = !equalBg(cell, oldCell)
+    const flagsChanged = !equalFlags(cell, oldCell)
+
+    if (fgChanged || bgChanged || flagsChanged) {
+      if (this._isAttributeDefault(cell)) {
+        if (!this._isAttributeDefault(oldCell)) {
+          sgrSeq.push(0)
+        }
+      } else {
+        if (flagsChanged) {
+          if (!!cell.isInverse() !== !!oldCell.isInverse()) {
+            sgrSeq.push(cell.isInverse() ? 7 : 27)
+          }
+          if (!!cell.isBold() !== !!oldCell.isBold()) {
+            sgrSeq.push(cell.isBold() ? 1 : 22)
+          }
+          if (!!cell.isUnderline() !== !!oldCell.isUnderline()) {
+            sgrSeq.push(cell.isUnderline() ? 4 : 24)
+          }
+          if (!!cell.isBlink() !== !!oldCell.isBlink()) {
+            sgrSeq.push(cell.isBlink() ? 5 : 25)
+          }
+          if (!!cell.isInvisible() !== !!oldCell.isInvisible()) {
+            sgrSeq.push(cell.isInvisible() ? 8 : 28)
+          }
+          if (!!cell.isItalic() !== !!oldCell.isItalic()) {
+            sgrSeq.push(cell.isItalic() ? 3 : 23)
+          }
+          if (!!cell.isDim() !== !!oldCell.isDim()) {
+            sgrSeq.push(cell.isDim() ? 2 : 22)
+          }
+          if (!!cell.isStrikethrough() !== !!oldCell.isStrikethrough()) {
+            sgrSeq.push(cell.isStrikethrough() ? 9 : 29)
+          }
+        }
+        if (fgChanged) {
+          const color = cell.getFgColor()
+          const mode = cell.getFgColorMode()
+          if (mode === 2 || mode === 3 || mode === -1) {
+            sgrSeq.push(38, 2, (color >>> 16) & 0xff, (color >>> 8) & 0xff, color & 0xff)
+          } else if (mode === 1) {
+            // Palette
+            if (color >= 16) {
+              sgrSeq.push(38, 5, color)
+            } else {
+              sgrSeq.push(color & 8 ? 90 + (color & 7) : 30 + (color & 7))
+            }
+          } else {
+            sgrSeq.push(39)
+          }
+        }
+        if (bgChanged) {
+          const color = cell.getBgColor()
+          const mode = cell.getBgColorMode()
+          if (mode === 2 || mode === 3 || mode === -1) {
+            sgrSeq.push(48, 2, (color >>> 16) & 0xff, (color >>> 8) & 0xff, color & 0xff)
+          } else if (mode === 1) {
+            // Palette
+            if (color >= 16) {
+              sgrSeq.push(48, 5, color)
+            } else {
+              sgrSeq.push(color & 8 ? 100 + (color & 7) : 40 + (color & 7))
+            }
+          } else {
+            sgrSeq.push(49)
+          }
+        }
+      }
+    }
+
+    return sgrSeq
+  }
+
+  private _isAttributeDefault(cell: IBufferCell): boolean {
+    const mode = cell.getFgColorMode()
+    const bgMode = cell.getBgColorMode()
+
+    if (mode === 0 && bgMode === 0) {
+      return (
+        !cell.isBold() &&
+        !cell.isItalic() &&
+        !cell.isUnderline() &&
+        !cell.isBlink() &&
+        !cell.isInverse() &&
+        !cell.isInvisible() &&
+        !cell.isDim() &&
+        !cell.isStrikethrough()
+      )
+    }
+
+    const fgColor = cell.getFgColor()
+    const bgColor = cell.getBgColor()
+    const nullCell = this._buffer.getNullCell()
+    const nullFg = nullCell.getFgColor()
+    const nullBg = nullCell.getBgColor()
+
+    return (
+      fgColor === nullFg &&
+      bgColor === nullBg &&
+      !cell.isBold() &&
+      !cell.isItalic() &&
+      !cell.isUnderline() &&
+      !cell.isBlink() &&
+      !cell.isInverse() &&
+      !cell.isInvisible() &&
+      !cell.isDim() &&
+      !cell.isStrikethrough()
+    )
+  }
+
+  protected _nextCell(cell: IBufferCell, _oldCell: IBufferCell, row: number, col: number): void {
+    const isPlaceHolderCell = cell.getWidth() === 0
+
+    if (isPlaceHolderCell) {
+      return
+    }
+
+    const codepoint = cell.getCode()
+    const isInvalidCodepoint = codepoint > 0x10ffff || (codepoint >= 0xd800 && codepoint <= 0xdfff)
+    const isGarbage = isInvalidCodepoint || (codepoint >= 0xf000 && cell.getWidth() === 1)
+    const isEmptyCell = codepoint === 0 || cell.getChars() === "" || isGarbage
+
+    const sgrSeq = this._diffStyle(cell, this._cursorStyle)
+
+    const styleChanged = sgrSeq.length > 0
+
+    if (styleChanged) {
+      if (this._nullCellCount > 0) {
+        this._currentRow += " ".repeat(this._nullCellCount)
+        this._nullCellCount = 0
+      }
+
+      this._lastContentCursorRow = this._lastCursorRow = row
+      this._lastContentCursorCol = this._lastCursorCol = col
+
+      this._currentRow += `\u001b[${sgrSeq.join(";")}m`
+
+      const line = this._buffer.getLine(row)
+      const cellFromLine = line?.getCell(col)
+      if (cellFromLine) {
+        this._cursorStyle = cellFromLine
+      }
+    }
+
+    if (isEmptyCell) {
+      this._nullCellCount += cell.getWidth()
+    } else {
+      if (this._nullCellCount > 0) {
+        this._currentRow += " ".repeat(this._nullCellCount)
+        this._nullCellCount = 0
+      }
+
+      this._currentRow += cell.getChars()
+
+      this._lastContentCursorRow = this._lastCursorRow = row
+      this._lastContentCursorCol = this._lastCursorCol = col + cell.getWidth()
+    }
+  }
+
+  protected _serializeString(excludeFinalCursorPosition?: boolean): string {
+    let rowEnd = this._allRows.length
+
+    if (this._buffer.length - this._firstRow <= this._terminal.rows) {
+      rowEnd = this._lastContentCursorRow + 1 - this._firstRow
+      this._lastCursorCol = this._lastContentCursorCol
+      this._lastCursorRow = this._lastContentCursorRow
+    }
+
+    let content = ""
+
+    for (let i = 0; i < rowEnd; i++) {
+      content += this._allRows[i]
+      if (i + 1 < rowEnd) {
+        content += this._allRowSeparators[i]
+      }
+    }
+
+    if (excludeFinalCursorPosition) return content
+
+    const absoluteCursorRow = (this._buffer.baseY ?? 0) + this._buffer.cursorY
+    const cursorRow = constrain(absoluteCursorRow - this._firstRow + 1, 1, Number.MAX_SAFE_INTEGER)
+    const cursorCol = this._buffer.cursorX + 1
+    content += `\u001b[${cursorRow};${cursorCol}H`
+
+    const line = this._buffer.getLine(absoluteCursorRow)
+    const cell = line?.getCell(this._buffer.cursorX)
+    const style = (() => {
+      if (!cell) return this._buffer.getNullCell()
+      if (cell.getWidth() !== 0) return cell
+      if (this._buffer.cursorX > 0) return line?.getCell(this._buffer.cursorX - 1) ?? cell
+      return cell
+    })()
+
+    const sgrSeq = this._diffStyle(style, this._cursorStyle)
+    if (sgrSeq.length) content += `\u001b[${sgrSeq.join(";")}m`
+
+    return content
+  }
+}
+
+// ============================================================================
+// SerializeAddon Class
+// ============================================================================
+
+export class SerializeAddon implements ITerminalAddon {
+  private _terminal?: ITerminalCore
+
+  /**
+   * Activate the addon (called by Terminal.loadAddon)
+   */
+  public activate(terminal: ITerminalCore): void {
+    this._terminal = terminal
+  }
+
+  /**
+   * Dispose the addon and clean up resources
+   */
+  public dispose(): void {
+    this._terminal = undefined
+  }
+
+  /**
+   * Serializes terminal rows into a string that can be written back to the
+   * terminal to restore the state. The cursor will also be positioned to the
+   * correct cell.
+   *
+   * @param options Custom options to allow control over what gets serialized.
+   */
+  public serialize(options?: ISerializeOptions): string {
+    if (!this._terminal) {
+      throw new Error("Cannot use addon until it has been loaded")
+    }
+
+    const buffer = getTerminalBuffers(this._terminal)
+
+    if (!buffer) {
+      return ""
+    }
+
+    const normalBuffer = buffer.normal ?? buffer.active
+    const altBuffer = buffer.alternate
+
+    if (!normalBuffer) {
+      return ""
+    }
+
+    let content = options?.range
+      ? this._serializeBufferByRange(normalBuffer, options.range, true)
+      : this._serializeBufferByScrollback(normalBuffer, options?.scrollback)
+
+    if (!options?.excludeAltBuffer && buffer.active?.type === "alternate" && altBuffer) {
+      const alternateContent = this._serializeBufferByScrollback(altBuffer, undefined)
+      content += `\u001b[?1049h\u001b[H${alternateContent}`
+    }
+
+    return content
+  }
+
+  /**
+   * Serializes terminal content as plain text (no escape sequences)
+   * @param options Custom options to allow control over what gets serialized.
+   */
+  public serializeAsText(options?: { scrollback?: number; trimWhitespace?: boolean }): string {
+    if (!this._terminal) {
+      throw new Error("Cannot use addon until it has been loaded")
+    }
+
+    const buffer = getTerminalBuffers(this._terminal)
+
+    if (!buffer) {
+      return ""
+    }
+
+    const activeBuffer = buffer.active ?? buffer.normal
+    if (!activeBuffer) {
+      return ""
+    }
+
+    const maxRows = activeBuffer.length
+    const scrollback = options?.scrollback
+    const correctRows = scrollback === undefined ? maxRows : constrain(scrollback + this._terminal.rows, 0, maxRows)
+
+    const startRow = maxRows - correctRows
+    const endRow = maxRows - 1
+    const lines: string[] = []
+
+    for (let row = startRow; row <= endRow; row++) {
+      const line = activeBuffer.getLine(row)
+      if (line) {
+        const text = line.translateToString(options?.trimWhitespace ?? true)
+        lines.push(text)
+      }
+    }
+
+    // Trim trailing empty lines if requested
+    if (options?.trimWhitespace) {
+      while (lines.length > 0 && lines[lines.length - 1] === "") {
+        lines.pop()
+      }
+    }
+
+    return lines.join("\n")
+  }
+
+  private _serializeBufferByScrollback(buffer: IBuffer, scrollback?: number): string {
+    const maxRows = buffer.length
+    const rows = this._terminal?.rows ?? 24
+    const correctRows = scrollback === undefined ? maxRows : constrain(scrollback + rows, 0, maxRows)
+    return this._serializeBufferByRange(
+      buffer,
+      {
+        start: maxRows - correctRows,
+        end: maxRows - 1,
+      },
+      false,
+    )
+  }
+
+  private _serializeBufferByRange(
+    buffer: IBuffer,
+    range: ISerializeRange,
+    excludeFinalCursorPosition: boolean,
+  ): string {
+    const handler = new StringSerializeHandler(buffer, this._terminal!)
+    const cols = this._terminal?.cols ?? 80
+    return handler.serialize(
+      {
+        start: { x: 0, y: range.start },
+        end: { x: cols, y: range.end },
+      },
+      excludeFinalCursorPosition,
+    )
+  }
+}

packages/app/src/app.tsx

@@ -0,0 +1,423 @@
+import "@/index.css"
+import * as Sentry from "@sentry/solid"
+import { I18nProvider } from "@opencode-ai/ui/context"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { FileComponentProvider } from "@opencode-ai/ui/context/file"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
+import { File } from "@opencode-ai/ui/file"
+import { Font } from "@opencode-ai/ui/font"
+import { Splash } from "@opencode-ai/ui/logo"
+import { ThemeProvider } from "@opencode-ai/ui/theme/context"
+import { MetaProvider } from "@solidjs/meta"
+import { type BaseRouterProps, Navigate, Route, Router, useParams, useSearchParams } from "@solidjs/router"
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
+import { Effect } from "effect"
+import {
+  type Component,
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  ErrorBoundary,
+  For,
+  type JSX,
+  lazy,
+  onCleanup,
+  type ParentProps,
+  Show,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import { CommandProvider } from "@/context/command"
+import { CommentsProvider } from "@/context/comments"
+import { FileProvider } from "@/context/file"
+import { ServerSDKProvider } from "@/context/server-sdk"
+import { ServerSyncProvider } from "@/context/server-sync"
+import { GlobalProvider } from "@/context/global"
+import { HighlightsProvider } from "@/context/highlights"
+import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
+import { LayoutProvider } from "@/context/layout"
+import { ModelsProvider } from "@/context/models"
+import { NotificationProvider } from "@/context/notification"
+import { PermissionProvider } from "@/context/permission"
+import { PromptProvider } from "@/context/prompt"
+import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
+import { SettingsProvider, useSettings } from "@/context/settings"
+import { TerminalProvider } from "@/context/terminal"
+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 Layout from "@/pages/layout"
+import { ErrorPage } from "./pages/error"
+import { useCheckServerHealth } from "./utils/server-health"
+
+const HomeRoute = lazy(() => import("@/pages/home"))
+const Session = lazy(() => import("@/pages/session"))
+const NewSession = lazy(() => import("@/pages/new-session"))
+
+const SessionRoute = Object.assign(
+  () => {
+    const settings = useSettings()
+    const params = useParams()
+    const [search] = useSearchParams<{ draftId?: string; prompt?: string }>()
+    const sdk = useSDK()
+    const server = useServer()
+    const tabs = useTabs()
+
+    // When the new layout is enabled, the legacy new-session route (/:dir/session with no id)
+    // is replaced by a draft at /new-session?draftId=…
+    createEffect(() => {
+      if (!settings.general.newLayoutDesigns()) return
+      if (params.id || search.draftId) return
+      if (!tabs.ready() || !sdk.directory) return
+      tabs.newDraft({ server: server.key, directory: sdk.directory }, search.prompt)
+    })
+
+    return (
+      <SessionProviders>
+        <Session />
+      </SessionProviders>
+    )
+  },
+  { preload: Session.preload },
+)
+
+function DraftRoute() {
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const tabs = useTabs()
+  return (
+    <Show when={tabs.ready()}>
+      <Show when={search.draftId} keyed fallback={<Navigate href="/" />}>
+        {(draftID) => <ResolvedDraftRoute draftID={draftID} />}
+      </Show>
+    </Show>
+  )
+}
+
+function ResolvedDraftRoute(props: { draftID: string }) {
+  const server = useServer()
+  const tabs = useTabs()
+  const draft = createMemo(() =>
+    tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === props.draftID),
+  )
+
+  createEffect(() => {
+    const current = draft()
+    if (current && current.server !== server.key) server.setActive(current.server)
+  })
+
+  // Key on the directory so retargeting the draft's project re-instantiates the
+  // SDK/data providers for the new directory while keeping the same draft id.
+  const directory = () => draft()?.directory
+
+  return (
+    <Show when={directory()} keyed>
+      {(dir) => (
+        <SDKProvider directory={dir}>
+          <DirectoryDataProvider directory={dir} draftID={props.draftID}>
+            <DraftProviders>
+              <NewSession />
+            </DraftProviders>
+          </DirectoryDataProvider>
+        </SDKProvider>
+      )}
+    </Show>
+  )
+}
+
+function UiI18nBridge(props: ParentProps) {
+  const language = useLanguage()
+  return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
+}
+
+declare global {
+  interface Window {
+    __OPENCODE__?: {
+      deepLinks?: string[]
+    }
+    api?: {
+      setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
+      exportDebugLogs?: () => Promise<string>
+    }
+  }
+}
+
+function QueryProvider(props: ParentProps) {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnReconnect: false,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      },
+    },
+  })
+  return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
+}
+
+function BodyDesignClass() {
+  const settings = useSettings()
+
+  createEffect(() => {
+    if (typeof document === "undefined") return
+
+    const enabled = settings.general.newLayoutDesigns()
+    document.body.classList.toggle("text-12-regular", !enabled)
+    document.body.classList.toggle("font-(family-name:--font-family-text)", enabled)
+    document.body.classList.toggle("text-[13px]", enabled)
+    document.body.classList.toggle("font-[440]", enabled)
+  })
+
+  return null
+}
+
+function AppShellProviders(props: ParentProps) {
+  return (
+    <SettingsProvider>
+      <BodyDesignClass />
+      <PermissionProvider>
+        <LayoutProvider>
+          <NotificationProvider>
+            <ModelsProvider>
+              <CommandProvider>
+                <HighlightsProvider>
+                  <Layout>{props.children}</Layout>
+                </HighlightsProvider>
+              </CommandProvider>
+            </ModelsProvider>
+          </NotificationProvider>
+        </LayoutProvider>
+      </PermissionProvider>
+    </SettingsProvider>
+  )
+}
+
+function SessionProviders(props: ParentProps) {
+  return (
+    <TerminalProvider>
+      <FileProvider>
+        <PromptProvider>
+          <CommentsProvider>{props.children}</CommentsProvider>
+        </PromptProvider>
+      </FileProvider>
+    </TerminalProvider>
+  )
+}
+
+// The draft page only renders the prompt composer, so it drops TerminalProvider.
+// FileProvider and CommentsProvider stay because PromptInput uses file search and comment context.
+function DraftProviders(props: ParentProps) {
+  return (
+    <FileProvider>
+      <PromptProvider>
+        <CommentsProvider>{props.children}</CommentsProvider>
+      </PromptProvider>
+    </FileProvider>
+  )
+}
+
+function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
+  return (
+    <AppShellProviders>
+      {/*<Suspense fallback={<Loading />}>*/}
+      {props.appChildren}
+      {props.children}
+      {/*</Suspense>*/}
+    </AppShellProviders>
+  )
+}
+
+export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
+  return (
+    <MetaProvider>
+      <Font />
+      <ThemeProvider
+        onThemeApplied={(_, mode) => {
+          void window.api?.setTitlebar?.({ mode })
+        }}
+      >
+        <LanguageProvider locale={props.locale}>
+          <UiI18nBridge>
+            <ErrorBoundary
+              fallback={(error) => {
+                Sentry.captureException(error)
+                return <ErrorPage error={error} />
+              }}
+            >
+              <QueryProvider>
+                <WslServersProvider>
+                  <DialogProvider>
+                    <MarkedProvider>
+                      <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    </MarkedProvider>
+                  </DialogProvider>
+                </WslServersProvider>
+              </QueryProvider>
+            </ErrorBoundary>
+          </UiI18nBridge>
+        </LanguageProvider>
+      </ThemeProvider>
+    </MetaProvider>
+  )
+}
+
+function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) {
+  const server = useServer()
+  const checkServerHealth = useCheckServerHealth()
+
+  const [checkMode, setCheckMode] = createSignal<"blocking" | "background">("blocking")
+
+  // performs repeated health check with a grace period for
+  // non-http connections, otherwise fails instantly
+  const [startupHealthCheck, healthCheckActions] = createResource(() =>
+    props.disableHealthCheck
+      ? true
+      : Effect.gen(function* () {
+          if (!server.current) return true
+          const { http, type } = server.current
+
+          while (true) {
+            const res = yield* Effect.promise(() => checkServerHealth(http))
+            if (res.healthy) return true
+            if (checkMode() === "background" || type === "http") return false
+          }
+        }).pipe(
+          Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }),
+          Effect.ensuring(Effect.sync(() => setCheckMode("background"))),
+          Effect.runPromise,
+        ),
+  )
+  const checking = createMemo(
+    () => checkMode() === "blocking" && ["unresolved", "pending"].includes(startupHealthCheck.state),
+  )
+
+  return (
+    <Show
+      when={!checking()}
+      fallback={
+        <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base">
+          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+        </div>
+      }
+    >
+      <Show
+        when={startupHealthCheck.latest}
+        fallback={
+          <ConnectionError
+            onRetry={() => {
+              if (checkMode() === "background") void healthCheckActions.refetch()
+            }}
+            onServerSelected={(key) => {
+              setCheckMode("blocking")
+              server.setActive(key)
+              void healthCheckActions.refetch()
+            }}
+          />
+        }
+      >
+        {props.children}
+      </Show>
+    </Show>
+  )
+}
+
+function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key: ServerConnection.Key) => void }) {
+  const language = useLanguage()
+  const server = useServer()
+  const others = () => server.list.filter((s) => ServerConnection.key(s) !== server.key)
+  const name = createMemo(() => server.name || server.key)
+  const serverToken = "\u0000server\u0000"
+  const unreachable = createMemo(() => language.t("app.server.unreachable", { server: serverToken }).split(serverToken))
+
+  const timer = setInterval(() => props.onRetry?.(), 1000)
+  onCleanup(() => clearInterval(timer))
+
+  return (
+    <div class="h-dvh w-screen flex flex-col items-center justify-center bg-background-base gap-6 p-6">
+      <div class="flex flex-col items-center max-w-md text-center">
+        <Splash class="w-12 h-15 mb-4" />
+        <p class="text-14-regular text-text-base">
+          {unreachable()[0]}
+          <span class="text-text-strong font-medium">{name()}</span>
+          {unreachable()[1]}
+        </p>
+        <p class="mt-1 text-12-regular text-text-weak">{language.t("app.server.retrying")}</p>
+      </div>
+      <Show when={others().length > 0}>
+        <div class="flex flex-col gap-2 w-full max-w-sm">
+          <span class="text-12-regular text-text-base text-center">{language.t("app.server.otherServers")}</span>
+          <div class="flex flex-col gap-1 bg-surface-base rounded-lg p-2">
+            <For each={others()}>
+              {(conn) => {
+                const key = ServerConnection.key(conn)
+                return (
+                  <button
+                    type="button"
+                    class="flex items-center gap-3 w-full px-3 py-2 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
+                    onClick={() => props.onServerSelected?.(key)}
+                  >
+                    <span class="text-14-regular text-text-strong truncate">{serverName(conn)}</span>
+                  </button>
+                )
+              }}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+function ServerKey(props: ParentProps) {
+  const server = useServer()
+  return (
+    <Show when={server.key} keyed>
+      {props.children}
+    </Show>
+  )
+}
+
+export function AppInterface(props: {
+  children?: JSX.Element
+  defaultServer: ServerConnection.Key
+  canonicalLocalServer?: ServerConnection.Key
+  servers?: Array<ServerConnection.Any>
+  router?: Component<BaseRouterProps>
+  disableHealthCheck?: boolean
+}) {
+  return (
+    <ServerProvider
+      defaultServer={props.defaultServer}
+      canonicalLocalServer={props.canonicalLocalServer}
+      servers={props.servers}
+    >
+      <GlobalProvider>
+        <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
+          <Dynamic
+            component={props.router ?? Router}
+            root={(routerProps) => (
+              <TabsProvider>
+                <ServerKey>
+                  <QueryProvider>
+                    <ServerSDKProvider>
+                      <ServerSyncProvider>
+                        <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>
+                      </ServerSyncProvider>
+                    </ServerSDKProvider>
+                  </QueryProvider>
+                </ServerKey>
+              </TabsProvider>
+            )}
+          >
+            <Route path="/" component={HomeRoute} />
+            <Route path="/new-session" component={DraftRoute} />
+            <Route path="/:dir" component={DirectoryLayout}>
+              <Route path="/" component={() => <Navigate href="session" />} />
+              <Route path="/session/:id?" component={SessionRoute} />
+            </Route>
+          </Dynamic>
+        </ConnectionGate>
+      </GlobalProvider>
+    </ServerProvider>
+  )
+}

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

@@ -0,0 +1,443 @@
+import { useIsRouting, useLocation } from "@solidjs/router"
+import { batch, createEffect, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useLanguage } from "@/context/language"
+
+type Mem = Performance & {
+  memory?: {
+    usedJSHeapSize: number
+    jsHeapSizeLimit: number
+  }
+}
+
+type Evt = PerformanceEntry & {
+  interactionId?: number
+  processingStart?: number
+}
+
+type Shift = PerformanceEntry & {
+  hadRecentInput: boolean
+  value: number
+}
+
+type Obs = PerformanceObserverInit & {
+  durationThreshold?: number
+}
+
+const span = 5000
+
+const ms = (n?: number, d = 0) => {
+  if (n === undefined || Number.isNaN(n)) return
+  return `${n.toFixed(d)}ms`
+}
+
+const time = (n?: number) => {
+  if (n === undefined || Number.isNaN(n)) return
+  return `${Math.round(n)}`
+}
+
+const mb = (n?: number) => {
+  if (n === undefined || Number.isNaN(n)) return
+  const v = n / 1024 / 1024
+  return `${v >= 1024 ? v.toFixed(0) : v.toFixed(1)}MB`
+}
+
+const bad = (n: number | undefined, limit: number, low = false) => {
+  if (n === undefined || Number.isNaN(n)) return false
+  return low ? n < limit : n > limit
+}
+
+const session = (path: string) => path.includes("/session")
+
+function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string; value: string; wide?: boolean }) {
+  return (
+    <Tooltip value={props.tip} placement="top">
+      <div
+        classList={{
+          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] px-0.5 py-1 text-center": true,
+          "col-span-2": !!props.wide,
+        }}
+      >
+        <div class="text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70">{props.label}</div>
+        <div
+          classList={{
+            "text-[13px] leading-none font-bold tabular-nums sm:text-[14px]": true,
+            "text-text-on-critical-base": !!props.bad,
+            "opacity-70": !!props.dim,
+          }}
+        >
+          {props.value}
+        </div>
+      </div>
+    </Tooltip>
+  )
+}
+
+export function DebugBar() {
+  const language = useLanguage()
+  const location = useLocation()
+  const routing = useIsRouting()
+  const [state, setState] = createStore({
+    cls: undefined as number | undefined,
+    delay: undefined as number | undefined,
+    fps: undefined as number | undefined,
+    gap: undefined as number | undefined,
+    heap: {
+      limit: undefined as number | undefined,
+      used: undefined as number | undefined,
+    },
+    inp: undefined as number | undefined,
+    jank: undefined as number | undefined,
+    long: {
+      block: undefined as number | undefined,
+      count: undefined as number | undefined,
+      max: undefined as number | undefined,
+    },
+    nav: {
+      dur: undefined as number | undefined,
+      pending: false,
+    },
+  })
+
+  const na = () => language.t("debugBar.na")
+  const heap = () => (state.heap.limit ? (state.heap.used ?? 0) / state.heap.limit : undefined)
+  const heapv = () => {
+    const value = heap()
+    if (value === undefined) return na()
+    return `${Math.round(value * 100)}%`
+  }
+  const longv = () => (state.long.count === undefined ? na() : `${time(state.long.block) ?? na()}/${state.long.count}`)
+  const navv = () => (state.nav.pending ? "..." : (time(state.nav.dur) ?? na()))
+
+  let prev = ""
+  let start = 0
+  let init = false
+  let one = 0
+  let two = 0
+
+  createEffect(() => {
+    const busy = routing()
+    const next = `${location.pathname}${location.search}`
+
+    if (!init) {
+      init = true
+      prev = next
+      return
+    }
+
+    if (busy) {
+      if (one !== 0) cancelAnimationFrame(one)
+      if (two !== 0) cancelAnimationFrame(two)
+      one = 0
+      two = 0
+      if (start !== 0) return
+      start = performance.now()
+      if (session(prev)) setState("nav", { dur: undefined, pending: true })
+      return
+    }
+
+    if (start === 0) {
+      prev = next
+      return
+    }
+
+    const at = start
+    const from = prev
+    start = 0
+    prev = next
+
+    if (!(session(from) || session(next))) return
+
+    if (one !== 0) cancelAnimationFrame(one)
+    if (two !== 0) cancelAnimationFrame(two)
+    one = requestAnimationFrame(() => {
+      one = 0
+      two = requestAnimationFrame(() => {
+        two = 0
+        setState("nav", { dur: performance.now() - at, pending: false })
+      })
+    })
+  })
+
+  onMount(() => {
+    const obs: PerformanceObserver[] = []
+    const fps: Array<{ at: number; dur: number }> = []
+    const long: Array<{ at: number; dur: number }> = []
+    const seen = new Map<number | string, { at: number; delay: number; dur: number }>()
+    let hasLong = false
+    let poll: number | undefined
+    let raf = 0
+    let last = 0
+    let snap = 0
+
+    const trim = (list: Array<{ at: number; dur: number }>, span: number, at: number) => {
+      while (list[0] && at - list[0].at > span) list.shift()
+    }
+
+    const syncFrame = (at: number) => {
+      trim(fps, span, at)
+      const total = fps.reduce((sum, entry) => sum + entry.dur, 0)
+      const gap = fps.reduce((max, entry) => Math.max(max, entry.dur), 0)
+      const jank = fps.filter((entry) => entry.dur > 32).length
+      batch(() => {
+        setState("fps", total > 0 ? (fps.length * 1000) / total : undefined)
+        setState("gap", gap > 0 ? gap : undefined)
+        setState("jank", jank)
+      })
+    }
+
+    const syncLong = (at = performance.now()) => {
+      if (!hasLong) return
+      trim(long, span, at)
+      const block = long.reduce((sum, entry) => sum + Math.max(0, entry.dur - 50), 0)
+      const max = long.reduce((hi, entry) => Math.max(hi, entry.dur), 0)
+      setState("long", { block, count: long.length, max })
+    }
+
+    const syncInp = (at = performance.now()) => {
+      for (const [key, entry] of seen) {
+        if (at - entry.at > span) seen.delete(key)
+      }
+      let delay = 0
+      let inp = 0
+      for (const entry of seen.values()) {
+        delay = Math.max(delay, entry.delay)
+        inp = Math.max(inp, entry.dur)
+      }
+      batch(() => {
+        setState("delay", delay > 0 ? delay : undefined)
+        setState("inp", inp > 0 ? inp : undefined)
+      })
+    }
+
+    const syncHeap = () => {
+      const mem = (performance as Mem).memory
+      if (!mem) return
+      setState("heap", { limit: mem.jsHeapSizeLimit, used: mem.usedJSHeapSize })
+    }
+
+    const reset = () => {
+      fps.length = 0
+      long.length = 0
+      seen.clear()
+      last = 0
+      snap = 0
+      batch(() => {
+        setState("fps", undefined)
+        setState("gap", undefined)
+        setState("jank", undefined)
+        setState("delay", undefined)
+        setState("inp", undefined)
+        if (hasLong) setState("long", { block: 0, count: 0, max: 0 })
+      })
+    }
+
+    const watch = (type: string, init: Obs, fn: (entries: PerformanceEntry[]) => void) => {
+      if (typeof PerformanceObserver === "undefined") return false
+      if (!(PerformanceObserver.supportedEntryTypes ?? []).includes(type)) return false
+      const ob = new PerformanceObserver((list) => fn(list.getEntries()))
+      try {
+        ob.observe(init)
+        obs.push(ob)
+        return true
+      } catch {
+        ob.disconnect()
+        return false
+      }
+    }
+
+    if (
+      watch("layout-shift", { buffered: true, type: "layout-shift" }, (entries) => {
+        const add = entries.reduce((sum, entry) => {
+          const item = entry as Shift
+          if (item.hadRecentInput) return sum
+          return sum + item.value
+        }, 0)
+        if (add === 0) return
+        setState("cls", (value) => (value ?? 0) + add)
+      })
+    ) {
+      setState("cls", 0)
+    }
+
+    if (
+      watch("longtask", { buffered: true, type: "longtask" }, (entries) => {
+        const at = performance.now()
+        long.push(...entries.map((entry) => ({ at: entry.startTime, dur: entry.duration })))
+        syncLong(at)
+      })
+    ) {
+      hasLong = true
+      setState("long", { block: 0, count: 0, max: 0 })
+    }
+
+    watch("event", { buffered: true, durationThreshold: 16, type: "event" }, (entries) => {
+      for (const raw of entries) {
+        const entry = raw as Evt
+        if (entry.duration < 16) continue
+        const key =
+          entry.interactionId && entry.interactionId > 0
+            ? entry.interactionId
+            : `${entry.name}:${Math.round(entry.startTime)}`
+        const prev = seen.get(key)
+        const delay = Math.max(0, (entry.processingStart ?? entry.startTime) - entry.startTime)
+        seen.set(key, {
+          at: entry.startTime,
+          delay: Math.max(prev?.delay ?? 0, delay),
+          dur: Math.max(prev?.dur ?? 0, entry.duration),
+        })
+        if (seen.size <= 200) continue
+        const first = seen.keys().next().value
+        if (first !== undefined) seen.delete(first)
+      }
+      syncInp()
+    })
+
+    const loop = (at: number) => {
+      if (document.visibilityState !== "visible") {
+        raf = 0
+        return
+      }
+
+      if (last === 0) {
+        last = at
+        raf = requestAnimationFrame(loop)
+        return
+      }
+
+      fps.push({ at, dur: at - last })
+      last = at
+
+      if (at - snap >= 250) {
+        snap = at
+        syncFrame(at)
+      }
+
+      raf = requestAnimationFrame(loop)
+    }
+
+    const stop = () => {
+      if (raf !== 0) cancelAnimationFrame(raf)
+      raf = 0
+      if (poll === undefined) return
+      clearInterval(poll)
+      poll = undefined
+    }
+
+    const start = () => {
+      if (document.visibilityState !== "visible") return
+      if (poll === undefined) {
+        poll = window.setInterval(() => {
+          syncLong()
+          syncInp()
+          syncHeap()
+        }, 1000)
+      }
+      if (raf !== 0) return
+      raf = requestAnimationFrame(loop)
+    }
+
+    const vis = () => {
+      if (document.visibilityState !== "visible") {
+        stop()
+        return
+      }
+      reset()
+      start()
+    }
+
+    syncHeap()
+    start()
+    makeEventListener(document, "visibilitychange", vis)
+
+    onCleanup(() => {
+      if (one !== 0) cancelAnimationFrame(one)
+      if (two !== 0) cancelAnimationFrame(two)
+      stop()
+      for (const ob of obs) ob.disconnect()
+    })
+  })
+
+  return (
+    <aside
+      aria-label={language.t("debugBar.ariaLabel")}
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 text-text-strong shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
+    >
+      <div class="grid grid-cols-5 gap-px font-mono">
+        <Cell
+          label={language.t("debugBar.nav.label")}
+          tip={language.t("debugBar.nav.tip")}
+          value={navv()}
+          bad={bad(state.nav.dur, 400)}
+          dim={state.nav.dur === undefined && !state.nav.pending}
+        />
+        <Cell
+          label={language.t("debugBar.fps.label")}
+          tip={language.t("debugBar.fps.tip")}
+          value={state.fps === undefined ? na() : `${Math.round(state.fps)}`}
+          bad={bad(state.fps, 50, true)}
+          dim={state.fps === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.frame.label")}
+          tip={language.t("debugBar.frame.tip")}
+          value={time(state.gap) ?? na()}
+          bad={bad(state.gap, 50)}
+          dim={state.gap === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.jank.label")}
+          tip={language.t("debugBar.jank.tip")}
+          value={state.jank === undefined ? na() : `${state.jank}`}
+          bad={bad(state.jank, 8)}
+          dim={state.jank === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.long.label")}
+          tip={language.t("debugBar.long.tip", { max: ms(state.long.max) ?? na() })}
+          value={longv()}
+          bad={bad(state.long.block, 200)}
+          dim={state.long.count === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.delay.label")}
+          tip={language.t("debugBar.delay.tip")}
+          value={time(state.delay) ?? na()}
+          bad={bad(state.delay, 100)}
+          dim={state.delay === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.inp.label")}
+          tip={language.t("debugBar.inp.tip")}
+          value={time(state.inp) ?? na()}
+          bad={bad(state.inp, 200)}
+          dim={state.inp === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.cls.label")}
+          tip={language.t("debugBar.cls.tip")}
+          value={state.cls === undefined ? na() : state.cls.toFixed(2)}
+          bad={bad(state.cls, 0.1)}
+          dim={state.cls === undefined}
+        />
+        <Cell
+          label={language.t("debugBar.mem.label")}
+          tip={
+            state.heap.used === undefined
+              ? language.t("debugBar.mem.tipUnavailable")
+              : language.t("debugBar.mem.tip", {
+                  used: mb(state.heap.used) ?? na(),
+                  limit: mb(state.heap.limit) ?? na(),
+                })
+          }
+          value={heapv()}
+          bad={bad(heap(), 0.8)}
+          dim={state.heap.used === undefined}
+          wide
+        />
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,654 @@
+import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List, type ListRef } from "@opencode-ai/ui/list"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { showToast } from "@/utils/toast"
+import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { Link } from "@/components/link"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
+
+export function DialogConnectProvider(props: { provider: string }) {
+  const dialog = useDialog()
+  const serverSync = useServerSync()
+  const serverSDK = useServerSDK()
+  const language = useLanguage()
+  const providers = useProviders()
+
+  const all = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+
+  const alive = { value: true }
+  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+
+  onCleanup(() => {
+    alive.value = false
+    if (timer.current === undefined) return
+    clearTimeout(timer.current)
+    timer.current = undefined
+  })
+
+  const provider = createMemo(
+    () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!,
+  )
+  const fallback = createMemo<ProviderAuthMethod[]>(() => [
+    {
+      type: "api" as const,
+      label: language.t("provider.connect.method.apiKey"),
+    },
+  ])
+  const [auth] = createResource(
+    () => props.provider,
+    async () => {
+      const cached = serverSync.data.provider_auth[props.provider]
+      if (cached) return cached
+      const res = await serverSDK.client.provider.auth()
+      if (!alive.value) return fallback()
+      serverSync.set("provider_auth", res.data ?? {})
+      return res.data?.[props.provider] ?? fallback()
+    },
+  )
+  const loading = createMemo(() => auth.loading && !serverSync.data.provider_auth[props.provider])
+  const methods = createMemo(() => auth.latest ?? serverSync.data.provider_auth[props.provider] ?? fallback())
+  const [store, setStore] = createStore({
+    methodIndex: undefined as undefined | number,
+    authorization: undefined as undefined | ProviderAuthAuthorization,
+    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
+    error: undefined as string | undefined,
+  })
+
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.prompt" }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: ProviderAuthAuthorization }
+    | { type: "auth.error"; error: string }
+
+  function dispatch(action: Action) {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
+  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
+
+  const methodLabel = (value?: { type?: string; label?: string }) => {
+    if (!value) return ""
+    if (value.type === "api") return language.t("provider.connect.method.apiKey")
+    return value.label ?? ""
+  }
+
+  function formatError(value: unknown, fallback: string): string {
+    if (value && typeof value === "object" && "data" in value) {
+      const data = (value as { data?: { message?: unknown } }).data
+      if (typeof data?.message === "string" && data.message) return data.message
+    }
+    if (value && typeof value === "object" && "error" in value) {
+      const nested = formatError((value as { error?: unknown }).error, "")
+      if (nested) return nested
+    }
+    if (value && typeof value === "object" && "message" in value) {
+      const message = (value as { message?: unknown }).message
+      if (typeof message === "string" && message) return message
+    }
+    if (value instanceof Error && value.message) return value.message
+    if (typeof value === "string" && value) return value
+    return fallback
+  }
+
+  async function selectMethod(index: number, inputs?: Record<string, string>) {
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+
+    const method = methods()[index]
+    dispatch({ type: "method.select", index })
+
+    if (method.type === "oauth") {
+      if (method.prompts?.length && !inputs) {
+        dispatch({ type: "auth.prompt" })
+        return
+      }
+      dispatch({ type: "auth.pending" })
+      const start = Date.now()
+      await serverSDK.client.provider.oauth
+        .authorize(
+          {
+            providerID: props.provider,
+            method: index,
+            inputs,
+          },
+          { throwOnError: true },
+        )
+        .then((x) => {
+          if (!alive.value) return
+          const elapsed = Date.now() - start
+          const delay = 1000 - elapsed
+
+          if (delay > 0) {
+            if (timer.current !== undefined) clearTimeout(timer.current)
+            timer.current = setTimeout(() => {
+              timer.current = undefined
+              if (!alive.value) return
+              dispatch({ type: "auth.complete", authorization: x.data! })
+            }, delay)
+            return
+          }
+          dispatch({ type: "auth.complete", authorization: x.data! })
+        })
+        .catch((e) => {
+          if (!alive.value) return
+          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
+        })
+    }
+  }
+
+  function OAuthPromptsView() {
+    const [formStore, setFormStore] = createStore({
+      value: {} as Record<string, string>,
+      index: 0,
+    })
+
+    const prompts = createMemo<NonNullable<ProviderAuthMethod["prompts"]>>(() => {
+      const value = method()
+      if (value?.type !== "oauth") return []
+      return value.prompts ?? []
+    })
+    const matches = (prompt: NonNullable<ReturnType<typeof prompts>[number]>, value: Record<string, string>) => {
+      if (!prompt.when) return true
+      const actual = value[prompt.when.key]
+      if (actual === undefined) return false
+      return prompt.when.op === "eq" ? actual === prompt.when.value : actual !== prompt.when.value
+    }
+    const current = createMemo(() => {
+      const all = prompts()
+      const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
+      if (index === -1) return
+      return {
+        index,
+        prompt: all[index],
+      }
+    })
+    const valid = createMemo(() => {
+      const item = current()
+      if (!item || item.prompt.type !== "text") return false
+      const value = formStore.value[item.prompt.key] ?? ""
+      return value.trim().length > 0
+    })
+
+    async function next(index: number, value: Record<string, string>) {
+      if (store.methodIndex === undefined) return
+      const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
+      if (next !== -1) {
+        setFormStore("index", next)
+        return
+      }
+      await selectMethod(store.methodIndex, value)
+    }
+
+    async function handleSubmit(e: SubmitEvent) {
+      e.preventDefault()
+      const item = current()
+      if (!item || item.prompt.type !== "text") return
+      if (!valid()) return
+      await next(item.index, formStore.value)
+    }
+
+    const item = () => current()
+    const text = createMemo(() => {
+      const prompt = item()?.prompt
+      if (!prompt || prompt.type !== "text") return
+      return prompt
+    })
+    const select = createMemo(() => {
+      const prompt = item()?.prompt
+      if (!prompt || prompt.type !== "select") return
+      return prompt
+    })
+
+    return (
+      <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+        <Switch>
+          <Match when={item()?.prompt.type === "text"}>
+            <TextField
+              type="text"
+              label={text()?.message ?? ""}
+              placeholder={text()?.placeholder}
+              value={text() ? (formStore.value[text()!.key] ?? "") : ""}
+              onChange={(value) => {
+                const prompt = text()
+                if (!prompt) return
+                setFormStore("value", prompt.key, value)
+              }}
+            />
+            <Button class="w-auto" type="submit" size="large" variant="primary" disabled={!valid()}>
+              {language.t("common.continue")}
+            </Button>
+          </Match>
+          <Match when={item()?.prompt.type === "select"}>
+            <div class="w-full flex flex-col gap-1.5">
+              <div class="text-14-regular text-text-base">{select()?.message}</div>
+              <div>
+                <List
+                  class="px-3"
+                  items={select()?.options ?? []}
+                  key={(x) => x.value}
+                  current={select()?.options.find((x) => x.value === formStore.value[select()!.key])}
+                  onSelect={(value) => {
+                    if (!value) return
+                    const prompt = select()
+                    if (!prompt) return
+                    const nextValue = {
+                      ...formStore.value,
+                      [prompt.key]: value.value,
+                    }
+                    setFormStore("value", prompt.key, value.value)
+                    void next(item()!.index, nextValue)
+                  }}
+                >
+                  {(option) => (
+                    <div class="w-full flex items-center gap-x-2">
+                      <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
+                        <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
+                      </div>
+                      <span>{option.label}</span>
+                      <span class="text-14-regular text-text-weak">{option.hint}</span>
+                    </div>
+                  )}
+                </List>
+              </div>
+            </div>
+          </Match>
+        </Switch>
+      </form>
+    )
+  }
+
+  let listRef: ListRef | undefined
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
+      return
+    }
+    if (e.key === "Escape") return
+    listRef?.onKeyDown(e)
+  }
+
+  let auto = false
+  createEffect(() => {
+    if (auto) return
+    if (loading()) return
+    if (methods().length === 1) {
+      auto = true
+      void selectMethod(0)
+    }
+  })
+
+  async function complete() {
+    await serverSDK.client.global.dispose()
+    dialog.close()
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
+      description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
+    })
+  }
+
+  function goBack() {
+    if (methods().length === 1) {
+      all()
+      return
+    }
+    if (store.authorization) {
+      dispatch({ type: "method.reset" })
+      return
+    }
+    if (store.methodIndex !== undefined) {
+      dispatch({ type: "method.reset" })
+      return
+    }
+    all()
+  }
+
+  function MethodSelection() {
+    return (
+      <>
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.selectMethod", { provider: provider().name })}
+        </div>
+        <div>
+          <List
+            class="px-3"
+            ref={(ref) => {
+              listRef = ref
+            }}
+            items={methods}
+            key={(m) => m?.label}
+            onSelect={async (selected, index) => {
+              if (!selected) return
+              void selectMethod(index)
+            }}
+          >
+            {(i) => (
+              <div class="w-full flex items-center gap-x-2">
+                <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
+                  <div class="w-2.5 h-0.5 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
+                </div>
+                <span>{methodLabel(i)}</span>
+              </div>
+            )}
+          </List>
+        </div>
+      </>
+    )
+  }
+
+  function ApiAuthView() {
+    const [formStore, setFormStore] = createStore({
+      value: "",
+      error: undefined as string | undefined,
+    })
+
+    async function handleSubmit(e: SubmitEvent) {
+      e.preventDefault()
+
+      const form = e.currentTarget as HTMLFormElement
+      const formData = new FormData(form)
+      const apiKey = formData.get("apiKey") as string
+
+      if (!apiKey?.trim()) {
+        setFormStore("error", language.t("provider.connect.apiKey.required"))
+        return
+      }
+
+      setFormStore("error", undefined)
+      await serverSDK.client.auth.set({
+        providerID: props.provider,
+        auth: {
+          type: "api",
+          key: apiKey,
+        },
+      })
+      await complete()
+    }
+
+    return (
+      <div class="flex flex-col gap-6">
+        <Switch>
+          <Match when={provider().id === "opencode"}>
+            <div class="flex flex-col gap-4">
+              <div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line1")}</div>
+              <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")}
+                <Link href="https://opencode.ai/zen" tabIndex={-1}>
+                  {language.t("provider.connect.opencodeZen.visit.link")}
+                </Link>
+                {language.t("provider.connect.opencodeZen.visit.suffix")}
+              </div>
+            </div>
+          </Match>
+          <Match when={true}>
+            <div class="text-14-regular text-text-base">
+              {language.t("provider.connect.apiKey.description", { provider: provider().name })}
+            </div>
+          </Match>
+        </Switch>
+        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
+            placeholder={language.t("provider.connect.apiKey.placeholder")}
+            name="apiKey"
+            value={formStore.value}
+            onChange={(v) => setFormStore("value", v)}
+            validationState={formStore.error ? "invalid" : undefined}
+            error={formStore.error}
+          />
+          <Button class="w-auto" type="submit" size="large" variant="primary">
+            {language.t("common.continue")}
+          </Button>
+        </form>
+      </div>
+    )
+  }
+
+  function OAuthCodeView() {
+    const [formStore, setFormStore] = createStore({
+      value: "",
+      error: undefined as string | undefined,
+    })
+
+    async function handleSubmit(e: SubmitEvent) {
+      e.preventDefault()
+
+      const form = e.currentTarget as HTMLFormElement
+      const formData = new FormData(form)
+      const code = formData.get("code") as string
+
+      if (!code?.trim()) {
+        setFormStore("error", language.t("provider.connect.oauth.code.required"))
+        return
+      }
+
+      setFormStore("error", undefined)
+      const result = await serverSDK.client.provider.oauth
+        .callback({
+          providerID: props.provider,
+          method: store.methodIndex,
+          code,
+        })
+        .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+        .catch((error) => ({ ok: false as const, error }))
+      if (result.ok) {
+        await complete()
+        return
+      }
+      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
+    }
+
+    return (
+      <div class="flex flex-col gap-6">
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.oauth.code.visit.prefix")}
+          <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">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })}
+            placeholder={language.t("provider.connect.oauth.code.placeholder")}
+            name="code"
+            value={formStore.value}
+            onChange={(v) => setFormStore("value", v)}
+            validationState={formStore.error ? "invalid" : undefined}
+            error={formStore.error}
+          />
+          <Button class="w-auto" type="submit" size="large" variant="primary">
+            {language.t("common.continue")}
+          </Button>
+        </form>
+      </div>
+    )
+  }
+
+  function OAuthAutoView() {
+    const code = createMemo(() => {
+      const instructions = store.authorization?.instructions
+      if (instructions?.includes(":")) {
+        return instructions.split(":").pop()?.trim()
+      }
+      return instructions
+    })
+
+    onMount(() => {
+      void (async () => {
+        const result = await serverSDK.client.provider.oauth
+          .callback({
+            providerID: props.provider,
+            method: store.methodIndex,
+          })
+          .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+          .catch((error) => ({ ok: false as const, error }))
+
+        if (!alive.value) return
+
+        if (!result.ok) {
+          const message = formatError(result.error, language.t("common.requestFailed"))
+          dispatch({ type: "auth.error", error: message })
+          return
+        }
+
+        await complete()
+      })()
+    })
+
+    return (
+      <div class="flex flex-col gap-6">
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.oauth.auto.visit.prefix")}
+          <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
+          label={language.t("provider.connect.oauth.auto.confirmationCode")}
+          class="font-mono"
+          value={code()}
+          readOnly
+          copyable
+        />
+        <div class="text-14-regular text-text-base flex items-center gap-4">
+          <Spinner />
+          <span>{language.t("provider.connect.status.waiting")}</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Dialog
+      title={
+        <IconButton
+          tabIndex={-1}
+          icon="arrow-left"
+          variant="ghost"
+          onClick={goBack}
+          aria-label={language.t("common.goBack")}
+        />
+      }
+    >
+      <div class="flex flex-col gap-6 px-2.5 pb-3">
+        <div class="px-2.5 flex gap-4 items-center">
+          <ProviderIcon id={props.provider} class="size-5 shrink-0 icon-strong-base" />
+          <div class="text-16-medium text-text-strong">
+            <Switch>
+              <Match when={props.provider === "anthropic" && method()?.label?.toLowerCase().includes("max")}>
+                {language.t("provider.connect.title.anthropicProMax")}
+              </Match>
+              <Match when={true}>{language.t("provider.connect.title", { provider: provider().name })}</Match>
+            </Switch>
+          </div>
+        </div>
+        <div class="px-2.5 pb-10 flex flex-col gap-6">
+          <div onKeyDown={handleKey} tabIndex={0} autofocus={store.methodIndex === undefined ? true : undefined}>
+            <Switch>
+              <Match when={loading()}>
+                <div class="text-14-regular text-text-base">
+                  <div class="flex items-center gap-x-2">
+                    <Spinner />
+                    <span>{language.t("provider.connect.status.inProgress")}</span>
+                  </div>
+                </div>
+              </Match>
+              <Match when={store.methodIndex === undefined}>
+                <MethodSelection />
+              </Match>
+              <Match when={store.state === "pending"}>
+                <div class="text-14-regular text-text-base">
+                  <div class="flex items-center gap-x-2">
+                    <Spinner />
+                    <span>{language.t("provider.connect.status.inProgress")}</span>
+                  </div>
+                </div>
+              </Match>
+              <Match when={store.state === "prompt"}>
+                <OAuthPromptsView />
+              </Match>
+              <Match when={store.state === "error"}>
+                <div class="text-14-regular text-text-base">
+                  <div class="flex items-center gap-x-2">
+                    <Icon name="circle-ban-sign" class="text-icon-critical-base" />
+                    <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
+                  </div>
+                </div>
+              </Match>
+              <Match when={method()?.type === "api"}>
+                <ApiAuthView />
+              </Match>
+              <Match when={method()?.type === "oauth"}>
+                <Switch>
+                  <Match when={store.authorization?.method === "code"}>
+                    <OAuthCodeView />
+                  </Match>
+                  <Match when={store.authorization?.method === "auto"}>
+                    <OAuthAutoView />
+                  </Match>
+                </Switch>
+              </Match>
+            </Switch>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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

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

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

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

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

@@ -0,0 +1,329 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { useMutation } from "@tanstack/solid-query"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { showToast } from "@/utils/toast"
+import { batch, For } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { Link } from "@/components/link"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
+import { DialogSelectProvider } from "./dialog-select-provider"
+
+type Props = {
+  back?: "providers" | "close"
+}
+
+export function DialogCustomProvider(props: Props) {
+  const dialog = useDialog()
+  const serverSync = useServerSync()
+  const serverSDK = useServerSDK()
+  const language = useLanguage()
+
+  const [form, setForm] = createStore<FormState>({
+    providerID: "",
+    name: "",
+    baseURL: "",
+    apiKey: "",
+    models: [modelRow()],
+    headers: [headerRow()],
+    err: {},
+  })
+
+  const goBack = () => {
+    if (props.back === "close") {
+      dialog.close()
+      return
+    }
+    dialog.show(() => <DialogSelectProvider />)
+  }
+
+  const addModel = () => {
+    setForm(
+      "models",
+      produce((rows) => {
+        rows.push(modelRow())
+      }),
+    )
+  }
+
+  const removeModel = (index: number) => {
+    if (form.models.length <= 1) return
+    setForm(
+      "models",
+      produce((rows) => {
+        rows.splice(index, 1)
+      }),
+    )
+  }
+
+  const addHeader = () => {
+    setForm(
+      "headers",
+      produce((rows) => {
+        rows.push(headerRow())
+      }),
+    )
+  }
+
+  const removeHeader = (index: number) => {
+    if (form.headers.length <= 1) return
+    setForm(
+      "headers",
+      produce((rows) => {
+        rows.splice(index, 1)
+      }),
+    )
+  }
+
+  const setField = (key: "providerID" | "name" | "baseURL" | "apiKey", value: string) => {
+    setForm(key, value)
+    if (key === "apiKey") return
+    setForm("err", key, undefined)
+  }
+
+  const setModel = (index: number, key: "id" | "name", value: string) => {
+    batch(() => {
+      setForm("models", index, key, value)
+      setForm("models", index, "err", key, undefined)
+    })
+  }
+
+  const setHeader = (index: number, key: "key" | "value", value: string) => {
+    batch(() => {
+      setForm("headers", index, key, value)
+      setForm("headers", index, "err", key, undefined)
+    })
+  }
+
+  const validate = () => {
+    const output = validateCustomProvider({
+      form,
+      t: language.t,
+      disabledProviders: serverSync.data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
+    })
+    batch(() => {
+      setForm("err", output.err)
+      output.models.forEach((err, index) => setForm("models", index, "err", err))
+      output.headers.forEach((err, index) => setForm("headers", index, "err", err))
+    })
+    return output.result
+  }
+
+  const saveMutation = useMutation(() => ({
+    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
+      const disabledProviders = serverSync.data.config.disabled_providers ?? []
+      const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
+
+      if (result.key) {
+        await serverSDK.client.auth.set({
+          providerID: result.providerID,
+          auth: {
+            type: "api",
+            key: result.key,
+          },
+        })
+      }
+
+      await serverSync.updateConfig({
+        provider: { [result.providerID]: result.config },
+        disabled_providers: nextDisabled,
+      })
+      return result
+    },
+    onSuccess: (result) => {
+      dialog.close()
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: language.t("provider.connect.toast.connected.title", { provider: result.name }),
+        description: language.t("provider.connect.toast.connected.description", { provider: result.name }),
+      })
+    },
+    onError: (err) => {
+      const message = err instanceof Error ? err.message : String(err)
+      showToast({ title: language.t("common.requestFailed"), description: message })
+    },
+  }))
+
+  const save = (e: SubmitEvent) => {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+
+    const result = validate()
+    if (!result) return
+    saveMutation.mutate(result)
+  }
+
+  return (
+    <Dialog
+      title={
+        <IconButton
+          tabIndex={-1}
+          icon="arrow-left"
+          variant="ghost"
+          onClick={goBack}
+          aria-label={language.t("common.goBack")}
+        />
+      }
+      transition
+    >
+      <div class="flex flex-col gap-6 px-2.5 pb-3 overflow-y-auto max-h-[60vh]">
+        <div class="px-2.5 flex gap-4 items-center">
+          <ProviderIcon id="synthetic" class="size-5 shrink-0 icon-strong-base" />
+          <div class="text-16-medium text-text-strong">{language.t("provider.custom.title")}</div>
+        </div>
+
+        <form onSubmit={save} class="px-2.5 pb-6 flex flex-col gap-6">
+          <p class="text-14-regular text-text-base">
+            {language.t("provider.custom.description.prefix")}
+            <Link href="https://opencode.ai/docs/providers/#custom-provider" tabIndex={-1}>
+              {language.t("provider.custom.description.link")}
+            </Link>
+            {language.t("provider.custom.description.suffix")}
+          </p>
+
+          <div class="flex flex-col gap-4">
+            <TextField
+              autofocus
+              label={language.t("provider.custom.field.providerID.label")}
+              placeholder={language.t("provider.custom.field.providerID.placeholder")}
+              description={language.t("provider.custom.field.providerID.description")}
+              value={form.providerID}
+              onChange={(v) => setField("providerID", v)}
+              validationState={form.err.providerID ? "invalid" : undefined}
+              error={form.err.providerID}
+            />
+            <TextField
+              label={language.t("provider.custom.field.name.label")}
+              placeholder={language.t("provider.custom.field.name.placeholder")}
+              value={form.name}
+              onChange={(v) => setField("name", v)}
+              validationState={form.err.name ? "invalid" : undefined}
+              error={form.err.name}
+            />
+            <TextField
+              label={language.t("provider.custom.field.baseURL.label")}
+              placeholder={language.t("provider.custom.field.baseURL.placeholder")}
+              value={form.baseURL}
+              onChange={(v) => setField("baseURL", v)}
+              validationState={form.err.baseURL ? "invalid" : undefined}
+              error={form.err.baseURL}
+            />
+            <TextField
+              label={language.t("provider.custom.field.apiKey.label")}
+              placeholder={language.t("provider.custom.field.apiKey.placeholder")}
+              description={language.t("provider.custom.field.apiKey.description")}
+              value={form.apiKey}
+              onChange={(v) => setField("apiKey", v)}
+            />
+          </div>
+
+          <div class="flex flex-col gap-3">
+            <label class="text-12-medium text-text-weak">{language.t("provider.custom.models.label")}</label>
+            <For each={form.models}>
+              {(m, i) => (
+                <div class="flex gap-2 items-start" data-row={m.row}>
+                  <div class="flex-1">
+                    <TextField
+                      label={language.t("provider.custom.models.id.label")}
+                      hideLabel
+                      placeholder={language.t("provider.custom.models.id.placeholder")}
+                      value={m.id}
+                      onChange={(v) => setModel(i(), "id", v)}
+                      validationState={m.err.id ? "invalid" : undefined}
+                      error={m.err.id}
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <TextField
+                      label={language.t("provider.custom.models.name.label")}
+                      hideLabel
+                      placeholder={language.t("provider.custom.models.name.placeholder")}
+                      value={m.name}
+                      onChange={(v) => setModel(i(), "name", v)}
+                      validationState={m.err.name ? "invalid" : undefined}
+                      error={m.err.name}
+                    />
+                  </div>
+                  <IconButton
+                    type="button"
+                    icon="trash"
+                    variant="ghost"
+                    class="mt-1.5"
+                    onClick={() => removeModel(i())}
+                    disabled={form.models.length <= 1}
+                    aria-label={language.t("provider.custom.models.remove")}
+                  />
+                </div>
+              )}
+            </For>
+            <Button type="button" size="small" variant="ghost" icon="plus-small" onClick={addModel} class="self-start">
+              {language.t("provider.custom.models.add")}
+            </Button>
+          </div>
+
+          <div class="flex flex-col gap-3">
+            <label class="text-12-medium text-text-weak">{language.t("provider.custom.headers.label")}</label>
+            <For each={form.headers}>
+              {(h, i) => (
+                <div class="flex gap-2 items-start" data-row={h.row}>
+                  <div class="flex-1">
+                    <TextField
+                      label={language.t("provider.custom.headers.key.label")}
+                      hideLabel
+                      placeholder={language.t("provider.custom.headers.key.placeholder")}
+                      value={h.key}
+                      onChange={(v) => setHeader(i(), "key", v)}
+                      validationState={h.err.key ? "invalid" : undefined}
+                      error={h.err.key}
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <TextField
+                      label={language.t("provider.custom.headers.value.label")}
+                      hideLabel
+                      placeholder={language.t("provider.custom.headers.value.placeholder")}
+                      value={h.value}
+                      onChange={(v) => setHeader(i(), "value", v)}
+                      validationState={h.err.value ? "invalid" : undefined}
+                      error={h.err.value}
+                    />
+                  </div>
+                  <IconButton
+                    type="button"
+                    icon="trash"
+                    variant="ghost"
+                    class="mt-1.5"
+                    onClick={() => removeHeader(i())}
+                    disabled={form.headers.length <= 1}
+                    aria-label={language.t("provider.custom.headers.remove")}
+                  />
+                </div>
+              )}
+            </For>
+            <Button type="button" size="small" variant="ghost" icon="plus-small" onClick={addHeader} class="self-start">
+              {language.t("provider.custom.headers.add")}
+            </Button>
+          </div>
+
+          <Button
+            class="w-auto self-start"
+            type="submit"
+            size="large"
+            variant="primary"
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.submit")}
+          </Button>
+        </form>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,267 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
+import { Icon } from "@opencode-ai/ui/icon"
+import { createMemo, For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { type LocalProject, getAvatarColors } from "@/context/layout"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { ServerConnection } from "@/context/server"
+import { useGlobal } from "@/context/global"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+
+export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+  const dialog = useDialog()
+  const global = useGlobal()
+  const language = useLanguage()
+  const serverCtx = createMemo(() => global.createServerCtx(props.server))
+  const serverSDK = () => serverCtx().sdk
+  const serverSync = () => serverCtx().sync
+
+  const folderName = createMemo(() => getFilename(props.project.worktree))
+  const defaultName = createMemo(() => props.project.name || folderName())
+
+  const [store, setStore] = createStore({
+    name: defaultName(),
+    color: props.project.icon?.color,
+    iconOverride: props.project.icon?.override,
+    startup: props.project.commands?.start ?? "",
+    dragOver: false,
+    iconHover: false,
+  })
+
+  let iconInput: HTMLInputElement | undefined
+
+  function handleFileSelect(file: File) {
+    if (!file.type.startsWith("image/")) return
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      setStore("iconOverride", e.target?.result as string)
+      setStore("iconHover", false)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault()
+    setStore("dragOver", false)
+    const file = e.dataTransfer?.files[0]
+    if (file) handleFileSelect(file)
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault()
+    setStore("dragOver", true)
+  }
+
+  function handleDragLeave() {
+    setStore("dragOver", false)
+  }
+
+  function handleInputChange(e: Event) {
+    const input = e.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) handleFileSelect(file)
+  }
+
+  function clearIcon() {
+    setStore("iconOverride", "")
+  }
+
+  const saveMutation = useMutation(() => ({
+    mutationFn: async () => {
+      const name = store.name.trim() === folderName() ? "" : store.name.trim()
+      const start = store.startup.trim()
+
+      if (props.project.id && props.project.id !== "global") {
+        await serverSDK().client.project.update({
+          projectID: props.project.id,
+          directory: props.project.worktree,
+          name,
+          icon: { color: store.color || "", override: store.iconOverride || "" },
+          commands: { start },
+        })
+        serverSync().project.icon(props.project.worktree, store.iconOverride || undefined)
+        dialog.close()
+        return
+      }
+
+      serverSync().project.meta(props.project.worktree, {
+        name,
+        icon: { color: store.color || undefined, override: store.iconOverride || undefined },
+        commands: { start: start || undefined },
+      })
+      dialog.close()
+    },
+  }))
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+    saveMutation.mutate()
+  }
+
+  return (
+    <Dialog title={language.t("dialog.project.edit.title")} class="w-full max-w-[480px] mx-auto">
+      <form onSubmit={handleSubmit} class="flex flex-col gap-6 p-6 pt-0">
+        <div class="flex flex-col gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("dialog.project.edit.name")}
+            placeholder={folderName()}
+            value={store.name}
+            onChange={(v) => setStore("name", v)}
+          />
+
+          <div class="flex flex-col gap-2">
+            <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.icon")}</label>
+            <div class="flex gap-3 items-start">
+              <div
+                class="relative"
+                onMouseEnter={() => setStore("iconHover", true)}
+                onMouseLeave={() => setStore("iconHover", false)}
+              >
+                <div
+                  class="relative size-16 rounded-md transition-colors cursor-pointer"
+                  classList={{
+                    "border-text-interactive-base bg-surface-info-base/20": store.dragOver,
+                    "border-border-base hover:border-border-strong": !store.dragOver,
+                    "overflow-hidden": !!store.iconOverride,
+                  }}
+                  onDrop={handleDrop}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onClick={() => {
+                    if (store.iconOverride && store.iconHover) {
+                      clearIcon()
+                    } else {
+                      iconInput?.click()
+                    }
+                  }}
+                >
+                  <Show
+                    when={getProjectAvatarSource(props.project.id, {
+                      color: store.color,
+                      url: props.project.icon?.url,
+                      override: store.iconOverride,
+                    })}
+                    fallback={
+                      <div class="size-full flex items-center justify-center">
+                        <Avatar
+                          fallback={store.name || defaultName()}
+                          {...getAvatarColors(store.color)}
+                          class="size-full text-[32px]"
+                        />
+                      </div>
+                    }
+                  >
+                    {(src) => (
+                      <img
+                        src={src()}
+                        alt={language.t("dialog.project.edit.icon.alt")}
+                        class="size-full object-cover"
+                      />
+                    )}
+                  </Show>
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": store.iconHover && !store.iconOverride,
+                    "opacity-0": !(store.iconHover && !store.iconOverride),
+                  }}
+                >
+                  <Icon name="cloud-upload" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": store.iconHover && !!store.iconOverride,
+                    "opacity-0": !(store.iconHover && !!store.iconOverride),
+                  }}
+                >
+                  <Icon name="trash" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+              </div>
+              <input
+                id="icon-upload"
+                ref={(el) => {
+                  iconInput = el
+                }}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onChange={handleInputChange}
+              />
+              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
+                <span>{language.t("dialog.project.edit.icon.hint")}</span>
+                <span>{language.t("dialog.project.edit.icon.recommended")}</span>
+              </div>
+            </div>
+          </div>
+
+          <Show when={!store.iconOverride}>
+            <div class="flex flex-col gap-2">
+              <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.color")}</label>
+              <div class="flex gap-1.5">
+                <For each={AVATAR_COLOR_KEYS}>
+                  {(color) => (
+                    <button
+                      type="button"
+                      aria-label={language.t("dialog.project.edit.color.select", { color })}
+                      aria-pressed={store.color === color}
+                      classList={{
+                        "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
+                        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":
+                          store.color === color,
+                        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+                          store.color !== color,
+                      }}
+                      onClick={() => {
+                        if (store.color === color && !props.project.icon?.url) return
+                        setStore("color", store.color === color ? undefined : color)
+                      }}
+                    >
+                      <Avatar
+                        fallback={store.name || defaultName()}
+                        {...getAvatarColors(color)}
+                        class="size-full rounded"
+                      />
+                    </button>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+
+          <TextField
+            multiline
+            label={language.t("dialog.project.edit.worktree.startup")}
+            description={language.t("dialog.project.edit.worktree.startup.description")}
+            placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
+            value={store.startup}
+            onChange={(v) => setStore("startup", v)}
+            spellcheck={false}
+            class="max-h-14 w-full overflow-y-auto font-mono text-xs"
+          />
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button type="button" variant="ghost" size="large" onClick={() => dialog.close()}>
+            {language.t("common.cancel")}
+          </Button>
+          <Button type="submit" variant="primary" size="large" disabled={saveMutation.isPending}>
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.save")}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,108 @@
+import { Component, createMemo } from "solid-js"
+import { useNavigate, useParams } from "@solidjs/router"
+import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
+import { usePrompt } from "@/context/prompt"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { showToast } from "@/utils/toast"
+import { extractPromptFromParts } from "@/utils/prompt"
+import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { useLanguage } from "@/context/language"
+
+interface ForkableMessage {
+  id: string
+  text: string
+  time: string
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { timeStyle: "short" })
+}
+
+export const DialogFork: Component = () => {
+  const params = useParams()
+  const navigate = useNavigate()
+  const sync = useSync()
+  const sdk = useSDK()
+  const prompt = usePrompt()
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  const messages = createMemo((): ForkableMessage[] => {
+    const sessionID = params.id
+    if (!sessionID) return []
+
+    const msgs = sync.data.message[sessionID] ?? []
+    const result: ForkableMessage[] = []
+
+    for (const message of msgs) {
+      if (message.role !== "user") continue
+
+      const parts = sync.data.part[message.id] ?? []
+      const textPart = parts.find((x): x is SDKTextPart => x.type === "text" && !x.synthetic && !x.ignored)
+      if (!textPart) continue
+
+      result.push({
+        id: message.id,
+        text: textPart.text.replace(/\n/g, " ").slice(0, 200),
+        time: formatTime(new Date(message.time.created)),
+      })
+    }
+
+    return result.reverse()
+  })
+
+  const handleSelect = (item: ForkableMessage | undefined) => {
+    if (!item) return
+
+    const sessionID = params.id
+    if (!sessionID) return
+
+    const parts = sync.data.part[item.id] ?? []
+    const restored = extractPromptFromParts(parts, {
+      directory: sdk.directory,
+      attachmentName: language.t("common.attachment"),
+    })
+    const dir = base64Encode(sdk.directory)
+
+    sdk.client.session
+      .fork({ sessionID, messageID: item.id })
+      .then((forked) => {
+        if (!forked.data) {
+          showToast({ title: language.t("common.requestFailed") })
+          return
+        }
+        dialog.close()
+        prompt.set(restored, undefined, { dir, id: forked.data.id })
+        navigate(`/${dir}/session/${forked.data.id}`)
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+  }
+
+  return (
+    <Dialog title={language.t("command.session.fork")}>
+      <List
+        class="flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
+        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.fork.empty")}
+        key={(x) => x.id}
+        items={messages}
+        filterKeys={["text"]}
+        onSelect={handleSelect}
+      >
+        {(item) => (
+          <div class="w-full flex items-center gap-2">
+            <span class="truncate flex-1 min-w-0 text-left font-normal">{item.text}</span>
+            <span class="text-text-weak shrink-0 font-normal">{item.time}</span>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-manage-models.tsx

@@ -0,0 +1,102 @@
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Button } from "@opencode-ai/ui/button"
+import type { Component } from "solid-js"
+import { useLocal } from "@/context/local"
+import { popularProviders } from "@/hooks/use-providers"
+import { useLanguage } from "@/context/language"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { DialogSelectProvider } from "./dialog-select-provider"
+
+export const DialogManageModels: Component = () => {
+  const local = useLocal()
+  const language = useLanguage()
+  const dialog = useDialog()
+
+  const handleConnectProvider = () => {
+    dialog.show(() => <DialogSelectProvider />)
+  }
+  const providerRank = (id: string) => popularProviders.indexOf(id)
+  const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
+  const providerVisible = (providerID: string) =>
+    providerList(providerID).every((x) => local.model.visible({ modelID: x.id, providerID: x.provider.id }))
+  const setProviderVisibility = (providerID: string, checked: boolean) => {
+    providerList(providerID).forEach((x) => {
+      local.model.setVisibility({ modelID: x.id, providerID: x.provider.id }, checked)
+    })
+  }
+
+  return (
+    <Dialog
+      title={language.t("dialog.model.manage")}
+      description={language.t("dialog.model.manage.description")}
+      action={
+        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={handleConnectProvider}>
+          {language.t("command.provider.connect")}
+        </Button>
+      }
+    >
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.model.empty")}
+        key={(x) => `${x?.provider?.id}:${x?.id}`}
+        items={local.model.list()}
+        filterKeys={["provider.name", "name", "id"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        groupBy={(x) => x.provider.id}
+        groupHeader={(group) => {
+          const provider = group.items[0].provider
+          return (
+            <>
+              <span>{provider.name}</span>
+              <Tooltip
+                placement="top"
+                value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
+              >
+                <Switch
+                  class="-mr-1"
+                  checked={providerVisible(provider.id)}
+                  onChange={(checked) => setProviderVisibility(provider.id, checked)}
+                  hideLabel
+                >
+                  {provider.name}
+                </Switch>
+              </Tooltip>
+            </>
+          )
+        }}
+        sortGroupsBy={(a, b) => {
+          const aRank = providerRank(a.items[0].provider.id)
+          const bRank = providerRank(b.items[0].provider.id)
+          const aPopular = aRank >= 0
+          const bPopular = bRank >= 0
+          if (aPopular && !bPopular) return -1
+          if (!aPopular && bPopular) return 1
+          return aRank - bRank
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          const key = { modelID: x.id, providerID: x.provider.id }
+          local.model.setVisibility(key, !local.model.visible(key))
+        }}
+      >
+        {(i) => (
+          <div class="w-full flex items-center justify-between gap-x-3">
+            <span>{i.name}</span>
+            <div onClick={(e) => e.stopPropagation()}>
+              <Switch
+                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                onChange={(checked) => {
+                  local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-release-notes.tsx

@@ -0,0 +1,144 @@
+import { createSignal } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+
+export type Highlight = {
+  title: string
+  description: string
+  media?: {
+    type: "image" | "video"
+    src: string
+    alt?: string
+  }
+}
+
+export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const settings = useSettings()
+  const [index, setIndex] = createSignal(0)
+
+  const total = () => props.highlights.length
+  const last = () => Math.max(0, total() - 1)
+  const feature = () => props.highlights[index()] ?? props.highlights[last()]
+  const isFirst = () => index() === 0
+  const isLast = () => index() >= last()
+  const paged = () => total() > 1
+
+  function handleNext() {
+    if (isLast()) return
+    setIndex(index() + 1)
+  }
+
+  function handleClose() {
+    dialog.close()
+  }
+
+  function handleDisable() {
+    settings.general.setReleaseNotes(false)
+    handleClose()
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      e.preventDefault()
+      handleClose()
+      return
+    }
+
+    if (!paged()) return
+    if (e.key === "ArrowLeft" && !isFirst()) {
+      e.preventDefault()
+      setIndex(index() - 1)
+    }
+    if (e.key === "ArrowRight" && !isLast()) {
+      e.preventDefault()
+      setIndex(index() + 1)
+    }
+  }
+
+  return (
+    <Dialog
+      size="large"
+      fit
+      class="w-[min(calc(100vw-40px),720px)] h-[min(calc(100vh-40px),400px)] -mt-20 min-h-0 overflow-hidden"
+    >
+      <div class="flex flex-1 min-w-0 min-h-0" tabIndex={0} autofocus onKeyDown={handleKeyDown}>
+        {/* Left side - Text content */}
+        <div class="flex flex-col flex-1 min-w-0 p-8">
+          {/* Top section - feature content (fixed position from top) */}
+          <div class="flex flex-col gap-2 pt-22">
+            <div class="flex items-center gap-2">
+              <h1 class="text-16-medium text-text-strong">{feature()?.title ?? ""}</h1>
+            </div>
+            <p class="text-14-regular text-text-base">{feature()?.description ?? ""}</p>
+          </div>
+
+          {/* Spacer to push buttons to bottom */}
+          <div class="flex-1" />
+
+          {/* Bottom section - buttons and indicators (fixed position) */}
+          <div class="flex flex-col gap-12">
+            <div class="flex flex-col items-start gap-3">
+              {isLast() ? (
+                <Button variant="primary" size="large" onClick={handleClose}>
+                  {language.t("dialog.releaseNotes.action.getStarted")}
+                </Button>
+              ) : (
+                <Button variant="secondary" size="large" onClick={handleNext}>
+                  {language.t("dialog.releaseNotes.action.next")}
+                </Button>
+              )}
+
+              <Button variant="ghost" size="small" onClick={handleDisable}>
+                {language.t("dialog.releaseNotes.action.hideFuture")}
+              </Button>
+            </div>
+
+            {paged() && (
+              <div class="flex items-center gap-1.5 -my-2.5">
+                {props.highlights.map((_, i) => (
+                  <button
+                    type="button"
+                    class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200"
+                    classList={{
+                      "w-8": i === index(),
+                      "w-3": i !== index(),
+                    }}
+                    onClick={() => setIndex(i)}
+                  >
+                    <div
+                      class="w-full h-0.5 rounded-[1px] transition-colors duration-200"
+                      classList={{
+                        "bg-icon-strong-base": i === index(),
+                        "bg-icon-weak-base": i !== index(),
+                      }}
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right side - Media content (edge to edge) */}
+        {feature()?.media && (
+          <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl">
+            {feature()!.media!.type === "image" ? (
+              <img
+                src={feature()!.media!.src}
+                alt={feature()!.media!.alt ?? feature()?.title ?? language.t("dialog.releaseNotes.media.alt")}
+                class="w-full h-full object-cover"
+              />
+            ) : (
+              <video src={feature()!.media!.src} autoplay loop muted playsinline class="w-full h-full object-cover" />
+            )}
+          </div>
+        )}
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,389 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { List } from "@opencode-ai/ui/list"
+import type { ListRef } from "@opencode-ai/ui/list"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import fuzzysort from "fuzzysort"
+import { createMemo, createResource, createSignal } from "solid-js"
+import { ServerSDK } from "@/context/server-sdk"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/server"
+import { useGlobal } from "@/context/global"
+
+interface DialogSelectDirectoryProps {
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+  server: ServerConnection.Any
+}
+
+type Row = {
+  absolute: string
+  search: string
+  group: "recent" | "folders"
+}
+
+function cleanInput(value: string) {
+  const first = (value ?? "").split(/\r?\n/)[0] ?? ""
+  return first.replace(/[\u0000-\u001F\u007F]/g, "").trim()
+}
+
+function normalizePath(input: string) {
+  const v = input.replaceAll("\\", "/")
+  if (v.startsWith("//") && !v.startsWith("///")) return "//" + v.slice(2).replace(/\/+/g, "/")
+  return v.replace(/\/+/g, "/")
+}
+
+function normalizeDriveRoot(input: string) {
+  const v = normalizePath(input)
+  if (/^[A-Za-z]:$/.test(v)) return v + "/"
+  return v
+}
+
+function trimTrailing(input: string) {
+  const v = normalizeDriveRoot(input)
+  if (v === "/") return v
+  if (v === "//") return v
+  if (/^[A-Za-z]:\/$/.test(v)) return v
+  return v.replace(/\/+$/, "")
+}
+
+function joinPath(base: string | undefined, rel: string) {
+  const b = trimTrailing(base ?? "")
+  const r = trimTrailing(rel).replace(/^\/+/, "")
+  if (!b) return r
+  if (!r) return b
+  if (b.endsWith("/")) return b + r
+  return b + "/" + r
+}
+
+function rootOf(input: string) {
+  const v = normalizeDriveRoot(input)
+  if (v.startsWith("//")) return "//"
+  if (v.startsWith("/")) return "/"
+  if (/^[A-Za-z]:\//.test(v)) return v.slice(0, 3)
+  return ""
+}
+
+function parentOf(input: string) {
+  const v = trimTrailing(input)
+  if (v === "/") return v
+  if (v === "//") return v
+  if (/^[A-Za-z]:\/$/.test(v)) return v
+
+  const i = v.lastIndexOf("/")
+  if (i <= 0) return "/"
+  if (i === 2 && /^[A-Za-z]:/.test(v)) return v.slice(0, 3)
+  return v.slice(0, i)
+}
+
+function modeOf(input: string) {
+  const raw = normalizeDriveRoot(input.trim())
+  if (!raw) return "relative" as const
+  if (raw.startsWith("~")) return "tilde" as const
+  if (rootOf(raw)) return "absolute" as const
+  return "relative" as const
+}
+
+function tildeOf(absolute: string, home: string) {
+  const full = trimTrailing(absolute)
+  if (!home) return ""
+
+  const hn = trimTrailing(home)
+  const lc = full.toLowerCase()
+  const hc = hn.toLowerCase()
+  if (lc === hc) return "~"
+  if (lc.startsWith(hc + "/")) return "~" + full.slice(hn.length)
+  return ""
+}
+
+function displayPath(path: string, input: string, home: string) {
+  const full = trimTrailing(path)
+  if (modeOf(input) === "absolute") return full
+  return tildeOf(full, home) || full
+}
+
+function toRow(absolute: string, home: string, group: Row["group"]): Row {
+  const full = trimTrailing(absolute)
+  const tilde = tildeOf(full, home)
+  const withSlash = (value: string) => {
+    if (!value) return ""
+    if (value.endsWith("/")) return value
+    return value + "/"
+  }
+
+  const search = Array.from(
+    new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
+  ).join("\n")
+  return { absolute: full, search, group }
+}
+
+function uniqueRows(rows: Row[]) {
+  const seen = new Set<string>()
+  return rows.filter((row) => {
+    if (seen.has(row.absolute)) return false
+    seen.add(row.absolute)
+    return true
+  })
+}
+
+function useDirectorySearch(args: { sdk: ServerSDK; start: () => string | undefined; home: () => string }) {
+  const cache = new Map<string, Promise<Array<{ name: string; absolute: string }>>>()
+  let current = 0
+
+  const scoped = (value: string) => {
+    const base = args.start()
+    if (!base) return
+
+    const raw = normalizeDriveRoot(value)
+    if (!raw) return { directory: trimTrailing(base), path: "" }
+
+    const h = args.home()
+    if (raw === "~") return { directory: trimTrailing(h || base), path: "" }
+    if (raw.startsWith("~/")) return { directory: trimTrailing(h || base), path: raw.slice(2) }
+
+    const root = rootOf(raw)
+    if (root) return { directory: trimTrailing(root), path: raw.slice(root.length) }
+    return { directory: trimTrailing(base), path: raw }
+  }
+
+  const dirs = async (dir: string) => {
+    const key = trimTrailing(dir)
+    const existing = cache.get(key)
+    if (existing) return existing
+
+    const request = args.sdk.client.file
+      .list({ directory: key, path: "" })
+      .then((x) => x.data ?? [])
+      .catch(() => [])
+      .then((nodes) =>
+        nodes
+          .filter((n) => n.type === "directory")
+          .map((n) => ({
+            name: n.name,
+            absolute: trimTrailing(normalizeDriveRoot(n.absolute)),
+          })),
+      )
+
+    cache.set(key, request)
+    return request
+  }
+
+  const match = async (dir: string, query: string, limit: number) => {
+    const items = await dirs(dir)
+    if (!query) return items.slice(0, limit).map((x) => x.absolute)
+    return fuzzysort.go(query, items, { key: "name", limit }).map((x) => x.obj.absolute)
+  }
+
+  return async (filter: string) => {
+    const token = ++current
+    const active = () => token === current
+
+    const value = cleanInput(filter)
+    const scopedInput = scoped(value)
+    if (!scopedInput) return [] as string[]
+
+    const raw = normalizeDriveRoot(value)
+    const isPath = raw.startsWith("~") || !!rootOf(raw) || raw.includes("/")
+    const query = normalizeDriveRoot(scopedInput.path)
+
+    const find = () =>
+      args.sdk.client.find
+        .files({ directory: scopedInput.directory, query, type: "directory", limit: 50 })
+        .then((x) => x.data ?? [])
+        .catch(() => [])
+
+    if (!isPath) {
+      const results = await find()
+      if (!active()) return []
+      return results.map((rel) => joinPath(scopedInput.directory, rel)).slice(0, 50)
+    }
+
+    const segments = query.replace(/^\/+/, "").split("/")
+    const head = segments.slice(0, segments.length - 1).filter((x) => x && x !== ".")
+    const tail = segments[segments.length - 1] ?? ""
+
+    const cap = 12
+    const branch = 4
+    let paths = [scopedInput.directory]
+    for (const part of head) {
+      if (!active()) return []
+      if (part === "..") {
+        paths = paths.map(parentOf)
+        continue
+      }
+
+      const next = (await Promise.all(paths.map((p) => match(p, part, branch)))).flat()
+      if (!active()) return []
+      paths = Array.from(new Set(next)).slice(0, cap)
+      if (paths.length === 0) return [] as string[]
+    }
+
+    const out = (await Promise.all(paths.map((p) => match(p, tail, 50)))).flat()
+    if (!active()) return []
+    const deduped = Array.from(new Set(out))
+    const base = raw.startsWith("~") ? trimTrailing(scopedInput.directory) : ""
+    const expand = !raw.endsWith("/")
+    if (!expand || !tail) {
+      const items = base ? Array.from(new Set([base, ...deduped])) : deduped
+      return items.slice(0, 50)
+    }
+
+    const needle = tail.toLowerCase()
+    const exact = deduped.filter((p) => getFilename(p).toLowerCase() === needle)
+    const target = exact[0]
+    if (!target) return deduped.slice(0, 50)
+
+    const children = await match(target, "", 30)
+    if (!active()) return []
+    const items = Array.from(new Set([...deduped, ...children]))
+    return (base ? Array.from(new Set([base, ...items])) : items).slice(0, 50)
+  }
+}
+
+export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
+  const global = useGlobal()
+  const { sync, sdk, ...serverCtx } = global.createServerCtx(props.server)
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  const [filter, setFilter] = createSignal("")
+  let list: ListRef | undefined
+
+  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
+  const [fallbackPath] = createResource(
+    () => (missingBase() ? true : undefined),
+    async () => {
+      return sdk.client.path
+        .get()
+        .then((x) => x.data)
+        .catch(() => undefined)
+    },
+    { initialValue: undefined },
+  )
+
+  const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
+  const start = createMemo(
+    () => sync.data.path.home || sync.data.path.directory || fallbackPath()?.home || fallbackPath()?.directory,
+  )
+
+  const directories = useDirectorySearch({
+    sdk,
+    home,
+    start,
+  })
+
+  const recentProjects = createMemo(() => {
+    const projects = serverCtx.projects.list()
+    const byProject = new Map<string, number>()
+
+    for (const project of projects) {
+      let at = 0
+      const dirs = [project.worktree, ...(project.sandboxes ?? [])]
+      for (const directory of dirs) {
+        const sessions = sync.child(directory, { bootstrap: false })[0].session
+        for (const session of sessions) {
+          if (session.time.archived) continue
+          const updated = session.time.updated ?? session.time.created
+          if (updated > at) at = updated
+        }
+      }
+      byProject.set(project.worktree, at)
+    }
+
+    return projects
+      .map((project, index) => ({ project, at: byProject.get(project.worktree) ?? 0, index }))
+      .sort((a, b) => b.at - a.at || a.index - b.index)
+      .slice(0, 5)
+      .map(({ project }) => {
+        const row = toRow(project.worktree, home(), "recent")
+        const name = project.name || getFilename(project.worktree)
+        return {
+          ...row,
+          search: `${row.search}\n${name}`,
+        }
+      })
+  })
+
+  const items = async (value: string) => {
+    const results = await directories(value)
+    const directoryRows = results.map((absolute) => toRow(absolute, home(), "folders"))
+    return uniqueRows([...recentProjects(), ...directoryRows])
+  }
+
+  function resolve(absolute: string) {
+    props.onSelect(props.multiple ? [absolute] : absolute)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title={props.title ?? language.t("command.project.open")}>
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("dialog.directory.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.directory.empty")}
+        loadingMessage={language.t("common.loading")}
+        items={items}
+        key={(x) => x.absolute}
+        filterKeys={["search"]}
+        groupBy={(item) => item.group}
+        sortGroupsBy={(a, b) => {
+          if (a.category === b.category) return 0
+          return a.category === "recent" ? -1 : 1
+        }}
+        groupHeader={(group) =>
+          group.category === "recent" ? language.t("home.recentProjects") : language.t("command.project.open")
+        }
+        ref={(r) => (list = r)}
+        onFilter={(value) => setFilter(cleanInput(value))}
+        onKeyEvent={(e, item) => {
+          if (e.key !== "Tab") return
+          if (e.shiftKey) return
+          if (!item) return
+
+          e.preventDefault()
+          e.stopPropagation()
+
+          const value = displayPath(item.absolute, filter(), home())
+          list?.setFilter(value.endsWith("/") ? value : value + "/")
+        }}
+        onSelect={(path) => {
+          if (!path) return
+          resolve(path.absolute)
+        }}
+      >
+        {(item) => {
+          const path = displayPath(item.absolute, filter(), home())
+          if (path === "~") {
+            return (
+              <div class="w-full flex items-center justify-between rounded-md">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <FileIcon node={{ path: item.absolute, type: "directory" }} class="shrink-0 size-4" />
+                  <div class="flex items-center text-14-regular min-w-0">
+                    <span class="text-text-strong whitespace-nowrap">~</span>
+                    <span class="text-text-weak whitespace-nowrap">/</span>
+                  </div>
+                </div>
+              </div>
+            )
+          }
+          return (
+            <div class="w-full flex items-center justify-between rounded-md">
+              <div class="flex items-center gap-x-3 grow min-w-0">
+                <FileIcon node={{ path: item.absolute, type: "directory" }} class="shrink-0 size-4" />
+                <div class="flex items-center text-14-regular min-w-0">
+                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                    {getDirectory(path)}
+                  </span>
+                  <span class="text-text-strong whitespace-nowrap">{getFilename(path)}</span>
+                  <span class="text-text-weak whitespace-nowrap">/</span>
+                </div>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,469 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { List } from "@opencode-ai/ui/list"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { useNavigate } from "@solidjs/router"
+import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
+import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useLayout } from "@/context/layout"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionTabs } from "@/pages/session/helpers"
+import { decode64 } from "@/utils/base64"
+import { getRelativeTime } from "@/utils/time"
+
+type EntryType = "command" | "file" | "session"
+
+type Entry = {
+  id: string
+  type: EntryType
+  title: string
+  description?: string
+  keybind?: string
+  category: string
+  option?: CommandOption
+  path?: string
+  directory?: string
+  sessionID?: string
+  archived?: number
+  updated?: number
+}
+
+type DialogSelectFileMode = "all" | "files"
+
+const ENTRY_LIMIT = 5
+const COMMON_COMMAND_IDS = [
+  "session.new",
+  "workspace.new",
+  "session.previous",
+  "session.next",
+  "terminal.toggle",
+  "review.toggle",
+] as const
+
+const uniqueEntries = (items: Entry[]) => {
+  const seen = new Set<string>()
+  const out: Entry[] = []
+  for (const item of items) {
+    if (seen.has(item.id)) continue
+    seen.add(item.id)
+    out.push(item)
+  }
+  return out
+}
+
+const createCommandEntry = (option: CommandOption, category: string): Entry => ({
+  id: "command:" + option.id,
+  type: "command",
+  title: option.title,
+  description: option.description,
+  keybind: option.keybind,
+  category,
+  option,
+})
+
+const createFileEntry = (path: string, category: string): Entry => ({
+  id: "file:" + path,
+  type: "file",
+  title: path,
+  category,
+  path,
+})
+
+const createSessionEntry = (
+  input: {
+    directory: string
+    id: string
+    title: string
+    description: string
+    archived?: number
+    updated?: number
+  },
+  category: string,
+): Entry => ({
+  id: `session:${input.directory}:${input.id}`,
+  type: "session",
+  title: input.title,
+  description: input.description,
+  category,
+  directory: input.directory,
+  sessionID: input.id,
+  archived: input.archived,
+  updated: input.updated,
+})
+
+function createCommandEntries(props: {
+  filesOnly: () => boolean
+  command: ReturnType<typeof useCommand>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const allowed = createMemo(() => {
+    if (props.filesOnly()) return []
+    return props.command.options.filter(
+      (option) =>
+        !option.disabled && !option.hidden && !option.id.startsWith("suggested.") && option.id !== "file.open",
+    )
+  })
+
+  const list = createMemo(() => {
+    const category = props.language.t("palette.group.commands")
+    return allowed().map((option) => createCommandEntry(option, category))
+  })
+
+  const picks = createMemo(() => {
+    const all = allowed()
+    const order = new Map<string, number>(COMMON_COMMAND_IDS.map((id, index) => [id, index]))
+    const picked = all.filter((option) => order.has(option.id))
+    const base = picked.length ? picked : all.slice(0, ENTRY_LIMIT)
+    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
+    const category = props.language.t("palette.group.commands")
+    return sorted.map((option) => createCommandEntry(option, category))
+  })
+
+  return { allowed, list, picks }
+}
+
+function createFileEntries(props: {
+  file: ReturnType<typeof useFile>
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const tabState = createSessionTabs({
+    tabs: props.tabs,
+    pathFromTab: props.file.pathFromTab,
+    normalizeTab: (tab) => (tab.startsWith("file://") ? props.file.tab(tab) : tab),
+  })
+  const recent = createMemo(() => {
+    const all = tabState.openedTabs()
+    const active = tabState.activeFileTab()
+    const order = active ? [active, ...all.filter((item) => item !== active)] : all
+    const seen = new Set<string>()
+    const category = props.language.t("palette.group.files")
+    const items: Entry[] = []
+
+    for (const item of order) {
+      const path = props.file.pathFromTab(item)
+      if (!path) continue
+      if (seen.has(path)) continue
+      seen.add(path)
+      items.push(createFileEntry(path, category))
+    }
+
+    return items.slice(0, ENTRY_LIMIT)
+  })
+
+  const root = createMemo(() => {
+    const category = props.language.t("palette.group.files")
+    const nodes = props.file.tree.children("")
+    const paths = nodes
+      .filter((node) => node.type === "file")
+      .map((node) => node.path)
+      .sort((a, b) => a.localeCompare(b))
+    return paths.slice(0, ENTRY_LIMIT).map((path) => createFileEntry(path, category))
+  })
+
+  return { recent, root }
+}
+
+function createSessionEntries(props: {
+  workspaces: () => string[]
+  label: (directory: string) => string
+  serverSDK: ReturnType<typeof useServerSDK>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const state: {
+    token: number
+    inflight: Promise<Entry[]> | undefined
+    cached: Entry[] | undefined
+  } = {
+    token: 0,
+    inflight: undefined,
+    cached: undefined,
+  }
+
+  const sessions = (text: string) => {
+    const query = text.trim()
+    if (!query) {
+      state.token += 1
+      state.inflight = undefined
+      state.cached = undefined
+      return [] as Entry[]
+    }
+
+    if (state.cached) return state.cached
+    if (state.inflight) return state.inflight
+
+    const current = state.token
+    const dirs = props.workspaces()
+    if (dirs.length === 0) return [] as Entry[]
+
+    state.inflight = Promise.all(
+      dirs.map((directory) => {
+        const description = props.label(directory)
+        return props.serverSDK.client.session
+          .list({ directory, roots: true })
+          .then((x) =>
+            (x.data ?? [])
+              .filter((s) => !!s?.id)
+              .map((s) => ({
+                id: s.id,
+                title: s.title ?? props.language.t("command.session.new"),
+                description,
+                directory,
+                archived: s.time?.archived,
+                updated: s.time?.updated,
+              })),
+          )
+          .catch(
+            () =>
+              [] as {
+                id: string
+                title: string
+                description: string
+                directory: string
+                archived?: number
+                updated?: number
+              }[],
+          )
+      }),
+    )
+      .then((results) => {
+        if (state.token !== current) return [] as Entry[]
+        const seen = new Set<string>()
+        const category = props.language.t("command.category.session")
+        const next = results
+          .flat()
+          .filter((item) => {
+            const key = `${item.directory}:${item.id}`
+            if (seen.has(key)) return false
+            seen.add(key)
+            return true
+          })
+          .map((item) => createSessionEntry(item, category))
+        state.cached = next
+        return next
+      })
+      .catch(() => [] as Entry[])
+      .finally(() => {
+        state.inflight = undefined
+      })
+
+    return state.inflight
+  }
+
+  return { sessions }
+}
+
+export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
+  const command = useCommand()
+  const language = useLanguage()
+  const layout = useLayout()
+  const file = useFile()
+  const dialog = useDialog()
+  const navigate = useNavigate()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
+  const { params, tabs, view } = useSessionLayout()
+  const filesOnly = () => props.mode === "files"
+  const state = { cleanup: undefined as (() => void) | void, committed: false }
+  const [grouped, setGrouped] = createSignal(false)
+  const commandEntries = createCommandEntries({ filesOnly, command, language })
+  const fileEntries = createFileEntries({ file, tabs, language })
+
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const project = createMemo(() => {
+    const directory = projectDirectory()
+    if (!directory) return
+    return layout.projects.list().find((p) => p.worktree === directory || p.sandboxes?.includes(directory))
+  })
+  const workspaces = createMemo(() => {
+    const directory = projectDirectory()
+    const current = project()
+    if (!current) return directory ? [directory] : []
+
+    const dirs = [current.worktree, ...(current.sandboxes ?? [])]
+    if (directory && !dirs.includes(directory)) return [...dirs, directory]
+    return dirs
+  })
+  const homedir = createMemo(() => serverSync.data.path.home)
+  const label = (directory: string) => {
+    const current = project()
+    const kind =
+      current && directory === current.worktree
+        ? language.t("workspace.type.local")
+        : language.t("workspace.type.sandbox")
+    const [store] = serverSync.child(directory, { bootstrap: false })
+    const home = homedir()
+    const path = home ? directory.replace(home, "~") : directory
+    const name = store.vcs?.branch ?? getFilename(directory)
+    return `${kind} : ${name || path}`
+  }
+
+  const { sessions } = createSessionEntries({ workspaces, label, serverSDK, language })
+
+  const items = async (text: string) => {
+    const query = text.trim()
+    setGrouped(query.length > 0)
+
+    if (!query && filesOnly()) {
+      const loaded = file.tree.state("")?.loaded
+      const pending = loaded ? Promise.resolve() : file.tree.list("")
+      const next = uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+
+      if (loaded || next.length > 0) {
+        void pending
+        return next
+      }
+
+      await pending
+      return uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+    }
+
+    if (!query) return [...commandEntries.picks(), ...fileEntries.recent()]
+
+    if (filesOnly()) {
+      const files = await file.searchFiles(query)
+      const category = language.t("palette.group.files")
+      return files.map((path) => createFileEntry(path, category))
+    }
+
+    const [files, nextSessions] = await Promise.all([file.searchFiles(query), Promise.resolve(sessions(query))])
+    const category = language.t("palette.group.files")
+    const entries = files.map((path) => createFileEntry(path, category))
+    return [...commandEntries.list(), ...nextSessions, ...entries]
+  }
+
+  const handleMove = (item: Entry | undefined) => {
+    state.cleanup?.()
+    if (!item) return
+    if (item.type !== "command") return
+    state.cleanup = item.option?.onHighlight?.()
+  }
+
+  const open = (path: string) => {
+    const value = file.tab(path)
+    void tabs().open(value)
+    void file.load(path)
+    if (!view().reviewPanel.opened()) view().reviewPanel.open()
+    layout.fileTree.setTab("all")
+    props.onOpenFile?.(path)
+    tabs().setActive(value)
+  }
+
+  const handleSelect = (item: Entry | undefined) => {
+    if (!item) return
+    state.committed = true
+    state.cleanup = undefined
+    dialog.close()
+
+    if (item.type === "command") {
+      item.option?.onSelect?.("palette")
+      return
+    }
+
+    if (item.type === "session") {
+      if (!item.directory || !item.sessionID) return
+      navigate(`/${base64Encode(item.directory)}/session/${item.sessionID}`)
+      return
+    }
+
+    if (!item.path) return
+    open(item.path)
+  }
+
+  onCleanup(() => {
+    if (state.committed) return
+    state.cleanup?.()
+  })
+
+  return (
+    <Dialog class="pt-3 pb-0 !max-h-[480px]" transition>
+      <List
+        class="px-3"
+        search={{
+          placeholder: filesOnly()
+            ? language.t("session.header.searchFiles")
+            : language.t("palette.search.placeholder"),
+          autofocus: true,
+          hideIcon: true,
+        }}
+        emptyMessage={language.t("palette.empty")}
+        loadingMessage={language.t("common.loading")}
+        items={items}
+        key={(item) => item.id}
+        filterKeys={["title", "description", "category"]}
+        skipFilter={(item) => item.type === "file"}
+        groupBy={grouped() ? (item) => item.category : () => ""}
+        onMove={handleMove}
+        onSelect={handleSelect}
+      >
+        {(item) => (
+          <Switch
+            fallback={
+              <div class="w-full flex items-center justify-between rounded-md pl-1">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <FileIcon node={{ path: item.path ?? "", type: "file" }} class="shrink-0 size-4" />
+                  <div class="flex items-center text-14-regular">
+                    <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                      {getDirectory(item.path ?? "")}
+                    </span>
+                    <span class="text-text-strong whitespace-nowrap">{getFilename(item.path ?? "")}</span>
+                  </div>
+                </div>
+              </div>
+            }
+          >
+            <Match when={item.type === "command"}>
+              <div class="w-full flex items-center justify-between gap-4">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-14-regular text-text-strong whitespace-nowrap">{item.title}</span>
+                  <Show when={item.description}>
+                    <span class="text-14-regular text-text-weak truncate">{item.description}</span>
+                  </Show>
+                </div>
+                <Show when={item.keybind}>
+                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", language.t)}</Keybind>
+                </Show>
+              </div>
+            </Match>
+            <Match when={item.type === "session"}>
+              <div class="w-full flex items-center justify-between rounded-md pl-1">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <Icon name="bubble-5" size="small" class="shrink-0 text-icon-weak" />
+                  <div class="flex items-center gap-2 min-w-0">
+                    <span
+                      class="text-14-regular text-text-strong truncate"
+                      classList={{ "opacity-70": !!item.archived }}
+                    >
+                      {item.title}
+                    </span>
+                    <Show when={item.description}>
+                      <span
+                        class="text-14-regular text-text-weak truncate"
+                        classList={{ "opacity-70": !!item.archived }}
+                      >
+                        {item.description}
+                      </span>
+                    </Show>
+                  </div>
+                </div>
+                <Show when={item.updated}>
+                  <span class="text-12-regular text-text-weak whitespace-nowrap ml-2">
+                    {getRelativeTime(new Date(item.updated!).toISOString(), language.t)}
+                  </span>
+                </Show>
+              </div>
+            </Match>
+          </Switch>
+        )}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,92 @@
+import { Component, createMemo, Show } from "solid-js"
+import { useSync } from "@/context/sync"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Switch } from "@opencode-ai/ui/switch"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+
+const statusLabels = {
+  connected: "mcp.status.connected",
+  failed: "mcp.status.failed",
+  needs_auth: "mcp.status.needs_auth",
+  needs_client_registration: "mcp.status.needs_client_registration",
+  disabled: "mcp.status.disabled",
+} as const
+
+export const DialogSelectMcp: Component = () => {
+  const sync = useSync()
+  const language = useLanguage()
+
+  const items = createMemo(() =>
+    Object.entries(sync.data.mcp ?? {})
+      .map(([name, status]) => ({ name, status: status.status }))
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  )
+
+  const toggle = useMcpToggle()
+
+  const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
+  const totalCount = createMemo(() => items().length)
+
+  return (
+    <Dialog
+      title={language.t("dialog.mcp.title")}
+      description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
+    >
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.mcp.empty")}
+        key={(x) => x?.name ?? ""}
+        items={items}
+        filterKeys={["name", "status"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        onSelect={(x) => {
+          if (!x || toggle.isPending) return
+          toggle.mutate(x.name)
+        }}
+      >
+        {(i) => {
+          const mcpStatus = () => sync.data.mcp[i.name]
+          const status = () => mcpStatus()?.status
+          const statusLabel = () => {
+            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
+            if (!key) return
+            return language.t(key)
+          }
+          const error = () => {
+            const s = mcpStatus()
+            if (s?.status === "failed" || s?.status === "needs_client_registration") return s.error
+          }
+          const enabled = () => status() === "connected"
+          return (
+            <div class="w-full flex items-center justify-between gap-x-3">
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="truncate">{i.name}</span>
+                  <Show when={statusLabel()}>
+                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
+                  </Show>
+                </div>
+                <Show when={error()}>
+                  <span class="text-11-regular text-text-weaker truncate">{error()}</span>
+                </Show>
+              </div>
+              <div onClick={(e) => e.stopPropagation()}>
+                <Switch
+                  checked={enabled()}
+                  disabled={toggle.isPending && toggle.variables === i.name}
+                  onChange={() => {
+                    if (toggle.isPending) return
+                    toggle.mutate(i.name)
+                  }}
+                />
+              </div>
+            </div>
+          )
+        }}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,145 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List, type ListRef } from "@opencode-ai/ui/list"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Tag } from "@opencode-ai/ui/tag"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { type Component, Show } from "solid-js"
+import { useLocal } from "@/context/local"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { ModelTooltip } from "./model-tooltip"
+import { useLanguage } from "@/context/language"
+
+type ModelState = ReturnType<typeof useLocal>["model"]
+
+export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
+  const model = props.model ?? useLocal().model
+  const dialog = useDialog()
+  const providers = useProviders()
+  const language = useLanguage()
+
+  const connect = (provider: string) => {
+    void import("./dialog-connect-provider").then((x) => {
+      dialog.show(() => <x.DialogConnectProvider provider={provider} />)
+    })
+  }
+
+  const all = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+
+  let listRef: ListRef | undefined
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") return
+    listRef?.onKeyDown(e)
+  }
+
+  return (
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
+    >
+      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
+        <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
+        <List
+          class="px-3 [&_[data-slot=list-scroll]]:overflow-visible"
+          ref={(ref) => (listRef = ref)}
+          items={model.list}
+          current={model.current()}
+          key={(x) => `${x.provider.id}:${x.id}`}
+          itemWrapper={(item, node) => (
+            <Tooltip
+              class="w-full"
+              placement="right-start"
+              gutter={12}
+              value={
+                <ModelTooltip
+                  model={item}
+                  latest={item.latest}
+                  free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
+                />
+              }
+            >
+              {node}
+            </Tooltip>
+          )}
+          onSelect={(x) => {
+            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+              recent: true,
+            })
+            dialog.close()
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center gap-x-2.5">
+              <span>{i.name}</span>
+              <Tag>{language.t("model.tag.free")}</Tag>
+              <Show when={i.latest}>
+                <Tag>{language.t("model.tag.latest")}</Tag>
+              </Show>
+            </div>
+          )}
+        </List>
+      </div>
+      <div class="px-1.5 pb-1.5">
+        <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
+          <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
+            <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
+            <div class="w-full">
+              <List
+                class="w-full px-3"
+                key={(p) => p.id}
+                items={providers.popular}
+                activeIcon="plus-small"
+                sortBy={(a, b) => {
+                  if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+                    return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+                  return a.name.localeCompare(b.name)
+                }}
+                onSelect={(x) => {
+                  if (!x) return
+                  connect(x.id)
+                }}
+              >
+                {(i) => (
+                  <div class="w-full flex items-center gap-x-3">
+                    <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+                    <span>{i.name}</span>
+                    <Show when={i.id === "opencode"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
+                    </Show>
+                    <Show when={i.id === "opencode"}>
+                      <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                    </Show>
+                    <Show when={i.id === "opencode-go"}>
+                      <>
+                        <div class="text-14-regular text-text-weak">
+                          {language.t("dialog.provider.opencodeGo.tagline")}
+                        </div>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </>
+                    </Show>
+                    <Show when={i.id === "anthropic"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
+                    </Show>
+                  </div>
+                )}
+              </List>
+              <Button
+                variant="ghost"
+                class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
+                icon="dot-grid"
+                onClick={all}
+              >
+                {language.t("dialog.provider.viewAll")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,230 @@
+import { Popover as Kobalte } from "@kobalte/core/popover"
+import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLocal } from "@/context/local"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { popularProviders } from "@/hooks/use-providers"
+import { Button } from "@opencode-ai/ui/button"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tag } from "@opencode-ai/ui/tag"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ModelTooltip } from "./model-tooltip"
+import { useLanguage } from "@/context/language"
+
+const isFree = (provider: string, cost: { input: number } | undefined) =>
+  provider === "opencode" && (!cost || cost.input === 0)
+
+type ModelState = ReturnType<typeof useLocal>["model"]
+
+const ModelList: Component<{
+  provider?: string
+  class?: string
+  onSelect: () => void
+  action?: JSX.Element
+  model?: ModelState
+}> = (props) => {
+  const model = props.model ?? useLocal().model
+  const language = useLanguage()
+
+  const models = createMemo(() =>
+    model
+      .list()
+      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
+      .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
+  )
+
+  return (
+    <List
+      class={`flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
+      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true, action: props.action }}
+      emptyMessage={language.t("dialog.model.empty")}
+      key={(x) => `${x.provider.id}:${x.id}`}
+      items={models}
+      current={model.current()}
+      filterKeys={["provider.name", "name", "id"]}
+      sortBy={(a, b) => a.name.localeCompare(b.name)}
+      groupBy={(x) => x.provider.name}
+      sortGroupsBy={(a, b) => {
+        const aProvider = a.items[0].provider.id
+        const bProvider = b.items[0].provider.id
+        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+      }}
+      itemWrapper={(item, node) => (
+        <Tooltip
+          class="w-full"
+          placement="right-start"
+          gutter={12}
+          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
+        >
+          {node}
+        </Tooltip>
+      )}
+      onSelect={(x) => {
+        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+          recent: true,
+        })
+        props.onSelect()
+      }}
+    >
+      {(i) => (
+        <div class="w-full flex items-center gap-x-2 text-13-regular">
+          <span class="truncate">{i.name}</span>
+          <Show when={isFree(i.provider.id, i.cost)}>
+            <Tag>{language.t("model.tag.free")}</Tag>
+          </Show>
+          <Show when={i.latest}>
+            <Tag>{language.t("model.tag.latest")}</Tag>
+          </Show>
+        </div>
+      )}
+    </List>
+  )
+}
+
+type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
+
+export function ModelSelectorPopover(props: {
+  provider?: string
+  model?: ModelState
+  children?: JSX.Element
+  triggerAs?: ValidComponent
+  triggerProps?: ModelSelectorTriggerProps
+  onClose?: (cause: "escape" | "select") => void
+}) {
+  const [store, setStore] = createStore<{
+    open: boolean
+    dismiss: Dismiss | null
+  }>({
+    open: false,
+    dismiss: null,
+  })
+  const dialog = useDialog()
+
+  const close = (dismiss: Dismiss) => {
+    setStore("dismiss", dismiss)
+    setStore("open", false)
+  }
+
+  const handleManage = () => {
+    close("manage")
+    void import("./dialog-manage-models").then((x) => {
+      dialog.show(() => <x.DialogManageModels />)
+    })
+  }
+
+  const handleConnectProvider = () => {
+    close("provider")
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+  const language = useLanguage()
+
+  return (
+    <Kobalte
+      open={store.open}
+      onOpenChange={(next) => {
+        if (next) setStore("dismiss", null)
+        setStore("open", next)
+      }}
+      modal={false}
+      placement="top-start"
+      gutter={4}
+    >
+      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
+        {props.children}
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content
+          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          onEscapeKeyDown={(event) => {
+            close("escape")
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onPointerDownOutside={() => close("outside")}
+          onFocusOutside={() => close("outside")}
+          onCloseAutoFocus={(event) => {
+            const dismiss = store.dismiss
+            if (dismiss === "outside") event.preventDefault()
+            if (dismiss === "escape" || dismiss === "select") {
+              event.preventDefault()
+              props.onClose?.(dismiss)
+            }
+            setStore("dismiss", null)
+          }}
+        >
+          <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
+          <ModelList
+            provider={props.provider}
+            model={props.model}
+            onSelect={() => close("select")}
+            class="p-1"
+            action={
+              <div class="flex items-center gap-1">
+                <Tooltip placement="top" value={language.t("command.provider.connect")}>
+                  <IconButton
+                    icon="plus-small"
+                    variant="ghost"
+                    iconSize="normal"
+                    class="size-6"
+                    aria-label={language.t("command.provider.connect")}
+                    onClick={handleConnectProvider}
+                  />
+                </Tooltip>
+                <Tooltip placement="top" value={language.t("dialog.model.manage")}>
+                  <IconButton
+                    icon="sliders"
+                    variant="ghost"
+                    iconSize="normal"
+                    class="size-6"
+                    aria-label={language.t("dialog.model.manage")}
+                    onClick={handleManage}
+                  />
+                </Tooltip>
+              </div>
+            }
+          />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
+
+export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  const provider = () => {
+    void import("./dialog-select-provider").then((x) => {
+      dialog.show(() => <x.DialogSelectProvider />)
+    })
+  }
+
+  const manage = () => {
+    void import("./dialog-manage-models").then((x) => {
+      dialog.show(() => <x.DialogManageModels />)
+    })
+  }
+
+  return (
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      action={
+        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
+          {language.t("command.provider.connect")}
+        </Button>
+      }
+    >
+      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
+        {language.t("dialog.model.manage")}
+      </Button>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,87 @@
+import { Component, Show } from "solid-js"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Tag } from "@opencode-ai/ui/tag"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+import { useLanguage } from "@/context/language"
+import { DialogCustomProvider } from "./dialog-custom-provider"
+
+const CUSTOM_ID = "_custom"
+
+export const DialogSelectProvider: Component = () => {
+  const dialog = useDialog()
+  const providers = useProviders()
+  const language = useLanguage()
+
+  const popularGroup = () => language.t("dialog.provider.group.popular")
+  const otherGroup = () => language.t("dialog.provider.group.other")
+  const customLabel = () => language.t("settings.providers.tag.custom")
+  const note = (id: string) => {
+    if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
+    if (id === "openai") return language.t("dialog.provider.openai.note")
+    if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
+    if (id === "opencode-go") return language.t("dialog.provider.opencodeGo.tagline")
+  }
+
+  return (
+    <Dialog title={language.t("command.provider.connect")} transition>
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("dialog.provider.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.provider.empty")}
+        activeIcon="plus-small"
+        key={(x) => x?.id}
+        items={() => {
+          language.locale()
+          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all().values()]
+        }}
+        filterKeys={["id", "name"]}
+        groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
+        sortBy={(a, b) => {
+          if (a.id === CUSTOM_ID) return -1
+          if (b.id === CUSTOM_ID) return 1
+          if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+            return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+          return a.name.localeCompare(b.name)
+        }}
+        sortGroupsBy={(a, b) => {
+          const popular = popularGroup()
+          if (a.category === popular && b.category !== popular) return -1
+          if (b.category === popular && a.category !== popular) return 1
+          return 0
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          if (x.id === CUSTOM_ID) {
+            dialog.show(() => <DialogCustomProvider back="providers" />)
+            return
+          }
+          dialog.show(() => <DialogConnectProvider provider={x.id} />)
+        }}
+      >
+        {(i) => (
+          <div class="px-1.25 w-full flex items-center gap-x-3">
+            <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+            <span>{i.name}</span>
+            <Show when={i.id === "opencode"}>
+              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
+            </Show>
+            <Show when={i.id === CUSTOM_ID}>
+              <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+            </Show>
+            <Show when={i.id === "opencode"}>
+              <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+            </Show>
+            <Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
+            <Show when={i.id === "opencode-go"}>
+              <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+            </Show>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,704 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List } from "@opencode-ai/ui/list"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
+import { showToast } from "@/utils/toast"
+import { useNavigate } from "@solidjs/router"
+import { createEffect, createMemo, createResource, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+
+const DEFAULT_USERNAME = "opencode"
+
+interface ServerFormProps {
+  value: string
+  name: string
+  username: string
+  password: string
+  placeholder: string
+  busy: boolean
+  error: string
+  status: boolean | undefined
+  onChange: (value: string) => void
+  onNameChange: (value: string) => void
+  onUsernameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+function useDefaultServer() {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const [defaultKey, defaultUrlActions] = createResource(
+    async () => {
+      try {
+        const key = await platform.getDefaultServer?.()
+        if (!key) return null
+        return key
+      } catch (err) {
+        showRequestError(language, err)
+        return null
+      }
+    },
+    { initialValue: null },
+  )
+
+  const canDefault = createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer)
+  const setDefault = async (key: ServerConnection.Key | null) => {
+    try {
+      await platform.setDefaultServer?.(key)
+      defaultUrlActions.mutate(key)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return { defaultKey: () => defaultKey.latest, canDefault, setDefault }
+}
+
+function useServerPreview() {
+  const checkServerHealth = useCheckServerHealth()
+
+  const looksComplete = (value: string) => {
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return false
+    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
+    if (!host) return false
+    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
+    return host.includes(".") || host.includes(":")
+  }
+
+  const previewStatus = async (
+    value: string,
+    username: string,
+    password: string,
+    setStatus: (value: boolean | undefined) => void,
+  ) => {
+    setStatus(undefined)
+    if (!looksComplete(value)) return
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return
+    const http: ServerConnection.HttpBase = { url: normalized }
+    if (username) http.username = username
+    if (password) http.password = password
+    const result = await checkServerHealth(http)
+    setStatus(result.healthy)
+  }
+
+  return { previewStatus }
+}
+
+function ServerForm(props: ServerFormProps) {
+  const language = useLanguage()
+  const keyDown = (event: KeyboardEvent) => {
+    event.stopPropagation()
+    if (event.key === "Escape") {
+      event.preventDefault()
+      props.onBack()
+      return
+    }
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    props.onSubmit()
+  }
+
+  return (
+    <div>
+      <div class="bg-surface-base rounded-md p-5 flex flex-col gap-3">
+        <div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.url")}
+            placeholder={props.placeholder}
+            value={props.value}
+            autofocus
+            validationState={props.error ? "invalid" : "valid"}
+            error={props.error}
+            disabled={props.busy}
+            onChange={props.onChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+        <TextField
+          type="text"
+          label={language.t("dialog.server.add.name")}
+          placeholder={language.t("dialog.server.add.namePlaceholder")}
+          value={props.name}
+          disabled={props.busy}
+          onChange={props.onNameChange}
+          onKeyDown={keyDown}
+        />
+        <div class="grid grid-cols-2 gap-2 min-w-0">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.username")}
+            placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+            value={props.username}
+            disabled={props.busy}
+            onChange={props.onUsernameChange}
+            onKeyDown={keyDown}
+          />
+          <TextField
+            type="password"
+            label={language.t("dialog.server.add.password")}
+            placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+            value={props.password}
+            disabled={props.busy}
+            onChange={props.onPasswordChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function DialogSelectServer() {
+  const dialog = useDialog()
+  const controller = useServerManagementController({ onSelect: dialog.close })
+
+  return (
+    <Dialog title={controller.formTitle()}>
+      <div class="flex flex-1 min-h-0 flex-col px-5">
+        <Show when={controller.isFormMode()} fallback={<ServerConnectionList controller={controller} />}>
+          <ServerConnectionForm controller={controller} />
+        </Show>
+      </div>
+    </Dialog>
+  )
+}
+
+export function useServerManagementController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const tabs = useTabs()
+  const global = useGlobal()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const { defaultKey, canDefault, setDefault } = useDefaultServer()
+  const { previewStatus } = useServerPreview()
+  const checkServerHealth = useCheckServerHealth()
+  const [store, setStore] = createStore({
+    addServer: {
+      url: "",
+      name: "",
+      username: DEFAULT_USERNAME,
+      password: "",
+      error: "",
+      showForm: false,
+      status: undefined as boolean | undefined,
+    },
+    editServer: {
+      id: undefined as string | undefined,
+      value: "",
+      name: "",
+      username: "",
+      password: "",
+      error: "",
+      status: undefined as boolean | undefined,
+    },
+  })
+
+  const resetAdd = () => {
+    setStore("addServer", {
+      url: "",
+      name: "",
+      username: DEFAULT_USERNAME,
+      password: "",
+      error: "",
+      showForm: false,
+      status: undefined,
+    })
+  }
+  const resetEdit = () => {
+    setStore("editServer", {
+      id: undefined,
+      value: "",
+      name: "",
+      username: "",
+      password: "",
+      error: "",
+      status: undefined,
+    })
+  }
+
+  const addMutation = useMutation(() => ({
+    mutationFn: async (value: string) => {
+      const normalized = normalizeServerUrl(value)
+      if (!normalized) {
+        resetAdd()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        http: { url: normalized },
+      }
+      if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
+      if (store.addServer.password) conn.http.password = store.addServer.password
+      if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("addServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+
+      resetAdd()
+      if (options.navigateOnAdd === false) {
+        server.add(conn)
+        options.onSelect?.()
+        return
+      }
+      await select(conn, true)
+    },
+  }))
+
+  const editMutation = useMutation(() => ({
+    mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
+      if (input.original.type !== "http") return
+      const normalized = normalizeServerUrl(input.value)
+      if (!normalized) {
+        resetEdit()
+        return
+      }
+
+      const name = store.editServer.name.trim() || undefined
+      const username = store.editServer.username || undefined
+      const password = store.editServer.password || undefined
+      const existingName = input.original.displayName
+      if (
+        normalized === input.original.http.url &&
+        name === existingName &&
+        username === input.original.http.username &&
+        password === input.original.http.password
+      ) {
+        resetEdit()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        displayName: name,
+        http: { url: normalized, username, password },
+      }
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("editServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+      if (normalized === input.original.http.url) {
+        server.add(conn)
+      } else {
+        replaceServer(input.original, conn)
+      }
+
+      resetEdit()
+    },
+  }))
+
+  const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
+    const originalKey = ServerConnection.key(original)
+    const active = server.key
+    tabs.removeServer(originalKey)
+    const newConn = server.add(next)
+    if (!newConn) return
+    const nextActive = active === originalKey ? ServerConnection.key(newConn) : active
+    if (nextActive) server.setActive(nextActive)
+    server.remove(originalKey)
+  }
+
+  const items = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((x) => x !== current)]
+  })
+
+  const settings = useSettings()
+  const current = createMemo<ServerConnection.Any | undefined>(() =>
+    settings.general.newLayoutDesigns()
+      ? undefined
+      : (items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0]),
+  )
+
+  const sortedItems = createMemo(() => {
+    const list = items()
+    if (!list.length) return list
+    const active = current()
+    const order = new Map(list.map((url, index) => [url, index] as const))
+    const rank = (value?: ServerHealth) => {
+      if (value?.healthy === true) return 0
+      if (value?.healthy === false) return 2
+      return 1
+    }
+    return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
+      const diff =
+        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  async function select(conn: ServerConnection.Any, persist?: boolean) {
+    if (!persist && global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
+    options.onSelect?.()
+    if (persist && conn.type === "http") {
+      server.add(conn)
+      navigate("/")
+      return
+    }
+    navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
+  }
+
+  const handleAddChange = (value: string) => {
+    if (addMutation.isPending) return
+    setStore("addServer", { url: value, error: "" })
+    void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
+      setStore("addServer", { status: next }),
+    )
+  }
+
+  const handleAddNameChange = (value: string) => {
+    if (addMutation.isPending) return
+    setStore("addServer", { name: value, error: "" })
+  }
+
+  const handleAddUsernameChange = (value: string) => {
+    if (addMutation.isPending) return
+    setStore("addServer", { username: value, error: "" })
+    void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
+      setStore("addServer", { status: next }),
+    )
+  }
+
+  const handleAddPasswordChange = (value: string) => {
+    if (addMutation.isPending) return
+    setStore("addServer", { password: value, error: "" })
+    void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
+      setStore("addServer", { status: next }),
+    )
+  }
+
+  const handleEditChange = (value: string) => {
+    if (editMutation.isPending) return
+    setStore("editServer", { value, error: "" })
+    void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
+      setStore("editServer", { status: next }),
+    )
+  }
+
+  const handleEditNameChange = (value: string) => {
+    if (editMutation.isPending) return
+    setStore("editServer", { name: value, error: "" })
+  }
+
+  const handleEditUsernameChange = (value: string) => {
+    if (editMutation.isPending) return
+    setStore("editServer", { username: value, error: "" })
+    void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
+      setStore("editServer", { status: next }),
+    )
+  }
+
+  const handleEditPasswordChange = (value: string) => {
+    if (editMutation.isPending) return
+    setStore("editServer", { password: value, error: "" })
+    void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
+      setStore("editServer", { status: next }),
+    )
+  }
+
+  const mode = createMemo<"list" | "add" | "edit">(() => {
+    if (store.editServer.id) return "edit"
+    if (store.addServer.showForm) return "add"
+    return "list"
+  })
+
+  const editing = createMemo(() => {
+    if (!store.editServer.id) return
+    return items().find((x) => x.type === "http" && x.http.url === store.editServer.id)
+  })
+
+  const resetForm = () => {
+    resetAdd()
+    resetEdit()
+  }
+
+  const startAdd = () => {
+    resetEdit()
+    setStore("addServer", {
+      showForm: true,
+      url: "",
+      name: "",
+      username: DEFAULT_USERNAME,
+      password: "",
+      error: "",
+      status: undefined,
+    })
+  }
+
+  const startEdit = (conn: ServerConnection.Http) => {
+    resetAdd()
+    setStore("editServer", {
+      id: conn.http.url,
+      value: conn.http.url,
+      name: conn.displayName ?? "",
+      username: conn.http.username ?? "",
+      password: conn.http.password ?? "",
+      error: "",
+      status: global.servers.health[ServerConnection.key(conn)]?.healthy,
+    })
+  }
+
+  const submitForm = () => {
+    if (mode() === "add") {
+      if (addMutation.isPending) return
+      setStore("addServer", { error: "" })
+      addMutation.mutate(store.addServer.url)
+      return
+    }
+    const original = editing()
+    if (!original) return
+    if (editMutation.isPending) return
+    setStore("editServer", { error: "" })
+    editMutation.mutate({ original, value: store.editServer.value })
+  }
+
+  const isFormMode = createMemo(() => mode() !== "list")
+  const isAddMode = createMemo(() => mode() === "add")
+  const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))
+
+  const formTitle = createMemo(() => {
+    if (!isFormMode()) return language.t("dialog.server.title")
+    return (
+      <div class="flex items-center gap-2 -ml-2">
+        <IconButton icon="arrow-left" variant="ghost" onClick={resetForm} aria-label={language.t("common.goBack")} />
+        <span>{isAddMode() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}</span>
+      </div>
+    )
+  })
+
+  createEffect(() => {
+    if (!store.editServer.id) return
+    if (editing()) return
+    resetEdit()
+  })
+
+  async function handleRemove(key: ServerConnection.Key) {
+    try {
+      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
+      tabs.removeServer(key)
+      server.remove(key)
+      if ((await platform.getDefaultServer?.()) === key) {
+        await setDefault(null)
+      }
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return {
+    defaultKey,
+    canDefault,
+    current,
+    sortedItems,
+    status: () => global.servers.health,
+    isFormMode,
+    isAddMode,
+    formTitle,
+    formBusy,
+    formValue: () => (isAddMode() ? store.addServer.url : store.editServer.value),
+    formName: () => (isAddMode() ? store.addServer.name : store.editServer.name),
+    formUsername: () => (isAddMode() ? store.addServer.username : store.editServer.username),
+    formPassword: () => (isAddMode() ? store.addServer.password : store.editServer.password),
+    formError: () => (isAddMode() ? store.addServer.error : store.editServer.error),
+    formStatus: () => (isAddMode() ? store.addServer.status : store.editServer.status),
+    select,
+    setDefault,
+    startAdd,
+    startEdit,
+    resetForm,
+    submitForm,
+    handleRemove,
+    handleFormChange: () => (isAddMode() ? handleAddChange : handleEditChange),
+    handleFormNameChange: () => (isAddMode() ? handleAddNameChange : handleEditNameChange),
+    handleFormUsernameChange: () => (isAddMode() ? handleAddUsernameChange : handleEditUsernameChange),
+    handleFormPasswordChange: () => (isAddMode() ? handleAddPasswordChange : handleEditPasswordChange),
+  }
+}
+
+export function ServerConnectionList(props: { controller: ReturnType<typeof useServerManagementController> }) {
+  const language = useLanguage()
+  const settings = useSettings()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <List
+        class="flex-1 min-h-0 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
+        search={{
+          placeholder: language.t("dialog.server.search.placeholder"),
+          autofocus: false,
+        }}
+        noInitialSelection
+        emptyMessage={language.t("dialog.server.empty")}
+        items={props.controller.sortedItems}
+        key={(x) => x.http.url}
+        onSelect={(x) => {
+          if (x && !settings.general.newLayoutDesigns()) void props.controller.select(x)
+        }}
+        divider={true}
+      >
+        {(i) => {
+          const key = ServerConnection.key(i)
+          return (
+            <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
+              <div class="flex flex-col h-full items-center w-5">
+                <ServerHealthIndicator health={props.controller.status()[key]} />
+              </div>
+              <ServerRow
+                conn={i}
+                dimmed={props.controller.status()[key]?.healthy === false}
+                status={props.controller.status()[key]}
+                class="flex items-center gap-3 min-w-0 flex-1"
+                badge={
+                  <Show when={props.controller.defaultKey() === ServerConnection.key(i)}>
+                    <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
+                      {language.t("dialog.server.status.default")}
+                    </span>
+                  </Show>
+                }
+                showCredentials
+              />
+              <div class="flex items-center justify-center gap-4 pl-4">
+                <Show when={props.controller.current() && ServerConnection.key(props.controller.current()!) === key}>
+                  <Icon name="check" class="h-6" />
+                </Show>
+
+                <Show when={i.type === "http"}>
+                  <DropdownMenu>
+                    <DropdownMenu.Trigger
+                      as={IconButton}
+                      icon="dot-grid"
+                      variant="ghost"
+                      class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                      onClick={(e: MouseEvent) => e.stopPropagation()}
+                      onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                    />
+                    <DropdownMenu.Portal>
+                      <DropdownMenu.Content class="mt-1">
+                        <DropdownMenu.Item
+                          onSelect={() => {
+                            if (i.type !== "http") return
+                            props.controller.startEdit(i)
+                          }}
+                        >
+                          <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                        <Show when={props.controller.canDefault() && props.controller.defaultKey() !== key}>
+                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(key)}>
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.default")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
+                        </Show>
+                        <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
+                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(null)}>
+                            <DropdownMenu.ItemLabel>
+                              {language.t("dialog.server.menu.defaultRemove")}
+                            </DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
+                        </Show>
+                        <DropdownMenu.Separator />
+                        <DropdownMenu.Item
+                          onSelect={() => props.controller.handleRemove(ServerConnection.key(i))}
+                          class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                        >
+                          <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Content>
+                    </DropdownMenu.Portal>
+                  </DropdownMenu>
+                </Show>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="secondary"
+          icon="plus-small"
+          size="large"
+          onClick={props.controller.startAdd}
+          class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
+        >
+          {language.t("dialog.server.add.button")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function ServerConnectionForm(props: { controller: ReturnType<typeof useServerManagementController> }) {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <ServerForm
+        value={props.controller.formValue()}
+        name={props.controller.formName()}
+        username={props.controller.formUsername()}
+        password={props.controller.formPassword()}
+        placeholder={language.t("dialog.server.add.placeholder")}
+        busy={props.controller.formBusy()}
+        error={props.controller.formError()}
+        status={props.controller.formStatus()}
+        onChange={props.controller.handleFormChange()}
+        onNameChange={props.controller.handleFormNameChange()}
+        onUsernameChange={props.controller.handleFormUsernameChange()}
+        onPasswordChange={props.controller.handleFormPasswordChange()}
+        onSubmit={props.controller.submitForm}
+        onBack={props.controller.resetForm}
+      />
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="primary"
+          size="large"
+          onClick={props.controller.submitForm}
+          disabled={props.controller.formBusy()}
+          class="px-3 py-1.5"
+        >
+          {props.controller.formBusy()
+            ? language.t("dialog.server.add.checking")
+            : props.controller.isAddMode()
+              ? language.t("dialog.server.add.button")
+              : language.t("common.save")}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,81 @@
+import { Component } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { SettingsGeneral } from "./settings-general"
+import { SettingsKeybinds } from "./settings-keybinds"
+import { SettingsProviders } from "./settings-providers"
+import { SettingsModels } from "./settings-models"
+import { SettingsServers } from "./settings-servers"
+
+export const DialogSettings: Component = () => {
+  const language = useLanguage()
+  const platform = usePlatform()
+
+  return (
+    <Dialog size="x-large" transition>
+      <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
+        <Tabs.List>
+          <div class="flex flex-col justify-between h-full w-full gap-4">
+            <div class="flex flex-col gap-3 w-full pt-3">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="general">
+                      <Icon name="sliders" />
+                      {language.t("settings.tab.general")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="shortcuts">
+                      <Icon name="keyboard" />
+                      {language.t("settings.tab.shortcuts")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="servers">
+                      <Icon name="server" />
+                      {language.t("status.popover.tab.servers")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.server")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="providers">
+                      <Icon name="providers" />
+                      {language.t("settings.providers.title")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="models">
+                      <Icon name="models" />
+                      {language.t("settings.models.title")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
+              <span>{language.t("app.name.desktop")}</span>
+              <span class="text-11-regular">v{platform.version}</span>
+            </div>
+          </div>
+        </Tabs.List>
+        <Tabs.Content value="general" class="no-scrollbar">
+          <SettingsGeneral />
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="no-scrollbar">
+          <SettingsKeybinds />
+        </Tabs.Content>
+        <Tabs.Content value="servers" class="no-scrollbar">
+          <SettingsServers />
+        </Tabs.Content>
+        <Tabs.Content value="providers" class="no-scrollbar">
+          <SettingsProviders />
+        </Tabs.Content>
+        <Tabs.Content value="models" class="no-scrollbar">
+          <SettingsModels />
+        </Tabs.Content>
+      </Tabs>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-usage-exceeded.tsx

@@ -0,0 +1,44 @@
+import { usePlatform } from "@/context/platform"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { JSX } from "solid-js"
+
+export type DialogGoUpsellProps = {
+  title: string
+  description: JSX.Element
+  link?: string
+  actionLabel: string
+  onClose?: (dontShowAgain?: boolean) => void
+}
+
+export function DialogUsageExceeded(props: DialogGoUpsellProps) {
+  const dialog = useDialog()
+  const platform = usePlatform()
+
+  const runAction = () => {
+    if (props.link) platform.openLink(props.link)
+    props.onClose?.()
+    dialog.close()
+  }
+
+  const dismiss = () => {
+    props.onClose?.(true)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title={props.title} description={props.description} fit>
+      <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+        <div class="flex justify-end gap-2">
+          <Button variant="ghost" size="large" onClick={dismiss}>
+            Don't show again
+          </Button>
+          <Button variant="primary" size="large" onClick={runAction}>
+            {props.actionLabel}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

packages/app/src/components/directory-picker-policy.ts

@@ -0,0 +1,7 @@
+import { ServerConnection } from "@/context/server"
+import type { Platform } from "@/context/platform"
+
+export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {
+  if (platform === "desktop" && ServerConnection.local(server)) return "native" as const
+  return "server" as const
+}

packages/app/src/components/directory-picker.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+const local = {
+  type: "sidecar",
+  variant: "base",
+  http: { url: "http://localhost:4096" },
+} as const
+const remote = {
+  type: "ssh",
+  host: "example.test",
+  http: { url: "http://localhost:4096" },
+} as const
+
+describe("directoryPickerKind", () => {
+  test("uses the native picker only for local desktop projects", () => {
+    expect(directoryPickerKind("desktop", local)).toBe("native")
+    expect(directoryPickerKind("desktop", remote)).toBe("server")
+    expect(directoryPickerKind("web", local)).toBe("server")
+  })
+})

packages/app/src/components/directory-picker.tsx

@@ -0,0 +1,29 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ServerConnection } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { DialogSelectDirectory } from "./dialog-select-directory"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+type DirectoryPickerInput = {
+  server: ServerConnection.Any
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+}
+
+export function useDirectoryPicker() {
+  const platform = usePlatform()
+  const dialog = useDialog()
+
+  return (input: DirectoryPickerInput) => {
+    if (directoryPickerKind(platform.platform, input.server) === "native" && platform.platform === "desktop") {
+      void platform.openDirectoryPickerDialog({ title: input.title, multiple: input.multiple }).then(input.onSelect)
+      return
+    }
+
+    dialog.show(
+      () => <DialogSelectDirectory {...input} />,
+      () => input.onSelect(null),
+    )
+  }
+}

packages/app/src/components/file-tree.test.ts

@@ -0,0 +1,80 @@
+import { beforeAll, describe, expect, mock, test } from "bun:test"
+
+let shouldListRoot: typeof import("./file-tree").shouldListRoot
+let shouldListExpanded: typeof import("./file-tree").shouldListExpanded
+let dirsToExpand: typeof import("./file-tree").dirsToExpand
+
+beforeAll(async () => {
+  mock.module("@solidjs/router", () => ({
+    useNavigate: () => () => undefined,
+    useParams: () => ({}),
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
+  }))
+  mock.module("@/context/file", () => ({
+    useFile: () => ({
+      tree: {
+        state: () => undefined,
+        list: () => Promise.resolve(),
+        children: () => [],
+        expand: () => {},
+        collapse: () => {},
+      },
+    }),
+  }))
+  mock.module("@opencode-ai/ui/collapsible", () => ({
+    Collapsible: {
+      Trigger: (props: { children?: unknown }) => props.children,
+      Content: (props: { children?: unknown }) => props.children,
+    },
+  }))
+  mock.module("@opencode-ai/ui/file-icon", () => ({ FileIcon: () => null }))
+  mock.module("@opencode-ai/ui/icon", () => ({ Icon: () => null }))
+  mock.module("@opencode-ai/ui/tooltip", () => ({ Tooltip: (props: { children?: unknown }) => props.children }))
+  const mod = await import("./file-tree")
+  shouldListRoot = mod.shouldListRoot
+  shouldListExpanded = mod.shouldListExpanded
+  dirsToExpand = mod.dirsToExpand
+})
+
+describe("file tree fetch discipline", () => {
+  test("root lists on mount unless already loaded or loading", () => {
+    expect(shouldListRoot({ level: 0 })).toBe(true)
+    expect(shouldListRoot({ level: 0, dir: { loaded: true } })).toBe(false)
+    expect(shouldListRoot({ level: 0, dir: { loading: true } })).toBe(false)
+    expect(shouldListRoot({ level: 1 })).toBe(false)
+  })
+
+  test("nested dirs list only when expanded and stale", () => {
+    expect(shouldListExpanded({ level: 1 })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: false } })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true } })).toBe(true)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true, loaded: true } })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true, loading: true } })).toBe(false)
+    expect(shouldListExpanded({ level: 0, dir: { expanded: true } })).toBe(false)
+  })
+
+  test("allowed auto-expand picks only collapsed dirs", () => {
+    const expanded = new Set<string>()
+    const filter = { dirs: new Set(["src", "src/components"]) }
+
+    const first = dirsToExpand({
+      level: 0,
+      filter,
+      expanded: (dir) => expanded.has(dir),
+    })
+
+    expect(first).toEqual(["src", "src/components"])
+
+    for (const dir of first) expanded.add(dir)
+
+    const second = dirsToExpand({
+      level: 0,
+      filter,
+      expanded: (dir) => expanded.has(dir),
+    })
+
+    expect(second).toEqual([])
+    expect(dirsToExpand({ level: 1, filter, expanded: () => false })).toEqual([])
+  })
+})

packages/app/src/components/file-tree.tsx

@@ -0,0 +1,506 @@
+import { useFile } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
+import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import {
+  createEffect,
+  createMemo,
+  For,
+  Match,
+  on,
+  Show,
+  splitProps,
+  Switch,
+  untrack,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { FileNode } from "@opencode-ai/sdk/v2"
+
+const MAX_DEPTH = 128
+
+function pathToFileUrl(filepath: string): string {
+  return `file://${encodeFilePath(filepath)}`
+}
+
+type Kind = "add" | "del" | "mix"
+
+type Filter = {
+  files: Set<string>
+  dirs: Set<string>
+}
+
+export function shouldListRoot(input: { level: number; dir?: { loaded?: boolean; loading?: boolean } }) {
+  if (input.level !== 0) return false
+  if (input.dir?.loaded) return false
+  if (input.dir?.loading) return false
+  return true
+}
+
+export function shouldListExpanded(input: {
+  level: number
+  dir?: { expanded?: boolean; loaded?: boolean; loading?: boolean }
+}) {
+  if (input.level === 0) return false
+  if (!input.dir?.expanded) return false
+  if (input.dir.loaded) return false
+  if (input.dir.loading) return false
+  return true
+}
+
+export function dirsToExpand(input: {
+  level: number
+  filter?: { dirs: Set<string> }
+  expanded: (dir: string) => boolean
+}) {
+  if (input.level !== 0) return []
+  if (!input.filter) return []
+  return [...input.filter.dirs].filter((dir) => !input.expanded(dir))
+}
+
+const kindLabel = (kind: Kind) => {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  return "M"
+}
+
+const kindTextColor = (kind: Kind) => {
+  if (kind === "add") return "color: var(--icon-diff-add-base)"
+  if (kind === "del") return "color: var(--icon-diff-delete-base)"
+  return "color: var(--icon-diff-modified-base)"
+}
+
+const kindDotColor = (kind: Kind) => {
+  if (kind === "add") return "background-color: var(--icon-diff-add-base)"
+  if (kind === "del") return "background-color: var(--icon-diff-delete-base)"
+  return "background-color: var(--icon-diff-modified-base)"
+}
+
+const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
+  const kind = kinds?.get(node.path)
+  if (!kind) return
+  if (!marks?.has(node.path)) return
+  return kind
+}
+
+const buildDragImage = (target: HTMLElement) => {
+  const icon = target.querySelector('[data-component="file-icon"]') ?? target.querySelector("svg")
+  const text = target.querySelector("span")
+  if (!icon || !text) return
+
+  const image = document.createElement("div")
+  image.className =
+    "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
+  image.style.position = "absolute"
+  image.style.top = "-1000px"
+  image.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
+  return image
+}
+
+const withFileDragImage = (event: DragEvent) => {
+  const image = buildDragImage(event.currentTarget as HTMLElement)
+  if (!image) return
+  document.body.appendChild(image)
+  event.dataTransfer?.setDragImage(image, 0, 12)
+  setTimeout(() => document.body.removeChild(image), 0)
+}
+
+const FileTreeNode = (
+  p: ParentProps &
+    ComponentProps<"div"> &
+    ComponentProps<"button"> & {
+      node: FileNode
+      level: number
+      active?: string
+      nodeClass?: string
+      draggable: boolean
+      kinds?: ReadonlyMap<string, Kind>
+      marks?: Set<string>
+      as?: "div" | "button"
+    },
+) => {
+  const [local, rest] = splitProps(p, [
+    "node",
+    "level",
+    "active",
+    "nodeClass",
+    "draggable",
+    "kinds",
+    "marks",
+    "as",
+    "children",
+    "class",
+    "classList",
+  ])
+  const kind = () => visibleKind(local.node, local.kinds, local.marks)
+  const active = () => !!kind() && !local.node.ignored
+  const color = () => {
+    const value = kind()
+    if (!value) return
+    return kindTextColor(value)
+  }
+
+  return (
+    <Dynamic
+      component={local.as ?? "div"}
+      classList={{
+        "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
+        "bg-surface-base-active": local.node.path === local.active,
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+        [local.nodeClass ?? ""]: !!local.nodeClass,
+      }}
+      style={`padding-left: ${Math.max(0, 8 + local.level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
+      draggable={local.draggable}
+      onDragStart={(event: DragEvent) => {
+        if (!local.draggable) return
+        event.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+        event.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
+        if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy"
+        withFileDragImage(event)
+      }}
+      {...rest}
+    >
+      {local.children}
+      <span
+        classList={{
+          "flex-1 min-w-0 text-12-medium whitespace-nowrap truncate": true,
+          "text-text-weaker": local.node.ignored,
+          "text-text-weak": !local.node.ignored && !active(),
+        }}
+        style={active() ? color() : undefined}
+      >
+        {local.node.name}
+      </span>
+      {(() => {
+        const value = kind()
+        if (!value) return null
+        if (local.node.type === "file") {
+          return (
+            <span class="shrink-0 w-4 text-center text-12-medium" style={kindTextColor(value)}>
+              {kindLabel(value)}
+            </span>
+          )
+        }
+        return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={kindDotColor(value)} />
+      })()}
+    </Dynamic>
+  )
+}
+
+export default function FileTree(props: {
+  path: string
+  class?: string
+  nodeClass?: string
+  active?: string
+  level?: number
+  allowed?: readonly string[]
+  modified?: readonly string[]
+  kinds?: ReadonlyMap<string, Kind>
+  draggable?: boolean
+  onFileClick?: (file: FileNode) => void
+
+  _filter?: Filter
+  _marks?: Set<string>
+  _deeps?: Map<string, number>
+  _kinds?: ReadonlyMap<string, Kind>
+  _chain?: readonly string[]
+}) {
+  const file = useFile()
+  const level = props.level ?? 0
+  const draggable = () => props.draggable ?? true
+
+  const key = (p: string) =>
+    file
+      .normalize(p)
+      .replace(/[\\/]+$/, "")
+      .replaceAll("\\", "/")
+  const chain = props._chain ? [...props._chain, key(props.path)] : [key(props.path)]
+
+  const filter = createMemo(() => {
+    if (props._filter) return props._filter
+
+    const allowed = props.allowed
+    if (!allowed) return
+
+    const files = new Set(allowed)
+    const dirs = new Set<string>()
+
+    for (const item of allowed) {
+      const parts = item.split("/")
+      const parents = parts.slice(0, -1)
+      for (const [idx] of parents.entries()) {
+        const dir = parents.slice(0, idx + 1).join("/")
+        if (dir) dirs.add(dir)
+      }
+    }
+
+    return { files, dirs }
+  })
+
+  const marks = createMemo(() => {
+    if (props._marks) return props._marks
+
+    const out = new Set<string>()
+    for (const item of props.modified ?? []) out.add(item)
+    for (const item of props.kinds?.keys() ?? []) out.add(item)
+    if (out.size === 0) return
+    return out
+  })
+
+  const kinds = createMemo(() => {
+    if (props._kinds) return props._kinds
+    return props.kinds
+  })
+
+  const deeps = createMemo(() => {
+    if (props._deeps) return props._deeps
+
+    const out = new Map<string, number>()
+
+    const root = props.path
+    if (!(file.tree.state(root)?.expanded ?? false)) return out
+
+    const seen = new Set<string>()
+    const stack: { dir: string; lvl: number; i: number; kids: string[]; max: number }[] = []
+
+    const push = (dir: string, lvl: number) => {
+      const id = key(dir)
+      if (seen.has(id)) return
+      seen.add(id)
+
+      const kids = file.tree
+        .children(dir)
+        .filter((node) => node.type === "directory" && (file.tree.state(node.path)?.expanded ?? false))
+        .map((node) => node.path)
+
+      stack.push({ dir, lvl, i: 0, kids, max: lvl })
+    }
+
+    push(root, level - 1)
+
+    while (stack.length > 0) {
+      const top = stack[stack.length - 1]!
+
+      if (top.i < top.kids.length) {
+        const next = top.kids[top.i]!
+        top.i++
+        push(next, top.lvl + 1)
+        continue
+      }
+
+      out.set(top.dir, top.max)
+      stack.pop()
+
+      const parent = stack[stack.length - 1]
+      if (!parent) continue
+      parent.max = Math.max(parent.max, top.max)
+    }
+
+    return out
+  })
+
+  createEffect(() => {
+    const current = filter()
+    const dirs = dirsToExpand({
+      level,
+      filter: current,
+      expanded: (dir) => untrack(() => file.tree.state(dir)?.expanded) ?? false,
+    })
+    for (const dir of dirs) file.tree.expand(dir)
+  })
+
+  createEffect(
+    on(
+      () => props.path,
+      (path) => {
+        const dir = untrack(() => file.tree.state(path))
+        if (!shouldListRoot({ level, dir })) return
+        void file.tree.list(path)
+      },
+      { defer: false },
+    ),
+  )
+
+  const nodes = createMemo(() => {
+    const nodes = file.tree.children(props.path)
+    const current = filter()
+    if (!current) return nodes
+
+    const parent = (path: string) => {
+      const idx = path.lastIndexOf("/")
+      if (idx === -1) return ""
+      return path.slice(0, idx)
+    }
+
+    const leaf = (path: string) => {
+      const idx = path.lastIndexOf("/")
+      return idx === -1 ? path : path.slice(idx + 1)
+    }
+
+    const out = nodes.filter((node) => {
+      if (node.type === "file") return current.files.has(node.path)
+      return current.dirs.has(node.path)
+    })
+
+    const seen = new Set(out.map((node) => node.path))
+
+    for (const dir of current.dirs) {
+      if (parent(dir) !== props.path) continue
+      if (seen.has(dir)) continue
+      out.push({
+        name: leaf(dir),
+        path: dir,
+        absolute: dir,
+        type: "directory",
+        ignored: false,
+      })
+      seen.add(dir)
+    }
+
+    for (const item of current.files) {
+      if (parent(item) !== props.path) continue
+      if (seen.has(item)) continue
+      out.push({
+        name: leaf(item),
+        path: item,
+        absolute: item,
+        type: "file",
+        ignored: false,
+      })
+      seen.add(item)
+    }
+
+    out.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "directory" ? -1 : 1
+      }
+      return a.name.localeCompare(b.name)
+    })
+
+    return out
+  })
+
+  return (
+    <div data-component="filetree" class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
+      <For each={nodes()}>
+        {(node) => {
+          const expanded = () => file.tree.state(node.path)?.expanded ?? false
+          const deep = () => deeps().get(node.path) ?? -1
+          const kind = () => visibleKind(node, kinds(), marks())
+          const active = () => !!kind() && !node.ignored
+
+          return (
+            <Switch>
+              <Match when={node.type === "directory"}>
+                <Collapsible
+                  variant="ghost"
+                  class="w-full"
+                  data-scope="filetree"
+                  forceMount={false}
+                  open={expanded()}
+                  onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
+                >
+                  <Collapsible.Trigger>
+                    <FileTreeNode
+                      node={node}
+                      level={level}
+                      active={props.active}
+                      nodeClass={props.nodeClass}
+                      draggable={draggable()}
+                      kinds={kinds()}
+                      marks={marks()}
+                    >
+                      <div class="size-4 flex items-center justify-center text-icon-weak">
+                        <Icon name={expanded() ? "chevron-down" : "chevron-right"} size="small" />
+                      </div>
+                    </FileTreeNode>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content class="relative pt-0.5">
+                    <div
+                      classList={{
+                        "absolute top-0 bottom-0 w-px pointer-events-none bg-border-weak-base opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none": true,
+                        "group-hover/filetree:opacity-100": expanded() && deep() === level,
+                        "group-hover/filetree:opacity-50": !(expanded() && deep() === level),
+                      }}
+                      style={`left: ${Math.max(0, 8 + level * 12 - 4) + 8}px`}
+                    />
+                    <Show
+                      when={level < MAX_DEPTH && !chain.includes(key(node.path))}
+                      fallback={<div class="px-2 py-1 text-12-regular text-text-weak">...</div>}
+                    >
+                      <FileTree
+                        path={node.path}
+                        level={level + 1}
+                        allowed={props.allowed}
+                        modified={props.modified}
+                        kinds={props.kinds}
+                        active={props.active}
+                        draggable={props.draggable}
+                        onFileClick={props.onFileClick}
+                        _filter={filter()}
+                        _marks={marks()}
+                        _deeps={deeps()}
+                        _kinds={kinds()}
+                        _chain={chain}
+                      />
+                    </Show>
+                  </Collapsible.Content>
+                </Collapsible>
+              </Match>
+              <Match when={node.type === "file"}>
+                <FileTreeNode
+                  node={node}
+                  level={level}
+                  active={props.active}
+                  nodeClass={props.nodeClass}
+                  draggable={draggable()}
+                  kinds={kinds()}
+                  marks={marks()}
+                  as="button"
+                  type="button"
+                  onClick={() => props.onFileClick?.(node)}
+                >
+                  <div class="w-4 shrink-0" />
+                  <Switch>
+                    <Match when={node.ignored}>
+                      <FileIcon
+                        node={node}
+                        class="size-4 filetree-icon filetree-icon--mono"
+                        style="color: var(--icon-weak-base)"
+                        mono
+                      />
+                    </Match>
+                    <Match when={active()}>
+                      <FileIcon
+                        node={node}
+                        class="size-4 filetree-icon filetree-icon--mono"
+                        style={kindTextColor(kind()!)}
+                        mono
+                      />
+                    </Match>
+                    <Match when={!node.ignored}>
+                      <span class="filetree-iconpair size-4">
+                        <FileIcon
+                          node={node}
+                          class="size-4 filetree-icon filetree-icon--color opacity-0 group-hover/filetree:opacity-100"
+                        />
+                        <FileIcon
+                          node={node}
+                          class="size-4 filetree-icon filetree-icon--mono group-hover/filetree:opacity-0"
+                          mono
+                        />
+                      </span>
+                    </Match>
+                  </Switch>
+                </FileTreeNode>
+              </Match>
+            </Switch>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Popover } from "@opencode-ai/ui/popover"
+import { createSignal, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+
+export function HelpButton() {
+  if (import.meta.env.VITE_OPENCODE_CHANNEL !== "dev") return null
+
+  const [state, setState] = /* persisted(Persist.global("help-button"), */ createStore({ dismissed: false }) /* ) */
+  const [shown, setShown] = createSignal(false)
+
+  return (
+    <Show when={!state.dismissed}>
+      <div class="fixed bottom-4 right-4 z-50">
+        <Popover
+          open={shown()}
+          onOpenChange={setShown}
+          triggerAs="button"
+          triggerProps={{
+            type: "button",
+            "aria-label": "Help",
+            class:
+              "size-7 rounded-full bg-background-base shadow-[var(--shadow-lg-border-base)] flex items-center justify-center text-text-base hover:text-text-strong transition-colors",
+          }}
+          trigger={<span aria-hidden="true">?</span>}
+          class="[&_[data-slot=popover-body]]:p-0 w-[320px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl"
+          gutter={8}
+          placement="top-end"
+        >
+          <Show when={shown()}>
+            <div class="relative flex flex-col gap-1 w-[320px] p-4 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]">
+              <button
+                type="button"
+                aria-label="Close"
+                class="absolute top-3.5 right-3.5 size-6 rounded-md flex items-center justify-center text-text-base hover:text-text-strong hover:bg-surface-raised-base-hover transition-colors"
+                onClick={() => {
+                  setShown(false)
+                  setState("dismissed", true)
+                }}
+              >
+                <Icon name="xmark-small" />
+              </button>
+              <span class="text-14-regular text-text-strong">Lorem ipsum dolor sit amet</span>
+              <p class="text-12-regular text-text-weak">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+              </p>
+            </div>
+          </Show>
+        </Popover>
+      </div>
+    </Show>
+  )
+}

packages/app/src/components/link.tsx

@@ -0,0 +1,26 @@
+import { ComponentProps, splitProps } from "solid-js"
+import { usePlatform } from "@/context/platform"
+
+export interface LinkProps extends Omit<ComponentProps<"a">, "href"> {
+  href: string
+}
+
+export function Link(props: LinkProps) {
+  const platform = usePlatform()
+  const [local, rest] = splitProps(props, ["href", "children", "class"])
+
+  return (
+    <a
+      href={local.href}
+      class={`text-text-strong underline ${local.class ?? ""}`}
+      onClick={(event) => {
+        if (!local.href) return
+        event.preventDefault()
+        platform.openLink(local.href)
+      }}
+      {...rest}
+    >
+      {local.children}
+    </a>
+  )
+}

packages/app/src/components/model-tooltip.tsx

@@ -0,0 +1,91 @@
+import { Show, type Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+type InputKey = "text" | "image" | "audio" | "video" | "pdf"
+type InputMap = Record<InputKey, boolean>
+
+type ModelInfo = {
+  id: string
+  name: string
+  provider: {
+    name: string
+  }
+  capabilities?: {
+    reasoning: boolean
+    input: InputMap
+  }
+  modalities?: {
+    input: Array<string>
+  }
+  reasoning?: boolean
+  limit: {
+    context: number
+  }
+}
+
+export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?: boolean }> = (props) => {
+  const language = useLanguage()
+  const sourceName = (model: ModelInfo) => {
+    const value = `${model.id} ${model.name}`.toLowerCase()
+
+    if (/claude|anthropic/.test(value)) return language.t("model.provider.anthropic")
+    if (/gpt|o[1-4]|codex|openai/.test(value)) return language.t("model.provider.openai")
+    if (/gemini|palm|bard|google/.test(value)) return language.t("model.provider.google")
+    if (/grok|xai/.test(value)) return language.t("model.provider.xai")
+    if (/llama|meta/.test(value)) return language.t("model.provider.meta")
+
+    return model.provider.name
+  }
+  const inputLabel = (value: string) => {
+    if (value === "text") return language.t("model.input.text")
+    if (value === "image") return language.t("model.input.image")
+    if (value === "audio") return language.t("model.input.audio")
+    if (value === "video") return language.t("model.input.video")
+    if (value === "pdf") return language.t("model.input.pdf")
+    return value
+  }
+  const title = () => {
+    const tags: Array<string> = []
+    if (props.latest) tags.push(language.t("model.tag.latest"))
+    if (props.free) tags.push(language.t("model.tag.free"))
+    const suffix = tags.length ? ` (${tags.join(", ")})` : ""
+    return `${sourceName(props.model)} ${props.model.name}${suffix}`
+  }
+  const inputs = () => {
+    if (props.model.capabilities) {
+      const input = props.model.capabilities.input
+      const order: Array<InputKey> = ["text", "image", "audio", "video", "pdf"]
+      const entries = order.filter((key) => input[key]).map((key) => inputLabel(key))
+      return entries.length ? entries.join(", ") : undefined
+    }
+    const raw = props.model.modalities?.input
+    if (!raw) return
+    const entries = raw.map((value) => inputLabel(value))
+    return entries.length ? entries.join(", ") : undefined
+  }
+  const reasoning = () => {
+    if (props.model.capabilities)
+      return props.model.capabilities.reasoning
+        ? language.t("model.tooltip.reasoning.allowed")
+        : language.t("model.tooltip.reasoning.none")
+    return props.model.reasoning
+      ? language.t("model.tooltip.reasoning.allowed")
+      : language.t("model.tooltip.reasoning.none")
+  }
+  const context = () => language.t("model.tooltip.context", { limit: props.model.limit.context.toLocaleString() })
+
+  return (
+    <div class="flex flex-col gap-1 py-1">
+      <div class="text-13-medium">{title()}</div>
+      <Show when={inputs()}>
+        {(value) => (
+          <div class="text-12-regular text-text-invert-base">
+            {language.t("model.tooltip.allows", { inputs: value() })}
+          </div>
+        )}
+      </Show>
+      <div class="text-12-regular text-text-invert-base">{reasoning()}</div>
+      <div class="text-12-regular text-text-invert-base">{context()}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,108 @@
+import { describe, expect, test } from "bun:test"
+import { attachmentMime, pickAttachmentFiles } from "./files"
+import { pasteMode } from "./paste"
+
+describe("attachmentMime", () => {
+  test("keeps PDFs when the browser reports the mime", async () => {
+    const file = new File(["%PDF-1.7"], "guide.pdf", { type: "application/pdf" })
+    expect(await attachmentMime(file)).toBe("application/pdf")
+  })
+
+  test("normalizes structured text types to text/plain", async () => {
+    const file = new File(['{"ok":true}\n'], "data.json", { type: "application/json" })
+    expect(await attachmentMime(file)).toBe("text/plain")
+  })
+
+  test("accepts text files even with a misleading browser mime", async () => {
+    const file = new File(["export const x = 1\n"], "main.ts", { type: "video/mp2t" })
+    expect(await attachmentMime(file)).toBe("text/plain")
+  })
+
+  test("rejects binary files", async () => {
+    const file = new File([Uint8Array.of(0, 255, 1, 2)], "blob.bin", { type: "application/octet-stream" })
+    expect(await attachmentMime(file)).toBeUndefined()
+  })
+})
+
+describe("pickAttachmentFiles", () => {
+  test("reads the current project directory for every native picker invocation", async () => {
+    const paths: string[] = []
+    const files: File[] = []
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" })
+    let directory = "C:\\Projects\\LoremIpsum"
+    const picker = async (options?: { defaultPath?: string }, onFile?: (file: File) => Promise<unknown>) => {
+      paths.push(options?.defaultPath ?? "")
+      await onFile?.(file)
+    }
+
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    directory = "C:\\Projects\\DolorSit"
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    expect(files).toEqual([file, file])
+    expect(paths).toEqual(["C:\\Projects\\LoremIpsum", "C:\\Projects\\DolorSit"])
+  })
+
+  test("uses the browser file input when no native picker exists", async () => {
+    let fallback = 0
+    pickAttachmentFiles({
+      directory: () => "/projects/consectetur-adipiscing",
+      fallback: () => {
+        fallback += 1
+      },
+      onFile: async () => undefined,
+      onError: () => undefined,
+    })
+    expect(fallback).toBe(1)
+  })
+
+  test("reports native picker failures without rejecting", async () => {
+    const error = new Error("picker unavailable")
+    const errors: unknown[] = []
+    const handled = Promise.withResolvers<void>()
+    pickAttachmentFiles({
+      picker: async () => Promise.reject(error),
+      directory: () => "C:\\Projects\\LoremIpsum",
+      fallback: () => undefined,
+      onFile: async () => undefined,
+      onError: (cause) => {
+        errors.push(cause)
+        handled.resolve()
+      },
+    })
+    await handled.promise
+    expect(errors).toEqual([error])
+  })
+})
+
+describe("pasteMode", () => {
+  test("uses native paste for short single-line text", () => {
+    expect(pasteMode("hello world")).toBe("native")
+  })
+
+  test("uses manual paste for multiline text", () => {
+    expect(
+      pasteMode(`{
+  "ok": true
+}`),
+    ).toBe("manual")
+    expect(pasteMode("a\r\nb")).toBe("manual")
+  })
+
+  test("uses manual paste for large text", () => {
+    expect(pasteMode("x".repeat(8000))).toBe("manual")
+  })
+})

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

@@ -0,0 +1,196 @@
+import { onMount } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { showToast } from "@/utils/toast"
+import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
+import { useLanguage } from "@/context/language"
+import { uuid } from "@/utils/uuid"
+import { getCursorPosition } from "./editor-dom"
+import { attachmentMime } from "./files"
+import { normalizePaste, pasteMode } from "./paste"
+
+function dataUrl(file: File, mime: string) {
+  return new Promise<string>((resolve) => {
+    const reader = new FileReader()
+    reader.addEventListener("error", () => resolve(""))
+    reader.addEventListener("load", () => {
+      const value = typeof reader.result === "string" ? reader.result : ""
+      const idx = value.indexOf(",")
+      if (idx === -1) {
+        resolve(value)
+        return
+      }
+      resolve(`data:${mime};base64,${value.slice(idx + 1)}`)
+    })
+    reader.readAsDataURL(file)
+  })
+}
+
+type PromptAttachmentsInput = {
+  editor: () => HTMLDivElement | undefined
+  isDialogActive: () => boolean
+  setDraggingType: (type: "image" | "@mention" | null) => void
+  focusEditor: () => void
+  addPart: (part: ContentPart) => boolean
+  readClipboardImage?: () => Promise<File | null>
+}
+
+export function createPromptAttachments(input: PromptAttachmentsInput) {
+  const prompt = usePrompt()
+  const language = useLanguage()
+
+  const warn = () => {
+    showToast({
+      title: language.t("prompt.toast.pasteUnsupported.title"),
+      description: language.t("prompt.toast.pasteUnsupported.description"),
+    })
+  }
+
+  const add = async (file: File, toast = true) => {
+    const mime = await attachmentMime(file)
+    if (!mime) {
+      if (toast) warn()
+      return false
+    }
+
+    const editor = input.editor()
+    if (!editor) return false
+
+    const url = await dataUrl(file, mime)
+    if (!url) return false
+
+    const attachment: ImageAttachmentPart = {
+      type: "image",
+      id: uuid(),
+      filename: file.name,
+      mime,
+      dataUrl: url,
+    }
+    const cursor = prompt.cursor() ?? getCursorPosition(editor)
+    prompt.set([...prompt.current(), attachment], cursor)
+    return true
+  }
+
+  const addAttachment = (file: File) => add(file)
+
+  const addAttachments = async (files: File[], toast = true) => {
+    let found = false
+
+    for (const file of files) {
+      const ok = await add(file, false)
+      if (ok) found = true
+    }
+
+    if (!found && files.length > 0 && toast) warn()
+    return found
+  }
+
+  const removeAttachment = (id: string) => {
+    const current = prompt.current()
+    const next = current.filter((part) => part.type !== "image" || part.id !== id)
+    prompt.set(next, prompt.cursor())
+  }
+
+  const handlePaste = async (event: ClipboardEvent) => {
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const files = Array.from(clipboardData.items).flatMap((item) => {
+      if (item.kind !== "file") return []
+      const file = item.getAsFile()
+      return file ? [file] : []
+    })
+
+    if (files.length > 0) {
+      await addAttachments(files)
+      return
+    }
+
+    const plainText = clipboardData.getData("text/plain") ?? ""
+
+    // Desktop: Browser clipboard has no images and no text, try platform's native clipboard for images
+    if (input.readClipboardImage && !plainText) {
+      const file = await input.readClipboardImage()
+      if (file) {
+        await addAttachment(file)
+        return
+      }
+    }
+
+    if (!plainText) return
+
+    const text = normalizePaste(plainText)
+
+    const put = () => {
+      if (input.addPart({ type: "text", content: text, start: 0, end: 0 })) return true
+      input.focusEditor()
+      return input.addPart({ type: "text", content: text, start: 0, end: 0 })
+    }
+
+    if (pasteMode(text) === "manual") {
+      put()
+      return
+    }
+
+    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, text)
+    if (inserted) return
+
+    put()
+  }
+
+  const handleGlobalDragOver = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    const hasFiles = event.dataTransfer?.types.includes("Files")
+    const hasText = event.dataTransfer?.types.includes("text/plain")
+    if (hasFiles) {
+      input.setDraggingType("image")
+    } else if (hasText) {
+      input.setDraggingType("@mention")
+    }
+  }
+
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+    if (!event.relatedTarget) {
+      input.setDraggingType(null)
+    }
+  }
+
+  const handleGlobalDrop = async (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    input.setDraggingType(null)
+
+    const plainText = event.dataTransfer?.getData("text/plain")
+    const filePrefix = "file:"
+    if (plainText?.startsWith(filePrefix)) {
+      const filePath = plainText.slice(filePrefix.length)
+      input.focusEditor()
+      input.addPart({ type: "file", path: filePath, content: "@" + filePath, start: 0, end: 0 })
+      return
+    }
+
+    const dropped = event.dataTransfer?.files
+    if (!dropped) return
+
+    await addAttachments(Array.from(dropped))
+  }
+
+  onMount(() => {
+    makeEventListener(document, "dragover", handleGlobalDragOver)
+    makeEventListener(document, "dragleave", handleGlobalDragLeave)
+    makeEventListener(document, "drop", handleGlobalDrop)
+  })
+
+  return {
+    addAttachment,
+    addAttachments,
+    removeAttachment,
+    handlePaste,
+  }
+}

packages/app/src/components/prompt-input/build-request-parts.test.ts

@@ -0,0 +1,336 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import { buildRequestParts } from "./build-request-parts"
+
+describe("buildRequestParts", () => {
+  test("builds typed request and optimistic parts without cast path", () => {
+    const prompt: Prompt = [
+      { type: "text", content: "hello", start: 0, end: 5 },
+      {
+        type: "file",
+        path: "src/foo.ts",
+        content: "@src/foo.ts",
+        start: 5,
+        end: 16,
+        selection: { startLine: 4, startChar: 1, endLine: 6, endChar: 1 },
+      },
+      { type: "agent", name: "planner", content: "@planner", start: 16, end: 24 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [{ key: "ctx:1", type: "file", path: "src/bar.ts", comment: "check this" }],
+      images: [
+        { type: "image", id: "img_1", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
+      ],
+      text: "hello @src/foo.ts @planner",
+      messageID: "msg_1",
+      sessionID: "ses_1",
+      sessionDirectory: "/repo",
+    })
+
+    expect(result.requestParts[0]?.type).toBe("text")
+    expect(result.requestParts.some((part) => part.type === "agent")).toBe(true)
+    expect(
+      result.requestParts.some((part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts")),
+    ).toBe(true)
+    expect(result.requestParts.some((part) => part.type === "text" && part.synthetic)).toBe(true)
+    expect(
+      result.requestParts.some(
+        (part) =>
+          part.type === "text" &&
+          part.synthetic &&
+          part.metadata?.opencodeComment &&
+          (part.metadata.opencodeComment as { comment?: string }).comment === "check this",
+      ),
+    ).toBe(true)
+
+    expect(result.optimisticParts).toHaveLength(result.requestParts.length)
+    expect(result.optimisticParts.every((part) => part.sessionID === "ses_1" && part.messageID === "msg_1")).toBe(true)
+  })
+
+  test("keeps multiple uploaded attachments in order", () => {
+    const result = buildRequestParts({
+      prompt: [{ type: "text", content: "check these", start: 0, end: 11 }],
+      context: [],
+      images: [
+        { type: "image", id: "img_1", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
+        {
+          type: "image",
+          id: "img_2",
+          filename: "b.pdf",
+          mime: "application/pdf",
+          dataUrl: "data:application/pdf;base64,BBB",
+        },
+      ],
+      text: "check these",
+      messageID: "msg_multi",
+      sessionID: "ses_multi",
+      sessionDirectory: "/repo",
+    })
+
+    const files = result.requestParts.filter((part) => part.type === "file" && part.url.startsWith("data:"))
+
+    expect(files).toHaveLength(2)
+    expect(files.map((part) => (part.type === "file" ? part.filename : ""))).toEqual(["a.png", "b.pdf"])
+  })
+
+  test("deduplicates context files when prompt already includes same path", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/foo.ts", content: "@src/foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:dup", type: "file", path: "src/foo.ts" },
+        { key: "ctx:comment", type: "file", path: "src/foo.ts", comment: "focus here" },
+      ],
+      images: [],
+      text: "@src/foo.ts",
+      messageID: "msg_2",
+      sessionID: "ses_2",
+      sessionDirectory: "/repo",
+    })
+
+    const fooFiles = result.requestParts.filter(
+      (part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts"),
+    )
+    const synthetic = result.requestParts.filter((part) => part.type === "text" && part.synthetic)
+
+    expect(fooFiles).toHaveLength(2)
+    expect(synthetic).toHaveLength(1)
+  })
+
+  test("adds file parts for @mentions inside comment text", () => {
+    const result = buildRequestParts({
+      prompt: [{ type: "text", content: "look", start: 0, end: 4 }],
+      context: [
+        {
+          key: "ctx:comment-mention",
+          type: "file",
+          path: "src/review.ts",
+          comment: "Compare with @src/shared.ts and @src/review.ts.",
+        },
+      ],
+      images: [],
+      text: "look",
+      messageID: "msg_comment_mentions",
+      sessionID: "ses_comment_mentions",
+      sessionDirectory: "/repo",
+    })
+
+    const files = result.requestParts.filter((part) => part.type === "file")
+    expect(files).toHaveLength(2)
+    expect(files.some((part) => part.type === "file" && part.url === "file:///repo/src/review.ts")).toBe(true)
+    expect(files.some((part) => part.type === "file" && part.url === "file:///repo/src/shared.ts")).toBe(true)
+  })
+
+  test("handles Windows paths correctly (simulated on macOS)", () => {
+    const prompt: Prompt = [{ type: "file", path: "src\\foo.ts", content: "@src\\foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\foo.ts",
+      messageID: "msg_win_1",
+      sessionID: "ses_win_1",
+      sessionDirectory: "D:\\projects\\myapp", // Windows path
+    })
+
+    // Should create valid file URLs
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should not have encoded backslashes in wrong place
+      expect(filePart.url).not.toContain("%5C")
+      // Should have normalized to forward slashes
+      expect(filePart.url).toContain("/src/foo.ts")
+    }
+  })
+
+  test("handles Windows absolute path with special characters", () => {
+    const prompt: Prompt = [{ type: "file", path: "file#name.txt", content: "@file#name.txt", start: 0, end: 14 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@file#name.txt",
+      messageID: "msg_win_2",
+      sessionID: "ses_win_2",
+      sessionDirectory: "C:\\Users\\test\\Documents", // Windows path
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Special chars should be encoded
+      expect(filePart.url).toContain("file%23name.txt")
+      // Should have Windows drive letter properly encoded
+      expect(filePart.url).toMatch(/file:\/\/\/[A-Z]:/)
+    }
+  })
+
+  test("handles Linux absolute paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/app.ts", content: "@src/app.ts", start: 0, end: 10 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src/app.ts",
+      messageID: "msg_linux_1",
+      sessionID: "ses_linux_1",
+      sessionDirectory: "/home/user/project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///home/user/project/src/app.ts")
+    }
+  })
+
+  test("handles macOS paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "README.md", content: "@README.md", start: 0, end: 9 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@README.md",
+      messageID: "msg_mac_1",
+      sessionID: "ses_mac_1",
+      sessionDirectory: "/Users/kelvin/Projects/opencode",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///Users/kelvin/Projects/opencode/README.md")
+    }
+  })
+
+  test("handles context files with Windows paths", () => {
+    const prompt: Prompt = []
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:1", type: "file", path: "src\\utils\\helper.ts" },
+        { key: "ctx:2", type: "file", path: "test\\unit.test.ts", comment: "check tests" },
+      ],
+      images: [],
+      text: "test",
+      messageID: "msg_win_ctx",
+      sessionID: "ses_win_ctx",
+      sessionDirectory: "D:\\workspace\\app",
+    })
+
+    const fileParts = result.requestParts.filter((part) => part.type === "file")
+    expect(fileParts).toHaveLength(2)
+
+    // All file URLs should be valid
+    fileParts.forEach((part) => {
+      if (part.type === "file") {
+        expect(() => new URL(part.url)).not.toThrow()
+        expect(part.url).not.toContain("%5C") // No encoded backslashes
+      }
+    })
+  })
+
+  test("handles absolute Windows paths (user manually specifies full path)", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "D:\\other\\project\\file.ts", content: "@D:\\other\\project\\file.ts", start: 0, end: 25 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@D:\\other\\project\\file.ts",
+      messageID: "msg_abs",
+      sessionID: "ses_abs",
+      sessionDirectory: "C:\\current\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should handle absolute path that differs from sessionDirectory
+      expect(() => new URL(filePart.url)).not.toThrow()
+      expect(filePart.url).toContain("/D:/other/project/file.ts")
+    }
+  })
+
+  test("handles selection with query parameters on Windows", () => {
+    const prompt: Prompt = [
+      {
+        type: "file",
+        path: "src\\App.tsx",
+        content: "@src\\App.tsx",
+        start: 0,
+        end: 11,
+        selection: { startLine: 10, startChar: 0, endLine: 20, endChar: 5 },
+      },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\App.tsx",
+      messageID: "msg_sel",
+      sessionID: "ses_sel",
+      sessionDirectory: "C:\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should have query parameters
+      expect(filePart.url).toContain("?start=10&end=20")
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Query params should parse correctly
+      const url = new URL(filePart.url)
+      expect(url.searchParams.get("start")).toBe("10")
+      expect(url.searchParams.get("end")).toBe("20")
+    }
+  })
+
+  test("handles file paths with dots and special segments on Windows", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "..\\..\\shared\\util.ts", content: "@..\\..\\shared\\util.ts", start: 0, end: 21 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@..\\..\\shared\\util.ts",
+      messageID: "msg_dots",
+      sessionID: "ses_dots",
+      sessionDirectory: "C:\\projects\\myapp\\src",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should preserve .. segments (backend normalizes)
+      expect(filePart.url).toContain("/..")
+    }
+  })
+})

packages/app/src/components/prompt-input/build-request-parts.ts

@@ -0,0 +1,201 @@
+import { getFilename } from "@opencode-ai/core/util/path"
+import { type AgentPartInput, type FilePartInput, type Part, type TextPartInput } from "@opencode-ai/sdk/v2/client"
+import type { FileSelection } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
+import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
+import { Identifier } from "@/utils/id"
+import { createCommentMetadata, formatCommentNote } from "@/utils/comment-note"
+
+type PromptRequestPart = (TextPartInput | FilePartInput | AgentPartInput) & { id: string }
+
+type ContextFile = {
+  key: string
+  type: "file"
+  path: string
+  selection?: FileSelection
+  comment?: string
+  commentID?: string
+  commentOrigin?: "review" | "file"
+  preview?: string
+}
+
+type BuildRequestPartsInput = {
+  prompt: Prompt
+  context: ContextFile[]
+  images: ImageAttachmentPart[]
+  text: string
+  messageID: string
+  sessionID: string
+  sessionDirectory: string
+}
+
+const absolute = (directory: string, path: string) => {
+  if (path.startsWith("/")) return path
+  if (/^[A-Za-z]:[\\/]/.test(path) || /^[A-Za-z]:$/.test(path)) return path
+  if (path.startsWith("\\\\") || path.startsWith("//")) return path
+  return `${directory.replace(/[\\/]+$/, "")}/${path}`
+}
+
+const fileQuery = (selection: FileSelection | undefined) =>
+  selection ? `?start=${selection.startLine}&end=${selection.endLine}` : ""
+
+const mention = /(^|[\s([{"'])@(\S+)/g
+
+const parseCommentMentions = (comment: string) => {
+  return Array.from(comment.matchAll(mention)).flatMap((match) => {
+    const path = (match[2] ?? "").replace(/[.,!?;:)}\]"']+$/, "")
+    if (!path) return []
+    return [path]
+  })
+}
+
+const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
+const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"
+
+const toOptimisticPart = (part: PromptRequestPart, sessionID: string, messageID: string): Part => {
+  if (part.type === "text") {
+    return {
+      id: part.id,
+      type: "text",
+      text: part.text,
+      synthetic: part.synthetic,
+      ignored: part.ignored,
+      time: part.time,
+      metadata: part.metadata,
+      sessionID,
+      messageID,
+    }
+  }
+  if (part.type === "file") {
+    return {
+      id: part.id,
+      type: "file",
+      mime: part.mime,
+      filename: part.filename,
+      url: part.url,
+      source: part.source,
+      sessionID,
+      messageID,
+    }
+  }
+  return {
+    id: part.id,
+    type: "agent",
+    name: part.name,
+    source: part.source,
+    sessionID,
+    messageID,
+  }
+}
+
+export function buildRequestParts(input: BuildRequestPartsInput) {
+  const requestParts: PromptRequestPart[] = [
+    {
+      id: Identifier.ascending("part"),
+      type: "text",
+      text: input.text,
+    },
+  ]
+
+  const files = input.prompt.filter(isFileAttachment).map((attachment) => {
+    const path = absolute(input.sessionDirectory, attachment.path)
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url: `file://${encodeFilePath(path)}${fileQuery(attachment.selection)}`,
+      filename: getFilename(attachment.path),
+      source: {
+        type: "file",
+        text: {
+          value: attachment.content,
+          start: attachment.start,
+          end: attachment.end,
+        },
+        path,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const agents = input.prompt.filter(isAgentAttachment).map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "agent",
+      name: attachment.name,
+      source: {
+        value: attachment.content,
+        start: attachment.start,
+        end: attachment.end,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const used = new Set(files.map((part) => part.url))
+  const context = input.context.flatMap((item) => {
+    const path = absolute(input.sessionDirectory, item.path)
+    const url = `file://${encodeFilePath(path)}${fileQuery(item.selection)}`
+    const comment = item.comment?.trim()
+    if (!comment && used.has(url)) return []
+    used.add(url)
+
+    const filePart = {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url,
+      filename: getFilename(item.path),
+    } satisfies PromptRequestPart
+
+    if (!comment) return [filePart]
+
+    const mentions = parseCommentMentions(comment).flatMap((path) => {
+      const url = `file://${encodeFilePath(absolute(input.sessionDirectory, path))}`
+      if (used.has(url)) return []
+      used.add(url)
+      return [
+        {
+          id: Identifier.ascending("part"),
+          type: "file",
+          mime: "text/plain",
+          url,
+          filename: getFilename(path),
+        } satisfies PromptRequestPart,
+      ]
+    })
+
+    return [
+      {
+        id: Identifier.ascending("part"),
+        type: "text",
+        text: formatCommentNote({ path: item.path, selection: item.selection, comment }),
+        synthetic: true,
+        metadata: createCommentMetadata({
+          path: item.path,
+          selection: item.selection,
+          comment,
+          preview: item.preview,
+          origin: item.commentOrigin,
+        }),
+      } satisfies PromptRequestPart,
+      filePart,
+      ...mentions,
+    ]
+  })
+
+  const images = input.images.map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: attachment.mime,
+      url: attachment.dataUrl,
+      filename: attachment.filename,
+    } satisfies PromptRequestPart
+  })
+
+  requestParts.push(...files, ...context, ...agents, ...images)
+
+  return {
+    requestParts,
+    optimisticParts: requestParts.map((part) => toOptimisticPart(part, input.sessionID, input.messageID)),
+  }
+}

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

@@ -0,0 +1,88 @@
+import { Component, For, Show } from "solid-js"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/core/util/path"
+import type { ContextItem } from "@/context/prompt"
+
+type PromptContextItem = ContextItem & { key: string }
+
+type ContextItemsProps = {
+  items: PromptContextItem[]
+  active: (item: PromptContextItem) => boolean
+  openComment: (item: PromptContextItem) => void
+  remove: (item: PromptContextItem) => void
+  t: (key: string) => string
+}
+
+export const PromptContextItems: Component<ContextItemsProps> = (props) => {
+  return (
+    <Show when={props.items.length > 0}>
+      <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
+        <For each={props.items}>
+          {(item) => {
+            const directory = getDirectory(item.path)
+            const filename = getFilename(item.path)
+            const label = getFilenameTruncated(item.path, 14)
+            const selected = props.active(item)
+
+            return (
+              <Tooltip
+                value={
+                  <span class="flex max-w-[300px]">
+                    <span class="text-text-invert-base truncate-start [unicode-bidi:plaintext] min-w-0">
+                      {directory}
+                    </span>
+                    <span class="shrink-0">{filename}</span>
+                  </span>
+                }
+                placement="top"
+                openDelay={2000}
+              >
+                <div
+                  classList={{
+                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                    "hover:bg-surface-interactive-weak": !!item.commentID && !selected,
+                    "bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
+                    "bg-background-stronger": !selected,
+                  }}
+                  onClick={() => props.openComment(item)}
+                >
+                  <div class="flex items-center gap-1.5">
+                    <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                    <div class="flex items-center text-11-regular min-w-0 font-medium">
+                      <span class="text-text-strong whitespace-nowrap">{label}</span>
+                      <Show when={item.selection}>
+                        {(sel) => (
+                          <span class="text-text-weak whitespace-nowrap shrink-0">
+                            {sel().startLine === sel().endLine
+                              ? `:${sel().startLine}`
+                              : `:${sel().startLine}-${sel().endLine}`}
+                          </span>
+                        )}
+                      </Show>
+                    </div>
+                    <IconButton
+                      type="button"
+                      icon="close-small"
+                      variant="ghost"
+                      class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        props.remove(item)
+                      }}
+                      aria-label={props.t("prompt.context.removeFile")}
+                    />
+                  </div>
+                  <Show when={item.comment}>
+                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                  </Show>
+                </div>
+              </Tooltip>
+            )
+          }}
+        </For>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { Component, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+
+type PromptDragOverlayProps = {
+  type: "image" | "@mention" | null
+  label: string
+}
+
+const kindToIcon = {
+  image: "photo",
+  "@mention": "link",
+} as const
+
+export const PromptDragOverlay: Component<PromptDragOverlayProps> = (props) => {
+  return (
+    <Show when={props.type !== null}>
+      <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 pointer-events-none">
+        <div class="flex flex-col items-center gap-2 text-text-weak">
+          <Icon name={props.type ? kindToIcon[props.type] : kindToIcon.image} class="size-8" />
+          <span class="text-14-regular">{props.label}</span>
+        </div>
+      </div>
+    </Show>
+  )
+}

packages/app/src/components/prompt-input/editor-dom.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test"
+import { createTextFragment, getCursorPosition, getNodeLength, getTextLength, setCursorPosition } from "./editor-dom"
+
+describe("prompt-input editor dom", () => {
+  test("createTextFragment preserves newlines with consecutive br nodes", () => {
+    const fragment = createTextFragment("foo\n\nbar")
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(4)
+    expect(container.childNodes[0]?.textContent).toBe("foo")
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+    expect((container.childNodes[2] as HTMLElement).tagName).toBe("BR")
+    expect(container.childNodes[3]?.textContent).toBe("bar")
+  })
+
+  test("createTextFragment keeps trailing newline as terminal break", () => {
+    const fragment = createTextFragment("foo\n")
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(2)
+    expect(container.childNodes[0]?.textContent).toBe("foo")
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+  })
+
+  test("createTextFragment avoids break-node explosion for large multiline content", () => {
+    const content = Array.from({ length: 220 }, () => "line").join("\n")
+    const fragment = createTextFragment(content)
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(1)
+    expect(container.childNodes[0]?.nodeType).toBe(Node.TEXT_NODE)
+    expect(container.textContent).toBe(content)
+  })
+
+  test("createTextFragment keeps terminal break in large multiline fallback", () => {
+    const content = `${Array.from({ length: 220 }, () => "line").join("\n")}\n`
+    const fragment = createTextFragment(content)
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(2)
+    expect(container.childNodes[0]?.textContent).toBe(content.slice(0, -1))
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+  })
+
+  test("length helpers treat breaks as one char and ignore zero-width chars", () => {
+    const container = document.createElement("div")
+    container.appendChild(document.createTextNode("ab\u200B"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+
+    expect(getNodeLength(container.childNodes[0]!)).toBe(2)
+    expect(getNodeLength(container.childNodes[1]!)).toBe(1)
+    expect(getTextLength(container)).toBe(5)
+  })
+
+  test("setCursorPosition and getCursorPosition round-trip with pills and breaks", () => {
+    const container = document.createElement("div")
+    const pill = document.createElement("span")
+    pill.dataset.type = "file"
+    pill.textContent = "@file"
+    container.appendChild(document.createTextNode("ab"))
+    container.appendChild(pill)
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+    document.body.appendChild(container)
+
+    setCursorPosition(container, 2)
+    expect(getCursorPosition(container)).toBe(2)
+
+    setCursorPosition(container, 7)
+    expect(getCursorPosition(container)).toBe(7)
+
+    setCursorPosition(container, 8)
+    expect(getCursorPosition(container)).toBe(8)
+
+    container.remove()
+  })
+
+  test("setCursorPosition and getCursorPosition round-trip across blank lines", () => {
+    const container = document.createElement("div")
+    container.appendChild(document.createTextNode("a"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("b"))
+    document.body.appendChild(container)
+
+    setCursorPosition(container, 2)
+    expect(getCursorPosition(container)).toBe(2)
+
+    setCursorPosition(container, 3)
+    expect(getCursorPosition(container)).toBe(3)
+
+    container.remove()
+  })
+})

packages/app/src/components/prompt-input/editor-dom.ts

@@ -0,0 +1,148 @@
+const MAX_BREAKS = 200
+
+export function createTextFragment(content: string): DocumentFragment {
+  const fragment = document.createDocumentFragment()
+  let breaks = 0
+  for (const char of content) {
+    if (char !== "\n") continue
+    breaks += 1
+    if (breaks > MAX_BREAKS) {
+      const tail = content.endsWith("\n")
+      const text = tail ? content.slice(0, -1) : content
+      if (text) fragment.appendChild(document.createTextNode(text))
+      if (tail) fragment.appendChild(document.createElement("br"))
+      return fragment
+    }
+  }
+
+  const segments = content.split("\n")
+  segments.forEach((segment, index) => {
+    if (segment) {
+      fragment.appendChild(document.createTextNode(segment))
+    }
+    if (index < segments.length - 1) {
+      fragment.appendChild(document.createElement("br"))
+    }
+  })
+  return fragment
+}
+
+export function getNodeLength(node: Node): number {
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  return (node.textContent ?? "").replace(/\u200B/g, "").length
+}
+
+export function getTextLength(node: Node): number {
+  if (node.nodeType === Node.TEXT_NODE) return (node.textContent ?? "").replace(/\u200B/g, "").length
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  let length = 0
+  for (const child of Array.from(node.childNodes)) {
+    length += getTextLength(child)
+  }
+  return length
+}
+
+export function getCursorPosition(parent: HTMLElement): number {
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return 0
+  const range = selection.getRangeAt(0)
+  if (!parent.contains(range.startContainer)) return 0
+  const preCaretRange = range.cloneRange()
+  preCaretRange.selectNodeContents(parent)
+  preCaretRange.setEnd(range.startContainer, range.startOffset)
+  return getTextLength(preCaretRange.cloneContents())
+}
+
+export function setCursorPosition(parent: HTMLElement, position: number) {
+  let remaining = position
+  let node = parent.firstChild
+  while (node) {
+    const length = getNodeLength(node)
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+    if (isText && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      range.setStart(node, remaining)
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+      return
+    }
+
+    if ((isPill || isBreak) && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      if (remaining === 0) {
+        range.setStartBefore(node)
+      }
+      if (remaining > 0 && isPill) {
+        range.setStartAfter(node)
+      }
+      if (remaining > 0 && isBreak) {
+        const next = node.nextSibling
+        if (next && next.nodeType === Node.TEXT_NODE) {
+          range.setStart(next, 0)
+        }
+        if (!next || next.nodeType !== Node.TEXT_NODE) {
+          range.setStartAfter(node)
+        }
+      }
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+      return
+    }
+
+    remaining -= length
+    node = node.nextSibling
+  }
+
+  const fallbackRange = document.createRange()
+  const fallbackSelection = window.getSelection()
+  const last = parent.lastChild
+  if (last && last.nodeType === Node.TEXT_NODE) {
+    const len = last.textContent ? last.textContent.length : 0
+    fallbackRange.setStart(last, len)
+  }
+  if (!last || last.nodeType !== Node.TEXT_NODE) {
+    fallbackRange.selectNodeContents(parent)
+  }
+  fallbackRange.collapse(false)
+  fallbackSelection?.removeAllRanges()
+  fallbackSelection?.addRange(fallbackRange)
+}
+
+export function setRangeEdge(parent: HTMLElement, range: Range, edge: "start" | "end", offset: number) {
+  let remaining = offset
+  const nodes = Array.from(parent.childNodes)
+
+  for (const node of nodes) {
+    const length = getNodeLength(node)
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+    if (isText && remaining <= length) {
+      if (edge === "start") range.setStart(node, remaining)
+      if (edge === "end") range.setEnd(node, remaining)
+      return
+    }
+
+    if ((isPill || isBreak) && remaining <= length) {
+      if (edge === "start" && remaining === 0) range.setStartBefore(node)
+      if (edge === "start" && remaining > 0) range.setStartAfter(node)
+      if (edge === "end" && remaining === 0) range.setEndBefore(node)
+      if (edge === "end" && remaining > 0) range.setEndAfter(node)
+      return
+    }
+
+    remaining -= length
+  }
+}

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

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

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

@@ -0,0 +1,153 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import {
+  canNavigateHistoryAtCursor,
+  clonePromptParts,
+  normalizePromptHistoryEntry,
+  navigatePromptHistory,
+  prependHistoryEntry,
+  promptLength,
+  type PromptHistoryComment,
+} from "./history"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+const text = (value: string): Prompt => [{ type: "text", content: value, start: 0, end: value.length }]
+const comment = (id: string, value = "note"): PromptHistoryComment => ({
+  id,
+  path: "src/a.ts",
+  selection: { start: 2, end: 4 },
+  comment: value,
+  time: 1,
+  origin: "review",
+  preview: "const a = 1",
+})
+
+describe("prompt-input history", () => {
+  test("prependHistoryEntry skips empty prompt and deduplicates consecutive entries", () => {
+    const first = prependHistoryEntry([], DEFAULT_PROMPT)
+    expect(first).toEqual([])
+
+    const commentsOnly = prependHistoryEntry([], DEFAULT_PROMPT, [comment("c1")])
+    expect(commentsOnly).toHaveLength(1)
+
+    const withOne = prependHistoryEntry([], text("hello"))
+    expect(withOne).toHaveLength(1)
+
+    const deduped = prependHistoryEntry(withOne, text("hello"))
+    expect(deduped).toBe(withOne)
+
+    const dedupedComments = prependHistoryEntry(commentsOnly, DEFAULT_PROMPT, [comment("c1")])
+    expect(dedupedComments).toBe(commentsOnly)
+  })
+
+  test("navigatePromptHistory restores saved prompt when moving down from newest", () => {
+    const entries = [text("third"), text("second"), text("first")]
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      currentComments: [comment("draft")],
+      savedPrompt: null,
+    })
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.historyIndex).toBe(0)
+    expect(up.cursor).toBe("start")
+    expect(up.entry.comments).toEqual([])
+
+    const down = navigatePromptHistory({
+      direction: "down",
+      entries,
+      historyIndex: up.historyIndex,
+      currentPrompt: text("ignored"),
+      currentComments: [],
+      savedPrompt: up.savedPrompt,
+    })
+    expect(down.handled).toBe(true)
+    if (!down.handled) throw new Error("expected handled")
+    expect(down.historyIndex).toBe(-1)
+    expect(down.entry.prompt[0]?.type === "text" ? down.entry.prompt[0].content : "").toBe("draft")
+    expect(down.entry.comments).toEqual([comment("draft")])
+  })
+
+  test("navigatePromptHistory keeps entry comments when moving through history", () => {
+    const entries = [
+      {
+        prompt: text("with comment"),
+        comments: [comment("c1")],
+      },
+    ]
+
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      currentComments: [],
+      savedPrompt: null,
+    })
+
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.entry.prompt[0]?.type === "text" ? up.entry.prompt[0].content : "").toBe("with comment")
+    expect(up.entry.comments).toEqual([comment("c1")])
+  })
+
+  test("normalizePromptHistoryEntry supports legacy prompt arrays", () => {
+    const entry = normalizePromptHistoryEntry(text("legacy"))
+    expect(entry.prompt[0]?.type === "text" ? entry.prompt[0].content : "").toBe("legacy")
+    expect(entry.comments).toEqual([])
+  })
+
+  test("helpers clone prompt and count text content length", () => {
+    const original: Prompt = [
+      { type: "text", content: "one", start: 0, end: 3 },
+      {
+        type: "file",
+        path: "src/a.ts",
+        content: "@src/a.ts",
+        start: 3,
+        end: 12,
+        selection: { startLine: 1, startChar: 1, endLine: 2, endChar: 1 },
+      },
+      { type: "image", id: "1", filename: "img.png", mime: "image/png", dataUrl: "data:image/png;base64,abc" },
+    ]
+    const copy = clonePromptParts(original)
+    expect(copy).not.toBe(original)
+    expect(promptLength(copy)).toBe(12)
+    if (copy[1]?.type !== "file") throw new Error("expected file")
+    copy[1].selection!.startLine = 9
+    if (original[1]?.type !== "file") throw new Error("expected file")
+    expect(original[1].selection?.startLine).toBe(1)
+  })
+
+  test("canNavigateHistoryAtCursor only allows prompt boundaries", () => {
+    const value = "a\nb\nc"
+
+    expect(canNavigateHistoryAtCursor("up", value, 0)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 0)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", value, 2)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 2)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", value, 5)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 5)).toBe(true)
+
+    expect(canNavigateHistoryAtCursor("up", "abc", 0)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 3)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 1)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 1)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", "", 0)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "", 0)).toBe(true)
+
+    expect(canNavigateHistoryAtCursor("up", "abc", 0, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 3, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "abc", 0, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "abc", 3, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 1, true)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 1, true)).toBe(false)
+  })
+})

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

@@ -0,0 +1,256 @@
+import type { Prompt } from "@/context/prompt"
+import type { SelectedLineRange } from "@/context/file"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+export const MAX_HISTORY = 100
+
+export type PromptHistoryComment = {
+  id: string
+  path: string
+  selection: SelectedLineRange
+  comment: string
+  time: number
+  origin?: "review" | "file"
+  preview?: string
+}
+
+export type PromptHistoryEntry = {
+  prompt: Prompt
+  comments: PromptHistoryComment[]
+}
+
+export type PromptHistoryStoredEntry = Prompt | PromptHistoryEntry
+
+export function canNavigateHistoryAtCursor(direction: "up" | "down", text: string, cursor: number, inHistory = false) {
+  const position = Math.max(0, Math.min(cursor, text.length))
+  const atStart = position === 0
+  const atEnd = position === text.length
+  if (inHistory) return atStart || atEnd
+  if (direction === "up") return position === 0 && text.length === 0
+  return position === text.length
+}
+
+export function clonePromptParts(prompt: Prompt): Prompt {
+  return prompt.map((part) => {
+    if (part.type === "text") return { ...part }
+    if (part.type === "image") return { ...part }
+    if (part.type === "agent") return { ...part }
+    return {
+      ...part,
+      selection: part.selection ? { ...part.selection } : undefined,
+    }
+  })
+}
+
+function cloneSelection(selection: SelectedLineRange): SelectedLineRange {
+  return {
+    start: selection.start,
+    end: selection.end,
+    ...(selection.side ? { side: selection.side } : {}),
+    ...(selection.endSide ? { endSide: selection.endSide } : {}),
+  }
+}
+
+export function clonePromptHistoryComments(comments: PromptHistoryComment[]) {
+  return comments.map((comment) => ({
+    ...comment,
+    selection: cloneSelection(comment.selection),
+  }))
+}
+
+export function normalizePromptHistoryEntry(entry: PromptHistoryStoredEntry): PromptHistoryEntry {
+  if (Array.isArray(entry)) {
+    return {
+      prompt: clonePromptParts(entry),
+      comments: [],
+    }
+  }
+  return {
+    prompt: clonePromptParts(entry.prompt),
+    comments: clonePromptHistoryComments(entry.comments),
+  }
+}
+
+export function promptLength(prompt: Prompt) {
+  return prompt.reduce((len, part) => len + ("content" in part ? part.content.length : 0), 0)
+}
+
+export function prependHistoryEntry(
+  entries: PromptHistoryStoredEntry[],
+  prompt: Prompt,
+  comments: PromptHistoryComment[] = [],
+  max = MAX_HISTORY,
+) {
+  const text = prompt
+    .map((part) => ("content" in part ? part.content : ""))
+    .join("")
+    .trim()
+  const hasImages = prompt.some((part) => part.type === "image")
+  const hasComments = comments.some((comment) => !!comment.comment.trim())
+  if (!text && !hasImages && !hasComments) return entries
+
+  const entry = {
+    prompt: clonePromptParts(prompt),
+    comments: clonePromptHistoryComments(comments),
+  } satisfies PromptHistoryEntry
+  const last = entries[0]
+  if (last && isPromptEqual(last, entry)) return entries
+  return [entry, ...entries].slice(0, max)
+}
+
+function isCommentEqual(commentA: PromptHistoryComment, commentB: PromptHistoryComment) {
+  return (
+    commentA.path === commentB.path &&
+    commentA.comment === commentB.comment &&
+    commentA.origin === commentB.origin &&
+    commentA.preview === commentB.preview &&
+    commentA.selection.start === commentB.selection.start &&
+    commentA.selection.end === commentB.selection.end &&
+    commentA.selection.side === commentB.selection.side &&
+    commentA.selection.endSide === commentB.selection.endSide
+  )
+}
+
+function isPromptEqual(promptA: PromptHistoryStoredEntry, promptB: PromptHistoryStoredEntry) {
+  const entryA = normalizePromptHistoryEntry(promptA)
+  const entryB = normalizePromptHistoryEntry(promptB)
+  if (entryA.prompt.length !== entryB.prompt.length) return false
+  for (let i = 0; i < entryA.prompt.length; i++) {
+    const partA = entryA.prompt[i]
+    const partB = entryB.prompt[i]
+    if (partA.type !== partB.type) return false
+    if (partA.type === "text" && partA.content !== (partB.type === "text" ? partB.content : "")) return false
+    if (partA.type === "file") {
+      if (partA.path !== (partB.type === "file" ? partB.path : "")) return false
+      const a = partA.selection
+      const b = partB.type === "file" ? partB.selection : undefined
+      const sameSelection =
+        (!a && !b) ||
+        (!!a &&
+          !!b &&
+          a.startLine === b.startLine &&
+          a.startChar === b.startChar &&
+          a.endLine === b.endLine &&
+          a.endChar === b.endChar)
+      if (!sameSelection) return false
+    }
+    if (partA.type === "agent" && partA.name !== (partB.type === "agent" ? partB.name : "")) return false
+    if (partA.type === "image" && partA.id !== (partB.type === "image" ? partB.id : "")) return false
+  }
+  if (entryA.comments.length !== entryB.comments.length) return false
+  for (let i = 0; i < entryA.comments.length; i++) {
+    const commentA = entryA.comments[i]
+    const commentB = entryB.comments[i]
+    if (!commentA || !commentB || !isCommentEqual(commentA, commentB)) return false
+  }
+  return true
+}
+
+type HistoryNavInput = {
+  direction: "up" | "down"
+  entries: PromptHistoryStoredEntry[]
+  historyIndex: number
+  currentPrompt: Prompt
+  currentComments: PromptHistoryComment[]
+  savedPrompt: PromptHistoryEntry | null
+}
+
+type HistoryNavResult =
+  | {
+      handled: false
+      historyIndex: number
+      savedPrompt: PromptHistoryEntry | null
+    }
+  | {
+      handled: true
+      historyIndex: number
+      savedPrompt: PromptHistoryEntry | null
+      entry: PromptHistoryEntry
+      cursor: "start" | "end"
+    }
+
+export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult {
+  if (input.direction === "up") {
+    if (input.entries.length === 0) {
+      return {
+        handled: false,
+        historyIndex: input.historyIndex,
+        savedPrompt: input.savedPrompt,
+      }
+    }
+
+    if (input.historyIndex === -1) {
+      const entry = normalizePromptHistoryEntry(input.entries[0])
+      return {
+        handled: true,
+        historyIndex: 0,
+        savedPrompt: {
+          prompt: clonePromptParts(input.currentPrompt),
+          comments: clonePromptHistoryComments(input.currentComments),
+        },
+        entry,
+        cursor: "start",
+      }
+    }
+
+    if (input.historyIndex < input.entries.length - 1) {
+      const next = input.historyIndex + 1
+      const entry = normalizePromptHistoryEntry(input.entries[next])
+      return {
+        handled: true,
+        historyIndex: next,
+        savedPrompt: input.savedPrompt,
+        entry,
+        cursor: "start",
+      }
+    }
+
+    return {
+      handled: false,
+      historyIndex: input.historyIndex,
+      savedPrompt: input.savedPrompt,
+    }
+  }
+
+  if (input.historyIndex > 0) {
+    const next = input.historyIndex - 1
+    const entry = normalizePromptHistoryEntry(input.entries[next])
+    return {
+      handled: true,
+      historyIndex: next,
+      savedPrompt: input.savedPrompt,
+      entry,
+      cursor: "end",
+    }
+  }
+
+  if (input.historyIndex === 0) {
+    if (input.savedPrompt) {
+      return {
+        handled: true,
+        historyIndex: -1,
+        savedPrompt: null,
+        entry: input.savedPrompt,
+        cursor: "end",
+      }
+    }
+
+    return {
+      handled: true,
+      historyIndex: -1,
+      savedPrompt: null,
+      entry: {
+        prompt: DEFAULT_PROMPT,
+        comments: [],
+      },
+      cursor: "end",
+    }
+  }
+
+  return {
+    handled: false,
+    historyIndex: input.historyIndex,
+    savedPrompt: input.savedPrompt,
+  }
+}

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

@@ -0,0 +1,61 @@
+import { Component, For, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import type { ImageAttachmentPart } from "@/context/prompt"
+
+type PromptImageAttachmentsProps = {
+  attachments: ImageAttachmentPart[]
+  onOpen: (attachment: ImageAttachmentPart) => void
+  onRemove: (id: string) => void
+  removeLabel: string
+}
+
+const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
+const imageClass =
+  "size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
+const removeClass =
+  "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
+const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
+
+export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
+  return (
+    <Show when={props.attachments.length > 0}>
+      <div class="flex flex-wrap gap-2 px-3 pt-3">
+        <For each={props.attachments}>
+          {(attachment) => (
+            <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
+              <div class="relative group">
+                <Show
+                  when={attachment.mime.startsWith("image/")}
+                  fallback={
+                    <div class={fallbackClass}>
+                      <Icon name="folder" class="size-6 text-text-weak" />
+                    </div>
+                  }
+                >
+                  <img
+                    src={attachment.dataUrl}
+                    alt={attachment.filename}
+                    class={imageClass}
+                    onClick={() => props.onOpen(attachment)}
+                  />
+                </Show>
+                <button
+                  type="button"
+                  onClick={() => props.onRemove(attachment.id)}
+                  class={removeClass}
+                  aria-label={props.removeLabel}
+                >
+                  <Icon name="close" class="size-3 text-text-weak" />
+                </button>
+                <div class={nameClass}>
+                  <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+                </div>
+              </div>
+            </Tooltip>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}

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

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

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

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test"
+import { promptPlaceholder } from "./placeholder"
+
+describe("promptPlaceholder", () => {
+  const t = (key: string, params?: Record<string, string>) => `${key}${params?.example ? `:${params.example}` : ""}`
+
+  test("returns shell placeholder in shell mode", () => {
+    const value = promptPlaceholder({
+      mode: "shell",
+      commentCount: 0,
+      example: "example",
+      suggest: true,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.shell:example")
+  })
+
+  test("returns summarize placeholders for comment context", () => {
+    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", suggest: true, t })).toBe(
+      "prompt.placeholder.summarizeComment",
+    )
+    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", suggest: true, t })).toBe(
+      "prompt.placeholder.summarizeComments",
+    )
+  })
+
+  test("returns default placeholder with example when suggestions enabled", () => {
+    const value = promptPlaceholder({
+      mode: "normal",
+      commentCount: 0,
+      example: "translated-example",
+      suggest: true,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.normal:translated-example")
+  })
+
+  test("returns simple placeholder when suggestions disabled", () => {
+    const value = promptPlaceholder({
+      mode: "normal",
+      commentCount: 0,
+      example: "translated-example",
+      suggest: false,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.simple")
+  })
+})

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

@@ -0,0 +1,15 @@
+type PromptPlaceholderInput = {
+  mode: "normal" | "shell"
+  commentCount: number
+  example: string
+  suggest: boolean
+  t: (key: string, params?: Record<string, string>) => string
+}
+
+export function promptPlaceholder(input: PromptPlaceholderInput) {
+  if (input.mode === "shell") return input.t("prompt.placeholder.shell", { example: input.example })
+  if (input.commentCount > 1) return input.t("prompt.placeholder.summarizeComments")
+  if (input.commentCount === 1) return input.t("prompt.placeholder.summarizeComment")
+  if (!input.suggest) return input.t("prompt.placeholder.simple")
+  return input.t("prompt.placeholder.normal", { example: input.example })
+}

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

@@ -0,0 +1,141 @@
+import { Component, For, Match, Show, Switch } from "solid-js"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+
+export type AtOption =
+  | { type: "agent"; name: string; display: string }
+  | { type: "file"; path: string; display: string; recent?: boolean }
+
+export interface SlashCommand {
+  id: string
+  trigger: string
+  title: string
+  description?: string
+  keybind?: string
+  type: "builtin" | "custom"
+  source?: "command" | "mcp" | "skill"
+}
+
+type PromptPopoverProps = {
+  popover: "at" | "slash" | null
+  setSlashPopoverRef: (el: HTMLDivElement) => void
+  atFlat: AtOption[]
+  atActive?: string
+  atKey: (item: AtOption) => string
+  setAtActive: (id: string) => void
+  onAtSelect: (item: AtOption) => void
+  slashFlat: SlashCommand[]
+  slashActive?: string
+  setSlashActive: (id: string) => void
+  onSlashSelect: (item: SlashCommand) => void
+  commandKeybind: (id: string) => string | undefined
+  t: (key: string) => string
+}
+
+export const PromptPopover: Component<PromptPopoverProps> = (props) => {
+  return (
+    <Show when={props.popover}>
+      <div
+        ref={(el) => {
+          if (props.popover === "slash") props.setSlashPopoverRef(el)
+        }}
+        class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
+                 overflow-auto no-scrollbar flex flex-col p-2 rounded-[12px]
+                 bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]"
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <Switch>
+          <Match when={props.popover === "at"}>
+            <Show
+              when={props.atFlat.length > 0}
+              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyResults")}</div>}
+            >
+              <For each={props.atFlat.slice(0, 10)}>
+                {(item) => {
+                  const key = props.atKey(item)
+
+                  if (item.type === "agent") {
+                    return (
+                      <button
+                        class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
+                        classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
+                        onClick={() => props.onAtSelect(item)}
+                        onMouseEnter={() => props.setAtActive(key)}
+                      >
+                        <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
+                        <span class="text-14-regular text-text-strong whitespace-nowrap">@{item.name}</span>
+                      </button>
+                    )
+                  }
+
+                  const isDirectory = item.path.endsWith("/")
+                  const directory = isDirectory ? item.path : getDirectory(item.path)
+                  const filename = isDirectory ? "" : getFilename(item.path)
+
+                  return (
+                    <button
+                      class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
+                      classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
+                      onClick={() => props.onAtSelect(item)}
+                      onMouseEnter={() => props.setAtActive(key)}
+                    >
+                      <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
+                      <div class="flex items-center text-14-regular min-w-0">
+                        <span class="text-text-weak whitespace-nowrap truncate min-w-0">{directory}</span>
+                        <Show when={!isDirectory}>
+                          <span class="text-text-strong whitespace-nowrap">{filename}</span>
+                        </Show>
+                      </div>
+                    </button>
+                  )
+                }}
+              </For>
+            </Show>
+          </Match>
+          <Match when={props.popover === "slash"}>
+            <Show
+              when={props.slashFlat.length > 0}
+              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyCommands")}</div>}
+            >
+              <For each={props.slashFlat}>
+                {(cmd) => (
+                  <button
+                    data-slash-id={cmd.id}
+                    classList={{
+                      "w-full flex items-center justify-between gap-4 rounded-md px-2 py-1": true,
+                      "bg-surface-raised-base-hover": props.slashActive === cmd.id,
+                    }}
+                    onClick={() => props.onSlashSelect(cmd)}
+                    onMouseEnter={() => props.setSlashActive(cmd.id)}
+                  >
+                    <div class="flex items-center gap-2 min-w-0">
+                      <span class="text-14-regular text-text-strong whitespace-nowrap">/{cmd.trigger}</span>
+                      <Show when={cmd.description}>
+                        <span class="text-14-regular text-text-weak truncate">{cmd.description}</span>
+                      </Show>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                      <Show when={cmd.type === "custom" && cmd.source !== "command"}>
+                        <span class="text-11-regular text-text-subtle px-1.5 py-0.5 bg-surface-base rounded">
+                          {cmd.source === "skill"
+                            ? props.t("prompt.slash.badge.skill")
+                            : cmd.source === "mcp"
+                              ? props.t("prompt.slash.badge.mcp")
+                              : props.t("prompt.slash.badge.custom")}
+                        </span>
+                      </Show>
+                      <Show when={props.commandKeybind(cmd.id)}>
+                        <span class="text-12-regular text-text-subtle">{props.commandKeybind(cmd.id)}</span>
+                      </Show>
+                    </div>
+                  </button>
+                )}
+              </For>
+            </Show>
+          </Match>
+        </Switch>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,358 @@
+import { beforeAll, beforeEach, describe, expect, mock, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+
+let createPromptSubmit: typeof import("./submit").createPromptSubmit
+
+const createdClients: string[] = []
+const createdSessions: string[] = []
+const enabledAutoAccept: Array<{ sessionID: string; directory: string }> = []
+const optimistic: Array<{
+  directory?: string
+  sessionID?: string
+  message: {
+    agent: string
+    model: { providerID: string; modelID: string }
+    variant?: string
+  }
+}> = []
+const optimisticSeeded: boolean[] = []
+const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
+const promoted: Array<{ directory: string; sessionID: string }> = []
+const sentShell: string[] = []
+const syncedDirectories: string[] = []
+
+let params: { id?: string } = {}
+let selected = "/repo/worktree-a"
+let variant: string | undefined
+
+const promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
+
+const clientFor = (directory: string) => {
+  createdClients.push(directory)
+  return {
+    session: {
+      create: async () => {
+        createdSessions.push(directory)
+        return {
+          data: {
+            id: `session-${createdSessions.length}`,
+            title: `New session ${createdSessions.length}`,
+          },
+        }
+      },
+      shell: async () => {
+        sentShell.push(directory)
+        return { data: undefined }
+      },
+      prompt: async () => ({ data: undefined }),
+      promptAsync: async () => ({ data: undefined }),
+      command: async () => ({ data: undefined }),
+      abort: async () => ({ data: undefined }),
+    },
+    worktree: {
+      create: async () => ({ data: { directory: `${directory}/new` } }),
+    },
+  }
+}
+
+beforeAll(async () => {
+  const rootClient = clientFor("/repo/main")
+
+  mock.module("@solidjs/router", () => ({
+    useNavigate: () => () => undefined,
+    useParams: () => params,
+    useLocation: () => ({}),
+    useSearchParams: () => [{}, () => undefined],
+  }))
+
+  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", () => ({
+    showToast: () => 0,
+  }))
+
+  mock.module("@opencode-ai/core/util/encode", () => ({
+    base64Encode: (value: string) => value,
+  }))
+
+  mock.module("@/context/local", () => ({
+    useLocal: () => ({
+      model: {
+        current: () => ({ id: "model", provider: { id: "provider" } }),
+        variant: { current: () => variant },
+      },
+      agent: {
+        current: () => ({ name: "agent" }),
+      },
+      session: {
+        promote(directory: string, sessionID: string) {
+          promoted.push({ directory, sessionID })
+        },
+      },
+    }),
+  }))
+
+  mock.module("@/context/permission", () => ({
+    usePermission: () => ({
+      enableAutoAccept(sessionID: string, directory: string) {
+        enabledAutoAccept.push({ sessionID, directory })
+      },
+    }),
+  }))
+
+  mock.module("@/context/server", () => ({
+    useServer: () => ({ key: "server-key" }),
+  }))
+
+  mock.module("@/context/tabs", () => ({
+    useTabs: () => ({
+      promoteDraft: () => undefined,
+    }),
+  }))
+
+  mock.module("@/context/prompt", () => ({
+    usePrompt: () => ({
+      current: () => promptValue,
+      reset: () => undefined,
+      set: () => undefined,
+      context: {
+        add: () => undefined,
+        remove: () => undefined,
+        items: () => [],
+      },
+    }),
+  }))
+
+  mock.module("@/context/layout", () => ({
+    useLayout: () => ({
+      handoff: {
+        setTabs: () => undefined,
+      },
+    }),
+  }))
+
+  mock.module("@/context/sdk", () => ({
+    useSDK: () => {
+      const sdk = {
+        scope: "local",
+        directory: "/repo/main",
+        client: rootClient,
+        url: "http://localhost:4096",
+        createClient(opts: any) {
+          return clientFor(opts.directory)
+        },
+      }
+      return sdk
+    },
+  }))
+
+  mock.module("@/context/sync", () => ({
+    useSync: () => ({
+      data: { command: [] },
+      session: {
+        optimistic: {
+          add: (value: {
+            directory?: string
+            sessionID?: string
+            message: { agent: string; model: { providerID: string; modelID: string; variant?: string } }
+          }) => {
+            optimistic.push(value)
+            optimisticSeeded.push(
+              !!value.directory &&
+                !!value.sessionID &&
+                !!storedSessions[value.directory]?.find((item) => item.id === value.sessionID)?.title,
+            )
+          },
+          remove: () => undefined,
+        },
+      },
+      set: () => undefined,
+    }),
+  }))
+
+  mock.module("@/context/server-sync", () => ({
+    useServerSync: () => ({
+      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 }>
+            }
+          },
+        ]
+      },
+    }),
+  }))
+
+  mock.module("@/context/platform", () => ({
+    usePlatform: () => ({
+      fetch: fetch,
+    }),
+  }))
+
+  mock.module("@/context/language", () => ({
+    useLanguage: () => ({
+      t: (key: string) => key,
+    }),
+  }))
+
+  const mod = await import("./submit")
+  createPromptSubmit = mod.createPromptSubmit
+})
+
+beforeEach(() => {
+  createdClients.length = 0
+  createdSessions.length = 0
+  enabledAutoAccept.length = 0
+  optimistic.length = 0
+  optimisticSeeded.length = 0
+  promoted.length = 0
+  params = {}
+  sentShell.length = 0
+  syncedDirectories.length = 0
+  selected = "/repo/worktree-a"
+  variant = undefined
+  for (const key of Object.keys(storedSessions)) delete storedSessions[key]
+})
+
+describe("prompt submit worktree selection", () => {
+  test("reads the latest worktree accessor value per submit", async () => {
+    const submit = createPromptSubmit({
+      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,
+    })
+
+    const event = { preventDefault: () => undefined } as unknown as Event
+
+    await submit.handleSubmit(event)
+    selected = "/repo/worktree-b"
+    await submit.handleSubmit(event)
+
+    expect(createdClients).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(sentShell).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
+    expect(promoted).toEqual([
+      { directory: "/repo/worktree-a", sessionID: "session-1" },
+      { directory: "/repo/worktree-b", sessionID: "session-2" },
+    ])
+    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
+  })
+
+  test("applies auto-accept to newly created sessions", async () => {
+    const submit = createPromptSubmit({
+      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,
+    })
+
+    const event = { preventDefault: () => undefined } as unknown as Event
+
+    await submit.handleSubmit(event)
+
+    expect(enabledAutoAccept).toEqual([{ sessionID: "session-1", directory: "/repo/worktree-a" }])
+  })
+
+  test("includes the selected variant on optimistic prompts", async () => {
+    params = { id: "session-1" }
+    variant = "high"
+
+    const submit = createPromptSubmit({
+      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)
+
+    expect(optimistic).toHaveLength(1)
+    expect(optimistic[0]).toMatchObject({
+      message: {
+        agent: "agent",
+        model: { providerID: "provider", modelID: "model", variant: "high" },
+      },
+    })
+  })
+
+  test("seeds new sessions before optimistic prompts are added", async () => {
+    const submit = createPromptSubmit({
+      info: () => undefined,
+      imageAttachments: () => [],
+      commentCount: () => 0,
+      autoAccept: () => false,
+      mode: () => "normal",
+      working: () => false,
+      editor: () => undefined,
+      queueScroll: () => undefined,
+      promptLength: (value) => value.reduce((sum, part) => sum + ("content" in part ? part.content.length : 0), 0),
+      addToHistory: () => undefined,
+      resetHistoryNavigation: () => undefined,
+      setMode: () => undefined,
+      setPopover: () => undefined,
+      newSessionWorktree: () => selected,
+      onNewSessionWorktreeReset: () => undefined,
+      onSubmit: () => undefined,
+    })
+
+    const event = { preventDefault: () => undefined } as unknown as Event
+
+    await submit.handleSubmit(event)
+
+    expect(storedSessions["/repo/worktree-a"]).toEqual([{ id: "session-1", title: "New session 1" }])
+    expect(optimisticSeeded).toEqual([true])
+  })
+})

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

@@ -0,0 +1,601 @@
+import type { Message, Session } from "@opencode-ai/sdk/v2/client"
+import { showToast } from "@/utils/toast"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { Binary } from "@opencode-ai/core/util/binary"
+import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
+import { batch, type Accessor } from "solid-js"
+import type { FileSelection } from "@/context/file"
+import { useServer } from "@/context/server"
+import { useTabs } from "@/context/tabs"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useLocal } from "@/context/local"
+import { usePermission } from "@/context/permission"
+import { type ContextItem, type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { Identifier } from "@/utils/id"
+import { Worktree as WorktreeState } from "@/utils/worktree"
+import { buildRequestParts } from "./build-request-parts"
+import { setCursorPosition } from "./editor-dom"
+import { formatServerError } from "@/utils/server-errors"
+import { ScopedKey } from "@/utils/server-scope"
+
+type PendingPrompt = {
+  abort: AbortController
+  cleanup: VoidFunction
+}
+
+const pending = new Map<string, PendingPrompt>()
+
+export type FollowupDraft = {
+  sessionID: string
+  sessionDirectory: string
+  prompt: Prompt
+  context: (ContextItem & { key: string })[]
+  agent: string
+  model: { providerID: string; modelID: string }
+  variant?: string
+}
+
+type FollowupSendInput = {
+  client: ReturnType<typeof useSDK>["client"]
+  serverSync: ReturnType<typeof useServerSync>
+  sync: ReturnType<typeof useSync>
+  draft: FollowupDraft
+  messageID?: string
+  optimisticBusy?: boolean
+  before?: () => Promise<boolean> | boolean
+}
+
+const draftText = (prompt: Prompt) => prompt.map((part) => ("content" in part ? part.content : "")).join("")
+
+const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttachmentPart => part.type === "image")
+
+export async function sendFollowupDraft(input: FollowupSendInput) {
+  const text = draftText(input.draft.prompt)
+  const images = draftImages(input.draft.prompt)
+  const [, setStore] = input.serverSync.child(input.draft.sessionDirectory)
+
+  const setBusy = () => {
+    if (!input.optimisticBusy) return
+    setStore("session_status", input.draft.sessionID, { type: "busy" })
+  }
+
+  const setIdle = () => {
+    if (!input.optimisticBusy) return
+    setStore("session_status", input.draft.sessionID, { type: "idle" })
+  }
+
+  const wait = async () => {
+    const ok = await input.before?.()
+    if (ok === false) return false
+    return true
+  }
+
+  const [head, ...tail] = text.split(" ")
+  const cmd = head?.startsWith("/") ? head.slice(1) : undefined
+  if (cmd && input.sync.data.command.find((item) => item.name === cmd)) {
+    setBusy()
+    try {
+      if (!(await wait())) {
+        setIdle()
+        return false
+      }
+
+      await input.client.session.command({
+        sessionID: input.draft.sessionID,
+        command: cmd,
+        arguments: tail.join(" "),
+        agent: input.draft.agent,
+        model: `${input.draft.model.providerID}/${input.draft.model.modelID}`,
+        variant: input.draft.variant,
+        parts: images.map((attachment) => ({
+          id: Identifier.ascending("part"),
+          type: "file" as const,
+          mime: attachment.mime,
+          url: attachment.dataUrl,
+          filename: attachment.filename,
+        })),
+      })
+      return true
+    } catch (err) {
+      setIdle()
+      throw err
+    }
+  }
+
+  const messageID = input.messageID ?? Identifier.ascending("message")
+  const { requestParts, optimisticParts } = buildRequestParts({
+    prompt: input.draft.prompt,
+    context: input.draft.context,
+    images,
+    text,
+    sessionID: input.draft.sessionID,
+    messageID,
+    sessionDirectory: input.draft.sessionDirectory,
+  })
+
+  const message: Message = {
+    id: messageID,
+    sessionID: input.draft.sessionID,
+    role: "user",
+    time: { created: Date.now() },
+    agent: input.draft.agent,
+    model: { ...input.draft.model, variant: input.draft.variant },
+  }
+
+  const add = () =>
+    input.sync.session.optimistic.add({
+      directory: input.draft.sessionDirectory,
+      sessionID: input.draft.sessionID,
+      message,
+      parts: optimisticParts,
+    })
+
+  const remove = () =>
+    input.sync.session.optimistic.remove({
+      directory: input.draft.sessionDirectory,
+      sessionID: input.draft.sessionID,
+      messageID,
+    })
+
+  batch(() => {
+    setBusy()
+    add()
+  })
+
+  try {
+    if (!(await wait())) {
+      batch(() => {
+        setIdle()
+        remove()
+      })
+      return false
+    }
+
+    await input.client.session.promptAsync({
+      sessionID: input.draft.sessionID,
+      agent: input.draft.agent,
+      model: input.draft.model,
+      messageID,
+      parts: requestParts,
+      variant: input.draft.variant,
+    })
+    return true
+  } catch (err) {
+    batch(() => {
+      setIdle()
+      remove()
+    })
+    throw err
+  }
+}
+
+type PromptSubmitInput = {
+  info: Accessor<{ id: string } | undefined>
+  imageAttachments: Accessor<ImageAttachmentPart[]>
+  commentCount: Accessor<number>
+  autoAccept: Accessor<boolean>
+  mode: Accessor<"normal" | "shell">
+  working: Accessor<boolean>
+  editor: () => HTMLDivElement | undefined
+  queueScroll: () => void
+  promptLength: (prompt: Prompt) => number
+  addToHistory: (prompt: Prompt, mode: "normal" | "shell") => void
+  resetHistoryNavigation: () => void
+  setMode: (mode: "normal" | "shell") => void
+  setPopover: (popover: "at" | "slash" | null) => void
+  newSessionWorktree?: Accessor<string | undefined>
+  onNewSessionWorktreeReset?: () => void
+  shouldQueue?: Accessor<boolean>
+  onQueue?: (draft: FollowupDraft) => void
+  onAbort?: () => void
+  onSubmit?: () => void
+}
+
+type CommentItem = {
+  path: string
+  selection?: FileSelection
+  comment?: string
+  commentID?: string
+  commentOrigin?: "review" | "file"
+  preview?: string
+}
+
+export function createPromptSubmit(input: PromptSubmitInput) {
+  const navigate = useNavigate()
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const local = useLocal()
+  const permission = usePermission()
+  const prompt = usePrompt()
+  const layout = useLayout()
+  const language = useLanguage()
+  const params = useParams()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const server = useServer()
+  const tabs = useTabs()
+  const pendingKey = (sessionID: string) => ScopedKey.from(sdk.scope, sessionID)
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  const abort = async () => {
+    const sessionID = params.id
+    if (!sessionID) return Promise.resolve()
+
+    serverSync.todo.set(sessionID, [])
+    const [, setStore] = serverSync.child(sdk.directory)
+    setStore("todo", sessionID, [])
+
+    input.onAbort?.()
+
+    const key = pendingKey(sessionID)
+    const queued = pending.get(key)
+    if (queued) {
+      queued.abort.abort()
+      queued.cleanup()
+      pending.delete(key)
+      return Promise.resolve()
+    }
+    return sdk.client.session
+      .abort({
+        sessionID,
+      })
+      .catch(() => {})
+  }
+
+  const restoreCommentItems = (items: CommentItem[]) => {
+    for (const item of items) {
+      prompt.context.add({
+        type: "file",
+        path: item.path,
+        selection: item.selection,
+        comment: item.comment,
+        commentID: item.commentID,
+        commentOrigin: item.commentOrigin,
+        preview: item.preview,
+      })
+    }
+  }
+
+  const removeCommentItems = (items: { key: string }[]) => {
+    for (const item of items) {
+      prompt.context.remove(item.key)
+    }
+  }
+
+  const clearContext = () => {
+    for (const item of prompt.context.items()) {
+      prompt.context.remove(item.key)
+    }
+  }
+
+  const seed = (dir: string, info: Session) => {
+    const [, setStore] = serverSync.child(dir)
+    setStore("session", (list: Session[]) => {
+      const result = Binary.search(list, info.id, (item) => item.id)
+      const next = [...list]
+      if (result.found) {
+        next[result.index] = info
+        return next
+      }
+      next.splice(result.index, 0, info)
+      return next
+    })
+  }
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault()
+
+    const currentPrompt = prompt.current()
+    const text = currentPrompt.map((part) => ("content" in part ? part.content : "")).join("")
+    const images = input.imageAttachments().slice()
+    const mode = input.mode()
+
+    if (text.trim().length === 0 && images.length === 0 && input.commentCount() === 0) {
+      if (input.working()) void abort()
+      return
+    }
+
+    const currentModel = local.model.current()
+    const currentAgent = local.agent.current()
+    const variant = local.model.variant.current()
+    if (!currentModel || !currentAgent) {
+      showToast({
+        title: language.t("prompt.toast.modelAgentRequired.title"),
+        description: language.t("prompt.toast.modelAgentRequired.description"),
+      })
+      return
+    }
+
+    input.addToHistory(currentPrompt, mode)
+    input.resetHistoryNavigation()
+
+    const projectDirectory = sdk.directory
+    const isNewSession = !params.id
+    const shouldAutoAccept = isNewSession && input.autoAccept()
+    const worktreeSelection = input.newSessionWorktree?.() || "main"
+
+    let sessionDirectory = projectDirectory
+    let client = sdk.client
+
+    if (isNewSession) {
+      if (worktreeSelection === "create") {
+        const createdWorktree = await client.worktree
+          .create({ directory: projectDirectory })
+          .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(sdk.scope, createdWorktree.directory)
+        sessionDirectory = createdWorktree.directory
+      }
+
+      if (worktreeSelection !== "main" && worktreeSelection !== "create") {
+        sessionDirectory = worktreeSelection
+      }
+
+      if (sessionDirectory !== projectDirectory) {
+        client = sdk.createClient({
+          directory: sessionDirectory,
+          throwOnError: true,
+        })
+        serverSync.child(sessionDirectory)
+      }
+
+      input.onNewSessionWorktreeReset?.()
+    }
+
+    let session = input.info()
+    if (!session && isNewSession) {
+      const created = await client.session
+        .create()
+        .then((x) => x.data ?? undefined)
+        .catch((err) => {
+          showToast({
+            title: language.t("prompt.toast.sessionCreateFailed.title"),
+            description: errorMessage(err),
+          })
+          return undefined
+        })
+      if (created) {
+        seed(sessionDirectory, created)
+        session = created
+        if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
+        local.session.promote(sessionDirectory, session.id)
+        layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
+        const draftID = search.draftId
+        if (draftID)
+          tabs.promoteDraft(draftID, {
+            server: server.key,
+            dirBase64: base64Encode(sessionDirectory),
+            sessionId: session.id,
+          })
+        else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
+      }
+    }
+    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 context = prompt.context.items().slice()
+    const draft: FollowupDraft = {
+      sessionID: session.id,
+      sessionDirectory,
+      prompt: currentPrompt,
+      context,
+      agent,
+      model,
+      variant,
+    }
+
+    const clearInput = () => {
+      prompt.reset()
+      input.setMode("normal")
+      input.setPopover(null)
+    }
+
+    const restoreInput = () => {
+      prompt.set(currentPrompt, input.promptLength(currentPrompt))
+      input.setMode(mode)
+      input.setPopover(null)
+      requestAnimationFrame(() => {
+        const editor = input.editor()
+        if (!editor) return
+        editor.focus()
+        setCursorPosition(editor, input.promptLength(currentPrompt))
+        input.queueScroll()
+      })
+    }
+
+    if (!isNewSession && mode === "normal" && input.shouldQueue?.()) {
+      input.onQueue?.(draft)
+      clearContext()
+      clearInput()
+      return
+    }
+
+    input.onSubmit?.()
+
+    if (mode === "shell") {
+      clearInput()
+      client.session
+        .shell({
+          sessionID: session.id,
+          agent,
+          model,
+          command: text,
+        })
+        .catch((err) => {
+          showToast({
+            title: language.t("prompt.toast.shellSendFailed.title"),
+            description: errorMessage(err),
+          })
+          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()
+        client.session
+          .command({
+            sessionID: session.id,
+            command: commandName,
+            arguments: args.join(" "),
+            agent,
+            model: `${model.providerID}/${model.modelID}`,
+            variant,
+            parts: images.map((attachment) => ({
+              id: Identifier.ascending("part"),
+              type: "file" as const,
+              mime: attachment.mime,
+              url: attachment.dataUrl,
+              filename: attachment.filename,
+            })),
+          })
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.commandSendFailed.title"),
+              description: formatServerError(err, language.t, language.t("common.requestFailed")),
+            })
+            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,
+      })
+    }
+
+    removeCommentItems(commentItems)
+    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" })
+      }
+
+      const controller = new AbortController()
+      const cleanup = () => {
+        if (sessionDirectory === projectDirectory) {
+          sync.set("session_status", session.id, { type: "idle" })
+        }
+        removeOptimisticMessage()
+        restoreCommentItems(commentItems)
+        restoreInput()
+      }
+
+      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
+        }
+        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(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
+    }
+
+    void sendFollowupDraft({
+      client,
+      sync,
+      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()
+      restoreCommentItems(commentItems)
+      restoreInput()
+    })
+  }
+
+  return {
+    abort,
+    handleSubmit,
+  }
+}

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

@@ -0,0 +1,59 @@
+import { Icon as IconV2 } 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 { type Component, Show } from "solid-js"
+import { useServerManagementController } from "@/components/dialog-select-server"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/server"
+
+export const ServerRowMenu: Component<{
+  server: ServerConnection.Any
+  controller: ReturnType<typeof useServerManagementController>
+  onEdit: (server: ServerConnection.Http) => void
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}> = (props) => {
+  const language = useLanguage()
+  const key = ServerConnection.key(props.server)
+  const builtin = ServerConnection.builtin(props.server)
+  const isDefault = () => props.controller.defaultKey() === key
+
+  return (
+    <MenuV2 gutter={4} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
+      <MenuV2.Trigger
+        as={IconButtonV2}
+        variant="ghost-muted"
+        size="small"
+        icon={<IconV2 name="outline-dots" />}
+        aria-label={language.t("common.moreOptions")}
+      />
+      <MenuV2.Portal>
+        <MenuV2.Content>
+          <MenuV2.Group>
+            <MenuV2.GroupLabel>{language.t("settings.section.server")}</MenuV2.GroupLabel>
+            <MenuV2.Item
+              disabled={builtin || props.server.type !== "http"}
+              onSelect={() => props.onEdit(props.server as ServerConnection.Http)}
+            >
+              {language.t("dialog.server.menu.edit")}
+            </MenuV2.Item>
+            <Show when={props.controller.canDefault() && !isDefault()}>
+              <MenuV2.Item onSelect={() => props.controller.setDefault(key)}>
+                {language.t("dialog.server.menu.default")}
+              </MenuV2.Item>
+            </Show>
+            <Show when={props.controller.canDefault() && isDefault()}>
+              <MenuV2.Item onSelect={() => props.controller.setDefault(null)}>
+                {language.t("dialog.server.menu.defaultRemove")}
+              </MenuV2.Item>
+            </Show>
+            <MenuV2.Separator />
+            <MenuV2.Item disabled={builtin} onSelect={() => props.controller.handleRemove(key)}>
+              {language.t("dialog.server.menu.delete")}
+            </MenuV2.Item>
+          </MenuV2.Group>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
+  )
+}

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

@@ -0,0 +1,127 @@
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import {
+  children,
+  createEffect,
+  createMemo,
+  createSignal,
+  type JSXElement,
+  onMount,
+  type ParentProps,
+  Show,
+} from "solid-js"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection, serverName } from "@/context/server"
+import type { ServerHealth } from "@/utils/server-health"
+
+interface ServerRowProps extends ParentProps {
+  conn: ServerConnection.Any
+  status?: ServerHealth
+  class?: string
+  nameClass?: string
+  versionClass?: string
+  dimmed?: boolean
+  badge?: JSXElement
+  showCredentials?: boolean
+}
+
+export function ServerRow(props: ServerRowProps) {
+  const language = useLanguage()
+  const [truncated, setTruncated] = createSignal(false)
+  let nameRef: HTMLSpanElement | undefined
+  let versionRef: HTMLSpanElement | undefined
+  const name = createMemo(() => serverName(props.conn))
+
+  const check = () => {
+    const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
+    const versionTruncated = versionRef ? versionRef.scrollWidth > versionRef.clientWidth : false
+    setTruncated(nameTruncated || versionTruncated)
+  }
+
+  createEffect(() => {
+    name()
+    props.conn.http.url
+    props.status?.version
+    queueMicrotask(check)
+  })
+
+  onMount(() => {
+    if (typeof ResizeObserver !== "function") return
+    createResizeObserver([nameRef, versionRef], check)
+    check()
+  })
+
+  const tooltipValue = () => (
+    <span class="flex items-center gap-2">
+      <span>{serverName(props.conn, true)}</span>
+      <Show when={props.status?.version}>
+        <span class="text-text-invert-weak">v{props.status?.version}</span>
+      </Show>
+    </span>
+  )
+
+  const badge = children(() => props.badge)
+
+  return (
+    <Tooltip
+      class="flex-1 min-w-0"
+      value={tooltipValue()}
+      contentStyle={{ "max-width": "none", "white-space": "nowrap" }}
+      placement="top-start"
+      inactive={!truncated() && !props.conn.displayName}
+    >
+      <div class={props.class} classList={{ "opacity-50": props.dimmed }}>
+        <div class="flex flex-col items-start min-w-0 w-full">
+          <div class="flex flex-row items-center gap-2 min-w-0 w-full">
+            <span ref={nameRef} class={`${props.nameClass ?? "truncate"} min-w-0`}>
+              {name()}
+            </span>
+            <Show
+              when={badge()}
+              fallback={
+                <Show when={props.status?.version}>
+                  <span
+                    ref={versionRef}
+                    class={`${props.versionClass ?? "text-text-weak text-14-regular truncate"} min-w-0`}
+                  >
+                    v{props.status?.version}
+                  </span>
+                </Show>
+              }
+            >
+              {(badge) => badge()}
+            </Show>
+          </div>
+          <Show when={props.showCredentials && props.conn.type === "http" && props.conn}>
+            {(conn) => (
+              <div class="flex flex-row gap-3">
+                <span>
+                  {conn().http.username ? (
+                    <span class="text-text-weak">{conn().http.username}</span>
+                  ) : (
+                    <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
+                  )}
+                </span>
+                {conn().http.password && <span class="text-text-weak">••••••••</span>}
+              </div>
+            )}
+          </Show>
+        </div>
+        {props.children}
+      </div>
+    </Tooltip>
+  )
+}
+
+export function ServerHealthIndicator(props: { health?: ServerHealth }) {
+  return (
+    <div
+      classList={{
+        "size-1.5 rounded-full shrink-0": true,
+        "bg-icon-success-base": props.health?.healthy === true,
+        "bg-icon-critical-base": props.health?.healthy === false,
+        "bg-border-weak-base": props.health === undefined,
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,124 @@
+import { Match, Show, Switch, createMemo } from "solid-js"
+import { Tooltip, type TooltipProps } from "@opencode-ai/ui/tooltip"
+import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
+import { Button } from "@opencode-ai/ui/button"
+
+import { useFile } from "@/context/file"
+import { useLayout } from "@/context/layout"
+import { useSync } from "@/context/sync"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
+import { getSessionContextMetrics } from "@/components/session/session-context-metrics"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionTabs } from "@/pages/session/helpers"
+
+interface SessionContextUsageProps {
+  variant?: "button" | "indicator"
+  placement?: TooltipProps["placement"]
+}
+
+function openSessionContext(args: {
+  view: ReturnType<ReturnType<typeof useLayout>["view"]>
+  layout: ReturnType<typeof useLayout>
+  tabs: ReturnType<ReturnType<typeof useLayout>["tabs"]>
+}) {
+  if (!args.view.reviewPanel.opened()) args.view.reviewPanel.open()
+  if (args.layout.fileTree.opened() && args.layout.fileTree.tab() !== "all") args.layout.fileTree.setTab("all")
+  void args.tabs.open("context")
+  args.tabs.setActive("context")
+}
+
+export function SessionContextUsage(props: SessionContextUsageProps) {
+  const sync = useSync()
+  const file = useFile()
+  const layout = useLayout()
+  const language = useLanguage()
+  const providers = useProviders()
+  const { params, tabs, view } = useSessionLayout()
+
+  const variant = createMemo(() => props.variant ?? "button")
+  const tabState = createSessionTabs({
+    tabs,
+    pathFromTab: file.pathFromTab,
+    normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
+  })
+  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+
+  const usd = createMemo(
+    () =>
+      new Intl.NumberFormat(language.intl(), {
+        style: "currency",
+        currency: "USD",
+      }),
+  )
+
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), [...providers.all().values()]))
+  const context = createMemo(() => metrics().context)
+  const cost = createMemo(() => {
+    return usd().format(metrics().totalCost)
+  })
+
+  const openContext = () => {
+    if (!params.id) return
+
+    if (tabState.activeTab() === "context") {
+      tabs().close("context")
+      return
+    }
+    openSessionContext({
+      view: view(),
+      layout,
+      tabs: tabs(),
+    })
+  }
+
+  const circle = () => (
+    <div class="flex items-center justify-center">
+      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.usage ?? 0} />
+    </div>
+  )
+
+  const tooltipValue = () => (
+    <div>
+      <Show when={context()}>
+        {(ctx) => (
+          <>
+            <div class="flex items-center gap-2">
+              <span class="text-text-invert-strong">{ctx().total.toLocaleString(language.intl())}</span>
+              <span class="text-text-invert-base">{language.t("context.usage.tokens")}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-text-invert-strong">{ctx().usage ?? 0}%</span>
+              <span class="text-text-invert-base">{language.t("context.usage.usage")}</span>
+            </div>
+          </>
+        )}
+      </Show>
+      <div class="flex items-center gap-2">
+        <span class="text-text-invert-strong">{cost()}</span>
+        <span class="text-text-invert-base">{language.t("context.usage.cost")}</span>
+      </div>
+    </div>
+  )
+
+  return (
+    <Show when={params.id}>
+      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
+        <Switch>
+          <Match when={variant() === "indicator"}>{circle()}</Match>
+          <Match when={true}>
+            <Button
+              type="button"
+              variant="ghost"
+              class="size-6"
+              onClick={openContext}
+              aria-label={language.t("context.usage.view")}
+            >
+              {circle()}
+            </Button>
+          </Match>
+        </Switch>
+      </Tooltip>
+    </Show>
+  )
+}

packages/app/src/components/session/index.ts

@@ -0,0 +1,6 @@
+export { SessionHeader } from "./session-header"
+export { SessionContextTab } from "./session-context-tab"
+export { SortableTab, FileVisual } from "./session-sortable-tab"
+export { SortableTerminalTab } from "./session-sortable-terminal-tab"
+export { NewSessionView } from "./session-new-view"
+export { NewSessionDesignView } from "./session-new-design-view"

packages/app/src/components/session/session-context-breakdown.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test"
+import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { estimateSessionContextBreakdown } from "./session-context-breakdown"
+
+const user = (id: string) => {
+  return {
+    id,
+    role: "user",
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+const assistant = (id: string) => {
+  return {
+    id,
+    role: "assistant",
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+describe("estimateSessionContextBreakdown", () => {
+  test("estimates tokens and keeps remaining tokens as other", () => {
+    const messages = [user("u1"), assistant("a1")]
+    const parts = {
+      u1: [{ type: "text", text: "hello world" }] as unknown as Part[],
+      a1: [{ type: "text", text: "assistant response" }] as unknown as Part[],
+    }
+
+    const output = estimateSessionContextBreakdown({
+      messages,
+      parts,
+      input: 20,
+      systemPrompt: "system prompt",
+    })
+
+    const map = Object.fromEntries(output.map((segment) => [segment.key, segment.tokens]))
+    expect(map.system).toBe(4)
+    expect(map.user).toBe(3)
+    expect(map.assistant).toBe(5)
+    expect(map.other).toBe(8)
+  })
+
+  test("scales segments when estimates exceed input", () => {
+    const messages = [user("u1"), assistant("a1")]
+    const parts = {
+      u1: [{ type: "text", text: "x".repeat(400) }] as unknown as Part[],
+      a1: [{ type: "text", text: "y".repeat(400) }] as unknown as Part[],
+    }
+
+    const output = estimateSessionContextBreakdown({
+      messages,
+      parts,
+      input: 10,
+      systemPrompt: "z".repeat(200),
+    })
+
+    const total = output.reduce((sum, segment) => sum + segment.tokens, 0)
+    expect(total).toBeLessThanOrEqual(10)
+    expect(output.every((segment) => segment.width <= 100)).toBeTrue()
+  })
+})

packages/app/src/components/session/session-context-breakdown.ts

@@ -0,0 +1,132 @@
+import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+
+export type SessionContextBreakdownKey = "system" | "user" | "assistant" | "tool" | "other"
+
+export type SessionContextBreakdownSegment = {
+  key: SessionContextBreakdownKey
+  tokens: number
+  width: number
+  percent: number
+}
+
+const estimateTokens = (chars: number) => Math.ceil(chars / 4)
+const toPercent = (tokens: number, input: number) => (tokens / input) * 100
+const toPercentLabel = (tokens: number, input: number) => Math.round(toPercent(tokens, input) * 10) / 10
+
+const charsFromUserPart = (part: Part) => {
+  if (part.type === "text") return part.text.length
+  if (part.type === "file") return part.source?.text.value.length ?? 0
+  if (part.type === "agent") return part.source?.value.length ?? 0
+  return 0
+}
+
+const charsFromAssistantPart = (part: Part) => {
+  if (part.type === "text") return { assistant: part.text.length, tool: 0 }
+  if (part.type === "reasoning") return { assistant: part.text.length, tool: 0 }
+  if (part.type !== "tool") return { assistant: 0, tool: 0 }
+
+  const input = Object.keys(part.state.input).length * 16
+  if (part.state.status === "pending") return { assistant: 0, tool: input + part.state.raw.length }
+  if (part.state.status === "completed") return { assistant: 0, tool: input + part.state.output.length }
+  if (part.state.status === "error") return { assistant: 0, tool: input + part.state.error.length }
+  return { assistant: 0, tool: input }
+}
+
+const build = (
+  tokens: { system: number; user: number; assistant: number; tool: number; other: number },
+  input: number,
+) => {
+  return [
+    {
+      key: "system",
+      tokens: tokens.system,
+    },
+    {
+      key: "user",
+      tokens: tokens.user,
+    },
+    {
+      key: "assistant",
+      tokens: tokens.assistant,
+    },
+    {
+      key: "tool",
+      tokens: tokens.tool,
+    },
+    {
+      key: "other",
+      tokens: tokens.other,
+    },
+  ]
+    .filter((x) => x.tokens > 0)
+    .map((x) => ({
+      key: x.key,
+      tokens: x.tokens,
+      width: toPercent(x.tokens, input),
+      percent: toPercentLabel(x.tokens, input),
+    })) as SessionContextBreakdownSegment[]
+}
+
+export function estimateSessionContextBreakdown(args: {
+  messages: Message[]
+  parts: Record<string, Part[] | undefined>
+  input: number
+  systemPrompt?: string
+}) {
+  if (!args.input) return []
+
+  const counts = args.messages.reduce(
+    (acc, msg) => {
+      const parts = args.parts[msg.id] ?? []
+      if (msg.role === "user") {
+        const user = parts.reduce((sum, part) => sum + charsFromUserPart(part), 0)
+        return { ...acc, user: acc.user + user }
+      }
+
+      if (msg.role !== "assistant") return acc
+      const assistant = parts.reduce(
+        (sum, part) => {
+          const next = charsFromAssistantPart(part)
+          return {
+            assistant: sum.assistant + next.assistant,
+            tool: sum.tool + next.tool,
+          }
+        },
+        { assistant: 0, tool: 0 },
+      )
+      return {
+        ...acc,
+        assistant: acc.assistant + assistant.assistant,
+        tool: acc.tool + assistant.tool,
+      }
+    },
+    {
+      system: args.systemPrompt?.length ?? 0,
+      user: 0,
+      assistant: 0,
+      tool: 0,
+    },
+  )
+
+  const tokens = {
+    system: estimateTokens(counts.system),
+    user: estimateTokens(counts.user),
+    assistant: estimateTokens(counts.assistant),
+    tool: estimateTokens(counts.tool),
+  }
+  const estimated = tokens.system + tokens.user + tokens.assistant + tokens.tool
+
+  if (estimated <= args.input) {
+    return build({ ...tokens, other: args.input - estimated }, args.input)
+  }
+
+  const scale = args.input / estimated
+  const scaled = {
+    system: Math.floor(tokens.system * scale),
+    user: Math.floor(tokens.user * scale),
+    assistant: Math.floor(tokens.assistant * scale),
+    tool: Math.floor(tokens.tool * scale),
+  }
+  const total = scaled.system + scaled.user + scaled.assistant + scaled.tool
+  return build({ ...scaled, other: Math.max(0, args.input - total) }, args.input)
+}

packages/app/src/components/session/session-context-format.ts

@@ -0,0 +1,20 @@
+import { DateTime } from "luxon"
+
+export function createSessionContextFormatter(locale: string) {
+  return {
+    number(value: number | null | undefined) {
+      if (value === undefined) return "—"
+      if (value === null) return "—"
+      return value.toLocaleString(locale)
+    },
+    percent(value: number | null | undefined) {
+      if (value === undefined) return "—"
+      if (value === null) return "—"
+      return value.toLocaleString(locale) + "%"
+    },
+    time(value: number | undefined) {
+      if (!value) return "—"
+      return DateTime.fromMillis(value).setLocale(locale).toLocaleString(DateTime.DATETIME_MED)
+    },
+  }
+}

packages/app/src/components/session/session-context-metrics.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test"
+import type { Message } from "@opencode-ai/sdk/v2/client"
+import { getSessionContextMetrics } from "./session-context-metrics"
+
+const assistant = (
+  id: string,
+  tokens: { input: number; output: number; reasoning: number; read: number; write: number },
+  cost: number,
+  providerID = "openai",
+  modelID = "gpt-4.1",
+) => {
+  return {
+    id,
+    role: "assistant",
+    providerID,
+    modelID,
+    cost,
+    tokens: {
+      input: tokens.input,
+      output: tokens.output,
+      reasoning: tokens.reasoning,
+      cache: {
+        read: tokens.read,
+        write: tokens.write,
+      },
+    },
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+const user = (id: string) => {
+  return {
+    id,
+    role: "user",
+    cost: 0,
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+describe("getSessionContextMetrics", () => {
+  test("computes totals and usage from latest assistant with tokens", () => {
+    const messages = [
+      user("u1"),
+      assistant("a1", { input: 0, output: 0, reasoning: 0, read: 0, write: 0 }, 0.5),
+      assistant("a2", { input: 300, output: 100, reasoning: 50, read: 25, write: 25 }, 1.25),
+    ]
+    const providers = [
+      {
+        id: "openai",
+        name: "OpenAI",
+        models: {
+          "gpt-4.1": {
+            name: "GPT-4.1",
+            limit: { context: 1000 },
+          },
+        },
+      },
+    ]
+
+    const metrics = getSessionContextMetrics(messages, providers)
+
+    expect(metrics.totalCost).toBe(1.75)
+    expect(metrics.context?.message.id).toBe("a2")
+    expect(metrics.context?.total).toBe(500)
+    expect(metrics.context?.usage).toBe(50)
+    expect(metrics.context?.providerLabel).toBe("OpenAI")
+    expect(metrics.context?.modelLabel).toBe("GPT-4.1")
+  })
+
+  test("preserves fallback labels and null usage when model metadata is missing", () => {
+    const messages = [assistant("a1", { input: 40, output: 10, reasoning: 0, read: 0, write: 0 }, 0.1, "p-1", "m-1")]
+    const providers = [{ id: "p-1", models: {} }]
+
+    const metrics = getSessionContextMetrics(messages, providers)
+
+    expect(metrics.context?.providerLabel).toBe("p-1")
+    expect(metrics.context?.modelLabel).toBe("m-1")
+    expect(metrics.context?.limit).toBeUndefined()
+    expect(metrics.context?.usage).toBeNull()
+  })
+
+  test("recomputes when message array is mutated in place", () => {
+    const messages = [assistant("a1", { input: 10, output: 10, reasoning: 10, read: 10, write: 10 }, 0.25)]
+    const providers = [{ id: "openai", models: {} }]
+
+    const one = getSessionContextMetrics(messages, providers)
+    messages.push(assistant("a2", { input: 100, output: 20, reasoning: 0, read: 0, write: 0 }, 0.75))
+    const two = getSessionContextMetrics(messages, providers)
+
+    expect(one.context?.message.id).toBe("a1")
+    expect(two.context?.message.id).toBe("a2")
+    expect(two.totalCost).toBe(1)
+  })
+
+  test("returns empty metrics when inputs are undefined", () => {
+    const metrics = getSessionContextMetrics(undefined, undefined)
+
+    expect(metrics.totalCost).toBe(0)
+    expect(metrics.context).toBeUndefined()
+  })
+})

packages/app/src/components/session/session-context-metrics.ts

@@ -0,0 +1,82 @@
+import type { AssistantMessage, Message } from "@opencode-ai/sdk/v2/client"
+
+type Provider = {
+  id: string
+  name?: string
+  models: Record<string, Model | undefined>
+}
+
+type Model = {
+  name?: string
+  limit: {
+    context: number
+  }
+}
+
+type Context = {
+  message: AssistantMessage
+  provider?: Provider
+  model?: Model
+  providerLabel: string
+  modelLabel: string
+  limit: number | undefined
+  input: number
+  output: number
+  reasoning: number
+  cacheRead: number
+  cacheWrite: number
+  total: number
+  usage: number | null
+}
+
+type Metrics = {
+  totalCost: number
+  context: Context | undefined
+}
+
+const tokenTotal = (msg: AssistantMessage) => {
+  return msg.tokens.input + msg.tokens.output + msg.tokens.reasoning + msg.tokens.cache.read + msg.tokens.cache.write
+}
+
+const lastAssistantWithTokens = (messages: Message[]) => {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]
+    if (msg.role !== "assistant") continue
+    if (tokenTotal(msg) <= 0) continue
+    return msg
+  }
+}
+
+const build = (messages: Message[] = [], providers: Provider[] = []): Metrics => {
+  const totalCost = messages.reduce((sum, msg) => sum + (msg.role === "assistant" ? msg.cost : 0), 0)
+  const message = lastAssistantWithTokens(messages)
+  if (!message) return { totalCost, context: undefined }
+
+  const provider = providers.find((item) => item.id === message.providerID)
+  const model = provider?.models[message.modelID]
+  const limit = model?.limit.context
+  const total = tokenTotal(message)
+
+  return {
+    totalCost,
+    context: {
+      message,
+      provider,
+      model,
+      providerLabel: provider?.name ?? message.providerID,
+      modelLabel: model?.name ?? message.modelID,
+      limit,
+      input: message.tokens.input,
+      output: message.tokens.output,
+      reasoning: message.tokens.reasoning,
+      cacheRead: message.tokens.cache.read,
+      cacheWrite: message.tokens.cache.write,
+      total,
+      usage: limit ? Math.round((total / limit) * 100) : null,
+    },
+  }
+}
+
+export function getSessionContextMetrics(messages: Message[] = [], providers: Provider[] = []) {
+  return build(messages, providers)
+}

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

@@ -0,0 +1,341 @@
+import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { useSync } from "@/context/sync"
+import { checksum } from "@opencode-ai/core/util/encode"
+import { findLast } from "@opencode-ai/core/util/array"
+import { same } from "@/utils/same"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Accordion } from "@opencode-ai/ui/accordion"
+import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
+import { File } from "@opencode-ai/ui/file"
+import { Markdown } from "@opencode-ai/ui/markdown"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { getSessionContextMetrics } from "./session-context-metrics"
+import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
+import { createSessionContextFormatter } from "./session-context-format"
+
+const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
+  system: "var(--syntax-info)",
+  user: "var(--syntax-success)",
+  assistant: "var(--syntax-property)",
+  tool: "var(--syntax-warning)",
+  other: "var(--syntax-comment)",
+}
+
+function Stat(props: { label: string; value: JSX.Element }) {
+  return (
+    <div class="flex flex-col gap-1">
+      <div class="text-12-regular text-text-weak">{props.label}</div>
+      <div class="text-12-medium text-text-strong">{props.value}</div>
+    </div>
+  )
+}
+
+function RawMessageContent(props: { message: Message; getParts: (id: string) => Part[]; onRendered: () => void }) {
+  const file = createMemo(() => {
+    const parts = props.getParts(props.message.id)
+    const contents = JSON.stringify({ message: props.message, parts }, null, 2)
+    return {
+      name: `${props.message.role}-${props.message.id}.json`,
+      contents,
+      cacheKey: checksum(contents),
+    }
+  })
+
+  return (
+    <File
+      mode="text"
+      file={file()}
+      overflow="wrap"
+      class="select-text"
+      onRendered={() => requestAnimationFrame(props.onRendered)}
+    />
+  )
+}
+
+function RawMessage(props: {
+  message: Message
+  getParts: (id: string) => Part[]
+  onRendered: () => void
+  time: (value: number | undefined) => string
+}) {
+  return (
+    <Accordion.Item value={props.message.id}>
+      <StickyAccordionHeader>
+        <Accordion.Trigger>
+          <div class="flex items-center justify-between gap-2 w-full">
+            <div class="min-w-0 truncate">
+              {props.message.role} <span class="text-text-base">• {props.message.id}</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="shrink-0 text-12-regular text-text-weak">{props.time(props.message.time.created)}</div>
+              <Icon name="chevron-grabber-vertical" size="small" class="shrink-0 text-text-weak" />
+            </div>
+          </div>
+        </Accordion.Trigger>
+      </StickyAccordionHeader>
+      <Accordion.Content class="bg-background-base">
+        <div class="p-3">
+          <RawMessageContent message={props.message} getParts={props.getParts} onRendered={props.onRendered} />
+        </div>
+      </Accordion.Content>
+    </Accordion.Item>
+  )
+}
+
+const emptyMessages: Message[] = []
+const emptyUserMessages: UserMessage[] = []
+
+export function SessionContextTab() {
+  const sync = useSync()
+  const language = useLanguage()
+  const providers = useProviders()
+  const { params, view } = useSessionLayout()
+
+  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+
+  const messages = createMemo(
+    () => {
+      const id = params.id
+      if (!id) return emptyMessages
+      return (sync.data.message[id] ?? []) as Message[]
+    },
+    emptyMessages,
+    { equals: same },
+  )
+
+  const userMessages = createMemo(
+    () => messages().filter((m) => m.role === "user") as UserMessage[],
+    emptyUserMessages,
+    { equals: same },
+  )
+
+  const visibleUserMessages = createMemo(
+    () => {
+      const revert = info()?.revert?.messageID
+      if (!revert) return userMessages()
+      return userMessages().filter((m) => m.id < revert)
+    },
+    emptyUserMessages,
+    { equals: same },
+  )
+
+  const usd = createMemo(
+    () =>
+      new Intl.NumberFormat(language.intl(), {
+        style: "currency",
+        currency: "USD",
+      }),
+  )
+
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), [...providers.all().values()]))
+  const ctx = createMemo(() => metrics().context)
+  const formatter = createMemo(() => createSessionContextFormatter(language.intl()))
+
+  const cost = createMemo(() => {
+    return usd().format(metrics().totalCost)
+  })
+
+  const counts = createMemo(() => {
+    const all = messages()
+    const user = all.reduce((count, x) => count + (x.role === "user" ? 1 : 0), 0)
+    const assistant = all.reduce((count, x) => count + (x.role === "assistant" ? 1 : 0), 0)
+    return {
+      all: all.length,
+      user,
+      assistant,
+    }
+  })
+
+  const systemPrompt = createMemo(() => {
+    const msg = findLast(visibleUserMessages(), (m) => !!m.system)
+    const system = msg?.system
+    if (!system) return
+    const trimmed = system.trim()
+    if (!trimmed) return
+    return trimmed
+  })
+
+  const providerLabel = createMemo(() => {
+    const c = ctx()
+    if (!c) return "—"
+    return c.providerLabel
+  })
+
+  const modelLabel = createMemo(() => {
+    const c = ctx()
+    if (!c) return "—"
+    return c.modelLabel
+  })
+
+  const breakdown = createMemo(
+    on(
+      () => [ctx()?.message.id, ctx()?.input, messages().length, systemPrompt()],
+      () => {
+        const c = ctx()
+        if (!c?.input) return []
+        return estimateSessionContextBreakdown({
+          messages: messages(),
+          parts: sync.data.part as Record<string, Part[] | undefined>,
+          input: c.input,
+          systemPrompt: systemPrompt(),
+        })
+      },
+    ),
+  )
+
+  const breakdownLabel = (key: SessionContextBreakdownKey) => {
+    if (key === "system") return language.t("context.breakdown.system")
+    if (key === "user") return language.t("context.breakdown.user")
+    if (key === "assistant") return language.t("context.breakdown.assistant")
+    if (key === "tool") return language.t("context.breakdown.tool")
+    return language.t("context.breakdown.other")
+  }
+
+  const stats = [
+    { label: "context.stats.session", value: () => info()?.title ?? params.id ?? "—" },
+    { label: "context.stats.messages", value: () => counts().all.toLocaleString(language.intl()) },
+    { label: "context.stats.provider", value: providerLabel },
+    { label: "context.stats.model", value: modelLabel },
+    { label: "context.stats.limit", value: () => formatter().number(ctx()?.limit) },
+    { label: "context.stats.totalTokens", value: () => formatter().number(ctx()?.total) },
+    { label: "context.stats.usage", value: () => formatter().percent(ctx()?.usage) },
+    { label: "context.stats.inputTokens", value: () => formatter().number(ctx()?.input) },
+    { label: "context.stats.outputTokens", value: () => formatter().number(ctx()?.output) },
+    { label: "context.stats.reasoningTokens", value: () => formatter().number(ctx()?.reasoning) },
+    {
+      label: "context.stats.cacheTokens",
+      value: () => `${formatter().number(ctx()?.cacheRead)} / ${formatter().number(ctx()?.cacheWrite)}`,
+    },
+    { label: "context.stats.userMessages", value: () => counts().user.toLocaleString(language.intl()) },
+    { label: "context.stats.assistantMessages", value: () => counts().assistant.toLocaleString(language.intl()) },
+    { label: "context.stats.totalCost", value: cost },
+    { label: "context.stats.sessionCreated", value: () => formatter().time(info()?.time.created) },
+    { label: "context.stats.lastActivity", value: () => formatter().time(ctx()?.message.time.created) },
+  ] satisfies { label: string; value: () => JSX.Element }[]
+
+  let scroll: HTMLDivElement | undefined
+  let frame: number | undefined
+  let pending: { x: number; y: number } | undefined
+  const getParts = (id: string) => (sync.data.part[id] ?? []) as Part[]
+
+  const restoreScroll = () => {
+    const el = scroll
+    if (!el) return
+
+    const s = view().scroll("context")
+    if (!s) return
+
+    if (el.scrollTop !== s.y) el.scrollTop = s.y
+    if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+  }
+
+  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    pending = {
+      x: event.currentTarget.scrollLeft,
+      y: event.currentTarget.scrollTop,
+    }
+    if (frame !== undefined) return
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+
+      const next = pending
+      pending = undefined
+      if (!next) return
+
+      view().setScroll("context", next)
+    })
+  }
+
+  createEffect(
+    on(
+      () => messages().length,
+      () => {
+        requestAnimationFrame(restoreScroll)
+      },
+      { defer: true },
+    ),
+  )
+
+  onCleanup(() => {
+    if (frame === undefined) return
+    cancelAnimationFrame(frame)
+  })
+
+  return (
+    <ScrollView
+      class="@container h-full"
+      viewportRef={(el) => {
+        scroll = el
+        restoreScroll()
+      }}
+      onScroll={handleScroll}
+    >
+      <div class="px-6 pt-4 pb-10 flex flex-col gap-10">
+        <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
+          <For each={stats}>
+            {(stat) => <Stat label={language.t(stat.label as Parameters<typeof language.t>[0])} value={stat.value()} />}
+          </For>
+        </div>
+
+        <Show when={breakdown().length > 0}>
+          <div class="flex flex-col gap-2">
+            <div class="text-12-regular text-text-weak">{language.t("context.breakdown.title")}</div>
+            <div class="h-2 w-full rounded-full bg-surface-base overflow-hidden flex">
+              <For each={breakdown()}>
+                {(segment) => (
+                  <div
+                    class="h-full"
+                    style={{
+                      width: `${segment.width}%`,
+                      "background-color": BREAKDOWN_COLOR[segment.key],
+                    }}
+                  />
+                )}
+              </For>
+            </div>
+            <div class="flex flex-wrap gap-x-3 gap-y-1">
+              <For each={breakdown()}>
+                {(segment) => (
+                  <div class="flex items-center gap-1 text-11-regular text-text-weak">
+                    <div class="size-2 rounded-sm" style={{ "background-color": BREAKDOWN_COLOR[segment.key] }} />
+                    <div>{breakdownLabel(segment.key)}</div>
+                    <div class="text-text-weaker">{segment.percent.toLocaleString(language.intl())}%</div>
+                  </div>
+                )}
+              </For>
+            </div>
+            <div class="hidden text-11-regular text-text-weaker">{language.t("context.breakdown.note")}</div>
+          </div>
+        </Show>
+
+        <Show when={systemPrompt()}>
+          {(prompt) => (
+            <div class="flex flex-col gap-2">
+              <div class="text-12-regular text-text-weak">{language.t("context.systemPrompt.title")}</div>
+              <div class="border border-border-base rounded-md bg-surface-base px-3 py-2">
+                <Markdown text={prompt()} class="text-12-regular" />
+              </div>
+            </div>
+          )}
+        </Show>
+
+        <div class="flex flex-col gap-2">
+          <div class="text-12-regular text-text-weak">{language.t("context.rawMessages.title")}</div>
+          <Accordion multiple>
+            <For each={messages()}>
+              {(message) => (
+                <RawMessage message={message} getParts={getParts} onRendered={restoreScroll} time={formatter().time} />
+              )}
+            </For>
+          </Accordion>
+        </div>
+      </div>
+    </ScrollView>
+  )
+}

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

@@ -0,0 +1,555 @@
+import { AppIcon } from "@opencode-ai/ui/app-icon"
+import { Button } from "@opencode-ai/ui/button"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { showToast } from "@/utils/toast"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { useServer } from "@/context/server"
+import { useSettings } from "@/context/settings"
+import { useSync } from "@/context/sync"
+import { useTerminal } from "@/context/terminal"
+import { focusTerminalById } from "@/pages/session/helpers"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { messageAgentColor } from "@/utils/agent"
+import { decode64 } from "@/utils/base64"
+import { Persist, persisted } from "@/utils/persist"
+import { StatusPopover, StatusPopoverV2 } from "../status-popover"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+
+const OPEN_APPS = [
+  "vscode",
+  "cursor",
+  "zed",
+  "textmate",
+  "antigravity",
+  "finder",
+  "terminal",
+  "iterm2",
+  "ghostty",
+  "warp",
+  "xcode",
+  "android-studio",
+  "powershell",
+  "sublime-text",
+] as const
+
+type OpenApp = (typeof OPEN_APPS)[number]
+type OS = "macos" | "windows" | "linux" | "unknown"
+
+const MAC_APPS = [
+  {
+    id: "vscode",
+    label: "session.header.open.app.vscode",
+    icon: "vscode",
+    openWith: "Visual Studio Code",
+  },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "Cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "Zed" },
+  { id: "textmate", label: "session.header.open.app.textmate", icon: "textmate", openWith: "TextMate" },
+  {
+    id: "antigravity",
+    label: "session.header.open.app.antigravity",
+    icon: "antigravity",
+    openWith: "Antigravity",
+  },
+  { id: "terminal", label: "session.header.open.app.terminal", icon: "terminal", openWith: "Terminal" },
+  { id: "iterm2", label: "session.header.open.app.iterm2", icon: "iterm2", openWith: "iTerm" },
+  { id: "ghostty", label: "session.header.open.app.ghostty", icon: "ghostty", openWith: "Ghostty" },
+  { id: "warp", label: "session.header.open.app.warp", icon: "warp", openWith: "Warp" },
+  { id: "xcode", label: "session.header.open.app.xcode", icon: "xcode", openWith: "Xcode" },
+  {
+    id: "android-studio",
+    label: "session.header.open.app.androidStudio",
+    icon: "android-studio",
+    openWith: "Android Studio",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const WINDOWS_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "powershell",
+    label: "session.header.open.app.powershell",
+    icon: "powershell",
+    openWith: "powershell",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const LINUX_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
+  if (platform.platform === "desktop" && platform.os) return platform.os
+  if (typeof navigator !== "object") return "unknown"
+  const value = navigator.platform || navigator.userAgent
+  if (/Mac/i.test(value)) return "macos"
+  if (/Win/i.test(value)) return "windows"
+  if (/Linux/i.test(value)) return "linux"
+  return "unknown"
+}
+
+const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+export function SessionHeader() {
+  const layout = useLayout()
+  const command = useCommand()
+  const server = useServer()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const settings = useSettings()
+  const sync = useSync()
+  const terminal = useTerminal()
+  const { params, view } = useSessionLayout()
+
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const project = createMemo(() => {
+    const directory = projectDirectory()
+    if (!directory) return
+    return layout.projects.list().find((p) => p.worktree === directory || p.sandboxes?.includes(directory))
+  })
+  const name = createMemo(() => {
+    const current = project()
+    if (current) return current.name || getFilename(current.worktree)
+    return getFilename(projectDirectory())
+  })
+  const hotkey = createMemo(() => command.keybind("file.open"))
+  const os = createMemo(() => detectOS(platform))
+  const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
+  const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
+  const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
+  const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
+  const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
+
+  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
+    finder: true,
+  })
+
+  const apps = createMemo(() => {
+    if (os() === "macos") return MAC_APPS
+    if (os() === "windows") return WINDOWS_APPS
+    return LINUX_APPS
+  })
+
+  const fileManager = createMemo(() => {
+    if (os() === "macos") return { label: "session.header.open.finder", icon: "finder" as const }
+    if (os() === "windows") return { label: "session.header.open.fileExplorer", icon: "file-explorer" as const }
+    return { label: "session.header.open.fileManager", icon: "finder" as const }
+  })
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+    if (!platform.checkAppExists) return
+
+    const list = apps()
+
+    setExists(Object.fromEntries(list.map((app) => [app.id, undefined])) as Partial<Record<OpenApp, boolean>>)
+
+    void Promise.all(
+      list.map((app) =>
+        Promise.resolve(platform.checkAppExists?.(app.openWith))
+          .then((value) => Boolean(value))
+          .catch(() => false)
+          .then((ok) => [app.id, ok] as const),
+      ),
+    ).then((entries) => {
+      setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
+    })
+  })
+
+  const options = createMemo(() => {
+    return [
+      { id: "finder", label: language.t(fileManager().label), icon: fileManager().icon },
+      ...apps()
+        .filter((app) => exists[app.id])
+        .map((app) => ({ ...app, label: language.t(app.label) })),
+    ] as const
+  })
+
+  const toggleTerminal = () => {
+    const next = !view().terminal.opened()
+    view().terminal.toggle()
+    if (!next) return
+
+    const id = terminal.active()
+    if (!id) return
+    focusTerminalById(id)
+  }
+
+  const [prefs, setPrefs] = persisted(Persist.global("open.app"), createStore({ app: "finder" as OpenApp }))
+  const [menu, setMenu] = createStore({ open: false })
+  const [openRequest, setOpenRequest] = createStore({
+    app: undefined as OpenApp | undefined,
+  })
+
+  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
+  const current = createMemo(
+    () =>
+      options().find((o) => o.id === prefs.app) ??
+      options()[0] ??
+      ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
+  )
+  const opening = createMemo(() => openRequest.app !== undefined)
+  const tint = createMemo(() =>
+    messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
+  )
+  const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
+    statusVisible: status(),
+    statusLabel: language.t("status.popover.trigger"),
+    reviewLabel: language.t("command.review.toggle"),
+    reviewKeybind: command.keybind("review.toggle"),
+    reviewOpened: view().reviewPanel.opened(),
+    onReviewToggle: () => view().reviewPanel.toggle(),
+  }))
+
+  const selectApp = (app: OpenApp) => {
+    if (!options().some((item) => item.id === app)) return
+    setPrefs("app", app)
+  }
+
+  const openDir = (app: OpenApp) => {
+    if (opening() || !canOpen() || !platform.openPath) return
+    const directory = projectDirectory()
+    if (!directory) return
+
+    const item = options().find((o) => o.id === app)
+    const openWith = item && "openWith" in item ? item.openWith : undefined
+    setOpenRequest("app", app)
+    platform
+      .openPath(directory, openWith)
+      .catch((err: unknown) => showRequestError(language, err))
+      .finally(() => {
+        setOpenRequest("app", undefined)
+      })
+  }
+
+  const copyPath = () => {
+    const directory = projectDirectory()
+    if (!directory) return
+    navigator.clipboard
+      .writeText(directory)
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: directory,
+        })
+      })
+      .catch((err: unknown) => showRequestError(language, err))
+  }
+
+  const [centerMount, setCenterMount] = createSignal<HTMLElement | null>(null)
+  const [rightMount, setRightMount] = createSignal<HTMLElement | null>(null)
+  onMount(() => {
+    setCenterMount(document.getElementById("opencode-titlebar-center"))
+    setRightMount(document.getElementById("opencode-titlebar-right"))
+  })
+
+  return (
+    <>
+      <Show when={search() && centerMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="small"
+              class="hidden md:flex w-[240px] max-w-full min-w-0 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel shadow-none cursor-default"
+              onClick={() => command.trigger("file.open")}
+              aria-label={language.t("session.header.searchFiles")}
+            >
+              <div class="flex min-w-0 flex-1 items-center overflow-visible">
+                <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate text-left">
+                  {language.t("session.header.search.placeholder", {
+                    project: name(),
+                  })}
+                </span>
+              </div>
+
+              <Show when={hotkey()}>
+                {(keybind) => (
+                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0 text-text-weaker">
+                    {keybind()}
+                  </Keybind>
+                )}
+              </Show>
+            </Button>
+          </Portal>
+        )}
+      </Show>
+      <Show when={rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show
+              when={isDesktopV2}
+              fallback={
+                <div class="flex items-center gap-2">
+                  <Show when={projectDirectory()}>
+                    <div class="hidden xl:flex items-center">
+                      <Show
+                        when={canOpen()}
+                        fallback={
+                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                              onClick={copyPath}
+                              aria-label={language.t("session.header.open.copyPath")}
+                            >
+                              <Icon name="copy" size="small" class="text-icon-base" />
+                              <span class="text-12-regular text-text-strong">
+                                {language.t("session.header.open.copyPath")}
+                              </span>
+                            </Button>
+                          </div>
+                        }
+                      >
+                        <div class="flex items-center">
+                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
+                              classList={{
+                                "bg-surface-raised-base-active": opening(),
+                              }}
+                              onClick={() => openDir(current().id)}
+                              disabled={opening()}
+                              aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                            >
+                              <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                                  <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                                </Show>
+                              </div>
+                            </Button>
+                            <DropdownMenu
+                              gutter={4}
+                              placement="bottom-end"
+                              open={menu.open}
+                              onOpenChange={(open) => setMenu("open", open)}
+                            >
+                              <DropdownMenu.Trigger
+                                as={IconButton}
+                                icon="chevron-down"
+                                variant="ghost"
+                                disabled={opening()}
+                                class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
+                                classList={{
+                                  "bg-surface-raised-base-active": opening(),
+                                }}
+                                aria-label={language.t("session.header.open.menu")}
+                              />
+                              <DropdownMenu.Portal>
+                                <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
+                                  <DropdownMenu.Group>
+                                    <DropdownMenu.GroupLabel class="!px-1 !py-1">
+                                      {language.t("session.header.openIn")}
+                                    </DropdownMenu.GroupLabel>
+                                    <DropdownMenu.RadioGroup
+                                      class="mt-1"
+                                      value={current().id}
+                                      onChange={(value) => {
+                                        if (!OPEN_APPS.includes(value as OpenApp)) return
+                                        selectApp(value as OpenApp)
+                                      }}
+                                    >
+                                      <For each={options()}>
+                                        {(o) => (
+                                          <DropdownMenu.RadioItem
+                                            value={o.id}
+                                            disabled={opening()}
+                                            onSelect={() => {
+                                              setMenu("open", false)
+                                              openDir(o.id)
+                                            }}
+                                          >
+                                            <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                              <AppIcon id={o.icon} />
+                                            </div>
+                                            <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
+                                            <DropdownMenu.ItemIndicator>
+                                              <Icon name="check-small" size="small" class="text-icon-weak" />
+                                            </DropdownMenu.ItemIndicator>
+                                          </DropdownMenu.RadioItem>
+                                        )}
+                                      </For>
+                                    </DropdownMenu.RadioGroup>
+                                  </DropdownMenu.Group>
+                                  <DropdownMenu.Separator />
+                                  <DropdownMenu.Item
+                                    onSelect={() => {
+                                      setMenu("open", false)
+                                      copyPath()
+                                    }}
+                                  >
+                                    <div class="flex size-5 shrink-0 items-center justify-center">
+                                      <Icon name="copy" size="small" class="text-icon-weak" />
+                                    </div>
+                                    <DropdownMenu.ItemLabel>
+                                      {language.t("session.header.open.copyPath")}
+                                    </DropdownMenu.ItemLabel>
+                                  </DropdownMenu.Item>
+                                </DropdownMenu.Content>
+                              </DropdownMenu.Portal>
+                            </DropdownMenu>
+                          </div>
+                        </div>
+                      </Show>
+                    </div>
+                  </Show>
+                  <div class="flex items-center gap-1">
+                    <Show when={status()}>
+                      <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                        <StatusPopover />
+                      </Tooltip>
+                    </Show>
+                    <Show when={term()}>
+                      <TooltipKeybind
+                        title={language.t("command.terminal.toggle")}
+                        keybind={command.keybind("terminal.toggle")}
+                      >
+                        <Button
+                          variant="ghost"
+                          class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                          onClick={toggleTerminal}
+                          aria-label={language.t("command.terminal.toggle")}
+                          aria-expanded={view().terminal.opened()}
+                          aria-controls="terminal-panel"
+                        >
+                          <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                        </Button>
+                      </TooltipKeybind>
+                    </Show>
+
+                    <div class="hidden md:flex items-center gap-1 shrink-0">
+                      <TooltipKeybind
+                        title={language.t("command.review.toggle")}
+                        keybind={command.keybind("review.toggle")}
+                      >
+                        <Button
+                          variant="ghost"
+                          class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                          onClick={() => view().reviewPanel.toggle()}
+                          aria-label={language.t("command.review.toggle")}
+                          aria-expanded={view().reviewPanel.opened()}
+                          aria-controls="review-panel"
+                        >
+                          <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
+                        </Button>
+                      </TooltipKeybind>
+
+                      <Show when={tree()}>
+                        <TooltipKeybind
+                          title={language.t("command.fileTree.toggle")}
+                          keybind={command.keybind("fileTree.toggle")}
+                        >
+                          <Button
+                            variant="ghost"
+                            class="titlebar-icon w-8 h-6 p-0 box-border"
+                            onClick={() => layout.fileTree.toggle()}
+                            aria-label={language.t("command.fileTree.toggle")}
+                            aria-expanded={layout.fileTree.opened()}
+                            aria-controls="file-tree-panel"
+                          >
+                            <div class="relative flex items-center justify-center size-4">
+                              <Icon
+                                size="small"
+                                name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                                classList={{
+                                  "text-icon-strong": layout.fileTree.opened(),
+                                  "text-icon-weak": !layout.fileTree.opened(),
+                                }}
+                              />
+                            </div>
+                          </Button>
+                        </TooltipKeybind>
+                      </Show>
+                    </div>
+                  </div>
+                </div>
+              }
+            >
+              <SessionHeaderV2Actions state={v2ActionsState()} />
+            </Show>
+          </Portal>
+        )}
+      </Show>
+    </>
+  )
+}
+
+type SessionHeaderV2ActionsState = {
+  statusVisible: boolean
+  statusLabel: string
+  reviewLabel: string
+  reviewKeybind: string
+  reviewOpened: boolean
+  onReviewToggle: () => void
+}
+
+function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
+  return (
+    <div class="flex items-center gap-2">
+      <Show when={props.state.statusVisible}>
+        <Tooltip placement="bottom" value={props.state.statusLabel}>
+          <StatusPopoverV2 />
+        </Tooltip>
+      </Show>
+      <TooltipKeybind title={props.state.reviewLabel} keybind={props.state.reviewKeybind}>
+        <IconButtonV2
+          type="button"
+          variant="ghost-muted"
+          size="large"
+          class="!w-9 shrink-0"
+          state={props.state.reviewOpened ? "pressed" : undefined}
+          onClick={props.state.onReviewToggle}
+          aria-label={props.state.reviewLabel}
+          aria-expanded={props.state.reviewOpened}
+          aria-controls="review-panel"
+          icon={<IconV2 name="sidebar-right" />}
+        />
+      </TooltipKeybind>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import type { JSX } from "solid-js"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+
+export function NewSessionDesignView(props: { children: JSX.Element }) {
+  return (
+    <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
+      <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
+        <div class={NEW_SESSION_CONTENT_WIDTH}>
+          <WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
+          <div class="mt-8">{props.children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { Show, createMemo } from "solid-js"
+import { DateTime } from "luxon"
+import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
+import { useLanguage } from "@/context/language"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Mark } from "@opencode-ai/ui/logo"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+
+const MAIN_WORKTREE = "main"
+const CREATE_WORKTREE = "create"
+const ROOT_CLASS = "size-full flex flex-col"
+
+interface NewSessionViewProps {
+  worktree: string
+}
+
+export function NewSessionView(props: NewSessionViewProps) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const language = useLanguage()
+
+  const sandboxes = createMemo(() => sync.project?.sandboxes ?? [])
+  const options = createMemo(() => [MAIN_WORKTREE, ...sandboxes(), CREATE_WORKTREE])
+  const current = createMemo(() => {
+    const selection = props.worktree
+    if (options().includes(selection)) return selection
+    return MAIN_WORKTREE
+  })
+  const projectRoot = createMemo(() => sync.project?.worktree ?? sdk.directory)
+  const isWorktree = createMemo(() => {
+    const project = sync.project
+    if (!project) return false
+    return sdk.directory !== project.worktree
+  })
+
+  const label = (value: string) => {
+    if (value === MAIN_WORKTREE) {
+      if (isWorktree()) return language.t("session.new.worktree.main")
+      const branch = sync.data.vcs?.branch
+      if (branch) return language.t("session.new.worktree.mainWithBranch", { branch })
+      return language.t("session.new.worktree.main")
+    }
+
+    if (value === CREATE_WORKTREE) return language.t("session.new.worktree.create")
+
+    return getFilename(value)
+  }
+
+  return (
+    <div class={ROOT_CLASS}>
+      <div class="h-12 shrink-0" aria-hidden />
+      <div class="flex-1 px-6 pb-30 flex items-center justify-center text-center">
+        <div class="w-full max-w-200 flex flex-col items-center text-center gap-4">
+          <div class="flex flex-col items-center gap-6">
+            <Mark class="w-10" />
+            <div class="text-20-medium text-text-strong">{language.t("session.new.title")}</div>
+          </div>
+          <div class="w-full flex flex-col gap-4 items-center">
+            <div class="flex items-start justify-center gap-3 min-h-5">
+              <div class="text-12-medium text-text-weak select-text leading-5 min-w-0 max-w-160 break-words text-center">
+                {getDirectory(projectRoot())}
+                <span class="text-text-strong">{getFilename(projectRoot())}</span>
+              </div>
+            </div>
+            <div class="flex items-start justify-center gap-1.5 min-h-5">
+              <Icon name="branch" size="small" class="mt-0.5 shrink-0" />
+              <div class="text-12-medium text-text-weak select-text leading-5 min-w-0 max-w-160 break-words text-center">
+                {label(current())}
+              </div>
+            </div>
+            <Show when={sync.project}>
+              {(project) => (
+                <div class="flex items-start justify-center gap-3 min-h-5">
+                  <div class="text-12-medium text-text-weak leading-5 min-w-0 max-w-160 break-words text-center">
+                    {language.t("session.new.lastModified")}&nbsp;
+                    <span class="text-text-strong">
+                      {DateTime.fromMillis(project().time.updated ?? project().time.created)
+                        .setLocale(language.intl())
+                        .toRelative()}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </Show>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { createMemo, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useCommand } from "@/context/command"
+
+export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
+  return (
+    <div class="flex items-center gap-x-1.5 min-w-0">
+      <Show
+        when={!props.active}
+        fallback={<FileIcon node={{ path: props.path, type: "file" }} class="size-4 shrink-0" />}
+      >
+        <span class="relative inline-flex size-4 shrink-0">
+          <FileIcon node={{ path: props.path, type: "file" }} class="absolute inset-0 size-4 tab-fileicon-color" />
+          <FileIcon node={{ path: props.path, type: "file" }} mono class="absolute inset-0 size-4 tab-fileicon-mono" />
+        </span>
+      </Show>
+      <span class="text-14-medium truncate">{getFilename(props.path)}</span>
+    </div>
+  )
+}
+
+export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
+  const file = useFile()
+  const language = useLanguage()
+  const command = useCommand()
+  const sortable = createSortable(props.tab)
+  const path = createMemo(() => file.pathFromTab(props.tab))
+  const content = createMemo(() => {
+    const value = path()
+    if (!value) return
+    return <FileVisual path={value} />
+  })
+  return (
+    <div use:sortable class="h-full flex items-center" classList={{ "opacity-0": sortable.isActiveDraggable }}>
+      <div class="relative">
+        <Tabs.Trigger
+          value={props.tab}
+          closeButton={
+            <TooltipKeybind
+              title={language.t("common.closeTab")}
+              keybind={command.keybind("tab.close")}
+              placement="bottom"
+              gutter={10}
+            >
+              <IconButton
+                icon="close-small"
+                variant="ghost"
+                class="h-5 w-5"
+                onClick={() => props.onTabClose(props.tab)}
+                aria-label={language.t("common.closeTab")}
+              />
+            </TooltipKeybind>
+          }
+          hideCloseButton
+          onMiddleClick={() => props.onTabClose(props.tab)}
+        >
+          <Show when={content()}>{(value) => value()}</Show>
+        </Tabs.Trigger>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,193 @@
+import type { JSX } from "solid-js"
+import { Show, createEffect, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+import { useLanguage } from "@/context/language"
+import { focusTerminalById } from "@/pages/session/helpers"
+
+export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () => void }): JSX.Element {
+  const terminal = useTerminal()
+  const language = useLanguage()
+  const sortable = createSortable(props.terminal.id)
+  const [store, setStore] = createStore({
+    editing: false,
+    title: props.terminal.title,
+    menuOpen: false,
+    menuPosition: { x: 0, y: 0 },
+    blurEnabled: false,
+  })
+  let input: HTMLInputElement | undefined
+  let blurFrame: number | undefined
+  let editRequested = false
+
+  const isDefaultTitle = () => {
+    const number = props.terminal.titleNumber
+    if (!Number.isFinite(number) || number <= 0) return false
+    return isDefaultTerminalTitle(props.terminal.title, number)
+  }
+
+  const label = () => {
+    language.locale()
+    if (props.terminal.title && !isDefaultTitle()) return props.terminal.title
+
+    const number = props.terminal.titleNumber
+    if (Number.isFinite(number) && number > 0) return language.t("terminal.title.numbered", { number })
+    if (props.terminal.title) return props.terminal.title
+    return language.t("terminal.title")
+  }
+
+  const close = () => {
+    const count = terminal.all().length
+    void terminal.close(props.terminal.id)
+    if (count === 1) {
+      props.onClose?.()
+    }
+  }
+
+  const focus = () => {
+    if (store.editing) return
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+    focusTerminalById(props.terminal.id)
+  }
+
+  const edit = (e?: Event) => {
+    if (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    setStore("blurEnabled", false)
+    setStore("title", props.terminal.title)
+    setStore("editing", true)
+  }
+
+  const save = () => {
+    if (!store.blurEnabled) return
+
+    const value = store.title.trim()
+    if (value && value !== props.terminal.title) {
+      terminal.update({ id: props.terminal.id, title: value })
+    }
+    setStore("editing", false)
+  }
+
+  const keydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      save()
+      return
+    }
+    if (e.key === "Escape") {
+      e.preventDefault()
+      setStore("editing", false)
+    }
+  }
+
+  const menu = (e: MouseEvent) => {
+    e.preventDefault()
+    setStore("menuPosition", { x: e.clientX, y: e.clientY })
+    setStore("menuOpen", true)
+  }
+
+  createEffect(() => {
+    if (!store.editing) return
+    if (!input) return
+    input.focus()
+    input.select()
+    if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
+    blurFrame = requestAnimationFrame(() => {
+      blurFrame = undefined
+      setStore("blurEnabled", true)
+    })
+  })
+
+  onCleanup(() => {
+    if (blurFrame === undefined) return
+    cancelAnimationFrame(blurFrame)
+  })
+
+  return (
+    <div
+      use:sortable
+      class="outline-none focus:outline-none focus-visible:outline-none"
+      classList={{
+        "h-full": true,
+        "opacity-0": sortable.isActiveDraggable,
+      }}
+    >
+      <div class="relative h-full">
+        <Tabs.Trigger
+          value={props.terminal.id}
+          onClick={focus}
+          onMouseDown={(e) => e.preventDefault()}
+          onContextMenu={menu}
+          class="!shadow-none"
+          classes={{
+            button: "border-0 outline-none focus:outline-none focus-visible:outline-none !shadow-none !ring-0",
+          }}
+          closeButton={
+            <IconButton
+              icon="close"
+              variant="ghost"
+              onClick={(e) => {
+                e.stopPropagation()
+                close()
+              }}
+              aria-label={language.t("terminal.close")}
+            />
+          }
+        >
+          <span onDblClick={edit} classList={{ invisible: store.editing }}>
+            {label()}
+          </span>
+        </Tabs.Trigger>
+        <Show when={store.editing}>
+          <div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
+            <input
+              ref={input}
+              type="text"
+              value={store.title}
+              onInput={(e) => setStore("title", e.currentTarget.value)}
+              onBlur={save}
+              onKeyDown={keydown}
+              onMouseDown={(e) => e.stopPropagation()}
+              class="bg-transparent border-none outline-none text-sm min-w-0 flex-1"
+            />
+          </div>
+        </Show>
+        <DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              class="fixed"
+              style={{
+                left: `${store.menuPosition.x}px`,
+                top: `${store.menuPosition.y}px`,
+              }}
+              onCloseAutoFocus={(e) => {
+                if (!editRequested) return
+                e.preventDefault()
+                editRequested = false
+                requestAnimationFrame(() => edit())
+              }}
+            >
+              <DropdownMenu.Item onSelect={() => (editRequested = true)}>
+                <Icon name="edit" class="w-4 h-4 mr-2" />
+                {language.t("common.rename")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onSelect={close}>
+                <Icon name="close" class="w-4 h-4 mr-2" />
+                {language.t("common.close")}
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,779 @@
+import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useParams } from "@solidjs/router"
+import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
+import { usePlatform, type DisplayBackend } from "@/context/platform"
+import { useServerSync } from "@/context/server-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useUpdaterAction } from "./updater-action"
+import {
+  monoDefault,
+  monoFontFamily,
+  monoInput,
+  sansDefault,
+  sansFontFamily,
+  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
+  useSettings,
+} from "@/context/settings"
+import { decode64 } from "@/utils/base64"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { Link } from "./link"
+import { SettingsList } from "./settings-list"
+
+let demoSoundState = {
+  cleanup: undefined as (() => void) | undefined,
+  timeout: undefined as NodeJS.Timeout | undefined,
+  run: 0,
+}
+
+type ThemeOption = {
+  id: string
+  name: string
+}
+
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+type ShellSelectOption = {
+  id: string
+  value: string
+  label: string
+}
+
+// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
+// delay the playback by 100ms during quick selection changes and pause existing sounds.
+const stopDemoSound = () => {
+  demoSoundState.run += 1
+  if (demoSoundState.cleanup) {
+    demoSoundState.cleanup()
+  }
+  clearTimeout(demoSoundState.timeout)
+  demoSoundState.cleanup = undefined
+}
+
+const playDemoSound = (id: string | undefined) => {
+  stopDemoSound()
+  if (!id) return
+
+  const run = ++demoSoundState.run
+  demoSoundState.timeout = setTimeout(() => {
+    void playSoundById(id).then((cleanup) => {
+      if (demoSoundState.run !== run) {
+        cleanup?.()
+        return
+      }
+      demoSoundState.cleanup = cleanup
+    })
+  }, 100)
+}
+
+export const SettingsGeneral: Component = () => {
+  const theme = useTheme()
+  const language = useLanguage()
+  const permission = usePermission()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const params = useParams()
+  const settings = useSettings()
+
+  const updater = useUpdaterAction()
+
+  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
+  const dir = createMemo(() => decode64(params.dir))
+  const accepting = createMemo(() => {
+    const value = dir()
+    if (!value) return false
+    if (!params.id) return permission.isAutoAcceptingDirectory(value)
+    return permission.isAutoAccepting(params.id, value)
+  })
+
+  const toggleAccept = (checked: boolean) => {
+    const value = dir()
+    if (!value) return
+
+    if (!params.id) {
+      if (permission.isAutoAcceptingDirectory(value) === checked) return
+      permission.toggleAutoAcceptDirectory(value)
+      return
+    }
+
+    if (checked) {
+      permission.enableAutoAccept(params.id, value)
+      return
+    }
+
+    permission.disableAutoAccept(params.id, value)
+  }
+  const desktop = createMemo(() => platform.platform === "desktop")
+
+  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
+
+  const [shells] = createResource(
+    () =>
+      serverSdk.client.pty
+        .shells()
+        .then((res) => res.data ?? [])
+        .catch(() => [] as ShellOption[]),
+    { initialValue: [] as ShellOption[] },
+  )
+
+  const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
+    () => (linux() && platform.getDisplayBackend ? true : false),
+    () => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
+    { initialValue: null as DisplayBackend | null },
+  )
+
+  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
+    { initialValue: false },
+  )
+
+  onMount(() => {
+    void theme.loadThemes()
+  })
+
+  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 list = shells.latest
+    const current = serverSync.data.config.shell
+
+    const nameCounts = new Map<string, number>()
+    for (const s of list) {
+      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
+    }
+
+    const options = [
+      autoOption,
+      ...list.map((s) => {
+        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
+        const text = ambiguousName ? s.path : s.name
+        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
+        return {
+          id: s.path,
+          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
+          value: ambiguousName ? s.path : s.name,
+          label,
+        }
+      }),
+    ]
+
+    if (current && !options.some((o) => o.value === current)) {
+      options.push({ id: current, value: current, label: current })
+    }
+
+    return options
+  })
+
+  const onDisplayBackendChange = (checked: boolean) => {
+    const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
+    if (!update) return
+    void update.finally(() => {
+      void refetchDisplayBackend()
+    })
+  }
+
+  const onPinchZoomChange = (checked: boolean) => {
+    setPinchZoom(checked)
+    const update = platform.setPinchZoomEnabled?.(checked)
+    if (!update) return
+    void update.catch(() => setPinchZoom(!checked))
+  }
+
+  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
+    { value: "system", label: language.t("theme.scheme.system") },
+    { value: "light", label: language.t("theme.scheme.light") },
+    { value: "dark", label: language.t("theme.scheme.dark") },
+  ])
+
+  const languageOptions = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+
+  const noneSound = { id: "none", label: "sound.option.none" } as const
+  const soundOptions = [noneSound, ...SOUND_OPTIONS]
+  const mono = () => monoInput(settings.appearance.font())
+  const sans = () => sansInput(settings.appearance.uiFont())
+  const terminal = () => terminalInput(settings.appearance.terminalFont())
+
+  const soundSelectProps = (
+    enabled: () => boolean,
+    current: () => string,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    options: soundOptions,
+    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
+    value: (o: (typeof soundOptions)[number]) => o.id,
+    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
+    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      playDemoSound(option.id === "none" ? undefined : option.id)
+    },
+    onSelect: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        stopDemoSound()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      playDemoSound(option.id)
+    },
+    variant: "secondary" as const,
+    size: "small" as const,
+    triggerVariant: "settings" as const,
+  })
+
+  const GeneralSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <Select
+            data-action="settings-language"
+            options={languageOptions()}
+            current={languageOptions().find((o) => o.value === language.locale())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && language.setLocale(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shell.title")}
+          description={language.t("settings.general.row.shell.description")}
+        >
+          <Select
+            data-action="settings-shell"
+            options={shellOptions()}
+            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
+            value={(o) => o.id}
+            label={(o) => o.label}
+            onSelect={(option) => {
+              if (!option) return
+              if (option.value === currentShell()) return
+              serverSync.updateConfig({ shell: option.value })
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "180px" }}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.reasoningSummaries.title")}
+          description={language.t("settings.general.row.reasoningSummaries.description")}
+        >
+          <div data-action="settings-feed-reasoning-summaries">
+            <Switch
+              checked={settings.general.showReasoningSummaries()}
+              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
+          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-shell-tool-parts-expanded">
+            <Switch
+              checked={settings.general.shellToolPartsExpanded()}
+              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.editToolPartsExpanded.title")}
+          description={language.t("settings.general.row.editToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-edit-tool-parts-expanded">
+            <Switch
+              checked={settings.general.editToolPartsExpanded()}
+              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showSessionProgressBar.title")}
+          description={language.t("settings.general.row.showSessionProgressBar.description")}
+        >
+          <div data-action="settings-show-session-progress-bar">
+            <Switch
+              checked={settings.general.showSessionProgressBar()}
+              onChange={(checked) => settings.general.setShowSessionProgressBar(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.newLayoutDesigns.title")}
+          description={language.t("settings.general.row.newLayoutDesigns.description")}
+        >
+          <div data-action="settings-new-layout-designs">
+            <Switch
+              checked={settings.general.newLayoutDesigns()}
+              onChange={(checked) => {
+                settings.general.setNewLayoutDesigns(checked)
+                if (!checked) return
+                void import("@/components/settings-v2").then((module) => {
+                  dialog.show(() => <module.DialogSettings />)
+                })
+              }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AdvancedSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.advanced")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showNavigation.title")}
+          description={language.t("settings.general.row.showNavigation.description")}
+        >
+          <div data-action="settings-show-navigation">
+            <Switch
+              checked={settings.general.showNavigation()}
+              onChange={(checked) => settings.general.setShowNavigation(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AppearanceSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <Select
+            data-action="settings-color-scheme"
+            options={colorSchemeOptions()}
+            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && theme.setColorScheme(option.value)}
+            onHighlight={(option) => {
+              if (!option) return
+              theme.previewColorScheme(option.value)
+              return () => theme.cancelPreview()
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "220px" }}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link href="https://opencode.ai/docs/themes/">{language.t("common.learnMore")}</Link>
+            </>
+          }
+        >
+          <Select
+            data-action="settings-theme"
+            options={themeOptions()}
+            current={themeOptions().find((o) => o.id === theme.themeId())}
+            value={(o) => o.id}
+            label={(o) => o.name}
+            onSelect={(option) => {
+              if (!option) return
+              theme.setTheme(option.id)
+            }}
+            onHighlight={(option) => {
+              if (!option) return
+              theme.previewTheme(option.id)
+              return () => theme.cancelPreview()
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.uiFont.title")}
+          description={language.t("settings.general.row.uiFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-ui-font"
+              label={language.t("settings.general.row.uiFont.title")}
+              hideLabel
+              type="text"
+              value={sans()}
+              onChange={(value) => settings.appearance.setUIFont(value)}
+              placeholder={sansDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.font.title")}
+          description={language.t("settings.general.row.font.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-code-font"
+              label={language.t("settings.general.row.font.title")}
+              hideLabel
+              type="text"
+              value={mono()}
+              onChange={(value) => settings.appearance.setFont(value)}
+              placeholder={monoDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-terminal-font"
+              label={language.t("settings.general.row.terminalFont.title")}
+              hideLabel
+              type="text"
+              value={terminal()}
+              onChange={(value) => settings.appearance.setTerminalFont(value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const NotificationsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+
+        <SettingsRow
+          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>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const SoundsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.sounds.agent.title")}
+          description={language.t("settings.general.sounds.agent.description")}
+        >
+          <Select
+            data-action="settings-sounds-agent"
+            {...soundSelectProps(
+              () => settings.sounds.agentEnabled(),
+              () => settings.sounds.agent(),
+              (value) => settings.sounds.setAgentEnabled(value),
+              (id) => settings.sounds.setAgent(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.permissions.title")}
+          description={language.t("settings.general.sounds.permissions.description")}
+        >
+          <Select
+            data-action="settings-sounds-permissions"
+            {...soundSelectProps(
+              () => settings.sounds.permissionsEnabled(),
+              () => settings.sounds.permissions(),
+              (value) => settings.sounds.setPermissionsEnabled(value),
+              (id) => settings.sounds.setPermissions(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.errors.title")}
+          description={language.t("settings.general.sounds.errors.description")}
+        >
+          <Select
+            data-action="settings-sounds-errors"
+            {...soundSelectProps(
+              () => settings.sounds.errorsEnabled(),
+              () => settings.sounds.errors(),
+              (value) => settings.sounds.setErrorsEnabled(value),
+              (id) => settings.sounds.setErrors(id),
+            )}
+          />
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const UpdatesSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.releaseNotes.title")}
+          description={language.t("settings.general.row.releaseNotes.description")}
+        >
+          <div data-action="settings-release-notes">
+            <Switch
+              checked={settings.general.releaseNotes()}
+              onChange={(checked) => settings.general.setReleaseNotes(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.updates.row.check.title")}
+          description={language.t("settings.updates.row.check.description")}
+        >
+          <Button size="small" variant="secondary" disabled={!updater.action().run} onClick={updater.run}>
+            {language.t(updater.action().label)}
+          </Button>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const DisplaySection = () => (
+    <Show when={desktop()}>
+      <div class="flex flex-col gap-1">
+        <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
+
+        <SettingsList>
+          <SettingsRow
+            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>
+          </SettingsRow>
+
+          <Show when={linux()}>
+            <SettingsRow
+              title={
+                <div class="flex items-center gap-2">
+                  <span>{language.t("settings.general.row.wayland.title")}</span>
+                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
+                    <span class="text-text-weak">
+                      <Icon name="help" size="small" />
+                    </span>
+                  </Tooltip>
+                </div>
+              }
+              description={language.t("settings.general.row.wayland.description")}
+            >
+              <div data-action="settings-wayland">
+                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
+              </div>
+            </SettingsRow>
+          </Show>
+        </SettingsList>
+      </div>
+    </Show>
+  )
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-1 pt-6 pb-8">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 w-full">
+        <GeneralSection />
+
+        <AppearanceSection />
+
+        <NotificationsSection />
+
+        <SoundsSection />
+
+        <UpdatesSection />
+
+        <DisplaySection />
+
+        <Show when={desktop()}>
+          <AdvancedSection />
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string | JSX.Element
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex flex-wrap items-center gap-4 py-3 border-b border-border-weak-base last:border-none sm:flex-nowrap">
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex w-full justify-end sm:w-auto sm:shrink-0">{props.children}</div>
+    </div>
+  )
+}