Merge remote-tracking branch 'origin/dev' into httpapi-codegen

Co-authored-by: Test <test@opencode.test>

.github/ISSUE_TEMPLATE/config.yml

@@ -2,4 +2,4 @@ blank_issues_enabled: false
 contact_links:
   - name: 💬 Discord Community
     url: https://discord.gg/opencode
-    about: For quick questions or real-time discussion. Note that issues are searchable and help others with the same question.
+    about: For support, troubleshooting, how-to questions, and real-time discussion.

.github/ISSUE_TEMPLATE/question.yml

@@ -1,10 +0,0 @@
-name: Question
-description: Ask a question
-body:
-  - type: textarea
-    id: question
-    attributes:
-      label: Question
-      description: What's your question?
-    validations:
-      required: true

.github/workflows/test.yml

@@ -65,10 +65,15 @@ jobs:
 
       - name: Run unit tests
         timeout-minutes: 20
-        run: bun turbo test --output-logs=errors-only --log-order=grouped --log-prefix=task
+        run: GITHUB_ACTIONS=false bun turbo test
         env:
           OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: ${{ runner.os == 'Windows' && 'true' || 'false' }}
 
+      - name: Check generated client
+        if: runner.os == 'Linux'
+        working-directory: packages/client
+        run: bun run check:generated
+
       - name: Run HttpApi exerciser gates
         if: runner.os == 'Linux'
         working-directory: packages/opencode
@@ -99,7 +104,8 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: "24"
+          # Playwright 1.59 hangs while extracting Chromium with Node 24.16.
+          node-version: "24.15"
 
       - name: Setup Bun
         uses: ./.github/actions/setup-bun

AGENTS.md

@@ -137,7 +137,7 @@ const table = sqliteTable("session", {
 
 ## Testing
 
-- Avoid mocks as much as possible
+- Avoid mocks as much as possible, you shouldn't be using globalThis.\* at all unless it's the only option.
 - Test actual implementation, do not duplicate logic into tests
 - Tests cannot run from repo root (guard: `do-not-run-tests-from-root`); run from package dirs like `packages/opencode`.
 
@@ -152,7 +152,7 @@ const table = sqliteTable("session", {
 - Keep `SessionExecution` process-global and Session-ID based. Its local implementation owns the process-local Session coordinator and discovers placement through `SessionStore` plus `LocationServiceMap.get(session.location)` only when a drain starts; no layer should take a Session ID. V2 interruption targets the active process-local ownership chain for that Session; idle or missing interruption is a no-op.
 - Keep `SessionRunner`, model resolution, tool registry, permissions, and filesystem Location-scoped. Omitted `Location.workspaceID` means implicit-local placement; explicit workspace identity remains reserved for future placement semantics.
 - Preserve one explicit `llm.stream(request)` call per provider turn and reload projected history before durable continuation. Do not bridge through legacy `SessionPrompt.loop(...)` or delegate orchestration to an in-memory tool loop.
-- Keep local Session drains process-local until clustering is implemented. `SessionRunCoordinator` joins explicit same-Session resumes, coalesces prompt wakeups, and allows different Sessions to run concurrently. Advisory wakes drain eligible durable inbox rows only; post-crash activity recovery requires a separate explicit design before it may retry provider work.
-- Keep delivery vocabulary explicit. Prompts steer by default and coalesce into the active activity at the next safe provider-turn boundary. Explicit `queue` inputs open FIFO future activities one at a time after the active activity settles.
+- Keep local Session drains process-local until clustering is implemented. `SessionRunCoordinator` joins explicit same-Session resumes, coalesces prompt wakeups, and allows different Sessions to run concurrently. Advisory wakes drain eligible durable inbox rows only; post-crash continuation recovery requires a separate explicit design before it may retry provider work. A drain has no durable identity or transcript boundary.
+- Keep delivery vocabulary explicit. Prompts steer by default and promote at the next safe provider-turn boundary while the current drain requires continuation. An explicit `queue` input remains pending until the Session would otherwise become idle; promote one queued input at that boundary, then reevaluate continuation before promoting another. Promoting any new user input resets the selected agent's provider-turn allowance; a batch of steers resets it once.
 - Keep EventV2 replay owner claims separate from clustered Session execution ownership.
 - Keep the System Context algebra, registry, and built-ins in `src/system-context`; keep Context Source producers with their observed domains, and keep Session History selection plus Context Epoch persistence Session-owned.

CONTEXT.md

@@ -24,7 +24,7 @@ A durable chronological instruction that tells the model the newly effective sta
 _Avoid_: System update, system notification, raw text diff
 
 **Context Epoch**:
-The span during which one effective agent's initially rendered **System Context** remains immutable, ending at compaction or another baseline-replacing transition.
+The span during which one initially rendered **System Context** remains the immutable provider-cache baseline, ending at completed compaction, Session movement, or an incompatible context transition that requires a fresh baseline.
 
 **Baseline System Context**:
 The full **System Context** rendered at the start of a **Context Epoch**.
@@ -39,6 +39,18 @@ An expected temporary inability to observe a **Context Source** value; the runti
 **Safe Provider-Turn Boundary**:
 The point immediately before a provider call, after durable input promotion and any required tool settlement, where context changes may be admitted chronologically.
 
+**Admitted Prompt**:
+A durable user input accepted into the Session inbox but not yet included in **Session History**.
+
+**Prompt Promotion**:
+The durable transition that removes an **Admitted Prompt** from pending input and appends its user message to **Session History**.
+
+**Provider Turn**:
+One request to a model provider and the response projected from that request.
+
+**Session Drain**:
+One process-local execution span that promotes eligible input and runs required **Provider Turns** until no immediate continuation remains. A Session Drain has no durable identity or transcript boundary.
+
 **Model Tool Output**:
 The bounded projection of a Core-executed tool result persisted in Session history and replayed to the model. A tool may shape this projection semantically, but the Tool Registry enforces the final size limit.
 
@@ -55,6 +67,21 @@ Provider-neutral sampling and output controls, partitioned from provider semanti
 **PTY Environment**:
 The host-supplied environment overlay applied by the server when creating a PTY, observed for the request Location and resolved PTY working directory.
 
+**OpenCode Client**:
+The generated Effect API shared by networked and in-process consumers, executed through an `HttpClient` against the same `HttpApi` router and handlers.
+_Avoid_: Remote client
+
+**SDK Contract IR**:
+The runtime-neutral compiled representation of the authoritative `HttpApi`, preserving encoded and decoded type projections plus transport metadata so independent SDK emitters can choose their public value model and runtime interpreter.
+
+**Embedded OpenCode**:
+A scoped in-process host that structurally extends the **OpenCode Client**, supplies an in-memory HTTP transport, and exposes additional same-process capabilities directly.
+_Avoid_: Local implementation
+
+**Page**:
+A bounded ordered result containing `items` and opaque `previous` and `next` cursor links for navigating the same query in either direction.
+_Avoid_: Response envelope
+
 ## Relationships
 
 - A **System Context** is an opaque carrier composed from zero or more **Context Sources**.
@@ -67,6 +94,11 @@ The host-supplied environment overlay applied by the server when creating a PTY,
 - Changes from multiple **Context Sources** admitted at one safe boundary combine into one **Mid-Conversation System Message**.
 - Context changes are sampled and admitted lazily at a **Safe Provider-Turn Boundary**, never pushed asynchronously when their source changes.
 - At a **Safe Provider-Turn Boundary**, newly promoted user input or settled tool results precede any combined **Mid-Conversation System Message**.
+- An **Admitted Prompt** is replayable pending input, not yet model-visible **Session History**.
+- **Prompt Promotion** atomically consumes the pending inbox entry and appends its model-visible user message.
+- Steering prompts promote at the next **Safe Provider-Turn Boundary** while the current **Session Drain** still requires continuation. Promoting any newly admitted user input resets the selected agent's provider-turn allowance; multiple prompts promoted at one boundary reset it once.
+- A queued prompt does not promote while the current **Session Drain** requires continuation. The runner promotes one queued prompt when the Session would otherwise become idle, then reevaluates continuation before promoting another.
+- A **Session Drain** is process-local coordination rather than a durable domain entity. Durable recovery must reason from prompts, projected history, provider attempts, and tool state rather than inventing an enclosing execution identity.
 - The first provider turn renders the latest complete **Baseline System Context** and initializes its **Context Snapshot** without emitting a redundant **Mid-Conversation System Message**; unavailable initial context blocks the turn instead of persisting an incomplete baseline.
 - Initial **System Context** preparation precedes the first durable input promotion so an unavailable baseline leaves that input pending and retryable; ordinary reconciliation remains after promotion.
 - Compaction starts a new **Context Epoch** with a freshly rendered **Baseline System Context** and **Context Snapshot**; prior **Mid-Conversation System Messages** remain durable audit history but leave projected model history.
@@ -75,34 +107,76 @@ The host-supplied environment overlay applied by the server when creating a PTY,
 - Each **Context Source** loader returns one coherent typed value. `SystemContext.make(...)` hides that value type so differently typed sources compose uniformly. Its codec compares and stores that value; its pure renderers produce model-visible baseline, update, and removal text only when needed.
 - `SystemContext.initialize(...)` observes a composed **System Context** once and produces a fresh **Baseline System Context** with its **Context Snapshot**.
 - `SystemContext.reconcile(...)` observes a composed **System Context** once and returns exactly one next action: unchanged, updated, replacement ready, or replacement blocked.
-- `SystemContext.replace(...)` represents an explicit baseline-replacing transition such as compaction or model/provider switch; it either produces a fresh generation or reports that replacement is blocked by unavailable admitted context.
-- Context Epoch preparation retries until stable after optimistic revision mismatches so concurrent replacement requests cannot terminate an otherwise valid safe-boundary run.
+- `SystemContext.replace(...)` renders a fresh generation after completed compaction or another baseline-replacing transition; it reports replacement blocked while previously admitted context is unavailable.
 - **Unavailable Context** uses stale-while-revalidate semantics and is distinct from a successfully loaded absence, which may emit removal text.
 - Ordinary **Context Source** loaders return values directly; loaders that intentionally use stale-while-revalidate may explicitly return **Unavailable Context**.
 - Nested project instruction discovery after successful reads remains a follow-up; when implemented, discovered instructions must be admitted durably at the next **Safe Provider-Turn Boundary**.
 - Location-scoped services naturally re-resolve effective context when a moved session next runs in its destination location.
 - Moving a Session clears its active **Context Epoch**, so the destination must initialize a complete baseline before another prompt can promote.
-- Context Epoch initialization is fenced against the authoritative Session Location, so an old-Location runner cannot recreate source context after a concurrent move.
 - Instruction discovery, source identity, persistence, and file loading belong to the instruction service; the **System Context** abstraction only composes effectful producers and renders loaded values.
 - The first instruction-service slice observes global and upward project `AGENTS.md` files as one ordered aggregate **Context Source** at each **Safe Provider-Turn Boundary**.
 - Built-in and instruction context producers register through the **System Context Registry** with stable contribution keys. Plugin-defined context registration and hot-reload lifecycle remain a follow-up built on the same scoped registry seam.
 - Selected-agent available-skill guidance is a **Context Source** composed with Location-wide registry sources immediately before Context Epoch admission. It lists only names and descriptions permitted for that agent; skill bodies and locations are exposed only through the permission-checked `skill` tool.
-- Switching the selected agent requests **Context Epoch** replacement. A switch admitted after the current **Safe Provider-Turn Boundary** applies to the next provider turn while leaving the already-prepared baseline durable. Epoch creation is fenced against the authoritative effective agent, and retries re-observe the current agent.
-- A cross-agent replacement must complete before another provider turn; unavailable admitted context blocks that replacement instead of exposing the previous agent's privileged baseline.
+- The selected agent and model are sampled when a provider turn starts. Changes admitted after that boundary apply to the next provider turn and do not restart the current turn.
+- Selected-agent available-skill guidance remains a **Context Source**. An agent switch that changes that guidance produces a **Mid-Conversation System Message** while preserving the current baseline.
 - Local tool authorization and pending permission requests retain the effective agent of the provider turn that issued the call; a later agent switch cannot change that call's policy.
 - Context source changes never wake idle sessions; the next naturally scheduled **Safe Provider-Turn Boundary** loads and compares current values lazily.
 - Once admitted, a **Mid-Conversation System Message** remains durable even if the following provider attempt fails and is replayed unchanged on retry.
 - **Mid-Conversation System Messages** remain durable Session-message history; normal user-facing transcript surfaces may hide them.
 - The date **Context Source** initially preserves host-local calendar-date behavior; a configured user timezone may replace that default later.
 - A **Context Epoch** begins with one immutable **Baseline System Context**.
-- A **Context Epoch** durably records the effective agent that owns its **Baseline System Context**.
 - A **Baseline System Context** is stored durably and reused verbatim across process restarts within its **Context Epoch**.
 - A **Baseline System Context** durably preserves the exact joined text used for the active provider-cache prefix.
-- Compaction or a model/provider switch starts a new **Context Epoch** because the baseline can be replaced without preserving the prior provider cache.
-- A model/provider switch always starts a new **Context Epoch** while preserving chronological conversation history.
+- Completed compaction starts a new **Context Epoch** on the next provider attempt, folding the current complete **System Context** into a fresh baseline and removing earlier **Mid-Conversation System Messages** from active model history.
+- A model/provider switch preserves the current **Context Epoch** and chronological conversation history; the new selection applies to the next provider turn.
 - **Model Request Options** remain provider-semantic through Catalog resolution. The Session runner maps them into the LLM package's provider-option namespace; the selected protocol adapter alone owns provider wire encoding.
 - **Generation Controls**, protocol-semantic **Model Request Options**, and compatibility request body fields are separate Catalog domains. A shared ingestion adapter partitions legacy and models.dev AI-SDK-shaped options before routing.
 - The **PTY Environment** is a server concern rather than a Core PTY concern. PTY creation merges caller values, then the host overlay, then Core-forced terminal invariants such as `TERM` and `OPENCODE_TERMINAL`.
+- Networked and **Embedded OpenCode** use the same **OpenCode Client** and preserve the full HTTP encoding, routing, middleware, and decoding boundary; only the `HttpClient` transport differs.
+- The Effect-native network constructor obtains `HttpClient.HttpClient` from its environment so callers own transport selection, recording, tracing, retries, and tests. Convenience runtimes may provide a fetch transport separately.
+- Creating **Embedded OpenCode** is scoped. Closing its owning Scope releases the in-process server resources, database resources, registrations, and fibers.
+- **Embedded OpenCode** exposes shared client capabilities and embedded-only capabilities on one object; consumers do not navigate through a nested `.client` property.
+- The beta **OpenCode Client** currently uses plural consumer-facing capability groups such as `sessions`; whether the stable Session namespace should instead be singular `session` must be settled before stabilization. Internal server identifiers do not implicitly define public client names.
+- The public `HttpApi` is authoritative for shared **OpenCode Client** capabilities: the server and code generation consume the same hosted `SessionGroup`. Codegen may assign a separate consumer-facing group name without reconstructing group membership or endpoint contracts.
+- SDK generation reflects the public `HttpApi` once into an **SDK Contract IR**. Promise and Effect emitters share endpoint structure and transport metadata without being required to expose identical public values: an emitter may select encoded wire types, decoded domain types, compile-time brands, runtime validation, and its own execution abstraction independently.
+- The first Effect emitter is the rich projection: it exposes decoded Effect-native values, preserves brands and schema transformations, performs runtime schema decoding, and delegates transport interpretation to `HttpApiClient`. Lighter wire-shaped Effect output remains possible through another emitter policy rather than constraining the shared IR.
+- The rich Effect emitter regenerates private executable schemas when the **SDK Contract IR** proves that their transport semantics can be reproduced exactly. Contracts with authoritative custom transformations use the import-based Effect emitter against the canonical Protocol `HttpApi`; the Promise emitter still derives zero-Effect structural wire types from the same IR.
+- `@opencode-ai/protocol` owns the authoritative Session `HttpApi`. The server and client generator consume the exact hosted `SessionGroup`, including `compact`, `wait`, and `context`.
+- The first Promise emitter targets the same clean domain-oriented method organization rather than Hey API source compatibility. It returns unwrapped values directly, rejects declared and infrastructure failures, and begins with minimal client-level transport configuration; result wrappers, interceptors, and legacy generated signatures are outside the initial surface.
+- The first Promise emitter parses response syntax and trusts its generated structural types; it does not perform runtime structural validation. Malformed payload syntax fails, while a syntactically valid shape mismatch is not detected at the SDK boundary. Standalone validator generation remains an optional future emitter policy.
+- Declared Promise-client failures retain their tagged structural wire values and have generated type guards. Consumers do not depend on generated `Error` subclass identity, preserving discrimination across package copies and realms while remaining structurally aligned with Effect domain errors.
+- Promise-client infrastructure failures use one generated `ClientError` class with a structured reason such as transport failure, unexpected status, unsupported content type, or malformed response. Promise methods reject with either a tagged declared domain failure or `ClientError`, matching the Effect client's conceptual domain/infrastructure error division.
+- Promise methods accept a separate optional per-call transport-options argument containing `AbortSignal` and header overrides. Cancellation and transport metadata do not enter the domain input object; broader interceptor and response-mode APIs remain deferred.
+- Promise streaming methods return a lazy `AsyncIterable` directly rather than a Promise-wrapped stream object. Iteration opens the connection, `AbortSignal` cancels it, and ending iteration closes the underlying request; the Effect emitter analogously returns `Stream` directly.
+- Promise SSE connection establishment, declared HTTP failures, and infrastructure failures occur during `AsyncIterable` iteration, beginning with its first `next()` call, rather than during synchronous method construction.
+- Neither generated streaming runtime automatically reconnects after disconnection. Promise `AsyncIterable` and Effect `Stream` fail explicitly; live consumers refresh and resubscribe, while durable sequence-based resume remains explicit composition above the generated client.
+- Promise client construction is synchronous and network-free. It requires `baseUrl`, defaults to `globalThis.fetch`, accepts client-level headers, and merges them with per-call header overrides.
+- Effect client construction accepts an explicit `baseUrl` and obtains `HttpClient.HttpClient` from the Effect environment. It does not install fetch or duplicate per-call transport policy; callers transform/provide the client for headers, tracing, retries, recording, and tests, while fiber interruption owns cancellation.
+- Promise and Effect emitters each own their generated public type modules. The **SDK Contract IR**, not a physically shared generated type package, is the common source; this permits zero-Effect wire types and rich decoded Effect types to evolve independently.
+- Promise and Effect network clients ship from `@opencode-ai/client` behind isolated root and `/effect` exports. The root has no runtime path to Effect; `/effect` imports only Effect, Schema, and Protocol.
+- The Effect-native scoped host belongs to `@opencode-ai/sdk-next`, which will assume the existing `@opencode-ai/sdk` name after legacy consumers migrate. Client remains network-only and SDK depends one-way on Client.
+- SDK executes Server's assembled `HttpRouter` in memory. It opens no listener and performs no network I/O, while preserving Server routing, middleware, codecs, handlers, and errors.
+- The Effect Client and SDK re-export their decoded datatype facade from Schema so callers do not depend on internal package locations or Core's versioned names.
+- A capability intended for both networked and **Embedded OpenCode** belongs in the authoritative public `HttpApi`; embedded-only same-process capabilities extend **Embedded OpenCode** separately.
+- `sessions.events({ sessionID, after })` is a public durable Session event stream. It verifies the Session, replays durable events after the optional aggregate sequence, continues with newly committed durable events, excludes live-only fragments, and is transported as SSE in both networked and embedded modes.
+- `events.subscribe()` is a distinct public instance-wide live stream for Session and non-Session activity. It has no replay guarantee and includes connection, heartbeat, and instance-disposal lifecycle events; consumers recover from disconnection by refreshing authoritative state.
+- A Session ID is not an optional filter on `events.subscribe()`: instance-wide live events and durable Session events have different schemas, replay guarantees, cursors, lifecycle events, and failure behavior.
+- The initial common OpenCode Client does not expose server-global event aggregation. `events.subscribe()` is bounded to the connected OpenCode instance or workspace; any future cross-instance administrative stream requires a separately designed API.
+- `events.subscribe()` does not automatically reconnect after transport loss. The live-only stream fails with `ClientError`; consumers refresh authoritative state before explicitly opening a new subscription because events missed during disconnection cannot be replayed.
+- `sessions.events({ sessionID, after })` returns the generated HTTP client's cold durable event stream and does not build reconnection policy into the endpoint or client constructor. Transport loss fails the stream with `ClientError`. Callers may compose an explicit resuming stream above it by retaining the last observed durable sequence and opening a new subscription with `after`; any reusable resume helper remains a separate API design question.
+- The stable `sessions.list(...)` design returns a **Page** in both networked and **Embedded OpenCode**; embedded execution does not define a separate unbounded array-returning list operation. The beta client currently preserves the existing HTTP `{ data, cursor }` envelope until emitter-level Page projection is implemented.
+- Session list cursors are opaque branded values carrying continuation query and ordering state. Consumers pass them back unchanged and do not inspect storage anchors or encoded filter fields.
+- A Session list continuation accepts only its opaque cursor. Scope, filters, ordering, and page size are fixed by the initial query and carried by that cursor.
+- `sessions.messages(...)` returns a **Page** and uses the same cursor discipline as `sessions.list(...)`: the initial request supplies `sessionID`, ordering, and page size; continuation supplies `sessionID` plus only an opaque branded message cursor carrying ordering, page size, direction, and message anchor. Using a cursor with another Session is invalid.
+- `sessions.message({ sessionID, messageID })` is a required resource lookup. An unknown Session fails with `SessionNotFoundError`; a known Session with an absent or differently owned message fails with `SessionMessageNotFoundError` without disclosing cross-Session ownership. Absence is not represented as `undefined` across the public HTTP boundary.
+- `sessions.interrupt({ sessionID })` first verifies that the durable Session exists, failing with `SessionNotFoundError` otherwise. For a known Session, interruption is idempotent: idle, already-settled, or locally unowned execution is a no-op.
+- `sessions.context({ sessionID })` preserves the existing message-only operation. It returns projected conversational messages selected as Session context; it does not include or represent the complete provider request context, whose baseline system context and other contributions remain separate.
+- **Open question**: Should a future, separately named operation expose the complete provider request context, including baseline system context, selected source contributions, and context-epoch metadata?
+- `sessions.prompt(...)` exposes `resume?: boolean`. Omitting it preserves durable admission followed by an advisory execution wake; `resume: false` requests durable admit-only behavior.
+- The public operation remains `sessions.prompt(...)`; `SessionInput.admit` is the internal primitive, while the public `Admission` result and `resume` option express its durable admission semantics.
+- `sessions.create(...)` accepts an optional `location`. Omission resolves through the connected OpenCode instance's default or current location; an explicit value selects a known location. Networked and embedded transports use the same handler semantics.
+- `sessions.switchAgent({ sessionID, agent })` is part of the common client alongside `sessions.switchModel(...)`. It affects subsequent Session activity and fails with `SessionNotFoundError` for an unknown Session.
+- The **Embedded OpenCode** Layer delegates to the same scoped creation path; it does not define a second implementation.
 - A **PTY Environment** adapter observes plugins in the request Location while passing the resolved PTY working directory to the hook; standalone servers use an empty adapter.
 - A **Mid-Conversation System Message** lowers to the provider's native chronological instruction role when supported and to a wrapped chronological fallback otherwise.
 - When the effective aggregate instruction set changes, its **Mid-Conversation System Message** includes the complete current ordered set and supersedes the prior aggregate value; when no ambient instructions remain, the message states that previously loaded instructions no longer apply.
@@ -119,6 +193,23 @@ The host-supplied environment overlay applied by the server when creating a PTY,
 - **Managed Tool Output Files** use globally unique names in one shared flat directory. Their absolute paths are readable and searchable by ordinary tools; other absolute paths remain outside Location-scoped filesystem authority.
 - Provider-executed tool results remain provider-native transcript facts outside generic Tool Registry bounding. Their context control requires provider-aware pruning or compaction because some providers require exact structured round-trip payloads.
 
+## Client contract architecture
+
+Semantic values that mean the same thing internally and publicly live in the lightweight Schema leaf. Core consumes Schema for domain behavior; Protocol composes Schema values into paths, payloads, envelopes, errors, cursors, and streams; Server imports both, hosts Protocol's exact groups, and owns protocol/domain adaptation. The root Promise client remains zero-Effect, `/effect` depends on Effect plus Schema and Protocol, and `@opencode-ai/sdk-next` composes the scoped in-process host above Client, Core, and Server.
+
+Shared public records are plain objects declared with `Schema.Struct`. A same-name inferred interface gives object records readable TypeScript signatures without constructors, prototypes, or nominal identity; unions retain explicit type aliases.
+
+Before stabilizing the client API:
+
+- Keep additional public schemas in Schema and additional network groups in Protocol; neither package may transitively load databases, Drizzle, Session execution, providers, watchers, native modules, or WASM.
+- Replace the transitional server-internal Session location middleware tag when the remaining location-scoped groups move to Protocol or gain a narrow request-location service contract.
+- Project the existing list response envelope to the stable client **Page** shape and enforce separate initial-query and cursor-continuation inputs without changing the hosted V2 wire contract.
+- Settle the stable consumer namespace (`session` versus the current beta `sessions`) and use an explicit codegen annotation if the consumer name should differ from the server group identifier.
+- Preserve V2 route paths, operation IDs, codecs, errors, middleware behavior, and OpenAPI output while making this change.
+- Preserve browser-safe `@opencode-ai/client` and `@opencode-ai/client/effect` bundles through import-boundary tests.
+- Define embedded-host placement before supporting multiple hosts over one database. Hosts that share durable Session storage must also share process-local Session execution coordination, or each host must receive isolated storage explicitly.
+- Keep an embedded request scope alive until any streamed response body finishes. The initial non-streaming Session surface does not exercise this lifetime boundary; Session and instance event streams must do so before joining the embedded client.
+
 ## Example dialogue
 
 > **Dev:** "The date changed while the session was active. Should the **Mid-Conversation System Message** say what the old date was?"

bun.lock

@@ -29,7 +29,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/core": "workspace:*",
@@ -86,7 +86,7 @@
     },
     "packages/cli": {
       "name": "@opencode-ai/cli",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "bin": {
         "lildax": "./bin/lildax.cjs",
       },
@@ -109,9 +109,30 @@
         "@typescript/native-preview": "catalog:",
       },
     },
+    "packages/client": {
+      "name": "@opencode-ai/client",
+      "dependencies": {
+        "@opencode-ai/protocol": "workspace:*",
+        "@opencode-ai/schema": "workspace:*",
+      },
+      "devDependencies": {
+        "@effect/platform-node": "catalog:",
+        "@opencode-ai/httpapi-codegen": "workspace:*",
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+        "effect": "catalog:",
+      },
+      "peerDependencies": {
+        "effect": "4.0.0-beta.83",
+      },
+      "optionalPeers": [
+        "effect",
+      ],
+    },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -147,7 +168,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -174,7 +195,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@ai-sdk/anthropic": "3.0.82",
         "@ai-sdk/openai": "3.0.48",
@@ -196,7 +217,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -220,7 +241,7 @@
     },
     "packages/console/support": {
       "name": "@opencode-ai/console-support",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@opencode-ai/console-core": "workspace:*",
@@ -240,7 +261,7 @@
     },
     "packages/core": {
       "name": "@opencode-ai/core",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -276,6 +297,8 @@
         "@opencode-ai/effect-drizzle-sqlite": "workspace:*",
         "@opencode-ai/effect-sqlite-node": "workspace:*",
         "@opencode-ai/llm": "workspace:*",
+        "@opencode-ai/plugin": "workspace:*",
+        "@opencode-ai/schema": "workspace:*",
         "@openrouter/ai-sdk-provider": "2.9.0",
         "@opentelemetry/api": "1.9.0",
         "@opentelemetry/context-async-hooks": "2.6.1",
@@ -331,7 +354,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@zip.js/zip.js": "2.7.62",
         "effect": "catalog:",
@@ -385,7 +408,7 @@
     },
     "packages/effect-drizzle-sqlite": {
       "name": "@opencode-ai/effect-drizzle-sqlite",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
@@ -399,7 +422,7 @@
     },
     "packages/effect-sqlite-node": {
       "name": "@opencode-ai/effect-sqlite-node",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "effect": "catalog:",
       },
@@ -411,7 +434,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@hono/standard-validator": "catalog:",
         "@opencode-ai/core": "workspace:*",
@@ -442,7 +465,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -458,10 +481,10 @@
     },
     "packages/http-recorder": {
       "name": "@opencode-ai/http-recorder",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
-        "@effect/platform-node": "4.0.0-beta.74",
-        "@effect/platform-node-shared": "4.0.0-beta.74",
+        "@effect/platform-node": "4.0.0-beta.83",
+        "@effect/platform-node-shared": "4.0.0-beta.83",
       },
       "devDependencies": {
         "@tsconfig/node22": "catalog:",
@@ -472,12 +495,24 @@
         "typescript": "catalog:",
       },
       "peerDependencies": {
-        "effect": "4.0.0-beta.74",
+        "effect": "4.0.0-beta.83",
+      },
+    },
+    "packages/httpapi-codegen": {
+      "name": "@opencode-ai/httpapi-codegen",
+      "dependencies": {
+        "effect": "catalog:",
+        "prettier": "3.6.2",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
       },
     },
     "packages/llm": {
       "name": "@opencode-ai/llm",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@smithy/eventstream-codec": "4.2.14",
         "@smithy/util-utf8": "4.2.2",
@@ -495,7 +530,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -623,8 +658,9 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
+        "@ai-sdk/provider": "3.0.8",
         "@opencode-ai/sdk": "workspace:*",
         "effect": "catalog:",
         "zod": "catalog:",
@@ -649,6 +685,30 @@
         "@opentui/solid",
       ],
     },
+    "packages/protocol": {
+      "name": "@opencode-ai/protocol",
+      "dependencies": {
+        "@opencode-ai/schema": "workspace:*",
+        "effect": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+      },
+    },
+    "packages/schema": {
+      "name": "@opencode-ai/schema",
+      "dependencies": {
+        "@noble/hashes": "catalog:",
+        "effect": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+      },
+    },
     "packages/script": {
       "name": "@opencode-ai/script",
       "dependencies": {
@@ -659,9 +719,23 @@
         "@types/semver": "^7.5.8",
       },
     },
+    "packages/sdk-next": {
+      "name": "@opencode-ai/sdk-next",
+      "dependencies": {
+        "@opencode-ai/client": "workspace:*",
+        "@opencode-ai/core": "workspace:*",
+        "@opencode-ai/server": "workspace:*",
+        "effect": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+      },
+    },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "cross-spawn": "catalog:",
       },
@@ -676,9 +750,10 @@
     },
     "packages/server": {
       "name": "@opencode-ai/server",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@opencode-ai/core": "workspace:*",
+        "@opencode-ai/protocol": "workspace:*",
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
       },
@@ -690,7 +765,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -703,7 +778,7 @@
     },
     "packages/stats/app": {
       "name": "@opencode-ai/stats-app",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@ibm/plex": "6.4.1",
         "@opencode-ai/stats-core": "workspace:*",
@@ -736,7 +811,7 @@
     },
     "packages/stats/core": {
       "name": "@opencode-ai/stats-core",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@aws-sdk/client-athena": "3.933.0",
         "@planetscale/database": "1.19.0",
@@ -755,7 +830,7 @@
     },
     "packages/stats/server": {
       "name": "@opencode-ai/stats-server",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@aws-sdk/client-firehose": "3.933.0",
         "@effect/platform-node": "catalog:",
@@ -795,7 +870,7 @@
     },
     "packages/tui": {
       "name": "@opencode-ai/tui",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@opencode-ai/core": "workspace:*",
         "@opencode-ai/plugin": "workspace:*",
@@ -822,7 +897,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/core": "workspace:*",
@@ -871,7 +946,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.17.8",
+      "version": "1.17.9",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -935,13 +1010,14 @@
   },
   "catalog": {
     "@cloudflare/workers-types": "4.20251008.0",
-    "@effect/opentelemetry": "4.0.0-beta.74",
-    "@effect/platform-node": "4.0.0-beta.74",
-    "@effect/sql-sqlite-bun": "4.0.0-beta.74",
+    "@effect/opentelemetry": "4.0.0-beta.83",
+    "@effect/platform-node": "4.0.0-beta.83",
+    "@effect/sql-sqlite-bun": "4.0.0-beta.83",
     "@hono/standard-validator": "0.2.0",
     "@hono/zod-validator": "0.4.2",
     "@kobalte/core": "0.13.11",
     "@lydell/node-pty": "1.2.0-beta.12",
+    "@noble/hashes": "2.2.0",
     "@npmcli/arborist": "9.4.0",
     "@octokit/rest": "22.0.0",
     "@openauthjs/openauth": "0.0.0-20250322224806",
@@ -973,7 +1049,7 @@
     "dompurify": "3.3.1",
     "drizzle-kit": "1.0.0-rc.2",
     "drizzle-orm": "1.0.0-rc.2",
-    "effect": "4.0.0-beta.74",
+    "effect": "4.0.0-beta.83",
     "fuzzysort": "3.1.0",
     "hono": "4.10.7",
     "hono-openapi": "1.1.2",
@@ -1328,13 +1404,13 @@
 
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.11.0", "", {}, "sha512-hD3pekGiPg0WPCCGAZmusBBJsDqGUR66Y452YgQsZOnkdQ7ViEPKuyP4huUGEZQefp8g34RRodXYmJ2TbCH+tg=="],
 
-    "@effect/opentelemetry": ["@effect/opentelemetry@4.0.0-beta.74", "", { "peerDependencies": { "@opentelemetry/api": "^1.9", "@opentelemetry/api-logs": ">=0.203.0 <0.300.0", "@opentelemetry/resources": "^2.0.0", "@opentelemetry/sdk-logs": ">=0.203.0 <0.300.0", "@opentelemetry/sdk-metrics": "^2.0.0", "@opentelemetry/sdk-trace-base": "^2.0.0", "@opentelemetry/sdk-trace-node": "^2.0.0", "@opentelemetry/sdk-trace-web": "^2.0.0", "@opentelemetry/semantic-conventions": "^1.33.0", "effect": "^4.0.0-beta.74" }, "optionalPeers": ["@opentelemetry/api", "@opentelemetry/api-logs", "@opentelemetry/resources", "@opentelemetry/sdk-logs", "@opentelemetry/sdk-metrics", "@opentelemetry/sdk-trace-base", "@opentelemetry/sdk-trace-node", "@opentelemetry/sdk-trace-web"] }, "sha512-flpyqLPyr+THSe6ZCGRZl6hi+FqxbIXNSkslKGiRJAjbPabam9mSp7R3aC8biIMt6xE4Fd0LNfo4p2GplUkm2Q=="],
+    "@effect/opentelemetry": ["@effect/opentelemetry@4.0.0-beta.83", "", { "peerDependencies": { "@opentelemetry/api": "^1.9", "@opentelemetry/api-logs": ">=0.203.0 <0.300.0", "@opentelemetry/resources": "^2.0.0", "@opentelemetry/sdk-logs": ">=0.203.0 <0.300.0", "@opentelemetry/sdk-metrics": "^2.0.0", "@opentelemetry/sdk-trace-base": "^2.0.0", "@opentelemetry/sdk-trace-node": "^2.0.0", "@opentelemetry/sdk-trace-web": "^2.0.0", "@opentelemetry/semantic-conventions": "^1.33.0", "effect": "^4.0.0-beta.83" }, "optionalPeers": ["@opentelemetry/api", "@opentelemetry/api-logs", "@opentelemetry/resources", "@opentelemetry/sdk-logs", "@opentelemetry/sdk-metrics", "@opentelemetry/sdk-trace-base", "@opentelemetry/sdk-trace-node", "@opentelemetry/sdk-trace-web"] }, "sha512-cPfCfp/ghu0itbX6Dqjdr4N0rbjng5ON4sUpnLHV5JJySG8zZpWmuOZLWIrfrNKT2ctYR1BYmp1aYCgkItaJLw=="],
 
-    "@effect/platform-node": ["@effect/platform-node@4.0.0-beta.74", "", { "dependencies": { "@effect/platform-node-shared": "^4.0.0-beta.74", "mime": "^4.1.0", "undici": "^8.2.0" }, "peerDependencies": { "effect": "^4.0.0-beta.74", "ioredis": "^5.7.0" } }, "sha512-/W16mKqxvhWINLjufzc0log1sl57exXQfwd+em398/zKCbmU3S7snXTDMN6w0ju2TtgK35qrsoGBXEochij6Sg=="],
+    "@effect/platform-node": ["@effect/platform-node@4.0.0-beta.83", "", { "dependencies": { "@effect/platform-node-shared": "^4.0.0-beta.83", "mime": "^4.1.0", "undici": "^8.2.0" }, "peerDependencies": { "effect": "^4.0.0-beta.83", "ioredis": "^5.7.0" } }, "sha512-RmpVGu/+X/Bif3/g1Rzj8oFzTOknoVB3yHCa0b179vytPpKe+Kj9ZwKNcAnKWqHUDkbSPBq1Ca60mvOHr2/+LQ=="],
 
-    "@effect/platform-node-shared": ["@effect/platform-node-shared@4.0.0-beta.74", "", { "dependencies": { "@types/ws": "^8.18.1", "ws": "^8.20.0" }, "peerDependencies": { "effect": "^4.0.0-beta.74" } }, "sha512-C6C2hXixNcZXLaFF2u7B/FtOsqpdY7luaPuiGFBJza0P7EnYDkwaT3kB6lv7l/qctmkADc24qOsSCWIKRbC4jg=="],
+    "@effect/platform-node-shared": ["@effect/platform-node-shared@4.0.0-beta.83", "", { "dependencies": { "@types/ws": "^8.18.1", "ws": "^8.20.0" }, "peerDependencies": { "effect": "^4.0.0-beta.83" } }, "sha512-+yr/+PJmKTgmJq1QOINSBPgLu7Cjc4CZcotBXnGjyDEizOmimFgTkN2B8PBJAKIKUWYWfobjXqC+58/VhhPKAw=="],
 
-    "@effect/sql-sqlite-bun": ["@effect/sql-sqlite-bun@4.0.0-beta.74", "", { "peerDependencies": { "effect": "^4.0.0-beta.74" } }, "sha512-RVMRVY7NhSoAp9cAAyy4TT6dt6NNZjOpWeqticoho9HNBukxQSUcu/kjcz4Iq9eoQfXadmepu8kZqtdZULM/fg=="],
+    "@effect/sql-sqlite-bun": ["@effect/sql-sqlite-bun@4.0.0-beta.83", "", { "peerDependencies": { "effect": "^4.0.0-beta.83" } }, "sha512-6OaxLsWffxkh9pXYUSyj/AxjVb9URY2rG9U6atjxClWy30Jx77R9Pm3Rrc7cQ63kQurePavEw1bQbzQ/SILiQQ=="],
 
     "@electron/asar": ["@electron/asar@3.4.1", "", { "dependencies": { "commander": "^5.0.0", "glob": "^7.1.6", "minimatch": "^3.0.4" }, "bin": { "asar": "bin/asar.js" } }, "sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA=="],
 
@@ -1772,6 +1848,8 @@
 
     "@opencode-ai/cli": ["@opencode-ai/cli@workspace:packages/cli"],
 
+    "@opencode-ai/client": ["@opencode-ai/client@workspace:packages/client"],
+
     "@opencode-ai/console-app": ["@opencode-ai/console-app@workspace:packages/console/app"],
 
     "@opencode-ai/console-core": ["@opencode-ai/console-core@workspace:packages/console/core"],
@@ -1798,14 +1876,22 @@
 
     "@opencode-ai/http-recorder": ["@opencode-ai/http-recorder@workspace:packages/http-recorder"],
 
+    "@opencode-ai/httpapi-codegen": ["@opencode-ai/httpapi-codegen@workspace:packages/httpapi-codegen"],
+
     "@opencode-ai/llm": ["@opencode-ai/llm@workspace:packages/llm"],
 
     "@opencode-ai/plugin": ["@opencode-ai/plugin@workspace:packages/plugin"],
 
+    "@opencode-ai/protocol": ["@opencode-ai/protocol@workspace:packages/protocol"],
+
+    "@opencode-ai/schema": ["@opencode-ai/schema@workspace:packages/schema"],
+
     "@opencode-ai/script": ["@opencode-ai/script@workspace:packages/script"],
 
     "@opencode-ai/sdk": ["@opencode-ai/sdk@workspace:packages/sdk/js"],
 
+    "@opencode-ai/sdk-next": ["@opencode-ai/sdk-next@workspace:packages/sdk-next"],
+
     "@opencode-ai/server": ["@opencode-ai/server@workspace:packages/server"],
 
     "@opencode-ai/slack": ["@opencode-ai/slack@workspace:packages/slack"],
@@ -3366,7 +3452,7 @@
 
     "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
 
-    "effect": ["effect@4.0.0-beta.74", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.8.0", "find-my-way-ts": "^0.1.6", "ini": "^7.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^2.0.1", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^14.0.0", "yaml": "^2.9.0" } }, "sha512-Yx+Kh12U+i2FmjwEfKs+ePFmpMd43RPD1oGqc/VraSS9bYzvF0Ff3PojwEFEVEewp8xc92Uxu28gTspU4qyvHA=="],
+    "effect": ["effect@4.0.0-beta.83", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.8.0", "find-my-way-ts": "^0.1.6", "ini": "^7.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^2.0.1", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^14.0.0", "yaml": "^2.9.0" } }, "sha512-0wsak8RtgGAr9UWSbVDgJHZcUqMSvicHcvaZv1MbMM7MCGgW4Rn/137J1MHQbwYPcwYGxT/IqehFd+UbYuj78w=="],
 
     "ejs": ["ejs@3.1.10", "", { "dependencies": { "jake": "^10.8.5" }, "bin": { "ejs": "bin/cli.js" } }, "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA=="],
 
