feat(browser): add experimental desktop browser

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

.changeset/rename-undo.md

@@ -0,0 +1,5 @@
+---
+"@opencode-ai/core": patch
+---
+
+Include both paths of renamed files in new snapshot change lists so undo restores the original file instead of only deleting the renamed file.

.changeset/shell-scanner-compatibility.md

@@ -0,0 +1,10 @@
+---
+"@opencode-ai/core": patch
+---
+
+Make the experimental portable shell scanner authoritative, with no Tree-sitter
+fallback. Scan common Bash and PowerShell control flow, heredocs, functions,
+expressions, quoting, and substitutions natively. Preserve existing redirect and
+declaration permission matching, and make PowerShell saved approvals cover the
+original command spelling. Parser failures remain visible without changing the
+permission engine. The default Tree-sitter path is unchanged.

.github/workflows/test.yml

@@ -237,9 +237,9 @@ jobs:
         working-directory: packages/app
         run: bunx playwright install chromium
 
-      - name: Run app e2e tests
+      - name: Run app e2e tests against production build
         if: env.E2E_ENABLED == 'true'
-        run: bun --cwd packages/app test:e2e:local
+        run: bun --cwd packages/app test:e2e:built
         env:
           CI: true
         timeout-minutes: 30

bun.lock

@@ -125,7 +125,7 @@
         "@effect/platform-node": "catalog:",
         "@opencode-ai/client": "workspace:*",
         "@opencode-ai/plugin": "workspace:*",
-        "@opencode-ai/pty": "0.1.10",
+        "@opencode-ai/pty": "0.1.12",
         "@opencode-ai/schema": "workspace:*",
         "@opencode-ai/server": "workspace:*",
         "@opencode-ai/tui": "workspace:*",
@@ -182,12 +182,14 @@
       "dependencies": {
         "@opencode-ai/protocol": "workspace:*",
         "@opencode-ai/schema": "workspace:*",
+        "ws": "8.21.0",
       },
       "devDependencies": {
         "@effect/platform-node": "catalog:",
         "@opencode-ai/httpapi-codegen": "workspace:*",
         "@tsconfig/bun": "catalog:",
         "@types/bun": "catalog:",
+        "@types/ws": "8.18.1",
         "@typescript/native-preview": "catalog:",
         "effect": "catalog:",
         "solid-js": "catalog:",
@@ -364,7 +366,7 @@
         "@opencode-ai/ai": "workspace:*",
         "@opencode-ai/codemode": "workspace:*",
         "@opencode-ai/plugin": "workspace:*",
-        "@opencode-ai/pty": "0.1.10",
+        "@opencode-ai/pty": "0.1.12",
         "@opencode-ai/schema": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@parcel/watcher": "2.5.1",
@@ -553,6 +555,20 @@
         "@typescript/native-preview": "catalog:",
       },
     },
+    "packages/latex": {
+      "name": "@opencode-ai/latex",
+      "version": "0.0.0",
+      "dependencies": {
+        "@opencode-ai/plugin": "workspace:*",
+        "@opentui/core": "catalog:",
+        "string-width": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+      },
+    },
     "packages/merman": {
       "name": "@opencode-ai/merman",
       "version": "0.0.0",
@@ -731,6 +747,7 @@
       },
       "devDependencies": {
         "@happy-dom/global-registrator": "20.0.11",
+        "@playwright/test": "catalog:",
         "@tsconfig/node22": "catalog:",
         "@types/bun": "catalog:",
         "@types/luxon": "catalog:",
@@ -836,6 +853,7 @@
         "@opencode-ai/client": "workspace:*",
         "@opencode-ai/session-ui": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
+        "@playwright/test": "catalog:",
         "@solidjs/meta": "catalog:",
         "@storybook/addon-a11y": "10.4.4",
         "@storybook/addon-docs": "10.4.4",
@@ -877,6 +895,7 @@
       "dependencies": {
         "@opencode-ai/client": "workspace:*",
         "@opencode-ai/core": "workspace:*",
+        "@opencode-ai/latex": "workspace:*",
         "@opencode-ai/merman": "workspace:*",
         "@opencode-ai/plugin": "workspace:*",
         "@opencode-ai/schema": "workspace:*",
@@ -2148,6 +2167,8 @@
 
     "@opencode-ai/httpapi-codegen": ["@opencode-ai/httpapi-codegen@workspace:packages/httpapi-codegen"],
 
+    "@opencode-ai/latex": ["@opencode-ai/latex@workspace:packages/latex"],
+
     "@opencode-ai/merman": ["@opencode-ai/merman@workspace:packages/merman"],
 
     "@opencode-ai/plugin": ["@opencode-ai/plugin@workspace:packages/plugin"],
@@ -2156,19 +2177,19 @@
 
     "@opencode-ai/protocol": ["@opencode-ai/protocol@workspace:packages/protocol"],
 
-    "@opencode-ai/pty": ["@opencode-ai/pty@0.1.10", "", { "optionalDependencies": { "@opencode-ai/pty-darwin-arm64": "0.1.10", "@opencode-ai/pty-darwin-x64": "0.1.10", "@opencode-ai/pty-linux-arm64-gnu": "0.1.10", "@opencode-ai/pty-linux-arm64-musl": "0.1.10", "@opencode-ai/pty-linux-x64-gnu": "0.1.10", "@opencode-ai/pty-linux-x64-musl": "0.1.10" }, "bin": { "opencode-pty": "bin/opencode-pty.js" } }, "sha512-cEJT1ADtmnb+df2wrlUcsGny6Q7pTe9Sa7keISzCO0xN1FrL1aS6+eleBPpDimHjgM/sXqvLwJv0UiAeiAvgxQ=="],
+    "@opencode-ai/pty": ["@opencode-ai/pty@0.1.12", "", { "optionalDependencies": { "@opencode-ai/pty-darwin-arm64": "0.1.12", "@opencode-ai/pty-darwin-x64": "0.1.12", "@opencode-ai/pty-linux-arm64-gnu": "0.1.12", "@opencode-ai/pty-linux-arm64-musl": "0.1.12", "@opencode-ai/pty-linux-x64-gnu": "0.1.12", "@opencode-ai/pty-linux-x64-musl": "0.1.12" }, "bin": { "opencode-pty": "bin/opencode-pty.js" } }, "sha512-dl4FyJUhTXThsWYY8txG/8/nwN7dE0M5Sic9r4L9f2pvtJnbR5zrCrPoiPIBIxZle1wVks1dhz4z/CfqLf5sCg=="],
 
-    "@opencode-ai/pty-darwin-arm64": ["@opencode-ai/pty-darwin-arm64@0.1.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-j7aszDFRwCIazGUT9eIy4PZwh4rltjvRmoicPRTK3kONN3v0MMflstkmAFDYYpqDPTNh3qJ6xkQmB+DugEbhAg=="],
+    "@opencode-ai/pty-darwin-arm64": ["@opencode-ai/pty-darwin-arm64@0.1.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tMvoriq3VegVlj1uEglc6qE0M7VXy61nyf9Si7tTO7xa8JiyxuFJSXOZ1pGeErDu+pe24hvTyVOR+gkdew8w9g=="],
 
-    "@opencode-ai/pty-darwin-x64": ["@opencode-ai/pty-darwin-x64@0.1.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-UAMP/E4lo9RGQF7xrfIwpW2ZEemj308rCogJy14ruKYJt5MwHeGNTynGiHE/1JlDLRy+21wV50jpugADgT71ag=="],
+    "@opencode-ai/pty-darwin-x64": ["@opencode-ai/pty-darwin-x64@0.1.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-Sn5vMLL5giHOhx7J5H6zwDp4YjjXorY+QV0IEYY+SCT4wQfRBliokIyj23pRl6P2RK3u9bDLXJHDNMfDVZ2Rxg=="],
 
-    "@opencode-ai/pty-linux-arm64-gnu": ["@opencode-ai/pty-linux-arm64-gnu@0.1.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-lTPlZNQ66koFHZqoPmvvq0SetlepKVQYgnLryhlVfYtcryWDJM7gV4+P66V12RwqWQTjt2u8j12mtg3axSKg2w=="],
+    "@opencode-ai/pty-linux-arm64-gnu": ["@opencode-ai/pty-linux-arm64-gnu@0.1.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-HbnlKZy052l7G527wK0+05EXaUpZ4ykVAmNBEzqWCoi4TeQj2+Nr9kJ9trx9o1KrVcT4Ki58CCvN5QOls6Z0yQ=="],
 
-    "@opencode-ai/pty-linux-arm64-musl": ["@opencode-ai/pty-linux-arm64-musl@0.1.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-IDmWHRylMR/ZfMw9/AAktO/Edi4TITPC+Tq7Xx3JZHsDgSba3QdyE11uNL0zM1myTGdk6Yrt4rpdAzaItPnDjw=="],
+    "@opencode-ai/pty-linux-arm64-musl": ["@opencode-ai/pty-linux-arm64-musl@0.1.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-2nTN7ggu1h9XgjNcoQMYjP5sirfYnAskpdFCOqjokLqhytX/IMMmkRTQs+foaEaPz0dAIQD3DQplR2jZIgxp1w=="],
 
-    "@opencode-ai/pty-linux-x64-gnu": ["@opencode-ai/pty-linux-x64-gnu@0.1.10", "", { "os": "linux", "cpu": "x64" }, "sha512-Q1yob0/8X2JoJZzFmNKUc32XDRAe0avKQ8PLKkpJr30qWXSrGmhltgcDmn94Q70zW9Ght9on84T7cmge9brvdQ=="],
+    "@opencode-ai/pty-linux-x64-gnu": ["@opencode-ai/pty-linux-x64-gnu@0.1.12", "", { "os": "linux", "cpu": "x64" }, "sha512-FnD5ndnObTQKAoaVvxLKi5W+r3/+dsaMsobz6uK0B9hlmffXxY5CQ6HQyUU/h3aIKLWXxho5XYkA2b9yrp8/gA=="],
 
-    "@opencode-ai/pty-linux-x64-musl": ["@opencode-ai/pty-linux-x64-musl@0.1.10", "", { "os": "linux", "cpu": "x64" }, "sha512-7RLHWQxX/wfUKJJP2ZMMtkXaPsrgoMNKzE6PL/LbnYbMBtkqfld9EDcMv1RFZ0CqjNFgI0Hg4eRk6x+ZNc/wyQ=="],
+    "@opencode-ai/pty-linux-x64-musl": ["@opencode-ai/pty-linux-x64-musl@0.1.12", "", { "os": "linux", "cpu": "x64" }, "sha512-prkrNu6uvjqoffxdGiDHSU5C0Y+kCSfv+lslu7dfRPgPKenVELNpRTAbOduyrWPac2vGt8j5NM61icJyodbJmA=="],
 
     "@opencode-ai/schema": ["@opencode-ai/schema@workspace:packages/schema"],
 

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-QWLIdvu985FH5I9cZJOAuoeFeXU+4Jx9RzBB9RPoeeQ=",
-    "aarch64-linux": "sha256-SSzGD5hMj2vFvyw+dUPR9g/ZH6qhs0ZyZ/DnltZt3N8=",
-    "aarch64-darwin": "sha256-CeFUxiV+e8pKho+YcSclC3soQBogoxNMxwyIMztAExU=",
-    "x86_64-darwin": "sha256-FYwcACzU72y0+KtOpFfU7ndak8vMasqMgd5NLS6+XtY="
+    "x86_64-linux": "sha256-iYdVrLtyKmjlyypisF9SqzgyriWT90kSCh3crxw9AKU=",
+    "aarch64-linux": "sha256-BV2t4w5ujArbtSC/Qfm3gLzevQW9A6hMgOyPVp94g/o=",
+    "aarch64-darwin": "sha256-EwMq7zaxzzcsmH0Pjqu4ftGdcM8Lna8mvHgKzRcVI8g=",
+    "x86_64-darwin": "sha256-PokzxlkQy6JvHADF2ZMIIDI1u9ZjSNNedpmR9gvHS5c="
   }
 }

packages/ai/src/protocols/anthropic-messages.ts

