test(tui): wait for tab layout before scrolling

The transcript can render before asynchronous tab registration adds its layout row. Wait for the tab title as well as the final message so the one-line scroll assertion starts with a stable viewport.

bun.lock

@@ -54,6 +54,7 @@
       "name": "@opencode-ai/app",
       "version": "1.18.15",
       "dependencies": {
+        "@corvu/drawer": "catalog:",
         "@dnd-kit/abstract": "0.5.0",
         "@dnd-kit/dom": "0.5.0",
         "@dnd-kit/helpers": "0.5.0",
@@ -968,6 +969,7 @@
         "mime-types": "3.0.2",
         "minimatch": "10.2.5",
         "npm-package-arg": "13.0.2",
+        "pacote": "21.5.1",
         "resolve.exports": "catalog:",
       },
       "devDependencies": {
@@ -977,6 +979,7 @@
         "@types/node": "catalog:",
         "@types/npm-package-arg": "6.1.4",
         "@types/npmcli__arborist": "6.3.3",
+        "@types/pacote": "11.1.8",
         "@typescript/native-preview": "catalog:",
       },
     },
@@ -1642,6 +1645,10 @@
 
     "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20251008.0", "", {}, "sha512-dZLkO4PbCL0qcCSKzuW7KE4GYe49lI12LCfQ5y9XeSwgYBoAUbwH4gmJ6A0qUIURiTJTkGkRkhVPqpq2XNgYRA=="],
 