@@ -5898,6 +5984,10 @@
 
     "@solidjs/start/vite": ["vite@7.1.10", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA=="],
 
+    "@standard-community/standard-json/effect": ["effect@4.0.0-beta.74", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.8.0", "find-my-way-ts": "^0.1.6", "ini": "^7.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^2.0.1", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^14.0.0", "yaml": "^2.9.0" } }, "sha512-Yx+Kh12U+i2FmjwEfKs+ePFmpMd43RPD1oGqc/VraSS9bYzvF0Ff3PojwEFEVEewp8xc92Uxu28gTspU4qyvHA=="],
+
+    "@standard-community/standard-openapi/effect": ["effect@4.0.0-beta.74", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.8.0", "find-my-way-ts": "^0.1.6", "ini": "^7.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^2.0.1", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^14.0.0", "yaml": "^2.9.0" } }, "sha512-Yx+Kh12U+i2FmjwEfKs+ePFmpMd43RPD1oGqc/VraSS9bYzvF0Ff3PojwEFEVEewp8xc92Uxu28gTspU4qyvHA=="],
+
     "@storybook/csf-plugin/unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
 
     "@tailwindcss/oxide/detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -6700,6 +6790,10 @@
 
     "@solidjs/start/shiki/@shikijs/types": ["@shikijs/types@1.29.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.1", "@types/hast": "^3.0.4" } }, "sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw=="],
 
+    "@standard-community/standard-json/effect/@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
+    "@standard-community/standard-openapi/effect/@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
     "@storybook/csf-plugin/unplugin/webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg=="],

infra/stats.ts

@@ -56,6 +56,7 @@ const inferenceEventTable = new aws.s3tables.Table(
             { name: "error_cause2", type: "string", required: false },
             { name: "api_key", type: "string", required: false },
             { name: "workspace", type: "string", required: false },
+            { name: "user_id", type: "string", required: false },
             { name: "is_subscription", type: "boolean", required: false },
             { name: "subscription", type: "string", required: false },
             { name: "response_length", type: "long", required: false },
@@ -84,7 +85,7 @@ const inferenceEventTable = new aws.s3tables.Table(
       },
     },
   },
-  { deleteBeforeReplace: $app.stage !== "production" },
+  { deleteBeforeReplace: $app.stage !== "production", ignoreChanges: ["metadata"] },
 )
 
 export const inferenceEvent = new sst.Linkable("InferenceEvent", {

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-LOxTad/iCquvJyonFOcz6/rDTPNDmwyBnykhWZJ5GC4=",
-    "aarch64-linux": "sha256-iO+0vYhp+2x6ACmh5lQJ/2Ac4uZTqRZE/KhG3u0o6D8=",
-    "aarch64-darwin": "sha256-tpBydRbrJ+4QxmkGUt/BhME8q6ysCW/CXrsNshYgqDU=",
-    "x86_64-darwin": "sha256-QQcI6SK7WJ7dSkX6xZuSQPoUdwfoCaimVgoHCnrO0wY="
+    "x86_64-linux": "sha256-oWSGu+SP66Aquy/0Vaq7Bgp8404ZdOWbQX+O7h3jxHU=",
+    "aarch64-linux": "sha256-UsS0+c+GwtIukmWwQeFbY/3Oaz3t4Q7C6cFMGkmlyAY=",
+    "aarch64-darwin": "sha256-CArz92ewPmXO+ORFCBkCH8LzMpU/DjyaO4ic7QL0UpI=",
+    "x86_64-darwin": "sha256-rhnz9gmG6L06wIzfMhTaXDDEf6IbMD32CavqwXoqcUs="
   }
 }

nix/opencode.nix

@@ -27,6 +27,13 @@ stdenvNoCC.mkDerivation (finalAttrs: {
     writableTmpDirAsHomeHook
   ];
 
+  postPatch = ''
+    # NOTE: Relax Bun version check to be a warning instead of an error
+    substituteInPlace packages/script/src/index.ts \
+      --replace-fail 'throw new Error(`This script requires bun@''${expectedBunVersionRange}' \
+                     'console.warn(`Warning: This script requires bun@''${expectedBunVersionRange}'
+  '';
+
   configurePhase = ''
     runHook preConfigure
 

package.json

@@ -30,10 +30,11 @@
       "packages/slack"
     ],
     "catalog": {
-      "@effect/opentelemetry": "4.0.0-beta.74",
-      "@effect/platform-node": "4.0.0-beta.74",
-      "@effect/sql-sqlite-bun": "4.0.0-beta.74",
+      "@effect/opentelemetry": "4.0.0-beta.83",
+      "@effect/platform-node": "4.0.0-beta.83",
+      "@effect/sql-sqlite-bun": "4.0.0-beta.83",
       "@npmcli/arborist": "9.4.0",
+      "@noble/hashes": "2.2.0",
       "@types/bun": "1.3.13",
       "@types/cross-spawn": "6.0.6",
       "@octokit/rest": "22.0.0",
@@ -61,7 +62,7 @@
       "dompurify": "3.3.1",
       "drizzle-kit": "1.0.0-rc.2",
       "drizzle-orm": "1.0.0-rc.2",
-      "effect": "4.0.0-beta.74",
+      "effect": "4.0.0-beta.83",
       "ai": "6.0.168",
       "cross-spawn": "7.0.6",
       "hono": "4.10.7",

packages/app/AGENTS.md

@@ -1,3 +1,8 @@
+## Priorities
+
+- Prioritise, in this order: stability, simplicity, performance.
+- Before changing session or timeline code, record a production benchmark baseline and compare it after the change.
+
 ## Debugging
 
 - NEVER try to restart the app, or the server process, EVER.

packages/app/e2e/performance/AGENTS.md

@@ -0,0 +1,13 @@
+- Prioritize stability, then simplicity, then measurement overhead.
+- Use Playwright for scenario control, isolation, and completion checks.
+- Use Chrome Performance traces for generic browser profiling.
+- Use Electron `contentTracing` for packaged multi-process profiling.
+- Keep custom probes only for product-specific measurements.
+- Do not duplicate measurements across the harness, probes, and traces.
+- Run benchmarks serially to avoid cross-test contention.
+- Run benchmarks against production builds.
+- Keep detailed profiling opt-in when it changes workload behavior.
+- Preserve raw diagnostic data or use lossless representations.
+- Do not enforce machine-dependent performance thresholds.
+- Assert scenario completion and metric collection only.
+- Keep normal test discovery free of manual benchmarks.

packages/app/e2e/performance/README.md

@@ -0,0 +1,77 @@
+# Manual app performance suite
+
+The app's high-volume performance diagnostics live under `packages/app/e2e/performance` and are excluded from normal local and CI Playwright discovery. The benchmark config builds the app and serves the production bundle before running scenarios serially.
+
+Run the suite explicitly from `packages/app`:
+
+```sh
+bun run test:bench
+```
+
+PowerShell:
+
+```powershell
+$env:PLAYWRIGHT_WORKERS = "1"
+bun run test:bench
+```
+
+The suite contains:
+
+- cold and hot session-tab timing
+- cached session repaint and mutation tracing
+- streaming timeline throughput, RAF-gap, long-task, geometry, and remount diagnostics
+
+All benchmarks import the shared `benchmark` fixture. Pages created through Playwright's `page` fixture automatically capture main-frame navigation history and emit a Chrome trace when `OPENCODE_PERFORMANCE_TRACE_DIR` is set. Benchmarks that need isolated browser contexts use `withBenchmarkPage`, which owns the context and the same diagnostics lifecycle.
+
+New benchmarks should look like normal Playwright tests:
+
+```ts
+import { benchmark, expect } from "../benchmark"
+
+benchmark("measures one interaction", async ({ page, report }) => {
+  // Only scenario-specific setup and interaction belong here.
+  report({ durationMs: 42 })
+})
+```
+
+The fixture requires every benchmark to call `report()`, automatically names and closes traces, captures navigation history, attaches that history when a test fails, and emits metrics as a consistent `BENCHMARK` JSON line.
+
+```text
+BENCHMARK {"name":"...","context":{"project":"chromium","platform":"darwin"},"metrics":{...}}
+```
+
+Every observed page also emits `BENCHMARK_PAGE` with the same run ID, navigation history, and optional trace path before the final status-bearing `BENCHMARK` record. Chrome traces are browser-wide page-lifetime diagnostics; scenario metrics use narrower explicitly named observation windows.
+
+This follows the stack's own guidance: [Electron recommends repeated Chrome DevTools and Chrome Tracing measurement](https://www.electronjs.org/docs/latest/tutorial/performance), [Chrome DevTools recommends Performance recordings for runtime work](https://developer.chrome.com/docs/devtools/performance), and [Playwright uses traces for test debugging rather than renderer profiling](https://playwright.dev/docs/trace-viewer).
+
+These Playwright benchmarks profile the shared app renderer in Chromium. A future packaged Electron benchmark that needs main-process and multi-process attribution should use Electron's official [`contentTracing`](https://www.electronjs.org/docs/latest/api/content-tracing/) API rather than extending this renderer harness with bespoke process instrumentation.
+
+CPU and high-volume visual profiling are disabled by default. Set `TIMELINE_CPU_PROFILE=1` to enable both, or additionally set `TIMELINE_VISUAL_PROFILE=0` for CPU-only profiling.
+
+The streaming scenario's 30x CPU throttle is a deterministic stress profile, not a simulated end-user device.
+
+Benchmarks do not assert machine-dependent performance budgets. Streaming processes 160 deltas by default and reports renderer-observed completion time, throughput, RAF callback-gap distributions, frame-budget equivalents, and long tasks through final geometry settlement. Delta count and delivery batch are included in result context when overridden. These are main-thread callback diagnostics, not compositor presentation or dropped-frame measurements. Visual-only and geometry metrics are `null` when their probes are disabled. Tab metrics describe sampled DOM observations. Assertions verify scenario and metric collection completion. Repeated repaint states are run-length grouped, but every original observation timestamp is retained alongside raw mutation batches and layout shifts.
+
+Committed smoke and regression tests continue to own correctness coverage for pagination, tab paint, context resize, collapse state, and composer spacing.
+
+## Chrome traces
+
+Set `OPENCODE_PERFORMANCE_TRACE_DIR` to emit a standard Chrome DevTools trace for every benchmark page automatically:
+
+```sh
+OPENCODE_PERFORMANCE_TRACE_DIR=/tmp/opencode-performance-traces \
+bunx playwright test --config e2e/performance/playwright.config.ts \
+  timeline/session-tab-switch-benchmark.spec.ts
+```
+
+The emitted JSON is a standard Chrome trace and can be loaded directly into the Chrome DevTools Performance panel. `devtools-tracing` can optionally inspect it from the command line without adding package scripts or dependencies:
+
+Trace capture mirrors [Puppeteer's official tracing defaults and lifecycle](https://pptr.dev/api/puppeteer.tracing), using Chrome's `ReturnAsStream` transfer mode and failing when Chromium reports trace data loss.
+
+```sh
+bunx devtools-tracing stats <trace-path-from-BENCHMARK_PAGE>
+```
+
+INP analysis requires a trace with a supported navigation/interaction insight. Selector statistics require a trace captured with `OPENCODE_PERFORMANCE_SELECTOR_TRACE=1`.
+
+`e2e/performance/playwright.uncapped.config.ts` disables Chromium frame-rate limiting for explicit uncapped diagnostics. Native product benchmarks should use the default Playwright configuration.

packages/app/e2e/performance/benchmark.ts

@@ -0,0 +1,144 @@
+import { expect, test as base, type Browser, type Page, type TestInfo } from "@playwright/test"
+import { startChromeTrace } from "./chrome-trace"
+
+type BenchmarkFixtures = {
+  report: (metrics: Record<string, unknown>, context?: Record<string, unknown>) => void
+  reportState: { payload?: { metrics: Record<string, unknown>; context: Record<string, unknown> } }
+  benchmarkResult: void
+}
+
+export type PerformancePageDiagnostics = {
+  navigations: string[]
+  stop: () => Promise<string | undefined>
+}
+
+const pages = new WeakMap<Page, PerformancePageDiagnostics>()
+
+export const benchmark = base.extend<BenchmarkFixtures>({
+  reportState: async ({}, use) => use({}),
+  report: async ({ reportState }, use) => {
+    await use((metrics, context = {}) => {
+      if (reportState.payload) throw new Error("Benchmark reported metrics more than once")
+      reportState.payload = { metrics, context }
+    })
+  },
+  benchmarkResult: [
+    async ({ reportState }, use, testInfo) => {
+      await use()
+      const missing = !reportState.payload
+      console.log(
+        `BENCHMARK ${JSON.stringify({
+          schemaVersion: 2,
+          runID: process.env.OPENCODE_PERFORMANCE_RUN_ID,
+          name: benchmarkName(testInfo),
+          status: missing ? "failed" : testInfo.status,
+          expectedStatus: testInfo.expectedStatus,
+          retry: testInfo.retry,
+          repeatEachIndex: testInfo.repeatEachIndex,
+          context: {
+            project: testInfo.project.name,
+            platform: process.platform,
+            ...reportState.payload?.context,
+          },
+          metrics: reportState.payload?.metrics ?? null,
+          error: missing ? "Benchmark did not report metrics" : undefined,
+        })}`,
+      )
+      if (missing && testInfo.status === testInfo.expectedStatus)
+        throw new Error(`Benchmark did not report metrics: ${benchmarkName(testInfo)}`)
+    },
+    { auto: true },
+  ],
+  page: async ({ page }, use, testInfo) => {
+    const name = benchmarkName(testInfo)
+    const diagnostics = await observePerformancePage(page, name)
+    try {
+      await use(page)
+    } finally {
+      try {
+        await reportPerformancePage(name, diagnostics, testInfo)
+      } finally {
+        if (testInfo.status !== testInfo.expectedStatus) {
+          await testInfo.attach("performance-navigations", {
+            body: JSON.stringify(diagnostics.navigations, null, 2),
+            contentType: "application/json",
+          })
+        }
+      }
+    }
+  },
+})
+
+function benchmarkName(testInfo: TestInfo) {
+  return testInfo.titlePath.slice(1).join(" > ")
+}
+
+export { expect }
+
+async function observePerformancePage(page: Page, name: string) {
+  const navigations: string[] = []
+  const onNavigation = (frame: ReturnType<Page["mainFrame"]>) => {
+    if (frame === page.mainFrame()) navigations.push(frame.url())
+  }
+  page.on("framenavigated", onNavigation)
+  const stopTrace = await startChromeTrace(page, name).catch((error) => {
+    page.off("framenavigated", onNavigation)
+    throw error
+  })
+  let stopping: Promise<string | undefined> | undefined
+  const diagnostics: PerformancePageDiagnostics = {
+    navigations,
+    stop() {
+      page.off("framenavigated", onNavigation)
+      return (stopping ??= stopTrace?.() ?? Promise.resolve(undefined))
+    },
+  }
+  pages.set(page, diagnostics)
+  return diagnostics
+}
+
+export async function withBenchmarkPage<T>(
+  browser: Browser,
+  name: string,
+  run: (page: Page) => Promise<T>,
+  testInfo?: TestInfo,
+) {
+  const context = await browser.newContext()
+  try {
+    const page = await context.newPage()
+    const diagnostics = await observePerformancePage(page, name)
+    try {
+      return await run(page)
+    } finally {
+      await reportPerformancePage(name, diagnostics, testInfo)
+    }
+  } finally {
+    await context.close()
+  }
+}
+
+async function reportPerformancePage(name: string, diagnostics: PerformancePageDiagnostics, testInfo?: TestInfo) {
+  const trace = await diagnostics.stop()
+  console.log(
+    `BENCHMARK_PAGE ${JSON.stringify({
+      schemaVersion: 2,
+      runID: process.env.OPENCODE_PERFORMANCE_RUN_ID,
+      name,
+      test: testInfo ? benchmarkName(testInfo) : undefined,
+      retry: testInfo?.retry,
+      repeatEachIndex: testInfo?.repeatEachIndex,
+      context: {
+        platform: process.platform,
+        trace,
+        selectorTrace: process.env.OPENCODE_PERFORMANCE_SELECTOR_TRACE === "1",
+      },
+      navigations: diagnostics.navigations,
+    })}`,
+  )
+}
+
+export function benchmarkDiagnostics(page: Page) {
+  const diagnostics = pages.get(page)
+  if (!diagnostics) throw new Error("Performance diagnostics are not installed for this page")
+  return diagnostics
+}

packages/app/e2e/performance/chrome-trace.ts

@@ -0,0 +1,95 @@
+import type { CDPSession, Page } from "@playwright/test"
+import path from "node:path"
+import { mkdir, open, rename } from "node:fs/promises"
+import { Buffer } from "node:buffer"
+import { createHash, randomUUID } from "node:crypto"
+
+const categories = [
+  "-*",
+  "devtools.timeline",
+  "v8.execute",
+  "disabled-by-default-devtools.timeline",
+  "disabled-by-default-devtools.timeline.frame",
+  "toplevel",
+  "blink.console",
+  "blink.user_timing",
+  "latencyInfo",
+  "disabled-by-default-devtools.timeline.stack",
+  "disabled-by-default-v8.cpu_profiler",
+]
+
+export async function startChromeTrace(page: Page, name: string) {
+  const directory = process.env.OPENCODE_PERFORMANCE_TRACE_DIR
+  if (!directory) return
+
+  const selectors = process.env.OPENCODE_PERFORMANCE_SELECTOR_TRACE === "1"
+  const file = await prepareChromeTrace(directory, name, selectors)
+  const session = await page.context().newCDPSession(page)
+  try {
+    await session.send("Tracing.start", {
+      transferMode: "ReturnAsStream",
+      traceConfig: {
+        excludedCategories: categories
+          .filter((category) => category.startsWith("-"))
+          .map((category) => category.slice(1)),
+        includedCategories: [
+          ...categories.filter((category) => !category.startsWith("-")),
+          ...(selectors
+            ? ["disabled-by-default-blink.debug", "disabled-by-default-devtools.timeline.invalidationTracking"]
+            : []),
+        ],
+      },
+    })
+  } catch (error) {
+    await Promise.allSettled([session.detach()])
+    throw error
+  }
+  let stopping: Promise<string> | undefined
+
+  return () =>
+    (stopping ??= (async () => {
+      try {
+        const complete = new Promise<{ stream?: string; dataLossOccurred: boolean }>((resolve) =>
+          session.once("Tracing.tracingComplete", resolve),
+        )
+        await session.send("Tracing.end")
+        const result = await complete
+        if (!result.stream) throw new Error(`Chrome trace stream missing: ${file}`)
+        const partial = `${file}.partial`
+        await writeProtocolStream(session, result.stream, partial)
+        if (result.dataLossOccurred) throw new Error(`Chrome trace lost data; partial capture retained: ${partial}`)
+        await rename(partial, file)
+        return file
+      } finally {
+        await Promise.allSettled([session.detach()])
+      }
+    })())
+}
+
+export async function prepareChromeTrace(
+  directory: string,
+  name: string,
+  selectors: boolean,
+  nonce = randomUUID().slice(0, 8),
+) {
+  await mkdir(directory, { recursive: true })
+  const run = process.env.OPENCODE_PERFORMANCE_RUN_ID ?? "manual"
+  const hash = createHash("sha256").update(name).digest("hex").slice(0, 8)
+  return path.join(
+    directory,
+    `${run}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}-${hash}-${nonce}${selectors ? "-selectors" : ""}.json`,
+  )
+}
+
+async function writeProtocolStream(session: CDPSession, handle: string, file: string) {
+  const output = await open(file, "wx")
+  try {
+    while (true) {
+      const chunk = await session.send("IO.read", { handle })
+      await output.write(chunk.base64Encoded ? Buffer.from(chunk.data, "base64") : chunk.data)
+      if (chunk.eof) break
+    }
+  } finally {
+    await Promise.allSettled([output.close(), session.send("IO.close", { handle })])
+  }
+}

packages/app/e2e/performance/playwright.config.ts

@@ -0,0 +1,20 @@
+import config from "../../playwright.config"
+
+const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
+process.env.PLAYWRIGHT_SERVER_PORT = String(port)
+process.env.OPENCODE_PERFORMANCE_RUN_ID ??= `${new Date().toISOString().replace(/[:.]/g, "-")}-${process.pid}`
+
+export default {
+  ...config,
+  testDir: ".",
+  testIgnore: "unit/**",
+  outputDir: "../test-results/performance",
+  fullyParallel: false,
+  workers: 1,
+  reporter: [["html", { outputFolder: "../playwright-report/performance", open: "never" }], ["line"]],
+  webServer: {
+    ...config.webServer,
+    command: `bun run build && bun run serve -- --host 0.0.0.0 --port ${port} --strictPort`,
+    reuseExistingServer: false,
+  },
+}

packages/app/e2e/performance/playwright.uncapped.config.ts

@@ -0,0 +1,13 @@
+import config from "./playwright.config"
+
+export default {
+  ...config,
+  outputDir: "../test-results/performance-uncapped",
+  reporter: [["html", { outputFolder: "../playwright-report/performance-uncapped", open: "never" }], ["line"]],
+  use: {
+    ...config.use,
+    launchOptions: {
+      args: ["--disable-frame-rate-limit", "--disable-gpu-vsync"],
+    },
+  },
+}

packages/app/e2e/performance/timeline/session-tab-flash.spec.ts

@@ -0,0 +1,49 @@
+import { benchmark, expect } from "../benchmark"
+import { expectSessionTitle } from "../../utils/waits"
+import { fixture } from "./session-timeline-stress.fixture"
+import {
+  collectCachedRepaintTrace,
+  compressCachedRepaintTrace,
+  installCachedRepaintProbe,
+  waitForCachedRepaintWindow,
+} from "./session-tab-repaint-probe"
+import { waitForStableTimeline } from "./session-tab-switch-probe"
+import {
+  installStressSessionTabs,
+  installTimelineSettings,
+  mockStressTimeline,
+  stressSessionHref,
+} from "./timeline-test-helpers"
+
+benchmark("samples cached session repaint after the click", async ({ page, report }) => {
+  benchmark.setTimeout(120_000)
+  await mockStressTimeline(page)
+  await installStressSessionTabs(page)
+  await installTimelineSettings(page)
+  await page.goto(stressSessionHref(fixture.targetID))
+  await expectSessionTitle(page, fixture.expected.targetTitle)
+  await waitForStableTimeline(page, fixture.expected.targetMessageIDs.at(-1)!)
+  await page
+    .locator(`[data-slot="titlebar-tabs"] a[href="${stressSessionHref(fixture.sourceID)}"]`)
+    .first()
+    .click()
+  await expectSessionTitle(page, fixture.expected.sourceTitle)
+  await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+
+  await installCachedRepaintProbe(page, {
+    targetHref: stressSessionHref(fixture.targetID),
+    destination: fixture.messages[fixture.targetID].map((message) => message.info.id),
+    source: fixture.messages[fixture.sourceID].map((message) => message.info.id),
+    last: fixture.expected.targetMessageIDs.at(-1)!,
+    windowMs: 1_000,
+  })
+
+  await page
+    .locator(`[data-slot="titlebar-tabs"] a[href="${stressSessionHref(fixture.targetID)}"]`)
+    .first()
+    .click()
+  await Promise.all([expectSessionTitle(page, fixture.expected.targetTitle), waitForCachedRepaintWindow(page, 1_000)])
+  const result = await collectCachedRepaintTrace(page)
+  report(compressCachedRepaintTrace(result))
+  expect(result.samples.length).toBeGreaterThan(0)
+})

packages/app/e2e/performance/timeline/session-tab-repaint-probe.ts

@@ -0,0 +1,251 @@
+import type { Page } from "@playwright/test"
+
+type CachedRepaintTrace = {
+  timeOriginEpochMs: number
+  startedAtPerformanceMs: number
+  samples: {
+    observedAtMs: number
+    root: number | undefined
+    scrollTop: number
+    scrollHeight: number
+    bottomErrorPx: number | undefined
+    last: boolean
+    rows: { key: string | undefined; node: number; top: number; bottom: number }[]
+    mounted: number
+    center: string | undefined
+    destination: string[]
+    source: string[]
+  }[]
+  mutations: { observedAtMs: number; changed: { type: string; node: number }[] }[]
+  shifts: { occurredAtMs: number; value: number }[]
+  windowMs: number
+  running: boolean
+  stop: () => void
+}
+
+export async function installCachedRepaintProbe(
+  page: Page,
+  input: { targetHref: string; destination: string[]; source: string[]; last: string; windowMs: number },
+) {
+  await page.evaluate(({ targetHref, destination, source, last, windowMs }) => {
+    const destinationIDs = new Set(destination)
+    const sourceIDs = new Set(source)
+    const nodeIDs = new WeakMap<Node, number>()
+    let nextNodeID = 1
+    const id = (node: Node) => {
+      const current = nodeIDs.get(node)
+      if (current) return current
+      nodeIDs.set(node, nextNodeID)
+      return nextNodeID++
+    }
+    const state: CachedRepaintTrace = {
+      timeOriginEpochMs: performance.timeOrigin,
+      startedAtPerformanceMs: 0,
+      samples: [],
+      mutations: [],
+      shifts: [],
+      windowMs,
+      running: false,
+      stop: () => {},
+    }
+    const recordShifts = (entries: PerformanceEntry[]) => {
+      if (!state.running) return
+      state.shifts.push(
+        ...entries
+          .map((entry) => {
+            if (
+              entry.startTime < state.startedAtPerformanceMs ||
+              entry.startTime > state.startedAtPerformanceMs + state.windowMs
+            )
+              return
+            return {
+              occurredAtMs: entry.startTime - state.startedAtPerformanceMs,
+              value: (entry as PerformanceEntry & { value: number }).value,
+            }
+          })
+          .filter((entry): entry is { occurredAtMs: number; value: number } => entry !== undefined),
+      )
+    }
+    const shiftObserver = new PerformanceObserver((entries) => recordShifts(entries.getEntries()))
+    shiftObserver.observe({ type: "layout-shift" })
+    const recordMutations = (entries: MutationRecord[]) => {
+      if (!state.running) return
+      const observedAtMs = performance.now() - state.startedAtPerformanceMs
+      if (observedAtMs > state.windowMs) return
+      const changed = entries.flatMap((entry) => [
+        ...[...entry.addedNodes].map((node) => ({ type: "add", node: id(node) })),
+        ...[...entry.removedNodes].map((node) => ({ type: "remove", node: id(node) })),
+      ])
+      if (changed.length) state.mutations.push({ observedAtMs, changed })
+    }
+    const mutationObserver = new MutationObserver(recordMutations)
+    mutationObserver.observe(document.documentElement, { childList: true, subtree: true })
+    state.stop = () => {
+      recordShifts(shiftObserver.takeRecords())
+      recordMutations(mutationObserver.takeRecords())
+      state.running = false
+      shiftObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+    const sample = () => {
+      if (!state.running) return
+      setTimeout(() => {
+        if (!state.running) return
+        const observedAtMs = performance.now() - state.startedAtPerformanceMs
+        if (observedAtMs > state.windowMs) return
+        const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
+          element.querySelector("[data-timeline-row]"),
+        )
+        if (root) {
+          const view = root.getBoundingClientRect()
+          const rows = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")]
+            .map((element) => ({
+              key: element.dataset.timelineKey,
+              node: id(element),
+              rect: element.getBoundingClientRect(),
+            }))
+            .filter((item) => item.rect.bottom > view.top && item.rect.top < view.bottom)
+            .map((item) => ({
+              key: item.key,
+              node: item.node,
+              top: item.rect.top - view.top,
+              bottom: item.rect.bottom - view.top,
+            }))
+          const messages = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
+            .filter((element) => {
+              const rect = element.getBoundingClientRect()
+              return rect.bottom > view.top && rect.top < view.bottom
+            })
+            .map((element) => element.dataset.messageId!)
+          const spacer = root.querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')?.getBoundingClientRect()
+          state.samples.push({
+            observedAtMs,
+            root: id(root),
+            scrollTop: root.scrollTop,
+            scrollHeight: root.scrollHeight,
+            bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined,
+            last: messages.includes(last),
+            rows,
+            mounted: root.querySelectorAll("[data-timeline-key]").length,
+            center: document
+              .elementFromPoint(view.left + view.width / 2, view.top + view.height / 2)
+              ?.textContent?.slice(0, 80),
+            destination: messages.filter((messageID) => destinationIDs.has(messageID)),
+            source: messages.filter((messageID) => sourceIDs.has(messageID)),
+          })
+        } else {
+          state.samples.push({
+            observedAtMs,
+            root: undefined,
+            scrollTop: 0,
+            scrollHeight: 0,
+            bottomErrorPx: undefined,
+            last: false,
+            rows: [],
+            mounted: 0,
+            center: document.elementFromPoint(innerWidth / 2, innerHeight / 2)?.textContent?.slice(0, 80),
+            destination: [],
+            source: [],
+          })
+        }
+        requestAnimationFrame(sample)
+      }, 0)
+    }
+    document.addEventListener(
+      "click",
+      (event) => {
+        const link = event.target instanceof Element ? event.target.closest("a") : undefined
+        if (link?.getAttribute("href") !== targetHref) return
+        state.startedAtPerformanceMs = performance.now()
+        state.running = true
+        requestAnimationFrame(sample)
+      },
+      { capture: true, once: true },
+    )
+    ;(window as Window & { __cachedFlash?: CachedRepaintTrace }).__cachedFlash = state
+  }, input)
+}
+
+export function layoutShiftSample(entry: Pick<PerformanceEntry, "startTime"> & { value: number }, started: number) {
+  if (entry.startTime < started) return
+  return { occurredAtMs: entry.startTime - started, value: entry.value }
+}
+
+export async function waitForCachedRepaintWindow(page: Page, durationMs: number) {
+  await page.waitForFunction((durationMs) => {
+    const state = (window as Window & { __cachedFlash?: CachedRepaintTrace }).__cachedFlash
+    return !!state?.running && performance.now() - state.startedAtPerformanceMs >= durationMs
+  }, durationMs)
+}
+
+export async function collectCachedRepaintTrace(page: Page) {
+  return page.evaluate(() => {
+    const state = (window as Window & { __cachedFlash?: CachedRepaintTrace }).__cachedFlash!
+    state.stop()
+    return state
+  })
+}
+
+export function summarizeCachedRepaintTrace(trace: CachedRepaintTrace) {
+  const roots = trace.samples.map((sample) => sample.root)
+  const bottomErrors = trace.samples.flatMap((sample) =>
+    sample.bottomErrorPx === undefined ? [] : [Math.abs(sample.bottomErrorPx)],
+  )
+  const category = (sample: CachedRepaintTrace["samples"][number]) => {
+    if (sample.source.length) return "source"
+    if (sample.root === undefined || sample.rows.length === 0) return "blank"
+    if (!sample.destination.length) return "unknown"
+    if (sample.last && Math.abs(sample.bottomErrorPx ?? Infinity) <= 1) return "correct"
+    return "wrongDestination"
+  }
+  return {
+    samples: trace.samples.length,
+    durationMs: trace.samples.at(-1)?.observedAtMs ?? 0,
+    firstSampleObservedMs: trace.samples[0]?.observedAtMs,
+    firstSampleCorrect: trace.samples[0] ? category(trace.samples[0]) === "correct" : false,
+    blankSamples: trace.samples.filter((sample) => category(sample) === "blank").length,
+    sourceSamples: trace.samples.filter((sample) => category(sample) === "source").length,
+    wrongDestinationSamples: trace.samples.filter((sample) => category(sample) === "wrongDestination").length,
+    unknownSamples: trace.samples.filter((sample) => category(sample) === "unknown").length,
+    rootChanges: roots.slice(1).filter((root, index) => root !== roots[index]).length,
+    mountedMin: trace.samples.length ? Math.min(...trace.samples.map((sample) => sample.mounted)) : 0,
+    mountedMax: Math.max(...trace.samples.map((sample) => sample.mounted)),
+    maxBottomErrorPx: Math.max(0, ...bottomErrors),
+    mutationBatches: trace.mutations.length,
+    addedNodes: trace.mutations.reduce(
+      (sum, batch) => sum + batch.changed.filter((change) => change.type === "add").length,
+      0,
+    ),
+    removedNodes: trace.mutations.reduce(
+      (sum, batch) => sum + batch.changed.filter((change) => change.type === "remove").length,
+      0,
+    ),
+    layoutShiftValueSum: trace.shifts.reduce((sum, shift) => sum + shift.value, 0),
+    maxLayoutShiftValue: Math.max(0, ...trace.shifts.map((shift) => shift.value)),
+  }
+}
+
+export function compressCachedRepaintTrace(trace: CachedRepaintTrace) {
+  const samples: {
+    observedAtMs: number[]
+    state: Omit<CachedRepaintTrace["samples"][number], "observedAtMs">
+  }[] = []
+  for (const sample of trace.samples) {
+    const { observedAtMs, ...state } = sample
+    const previous = samples.at(-1)
+    if (previous && JSON.stringify(previous.state) === JSON.stringify(state)) {
+      previous.observedAtMs.push(observedAtMs)
+      continue
+    }
+    samples.push({ observedAtMs: [observedAtMs], state })
+  }
+  return {
+    timeOriginEpochMs: trace.timeOriginEpochMs,
+    startedAtPerformanceMs: trace.startedAtPerformanceMs,
+    windowMs: trace.windowMs,
+    summary: summarizeCachedRepaintTrace(trace),
+    samples,
+    mutations: trace.mutations,
+    shifts: trace.shifts,
+  }
+}

packages/app/e2e/performance/timeline/session-tab-switch-benchmark.spec.ts

@@ -0,0 +1,79 @@
+import type { Page } from "@playwright/test"
+import { expectSessionTitle } from "../../utils/waits"
+import { benchmark, expect, withBenchmarkPage } from "../benchmark"
+import { fixture } from "./session-timeline-stress.fixture"
+import { installStressSessionTabs, mockStressTimeline, stressSessionHref } from "./timeline-test-helpers"
+import { measureSessionSwitch, waitForStableTimeline } from "./session-tab-switch-probe"
+
+type Result = Awaited<ReturnType<typeof measureSessionSwitch>>
+
+benchmark("benchmarks cold and hot session tab switching", async ({ browser, report }, testInfo) => {
+  benchmark.setTimeout(180_000)
+  const results = { cold: [] as Result[], hot: [] as Result[] }
+  for (const mode of ["cold", "hot"] as const) {
+    for (let run = 0; run < 5; run++) {
+      results[mode].push(
+        await withBenchmarkPage(browser, `session-tab-switch-${mode}-${run}`, (page) => trial(page, mode), testInfo),
+      )
+    }
+  }
+  report({ results, summary: summarize(results) })
+})
+
+async function trial(page: Page, mode: "cold" | "hot") {
+  await mockStressTimeline(page)
+  await installStressSessionTabs(page)
+  if (mode === "hot") {
+    await page.goto(stressSessionHref(fixture.targetID))
+    await expectSessionTitle(page, fixture.expected.targetTitle)
+    await waitForStableTimeline(page, fixture.expected.targetMessageIDs.at(-1)!)
+    await switchSession(page, fixture.sourceID, fixture.expected.sourceTitle)
+  } else {
+    await page.goto(stressSessionHref(fixture.sourceID))
+    await expectSessionTitle(page, fixture.expected.sourceTitle)
+  }
+  await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+
+  const destinationIDs = fixture.messages[fixture.targetID].map((message) => message.info.id)
+  const sourceIDs = fixture.messages[fixture.sourceID].map((message) => message.info.id)
+  const lastID = fixture.expected.targetMessageIDs.at(-1)!
+  const href = stressSessionHref(fixture.targetID)
+  const result = await measureSessionSwitch(page, {
+    destinationIDs,
+    sourceIDs,
+    lastID,
+    href,
+    switch: () => switchSession(page, fixture.targetID, fixture.expected.targetTitle),
+  })
+  return result
+}
+
+function summarize(results: Record<"cold" | "hot", Result[]>) {
+  const stats = (values: (number | null)[]) => {
+    const sorted = values.filter((value): value is number => value !== null).sort((a, b) => a - b)
+    return {
+      min: sorted[0] ?? null,
+      median: sorted[Math.floor(sorted.length / 2)] ?? null,
+      max: sorted.at(-1) ?? null,
+      missing: values.length - sorted.length,
+    }
+  }
+  return Object.fromEntries(
+    Object.entries(results).map(([mode, values]) => [
+      mode,
+      {
+        firstDestinationObservedMs: stats(values.map((value) => value.firstDestinationObservedMs)),
+        firstCorrectObservedMs: stats(values.map((value) => value.firstCorrectObservedMs)),
+        stableObservedMs: stats(values.map((value) => value.stableObservedMs)),
+      },
+    ]),
+  )
+}
+
+async function switchSession(page: Page, sessionID: string, title: string) {
+  const href = stressSessionHref(sessionID)
+  const tab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first()
+  await expect(tab).toBeVisible()
+  await tab.click()
+  await expectSessionTitle(page, title)
+}

packages/app/e2e/performance/timeline/session-tab-switch-metrics.ts

@@ -0,0 +1,46 @@
+export type SessionSwitchSample = {
+  observedAtMs: number
+  destination: string[]
+  source: string[]
+  hasVisibleRows: boolean
+  last: boolean
+  bottomErrorPx?: number
+}
+
+export function classifySessionSwitch(samples: SessionSwitchSample[]) {
+  const firstDestination = samples.findIndex((sample) => sample.destination.length > 0)
+  const firstCorrect = samples.findIndex(isCorrectDestination)
+  const stable = samples.findIndex((_, index) => isStableSessionSwitch(samples.slice(index, index + 3)))
+  return {
+    firstDestinationObservedMs: samples[firstDestination]?.observedAtMs ?? null,
+    firstCorrectObservedMs: samples[firstCorrect]?.observedAtMs ?? null,
+    stableObservedMs: samples[stable + 2]?.observedAtMs ?? null,
+    wrongDestinationSamples: samples
+      .slice(firstDestination)
+      .filter((sample) => sample.destination.length > 0 && !sample.last).length,
+    blankSamples: samples.filter((sample) => !sample.hasVisibleRows).length,
+    unknownSamples: samples.filter(
+      (sample) => sample.hasVisibleRows && sample.destination.length === 0 && sample.source.length === 0,
+    ).length,
+    sourceSamples: samples.filter((sample) => sample.source.length > 0).length,
+  }
+}
+
+export function isCorrectDestination(sample: SessionSwitchSample) {
+  return (
+    sample.destination.length > 0 &&
+    sample.source.length === 0 &&
+    sample.last &&
+    Math.abs(sample.bottomErrorPx ?? Infinity) <= 1
+  )
+}
+
+export function isStableSessionSwitch(samples: SessionSwitchSample[]) {
+  return samples.length === 3 && samples.every(isCorrectDestination)
+}
+
+export function isStableDestination(samples: Pick<SessionSwitchSample, "last" | "bottomErrorPx">[]) {
+  return (
+    samples.length === 3 && samples.every((sample) => sample.last && Math.abs(sample.bottomErrorPx ?? Infinity) <= 1)
+  )
+}

packages/app/e2e/performance/timeline/session-tab-switch-probe.ts

@@ -0,0 +1,152 @@
+import { expect, type Page } from "@playwright/test"
+import { classifySessionSwitch, isStableDestination, type SessionSwitchSample } from "./session-tab-switch-metrics"
+
+type SessionSwitchProbe = {
+  samples: SessionSwitchSample[]
+  stop: () => void
+}
+
+async function installSessionSwitchProbe(
+  page: Page,
+  input: { destinationIDs: string[]; sourceIDs: string[]; lastID: string; href: string },
+) {
+  await page.evaluate(({ destinationIDs, sourceIDs, lastID, href }) => {
+    const destination = new Set(destinationIDs)
+    const source = new Set(sourceIDs)
+    const samples: SessionSwitchSample[] = []
+    let started: number | undefined
+    let running = true
+    const sample = () => {
+      if (!running || started === undefined) return
+      setTimeout(() => {
+        if (!running || started === undefined) return
+        const observedAtMs = performance.now() - started
+        const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
+          element.querySelector("[data-timeline-row]"),
+        )
+        if (root) {
+          const view = root.getBoundingClientRect()
+          const visible = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
+            .filter((element) => {
+              const rect = element.getBoundingClientRect()
+              return rect.bottom > view.top && rect.top < view.bottom
+            })
+            .map((element) => element.dataset.messageId!)
+          const hasVisibleRows = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")].some((element) => {
+            const rect = element.getBoundingClientRect()
+            return rect.bottom > view.top && rect.top < view.bottom
+          })
+          const spacer = root.querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')?.getBoundingClientRect()
+          samples.push({
+            observedAtMs,
+            destination: visible.filter((id) => destination.has(id)),
+            source: visible.filter((id) => source.has(id)),
+            hasVisibleRows,
+            last: visible.includes(lastID),
+            bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined,
+          })
+        } else {
+          samples.push({ observedAtMs, destination: [], source: [], hasVisibleRows: false, last: false })
+        }
+        requestAnimationFrame(sample)
+      }, 0)
+    }
+    document.addEventListener(
+      "click",
+      (event) => {
+        const link = event.target instanceof Element ? event.target.closest("a") : undefined
+        if (link?.getAttribute("href") !== href) return
+        started = performance.now()
+        requestAnimationFrame(sample)
+      },
+      { capture: true, once: true },
+    )
+    ;(window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe = {
+      samples,
+      stop: () => {
+        running = false
+      },
+    }
+  }, input)
+}
+
+async function waitForStableSessionSwitch(page: Page) {
+  await page.waitForFunction(() => {
+    const samples = (window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe?.samples
+    if (!samples) return false
+    return samples.some((_, index) => {
+      const stable = samples.slice(index, index + 3)
+      return (
+        stable.length === 3 &&
+        stable.every(
+          (sample) =>
+            sample.destination.length > 0 &&
+            sample.source.length === 0 &&
+            sample.last &&
+            Math.abs(sample.bottomErrorPx ?? Infinity) <= 1,
+        )
+      )
+    })
+  })
+}
+
+async function collectSessionSwitchResult(page: Page) {
+  const samples = await page.evaluate(() => {
+    const probe = (window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe!
+    probe.stop()
+    return probe.samples
+  })
+  return classifySessionSwitch(samples)
+}
+
+export async function measureSessionSwitch(
+  page: Page,
+  input: { destinationIDs: string[]; sourceIDs: string[]; lastID: string; href: string; switch: () => Promise<void> },
+) {
+  const { switch: run, ...probe } = input
+  await installSessionSwitchProbe(page, probe)
+  await run()
+  await waitForStableSessionSwitch(page)
+  return collectSessionSwitchResult(page)
+}
+
+export async function waitForStableTimeline(page: Page, lastID: string) {
+  const samples: Pick<SessionSwitchSample, "last" | "bottomErrorPx">[] = []
+  await expect
+    .poll(
+      async () => {
+        samples.push(
+          await page.evaluate(
+            (lastID) =>
+              new Promise<Pick<SessionSwitchSample, "last" | "bottomErrorPx">>((resolve) => {
+                requestAnimationFrame(() =>
+                  setTimeout(() => {
+                    const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
+                      element.querySelector("[data-timeline-row]"),
+                    )
+                    if (!root) {
+                      resolve({ last: false })
+                      return
+                    }
+                    const view = root.getBoundingClientRect()
+                    const last = [...root.querySelectorAll<HTMLElement>("[data-message-id]")].some((element) => {
+                      if (element.dataset.messageId !== lastID) return false
+                      const rect = element.getBoundingClientRect()
+                      return rect.bottom > view.top && rect.top < view.bottom
+                    })
+                    const spacer = root
+                      .querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')
+                      ?.getBoundingClientRect()
+                    resolve({ last, bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined })
+                  }, 0),
+                )
+              }),
+            lastID,
+          ),
+        )
+        return isStableDestination(samples.slice(-3))
+      },
+      { timeout: 30_000, intervals: [0] },
+    )
+    .toBe(true)
+}

packages/app/e2e/performance/timeline/session-timeline-benchmark.fixture.ts

@@ -0,0 +1,488 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import type { Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../../utils/waits"
+import { expect } from "../benchmark"
+
+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"
+export 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>
+}
+
+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],
+}
+
+export async function setupTimelineBenchmark(page: Page, options: { historyTurns: number; eventBatch: number }) {
+  const events: EventPayload[] = []
+  let eventBatch = options.eventBatch
+  await mockOpenCodeServer(page, {
+    directory,
+    project: project(),
+    provider: provider(),
+    sessions: [session()],
+    pageMessages: () => ({
+      items: [
+        ...Array.from({ length: options.historyTurns }, (_, index) => performanceTurn(index)).flat(),
+        userMessage,
+        assistantMessage,
+      ],
+    }),
+    events: () => events.splice(0, eventBatch),
+    eventRetry: 16,
+  })
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+  await page.setViewportSize({ width: 1366, height: 768 })
+  const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+  const text = page.locator(`[data-timeline-part-id="${textPartID}"]`).first()
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+  await expectAppVisible(scroller)
+  return {
+    scroller,
+    text,
+    transport: {
+      enqueue(payload: EventPayload | EventPayload[]) {
+        events.push(...(Array.isArray(payload) ? payload : [payload]))
+      },
+      pendingCount() {
+        return events.length
+      },
+      releaseAll() {
+        eventBatch = events.length
+      },
+    },
+    async scrollToBottom() {
+      await scroller.evaluate((element) => {
+        element.scrollTop = element.scrollHeight
+      })
+    },
+    async waitForStableGeometry() {
+      await expect
+        .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
+        .toBeLessThanOrEqual(1)
+      await page.waitForFunction((partID) => {
+        const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
+          element.querySelector(`[data-timeline-part-id="${partID}"]`),
+        )
+        if (!root) return false
+        return new Promise<boolean>((resolve) => {
+          const height = root.scrollHeight
+          requestAnimationFrame(() =>
+            requestAnimationFrame(() =>
+              resolve(root.scrollHeight === height && root.scrollHeight - root.clientHeight - root.scrollTop <= 1),
+            ),
+          )
+        })
+      }, textPartID)
+    },
+  }
+}
+
+export function buildInitialStreamEvent(deltaCount: number): EventPayload {
+  return {
+    directory,
+    payload: {
+      type: "message.part.updated",
+      properties: {
+        part: {
+          ...streamedTextPart,
+          text: `Streaming${streamChunk(0, deltaCount + 1)}\n\n\`\`\`ts\nconst initial = true\n\`\`\``,
+        },
+      },
+    },
+  }
+}
+
+export function buildStreamDeltaEvents(deltaCount: number): EventPayload[] {
+  return Array.from({ length: deltaCount }, (_, index) => ({
+    directory,
+    payload: {
+      type: "message.part.delta",
+      properties: {
+        messageID: assistantMessageID,
+        partID: textPartID,
+        field: "text",
+        delta: streamChunk(index + 1, deltaCount + 1),
+      },
+    },
+  }))
+}
+
+function performanceTurn(index: number) {
+  const suffix = String(index).padStart(4, "0")
+  const userID = `msg_0000_${suffix}_a_user`
+  const assistantID = `msg_0000_${suffix}_b_assistant`
+  const before = historicalSource(index, false)
+  const after = historicalSource(index, true)
+  const parts = [
+    ...(index % 5 === 0
+      ? [
+          {
+            id: `prt_0000_${suffix}_reasoning`,
+            sessionID,
+            messageID: assistantID,
+            type: "reasoning",
+            text: `Reviewing the existing implementation. ${"constraint analysis ".repeat(20)}`,
+            time: { start: 1690000001000 + index * 2_000, end: 1690000001200 + index * 2_000 },
+          },
+        ]
+      : []),
+    {
+      id: `prt_0000_${suffix}_assistant`,
+      sessionID,
+      messageID: assistantID,
+      type: "text",
+      text: historicalMarkdown(index),
+    },
+    ...(index % 8 === 0
+      ? [
+          {
+            id: `prt_0000_${suffix}_edit`,
+            sessionID,
+            messageID: assistantID,
+            type: "tool",
+            callID: `call_0000_${suffix}_edit`,
+            tool: "edit",
+            state: {
+              status: "completed",
+              input: { filePath: `src/history-${index}.ts` },
+              output: `Edited src/history-${index}.ts`,
+              title: `src/history-${index}.ts`,
+              metadata: {
+                filediff: { file: `src/history-${index}.ts`, additions: 48, deletions: 48, before, after },
+              },
+              time: { start: 1690000001200 + index * 2_000, end: 1690000001400 + index * 2_000 },
+            },
+          },
+        ]
+      : []),
+    ...(index % 12 === 0
+      ? [
+          {
+            id: `prt_0000_${suffix}_write`,
+            sessionID,
+            messageID: assistantID,
+            type: "tool",
+            callID: `call_0000_${suffix}_write`,
+            tool: "write",
+            state: {
+              status: "completed",
+              input: { filePath: `src/generated-${index}.tsx`, content: after },
+              output: `Wrote src/generated-${index}.tsx`,
+              title: `src/generated-${index}.tsx`,
+              metadata: {
+                filediff: { file: `src/generated-${index}.tsx`, additions: 32, deletions: 0, before: "", after },
+              },
+              time: { start: 1690000001400 + index * 2_000, end: 1690000001500 + index * 2_000 },
+            },
+          },
+        ]
+      : []),
+    ...(index % 16 === 0
+      ? [
+          {
+            id: `prt_0000_${suffix}_patch`,
+            sessionID,
+            messageID: assistantID,
+            type: "tool",
+            callID: `call_0000_${suffix}_patch`,
+            tool: "apply_patch",
+            state: {
+              status: "completed",
+              input: { patchText: realisticPatch(index) },
+              output: "Success. Updated src/components/SessionCard.tsx",
+              title: "src/components/SessionCard.tsx",
+              metadata: {
+                files: [
+                  {
+                    filePath: "src/components/SessionCard.tsx",
+                    relativePath: "src/components/SessionCard.tsx",
+                    type: "update",
+                    additions: 8,
+                    deletions: 3,
+                    patch: realisticPatch(index),
+                    before,
+                    after,
+                  },
+                ],
+              },
+              time: { start: 1690000001500 + index * 2_000, end: 1690000001700 + index * 2_000 },
+            },
+          },
+        ]
+      : []),
+  ]
+  return [
+    {
+      info: {
+        id: userID,
+        sessionID,
+        role: "user",
+        time: { created: 1690000000000 + index * 2_000 },
+        summary: { diffs: [] },
+        agent: "build",
+        model,
+      },
+      parts: [
+        {
+          id: `prt_0000_${suffix}_user`,
+          sessionID,
+          messageID: userID,
+          type: "text",
+          text: `Historical prompt ${index}`,
+        },
+      ],
+    },
+    {
+      info: {
+        id: assistantID,
+        sessionID,
+        role: "assistant",
+        time: { created: 1690000001000 + index * 2_000, completed: 1690000001500 + index * 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,
+    },
+  ]
+}
+
+function historicalMarkdown(index: number) {
+  const code = `import { For, Show, createSignal } from "solid-js"
+
+type SessionRow = { id: string; title: string; active: boolean }
+
+export function SessionList(props: { rows: SessionRow[] }) {
+  const [selected, setSelected] = createSignal<string>()
+  return (
+    <section aria-label="Sessions">
+      <For each={props.rows}>{(row) => (
+        <button classList={{ active: row.active }} onClick={() => setSelected(row.id)}>
+          <Show when={selected() === row.id} fallback={row.title}>{row.title.toUpperCase()}</Show>
+        </button>
+      )}</For>
+    </section>
+  )
+}`
+  return `## Session renderer review ${index}
+
+The active session keeps **semantic row identity** while reconciling measured content. See [Solid documentation](https://docs.solidjs.com/) and the inline \`measureElement(node)\` call.
+
+| Concern | Current behavior | Verification |
+| --- | --- | --- |
+| streaming | appends Markdown blocks | painted frames |
+| geometry | anchors visible rows | DOM coordinates |
+| tools | preserves expanded state | keyed remount probe |
+
+> Long sessions combine Markdown, syntax highlighting, tool output, and asynchronously rendered diffs.
+
+${index % 4 === 0 ? `\`\`\`tsx\n${code}\n\`\`\`\n\n\`\`\`bash\nbun typecheck\nbun test --preload ./happydom.ts ./src/pages/session\ngit diff --check\n\`\`\`` : "- preserve the viewport anchor\n- avoid replacing stable Markdown nodes\n- process provider deltas without blocking input"}`
+}
+
+function historicalSource(index: number, updated: boolean) {
+  const method = updated ? "toLocaleUpperCase(props.locale)" : "toUpperCase()"
+  const limit = updated ? 24 : 20
+  return `import { createMemo, For } from "solid-js"
+
+type Message = {
+  id: string
+  role: "user" | "assistant"
+  text: string
+  tokens: { input: number; output: number }
+}
+
+export function MessageSummary(props: { messages: Message[]; locale: string }) {
+  const visible = createMemo(() => props.messages.filter((message) => message.text.trim()).slice(-${limit}))
+  const total = createMemo(() => visible().reduce((sum, message) => sum + message.tokens.output, 0))
+  return (
+    <article data-session-index="${index}">
+      <header>{total().toLocaleString(props.locale)} output tokens</header>
+      <For each={visible()}>{(message) => <p data-role={message.role}>{message.text.${method}}</p>}</For>
+    </article>
+  )
+}
+`
+}
+
+function realisticPatch(index: number) {
+  return `*** Begin Patch
+*** Update File: src/components/SessionCard.tsx
+@@
+-const title = props.session.title.toUpperCase()
+-const messages = props.messages.slice(-20)
++const title = props.session.title.toLocaleUpperCase(props.locale)
++const messages = props.messages.filter((message) => message.text.trim()).slice(-24)
++const outputTokens = messages.reduce((sum, message) => sum + message.tokens.output, 0)
+@@
+-  <h2>{title}</h2>
++  <h2 data-session-index="${index}">{title}</h2>
++  <span>{outputTokens.toLocaleString(props.locale)} output tokens</span>
+*** End Patch`
+}
+
+export function streamChunk(index: number, count: number) {
+  if (index === 0) return `\n\n## Implementation plan\n\nStreaming **bold analysis`
+  if (index === count - 1)
+    return `\n\`\`\`\n\n## Verification\n\n- **Typecheck:** passed\n- **Timeline geometry:** stable\n- **Streaming output:** benchmark-complete <!-- stream-${index} -->`
+
+  const section = Math.floor(index / 18) + 1
+  const fragments = [
+    ` continues across three`,
+    ` or four word`,
+    ` provider deltas and`,
+    ` closes in this fragment**. <!-- stream-${index} -->\n\n`,
+    `| Concern | State`,
+    ` | Verification |\n|`,
+    ` --- | ---`,
+    ` | --- |\n|`,
+    ` markdown | incremental |`,
+    ` painted frames | <!-- stream-${index} -->\n\n`,
+    `\`\`\`tsx\nconst row: SessionRow`,
+    ` = rows[index] ??`,
+    ` fallback\nconst title =`,
+    ` row.title.toLocaleUpperCase(locale)\n`,
+    `const selected = createMemo(()`,
+    ` => row.id ===`,
+    ` activeID()) // stream-${index}\n`,
+    `// stream-${index}\n\`\`\`\n\n### Iteration ${section}\n\nStreaming **bold analysis`,
+  ]
+  return fragments[(index - 1) % fragments.length]!
+}
+
+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" },
+  }
+}

