fix(core): allow plan writes from home location

bun.lock

@@ -54,7 +54,6 @@
       "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",
@@ -1643,10 +1642,6 @@
 
     "@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=="],
@@ -2881,8 +2876,6 @@
 
     "@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=="],
@@ -5309,10 +5302,6 @@
 
     "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=="],
@@ -5327,8 +5316,6 @@
 
     "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=="],
@@ -6643,8 +6630,6 @@
 
     "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-JStMvgtXBA5GrhyBJ5FtdqD8LWkcaPA9NXef+c2xUzw=",
-    "aarch64-linux": "sha256-WQxF+yS0ZImW0KW620XnZUBsKAJDoJ1jLDOMBaXI2/E=",
-    "aarch64-darwin": "sha256-km7G6s45dfFdW3Z6lFrs4NohD+vmwN1vR8PmEL0WCto=",
-    "x86_64-darwin": "sha256-YFbkcHpuspgTp+B+th3IJ3cnu5C2gEUSiy3NDXpD8UA="
+    "x86_64-linux": "sha256-fG6VYtNC0pce4VM9po7vVucPuJul42yuuijTjNSr7rk=",
+    "aarch64-linux": "sha256-3TznrmNqdt25cOxia6vcdi/5qKaeyLPIsNXGYBSJNrs=",
+    "aarch64-darwin": "sha256-8Kmagb5tfECSWZNsIJgrRP1d3X5tuEoWLEWkV3UENZo=",
+    "x86_64-darwin": "sha256-mIV+mDwIGD02BNYZVi37sY4ls1T01N6z76eBtH0sKiA="
   }
 }

packages/ai/src/schema/messages.ts

@@ -9,6 +9,7 @@ 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>
@@ -55,6 +56,11 @@ 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"),
@@ -74,7 +80,6 @@ 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.Natural }),
+      Schema.Struct({ tail: Schema.Number }),
     ]),
   ),
   ttlSeconds: Schema.optional(Schema.Number),

packages/ai/test/schema.test.ts