+    "@corvu/dialog": ["@corvu/dialog@0.2.4", "", { "dependencies": { "@corvu/utils": "~0.4.2", "solid-dismissible": "~0.1.1", "solid-focus-trap": "~0.1.8", "solid-presence": "~0.2.0", "solid-prevent-scroll": "~0.1.10" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-n54vJq+fOy8GVrnYBdJpD6JXNuyx7LOeMrRxwzAvZnYGpW8+AA12tnb/P/2emJj/HjOO5otheGKb0breshdFlA=="],
+
+    "@corvu/drawer": ["@corvu/drawer@0.2.4", "", { "dependencies": { "@corvu/dialog": "~0.2.4", "@corvu/utils": "~0.4.2", "@solid-primitives/memo": "^1.4.1", "solid-transition-size": "~0.1.4" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-7jQoGZ8ROB9CmXam2nMY2wEskU3IoFwZQywkF/7vrBc/edGsPv7mOVQ1GN6G+4nd7nrMZ3UtqHAhmRh9V0azlw=="],
+
     "@corvu/utils": ["@corvu/utils@0.4.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.11" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-Ox2kYyxy7NoXdKWdHeDEjZxClwzO4SKM8plAaVwmAJPxHMqA0rLOoAsa+hBDwRLpctf+ZRnAd/ykguuJidnaTA=="],
 
     "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
@@ -2876,6 +2883,8 @@
 
     "@solid-primitives/media": ["@solid-primitives/media@2.3.6", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.6", "@solid-primitives/rootless": "^1.5.4", "@solid-primitives/static-store": "^0.1.4", "@solid-primitives/utils": "^6.4.1" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-pk49gPOq/UMRUJ+pTSrOfBiR8xJjRYHXIf1iR/jSnyQ/KroU+ZXhkZzavC7hvfp2vJeOTW5k2/HN0r3Q1VJ7Pw=="],
 
+    "@solid-primitives/memo": ["@solid-primitives/memo@1.5.1", "", { "dependencies": { "@solid-primitives/scheduled": "^1.5.3", "@solid-primitives/utils": "^6.4.1" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-VDPrkl9epp0tbby9MvsqphGFCYCtDRC5J8FKzTqHbQiG5hhR8n6xv4MfjhTW231IaBxxPHLxS43EE8c5Q23mSQ=="],
+
     "@solid-primitives/props": ["@solid-primitives/props@3.2.4", "", { "dependencies": { "@solid-primitives/utils": "^6.4.1" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-MXXdvi2TSB6d+0N6ueA/HP1j/Kh9SEc4WdF1ZDMLwPagxW6pIHHSS9xbRO0RjqSVpNP4j0nxCWT1hx3CkJNhNA=="],
 
     "@solid-primitives/refs": ["@solid-primitives/refs@1.1.4", "", { "dependencies": { "@solid-primitives/utils": "^6.4.1" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-bLjwIs6ZPu8NQnuw04sU3Zc8qKSpbc0umUU/O4SHf6oWOdO4+dHY8vb1T7C4b/Tg103+9WGr6sEE0+NFlbaB/A=="],
@@ -5302,6 +5311,10 @@
 
     "socks-proxy-agent": ["socks-proxy-agent@8.0.5", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "^4.3.4", "socks": "^2.8.3" } }, "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw=="],
 
+    "solid-dismissible": ["solid-dismissible@0.1.1", "", { "dependencies": { "@corvu/utils": "~0.4.1" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-9kcKBJIMdS+586cA1g63HYWxKh3h89leeNHbPZ1csYjuni+NvPBtNr11l0iEX2AKKEt6FHk6qNhc/gjoYAW1pA=="],
+
+    "solid-focus-trap": ["solid-focus-trap@0.1.9", "", { "dependencies": { "@corvu/utils": "~0.4.2" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-LTyNki6GUJPRLXV5uMWPkYClB07SUMubbr2EkAddiR0CJCF/I283txilMU9RURSr/P8EewMfXWu2o3aWrK7A5A=="],
+
     "solid-js": ["solid-js@1.9.15", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.5.4", "seroval-plugins": "~1.5.4" } }, "sha512-EeiY2xfpZJqPLjXspVEKjAII4yv8NyG//NxZ3IpOFHdUNnnTyL0uJOeS9LWGvA7cFCz5y94cjFwYlmw5Luncsg=="],
 
     "solid-list": ["solid-list@0.3.0", "", { "dependencies": { "@corvu/utils": "~0.4.0" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-t4hx/F/l8Vmq+ib9HtZYl7Z9F1eKxq3eKJTXlvcm7P7yI4Z8O7QSOOEVHb/K6DD7M0RxzVRobK/BS5aSfLRwKg=="],
@@ -5316,6 +5329,8 @@
 
     "solid-stripe": ["solid-stripe@0.8.1", "", { "peerDependencies": { "@stripe/stripe-js": ">=1.44.1 <8.0.0", "solid-js": "^1.6.0" } }, "sha512-l2SkWoe51rsvk9u1ILBRWyCHODZebChSGMR6zHYJTivTRC0XWrRnNNKs5x1PYXsaIU71KYI6ov5CZB5cOtGLWw=="],
 
+    "solid-transition-size": ["solid-transition-size@0.1.4", "", { "dependencies": { "@corvu/utils": "~0.3.2" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-ocHVnbfy23CgfaH4cEUR/AFg0Y3CEL8Oh3n9Qv8OHFJgPh+zkmERKZQfi/xH5XvxDCizg8VjPrVUhiHB1Gza8g=="],
+
     "solid-use": ["solid-use@0.9.1", "", { "peerDependencies": { "solid-js": "^1.7" } }, "sha512-UwvXDVPlrrbj/9ewG9ys5uL2IO4jSiwys2KPzK4zsnAcmEl7iDafZWW1Mo4BSEWOmQCGK6IvpmGHo1aou8iOFw=="],
 
     "sort-keys": ["sort-keys@1.1.2", "", { "dependencies": { "is-plain-obj": "^1.0.0" } }, "sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg=="],
@@ -6630,6 +6645,8 @@
 
     "slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@4.0.0", "", {}, "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ=="],
 
+    "solid-transition-size/@corvu/utils": ["@corvu/utils@0.3.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.7" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-ZWlyWEE8qV9+CB9OAyo2bTrZGXQN9ZeM+JfYv89zoR+lRACKTDuoOZEdiyL8Uc7U5dUSH1uTqKhTTnaHWb+wZA=="],
+
     "sort-keys/is-plain-obj": ["is-plain-obj@1.1.0", "", {}, "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg=="],
 
     "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-fG6VYtNC0pce4VM9po7vVucPuJul42yuuijTjNSr7rk=",
-    "aarch64-linux": "sha256-3TznrmNqdt25cOxia6vcdi/5qKaeyLPIsNXGYBSJNrs=",
-    "aarch64-darwin": "sha256-8Kmagb5tfECSWZNsIJgrRP1d3X5tuEoWLEWkV3UENZo=",
-    "x86_64-darwin": "sha256-mIV+mDwIGD02BNYZVi37sY4ls1T01N6z76eBtH0sKiA="
+    "x86_64-linux": "sha256-nV2bI91uUqHJugt1mERgYNCn/zqWJ21YXc5YozwQ+Ss=",
+    "aarch64-linux": "sha256-s/0PghIWeRHsMw9Re84sQ8qW5IZwyhXrhmYlUy2xkt4=",
+    "aarch64-darwin": "sha256-FAm7Bk3NPikHYmmJFwB+0V3saRZqlyxDHuM8gasN3zA=",
+    "x86_64-darwin": "sha256-kdYwYQhubvO9CtVsuHsGnIJ9/byWQ5FMFCLRoScQ614="
   }
 }

package.json

@@ -5,10 +5,10 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.14",
+  "packageManager": "bun@1.4.0",
   "scripts": {
     "dev": "bun run --cwd packages/cli --conditions=browser src/index.ts",
-    "dev:live": "OPENCODE_TUI_CHANNEL=dev OPENCODE_PASSWORD=\"$(opencode2 service get password)\" bun run dev --server \"$(opencode2 service status)\"",
+    "dev:live": "sh -c 'OPENCODE_TUI_CHANNEL=dev OPENCODE_PASSWORD=\"$(opencode2 service get password)\" exec bun run dev \"$@\" --server \"$(opencode2 service status)\"' --",
     "dev:desktop": "bun --cwd packages/desktop dev",
     "dev:web": "bun --cwd packages/app dev",
     "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",

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

@@ -510,9 +510,10 @@ interface ParserState {
   readonly tools: ToolStream.State<number>
   readonly finishedTools: ReadonlySet<number>
   // Bedrock splits the finish into `messageStop` (carries `stopReason`) and
-  // `metadata` (carries usage). Hold the terminal event in state so `onHalt`
-  // can emit exactly one finish after both chunks have had a chance to arrive.
-  readonly pendingFinish: { readonly reason: FinishReasonDetails; readonly usage?: Usage } | undefined
+  // `metadata` (carries usage). Hold both in state so `onHalt` can emit exactly
+  // one finish after both chunks have had a chance to arrive.
+  readonly finishReason: FinishReasonDetails | undefined
+  readonly usage: Usage | undefined
   readonly hasToolCalls: boolean
   readonly lifecycle: Lifecycle.State
   readonly reasoningSignatures: Readonly<Record<number, string>>
@@ -692,12 +693,9 @@ const step = (state: ParserState, event: BedrockEvent) =>
       return [
         {
           ...state,
-          pendingFinish: {
-            reason: {
-              normalized: mapFinishReason(event.messageStop.stopReason),
-              raw: event.messageStop.stopReason,
-            },
-            usage: state.pendingFinish?.usage,
+          finishReason: {
+            normalized: mapFinishReason(event.messageStop.stopReason),
+            raw: event.messageStop.stopReason,
           },
         },
         [],
@@ -705,14 +703,11 @@ const step = (state: ParserState, event: BedrockEvent) =>
     }
 
     if (event.metadata) {
-      const usage = mapUsage(event.metadata.usage, state.providerMetadataKey) ?? state.pendingFinish?.usage
+      const usage = mapUsage(event.metadata.usage, state.providerMetadataKey) ?? state.usage
       return [
         {
           ...state,
-          pendingFinish: {
-            reason: state.pendingFinish?.reason ?? { normalized: "stop" },
-            usage,
-          },
+          usage,
         },
         [],
       ] as const
@@ -736,18 +731,18 @@ const step = (state: ParserState, event: BedrockEvent) =>
 const framing = BedrockEventStream.framing(ADAPTER)
 
 const onHalt = (state: ParserState): ReadonlyArray<LLMEvent> => {
-  if (!state.pendingFinish) return []
+  if (!state.finishReason) return []
   const normalized = (() => {
-    if (state.pendingFinish.reason.normalized === "stop" && state.hasToolCalls) return "tool-calls"
-    return state.pendingFinish.reason.normalized
+    if (state.finishReason.normalized === "stop" && state.hasToolCalls) return "tool-calls"
+    return state.finishReason.normalized
   })()
   const events: LLMEvent[] = []
   Lifecycle.finish(state.lifecycle, events, {
     reason: {
-      ...state.pendingFinish.reason,
+      ...state.finishReason,
       normalized,
     },
-    usage: state.pendingFinish.usage,
+    usage: state.usage,
   })
   return events
 }
@@ -771,7 +766,8 @@ export const protocol = Protocol.make({
       providerMetadataKey: request.model.route.providerMetadataKey ?? String(request.model.provider),
       tools: ToolStream.empty<number>(),
       finishedTools: new Set<number>(),
-      pendingFinish: undefined,
+      finishReason: undefined,
+      usage: undefined,
       hasToolCalls: false,
       lifecycle: Lifecycle.initial(),
       reasoningSignatures: {},

packages/ai/src/protocols/gemini.ts

@@ -609,18 +609,27 @@ const finish = (state: ParserState): ReadonlyArray<LLMEvent> => {
 }
 
 const step = (state: ParserState, event: GeminiEvent) => {
-  if (ProviderShared.isRecord(event.error) && typeof event.error.message === "string") {
+  if (ProviderShared.isRecord(event.error)) {
     const body = ProviderShared.encodeJson(event)
     return Effect.fail(
       new AIError({
         reason: classifyProviderFailure({
-          message: event.error.message,
+          message:
+            typeof event.error.message === "string" && event.error.message.length > 0
+              ? event.error.message
+              : typeof event.error.status === "string" && event.error.status.length > 0
+                ? event.error.status
+                : "Gemini provider error",
           status: typeof event.error.code === "number" ? event.error.code : undefined,
           rawBody: body,
         }),
       }),
     )
   }
+  if ("error" in event)
+    return Effect.fail(
+      ProviderShared.eventError(state.route, `Invalid ${state.route} stream event`, ProviderShared.encodeJson(event)),
+    )
   const nextState = {
     ...state,
     promptFeedback: event.promptFeedback ?? state.promptFeedback,

packages/ai/src/protocols/open-responses.ts

@@ -176,14 +176,14 @@ export const InputItem = Schema.Union([
   HostedToolItem,
 ])
 type OpenResponsesInputItem = Schema.Schema.Type<typeof InputItem>
-export type ExtendedHostedToolItem = {
+export type HostedToolReplayItem = {
   readonly type: string
   readonly id: string
   readonly [key: string]: unknown
 }
 type LoweredInputItem =
   | OpenResponsesInputItem
-  | ExtendedHostedToolItem
+  | HostedToolReplayItem
   | {
       readonly type: "message"
       readonly id?: string
@@ -373,7 +373,7 @@ export const Event = Schema.StructWithRest(
 )
 export type Event = Schema.Schema.Type<typeof Event>
 
-export interface Extension {
+export interface ProviderAdapter {
   readonly id: string
   readonly name: string
   readonly lowerMedia?: (input: {
@@ -381,10 +381,10 @@ export interface Extension {
     readonly media: ProviderShared.NormalizedMedia
     readonly request: LLMRequest
   }) => MediaInput | undefined
-  readonly lowerHostedToolItem?: (item: unknown) => ExtendedHostedToolItem | undefined
+  readonly restoreHostedToolItem?: (item: unknown) => HostedToolReplayItem | undefined
 }
 
-const BASE: Extension = { id: ADAPTER, name: NAME }
+const BASE_ADAPTER: ProviderAdapter = { id: ADAPTER, name: NAME }
 
 export interface ParserState {
   readonly id: string
@@ -397,6 +397,9 @@ export interface ParserState {
   readonly lifecycle: Lifecycle.State
   readonly outputItems: Readonly<Record<number, string>>
   readonly message: { readonly id: string; readonly phase: MessagePhase | null | undefined } | undefined
+  // Item ids are response-scoped identities. Keep completed ids tombstoned so
+  // reconnect replay cannot reopen fragments already emitted downstream.
+  readonly completedMessages: ReadonlySet<string>
   readonly reasoningItems: Readonly<Record<string, ReasoningStreamItem>>
 }
 
@@ -482,12 +485,12 @@ const lowerReasoning = (part: ReasoningPart, providerMetadataKey: string): OpenR
 const lowerMedia = Effect.fn("OpenResponses.lowerMedia")(function* (
   part: MediaPart,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
   target: "message" | "tool-result",
 ) {
   const media = ProviderShared.normalizeMedia(part)
-  const extended = extension.lowerMedia?.({ part, media, request })
-  if (extended) return extended
+  const providerMedia = adapter.lowerMedia?.({ part, media, request })
+  if (providerMedia) return providerMedia
   const url =
     typeof part.data === "string" && (part.data.startsWith("https://") || part.data.startsWith("http://"))
       ? part.data
@@ -507,17 +510,17 @@ const lowerMedia = Effect.fn("OpenResponses.lowerMedia")(function* (
 const lowerUserContent = Effect.fnUntraced(function* (
   part: LLMRequest["messages"][number]["content"][number],
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (part.type === "text") return { type: "input_text" as const, text: part.text }
-  if (part.type === "media") return yield* lowerMessageMedia(part, request, extension)
-  return yield* ProviderShared.unsupportedContent(extension.name, "user", ["text", "media"])
+  if (part.type === "media") return yield* lowerMessageMedia(part, request, adapter)
+  return yield* ProviderShared.unsupportedContent(adapter.name, "user", ["text", "media"])
 })
 
-const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request: LLMRequest, extension: Extension) {
-  const lowered = yield* lowerMedia(part, request, extension, "message")
+const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request: LLMRequest, adapter: ProviderAdapter) {
+  const lowered = yield* lowerMedia(part, request, adapter, "message")
   if (lowered.type === "input_video")
-    return yield* ProviderShared.invalidRequest(`${extension.name} user messages do not support input_video`)
+    return yield* ProviderShared.invalidRequest(`${adapter.name} user messages do not support input_video`)
   return lowered
 })
 
@@ -526,13 +529,13 @@ const lowerMessageMedia = Effect.fnUntraced(function* (part: MediaPart, request:
 const lowerToolResultContentItem = Effect.fnUntraced(function* (
   item: Content,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (item.type === "text") return { type: "input_text" as const, text: item.text }
   return yield* lowerMedia(
     { type: "media", mediaType: item.mime, data: item.uri, filename: item.name },
     request,
-    extension,
+    adapter,
     "tool-result",
   )
 })
@@ -540,30 +543,33 @@ const lowerToolResultContentItem = Effect.fnUntraced(function* (
 const lowerHostedToolResultContentItem = Effect.fnUntraced(function* (
   item: Content,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   if (item.type === "text") return { type: "input_text" as const, text: item.text }
   return yield* lowerMessageMedia(
     { type: "media", mediaType: item.mime, data: item.uri, filename: item.name },
     request,
-    extension,
+    adapter,
   )
 })
 
 const lowerToolResultOutput = Effect.fnUntraced(function* (
   part: ToolResultPart,
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   // Text/json/error results are encoded as a plain string for backward
   // compatibility with existing cassettes and provider expectations.
   if (part.result.type !== "content") return ProviderShared.toolResultText(part)
   // Preserve the narrowed array element type when compiled through a consumer package.
   const content: ReadonlyArray<Content> = part.result.value
-  return yield* Effect.forEach(content, (item) => lowerToolResultContentItem(item, request, extension))
+  return yield* Effect.forEach(content, (item) => lowerToolResultContentItem(item, request, adapter))
 })
 
-const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (request: LLMRequest, extension: Extension) {
+const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (
+  request: LLMRequest,
+  adapter: ProviderAdapter,
+) {
   const input: LoweredInputItem[] = []
   const providerMetadataKey = request.model.route.providerMetadataKey ?? "openresponses"
 
@@ -571,13 +577,13 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
     if (message.role === "system") {
       input.push({
         role: "developer",
-        content: ProviderShared.joinText(yield* ProviderShared.systemUpdateText(extension.name, message)),
+        content: ProviderShared.joinText(yield* ProviderShared.systemUpdateText(adapter.name, message)),
       })
       continue
     }
 
     if (message.role === "user") {
-      const content = yield* Effect.forEach(message.content, (part) => lowerUserContent(part, request, extension))
+      const content = yield* Effect.forEach(message.content, (part) => lowerUserContent(part, request, adapter))
       if (content.length > 0) input.push({ role: "user", content })
       continue
     }
@@ -644,7 +650,7 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
               ? undefined
               : Schema.is(HostedToolItem)(part.result.value)
                 ? part.result.value
-                : extension.lowerHostedToolItem?.(part.result.value)
+                : adapter.restoreHostedToolItem?.(part.result.value)
           if (id !== undefined && hosted?.id === id) {
             if (!hostedToolItems.has(id)) {
               input.push(hosted)
@@ -658,13 +664,11 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
               : [{ type: "text", text: ProviderShared.toolResultText(part) }]
           input.push({
             role: "user",
-            content: yield* Effect.forEach(content, (item) =>
-              lowerHostedToolResultContentItem(item, request, extension),
-            ),
+            content: yield* Effect.forEach(content, (item) => lowerHostedToolResultContentItem(item, request, adapter)),
           })
           continue
         }
-        return yield* ProviderShared.unsupportedContent(extension.name, "assistant", [
+        return yield* ProviderShared.unsupportedContent(adapter.name, "assistant", [
           "text",
           "reasoning",
           "tool-call",
@@ -677,11 +681,11 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (reques
 
     for (const part of message.content) {
       if (!ProviderShared.supportsContent(part, ["tool-result"]))
-        return yield* ProviderShared.unsupportedContent(extension.name, "tool", ["tool-result"])
+        return yield* ProviderShared.unsupportedContent(adapter.name, "tool", ["tool-result"])
       input.push({
         type: "function_call_output",
         call_id: part.id,
-        output: yield* lowerToolResultOutput(part, request, extension),
+        output: yield* lowerToolResultOutput(part, request, adapter),
       })
     }
   }
@@ -733,28 +737,28 @@ const allowedToolChoice = (request: LLMRequest) => {
   }
 }
 
-export const fromRequestWithExtension = Effect.fn("OpenResponses.fromRequestWithExtension")(function* (
+export const fromRequestWithAdapter = Effect.fn("OpenResponses.fromRequestWithAdapter")(function* (
   request: LLMRequest,
-  extension: Extension,
+  adapter: ProviderAdapter,
 ) {
   const generation = request.generation
   const toolSchemaCompatibility = request.model.compatibility?.toolSchema
   return {
     model: request.model.id,
-    input: yield* lowerMessages(request, extension),
+    input: yield* lowerMessages(request, adapter),
     tools:
       request.tools.length === 0
         ? undefined
         : yield* Effect.forEach(request.tools, (tool) =>
             lowerTool(
-              extension.name,
+              adapter.name,
               tool,
               ToolSchemaProjection.modelCompatibility(tool.inputSchema, toolSchemaCompatibility),
             ),
           ),
     tool_choice:
       allowedToolChoice(request) ??
-      (request.toolChoice ? yield* lowerToolChoice(extension.name, request.toolChoice) : undefined),
+      (request.toolChoice ? yield* lowerToolChoice(adapter.name, request.toolChoice) : undefined),
     stream: true as const,
     max_output_tokens: generation?.maxTokens,
     temperature: generation?.temperature,
@@ -768,7 +772,7 @@ export const fromRequestWithExtension = Effect.fn("OpenResponses.fromRequestWith
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(OpenResponsesBody))
 
 export const fromRequest = Effect.fn("OpenResponses.fromRequest")(function* (request: LLMRequest) {
-  return yield* decodeBody(yield* fromRequestWithExtension(request, BASE))
+  return yield* decodeBody(yield* fromRequestWithAdapter(request, BASE_ADAPTER))
 })
 
 // =============================================================================
@@ -951,12 +955,16 @@ const onOutputItemAdded = (state: ParserState, event: Event): StepResult => {
   const item = event.item
   if (item?.type === "message" && item.id !== undefined) {
     const itemID = item.id
+    if (state.completedMessages.has(itemID)) return [state, NO_EVENTS]
     const phase = messagePhase(item.phase)
+    const completedMessages = new Set(state.completedMessages)
+    if (state.message !== undefined && state.message.id !== itemID) completedMessages.add(state.message.id)
     // A new message closes earlier messages, including ones that never streamed.
     const events: LLMEvent[] = []
     const lifecycle = [...state.lifecycle.text]
       .filter((id) => id !== itemID)
       .reduce((lifecycle, id) => {
+        completedMessages.add(id)
         const openPhase = state.message?.id === id ? state.message.phase : undefined
         return Lifecycle.textEnd(
           lifecycle,
@@ -969,6 +977,7 @@ const onOutputItemAdded = (state: ParserState, event: Event): StepResult => {
       {
         ...state,
         lifecycle,
+        completedMessages,
         message: {
           id: itemID,
           phase: phase === undefined && state.message?.id === itemID ? state.message.phase : phase,
@@ -1085,7 +1094,12 @@ const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
   if (!item) return [state, NO_EVENTS] satisfies StepResult
 
   if (item.type === "message" && item.id !== undefined) {
-    const message = state.message?.id === item.id ? state.message : undefined
+    if (state.completedMessages.has(item.id)) return [state, NO_EVENTS] satisfies StepResult
+    const completedMessages = new Set(state.completedMessages)
+    completedMessages.add(item.id)
+    if (state.message !== undefined && state.message.id !== item.id)
+      return [{ ...state, completedMessages }, NO_EVENTS] satisfies StepResult
+    const message = state.message
     const itemPhase = messagePhase(item.phase)
     const phase = itemPhase === undefined ? message?.phase : itemPhase
     const parts: ReadonlyArray<unknown> = Array.isArray(item.content) ? item.content : []
@@ -1098,13 +1112,13 @@ const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
     const text = content.length > 0 ? content.join("") : undefined
     const metadata = providerMetadata(state, { itemId: item.id, ...(phase === undefined ? {} : { phase }) })
     const events: LLMEvent[] = []
-    const lifecycle =
-      message && text ? Lifecycle.textStart(state.lifecycle, events, item.id, metadata) : state.lifecycle
+    const lifecycle = text ? Lifecycle.textStart(state.lifecycle, events, item.id, metadata) : state.lifecycle
     return [
       {
         ...state,
         lifecycle: Lifecycle.textEnd(lifecycle, events, item.id, metadata, text),
-        message: message ? undefined : state.message,
+        completedMessages,
+        message: undefined,
       },
       events,
     ] satisfies StepResult
@@ -1243,9 +1257,12 @@ const onResponseFinish = Effect.fn("OpenResponses.onResponseFinish")(function* (
   const events: LLMEvent[] = []
   if (event.type === "response.completed") {
     for (const item of event.response?.output ?? []) {
-      const id = item.id ?? (item.type === "function_call" ? item.call_id : undefined)
-      if (id === undefined) continue
-      if (item.type !== "function_call" || !current.tools[id]) continue
+      if (
+        item.type !== "function_call" ||
+        !item.call_id ||
+        !Object.values(current.tools).some((tool) => tool?.id === item.call_id)
+      )
+        continue
       const [next, emitted] = yield* onOutputItemDone(current, item)
       current = next
       events.push(...emitted)
@@ -1408,9 +1425,9 @@ export const step = (state: ParserState, input: Event) => {
  * The provider-neutral Open Responses protocol. Provider-specific Responses
  * implementations compose this baseline with their own tools and event variants.
  */
-export const initial = (request: LLMRequest, extension: Extension = BASE): ParserState => ({
-  id: extension.id,
-  name: extension.name,
+export const initial = (request: LLMRequest, adapter: ProviderAdapter = BASE_ADAPTER): ParserState => ({
+  id: adapter.id,
+  name: adapter.name,
   providerMetadataKey: request.model.route.providerMetadataKey ?? "openresponses",
   hasFunctionCall: false,
   tools: ToolStream.empty<string>(),
@@ -1418,6 +1435,7 @@ export const initial = (request: LLMRequest, extension: Extension = BASE): Parse
   lifecycle: Lifecycle.initial(),
   outputItems: {},
   message: undefined,
+  completedMessages: new Set<string>(),
   reasoningItems: {},
 })
 

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

@@ -86,11 +86,11 @@ const OpenAIResponsesBody = Schema.Struct({
 })
 export type OpenAIResponsesBody = Schema.Schema.Type<typeof OpenAIResponsesBody>
 
-const extension = {
+const adapter = {
   id: ADAPTER,
   name: NAME,
-  lowerHostedToolItem: (item: unknown) => (Schema.is(OpenAIResponsesHostedToolItem)(item) ? item : undefined),
-} satisfies OpenResponses.Extension
+  restoreHostedToolItem: (item: unknown) => (Schema.is(OpenAIResponsesHostedToolItem)(item) ? item : undefined),
+} satisfies OpenResponses.ProviderAdapter
 
 const nativeImageToolInput = (tool: ToolDefinition) => {
   const native = tool.native?.openai
@@ -125,9 +125,9 @@ const lowerToolChoice = (toolChoice: NonNullable<LLMRequest["toolChoice"]>, tool
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(OpenAIResponsesBody))
 
 const fromRequest = Effect.fn("OpenAIResponses.fromRequest")(function* (request: LLMRequest) {
-  const body = yield* OpenResponses.fromRequestWithExtension(
+  const body = yield* OpenResponses.fromRequestWithAdapter(
     LLMRequest.update(request, { tools: [], toolChoice: undefined }),
-    extension,
+    adapter,
   )
   const toolSchemaCompatibility = request.model.compatibility?.toolSchema
   const parallelToolCalls = OpenResponses.resolveParallelToolCalls(request)
@@ -204,7 +204,7 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: OpenResponses.protocol.stream.event,
-    initial: (request) => OpenResponses.initial(request, extension),
+    initial: (request) => OpenResponses.initial(request, adapter),
     step,
     terminal: OpenResponses.terminal,
   },

packages/ai/src/protocols/xai-responses.ts

@@ -36,15 +36,15 @@ const XAIResponsesBody = Schema.Struct({
   stream: Schema.Literal(true),
 })
 
-const extension = {
+const adapter = {
   id: ADAPTER,
   name: NAME,
-  lowerHostedToolItem: (item: unknown) => (Schema.is(XAIResponsesHostedToolItem)(item) ? item : undefined),
-} satisfies OpenResponses.Extension
+  restoreHostedToolItem: (item: unknown) => (Schema.is(XAIResponsesHostedToolItem)(item) ? item : undefined),
+} satisfies OpenResponses.ProviderAdapter
 
 const decodeBody = ProviderShared.validateWith(Schema.decodeUnknownEffect(XAIResponsesBody))
 const fromRequest = Effect.fn("XAIResponses.fromRequest")(function* (request: LLMRequest) {
-  return yield* decodeBody(yield* OpenResponses.fromRequestWithExtension(request, extension))
+  return yield* decodeBody(yield* OpenResponses.fromRequestWithAdapter(request, adapter))
 })
 
 const HOSTED_TOOLS = {
@@ -78,7 +78,7 @@ export const protocol = Protocol.make({
   },
   stream: {
     event: OpenResponses.protocol.stream.event,
-    initial: (request) => OpenResponses.initial(request, extension),
+    initial: (request) => OpenResponses.initial(request, adapter),
     step,
     terminal: OpenResponses.terminal,
   },

packages/ai/src/schema/messages.ts

@@ -9,7 +9,6 @@ import {
   LanguageModelSchema,
   ProviderOptions,
 } from "./options.js"
-import { isRecord } from "../utils/record.js"
 
 export const MessageRole = Schema.Literals(["system", "user", "assistant", "tool"])
 export type MessageRole = Schema.Schema.Type<typeof MessageRole>
@@ -56,11 +55,6 @@ export const MediaPart = Schema.Struct({
 }).annotate({ identifier: "LLM.Content.Media" })
 export type MediaPart = Schema.Schema.Type<typeof MediaPart>
 
-const isToolResultValue = (value: unknown): value is ToolResultValue =>
-  isRecord(value) &&
-  (value.type === "text" || value.type === "json" || value.type === "error" || value.type === "content") &&
-  "value" in value
-
 const toolResultValueSchema = Schema.Union([
   Schema.Struct({
     type: Schema.Literal("json"),
@@ -80,6 +74,7 @@ const toolResultValueSchema = Schema.Union([
   }),
 ]).annotate({ identifier: "LLM.ToolResult" })
 export type ToolResultValue = Schema.Schema.Type<typeof toolResultValueSchema>
+const isToolResultValue = Schema.is(toolResultValueSchema)
 
 export const ToolResultValue = Object.assign(toolResultValueSchema, {
   is: isToolResultValue,

packages/ai/src/schema/options.ts

@@ -267,7 +267,7 @@ export const CachePolicyObject = Schema.Struct({
     Schema.Union([
       Schema.Literal("latest-user-message"),
       Schema.Literal("latest-assistant"),
-      Schema.Struct({ tail: Schema.Number }),
+      Schema.Struct({ tail: Schema.Natural }),
     ]),
   ),
   ttlSeconds: Schema.optional(Schema.Number),

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

@@ -631,10 +631,45 @@ describe("Bedrock Converse route", () => {
       )
       const response = yield* LLMClient.generate(baseRequest).pipe(Effect.provide(fixedBytes(body)))
 
+      expect(response.events.filter((event) => event.type === "finish")).toHaveLength(1)
       expect(response.usage).toMatchObject({ inputTokens: 5, outputTokens: 2, totalTokens: 7 })
     }),
   )
 
+  it.effect("retains metadata usage that arrives before messageStop", () =>
+    Effect.gen(function* () {
+      const body = eventStreamBody(
+        ["metadata", { usage: { inputTokens: 5, outputTokens: 2, totalTokens: 7 } }],
+        ["messageStop", { stopReason: "end_turn" }],
+      )
+      const response = yield* LLMClient.generate(baseRequest).pipe(Effect.provide(fixedBytes(body)))
+
+      expect(response.events.filter((event) => event.type === "finish")).toHaveLength(1)
+      expect(response.finishReason).toEqual({ normalized: "stop", raw: "end_turn" })
+      expect(response.usage).toMatchObject({ inputTokens: 5, outputTokens: 2, totalTokens: 7 })
+    }),
+  )
+
+  it.effect("rejects metadata-only streams as incomplete with HTTP context", () =>
+    Effect.gen(function* () {
+      const error = yield* LLMClient.generate(baseRequest).pipe(
+        Effect.provide(
+          fixedBytes(eventStreamBody(["metadata", { usage: { inputTokens: 5, outputTokens: 2, totalTokens: 7 } }])),
+        ),
+        Effect.flip,
+      )
+
+      expect(error.reason).toMatchObject({
+        _tag: "InvalidProviderOutput",
+        classification: "incomplete-stream",
+        http: {
+          status: 200,
+          headers: { "content-type": "application/vnd.amazon.eventstream" },
+        },
+      })
+    }),
+  )
+
   it.effect("assembles streamed tool call input", () =>
     Effect.gen(function* () {
       const body = eventStreamBody(

packages/ai/test/provider/error-retention.test.ts

@@ -62,6 +62,62 @@ describe("provider error retention", () => {
     )
   }
 
+  it.effect("classifies a message-less Gemini 429 and retains its event and HTTP context", () =>
+    Effect.gen(function* () {
+      const body = JSON.stringify({
+        error: { code: 429, status: "RESOURCE_EXHAUSTED", details: { opaque: [1, 2] } },
+        trace: { opaque: "outer" },
+      })
+      const error = yield* LLMClient.generate(
+        LLM.request({ model: Google.configure(options).model("gemini"), prompt: "hello" }),
+      ).pipe(
+        Effect.provide(
+          fixedResponse(sseEvents(body), {
+            headers: { "content-type": "text/event-stream", "x-provider-trace": "trace-1" },
+          }),
+        ),
+        Effect.flip,
+      )
+
+      expect(error.message).toBe("RESOURCE_EXHAUSTED")
+      expect(error.reason._tag).toBe("RateLimit")
+      expect(error.reason.body).toBe(body)
+      expect(error.reason.http).toMatchObject({ status: 200, headers: { "x-provider-trace": "trace-1" } })
+      expect(error.reason.http?.url).toStartWith("https://provider.test/")
+    }),
+  )
+
+  it.effect("rejects a malformed non-record Gemini error", () =>
+    Effect.gen(function* () {
+      const body = JSON.stringify({ error: "RESOURCE_EXHAUSTED", trace: { opaque: "outer" } })
+      const error = yield* LLMClient.generate(
+        LLM.request({ model: Google.configure(options).model("gemini"), prompt: "hello" }),
+      ).pipe(Effect.provide(fixedResponse(sseEvents(body))), Effect.flip)
+
+      expect(error.reason._tag).toBe("InvalidProviderOutput")
+      expect(error.message).toContain("Invalid google/gemini stream event")
+      expect(error.reason.body).toBe(body)
+      expect(error.reason.http?.status).toBe(200)
+    }),
+  )
+
+  it.effect("rejects and retains an explicit null Gemini error", () =>
+    Effect.gen(function* () {
+      const body = JSON.stringify({ error: null, trace: { opaque: "outer" } })
+      const error = yield* LLMClient.generate(
+        LLM.request({ model: Google.configure(options).model("gemini"), prompt: "hello" }),
+      ).pipe(
+        Effect.provide(fixedResponse(sseEvents(body), { headers: { "x-provider-trace": "trace-null" } })),
+        Effect.flip,
+      )
+
+      expect(error.reason._tag).toBe("InvalidProviderOutput")
+      expect(error.reason.body).toBe(body)
+      expect(error.reason.http).toMatchObject({ status: 200, headers: { "x-provider-trace": "trace-null" } })
+      expect(error.reason.http?.url).toStartWith("https://provider.test/")
+    }),
+  )
+
   it.effect("retains malformed provider frames and the original decode cause", () =>
     Effect.gen(function* () {
       const body = '{"type":"error","error":{"message":42,"opaque":{"nested":true}},"trace":"outer"}'

packages/ai/test/provider/open-responses-finals.test.ts

@@ -82,6 +82,32 @@ describe("Open Responses completed item text", () => {
       expect(response.events.filter(LLMEvent.is.textStart)).toEqual([])
     }),
   )
+
+  it.effect("assembles a done-only message once across replayed item events", () =>
+    Effect.gen(function* () {
+      const item = {
+        type: "message",
+        id: "msg_1",
+        content: [{ type: "output_text", text: "Recovered" }],
+      }
+      const response = yield* generate(
+        { type: "response.output_text.delta", item_id: "msg_1", delta: "Ignored after resume" },
+        { type: "response.output_item.done", item },
+        { type: "response.output_item.added", item },
+        { type: "response.output_item.done", item },
+        completed,
+      )
+      expect(response.text).toBe("Recovered")
+      expect(response.message.content).toEqual([
+        {
+          type: "text",
+          text: "Recovered",
+          providerMetadata: { "openai-compatible": { itemId: "msg_1" } },
+        },
+      ])
+      expect(response.events.filter(LLMEvent.is.textEnd)).toHaveLength(1)
+    }),
+  )
 })
 
 describe("Open Responses completed item reasoning", () => {

packages/ai/test/provider/open-responses-lifecycle.test.ts

@@ -216,7 +216,63 @@ describe("Open Responses basic-item lifecycles", () => {
       ])
     }),
   )
-  it.effect("allows a message to be registered again without inheriting its previous phase", () =>
+
+  it.effect("preserves non-empty done-only message content without replaying duplicates", () =>
+    Effect.gen(function* () {
+      const text = {
+        type: "message",
+        id: "msg_text",
+        content: [{ type: "output_text", text: "Done-only text." }],
+      }
+      const refusal = {
+        type: "message",
+        id: "msg_refusal",
+        content: [{ type: "refusal", refusal: "Done-only refusal." }],
+      }
+      const events = yield* collect(
+        { type: "response.output_item.done", item: text },
+        { type: "response.output_item.done", item: text },
+        {
+          type: "response.output_item.done",
+          item: { type: "message", id: "msg_empty", content: [{ type: "output_text", text: "" }] },
+        },
+        {
+          type: "response.output_item.done",
+          item: { type: "message", id: "msg_empty", content: [{ type: "output_text", text: "Late" }] },
+        },
+        { type: "response.output_item.done", item: refusal },
+        { type: "response.output_item.done", item: refusal },
+        completed,
+      )
+
+      expect(events.filter((event) => event.type.startsWith("text-"))).toEqual([
+        {
+          type: "text-start",
+          id: "msg_text",
+          providerMetadata: { "openai-compatible": { itemId: "msg_text" } },
+        },
+        {
+          type: "text-end",
+          id: "msg_text",
+          text: "Done-only text.",
+          providerMetadata: { "openai-compatible": { itemId: "msg_text" } },
+        },
+        {
+          type: "text-start",
+          id: "msg_refusal",
+          providerMetadata: { "openai-compatible": { itemId: "msg_refusal" } },
+        },
+        {
+          type: "text-end",
+          id: "msg_refusal",
+          text: "Done-only refusal.",
+          providerMetadata: { "openai-compatible": { itemId: "msg_refusal" } },
+        },
+      ])
+    }),
+  )
+
+  it.effect("treats a repeated message lifecycle as replay", () =>
     Effect.gen(function* () {
       const events = yield* collect(
         { type: "response.output_item.added", item: { type: "message", id: "msg_1", phase: "commentary" } },
@@ -233,9 +289,44 @@ describe("Open Responses basic-item lifecycles", () => {
           id: "msg_1",
           providerMetadata: { "openai-compatible": { itemId: "msg_1", phase: "commentary" } },
         },
-        { type: "text-end", id: "msg_1", providerMetadata: { "openai-compatible": { itemId: "msg_1" } } },
       ])
-      expect(events.filter(LLMEvent.is.textDelta).map((event) => event.text)).toEqual(["First", "Second"])
+      expect(events.filter(LLMEvent.is.textDelta).map((event) => event.text)).toEqual(["First"])
+    }),
+  )
+
+  it.effect("ignores a stale done-only message while another message is active", () =>
+    Effect.gen(function* () {
+      const events = yield* collect(
+        { type: "response.output_item.added", item: { type: "message", id: "msg_1", phase: "commentary" } },
+        { type: "response.output_text.delta", item_id: "msg_1", delta: "Draft" },
+        {
+          type: "response.output_item.done",
+          item: { type: "message", id: "msg_2", content: [{ type: "output_text", text: "Recovered" }] },
+        },
+        {
+          type: "response.output_item.done",
+          item: { type: "message", id: "msg_1", content: [{ type: "output_text", text: "Final" }] },
+        },
+        {
+          type: "response.output_item.done",
+          item: { type: "message", id: "msg_2", content: [{ type: "output_text", text: "Late" }] },
+        },
+        completed,
+      )
+      expect(events.filter((event) => event.type.startsWith("text-"))).toEqual([
+        {
+          type: "text-start",
+          id: "msg_1",
+          providerMetadata: { "openai-compatible": { itemId: "msg_1", phase: "commentary" } },
+        },
+        { type: "text-delta", id: "msg_1", text: "Draft" },
+        {
+          type: "text-end",
+          id: "msg_1",
+          text: "Final",
+          providerMetadata: { "openai-compatible": { itemId: "msg_1", phase: "commentary" } },
+        },
+      ])
     }),
   )
   ;[undefined, "fc_1"].forEach((id) => {

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

@@ -4017,7 +4017,7 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("uses completed response output when output item completion is missing", () =>
+  it.effect("uses completed response output when item completion and its terminal item id are missing", () =>
     Effect.gen(function* () {
       const body = sseEvents(
         {
@@ -4032,7 +4032,6 @@ describe("OpenAI Responses route", () => {
             output: [
               {
                 type: "function_call",
-                id: "fc_item_1",
                 call_id: "call_1",
                 name: "lookup",
                 arguments: '{"query":"weather"}',

packages/ai/test/schema.test.ts

@@ -21,6 +21,7 @@ import {
   QuotaExceededError,
   RateLimitError,
   RouteID,
+  ToolResultValue,
   TransportError,
   UnknownProviderError,
   Usage,
@@ -83,6 +84,37 @@ describe("llm schema", () => {
   })
 })
 
+describe("ToolResultValue", () => {
+  test("uses the canonical schema guard", () => {
+    const cases: ReadonlyArray<{ readonly value: unknown; readonly expected: boolean }> = [
+      { value: { type: "json", value: { ok: true } }, expected: true },
+      { value: { type: "text", value: "done" }, expected: true },
+      { value: { type: "error", value: "failed" }, expected: true },
+      { value: { type: "content", value: [{ type: "text", text: "done" }] }, expected: true },
+      { value: { type: "content", value: [{ type: "text" }] }, expected: false },
+      { value: { type: "content", value: "done" }, expected: false },
+      { value: { type: "json" }, expected: false },
+      { value: { type: "unknown", value: "done" }, expected: false },
+    ]
+
+    for (const item of cases) {
+      expect(Schema.is(ToolResultValue)(item.value)).toBe(item.expected)
+      expect(ToolResultValue.is(item.value)).toBe(item.expected)
+    }
+  })
+
+  test("accepts canonical results with extra fields", () => {
+    expect(ToolResultValue.is({ type: "json", value: { ok: true }, metadata: { source: "tool" } })).toBe(true)
+    expect(
+      ToolResultValue.is({
+        type: "content",
+        value: [{ type: "file", uri: "https://example.test/result.txt", mime: "text/plain", checksum: "abc" }],
+        metadata: { source: "tool" },
+      }),
+    ).toBe(true)
+  })
+})
+
 describe("AI.Usage", () => {
   test("subtractTokens clamps non-sensical breakdowns to zero", () => {
     // Defense against a provider reporting cached_tokens > prompt_tokens or

packages/ai/test/tool-runtime.test.ts

@@ -442,6 +442,33 @@ describe("LLMClient tools", () => {
     }),
   )
 
+  it.effect("projects malformed tagged dynamic output as opaque JSON", () =>
+    Effect.gen(function* () {
+      const malformed = { type: "content", value: [{ type: "text" }] }
+      const dynamic = Tool.make({
+        description: "Return caller-defined JSON.",
+        jsonSchema: { type: "object", properties: {} },
+        execute: () => Effect.succeed(malformed),
+      })
+
+      const dispatched = yield* ToolRuntime.dispatch(
+        { dynamic },
+        LLMEvent.toolCall({ id: "call_1", name: "dynamic", input: {} }),
+      )
+
+      expect(dispatched.result).toEqual({ type: "json", value: malformed })
+      expect(dispatched.output).toEqual({ structured: malformed, content: [] })
+      expect(dispatched.events).toEqual([
+        LLMEvent.toolResult({
+          id: "call_1",
+          name: "dynamic",
+          result: { type: "json", value: malformed },
+          output: { structured: malformed, content: [] },
+        }),
+      ])
+    }),
+  )
+
   it.effect("executes tool calls for one step without looping by default", () =>
     Effect.gen(function* () {
       const layer = scriptedResponses([

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

@@ -1,5 +1,16 @@
 import { expect, story } from "../../storybook/playwright/story"
 
+story("raises the docked composer only in dark mode", async ({ mount, page }) => {
+  const component = await mount("opencode-composer-flow--empty-draft")
+  const composer = component.locator('[data-component="composer"]')
+
+  await page.locator("html").evaluate((root) => root.setAttribute("data-color-scheme", "light"))
+  await expect(composer).toHaveCSS("background-color", "rgb(255, 255, 255)")
+
+  await page.locator("html").evaluate((root) => root.setAttribute("data-color-scheme", "dark"))
+  await expect(composer).toHaveCSS("background-color", "rgb(36, 36, 36)")
+})
+
 for (const draft of ["empty-draft", "multiline-draft", "mixed-attachments"]) {
   story(`select all stays inside the composer with ${draft}`, async ({ mount, page }) => {
     const component = await mount(`opencode-composer-flow--${draft}`)

packages/app/component-tests/timeline-virtualizer.spec.ts

@@ -8,6 +8,30 @@ story.beforeEach(async ({ mount }) => {
   await expect(component.getByRole("textbox", { name: "Prompt", exact: true })).toBeVisible()
 })
 
+story("spaces the first mobile message without changing desktop spacing", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 })
+  await page.evaluate(async (fixture) => {
+    const { mountTimelineVirtualizer } = await import(fixture)
+    mountTimelineVirtualizer({ count: 1, rowHeight: 60, immediate: true })
+  }, fixture)
+  const root = page.getByTestId("timeline-virtualizer-fixture")
+  await root.getByRole("button", { name: "Complete Markdown", exact: true }).click()
+  const content = root.locator("[data-timeline-virtual-content]")
+  await expect(content).toHaveCSS("visibility", "visible")
+  const gap = () =>
+    root.locator('[data-timeline-key="user-message:message-0"]').evaluate((element) => {
+      const viewport = element.closest("[data-scrollable]")!
+      return element.getBoundingClientRect().top - viewport.getBoundingClientRect().top
+    })
+  await expect.poll(gap).toBe(16)
+  await root.evaluate((element) => element.setAttribute("dir", "rtl"))
+  await expect.poll(gap).toBe(16)
+  await page.setViewportSize({ width: 1280, height: 900 })
+  await expect.poll(gap).toBe(0)
+  await page.setViewportSize({ width: 390, height: 844 })
+  await expect.poll(gap).toBe(16)
+})
+
 story("bounds the cheap suffix and reveals only ready measured rows", async ({ page }) => {
   await page.evaluate(async (fixture) => {
     const { mountTimelineVirtualizer } = await import(fixture)

packages/app/e2e/regression/file-browser-sidebar-tab-switch.spec.ts

@@ -123,7 +123,7 @@ async function setup(page: Page) {
   })
 
   await page.addInitScript(
-    ({ directory, server, sessionID }) => {
+    ({ directory, server, sessionID, tabKey }) => {
       localStorage.setItem(
         "opencode.global.dat:server",
         JSON.stringify({
@@ -131,10 +131,8 @@ async function setup(page: Page) {
           lastProject: { local: directory },
         }),
       )
-      localStorage.setItem(
-        "opencode.global.dat:layout",
-        JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
-      )
+      localStorage.setItem("opencode.global.dat:layout", JSON.stringify({ review: { diffStyle: "split" } }))
+      localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify({ [tabKey]: { review: true } }))
       localStorage.setItem(
         "opencode.global.dat:review-panel-v2",
         JSON.stringify({ sidebarOpened: true, sidebarWidth: 240, expandMode: "collapse" }),
@@ -144,6 +142,6 @@ async function setup(page: Page) {
         JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
       )
     },
-    { directory, server, sessionID },
+    { directory, server, sessionID, tabKey: `${server}\n/server/${base64Encode(server)}/session/${sessionID}` },
   )
 }

packages/app/e2e/regression/mobile-files.spec.ts

@@ -0,0 +1,110 @@
+import { expect, test } from "@playwright/test"
+import { fixture, pageMessages } from "../performance/timeline/session-timeline-stress.fixture"
+import { stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+for (const direction of ["ltr", "rtl"] as const) {
+  test(`mobile files browse, search, switch, and close shared file tabs in ${direction}`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await mockOpenCodeServer(page, {
+      directory: fixture.directory,
+      project: fixture.project,
+      sessions: fixture.sessions,
+      provider: fixture.provider,
+      pageMessages,
+      fileList: (path) =>
+        path
+          ? []
+          : ["first.ts", "second.ts"].map((name) => ({
+              name,
+              path: name,
+              absolute: `${fixture.directory}/${name}`,
+              type: "file",
+              ignored: false,
+            })),
+      fileContent: (path) => `contents:${path}`,
+      findFiles: ({ query }) => ["first.ts", "second.ts"].filter((path) => path.includes(query)),
+    })
+    await page.goto(stressSessionHref(fixture.targetID))
+    const navigation = page.getByRole("tablist", { name: "Session view", exact: true })
+    await navigation.getByRole("tab", { name: "Files", exact: true }).click()
+    const files = page.locator('[data-slot="session-mobile-files"]')
+    await expect(files.getByRole("button", { name: "first.ts", exact: true })).toBeVisible()
+    await page.evaluate((direction) => (document.documentElement.dir = direction), direction)
+    await expect(files.locator('[data-slot="session-mobile-files-header"]')).toHaveCSS("border-bottom-width", "0px")
+    await expect
+      .poll(() =>
+        files.getByRole("tablist", { name: "Open files", exact: true }).evaluate((element) => {
+          const header = element.closest('[data-slot="session-mobile-files-header"]')!
+          const separator = getComputedStyle(element, "::before")
+          return {
+            height: separator.height,
+            fullWidth: parseFloat(separator.width) === header.clientWidth,
+            start: separator.insetInlineStart,
+            bottom: separator.bottom,
+          }
+        }),
+      )
+      .toEqual({ height: "1px", fullWidth: true, start: "0px", bottom: "0px" })
+    await files.getByRole("button", { name: "first.ts", exact: true }).click()
+    await expect(files.getByText("contents:first.ts", { exact: true })).toBeVisible()
+    await files.locator('[data-column-number="1"]').click()
+    const editor = files.locator('[data-component="line-comment-v2"][data-variant="editor"]')
+    await expect(editor.getByRole("textbox")).toBeVisible()
+    for (const width of [390, 700]) {
+      await page.setViewportSize({ width, height: 844 })
+      await expect
+        .poll(async () => {
+          const panel = await files.boundingBox()
+          const comment = await editor.boundingBox()
+          if (!panel || !comment) return false
+          return Math.abs(comment.x - panel.x - 12) < 2 && Math.abs(comment.width - panel.width + 24) < 2
+        })
+        .toBe(true)
+    }
+    await editor.getByRole("textbox").fill("Full-width file comment")
+    await editor.getByRole("button", { name: "Comment", exact: true }).click()
+    const comment = files.locator('[data-component="line-comment-v2"][data-variant="display"]')
+    await expect(comment).toContainText("Full-width file comment")
+    await expect
+      .poll(async () => {
+        const panel = await files.boundingBox()
+        const card = await comment.boundingBox()
+        if (!panel || !card) return false
+        return Math.abs(card.x - panel.x - 12) < 2 && Math.abs(card.width - panel.width + 24) < 2
+      })
+      .toBe(true)
+    await page.setViewportSize({ width: 390, height: 844 })
+    await expect(files.getByRole("combobox", { name: "Filter files", exact: true })).toBeHidden()
+    await files.getByRole("button", { name: "All files", exact: true }).click()
+    await files.getByRole("combobox", { name: "Filter files", exact: true }).fill("second")
+    await files.getByRole("option", { name: "second.ts", exact: true }).click()
+    await expect(files.getByText("contents:second.ts", { exact: true })).toBeVisible()
+    const openTabs = files.getByRole("tablist", { name: "Open files", exact: true })
+    await expect(openTabs.getByRole("tab")).toHaveText(["first.ts", "second.ts"])
+    await expect
+      .poll(() =>
+        openTabs.getByRole("tab", { name: "second.ts", exact: true }).evaluate((element) => {
+          const tab = element.closest('[data-slot="tabs-v2-trigger-wrapper"]')!
+          const header = element.closest('[data-slot="session-mobile-files-header"]')!
+          return Math.abs(tab.getBoundingClientRect().bottom - header.getBoundingClientRect().bottom) < 1
+        }),
+      )
+      .toBe(true)
+    await openTabs.getByRole("tab", { name: "first.ts", exact: true }).click()
+    await expect(files.getByText("contents:first.ts", { exact: true })).toBeVisible()
+    await navigation.getByRole("tab", { name: "Session", exact: true }).click()
+    await navigation.getByRole("tab", { name: "Files", exact: true }).click()
+    await expect(files.getByText("contents:first.ts", { exact: true })).toBeVisible()
+    await files
+      .locator('[data-slot="tabs-v2-trigger-wrapper"]')
+      .filter({ has: page.getByRole("tab", { name: "first.ts", exact: true }) })
+      .getByRole("button", { name: "Close tab", exact: true })
+      .click()
+    await expect(openTabs.getByRole("tab")).toHaveText(["second.ts"])
+    await expect(files.getByText("contents:second.ts", { exact: true })).toBeVisible()
+    await files.getByRole("button", { name: "Close tab", exact: true }).click()
+    await expect(files.getByRole("combobox", { name: "Filter files", exact: true })).toBeVisible()
+    await expect(openTabs.getByRole("tab")).toHaveCount(0)
+  })
+}

packages/app/e2e/regression/mobile-review-open-file.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "@playwright/test"
+import { fixture, pageMessages } from "../performance/timeline/session-timeline-stress.fixture"
+import { stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+test("opening changed files selects the requested tab before file loading completes", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 })
+  const loading = Promise.withResolvers<void>()
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    sessions: fixture.sessions,
+    provider: fixture.provider,
+    pageMessages,
+    fileList: () => [],
+    fileContent: async (path) => {
+      if (path === "second.ts") await loading.promise
+      return `contents:${path}`
+    },
+    vcsDiff: ["first.ts", "second.ts"].map((file) => ({
+      file,
+      status: "modified",
+      additions: 1,
+      deletions: 1,
+      patch: `diff --git a/${file} b/${file}\n--- a/${file}\n+++ b/${file}\n@@ -1 +1 @@\n-before\n+after\n`,
+    })),
+  })
+  await page.goto(stressSessionHref(fixture.targetID))
+  const navigation = page.getByRole("tablist", { name: "Session view", exact: true })
+  const files = page.locator('[data-slot="session-mobile-files"]')
+  for (const file of ["first.ts", "second.ts", "first.ts", "second.ts"]) {
+    await navigation.getByRole("tab", { name: "Changes", exact: true }).click()
+    const diff = page.locator(`[data-component="session-review"] [data-file="${file}"]`)
+    const header = diff.getByRole("button", { name: file, exact: true })
+    await expect(header).toBeEnabled()
+    if ((await header.getAttribute("aria-expanded")) === "false") await header.click()
+    await diff.getByRole("button", { name: "Open file", exact: true }).click()
+    await expect(navigation.getByRole("tab", { name: "Files", exact: true })).toHaveAttribute("aria-selected", "true")
+    await expect(files.getByRole("tab", { name: file, exact: true })).toHaveAttribute("aria-selected", "true")
+    if (file === "second.ts") loading.resolve()
+    await expect(files.getByText(`contents:${file}`, { exact: true })).toBeVisible()
+  }
+})

packages/app/e2e/regression/mobile-review-summary.spec.ts

@@ -0,0 +1,138 @@
+import { expect, test } from "@playwright/test"
+import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
+import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+
+for (const direction of ["ltr", "rtl"] as const) {
+  test(`mobile change summaries appear only for expanded diffs in ${direction}`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await mockStressTimeline(page, {
+      vcsDiff: [
+        {
+          file: "added.ts",
+          status: "added",
+          additions: 1,
+          deletions: 0,
+          patch:
+            "diff --git a/added.ts b/added.ts\n--- /dev/null\n+++ b/added.ts\n@@ -0,0 +1 @@\n+export const added = 1\n",
+        },
+        {
+          file: "removed.ts",
+          status: "deleted",
+          additions: 0,
+          deletions: 1,
+          patch:
+            "diff --git a/removed.ts b/removed.ts\n--- a/removed.ts\n+++ /dev/null\n@@ -1 +0,0 @@\n-export const removed = 1\n",
+        },
+        {
+          file: "modified.ts",
+          status: "modified",
+          additions: 1,
+          deletions: 1,
+          patch: `diff --git a/modified.ts b/modified.ts\n--- a/modified.ts\n+++ b/modified.ts\n@@ -1 +1 @@\n-export const value = 1\n+export const value = "${"long content ".repeat(30)}"\n`,
+        },
+      ],
+    })
+    await page.goto(stressSessionHref(fixture.targetID))
+    await page.getByRole("tab", { name: "Changes", exact: true }).click()
+    const review = page.locator('[data-component="session-review"]')
+    await expect(review.getByRole("button", { name: "Expand all", exact: true })).toBeVisible()
+    await page.evaluate((direction) => (document.documentElement.dir = direction), direction)
+
+    await expect(review.locator('[data-file="added.ts"] [data-slot="accordion-trigger"]')).toHaveCSS(
+      "border-top-width",
+      "0px",
+    )
+    await expect(review.locator('[data-file="modified.ts"] [data-slot="accordion-trigger"]')).toHaveCSS(
+      "border-bottom-width",
+      "0px",
+    )
+
+    for (const change of [
+      { file: "added.ts", status: "Added", additions: "+1", deletions: "-0" },
+      { file: "removed.ts", status: "Removed", additions: "+0", deletions: "-1" },
+      { file: "modified.ts", status: undefined, additions: "+1", deletions: "-1" },
+    ]) {
+      const item = review.locator(`[data-file="${change.file}"]`)
+      const trigger = item.getByRole("button", { name: change.file, exact: true })
+      const summary = item.locator('[data-slot="session-review-change-summary"]')
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(trigger.locator('[data-component="diff-changes"]')).toHaveCount(0)
+      await expect(trigger.locator('[data-slot="session-review-change"]')).toHaveCount(0)
+      await expect(summary).toHaveCount(0)
+      await trigger.click()
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      if (change.file === "modified.ts") {
+        await expect(item.locator('[data-slot="accordion-content"]')).toHaveCSS("border-bottom-width", "0px")
+        await expect(trigger).not.toHaveCSS("border-bottom-width", "0px")
+      }
+      await expect(summary).toBeVisible()
+      await expect(summary.getByRole("button", { name: "Open file", exact: true })).toBeVisible()
+      await expect(summary.locator('[data-slot="diff-changes-additions"]')).toHaveText(change.additions)
+      await expect(summary.locator('[data-slot="diff-changes-deletions"]')).toHaveText(change.deletions)
+      if (change.status) await expect(summary.getByText(change.status, { exact: true })).toBeVisible()
+      await trigger.click()
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(summary).toHaveCount(0)
+    }
+    await expect(review.locator('[data-slot="session-review-view-button"]')).toHaveCount(0)
+    const modified = review.locator('[data-file="modified.ts"]')
+    await modified.getByRole("button", { name: "modified.ts", exact: true }).click()
+    await expect(modified.locator("[data-line-number-content]")).toHaveText(["1", "1"])
+    await expect(modified.locator("[data-diff]")).not.toHaveAttribute("data-disable-line-numbers")
+    await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "wrap")
+    await expect(review.getByRole("button", { name: "Diff options", exact: true })).toHaveCount(0)
+    await page.keyboard.press("Control+,")
+    const settings = page.getByTestId("settings-screen")
+    const wrap = settings.getByRole("switch", { name: "Wrap lines", exact: true })
+    const wrapControl = settings.locator('[data-action="settings-mobile-diff-wrap"] [data-slot="switch-control"]')
+    await expect(wrap).toBeChecked()
+    await wrapControl.click()
+    await expect(wrap).not.toBeChecked()
+    await expect
+      .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.mobileDiffWrap))
+      .toBe(false)
+    await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+    await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "scroll")
+    await expect
+      .poll(() => modified.locator("[data-code]").evaluate((element) => element.scrollWidth > element.clientWidth))
+      .toBe(true)
+    await modified.locator("[data-code]").evaluate((element) => {
+      element.scrollLeft = 100
+    })
+    await expect
+      .poll(() => modified.locator("[data-code]").evaluate((element) => Math.abs(element.scrollLeft)))
+      .toBeGreaterThan(0)
+    const navigation = page.getByRole("tablist", { name: "Session view", exact: true })
+    await navigation.getByRole("tab", { name: "Session", exact: true }).click()
+    await navigation.getByRole("tab", { name: "Changes", exact: true }).click()
+    await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "scroll")
+    await page.keyboard.press("Control+,")
+    await expect(wrap).not.toBeChecked()
+    await wrapControl.click()
+    await expect(wrap).toBeChecked()
+    await expect
+      .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.mobileDiffWrap))
+      .toBe(true)
+    await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+    await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "wrap")
+    const openFile = modified.getByRole("button", { name: "Open file", exact: true })
+    await expect(openFile).toBeVisible()
+    await expect
+      .poll(async () => {
+        const button = await openFile.boundingBox()
+        const summary = await modified.locator('[data-slot="session-review-change-summary"]').boundingBox()
+        if (!button || !summary) return false
+        return direction === "ltr"
+          ? button.x > summary.x + summary.width / 2
+          : button.x + button.width < summary.x + summary.width / 2
+      })
+      .toBe(true)
+    await openFile.click()
+    await expect(
+      page.getByRole("tablist", { name: "Session view", exact: true }).getByRole("tab", { name: "Files", exact: true }),
+    ).toHaveAttribute("aria-selected", "true")
+    const files = page.locator('[data-slot="session-mobile-files"]')
+    await expect(files.getByRole("tab", { name: "modified.ts", exact: true })).toHaveAttribute("aria-selected", "true")
+    await expect(files).toHaveAttribute("data-browsing", "false")
+  })
+}

packages/app/e2e/regression/mobile-session-views.spec.ts

@@ -0,0 +1,186 @@
+import { expect, test } from "@playwright/test"
+import { fixture, pageMessages } from "../performance/timeline/session-timeline-stress.fixture"
+import { installStressSessionTabs, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+for (const position of ["top", "bottom"] as const) {
+  test(`mobile session tabs switch views and keep the terminal cached with ${position} navigation`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await mockOpenCodeServer(page, {
+      directory: fixture.directory,
+      project: fixture.project,
+      sessions: fixture.sessions,
+      provider: fixture.provider,
+      pageMessages,
+      fileList: () => [],
+    })
+    await installStressSessionTabs(page)
+    await page.addInitScript(
+      (position) =>
+        localStorage.setItem("settings.v3", JSON.stringify({ general: { mobileTitlebarPosition: position } })),
+      position,
+    )
+    await page.route("**/api/pty*", (route) =>
+      route.fulfill({
+        json: {
+          location: { directory: fixture.directory, project: { id: fixture.project.id, directory: fixture.directory } },
+          data: {
+            id: "pty_mobile_views",
+            title: "Terminal 1",
+            command: "sh",
+            args: [],
+            cwd: fixture.directory,
+            status: "running",
+            pid: 1,
+          },
+        },
+      }),
+    )
+    await page.routeWebSocket("**/api/pty/pty_mobile_views/connect", () => undefined)
+    await page.route("**/api/pty/pty_mobile_views/connect-token*", (route) =>
+      route.fulfill({
+        json: {
+          location: { directory: fixture.directory, project: { id: fixture.project.id, directory: fixture.directory } },
+          data: { ticket: "e2e-ticket", expires_in: 60 },
+        },
+      }),
+    )
+    await page.goto(stressSessionHref(fixture.targetID))
+
+    const tabs = page.getByRole("tablist", { name: "Session view", exact: true })
+    const navigation = page.locator('[data-slot="session-mobile-view-navigation"]')
+    const more = navigation.getByRole("button", { name: "More options", exact: true })
+    const picker = tabs.getByRole("tab", { selected: true })
+    const message = page.locator(
+      `[data-timeline-row="UserMessage"][data-message-id="${fixture.expected.targetMessageIDs.at(-1)}"]`,
+    )
+    const composer = page.getByRole("textbox", { name: "Prompt", exact: true })
+    await expect(picker).toHaveText("Session")
+    await expect(message).toBeVisible()
+    await expect(composer).toBeVisible()
+    await expect(tabs.getByRole("tab")).toHaveText(["Session", "Changes", "Files", "Terminal"])
+    await expect(tabs).toHaveCSS("padding-left", "0px")
+    await expect(tabs).toHaveCSS("padding-right", "0px")
+    await expect
+      .poll(async () => {
+        const bounds = await navigation.boundingBox()
+        return !!bounds && bounds.x >= 8 && bounds.x <= 9 && bounds.width >= 372 && bounds.width <= 374
+      })
+      .toBe(true)
+    await expect
+      .poll(async () => {
+        const bar = await tabs.boundingBox()
+        const input = await composer.boundingBox()
+        const panel = await page.locator('[data-slot="session-chat-panel"]').boundingBox()
+        return !!bar && !!input && !!panel && Math.abs(bar.y - panel.y) <= 1 && bar.y + bar.height <= input.y
+      })
+      .toBe(true)
+    await expect(page.locator("[data-session-title]")).toHaveCount(0)
+    await expect(page.locator('[data-slot="mobile-tabs-trigger"]')).toContainText(fixture.expected.targetTitle)
+    await page.getByRole("button", { name: "Tabs", exact: true }).click()
+    const drawer = page.getByRole("dialog", { name: "Tabs", exact: true })
+    await expect(drawer).toHaveAttribute("data-open", "")
+    await expect(drawer).not.toHaveAttribute("data-transitioning")
+    await expect(drawer.getByRole("button", { name: "Settings", exact: true })).toBeInViewport()
+    await drawer.getByRole("button", { name: "Settings", exact: true }).click()
+    await expect(page.getByTestId("settings-screen")).toBeVisible()
+    await page.getByRole("button", { name: "Back to app", exact: true }).click()
+    await page.getByRole("button", { name: "Tabs", exact: true }).click()
+    await expect(drawer).not.toHaveAttribute("data-transitioning")
+    await expect(drawer.getByRole("button", { name: "Settings", exact: true })).toBeInViewport()
+    await page.keyboard.press("Escape")
+    await expect(drawer).toBeHidden()
+
+    await more.click()
+    await page.getByRole("menuitem", { name: "Usage", exact: true }).click()
+    await expect(picker).toHaveCount(0)
+    await expect(page.getByText("Total Cost", { exact: true })).toBeVisible()
+    const usage = page.locator('[data-slot="session-usage-content"]')
+    await expect(usage).toHaveCSS("padding-top", "16px")
+    await expect(usage).toHaveCSS("padding-inline-start", "16px")
+    await expect(usage).toHaveCSS("padding-inline-end", "16px")
+    await expect(composer).toBeHidden()
+
+    await more.click()
+    await page.getByRole("menuitem", { name: "Status", exact: true }).click()
+    const status = page.getByRole("dialog", { name: "Status", exact: true })
+    await expect(status.getByRole("tab", { name: "MCP", exact: true })).toBeVisible()
+    await status.getByRole("tab", { name: "Plugins", exact: true }).click()
+    await expect(status.getByText("opencode.json", { exact: true })).toBeVisible()
+    await status.getByRole("button", { name: "Close", exact: true }).click()
+    await expect(status).toBeHidden()
+    await expect(more).toBeFocused()
+
+    await more.click()
+    await page.getByRole("menuitem", { name: "Session details", exact: true }).click()
+    const details = page.getByRole("dialog", { name: "Session details", exact: true })
+    await expect(details.getByText(fixture.project.name, { exact: true })).toBeVisible()
+    await expect(details.getByRole("button", { name: "No changes", exact: true })).toBeVisible()
+    await details.getByRole("button", { name: "Close", exact: true }).click()
+    await expect(details).toBeHidden()
+    await expect(more).toBeFocused()
+    await more.click()
+    await page.getByRole("menuitem", { name: "Session details", exact: true }).click()
+    await expect(details.getByRole("button", { name: "No changes", exact: true })).toBeVisible()
+    await expect(details).not.toHaveAttribute("data-transitioning")
+    await page.keyboard.press("Escape")
+    await expect(details).toBeHidden()
+    await expect(more).toBeFocused()
+    await more.click()
+    await page.getByRole("menuitem", { name: "Session details", exact: true }).click()
+    await details.getByRole("button", { name: "No changes", exact: true }).click()
+    await expect(details).toBeHidden()
+    await expect(picker).toHaveText("Changes")
+    await expect(page.getByText("No uncommitted changes yet", { exact: true })).toBeVisible()
+    await expect(page.locator('[data-slot="session-review-header"]')).toHaveCSS("height", "40px")
+    await expect(page.locator('[data-slot="session-review-header"]')).toHaveCSS("padding-left", "8px")
+    await expect(composer).toBeHidden()
+
+    await tabs.getByRole("tab", { name: "Files", exact: true }).click()
+    await expect(picker).toHaveText("Files")
+    await expect(page.getByRole("combobox", { name: "Filter files", exact: true })).toBeVisible()
+    await expect(composer).toBeHidden()
+
+    await tabs.getByRole("tab", { name: "Terminal", exact: true }).click()
+    const panel = page.locator("#terminal-panel")
+    await expect(panel).toHaveAttribute("data-opened", "true")
+    await expect(panel.getByRole("tab", { name: /Terminal 1/ })).toBeVisible()
+    await expect(panel.locator('[data-component="terminal"]')).toBeVisible()
+    await expect(panel.locator("textarea")).toBeEditable()
+    await expect(panel).toHaveCount(1)
+    await panel.evaluate((element) => element.setAttribute("data-cache-probe", "original"))
+    await expect(composer).toBeHidden()
+
+    await tabs.getByRole("tab", { name: "Session", exact: true }).click()
+    await expect(message).toBeVisible()
+    await expect(panel).toBeHidden()
+    await expect(panel).toHaveAttribute("inert", "")
+    await expect(panel).toHaveAttribute("data-cache-probe", "original")
+
+    await page.keyboard.press("Control+Backquote")
+    await expect(picker).toHaveText("Terminal")
+    await expect(panel).toBeVisible()
+    await expect(panel).toHaveAttribute("data-cache-probe", "original")
+    await page.keyboard.press("Control+Backquote")
+    await expect(picker).toHaveText("Session")
+
+    await page.keyboard.press("Control+Backquote")
+    await expect(picker).toHaveText("Terminal")
+    await panel.getByRole("button", { name: "Close terminal", exact: true }).click()
+    await expect(picker).toHaveText("Session")
+    await expect(panel).toBeHidden()
+
+    await more.click()
+    await page.getByRole("menuitem", { name: "Usage", exact: true }).click()
+    await expect(page.getByText("Total Cost", { exact: true })).toBeVisible()
+    await page.goto(stressSessionHref(fixture.sourceID))
+    await expect(picker).toHaveText("Session")
+    await expect(page.locator('[data-slot="mobile-tabs-trigger"]')).toContainText(fixture.expected.sourceTitle)
+
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await expect(picker).toBeHidden()
+    await expect(page.locator("[data-session-title]")).toBeVisible()
+  })
+}

packages/app/e2e/regression/mobile-shell.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test"
+import { fixture } from "../smoke/session-timeline.fixture"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true })
+
+test.beforeEach(async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    provider: fixture.provider,
+    sessions: fixture.sessions,
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.addInitScript(
+    ({ directory, server, sessions }) => {
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({ projects: { local: [{ worktree: directory, expanded: true }] } }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify(sessions.map((session) => ({ type: "session", server, sessionId: session.id }))),
+      )
+    },
+    { directory: fixture.directory, server: fixture.serverKey, sessions: fixture.sessions },
+  )
+  await page.goto("/")
+  await expect(page.locator('[data-component="home-session-row"]')).toHaveCount(fixture.sessions.length)
+})
+
+test("mobile project selection and drawer navigation preserve session identity", async ({ page }) => {
+  const projects = page.getByRole("button", { name: "Projects", exact: true })
+  await projects.click()
+  const picker = page.getByRole("dialog", { name: "Projects", exact: true })
+  await expect(picker.getByRole("button", { name: "All projects", exact: true })).toBeVisible()
+  await picker.getByRole("button", { name: new RegExp(` ${fixture.project.name}$`) }).click()
+  await expect(picker).toBeHidden()
+  await expect(projects).toContainText(fixture.project.name)
+
+  const trigger = page.locator('[data-slot="mobile-tabs-trigger"]')
+  const drawer = page.locator('[data-slot="mobile-tabs-drawer"]')
+  await trigger.click()
+  await expect(trigger).toHaveAttribute("aria-expanded", "true")
+  await expect(drawer.locator('[data-slot="tab-project"]')).toHaveText([fixture.project.name, fixture.project.name])
+  const settings = drawer.getByRole("button", { name: "Settings", exact: true })
+  const help = drawer.getByRole("button", { name: "Help", exact: true })
+  await expect(settings).toBeVisible()
+  await expect(help).toBeVisible()
+  expect((await settings.boundingBox())?.width).toBeGreaterThan((await help.boundingBox())?.width ?? 0)
+
+  await drawer.locator('[data-slot="tab-link"]').filter({ hasText: fixture.expected.sourceTitle }).click()
+  await expect(page).toHaveURL(new RegExp(`/session/${fixture.sourceID}$`))
+  await expect(drawer).toBeHidden()
+  await expect(trigger).toContainText(fixture.expected.sourceTitle)
+  await trigger.click()
+  await drawer.getByRole("button", { name: "Home", exact: true }).click()
+  await expect(page).toHaveURL("/")
+  await expect(drawer).toBeHidden()
+  await expect(page.locator('[data-component="home-session-row"]')).toHaveCount(fixture.sessions.length)
+})
+
+test("mobile settings section menu stays above a full-width panel", async ({ page }) => {
+  await page.locator('[data-slot="mobile-tabs-trigger"]').click()
+  await page.locator('[data-slot="mobile-tabs-drawer"]').getByRole("button", { name: "Settings", exact: true }).click()
+  const settings = page.getByTestId("settings-screen")
+  const menu = settings.getByRole("button", { name: "Preferences", exact: true })
+  const panel = settings.getByRole("tabpanel")
+  await expect(settings.getByRole("heading", { name: "General", exact: true })).toBeVisible()
+  await expect(menu).toBeVisible()
+  await menu.click()
+  await expect(page.getByRole("menuitemradio", { name: "Preferences", exact: true })).toBeChecked()
+  await page.keyboard.press("Escape")
+  await expect(page.getByRole("menuitemradio", { name: "Preferences", exact: true })).toBeHidden()
+  await expect(settings).toBeVisible()
+  await menu.click()
+  await page.getByRole("menuitemradio", { name: "Models", exact: true }).click()
+  await expect(settings.getByRole("heading", { name: "Models", exact: true })).toBeVisible()
+  await expect(settings.getByRole("button", { name: "Models", exact: true })).toBeVisible()
+  await expect(settings.getByRole("switch", { name: "Claude Opus 4.6", exact: true })).toBeAttached()
+  await expect
+    .poll(async () => {
+      const navigation = await settings.getByRole("button", { name: "Models", exact: true }).boundingBox()
+      const content = await panel.boundingBox()
+      return !!navigation && !!content && navigation.y + navigation.height <= content.y
+    })
+    .toBe(true)
+  await expect.poll(async () => (await panel.boundingBox())?.width ?? 0).toBeGreaterThan(350)
+  await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+  await expect(settings).toBeHidden()
+  await expect(page.locator('[data-component="home-session-row"]')).toHaveCount(fixture.sessions.length)
+})

packages/app/e2e/regression/mobile-status-drawer.spec.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "@playwright/test"
+import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
+import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+
+test("status drawer dismisses and reopens after button, backdrop, Escape, and drag", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 })
+  await mockStressTimeline(page)
+  await page.goto(stressSessionHref(fixture.targetID))
+  const more = page
+    .locator('[data-slot="session-mobile-view-navigation"]')
+    .getByRole("button", { name: "More options", exact: true })
+  const drawer = page.getByRole("dialog", { name: "Status", exact: true })
+  const overlay = page.locator('[data-slot="mobile-drawer-overlay"]')
+
+  for (const dismissal of ["button", "backdrop", "escape", "drag", "button"] as const) {
+    await more.click()
+    await page.getByRole("menuitem", { name: "Status", exact: true }).click()
+    await expect(drawer.getByRole("tab", { name: "MCP", exact: true })).toBeVisible()
+    await expect(drawer).not.toHaveAttribute("data-transitioning")
+    if (dismissal === "button") await drawer.getByRole("button", { name: "Close", exact: true }).click()
+    if (dismissal === "backdrop") await overlay.click({ position: { x: 10, y: 10 } })
+    if (dismissal === "escape") await page.keyboard.press("Escape")
+    if (dismissal === "drag") {
+      const handle = drawer.locator('[data-slot="mobile-drawer-handle"]')
+      const bounds = await handle.boundingBox()
+      expect(bounds).not.toBeNull()
+      await page.mouse.move(bounds!.x + bounds!.width / 2, bounds!.y + bounds!.height / 2)
+      await page.mouse.down()
+      await page.mouse.move(bounds!.x + bounds!.width / 2, bounds!.y + bounds!.height / 2 + 1)
+      await page.mouse.move(bounds!.x + bounds!.width / 2, 843)
+      await page.mouse.up()
+    }
+    await expect(drawer, `dismissal: ${dismissal}`).toBeHidden()
+    await expect(overlay).toHaveCount(0)
+    await expect(more).toBeFocused()
+  }
+})

packages/app/e2e/regression/open-file-expand-folder.spec.ts

@@ -80,7 +80,7 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
   })
 
   await page.addInitScript(
-    ({ directory, server, sessionID }) => {
+    ({ directory, server, sessionID, tabKey }) => {
       localStorage.setItem(
         "opencode.global.dat:server",
         JSON.stringify({
@@ -88,10 +88,8 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
           lastProject: { local: directory },
         }),
       )
-      localStorage.setItem(
-        "opencode.global.dat:layout",
-        JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
-      )
+      localStorage.setItem("opencode.global.dat:layout", JSON.stringify({ review: { diffStyle: "split" } }))
+      localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify({ [tabKey]: { review: true } }))
       localStorage.setItem(
         "opencode.global.dat:review-panel-v2",
         JSON.stringify({ sidebarOpened: true, sidebarWidth: 240, expandMode: "collapse" }),
@@ -101,7 +99,7 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
         JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
       )
     },
-    { directory, server, sessionID },
+    { directory, server, sessionID, tabKey: `${server}\n/server/${base64Encode(server)}/session/${sessionID}` },
   )
 
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)

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

@@ -64,7 +64,7 @@ test("project Extensions stays inside settings while plugins load", async ({ pag
           location: project ? { directory: project } : {},
           data: (project ? ["shared-plugin", "project-plugin"] : ["shared-plugin"]).map((id) => ({
             id,
-            source: { type: "package", package: id },
+            source: { type: "package", target: id },
             state: { status: "active" },
             features: { server: true },
           })),

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

@@ -89,7 +89,7 @@ async function openReview(page: Page) {
   )
   await changes.click()
   expect((await (await diffResponse).json()).data).toHaveLength(1)
-  await expect(page.getByRole("tab", { selected: true })).toHaveAccessibleName(/Files Changed/)
+  await expect(changes).toHaveAttribute("aria-selected", "true")
 
   const review = page.locator('[data-component="session-review"]')
   await expectAppVisible(review)

packages/app/e2e/regression/review-open-file.spec.ts

@@ -61,7 +61,7 @@ test("opens and searches project files inline", async ({ page }) => {
     pageMessages: () => ({ items: [] }),
   })
   await page.addInitScript(
-    ({ directory, server, sessionID }) => {
+    ({ directory, server, sessionID, tabKey }) => {
       localStorage.setItem(
         "opencode.global.dat:server",
         JSON.stringify({
@@ -69,10 +69,8 @@ test("opens and searches project files inline", async ({ page }) => {
           lastProject: { local: directory },
         }),
       )
-      localStorage.setItem(
-        "opencode.global.dat:layout",
-        JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
-      )
+      localStorage.setItem("opencode.global.dat:layout", JSON.stringify({ review: { diffStyle: "split" } }))
+      localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify({ [tabKey]: { review: true } }))
       localStorage.setItem(
         "opencode.global.dat:review-panel-v2",
         JSON.stringify({ sidebarOpened: false, sidebarWidth: 240, expandMode: "collapse" }),
@@ -82,7 +80,7 @@ test("opens and searches project files inline", async ({ page }) => {
         JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
       )
     },
-    { directory, server, sessionID },
+    { directory, server, sessionID, tabKey: `${server}\n/server/${base64Encode(server)}/session/${sessionID}` },
   )
 
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)

packages/app/e2e/regression/review-state-persistence.spec.ts

@@ -22,6 +22,7 @@ test("restores review mode and selected file per session", async ({ page }) => {
   await selectFile(page, "alpha.ts")
 
   await switchSession(page, titleB)
+  await page.getByRole("button", { name: "Toggle review" }).click()
   await expect(page.getByRole("button", { name: "Git changes" })).toBeVisible()
   await selectFile(page, "gamma.ts")
 

packages/app/e2e/regression/review-tab-switch.spec.ts

@@ -18,37 +18,72 @@ const PROBE = "original"
 
 test.use({ viewport: { width: 1440, height: 900 } })
 
-// The v2 review pane's diff data is workspace-scoped: switching between session
-// tabs in the same workspace must update its parameters reactively instead of
-// tearing the pane down and remounting it (which flickers).
-test("keeps the v2 review pane mounted when switching session tabs in a workspace", async ({ page }) => {
+// The review pane's data is workspace-scoped, but visibility belongs to each
+// session tab. Switching tabs must keep the pane mounted without opening it.
+test("keeps review visibility per tab and the pane mounted across tab switches", async ({ page }) => {
   await setup(page)
 
   await page.goto(sessionHref(sessionA))
   await expectSessionTitle(page, titleA)
 
   await page.getByRole("button", { name: "Toggle review" }).click()
+  await expect
+    .poll(() =>
+      page
+        .locator('[data-slot="session-chat-panel"]')
+        .evaluate((element) => getComputedStyle(element).transitionDuration),
+    )
+    .toContain("0.24s")
   const reviewTab = page.locator("#session-side-panel-review-tab")
   const reviewTabPanel = page.locator("#session-side-panel-review-tabpanel")
+  const chatPanel = page.locator('[data-slot="session-chat-panel"]')
   await expect(reviewTab).toHaveAttribute("aria-controls", "session-side-panel-review-tabpanel")
   await expect(reviewTabPanel).toHaveAttribute("id", "session-side-panel-review-tabpanel")
   const review = page.locator('#review-panel [data-component="session-review-v2"]')
   await expectAppVisible(review)
+  await expect(chatPanel).toHaveCSS("width", "580px")
   await expectAppVisible(page.getByRole("button", { name: "generated-0000.ts" }))
   await writeProbe(page)
 
   await switchTab(page, titleB)
   await expectSessionTitle(page, titleB)
-  await expectAppVisible(review)
-  await expectAppVisible(page.getByRole("button", { name: "generated-0000.ts" }))
+  await expect(review).toBeHidden()
+  await expect
+    .poll(() =>
+      page
+        .locator('[data-slot="session-chat-panel"]')
+        .evaluate((element) => getComputedStyle(element).transitionDuration),
+    )
+    .toBe("0s")
   expect(await readProbe(page)).toBe(PROBE)
 
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  await expectAppVisible(review)
+  await expect(chatPanel).toHaveCSS("width", "520px")
+
   await switchTab(page, titleA)
   await expectSessionTitle(page, titleA)
   await expectAppVisible(review)
+  await expect(chatPanel).toHaveCSS("width", "580px")
   await expectAppVisible(page.getByRole("button", { name: "generated-0000.ts" }))
   expect(await readProbe(page)).toBe(PROBE)
 
+  await expect
+    .poll(() =>
+      page.evaluate(
+        ({ key }) => {
+          const panes = JSON.parse(localStorage.getItem("opencode.window.browser.dat:tabs.panes") ?? "{}")
+          return panes[key]?.review
+        },
+        { key: `${server}\n${sessionHref(sessionA)}` },
+      ),
+    )
+    .toBe(true)
+  await page.reload()
+  await expectSessionTitle(page, titleA)
+  await expectAppVisible(review)
+  await expect(chatPanel).toHaveCSS("width", "580px")
+
   const viewport = page.locator('#review-panel [data-slot="session-review-v2-sidebar-tree"] .scroll-view__viewport')
   await viewport.hover()
   await page.mouse.wheel(0, 100_000)
@@ -102,7 +137,7 @@ async function setup(page: Page) {
   })
 
   await page.addInitScript(
-    ({ directory, server, sessions }) => {
+    ({ directory, server, sessions, panes }) => {
       localStorage.setItem(
         "opencode.global.dat:server",
         JSON.stringify({
@@ -114,8 +149,19 @@ async function setup(page: Page) {
         "opencode.window.browser.dat:tabs",
         JSON.stringify(sessions.map((sessionId: string) => ({ type: "session", server, sessionId }))),
       )
+      if (!localStorage.getItem("opencode.window.browser.dat:tabs.panes")) {
+        localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify(panes))
+      }
+    },
+    {
+      directory,
+      server,
+      sessions: [sessionA, sessionB],
+      panes: {
+        [`${server}\n${sessionHref(sessionA)}`]: { sessionWidth: 580 },
+        [`${server}\n${sessionHref(sessionB)}`]: { sessionWidth: 520 },
+      },
     },
-    { directory, server, sessions: [sessionA, sessionB] },
   )
 }
 

packages/app/e2e/regression/review-terminal-bottom.spec.ts

@@ -123,12 +123,17 @@ test("uses side placement by default and supports the terminal across the bottom
     }),
   )
   await page.routeWebSocket("**/api/pty/pty_review_terminal/connect", () => undefined)
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "opencode.global.dat:layout",
-      JSON.stringify({ review: { diffStyle: "split", panelOpened: true } }),
-    )
-  })
+  await page.addInitScript(
+    ({ tabKey, server, sessionID }) => {
+      localStorage.setItem("opencode.global.dat:layout", JSON.stringify({ review: { diffStyle: "split" } }))
+      localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify({ [tabKey]: { review: true } }))
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
+      )
+    },
+    { tabKey: `${server}\n/server/${base64Encode(server)}/session/${sessionID}`, server, sessionID },
+  )
 
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
   await expectSessionReady(page, { server, sessionID, title })

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

@@ -85,7 +85,7 @@ test("extensions opens without waiting for MCPs or plugins", async ({ page }) =>
         data: [
           {
             id: "demo-plugin",
-            source: { type: "package", package: "demo-plugin" },
+            source: { type: "package", target: "demo-plugin" },
             state: { status: "active" },
             features: { server: true },
           },

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

@@ -69,7 +69,7 @@ test("keyboard navigation follows the visible tab order", async ({ page }) => {
   await expect(page).toHaveURL(new RegExp(`${hrefC.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
 })
 
-test("cramped tabs only show the close button for the active tab", async ({ page }) => {
+test("mobile drawer exposes close controls and navigates between tabs", async ({ page }) => {
   await page.setViewportSize({ width: 360, height: 720 })
   await mockServer(page)
   await page.addInitScript(
@@ -89,26 +89,31 @@ test("cramped tabs only show the close button for the active tab", async ({ page
   const hrefA = `/server/${base64Encode(server)}/session/${sessionA.id}`
   const hrefB = `/server/${base64Encode(server)}/session/${sessionB.id}`
   await page.goto(hrefA)
+  await page.getByRole("button", { name: "Tabs", exact: true }).click()
 
   const tabA = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefA}"])`)
   const tabB = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefB}"])`)
   await expect(tabA).toHaveAttribute("data-active", "true")
   await expect(tabB).toBeVisible()
   await expect(tabA.locator('[data-slot="tab-close"]')).toBeVisible()
-  await expect(tabB.locator('[data-slot="tab-close"]')).toBeHidden()
+  await expect(tabB.locator('[data-slot="tab-close"]')).toBeVisible()
 
   await tabB.locator(`a[href="${hrefB}"]`).click()
 
   await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
-  await expect(tabA.locator('[data-slot="tab-close"]')).toBeHidden()
+  await expect(page.getByRole("dialog", { name: "Tabs", exact: true })).toBeHidden()
+  await page.getByRole("button", { name: "Tabs", exact: true }).click()
+  await expect(tabA.locator('[data-slot="tab-close"]')).toBeVisible()
   await expect(tabB.locator('[data-slot="tab-close"]')).toBeVisible()
 
   for (const direction of ["ltr", "rtl"]) {
     await page.evaluate((direction) => document.documentElement.setAttribute("dir", direction), direction)
     await page.setViewportSize({ width: 450, height: 720 })
-    await expect(tabA.locator("[data-titlebar-tab]")).toHaveAttribute("data-title-overflow", "true")
+    await expect(tabA).toBeVisible()
     await page.setViewportSize({ width: 1280, height: 720 })
     await expect(tabA.locator("[data-titlebar-tab]")).toHaveAttribute("data-title-overflow", "false")
+    await page.setViewportSize({ width: 450, height: 720 })
+    await page.getByRole("button", { name: "Tabs", exact: true }).click()
   }
 })
 
@@ -202,28 +207,28 @@ test("appearance experimental setting switches tab orientation", async ({ page }
 
   await page.setViewportSize({ width: 920, height: 720 })
   await expect(page.locator('[data-slot="vertical-tabs-sidebar"]')).toHaveCSS("width", "260px")
-  await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
+  await expect(settings.getByRole("tablist")).toBeHidden()
+  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
 
   await page.setViewportSize({ width: 800, height: 720 })
-  await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
-  await expect(version).toBeInViewport()
+  await expect(settings.getByRole("tablist")).toBeHidden()
+  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
 
   await page.setViewportSize({ width: 390, height: 720 })
-  await expect(version).toBeInViewport()
+  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
   await settings.evaluate((element) => element.setAttribute("dir", "rtl"))
-  await expect(version).toBeInViewport()
-  await expect(version).toHaveCSS("direction", "ltr")
+  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
 
   await page.setViewportSize({ width: 390, height: 360 })
-  await version.scrollIntoViewIfNeeded()
-  await expect(version).toBeInViewport()
+  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
 
   // Reload the UI-selected preference without seeding settings storage.
   await page.reload()
   const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
+  await page.getByRole("button", { name: "Tabs", exact: true }).click()
   await expect(
     page
-      .locator('[data-slot="titlebar-tabs"]')
+      .locator('[data-slot="mobile-tabs-drawer"]')
       .locator(`[data-titlebar-tab-link][href="${href}"]`)
       .getByText(sessionA.title, { exact: true }),
   ).toBeVisible()
@@ -242,7 +247,7 @@ test("appearance experimental setting switches tab orientation", async ({ page }
   await expect(layout).toContainText("Vertical")
 })
 
-test("vertical tab preference falls back to horizontal on mobile", async ({ page }) => {
+test("vertical tab preference uses the drawer on mobile", async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 720 })
   await mockServer(page)
   await page.addInitScript(
@@ -259,7 +264,8 @@ test("vertical tab preference falls back to horizontal on mobile", async ({ page
   const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
   await page.goto(href)
 
-  const tabs = page.locator('[data-slot="titlebar-tabs"]')
+  await page.getByRole("button", { name: "Tabs", exact: true }).click()
+  const tabs = page.locator('[data-slot="mobile-tabs-drawer"]')
   await expect(tabs.locator(`[data-titlebar-tab-link][href="${href}"]`)).toContainText(sessionA.title)
   await expect(page.locator('[data-slot="vertical-tabs-sidebar"]')).toHaveCount(0)
 

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

@@ -252,8 +252,15 @@ test("focuses a terminal created from the new-terminal button", async ({ page })
 
 function seedCachedTerminal(page: Page) {
   return page.addInitScript(
-    ({ terminalKey, ptyID }) => {
-      localStorage.setItem("opencode.global.dat:layout", JSON.stringify({ terminal: { height: 320, opened: true } }))
+    ({ terminalKey, ptyID, tabKey, server, sessionID }) => {
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs.panes",
+        JSON.stringify({ [tabKey]: { terminal: true, terminalHeight: 320 } }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([{ type: "session", server, sessionId: sessionID }]),
+      )
       localStorage.setItem(
         terminalKey,
         JSON.stringify({
@@ -262,7 +269,13 @@ function seedCachedTerminal(page: Page) {
         }),
       )
     },
-    { terminalKey: terminalStorageKey(), ptyID },
+    {
+      terminalKey: terminalStorageKey(),
+      ptyID,
+      tabKey: `${server}\n/server/${base64Encode(server)}/session/${sessionID}`,
+      server,
+      sessionID,
+    },
   )
 }
 

packages/app/e2e/regression/terminal-tab-switch.spec.ts

@@ -16,10 +16,9 @@ const PROBE = "original"
 
 test.use({ viewport: { width: 1440, height: 900 } })
 
-// Terminals are workspace-scoped: switching between session tabs in the same
-// workspace must keep the terminal mounted and its PTY connection open instead
-// of tearing it down and reconnecting.
-test("keeps the terminal session alive when switching session tabs in a workspace", async ({ page }) => {
+// Terminal processes are workspace-scoped, but panel visibility belongs to each
+// session tab. Switching tabs must keep the PTY alive without opening its panel.
+test("keeps terminal visibility per tab and the PTY alive across tab switches", async ({ page }) => {
   const connections = await setup(page)
 
   await page.goto(sessionHref(sessionA))
@@ -27,7 +26,10 @@ test("keeps the terminal session alive when switching session tabs in a workspac
 
   await page.keyboard.press("Control+Backquote")
   const terminal = page.locator('[data-component="terminal"]')
+  const terminalPanel = page.locator('[data-component="terminal-panel"]')
   await expect(terminal).toBeVisible()
+  await expect(terminalPanel).toHaveAttribute("data-size-animated", "true")
+  await expect(terminalPanel).toHaveCSS("height", "300px")
   await expect.poll(() => connections.length).toBe(1)
   const connection = new URL(connections[0]!)
   expect(connection.pathname).toBe(`/api/pty/${ptyID}/connect`)
@@ -37,15 +39,26 @@ test("keeps the terminal session alive when switching session tabs in a workspac
 
   await switchTab(page, titleB)
   await expectSessionTitle(page, titleB)
-  await expect(terminal).toBeVisible()
+  await expect(terminal).toBeHidden()
+  await expect(terminalPanel).toHaveAttribute("data-size-animated", "false")
   expect(await readProbe(page)).toBe(PROBE)
   expect(connections.length).toBe(1)
 
+  await page.keyboard.press("Control+Backquote")
+  await expect(terminal).toBeVisible()
+  await expect(terminalPanel).toHaveCSS("height", "180px")
+
   await switchTab(page, titleA)
   await expectSessionTitle(page, titleA)
   await expect(terminal).toBeVisible()
+  await expect(terminalPanel).toHaveCSS("height", "300px")
   expect(await readProbe(page)).toBe(PROBE)
   expect(connections.length).toBe(1)
+
+  await page.reload()
+  await expectSessionTitle(page, titleA)
+  await expect(terminal).toBeVisible()
+  await expect(terminalPanel).toHaveCSS("height", "300px")
 })
 
 type Probed = HTMLElement & { __e2eProbe?: string }
@@ -120,7 +133,7 @@ async function setup(page: Page) {
   })
 
   await page.addInitScript(
-    ({ directory, server, sessions }) => {
+    ({ directory, server, sessions, panes }) => {
       localStorage.setItem(
         "opencode.global.dat:server",
         JSON.stringify({
@@ -132,8 +145,20 @@ async function setup(page: Page) {
         "opencode.window.browser.dat:tabs",
         JSON.stringify(sessions.map((sessionId: string) => ({ type: "session", server, sessionId }))),
       )
+      if (!localStorage.getItem("opencode.window.browser.dat:tabs.panes")) {
+        localStorage.setItem("opencode.window.browser.dat:tabs.panes", JSON.stringify(panes))
+      }
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { terminalPlacement: "bottom" } }))
+    },
+    {
+      directory,
+      server,
+      sessions: [sessionA, sessionB],
+      panes: {
+        [`${server}\n${sessionHref(sessionA)}`]: { terminalHeight: 300 },
+        [`${server}\n${sessionHref(sessionB)}`]: { terminalHeight: 180 },
+      },
     },
-    { directory, server, sessions: [sessionA, sessionB] },
   )
   return connections
 }

packages/app/e2e/regression/workspace-accent.spec.ts

@@ -75,11 +75,12 @@ for (const theme of ["light", "dark"] as const) {
         await expectBackground(view.send, "contrast")
         const message = page.locator('[data-slot="user-message-text"]')
         await expect(message).toHaveText("Check this fixture workspace.")
-        await expectBackground(
+        await expectToken(
           message,
-          scenario.accent ? "accent" : theme === "light" ? "layer-02" : "layer-01",
           "background-color",
+          scenario.accent ? "--v2-background-bg-accent" : "--v2-state-bg-info",
         )
+        await expectToken(message, "color", scenario.accent ? "--v2-text-text-contrast" : "--v2-text-text-accent")
       })
     }
 
@@ -245,3 +246,16 @@ async function expectBackground(element: Locator, token: string, property = "bac
   }, token)
   await expect(element).toHaveCSS(property, new RegExp(color.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
 }
+
+async function expectToken(element: Locator, property: string, token: string) {
+  const color = await element.evaluate((element, token) => {
+    const probe = document.createElement("span")
+    probe.hidden = true
+    probe.style.color = `var(${token})`
+    element.append(probe)
+    const color = getComputedStyle(probe).color
+    probe.remove()
+    return color
+  }, token)
+  await expect(element).toHaveCSS(property, color)
+}

packages/app/e2e/utils/waits.ts

@@ -8,6 +8,12 @@ export async function expectAppVisible(locator: Locator) {
 }
 
 export async function expectSessionTitle(page: Page, title: string) {
+  if ((page.viewportSize()?.width ?? 1280) < 768) {
+    const trigger = page.locator('[data-slot="mobile-tabs-trigger"]')
+    await expectAppVisible(trigger)
+    await expect(trigger.locator('span[dir="auto"]')).toHaveText(title, { timeout: APP_READY_TIMEOUT })
+    return
+  }
   await expectAppVisible(page.getByRole("heading", { name: title }))
 }
 

packages/app/manifest.json

@@ -9,13 +9,13 @@
       "src": "/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable"
     },
     {
       "src": "/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable"
     }
   ],
   "theme_color": "#080808",

packages/app/package.json

@@ -56,6 +56,7 @@
     "vite-plugin-solid": "2.11.14"
   },
   "dependencies": {
+    "@corvu/drawer": "catalog:",
     "@dnd-kit/abstract": "0.5.0",
     "@dnd-kit/dom": "0.5.0",
     "@dnd-kit/helpers": "0.5.0",

packages/app/src/composer/editor/editor.css

@@ -1,3 +1,7 @@
 [data-component="composer-editor"]:empty::before {
   content: "\200B";
 }
+
+[data-color-scheme="dark"] [data-component="composer"][data-dock-border-underlay="true"] {
+  background: var(--v2-background-bg-layer-01);
+}

packages/app/src/entry.tsx

@@ -6,6 +6,7 @@ import { AppBaseProviders, AppInterface } from "@/app"
 import { loadInitialLocale } from "@/runtime/i18n/language"
 import { PlatformProvider } from "@/runtime/platform/platform"
 import { createWebPlatform } from "@/runtime/platform/web"
+import { isStandalone, PwaRoutePersistence, restorePwaRoute } from "@/runtime/platform/pwa"
 import en from "@/runtime/i18n/en"
 import zh from "@/runtime/i18n/zh"
 import { authFromToken } from "@/runtime/server/api"
@@ -71,6 +72,8 @@ if (root instanceof HTMLElement && root.dataset.opencodeMounted === undefined) {
   void loadInitialLocale().then((locale) => {
     const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
     clearAuthToken()
+    const standalone = isStandalone()
+    if (standalone) restorePwaRoute()
     const server: ServerConnection.Http = {
       type: "http",
       authToken: !!auth,
@@ -87,7 +90,9 @@ if (root instanceof HTMLElement && root.dataset.opencodeMounted === undefined) {
               defaultServer={ServerConnection.Key.make(web.defaultServerUrl)}
               canonicalLocalServer={ServerConnection.key(server)}
               servers={[server]}
-            />
+            >
+              {standalone && <PwaRoutePersistence />}
+            </AppInterface>
           </AppBaseProviders>
         </PlatformProvider>
       ),

packages/app/src/home/projects/region.tsx

@@ -2,9 +2,14 @@ import type { HomeProjectsController } from "./controller"
 import { HomeProjectsView } from "./view"
 import type { HomeScrollController } from "../scroll"
 
-export function HomeProjects(props: { projects: HomeProjectsController; scroll: HomeScrollController }) {
+export function HomeProjects(props: {
+  projects: HomeProjectsController
+  scroll: HomeScrollController
+  dropdown?: boolean
+}) {
   return (
     <HomeProjectsView
+      dropdown={props.dropdown}
       language={props.projects.copy.language}
       servers={props.projects.server.list()}
       projects={props.projects.project.list()}

packages/app/src/home/projects/view.tsx

@@ -1,5 +1,6 @@
 import { createMemo, For, type JSX, onCleanup, Show, splitProps } from "solid-js"
 import { createStore } from "solid-js/store"
+import { Popover } from "@kobalte/core/popover"
 import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
 import { isSortable, useSortable } from "@dnd-kit/solid/sortable"
 import { AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
@@ -28,6 +29,7 @@ const projectContextMenuID = (server: ServerConnection.Any, directory: string) =
   `project:${ServerConnection.key(server)}:${directory}`
 
 export type HomeProjectsViewProps = {
+  dropdown?: boolean
   language: ReturnType<typeof useLanguage>
   servers: ServerConnection.Any[]
   projects: LocalProject[]
@@ -64,6 +66,81 @@ export type HomeProjectsViewProps = {
 }
 
 export function HomeProjectsView(props: HomeProjectsViewProps) {
+  const [state, setState] = createStore({ open: false })
+  const selected = createMemo(() => props.projects.find((project) => project.worktree === props.selection.directory))
+  const server = createMemo(() =>
+    props.servers.find((server) => ServerConnection.key(server) === props.selection.server),
+  )
+  return (
+    <Show when={props.dropdown} fallback={<HomeProjectsPanel {...props} />}>
+      <Popover
+        open={state.open}
+        onOpenChange={(open) => setState("open", open)}
+        placement="bottom-start"
+        sameWidth
+        gutter={6}
+      >
+        <Popover.Trigger
+          data-component="home-projects-dropdown"
+          aria-label={props.language.t("home.projects")}
+          class="flex h-10 w-full min-w-0 items-center gap-2 rounded-[6px] bg-v2-background-bg-base px-1.5 text-start text-v2-text-text-base outline-none hover:bg-v2-background-bg-layer-01"
+        >
+          <Show when={selected()} fallback={<Icon name="folder" size="small" />}>
+            {(project) => <HomeProjectAvatar project={project()} />}
+          </Show>
+          <span class="flex min-w-0 flex-1 flex-col leading-[var(--line-height-compact)]">
+            <bdi class="truncate">
+              <Show when={selected()} fallback={props.language.t("home.projects.all")}>
+                {(project) => displayName(project())}
+              </Show>
+            </bdi>
+            <Show when={props.servers.length > 1 && server()}>
+              {(server) => (
+                <bdi class="truncate text-v2-text-text-muted opacity-70">
+                  {server().displayName ?? new URL(server().http.url).host}
+                </bdi>
+              )}
+            </Show>
+          </span>
+          <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            aria-label={props.language.t("home.projects")}
+            dir={props.language.direction()}
+            class="z-50 max-h-[min(70dvh,var(--kb-popper-content-available-height))] overflow-hidden rounded-[10px] bg-v2-background-bg-base p-1.5 shadow-[var(--v2-elevation-floating)] outline-none data-[expanded]:animate-in data-[expanded]:fade-in data-[expanded]:slide-in-from-top-2 duration-150 ease-out motion-reduce:animate-none"
+          >
+            <HomeProjectsPanel
+              {...props}
+              onSelectProject={(server, directory) => {
+                props.onSelectProject(server, directory)
+                setState("open", false)
+              }}
+              onFocusServer={(server) => {
+                props.onFocusServer(server)
+                setState("open", false)
+              }}
+              onChooseProject={(server) => {
+                setState("open", false)
+                props.onChooseProject(server)
+              }}
+              onAddProjects={(server, directories) => {
+                setState("open", false)
+                props.onAddProjects(server, directories)
+              }}
+              onOpenProjectNewSession={(server, directory) => {
+                setState("open", false)
+                props.onOpenProjectNewSession(server, directory)
+              }}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover>
+    </Show>
+  )
+}
+
+function HomeProjectsPanel(props: HomeProjectsViewProps) {
   const [contextMenu, setContextMenu] = createStore({ open: undefined as string | undefined })
   const contextMenuProps = {
     contextMenuOpen: (id: string) => contextMenu.open === id,
@@ -71,48 +148,77 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
   }
   return (
     <aside
-      class={`
+      class={
+        props.dropdown
+          ? "flex max-h-[min(60dvh,calc(var(--kb-popper-content-available-height)-12px))] min-h-0 min-w-0 flex-col overflow-hidden"
+          : `
         mt-6 flex min-h-0 min-w-0 flex-col gap-4 overflow-hidden
         lg:sticky lg:top-14 lg:mt-14 lg:h-[calc(100cqh-56px)] lg:self-start lg:pt-[52px]
-      `}
+      `
+      }
       aria-label={props.language.t("home.projects")}
       onWheel={(event) => {
         if (event.target === event.currentTarget) return
         props.onWheel(event)
       }}
     >
-      <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
-        <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
-        <Show when={props.servers.length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}>
-          <Tooltip placement="bottom" value={props.language.t("home.project.add")}>
-            <IconButton
-              data-action="home-add-project"
-              variant="ghost-muted"
-              size="large"
-              class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
-              icon={<Icon name="folder-add-left" />}
-              disabled={props.serverHealth(props.servers[0])?.healthy === false}
-              onClick={() => props.onChooseProject(props.servers[0])}
-              aria-label={props.language.t("home.project.add")}
-            />
-          </Tooltip>
-        </Show>
-      </div>
+      <Show when={!props.dropdown}>
+        <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
+          <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
+          <Show when={props.servers.length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}>
+            <Tooltip placement="bottom" value={props.language.t("home.project.add")}>
+              <IconButton
+                data-action="home-add-project"
+                variant="ghost-muted"
+                size="large"
+                class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
+                icon={<Icon name="folder-add-left" />}
+                disabled={props.serverHealth(props.servers[0])?.healthy === false}
+                onClick={() => props.onChooseProject(props.servers[0])}
+                aria-label={props.language.t("home.project.add")}
+              />
+            </Tooltip>
+          </Show>
+        </div>
+      </Show>
       <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
+        <Show when={props.dropdown && props.servers.length === 1}>
+          <HomeProjectNavButton
+            type="button"
+            class="mb-1"
+            data-selected={!props.selection.directory ? "" : undefined}
+            onClick={() => props.onFocusServer(props.servers[0])}
+          >
+            <Icon name="folder" size="small" />
+            <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.projects.all")}</span>
+          </HomeProjectNavButton>
+        </Show>
         <Show
           when={props.servers.length > 1}
           fallback={
-            <div class="pr-3">
+            <div class={props.dropdown ? "" : "pr-3"}>
               <Show
                 when={props.projects.length > 0}
                 fallback={<HomeProjectEmpty {...props} server={props.servers[0]} items={props.recentlyClosed} />}
               >
                 <HomeProjectList {...props} {...contextMenuProps} server={props.servers[0]} items={props.projects} />
+                <Show when={props.dropdown}>
+                  <HomeProjectNavButton
+                    type="button"
+                    data-action="home-add-project-row"
+                    class="mt-1 disabled:opacity-60"
+                    disabled={props.serverHealth(props.servers[0])?.healthy === false}
+                    onClick={() => props.onChooseProject(props.servers[0])}
+                  >
+                    <Icon name="folder-add-left" size="small" />
+                    <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
+                  </HomeProjectNavButton>
+                </Show>
               </Show>
             </div>
           }
         >
-          <div class="flex min-w-0 flex-col gap-4 pr-3">
+          <div class={`flex min-w-0 flex-col ${props.dropdown ? "gap-1" : "gap-4 pr-3"}`}>
             <For each={props.servers}>
               {(item) => {
                 const projects = () => props.projectsForServer(item)
@@ -157,7 +263,9 @@ export function HomeUtilityNav(props: {
   language: ReturnType<typeof useLanguage>
 }) {
   return (
-    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1 pr-3`}>
+    <div
+      class={`${props.class ?? ""} min-w-0 flex-row justify-between gap-1 lg:flex-col lg:justify-start lg:pr-3 [&>button]:w-auto lg:[&>button]:w-full`}
+    >
       <HomeProjectNavButton
         type="button"
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
@@ -511,6 +619,7 @@ function HomeProjectRow(
           // does not focus that server and load its session index. Touch is
           // excluded so flick-scrolling the list cannot select rows.
           pointerDownSelected = undefined
+          if (props.dropdown) return
           if (event.button !== 0 || event.pointerType === "touch") return
           if (!props.serverSelected) return
           pointerDownSelected = props.selected

packages/app/src/home/route.tsx

@@ -1,4 +1,6 @@
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { createMediaQuery } from "@solid-primitives/media"
+import { Show } from "solid-js"
 import { createHomeController } from "./model"
 import { createHomeProjectsController } from "./projects/controller"
 import { HomeUtilityNav } from "./projects/view"
@@ -9,6 +11,7 @@ import { createHomeSessionsController } from "./sessions/controller"
 import { HomeSessions } from "./sessions/region"
 
 export function Home() {
+  const mobile = createMediaQuery("(max-width: 767px)")
   const home = createHomeController()
   const projects = createHomeProjectsController(home)
   const sessions = createHomeSessionsController(home)
@@ -17,12 +20,17 @@ export function Home() {
   return (
     <div
       class={`
-        mx-2 mb-2 mt-[var(--shell-top-inset,8px)] min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
+        mx-2 mb-[var(--shell-bottom-inset,8px)] mt-[var(--shell-top-inset,8px)] flex min-h-0 flex-1 flex-col self-stretch overflow-hidden rounded-[10px]
         bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]
       `}
     >
+      <Show when={mobile()}>
+        <div class="relative z-40 -mb-3 shrink-0 px-3 pt-3">
+          <HomeProjects projects={projects} scroll={scroll} dropdown />
+        </div>
+      </Show>
       <ScrollView
-        class="h-full [container-type:size]"
+        class="min-h-0 flex-1 [container-type:size]"
         thumbContainer={scroll.viewport.thumbTrack()}
         thumbHoverTarget={scroll.viewport.hoverTarget()}
         viewportRef={scroll.viewport.setViewport}
@@ -31,20 +39,24 @@ export function Home() {
       >
         <div
           class={`
-            mx-auto grid min-h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)_auto] gap-4 px-3
-            lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6
+            mx-auto grid min-h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)] gap-4 px-3
+            max-md:grid-rows-[minmax(0,1fr)] lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6
           `}
         >
-          <HomeProjects projects={projects} scroll={scroll} />
+          <Show when={!mobile()}>
+            <HomeProjects projects={projects} scroll={scroll} />
+          </Show>
           <HomeSessions sessions={sessions} search={search} scroll={scroll} />
-          <HomeUtilityNav
-            class="flex lg:hidden"
-            onOpenSettings={projects.utility.settings}
-            onOpenHelp={projects.utility.help}
-            language={projects.copy.language}
-          />
         </div>
       </ScrollView>
+      <div class="hidden shrink-0 px-3 py-2 md:block lg:hidden">
+        <HomeUtilityNav
+          class="flex"
+          onOpenSettings={projects.utility.settings}
+          onOpenHelp={projects.utility.help}
+          language={projects.copy.language}
+        />
+      </div>
     </div>
   )
 }

packages/app/src/home/sessions/view.css

@@ -0,0 +1,26 @@
+@media (max-width: 767px) {
+  [data-component="home-session-row-container"][data-project-name="true"],
+  [data-component="home-session-row-container"][data-project-name="true"] [data-component="home-session-row"],
+  [data-component="home-session-row-container"][data-project-name="true"] [data-slot="home-session-editor"],
+  [data-component="home-session-search-row"][data-project-name="true"] {
+    height: 48px;
+    padding-block: 0;
+  }
+
+  [data-project-name="true"] [data-slot="home-session-labels"] {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    text-align: start;
+  }
+
+  [data-project-name="true"] [data-slot="home-session-labels"] > * {
+    max-width: 100%;
+    flex: none;
+    font-size: 13px;
+    line-height: var(--line-height-compact);
+  }
+}

packages/app/src/home/sessions/view.tsx

@@ -15,6 +15,7 @@ import { ServerConnection } from "@/runtime/server/registry"
 import { SessionTabAvatarView } from "@/shell/layout/session-tab-avatar"
 import { sessionLabel } from "@/session/title"
 import { shouldOpenSessionInBackground } from "./open"
+import "./view.css"
 import {
   HomeSessionStatusController,
   homeSessionSearchKey,
@@ -96,10 +97,13 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
       class="min-h-0 min-w-0 flex-1 flex flex-col"
       aria-label={props.language.t("sidebar.project.recentSessions")}
     >
-      <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 lg:pt-12" onWheel={props.onWheel}>
+      <div
+        class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-1 pt-6 md:pb-3 lg:pt-12"
+        onWheel={props.onWheel}
+      >
         <HomeSessionSearch {...props} />
         <Show when={props.groups.length > 0 && props.canCreateSession}>
-          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
+          <div class="pointer-events-none absolute right-0 top-[68px] z-20 flex md:top-[84px] lg:top-[108px]">
             <Button
               data-action="home-new-session"
               variant="ghost-muted"
@@ -113,18 +117,18 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
           </div>
         </Show>
       </div>
-      <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
+      <div class="pointer-events-none sticky top-[68px] z-40 h-0 -mr-3 md:top-[84px] lg:top-[108px]">
         <div
           ref={props.onSetThumbTrack}
           data-component="home-session-scroll-track"
-          class="relative ml-auto h-[calc(100cqh-84px)] w-3 lg:h-[calc(100cqh-108px)]"
+          class="relative ml-auto h-[calc(100cqh-68px)] w-3 md:h-[calc(100cqh-84px)] lg:h-[calc(100cqh-108px)]"
         />
       </div>
-      <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
+      <div class="-mr-3 min-h-[calc(100cqh-64px)] md:min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
         <Show
           when={!props.loading}
           fallback={
-            <div class="pt-3">
+            <div class="pt-1 md:pt-3">
               <HomeSessionSkeleton label={props.language.t("common.loading")} />
             </div>
           }
@@ -138,7 +142,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
               />
             }
           >
-            <div ref={props.onSetContent} class="flex flex-col pt-3 pr-3 pb-16">
+            <div ref={props.onSetContent} class="flex flex-col pt-1 pr-3 pb-16 md:pt-3">
               {/* Index keeps group subtrees mounted when the group arrays are
                   rebuilt, so store updates cannot recreate rows mid-gesture. */}
               <Index each={props.groups}>
@@ -150,7 +154,9 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
                       onSetRef={(element) => props.onSetHeader(group().id, element)}
                       elevated={index === 0}
                     />
-                    <div class={`flex min-w-0 flex-col gap-px pt-4 ${index === props.groups.length - 1 ? "" : "mb-6"}`}>
+                    <div
+                      class={`flex min-w-0 flex-col gap-px pt-2 md:pt-4 ${index === props.groups.length - 1 ? "" : "mb-6"}`}
+                    >
                       {/* Rows key by session ID: session.sync replaces the
                           stored session object wholesale, so reference-keyed
                           rows would be disposed mid-interaction whenever a
@@ -235,7 +241,11 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
               absolute flex flex-col overflow-hidden rounded-[12px]
               bg-v2-background-bg-base shadow-[var(--v2-elevation-floating)]
             `}
-            style={{ top: "-6px", left: "-6px", width: "calc(100% + 12px)" }}
+            style={{
+              top: "-6px",
+              "inset-inline-start": "-6px",
+              width: "calc(100% + 12px)",
+            }}
           >
             <div class="flex flex-col pt-9">
               <div id={HOME_SESSION_SEARCH_RESULTS_ID} role="listbox" class="flex flex-col gap-4 pt-4">
@@ -269,7 +279,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                       >
                         {props.language.t("home.sessions.search.sessions")}
                       </p>
-                      <ScrollView class="max-h-80" viewportRef={props.onSetSearchList}>
+                      <ScrollView class="max-h-[min(20rem,40dvh)]" viewportRef={props.onSetSearchList}>
                         <div class="flex flex-col gap-px pb-2">
                           <For each={props.searchResults}>
                             {(record) => (
@@ -291,7 +301,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
         </Show>
         <label
           class={`
-            relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-2
+            relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 ps-3 pe-2
             bg-v2-background-bg-layer-02/60 text-v2-icon-icon-muted transition-[background-color,box-shadow]
             duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02 focus-within:bg-v2-background-bg-layer-02
           `}
@@ -375,6 +385,7 @@ function HomeSessionSearchResultRow(
       id={`home-session-search-option-${key()}`}
       data-key={key()}
       data-component="home-session-search-row"
+      data-project-name={!!showProjectName()}
       role="option"
       aria-selected={props.selected}
       class={`
@@ -403,7 +414,7 @@ function HomeSessionSearchResultRow(
         record={props.record}
         revealProjectOnHover={!!showProjectName()}
       />
-      <div class="flex min-w-0 flex-1 items-center gap-1.5">
+      <div data-slot="home-session-labels" class="flex min-w-0 flex-1 items-center gap-1.5">
         <HomeSessionTitle title={title()} showProjectName={!!showProjectName()} search />
         <Show when={showProjectName()}>
           <HomeSessionProjectName name={props.record.projectName} search />
@@ -423,8 +434,8 @@ function HomeSessionGroupHeader(props: {
     <div
       ref={props.onSetRef}
       class={`
-        pointer-events-none sticky top-[84px] flex h-7 min-w-0 items-center justify-between
-        bg-v2-background-bg-base pl-3 lg:top-[108px]
+        pointer-events-none sticky top-[68px] flex h-7 min-w-0 items-center justify-between
+        bg-v2-background-bg-base ps-1.5 md:ps-3 md:top-[84px] lg:top-[108px]
       `}
       classList={{ "home-session-group-header z-[5]": !!props.elevated, "z-10": !props.elevated }}
     >
@@ -510,6 +521,7 @@ function HomeSessionRow(
   return (
     <div
       data-component="home-session-row-container"
+      data-project-name={!!showProjectName()}
       data-session-id={props.record.session.id}
       class="group/session relative flex h-10 min-w-0 items-center rounded-[6px] outline-none focus:outline-none focus-visible:outline-none"
       classList={{ group: !!showProjectName() }}
@@ -523,51 +535,56 @@ function HomeSessionRow(
       <Show
         when={!editor()}
         fallback={
-          <div class="flex h-10 min-w-0 w-full flex-1 items-center gap-2 py-3 pl-3 pr-10">
+          <div
+            data-slot="home-session-editor"
+            class="flex h-10 min-w-0 w-full flex-1 items-center gap-2 py-3 ps-1.5 pe-3 md:ps-3 md:pe-10"
+          >
             <HomeSessionLeadingController
               server={props.server}
               isOpenTab={props.isOpenTab}
               record={props.record}
               revealProjectOnHover={false}
             />
-            <InlineInput
-              data-component="home-session-rename"
-              aria-label={props.language.t("common.rename")}
-              dir="auto"
-              value={editor()?.draft ?? ""}
-              disabled={editor()?.renaming ?? false}
-              class={`
+            <div data-slot="home-session-labels" class="contents">
+              <InlineInput
+                data-component="home-session-rename"
+                aria-label={props.language.t("common.rename")}
+                dir="auto"
+                value={editor()?.draft ?? ""}
+                disabled={editor()?.renaming ?? false}
+                class={`
                 block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base
                 [font-weight:530] field-sizing-content outline-none focus:outline-none focus-visible:outline-none
                 ${showProjectName() ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}
               `}
-              style={{ "--inline-input-shadow": "none", "text-align": "start" }}
-              onInput={(event) => {
-                const draft = event.currentTarget.value
-                props.setRowUI("editor", (value) => (value?.id === sessionID() ? { ...value, draft } : value))
-              }}
-              onKeyDown={(event) => {
-                event.stopPropagation()
-                // Enter and Escape during IME composition commit or cancel
-                // the composition, not the rename. Safari can report the
-                // composition-confirming keydown with isComposing false but
-                // keyCode 229.
-                if (event.isComposing || event.keyCode === 229) return
-                if (event.key === "Enter") {
+                style={{ "--inline-input-shadow": "none", "text-align": "start" }}
+                onInput={(event) => {
+                  const draft = event.currentTarget.value
+                  props.setRowUI("editor", (value) => (value?.id === sessionID() ? { ...value, draft } : value))
+                }}
+                onKeyDown={(event) => {
+                  event.stopPropagation()
+                  // Enter and Escape during IME composition commit or cancel
+                  // the composition, not the rename. Safari can report the
+                  // composition-confirming keydown with isComposing false but
+                  // keyCode 229.
+                  if (event.isComposing || event.keyCode === 229) return
+                  if (event.key === "Enter") {
+                    event.preventDefault()
+                    void saveEditor()
+                    return
+                  }
+                  if (event.key !== "Escape") return
                   event.preventDefault()
-                  void saveEditor()
-                  return
-                }
-                if (event.key !== "Escape") return
-                event.preventDefault()
-                closeEditor()
-                requestAnimationFrame(() => rowButton()?.focus())
-              }}
-              onBlur={closeEditor}
-            />
-            <Show when={showProjectName()}>
-              <HomeSessionProjectName name={props.record.projectName} />
-            </Show>
+                  closeEditor()
+                  requestAnimationFrame(() => rowButton()?.focus())
+                }}
+                onBlur={closeEditor}
+              />
+              <Show when={showProjectName()}>
+                <HomeSessionProjectName name={props.record.projectName} />
+              </Show>
+            </div>
           </div>
         }
       >
@@ -578,7 +595,7 @@ function HomeSessionRow(
           aria-expanded={!!menu()}
           class={`
             flex h-10 min-w-0 w-full flex-1 shrink-0 cursor-default items-center gap-2 rounded-[6px] border-0
-            bg-transparent py-3 pl-3 pr-10 text-left text-v2-text-text-muted [font-weight:530]
+            bg-transparent py-3 ps-1.5 pe-3 md:ps-3 md:pe-10 text-start text-v2-text-text-muted [font-weight:530]
             transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out
             hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none
           `}
@@ -641,10 +658,12 @@ function HomeSessionRow(
             record={props.record}
             revealProjectOnHover={!!showProjectName()}
           />
-          <HomeSessionTitle title={title()} showProjectName={!!showProjectName()} />
-          <Show when={showProjectName()}>
-            <HomeSessionProjectName name={props.record.projectName} />
-          </Show>
+          <div data-slot="home-session-labels" class="contents">
+            <HomeSessionTitle title={title()} showProjectName={!!showProjectName()} />
+            <Show when={showProjectName()}>
+              <HomeSessionProjectName name={props.record.projectName} />
+            </Show>
+          </div>
         </button>
       </Show>
       <Menu
@@ -723,6 +742,7 @@ function HomeSessionTitle(props: { title: string; showProjectName: boolean; sear
   return (
     <span
       data-component="home-session-title"
+      dir="auto"
       class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base [font-weight:530]"
       classList={{
         "text-[13px] leading-4 tracking-[-0.04px]": !!props.search,
@@ -738,6 +758,8 @@ function HomeSessionTitle(props: { title: string; showProjectName: boolean; sear
 function HomeSessionProjectName(props: { name: string; search?: boolean }) {
   return (
     <span
+      data-component="home-session-project-name"
+      dir="auto"
       class="min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-muted [font-weight:440]"
       classList={{ "text-[13px] leading-4 tracking-[-0.04px]": !!props.search }}
     >
@@ -779,7 +801,7 @@ function HomeSessionsEmpty(props: { onNewSession?: () => void; language: ReturnT
 function HomeSessionSkeleton(props: { label: string }) {
   return (
     <div class="flex min-w-0 flex-col gap-4">
-      <div class="flex h-7 min-w-0 items-center justify-between px-4">
+      <div class="flex h-7 min-w-0 items-center justify-between ps-1.5 pe-4 md:ps-4">
         <div class={HOME_SECTION_LABEL}>{props.label}</div>
       </div>
       <div class="flex min-w-0 flex-col gap-px" aria-hidden="true">

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 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
         <NewSessionView composer={model} project={project} workspace={workspace} />
       </div>
     </div>

packages/app/src/providers/catalog/plugin.test.ts

@@ -8,7 +8,7 @@ describe("pluginLabels", () => {
       { id: "opencode.internal", source: { type: "builtin" }, state: { status: "active" }, features: { server: true } },
       {
         id: "package-plugin",
-        source: { type: "package", package: "example" },
+        source: { type: "package", target: "example" },
         state: { status: "active" },
         features: { server: true },
       },

packages/app/src/providers/catalog/plugin.ts

@@ -2,7 +2,7 @@ import type { PluginInfo } from "@opencode-ai/client"
 
 export function pluginLabel(plugin: PluginInfo) {
   if (plugin.id) return plugin.id
-  if (plugin.source.type === "package") return plugin.source.package
+  if (plugin.source.type === "package") return plugin.source.target
   if (plugin.source.type === "local") return plugin.source.path
   return plugin.source.type
 }

packages/app/src/runtime/animated-presence.ts

@@ -1,16 +1,25 @@
 import { createMemo, type Accessor } from "solid-js"
 import createPresence from "solid-presence"
 
-export function createAnimatedPresence<T>(value: Accessor<T | undefined>, element: Accessor<HTMLElement | null>) {
-  const animation = createMemo<{ show: boolean; animate: boolean; value: T | undefined }>((previous) => {
-    const current = value()
-    const show = current !== undefined
-    return {
-      show,
-      animate: previous !== undefined && (previous.animate || previous.show !== show),
-      value: current ?? previous?.value,
-    }
-  })
+export function createAnimatedPresence<T>(
+  value: Accessor<T | undefined>,
+  element: Accessor<HTMLElement | null>,
+  identity?: Accessor<unknown>,
+) {
+  const animation = createMemo<{ identity?: unknown; show: boolean; animate: boolean; value: T | undefined }>(
+    (previous) => {
+      const currentIdentity = identity?.()
+      const current = value()
+      const show = current !== undefined
+      const same = !identity || previous?.identity === currentIdentity
+      return {
+        identity: currentIdentity,
+        show,
+        animate: previous !== undefined && same && (previous.animate || previous.show !== show),
+        value: current ?? (same ? previous?.value : undefined),
+      }
+    },
+  )
   const presence = createPresence({ show: () => animation().show, element })
   return {
     ...presence,

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

@@ -643,6 +643,7 @@ export const dict = {
   "home.empty.description": "Get started by opening a local project",
   "home.title": "Home",
   "home.projects": "Projects",
+  "home.projects.all": "All projects",
   "home.project.add": "Add project",
   "home.recentlyClosed": "Recently closed",
   "home.server.collapse": "Collapse server projects",
@@ -659,6 +660,10 @@ export const dict = {
   "home.providerTip": "Connect to 75+ providers to use other models, including Claude, GPT, Gemini, etc",
 
   "session.tab.session": "Session",
+  "session.tab.files": "Files",
+  "session.files.openTabs": "Open files",
+  "session.tab.usage": "Usage",
+  "session.view.select": "Session view",
   "session.tab.review": "Review",
   "session.tab.context": "Context",
   "session.tab.unknown": "Unknown Session",
@@ -697,6 +702,7 @@ export const dict = {
   "session.review.change.one": "Change",
   "session.review.change.other": "Changes",
   "session.review.loadingChanges": "Loading changes...",
+  "session.review.wrapLines": "Wrap lines",
   "session.review.empty": "No changes in this session yet",
   "session.review.noVcs": "No Git Version Control System detected, changes not displayed",
   "session.review.noVcs.createGit.title": "Create a Git repository",
@@ -799,6 +805,7 @@ export const dict = {
   "terminal.connectTicket.statusError": "PTY connect ticket failed with {{status}}",
 
   "titlebar.update": "Update",
+  "titlebar.tabs": "Tabs",
   "titlebar.updateVersion": "Update {{version}}",
 
   "common.closeTab": "Close tab",
@@ -976,7 +983,9 @@ export const dict = {
   "settings.general.row.showProjectIcon.description": "Show the project icon in the session header",
   "settings.general.row.mobileTitlebarBottom.title": "Bottom navigation",
   "settings.general.row.mobileTitlebarBottom.description":
-    "Place the title bar and session tabs at the bottom of the screen on mobile",
+    "Place the title bar at the bottom of the screen on mobile",
+  "settings.general.row.mobileDiffWrap.description":
+    "Wrap long lines in mobile diffs instead of scrolling horizontally",
   "settings.general.row.showCustomAgents.title": "Show agent",
   "settings.general.row.showCustomAgents.description":
     "Switch between agents in the composer. When hidden, defaults to Build agent.",

packages/app/src/runtime/platform/pwa.ts

@@ -0,0 +1,43 @@
+import { useLocation } from "@solidjs/router"
+import { createEffect } from "solid-js"
+
+const LAST_ROUTE_KEY = "opencode.pwa.last-route"
+
+export function isStandalone() {
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    ("standalone" in navigator && navigator.standalone === true)
+  )
+}
+
+export function restorePwaRoute() {
+  if (location.pathname !== "/" || location.search || location.hash) return
+  try {
+    const value = localStorage.getItem(LAST_ROUTE_KEY)
+    if (!value) return
+    const url = new URL(value, location.origin)
+    if (url.origin !== location.origin || url.searchParams.has("auth_token")) return
+    if (
+      url.pathname !== "/" &&
+      url.pathname !== "/new-session" &&
+      !/^\/server\/[^/]+\/session\/[^/]+$/.test(url.pathname)
+    )
+      return
+    history.replaceState(history.state, "", url.pathname + url.search + url.hash)
+  } catch {
+    // Storage may be unavailable; keep the launch URL in that case.
+  }
+}
+
+export function PwaRoutePersistence() {
+  const location = useLocation()
+  createEffect(() => {
+    const value = location.pathname + location.search + location.hash
+    try {
+      localStorage.setItem(LAST_ROUTE_KEY, value)
+    } catch {
+      // Navigation must still work when storage is unavailable or full.
+    }
+  })
+  return null
+}

packages/app/src/runtime/server/errors.test.ts

@@ -155,6 +155,16 @@ describe("isSessionNotFoundError", () => {
     expect(isSessionNotFoundError(new Error(body.message, { cause: { body, status: 404 } }), body.sessionID)).toBe(true)
   })
 
+  test("matches a structured error stored directly as the cause", () => {
+    const body = {
+      _tag: "SessionNotFoundError",
+      sessionID: "ses_missing",
+      message: "Session not found",
+    } satisfies SessionNotFoundError
+
+    expect(isSessionNotFoundError(new Error("Unknown error", { cause: body }), body.sessionID)).toBe(true)
+  })
+
   test("rejects errors for other sessions and other 404 responses", () => {
     const body = {
       _tag: "SessionNotFoundError",

packages/app/src/runtime/server/errors.ts

@@ -36,10 +36,9 @@ export function formatServerError(error: unknown, translate?: Translator, fallba
 }
 
 function unwrapNamedError(error: unknown): unknown {
-  if (error instanceof Error && error.cause && typeof error.cause === "object" && "body" in error.cause) {
-    return (error.cause as Record<string, unknown>).body
-  }
-  return error
+  if (!(error instanceof Error) || !error.cause || typeof error.cause !== "object") return error
+  if ("body" in error.cause) return (error.cause as Record<string, unknown>).body
+  return error.cause
 }
 
 // Client-synthesized session not-found errors share one constructor and

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

@@ -11,14 +11,7 @@ type SessionComposerRegionState = Pick<
 
 export type SessionComposerRegionViewController = Pick<
   SessionComposerRegionController,
-  | "centered"
-  | "onResponseSubmit"
-  | "openParent"
-  | "setPromptRef"
-  | "setDockRef"
-  | "parentID"
-  | "child"
-  | "showComposer"
+  "centered" | "onResponseSubmit" | "openParent" | "setPromptRef" | "setDockRef" | "parentID" | "child" | "showComposer"
 > & { state: SessionComposerRegionState }
 
 export function SessionComposerRegion(props: {
@@ -68,10 +61,7 @@ export function SessionComposerRegion(props: {
               "relative z-[70]": true,
             }}
           >
-            <Show
-              when={controller.child()}
-              fallback={<Show when={!controller.state.blocked()}>{props.composer}</Show>}
-            >
+            <Show when={controller.child()} fallback={<Show when={!controller.state.blocked()}>{props.composer}</Show>}>
               <div
                 ref={controller.setPromptRef}
                 class="w-full rounded-[12px] border border-border-weak-base bg-background-base p-3 text-16-regular text-text-weak"

packages/app/src/session/files/file-tree-v2-model.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { buildFileTreeV2Model, flattenFileTreeV2, flattenLiveFileTreeV2 } from "./file-tree-v2-model"
+import { buildFileTreeV2Model, flattenFileTreeV2, flattenLiveFileTreeV2, sortFileTreeV2Paths } from "./file-tree-v2-model"
 import type { FileNode } from "@/runtime/server/types"
 
 describe("buildFileTreeV2Model", () => {
@@ -45,6 +45,33 @@ describe("buildFileTreeV2Model", () => {
   })
 })
 
+describe("sortFileTreeV2Paths", () => {
+  test("orders navigation depth-first with directories before sibling files", () => {
+    const paths = ["README.md", "src/a.ts", "src/lib/z.ts", "docs/guide.md", "src/lib/b.ts"]
+
+    expect(sortFileTreeV2Paths(paths)).toEqual([
+      "docs/guide.md",
+      "src/lib/b.ts",
+      "src/lib/z.ts",
+      "src/a.ts",
+      "README.md",
+    ])
+    expect(paths[0]).toBe("README.md")
+  })
+
+  test("preserves original paths for selection", () => {
+    expect(sortFileTreeV2Paths(["README.md", "src\\lib\\a.ts", "/docs//guide.md/"])).toEqual([
+      "/docs//guide.md/",
+      "src\\lib\\a.ts",
+      "README.md",
+    ])
+  })
+
+  test("handles an empty file list", () => {
+    expect(sortFileTreeV2Paths([])).toEqual([])
+  })
+})
+
 describe("flattenLiveFileTreeV2", () => {
   test("flattens live children using original paths for nested lookups", () => {
     const nodes: Record<string, FileNode[]> = {

packages/app/src/session/files/file-tree-v2-model.ts

@@ -76,6 +76,12 @@ export function flattenFileTreeV2(model: FileTreeV2Model, expanded: (path: strin
   return rows
 }
 
+export function sortFileTreeV2Paths(paths: readonly string[]) {
+  return flattenFileTreeV2(buildFileTreeV2Model(paths), () => true)
+    .filter((row) => row.node.type === "file")
+    .map((row) => row.node.originalPath)
+}
+
 export function flattenLiveFileTreeV2(
   children: (path: string) => readonly FileNode[],
   expanded: (path: string) => boolean,

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

@@ -271,7 +271,7 @@ export function SessionContextTab() {
       }}
       onScroll={handleScroll}
     >
-      <div class="px-6 pt-4 pb-10 flex flex-col gap-10">
+      <div data-slot="session-usage-content" class="px-4 pt-4 pb-6 flex flex-col gap-6 md:px-6 md:pb-10 md:gap-10">
         <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
           <For each={stats}>
             {(stat) => <Stat label={language.t(stat.label as Parameters<typeof language.t>[0])} value={stat.value()} />}

packages/app/src/session/files/session-file-browser-tab.tsx

@@ -1,4 +1,5 @@
-import { createMemo, createSignal, createUniqueId, Show } from "solid-js"
+import { createMemo, createUniqueId, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createQuery } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { SessionFilePanelV2, SessionFilePanelV2Empty } from "@opencode-ai/session-ui/v2/session-file-panel-v2"
@@ -34,6 +35,7 @@ export function SessionFileBrowserTab(props: {
   onSelect: (path: string) => void
   onSelectPermanent: (path: string) => void
   filterRef?: (element: HTMLInputElement) => void
+  mobile?: boolean
 }) {
   const file = useFile()
   const language = useLanguage()
@@ -42,8 +44,10 @@ export function SessionFileBrowserTab(props: {
   const serverSDK = useServerSDK()
   const { workspaceKey } = useSessionLayout()
   const resultsID = `session-file-browser-results-${createUniqueId()}`
-  const [filter, setFilter] = createSignal("")
-  const [explicitHighlight, setExplicitHighlight] = createSignal<string>()
+  const [store, setStore] = createStore({ filter: "", explicitHighlight: undefined as string | undefined })
+  const filter = () => store.filter
+  const setFilter = (value: string) => setStore("filter", value)
+  const setExplicitHighlight = (value: string) => setStore("explicitHighlight", value)
   const sidebarOpened = () => props.placeholder || props.state.sidebarOpened()
   const query = createMemo(() => filter().trim())
   const search = createQuery(() => {
@@ -61,7 +65,7 @@ export function SessionFileBrowserTab(props: {
   const highlighted = createMemo(() => {
     const values = files()
     if (values.length === 0) return undefined
-    const explicit = explicitHighlight()
+    const explicit = store.explicitHighlight
     if (explicit && values.includes(explicit)) return explicit
     return values[0]
   })
@@ -105,13 +109,13 @@ export function SessionFileBrowserTab(props: {
           filter={filter()}
           onFilterChange={setFilter}
           onFilterKeyDown={onFilterKeyDown}
-          filterAutofocus={props.placeholder}
-          filterRef={props.filterRef}
+          filterAutofocus={props.placeholder && !props.mobile}
+          filterRef={(element) => props.filterRef?.(element)}
           filterControls={resultsID}
           filterActiveDescendant={highlighted() ? optionID(highlighted()!) : undefined}
           filterExpanded={query().length > 0 && files().length > 0}
           width={props.state.sidebarWidth()}
-          onWidthChange={props.state.resizeSidebar}
+          onWidthChange={props.mobile ? undefined : props.state.resizeSidebar}
         >
           <Show
             when={query()}
@@ -119,6 +123,7 @@ export function SessionFileBrowserTab(props: {
               <FileTreeV2
                 active={props.active}
                 kinds={props.kinds}
+                draggable={!props.mobile}
                 onFileClick={(node) => props.onSelect(node.path)}
                 onFileDoubleClick={(node) => props.onSelectPermanent(node.path)}
               />

packages/app/src/session/files/session-mobile-files.css

@@ -0,0 +1,35 @@
+[data-slot="session-mobile-files"]
+  [data-slot="session-mobile-files-header"]
+  [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-list"] {
+  position: static;
+
+  &::before {
+    inset-inline-start: 0;
+    width: 100%;
+  }
+}
+
+[data-slot="session-mobile-files"] [data-component="line-comment-v2"] {
+  max-width: none;
+}
+
+[data-slot="session-mobile-files"][data-browsing="true"] {
+  [data-component="session-review-v2-sidebar-root"] {
+    width: 100%;
+  }
+
+  [data-slot="session-review-v2-sidebar"] {
+    width: 100% !important;
+    border-inline-end: 0;
+  }
+
+  [data-slot="session-review-v2-preview"] {
+    display: none;
+  }
+}
+
+[data-slot="session-mobile-files"] [data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
+  width: 32px;
+  height: 36px;
+}

packages/app/src/session/files/session-mobile-files.tsx

@@ -0,0 +1,100 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { getFilename } from "@opencode-ai/util/path"
+import { createMemo, For } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useSessionLayout } from "@/session/session-layout"
+import { createSessionTabs, SESSION_OPEN_FILE_TAB } from "@/session/helpers"
+import { useFile } from "@/workspaces/files/model"
+import { SessionFileBrowserTab } from "./session-file-browser-tab"
+import type { Kind } from "./file-tree-v2"
+import "./session-mobile-files.css"
+
+export function SessionMobileFiles() {
+  const file = useFile()
+  const language = useLanguage()
+  const layout = useSessionLayout()
+  const tabs = createSessionTabs({
+    tabs: layout.tabs,
+    pathFromTab: file.pathFromTab,
+    normalizeTab: file.tab,
+  })
+  const [store, setStore] = createStore({ browsing: !tabs.activeFileTab() })
+  const browsing = () => store.browsing || !tabs.activeFileTab()
+  const active = createMemo(() => file.pathFromTab(tabs.activeFileTab() ?? ""))
+  const kinds = new Map<string, Kind>()
+  const open = (path: string) => {
+    layout.tabs().open(file.tab(path))
+    void file.load(path)
+    setStore("browsing", false)
+  }
+
+  return (
+    <div data-slot="session-mobile-files" data-browsing={browsing()} class="flex h-full min-h-0 flex-col">
+      <div data-slot="session-mobile-files-header" class="relative flex h-10 shrink-0 items-center">
+        <Button
+          size="small"
+          variant="ghost"
+          class="shrink-0 mx-2"
+          onClick={() => setStore("browsing", true)}
+          aria-pressed={browsing()}
+        >
+          {language.t("session.files.all")}
+        </Button>
+        <Tabs
+          value={browsing() ? SESSION_OPEN_FILE_TAB : tabs.activeFileTab()}
+          onChange={(tab) => {
+            // Kobalte falls back to a file tab when the browse view has no trigger.
+            if (browsing()) return
+            const path = file.pathFromTab(tab)
+            if (path) open(path)
+          }}
+          variant="line"
+          class="min-w-0 flex-1 !h-auto"
+        >
+          <Tabs.List aria-label={language.t("session.files.openTabs")} class="!h-10 !px-0 overflow-x-auto">
+            <For each={tabs.openedTabs()}>
+              {(tab) => (
+                <Tabs.Trigger
+                  value={tab}
+                  onClick={() => open(file.pathFromTab(tab)!)}
+                  class="shrink-0 max-w-48"
+                  classes={{ button: "min-w-0" }}
+                  closeButton={
+                    <Tabs.CloseButton
+                      aria-label={language.t("common.closeTab")}
+                      onClick={() => layout.tabs().close(tab)}
+                    />
+                  }
+                >
+                  <span dir="ltr" class="truncate">
+                    {getFilename(file.pathFromTab(tab) ?? tab)}
+                  </span>
+                </Tabs.Trigger>
+              )}
+            </For>
+          </Tabs.List>
+        </Tabs>
+      </div>
+      <div class="min-h-0 flex-1">
+        <SessionFileBrowserTab
+          mobile
+          tab={tabs.activeFileTab() ?? SESSION_OPEN_FILE_TAB}
+          placeholder={browsing()}
+          active={active()}
+          kinds={kinds}
+          state={{
+            sidebarOpened: browsing,
+            sidebarWidth: () => 240,
+            sidebarTransition: () => false,
+            resizeSidebar: () => undefined,
+            toggleSidebar: () => setStore("browsing", !browsing()),
+          }}
+          onSelect={open}
+          onSelectPermanent={open}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -19,7 +19,10 @@ export function SessionHeader() {
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
   const actions = createMemo<SessionHeaderActionsState>(() => ({
-    status: status() ? { label: language.t("status.popover.trigger"), content: () => <StatusPopover /> } : undefined,
+    status:
+      isDesktop() && status()
+        ? { label: language.t("status.popover.trigger"), content: () => <StatusPopover /> }
+        : undefined,
     reviewLabel: language.t("command.review.toggle"),
     reviewKeybind: reviewTooltipKeybind(command),
     reviewVisible: isDesktop(),

packages/app/src/session/helpers.test.ts

@@ -36,6 +36,28 @@ describe("createOpenReviewFile", () => {
 
     expect(calls).toEqual(["show", "load:src/a.ts", "tab:src/a.ts", "open:file://src/a.ts", "active:file://src/a.ts"])
   })
+
+  test("selects immediately and does not steal focus when loading finishes", async () => {
+    const loading = Promise.withResolvers<void>()
+    const state = { active: "file://previous.ts", opened: [] as string[] }
+    const openReviewFile = createOpenReviewFile({
+      showAllFiles: () => undefined,
+      tabForPath: (path) => `file://${path}`,
+      openTab: (tab) => state.opened.push(tab),
+      setActive: (tab) => {
+        state.active = tab
+      },
+      loadFile: () => loading.promise,
+    })
+
+    openReviewFile("requested.ts")
+    expect(state.opened).toEqual(["file://requested.ts"])
+    expect(state.active).toBe("file://requested.ts")
+    state.active = "file://previous.ts"
+    loading.resolve()
+    await loading.promise
+    expect(state.active).toBe("file://previous.ts")
+  })
 })
 
 describe("createOpenSessionFileTab", () => {

packages/app/src/session/helpers.ts

@@ -124,14 +124,10 @@ export const createOpenReviewFile = (input: {
   return (path: string) => {
     batch(() => {
       input.showAllFiles()
-      const maybePromise = input.loadFile(path)
-      const open = () => {
-        const tab = input.tabForPath(path)
-        input.openTab(tab)
-        input.setActive(tab)
-      }
-      if (maybePromise instanceof Promise) void maybePromise.then(open)
-      else open()
+      input.loadFile(path)
+      const tab = input.tabForPath(path)
+      input.openTab(tab)
+      input.setActive(tab)
     })
   }
 }

packages/app/src/session/model.ts

@@ -129,6 +129,7 @@ export function useSessionModel() {
     layout: {
       tabs: layout.tabs,
       view: layout.view,
+      tabKey: layout.tabKey,
     },
     ownership: createSessionOwnership(layout.sessionKey),
     tabs: {

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

@@ -38,7 +38,7 @@ export function createSessionReview(input: {
   const location = useWorkspaceLocation()
   const server = useServerSDK()
   const [state, setState] = createStore({
-    mobileTab: "session" as "session" | "changes",
+    mobileTab: "session" as "session" | "changes" | "files" | "usage",
     detailsOpen: false,
     scroll: undefined as HTMLDivElement | undefined,
     pendingFile: undefined as string | undefined,
@@ -66,7 +66,9 @@ export function createSessionReview(input: {
     }
     return list
   })
-  const mobileChanges = createMemo(() => !input.session.isDesktop() && state.mobileTab === "changes")
+  const mobileChanges = createMemo(
+    () => !input.session.isDesktop() && !input.screen.terminal.open() && state.mobileTab === "changes",
+  )
   const vcsMode = createMemo<VcsMode | undefined>(() => {
     const value = mode()
     return value === "git" || value === "branch" ? value : undefined
@@ -407,7 +409,7 @@ export function createSessionReview(input: {
     loadDiff,
     mobile: {
       changes: mobileChanges,
-      setTab: (tab: "session" | "changes") => setState("mobileTab", tab),
+      setTab: (tab: "session" | "changes" | "files" | "usage") => setState("mobileTab", tab),
       tab: () => state.mobileTab,
     },
     mode,

packages/app/src/session/review/panel.tsx

@@ -18,6 +18,7 @@ import type {
   SessionReviewLineComment,
 } from "@opencode-ai/session-ui/session-review"
 import FileTreeV2 from "@/session/files/file-tree-v2"
+import { sortFileTreeV2Paths } from "@/session/files/file-tree-v2-model"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { useServerSDK } from "@/runtime/server/client"
@@ -83,6 +84,9 @@ export function ReviewPanelView(
     ),
   )
   const searching = createMemo(() => props.state.filter().trim().length > 0)
+  const navigationFiles = createMemo(() =>
+    searching() || props.fileList === "flat" ? filteredFiles() : sortFileTreeV2Paths(filteredFiles()),
+  )
   const kinds = createMemo(() => reviewDiffKinds(diffs()))
   // Changes-only trees omit "M" — every row is already a change; A/D stay visible.
   const treeKinds = createMemo(() => new Map([...kinds()].filter(([, kind]) => kind !== "mix")))
@@ -93,7 +97,7 @@ export function ReviewPanelView(
     if (focus && diffs().some((diff) => diff.file === focus.file)) return focus.file
     const active = props.activeFile
     if (searching()) return active
-    const files = filteredFiles()
+    const files = navigationFiles()
     if (active && files.includes(active)) return active
     return files[0]
   })
@@ -141,7 +145,7 @@ export function ReviewPanelView(
         />
       }
       activeFile={activeDiff()}
-      files={filteredFiles()}
+      files={navigationFiles()}
       onSelectFile={props.onSelectFile}
       diffStyle={props.diffStyle}
       onDiffStyleChange={props.onDiffStyleChange}

packages/app/src/session/review/review-tab.tsx

@@ -23,6 +23,9 @@ export interface SessionReviewTabProps {
   diffs: ReviewDiff[]
   view: ReturnType<ReturnType<typeof useLayout>["view"]>
   diffStyle: DiffStyle
+  changeSummary?: boolean
+  overflow?: "wrap" | "scroll"
+  disableLineNumbers?: boolean
   onDiffStyleChange?: (style: DiffStyle) => void
   onViewFile?: (file: string) => void
   onLineComment?: (comment: { file: string; selection: SelectedLineRange; comment: string; preview?: string }) => void
@@ -122,6 +125,7 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
   createEffect(() => {
     props.diffs.length
     props.diffStyle
+    props.overflow
     if (!layout.ready()) return
     queueRestore()
   })
@@ -156,6 +160,9 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
       }}
       diffs={props.diffs}
       diffStyle={props.diffStyle}
+      changeSummary={props.changeSummary}
+      overflow={props.overflow}
+      disableLineNumbers={props.disableLineNumbers}
       onDiffStyleChange={props.onDiffStyleChange}
       onViewFile={props.onViewFile}
       focusedFile={props.focusedFile}

packages/app/src/session/review/view.tsx

@@ -2,51 +2,137 @@ import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-
 import { SessionReviewV2SidebarToggle } from "@opencode-ai/session-ui/v2/session-review-v2"
 import { Select } from "@opencode-ai/ui/select"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { Match, Show, Suspense, Switch } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Menu } from "@opencode-ai/ui/menu"
+import { For, Match, Show, Suspense, Switch, lazy, createEffect, onCleanup, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLanguage } from "@/runtime/i18n/language"
+import { useSettings } from "@/settings/model"
 import { SessionSidePanel } from "../files/session-side-panel"
 import { ReviewPanel } from "./panel"
 import { SessionReviewTab } from "./review-tab"
 import type { ChangeMode, SessionReviewModel } from "./model"
 
-export function SessionMobileTabs(props: { review: SessionReviewModel; compact?: boolean; bottom?: boolean }) {
+const StatusDrawer = lazy(async () => {
+  const { StatusDrawer } = await import("@/shell/status/status-drawer")
+  return { default: StatusDrawer }
+})
+
+const MobilePanelDrawer = lazy(async () => {
+  const { MobilePanelDrawer } = await import("@/shell/mobile-panel-drawer")
+  return { default: MobilePanelDrawer }
+})
+
+export function SessionMobileViewTabs(props: {
+  current: "session" | "changes" | "files" | "usage" | "terminal"
+  onSelect: (view: "session" | "changes" | "files" | "usage" | "terminal") => void
+  details?: (close: () => void) => JSX.Element
+  onDetailsOpenChange?: (open: boolean) => void
+}) {
   const language = useLanguage()
+  const [store, setStore] = createStore({
+    menu: false,
+    status: false,
+    statusLoaded: false,
+    details: false,
+    detailsLoaded: false,
+    pending: undefined as "status" | "details" | undefined,
+  })
+  createEffect(() => props.onDetailsOpenChange?.(store.details))
+  onCleanup(() => props.onDetailsOpenChange?.(false))
+  let trigger: HTMLButtonElement | undefined
   return (
-    <Tabs value={props.review.mobile.tab()} class="h-auto">
-      <Tabs.List
-        classList={{
-          "!h-9": props.compact,
-          "[&::after]:!border-b-0 [&::after]:!border-t [&::after]:!border-border-weak-base": props.bottom,
-        }}
+    <div
+      class="relative flex shrink-0 items-center before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-v2-border-border-base before:content-['']"
+      data-slot="session-mobile-view-navigation"
+    >
+      <Tabs value={props.current} variant="line" class="!h-auto min-w-0 flex-1" data-slot="session-mobile-view-tabs">
+        <Tabs.List aria-label={language.t("session.view.select")} class="!h-9 !gap-0 !px-0 before:!hidden">
+          <For each={["session", "changes", "files", "terminal"] as const}>
+            {(view) => (
+              <Tabs.Trigger
+                value={view}
+                class="min-w-0 flex-1"
+                classes={{ button: "w-full justify-center" }}
+                onClick={() => props.onSelect(view)}
+              >
+                {view === "session"
+                  ? language.t("session.tab.session")
+                  : view === "changes"
+                    ? language.plural("session.review.change", 0)
+                    : view === "files"
+                      ? language.t("session.tab.files")
+                      : language.t("terminal.title")}
+              </Tabs.Trigger>
+            )}
+          </For>
+        </Tabs.List>
+      </Tabs>
+      <Menu
+        appearance="standard"
+        modal={false}
+        placement="bottom-end"
+        gutter={4}
+        open={store.menu}
+        onOpenChange={(open) => setStore("menu", open)}
       >
-        <Tabs.Trigger
-          value="session"
-          classes={{ button: props.compact ? "w-full !py-2" : "w-full" }}
-          classList={{
-            "!w-1/2 !max-w-none": true,
-            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent":
-              props.bottom,
+        <Menu.Trigger
+          as={IconButton}
+          ref={(element: HTMLButtonElement) => {
+            trigger = element
           }}
-          onClick={() => props.review.mobile.setTab("session")}
-        >
-          {language.t("session.tab.session")}
-        </Tabs.Trigger>
-        <Tabs.Trigger
-          value="changes"
-          classes={{ button: props.compact ? "w-full !py-2" : "w-full" }}
-          classList={{
-            "!w-1/2 !max-w-none !border-r-0": true,
-            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent":
-              props.bottom,
-          }}
-          onClick={() => props.review.mobile.setTab("changes")}
-        >
-          {props.review.hasChanges()
-            ? language.t("session.review.filesChanged", { count: props.review.count() })
-            : language.plural("session.review.change", 0)}
-        </Tabs.Trigger>
-      </Tabs.List>
-    </Tabs>
+          icon={<Icon name="menu" />}
+          variant="ghost-muted"
+          size="normal"
+          class="mx-1.5 shrink-0"
+          state={props.current === "usage" || store.menu ? "pressed" : undefined}
+          aria-label={language.t("common.moreOptions")}
+        />
+        <Menu.Portal>
+          <Menu.Content
+            onCloseAutoFocus={(event) => {
+              if (!store.pending) return
+              event.preventDefault()
+              if (store.pending === "status") setStore({ status: true, statusLoaded: true })
+              if (store.pending === "details") setStore({ details: true, detailsLoaded: true })
+              setStore("pending", undefined)
+            }}
+          >
+            <Menu.Item onSelect={() => props.onSelect("usage")}>{language.t("session.tab.usage")}</Menu.Item>
+            <Show when={props.details}>
+              <Menu.Item onSelect={() => setStore({ pending: "details", menu: false })}>
+                {language.t("session.summary.title")}
+              </Menu.Item>
+            </Show>
+            <Menu.Item onSelect={() => setStore({ pending: "status", menu: false })}>
+              {language.t("status.popover.trigger")}
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+      <Show when={store.statusLoaded}>
+        <Suspense>
+          <StatusDrawer
+            open={store.status}
+            onOpenChange={(open) => setStore("status", open)}
+            returnFocus={() => trigger}
+          />
+        </Suspense>
+      </Show>
+      <Show when={store.detailsLoaded}>
+        <Suspense>
+          <MobilePanelDrawer
+            title={language.t("session.summary.title")}
+            open={store.details}
+            onOpenChange={(open) => setStore("details", open)}
+            returnFocus={() => trigger}
+          >
+            {props.details?.(() => setStore("details", false))}
+          </MobilePanelDrawer>
+        </Suspense>
+      </Show>
+    </div>
   )
 }
 
@@ -88,14 +174,22 @@ export function SessionDesktopReview(props: { review: SessionReviewModel; presen
 }
 
 function ReviewContent(props: { review: SessionReviewModel }) {
+  const settings = useSettings()
   return (
     <Show when={!props.review.deferRender()}>
       <SessionReviewTab
         title={<ReviewTitle review={props.review} />}
-        empty={<ReviewEmpty review={props.review} loadingClass="px-4 py-4 text-text-weak" />}
+        empty={<ReviewEmpty review={props.review} loadingClass="px-2 py-2 text-text-weak" />}
         diffs={props.review.diffs()}
         view={props.review.view()}
         diffStyle="unified"
+        changeSummary
+        disableLineNumbers={false}
+        overflow={settings.general.mobileDiffWrap() ? "wrap" : "scroll"}
+        onViewFile={(file) => {
+          props.review.openFile(file)
+          props.review.mobile.setTab("files")
+        }}
         onScrollRef={props.review.setScroll}
         focusedFile={props.review.activeFile()}
         onLineComment={props.review.comments.add}
@@ -106,11 +200,11 @@ function ReviewContent(props: { review: SessionReviewModel }) {
         comments={props.review.comments.all()}
         focusedComment={props.review.comments.focus()}
         onFocusedCommentChange={props.review.comments.setFocus}
-        onViewFile={props.review.openFile}
         classes={{
-          root: "pb-8 [&_[data-slot=session-review-list]]:pb-0",
-          header: "px-4 !h-16 !pb-4",
-          container: "px-4",
+          root: "[&_[data-slot=session-review-list]]:pb-0 [&_[data-slot=accordion-trigger]]:!rounded-none [&_[data-slot=accordion-trigger]]:!border-x-0 [&_[data-slot=accordion-item]:first-child_[data-slot=accordion-trigger]]:!border-t-0 [&_[data-slot=accordion-item]:last-child:not([data-expanded])_[data-slot=accordion-trigger]]:!border-b-0 [&_[data-slot=accordion-item]:last-child_[data-slot=accordion-content]]:!border-b-0 [&_[data-slot=accordion-item]:last-child_[data-slot=session-review-diff-placeholder]]:!border-b-0 [&_[data-slot=accordion-content]]:!rounded-none [&_[data-slot=accordion-content]]:!border-x-0 [&_[data-slot=session-review-diff-placeholder]]:!rounded-none [&_[data-slot=session-review-diff-placeholder]]:!border-x-0",
+          header:
+            "!px-2 !h-10 !pb-0 relative before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-v2-border-border-base before:content-['']",
+          container: "!px-0",
         }}
       />
     </Show>

packages/app/src/session/route.tsx

@@ -154,7 +154,7 @@ function PendingSessionState(props: { sessionID: string }) {
 
 function SessionStatePanel(props: ParentProps) {
   return (
-    <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
+    <div class="flex min-h-0 flex-1 px-2 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
       <SessionPanelFrame raised>{props.children}</SessionPanelFrame>
     </div>
   )

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

@@ -12,6 +12,7 @@ export function createSessionScreenLayout(session: SessionModel) {
   const layout = useLayout()
   const settings = useSettings()
   const size = createSizing()
+  const view = session.layout.view
   const reviewOpen = createMemo(() => session.isDesktop() && session.layout.view().reviewPanel.opened())
   const reviewPanelOpen = createMemo(() => reviewOpen() && !!session.identity.params.id)
   const terminalOpen = createMemo(() => session.layout.view().terminal.opened())
@@ -42,7 +43,7 @@ export function createSessionScreenLayout(session: SessionModel) {
   const splitReview = createMemo(() => reviewPanelOpen() && layout.review.diffStyle() === "split")
   const resizedWidth = createMemo(() =>
     clampSessionPanelWidth({
-      width: layout.session.width(),
+      width: view().reviewPanel.width(),
       available: available(),
       split: splitReview(),
     }),
@@ -72,7 +73,7 @@ export function createSessionScreenLayout(session: SessionModel) {
   }, panelLayout().stacked)
   const sideRegionOpen = createMemo(() => reviewPanelOpen() || fileTreeOpen())
   const terminalPane = createMemo(() =>
-    Math.min(layout.terminal.height(), typeof window === "undefined" ? 600 : window.innerHeight * 0.6),
+    Math.min(view().terminal.height(), typeof window === "undefined" ? 600 : window.innerHeight * 0.6),
   )
   const terminalPaneHeight = createMemo(() => `${terminalPane()}px`)
   const sideHeight = createMemo(() => rowSize.height)

packages/app/src/session/screen.tsx

@@ -1,11 +1,21 @@
-import { ErrorBoundary, Show, Match, Switch, createMemo, createEffect, createComputed, on } from "solid-js"
+import {
+  ErrorBoundary,
+  Show,
+  Match,
+  Switch,
+  Suspense,
+  lazy,
+  createMemo,
+  createEffect,
+  createComputed,
+  on,
+} from "solid-js"
 import { createStore } from "solid-js/store"
-import createPresence from "solid-presence"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { SessionHeader } from "@/session/header/session-header"
-import { useLayout } from "@/shell/state/layout"
-import { useSettings } from "@/settings/model"
-import { MessageTimeline } from "@/session/timeline/message-timeline"
+import { MessageTimeline, SessionSummaryPanel } from "@/session/timeline/message-timeline"
+import { useServer } from "@/runtime/server/current"
+import { projectForSession } from "@/shell/layout/helpers"
 import type { SessionModel } from "@/session/model"
 import { SESSION_PANEL_WIDTH_MIN } from "@/session/session-panel-width"
 import { SessionPanelFrame } from "@/session/session-frame"
@@ -14,15 +24,25 @@ import { useUsageExceededDialogs } from "./usage-exceeded-dialogs"
 import { SessionErrorFallback } from "./route-error"
 import { createSessionScreenLayout } from "./screen-layout"
 import { createSessionReview } from "./review/model"
-import { SessionDesktopReview, SessionMobileReview, SessionMobileTabs } from "./review/view"
+import { SessionDesktopReview, SessionMobileReview, SessionMobileViewTabs } from "./review/view"
+import { SessionContextTab } from "./files/session-context-tab"
 import { createSessionTimelineInteraction } from "./timeline/interaction"
 import { ActiveSessionComposerRegion, createActiveSessionRegion } from "./composer/region"
 import { SessionIdentityHeader } from "./session-identity-header"
+import { createAnimatedPresence } from "@/runtime/animated-presence"
+
+const SessionMobileFiles = lazy(async () => {
+  const { SessionMobileFiles } = await import("./files/session-mobile-files")
+  return { default: SessionMobileFiles }
+})
 
 export function SessionScreen(props: { session: SessionModel }) {
   const session = props.session
-  const layout = useLayout()
-  const settings = useSettings()
+  const server = useServer()
+  const detailsProject = createMemo(() => {
+    const info = session.data.info()
+    return info ? projectForSession(info, server.ctx.sync.data.project) : undefined
+  })
   const isDesktop = session.isDesktop
   const screen = createSessionScreenLayout(session)
   const timeline = createSessionTimelineInteraction(session)
@@ -34,6 +54,8 @@ export function SessionScreen(props: { session: SessionModel }) {
     sideRegionPresent: false,
     sideReviewPresent: false,
     sideTerminalPresent: false,
+    mobileTerminalCached: false,
+    mobileMoveDismissed: false,
   })
   const [elements, setElements] = createStore<{
     side?: HTMLDivElement
@@ -41,15 +63,41 @@ export function SessionScreen(props: { session: SessionModel }) {
   }>({})
   const sideVisible = createMemo(() => isDesktop() && screen.side.layout().visible)
   const sideTerminalVisible = createMemo(() => isDesktop() && screen.terminal.side() && screen.terminal.open())
-  const bottomTerminalVisible = createMemo(() => screen.terminal.open() && (!isDesktop() || screen.terminal.bottom()))
-  const sidePresence = createPresence({
-    show: sideVisible,
-    element: () => elements.side ?? null,
-  })
-  const bottomTerminalPresence = createPresence({
-    show: bottomTerminalVisible,
-    element: () => elements.bottomTerminal ?? null,
+  const bottomTerminalVisible = createMemo(() => isDesktop() && screen.terminal.open() && screen.terminal.bottom())
+  const sidePresence = createAnimatedPresence(
+    () => sideVisible() || undefined,
+    () => elements.side ?? null,
+    session.layout.tabKey,
+  )
+  const bottomTerminalPresence = createAnimatedPresence(
+    () => bottomTerminalVisible() || undefined,
+    () => elements.bottomTerminal ?? null,
+    session.layout.tabKey,
+  )
+  const sideMotion = createMemo<{
+    key?: string
+    region: boolean
+    terminal: boolean
+    animateRegion: boolean
+    animateTerminal: boolean
+  }>((previous) => {
+    const key = session.layout.tabKey()
+    const region = screen.side.region.open()
+    const terminal = sideTerminalVisible()
+    const sameTab = previous?.key === key
+    return {
+      key,
+      region,
+      terminal,
+      animateRegion: !!previous && sameTab && previous.region !== region,
+      animateTerminal: !!previous && sameTab && previous.terminal !== terminal,
+    }
   })
+  const paneAnimating = () =>
+    sidePresence.animate() ||
+    sideMotion().animateRegion ||
+    sideMotion().animateTerminal ||
+    bottomTerminalPresence.animate()
   createEffect(() => {
     if (sideTerminalVisible()) setStore("sideTerminalPresent", true)
     if (bottomTerminalVisible()) setStore("bottomTerminalCached", true)
@@ -67,6 +115,7 @@ export function SessionScreen(props: { session: SessionModel }) {
   createComputed((prev) => {
     const key = session.identity.sessionKey()
     if (key !== prev) {
+      setStore("mobileMoveDismissed", false)
       setStore("deferRender", true)
       const owner = session.ownership.capture()
       requestAnimationFrame(() => {
@@ -76,6 +125,11 @@ export function SessionScreen(props: { session: SessionModel }) {
     return key
   })
   const review = createSessionReview({ session, screen, deferRender: () => store.deferRender })
+  const mobileView = createMemo(() => (screen.terminal.open() ? "terminal" : review.mobile.tab()))
+  const conversationVisible = createMemo(() => isDesktop() || mobileView() === "session")
+  createEffect(() => {
+    if (!isDesktop() && screen.terminal.open()) setStore("mobileTerminalCached", true)
+  })
   const composer = createActiveSessionRegion({
     session,
     screen,
@@ -84,36 +138,102 @@ export function SessionScreen(props: { session: SessionModel }) {
 
   useUsageExceededDialogs()
 
-  const mobileTabsBottom = createMemo(() => !isDesktop() && settings.general.mobileTitlebarPosition() === "bottom")
-
   const sessionErrorFallback = (error: unknown, reset: () => void) => {
     createEffect(on(session.identity.sessionKey, reset, { defer: true }))
     return <SessionErrorFallback error={error} sessionID={session.identity.params.id} />
   }
 
+  const mobileTabs = () => (
+    <Show when={session.identity.sessionKey()} keyed>
+      {(_key) => (
+        <SessionMobileViewTabs
+          current={mobileView()}
+          onDetailsOpenChange={review.details.setOpen}
+          details={
+            !session.data.isChild() && detailsProject()
+              ? (close) => (
+                  <Show when={detailsProject()}>
+                    {(project) => (
+                      <SessionSummaryPanel
+                        mobile
+                        project={project()}
+                        directory={session.workspace.directory()}
+                        local={!session.workspace.current()}
+                        branch={
+                          session.shared.data.location.vcs.info({ directory: session.workspace.directory() })?.branch
+                            .current
+                        }
+                        baseBranch={
+                          session.shared.data.location.vcs.info({ directory: project().worktree })?.branch.current
+                        }
+                        diffs={project().vcs === "git" ? review.details.diffs() : []}
+                        sessionID={session.identity.params.id ?? ""}
+                        moveEligible={composer.workspaceMoveEligible()}
+                        moveDismissed={store.mobileMoveDismissed}
+                        onMoveDismiss={() => setStore("mobileMoveDismissed", true)}
+                        onReview={() => {
+                          close()
+                          review.mobile.setTab("changes")
+                          session.layout.view().terminal.close()
+                        }}
+                        backgroundTasks={composer.region.state.background.tasks()}
+                      />
+                    )}
+                  </Show>
+                )
+              : undefined
+          }
+          onSelect={(view) => {
+            if (view === "terminal") {
+              session.layout.view().terminal.open()
+              return
+            }
+            review.mobile.setTab(view)
+            session.layout.view().terminal.close()
+          }}
+        />
+      )}
+    </Show>
+  )
+
   const sessionPanelContent = () => (
     <>
-      <Show when={!isDesktop() && !!session.identity.params.id && !mobileTabsBottom()}>
-        <SessionMobileTabs review={review} compact />
-      </Show>
+      <Show when={!isDesktop() && !!session.identity.params.id}>{mobileTabs()}</Show>
       {/* Surface query errors without suspending session metadata while messages load. */}
       <Show when={timeline.resource.error}>
         {(error) => {
           throw error()
         }}
       </Show>
-      <div class="flex-1 min-h-0 overflow-hidden">
+      <div class="relative flex-1 min-h-0 overflow-hidden">
+        <Show when={!isDesktop() && store.mobileTerminalCached}>
+          <div class="absolute inset-0" classList={{ invisible: mobileView() !== "terminal" }}>
+            <TerminalPanel fill embedded present contentHeight="100%" />
+          </div>
+        </Show>
         <Switch>
+          <Match when={!isDesktop() && mobileView() === "terminal"}>
+            <></>
+          </Match>
+          <Match when={!isDesktop() && mobileView() === "usage"}>
+            <SessionContextTab />
+          </Match>
+          <Match when={!isDesktop() && mobileView() === "files"}>
+            <Suspense>
+              <SessionMobileFiles />
+            </Suspense>
+          </Match>
           <Match when={session.identity.params.id && review.mobile.changes()}>
             <SessionMobileReview review={review} />
           </Match>
           <Match when={session.identity.params.id}>
-            <Show when={!messagesReady()}>
+            <Show when={isDesktop() && !messagesReady()}>
               <SessionIdentityHeader sessionID={session.identity.params.id ?? ""} session={session.data.info()} />
             </Show>
             <Show when={messagesReady() ? session.identity.params.id : undefined} keyed>
               {(_id) => (
                 <MessageTimeline
+                  hideHeader={!isDesktop()}
                   session={session}
                   background={composer.region.state.background}
                   actions={composer.actions.timeline}
@@ -143,27 +263,25 @@ export function SessionScreen(props: { session: SessionModel }) {
         </Switch>
       </div>
 
-      <Show when={!review.mobile.changes() ? session.identity.params.id : undefined} keyed>
+      <Show when={conversationVisible() ? session.identity.params.id : undefined} keyed>
         {(_id) => (
           <ActiveSessionComposerRegion model={composer} session={session} onResponseSubmit={timeline.actions.resume} />
         )}
       </Show>
-      <Show when={!!session.identity.params.id && mobileTabsBottom()}>
-        <SessionMobileTabs review={review} compact bottom />
-      </Show>
     </>
   )
 
   return (
     <>
       <SessionHeader />
-      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-[var(--shell-bottom-inset,8px)] 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={{
               "@container relative z-10 shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]": true,
               "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-                !screen.size.active(),
+                !screen.size.active() && sidePresence.animate(),
+              "transition-none": screen.size.active() || !sidePresence.animate(),
             }}
             data-slot="session-chat-panel"
             style={{
@@ -186,18 +304,18 @@ export function SessionScreen(props: { session: SessionModel }) {
                   max={screen.panel.max()}
                   onResize={(width) => {
                     screen.size.touch()
-                    layout.session.resize(width)
+                    session.layout.view().reviewPanel.resize(width)
                   }}
                 />
               </div>
             </Show>
           </div>
 
-          <Show when={sidePresence.present() || store.sideTerminalPresent}>
+          <Show when={sidePresence.present() || store.sideReviewPresent || store.sideTerminalPresent}>
             <div
               ref={(element) => setElements("side", element)}
               data-slot="session-side-panel-presence"
-              data-opened={sideVisible()}
+              data-opened={sidePresence.animate() ? sidePresence.show() : undefined}
               onAnimationEnd={(event) => {
                 if (event.currentTarget !== event.target) return
                 if (event.animationName !== "terminal-panel-presence-in" || !sideVisible()) return
@@ -218,15 +336,15 @@ export function SessionScreen(props: { session: SessionModel }) {
                   data-slot="session-side-region"
                   classList={{
                     "absolute inset-x-0 top-0 min-h-0 overflow-visible transition-[height] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none": true,
-                    "will-change-[height]": !screen.size.active() && store.sideHeightMotion,
-                    "transition-none": screen.size.active() || !store.sideHeightMotion,
+                    "will-change-[height]": !screen.size.active() && store.sideHeightMotion && paneAnimating(),
+                    "transition-none": screen.size.active() || !store.sideHeightMotion || !paneAnimating(),
                   }}
                   style={{ height: screen.side.region.height() }}
                 >
                   <Show when={store.sideRegionPresent}>
                     <div
                       data-slot="session-side-region-presence"
-                      data-opened={screen.side.region.open()}
+                      data-opened={sideMotion().animateRegion ? sideMotion().region : undefined}
                       class="absolute inset-0"
                       onAnimationEnd={(event) => {
                         if (event.currentTarget !== event.target) return
@@ -248,6 +366,7 @@ export function SessionScreen(props: { session: SessionModel }) {
                       "relative z-0 shrink-0 overflow-visible bg-v2-background-bg-deep transition-[height] duration-[40ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none": true,
                       "delay-0": !screen.side.gap.closing(),
                       "delay-[200ms]": screen.side.gap.closing(),
+                      "transition-none": !paneAnimating(),
                     }}
                     style={{ height: screen.side.gap.height() }}
                     onPointerDown={() => screen.size.start()}
@@ -256,13 +375,13 @@ export function SessionScreen(props: { session: SessionModel }) {
                       <ResizeHandle
                         class="!relative !inset-auto !h-full !w-full !transform-none"
                         direction="vertical"
-                        size={layout.terminal.height()}
+                        size={session.layout.view().terminal.height()}
                         min={100}
                         max={typeof window === "undefined" ? 600 : window.innerHeight * 0.6}
                         collapseThreshold={50}
                         onResize={(height) => {
                           screen.size.touch()
-                          layout.terminal.resize(height)
+                          session.layout.view().terminal.resize(height)
                         }}
                         onCollapse={() => session.layout.view().terminal.close()}
                       />
@@ -272,15 +391,15 @@ export function SessionScreen(props: { session: SessionModel }) {
                     data-slot="session-side-terminal-region"
                     classList={{
                       "relative z-10 min-h-0 shrink-0 overflow-visible transition-[height] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none": true,
-                      "will-change-[height]": !screen.size.active() && store.sideHeightMotion,
-                      "transition-none": screen.size.active() || !store.sideHeightMotion,
+                      "will-change-[height]": !screen.size.active() && store.sideHeightMotion && paneAnimating(),
+                      "transition-none": screen.size.active() || !store.sideHeightMotion || !paneAnimating(),
                     }}
                     style={{ height: screen.side.terminal.height() }}
                   >
                     <Show when={store.sideTerminalPresent}>
                       <div
                         data-slot="side-terminal-panel-presence"
-                        data-opened={sideTerminalVisible()}
+                        data-opened={sideMotion().animateTerminal ? sideMotion().terminal : undefined}
                         class="absolute inset-0 rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]"
                       >
                         <div data-slot="side-terminal-panel-clip" class="size-full overflow-clip rounded-[10px]">
@@ -288,6 +407,7 @@ export function SessionScreen(props: { session: SessionModel }) {
                             fill
                             framed={false}
                             present={store.sideTerminalPresent}
+                            animate={sidePresence.animate() || sideMotion().animateTerminal}
                             contentHeight={screen.side.terminal.contentHeight()}
                           />
                         </div>
@@ -300,11 +420,11 @@ export function SessionScreen(props: { session: SessionModel }) {
           </Show>
         </div>
 
-        <Show when={bottomTerminalPresence.present() || store.bottomTerminalCached}>
+        <Show when={isDesktop() && (bottomTerminalPresence.present() || store.bottomTerminalCached)}>
           <div
             ref={(element) => setElements("bottomTerminal", element)}
             data-slot="terminal-panel-presence"
-            data-opened={bottomTerminalVisible()}
+            data-opened={bottomTerminalPresence.animate() ? bottomTerminalPresence.show() : undefined}
             classList={{
               hidden: !bottomTerminalPresence.present(),
               "relative min-h-0 shrink-0": isDesktop(),
@@ -315,19 +435,23 @@ export function SessionScreen(props: { session: SessionModel }) {
                 <ResizeHandle
                   class="!relative !inset-auto !h-full !w-full !transform-none"
                   direction="vertical"
-                  size={layout.terminal.height()}
+                  size={session.layout.view().terminal.height()}
                   min={100}
                   max={typeof window === "undefined" ? 600 : window.innerHeight * 0.6}
                   collapseThreshold={50}
                   onResize={(height) => {
                     screen.size.touch()
-                    layout.terminal.resize(height)
+                    session.layout.view().terminal.resize(height)
                   }}
                   onCollapse={() => session.layout.view().terminal.close()}
                 />
               </div>
             </Show>
-            <TerminalPanel stacked={isDesktop()} present={store.bottomTerminalCached} />
+            <TerminalPanel
+              stacked={isDesktop()}
+              present={store.bottomTerminalCached}
+              animate={bottomTerminalPresence.animate()}
+            />
           </div>
         </Show>
       </div>

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

@@ -3,8 +3,8 @@ 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={{ "px-2 pb-2 pt-[var(--shell-top-inset,8px)]": props.padded }}
+      class="relative flex size-full flex-col"
+      classList={{ "px-2 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]": props.padded }}
     >
       {props.children}
     </div>

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

@@ -5,6 +5,8 @@ import { SessionRouteKey, SessionStateKey } from "@/runtime/server/scope"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { useServerSDK } from "@/runtime/server/client"
 import { base64Encode } from "@opencode-ai/util/encode"
+import { ServerConnection } from "@/runtime/server/registry"
+import { findSessionTab, tabKey, useTabs } from "@/shell/tabs/tabs"
 
 export const useSessionKey = () => {
   const params = useParams()
@@ -19,12 +21,32 @@ export const useSessionKey = () => {
 
 export const useSessionLayout = () => {
   const layout = useLayout()
+  const tabs = useTabs()
   const { params, sessionKey, workspaceKey } = useSessionKey()
+  const serverSDK = useServerSDK()
+  const currentTab = createMemo(() => {
+    if (!params.id) return
+    return findSessionTab(tabs.store, ServerConnection.key(serverSDK.server), params.id)
+  })
+  const panes = {
+    terminalOpened: () => tabs.pane(currentTab(), "terminal"),
+    setTerminalOpened: (opened: boolean) => tabs.setPane(currentTab(), "terminal", opened),
+    terminalHeight: () => tabs.paneSize(currentTab(), "terminalHeight"),
+    setTerminalHeight: (height: number) => tabs.setPaneSize(currentTab(), "terminalHeight", height),
+    reviewOpened: () => tabs.pane(currentTab(), "review"),
+    setReviewOpened: (opened: boolean) => tabs.setPane(currentTab(), "review", opened),
+    sessionWidth: () => tabs.paneSize(currentTab(), "sessionWidth"),
+    setSessionWidth: (width: number) => tabs.setPaneSize(currentTab(), "sessionWidth", width),
+  }
   return {
     params,
     sessionKey,
     workspaceKey,
+    tabKey: createMemo(() => {
+      const tab = currentTab()
+      return tab && tabKey(tab)
+    }),
     tabs: createMemo(() => layout.tabs(sessionKey)),
-    view: createMemo(() => layout.view(sessionKey)),
+    view: createMemo(() => layout.view(sessionKey, panes)),
   }
 }

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

@@ -17,7 +17,6 @@ import { SortableTerminalTab } from "@/session/terminal/tab"
 import { Terminal } from "@/session/terminal/terminal"
 import { useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
-import { useLayout } from "@/shell/state/layout"
 import { useTerminal, type LocalPTY } from "@/session/terminal/context"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { terminalTabLabel } from "@/session/terminal/terminal-label"
@@ -38,9 +37,16 @@ type CachedTerminalSurface = {
 }
 
 export function TerminalPanel(
-  props: { stacked?: boolean; fill?: boolean; framed?: boolean; present?: boolean; contentHeight?: string } = {},
+  props: {
+    stacked?: boolean
+    fill?: boolean
+    framed?: boolean
+    present?: boolean
+    contentHeight?: string
+    embedded?: boolean
+    animate?: boolean
+  } = {},
 ) {
-  const layout = useLayout()
   const terminal = useTerminal()
   const sdk = useWorkspaceLocation()
   const language = useLanguage()
@@ -50,7 +56,7 @@ export function TerminalPanel(
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const opened = createMemo(() => view().terminal.opened())
   const size = createSizing()
-  const height = createMemo(() => layout.terminal.height())
+  const height = createMemo(() => view().terminal.height())
   const close = () => view().terminal.close()
   let root: HTMLElement | undefined
   let tabList: HTMLDivElement | undefined
@@ -223,6 +229,7 @@ export function TerminalPanel(
       opened={opened()}
       present={present()}
       framed={props.framed}
+      embedded={props.embedded}
       desktop={isDesktop()}
       stacked={stacked()}
       height={panelHeight()}
@@ -230,10 +237,11 @@ export function TerminalPanel(
       pane={pane()}
       max={max()}
       resizing={size.active()}
+      animate={props.animate}
       onResizeStart={size.start}
       onResize={(next) => {
         size.touch()
-        layout.terminal.resize(next)
+        view().terminal.resize(next)
       }}
       onCollapse={close}
     >

packages/app/src/session/terminal/surface.tsx

@@ -7,6 +7,7 @@ export function TerminalSurface(
     opened: boolean
     present?: boolean
     framed?: boolean
+    embedded?: boolean
     desktop: boolean
     stacked: boolean
     height: string
@@ -14,6 +15,7 @@ export function TerminalSurface(
     pane: number
     max: number
     resizing: boolean
+    animate?: boolean
     onResizeStart: () => void
     onResize: (height: number) => void
     onCollapse: () => void
@@ -26,7 +28,9 @@ export function TerminalSurface(
       id="terminal-panel"
       data-component="terminal-panel"
       data-opened={props.opened}
-      data-size-animated={!props.resizing && (!props.desktop || props.stacked)}
+      data-size-animated={
+        props.animate !== false && !props.embedded && !props.resizing && (!props.desktop || props.stacked)
+      }
       role="region"
       aria-label={props.label}
       aria-hidden={!props.opened}
@@ -37,11 +41,14 @@ export function TerminalSurface(
         "min-w-0 h-full flex-1": props.desktop && (props.present ?? props.opened) && !props.stacked,
         "w-0 h-full pointer-events-none": props.desktop && !(props.present ?? props.opened),
         "rounded-[10px] shadow-[var(--v2-elevation-raised)]": props.desktop && (props.framed ?? true),
-        "will-change-[height]": !props.resizing && (!props.desktop || props.stacked),
+        "will-change-[height]": !props.embedded && !props.resizing && (!props.desktop || props.stacked),
       }}
       style={{ height: props.height, "--terminal-panel-height": props.contentHeight }}
     >
-      <div classList={{ "md:hidden": !props.stacked, hidden: props.stacked }} onPointerDown={props.onResizeStart}>
+      <div
+        classList={{ "md:hidden": !props.stacked, hidden: props.stacked || props.embedded }}
+        onPointerDown={props.onResizeStart}
+      >
         <ResizeHandle
           class="-top-1"
           direction="vertical"
@@ -57,7 +64,7 @@ export function TerminalSurface(
         data-slot="terminal-panel-content"
         class="absolute inset-x-0 top-0 flex flex-col overflow-hidden"
         classList={{
-          "border-t border-border-weak-base": props.opened && !props.desktop,
+          "border-t border-border-weak-base": props.opened && !props.desktop && !props.embedded,
           "pointer-events-none": !props.opened,
         }}
         style={{ height: props.contentHeight }}

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

@@ -69,7 +69,7 @@ export function BackgroundMoveHint(props: { keybind?: string[] }) {
   )
 }
 
-export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
+export function BackgroundWorkSummary(props: { tasks: BackgroundTask[]; mobile?: boolean }) {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)
   const taskType = (task: BackgroundTask) => {
@@ -81,7 +81,7 @@ export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
   return (
     <Popover
       open={open()}
-      placement={language.direction() === "rtl" ? "right-end" : "left-end"}
+      placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-end" : "left-end"}
       gutter={4}
       onOpenChange={setOpen}
     >
@@ -126,6 +126,7 @@ export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
 
 function WorkspaceMoveAction(props: {
   variant: "inline" | "panel"
+  mobile?: boolean
   eligible: boolean
   sessionID: string
   project: Project
@@ -150,9 +151,17 @@ function WorkspaceMoveAction(props: {
         sessionID={props.sessionID}
         project={props.project}
         directory={props.directory}
-        placement={inline() ? "bottom-end" : language.direction() === "rtl" ? "right-start" : "left-start"}
-        gutter={inline() ? 4 : -22}
-        contentClass={inline() ? undefined : "relative top-3.5"}
+        placement={
+          props.mobile
+            ? "top-end"
+            : inline()
+              ? "bottom-end"
+              : language.direction() === "rtl"
+                ? "right-start"
+                : "left-start"
+        }
+        gutter={props.mobile || inline() ? 4 : -22}
+        contentClass={props.mobile || inline() ? undefined : "relative top-3.5"}
         class={
           inline()
             ? "flex h-5 w-full items-center gap-1.5 rounded-[4px] pe-6 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed"
@@ -181,7 +190,8 @@ function WorkspaceMoveAction(props: {
   )
 }
 
-function SessionSummaryPanel(props: {
+export function SessionSummaryPanel(props: {
+  mobile?: boolean
   project: Project
   avatar?: JSX.Element
   directory: string
@@ -207,7 +217,7 @@ function SessionSummaryPanel(props: {
     "flex h-7 w-full items-center gap-2 rounded-[4px] px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base"
 
   return (
-    <div data-component="session-summary-panel" class="w-[280px]">
+    <div data-component="session-summary-panel" class={props.mobile ? "w-full" : "w-[280px]"}>
       <div class="relative z-10 flex flex-col gap-1 overflow-hidden rounded-[6px] bg-v2-background-bg-base px-0.5 py-1.5 shadow-[var(--v2-elevation-raised)]">
         <div class={row}>
           {props.avatar ?? (
@@ -217,19 +227,23 @@ function SessionSummaryPanel(props: {
               variant={getProjectAvatarVariant(props.project.icon?.color)}
             />
           )}
-          <span class="min-w-0 flex-1 truncate text-v2-text-text-muted">{displayName(props.project)}</span>
+          <span dir="auto" class="min-w-0 flex-1 truncate text-v2-text-text-muted">
+            {displayName(props.project)}
+          </span>
         </div>
         <SessionWorkspaceMenu
           eligible={props.moveEligible}
           sessionID={props.sessionID}
           project={props.project}
           directory={props.directory}
-          placement={language.direction() === "rtl" ? "right-start" : "left-start"}
-          gutter={-22}
+          placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-start" : "left-start"}
+          gutter={props.mobile ? 4 : -22}
           class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed`}
         >
           <Icon name={props.local ? "monitor" : "workspace-isolated"} class="shrink-0 text-v2-icon-icon-muted" />
-          <span class="min-w-0 flex-1 truncate text-start">{location()}</span>
+          <span dir="auto" class="min-w-0 flex-1 truncate text-start">
+            {location()}
+          </span>
           <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
         </SessionWorkspaceMenu>
         <div class={row}>
@@ -252,7 +266,9 @@ function SessionSummaryPanel(props: {
               </span>
             }
           >
-            <span class="min-w-0 truncate">{branch()}</span>
+            <span dir="auto" class="min-w-0 truncate">
+              {branch()}
+            </span>
           </Show>
         </div>
         <button
@@ -272,12 +288,13 @@ function SessionSummaryPanel(props: {
           </Show>
         </button>
         <Show when={props.backgroundTasks.length > 0}>
-          <BackgroundWorkSummary tasks={props.backgroundTasks} />
+          <BackgroundWorkSummary tasks={props.backgroundTasks} mobile={props.mobile} />
         </Show>
       </div>
       <Show when={props.local && props.diffs && props.diffs.length > 0 && props.moveEligible}>
         <WorkspaceMoveAction
           variant="panel"
+          mobile={props.mobile}
           eligible={props.moveEligible}
           sessionID={props.sessionID}
           project={props.project}
@@ -291,6 +308,7 @@ function SessionSummaryPanel(props: {
 }
 
 type MessageTimelineProps = {
+  hideHeader?: boolean
   session: TimelineSessionSource
   background: SessionBackground
   actions?: SessionUserActions
@@ -393,7 +411,7 @@ function MessageTimelineView(
     }),
   )
   const turnPadding = () => "px-4 md:px-5"
-  const showHeader = createMemo(() => props.data.showHeader() || workspaceSession())
+  const showHeader = createMemo(() => !props.hideHeader && (props.data.showHeader() || workspaceSession()))
   const pinned = createMemo(() => props.pinned)
   const messageByID = projection.messageByID
   const virtualized = createTimelineVirtualizer({
@@ -556,198 +574,200 @@ function MessageTimelineView(
       }}
       renderRow={(row, onSizeChange) => <rowRenderer.Row row={row} onSizeChange={onSizeChange} />}
       header={
-        <SessionTitleHeader>
-          <div class="h-12 w-full flex items-center justify-between gap-2">
-            <div class="flex items-center gap-1 min-w-0 flex-1">
-              <div class="flex items-center min-w-0 flex-1 w-full">
-                <Show
-                  when={workspaceSession()}
-                  fallback={
-                    <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
-                      <Show when={showProjectIcon()} fallback={<Icon name="monitor" />}>
-                        {projectAvatar()}
-                      </Show>
-                    </span>
-                  }
-                >
-                  <Tooltip
-                    placement="bottom-start"
-                    value={sessionDirectory()}
-                    contentClass="max-w-[calc(100vw-32px)] break-all"
-                  >
-                    <span
-                      tabIndex={0}
-                      aria-label={sessionDirectory()}
-                      classList={{
-                        "flex size-6 shrink-0 items-center justify-center": true,
-                        "text-v2-icon-icon-accent": !showProjectIcon(),
-                      }}
-                    >
-                      <Show when={showProjectIcon()} fallback={<Icon name="workspace-isolated" />}>
-                        {projectAvatar()}
-                      </Show>
-                    </span>
-                  </Tooltip>
-                </Show>
-                <Show when={parentID()}>
-                  <button
-                    type="button"
-                    data-slot="session-title-parent"
-                    class="min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
-                    onClick={props.action.navigateParent}
-                  >
-                    {parentTitle()}
-                  </button>
-                  <span
-                    data-slot="session-title-separator"
-                    class="-translate-y-[0.5px] pl-2 pr-1 text-[11px] font-medium text-v2-text-text-faint"
-                    aria-hidden="true"
-                  >
-                    /
-                  </span>
-                </Show>
-                <Show when={childTitle() || title.editing}>
+        <Show when={!props.hideHeader}>
+          <SessionTitleHeader>
+            <div class="h-12 w-full flex items-center justify-between gap-2">
+              <div class="flex items-center gap-1 min-w-0 flex-1">
+                <div class="flex items-center min-w-0 flex-1 w-full">
                   <Show
-                    when={title.editing}
+                    when={workspaceSession()}
                     fallback={
-                      <h1
-                        data-slot="session-title-child"
-                        class="truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover"
-                        onClick={openTitleEditor}
-                      >
-                        {childTitle()}
-                      </h1>
+                      <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
+                        <Show when={showProjectIcon()} fallback={<Icon name="monitor" />}>
+                          {projectAvatar()}
+                        </Show>
+                      </span>
                     }
                   >
-                    <InlineInput
-                      ref={(el) => {
-                        titleRef = el
-                      }}
-                      data-slot="session-title-child"
-                      dir="auto"
-                      value={title.draft}
-                      disabled={props.pending.rename()}
-                      class="block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base field-sizing-content self-start rounded-[6px] px-2 py-1"
-                      style={{
-                        "--inline-input-shadow": "none",
-                        "text-align": "start",
-                      }}
-                      onInput={(event) => setTitle("draft", event.currentTarget.value)}
-                      onKeyDown={(event) => {
-                        event.stopPropagation()
-                        if (event.isComposing || event.keyCode === 229) return
-                        if (event.key === "Enter") {
-                          event.preventDefault()
-                          void saveTitleEditor()
-                          return
-                        }
-                        if (event.key === "Escape") {
-                          event.preventDefault()
-                          closeTitleEditor()
-                        }
-                      }}
-                      onBlur={() => void saveTitleEditor()}
-                    />
-                  </Show>
-                </Show>
-              </div>
-            </div>
-            <Show when={sessionID()} keyed>
-              {(id) => (
-                <div class="shrink-0 flex items-center gap-2">
-                  <SessionContextUsage placement="bottom" />
-                  <Show when={!parentID() && project()}>
-                    {(project) => (
-                      <Popover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
-                        <Popover.Trigger
-                          as={IconButton}
-                          icon={<Icon name="window-analytics" />}
-                          variant="ghost-muted"
-                          size="large"
-                          state={summaryOpen() ? "pressed" : undefined}
-                          aria-label={language.t("session.summary.title")}
-                          aria-expanded={summaryOpen()}
-                        />
-                        <Popover.Portal>
-                          <Popover.Content class="z-50 border-0 bg-transparent p-0 outline-none">
-                            <SessionSummaryPanel
-                              project={project()}
-                              avatar={showProjectIcon() ? projectAvatar() : undefined}
-                              directory={sessionDirectory()}
-                              local={!workspaceSession()}
-                              branch={data.location.vcs.info({ directory: sdk().directory })?.branch.current}
-                              baseBranch={data.location.vcs.info({ directory: project().worktree })?.branch.current}
-                              diffs={sessionDiffs()}
-                              sessionID={id}
-                              moveEligible={props.workspaceMoveEligible}
-                              moveDismissed={workspaceSuggestionDismissed()}
-                              onMoveDismiss={() => setWorkspaceSuggestionDismissed(true)}
-                              onReview={() => {
-                                setSummary(false)
-                                props.onReview()
-                              }}
-                              backgroundTasks={props.background.tasks()}
-                            />
-                          </Popover.Content>
-                        </Popover.Portal>
-                      </Popover>
-                    )}
-                  </Show>
-                  <Show when={!parentID()}>
-                    <Menu
-                      gutter={6}
-                      placement="bottom-end"
-                      open={title.menuOpen}
-                      onOpenChange={(open) => {
-                        setTitle("menuOpen", open)
-                        if (open) return
-                      }}
+                    <Tooltip
+                      placement="bottom-start"
+                      value={sessionDirectory()}
+                      contentClass="max-w-[calc(100vw-32px)] break-all"
                     >
-                      <Menu.Trigger
-                        as={IconButton}
-                        icon={<Icon name="outline-dots" />}
-                        variant="ghost-muted"
-                        size="large"
-                        aria-label={language.t("common.moreOptions")}
-                        aria-expanded={title.menuOpen}
-                      />
-                      <Menu.Portal>
-                        <Menu.Content
-                          style={{ width: "120px", "min-width": "120px" }}
-                          onCloseAutoFocus={(event) => {
-                            if (title.pendingRename) {
-                              event.preventDefault()
-                              setTitle("pendingRename", false)
-                              openTitleEditor()
-                              return
-                            }
-                          }}
+                      <span
+                        tabIndex={0}
+                        aria-label={sessionDirectory()}
+                        classList={{
+                          "flex size-6 shrink-0 items-center justify-center": true,
+                          "text-v2-icon-icon-accent": !showProjectIcon(),
+                        }}
+                      >
+                        <Show when={showProjectIcon()} fallback={<Icon name="workspace-isolated" />}>
+                          {projectAvatar()}
+                        </Show>
+                      </span>
+                    </Tooltip>
+                  </Show>
+                  <Show when={parentID()}>
+                    <button
+                      type="button"
+                      data-slot="session-title-parent"
+                      class="min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
+                      onClick={props.action.navigateParent}
+                    >
+                      {parentTitle()}
+                    </button>
+                    <span
+                      data-slot="session-title-separator"
+                      class="-translate-y-[0.5px] pl-2 pr-1 text-[11px] font-medium text-v2-text-text-faint"
+                      aria-hidden="true"
+                    >
+                      /
+                    </span>
+                  </Show>
+                  <Show when={childTitle() || title.editing}>
+                    <Show
+                      when={title.editing}
+                      fallback={
+                        <h1
+                          data-slot="session-title-child"
+                          class="truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover"
+                          onClick={openTitleEditor}
                         >
-                          <Menu.Item
-                            onSelect={() => {
-                              setTitle("pendingRename", true)
-                              setTitle("menuOpen", false)
-                            }}
-                          >
-                            {language.t("common.rename")}
-                          </Menu.Item>
-                          <Menu.Item onSelect={() => void props.action.export(id)}>
-                            {language.t("common.export")}...
-                          </Menu.Item>
-                          {/* TODO: Need a session archive API. */}
-                          <Menu.Separator />
-                          <Menu.Item onSelect={() => props.action.showDelete(id)}>
-                            {language.t("common.delete")}...
-                          </Menu.Item>
-                        </Menu.Content>
-                      </Menu.Portal>
-                    </Menu>
+                          {childTitle()}
+                        </h1>
+                      }
+                    >
+                      <InlineInput
+                        ref={(el) => {
+                          titleRef = el
+                        }}
+                        data-slot="session-title-child"
+                        dir="auto"
+                        value={title.draft}
+                        disabled={props.pending.rename()}
+                        class="block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base field-sizing-content self-start rounded-[6px] px-2 py-1"
+                        style={{
+                          "--inline-input-shadow": "none",
+                          "text-align": "start",
+                        }}
+                        onInput={(event) => setTitle("draft", event.currentTarget.value)}
+                        onKeyDown={(event) => {
+                          event.stopPropagation()
+                          if (event.isComposing || event.keyCode === 229) return
+                          if (event.key === "Enter") {
+                            event.preventDefault()
+                            void saveTitleEditor()
+                            return
+                          }
+                          if (event.key === "Escape") {
+                            event.preventDefault()
+                            closeTitleEditor()
+                          }
+                        }}
+                        onBlur={() => void saveTitleEditor()}
+                      />
+                    </Show>
                   </Show>
                 </div>
-              )}
-            </Show>
-          </div>
-        </SessionTitleHeader>
+              </div>
+              <Show when={sessionID()} keyed>
+                {(id) => (
+                  <div class="shrink-0 flex items-center gap-2">
+                    <SessionContextUsage placement="bottom" />
+                    <Show when={!parentID() && project()}>
+                      {(project) => (
+                        <Popover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
+                          <Popover.Trigger
+                            as={IconButton}
+                            icon={<Icon name="window-analytics" />}
+                            variant="ghost-muted"
+                            size="large"
+                            state={summaryOpen() ? "pressed" : undefined}
+                            aria-label={language.t("session.summary.title")}
+                            aria-expanded={summaryOpen()}
+                          />
+                          <Popover.Portal>
+                            <Popover.Content class="z-50 border-0 bg-transparent p-0 outline-none">
+                              <SessionSummaryPanel
+                                project={project()}
+                                avatar={showProjectIcon() ? projectAvatar() : undefined}
+                                directory={sessionDirectory()}
+                                local={!workspaceSession()}
+                                branch={data.location.vcs.info({ directory: sdk().directory })?.branch.current}
+                                baseBranch={data.location.vcs.info({ directory: project().worktree })?.branch.current}
+                                diffs={sessionDiffs()}
+                                sessionID={id}
+                                moveEligible={props.workspaceMoveEligible}
+                                moveDismissed={workspaceSuggestionDismissed()}
+                                onMoveDismiss={() => setWorkspaceSuggestionDismissed(true)}
+                                onReview={() => {
+                                  setSummary(false)
+                                  props.onReview()
+                                }}
+                                backgroundTasks={props.background.tasks()}
+                              />
+                            </Popover.Content>
+                          </Popover.Portal>
+                        </Popover>
+                      )}
+                    </Show>
+                    <Show when={!parentID()}>
+                      <Menu
+                        gutter={6}
+                        placement="bottom-end"
+                        open={title.menuOpen}
+                        onOpenChange={(open) => {
+                          setTitle("menuOpen", open)
+                          if (open) return
+                        }}
+                      >
+                        <Menu.Trigger
+                          as={IconButton}
+                          icon={<Icon name="outline-dots" />}
+                          variant="ghost-muted"
+                          size="large"
+                          aria-label={language.t("common.moreOptions")}
+                          aria-expanded={title.menuOpen}
+                        />
+                        <Menu.Portal>
+                          <Menu.Content
+                            style={{ width: "120px", "min-width": "120px" }}
+                            onCloseAutoFocus={(event) => {
+                              if (title.pendingRename) {
+                                event.preventDefault()
+                                setTitle("pendingRename", false)
+                                openTitleEditor()
+                                return
+                              }
+                            }}
+                          >
+                            <Menu.Item
+                              onSelect={() => {
+                                setTitle("pendingRename", true)
+                                setTitle("menuOpen", false)
+                              }}
+                            >
+                              {language.t("common.rename")}
+                            </Menu.Item>
+                            <Menu.Item onSelect={() => void props.action.export(id)}>
+                              {language.t("common.export")}...
+                            </Menu.Item>
+                            {/* TODO: Need a session archive API. */}
+                            <Menu.Separator />
+                            <Menu.Item onSelect={() => props.action.showDelete(id)}>
+                              {language.t("common.delete")}...
+                            </Menu.Item>
+                          </Menu.Content>
+                        </Menu.Portal>
+                      </Menu>
+                    </Show>
+                  </div>
+                )}
+              </Show>
+            </div>
+          </SessionTitleHeader>
+        </Show>
       }
     />
   )

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

@@ -22,6 +22,7 @@ import {
   type JSX,
 } from "solid-js"
 import { createStore } from "solid-js/store"
+import { createMediaQuery } from "@solid-primitives/media"
 import type { createTimelineProjection } from "./projection"
 import { observeElementOffsetReconnectAware } from "./observe-element-offset"
 import { filterVirtualIndexes } from "./virtual-items"
@@ -73,6 +74,8 @@ type ViewProps = {
 
 export function createTimelineVirtualizer(input: Input) {
   const language = useLanguage()
+  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const topOffset = () => (input.showHeader() ? 64 : isDesktop() ? 0 : 16)
   const ownerSessionKey = input.sessionKey()
   const cached = cache.get(ownerSessionKey)
   const initialMeasurements = cached?.measurements
@@ -186,7 +189,7 @@ export function createTimelineVirtualizer(input: Input) {
     },
     scrollEndThreshold: 80,
     get scrollMargin() {
-      return input.showHeader() ? 64 : 0
+      return topOffset()
     },
     paddingEnd: 64,
     get rangeExtractor() {
@@ -446,7 +449,7 @@ export function createTimelineVirtualizer(input: Input) {
           data-timeline-key={rowProps.rowKey}
           style={{
             position: "absolute",
-            top: `${item().start - (input.showHeader() ? 64 : 0)}px`,
+            top: `${item().start - topOffset()}px`,
             left: "0",
             width: "100%",
             height: `${item().size}px`,
@@ -475,7 +478,11 @@ 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"
+        data-workspace-session={props.workspaceSession() ? "" : undefined}
+        data-local-session={!props.workspaceSession() ? "" : undefined}
+      >
         <div
           class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
           classList={{
@@ -516,7 +523,9 @@ export function createTimelineVirtualizer(input: Input) {
           class="relative min-w-0 w-full h-full"
           style={{ "--sticky-accordion-top": input.showHeader() ? "48px" : "0px" }}
         >
-          <Show when={input.showHeader()}>{props.header}</Show>
+          <Show when={input.showHeader()} fallback={<div aria-hidden="true" class="h-4 md:hidden" />}>
+            {props.header}
+          </Show>
           <div
             data-timeline-virtual-content
             ref={(element) => {

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

@@ -362,6 +362,22 @@ export const SettingsGeneral: Component<{
 
         <ReasoningModeSetting />
 
+        <SettingsRow
+          title={language.t("session.review.wrapLines")}
+          description={language.t("settings.general.row.mobileDiffWrap.description")}
+        >
+          <div data-action="settings-mobile-diff-wrap">
+            <Switch
+              aria-label={language.t("session.review.wrapLines")}
+              checked={settings.general.mobileDiffWrap()}
+              onChange={settings.general.setMobileDiffWrap}
+              hideLabel
+            >
+              {language.t("session.review.wrapLines")}
+            </Switch>
+          </div>
+        </SettingsRow>
+
         <SettingsRow
           title={language.t("settings.general.row.shellToolPartsExpanded.title")}
           description={language.t("settings.general.row.shellToolPartsExpanded.description")}

packages/app/src/settings/model.tsx

@@ -41,6 +41,7 @@ export interface Settings {
     editToolPartsExpanded: boolean
     showCustomAgents: boolean
     mobileTitlebarPosition: "top" | "bottom"
+    mobileDiffWrap: boolean
     terminalPlacement: TerminalPlacement
     followUpBehavior: FollowUpBehavior
   }
@@ -130,6 +131,7 @@ const defaultSettings: Settings = {
     editToolPartsExpanded: false,
     showCustomAgents: false,
     mobileTitlebarPosition: "top",
+    mobileDiffWrap: true,
     terminalPlacement: "side",
     followUpBehavior: "steer",
   },
@@ -268,6 +270,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setMobileTitlebarPosition(value: "top" | "bottom") {
           setStore("general", "mobileTitlebarPosition", value)
         },
+        mobileDiffWrap: withFallback(() => store.general?.mobileDiffWrap, defaultSettings.general.mobileDiffWrap),
+        setMobileDiffWrap(value: boolean) {
+          setStore("general", "mobileDiffWrap", value)
+        },
         terminalPlacement: withFallback(
           () => store.general?.terminalPlacement,
           defaultSettings.general.terminalPlacement,

packages/app/src/settings/settings.css

@@ -24,6 +24,13 @@
   min-width: 0;
 }
 
+@media (max-width: 767px) {
+  .settings-screen {
+    --settings-mobile-inner-inset: 8px;
+    padding-block: var(--settings-top-inset, var(--shell-top-inset, 8px)) var(--shell-bottom-inset, 8px);
+  }
+}
+
 .settings-screen
   > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
   > [data-slot="tabs-v2-list"] {
@@ -49,6 +56,7 @@
 
 .settings-screen .settings-tab-body {
   padding-inline: 0;
+  padding-bottom: var(--settings-bottom-inset, 0px);
 }
 
 .settings-nav {
@@ -59,6 +67,26 @@
   gap: 16px;
 }
 
+.settings-mobile-nav {
+  display: none;
+}
+
+.settings-mobile-menu-trigger {
+  min-width: 0;
+}
+
+.settings-mobile-menu-trigger > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-mobile-menu[data-component="menu-v2-content"] {
+  max-width: calc(100vw - 32px);
+  max-height: var(--kb-popper-content-available-height);
+  overflow-y: auto;
+}
+
 .settings-nav-footer {
   display: flex;
   flex-shrink: 0;
@@ -291,36 +319,6 @@
   background-color: var(--v2-background-bg-layer-01);
 }
 
-@media (max-width: 639px) {
-  .settings-screen .settings-nav {
-    width: 100%;
-  }
-
-  .settings-screen > .settings > .settings-panel {
-    padding-inline-end: 16px;
-  }
-
-  .settings-screen .settings-tab-header {
-    padding-top: 24px;
-  }
-
-  .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-    > [data-slot="tabs-v2-list"] {
-    width: 144px;
-    min-width: 144px;
-    padding-inline: 8px;
-  }
-
-  .settings-screen
-    > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-    > [data-slot="tabs-v2-list"] {
-    width: 160px;
-    min-width: 160px;
-    padding-block: 24px;
-    padding-inline: 12px;
-  }
-}
-
 @container settings-screen (min-width: 800px) and (max-width: 1047px) {
   .settings-screen > .settings {
     padding-inline: 24px;
@@ -337,25 +335,60 @@
 }
 
 @container settings-screen (max-width: 799px) {
-  .settings-screen .settings-nav {
-    width: 100%;
+  .settings-screen > .settings[data-component="tabs-v2"] {
+    flex-direction: column;
+  }
+
+  .settings-mobile-nav {
+    position: relative;
+    z-index: 11;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 8px var(--settings-mobile-inner-inset, 16px);
+    border-bottom: 0.5px solid var(--v2-border-border-muted);
+    background: var(--v2-background-bg-deep);
+  }
+
+  .settings-mobile-nav::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    height: 1px;
+    background: var(--v2-background-bg-deep);
+    pointer-events: none;
+  }
+
+  .settings-mobile-nav .settings-back {
+    flex-shrink: 0;
   }
 
   .settings-screen > .settings > .settings-panel {
-    padding-inline-end: 16px;
+    min-height: 0;
+    max-width: none;
+  }
+
+  .settings-screen .settings-tab-header,
+  .settings-screen .settings-tab-body {
+    padding-inline: var(--settings-mobile-inner-inset, 16px);
   }
 
   .settings-screen .settings-tab-header {
-    padding-top: 24px;
+    padding-top: 12px;
+  }
+
+  .settings-screen .settings-tab-title,
+  .settings-screen .settings-section-title {
+    line-height: var(--line-height-base);
   }
 
   .settings-screen
     > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
     > [data-slot="tabs-v2-list"] {
-    width: 160px;
-    min-width: 160px;
-    padding-block: 24px;
-    padding-inline: 12px;
+    display: none;
   }
 }
 
@@ -636,6 +669,15 @@
   gap: 0;
 }
 
+.settings-models [data-component="settings-row"] {
+  flex-wrap: nowrap;
+}
+
+.settings-models [data-slot="settings-row-control"] {
+  width: auto;
+  flex-shrink: 0;
+}
+
 .settings-models [data-slot="settings-row-title"] {
   min-width: 0;
   overflow: hidden;

packages/app/src/settings/shell.tsx

@@ -1,6 +1,18 @@
-import { Component, createEffect, createMemo, createSignal, onCleanup, onMount, startTransition } from "solid-js"
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Show,
+  onCleanup,
+  onMount,
+  startTransition,
+} from "solid-js"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Button } from "@opencode-ai/ui/button"
 import { useLanguage } from "@/runtime/i18n/language"
 import { usePlatform } from "@/runtime/platform/platform"
 import { SettingsGeneral } from "./general/general"
@@ -23,6 +35,25 @@ import { useCommand } from "@/shell/commands/command"
 import { useSettingsSurface } from "./surface"
 import "@/settings/settings.css"
 
+const sections = [
+  [
+    { value: "general", icon: "sliders", label: "settings.tab.preferences" },
+    { value: "appearance", icon: "appearance", label: "settings.general.section.appearance" },
+    { value: "notifications", icon: "notifications", label: "settings.tab.notifications" },
+    { value: "shortcuts", icon: "keyboard", label: "settings.tab.shortcuts" },
+  ],
+  [
+    { value: "servers", icon: "server", label: "status.popover.tab.servers" },
+    { value: "projects", icon: "folder", label: "settings.tab.projects" },
+    { value: "workspaces", icon: "workspace-isolated", label: "settings.tab.workspaces" },
+  ],
+  [
+    { value: "providers", icon: "providers", label: "settings.providers.title" },
+    { value: "models", icon: "models", label: "settings.models.title" },
+    { value: "extensions", icon: "extensions", label: "settings.tab.extensions" },
+  ],
+] as const
+
 export const SettingsScreen: Component<{
   defaultValue?: string
 }> = (props) => {
@@ -103,6 +134,45 @@ export const SettingsScreen: Component<{
         onChange={(value) => void startTransition(() => setTab(value))}
         class="settings"
       >
+        <div class="settings-mobile-nav">
+          <button type="button" class="settings-back" onClick={surface.close}>
+            <Icon name="arrow-left" size="small" class="settings-back-icon" />
+            <span>{language.t("settings.backToApp")}</span>
+          </button>
+          <Menu placement="bottom-end" gutter={8}>
+            <Menu.Trigger as={Button} size="normal" variant="outline" class="settings-mobile-menu-trigger">
+              <span>
+                {language.t(
+                  sections.flat().find((section) => section.value === tab())?.label ?? "settings.tab.preferences",
+                )}
+              </span>
+              <Icon name="chevron-down" size="small" />
+            </Menu.Trigger>
+            <Menu.Portal>
+              <Menu.Content class="settings-mobile-menu" onEscapeKeyDown={(event) => event.stopPropagation()}>
+                <Menu.RadioGroup value={tab()} onChange={(value) => void startTransition(() => setTab(value))}>
+                  <For each={sections}>
+                    {(group, index) => (
+                      <>
+                        <Show when={index() > 0}>
+                          <Menu.Separator />
+                        </Show>
+                        <For each={group}>
+                          {(section) => (
+                            <Menu.RadioItem value={section.value} closeOnSelect>
+                              <Icon name={section.icon} />
+                              {language.t(section.label)}
+                            </Menu.RadioItem>
+                          )}
+                        </For>
+                      </>
+                    )}
+                  </For>
+                </Menu.RadioGroup>
+              </Menu.Content>
+            </Menu.Portal>
+          </Menu>
+        </div>
         <Tabs.List>
           <div class="settings-nav">
             <button type="button" class="settings-back" onClick={surface.close}>
@@ -110,57 +180,20 @@ export const SettingsScreen: Component<{
               <span>{language.t("settings.backToApp")}</span>
             </button>
             <div class="flex flex-col gap-4 w-full">
-              {/* Group 1: Preferences */}
-              <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="general">
-                  <Icon name="sliders" />
-                  {language.t("settings.tab.preferences")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="appearance">
-                  <Icon name="appearance" />
-                  {language.t("settings.general.section.appearance")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="notifications">
-                  <Icon name="notifications" />
-                  {language.t("settings.tab.notifications")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="shortcuts">
-                  <Icon name="keyboard" />
-                  {language.t("settings.tab.shortcuts")}
-                </Tabs.Trigger>
-              </div>
-
-              {/* Group 2: Environment & Workspaces */}
-              <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="servers">
-                  <Icon name="server" />
-                  {language.t("status.popover.tab.servers")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="projects">
-                  <Icon name="folder" />
-                  {language.t("settings.tab.projects")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="workspaces">
-                  <Icon name="workspace-isolated" />
-                  {language.t("settings.tab.workspaces")}
-                </Tabs.Trigger>
-              </div>
-
-              {/* Group 3: Capabilities & Extensions */}
-              <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="providers">
-                  <Icon name="providers" />
-                  {language.t("settings.providers.title")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="models">
-                  <Icon name="models" />
-                  {language.t("settings.models.title")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="extensions">
-                  <Icon name="extensions" />
-                  {language.t("settings.tab.extensions")}
-                </Tabs.Trigger>
-              </div>
+              <For each={sections}>
+                {(group) => (
+                  <div class="flex flex-col gap-1 w-full">
+                    <For each={group}>
+                      {(section) => (
+                        <Tabs.Trigger value={section.value}>
+                          <Icon name={section.icon} />
+                          {language.t(section.label)}
+                        </Tabs.Trigger>
+                      )}
+                    </For>
+                  </div>
+                )}
+              </For>
             </div>
           </div>
           <div class="settings-nav-footer">

packages/app/src/shell/mobile-drawer.css

@@ -0,0 +1,90 @@
+[data-slot="mobile-drawer-overlay"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--v2-overlay-simple-overlay-scrim);
+  animation: mobile-drawer-backdrop-in 240ms ease-out;
+}
+
+[data-slot="mobile-drawer-overlay"]:is([data-closing], [data-closed]) {
+  animation: mobile-drawer-backdrop-out 200ms ease-in forwards;
+}
+
+[data-slot="mobile-drawer-content"] {
+  box-sizing: border-box;
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  max-height: min(75dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px));
+  padding: 0 12px max(12px, env(safe-area-inset-bottom, 0px));
+  padding-left: max(12px, env(safe-area-inset-left, 0px));
+  padding-right: max(12px, env(safe-area-inset-right, 0px));
+  border-radius: 16px 16px 0 0;
+  background: var(--v2-background-bg-deep);
+  color: var(--v2-text-text-base);
+  box-shadow: var(--v2-elevation-overlay);
+  outline: none;
+  app-region: no-drag;
+}
+
+[data-slot="mobile-drawer-content"][data-transitioning] {
+  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+[data-slot="mobile-drawer-content"][data-closing] {
+  transition-duration: 200ms;
+}
+
+[data-slot="mobile-drawer-content"][data-closed] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-slot="mobile-drawer-handle"] {
+  display: flex;
+  height: 28px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+}
+
+[data-slot="mobile-drawer-handle"] span {
+  width: 32px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--v2-border-border-strong);
+}
+
+@keyframes mobile-drawer-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mobile-drawer-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="mobile-drawer-content"][data-transitioning],
+  [data-slot="mobile-drawer-content"][data-closing] {
+    transition: none;
+  }
+
+  [data-slot="mobile-drawer-overlay"],
+  [data-slot="mobile-drawer-overlay"]:is([data-closing], [data-closed]) {
+    animation: none;
+  }
+}

packages/app/src/shell/mobile-drawer.tsx

@@ -0,0 +1,47 @@
+import Drawer from "@corvu/drawer"
+import type { ParentProps } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import "./mobile-drawer.css"
+
+export function MobileDrawer(
+  props: ParentProps<{
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onContentPresentChange?: (present: boolean) => void
+    returnFocus?: () => HTMLElement | undefined
+    closeOnOutsideFocus?: boolean
+  }>,
+) {
+  return (
+    <Drawer
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      onContentPresentChange={props.onContentPresentChange}
+      side="bottom"
+      finalFocusEl={props.returnFocus?.()}
+      closeOnOutsideFocus={props.closeOnOutsideFocus}
+    >
+      {props.children}
+    </Drawer>
+  )
+}
+
+export const MobileDrawerTrigger = Drawer.Trigger
+
+export function MobileDrawerContent(props: ParentProps) {
+  const language = useLanguage()
+  return (
+    <Drawer.Portal forceMount>
+      <Drawer.Overlay data-slot="mobile-drawer-overlay" />
+      <Drawer.Content forceMount data-slot="mobile-drawer-content" dir={language.direction()}>
+        <div data-slot="mobile-drawer-handle" aria-hidden="true">
+          <span />
+        </div>
+        {props.children}
+      </Drawer.Content>
+    </Drawer.Portal>
+  )
+}
+
+export const MobileDrawerLabel = Drawer.Label
+export const MobileDrawerClose = Drawer.Close

packages/app/src/shell/mobile-panel-drawer.css

@@ -0,0 +1,34 @@
+[data-slot="mobile-panel"] {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+[data-slot="mobile-panel-header"] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-inline-start: 8px;
+  padding-block-end: 8px;
+}
+
+[data-slot="mobile-panel-header"] h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 530;
+  line-height: var(--line-height-base);
+}
+
+[data-slot="mobile-panel-close"][data-component="button-v2"] {
+  height: 44px;
+  flex-shrink: 0;
+}
+
+[data-slot="mobile-panel-content"] {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}

packages/app/src/shell/mobile-panel-drawer.tsx

@@ -0,0 +1,42 @@
+import type { ParentProps } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { useLanguage } from "@/runtime/i18n/language"
+import { MobileDrawer, MobileDrawerClose, MobileDrawerContent, MobileDrawerLabel } from "./mobile-drawer"
+import "./mobile-panel-drawer.css"
+
+export function MobilePanelDrawer(
+  props: ParentProps<{
+    title: string
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    returnFocus?: () => HTMLElement | undefined
+  }>,
+) {
+  const language = useLanguage()
+  return (
+    <MobileDrawer
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      returnFocus={props.returnFocus}
+      // Menu focus handoff must not dismiss the drawer during its opening transition.
+      closeOnOutsideFocus={false}
+    >
+      <MobileDrawerContent>
+        <div data-slot="mobile-panel" data-corvu-no-drag>
+          <div data-slot="mobile-panel-header">
+            <MobileDrawerLabel>{props.title}</MobileDrawerLabel>
+            <MobileDrawerClose
+              as={Button}
+              variant="ghost"
+              data-slot="mobile-panel-close"
+              aria-label={language.t("common.close")}
+            >
+              {language.t("common.close")}
+            </MobileDrawerClose>
+          </div>
+          <div data-slot="mobile-panel-content">{props.children}</div>
+        </div>
+      </MobileDrawerContent>
+    </MobileDrawer>
+  )
+}

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

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

packages/app/src/shell/shell.tsx

@@ -23,6 +23,7 @@ export default function Layout(props: ParentProps) {
     tabsMount: undefined as HTMLElement | undefined,
   })
   const verticalTabs = () => preferences.appearance.tabLayout() === "vertical" && !mobile()
+  const bottomTitlebar = () => mobile() && preferences.general.mobileTitlebarPosition() === "bottom"
 
   const update: TitlebarUpdate = {
     get version() {
@@ -41,15 +42,13 @@ export default function Layout(props: ParentProps) {
       <div
         class="relative bg-v2-background-bg-deep flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text"
         style={{
-          "padding-top": "env(safe-area-inset-top, 0px)",
-          "padding-bottom": "env(safe-area-inset-bottom, 0px)",
           // Native Windows chrome supplies the gap; retain paint clearance for the panels' outer outlines.
-          "--shell-top-inset":
-            platform.platform === "desktop" &&
-            platform.os === "windows" &&
-            !(mobile() && preferences.general.mobileTitlebarPosition() === "bottom")
+          "--shell-top-inset": bottomTitlebar()
+            ? "max(0px, calc(8px - env(safe-area-inset-top, 0px)))"
+            : platform.platform === "desktop" && platform.os === "windows"
               ? "1px"
               : "8px",
+          "--shell-bottom-inset": bottomTitlebar() ? "8px" : "max(0px, calc(8px - env(safe-area-inset-bottom, 0px)))",
         }}
       >
         <Titlebar
@@ -66,8 +65,11 @@ 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 pb-2 pt-[var(--shell-top-inset,8px)]"
-              style={{ width: `${state.tabsWidth}px` }}
+              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]"
+              style={{
+                width: `${state.tabsWidth}px`,
+                "padding-bottom": "max(8px, env(safe-area-inset-bottom, 0px))",
+              }}
             >
               <ResizeHandle
                 class="-end-2"
@@ -80,7 +82,15 @@ export default function Layout(props: ParentProps) {
             </aside>
           </Show>
           {/* Size containment collapses percentage-height descendants in WebKit. */}
-          <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-content">
+          <main
+            class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-content"
+            style={{
+              "padding-top": bottomTitlebar() ? "env(safe-area-inset-top, 0px)" : "0px",
+              "padding-bottom": bottomTitlebar() || settings.store.open ? "0px" : "env(safe-area-inset-bottom, 0px)",
+              "--settings-bottom-inset": bottomTitlebar() ? "40px" : "env(safe-area-inset-bottom, 0px)",
+              "--settings-top-inset": mobile() && !bottomTitlebar() ? "0px" : "var(--shell-top-inset, 8px)",
+            }}
+          >
             <div
               class="flex size-full min-h-0 min-w-0 flex-col"
               hidden={settings.store.open}

packages/app/src/shell/state/layout.tsx

@@ -59,6 +59,16 @@ export type HomeProjectSelection = { server: ServerConnection.Key; directory?: s
 export type ReviewDiffStyle = "unified" | "split"
 export type ReviewChangeMode = "git" | "branch" | "turn"
 export type ReviewPanelSource = "context-button" | "other"
+export type TabPanes = {
+  terminalOpened: Accessor<boolean>
+  setTerminalOpened(opened: boolean): void
+  terminalHeight: Accessor<number | undefined>
+  setTerminalHeight(height: number): void
+  reviewOpened: Accessor<boolean>
+  setReviewOpened(opened: boolean): void
+  sessionWidth: Accessor<number | undefined>
+  setSessionWidth(width: number): void
+}
 
 export type LayoutRoute =
   | { type: "home" }
@@ -508,7 +518,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           return message
         },
       },
-      view(sessionKey: string | Accessor<string>) {
+      view(sessionKey: string | Accessor<string>, panes?: TabPanes) {
         const key = createSessionKeyReader(sessionKey, ensureKey)
         const s = createMemo(() => store.sessionView[key()] ?? { scroll: {} })
         const reviewMode = createMemo(() => {
@@ -519,11 +529,24 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           const file = s().reviewFile
           if (typeof file === "string") return file
         })
-        const terminalOpened = createMemo(() => store.terminal?.opened ?? false)
-        const reviewPanelOpened = createMemo(() => store.review?.panelOpened ?? DEFAULT_REVIEW_PANEL_OPENED)
+        const terminalOpened = panes?.terminalOpened ?? createMemo(() => store.terminal?.opened ?? false)
+        const terminalHeight = createMemo(() =>
+          panes
+            ? (panes.terminalHeight() ?? DEFAULT_TERMINAL_HEIGHT)
+            : (store.terminal?.height ?? DEFAULT_TERMINAL_HEIGHT),
+        )
+        const reviewPanelOpened =
+          panes?.reviewOpened ?? createMemo(() => store.review?.panelOpened ?? DEFAULT_REVIEW_PANEL_OPENED)
+        const sessionWidth = createMemo(() =>
+          panes ? (panes.sessionWidth() ?? DEFAULT_SESSION_WIDTH) : store.session.width,
+        )
         const reviewPanelSource = createMemo(() => (reviewPanelOpened() ? ephemeral.reviewPanelSource : "other"))
 
         function setTerminalOpened(next: boolean) {
+          if (panes) {
+            panes.setTerminalOpened(next)
+            return
+          }
           const current = store.terminal
           if (!current) {
             setStore("terminal", { height: DEFAULT_TERMINAL_HEIGHT, opened: next })
@@ -537,6 +560,13 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
         function setReviewPanelOpened(next: boolean, source: ReviewPanelSource) {
           const nextSource = next ? source : "other"
+          if (panes) {
+            batch(() => {
+              panes.setReviewOpened(next)
+              setEphemeral("reviewPanelSource", nextSource)
+            })
+            return
+          }
           const current = store.review
           if (!current) {
             batch(() => {
@@ -566,6 +596,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           },
           terminal: {
             opened: terminalOpened,
+            height: terminalHeight,
+            resize(height: number) {
+              if (panes) {
+                panes.setTerminalHeight(height)
+                return
+              }
+              setStore("terminal", "height", height)
+            },
             open() {
               setTerminalOpened(true)
             },
@@ -579,6 +617,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           reviewPanel: {
             opened: reviewPanelOpened,
             source: reviewPanelSource,
+            width: sessionWidth,
+            resize(width: number) {
+              if (panes) {
+                panes.setSessionWidth(width)
+                return
+              }
+              setStore("session", "width", width)
+            },
             open(source: ReviewPanelSource = "other") {
               setReviewPanelOpened(true, source)
             },

packages/app/src/shell/status/body.tsx

@@ -20,7 +20,7 @@ const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   )
 }
 
-export function StatusPopoverBody(props: { shown: boolean }) {
+export function StatusPopoverBody(props: { shown: boolean; embedded?: boolean }) {
   const data = useData()
   const sdk = useWorkspaceLocation()
   const serverSDK = useServerSDK()
@@ -42,7 +42,13 @@ export function StatusPopoverBody(props: { shown: boolean }) {
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
 
   return (
-    <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
+    <div
+      class="flex items-center gap-1 rounded-xl"
+      classList={{
+        "w-[360px] shadow-[var(--shadow-lg-border-base)]": !props.embedded,
+        "w-full min-w-0": props.embedded,
+      }}
+    >
       <Tabs
         aria-label={language.t("status.popover.ariaLabel")}
         class="tabs bg-background-strong rounded-xl overflow-hidden"

packages/app/src/shell/status/status-drawer.css

@@ -0,0 +1,9 @@
+[data-slot="mobile-status-loading"] {
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  justify-content: center;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  line-height: var(--line-height-base);
+}

packages/app/src/shell/status/status-drawer.tsx

@@ -0,0 +1,36 @@
+import { lazy, Suspense } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { MobilePanelDrawer } from "../mobile-panel-drawer"
+import "./status-drawer.css"
+
+const Body = lazy(async () => {
+  const { StatusPopoverBody } = await import("./body")
+  return { default: StatusPopoverBody }
+})
+
+export function StatusDrawer(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  returnFocus?: () => HTMLElement | undefined
+}) {
+  const language = useLanguage()
+
+  return (
+    <MobilePanelDrawer
+      title={language.t("status.popover.trigger")}
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      returnFocus={props.returnFocus}
+    >
+      <Suspense
+        fallback={
+          <div data-slot="mobile-status-loading" role="status">
+            {language.t("common.loading")}
+          </div>
+        }
+      >
+        <Body shown={props.open} embedded />
+      </Suspense>
+    </MobilePanelDrawer>
+  )
+}

packages/app/src/shell/tabs/tabs.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test"
 import { createRoot, getOwner, onCleanup } from "solid-js"
 import { createTabMemory } from "./memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed"
-import { sessionIDHasOpenTab, tabHref, tabKey, type SessionTab, type Tab } from "./tabs"
+import { findSessionTab, sessionIDHasOpenTab, tabHref, tabKey, type SessionTab, type Tab } from "./tabs"
 import { migrateTabs } from "./migration"
 import type { ServerConnection } from "@/runtime/server/registry"
 
@@ -48,8 +48,12 @@ test("session tab identity stays rooted while its href follows the child route",
 })
 
 test("finds open root and routed session tabs", () => {
-  const tabs = [{ ...sessionTab("root"), routeSessionId: "child" }]
+  const tab = { ...sessionTab("root"), routeSessionId: "child" }
+  const tabs = [tab]
 
+  expect(findSessionTab(tabs, server, "root")).toBe(tab)
+  expect(findSessionTab(tabs, server, "child")).toBe(tab)
+  expect(findSessionTab(tabs, server, "closed")).toBeUndefined()
   expect(sessionIDHasOpenTab(tabs, server, "root")).toBe(true)
   expect(sessionIDHasOpenTab(tabs, server, "child")).toBe(true)
   expect(sessionIDHasOpenTab(tabs, server, "closed")).toBe(false)

packages/app/src/shell/tabs/tabs.tsx

@@ -46,6 +46,10 @@ export type TabInfo = {
   directory?: string
 }
 
+export type TabPane = "terminal" | "review"
+export type TabPaneSize = "terminalHeight" | "sessionWidth"
+type TabPaneState = Partial<Record<TabPane, boolean> & Record<TabPaneSize, number>>
+
 type RecentTab = {
   key?: string
 }
@@ -62,8 +66,8 @@ export function sessionHasOpenTab(tabs: Tab[], server: ServerConnection.Key, ses
   return sessionIDHasOpenTab(tabs, server, session.id)
 }
 
-export function sessionIDHasOpenTab(tabs: Tab[], server: ServerConnection.Key, sessionID: string) {
-  return tabs.some(
+export function findSessionTab(tabs: Tab[], server: ServerConnection.Key, sessionID: string) {
+  return tabs.find(
     (tab) =>
       tab.type === "session" &&
       tab.server === server &&
@@ -71,6 +75,10 @@ export function sessionIDHasOpenTab(tabs: Tab[], server: ServerConnection.Key, s
   )
 }
 
+export function sessionIDHasOpenTab(tabs: Tab[], server: ServerConnection.Key, sessionID: string) {
+  return !!findSessionTab(tabs, server, sessionID)
+}
+
 export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
   name: "Tabs",
   gate: false,
@@ -89,6 +97,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       Persist.window("tabs.info"),
       createStore<Record<string, TabInfo>>({}),
     )
+    const [panes, setPanes, , panesReady] = persisted(
+      Persist.window("tabs.panes"),
+      createStore<Record<string, TabPaneState>>({}),
+    )
     const [closed, setClosed, , closedReady] = persisted(Persist.window("tabs.closed"), createStore<ClosedTab[]>([]))
     const [pending, setPending] = createStore<Record<string, PendingSession | undefined>>({})
 
@@ -141,6 +153,15 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       )
     }
 
+    const removePanes = (key: string) => {
+      if (!panes[key]) return
+      setPanes(
+        produce((draft) => {
+          delete draft[key]
+        }),
+      )
+    }
+
     onCleanup(memory.dispose)
 
     createEffect(() => {
@@ -153,6 +174,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
             const key = tabKey(tab)
             memory.remove(key)
             removeInfo(key)
+            removePanes(key)
           }
         }
         setStore(() => next)
@@ -162,6 +184,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       for (const key of Object.keys(info)) {
         if (!keys.has(key)) removeInfo(key)
       }
+      if (!panesReady()) return
+      for (const key of Object.keys(panes)) {
+        if (!keys.has(key)) removePanes(key)
+      }
     })
 
     createEffect(() => {
@@ -198,6 +224,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       }).finally(() => closing.delete(key))
       memory.remove(key)
       removeInfo(key)
+      removePanes(key)
       if (draftID) removeDraftPersisted(draftID)
     }
 
@@ -491,8 +518,38 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       stateValue<T>(tab: Tab, name: string) {
         return memory.get<T>(tabKey(tab), name)
       },
+      pane(tab: Tab | undefined, pane: TabPane) {
+        if (!tab) return false
+        return panes[tabKey(tab)]?.[pane] ?? false
+      },
+      setPane(tab: Tab | undefined, pane: TabPane, opened: boolean) {
+        if (!tab) return
+        const key = tabKey(tab)
+        const current = panes[key]
+        if (current?.[pane] === opened) return
+        if (!current) {
+          setPanes(key, { [pane]: opened })
+          return
+        }
+        setPanes(key, pane, opened)
+      },
+      paneSize(tab: Tab | undefined, size: TabPaneSize) {
+        if (!tab) return
+        return panes[tabKey(tab)]?.[size]
+      },
+      setPaneSize(tab: Tab | undefined, size: TabPaneSize, value: number) {
+        if (!tab) return
+        const key = tabKey(tab)
+        const current = panes[key]
+        if (current?.[size] === value) return
+        if (!current) {
+          setPanes(key, { [size]: value })
+          return
+        }
+        setPanes(key, size, value)
+      },
     }
 
-    return { ...actions, store, info, ready, infoReady, recentReady }
+    return { ...actions, store, info, ready, infoReady, recentReady, panesReady }
   },
 })

packages/app/src/shell/titlebar/tab-nav.css

@@ -57,9 +57,10 @@
   margin-block: auto;
 }
 
-[data-titlebar-tab]:is(:hover, :has(> [data-slot="tab-link"]:focus-visible)):not([data-state="pressed"]):not(
-    [data-dragging="true"]
-  ):not([data-editing="true"]) {
+[data-titlebar-tab]:not(:where([data-slot="mobile-tabs-drawer"] *)):is(
+    :hover,
+    :has(> [data-slot="tab-link"]:focus-visible)
+  ):not([data-state="pressed"]):not([data-dragging="true"]):not([data-editing="true"]) {
   --tab-base: var(--v2-background-bg-layer-02);
   --tab-overlay: var(--v2-overlay-simple-overlay-hover);
 }
@@ -183,6 +184,36 @@
   display: none;
 }
 
+@media (hover: none) {
+  [data-titlebar-tab] [data-slot="tab-close"] {
+    background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
+  }
+
+  [data-titlebar-tab]:not([data-editing="true"]) [data-slot="tab-link"],
+  [data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]) [data-slot="tab-link"] {
+    --tab-title-fade-offset: 24px;
+    --tab-title-fade-direction: to right;
+    -webkit-mask-image: linear-gradient(
+      var(--tab-title-fade-direction),
+      black 0,
+      black calc(100% - var(--tab-title-fade-offset) - 16px),
+      transparent calc(100% - var(--tab-title-fade-offset)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      var(--tab-title-fade-direction),
+      black 0,
+      black calc(100% - var(--tab-title-fade-offset) - 16px),
+      transparent calc(100% - var(--tab-title-fade-offset)),
+      transparent 100%
+    );
+  }
+
+  [data-titlebar-tab]:dir(rtl) [data-slot="tab-link"] {
+    --tab-title-fade-direction: to left;
+  }
+}
+
 @container (max-width: 64px) {
   [data-titlebar-tab]:not([data-orientation="vertical"]) [data-titlebar-tab-link] {
     justify-content: center;
@@ -190,6 +221,17 @@
     padding-inline: 0;
   }
 
+  @media (hover: none) {
+    [data-titlebar-tab]:not([data-orientation="vertical"]):not([data-editing="true"]) [data-slot="tab-link"],
+    [data-titlebar-tab][data-title-overflow="true"]:not([data-orientation="vertical"]):not([data-editing="true"]):dir(
+        rtl
+      )
+      [data-slot="tab-link"] {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+  }
+
   [data-titlebar-tab]:not([data-orientation="vertical"]) [data-titlebar-tab-title] {
     display: none;
   }

packages/app/src/shell/titlebar/tab-popover.tsx

@@ -1,6 +1,7 @@
 import { HoverCard } from "@kobalte/core/hover-card"
 import { createSignal, Show, type JSXElement } from "solid-js"
 import { useLanguage } from "@/runtime/i18n/language"
+import { createMediaQuery } from "@solid-primitives/media"
 import "./tab-popover.css"
 
 // Initial hover delay before the preview appears, per design.
@@ -28,6 +29,7 @@ export function TabPreviewPopover(props: {
   orientation?: "horizontal" | "vertical"
 }) {
   const language = useLanguage()
+  const mobile = createMediaQuery("(max-width: 767px)")
   let triggerEl: HTMLDivElement | undefined
   // When opened during a rapid tab-hopping streak, this preview appears and
   // disappears instantly (no repeated enter/exit animation) — only the first,
@@ -46,7 +48,7 @@ export function TabPreviewPopover(props: {
 
   return (
     <HoverCard
-      open={props.open}
+      open={props.open && !mobile()}
       onOpenChange={handleOpenChange}
       openDelay={resolveOpenDelay()}
       closeDelay={CLOSE_DELAY}

packages/app/src/shell/titlebar/titlebar.css

@@ -2,6 +2,75 @@
   user-select: none;
 }
 
+[data-slot="mobile-tabs-trigger"][aria-expanded="true"] {
+  background:
+    linear-gradient(var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    var(--v2-background-bg-layer-02);
+}
+
+[data-action="mobile-tabs-home"][data-state="pressed"] {
+  background:
+    linear-gradient(var(--v2-overlay-simple-overlay-pressed), var(--v2-overlay-simple-overlay-pressed)),
+    var(--v2-background-bg-layer-02);
+}
+
+/* Keep the strip mounted for tab shortcuts and session metadata while collapsed. */
+[data-slot="mobile-tabs-drawer"] {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 8px;
+  margin-block-start: 8px;
+}
+
+[data-slot="mobile-tabs-drawer-list"] {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-slot="vertical-tabs"] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-slot="vertical-tabs-scroll"] {
+  min-height: 0;
+  overscroll-behavior: contain;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-titlebar-tab] {
+  min-height: 44px;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-titlebar-tab] [data-slot="tab-close"] {
+  inset-inline-end: 0;
+  width: 44px;
+  height: 44px;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-slot="tab-close"] button {
+  width: 44px;
+  height: 44px;
+  opacity: 1;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-titlebar-tab] [data-slot="tab-link"] {
+  padding-inline-end: 38px;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-titlebar-tab] [data-slot="tab-title"] {
+  color: var(--v2-text-text-base);
+  font-weight: 530;
+}
+
+[data-slot="mobile-tabs-drawer"] [data-titlebar-tab] [data-slot="tab-project"] {
+  color: var(--v2-text-text-faint);
+  font-weight: 440;
+}
+
 [data-slot="titlebar-tab-item"] a {
   outline: none;
 }

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

@@ -25,6 +25,11 @@ import type { ComposerState } from "@/composer/persistence"
 import "./titlebar.css"
 import { newTabTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { TitlebarRightMount } from "@/shell/titlebar/right-slot"
+import { MobileDrawer, MobileDrawerContent, MobileDrawerLabel, MobileDrawerTrigger } from "@/shell/mobile-drawer"
+import { sessionLabel } from "@/session/title"
+import { SessionTabAvatar } from "@/shell/layout/session-tab-avatar"
+import { projectForSession } from "@/shell/layout/helpers"
+import { useSettingsDialog } from "@/settings/command"
 
 const titlebarHeight = 36
 const windowsTitlebarHeight = 44 // Includes the content inset; matches the native Windows overlay.
@@ -47,6 +52,7 @@ export function Titlebar(props: {
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
+  const openSettings = useSettingsDialog()
   const navigate = useNavigate()
   const location = useLocation()
   const mobile = createMediaQuery("(max-width: 767px)")
@@ -138,6 +144,14 @@ export function Titlebar(props: {
         "order-last": bottom(),
       }}
       style={{
+        height:
+          platform.platform === "web"
+            ? bottom()
+              ? "calc(28px + max(8px, env(safe-area-inset-bottom, 0px)))"
+              : "calc(28px + max(8px, env(safe-area-inset-top, 0px)))"
+            : undefined,
+        "padding-top": bottom() ? "0px" : "env(safe-area-inset-top, 0px)",
+        "padding-bottom": bottom() ? "env(safe-area-inset-bottom, 0px)" : "0px",
         "min-height": minHeight(),
         // Keep native macOS traffic lights clear even when the desktop window is narrow.
         "padding-left": macTrafficLights() ? `${macTrafficLightsBaseWidth / zoom()}px` : 0,
@@ -336,116 +350,273 @@ export function Titlebar(props: {
               ].filter((v) => v !== undefined)
             })
 
+            const [mobileTabs, setMobileTabs] = createStore({ open: false, settings: false })
+            const currentProject = createMemo(() => {
+              const tab = currentTab()
+              const value = session()
+              if (!tab || !value) return
+              const conn = global.servers.list().find((item) => ServerConnection.key(item) === tab.server)
+              return projectForSession(value, conn ? global.ensureServerCtx(conn).projects.list() : [])
+            })
+            const currentTitle = () => {
+              const tab = currentTab()
+              if (!tab) return language.t("home.title")
+              if (tab.type === "draft") return language.t("command.session.new")
+              const value = session()
+              return value ? sessionLabel(value) : (tabs.info[tabKey(tab)]?.title ?? language.t("command.session.new"))
+            }
+            createEffect(() => {
+              path()
+              mobile()
+              setMobileTabs("open", false)
+            })
+
             return (
               <div
                 class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 px-2 md:pr-3"
                 classList={{
-                  "pt-2": !bottom() && !windows(),
-                  "pb-2": bottom(),
+                  "pt-[max(0px,calc(8px-env(safe-area-inset-top,0px)))]": !bottom() && !windows(),
+                  "pb-[max(0px,calc(8px-env(safe-area-inset-bottom,0px)))]": bottom(),
                   "md:pl-2": macTrafficLights(),
                   "md:pl-4": !macTrafficLights(),
                 }}
               >
-                <ChannelIndicator debugTools={props.debugTools} />
+                <Show when={!mobile()}>
+                  <ChannelIndicator debugTools={props.debugTools} />
+                </Show>
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} />
                 </Show>
-                <Tooltip
-                  placement="bottom"
-                  value={
-                    <>
-                      {language.t("home.title")}
-                      <Keybind keys={command.keybindParts("home.toggle")} variant="neutral" />
-                    </>
-                  }
-                  class="shrink-0"
-                >
-                  <IconButton
-                    type="button"
-                    variant="ghost-muted"
-                    size="large"
-                    class="!w-9 shrink-0"
-                    icon={<Icon name="grid-plus" />}
-                    state={layout.route().type === "home" ? "pressed" : undefined}
-                    onClick={toggleHome}
-                    aria-label={language.t("home.title")}
-                    aria-pressed={layout.route().type === "home"}
-                  />
-                </Tooltip>
+                <Show when={!mobile()}>
+                  <Tooltip
+                    placement="bottom"
+                    value={
+                      <>
+                        {language.t("home.title")}
+                        <Keybind keys={command.keybindParts("home.toggle")} variant="neutral" />
+                      </>
+                    }
+                    class="shrink-0"
+                  >
+                    <IconButton
+                      type="button"
+                      variant="ghost-muted"
+                      size="large"
+                      class="!w-9 shrink-0"
+                      icon={<Icon name="grid-plus" />}
+                      state={layout.route().type === "home" ? "pressed" : undefined}
+                      onClick={toggleHome}
+                      aria-label={language.t("home.title")}
+                      aria-pressed={layout.route().type === "home"}
+                    />
+                  </Tooltip>
+                </Show>
 
                 <Show
-                  when={props.verticalTabs}
+                  when={!mobile()}
                   fallback={
-                    <>
-                      <TitlebarTabStrip
-                        tabs={tabsStore}
-                        currentTab={currentTab()}
-                        onNavigate={(tab, el) => {
-                          tabs.select(tab)
-                          el?.scrollIntoView({ behavior: "instant" })
-                        }}
-                        onClose={(tab) => {
-                          const index = tabsStore.findIndex((item) => tabKey(item) === tabKey(tab))
-                          if (index !== -1) tabsStoreActions.closeTab(index)
-                        }}
-                        onReorder={(keys) => tabsStoreActions.reorder(keys)}
-                      />
-                      <Tooltip
-                        placement="bottom"
-                        value={
-                          <>
-                            {language.t("command.session.new")}
-                            <Keybind keys={newTabTooltipKeybind(command)} variant="neutral" />
-                          </>
-                        }
+                    <MobileDrawer
+                      open={mobileTabs.open}
+                      onOpenChange={(open) => setMobileTabs("open", open)}
+                      onContentPresentChange={(present) => {
+                        if (present || !mobileTabs.settings) return
+                        setMobileTabs("settings", false)
+                        openSettings()
+                      }}
+                    >
+                      <MobileDrawerTrigger
+                        data-slot="mobile-tabs-trigger"
+                        class="flex h-7 min-w-0 flex-1 items-center gap-2 rounded-[6px] px-2 text-[13px] leading-4 text-v2-text-text-base focus-visible:outline-none [app-region:no-drag]"
+                        aria-label={language.t("titlebar.tabs")}
                       >
-                        <IconButton
-                          type="button"
-                          variant="ghost-muted"
-                          size="large"
-                          class="shrink-0"
-                          icon={<Icon name="plus" />}
-                          onClick={openNewTab}
-                          aria-label={language.t("command.session.new")}
-                        />
-                      </Tooltip>
-                    </>
-                  }
-                >
-                  {(vertical) => (
-                    <Show when={vertical().mount} keyed>
-                      {(mount) => (
-                        <Portal mount={mount}>
-                          <TitlebarTabStrip
-                            orientation="vertical"
-                            tabs={tabsStore}
-                            currentTab={currentTab()}
-                            onNavigate={(tab, el) => {
-                              tabs.select(tab)
-                              el?.scrollIntoView({ behavior: "instant", block: "nearest" })
-                            }}
-                            onClose={(tab) => {
-                              const index = tabsStore.findIndex((item) => tabKey(item) === tabKey(tab))
-                              if (index !== -1) tabsStoreActions.closeTab(index)
-                            }}
-                            onReorder={(keys) => tabsStoreActions.reorder(keys)}
-                          />
+                        <Show when={currentTab()} fallback={<Icon name="grid-plus" class="shrink-0" />}>
+                          {(tab) => (
+                            <span
+                              data-slot="project-avatar-slot"
+                              class="flex size-4 shrink-0 items-center justify-center"
+                            >
+                              <Show
+                                when={session()}
+                                fallback={
+                                  tab().type === "draft" ? (
+                                    <Icon name="edit" />
+                                  ) : (
+                                    <span
+                                      class="block size-4 rounded-[3px] border border-v2-border-border-muted"
+                                      aria-hidden="true"
+                                    />
+                                  )
+                                }
+                              >
+                                {(value) => (
+                                  <SessionTabAvatar
+                                    project={currentProject()}
+                                    directory={value().location.directory}
+                                    sessionId={value().id}
+                                    server={tab().server}
+                                    revealProjectOnHover={false}
+                                  />
+                                )}
+                              </Show>
+                            </span>
+                          )}
+                        </Show>
+                        <span dir="auto" class="min-w-0 flex-1 truncate text-start">
+                          {currentTitle()}
+                        </span>
+                        <span class="shrink-0 text-v2-text-text-muted">{tabsStore.length}</span>
+                      </MobileDrawerTrigger>
+                      <MobileDrawerContent>
+                        <MobileDrawerLabel class="sr-only">{language.t("titlebar.tabs")}</MobileDrawerLabel>
+                        <div data-slot="mobile-tabs-drawer" data-corvu-no-drag>
+                          <div data-slot="mobile-tabs-drawer-list">
+                            <TitlebarTabStrip
+                              orientation="vertical"
+                              tabs={tabsStore}
+                              currentTab={currentTab()}
+                              onNavigate={(tab) => {
+                                tabs.select(tab)
+                                setMobileTabs("open", false)
+                              }}
+                              onClose={(tab) => {
+                                const index = tabsStore.findIndex((item) => tabKey(item) === tabKey(tab))
+                                if (index !== -1) tabsStoreActions.closeTab(index)
+                              }}
+                              onReorder={(keys) => tabsStoreActions.reorder(keys)}
+                            />
+                          </div>
                           <button
                             type="button"
-                            data-action="vertical-tabs-new-session"
-                            class="mt-1 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] px-1.5 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base"
-                            onClick={openNewTab}
-                            aria-label={language.t("command.session.new")}
+                            data-action="mobile-tabs-new-session"
+                            class="flex h-7 w-full shrink-0 items-center gap-2 rounded-[6px] px-2 text-[13px] leading-4 text-v2-text-text-base hover:bg-v2-background-bg-layer-02 focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02"
+                            onClick={() => {
+                              openNewTab()
+                              setMobileTabs("open", false)
+                            }}
                           >
                             <Icon name="plus" />
                             {language.t("command.session.new")}
                           </button>
-                        </Portal>
-                      )}
-                    </Show>
-                  )}
+                          <div class="flex shrink-0 flex-col gap-1 border-t border-v2-border-border-muted pt-2">
+                            <button
+                              type="button"
+                              data-action="mobile-tabs-home"
+                              data-state={layout.route().type === "home" ? "pressed" : undefined}
+                              aria-current={layout.route().type === "home" ? "page" : undefined}
+                              class="flex h-7 w-full items-center gap-2 rounded-[6px] px-2 text-[13px] leading-4 text-v2-text-text-faint data-[state=pressed]:text-v2-text-text-base focus-visible:outline-none"
+                              onClick={() => {
+                                if (layout.route().type !== "home") toggleHome()
+                                setMobileTabs("open", false)
+                              }}
+                            >
+                              <Icon name="grid-plus" />
+                              {language.t("home.title")}
+                            </button>
+                            <div class="flex items-center gap-1">
+                              <button
+                                type="button"
+                                data-action="mobile-tabs-settings"
+                                class="flex h-7 min-w-0 flex-1 items-center gap-2 rounded-[6px] px-2 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02"
+                                onClick={() => setMobileTabs({ open: false, settings: true })}
+                              >
+                                <Icon name="settings-gear" size="small" />
+                                {language.t("sidebar.settings")}
+                              </button>
+                              <button
+                                type="button"
+                                data-action="mobile-tabs-help"
+                                class="flex h-7 shrink-0 items-center gap-2 rounded-[6px] px-2 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02"
+                                onClick={() => {
+                                  setMobileTabs("open", false)
+                                  platform.openExternal("https://opencode.ai/desktop-feedback")
+                                }}
+                              >
+                                <Icon name="help" size="small" />
+                                {language.t("sidebar.help")}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </MobileDrawerContent>
+                    </MobileDrawer>
+                  }
+                >
+                  <Show
+                    when={props.verticalTabs}
+                    fallback={
+                      <>
+                        <TitlebarTabStrip
+                          tabs={tabsStore}
+                          currentTab={currentTab()}
+                          onNavigate={(tab, el) => {
+                            tabs.select(tab)
+                            el?.scrollIntoView({ behavior: "instant" })
+                          }}
+                          onClose={(tab) => {
+                            const index = tabsStore.findIndex((item) => tabKey(item) === tabKey(tab))
+                            if (index !== -1) tabsStoreActions.closeTab(index)
+                          }}
+                          onReorder={(keys) => tabsStoreActions.reorder(keys)}
+                        />
+                        <Tooltip
+                          placement="bottom"
+                          value={
+                            <>
+                              {language.t("command.session.new")}
+                              <Keybind keys={newTabTooltipKeybind(command)} variant="neutral" />
+                            </>
+                          }
+                        >
+                          <IconButton
+                            type="button"
+                            variant="ghost-muted"
+                            size="large"
+                            class="shrink-0"
+                            icon={<Icon name="plus" />}
+                            onClick={openNewTab}
+                            aria-label={language.t("command.session.new")}
+                          />
+                        </Tooltip>
+                      </>
+                    }
+                  >
+                    {(vertical) => (
+                      <Show when={vertical().mount} keyed>
+                        {(mount) => (
+                          <Portal mount={mount}>
+                            <TitlebarTabStrip
+                              orientation="vertical"
+                              tabs={tabsStore}
+                              currentTab={currentTab()}
+                              onNavigate={(tab, el) => {
+                                tabs.select(tab)
+                                el?.scrollIntoView({ behavior: "instant", block: "nearest" })
+                              }}
+                              onClose={(tab) => {
+                                const index = tabsStore.findIndex((item) => tabKey(item) === tabKey(tab))
+                                if (index !== -1) tabsStoreActions.closeTab(index)
+                              }}
+                              onReorder={(keys) => tabsStoreActions.reorder(keys)}
+                            />
+                            <button
+                              type="button"
+                              data-action="vertical-tabs-new-session"
+                              class="mt-1 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] px-1.5 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base"
+                              onClick={openNewTab}
+                              aria-label={language.t("command.session.new")}
+                            >
+                              <Icon name="plus" />
+                              {language.t("command.session.new")}
+                            </button>
+                          </Portal>
+                        )}
+                      </Show>
+                    )}
+                  </Show>
+                </Show>
+                <Show when={!mobile()}>
+                  <div class="flex-1" />
                 </Show>
-                <div class="flex-1" />
                 <TitlebarRight state={rightState()} />
               </div>
             )