packages/app/e2e/performance/timeline/session-timeline-benchmark.spec.ts

@@ -0,0 +1,85 @@
+import { benchmark, benchmarkDiagnostics, expect } from "../benchmark"
+import {
+  buildInitialStreamEvent,
+  buildStreamDeltaEvents,
+  setupTimelineBenchmark,
+  textPartID,
+} from "./session-timeline-benchmark.fixture"
+import { startTimelineProfile } from "./session-timeline-profile"
+import {
+  collectTimelineStreamMetrics,
+  installTimelineStreamProbe,
+  startTimelineStreamProbe,
+} from "./session-timeline-stream-probe"
+
+benchmark.describe("performance: session timeline streaming", () => {
+  benchmark("streams assistant text without remounting or oscillating", async ({ page, report }) => {
+    benchmark.setTimeout(480_000)
+    const cpuThrottle = Number(process.env.TIMELINE_CPU_THROTTLE ?? 30)
+    const deltaCount = Number(process.env.TIMELINE_DELTA_COUNT ?? 160)
+    const historyTurns = Number(process.env.TIMELINE_HISTORY_TURNS ?? 320)
+    const eventBatch = Number(process.env.TIMELINE_EVENT_BATCH ?? 1)
+    const minimal = process.env.TIMELINE_MINIMAL === "1"
+    const profileCPU = process.env.TIMELINE_CPU_PROFILE === "1"
+    const profileVisual = !minimal && profileCPU && process.env.TIMELINE_VISUAL_PROFILE !== "0"
+    const fixture = await setupTimelineBenchmark(page, {
+      historyTurns,
+      eventBatch,
+    })
+
+    fixture.transport.enqueue(buildInitialStreamEvent(deltaCount))
+    const contentStart = performance.now()
+    await expect(fixture.text).toBeVisible()
+    await expect(fixture.text).toContainText("Implementation plan")
+    const initialContentObservedMs = performance.now() - contentStart
+    await fixture.scrollToBottom()
+    await fixture.waitForStableGeometry()
+
+    const profile = await startTimelineProfile(page, { cpuThrottle, profileCPU })
+    await installTimelineStreamProbe(page, { textPartID, finalIndex: deltaCount, profileVisual, minimal })
+    const deltas = buildStreamDeltaEvents(deltaCount)
+    await startTimelineStreamProbe(page)
+    fixture.transport.enqueue(deltas)
+
+    await page.waitForFunction(
+      (finalIndex) =>
+        (
+          window as Window & {
+            __timelineStreamBenchmark?: { applied: { index: number }[] }
+          }
+        ).__timelineStreamBenchmark?.applied.some((value) => value.index === finalIndex),
+      deltaCount,
+      { timeout: 420_000 },
+    )
+    await expect(fixture.text).toContainText("benchmark-complete")
+    await expect(fixture.text).toContainText("Streaming")
+    await fixture.waitForStableGeometry()
+    const metrics = await collectTimelineStreamMetrics(page, {
+      textPartID,
+      finalIndex: deltaCount,
+      navigations: benchmarkDiagnostics(page).navigations,
+    })
+    const delivered = deltas.length - fixture.transport.pendingCount()
+    await profile.stop()
+
+    report(
+      {
+        endToEndInitialContentObservedMs: initialContentObservedMs,
+        ...metrics,
+        deliveredDeltas: delivered,
+        pendingDeltas: fixture.transport.pendingCount(),
+      },
+      {
+        cpuThrottle,
+        profileCPU,
+        profileVisual,
+        minimal,
+        queuedDeltas: deltas.length,
+        historyTurns,
+        eventBatch,
+      },
+    )
+
+    await profile.reset()
+  })
+})

packages/app/e2e/performance/timeline/session-timeline-profile.ts

@@ -0,0 +1,40 @@
+import type { CDPSession, Page } from "@playwright/test"
+
+export async function startTimelineProfile(page: Page, options: { cpuThrottle: number; profileCPU: boolean }) {
+  const cdp = await page.context().newCDPSession(page)
+  if (options.cpuThrottle > 1) await cdp.send("Emulation.setCPUThrottlingRate", { rate: options.cpuThrottle })
+  if (options.profileCPU) {
+    await cdp.send("Profiler.enable")
+    await cdp.send("Profiler.setSamplingInterval", { interval: 100 })
+    await cdp.send("Profiler.start")
+  }
+  return {
+    async stop() {
+      if (!options.profileCPU) return
+      const result = await cdp.send("Profiler.stop")
+      const self = new Map<number, number>()
+      result.profile.samples?.forEach((id, index) => {
+        const duration = (result.profile.timeDeltas?.[index] ?? 0) / 1_000
+        self.set(id, (self.get(id) ?? 0) + duration)
+      })
+      console.log(
+        "timeline cpu profile",
+        JSON.stringify(
+          result.profile.nodes
+            .map((node) => ({
+              function: node.callFrame.functionName || "(anonymous)",
+              url: node.callFrame.url,
+              line: node.callFrame.lineNumber + 1,
+              selfMs: self.get(node.id) ?? 0,
+            }))
+            .filter((node) => node.selfMs > 1)
+            .sort((a, b) => b.selfMs - a.selfMs)
+            .slice(0, 40),
+        ),
+      )
+    },
+    async reset() {
+      if (options.cpuThrottle > 1) await cdp.send("Emulation.setCPUThrottlingRate", { rate: 1 })
+    },
+  }
+}

packages/app/e2e/performance/timeline/session-timeline-stream-probe.ts