@@ -21,7 +21,6 @@ import {
   QuotaExceededError,
   RateLimitError,
   RouteID,
-  ToolResultValue,
   TransportError,
   UnknownProviderError,
   Usage,
@@ -84,37 +83,6 @@ 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,33 +442,6 @@ 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/timeline-virtualizer.spec.ts

@@ -8,30 +8,6 @@ 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/mobile-files.spec.ts

@@ -1,110 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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-status-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-status-drag-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/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(changes).toHaveAttribute("aria-selected", "true")
+  await expect(page.getByRole("tab", { selected: true })).toHaveAccessibleName(/Files Changed/)
 
   const review = page.locator('[data-component="session-review"]')
   await expectAppVisible(review)

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("mobile drawer exposes close controls and navigates between tabs", async ({ page }) => {
+test("cramped tabs only show the close button for the active tab", async ({ page }) => {
   await page.setViewportSize({ width: 360, height: 720 })
   await mockServer(page)
   await page.addInitScript(
@@ -89,31 +89,26 @@ test("mobile drawer exposes close controls and navigates between tabs", async ({
   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"]')).toBeVisible()
+  await expect(tabB.locator('[data-slot="tab-close"]')).toBeHidden()
 
   await tabB.locator(`a[href="${hrefB}"]`).click()
 
   await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
-  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(tabA.locator('[data-slot="tab-close"]')).toBeHidden()
   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).toBeVisible()
+    await expect(tabA.locator("[data-titlebar-tab]")).toHaveAttribute("data-title-overflow", "true")
     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()
   }
 })
 
@@ -207,28 +202,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")).toBeHidden()
-  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
 
   await page.setViewportSize({ width: 800, height: 720 })
-  await expect(settings.getByRole("tablist")).toBeHidden()
-  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
+  await expect(version).toBeInViewport()
 
   await page.setViewportSize({ width: 390, height: 720 })
-  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
+  await expect(version).toBeInViewport()
   await settings.evaluate((element) => element.setAttribute("dir", "rtl"))
-  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
+  await expect(version).toBeInViewport()
+  await expect(version).toHaveCSS("direction", "ltr")
 
   await page.setViewportSize({ width: 390, height: 360 })
-  await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
+  await version.scrollIntoViewIfNeeded()
+  await expect(version).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="mobile-tabs-drawer"]')
+      .locator('[data-slot="titlebar-tabs"]')
       .locator(`[data-titlebar-tab-link][href="${href}"]`)
       .getByText(sessionA.title, { exact: true }),
   ).toBeVisible()
@@ -247,7 +242,7 @@ test("appearance experimental setting switches tab orientation", async ({ page }
   await expect(layout).toContainText("Vertical")
 })
 
-test("vertical tab preference uses the drawer on mobile", async ({ page }) => {
+test("vertical tab preference falls back to horizontal on mobile", async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 720 })
   await mockServer(page)
   await page.addInitScript(
@@ -264,8 +259,7 @@ test("vertical tab preference uses the drawer on mobile", async ({ page }) => {
   const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
   await page.goto(href)
 
-  await page.getByRole("button", { name: "Tabs", exact: true }).click()
-  const tabs = page.locator('[data-slot="mobile-tabs-drawer"]')
+  const tabs = page.locator('[data-slot="titlebar-tabs"]')
   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/utils/waits.ts

@@ -8,12 +8,6 @@ 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/package.json

@@ -56,7 +56,6 @@
     "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.tsx

@@ -114,10 +114,8 @@ export function ComposerEditor(props: ComposerEditorProps) {
       <form
         data-component="composer"
         data-dock-border-underlay={props.borderUnderlay ? "true" : undefined}
-        class="group/composer relative min-h-[96px] w-full overflow-clip rounded-xl"
+        class="group/composer relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
         classList={{
-          "bg-v2-background-bg-layer-01": props.borderUnderlay,
-          "bg-v2-background-bg-base": !props.borderUnderlay,
           "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
           "border border-v2-icon-icon-info border-dashed": state.drag === "active",
         }}

packages/app/src/entry.tsx

@@ -6,7 +6,6 @@ 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"
@@ -72,8 +71,6 @@ 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,
@@ -90,9 +87,7 @@ 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,14 +2,9 @@ import type { HomeProjectsController } from "./controller"
 import { HomeProjectsView } from "./view"
 import type { HomeScrollController } from "../scroll"
 
-export function HomeProjects(props: {
-  projects: HomeProjectsController
-  scroll: HomeScrollController
-  dropdown?: boolean
-}) {
+export function HomeProjects(props: { projects: HomeProjectsController; scroll: HomeScrollController }) {
   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,6 +1,5 @@
 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"
@@ -29,7 +28,6 @@ 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[]
@@ -66,81 +64,6 @@ 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,
@@ -148,77 +71,48 @@ function HomeProjectsPanel(props: HomeProjectsViewProps) {
   }
   return (
     <aside
-      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"
-          : `
+      class={`
         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)
       }}
     >
-      <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>
+      <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>
+      <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
         <Show
           when={props.servers.length > 1}
           fallback={
-            <div class={props.dropdown ? "" : "pr-3"}>
+            <div class="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 ${props.dropdown ? "gap-1" : "gap-4 pr-3"}`}>
+          <div class="flex min-w-0 flex-col gap-4 pr-3">
             <For each={props.servers}>
               {(item) => {
                 const projects = () => props.projectsForServer(item)
@@ -263,9 +157,7 @@ export function HomeUtilityNav(props: {
   language: ReturnType<typeof useLanguage>
 }) {
   return (
-    <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`}
-    >
+    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1 pr-3`}>
       <HomeProjectNavButton
         type="button"
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
@@ -619,7 +511,6 @@ 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,6 +1,4 @@
 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"
@@ -11,7 +9,6 @@ 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)
@@ -20,17 +17,12 @@ export function Home() {
   return (
     <div
       class={`
-        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]
+        mx-2 mb-2 mt-[var(--shell-top-inset,8px)] min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
         bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]
       `}
     >
-      <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="min-h-0 flex-1 [container-type:size]"
+        class="h-full [container-type:size]"
         thumbContainer={scroll.viewport.thumbTrack()}
         thumbHoverTarget={scroll.viewport.hoverTarget()}
         viewportRef={scroll.viewport.setViewport}
@@ -39,24 +31,20 @@ export function Home() {
       >
         <div
           class={`
-            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
+            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
           `}
         >
-          <Show when={!mobile()}>
-            <HomeProjects projects={projects} scroll={scroll} />
-          </Show>
+          <HomeProjects projects={projects} scroll={scroll} />
           <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

@@ -1,26 +0,0 @@
-@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,7 +15,6 @@ 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,
@@ -97,13 +96,10 @@ 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-1 pt-6 md:pb-3 lg:pt-12"
-        onWheel={props.onWheel}
-      >
+      <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 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-[68px] z-20 flex md:top-[84px] lg:top-[108px]">
+          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
             <Button
               data-action="home-new-session"
               variant="ghost-muted"
@@ -117,18 +113,18 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
           </div>
         </Show>
       </div>
-      <div class="pointer-events-none sticky top-[68px] z-40 h-0 -mr-3 md:top-[84px] lg:top-[108px]">
+      <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
         <div
           ref={props.onSetThumbTrack}
           data-component="home-session-scroll-track"
-          class="relative ml-auto h-[calc(100cqh-68px)] w-3 md:h-[calc(100cqh-84px)] lg:h-[calc(100cqh-108px)]"
+          class="relative ml-auto h-[calc(100cqh-84px)] w-3 lg:h-[calc(100cqh-108px)]"
         />
       </div>
-      <div class="-mr-3 min-h-[calc(100cqh-64px)] md:min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
+      <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
         <Show
           when={!props.loading}
           fallback={
-            <div class="pt-1 md:pt-3">
+            <div class="pt-3">
               <HomeSessionSkeleton label={props.language.t("common.loading")} />
             </div>
           }
@@ -142,7 +138,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
               />
             }
           >
-            <div ref={props.onSetContent} class="flex flex-col pt-1 pr-3 pb-16 md:pt-3">
+            <div ref={props.onSetContent} class="flex flex-col pt-3 pr-3 pb-16">
               {/* Index keeps group subtrees mounted when the group arrays are
                   rebuilt, so store updates cannot recreate rows mid-gesture. */}
               <Index each={props.groups}>
@@ -154,9 +150,7 @@ 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-2 md:pt-4 ${index === props.groups.length - 1 ? "" : "mb-6"}`}
-                    >
+                    <div class={`flex min-w-0 flex-col gap-px 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
@@ -241,11 +235,7 @@ 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",
-              "inset-inline-start": "-6px",
-              width: "calc(100% + 12px)",
-            }}
+            style={{ top: "-6px", left: "-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">
@@ -279,7 +269,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                       >
                         {props.language.t("home.sessions.search.sessions")}
                       </p>
-                      <ScrollView class="max-h-[min(20rem,40dvh)]" viewportRef={props.onSetSearchList}>
+                      <ScrollView class="max-h-80" viewportRef={props.onSetSearchList}>
                         <div class="flex flex-col gap-px pb-2">
                           <For each={props.searchResults}>
                             {(record) => (
@@ -301,7 +291,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
         </Show>
         <label
           class={`
-            relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 ps-3 pe-2
+            relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-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
           `}
@@ -385,7 +375,6 @@ 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={`
@@ -414,7 +403,7 @@ function HomeSessionSearchResultRow(
         record={props.record}
         revealProjectOnHover={!!showProjectName()}
       />
-      <div data-slot="home-session-labels" class="flex min-w-0 flex-1 items-center gap-1.5">
+      <div 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 />
@@ -434,8 +423,8 @@ function HomeSessionGroupHeader(props: {
     <div
       ref={props.onSetRef}
       class={`
-        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]
+        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]
       `}
       classList={{ "home-session-group-header z-[5]": !!props.elevated, "z-10": !props.elevated }}
     >
@@ -521,7 +510,6 @@ 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() }}
@@ -535,56 +523,51 @@ function HomeSessionRow(
       <Show
         when={!editor()}
         fallback={
-          <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"
-          >
+          <div class="flex h-10 min-w-0 w-full flex-1 items-center gap-2 py-3 pl-3 pr-10">
             <HomeSessionLeadingController
               server={props.server}
               isOpenTab={props.isOpenTab}
               record={props.record}
               revealProjectOnHover={false}
             />
-            <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={`
+            <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") {
-                    event.preventDefault()
-                    void saveEditor()
-                    return
-                  }
-                  if (event.key !== "Escape") return
+              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()
-                  closeEditor()
-                  requestAnimationFrame(() => rowButton()?.focus())
-                }}
-                onBlur={closeEditor}
-              />
-              <Show when={showProjectName()}>
-                <HomeSessionProjectName name={props.record.projectName} />
-              </Show>
-            </div>
+                  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>
           </div>
         }
       >
@@ -595,7 +578,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 ps-1.5 pe-3 md:ps-3 md:pe-10 text-start text-v2-text-text-muted [font-weight:530]
+            bg-transparent py-3 pl-3 pr-10 text-left 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
           `}
@@ -658,12 +641,10 @@ function HomeSessionRow(
             record={props.record}
             revealProjectOnHover={!!showProjectName()}
           />
-          <div data-slot="home-session-labels" class="contents">
-            <HomeSessionTitle title={title()} showProjectName={!!showProjectName()} />
-            <Show when={showProjectName()}>
-              <HomeSessionProjectName name={props.record.projectName} />
-            </Show>
-          </div>
+          <HomeSessionTitle title={title()} showProjectName={!!showProjectName()} />
+          <Show when={showProjectName()}>
+            <HomeSessionProjectName name={props.record.projectName} />
+          </Show>
         </button>
       </Show>
       <Menu
@@ -742,7 +723,6 @@ 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,
@@ -758,8 +738,6 @@ 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 }}
     >
@@ -801,7 +779,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 ps-1.5 pe-4 md:ps-4">
+      <div class="flex h-7 min-w-0 items-center justify-between px-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-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <NewSessionView composer={model} project={project} workspace={workspace} />
       </div>
     </div>

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

@@ -643,7 +643,6 @@ 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",
@@ -660,10 +659,6 @@ 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",
@@ -702,7 +697,6 @@ 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",
@@ -805,7 +799,6 @@ 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",
@@ -983,9 +976,7 @@ 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 at the bottom of the screen on mobile",
-  "settings.general.row.mobileDiffWrap.description":
-    "Wrap long lines in mobile diffs instead of scrolling horizontally",
+    "Place the title bar and session tabs at the bottom of the screen on mobile",
   "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

@@ -1,43 +0,0 @@
-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/session/composer/session-composer-region.tsx

@@ -11,7 +11,14 @@ 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: {
@@ -61,7 +68,10 @@ 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/session-context-tab.tsx

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

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

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

@@ -1,35 +0,0 @@
-[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

@@ -1,100 +0,0 @@
-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,10 +19,7 @@ export function SessionHeader() {
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
   const actions = createMemo<SessionHeaderActionsState>(() => ({
-    status:
-      isDesktop() && status()
-        ? { label: language.t("status.popover.trigger"), content: () => <StatusPopover /> }
-        : undefined,
+    status: 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,28 +36,6 @@ 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,10 +124,14 @@ export const createOpenReviewFile = (input: {
   return (path: string) => {
     batch(() => {
       input.showAllFiles()
-      input.loadFile(path)
-      const tab = input.tabForPath(path)
-      input.openTab(tab)
-      input.setActive(tab)
+      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()
     })
   }
 }

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

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

@@ -23,9 +23,6 @@ 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
@@ -125,7 +122,6 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
   createEffect(() => {
     props.diffs.length
     props.diffStyle
-    props.overflow
     if (!layout.ready()) return
     queueRestore()
   })
@@ -160,9 +156,6 @@ 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,137 +2,51 @@ 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 { 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 { Match, Show, Suspense, Switch } from "solid-js"
 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"
 
-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
-}) {
+export function SessionMobileTabs(props: { review: SessionReviewModel; compact?: boolean; bottom?: boolean }) {
   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 (
-    <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 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,
+        }}
       >
-        <Menu.Trigger
-          as={IconButton}
-          ref={(element: HTMLButtonElement) => {
-            trigger = element
+        <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,
           }}
-          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>
+          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>
   )
 }
 
@@ -174,22 +88,14 @@ 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-2 py-2 text-text-weak" />}
+        empty={<ReviewEmpty review={props.review} loadingClass="px-4 py-4 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}
@@ -200,11 +106,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: "[&_[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",
+          root: "pb-8 [&_[data-slot=session-review-list]]:pb-0",
+          header: "px-4 !h-16 !pb-4",
+          container: "px-4",
         }}
       />
     </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-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
+    <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
       <SessionPanelFrame raised>{props.children}</SessionPanelFrame>
     </div>
   )

packages/app/src/session/screen.tsx

@@ -1,23 +1,11 @@
-import {
-  ErrorBoundary,
-  Show,
-  Match,
-  Switch,
-  Suspense,
-  lazy,
-  createMemo,
-  createEffect,
-  createComputed,
-  on,
-} from "solid-js"
+import { ErrorBoundary, Show, Match, Switch, 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 { MessageTimeline, SessionSummaryPanel } from "@/session/timeline/message-timeline"
-import { useServer } from "@/runtime/server/current"
-import { projectForSession } from "@/shell/layout/helpers"
+import { useSettings } from "@/settings/model"
+import { MessageTimeline } from "@/session/timeline/message-timeline"
 import type { SessionModel } from "@/session/model"
 import { SESSION_PANEL_WIDTH_MIN } from "@/session/session-panel-width"
 import { SessionPanelFrame } from "@/session/session-frame"
@@ -26,25 +14,15 @@ import { useUsageExceededDialogs } from "./usage-exceeded-dialogs"
 import { SessionErrorFallback } from "./route-error"
 import { createSessionScreenLayout } from "./screen-layout"
 import { createSessionReview } from "./review/model"
-import { SessionDesktopReview, SessionMobileReview, SessionMobileViewTabs } from "./review/view"
-import { SessionContextTab } from "./files/session-context-tab"
+import { SessionDesktopReview, SessionMobileReview, SessionMobileTabs } from "./review/view"
 import { createSessionTimelineInteraction } from "./timeline/interaction"
 import { ActiveSessionComposerRegion, createActiveSessionRegion } from "./composer/region"
 import { SessionIdentityHeader } from "./session-identity-header"
 
-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 server = useServer()
-  const detailsProject = createMemo(() => {
-    const info = session.data.info()
-    return info ? projectForSession(info, server.ctx.sync.data.project) : undefined
-  })
+  const settings = useSettings()
   const isDesktop = session.isDesktop
   const screen = createSessionScreenLayout(session)
   const timeline = createSessionTimelineInteraction(session)
@@ -56,8 +34,6 @@ export function SessionScreen(props: { session: SessionModel }) {
     sideRegionPresent: false,
     sideReviewPresent: false,
     sideTerminalPresent: false,
-    mobileTerminalCached: false,
-    mobileMoveDismissed: false,
   })
   const [elements, setElements] = createStore<{
     side?: HTMLDivElement
@@ -65,7 +41,7 @@ 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(() => isDesktop() && screen.terminal.open() && screen.terminal.bottom())
+  const bottomTerminalVisible = createMemo(() => screen.terminal.open() && (!isDesktop() || screen.terminal.bottom()))
   const sidePresence = createPresence({
     show: sideVisible,
     element: () => elements.side ?? null,
@@ -91,7 +67,6 @@ 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(() => {
@@ -101,11 +76,6 @@ 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,
@@ -114,102 +84,36 @@ 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}>{mobileTabs()}</Show>
+      <Show when={!isDesktop() && !!session.identity.params.id && !mobileTabsBottom()}>
+        <SessionMobileTabs review={review} compact />
+      </Show>
       {/* Surface query errors without suspending session metadata while messages load. */}
       <Show when={timeline.resource.error}>
         {(error) => {
           throw error()
         }}
       </Show>
-      <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>
+      <div class="flex-1 min-h-0 overflow-hidden">
         <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={isDesktop() && !messagesReady()}>
+            <Show when={!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}
@@ -239,18 +143,21 @@ export function SessionScreen(props: { session: SessionModel }) {
         </Switch>
       </div>
 
-      <Show when={conversationVisible() ? session.identity.params.id : undefined} keyed>
+      <Show when={!review.mobile.changes() ? 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-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <div ref={screen.panel.ref} class="relative flex-1 min-h-0 flex flex-col md:flex-row gap-2">
           <div
             classList={{
@@ -393,7 +300,7 @@ export function SessionScreen(props: { session: SessionModel }) {
           </Show>
         </div>
 
-        <Show when={isDesktop() && (bottomTerminalPresence.present() || store.bottomTerminalCached)}>
+        <Show when={bottomTerminalPresence.present() || store.bottomTerminalCached}>
           <div
             ref={(element) => setElements("bottomTerminal", element)}
             data-slot="terminal-panel-presence"

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

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

@@ -38,14 +38,7 @@ type CachedTerminalSurface = {
 }
 
 export function TerminalPanel(
-  props: {
-    stacked?: boolean
-    fill?: boolean
-    framed?: boolean
-    present?: boolean
-    contentHeight?: string
-    embedded?: boolean
-  } = {},
+  props: { stacked?: boolean; fill?: boolean; framed?: boolean; present?: boolean; contentHeight?: string } = {},
 ) {
   const layout = useLayout()
   const terminal = useTerminal()
@@ -230,7 +223,6 @@ export function TerminalPanel(
       opened={opened()}
       present={present()}
       framed={props.framed}
-      embedded={props.embedded}
       desktop={isDesktop()}
       stacked={stacked()}
       height={panelHeight()}

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

@@ -7,7 +7,6 @@ export function TerminalSurface(
     opened: boolean
     present?: boolean
     framed?: boolean
-    embedded?: boolean
     desktop: boolean
     stacked: boolean
     height: string
@@ -27,7 +26,7 @@ export function TerminalSurface(
       id="terminal-panel"
       data-component="terminal-panel"
       data-opened={props.opened}
-      data-size-animated={!props.embedded && !props.resizing && (!props.desktop || props.stacked)}
+      data-size-animated={!props.resizing && (!props.desktop || props.stacked)}
       role="region"
       aria-label={props.label}
       aria-hidden={!props.opened}
@@ -38,14 +37,11 @@ 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.embedded && !props.resizing && (!props.desktop || props.stacked),
+        "will-change-[height]": !props.resizing && (!props.desktop || props.stacked),
       }}
       style={{ height: props.height, "--terminal-panel-height": props.contentHeight }}
     >
-      <div
-        classList={{ "md:hidden": !props.stacked, hidden: props.stacked || props.embedded }}
-        onPointerDown={props.onResizeStart}
-      >
+      <div classList={{ "md:hidden": !props.stacked, hidden: props.stacked }} onPointerDown={props.onResizeStart}>
         <ResizeHandle
           class="-top-1"
           direction="vertical"
@@ -61,7 +57,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 && !props.embedded,
+          "border-t border-border-weak-base": props.opened && !props.desktop,
           "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[]; mobile?: boolean }) {
+export function BackgroundWorkSummary(props: { tasks: BackgroundTask[] }) {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)
   const taskType = (task: BackgroundTask) => {
@@ -81,7 +81,7 @@ export function BackgroundWorkSummary(props: { tasks: BackgroundTask[]; mobile?:
   return (
     <Popover
       open={open()}
-      placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-end" : "left-end"}
+      placement={language.direction() === "rtl" ? "right-end" : "left-end"}
       gutter={4}
       onOpenChange={setOpen}
     >
@@ -126,7 +126,6 @@ export function BackgroundWorkSummary(props: { tasks: BackgroundTask[]; mobile?:
 
 function WorkspaceMoveAction(props: {
   variant: "inline" | "panel"
-  mobile?: boolean
   eligible: boolean
   sessionID: string
   project: Project
@@ -151,17 +150,9 @@ function WorkspaceMoveAction(props: {
         sessionID={props.sessionID}
         project={props.project}
         directory={props.directory}
-        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"}
+        placement={inline() ? "bottom-end" : language.direction() === "rtl" ? "right-start" : "left-start"}
+        gutter={inline() ? 4 : -22}
+        contentClass={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"
@@ -190,8 +181,7 @@ function WorkspaceMoveAction(props: {
   )
 }
 
-export function SessionSummaryPanel(props: {
-  mobile?: boolean
+function SessionSummaryPanel(props: {
   project: Project
   avatar?: JSX.Element
   directory: string
@@ -217,7 +207,7 @@ export 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={props.mobile ? "w-full" : "w-[280px]"}>
+    <div data-component="session-summary-panel" class="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 ?? (
@@ -227,23 +217,19 @@ export function SessionSummaryPanel(props: {
               variant={getProjectAvatarVariant(props.project.icon?.color)}
             />
           )}
-          <span dir="auto" class="min-w-0 flex-1 truncate text-v2-text-text-muted">
-            {displayName(props.project)}
-          </span>
+          <span 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={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-start" : "left-start"}
-          gutter={props.mobile ? 4 : -22}
+          placement={language.direction() === "rtl" ? "right-start" : "left-start"}
+          gutter={-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 dir="auto" class="min-w-0 flex-1 truncate text-start">
-            {location()}
-          </span>
+          <span 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}>
@@ -266,9 +252,7 @@ export function SessionSummaryPanel(props: {
               </span>
             }
           >
-            <span dir="auto" class="min-w-0 truncate">
-              {branch()}
-            </span>
+            <span class="min-w-0 truncate">{branch()}</span>
           </Show>
         </div>
         <button
@@ -288,13 +272,12 @@ export function SessionSummaryPanel(props: {
           </Show>
         </button>
         <Show when={props.backgroundTasks.length > 0}>
-          <BackgroundWorkSummary tasks={props.backgroundTasks} mobile={props.mobile} />
+          <BackgroundWorkSummary tasks={props.backgroundTasks} />
         </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}
@@ -308,7 +291,6 @@ export function SessionSummaryPanel(props: {
 }
 
 type MessageTimelineProps = {
-  hideHeader?: boolean
   session: TimelineSessionSource
   background: SessionBackground
   actions?: SessionUserActions
@@ -411,7 +393,7 @@ function MessageTimelineView(
     }),
   )
   const turnPadding = () => "px-4 md:px-5"
-  const showHeader = createMemo(() => !props.hideHeader && (props.data.showHeader() || workspaceSession()))
+  const showHeader = createMemo(() => props.data.showHeader() || workspaceSession())
   const pinned = createMemo(() => props.pinned)
   const messageByID = projection.messageByID
   const virtualized = createTimelineVirtualizer({
@@ -574,200 +556,198 @@ function MessageTimelineView(
       }}
       renderRow={(row, onSizeChange) => <rowRenderer.Row row={row} onSizeChange={onSizeChange} />}
       header={
-        <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">
+        <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={workspaceSession()}
+                    when={title.editing}
                     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>
+                      <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>
                     }
                   >
-                    <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>
+                    <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 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}
-                        >
-                          {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>
-              <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
+            </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="outline-dots" />}
+                          icon={<Icon name="window-analytics" />}
                           variant="ghost-muted"
                           size="large"
-                          aria-label={language.t("common.moreOptions")}
-                          aria-expanded={title.menuOpen}
+                          state={summaryOpen() ? "pressed" : undefined}
+                          aria-label={language.t("session.summary.title")}
+                          aria-expanded={summaryOpen()}
                         />
-                        <Menu.Portal>
-                          <Menu.Content
-                            style={{ width: "120px", "min-width": "120px" }}
-                            onCloseAutoFocus={(event) => {
-                              if (title.pendingRename) {
-                                event.preventDefault()
-                                setTitle("pendingRename", false)
-                                openTitleEditor()
-                                return
-                              }
+                        <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)
                             }}
                           >
-                            <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>
+                            {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>
       }
     />
   )

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

@@ -22,7 +22,6 @@ 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"
@@ -74,8 +73,6 @@ 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
@@ -189,7 +186,7 @@ export function createTimelineVirtualizer(input: Input) {
     },
     scrollEndThreshold: 80,
     get scrollMargin() {
-      return topOffset()
+      return input.showHeader() ? 64 : 0
     },
     paddingEnd: 64,
     get rangeExtractor() {
@@ -449,7 +446,7 @@ export function createTimelineVirtualizer(input: Input) {
           data-timeline-key={rowProps.rowKey}
           style={{
             position: "absolute",
-            top: `${item().start - topOffset()}px`,
+            top: `${item().start - (input.showHeader() ? 64 : 0)}px`,
             left: "0",
             width: "100%",
             height: `${item().size}px`,
@@ -519,9 +516,7 @@ 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()} fallback={<div aria-hidden="true" class="h-4 md:hidden" />}>
-            {props.header}
-          </Show>
+          <Show when={input.showHeader()}>{props.header}</Show>
           <div
             data-timeline-virtual-content
             ref={(element) => {

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

@@ -362,22 +362,6 @@ 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,7 +41,6 @@ export interface Settings {
     editToolPartsExpanded: boolean
     showCustomAgents: boolean
     mobileTitlebarPosition: "top" | "bottom"
-    mobileDiffWrap: boolean
     terminalPlacement: TerminalPlacement
     followUpBehavior: FollowUpBehavior
   }
@@ -131,7 +130,6 @@ const defaultSettings: Settings = {
     editToolPartsExpanded: false,
     showCustomAgents: false,
     mobileTitlebarPosition: "top",
-    mobileDiffWrap: true,
     terminalPlacement: "side",
     followUpBehavior: "steer",
   },
@@ -270,10 +268,6 @@ 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,13 +24,6 @@
   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"] {
@@ -56,7 +49,6 @@
 
 .settings-screen .settings-tab-body {
   padding-inline: 0;
-  padding-bottom: var(--settings-bottom-inset, 0px);
 }
 
 .settings-nav {
@@ -67,26 +59,6 @@
   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;
@@ -319,6 +291,36 @@
   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;
@@ -335,60 +337,25 @@
 }
 
 @container settings-screen (max-width: 799px) {
-  .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-nav {
+    width: 100%;
   }
 
   .settings-screen > .settings > .settings-panel {
-    min-height: 0;
-    max-width: none;
-  }
-
-  .settings-screen .settings-tab-header,
-  .settings-screen .settings-tab-body {
-    padding-inline: var(--settings-mobile-inner-inset, 16px);
+    padding-inline-end: 16px;
   }
 
   .settings-screen .settings-tab-header {
-    padding-top: 12px;
-  }
-
-  .settings-screen .settings-tab-title,
-  .settings-screen .settings-section-title {
-    line-height: var(--line-height-base);
+    padding-top: 24px;
   }
 
   .settings-screen
     > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
     > [data-slot="tabs-v2-list"] {
-    display: none;
+    width: 160px;
+    min-width: 160px;
+    padding-block: 24px;
+    padding-inline: 12px;
   }
 }
 
@@ -669,15 +636,6 @@
   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,18 +1,6 @@
-import {
-  Component,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Show,
-  onCleanup,
-  onMount,
-  startTransition,
-} from "solid-js"
+import { Component, createEffect, createMemo, createSignal, 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"
@@ -35,25 +23,6 @@ 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) => {
@@ -134,45 +103,6 @@ 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}>
@@ -180,20 +110,57 @@ export const SettingsScreen: Component<{
               <span>{language.t("settings.backToApp")}</span>
             </button>
             <div class="flex flex-col gap-4 w-full">
-              <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>
+              {/* 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>
             </div>
           </div>
           <div class="settings-nav-footer">

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

@@ -1,44 +0,0 @@
-import Drawer from "@corvu/drawer"
-import type { ParentProps } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import "./status/status-drawer.css"
-
-export function MobilePanelDrawer(
-  props: ParentProps<{
-    title: string
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    returnFocus?: () => HTMLElement | undefined
-  }>,
-) {
-  const language = useLanguage()
-  return (
-    <Drawer
-      open={props.open}
-      onOpenChange={props.onOpenChange}
-      side="bottom"
-      finalFocusEl={props.returnFocus?.()}
-      // Menu focus handoff must not dismiss the drawer during its opening transition.
-      closeOnOutsideFocus={false}
-    >
-      {/* Preserve Corvu's content and dismissal lifecycle across reopenings. */}
-      <Drawer.Portal forceMount>
-        <Drawer.Overlay data-slot="mobile-status-overlay" />
-        <Drawer.Content forceMount data-slot="mobile-status-drawer" dir={language.direction()}>
-          <div data-slot="mobile-status-drag-handle" aria-hidden="true">
-            <span />
-          </div>
-          <div data-slot="mobile-status-header" data-corvu-no-drag>
-            <Drawer.Label>{props.title}</Drawer.Label>
-            <Drawer.Close data-slot="mobile-status-close" aria-label={language.t("common.close")}>
-              {language.t("common.close")}
-            </Drawer.Close>
-          </div>
-          <div data-slot="mobile-status-content" data-corvu-no-drag>
-            {props.children}
-          </div>
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer>
-  )
-}

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-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
+                <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
                   <SessionPanelFrame raised />
                 </div>
               }

packages/app/src/shell/shell.tsx

@@ -23,7 +23,6 @@ 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() {
@@ -42,13 +41,15 @@ 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": bottomTitlebar()
-            ? "max(0px, calc(8px - env(safe-area-inset-top, 0px)))"
-            : platform.platform === "desktop" && platform.os === "windows"
+          "--shell-top-inset":
+            platform.platform === "desktop" &&
+            platform.os === "windows" &&
+            !(mobile() && preferences.general.mobileTitlebarPosition() === "bottom")
               ? "1px"
               : "8px",
-          "--shell-bottom-inset": bottomTitlebar() ? "8px" : "max(0px, calc(8px - env(safe-area-inset-bottom, 0px)))",
         }}
       >
         <Titlebar
@@ -65,11 +66,8 @@ 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-[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))",
-              }}
+              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 pb-2 pt-[var(--shell-top-inset,8px)]"
+              style={{ width: `${state.tabsWidth}px` }}
             >
               <ResizeHandle
                 class="-end-2"
@@ -82,15 +80,7 @@ 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"
-            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)",
-            }}
-          >
+          <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-content">
             <div
               class="flex size-full min-h-0 min-w-0 flex-col"
               hidden={settings.store.open}

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

@@ -20,7 +20,7 @@ const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   )
 }
 
-export function StatusPopoverBody(props: { shown: boolean; embedded?: boolean }) {
+export function StatusPopoverBody(props: { shown: boolean }) {
   const data = useData()
   const sdk = useWorkspaceLocation()
   const serverSDK = useServerSDK()
@@ -42,13 +42,7 @@ export function StatusPopoverBody(props: { shown: boolean; embedded?: boolean })
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
 
   return (
-    <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,
-      }}
-    >
+    <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
       <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

@@ -1,145 +0,0 @@
-[data-slot="mobile-status-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: var(--v2-overlay-simple-overlay-scrim);
-  animation: mobile-status-backdrop-in 240ms ease-out;
-}
-
-[data-slot="mobile-status-overlay"]:is([data-closing], [data-closed]) {
-  animation: mobile-status-backdrop-out 200ms ease-in forwards;
-}
-
-[data-slot="mobile-status-drawer"] {
-  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-status-drawer"][data-transitioning] {
-  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-[data-slot="mobile-status-drawer"][data-closing] {
-  transition-duration: 200ms;
-}
-
-[data-slot="mobile-status-drawer"][data-closed] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-[data-slot="mobile-status-drag-handle"] {
-  display: flex;
-  height: 28px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  touch-action: none;
-}
-
-[data-slot="mobile-status-drag-handle"] span {
-  width: 32px;
-  height: 4px;
-  border-radius: 999px;
-  background: var(--v2-border-border-strong);
-}
-
-[data-slot="mobile-status-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-status-header"] h2 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 530;
-  line-height: var(--line-height-base);
-}
-
-[data-slot="mobile-status-close"] {
-  min-height: 44px;
-  flex-shrink: 0;
-  padding-inline: 12px;
-  border-radius: 6px;
-  color: var(--v2-text-text-base);
-  font-size: 13px;
-  line-height: var(--line-height-compact);
-}
-
-@media (hover: hover) {
-  [data-slot="mobile-status-close"]:hover {
-    background: var(--v2-overlay-simple-overlay-hover);
-  }
-}
-
-[data-slot="mobile-status-close"]:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: -2px;
-}
-
-[data-slot="mobile-status-content"] {
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  touch-action: pan-y;
-}
-
-[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);
-}
-
-@keyframes mobile-status-backdrop-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes mobile-status-backdrop-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="mobile-status-drawer"][data-transitioning],
-  [data-slot="mobile-status-drawer"][data-closing] {
-    transition: none;
-  }
-
-  [data-slot="mobile-status-overlay"],
-  [data-slot="mobile-status-overlay"]:is([data-closing], [data-closed]) {
-    animation: none;
-  }
-}

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

@@ -1,35 +0,0 @@
-import { lazy, Suspense } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { MobilePanelDrawer } from "../mobile-panel-drawer"
-
-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/titlebar/tab-nav.css

@@ -57,10 +57,9 @@
   margin-block: auto;
 }
 
-[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"]) {
+[data-titlebar-tab]: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);
 }
@@ -184,36 +183,6 @@
   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;
@@ -221,17 +190,6 @@
     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,7 +1,6 @@
 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.
@@ -29,7 +28,6 @@ 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,
@@ -48,7 +46,7 @@ export function TabPreviewPopover(props: {
 
   return (
     <HoverCard
-      open={props.open && !mobile()}
+      open={props.open}
       onOpenChange={handleOpenChange}
       openDelay={resolveOpenDelay()}
       closeDelay={CLOSE_DELAY}

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

@@ -2,155 +2,6 @@
   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);
-}
-
-[data-slot="mobile-tabs-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: var(--v2-overlay-simple-overlay-scrim);
-  animation: mobile-tabs-backdrop-in 240ms ease-out;
-}
-
-[data-slot="mobile-tabs-overlay"]:is([data-closing], [data-closed]) {
-  animation: mobile-tabs-backdrop-out 200ms ease-in forwards;
-}
-
-/* Keep the strip mounted for tab shortcuts and session metadata while collapsed. */
-[data-slot="mobile-tabs-drawer"] {
-  box-sizing: border-box;
-  position: fixed;
-  inset-inline: 0;
-  bottom: 0;
-  z-index: 51;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: min(75dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px));
-  padding: 0 12px max(12px, env(safe-area-inset-bottom, 0px));
-  border-radius: 16px 16px 0 0;
-  background: var(--v2-background-bg-deep);
-  box-shadow: var(--v2-elevation-overlay);
-  outline: none;
-}
-
-[data-slot="mobile-tabs-drawer"][data-transitioning] {
-  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-[data-slot="mobile-tabs-drawer"][data-closing] {
-  transition-duration: 200ms;
-}
-
-[data-slot="mobile-tabs-drawer"][data-closed] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-[data-slot="mobile-tabs-drag-handle"] {
-  display: flex;
-  height: 28px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  touch-action: none;
-}
-
-[data-slot="mobile-tabs-drag-handle"] span {
-  width: 32px;
-  height: 4px;
-  border-radius: 999px;
-  background: var(--v2-border-border-strong);
-}
-
-[data-slot="mobile-tabs-drawer-list"] {
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-}
-
-@keyframes mobile-tabs-backdrop-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes mobile-tabs-backdrop-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="mobile-tabs-drawer"][data-transitioning],
-  [data-slot="mobile-tabs-drawer"][data-closing] {
-    transition: none;
-  }
-
-  [data-slot="mobile-tabs-overlay"],
-  [data-slot="mobile-tabs-overlay"]:is([data-closing], [data-closed]) {
-    animation: none;
-  }
-}
-
-[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,11 +25,6 @@ import type { ComposerState } from "@/composer/persistence"
 import "./titlebar.css"
 import { newTabTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { TitlebarRightMount } from "@/shell/titlebar/right-slot"
-import Drawer from "@corvu/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.
@@ -52,7 +47,6 @@ 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)")
@@ -144,14 +138,6 @@ 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,
@@ -350,283 +336,116 @@ 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-[max(0px,calc(8px-env(safe-area-inset-top,0px)))]": !bottom() && !windows(),
-                  "pb-[max(0px,calc(8px-env(safe-area-inset-bottom,0px)))]": bottom(),
+                  "pt-2": !bottom() && !windows(),
+                  "pb-2": bottom(),
                   "md:pl-2": macTrafficLights(),
                   "md:pl-4": !macTrafficLights(),
                 }}
               >
-                <Show when={!mobile()}>
-                  <ChannelIndicator debugTools={props.debugTools} />
-                </Show>
+                <ChannelIndicator debugTools={props.debugTools} />
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} />
                 </Show>
-                <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>
+                <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()}
+                  when={props.verticalTabs}
                   fallback={
-                    <Drawer
-                      open={mobileTabs.open}
-                      onOpenChange={(open) => setMobileTabs("open", open)}
-                      onContentPresentChange={(present) => {
-                        if (present || !mobileTabs.settings) return
-                        setMobileTabs("settings", false)
-                        openSettings()
-                      }}
-                      side="bottom"
-                    >
-                      <Drawer.Trigger
-                        data-slot="mobile-tabs-trigger"
-                        aria-expanded={mobileTabs.open}
-                        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")}
+                    <>
+                      <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" />
+                          </>
+                        }
                       >
-                        <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>
-                      </Drawer.Trigger>
-                      <Drawer.Portal forceMount>
-                        <Drawer.Overlay data-slot="mobile-tabs-overlay" />
-                        <Drawer.Content forceMount data-slot="mobile-tabs-drawer" dir={language.direction()}>
-                          <Drawer.Label class="sr-only">{language.t("titlebar.tabs")}</Drawer.Label>
-                          <div data-slot="mobile-tabs-drag-handle" aria-hidden="true">
-                            <span />
-                          </div>
-                          <div data-slot="mobile-tabs-drawer-list" data-corvu-no-drag>
-                            <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>
+                        <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-corvu-no-drag
-                            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)
-                            }}
+                            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>
-                          <div
-                            class="flex shrink-0 flex-col gap-1 border-t border-v2-border-border-muted pt-2"
-                            data-corvu-no-drag
-                          >
-                            <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>
-                        </Drawer.Content>
-                      </Drawer.Portal>
-                    </Drawer>
-                  }
-                >
-                  <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" />
+                        </Portal>
+                      )}
+                    </Show>
+                  )}
                 </Show>
+                <div class="flex-1" />
                 <TitlebarRight state={rightState()} />
               </div>
             )

packages/app/test-browser/pwa-route.test.ts

@@ -1,79 +0,0 @@
-import { afterEach, beforeEach, expect, test } from "bun:test"
-import { MemoryRouter, createMemoryHistory } from "@solidjs/router"
-import { createComponent, render } from "solid-js/web"
-import { isStandalone, PwaRoutePersistence, restorePwaRoute } from "../src/runtime/platform/pwa"
-
-const key = "opencode.pwa.last-route"
-const originalUrl = window.location.href
-
-beforeEach(() => {
-  window.location.href = "http://localhost/"
-})
-
-afterEach(() => {
-  localStorage.removeItem(key)
-  window.location.href = originalUrl
-})
-
-test("normal browser windows are not standalone", () => {
-  expect(isStandalone()).toBe(false)
-})
-
-test("restores the last PWA route including query and hash without adding history", () => {
-  window.history.replaceState({ retained: true }, "", "http://localhost/")
-  const length = window.history.length
-  localStorage.setItem(key, "/server/local/session/session-1?view=files#file")
-
-  restorePwaRoute()
-
-  expect(window.location.pathname + window.location.search + window.location.hash).toBe(
-    "/server/local/session/session-1?view=files#file",
-  )
-  expect(window.history.length).toBe(length)
-  expect(window.history.state).toEqual({ retained: true })
-})
-
-test("preserves explicit launch routes, queries, and hashes", () => {
-  localStorage.setItem(key, "/server/local/session/saved")
-  for (const route of ["/server/local/session/linked", "/new-session?draftId=123", "/?launch=1", "/#launch"]) {
-    window.history.replaceState(null, "", `http://localhost${route}`)
-    restorePwaRoute()
-    expect(window.location.pathname + window.location.search + window.location.hash).toBe(route)
-  }
-})
-
-test("ignores missing, invalid, external, and auth-bearing saved routes", () => {
-  window.history.replaceState(null, "", "http://localhost/")
-  restorePwaRoute()
-  expect(window.location.pathname).toBe("/")
-
-  for (const value of [
-    "/removed-route",
-    "https://example.com/new-session",
-    "//example.com/new-session",
-    "http://[",
-    "/new-session?auth_token=secret",
-  ]) {
-    localStorage.setItem(key, value)
-    restorePwaRoute()
-    expect(window.location.href).toBe("http://localhost/")
-  }
-})
-
-test("persists router navigation including returning home", async () => {
-  const host = document.createElement("div")
-  const history = createMemoryHistory()
-  history.set({ value: "/new-session?draftId=123", replace: true, scroll: false })
-  const dispose = render(() => createComponent(MemoryRouter, { history, root: PwaRoutePersistence }), host)
-  try {
-    expect(localStorage.getItem(key)).toBe("/new-session?draftId=123")
-    history.set({ value: "/server/local/session/next#file", scroll: false })
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(localStorage.getItem(key)).toBe("/server/local/session/next#file")
-    history.set({ value: "/", scroll: false })
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(localStorage.getItem(key)).toBe("/")
-  } finally {
-    dispose()
-  }
-})

packages/client/src/shared-events.ts

@@ -3,7 +3,7 @@ export * as SharedEvents from "./shared-events.js"
 export function make<A extends { readonly type: string }>(connect: (signal: AbortSignal) => AsyncIterable<A>) {
   type Completion = { readonly error: unknown } | Record<string, never>
   type Subscriber = {
-    push: (value: A) => void
+    push: (value: A) => Promise<void>
     finish: (completion: Completion) => void
   }
   type Connection = {
@@ -13,7 +13,7 @@ export function make<A extends { readonly type: string }>(connect: (signal: Abor
   }
 
   let current: Connection | undefined
-  const capacity = 4_096
+  const delivered = Promise.resolve()
 
   function stop(connection: Connection) {
     connection.connected = undefined
@@ -31,7 +31,7 @@ export function make<A extends { readonly type: string }>(connect: (signal: Abor
         const item = await iterator.next()
         if (item.done || connection.controller.signal.aborted) break
         if (item.value.type === "server.connected") connection.connected = item.value
-        connection.subscribers.forEach((subscriber) => subscriber.push(item.value))
+        await Promise.all(Array.from(connection.subscribers, (subscriber) => subscriber.push(item.value)))
       }
     } catch (error) {
       completion = { error }
@@ -51,14 +51,15 @@ export function make<A extends { readonly type: string }>(connect: (signal: Abor
       return {
         [Symbol.asyncIterator]() {
           const pending: ReturnType<typeof Promise.withResolvers<IteratorResult<A>>>[] = []
-          const queued: A[] = []
           let started = false
           let completion: Completion | undefined
           let connection: Connection | undefined
+          let offered: { readonly value: A; readonly accepted: ReturnType<typeof Promise.withResolvers<void>> } | undefined
 
-          function finish(result: Completion, discard = true) {
+          function finish(result: Completion) {
             completion = result
-            if (discard) queued.length = 0
+            offered?.accepted.resolve()
+            offered = undefined
             options?.signal?.removeEventListener("abort", abort)
             if (connection?.subscribers.delete(subscriber) && !connection.subscribers.size) stop(connection)
             pending.splice(0).forEach((request) => {
@@ -72,21 +73,17 @@ export function make<A extends { readonly type: string }>(connect: (signal: Abor
           }
 
           const subscriber: Subscriber = {
-            finish(result) {
-              finish(result, false)
-            },
+            finish,
             push(value) {
-              if (completion) return
+              if (completion) return delivered
               const request = pending.shift()
               if (request) {
                 request.resolve({ done: false, value })
-                return
+                return delivered
               }
-              if (queued.length === capacity) {
-                finish({ error: new Error(`Event subscriber exceeded its ${capacity}-event capacity`) })
-                return
-              }
-              queued.push(value)
+              const accepted = Promise.withResolvers<void>()
+              offered = { value, accepted }
+              return accepted.promise
             },
           }
 
@@ -105,8 +102,12 @@ export function make<A extends { readonly type: string }>(connect: (signal: Abor
 
           return {
             next(): Promise<IteratorResult<A>> {
-              const value = queued.shift()
-              if (value) return Promise.resolve({ done: false, value })
+              if (offered) {
+                const current = offered
+                offered = undefined
+                current.accepted.resolve()
+                return Promise.resolve({ done: false, value: current.value })
+              }
               if (completion) {
                 if ("error" in completion) return Promise.reject(completion.error)
                 return Promise.resolve({ done: true, value: undefined })

packages/client/src/solid/data.ts

@@ -618,17 +618,13 @@ export function createData(config: CreateDataInput) {
           })
           .catch((error) => console.error("Failed to load projected model switch message", error))
         return
-      case "session.renamed": {
+      case "session.renamed":
         // Preserve the live title when it races the session's initial read.
-        const family = sync.pending(`session.family:${event.data.sessionID}`)
-          ? result.session.sync(event.data.sessionID, { children: true })
-          : Promise.resolve()
-        void Promise.all([result.session.sync(event.data.sessionID), family]).then(() => {
+        void result.session.sync(event.data.sessionID).then(() => {
           if (store.session.info[event.data.sessionID])
             setStore("session", "info", event.data.sessionID, "title", event.data.title)
         })
         return
-      }
       case "session.moved": {
         const current = store.session.info[event.data.sessionID]
         if (current) {

packages/client/test/shared-events.test.ts

@@ -97,11 +97,7 @@ test("multiple consumers share one source and receive live native and RPC events
   const first = shared.subscribe()[Symbol.asyncIterator]()
   const second = shared.subscribe()[Symbol.asyncIterator]()
 
-  for (const event of [
-    { type: "server.connected" },
-    { type: "session.updated" },
-    { type: "rpc.example.updated", value: 1 },
-  ]) {
+  for (const event of [{ type: "server.connected" }, { type: "session.updated" }, { type: "rpc.example.updated", value: 1 }]) {
     const reads = [first.next(), second.next()]
     events.connections[0].push(event)
     expect(await Promise.all(reads)).toEqual([
@@ -119,60 +115,6 @@ test("multiple consumers share one source and receive live native and RPC events
   await events.connections[0].closed
 })
 
-test("an idle consumer does not stall events for an active consumer", async () => {
-  const events = source()
-  const shared = SharedEvents.make(events.connect)
-  const idle = shared.subscribe()[Symbol.asyncIterator]()
-  const active = shared.subscribe()[Symbol.asyncIterator]()
-  const connected = [idle.next(), active.next()]
-  events.connections[0].push({ type: "server.connected" })
-  await Promise.all(connected)
-
-  for (const event of [
-    { type: "session.updated", value: 1 },
-    { type: "session.updated", value: 2 },
-  ]) {
-    const next = active.next()
-    events.connections[0].push(event)
-    expect(
-      await Promise.race([next, Bun.sleep(1_000).then(() => ({ done: true as const, value: { type: "timeout" } }))]),
-    ).toEqual({ done: false, value: event })
-  }
-
-  await idle.return!()
-  await active.return!()
-  await events.connections[0].closed
-})
-
-test("an idle consumer fails instead of buffering events without bound", async () => {
-  const events = source()
-  const idle = SharedEvents.make(events.connect).subscribe()[Symbol.asyncIterator]()
-  const connected = idle.next()
-  events.connections[0].push({ type: "server.connected" })
-  await connected
-
-  Array.from({ length: 4_097 }, (_, value) => events.connections[0].push({ type: "session.updated", value }))
-  await events.connections[0].closed
-  await expect(idle.next()).rejects.toThrow("Event subscriber exceeded its 4096-event capacity")
-})
-
-test("source completion preserves events already buffered for an idle consumer", async () => {
-  const events = source()
-  const idle = SharedEvents.make(events.connect).subscribe()[Symbol.asyncIterator]()
-  const connected = idle.next()
-  events.connections[0].push({ type: "server.connected" })
-  await connected
-  events.connections[0].push({ type: "session.updated", value: 1 })
-  events.connections[0].push({ type: "session.updated", value: 2 })
-  events.connections[0].close()
-  await events.connections[0].closed
-  await Bun.sleep(0)
-
-  expect(await idle.next()).toEqual({ done: false, value: { type: "session.updated", value: 1 } })
-  expect(await idle.next()).toEqual({ done: false, value: { type: "session.updated", value: 2 } })
-  expect(await idle.next()).toEqual({ done: true, value: undefined })
-})
-
 test("late consumers receive the latest connection marker but no business event replay", async () => {
   const events = source()
   const shared = SharedEvents.make(events.connect)

packages/client/test/solid-data.test.ts

@@ -73,63 +73,6 @@ test("revalidates after an event overtakes an active session read", async () =>
   }
 })
 
-test("preserves a live session rename across concurrent session and family reads", async () => {
-  const family = Promise.withResolvers<void>()
-  const renamed = Promise.withResolvers<void>()
-  const listeners = new Set<Parameters<CreateDataInput["event"]["listen"]>[0]>()
-  let requests = 0
-  const stale = { ...session(0), title: undefined }
-  const api = OpenCode.make({
-    baseUrl: "http://opencode.local",
-    fetch: async (input, init) => {
-      const request = input instanceof Request ? input : new Request(input, init)
-      if (!request.url.endsWith(`/api/session/${stale.id}`)) return Response.json({ data: [], cursor: {} })
-      requests++
-      await (requests === 1 ? family.promise : renamed.promise)
-      return Response.json({ data: stale })
-    },
-  })
-  const setup = createRoot((dispose) => ({
-    data: createData({
-      api: () => api,
-      directory: "/project",
-      event: {
-        on: () => () => {},
-        listen(handler) {
-          listeners.add(handler)
-          return () => listeners.delete(handler)
-        },
-      },
-    }),
-    dispose,
-  }))
-
-  try {
-    const initial = setup.data.session.sync(stale.id, { children: true })
-    await wait(() => requests === 1)
-    const event: OpenCodeEvent = {
-      id: "evt_renamed",
-      created: 1,
-      type: "session.renamed",
-      durable: { aggregateID: stale.id, seq: 1, version: 1 },
-      data: { sessionID: stale.id, title: "Generated title" },
-    }
-    listeners.forEach((listener) => listener({ name: event.type, details: event }))
-    await wait(() => requests === 2)
-    renamed.resolve()
-    await wait(() => setup.data.session.get(stale.id) !== undefined)
-    family.resolve()
-    await initial
-    await Bun.sleep(0)
-
-    expect(setup.data.session.get(stale.id)?.title).toBe("Generated title")
-  } finally {
-    family.resolve()
-    renamed.resolve()
-    setup.dispose()
-  }
-})
-
 test("updates authoritative cached project metadata from live events", async () => {
   const listeners = new Set<Parameters<CreateDataInput["event"]["listen"]>[0]>()
   const original: Project = {

packages/core/src/formatter.ts

@@ -54,8 +54,9 @@ const layer = Layer.effect(
     })
 
     const file = Effect.fn("Formatter.file")(function* (filepath: string) {
-      const extension = path.extname(filepath)
-      const matching = state.get().formatters.filter((formatter) => formatter.extensions.includes(extension))
+      const matching = state
+        .get()
+        .formatters.filter((formatter) => formatter.extensions.includes(path.extname(filepath)))
 
       for (const formatter of matching) {
         const enabled = yield* command(formatter)

packages/core/src/location-mutation.ts

@@ -76,6 +76,17 @@ export class Service extends Context.Service<Service, Interface>()("@opencode/Lo
 
 const slash = (value: string) => value.replaceAll("\\", "/")
 
+export const permissionTarget = (location: Location.Info, absolute: string) => {
+  const worktree = path.resolve(location.project.directory)
+  const internal =
+    FSUtil.contains(location.directory, absolute) ||
+    (worktree !== path.parse(worktree).root && FSUtil.contains(worktree, absolute))
+  return {
+    internal,
+    resource: slash(internal ? path.relative(location.directory, absolute) || "." : absolute),
+  }
+}
+
 const layer = Layer.effect(
   Service,
   Effect.gen(function* () {
@@ -85,14 +96,11 @@ const layer = Layer.effect(
 
     const resolve = Effect.fnUntraced(function* (input: ResolveInput) {
       const absolute = resolvePath(location.directory, input.path)
-      const worktree = path.resolve(location.project.directory)
-      const internal =
-        FSUtil.contains(location.directory, absolute) ||
-        (worktree !== path.parse(worktree).root && FSUtil.contains(worktree, absolute))
-      if (internal) {
+      const target = permissionTarget(location, absolute)
+      if (target.internal) {
         return {
           absolute,
-          resource: slash(path.relative(location.directory, absolute) || "."),
+          resource: target.resource,
         } satisfies Target
       }
       const type =

packages/core/src/plugin/plan.ts

@@ -7,6 +7,7 @@ import type { SessionEvent } from "@opencode-ai/schema/session-event"
 import { Global } from "@opencode-ai/util/global"
 import { Effect, Stream } from "effect"
 import path from "path"
+import { LocationMutation } from "../location-mutation.js"
 import { Permission } from "../permission.js"
 
 const plan = Agent.ID.make("plan")
@@ -29,6 +30,7 @@ export const Plugin = define({
   effect: Effect.fn(function* (ctx) {
     const global = yield* Global.Service
     const directory = path.join(global.home, ".opencode", "plan")
+    const resource = LocationMutation.permissionTarget(ctx.location, directory).resource
     const enterReminder = enter(directory)
     yield* ctx.agent.transform((draft) => {
       draft.update(plan, (item) => {
@@ -37,7 +39,7 @@ export const Plugin = define({
         item.mode = "primary"
         item.permissions.push({ action: "question", resource: "*", effect: "allow" })
         item.permissions.push({ action: "edit", resource: "*", effect: "deny" })
-        item.permissions.push({ action: "edit", resource: path.join(directory, "*"), effect: "allow" })
+        item.permissions.push({ action: "edit", resource: path.join(resource, "*"), effect: "allow" })
         item.permissions.push({ action: "external_directory", resource: path.join(directory, "*"), effect: "allow" })
       })
     })

packages/core/src/tool/html-markdown.ts

@@ -95,7 +95,7 @@ export function convertHTMLToMarkdown(html: string) {
     const remaining = limit - outputBytes
     const next = bytes.byteLength <= remaining ? value : sliceBytes(value, remaining)
     output.push(next)
-    outputBytes += bytes.byteLength <= remaining ? bytes.byteLength : encoder.encode(next).byteLength
+    outputBytes += encoder.encode(next).byteLength
     last = next.at(-1) ?? last
   }
   const appendRaw = (value: string) => {

packages/core/test/formatter.test.ts

@@ -58,34 +58,6 @@ function withFormatter<A, E, R>(
 }
 
 describe("Formatter", () => {
-  ;[
-    { file: "test.match", extension: ".match", matches: true },
-    { file: "test.other", extension: ".match", matches: false },
-    { file: "test.MATCH", extension: ".match", matches: false },
-    { file: "test.MATCH", extension: ".MATCH", matches: true },
-    { file: ".match", extension: ".match", matches: false },
-    { file: ".match", extension: "", matches: true },
-    { file: "README", extension: ".match", matches: false },
-    { file: "README", extension: "", matches: true },
-    { file: "test.part.match", extension: ".match", matches: true },
-    { file: "test.part.match", extension: ".part.match", matches: false },
-  ].forEach((entry) =>
-    it.live(`matches ${entry.file} against ${JSON.stringify(entry.extension)}: ${entry.matches}`, () =>
-      withFormatter(
-        {
-          matching: {
-            command: [process.execPath, "-e", "process.exit(0)", "$FILE"],
-            extensions: [entry.extension],
-          },
-        },
-        (formatter, directory) =>
-          Effect.gen(function* () {
-            expect(yield* formatter.file(path.join(directory, entry.file))).toBe(entry.matches)
-          }),
-      ),
-    ),
-  )
-
   it.live("does not run formatters marked as disabled in config", () =>
     withFormatter(
       {

packages/core/test/plugin/plan.test.ts

@@ -9,7 +9,9 @@ import { Event } from "@opencode-ai/schema/event"
 import { Model } from "@opencode-ai/core/model"
 import { PlanPlugin } from "@opencode-ai/core/plugin/plan"
 import { Permission } from "@opencode-ai/core/permission"
+import { Project } from "@opencode-ai/core/project"
 import { Provider } from "@opencode-ai/core/provider"
+import { AbsolutePath } from "@opencode-ai/core/schema"
 import { Session } from "@opencode-ai/core/session"
 import { SessionEvent } from "@opencode-ai/core/session/event"
 import { SessionInbox } from "@opencode-ai/core/session/inbox"
@@ -35,7 +37,10 @@ const agentSelected = (agent: Agent.ID, previous: Agent.ID): SessionEvent.AgentS
 })
 
 /** Runs the plan plugin against stubbed domains, capturing persisted reminders and the context hook. */
-const run = Effect.fnUntraced(function* (events: ReadonlyArray<SessionEvent.AgentSelected> = []) {
+const run = Effect.fnUntraced(function* (
+  events: ReadonlyArray<SessionEvent.AgentSelected> = [],
+  locationDirectory = "/workspace",
+) {
   const persisted = new Array<string>()
   let contextHook: ((input: SessionContext) => Effect.Effect<void>) | undefined
   let toolHook: ((input: ToolHooks["execute.after"]) => Effect.Effect<void>) | undefined
@@ -53,6 +58,14 @@ const run = Effect.fnUntraced(function* (events: ReadonlyArray<SessionEvent.Agen
   const driver = Environment.makeMemoryDriver()
   yield* PlanPlugin.Plugin.effect(
     host({
+      location: {
+        directory: AbsolutePath.make(locationDirectory),
+        project: {
+          id: Project.ID.global,
+          directory: AbsolutePath.make(locationDirectory),
+          canonical: AbsolutePath.make(locationDirectory),
+        },
+      },
       agent: {
         get: () => Effect.die("unused agent.get"),
         list: () => Effect.die("unused agent.list"),
@@ -263,6 +276,14 @@ describe("plan plugin mutations", () => {
     }),
   )
 
+  it.effect("allows the Plan directory when the Location is the home directory", () =>
+    Effect.gen(function* () {
+      const { planAgent } = yield* run([], home)
+      expect(Permission.evaluate("edit", ".opencode/plan/work.md", planAgent.permissions).effect).toBe("allow")
+      expect(Permission.evaluate("edit", "source.ts", planAgent.permissions).effect).toBe("deny")
+    }),
+  )
+
   it.effect("allows the Plan directory external boundary", () =>
     Effect.gen(function* () {
       const { planAgent } = yield* run()

packages/core/test/tool-webfetch.test.ts

@@ -128,15 +128,6 @@ describe("WebFetchTool helpers", () => {
     expect(output).toHaveLength(WebFetchTool.MAX_RESPONSE_BYTES - 64 * 1024)
   })
 
-  test.each(["x", "\u00e9", "\u{1f600}"])("preserves UTF-8 boundaries at the content limit for %s", (character) => {
-    const budget = WebFetchTool.MAX_RESPONSE_BYTES - 64 * 1024
-    const fitting = "aa" + character.repeat(Math.floor((budget - 2) / Buffer.byteLength(character)))
-    expect(WebFetchTool.convertHTMLToMarkdown(fitting)).toBe(fitting)
-    const truncated = WebFetchTool.convertHTMLToMarkdown(fitting + character)
-    expect(truncated).toBe(fitting)
-    expect(Buffer.byteLength(truncated)).toBe(Buffer.byteLength(fitting))
-  })
-
   test("bounds deeply nested list output and fragmented code fences", () => {
     const lists = `${"<ul><li>item".repeat(2_000)}${"</li></ul>".repeat(2_000)}`
     const quotes = `${"<blockquote><p>item".repeat(2_000)}${"</p></blockquote>".repeat(2_000)}`

packages/server/src/handlers/persistent-pty.ts

@@ -12,7 +12,6 @@ import { HttpApiBuilder, HttpApiSchema } from "effect/unstable/httpapi"
 import { Socket } from "effect/unstable/socket"
 import { Api } from "../api"
 import { CorsConfig, isAllowedRequestOrigin } from "../cors"
-import { runPtySocket } from "./pty-socket"
 
 export const PersistentPtyHandler = HttpApiBuilder.group(Api, "server.experimental", (handlers) =>
   Effect.gen(function* () {
@@ -192,7 +191,7 @@ export const PersistentPtyHandler = HttpApiBuilder.group(Api, "server.experiment
             }
           })
 
-          yield* runPtySocket(
+          yield* Effect.race(
             drain,
             socket.runRaw(
               (message) =>
@@ -222,9 +221,9 @@ export const PersistentPtyHandler = HttpApiBuilder.group(Api, "server.experiment
                 ),
               { onOpen },
             ),
-            () => attachment?.detach(),
           ).pipe(
             Effect.catchReason("SocketError", "SocketCloseError", () => Effect.void),
+            Effect.ensuring(Effect.sync(() => attachment?.detach())),
             Effect.orDie,
           )
           return HttpServerResponse.empty()

packages/server/src/handlers/provider.ts

@@ -1,18 +1,9 @@
 import { Catalog } from "@opencode-ai/core/catalog"
-import { ProviderNotFoundError, ServiceUnavailableError } from "@opencode-ai/protocol/errors"
 import { Effect } from "effect"
 import { HttpApiBuilder } from "effect/unstable/httpapi"
 import { Api } from "../api"
+import { ProviderNotFoundError } from "@opencode-ai/protocol/errors"
 import { response } from "../location"
-import { pluginReadiness } from "./plugin-readiness"
-
-const flushPlugins = pluginReadiness(
-  () =>
-    new ServiceUnavailableError({
-      message: "Provider catalog initialization timed out",
-      service: "provider.catalog",
-    }),
-)
 
 export const ProviderHandler = HttpApiBuilder.group(Api, "server.provider", (handlers) =>
   Effect.gen(function* () {
@@ -20,7 +11,6 @@ export const ProviderHandler = HttpApiBuilder.group(Api, "server.provider", (han
       .handle(
         "provider.list",
         Effect.fn(function* () {
-          yield* flushPlugins
           const catalog = yield* Catalog.Service
           return yield* response(catalog.provider.available())
         }),
@@ -28,7 +18,6 @@ export const ProviderHandler = HttpApiBuilder.group(Api, "server.provider", (han
       .handle(
         "provider.get",
         Effect.fn(function* (ctx) {
-          yield* flushPlugins
           const catalog = yield* Catalog.Service
           const provider = yield* catalog.provider.get(ctx.params.providerID)
           if (!provider)

packages/server/src/handlers/pty-socket.ts

@@ -1,9 +0,0 @@
-import { Effect } from "effect"
-
-export function runPtySocket<A, E, R, A2, E2, R2>(
-  drain: Effect.Effect<A, E, R>,
-  socket: Effect.Effect<A2, E2, R2>,
-  detach: () => void,
-) {
-  return Effect.raceFirst(drain, socket).pipe(Effect.ensuring(Effect.sync(detach)))
-}

packages/server/src/handlers/pty.ts

@@ -17,7 +17,6 @@ import {
 } from "@opencode-ai/protocol/groups/pty"
 import { response } from "../location"
 import { PtyEnvironment } from "../pty-environment"
-import { runPtySocket } from "./pty-socket"
 
 const ticketScope = Effect.gen(function* () {
   const location = yield* Location.Service
@@ -210,15 +209,15 @@ export const PtyHandler = HttpApiBuilder.group(Api, "server.pty", (handlers) =>
             }
           })
 
-          yield* runPtySocket(
+          yield* Effect.race(
             drain,
             socket.runRaw((message) => {
               const decoded = PtyProtocol.decodeInput(message)
               if (decoded !== undefined) attachment.write(decoded)
             }),
-            attachment.detach,
           ).pipe(
             Effect.catchReason("SocketError", "SocketCloseError", () => Effect.void),
+            Effect.ensuring(Effect.sync(() => attachment.detach())),
             Effect.orDie,
           )
           return HttpServerResponse.empty()

packages/server/test/provider.test.ts

@@ -1,64 +0,0 @@
-import fs from "node:fs/promises"
-import path from "node:path"
-import { expect } from "bun:test"
-import { Effect } from "effect"
-import { tmpdir } from "../../core/test/fixture/tmpdir"
-import { it } from "../../core/test/lib/effect"
-import { startServer } from "./fixture/server"
-
-it.live(
-  "waits for plugin initialization on the first provider list request",
-  () =>
-    Effect.gen(function* () {
-      const fixture = yield* configuredProvider("opencode-provider-list-endpoint-")
-      const url = new URL("/api/provider", fixture.server.base)
-      url.searchParams.set("location[directory]", fixture.path)
-      const response = yield* Effect.promise(() => fetch(url, { headers: fixture.server.headers }))
-
-      expect(response.status).toBe(200)
-      const body: unknown = yield* Effect.promise(() => response.json())
-      if (!isRecord(body) || !Array.isArray(body["data"])) throw new Error("Expected a provider list response")
-      expect(body["data"].some((provider) => isRecord(provider) && provider["id"] === "custom")).toBeTrue()
-    }),
-  15_000,
-)
-
-it.live(
-  "waits for plugin initialization on the first provider get request",
-  () =>
-    Effect.gen(function* () {
-      const fixture = yield* configuredProvider("opencode-provider-get-endpoint-")
-      const url = new URL("/api/provider/custom", fixture.server.base)
-      url.searchParams.set("location[directory]", fixture.path)
-      const response = yield* Effect.promise(() => fetch(url, { headers: fixture.server.headers }))
-
-      expect(response.status).toBe(200)
-      const body: unknown = yield* Effect.promise(() => response.json())
-      if (!isRecord(body) || !isRecord(body["data"])) throw new Error("Expected a provider response")
-      expect(body["data"]["id"]).toBe("custom")
-    }),
-  15_000,
-)
-
-const configuredProvider = Effect.fnUntraced(function* (prefix: string) {
-  const tmp = yield* Effect.acquireDisposable(Effect.promise(() => tmpdir(prefix)))
-  yield* Effect.promise(() =>
-    fs.writeFile(
-      path.join(tmp.path, "opencode.json"),
-      JSON.stringify({
-        providers: {
-          custom: {
-            package: "@opencode-ai/ai/providers/openai-compatible",
-            settings: { apiKey: "secret" },
-            models: { chat: {} },
-          },
-        },
-      }),
-    ),
-  )
-  return { server: yield* startServer(tmp.path), path: tmp.path }
-})
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value)
-}

packages/server/test/pty-socket.test.ts

@@ -1,16 +0,0 @@
-import { expect } from "bun:test"
-import { Effect, Option, Result } from "effect"
-import { it } from "../../core/test/lib/effect"
-import { runPtySocket } from "../src/handlers/pty-socket"
-
-it.live("detaches when the socket fails while the outbox drain is blocked", () =>
-  Effect.gen(function* () {
-    const state = { detached: false }
-    const result = yield* runPtySocket(Effect.never, Effect.fail("socket closed"), () => {
-      state.detached = true
-    }).pipe(Effect.result, Effect.timeoutOption("100 millis"))
-
-    expect(Option.isSome(result) && Result.isFailure(result.value)).toBeTrue()
-    expect(state.detached).toBeTrue()
-  }),
-)

packages/server/test/session-message-update.test.ts

@@ -1,4 +1,4 @@
-import { expect, setDefaultTimeout } from "bun:test"
+import { expect } from "bun:test"
 import { Agent } from "@opencode-ai/core/agent"
 import { Bus } from "@opencode-ai/core/bus"
 import { Model } from "@opencode-ai/core/model"
@@ -12,8 +12,6 @@ import { Effect, Layer } from "effect"
 import { it } from "../../core/test/lib/effect"
 import { ServerFetch } from "../src/fetch"
 
-setDefaultTimeout(30_000)
-
 it.live("updates completed assistant message content through the session HTTP API", () =>
   Effect.gen(function* () {
     const state = {

packages/session-ui/component-tests/session-timeline-mobile.spec.ts

@@ -1,75 +0,0 @@
-import { expect, story } from "../../storybook/playwright/story"
-
-story.describe("touch timeline", () => {
-  story.use({ hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } })
-
-  story("keeps message actions and metadata visible without hover", async ({ mount, page }) => {
-    const timeline = await mount("current-session-timeline-rows--conversation", { args: { scenario: "interruption" } })
-    expect(await page.evaluate(() => matchMedia("(hover: none)").matches)).toBe(true)
-
-    for (const action of [
-      { slot: "user-message-copy-wrapper", name: "Copy message" },
-      { slot: "text-part-copy-wrapper", name: "Copy response" },
-    ]) {
-      const actions = timeline.locator(`[data-slot="${action.slot}"]`)
-      await expect(actions).toHaveCount(1)
-      await expect(actions).toHaveCSS("opacity", "1")
-      await expect(actions).toHaveCSS("pointer-events", "auto")
-      await expect(actions.getByRole("button", { name: action.name, exact: true })).toBeVisible()
-    }
-
-    await expect(timeline.locator('[data-slot="user-message-meta"]')).toContainText("Build")
-    await expect(timeline.locator('[data-slot="user-message-meta-tail"]')).not.toBeEmpty()
-    await expect(timeline.locator('[data-slot="text-part-meta"]')).toContainText("Build")
-    await expect(timeline.locator('[data-slot="text-part-meta"]')).toContainText("Sonnet")
-  })
-
-  story("keeps shell copy visible without hover", async ({ mount }) => {
-    const timeline = await mount("current-session-terminal-work--expanded-shell")
-    const copy = timeline.locator('[data-slot="bash-copy"]')
-    await expect(copy).toHaveCount(1)
-    await expect(copy).toHaveCSS("opacity", "1")
-    await expect(copy).toHaveCSS("pointer-events", "auto")
-  })
-
-  story("keeps error copy visible without hover", async ({ mount, page }) => {
-    const errors = await mount("components-tool-error-card--all")
-    const patch = errors.locator('[data-kind="tool-error-card"]').filter({ hasText: "Patch" })
-    await patch.getByRole("button", { name: /Patch.*Verification failed/ }).tap()
-    await page.touchscreen.tap(385, 800)
-    const copy = patch.locator('[data-slot="tool-error-card-copy"]')
-    await expect(copy).toHaveCSS("opacity", "1")
-    await expect(copy).toHaveCSS("pointer-events", "auto")
-  })
-
-  story("keeps fenced code copy visible without hover", async ({ mount }) => {
-    const markdown = await mount("components-markdown--complete-response")
-    const code = markdown.locator('[data-component="markdown-code"]').filter({ hasText: "export const value = 42" })
-    await expect(code).toHaveCount(1)
-    await expect(code.locator('[data-slot="markdown-copy-button"]')).toHaveCSS("opacity", "1")
-  })
-})
-
-story("desktop message actions still appear on hover and keyboard focus", async ({ mount, page }) => {
-  const timeline = await mount("current-session-timeline-rows--conversation", { args: { scenario: "interruption" } })
-  expect(await page.evaluate(() => matchMedia("(hover: hover)").matches)).toBe(true)
-
-  for (const action of [
-    { slot: "user-message-copy-wrapper", name: "Copy message" },
-    { slot: "text-part-copy-wrapper", name: "Copy response" },
-  ]) {
-    const actions = timeline.locator(`[data-slot="${action.slot}"]`)
-    await expect(actions).toHaveCount(1)
-    await expect(actions).toHaveCSS("opacity", "0")
-    await expect(actions).toHaveCSS("pointer-events", "none")
-    await actions.locator("..").hover()
-    await expect(actions).toHaveCSS("opacity", "1")
-    await expect(actions).toHaveCSS("pointer-events", "auto")
-    await page.mouse.move(0, 0)
-    await expect(actions).toHaveCSS("opacity", "0")
-    await actions.getByRole("button", { name: action.name, exact: true }).focus()
-    await expect(actions).toHaveCSS("opacity", "1")
-    await expect(actions).toHaveCSS("pointer-events", "auto")
-    await page.getByRole("button", { name: "Reset", exact: true }).focus()
-  }
-})

packages/session-ui/src/components/basic-tool.css

@@ -249,13 +249,10 @@
     flex-shrink: 0;
     color: var(--v2-text-text-faint);
     margin-left: auto;
+    opacity: 0;
     transition:
       opacity 0.15s ease,
       color 0.15s ease;
-
-    @media (hover: hover) {
-      opacity: 0;
-    }
   }
 
   [data-component="task-tool-title"] {
@@ -394,15 +391,11 @@
   }
 
   .webfetch-link-icon {
-    display: inline-flex;
+    display: none;
     width: 16px;
     height: 16px;
     flex-shrink: 0;
     color: var(--v2-icon-icon-accent, var(--v2-text-text-accent));
-
-    @media (hover: hover) {
-      display: none;
-    }
   }
 
   &:hover {

packages/session-ui/src/components/file.tsx

@@ -1085,7 +1085,7 @@ function DiffViewer<T>(props: DiffFileProps<T>) {
 
     const perf = large() ? { ...base, ...largeOptions } : base
     if (!mobile()) return perf
-    return { ...perf, disableLineNumbers: props.disableLineNumbers ?? true }
+    return { ...perf, disableLineNumbers: true }
   })
 
   const notify = (done?: VoidFunction) => {

packages/session-ui/src/components/markdown.css

@@ -240,12 +240,9 @@
     position: absolute;
     top: 4px;
     inset-inline-end: 4px;
+    opacity: 0;
     transition: opacity 0.15s ease;
     z-index: 1;
-
-    @media (hover: hover) {
-      opacity: 0;
-    }
   }
 
   [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"],

packages/session-ui/src/components/message-part.css

@@ -167,14 +167,11 @@
     justify-content: flex-end;
     gap: 10px;
     width: 100%;
+    opacity: 0;
+    pointer-events: none;
     transition: opacity 0.15s ease;
     will-change: opacity;
 
-    @media (hover: hover) {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     [data-component="tooltip-v2-trigger"] {
       display: inline-flex;
       width: fit-content;
@@ -238,14 +235,11 @@
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
+    opacity: 0;
+    pointer-events: none;
     transition: opacity 0.15s ease;
     will-change: opacity;
 
-    @media (hover: hover) {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     [data-component="tooltip-v2-trigger"] {
       display: inline-flex;
       width: fit-content;
@@ -377,12 +371,9 @@
     position: absolute;
     top: 4px;
     right: 4px;
+    opacity: 0;
+    pointer-events: none;
     transition: opacity 0.15s ease;
-
-    @media (hover: hover) {
-      opacity: 0;
-      pointer-events: none;
-    }
   }
 
   &:hover [data-slot="bash-copy"],

packages/session-ui/src/components/session-review.css

@@ -25,14 +25,13 @@
     height: 40px;
     padding-bottom: 8px;
     flex-shrink: 0;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    display: flex;
+    justify-content: space-between;
     align-items: center;
     align-self: stretch;
   }
 
   [data-slot="session-review-title"] {
-    justify-self: start;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-large);
     font-weight: var(--font-weight-medium);
@@ -41,8 +40,6 @@
   }
 
   [data-slot="session-review-actions"] {
-    grid-column: 3;
-    justify-self: end;
     display: flex;
     align-items: center;
     column-gap: 12px;
@@ -133,25 +130,19 @@
     color: var(--text-base);
     cursor: pointer;
     border-radius: 4px;
-    opacity: 1;
+    opacity: 0;
     will-change: opacity;
     transform: translateZ(0);
     transition: opacity 0.15s ease;
 
-    @media (hover: hover) {
-      opacity: 0;
-
-      &:hover {
-        color: var(--text-strong);
-        background: var(--surface-base);
-      }
+    &:hover {
+      color: var(--text-strong);
+      background: var(--surface-base);
     }
   }
 
-  @media (hover: hover) {
-    [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
-      opacity: 1;
-    }
+  [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
+    opacity: 1;
   }
 
   [data-slot="session-review-trigger-actions"] {
@@ -179,33 +170,12 @@
     gap: 12px;
   }
 
-  [data-slot="session-review-change-summary"] {
-    position: sticky;
-    top: calc(32px + var(--sticky-accordion-offset, 0px));
-    z-index: 9;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    min-height: 32px;
-    padding-block: 8px;
-    padding-inline: 12px;
-    line-height: var(--line-height-compact);
-    background-color: var(--v2-background-bg-base);
-    border-bottom: 0.5px solid var(--v2-border-border-base);
-  }
-
   [data-slot="session-review-change"] {
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-medium);
   }
 
-  [data-slot="session-review-summary-open-file"] {
-    margin-inline-start: auto;
-    flex-shrink: 0;
-  }
-
   [data-slot="session-review-change"][data-type="added"] {
     color: var(--icon-diff-add-base);
   }

packages/session-ui/src/components/session-review.tsx

@@ -96,9 +96,6 @@ export interface SessionReviewProps {
   empty?: JSX.Element
   split?: boolean
   diffStyle?: SessionReviewDiffStyle
-  changeSummary?: boolean
-  overflow?: "wrap" | "scroll"
-  disableLineNumbers?: boolean
   onDiffStyleChange?: (diffStyle: SessionReviewDiffStyle) => void
   onDiffRendered?: VoidFunction
   onLineComment?: (comment: SessionReviewLineComment) => void
@@ -342,9 +339,6 @@ export const SessionReview = (props: SessionReviewProps) => {
         <div data-slot="session-review-title">
           {props.title === undefined ? i18n.t("ui.sessionReview.title") : props.title}
         </div>
-        <Show when={hasDiffs()}>
-          <DiffChanges appearance="standard" changes={props.diffs} />
-        </Show>
         <div data-slot="session-review-actions">
           <Show when={hasDiffs() && props.onDiffStyleChange}>
             <SegmentedControl
@@ -370,7 +364,7 @@ export const SessionReview = (props: SessionReviewProps) => {
             <Button
               size="small"
               icon="chevron-grabber-vertical"
-              class="shrink-0 whitespace-nowrap justify-start"
+              class="w-[106px] justify-start"
               onClick={handleExpandOrCollapseAll}
             >
               <Switch>
@@ -512,37 +506,6 @@ export const SessionReview = (props: SessionReviewProps) => {
                       commentsUi.onLineSelectionEnd(range)
                     }
 
-                    const changes = (summary = false) => (
-                      <>
-                        <Switch>
-                          <Match when={isAdded()}>
-                            <div data-slot="session-review-change-group" data-type="added">
-                              <span data-slot="session-review-change" data-type="added">
-                                {i18n.t("ui.sessionReview.change.added")}
-                              </span>
-                              <DiffChanges appearance="standard" changes={diff()} />
-                            </div>
-                          </Match>
-                          <Match when={isDeleted()}>
-                            <span data-slot="session-review-change" data-type="removed">
-                              {i18n.t("ui.sessionReview.change.removed")}
-                            </span>
-                            <Show when={summary}>
-                              <DiffChanges appearance="standard" changes={diff()} />
-                            </Show>
-                          </Match>
-                          <Match when={!!mediaKind()}>
-                            <span data-slot="session-review-change" data-type="modified">
-                              {i18n.t("ui.sessionReview.change.modified")}
-                            </span>
-                          </Match>
-                          <Match when={true}>
-                            <DiffChanges appearance="standard" changes={diff()} />
-                          </Match>
-                        </Switch>
-                      </>
-                    )
-
                     return (
                       <Accordion.Item
                         value={diffCanRender() ? file : null!}
@@ -561,7 +524,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     <span data-slot="session-review-directory">{`\u202A${getDirectory(file)}\u202C`}</span>
                                   </Show>
                                   <span data-slot="session-review-filename">{getFilename(file)}</span>
-                                  <Show when={props.onViewFile && diffCanRender() && !props.changeSummary}>
+                                  <Show when={props.onViewFile && diffCanRender()}>
                                     <Tooltip appearance="standard" value={openFileLabel()} placement="top" gutter={4}>
                                       <button
                                         data-slot="session-review-view-button"
@@ -579,7 +542,29 @@ export const SessionReview = (props: SessionReviewProps) => {
                                 </div>
                               </div>
                               <div data-slot="session-review-trigger-actions">
-                                <Show when={!props.changeSummary || !diffCanRender()}>{changes()}</Show>
+                                <Switch>
+                                  <Match when={isAdded()}>
+                                    <div data-slot="session-review-change-group" data-type="added">
+                                      <span data-slot="session-review-change" data-type="added">
+                                        {i18n.t("ui.sessionReview.change.added")}
+                                      </span>
+                                      <DiffChanges appearance="standard" changes={diff()} />
+                                    </div>
+                                  </Match>
+                                  <Match when={isDeleted()}>
+                                    <span data-slot="session-review-change" data-type="removed">
+                                      {i18n.t("ui.sessionReview.change.removed")}
+                                    </span>
+                                  </Match>
+                                  <Match when={!!mediaKind()}>
+                                    <span data-slot="session-review-change" data-type="modified">
+                                      {i18n.t("ui.sessionReview.change.modified")}
+                                    </span>
+                                  </Match>
+                                  <Match when={true}>
+                                    <DiffChanges appearance="standard" changes={diff()} />
+                                  </Match>
+                                </Switch>
                                 <Show when={diffCanRender()}>
                                   <span data-slot="session-review-diff-chevron">
                                     <Icon name="chevron-down" size="small" />
@@ -589,22 +574,6 @@ export const SessionReview = (props: SessionReviewProps) => {
                             </div>
                           </Accordion.Trigger>
                         </StickyAccordionHeader>
-                        <Show when={props.changeSummary && expanded()}>
-                          <div data-slot="session-review-change-summary">
-                            {changes(true)}
-                            <Show when={props.onViewFile}>
-                              <Button
-                                data-slot="session-review-summary-open-file"
-                                size="small"
-                                variant="ghost"
-                                icon="open-file"
-                                onClick={() => props.onViewFile?.(file)}
-                              >
-                                {openFileLabel()}
-                              </Button>
-                            </Show>
-                          </div>
-                        </Show>
                         <Accordion.Content data-slot="session-review-accordion-content">
                           <div
                             data-slot="session-review-diff-wrapper"
@@ -652,8 +621,6 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     fileDiff={diff().fileDiff}
                                     preloadedDiff={diff().preloaded}
                                     diffStyle={diffStyle()}
-                                    overflow={props.overflow ?? "wrap"}
-                                    disableLineNumbers={props.disableLineNumbers}
                                     onRendered={() => {
                                       props.onDiffRendered?.()
                                     }}

packages/session-ui/src/components/session-turn.css

@@ -126,12 +126,9 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     cursor: pointer;
+    opacity: 0;
     transition: opacity 0.15s ease;
     margin-left: 4px;
-
-    @media (hover: hover) {
-      opacity: 0;
-    }
   }
 
   [data-component="session-turn-diffs-group"]:hover [data-slot="session-turn-diffs-toggle"] {

packages/session-ui/src/components/tool-error-card.css

@@ -123,13 +123,10 @@
     position: absolute;
     top: 0;
     right: 0;
+    opacity: 0;
+    pointer-events: none;
     transition: opacity 0.15s ease;
     will-change: opacity;
-
-    @media (hover: hover) {
-      opacity: 0;
-      pointer-events: none;
-    }
   }
 
   &:hover [data-slot="tool-error-card-copy"],

packages/session-ui/src/pierre/index.ts

@@ -137,19 +137,6 @@ const unsafeCSS = `
   color: var(--diffs-selection-number-fg);
 }
 
-@media (max-width: 767px) {
-  /* File annotations share the code column; reclaim the measured number gutter. */
-  [data-file] [data-line-annotation] {
-    margin-inline-start: calc(-1 * var(--diffs-column-number-width, 0px));
-    z-index: 4;
-  }
-
-  [data-file] [data-annotation-content] {
-    width: var(--diffs-column-width, auto);
-    inset-inline-start: 0;
-  }
-}
-
 @media (pointer: fine) {
   [data-gutter-utility-slot] {
     opacity: 0;

packages/tui/src/component/prompt/autocomplete.tsx

@@ -36,7 +36,6 @@ import {
 export type AutocompleteRef = {
   onInput: (value: string) => void
   visible: false | "reference" | "command" | "directory"
-  completeQueueableCommand: () => boolean
 }
 
 export type AutocompleteOption = {
@@ -51,7 +50,6 @@ export type AutocompleteOption = {
   absolute?: string
   destructive?: { id: string; confirm: string; run: () => void }
   kind?: "skill"
-  queueable?: boolean
 }
 
 type AutocompleteResults = {
@@ -544,7 +542,6 @@ export function Autocomplete(props: {
       results.push({
         display: "/" + serverCommand.name,
         description: serverCommand.description,
-        queueable: true,
         onSelect: () => insertSlash(serverCommand.name),
       })
     }
@@ -735,7 +732,6 @@ export function Autocomplete(props: {
     mode: "autocomplete",
     target: props.input,
     enabled: () => Boolean(store.visible),
-    bindings: ["prompt.queue"],
     commands: [
       {
         id: "prompt.autocomplete.prev",
@@ -841,11 +837,6 @@ export function Autocomplete(props: {
       get visible() {
         return store.visible
       },
-      completeQueueableCommand() {
-        if (store.visible !== "command" || !options()[store.selected]?.queueable) return false
-        select()
-        return true
-      },
       onInput(value) {
         if (dismissedValue() === value) return
         setDismissedValue(undefined)

packages/tui/src/component/prompt/index.tsx

@@ -468,7 +468,6 @@ export function Prompt(props: PromptProps) {
           event?.preventDefault()
           event?.stopPropagation()
           if (!input.focused) return
-          if (auto()?.visible && !auto()?.completeQueueableCommand()) return
           const handled = await submit("queue")
           if (!handled) return
           dialog.clear()

packages/tui/src/mini/footer.prompt.tsx

@@ -843,7 +843,7 @@ export function createPromptState(input: PromptInput): PromptState {
     }
   }
 
-  const select = (item?: PromptOption, delivery: RunDelivery = "steer") => {
+  const select = (item?: PromptOption) => {
     const next = item ?? options()[menu.selected()]
     if (!next || !area || area.isDestroyed) {
       return
@@ -920,7 +920,7 @@ export function createPromptState(input: PromptInput): PromptState {
       hide()
       syncDraft()
       if (!shell()) {
-        submitPrompt(promptCopy(draft), delivery)
+        submitPrompt(promptCopy(draft))
         return
       }
 
@@ -1047,7 +1047,7 @@ export function createPromptState(input: PromptInput): PromptState {
 
   Keymap.createLayer(() => ({
     priority: 1,
-    enabled: input.prompt() && (!visible() || mode() === "slash"),
+    enabled: input.prompt() && !visible(),
     commands: [
       {
         id: "prompt.queue",
@@ -1059,13 +1059,6 @@ export function createPromptState(input: PromptInput): PromptState {
           submitPrompt(promptCopy(draft), "queue")
         },
       },
-    ],
-  }))
-
-  Keymap.createLayer(() => ({
-    priority: 1,
-    enabled: input.prompt() && !visible(),
-    commands: [
       {
         id: "prompt.editor",
         title: "Open editor",
@@ -1208,7 +1201,7 @@ export function createPromptState(input: PromptInput): PromptState {
 
     if (visible()) {
       if (mode() !== "slash" || options().length > 0) {
-        select(undefined, delivery)
+        select()
         return
       }
 

packages/tui/test/context/session-tabs.test.tsx

@@ -864,32 +864,20 @@ test("closing a tab is not undone by another TUI viewing the same session", asyn
     clients.push(first)
     const second = await renderSessionTabs("shared", { state: temporary.path })
     clients.push(second)
-    await wait(() => first.tabs.tabs().some((tab) => tab.sessionID === "shared"), 2_000, "first tab to open")
-    await wait(() => second.tabs.tabs().some((tab) => tab.sessionID === "shared"), 2_000, "second tab to open")
-    await Promise.all([first.flush(), second.flush()])
+    await wait(() => first.tabs.tabs().some((tab) => tab.sessionID === "shared"))
+    await wait(() => second.tabs.tabs().some((tab) => tab.sessionID === "shared"))
     first.tabs.close()
-    await wait(() => first.route.data.type === "home", 2_000, "first client to navigate home")
-    await first.flush()
-    await wait(
-      () => !second.tabs.tabs().some((tab) => tab.sessionID === "shared"),
-      2_000,
-      "second client to observe close",
-    )
-    await second.flush()
+    await wait(() => first.route.data.type === "home")
+    await wait(() => !second.tabs.tabs().some((tab) => tab.sessionID === "shared"))
+    await Promise.all([first.flush(), second.flush()])
 
     const stored = await Bun.file(path.join(temporary.path, "test", "tui", "tabs.json")).json()
     expect(stored.cwd[directory].tabs).toEqual([])
 
     second.route.navigate({ type: "home" })
-    await wait(() => second.route.data.type === "home", 2_000, "second client to navigate home")
+    await wait(() => second.route.data.type === "home")
     second.route.navigate({ type: "session", sessionID: "shared" })
-    await wait(() => second.tabs.tabs().some((tab) => tab.sessionID === "shared"), 2_000, "second client to reopen tab")
-    await second.flush()
-    await wait(
-      () => first.tabs.tabs().some((tab) => tab.sessionID === "shared"),
-      2_000,
-      "first client to observe reopen",
-    )
+    await wait(() => first.tabs.tabs().some((tab) => tab.sessionID === "shared"))
   } finally {
     await Promise.allSettled(clients.map((client) => client.destroy()))
   }

packages/ui/src/data-display/accordion/accordion.css

@@ -50,10 +50,11 @@
         line-height: var(--line-height-large);
         letter-spacing: var(--letter-spacing-normal);
 
-        @media (hover: hover) {
-          &:hover:not([data-disabled]) {
-            background-color: var(--v2-overlay-simple-overlay-hover);
-          }
+        &:hover:not([data-disabled]) {
+          background-color: var(--v2-overlay-simple-overlay-hover);
+        }
+        &:active:not([data-disabled]) {
+          background-color: var(--v2-overlay-simple-overlay-pressed);
         }
         &:focus-visible {
           outline: none;

packages/ui/src/styles/base.css

@@ -401,9 +401,4 @@ input:where([type="button"], [type="reset"], [type="submit"]),
   [contenteditable="true"] {
     font-size: 16px !important;
   }
-
-  input::placeholder,
-  textarea::placeholder {
-    font-size: 13px;
-  }
 }

packages/util/src/bom.test.ts

@@ -1,21 +0,0 @@
-import { expect, test } from "bun:test"
-import { Bom } from "./bom.js"
-
-test.each([
-  { prefix: "", bom: false, expected: undefined },
-  { prefix: "", bom: true, expected: "\uFEFF" },
-  { prefix: "\uFEFF", bom: false, expected: "" },
-  { prefix: "\uFEFF", bom: true, expected: undefined },
-  { prefix: "\uFEFF\uFEFF", bom: false, expected: "" },
-  { prefix: "\uFEFF\uFEFF", bom: true, expected: "\uFEFF" },
-])("syncBytes(%j)", (row) => {
-  const encoder = new TextEncoder()
-  const text = "a\uFEFF\u00e9"
-  const input = encoder.encode(row.prefix + text)
-
-  expect(Bom.syncBytes(input, row.bom)).toEqual({
-    text,
-    bytes: row.expected === undefined ? undefined : encoder.encode(row.expected + text),
-  })
-  expect(input).toEqual(encoder.encode(row.prefix + text))
-})

packages/util/src/bom.ts

@@ -27,7 +27,7 @@ export function decodeBytes(content: Uint8Array) {
 export function syncBytes(content: Uint8Array, bom: boolean) {
   const decoded = decode(content)
   const current = split(decoded)
-  const canonical = bom ? value + current.text : current.text
+  const canonical = join(current.text, bom)
   return { text: current.text, bytes: decoded === canonical ? undefined : new TextEncoder().encode(canonical) }
 }