feat(core): add project update API

feat(core): run worktree setup scripts
fix(app): navigate parent with escape (#44441 )
2026-08-23 18:16:18 +00:00 · 2026-08-23 16:26:51 +00:00 · 2026-08-23 16:19:44 +00:00 · 2026-08-23 23:45:29 +08:00 · 2026-08-23 23:43:17 +08:00 · 2026-08-23 15:34:40 +00:00
156 changed files with 3283 additions and 801 deletions
@@ -195,9 +195,33 @@ jobs:
          path: packages/cli/dist/cli-*
          if-no-files-found: error

-  build-node-cli:
+  build-node-app-archive:
    needs: version
-    if: github.repository == 'anomalyco/opencode' && false # Temporarily disabled
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    timeout-minutes: 30
+    if: github.repository == 'anomalyco/opencode'
+    steps:
+      - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: ./.github/actions/setup-bun
+
+      - name: Build app archive
+        run: bun packages/cli/script/build-node.ts --app-archive-only --app-archive=.cache/app-archive.bin --skip-install
+        env:
+          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
+          OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
+
+      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: opencode-node-app-archive
+          path: packages/cli/.cache/app-archive.bin
+          if-no-files-found: error
+
+  build-node-cli:
+    needs:
+      - version
+      - build-node-app-archive
+    if: github.repository == 'anomalyco/opencode'
    strategy:
      fail-fast: false
      matrix:
@@ -210,6 +234,7 @@ jobs:
            host: macos-26
          - target: windows-arm64
            host: blacksmith-4vcpu-windows-2025
+            bun_install_flags: --cpu=*
          - target: windows-x64
            host: blacksmith-4vcpu-windows-2025
    runs-on: ${{ matrix.settings.host }}
@@ -221,14 +246,19 @@ jobs:

      - uses: ./.github/actions/setup-bun
        with:
-          install-flags: --os=* --cpu=*
+          install-flags: ${{ matrix.settings.bun_install_flags }}

      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "26.4.0"

+      - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          name: opencode-node-app-archive
+          path: packages/cli/.cache
+
      - name: Build
-        run: bun packages/cli/script/build-node.ts --target=${{ matrix.settings.target }} --skip-install --outdir=dist/node
+        run: bun packages/cli/script/build-node.ts --target=${{ matrix.settings.target }} --skip-install --outdir=dist/node --app-archive=.cache/app-archive.bin
        env:
          OPENCODE_VERSION: ${{ needs.version.outputs.version }}
          OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
@@ -543,6 +573,7 @@ jobs:
      - version
      - build-cli
      - sign-cli-macos
+      - build-node-app-archive
      - build-node-cli
      - sign-cli-windows
      - build-electron
@@ -54,6 +54,7 @@
      "name": "@opencode-ai/app",
      "version": "1.18.15",
      "dependencies": {
+        "@ibm/plex": "6.4.1",
        "@corvu/drawer": "catalog:",
        "@dnd-kit/abstract": "0.5.0",
        "@dnd-kit/dom": "0.5.0",
@@ -593,8 +594,8 @@
      },
      "peerDependencies": {
        "@opencode-ai/theme": "workspace:*",
-        "@opentui/core": ">=0.5.6",
-        "@opentui/solid": ">=0.5.6",
+        "@opentui/core": ">=0.5.7",
+        "@opentui/solid": ">=0.5.7",
        "solid-js": ">=1.9.0",
      },
      "optionalPeers": [
@@ -717,7 +718,6 @@
        "luxon": "catalog:",
        "marked": "catalog:",
        "mermaid": "11.16.1",
-        "morphdom": "2.7.8",
        "motion": "12.34.5",
        "remeda": "catalog:",
        "remend": "catalog:",
@@ -727,6 +727,7 @@
        "strip-ansi": "7.1.2",
      },
      "devDependencies": {
+        "@happy-dom/global-registrator": "20.0.11",
        "@tsconfig/node22": "catalog:",
        "@types/bun": "catalog:",
        "@types/luxon": "catalog:",
@@ -1088,9 +1089,9 @@
    "@npmcli/arborist": "9.4.0",
    "@octokit/rest": "22.0.0",
    "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@opentui/core": "0.5.6",
-    "@opentui/keymap": "0.5.6",
-    "@opentui/solid": "0.5.6",
+    "@opentui/core": "0.5.7",
+    "@opentui/keymap": "0.5.7",
+    "@opentui/solid": "0.5.7",
    "@pierre/diffs": "1.2.10",
    "@playwright/test": "1.59.1",
    "@sentry/solid": "10.36.0",
@@ -2216,27 +2217,27 @@

    "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.43.0", "", {}, "sha512-eSYWTm620tTk45EKSedaUL8MFYI8hW164hIXsgIHyxu3VobUB3fFCu5t0hQby6OoWRPsG1KkKUG2M5UadiLiVg=="],

-    "@opentui/core": ["@opentui/core@0.5.6", "", { "dependencies": { "bun-ffi-structs": "0.3.1", "diff": "9.0.0", "marked": "17.0.1", "string-width": "7.2.0", "strip-ansi": "7.1.2" }, "optionalDependencies": { "@opentui/core-darwin-arm64": "0.5.6", "@opentui/core-darwin-x64": "0.5.6", "@opentui/core-linux-arm64": "0.5.6", "@opentui/core-linux-arm64-musl": "0.5.6", "@opentui/core-linux-x64": "0.5.6", "@opentui/core-linux-x64-musl": "0.5.6", "@opentui/core-win32-arm64": "0.5.6", "@opentui/core-win32-x64": "0.5.6" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-e38H1VceXoSSOEYmhUeHDE3F3LHXn/sFEZ6NhbXkbYdrkdV+1MMTgEkGZJ9I5fHhBlJdGJ1LDTPw8V0ZSUXSyQ=="],
+    "@opentui/core": ["@opentui/core@0.5.7", "", { "dependencies": { "bun-ffi-structs": "0.3.1", "diff": "9.0.0", "marked": "17.0.1", "string-width": "7.2.0", "strip-ansi": "7.1.2" }, "optionalDependencies": { "@opentui/core-darwin-arm64": "0.5.7", "@opentui/core-darwin-x64": "0.5.7", "@opentui/core-linux-arm64": "0.5.7", "@opentui/core-linux-arm64-musl": "0.5.7", "@opentui/core-linux-x64": "0.5.7", "@opentui/core-linux-x64-musl": "0.5.7", "@opentui/core-win32-arm64": "0.5.7", "@opentui/core-win32-x64": "0.5.7" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-/XDabTkfBs2Wy2FhlC4jvzbpphYAs4SlnCRKYEvi+metlXNTSAshSs43wqZ9O4IPd0E4EcQqdfeQ0sdc3yPpYw=="],

-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.5.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-g/OOSSXuFlpLOhLHm8w8MsMh1oGVYlQ7QuW8l6oqG9KIkOg4hkYN5eFnpe6Px1p6cNCw5NOC+198WwdcKhQncg=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.5.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-75TDJgFD6hDoCElIX35Yg3TIRF/jhrtVQO/9snhjGuTsZ7bd0W88jUlvSXSNhqB3CX431rwgi47B+asWPDI1lQ=="],

-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.5.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-4+z7/CaV27u9JpdooMa6oRIpLwsaA5j1a2xz7Xzm8oWhakeKGZnW0wUJAfStn/sks3NK5tUpF+eKHa9oawGiEw=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.5.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-j+Dwu2yV8zahBFjnVIssYdPrHz/+pkd7xWxI+nHjV41V3c+scvH6vJY1U85VCVaoQs/zCH5xAJbmAAn7Sgeh8g=="],

-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-RAiRmosbg7DH4+ZuXRMjEmQmDAWhcRpuQKQ6bGL76nUd6wl/CufBiD7il/FQMQyUGzmQQH0Hu+pVQLz+kAkNJw=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-gWO9NWaivXRPc0XhEbxehj3ApyC1SW8Bf1cnHnME1zhw/EZNCNE3TQHgKwOnnNKtvlbhzLQjOI4OqyPYV8UcEQ=="],

-    "@opentui/core-linux-arm64-musl": ["@opentui/core-linux-arm64-musl@0.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-cMdxhADkuJW0Nkn7pTB43q5Djg4Ch5i3hlC4iLOVkbOgvckKqz8xJHdl7fuqVs8g5LaadGBmZqdlFKjXIMKl2g=="],
+    "@opentui/core-linux-arm64-musl": ["@opentui/core-linux-arm64-musl@0.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-RumSHTasIAWU7jPBKiTuEZG/m+prfQKCHhL3JAQnBLgp7eAB20XZGfSLVWDBgxkyKq1rHCUgLtZktC5ZAyKfTA=="],

-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-gzlNauPg5UT5UnWiSIlONRwKnkNA6fjN8SyRGlT3SGvcAox+vT2WeP6TwoJSM6pq5H5MF/tlY+REIqc/ZMGJtQ=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-fXDmrIlfp9xaoVkk3BNn3yUO/b7plBSOfUh2oWOezRA6E/g5z+hTO1alGFQCy+VV+1kfA6iuYadAww0xNtfACg=="],

-    "@opentui/core-linux-x64-musl": ["@opentui/core-linux-x64-musl@0.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-vb5mn1i1s8/3lp03O6lX3190eN+iVCZxXOl9qCO5BTCXWtFztyIkp5YDad3/20SptcOHcLPKDiRGWNmSkYBrkQ=="],
+    "@opentui/core-linux-x64-musl": ["@opentui/core-linux-x64-musl@0.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-1opDV+W7C1F4iWivCNKuYl5Hen+IeFXAuUPm3hVyN0UtdcP8LESpFJTr8QRwHpGSE9Jz1K2g2S2ipzI3u5mhgw=="],

-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.5.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-FTSpFrNyuh4k2Z3+KeLVLlryFpe89ZyQcqBE0XcmtgiU3RlXuoMPSj2TtRekukR/FaWw9toDBfWokiQjOJGjrA=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.5.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-gbiZUyttjq8s+bsnsaopygWN7LTS/RyzD6GOmpgOB2TVitvo0P6mxM+AebBGuu/7xri17Rqaxf3uqrgdKiJAeg=="],

-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.5.6", "", { "os": "win32", "cpu": "x64" }, "sha512-rWplkCuHX0OxVi7bO8dAVPttzPpCgmz6Bsu1XCm4ErPAhZOofRd5FbeW2+pC71AbLOKicSwI7lQ4mhGCNaweaA=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.5.7", "", { "os": "win32", "cpu": "x64" }, "sha512-bDwon45lUxbV3rMcekTCg4mXcBu9uhdG6HLeLK5TVZf05/h+Ibkf2UeZ8A2jjQt+MK6jpYmxWwDCVCTzZ7EU7Q=="],

-    "@opentui/keymap": ["@opentui/keymap@0.5.6", "", { "dependencies": { "@opentui/core": "0.5.6" }, "peerDependencies": { "@opentui/react": "0.5.6", "@opentui/solid": "0.5.6", "react": ">=19.2.0", "solid-js": "1.9.12" }, "optionalPeers": ["@opentui/react", "@opentui/solid", "react", "solid-js"] }, "sha512-1lR1aFRSgHCwN31YOHDQQVSqz1YNN7DsoIvWHjEiQJ12kTxHg9G7Q1HHFJttM838RWsNOvW6gBAhOr403VL8rg=="],
+    "@opentui/keymap": ["@opentui/keymap@0.5.7", "", { "dependencies": { "@opentui/core": "0.5.7" }, "peerDependencies": { "@opentui/react": "0.5.7", "@opentui/solid": "0.5.7", "react": ">=19.2.0", "solid-js": "1.9.12" }, "optionalPeers": ["@opentui/react", "@opentui/solid", "react", "solid-js"] }, "sha512-BqfSbjlLuctnew2aoPPdK3wpzJfEPp7ttLBkTu1wJTkps9AcfUgXqwloqvY4DUKjUBNFYYEpU/0CPxI4Blj4MA=="],

-    "@opentui/solid": ["@opentui/solid@0.5.6", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.5.6", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.12", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.12" } }, "sha512-kxmrQS31sgziW/qZDuFYuiT3CvcUQg9ZQA1qKCEb5mBoInur4fnECOdTaM2S8c3cidcV0z2yu41NP1Dypkl+BQ=="],
+    "@opentui/solid": ["@opentui/solid@0.5.7", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.5.7", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.12", "entities": "7.0.1", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.12" } }, "sha512-qrKAZd9xt4D67LXZUARg1Aw0dwEWi29GyOxpM6abqmyExGPMS7jih5Z9oMQJ9EXsouDKpW7Mejjq7WbX2AaecQ=="],

    "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],

@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-tvhHO7NdDnBWtyaOj+kVX0Tzcv3O0uISbHC4V71kA0M=",
-    "aarch64-linux": "sha256-x3F43TL7BisEuXlJw7QS/DJoSzZWuNxbgn7hFCsTdXU=",
-    "aarch64-darwin": "sha256-y2r5Qy/XNgnvuzpnGMtwV5ZmhksUN2AUPLjbb40HYIE=",
-    "x86_64-darwin": "sha256-TS68JE40IaEa7ny0ATPUnEj8EV1CKtnGTPpyvZFwO7A="
+    "x86_64-linux": "sha256-P8AZ2THuXiET4hiSYTwGGdTgbm2l3XGZGJxQwg6lusE=",
+    "aarch64-linux": "sha256-73LxDeDPQspY4Bn/gbGU43j/k7gBZ5ywMMpUjDl3elg=",
+    "aarch64-darwin": "sha256-sc9YyTAFlbWxlFb9vwFYLs6IYd3SRoju9mQufzeQdd8=",
+    "x86_64-darwin": "sha256-nnk637DELjzGB3t9aLDYbHz5h3Dd3nvWcWGdaQk8yPM="
  }
 }
@@ -49,9 +49,9 @@
      "@octokit/rest": "22.0.0",
      "@hono/standard-validator": "0.2.0",
      "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.5.6",
-      "@opentui/keymap": "0.5.6",
-      "@opentui/solid": "0.5.6",
+      "@opentui/core": "0.5.7",
+      "@opentui/keymap": "0.5.7",
+      "@opentui/solid": "0.5.7",
      "@tanstack/solid-virtual": "3.13.37",
      "@shikijs/stream": "4.2.0",
      "@standard-schema/spec": "1.1.0",
@@ -19,6 +19,12 @@

 - Always prefer `createStore` over multiple `createSignal` calls

+## Typography
+
+- Use `--line-height-compact` (`16px`) for `13px` compact UI text and `--line-height-base` (`20px`) for body text.
+- Do not use `leading-none`, `line-height: 1`, or a `13px` line height for normal text. Inter descenders clip inside truncation and overflow containers.
+- Keep control and row heights explicit. Fix font metrics directly rather than using transforms, negative margins, or clip-padding compensation.
+
 ## Localization

 - NEVER hardcode user-visible English strings in production code. ALWAYS use an i18n key for visible copy, placeholders, accessible labels, tooltips, menus, dialogs, toasts, empty states, and displayed errors.
@@ -259,6 +259,22 @@ export function event(
  return makeEvent(type, data)
 }

+export function compactionStarted(data: Extract<OpenCodeEvent, { type: "session.compaction.started" }>["data"]) {
+  return makeEvent("session.compaction.started", data)
+}
+
+export function compactionDelta(data: Extract<OpenCodeEvent, { type: "session.compaction.delta" }>["data"]) {
+  return makeEvent("session.compaction.delta", data)
+}
+
+export function compactionEnded(data: Extract<OpenCodeEvent, { type: "session.compaction.ended" }>["data"]) {
+  return makeEvent("session.compaction.ended", data)
+}
+
+export function compactionFailed(data: Extract<OpenCodeEvent, { type: "session.compaction.failed" }>["data"]) {
+  return makeEvent("session.compaction.failed", data)
+}
+
 export function toolInputStarted(data: Extract<OpenCodeEvent, { type: "session.tool.input.started" }>["data"]) {
  return makeEvent("session.tool.input.started", data)
 }
@@ -53,6 +53,37 @@ benchmark.describe("performance: first navigation paint", () => {
    expect(result.summary.unknownSamples).toBe(0)
  })

+  benchmark("opens a session from the new session page without a blank frame", async ({ page, report }) => {
+    await mockStressTimeline(page)
+    await installTimelineSettings(page)
+    await installStressSessionTabs(page, { draftID })
+    await page.goto("/")
+
+    const draftHref = stressDraftHref(draftID)
+    const draftTab = page.locator(`[data-slot="titlebar-tabs"] a[href="${draftHref}"]`)
+    await expect(draftTab).toHaveCount(1)
+    await draftTab.click()
+    await expect(page.locator('[data-component="new-session"]')).toBeVisible()
+
+    const href = stressSessionHref(fixture.targetID)
+    const sessionTab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`)
+    await expect(sessionTab).toHaveCount(1)
+    const result = await measureFirstNavigation(page, {
+      href,
+      destinationPath: href,
+      sourceSelector: '[data-component="new-session"]',
+      destinationSelector: messageSelector(fixture.expected.targetMessageIDs.at(-1)!),
+      contentSelector,
+      navigate: async () => {
+        await sessionTab.click()
+        await expectSessionTitle(page, fixture.expected.targetTitle)
+      },
+    })
+    report(result)
+    expect(result.summary.blankSamples).toBe(0)
+    expect(result.summary.unknownSamples).toBe(0)
+  })
+
  benchmark("opens a child session without a blank frame", async ({ page, report }) => {
    await setup(page)
    const href = stressSessionHref(fixture.childID)
@@ -45,21 +45,17 @@ test("opens the comment editor for a line number range", async ({ page }) => {
  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on lines 1-3")
 })

-test("shows a comment button when a line number is hovered", async ({ page }) => {
+test("shows a comment button when a diff line is hovered", async ({ page }) => {
  const review = page.locator('[data-component="session-review"]')
-  const lineNumber = review.locator('[data-column-number="1"]').last()
-  await expectAppVisible(lineNumber)
+  const line = review.getByText("export const first = 1", { exact: true })
+  await expectAppVisible(line)

-  const comment = review.getByRole("button", { name: "Comment", exact: true })
-  await expect(async () => {
-    await lineNumber.hover()
-    await expect(lineNumber).toHaveAttribute("data-hovered", "")
-    await expect(comment).toHaveCount(1)
-    await expect(comment).toHaveCSS("pointer-events", "auto")
-    await comment.focus()
-    await expect(comment).toBeFocused()
-  }).toPass({ timeout: 10_000 })
-  await comment.press("Enter")
+  const comment = review.getByRole("button", { name: "Comment", exact: true, includeHidden: true })
+  await expect(comment).toHaveCount(1)
+  await line.dispatchEvent("pointermove", { pointerType: "mouse", bubbles: true, composed: true })
+  await expect(comment).toBeVisible()
+  await expect(comment).toHaveCSS("pointer-events", "auto")
+  await comment.dispatchEvent("click")
  await expect(review.getByRole("textbox")).toBeVisible()
  await expect(review.locator('[data-slot="line-comment-editor-label"]')).toHaveText("Commenting on line 1")
 })
@@ -139,7 +139,7 @@ test.describe("regression: session timeline local row state", () => {
    expect(siblingProbe).toEqual({
      fileMarker: "before",
      frameMarker: "before",
-      rowKey: `assistant-part:${userMessageID}:part:${assistantMessageID}:${editPartID}`,
+      rowKey: `assistant-part:part:${assistantMessageID}:${editPartID}`,
      rowMarker: "before",
      shadowRoots: 0,
      toolMarker: "before",
@@ -3,9 +3,9 @@ import { createTwoFilesPatch } from "diff"
 import {
  assistantMessage,
  setupTimeline,
-  textPart,
  toolPart,
  userMessage,
+  userText,
 } from "../performance/timeline-stability/fixture"

 test("renders completed write content", async ({ page }) => {
@@ -82,9 +82,9 @@ test("keeps an expanded file diff header at the same viewport position", async (
  const id = "prt_file_projection_anchored_patch"
  const before = Array.from({ length: 80 }, (_, index) => `export const value${index} = ${index}\n`).join("")
  const after = before.replaceAll(" = ", " = compute(").replaceAll("\n", ")\n")
-  const timeline = await setupTimeline(page, {
+  await setupTimeline(page, {
    messages: [
-      userMessage(),
+      userMessage([userText("Preceding context ".repeat(120))]),
      assistantMessage([
        toolPart(
          id,
@@ -105,7 +105,6 @@ test("keeps an expanded file diff header at the same viewport position", async (
            },
          },
        ),
-        textPart("prt_after_anchored_patch", "The diff is ready.\n\n".repeat(4)),
      ]),
    ],
    viewport: { width: 1200, height: 600 },
@@ -113,7 +112,21 @@ test("keeps an expanded file diff header at the same viewport position", async (

  const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
  const wrapper = page.locator(`[data-timeline-part-id="${id}"]`)
+  const row = page.locator("[data-timeline-key]", { has: wrapper })
  const trigger = wrapper.getByRole("button")
+  await expect
+    .poll(() =>
+      row.evaluate((element) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        return measured
+          ? Math.abs(element.getBoundingClientRect().height - measured.getBoundingClientRect().height)
+          : Number.POSITIVE_INFINITY
+      }),
+    )
+    .toBeLessThanOrEqual(1)
+  await expect
+    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight))
+    .toBeGreaterThan(1)
  await scroller.evaluate((element) => {
    element.scrollTop = element.scrollHeight - element.clientHeight - 0.25
  })
@@ -121,11 +134,28 @@ test("keeps an expanded file diff header at the same viewport position", async (
  await expect
    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
    .toBeLessThanOrEqual(0.5)
-  await trigger.dispatchEvent("wheel", { deltaY: -1, deltaMode: 0 })
-  await trigger.dispatchEvent("pointerdown")
+  const bottomScrollTop = await scroller.evaluate((element) => element.scrollTop)
+  await scroller.hover()
+  await page.mouse.wheel(0, -20)
+  await expect
+    .poll(() => scroller.evaluate((element, bottom) => bottom - element.scrollTop, bottomScrollTop))
+    .toBeGreaterThan(0)
  const y = await trigger.evaluate((element) => element.getBoundingClientRect().y)
-  await trigger.dispatchEvent("click")
+  const collapsedHeight = await row.evaluate((element) => element.getBoundingClientRect().height)
+  await trigger.click()
  await expect(wrapper.locator('[data-component="apply-patch-file-diff"]')).toBeVisible()
+  await expect
+    .poll(() =>
+      row.evaluate((element, collapsed) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        const allocatedHeight = element.getBoundingClientRect().height
+        return {
+          grew: allocatedHeight > collapsed + 1,
+          measured: measured ? Math.abs(allocatedHeight - measured.getBoundingClientRect().height) <= 1 : false,
+        }
+      }, collapsedHeight),
+    )
+    .toEqual({ grew: true, measured: true })
  await expect
    .poll(() => trigger.evaluate((element, initialY) => Math.abs(element.getBoundingClientRect().y - initialY), y))
    .toBeLessThanOrEqual(5)
@@ -133,9 +163,10 @@ test("keeps an expanded file diff header at the same viewport position", async (
  const scrollTop = await scroller.evaluate((element) => element.scrollTop)
  await scroller.hover()
  await page.mouse.wheel(0, 200)
-  await timeline.settle(40)
+  await expect
+    .poll(() => scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop))
+    .toBeGreaterThan(50)
  const scrolled = await scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop)
-  expect(scrolled).toBeGreaterThan(50)
  expect(scrolled).toBeLessThan(400)

  const expandedY = await trigger.evaluate((element) => element.getBoundingClientRect().y)
@@ -150,6 +181,16 @@ test("keeps an expanded file diff header at the same viewport position", async (

  await trigger.click()
  await expect(wrapper.locator('[data-component="apply-patch-file-diff"]')).toBeVisible()
+  await expect
+    .poll(() =>
+      row.evaluate((element) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        return measured
+          ? Math.abs(element.getBoundingClientRect().height - measured.getBoundingClientRect().height)
+          : Number.POSITIVE_INFINITY
+      }),
+    )
+    .toBeLessThanOrEqual(1)
  await expect
    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
    .toBeLessThanOrEqual(1)
@@ -17,7 +17,7 @@ import { mockOpenCodeServer } from "../utils/mock-server"
 import { installSseTransport } from "../utils/sse-transport"
 import { expectSessionTitle } from "../utils/waits"

-const messagePageSize = 200
+const messagePageSize = 20
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const messages = Array.from({ length: messagePageSize / 2 + 1 }, (_, index) => {
  const id = `msg_${String(index + 1001).padStart(4, "0")}_history_root_user`
@@ -1,6 +1,15 @@
 import { expect, test } from "@playwright/test"
 import type { SessionMessageAssistant, SessionMessageInfo } from "@opencode-ai/client/promise"
-import { event, session, sessionID, setupTimeline, toolPart } from "../performance/timeline-stability/fixture"
+import {
+  compactionDelta,
+  compactionEnded,
+  compactionFailed,
+  compactionStarted,
+  event,
+  session,
+  sessionID,
+  setupTimeline,
+} from "../performance/timeline-stability/fixture"

 const user = { id: "msg_user", type: "user", text: "Run it", time: { created: 1 } } satisfies SessionMessageInfo

@@ -73,23 +82,102 @@ test("renders current protocol notices in CLI order", async ({ page }) => {
  expect(ownerWarnings).toEqual([])
 })

+test("renders a compaction summary while it streams and after completion", async ({ page }) => {
+  const timeline = await setupTimeline(page, { sessionMessages: [user, assistant(true)] })
+
+  await timeline.send(
+    compactionStarted({
+      sessionID,
+      reason: "manual",
+      recent: "",
+    }),
+  )
+
+  const compaction = page.locator('[data-component="session-compaction-message"]')
+  await expect(compaction.getByText("Session compacted", { exact: true })).toBeVisible()
+
+  await timeline.send(
+    compactionDelta({
+      sessionID,
+      text: "## Checkpoint\n\nStreamed implementation details.",
+    }),
+  )
+  await expect(compaction.getByRole("heading", { name: "Checkpoint" })).toBeVisible()
+  await expect(compaction).toContainText("Streamed implementation details.")
+
+  await timeline.send(
+    compactionEnded({
+      sessionID,
+      reason: "manual",
+      text: "## Checkpoint\n\nFinal implementation details.",
+      recent: "",
+    }),
+  )
+  await expect(compaction).toContainText("Final implementation details.")
+  await expect(compaction).not.toContainText("Streamed implementation details.")
+})
+
+test("updates running compactions to failed and cancelled boundaries", async ({ page }) => {
+  const timeline = await setupTimeline(page, { sessionMessages: [user, assistant(true)] })
+
+  await timeline.send(compactionStarted({ sessionID, reason: "auto", recent: "" }))
+  await timeline.send(compactionDelta({ sessionID, text: "Partial summary that should be discarded." }))
+  await timeline.send(
+    compactionFailed({
+      sessionID,
+      reason: "auto",
+      error: {
+        type: "compaction.failed",
+        message: 'Error: {"error":{"type":"ProviderError","message":"The provider rejected the summary."}}',
+      },
+    }),
+  )
+
+  const compactions = page.locator('[data-component="session-compaction-message"]')
+  const failed = compactions.filter({ hasText: "The provider rejected the summary." })
+  await expect(failed.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect(failed.getByText("ProviderError: The provider rejected the summary.", { exact: true })).toBeVisible()
+  await expect(failed).not.toContainText("Partial summary that should be discarded.")
+
+  await timeline.send(compactionStarted({ sessionID, reason: "manual", recent: "" }))
+  await timeline.send(
+    compactionFailed({
+      sessionID,
+      reason: "manual",
+      error: { type: "aborted", message: "Cancellation detail should stay hidden." },
+    }),
+  )
+
+  await expect(compactions).toHaveCount(2)
+  const cancelled = compactions.filter({ hasNotText: "The provider rejected the summary." })
+  await expect(cancelled.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect(cancelled).not.toContainText("Cancellation detail should stay hidden.")
+})
+
 test("shows a delegating row while subagent input streams", async ({ page }) => {
  await setupTimeline(page, {
    sessionMessages: [
      user,
      {
        ...assistant(false),
-        content: [toolPart("call_subagent", "subagent", "streaming", {})],
+        content: [
+          {
+            type: "tool",
+            id: "call_subagent",
+            name: "subagent",
+            state: { status: "streaming", input: "" },
+            time: { created: 2 },
+          },
+        ],
      },
    ],
  })

  const delegating = page.locator('[data-component="task-tool-delegating"]')
  await expect(delegating).toBeVisible()
-  await expect(delegating.locator('[data-component="text-shimmer"]')).toHaveAttribute(
-    "aria-label",
-    "Delegating agent...",
-  )
+  const shimmer = delegating.locator('[data-component="text-shimmer"]')
+  await expect(shimmer).toHaveAttribute("aria-label", "Delegating agent...")
+  await expect(shimmer).toHaveCSS("line-height", "16px")
  const icon = delegating.locator('[data-slot="icon-svg"]')
  await expect(icon.locator('use[href="#opencode-v2-icon-subagent"]')).toBeVisible()
  await expect(icon).toHaveCSS("color", "rgb(174, 174, 174)")
@@ -127,11 +215,11 @@ test("renders the moved location notice in its compact timeline style", async ({
  await expect(notice).toHaveCSS("padding-bottom", "4px")
  await expect(label).toHaveCSS("font-size", "13px")
  await expect(label).toHaveCSS("font-weight", "530")
-  await expect(label).toHaveCSS("line-height", "13px")
+  await expect(label).toHaveCSS("line-height", "16px")
  await expect(label).toHaveCSS("color", "rgb(128, 128, 128)")
  await expect(value).toHaveCSS("font-size", "13px")
  await expect(value).toHaveCSS("font-weight", "440")
-  await expect(value).toHaveCSS("line-height", "13px")
+  await expect(value).toHaveCSS("line-height", "16px")
  await expect(value).toHaveCSS("color", "rgb(128, 128, 128)")
  await expect(value).toHaveCSS("text-overflow", "ellipsis")
  await expect(value).toHaveCSS("white-space", "nowrap")
@@ -98,9 +98,9 @@ test("labels completed searches with result counts", async ({ page }) => {

  const group = page.locator(`[data-timeline-part-ids="${glob},${grep}"]`)
  await group.locator('[data-slot="collapsible-trigger"]').click()
-  const rows = group.locator('[data-component="tool-trigger"]')
-  await expect(rows.nth(0)).toContainText("(1 match)")
-  await expect(rows.nth(1)).toContainText("(12 matches)")
+  const rows = group.locator('[data-component="context-tool-group-list"] [data-component="tool-trigger"]')
+  await expect(rows.filter({ hasText: "Glob" })).toContainText("(1 match)")
+  await expect(rows.filter({ hasText: "Grep" })).toContainText("(12 matches)")
 })

 test("labels read tools from their path input", async ({ page }) => {
@@ -111,7 +111,11 @@ test("labels read tools from their path input", async ({ page }) => {

  const group = page.locator(`[data-timeline-part-ids="${id}"]`)
  await group.locator('[data-slot="collapsible-trigger"]').click()
-  await expect(group.locator('[data-slot="basic-tool-tool-subtitle"]')).toHaveText("a.ts")
+  await expect(
+    group
+      .locator('[data-component="context-tool-group-list"] [data-component="tool-trigger"]')
+      .filter({ hasText: "Read" }),
+  ).toContainText("a.ts")
 })

 test("labels skill tools from IDs and result metadata", async ({ page }) => {
@@ -121,19 +125,20 @@ test("labels skill tools from IDs and result metadata", async ({ page }) => {
    messages: [
      userMessage(),
      assistantMessage([
-        toolPart(pending, "skill", "running", { id: "sample-skill" }),
+        toolPart(pending, "skill", "running", { id: "frontend-design" }),
        toolPart(completed, "skill", "completed", { id: "opencode" }, { metadata: { name: "OpenCode" } }),
      ]),
    ],
  })

  for (const [id, name] of [
-    [pending, "sample-skill"],
+    [pending, "frontend-design"],
    [completed, "OpenCode"],
  ] as const) {
    const skill = page.locator(`[data-timeline-part-id="${id}"]`)
    const loaded = skill.locator('[data-component="tool-loaded-item"]')
    await expect(loaded).toHaveAttribute("aria-label", `Loaded ${name} skill`)
+    await expect(loaded).toHaveCSS("line-height", "16px")
    await expect(loaded.locator('[data-slot="tool-loaded-label"]')).toHaveText("Loaded")
    await expect(loaded.locator('[data-slot="tool-loaded-kind"]')).toHaveText("skill")
    await expect(loaded.locator('[data-component="text-shimmer"]')).toHaveAttribute("aria-label", name)
@@ -26,6 +26,42 @@ test("navigates to a subagent child session missing from the session list", asyn
  await expect(titlebarRight.getByRole("button", { name: "Toggle review" })).toHaveCount(1)
 })

+test("returns to the parent session with Escape", async ({ page }) => {
+  await setup(page)
+  await openChildFromParent(page)
+  await expectSessionTitle(page, taskDescription)
+
+  await page.keyboard.press("Escape")
+
+  await Promise.all([expect(page).toHaveURL(sessionHref(parentID)), expectSessionTitle(page, parentTitle)])
+})
+
+test("shows parent lineage while the child timeline loads", async ({ page }) => {
+  await setup(page)
+  const requested = Promise.withResolvers<void>()
+  const release = Promise.withResolvers<void>()
+  await page.route(
+    (url) =>
+      url.pathname === `/api/session/${childID}/message` &&
+      url.port === (process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"),
+    async (route) => {
+      requested.resolve()
+      await release.promise
+      await route.fallback()
+    },
+  )
+
+  await page.goto(sessionHref(parentID))
+  await expectSessionTitle(page, parentTitle)
+  await page.locator(`a[href="${sessionHref(childID)}"]`).click()
+  await Promise.all([requested.promise, expect(page).toHaveURL(sessionHref(childID))])
+  await Promise.all([
+    expect(page.locator('[data-slot="session-title-parent"]')).toHaveText(parentTitle),
+    expect(page.locator('[data-slot="session-title-child"]')).toHaveText(childTitle),
+  ]).finally(() => release.resolve())
+  await expectSessionTitle(page, taskDescription)
+})
+
 test("keeps the parent visible while the child session resolves", async ({ page }) => {
  await setup(page)
  const requested = Promise.withResolvers<void>()
@@ -50,6 +86,44 @@ test("keeps the parent visible while the child session resolves", async ({ page
  await expectSessionTitle(page, taskDescription)
 })

+test("keeps the parent tab selected while a loaded child session resolves", async ({ page }) => {
+  await setup(page)
+  await openChildFromParent(page)
+  await expectSessionTitle(page, taskDescription)
+  await page.goBack()
+  await Promise.all([expect(page).toHaveURL(sessionHref(parentID)), expectSessionTitle(page, parentTitle)])
+
+  const requested = Promise.withResolvers<void>()
+  const release = Promise.withResolvers<void>()
+  await page.route(
+    (url) => url.pathname === `/api/session/${childID}` && url.port === (process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"),
+    async (route) => {
+      requested.resolve()
+      await release.promise
+      await route.fallback()
+    },
+  )
+
+  const parentTab = page.locator("[data-titlebar-tab-slot]", {
+    has: page.locator('[data-slot="tab-title"]', { hasText: parentTitle }),
+  })
+  await page.locator(`a[href="${sessionHref(childID)}"]`).click()
+  await Promise.all([requested.promise, expect(page).toHaveURL(sessionHref(childID))])
+  await Promise.all([
+    expect(parentTab).toHaveAttribute("data-active", "true"),
+    expect(page.locator('[data-slot="session-title-parent"]')).toHaveText(parentTitle),
+  ]).finally(() => release.resolve())
+  await expectSessionTitle(page, taskDescription)
+
+  const home = page.getByRole("button", { name: "Home" })
+  await home.click()
+  await expect(page).toHaveURL("/")
+  const childTab = page.locator(`[data-slot="titlebar-tabs"] a[href="${sessionHref(childID)}"]`)
+  await expect(childTab).toHaveCount(1)
+  await childTab.click()
+  await Promise.all([expect(page).toHaveURL(sessionHref(childID)), expectSessionTitle(page, taskDescription)])
+})
+
 test("shows the not found fallback when the viewed session is deleted", async ({ page }) => {
  const events: OpenCodeEvent[] = []
  await setup(page, () => events.splice(0, 1))
@@ -10,11 +10,13 @@ const ptyID = "pty_terminal_composer_focus"
 const newPtyID = "pty_terminal_composer_focus_new"
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const ptyInput: string[] = []
+let sendPtyOutput: ((data: string) => void) | undefined

 test.use({ viewport: { width: 1440, height: 900 } })

 test.beforeEach(async ({ page }) => {
  ptyInput.length = 0
+  sendPtyOutput = undefined
  await mockOpenCodeServer(page, {
    directory,
    project: {
@@ -74,6 +76,7 @@ test.beforeEach(async ({ page }) => {
  )
  await page.routeWebSocket(new RegExp(`/api/pty/${ptyID}/connect`), (ws) => {
    ws.onMessage((message) => ptyInput.push(message.toString()))
+    sendPtyOutput = (data) => ws.send(data)
  })
 })

@@ -90,6 +93,33 @@ test("clears the terminal line with Command+Delete", async ({ page }) => {
  await expect.poll(() => ptyInput.join("")).toBe("\x15")
 })

+test("hides the native contenteditable caret", async ({ page }) => {
+  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
+  await expectSessionTitle(page, "Terminal composer focus")
+
+  await page.keyboard.press("Control+Backquote")
+  const terminal = page.locator('[data-component="terminal"]')
+  await expect(terminal).toHaveAttribute("contenteditable", "true")
+  await expect(terminal).toHaveCSS("caret-color", "rgba(0, 0, 0, 0)")
+})
+
+test("reveals the terminal after its first server output renders", async ({ page }) => {
+  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
+  await expectSessionTitle(page, "Terminal composer focus")
+
+  await page.keyboard.press("Control+Backquote")
+  const terminal = page.locator('[data-component="terminal"]')
+  await expect(terminal).toHaveAttribute("contenteditable", "true")
+  await expect(terminal).toHaveCSS("opacity", "0")
+  await expect.poll(() => sendPtyOutput).toBeDefined()
+
+  sendPtyOutput?.("\x1b[?25h")
+  await expect(terminal).toHaveCSS("opacity", "0")
+
+  sendPtyOutput?.("ready")
+  await expect(terminal).toHaveCSS("opacity", "1")
+})
+
 test("routes typing to the composer unless the open terminal is focused", async ({ page }) => {
  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
  await expectSessionTitle(page, "Terminal composer focus")
@@ -358,7 +358,8 @@ test.describe("smoke: session timeline", () => {
    const shellTrigger = shell.locator('[data-slot="collapsible-trigger"]')
    const shellSubtitle = shell.locator('[data-slot="basic-tool-tool-subtitle"]')
    await expect(shellSubtitle).toHaveCount(0)
-    await expect(shell.locator('[data-slot="bash-pre"]')).toContainText("$ bun typecheck")
+    await expect(shell.locator('[data-slot="bash-command"]')).toHaveText("bun typecheck")
+    await expect(shell.locator('[data-slot="bash-result"]')).not.toContainText("bun typecheck")
    await shellTrigger.click()
    await expect(shellTrigger).toHaveAttribute("aria-expanded", "false")
    await expect(shellSubtitle).toHaveText("bun typecheck")
@@ -52,6 +52,7 @@
    "vite-plugin-solid": "2.11.14"
  },
  "dependencies": {
+    "@ibm/plex": "6.4.1",
    "@corvu/drawer": "catalog:",
    "@dnd-kit/abstract": "0.5.0",
    "@dnd-kit/dom": "0.5.0",
@@ -1,4 +1,5 @@
 import type { Data } from "@opencode-ai/client/solid"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
 import type { Accessor } from "solid-js"
 import type { ModelSelection } from "@/providers/models/selection"
 import type { ServerSDK } from "@/runtime/server/client"
@@ -41,6 +42,10 @@ export type ComposerSelection = {
 export type ComposerSession = {
  id: string
  directory: string
+  handoff?: {
+    set: (message: SessionMessageUser) => void
+    clear: (messageID: string) => void
+  }
  api: {
    command: (input: Parameters<ServerSDK["api"]["session"]["command"]>[0]) => Promise<unknown>
    shell: (input: Parameters<ServerSDK["api"]["session"]["shell"]>[0]) => Promise<unknown>
@@ -51,6 +56,7 @@ export type ComposerSession = {
    location: { command: Pick<Data["location"]["command"], "list"> }
    session: {
      prompt: (input: Parameters<Data["session"]["prompt"]>[0]) => Promise<unknown>
+      setStatus: Data["session"]["setStatus"]
    }
  }
  current: Accessor<{ agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined>
@@ -77,7 +83,7 @@ export type NewSessionComposerAdapter = ComposerAdapterBase & {
  start: (
    selection: ComposerSelection,
    submission: ReturnType<typeof createComposerSubmission>,
-  ) => Promise<ComposerSession | undefined>
+  ) => Promise<{ session: ComposerSession; cleanupReady: Promise<void> } | undefined>
 }

 export type ComposerAdapter = ActiveComposerAdapter | NewSessionComposerAdapter
@@ -29,7 +29,7 @@ export function Composer(props: {
        accentSubmit={props.accentSubmit}
        borderUnderlay={props.borderUnderlay}
        class={props.class}
-        variantControlVisible={!props.model.model.loading}
+        modelControlsVisible={!props.model.model.loading}
        attachKeybind={command.keybindParts("file.attach")}
        attachShortcut={command.keybind("file.attach")}
        modelControl={
@@ -42,7 +42,7 @@ export type ComposerEditorProps = {
  borderUnderlay?: boolean
  class?: string
  modelControl?: JSX.Element
-  variantControlVisible?: boolean
+  modelControlsVisible?: boolean
  attachKeybind?: string[]
  attachShortcut?: string
 }
@@ -233,17 +233,19 @@ export function ComposerEditor(props: ComposerEditorProps) {
                />
              )}
            </Show>
-            {props.modelControl}
-            <Show when={(props.variantControlVisible ?? true) && view.variant} keyed>
-              {(control) => (
-                <Show when={control.options().length > 1}>
-                  <ComposerEditorConfiguredSelect
-                    title={i18n.t("ui.promptInput.chooseVariant")}
-                    keybind={["Shift", "Mod", "D"]}
-                    control={control}
-                  />
-                </Show>
-              )}
+            <Show when={props.modelControlsVisible ?? true}>
+              {props.modelControl}
+              <Show when={view.variant} keyed>
+                {(control) => (
+                  <Show when={control.options().length > 1}>
+                    <ComposerEditorConfiguredSelect
+                      title={i18n.t("ui.promptInput.chooseVariant")}
+                      keybind={["Shift", "Mod", "D"]}
+                      control={control}
+                    />
+                  </Show>
+                )}
+              </Show>
            </Show>
          </div>
          <ComposerEditorSubmitButton
@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { ModelSelection } from "@/providers/models/selection"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
 import { Skill } from "@opencode-ai/schema/skill"
 import type { ActiveComposerAdapter, ComposerControls, ComposerSession, NewSessionComposerAdapter } from "./adapter"
 import { createMemoryComposerState } from "./state"
@@ -69,6 +70,8 @@ function submitInput(
 function session(input: {
  calls: string[]
  prompt: (value: Parameters<ComposerSession["data"]["session"]["prompt"]>[0]) => Promise<void>
+  handoff?: ComposerSession["handoff"]
+  statuses?: ("idle" | "running")[]
  current?: ComposerSession["current"]
  admitted?: (messageID: string) => boolean
  shell?: () => Promise<unknown>
@@ -77,6 +80,7 @@ function session(input: {
  return {
    id: "session-1",
    directory: "C:/repo",
+    handoff: input.handoff,
    current: input.current ?? (() => undefined),
    admitted: input.admitted ?? (() => false),
    api: {
@@ -92,6 +96,7 @@ function session(input: {
    data: {
      location: { command: { list: () => [] } },
      session: {
+        setStatus: (_sessionID, status) => input.statuses?.push(status),
        prompt: async (value) => {
          input.calls.push("prompt")
          await input.prompt(value)
@@ -140,10 +145,12 @@ describe("Composer submission", () => {

  test("starts and promotes a New Session once before admitting its first prompt", async () => {
    const draft = createMemoryComposerState({ prompt: "first prompt" }).capture()
-    const promoted = createMemoryComposerState().capture()
+    const promoted = createMemoryComposerState({ prompt: "restored draft" }).capture()
    const calls: string[] = []
+    const statuses: ("idle" | "running")[] = []
    const admitted = Promise.withResolvers<Parameters<ComposerSession["data"]["session"]["prompt"]>[0]>()
-    const target = session({ calls, prompt: async (value) => admitted.resolve(value) })
+    const cleanupReady = Promise.withResolvers<void>()
+    const target = session({ calls, statuses, prompt: async (value) => admitted.resolve(value) })
    const adapter: NewSessionComposerAdapter = {
      kind: "new-session",
      state: draft,
@@ -156,20 +163,72 @@ describe("Composer submission", () => {
      async start(_selection, submission) {
        calls.push("start")
        submission.retarget(promoted)
-        return target
+        return { session: target, cleanupReady: cleanupReady.promise }
      },
    }

-    await submitInput(adapter).submit(new Event("submit"))
+    const submitted = submitInput(adapter).submit(new Event("submit"))
    const request = await admitted.promise

-    expect(calls).toEqual(["start", "submitted", "switch-agent", "switch-model", "prompt"])
+    expect(calls).toEqual(["start", "switch-agent", "switch-model", "prompt"])
+    expect(statuses).toEqual(["running"])
+    expect(promoted.current()).toMatchObject([{ type: "text", content: "restored draft" }])
+    cleanupReady.resolve()
+    await submitted
+
+    expect(calls).toEqual(["start", "switch-agent", "switch-model", "prompt", "submitted"])
    expect(request.delivery).toBe("steer")
    expect(request.text).toBe("first prompt")
    expect(draft.current()).toEqual([{ type: "text", content: "", start: 0, end: 0 }])
    expect(promoted.current()).toEqual([{ type: "text", content: "", start: 0, end: 0 }])
  })

+  test("hands off image-only first prompts before admission", async () => {
+    const draft = createMemoryComposerState().capture()
+    draft.set([
+      { type: "text", content: "", start: 0, end: 0 },
+      {
+        type: "image",
+        id: "attachment",
+        filename: "image.png",
+        mime: "image/png",
+        blob: { id: "attachment", url: "data:image/png;base64,YQ==" },
+      },
+    ])
+    const handedOff = Promise.withResolvers<SessionMessageUser>()
+    const target = session({
+      calls: [],
+      handoff: { set: handedOff.resolve, clear() {} },
+      prompt: async () => undefined,
+    })
+    const adapter: NewSessionComposerAdapter = {
+      kind: "new-session",
+      state: draft,
+      ready: () => true,
+      controls,
+      working: () => false,
+      submitted() {},
+      async start() {
+        return { session: target, cleanupReady: Promise.resolve() }
+      },
+    }
+
+    await submitInput(adapter).submit(new Event("submit"))
+
+    expect(await handedOff.promise).toMatchObject({
+      type: "user",
+      text: "",
+      files: [
+        {
+          data: "",
+          mime: "image/png",
+          source: { type: "uri", uri: "data:image/png;base64,YQ==" },
+          name: "image.png",
+        },
+      ],
+    })
+  })
+
  test("does not restore a prompt already acknowledged by the durable inbox", async () => {
    const state = createMemoryComposerState({ prompt: "admitted prompt" }).capture()
    const checked = Promise.withResolvers<void>()
@@ -233,7 +292,7 @@ describe("Composer submission", () => {
      submitted() {},
      async start(_selection, submission) {
        submission.retarget(promoted)
-        return target
+        return { session: target, cleanupReady: Promise.resolve() }
      },
    }

@@ -250,10 +309,12 @@ describe("Composer submission", () => {
  test("reuses the message ID when an unacknowledged admission is retried", async () => {
    const state = createMemoryComposerState({ prompt: "retry me" }).capture()
    const attempts: string[] = []
+    const statuses: ("idle" | "running")[] = []
    const first = Promise.withResolvers<void>()
    const second = Promise.withResolvers<void>()
    const target = session({
      calls: [],
+      statuses,
      prompt: async (value) => {
        attempts.push(value.id ?? "")
        throw new Error("network unavailable")
@@ -283,6 +344,7 @@ describe("Composer submission", () => {

    expect(attempts).toHaveLength(4)
    expect(new Set(attempts).size).toBe(1)
+    expect(statuses).toEqual(["running", "idle", "running", "idle"])
    expect(state.current()).toMatchObject([{ type: "text", content: "retry me" }])
  })

@@ -1,4 +1,5 @@
 import { SessionMessage } from "@opencode-ai/schema/session-message"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
 import { Event } from "@opencode-ai/schema/event"
 import type { Accessor } from "solid-js"
 import type { PromptHistoryComment } from "./history/entry"
@@ -65,15 +66,43 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
    const comments = input.comments.capture()

    try {
-      const session =
+      const started =
        input.adapter.kind === "active-session"
-          ? input.adapter.session()
+          ? { session: input.adapter.session(), cleanupReady: Promise.resolve() }
          : await input.adapter.start(value.selection, submission)
-      if (!session) return
+      if (!started) return
+      const session = started.session

      input.addToHistory(value.prompt, value.mode)
      input.resetHistory()
      const restore = () => restoreSubmission(input, submission, value, comments)
+
+      const command = value.mode === "normal" ? findCommand(session, value.text) : undefined
+      if (value.mode === "normal" && !command) {
+        if (value.images.length > 0) session.handoff?.set(handoffMessage(value))
+        const optimisticBusy = !input.adapter.working()
+        if (optimisticBusy) session.data.session.setStatus(session.id, "running")
+        const sending = sendPrompt(session, value).then(
+          () => ({ ok: true as const }),
+          (error) => ({ ok: false as const, error }),
+        )
+        await started.cleanupReady
+        input.adapter.submitted()
+        submission.context
+          .filter((item) => !!item.comment?.trim())
+          .forEach((item) => submission.target().context.remove(item.key))
+        input.comments.clear()
+        clearSubmission(input, submission)
+        void sending.then((result) => {
+          if (!result.ok)
+            failSubmission(input, session, "prompt", result.error, restore, value.id, () => {
+              if (optimisticBusy) session.data.session.setStatus(session.id, "idle")
+            })
+        })
+        return
+      }
+
+      await started.cleanupReady
      input.adapter.submitted()

      if (value.mode === "shell") {
@@ -82,7 +111,6 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
        return
      }

-      const command = findCommand(session, value.text)
      if (command) {
        clearSubmission(input, submission)
        void sendCommand(session, value, command).catch((error) =>
@@ -91,14 +119,6 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
        return
      }

-      submission.context
-        .filter((item) => !!item.comment?.trim())
-        .forEach((item) => submission.target().context.remove(item.key))
-      input.comments.clear()
-      clearSubmission(input, submission)
-      void sendPrompt(session, value).catch((error) =>
-        failSubmission(input, session, "prompt", error, restore, value.id),
-      )
    } finally {
      submitting.delete(input.adapter.state)
    }
@@ -110,6 +130,29 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
  }
 }

+function handoffMessage(value: ComposerSubmission): SessionMessageUser {
+  return {
+    id: value.id,
+    type: "user",
+    text: value.text,
+    files: value.images.map((image) => ({
+      data: "",
+      mime: image.mime,
+      source: { type: "uri", uri: image.blob.url },
+      name: image.sourcePath ?? image.filename,
+    })),
+    metadata: {
+      displayText: value.text,
+      agent: value.selection.agent,
+      model: {
+        ...value.selection.model,
+        ...(value.selection.variant ? { variant: value.selection.variant } : {}),
+      },
+    },
+    time: { created: Date.now() },
+  }
+}
+
 function readSubmission(
  input: ComposerSubmitInput,
  prompt: Prompt,
@@ -313,8 +356,11 @@ function failSubmission(
  error: unknown,
  restore: () => boolean,
  messageID?: string,
+  rollback?: () => void,
 ) {
  if (messageID && session.admitted(messageID)) return
+  if (messageID) session.handoff?.clear(messageID)
+  rollback?.()
  restore()
  input.notify.failed(kind, error)
 }
@@ -1,6 +1,7 @@
 export { AppBaseProviders, AppInterface, preloadRoute } from "./app"
 export { ACCEPTED_FILE_EXTENSIONS } from "./runtime/platform/file-picker"
 export { useCommand } from "./shell/commands/command"
+export { currentRoute, type LayoutRoute, useCurrentRoute } from "./shell/state/layout"
 export { loadLocaleDict, normalizeLocale, type Locale, useLanguage } from "./runtime/i18n/language"
 export { type FatalRendererErrorLog, type Platform, PlatformProvider } from "./runtime/platform/platform"
 export { ServerConnection, useServers } from "./runtime/server/registry"
@@ -42,6 +42,10 @@ const clearAuthToken = () => {

 const web = createWebPlatform(pkg.version)

+if (import.meta.env.PROD && "serviceWorker" in navigator) {
+  window.addEventListener("load", () => void navigator.serviceWorker.register("/sw.js"), { once: true })
+}
+
 if (import.meta.env.VITE_SENTRY_DSN) {
  init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -30,6 +30,7 @@ export function HomeCommandPalette(props: {
    opened: server.projects.list,
    stored: () => server.sync.data.project,
    load: (search, signal) => server.sdk.api.session.list({ parentID: null, search, limit: 50 }, { signal }),
+    get: (sessionID, signal) => server.sdk.api.session.get({ sessionID }, { signal }),
    untitled: () => language.t("command.session.new"),
    category: () => language.t("command.category.session"),
  })
@@ -137,6 +137,17 @@ export function createHomeSessionsController(home: HomeController) {
      showProjectName: () => !home.project.selected(),
      server: () => home.selection.value().server,
      canCreate: () => !!home.project.newSession(),
+      lookup: async (sessionID: string) => {
+        const ctx = home.server.focusedContext()
+        if (!ctx) return
+        const result = await ctx.sdk.api.session.get({ sessionID })
+        if (result.time.archived) return
+        return buildHomeSessionRecords({
+          sessions: () => [result],
+          projectDirectories,
+          projects: home.project.list,
+        })[0]
+      },
      create: home.project.openNewSession,
      open: (session: SessionInfo, options?: OpenSessionOptions) => {
        const directoryKey = pathKey(session.location.directory)
@@ -8,13 +8,21 @@ import { createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { HomeController } from "../model"
 import { homeSessionSearchKey, type HomeSessionRecord, type HomeSessionsController } from "./controller"
+import { looksLikeSessionID } from "@/session/search"

 type HomeSessionSearchSource = Pick<HomeSessionsController, "data" | "session">

 export function createHomeSessionSearchController(home: HomeController, sessions: HomeSessionSearchSource) {
  const command = useCommand()
  const language = useLanguage()
-  const [state, setState] = createStore({ value: "", focused: false, highlighted: "" })
+  const [state, setState] = createStore({
+    value: "",
+    focused: false,
+    highlighted: "",
+    exact: undefined as HomeSessionRecord | undefined,
+    lookingUp: false,
+  })
+  let lookup = 0
  let root: HTMLDivElement | undefined
  let input: HTMLInputElement | undefined
  let list: HTMLDivElement | undefined
@@ -22,9 +30,11 @@ export function createHomeSessionSearchController(home: HomeController, sessions
  const results = createMemo(() => {
    const value = query().toLowerCase()
    if (!value) return []
-    return sessions.data
+    const records = sessions.data
      .searchRecords()
      .filter((record) => `${sessionLabel(record.session)} ${record.projectName}`.toLowerCase().includes(value))
+    if (!state.exact || records.some((record) => record.session.id === state.exact?.session.id)) return records
+    return [state.exact, ...records]
  })
  const active = createMemo(() => {
    const records = results()
@@ -50,6 +60,7 @@ export function createHomeSessionSearchController(home: HomeController, sessions
      close()
    }),
  )
+  onCleanup(() => lookup++)

  command.register("home.search", () => [
    {
@@ -67,7 +78,26 @@ export function createHomeSessionSearchController(home: HomeController, sessions
  }

  function close() {
-    setState({ value: "", focused: false })
+    lookup++
+    setState({ value: "", focused: false, exact: undefined, lookingUp: false })
+  }
+
+  function update(value: string) {
+    const current = ++lookup
+    const sessionID = value.trim()
+    setState({ value, highlighted: "", exact: undefined, lookingUp: false })
+    if (!looksLikeSessionID(sessionID)) return
+    setState("lookingUp", true)
+    void sessions.session.lookup(sessionID).then(
+      (record) => {
+        if (current !== lookup) return
+        setState({ exact: record, lookingUp: false })
+      },
+      () => {
+        if (current !== lookup) return
+        setState("lookingUp", false)
+      },
+    )
  }

  function select(record: HomeSessionRecord, options?: { background?: boolean }) {
@@ -81,11 +111,11 @@ export function createHomeSessionSearchController(home: HomeController, sessions
      placeholder,
      open,
      focus,
-      input: (value: string) => setState({ value, highlighted: "" }),
+      input: update,
      close,
    },
    result: {
-      loading: sessions.data.loading,
+      loading: () => sessions.data.loading() || state.lookingUp,
      list: results,
      active,
      noResultsLabel: () => language.t("home.sessions.search.noResults", { query: query() }),
@@ -509,7 +509,7 @@ function HomeSessionsEmpty(props: { onNewSession?: () => void; language: ReturnT
    <div class="flex min-h-full flex-col items-center gap-4 px-6 pt-[52px] text-center">
      <div
        class={`
-          shrink-0 text-[13px] leading-[13px] tracking-[-0.04px]
+          shrink-0 text-[13px] leading-text-compact tracking-[-0.04px]
          text-v2-text-text-base [font-weight:530]
        `}
      >
@@ -17,6 +17,14 @@
  font-style: normal;
 }

+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("@ibm/plex/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Text.woff2") format("woff2");
+  font-weight: 440;
+  font-style: normal;
+  font-display: swap;
+}
+
@media (display-mode: standalone) {
  /* WebKit excludes safe-area insets from dvh in installed apps. */
  #root {
@@ -1,5 +1,6 @@
 import { base64Encode } from "@opencode-ai/util/encode"
 import { getDirectory } from "@opencode-ai/util/path"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
 import { startTransition } from "solid-js"
 import type { NewSessionComposerAdapter } from "@/composer/adapter"
 import { useComposerState } from "@/composer/persistence"
@@ -9,11 +10,13 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { useLocal } from "@/providers/models/selection"
 import { usePermission } from "@/session/requests/permission"
 import { useData, useServer } from "@/runtime/server/current"
-import { useServerSDK } from "@/runtime/server/client"
+import { type ServerSDK, useServerSDK } from "@/runtime/server/client"
 import { useTabs } from "@/shell/tabs/tabs"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { useSessionKey } from "@/session/session-layout"
 import { showToast } from "@/shell/notifications/toast"
+import { SessionRouteKey, SessionStateKey } from "@/runtime/server/scope"
+import { clearSessionMessageHandoff, setSessionMessageHandoff } from "@/session/handoff"

 export function createNewSessionComposerAdapter(props: {
  draftID: string
@@ -53,26 +56,35 @@ export function createNewSessionComposerAdapter(props: {
      })
      if (!sessionDirectory) return

-      const created = await serverSDK.api.session
-        .create({
-          agent: selection.agent,
-          model: {
-            id: selection.model.modelID,
-            providerID: selection.model.providerID,
-            variant: selection.variant,
-          },
-          location: { directory: sessionDirectory },
-        })
-        .catch((error) => {
+      const created = data.session.create({
+        agent: selection.agent,
+        model: {
+          id: selection.model.modelID,
+          providerID: selection.model.providerID,
+          variant: selection.variant,
+        },
+        location: { directory: sessionDirectory },
+      })
+      const creation = created.request.then(
+        () => ({ ok: true as const }),
+        (error) => {
          showToast({
            title: language.t("prompt.toast.sessionCreateFailed.title"),
            description: errorMessage(language, error),
          })
-        })
-      if (!created) return
-
-      data.session.remember(created)
-      await startTransition(() => {
+          return { ok: false as const, error }
+        },
+      )
+      const afterCreation = async <T,>(run: () => Promise<T>) => {
+        const result = await creation
+        if (!result.ok) throw result.error
+        return run()
+      }
+      const sessionKey = SessionStateKey.from(
+        serverSDK.scope,
+        SessionRouteKey.fromRoute(base64Encode(sessionDirectory), created.id),
+      )
+      const cleanupReady = startTransition(() => {
        tabs.updateDraft(props.draftID, { worktree: undefined })
        if (permission.isAutoAcceptingDirectory(projectDirectory)) {
          permission.enableAutoAccept(created.id, sessionDirectory)
@@ -92,13 +104,32 @@ export function createNewSessionComposerAdapter(props: {
      })

      return {
-        id: created.id,
-        directory: sessionDirectory,
-        api: serverSDK.api.session,
-        data,
-        current: () => data.session.get(created.id) ?? created,
-        admitted: (messageID) =>
-          data.session.input.has(created.id, messageID) || !!data.session.message.get(created.id, messageID),
+        cleanupReady,
+        session: {
+          id: created.id,
+          directory: sessionDirectory,
+          handoff: createMessageHandoff(sessionKey, created.id, serverSDK.event),
+          api: {
+            command: (input) => afterCreation(() => serverSDK.api.session.command(input)),
+            shell: (input) => afterCreation(() => serverSDK.api.session.shell(input)),
+            switchAgent: (input) => afterCreation(() => serverSDK.api.session.switchAgent(input)),
+            switchModel: (input) => afterCreation(() => serverSDK.api.session.switchModel(input)),
+          },
+          data: {
+            location: data.location,
+            session: {
+              setStatus: data.session.setStatus,
+              prompt: (input) =>
+                data.session.prompt({
+                  ...input,
+                  gate: Promise.all([input.gate, afterCreation(async () => undefined)]),
+                }),
+            },
+          },
+          current: () => data.session.get(created.id),
+          admitted: (messageID) =>
+            data.session.input.has(created.id, messageID) || !!data.session.message.get(created.id, messageID),
+        },
      }
    },
  }
@@ -111,6 +142,27 @@ export function createNewSessionComposerAdapter(props: {
  }
 }

+function createMessageHandoff(key: string, sessionID: string, event: ServerSDK["event"]) {
+  let unsubscribe: VoidFunction | undefined
+  return {
+    set(message: SessionMessageUser) {
+      unsubscribe?.()
+      setSessionMessageHandoff(key, message)
+      unsubscribe = event.on("session.inbox.enqueued", (item) => {
+        if (item.data.sessionID !== sessionID || item.data.inboxID !== message.id) return
+        unsubscribe?.()
+        unsubscribe = undefined
+        clearSessionMessageHandoff(key, message.id)
+      })
+    },
+    clear(messageID: string) {
+      unsubscribe?.()
+      unsubscribe = undefined
+      clearSessionMessageHandoff(key, messageID)
+    },
+  }
+}
+
 async function resolveSessionDirectory(input: {
  projectDirectory: string
  worktree: string
@@ -139,7 +139,7 @@ function ProviderTip() {
        >
          <button
            type="button"
-            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
+            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
            onClick={openProviders}
          >
            <span class="truncate">{language.t("home.providerTip")}</span>
@@ -190,7 +190,7 @@ function ProviderPicker(props: { directory?: string; onSelect: (provider: string
            {(group) => (
              <Show when={group.items().length > 0}>
                <section class="flex flex-col">
-                  <div class="px-3 pb-2 text-[13px] font-[440] leading-none tracking-[-0.04px] text-v2-text-text-muted">
+                  <div class="px-3 pb-2 text-[13px] font-[440] leading-text-compact tracking-[-0.04px] text-v2-text-text-muted">
                    {group.title}
                  </div>
                  <For each={group.items()}>
@@ -198,7 +198,7 @@ function ProviderPicker(props: { directory?: string; onSelect: (provider: string
                      <button
                        type="button"
                        data-provider-id={provider.id}
-                        class="flex min-h-9 w-full items-center gap-2 rounded-md px-3 py-2.5 text-left text-[13px] leading-none tracking-[-0.04px] hover:bg-v2-overlay-simple-overlay-hover focus:bg-v2-overlay-simple-overlay-hover focus:outline-none"
+                        class="flex min-h-9 w-full items-center gap-2 rounded-md px-3 py-2.5 text-left text-[13px] leading-text-compact tracking-[-0.04px] hover:bg-v2-overlay-simple-overlay-hover focus:bg-v2-overlay-simple-overlay-hover focus:outline-none"
                        classList={{ "bg-v2-overlay-simple-overlay-hover": store.active === provider.id }}
                        onMouseEnter={() => setStore("active", provider.id)}
                        disabled={store.connecting !== undefined}
@@ -7,6 +7,7 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLocal } from "@/providers/models/selection"
 import { popularProviders } from "@/providers/catalog/providers"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -23,6 +24,7 @@ export const DialogManageModels: Component = () => {
  const local = useLocal()
  const language = useLanguage()
  const dialog = useDialog()
+  const [store, setStore] = createStore({ collapsed: {} as Record<string, boolean> })
  const directory = () => decode64(local.slug())

  const handleConnectProvider = () => {
@@ -120,16 +122,38 @@ export const DialogManageModels: Component = () => {
                }
              >
                <For each={list.grouped.latest}>
-                  {(group) => (
-                    <div class="settings-section" data-component="settings-models-provider">
-                      <div class="settings-models-group-header justify-between">
-                        <div class="flex min-w-0 items-center gap-2">
-                          <ProviderIcon id={group.category} width={16} height={16} class="ml-4 shrink-0" />
-                          <h3 class="settings-section-title">{group.items[0].provider.name}</h3>
-                        </div>
-                        <div>
+                  {(group) => {
+                    const searching = () => list.filter().length > 0
+                    const expanded = () => searching() || !store.collapsed[group.category]
+
+                    return (
+                      <div
+                        class="settings-section"
+                        data-component="settings-models-provider"
+                        data-expanded={expanded() ? "" : undefined}
+                      >
+                        <div class="settings-models-group-header justify-between">
+                          <button
+                            type="button"
+                            class="settings-models-group-trigger"
+                            aria-expanded={expanded()}
+                            disabled={searching()}
+                            onClick={() => setStore("collapsed", group.category, expanded())}
+                          >
+                            <span class="settings-models-group-chevron">
+                              <Icon
+                                name="chevron-down"
+                                size="small"
+                                classList={{ "-rotate-90 rtl:rotate-90": !expanded() }}
+                              />
+                            </span>
+                            <span class="settings-models-group-label">
+                              <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
+                              <span class="settings-section-title">{group.items[0].provider.name}</span>
+                            </span>
+                          </button>
                          <Switch
-                            class="mr-6"
+                            class="me-6"
                            checked={providerVisible(group.category)}
                            onChange={(checked) => setProviderVisibility(group.category, checked)}
                            hideLabel
@@ -137,26 +161,28 @@ export const DialogManageModels: Component = () => {
                            {group.items[0].provider.name}
                          </Switch>
                        </div>
+                        <Show when={expanded()}>
+                          <SettingsList>
+                            <For each={group.items}>
+                              {(item) => (
+                                <SettingsRow title={item.name} description="">
+                                  <div>
+                                    <Switch
+                                      checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
+                                      onChange={(checked) => setModelVisibility(item, checked)}
+                                      hideLabel
+                                    >
+                                      {item.name}
+                                    </Switch>
+                                  </div>
+                                </SettingsRow>
+                              )}
+                            </For>
+                          </SettingsList>
+                        </Show>
                      </div>
-                      <SettingsList>
-                        <For each={group.items}>
-                          {(item) => (
-                            <SettingsRow title={item.name} description="">
-                              <div>
-                                <Switch
-                                  checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
-                                  onChange={(checked) => setModelVisibility(item, checked)}
-                                  hideLabel
-                                >
-                                  {item.name}
-                                </Switch>
-                              </div>
-                            </SettingsRow>
-                          )}
-                        </For>
-                      </SettingsList>
-                    </div>
-                  )}
+                    )
+                  }}
                </For>
              </Show>
            </Show>
@@ -1,44 +1,24 @@
-import { type Accessor, createMemo, createResource } from "solid-js"
-import { createStore } from "solid-js/store"
+import { type Accessor, createMemo } from "solid-js"
 import { DateTime } from "luxon"
 import { filter, firstBy, flat, groupBy, mapValues, pipe, uniqueBy, values } from "remeda"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useProviders } from "@/providers/catalog/providers"
-import { Persist, persisted } from "@/runtime/persistence/storage"
+import { useGlobal } from "@/runtime/server/runtime"

 export type ModelKey = { providerID: string; modelID: string }

 type Visibility = "show" | "hide"
-type User = ModelKey & { visibility: Visibility; favorite?: boolean }
-type Store = {
-  user: User[]
-  recent: ModelKey[]
-  variant?: Record<string, string | undefined>
-}
-
 const RECENT_LIMIT = 5

 function modelKey(model: ModelKey) {
  return `${model.providerID}:${model.modelID}`
 }

-const createModelsPersistedState = () => {
-  const [store, setStore, _, ready] = persisted(
-    Persist.global("model"),
-    createStore<Store>({
-      user: [],
-      recent: [],
-      variant: {},
-    }),
-  )
-
-  return [store, setStore, ready] as const
-}
-
 const createModelsController = (directory: Accessor<string | undefined>) => {
  const providers = useProviders(() => directory())
-
-  const [store, setStore, ready] = createModelsPersistedState()
+  const models = useGlobal().models
+  const store = models.store
+  const setStore = models.set

  const available = createMemo(() =>
    providers.connected().flatMap((p) =>
@@ -148,23 +128,14 @@ const createModelsController = (directory: Accessor<string | undefined>) => {
    setStore("variant", key, value)
  }

-  const [recentModels] = createResource(
-    async () => {
-      const recent = store.recent
-      await ready.promise
-      return recent
-    },
-    (p) => p,
-    { initialValue: [] },
-  )
  return {
-    ready,
+    ready: models.ready,
    list,
    find,
    visible,
    setVisibility,
    recent: {
-      list: () => recentModels()!,
+      list: models.recent,
      push,
    },
    variant: {
@@ -10,9 +10,10 @@ import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/d
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Menu } from "@opencode-ai/ui/menu"
+import { TextInput } from "@opencode-ai/ui/text-input"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { ModelTooltip } from "./tooltip"
 import { useLanguage } from "@/runtime/i18n/language"
 import { decode64 } from "@/runtime/persistence/base64"
@@ -20,6 +21,8 @@ import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
 import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
 import { createEventListener } from "@solid-primitives/event-listener"
 import { matchesModelSearch } from "./search"
+import { SettingsList } from "@/settings/list"
+import "@/settings/settings.css"

 const isFree = (provider: string, cost: { input: number } | undefined) =>
  provider === "opencode" && (!cost || cost.input === 0)
@@ -44,70 +47,182 @@ const sortModelGroups = (a: { category: string; items: ModelItem[] }, b: { categ

 const ModelList: Component<{
  provider?: string
-  class?: string
  onSelect: () => void
-  action?: JSX.Element
  model?: ModelState
 }> = (props) => {
-  const model = props.model ?? useLocal().model
  const language = useLanguage()
+  const controller = createModelSelectorController({
+    model: props.model,
+    provider: () => props.provider,
+    onSelect: props.onSelect,
+  })
+  const [store, setStore] = createStore({
+    search: "",
+    active: "",
+    collapsed: {} as Record<string, boolean>,
+  })
+  const models = createMemo(() => controller.models(store.search))
+  const groups = createMemo(() => controller.groups(models()))
+  const expanded = (provider: string) => store.search.length > 0 || !store.collapsed[provider]
+  const visibleModels = () => models().filter((item) => expanded(item.provider.id))
+  let scrollRef: HTMLDivElement | undefined

-  const models = createMemo(() =>
-    model
-      .list()
-      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
-      .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
-  )
+  const setSearch = (value: string) => {
+    const first = controller.models(value).find((item) => value.length > 0 || !store.collapsed[item.provider.id])
+    setStore({ search: value, active: first ? modelKey(first) : "" })
+  }
+  const moveActive = (delta: number) => {
+    const keys = visibleModels().map(modelKey)
+    if (keys.length === 0) return
+    const index = keys.indexOf(store.active)
+    const start = index === -1 ? (delta > 0 ? -1 : 0) : index
+    setStore("active", keys[(start + delta + keys.length) % keys.length])
+    queueMicrotask(() => {
+      scrollRef
+        ?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(store.active)}"]`)
+        ?.scrollIntoView({ block: "nearest" })
+    })
+  }
+  const selectActive = () => {
+    const item = visibleModels().find((item) => modelKey(item) === store.active)
+    if (item) controller.select(item)
+  }

  return (
-    <List
-      class={`flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
-      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true, action: props.action }}
-      emptyMessage={language.t("dialog.model.empty")}
-      key={(x) => `${x.provider.id}:${x.id}`}
-      items={models}
-      current={model.current()}
-      filterKeys={["provider.name", "name", "id"]}
-      sortBy={(a, b) => a.name.localeCompare(b.name)}
-      groupBy={(x) => x.provider.name}
-      sortGroupsBy={(a, b) => {
-        const aProvider = a.items[0].provider.id
-        const bProvider = b.items[0].provider.id
-        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
-        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
-        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
-      }}
-      itemWrapper={(item, node) => (
-        <Tooltip
-          appearance="standard"
-          class="w-full"
-          placement="right-start"
-          gutter={12}
-          openDelay={0}
-          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
-        >
-          {node}
-        </Tooltip>
-      )}
-      onSelect={(x) => {
-        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-          recent: true,
-        })
-        props.onSelect()
-      }}
-    >
-      {(i) => (
-        <div class="w-full flex items-center gap-x-2 text-13-regular">
-          <span class="truncate">{i.name}</span>
-          <Show when={isFree(i.provider.id, i.cost)}>
-            <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
-          </Show>
-          <Show when={i.latest}>
-            <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
+    <div class="flex min-h-0 flex-1 flex-col">
+      <div class="shrink-0 px-4 pt-px pb-3">
+        <div class="relative">
+          <TextInput
+            type="search"
+            appearance="base"
+            class="!w-full self-stretch"
+            placeholder={language.t("dialog.model.search.placeholder")}
+            value={store.search}
+            autofocus
+            spellcheck={false}
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            onInput={(event) => setSearch(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.altKey || event.metaKey) return
+              if (event.key === "ArrowDown") {
+                event.preventDefault()
+                moveActive(1)
+                return
+              }
+              if (event.key === "ArrowUp") {
+                event.preventDefault()
+                moveActive(-1)
+                return
+              }
+              if (event.key === "Enter" && !event.isComposing) {
+                event.preventDefault()
+                selectActive()
+              }
+            }}
+            aria-label={language.t("dialog.model.search.placeholder")}
+          />
+          <Show when={store.search}>
+            <IconButton
+              type="button"
+              variant="ghost-muted"
+              size="small"
+              class="settings-tab-search-clear"
+              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+              onClick={() => setSearch("")}
+              aria-label={language.t("common.clear")}
+            />
          </Show>
        </div>
-      )}
-    </List>
+      </div>
+      <div class="relative min-h-0 flex-1">
+        <div ref={(element) => (scrollRef = element)} class="settings-panel settings-models h-full px-4 pt-4 pb-4">
+          <Show
+            when={models().length > 0}
+            fallback={<div class="settings-models-status">{language.t("dialog.model.empty")}</div>}
+          >
+            <For each={groups()}>
+              {(group) => {
+                const searching = () => store.search.length > 0
+                const open = () => expanded(group.category)
+
+                return (
+                  <section class="settings-section" data-expanded={open() ? "" : undefined}>
+                    <h3 class="settings-models-group-header">
+                      <button
+                        type="button"
+                        class="settings-models-group-trigger"
+                        aria-expanded={open()}
+                        disabled={searching()}
+                        onClick={() => setStore("collapsed", group.category, open())}
+                      >
+                        <span class="settings-models-group-chevron">
+                          <Icon name="chevron-down" size="small" classList={{ "-rotate-90 rtl:rotate-90": !open() }} />
+                        </span>
+                        <span class="settings-models-group-label">
+                          <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
+                          <span class="settings-section-title">{group.items[0].provider.name}</span>
+                        </span>
+                      </button>
+                    </h3>
+                    <Show when={open()}>
+                      <SettingsList>
+                        <For each={group.items}>
+                          {(item) => (
+                            <button
+                              type="button"
+                              data-component="settings-row"
+                              data-option-key={modelKey(item)}
+                              class="-mx-4 w-[calc(100%+32px)] px-4 text-start first:rounded-t-lg last:rounded-b-lg hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+                              classList={{ "bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
+                              onMouseEnter={() => setStore("active", modelKey(item))}
+                              onMouseLeave={() => setStore("active", "")}
+                              onClick={() => controller.select(item)}
+                            >
+                              <div data-slot="settings-row-copy">
+                                <div data-slot="settings-row-title" class="flex items-center gap-2">
+                                  <Tooltip
+                                    placement="right-start"
+                                    gutter={12}
+                                    openDelay={0}
+                                    value={
+                                      <ModelTooltip
+                                        model={item}
+                                        latest={item.latest}
+                                        free={isFree(item.provider.id, item.cost)}
+                                        v2
+                                      />
+                                    }
+                                  >
+                                    <span class="min-w-0 truncate">{item.name}</span>
+                                  </Tooltip>
+                                  <Show when={isFree(item.provider.id, item.cost)}>
+                                    <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
+                                  </Show>
+                                  <Show when={item.latest}>
+                                    <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
+                                  </Show>
+                                </div>
+                              </div>
+                              <div data-slot="settings-row-control" class="size-4">
+                                <Show when={controller.current() === modelKey(item)}>
+                                  <Icon name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
+                                </Show>
+                              </div>
+                            </button>
+                          )}
+                        </For>
+                      </SettingsList>
+                    </Show>
+                  </section>
+                )
+              }}
+            </For>
+          </Show>
+        </div>
+      </div>
+    </div>
  )
 }

@@ -431,18 +546,25 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
  }

  return (
-    <Dialog>
-      <DialogHeader hideClose>
+    <Dialog size="large" variant="settings">
+      <DialogHeader hideClose closeLabel={language.t("common.close")}>
        <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
-        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
+        <Button icon="plus" onClick={provider}>
          {language.t("command.provider.connect")}
        </Button>
      </DialogHeader>
-      <DialogBody>
+      <DialogBody class="flex min-h-0 flex-1 flex-col">
        <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
-        <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
-          {language.t("dialog.model.manage")}
-        </Button>
+        <div class="shrink-0 border-t border-v2-border-border-muted px-4 py-3">
+          <button
+            type="button"
+            class="flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+            onClick={manage}
+          >
+            <Icon name="outline-sliders" size="small" />
+            <span class="min-w-0 flex-1 truncate">{language.t("dialog.model.manage")}</span>
+          </button>
+        </div>
      </DialogBody>
    </Dialog>
  )
@@ -458,7 +458,8 @@ export const dict = {
  "dialog.project.edit.color": "Color",
  "dialog.project.edit.color.select": "Select {{color}} color",
  "dialog.project.edit.worktree.startup": "Workspace startup script",
-  "dialog.project.edit.worktree.startup.description": "Runs after creating a new workspace (worktree).",
+  "dialog.project.edit.worktree.startup.description":
+    "Runs after creating a new workspace (worktree). Use $OPENCODE_WORKTREE_BASE for the base worktree and $OPENCODE_WORKTREE_PATH for the new worktree.",
  "dialog.project.edit.worktree.startup.placeholder": "e.g. bun install",

  "dialog.releaseNotes.action.getStarted": "Get started",
@@ -570,10 +571,13 @@ export const dict = {
  "toast.update.action.notYet": "Not yet",

  "error.page.title": "Something went wrong",
+  "error.page.title.status": "Server request failed",
  "error.page.description": "An error occurred while loading the application.",
+  "error.page.description.status": "The server returned an HTTP {{status}} response.",
  "error.page.description.localServerStartup": "An error occurred while starting the local server.",
  "error.page.details.label": "Error Details",
  "error.page.action.restart": "Restart",
+  "error.page.action.reload": "Reload",
  "error.page.action.report": "Report Error",
  "error.page.action.reported": "Error Reported",
  "error.page.action.exportLogs": "Export Logs",
@@ -948,6 +952,8 @@ export const dict = {
  "settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
  "settings.general.row.showStatus.title": "Server status",
  "settings.general.row.showStatus.description": "Show the server status button in the title bar",
+  "settings.general.row.showProjectIcon.title": "Project icon",
+  "settings.general.row.showProjectIcon.description": "Show the project icon in the session header",
  "settings.general.row.mobileTitlebarBottom.title": "Bottom navigation",
  "settings.general.row.mobileTitlebarBottom.description":
    "Place the title bar and session tabs at the bottom of the screen on mobile",
@@ -1,5 +1,5 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { Accessor, createEffect, createMemo, createRoot, getOwner } from "solid-js"
+import { Accessor, createEffect, createMemo, createResource, createRoot, getOwner } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServers } from "./registry"
 import { pathKey } from "@/workspaces/path-key"
@@ -10,6 +10,7 @@ import { createData } from "@opencode-ai/client/solid"
 import type { ServerScope } from "@/runtime/server/scope"
 import { createServerPermissionState } from "@/session/requests/server-permission"
 import { createServerNotificationState } from "@/shell/notifications/notification"
+import { Persist, persisted } from "@/runtime/persistence/storage"

 export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext({
  name: "Global",
@@ -24,6 +25,7 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
        serverKey: undefined as ServerConnection.Key | undefined,
      },
    })
+    const models = createGlobalModels()

    const settingsServer = createMemo(() => {
      const list = server.list
@@ -86,6 +88,7 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
          },
        },
      },
+      models,
      ensureServerCtx(conn: ServerConnection.Any) {
        return ensureServerCtx(conn)
      },
@@ -93,6 +96,37 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
  },
 })

+function createGlobalModels() {
+  const [store, setStore, _, ready] = persisted(
+    Persist.global("model"),
+    createStore<{
+      user: Array<{ providerID: string; modelID: string; visibility: "show" | "hide"; favorite?: boolean }>
+      recent: Array<{ providerID: string; modelID: string }>
+      variant?: Record<string, string | undefined>
+    }>({
+      user: [],
+      recent: [],
+      variant: {},
+    }),
+  )
+  const [recent] = createResource(
+    async () => {
+      const value = store.recent
+      await ready.promise
+      return value
+    },
+    (value) => value,
+    { initialValue: [] },
+  )
+
+  return {
+    store,
+    set: setStore,
+    ready,
+    recent: () => recent()!,
+  }
+}
+
 function createServerController(
  conn: ServerConnection.Any,
  scope: ServerScope,
@@ -386,7 +386,7 @@
  padding: 48px 24px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
  text-align: center;
 }
@@ -16,6 +16,7 @@ export function createActiveComposerAdapter(input: {
  if (!id) throw new Error("Active Composer requires a Session ID")

  const prompt = useComposerState()
+  prompt.current()
  const state = prompt.capture()
  const data = useData()
  const server = useServerSDK()
@@ -101,6 +101,10 @@ export function createActiveSessionRegion(input: {
  const focus = () => {
    if (!input.session.data.isChild()) promptRef?.focus()
  }
+  const openParent = () => {
+    const id = input.session.data.parentID()
+    if (id) navigate(sessionHref(requireServerKey(input.session.identity.params.serverKey), id))
+  }
  const editable = (target: EventTarget | null | undefined) => {
    if (!(target instanceof HTMLElement)) return false
    return /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(target.tagName) || target.isContentEditable
@@ -113,6 +117,7 @@ export function createActiveSessionRegion(input: {
    return current instanceof HTMLElement ? current : undefined
  }
  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.defaultPrevented) return
    const path = event.composedPath()
    const target = path.find((item): item is HTMLElement => item instanceof HTMLElement)
    const active = activeElement()
@@ -124,6 +129,11 @@ export function createActiveSessionRegion(input: {
    ) {
      return
    }
+    if (event.key === "Escape" && input.session.data.isChild()) {
+      event.preventDefault()
+      openParent()
+      return
+    }
    if (active === promptRef) {
      if (event.key === "Escape") promptRef?.blur()
      return
@@ -172,10 +182,7 @@ export function createActiveSessionRegion(input: {
    },
    region: {
      centered: input.screen.centered,
-      openParent: () => {
-        const id = input.session.data.parentID()
-        if (id) navigate(sessionHref(requireServerKey(input.session.identity.params.serverKey), id))
-      },
+      openParent,
      prompt,
      setDockRef: input.timeline.view.setDockRef,
      setPromptRef: (element: HTMLDivElement) => {
@@ -204,9 +211,7 @@ export function ActiveSessionComposerRegion(props: {
 }) {
  const region = createSessionComposerRegionController({
    state: props.model.region.state,
-    sessionKey: props.session.identity.sessionKey,
-    sessionID: () => props.session.identity.params.id,
-    prompt: props.model.region.prompt,
+    parentID: props.session.data.parentID,
    centered: props.model.region.centered,
    onResponseSubmit: props.onResponseSubmit,
    openParent: props.model.region.openParent,
@@ -1,47 +1,15 @@
-import { type Accessor, createEffect, createMemo, createResource } from "solid-js"
-import type { useComposerState } from "@/composer/persistence"
-import { useData } from "@/runtime/server/current"
-import { getSessionHandoff, setSessionHandoff } from "@/session/handoff"
+import type { Accessor } from "solid-js"
 import type { SessionRequestModel } from "../requests/model"

 export function createSessionComposerRegionController(input: {
  state: SessionRequestModel
-  sessionKey: Accessor<string>
-  sessionID: Accessor<string | undefined>
-  prompt: ReturnType<typeof useComposerState>
+  parentID: Accessor<string | undefined>
  centered: Accessor<boolean>
  onResponseSubmit: () => void
  openParent: () => void
  setPromptRef: (el: HTMLDivElement) => void
  setDockRef: (el: HTMLDivElement) => void
 }) {
-  const data = useData()
-  createEffect(() => {
-    if (!input.prompt.ready()) return
-    setSessionHandoff(input.sessionKey(), {
-      prompt: input.prompt
-        .current()
-        .map((part) => {
-          if (part.type === "file") return `[file:${part.path}]`
-          if (part.type === "agent") return `@${part.name}`
-          if (part.type === "image") return `[image:${part.filename}]`
-          return part.content
-        })
-        .join("")
-        .trim(),
-    })
-  })
-
-  const parentID = createMemo(() => {
-    const id = input.sessionID()
-    return id ? data.session.get(id)?.parentID : undefined
-  })
-  const ready = Promise.resolve()
-  const [promptReady] = createResource(
-    () => input.prompt.ready.promise ?? ready,
-    (promise) => promise.then(() => true),
-  )
-
  return {
    state: input.state,
    centered: input.centered,
@@ -49,11 +17,9 @@ export function createSessionComposerRegionController(input: {
    openParent: input.openParent,
    setPromptRef: input.setPromptRef,
    setDockRef: input.setDockRef,
-    parentID,
-    child: () => !!parentID(),
-    showComposer: () => !input.state.blocked() || !!parentID(),
-    handoffPrompt: () => getSessionHandoff(input.sessionKey())?.prompt,
-    promptReady: () => input.prompt.ready() || promptReady(),
+    parentID: input.parentID,
+    child: () => !!input.parentID(),
+    showComposer: () => !input.state.blocked() || !!input.parentID(),
  }
 }

@@ -19,8 +19,6 @@ export type SessionComposerRegionViewController = Pick<
  | "parentID"
  | "child"
  | "showComposer"
-  | "handoffPrompt"
-  | "promptReady"
 > & { state: SessionComposerRegionState }

 export function SessionComposerRegion(props: {
@@ -65,43 +63,32 @@ export function SessionComposerRegion(props: {
        </Show>

        <Show when={controller.showComposer()}>
-          <Show
-            when={controller.promptReady()}
-            fallback={
-              <>
-                <div class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak whitespace-pre-wrap pointer-events-none">
-                  {controller.handoffPrompt() || language.t("prompt.loading")}
-                </div>
-              </>
-            }
+          <div
+            classList={{
+              "relative z-[70]": true,
+            }}
          >
-            <div
-              classList={{
-                "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"
              >
-                <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"
-                >
-                  <span>{language.t("session.child.promptDisabled")} </span>
-                  <Show when={controller.parentID()}>
-                    <button
-                      type="button"
-                      class="text-text-base transition-colors hover:text-text-strong"
-                      onClick={controller.openParent}
-                    >
-                      {language.t("session.child.backToParent")}
-                    </button>
-                  </Show>
-                </div>
-              </Show>
-            </div>
-          </Show>
+                <span>{language.t("session.child.promptDisabled")} </span>
+                <Show when={controller.parentID()}>
+                  <button
+                    type="button"
+                    class="text-text-base transition-colors hover:text-text-strong"
+                    onClick={controller.openParent}
+                  >
+                    {language.t("session.child.backToParent")}
+                  </button>
+                </Show>
+              </div>
+            </Show>
+          </div>
        </Show>
      </div>
    </div>
@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
+import { clearSessionMessageHandoff, getSessionMessageHandoff, setSessionMessageHandoff } from "./handoff"
+
+test("stores and clears a message handoff", () => {
+  const message = {
+    id: "msg_handoff",
+    type: "user",
+    text: "",
+    files: [{ data: "", mime: "image/png", source: { type: "uri", uri: "blob:image" } }],
+    time: { created: 1 },
+  } satisfies SessionMessageUser
+
+  setSessionMessageHandoff("session-key", message)
+  expect(getSessionMessageHandoff("session-key")).toEqual(message)
+  clearSessionMessageHandoff("session-key", message.id)
+  expect(getSessionMessageHandoff("session-key")).toBeUndefined()
+})
@@ -1,7 +1,8 @@
 import type { SelectedLineRange } from "@/workspaces/files/model"
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
+import { createStore } from "solid-js/store"

 type HandoffSession = {
-  prompt: string
  files: Record<string, SelectedLineRange | null>
 }

@@ -11,6 +12,8 @@ const store = {
  session: new Map<string, HandoffSession>(),
  terminal: new Map<string, string[]>(),
 }
+const [messages, setMessages] = createStore<Record<string, SessionMessageUser | undefined>>({})
+const messageOrder = new Map<string, true>()

 const touch = <K, V>(map: Map<K, V>, key: K, value: V) => {
  map.delete(key)
@@ -23,12 +26,32 @@ const touch = <K, V>(map: Map<K, V>, key: K, value: V) => {
 }

 export const setSessionHandoff = (key: string, patch: Partial<HandoffSession>) => {
-  const prev = store.session.get(key) ?? { prompt: "", files: {} }
+  const prev = store.session.get(key) ?? { files: {} }
  touch(store.session, key, { ...prev, ...patch })
 }

 export const getSessionHandoff = (key: string) => store.session.get(key)

+export const setSessionMessageHandoff = (key: string, message: SessionMessageUser) => {
+  messageOrder.delete(key)
+  messageOrder.set(key, true)
+  setMessages(key, message)
+  while (messageOrder.size > MAX) {
+    const first = messageOrder.keys().next().value
+    if (first === undefined) return
+    messageOrder.delete(first)
+    setMessages(first, undefined)
+  }
+}
+
+export const getSessionMessageHandoff = (key: string) => messages[key]
+
+export const clearSessionMessageHandoff = (key: string, messageID: string) => {
+  if (messages[key]?.id !== messageID) return
+  messageOrder.delete(key)
+  setMessages(key, undefined)
+}
+
 export const setTerminalHandoff = (key: string, value: string[]) => {
  touch(store.terminal, key, value)
 }
@@ -15,6 +15,8 @@ import {
 } from "./session-domain"
 import { useSessionLayout } from "./session-layout"
 import { createSessionOwnership } from "./session-ownership"
+import { useTabs } from "@/shell/tabs/tabs"
+import { useServer } from "@/runtime/server/current"

 const emptyMessages: SessionMessageInfo[] = []
 const emptyUserMessages: SessionMessageUser[] = []
@@ -23,6 +25,8 @@ const idle = { type: "idle" as const }
 export function useSessionModel() {
  const file = useFile()
  const data = useData()
+  const server = useServer()
+  const shellTabs = useTabs()
  const layout = useSessionLayout()
  const location = useWorkspaceLocation()
  const isDesktop = createMediaQuery("(min-width: 768px)")
@@ -31,7 +35,16 @@ export function useSessionModel() {
    const id = sessionID()
    return id ? data.session.get(id) : undefined
  })
-  const parentID = createMemo(() => info()?.parentID)
+  const parentID = createMemo(() => {
+    const current = info()?.parentID
+    if (current) return current
+    const id = sessionID()
+    if (!id) return
+    const tab = shellTabs.store.find(
+      (item) => item.type === "session" && item.server === server.key && item.routeSessionId === id,
+    )
+    return tab?.type === "session" ? (tab.routeParentId ?? tab.sessionId) : undefined
+  })
  const parent = createMemo(() => {
    const id = parentID()
    return id ? data.session.get(id) : undefined
@@ -15,7 +15,8 @@ import { SessionUIProvider } from "@/shell/routes/session-ui-provider"
 import { useTabs } from "@/shell/tabs/tabs"
 import { requireServerKey } from "@/shell/routes/session"
 import { useSessionModel } from "./model"
-import { SessionPanelFrame, SessionRouteFrame } from "./session-frame"
+import { SessionPanelFrame } from "./session-frame"
+import { SessionIdentityHeader } from "./session-identity-header"
 import { IncompatibleServerPanel } from "./incompatible-server-panel"
 import { SessionErrorFallback } from "./route-error"
 import { createSessionResolution } from "./session-resolution"
@@ -31,7 +32,7 @@ export function TargetSessionRouteContent() {
      <MarkSessionNotificationsViewed sessionID={() => params.id} />
      <ModelsProvider directory={directory}>
        <TargetSessionSettingsCommand />
-        <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
+        <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)}>
          <ResolvedTargetSessionRoute />
        </SessionRouteErrorBoundary>
      </ModelsProvider>
@@ -45,16 +46,14 @@ function TargetSessionSettingsCommand() {
 }

 function SessionRouteErrorBoundary(
-  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key; padded?: boolean }>,
+  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>,
 ) {
  return (
    <ErrorBoundary
      fallback={(error) => (
-        <SessionRouteFrame padded={props.padded}>
-          <SessionPanelFrame raised={!!props.sessionID}>
-            <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
-          </SessionPanelFrame>
-        </SessionRouteFrame>
+        <SessionStatePanel>
+          <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
+        </SessionStatePanel>
      )}
    >
      {props.children}
@@ -78,16 +77,14 @@ function ResolvedTargetSessionRoute() {
    <Show
      when={!server.health?.incompatible}
      fallback={
-        <SessionRouteFrame padded>
-          <SessionPanelFrame raised>
-            <IncompatibleServerPanel
-              onClose={() => tabs.removeSessionTab({ server: server.key, sessionId: params.id })}
-            />
-          </SessionPanelFrame>
-        </SessionRouteFrame>
+        <SessionStatePanel>
+          <IncompatibleServerPanel
+            onClose={() => tabs.removeSessionTab({ server: server.key, sessionId: params.id })}
+          />
+        </SessionStatePanel>
      }
    >
-      <Show when={directory()}>
+      <Show when={directory()} fallback={<PendingSessionState sessionID={params.id} />}>
        {(value) => (
          <LocationProvider directory={value()}>
            <SessionUIProvider directory={value()} server={server.key}>
@@ -100,6 +97,22 @@ function ResolvedTargetSessionRoute() {
  )
 }

+function PendingSessionState(props: { sessionID: string }) {
+  return (
+    <SessionStatePanel>
+      <SessionIdentityHeader sessionID={props.sessionID} />
+    </SessionStatePanel>
+  )
+}
+
+function SessionStatePanel(props: ParentProps) {
+  return (
+    <div class="flex min-h-0 flex-1 p-2">
+      <SessionPanelFrame raised>{props.children}</SessionPanelFrame>
+    </div>
+  )
+}
+
 function TargetSessionPage() {
  const location = useWorkspaceLocation()
  const server = useServerSDK()
@@ -8,7 +8,7 @@ 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, SessionRouteFrame } from "@/session/session-frame"
+import { SessionPanelFrame } from "@/session/session-frame"
 import { TerminalPanel } from "@/session/terminal/panel"
 import { useUsageExceededDialogs } from "./usage-exceeded-dialogs"
 import { SessionErrorFallback } from "./route-error"
@@ -17,6 +17,7 @@ import { createSessionReview } from "./review/model"
 import { SessionDesktopReview, SessionMobileReview, SessionMobileTabs } from "./review/view"
 import { createSessionTimelineInteraction } from "./timeline/interaction"
 import { ActiveSessionComposerRegion, createActiveSessionRegion } from "./composer/region"
+import { SessionIdentityHeader } from "./session-identity-header"

 export function SessionScreen(props: { session: SessionModel }) {
  const session = props.session
@@ -58,17 +59,31 @@ export function SessionScreen(props: { session: SessionModel }) {

  const sessionPanelContent = () => (
    <>
-      {timeline.resource() ?? ""}
      <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="flex-1 min-h-0 overflow-hidden">
        <Switch>
          <Match when={session.identity.params.id && review.mobile.changes()}>
            <SessionMobileReview review={review} />
          </Match>
          <Match when={session.identity.params.id}>
-            <Show when={messagesReady() ? session.identity.params.id : undefined} keyed>
+            <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
                  session={session}
@@ -117,7 +132,7 @@ export function SessionScreen(props: { session: SessionModel }) {
  )

  return (
-    <SessionRouteFrame>
+    <>
      <SessionHeader />
      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
        <div ref={screen.panel.ref} class="flex-1 min-h-0 flex flex-col md:flex-row gap-2">
@@ -220,6 +235,6 @@ export function SessionScreen(props: { session: SessionModel }) {
          </div>
        </Show>
      </div>
-    </SessionRouteFrame>
+    </>
  )
 }
@@ -0,0 +1,3 @@
+export function looksLikeSessionID(value: string) {
+  return value.length > 20 && value.startsWith("ses_")
+}
@@ -0,0 +1,145 @@
+import type { SessionInfo } from "@opencode-ai/client/promise"
+import { Icon } from "@opencode-ai/ui/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { useNavigate } from "@solidjs/router"
+import { createMemo, Show, type ParentProps } from "solid-js"
+import { useServer } from "@/runtime/server/current"
+import { displayName, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
+import { getProjectAvatarVariant } from "@/shell/state/layout"
+import { tabKey, useTabs } from "@/shell/tabs/tabs"
+import { useSettings } from "@/settings/model"
+import { pathKey } from "@/workspaces/path-key"
+import { isWorkspaceDirectory } from "@/workspaces/paths"
+import { sessionHref } from "@/shell/routes/session"
+import { sessionTitle } from "./title"
+
+export function SessionTitleHeader(props: ParentProps) {
+  return (
+    <div
+      data-session-title
+      class="sticky top-0 z-30 w-full bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)] pb-4 pe-3 ps-2.5"
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export function SessionIdentityHeader(props: { sessionID: string; session?: SessionInfo }) {
+  const server = useServer()
+  const tabs = useTabs()
+  const settings = useSettings()
+  const navigate = useNavigate()
+  const tab = createMemo(() =>
+    tabs.store.find(
+      (item) =>
+        item.type === "session" &&
+        item.server === server.key &&
+        (item.sessionId === props.sessionID || item.routeSessionId === props.sessionID),
+    ),
+  )
+  const info = createMemo(() => {
+    const current = tab()
+    return current ? tabs.info[tabKey(current)] : undefined
+  })
+  const parentID = createMemo(() => {
+    if (props.session?.parentID) return props.session.parentID
+    const current = tab()
+    if (current?.type !== "session" || current.routeSessionId !== props.sessionID) return
+    return current.routeParentId ?? current.sessionId
+  })
+  const parent = createMemo(() => {
+    const id = parentID()
+    return id ? server.ctx.data.session.get(id) : undefined
+  })
+  const parentTitle = createMemo(() => {
+    const id = parentID()
+    const current = tab()
+    return sessionTitle(parent()?.title ?? (current?.type === "session" && current.sessionId === id ? info()?.title : undefined))
+  })
+  const directory = createMemo(() => props.session?.location.directory ?? info()?.directory)
+  const title = createMemo(() => sessionTitle(props.session?.title ?? (parentID() ? undefined : info()?.title)))
+  const project = createMemo(() => {
+    const projects = server.ctx.projects.list()
+    if (props.session) return projectForSession(props.session, projects)
+    const value = directory()
+    if (!value) return undefined
+    const key = pathKey(value)
+    return projects.find(
+      (item) => pathKey(item.worktree) === key || item.sandboxes?.some((sandbox) => pathKey(sandbox) === key),
+    )
+  })
+  const showProjectIcon = () =>
+    import.meta.env.VITE_OPENCODE_CHANNEL !== "prod" && settings.general.showProjectIcon() && !!directory()
+  const workspaceSession = createMemo(() => isWorkspaceDirectory(project(), directory() ?? ""))
+  const navigateParent = () => {
+    const id = parentID()
+    const current = tab()
+    if (!id || current?.type !== "session") return
+    tabs.rememberSessionRoute(current, id, parent()?.parentID)
+    navigate(sessionHref(server.key, id))
+  }
+
+  return (
+    <Show when={title() || parentTitle() || showProjectIcon()}>
+      <SessionTitleHeader>
+        <div class="flex h-12 w-full items-center justify-between gap-2">
+          <div class="flex min-w-0 flex-1 items-center gap-1">
+            <div class="flex min-w-0 w-full flex-1 items-center">
+              <span
+                classList={{
+                  "flex size-6 shrink-0 items-center justify-center": true,
+                  "text-v2-icon-icon-accent": workspaceSession() && !showProjectIcon(),
+                  "text-v2-icon-icon-muted": !workspaceSession() && !showProjectIcon(),
+                }}
+              >
+                <Show
+                  when={showProjectIcon()}
+                  fallback={<Icon name={workspaceSession() ? "workspace-isolated" : "monitor"} />}
+                >
+                  <ProjectAvatar
+                    fallback={displayName(project() ?? { worktree: directory() ?? "" })}
+                    src={getProjectAvatarSource(project()?.id, project()?.icon)}
+                    variant={getProjectAvatarVariant(project()?.icon?.color)}
+                  />
+                </Show>
+              </span>
+              <Show when={parentTitle()}>
+                {(value) => (
+                  <button
+                    type="button"
+                    data-slot="session-title-parent"
+                    dir="auto"
+                    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={navigateParent}
+                  >
+                    {value()}
+                  </button>
+                )}
+              </Show>
+              <Show when={parentTitle() && title()}>
+                <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={title()}>
+                {(value) => (
+                  <h1
+                    data-slot={parentID() ? "session-title-child" : undefined}
+                    dir="auto"
+                    class="w-fit truncate rounded-[6px] px-2 py-1 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base"
+                  >
+                    {value()}
+                  </h1>
+                )}
+              </Show>
+            </div>
+          </div>
+        </div>
+      </SessionTitleHeader>
+    </Show>
+  )
+}
@@ -208,8 +208,6 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void
    parentID: () => props.child?.parentID,
    child: () => !!props.child,
    showComposer: () => true,
-    handoffPrompt: () => undefined,
-    promptReady: () => true,
  } satisfies SessionComposerRegionViewController

  return (
@@ -221,6 +221,14 @@ export const Terminal = (props: TerminalProps) => {
  let drop: VoidFunction | undefined
  let reconn: ReturnType<typeof setTimeout> | undefined
  let tries = 0
+  let revealed = false
+
+  const reveal = () => {
+    if (revealed) return
+    if (!serializeAddon.serializeAsText({ trimWhitespace: true })) return
+    revealed = true
+    container.style.opacity = "1"
+  }

  const cleanup = () => {
    if (!cleanups.length) return
@@ -500,6 +508,7 @@ export const Terminal = (props: TerminalProps) => {

      if (restore && restoreSize) {
        await write(restore)
+        reveal()
        fit.fit()
        scheduleSize(t.cols, t.rows)
        if (scrollY !== undefined) t.scrollToLine(scrollY)
@@ -509,6 +518,7 @@ export const Terminal = (props: TerminalProps) => {
        scheduleSize(t.cols, t.rows)
        if (restore) {
          await write(restore)
+          reveal()
          if (scrollY !== undefined) t.scrollToLine(scrollY)
        }
        startResize()
@@ -605,6 +615,7 @@ export const Terminal = (props: TerminalProps) => {
          const data = typeof event.data === "string" ? event.data : ""
          if (!data) return
          output?.push(data)
+          if (!revealed) output?.flush(reveal)
          cursor += data.length
          seek = cursor
        }
@@ -685,7 +696,7 @@ export const Terminal = (props: TerminalProps) => {
      dir="ltr"
      data-prevent-autofocus
      tabIndex={-1}
-      style={{ "background-color": terminalColors().background }}
+      style={{ "background-color": terminalColors().background, "caret-color": "transparent", opacity: 0 }}
      classList={{
        ...local.classList,
        "select-text": true,
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { SessionInboxInfo, SessionMessageInfo } from "@opencode-ai/client/promise"
-import { visibleTimelineMessages } from "./controller-projection"
+import { applyTimelineMessageHandoff, visibleTimelineMessages } from "./controller-projection"

 const messages = [
  { id: "msg_1", type: "user", text: "first", time: { created: 1 } },
@@ -41,3 +41,37 @@ describe("visibleTimelineMessages", () => {
    expect(visibleTimelineMessages(messages, [], "msg_0")).toEqual([])
  })
 })
+
+describe("applyTimelineMessageHandoff", () => {
+  const handoff = {
+    id: "msg_image",
+    type: "user",
+    text: "",
+    files: [
+      {
+        data: "",
+        mime: "image/png",
+        source: { type: "uri", uri: "blob:image" },
+        name: "image.png",
+      },
+    ],
+    time: { created: 1 },
+  } satisfies SessionMessageInfo
+
+  test("shows a promoted image-only prompt before client admission", () => {
+    expect(applyTimelineMessageHandoff([], handoff)).toEqual([handoff])
+  })
+
+  test("adds attachments to the client's optimistic row", () => {
+    const optimistic = { id: handoff.id, type: "user", text: "", time: { created: 2 } } satisfies SessionMessageInfo
+    expect(applyTimelineMessageHandoff([optimistic], handoff)).toEqual([{ ...optimistic, files: handoff.files }])
+  })
+
+  test("keeps the durable attachment payload", () => {
+    const durable = {
+      ...handoff,
+      files: [{ data: "YQ==", mime: "image/png", source: { type: "inline" } }],
+    } satisfies SessionMessageInfo
+    expect(applyTimelineMessageHandoff([durable], handoff)).toEqual([durable])
+  })
+})
@@ -1,4 +1,13 @@
-import type { SessionInboxInfo, SessionMessageInfo } from "@opencode-ai/client/promise"
+import type { SessionInboxInfo, SessionMessageInfo, SessionMessageUser } from "@opencode-ai/client/promise"
+
+export function applyTimelineMessageHandoff(messages: SessionMessageInfo[], handoff?: SessionMessageUser) {
+  if (!handoff) return messages
+  const index = messages.findIndex((message) => message.id === handoff.id)
+  if (index < 0) return [...messages, handoff]
+  const message = messages[index]
+  if (message.type !== "user" || message.files?.length) return messages
+  return messages.map((item, current) => (current === index ? { ...message, files: handoff.files } : item))
+}

 export function visibleTimelineMessages(
  messages: SessionMessageInfo[],
@@ -16,9 +16,15 @@ import { sessionHref } from "@/shell/routes/session"
 import { sessionTitle } from "@/session/title"
 import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from "@/session/commands/export"
 import { showToast } from "@/shell/notifications/toast"
-import { timelineChildTitle, timelineRemovedSessionIDs, visibleTimelineMessages } from "./controller-projection"
+import {
+  applyTimelineMessageHandoff,
+  timelineChildTitle,
+  timelineRemovedSessionIDs,
+  visibleTimelineMessages,
+} from "./controller-projection"
 import { createTimelineProjection } from "./projection"
 import { useServer } from "@/runtime/server/current"
+import { getSessionMessageHandoff } from "@/session/handoff"

 const emptyMessages: SessionMessageInfo[] = []
 const taskDescription = (message: SessionMessageInfo, sessionID: string): string | undefined => {
@@ -52,10 +58,16 @@ export function createTimelineController(input: { session: TimelineSessionSource
  const tabs = useTabs()
  const dialog = useDialog()
  const language = useLanguage()
+  const handedOffMessages = createMemo(() =>
+    applyTimelineMessageHandoff(
+      input.session.history.messages(),
+      getSessionMessageHandoff(input.session.identity.sessionKey()),
+    ),
+  )
  const projectedMessages = createMemo(() => {
    const id = input.session.identity.sessionID()
    return visibleTimelineMessages(
-      input.session.history.messages(),
+      handedOffMessages(),
      id ? data.session.pending.list(id) : [],
      input.session.data.info()?.revert?.messageID,
    )
@@ -1,7 +1,7 @@
 import type { SessionMessageUser } from "@opencode-ai/client/promise"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { useLocation } from "@solidjs/router"
-import { createEffect, createSignal, on, onCleanup } from "solid-js"
+import { createEffect, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLayout } from "@/shell/state/layout"
 import type { SessionModel } from "../model"
@@ -19,6 +19,10 @@ export function createSessionTimelineInteraction(session: SessionModel) {
      overflow: false,
      jump: false,
    },
+    follow: {
+      sessionKey: session.identity.sessionKey(),
+      pinned: true,
+    },
    refs: {
      content: undefined as HTMLDivElement | undefined,
      dock: undefined as HTMLDivElement | undefined,
@@ -26,11 +30,11 @@ export function createSessionTimelineInteraction(session: SessionModel) {
  })
  // The single source of truth for "follow the newest content". The virtualizer pins and unpins
  // it from scroll geometry; everything else only expresses explicit intent.
-  const [pinned, setPinned] = createSignal(true)
-  const pin = () => setPinned(true)
+  const pinned = () => state.follow.sessionKey !== session.identity.sessionKey() || state.follow.pinned
+  const pin = () => setState("follow", { sessionKey: session.identity.sessionKey(), pinned: true })
  const unpin = () => {
    if (!scroller || scroller.scrollHeight - scroller.clientHeight <= 1) return
-    setPinned(false)
+    setState("follow", { sessionKey: session.identity.sessionKey(), pinned: false })
  }
  let scroller: HTMLDivElement | undefined
  let dockHeight = 0
@@ -209,8 +213,10 @@ export function createSessionTimelineInteraction(session: SessionModel) {
    on(
      session.identity.sessionKey,
      () => {
+        pin()
        setState("messageID", undefined)
        setState("pendingMessage", undefined)
+        setState("scroll", { overflow: false, jump: false })
      },
      { defer: true },
    ),
@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, on, Show, type Accessor } from "solid-js"
+import { createEffect, createMemo, createSignal, For, on, Show, type Accessor, type JSX } from "solid-js"
 import createPresence from "solid-presence"
 import { createStore } from "solid-js/store"
 import type { SessionUserActions } from "@opencode-ai/session-ui/actions"
@@ -17,7 +17,7 @@ import { getFilename } from "@opencode-ai/util/path"
 import { Popover } from "@kobalte/core/popover"
 import { SessionContextUsage } from "@/session/timeline/session-context-usage"
 import { useLanguage } from "@/runtime/i18n/language"
-import { useData } from "@/runtime/server/current"
+import { useData, useServer } from "@/runtime/server/current"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { Timeline, TimelineRow } from "@opencode-ai/session-ui/timeline/projection"
 import { createSessionTimelineRowRenderer } from "@opencode-ai/session-ui/timeline/row"
@@ -26,9 +26,11 @@ import { createTimelineVirtualizer } from "./virtualizer"
 import { containsDirectory, isWorkspaceDirectory, workspaceDirectories } from "@/workspaces/paths"
 import { SessionWorkspaceMenu } from "@/session/timeline/session-workspace-menu"
 import { getProjectAvatarVariant } from "@/shell/state/layout"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { displayName, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
 import { parseCommentNote, readPromptPresentation } from "@/composer/comment-note"
 import { useCommand } from "@/shell/commands/command"
+import { useSettings } from "@/settings/model"
+import { SessionTitleHeader } from "../session-identity-header"

 type BackgroundTask = {
  id: string
@@ -180,6 +182,7 @@ function WorkspaceMoveAction(props: {

 function SessionSummaryPanel(props: {
  project: Project
+  avatar?: JSX.Element
  directory: string
  local: boolean
  branch?: string
@@ -206,11 +209,13 @@ function SessionSummaryPanel(props: {
    <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}>
-          <ProjectAvatar
-            fallback={displayName(props.project)}
-            src={getProjectAvatarSource(props.project.id, props.project.icon)}
-            variant={getProjectAvatarVariant(props.project.icon?.color)}
-          />
+          {props.avatar ?? (
+            <ProjectAvatar
+              fallback={displayName(props.project)}
+              src={getProjectAvatarSource(props.project.id, props.project.icon)}
+              variant={getProjectAvatarVariant(props.project.icon?.color)}
+            />
+          )}
          <span class="min-w-0 flex-1 truncate text-v2-text-text-muted">{displayName(props.project)}</span>
        </div>
        <SessionWorkspaceMenu
@@ -325,6 +330,8 @@ function MessageTimelineView(
 ) {
  const language = useLanguage()
  const data = useData()
+  const server = useServer()
+  const settings = useSettings()
  const sdk = useWorkspaceLocation()
  const sessionID = props.data.sessionID
  const sessionStatus = props.data.status
@@ -343,6 +350,21 @@ function MessageTimelineView(
    return { ...value, worktree: value.canonical, worktrees: [] }
  })
  const workspaceSession = createMemo(() => isWorkspaceDirectory(project(), sessionDirectory()))
+  const showProjectIcon = () =>
+    import.meta.env.VITE_OPENCODE_CHANNEL !== "prod" && settings.general.showProjectIcon()
+  const avatarProject = createMemo(() => {
+    if (!showProjectIcon()) return
+    const session = props.session.data.info()
+    if (!session) return
+    return projectForSession(session, server.ctx.projects.list())
+  })
+  const projectAvatar = () => (
+    <ProjectAvatar
+      fallback={displayName(avatarProject() ?? { worktree: sessionDirectory() })}
+      src={getProjectAvatarSource(avatarProject()?.id, avatarProject()?.icon)}
+      variant={getProjectAvatarVariant(avatarProject()?.icon?.color)}
+    />
+  )
  createEffect(() => {
    const directory = project()?.worktree
    if (!directory) return
@@ -484,7 +506,7 @@ function MessageTimelineView(
              ref={setBackgroundHintRef}
              class="duration-150 motion-reduce:animate-none"
              classList={{
-                [`flex h-8 items-start pt-2 ${turnPadding()}`]: true,
+                [`flex h-9 items-start pt-3 ${turnPadding()}`]: true,
                "animate-in fade-in": backgroundHintVisibility().animate && backgroundHintVisibility().show,
                "animate-out fade-out fill-mode-forwards":
                  backgroundHintVisibility().animate && !backgroundHintVisibility().show,
@@ -502,10 +524,7 @@ function MessageTimelineView(
      }}
      renderRow={(row, onSizeChange) => <rowRenderer.Row row={row} onSizeChange={onSizeChange} />}
      header={
-        <div
-          data-session-title
-          class="sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)] w-full pb-4 pr-3 pl-2.5"
-        >
+        <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">
@@ -513,7 +532,9 @@ function MessageTimelineView(
                  when={workspaceSession()}
                  fallback={
                    <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
-                      <Icon name="monitor" />
+                      <Show when={showProjectIcon()} fallback={<Icon name="monitor" />}>
+                        {projectAvatar()}
+                      </Show>
                    </span>
                  }
                >
@@ -525,9 +546,14 @@ function MessageTimelineView(
                    <span
                      tabIndex={0}
                      aria-label={sessionDirectory()}
-                      class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-accent"
+                      classList={{
+                        "flex size-6 shrink-0 items-center justify-center": true,
+                        "text-v2-icon-icon-accent": !showProjectIcon(),
+                      }}
                    >
-                      <Icon name="workspace-isolated" />
+                      <Show when={showProjectIcon()} fallback={<Icon name="workspace-isolated" />}>
+                        {projectAvatar()}
+                      </Show>
                    </span>
                  </Tooltip>
                </Show>
@@ -613,6 +639,7 @@ function MessageTimelineView(
                          <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}
@@ -687,7 +714,7 @@ function MessageTimelineView(
              )}
            </Show>
          </div>
-        </div>
+        </SessionTitleHeader>
      }
    />
  )
@@ -1,6 +1,12 @@
 import { describe, expect, test } from "bun:test"
 import type { SessionMessageAssistant, SessionMessageInfo, SessionMessageUser } from "@opencode-ai/client/promise"
-import { loadOlderTimeline, selectUserMessages, selectVisibleUserMessages } from "./model"
+import {
+  enrichLeadingTurn,
+  leadingTurnNeedsParent,
+  loadOlderTimeline,
+  selectUserMessages,
+  selectVisibleUserMessages,
+} from "./model"

 const user = (id: string): SessionMessageUser => ({ id, type: "user", text: id, time: { created: 1 } })
 const assistant = (id: string): SessionMessageAssistant => ({
@@ -42,6 +48,56 @@ describe("timeline model", () => {
    expect(anchors).toEqual(["before", "after", true])
  })

+  test("recognizes a leading partial assistant turn", () => {
+    expect(leadingTurnNeedsParent([assistant("msg_assistant"), user("msg_next")])).toBe(true)
+    expect(leadingTurnNeedsParent([user("msg_user"), assistant("msg_assistant")])).toBe(false)
+    expect(leadingTurnNeedsParent([user("msg_user")])).toBe(false)
+  })
+
+  test("pauses between bounded history pages until the leading turn has its parent", async () => {
+    const pages: SessionMessageInfo[][] = [[assistant("msg_older")], [user("msg_parent")]]
+    const messages: SessionMessageInfo[] = [assistant("msg_latest"), user("msg_next")]
+    let pauses = 0
+    let loads = 0
+
+    await enrichLeadingTurn({
+      current: () => true,
+      messages: () => messages,
+      more: () => pages.length > 0,
+      loading: () => false,
+      loadMore: async () => {
+        messages.unshift(...pages.shift()!)
+        loads += 1
+      },
+      pause: async () => {
+        pauses += 1
+      },
+      maxPages: 3,
+    })
+
+    expect(loads).toBe(2)
+    expect(pauses).toBe(2)
+    expect(leadingTurnNeedsParent(messages)).toBe(false)
+  })
+
+  test("caps background pages when the parent remains outside the window", async () => {
+    let loads = 0
+
+    await enrichLeadingTurn({
+      current: () => true,
+      messages: () => [assistant("msg_latest")],
+      more: () => true,
+      loading: () => false,
+      loadMore: async () => {
+        loads += 1
+      },
+      pause: async () => undefined,
+      maxPages: 3,
+    })
+
+    expect(loads).toBe(3)
+  })
+
  test("does not restore an anchor after the session changes", async () => {
    let sessionID = "ses_old"
    let restore = 0
@@ -1,7 +1,11 @@
 import { createMemo, createResource, type Accessor } from "solid-js"
+import type { SessionMessageInfo } from "@opencode-ai/client/promise"
 import { useData } from "@/runtime/server/current"
 import type { SessionModel } from "../model"

+const leadingTurnPageDelay = 200
+const leadingTurnPageLimit = 3
+
 export {
  selectSessionUserMessages as selectUserMessages,
  selectVisibleSessionUserMessages as selectVisibleUserMessages,
@@ -9,12 +13,32 @@ export {

 export function createTimelineModel(input: { session: Pick<SessionModel, "identity" | "history"> }) {
  const data = useData()
+  const prepared = new Set<string>()

  const [resource] = createResource(
    () => input.session.identity.sessionID(),
-    (id) => (id ? Promise.all([data.session.message.sync(id), data.session.pending.sync(id)]) : undefined),
+    async (id) => {
+      if (!id) return
+      const key = input.session.identity.sessionKey()
+      await Promise.all([data.session.message.sync(id), data.session.pending.sync(id)])
+      await enrichLeadingTurn({
+        current: () => input.session.identity.sessionKey() === key,
+        messages: () => data.session.message.list(id),
+        more: () => data.session.message.more(id),
+        loading: () => data.session.message.loading(id),
+        loadMore: () => data.session.message.loadMore(id),
+        pause: () => new Promise((resolve) => setTimeout(resolve, leadingTurnPageDelay)),
+        maxPages: leadingTurnPageLimit,
+      }).catch(() => undefined)
+      if (input.session.identity.sessionKey() === key) prepared.add(key)
+    },
  )
-  const ready = createMemo(() => !input.session.identity.sessionID() || !resource.loading)
+  const ready = createMemo(() => {
+    const id = input.session.identity.sessionID()
+    if (!id || prepared.has(input.session.identity.sessionKey()) || !resource.loading) return true
+    const messages = data.session.message.list(id)
+    return messages.length > 0 && !leadingTurnNeedsParent(messages)
+  })
  const more = () => {
    const id = input.session.identity.sessionID()
    return id ? data.session.message.more(id) : false
@@ -28,7 +52,7 @@ export function createTimelineModel(input: { session: Pick<SessionModel, "identi
      sessionID: input.session.identity.sessionID,
      more,
      loading,
-      loadMore: data.session.message.loadMore,
+      loadMore: (id) => data.session.message.loadMore(id),
      before: options?.before,
      after: options?.after,
    })
@@ -44,6 +68,34 @@ export function createTimelineModel(input: { session: Pick<SessionModel, "identi
  }
 }

+export async function enrichLeadingTurn(input: {
+  current: Accessor<boolean>
+  messages: Accessor<SessionMessageInfo[]>
+  more: Accessor<boolean>
+  loading: Accessor<boolean>
+  loadMore: () => Promise<void>
+  pause: () => Promise<void>
+  maxPages: number
+}) {
+  const load = async (pages: number): Promise<void> => {
+    if (!input.current() || pages >= input.maxPages || !leadingTurnNeedsParent(input.messages()) || !input.more())
+      return
+    await input.pause()
+    if (!input.current() || !leadingTurnNeedsParent(input.messages()) || !input.more()) return
+    if (input.loading()) return load(pages)
+    await input.loadMore()
+    return load(pages + 1)
+  }
+  return load(0)
+}
+
+export function leadingTurnNeedsParent(messages: SessionMessageInfo[]) {
+  const assistant = messages.findIndex((message) => message.type === "assistant")
+  if (assistant === -1) return false
+  const boundary = messages.findIndex((message) => message.type === "user" || message.type === "shell")
+  return boundary === -1 || assistant < boundary
+}
+
 export async function loadOlderTimeline(input: {
  sessionID: Accessor<string | undefined>
  more: Accessor<boolean>
@@ -63,7 +63,8 @@ export function createTimelineProjection(input: {
    input.sessionMessages().forEach((message) => {
      if (message.type === "user") userID = message.id
      if (message.type === "shell") userID = undefined
-      if (message.type !== "assistant" || !userID) return
+      if (message.type !== "assistant") return
+      if (!userID) userID = message.id
      const messages = result.get(userID)
      if (messages) {
        messages.push(message)
@@ -20,6 +20,7 @@ import { observeElementOffsetReconnectAware } from "./observe-element-offset"
 import { filterVirtualIndexes } from "./virtual-items"

 const fallbackItemSize = 60
+const pendingMarkdown = '[data-component="markdown"]:not([data-markdown-ready])'
 // Distance from the bottom that counts as "at the end". Deliberately tight: a collapse clamps
 // exactly to the end, while a one-pixel nudge upward is a deliberate move away from it.
 const endEpsilon = 0.5
@@ -149,9 +150,13 @@ export function createTimelineVirtualizer(input: Input) {
    if (listRoot() && input.pinned()) anchorResizedBottom()
  }
  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
-    if (!instance.itemSizeCache.has(item.key) && addedKeys.delete(String(item.key))) {
-      return item.start < (instance.scrollOffset ?? 0) + instance.scrollAdjustments
-    }
+    // Prepended rows can resize more than once as deferred content mounts. Keep
+    // compensating while they remain entirely above the visible content fold.
+    if (addedKeys.has(String(item.key)))
+      return (
+        item.end <=
+        (instance.scrollOffset ?? 0) + instance.scrollAdjustments + instance.options.scrollMargin
+      )
    const first = instance.range?.startIndex
    return first !== undefined && item.index < first
  }
@@ -173,10 +178,48 @@ export function createTimelineVirtualizer(input: Input) {
  })

  let overscanFrame: number | undefined
+  const pendingMeasurements = () =>
+    virtualizer.getVirtualItems().some((item) => !virtualizer.itemSizeCache.has(item.key))
+  const settleColdBottom = () => {
+    if (input.pinned()) virtualizer.scrollToEnd()
+    if (virtualContent?.querySelector(pendingMarkdown) || pendingMeasurements()) {
+      overscanFrame = requestAnimationFrame(settleColdBottom)
+      return
+    }
+    overscanFrame = requestAnimationFrame(() => {
+      if (input.pinned()) virtualizer.scrollToEnd()
+      if (virtualContent?.querySelector(pendingMarkdown) || pendingMeasurements()) {
+        settleColdBottom()
+        return
+      }
+      overscanFrame = undefined
+      const content = virtualContent
+      if (!content) return
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        content.style.removeProperty("visibility")
+        return
+      }
+      const animation = ["animate-in", "fade-in", "duration-150"]
+      const clearAnimation = (event: AnimationEvent) => {
+        if (event.target !== content) return
+        content.removeEventListener("animationend", clearAnimation)
+        content.removeEventListener("animationcancel", clearAnimation)
+        content.classList.remove(...animation)
+      }
+      content.addEventListener("animationend", clearAnimation)
+      content.addEventListener("animationcancel", clearAnimation)
+      content.classList.add(...animation)
+      content.style.removeProperty("visibility")
+    })
+  }
  onMount(() => {
    overscanFrame = requestAnimationFrame(() => {
-      overscanFrame = undefined
      if (renderOverscan() < 20) setRenderOverscan(20)
+      if (!coldBottomMount) {
+        overscanFrame = undefined
+        return
+      }
+      settleColdBottom()
    })
  })

@@ -363,11 +406,17 @@ export function createTimelineVirtualizer(input: Input) {
          <Show when={input.showHeader()}>{props.header}</Show>
          <div
            data-timeline-virtual-content
+            class="motion-reduce:animate-none"
            ref={(element) => {
              virtualContent = element
              input.setContentRef(element)
            }}
-            style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative", width: "100%" }}
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              position: "relative",
+              width: "100%",
+              visibility: coldBottomMount ? "hidden" : undefined,
+            }}
          >
            <For each={virtualRowKeys()}>{(rowKey) => <VirtualRow rowKey={rowKey} />}</For>
            <Show when={rows().length > 0}>
@@ -338,6 +338,20 @@ export const SettingsGeneral: Component<{
          </div>
        </SettingsRow>

+        <Show when={import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
+          <SettingsRow
+            title={language.t("settings.general.row.showProjectIcon.title")}
+            description={language.t("settings.general.row.showProjectIcon.description")}
+          >
+            <div data-action="settings-show-project-icon">
+              <Switch
+                checked={settings.general.showProjectIcon()}
+                onChange={(checked) => settings.general.setShowProjectIcon(checked)}
+              />
+            </div>
+          </SettingsRow>
+        </Show>
+
        <Show when={mobile() && import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
          <SettingsRow
            title={language.t("settings.general.row.mobileTitlebarBottom.title")}
@@ -31,6 +31,7 @@ export interface Settings {
    showNavigation: boolean
    showSearch: boolean
    showStatus: boolean
+    showProjectIcon: boolean
    showTerminal: boolean
    showReasoningSummaries: boolean
    shellToolPartsExpanded: boolean
@@ -117,6 +118,7 @@ const defaultSettings: Settings = {
    showNavigation: false,
    showSearch: false,
    showStatus: false,
+    showProjectIcon: false,
    showTerminal: false,
    showReasoningSummaries: false,
    shellToolPartsExpanded: false,
@@ -207,6 +209,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setShowStatus(value: boolean) {
          setStore("general", "showStatus", value)
        },
+        showProjectIcon: withFallback(() => store.general?.showProjectIcon, defaultSettings.general.showProjectIcon),
+        setShowProjectIcon(value: boolean) {
+          setStore("general", "showProjectIcon", value)
+        },
        showTerminal: withFallback(() => store.general?.showTerminal, defaultSettings.general.showTerminal),
        setShowTerminal(value: boolean) {
          setStore("general", "showTerminal", value)
@@ -134,7 +134,7 @@
  font-style: normal;
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  letter-spacing: -0.04px;
  color: var(--v2-text-text-base);
  font-variation-settings: "slnt" 0;
@@ -281,7 +281,7 @@
  padding-block: 20px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
 }

@@ -289,7 +289,7 @@
  padding-inline-end: 12px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
  opacity: 0;
  transition: opacity 200ms ease;
@@ -307,7 +307,7 @@
  background: transparent;
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-accent);
  cursor: pointer;
  text-align: start;
@@ -329,7 +329,7 @@
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
 }

 .settings-providers .settings-section-title + [data-component="settings-list"] {
@@ -478,7 +478,7 @@
  padding-block: 48px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
  text-align: center;
 }
@@ -495,7 +495,7 @@
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
 }

 .settings-shortcuts [data-component="settings-list"] {
@@ -525,7 +525,7 @@
 .settings-shortcuts [data-component="settings-list"] > div > span {
  font-weight: 440;
  font-size: 13px;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  letter-spacing: -0.04px;
  color: var(--v2-text-text-base);
  font-variation-settings: "slnt" 0;
@@ -577,7 +577,7 @@
  padding-block: 48px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
  text-align: center;
 }
@@ -654,7 +654,7 @@
 .settings-servers-name {
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-base);
 }

@@ -674,7 +674,7 @@
  padding-block: 48px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
  text-align: center;
 }
@@ -784,7 +784,7 @@
  font-family: inherit;
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  letter-spacing: -0.04px;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -796,7 +796,7 @@
 .settings-workspaces-meta {
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-faint);
 }

@@ -856,7 +856,7 @@
  padding-block: 48px;
  font-size: 13px;
  font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-muted);
 }

@@ -933,7 +933,7 @@
 .settings-server-dialog-label {
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
  color: var(--v2-text-text-base);
 }

@@ -124,7 +124,7 @@
  color: var(--v2-text-text-base);
  font-size: 13px;
  font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
 }

 .project-settings-extension-section-header > :last-child {
@@ -96,7 +96,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
              </Field>

              <div class="flex w-full flex-col gap-2">
-                <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
+                <div class="select-none text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base">
                  {language.t("dialog.project.edit.icon")}
                </div>
                <div class="flex items-center gap-3">
@@ -150,7 +150,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon

              <Show when={!model.store.iconOverride}>
                <div class="flex w-full flex-col gap-2">
-                  <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
+                  <div class="select-none text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base">
                    {language.t("dialog.project.edit.color")}
                  </div>
                  <div class="-ml-1 flex gap-1.5">
@@ -1,7 +1,6 @@
 import { getFilename } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
-import { normalizeProjectInfo } from "@/runtime/server/global-sync/utils"
 import { createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useGlobal } from "@/runtime/server/runtime"
@@ -9,7 +8,7 @@ import { type LocalProject } from "@/shell/state/layout"
 import { ServerConnection } from "@/runtime/server/registry"

 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
-  const supported = !props.project.id || props.project.id === "global"
+  const supported = true
  const dialog = useDialog()
  const global = useGlobal()
  const serverCtx = createMemo(() => global.ensureServerCtx(props.server))
@@ -72,9 +71,14 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
      const start = store.startup.trim()

      if (props.project.id && props.project.id !== "global") {
-        // TODO: Restore project edits when the V2 client exposes a project update API.
-        // await serverCtx().sdk.api.project.update({ projectID: props.project.id, name, icon, commands })
-        throw new Error(`Project ${props.project.id} cannot be updated`)
+        await serverCtx().sdk.api.project.update({
+          projectID: props.project.id,
+          name,
+          icon: { color: store.color ?? "", override: store.iconOverride ?? "" },
+          commands: { start },
+        })
+        dialog.close()
+        return
      }

      serverCtx().sync.project.meta(props.project.worktree, {
@@ -15,6 +15,7 @@ import { displayName, projectForSession } from "@/shell/layout/helpers"
 import { createSessionTabs } from "@/session/helpers"
 import { useSessionLayout } from "@/session/session-layout"
 import { useServer } from "@/runtime/server/current"
+import { looksLikeSessionID } from "@/session/search"

 export type CommandPaletteEntry = {
  id: string
@@ -147,6 +148,7 @@ export function createCommandPaletteModel(props: { filesOnly?: () => boolean; on
    opened: serverCtx.projects.list,
    stored: () => serverCtx.sync.data.project,
    load: (search, signal) => serverSDK.api.session.list({ parentID: null, search, limit: 50 }, { signal }),
+    get: (sessionID, signal) => serverSDK.api.session.get({ sessionID }, { signal }),
    untitled: () => language.t("command.session.new"),
    category: () => language.t("command.category.session"),
  })
@@ -221,6 +223,7 @@ export function createServerSessionEntries(props: {
  opened: () => LocalProject[]
  stored: () => Project[]
  load: (search: string, signal: AbortSignal) => Promise<{ data: SessionInfo[] }>
+  get: (sessionID: string, signal: AbortSignal) => Promise<SessionInfo>
  untitled: () => string
  category: () => string
 }) {
@@ -253,28 +256,36 @@ export function createServerSessionEntries(props: {
    const openedByID = new Map(opened.flatMap((project) => (project.id ? [[project.id, project] as const] : [])))
    const stored = props.stored().map((project) => ({ ...project, expanded: false }))
    const storedByID = new Map(stored.map((project) => [project.id, project] as const))
-    return props
-      .load(search, current.signal)
-      .then((result) =>
-        result.data
-          .filter((session) => !session.time.archived)
-          .map((session) => {
-            const project =
-              projectForSession(session, opened, openedByID) ?? projectForSession(session, stored, storedByID)
-            return {
-              id: `session:${props.server}:${session.id}`,
-              type: "session" as const,
-              title: session.title || props.untitled(),
-              description: project ? displayName(project) : getFilename(session.location.directory),
-              category: props.category(),
-              directory: session.location.directory,
-              sessionID: session.id,
-              server: props.server,
-              project,
-              updated: session.time.updated,
-            }
-          }),
-      )
-      .catch(() => [] as CommandPaletteEntry[])
+    return Promise.all([
+      props.load(search, current.signal).then(
+        (result) => result.data,
+        () => [],
+      ),
+      looksLikeSessionID(search)
+        ? props.get(search, current.signal).then(
+            (result) => [result],
+            () => [],
+          )
+        : Promise.resolve([]),
+    ]).then(([listed, exact]) =>
+      [...new Map([...exact, ...listed].map((session) => [session.id, session] as const)).values()]
+        .filter((session) => !session.time.archived)
+        .map((session) => {
+          const project =
+            projectForSession(session, opened, openedByID) ?? projectForSession(session, stored, storedByID)
+          return {
+            id: `session:${props.server}:${session.id}`,
+            type: "session" as const,
+            title: session.title || props.untitled(),
+            description: project ? displayName(project) : getFilename(session.location.directory),
+            category: props.category(),
+            directory: session.location.directory,
+            sessionID: session.id,
+            server: props.server,
+            project,
+            updated: session.time.updated,
+          }
+        }),
+    )
  }
 }
@@ -88,9 +88,9 @@ function Cell(props: {
        </div>
        <div
          classList={{
-            "uppercase leading-none font-bold tabular-nums": true,
-            "text-[11px]": !!props.inline,
-            "text-[13px] sm:text-[14px]": !props.inline,
+            "uppercase font-bold tabular-nums": true,
+            "text-[11px] leading-text-tight": !!props.inline,
+            "text-[13px] leading-text-compact sm:text-[14px]": !props.inline,
            "text-text-on-critical-base": !!props.bad,
            "opacity-70": !!props.dim,
          }}
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { errorDescriptionKey } from "./description"
+import { errorDescriptionKey, errorStatus } from "./description"

 describe("error description", () => {
  test("describes local server startup errors", () => {
@@ -15,3 +15,19 @@ describe("error description", () => {
    )
  })
 })
+
+describe("error status", () => {
+  test("finds status codes in an error cause", () => {
+    expect(errorStatus(new Error("UnexpectedStatus", { cause: { status: 502 } }))).toBe(502)
+  })
+
+  test("finds status codes in structured error data", () => {
+    expect(errorStatus({ name: "APIError", data: { statusCode: 401 } })).toBe(401)
+  })
+
+  test("ignores invalid and circular status values", () => {
+    const error: { status: number; cause?: unknown } = { status: 99 }
+    error.cause = error
+    expect(errorStatus(error)).toBeUndefined()
+  })
+})
@@ -9,3 +9,21 @@ export function errorDescriptionKey(error: unknown) {
  }
  return "error.page.description" as const
 }
+
+export function errorStatus(error: unknown) {
+  const seen = new Set<object>()
+  const visit = (value: unknown): number | undefined => {
+    if (typeof value !== "object" || value === null || seen.has(value)) return
+    seen.add(value)
+    const item = value as Record<string, unknown>
+
+    for (const key of ["status", "statusCode"] as const) {
+      const status = item[key]
+      if (typeof status === "number" && Number.isInteger(status) && status >= 100 && status <= 599) return status
+    }
+
+    return visit(item.cause) ?? visit(item.data)
+  }
+
+  return visit(error)
+}
@@ -7,7 +7,7 @@ import { createStore } from "solid-js/store"
 import { usePlatform } from "@/runtime/platform/platform"
 import { useLanguage } from "@/runtime/i18n/language"
 import { Icon } from "@opencode-ai/ui/icon"
-import { errorDescriptionKey } from "./description"
+import { errorDescriptionKey, errorStatus } from "./description"

 export type InitError = {
  name: string
@@ -223,6 +223,7 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
  const platform = usePlatform()
  const language = useLanguage()
  const formattedError = () => formatError(props.error, language.t)
+  const status = () => errorStatus(props.error)
  let recordedFatalError: Promise<void> | undefined
  const [store, setStore] = createStore({
    actionError: undefined as string | undefined,
@@ -277,14 +278,20 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {

  return (
    <div
-      class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center font-sans"
+      class="relative flex-1 h-screen w-screen min-h-0 overflow-y-auto flex flex-col items-center justify-start sm:justify-center p-4 sm:p-8 font-sans"
      data-tauri-drag-region
    >
-      <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
-        <Logo class="w-58.5 opacity-12 shrink-0" />
+      <div class="w-full max-w-3xl flex flex-col items-center justify-center gap-6 sm:gap-8 my-auto">
+        <Logo class="w-48 sm:w-58.5 opacity-12 shrink-0" />
        <div class="flex flex-col items-center gap-2 text-center">
-          <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.title")}</h1>
-          <p class="text-sm text-text-weak">{language.t(errorDescriptionKey(props.error))}</p>
+          <h1 class="text-lg font-medium text-text-strong">
+            {language.t(status() ? "error.page.title.status" : "error.page.title")}
+          </h1>
+          <p class="text-sm text-text-weak">
+            {status()
+              ? language.t("error.page.description.status", { status: status()! })
+              : language.t(errorDescriptionKey(props.error))}
+          </p>
        </div>
        <TextField
          value={formattedError()}
@@ -297,7 +304,7 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
        />
        <div class="flex flex-row items-center justify-center gap-3 flex-wrap max-w-64">
          <Button size="large" onClick={platform.restart}>
-            {language.t("error.page.action.restart")}
+            {language.t(platform.platform === "web" ? "error.page.action.reload" : "error.page.action.restart")}
          </Button>
          <Show when={platform.platform === "desktop" && platform.exportDebugLogs}>
            <Button size="large" variant="ghost" onClick={exportDebugLogs}>
@@ -348,8 +355,8 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
        <Show when={store.actionError}>
          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message()}</p>}
        </Show>
-        <div class="flex flex-col items-center gap-2">
-          <div class="flex items-center justify-center gap-1">
+        <div class="flex flex-col items-center gap-2 text-xs text-center">
+          <div class="flex flex-wrap items-center justify-center gap-1">
            {language.t("error.page.report.prefix")}
            <button
              type="button"
@@ -215,7 +215,7 @@ export function createServerNotificationState(input: { sdk: ServerSDK; data: Dat
    dispatchEvent(new PopStateEvent("popstate"))
  }

-  const handleSessionIdle = (directory: string, sessionID: string, time: number) => {
+  const handleSessionIdle = (sessionID: string, time: number) => {
    void lookup(sessionID).then((session) => {
      if (meta.disposed) return
      if (!session) return
@@ -226,7 +226,7 @@ export function createServerNotificationState(input: { sdk: ServerSDK; data: Dat
      }

      append({
-        directory,
+        directory: session.location.directory,
        time,
        viewed: viewedInCurrentSession(sessionID),
        type: "turn-complete",
@@ -243,7 +243,6 @@ export function createServerNotificationState(input: { sdk: ServerSDK; data: Dat
  }

  const handleSessionError = (
-    directory: string,
    sessionID: string,
    error: ErrorNotification["error"],
    time: number,
@@ -257,7 +256,7 @@ export function createServerNotificationState(input: { sdk: ServerSDK; data: Dat
      }

      append({
-        directory,
+        directory: session?.location.directory,
        time,
        viewed: viewedInCurrentSession(sessionID),
        type: "error",
@@ -275,21 +274,14 @@ export function createServerNotificationState(input: { sdk: ServerSDK; data: Dat
  }

  const unsub = input.sdk.event.listen((event) => {
-    if (
-      event.type !== "session.execution.succeeded" &&
-      event.type !== "session.execution.interrupted" &&
-      event.type !== "session.execution.failed"
-    )
-      return
+    if (event.type !== "session.execution.succeeded" && event.type !== "session.execution.failed") return

-    const directory = event.location?.directory
-    if (!directory) return
    const time = Date.now()
    if (event.type === "session.execution.failed") {
-      handleSessionError(directory, event.data.sessionID, event.data.error, time)
+      handleSessionError(event.data.sessionID, event.data.error, time)
      return
    }
-    handleSessionIdle(directory, event.data.sessionID, time)
+    handleSessionIdle(event.data.sessionID, time)
  })
  onCleanup(() => {
    meta.disposed = true
@@ -3,7 +3,7 @@ let loads: Record<SoundID, () => Promise<string>> | undefined

 function getFiles() {
  if (files) return files
-  files = import.meta.glob("../../../ui/src/assets/audio/*.aac", { import: "default" }) as Record<
+  files = import.meta.glob("../../../../ui/src/assets/audio/*.aac", { import: "default" }) as Record<
    string,
    () => Promise<string>
  >
@@ -1,9 +1,10 @@
 import { Route, useParams } from "@solidjs/router"
-import { createMemo, lazy, Show, type ParentProps } from "solid-js"
+import { createMemo, lazy, Show, Suspense, type ParentProps } from "solid-js"
 import { Home } from "@/home/route"
 import { ServerProvider } from "@/runtime/server/current"
 import { useGlobal } from "@/runtime/server/runtime"
 import { ServerConnection } from "@/runtime/server/registry"
+import { SessionPanelFrame, SessionRouteFrame } from "@/session/session-frame"
 import { LayoutProvider } from "@/shell/state/layout"
 import Shell from "@/shell/shell"
 import { requireServerKey } from "./session"
@@ -31,9 +32,19 @@ export function AppRoutes() {
      <Route
        path="/server/:serverKey/session/:id"
        component={() => (
-          <TargetServerRoute>
-            <TargetSessionRouteContent />
-          </TargetServerRoute>
+          <SessionRouteFrame>
+            <Suspense
+              fallback={
+                <div class="flex min-h-0 flex-1 p-2">
+                  <SessionPanelFrame raised />
+                </div>
+              }
+            >
+              <TargetServerRoute>
+                <TargetSessionRouteContent />
+              </TargetServerRoute>
+            </Suspense>
+          </SessionRouteFrame>
        )}
      />
      <Route path="/new-session" component={DraftRoute} />
@@ -5,6 +5,7 @@ import { LocalProvider } from "@/providers/models/selection"
 import type { ServerConnection } from "@/runtime/server/registry"
 import { sessionHref } from "@/shell/routes/session"
 import { useData } from "@/runtime/server/current"
+import { useTabs } from "@/shell/tabs/tabs"

 export function SessionUIProvider(
  props: ParentProps<{
@@ -15,9 +16,17 @@ export function SessionUIProvider(
  const navigate = useNavigate()
  const params = useParams()
  const data = useData()
+  const tabs = useTabs()
  const directory = () => props.directory
  const href = (sessionID: string) => sessionHref(props.server, sessionID)
  const navigateToSession = async (sessionID: string) => {
+    const tab = tabs.store.find(
+      (item) =>
+        item.type === "session" &&
+        item.server === props.server &&
+        (item.sessionId === params.id || item.routeSessionId === params.id),
+    )
+    if (tab?.type === "session") tabs.rememberSessionRoute(tab, sessionID, params.id)
    await data.session.sync(sessionID).catch(() => undefined)
    navigate(href(sessionID))
  }
@@ -7,8 +7,25 @@ export function migrateTabs(value: unknown): Tab[] {
    if (!tab || typeof tab !== "object") return []
    if (!("server" in tab) || typeof tab.server !== "string") return []
    const server = tab.server as ServerConnection.Key
-    if (tab.type === "session" && typeof tab.sessionId === "string") {
-      return [{ type: tab.type, server, sessionId: tab.sessionId }]
+    if (
+      tab.type === "session" &&
+      typeof tab.sessionId === "string" &&
+      (tab.routeSessionId === undefined || typeof tab.routeSessionId === "string") &&
+      (tab.routeParentId === undefined || typeof tab.routeParentId === "string")
+    ) {
+      return [
+        {
+          type: tab.type,
+          server,
+          sessionId: tab.sessionId,
+          ...(tab.routeSessionId && tab.routeSessionId !== tab.sessionId
+            ? {
+                routeSessionId: tab.routeSessionId,
+                ...(tab.routeParentId ? { routeParentId: tab.routeParentId } : {}),
+              }
+            : {}),
+        },
+      ]
    }
    if (
      tab.type === "draft" &&
@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test"
 import { createRoot, getOwner, onCleanup } from "solid-js"
 import { createTabMemory } from "./memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed"
-import type { SessionTab, Tab } from "./tabs"
+import { tabHref, tabKey, type SessionTab, type Tab } from "./tabs"
 import { migrateTabs } from "./migration"
 import type { ServerConnection } from "@/runtime/server/registry"

@@ -27,6 +27,24 @@ describe("tab migration", () => {
    expect(migrateTabs(null)).toEqual([])
    expect(migrateTabs({})).toEqual([])
  })
+
+  test("preserves the active child route", () => {
+    expect(migrateTabs([{ ...sessionTab("root"), routeSessionId: "child", routeParentId: "parent" }])).toEqual([
+      { ...sessionTab("root"), routeSessionId: "child", routeParentId: "parent" },
+    ])
+  })
+
+  test("drops an invalid child route", () => {
+    expect(migrateTabs([{ ...sessionTab("parent"), routeSessionId: 1 }])).toEqual([])
+  })
+})
+
+test("session tab identity stays rooted while its href follows the child route", () => {
+  const parent = sessionTab("parent")
+  const child = { ...parent, routeSessionId: "child" }
+
+  expect(tabKey(child)).toBe(tabKey(parent))
+  expect(tabHref(child)).toContain("/session/child")
 })

 describe("tab memory", () => {
@@ -19,6 +19,8 @@ export type SessionTab = {
  type: "session"
  server: ServerConnection.Key
  sessionId: string
+  routeSessionId?: string
+  routeParentId?: string
 }

 export type DraftTab = {
@@ -43,12 +45,18 @@ type RecentTab = {
 export const draftHref = (draftID: string) => `/new-session?draftId=${encodeURIComponent(draftID)}`

 export const tabHref = (tab: Tab) =>
-  tab.type === "draft" ? draftHref(tab.draftID) : sessionHref(tab.server, tab.sessionId)
+  tab.type === "draft" ? draftHref(tab.draftID) : sessionHref(tab.server, tab.routeSessionId ?? tab.sessionId)

-export const tabKey = (tab: Tab) => (tab.type === "draft" ? `draft:${tab.draftID}` : `${tab.server}\n${tabHref(tab)}`)
+export const tabKey = (tab: Tab) =>
+  tab.type === "draft" ? `draft:${tab.draftID}` : `${tab.server}\n${sessionHref(tab.server, tab.sessionId)}`

 export function sessionHasOpenTab(tabs: Tab[], server: ServerConnection.Key, session: SessionInfo) {
-  return tabs.some((tab) => tab.type === "session" && tab.server === server && tab.sessionId === session.id)
+  return tabs.some(
+    (tab) =>
+      tab.type === "session" &&
+      tab.server === server &&
+      (tab.sessionId === session.id || tab.routeSessionId === session.id),
+  )
 }

 export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
@@ -65,7 +73,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
      createStore<Tab[]>([]),
    )
    const [recent, setRecent, , recentReady] = persisted(Persist.window("tabs.recent"), createStore<RecentTab>({}))
-    const [info, setInfo] = persisted(Persist.window("tabs.info"), createStore<Record<string, TabInfo>>({}))
+    const [info, setInfo, , infoReady] = persisted(
+      Persist.window("tabs.info"),
+      createStore<Record<string, TabInfo>>({}),
+    )
    const [closed, setClosed, , closedReady] = persisted(Persist.window("tabs.closed"), createStore<ClosedTab[]>([]))

    const params = useParams()
@@ -281,7 +292,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
      removeSessionTab(input: Omit<SessionTab, "type">) {
        updateClosed((stack) => removeClosedTabs(stack, input.server, [input.sessionId]))
        const index = store.findIndex(
-          (tab) => tab.type === "session" && tab.server === input.server && tab.sessionId === input.sessionId,
+          (tab) =>
+            tab.type === "session" &&
+            tab.server === input.server &&
+            (tab.sessionId === input.sessionId || tab.routeSessionId === input.sessionId),
        )
        if (index !== -1) removeTab(index)
      },
@@ -357,6 +371,18 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
        const key = tabKey(tab)
        if (recentKey() !== key) setRecentKey(key)
      },
+      rememberSessionRoute(tab: SessionTab, sessionId: string, parentId?: string) {
+        const index = store.findIndex((item) => tabKey(item) === tabKey(tab))
+        if (index === -1) return
+        setStore(
+          index,
+          produce((item) => {
+            if (item.type !== "session") return
+            item.routeSessionId = sessionId === item.sessionId ? undefined : sessionId
+            item.routeParentId = sessionId === item.sessionId ? undefined : parentId
+          }),
+        )
+      },
      toggleHome(input: { home: boolean; current?: Tab }) {
        if (input.home) {
          const tab = store.find((tab) => tabKey(tab) === recentKey())
@@ -378,6 +404,6 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
      },
    }

-    return { ...actions, store, info, ready, recentReady }
+    return { ...actions, store, info, ready, infoReady, recentReady }
  },
 })
@@ -88,7 +88,7 @@
  [data-slot="server"] {
    font-weight: 440;
    font-size: 13px;
-    line-height: 1;
+    line-height: var(--line-height-compact);
    letter-spacing: -0.04px;
    color: var(--v2-text-text-muted);
    overflow: hidden;
@@ -151,15 +151,24 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
            const tabs = useTabs()
            const tabsStore = tabs.store
            const tabsStoreActions = tabs
-            const [session] = createResource(
+            const [loadedSession] = createResource(
              () => {
                const route = layout.route()
                if (route.type !== "session") return undefined
                const conn = global.servers.list().find((item) => ServerConnection.key(item) === route.server)
-                return conn ? { route, sdk: global.ensureServerCtx(conn).sdk } : undefined
+                return conn ? { route, ctx: global.ensureServerCtx(conn) } : undefined
              },
-              ({ route, sdk }) => sdk.api.session.get({ sessionID: route.sessionId }).catch(() => {}),
+              ({ route, ctx }) => ctx.sdk.api.session.get({ sessionID: route.sessionId }).catch(() => {}),
            )
+            const session = createMemo(() => {
+              const route = layout.route()
+              if (route.type !== "session") return
+              const conn = global.servers.list().find((item) => ServerConnection.key(item) === route.server)
+              const cached = conn ? global.ensureServerCtx(conn).data.session.get(route.sessionId) : undefined
+              if (cached) return cached
+              const loaded = loadedSession()
+              return loaded?.id === route.sessionId ? loaded : undefined
+            })

            const matchRoute = (route: LayoutRoute) => {
              if (route.type === "home") return
@@ -169,7 +178,9 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
              if (route.type === "session") {
                const main = tabsStore.find(
                  (item) =>
-                    item.type === "session" && item.server === route.server && item.sessionId === route.sessionId,
+                    item.type === "session" &&
+                    item.server === route.server &&
+                    (item.sessionId === route.sessionId || item.routeSessionId === route.sessionId),
                )
                if (main) return main
                const s = session()
@@ -190,6 +201,14 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
              if (!tabs.ready()) return
              const tab = currentTab()
              if (tab) {
+                const current = session()
+                if (
+                  route.type === "session" &&
+                  tab.type === "session" &&
+                  (route.sessionId === tab.sessionId || current?.id === route.sessionId)
+                ) {
+                  tabs.rememberSessionRoute(tab, route.sessionId, current?.parentID)
+                }
                tabs.remember(tab)
                return
              }
@@ -36,6 +36,7 @@ describe("command palette sessions", () => {
      expanded: true,
    }
    const searches: string[] = []
+    const gets: string[] = []
    const result = await new Promise<Awaited<ReturnType<ReturnType<typeof createServerSessionEntries>>>>(
      (resolve, reject) => {
        createRoot((dispose) => {
@@ -49,6 +50,10 @@ describe("command palette sessions", () => {
                data: [session, { ...session, id: "archived-session", time: { ...session.time, archived: 3 } }],
              }
            },
+            get: async (sessionID) => {
+              gets.push(sessionID)
+              return session
+            },
            untitled: () => "Untitled",
            category: () => "Sessions",
          })
@@ -66,6 +71,7 @@ describe("command palette sessions", () => {
    )

    expect(searches).toEqual(["palette session"])
+    expect(gets).toEqual([])
    expect(result).toHaveLength(1)
    expect(getProjectAvatarSource(result[0]?.project?.id, result[0]?.project?.icon)).toBe("home-project-avatar")
    expect(result[0]).toMatchObject({
@@ -75,4 +81,31 @@ describe("command palette sessions", () => {
      project: { id: stored.id, icon: opened.icon },
    })
  })
+
+  test("loads an exact session when the query looks like an ID", async () => {
+    const exact = { ...session, id: "ses_12345678901234567890123456", title: "Exact session" }
+    const gets: string[] = []
+    const result = await new Promise<Awaited<ReturnType<ReturnType<typeof createServerSessionEntries>>>>(
+      (resolve, reject) => {
+        createRoot((dispose) => {
+          const search = createServerSessionEntries({
+            server: ServerConnection.Key.make("selected-server"),
+            opened: () => [],
+            stored: () => [stored],
+            load: async () => ({ data: [] }),
+            get: async (sessionID) => {
+              gets.push(sessionID)
+              return exact
+            },
+            untitled: () => "Untitled",
+            category: () => "Sessions",
+          })
+          search(exact.id).then(resolve, reject).finally(dispose)
+        })
+      },
+    )
+
+    expect(gets).toEqual([exact.id])
+    expect(result).toMatchObject([{ sessionID: exact.id, title: exact.title }])
+  })
 })
@@ -55,6 +55,40 @@ test("start anchoring preserves a stable visible item across prepends", () => {
  expect(writes.at(-1)).toBe(150)
 })

+// A pagination boundary can re-key the row at the viewport top when the truncated
+// leading turn regroups under its freshly loaded user message. The anchor must fall
+// back to the next surviving key instead of leaving the offset on the new content.
+test("prepend anchoring survives when the nearest keys are re-keyed", () => {
+  const root = document.createElement("div")
+  const writes: number[] = []
+  const options = (keys: string[]) => ({
+    count: keys.length,
+    estimateSize: () => 50,
+    initialOffset: 50,
+    initialRect: { width: 400, height: 100 },
+    anchorTo: "start" as const,
+    getItemKey: (index: number) => keys[index]!,
+    getScrollElement: () => root,
+    scrollToFn: (offset: number) => writes.push(offset),
+    observeElementRect: () => {},
+    observeElementOffset: (_element: HTMLDivElement, callback: (offset: number, isScrolling: boolean) => void) => {
+      callback(50, false)
+    },
+  })
+  // Viewport sits at offset 50: rows "orphan-c" (anchor) and "d" visible.
+  const virtualizer = new Virtualizer<HTMLDivElement, HTMLDivElement>(options(["orphan-c", "d", "e"]))
+  virtualizer._willUpdate()
+  virtualizer.getVirtualItems()
+
+  // Prepend re-keys the boundary row ("orphan-c" -> "c") while "d" and "e" survive.
+  virtualizer.setOptions(options(["a", "b", "c", "d", "e"]))
+  virtualizer._willUpdate()
+
+  // "d" was 50px below the anchor at old start 50; restored at new start 150 => offset 150.
+  expect(virtualizer.getScrollOffset()).toBe(150)
+  expect(writes.at(-1)).toBe(150)
+})
+
 test("reactive count updates preserve measured row sizes", () => {
  createRoot((dispose) => {
    const [count, setCount] = createSignal(2)
@@ -25,10 +25,13 @@ export default defineConfig({
    desktopPlugin,
    VitePWA({
      strategies: "generateSW",
+      registerType: "prompt",
+      injectRegister: false,
      manifest: false,
      workbox: {
        cleanupOutdatedCaches: true,
-        clientsClaim: true,
+        clientsClaim: false,
+        skipWaiting: false,
        inlineWorkboxRuntime: true,
        navigateFallback: "/index.html",
        navigateFallbackDenylist: [/^\/api(?:\/|$)/],
@@ -40,6 +43,7 @@ export default defineConfig({
          "web-app-manifest*",
          "assets/index-*.{js,css}",
          "assets/session-*.js",
+          "assets/IBMPlexMono-Text-*.woff2",
          "assets/Inter.ttf",
          "assets/JetBrainsMonoNerdFontMono-Regular.woff2",
        ],
@@ -27,6 +27,9 @@ if (outdir === path.join(dir, "dist-node")) {
 const bundleOnly = process.argv.includes("--bundle-only")
 const single = process.argv.includes("--single")
 const skipInstall = process.argv.includes("--skip-install")
+const appArchiveOnly = process.argv.includes("--app-archive-only")
+const requestedArchive = process.argv.find((arg) => arg.startsWith("--app-archive="))?.slice("--app-archive=".length)
+const archivePath = requestedArchive ? path.resolve(dir, requestedArchive) : undefined
 const requested = process.argv.find((arg) => arg.startsWith("--target="))?.slice("--target=".length)
 const allTargets = [
  nodeTarget("linux", "arm64"),
@@ -41,6 +44,14 @@ const targets = requested
    ? [nodeTarget(process.platform, process.arch)]
    : allTargets

+process.chdir(dir)
+if (!skipInstall) run(process.execPath, ["install", "--os=*", "--cpu=*"])
+if (appArchiveOnly) {
+  if (!archivePath) throw new Error("--app-archive-only requires --app-archive=<path>")
+  await mkdir(path.dirname(archivePath), { recursive: true })
+  await writeFile(archivePath, await buildAppArchive(Script.channel))
+  process.exit(0)
+}
 if (targets.length === 0) {
  if (requested === "darwin-x64") throw new Error("Node 26.4 SEA does not support macOS x64")
  throw new Error(`Unknown Node target: ${requested}`)
@@ -48,15 +59,12 @@ if (targets.length === 0) {
 if (!bundleOnly && targets.some((target) => target.platform === "darwin" && target.arch === "x64")) {
  throw new Error("Node 26.4 SEA does not support macOS x64")
 }
-
-process.chdir(dir)
-if (!skipInstall) run(process.execPath, ["install", "--os=*", "--cpu=*"])
+const appArchive = archivePath ? (await Bun.file(archivePath).text()).trim() : await buildAppArchive(Script.channel)
 if (!bundleOnly) await rm(outdir, { recursive: true, force: true })
 const builder =
  !bundleOnly || targets.some((target) => target.platform === process.platform && target.arch === process.arch)
    ? await resolveHostNode()
    : undefined
-const appArchive = await buildAppArchive(Script.channel)

 // Vite silently rewrites text imports of known asset types (.txt) to asset
 // URL strings when the raw-text plugin doesn't intercept them first — the
@@ -42,7 +42,9 @@ function serveUI(request: HttpServerRequest.HttpServerRequest, url: URL, assets:
    "x-content-type-options": "nosniff",
  }
  return Effect.succeed(
-    request.method === "HEAD" ? HttpServerResponse.empty({ headers }) : HttpServerResponse.raw(file, { headers }),
+    request.method === "HEAD"
+      ? HttpServerResponse.empty({ headers })
+      : HttpServerResponse.raw(file, { headers, contentType: headers["content-type"] }),
  )
 }

@@ -55,6 +55,7 @@ describe("web UI", () => {

          const script = yield* Effect.promise(() => fetch(`${origin}/app.js`))
          expect(yield* Effect.promise(() => script.text())).toBe("console.log('embedded')")
+          expect(script.headers.get("content-type")).toContain("javascript")
          expect(script.headers.get("cache-control")).toBe("public, max-age=31536000, immutable")

          const worker = yield* Effect.promise(() => fetch(`${origin}/sw.js`))
@@ -64,6 +65,7 @@ describe("web UI", () => {
          expect(registration.headers.get("cache-control")).toBe("no-cache")

          const font = yield* Effect.promise(() => fetch(`${origin}/font.woff2`))
+          expect(font.headers.get("content-type")).toBe("font/woff2")
          expect(new Uint8Array(yield* Effect.promise(() => font.arrayBuffer()))).toEqual(
            new Uint8Array([0, 1, 2, 255]),
          )
@@ -1291,6 +1291,15 @@ export interface CredentialApi<E = never> {
 export type ProjectListOutput = ReadonlyArray<Project.Info>
 export type ProjectListOperation<E = never> = () => Effect.Effect<ProjectListOutput, E>

+export type ProjectUpdateInput = {
+  readonly projectID: Project.ID
+  readonly name?: string | undefined
+  readonly icon?: Project.Icon | undefined
+  readonly commands?: Project.Commands | undefined
+}
+export type ProjectUpdateOutput = Project.Info
+export type ProjectUpdateOperation<E = never> = (input: ProjectUpdateInput) => Effect.Effect<ProjectUpdateOutput, E>
+
 export type ProjectCurrentInput = {
  readonly location?: { readonly directory?: string | undefined; readonly workspace?: string | undefined } | undefined
 }
@@ -1299,6 +1308,7 @@ export type ProjectCurrentOperation<E = never> = (input?: ProjectCurrentInput) =

 export interface ProjectApi<E = never> {
  readonly list: ProjectListOperation<E>
+  readonly update: ProjectUpdateOperation<E>
  readonly current: ProjectCurrentOperation<E>
 }

@@ -139,6 +139,8 @@ import type {
  CredentialRemoveInput,
  CredentialRemoveOutput,
  ProjectListOutput,
+  ProjectUpdateInput,
+  ProjectUpdateOutput,
  ProjectCurrentInput,
  ProjectCurrentOutput,
  FormRequestListInput,
@@ -919,6 +921,14 @@ const adaptGroupCredential = (raw: RawClient["server.credential"]) => ({
 const EndpointProjectList = (raw: RawClient["server.project"]) => () =>
  preserveEffect<ProjectListOutput>()(raw["project.list"]({}).pipe(Effect.mapError(mapClientError)))

+const EndpointProjectUpdate = (raw: RawClient["server.project"]) => (input: ProjectUpdateInput) =>
+  preserveEffect<ProjectUpdateOutput>()(
+    raw["project.update"]({
+      params: { projectID: input["projectID"] },
+      payload: { name: input["name"], icon: input["icon"], commands: input["commands"] },
+    }).pipe(Effect.mapError(mapClientError)),
+  )
+
 const EndpointProjectCurrent = (raw: RawClient["server.project"]) => (input?: ProjectCurrentInput) =>
  preserveEffect<ProjectCurrentOutput>()(
    raw["project.current"]({ query: { location: input?.["location"] } }).pipe(Effect.mapError(mapClientError)),
@@ -926,6 +936,7 @@ const EndpointProjectCurrent = (raw: RawClient["server.project"]) => (input?: Pr

 const adaptGroupProject = (raw: RawClient["server.project"]) => ({
  list: EndpointProjectList(raw),
+  update: EndpointProjectUpdate(raw),
  current: EndpointProjectCurrent(raw),
 })

@@ -133,6 +133,8 @@ import type {
  CredentialRemoveInput,
  CredentialRemoveOutput,
  ProjectListOutput,
+  ProjectUpdateInput,
+  ProjectUpdateOutput,
  ProjectCurrentInput,
  ProjectCurrentOutput,
  FormRequestListInput,
@@ -1251,6 +1253,18 @@ export function make(options: ClientOptions) {
          { method: "GET", path: `/api/project`, successStatus: 200, declaredStatuses: [401, 400], empty: false },
          requestOptions,
        ),
+      update: (input: ProjectUpdateInput, requestOptions?: RequestOptions) =>
+        request<ProjectUpdateOutput>(
+          {
+            method: "PATCH",
+            path: `/api/project/${encodeURIComponent(input.projectID)}`,
+            body: { name: input["name"], icon: input["icon"], commands: input["commands"] },
+            successStatus: 200,
+            declaredStatuses: [404, 401, 400],
+            empty: false,
+          },
+          requestOptions,
+        ),
      current: (input?: ProjectCurrentInput, requestOptions?: RequestOptions) =>
        request<ProjectCurrentOutput>(
          {
@@ -2269,6 +2269,14 @@ export type McpServerNotFoundError = {
 export const isMcpServerNotFoundError = (value: unknown): value is McpServerNotFoundError =>
  typeof value === "object" && value !== null && "_tag" in value && value["_tag"] === "McpServerNotFoundError"

+export type ProjectNotFoundError = {
+  readonly _tag: "ProjectNotFoundError"
+  readonly projectID: string
+  readonly message: string
+}
+export const isProjectNotFoundError = (value: unknown): value is ProjectNotFoundError =>
+  typeof value === "object" && value !== null && "_tag" in value && value["_tag"] === "ProjectNotFoundError"
+
 export type FormNotFoundError = { readonly _tag: "FormNotFoundError"; readonly id: string; readonly message: string }
 export const isFormNotFoundError = (value: unknown): value is FormNotFoundError =>
  typeof value === "object" && value !== null && "_tag" in value && value["_tag"] === "FormNotFoundError"
@@ -4379,6 +4387,27 @@ export type CredentialRemoveOutput = void

 export type ProjectListOutput = Array<Project>

+export type ProjectUpdateInput = {
+  readonly projectID: { readonly projectID: string }["projectID"]
+  readonly name?: {
+    readonly name?: string
+    readonly icon?: { readonly url?: string; readonly override?: string; readonly color?: string }
+    readonly commands?: { readonly start?: string }
+  }["name"]
+  readonly icon?: {
+    readonly name?: string
+    readonly icon?: { readonly url?: string; readonly override?: string; readonly color?: string }
+    readonly commands?: { readonly start?: string }
+  }["icon"]
+  readonly commands?: {
+    readonly name?: string
+    readonly icon?: { readonly url?: string; readonly override?: string; readonly color?: string }
+    readonly commands?: { readonly start?: string }
+  }["commands"]
+}
+
+export type ProjectUpdateOutput = Project
+
 export type ProjectCurrentInput = {
  readonly location?: {
    readonly location?: { readonly directory?: string | undefined; readonly workspace?: string | undefined } | undefined
@@ -60,6 +60,7 @@ export type CreateDataInput = {
 }

 const messageIDFromEvent = (eventID: string) => eventID.replace(/^evt_/, "msg_")
+const messagePageLimit = 20

 // Global MCP elicitations temporarily use "global" instead of a real session ID, so the
 // server cannot recover their Location when settling them. Preserve the event Location
@@ -1318,7 +1319,7 @@ export function createData(config: CreateDataInput) {
        },
        sync(sessionID: string) {
          return sync.run(`session.message:${sessionID}`, async () => {
-            const response = await api().message.list({ sessionID, limit: 200, order: "desc" })
+            const response = await api().message.list({ sessionID, limit: messagePageLimit, order: "desc" })
            const fetched = response.data.toReversed()
            // Same protection as the pending sync: a re-fetch racing an
            // admission must not wipe its local transcript row.
@@ -1348,7 +1349,7 @@ export function createData(config: CreateDataInput) {
          if (!cursor || store.session.messageLoading[sessionID]) return
          setStore("session", "messageLoading", sessionID, true)
          const response = await api()
-            .message.list({ sessionID, limit: 200, cursor })
+            .message.list({ sessionID, limit: messagePageLimit, cursor })
            .finally(() => setStore("session", "messageLoading", sessionID, false))
          const older = response.data.toReversed()
          const existing = store.session.message[sessionID] ?? []
@@ -50,7 +50,7 @@ test("exposes every standard HTTP API group", () => {
  expect(Object.keys(client.pty)).toEqual(["list", "create", "get", "update", "remove", "connect"])
  expect(Object.keys(client.pty.connect)).toEqual(["token"])
  expect(Object.keys(client.shell)).toEqual(["list", "create", "get", "timeout", "output", "remove"])
-  expect(Object.keys(client.project)).toEqual(["list", "current"])
+  expect(Object.keys(client.project)).toEqual(["list", "update", "current"])
  expect(Object.keys(client.worktree)).toEqual(["list", "create", "remove", "refresh"])
 })

@@ -81,6 +81,29 @@ test("config.get returns ordered config entries for a location", async () => {
  expect(request?.url).toBe("http://localhost:3000/api/config?location%5Bdirectory%5D=%2Ftmp%2Fproject")
 })

+test("project.update uses the global project contract", async () => {
+  let request: Request | undefined
+  const project = {
+    id: "proj_test",
+    canonical: "/tmp/project",
+    commands: { start: "bun install" },
+    time: { created: 1, updated: 2 },
+    sandboxes: [],
+  }
+  const client = OpenCode.make({
+    baseUrl: "http://localhost:3000",
+    fetch: async (input, init) => {
+      request = input instanceof Request ? input : new Request(input, init)
+      return Response.json(project)
+    },
+  })
+
+  expect(await client.project.update({ projectID: "proj_test", commands: { start: "bun install" } })).toEqual(project)
+  expect(request?.method).toBe("PATCH")
+  expect(request?.url).toBe("http://localhost:3000/api/project/proj_test")
+  expect(await request?.json()).toEqual({ commands: { start: "bun install" } })
+})
+
 test("websearch.query uses the public HTTP contract", async () => {
  let request: Request | undefined
  const client = OpenCode.make({
@@ -103,6 +103,38 @@ test("reports optimistic sessions as creating until the request settles", async
  }
 })

+test("loads bounded message pages", async () => {
+  const requests: URL[] = []
+  const api = OpenCode.make({
+    baseUrl: "http://opencode.local",
+    fetch: async (input, init) => {
+      const request = input instanceof Request ? input : new Request(input, init)
+      const url = new URL(request.url)
+      requests.push(url)
+      return Response.json({ data: [], cursor: requests.length === 1 ? { next: "next" } : {} })
+    },
+  })
+  const setup = createRoot((dispose) => ({
+    data: createData({
+      api: () => api,
+      directory: "/project",
+      event: { on: () => () => {}, listen: () => () => {} },
+    }),
+    dispose,
+  }))
+
+  try {
+    await setup.data.session.message.sync("ses_refresh")
+    await setup.data.session.message.loadMore("ses_refresh")
+
+    expect(requests).toHaveLength(2)
+    expect(Object.fromEntries(requests[0].searchParams)).toEqual({ limit: "20", order: "desc" })
+    expect(Object.fromEntries(requests[1].searchParams)).toEqual({ cursor: "next", limit: "20" })
+  } finally {
+    setup.dispose()
+  }
+})
+
 async function wait(check: () => boolean) {
  const started = Date.now()
  while (!check()) {
@@ -29,6 +29,13 @@ export type Current = ProjectSchema.Current
 export const Info = ProjectSchema.Info
 export interface Info extends Schema.Schema.Type<typeof Info> {}

+export const UpdateInput = ProjectSchema.UpdateInput
+export type UpdateInput = ProjectSchema.UpdateInput
+
+export class NotFoundError extends Schema.TaggedError<NotFoundError>()("Project.NotFoundError", {
+  projectID: ID,
+}) {}
+
 export interface Resolved {
  readonly previous?: ID
  readonly id: ID
@@ -47,6 +54,7 @@ export const root = Effect.fn("Project.root")(function* (fs: FSUtil.Interface, i

 export interface Interface {
  readonly list: () => Effect.Effect<ReadonlyArray<Info>>
+  readonly update: (input: UpdateInput) => Effect.Effect<Info, NotFoundError>
  readonly resolve: (input: AbsolutePath) => Effect.Effect<Resolved>
 }

@@ -145,6 +153,31 @@ const layer = Layer.effect(
      return rows.map(fromRow)
    })

+    const update = Effect.fn("Project.update")(function* (input: UpdateInput) {
+      const row = yield* db
+        .update(ProjectTable)
+        .set({
+          name: input.name === undefined ? undefined : input.name || null,
+          icon_url_override: input.icon?.override === undefined ? undefined : input.icon.override || null,
+          icon_color: input.icon?.color === undefined ? undefined : input.icon.color || null,
+          commands:
+            input.commands?.start === undefined
+              ? undefined
+              : input.commands.start
+                ? { start: input.commands.start }
+                : null,
+          time_updated: Date.now(),
+        })
+        .where(eq(ProjectTable.id, input.projectID))
+        .returning()
+        .get()
+        .pipe(Effect.orDie)
+      if (!row) return yield* new NotFoundError({ projectID: input.projectID })
+      const project = fromRow(row)
+      yield* bus.publish(ProjectSchema.Event.Updated, project)
+      return project
+    })
+
    const cached = Effect.fnUntraced(function* (dir: string) {
      return yield* fs.readFileString(path.join(dir, "opencode")).pipe(
        Effect.map((value) => value.trim()),
@@ -258,7 +291,7 @@ const layer = Layer.effect(
      return yield* persist({ id: ID.global, directory, canonical: directory, vcs: undefined })
    })

-    return Service.of({ list, resolve })
+    return Service.of({ list, update, resolve })
  }),
 )

@@ -13,6 +13,11 @@ export type Current = typeof Current.Type
 export const Info = Project.Info
 export interface Info extends Schema.Schema.Type<typeof Info> {}

+export const UpdateInput = Project.UpdateInput
+export type UpdateInput = typeof UpdateInput.Type
+
+export const Event = Project.Event
+
 export const Vcs = Schema.Union([
  Schema.Struct({
    type: Schema.Literal("git"),
@@ -18,6 +18,8 @@ import { canonical, DirectoryUnavailableError } from "./worktree/directory.js"
 import { WorktreeGit } from "./worktree/git.js"
 import type { EffectDrizzleSqlite } from "./database/drizzle.js"
 import { ProjectTable } from "./project/sql.js"
+import { AppProcess } from "@opencode-ai/util/process"
+import { ChildProcess } from "effect/unstable/process"

 export { DirectoryUnavailableError } from "./worktree/directory.js"

@@ -87,6 +89,7 @@ export type Error =
  | DirectoryUnavailableError
  | InvalidDirectoryError
  | StrategyUnavailableError
+  | AppProcess.AppProcessError
  | Git.WorktreeError

 export interface Strategy {
@@ -147,6 +150,7 @@ const layer = Layer.effect(
    const fs = yield* FSUtil.Service
    const db = (yield* Database.Service).db
    const bus = yield* Bus.Service
+    const processService = yield* AppProcess.Service

    const changed = Effect.fnUntraced(function* (projectID: ProjectSchema.ID, update: boolean) {
      if (update) yield* bus.publish(Event.Updated, { projectID })
@@ -260,6 +264,30 @@ const layer = Layer.effect(
          strategy: input.strategy,
        }),
      )
+      const project = yield* db
+        .select({ worktree: ProjectTable.worktree, commands: ProjectTable.commands })
+        .from(ProjectTable)
+        .where(eq(ProjectTable.id, input.projectID))
+        .get()
+        .pipe(Effect.orDie)
+      const command = project?.commands?.start?.trim()
+      if (command && project) {
+        const shell = process.platform === "win32" ? "cmd" : "bash"
+        const args = process.platform === "win32" ? ["/c", command] : ["-lc", command]
+        yield* processService
+          .run(
+            ChildProcess.make(shell, args, {
+              cwd: result.directory,
+              env: {
+                OPENCODE_WORKTREE_BASE: project.worktree,
+                OPENCODE_WORKTREE_PATH: result.directory,
+              },
+              extendEnv: true,
+              stdin: "ignore",
+            }),
+          )
+          .pipe(Effect.flatMap(AppProcess.requireSuccess))
+      }
      return result
    })

@@ -342,7 +370,7 @@ const layer = Layer.effect(
 export const node = makeGlobalNode({
  service: Service,
  layer: layer,
-  deps: [FSUtil.node, Git.node, Bus.node, Database.node],
+  deps: [FSUtil.node, Git.node, Bus.node, Database.node, AppProcess.node],
 })

 export const refreshNode = makeLocationNode({
@@ -78,6 +78,7 @@ describe("node build", () => {
        acquisitions++
        return Project.Service.of({
          list: () => Effect.succeed([]),
+          update: () => Effect.die("not implemented"),
          resolve: (directory) => Effect.succeed({ id: Project.ID.global, directory, canonical: directory }),
        })
      }),
@@ -5,6 +5,7 @@ export const globalProjectLayer = Layer.succeed(
  Project.Service,
  Project.Service.of({
    list: () => Effect.succeed([]),
+    update: () => Effect.die("not implemented"),
    resolve: (directory) => Effect.succeed({ id: Project.ID.global, directory, canonical: directory }),
  }),
 )
@@ -13,6 +13,7 @@ const projectLayer = Layer.succeed(
  Project.Service,
  Project.Service.of({
    list: () => Effect.succeed([]),
+    update: () => Effect.die("not implemented"),
    resolve: () =>
      Effect.succeed({
        id: Project.ID.make("project"),
@@ -2,7 +2,7 @@ import { describe, expect } from "bun:test"
 import { $ } from "bun"
 import fs from "fs/promises"
 import path from "path"
-import { Effect, Layer, Schema } from "effect"
+import { Effect, Layer } from "effect"
 import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { Database } from "@opencode-ai/core/database/database"
 import { Project } from "@opencode-ai/core/project"
@@ -66,6 +66,55 @@ describe("Project.list", () => {
  )
 })

+describe("Project.update", () => {
+  it.effect("updates and clears project metadata", () =>
+    Effect.gen(function* () {
+      const db = (yield* Database.Service).db
+      const project = yield* Project.Service
+      const id = Project.ID.make("update")
+      yield* db
+        .insert(ProjectTable)
+        .values({
+          id,
+          worktree: abs("/update"),
+          sandboxes: [],
+          time_created: 1,
+          time_updated: 1,
+        })
+        .run()
+
+      expect(
+        yield* project.update({
+          projectID: id,
+          name: "Updated",
+          icon: { color: "blue", override: "data:image/png;base64,test" },
+          commands: { start: "bun install" },
+        }),
+      ).toMatchObject({
+        id,
+        name: "Updated",
+        icon: { color: "blue", override: "data:image/png;base64,test" },
+        commands: { start: "bun install" },
+      })
+
+      expect(
+        yield* project.update({
+          projectID: id,
+          name: "",
+          icon: { color: "", override: "" },
+          commands: { start: "" },
+        }),
+      ).toMatchObject({ id })
+      expect((yield* project.list())[0]).toEqual({
+        id,
+        canonical: abs("/update"),
+        time: { created: 1, updated: expect.any(Number) },
+        sandboxes: [],
+      })
+    }),
+  )
+})
+
 function remoteID(remote: string) {
  return Project.ID.make(Hash.fast(`git-remote:${remote}`))
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brendonovich	4d4d47d670	feat(core): add project update API	2026-08-23 16:26:51 +00:00
Brendonovich	b6974306c9	feat(core): run worktree setup scripts	2026-08-23 16:19:44 +00:00
Brendan Allan	89451c3e32	fix(app): navigate parent with escape (#44441 )	2026-08-23 23:45:29 +08:00
Brendan Allan	ad7d515d50	fix(session-ui): avoid replaying thinking summary animation (#44440 )	2026-08-23 23:43:17 +08:00
Brendan Allan	8e71c8425f	fix(app): hide empty terminal cursor (#44435 )	2026-08-23 15:34:40 +00:00
Brendan Allan	da4ab56801	fix(session-ui): hide empty file diffs (#44425 )	2026-08-23 23:15:47 +08:00
Brendan Allan	dd780ca882	fix(app): hand off optimistic attachments (#44411 )	2026-08-23 22:59:51 +08:00
Brendan Allan	fb9c9a2cbd	fix(desktop): restore session completion alerts (#44412 )	2026-08-23 22:35:06 +08:00
Brendan Allan	4c786f0ff8	fix(app): preserve subagent tab lineage (#44404 )	2026-08-23 22:18:39 +08:00
Brendan Allan	1def4aa35a	fix(app): avoid replaying streamed markdown fade (#44396 )	2026-08-23 21:10:43 +08:00
opencode-agent[bot]andBrendonovich	de11122c96	feat(app): search sessions by ID (#44387 ) Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>	2026-08-23 20:17:57 +08:00
opencode-agent[bot]	62e3b6ad78	chore: update nix node_modules hashes	2026-08-23 11:49:19 +00:00
Brendan Allan	2c99b549db	fix(app): redesign model selection dialog (#44383 )	2026-08-23 19:34:14 +08:00
Luke Parker	d7c3a95368	feat(app): refine expanded shell output (#44368 )	2026-08-23 11:31:40 +00:00
opencode-agent[bot]	3b5b5aee0c	chore: update nix node_modules hashes	2026-08-23 11:16:11 +00:00
Brendan Allan	8cbfac3184	fix(desktop): smooth startup hydration (#44377 )	2026-08-23 19:07:10 +08:00
opencode-agent[bot]andBrendonovich	e765349865	feat(session-ui): render streaming markdown with Solid (#44354 ) Co-authored-by: Brendonovich <Brendonovich@users.noreply.github.com>	2026-08-23 19:00:46 +08:00
opencode-agent[bot]andBrendonovich	750f3384ff	fix(app): defer service worker takeover (#44374 ) Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>	2026-08-23 18:52:45 +08:00
Simon Klee	1cf61593b5	ci: fix node build (#44349 )	2026-08-23 11:26:26 +02:00
opencode-agent[bot]	708e4d8867	fix(app): refine mobile error page (#44353 )	2026-08-23 09:23:10 +00:00
Luke Parker	0a5349c51c	fix(session-ui): restore compaction summaries (#44311 )	2026-08-23 18:57:06 +10:00
opencode-agent[bot]	3fd93b659b	chore: update nix node_modules hashes	2026-08-23 08:28:38 +00:00
Simon Klee	17a445de3e	tui: update OpenTUI to 0.5.7 (#44345 )	2026-08-23 10:15:17 +02:00
Brendan Allan	68e3888bc3	fix(app): preserve session header while loading (#44346 )	2026-08-23 16:09:13 +08:00
Brendan Allan	27a53969d6	fix(app): stabilize initial timeline rendering (#44333 )	2026-08-23 16:06:50 +08:00
Brendan Allan	1e3d3fcaca	fix(app): complete leading paginated turns (#44322 )	2026-08-23 15:27:33 +08:00
opencode-agent[bot]	7420903859	chore: update nix node_modules hashes	2026-08-23 07:25:41 +00:00
Simon Klee	853d3534e5	cli: share app archive across Node builds (#44331 )	2026-08-23 09:11:54 +02:00
Brendan Allan	6cd3da1d4c	fix(app): preserve scroll across history prepends (#44317 )	2026-08-23 15:00:29 +08:00
Brendan Allan	9692bcbc21	fix(session-ui): align status tool typography (#44330 )	2026-08-23 14:55:53 +08:00
Brendan Allan	79d5359d11	fix(app): align background hint spacing (#44329 )	2026-08-23 14:50:32 +08:00
Brendan Allan	b9ca77c5ff	fix(app): suspend composer until restored (#44320 )	2026-08-23 14:46:28 +08:00
Brendan Allan	7a72e51710	fix(app): reuse global model state (#44319 )	2026-08-23 14:26:53 +08:00
Brendan Allan	0fda7d1b33	fix(session-ui): reduce tool error spacing (#44318 )	2026-08-23 14:25:48 +08:00
Brendan Allan	6ba707d305	fix(app): synchronize composer model controls (#44316 )	2026-08-23 14:25:27 +08:00
Brendan Allan	d144c81d17	fix(app): preserve session shell while loading (#44315 )	2026-08-23 14:18:38 +08:00
Brendan Allan	b8fb894ec7	fix(server): compress responses with correct content types (#44321 )	2026-08-23 06:18:20 +00:00
Brendan Allan	b7167aaab0	feat(app): add project icon setting (#44323 )	2026-08-23 06:18:15 +00:00
Luke Parker	ad59ccc2e2	fix(ui): standardize safe text metrics (#44106 )	2026-08-23 13:47:17 +10:00
Luke Parker	a82318019f	fix(app): skip service worker in development (#44302 )	2026-08-23 13:35:05 +10:00
Luke Parker	e9d58abd99	test(app): stabilize file expansion anchor (#44293 )	2026-08-23 13:05:31 +10:00
Brendan Allan	1ce7e90d3e	fix(app): register service worker after load (#44294 )	2026-08-23 10:50:56 +08:00