@@ -0,0 +1,547 @@
+import type { Page } from "@playwright/test"
+
+const STREAM_MARKER_PATTERN = "stream-(\\d+)"
+const STREAM_FRAGMENT_COUNT = 18
+
+type TimelineProbeState = {
+  started: number
+  ended: number
+  profileVisual: boolean
+  minimal: boolean
+  frames: number[]
+  frameAt: number[]
+  applied: { at: number; index: number }[]
+  geometry: {
+    scrollTop: number
+    scrollHeight: number
+    clientHeight: number
+    distance: number
+    virtualHeight: number
+    headerHeight: number
+  }[]
+  blanks: number
+  longTasks: number[]
+  layoutShifts: number[]
+  visibleMounts: number
+  visibleUnmounts: number
+  visibleRows: Set<Element>
+  visibleSubtreeMounts: string[]
+  visibleSubtreeUnmounts: string[]
+  visibleSubtreeReplacements: number
+  visibleSubtreeDropouts: string[]
+  visibleSubtrees: Map<string, Element>
+  subtreeKeys: WeakMap<Element, string>
+  maxOverlap: number
+  maxGap: number
+  maxPartTopMovement: number
+  previousPartTop: number
+  slowFrames: {
+    duration: number
+    index: number
+    phase: "stream" | "boundary" | "complete" | "unknown"
+    tokenSpans: number
+    blocks: number
+    codeBlocks: number
+    height: number
+    distance: number
+  }[]
+  scroll: {
+    calls: number
+    callNoops: number
+    sameFrameCalls: number
+    assignments: number
+    assignmentNoops: number
+    lastCallFrame: number
+    frame: number
+  }
+  row: HTMLElement
+  markdown: HTMLElement
+  running: boolean
+  previous: number
+  cleanup: () => void
+  start: () => void
+}
+
+export async function installTimelineStreamProbe(
+  page: Page,
+  options: { textPartID: string; finalIndex: number; profileVisual: boolean; minimal: boolean },
+) {
+  await page.evaluate(
+    ({ textPartID, finalIndex, profileVisual, minimal, markerPattern, fragmentCount }) => {
+      const part = document.querySelector<HTMLElement>(`[data-timeline-part-id="${textPartID}"]`)
+      const row = part?.closest<HTMLElement>("[data-timeline-row]")
+      const markdown = part?.querySelector<HTMLElement>('[data-component="markdown"]')
+      const root = part?.closest<HTMLElement>(".scroll-view__viewport")
+      if (!part || !row || !markdown || !root) throw new Error("missing streaming benchmark nodes")
+      const viewport = root.getBoundingClientRect()
+      const state: TimelineProbeState = {
+        started: 0,
+        ended: Infinity,
+        profileVisual,
+        minimal,
+        frames: [],
+        frameAt: [],
+        applied: [],
+        geometry: [],
+        blanks: 0,
+        longTasks: [],
+        layoutShifts: [],
+        visibleMounts: 0,
+        visibleUnmounts: 0,
+        visibleRows: new Set(
+          [...root.querySelectorAll("[data-timeline-key]")].filter((element) => {
+            const rect = element.getBoundingClientRect()
+            return rect.bottom > viewport.top && rect.top < viewport.bottom
+          }),
+        ),
+        visibleSubtreeMounts: [],
+        visibleSubtreeUnmounts: [],
+        visibleSubtreeReplacements: 0,
+        visibleSubtreeDropouts: [],
+        visibleSubtrees: new Map<string, Element>(),
+        subtreeKeys: new WeakMap<Element, string>(),
+        maxOverlap: 0,
+        maxGap: 0,
+        maxPartTopMovement: 0,
+        previousPartTop: part.getBoundingClientRect().top,
+        slowFrames: [],
+        scroll: {
+          calls: 0,
+          callNoops: 0,
+          sameFrameCalls: 0,
+          assignments: 0,
+          assignmentNoops: 0,
+          lastCallFrame: -1,
+          frame: 0,
+        },
+        row,
+        markdown,
+        running: false,
+        previous: 0,
+        cleanup: () => {},
+        start: () => {},
+      }
+      ;(window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark = state
+      const scrollTo = Element.prototype.scrollTo
+      const scrollTop = Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop")!
+      if (profileVisual) {
+        Element.prototype.scrollTo = function (...args) {
+          state.scroll.calls += 1
+          const top = typeof args[0] === "object" ? args[0]?.top : args[1]
+          if (typeof top === "number") {
+            const target = Math.min(top, this.scrollHeight - this.clientHeight)
+            if (Math.abs(this.scrollTop - target) < 1) state.scroll.callNoops += 1
+          }
+          if (state.scroll.lastCallFrame === state.scroll.frame) state.scroll.sameFrameCalls += 1
+          state.scroll.lastCallFrame = state.scroll.frame
+          return scrollTo.apply(this, args)
+        }
+        Object.defineProperty(Element.prototype, "scrollTop", {
+          configurable: true,
+          get: scrollTop.get,
+          set(value) {
+            state.scroll.assignments += 1
+            if (Math.abs(this.scrollTop - value) < 1) state.scroll.assignmentNoops += 1
+            scrollTop.set!.call(this, value)
+          },
+        })
+      }
+
+      const recordLongTasks = (entries: PerformanceEntry[]) => {
+        if (!state.running) return
+        state.longTasks.push(
+          ...entries
+            .filter((entry) => entry.startTime >= state.started && entry.startTime <= state.ended)
+            .map((entry) => entry.duration),
+        )
+      }
+      const longTaskObserver = new PerformanceObserver((list) => recordLongTasks(list.getEntries()))
+      longTaskObserver.observe({ type: "longtask" })
+      const recordLayoutShifts = (entries: PerformanceEntry[]) => {
+        if (!state.running) return
+        state.layoutShifts.push(
+          ...entries
+            .map((entry) => {
+              const shift = entry as LayoutShiftEntry
+              if (shift.startTime < state.started || shift.hadRecentInput) return
+              return shift.value
+            })
+            .filter((value): value is number => value !== undefined),
+        )
+      }
+      const layoutShiftObserver = profileVisual
+        ? new PerformanceObserver((list) => recordLayoutShifts(list.getEntries()))
+        : undefined
+      layoutShiftObserver?.observe({ type: "layout-shift", buffered: true })
+
+      const visible = (element: Element) => {
+        const rect = element.getBoundingClientRect()
+        const viewport = root.getBoundingClientRect()
+        const style = getComputedStyle(element)
+        return (
+          element.isConnected &&
+          rect.width > 0 &&
+          rect.height > 0 &&
+          rect.bottom > viewport.top &&
+          rect.top < viewport.bottom &&
+          style.display !== "none" &&
+          style.visibility !== "hidden" &&
+          Number(style.opacity) > 0
+        )
+      }
+      const critical = [
+        "[data-timeline-part-id]",
+        '[data-component="edit-content"]',
+        '[data-component="apply-patch-file-diff"]',
+        '[data-component="file"]',
+        '[data-component="markdown-code"]',
+        "[data-markdown-block]",
+      ].join(",")
+      const describe = (element: Element) => {
+        const cached = state.subtreeKeys.get(element)
+        if (!element.isConnected && cached) return cached
+        const part = element.closest<HTMLElement>("[data-timeline-part-id]")?.dataset.timelinePartId ?? "unknown"
+        const block = element
+          .closest<HTMLElement>("[data-markdown-key]")
+          ?.dataset.markdownKey?.replace(/:(?:code|full|live)$/, "")
+        const component =
+          element.getAttribute("data-component") ?? element.getAttribute("data-markdown-block") ?? element.tagName
+        const key = `${part}:${block ?? "root"}:${component}`
+        state.subtreeKeys.set(element, key)
+        return key
+      }
+      const recordMutations = (records: MutationRecord[]) => {
+        if (!state.running) return
+        records.forEach((record) => {
+          record.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement && node.matches("[data-timeline-key]") && visible(node)) {
+              state.visibleMounts += 1
+              state.visibleRows.add(node)
+            }
+            if (!(node instanceof Element)) return
+            const added = [node, ...node.querySelectorAll(critical)].filter((element) => element.matches(critical))
+            added.forEach((element) => {
+              if (visible(element)) state.visibleSubtreeMounts.push(describe(element))
+            })
+          })
+          record.removedNodes.forEach((node) => {
+            if (node instanceof HTMLElement && node.matches("[data-timeline-key]") && state.visibleRows.delete(node))
+              state.visibleUnmounts += 1
+            if (!(node instanceof Element)) return
+            const removed = [node, ...node.querySelectorAll(critical)].filter((element) => element.matches(critical))
+            removed.forEach((element) => {
+              const key = describe(element)
+              if (state.visibleSubtrees.get(key) === element) state.visibleSubtreeUnmounts.push(key)
+            })
+          })
+        })
+      }
+      const mutationObserver = profileVisual ? new MutationObserver(recordMutations) : undefined
+      mutationObserver?.observe(root, { childList: true, subtree: true })
+      const currentPart = () => root.querySelector<HTMLElement>(`[data-timeline-part-id="${textPartID}"]`)
+      const observeProgress = (at: number) => {
+        if (!state.running) return
+        const content = currentPart()?.textContent ?? ""
+        const index = content.includes("benchmark-complete")
+          ? finalIndex
+          : Number(content.match(new RegExp(markerPattern, "g"))?.at(-1)?.match(/\d+/)?.[0] ?? -1)
+        if (index >= 0 && index !== state.applied.at(-1)?.index) state.applied.push({ at, index })
+      }
+      const progressObserver = new MutationObserver(() => observeProgress(performance.now()))
+      progressObserver.observe(root, { characterData: true, childList: true, subtree: true })
+      state.cleanup = () => {
+        recordLongTasks(longTaskObserver.takeRecords())
+        recordLayoutShifts(layoutShiftObserver?.takeRecords() ?? [])
+        recordMutations(mutationObserver?.takeRecords() ?? [])
+        if (progressObserver.takeRecords().length) observeProgress(performance.now())
+        longTaskObserver.disconnect()
+        layoutShiftObserver?.disconnect()
+        mutationObserver?.disconnect()
+        progressObserver.disconnect()
+        if (!profileVisual) return
+        Element.prototype.scrollTo = scrollTo
+        Object.defineProperty(Element.prototype, "scrollTop", scrollTop)
+      }
+
+      const sample = (now: number) => {
+        if (!state.running) return
+        state.frameAt.push(now)
+        observeProgress(now)
+        if (minimal) {
+          state.frames.push(now - state.previous)
+          state.previous = now
+          requestAnimationFrame(sample)
+          return
+        }
+        setTimeout(() => {
+          if (!state.running) return
+          state.scroll.frame += 1
+          const duration = now - state.previous
+          state.frames.push(duration)
+          state.previous = now
+          const virtualRoot = root.querySelector<HTMLElement>("[data-timeline-virtual-content]")
+          const header = root.querySelector<HTMLElement>("[data-session-title]")
+          state.geometry.push({
+            scrollTop: root.scrollTop,
+            scrollHeight: root.scrollHeight,
+            clientHeight: root.clientHeight,
+            distance: root.scrollHeight - root.clientHeight - root.scrollTop,
+            virtualHeight: virtualRoot?.getBoundingClientRect().height ?? 0,
+            headerHeight: header?.getBoundingClientRect().height ?? 0,
+          })
+          const viewport = root.getBoundingClientRect()
+          if (profileVisual) {
+            const visibleRows = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")]
+              .map((element) => ({ element, rect: element.getBoundingClientRect() }))
+              .filter((item) => item.rect.bottom > viewport.top && item.rect.top < viewport.bottom)
+              .sort((a, b) => a.rect.top - b.rect.top)
+            state.visibleRows = new Set(visibleRows.map((item) => item.element))
+            const rows = visibleRows.map((item) => item.rect)
+            rows.slice(1).forEach((rect, index) => {
+              const previous = rows[index]!
+              state.maxOverlap = Math.max(state.maxOverlap, previous.bottom - rect.top)
+              state.maxGap = Math.max(state.maxGap, rect.top - previous.bottom)
+            })
+            const partTop = part.getBoundingClientRect().top
+            state.maxPartTopMovement = Math.max(state.maxPartTopMovement, Math.abs(partTop - state.previousPartTop))
+            state.previousPartTop = partTop
+          }
+          const visibleRow = [...root.querySelectorAll<HTMLElement>("[data-timeline-row]")].some((element) => {
+            const rect = element.getBoundingClientRect()
+            return rect.bottom > viewport.top && rect.top < viewport.bottom
+          })
+          if (!visibleRow) state.blanks += 1
+          if (profileVisual) {
+            const subtrees = new Map<string, { element: Element; rendered: boolean }>()
+            const visibleSubtrees = new Map<string, Element>()
+            root.querySelectorAll(critical).forEach((element) => {
+              const key = describe(element)
+              const rect = element.getBoundingClientRect()
+              const style = getComputedStyle(element)
+              const rendered =
+                element.isConnected &&
+                rect.width > 0 &&
+                rect.height > 0 &&
+                style.display !== "none" &&
+                style.visibility !== "hidden" &&
+                Number(style.opacity) > 0
+              subtrees.set(key, { element, rendered })
+              if (rendered && rect.bottom > viewport.top && rect.top < viewport.bottom) {
+                const previous = state.visibleSubtrees.get(key)
+                if (previous && previous !== element && key.startsWith(`${textPartID}:`))
+                  state.visibleSubtreeReplacements += 1
+                visibleSubtrees.set(key, element)
+              }
+            })
+            state.visibleSubtrees.forEach((element, key) => {
+              const current = subtrees.get(key)
+              if (key.startsWith(`${textPartID}:`) && !current?.rendered) {
+                const markdown = part.querySelector<HTMLElement>('[data-component="markdown"]')
+                state.visibleSubtreeDropouts.push(
+                  `${key}:projection=${markdown?.dataset.markdownProjectionLength}/${markdown?.dataset.markdownProjectionBlocks}:result=${markdown?.dataset.markdownResultLength}/${markdown?.dataset.markdownResultBlocks}:applied=${markdown?.dataset.markdownAppliedBlocks}:dom=${markdown?.children.length}`,
+                )
+              }
+              if (element.matches('[data-component="file"]')) {
+                const hadLines = element.hasAttribute("data-profiler-had-lines")
+                const hasLines = element.shadowRoot?.querySelector("[data-line]") != null
+                if (hasLines) element.setAttribute("data-profiler-had-lines", "")
+                if (hadLines && !hasLines) state.visibleSubtreeDropouts.push(`${key}:shadow-lines`)
+              }
+            })
+            state.visibleSubtrees = visibleSubtrees
+          }
+          if (profileVisual && duration > 33.34) {
+            const livePart = currentPart()
+            const content = livePart?.textContent ?? ""
+            const complete = content.includes("benchmark-complete")
+            const index = complete
+              ? finalIndex
+              : Number(content.match(new RegExp(markerPattern, "g"))?.at(-1)?.match(/\d+/)?.[0] ?? -1)
+            state.slowFrames.push({
+              duration,
+              index,
+              phase: complete
+                ? "complete"
+                : index >= 0 && index % fragmentCount === 0
+                  ? "boundary"
+                  : index >= 0
+                    ? "stream"
+                    : "unknown",
+              tokenSpans: livePart?.querySelectorAll(".shiki span").length ?? 0,
+              blocks: livePart?.querySelectorAll("[data-markdown-block]").length ?? 0,
+              codeBlocks: livePart?.querySelectorAll('[data-component="markdown-code"]').length ?? 0,
+              height: livePart?.getBoundingClientRect().height ?? 0,
+              distance: root.scrollHeight - root.clientHeight - root.scrollTop,
+            })
+          }
+          requestAnimationFrame(sample)
+        }, 0)
+      }
+      state.start = () => {
+        state.started = performance.now()
+        state.previous = state.started
+        state.running = true
+        requestAnimationFrame(sample)
+      }
+    },
+    { ...options, markerPattern: STREAM_MARKER_PATTERN, fragmentCount: STREAM_FRAGMENT_COUNT },
+  )
+}
+
+export function startTimelineStreamProbe(page: Page) {
+  return page.evaluate(() => {
+    const state = (window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark
+    if (!state) throw new Error("missing streaming benchmark state")
+    state.start()
+  })
+}
+
+type LayoutShiftEntry = PerformanceEntry & { value: number; hadRecentInput?: boolean }
+
+export function layoutShiftValue(
+  entry: Pick<LayoutShiftEntry, "startTime" | "value" | "hadRecentInput">,
+  start: number,
+) {
+  if (entry.startTime < start || entry.hadRecentInput) return
+  return entry.value
+}
+
+export function removeVisibleRow<T>(visible: Set<T>, row: T) {
+  return visible.delete(row)
+}
+
+export function streamProgress(content: string) {
+  const index = Number(content.match(new RegExp(STREAM_MARKER_PATTERN, "g"))?.at(-1)?.match(/\d+/)?.[0] ?? -1)
+  return {
+    index,
+    phase: content.includes("benchmark-complete")
+      ? ("complete" as const)
+      : index >= 0 && index % STREAM_FRAGMENT_COUNT === 0
+        ? ("boundary" as const)
+        : index >= 0
+          ? ("stream" as const)
+          : ("unknown" as const),
+  }
+}
+
+export async function collectTimelineStreamMetrics(
+  page: Page,
+  options: { textPartID: string; finalIndex: number; navigations: string[] },
+) {
+  return page.evaluate(({ textPartID, finalIndex, navigations }) => {
+    const state = (window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark
+    if (!state) throw new Error(`missing streaming benchmark state after navigation: ${JSON.stringify(navigations)}`)
+    state.ended = performance.now()
+    state.cleanup()
+    state.running = false
+    const part = document.querySelector<HTMLElement>(`[data-timeline-part-id="${textPartID}"]`)
+    const row = part?.closest<HTMLElement>("[data-timeline-row]")
+    const markdown = part?.querySelector<HTMLElement>('[data-component="markdown"]')
+    const sorted = state.frames.slice().sort((a, b) => a - b)
+    const duration = state.frames.reduce((sum, value) => sum + value, 0)
+    const longestSlowStreak = state.frames.reduce(
+      (result, value) => {
+        const current = value > 33.34 ? result.current + 1 : 0
+        return { current, longest: Math.max(result.longest, current) }
+      },
+      { current: 0, longest: 0 },
+    ).longest
+    const busyStart = state.applied.at(0)?.at
+    const completion = state.applied.find((value) => value.index === finalIndex)
+    const busyEnd = completion?.at
+    const busyFrames =
+      busyStart === undefined || busyEnd === undefined
+        ? []
+        : state.frames.filter((_, index) => state.frameAt[index]! >= busyStart && state.frameAt[index]! <= busyEnd)
+    const busySorted = busyFrames.slice().sort((a, b) => a - b)
+    const busyDuration = busyFrames.reduce((sum, value) => sum + value, 0)
+    const completionObservedMs = (completion?.at ?? NaN) - state.started
+    const visual = state.profileVisual
+      ? {
+          layoutShiftValueSum: state.layoutShifts.reduce((sum, value) => sum + value, 0),
+          maxLayoutShiftValue: Math.max(0, ...state.layoutShifts),
+          visibleMounts: state.visibleMounts,
+          visibleUnmounts: state.visibleUnmounts,
+          visibleSubtreeMounts: state.visibleSubtreeMounts,
+          visibleSubtreeUnmounts: [...new Set(state.visibleSubtreeUnmounts)],
+          visibleSubtreeReplacements: state.visibleSubtreeReplacements,
+          visibleSubtreeDropouts: [...new Set(state.visibleSubtreeDropouts)],
+          maxOverlapPx: state.maxOverlap,
+          maxGapPx: state.maxGap,
+          maxPartTopMovementPx: state.maxPartTopMovement,
+          slowestRafGaps: state.slowFrames
+            .sort((a, b) => b.duration - a.duration)
+            .slice(0, 20)
+            .map((frame) => ({
+              durationMs: frame.duration,
+              index: frame.index,
+              phase: frame.phase,
+              tokenSpans: frame.tokenSpans,
+              blocks: frame.blocks,
+              codeBlocks: frame.codeBlocks,
+              heightPx: frame.height,
+              distancePx: frame.distance,
+            })),
+          slowRafGapPhases: Object.fromEntries(
+            ["stream", "boundary", "complete", "unknown"].map((phase) => {
+              const frames = state.slowFrames.filter((frame) => frame.phase === phase)
+              return [
+                phase,
+                {
+                  count: frames.length,
+                  totalMs: frames.reduce((sum, frame) => sum + frame.duration, 0),
+                  maxMs: Math.max(0, ...frames.map((frame) => frame.duration)),
+                },
+              ]
+            }),
+          ),
+          scroll: state.scroll,
+        }
+      : null
+    const geometry = state.minimal
+      ? null
+      : {
+          maxDistancePx: Math.max(0, ...state.geometry.map((sample) => sample.distance)),
+          finalDistancePx: state.geometry.at(-1)?.distance ?? 0,
+          final: state.geometry.at(-1),
+          distanceTransitionsPx: state.geometry
+            .map((sample) => Math.round(sample.distance))
+            .filter((value, index, values) => index === 0 || value !== values[index - 1]),
+          bottomDriftTransitions: state.geometry.slice(1).filter((value, index) => {
+            const previous = state.geometry[index]?.distance ?? 0
+            return previous <= 1 && value.distance > 1
+          }).length,
+          blankSamples: state.blanks,
+        }
+    return {
+      capabilities: { visual: state.profileVisual, geometry: !state.minimal },
+      completionObservedMs,
+      deltasPerSecond: Number.isFinite(completionObservedMs) ? finalIndex / (completionObservedMs / 1_000) : null,
+      rafGapSamples: state.frames.length,
+      rafCallbackRate: duration ? (state.frames.length * 1000) / duration : 0,
+      observedProgressWindowRafCallbackRate: busyDuration ? (busyFrames.length * 1000) / busyDuration : null,
+      observedProgressWindowRafGapP95Ms: busySorted[Math.floor(busySorted.length * 0.95)] ?? null,
+      observedProgressWindowRafGaps: busyFrames.length,
+      maxObservedProgressIndex: Math.max(-1, ...state.applied.map((value) => value.index)),
+      observedProgressTransitions: state.applied.length,
+      rafGapP50Ms: sorted[Math.floor(sorted.length * 0.5)] ?? 0,
+      rafGapP95Ms: sorted[Math.floor(sorted.length * 0.95)] ?? 0,
+      rafGapP99Ms: sorted[Math.floor(sorted.length * 0.99)] ?? 0,
+      maxRafGapMs: sorted.at(-1) ?? 0,
+      rafGapsOver33Ms: state.frames.filter((value) => value > 33.34).length,
+      rafGapsOver50Ms: state.frames.filter((value) => value > 50).length,
+      missedFrameBudgetEquivalents: state.frames.reduce(
+        (sum, value) => sum + Math.max(0, Math.round(value / 16.67) - 1),
+        0,
+      ),
+      longestRafGapOver33MsStreak: longestSlowStreak,
+      longTaskCount: state.longTasks.length,
+      longTaskTimeMs: state.longTasks.reduce((sum, value) => sum + value, 0),
+      visual,
+      geometry,
+      rowReplaced: row !== state.row,
+      markdownReplaced: markdown !== state.markdown,
+      domTextCharacters: part?.textContent?.length ?? 0,
+    }
+  }, options)
+}

packages/app/e2e/performance/timeline/session-timeline-stress.fixture.ts

@@ -0,0 +1,335 @@
+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 {
+  const prose = lorem(index * 13 + partIndex, length)
+  const text =
+    index % 12 === 0
+      ? `${prose}\n\n\`\`\`ts\n${code(index, 80)}\n\`\`\``
+      : index % 5 === 0
+        ? `${prose}\n\n\`\`\`ts\nexport const value = "${lorem(index, 220)}"\n\`\`\``
+        : index % 7 === 0
+          ? `${prose}\n\nThe wrapped inline value is \`${lorem(index, 180)}\`.`
+          : prose
+  return { id: id(`prt_text_${partIndex}`, index), type: "text", text }
+}
+
+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) {
+  const lines = seed % 12 === 0 ? 300 : seed % 8 === 0 ? 2 : 38
+  const before = code(seed, lines, seed % 10 === 0 ? 280 : 32)
+  const after =
+    lines === 2
+      ? before.replace("value1", "updatedValue1")
+      : lines === 300
+        ? code(seed + 1, lines, seed % 10 === 0 ? 280 : 32)
+        : before.replace("value4", "updatedValue4").replace("value20", "updatedValue20")
+  return {
+    file,
+    additions: lines === 300 ? 300 : lines === 2 ? 1 : 2,
+    deletions: lines === 300 ? 300 : lines === 2 ? 1 : 2,
+    before,
+    after,
+  }
+}
+
+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, width = 32) {
+  return Array.from(
+    { length: lines },
+    (_, index) => `export const value${index} = "${lorem(seed + index, width)}"`,
+  ).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",
+    sourceMessageIDs: sourceMessages
+      .filter((message) => message.info.role === "user")
+      .map((message) => message.info.id),
+    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/performance/timeline/timeline-test-helpers.ts

@@ -0,0 +1,67 @@
+import type { Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../../utils/mock-server"
+import { fixture } from "./session-timeline-stress.fixture"
+
+export async function installTimelineSettings(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+}
+
+export function mockStressTimeline(page: Page) {
+  return mockOpenCodeServer(page, {
+    sessions: fixture.sessions,
+    provider: fixture.provider,
+    directory: fixture.directory,
+    project: fixture.project,
+    pageMessages: (sessionID) => ({ items: fixture.messages[sessionID as keyof typeof fixture.messages] ?? [] }),
+  })
+}
+
+export async function installStressSessionTabs(page: Page) {
+  const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+  await page.addInitScript(
+    ({ directory, sourceID, targetID, dirBase64, server }) => {
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({
+          projects: { local: [{ worktree: directory, expanded: true }] },
+          lastProject: { local: directory },
+        }),
+      )
+      localStorage.setItem(
+        "opencode.global.dat:tabs",
+        JSON.stringify(
+          [sourceID, targetID].map((sessionId) => ({
+            type: "session",
+            server,
+            dirBase64,
+            sessionId,
+          })),
+        ),
+      )
+    },
+    {
+      directory: fixture.directory,
+      sourceID: fixture.sourceID,
+      targetID: fixture.targetID,
+      dirBase64: base64Encode(fixture.directory),
+      server,
+    },
+  )
+}
+
+export function stressSessionHref(sessionID: string) {
+  return `/${base64Encode(fixture.directory)}/session/${sessionID}`
+}

packages/app/e2e/performance/unit/chrome-trace-write.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test"
+import { mkdtemp, rm } from "node:fs/promises"
+import path from "node:path"
+import os from "node:os"
+import { prepareChromeTrace } from "../chrome-trace"
+
+test("creates the configured trace directory", async () => {
+  const root = await mkdtemp(path.join(os.tmpdir(), "opencode-trace-"))
+  try {
+    const file = await prepareChromeTrace(path.join(root, "nested", "traces"), "session/tab", false, "test")
+    expect(file).toEndWith("-session-tab-458ed9e3-test.json")
+  } finally {
+    await rm(root, { recursive: true, force: true })
+  }
+})

packages/app/e2e/performance/unit/session-tab-repaint-probe.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "bun:test"
+import { compressCachedRepaintTrace, layoutShiftSample } from "../timeline/session-tab-repaint-probe"
+
+test("compresses repeated repaint states without losing frame samples", () => {
+  const state = {
+    root: 1,
+    scrollTop: 10,
+    scrollHeight: 20,
+    bottomErrorPx: 0,
+    last: true,
+    rows: [{ key: "row", node: 2, top: 0, bottom: 10 }],
+    mounted: 1,
+    center: "content",
+  }
+  const trace = {
+    timeOriginEpochMs: 1_000,
+    startedAtPerformanceMs: 100,
+    samples: [
+      { observedAtMs: 16, ...state, destination: ["target"], source: [] },
+      { observedAtMs: 32, ...state, destination: ["target"], source: [] },
+      { observedAtMs: 48, ...state, scrollTop: 11, destination: ["target"], source: [] },
+    ],
+    mutations: [{ observedAtMs: 20, changed: [{ type: "add", node: 2 }] }],
+    shifts: [{ occurredAtMs: 24, value: 0.1 }],
+    windowMs: 1_000,
+    running: false,
+    stop() {},
+  }
+  const compressed = compressCachedRepaintTrace(trace)
+  const samples = compressed.samples.flatMap((group) =>
+    group.observedAtMs.map((observedAtMs) => ({ observedAtMs, ...group.state })),
+  )
+
+  expect(samples).toEqual(trace.samples)
+  expect(compressed.mutations).toEqual(trace.mutations)
+  expect(compressed.shifts).toEqual(trace.shifts)
+})
+
+test("records layout shifts at occurrence time within the probe window", () => {
+  expect(layoutShiftSample({ startTime: 99, value: 0.1 }, 100)).toBeUndefined()
+  expect(layoutShiftSample({ startTime: 124, value: 0.2 }, 100)).toEqual({ occurredAtMs: 24, value: 0.2 })
+})

packages/app/e2e/performance/unit/session-tab-switch-metrics.test.ts

@@ -0,0 +1,54 @@
+import { expect, test } from "bun:test"
+import { classifySessionSwitch } from "../timeline/session-tab-switch-metrics"
+
+test("counts source and blank samples before the destination is observed", () => {
+  const result = classifySessionSwitch([
+    { observedAtMs: 16, destination: [], source: ["source"], hasVisibleRows: true, last: false },
+    { observedAtMs: 32, destination: [], source: [], hasVisibleRows: false, last: false },
+    { observedAtMs: 48, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+    { observedAtMs: 64, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+    { observedAtMs: 80, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+  ])
+
+  expect(result.blankSamples).toBe(1)
+  expect(result.sourceSamples).toBe(1)
+  expect(result.unknownSamples).toBe(0)
+  expect(result.firstDestinationObservedMs).toBe(48)
+  expect(result.stableObservedMs).toBe(80)
+})
+
+test("does not classify mixed source and destination content as correct", () => {
+  const result = classifySessionSwitch([
+    {
+      observedAtMs: 16,
+      destination: ["destination"],
+      source: ["source"],
+      hasVisibleRows: true,
+      last: true,
+      bottomErrorPx: 0,
+    },
+    { observedAtMs: 32, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+    { observedAtMs: 48, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+    { observedAtMs: 64, destination: ["destination"], source: [], hasVisibleRows: true, last: true, bottomErrorPx: 0 },
+  ])
+
+  expect(result.firstCorrectObservedMs).toBe(32)
+  expect(result.stableObservedMs).toBe(64)
+})
+
+test("reports missing correctness without throwing", () => {
+  const result = classifySessionSwitch([
+    {
+      observedAtMs: 16,
+      destination: ["destination"],
+      source: ["source"],
+      hasVisibleRows: true,
+      last: true,
+      bottomErrorPx: 0,
+    },
+  ])
+
+  expect(result.firstDestinationObservedMs).toBe(16)
+  expect(result.firstCorrectObservedMs).toBeNull()
+  expect(result.stableObservedMs).toBeNull()
+})

packages/app/e2e/performance/unit/session-timeline-stream-probe.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "bun:test"
+import { streamChunk } from "../timeline/session-timeline-benchmark.fixture"
+import { streamProgress } from "../timeline/session-timeline-stream-probe"
+
+test("classifies emitted stream markers using the fixture cycle", () => {
+  expect(streamProgress("before stream-17 after stream-18")).toEqual({ index: 18, phase: "boundary" })
+  expect(streamProgress("before stream-18 after stream-19")).toEqual({ index: 19, phase: "stream" })
+  expect(streamProgress("benchmark-complete stream-36")).toEqual({ index: 36, phase: "complete" })
+  expect(streamProgress("no marker")).toEqual({ index: -1, phase: "unknown" })
+})
+
+test("emits progress markers at fixture boundaries", () => {
+  expect(streamProgress(streamChunk(18, 160))).toEqual({ index: 18, phase: "boundary" })
+})

packages/app/e2e/performance/unit/session-timeline-visual-tracking.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test"
+import { layoutShiftValue, removeVisibleRow } from "../timeline/session-timeline-stream-probe"
+
+test("excludes layout shifts before the probe window and recent input", () => {
+  expect(layoutShiftValue({ startTime: 9, value: 0.1 }, 10)).toBeUndefined()
+  expect(layoutShiftValue({ startTime: 10, value: 0.2, hadRecentInput: true }, 10)).toBeUndefined()
+  expect(layoutShiftValue({ startTime: 11, value: 0.3 }, 10)).toBe(0.3)
+})
+
+test("classifies removed rows from their last painted visibility", () => {
+  const row = {}
+  const visible = new Set([row])
+
+  expect(removeVisibleRow(visible, row)).toBe(true)
+  expect(removeVisibleRow(visible, row)).toBe(false)
+})

packages/app/e2e/regression/review-line-comment.spec.ts

@@ -0,0 +1,157 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ReviewLineCommentRegression"
+const sessionID = "ses_review_line_comment_regression"
+const title = "Review line comment regression"
+
+test.beforeEach(async ({ page }) => {
+  await openReview(page)
+})
+
+test("opens the comment editor when code is clicked", async ({ page }) => {
+  const review = page.locator('[data-component="session-review"]')
+  const line = review.getByText("export const value = 'after'", { exact: true })
+  await expectAppVisible(line)
+  await line.click()
+
+  await expect(review.getByRole("textbox")).toBeVisible()
+})
+
+test("opens the comment editor when a line number is clicked", async ({ page }) => {
+  const review = page.locator('[data-component="session-review"]')
+  const lineNumber = review.locator('[data-column-number="1"]').last()
+  await expectAppVisible(lineNumber)
+  await lineNumber.click()
+
+  await expect(review.getByRole("textbox")).toBeVisible()
+})
+
+test("opens the comment editor for a line number range", async ({ page }) => {
+  const review = page.locator('[data-component="session-review"]')
+  const start = review.locator('[data-column-number="1"]').last()
+  const end = review.locator('[data-column-number="3"]').last()
+  await expectAppVisible(start)
+  await expectAppVisible(end)
+
+  const from = await start.boundingBox()
+  const to = await end.boundingBox()
+  if (!from || !to) throw new Error("Missing line number bounds")
+  await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2)
+  await page.mouse.up()
+
+  await expect(review.getByRole("textbox")).toBeVisible()
+})
+
+test("shows a comment button when a line number is hovered", async ({ page }) => {
+  const review = page.locator('[data-component="session-review"]')
+  const lineNumber = review.locator('[data-column-number="1"]').last()
+  await expectAppVisible(lineNumber)
+
+  const comment = review.getByRole("button", { name: "Comment", exact: true })
+  await expect(async () => {
+    await page.mouse.move(0, 0)
+    await lineNumber.hover()
+    await expect(comment).toBeVisible({ timeout: 500 })
+  }).toPass()
+  await comment.click()
+  await expect(review.getByRole("textbox")).toBeVisible()
+})
+
+test("stages a submitted line comment in the prompt context", async ({ page }) => {
+  const requests: string[] = []
+  page.on("request", (request) => {
+    if (request.method() !== "GET") requests.push(`${request.method()} ${new URL(request.url()).pathname}`)
+  })
+
+  const review = page.locator('[data-component="session-review"]')
+  await review.getByText("export const value = 'after'", { exact: true }).click()
+  await review.getByRole("textbox").fill("Use the existing value instead")
+  await review.locator('[data-slot="line-comment-action"][data-variant="primary"]').click()
+
+  await expect(review.getByText("Use the existing value instead", { exact: true })).toBeVisible()
+  await page.getByRole("tab", { name: "Session" }).click()
+  const context = page.getByText("Use the existing value instead", { exact: true }).last()
+  await expect(context).toBeVisible()
+  await expect(context.locator("..")).toContainText("review.ts:2")
+  expect(requests).toEqual([])
+})
+
+async function openReview(page: Page) {
+  await page.setViewportSize({ width: 700, height: 900 })
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_review_line_comment_regression",
+      worktree: directory,
+      vcs: "git",
+      name: "review-line-comment-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "review-line-comment-regression",
+        projectID: "proj_review_line_comment_regression",
+        directory,
+        title,
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    vcsDiff: [
+      {
+        file: "src/review.ts",
+        additions: 1,
+        deletions: 1,
+        status: "modified",
+        patch:
+          "diff --git a/src/review.ts b/src/review.ts\n--- a/src/review.ts\n+++ b/src/review.ts\n@@ -1,3 +1,3 @@\n export const first = 1\n-export const value = 'before'\n+export const value = 'after'\n export const last = 3\n",
+      },
+    ],
+    pageMessages: () => ({
+      items: [
+        {
+          info: {
+            id: "msg_review_line_comment_regression",
+            sessionID,
+            role: "user",
+            time: { created: 1700000000000 },
+            summary: { diffs: [] },
+            agent: "build",
+            model: { providerID: "opencode", modelID: "test" },
+          },
+          parts: [
+            {
+              id: "prt_review_line_comment_regression",
+              sessionID,
+              messageID: "msg_review_line_comment_regression",
+              type: "text",
+              text: "Review this change.",
+            },
+          ],
+        },
+      ],
+    }),
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+  const diffResponse = page.waitForResponse((response) => new URL(response.url()).pathname === "/vcs/diff")
+  await page.getByRole("tab", { name: "Changes" }).click()
+  expect(await (await diffResponse).json()).toHaveLength(1)
+
+  const review = page.locator('[data-component="session-review"]')
+  await expectAppVisible(review)
+  await review
+    .getByRole("heading", { name: /review\.ts/ })
+    .getByRole("button")
+    .first()
+    .click()
+}

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

@@ -21,6 +21,7 @@ const words = [
   "vector",
 ]
 
+const serverKey = "http://127.0.0.1:4096"
 const sourceID = "ses_smoke_source"
 const targetID = "ses_smoke_target"
 const directory = "C:/OpenCode/SmokeProject"
@@ -200,9 +201,7 @@ function turn(index: number): Message[] {
     ...(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" }, 620)]
-      : []),
+    ...(index % 7 === 0 ? [toolPart(index, 4, "bash", { command: "bun typecheck" }, 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
@@ -242,6 +241,7 @@ function orderedParts(message: Message) {
 
 export const fixture = {
   directory,
+  serverKey,
   project: {
     id: projectID,
     worktree: directory,
@@ -295,6 +295,7 @@ export const fixture = {
         .filter(renderable)
         .map((part) => part.id),
     ),
+    expandedShellPartID: targetMessages.flatMap((message) => message.parts).find((part) => part.tool === "bash")!.id,
   },
 }
 

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

@@ -327,6 +327,18 @@ test.describe("smoke: session timeline", () => {
     const expectedMessageIDs = fixture.expected.targetMessageIDs
     await expectSessionTimelineReady(page, expectedPartIDs, expectedMessageIDs, errors)
     await expectCanScrollToStart(page, expectedPartIDs, expectedMessageIDs, errors)
+
+    const shell = page.locator(`[data-timeline-part-id="${fixture.expected.expandedShellPartID}"]`)
+    const shellTrigger = shell.locator('[data-slot="collapsible-trigger"]')
+    const shellSubtitle = shell.locator('[data-slot="basic-tool-tool-subtitle"]')
+    await expect(shellSubtitle).toHaveCount(0)
+    await expect(shell.locator('[data-slot="bash-pre"]')).toContainText("$ bun typecheck")
+    await shellTrigger.click()
+    await expect(shellTrigger).toHaveAttribute("aria-expanded", "false")
+    await expect(shellSubtitle).toHaveText("bun typecheck")
+    await shellTrigger.click()
+    await expect(shellTrigger).toHaveAttribute("aria-expanded", "true")
+    await expect(shellSubtitle).toHaveCount(0)
   })
 })
 
@@ -706,7 +718,8 @@ async function navigateToSession(page: Page, directory: string, sessionId: strin
 }
 
 async function switchTitlebarSession(page: Page, sessionID: string, title: string) {
-  const href = `/${base64Encode(fixture.directory)}/session/${sessionID}`
+  console.log(process.env)
+  const href = `/server/${base64Encode(fixture.serverKey)}/session/${sessionID}`
   const tab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first()
   await expect(tab).toBeVisible()
   await tab.click()

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

@@ -18,6 +18,7 @@ export interface MockServerConfig {
   project: unknown
   sessions: ({ id: string } & Record<string, unknown>)[]
   pageMessages: (sessionId: string, limit: number, before?: string) => { items: unknown[]; cursor?: string }
+  vcsDiff?: unknown[]
   messageDelay?: number
   onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void
   events?: () => unknown[]
@@ -44,11 +45,15 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
   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 appPort = new URL(
+      process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${process.env.PLAYWRIGHT_PORT ?? "3000"}`,
+    ).port
+    if (url.port !== targetPort && url.port !== appPort) return route.fallback()
 
     const path = url.pathname
     if (path === "/global/event" || path === "/event") return sse(route, config.events?.(), config.eventRetry)
     if (path === "/global/health") return json(route, { healthy: true })
+    if (path === "/vcs/diff" && config.vcsDiff) return json(route, config.vcsDiff)
     if (emptyObject.has(path)) return json(route, {})
     if (emptyList.has(path)) return json(route, [])
     if (path in staticRoutes) return json(route, staticRoutes[path])
@@ -72,7 +77,8 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       return json(route, pageData.items, pageData.cursor ? { "x-next-cursor": pageData.cursor } : undefined)
     }
 
-    return json(route, {})
+    if (url.port === targetPort && targetPort !== appPort) return json(route, {})
+    return route.fallback()
   })
 }
 

packages/app/index.html

@@ -1,22 +1,28 @@
 <!doctype html>
-<html lang="en" style="background-color: var(--background-base)">
+<html lang="en" style="background-color: var(--v2-background-bg-deep, #fafafa)">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, interactive-widget=resizes-content, viewport-fit=cover"
+    />
     <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 name="theme-color" content="#fafafa" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <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">
+  <body class="antialiased overscroll-none text-12-regular overflow-hidden bg-v2-background-bg-deep">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="flex flex-col h-dvh p-px"></div>
+    <div id="root" class="flex flex-col h-dvh bg-v2-background-bg-deep p-px"></div>
     <script src="/src/entry.tsx" type="module"></script>
   </body>
 </html>

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.17.8",
+  "version": "1.17.9",
   "description": "",
   "type": "module",
   "exports": {
@@ -24,7 +24,8 @@
     "test:e2e": "playwright test",
     "test:e2e:local": "playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:report": "playwright show-report e2e/playwright-report"
+    "test:e2e:report": "playwright show-report e2e/playwright-report",
+    "test:bench": "bun test ./e2e/performance/unit && playwright test --config e2e/performance/playwright.config.ts"
   },
   "license": "MIT",
   "devDependencies": {

packages/app/playwright.config.ts

@@ -9,6 +9,7 @@ const reuse = !process.env.CI
 const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
 export default defineConfig({
   testDir: "./e2e",
+  testIgnore: process.env.OPENCODE_PERFORMANCE === "1" ? "performance/**/*.test.ts" : "performance/**",
   outputDir: "./e2e/test-results",
   timeout: 60_000,
   expect: {

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

@@ -15,10 +15,11 @@
 
   document.documentElement.dataset.theme = themeId
   document.documentElement.dataset.colorScheme = mode
+  document.documentElement.style.backgroundColor = isDark ? "#080808" : "#fafafa"
 
   // 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 (metas.length > 0) metas[0].setAttribute("content", isDark ? "#080808" : "#fafafa")
 
   if (themeId === "oc-2") return
 

packages/app/src/app.tsx

@@ -10,7 +10,7 @@ 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 { keepPreviousData, QueryClient, QueryClientProvider, useQuery } from "@tanstack/solid-query"
 import { Effect } from "effect"
 import {
   type Component,
@@ -30,7 +30,7 @@ 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 { ServerSDKProvider, useServerSDK } from "@/context/server-sdk"
 import { ServerSyncProvider } from "@/context/server-sync"
 import { GlobalProvider } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
@@ -47,11 +47,14 @@ 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 LegacyLayout from "@/pages/layout"
+import NewLayout from "@/pages/layout-new"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
+import { legacySessionHref, requireServerKey, rootSession, sessionHref } from "./utils/session-route"
 
-const HomeRoute = lazy(() => import("@/pages/home"))
+const LegacyHome = lazy(() => import("@/pages/home").then((module) => ({ default: module.LegacyHome })))
+const NewHome = lazy(() => import("@/pages/home").then((module) => ({ default: module.NewHome })))
 const Session = lazy(() => import("@/pages/session"))
 const NewSession = lazy(() => import("@/pages/new-session"))
 
@@ -64,6 +67,10 @@ const SessionRoute = Object.assign(
     const server = useServer()
     const tabs = useTabs()
 
+    if (params.id && settings.general.newLayoutDesigns()) {
+      return <Navigate href={sessionHref(server.key, params.id)} />
+    }
+
     // 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(() => {
@@ -82,29 +89,55 @@ const SessionRoute = Object.assign(
   { preload: Session.preload },
 )
 
+const TargetSessionRoute = Object.assign(
+  () => {
+    const sdk = useSDK()
+    const serverSDK = useServerSDK()
+    return (
+      <Show when={`${serverSDK().scope}\0${sdk().directory}`} keyed>
+        <SessionProviders>
+          <Session />
+        </SessionProviders>
+      </Show>
+    )
+  },
+  { preload: Session.preload },
+)
+
 // Wraps the non-draft routes. They are gated on (and keyed to) the globally selected
 // server via ServerKey, then provide the server-scoped shell (Permission/Layout/
 // Notification/Models + the visual Layout) for that server.
-function SelectedServerLayout(props: ParentProps) {
+function SelectedServerProviders(props: ParentProps) {
   return (
     <ServerKey>
       <ServerSDKProvider>
-        <ServerSyncProvider>
-          <ServerScopedShell>{props.children}</ServerScopedShell>
-        </ServerSyncProvider>
+        <ServerSyncProvider>{props.children}</ServerSyncProvider>
       </ServerSDKProvider>
     </ServerKey>
   )
 }
 
+function LegacyServerLayout(props: ParentProps) {
+  return (
+    <SelectedServerProviders>
+      <LegacyServerScopedShell>{props.children}</LegacyServerScopedShell>
+    </SelectedServerProviders>
+  )
+}
+
 // Wraps /new-session. It resolves the draft's target server and provides the
 // server-scoped shell for that server — without ServerKey, so the page never depends
 // on the globally "selected" server.
-function DraftServerLayout(props: ParentProps) {
+function TargetServerLayout(props: ParentProps) {
   const server = useServer()
   const tabs = useTabs()
+  const params = useParams<{ serverKey?: string }>()
   const [search] = useSearchParams<{ draftId?: string }>()
   const conn = createMemo(() => {
+    if (params.serverKey) {
+      const key = requireServerKey(params.serverKey)
+      return server.list.find((item) => ServerConnection.key(item) === key)
+    }
     const id = search.draftId
     if (!id) return undefined
     const draft = tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === id)
@@ -115,48 +148,100 @@ function DraftServerLayout(props: ParentProps) {
   return (
     <ServerSDKProvider server={conn}>
       <ServerSyncProvider server={conn}>
-        <ServerScopedShell>{props.children}</ServerScopedShell>
+        <TargetDirectoryLayout>{props.children}</TargetDirectoryLayout>
       </ServerSyncProvider>
     </ServerSDKProvider>
   )
 }
 
+function TargetDirectoryLayout(props: ParentProps) {
+  const params = useParams<{ serverKey?: string; id?: string }>()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const settings = useSettings()
+  const tabs = useTabs()
+  const serverSDK = useServerSDK()
+  const serverKey = createMemo(() => {
+    if (params.serverKey) return requireServerKey(params.serverKey)
+    if (!search.draftId) return undefined
+    return tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)?.server
+  })
+
+  const resolved = useQuery(() => ({
+    queryKey: [serverSDK().scope, "session-route", params.id] as const,
+    enabled: !!params.serverKey && !!params.id,
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const session = (await serverSDK().client.session.get({ sessionID: params.id! })).data!
+      const root = await rootSession(session, (sessionID) =>
+        serverSDK()
+          .client.session.get({ sessionID })
+          .then((result) => result.data!),
+      )
+      return { session, rootID: root.id }
+    },
+  }))
+  const resolvedDirectory = createMemo(() => {
+    if (params.serverKey) return resolved.data?.session.directory
+    if (!search.draftId) return undefined
+    return tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)?.directory
+  })
+  const directory = createMemo<string | undefined>((prev) =>
+    search.draftId ? resolvedDirectory() : (prev ?? resolvedDirectory()),
+  )
+  const home = () => !params.serverKey && !search.draftId
+  const targetDirectory = () => directory()!
+
+  createEffect(() => {
+    const current = resolved.data
+    const key = serverKey()
+    if (!current || !key) return
+    tabs.addSessionTab({
+      server: key,
+      sessionId: current.rootID,
+    })
+  })
+
+  return (
+    <NewServerScopedShell directory={() => (home() ? undefined : directory())} sessionID={() => params.id}>
+      <Show when={!home()} fallback={props.children}>
+        <Show when={!resolved.error} fallback={<ErrorPage error={resolved.error} />}>
+          <Show when={directory()}>
+            <Show
+              when={!params.serverKey || settings.general.newLayoutDesigns()}
+              fallback={<Navigate href={legacySessionHref(directory()!, params.id!)} />}
+            >
+              <SDKProvider directory={targetDirectory}>
+                <DirectoryDataProvider directory={targetDirectory} server={serverKey}>
+                  <Show when={!params.serverKey || (resolved.data && !resolved.isPlaceholderData)}>
+                    {props.children}
+                  </Show>
+                </DirectoryDataProvider>
+              </SDKProvider>
+            </Show>
+          </Show>
+        </Show>
+      </Show>
+    </NewServerScopedShell>
+  )
+}
+
 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} />}
+        <ResolvedDraftRoute />
       </Show>
     </Show>
   )
 }
 
-function ResolvedDraftRoute(props: { draftID: string }) {
-  const tabs = useTabs()
-  const draft = createMemo(() =>
-    tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === props.draftID),
-  )
-
-  // Key on the directory so retargeting the draft's project re-instantiates the
-  // directory-scoped providers while keeping the same draft id. The draft's target
-  // server is provided by DraftServerLayout, so changing only the server updates the
-  // SDK/sync hooks without remounting the composer.
-  const directory = () => draft()?.directory
-
+function ResolvedDraftRoute() {
   return (
-    <Show when={directory()} keyed>
-      {(dir) => (
-        <SDKProvider directory={dir}>
-          <DirectoryDataProvider directory={dir} draftID={props.draftID}>
-            <DraftProviders>
-              <NewSession />
-            </DraftProviders>
-          </DirectoryDataProvider>
-        </SDKProvider>
-      )}
-    </Show>
+    <DraftProviders>
+      <NewSession />
+    </DraftProviders>
   )
 }
 
@@ -210,32 +295,51 @@ function BodyDesignClass() {
 // shell (router root) so they stay mounted regardless of the active server/route.
 function SharedProviders(props: ParentProps) {
   return (
-    <SettingsProvider>
+    <>
       <BodyDesignClass />
       <CommandProvider>
         <HighlightsProvider>{props.children}</HighlightsProvider>
       </CommandProvider>
-    </SettingsProvider>
+    </>
   )
 }
 
 // Server-scoped providers plus the visual Layout (tabs/sidebar). These live inside
 // each per-route server layout so they resolve to that route's server (selected vs
 // draft). The Layout remounts when crossing between those groups.
-function ServerScopedShell(props: ParentProps) {
+type ServerScopedShellProps = ParentProps<{
+  directory?: () => string | undefined
+  sessionID?: () => string | undefined
+}>
+
+function ServerScopedProviders(props: ServerScopedShellProps) {
   return (
-    <PermissionProvider>
+    <PermissionProvider directory={props.directory}>
       <LayoutProvider>
-        <NotificationProvider>
-          <ModelsProvider>
-            <Layout>{props.children}</Layout>
-          </ModelsProvider>
+        <NotificationProvider directory={props.directory} sessionID={props.sessionID}>
+          <ModelsProvider>{props.children}</ModelsProvider>
         </NotificationProvider>
       </LayoutProvider>
     </PermissionProvider>
   )
 }
 
+function LegacyServerScopedShell(props: ServerScopedShellProps) {
+  return (
+    <ServerScopedProviders directory={props.directory} sessionID={props.sessionID}>
+      <LegacyLayout>{props.children}</LegacyLayout>
+    </ServerScopedProviders>
+  )
+}
+
+function NewServerScopedShell(props: ServerScopedShellProps) {
+  return (
+    <ServerScopedProviders directory={props.directory} sessionID={props.sessionID}>
+      <NewLayout>{props.children}</NewLayout>
+    </ServerScopedProviders>
+  )
+}
+
 function SessionProviders(props: ParentProps) {
   return (
     <TerminalProvider>
@@ -439,28 +543,61 @@ export function AppInterface(props: {
       servers={props.servers}
     >
       <GlobalProvider>
-        <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
-          <Dynamic
-            component={props.router ?? Router}
-            root={(routerProps) => (
-              <TabsProvider>
-                <ServerShell>{routerProps.children}</ServerShell>
-              </TabsProvider>
-            )}
-          >
-            <Route component={SelectedServerLayout}>
-              <Route path="/" component={HomeRoute} />
-              <Route path="/:dir" component={DirectoryLayout}>
-                <Route path="/" component={() => <Navigate href="session" />} />
-                <Route path="/session/:id?" component={SessionRoute} />
-              </Route>
-            </Route>
-            <Route component={DraftServerLayout}>
-              <Route path="/new-session" component={DraftRoute} />
-            </Route>
-          </Dynamic>
-        </ConnectionGate>
+        <SettingsProvider>
+          <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
+            <Show when={useSettings().general.newLayoutDesigns().toString()} keyed>
+              <Dynamic
+                component={props.router ?? Router}
+                root={(routerProps) => (
+                  <TabsProvider>
+                    <ServerShell>{routerProps.children}</ServerShell>
+                  </TabsProvider>
+                )}
+              >
+                <Routes />
+              </Dynamic>
+            </Show>
+          </ConnectionGate>
+        </SettingsProvider>
       </GlobalProvider>
     </ServerProvider>
   )
 }
+
+function Routes() {
+  const settings = useSettings()
+
+  return (
+    <>
+      <Route component={LegacyServerLayout}>
+        <Show when={!settings.general.newLayoutDesigns()}>{<Route path="/" component={LegacyHome} />}</Show>
+        <Route path="/:dir" component={DirectoryLayout}>
+          <Route path="/" component={() => <Navigate href="session" />} />
+          <Route path="/session/:id?" component={SessionRoute} />
+        </Route>
+      </Route>
+      <Route component={TargetServerLayout}>
+        <Show when={settings.general.newLayoutDesigns()}>
+          {
+            <>
+              <Route path="/" component={NewHome} />
+              <Route path="/:dir" component={DirectoryLayout}>
+                <Route
+                  path="/session/:id"
+                  component={() => {
+                    const server = useServer()
+                    const { id } = useParams()
+
+                    return <Navigate href={`/server/${server.key}/session/${id}`} />
+                  }}
+                />
+              </Route>
+            </>
+          }
+        </Show>
+        <Route path="/new-session" component={DraftRoute} />
+        <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      </Route>
+    </>
+  )
+}

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

@@ -363,7 +363,7 @@ export function DebugBar() {
   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]"
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 hidden 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)] md:block sm:bottom-4 sm:right-4 sm:w-[324px]"
     >
       <div class="grid grid-cols-5 gap-px font-mono">
         <Cell

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

@@ -11,7 +11,7 @@ export function HelpButton() {
 
   return (
     <Show when={!state.dismissed}>
-      <div class="fixed bottom-4 right-4 z-50">
+      <div class="fixed bottom-4 right-4 z-50 hidden md:block">
         <Popover
           open={shown()}
           onOpenChange={setShown}

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

@@ -1379,7 +1379,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const providersShouldFadeIn = createMemo((prev) => prev ?? providersLoading())
 
   const [promptReady] = createResource(
-    () => prompt.ready().promise,
+    () => prompt.ready.promise,
     (p) => p,
   )
 

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

@@ -27,7 +27,7 @@ let variant: string | undefined
 
 const promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
 const prompt = {
-  ready: () => Object.assign(() => true, { promise: Promise.resolve(true) }),
+  ready: Object.assign(() => true, { promise: Promise.resolve(true) }),
   current: () => promptValue,
   cursor: () => 0,
   dirty: () => true,

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

@@ -388,12 +388,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         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,
-          })
+        if (draftID) tabs.promoteDraft(draftID, { server: server.key, sessionId: session.id })
         else navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
       }
     }

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

@@ -10,6 +10,7 @@ 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 { createMediaQuery } from "@solid-primitives/media"
 import { Portal } from "solid-js/web"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
@@ -158,6 +159,7 @@ export function SessionHeader() {
   const isV2 = settings.general.newLayoutDesigns
   const search = settings.visibility.search
   const status = settings.visibility.status
+  const isDesktop = createMediaQuery("(min-width: 768px)")
 
   const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
     finder: true,
@@ -236,6 +238,7 @@ export function SessionHeader() {
     statusLabel: language.t("status.popover.trigger"),
     reviewLabel: language.t("command.review.toggle"),
     reviewKeybind: command.keybind("review.toggle"),
+    reviewVisible: isDesktop(),
     reviewOpened: view().reviewPanel.opened(),
     onReviewToggle: () => view().reviewPanel.toggle(),
   }))
@@ -518,6 +521,7 @@ type SessionHeaderV2ActionsState = {
   statusLabel: string
   reviewLabel: string
   reviewKeybind: string
+  reviewVisible: boolean
   reviewOpened: boolean
   onReviewToggle: () => void
 }
@@ -530,20 +534,22 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
           <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>
+      <Show when={props.state.reviewVisible}>
+        <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>
+      </Show>
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
 import { Component, Show, createMemo, createResource, onMount } from "solid-js"
+import { createMediaQuery } from "@solid-primitives/media"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
@@ -89,6 +90,7 @@ export const SettingsGeneralV2: Component = () => {
   const dialog = useDialog()
   const params = useParams()
   const settings = useSettings()
+  const mobile = createMediaQuery("(max-width: 767px)")
 
   const updater = useUpdaterAction()
 
@@ -345,6 +347,20 @@ export const SettingsGeneralV2: Component = () => {
             />
           </div>
         </SettingsRowV2>
+
+        <Show when={mobile()}>
+          <SettingsRowV2
+            title={language.t("settings.general.row.mobileTitlebarBottom.title")}
+            description={language.t("settings.general.row.mobileTitlebarBottom.description")}
+          >
+            <div data-action="settings-mobile-titlebar-bottom">
+              <Switch
+                checked={settings.general.mobileTitlebarPosition() === "bottom"}
+                onChange={(checked) => settings.general.setMobileTitlebarPosition(checked ? "bottom" : "top")}
+              />
+            </div>
+          </SettingsRowV2>
+        </Show>
       </SettingsListV2>
     </div>
   )

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

@@ -1,4 +1,3 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
@@ -14,7 +13,7 @@ import { ServerConnection, serverName } from "@/context/server"
 import { useServerManagementController } from "../dialog-select-server"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"
-import { isWslServer, useFilteredWslServers, WslAddServerButton, WslServerSettings } from "@/wsl/settings"
+import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/wsl/settings"
 import "./settings-v2.css"
 
 export const SettingsServersV2: Component = () => {
@@ -55,10 +54,7 @@ export const SettingsServersV2: Component = () => {
       >
         <div class="settings-v2-tab-header-row">
           <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
-          <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
-            {language.t("dialog.server.add.button")}
-          </ButtonV2>
-          <WslAddServerButton />
+          <AddServerMenu onAddServer={openAdd} />
         </div>
         <Show when={showSearch()}>
           <div class="settings-v2-tab-search">

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

@@ -167,6 +167,15 @@
   background-color: var(--v2-background-bg-layer-01);
 }
 
+@media (max-width: 639px) {
+  .settings-v2[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+    [data-slot="tabs-v2-list"] {
+    width: 144px;
+    min-width: 144px;
+    padding-inline: 8px;
+  }
+}
+
 .settings-v2-nav-footer {
   display: flex;
   flex-direction: column;

packages/app/src/components/titlebar.tsx

@@ -22,26 +22,25 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 
-import { getProjectAvatarVariant, LayoutRoute, useLayout, type LocalProject } from "@/context/layout"
+import { LayoutRoute, useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { WindowsAppMenu } from "./windows-app-menu"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
-import { useServerSync } from "@/context/server-sync"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
-import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers"
-import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
+import { projectForSession } from "@/pages/layout/helpers"
+import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { createMediaQuery } from "@solid-primitives/media"
 import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events"
 import { useGlobal } from "@/context/global"
-import { decode64 } from "@/utils/base64"
 import { ServerConnection, useServer } from "@/context/server"
-import { tabHref, useTabs, type Tab } from "@/context/tabs"
+import { tabHref, useTabs } from "@/context/tabs"
 import "./titlebar.css"
+import { useServerSDK } from "@/context/server-sdk"
+import { Session } from "@opencode-ai/sdk/v2"
 
 type TauriDesktopWindow = {
   startDragging?: () => Promise<void>
@@ -87,6 +86,8 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   const location = useLocation()
   const params = useParams()
   const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
+  const mobile = createMediaQuery("(max-width: 767px)")
+  const bottom = createMemo(() => useV2Titlebar() && mobile() && settings.general.mobileTitlebarPosition() === "bottom")
 
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
@@ -98,6 +99,10 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1)
   const minHeight = () => {
     const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
+    if (useV2Titlebar() && mobile()) {
+      const inset = bottom() ? "env(safe-area-inset-bottom, 0px)" : "env(safe-area-inset-top, 0px)"
+      return `calc(${height}px + ${inset})`
+    }
     if (mac()) return `${height / zoom()}px`
     if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px`
     return undefined
@@ -235,10 +240,13 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
         "shrink-0 relative flex flex-row": true,
         "h-9 bg-v2-background-bg-deep overflow-visible": useV2Titlebar(),
         "h-10 bg-background-base overflow-hidden": !useV2Titlebar(),
+        "order-last": bottom(),
       }}
       style={{
         "min-height": minHeight(),
-        "padding-left": mac() ? `${84 / zoom()}px` : 0,
+        "padding-top": useV2Titlebar() && mobile() && !bottom() ? "env(safe-area-inset-top, 0px)" : undefined,
+        "padding-bottom": bottom() ? "env(safe-area-inset-bottom, 0px)" : undefined,
+        "padding-left": mac() && !mobile() ? `${84 / zoom()}px` : 0,
         width: electronWindows() ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))` : undefined,
         "max-width": electronWindows()
           ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))`
@@ -252,22 +260,25 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
       <Switch>
         <Match when={useV2Titlebar()}>
           {(_) => {
-            const serverSync = useServerSync()
+            const serverSdk = useServerSDK()
             const navigate = useNavigate()
             const layout = useLayout()
-
-            const newSessionHref = () => {
-              if (params.dir) return `/${params.dir}/session`
-
-              const project = layout.projects.list()[0]
-              if (!project) return "/"
-
-              return `/${base64Encode(project.worktree)}/session`
-            }
+            const global = useGlobal()
 
             const tabs = useTabs()
             const tabsStore = tabs.store
             const tabsStoreActions = tabs
+            const [session] = createResource(
+              () => {
+                const route = layout.route()
+                return route.type === "session" ? route : undefined
+              },
+              (route) =>
+                serverSdk()
+                  .client.session.get({ sessionID: route.sessionId })
+                  .then((x) => x.data)
+                  .catch(() => {}),
+            )
 
             const matchRoute = (route: LayoutRoute) => {
               if (route.type === "home") return
@@ -280,10 +291,9 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                     item.type === "session" && item.server === route.server && item.sessionId === route.sessionId,
                 )
                 if (main) return main
-                const sync = serverSync().createDirSyncContext(route.dir)
-                const session = sync.session.get(route.sessionId)
-                if (session?.parentID) {
-                  const parentID = session.parentID
+                const s = session()
+                if (s?.parentID) {
+                  const parentID = s.parentID
                   const parent = tabsStore.find(
                     (item) => item.type === "session" && item.server === route.server && item.sessionId === parentID,
                   )
@@ -304,15 +314,10 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               }
 
               if (route.type === "session") {
-                const sync = serverSync().createDirSyncContext(route.dir)
-                const session = sync.session.get(route.sessionId)
-                if (!session) return
-                const sessionId = session.parentID ?? session.id
-                const next = {
-                  server: route.server ?? server.key,
-                  dirBase64: route.dirBase64,
-                  sessionId,
-                }
+                const s = session()
+                if (!s) return
+                const sessionId = s.parentID ?? s.id
+                const next = { server: route.server ?? server.key, sessionId }
                 tabsStoreActions.addSessionTab(next)
               }
             })
@@ -323,7 +328,28 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               tabsStoreActions.removeSessions(detail)
             })
 
-            const openNewTab = () => navigate(newSessionHref())
+            const openNewTab = () => {
+              const route = layout.route()
+              const activeSession = session()
+              if (route.type === "session" && activeSession) {
+                tabs.newDraft({ server: route.server ?? server.key, directory: activeSession.directory }, "")
+                return
+              }
+
+              const current = layout.projects.list()[0]
+              if (current) {
+                tabs.newDraft({ server: server.key, directory: current.worktree }, "")
+                return
+              }
+
+              const fallback = global.servers.list().flatMap((conn) => {
+                const project = global.createServerCtx(conn).projects.list()[0]
+                return project ? [{ server: ServerConnection.key(conn), project }] : []
+              })[0]
+              if (!fallback) return
+
+              tabs.newDraft({ server: fallback.server, directory: fallback.project.worktree }, "")
+            }
             const toggleHome = () => tabs.toggleHome({ home: layout.route().type === "home", current: currentTab() })
 
             command.register("titlebar-home", () => [
@@ -421,10 +447,12 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
 
             return (
               <div
-                class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 pr-3 pt-2"
+                class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 px-2 md:pr-3"
                 classList={{
-                  "pl-2": mac(),
-                  "pl-4": !mac(),
+                  "pt-2": !bottom(),
+                  "pb-2": bottom(),
+                  "md:pl-2": mac(),
+                  "md:pl-4": !mac(),
                 }}
               >
                 <ChannelIndicator />
@@ -495,25 +523,44 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                             )
                           }
 
+                          const [session] = createResource(
+                            () => {
+                              const id = tab.sessionId
+                              const conn = server.list.find((s) => ServerConnection.key(s) === tab.server)
+                              if (!conn) return null
+                              const { sdk } = global.createServerCtx(conn)
+                              return { id, sdk }
+                            },
+                            ({ id, sdk }) =>
+                              sdk.client.session
+                                .get({ sessionID: id })
+                                .then((x) => x.data)
+                                .catch(() => undefined),
+                          )
+
                           return (
                             <>
                               {divider()}
-                              <TabNavItem
-                                ref={ref}
-                                href={tabHref(tab)}
-                                server={tab.server}
-                                directory={decode64(tab.dirBase64)!}
-                                sessionId={tab.sessionId}
-                                onNavigate={() => {
-                                  tabs.select(tab)
+                              <Show when={session()}>
+                                {(session) => (
+                                  <TabNavItem
+                                    ref={ref}
+                                    href={tabHref(tab)}
+                                    server={tab.server}
+                                    sessionId={tab.sessionId}
+                                    session={session()}
+                                    onNavigate={() => {
+                                      tabs.select(tab)
 
-                                  ref.scrollIntoView({ behavior: "instant" })
-                                }}
-                                onClose={() => tabsStoreActions.removeTab(i())}
-                                active={currentTab() === tab}
-                                activeServer={tab.server === server.key}
-                                forceTruncate={tabsAreOverflowing()}
-                              />
+                                      ref.scrollIntoView({ behavior: "instant" })
+                                    }}
+                                    onClose={() => tabsStoreActions.removeTab(i())}
+                                    active={currentTab() === tab}
+                                    activeServer={tab.server === server.key}
+                                    forceTruncate={tabsAreOverflowing()}
+                                  />
+                                )}
+                              </Show>
                             </>
                           )
                         }}
@@ -563,8 +610,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                     size="large"
                     class="shrink-0"
                     icon={<IconV2 name="plus" />}
-                    as="a"
-                    href={newSessionHref()}
+                    onClick={openNewTab}
                     aria-label={language.t("command.session.new")}
                   />
                 </Show>
@@ -793,7 +839,6 @@ function TabNavItem(props: {
   ref?: HTMLDivElement
   href: string
   server: ServerConnection.Key
-  directory: string
   sessionId?: string
   hideClose?: boolean
   onClose: () => void
@@ -801,31 +846,19 @@ function TabNavItem(props: {
   active?: boolean
   activeServer: boolean
   forceTruncate?: boolean
+  session: Session
 }) {
   const closeTab = (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
     props.onClose()
   }
+
   const global = useGlobal()
   const serverCtx = createMemo(() => {
     const conn = global.servers.list().find((item) => ServerConnection.key(item) === props.server)
     if (conn) return global.createServerCtx(conn)
   })
-  const dirSyncCtx = createMemo(() => serverCtx()?.sync.createDirSyncContext(props.directory))
-
-  const [session] = createResource(
-    () => {
-      const ctx = dirSyncCtx()
-      if (!ctx || !props.sessionId) return
-      return [props.sessionId, ctx] as const
-    },
-    async ([sessionId, dirSyncCtx]) => {
-      await dirSyncCtx.session.sync(sessionId).catch(() => {})
-      return dirSyncCtx.session.get(sessionId)
-    },
-    { initialValue: props.sessionId ? dirSyncCtx()?.session.get(props.sessionId) : undefined },
-  )
 
   return (
     <div
@@ -837,7 +870,7 @@ function TabNavItem(props: {
         closeTab(event)
       }}
     >
-      <Show when={session.latest}>
+      <Show when={props.session}>
         {(session) => {
           const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? []))
 
@@ -851,9 +884,9 @@ function TabNavItem(props: {
               class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
             >
               <span data-slot="project-avatar-slot">
-                <ProjectTabAvatar
+                <SessionTabAvatar
                   project={project()}
-                  directory={props.directory}
+                  directory={session().directory}
                   sessionId={session().id}
                   activeServer={props.activeServer}
                 />
@@ -887,26 +920,6 @@ function TabNavItem(props: {
   )
 }
 
-function ProjectTabAvatar(props: {
-  project?: LocalProject
-  directory: string
-  sessionId: string
-  activeServer: boolean
-}) {
-  const directory = () => props.directory
-  const sessionId = () => props.sessionId
-  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
-  return (
-    <ProjectAvatar
-      fallback={displayName(props.project ?? { worktree: props.directory })}
-      src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
-      variant={getProjectAvatarVariant(props.project?.icon?.color)}
-      unread={state.unread()}
-      loading={state.loading()}
-    />
-  )
-}
-
 function DraftTabItem(props: {
   ref?: HTMLDivElement
   href: string

packages/app/src/context/comments.tsx

@@ -2,12 +2,14 @@ import { batch, createMemo, createRoot, onCleanup } from "solid-js"
 import { createStore, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams } from "@solidjs/router"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Persist, persisted } from "@/utils/persist"
 import { useServerSDK } from "./server-sdk"
 import type { ServerScope } from "@/utils/server-scope"
 import { createScopedCache } from "@/utils/scoped-cache"
 import { uuid } from "@/utils/uuid"
 import type { SelectedLineRange } from "@/context/file"
+import { useSDK } from "./sdk"
 
 export type LineComment = {
   id: string
@@ -202,6 +204,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
   gate: false,
   init: () => {
     const params = useParams()
+    const sdk = useSDK()
     const serverSDK = useServerSDK()
     const cache = createScopedCache(
       (key) => {
@@ -228,7 +231,7 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
       return cache.get(key).value
     }
 
-    const session = createMemo(() => load(params.dir!, params.id))
+    const session = createMemo(() => load(base64Encode(sdk().directory), params.id))
 
     return {
       ready: () => session().ready(),

packages/app/src/context/file.tsx

@@ -3,6 +3,7 @@ import { createStore, produce, reconcile } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { showToast } from "@/utils/toast"
 import { useParams } from "@solidjs/router"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
@@ -65,7 +66,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
     const scope = createMemo(() => sdk().directory)
     const path = createPathHelpers(scope)
     const tabs = layout.tabs(() =>
-      SessionStateKey.from(serverSDK().scope, SessionRouteKey.fromRoute(params.dir, params.id)),
+      SessionStateKey.from(serverSDK().scope, SessionRouteKey.fromRoute(base64Encode(sdk().directory), params.id)),
     )
 
     const inflight = new Map<string, Promise<void>>()

packages/app/src/context/layout.tsx

@@ -16,6 +16,7 @@ import { createPathHelpers } from "./file/path"
 import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
+import { requireServerKey } from "@/utils/session-route"
 
 export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }
 
@@ -79,7 +80,7 @@ export type LayoutRoute =
   | { type: "home" }
   | { type: "draft"; draftID: string; server?: ServerConnection.Key }
   | { type: "dir-new-sesssion"; dir: string; dirBase64: string; server?: ServerConnection.Key }
-  | { type: "session"; dir: string; dirBase64: string; sessionId: string; server?: ServerConnection.Key }
+  | { type: "session"; sessionId: string; server?: ServerConnection.Key }
 
 function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string): SessionTabs {
   const all = current?.all ?? []
@@ -131,6 +132,14 @@ const currentRoute = (pathname: string, search: string): LayoutRoute => {
     return { type: "draft", draftID }
   }
 
+  if (parts[0] === "server" && parts[2] === "session" && parts[3]) {
+    return {
+      type: "session",
+      sessionId: parts[3],
+      server: requireServerKey(parts[1]),
+    }
+  }
+
   const dirBase64 = parts[0]
   const dir = decode64(dirBase64)
   if (!dir) return { type: "home" }
@@ -138,7 +147,7 @@ const currentRoute = (pathname: string, search: string): LayoutRoute => {
   if (parts[1] !== "session") return { type: "home" }
 
   const id = parts[2]
-  if (id) return { type: "session", dir, dirBase64, sessionId: id }
+  if (id) return { type: "session", sessionId: id }
   return { type: "dir-new-sesssion", dir, dirBase64 }
 }
 
@@ -154,6 +163,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
     const route = createMemo(() => {
       const value = currentRoute(location.pathname, location.search)
       if (value.type === "home") return value
+      if (value.server) return value
       return { ...value, server: server.key }
     })
 
@@ -572,7 +582,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       handoff: {
         tabs: createMemo(() => store.handoff?.tabs),
         setTabs(dir: string, id: string) {
-          setStore("handoff", "tabs", { scope: server.scope(), dir, id, at: Date.now() })
+          setStore("handoff", "tabs", { scope: serverSdk().scope, dir, id, at: Date.now() })
         },
         clearTabs() {
           if (!store.handoff?.tabs) return

packages/app/src/context/notification.tsx

@@ -1,5 +1,5 @@
 import { createStore, reconcile } from "solid-js/store"
-import { batch, createEffect, createMemo, onCleanup } from "solid-js"
+import { type Accessor, batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useServerSDK } from "./server-sdk"
@@ -108,7 +108,7 @@ function buildNotificationIndex(list: Notification[]) {
 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
   name: "Notification",
   gate: false,
-  init: () => {
+  init: (props: { directory?: Accessor<string | undefined>; sessionID?: Accessor<string | undefined> }) => {
     const params = useParams()
     const serverSDK = useServerSDK()
     const serverSync = useServerSync()
@@ -119,10 +119,10 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
     const empty: Notification[] = []
 
     const currentDirectory = createMemo(() => {
-      return decode64(params.dir)
+      return props.directory?.() ?? decode64(params.dir)
     })
 
-    const currentSession = createMemo(() => params.id)
+    const currentSession = createMemo(() => props.sessionID?.() ?? params.id)
 
     const [store, setStore, _, ready] = persisted(
       Persist.serverGlobal(serverSDK().scope, "notification", ["notification.v1"]),

packages/app/src/context/permission.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup } from "solid-js"
+import { type Accessor, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { PermissionRequest } from "@opencode-ai/sdk/v2/client"
@@ -47,13 +47,13 @@ function hasPermissionPromptRules(permission: unknown) {
 export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
   name: "Permission",
   gate: false,
-  init: () => {
+  init: (props: { directory?: Accessor<string | undefined> }) => {
     const params = useParams()
     const serverSDK = useServerSDK()
     const serverSync = useServerSync()
 
     const permissionsEnabled = createMemo(() => {
-      const directory = decode64(params.dir)
+      const directory = props.directory?.() ?? decode64(params.dir)
       if (!directory) return false
       const [store] = serverSync().child(directory)
       return hasPermissionPromptRules(store.config.permission)
@@ -85,7 +85,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     // When config has permission: "allow", auto-enable directory-level auto-accept
     createEffect(() => {
       if (!ready()) return
-      const directory = decode64(params.dir)
+      const directory = props.directory?.() ?? decode64(params.dir)
       if (!directory) return
       const [childStore] = serverSync().child(directory)
       const perm = childStore.config.permission

packages/app/src/context/prompt.tsx

@@ -1,12 +1,13 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { checksum } from "@opencode-ai/core/util/encode"
+import { base64Encode, checksum } from "@opencode-ai/core/util/encode"
 import { useParams, useSearchParams } from "@solidjs/router"
-import { batch, createMemo, createRoot, getOwner, onCleanup } from "solid-js"
+import { batch, createMemo, createRoot, getOwner, onCleanup, type Accessor } from "solid-js"
 import { createStore, type SetStoreFunction } from "solid-js/store"
 import type { FileSelection } from "@/context/file"
 import { Persist, persisted } from "@/utils/persist"
 import { useServerSDK } from "./server-sdk"
 import type { ServerScope } from "@/utils/server-scope"
+import { useSDK } from "./sdk"
 
 interface PartBase {
   content: string
@@ -180,7 +181,7 @@ function promptTarget(serverScope: ServerScope, scope: Scope) {
   return Persist.serverScoped(serverScope, scope.dir, scope.id, "prompt", [legacy])
 }
 
-function createPromptSession(serverScope: ServerScope, scope: Scope) {
+export function createPromptSession(serverScope: ServerScope, scope: Scope) {
   const [store, setStore, _, ready] = persisted(
     promptTarget(serverScope, scope),
     createStore<PromptStore>(promptStore()),
@@ -189,6 +190,12 @@ function createPromptSession(serverScope: ServerScope, scope: Scope) {
   return { ready, ...createPromptStateValue(store, setStore) }
 }
 
+export function createPromptReady(session: Accessor<PromptSession>) {
+  return Object.defineProperty(() => session().ready(), "promise", {
+    get: () => session().ready.promise,
+  }) as (() => boolean) & { readonly promise: Promise<unknown> | undefined }
+}
+
 function promptStore(): PromptStore {
   return {
     prompt: clonePrompt(DEFAULT_PROMPT),
@@ -246,7 +253,7 @@ export function createPromptState() {
   const [store, setStore] = createStore<PromptStore>(promptStore())
   const ready = Object.assign(() => true, { promise: Promise.resolve(true) })
   return {
-    ready: () => ready,
+    ready,
     ...createPromptStateValue(store, setStore),
   }
 }
@@ -256,6 +263,7 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
   gate: false,
   init: () => {
     const params = useParams()
+    const sdk = useSDK()
     const [search] = useSearchParams<{ draftId?: string }>()
     const serverSDK = useServerSDK()
     const cache = new Map<string, PromptCacheEntry>()
@@ -303,12 +311,13 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
     }
 
     const session = createMemo(() =>
-      load(search.draftId ? { draftID: search.draftId } : { dir: params.dir!, id: params.id }),
+      load(search.draftId ? { draftID: search.draftId } : { dir: base64Encode(sdk().directory), id: params.id }),
     )
     const pick = (scope?: Scope) => (scope ? load(scope) : session())
+    const ready = createPromptReady(session)
 
     return {
-      ready: () => session().ready,
+      ready,
       current: () => session().current(),
       cursor: () => session().cursor(),
       dirty: () => session().dirty(),

packages/app/src/context/settings.tsx

@@ -33,6 +33,7 @@ export interface Settings {
     editToolPartsExpanded: boolean
     showSessionProgressBar: boolean
     showCustomAgents: boolean
+    mobileTitlebarPosition: "top" | "bottom"
     newLayoutDesigns?: boolean
   }
   appearance: {
@@ -118,6 +119,7 @@ const defaultSettings: Settings = {
     editToolPartsExpanded: false,
     showSessionProgressBar: true,
     showCustomAgents: false,
+    mobileTitlebarPosition: "top",
   },
   appearance: {
     fontSize: 14,
@@ -248,6 +250,13 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setShowCustomAgents(value: boolean) {
           setStore("general", "showCustomAgents", value)
         },
+        mobileTitlebarPosition: withFallback(
+          () => store.general?.mobileTitlebarPosition,
+          defaultSettings.general.mobileTitlebarPosition,
+        ),
+        setMobileTitlebarPosition(value: "top" | "bottom") {
+          setStore("general", "mobileTitlebarPosition", value)
+        },
         newLayoutDesigns,
         setNewLayoutDesigns(value: boolean) {
           setStore("general", "newLayoutDesigns", value)

packages/app/src/context/tabs.tsx

@@ -1,6 +1,5 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { base64Encode } from "@opencode-ai/core/util/encode"
 import { createStore, produce } from "solid-js/store"
 import { Persist, persisted, removePersisted, draftPersistedKeys } from "@/utils/persist"
 import { ServerConnection, useServer } from "./server"
@@ -9,11 +8,11 @@ import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { usePlatform } from "./platform"
 import { uuid } from "@/utils/uuid"
 import { SessionTabsRemovedDetail } from "@/components/titlebar-session-events"
+import { sessionHref } from "@/utils/session-route"
 
 export type SessionTab = {
   type: "session"
   server: ServerConnection.Key
-  dirBase64: string
   sessionId: string
 }
 
@@ -34,16 +33,12 @@ type RecentTab = {
 export const draftHref = (draftID: string) => `/new-session?draftId=${encodeURIComponent(draftID)}`
 
 export const tabHref = (tab: Tab) =>
-  tab.type === "draft" ? draftHref(tab.draftID) : `/${tab.dirBase64}/session/${tab.sessionId}`
+  tab.type === "draft" ? draftHref(tab.draftID) : sessionHref(tab.server, tab.sessionId)
 
 export const tabKey = (tab: Tab) => (tab.type === "draft" ? `draft:${tab.draftID}` : `${tab.server}\n${tabHref(tab)}`)
 
 export function sessionHasOpenTab(tabs: Tab[], server: ServerConnection.Key, session: Session) {
-  const dirBase64 = base64Encode(session.directory)
-  return tabs.some(
-    (tab) =>
-      tab.type === "session" && tab.server === server && tab.dirBase64 === dirBase64 && tab.sessionId === session.id,
-  )
+  return tabs.some((tab) => tab.type === "session" && tab.server === server && tab.sessionId === session.id)
 }
 
 export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
@@ -105,14 +100,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
     const navigateTab = (tab: Tab) => {
       const href = tabHref(tab)
       setRecentKey(tabKey(tab))
-      if (tab.server === server.key) {
-        navigate(href)
-        return
-      }
-      void startTransition(() => {
-        server.setActive(tab.server)
-        navigate(href)
-      })
+      navigate(href)
     }
 
     const actions = {
@@ -195,11 +183,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       removeSessions: (input: SessionTabsRemovedDetail) => {
         const removed = store
           .filter(
-            (tab) =>
-              tab.type === "session" &&
-              tab.server === server.key &&
-              atob(tab.dirBase64) === input.directory &&
-              input.sessionIDs.includes(tab.sessionId),
+            (tab) => tab.type === "session" && tab.server === server.key && input.sessionIDs.includes(tab.sessionId),
           )
           .map(tabKey)
         void startTransition(() => {
@@ -211,7 +195,6 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
                   ? tabHref({
                       type: "session",
                       server: server.key,
-                      dirBase64: params.dir,
                       sessionId: params.id,
                     })
                   : undefined
@@ -224,14 +207,12 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
               const removedCurrent =
                 currentTab?.type === "session" &&
                 currentTab.server === server.key &&
-                atob(currentTab.dirBase64) === input.directory &&
                 sessionIDs.has(currentTab.sessionId)
 
               for (let i = tabs.length - 1; i >= 0; i--) {
                 const tab = tabs[i]
                 if (!tab || tab.type !== "session") continue
                 if (tab.server !== server.key) continue
-                if (atob(tab.dirBase64) !== input.directory) continue
                 if (!sessionIDs.has(tab.sessionId)) continue
                 tabs.splice(i, 1)
               }

packages/app/src/context/terminal.tsx

@@ -4,7 +4,8 @@ import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "soli
 import { useParams } from "@solidjs/router"
 import { useSDK, type DirectorySDK } from "./sdk"
 import type { Platform } from "./platform"
-import { useServer } from "./server"
+import { useServerSDK } from "./server-sdk"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { defaultTitle, titleNumber } from "./terminal-title"
 import { Persist, persisted, removePersisted } from "@/utils/persist"
 import { ScopedKey, ServerScope, type ServerScope as ServerScopeValue } from "@/utils/server-scope"
@@ -374,10 +375,11 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
   gate: false,
   init: () => {
     const sdk = useSDK()
-    const server = useServer()
+    const serverSDK = useServerSDK()
     const params = useParams()
     const cache = new Map<string, TerminalCacheEntry>()
-    const scope = server.scope()
+    const scope = () => serverSDK().scope
+    const directory = createMemo(() => base64Encode(sdk().directory))
 
     caches.add(cache)
     onCleanup(() => caches.delete(cache))
@@ -421,11 +423,11 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
       return entry.value
     }
 
-    const workspace = createMemo(() => loadWorkspace(params.dir!, params.id, scope))
+    const workspace = createMemo(() => loadWorkspace(directory(), params.id, scope()))
 
     createEffect(
       on(
-        () => ({ dir: params.dir, id: params.id, scope }),
+        () => ({ dir: directory(), id: params.id, scope: scope() }),
         (next, prev) => {
           if (!prev?.dir) return
           if (next.dir === prev.dir && next.id === prev.id && next.scope === prev.scope) return

packages/app/src/i18n/en.ts

@@ -589,6 +589,8 @@ export const dict = {
   "home.title": "Home",
   "home.projects": "Projects",
   "home.project.add": "Add project",
+  "home.server.collapse": "Collapse server projects",
+  "home.server.expand": "Expand server projects",
   "home.sessions.search.placeholder": "Search sessions",
   "home.sessions.search.sessions": "Sessions",
   "home.sessions.search.noResults": "No sessions found for {{query}}",
@@ -839,6 +841,9 @@ export const dict = {
   "settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
   "settings.general.row.showStatus.title": "Server status",
   "settings.general.row.showStatus.description": "Show the server status button in the title bar",
+  "settings.general.row.mobileTitlebarBottom.title": "Bottom navigation",
+  "settings.general.row.mobileTitlebarBottom.description":
+    "Place the title bar and session tabs at the bottom of the screen on mobile",
   "settings.general.row.showCustomAgents.title": "Custom agents",
   "settings.general.row.showCustomAgents.description": "Show the agent picker in the composer",
   "settings.general.row.reasoningSummaries.title": "Show reasoning summaries",

packages/app/src/pages/directory-layout.tsx

@@ -2,26 +2,40 @@ import { DataProvider } from "@opencode-ai/ui/context"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
-import { createEffect, createMemo, createResource, type ParentProps, Show } from "solid-js"
+import { type Accessor, createEffect, createMemo, createResource, type ParentProps, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { LocalProvider } from "@/context/local"
 import { SDKProvider } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { decode64 } from "@/utils/base64"
 import { Schema } from "effect"
+import type { ServerConnection } from "@/context/server"
+import { sessionHref } from "@/utils/session-route"
 
-export function DirectoryDataProvider(props: ParentProps<{ directory: string; draftID?: string }>) {
+export function DirectoryDataProvider(
+  props: ParentProps<{
+    directory: string | Accessor<string>
+    draftID?: string
+    server?: Accessor<ServerConnection.Key | undefined>
+  }>,
+) {
   const location = useLocation()
   const navigate = useNavigate()
   const params = useParams()
   const sync = useSync()
-  const slug = createMemo(() => base64Encode(props.directory))
+  const directory = () => (typeof props.directory === "function" ? props.directory() : props.directory)
+  const slug = createMemo(() => base64Encode(directory()))
+  const href = (sessionID: string) => {
+    const server = props.server?.()
+    if (server) return sessionHref(server, sessionID)
+    return `/${slug()}/session/${sessionID}`
+  }
 
   createEffect(() => {
     // A draft lives at /new-session?draftId=… and has no directory segment to normalize.
-    if (props.draftID) return
+    if (props.draftID || props.server?.()) return
     const next = sync().data.path.directory
-    if (!next || next === props.directory) return
+    if (!next || next === directory()) return
     const path = location.pathname.slice(slug().length + 1)
     navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true })
   })
@@ -37,9 +51,9 @@ export function DirectoryDataProvider(props: ParentProps<{ directory: string; dr
   return (
     <DataProvider
       data={sync().data}
-      directory={props.directory}
-      onNavigateToSession={(sessionID: string) => navigate(`/${slug()}/session/${sessionID}`)}
-      onSessionHref={(sessionID: string) => `/${slug()}/session/${sessionID}`}
+      directory={directory()}
+      onNavigateToSession={(sessionID: string) => navigate(href(sessionID))}
+      onSessionHref={href}
     >
       <LocalProvider>{props.children}</LocalProvider>
     </DataProvider>

packages/app/src/pages/home.tsx

@@ -38,15 +38,15 @@ import {
   sortedRootSessions,
   toggleHomeProjectSelection,
 } from "@/pages/layout/helpers"
-import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
+import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { useGlobal } from "@/context/global"
 import { useCommand } from "@/context/command"
-import { useSettings } from "@/context/settings"
 import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { type ServerHealth } from "@/utils/server-health"
+import { Persist, persisted } from "@/utils/persist"
 
 const HOME_SESSION_LIMIT = 64
 const HOME_ROW_LAYOUT =
@@ -113,16 +113,7 @@ function homeSessionSearchKey(record: HomeSessionRecord) {
   return `${pathKey(record.session.directory)}:${record.session.id}`
 }
 
-export default function Home() {
-  const settings = useSettings()
-  return (
-    <Show when={settings.general.newLayoutDesigns()} fallback={<LegacyHome />}>
-      <HomeDesign />
-    </Show>
-  )
-}
-
-function HomeDesign() {
+export function NewHome() {
   const sync = useServerSync()
   const layout = useLayout()
   const platform = usePlatform()
@@ -313,7 +304,7 @@ function HomeDesign() {
     const ctx = global.createServerCtx(conn)
     ctx.projects.open(directory)
     ctx.projects.touch(directory)
-    navigateOnServer(conn, `/${base64Encode(session.directory)}/session/${session.id}`)
+    navigateOnServer(conn, `/server/${base64Encode(ServerConnection.key(conn))}/session/${session.id}`)
   }
 
   function chooseProject(conn: ServerConnection.Any) {
@@ -339,7 +330,7 @@ function HomeDesign() {
 
   return (
     <div class="rounded-[10px] shadow-[var(--v2-elevation-raised)] m-2 min-h-0 lg:overflow-hidden bg-v2-background-bg-base self-stretch flex-1">
-      <div class="mx-auto grid w-full h-full max-w-[1080px] gap-8 px-6 pb-16 lg:grid-cols-[280px_minmax(0,720px)]">
+      <div class="mx-auto grid h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)_auto] gap-4 px-3 pb-3 lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6 lg:pb-16">
         <HomeProjectColumn
           projects={projects()}
           selected={state.selection}
@@ -365,7 +356,7 @@ function HomeDesign() {
         />
 
         <section
-          class="min-h-0 min-w-0 flex-1 flex flex-col pt-12"
+          class="min-h-0 min-w-0 flex-1 flex flex-col pt-6 lg:pt-12"
           aria-label={language.t("sidebar.project.recentSessions")}
         >
           <HomeSessionSearch
@@ -416,7 +407,7 @@ function HomeDesign() {
                                 record={record}
                                 server={state.selection.server}
                                 activeServer={state.selection.server === server.key}
-                                openSession={openSession}
+                                onClick={() => openSession(record.session)}
                               />
                             )}
                           </For>
@@ -429,6 +420,12 @@ function HomeDesign() {
             </div>
           </ScrollView>
         </section>
+        <HomeUtilityNav
+          class="flex lg:hidden"
+          openSettings={openSettings}
+          openHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+          language={language}
+        />
       </div>
     </div>
   )
@@ -452,8 +449,15 @@ function HomeProjectColumn(props: {
   const global = useGlobal()
   const dialog = useDialog()
   const controller = useServerManagementController({ navigateOnAdd: false })
+  const [state, setState] = persisted(
+    Persist.global("home.servers", ["home.servers.v1"]),
+    createStore({ collapsed: {} as Record<string, boolean> }),
+  )
   return (
-    <aside class="flex min-w-0 flex-col lg:pt-[52px] mt-14 gap-4" aria-label={props.language.t("home.projects")}>
+    <aside
+      class="mt-6 flex min-w-0 flex-col gap-4 lg:mt-14 lg:pt-[52px]"
+      aria-label={props.language.t("home.projects")}
+    >
       <div class="flex h-7 min-w-0 items-center justify-between pl-1.5">
         <div class={HOME_SECTION_LABEL}>{props.language.t("home.projects")}</div>
         <Show when={global.servers.list().length === 1}>
@@ -477,20 +481,23 @@ function HomeProjectColumn(props: {
             const key = ServerConnection.key(item)
             const healthy = () => !!global.servers.health[key]?.healthy
             const serverCtx = global.createServerCtx(item)
+            const collapsed = () => !!state.collapsed[key]
             return (
               <div class="flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                 <HomeServerRow
                   server={item}
                   selected={props.selected.server === key && !props.selected.directory}
                   healthy={healthy()}
+                  collapsed={collapsed()}
                   health={global.servers.health[key]}
                   controller={controller}
                   focusServer={props.focusServer}
                   chooseProject={props.chooseProject}
                   openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
+                  toggleCollapsed={() => setState("collapsed", key, !state.collapsed[key])}
                   language={props.language}
                 />
-                <Show when={healthy()}>
+                <Show when={healthy() && !collapsed()}>
                   <div class="mx-3 h-px bg-v2-border-border-base" />
                   <HomeProjectList {...props} server={item} projects={serverCtx.projects.list()} />
                 </Show>
@@ -499,37 +506,55 @@ function HomeProjectColumn(props: {
           }}
         </For>
       </Show>
-      <div class="mt-4 flex min-w-0 flex-col gap-1">
-        <button
-          type="button"
-          class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-          onClick={props.openSettings}
-        >
-          <IconV2 name="settings-gear" size="small" />
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
-        </button>
-        <button
-          type="button"
-          class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-          onClick={props.openHelp}
-        >
-          <IconV2 name="help" size="small" />
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
-        </button>
-      </div>
+      <HomeUtilityNav
+        class="mt-4 hidden lg:flex"
+        openSettings={props.openSettings}
+        openHelp={props.openHelp}
+        language={props.language}
+      />
     </aside>
   )
 }
 
+function HomeUtilityNav(props: {
+  class?: string
+  openSettings: () => void
+  openHelp: () => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  return (
+    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1`}>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openSettings}
+      >
+        <IconV2 name="settings-gear" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
+      </button>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openHelp}
+      >
+        <IconV2 name="help" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
+      </button>
+    </div>
+  )
+}
+
 function HomeServerRow(props: {
   server: ServerConnection.Any
   selected: boolean
   healthy: boolean
+  collapsed: boolean
   health: ServerHealth | undefined
   controller: ReturnType<typeof useServerManagementController>
   focusServer: (server: ServerConnection.Any) => void
   chooseProject: (server: ServerConnection.Any) => void
   openEdit: (server: ServerConnection.Http) => void
+  toggleCollapsed: () => void
   language: ReturnType<typeof useLanguage>
 }) {
   const [state, setState] = createStore({ menuOpen: false })
@@ -542,7 +567,30 @@ function HomeServerRow(props: {
         disabled={!props.healthy}
         onClick={() => props.focusServer(props.server)}
       >
-        <div class="flex size-4 shrink-0 items-center justify-center">
+        <Show when={props.healthy}>
+          <span
+            data-action="home-server-collapse"
+            class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
+            aria-label={
+              props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
+            }
+            aria-expanded={!props.collapsed}
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              props.toggleCollapsed()
+            }}
+            onPointerDown={(event) => event.preventDefault()}
+          >
+            <IconV2
+              name="chevron-down"
+              size="small"
+              class="transition-transform duration-150 ease-in-out"
+              style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
+            />
+          </span>
+        </Show>
+        <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
           <ServerHealthIndicator health={props.health} />
         </div>
         <span class="flex min-w-0 items-center gap-1">
@@ -707,21 +755,6 @@ function HomeProjectAvatar(props: { project: LocalProject }) {
   )
 }
 
-function HomeSessionAvatar(props: { project: LocalProject; session: Session; activeServer: boolean }) {
-  const directory = () => props.session.directory
-  const sessionId = () => props.session.id
-  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
-  return (
-    <ProjectAvatar
-      fallback={displayName(props.project)}
-      src={getProjectAvatarSource(props.project.id, props.project.icon)}
-      variant={getProjectAvatarVariant(props.project.icon?.color)}
-      unread={state.unread()}
-      loading={state.loading()}
-    />
-  )
-}
-
 function HomeSessionLeading(props: {
   project: LocalProject
   session: Session
@@ -739,7 +772,12 @@ function HomeSessionLeading(props: {
           style={{ right: "calc(100% + 12px)" }}
         />
       </Show>
-      <HomeSessionAvatar project={props.project} session={props.session} activeServer={props.activeServer} />
+      <SessionTabAvatar
+        project={props.project}
+        directory={props.session.directory}
+        sessionId={props.session.id}
+        activeServer={props.activeServer}
+      />
     </div>
   )
 }
@@ -1024,7 +1062,7 @@ function HomeSessionRow(props: {
   record: HomeSessionRecord
   server: ServerConnection.Key
   activeServer: boolean
-  openSession: (session: Session) => void
+  onClick: () => void
 }) {
   const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
 
@@ -1033,7 +1071,7 @@ function HomeSessionRow(props: {
       type="button"
       data-component="home-session-row"
       class={`${HOME_ROW} h-10 gap-2 px-6 py-3 pl-4`}
-      onClick={() => props.openSession(props.record.session)}
+      onClick={props.onClick}
     >
       <HomeSessionLeading
         project={props.record.project}
@@ -1093,7 +1131,7 @@ function groupSessions(records: HomeSessionRecord[], language: ReturnType<typeof
   ].filter((group) => group.sessions.length > 0)
 }
 
-function LegacyHome() {
+export function LegacyHome() {
   const sync = useServerSync()
   const platform = usePlatform()
   const pickDirectory = useDirectoryPicker()

packages/app/src/pages/layout-new.tsx

@@ -0,0 +1,38 @@
+import { createEffect, Suspense, type ParentProps } from "solid-js"
+import { useNavigate } from "@solidjs/router"
+import { DebugBar } from "@/components/debug-bar"
+import { HelpButton } from "@/components/help-button"
+import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
+import { usePlatform } from "@/context/platform"
+import { setNavigate } from "@/utils/notification-click"
+import { setV2Toast, ToastRegion } from "@/utils/toast"
+
+export default function NewLayout(props: ParentProps) {
+  const platform = usePlatform()
+  const navigate = useNavigate()
+  setNavigate(navigate)
+
+  createEffect(() => setV2Toast(true))
+
+  const update: TitlebarUpdate = {
+    version: () => {
+      const state = platform.updater?.state()
+      if (state?.status !== "ready") return
+      return state.version
+    },
+    installing: () => platform.updater?.state().status === "installing",
+    install: () => void platform.updater?.install(),
+  }
+
+  return (
+    <div class="relative bg-v2-background-bg-deep flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
+      <Titlebar update={update} />
+      <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
+        <Suspense>{props.children}</Suspense>
+      </main>
+      {import.meta.env.DEV && <DebugBar />}
+      <HelpButton />
+      <ToastRegion v2 />
+    </div>
+  )
+}

packages/app/src/pages/layout.tsx

@@ -13,7 +13,7 @@ import {
   type Accessor,
 } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { useNavigate, useParams } from "@solidjs/router"
 import { useLayout, LocalProject } from "@/context/layout"
 import { useServerSync } from "@/context/server-sync"
 import { Persist, persisted } from "@/utils/persist"
@@ -92,7 +92,7 @@ import {
 import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from "./layout/sidebar-project"
 import { SidebarContent } from "./layout/sidebar-shell"
 
-export default function Layout(props: ParentProps) {
+export default function LegacyLayout(props: ParentProps) {
   const serverSDK = useServerSDK()
   const [store, setStore, , ready] = persisted(
     Persist.serverGlobal(serverSDK().scope, "layout.page", ["layout.page.v1"]),
@@ -131,10 +131,8 @@ export default function Layout(props: ParentProps) {
   const command = useCommand()
   const theme = useTheme()
   const language = useLanguage()
-  const newDesign = createMemo(() => settings.general.newLayoutDesigns())
-  createEffect(() => setV2Toast(newDesign()))
+  createEffect(() => setV2Toast(false))
   const initialDirectory = decode64(params.dir)
-  const location = useLocation()
   const route = createMemo(() => {
     const slug = params.dir
     if (!slug) return { slug, dir: "" }
@@ -158,7 +156,7 @@ export default function Layout(props: ParentProps) {
   const currentDir = createMemo(() => route().dir)
 
   const [state, setState] = createStore({
-    autoselect: !initialDirectory && !newDesign(),
+    autoselect: !initialDirectory,
     busyWorkspaces: {} as Record<string, boolean>,
     hoverProject: undefined as string | undefined,
     scrollSessionKey: undefined as string | undefined,
@@ -996,7 +994,7 @@ export default function Layout(props: ParentProps) {
         id: "sidebar.toggle",
         title: language.t("command.sidebar.toggle"),
         category: language.t("command.category.view"),
-        keybind: newDesign() ? undefined : "mod+b",
+        keybind: "mod+b",
         onSelect: () => layout.sidebar.toggle(),
       },
       {
@@ -1134,20 +1132,19 @@ export default function Layout(props: ParentProps) {
       },
     ]
 
-    if (!newDesign())
-      Array.from({ length: 9 }, (_, i) => {
-        const index = i
-        const number = index + 1
-        commands.push({
-          id: `project.${number}`,
-          category: language.t("command.category.project"),
-          title: `Open Project {number}`,
-          keybind: `mod+${number}`,
-          disabled: layout.projects.list().length <= index,
-          hidden: true,
-          onSelect: () => navigateToProjectIndex(index),
-        })
+    Array.from({ length: 9 }, (_, i) => {
+      const index = i
+      const number = index + 1
+      commands.push({
+        id: `project.${number}`,
+        category: language.t("command.category.project"),
+        title: `Open Project {number}`,
+        keybind: `mod+${number}`,
+        disabled: layout.projects.list().length <= index,
+        hidden: true,
+        onSelect: () => navigateToProjectIndex(index),
       })
+    })
 
     for (const [id] of availableThemeEntries()) {
       commands.push({
@@ -1812,7 +1809,7 @@ export default function Layout(props: ParentProps) {
   createEffect(() => {
     document.documentElement.style.setProperty(
       "--dialog-left-margin",
-      newDesign() ? "0px" : `${layout.sidebar.opened() ? layout.sidebar.width() : 48}px`,
+      `${layout.sidebar.opened() ? layout.sidebar.width() : 48}px`,
     )
   })
 
@@ -2355,176 +2352,158 @@ export default function Layout(props: ParentProps) {
   )
 
   return (
-    <Show
-      when={!newDesign()}
-      fallback={
-        <div class="relative bg-v2-background-bg-deep flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
-          {autoselecting() ?? ""}
-          <Titlebar update={titlebarUpdate} />
-          <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
-            <Show when={!autoselecting.loading} fallback={<div class="size-full" />}>
-              {props.children}
-            </Show>
-          </main>
-          {import.meta.env.DEV && import.meta.env.VITE_DISABLE_DEBUG_BAR !== "1" && <DebugBar />}
-          <HelpButton />
-          <ToastRegion v2={newDesign()} />
-        </div>
-      }
-    >
-      <div class="relative bg-background-base flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
-        {autoselecting() ?? ""}
-        <Titlebar update={titlebarUpdate} />
-        <Show when={updateVersion() !== undefined}>
-          <UpdateAvailableToast version={updateVersion() ?? ""} install={installUpdate} language={language} />
-        </Show>
-        <div class="flex-1 min-h-0 min-w-0 flex">
-          <div class="flex-1 min-h-0 relative">
-            <div class="size-full relative overflow-x-hidden">
-              <nav
-                aria-label={language.t("sidebar.nav.projectsAndSessions")}
-                data-component="sidebar-nav-desktop"
-                classList={{
-                  "hidden xl:block": true,
-                  "absolute inset-y-0 left-0": true,
-                  "z-10": true,
-                }}
-                style={{ width: `${side()}px` }}
-                ref={(el) => {
-                  setState("nav", el)
-                }}
-                onMouseEnter={() => {
-                  disarm()
-                }}
-                onMouseLeave={() => {
-                  aim.reset()
-                  if (!sidebarHovering()) return
+    <div class="relative bg-background-base flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
+      {autoselecting() ?? ""}
+      <Titlebar update={titlebarUpdate} />
+      <Show when={updateVersion() !== undefined}>
+        <UpdateAvailableToast version={updateVersion() ?? ""} install={installUpdate} language={language} />
+      </Show>
+      <div class="flex-1 min-h-0 min-w-0 flex">
+        <div class="flex-1 min-h-0 relative">
+          <div class="size-full relative overflow-x-hidden">
+            <nav
+              aria-label={language.t("sidebar.nav.projectsAndSessions")}
+              data-component="sidebar-nav-desktop"
+              classList={{
+                "hidden xl:block": true,
+                "absolute inset-y-0 left-0": true,
+                "z-10": true,
+              }}
+              style={{ width: `${side()}px` }}
+              ref={(el) => {
+                setState("nav", el)
+              }}
+              onMouseEnter={() => {
+                disarm()
+              }}
+              onMouseLeave={() => {
+                aim.reset()
+                if (!sidebarHovering()) return
 
-                  arm()
-                }}
-              >
-                <div class="@container w-full h-full contain-strict">{sidebarContent()}</div>
-              </nav>
-
-              <Show when={layout.sidebar.opened()}>
-                <div
-                  class="hidden xl:block absolute inset-y-0 z-30 w-0 overflow-visible"
-                  style={{ left: `${side()}px` }}
-                  onPointerDown={() => setState("sizing", true)}
-                >
-                  <ResizeHandle
-                    direction="horizontal"
-                    size={layout.sidebar.width()}
-                    min={244}
-                    max={typeof window === "undefined" ? 1000 : window.innerWidth * 0.3 + 64}
-                    onResize={(w) => {
-                      setState("sizing", true)
-                      if (sizet !== undefined) clearTimeout(sizet)
-                      sizet = window.setTimeout(() => setState("sizing", false), 120)
-                      layout.sidebar.resize(w)
-                    }}
-                  />
-                </div>
-              </Show>
+                arm()
+              }}
+            >
+              <div class="@container w-full h-full contain-strict">{sidebarContent()}</div>
+            </nav>
 
+            <Show when={layout.sidebar.opened()}>
               <div
-                class="hidden xl:block pointer-events-none absolute top-0 right-0 z-0 border-t border-border-weaker-base"
-                style={{ left: "calc(4rem + 12px)" }}
-              />
-
-              <div class="xl:hidden">
-                <div
-                  classList={{
-                    "fixed inset-x-0 top-10 bottom-0 z-40 transition-opacity duration-200": true,
-                    "opacity-100 pointer-events-auto": layout.mobileSidebar.opened(),
-                    "opacity-0 pointer-events-none": !layout.mobileSidebar.opened(),
-                  }}
-                  onClick={(e) => {
-                    if (e.target === e.currentTarget) layout.mobileSidebar.hide()
+                class="hidden xl:block absolute inset-y-0 z-30 w-0 overflow-visible"
+                style={{ left: `${side()}px` }}
+                onPointerDown={() => setState("sizing", true)}
+              >
+                <ResizeHandle
+                  direction="horizontal"
+                  size={layout.sidebar.width()}
+                  min={244}
+                  max={typeof window === "undefined" ? 1000 : window.innerWidth * 0.3 + 64}
+                  onResize={(w) => {
+                    setState("sizing", true)
+                    if (sizet !== undefined) clearTimeout(sizet)
+                    sizet = window.setTimeout(() => setState("sizing", false), 120)
+                    layout.sidebar.resize(w)
                   }}
                 />
-                <nav
-                  aria-label={language.t("sidebar.nav.projectsAndSessions")}
-                  data-component="sidebar-nav-mobile"
-                  classList={{
-                    "@container fixed top-10 bottom-0 left-0 z-50 w-full max-w-[400px] overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
-                    "translate-x-0": layout.mobileSidebar.opened(),
-                    "-translate-x-full": !layout.mobileSidebar.opened(),
-                  }}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {sidebarContent(true)}
-                </nav>
               </div>
+            </Show>
 
+            <div
+              class="hidden xl:block pointer-events-none absolute top-0 right-0 z-0 border-t border-border-weaker-base"
+              style={{ left: "calc(4rem + 12px)" }}
+            />
+
+            <div class="xl:hidden">
               <div
                 classList={{
-                  "absolute inset-0": true,
-                  "xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
-                  "z-20": true,
-                  "transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
-                    !state.sizing,
+                  "fixed inset-x-0 top-10 bottom-0 z-40 transition-opacity duration-200": true,
+                  "opacity-100 pointer-events-auto": layout.mobileSidebar.opened(),
+                  "opacity-0 pointer-events-none": !layout.mobileSidebar.opened(),
                 }}
-                style={{
-                  "--main-left": layout.sidebar.opened() ? `${side()}px` : "4rem",
+                onClick={(e) => {
+                  if (e.target === e.currentTarget) layout.mobileSidebar.hide()
                 }}
-              >
-                <main
-                  classList={{
-                    "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
-                  }}
-                >
-                  <Show when={!autoselecting.loading} fallback={<div class="size-full" />}>
-                    {props.children}
-                  </Show>
-                </main>
-              </div>
-
-              <div
+              />
+              <nav
+                aria-label={language.t("sidebar.nav.projectsAndSessions")}
+                data-component="sidebar-nav-mobile"
                 classList={{
-                  "hidden xl:flex absolute inset-y-0 left-16 z-30": true,
-                  "opacity-100 translate-x-0 pointer-events-auto": state.peeked && !layout.sidebar.opened(),
-                  "opacity-0 -translate-x-2 pointer-events-none": !state.peeked || layout.sidebar.opened(),
-                  "transition-[opacity,transform] motion-reduce:transition-none": true,
-                  "duration-180 ease-out": state.peeked && !layout.sidebar.opened(),
-                  "duration-120 ease-in": !state.peeked || layout.sidebar.opened(),
+                  "@container fixed top-10 bottom-0 left-0 z-50 w-full max-w-[400px] overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
+                  "translate-x-0": layout.mobileSidebar.opened(),
+                  "-translate-x-full": !layout.mobileSidebar.opened(),
                 }}
-                onMouseMove={disarm}
-                onMouseEnter={() => {
-                  disarm()
-                  aim.reset()
-                }}
-                onPointerDown={disarm}
-                onMouseLeave={() => {
-                  arm()
+                onClick={(e) => e.stopPropagation()}
+              >
+                {sidebarContent(true)}
+              </nav>
+            </div>
+
+            <div
+              classList={{
+                "absolute inset-0": true,
+                "xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
+                "z-20": true,
+                "transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
+                  !state.sizing,
+              }}
+              style={{
+                "--main-left": layout.sidebar.opened() ? `${side()}px` : "4rem",
+              }}
+            >
+              <main
+                classList={{
+                  "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
                 }}
               >
-                <Show when={peekProject()}>
-                  <SidebarPanel project={peekProject} merged={false} />
+                <Show when={!autoselecting.loading} fallback={<div class="size-full" />}>
+                  {props.children}
                 </Show>
-              </div>
+              </main>
+            </div>
 
-              <div
-                classList={{
-                  "hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
-                  "opacity-100 translate-x-0": state.peeked && !layout.sidebar.opened(),
-                  "opacity-0 -translate-x-2": !state.peeked || layout.sidebar.opened(),
-                  "transition-[opacity,transform] motion-reduce:transition-none": true,
-                  "duration-180 ease-out": state.peeked && !layout.sidebar.opened(),
-                  "duration-120 ease-in": !state.peeked || layout.sidebar.opened(),
-                }}
-                style={{ left: `calc(4rem + ${panel()}px)` }}
-              >
-                <div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
-              </div>
+            <div
+              classList={{
+                "hidden xl:flex absolute inset-y-0 left-16 z-30": true,
+                "opacity-100 translate-x-0 pointer-events-auto": state.peeked && !layout.sidebar.opened(),
+                "opacity-0 -translate-x-2 pointer-events-none": !state.peeked || layout.sidebar.opened(),
+                "transition-[opacity,transform] motion-reduce:transition-none": true,
+                "duration-180 ease-out": state.peeked && !layout.sidebar.opened(),
+                "duration-120 ease-in": !state.peeked || layout.sidebar.opened(),
+              }}
+              onMouseMove={disarm}
+              onMouseEnter={() => {
+                disarm()
+                aim.reset()
+              }}
+              onPointerDown={disarm}
+              onMouseLeave={() => {
+                arm()
+              }}
+            >
+              <Show when={peekProject()}>
+                <SidebarPanel project={peekProject} merged={false} />
+              </Show>
+            </div>
+
+            <div
+              classList={{
+                "hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
+                "opacity-100 translate-x-0": state.peeked && !layout.sidebar.opened(),
+                "opacity-0 -translate-x-2": !state.peeked || layout.sidebar.opened(),
+                "transition-[opacity,transform] motion-reduce:transition-none": true,
+                "duration-180 ease-out": state.peeked && !layout.sidebar.opened(),
+                "duration-120 ease-in": !state.peeked || layout.sidebar.opened(),
+              }}
+              style={{ left: `calc(4rem + ${panel()}px)` }}
+            >
+              <div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
             </div>
           </div>
-          {import.meta.env.DEV && import.meta.env.VITE_DISABLE_DEBUG_BAR !== "1" && <DebugBar />}
         </div>
-        <HelpButton />
-        <ToastRegion v2={newDesign()} />
+        {import.meta.env.DEV && import.meta.env.VITE_DISABLE_DEBUG_BAR !== "1" && <DebugBar />}
       </div>
-    </Show>
+      <HelpButton />
+      <ToastRegion v2={false} />
+    </div>
   )
 }
 

packages/app/src/pages/layout/session-tab-avatar.tsx

@@ -0,0 +1,33 @@
+import type { LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { SessionProgressIndicatorV2 } from "@opencode-ai/ui/v2/session-progress-indicator-v2"
+import { Show } from "solid-js"
+
+export function SessionTabAvatar(props: {
+  project?: LocalProject
+  directory: string
+  sessionId: string
+  activeServer: boolean
+}) {
+  const directory = () => props.directory
+  const sessionId = () => props.sessionId
+  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
+  return (
+    <Show
+      when={state.loading()}
+      fallback={
+        <ProjectAvatar
+          fallback={displayName(props.project ?? { worktree: props.directory })}
+          src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+          variant={getProjectAvatarVariant(props.project?.icon?.color)}
+          unread={state.unread()}
+        />
+      }
+    >
+      <SessionProgressIndicatorV2 class="shrink-0" />
+    </Show>
+  )
+}

packages/app/src/pages/session.tsx

@@ -28,7 +28,7 @@ import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
 import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@/utils/toast"
-import { checksum } from "@opencode-ai/core/util/encode"
+import { base64Encode, checksum } from "@opencode-ai/core/util/encode"
 import { useLocation, useSearchParams } from "@solidjs/router"
 import { NewSessionView, SessionHeader } from "@/components/session"
 import { useComments } from "@/context/comments"
@@ -56,7 +56,6 @@ import { MessageTimeline } from "@/pages/session/timeline/message-timeline"
 import { createTimelineModel } from "@/pages/session/timeline/model"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { useServer } from "@/context/server"
 import { syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
@@ -92,7 +91,6 @@ export default function Page() {
   const prompt = usePrompt()
   const comments = useComments()
   const terminal = useTerminal()
-  const server = useServer()
   const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
   const location = useLocation()
   const { params, sessionKey, workspaceKey, tabs, view } = useSessionLayout()
@@ -137,11 +135,11 @@ export default function Page() {
           layout.handoff.clearTabs()
           return
         }
-        if (pending.scope !== server.scope()) return
+        if (pending.scope !== serverSDK().scope) return
 
         if (pending.id !== id) return
         layout.handoff.clearTabs()
-        if (pending.dir !== (params.dir ?? "")) return
+        if (pending.dir !== base64Encode(sdk().directory)) return
 
         const from = workspaceTabs().tabs()
         if (from.all.length === 0 && !from.active) return
@@ -247,7 +245,7 @@ export default function Page() {
 
   createEffect(
     on(
-      () => ({ dir: params.dir, id: params.id }),
+      () => ({ dir: sdk().directory, id: params.id }),
       (next, prev) => {
         if (!prev) return
         if (next.dir === prev.dir && next.id === prev.id) return
@@ -575,7 +573,7 @@ export default function Page() {
 
   createEffect(
     on(
-      () => params.dir,
+      () => sdk().directory,
       (dir) => {
         if (!dir) return
         setStore("newSessionWorktree", "main")
@@ -1570,40 +1568,56 @@ export default function Page() {
     />
   )
 
+  const mobileTabs = (compact = false, bottom = false) => (
+    <Tabs value={store.mobileTab} class="h-auto">
+      <Tabs.List
+        classList={{
+          "!h-9": compact,
+          "[&::after]:!border-b-0 [&::after]:!border-t [&::after]:!border-border-weak-base": bottom,
+        }}
+      >
+        <Tabs.Trigger
+          value="session"
+          classList={{
+            "!w-1/2 !max-w-none": true,
+            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
+          }}
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
+          onClick={() => setStore("mobileTab", "session")}
+        >
+          {language.t("session.tab.session")}
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          value="changes"
+          classList={{
+            "!w-1/2 !max-w-none !border-r-0": true,
+            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
+          }}
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
+          onClick={() => setStore("mobileTab", "changes")}
+        >
+          {hasReview()
+            ? language.t("session.review.filesChanged", { count: reviewCount() })
+            : language.t("session.review.change.other")}
+        </Tabs.Trigger>
+      </Tabs.List>
+    </Tabs>
+  )
+  const mobileTabsBottom = createMemo(
+    () => !isDesktop() && settings.general.newLayoutDesigns() && settings.general.mobileTitlebarPosition() === "bottom",
+  )
+
   return (
     <div class="relative size-full overflow-hidden flex flex-col">
       {sessionSync() ?? ""}
       <SessionHeader />
       <div
-        class="flex-1 min-h-0 flex flex-col md:flex-row "
+        class="flex-1 min-h-0 flex flex-col md:flex-row"
         classList={{
           "gap-2 p-2": settings.general.newLayoutDesigns(),
         }}
       >
-        <Show when={!isDesktop() && !!params.id}>
-          <Tabs value={store.mobileTab} class="h-auto">
-            <Tabs.List>
-              <Tabs.Trigger
-                value="session"
-                class="!w-1/2 !max-w-none"
-                classes={{ button: "w-full" }}
-                onClick={() => setStore("mobileTab", "session")}
-              >
-                {language.t("session.tab.session")}
-              </Tabs.Trigger>
-              <Tabs.Trigger
-                value="changes"
-                class="!w-1/2 !max-w-none !border-r-0"
-                classes={{ button: "w-full" }}
-                onClick={() => setStore("mobileTab", "changes")}
-              >
-                {hasReview()
-                  ? language.t("session.review.filesChanged", { count: reviewCount() })
-                  : language.t("session.review.change.other")}
-              </Tabs.Trigger>
-            </Tabs.List>
-          </Tabs>
-        </Show>
+        <Show when={!isDesktop() && !!params.id && !settings.general.newLayoutDesigns()}>{mobileTabs()}</Show>
 
         <div
           classList={{
@@ -1622,6 +1636,9 @@ export default function Page() {
               "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
             }}
           >
+            <Show when={!isDesktop() && !!params.id && settings.general.newLayoutDesigns() && !mobileTabsBottom()}>
+              {mobileTabs(true)}
+            </Show>
             <div class="flex-1 min-h-0 overflow-hidden">
               <Switch>
                 <Match when={params.id && mobileChanges()}>
@@ -1629,8 +1646,8 @@ export default function Page() {
                     {reviewContent({
                       diffStyle: "unified",
                       classes: {
-                        root: "pb-8",
-                        header: "px-4",
+                        root: "pb-8 [&_[data-slot=session-review-list]]:pb-0",
+                        header: "px-4 !h-16 !pb-4",
                         container: "px-4",
                       },
                       loadingClass: "px-4 py-4 text-text-weak",
@@ -1686,7 +1703,8 @@ export default function Page() {
               </Switch>
             </div>
 
-            <Show when={params.id || !newSessionDesign()}>{composerRegion("dock")}</Show>
+            <Show when={(params.id || !newSessionDesign()) && !mobileChanges()}>{composerRegion("dock")}</Show>
+            <Show when={!!params.id && mobileTabsBottom()}>{mobileTabs(true, true)}</Show>
           </div>
 
           <Show when={desktopReviewOpen()}>

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

@@ -1,4 +1,4 @@
-import { Show, createEffect, createMemo, onCleanup } from "solid-js"
+import { Show, createEffect, createMemo, createResource, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useNavigate, useSearchParams } from "@solidjs/router"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
@@ -25,10 +25,12 @@ import { pathKey } from "@/utils/path-key"
 import { useLocal } from "@/context/local"
 import { useProviders } from "@/hooks/use-providers"
 import { useSettings } from "@/context/settings"
-import { useServer } from "@/context/server"
-import { useTabs } from "@/context/tabs"
+import { ServerConnection, useServer } from "@/context/server"
+import { type DraftTab, useTabs } from "@/context/tabs"
 import { useDirectoryPicker } from "@/components/directory-picker"
 import { base64Encode } from "@opencode-ai/core/util/encode"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
+import { useGlobal } from "@/context/global"
 
 export function SessionComposerRegion(props: {
   state: SessionComposerState
@@ -72,26 +74,52 @@ export function SessionComposerRegion(props: {
   const settings = useSettings()
   const server = useServer()
   const tabs = useTabs()
+  const global = useGlobal()
   const pickDirectory = useDirectoryPicker()
   const [search] = useSearchParams<{ draftId?: string }>()
   const view = layout.view(route.sessionKey)
 
+  const draft = createMemo(() => {
+    if (!search.draftId) return
+    return tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)
+  })
+  const projectServer = createMemo(() => {
+    if (!search.draftId) return server.current
+    const target = draft()?.server
+    if (!target) return
+    return server.list.find((conn) => ServerConnection.key(conn) === target)
+  })
+  const projectServerCtx = createMemo(() => {
+    const conn = projectServer()
+    if (conn) return global.createServerCtx(conn)
+  })
+  const projects = createMemo(() =>
+    search.draftId ? (projectServerCtx()?.projects.list() ?? []) : layout.projects.list(),
+  )
+
   const agentsQuery = createQuery(() => queryOptions().agents(pathKey(sdk().directory)))
   const globalProvidersQuery = createQuery(() => queryOptions().providers(null))
   const providersQuery = createQuery(() => queryOptions().providers(pathKey(sdk().directory)))
   const selectProject = (worktree: string) => {
-    layout.projects.open(worktree)
-    server.projects.touch(worktree)
+    const conn = projectServer()
+    const target = projectServerCtx()
     if (search.draftId) {
-      tabs.updateDraft(search.draftId, { server: server.key, directory: worktree })
+      if (!conn || !target) return
+      target.projects.open(worktree)
+      target.projects.touch(worktree)
+      tabs.updateDraft(search.draftId, { server: ServerConnection.key(conn), directory: worktree })
       return
     }
+
+    layout.projects.open(worktree)
+    server.projects.touch(worktree)
     navigate(`/${base64Encode(worktree)}/session`)
   }
   const addProject = (title: string) => {
-    if (!server.current) return
+    const conn = projectServer()
+    if (!conn) return
     pickDirectory({
-      server: server.current,
+      server: conn,
       title,
       onSelect: (result) => {
         const directory = Array.isArray(result) ? result[0] : result
@@ -114,7 +142,7 @@ export function SessionComposerRegion(props: {
       loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
     },
     projects: {
-      available: layout.projects.list(),
+      available: projects(),
       directory: sdk().directory,
       select: selectProject,
       add: addProject,
@@ -200,7 +228,11 @@ export function SessionComposerRegion(props: {
   const openParent = () => {
     const id = parentID()
     if (!id) return
-    navigate(`/${route.params.dir}/session/${id}`)
+    navigate(
+      route.params.serverKey
+        ? sessionHref(requireServerKey(route.params.serverKey), id)
+        : legacySessionHref(sdk().directory, id),
+    )
   }
 
   createEffect(() => {
@@ -211,6 +243,12 @@ export function SessionComposerRegion(props: {
     update()
   })
 
+  const ready = Promise.resolve()
+  const [promptReadyResource] = createResource(
+    () => prompt.ready.promise ?? ready,
+    (promise) => promise.then(() => true),
+  )
+
   return (
     <div
       ref={props.setPromptDockRef}
@@ -253,7 +291,7 @@ export function SessionComposerRegion(props: {
 
         <Show when={showComposer()}>
           <Show
-            when={prompt.ready()}
+            when={promptReadyResource()}
             fallback={
               <>
                 <Show when={rolled()} keyed>

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

@@ -405,7 +405,7 @@ export function FileTabContent(props: { tab: string }) {
           cacheKey: cacheKey(),
         }}
         enableLineSelection
-        enableHoverUtility
+        enableGutterUtility
         selectedLines={activeSelection()}
         commentedLines={commentedLines()}
         onRendered={() => {
@@ -413,11 +413,10 @@ export function FileTabContent(props: { tab: string }) {
         }}
         annotations={commentsUi.annotations()}
         renderAnnotation={commentsUi.renderAnnotation}
-        renderHoverUtility={commentsUi.renderHoverUtility}
+        renderGutterUtility={commentsUi.renderGutterUtility}
         onLineSelected={(range: SelectedLineRange | null) => {
           commentsUi.onLineSelected(range)
         }}
-        onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
         onLineSelectionEnd={(range: SelectedLineRange | null) => {
           commentsUi.onLineSelectionEnd(range)
         }}

packages/app/src/pages/session/session-layout.ts

@@ -1,15 +1,19 @@
 import { useParams } from "@solidjs/router"
 import { createMemo } from "solid-js"
 import { useLayout } from "@/context/layout"
-import { useServer } from "@/context/server"
 import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"
+import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 
 export const useSessionKey = () => {
   const params = useParams()
-  const server = useServer()
-  const scope = createMemo(() => server.scope())
-  const workspaceKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(params.dir)))
-  const sessionKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(params.dir, params.id)))
+  const sdk = useSDK()
+  const serverSDK = useServerSDK()
+  const scope = createMemo(() => serverSDK().scope)
+  const directory = createMemo(() => base64Encode(sdk().directory))
+  const workspaceKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(directory())))
+  const sessionKey = createMemo(() => SessionStateKey.from(scope(), SessionRouteKey.fromRoute(directory(), params.id)))
   return { params, sessionKey, workspaceKey }
 }
 

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

@@ -16,6 +16,7 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useSettings } from "@/context/settings"
 import { useTerminal } from "@/context/terminal"
+import { useSDK } from "@/context/sdk"
 import { terminalTabLabel } from "@/pages/session/terminal-label"
 import { createSizing, focusTerminalById } from "@/pages/session/helpers"
 import { getTerminalHandoff, setTerminalHandoff } from "@/pages/session/handoff"
@@ -25,10 +26,11 @@ export function TerminalPanel() {
   const delays = [120, 240]
   const layout = useLayout()
   const terminal = useTerminal()
+  const sdk = useSDK()
   const language = useLanguage()
   const command = useCommand()
   const settings = useSettings()
-  const { params, workspaceKey, view } = useSessionLayout()
+  const { workspaceKey, view } = useSessionLayout()
 
   const opened = createMemo(() => view().terminal.opened())
   const size = createSizing()
@@ -122,7 +124,7 @@ export function TerminalPanel() {
   })
 
   createEffect(() => {
-    const dir = params.dir
+    const dir = sdk().directory
     if (!dir) return
     if (!terminal.ready()) return
     language.locale()
@@ -140,7 +142,7 @@ export function TerminalPanel() {
   })
 
   const handoff = createMemo(() => {
-    const dir = params.dir
+    const dir = sdk().directory
     if (!dir) return []
     return getTerminalHandoff(workspaceKey()) ?? []
   })

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

@@ -62,6 +62,8 @@ import { useSessionKey } from "@/pages/session/session-layout"
 import { useServerSDK } from "@/context/server-sdk"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
@@ -71,6 +73,7 @@ import { makeTimer } from "@solid-primitives/timer"
 import { scheduleConnectedMeasure } from "./measure"
 import { createTimelineProjection } from "./projection"
 import { MessageComment, SummaryDiff, TimelineRow, TimelineRowMap } from "./rows"
+import { filterVirtualIndexes } from "./virtual-items"
 
 const emptyMessages: MessageType[] = []
 const emptyParts: PartType[] = []
@@ -260,6 +263,7 @@ export function MessageTimeline(props: {
   const sdk = useSDK()
   const sync = useSync()
   const settings = useSettings()
+  const tabs = useTabs()
   const dialog = useDialog()
   const language = useLanguage()
   const { params, sessionKey } = useSessionKey()
@@ -449,7 +453,10 @@ export function MessageTimeline(props: {
       const id = activeMessageID()
       const active = id ? (messageLastRowIndex().get(id) ?? -1) : -1
       const indexes = defaultRangeExtractor({ ...range, overscan: renderOverscan() })
-      return [...new Set([...resizePinnedIndexes, ...indexes, ...(active < 0 ? [] : [active])])].sort((a, b) => a - b)
+      return filterVirtualIndexes(
+        [...new Set([...resizePinnedIndexes, ...indexes, ...(active < 0 ? [] : [active])])].sort((a, b) => a - b),
+        range.count,
+      )
     },
   })
   const resizeItem = virtualizer.resizeItem
@@ -757,12 +764,18 @@ export function MessageTimeline(props: {
 
   const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
     if (params.id !== sessionID) return
+    const href = (id: string) =>
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
     if (parentID) {
-      navigate(`/${params.dir}/session/${parentID}`)
+      navigate(href(parentID))
       return
     }
     if (nextSessionID) {
-      navigate(`/${params.dir}/session/${nextSessionID}`)
+      navigate(href(nextSessionID))
+      return
+    }
+    if (params.serverKey) {
+      tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
       return
     }
     navigate(`/${params.dir}/session`)
@@ -864,7 +877,9 @@ export function MessageTimeline(props: {
   const navigateParent = () => {
     const id = parentID()
     if (!id) return
-    navigate(`/${params.dir}/session/${id}`)
+    navigate(
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id),
+    )
   }
 
   function DialogDeleteSession(props: { sessionID: string }) {
@@ -1285,7 +1300,9 @@ export function MessageTimeline(props: {
               "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
               "w-full": true,
               "pb-4": true,
-              "pl-2 pr-3 md:pl-4 md:pr-3": true,
+              "pr-3": true,
+              "pl-4": settings.general.newLayoutDesigns(),
+              "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
               "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
             }}
           >

packages/app/src/pages/session/timeline/virtual-items.ts

@@ -0,0 +1,3 @@
+export function filterVirtualIndexes(indexes: number[], count: number) {
+  return indexes.filter((index) => index >= 0 && index < count)
+}

packages/app/src/pages/session/use-session-commands.tsx

@@ -18,6 +18,8 @@ import { createSessionTabs } from "@/pages/session/helpers"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSessionLayout } from "@/pages/session/session-layout"
+import { useTabs } from "@/context/tabs"
+import { requireServerKey } from "@/utils/session-route"
 
 export type SessionCommandContext = {
   navigateMessageByOffset: (offset: number) => void
@@ -45,6 +47,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const settings = useSettings()
   const sync = useSync()
   const terminal = useTerminal()
+  const sessionTabs = useTabs()
   const layout = useLayout()
   const navigate = useNavigate()
   const { params, tabs, view } = useSessionLayout()
@@ -381,7 +384,13 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
       title: language.t("command.session.new"),
       keybind: "mod+shift+s",
       slash: "new",
-      onSelect: () => navigate(`/${params.dir}/session`),
+      onSelect: () => {
+        if (params.serverKey) {
+          sessionTabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
+          return
+        }
+        navigate(`/${params.dir}/session`)
+      },
     }),
     sessionCommand({
       id: "session.undo",

packages/app/src/utils/session-route.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "bun:test"
+import { ServerConnection } from "@/context/server"
+import { legacySessionHref, requireServerKey, rootSession, sessionHref } from "./session-route"
+
+describe("session routes", () => {
+  test("builds and decodes a server-keyed session route", () => {
+    const server = ServerConnection.Key.make("https://example.com:4096")
+    const href = sessionHref(server, "session-1")
+
+    expect(href).toBe("/server/aHR0cHM6Ly9leGFtcGxlLmNvbTo0MDk2/session/session-1")
+    expect(requireServerKey(href.split("/")[2])).toBe(server)
+  })
+
+  test("rejects malformed server keys", () => {
+    expect(() => requireServerKey("not-base64")).toThrow("Invalid server route")
+  })
+
+  test("builds the legacy directory-keyed route", () => {
+    expect(legacySessionHref("/Users/example/project", "session-1")).toBe(
+      "/L1VzZXJzL2V4YW1wbGUvcHJvamVjdA/session/session-1",
+    )
+  })
+
+  test("resolves the root session", async () => {
+    const sessions: Record<string, { id: string; parentID?: string }> = {
+      child: { id: "child", parentID: "parent" },
+      parent: { id: "parent", parentID: "root" },
+      root: { id: "root" },
+    }
+
+    expect(
+      await rootSession(sessions.child, async (id) => {
+        const session = sessions[id]
+        if (!session) throw new Error(`Missing session: ${id}`)
+        return session
+      }),
+    ).toBe(sessions.root)
+  })
+})

packages/app/src/utils/session-route.ts

@@ -0,0 +1,25 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { ServerConnection } from "@/context/server"
+import { decode64 } from "@/utils/base64"
+
+export function sessionHref(server: ServerConnection.Key, sessionID: string) {
+  return `/server/${base64Encode(server)}/session/${sessionID}`
+}
+
+export function legacySessionHref(directory: string, sessionID: string) {
+  return `/${base64Encode(directory)}/session/${sessionID}`
+}
+
+export function requireServerKey(segment: string | undefined) {
+  const key = decode64(segment)
+  if (!key || base64Encode(key) !== segment) throw new Error("Invalid server route")
+  return ServerConnection.Key.make(key)
+}
+
+type SessionParent = { id: string; parentID?: string }
+
+export async function rootSession(session: SessionParent, get: (sessionID: string) => Promise<SessionParent>) {
+  let current = session
+  while (current.parentID) current = await get(current.parentID)
+  return current
+}

packages/app/src/wsl/settings.tsx

@@ -24,11 +24,11 @@ export function isWslServer(server: ServerConnection.Any) {
   return server.type === "sidecar" && server.variant === "wsl"
 }
 
-export function WslAddServerButton() {
+export function AddServerMenu(props: { onAddServer: () => void }) {
   const platform = usePlatform()
   const dialog = useDialog()
   const language = useLanguage()
-  const openAdd = () => {
+  const openAddWsl = () => {
     dialog.push(() => (
       <Dialog title={language.t("wsl.server.add")} size="large" fit class="settings-v2-wsl-dialog">
         <DialogAddWslServer />
@@ -36,10 +36,25 @@ export function WslAddServerButton() {
     ))
   }
   return (
-    <Show when={platform.wslServers}>
-      <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
-        {language.t("wsl.server.addShort")}
-      </ButtonV2>
+    <Show
+      when={platform.wslServers}
+      fallback={
+        <ButtonV2 variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
+          {language.t("dialog.server.add.button")}
+        </ButtonV2>
+      }
+    >
+      <MenuV2 gutter={4} modal={false} placement="bottom-end">
+        <MenuV2.Trigger as={ButtonV2} variant="ghost-muted" icon="plus">
+          {language.t("dialog.server.add.button")}
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</MenuV2.Item>
+            <MenuV2.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
     </Show>
   )
 }

packages/app/test-browser/prompt-persistence.test.ts

@@ -0,0 +1,69 @@
+import { beforeAll, describe, expect, mock, test } from "bun:test"
+import type { AsyncStorage } from "@solid-primitives/storage"
+import { createEffect, createRoot } from "solid-js"
+import { ServerScope } from "@/utils/server-scope"
+
+let Prompt: typeof import("@/context/prompt")
+let read: ((value: string | null) => void) | undefined
+
+const storage: AsyncStorage = {
+  getItem: () => new Promise((resolve) => (read = resolve)),
+  setItem: async () => undefined,
+  removeItem: async () => undefined,
+  clear: async () => undefined,
+  key: async () => null,
+  getLength: async () => 0,
+  length: Promise.resolve(0),
+}
+
+beforeAll(async () => {
+  mock.module("@solidjs/router", () => ({
+    useParams: () => ({}),
+    useSearchParams: () => [{}],
+  }))
+  mock.module("@opencode-ai/ui/context", () => ({
+    createSimpleContext: () => ({
+      use: () => undefined,
+      provider: () => undefined,
+    }),
+  }))
+  mock.module("@/context/platform", () => ({
+    usePlatform: () => ({ platform: "desktop", storage: () => storage }),
+  }))
+
+  Prompt = await import("@/context/prompt")
+})
+
+describe("prompt persistence", () => {
+  test("waits for an async draft to hydrate before reporting ready", async () => {
+    await new Promise<void>((resolve, reject) => {
+      createRoot((dispose) => {
+        const session = Prompt.createPromptSession(ServerScope.local, { draftID: "draft-async" })
+        const ready = Prompt.createPromptReady(() => session)
+
+        expect(ready()).toBe(false)
+        expect(session.current()[0]).toMatchObject({ type: "text", content: "" })
+
+        read?.(
+          JSON.stringify({
+            prompt: [{ type: "text", content: "persisted draft", start: 0, end: 15 }],
+            cursor: 15,
+            context: { items: [] },
+          }),
+        )
+
+        createEffect(() => {
+          if (!ready()) return
+          try {
+            expect(session.current()[0]).toMatchObject({ type: "text", content: "persisted draft" })
+            dispose()
+            resolve()
+          } catch (error) {
+            dispose()
+            reject(error)
+          }
+        })
+      })
+    })
+  })
+})

packages/app/test-browser/solid-virtual.test.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "bun:test"
-import { createVirtualizer } from "@tanstack/solid-virtual"
+import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import { createRoot, createSignal } from "solid-js"
+import { filterVirtualIndexes } from "@/pages/session/timeline/virtual-items"
 
 test("reactive count updates preserve measured row sizes", () => {
   createRoot((dispose) => {
@@ -44,3 +45,26 @@ test("logical scroll offset includes pending measurement adjustments", () => {
     dispose()
   })
 })
+
+test("stale pinned indexes do not produce missing virtual items after count shrinks", () => {
+  createRoot((dispose) => {
+    const [count, setCount] = createSignal(2)
+    const pinned = [1]
+    const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+      get count() {
+        return count()
+      },
+      getScrollElement: () => null,
+      estimateSize: () => 60,
+      initialRect: { width: 800, height: 600 },
+      rangeExtractor: (range) =>
+        filterVirtualIndexes([...new Set([...defaultRangeExtractor(range), ...pinned])], range.count),
+    })
+
+    expect(virtualizer.getVirtualItems().map((item) => item.index)).toEqual([0, 1])
+    setCount(1)
+    expect(virtualizer.getVirtualItems().map((item) => item.index)).toEqual([0])
+    expect(() => new Map(virtualizer.getVirtualItems().map((item) => [item.key, item]))).not.toThrow()
+    dispose()
+  })
+})

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/cli",
-  "version": "1.17.8",
+  "version": "1.17.9",
   "type": "module",
   "license": "MIT",
   "bin": {

packages/cli/src/commands/handlers/serve.ts

@@ -27,9 +27,11 @@ export default Runtime.handler(
 
 function listen(hostname: string, port: Option.Option<number>, password: string) {
   if (Option.isSome(port)) return bind(hostname, port.value, password)
-  // Preserve the familiar default when available, but let the OS choose a free
-  // port when another local server already owns 4096.
-  return bind(hostname, 4096, password).pipe(Effect.catch(() => bind(hostname, 0, password)))
+  const next = (port: number): ReturnType<typeof bind> =>
+    bind(hostname, port, password).pipe(
+      Effect.catch((error) => (port === 65_535 ? Effect.fail(error) : next(port + 1))),
+    )
+  return next(4096)
 }
 
 function bind(hostname: string, port: number, password: string) {

packages/client/README.md

@@ -0,0 +1,27 @@
+# @opencode-ai/client
+
+Private generation target for clients derived directly from OpenCode's authoritative Effect `HttpApi`.
+
+## Entrypoints
+
+- `@opencode-ai/client`: zero-Effect Promise client using `fetch`.
+- `@opencode-ai/client/effect`: rich Effect network client using an environment-provided `HttpClient`.
+
+The generated surface contains `sessions.list`, `create`, `get`, `switchAgent`, `switchModel`, `prompt`, `compact`, `wait`, and `context`. The server and generator consume the exact same hosted `SessionGroup`. Run `bun run generate` after changing that contract and `bun run check:generated` to detect committed-output drift.
+
+The Effect entrypoint uses canonical decoded values such as `Session.ID`, `Location.Ref`, and `Prompt`. These datatypes come from the lightweight `@opencode-ai/schema` package and are re-exported so callers depend only on the client surface. The authoritative `SessionGroup` lives in `@opencode-ai/protocol`; Server hosts that exact group and adapts it to Core.
+
+The Promise root remains structural and has no Core or Effect runtime dependency. `/effect` depends only on Effect, Schema, and Protocol and is browser-bundle safe. Bundle-boundary tests enforce both import graphs.
+
+Effect consumers construct canonical decoded inputs:
+
+```ts
+import { AbsolutePath, Location, OpenCode, Prompt } from "@opencode-ai/client/effect"
+
+const client = yield * OpenCode.make({ baseUrl: "https://opencode.example" })
+yield *
+  client.sessions.create({
+    location: Location.Ref.make({ directory: AbsolutePath.make("/workspace") }),
+  })
+yield * client.sessions.prompt({ sessionID, prompt: Prompt.make({ text: "Hello" }) })
+```

packages/client/package.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/client",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": "./src/index.ts",
+    "./effect": "./src/effect.ts"
+  },
+  "scripts": {
+    "generate": "bun run script/build.ts",
+    "check:generated": "bun run generate && git diff --exit-code -- src/generated src/generated-effect",
+    "test": "bun test --timeout 5000",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@opencode-ai/schema": "workspace:*",
+    "@opencode-ai/protocol": "workspace:*"
+  },
+  "peerDependencies": {
+    "effect": "4.0.0-beta.83"
+  },
+  "peerDependenciesMeta": {
+    "effect": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@effect/platform-node": "catalog:",
+    "@opencode-ai/httpapi-codegen": "workspace:*",
+    "@tsconfig/bun": "catalog:",
+    "@types/bun": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "effect": "catalog:"
+  }
+}

packages/client/script/build.ts

@@ -0,0 +1,26 @@
+import { NodeFileSystem } from "@effect/platform-node"
+import { SessionGroup } from "@opencode-ai/protocol/session"
+import { compile, emitEffectImported, emitPromise, write } from "@opencode-ai/httpapi-codegen"
+import { Effect } from "effect"
+import { HttpApi } from "effect/unstable/httpapi"
+import { fileURLToPath } from "url"
+
+const contract = compile(HttpApi.make("opencode-client").add(SessionGroup), {
+  groupNames: { "server.session": "sessions" },
+})
+
+await Effect.runPromise(
+  Effect.all(
+    [
+      write(emitPromise(contract), fileURLToPath(new URL("../src/generated", import.meta.url))),
+      write(
+        emitEffectImported(contract, {
+          module: "@opencode-ai/protocol/session",
+          group: "SessionGroup",
+        }),
+        fileURLToPath(new URL("../src/generated-effect", import.meta.url)),
+      ),
+    ],
+    { concurrency: 2, discard: true },
+  ).pipe(Effect.provide(NodeFileSystem.layer)),
+)

packages/client/src/effect.ts

@@ -0,0 +1,12 @@
+// TODO: Keep additional network capabilities inside Schema and Protocol as the client grows; /effect must never import
+// Core or Server. Preserve these datatype exports so internal model reorganizations do not require caller migrations.
+export * from "./generated-effect/index"
+export { Agent } from "@opencode-ai/schema/agent"
+export { Location } from "@opencode-ai/schema/location"
+export { Model } from "@opencode-ai/schema/model"
+export { Provider } from "@opencode-ai/schema/provider"
+export { AbsolutePath, RelativePath } from "@opencode-ai/schema/schema"
+export { Session } from "@opencode-ai/schema/session"
+export { SessionInput } from "@opencode-ai/schema/session-input"
+export { SessionMessage } from "@opencode-ai/schema/session-message"
+export { Prompt } from "@opencode-ai/schema/prompt"

packages/client/src/generated-effect/.httpapi-codegen.json

@@ -0,0 +1,5 @@
+[
+  "client-error.ts",
+  "client.ts",
+  "index.ts"
+]

packages/client/src/generated-effect/client-error.ts

@@ -0,0 +1,5 @@
+import { Schema } from "effect"
+
+export class ClientError extends Schema.TaggedErrorClass<ClientError>()("ClientError", {
+  cause: Schema.Defect(),
+}) {}

packages/client/src/generated-effect/client.ts

@@ -0,0 +1,136 @@
+// Generated by @opencode-ai/httpapi-codegen. Do not edit.
+import { Effect, Schema } from "effect"
+import { Sse } from "effect/unstable/encoding"
+import { HttpClientError } from "effect/unstable/http"
+import { HttpApi, HttpApiClient } from "effect/unstable/httpapi"
+import { SessionGroup } from "@opencode-ai/protocol/session"
+import { ClientError } from "./client-error"
+
+const Api = HttpApi.make("generated").add(SessionGroup)
+
+type RawClient = HttpApiClient.ForApi<typeof Api>
+
+const mapClientError = <E>(error: E) =>
+  HttpClientError.isHttpClientError(error) || Schema.isSchemaError(error) || Sse.Retry.is(error)
+    ? new ClientError({ cause: error })
+    : error
+
+type Endpoint0_0Request = Parameters<RawClient["server.session"]["session.list"]>[0]
+type Endpoint0_0Input = {
+  readonly workspace?: Endpoint0_0Request["query"]["workspace"]
+  readonly limit?: Endpoint0_0Request["query"]["limit"]
+  readonly order?: Endpoint0_0Request["query"]["order"]
+  readonly search?: Endpoint0_0Request["query"]["search"]
+  readonly directory?: Endpoint0_0Request["query"]["directory"]
+  readonly project?: Endpoint0_0Request["query"]["project"]
+  readonly subpath?: Endpoint0_0Request["query"]["subpath"]
+  readonly cursor?: Endpoint0_0Request["query"]["cursor"]
+}
+const Endpoint0_0 = (raw: RawClient["server.session"]) => (input?: Endpoint0_0Input) =>
+  raw["session.list"]({
+    query: {
+      workspace: input?.workspace,
+      limit: input?.limit,
+      order: input?.order,
+      search: input?.search,
+      directory: input?.directory,
+      project: input?.project,
+      subpath: input?.subpath,
+      cursor: input?.cursor,
+    },
+  }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_1Request = Parameters<RawClient["server.session"]["session.create"]>[0]
+type Endpoint0_1Input = {
+  readonly id?: Endpoint0_1Request["payload"]["id"]
+  readonly agent?: Endpoint0_1Request["payload"]["agent"]
+  readonly model?: Endpoint0_1Request["payload"]["model"]
+  readonly location?: Endpoint0_1Request["payload"]["location"]
+}
+const Endpoint0_1 = (raw: RawClient["server.session"]) => (input?: Endpoint0_1Input) =>
+  raw["session.create"]({
+    payload: { id: input?.id, agent: input?.agent, model: input?.model, location: input?.location },
+  }).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
+type Endpoint0_2Request = Parameters<RawClient["server.session"]["session.get"]>[0]
+type Endpoint0_2Input = { readonly sessionID: Endpoint0_2Request["params"]["sessionID"] }
+const Endpoint0_2 = (raw: RawClient["server.session"]) => (input: Endpoint0_2Input) =>
+  raw["session.get"]({ params: { sessionID: input.sessionID } }).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
+type Endpoint0_3Request = Parameters<RawClient["server.session"]["session.switchAgent"]>[0]
+type Endpoint0_3Input = {
+  readonly sessionID: Endpoint0_3Request["params"]["sessionID"]
+  readonly agent: Endpoint0_3Request["payload"]["agent"]
+}
+const Endpoint0_3 = (raw: RawClient["server.session"]) => (input: Endpoint0_3Input) =>
+  raw["session.switchAgent"]({ params: { sessionID: input.sessionID }, payload: { agent: input.agent } }).pipe(
+    Effect.mapError(mapClientError),
+  )
+
+type Endpoint0_4Request = Parameters<RawClient["server.session"]["session.switchModel"]>[0]
+type Endpoint0_4Input = {
+  readonly sessionID: Endpoint0_4Request["params"]["sessionID"]
+  readonly model: Endpoint0_4Request["payload"]["model"]
+}
+const Endpoint0_4 = (raw: RawClient["server.session"]) => (input: Endpoint0_4Input) =>
+  raw["session.switchModel"]({ params: { sessionID: input.sessionID }, payload: { model: input.model } }).pipe(
+    Effect.mapError(mapClientError),
+  )
+
+type Endpoint0_5Request = Parameters<RawClient["server.session"]["session.prompt"]>[0]
+type Endpoint0_5Input = {
+  readonly sessionID: Endpoint0_5Request["params"]["sessionID"]
+  readonly id?: Endpoint0_5Request["payload"]["id"]
+  readonly prompt: Endpoint0_5Request["payload"]["prompt"]
+  readonly delivery?: Endpoint0_5Request["payload"]["delivery"]
+  readonly resume?: Endpoint0_5Request["payload"]["resume"]
+}
+const Endpoint0_5 = (raw: RawClient["server.session"]) => (input: Endpoint0_5Input) =>
+  raw["session.prompt"]({
+    params: { sessionID: input.sessionID },
+    payload: { id: input.id, prompt: input.prompt, delivery: input.delivery, resume: input.resume },
+  }).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
+type Endpoint0_6Request = Parameters<RawClient["server.session"]["session.compact"]>[0]
+type Endpoint0_6Input = { readonly sessionID: Endpoint0_6Request["params"]["sessionID"] }
+const Endpoint0_6 = (raw: RawClient["server.session"]) => (input: Endpoint0_6Input) =>
+  raw["session.compact"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_7Request = Parameters<RawClient["server.session"]["session.wait"]>[0]
+type Endpoint0_7Input = { readonly sessionID: Endpoint0_7Request["params"]["sessionID"] }
+const Endpoint0_7 = (raw: RawClient["server.session"]) => (input: Endpoint0_7Input) =>
+  raw["session.wait"]({ params: { sessionID: input.sessionID } }).pipe(Effect.mapError(mapClientError))
+
+type Endpoint0_8Request = Parameters<RawClient["server.session"]["session.context"]>[0]
+type Endpoint0_8Input = { readonly sessionID: Endpoint0_8Request["params"]["sessionID"] }
+const Endpoint0_8 = (raw: RawClient["server.session"]) => (input: Endpoint0_8Input) =>
+  raw["session.context"]({ params: { sessionID: input.sessionID } }).pipe(
+    Effect.mapError(mapClientError),
+    Effect.map((value) => value.data),
+  )
+
+const adaptGroup0 = (raw: RawClient["server.session"]) => ({
+  list: Endpoint0_0(raw),
+  create: Endpoint0_1(raw),
+  get: Endpoint0_2(raw),
+  switchAgent: Endpoint0_3(raw),
+  switchModel: Endpoint0_4(raw),
+  prompt: Endpoint0_5(raw),
+  compact: Endpoint0_6(raw),
+  wait: Endpoint0_7(raw),
+  context: Endpoint0_8(raw),
+})
+
+const adaptClient = (raw: RawClient) => ({ sessions: adaptGroup0(raw["server.session"]) })
+
+export const make = (options?: { readonly baseUrl?: URL | string }) =>
+  HttpApiClient.make(Api, options).pipe(Effect.map(adaptClient))

packages/client/src/generated-effect/index.ts

@@ -0,0 +1,2 @@
+export { ClientError } from "./client-error"
+export * as OpenCode from "./client"

packages/client/src/generated/.httpapi-codegen.json

@@ -0,0 +1,6 @@
+[
+  "client-error.ts",
+  "client.ts",
+  "index.ts",
+  "types.ts"
+]

packages/client/src/generated/client-error.ts

@@ -0,0 +1,11 @@
+export type ClientErrorReason = "Transport" | "UnexpectedStatus" | "UnsupportedContentType" | "MalformedResponse"
+
+export class ClientError extends Error {
+  override readonly name = "ClientError"
+  constructor(
+    readonly reason: ClientErrorReason,
+    options?: ErrorOptions,
+  ) {
+    super(reason, options)
+  }
+}

packages/client/src/generated/client.ts

@@ -0,0 +1,309 @@
+import type {
+  SessionsListInput,
+  SessionsListOutput,
+  SessionsCreateInput,
+  SessionsCreateOutput,
+  SessionsGetInput,
+  SessionsGetOutput,
+  SessionsSwitchAgentInput,
+  SessionsSwitchAgentOutput,
+  SessionsSwitchModelInput,
+  SessionsSwitchModelOutput,
+  SessionsPromptInput,
+  SessionsPromptOutput,
+  SessionsCompactInput,
+  SessionsCompactOutput,
+  SessionsWaitInput,
+  SessionsWaitOutput,
+  SessionsContextInput,
+  SessionsContextOutput,
+} from "./types"
+import { ClientError } from "./client-error"
+
+export interface ClientOptions {
+  readonly baseUrl: string
+  readonly fetch?: typeof globalThis.fetch
+  readonly headers?: HeadersInit
+}
+
+export interface RequestOptions {
+  readonly signal?: AbortSignal
+  readonly headers?: HeadersInit
+}
+
+interface RequestDescriptor {
+  readonly method: string
+  readonly path: string
+  readonly query?: Record<string, unknown>
+  readonly headers?: Record<string, unknown>
+  readonly body?: unknown
+  readonly successStatus: number
+  readonly declaredStatuses: ReadonlyArray<number>
+  readonly empty: boolean
+}
+
+export function make(options: ClientOptions) {
+  const fetch = options.fetch ?? globalThis.fetch
+
+  const prepare = (descriptor: RequestDescriptor, requestOptions?: RequestOptions) => {
+    const url = new URL(descriptor.path, options.baseUrl)
+    for (const [key, value] of Object.entries(descriptor.query ?? {})) appendQuery(url.searchParams, key, value)
+    const headers = new Headers(options.headers)
+    for (const [key, value] of Object.entries(descriptor.headers ?? {})) {
+      if (value !== undefined && value !== null) headers.set(key, String(value))
+    }
+    for (const [key, value] of new Headers(requestOptions?.headers)) headers.set(key, value)
+    if (descriptor.body !== undefined && !headers.has("content-type")) headers.set("content-type", "application/json")
+    return {
+      url,
+      init: {
+        method: descriptor.method,
+        signal: requestOptions?.signal,
+        headers,
+        body: descriptor.body === undefined ? undefined : JSON.stringify(descriptor.body),
+      } satisfies RequestInit,
+    }
+  }
+
+  const execute = async (descriptor: RequestDescriptor, requestOptions?: RequestOptions) => {
+    try {
+      const prepared = prepare(descriptor, requestOptions)
+      return await fetch(prepared.url, prepared.init)
+    } catch (cause) {
+      throw new ClientError("Transport", { cause })
+    }
+  }
+
+  const responseError = async (response: Response, descriptor: RequestDescriptor): Promise<never> => {
+    if (descriptor.declaredStatuses.includes(response.status)) throw await json(response)
+    try {
+      await response.body?.cancel()
+    } catch {}
+    throw new ClientError("UnexpectedStatus", { cause: { status: response.status } })
+  }
+
+  const request = async <A>(descriptor: RequestDescriptor, requestOptions?: RequestOptions): Promise<A> => {
+    const response = await execute(descriptor, requestOptions)
+    if (response.status !== descriptor.successStatus) return responseError(response, descriptor)
+    if (descriptor.empty) {
+      try {
+        await response.body?.cancel()
+      } catch {}
+      return undefined as A
+    }
+    return (await json(response)) as A
+  }
+
+  const sse = <A>(descriptor: RequestDescriptor, requestOptions?: RequestOptions): AsyncIterable<A> => ({
+    async *[Symbol.asyncIterator]() {
+      const response = await execute(descriptor, requestOptions)
+      if (response.status !== descriptor.successStatus) await responseError(response, descriptor)
+      if (!isContentType(response, "text/event-stream")) {
+        try {
+          await response.body?.cancel()
+        } catch {}
+        throw new ClientError("UnsupportedContentType")
+      }
+      if (response.body === null) throw new ClientError("MalformedResponse")
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ""
+      try {
+        while (true) {
+          let next
+          try {
+            next = await reader.read()
+          } catch (cause) {
+            throw new ClientError("Transport", { cause })
+          }
+          buffer += decoder.decode(next.value, { stream: !next.done })
+          if (buffer.length > 1_048_576) throw new ClientError("MalformedResponse")
+          const trailingCarriageReturn = !next.done && buffer.endsWith("\r")
+          if (trailingCarriageReturn) buffer = buffer.slice(0, -1)
+          buffer = buffer.replaceAll("\r\n", "\n").replaceAll("\r", "\n")
+          if (trailingCarriageReturn) buffer += "\r"
+          if (next.done && buffer !== "") buffer += "\n\n"
+          let boundary = buffer.indexOf("\n\n")
+          while (boundary >= 0) {
+            const block = buffer.slice(0, boundary)
+            buffer = buffer.slice(boundary + 2)
+            const data = block
+              .split("\n")
+              .flatMap((line) => (line.startsWith("data:") ? [line.slice(5).trimStart()] : []))
+              .join("\n")
+            if (data !== "") {
+              try {
+                yield JSON.parse(data) as A
+              } catch (cause) {
+                throw new ClientError("MalformedResponse", { cause })
+              }
+            }
+            boundary = buffer.indexOf("\n\n")
+          }
+          if (next.done) return
+        }
+      } finally {
+        try {
+          await reader.cancel()
+        } catch {}
+        reader.releaseLock()
+      }
+    },
+  })
+
+  return {
+    sessions: {
+      list: (input?: SessionsListInput, requestOptions?: RequestOptions) =>
+        request<SessionsListOutput>(
+          {
+            method: "GET",
+            path: `/api/session`,
+            query: {
+              workspace: input?.workspace,
+              limit: input?.limit,
+              order: input?.order,
+              search: input?.search,
+              directory: input?.directory,
+              project: input?.project,
+              subpath: input?.subpath,
+              cursor: input?.cursor,
+            },
+            successStatus: 200,
+            declaredStatuses: [400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ),
+      create: (input?: SessionsCreateInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsCreateOutput }>(
+          {
+            method: "POST",
+            path: `/api/session`,
+            body: { id: input?.id, agent: input?.agent, model: input?.model, location: input?.location },
+            successStatus: 200,
+            declaredStatuses: [400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
+      get: (input: SessionsGetInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsGetOutput }>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}`,
+            successStatus: 200,
+            declaredStatuses: [400, 404, 401],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
+      switchAgent: (input: SessionsSwitchAgentInput, requestOptions?: RequestOptions) =>
+        request<SessionsSwitchAgentOutput>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/agent`,
+            body: { agent: input.agent },
+            successStatus: 204,
+            declaredStatuses: [400, 404, 401],
+            empty: true,
+          },
+          requestOptions,
+        ),
+      switchModel: (input: SessionsSwitchModelInput, requestOptions?: RequestOptions) =>
+        request<SessionsSwitchModelOutput>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/model`,
+            body: { model: input.model },
+            successStatus: 204,
+            declaredStatuses: [400, 404, 401],
+            empty: true,
+          },
+          requestOptions,
+        ),
+      prompt: (input: SessionsPromptInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsPromptOutput }>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/prompt`,
+            body: { id: input.id, prompt: input.prompt, delivery: input.delivery, resume: input.resume },
+            successStatus: 200,
+            declaredStatuses: [409, 400, 404, 401],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
+      compact: (input: SessionsCompactInput, requestOptions?: RequestOptions) =>
+        request<SessionsCompactOutput>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/compact`,
+            successStatus: 204,
+            declaredStatuses: [404, 503, 401, 400],
+            empty: true,
+          },
+          requestOptions,
+        ),
+      wait: (input: SessionsWaitInput, requestOptions?: RequestOptions) =>
+        request<SessionsWaitOutput>(
+          {
+            method: "POST",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/wait`,
+            successStatus: 204,
+            declaredStatuses: [404, 503, 401, 400],
+            empty: true,
+          },
+          requestOptions,
+        ),
+      context: (input: SessionsContextInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionsContextOutput }>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/context`,
+            successStatus: 200,
+            declaredStatuses: [404, 401, 500, 400],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
+    },
+  }
+}
+
+function appendQuery(params: URLSearchParams, key: string, value: unknown): void {
+  if (value === undefined || value === null) return
+  if (Array.isArray(value)) {
+    for (const item of value) appendQuery(params, key, item)
+    return
+  }
+  if (typeof value === "object") {
+    for (const [child, item] of Object.entries(value)) appendQuery(params, `${key}[${child}]`, item)
+    return
+  }
+  params.append(key, String(value))
+}
+
+async function json(response: Response): Promise<unknown> {
+  if (!isContentType(response, "application/json") && !response.headers.get("content-type")?.includes("+json")) {
+    try {
+      await response.body?.cancel()
+    } catch {}
+    throw new ClientError("UnsupportedContentType")
+  }
+  let text: string
+  try {
+    text = await response.text()
+  } catch (cause) {
+    throw new ClientError("Transport", { cause })
+  }
+  if (text === "") throw new ClientError("MalformedResponse")
+  try {
+    return JSON.parse(text)
+  } catch (cause) {
+    throw new ClientError("MalformedResponse", { cause })
+  }
+}
+
+function isContentType(response: Response, expected: string) {
+  return response.headers.get("content-type")?.split(";", 1)[0]?.trim().toLowerCase() === expected
+}

packages/client/src/generated/index.ts

@@ -0,0 +1,3 @@
+export { ClientError, type ClientErrorReason } from "./client-error"
+export * as OpenCode from "./client"
+export * from "./types"

packages/client/src/generated/types.ts

@@ -0,0 +1,555 @@
+export type JsonValue =
+  | null
+  | boolean
+  | number
+  | string
+  | ReadonlyArray<JsonValue>
+  | { readonly [key: string]: JsonValue }
+
+export type InvalidCursorError = { readonly _tag: "InvalidCursorError"; readonly message: string }
+export const isInvalidCursorError = (value: unknown): value is InvalidCursorError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "InvalidCursorError"
+
+export type InvalidRequestError = {
+  readonly _tag: "InvalidRequestError"
+  readonly message: string
+  readonly kind?: string | undefined
+  readonly field?: string | undefined
+}
+export const isInvalidRequestError = (value: unknown): value is InvalidRequestError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "InvalidRequestError"
+
+export type UnauthorizedError = { readonly _tag: "UnauthorizedError"; readonly message: string }
+export const isUnauthorizedError = (value: unknown): value is UnauthorizedError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "UnauthorizedError"
+
+export type SessionNotFoundError = {
+  readonly _tag: "SessionNotFoundError"
+  readonly sessionID: string
+  readonly message: string
+}
+export const isSessionNotFoundError = (value: unknown): value is SessionNotFoundError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "SessionNotFoundError"
+
+export type ConflictError = {
+  readonly _tag: "ConflictError"
+  readonly message: string
+  readonly resource?: string | undefined
+}
+export const isConflictError = (value: unknown): value is ConflictError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "ConflictError"
+
+export type ServiceUnavailableError = {
+  readonly _tag: "ServiceUnavailableError"
+  readonly message: string
+  readonly service?: string | undefined
+}
+export const isServiceUnavailableError = (value: unknown): value is ServiceUnavailableError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "ServiceUnavailableError"
+
+export type UnknownError = {
+  readonly _tag: "UnknownError"
+  readonly message: string
+  readonly ref?: string | undefined
+}
+export const isUnknownError = (value: unknown): value is UnknownError =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "UnknownError"
+
+export type SessionsListInput = {
+  readonly workspace?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["workspace"]
+  readonly limit?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["limit"]
+  readonly order?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["order"]
+  readonly search?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["search"]
+  readonly directory?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["directory"]
+  readonly project?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["project"]
+  readonly subpath?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["subpath"]
+  readonly cursor?: {
+    readonly workspace?: string | undefined
+    readonly limit?: string | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly search?: string | undefined
+    readonly directory?: string | undefined
+    readonly project?: string | undefined
+    readonly subpath?: string | undefined
+    readonly cursor?: string | undefined
+  }["cursor"]
+}
+
+export type SessionsListOutput = {
+  readonly data: ReadonlyArray<{
+    readonly id: string
+    readonly parentID?: string
+    readonly projectID: string
+    readonly agent?: string | null
+    readonly model?: { readonly id: string; readonly providerID: string; readonly variant?: string | null } | null
+    readonly cost: number
+    readonly tokens: {
+      readonly input: number
+      readonly output: number
+      readonly reasoning: number
+      readonly cache: { readonly read: number; readonly write: number }
+    }
+    readonly time: { readonly created: number; readonly updated: number; readonly archived?: number | null }
+    readonly title: string
+    readonly location: { readonly directory: string; readonly workspaceID?: string | null }
+    readonly subpath?: string | null
+  }>
+  readonly cursor: { readonly previous?: string | null; readonly next?: string | null }
+}
+
+export type SessionsCreateInput = {
+  readonly id?: {
+    readonly id?: string | undefined
+    readonly agent?: string | undefined
+    readonly model?:
+      | { readonly id: string; readonly providerID: string; readonly variant?: string | undefined }
+      | undefined
+    readonly location?: { readonly directory: string; readonly workspaceID?: string | undefined } | undefined
+  }["id"]
+  readonly agent?: {
+    readonly id?: string | undefined
+    readonly agent?: string | undefined
+    readonly model?:
+      | { readonly id: string; readonly providerID: string; readonly variant?: string | undefined }
+      | undefined
+    readonly location?: { readonly directory: string; readonly workspaceID?: string | undefined } | undefined
+  }["agent"]
+  readonly model?: {
+    readonly id?: string | undefined
+    readonly agent?: string | undefined
+    readonly model?:
+      | { readonly id: string; readonly providerID: string; readonly variant?: string | undefined }
+      | undefined
+    readonly location?: { readonly directory: string; readonly workspaceID?: string | undefined } | undefined
+  }["model"]
+  readonly location?: {
+    readonly id?: string | undefined
+    readonly agent?: string | undefined
+    readonly model?:
+      | { readonly id: string; readonly providerID: string; readonly variant?: string | undefined }
+      | undefined
+    readonly location?: { readonly directory: string; readonly workspaceID?: string | undefined } | undefined
+  }["location"]
+}
+
+export type SessionsCreateOutput = {
+  readonly data: {
+    readonly id: string
+    readonly parentID?: string
+    readonly projectID: string
+    readonly agent?: string | null
+    readonly model?: { readonly id: string; readonly providerID: string; readonly variant?: string | null } | null
+    readonly cost: number
+    readonly tokens: {
+      readonly input: number
+      readonly output: number
+      readonly reasoning: number
+      readonly cache: { readonly read: number; readonly write: number }
+    }
+    readonly time: { readonly created: number; readonly updated: number; readonly archived?: number | null }
+    readonly title: string
+    readonly location: { readonly directory: string; readonly workspaceID?: string | null }
+    readonly subpath?: string | null
+  }
+}["data"]
+
+export type SessionsGetInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }
+
+export type SessionsGetOutput = {
+  readonly data: {
+    readonly id: string
+    readonly parentID?: string
+    readonly projectID: string
+    readonly agent?: string | null
+    readonly model?: { readonly id: string; readonly providerID: string; readonly variant?: string | null } | null
+    readonly cost: number
+    readonly tokens: {
+      readonly input: number
+      readonly output: number
+      readonly reasoning: number
+      readonly cache: { readonly read: number; readonly write: number }
+    }
+    readonly time: { readonly created: number; readonly updated: number; readonly archived?: number | null }
+    readonly title: string
+    readonly location: { readonly directory: string; readonly workspaceID?: string | null }
+    readonly subpath?: string | null
+  }
+}["data"]
+
+export type SessionsSwitchAgentInput = {
+  readonly sessionID: { readonly sessionID: string }["sessionID"]
+  readonly agent: { readonly agent: string }["agent"]
+}
+
+export type SessionsSwitchAgentOutput = void
+
+export type SessionsSwitchModelInput = {
+  readonly sessionID: { readonly sessionID: string }["sessionID"]
+  readonly model: {
+    readonly model: { readonly id: string; readonly providerID: string; readonly variant?: string | undefined }
+  }["model"]
+}
+
+export type SessionsSwitchModelOutput = void
+
+export type SessionsPromptInput = {
+  readonly sessionID: { readonly sessionID: string }["sessionID"]
+  readonly id?: {
+    readonly id?: string | undefined
+    readonly prompt: {
+      readonly text: string
+      readonly files?:
+        | ReadonlyArray<{
+            readonly uri: string
+            readonly mime: string
+            readonly name?: string | undefined
+            readonly description?: string | undefined
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+      readonly agents?:
+        | ReadonlyArray<{
+            readonly name: string
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+    }
+    readonly delivery?: "steer" | "queue" | undefined
+    readonly resume?: boolean | undefined
+  }["id"]
+  readonly prompt: {
+    readonly id?: string | undefined
+    readonly prompt: {
+      readonly text: string
+      readonly files?:
+        | ReadonlyArray<{
+            readonly uri: string
+            readonly mime: string
+            readonly name?: string | undefined
+            readonly description?: string | undefined
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+      readonly agents?:
+        | ReadonlyArray<{
+            readonly name: string
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+    }
+    readonly delivery?: "steer" | "queue" | undefined
+    readonly resume?: boolean | undefined
+  }["prompt"]
+  readonly delivery?: {
+    readonly id?: string | undefined
+    readonly prompt: {
+      readonly text: string
+      readonly files?:
+        | ReadonlyArray<{
+            readonly uri: string
+            readonly mime: string
+            readonly name?: string | undefined
+            readonly description?: string | undefined
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+      readonly agents?:
+        | ReadonlyArray<{
+            readonly name: string
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+    }
+    readonly delivery?: "steer" | "queue" | undefined
+    readonly resume?: boolean | undefined
+  }["delivery"]
+  readonly resume?: {
+    readonly id?: string | undefined
+    readonly prompt: {
+      readonly text: string
+      readonly files?:
+        | ReadonlyArray<{
+            readonly uri: string
+            readonly mime: string
+            readonly name?: string | undefined
+            readonly description?: string | undefined
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+      readonly agents?:
+        | ReadonlyArray<{
+            readonly name: string
+            readonly source?: { readonly start: number; readonly end: number; readonly text: string } | undefined
+          }>
+        | undefined
+    }
+    readonly delivery?: "steer" | "queue" | undefined
+    readonly resume?: boolean | undefined
+  }["resume"]
+}
+
+export type SessionsPromptOutput = {
+  readonly data: {
+    readonly admittedSeq: number
+    readonly id: string
+    readonly sessionID: string
+    readonly prompt: {
+      readonly text: string
+      readonly files?: ReadonlyArray<{
+        readonly uri: string
+        readonly mime: string
+        readonly name?: string | null
+        readonly description?: string | null
+        readonly source?: { readonly start: number; readonly end: number; readonly text: string } | null
+      }> | null
+      readonly agents?: ReadonlyArray<{
+        readonly name: string
+        readonly source?: { readonly start: number; readonly end: number; readonly text: string } | null
+      }> | null
+    }
+    readonly delivery: "steer" | "queue"
+    readonly timeCreated: number
+    readonly promotedSeq?: number | null
+  }
+}["data"]
+
+export type SessionsCompactInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }
+
+export type SessionsCompactOutput = void
+
+export type SessionsWaitInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }
+
+export type SessionsWaitOutput = void
+
+export type SessionsContextInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }
+
+export type SessionsContextOutput = {
+  readonly data: ReadonlyArray<
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+        readonly type: "agent-switched"
+        readonly agent: string
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+        readonly type: "model-switched"
+        readonly model: { readonly id: string; readonly providerID: string; readonly variant?: string | null }
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+        readonly text: string
+        readonly files?: ReadonlyArray<{
+          readonly uri: string
+          readonly mime: string
+          readonly name?: string | null
+          readonly description?: string | null
+          readonly source?: { readonly start: number; readonly end: number; readonly text: string } | null
+        }> | null
+        readonly agents?: ReadonlyArray<{
+          readonly name: string
+          readonly source?: { readonly start: number; readonly end: number; readonly text: string } | null
+        }> | null
+        readonly type: "user"
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+        readonly sessionID: string
+        readonly text: string
+        readonly type: "synthetic"
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+        readonly type: "system"
+        readonly text: string
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number; readonly completed?: number | null }
+        readonly type: "shell"
+        readonly callID: string
+        readonly command: string
+        readonly output: string
+      }
+    | {
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number; readonly completed?: number | null }
+        readonly type: "assistant"
+        readonly agent: string
+        readonly model: { readonly id: string; readonly providerID: string; readonly variant?: string | null }
+        readonly content: ReadonlyArray<
+          | { readonly type: "text"; readonly id: string; readonly text: string }
+          | {
+              readonly type: "reasoning"
+              readonly id: string
+              readonly text: string
+              readonly providerMetadata?: { readonly [x: string]: { readonly [x: string]: JsonValue } } | null
+            }
+          | {
+              readonly type: "tool"
+              readonly id: string
+              readonly name: string
+              readonly provider?: {
+                readonly executed: boolean
+                readonly metadata?: { readonly [x: string]: { readonly [x: string]: JsonValue } } | null
+                readonly resultMetadata?: { readonly [x: string]: { readonly [x: string]: JsonValue } } | null
+              } | null
+              readonly state:
+                | { readonly status: "pending"; readonly input: string }
+                | {
+                    readonly status: "running"
+                    readonly input: { readonly [x: string]: JsonValue }
+                    readonly structured: { readonly [x: string]: any }
+                    readonly content: ReadonlyArray<
+                      | { readonly type: "text"; readonly text: string }
+                      | {
+                          readonly type: "file"
+                          readonly uri: string
+                          readonly mime: string
+                          readonly name?: string | null
+                        }
+                    >
+                  }
+                | {
+                    readonly status: "completed"
+                    readonly input: { readonly [x: string]: JsonValue }
+                    readonly attachments?: ReadonlyArray<{
+                      readonly uri: string
+                      readonly mime: string
+                      readonly name?: string | null
+                      readonly description?: string | null
+                      readonly source?: { readonly start: number; readonly end: number; readonly text: string } | null
+                    }> | null
+                    readonly content: ReadonlyArray<
+                      | { readonly type: "text"; readonly text: string }
+                      | {
+                          readonly type: "file"
+                          readonly uri: string
+                          readonly mime: string
+                          readonly name?: string | null
+                        }
+                    >
+                    readonly outputPaths?: ReadonlyArray<string> | null
+                    readonly structured: { readonly [x: string]: any }
+                    readonly result?: JsonValue | null
+                  }
+                | {
+                    readonly status: "error"
+                    readonly input: { readonly [x: string]: JsonValue }
+                    readonly content: ReadonlyArray<
+                      | { readonly type: "text"; readonly text: string }
+                      | {
+                          readonly type: "file"
+                          readonly uri: string
+                          readonly mime: string
+                          readonly name?: string | null
+                        }
+                    >
+                    readonly structured: { readonly [x: string]: any }
+                    readonly error: { readonly type: "unknown"; readonly message: string }
+                    readonly result?: JsonValue | null
+                  }
+              readonly time: {
+                readonly created: number
+                readonly ran?: number | null
+                readonly completed?: number | null
+                readonly pruned?: number | null
+              }
+            }
+        >
+        readonly snapshot?: { readonly start?: string | null; readonly end?: string | null } | null
+        readonly finish?: string | null
+        readonly cost?: number | null
+        readonly tokens?: {
+          readonly input: number
+          readonly output: number
+          readonly reasoning: number
+          readonly cache: { readonly read: number; readonly write: number }
+        } | null
+        readonly error?: { readonly type: "unknown"; readonly message: string } | null
+      }
+    | {
+        readonly type: "compaction"
+        readonly reason: "auto" | "manual"
+        readonly summary: string
+        readonly recent: string
+        readonly id: string
+        readonly metadata?: { readonly [x: string]: JsonValue } | null
+        readonly time: { readonly created: number }
+      }
+  >
+}["data"]

packages/client/src/index.ts

@@ -0,0 +1 @@
+export * from "./generated/index"

packages/client/test/contract-identity.test.ts

@@ -0,0 +1,50 @@
+import { expect, test } from "bun:test"
+import { Schema } from "effect"
+import { AgentV2 } from "@opencode-ai/core/agent"
+import { Location as CoreLocation } from "@opencode-ai/core/location"
+import { ModelV2 } from "@opencode-ai/core/model"
+import { SessionV2 } from "@opencode-ai/core/session"
+import { SessionInput as CoreSessionInput } from "@opencode-ai/core/session/input"
+import { SessionMessage as CoreSessionMessage } from "@opencode-ai/core/session/message"
+import { Prompt as CorePrompt } from "@opencode-ai/core/session/prompt"
+import { Agent } from "@opencode-ai/schema/agent"
+import { Location } from "@opencode-ai/schema/location"
+import { Model } from "@opencode-ai/schema/model"
+import { Project } from "@opencode-ai/schema/project"
+import { Provider } from "@opencode-ai/schema/provider"
+import { Prompt } from "@opencode-ai/schema/prompt"
+import { Session } from "@opencode-ai/schema/session"
+import { SessionInput } from "@opencode-ai/schema/session-input"
+import { SessionMessage } from "@opencode-ai/schema/session-message"
+import { Workspace } from "@opencode-ai/schema/workspace"
+import { SessionGroup } from "@opencode-ai/protocol/session"
+import { SessionGroup as ServerSessionGroup } from "@opencode-ai/server/groups/session"
+
+test("Core and Server reuse the authoritative Schema and Protocol values", () => {
+  expect(AgentV2.ID).toBe(Agent.ID)
+  expect(CoreLocation.Ref).toBe(Location.Ref)
+  expect(ModelV2.Ref).toBe(Model.Ref)
+  expect(SessionV2.Info).toBe(Session.Info)
+  expect(CoreSessionInput.Admitted).toBe(SessionInput.Admitted)
+  expect(CoreSessionMessage.Message).toBe(SessionMessage.Message)
+  expect(CorePrompt).toBe(Prompt)
+  expect(ServerSessionGroup).toBe(SessionGroup)
+  expect(Session.ID.create()).toStartWith("ses_")
+  expect(Session.ID.fromExternal({ namespace: "opencord.agent-thread", key: "thread-1" })).toMatch(/^ses_[a-f0-9]{64}$/)
+  expect(Project.ID.global).toBe("global")
+  expect(Provider.ID.anthropic).toBe("anthropic")
+  expect(Workspace.ID.create()).toStartWith("wrk_")
+})
+
+test("shared DTO schemas construct and decode plain objects", () => {
+  const made = Prompt.make({ text: "hello" })
+  const decoded = Schema.decodeUnknownSync(Prompt)({ text: "hello" })
+  const content = Schema.decodeUnknownSync(SessionMessage.AssistantText)({ type: "text", id: "part_1", text: "hi" })
+
+  expect(Object.getPrototypeOf(made)).toBe(Object.prototype)
+  expect(Object.getPrototypeOf(decoded)).toBe(Object.prototype)
+  expect(Object.getPrototypeOf(content)).toBe(Object.prototype)
+  expect(Prompt.ast.annotations?.identifier).toBe("Prompt")
+  expect(SessionMessage.AssistantText.ast.annotations?.identifier).toBe("Session.Message.Assistant.Text")
+  expect(CoreSessionMessage.AssistantText).toBe(SessionMessage.AssistantText)
+})

packages/client/test/effect.test.ts

@@ -0,0 +1,98 @@
+import { expect, test } from "bun:test"
+import { DateTime, Effect } from "effect"
+import { HttpClient, HttpClientResponse } from "effect/unstable/http"
+import { AbsolutePath, Agent, Location, Model, OpenCode, Prompt, Session } from "../src/effect"
+
+test("sessions.get returns the decoded Effect projection", async () => {
+  const httpClient = HttpClient.make((request) =>
+    Effect.succeed(HttpClientResponse.fromWeb(request, Response.json(session))),
+  )
+  const result = await Effect.gen(function* () {
+    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
+    return yield* client.sessions.get({ sessionID: Session.ID.make("ses_test") })
+  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)
+
+  expect(DateTime.toEpochMillis(result.time.created)).toBe(1_717_171_717_000)
+})
+
+test("session methods retain decoded Effect inputs and outputs", async () => {
+  const httpClient = HttpClient.make((request) => {
+    const url = request.url
+    if (url.includes("/prompt")) {
+      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json(admission)))
+    }
+    if (url.includes("/context")) {
+      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json({ data: [] })))
+    }
+    if (request.method === "POST" && url.endsWith("/api/session")) {
+      return Effect.succeed(HttpClientResponse.fromWeb(request, Response.json(session)))
+    }
+    if (request.method === "POST") {
+      return Effect.succeed(HttpClientResponse.fromWeb(request, new Response(null, { status: 204 })))
+    }
+    return Effect.succeed(
+      HttpClientResponse.fromWeb(request, Response.json({ data: [session.data], cursor: { next: "next" } })),
+    )
+  })
+  const result = await Effect.gen(function* () {
+    const client = yield* OpenCode.make({ baseUrl: "http://localhost:3000" })
+    const page = yield* client.sessions.list({ limit: 10 })
+    const created = yield* client.sessions.create({
+      location: Location.Ref.make({ directory: AbsolutePath.make("/tmp/project") }),
+    })
+    yield* client.sessions.switchAgent({ sessionID: Session.ID.make("ses_test"), agent: Agent.ID.make("build") })
+    yield* client.sessions.switchModel({
+      sessionID: Session.ID.make("ses_test"),
+      model: Model.Ref.make({ id: "claude", providerID: "anthropic" }),
+    })
+    const admitted = yield* client.sessions.prompt({
+      sessionID: Session.ID.make("ses_test"),
+      prompt: Prompt.make({ text: "Hello" }),
+      resume: false,
+    })
+    yield* client.sessions.compact({ sessionID: Session.ID.make("ses_test") })
+    yield* client.sessions.wait({ sessionID: Session.ID.make("ses_test") })
+    const context = yield* client.sessions.context({ sessionID: Session.ID.make("ses_test") })
+    return { page, created, admitted, context }
+  }).pipe(Effect.provideService(HttpClient.HttpClient, httpClient), Effect.runPromise)
+
+  expect(DateTime.toEpochMillis(result.page.data[0].time.created)).toBe(1_717_171_717_000)
+  expect(Object.getPrototypeOf(result.page.data[0])).toBe(Object.prototype)
+  expect(Object.getPrototypeOf(result.created)).toBe(Object.prototype)
+  expect(result.created.id).toBe("ses_test")
+  expect(Object.getPrototypeOf(result.admitted)).toBe(Object.prototype)
+  expect(Object.getPrototypeOf(result.admitted.prompt)).toBe(Object.prototype)
+  expect(DateTime.toEpochMillis(result.admitted.timeCreated)).toBe(1_717_171_717_000)
+  expect(result.context).toEqual([])
+})
+
+const session = {
+  data: {
+    id: "ses_test",
+    projectID: "project",
+    cost: 0,
+    tokens: {
+      input: 1,
+      output: 2,
+      reasoning: 3,
+      cache: { read: 4, write: 5 },
+    },
+    time: {
+      created: 1_717_171_717_000,
+      updated: 1_717_171_717_000,
+    },
+    title: "Test",
+    location: { directory: "/tmp/project" },
+  },
+}
+
+const admission = {
+  data: {
+    admittedSeq: 0,
+    id: "msg_test",
+    sessionID: "ses_test",
+    prompt: { text: "Hello" },
+    delivery: "steer",
+    timeCreated: 1_717_171_717_000,
+  },
+}

packages/client/test/import-boundaries.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, test } from "bun:test"
+import { realpathSync } from "node:fs"
+import { mkdtemp, rm } from "node:fs/promises"
+import { join, resolve, sep } from "node:path"
+
+const directory = resolve(import.meta.dir, "..")
+const effect = realpathSync(resolve(import.meta.dir, "../node_modules/effect"))
+const schema = resolve(import.meta.dir, "../../schema")
+const protocol = resolve(import.meta.dir, "../../protocol")
+const core = resolve(import.meta.dir, "../../core")
+const server = resolve(import.meta.dir, "../../server")
+
+describe("public import boundaries", () => {
+  test("isolates each public entrypoint", async () => {
+    const root = await bundleInputs("@opencode-ai/client", "browser")
+
+    expect(within(root, effect)).toEqual([])
+    expect(within(root, schema)).toEqual([])
+    expect(within(root, protocol)).toEqual([])
+    expect(within(root, core)).toEqual([])
+    expect(within(root, server)).toEqual([])
+
+    const network = await bundleInputs("@opencode-ai/client/effect", "browser")
+
+    expect(within(network, effect).length).toBeGreaterThan(0)
+    expect(within(network, schema).length).toBeGreaterThan(0)
+    expect(within(network, protocol).length).toBeGreaterThan(0)
+    expect(within(network, core)).toEqual([])
+    expect(within(network, server)).toEqual([])
+  })
+})
+
+async function bundleInputs(specifier: string, target: "browser" | "bun") {
+  const temporary = await mkdtemp(join(import.meta.dir, ".import-boundary-"))
+  const entrypoint = join(temporary, "index.ts")
+  const metafile = join(temporary, "meta.json")
+  try {
+    await Bun.write(entrypoint, `export * from ${JSON.stringify(specifier)}`)
+    const child = Bun.spawn(
+      [
+        process.execPath,
+        "build",
+        entrypoint,
+        `--target=${target}`,
+        "--format=esm",
+        "--packages=bundle",
+        `--metafile=${metafile}`,
+        `--outdir=${join(temporary, "out")}`,
+      ],
+      { cwd: directory, stdout: "pipe", stderr: "pipe" },
+    )
+    const [exitCode, stdout, stderr] = await Promise.all([
+      child.exited,
+      new Response(child.stdout).text(),
+      new Response(child.stderr).text(),
+    ])
+    if (exitCode !== 0) throw new Error(stdout + stderr)
+    const metadata = await Bun.file(metafile).json()
+    return Object.keys(metadata.inputs).map((input) => resolve(directory, input))
+  } finally {
+    await rm(temporary, { recursive: true, force: true })
+  }
+}
+
+function within(inputs: ReadonlyArray<string>, directory: string) {
+  const prefix = directory.endsWith(sep) ? directory : directory + sep
+  return inputs.filter((input) => input === directory || input.startsWith(prefix))
+}

packages/client/test/promise.test.ts

@@ -0,0 +1,117 @@
+import { expect, test } from "bun:test"
+import { isUnauthorizedError, OpenCode } from "../src"
+
+test("sessions.get returns the wire projection", async () => {
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async (input) => {
+      expect(typeof input === "string" ? input : input instanceof URL ? input.href : input.url).toBe(
+        "http://localhost:3000/api/session/ses_test",
+      )
+      return Response.json(session)
+    },
+  })
+
+  const result = await client.sessions.get({ sessionID: "ses_test" })
+
+  expect(result.time.created).toBe(1_717_171_717_000)
+})
+
+test("session methods use the public HTTP contract", async () => {
+  const requests: Array<{ url: string; init?: RequestInit }> = []
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async (input, init) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url
+      requests.push({ url, init })
+      if (url.includes("/prompt")) return Response.json(admission)
+      if (url.includes("/context")) return Response.json({ data: [] })
+      if (init?.method === "POST" && url.endsWith("/api/session")) return Response.json(session)
+      if (init?.method === "POST") return new Response(null, { status: 204 })
+      return Response.json({ data: [session.data], cursor: { next: "next" } })
+    },
+  })
+
+  const page = await client.sessions.list({ limit: "10", order: "desc" })
+  const created = await client.sessions.create({ location: { directory: "/tmp/project" } })
+  await client.sessions.switchAgent({ sessionID: "ses_test", agent: "build" })
+  await client.sessions.switchModel({
+    sessionID: "ses_test",
+    model: { id: "claude", providerID: "anthropic" },
+  })
+  const admitted = await client.sessions.prompt({
+    sessionID: "ses_test",
+    prompt: { text: "Hello" },
+    resume: false,
+  })
+  await client.sessions.compact({ sessionID: "ses_test" })
+  await client.sessions.wait({ sessionID: "ses_test" })
+  const context = await client.sessions.context({ sessionID: "ses_test" })
+
+  expect(page.cursor.next).toBe("next")
+  expect(created.id).toBe("ses_test")
+  expect(admitted.id).toBe("msg_test")
+  expect(context).toEqual([])
+  expect(requests.map((request) => [request.init?.method, request.url])).toEqual([
+    ["GET", "http://localhost:3000/api/session?limit=10&order=desc"],
+    ["POST", "http://localhost:3000/api/session"],
+    ["POST", "http://localhost:3000/api/session/ses_test/agent"],
+    ["POST", "http://localhost:3000/api/session/ses_test/model"],
+    ["POST", "http://localhost:3000/api/session/ses_test/prompt"],
+    ["POST", "http://localhost:3000/api/session/ses_test/compact"],
+    ["POST", "http://localhost:3000/api/session/ses_test/wait"],
+    ["GET", "http://localhost:3000/api/session/ses_test/context"],
+  ])
+  const body = requests[4]?.init?.body
+  if (typeof body !== "string") throw new Error("Expected JSON request body")
+  expect(JSON.parse(body)).toEqual({
+    prompt: { text: "Hello" },
+    resume: false,
+  })
+})
+
+test("middleware errors remain declared client errors", async () => {
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async () =>
+      Response.json({ _tag: "UnauthorizedError", message: "Authentication required" }, { status: 401 }),
+  })
+
+  try {
+    await client.sessions.create({})
+    throw new Error("Expected request to fail")
+  } catch (error) {
+    expect(isUnauthorizedError(error)).toBe(true)
+  }
+})
+
+const session = {
+  data: {
+    id: "ses_test",
+    projectID: "project",
+    cost: 0,
+    tokens: {
+      input: 1,
+      output: 2,
+      reasoning: 3,
+      cache: { read: 4, write: 5 },
+    },
+    time: {
+      created: 1_717_171_717_000,
+      updated: 1_717_171_717_000,
+    },
+    title: "Test",
+    location: { directory: "/tmp/project" },
+  },
+}
+
+const admission = {
+  data: {
+    admittedSeq: 0,
+    id: "msg_test",
+    sessionID: "ses_test",
+    prompt: { text: "Hello" },
+    delivery: "steer",
+    timeCreated: 1_717_171_717_000,
+  },
+}