@@ -406,6 +406,7 @@ const AnthropicEvent = Schema.Struct({
 type AnthropicEvent = Schema.Schema.Type<typeof AnthropicEvent>
 
 interface ParserState {
+  readonly providerMetadataKey: string
   readonly tools: ToolStream.State<number>
   readonly reasoningSignatures: Readonly<Record<number, string>>
   readonly usage?: Usage
@@ -440,18 +441,18 @@ const cacheControl = (breakpoints: Cache.Breakpoints, cache: CacheHint | undefin
   return Cache.ttlBucket(cache.ttlSeconds) === "1h" ? EPHEMERAL_1H : EPHEMERAL_5M
 }
 
-const anthropicMetadata = (metadata: Record<string, unknown>): ProviderMetadata => ({ anthropic: metadata })
+const providerMetadata = (key: string, metadata: Record<string, unknown>): ProviderMetadata => ({ [key]: metadata })
 
-const signatureFromMetadata = (metadata: ProviderMetadata | undefined): string | undefined => {
-  const anthropic = metadata?.anthropic
-  if (!ProviderShared.isRecord(anthropic)) return undefined
-  return typeof anthropic.signature === "string" ? anthropic.signature : undefined
+const signatureFromMetadata = (metadata: ProviderMetadata | undefined, key: string): string | undefined => {
+  const provider = metadata?.[key]
+  if (!ProviderShared.isRecord(provider)) return undefined
+  return typeof provider.signature === "string" ? provider.signature : undefined
 }
 
-const redactedDataFromMetadata = (metadata: ProviderMetadata | undefined): string | undefined => {
-  const anthropic = metadata?.anthropic
-  if (!ProviderShared.isRecord(anthropic)) return undefined
-  return typeof anthropic.redactedData === "string" ? anthropic.redactedData : undefined
+const redactedDataFromMetadata = (metadata: ProviderMetadata | undefined, key: string): string | undefined => {
+  const provider = metadata?.[key]
+  if (!ProviderShared.isRecord(provider)) return undefined
+  return typeof provider.redactedData === "string" ? provider.redactedData : undefined
 }
 
 const lowerTool = (breakpoints: Cache.Breakpoints, tool: ToolDefinition, inputSchema: JsonSchema): AnthropicTool => ({
@@ -511,13 +512,16 @@ const serverToolResultType = (name: string): AnthropicServerToolResultType | und
   return undefined
 }
 
-const lowerServerToolResult = Effect.fn("AnthropicMessages.lowerServerToolResult")(function* (part: ToolResultPart) {
+const lowerServerToolResult = Effect.fn("AnthropicMessages.lowerServerToolResult")(function* (
+  part: ToolResultPart,
+  providerMetadataKey: string,
+) {
   const wireType = serverToolResultType(part.name)
   if (!wireType)
     return yield* invalid(`Anthropic Messages does not know how to round-trip server tool result for ${part.name}`)
   // Prefer the provider-owned replay payload; fall back to the result value for
   // histories constructed directly from provider events.
-  const payload = part.providerMetadata?.anthropic?.["result"] ?? part.result.value
+  const payload = part.providerMetadata?.[providerMetadataKey]?.["result"] ?? part.result.value
   return {
     type: wireType,
     tool_use_id: scrubToolCallID(part.id),
@@ -804,6 +808,7 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
   breakpoints: Cache.Breakpoints,
 ) {
   const messages: AnthropicMessage[] = []
+  const providerMetadataKey = request.model.route.providerMetadataKey ?? String(request.model.provider)
 
   for (const [index, message] of request.messages.entries()) {
     if (message.role === "system") {
@@ -849,8 +854,8 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
         if (part.type === "reasoning") {
           // A signature marks visible thinking; only signature-less parts carrying
           // redactedData round-trip as opaque redacted_thinking blocks.
-          const signature = part.encrypted ?? signatureFromMetadata(part.providerMetadata)
-          const redactedData = redactedDataFromMetadata(part.providerMetadata)
+          const signature = part.encrypted ?? signatureFromMetadata(part.providerMetadata, providerMetadataKey)
+          const redactedData = redactedDataFromMetadata(part.providerMetadata, providerMetadataKey)
           if (signature === undefined && redactedData !== undefined) {
             content.push({ type: "redacted_thinking", data: redactedData })
             continue
@@ -879,7 +884,7 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
           continue
         }
         if (part.type === "tool-result" && part.providerExecuted) {
-          content.push(yield* lowerServerToolResult(part))
+          content.push(yield* lowerServerToolResult(part, providerMetadataKey))
           continue
         }
         return yield* invalid(
@@ -1069,7 +1074,7 @@ const mapFinishReason = (reason: string | null | undefined): FinishReason => {
 // inclusive `inputTokens` the rest of the contract expects. Extended
 // thinking tokens are included in `output_tokens`; newer responses also
 // expose that subset through `output_tokens_details.thinking_tokens`.
-const mapUsage = (usage: AnthropicUsage | undefined): Usage | undefined => {
+const mapUsage = (usage: AnthropicUsage | undefined, providerMetadataKey: string): Usage | undefined => {
   if (!usage) return undefined
   const nonCached = usage.input_tokens ?? undefined
   const cacheRead = usage.cache_read_input_tokens ?? undefined
@@ -1083,7 +1088,7 @@ const mapUsage = (usage: AnthropicUsage | undefined): Usage | undefined => {
     cacheWriteInputTokens: cacheWrite,
     reasoningTokens: usage.output_tokens_details?.thinking_tokens,
     totalTokens: ProviderShared.totalTokens(inputTokens, usage.output_tokens, undefined),
-    providerMetadata: { anthropic: usage },
+    providerMetadata: { [providerMetadataKey]: usage },
   })
 }
 
@@ -1092,7 +1097,7 @@ const mapUsage = (usage: AnthropicUsage | undefined): Usage | undefined => {
 // field prefers `right` when defined, falls back to `left`. `inputTokens` is
 // recomputed from the merged breakdown so the inclusive total stays
 // consistent with `nonCached + cacheRead + cacheWrite`.
-const mergeUsage = (left: Usage | undefined, right: Usage | undefined) => {
+const mergeUsage = (left: Usage | undefined, right: Usage | undefined, providerMetadataKey: string) => {
   if (!left) return right
   if (!right) return left
   const nonCachedInputTokens = right.nonCachedInputTokens ?? left.nonCachedInputTokens
@@ -1110,7 +1115,9 @@ const mergeUsage = (left: Usage | undefined, right: Usage | undefined) => {
     reasoningTokens,
     totalTokens: ProviderShared.totalTokens(inputTokens, outputTokens, undefined),
     providerMetadata: {
-      anthropic: mergeJsonRecords(left.providerMetadata?.["anthropic"], right.providerMetadata?.["anthropic"]) ?? {},
+      [providerMetadataKey]:
+        mergeJsonRecords(left.providerMetadata?.[providerMetadataKey], right.providerMetadata?.[providerMetadataKey]) ??
+        {},
     },
   })
 }
@@ -1128,7 +1135,7 @@ const SERVER_TOOL_RESULT_NAMES: Record<AnthropicServerToolResultType, string> =
 
 const isServerToolResultType = (type: string): type is AnthropicServerToolResultType => type in SERVER_TOOL_RESULT_NAMES
 
-const serverToolResultEvent = (block: AnthropicStreamBlock): LLMEvent | undefined => {
+const serverToolResultEvent = (block: AnthropicStreamBlock, providerMetadataKey: string): LLMEvent | undefined => {
   if (!block.type || !isServerToolResultType(block.type)) return undefined
   const errorPayload =
     typeof block.content === "object" && block.content !== null && "type" in block.content
@@ -1142,7 +1149,7 @@ const serverToolResultEvent = (block: AnthropicStreamBlock): LLMEvent | undefine
     providerExecuted: true,
     // The complete payload is irreducible provider replay state: subsequent
     // stateless requests must round-trip the typed result block verbatim.
-    providerMetadata: anthropicMetadata({ blockType: block.type, result: block.content }),
+    providerMetadata: providerMetadata(providerMetadataKey, { blockType: block.type, result: block.content }),
   })
 }
 
@@ -1151,8 +1158,8 @@ type StepResult = readonly [ParserState, ReadonlyArray<LLMEvent>]
 const NO_EVENTS: StepResult["1"] = []
 
 const onMessageStart = (state: ParserState, event: AnthropicEvent): StepResult => {
-  const usage = mapUsage(event.message?.usage)
-  return [usage ? { ...state, usage: mergeUsage(state.usage, usage) } : state, NO_EVENTS]
+  const usage = mapUsage(event.message?.usage, state.providerMetadataKey)
+  return [usage ? { ...state, usage: mergeUsage(state.usage, usage, state.providerMetadataKey) } : state, NO_EVENTS]
 }
 
 const onContentBlockStart = (
@@ -1204,14 +1211,16 @@ const onContentBlockStart = (
   if (block.type === "thinking" && block.thinking !== undefined) {
     const events: LLMEvent[] = []
     const id = `reasoning-${event.index ?? 0}`
-    const providerMetadata =
-      block.signature === undefined ? undefined : anthropicMetadata({ signature: block.signature })
-    const lifecycle = Lifecycle.reasoningStart(state.lifecycle, events, id, providerMetadata)
+    const metadata =
+      block.signature === undefined
+        ? undefined
+        : providerMetadata(state.providerMetadataKey, { signature: block.signature })
+    const lifecycle = Lifecycle.reasoningStart(state.lifecycle, events, id, metadata)
     return [
       {
         ...state,
         lifecycle: block.thinking
-          ? Lifecycle.reasoningDelta(lifecycle, events, id, block.thinking, providerMetadata)
+          ? Lifecycle.reasoningDelta(lifecycle, events, id, block.thinking, metadata)
           : lifecycle,
         reasoningSignatures:
           event.index === undefined || block.signature === undefined
@@ -1234,14 +1243,14 @@ const onContentBlockStart = (
           state.lifecycle,
           events,
           `reasoning-${event.index ?? 0}`,
-          anthropicMetadata({ redactedData: block.data }),
+          providerMetadata(state.providerMetadataKey, { redactedData: block.data }),
         ),
       },
       events,
     ]
   }
 
-  const result = serverToolResultEvent(block)
+  const result = serverToolResultEvent(block, state.providerMetadataKey)
   if (!result) return [state, NO_EVENTS]
   const events: LLMEvent[] = []
   return [{ ...state, lifecycle: Lifecycle.stepStart(state.lifecycle, events) }, [...events, result]]
@@ -1321,7 +1330,7 @@ const onContentBlockStop = Effect.fn("AnthropicMessages.onContentBlockStop")(fun
         Lifecycle.textEnd(state.lifecycle, events, `text-${event.index}`),
         events,
         `reasoning-${event.index}`,
-        signature === undefined ? undefined : anthropicMetadata({ signature }),
+        signature === undefined ? undefined : providerMetadata(state.providerMetadataKey, { signature }),
       )
   events.push(...resultEvents)
   const reasoningSignatures = { ...state.reasoningSignatures }
@@ -1333,7 +1342,7 @@ const onMessageDelta = (
   state: ParserState,
   event: AnthropicEvent & { readonly delta?: AnthropicStreamDelta },
 ): StepResult => {
-  const usage = mergeUsage(state.usage, mapUsage(event.usage))
+  const usage = mergeUsage(state.usage, mapUsage(event.usage, state.providerMetadataKey), state.providerMetadataKey)
   return [
     {
       ...state,
@@ -1346,7 +1355,7 @@ const onMessageDelta = (
         providerMetadata:
           event.delta?.stop_sequence === null || event.delta?.stop_sequence === undefined
             ? undefined
-            : anthropicMetadata({ stopSequence: event.delta.stop_sequence }),
+            : providerMetadata(state.providerMetadataKey, { stopSequence: event.delta.stop_sequence }),
       },
     },
     NO_EVENTS,
@@ -1472,7 +1481,8 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: Protocol.jsonEvent(AnthropicEvent),
-    initial: () => ({
+    initial: (request) => ({
+      providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
       tools: ToolStream.empty<number>(),
       reasoningSignatures: {},
       lifecycle: Lifecycle.initial(),

packages/ai/src/protocols/bedrock-converse.ts

@@ -258,19 +258,21 @@ const lowerToolChoice = (toolChoice: NonNullable<LLMRequest["toolChoice"]>) =>
     tool: (name) => ({ tool: { name } }) as const,
   })
 
-const bedrockMetadata = (metadata: Record<string, unknown>): ProviderMetadata => ({ bedrock: metadata })
+const providerMetadata = (key: string, metadata: Record<string, unknown>): ProviderMetadata => ({ [key]: metadata })
 
-const reasoningSignature = (part: ReasoningPart) => {
-  const bedrock = part.providerMetadata?.bedrock
+const reasoningSignature = (part: ReasoningPart, providerMetadataKey: string) => {
+  const metadata = part.providerMetadata?.[providerMetadataKey]
   return (
     part.encrypted ??
-    (ProviderShared.isRecord(bedrock) && typeof bedrock.signature === "string" ? bedrock.signature : undefined)
+    (ProviderShared.isRecord(metadata) && typeof metadata.signature === "string" ? metadata.signature : undefined)
   )
 }
 
-const reasoningRedactedData = (part: ReasoningPart) => {
-  const bedrock = part.providerMetadata?.bedrock
-  return ProviderShared.isRecord(bedrock) && typeof bedrock.redactedData === "string" ? bedrock.redactedData : undefined
+const reasoningRedactedData = (part: ReasoningPart, providerMetadataKey: string) => {
+  const metadata = part.providerMetadata?.[providerMetadataKey]
+  return ProviderShared.isRecord(metadata) && typeof metadata.redactedData === "string"
+    ? metadata.redactedData
+    : undefined
 }
 
 const lowerToolCall = (part: ToolCallPart): BedrockToolUseBlock => ({
@@ -318,6 +320,7 @@ const lowerMessages = Effect.fn("BedrockConverse.lowerMessages")(function* (
   breakpoints: BedrockCache.Breakpoints,
 ) {
   const messages: BedrockMessage[] = []
+  const providerMetadataKey = request.model.route.providerMetadataKey ?? String(request.model.provider)
 
   for (const message of request.messages) {
     if (message.role === "system") {
@@ -365,8 +368,8 @@ const lowerMessages = Effect.fn("BedrockConverse.lowerMessages")(function* (
           continue
         }
         if (part.type === "reasoning") {
-          const signature = reasoningSignature(part)
-          const redactedData = reasoningRedactedData(part)
+          const signature = reasoningSignature(part, providerMetadataKey)
+          const redactedData = reasoningRedactedData(part, providerMetadataKey)
           if (signature === undefined && redactedData !== undefined) {
             content.push({ reasoningContent: { redactedContent: redactedData } })
             continue
@@ -466,7 +469,7 @@ const mapFinishReason = (reason: string): FinishReason => {
 
 // AWS reports inputTokens separately from cache reads and writes.
 // Bedrock does not break reasoning out of outputTokens for current models.
-const mapUsage = (usage: BedrockUsageSchema | undefined): Usage | undefined => {
+const mapUsage = (usage: BedrockUsageSchema | undefined, providerMetadataKey: string): Usage | undefined => {
   if (!usage) return undefined
   const inputTokens = ProviderShared.sumTokens(
     usage.inputTokens,
@@ -480,11 +483,12 @@ const mapUsage = (usage: BedrockUsageSchema | undefined): Usage | undefined => {
     cacheReadInputTokens: usage.cacheReadInputTokens,
     cacheWriteInputTokens: usage.cacheWriteInputTokens,
     totalTokens: ProviderShared.totalTokens(inputTokens, usage.outputTokens, usage.totalTokens),
-    providerMetadata: { bedrock: usage },
+    providerMetadata: { [providerMetadataKey]: usage },
   })
 }
 
 interface ParserState {
+  readonly providerMetadataKey: string
   readonly tools: ToolStream.State<number>
   // Bedrock splits the finish into `messageStop` (carries `stopReason`) and
   // `metadata` (carries usage). Hold the terminal event in state so `onHalt`
@@ -541,20 +545,14 @@ const step = (state: ParserState, event: BedrockEvent) =>
       const reasoning = event.contentBlockDelta.delta.reasoningContent
       const events: LLMEvent[] = []
       const redactedData = reasoning.redactedContent ?? reasoning.data
-      const providerMetadata = reasoning.signature
-        ? bedrockMetadata({ signature: reasoning.signature })
+      const metadata = reasoning.signature
+        ? providerMetadata(state.providerMetadataKey, { signature: reasoning.signature })
         : redactedData !== undefined
-          ? bedrockMetadata({ redactedData })
+          ? providerMetadata(state.providerMetadataKey, { redactedData })
           : undefined
       const lifecycle =
-        reasoning.text !== undefined || providerMetadata !== undefined
-          ? Lifecycle.reasoningDelta(
-              state.lifecycle,
-              events,
-              `reasoning-${index}`,
-              reasoning.text ?? "",
-              providerMetadata,
-            )
+        reasoning.text !== undefined || metadata !== undefined
+          ? Lifecycle.reasoningDelta(state.lifecycle, events, `reasoning-${index}`, reasoning.text ?? "", metadata)
           : state.lifecycle
       return [
         {
@@ -596,7 +594,7 @@ const step = (state: ParserState, event: BedrockEvent) =>
             events,
             `reasoning-${index}`,
             state.reasoningSignatures[index]
-              ? bedrockMetadata({ signature: state.reasoningSignatures[index] })
+              ? providerMetadata(state.providerMetadataKey, { signature: state.reasoningSignatures[index] })
               : undefined,
           )
       events.push(...resultEvents)
@@ -633,7 +631,7 @@ const step = (state: ParserState, event: BedrockEvent) =>
     }
 
     if (event.metadata) {
-      const usage = mapUsage(event.metadata.usage) ?? state.pendingFinish?.usage
+      const usage = mapUsage(event.metadata.usage, state.providerMetadataKey) ?? state.pendingFinish?.usage
       return [
         {
           ...state,
@@ -698,7 +696,8 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: BedrockEvent,
-    initial: () => ({
+    initial: (request) => ({
+      providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
       tools: ToolStream.empty<number>(),
       pendingFinish: undefined,
       hasToolCalls: false,

packages/ai/src/protocols/gemini.ts

@@ -229,6 +229,7 @@ type GeminiEvent = Schema.Schema.Type<typeof GeminiEvent>
 
 interface ParserState {
   readonly route: string
+  readonly providerMetadataKey: string
   readonly finishReason?: string
   readonly hasToolCalls: boolean
   readonly promptFeedback?: GeminiPromptFeedback
@@ -285,22 +286,23 @@ const lowerUserPart = Effect.fn("Gemini.lowerUserPart")(function* (part: TextPar
   return { inlineData: { mimeType: media.mime, data: media.base64 } }
 })
 
-const googleMetadata = (metadata: Record<string, unknown>): ProviderMetadata => ({ google: metadata })
+const providerMetadata = (key: string, metadata: Record<string, unknown>): ProviderMetadata => ({ [key]: metadata })
 
-const thoughtSignature = (providerMetadata: ProviderMetadata | undefined) => {
-  const google = providerMetadata?.google
-  return ProviderShared.isRecord(google) && typeof google.thoughtSignature === "string"
-    ? google.thoughtSignature
+const thoughtSignature = (metadata: ProviderMetadata | undefined, key: string) => {
+  const value = metadata?.[key]
+  return ProviderShared.isRecord(value) && typeof value.thoughtSignature === "string"
+    ? value.thoughtSignature
     : undefined
 }
 
-const lowerToolCall = (part: ToolCallPart, omitIds: boolean) => ({
+const lowerToolCall = (part: ToolCallPart, omitIds: boolean, metadataKey: string) => ({
   functionCall: { ...(omitIds ? {} : { id: part.id }), name: part.name, args: part.input },
-  thoughtSignature: thoughtSignature(part.providerMetadata),
+  thoughtSignature: thoughtSignature(part.providerMetadata, metadataKey),
 })
 
 const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMRequest) {
   const contents: GeminiContent[] = []
+  const metadataKey = request.model.route.providerMetadataKey ?? String(request.model.provider)
   const omitCallIds = omitsFunctionCallIds(request.model.id)
   const legacyToolMedia = routesLegacyToolMedia(request.model.id)
   let pendingMedia: GeminiInlineDataPart[] | undefined
@@ -342,15 +344,19 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
         if (!ProviderShared.supportsContent(part, ["text", "reasoning", "tool-call"]))
           return yield* ProviderShared.unsupportedContent("Gemini", "assistant", ["text", "reasoning", "tool-call"])
         if (part.type === "text") {
-          parts.push({ text: part.text, thoughtSignature: thoughtSignature(part.providerMetadata) })
+          parts.push({ text: part.text, thoughtSignature: thoughtSignature(part.providerMetadata, metadataKey) })
           continue
         }
         if (part.type === "reasoning") {
-          parts.push({ text: part.text, thought: true, thoughtSignature: thoughtSignature(part.providerMetadata) })
+          parts.push({
+            text: part.text,
+            thought: true,
+            thoughtSignature: thoughtSignature(part.providerMetadata, metadataKey),
+          })
           continue
         }
         if (part.type === "tool-call") {
-          const lowered = lowerToolCall(part, omitCallIds)
+          const lowered = lowerToolCall(part, omitCallIds, metadataKey)
           const signature = lowered.thoughtSignature
           parts.push({
             ...lowered,
@@ -498,7 +504,7 @@ const fromRequest = Effect.fn("Gemini.fromRequest")(function* (request: LLMReque
 // `cachedContentTokenCount` subset. `candidatesTokenCount` is *exclusive*
 // of `thoughtsTokenCount` — visible-only, not a total — so we sum the two
 // to produce the inclusive `outputTokens` the rest of the contract expects.
-const mapUsage = (usage: GeminiUsage | undefined) => {
+const mapUsage = (usage: GeminiUsage | undefined, metadataKey: string) => {
   if (!usage) return undefined
   // Explicit provider nulls decode as `null`; normalize to `undefined` so the
   // token arithmetic below treats them like absent counts.
@@ -519,7 +525,7 @@ const mapUsage = (usage: GeminiUsage | undefined) => {
     cacheReadInputTokens: cached,
     reasoningTokens: thoughts,
     totalTokens: ProviderShared.totalTokens(promptTokens, outputTokens, usage.totalTokenCount ?? undefined),
-    providerMetadata: { google: usage },
+    providerMetadata: providerMetadata(metadataKey, usage),
   })
 }
 
@@ -567,14 +573,14 @@ const finish = (state: ParserState): ReadonlyArray<LLMEvent> => {
       lifecycle,
       events,
       "reasoning-0",
-      googleMetadata({ thoughtSignature: state.reasoningSignature }),
+      providerMetadata(state.providerMetadataKey, { thoughtSignature: state.reasoningSignature }),
     )
   if (state.textSignature !== undefined)
     lifecycle = Lifecycle.textEnd(
       lifecycle,
       events,
       "text-0",
-      googleMetadata({ thoughtSignature: state.textSignature }),
+      providerMetadata(state.providerMetadataKey, { thoughtSignature: state.textSignature }),
     )
   Lifecycle.finish(lifecycle, events, {
     reason: {
@@ -584,7 +590,9 @@ const finish = (state: ParserState): ReadonlyArray<LLMEvent> => {
     },
     usage: state.usage,
     providerMetadata:
-      state.promptFeedback === undefined ? undefined : googleMetadata({ promptFeedback: state.promptFeedback }),
+      state.promptFeedback === undefined
+        ? undefined
+        : providerMetadata(state.providerMetadataKey, { promptFeedback: state.promptFeedback }),
   })
   return events
 }
@@ -593,7 +601,9 @@ const step = (state: ParserState, event: GeminiEvent) => {
   const nextState = {
     ...state,
     promptFeedback: event.promptFeedback ?? state.promptFeedback,
-    usage: event.usageMetadata ? (mapUsage(event.usageMetadata) ?? state.usage) : state.usage,
+    usage: event.usageMetadata
+      ? (mapUsage(event.usageMetadata, state.providerMetadataKey) ?? state.usage)
+      : state.usage,
   }
   const candidate = event.candidates?.[0]
   if (!candidate?.content)
@@ -637,7 +647,7 @@ const step = (state: ParserState, event: GeminiEvent) => {
           events,
           "reasoning-0",
           part.text,
-          signature ? googleMetadata({ thoughtSignature: signature }) : undefined,
+          signature ? providerMetadata(state.providerMetadataKey, { thoughtSignature: signature }) : undefined,
         )
         continue
       }
@@ -645,14 +655,16 @@ const step = (state: ParserState, event: GeminiEvent) => {
         lifecycle,
         events,
         "reasoning-0",
-        reasoningSignature ? googleMetadata({ thoughtSignature: reasoningSignature }) : undefined,
+        reasoningSignature
+          ? providerMetadata(state.providerMetadataKey, { thoughtSignature: reasoningSignature })
+          : undefined,
       )
       lifecycle = Lifecycle.textDelta(
         lifecycle,
         events,
         "text-0",
         part.text,
-        textSignature ? googleMetadata({ thoughtSignature: textSignature }) : undefined,
+        textSignature ? providerMetadata(state.providerMetadataKey, { thoughtSignature: textSignature }) : undefined,
       )
       textSignature = undefined
       continue
@@ -672,7 +684,9 @@ const step = (state: ParserState, event: GeminiEvent) => {
         lifecycle,
         events,
         "reasoning-0",
-        reasoningSignature ? googleMetadata({ thoughtSignature: reasoningSignature }) : undefined,
+        reasoningSignature
+          ? providerMetadata(state.providerMetadataKey, { thoughtSignature: reasoningSignature })
+          : undefined,
       )
       lifecycle = Lifecycle.stepStart(lifecycle, events)
       events.push(
@@ -681,7 +695,7 @@ const step = (state: ParserState, event: GeminiEvent) => {
           name: part.functionCall.name,
           input,
           providerMetadata: part.thoughtSignature
-            ? googleMetadata({ thoughtSignature: part.thoughtSignature })
+            ? providerMetadata(state.providerMetadataKey, { thoughtSignature: part.thoughtSignature })
             : undefined,
         }),
       )
@@ -720,6 +734,7 @@ export const protocol = Protocol.make({
     event: Protocol.jsonEvent(GeminiEvent),
     initial: (request) => ({
       route: `${request.model.provider}/${request.model.route.id}`,
+      providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
       hasToolCalls: false,
       lifecycle: Lifecycle.initial(),
     }),

packages/ai/src/protocols/openai-chat.ts

@@ -253,6 +253,7 @@ interface PendingToolDelta {
 }
 
 export interface ParserState {
+  readonly providerMetadataKey: string
   readonly tools: ToolStream.State<number>
   readonly pendingTools: Partial<Record<number, PendingToolDelta>>
   readonly toolCallEvents: ReadonlyArray<LLMEvent>
@@ -324,17 +325,18 @@ const lowerMedia = Effect.fn("OpenAIChat.lowerMedia")(function* (part: MediaPart
 const openAICompatibleReasoningContent = (native: unknown) =>
   isRecord(native) && typeof native.reasoning_content === "string" ? native.reasoning_content : undefined
 
-const reasoningField = (part: ReasoningPart) => {
-  const field = part.providerMetadata?.openai?.reasoningField
+const reasoningField = (part: ReasoningPart, providerMetadataKey: string) => {
+  const field = part.providerMetadata?.[providerMetadataKey]?.reasoningField
   return typeof field === "string" ? field : undefined
 }
 
-const reasoningDetails = (parts: ReadonlyArray<ReasoningPart>, native: unknown) => {
+const reasoningDetails = (parts: ReadonlyArray<ReasoningPart>, native: unknown, providerMetadataKey: string) => {
   const observed = parts.flatMap((part) => {
-    const details = part.providerMetadata?.openai?.reasoningDetails
+    const details = part.providerMetadata?.[providerMetadataKey]?.reasoningDetails
     return Array.isArray(details) ? details : []
   })
-  if (parts.some((part) => Array.isArray(part.providerMetadata?.openai?.reasoningDetails))) return observed
+  if (parts.some((part) => Array.isArray(part.providerMetadata?.[providerMetadataKey]?.reasoningDetails)))
+    return observed
   if (isRecord(native) && Array.isArray(native.reasoning_details)) return native.reasoning_details
 }
 
@@ -366,7 +368,7 @@ const lowerAssistantMessage = Effect.fn("OpenAIChat.lowerAssistantMessage")(func
   message: OpenAIChatRequestMessage,
   configuredField: string | undefined,
   requireReasoning: boolean,
-  options: LoweringOptions,
+  options: LoweringOptions & { readonly providerMetadataKey: string },
 ) {
   const content: TextPart[] = []
   const reasoning: ReasoningPart[] = []
@@ -388,10 +390,14 @@ const lowerAssistantMessage = Effect.fn("OpenAIChat.lowerAssistantMessage")(func
     }
   }
   const text = reasoning.map((part) => part.text).join("")
-  const details = reasoningDetails(reasoning, message.native?.openaiCompatible)
-  const observedField = reasoning.map(reasoningField).find((value) => value !== undefined)
+  const details = reasoningDetails(reasoning, message.native?.openaiCompatible, options.providerMetadataKey)
+  const observedField = reasoning
+    .map((part) => reasoningField(part, options.providerMetadataKey))
+    .find((value) => value !== undefined)
   const nativeReasoning = openAICompatibleReasoningContent(message.native?.openaiCompatible)
-  const fullyStructured = reasoning.every((part) => Array.isArray(part.providerMetadata?.openai?.reasoningDetails))
+  const fullyStructured = reasoning.every((part) =>
+    Array.isArray(part.providerMetadata?.[options.providerMetadataKey]?.reasoningDetails),
+  )
   const field = (() => {
     if (configuredField !== undefined && (requireReasoning || reasoning.length > 0 || nativeReasoning !== undefined))
       return configuredField
@@ -459,7 +465,7 @@ const lowerMessage = Effect.fn("OpenAIChat.lowerMessage")(function* (
   message: OpenAIChatRequestMessage,
   reasoningField: string | undefined,
   requireReasoning: boolean,
-  options: LoweringOptions,
+  options: LoweringOptions & { readonly providerMetadataKey: string },
 ) {
   if (message.role === "user") return [yield* lowerUserMessage(message, options)]
   if (message.role === "assistant")
@@ -495,6 +501,7 @@ const lowerMessages = Effect.fn("OpenAIChat.lowerMessages")(function* (request:
   const mistral = ["mistral", "devstral", "codestral", "pixtral", "mixtral"].some((family) => modelID.includes(family))
   const lowering = {
     ...options,
+    providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
     toolCallID: (id: string) => {
       if (mistral)
         return id
@@ -820,7 +827,7 @@ const mapFinishReason = Effect.fn("OpenAIChat.mapFinishReason")(function* (event
 // Providers differ on cache-hit location: OpenAI uses
 // `prompt_tokens_details.cached_tokens`, DeepSeek uses
 // `prompt_cache_hit_tokens`, and Zai uses top-level `cached_tokens`.
-const mapUsage = (usage: OpenAIChatEvent["usage"]): Usage | undefined => {
+const mapUsage = (usage: OpenAIChatEvent["usage"], providerMetadataKey: string): Usage | undefined => {
   if (!usage) return undefined
   const input = usage.prompt_tokens ?? undefined
   const output = usage.completion_tokens ?? undefined
@@ -839,7 +846,7 @@ const mapUsage = (usage: OpenAIChatEvent["usage"]): Usage | undefined => {
     cacheWriteInputTokens: cacheWrite,
     reasoningTokens: reasoning,
     totalTokens: ProviderShared.totalTokens(input, output, usage.total_tokens ?? undefined),
-    providerMetadata: { openai: usage },
+    providerMetadata: { [providerMetadataKey]: usage },
   })
 }
 
@@ -913,8 +920,12 @@ const conflictingReasoningTextDetails = (previous: Record<string, unknown>, curr
 const conflictingDetailValue = (previous: unknown, current: unknown) =>
   previous !== undefined && previous !== null && current !== undefined && current !== null && previous !== current
 
-const reasoningMetadata = (field: ParserState["reasoningField"], details?: ReadonlyArray<unknown>) => ({
-  openai: {
+const reasoningMetadata = (
+  providerMetadataKey: string,
+  field: ParserState["reasoningField"],
+  details?: ReadonlyArray<unknown>,
+) => ({
+  [providerMetadataKey]: {
     ...(field ? { reasoningField: field } : {}),
     ...(details ? { reasoningDetails: details } : {}),
   },
@@ -941,7 +952,10 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
     // Moonshot (and a few other OpenAI-compatible providers) attach usage to
     // `choice.usage` instead of the top-level `usage` field.
     const choiceUsage = (choice as unknown as { usage?: OpenAIChatEvent["usage"] })?.usage
-    const usage = mapUsage(event.usage) ?? (choiceUsage ? mapUsage(choiceUsage) : undefined) ?? state.usage
+    const usage =
+      mapUsage(event.usage, state.providerMetadataKey) ??
+      (choiceUsage ? mapUsage(choiceUsage, state.providerMetadataKey) : undefined) ??
+      state.usage
     const rawFinishReason = choice?.finish_reason
     const finishReason = rawFinishReason
       ? {
@@ -979,7 +993,7 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
     const detailDelta = Array.isArray(delta?.reasoning_details) ? delta.reasoning_details : undefined
     if (detailDelta !== undefined) appendReasoningDetails(state.reasoningDetails, detailDelta)
     const reasoningDetailsObserved = state.reasoningDetailsObserved || detailDelta !== undefined
-    const deltaMetadata = reasoningMetadata(reasoningField)
+    const deltaMetadata = reasoningMetadata(state.providerMetadataKey, reasoningField)
     const text = detailDelta?.length ? (detailText(detailDelta) ?? reasoning?.text) : reasoning?.text
     if (text !== undefined) lifecycle = Lifecycle.reasoningDelta(lifecycle, events, "reasoning-0", text, deltaMetadata)
     else if (
@@ -995,7 +1009,11 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
         lifecycle,
         events,
         "reasoning-0",
-        reasoningMetadata(reasoningField, reasoningDetailsObserved ? state.reasoningDetails : undefined),
+        reasoningMetadata(
+          state.providerMetadataKey,
+          reasoningField,
+          reasoningDetailsObserved ? state.reasoningDetails : undefined,
+        ),
       )
       lifecycle = Lifecycle.textDelta(lifecycle, events, "text-0", delta.content)
     }
@@ -1005,7 +1023,11 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
         lifecycle,
         events,
         "reasoning-0",
-        reasoningMetadata(reasoningField, reasoningDetailsObserved ? state.reasoningDetails : undefined),
+        reasoningMetadata(
+          state.providerMetadataKey,
+          reasoningField,
+          reasoningDetailsObserved ? state.reasoningDetails : undefined,
+        ),
       )
       lifecycle = Lifecycle.textDelta(lifecycle, events, "text-0", delta.refusal)
     }
@@ -1066,6 +1088,7 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
 
     return [
       {
+        providerMetadataKey: state.providerMetadataKey,
         tools: finished?.tools ?? tools,
         pendingTools,
         toolCallEvents: finished?.events ?? state.toolCallEvents,
@@ -1109,12 +1132,18 @@ const finishEvents = Effect.fn("OpenAIChat.finishEvents")(function* (state: Pars
       }
     : { normalized: hasToolCalls ? ("tool-calls" as const) : ("stop" as const) }
   const metadata = reasoningMetadata(
+    state.providerMetadataKey,
     state.reasoningField,
     state.reasoningDetailsObserved ? state.reasoningDetails : undefined,
   )
   const started =
     state.reasoningDetailsObserved && !state.reasoningEmitted
-      ? Lifecycle.reasoningStart(state.lifecycle, events, "reasoning-0", reasoningMetadata(state.reasoningField))
+      ? Lifecycle.reasoningStart(
+          state.lifecycle,
+          events,
+          "reasoning-0",
+          reasoningMetadata(state.providerMetadataKey, state.reasoningField),
+        )
       : state.lifecycle
   const ended = Lifecycle.reasoningEnd(started, events, "reasoning-0", metadata)
   const lifecycle = toolCallEvents.length ? Lifecycle.stepStart(ended, events) : ended
@@ -1141,6 +1170,7 @@ export const protocol = Protocol.make({
   stream: {
     event: Protocol.jsonEvent(OpenAIChatEvent),
     initial: (request) => ({
+      providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
       tools: ToolStream.empty<number>(),
       pendingTools: {},
       toolCallEvents: [],

packages/ai/src/providers/amazon-bedrock-mantle.ts

@@ -23,13 +23,14 @@ export interface Settings extends ProviderPackage.Settings {
   readonly baseURL?: string
   readonly credentials?: Credentials
   readonly region?: string
+  readonly topP?: number
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
 const responsesRoute = Route.make({
   id: "bedrock-mantle-responses",
   provider: id,
-  providerMetadataKey: OpenAIResponses.route.providerMetadataKey,
+  providerMetadataKey: "mantle",
   protocol: OpenAIResponses.protocol,
   endpoint: OpenAIResponses.route.endpoint,
   auth: OpenAIResponses.route.auth,
@@ -40,6 +41,7 @@ const responsesRoute = Route.make({
 const chatRoute = OpenAIChat.route.with({
   id: "bedrock-mantle-chat",
   provider: id,
+  providerMetadataKey: "mantle",
 })
 
 export const routes = [responsesRoute, chatRoute]
@@ -76,7 +78,7 @@ export const configure = (input: Config = {}) => {
 
   return {
     id,
-    model: chat,
+    model: responses,
     chat,
     responses,
     configure,
@@ -94,6 +96,7 @@ const config = (settings: Settings): Config => {
     apiKey: settings.auth === "sigv4" ? undefined : settings.apiKey,
     baseURL: settings.baseURL,
     credentials: settings.credentials,
+    generation: settings.topP === undefined ? undefined : { topP: settings.topP },
     headers: settings.headers === undefined ? undefined : { ...settings.headers },
     http: settings.body === undefined ? undefined : { body: { ...settings.body } },
     providerOptions: settings.providerOptions,
@@ -109,4 +112,4 @@ export const responsesModel: ProviderPackage.Definition<Settings, OpenAIProvider
   modelID,
   settings,
 ) => configure(config(settings)).responses(modelID)
-export const model = chatModel
+export const model = responsesModel

packages/ai/src/providers/amazon-bedrock.ts

@@ -35,6 +35,7 @@ const configuredRoute = (input: Config) => {
   return BedrockConverse.route.with({
     ...rest,
     provider: id,
+    providerMetadataKey: "bedrock",
     endpoint: { baseURL: baseURL ?? bedrockBaseURL(resolvedRegion) },
     auth: apiKey === undefined ? BedrockConverse.sigV4Auth(credentials) : Auth.bearer(apiKey),
   })

packages/ai/src/providers/amazon-bedrock/mantle.ts

@@ -1,2 +1,2 @@
-export { chatModel as model } from "../amazon-bedrock-mantle.js"
+export { responsesModel as model } from "../amazon-bedrock-mantle.js"
 export type { Settings } from "../amazon-bedrock-mantle.js"

packages/ai/src/providers/google-vertex-chat.ts

@@ -27,6 +27,7 @@ export interface Settings extends ProviderPackage.Settings {
 const route = OpenAICompatibleChat.route.with({
   id: "google-vertex-chat",
   provider: id,
+  providerMetadataKey: "vertex",
 })
 
 export const routes = [route]

packages/ai/src/providers/google-vertex-responses.ts

@@ -27,6 +27,7 @@ export interface Settings extends ProviderPackage.Settings {
 const route = OpenAICompatibleResponses.route.with({
   id: "google-vertex-responses",
   provider: id,
+  providerMetadataKey: "vertex",
   providerOptions: { store: false },
 })
 

packages/ai/src/providers/google-vertex.ts

@@ -68,7 +68,7 @@ const protocol = {
 const route = Route.make({
   id: "google-vertex-gemini",
   provider: id,
-  providerMetadataKey: "google",
+  providerMetadataKey: "vertex",
   protocol,
   endpoint: Endpoint.path(({ request }) => {
     const model = String(request.model.id)

packages/ai/src/providers/openrouter.ts

@@ -164,6 +164,7 @@ const bodyOptions = (input: unknown) => {
 export const route = Route.make({
   id: ADAPTER,
   provider: profile.provider,
+  providerMetadataKey: "openrouter",
   protocol,
   endpoint: Endpoint.path("/chat/completions", { baseURL: profile.baseURL }),
   framing: Framing.sse,

packages/ai/src/route/client.ts

@@ -89,6 +89,7 @@ export interface RouteDefaultsInput {
 export interface RoutePatch<Body, Prepared> extends RouteDefaultsInput {
   readonly id?: string
   readonly provider?: string | ProviderID
+  readonly providerMetadataKey?: string
   readonly auth?: Auth.Definition
   readonly transport?: Transport<Body, Prepared, unknown>
   readonly endpoint?: EndpointPatch<Body>
@@ -289,11 +290,16 @@ function makeFromTransport<Body, Prepared, Frame, Event, State>(
       defaults: routeInput.defaults ?? {},
       body: protocol.body,
       with: (patch: RoutePatch<Body, Prepared>) => {
-        const { id, provider, auth, transport, endpoint, ...defaults } = patch
+        const { id, provider, providerMetadataKey, auth, transport, endpoint, ...defaults } = patch
         return build({
           ...routeInput,
           id: id ?? routeInput.id,
           provider: provider ?? routeInput.provider,
+          providerMetadataKey:
+            providerMetadataKey ??
+            (provider !== undefined && String(provider) !== String(routeInput.provider)
+              ? String(provider)
+              : routeInput.providerMetadataKey),
           auth: auth ?? routeInput.auth,
           endpoint: endpoint ? Endpoint.merge(routeInput.endpoint, endpoint) : routeInput.endpoint,
           transport: (transport as Transport<Body, Prepared, Frame> | undefined) ?? routeInput.transport,

packages/ai/src/route/executor.ts

@@ -40,17 +40,6 @@ const headerDetails = (headers: Headers.Headers) =>
 const normalizedHeaders = (headers: Headers.Headers) =>
   Object.fromEntries(Object.entries(headers).map(([key, value]) => [key.toLowerCase(), value]))
 
-const requestId = (headers: Record<string, string>) => {
-  return (
-    headers["x-request-id"] ??
-    headers["request-id"] ??
-    headers["x-amzn-requestid"] ??
-    headers["x-amz-request-id"] ??
-    headers["x-goog-request-id"] ??
-    headers["cf-ray"]
-  )
-}
-
 const retryAfterMs = (headers: Record<string, string>) => {
   const millis = Number(headers["retry-after-ms"])
   if (Number.isFinite(millis)) return Math.max(0, millis)
@@ -147,14 +136,12 @@ const responseHttp = (input: {
   readonly request: HttpClientRequest.HttpClientRequest
   readonly response: HttpClientResponse.HttpClientResponse
   readonly body: ReturnType<typeof responseBody>
-  readonly requestId?: string | undefined
   readonly rateLimit?: HttpRateLimitDetails | undefined
 }) =>
   new HttpContext({
     request: requestDetails(input.request),
     response: responseDetails(input.response),
     ...input.body,
-    requestId: input.requestId,
     rateLimit: input.rateLimit,
   })
 
@@ -179,7 +166,6 @@ const statusError =
             request,
             response,
             body: details,
-            requestId: requestId(headers),
             rateLimit,
           }),
         }),
@@ -216,7 +202,6 @@ export const classifyHttpFailure = (input: {
           ? undefined
           : new HttpResponseDetails({ status: input.status, headers: headerDetails(Headers.fromInput(headers)) }),
       ...details,
-      requestId: requestId(headers),
       rateLimit,
     }),
   })

packages/ai/src/schema/errors.ts

@@ -29,7 +29,6 @@ export class HttpContext extends Schema.Class<HttpContext>("AI.HttpContext")({
   response: Schema.optional(HttpResponseDetails),
   body: Schema.optional(Schema.String),
   bodyTruncated: Schema.optional(Schema.Boolean),
-  requestId: Schema.optional(Schema.String),
   rateLimit: Schema.optional(HttpRateLimitDetails),
 }) {}
 

packages/ai/test/executor.test.ts

@@ -327,7 +327,6 @@ describe("RequestExecutor", () => {
           retryAfterMs: 0,
           rateLimit: { retryAfterMs: 0 },
           http: {
-            requestId: "req_123",
             request: {
               method: "POST",
               url: "https://provider.test/v1/chat?api_key=secret&key=secret&debug=1",

packages/ai/test/provider/anthropic-messages.test.ts

@@ -2,7 +2,7 @@ import { describe, expect } from "bun:test"
 import { Effect } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
 import { CacheHint, LLM, AIError, LLMRequest, Message, ToolCallPart, ToolDefinition, Usage } from "../../src/index.js"
-import { Auth, LLMClient } from "../../src/route.js"
+import { Auth, Endpoint, LLMClient, Route } from "../../src/route.js"
 import { compileRequest } from "../../src/route/client.js"
 import * as AnthropicMessages from "../../src/protocols/anthropic-messages.js"
 import { GoogleVertexMessages } from "../../src/providers.js"
@@ -810,6 +810,99 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
+  it.effect("round-trips compatible provider metadata in its own namespace", () =>
+    Effect.gen(function* () {
+      const compatible = Route.make({
+        id: "custom-anthropic-messages",
+        provider: "custom-anthropic",
+        protocol: AnthropicMessages.protocol,
+        endpoint: Endpoint.path("/messages", { baseURL: "https://compatible.test/v1" }),
+        auth: Auth.header("x-api-key", "test"),
+        framing: AnthropicMessages.framing,
+      }).model({ id: "custom-model" })
+      const result = [
+        {
+          type: "web_search_result",
+          url: "https://example.com",
+          citations: [{ type: "web_search_result_location", cited_text: "Example" }],
+        },
+      ]
+      const response = yield* LLMClient.generate(LLM.request({ model: compatible, prompt: "Search." })).pipe(
+        Effect.provide(
+          fixedResponse(
+            sseEvents(
+              { type: "message_start", message: { usage: { input_tokens: 5, custom_start: true } } },
+              { type: "content_block_start", index: 0, content_block: { type: "thinking", thinking: "Thinking." } },
+              { type: "content_block_delta", index: 0, delta: { type: "signature_delta", signature: "custom_sig" } },
+              { type: "content_block_stop", index: 0 },
+              {
+                type: "content_block_start",
+                index: 1,
+                content_block: { type: "redacted_thinking", data: "custom_redacted" },
+              },
+              { type: "content_block_stop", index: 1 },
+              {
+                type: "content_block_start",
+                index: 2,
+                content_block: {
+                  type: "server_tool_use",
+                  id: "custom_tool",
+                  name: "web_search",
+                  input: { query: "example" },
+                },
+              },
+              { type: "content_block_stop", index: 2 },
+              {
+                type: "content_block_start",
+                index: 3,
+                content_block: { type: "web_search_tool_result", tool_use_id: "custom_tool", content: result },
+              },
+              { type: "content_block_stop", index: 3 },
+              {
+                type: "message_delta",
+                delta: { stop_reason: "end_turn", stop_sequence: "custom_stop" },
+                usage: { output_tokens: 2, custom_terminal: true },
+              },
+              { type: "message_stop" },
+            ),
+          ),
+        ),
+      )
+
+      expect(response.message.content).toMatchObject([
+        { type: "reasoning", text: "Thinking.", providerMetadata: { "custom-anthropic": { signature: "custom_sig" } } },
+        { type: "reasoning", text: "", providerMetadata: { "custom-anthropic": { redactedData: "custom_redacted" } } },
+        { type: "tool-call", id: "custom_tool", providerExecuted: true },
+        {
+          type: "tool-result",
+          providerExecuted: true,
+          providerMetadata: { "custom-anthropic": { blockType: "web_search_tool_result", result } },
+        },
+      ])
+      expect(response.usage?.providerMetadata).toEqual({
+        "custom-anthropic": { input_tokens: 5, custom_start: true, output_tokens: 2, custom_terminal: true },
+      })
+      expect(response.events.at(-1)).toMatchObject({
+        providerMetadata: { "custom-anthropic": { stopSequence: "custom_stop" } },
+      })
+
+      const prepared = yield* compileRequest(
+        LLM.request({ model: compatible, messages: [response.message], cache: "none" }),
+      )
+      expect(prepared.body.messages).toEqual([
+        {
+          role: "assistant",
+          content: [
+            { type: "thinking", thinking: "Thinking.", signature: "custom_sig" },
+            { type: "redacted_thinking", data: "custom_redacted" },
+            { type: "server_tool_use", id: "custom_tool", name: "web_search", input: { query: "example" } },
+            { type: "web_search_tool_result", tool_use_id: "custom_tool", content: result },
+          ],
+        },
+      ])
+    }),
+  )
+
   it.effect("parses text, reasoning, and usage stream fixtures", () =>
     Effect.gen(function* () {
       const body = sseEvents(

packages/ai/test/provider/bedrock-converse.test.ts

@@ -569,6 +569,57 @@ describe("Bedrock Converse route", () => {
     }),
   )
 
+  it.effect("round-trips reassigned provider reasoning and usage metadata in its own namespace", () =>
+    Effect.gen(function* () {
+      const compatible = model.route.with({ provider: "custom-bedrock" }).model({ id: model.id })
+      const redactedData = "cmVkYWN0ZWQtdGhpbmtpbmc="
+      const response = yield* LLMClient.generate(LLMRequest.update(baseRequest, { model: compatible })).pipe(
+        Effect.provide(
+          fixedBytes(
+            eventStreamBody(
+              ["messageStart", { role: "assistant" }],
+              ["contentBlockDelta", { contentBlockIndex: 0, delta: { reasoningContent: { text: "Let me think." } } }],
+              ["contentBlockDelta", { contentBlockIndex: 0, delta: { reasoningContent: { signature: "custom_sig" } } }],
+              ["contentBlockStop", { contentBlockIndex: 0 }],
+              [
+                "contentBlockDelta",
+                { contentBlockIndex: 1, delta: { reasoningContent: { redactedContent: redactedData } } },
+              ],
+              ["contentBlockStop", { contentBlockIndex: 1 }],
+              ["messageStop", { stopReason: "end_turn" }],
+              ["metadata", { usage: { inputTokens: 5, outputTokens: 2, totalTokens: 7 } }],
+            ),
+          ),
+        ),
+      )
+
+      expect(response.message.content).toEqual([
+        {
+          type: "reasoning",
+          text: "Let me think.",
+          providerMetadata: { "custom-bedrock": { signature: "custom_sig" } },
+        },
+        { type: "reasoning", text: "", providerMetadata: { "custom-bedrock": { redactedData } } },
+      ])
+      expect(response.usage?.providerMetadata).toEqual({
+        "custom-bedrock": { inputTokens: 5, outputTokens: 2, totalTokens: 7 },
+      })
+
+      const prepared = yield* compileRequest(
+        LLM.request({ model: compatible, messages: [response.message], cache: "none" }),
+      )
+      expect(prepared.body.messages).toEqual([
+        {
+          role: "assistant",
+          content: [
+            { reasoningContent: { reasoningText: { text: "Let me think.", signature: "custom_sig" } } },
+            { reasoningContent: { redactedContent: redactedData } },
+          ],
+        },
+      ])
+    }),
+  )
+
   it.effect("preserves reasoning signatures when contentBlockStop is missing", () =>
     Effect.gen(function* () {
       const response = yield* LLMClient.generate(baseRequest).pipe(

packages/ai/test/provider/bedrock-mantle.test.ts

@@ -3,6 +3,7 @@ import { Effect } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
 import { LLM, Message } from "../../src/index.js"
 import { AmazonBedrockMantle } from "../../src/providers.js"
+import { model } from "../../src/providers/amazon-bedrock/mantle.js"
 import { OpenAIResponses } from "../../src/protocols/openai-responses.js"
 import { compileRequest, LLMClient } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
@@ -17,13 +18,16 @@ const credentials = {
 }
 
 describe("Amazon Bedrock Mantle provider", () => {
-  it.effect("uses Chat by default and exposes Responses", () =>
+  it.effect("uses Responses by default and exposes Chat explicitly", () =>
     Effect.gen(function* () {
       const provider = AmazonBedrockMantle.configure({ credentials })
-      expect(provider.responses("openai.gpt-oss-120b").route.transport).toBe(OpenAIResponses.httpTransport)
-      const chat = yield* compileRequest(LLM.request({ model: provider.model("openai.gpt-oss-120b"), prompt: "Hi" }))
+      expect(provider.model).toBe(provider.responses)
+      expect(AmazonBedrockMantle.model).toBe(AmazonBedrockMantle.responsesModel)
+      expect(model).toBe(AmazonBedrockMantle.responsesModel)
+      expect(provider.model("openai.gpt-oss-120b").route.transport).toBe(OpenAIResponses.httpTransport)
+      const chat = yield* compileRequest(LLM.request({ model: provider.chat("openai.gpt-oss-120b"), prompt: "Hi" }))
       const responses = yield* compileRequest(
-        LLM.request({ model: provider.responses("openai.gpt-oss-120b"), prompt: "Hi" }),
+        LLM.request({ model: provider.model("openai.gpt-oss-120b"), prompt: "Hi" }),
       )
 
       expect(chat).toMatchObject({
@@ -36,6 +40,23 @@ describe("Amazon Bedrock Mantle provider", () => {
         protocol: "openai-responses",
         body: { model: "openai.gpt-oss-120b", store: false },
       })
+      expect(provider.model("openai.gpt-oss-120b").route.providerMetadataKey).toBe("mantle")
+      expect(provider.chat("openai.gpt-oss-120b").route.providerMetadataKey).toBe("mantle")
+    }),
+  )
+
+  it.effect("preserves configured top-p generation defaults for Chat and Responses", () =>
+    Effect.gen(function* () {
+      const settings = { apiKey: "test-key", topP: 0.8 }
+      const chat = yield* compileRequest(
+        LLM.request({ model: AmazonBedrockMantle.chatModel("openai.gpt-oss-safeguard-20b", settings), prompt: "Hi" }),
+      )
+      const responses = yield* compileRequest(
+        LLM.request({ model: AmazonBedrockMantle.responsesModel("openai.gpt-oss-120b", settings), prompt: "Hi" }),
+      )
+
+      expect(chat.body.top_p).toBe(0.8)
+      expect(responses.body.top_p).toBe(0.8)
     }),
   )
 
@@ -107,6 +128,9 @@ describe("Amazon Bedrock Mantle provider", () => {
         LLM.request({ model, messages: [response.message, Message.user("Continue.")] }),
       )
 
+      expect(response.message.content.find((part) => part.type === "reasoning")?.providerMetadata).toEqual({
+        mantle: { itemId: "msg_95d4d0af4350432a", reasoningEncryptedContent: "mantle-state" },
+      })
       expect(prepared.body.input).toEqual([
         {
           type: "reasoning",

packages/ai/test/provider/cloudflare.test.ts

@@ -126,7 +126,7 @@ describe("Cloudflare", () => {
       expect(response.reasoning).toBe("Thinking")
       expect(response.events.filter(LLMEvent.is.reasoningDelta)).toHaveLength(2)
       expect(response.message.content.find((part) => part.type === "reasoning")?.providerMetadata).toEqual({
-        openai: { reasoningField: "reasoning", reasoningDetails: merged },
+        "cloudflare-ai-gateway": { reasoningField: "reasoning", reasoningDetails: merged },
       })
 
       const replay = yield* compileRequest(LLM.request({ model, messages: [response.message] }))

packages/ai/test/provider/google-vertex.test.ts

@@ -6,7 +6,7 @@ import { GoogleVertex, GoogleVertexChat, GoogleVertexMessages, GoogleVertexRespo
 import { LLMClient } from "../../src/route.js"
 import { compileRequest } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
-import { dynamicResponse } from "../lib/http.js"
+import { dynamicResponse, fixedResponse } from "../lib/http.js"
 import { deltaChunk, finishChunk } from "../lib/openai-chunks.js"
 import { sseEvents } from "../lib/sse.js"
 
@@ -89,7 +89,7 @@ describe("Google Vertex providers", () => {
                 id: "call_1",
                 name: "lookup",
                 input: { query: "weather" },
-                providerMetadata: { google: { functionCallId: "provider_call_1" } },
+                providerMetadata: { vertex: { functionCallId: "provider_call_1" } },
               }),
             ]),
             Message.tool({
@@ -97,7 +97,7 @@ describe("Google Vertex providers", () => {
               name: "lookup",
               result: "sunny",
               resultType: "text",
-              providerMetadata: { google: { functionCallId: "provider_call_1" } },
+              providerMetadata: { vertex: { functionCallId: "provider_call_1" } },
             }),
           ],
         }),
@@ -122,6 +122,91 @@ describe("Google Vertex providers", () => {
     }),
   )
 
+  it.effect("round-trips Vertex Gemini metadata through signed content, tool calls, and usage", () =>
+    Effect.gen(function* () {
+      const model = GoogleVertex.configure({
+        accessToken: "vertex-token",
+        project: "vertex-project",
+      }).model("gemini-3.5-flash")
+      const response = yield* LLMClient.generate(LLM.request({ model, prompt: "Check the weather." })).pipe(
+        Effect.provide(
+          fixedResponse(
+            sseEvents({
+              candidates: [
+                {
+                  content: {
+                    role: "model",
+                    parts: [
+                      { text: "Thinking.", thought: true, thoughtSignature: "reasoning_sig" },
+                      { text: "Checking.", thoughtSignature: "text_sig" },
+                      {
+                        functionCall: { id: "provider_call_1", name: "lookup", args: { query: "weather" } },
+                        thoughtSignature: "tool_sig",
+                      },
+                    ],
+                  },
+                  finishReason: "STOP",
+                },
+              ],
+              promptFeedback: { blockReasonMessage: "Reviewed" },
+              usageMetadata: { promptTokenCount: 5, candidatesTokenCount: 2, thoughtsTokenCount: 1 },
+            }),
+          ),
+        ),
+      )
+      const reasoning = response.events.find((event) => event.type === "reasoning-end")
+      const text = response.events.find((event) => event.type === "text-delta")
+      const toolCall = response.toolCalls[0]
+
+      expect(reasoning?.providerMetadata).toEqual({ vertex: { thoughtSignature: "reasoning_sig" } })
+      expect(text?.providerMetadata).toEqual({ vertex: { thoughtSignature: "text_sig" } })
+      expect(toolCall).toMatchObject({
+        id: "provider_call_1",
+        providerMetadata: { vertex: { thoughtSignature: "tool_sig" } },
+      })
+      expect(response.usage?.providerMetadata).toEqual({
+        vertex: { promptTokenCount: 5, candidatesTokenCount: 2, thoughtsTokenCount: 1 },
+      })
+      expect(response.events.at(-1)?.providerMetadata).toEqual({
+        vertex: { promptFeedback: { blockReasonMessage: "Reviewed" } },
+      })
+
+      const prepared = yield* compileRequest(
+        LLM.request({
+          model,
+          messages: [
+            Message.assistant([
+              { type: "reasoning", text: "Thinking.", providerMetadata: reasoning?.providerMetadata },
+              { type: "text", text: "Checking.", providerMetadata: text?.providerMetadata },
+              ToolCallPart.make({
+                id: toolCall.id,
+                name: toolCall.name,
+                input: toolCall.input,
+                providerMetadata: toolCall.providerMetadata,
+              }),
+            ]),
+            Message.tool({ id: toolCall.id, name: toolCall.name, result: "sunny", resultType: "text" }),
+          ],
+        }),
+      )
+
+      expect(prepared.body.contents).toEqual([
+        {
+          role: "model",
+          parts: [
+            { text: "Thinking.", thought: true, thoughtSignature: "reasoning_sig" },
+            { text: "Checking.", thoughtSignature: "text_sig" },
+            { functionCall: { name: "lookup", args: { query: "weather" } }, thoughtSignature: "tool_sig" },
+          ],
+        },
+        {
+          role: "user",
+          parts: [{ functionResponse: { name: "lookup", response: { name: "lookup", content: "sunny" } } }],
+        },
+      ])
+    }),
+  )
+
   it.effect("projects Anthropic Messages onto the Vertex raw-predict API", () =>
     Effect.gen(function* () {
       const model = GoogleVertexMessages.configure({

packages/ai/test/provider/native-providers.test.ts

@@ -2,13 +2,80 @@ import { describe, expect } from "bun:test"
 import { ConfigProvider, Effect } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
 import { LLM, Message, ToolDefinition } from "../../src/index.js"
-import { Cerebras, DeepInfra, Groq, TogetherAI } from "../../src/providers/index.js"
+import {
+  AmazonBedrock,
+  AmazonBedrockMantle,
+  Anthropic,
+  AnthropicCompatible,
+  Azure,
+  Cerebras,
+  CloudflareAIGateway,
+  CloudflareWorkersAI,
+  DeepInfra,
+  Google,
+  GoogleVertex,
+  GoogleVertexChat,
+  GoogleVertexMessages,
+  GoogleVertexResponses,
+  Groq,
+  OpenAI,
+  OpenAICompatible,
+  OpenAICompatibleResponses,
+  OpenRouter,
+  TogetherAI,
+  XAI,
+} from "../../src/providers/index.js"
 import { compileRequest } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
 import { dynamicResponse } from "../lib/http.js"
 import { sseEvents } from "../lib/sse.js"
 
 describe("native OpenAI-compatible providers", () => {
+  it.effect("assigns provider-owned metadata namespaces across native routes", () =>
+    Effect.gen(function* () {
+      const vertex = { project: "project", accessToken: "token" }
+      const providers = [
+        [OpenAI.configure({ apiKey: "test" }).chat("model"), "openai"],
+        [OpenAI.configure({ apiKey: "test" }).responses("model"), "openai"],
+        [Azure.configure({ resourceName: "resource", apiKey: "test" }).chat("model"), "azure"],
+        [Azure.configure({ resourceName: "resource", apiKey: "test" }).responses("model"), "azure"],
+        [AmazonBedrock.configure({ apiKey: "test" }).model("model"), "bedrock"],
+        [AmazonBedrockMantle.configure({ apiKey: "test" }).chat("model"), "mantle"],
+        [AmazonBedrockMantle.configure({ apiKey: "test" }).responses("model"), "mantle"],
+        [Google.configure({ apiKey: "test" }).model("model"), "google"],
+        [GoogleVertex.configure(vertex).model("model"), "vertex"],
+        [GoogleVertexChat.configure(vertex).model("model"), "vertex"],
+        [GoogleVertexResponses.configure(vertex).model("model"), "vertex"],
+        [GoogleVertexMessages.configure(vertex).model("model"), "anthropic"],
+        [Anthropic.configure({ apiKey: "test" }).model("model"), "anthropic"],
+        [
+          AnthropicCompatible.configure({ baseURL: "https://example.test/v1", provider: "minimax" }).model("model"),
+          "minimax",
+        ],
+        [
+          OpenAICompatible.configure({ baseURL: "https://example.test/v1", provider: "custom" }).model("model"),
+          "custom",
+        ],
+        [
+          OpenAICompatibleResponses.configure({ baseURL: "https://example.test/v1", provider: "custom" }).model(
+            "model",
+          ),
+          "custom",
+        ],
+        [Cerebras.configure({ apiKey: "test" }).model("model"), "cerebras"],
+        [DeepInfra.configure({ apiKey: "test" }).model("model"), "deepinfra"],
+        [TogetherAI.configure({ apiKey: "test" }).model("model"), "togetherai"],
+        [CloudflareAIGateway.configure({ accountId: "account" }).model("model"), "cloudflare-ai-gateway"],
+        [CloudflareWorkersAI.configure({ accountId: "account" }).model("model"), "cloudflare-workers-ai"],
+        [OpenRouter.configure({ apiKey: "test" }).model("model"), "openrouter"],
+        [XAI.configure({ apiKey: "test" }).chat("model"), "xai"],
+        [XAI.configure({ apiKey: "test" }).responses("model"), "xai"],
+      ] as const
+
+      for (const [model, key] of providers) expect(model.route.providerMetadataKey).toBe(key)
+    }),
+  )
+
   it.effect("preserves native Together AI and Cerebras provider and route identities", () =>
     Effect.gen(function* () {
       const together = TogetherAI.configure({ apiKey: "fixture" }).model("meta-llama/Llama-3.3-70B")

packages/ai/test/provider/openai-chat-reasoning.recorded.test.ts

@@ -68,11 +68,13 @@ for (const item of cases) {
           expect(response.text.replaceAll(",", "").trim()).toBe("37887")
           expect(response.reasoning.length).toBeGreaterThan(0)
           expect(response.events.some(LLMEvent.is.reasoningDelta)).toBe(true)
-          const metadata = response.message.content.find((part) => part.type === "reasoning")?.providerMetadata
-          expect(metadata?.openai?.reasoningField).toBe(item.structured ? "reasoning" : "reasoning_content")
-          expect(Array.isArray(metadata?.openai?.reasoningDetails)).toBe(item.structured)
+          const metadata = response.message.content.find((part) => part.type === "reasoning")?.providerMetadata?.[
+            item.model.route.providerMetadataKey ?? String(item.model.provider)
+          ]
+          expect(metadata?.reasoningField).toBe(item.structured ? "reasoning" : "reasoning_content")
+          expect(Array.isArray(metadata?.reasoningDetails)).toBe(item.structured)
           if (!item.structured) return
-          const details = metadata?.openai?.reasoningDetails
+          const details = metadata?.reasoningDetails
           if (!Array.isArray(details)) return
           expect(
             details.some(
@@ -126,7 +128,11 @@ for (const item of cases) {
           ).toMatch(/^Paris is sunny\.?$/)
           const details = events
             .filter(LLMEvent.is.reasoningEnd)
-            .map((event) => event.providerMetadata?.openai?.reasoningDetails)
+            .map(
+              (event) =>
+                event.providerMetadata?.[item.model.route.providerMetadataKey ?? String(item.model.provider)]
+                  ?.reasoningDetails,
+            )
             .find(Array.isArray)
           expect(Array.isArray(details)).toBe(item.structured)
           if (!item.structured || !Array.isArray(details)) return

packages/ai/test/provider/openai-chat.test.ts

@@ -903,6 +903,70 @@ describe("OpenAI Chat route", () => {
     }),
   )
 
+  it.effect("uses the configured provider metadata namespace for reasoning and usage", () =>
+    Effect.gen(function* () {
+      const selected = LanguageModel.update(model, {
+        route: { ...model.route, providerMetadataKey: "vendor" },
+      })
+      const details = [{ type: "reasoning.text", text: "thinking", signature: "signed" }]
+      const response = yield* LLMClient.generate(LLMRequest.update(request, { model: selected })).pipe(
+        Effect.provide(
+          fixedResponse(
+            sseEvents(
+              { choices: [{ delta: { reasoning: "thinking", reasoning_details: details } }] },
+              deltaChunk({ content: "Hello" }),
+              deltaChunk({}, "stop"),
+              usageChunk({ prompt_tokens: 5, completion_tokens: 2, total_tokens: 7 }),
+            ),
+          ),
+        ),
+      )
+
+      expect(response.message.content.find((part) => part.type === "reasoning")?.providerMetadata).toEqual({
+        vendor: { reasoningField: "reasoning", reasoningDetails: details },
+      })
+      expect(response.usage?.providerMetadata).toEqual({
+        vendor: { prompt_tokens: 5, completion_tokens: 2, total_tokens: 7 },
+      })
+
+      const replay = yield* compileRequest(LLM.request({ model: selected, messages: [response.message] }))
+      expect(replay.body.messages).toEqual([
+        { role: "assistant", content: "Hello", reasoning: "thinking", reasoning_details: details },
+      ])
+    }),
+  )
+
+  it.effect("falls back to the selected provider for the metadata namespace", () =>
+    Effect.gen(function* () {
+      const compatible = model.route.with({ provider: "deepseek" }).model({ id: "deepseek-chat" })
+      const selected = LanguageModel.update(compatible, {
+        route: { ...compatible.route, providerMetadataKey: undefined },
+      })
+      const response = yield* LLMClient.generate(LLMRequest.update(request, { model: selected })).pipe(
+        Effect.provide(
+          fixedResponse(
+            sseEvents(
+              deltaChunk({ reasoning_content: "thinking" }),
+              deltaChunk({ content: "Hello" }),
+              deltaChunk({}, "stop"),
+              usageChunk({ prompt_tokens: 5, completion_tokens: 2, total_tokens: 7 }),
+            ),
+          ),
+        ),
+      )
+
+      expect(response.message.content.find((part) => part.type === "reasoning")?.providerMetadata).toEqual({
+        deepseek: { reasoningField: "reasoning_content" },
+      })
+      expect(response.usage?.providerMetadata).toEqual({
+        deepseek: { prompt_tokens: 5, completion_tokens: 2, total_tokens: 7 },
+      })
+
+      const replay = yield* compileRequest(LLM.request({ model: selected, messages: [response.message] }))
+      expect(replay.body.messages).toEqual([{ role: "assistant", content: "Hello", reasoning_content: "thinking" }])
+    }),
+  )
+
   it.effect("parses and replays a configured custom reasoning field", () =>
     Effect.gen(function* () {
       const custom = LanguageModel.update(model, { compatibility: { reasoningField: "vendor_reasoning" } })

packages/ai/test/provider/openai-compatible-chat.test.ts

@@ -437,7 +437,7 @@ describe("OpenAI-compatible Chat route", () => {
         outputTokens: undefined,
         totalTokens: undefined,
         providerMetadata: {
-          openai: {
+          deepseek: {
             prompt_tokens: null,
             completion_tokens: null,
             total_tokens: null,

packages/ai/test/provider/openai-compatible-responses.test.ts

@@ -195,19 +195,19 @@ describe("Open Responses-compatible route", () => {
           model,
           messages: [
             Message.assistant([
-              { type: "text", text: "Kept.", providerMetadata: { openresponses: { itemId: "history_1" } } },
+              { type: "text", text: "Kept.", providerMetadata: { "openai-compatible": { itemId: "history_1" } } },
               {
                 type: "text",
                 text: "Long.",
-                providerMetadata: { openresponses: { itemId: `history_${"a".repeat(64)}` } },
+                providerMetadata: { "openai-compatible": { itemId: `history_${"a".repeat(64)}` } },
               },
               {
                 type: "text",
                 text: "Opaque.",
-                providerMetadata: { openresponses: { itemId: "provider_value/with+symbols" } },
+                providerMetadata: { "openai-compatible": { itemId: "provider_value/with+symbols" } },
               },
-              { type: "text", text: "No suffix.", providerMetadata: { openresponses: { itemId: "msg_" } } },
-              { type: "text", text: "No prefix.", providerMetadata: { openresponses: { itemId: "_item" } } },
+              { type: "text", text: "No suffix.", providerMetadata: { "openai-compatible": { itemId: "msg_" } } },
+              { type: "text", text: "No prefix.", providerMetadata: { "openai-compatible": { itemId: "_item" } } },
             ]),
           ],
         }),
@@ -267,7 +267,7 @@ describe("Open Responses-compatible route", () => {
               name: item.type,
               result: { type: "json", value: item },
               providerExecuted: true,
-              providerMetadata: { openresponses: { itemId: item.id } },
+              providerMetadata: { example: { itemId: item.id } },
             }),
           ),
         }),
@@ -302,7 +302,7 @@ describe("Open Responses-compatible route", () => {
       )
 
       expect(response.message.content).toEqual([
-        { type: "text", text: "Indexed", providerMetadata: { openresponses: { itemId: "msg_1" } } },
+        { type: "text", text: "Indexed", providerMetadata: { "openai-compatible": { itemId: "msg_1" } } },
       ])
     }),
   )
@@ -368,7 +368,7 @@ describe("Open Responses-compatible route", () => {
                 ),
               )
 
-              const metadata = { openresponses: { itemId: routing.id } }
+              const metadata = { "openai-compatible": { itemId: routing.id } }
               if (fixture.item.type === "function_call") {
                 expect(response.toolCalls).toEqual([
                   expect.objectContaining({
@@ -386,7 +386,7 @@ describe("Open Responses-compatible route", () => {
                     type: "reasoning",
                     text: "Preserved",
                     providerMetadata: {
-                      openresponses: { itemId: routing.id, reasoningEncryptedContent: "encrypted-state" },
+                      "openai-compatible": { itemId: routing.id, reasoningEncryptedContent: "encrypted-state" },
                     },
                   },
                 ])
@@ -438,22 +438,26 @@ describe("Open Responses-compatible route", () => {
             {
               type: "reasoning",
               text: "First.",
-              providerMetadata: { openresponses: { itemId: routing.id } },
+              providerMetadata: { "openai-compatible": { itemId: routing.id } },
             },
             {
               type: "reasoning",
               text: "Second.",
-              providerMetadata: { openresponses: { itemId: routing.id, reasoningEncryptedContent: "final-state" } },
+              providerMetadata: {
+                "openai-compatible": { itemId: routing.id, reasoningEncryptedContent: "final-state" },
+              },
             },
           ])
           expect(response.events.filter(LLMEvent.is.reasoningEnd)).toEqual([
             expect.objectContaining({
               id: `${routing.id}:0`,
-              providerMetadata: { openresponses: { itemId: routing.id } },
+              providerMetadata: { "openai-compatible": { itemId: routing.id } },
             }),
             expect.objectContaining({
               id: `${routing.id}:1`,
-              providerMetadata: { openresponses: { itemId: routing.id, reasoningEncryptedContent: "final-state" } },
+              providerMetadata: {
+                "openai-compatible": { itemId: routing.id, reasoningEncryptedContent: "final-state" },
+              },
             }),
           ])
         }),
@@ -483,7 +487,7 @@ describe("Open Responses-compatible route", () => {
             id: "call_1",
             name: "lookup",
             input: { query: "complete" },
-            providerMetadata: { openresponses: { itemId: "" } },
+            providerMetadata: { "openai-compatible": { itemId: "" } },
           }),
         ])
       }),
@@ -510,7 +514,7 @@ describe("Open Responses-compatible route", () => {
         )
 
         expect(response.message.content).toEqual([
-          { type: "text", text: "Before after", providerMetadata: { openresponses: { itemId: "msg_1" } } },
+          { type: "text", text: "Before after", providerMetadata: { "openai-compatible": { itemId: "msg_1" } } },
         ])
         expect(response.events.map((event) => event.type)).toEqual([
           "step-start",
@@ -662,7 +666,7 @@ describe("Open Responses-compatible route", () => {
 
       expect(response.events.find(LLMEvent.is.toolCall)).toMatchObject({
         input: { query: "complete" },
-        providerMetadata: { openresponses: { itemId: "item_1" } },
+        providerMetadata: { example: { itemId: "item_1" } },
       })
     }),
   )
@@ -694,7 +698,7 @@ describe("Open Responses-compatible route", () => {
       )
 
       expect(response.events.find((event) => event.type === "reasoning-end")).toMatchObject({
-        providerMetadata: { openresponses: { itemId: "rs_raw", reasoningEncryptedContent: "raw-state" } },
+        providerMetadata: { "openai-compatible": { itemId: "rs_raw", reasoningEncryptedContent: "raw-state" } },
       })
     }),
   )
@@ -743,7 +747,7 @@ describe("Open Responses-compatible route", () => {
             Message.assistant({
               type: "text",
               text: "Unclassified.",
-              providerMetadata: { openresponses: { phase: null } },
+              providerMetadata: { "openai-compatible": { phase: null } },
             }),
           ],
         }),
@@ -802,7 +806,7 @@ describe("Open Responses-compatible route", () => {
         {
           type: "text",
           text: "I can't help with that.",
-          providerMetadata: { openresponses: { itemId: "msg_refusal" } },
+          providerMetadata: { example: { itemId: "msg_refusal" } },
         },
       ])
 
@@ -891,7 +895,7 @@ describe("Open Responses-compatible route", () => {
 
       expect(response.toolCalls).toEqual([])
       expect(response.events.find(LLMEvent.is.finish)).toMatchObject({
-        providerMetadata: { openresponses: { responseId: "resp_1" } },
+        providerMetadata: { example: { responseId: "resp_1" } },
       })
     }),
   )

packages/ai/test/provider/openrouter.test.ts

@@ -295,7 +295,7 @@ describe("OpenRouter", () => {
               {
                 type: "reasoning",
                 text: "Thinking",
-                providerMetadata: { openai: { reasoningField: "reasoning", reasoningDetails: details } },
+                providerMetadata: { openrouter: { reasoningField: "reasoning", reasoningDetails: details } },
               },
             ]),
           ],
@@ -328,7 +328,7 @@ describe("OpenRouter", () => {
             Message.assistant({
               type: "reasoning",
               text: "Thinking",
-              providerMetadata: { openai: { reasoningField: "reasoning", reasoningDetails: details } },
+              providerMetadata: { openrouter: { reasoningField: "reasoning", reasoningDetails: details } },
             }),
           ],
         }),
@@ -354,7 +354,7 @@ describe("OpenRouter", () => {
             Message.assistant({
               type: "reasoning",
               text: "AB",
-              providerMetadata: { openai: { reasoningField: "reasoning", reasoningDetails: details } },
+              providerMetadata: { openrouter: { reasoningField: "reasoning", reasoningDetails: details } },
             }),
           ],
         }),

packages/ai/test/route.test.ts

@@ -40,4 +40,13 @@ describe("Route.with", () => {
       "x-patch": "patch",
     })
   })
+
+  test("assigns metadata ownership to a replacement provider and preserves explicit overrides", () => {
+    const route = OpenAIChat.route.with({ provider: "azure" })
+    const overridden = route.with({ providerMetadataKey: "custom-azure" }).with({ headers: { "x-test": "value" } })
+
+    expect(route.providerMetadataKey).toBe("azure")
+    expect(overridden.providerMetadataKey).toBe("custom-azure")
+    expect(overridden.defaults).not.toHaveProperty("providerMetadataKey")
+  })
 })

packages/app/.gitignore

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

packages/app/README.md

@@ -31,7 +31,7 @@ Your app is ready to be deployed!
 
 ## E2E Testing
 
-Playwright starts the Vite dev server automatically via `webServer`, and UI tests expect an opencode backend at `localhost:4096` by default.
+Locally, Playwright starts the Vite dev server automatically via `webServer`, or reuses one already running at the configured address. The browser suite uses isolated API fixtures rather than a live opencode backend.
 
 ```bash
 bunx playwright install chromium
@@ -39,11 +39,35 @@ bun run test:e2e:local
 bun run test:e2e:local -- --grep "settings"
 ```
 
+CI builds the app once and runs the same suite against Vite preview, serving production assets from `dist`. Managed built runs never reuse an existing server, so a running dev server cannot silently replace the production build. To run this mode locally:
+
+```bash
+bun run test:e2e:built
+bun run test:e2e:built -- --grep "settings"
+```
+
+To test an already-running dev server without starting or building a server:
+
+```bash
+PLAYWRIGHT_BASE_URL=http://127.0.0.1:4444 bun run test:e2e
+```
+
+For an already-running production build, also set `PLAYWRIGHT_BUILD=1` so the fixture API uses the app's origin:
+
+```bash
+PLAYWRIGHT_BUILD=1 PLAYWRIGHT_BASE_URL=http://127.0.0.1:4444 bun run test:e2e
+```
+
+External targets must use HTTP because fixture URLs use HTTP. `PLAYWRIGHT_BASE_URL` skips server startup and building in either mode.
+
+Compiled CLI startup and service lifecycle coverage runs separately in CI via `packages/cli/script/service-smoke.ts`.
+
 Environment options:
 
-- `PLAYWRIGHT_SERVER_HOST` / `PLAYWRIGHT_SERVER_PORT` (backend address, default: `localhost:4096`)
-- `PLAYWRIGHT_PORT` (Vite dev server port, default: `3000`)
-- `PLAYWRIGHT_BASE_URL` (override base URL, default: `http://localhost:<PLAYWRIGHT_PORT>`)
+- `PLAYWRIGHT_BUILD=1` (build and preview locally; always enabled when `CI` is set)
+- `PLAYWRIGHT_SERVER_HOST` / `PLAYWRIGHT_SERVER_PORT` (dev fixture API address, default: `127.0.0.1:4096`; built runs use the app's origin, matching production)
+- `PLAYWRIGHT_PORT` (managed dev or preview server port, default: `3000`)
+- `PLAYWRIGHT_BASE_URL` (use an externally managed app instead of starting a server; otherwise defaults to `http://127.0.0.1:<PLAYWRIGHT_PORT>`)
 
 ## Deployment
 

packages/app/component-tests/composer.spec.ts

@@ -0,0 +1,26 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+// Moved from packages/app/e2e/regression/prompt-thinking-level.spec.ts
+story("shows the thinking level control while relevant", async ({ mount, page }) => {
+  const component = await mount("opencode-composer-flow--model-and-variant")
+  const composer = component.locator('[data-component="composer"]')
+  const input = composer.locator('[data-component="composer-editor"]')
+  const control = composer.getByRole("button", { name: "Choose model variant" })
+
+  await page.mouse.move(0, 0)
+  await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
+  await expect(control).toBeVisible()
+
+  await control.click()
+  const high = page.getByRole("menuitemradio", { name: "high" })
+  await expect(high).toBeVisible()
+  await page.mouse.move(0, 0)
+  await expect(control).toBeVisible()
+  await expect(high).toBeVisible()
+  await high.click()
+
+  await input.focus()
+  await expect(control).toBeVisible()
+  await input.blur()
+  await expect(control).toBeVisible()
+})

packages/app/e2e/performance/README.md

@@ -44,6 +44,7 @@ The suite contains:
 - single-session tab close timing through stable home restoration
 - cached session repaint and mutation tracing
 - streaming timeline throughput, RAF-gap, long-task, geometry, and remount diagnostics
+- retained renderer heap with a large model catalog across repeated session navigation
 
 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.
 
@@ -78,6 +79,17 @@ Benchmarks do not assert machine-dependent performance budgets. Streaming proces
 
 Committed smoke and regression tests continue to own correctness coverage for pagination, tab paint, context resize, collapse state, and composer spacing.
 
+## Retained renderer memory
+
+Run the catalog workload against the production app bundle:
+
+```sh
+bunx playwright test --config e2e/performance/playwright.config.ts \
+  timeline/provider-memory-benchmark.spec.ts --repeat-each=3
+```
+
+`PROVIDER_MEMORY_MODELS` defaults to 1,200 and `PROVIDER_MEMORY_SWITCHES` defaults to 10. Each sample records Chromium's `Runtime.getHeapUsage` and `Memory.getDOMCounters` after an explicit garbage collection. This measures retained state, not allocation peaks or normal GC timing. It does not include worker heaps, the Electron main/GPU processes, or the OpenCode server, and must not be reported as total desktop RAM. Use identical model counts and navigation sequences for before/after comparisons.
+
 ## Chrome traces
 
 Set `OPENCODE_PERFORMANCE_TRACE_DIR` to emit a standard Chrome DevTools trace for every benchmark page automatically:

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

@@ -1,7 +1,7 @@
 import config from "../../playwright.config"
 
 const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
-process.env.PLAYWRIGHT_SERVER_PORT = String(port)
+process.env.PLAYWRIGHT_SERVER_PORT = new URL(process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${port}`).port || "80"
 process.env.OPENCODE_PERFORMANCE_RUN_ID ??= `${new Date().toISOString().replace(/[:.]/g, "-")}-${process.pid}`
 
 export default {
@@ -12,9 +12,11 @@ export default {
   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,
-  },
+  webServer: config.webServer
+    ? {
+        ...config.webServer,
+        command: `bun run build && bun run serve -- --host 0.0.0.0 --port ${port} --strictPort`,
+        reuseExistingServer: false,
+      }
+    : undefined,
 }

packages/app/e2e/performance/timeline/provider-memory-benchmark.spec.ts

@@ -0,0 +1,98 @@
+import { benchmark, expect } from "../benchmark"
+import { mockOpenCodeServer } from "../../utils/mock-server"
+import { expectSessionTitle } from "../../utils/waits"
+import { fixture, pageMessages } from "./session-timeline-stress.fixture"
+import { installStressSessionTabs, installTimelineSettings, stressSessionHref } from "./timeline-test-helpers"
+import { waitForStableTimeline } from "./session-tab-switch-probe"
+import type { CatalogUpdated } from "@opencode-ai/client/promise"
+
+benchmark("measures retained renderer memory with a large model catalog", async ({ page, report }) => {
+  benchmark.setTimeout(120_000)
+  const count = Number(process.env.PROVIDER_MEMORY_MODELS ?? 1200)
+  const switches = Number(process.env.PROVIDER_MEMORY_SWITCHES ?? 10)
+  const provider = fixture.provider.all[0]
+  const selected = { ...provider.models["claude-opus-4-6"] }
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    sessions: fixture.sessions,
+    pageMessages,
+    provider: {
+      ...fixture.provider,
+      all: [
+        {
+          ...provider,
+          models: {
+            [selected.id]: selected,
+            ...Object.fromEntries(
+              Array.from({ length: count - 1 }, (_, index) => {
+                const id = `catalog-model-${index}`
+                return [
+                  id,
+                  {
+                    id,
+                    name: `Catalog model ${index}`,
+                    cost: { input: 1, output: 2 },
+                    limit: { context: 200_000, output: 8192 },
+                    variants: { high: { reasoningEffort: "high" } },
+                  },
+                ]
+              }),
+            ),
+          },
+        },
+      ],
+    },
+  })
+  await installTimelineSettings(page)
+  await installStressSessionTabs(page)
+  await page.goto(stressSessionHref(fixture.sourceID))
+  await expectSessionTitle(page, fixture.expected.sourceTitle)
+  await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  await expect(page.locator('[data-action="composer-model"]')).toContainText("Claude Opus 4.6")
+  const cdp = await page.context().newCDPSession(page)
+  const samples = []
+  for (let index = 0; index <= switches; index++) {
+    if (index > 0) {
+      const target = index % 2 === 1
+      const id = target ? fixture.targetID : fixture.sourceID
+      await page.locator(`[data-slot="titlebar-tabs"] a[href="${stressSessionHref(id)}"]`).click()
+      await expectSessionTitle(page, target ? fixture.expected.targetTitle : fixture.expected.sourceTitle)
+      await waitForStableTimeline(
+        page,
+        (target ? fixture.expected.targetMessageIDs : fixture.expected.sourceMessageIDs).at(-1)!,
+      )
+      await expect(page.locator('[data-action="composer-model"]')).toContainText("Claude Opus 4.6")
+    }
+    // GC is an explicit retained-heap measurement, not an application optimization or readiness wait.
+    await cdp.send("HeapProfiler.collectGarbage")
+    samples.push({
+      switches: index,
+      heap: await cdp.send("Runtime.getHeapUsage"),
+      dom: await cdp.send("Memory.getDOMCounters"),
+    })
+  }
+  expect(samples).toHaveLength(switches + 1)
+  expect(samples.every((sample) => sample.heap.usedSize > 0)).toBe(true)
+  selected.name = "Updated catalog model"
+  await page.evaluate(
+    (event) => {
+      const host = window as Window & { __mockServerStream?: { push: (events: CatalogUpdated[]) => void } }
+      if (!host.__mockServerStream) throw new Error("Missing fixture event stream")
+      host.__mockServerStream.push([event])
+    },
+    {
+      id: "evt_catalog_refresh",
+      created: Date.now(),
+      type: "catalog.updated",
+      location: { directory: fixture.directory },
+      data: {},
+    } satisfies CatalogUpdated,
+  )
+  await expect(page.locator('[data-action="composer-model"]')).toContainText(selected.name)
+  report(
+    { samples },
+    { models: count, switches, gc: "explicit", scope: "renderer main isolate; not total desktop RAM" },
+  )
+  await cdp.detach()
+})

packages/app/e2e/regression/cross-server-tab-close.spec.ts

@@ -3,7 +3,7 @@ import { base64Encode } from "@opencode-ai/util/encode"
 import { currentSession } from "../utils/mock-server"
 import { installSseTransport } from "../utils/sse-transport"
 
-const serverA = "http://127.0.0.1:4096"
+const serverA = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const serverB = "http://127.0.0.1:4097"
 const sessionA = session("ses_server_a", "C:/server-a", "Server A session")
 const sessionB = session("ses_server_b", "/home/server-b", "Server B session")
@@ -12,17 +12,17 @@ test("closing the active server's last tab opens the remaining server tab", asyn
   const requests: string[] = []
   await mockServers(page, requests)
   await page.addInitScript(
-    ({ serverB, sessionA, sessionB }) => {
+    ({ serverA, serverB, sessionA, sessionB }) => {
       localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
       localStorage.setItem(
         "opencode.window.browser.dat:tabs",
         JSON.stringify([
-          { type: "session", server: "http://127.0.0.1:4096", sessionId: sessionA },
+          { type: "session", server: serverA, sessionId: sessionA },
           { type: "session", server: serverB, sessionId: sessionB },
         ]),
       )
     },
-    { serverB, sessionA: sessionA.id, sessionB: sessionB.id },
+    { serverA, serverB, sessionA: sessionA.id, sessionB: sessionB.id },
   )
 
   const hrefA = `/server/${base64Encode(serverA)}/session/${sessionA.id}`
@@ -55,7 +55,7 @@ function session(id: string, directory: string, title: string) {
 async function mockServers(page: Page, requests: string[]) {
   await installSseTransport(page, { server: serverA })
   await installSseTransport(page, { server: serverB })
-  await page.route("**/*", async (route) => {
+  await page.route("**/api/**", async (route) => {
     const url = new URL(route.request().url())
     if (url.origin !== serverA && url.origin !== serverB) return route.fallback()
     requests.push(url.toString())

packages/app/e2e/regression/project-extensions.spec.ts

@@ -0,0 +1,103 @@
+import { expect, test } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const directory = "C:/Projects/extensions-demo"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+const session = {
+  id: "ses_project_extensions",
+  title: "Existing session",
+  directory,
+  projectID: "proj_extensions_demo",
+  time: { created: 1700000000000, updated: 1700000000000 },
+}
+
+test.use({ viewport: { width: 1440, height: 1000 }, colorScheme: "dark" })
+
+test("project Extensions stays inside settings while plugins load", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: session.projectID,
+      canonical: directory,
+      name: "Extensions demo",
+      vcs: "git",
+      time: session.time,
+      sandboxes: [],
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [session],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.addInitScript(
+    ({ server, sessionID, directory }) => {
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({ projects: { local: [{ worktree: directory, expanded: true }] } }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
+      )
+    },
+    { server, sessionID: session.id, directory },
+  )
+  const href = `/server/${base64Encode(server)}/session/${session.id}`
+  await page.goto(href)
+  await expect(page.getByRole("heading", { name: session.title, exact: true })).toBeVisible()
+  await page.keyboard.press("Control+,")
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Projects", exact: true }).click()
+  await settings.getByText("Extensions demo", { exact: true }).click()
+  const dialog = page.getByRole("dialog")
+  await expect(dialog.getByRole("textbox", { name: "Name", exact: true })).toBeFocused()
+
+  const globalPlugins = Promise.withResolvers<void>()
+  const projectPlugins = Promise.withResolvers<void>()
+  await page.route(
+    (url) => url.pathname === "/api/plugin",
+    async (route) => {
+      const project = new URL(route.request().url()).searchParams.get("location[directory]")
+      await (project ? projectPlugins : globalPlugins).promise
+      await route.fulfill({
+        json: {
+          location: project ? { directory: project } : {},
+          data: (project ? ["shared-plugin", "project-plugin"] : ["shared-plugin"]).map((id) => ({
+            id,
+            source: { type: "package", package: id },
+            status: "active",
+            tui: false,
+          })),
+        },
+      })
+    },
+  )
+  const requested = page.waitForRequest((request) => {
+    const url = new URL(request.url())
+    return url.pathname === "/api/plugin" && url.searchParams.get("location[directory]") === directory
+  })
+  await dialog.getByRole("tab", { name: "Extensions", exact: true }).click()
+  await requested
+  await expect(page).toHaveURL(href)
+  await expect(dialog.getByRole("heading", { name: "Extensions", exact: true })).toBeVisible()
+  await expect(settings).toBeVisible()
+  await expect(page.getByRole("heading", { name: session.title, exact: true, includeHidden: true })).toBeHidden()
+  await dialog.getByRole("tab", { name: "Plugins", exact: true }).click()
+  await expect(dialog.getByRole("tab", { name: "Plugins", exact: true })).toHaveAttribute("aria-selected", "true")
+
+  globalPlugins.resolve()
+  await dialog.getByRole("tab", { name: "Scripts", exact: true }).click()
+  await expect(dialog.getByRole("heading", { name: "Scripts", exact: true })).toBeVisible()
+  await dialog.getByRole("tab", { name: "Extensions", exact: true }).click()
+  projectPlugins.resolve()
+  await dialog.getByRole("tab", { name: "Plugins", exact: true }).click()
+  await expect(dialog.getByText("project-plugin", { exact: true })).toBeVisible()
+  await dialog.getByRole("button", { name: "Shared with all projects 1", exact: true }).click()
+  await expect(dialog.getByText("shared-plugin", { exact: true })).toBeVisible()
+  await expect(page).toHaveURL(href)
+
+  await page.keyboard.press("Escape")
+  await expect(dialog).toBeHidden()
+  await expect(settings.getByRole("tab", { name: "Projects", exact: true })).toHaveAttribute("aria-selected", "true")
+  await expect(page.getByRole("heading", { name: session.title, exact: true, includeHidden: true })).toBeHidden()
+})

packages/app/e2e/regression/remote-session-settings.spec.ts

@@ -3,7 +3,7 @@ import { expect, test, type Page, type Route } from "@playwright/test"
 import { installSseTransport } from "../utils/sse-transport"
 import { currentSession } from "../utils/mock-server"
 
-const serverA = `http://127.0.0.1:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+const serverA = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const serverB = "http://127.0.0.1:4097"
 const directoryA = "C:/server-a"
 const directoryB = "/home/server-b"
@@ -308,7 +308,7 @@ async function mockServers(
   permissionResponses: PermissionResponse[] = [],
   options: MockServerOptions = {},
 ) {
-  await page.route("**/*", async (route) => {
+  await page.route("**/api/**", async (route) => {
     const url = new URL(route.request().url())
     if (url.origin !== serverA && url.origin !== serverB) return route.fallback()
     const remote = url.origin === serverB

packages/app/e2e/regression/remote-tab-busy.spec.ts

@@ -2,7 +2,7 @@ import { expect, test, type Page, type Route } from "@playwright/test"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { currentSession } from "../utils/mock-server"
 
-const serverA = "http://127.0.0.1:4096"
+const serverA = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const serverB = "http://127.0.0.1:4097"
 const sessionA = session("ses_server_a", "C:/server-a", "Server A session")
 const sessionB = session("ses_server_b", "/home/server-b", "Server B session")
@@ -51,7 +51,7 @@ function session(id: string, directory: string, title: string) {
 }
 
 async function mockServers(page: Page) {
-  await page.route("**/*", async (route) => {
+  await page.route("**/api/**", async (route) => {
     const url = new URL(route.request().url())
     if (url.origin !== serverA && url.origin !== serverB) return route.fallback()
     const current = url.origin === serverA ? sessionA : sessionB

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

@@ -12,54 +12,6 @@ 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()
-  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on line 2")
-})
-
-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()
-  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on line 1")
-})
-
-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)
-
-  await start.dragTo(end)
-
-  await expect(review.getByRole("textbox")).toBeVisible()
-  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on lines 1-3")
-})
-
-test("shows a comment button when a diff line is hovered", async ({ page }) => {
-  const review = page.locator('[data-component="session-review"]')
-  const line = review.getByText("export const first = 1", { exact: true })
-  await expectAppVisible(line)
-
-  const comment = review.getByRole("button", { name: "Comment", exact: true, includeHidden: true })
-  await expect(comment).toHaveCount(1)
-  await line.dispatchEvent("pointermove", { pointerType: "mouse", bubbles: true, composed: true })
-  await expect(comment).toBeVisible()
-  await expect(comment).toHaveCSS("pointer-events", "auto")
-  await comment.dispatchEvent("click")
-  await expect(review.getByRole("textbox")).toBeVisible()
-  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on line 1")
-})
-
 test("stages a submitted line comment in the prompt context", async ({ page }) => {
   page.on("request", (request) => {
     expect.soft(request.method(), `unexpected ${request.method()} ${new URL(request.url()).pathname}`).toBe("GET")

packages/app/e2e/regression/session-queue.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, type Page } from "@playwright/test"
-import type { OpenCodeEvent } from "@opencode-ai/client/promise"
+import type { OpenCodeEvent, SessionMessageInfo } from "@opencode-ai/client/promise"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { mockOpenCodeServer } from "../utils/mock-server"
 import { expectAppVisible } from "../utils/waits"
@@ -18,7 +18,7 @@ type InboxRow = {
   delivery: "steer" | "queue"
 }
 
-function createQueueMock(seed: string[]) {
+function createQueueMock(seed: string[], messages: SessionMessageInfo[] = []) {
   const rows: InboxRow[] = seed.map((text, index) => ({
     id: `inb_seed_${index + 1}`,
     sessionID,
@@ -32,13 +32,16 @@ function createQueueMock(seed: string[]) {
   const changes: { inboxID: string; action: "cancel" | "steer" }[] = []
   const log: string[] = []
   let sequence = 0
-  const emit = (type: OpenCodeEvent["type"], data: OpenCodeEvent["data"]) => {
+  const emit = <Type extends OpenCodeEvent["type"]>(
+    type: Type,
+    data: Extract<OpenCodeEvent, { type: Type }>["data"],
+  ) => {
     sequence += 1
     events.push({
       id: `evt_queue_${sequence}`,
       type,
       created: Date.now(),
-      durable: { aggregateID: sessionID, seq: sequence, version: 1 },
+      durable: { aggregateID: sessionID, seq: sequence, version: type === "session.tool.success" ? 2 : 1 },
       data,
     } as OpenCodeEvent)
   }
@@ -47,6 +50,8 @@ function createQueueMock(seed: string[]) {
     prompts,
     changes,
     log,
+    messages,
+    emit,
     events: () => events.splice(0),
     onPrompt: (input: { sessionID: string; body: Record<string, unknown> }) => {
       prompts.push(input.body)
@@ -126,10 +131,11 @@ async function openSession(page: Page, mock: ReturnType<typeof createQueueMock>,
         directory,
         title: "Session queue regression",
         version: "dev",
+        model: { id: "queue-model", providerID: "opencode" },
         time: { created: 1700000000000, updated: 1700000000000 },
       },
     ],
-    pageMessages: () => ({ items: [] }),
+    pageMessages: () => ({ items: mock.messages }),
     sessionStatus: () => ({ [sessionID]: { type: "running" } }),
     inbox: () => mock.rows.map((row) => ({ ...row, payload: { ...row.payload } })),
     onPrompt: mock.onPrompt,
@@ -201,12 +207,15 @@ test("editing restores the existing draft and replaces only the original queue p
   await view.input.fill("my in-progress draft")
   await original.click()
   await expect(view.input).toHaveText("tighten the error copy")
+  await expect(view.input).toBeFocused()
   await view.input.press("Escape")
   await expect(view.input).toHaveText("my in-progress draft")
 
   await original.click()
   await expect(view.input).toHaveText("tighten the error copy")
+  await expect(view.input).toBeFocused()
   await view.input.fill("tighten the error copy and add a retry hint")
+  await expect(view.input).toHaveText("tighten the error copy and add a retry hint")
   await view.input.press("Enter")
 
   await expect(view.rows.locator('[data-action="session-queue-edit"]')).toHaveText([
@@ -224,3 +233,130 @@ test("editing restores the existing draft and replaces only the original queue p
   expect(mock.changes.map((change) => change.action)).toEqual(["cancel", "cancel", "cancel"])
   expect(mock.log[0]).toBe("prompt:queue")
 })
+
+for (const delivery of ["steer", "queue"] as const) {
+  test(`keeps finished tools above a pending ${delivery === "queue" ? "queue-to-steer" : "steer"} follow-up`, async ({
+    page,
+  }, testInfo) => {
+    const model = { id: "queue-model", providerID: "opencode" }
+    const userID = "msg_queue_initial_user"
+    const assistantID = "msg_queue_continued_assistant"
+    const followUp = "U2: Also check the retry path."
+    const mock = createQueueMock(
+      [],
+      [
+        { id: userID, type: "user", text: "U1: Inspect the queue ordering.", time: { created: 1700000000000 } },
+        {
+          id: "msg_queue_initial_assistant",
+          type: "assistant",
+          agent: "build",
+          model,
+          content: [{ type: "text", text: "A1: I will inspect the current implementation." }],
+          finish: "tool-calls",
+          time: { created: 1700000000001, completed: 1700000000002 },
+        },
+      ],
+    )
+    const view = await openSession(page, mock, delivery)
+    const transcript = page.locator("[data-timeline-virtual-content]")
+    const thinking = transcript.locator('[data-timeline-row="Thinking"]')
+    await expect(transcript.getByText("A1: I will inspect the current implementation.", { exact: true })).toBeVisible()
+    await expect(thinking).toBeVisible()
+    await expect(view.input).toBeEditable()
+    await view.input.fill(followUp)
+    await view.input.press("Enter")
+    await expect.poll(() => mock.rows.map((row) => row.delivery)).toEqual([delivery])
+    await expect(view.input).toHaveText("")
+
+    const inboxID = mock.rows[0].id
+    const pending = transcript.locator(`[data-timeline-row="UserMessage"][data-message-id="${inboxID}"]`)
+    if (delivery === "queue") {
+      const queued = view.rows.filter({ hasText: followUp })
+      await expect(queued).toBeVisible()
+      await expect(pending).toHaveCount(0)
+      await queued.hover()
+      await queued.getByRole("button", { name: "Steer", exact: true }).click()
+      await expect.poll(() => mock.changes).toEqual([{ inboxID, action: "steer" }])
+    }
+    await expect(view.rows).toHaveCount(0)
+    await expect(pending).toContainText(followUp)
+
+    // The next assistant step still belongs to U1: U2 has been admitted, not delivered.
+    mock.emit("session.step.started", { sessionID, assistantMessageID: assistantID, agent: "build", model })
+    for (const tool of [
+      { id: "tool_queue_read", name: "read", input: { path: "src/queue.ts" } },
+      { id: "tool_queue_grep", name: "grep", input: { pattern: "retry", path: "src" } },
+    ]) {
+      const ref = { sessionID, assistantMessageID: assistantID, id: tool.id }
+      mock.emit("session.tool.input.started", { ...ref, name: tool.name })
+      mock.emit("session.tool.input.ended", { ...ref, text: JSON.stringify(tool.input) })
+      mock.emit("session.tool.called", { ...ref, input: tool.input, executed: true })
+      mock.emit("session.tool.success", {
+        ...ref,
+        content: [{ type: "text", text: "Inspection complete." }],
+        executed: true,
+      })
+    }
+    mock.emit("session.step.ended", {
+      sessionID,
+      assistantMessageID: assistantID,
+      finish: "tool-calls",
+      cost: 0,
+      tokens: { input: 100, output: 20, reasoning: 0, cache: { read: 0, write: 0 } },
+    })
+    const tools = page.locator('[data-timeline-part-ids="tool_queue_read,tool_queue_grep"]')
+    await expect(tools).toBeVisible()
+    await expect(tools).toContainText(/Used\s*Read, Grep/)
+    await expect(tools.locator('[data-component="tag"]')).toHaveText("2")
+    await expect(thinking).toBeVisible()
+    await expect(pending).toBeVisible()
+    expect(mock.rows.map((row) => ({ id: row.id, delivery: row.delivery }))).toEqual([
+      { id: inboxID, delivery: "steer" },
+    ])
+    await transcript.screenshot({ path: testInfo.outputPath("pending-steer.png") })
+
+    // Soft assertions let delivery run too, even when the pending ordering regresses.
+    await expect
+      .soft(tools.or(thinking).or(pending))
+      .toHaveText([/Used\s*Read, Grep/, /Thinking/, /U2: Also check the retry path\./])
+    await expect
+      .soft(transcript.locator('[data-timeline-row="AssistantPart"]').filter({ has: tools }))
+      .toHaveAttribute("data-message-id", userID)
+    await expect
+      .configure({ soft: true })
+      .poll(async () => {
+        const boxes = await Promise.all([tools.boundingBox(), thinking.boundingBox(), pending.boundingBox()])
+        return (
+          boxes.every((box) => box !== null) &&
+          boxes[0]!.y + boxes[0]!.height <= boxes[1]!.y &&
+          boxes[1]!.y + boxes[1]!.height <= boxes[2]!.y
+        )
+      })
+      .toBe(true)
+
+    mock.rows.splice(0, 1)
+    mock.emit("session.inbox.delivered", { sessionID, inboxID })
+    await expect(thinking).toHaveAttribute("data-message-id", inboxID)
+    await expect(pending).toHaveCount(1)
+    await expect(transcript.locator('[data-timeline-row="UserMessage"]')).toHaveCount(2)
+    await expect(transcript.locator('[data-timeline-row="AssistantPart"]').filter({ has: tools })).toHaveAttribute(
+      "data-message-id",
+      userID,
+    )
+
+    const later = { sessionID, assistantMessageID: "msg_queue_follow_up_assistant" }
+    mock.emit("session.step.started", { ...later, agent: "build", model })
+    mock.emit("session.text.started", { ...later, ordinal: 0 })
+    mock.emit("session.text.ended", { ...later, ordinal: 0, text: "A3: Now checking the retry path for U2." })
+    const response = transcript
+      .locator('[data-timeline-row="AssistantPart"]')
+      .filter({ hasText: "A3: Now checking the retry path for U2." })
+    await expect(response).toHaveAttribute("data-message-id", inboxID)
+    await expect(tools.or(pending).or(response).or(thinking)).toHaveText([
+      /Used\s*Read, Grep/,
+      /U2: Also check the retry path\./,
+      /A3: Now checking the retry path for U2\./,
+      /Thinking/,
+    ])
+  })
+}

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

@@ -1,16 +1,43 @@
 import { expect, test } from "@playwright/test"
-import { assistantMessage, setupTimeline, shell, userMessage } from "../performance/timeline-stability/fixture"
+import {
+  assistantMessage,
+  setupTimeline,
+  shell,
+  textPart,
+  userMessage,
+} from "../performance/timeline-stability/fixture"
 
 test("space activates a focused timeline button instead of scrolling", async ({ page }) => {
   const shellID = "prt_space_button_shell"
   await setupTimeline(page, {
-    messages: [userMessage(), assistantMessage([shell(shellID, "completed", lines(5))])],
+    messages: [
+      userMessage(),
+      assistantMessage([
+        shell(shellID, "completed", lines(5)),
+        textPart(
+          "prt_space_following",
+          "Following content leaves room to focus the command away from the bottom. ".repeat(40),
+        ),
+      ]),
+    ],
     settings: { shellToolPartsExpanded: false },
     reducedMotion: true,
+    seedHistory: true,
   })
   const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
   const trigger = page.getByRole("button", { name: "Used Shell" })
+  await expect
+    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight))
+    .toBeGreaterThan(300)
+  await trigger.scrollIntoViewIfNeeded()
+  await scroller.hover()
+  await page.mouse.wheel(0, -100)
+  await expect
+    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
+    .toBeGreaterThan(50)
+  await expect(trigger).toBeInViewport()
   await trigger.focus()
+  await expect(trigger).toBeFocused()
   const before = await scroller.evaluate((element) => element.scrollTop)
   await trigger.press("Space")
   await expect(trigger).toHaveAttribute("aria-expanded", "true")

packages/app/e2e/regression/session-timeline-file-projection.spec.ts

@@ -8,21 +8,6 @@ import {
   userText,
 } from "../performance/timeline-stability/fixture"
 
-test("renders completed write content", async ({ page }) => {
-  const id = "prt_file_projection_write"
-  await setupTimeline(page, {
-    messages: [
-      userMessage(),
-      assistantMessage([
-        toolPart(id, "write", "completed", { path: "src/write.ts", content: "export const written = true\n" }),
-      ]),
-    ],
-    settings: { editToolPartsExpanded: true },
-  })
-
-  await expect(page.locator(`[data-timeline-part-id="${id}"] [data-component="write-content"]`)).toBeVisible()
-})
-
 test("renders a completed single-file patch", async ({ page }) => {
   const id = "prt_file_projection_single_patch"
   await setupTimeline(page, {

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

@@ -1,53 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { assistantMessage, setupTimeline, toolPart, userMessage } from "../performance/timeline-stability/fixture"
-import { createTwoFilesPatch } from "diff"
-
-test("keeps patch file disclosures independent", async ({ page }) => {
-  const patchID = "prt_nested_patch"
-  const files = [patchFile("src/a.ts", "modified"), patchFile("src/b.ts", "added"), patchFile("src/old.ts", "deleted")]
-  await setupTimeline(page, {
-    messages: [
-      userMessage(),
-      assistantMessage([
-        toolPart(
-          patchID,
-          "patch",
-          "completed",
-          { patchText: "Update three files" },
-          { metadata: { files } },
-        ),
-      ]),
-    ],
-    settings: { editToolPartsExpanded: true },
-  })
-  const wrapper = page.locator(`[data-timeline-part-id="${patchID}"]`)
-  const modified = wrapper.locator('[data-scope="apply-patch"] [data-type="update"]')
-  const deleted = wrapper.locator('[data-scope="apply-patch"] [data-type="delete"]')
-  await expect(wrapper.locator('[data-scope="apply-patch"] [aria-expanded="false"]')).toHaveCount(3)
-  await deleted.getByRole("button").click()
-  await expect(deleted.getByRole("button")).toHaveAttribute("aria-expanded", "true")
-  await expect(modified.getByRole("button")).toHaveAttribute("aria-expanded", "false")
-  await modified.getByRole("button").click()
-  await expect(modified.getByRole("button")).toHaveAttribute("aria-expanded", "true")
-  await deleted.getByRole("button").click()
-  await expect(deleted.getByRole("button")).toHaveAttribute("aria-expanded", "false")
-  await expect(modified.getByRole("button")).toHaveAttribute("aria-expanded", "true")
-})
-
-function patchFile(file: string, status: "added" | "modified" | "deleted") {
-  const before = status === "added" ? "" : source(false)
-  const after = status === "deleted" ? "" : source(true)
-  return {
-    file,
-    status,
-    patch: createTwoFilesPatch(`a/${file}`, `b/${file}`, before, after),
-    additions: status === "deleted" ? 0 : 4,
-    deletions: status === "added" ? 0 : 3,
-  }
-}
-
-function source(changed: boolean) {
-  return Array.from({ length: 12 }, (_, index) => `export const value${index} = ${changed ? index + 1 : index}\n`).join(
-    "",
-  )
-}

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

@@ -122,6 +122,7 @@ test("transitions thinking and hidden reasoning through busy to idle", async ({
   await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
   await expect(page.getByText("Inspecting stability", { exact: true })).toBeVisible()
   await expect(page.locator(`[data-timeline-part-id="${reasoningID}"]`)).toHaveCount(0)
+  await expect(page.locator(`[data-timeline-part-id="${renderedPartID(reasoningID)}"]`)).toHaveCount(0)
   await timeline.send(partUpdated(shell("prt_reasoning_shell", "running")), 160)
   await expect(page.locator('[data-timeline-row="Thinking"]')).toBeVisible()
   await timeline.send(partUpdated(shell("prt_reasoning_shell", "completed", "done")), 180)
@@ -129,6 +130,7 @@ test("transitions thinking and hidden reasoning through busy to idle", async ({
   await timeline.send(status("idle"), 300)
   await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
   await expect(page.locator(`[data-timeline-part-id="${reasoningID}"]`)).toHaveCount(0)
+  await expect(page.locator(`[data-timeline-part-id="${renderedPartID(reasoningID)}"]`)).toHaveCount(0)
 })
 
 test("moves busy through retry and recovery to final idle content", async ({ page }) => {

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

@@ -122,6 +122,7 @@ test("updates running compactions to failed and cancelled boundaries", async ({
 
   await timeline.send(compactionStarted({ sessionID, reason: "auto", recent: "" }))
   await timeline.send(compactionDelta({ sessionID, text: "Partial summary that should be discarded." }))
+  await expect(page.getByText("Partial summary that should be discarded.", { exact: true })).toBeVisible()
   await timeline.send(
     compactionFailed({
       sessionID,
@@ -140,6 +141,9 @@ test("updates running compactions to failed and cancelled boundaries", async ({
   await expect(failed).not.toContainText("Partial summary that should be discarded.")
 
   await timeline.send(compactionStarted({ sessionID, reason: "manual", recent: "" }))
+  await expect(compactions).toHaveCount(2)
+  await timeline.send(compactionDelta({ sessionID, text: "Summary before cancellation." }))
+  await expect(page.getByText("Summary before cancellation.", { exact: true })).toBeVisible()
   await timeline.send(
     compactionFailed({
       sessionID,
@@ -152,88 +156,7 @@ test("updates running compactions to failed and cancelled boundaries", async ({
   const cancelled = compactions.filter({ hasNotText: "The provider rejected the summary." })
   await expect(cancelled.getByText("Session compacted", { exact: true })).toBeVisible()
   await expect(cancelled).not.toContainText("Cancellation detail should stay hidden.")
-})
-
-test("shows a delegating row while subagent input streams", async ({ page }) => {
-  await setupTimeline(page, {
-    sessionMessages: [
-      user,
-      {
-        ...assistant(false),
-        content: [
-          {
-            type: "tool",
-            id: "call_subagent",
-            name: "subagent",
-            state: { status: "streaming", input: "" },
-            time: { created: 2 },
-          },
-        ],
-      },
-    ],
-  })
-
-  const delegating = page.locator('[data-component="task-tool-delegating"]')
-  await expect(delegating).toBeVisible()
-  const shimmer = delegating.locator('[data-component="text-shimmer"]')
-  await expect(shimmer).toHaveAttribute("aria-label", "Delegating agent...")
-  await expect(shimmer).toHaveCSS("line-height", "16px")
-  const icon = delegating.locator('[data-slot="icon-svg"]')
-  await expect(icon.locator('use[href="#opencode-v2-icon-subagent"]')).toBeVisible()
-  await expect(icon).toHaveCSS("color", "rgb(174, 174, 174)")
-  await expect(page.locator('[data-component="task-tool-card"]')).toHaveCount(0)
-  await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
-})
-
-test("renders the moved location notice in its compact timeline style", async ({ page }) => {
-  const directory = `/Users/usrnk1/Developer/opencode/${"nested-directory/".repeat(24)}session`
-  await page.setViewportSize({ width: 480, height: 720 })
-  await setupTimeline(page, {
-    sessionMessages: [
-      user,
-      {
-        id: "msg_location",
-        type: "location-switched",
-        location: { directory },
-        time: { created: 2 },
-      },
-    ],
-  })
-
-  const notice = page.locator('[data-slot="session-timeline-notice"][data-type="location-switched"]')
-  const label = notice.locator('[data-slot="session-timeline-notice-label"]')
-  const value = notice.locator('[data-slot="session-timeline-notice-value"]')
-  const tooltipTrigger = notice.locator('[data-component="tooltip-v2-trigger"]')
-
-  await expect(label).toHaveText("Moved to")
-  await expect(value).toHaveText(directory)
-  await expect(notice).not.toContainText("·")
-  await expect(notice.locator("svg")).toHaveCount(0)
-  await expect(notice).toHaveCSS("height", "28px")
-  await expect(notice).toHaveCSS("gap", "8px")
-  await expect(notice).toHaveCSS("padding-top", "4px")
-  await expect(notice).toHaveCSS("padding-bottom", "4px")
-  await expect(label).toHaveCSS("font-size", "13px")
-  await expect(label).toHaveCSS("font-weight", "530")
-  await expect(label).toHaveCSS("line-height", "16px")
-  await expect(label).toHaveCSS("color", "rgb(128, 128, 128)")
-  await expect(value).toHaveCSS("font-size", "13px")
-  await expect(value).toHaveCSS("font-weight", "440")
-  await expect(value).toHaveCSS("line-height", "16px")
-  await expect(value).toHaveCSS("color", "rgb(128, 128, 128)")
-  await expect(value).toHaveCSS("text-overflow", "ellipsis")
-  await expect(value).toHaveCSS("white-space", "nowrap")
-  await expect(value).toHaveAttribute("dir", "ltr")
-  await expect.poll(() => value.evaluate((element) => element.scrollWidth > element.clientWidth)).toBe(true)
-
-  const tooltip = page.getByText("Session working directory changed", { exact: true })
-  await label.hover()
-  await expect(tooltip).toBeVisible()
-  await page.mouse.move(0, 0)
-  await expect(tooltip).toBeHidden()
-  await tooltipTrigger.focus()
-  await expect(tooltipTrigger).toBeFocused()
-  await expect(tooltip).toBeVisible()
+  await expect(cancelled).not.toContainText("Summary before cancellation.")
 })
 
 test("moves blocking work to the background with Ctrl+B", async ({ page }) => {
@@ -271,11 +194,6 @@ test("moves blocking work to the background with Ctrl+B", async ({ page }) => {
   await request
 })
 
-test("waits for completion before labeling requested background work", async ({ page }) => {
-  await setupTimeline(page, { sessionMessages: [user, assistant(false, true, undefined, true)] })
-  await expect(page.locator('[data-component="task-tool-card"]')).not.toContainText("(background)")
-})
-
 test("navigates from a running subagent card and hides background controls in the child", async ({ page }) => {
   const childID = "ses_running_child"
   await setupTimeline(page, {

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

@@ -7,86 +7,9 @@ import {
   toolPart,
   userMessage,
   userText,
-  type PartSeed,
 } from "../performance/timeline-stability/fixture"
 
 test.describe("session timeline projection", () => {
-  test("renders every admitted tool family and hides timeline-only exclusions", async ({ page }) => {
-    const parts = [
-      toolPart("prt_01_read", "read", "completed", { path: "src/a.ts" }),
-      toolPart("prt_02_glob", "glob", "completed", { path: ".", pattern: "**/*.ts" }),
-      toolPart("prt_03_grep", "grep", "completed", { path: ".", pattern: "value" }),
-      toolPart("prt_04_list", "list", "completed", { path: "src" }),
-      toolPart("prt_webfetch", "webfetch", "completed", { url: "https://example.com" }),
-      toolPart(
-        "prt_websearch",
-        "websearch",
-        "completed",
-        { query: "timeline stability" },
-        { output: "https://example.com/result" },
-      ),
-      toolPart("prt_task", "subagent", "completed", {
-        description: "Inspect timeline",
-        agent: "explore",
-        prompt: "Inspect the timeline implementation.",
-      }),
-      toolPart(
-        "prt_bash",
-        "shell",
-        "completed",
-        { command: "printf stable" },
-        { output: "stable", title: "printf stable" },
-      ),
-      editPart("prt_edit"),
-      toolPart("prt_write", "write", "completed", { path: "src/new.ts", content: "export const stable = true\n" }),
-      patchPart("prt_patch"),
-      toolPart("prt_todo", "todowrite", "completed", { todos: [{ content: "Hidden", status: "pending" }] }),
-      toolPart(
-        "prt_question",
-        "question",
-        "completed",
-        { questions: [{ question: "Keep stable?", header: "Stability", options: [] }] },
-        { metadata: { answers: [["Yes"]] } },
-      ),
-      toolPart("prt_skill", "skill", "completed", { name: "stability" }),
-      toolPart("prt_custom", "custom_mcp_tool", "completed", { target: "timeline", count: 2 }),
-    ]
-    await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
-
-    const first = page.locator(
-      '[data-timeline-part-ids="prt_01_read,prt_02_glob,prt_03_grep,prt_04_list,prt_webfetch,prt_websearch,prt_task,prt_bash,prt_edit,prt_write,prt_patch"]',
-    )
-    const second = page.locator('[data-timeline-part-ids="prt_skill,prt_custom"]')
-    await expect(first).toBeVisible()
-    await expect(second).toBeVisible()
-    await first.getByRole("button").click()
-    await second.getByRole("button").click()
-    for (const id of [
-      "prt_webfetch",
-      "prt_websearch",
-      "prt_task",
-      "prt_bash",
-      "prt_edit",
-      "prt_write",
-      "prt_patch",
-      "prt_question",
-      "prt_skill",
-      "prt_custom",
-    ]) {
-      await expect(page.locator(`[data-timeline-part-id="${id}"]`).first(), id).toBeVisible()
-    }
-    const patch = page.locator('[data-timeline-part-id="prt_patch"]')
-    await expect(patch.getByText("1 file", { exact: true })).toBeVisible()
-    await expect(patch.getByRole("button", { name: "Patch 1 file", exact: true })).toHaveCount(0)
-    await expect(patch.getByRole("button")).toHaveCount(1)
-    await expect(patch.locator('[data-scope="apply-patch"] button[aria-expanded="false"]')).toHaveCount(1)
-    await expect(patch.locator('[data-slot="message-part-title-filename"]')).toHaveCount(0)
-    await expect(patch.locator('[data-slot="message-part-actions"]')).toHaveCount(0)
-    const edit = page.locator('[data-timeline-part-id="prt_edit"]')
-    await expect(edit).toContainText("Edit")
-    await expect(page.locator('[data-timeline-part-id="prt_todo"]')).toHaveCount(0)
-  })
-
   test("combines adjacent patch calls and repeated files into one group", async ({ page }) => {
     const first = "prt_patch_first"
     const second = "prt_patch_second"
@@ -158,43 +81,6 @@ test.describe("session timeline projection", () => {
     await expect(page.locator(`[data-timeline-part-id="${first}"], [data-timeline-part-id="${second}"]`)).toHaveCount(0)
   })
 
-  test("combines adjacent edit calls and repeated files into one group", async ({ page }) => {
-    const first = "prt_edit_first"
-    const second = "prt_edit_second"
-    await setupTimeline(page, {
-      messages: [
-        userMessage(),
-        assistantMessage([
-          toolPart(
-            first,
-            "edit",
-            "completed",
-            { path: "src/first.ts", oldString: "one", newString: "two" },
-            {
-              metadata: { files: [patchFile("src/first.ts", "modified")] },
-            },
-          ),
-          toolPart(
-            second,
-            "edit",
-            "completed",
-            { path: "src/first.ts", oldString: "two", newString: "three" },
-            {
-              metadata: { files: [patchFile("src/first.ts", "modified")] },
-            },
-          ),
-        ]),
-      ],
-      settings: { editToolPartsExpanded: true },
-    })
-
-    const group = page.locator(`[data-timeline-part-ids="${first},${second}"]`)
-    await expect(group.locator('[data-slot="basic-tool-tool-title"]')).toContainText("Edit")
-    await expect(group.getByText("1 file", { exact: true })).toBeVisible()
-    await expect(group.locator('[data-slot="apply-patch-filename"]')).toHaveText(["first.ts"])
-    await expect(group.locator('[data-scope="apply-patch"] button')).toHaveAttribute("aria-expanded", "true")
-  })
-
   test("projects gaps, dividers, assistant parts, and errors together", async ({ page }) => {
     const firstUser = userMessage(
       [
@@ -236,25 +122,6 @@ test.describe("session timeline projection", () => {
     await expect(page.locator('[data-timeline-row="TurnGap"]')).toBeVisible()
   })
 
-  test("renders interruption independently when the turn is not compacted", async ({ page }) => {
-    const user = userMessage()
-    const before = assistantMessage([{ id: "prt_before", type: "text", text: "Before" }], {
-      id: "msg_1001_before",
-      error: { type: "MessageAbortedError", message: "Stopped" },
-    })
-    const after = assistantMessage([{ id: "prt_after", type: "text", text: "After" }], {
-      id: "msg_1002_after",
-      created: 1700000003000,
-    })
-    await setupTimeline(page, { messages: [user, before, after] })
-
-    await expect(page.getByText("Interrupted", { exact: true })).toBeVisible()
-    const rows = await page
-      .locator('[data-timeline-row="AssistantPart"], [data-timeline-row="TurnDivider"]')
-      .evaluateAll((elements) => elements.map((element) => element.getAttribute("data-timeline-row")))
-    expect(rows).toEqual(["AssistantPart", "TurnDivider", "AssistantPart"])
-  })
-
   test("renders aliased and long custom model notices", async ({ page }) => {
     const shortName = "GPT-5.4 nano"
     const longName = "Company Gateway Extra Long Context Model for Narrow Timeline Layouts"
@@ -291,77 +158,8 @@ test.describe("session timeline projection", () => {
     await expect(longNotice.locator("[title]")).toHaveAttribute("title", `Switched to ${longName}`)
     await expect.poll(() => longNotice.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true)
   })
-
-  test("renders user image, file attachment, file reference, and agent reference", async ({ page }) => {
-    const text = "Use @explore with @src/a.ts and inspect the attachments"
-    const parts: PartSeed<"user">[] = [
-      userText(text, { id: "prt_user_rich" }),
-      {
-        id: "prt_user_image",
-        type: "file",
-        mime: "image/png",
-        filename: "pixel.png",
-        url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
-      },
-      {
-        id: "prt_user_attachment",
-        type: "file",
-        mime: "application/json",
-        filename: "tsconfig.json",
-        url: "data:application/json;base64,e30=",
-      },
-      {
-        id: "prt_user_reference",
-        type: "file",
-        mime: "text/plain",
-        filename: "a.ts",
-        url: "src/a.ts",
-        source: { type: "file", path: "src/a.ts", text: { value: "@src/a.ts", start: 18, end: 27 } },
-      },
-      {
-        id: "prt_user_agent",
-        type: "agent",
-        name: "explore",
-        source: { value: "@explore", start: 4, end: 12 },
-      },
-    ]
-    await setupTimeline(page, { messages: [userMessage(parts), assistantMessage()] })
-
-    await expect(page.getByAltText("pixel.png")).toBeVisible()
-    await expect(page.getByText("tsconfig.json")).toBeVisible()
-    await expect(page.getByText("@src/a.ts", { exact: true })).toBeVisible()
-    await expect(page.getByText("@explore", { exact: true })).toBeVisible()
-  })
 })
 
-function editPart(id: string) {
-  return toolPart(
-    id,
-    "edit",
-    "completed",
-    { path: "src/a.ts", oldString: "export const value = 1", newString: "export const value = 2" },
-    {
-      metadata: {
-        files: [patchFile("src/a.ts", "modified")],
-      },
-    },
-  )
-}
-
-function patchPart(id: string) {
-  return toolPart(
-    id,
-    "patch",
-    "completed",
-    { patchText: "Update the projected files" },
-    {
-      metadata: {
-        files: [patchFile("src/a.ts", "modified")],
-      },
-    },
-  )
-}
-
 function patchFile(file: string, status: "added" | "modified" | "deleted") {
   return {
     file,

packages/app/e2e/regression/session-timeline-reducer-projection.spec.ts

@@ -7,33 +7,25 @@ import {
   renderedPartID,
   setupTimeline,
   shell,
+  toolPart,
   status,
   textPart,
-  toolPart,
   userMessage,
 } from "../performance/timeline-stability/fixture"
 
-test("groups every collapsed tool until visible text separates the stack", async ({ page }) => {
-  const parts = [
-    toolPart("prt_boundary_01_read", "read", "completed", { path: "src/a.ts" }),
-    textPart("prt_boundary_02_text", "Boundary text"),
-    toolPart("prt_boundary_03_glob", "glob", "completed", { path: ".", pattern: "**/*.ts" }),
-    toolPart("prt_boundary_04_grep", "grep", "completed", { path: ".", pattern: "stable" }),
-    shell("prt_boundary_05_shell", "completed", "done"),
-    toolPart("prt_boundary_06_list", "list", "completed", { path: "src" }),
-  ]
-  await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
+test("reducer-hardening: converges when idle arrives before final part and message completion", async ({ page }) => {
+  const textID = "prt_event_order_text"
+  const assistant = assistantMessage([textPart(textID, "Partial")], { completed: false })
+  const timeline = await setupTimeline(page, { messages: [userMessage(), assistant] })
+  await timeline.send(status("busy"), 100)
+  await timeline.send(status("idle"), 100)
+  await timeline.send(partUpdated(textPart(textID, "Final after early idle")), 120)
+  await timeline.send(messageUpdated(completedAssistantInfo(assistant)), 250)
 
-  await expect(page.locator('[data-timeline-part-ids="prt_boundary_01_read"]')).toBeVisible()
-  const group = page.locator(
-    '[data-timeline-part-ids="prt_boundary_03_glob,prt_boundary_04_grep,prt_boundary_05_shell,prt_boundary_06_list"]',
+  await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
+  await expect(page.locator(`[data-timeline-part-id="${renderedPartID(textID)}"]`)).toContainText(
+    "Final after early idle",
   )
-  await expect(group).toBeVisible()
-  await expect(group.getByRole("button")).toHaveAccessibleName("Used Glob, Grep, Shell, List")
-  await expect(group.locator('[data-component="tag"]')).toHaveText("4")
-  await expect(page.locator('[data-timeline-row="AssistantPart"]')).toHaveCount(3)
-  await expect(page.locator('[data-timeline-spacing="content"]')).toHaveCount(2)
-  await expect(page.locator('[data-timeline-spacing="content"]').nth(0)).toHaveCSS("padding-top", "16px")
 })
 
 test("expands a mixed collapsed tool stack without expanding its individual calls", async ({ page }) => {
@@ -132,18 +124,3 @@ test("keeps failed search calls and their error cards inside the collapsed stack
     "Search timed out after 30 seconds",
   )
 })
-
-test("reducer-hardening: converges when idle arrives before final part and message completion", async ({ page }) => {
-  const textID = "prt_event_order_text"
-  const assistant = assistantMessage([textPart(textID, "Partial")], { completed: false })
-  const timeline = await setupTimeline(page, { messages: [userMessage(), assistant] })
-  await timeline.send(status("busy"), 100)
-  await timeline.send(status("idle"), 100)
-  await timeline.send(partUpdated(textPart(textID, "Final after early idle")), 120)
-  await timeline.send(messageUpdated(completedAssistantInfo(assistant)), 250)
-
-  await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
-  await expect(page.locator(`[data-timeline-part-id="${renderedPartID(textID)}"]`)).toContainText(
-    "Final after early idle",
-  )
-})

packages/app/e2e/regression/session-timeline-tool-projection.spec.ts

@@ -7,31 +7,6 @@ import {
   userMessage,
 } from "../performance/timeline-stability/fixture"
 
-test("renders every tool error outcome without leaking hidden tools", async ({ page }) => {
-  const ordinary = ["shell", "edit", "write", "patch", "webfetch", "websearch", "subagent", "skill", "mcp_probe"]
-  const parts = ordinary.map((tool, index) =>
-    toolPart(`prt_error_${index}`, tool, "error", errorInput(tool), { error: `${tool} failed visibly` }),
-  )
-  parts.push(
-    toolPart("prt_question_dismissed", "question", "error", questionInput(), {
-      error: "The user dismissed this question",
-    }),
-    toolPart("prt_question_error", "question", "error", questionInput(), { error: "Question transport failed" }),
-    toolPart("prt_todo_error", "todowrite", "error", { todos: [] }, { error: "Hidden todo failure" }),
-  )
-  await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
-
-  const group = page.locator(`[data-timeline-part-ids="${ordinary.map((_, index) => `prt_error_${index}`).join(",")}"]`)
-  await expect(group.locator('[data-component="tag"]')).toHaveText(String(ordinary.length))
-  await group.getByRole("button").click()
-  await expect(page.locator('[data-kind="tool-error-card"]')).toHaveCount(ordinary.length + 1)
-  await expect(page.getByText(/dismissed/i)).toBeVisible()
-  await expect(page.locator('[data-timeline-part-id="prt_todo_error"]')).toHaveCount(0)
-  for (let index = 0; index < ordinary.length; index++) {
-    await expect(page.locator(`[data-timeline-part-id="prt_error_${index}"]`)).toBeVisible()
-  }
-})
-
 test("transitions shell and question through running error outcomes", async ({ page }) => {
   const shellID = "prt_transition_error_shell"
   const questionID = "prt_transition_error_question"
@@ -138,62 +113,6 @@ test("preserves surviving grouped patch state when its first patch fails", async
     .toBeGreaterThanOrEqual(-0.5)
 })
 
-test("labels all web search provider variants", async ({ page }) => {
-  const parts = [
-    toolPart(
-      "prt_search_parallel",
-      "websearch",
-      "completed",
-      { query: "parallel" },
-      { metadata: { provider: "parallel" } },
-    ),
-    toolPart("prt_search_exa", "websearch", "completed", { query: "exa" }, { metadata: { provider: "exa" } }),
-    toolPart("prt_search_generic", "websearch", "completed", { query: "generic" }),
-  ]
-  await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
-  await page.getByRole("button", { name: "Used Parallel Web Search, Exa Web Search, Web Search" }).click()
-
-  const tools = page.locator('[data-component="context-tool-group-list"]')
-  await expect(tools.getByRole("button", { name: /Parallel Web Search/ })).toBeVisible()
-  await expect(tools.getByRole("button", { name: /Exa Web Search/ })).toBeVisible()
-  await expect(tools.getByRole("button", { name: /^Web Search/ })).toBeVisible()
-})
-
-test("labels completed searches with result counts", async ({ page }) => {
-  const glob = "prt_glob_count"
-  const grep = "prt_grep_count"
-  await setupTimeline(page, {
-    messages: [
-      userMessage(),
-      assistantMessage([
-        toolPart(glob, "glob", "completed", { path: ".", pattern: "**/*.ts" }, { metadata: { count: 1 } }),
-        toolPart(grep, "grep", "completed", { path: ".", pattern: "value" }, { metadata: { matches: 12 } }),
-      ]),
-    ],
-  })
-
-  const group = page.locator(`[data-timeline-part-ids="${glob},${grep}"]`)
-  await group.locator('[data-slot="collapsible-trigger"]').click()
-  const rows = group.locator('[data-component="context-tool-group-list"] [data-component="tool-trigger"]')
-  await expect(rows.filter({ hasText: "Glob" })).toContainText("(1 match)")
-  await expect(rows.filter({ hasText: "Grep" })).toContainText("(12 matches)")
-})
-
-test("labels read tools from their path input", async ({ page }) => {
-  const id = "prt_read_path"
-  await setupTimeline(page, {
-    messages: [userMessage(), assistantMessage([toolPart(id, "read", "completed", { path: "src/a.ts" })])],
-  })
-
-  const group = page.locator(`[data-timeline-part-ids="${id}"]`)
-  await group.locator('[data-slot="collapsible-trigger"]').click()
-  await expect(
-    group
-      .locator('[data-component="context-tool-group-list"] [data-component="tool-trigger"]')
-      .filter({ hasText: "Read" }),
-  ).toContainText("a.ts")
-})
-
 test("groups instruction files loaded by the same read", async ({ page }) => {
   const id = "prt_read_instructions"
   await setupTimeline(page, {
@@ -221,36 +140,6 @@ test("groups instruction files loaded by the same read", async ({ page }) => {
   await expect(loaded.locator('[data-slot="tool-loaded-kind"]')).toHaveCount(0)
 })
 
-test("labels skill tools from IDs and result metadata", async ({ page }) => {
-  const pending = "prt_skill_id"
-  const completed = "prt_skill_name"
-  await setupTimeline(page, {
-    messages: [
-      userMessage(),
-      assistantMessage([
-        toolPart(pending, "skill", "running", { id: "frontend-design" }),
-        toolPart(completed, "skill", "completed", { id: "opencode" }, { metadata: { name: "OpenCode" } }),
-      ]),
-    ],
-  })
-
-  const group = page.locator(`[data-timeline-part-ids="${pending},${completed}"]`)
-  await expect(group.getByRole("button")).toHaveAccessibleName("Used Skill")
-  await expect(group.locator('[data-component="tag"]')).toHaveText("2")
-  await group.getByRole("button").click()
-
-  const loaded = group.locator('[data-component="tool-loaded-item"]')
-  await expect(loaded).toHaveCount(1)
-  await expect(loaded).toHaveAttribute("aria-label", "Loaded frontend-design, OpenCode skills")
-  await expect(loaded).toHaveCSS("line-height", "16px")
-  await expect(loaded.locator('[data-slot="tool-loaded-label"]')).toHaveText("Loaded")
-  await expect(loaded.locator('[data-slot="tool-loaded-kind"]')).toHaveText("skills")
-  const names = loaded.locator('[data-component="text-shimmer"]')
-  await expect(names).toHaveCount(2)
-  await expect(names.nth(0)).toHaveAttribute("aria-label", "frontend-design")
-  await expect(names.nth(1)).toHaveAttribute("aria-label", "OpenCode")
-})
-
 test("groups only consecutive successful skill tools", async ({ page }) => {
   const parts = [
     toolPart("prt_skill_first", "skill", "completed", { id: "ocpr" }),
@@ -273,14 +162,3 @@ test("groups only consecutive successful skill tools", async ({ page }) => {
 function questionInput() {
   return { questions: [{ header: "Stability", question: "Keep it stable?", options: [] }] }
 }
-
-function errorInput(tool: string) {
-  if (tool === "shell") return { command: "exit 1" }
-  if (["edit", "write"].includes(tool)) return { path: "src/error.ts", content: "" }
-  if (tool === "patch") return { patchText: "Update src/error.ts" }
-  if (tool === "webfetch") return { url: "https://example.com" }
-  if (tool === "websearch") return { query: "failure" }
-  if (tool === "subagent") return { description: "Fail subagent", agent: "explore", prompt: "Inspect the failure." }
-  if (tool === "skill") return { name: "failure" }
-  return { target: "failure" }
-}

packages/app/e2e/regression/settings-loading.spec.ts

@@ -0,0 +1,121 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const directory = "C:/Projects/settings-demo"
+const sandboxes = Array.from({ length: 12 }, (_, index) => `${directory}/workspace-${index + 1}`)
+
+test.use({ viewport: { width: 1440, height: 1000 }, colorScheme: "dark" })
+
+test.beforeEach(async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_settings_demo",
+      canonical: directory,
+      name: "Settings demo",
+      vcs: "git",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes,
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: sandboxes.map((directory, index) => ({
+      id: `ses_settings_${index + 1}`,
+      title: `Workspace ${index + 1} session`,
+      directory,
+      projectID: "proj_settings_demo",
+      time: { created: 1700000000000, updated: 1700000000000 },
+    })),
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.goto("/")
+  await page.getByRole("button", { name: "Settings", exact: true }).click()
+  await expect(page.getByTestId("settings-screen").getByRole("tab", { name: "Preferences" })).toBeVisible()
+})
+
+test("workspaces opens without waiting for inventory or sessions", async ({ page }) => {
+  const inventory = Promise.withResolvers<void>()
+  const sessions = Promise.withResolvers<void>()
+  await page.route("**/api/worktree/*", async (route) => {
+    await inventory.promise
+    await route.fallback()
+  })
+  await page.route("**/api/session?*", async (route) => {
+    if (new URL(route.request().url()).searchParams.has("directory")) await sessions.promise
+    await route.fallback()
+  })
+  const settings = page.getByTestId("settings-screen")
+  const requested = page.waitForRequest((request) => new URL(request.url()).pathname.startsWith("/api/worktree/"))
+  await settings.getByRole("tab", { name: "Workspaces", exact: true }).click()
+  await requested
+  await expect(settings.getByRole("heading", { name: "Workspaces", exact: true })).toBeVisible()
+  await expect(settings.getByRole("button", { name: "Back to app" })).toBeVisible()
+  await expect(settings.getByText("No workspaces", { exact: true })).toHaveCount(0)
+
+  inventory.resolve()
+  await expect(settings.getByText(sandboxes[0], { exact: true })).toBeVisible()
+  await expect(settings.getByText("12 workspaces", { exact: true })).toBeVisible()
+  sessions.resolve()
+  await expect(settings.getByText("Workspace 1 session", { exact: true })).toBeVisible()
+
+  const refresh = Promise.withResolvers<void>()
+  await page.route("**/api/worktree/*", async (route) => {
+    await refresh.promise
+    await route.fallback()
+  })
+  await settings.getByRole("tab", { name: "Preferences", exact: true }).click()
+  await settings.getByRole("tab", { name: "Workspaces", exact: true }).click()
+  await expect(settings.getByText("Workspace 1 session", { exact: true })).toBeVisible()
+  refresh.resolve()
+})
+
+test("extensions opens without waiting for MCPs or plugins", async ({ page }) => {
+  const mcps = Promise.withResolvers<void>()
+  const plugins = Promise.withResolvers<void>()
+  await page.route("**/api/mcp", async (route) => {
+    await mcps.promise
+    await route.fulfill({
+      json: { location: { directory }, data: [{ name: "demo-mcp", status: { status: "connected" } }] },
+    })
+  })
+  await page.route("**/api/plugin", async (route) => {
+    await plugins.promise
+    await route.fulfill({
+      json: {
+        location: { directory },
+        data: [
+          { id: "demo-plugin", source: { type: "package", package: "demo-plugin" }, status: "active", tui: false },
+        ],
+      },
+    })
+  })
+  const settings = page.getByTestId("settings-screen")
+  const requested = page.waitForRequest((request) => new URL(request.url()).pathname === "/api/mcp")
+  await settings.getByRole("tab", { name: "Extensions", exact: true }).click()
+  await requested
+  await expect(settings.getByRole("heading", { name: "Extensions", exact: true })).toBeVisible()
+  await expect(settings.getByRole("button", { name: "Back to app" })).toBeVisible()
+  await settings.getByRole("tab", { name: "Plugins", exact: true }).click()
+  await expect(settings.getByRole("tab", { name: "Plugins", exact: true })).toHaveAttribute("aria-selected", "true")
+  plugins.resolve()
+  await expect(settings.getByText("demo-plugin", { exact: true })).toBeVisible()
+  mcps.resolve()
+  await settings.getByRole("tab", { name: "MCPs", exact: true }).click()
+  await expect(settings.getByRole("switch", { name: "demo-mcp" })).toBeChecked()
+})
+
+test("workspace inventory uses the settings panel scroll area", async ({ page }) => {
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Workspaces", exact: true }).click()
+  await expect(settings.getByText("Workspace 1 session", { exact: true })).toBeVisible()
+  const list = settings.locator('[data-component="settings-list"]')
+  await expect(list).toHaveCSS("max-height", "none")
+  await expect(list).toHaveCSS("overflow-y", "visible")
+  await settings.getByText("Workspace 12 session", { exact: true }).scrollIntoViewIfNeeded()
+  await expect(settings.getByText("Workspace 12 session", { exact: true })).toBeInViewport()
+  await expect(settings.getByRole("button", { name: "Back to app" })).toBeInViewport()
+  await page.setViewportSize({ width: 390, height: 844 })
+  await expect(list).toHaveCSS("max-height", "none")
+  await expect(list).toHaveCSS("overflow-y", "visible")
+  await settings.getByText("Workspace 12 session", { exact: true }).scrollIntoViewIfNeeded()
+  await expect(settings.getByText("Workspace 12 session", { exact: true })).toBeInViewport()
+})

packages/app/e2e/regression/tab-navigate-mousedown.spec.ts

@@ -2,7 +2,7 @@ import { expect, test, type Page, type Route } from "@playwright/test"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { currentSession } from "../utils/mock-server"
 
-const server = "http://127.0.0.1:4096"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const sessionA = session("ses_tab_a", "Tab A session")
 const sessionB = session("ses_tab_b", "Tab B session")
 const sessionC = session("ses_tab_c", "Tab C session")
@@ -238,7 +238,7 @@ function session(id: string, title: string) {
 
 async function mockServer(page: Page) {
   const sessions = [sessionA, sessionB, sessionC]
-  await page.route("**/*", async (route) => {
+  await page.route("**/api/**", async (route) => {
     const url = new URL(route.request().url())
     if (url.origin !== server) return route.fallback()
     if (url.pathname === `/api/session/${unresolvedSessionID}`) return new Promise(() => {})

packages/app/e2e/regression/terminal-composer-focus.spec.ts

@@ -87,6 +87,7 @@ test("clears the terminal line with Command+Delete", async ({ page }) => {
   const terminal = page.locator('[data-component="terminal"]')
   await page.keyboard.press("Control+Backquote")
   await expect(terminal.locator("textarea")).toHaveCount(1)
+  await expect.poll(() => sendPtyOutput).toBeDefined()
 
   await page.keyboard.press("Meta+Backspace")
 

packages/app/e2e/regression/terminal-hidden.spec.ts

@@ -127,7 +127,6 @@ test("animates review and terminal panels while caching hidden terminal content"
   await expectStackedGeometry(page)
   await expectPanelGapHeld(page)
 
-  await resetTerminalTopMotion(page)
   await resetTerminalBottomMotion(page)
   await resetTerminalAnchorGaps(page)
   await resetPanelGaps(page)
@@ -139,7 +138,6 @@ test("animates review and terminal panels while caching hidden terminal content"
   await expect(panel).toBeVisible()
   await expectHeightMotions(page, "session-side-region", 2)
   await expectHeightMotions(page, "session-side-terminal-region", 2)
-  await expectTerminalTopMotion(page)
   await expectTerminalBottomFixed(page)
   await expectTerminalTopAnchored(page)
   await expectPanelGapHeld(page)
@@ -225,7 +223,6 @@ type MotionProbe = {
   terminalAnchorGaps: number[]
   resetAnchorOnMotion: boolean
   panelGaps: number[]
-  terminalTops: number[]
   terminalBottoms: number[]
   heights: string[]
   animations: string[]
@@ -243,7 +240,6 @@ async function installMotionProbe(page: Page) {
       terminalAnchorGaps: [],
       resetAnchorOnMotion: false,
       panelGaps: [],
-      terminalTops: [],
       terminalBottoms: [],
       heights: [],
       animations: [],
@@ -270,7 +266,6 @@ async function installMotionProbe(page: Page) {
         const terminalContent = document.querySelector<HTMLElement>('[data-slot="terminal-panel-content"]')
         const panelGap = document.querySelector<HTMLElement>('[data-slot="session-side-panel-gap"]')
         if (!terminal || !terminalContent) return
-        probe.terminalTops.push(terminal.getBoundingClientRect().top)
         probe.terminalBottoms.push(terminal.getBoundingClientRect().bottom)
         probe.terminalContentSizes.push({
           width: terminalContent.getBoundingClientRect().width,
@@ -446,13 +441,6 @@ async function expectStackPainted(page: Page) {
   expect(Math.max(...gaps.map((gap) => gap.terminalSurface)), JSON.stringify(gaps)).toBeLessThanOrEqual(1)
 }
 
-async function resetTerminalTopMotion(page: Page) {
-  await page.evaluate(() => {
-    const probe = (window as Window & { __panelMotion?: MotionProbe }).__panelMotion
-    if (probe) probe.terminalTops = []
-  })
-}
-
 async function resetTerminalBottomMotion(page: Page) {
   await page.evaluate(() => {
     const probe = (window as Window & { __panelMotion?: MotionProbe }).__panelMotion
@@ -516,17 +504,6 @@ async function expectTerminalContentCachedSize(page: Page) {
   expect(Math.min(...sizes.map((size) => size.height))).toBeGreaterThan(100)
 }
 
-async function expectTerminalTopMotion(page: Page) {
-  const tops = await page.evaluate(
-    () => (window as Window & { __panelMotion?: MotionProbe }).__panelMotion?.terminalTops.map(Math.round) ?? [],
-  )
-  const unique = [...new Set(tops)]
-  const range = Math.max(...unique) - Math.min(...unique)
-  const maxDelta = Math.max(...unique.slice(1).map((value, index) => Math.abs(value - unique[index])))
-  expect(unique.length, JSON.stringify(unique)).toBeGreaterThan(6)
-  expect(maxDelta, JSON.stringify({ unique, range, maxDelta })).toBeLessThan(range * 0.3)
-}
-
 async function expectHeightMotions(page: Page, slot: string, count: number) {
   await expect
     .poll(() =>

packages/app/e2e/tsconfig.json

@@ -7,5 +7,5 @@
     "rootDir": "..",
     "types": ["node", "bun"]
   },
-  "include": ["./**/*.ts", "./**/*.tsx", "../src/types.ts"]
+  "include": ["./**/*.ts", "./**/*.tsx", "../component-tests/**/*.ts", "../src/types.ts"]
 }

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

@@ -144,12 +144,14 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
   )
   page.on("close", () => void transport.dispose())
 
-  await page.route("**/*", async (route) => {
+  await page.route("**/api/**", async (route) => {
     const url = new URL(route.request().url())
     const appPort = new URL(
       process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${process.env.PLAYWRIGHT_PORT ?? "3000"}`,
     ).port
     if (url.origin !== server && url.port !== appPort) return route.fallback()
+    // Production serves the UI and API from one origin; leave app assets to Vite.
+    if (!url.pathname.startsWith("/api/")) return route.fallback()
     if (route.request().method() === "OPTIONS") {
       return route.fulfill({ status: 204, headers: corsHeaders })
     }

packages/app/package.json

@@ -25,7 +25,10 @@
     "test:browser": "bun test --conditions=browser --preload ./happydom.ts ./test-browser",
     "test:unit:watch": "bun test --conditions=solid --watch --preload ./happydom.ts ./src",
     "test:e2e": "playwright test",
+    "test:e2e:built": "PLAYWRIGHT_BUILD=1 playwright test",
     "test:e2e:local": "playwright test",
+    "test:components": "playwright test --config playwright.components.config.ts",
+    "test:components:ui": "playwright test --config playwright.components.config.ts --ui",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:report": "playwright show-report e2e/playwright-report",
     "test:service-worker": "bun run build && playwright test --config e2e/service-worker/playwright.config.ts",

packages/app/playwright.components.config.ts

@@ -0,0 +1,4 @@
+import { fileURLToPath } from "node:url"
+import { componentConfig } from "../storybook/playwright/config"
+
+export default componentConfig(fileURLToPath(new URL(".", import.meta.url)))

packages/app/playwright.config.ts

@@ -2,10 +2,19 @@ import { defineConfig, devices } from "@playwright/test"
 
 const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
 const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${port}`
+const url = new URL(baseURL)
+if (url.protocol !== "http:") throw new Error("E2E fixtures require an http:// app URL")
+const built = !!process.env.CI || process.env.PLAYWRIGHT_BUILD === "1"
+// Production connects to its own origin, so fixture URLs must match the preview server.
+if (built) {
+  process.env.PLAYWRIGHT_SERVER_HOST = url.hostname
+  process.env.PLAYWRIGHT_SERVER_PORT = url.port || "80"
+}
 const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"
 const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
-const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
-const reuse = !process.env.CI
+const command = built
+  ? `bun run build && bun run serve -- --host 127.0.0.1 --port ${port} --strictPort`
+  : `bun run dev -- --host 127.0.0.1 --port ${port} --strictPort`
 const workers = Number(process.env.PLAYWRIGHT_WORKERS ?? (process.env.CI ? 5 : 0)) || undefined
 export default defineConfig({
   testDir: "./e2e",
@@ -23,16 +32,18 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers,
   reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
-  webServer: {
-    command,
-    url: baseURL,
-    reuseExistingServer: reuse,
-    timeout: 120_000,
-    env: {
-      VITE_OPENCODE_SERVER_HOST: serverHost,
-      VITE_OPENCODE_SERVER_PORT: serverPort,
-    },
-  },
+  webServer: process.env.PLAYWRIGHT_BASE_URL
+    ? undefined
+    : {
+        command,
+        url: baseURL,
+        reuseExistingServer: !built,
+        timeout: 120_000,
+        env: {
+          VITE_OPENCODE_SERVER_HOST: serverHost,
+          VITE_OPENCODE_SERVER_PORT: serverPort,
+        },
+      },
   use: {
     baseURL,
     trace: "on-first-retry",

packages/app/src/desktop.ts

@@ -4,6 +4,16 @@ export { useCommand } from "./shell/commands/command"
 export { currentRoute, type LayoutRoute, useCurrentRoute } from "./shell/state/layout"
 export { loadLocaleDict, normalizeLocale, type Locale, useLanguage } from "./runtime/i18n/language"
 export { type FatalRendererErrorLog, type Platform, PlatformProvider } from "./runtime/platform/platform"
+export type {
+  BrowserPaneCommand,
+  BrowserPaneEndpoint,
+  BrowserPaneEvent,
+  BrowserPaneLayout,
+  BrowserPanePlatform,
+  BrowserPaneRegistration,
+  BrowserPaneState,
+  BrowserPaneTarget,
+} from "./runtime/platform/browser-pane"
 export { ServerConnection, useServers } from "./runtime/server/registry"
 export { useTabs } from "./shell/tabs/tabs"
 export { createDraftStore } from "./runtime/persistence/drafts"

packages/app/src/home/route.tsx

@@ -17,7 +17,7 @@ export function Home() {
   return (
     <div
       class={`
-        m-2 min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
+        mx-2 mb-2 mt-[var(--shell-top-inset,8px)] min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
         bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]
       `}
     >

packages/app/src/new-session/screen.tsx

@@ -73,7 +73,7 @@ export default function NewSessionPage(props: { draftId: string }) {
     <div class="relative size-full overflow-hidden flex flex-col">
       {suspendUntilPromptReady()}
       <NewSessionStatus visible={settings.visibility.status()} />
-      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <NewSessionView composer={model} project={project} workspace={workspace} />
       </div>
     </div>

packages/app/src/runtime/i18n/en.ts

@@ -60,6 +60,7 @@ export const dict = {
   "command.terminal.toggle": "Toggle terminal",
   "command.fileTree.toggle": "Toggle file tree",
   "command.review.toggle": "Toggle review",
+  "command.browser.toggle": "Toggle browser",
   "command.terminal.new": "New terminal",
   "command.terminal.new.description": "Create a new terminal tab",
   "command.steps.toggle": "Toggle steps",
@@ -794,6 +795,10 @@ export const dict = {
     "PTY connect ticket rejected by origin or CSRF checks. Check the server CORS config.",
   "terminal.connectTicket.statusError": "PTY connect ticket failed with {{status}}",
 
+  "session.browser.address": "Browser address",
+  "session.browser.address.placeholder": "Enter a URL",
+  "session.browser.close": "Close browser",
+
   "titlebar.update": "Update",
   "titlebar.updateVersion": "Update {{version}}",
 
@@ -960,6 +965,8 @@ export const dict = {
   "settings.general.row.uiFont.description": "Customise the font used throughout the interface",
   "settings.general.row.showFileTree.title": "File tree",
   "settings.general.row.showFileTree.description": "Show the file tree panel in sessions",
+  "settings.general.row.browserPane.title": "Browser pane",
+  "settings.general.row.browserPane.description": "Allow agents to open and control an in-app development browser.",
   "settings.general.row.showNavigation.title": "Navigation controls",
   "settings.general.row.showNavigation.description": "Show the back and forward buttons in the desktop title bar",
   "settings.general.row.showSearch.title": "Command palette",
@@ -1143,6 +1150,9 @@ export const dict = {
   "settings.permissions.tool.webfetch.description": "Fetch content from a URL",
   "settings.permissions.tool.websearch.title": "Web Search",
   "settings.permissions.tool.websearch.description": "Search the web",
+  "settings.permissions.tool.browser_read.description": "Read pages and capture screenshots in the browser",
+  "settings.permissions.tool.browser_navigate.description": "Navigate the browser to a URL",
+  "settings.permissions.tool.browser_interact.description": "Click, type, and interact with pages in the browser",
   "settings.permissions.tool.external_directory.title": "External Directory",
   "settings.permissions.tool.external_directory.description": "Access files outside the project directory",
   "settings.permissions.tool.doom_loop.title": "Doom Loop",

packages/app/src/runtime/platform/browser-pane.ts

@@ -0,0 +1,28 @@
+import type { Browser } from "@opencode-ai/schema/browser"
+
+export type BrowserPaneEndpoint = Readonly<{ url: string; username?: string; password?: string }>
+export type BrowserPaneTarget = Readonly<{ sessionID: string; endpoint: BrowserPaneEndpoint }>
+export type BrowserPaneLayout = { visible: boolean; bounds?: { x: number; y: number; width: number; height: number } }
+
+export type BrowserPaneCommand =
+  | { type: "navigate"; url: string }
+  | { type: "back" }
+  | { type: "forward" }
+  | { type: "reload" }
+  | { type: "stop" }
+
+export type BrowserPaneState = Omit<Browser.State, "generation"> & {
+  readonly ready: boolean
+  readonly error?: string
+}
+export type BrowserPaneEvent = { type: "open" } | { type: "state"; state: BrowserPaneState }
+
+export type BrowserPaneRegistration = {
+  setLayout(layout?: BrowserPaneLayout): void
+  command(command: BrowserPaneCommand): Promise<void>
+  close(): void
+}
+
+export type BrowserPanePlatform = {
+  register(target: BrowserPaneTarget, listener: (event: BrowserPaneEvent) => void): BrowserPaneRegistration
+}

packages/app/src/runtime/platform/platform.tsx

@@ -6,6 +6,7 @@ import { ServerConnection } from "@/runtime/server/registry"
 import type { WslServersPlatform } from "@/servers/wsl/types"
 import type { UpdaterPlatform } from "@/shell/updates/types"
 import type { DraftStore } from "@/runtime/persistence/drafts"
+import type { BrowserPanePlatform } from "./browser-pane"
 
 type PickerPaths = string | string[] | null
 type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
@@ -115,6 +116,9 @@ type PlatformBase = {
 
   /** Record a fatal renderer error in platform logs (desktop only) */
   recordFatalRendererError?(error: FatalRendererErrorLog): Promise<void>
+
+  /** Native browser pane hosted by the platform (desktop only). */
+  browserPane?: BrowserPanePlatform
 }
 
 export type Platform = PlatformBase &

packages/app/src/runtime/server/global-sync/utils.ts

@@ -1,10 +1,16 @@
 import type { AgentListOutput, ModelListOutput, ProviderListOutput } from "@opencode-ai/client/promise"
 import type { Agent, Project, Provider, ProviderListResponse } from "@/runtime/server/types"
 import type { Project as CurrentProject } from "@opencode-ai/client/promise"
+import { unwrap } from "solid-js/store"
 export { pathKey as directoryKey, type PathKey as DirectoryKey } from "@/workspaces/path-key"
 
 export const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
 
+const providerCatalogs = new WeakMap<
+  ProviderListOutput["data"],
+  WeakMap<ModelListOutput["data"], ProviderListResponse>
+>()
+
 export function normalizeAgentList(input: AgentListOutput["data"] | Agent[]): Agent[] {
   if (input.every((agent) => !("request" in agent))) return input as Agent[]
   return (input as AgentListOutput["data"]).map((agent) => ({
@@ -30,12 +36,16 @@ export function normalizeAgentList(input: AgentListOutput["data"] | Agent[]): Ag
 }
 
 export function normalizeProviderList(
-  providers: ProviderListOutput["data"] | ProviderListResponse,
-  models?: ModelListOutput["data"],
+  input: ProviderListOutput["data"] | ProviderListResponse,
+  catalog?: ModelListOutput["data"],
 ): ProviderListResponse {
-  if (!Array.isArray(providers)) {
-    return providers
-  }
+  if (!Array.isArray(input)) return input
+  // Client sync replaces whole catalog lists. Track those reads at the caller,
+  // not every model field, and share conversions without retaining old lists.
+  const providers = unwrap(input)
+  const models = unwrap(catalog)
+  const cached = models && providerCatalogs.get(providers)?.get(models)
+  if (cached) return cached
   const all = new Map<string, Provider>()
 
   for (const provider of providers) {
@@ -101,7 +111,7 @@ export function normalizeProviderList(
     }
   }
 
-  return {
+  const result = {
     all,
     connected: providers.map((provider) => provider.id),
     default: Object.fromEntries(
@@ -111,6 +121,12 @@ export function normalizeProviderList(
       }),
     ),
   }
+  if (models) {
+    const cache = providerCatalogs.get(providers) ?? new WeakMap<ModelListOutput["data"], ProviderListResponse>()
+    cache.set(models, result)
+    providerCatalogs.set(providers, cache)
+  }
+  return result
 }
 
 export function normalizeProjectInfo(project: Project | CurrentProject): Project {

packages/app/src/session/browser/model.ts

@@ -0,0 +1,80 @@
+import { createEffect, createMemo, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/runtime/i18n/language"
+import type { BrowserPaneCommand, BrowserPaneRegistration, BrowserPaneState } from "@/runtime/platform/browser-pane"
+import { usePlatform } from "@/runtime/platform/platform"
+import { useServer } from "@/runtime/server/current"
+import { useSettings } from "@/settings/model"
+import { useLayout } from "@/shell/state/layout"
+import type { SessionModel } from "../model"
+
+export function createSessionBrowser(session: SessionModel) {
+  const platform = usePlatform()
+  const settings = useSettings()
+  const language = useLanguage()
+  const server = useServer()
+  const layout = useLayout()
+  const [state, setState] = createStore({
+    opened: false,
+    registration: undefined as BrowserPaneRegistration | undefined,
+    browser: {
+      url: "",
+      title: "",
+      loading: false,
+      canGoBack: false,
+      canGoForward: false,
+      ready: false,
+    } as BrowserPaneState,
+  })
+  const available = createMemo(
+    () =>
+      !!platform.browserPane &&
+      settings.ready() &&
+      settings.general.experimentalBrowser() &&
+      session.isDesktop() &&
+      !!session.identity.sessionID() &&
+      !server.health?.incompatible,
+  )
+  const open = () => {
+    session.layout.view().reviewPanel.close()
+    layout.fileTree.close()
+    setState("opened", true)
+  }
+
+  createEffect(() => {
+    const sessionID = session.identity.sessionID()
+    if (!available() || !sessionID || !platform.browserPane) {
+      setState({ opened: false, registration: undefined })
+      return
+    }
+    const owner = session.ownership.capture()
+    const registration = platform.browserPane.register({ sessionID, endpoint: server.conn.http }, (event) =>
+      owner.run(() => (event.type === "open" ? open() : setState("browser", { error: undefined, ...event.state }))),
+    )
+    setState({ opened: false, registration })
+    onCleanup(() => registration.close())
+  })
+
+  createEffect(() => {
+    if (state.opened && (session.layout.view().reviewPanel.opened() || layout.fileTree.opened())) {
+      setState("opened", false)
+    }
+  })
+
+  return {
+    available,
+    opened: () => state.opened,
+    state: () => state.browser,
+    registration: () => (state.opened ? state.registration : undefined),
+    close: () => setState("opened", false),
+    toggle: () => (state.opened ? setState("opened", false) : open()),
+    command(command: BrowserPaneCommand) {
+      setState("browser", { error: undefined })
+      const owner = session.ownership.capture()
+      void state.registration?.command(command).catch((error: unknown) => {
+        if (!owner.current()) return
+        setState("browser", { error: error instanceof Error ? error.message : language.t("common.requestFailed") })
+      })
+    },
+  }
+}

packages/app/src/session/browser/pane.tsx

@@ -0,0 +1,129 @@
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { createEventListener } from "@solid-primitives/event-listener"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { createEffect, For, on, onCleanup, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/runtime/i18n/language"
+import type { BrowserPaneRegistration } from "@/runtime/platform/browser-pane"
+import { usePlatform } from "@/runtime/platform/platform"
+import type { createSessionBrowser } from "./model"
+
+export function SessionBrowserPane(props: {
+  registration: BrowserPaneRegistration
+  browser: ReturnType<typeof createSessionBrowser>
+}) {
+  const platform = usePlatform()
+  const language = useLanguage()
+  const dialog = useDialog()
+  const state = props.browser.state
+  const button = { variant: "ghost", size: "large" } as const
+  const [store, setStore] = createStore({
+    address: "",
+    editing: false,
+    visible: typeof document === "undefined" || document.visibilityState === "visible",
+  })
+  let surface: HTMLDivElement | undefined
+  let frame: number | undefined
+  let layout: string | undefined
+  let until = 0
+
+  const measure = () => {
+    frame = undefined
+    if (!surface) return
+    const rect = surface.getBoundingClientRect()
+    const zoom = platform.webviewZoom?.() ?? 1
+    const left = Math.round(rect.left * zoom)
+    const top = Math.round(rect.top * zoom)
+    const right = Math.round(rect.right * zoom)
+    const bottom = Math.round(rect.bottom * zoom)
+    const visible = store.visible && !dialog.active
+    const next = `${visible}:${left}:${top}:${right}:${bottom}`
+    if (next !== layout) {
+      layout = next
+      props.registration.setLayout({
+        visible,
+        bounds: { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) },
+      })
+    }
+    if (performance.now() < until) frame = requestAnimationFrame(measure)
+  }
+  const schedule = (duration = 0) => {
+    until = Math.max(until, performance.now() + duration)
+    if (frame === undefined) frame = requestAnimationFrame(measure)
+  }
+
+  createEffect(() => !store.editing && setStore("address", state().url))
+  createEffect(on([() => platform.webviewZoom?.(), () => dialog.active, () => store.visible], () => schedule(300)))
+  createResizeObserver(() => surface, schedule.bind(null, 0))
+  createEventListener(window, "resize", () => schedule(300))
+  createEventListener(document, "visibilitychange", () => setStore("visible", document.visibilityState === "visible"))
+  onCleanup(() => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    props.registration.setLayout()
+  })
+
+  return (
+    <aside
+      id="browser-panel"
+      class="relative size-full min-w-0 overflow-hidden rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] flex flex-col"
+    >
+      <div class="h-10 shrink-0 flex items-center gap-1 px-2 border-b border-v2-border-border-muted bg-v2-background-bg-layer-02">
+        <For each={["back", "forward"] as const}>
+          {(direction) => (
+            <IconButton
+              {...button}
+              disabled={!state().ready || !state()[direction === "back" ? "canGoBack" : "canGoForward"]}
+              aria-label={language.t(direction === "back" ? "common.goBack" : "common.goForward")}
+              onClick={() => props.browser.command({ type: direction })}
+              icon={<Icon name={direction === "back" ? "chevron-left" : "chevron-right"} size="small" />}
+            />
+          )}
+        </For>
+        <IconButton
+          {...button}
+          disabled={!state().ready}
+          aria-label={language.t(state().loading ? "prompt.action.stop" : "error.page.action.reload")}
+          onClick={() => props.browser.command(state().loading ? { type: "stop" } : { type: "reload" })}
+          icon={
+            <Show when={state().loading} fallback={<Icon name="reset" size="small" />}>
+              <Spinner class="size-3" />
+            </Show>
+          }
+        />
+        <form
+          class="min-w-0 flex-1"
+          onSubmit={(event) => {
+            event.preventDefault()
+            if (store.address.trim()) props.browser.command({ type: "navigate", url: store.address })
+          }}
+        >
+          <input
+            class="w-full h-7 px-2 rounded-md border border-v2-border-border-muted bg-v2-background-bg-base text-12-regular text-v2-text-text-base outline-none focus:border-v2-border-border-focus"
+            value={store.address}
+            disabled={!state().ready}
+            placeholder={language.t("session.browser.address.placeholder")}
+            aria-label={language.t("session.browser.address")}
+            onFocus={() => setStore("editing", true)}
+            onBlur={() => setStore({ editing: false, address: state().url })}
+            onInput={(event) => setStore("address", event.currentTarget.value)}
+          />
+        </form>
+        <IconButton
+          {...button}
+          aria-label={language.t("session.browser.close")}
+          onClick={props.browser.close}
+          icon={<Icon name="close-small" size="small" />}
+        />
+      </div>
+      <Show when={state().error}>
+        <div class="shrink-0 px-3 py-1.5 text-12-regular text-text-danger-base border-b border-v2-border-border-muted">
+          {state().error}
+        </div>
+      </Show>
+      <div ref={surface} class="min-h-0 flex-1 bg-v2-background-bg-base" />
+    </aside>
+  )
+}

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

@@ -11,6 +11,7 @@ export type SessionHeaderActionsState = {
   reviewVisible: boolean
   reviewOpened: boolean
   onReviewToggle: () => void
+  browser?: { label: string; opened: boolean; onToggle: () => void }
 }
 
 export function SessionHeaderActions(props: { state: SessionHeaderActionsState }) {
@@ -50,6 +51,24 @@ export function SessionHeaderActions(props: { state: SessionHeaderActionsState }
           />
         </Tooltip>
       </Show>
+      <Show when={props.state.browser}>
+        {(browser) => (
+          <Tooltip class="shrink-0" placement="bottom" value={browser().label}>
+            <IconButton
+              type="button"
+              variant="ghost-muted"
+              size="large"
+              class="!w-9 shrink-0"
+              state={browser().opened ? "pressed" : undefined}
+              onClick={browser().onToggle}
+              aria-label={browser().label}
+              aria-expanded={browser().opened}
+              aria-controls="browser-panel"
+              icon={<Icon name="window-cursor" size="small" />}
+            />
+          </Tooltip>
+        )}
+      </Show>
     </div>
   )
 }

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

@@ -7,9 +7,10 @@ import { useSessionLayout } from "@/session/session-layout"
 import { reviewTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { StatusPopover } from "@/shell/status/status-popover"
 import { TitlebarRight } from "@/shell/titlebar/right-slot"
+import type { createSessionBrowser } from "../browser/model"
 import { SessionHeaderActions, type SessionHeaderActionsState } from "./session-header-actions"
 
-export function SessionHeader() {
+export function SessionHeader(props: { browser: ReturnType<typeof createSessionBrowser> }) {
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
@@ -25,6 +26,9 @@ export function SessionHeader() {
     reviewVisible: isDesktop(),
     reviewOpened: view().reviewPanel.opened(),
     onReviewToggle: () => view().reviewPanel.toggle(),
+    browser: props.browser.available()
+      ? { label: language.t("command.browser.toggle"), opened: props.browser.opened(), onToggle: props.browser.toggle }
+      : undefined,
   }))
 
   return (

packages/app/src/session/route.tsx

@@ -44,9 +44,7 @@ function TargetSessionSettingsCommand() {
   return null
 }
 
-function SessionRouteErrorBoundary(
-  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>,
-) {
+function SessionRouteErrorBoundary(props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>) {
   return (
     <ErrorBoundary
       fallback={(error) => (
@@ -106,7 +104,7 @@ function PendingSessionState(props: { sessionID: string }) {
 
 function SessionStatePanel(props: ParentProps) {
   return (
-    <div class="flex min-h-0 flex-1 p-2">
+    <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
       <SessionPanelFrame raised>{props.children}</SessionPanelFrame>
     </div>
   )

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

@@ -8,7 +8,7 @@ import type { SessionModel } from "./model"
 import { sessionPanelLayout } from "./session-panel-layout"
 import { clampSessionPanelWidth, sessionPanelWidthMax } from "./session-panel-width"
 
-export function createSessionScreenLayout(session: SessionModel, serverScope: string) {
+export function createSessionScreenLayout(session: SessionModel, serverScope: string, browserOpen: () => boolean) {
   const layout = useLayout()
   const settings = useSettings()
   const size = createSizing()
@@ -26,7 +26,7 @@ export function createSessionScreenLayout(session: SessionModel, serverScope: st
         opened: layout.fileTree.opened(),
       }),
   )
-  const resizable = createMemo(() => reviewPanelOpen() || sideTerminalOpen())
+  const resizable = createMemo(() => reviewPanelOpen() || browserOpen() || sideTerminalOpen())
   const sidePanelOpen = createMemo(() => resizable() || fileTreeOpen())
   const [rowSize, setRowSize] = createStore<{ width?: number; height?: number }>({})
   let row: HTMLDivElement | undefined
@@ -60,6 +60,7 @@ export function createSessionScreenLayout(session: SessionModel, serverScope: st
   const panelLayout = createMemo(() =>
     sessionPanelLayout({
       review: reviewPanelOpen(),
+      browser: browserOpen(),
       terminal: sideTerminalOpen(),
       files: fileTreeOpen(),
     }),
@@ -70,7 +71,7 @@ export function createSessionScreenLayout(session: SessionModel, serverScope: st
     if (previous !== stacked) setMotion({ gap: stacked, closing: !stacked })
     return stacked
   }, panelLayout().stacked)
-  const sideRegionOpen = createMemo(() => reviewPanelOpen() || fileTreeOpen())
+  const sideRegionOpen = createMemo(() => reviewPanelOpen() || browserOpen() || fileTreeOpen())
   const terminalPane = createMemo(() =>
     Math.min(layout.terminal.height(), typeof window === "undefined" ? 600 : window.innerHeight * 0.6),
   )

packages/app/src/session/screen.tsx

@@ -19,6 +19,8 @@ import { SessionDesktopReview, SessionMobileReview, SessionMobileTabs } from "./
 import { createSessionTimelineInteraction } from "./timeline/interaction"
 import { ActiveSessionComposerRegion, createActiveSessionRegion } from "./composer/region"
 import { SessionIdentityHeader } from "./session-identity-header"
+import { createSessionBrowser } from "./browser/model"
+import { SessionBrowserPane } from "./browser/pane"
 
 export function SessionScreen(props: { session: SessionModel }) {
   const session = props.session
@@ -26,7 +28,8 @@ export function SessionScreen(props: { session: SessionModel }) {
   const serverSDK = useServerSDK()
   const settings = useSettings()
   const isDesktop = session.isDesktop
-  const screen = createSessionScreenLayout(session, serverSDK.scope)
+  const browser = createSessionBrowser(session)
+  const screen = createSessionScreenLayout(session, serverSDK.scope, browser.opened)
   const timeline = createSessionTimelineInteraction(session)
   const messagesReady = timeline.ready
   const [store, setStore] = createStore({
@@ -163,8 +166,8 @@ export function SessionScreen(props: { session: SessionModel }) {
 
   return (
     <>
-      <SessionHeader />
-      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+      <SessionHeader browser={browser} />
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <div ref={screen.panel.ref} class="relative flex-1 min-h-0 flex flex-col md:flex-row gap-2">
           <div
             classList={{
@@ -246,7 +249,13 @@ export function SessionScreen(props: { session: SessionModel }) {
                         setStore("sideReviewPresent", false)
                       }}
                     >
-                      <SessionDesktopReview review={review} present={store.sideReviewPresent} />
+                      <Show
+                        when={browser.registration()}
+                        keyed
+                        fallback={<SessionDesktopReview review={review} present={store.sideReviewPresent} />}
+                      >
+                        {(registration) => <SessionBrowserPane registration={registration} browser={browser} />}
+                      </Show>
                     </div>
                   </Show>
                 </div>

packages/app/src/session/session-frame.tsx

@@ -2,7 +2,10 @@ import type { ParentProps } from "solid-js"
 
 export function SessionRouteFrame(props: ParentProps<{ padded?: boolean }>) {
   return (
-    <div class="relative flex size-full flex-col overflow-hidden" classList={{ "p-2": props.padded }}>
+    <div
+      class="relative flex size-full flex-col overflow-hidden"
+      classList={{ "px-2 pb-2 pt-[var(--shell-top-inset,8px)]": props.padded }}
+    >
       {props.children}
     </div>
   )

packages/app/src/session/session-panel-layout.test.ts

@@ -3,15 +3,23 @@ import { sessionPanelLayout } from "./session-panel-layout"
 
 describe("sessionPanelLayout", () => {
   test("keeps one owner while changing panel geometry", () => {
-    expect(sessionPanelLayout({ review: false, terminal: false, files: false })).toEqual({
+    expect(sessionPanelLayout({ review: false, browser: false, terminal: false, files: false })).toEqual({
       visible: false,
       stacked: false,
     })
-    expect(sessionPanelLayout({ review: false, terminal: true, files: false })).toEqual({
+    expect(sessionPanelLayout({ review: false, browser: false, terminal: true, files: false })).toEqual({
       visible: true,
       stacked: false,
     })
-    expect(sessionPanelLayout({ review: true, terminal: true, files: false })).toEqual({
+    expect(sessionPanelLayout({ review: true, browser: false, terminal: true, files: false })).toEqual({
+      visible: true,
+      stacked: true,
+    })
+    expect(sessionPanelLayout({ review: false, browser: true, terminal: false, files: false })).toEqual({
+      visible: true,
+      stacked: false,
+    })
+    expect(sessionPanelLayout({ review: false, browser: true, terminal: true, files: false })).toEqual({
       visible: true,
       stacked: true,
     })

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

@@ -1,6 +1,6 @@
-export function sessionPanelLayout(input: { review: boolean; terminal: boolean; files: boolean }) {
+export function sessionPanelLayout(input: { review: boolean; browser: boolean; terminal: boolean; files: boolean }) {
   return {
-    visible: input.review || input.terminal || input.files,
-    stacked: input.review && input.terminal,
+    visible: input.review || input.browser || input.terminal || input.files,
+    stacked: (input.review || input.browser) && input.terminal,
   }
 }

packages/app/src/session/timeline/controller-projection.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, test } from "bun:test"
 import type { SessionInboxInfo, SessionMessageInfo } from "@opencode-ai/client/promise"
+import { createRoot } from "solid-js"
 import { applyTimelineMessageHandoff, visibleTimelineMessages } from "./controller-projection"
+import { createTimelineProjection } from "./projection"
 
 const messages = [
   { id: "msg_1", type: "user", text: "first", time: { created: 1 } },
@@ -17,6 +19,105 @@ const messages = [
 ] satisfies SessionMessageInfo[]
 
 describe("visibleTimelineMessages", () => {
+  const steer = {
+    id: "msg_3",
+    sessionID: "ses_1",
+    timeCreated: 3,
+    type: "user",
+    delivery: "steer",
+    payload: { text: "queued" },
+  } satisfies SessionInboxInfo
+  const work = {
+    id: "msg_5",
+    type: "assistant",
+    agent: "build",
+    model: { id: "model", providerID: "provider" },
+    content: [
+      {
+        type: "tool",
+        id: "tool_read",
+        name: "read",
+        state: {
+          status: "completed",
+          input: { filePath: "src/example.ts" },
+          content: [{ type: "text", text: "export const example = true" }],
+          metadata: {},
+        },
+        time: { created: 5, completed: 6 },
+      },
+    ],
+    time: { created: 5, completed: 6 },
+  } satisfies SessionMessageInfo
+
+  test("keeps work and thinking above an undelivered steer", () => {
+    const source = [...messages.slice(0, 3), work]
+    const visible = visibleTimelineMessages(source, [steer])
+    expect(visible.map((message) => message.id)).toEqual(["msg_1", "msg_2", "msg_5", "msg_3"])
+    expect(source.map((message) => message.id)).toEqual(["msg_1", "msg_2", "msg_3", "msg_5"])
+    expect(visible[2]).toBe(work)
+
+    createRoot((dispose) => {
+      const projection = createTimelineProjection({
+        sessionMessages: () => visible,
+        status: () => ({ type: "busy" }),
+        showReasoningSummaries: () => false,
+        shellToolDefaultOpen: () => false,
+        editToolDefaultOpen: () => false,
+        pendingUserMessageIDs: () => new Set([steer.id]),
+      })
+      expect(projection.activeMessageID()).toBe("msg_1")
+      expect(projection.rows().map((row) => [row._tag, row.userMessageID])).toEqual([
+        ["UserMessage", "msg_1"],
+        ["AssistantPart", "msg_1"],
+        ["Thinking", "msg_1"],
+        ["TurnGap", "msg_3"],
+        ["UserMessage", "msg_3"],
+      ])
+      expect(
+        projection
+          .assistantMessagesByParent()
+          .get("msg_1")
+          ?.map((message) => message.id),
+      ).toEqual(["msg_2", "msg_5"])
+      expect(projection.assistantMessagesByParent().has(steer.id)).toBe(false)
+      dispose()
+    })
+  })
+
+  test("moves a queued input after existing work when changed to steer", () => {
+    const source = [...messages.slice(0, 3), work]
+    expect(visibleTimelineMessages(source, [{ ...steer, delivery: "queue" }]).map((message) => message.id)).toEqual([
+      "msg_1",
+      "msg_2",
+      "msg_5",
+    ])
+    expect(visibleTimelineMessages(source, [steer]).map((message) => message.id)).toEqual([
+      "msg_1",
+      "msg_2",
+      "msg_5",
+      "msg_3",
+    ])
+    const delivered = [messages[0], messages[1], work, messages[2]]
+    expect(visibleTimelineMessages(delivered, [])).toBe(delivered)
+  })
+
+  test("preserves steer order and excludes reverted steers", () => {
+    const source = [...messages, work]
+    const pending = [steer, { ...steer, id: "msg_4" }]
+    expect(visibleTimelineMessages(source, pending).map((message) => message.id)).toEqual([
+      "msg_1",
+      "msg_2",
+      "msg_5",
+      "msg_3",
+      "msg_4",
+    ])
+    expect(visibleTimelineMessages(source, pending, "msg_4").map((message) => message.id)).toEqual([
+      "msg_1",
+      "msg_2",
+      "msg_3",
+    ])
+  })
+
   test("hides queued inputs until delivery", () => {
     const pending = [
       {

packages/app/src/session/timeline/controller-projection.ts

@@ -17,8 +17,19 @@ export function visibleTimelineMessages(
   const queued = new Set(
     pending.flatMap((item) => (item.type === "user" && item.delivery === "queue" ? [item.id] : [])),
   )
-  if (queued.size === 0 && !revertMessageID) return messages
-  return messages.filter((message) => !queued.has(message.id) && (!revertMessageID || message.id < revertMessageID))
+  const steers = new Set(
+    pending.flatMap((item) => (item.type === "user" && item.delivery === "steer" ? [item.id] : [])),
+  )
+  if (queued.size === 0 && steers.size === 0 && !revertMessageID) return messages
+  const visible = messages.filter(
+    (message) => !queued.has(message.id) && (!revertMessageID || message.id < revertMessageID),
+  )
+  if (steers.size === 0) return visible
+  // Pending steers do not own assistant work until they are delivered.
+  return [
+    ...visible.filter((message) => !steers.has(message.id)),
+    ...visible.filter((message) => steers.has(message.id)),
+  ]
 }
 
 export function timelineChildTitle(input: {

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

@@ -481,7 +481,6 @@ function MessageTimelineView(
   const backgroundHintPresence = createAnimatedPresence(backgroundHintPartID, () => backgroundHintRef() ?? null)
   return (
     <VirtualizedTimeline
-      workspaceSession={workspaceSession}
       bottomSpacer={
         <Show when={backgroundHintPresence.present()}>
           <div

packages/app/src/session/timeline/virtualizer.tsx

@@ -55,7 +55,6 @@ type Input = {
 type ViewProps = {
   header: JSX.Element
   bottomSpacer?: JSX.Element
-  workspaceSession: Accessor<boolean>
   deferred: (row: TimelineRow.TimelineRow) => boolean
   renderRow: (row: Accessor<TimelineRow.TimelineRow>, onSizeChange?: () => void) => JSX.Element
 }
@@ -371,7 +370,7 @@ export function createTimelineVirtualizer(input: Input) {
     }
 
     return (
-      <div class="relative w-full h-full min-w-0" data-workspace-session={props.workspaceSession() ? "" : undefined}>
+      <div class="relative w-full h-full min-w-0">
         <div
           class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
           classList={{

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

@@ -403,6 +403,20 @@ export const SettingsGeneral: Component<{
       <h3 class="settings-section-title">{language.t("settings.general.section.advanced")}</h3>
 
       <SettingsList>
+        <Show when={platform.browserPane}>
+          <SettingsRow
+            title={language.t("settings.general.row.browserPane.title")}
+            description={language.t("settings.general.row.browserPane.description")}
+          >
+            <div data-action="settings-experimental-browser">
+              <Switch
+                checked={settings.general.experimentalBrowser()}
+                onChange={(checked) => settings.general.setExperimentalBrowser(checked)}
+              />
+            </div>
+          </SettingsRow>
+        </Show>
+
         <SettingsRow
           title={language.t("settings.general.row.showSearch.title")}
           description={language.t("settings.general.row.showSearch.description")}

packages/app/src/settings/model.tsx

@@ -42,6 +42,7 @@ export interface Settings {
     mobileTitlebarPosition: "top" | "bottom"
     terminalPlacement: TerminalPlacement
     followUpBehavior: FollowUpBehavior
+    experimentalBrowser: boolean
   }
   appearance: {
     fontSize: number
@@ -131,6 +132,7 @@ const defaultSettings: Settings = {
     mobileTitlebarPosition: "top",
     terminalPlacement: "side",
     followUpBehavior: "steer",
+    experimentalBrowser: true,
   },
   appearance: {
     fontSize: 14,
@@ -266,6 +268,13 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFollowUpBehavior(value: FollowUpBehavior) {
           setStore("general", "followUpBehavior", value)
         },
+        experimentalBrowser: withFallback(
+          () => store.general?.experimentalBrowser,
+          defaultSettings.general.experimentalBrowser,
+        ),
+        setExperimentalBrowser(value: boolean) {
+          setStore("general", "experimentalBrowser", value)
+        },
       },
       visibility: {
         fileTree: showFileTree,

packages/app/src/settings/providers/extensions.tsx

@@ -27,6 +27,7 @@ export const SettingsExtensions: Component = () => {
   const [mcpList, { refetch: refetchMcp }] = createResource(
     () => serverSdk.connection.status() === "connected",
     () => serverSdk.api.mcp.list().then((result) => result.data),
+    { initialValue: [] },
   )
   const toggleMcp = useMcpToggle(() => undefined, refetchMcp)
   const mcps = createMemo<McpRowItem[]>(() => {
@@ -44,6 +45,7 @@ export const SettingsExtensions: Component = () => {
   const [pluginList] = createResource(
     () => serverSdk.connection.status() === "connected",
     () => serverSdk.api.plugin.list().then((result) => result.data),
+    { initialValue: [] },
   )
   const plugins = createMemo<PluginRowItem[]>(() => pluginLabels(pluginList.latest ?? []).map((name) => ({ name })))
 

packages/app/src/settings/settings.css

@@ -885,8 +885,6 @@
   display: flex;
   flex-direction: column;
   gap: 0;
-  max-height: 480px;
-  overflow-y: auto;
   padding: 20px;
   border-radius: 6px;
   background-color: var(--v2-background-bg-base);
@@ -1048,8 +1046,6 @@
   }
 
   .settings-workspaces-inventory [data-component="settings-list"] {
-    max-height: none;
-    overflow-y: visible;
     padding: 14px;
   }
 
@@ -1082,8 +1078,6 @@
   }
 
   .settings-workspaces-inventory [data-component="settings-list"] {
-    max-height: none;
-    overflow-y: visible;
     padding: 14px;
   }
 

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

@@ -97,10 +97,12 @@ export const ProjectSettingsExtensions: Component = () => {
   const [globalPluginList] = createResource(
     () => serverSDK.connection.status() === "connected",
     () => serverSDK.api.plugin.list().then((result) => result.data),
+    { initialValue: [] },
   )
   const [projectPluginList] = createResource(
     () => (serverSDK.connection.status() === "connected" ? directorySDK().directory : undefined),
     (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
+    { initialValue: [] },
   )
   const globalPlugins = createMemo(() => pluginLabels(globalPluginList.latest ?? []))
   const projectPlugins = createMemo(() => {

packages/app/src/settings/workspaces/workspaces.tsx

@@ -60,6 +60,7 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
 
   const projectQuery = useQuery(() => ({
     queryKey: [serverSDK.scope, "settings-workspace-projects"] as const,
+    enabled: serverSDK.connection.status() === "connected",
     queryFn: async () =>
       Promise.all(
         (await serverSDK.api.project.list()).map(async (project) => {
@@ -71,10 +72,9 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
       ),
     refetchOnMount: "always",
   }))
-  const workspaces = createMemo(() => workspaceInventory(projectQuery.data ?? []))
-  const projects = createMemo(() =>
-    (projectQuery.data ?? []).filter((project) => managedWorkspaceDirectories(project).length > 0),
-  )
+  const inventory = createMemo(() => (projectQuery.isPending ? [] : (projectQuery.data ?? [])))
+  const workspaces = createMemo(() => workspaceInventory(inventory()))
+  const projects = createMemo(() => inventory().filter((project) => managedWorkspaceDirectories(project).length > 0))
   const projectName = (project: Project) => project.name || getFilename(project.worktree)
   const projectOptions = createMemo(() => [
     { id: "all", label: language.t("settings.workspaces.filter.all") },
@@ -110,18 +110,18 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
       workspaceDirectories().map((directory) => String(pathKey(directory))),
     ] as const,
     queryFn: () => loadSessions(workspaceDirectories()),
-    enabled: workspaceDirectories().length > 0,
+    enabled: serverSDK.connection.status() === "connected" && workspaceDirectories().length > 0,
     refetchOnMount: "always",
   }))
-  const sessionsByWorkspace = createMemo(
-    () =>
-      new Map(
-        workspaces().map((workspace) => [
-          pathKey(workspace.directory),
-          sessionQuery.data ? sessionsForWorkspace(sessionQuery.data, workspace.directory) : [],
-        ]),
-      ),
-  )
+  const sessionsByWorkspace = createMemo(() => {
+    const sessions = sessionQuery.isPending ? [] : (sessionQuery.data ?? [])
+    return new Map(
+      workspaces().map((workspace) => [
+        pathKey(workspace.directory),
+        sessionsForWorkspace(sessions, workspace.directory),
+      ]),
+    )
+  })
   const workspaceSessions = (workspace: Workspace) => sessionsByWorkspace().get(pathKey(workspace.directory)) ?? []
   const sessionCount = (workspace: Workspace) => {
     if (sessionQuery.isPending) return language.t("session.messages.loading")
@@ -279,7 +279,9 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
       <div class="settings-tab-body settings-workspaces">
         <div class="settings-workspaces-toolbar">
           <span class="settings-workspaces-count">
-            {language.plural("settings.workspaces.count", filtered().length)}
+            <Show when={!projectQuery.isPending && !projectQuery.isError}>
+              {language.plural("settings.workspaces.count", filtered().length)}
+            </Show>
           </span>
           <div class="settings-workspaces-toolbar-actions">
             <Show when={projects().length > 1}>
@@ -332,7 +334,17 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
         <div class="settings-workspaces-inventory">
           <Show
             when={filtered().length > 0}
-            fallback={<div class="settings-workspaces-empty">{language.t("settings.workspaces.empty")}</div>}
+            fallback={
+              <div class="settings-workspaces-empty">
+                {language.t(
+                  projectQuery.isPending
+                    ? "common.loading"
+                    : projectQuery.isError
+                      ? "common.requestFailed"
+                      : "settings.workspaces.empty",
+                )}
+              </div>
+            }
           >
             <SettingsList>
               <For each={filtered()}>

packages/app/src/shell/routes/routes.tsx

@@ -36,7 +36,7 @@ export function AppRoutes() {
           <SessionRouteFrame>
             <Suspense
               fallback={
-                <div class="flex min-h-0 flex-1 p-2">
+                <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
                   <SessionPanelFrame raised />
                 </div>
               }

packages/app/src/shell/shell.tsx

@@ -43,6 +43,13 @@ export default function Layout(props: ParentProps) {
         style={{
           "padding-top": "env(safe-area-inset-top, 0px)",
           "padding-bottom": "env(safe-area-inset-bottom, 0px)",
+          // The native Windows titlebar already includes the gap above the content panels.
+          "--shell-top-inset":
+            platform.platform === "desktop" &&
+            platform.os === "windows" &&
+            !(mobile() && preferences.general.mobileTitlebarPosition() === "bottom")
+              ? "0px"
+              : "8px",
         }}
       >
         <Titlebar
@@ -59,7 +66,7 @@ export default function Layout(props: ParentProps) {
             <aside
               ref={(element) => setState("tabsMount", element)}
               data-slot="vertical-tabs-sidebar"
-              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 py-2"
+              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 pb-2 pt-[var(--shell-top-inset,8px)]"
               style={{ width: `${state.tabsWidth}px` }}
             >
               <ResizeHandle

packages/app/src/shell/titlebar/titlebar.tsx

@@ -27,6 +27,7 @@ import { newTabTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { TitlebarRightMount } from "@/shell/titlebar/right-slot"
 
 const titlebarHeight = 36
+const windowsTitlebarHeight = 44 // Includes the content inset; matches the native Windows overlay.
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
 const macTrafficLightsBaseWidth = 84
@@ -59,7 +60,7 @@ export function Titlebar(props: {
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
   const minHeight = () => {
     if (mac()) return `${titlebarHeight / zoom()}px`
-    if (windows()) return `env(titlebar-area-height, ${titlebarHeight / Math.min(titlebarZoom(), 1)}px)`
+    if (windows()) return `env(titlebar-area-height, ${windowsTitlebarHeight / Math.min(titlebarZoom(), 1)}px)`
     return undefined
   }
   const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`

packages/app/test-browser/playwright-config.test.ts

@@ -0,0 +1,70 @@
+import { expect, test } from "bun:test"
+import path from "node:path"
+
+test.each([
+  { name: "local development", ci: "", build: "", built: false },
+  { name: "local production build", ci: "", build: "1", built: true },
+  { name: "CI production build", ci: "true", build: "", built: true },
+  { name: "CI cannot opt into development", ci: "true", build: "0", built: true },
+])("Playwright uses $name", ({ ci, build, built }) => {
+  const result = Bun.spawnSync({
+    cmd: [process.execPath, "-e", 'import config from "./playwright.config.ts"; console.log(JSON.stringify(config))'],
+    cwd: path.resolve(import.meta.dirname, ".."),
+    env: {
+      ...process.env,
+      CI: ci,
+      PLAYWRIGHT_BUILD: build,
+      PLAYWRIGHT_BASE_URL: undefined,
+      PLAYWRIGHT_PORT: "4321",
+      PLAYWRIGHT_SERVER_HOST: "127.0.0.2",
+      PLAYWRIGHT_SERVER_PORT: "4322",
+    },
+  })
+  expect(result.exitCode).toBe(0)
+  const config = JSON.parse(result.stdout.toString())
+  expect(config.use.baseURL).toBe("http://127.0.0.1:4321")
+  expect(config.webServer.url).toBe(config.use.baseURL)
+  expect(config.webServer.command).toBe(
+    built
+      ? "bun run build && bun run serve -- --host 127.0.0.1 --port 4321 --strictPort"
+      : "bun run dev -- --host 127.0.0.1 --port 4321 --strictPort",
+  )
+  expect(config.webServer.reuseExistingServer).toBe(!built)
+  expect(config.webServer.env).toEqual({
+    VITE_OPENCODE_SERVER_HOST: built ? "127.0.0.1" : "127.0.0.2",
+    VITE_OPENCODE_SERVER_PORT: built ? "4321" : "4322",
+  })
+})
+
+test.each([
+  "./playwright.config.ts",
+  "./e2e/performance/playwright.config.ts",
+  "./e2e/performance/playwright.uncapped.config.ts",
+  "./e2e/performance/timeline-stability/playwright.config.ts",
+])("%s leaves an explicit external app unmanaged", (file) => {
+  const result = Bun.spawnSync({
+    cmd: [
+      process.execPath,
+      "-e",
+      `import config from ${JSON.stringify(file)}; console.log(JSON.stringify({ ...config, fixtureHost: process.env.PLAYWRIGHT_SERVER_HOST, fixturePort: process.env.PLAYWRIGHT_SERVER_PORT }))`,
+    ],
+    cwd: path.resolve(import.meta.dirname, ".."),
+    env: { ...process.env, CI: "true", PLAYWRIGHT_BASE_URL: "http://127.0.0.1:4444" },
+  })
+  expect(result.exitCode).toBe(0)
+  const config = JSON.parse(result.stdout.toString())
+  expect(config.webServer).toBeUndefined()
+  expect(config.use.baseURL).toBe("http://127.0.0.1:4444")
+  expect(config.fixtureHost).toBe("127.0.0.1")
+  expect(config.fixturePort).toBe("4444")
+})
+
+test("Playwright rejects HTTPS targets unsupported by the API fixtures", () => {
+  const result = Bun.spawnSync({
+    cmd: [process.execPath, "-e", 'import "./playwright.config.ts"'],
+    cwd: path.resolve(import.meta.dirname, ".."),
+    env: { ...process.env, CI: "true", PLAYWRIGHT_BASE_URL: "https://e2e.example.com" },
+  })
+  expect(result.exitCode).not.toBe(0)
+  expect(result.stderr.toString()).toContain("E2E fixtures require an http:// app URL")
+})

packages/app/test-browser/provider-catalog.test.ts

@@ -0,0 +1,52 @@
+import { expect, test } from "bun:test"
+import { createMemo, createRoot } from "solid-js"
+import { createStore } from "solid-js/store"
+import { normalizeProviderList } from "@/runtime/server/global-sync/utils"
+
+test("preserves an already normalized reactive catalog", () => {
+  const [store] = createStore({ catalog: { all: new Map<string, never>(), connected: [], default: {} } })
+  expect(normalizeProviderList(store.catalog)).toBe(store.catalog)
+})
+
+test("shares catalog snapshots and reacts to replacement lists", () => {
+  createRoot((dispose) => {
+    const provider = { id: "openai", name: "OpenAI", package: "@ai-sdk/openai", activation: "enabled" as const }
+    const model = {
+      id: "gpt-5",
+      modelID: "gpt-5",
+      providerID: "openai",
+      name: "GPT-5",
+      settings: {},
+      headers: {},
+      capabilities: { tools: true, input: ["text" as const], output: ["text" as const] },
+      variants: [],
+      time: { released: 1 },
+      cost: [],
+      status: "active" as const,
+      enabled: true,
+      limit: { context: 128_000, output: 8192 },
+    }
+    const [store, setStore] = createStore({ providers: [provider], models: [model] })
+    const first = createMemo(() => normalizeProviderList(store.providers, store.models))
+    const second = createMemo(() => normalizeProviderList(store.providers, store.models))
+    expect(first()).toBe(second())
+    const initial = first()
+    setStore("models", [{ ...model, name: "Renamed", limit: { context: 256_000, output: 16384 } }])
+    expect(first()).not.toBe(initial)
+    expect(first()).toBe(second())
+    expect(first().all.get("openai")?.models[model.id]).toMatchObject({
+      name: "Renamed",
+      limit: { context: 256_000, output: 16384 },
+    })
+    const renamed = first()
+    setStore("providers", [{ ...provider, name: "Custom OpenAI" }])
+    expect(first()).not.toBe(renamed)
+    expect(first()).toBe(second())
+    expect(first().all.get("openai")?.name).toBe("Custom OpenAI")
+    expect(normalizeProviderList(store.providers).all.get("openai")?.models).toEqual({})
+    setStore("models", [])
+    expect(first().all.get("openai")?.models).toEqual({})
+    expect(first().default).toEqual({})
+    dispose()
+  })
+})

packages/app/tsconfig.json

@@ -21,6 +21,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "package.json"],
+  "include": [
+    "src",
+    "component-tests",
+    "playwright.components.config.ts",
+    "../storybook/playwright/*.ts",
+    "package.json"
+  ],
   "exclude": ["dist", "ts-dist"]
 }

packages/cli/package.json

@@ -27,7 +27,7 @@
     "@effect/platform-node": "catalog:",
     "@opencode-ai/client": "workspace:*",
     "@opencode-ai/plugin": "workspace:*",
-    "@opencode-ai/pty": "0.1.10",
+    "@opencode-ai/pty": "0.1.12",
     "@opencode-ai/schema": "workspace:*",
     "@opencode-ai/server": "workspace:*",
     "@opencode-ai/tui": "workspace:*",

packages/cli/src/commands/handlers/service/restart.ts

@@ -4,11 +4,14 @@ import { Service } from "@opencode-ai/client/effect/service"
 import { Commands } from "../../commands"
 import { Runtime } from "../../../framework/runtime"
 import { ServiceConfig } from "../../../services/service-config"
+import { ServerConnection } from "../../../services/server-connection"
 
 export default Runtime.handler(
   Commands.commands.service.commands.restart,
   Effect.fn("cli.service.restart")(function* () {
     const options = yield* ServiceConfig.options()
+    // Keep this explicit: automatic service replacement must preserve terminals.
+    yield* ServerConnection.shutdownPersistentPty(options).pipe(Effect.ignore)
     yield* Service.stop(options)
     const transport = yield* Service.ensure(options)
     process.stdout.write(transport.url + EOL)

packages/client/README.md

@@ -5,6 +5,7 @@ Private generation target for clients derived directly from OpenCode's authorita
 ## Entrypoints
 
 - `@opencode-ai/client`: zero-Effect Promise client using `fetch`.
+- `@opencode-ai/client/node`: Promise client with Session-scoped browser attachments.
 - `@opencode-ai/client/effect`: rich Effect network client using an environment-provided `HttpClient`.
 
 The generated surface includes every standard HTTP group from Server's concrete API. The build compiler reads `@opencode-ai/server/api`; the generated Effect runtime imports a client-local projection built from Protocol, with a generation-equivalence test preventing transport drift. Custom transports such as the PTY WebSocket connection remain outside the generic HTTP client. Run `bun run generate` after changing the contract and `bun run check:generated` to detect committed-output drift.
@@ -13,6 +14,16 @@ The Effect entrypoint uses canonical decoded values such as `Session.ID`, `Locat
 
 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.
 
+## Node browser attachments
+
+```ts
+import { BrowserDriver, OpenCode } from "@opencode-ai/client/node"
+const client = OpenCode.make({ baseUrl: "https://opencode.example", headers: { authorization } })
+await using registration = await client.browser.register({ sessionID, open: showBrowserPane })
+await using attachment = await registration.attach({ driver: BrowserDriver.chromium(createChromiumPort) })
+await attachment.resource.navigate("localhost:5173")
+```
+
 Effect consumers construct canonical decoded inputs:
 
 ```ts

packages/client/package.json

@@ -17,6 +17,7 @@
   ],
   "exports": {
     ".": "./src/promise/index.ts",
+    "./node": "./src/node/index.ts",
     "./promise": "./src/promise/index.ts",
     "./promise/api": "./src/promise/api.ts",
     "./service": "./src/promise/service.ts",
@@ -34,7 +35,8 @@
   },
   "dependencies": {
     "@opencode-ai/schema": "workspace:*",
-    "@opencode-ai/protocol": "workspace:*"
+    "@opencode-ai/protocol": "workspace:*",
+    "ws": "8.21.0"
   },
   "peerDependencies": {
     "effect": "4.0.0-rc.111",
@@ -53,6 +55,7 @@
     "@opencode-ai/httpapi-codegen": "workspace:*",
     "@tsconfig/bun": "catalog:",
     "@types/bun": "catalog:",
+    "@types/ws": "8.18.1",
     "@typescript/native-preview": "catalog:",
     "effect": "catalog:",
     "solid-js": "catalog:"

packages/client/src/node/browser/chromium.ts

@@ -0,0 +1,316 @@
+import type { Browser } from "@opencode-ai/schema/browser"
+import { BrowserDriverError, type BrowserDriver, type BrowserDriverContext } from "./driver.js"
+
+type ViewState = Omit<Browser.State, "generation">
+type Node = {
+  nodeId: string
+  backendDOMNodeId?: number
+  childIds?: string[]
+  frameId?: string
+  ignored?: boolean
+  role?: { value?: string }
+  name?: { value?: unknown }
+  value?: { value?: unknown }
+  properties?: Array<{ name: string; value?: { value?: unknown } }>
+}
+
+export interface ChromiumPort<Resource> {
+  readonly resource: Resource
+  readonly state: () => ViewState
+  readonly subscribe: (listener: (event: { state: ViewState; mainDocumentChanged: boolean }) => void) => () => void
+  readonly navigate: (url: string) => PromiseLike<void>
+  readonly back: () => PromiseLike<void> | void
+  readonly forward: () => PromiseLike<void> | void
+  readonly reload: () => PromiseLike<void> | void
+  readonly stop: () => void
+  readonly send: (command: { method: string; params?: Record<string, unknown> }) => PromiseLike<unknown>
+  readonly viewport: () => { width: number; height: number }
+  readonly screenshot: (maximum: number) => PromiseLike<{ data: Uint8Array; width: number; height: number }>
+  readonly dispose: () => PromiseLike<void> | void
+}
+
+export interface ChromiumController<Resource> extends AsyncDisposable {
+  readonly resource: Resource
+  readonly state: () => Browser.State
+  readonly subscribe: (listener: (state: Browser.State) => void) => () => void
+  readonly navigate: (url: string) => Promise<void>
+  readonly back: () => Promise<void>
+  readonly forward: () => Promise<void>
+  readonly reload: () => Promise<void>
+  readonly stop: () => void
+  readonly dispose: () => Promise<void>
+}
+
+export type ChromiumDriver<Resource> = BrowserDriver<ChromiumController<Resource>>
+
+type Page<Resource> = {
+  port: ChromiumPort<Resource>
+  signal: AbortSignal
+  refs: Map<string, { id: number; editable: boolean }>
+  listeners: Set<(state: Browser.State) => void>
+  generation: number
+  nextRef: number
+  queue: Promise<void>
+  active?: AbortController
+  disposed: boolean
+  disposal?: Promise<void>
+}
+
+export function chromiumDriver<Resource>(
+  create: (context: BrowserDriverContext) => PromiseLike<ChromiumPort<Resource>> | ChromiumPort<Resource>,
+): ChromiumDriver<Resource> {
+  return async (context) => {
+    const port = await create(context)
+    if (context.signal.aborted) {
+      await port.dispose()
+      throw context.signal.reason ?? new Error("Browser creation was aborted")
+    }
+    const page: Page<Resource> = {
+      port,
+      signal: context.signal,
+      refs: new Map(),
+      listeners: new Set(),
+      generation: 0,
+      nextRef: 0,
+      queue: Promise.resolve(),
+      disposed: false,
+    }
+    const unsubscribe = port.subscribe((event) => {
+      if (page.disposed) return
+      if (event.mainDocumentChanged) {
+        page.generation++
+        page.refs.clear()
+      }
+      page.listeners.forEach((listener) => listener(state(page)))
+    })
+    const dispose = () => {
+      if (page.disposal) return page.disposal
+      page.disposed = true
+      page.active?.abort()
+      page.listeners.clear()
+      page.refs.clear()
+      unsubscribe()
+      port.stop()
+      page.disposal = Promise.resolve(port.dispose())
+      return page.disposal
+    }
+    const controller: ChromiumController<Resource> = {
+      resource: port.resource,
+      state: () => state(page),
+      subscribe: (listener) => {
+        if (page.disposed) throw failure("not_attached", "Browser is no longer attached.")
+        page.listeners.add(listener)
+        listener(state(page))
+        return () => page.listeners.delete(listener)
+      },
+      navigate: (url) => schedule(page, undefined, (signal) => navigate(page, url, signal)),
+      back: () => schedule(page, undefined, async () => port.back()),
+      forward: () => schedule(page, undefined, async () => port.forward()),
+      reload: () => schedule(page, undefined, async () => port.reload()),
+      stop: () => {
+        if (page.disposed) throw failure("not_attached", "Browser is no longer attached.")
+        page.active?.abort()
+        port.stop()
+      },
+      dispose,
+      [Symbol.asyncDispose]: dispose,
+    }
+    return {
+      resource: controller,
+      state: controller.state,
+      subscribe: controller.subscribe,
+      execute: (command, options) => schedule(page, options.signal, (signal) => execute(page, command, signal)),
+      dispose,
+    }
+  }
+}
+
+async function execute<Resource>(page: Page<Resource>, command: Browser.Command, signal: AbortSignal) {
+  if (page.generation !== command.generation) throw failure("stale_ref", "Browser page changed.")
+  if (command.type === "navigate") {
+    await navigate(page, command.url, signal)
+    return { type: "navigate", state: state(page) } as const
+  }
+  if (command.type === "snapshot") return snapshot(page, command.generation, signal)
+  if (command.type === "screenshot") {
+    const image = await bounded(() => page.port.screenshot(2_000), signal)
+    if (image.data.byteLength > 5 * 1_024 * 1_024) throw failure("result_too_large", "Screenshot exceeds 5 MiB.")
+    if (![image.width, image.height].every((size) => Number.isSafeInteger(size) && size > 0 && size <= 2_000)) {
+      throw failure("internal", "Browser pane has no drawable area.")
+    }
+    if (page.generation !== command.generation) throw failure("stale_ref", "Browser page changed.")
+    return { type: "screenshot", state: state(page), mediaType: "image/png", ...image } as const
+  }
+  if (command.type === "click" || command.type === "fill") {
+    const target = page.refs.get(command.ref)
+    if (!target || (command.type === "fill" && !target.editable))
+      throw failure("stale_ref", "Browser element is stale.")
+    if (command.type === "fill") {
+      await send(page, "DOM.focus", { backendNodeId: target.id }, signal)
+      await key(page, { key: "a", code: "KeyA", modifiers: process.platform === "darwin" ? 4 : 2 }, signal)
+      await key(page, { key: "Backspace", code: "Backspace", windowsVirtualKeyCode: 8 }, signal)
+      await send(page, "Input.insertText", { text: command.text }, signal)
+    }
+    if (command.type === "click") {
+      await send(page, "DOM.scrollIntoViewIfNeeded", { backendNodeId: target.id }, signal)
+      const result = (await send(page, "DOM.getBoxModel", { backendNodeId: target.id }, signal)) as {
+        model?: { content?: number[] }
+      }
+      const box = result.model?.content
+      if (!box || box.length !== 8 || !box.every(Number.isFinite)) throw failure("stale_ref", "Element has no bounds.")
+      const point = { x: (box[0] + box[4]) / 2, y: (box[1] + box[5]) / 2 }
+      for (const type of ["mouseMoved", "mousePressed", "mouseReleased"]) {
+        await send(page, "Input.dispatchMouseEvent", { type, ...point, button: "left", clickCount: 1 }, signal)
+      }
+    }
+  }
+  if (command.type === "press") {
+    const codes: Partial<Record<Browser.Key, number>> = { Enter: 13, Tab: 9, Escape: 27, Backspace: 8, Delete: 46 }
+    const value = { key: command.key === "Space" ? " " : command.key, code: command.key }
+    await key(page, { ...value, ...(codes[command.key] ? { windowsVirtualKeyCode: codes[command.key] } : {}) }, signal)
+  }
+  if (command.type === "scroll") {
+    const viewport = page.port.viewport()
+    const distance = Math.min(2_000, Math.max(1, command.pixels))
+    const horizontal = command.direction === "left" ? -distance : command.direction === "right" ? distance : 0
+    const vertical = command.direction === "up" ? -distance : command.direction === "down" ? distance : 0
+    const point = { x: viewport.width / 2, y: viewport.height / 2 }
+    await send(
+      page,
+      "Input.dispatchMouseEvent",
+      { type: "mouseWheel", ...point, deltaX: horizontal, deltaY: vertical },
+      signal,
+    )
+  }
+  if (page.generation !== command.generation) throw failure("stale_ref", "Browser page changed.")
+  return { type: command.type, state: state(page) }
+}
+
+async function snapshot<Resource>(page: Page<Resource>, generation: number, signal: AbortSignal) {
+  const result = (await send(page, "Accessibility.getFullAXTree", { depth: 6 }, signal)) as { nodes?: Node[] }
+  if (!Array.isArray(result.nodes) || result.nodes.length > 10_000)
+    throw failure("internal", "Invalid accessibility tree.")
+  if (page.generation !== generation) throw failure("stale_ref", "Browser page changed.")
+  page.refs.clear()
+  const current = state(page)
+  const lines = [`Page: ${current.title.replaceAll(/\s+/g, " ")}`, `URL: ${current.url}`, ""]
+  const nodes = new Map(result.nodes.map((node) => [node.nodeId, node]))
+  const root = result.nodes[0]
+  const queue = root ? [{ node: root, depth: 0 }] : []
+  while (queue.length && lines.length < 503) {
+    const item = queue.shift()
+    if (!item) break
+    if (item.depth > 6 || (root?.frameId && item.node.frameId && item.node.frameId !== root.frameId)) continue
+    if (item.depth < 6) {
+      for (const id of (item.node.childIds ?? []).toReversed()) {
+        const child = nodes.get(id)
+        if (child) queue.unshift({ node: child, depth: item.depth + 1 })
+      }
+    }
+    if (item.node.ignored) continue
+    const role = (item.node.role?.value ?? "node").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 40) || "node"
+    const properties = new Map((item.node.properties ?? []).map((item) => [item.name, item.value?.value]))
+    const editable = ["textbox", "searchbox", "combobox", "spinbutton"].includes(role) || !!properties.get("editable")
+    const interactive =
+      "button checkbox combobox link menuitem option radio searchbox slider spinbutton switch tab textbox"
+    const actionable = !!properties.get("focusable") || interactive.split(" ").includes(role)
+    const id = item.node.backendDOMNodeId
+    const ref = actionable && id ? `e${++page.nextRef}` : undefined
+    if (ref && id) {
+      page.refs.set(ref, { id, editable: editable && !properties.get("disabled") && !properties.get("readonly") })
+    }
+    const clean = (value: unknown) =>
+      typeof value === "string" ? value.replaceAll(/\s+/g, " ").trim().slice(0, 300) : ""
+    const name = clean(item.node.name?.value)
+    const value = editable ? "" : clean(item.node.value?.value)
+    const flags = ["checked", "disabled", "expanded", "selected"].flatMap((flag) =>
+      properties.has(flag) ? [`${flag}=${properties.get(flag)}`] : [],
+    )
+    const suffix = [name && JSON.stringify(name), value && value !== name && `value=${JSON.stringify(value)}`, ...flags]
+      .filter(Boolean)
+      .join(" ")
+    lines.push(`${"  ".repeat(item.depth)}${ref ? `${ref} ` : ""}[${role}]${suffix ? ` ${suffix}` : ""}`)
+  }
+  const content = lines.join("\n").slice(0, 40_960)
+  return { type: "snapshot", state: current, format: "opencode.semantic.v1", content } as const
+}
+
+async function navigate<Resource>(page: Page<Resource>, input: string, signal: AbortSignal) {
+  const value = input.trim() || "about:blank"
+  const local = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::\d+)?(?:[/?#]|$)/i.test(value)
+  const candidate =
+    value === "about:blank" || /^[a-z][a-z\d+.-]*:\/\//i.test(value) ? value : `${local ? "http" : "https"}://${value}`
+  if (candidate.length > 16_384 || !URL.canParse(candidate)) throw failure("invalid_url", "Invalid browser URL.")
+  const url = new URL(candidate)
+  if ((!/^https?:$/.test(url.protocol) && url.href !== "about:blank") || url.username || url.password) {
+    throw failure("invalid_url", "Only HTTP, HTTPS, and about:blank URLs are supported.")
+  }
+  const cancel = () => page.port.stop()
+  signal.addEventListener("abort", cancel, { once: true })
+  await bounded(() => page.port.navigate(url.href), signal, 30_000)
+    .catch((error: unknown) => {
+      if (error instanceof BrowserDriverError) throw error
+      throw failure("navigation_failed", error instanceof Error ? error.message : String(error))
+    })
+    .finally(() => signal.removeEventListener("abort", cancel))
+}
+
+function schedule<Resource, Result>(
+  page: Page<Resource>,
+  signal: AbortSignal | undefined,
+  run: (signal: AbortSignal) => Promise<Result>,
+) {
+  const result = page.queue.then(() => {
+    if (page.disposed) throw failure("not_attached", "Browser is no longer attached.")
+    const active = new AbortController()
+    page.active = active
+    return run(AbortSignal.any([page.signal, active.signal, ...(signal ? [signal] : [])])).finally(() => {
+      if (page.active === active) page.active = undefined
+    })
+  })
+  page.queue = result.then(() => undefined).catch(() => undefined)
+  return result.catch((error: unknown) => {
+    if (error instanceof BrowserDriverError) throw error
+    throw failure("internal", error instanceof Error ? error.message : String(error))
+  })
+}
+
+function state<Resource>(page: Page<Resource>): Browser.State {
+  if (page.disposed) throw failure("not_attached", "Browser is no longer attached.")
+  const current = page.port.state()
+  const url = current.url.slice(0, 16_384)
+  const title = current.title.slice(0, 1_024)
+  return { ...current, url, title, generation: page.generation }
+}
+
+function key<Resource>(page: Page<Resource>, params: Record<string, unknown>, signal: AbortSignal) {
+  return send(page, "Input.dispatchKeyEvent", { type: "keyDown", ...params }, signal).finally(() =>
+    send(page, "Input.dispatchKeyEvent", { type: "keyUp", ...params }),
+  )
+}
+
+function send<Resource>(page: Page<Resource>, method: string, params: Record<string, unknown>, signal?: AbortSignal) {
+  return bounded(() => page.port.send({ method, params }), signal).catch((error: unknown) => {
+    if (/Could not find|No node with given id|Could not compute box model|stale element/i.test(String(error))) {
+      throw failure("stale_ref", "Browser element is stale.")
+    }
+    throw error
+  })
+}
+
+function bounded<Result>(run: () => PromiseLike<Result>, signal: AbortSignal | undefined, timeout = 10_000) {
+  const deadline = AbortSignal.timeout(timeout)
+  const abort = signal ? AbortSignal.any([signal, deadline]) : deadline
+  if (abort.aborted) return Promise.reject(failure("aborted", "Browser action was aborted."))
+  const result = Promise.withResolvers<never>()
+  const cancel = () =>
+    result.reject(failure(deadline.aborted ? "timeout" : "aborted", "Browser operation was interrupted."))
+  abort.addEventListener("abort", cancel, { once: true })
+  return Promise.race([Promise.resolve().then(run), result.promise]).finally(() =>
+    abort.removeEventListener("abort", cancel),
+  )
+}
+
+function failure(code: Browser.ErrorCode, message: string) {
+  return new BrowserDriverError(code, message.slice(0, 1_024))
+}

packages/client/src/node/browser/client.ts

@@ -0,0 +1,248 @@
+import { BrowserControlProtocol } from "@opencode-ai/protocol/browser-control"
+import { Browser } from "@opencode-ai/schema/browser"
+import type { BrowserControl } from "@opencode-ai/schema/browser-control"
+import { Session } from "@opencode-ai/schema/session"
+import { Effect, Schema } from "effect"
+import WebSocket from "ws"
+import type { ClientOptions } from "../../promise/generated/client.js"
+import type { BrowserDriver, BrowserDriverInstance } from "./driver.js"
+import { createBrowserProxy } from "./proxy.js"
+import { openBrowserTunnel, type BrowserTunnelEndpoint } from "./tunnel.js"
+
+export type BrowserRegisterOptions = { readonly sessionID: string; readonly open: () => Promise<void> | void }
+export type BrowserAttachOptions<Resource> = { readonly driver: BrowserDriver<Resource>; readonly signal?: AbortSignal }
+export type BrowserAttachment<Resource> = AsyncDisposable & {
+  readonly resource: Resource
+  readonly close: () => Promise<void>
+}
+export type BrowserRegistration = AsyncDisposable & {
+  readonly attach: <Resource>(options: BrowserAttachOptions<Resource>) => Promise<BrowserAttachment<Resource>>
+  readonly close: () => Promise<void>
+}
+export type BrowserClient = { readonly register: (options: BrowserRegisterOptions) => Promise<BrowserRegistration> }
+
+type Attachment = {
+  lease: Browser.LeaseID
+  abort: AbortController
+  ready: PromiseWithResolvers<void>
+  stage: "creating" | "pending" | "attached"
+  instance?: BrowserDriverInstance<unknown>
+  proxy?: Awaited<ReturnType<typeof createBrowserProxy>>
+  unsubscribe?: () => void
+  closing?: Promise<void>
+}
+
+export function createBrowserClient(options: ClientOptions): BrowserClient {
+  const url = new URL(options.baseUrl)
+  if (!/^https?:$/.test(url.protocol) || url.username || url.password) throw new TypeError("Invalid browser server URL")
+  const authorization = new Headers(options.headers).get("authorization") ?? undefined
+  const endpoint = { url: url.href, ...(authorization ? { authorization } : {}) }
+  return {
+    register: async (input) => {
+      if (!Schema.is(Session.ID)(input.sessionID)) throw new TypeError("Browser requires a valid Session ID")
+      if (typeof input.open !== "function") throw new TypeError("Browser registration requires an open callback")
+      const control = new Control(endpoint, Session.ID.make(input.sessionID), input.open)
+      await abortable(control.registered.promise, AbortSignal.timeout(10_000)).catch(async (error: unknown) => {
+        await control.close()
+        throw error
+      })
+      return control
+    },
+  }
+}
+
+class Control implements BrowserRegistration {
+  readonly registered = Promise.withResolvers<void>()
+  private readonly requests = new Map<BrowserControl.RequestID, AbortController>()
+  private readonly cancelled = new Set<Browser.LeaseID>()
+  private readonly socket: WebSocket
+  private attachment?: Attachment
+  private closing?: Promise<void>
+
+  constructor(
+    private readonly endpoint: BrowserTunnelEndpoint,
+    private readonly sessionID: Session.ID,
+    private readonly open: BrowserRegisterOptions["open"],
+  ) {
+    const url = new URL(BrowserControlProtocol.Path, endpoint.url)
+    url.protocol = url.protocol === "https:" ? "wss:" : "ws:"
+    this.socket = new WebSocket(url, BrowserControlProtocol.Subprotocol, {
+      headers: endpoint.authorization ? { Authorization: endpoint.authorization } : {},
+      handshakeTimeout: 10_000,
+      maxPayload: BrowserControlProtocol.MaxMessageBytes,
+      perMessageDeflate: false,
+    })
+    this.socket.once("open", () => this.send({ type: "browser.control.register", sessionID }))
+    this.socket.on("message", (data, binary) => void this.receive(data, binary))
+    this.socket.on("error", (error) => this.fail(error))
+    this.socket.on("close", () => this.fail(new Error("Browser control connection closed")))
+  }
+
+  async attach<Resource>(input: BrowserAttachOptions<Resource>): Promise<BrowserAttachment<Resource>> {
+    if (this.closing || this.attachment) throw new Error("Browser registration is closed or already attached")
+    if (input.signal?.aborted) throw input.signal.reason
+    const attachment: Attachment = {
+      lease: Browser.LeaseID.create(),
+      abort: new AbortController(),
+      ready: Promise.withResolvers(),
+      stage: "creating",
+    }
+    this.attachment = attachment
+    void attachment.ready.promise.catch(() => undefined)
+    input.signal?.addEventListener(
+      "abort",
+      () => void this.detach(attachment, input.signal?.reason instanceof Error ? input.signal.reason : undefined),
+      { once: true, signal: attachment.abort.signal },
+    )
+    return Promise.resolve()
+      .then(async () => {
+        const proxy = await createBrowserProxy({
+          connect: async (target, signal) => {
+            await abortable(attachment.ready.promise, signal)
+            signal = AbortSignal.any([signal, attachment.abort.signal])
+            return openBrowserTunnel({
+              endpoint: this.endpoint,
+              sessionID: this.sessionID,
+              leaseID: attachment.lease,
+              target,
+              signal,
+            })
+          },
+        })
+        if (attachment.closing) {
+          await proxy.close()
+          throw new Error("Browser attachment was closed")
+        }
+        attachment.proxy = proxy
+        const scope = { url: proxy.url, host: proxy.host, port: proxy.port, credentials: proxy.credentials }
+        const instance = await input.driver({ proxy: scope, signal: attachment.abort.signal })
+        if (attachment.closing) {
+          await instance.dispose()
+          throw new Error("Browser attachment was closed")
+        }
+        attachment.instance = instance
+        const state = instance.state()
+        if (!Schema.is(Browser.State)(state)) throw new TypeError("Invalid browser driver state")
+        attachment.unsubscribe = instance.subscribe((state) => {
+          if (attachment.closing) return
+          if (!Schema.is(Browser.State)(state)) return this.fail(new TypeError("Invalid browser driver state"))
+          if (attachment.stage === "attached")
+            this.send({ type: "browser.control.state", leaseID: attachment.lease, state })
+        })
+        this.send({ type: "browser.control.attach", leaseID: attachment.lease, state })
+        attachment.stage = "pending"
+        const deadline = AbortSignal.any([attachment.abort.signal, AbortSignal.timeout(10_000)])
+        await abortable(attachment.ready.promise, deadline)
+        attachment.stage = "attached"
+        this.send({ type: "browser.control.state", leaseID: attachment.lease, state: instance.state() })
+        const close = () => this.detach(attachment)
+        return { resource: instance.resource, close, [Symbol.asyncDispose]: close }
+      })
+      .catch(async (error: unknown) => {
+        await this.detach(attachment).catch(() => undefined)
+        throw error
+      })
+  }
+
+  close() {
+    if (this.closing) return this.closing
+    this.closing = (this.attachment ? this.detach(this.attachment) : Promise.resolve()).finally(() => {
+      if (this.socket.readyState === WebSocket.OPEN) this.socket.close(1000)
+      if (this.socket.readyState === WebSocket.CONNECTING) this.socket.terminate()
+    })
+    return this.closing
+  }
+
+  [Symbol.asyncDispose]() {
+    return this.close()
+  }
+
+  private detach(attachment: Attachment, reason = new Error("Browser attachment was closed")) {
+    if (attachment.closing) return attachment.closing
+    attachment.abort.abort(reason)
+    attachment.ready.reject(reason)
+    this.requests.forEach((request) => request.abort(reason))
+    this.requests.clear()
+    if (this.attachment === attachment) this.attachment = undefined
+    if (attachment.stage !== "creating") {
+      if (attachment.stage === "pending") this.cancelled.add(attachment.lease)
+      this.send({ type: "browser.control.detach", leaseID: attachment.lease })
+    }
+    attachment.unsubscribe?.()
+    attachment.closing = Promise.resolve(attachment.instance?.dispose()).finally(() => attachment.proxy?.close())
+    return attachment.closing
+  }
+
+  private async receive(data: WebSocket.RawData, binary: boolean) {
+    if (binary) return this.fail(new Error("Invalid browser control message"))
+    const payload =
+      data instanceof ArrayBuffer ? new Uint8Array(data) : Array.isArray(data) ? Buffer.concat(data) : data
+    const message = await Effect.runPromise(BrowserControlProtocol.decodeFromServer(payload)).catch(() => undefined)
+    if (!message) return this.fail(new Error("Invalid browser control message"))
+    if (message.type === "browser.control.registered") return this.registered.resolve()
+    if (message.type === "browser.control.open") {
+      void Promise.resolve()
+        .then(this.open)
+        .catch((error: Error) => this.fail(error))
+      return
+    }
+    if (message.type === "browser.control.attached") {
+      if (this.cancelled.delete(message.leaseID)) return
+      if (this.attachment?.lease !== message.leaseID) return this.fail(new Error("Invalid browser lease"))
+      return this.attachment.ready.resolve()
+    }
+    if (message.type === "browser.control.cancel") {
+      if (this.attachment?.lease !== message.leaseID) return
+      this.requests.get(message.requestID)?.abort(new Error("Browser command was cancelled"))
+      this.requests.delete(message.requestID)
+      return
+    }
+    const reply = (outcome: Browser.Outcome) =>
+      this.send({ type: "browser.control.response", requestID: message.requestID, leaseID: message.leaseID, outcome })
+    const attachment = this.attachment
+    if (attachment?.stage !== "attached" || attachment.lease !== message.leaseID || !attachment.instance) {
+      return reply({ type: "failure", code: "not_attached", message: "Browser is not attached." })
+    }
+    const abort = new AbortController()
+    this.requests.set(message.requestID, abort)
+    const signal = AbortSignal.any([abort.signal, attachment.abort.signal])
+    const outcome = await attachment.instance.execute(message.command, { signal }).then(
+      (result): Browser.Outcome =>
+        Schema.is(Browser.Result)(result) && result.type === message.command.type
+          ? { type: "success", result }
+          : { type: "failure", code: "protocol", message: "Invalid browser driver result." },
+      (error): Browser.Outcome => {
+        const code = error instanceof Error && "code" in error ? error.code : undefined
+        return {
+          type: "failure",
+          code: Schema.is(Browser.ErrorCode)(code) ? code : "internal",
+          message: (error instanceof Error ? error.message : String(error)).slice(0, 1_024),
+        }
+      },
+    )
+    if (this.requests.get(message.requestID) !== abort) return
+    this.requests.delete(message.requestID)
+    reply(outcome)
+  }
+
+  private send(message: BrowserControl.FromClient) {
+    if (this.socket.readyState !== WebSocket.OPEN) return
+    this.socket.send(BrowserControlProtocol.encodeFromClient(message), (error) => error && this.fail(error))
+  }
+
+  private fail(error: Error) {
+    if (this.closing) return
+    this.registered.reject(error)
+    this.attachment?.ready.reject(error)
+    void this.close()
+  }
+}
+
+function abortable<Result>(promise: Promise<Result>, signal: AbortSignal) {
+  if (signal.aborted) return Promise.reject(signal.reason ?? new Error("Browser operation was aborted"))
+  return new Promise<Result>((resolve, reject) => {
+    const abort = () => reject(signal.reason ?? new Error("Browser operation was aborted"))
+    signal.addEventListener("abort", abort, { once: true })
+    void promise.then(resolve, reject).finally(() => signal.removeEventListener("abort", abort))
+  })
+}