refactor(opencode): fail the execute tool on program failure

# Conflicts:
#	packages/opencode/src/mcp/index.ts

.github/actions/setup-bun/action.yml

@@ -8,6 +8,13 @@ inputs:
 runs:
   using: "composite"
   steps:
+    # node-gyp@latest (invoked via bunx for native install scripts) requires Node >=22;
+    # some runner images ship an older system Node on PATH
+    - name: Setup Node
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+      with:
+        node-version: "24"
+
     - name: Get baseline download URL
       id: bun-url
       shell: bash

bun.lock

@@ -139,6 +139,20 @@
         "effect",
       ],
     },
+    "packages/codemode": {
+      "name": "@opencode-ai/codemode",
+      "version": "0.0.1",
+      "dependencies": {
+        "acorn": "8.15.0",
+        "effect": "catalog:",
+        "typescript": "catalog:",
+      },
+      "devDependencies": {
+        "@tsconfig/bun": "catalog:",
+        "@types/bun": "catalog:",
+        "@typescript/native-preview": "catalog:",
+      },
+    },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
       "version": "1.17.13",
@@ -579,6 +593,7 @@
         "@octokit/graphql": "9.0.2",
         "@octokit/rest": "catalog:",
         "@openauthjs/openauth": "catalog:",
+        "@opencode-ai/codemode": "workspace:*",
         "@opencode-ai/llm": "workspace:*",
         "@opencode-ai/plugin": "workspace:*",
         "@opencode-ai/protocol": "workspace:*",
@@ -1924,6 +1939,8 @@
 
     "@opencode-ai/client": ["@opencode-ai/client@workspace:packages/client"],
 
+    "@opencode-ai/codemode": ["@opencode-ai/codemode@workspace:packages/codemode"],
+
     "@opencode-ai/console-app": ["@opencode-ai/console-app@workspace:packages/console/app"],
 
     "@opencode-ai/console-core": ["@opencode-ai/console-core@workspace:packages/console/core"],
@@ -3010,7 +3027,7 @@
 
     "accepts": ["accepts@1.3.8", "", { "dependencies": { "mime-types": "~2.1.34", "negotiator": "0.6.3" } }, "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="],
 
-    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
     "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
 
@@ -5692,6 +5709,8 @@
 
     "@astrojs/mdx/@astrojs/markdown-remark": ["@astrojs/markdown-remark@6.3.11", "", { "dependencies": { "@astrojs/internal-helpers": "0.7.6", "@astrojs/prism": "3.3.0", "github-slugger": "^2.0.0", "hast-util-from-html": "^2.0.3", "hast-util-to-text": "^4.0.2", "import-meta-resolve": "^4.2.0", "js-yaml": "^4.1.1", "mdast-util-definitions": "^6.0.0", "rehype-raw": "^7.0.0", "rehype-stringify": "^10.0.1", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", "remark-smartypants": "^3.0.2", "shiki": "^3.21.0", "smol-toml": "^1.6.0", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.2", "vfile": "^6.0.3" } }, "sha512-hcaxX/5aC6lQgHeGh1i+aauvSwIT6cfyFjKWvExYSxUhZZBBdvCliOtu06gbQyhbe0pGJNoNmqNlQZ5zYUuIyQ=="],
 
+    "@astrojs/mdx/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "@astrojs/mdx/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
 
     "@astrojs/sitemap/zod": ["zod@4.4.3", "", {}, "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ=="],
@@ -5902,6 +5921,8 @@
 
     "@malept/flatpak-bundler/fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
 
+    "@mdx-js/mdx/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "@mdx-js/mdx/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
 
     "@modelcontextprotocol/sdk/express": ["express@5.2.1", "", { "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", "content-disposition": "^1.0.0", "content-type": "^1.0.5", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", "depd": "^2.0.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "finalhandler": "^2.1.0", "fresh": "^2.0.0", "http-errors": "^2.0.0", "merge-descriptors": "^2.0.0", "mime-types": "^3.0.0", "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", "proxy-addr": "^2.0.7", "qs": "^6.14.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", "type-is": "^2.0.1", "vary": "^1.1.2" } }, "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw=="],
@@ -6152,6 +6173,8 @@
 
     "astro/@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.6.1", "", {}, "sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A=="],
 
+    "astro/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "astro/common-ancestor-path": ["common-ancestor-path@1.0.1", "", {}, "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w=="],
 
     "astro/diff": ["diff@5.2.2", "", {}, "sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A=="],
@@ -6242,6 +6265,8 @@
 
     "engine.io-client/ws": ["ws@8.20.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w=="],
 
+    "esast-util-from-js/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "esbuild-plugin-copy/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "esbuild-plugin-copy/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
@@ -6306,6 +6331,8 @@
 
     "md-to-react-email/marked": ["marked@7.0.4", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ=="],
 
+    "micromark-extension-mdxjs/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "miniflare/acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
@@ -6434,6 +6461,8 @@
 
     "tar/yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
 
+    "terser/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
     "thread-stream/real-require": ["real-require@1.0.0", "", {}, "sha512-P4nbQYQfePJxRSmY+v/KINxVucm4NF3p3s7pJveMTtom52FR4YGltUQLB8idDXwDDWW+eYrWDFbuzUnjoWHF7g=="],
@@ -6452,6 +6481,8 @@
 
     "unifont/ofetch": ["ofetch@1.5.1", "", { "dependencies": { "destr": "^2.0.5", "node-fetch-native": "^1.6.7", "ufo": "^1.6.1" } }, "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA=="],
 
+    "unplugin/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "unplugin/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
     "unused-filename/path-exists": ["path-exists@5.0.0", "", {}, "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ=="],
@@ -6466,6 +6497,8 @@
 
     "verror/core-util-is": ["core-util-is@1.0.2", "", {}, "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="],
 
+    "vite-plugin-dynamic-import/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "vite-plugin-icons-spritesheet/glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],
 
     "vitest/@vitest/expect": ["@vitest/expect@4.1.7", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.1.7", "@vitest/utils": "4.1.7", "chai": "^6.2.2", "tinyrainbow": "^3.1.0" } }, "sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w=="],
@@ -6884,6 +6917,8 @@
 
     "@standard-community/standard-openapi/effect/@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
+    "@storybook/csf-plugin/unplugin/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "@storybook/csf-plugin/unplugin/webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg=="],

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-ZmAIcG3wPgssKejLe/EMJOjPuMHCyRiiItRvSqIjaME=",
-    "aarch64-linux": "sha256-lbAHoVI/CvgdrfKZ/9dKZ/O7DxJvuWEOrDgcCuFGPBk=",
-    "aarch64-darwin": "sha256-Nrs4ijvzQ3J8AYigJSlsr66feUvLZ5iiYCfBdaZNJEc=",
-    "x86_64-darwin": "sha256-ltCaJSO7kZWuMOU49269xvboNVX35OJDFj0gXCDf62Y="
+    "x86_64-linux": "sha256-/Tyscbq9D9pDm18icK0CBsuZPduQmMKuauPnYbae+X8=",
+    "aarch64-linux": "sha256-foak7M2pny+8U5rkYpIl8tjYk5vgYkVtcZsnJN3bkV4=",
+    "aarch64-darwin": "sha256-JxiN/6nF+jvLIfX/B8HEZZmp0WujTEjY8pvMva1pQy4=",
+    "x86_64-darwin": "sha256-6Lt7RgGSqt0z3Lc9XbfHX/pPPlLjMnrGJUD8eqyexnk="
   }
 }

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

@@ -2,7 +2,13 @@ import type { Page } from "@playwright/test"
 import { expectSessionTitle } from "../../utils/waits"
 import { benchmark, expect, withBenchmarkPage } from "../benchmark"
 import { fixture } from "./session-timeline-stress.fixture"
-import { installStressSessionTabs, mockStressTimeline, stressSessionHref } from "./timeline-test-helpers"
+import {
+  createReviewDiffs,
+  installStressSessionTabs,
+  installTimelineSettings,
+  mockStressTimeline,
+  stressSessionHref,
+} from "./timeline-test-helpers"
 import { measureSessionSwitch, waitForStableTimeline } from "./session-tab-switch-probe"
 
 type Result = Awaited<ReturnType<typeof measureSessionSwitch>>
@@ -20,8 +26,41 @@ benchmark("benchmarks cold and hot session tab switching", async ({ browser, rep
   report({ results, summary: summarize(results) })
 })
 
-async function trial(page: Page, mode: "cold" | "hot") {
-  await mockStressTimeline(page)
+benchmark(
+  "benchmarks v2 session tab switching with and without the review pane",
+  async ({ browser, report }, testInfo) => {
+    benchmark.setTimeout(360_000)
+    const runs = Number(process.env.SESSION_TAB_SWITCH_RUNS ?? 5)
+    const results = {
+      closed: { cold: [] as Result[], hot: [] as Result[] },
+      open: { cold: [] as Result[], hot: [] as Result[] },
+    }
+    for (const reviewPane of ["closed", "open"] as const) {
+      for (const mode of ["cold", "hot"] as const) {
+        for (let run = 0; run < runs; run++) {
+          results[reviewPane][mode].push(
+            await withBenchmarkPage(
+              browser,
+              `session-tab-switch-v2-${reviewPane}-${mode}-${run}`,
+              (page) => trial(page, mode, { newLayoutDesigns: true, reviewPane }),
+              testInfo,
+            ),
+          )
+        }
+      }
+    }
+    report({ results, summary: summarizeReviewPane(results) }, { runs, reviewDiffs: createReviewDiffs().length })
+  },
+)
+
+async function trial(
+  page: Page,
+  mode: "cold" | "hot",
+  options?: { newLayoutDesigns?: boolean; reviewPane?: "closed" | "open" },
+) {
+  const reviewDiffs = options?.newLayoutDesigns ? createReviewDiffs() : undefined
+  await mockStressTimeline(page, { vcsDiff: reviewDiffs })
+  if (options?.newLayoutDesigns) await installTimelineSettings(page)
   await installStressSessionTabs(page)
   if (mode === "hot") {
     await page.goto(stressSessionHref(fixture.targetID))
@@ -33,6 +72,10 @@ async function trial(page: Page, mode: "cold" | "hot") {
     await expectSessionTitle(page, fixture.expected.sourceTitle)
   }
   await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  if (options?.reviewPane === "open") {
+    await openReviewPane(page)
+    await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  }
 
   const destinationIDs = fixture.messages[fixture.targetID].map((message) => message.info.id)
   const sourceIDs = fixture.messages[fixture.sourceID].map((message) => message.info.id)
@@ -70,6 +113,15 @@ function summarize(results: Record<"cold" | "hot", Result[]>) {
   )
 }
 
+function summarizeReviewPane(results: Record<"closed" | "open", Record<"cold" | "hot", Result[]>>) {
+  return Object.fromEntries(
+    Object.entries(results).map(([reviewPane, values]) => [
+      reviewPane,
+      summarize(values as Record<"cold" | "hot", Result[]>),
+    ]),
+  )
+}
+
 async function switchSession(page: Page, sessionID: string, title: string) {
   const href = stressSessionHref(sessionID)
   const tab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first()
@@ -77,3 +129,16 @@ async function switchSession(page: Page, sessionID: string, title: string) {
   await tab.click()
   await expectSessionTitle(page, title)
 }
+
+async function openReviewPane(page: Page) {
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  const panel = page.locator("#review-panel")
+  await expect(panel).toBeVisible()
+  // Text-based readiness works across review implementations; the legacy list mounts
+  // diff viewers lazily while V2 mounts the active preview eagerly.
+  await page.waitForFunction(() => {
+    const panel = document.querySelector<HTMLElement>("#review-panel")
+    const text = panel?.textContent ?? ""
+    return text.includes("generated-000.ts") && text.includes("+3")
+  })
+}

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

@@ -5,6 +5,12 @@ export type SessionSwitchSample = {
   hasVisibleRows: boolean
   last: boolean
   bottomErrorPx?: number
+  review?: {
+    fileHost: boolean
+    fileHostReplaced: boolean
+    header: string
+    replacedLevels: string[]
+  }
 }
 
 export function classifySessionSwitch(samples: SessionSwitchSample[]) {
@@ -23,6 +29,10 @@ export function classifySessionSwitch(samples: SessionSwitchSample[]) {
       (sample) => sample.hasVisibleRows && sample.destination.length === 0 && sample.source.length === 0,
     ).length,
     sourceSamples: samples.filter((sample) => sample.source.length > 0).length,
+    reviewFileHostMissingSamples: samples.filter((sample) => sample.review && !sample.review.fileHost).length,
+    reviewFileHostReplacedSamples: samples.filter((sample) => sample.review?.fileHostReplaced).length,
+    reviewHeaders: [...new Set(samples.flatMap((sample) => (sample.review ? [sample.review.header] : [])))],
+    reviewReplacedLevels: [...new Set(samples.flatMap((sample) => sample.review?.replacedLevels ?? []))],
   }
 }
 

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

@@ -16,11 +16,41 @@ async function installSessionSwitchProbe(
     const samples: SessionSwitchSample[] = []
     let started: number | undefined
     let running = true
+    const reviewLevels: Record<string, string> = {
+      panel: "#review-panel",
+      tabs: '#review-panel [data-component="tabs"]',
+      body: '#review-panel [data-slot="session-review-v2-body"]',
+      review: '#review-panel [data-component="session-review-v2"]',
+      preview: '#review-panel [data-slot="session-review-v2-preview"]',
+      scroll: '#review-panel [data-slot="session-review-v2-diff-scroll"]',
+      file: '#review-panel [data-component="file"][data-mode="diff"]',
+    }
+    const initialReviewNodes: Record<string, Element | null> = {}
     const sample = () => {
       if (!running || started === undefined) return
       setTimeout(() => {
         if (!running || started === undefined) return
         const observedAtMs = performance.now() - started
+        const reviewPanel = document.querySelector<HTMLElement>("#review-panel")
+        const reviewFile = reviewPanel?.querySelector('[data-component="file"][data-mode="diff"]')
+        const initialReviewFile = initialReviewNodes.file
+        const replacedLevels = Object.entries(reviewLevels).flatMap(([name, selector]) => {
+          const initial = initialReviewNodes[name]
+          if (!initial) return []
+          const current = document.querySelector(selector)
+          return current && current !== initial ? [name] : []
+        })
+        const review = reviewPanel
+          ? {
+              fileHost: !!reviewFile,
+              fileHostReplaced: !!initialReviewFile && !!reviewFile && reviewFile !== initialReviewFile,
+              header:
+                reviewPanel
+                  .querySelector<HTMLElement>('[data-slot="session-review-v2-file-header"]')
+                  ?.textContent?.trim() ?? "",
+              replacedLevels,
+            }
+          : undefined
         const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
           element.querySelector("[data-timeline-row]"),
         )
@@ -44,9 +74,10 @@ async function installSessionSwitchProbe(
             hasVisibleRows,
             last: visible.includes(lastID),
             bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined,
+            review,
           })
         } else {
-          samples.push({ observedAtMs, destination: [], source: [], hasVisibleRows: false, last: false })
+          samples.push({ observedAtMs, destination: [], source: [], hasVisibleRows: false, last: false, review })
         }
         requestAnimationFrame(sample)
       }, 0)
@@ -57,6 +88,9 @@ async function installSessionSwitchProbe(
         const link = event.target instanceof Element ? event.target.closest("a") : undefined
         if (link?.getAttribute("href") !== href) return
         started = performance.now()
+        for (const [name, selector] of Object.entries(reviewLevels)) {
+          initialReviewNodes[name] = document.querySelector(selector)
+        }
         requestAnimationFrame(sample)
       },
       { capture: true, once: true },

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

@@ -93,36 +93,53 @@ const assistantMessage = {
   parts: [editPart],
 }
 
-export async function setupTimelineBenchmark(page: Page, options: { historyTurns: number; eventBatch: number }) {
+export async function setupTimelineBenchmark(
+  page: Page,
+  options: {
+    historyTurns: number
+    eventBatch: number
+    newLayoutDesigns?: boolean
+    vcsDiff?: unknown[]
+    turnDiffs?: unknown[]
+  },
+) {
   const events: EventPayload[] = []
   let eventBatch = options.eventBatch
+  const currentUserMessage = options.turnDiffs
+    ? { ...userMessage, info: { ...userMessage.info, summary: { diffs: options.turnDiffs } } }
+    : userMessage
   await mockOpenCodeServer(page, {
     directory,
     project: project(),
     provider: provider(),
     sessions: [session()],
+    vcsDiff: options.vcsDiff,
     pageMessages: () => ({
       items: [
         ...Array.from({ length: options.historyTurns }, (_, index) => performanceTurn(index)).flat(),
-        userMessage,
+        currentUserMessage,
         assistantMessage,
       ],
     }),
     events: () => events.splice(0, eventBatch),
     eventRetry: 16,
   })
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "settings.v3",
-      JSON.stringify({
-        general: {
-          editToolPartsExpanded: true,
-          shellToolPartsExpanded: true,
-          showReasoningSummaries: true,
-        },
-      }),
-    )
-  })
+  await page.addInitScript(
+    (input) => {
+      localStorage.setItem(
+        "settings.v3",
+        JSON.stringify({
+          general: {
+            newLayoutDesigns: input.newLayoutDesigns,
+            editToolPartsExpanded: true,
+            shellToolPartsExpanded: true,
+            showReasoningSummaries: true,
+          },
+        }),
+      )
+    },
+    { newLayoutDesigns: options.newLayoutDesigns ?? false },
+  )
   await page.setViewportSize({ width: 1366, height: 768 })
   const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
   const text = page.locator(`[data-timeline-part-id="${textPartID}"]`).first()

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

@@ -1,3 +1,4 @@
+import type { Page } from "@playwright/test"
 import { benchmark, benchmarkDiagnostics, expect } from "../benchmark"
 import {
   buildInitialStreamEvent,
@@ -6,80 +7,300 @@ import {
   textPartID,
 } from "./session-timeline-benchmark.fixture"
 import { startTimelineProfile } from "./session-timeline-profile"
+import { createReviewDiffs } from "./timeline-test-helpers"
 import {
   collectTimelineStreamMetrics,
   installTimelineStreamProbe,
   startTimelineStreamProbe,
 } from "./session-timeline-stream-probe"
 
+type TimelineStreamOptions = {
+  newLayoutDesigns?: boolean
+  reviewDiffs?: boolean
+  reviewPane?: boolean
+}
+
+type ReviewPaneSample = {
+  observedAtMs: number
+  panelVisible: boolean
+  header: string
+  diffViewers: number
+  diffLines: number
+  codeBlocks: number
+  ready: boolean
+}
+
+type ReviewPaneProbe = {
+  samples: ReviewPaneSample[]
+  start: () => void
+  stop: () => void
+}
+
+const reviewReadyStreak = 3
+
 benchmark.describe("performance: session timeline streaming", () => {
   benchmark("streams assistant text without remounting or oscillating", async ({ page, report }) => {
-    benchmark.setTimeout(480_000)
-    const cpuThrottle = Number(process.env.TIMELINE_CPU_THROTTLE ?? 30)
-    const deltaCount = Number(process.env.TIMELINE_DELTA_COUNT ?? 160)
-    const historyTurns = Number(process.env.TIMELINE_HISTORY_TURNS ?? 320)
-    const eventBatch = Number(process.env.TIMELINE_EVENT_BATCH ?? 1)
-    const minimal = process.env.TIMELINE_MINIMAL === "1"
-    const profileCPU = process.env.TIMELINE_CPU_PROFILE === "1"
-    const profileVisual = !minimal && profileCPU && process.env.TIMELINE_VISUAL_PROFILE !== "0"
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, {})
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review pane closed", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true })
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review diffs and pane closed", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewDiffs: true })
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review pane open", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewPane: true })
+    report(result.metrics, result.context)
+  })
+})
+
+benchmark.describe("performance: review pane", () => {
+  benchmark("loads v2 review diffs and switches active files", async ({ page, report }) => {
+    benchmark.setTimeout(240_000)
+    const historyTurns = Number(process.env.REVIEW_PANE_HISTORY_TURNS ?? 72)
+    const diffs = createReviewDiffs()
     const fixture = await setupTimelineBenchmark(page, {
       historyTurns,
-      eventBatch,
+      eventBatch: 1,
+      newLayoutDesigns: true,
+      vcsDiff: diffs,
     })
 
-    fixture.transport.enqueue(buildInitialStreamEvent(deltaCount))
-    const contentStart = performance.now()
+    fixture.transport.enqueue(buildInitialStreamEvent(1))
     await expect(fixture.text).toBeVisible()
     await expect(fixture.text).toContainText("Implementation plan")
-    const initialContentObservedMs = performance.now() - contentStart
     await fixture.scrollToBottom()
     await fixture.waitForStableGeometry()
 
-    const profile = await startTimelineProfile(page, { cpuThrottle, profileCPU })
-    await installTimelineStreamProbe(page, { textPartID, finalIndex: deltaCount, profileVisual, minimal })
-    const deltas = buildStreamDeltaEvents(deltaCount)
-    await startTimelineStreamProbe(page)
-    fixture.transport.enqueue(deltas)
-
-    await page.waitForFunction(
-      (finalIndex) =>
-        (
-          window as Window & {
-            __timelineStreamBenchmark?: { applied: { index: number }[] }
-          }
-        ).__timelineStreamBenchmark?.applied.some((value) => value.index === finalIndex),
-      deltaCount,
-      { timeout: 420_000 },
-    )
-    await expect(fixture.text).toContainText("benchmark-complete")
-    await expect(fixture.text).toContainText("Streaming")
-    await fixture.waitForStableGeometry()
-    const metrics = await collectTimelineStreamMetrics(page, {
-      textPartID,
-      finalIndex: deltaCount,
-      navigations: benchmarkDiagnostics(page).navigations,
-    })
-    const delivered = deltas.length - fixture.transport.pendingCount()
-    await profile.stop()
+    const open = await measureReviewPaneLoad(page, diffs[0]!.file)
+    const switches = []
+    for (const diff of diffs.slice(1, 4)) switches.push(await measureReviewNextFile(page, diff.file))
 
     report(
       {
-        endToEndInitialContentObservedMs: initialContentObservedMs,
-        ...metrics,
-        deliveredDeltas: delivered,
-        pendingDeltas: fixture.transport.pendingCount(),
+        open,
+        switches,
       },
       {
-        cpuThrottle,
-        profileCPU,
-        profileVisual,
-        minimal,
-        queuedDeltas: deltas.length,
         historyTurns,
-        eventBatch,
+        reviewDiffs: diffs.length,
       },
     )
-
-    await profile.reset()
   })
 })
+
+async function runTimelineStreamBenchmark(page: Page, options: TimelineStreamOptions) {
+  const completionTimeoutMs = Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000)
+  const cpuThrottle = Number(process.env.TIMELINE_CPU_THROTTLE ?? 30)
+  const deltaCount = Number(process.env.TIMELINE_DELTA_COUNT ?? 160)
+  const historyTurns = Number(process.env.TIMELINE_HISTORY_TURNS ?? 320)
+  const eventBatch = Number(process.env.TIMELINE_EVENT_BATCH ?? 1)
+  const minimal = process.env.TIMELINE_MINIMAL === "1"
+  const profileCPU = process.env.TIMELINE_CPU_PROFILE === "1"
+  const profileVisual = !minimal && profileCPU && process.env.TIMELINE_VISUAL_PROFILE !== "0"
+  const diffs = options.reviewDiffs || options.reviewPane ? createReviewDiffs() : undefined
+  const fixture = await setupTimelineBenchmark(page, {
+    historyTurns,
+    eventBatch,
+    newLayoutDesigns: options.newLayoutDesigns,
+    // Turn diffs exercise timeline data cost; the pane-open scenario serves the same
+    // diffs through the default git mode so it works across review implementations.
+    turnDiffs: options.reviewDiffs ? diffs : undefined,
+    vcsDiff: options.reviewPane ? diffs : undefined,
+  })
+
+  fixture.transport.enqueue(buildInitialStreamEvent(deltaCount))
+  const contentStart = performance.now()
+  await expect(fixture.text).toBeVisible()
+  await expect(fixture.text).toContainText("Implementation plan")
+  const initialContentObservedMs = performance.now() - contentStart
+  await fixture.scrollToBottom()
+  await fixture.waitForStableGeometry()
+
+  const reviewPane = options.reviewPane && diffs ? await measureReviewPaneLoad(page, diffs[0]!.file) : undefined
+  if (reviewPane) await fixture.waitForStableGeometry()
+
+  const profile = await startTimelineProfile(page, { cpuThrottle, profileCPU })
+  await installTimelineStreamProbe(page, { textPartID, finalIndex: deltaCount, profileVisual, minimal })
+  const deltas = buildStreamDeltaEvents(deltaCount)
+  await startTimelineStreamProbe(page)
+  fixture.transport.enqueue(deltas)
+
+  await page.waitForFunction(
+    (finalIndex) =>
+      (
+        window as Window & {
+          __timelineStreamBenchmark?: { applied: { index: number }[] }
+        }
+      ).__timelineStreamBenchmark?.applied.some((value) => value.index === finalIndex),
+    deltaCount,
+    { timeout: completionTimeoutMs },
+  )
+  await expect(fixture.text).toContainText("benchmark-complete")
+  await expect(fixture.text).toContainText("Streaming")
+  await fixture.waitForStableGeometry()
+  const metrics = await collectTimelineStreamMetrics(page, {
+    textPartID,
+    finalIndex: deltaCount,
+    navigations: benchmarkDiagnostics(page).navigations,
+  })
+  const delivered = deltas.length - fixture.transport.pendingCount()
+  await profile.stop()
+
+  const result = {
+    metrics: {
+      endToEndInitialContentObservedMs: initialContentObservedMs,
+      ...metrics,
+      deliveredDeltas: delivered,
+      pendingDeltas: fixture.transport.pendingCount(),
+      reviewPane: reviewPane ?? null,
+    },
+    context: {
+      cpuThrottle,
+      profileCPU,
+      profileVisual,
+      minimal,
+      queuedDeltas: deltas.length,
+      historyTurns,
+      eventBatch,
+      newLayoutDesigns: options.newLayoutDesigns === true,
+      reviewPane: options.reviewPane === true ? "open" : "closed",
+      reviewDiffs: diffs?.length ?? 0,
+    },
+  }
+
+  await profile.reset()
+  return result
+}
+
+async function measureReviewPaneLoad(page: Page, file: string) {
+  // Default git mode reads the mocked /vcs/diff data, so opening the pane is enough
+  // and the flow works across review pane implementations.
+  await installReviewPaneProbe(page, { file })
+  await startReviewPaneProbe(page)
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  await expect(page.locator("#review-panel")).toBeVisible()
+  return collectReviewPaneProbe(page)
+}
+
+async function measureReviewNextFile(page: Page, file: string) {
+  await installReviewPaneProbe(page, { file })
+  await startReviewPaneProbe(page)
+  await page.getByRole("button", { name: "Next file" }).click()
+  return collectReviewPaneProbe(page)
+}
+
+async function installReviewPaneProbe(page: Page, input: { file: string }) {
+  await page.evaluate((input) => {
+    const samples: ReviewPaneSample[] = []
+    const basename = input.file.split(/[\\/]/).at(-1) ?? input.file
+    let started: number | undefined
+    let running = true
+
+    const paneState = () => {
+      const panel = document.querySelector<HTMLElement>("#review-panel")
+      const review = panel?.querySelector<HTMLElement>('[data-component="session-review-v2"]')
+      const rect = (review ?? panel)?.getBoundingClientRect()
+      const text = panel?.textContent ?? ""
+      const previewHeader = panel?.querySelector<HTMLElement>(
+        '[data-slot="session-review-v2-file-header"]',
+      )?.textContent
+      const header = previewHeader ?? text
+      const viewers = panel ? [...panel.querySelectorAll<HTMLElement>('[data-component="file"][data-mode="diff"]')] : []
+      const codeBlocks = panel?.querySelectorAll("code").length ?? 0
+      const diffLines = viewers.reduce(
+        (sum, viewer) =>
+          sum +
+          (viewer.shadowRoot?.querySelectorAll("[data-line]").length ?? viewer.querySelectorAll("[data-line]").length),
+        0,
+      )
+      const panelVisible =
+        !!panel && panel.getAttribute("aria-hidden") !== "true" && !!rect && rect.width > 0 && rect.height > 0
+      return {
+        panelVisible,
+        header: header.slice(0, 500),
+        diffViewers: viewers.length,
+        diffLines,
+        codeBlocks,
+        ready:
+          panelVisible &&
+          header.includes(basename) &&
+          (viewers.length > 0 || text.includes("+3") || diffLines > 0 || codeBlocks > 0),
+      }
+    }
+
+    const sample = () => {
+      if (!running || started === undefined) return
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          if (!running || started === undefined) return
+          samples.push({ observedAtMs: performance.now() - started, ...paneState() })
+          if (performance.now() - started < 10_000) sample()
+        }, 0)
+      })
+    }
+
+    ;(window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe = {
+      samples,
+      start: () => {
+        started = performance.now()
+        performance.mark("opencode.review-pane.click")
+        sample()
+      },
+      stop: () => {
+        running = false
+      },
+    }
+  }, input)
+}
+
+async function startReviewPaneProbe(page: Page) {
+  await page.evaluate(() => {
+    ;(window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe!.start()
+  })
+}
+
+async function collectReviewPaneProbe(page: Page) {
+  await page.waitForFunction((streak) => {
+    const samples = (window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe?.samples
+    if (!samples) return false
+    return samples.some((_, index) => {
+      const stable = samples.slice(index, index + streak)
+      return stable.length === streak && stable.every((sample) => sample.ready)
+    })
+  }, reviewReadyStreak)
+
+  const samples = await page.evaluate(() => {
+    const probe = (window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe!
+    probe.stop()
+    return probe.samples
+  })
+  return { summary: summarizeReviewPaneSamples(samples), samples }
+}
+
+function summarizeReviewPaneSamples(samples: ReviewPaneSample[]) {
+  const firstReady = samples.find((sample) => sample.ready)
+  const stableIndex = samples.findIndex((_, index) => {
+    const stable = samples.slice(index, index + reviewReadyStreak)
+    return stable.length === reviewReadyStreak && stable.every((sample) => sample.ready)
+  })
+  return {
+    samples: samples.length,
+    firstReadyObservedMs: firstReady?.observedAtMs ?? null,
+    stableReadyObservedMs: stableIndex === -1 ? null : samples[stableIndex + reviewReadyStreak - 1]!.observedAtMs,
+    notReadySamples: samples.filter((sample) => !sample.ready).length,
+    maxDiffViewers: Math.max(0, ...samples.map((sample) => sample.diffViewers)),
+    maxDiffLines: Math.max(0, ...samples.map((sample) => sample.diffLines)),
+    maxCodeBlocks: Math.max(0, ...samples.map((sample) => sample.codeBlocks)),
+  }
+}

packages/app/e2e/performance/timeline/timeline-test-helpers.ts

@@ -21,7 +21,10 @@ export async function installTimelineSettings(page: Page) {
 
 export function mockStressTimeline(
   page: Page,
-  input?: { onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void },
+  input?: {
+    onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void
+    vcsDiff?: unknown[]
+  },
 ) {
   return mockOpenCodeServer(page, {
     sessions: fixture.sessions,
@@ -30,6 +33,7 @@ export function mockStressTimeline(
     project: fixture.project,
     pageMessages,
     onMessages: input?.onMessages,
+    vcsDiff: input?.vcsDiff,
   })
 }
 
@@ -78,3 +82,53 @@ export function stressDraftHref(draftID: string) {
 function stressServer() {
   return `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 }
+
+export function createReviewDiffs() {
+  return Array.from({ length: Number(process.env.REVIEW_PANE_DIFF_COUNT ?? 72) }, (_, index) => {
+    const lines = index % 3 === 0 ? 300 : index % 3 === 1 ? 120 : 38
+    const file = `src/review/generated-${String(index).padStart(3, "0")}.ts`
+    const before = reviewSource(index, lines)
+    const after = before
+      .replace(`value_${index}_4`, `updated_${index}_4`)
+      .replace(
+        `value_${index}_${Math.max(8, Math.floor(lines / 2))}`,
+        `updated_${index}_${Math.max(8, Math.floor(lines / 2))}`,
+      )
+      .replace(`value_${index}_${lines - 4}`, `updated_${index}_${lines - 4}`)
+    return {
+      file,
+      patch: reviewPatch(file, before, after),
+      additions: 3,
+      deletions: 3,
+      status: "modified" as const,
+    }
+  })
+}
+
+function reviewSource(seed: number, lines: number) {
+  return Array.from(
+    { length: lines },
+    (_, index) => `export const value_${seed}_${index} = "${reviewWords(seed + index, index % 5 === 0 ? 180 : 42)}"`,
+  ).join("\n")
+}
+
+function reviewPatch(file: string, before: string, after: string) {
+  const beforeLines = before.split("\n")
+  const afterLines = after.split("\n")
+  return [
+    `diff --git a/${file} b/${file}`,
+    `--- a/${file}`,
+    `+++ b/${file}`,
+    `@@ -1,${beforeLines.length} +1,${afterLines.length} @@`,
+    ...beforeLines.flatMap((line, index) => {
+      const next = afterLines[index]!
+      if (line === next) return [` ${line}`]
+      return [`-${line}`, `+${next}`]
+    }),
+  ].join("\n")
+}
+
+function reviewWords(seed: number, length: number) {
+  const words = ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india", "juliet"]
+  return Array.from({ length: Math.ceil(length / 7) }, (_, index) => words[(seed + index * 3) % words.length]).join(" ")
+}

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

@@ -0,0 +1,109 @@
+import { expect, test, type Page, type Route } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+
+const serverA = "http://127.0.0.1:4096"
+const serverB = "http://127.0.0.1:4097"
+const sessionA = session("ses_server_a", "C:/server-a", "Server A session")
+const sessionB = session("ses_server_b", "/home/server-b", "Server B session")
+
+test("tab busy indicator reflects the tab server's own session status", async ({ page }) => {
+  await mockServers(page)
+  await page.addInitScript(
+    ({ serverA, serverB, sessionA, sessionB }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem("opencode.global.dat:server", JSON.stringify({ list: [serverB] }))
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([
+          { type: "session", server: serverA, sessionId: sessionA },
+          { type: "session", server: serverB, sessionId: sessionB },
+        ]),
+      )
+    },
+    { serverA, serverB, sessionA: sessionA.id, sessionB: sessionB.id },
+  )
+
+  const hrefA = `/server/${base64Encode(serverA)}/session/${sessionA.id}`
+  const hrefB = `/server/${base64Encode(serverB)}/session/${sessionB.id}`
+  await page.goto(hrefA)
+  await expect(page.getByText(sessionA.title).first()).toBeVisible()
+
+  // Session B is busy on server B while server A stays the active server, so the
+  // busy indicator must come from the tab server's status, not the active server's.
+  const tabB = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefB}"])`)
+  await expect(tabB.locator('[data-component="session-progress-indicator-v2"]')).toBeVisible()
+
+  const tabA = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefA}"])`)
+  await expect(tabA.locator("[data-titlebar-tab-title]")).toHaveText(sessionA.title)
+  await expect(tabA.locator('[data-component="session-progress-indicator-v2"]')).toHaveCount(0)
+})
+
+function session(id: string, directory: string, title: string) {
+  return {
+    id,
+    slug: id,
+    projectID: `project-${id}`,
+    directory,
+    title,
+    version: "dev",
+    time: { created: 1, updated: 1 },
+  }
+}
+
+async function mockServers(page: Page) {
+  await page.route("**/*", async (route) => {
+    const url = new URL(route.request().url())
+    if (url.origin !== serverA && url.origin !== serverB) return route.fallback()
+    const current = url.origin === serverA ? sessionA : sessionB
+    const directory = url.searchParams.get("directory")
+    if (directory && directory !== current.directory) return json(route, { name: "InvalidDirectory" }, 500)
+    if (url.pathname === "/global/event" || url.pathname === "/event") return sse(route)
+    if (url.pathname === "/global/health") return json(route, { healthy: true })
+    if (url.pathname === "/session/status")
+      return json(route, url.origin === serverB ? { [sessionB.id]: { type: "busy" } } : {})
+    if (url.pathname === "/session") return json(route, [current])
+    if (url.pathname === `/session/${current.id}`) return json(route, current)
+    if (/^\/session\/[^/]+$/.test(url.pathname)) return json(route, { name: "NotFoundError" }, 404)
+    if (url.pathname === `/session/${current.id}/message`) return json(route, [])
+    if (/^\/session\/[^/]+\/(children|todo|diff)$/.test(url.pathname)) return json(route, [])
+    if (["/skill", "/command", "/lsp", "/formatter", "/permission", "/question", "/vcs/diff"].includes(url.pathname))
+      return json(route, [])
+    if (["/global/config", "/config", "/provider/auth", "/mcp"].includes(url.pathname)) return json(route, {})
+    if (url.pathname === "/provider")
+      return json(route, { all: [], connected: [], default: { providerID: "", modelID: "" } })
+    if (url.pathname === "/agent") return json(route, [{ name: "build", mode: "primary" }])
+    if (url.pathname === "/project" || url.pathname === "/project/current") {
+      const project = {
+        id: current.projectID,
+        worktree: current.directory,
+        vcs: "git",
+        time: { created: 1, updated: 1 },
+        sandboxes: [],
+      }
+      return json(route, url.pathname === "/project" ? [project] : project)
+    }
+    if (url.pathname === "/path")
+      return json(route, {
+        state: current.directory,
+        config: current.directory,
+        worktree: current.directory,
+        directory: current.directory,
+        home: current.directory,
+      })
+    if (url.pathname === "/vcs") return json(route, { branch: "main", default_branch: "main" })
+    return json(route, {})
+  })
+}
+
+function json(route: Route, body: unknown, status = 200) {
+  return route.fulfill({
+    status,
+    contentType: "application/json",
+    headers: { "access-control-allow-origin": "*" },
+    body: JSON.stringify(body),
+  })
+}
+
+function sse(route: Route) {
+  return route.fulfill({ status: 200, contentType: "text/event-stream", body: ": ok\n\n" })
+}

packages/app/e2e/regression/review-image-flash.spec.ts

@@ -0,0 +1,202 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ReviewImageFlashRegression"
+const sessionID = "ses_review_image_flash_regression"
+const title = "Review image flash regression"
+const imageFile = "assets/preview.png"
+
+test("clicking an image file in the v2 review pane does not blank the panel", async ({ page }) => {
+  await openReview(page)
+  await installReviewFlashProbe(page)
+
+  await page.getByRole("button", { name: /preview\.png/ }).click()
+  await waitForReviewFlashProbe(page, 400)
+  const trace = await collectReviewFlashProbe(page)
+  const bad = trace.samples.filter((sample) => sample.blank || sample.blackCenter)
+
+  expect(trace.samples.length).toBeGreaterThan(0)
+  expect(
+    bad,
+    JSON.stringify({ bad: bad.slice(0, 8), first: trace.samples.slice(0, 8), last: trace.samples.slice(-4) }, null, 2),
+  ).toEqual([])
+})
+
+async function openReview(page: Page) {
+  await page.setViewportSize({ width: 960, height: 900 })
+  await page.addInitScript(() => {
+    localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+  })
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_review_image_flash_regression",
+      worktree: directory,
+      vcs: "git",
+      name: "review-image-flash-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "review-image-flash-regression",
+        projectID: "proj_review_image_flash_regression",
+        directory,
+        title,
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    vcsDiff: [
+      {
+        file: "src/example.ts",
+        additions: 1,
+        deletions: 1,
+        status: "modified",
+        patch:
+          "diff --git a/src/example.ts b/src/example.ts\n--- a/src/example.ts\n+++ b/src/example.ts\n@@ -1 +1 @@\n-export const value = 'before'\n+export const value = 'after'\n",
+      },
+      {
+        file: imageFile,
+        patch: "",
+        additions: 1,
+        deletions: 0,
+        status: "added",
+      },
+    ],
+    fileContent: async (path) => {
+      if (path !== imageFile) return undefined
+      await new Promise((resolve) => setTimeout(resolve, 250))
+      return {
+        type: "binary",
+        content: "iVBORw0KGgo=",
+        encoding: "base64",
+        mimeType: "image/png",
+      }
+    },
+    fileList: (path) => {
+      if (!path) {
+        return [
+          { name: "assets", path: "assets", absolute: `${directory}/assets`, type: "directory", ignored: false },
+          { name: "src", path: "src", absolute: `${directory}/src`, type: "directory", ignored: false },
+        ]
+      }
+      if (path === "assets") {
+        return [
+          {
+            name: "preview.png",
+            path: imageFile,
+            absolute: `${directory}/${imageFile}`,
+            type: "file",
+            ignored: false,
+          },
+        ]
+      }
+      if (path === "src") {
+        return [
+          {
+            name: "example.ts",
+            path: "src/example.ts",
+            absolute: `${directory}/src/example.ts`,
+            type: "file",
+            ignored: false,
+          },
+        ]
+      }
+      return []
+    },
+    pageMessages: () => ({
+      items: [
+        {
+          info: {
+            id: "msg_review_image_flash_regression",
+            sessionID,
+            role: "user",
+            time: { created: 1700000000000 },
+            summary: { diffs: [] },
+            agent: "build",
+            model: { providerID: "opencode", modelID: "test" },
+          },
+          parts: [
+            {
+              id: "prt_review_image_flash_regression",
+              sessionID,
+              messageID: "msg_review_image_flash_regression",
+              type: "text",
+              text: "Review this change.",
+            },
+          ],
+        },
+      ],
+    }),
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  await expectAppVisible(page.locator('#review-panel [data-component="session-review-v2"]'))
+  await expectAppVisible(page.getByRole("button", { name: /preview\.png/ }))
+}
+
+async function installReviewFlashProbe(page: Page) {
+  await page.evaluate(() => {
+    const samples: Array<{
+      observedAtMs: number
+      blank: boolean
+      blackCenter: boolean
+      text: string
+      background: string
+    }> = []
+    const startedAt = performance.now()
+    const sample = () => {
+      const panel = document.querySelector<HTMLElement>('#review-panel [data-component="session-review-v2"]')
+      const rect = panel?.getBoundingClientRect()
+      const center = rect
+        ? document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2)
+        : undefined
+      const background = center instanceof Element ? getComputedStyle(center).backgroundColor : ""
+      samples.push({
+        observedAtMs: performance.now() - startedAt,
+        blank: !panel || panel.textContent?.trim().length === 0,
+        blackCenter: background === "rgb(0, 0, 0)",
+        text: panel?.textContent?.trim().slice(0, 80) ?? "",
+        background,
+      })
+      if (performance.now() - startedAt < 500) requestAnimationFrame(sample)
+    }
+    document.addEventListener(
+      "click",
+      (event) => {
+        const target = event.target instanceof Element ? event.target : undefined
+        if (!target?.closest('[data-slot="file-tree-v2-row"]')) return
+        requestAnimationFrame(sample)
+      },
+      { capture: true, once: true },
+    )
+    ;(window as Window & { __reviewImageFlash?: { samples: typeof samples; startedAt: number } }).__reviewImageFlash = {
+      samples,
+      startedAt,
+    }
+  })
+}
+
+async function waitForReviewFlashProbe(page: Page, durationMs: number) {
+  await page.waitForFunction((durationMs) => {
+    const state = (window as Window & { __reviewImageFlash?: { samples: unknown[]; startedAt: number } })
+      .__reviewImageFlash
+    return !!state && state.samples.length > 0 && performance.now() - state.startedAt >= durationMs
+  }, durationMs)
+}
+
+async function collectReviewFlashProbe(page: Page) {
+  return page.evaluate(() => {
+    return (window as Window & { __reviewImageFlash?: { samples: unknown[]; startedAt: number } }).__reviewImageFlash!
+  }) as Promise<{
+    startedAt: number
+    samples: Array<{ observedAtMs: number; blank: boolean; blackCenter: boolean; text: string; background: string }>
+  }>
+}

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

@@ -0,0 +1,129 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { expect, test, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ReviewTabSwitch"
+const projectID = "proj_review_tab_switch"
+const sessionA = "ses_review_tab_a"
+const sessionB = "ses_review_tab_b"
+const titleA = "Alpha session"
+const titleB = "Beta session"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+// Marks the review pane DOM node so a remount (fresh node) is detectable.
+const PROBE = "original"
+
+test.use({ viewport: { width: 1440, height: 900 } })
+
+// The v2 review pane's diff data is workspace-scoped: switching between session
+// tabs in the same workspace must update its parameters reactively instead of
+// tearing the pane down and remounting it (which flickers).
+test("keeps the v2 review pane mounted when switching session tabs in a workspace", async ({ page }) => {
+  await setup(page)
+
+  await page.goto(sessionHref(sessionA))
+  await expectSessionTitle(page, titleA)
+
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  const review = page.locator('#review-panel [data-component="session-review-v2"]')
+  await expectAppVisible(review)
+  await expectAppVisible(page.getByRole("button", { name: /example\.ts/ }))
+  await writeProbe(page)
+
+  await switchTab(page, titleB)
+  await expectSessionTitle(page, titleB)
+  await expectAppVisible(review)
+  expect(await readProbe(page)).toBe(PROBE)
+
+  await switchTab(page, titleA)
+  await expectSessionTitle(page, titleA)
+  await expectAppVisible(review)
+  expect(await readProbe(page)).toBe(PROBE)
+})
+
+type Probed = HTMLElement & { __e2eProbe?: string }
+
+async function switchTab(page: Page, title: string) {
+  await page.locator("[data-titlebar-tab-slot]", { hasText: title }).click()
+}
+
+async function writeProbe(page: Page) {
+  await page.locator('#review-panel [data-component="session-review-v2"]').evaluate((el, probe) => {
+    ;(el as Probed).__e2eProbe = probe
+  }, PROBE)
+}
+
+async function readProbe(page: Page) {
+  return page.locator('#review-panel [data-component="session-review-v2"]').evaluate((el) => (el as Probed).__e2eProbe)
+}
+
+async function setup(page: Page) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "review-tab-switch",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: { test: { id: "test", name: "Test", limit: { context: 200_000 } } },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "test" },
+    },
+    sessions: [session(sessionA, titleA, 1700000000000), session(sessionB, titleB, 1700000001000)],
+    vcsDiff: [
+      {
+        file: "src/example.ts",
+        additions: 1,
+        deletions: 1,
+        status: "modified",
+        patch:
+          "diff --git a/src/example.ts b/src/example.ts\n--- a/src/example.ts\n+++ b/src/example.ts\n@@ -1 +1 @@\n-export const value = 'before'\n+export const value = 'after'\n",
+      },
+    ],
+    pageMessages: () => ({ items: [] }),
+  })
+
+  await page.addInitScript(
+    ({ directory, server, sessions }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({
+          projects: { local: [{ worktree: directory, expanded: true }] },
+          lastProject: { local: directory },
+        }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify(sessions.map((sessionId: string) => ({ type: "session", server, sessionId }))),
+      )
+    },
+    { directory, server, sessions: [sessionA, sessionB] },
+  )
+}
+
+function session(id: string, title: string, created: number) {
+  return {
+    id,
+    slug: id,
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created, updated: created },
+  }
+}
+
+function sessionHref(sessionID: string) {
+  return `/server/${base64Encode(server)}/session/${sessionID}`
+}

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

@@ -0,0 +1,108 @@
+import { expect, test, type Page, type Route } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+
+const server = "http://127.0.0.1:4096"
+const sessionA = session("ses_tab_a", "Tab A session")
+const sessionB = session("ses_tab_b", "Tab B session")
+
+test("pressing mouse down on a tab navigates before mouse up", async ({ page }) => {
+  await mockServer(page)
+  await page.addInitScript(
+    ({ server, sessionA, sessionB }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify([
+          { type: "session", server, sessionId: sessionA },
+          { type: "session", server, sessionId: sessionB },
+        ]),
+      )
+    },
+    { server, sessionA: sessionA.id, sessionB: sessionB.id },
+  )
+
+  const hrefA = `/server/${base64Encode(server)}/session/${sessionA.id}`
+  const hrefB = `/server/${base64Encode(server)}/session/${sessionB.id}`
+  await page.goto(hrefA)
+  await expect(page.getByText(sessionA.title).first()).toBeVisible()
+
+  const linkB = page.locator(`a[data-titlebar-tab-link][href="${hrefB}"]`)
+  await expect(linkB).toBeVisible()
+  const box = await linkB.boundingBox()
+  if (!box) throw new Error("tab link has no bounding box")
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+  await page.mouse.down()
+
+  // Navigation must happen on mousedown, before the button is released.
+  await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
+  await page.mouse.up()
+  await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
+})
+
+function session(id: string, title: string) {
+  return {
+    id,
+    slug: id,
+    projectID: "project-tabs",
+    directory: "C:/tab-project",
+    title,
+    version: "dev",
+    time: { created: 1, updated: 1 },
+  }
+}
+
+async function mockServer(page: Page) {
+  const sessions = [sessionA, sessionB]
+  await page.route("**/*", async (route) => {
+    const url = new URL(route.request().url())
+    if (url.origin !== server) return route.fallback()
+    if (url.pathname === "/global/event" || url.pathname === "/event") return sse(route)
+    if (url.pathname === "/global/health") return json(route, { healthy: true })
+    if (url.pathname === "/session") return json(route, sessions)
+    const byId = sessions.find((item) => url.pathname === `/session/${item.id}`)
+    if (byId) return json(route, byId)
+    if (/^\/session\/[^/]+$/.test(url.pathname)) return json(route, { name: "NotFoundError" }, 404)
+    if (/^\/session\/[^/]+\/message$/.test(url.pathname)) return json(route, [])
+    if (/^\/session\/[^/]+\/(children|todo|diff)$/.test(url.pathname)) return json(route, [])
+    if (["/skill", "/command", "/lsp", "/formatter", "/permission", "/question", "/vcs/diff"].includes(url.pathname))
+      return json(route, [])
+    if (["/global/config", "/config", "/provider/auth", "/mcp", "/session/status"].includes(url.pathname))
+      return json(route, {})
+    if (url.pathname === "/provider")
+      return json(route, { all: [], connected: [], default: { providerID: "", modelID: "" } })
+    if (url.pathname === "/agent") return json(route, [{ name: "build", mode: "primary" }])
+    if (url.pathname === "/project" || url.pathname === "/project/current") {
+      const project = {
+        id: sessionA.projectID,
+        worktree: sessionA.directory,
+        vcs: "git",
+        time: { created: 1, updated: 1 },
+        sandboxes: [],
+      }
+      return json(route, url.pathname === "/project" ? [project] : project)
+    }
+    if (url.pathname === "/path")
+      return json(route, {
+        state: sessionA.directory,
+        config: sessionA.directory,
+        worktree: sessionA.directory,
+        directory: sessionA.directory,
+        home: sessionA.directory,
+      })
+    if (url.pathname === "/vcs") return json(route, { branch: "main", default_branch: "main" })
+    return json(route, {})
+  })
+}
+
+function json(route: Route, body: unknown, status = 200) {
+  return route.fulfill({
+    status,
+    contentType: "application/json",
+    headers: { "access-control-allow-origin": "*" },
+    body: JSON.stringify(body),
+  })
+}
+
+function sse(route: Route) {
+  return route.fulfill({ status: 200, contentType: "text/event-stream", body: ": ok\n\n" })
+}

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

@@ -0,0 +1,145 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { expect, test, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/TerminalTabSwitch"
+const projectID = "proj_terminal_tab_switch"
+const sessionA = "ses_terminal_tab_a"
+const sessionB = "ses_terminal_tab_b"
+const titleA = "Alpha session"
+const titleB = "Beta session"
+const ptyID = "pty_tab_switch"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+// Marks the terminal DOM node so a remount (fresh node) is detectable.
+const PROBE = "original"
+
+test.use({ viewport: { width: 1440, height: 900 } })
+
+// Terminals are workspace-scoped: switching between session tabs in the same
+// workspace must keep the terminal mounted and its PTY connection open instead
+// of tearing it down and reconnecting.
+test("keeps the terminal session alive when switching session tabs in a workspace", async ({ page }) => {
+  const connections = await setup(page)
+
+  await page.goto(sessionHref(sessionA))
+  await expectSessionTitle(page, titleA)
+
+  await page.keyboard.press("Control+Backquote")
+  const terminal = page.locator('[data-component="terminal"]')
+  await expect(terminal).toBeVisible()
+  await expect.poll(() => connections.length).toBe(1)
+  await writeProbe(page)
+
+  await switchTab(page, titleB)
+  await expectSessionTitle(page, titleB)
+  await expect(terminal).toBeVisible()
+  expect(await readProbe(page)).toBe(PROBE)
+  expect(connections.length).toBe(1)
+
+  await switchTab(page, titleA)
+  await expectSessionTitle(page, titleA)
+  await expect(terminal).toBeVisible()
+  expect(await readProbe(page)).toBe(PROBE)
+  expect(connections.length).toBe(1)
+})
+
+type Probed = HTMLElement & { __e2eProbe?: string }
+
+async function switchTab(page: Page, title: string) {
+  await page.locator("[data-titlebar-tab-slot]", { hasText: title }).click()
+}
+
+async function writeProbe(page: Page) {
+  await page.locator('[data-component="terminal"]').evaluate((el, probe) => {
+    ;(el as Probed).__e2eProbe = probe
+  }, PROBE)
+}
+
+async function readProbe(page: Page) {
+  return page.locator('[data-component="terminal"]').evaluate((el) => (el as Probed).__e2eProbe)
+}
+
+async function setup(page: Page) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: projectID,
+      worktree: directory,
+      vcs: "git",
+      name: "terminal-tab-switch",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: {
+      all: [
+        {
+          id: "opencode",
+          name: "OpenCode",
+          models: { test: { id: "test", name: "Test", limit: { context: 200_000 } } },
+        },
+      ],
+      connected: ["opencode"],
+      default: { providerID: "opencode", modelID: "test" },
+    },
+    sessions: [session(sessionA, titleA, 1700000000000), session(sessionB, titleB, 1700000001000)],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.route("**/pty", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: ptyID, title: "Terminal 1" }),
+    }),
+  )
+  await page.route(`**/pty/${ptyID}`, (route) =>
+    route.fulfill({ status: 200, contentType: "application/json", body: "{}" }),
+  )
+  await page.route(`**/pty/${ptyID}/connect-token*`, (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify({ ticket: "e2e-ticket" }),
+    }),
+  )
+  const connections: string[] = []
+  await page.routeWebSocket(new RegExp(`/pty/${ptyID}/connect`), (ws) => {
+    connections.push(ws.url())
+  })
+
+  await page.addInitScript(
+    ({ directory, server, sessions }) => {
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({
+          projects: { local: [{ worktree: directory, expanded: true }] },
+          lastProject: { local: directory },
+        }),
+      )
+      localStorage.setItem(
+        "opencode.window.browser.dat:tabs",
+        JSON.stringify(sessions.map((sessionId: string) => ({ type: "session", server, sessionId }))),
+      )
+    },
+    { directory, server, sessions: [sessionA, sessionB] },
+  )
+  return connections
+}
+
+function session(id: string, title: string, created: number) {
+  return {
+    id,
+    slug: id,
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created, updated: created },
+  }
+}
+
+function sessionHref(sessionID: string) {
+  return `/server/${base64Encode(server)}/session/${sessionID}`
+}

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

@@ -17,6 +17,8 @@ export interface MockServerConfig {
   todos?: (sessionID: string) => unknown[]
   permissions?: unknown[] | (() => unknown[])
   questions?: unknown[] | (() => unknown[])
+  fileList?: (path: string) => unknown | Promise<unknown>
+  fileContent?: (path: string) => unknown | Promise<unknown>
   sessionStatus?: unknown
 }
 
@@ -56,6 +58,10 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       return json(route, typeof config.questions === "function" ? config.questions() : (config.questions ?? []))
     if (path === "/session/status") return json(route, config.sessionStatus ?? {})
     if (path === "/vcs/diff" && config.vcsDiff) return json(route, config.vcsDiff)
+    if (path === "/file" && config.fileList)
+      return json(route, await config.fileList(url.searchParams.get("path") ?? ""))
+    if (path === "/file/content" && config.fileContent)
+      return json(route, await config.fileContent(url.searchParams.get("path") ?? ""))
     if (emptyObject.has(path)) return json(route, {})
     if (emptyList.has(path)) return json(route, [])
     if (path in staticRoutes) return json(route, staticRoutes[path])

packages/app/src/app.tsx

@@ -54,7 +54,7 @@ import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
 import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
 
-import { SessionPage, TargetSessionRoute as TargetSessionRouteContent } from "@/pages/session"
+import { SessionPage, TargetSessionRouteContent } from "@/pages/session"
 import { NewHome, LegacyHome } from "@/pages/home"
 
 const NewSession = lazy(() => import("@/pages/new-session"))
@@ -100,6 +100,9 @@ const TargetSessionRoute = () => {
   })
 
   return (
+    // Owns the server-identity remount. Session changes must NOT remount this
+    // subtree (SessionRouteErrorBoundary resets and createSessionLineage
+    // re-resolves reactively instead); both rely on this key for server changes.
     <Show when={requireServerKey(params.serverKey)} keyed>
       <ServerSDKProvider server={conn}>
         <ServerSyncProvider server={conn}>

packages/app/src/components/file-tree-v2.tsx

@@ -0,0 +1,421 @@
+import { useFile } from "@/context/file"
+import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
+import {
+  createEffect,
+  createMemo,
+  For,
+  Match,
+  on,
+  Show,
+  splitProps,
+  Switch,
+  untrack,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { FileNode } from "@opencode-ai/sdk/v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import {
+  dirsToExpand,
+  pathToFileUrl,
+  shouldListRoot,
+  visibleKind,
+  withFileDragImage,
+  type Filter,
+  type Kind,
+} from "@/components/file-tree"
+
+export type { Kind } from "@/components/file-tree"
+
+const MAX_DEPTH = 128
+
+function visibleNodesForPath(path: string, children: (dir: string) => FileNode[], current: Filter | undefined) {
+  const nodes = children(path)
+  if (!current) return nodes
+
+  const parent = (item: string) => {
+    const idx = item.lastIndexOf("/")
+    if (idx === -1) return ""
+    return item.slice(0, idx)
+  }
+
+  const leaf = (item: string) => {
+    const idx = item.lastIndexOf("/")
+    return idx === -1 ? item : item.slice(idx + 1)
+  }
+
+  const out = nodes.filter((node) => {
+    if (node.type === "file") return current.files.has(node.path)
+    return current.dirs.has(node.path)
+  })
+
+  const seen = new Set(out.map((node) => node.path))
+
+  for (const dir of current.dirs) {
+    if (parent(dir) !== path) continue
+    if (seen.has(dir)) continue
+    out.push({
+      name: leaf(dir),
+      path: dir,
+      absolute: dir,
+      type: "directory",
+      ignored: false,
+    })
+    seen.add(dir)
+  }
+
+  for (const item of current.files) {
+    if (parent(item) !== path) continue
+    if (seen.has(item)) continue
+    out.push({
+      name: leaf(item),
+      path: item,
+      absolute: item,
+      type: "file",
+      ignored: false,
+    })
+    seen.add(item)
+  }
+
+  out.sort((a, b) => {
+    if (a.type !== b.type) {
+      return a.type === "directory" ? -1 : 1
+    }
+    return a.name.localeCompare(b.name)
+  })
+
+  return out
+}
+
+const INDENT_STEP = 16
+
+function rowPaddingLeft(level: number, type: FileNode["type"]) {
+  if (type === "directory") return 8 + level * INDENT_STEP
+  if (level === 0) return 8
+  return 8 + level * INDENT_STEP - INDENT_STEP
+}
+
+function guideLineLeft(level: number) {
+  return rowPaddingLeft(level, "directory") + 8
+}
+
+export const kindLabel = (kind: Kind) => {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  return ""
+}
+
+export const kindChange = (kind: Kind) => {
+  if (kind === "add") return "added"
+  if (kind === "del") return "deleted"
+  return "modified"
+}
+
+const FileTreeNodeV2 = (
+  p: ParentProps &
+    ComponentProps<"div"> &
+    ComponentProps<"button"> & {
+      node: FileNode
+      level: number
+      active?: string
+      draggable: boolean
+      kinds?: ReadonlyMap<string, Kind>
+      marks?: Set<string>
+      as?: "div" | "button"
+    },
+) => {
+  const [local, rest] = splitProps(p, [
+    "node",
+    "level",
+    "active",
+    "draggable",
+    "kinds",
+    "marks",
+    "as",
+    "children",
+    "class",
+    "classList",
+  ])
+  const kind = () => visibleKind(local.node, local.kinds, local.marks)
+
+  return (
+    <Dynamic
+      component={local.as ?? "div"}
+      data-slot="file-tree-v2-row"
+      data-selected={local.node.path === local.active ? "" : undefined}
+      data-ignored={local.node.ignored ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      style={`padding-left: ${rowPaddingLeft(local.level, local.node.type)}px`}
+      draggable={local.draggable}
+      onDragStart={(event: DragEvent) => {
+        if (!local.draggable) return
+        event.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+        event.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
+        if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy"
+        withFileDragImage(event)
+      }}
+      {...rest}
+    >
+      {local.children}
+      <span class="flex-1 min-w-0 text-12-medium whitespace-nowrap truncate">{local.node.name}</span>
+      {(() => {
+        const value = kind()
+        if (!value || local.node.type !== "file") return null
+        return (
+          <span data-slot="file-tree-v2-change" data-change={kindChange(value)}>
+            {kindLabel(value)}
+          </span>
+        )
+      })()}
+    </Dynamic>
+  )
+}
+
+// V2-styled fork of FileTree for the review sidebar. Unlike the v1 tree it never
+// lists unloaded subdirectories, so callers must pass `allowed` (nodes are
+// synthesized from that list) for nested content to appear.
+export default function FileTreeV2(props: {
+  path: string
+  active?: string
+  level?: number
+  allowed?: readonly string[]
+  kinds?: ReadonlyMap<string, Kind>
+  draggable?: boolean
+  onFileClick?: (file: FileNode) => void
+
+  _filter?: Filter
+  _marks?: Set<string>
+  _deeps?: Map<string, number>
+  _kinds?: ReadonlyMap<string, Kind>
+  _chain?: readonly string[]
+}) {
+  const file = useFile()
+  const level = props.level ?? 0
+  const draggable = () => props.draggable ?? true
+
+  const key = (p: string) =>
+    file
+      .normalize(p)
+      .replace(/[\\/]+$/, "")
+      .replaceAll("\\", "/")
+  const chain = props._chain ? [...props._chain, key(props.path)] : [key(props.path)]
+
+  const filter = createMemo(() => {
+    if (props._filter) return props._filter
+
+    const allowed = props.allowed
+    if (!allowed) return
+
+    const files = new Set(allowed)
+    const dirs = new Set<string>()
+
+    for (const item of allowed) {
+      const parts = item.split("/")
+      const parents = parts.slice(0, -1)
+      for (const [idx] of parents.entries()) {
+        const dir = parents.slice(0, idx + 1).join("/")
+        if (dir) dirs.add(dir)
+      }
+    }
+
+    return { files, dirs }
+  })
+
+  const marks = createMemo(() => {
+    if (props._marks) return props._marks
+
+    const out = new Set<string>(props.kinds?.keys() ?? [])
+    if (out.size === 0) return
+    return out
+  })
+
+  const kinds = createMemo(() => {
+    if (props._kinds) return props._kinds
+    return props.kinds
+  })
+
+  const deeps = createMemo(() => {
+    if (props._deeps) return props._deeps
+
+    const out = new Map<string, number>()
+
+    const root = props.path
+    if (!(file.tree.state(root)?.expanded ?? false)) return out
+
+    const seen = new Set<string>()
+    const stack: { dir: string; lvl: number; i: number; kids: string[]; max: number }[] = []
+
+    const push = (dir: string, lvl: number) => {
+      const id = key(dir)
+      if (seen.has(id)) return
+      seen.add(id)
+
+      const kids = file.tree
+        .children(dir)
+        .filter((node) => node.type === "directory" && (file.tree.state(node.path)?.expanded ?? false))
+        .map((node) => node.path)
+
+      stack.push({ dir, lvl, i: 0, kids, max: lvl })
+    }
+
+    push(root, level - 1)
+
+    while (stack.length > 0) {
+      const top = stack[stack.length - 1]!
+
+      if (top.i < top.kids.length) {
+        const next = top.kids[top.i]!
+        top.i++
+        push(next, top.lvl + 1)
+        continue
+      }
+
+      out.set(top.dir, top.max)
+      stack.pop()
+
+      const parent = stack[stack.length - 1]
+      if (!parent) continue
+      parent.max = Math.max(parent.max, top.max)
+    }
+
+    return out
+  })
+
+  createEffect(() => {
+    const current = filter()
+    const dirs = dirsToExpand({
+      level,
+      filter: current,
+      expanded: (dir) => untrack(() => file.tree.state(dir)?.expanded) ?? false,
+    })
+    // Nodes come from the `allowed` filter; skip listing so directories that only
+    // exist on the diff's base branch do not each fail with an error toast.
+    for (const dir of dirs) file.tree.expand(dir, { list: false })
+  })
+
+  createEffect(
+    on(
+      () => props.path,
+      (path) => {
+        const dir = untrack(() => file.tree.state(path))
+        if (!shouldListRoot({ level, dir })) return
+        void file.tree.list(path)
+      },
+      { defer: false },
+    ),
+  )
+
+  const nodes = createMemo(() => visibleNodesForPath(props.path, file.tree.children, filter()))
+
+  return (
+    // group/file-tree-v2 scopes the group-hover guide lines below; hosts may add
+    // an outer group with the same name to widen the hover area.
+    <div data-component="file-tree-v2" class="group/file-tree-v2">
+      <For each={nodes()}>
+        {(node) => {
+          const expanded = () => file.tree.state(node.path)?.expanded ?? false
+          const deep = () => deeps().get(node.path) ?? -1
+          const hasChildren = () => visibleNodesForPath(node.path, file.tree.children, filter()).length > 0
+          return (
+            <Switch>
+              <Match when={node.type === "directory"}>
+                <Collapsible
+                  variant="ghost"
+                  class="w-full"
+                  data-scope="file-tree-v2"
+                  forceMount={false}
+                  open={expanded()}
+                  onOpenChange={(open) =>
+                    open ? file.tree.expand(node.path, { list: false }) : file.tree.collapse(node.path)
+                  }
+                >
+                  <Collapsible.Trigger>
+                    <FileTreeNodeV2
+                      node={node}
+                      level={level}
+                      active={props.active}
+                      draggable={draggable()}
+                      kinds={kinds()}
+                      marks={marks()}
+                    >
+                      <div
+                        data-slot="file-tree-v2-chevron"
+                        data-expanded={expanded() ? "" : undefined}
+                        class="size-4 flex items-center justify-center"
+                      >
+                        <Icon name="chevron-down" />
+                      </div>
+                    </FileTreeNodeV2>
+                  </Collapsible.Trigger>
+                  <Show when={hasChildren()}>
+                    <Collapsible.Content class="relative">
+                      <div
+                        classList={{
+                          "absolute top-0 bottom-0 w-px pointer-events-none bg-border-weak-base opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none": true,
+                          "group-hover/file-tree-v2:opacity-100": expanded() && deep() === level,
+                          "group-hover/file-tree-v2:opacity-50": !(expanded() && deep() === level),
+                        }}
+                        style={`left: ${guideLineLeft(level)}px`}
+                      />
+                      <Show
+                        when={level < MAX_DEPTH && !chain.includes(key(node.path))}
+                        fallback={<div class="px-2 py-1 text-12-regular text-text-weak">...</div>}
+                      >
+                        <FileTreeV2
+                          path={node.path}
+                          level={level + 1}
+                          allowed={props.allowed}
+                          kinds={props.kinds}
+                          active={props.active}
+                          draggable={props.draggable}
+                          onFileClick={props.onFileClick}
+                          _filter={filter()}
+                          _marks={marks()}
+                          _deeps={deeps()}
+                          _kinds={kinds()}
+                          _chain={chain}
+                        />
+                      </Show>
+                    </Collapsible.Content>
+                  </Show>
+                </Collapsible>
+              </Match>
+              <Match when={node.type === "file"}>
+                <FileTreeNodeV2
+                  node={node}
+                  level={level}
+                  active={props.active}
+                  draggable={draggable()}
+                  kinds={kinds()}
+                  marks={marks()}
+                  as="button"
+                  type="button"
+                  onClick={() => props.onFileClick?.(node)}
+                >
+                  <Show when={level > 0}>
+                    <div class="w-4 shrink-0" />
+                  </Show>
+                  <Show
+                    when={!node.ignored}
+                    fallback={<FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" mono />}
+                  >
+                    <span class="filetree-iconpair size-4">
+                      <FileIcon node={node} class="size-4 filetree-icon filetree-icon--color" />
+                      <FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" mono />
+                    </span>
+                  </Show>
+                </FileTreeNodeV2>
+              </Match>
+            </Switch>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

packages/app/src/components/file-tree.tsx

@@ -21,13 +21,13 @@ import type { FileNode } from "@opencode-ai/sdk/v2"
 
 const MAX_DEPTH = 128
 
-function pathToFileUrl(filepath: string): string {
+export function pathToFileUrl(filepath: string): string {
   return `file://${encodeFilePath(filepath)}`
 }
 
-type Kind = "add" | "del" | "mix"
+export type Kind = "add" | "del" | "mix"
 
-type Filter = {
+export type Filter = {
   files: Set<string>
   dirs: Set<string>
 }
@@ -78,7 +78,7 @@ const kindDotColor = (kind: Kind) => {
   return "background-color: var(--icon-diff-modified-base)"
 }
 
-const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
+export const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
   const kind = kinds?.get(node.path)
   if (!kind) return
   if (!marks?.has(node.path)) return
@@ -99,7 +99,7 @@ const buildDragImage = (target: HTMLElement) => {
   return image
 }
 
-const withFileDragImage = (event: DragEvent) => {
+export const withFileDragImage = (event: DragEvent) => {
   const image = buildDragImage(event.currentTarget as HTMLElement)
   if (!image) return
   document.body.appendChild(image)

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

@@ -218,6 +218,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   let scrollRef!: HTMLDivElement
   let slashPopoverRef!: HTMLDivElement
   let restoreEndOnFocus = true
+  let savedCursor: number | null = null
 
   const mirror = { input: false }
   const inset = 56
@@ -590,7 +591,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const restoreFocus = () => {
     requestAnimationFrame(() => {
-      const cursor = prompt.cursor() ?? promptLength(prompt.current())
+      const cursor = savedCursor ?? prompt.cursor() ?? promptLength(prompt.current())
       editorRef.focus()
       setCursorPosition(editorRef, cursor)
       queueScroll()
@@ -627,6 +628,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const isImeComposing = (event: KeyboardEvent) => event.isComposing || composing() || event.keyCode === 229
 
   const handleBlur = () => {
+    savedCursor = currentCursor()
     closePopover()
     setComposing(false)
   }

packages/app/src/components/prompt-input/submission-state.ts

@@ -7,6 +7,7 @@ export function createPromptSubmissionState(input: {
   prompt: Prompt
   context: (ContextItem & { key: string })[]
 }) {
+  const initial = input.target
   let target = input.target
   let cleared: Prompt | undefined
 
@@ -15,6 +16,7 @@ export function createPromptSubmissionState(input: {
     context: input.context,
     target: () => target,
     clear() {
+      if (initial !== target) initial.reset()
       target.reset()
       cleared = target.current()
     },

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

@@ -399,7 +399,7 @@
   overflow: hidden;
   font-size: 13px;
   font-weight: 440;
-  line-height: 1;
+  line-height: 16px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

packages/app/src/components/titlebar-tab-nav.tsx

@@ -28,7 +28,6 @@ export function TabNavItem(props: {
   onClose: () => void
   onNavigate: () => void
   active?: boolean
-  activeServer: boolean
   forceTruncate?: boolean
   suppressNavigation?: () => boolean
   dragging?: boolean
@@ -230,8 +229,17 @@ export function TabNavItem(props: {
             event.preventDefault()
             event.stopPropagation()
           }}
+          onMouseDown={(event) => {
+            // Navigate on mousedown to shave the press-release delay off tab switches.
+            if (event.button !== 0) return
+            if (editing()) return
+            if (props.suppressNavigation?.()) return
+            props.onNavigate()
+          }}
           onClick={(event) => {
             event.preventDefault()
+            // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
+            if (event.detail > 0) return
             if (editing()) return
             if (props.suppressNavigation?.()) return
             props.onNavigate()
@@ -245,7 +253,7 @@ export function TabNavItem(props: {
                   project={project()}
                   directory={session().directory}
                   sessionId={session().id}
-                  activeServer={props.activeServer}
+                  server={props.server}
                 />
               </span>
             )}
@@ -369,8 +377,16 @@ export function DraftTabItem(props: {
           event.preventDefault()
           event.stopPropagation()
         }}
+        onMouseDown={(event) => {
+          // Navigate on mousedown to shave the press-release delay off tab switches.
+          if (event.button !== 0) return
+          if (props.suppressNavigation?.()) return
+          props.onNavigate()
+        }}
         onClick={(event) => {
           event.preventDefault()
+          // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
+          if (event.detail > 0) return
           if (props.suppressNavigation?.()) return
           props.onNavigate()
         }}

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

@@ -3,7 +3,7 @@ import { createSignal, Show, type JSXElement } from "solid-js"
 import "./titlebar-tab-popover.css"
 
 // Initial hover delay before the preview appears, per design.
-const OPEN_DELAY = 200
+const OPEN_DELAY = 400
 // Mouse-out delay: begin closing immediately (a brief exit animation plays).
 const CLOSE_DELAY = 0
 // After a preview closes, hovering a neighbouring tab within this window skips

packages/app/src/components/titlebar-tab-strip.tsx

@@ -24,7 +24,6 @@ function SessionTabSlot(props: {
   id: string
   index: () => number
   active: () => boolean
-  activeServerKey: ServerConnection.Key
   forceTruncate: boolean
   serverCtx: () => ServerCtx | undefined
   onNavigate: (element: HTMLDivElement) => void
@@ -112,7 +111,6 @@ function SessionTabSlot(props: {
         onNavigate={() => props.onNavigate(ref)}
         onClose={props.onClose}
         active={props.active()}
-        activeServer={props.tab.server === props.activeServerKey}
         forceTruncate={props.forceTruncate}
         dragging={sortable.isDragSource()}
       />
@@ -165,7 +163,6 @@ function DraftTabSlot(props: {
 export function TitlebarTabStrip(props: {
   tabs: Tab[]
   currentTab: () => Tab | undefined
-  activeServerKey: ServerConnection.Key
   forceTruncate: boolean
   onNavigate: (tab: Tab, el?: HTMLDivElement) => void
   onClose: (tab: Tab) => void
@@ -271,7 +268,6 @@ export function TitlebarTabStrip(props: {
                       id={id}
                       index={index}
                       active={() => props.currentTab() === tab}
-                      activeServerKey={props.activeServerKey}
                       forceTruncate={props.forceTruncate}
                       serverCtx={serverCtx}
                       onNavigate={(element) => {

packages/app/src/components/titlebar.tsx

@@ -456,7 +456,6 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                 <TitlebarTabStrip
                   tabs={tabsStore}
                   currentTab={currentTab}
-                  activeServerKey={server.key}
                   forceTruncate={tabsAreOverflowing()}
                   onOverflowChange={setTabsAreOverflowing}
                   onNavigate={(tab, el) => {

packages/app/src/context/comments.tsx

@@ -85,7 +85,15 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
     active: null as CommentFocus | null,
   })
 
-  const all = () => aggregate(store.comments)
+  // Reuse the previous array when contents are unchanged so consumers keep a stable
+  // identity; a fresh array per call cascaded into diff annotation re-renders.
+  let lastAll: LineComment[] = []
+  const all = () => {
+    const next = aggregate(store.comments)
+    if (next.length === lastAll.length && next.every((item, index) => item === lastAll[index])) return lastAll
+    lastAll = next
+    return next
+  }
 
   const setRef = (
     key: "focus" | "active",

packages/app/src/context/file/tree-store.ts

@@ -127,10 +127,14 @@ export function createFileTreeStore(options: TreeStoreOptions) {
     return promise
   }
 
-  const expandDir = (input: string) => {
+  // `list: false` marks a directory expanded without fetching its children, for
+  // trees whose nodes are synthesized from a filter; listing directories that
+  // only exist on a diff's base branch fails and surfaces error toasts.
+  const expandDir = (input: string, behavior?: { list?: boolean }) => {
     const dir = options.normalizeDir(input)
     ensureDir(dir)
     setTree("dir", dir, "expanded", true)
+    if (behavior?.list === false) return
     void listDir(dir)
   }
 

packages/app/src/context/global-sync/bootstrap.test.ts

@@ -1,50 +1,55 @@
 import { describe, expect, test } from "bun:test"
 import { createStore } from "solid-js/store"
 import { QueryClient } from "@tanstack/solid-query"
-import type { Config, OpencodeClient, Project } from "@opencode-ai/sdk/v2/client"
+import type { Config, OpencodeClient, Project, Session } from "@opencode-ai/sdk/v2/client"
 import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { bootstrapDirectory, loadPathQuery, loadProvidersQuery } from "./bootstrap"
 import type { State, VcsCache } from "./types"
+import { createServerSession } from "../server-session"
 import { ServerScope } from "@/utils/server-scope"
 
 const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
 
+function directoryState() {
+  return createStore<State>({
+    status: "loading",
+    agent: [],
+    command: [],
+    reference: [],
+    project: "",
+    projectMeta: undefined,
+    icon: undefined,
+    provider_ready: true,
+    provider,
+    config: {},
+    path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+    session: [],
+    sessionTotal: 0,
+    session_status: {},
+    session_working(id: string) {
+      return this.session_status[id]?.type !== "idle"
+    },
+    session_diff: {},
+    todo: {},
+    permission: {},
+    question: {},
+    mcp_ready: true,
+    mcp: {},
+    mcp_resource: {},
+    lsp_ready: true,
+    lsp: [],
+    vcs: undefined,
+    limit: 5,
+    message: {},
+    part: {},
+    part_text_accum_delta: {},
+  })
+}
+
 describe("bootstrapDirectory", () => {
   test("marks a loading directory partial during bootstrap and complete after success", async () => {
     const mcpReads: string[] = []
-    const [store, setStore] = createStore<State>({
-      status: "loading",
-      agent: [],
-      command: [],
-      reference: [],
-      project: "",
-      projectMeta: undefined,
-      icon: undefined,
-      provider_ready: true,
-      provider,
-      config: {},
-      path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
-      session: [],
-      sessionTotal: 0,
-      session_status: {},
-      session_working(id: string) {
-        return this.session_status[id]?.type !== "idle"
-      },
-      session_diff: {},
-      todo: {},
-      permission: {},
-      question: {},
-      mcp_ready: true,
-      mcp: {},
-      mcp_resource: {},
-      lsp_ready: true,
-      lsp: [],
-      vcs: undefined,
-      limit: 5,
-      message: {},
-      part: {},
-      part_text_accum_delta: {},
-    })
+    const [store, setStore] = directoryState()
 
     await bootstrapDirectory({
       directory: "/project",
@@ -93,6 +98,66 @@ describe("bootstrapDirectory", () => {
     expect(store.status).toBe("complete")
     expect(mcpReads).toEqual([])
   })
+
+  test("seeds session status even while warming session info stalls", async () => {
+    const [store, setStore] = directoryState()
+    const stalled = Promise.withResolvers<never>()
+    const client = {
+      app: { agents: async () => ({ data: [{ name: "build", mode: "primary" }] }) },
+      config: { get: async () => ({ data: {} }) },
+      session: {
+        status: async () => ({ data: { ses_busy: { type: "busy" } } }),
+        get: () => stalled.promise,
+      },
+      vcs: { get: async () => ({ data: undefined }) },
+      command: { list: async () => ({ data: [] }) },
+      permission: { list: async () => ({ data: [] }) },
+      question: { list: async () => ({ data: [] }) },
+      v2: { reference: { list: async () => ({ data: { data: [] } }) } },
+      mcp: { status: async () => ({ data: {} }) },
+      provider: { list: async () => ({ data: { all: [], connected: [], default: {} } }) },
+    } as unknown as OpencodeClient
+    const session = createServerSession(client)
+    const stale: Session = {
+      id: "ses_stale",
+      slug: "ses_stale",
+      projectID: "project",
+      directory: "/project",
+      title: "stale",
+      version: "1",
+      time: { created: 1, updated: 1 },
+    }
+    session.remember(stale)
+    session.set("session_status", stale.id, { type: "busy" })
+
+    await bootstrapDirectory({
+      directory: "/project",
+      scope: ServerScope.local,
+      mcp: false,
+      global: {
+        config: {} satisfies Config,
+        path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+        project: [{ id: "project", worktree: "/project" } as Project],
+        provider,
+      },
+      sdk: client,
+      store,
+      setStore,
+      vcsCache: { setStore() {} } as unknown as VcsCache,
+      loadSessions() {},
+      translate: (key) => key,
+      queryClient: new QueryClient(),
+      session,
+    })
+
+    const deadline = Date.now() + 500
+    while (!session.data.session_working("ses_busy") && Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+    }
+
+    expect(session.data.session_status["ses_busy"]?.type).toBe("busy")
+    expect(session.data.session_status[stale.id]).toBeUndefined()
+  })
 })
 
 describe("query keys", () => {

packages/app/src/context/global-sync/bootstrap.ts

@@ -247,25 +247,29 @@ export async function bootstrapDirectory(input: {
       () =>
         retry(() =>
           input.sdk.session.status().then(async (x) => {
-            if (input.session) {
-              const statuses = x.data ?? {}
-              await Promise.all(
-                Object.keys(statuses).map((sessionID) => input.session!.resolve(sessionID).catch(() => undefined)),
-              )
-              input.session.set(
-                "session_status",
-                produce((draft) => {
-                  for (const sessionID of Object.keys(draft)) {
-                    if (statuses[sessionID]) continue
-                    if (input.session?.get(sessionID)?.directory === input.directory) delete draft[sessionID]
-                  }
-                }),
-              )
-              for (const [sessionID, status] of Object.entries(statuses)) {
-                input.session.set("session_status", sessionID, reconcile(status))
-              }
+            if (!input.session) {
+              input.setStore("session_status", x.data!)
+              return
             }
-            if (!input.session) input.setStore("session_status", x.data!)
+            const statuses = x.data ?? {}
+            input.session.set(
+              "session_status",
+              produce((draft) => {
+                for (const sessionID of Object.keys(draft)) {
+                  if (statuses[sessionID]) continue
+                  if (input.session?.get(sessionID)?.directory === input.directory) delete draft[sessionID]
+                }
+              }),
+            )
+            for (const [sessionID, status] of Object.entries(statuses)) {
+              input.session.set("session_status", sessionID, reconcile(status))
+            }
+            // Warm session info only after seeding statuses so a stalled session
+            // fetch cannot park busy indicators behind it, mirroring how live
+            // session.status events apply first and resolve info in the background.
+            await Promise.all(
+              Object.keys(statuses).map((sessionID) => input.session!.resolve(sessionID).catch(() => undefined)),
+            )
           }),
         ),
       !seededProject &&

packages/app/src/context/global.tsx

@@ -1,7 +1,8 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createEffect, createMemo, createRoot } from "solid-js"
 import { createStore } from "solid-js/store"
-import { createServerProjects, ServerConnection, useServer } from "./server"
+import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server"
+import { pathKey } from "@/utils/path-key"
 import { useServerHealth } from "@/utils/server-health"
 import { createServerSdkContext } from "./server-sdk"
 import { createServerSyncContext } from "./server-sync"
@@ -127,6 +128,14 @@ function createServerCtx(
   }
 
   const projectsList = createMemo(() => projects.list().map(enrich))
+  const recentlyClosedList = createMemo(() => {
+    const known = new Set(sync.data.project.map((project) => pathKey(project.worktree)))
+    return projects
+      .recentlyClosed()
+      .filter((worktree) => known.has(pathKey(worktree)))
+      .slice(0, RECENTLY_CLOSED_DISPLAY_LIMIT)
+      .map((worktree) => enrich({ worktree, expanded: false }))
+  })
 
   const isLocal =
     (conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url))
@@ -139,6 +148,7 @@ function createServerCtx(
     projects: {
       ...projects,
       list: projectsList,
+      recentlyClosed: recentlyClosedList,
     },
   }
 }

packages/app/src/context/layout.tsx

@@ -5,10 +5,11 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useServerSync } from "./server-sync"
 import { useServerSDK } from "./server-sdk"
-import { ServerConnection, useServer } from "./server"
+import { RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServer } from "./server"
 import { usePlatform } from "./platform"
 import { Project } from "@opencode-ai/sdk/v2"
 import { Persist, persisted, removePersisted } from "@/utils/persist"
+import { pathKey } from "@/utils/path-key"
 import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
@@ -493,7 +494,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           const root = rootFor(project.worktree)
           if (root === project.worktree) continue
 
-          server.projects.close(project.worktree)
+          server.projects.remove(project.worktree)
 
           if (!seen.has(root)) {
             server.projects.open(root)
@@ -613,6 +614,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       },
       projects: {
         list,
+        recentlyClosed: createMemo(() => {
+          const known = new Set(serverSync().data.project.map((project) => pathKey(project.worktree)))
+          return server.projects
+            .recentlyClosed()
+            .filter((worktree) => known.has(pathKey(worktree)))
+            .slice(0, RECENTLY_CLOSED_DISPLAY_LIMIT)
+            .map((worktree) => enrich({ worktree, expanded: false }))
+        }),
         open(directory: string) {
           const root = rootFor(directory)
           if (server.projects.list().find((x) => x.worktree === root)) return

packages/app/src/context/server-session.ts

@@ -14,6 +14,7 @@ import type {
 import { batch } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { diffs as cleanDiffs, message as cleanMessage } from "@/utils/diffs"
+import { sessionNotFoundError } from "@/utils/server-errors"
 import { rootSession } from "@/utils/session-route"
 import { dropSessionCaches, pickSessionCacheEvictions, SESSION_CACHE_LIMIT } from "./global-sync/session-cache"
 
@@ -235,7 +236,7 @@ export function createServerSession(client: OpencodeClient, options?: { retry?:
     if (pending) return pending
     const active = generation(sessionID)
     const request = client.session.get({ sessionID }).then((result) => {
-      if (!result.data) throw new Error(`Session not found: ${sessionID}`)
+      if (!result.data) throw sessionNotFoundError(sessionID)
       if (generations.get(sessionID) !== active) return result.data
       return remember(result.data)
     })

packages/app/src/context/server.test.ts

@@ -99,7 +99,7 @@ describe("createServerProjects", () => {
   test("keeps active and explicit server buckets in one reactive store", () => {
     createRoot((dispose) => {
       const [scope] = createSignal(ServerScope.local)
-      const [store, setStore] = createStore({ projects: {}, lastProject: {} })
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
       const active = createServerProjects({ scope, store, setStore })
       const remote = createServerProjects({ scope: () => "https://debian.example" as ServerScope, store, setStore })
 
@@ -115,6 +115,88 @@ describe("createServerProjects", () => {
       dispose()
     })
   })
+
+  test("tracks recently closed projects and drops them when reopened", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.open("/a")
+      projects.open("/b")
+      projects.close("/a")
+      expect(projects.recentlyClosed()).toEqual(["/a"])
+
+      projects.close("/b")
+      expect(projects.recentlyClosed()).toEqual(["/b", "/a"])
+
+      projects.open("/a")
+      expect(projects.recentlyClosed()).toEqual(["/b"])
+      expect(projects.list()).toEqual([{ worktree: "/a", expanded: true }])
+      dispose()
+    })
+  })
+
+  test("remove drops a project without recording it as recently closed", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.open("/repo/subdir")
+      projects.remove("/repo/subdir")
+      expect(projects.list()).toEqual([])
+      expect(projects.recentlyClosed()).toEqual([])
+      dispose()
+    })
+  })
+
+  test("retains recently closed history beyond the visible display limit", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      // Closing 6 projects keeps all 6 in the store even though only 5 are displayed;
+      // this prevents display-filtered entries from evicting still-visible ones.
+      for (const dir of ["/1", "/2", "/3", "/4", "/5", "/6"]) {
+        projects.open(dir)
+        projects.close(dir)
+      }
+      expect(projects.recentlyClosed()).toEqual(["/6", "/5", "/4", "/3", "/2", "/1"])
+      dispose()
+    })
+  })
+
+  test("caps recently closed history at the store limit", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      for (let i = 1; i <= 20; i++) {
+        projects.open(`/p${i}`)
+        projects.close(`/p${i}`)
+      }
+      expect(projects.recentlyClosed()).toHaveLength(16)
+      expect(projects.recentlyClosed()[0]).toBe("/p20")
+      expect(projects.recentlyClosed().at(-1)).toBe("/p5")
+      dispose()
+    })
+  })
+
+  test("dedupes recently closed entries by normalized path", () => {
+    createRoot((dispose) => {
+      const [scope] = createSignal(ServerScope.local)
+      const [store, setStore] = createStore({ projects: {}, lastProject: {}, recentlyClosed: {} })
+      const projects = createServerProjects({ scope, store, setStore })
+
+      projects.close("/repo")
+      projects.close("/repo/")
+      expect(projects.recentlyClosed()).toEqual(["/repo/"])
+      dispose()
+    })
+  })
 })
 
 describe("migrateCanonicalLocalServerState", () => {

packages/app/src/context/server.tsx

@@ -2,12 +2,23 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { type Accessor, batch, createMemo } from "solid-js"
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
+import { pathKey } from "@/utils/path-key"
 import { ServerScope } from "@/utils/server-scope"
 
 type StoredProject = { worktree: string; expanded: boolean }
 type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
-type ServerProjectState = { projects: Record<string, StoredProject[]>; lastProject: Record<string, string> }
+type ServerProjectState = {
+  projects: Record<string, StoredProject[]>
+  lastProject: Record<string, string>
+  recentlyClosed: Record<string, string[]>
+}
 const HEALTH_POLL_INTERVAL_MS = 10_000
+// The store retains more history than is displayed. Consumers filter recently closed entries
+// against the live project list (dropping deleted projects) and then cap the visible count via
+// RECENTLY_CLOSED_DISPLAY_LIMIT. Retaining extra history ensures entries that are temporarily
+// filtered out do not evict still-visible ones from the persisted store.
+const RECENTLY_CLOSED_HISTORY_LIMIT = 16
+export const RECENTLY_CLOSED_DISPLAY_LIMIT = 5
 
 export function normalizeServerUrl(input: string) {
   const trimmed = input.trim()
@@ -72,19 +83,42 @@ export function createServerProjects<T extends ServerProjectState>(input: {
 }) {
   const setStore = input.setStore as unknown as SetStoreFunction<ServerProjectState>
   const current = () => input.store.projects[input.scope()] ?? []
+  const currentClosed = () => input.store.recentlyClosed?.[input.scope()] ?? []
+  const remove = (directory: string) => {
+    setStore(
+      "projects",
+      input.scope(),
+      current().filter((project) => project.worktree !== directory),
+    )
+  }
   return {
     list: current,
+    recentlyClosed: currentClosed,
+    remove,
     open(directory: string) {
       const scope = input.scope()
+      const key = pathKey(directory)
+      const closed = currentClosed()
+      if (closed.some((worktree) => pathKey(worktree) === key)) {
+        setStore(
+          "recentlyClosed",
+          scope,
+          closed.filter((worktree) => pathKey(worktree) !== key),
+        )
+      }
       if (current().some((project) => project.worktree === directory)) return
       setStore("projects", scope, [{ worktree: directory, expanded: true }, ...current()])
     },
+    // User-initiated close: removes the project and records it in recently closed.
+    // Internal, non-user removals (e.g. sandbox/worktree normalization) should use remove().
     close(directory: string) {
-      setStore(
-        "projects",
-        input.scope(),
-        current().filter((project) => project.worktree !== directory),
+      remove(directory)
+      const key = pathKey(directory)
+      const closed = [directory, ...currentClosed().filter((worktree) => pathKey(worktree) !== key)].slice(
+        0,
+        RECENTLY_CLOSED_HISTORY_LIMIT,
       )
+      setStore("recentlyClosed", input.scope(), closed)
     },
     expand(directory: string) {
       const index = current().findIndex((project) => project.worktree === directory)
@@ -235,6 +269,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
         list: [] as StoredServer[],
         projects: {} as Record<string, StoredProject[]>,
         lastProject: {} as Record<string, string>,
+        recentlyClosed: {} as Record<string, string[]>,
       }),
     )
 

packages/app/src/i18n/en.ts

@@ -604,6 +604,7 @@ export const dict = {
   "home.title": "Home",
   "home.projects": "Projects",
   "home.project.add": "Add project",
+  "home.recentlyClosed": "Recently closed",
   "home.server.collapse": "Collapse server projects",
   "home.server.expand": "Expand server projects",
   "home.sessions.search.placeholder": "Search sessions",

packages/app/src/pages/home.tsx

@@ -270,6 +270,10 @@ export function NewHome() {
   })
   const focusedSync = () => focusedServerCtx()?.sync ?? sync()
   const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list())
+  const recentlyClosed = createMemo(
+    () => focusedServerCtx()?.projects.recentlyClosed() ?? layout.projects.recentlyClosed(),
+  )
+  const homedir = createMemo(() => focusedSync().data.path.home ?? "")
   const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory))
   const newSessionProject = createMemo(
     () =>
@@ -518,10 +522,13 @@ export function NewHome() {
       <div class="mx-auto grid h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)_auto] gap-4 px-3 lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6">
         <HomeProjectColumn
           projects={projects()}
+          recentlyClosed={recentlyClosed()}
+          homedir={homedir()}
           selected={selection()}
           focusServer={focusServer}
           selectProject={selectProject}
           openNewSession={openProjectNewSession}
+          openRecentProject={(conn, directory) => addProjects(conn, [directory])}
           chooseProject={(conn) => void chooseProject(conn)}
           editProject={editProject}
           closeProject={(conn, directory) => {
@@ -552,7 +559,6 @@ export function NewHome() {
             results={searchResults()}
             showProjectName={!selectedProject()}
             server={selection().server}
-            activeServer={selection().server === server.key}
             noResultsLabel={language.t("home.sessions.search.noResults", { query: search() })}
             bindFocus={(focus) => {
               focusSessionSearch = focus
@@ -612,7 +618,6 @@ export function NewHome() {
                                 record={record}
                                 showProjectName={!selectedProject()}
                                 server={selection().server}
-                                activeServer={selection().server === server.key}
                                 openSession={openSession}
                                 archiveSession={archiveSession}
                               />
@@ -640,10 +645,13 @@ export function NewHome() {
 
 function HomeProjectColumn(props: {
   projects: LocalProject[]
+  recentlyClosed: LocalProject[]
+  homedir: string
   selected: HomeProjectSelection
   focusServer: (server: ServerConnection.Any) => void
   selectProject: (server: ServerConnection.Any, directory: string) => void
   openNewSession: (server: ServerConnection.Any, directory: string) => void
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
   chooseProject: (server: ServerConnection.Any) => void
   editProject: (server: ServerConnection.Any, project: LocalProject) => void
   closeProject: (server: ServerConnection.Any, directory: string) => void
@@ -672,8 +680,10 @@ function HomeProjectColumn(props: {
       aria-label={props.language.t("home.projects")}
     >
       <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
-        <div class={HOME_SECTION_LABEL}>{props.language.t("home.projects")}</div>
-        <Show when={global.servers.list().length === 1}>
+        <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
+        <Show
+          when={global.servers.list().length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}
+        >
           <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
             <IconButtonV2
               data-action="home-add-project"
@@ -693,7 +703,21 @@ function HomeProjectColumn(props: {
           when={global.servers.list().length > 1}
           fallback={
             <div class="pr-3">
-              <HomeProjectList {...props} server={global.servers.list()[0]!} />
+              <Show
+                when={props.projects.length > 0}
+                fallback={
+                  <HomeProjectEmpty
+                    server={global.servers.list()[0]!}
+                    recentlyClosed={props.recentlyClosed}
+                    homedir={props.homedir}
+                    chooseProject={props.chooseProject}
+                    openRecentProject={props.openRecentProject}
+                    language={props.language}
+                  />
+                }
+              >
+                <HomeProjectList {...props} server={global.servers.list()[0]!} />
+              </Show>
             </div>
           }
         >
@@ -899,6 +923,79 @@ function HomeProjectList(props: {
   )
 }
 
+function HomeProjectEmpty(props: {
+  server: ServerConnection.Any
+  recentlyClosed: LocalProject[]
+  homedir: string
+  chooseProject: (server: ServerConnection.Any) => void
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  return (
+    <div class="flex min-w-0 flex-col gap-1">
+      <button
+        type="button"
+        data-action="home-add-project-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        disabled={unreachable()}
+        onClick={() => props.chooseProject(props.server)}
+      >
+        <IconV2 name="folder-add-left" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
+      </button>
+      <Show when={props.recentlyClosed.length > 0}>
+        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
+          <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
+        </div>
+        <For each={props.recentlyClosed}>
+          {(project) => (
+            <HomeRecentlyClosedRow
+              project={project}
+              server={props.server}
+              homedir={props.homedir}
+              openRecentProject={props.openRecentProject}
+              language={props.language}
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  )
+}
+
+function HomeRecentlyClosedRow(props: {
+  project: LocalProject
+  server: ServerConnection.Any
+  homedir: string
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  const path = () => {
+    const home = props.homedir
+    const worktree = props.project.worktree
+    if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
+    return worktree
+  }
+  return (
+    <TooltipV2 placement="right" value={path()}>
+      <button
+        type="button"
+        data-component="home-recently-closed-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
+        disabled={unreachable()}
+        onClick={() => props.openRecentProject(props.server, props.project.worktree)}
+      >
+        <HomeProjectAvatar project={props.project} outline />
+        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
+      </button>
+    </TooltipV2>
+  )
+}
+
 function HomeProjectRow(props: {
   project: LocalProject
   server: ServerConnection.Any
@@ -981,13 +1078,13 @@ function HomeProjectRow(props: {
   )
 }
 
-function HomeProjectAvatar(props: { project: LocalProject }) {
+function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
   const name = createMemo(() => displayName(props.project))
   return (
     <ProjectAvatar
       fallback={name()}
-      src={getProjectAvatarSource(props.project.id, props.project.icon)}
-      variant={getProjectAvatarVariant(props.project.icon?.color)}
+      src={props.outline ? undefined : getProjectAvatarSource(props.project.id, props.project.icon)}
+      variant={props.outline ? "outline" : getProjectAvatarVariant(props.project.icon?.color)}
     />
   )
 }
@@ -996,7 +1093,6 @@ function HomeSessionLeading(props: {
   project: LocalProject
   session: Session
   server: ServerConnection.Key
-  activeServer: boolean
   revealProjectOnHover: boolean
 }) {
   const tabs = useTabs()
@@ -1014,7 +1110,7 @@ function HomeSessionLeading(props: {
         project={props.project}
         directory={props.session.directory}
         sessionId={props.session.id}
-        activeServer={props.activeServer}
+        server={props.server}
         revealProjectOnHover={props.revealProjectOnHover}
       />
     </div>
@@ -1029,7 +1125,6 @@ function HomeSessionSearch(props: {
   results: HomeSessionRecord[]
   showProjectName: boolean
   server: ServerConnection.Key
-  activeServer: boolean
   noResultsLabel: string
   bindFocus: (focus: () => void) => void
   onInput: (value: string) => void
@@ -1147,7 +1242,6 @@ function HomeSessionSearch(props: {
                                 record={record}
                                 showProjectName={props.showProjectName}
                                 server={props.server}
-                                activeServer={props.activeServer}
                                 selected={store.active === homeSessionSearchKey(record)}
                                 onHighlight={() => setStore("active", homeSessionSearchKey(record))}
                                 onSelect={(session) => props.onSelect(session)}
@@ -1228,7 +1322,6 @@ function HomeSessionSearchResultRow(props: {
   record: HomeSessionRecord
   showProjectName: boolean
   server: ServerConnection.Key
-  activeServer: boolean
   selected: boolean
   onHighlight: () => void
   onSelect: (session: Session) => void
@@ -1258,7 +1351,6 @@ function HomeSessionSearchResultRow(props: {
         project={props.record.project}
         session={props.record.session}
         server={props.server}
-        activeServer={props.activeServer}
         revealProjectOnHover={!!showProjectName()}
       />
       <div class="flex min-w-0 flex-1 items-center gap-1.5">
@@ -1297,7 +1389,6 @@ function HomeSessionRow(props: {
   record: HomeSessionRecord
   showProjectName: boolean
   server: ServerConnection.Key
-  activeServer: boolean
   openSession: (session: Session) => void
   archiveSession: (session: Session) => Promise<void>
 }) {
@@ -1320,7 +1411,6 @@ function HomeSessionRow(props: {
           project={props.record.project}
           session={props.record.session}
           server={props.server}
-          activeServer={props.activeServer}
           revealProjectOnHover={!!showProjectName()}
         />
         <span

packages/app/src/pages/layout/project-avatar-state.ts

@@ -1,29 +1,41 @@
 import { createMemo, type Accessor } from "solid-js"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobal } from "@/context/global"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
+import { ServerConnection } from "@/context/server"
 import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
 
 export function useSessionTabAvatarState(
+  server: Accessor<ServerConnection.Key>,
   directory: Accessor<string>,
   sessionId: Accessor<string>,
-  active: Accessor<boolean> = () => true,
 ) {
-  const globalSync = useServerSync()
+  const global = useGlobal()
   const notification = useNotification()
   const permission = usePermission()
+  const connection = createMemo(() => global.servers.list().find((item) => ServerConnection.key(item) === server()))
+  const sync = createMemo(() => {
+    const conn = connection()
+    if (conn) return global.ensureServerCtx(conn).sync
+  })
   const hasPermissions = createMemo(() => {
-    if (!active()) return false
-    const [store] = globalSync().child(directory(), { bootstrap: false })
-    return !!sessionPermissionRequest(store.session, globalSync().session.data.permission, sessionId(), (item) => {
+    const serverSync = sync()
+    if (!serverSync) return false
+    const [store] = serverSync.child(directory(), { bootstrap: false })
+    return !!sessionPermissionRequest(store.session, serverSync.session.data.permission, sessionId(), (item) => {
       return !permission.autoResponds(item, directory())
     })
   })
-  const unread = createMemo(() => active() && (hasPermissions() || notification.session.unseenCount(sessionId()) > 0))
+  const unread = createMemo(() => {
+    if (hasPermissions()) return true
+    if (!connection()) return false
+    return notification.ensureServerState(server()).session.unseenCount(sessionId()) > 0
+  })
   const loading = createMemo(() => {
-    if (!active()) return false
+    const serverSync = sync()
+    if (!serverSync) return false
     if (hasPermissions()) return false
-    return globalSync().session.data.session_working(sessionId())
+    return serverSync.session.data.session_working(sessionId())
   })
   return { unread, loading }
 }

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

@@ -1,5 +1,6 @@
 import type { LocalProject } from "@/context/layout"
 import { getProjectAvatarVariant } from "@/context/layout"
+import type { ServerConnection } from "@/context/server"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
@@ -10,12 +11,14 @@ export function SessionTabAvatar(props: {
   project?: LocalProject
   directory: string
   sessionId: string
-  activeServer: boolean
+  server: ServerConnection.Key
   revealProjectOnHover?: boolean
 }) {
-  const directory = () => props.directory
-  const sessionId = () => props.sessionId
-  const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
+  const state = useSessionTabAvatarState(
+    () => props.server,
+    () => props.directory,
+    () => props.sessionId,
+  )
   const projectAvatar = () => (
     <ProjectAvatar
       fallback={displayName(props.project ?? { worktree: props.directory })}

packages/app/src/pages/session.tsx

@@ -11,7 +11,6 @@ import {
   createMemo,
   createEffect,
   createComputed,
-  createSignal,
   on,
   onMount,
   type ParentProps,
@@ -24,8 +23,10 @@ import { debounce } from "@solid-primitives/scheduled"
 import { useLocal } from "@/context/local"
 import { FileProvider, selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { createStore } from "solid-js/store"
+import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
@@ -77,6 +78,10 @@ import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
+import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-review-empty-changes-v2"
+import { SessionReviewEmptyNoGitV2 } from "@opencode-ai/session-ui/v2/session-review-empty-no-git-v2"
+import { ReviewPanelV2 } from "@/pages/session/v2/review-panel-v2"
+import { createReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useComposerCommands } from "@/pages/session/use-composer-commands"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
@@ -85,10 +90,11 @@ import { Identifier } from "@/utils/id"
 import { diffs as list } from "@/utils/diffs"
 import { Persist, persisted } from "@/utils/persist"
 import { extractPromptFromParts } from "@/utils/prompt"
-import { formatServerError, isSessionNotFoundError } from "@/utils/server-errors"
+import { formatServerError, isLocalSessionNotFoundError, isSessionNotFoundError } from "@/utils/server-errors"
 import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
 import { useUsageExceededDialogs } from "./session/usage-exceeded-dialogs"
 import { createSessionOwnership } from "./session/session-ownership"
+import { createSessionLineage } from "./session/session-lineage"
 
 type FollowupItem = FollowupDraft & { id: string }
 type FollowupEdit = Pick<FollowupItem, "id" | "prompt" | "context">
@@ -103,10 +109,6 @@ const sessionViewState = () => ({
   changes: "git" as ChangeMode,
 })
 
-function isLocalSessionNotFoundError(error: unknown, sessionID: string) {
-  return error instanceof Error && error.message === `Session not found: ${sessionID}`
-}
-
 function isCurrentSessionNotFoundError(error: unknown, sessionID: string | undefined) {
   if (!sessionID) return false
   return isSessionNotFoundError(error, sessionID) || isLocalSessionNotFoundError(error, sessionID)
@@ -143,14 +145,16 @@ export function SessionPage() {
   )
 }
 
-export function TargetSessionRoute() {
+// Rendered under app.tsx's TargetSessionRoute, which owns the per-server keyed
+// remount around the server-scoped providers. Nothing here may key on the
+// session ID: session tabs on the same server share this route instance, and
+// workspace-scoped state (terminal, directory providers) lives below.
+export function TargetSessionRouteContent() {
   const params = useParams<{ serverKey: string; id: string }>()
   return (
-    <Show when={`${params.serverKey}\0${params.id}`} keyed>
-      <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
-        <ResolvedTargetSessionRoute />
-      </SessionRouteErrorBoundary>
-    </Show>
+    <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
+      <ResolvedTargetSessionRoute />
+    </SessionRouteErrorBoundary>
   )
 }
 
@@ -224,8 +228,12 @@ function ResolvedTargetSessionRoute() {
   const params = useParams<{ serverKey: string; id: string }>()
   const settings = useSettings()
   const tabs = useTabs()
+  const sync = useServerSync()
   const serverKey = createMemo(() => requireServerKey(params.serverKey))
-  const current = createSessionLineage(() => params.id)
+  const current = createSessionLineage(
+    () => params.id,
+    () => sync().session.lineage,
+  )
   const directory = createMemo(() => current()?.session.directory)
   const targetDirectory = () => directory()!
 
@@ -240,6 +248,10 @@ function ResolvedTargetSessionRoute() {
 
   return (
     <TargetServerScopedProviders directory={directory} sessionID={() => params.id}>
+      {/* Non-keyed: closes only while the target's directory is unknown (uncached
+          lineage mid-resolution), which tears down the workspace subtree including
+          the terminal. Same-workspace tab switches keep it open because warm
+          targets resolve synchronously from the sync cache. */}
       <Show when={directory()}>
         <Show
           when={settings.general.newLayoutDesigns()}
@@ -256,42 +268,9 @@ function ResolvedTargetSessionRoute() {
   )
 }
 
-// Reactive session lineage for the target session route, read from the sync store.
-// The route keys its consumer to the session ID, so resolution runs once per target.
-// Resolution is imperative rather than a resource on purpose: a resource created here
-// would be created inside the router's navigation transition, and suspending that
-// transition deadlocks the URL commit and double-mounts the session header portals
-// from the transition's shadow render. `lineage.resolve` fills the sync store, which
-// the returned accessor observes; resolve failures rethrow on read so the enclosing
-// SessionRouteErrorBoundary renders the scoped session error.
-function createSessionLineage(sessionID: () => string) {
-  const sync = useServerSync()
-  const cached = createMemo(() => sync().session.lineage.peek(sessionID()))
-  const [failure, setFailure] = createSignal<unknown>()
-  const [settled, setSettled] = createSignal(false)
-  onMount(() => {
-    if (cached()) {
-      setSettled(true)
-      return
-    }
-    sync()
-      .session.lineage.resolve(sessionID())
-      .then(() => setSettled(true))
-      .catch((error) => setFailure(() => error))
-  })
-  return createMemo(() => {
-    const error = failure()
-    if (error) throw error
-    const lineage = cached()
-    // The viewed session is pinned and pinned lineages are exempt from cache pruning,
-    // so a lineage missing after settlement means the session (or an ancestor) was
-    // deleted, possibly by another client. Match the resolve error so the boundary
-    // shows the session not found fallback.
-    if (!lineage && settled()) throw new Error(`Session not found: ${sessionID()}`)
-    return lineage
-  })
-}
-
+// Owns the workspace-identity remount. Must not include the session ID in the
+// key: SessionPage handles session changes reactively, and remounting here
+// destroys workspace-scoped state (terminal PTYs, file/prompt providers).
 function TargetSessionPage() {
   const sdk = useSDK()
   const serverSDK = useServerSDK()
@@ -413,6 +392,7 @@ export default function Page() {
   })
 
   const workspaceTabs = createMemo(() => layout.tabs(workspaceKey))
+  const sessionPanelKey = createMemo(() => (params.id ? `${serverSDK().scope}\0${params.id}` : undefined))
 
   createEffect(
     on(
@@ -1052,22 +1032,22 @@ export default function Page() {
     loadFile: file.load,
   })
 
+  const changesLabel = (option: ChangeMode) => {
+    if (option === "git") return language.t("ui.sessionReview.title.git")
+    if (option === "branch") return language.t("ui.sessionReview.title.branch")
+    return language.t("ui.sessionReview.title.lastTurn")
+  }
+
   const changesTitle = () => {
     if (!canReview()) {
       return null
     }
 
-    const label = (option: ChangeMode) => {
-      if (option === "git") return language.t("ui.sessionReview.title.git")
-      if (option === "branch") return language.t("ui.sessionReview.title.branch")
-      return language.t("ui.sessionReview.title.lastTurn")
-    }
-
     return (
       <Select
         options={changesOptions()}
         current={store.changes}
-        label={label}
+        label={changesLabel}
         onSelect={(option) => option && setStore("changes", option)}
         variant="ghost"
         size="small"
@@ -1076,6 +1056,24 @@ export default function Page() {
     )
   }
 
+  const changesTitleV2 = () => {
+    if (!canReview()) {
+      return null
+    }
+
+    return (
+      <SelectV2
+        appearance="inline"
+        options={changesOptions()}
+        current={store.changes}
+        label={changesLabel}
+        placement="bottom-start"
+        gutter={6}
+        onSelect={(option) => option && setStore("changes", option)}
+      />
+    )
+  }
+
   const empty = (text: string) => (
     <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
       <div class="text-14-regular text-text-weak max-w-56">{text}</div>
@@ -1122,6 +1120,16 @@ export default function Page() {
     )
   }
 
+  const reviewEmptyV2 = () => {
+    if ((store.changes === "git" || store.changes === "branch") && !reviewReady()) {
+      return <div class="px-6 py-4 text-text-weak">{language.t("session.review.loadingChanges")}</div>
+    }
+    if (store.changes === "turn" && nogit()) {
+      return <SessionReviewEmptyNoGitV2 pending={gitMutation.isPending} onInitGit={initGit} />
+    }
+    return <SessionReviewEmptyChangesV2 />
+  }
+
   const reviewContent = (input: {
     diffStyle: DiffStyle
     onDiffStyleChange?: (style: DiffStyle) => void
@@ -1155,6 +1163,66 @@ export default function Page() {
     </Show>
   )
 
+  const reviewV2State = createReviewPanelV2State()
+
+  // Getters defer reactive reads to the consuming scope. Eager reads here ran inside
+  // the side panel's Show children and remounted the whole review panel on unrelated
+  // updates such as session switches.
+  const reviewPanelV2Props = () => ({
+    get title() {
+      return changesTitleV2()
+    },
+    get empty() {
+      return reviewEmptyV2()
+    },
+    diffs: reviewDiffs,
+    diffsReady: reviewReady,
+    get activeFile() {
+      return tree.activeDiff
+    },
+    onSelectFile: focusReviewDiff,
+    get diffStyle() {
+      return layout.review.diffStyle()
+    },
+    onDiffStyleChange: layout.review.setDiffStyle,
+    state: reviewV2State,
+    onLineComment: (comment: SessionReviewLineComment) => addCommentToContext({ ...comment, origin: "review" }),
+    onLineCommentUpdate: updateCommentInContext,
+    onLineCommentDelete: removeCommentFromContext,
+    get lineCommentActions() {
+      return reviewCommentActions()
+    },
+    get comments() {
+      return comments.all()
+    },
+    get focusedComment() {
+      return comments.focus()
+    },
+    onFocusedCommentChange: (focus: { file: string; id: string } | null) => {
+      // The preview clears the focus once it has opened the comment; persist the
+      // focused file as the active selection so the preview stays on it. Skip
+      // files outside the current diff set (their focus is cleared unhandled).
+      if (!focus) {
+        const current = comments.focus()
+        if (current && reviewDiffs().some((diff) => diff.file === current.file)) focusReviewDiff(current.file)
+      }
+      comments.setFocus(focus)
+    },
+  })
+
+  // Latch: defer only the first diff render off the mount critical path. This Page
+  // stays mounted across same-workspace session tab switches, so gating on every
+  // deferRender flip tore down and remounted the whole review pane on tab switch.
+  const reviewPanelV2Rendered = createMemo<boolean>((prev) => prev || !store.deferRender, false)
+
+  const reviewPanelV2 = () => (
+    <div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
+      <Show when={reviewPanelV2Rendered()}>
+        <ReviewPanelV2 {...reviewPanelV2Props()} />
+      </Show>
+    </div>
+  )
+
   const reviewPanel = () => (
     <div
       classList={{
@@ -2044,13 +2112,19 @@ export default function Page() {
             width: sessionPanelWidth(),
           }}
         >
-          <SessionPanelFrame newLayout={settings.general.newLayoutDesigns()} raised={!!params.id}>
-            {settings.general.newLayoutDesigns() ? (
-              <ErrorBoundary fallback={sessionErrorFallback}>{sessionPanelContent()}</ErrorBoundary>
-            ) : (
-              sessionPanelContent()
-            )}
-          </SessionPanelFrame>
+          {settings.general.newLayoutDesigns() ? (
+            <Show when={sessionPanelKey()} keyed>
+              {(_) => (
+                <SessionPanelFrame newLayout raised={!!params.id}>
+                  <ErrorBoundary fallback={sessionErrorFallback}>{sessionPanelContent()}</ErrorBoundary>
+                </SessionPanelFrame>
+              )}
+            </Show>
+          ) : (
+            <SessionPanelFrame newLayout={false} raised={!!params.id}>
+              {sessionPanelContent()}
+            </SessionPanelFrame>
+          )}
 
           <Show when={desktopReviewOpen()}>
             <div onPointerDown={() => size.start()}>
@@ -2078,7 +2152,7 @@ export default function Page() {
           empty={reviewEmptyText}
           hasReview={hasReview}
           reviewCount={reviewCount}
-          reviewPanel={reviewPanel}
+          reviewPanel={() => (newSessionDesign() ? reviewPanelV2() : reviewPanel())}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}
           reviewSnap={ui.reviewSnap}

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

@@ -0,0 +1,69 @@
+import { createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
+import { sessionNotFoundError } from "@/utils/server-errors"
+
+type LineageStore<T> = { peek: (id: string) => T | undefined; resolve: (id: string) => Promise<unknown> }
+
+type Resolution<T> = { id: string; store: LineageStore<T> } & (
+  | { state: "pending" }
+  | { state: "settled" }
+  | { state: "failed"; failure: unknown }
+)
+
+// Reactive session lineage for the target session route, read from the sync store.
+// All session tabs on a server share one route instance, so the target session ID
+// changes in place; the effect is only a trigger that starts resolution for the
+// current target, and each run cancels the previous one through onCleanup so a
+// late result from an abandoned target is dropped. Resolution is imperative rather
+// than a resource on purpose: a resource created here would be created inside the
+// router's navigation transition, and suspending that transition deadlocks the URL
+// commit and double-mounts the session header portals from the transition's shadow
+// render.
+//
+// The returned accessor is a pure derivation. The sync cache is authoritative, and
+// status only applies while it matches the current target (store + session ID): on
+// navigation or store replacement the memo re-evaluates before the trigger runs,
+// so trusting a previous target's settlement would fabricate a not-found for a
+// session that simply has not resolved yet. Resolve failures rethrow on read so
+// the enclosing SessionRouteErrorBoundary renders the scoped session error.
+export function createSessionLineage<T>(sessionID: () => string, lineage: () => LineageStore<T>) {
+  const cached = createMemo(() => lineage().peek(sessionID()))
+  const [status, setStatus] = createSignal<Resolution<T>>()
+
+  createEffect(
+    on([sessionID, lineage] as const, ([id, store]) => {
+      let stale = false
+      onCleanup(() => {
+        stale = true
+      })
+      if (cached()) {
+        setStatus({ id, store, state: "settled" })
+        return
+      }
+      setStatus({ id, store, state: "pending" })
+      store
+        .resolve(id)
+        .then(() => {
+          if (!stale) setStatus({ id, store, state: "settled" })
+        })
+        .catch((failure) => {
+          if (!stale) setStatus({ id, store, state: "failed", failure })
+        })
+    }),
+  )
+
+  return createMemo(() => {
+    const id = sessionID()
+    const value = cached()
+    if (value) return value
+    const state = status()
+    if (state?.id !== id || state.store !== lineage()) return undefined
+    if (state.state === "failed") throw state.failure
+    // The viewed session is pinned (DirectoryDataProvider, directory-layout.tsx)
+    // and pinned lineages are exempt from cache pruning, so a lineage missing
+    // after settlement means the session (or an ancestor) was deleted, possibly
+    // by another client. Match the resolve error so the boundary shows the
+    // session not found fallback.
+    if (state.state === "settled") throw sessionNotFoundError(id)
+    return undefined
+  })
+}

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

@@ -1393,14 +1393,14 @@ export function MessageTimeline(props: {
                     <button
                       type="button"
                       data-slot="session-title-parent"
-                      class="min-w-0 max-w-[40%] truncate px-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
+                      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}
                     >
                       {parentTitle()}
                     </button>
                     <span
                       data-slot="session-title-separator"
-                      class="-translate-y-[0.5px] px-1 text-[11px] font-medium text-v2-text-text-faint"
+                      class="-translate-y-[0.5px] pl-2 pr-1 text-[11px] font-medium text-v2-text-text-faint"
                       aria-hidden="true"
                     >
                       /

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

@@ -3,6 +3,7 @@ import { useLanguage } from "@/context/language"
 import { useLocal } from "@/context/local"
 import { useSettings } from "@/context/settings"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { getCursorPosition, setCursorPosition } from "@/components/prompt-input/editor-dom"
 import { useSessionLayout } from "./session-layout"
 import { createSessionOwnership } from "./session-ownership"
 
@@ -26,9 +27,23 @@ export const useComposerCommands = () => {
 
   const chooseModel = async () => {
     const owner = sessionOwnership.capture()
+    const editor = document.querySelector<HTMLElement>('[data-component="prompt-input"]')
+    const selection = window.getSelection()
+    const cursor =
+      editor && selection?.rangeCount && editor.contains(selection.anchorNode) ? getCursorPosition(editor) : null
+    const restoreComposer = () => {
+      // Kobalte restores focus during its teardown effect; defer past it so the
+      // composer keeps focus and the caret returns to where the user left it.
+      requestAnimationFrame(() => {
+        const editor = document.querySelector<HTMLElement>('[data-component="prompt-input"]')
+        if (!editor) return
+        editor.focus()
+        if (cursor !== null) setCursorPosition(editor, cursor)
+      })
+    }
     const { DialogSelectModel } = await import("@/components/dialog-select-model")
     owner.run(() => {
-      void dialog.show(() => <DialogSelectModel model={local.model} />)
+      void dialog.show(() => <DialogSelectModel model={local.model} />, restoreComposer)
     })
   }
 

packages/app/src/pages/session/v2/review-diff-kinds.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test"
+import { filterReviewFiles, reviewDiffKinds } from "./review-diff-kinds"
+
+describe("reviewDiffKinds", () => {
+  test("maps file and directory kinds", () => {
+    const kinds = reviewDiffKinds([
+      { file: "src/a.ts", additions: 1, deletions: 0, status: "added" },
+      { file: "src/b.ts", additions: 0, deletions: 2, status: "deleted" },
+    ])
+
+    expect(kinds.get("src/a.ts")).toBe("add")
+    expect(kinds.get("src/b.ts")).toBe("del")
+    expect(kinds.get("src")).toBe("mix")
+  })
+})
+
+describe("filterReviewFiles", () => {
+  test("filters by path substring", () => {
+    const files = ["src/a.ts", "src/b.ts", "lib/c.ts"]
+    expect(filterReviewFiles(files, "b.ts")).toEqual(["src/b.ts"])
+    expect(filterReviewFiles(files, "")).toEqual(files)
+  })
+})

packages/app/src/pages/session/v2/review-diff-kinds.ts

@@ -0,0 +1,42 @@
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import type { Kind } from "@/components/file-tree-v2"
+
+export type RenderDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
+
+export function normalizePath(p: string) {
+  return p.replaceAll("\\", "/").replace(/\/+$/, "")
+}
+
+export function filterRenderableDiff(value: SnapshotFileDiff | VcsFileDiff): value is RenderDiff {
+  return typeof value.file === "string"
+}
+
+export function reviewDiffKinds(diffs: RenderDiff[]) {
+  const merge = (a: Kind | undefined, b: Kind) => {
+    if (!a) return b
+    if (a === b) return a
+    return "mix" as const
+  }
+
+  const out = new Map<string, Kind>()
+  for (const diff of diffs) {
+    const file = normalizePath(diff.file)
+    const kind = diff.status === "added" ? "add" : diff.status === "deleted" ? "del" : "mix"
+
+    out.set(file, kind)
+
+    const parts = file.split("/")
+    parts.slice(0, -1).forEach((_, idx) => {
+      const dir = parts.slice(0, idx + 1).join("/")
+      if (!dir) return
+      out.set(dir, merge(out.get(dir), kind))
+    })
+  }
+  return out
+}
+
+export function filterReviewFiles(files: string[], query: string) {
+  const value = query.trim().toLowerCase()
+  if (!value) return files
+  return files.filter((file) => file.toLowerCase().includes(value))
+}

packages/app/src/pages/session/v2/review-panel-v2-state.ts

@@ -0,0 +1,40 @@
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  type SessionReviewExpandMode,
+} from "@opencode-ai/session-ui/v2/session-review-v2"
+import { createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Persist, persisted } from "@/utils/persist"
+
+export function createReviewPanelV2State() {
+  const [store, setStore] = persisted(
+    Persist.global("review-panel-v2"),
+    createStore({
+      sidebarOpened: true,
+      sidebarWidth: SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+      expandMode: "collapse" as SessionReviewExpandMode,
+    }),
+  )
+  // The filter is transient by design: a persisted filter would silently hide
+  // files after a reload.
+  const [filter, setFilter] = createSignal("")
+
+  return {
+    sidebarOpened: () => store.sidebarOpened,
+    sidebarWidth: () => store.sidebarWidth,
+    filter,
+    setFilter,
+    expandMode: () => store.expandMode,
+    setExpandMode: (mode: SessionReviewExpandMode) => setStore("expandMode", mode),
+    resizeSidebar: (width: number) =>
+      setStore(
+        "sidebarWidth",
+        Math.min(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX, Math.max(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN, width)),
+      ),
+    toggleSidebar: () => setStore("sidebarOpened", (opened) => !opened),
+  }
+}
+
+export type ReviewPanelV2State = ReturnType<typeof createReviewPanelV2State>

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -0,0 +1,234 @@
+import { createMemo, createSignal, Show, type JSX } from "solid-js"
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  SessionReviewV2,
+  SessionReviewV2Sidebar,
+  SessionReviewV2SidebarToggle,
+} from "@opencode-ai/session-ui/v2/session-review-v2"
+import { SessionReviewFilePreviewV2 } from "@opencode-ai/session-ui/v2/session-review-file-preview-v2"
+import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "@opencode-ai/session-ui/session-review"
+import FileTreeV2 from "@/components/file-tree-v2"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import {
+  filterRenderableDiff,
+  filterReviewFiles,
+  reviewDiffKinds,
+  type RenderDiff,
+} from "@/pages/session/v2/review-diff-kinds"
+import type { ReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
+import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+
+type ReviewDiff = SnapshotFileDiff | VcsFileDiff
+
+export type ReviewPanelV2Props = {
+  title?: JSX.Element
+  empty?: JSX.Element
+  diffs: () => ReviewDiff[]
+  diffsReady: () => boolean
+  activeFile?: string
+  onSelectFile: (path: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  state: ReviewPanelV2State
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+export function ReviewPanelV2(props: ReviewPanelV2Props) {
+  const sdk = useSDK()
+
+  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const filteredFiles = createMemo(() =>
+    filterReviewFiles(
+      diffs().map((diff) => diff.file),
+      props.state.filter(),
+    ),
+  )
+  const searching = createMemo(() => props.state.filter().trim().length > 0)
+  const kinds = createMemo(() => reviewDiffKinds(diffs()))
+  const activeDiff = createMemo(() => {
+    // A focused comment takes over the preview until the preview applies it and
+    // clears the focus; the owner then persists the file as the active selection.
+    const focus = props.focusedComment
+    if (focus && diffs().some((diff) => diff.file === focus.file)) return focus.file
+    const active = props.activeFile
+    if (searching()) return active
+    const files = filteredFiles()
+    if (active && files.includes(active)) return active
+    return files[0]
+  })
+  const activeItem = createMemo(() => diffs().find((diff) => diff.file === activeDiff()))
+
+  const readFile = async (path: string) =>
+    sdk()
+      .client.file.read({ path })
+      .then((x) => x.data)
+      .catch((error) => {
+        console.debug("[session-review-v2] failed to read file", { path, error })
+        return undefined
+      })
+
+  return (
+    <SessionReviewV2
+      title={props.title}
+      stats={<DiffChanges changes={diffs()} />}
+      empty={props.empty}
+      sidebarOpen={props.state.sidebarOpened()}
+      sidebarToggle={
+        <SessionReviewV2SidebarToggle opened={props.state.sidebarOpened()} onToggle={props.state.toggleSidebar} />
+      }
+      sidebar={
+        // Always mounted: the sidebar header hosts the changes-mode dropdown,
+        // which must stay reachable when the current mode has zero diffs.
+        <ReviewPanelV2Sidebar
+          title={props.title}
+          state={props.state}
+          diffsReady={props.diffsReady}
+          onSelectFile={props.onSelectFile}
+          diffs={diffs}
+          filteredFiles={filteredFiles}
+          searching={searching}
+          kinds={kinds}
+          activeDiff={activeDiff}
+        />
+      }
+      activeFile={activeDiff()}
+      files={filteredFiles()}
+      onSelectFile={props.onSelectFile}
+      diffStyle={props.diffStyle}
+      onDiffStyleChange={props.onDiffStyleChange}
+      expandMode={props.state.expandMode()}
+      onExpandModeChange={props.state.setExpandMode}
+      hasDiffs={diffs().length > 0}
+      preview={
+        // Key on the file path, not the diff object identity, so refreshed diff data
+        // updates the mounted preview instead of remounting the whole viewer.
+        <Show when={activeDiff()} keyed>
+          {(file) => (
+            <Show when={activeItem()}>
+              {(diff) => (
+                <SessionReviewFilePreviewV2
+                  file={file}
+                  diff={diff()}
+                  diffStyle={props.diffStyle}
+                  expandMode={props.state.expandMode()}
+                  readFile={readFile}
+                  onLineComment={props.onLineComment}
+                  onLineCommentUpdate={props.onLineCommentUpdate}
+                  onLineCommentDelete={props.onLineCommentDelete}
+                  lineCommentActions={props.lineCommentActions}
+                  comments={props.comments}
+                  focusedComment={props.focusedComment}
+                  onFocusedCommentChange={props.onFocusedCommentChange}
+                />
+              )}
+            </Show>
+          )}
+        </Show>
+      }
+    />
+  )
+}
+
+function ReviewPanelV2Sidebar(props: {
+  title?: JSX.Element
+  state: ReviewPanelV2State
+  diffsReady: () => boolean
+  onSelectFile: (path: string) => void
+  diffs: () => RenderDiff[]
+  filteredFiles: () => string[]
+  searching: () => boolean
+  kinds: () => ReturnType<typeof reviewDiffKinds>
+  activeDiff: () => string | undefined
+}) {
+  const language = useLanguage()
+  const [explicitHighlight, setExplicitHighlight] = createSignal<string | undefined>()
+  const highlightedPath = createMemo(() => {
+    if (!props.searching()) return undefined
+    const files = props.filteredFiles()
+    if (files.length === 0) return undefined
+    const explicit = explicitHighlight()
+    if (explicit && files.includes(explicit)) return explicit
+    return files[0]
+  })
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!props.searching()) return
+    applyFileListKeyDown(event, props.filteredFiles(), highlightedPath(), {
+      onHighlight: setExplicitHighlight,
+      onSelect: props.onSelectFile,
+    })
+  }
+
+  return (
+    <SessionReviewV2Sidebar
+      open={props.state.sidebarOpened()}
+      title={props.title}
+      stats={<DiffChanges changes={props.diffs()} />}
+      filter={props.state.filter()}
+      onFilterChange={props.state.setFilter}
+      onFilterKeyDown={onFilterKeyDown}
+      width={props.state.sidebarWidth()}
+      onWidthChange={props.state.resizeSidebar}
+      minWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN}
+      maxWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX}
+    >
+      <Show
+        when={props.diffsReady()}
+        fallback={
+          <div class="px-2 py-2 text-12-regular text-text-weak">
+            {language.t("common.loading")}
+            {language.t("common.loading.ellipsis")}
+          </div>
+        }
+      >
+        <Show
+          when={props.searching()}
+          fallback={
+            <FileTreeV2
+              path=""
+              allowed={props.filteredFiles()}
+              kinds={props.kinds()}
+              draggable={false}
+              active={props.activeDiff()}
+              onFileClick={(node) => props.onSelectFile(node.path)}
+            />
+          }
+        >
+          <Show
+            when={props.filteredFiles().length > 0}
+            fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
+          >
+            <SessionFileListV2
+              files={props.filteredFiles()}
+              kinds={props.kinds()}
+              active={props.activeDiff()}
+              highlighted={highlightedPath()}
+              onFileClick={(path) => {
+                setExplicitHighlight(path)
+                props.onSelectFile(path)
+              }}
+            />
+          </Show>
+        </Show>
+      </Show>
+    </SessionReviewV2Sidebar>
+  )
+}

packages/app/src/pages/session/v2/session-file-list-v2.tsx

@@ -0,0 +1,109 @@
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { createEffect, For, Show } from "solid-js"
+import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
+import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+
+// Drives the highlight/selection of the flat search-result list from the filter
+// input's keyboard events.
+export function applyFileListKeyDown(
+  event: KeyboardEvent,
+  files: readonly string[],
+  highlighted: string | undefined,
+  options: { onHighlight: (path: string) => void; onSelect: (path: string) => void },
+) {
+  if (files.length === 0) return
+
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    const currentIndex = highlighted ? files.indexOf(highlighted) : -1
+    const delta = event.key === "ArrowDown" ? 1 : -1
+    const start = currentIndex === -1 ? (delta > 0 ? 0 : files.length - 1) : currentIndex + delta
+    const index = Math.max(0, Math.min(files.length - 1, start))
+    options.onHighlight(files[index]!)
+    event.preventDefault()
+    return
+  }
+
+  if (event.key !== "Enter") return
+  const target = highlighted ?? files[0]
+  if (!target) return
+  options.onSelect(target)
+  event.preventDefault()
+}
+
+// Flat variant of FileTreeV2 for filtered results: reuses its data-component and
+// row data-slots on purpose so file-tree-v2.css styles both. data-highlighted has
+// no CSS of its own — it folds into data-selected below and only exists as the
+// scrollIntoView query hook.
+export function SessionFileListV2(props: {
+  files: readonly string[]
+  active?: string
+  highlighted?: string
+  kinds?: ReadonlyMap<string, Kind>
+  onFileClick: (path: string) => void
+}) {
+  const active = () => normalizePath(props.active ?? "")
+  const highlighted = () => normalizePath(props.highlighted ?? "")
+  let rootRef: HTMLDivElement | undefined
+
+  createEffect(() => {
+    highlighted()
+    if (!rootRef) return
+    queueMicrotask(() => {
+      const row = rootRef?.querySelector<HTMLElement>('[data-slot="file-tree-v2-row"][data-highlighted]')
+      row?.scrollIntoView({ block: "nearest" })
+    })
+  })
+
+  return (
+    <div
+      ref={(el) => {
+        rootRef = el
+      }}
+      data-component="file-tree-v2"
+    >
+      <For each={props.files}>
+        {(path) => {
+          const normalized = normalizePath(path)
+          const selected = () => {
+            if (highlighted()) return highlighted() === normalized
+            return active() === normalized
+          }
+          const highlightedRow = () => highlighted() === normalized
+          const kind = () => props.kinds?.get(normalized)
+          const directory = () => (normalized.includes("/") ? getDirectory(normalized) : undefined)
+          const filename = () => getFilename(normalized)
+          return (
+            <button
+              type="button"
+              data-slot="file-tree-v2-row"
+              data-selected={selected() ? "" : undefined}
+              data-highlighted={highlightedRow() ? "" : undefined}
+              style="padding-left: 8px"
+              onClick={() => props.onFileClick(path)}
+            >
+              <span class="filetree-iconpair size-4">
+                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--color" />
+                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--mono" mono />
+              </span>
+              <span class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap">
+                <Show when={directory()}>
+                  {(value) => <span class="text-12-medium text-text-muted truncate min-w-0 shrink">{value()}</span>}
+                </Show>
+                <span class="text-12-medium text-text-base truncate min-w-0 shrink-0">{filename()}</span>
+              </span>
+              <Show when={kind()}>
+                {(value) => (
+                  <span data-slot="file-tree-v2-change" data-change={kindChange(value())}>
+                    {kindLabel(value())}
+                  </span>
+                )}
+              </Show>
+            </button>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

packages/app/src/utils/server-errors.ts

@@ -42,6 +42,20 @@ function unwrapNamedError(error: unknown): unknown {
   return error
 }
 
+// Client-synthesized session not-found errors share one constructor and
+// predicate so the message contract cannot drift between the sync store
+// (server-session.ts), the route lineage (session-lineage.ts), and the
+// not-found fallback matching (session.tsx).
+const sessionNotFoundMessage = (sessionID: string) => `Session not found: ${sessionID}`
+
+export function sessionNotFoundError(sessionID: string) {
+  return new Error(sessionNotFoundMessage(sessionID))
+}
+
+export function isLocalSessionNotFoundError(error: unknown, sessionID: string) {
+  return error instanceof Error && error.message === sessionNotFoundMessage(sessionID)
+}
+
 export function isSessionNotFoundError(error: unknown, sessionID: string) {
   const unwrapped = unwrapNamedError(error)
   if (typeof unwrapped !== "object" || unwrapped === null) return false

packages/app/test-browser/prompt-submission-state.test.ts

@@ -38,6 +38,23 @@ describe("prompt submission state", () => {
     expect(session.context.items()[0]).toMatchObject({ type: "file", path: "src/index.ts" })
   })
 
+  test("clears the original first-submit prompt after retargeting", () => {
+    const workspace = createPromptState()
+    const session = createPromptState()
+    workspace.set([{ type: "text", content: "first prompt", start: 0, end: 12 }])
+    const submission = createPromptSubmissionState({
+      target: workspace,
+      prompt: workspace.current(),
+      context: [],
+    })
+
+    submission.retarget(session)
+    submission.clear()
+
+    expect(workspace.current()[0]).toMatchObject({ type: "text", content: "" })
+    expect(session.current()[0]).toMatchObject({ type: "text", content: "" })
+  })
+
   test("does not restore over a prompt edited after submission", () => {
     const target = createPromptState()
     target.set([{ type: "text", content: "submitted", start: 0, end: 9 }])

packages/app/test-browser/session-lineage.test.ts

@@ -0,0 +1,231 @@
+import { expect, test } from "bun:test"
+import { createRoot, createSignal } from "solid-js"
+import { createSessionLineage } from "@/pages/session/session-lineage"
+
+type Lineage = { session: { id: string; directory: string } }
+
+const lineageOf = (id: string): Lineage => ({ session: { id, directory: `/dir/${id}` } })
+
+// Fake sync lineage store: peek reads a reactive cache, resolve returns a
+// deferred promise the test settles or fails explicitly. The lineage memo is
+// live (read below), so it recomputes eagerly on cache/status writes — throws
+// surface at the write site, which is also where the enclosing ErrorBoundary
+// would see them in the app. Assertions wrap write + read to cover both.
+function createFixture(initial: Record<string, Lineage> = {}) {
+  const [cache, setCache] = createSignal(initial)
+  const deferred = new Map<string, PromiseWithResolvers<unknown>>()
+  const resolves: string[] = []
+  return {
+    resolves,
+    lineage: {
+      peek: (id: string) => cache()[id],
+      resolve: (id: string) => {
+        resolves.push(id)
+        const entry = deferred.get(id) ?? Promise.withResolvers<unknown>()
+        deferred.set(id, entry)
+        return entry.promise
+      },
+    },
+    settle(id: string) {
+      setCache({ ...cache(), [id]: lineageOf(id) })
+      deferred.get(id)?.resolve(undefined)
+    },
+    fail(id: string, error: unknown) {
+      deferred.get(id)?.reject(error)
+      // The real store does not cache failures: the inflight request entry is
+      // dropped on rejection so the next resolve retries (server-session.ts).
+      deferred.delete(id)
+    },
+    remove(id: string) {
+      const next = { ...cache() }
+      delete next[id]
+      setCache(next)
+    },
+  }
+}
+
+// Two microtask ticks: one for the resolve promise handed back by the fixture,
+// one for the .then/.catch chain inside createSessionLineage.
+const flush = async () => {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+test("resolves an uncached session and exposes its lineage", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture()
+    const current = createSessionLineage(
+      () => "ses_a",
+      () => fixture.lineage,
+    )
+
+    expect(current()).toBeUndefined()
+    await flush()
+    expect(fixture.resolves).toEqual(["ses_a"])
+
+    fixture.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    dispose()
+  })
+})
+
+// Session tabs on the same server share one route instance, so navigating to
+// another session changes the id in place; resolution must follow it instead
+// of reporting the new session as missing.
+test("re-resolves when navigating to an uncached session without a remount", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture({ ses_a: lineageOf("ses_a") })
+    const [id, setId] = createSignal("ses_a")
+    const current = createSessionLineage(id, () => fixture.lineage)
+
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    expect(() => {
+      setId("ses_b")
+      current()
+    }).not.toThrow()
+    expect(fixture.resolves).toEqual(["ses_b"])
+
+    fixture.settle("ses_b")
+    await flush()
+    expect(current()?.session.id).toBe("ses_b")
+
+    dispose()
+  })
+})
+
+// A late failure from a session the user already navigated away from must not
+// poison the currently viewed session.
+test("ignores a stale resolution failure after the target changes", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture()
+    const [id, setId] = createSignal("ses_a")
+    const current = createSessionLineage(id, () => fixture.lineage)
+
+    await flush()
+    setId("ses_b")
+    fixture.fail("ses_a", new Error("Session not found: ses_a"))
+    await flush()
+
+    expect(() => current()).not.toThrow()
+    fixture.settle("ses_b")
+    await flush()
+    expect(current()?.session.id).toBe("ses_b")
+
+    dispose()
+  })
+})
+
+test("returning to a pruned session re-resolves instead of throwing not found", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture()
+    const [id, setId] = createSignal("ses_a")
+    const current = createSessionLineage(id, () => fixture.lineage)
+
+    await flush()
+    fixture.settle("ses_a")
+    await flush()
+
+    setId("ses_b")
+    fixture.settle("ses_b")
+    await flush()
+
+    fixture.remove("ses_a")
+    expect(() => {
+      setId("ses_a")
+      current()
+    }).not.toThrow()
+    expect(fixture.resolves).toEqual(["ses_a", "ses_b", "ses_a"])
+
+    fixture.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    dispose()
+  })
+})
+
+// A resolution that fails while its session is unfocused must not leave a
+// poisoned status behind: revisiting that session retries cleanly instead of
+// rethrowing the stale failure before the retry can start.
+test("revisiting a session whose resolution failed while unfocused retries cleanly", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture()
+    const [id, setId] = createSignal("ses_a")
+    const current = createSessionLineage(id, () => fixture.lineage)
+
+    await flush()
+    setId("ses_b")
+    fixture.fail("ses_a", new Error("resolve failed"))
+    await flush()
+
+    expect(() => {
+      setId("ses_a")
+      current()
+    }).not.toThrow()
+    expect(fixture.resolves).toEqual(["ses_a", "ses_b", "ses_a"])
+
+    fixture.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    dispose()
+  })
+})
+
+// The lineage accessor is reactive: replacing the sync store (for example after
+// the server context is rebuilt) must gate out the old store's status and
+// re-resolve against the new one instead of fabricating a not-found.
+test("re-resolves against a replaced lineage store", async () => {
+  await createRoot(async (dispose) => {
+    const first = createFixture()
+    const second = createFixture()
+    const [store, setStore] = createSignal(first.lineage)
+    const current = createSessionLineage(() => "ses_a", store)
+
+    await flush()
+    first.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    expect(() => {
+      setStore(second.lineage)
+      current()
+    }).not.toThrow()
+    await flush()
+    expect(second.resolves).toEqual(["ses_a"])
+
+    second.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    dispose()
+  })
+})
+
+// The viewed session is pinned in the cache, so disappearing after settlement
+// means it was deleted; the boundary must show the not found fallback.
+test("throws not found when the settled session is deleted", async () => {
+  await createRoot(async (dispose) => {
+    const fixture = createFixture()
+    const current = createSessionLineage(
+      () => "ses_a",
+      () => fixture.lineage,
+    )
+
+    await flush()
+    fixture.settle("ses_a")
+    await flush()
+    expect(current()?.session.id).toBe("ses_a")
+
+    expect(() => {
+      fixture.remove("ses_a")
+      current()
+    }).toThrow("Session not found: ses_a")
+
+    dispose()
+  })
+})

packages/app/test-browser/toast-owner.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from "bun:test"
+import { createSignal, type JSX } from "solid-js"
+import { showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"
+
+describe("showToastV2", () => {
+  test("creates no reactive computations at call time", () => {
+    const [tick, setTick] = createSignal(0)
+    let reads = 0
+    const icon = (() => {
+      reads++
+      tick()
+      return undefined
+    }) as unknown as JSX.Element
+
+    const id = showToastV2({ description: "test", icon })
+
+    // Resolving the icon at call time creates an ownerless computation that is
+    // never disposed and tracks its dependencies forever; it must only resolve
+    // once the toast component renders.
+    expect(reads).toBe(0)
+    setTick(1)
+    expect(reads).toBe(0)
+
+    toasterV2.dismiss(id)
+  })
+})

packages/codemode/AGENTS.md

@@ -0,0 +1,15 @@
+# @opencode-ai/codemode
+
+- This local package owns confined execution over explicit schema-described tools. Applications own authorization, persistence, external authority, and tool-specific delivery semantics.
+- Do not add a speculative generic permission or approval policy. A host omits tools it does not expose and enforces domain authorization inside each provided tool.
+- Keep Code Mode unaware of host session, channel, and conversation models. The hosting application supplies trusted execution scope around it.
+- Tool schemas are the model-facing Interface. Keep arguments minimal and natural to the operation; never add unrelated IDs as ambient capability tokens.
+
+## Future Design Notes
+
+- If a captured user-visible output channel returns (an earlier `output.text`/`output.file`/`output.image` API was removed from v1), keep `output` as its name, distinct from the program return value: `return` stays the structured result for the model, while `output.*` describes artifacts the host may render into a conversation or UI after execution. Keep this host-neutral and let applications decide how captured output is delivered. In v1, hosts collect media host-side (outside the sandbox) instead.
+- Improve the sandbox failure taxonomy. Distinguish parse/compile mistakes, unsupported syntax, user-thrown errors, invalid returned data, tool refusal, tool internal failure, timeout, and genuine runtime defects so agents can recover accurately instead of treating everything as a generic execution failure.
+- Preserve the public/private error split. Tool authors should be able to return a safe model-visible message while retaining a private cause for host diagnostics. Unknown host failures must remain sanitized by default.
+- Think deliberately about richer binary boundaries before allowing `Blob`, `File`, `ArrayBuffer`, streams, or typed arrays beyond today's JSON-like values. If CodeMode supports binary tool args/results, use explicit tagged data shapes and clear size limits rather than relying on ambient runtime serialization.
+- Keep host capabilities explicit. Globals such as `fetch`, `crypto`, filesystem handles, extra modules, or network clients should be opt-in runtime capabilities with obvious policy defaults, not ambient authority. Default to unavailable unless a host deliberately provides the capability.
+- If `fetch` is added, model it as a host-provided outbound capability with policy controls: allowed origins, methods, headers, response size, timeout, and whether response bodies may be returned, emitted, or only summarized through a tool.

packages/codemode/README.md

@@ -0,0 +1,338 @@
+# @opencode-ai/codemode
+
+Effect-native confined code execution over explicit, schema-described tools.
+
+CodeMode lets a model write a small JavaScript program that can call only the tools supplied by the host. The program can sequence calls, transform plain data, branch, loop, and run independent calls in parallel without receiving ambient filesystem, process, network, module, or application authority.
+
+The package is currently private to this workspace. Its API is designed around three uses:
+
+```ts
+// One execution
+yield * CodeMode.execute({ tools, code })
+
+// A reusable runtime
+const runtime = CodeMode.make({ tools, limits })
+yield * runtime.execute(code)
+
+// One agent-facing code tool
+const codeTool = runtime.agentTool()
+```
+
+## Install
+
+Within this workspace:
+
+```json
+{
+  "dependencies": {
+    "@opencode-ai/codemode": "workspace:*"
+  }
+}
+```
+
+Hosts interact with CodeMode through `effect` (tool `run` implementations, `Effect`-typed results), so they should depend on `effect` themselves.
+
+## Quick Start
+
+Define tools with Effect Schema, then place them in the object tree exposed to programs as `tools`:
+
+```ts
+import { CodeMode, Tool } from "@opencode-ai/codemode"
+import { Effect, Schema } from "effect"
+
+const lookupOrder = Tool.make({
+  description: "Look up an order by ID",
+  input: Schema.Struct({ id: Schema.String }),
+  output: Schema.Struct({ id: Schema.String, status: Schema.String }),
+  run: ({ id }) => Effect.succeed({ id, status: "open" }),
+})
+
+const runtime = CodeMode.make({
+  tools: {
+    orders: {
+      lookup: lookupOrder,
+    },
+  },
+})
+
+const result =
+  yield *
+  runtime.execute(`
+  const order = await tools.orders.lookup({ id: "order_42" })
+  return { id: order.id, needsAttention: order.status !== "complete" }
+`)
+```
+
+`result` is always an `ExecuteResult`. Program, validation, limit, and tool failures are returned as diagnostics rather than failing the Effect. Host interruption remains interruption.
+
+Successful result values are JSON-safe data. A program that returns `undefined`, including by reaching the end without `return`, produces `null`; nested `undefined` values are normalized to `null` as well.
+
+## API
+
+### `Tool.make`
+
+```ts
+const tool = Tool.make({
+  description,
+  input, // Effect Schema (validating) or JSON Schema (render-only)
+  output, // optional; same choice
+  run,
+})
+```
+
+`input` and `output` each accept a validating Effect Schema or a render-only JSON Schema document (the natural shape for adapter-provided tools whose schemas arrive as JSON Schema, e.g. MCP definitions). Effect Schema input is decoded before `run` is invoked, and `run` returns the encoded representation of an Effect Schema `output`, which CodeMode decodes and copies before exposing it to the program. JSON Schemas only shape the model-visible signature; values pass through unvalidated (they still cross the plain-data boundary).
+
+`output` is optional. Without it the tool's signature advertises `Promise<unknown>` and the host result is exposed as-is.
+
+The description and schemas are part of the model-visible tool contract. Keep descriptions concrete and put authorization in `run` or in the service it calls.
+
+### `CodeMode.execute`
+
+Use `CodeMode.execute` for a single execution:
+
+```ts
+const result =
+  yield *
+  CodeMode.execute({
+    tools: { orders: { lookup: lookupOrder } },
+    code: `return await tools.orders.lookup({ id: "order_42" })`,
+    limits: { maxToolCalls: 10 },
+    onToolCallStart: (call) => Effect.logDebug("CodeMode tool started", call),
+    onToolCallEnd: (call) => Effect.logDebug("CodeMode tool settled", call),
+  })
+```
+
+The Effect environment is inferred from the supplied tools. CodeMode does not erase service requirements introduced by tool implementations.
+
+### `CodeMode.make`
+
+Use `CodeMode.make` when the tool set and execution policy are reused:
+
+```ts
+const runtime = CodeMode.make({
+  tools: { orders: { lookup: lookupOrder } },
+  limits: { timeoutMs: 30_000 },
+})
+
+runtime.catalog() // structured tool descriptions
+runtime.instructions() // model-facing syntax and tool guide
+runtime.execute(source) // ExecuteResult
+runtime.agentTool() // { name, description, input, output, execute }
+```
+
+`catalog`, `instructions`, and `agentTool` are projections of the same configured tool tree. `agentTool().description` is exactly `instructions()`.
+
+### Results
+
+```ts
+type ExecuteResult = ExecuteSuccess | ExecuteFailure
+
+interface ExecuteSuccess {
+  readonly ok: true
+  readonly value: Schema.Json
+  readonly logs?: ReadonlyArray<string>
+  readonly truncated?: boolean
+  readonly toolCalls: ReadonlyArray<ToolCall>
+}
+
+interface ExecuteFailure {
+  readonly ok: false
+  readonly error: Diagnostic
+  readonly logs?: ReadonlyArray<string>
+  readonly truncated?: boolean
+  readonly toolCalls: ReadonlyArray<ToolCall>
+}
+```
+
+`toolCalls` contains the names of calls admitted by the runtime in call order. It is retained on failure so hosts can audit partial execution without exposing inputs or host failures. `truncated` is present when the value or logs were cut to fit `maxOutputBytes` (see Execution Limits).
+
+### Tool-call hooks
+
+`onToolCallStart` receives `{ index, name, input }` after input decoding and before tool execution. The input is decoded host-side data and may include values produced by schema transformations; applications should avoid logging sensitive tool arguments indiscriminately.
+
+`onToolCallEnd` receives `{ index, name, input, durationMs, outcome, message? }` when an admitted call settles. `outcome` is `"success"` or `"failure"`; `message` is the model-safe failure message and is present only on failure. Interrupted calls (for example when the execution timeout fires) do not produce an end event. Both hooks are Effect-returning and must not fail.
+
+## Discovery
+
+The agent-tool instructions use a budgeted catalog. Every tool namespace is always listed with its tool count regardless of budget, and as many complete tool signatures (each with a one-line description) as fit an estimated-token budget are inlined. Selection is round-robin across namespaces for fairness: in each round (namespaces alphabetical), every namespace still holding un-inlined tools attempts to place its next-cheapest signature line against the shared budget, and a namespace whose next line does not fit drops out while the others keep going - so every namespace gets some representation before any namespace gets everything. The instructions state exactly how comprehensive the list is, both overall (`COMPLETE list` vs `PARTIAL - N of M shown`) and per namespace (`(3 tools)`, `(3 tools, 1 shown)`, `(3 tools, none shown)`).
+
+The default budget is 2,000 estimated tokens (characters / 4, the same heuristic OpenCode uses). Override it when constructing a runtime:
+
+```ts
+const runtime = CodeMode.make({
+  tools,
+  discovery: { maxInlineCatalogTokens: 6_000 },
+})
+```
+
+The budget must be a non-negative safe integer.
+
+The runtime search tool is always registered - including when the catalog is fully inlined - so a speculative `tools.$codemode.search` call never fails as an unknown tool. It is only advertised in the instructions when the inlined list is partial:
+
+```ts
+const matches = await tools.$codemode.search({
+  query: "order status",
+  namespace: "orders", // optional: scope to one top-level namespace
+  limit: 10,
+})
+```
+
+`search` performs deterministic, additive field-weighted matching. The query is tokenized (camelCase boundaries split; every non-alphanumeric character is a separator; empties and `*` are dropped), and each term scores every tool: exact path or path-segment match (20), path substring (8), description substring (4), and searchable-text substring (2). Each term also carries naive singular variants (trailing `s`/`es` stripped), and a field check passes when the term or any variant matches - so a plural query term (`issues`) still finds a tool whose text only says `issue`, without changing the weights. The searchable text also includes the input schema's property names and their description strings, so a query naming a parameter finds its tool, and substring matching means partial words match. Scores sum across terms; matches are sorted by score (ties broken alphabetically by path) and capped at `limit` results (default 10).
+
+Each result contains the path, description, and generated TypeScript signature, so no second lookup is needed. The result signature is the pretty, JSDoc-annotated multiline form: each described input/output field carries its schema `description` as a `/** ... */` comment, and constraints TypeScript cannot express ride along as tags (`@deprecated`, `@default`, `@format`, `@minItems`, `@maxItems`). The inline catalog in the instructions keeps the compact single-line form.
+
+```ts
+tools.github.list_issues(input: {
+  /** Repository owner */
+  owner: string
+  /** Cursor from the previous response's pageInfo */
+  after?: string
+  /**
+   * Results per page
+   * @default 30
+   */
+  perPage?: number
+}): Promise<unknown>
+```
+
+Result paths are rendered as JavaScript expressions rooted at `tools` (`tools.orders.lookup`, or `tools.context7["resolve-library-id"]` for non-identifier segments), so each `path` is directly usable as the call site. An empty query browses the catalog alphabetically by path; combined with `namespace` (`{ query: "", namespace: "orders" }`) it lists everything in that namespace. A query that names one tool path exactly (canonical path, `tools.`-prefixed path, or rendered JavaScript expression) is treated as a lookup and returns that tool alone.
+
+The instructions are structured markdown, ordered so the workflow sits at the top and the catalog at the bottom: a `## Workflow` section with numbered steps (find a tool via search when the catalog is partial, or pick from the inlined list when it is complete; call the exact path as-is; `JSON.parse` string results; return only the needed fields), a `## Rules` section holding only guidance the workflow does not already cover (only listed/search-result tools exist inside `tools`; filter and aggregate collections in code; treat `Promise<unknown>` results as shapeless until verified; run independent calls through `Promise.all`; enumerate `tools` with `Object.keys`/`for...in`; browse a namespace via search when it is advertised), a short `## Syntax` section that assumes standard JavaScript and names only what is unusual (TypeScript annotations stripped; the data-boundary serialization of Date/Map/Set/RegExp) or missing (classes, generators, `for await...of`, `.then`/`.catch`/`.finally`), and the budgeted `## Available tools` catalog. Example call forms use explicit `<namespace>.<tool>`/`<field>` placeholders - never a real or fabricated tool name.
+
+A host cannot define its own `$codemode` top-level namespace.
+
+## Supported Programs
+
+CodeMode executes a deliberately bounded JavaScript subset. It supports:
+
+- Plain data literals, property access, assignment, and destructuring.
+- `if`, conditional expressions, `switch`, `for`, `for...of` (arrays, strings, Maps, Sets), `for...in` (own keys of plain objects, index strings of arrays, and namespace/tool names of `tools` references - anything else is an error suggesting `for...of` or `Object.keys`, rather than real JS's surprising behavior of indices for strings and zero iterations for Maps/Sets), `while`, and `do...while`.
+- Arrow functions and function declarations with closures, defaults, rest parameters, and destructuring.
+- Optional chaining, nullish coalescing, templates, spread (arrays, strings, Maps, Sets), and `try`/`catch`.
+- Common array, string, number, `Object`, `Math`, and `JSON` operations. Mutating array methods include `push`/`pop`/`shift`/`unshift`/`splice` (removes in place and returns the removed elements)/`fill`/`copyWithin`; array `keys`/`values`/`entries` return **arrays** (matching the Map/Set convention) and work with `for...of` and spread. String methods include `localeCompare` (locale/options arguments ignored), `normalize`, and the `trimLeft`/`trimRight` aliases. `Object.keys` also accepts arrays (index strings, as in JS) and tool references: `Object.keys(tools)` lists the top-level namespaces and `Object.keys(tools.ns)` the names at that node (a callable tool enumerates as `[]`; an unknown path is an `UnknownTool` diagnostic). `Object.values`/`Object.entries` on a tool reference fail with a pointer at `Object.keys(tools)` and `tools.$codemode.search`.
+- `Date` - `Date.now()`/`Date.parse()`/`Date.UTC()`, `new Date(...)`, the getter methods, and date arithmetic/comparison via the time value. Dates stringify as ISO (`toString` included, for determinism across host timezones).
+- Regular expressions - `/literals/` and `new RegExp(...)` with `test`/`exec` (stateful `lastIndex` for `g`), plus string `match`/`matchAll`/`replace`/`replaceAll`/`split`/`search` with patterns. Match results are arrays carrying `index` and named `groups` as own properties (`input` is omitted). Invalid patterns, invalid flags, and missing-`g` calls fail with catchable errors that say what was wrong and how to fix it (escaping hints, the exact `/pattern/g` to write). Patterns run on the host engine, so pathological backtracking is bounded only by the execution timeout. Function replacers are not supported.
+- `Map` and `Set` - construction from entries/arrays/strings, `get`/`set`/`add`/`has`/`delete`/`clear`/`size`/`forEach`, and `keys`/`values`/`entries` returning **arrays** (not iterators).
+- First-class promises - an un-awaited `tools.ns.tool(...)` is a promise value whose call starts immediately on a supervised fiber; `await` resolves it (awaiting a non-promise value is a no-op, and `return tools.ns.tool(...)` resolves like an async-function return). `Promise.all`, `Promise.allSettled`, and `Promise.race` accept any array mixing promises and plain values (built inline, beforehand, or via spread); `Promise.resolve`/`Promise.reject` construct settled promises. `Promise.allSettled` rejection reasons are the same plain `{ name?, message }` data a `catch` binding sees, and `Promise.race` interrupts its losing in-flight calls. At most 8 tool calls run concurrently. When a program completes, still-running un-awaited calls are awaited before the execution ends; a failure from a call that was never awaited surfaces as an unhandled-rejection diagnostic.
+- `throw value` and `throw new Error(message)` for explicit program failure. `Error` (and `TypeError`/`RangeError`/`SyntaxError`/`ReferenceError`/`EvalError`/`URIError`) are real constructors, callable with or without `new`; error values are plain `{ name, message }` data that additionally satisfy `instanceof Error` (a specific type matches itself and `Error`, as in JS). Every caught failure - thrown errors, interpreter runtime errors, and tool failures - is `instanceof Error` in a `catch` block; a thrown non-error value (`throw "text"`) is not, matching JS. Caught failures carry the `name` the equivalent real-JS failure would have - `JSON.parse` and invalid regex patterns produce a `SyntaxError` (satisfying `instanceof SyntaxError`), an unknown identifier a `ReferenceError`, assigning to a constant a `TypeError`, a bad `normalize` form a `RangeError`; failures with no specific analogue (including tool failures) are named `"Error"`. `instanceof` also recognizes `Date`, `RegExp`, `Map`, `Set`, `Array`, `Object`, and `Promise`; any other right-hand side is a catchable error.
+
+Inside a program, Date/RegExp/Map/Set values stay live everywhere: the internal data checkpoints (`Object.*` helpers, spread, coercion inputs) preserve the instances, so `Object.values({ d: date })[0].getTime()` and a spread copy of an object holding a Map keep working. Only at the host boundary (final result, tool arguments, `JSON.stringify`) do the four value types serialize exactly as `JSON.stringify` would: a Date becomes its ISO string (`null` when invalid) and RegExp/Map/Set become `{}`. Promise values never cross a data boundary: an un-awaited promise in a result or tool argument produces a diagnostic that says to await it, instead of serializing to `{}`.
+
+It does not expose `eval`, dynamic imports, modules, classes, generators, timers, host globals, prototype mutation, custom promise constructors (`new Promise`), promise chaining (`.then`/`.catch`/`.finally` - `await` with `try`/`catch` is the supported style), or arbitrary method calls. Unsupported syntax returns an `UnsupportedSyntax` diagnostic with a source location when available.
+
+CodeMode is an orchestration language, not a general JavaScript runtime.
+
+## Execution Limits
+
+The limits are exactly three knobs:
+
+| Limit            |              Default | Bounds                                                               |
+| ---------------- | -------------------: | -------------------------------------------------------------------- |
+| `timeoutMs`      |    none - no timeout | Wall-clock execution time.                                           |
+| `maxToolCalls`   |     none - unlimited | Tool calls admitted during the execution.                            |
+| `maxOutputBytes` | none - no truncation | Model-facing output: the serialized result value plus captured logs. |
+
+No limit has a default, on purpose: execution budgets are host policy, not library policy - a host that wants a bound sets one; a host that can interrupt the execution fiber (as OpenCode does on user cancel) may set no timeout, and a host with its own tool-output truncation (as OpenCode has) may leave `maxOutputBytes` unset. A host with neither should set `maxOutputBytes`, or oversized results silently flood model context.
+
+Pass only the overrides you need:
+
+```ts
+const runtime = CodeMode.make({
+  tools,
+  limits: {
+    maxToolCalls: 20,
+    timeoutMs: 60_000,
+  },
+})
+```
+
+Limits are safe integers. `timeoutMs` must be at least `1`; the others may be `0`. Invalid configuration throws a `RangeError` when `CodeMode.make` or `CodeMode.execute` is called. An explicitly `undefined` value is the same as leaving the limit unset.
+
+Exceeding a configured `maxOutputBytes` never fails the execution. An oversized result value is replaced by its truncated serialized text plus an explanatory marker, logs are kept from the start until the remaining budget is exhausted (with a final marker line noting the cut), and the result carries `truncated: true`.
+
+When configured, the timeout interrupts in-flight tool Effects, including eagerly started calls the program has not awaited (their fibers are supervised by the execution). The interpreter yields cooperatively between steps, so the timeout also interrupts pure busy loops (`while (true) {}`) - no separate work budget exists. Tool implementations remain responsible for making their external operations interruptible or independently bounded.
+
+Two interpreter internals are fixed constants rather than knobs: at most 8 tool calls run concurrently, and values crossing a data boundary may nest at most 32 levels deep (deeper values fail as `InvalidDataValue`, which reads better than a native stack-overflow error). Neither is part of the public contract.
+
+## Diagnostics
+
+Failures are data:
+
+| Kind                    | Meaning                                                                                                  |
+| ----------------------- | -------------------------------------------------------------------------------------------------------- |
+| `ParseError`            | Source is empty or cannot be parsed.                                                                     |
+| `UnsupportedSyntax`     | Parsed JavaScript is outside the supported subset.                                                       |
+| `UnknownTool`           | A program referenced a tool the host did not provide.                                                    |
+| `InvalidToolInput`      | Tool input failed schema decoding or safe-data copying.                                                  |
+| `InvalidToolOutput`     | Tool output failed schema decoding or safe-data copying.                                                 |
+| `InvalidDataValue`      | Program data violated the plain-data contract (depth, circularity, blocked properties, non-data values). |
+| `ToolCallLimitExceeded` | Calls exceeded `maxToolCalls`.                                                                           |
+| `TimeoutExceeded`       | Execution exceeded `timeoutMs`.                                                                          |
+| `ToolFailure`           | A tool refused or failed.                                                                                |
+| `ExecutionFailure`      | The program threw or another execution error occurred.                                                   |
+
+Unknown host failures, defects, invalid outputs, and copying failures are sanitized. To return a safe operational refusal, fail with `toolError`:
+
+```ts
+import { toolError } from "@opencode-ai/codemode"
+
+run: ({ id }) => (authorized(id) ? loadOrder(id) : Effect.fail(toolError("Order is unavailable")))
+```
+
+Only the supplied message is model-visible. The optional cause is never returned in `ExecuteResult`; hosts should perform any required internal logging before crossing this boundary.
+
+## Authority Boundary
+
+CodeMode confines programs to the supplied tool tree, but it does not decide what those tools may do.
+
+The host owns:
+
+- Authentication and authorization.
+- Tool selection and immutable scope.
+- Credentials and network clients.
+- Persistence, idempotency, approval, and durable side effects.
+- Logging and redaction policy.
+
+CodeMode owns:
+
+- Parsing and interpreting the supported subset without `eval`.
+- Schema boundaries around tool calls.
+- Plain-data copying and blocked prototype members.
+- Resource limits, call accounting, and normalized diagnostics.
+- Model-facing tool discovery and instructions.
+
+A program cannot gain authority through prose or generated code. It can only exercise authority already present in the supplied tools. Do not expose a broad tool and expect the prompt to restrict it.
+
+## Laws
+
+The public contract is guided by these equivalences:
+
+- `CodeMode.execute({ ...options, code })` is equivalent to `CodeMode.make(options).execute(code)`.
+- `CodeMode.make(options).agentTool().execute({ code })` is equivalent to `CodeMode.make(options).execute(code)`.
+- `CodeMode.make(options).agentTool().description` equals `CodeMode.make(options).instructions()`.
+- A tool implementation is not invoked unless its input has decoded successfully.
+- A tool result is not visible to the program unless its output has decoded and crossed the plain-data boundary successfully.
+- Unknown host failures do not become model-visible diagnostics; `ToolError` is the explicit safe-message channel.
+- Host interruption remains interruption rather than an `ExecuteFailure`.
+
+## Non-Goals
+
+- Generic permission prompts or approval workflows.
+- Durable pause/resume, replay, or storage adapters.
+- Exactly-once external side effects.
+- Application authorization or product policy.
+- A filesystem or process sandbox for arbitrary JavaScript.
+- Compatibility with the full JavaScript language or npm ecosystem.
+
+Applications that need approval or durable consequences should model those above CodeMode and expose only the currently authorized tools.
+
+## Testing
+
+From the package directory:
+
+```sh
+bun test
+bun run typecheck
+```
+
+The direct suite covers public projections, discovery, schema boundaries, diagnostic sanitization, resource limits, tool-call observation, and interruption.

packages/codemode/package.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@opencode-ai/codemode",
+  "version": "0.0.1",
+  "description": "Effect-native confined code execution over schema-described tools",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsgo --noEmit",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "acorn": "8.15.0",
+    "effect": "catalog:",
+    "typescript": "catalog:"
+  },
+  "devDependencies": {
+    "@tsconfig/bun": "catalog:",
+    "@types/bun": "catalog:",
+    "@typescript/native-preview": "catalog:"
+  }
+}

packages/codemode/src/index.ts

@@ -0,0 +1,21 @@
+export { ToolError, CodeMode, ExecuteInputSchema, ExecuteResultSchema, toolError } from "./codemode.js"
+export { Tool } from "./tool.js"
+export type { Definition as ToolDefinition, JsonSchema, ToolSchema } from "./tool.js"
+export type { ToolCallEnded, ToolCallHooks } from "./tool-runtime.js"
+export type {
+  AgentToolDefinition,
+  CodeModeOptions,
+  CodeModeRuntime,
+  DataValue,
+  Diagnostic,
+  DiagnosticKind,
+  DiscoveryOptions,
+  ExecuteFailure,
+  ExecuteOptions,
+  ExecuteResult,
+  ExecuteSuccess,
+  ExecutionLimits,
+  ToolCall,
+  ToolCallStarted,
+  ToolDescription,
+} from "./codemode.js"

packages/codemode/src/token.ts

@@ -0,0 +1,10 @@
+/**
+ * Token estimation for budgeting model-facing text. Copied from
+ * `@opencode-ai/core/util/token` (chars / 4) so this package stays
+ * dependency-free; keep the two in sync if the heuristic ever changes.
+ */
+export * as Token from "./token.js"
+
+const CHARS_PER_TOKEN = 4
+
+export const estimate = (input: string) => Math.max(0, Math.round(input.length / CHARS_PER_TOKEN))

packages/codemode/src/tool-error.ts

@@ -0,0 +1,11 @@
+import { Schema } from "effect"
+
+/** Safe operational refusal from a standard tool pack, reported as `ToolFailure`. */
+export class ToolError extends Schema.TaggedErrorClass<ToolError>()("ToolError", {
+  message: Schema.String,
+  cause: Schema.optionalKey(Schema.Defect()),
+}) {}
+
+/** Creates a tool refusal whose message is safe to include in an execution diagnostic. */
+export const toolError = (message: string, cause?: unknown): ToolError =>
+  new ToolError({ message, ...(cause === undefined ? {} : { cause }) })

packages/codemode/src/tool-runtime.ts

@@ -0,0 +1,829 @@
+import { Cause, Effect } from "effect"
+import { ToolError, toolError } from "./tool-error.js"
+import {
+  decodeInput as decodeToolInput,
+  decodeOutput as decodeToolOutput,
+  identifierSegment,
+  inputProperties,
+  inputTypeScript,
+  isDefinition as isToolDefinition,
+  outputTypeScript,
+  type Definition,
+} from "./tool.js"
+import { estimate } from "./token.js"
+import { SandboxDate, SandboxMap, SandboxPromise, SandboxRegExp, SandboxSet } from "./values.js"
+
+export type HostTool<R = never> = (...args: Array<unknown>) => Effect.Effect<unknown, unknown, R>
+
+export type HostTools<R = never> = {
+  [name: string]: HostTool<R> | Definition<R> | HostTools<R>
+}
+
+export type Services<Tools> = Tools extends (...args: Array<unknown>) => Effect.Effect<unknown, unknown, infer R>
+  ? R
+  : Tools extends {
+        readonly _tag: "CodeModeTool"
+        readonly run: (input: unknown) => Effect.Effect<unknown, unknown, infer R>
+      }
+    ? R
+    : Tools extends object
+      ? string extends keyof Tools
+        ? never
+        : Services<Tools[keyof Tools]>
+      : never
+
+/** Minimal audit record retained for each admitted tool call. */
+export type ToolCall = {
+  readonly name: string
+}
+
+/** Decoded tool call observed immediately before tool execution. */
+export type ToolCallStarted = {
+  readonly index: number
+  readonly name: string
+  readonly input: unknown
+}
+
+/** Completed tool call observed immediately after tool execution settles. */
+export type ToolCallEnded = {
+  readonly index: number
+  readonly name: string
+  readonly input: unknown
+  readonly durationMs: number
+  readonly outcome: "success" | "failure"
+  /** Model-safe failure message; present only when `outcome` is `"failure"`. */
+  readonly message?: string
+}
+
+/** Non-throwing observation hooks fired around each admitted tool call. */
+export type ToolCallHooks<R = never> = {
+  readonly onToolCallStart?: ((call: ToolCallStarted) => Effect.Effect<void, never, R>) | undefined
+  readonly onToolCallEnd?: ((call: ToolCallEnded) => Effect.Effect<void, never, R>) | undefined
+}
+
+/** Model-visible description of one schema-backed tool. */
+export type ToolDescription = {
+  readonly path: string
+  readonly description: string
+  readonly signature: string
+}
+
+export type SafeObject = Record<string, unknown>
+
+const reservedNamespace = "$codemode"
+const defaultMaxInlineCatalogTokens = 2_000
+const defaultSearchLimit = 10
+const searchSignature =
+  "tools.$codemode.search({ query?: string, namespace?: string, limit?: number }): Promise<{ items: Array<{ path: string; description: string; signature: string }>; total: number }>"
+const toolExpression = (path: string) =>
+  "tools" +
+  path
+    .split(".")
+    .map((segment) => (identifierSegment.test(segment) ? `.${segment}` : `[${JSON.stringify(segment)}]`))
+    .join("")
+
+export class ToolReference {
+  constructor(readonly path: ReadonlyArray<string>) {}
+}
+
+/**
+ * Maximum nesting depth for values crossing a data boundary. Fixed (not a configurable
+ * limit) purely because it produces a clearer diagnostic than a native stack-overflow
+ * RangeError would.
+ */
+const MAX_VALUE_DEPTH = 32
+
+export class ToolRuntimeError extends Error {
+  constructor(
+    readonly kind:
+      | "UnknownTool"
+      | "InvalidToolInput"
+      | "InvalidToolOutput"
+      | "InvalidDataValue"
+      | "ToolCallLimitExceeded",
+    message: string,
+    readonly suggestions: ReadonlyArray<string> = [],
+  ) {
+    super(message)
+    this.name = "ToolRuntimeError"
+  }
+}
+
+const isDefinition = <R>(value: HostTool<R> | Definition<R> | HostTools<R>): value is Definition<R> =>
+  isToolDefinition<R>(value)
+
+const runHost = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, ToolError, R> =>
+  effect.pipe(
+    Effect.catchCause((cause) => {
+      if (Cause.hasInterruptsOnly(cause)) return Effect.interrupt
+      const error = Cause.squash(cause)
+      return Effect.fail(error instanceof ToolError ? error : toolError("Tool execution failed", error))
+    }),
+  )
+
+const blockedMemberNames = new Set(["__proto__", "constructor", "prototype"])
+
+export const isBlockedMember = (name: string): boolean => blockedMemberNames.has(name)
+
+/**
+ * Validates and copies a value against the plain-data contract (depth, circularity, plain
+ * objects only, blocked properties, data-only leaves).
+ *
+ * Two modes share the walk:
+ * - **Boundary** (`preserveSandboxValues` false, the default): the host<->sandbox boundary -
+ *   final results, tool-call arguments, `JSON.stringify`. Sandbox value types serialize
+ *   exactly as JSON.stringify would: Date -> ISO string (invalid -> null), RegExp/Map/Set -> {}.
+ * - **Intra-sandbox checkpoint** (`preserveSandboxValues` true; see `boundedData` in
+ *   codemode.ts): Date/RegExp/Map/Set instances pass through untouched (treated as leaves,
+ *   contents not walked), so values flowing through `Object.*` helpers, coercion inputs, and
+ *   other in-sandbox checkpoints stay fully usable (`.getTime()`, `.has()`, ...).
+ *
+ * Both modes reject un-awaited promises with an await-hinting diagnostic.
+ */
+export const copyIn = (value: unknown, label: string, preserveSandboxValues = false): unknown =>
+  copyBounded(value, label, 0, new Set(), preserveSandboxValues)
+
+const copyBounded = (
+  value: unknown,
+  label: string,
+  depth: number,
+  seen: Set<object>,
+  preserveSandboxValues: boolean,
+): unknown => {
+  if (depth > MAX_VALUE_DEPTH) {
+    throw new ToolRuntimeError("InvalidDataValue", `${label} exceeds the maximum value depth of ${MAX_VALUE_DEPTH}.`)
+  }
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === "string" ||
+    typeof value === "boolean" ||
+    // NaN/Infinity are allowed to exist as in-sandbox intermediates (matching real JS and a real
+    // engine) so defensive guards like `Number.isNaN(x)` / `parseInt(x) || 0` can run. They are
+    // normalized to `null` when the value leaves the sandbox - see copyOut - exactly as
+    // JSON.stringify already does at any tool boundary.
+    typeof value === "number"
+  ) {
+    return value
+  }
+
+  if (typeof value !== "object") {
+    throw new ToolRuntimeError("InvalidDataValue", `${label} must contain data only.`)
+  }
+
+  // An un-awaited promise never crosses a data checkpoint as `{}`; the diagnostic tells the
+  // model exactly how to fix the program instead.
+  if (value instanceof SandboxPromise) {
+    throw new ToolRuntimeError(
+      "InvalidDataValue",
+      `${label} contains an un-awaited Promise; await tool calls (e.g. \`const result = await tools.ns.tool(...)\`) before using their results.`,
+    )
+  }
+
+  if (preserveSandboxValues) {
+    // Intra-sandbox checkpoints keep sandbox value instances alive as leaves; their contents
+    // are never walked here (Map/Set members are validated where mutation happens, and the
+    // real boundary still serializes them below).
+    if (
+      value instanceof SandboxDate ||
+      value instanceof SandboxRegExp ||
+      value instanceof SandboxMap ||
+      value instanceof SandboxSet
+    ) {
+      return value
+    }
+    // Host instances cannot normally reach an intra-sandbox checkpoint (tool results cross
+    // the boundary first), but wrap them defensively rather than degrading to JSON forms.
+    if (value instanceof Date) return new SandboxDate(value.getTime())
+    if (value instanceof RegExp) return new SandboxRegExp(value.source, value.flags)
+    if (value instanceof Map) {
+      const wrapped = new SandboxMap()
+      for (const [key, item] of value.entries()) {
+        wrapped.map.set(copyBounded(key, label, depth + 1, seen, true), copyBounded(item, label, depth + 1, seen, true))
+      }
+      return wrapped
+    }
+    if (value instanceof Set) {
+      const wrapped = new SandboxSet()
+      for (const item of value.values()) wrapped.set.add(copyBounded(item, label, depth + 1, seen, true))
+      return wrapped
+    }
+  }
+
+  // Sandbox value types (and their host counterparts, which a host tool may legitimately
+  // return) serialize exactly as JSON.stringify would at the data boundary: a Date is its
+  // toJSON() ISO string (invalid -> null), and RegExp/Map/Set have no JSON form beyond {}.
+  if (value instanceof SandboxDate) {
+    return Number.isFinite(value.time) ? new Date(value.time).toISOString() : null
+  }
+  if (value instanceof Date) {
+    return Number.isFinite(value.getTime()) ? value.toISOString() : null
+  }
+  if (
+    value instanceof SandboxRegExp ||
+    value instanceof SandboxMap ||
+    value instanceof SandboxSet ||
+    value instanceof RegExp ||
+    value instanceof Map ||
+    value instanceof Set
+  ) {
+    return Object.create(null) as SafeObject
+  }
+
+  if (seen.has(value)) {
+    throw new ToolRuntimeError("InvalidDataValue", `${label} contains a circular value.`)
+  }
+
+  seen.add(value)
+
+  if (Array.isArray(value)) {
+    const copied = value.map((item) => copyBounded(item, label, depth + 1, seen, preserveSandboxValues))
+    seen.delete(value)
+    return copied
+  }
+
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) {
+    throw new ToolRuntimeError("InvalidDataValue", `${label} must contain plain objects only.`)
+  }
+
+  const copied: SafeObject = Object.create(null) as SafeObject
+  for (const [key, item] of Object.entries(value)) {
+    if (isBlockedMember(key)) {
+      throw new ToolRuntimeError("InvalidDataValue", `${label} contains blocked property '${key}'.`)
+    }
+    copied[key] = copyBounded(item, label, depth + 1, seen, preserveSandboxValues)
+  }
+  seen.delete(value)
+  return copied
+}
+
+export const copyOut = (value: unknown, undefinedAsNull = false): unknown => {
+  if (value === undefined && undefinedAsNull) return null
+  // Normalize non-finite numbers to null as the value crosses out of the sandbox (final return
+  // and tool-call arguments both funnel through here), matching JSON semantics - NaN/Infinity
+  // have no JSON representation, so JSON.stringify would produce null anyway.
+  if (typeof value === "number" && !Number.isFinite(value)) {
+    return null
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => copyOut(item, undefinedAsNull))
+  }
+
+  if (value !== null && typeof value === "object" && !(value instanceof ToolReference)) {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, copyOut(item, undefinedAsNull)]))
+  }
+
+  return value
+}
+
+const definitions = <R>(
+  tools: HostTools<R>,
+  path: ReadonlyArray<string> = [],
+): Array<{ path: string; definition: Definition<R> }> => {
+  const entries: Array<{ path: string; definition: Definition<R> }> = []
+  for (const [name, value] of Object.entries(tools)) {
+    const next = [...path, name]
+    if (isDefinition(value)) entries.push({ path: next.join("."), definition: value })
+    else if (typeof value !== "function") entries.push(...definitions(value, next))
+  }
+  return entries
+}
+
+const describeDefinition = <R>(path: string, definition: Definition<R>): ToolDescription => ({
+  path,
+  description: definition.description,
+  signature: `${toolExpression(path)}(input: ${inputTypeScript(definition)}): Promise<${outputTypeScript(definition)}>`,
+})
+
+const visibleDefinitions = <R>(tools: HostTools<R>) =>
+  definitions(tools).flatMap(({ path, definition }) => {
+    const description = describeDefinition(path, definition)
+    return [{ path, definition, description }]
+  })
+
+export const catalog = <R>(tools: HostTools<R>): ReadonlyArray<ToolDescription> =>
+  visibleDefinitions(tools).map(({ description }) => description)
+
+export type DiscoveryPlan = {
+  readonly catalog: ReadonlyArray<ToolDescription>
+  readonly instructions: string
+  readonly searchIndex: ReadonlyArray<SearchEntry>
+}
+
+export type SearchEntry = {
+  readonly description: ToolDescription
+  /**
+   * JSDoc-annotated multiline signature shown on search-result items; the compact
+   * single-line form (inline catalog lines) stays in `description.signature`.
+   */
+  readonly signature: string
+  /** Top-level namespace (first path segment), matched by the search `namespace` option. */
+  readonly namespace: string
+  /** Lowercased path + description + input property names/descriptions, for substring matching. */
+  readonly searchText: string
+}
+
+/**
+ * Split a query into lowercased search terms. camelCase boundaries are split
+ * (`resolveLibrary` -> `resolve library`) and every non-alphanumeric character is a
+ * separator, so `resolve-library-id`, `resolveLibraryId`, and `resolve library id` all
+ * tokenize alike. Empties and the `*` wildcard are dropped.
+ */
+const tokenize = (query: string): Array<string> =>
+  query
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .toLowerCase()
+    .split(/[^a-z0-9]+/)
+    .filter((term) => term.length > 0 && term !== "*")
+
+/**
+ * A term plus its naive singular variants (trailing "s"/"es" stripped), so a plural
+ * query term ("issues") still matches indexed text that only carries the singular
+ * ("issue"). Matching is one-directional substring containment, so the variants are
+ * needed only on the query side; scoring weights are unchanged - each field check
+ * passes when ANY form matches.
+ */
+const termForms = (term: string): Array<string> => {
+  const forms = [term]
+  if (term.endsWith("es") && term.length > 3) forms.push(term.slice(0, -2))
+  if (term.endsWith("s") && term.length > 2) forms.push(term.slice(0, -1))
+  return forms
+}
+
+const firstLine = (text: string) => text.split("\n", 1)[0]!.trim()
+
+/** One-line description used on inline catalog lines; the full text stays in search results. */
+const brief = (text: string, max = 120) => {
+  const line = firstLine(text)
+  return line.length > max ? line.slice(0, max - 1) + "..." : line
+}
+
+const catalogLine = (tool: ToolDescription) => {
+  const description = brief(tool.description)
+  return description === "" ? `  - ${tool.signature}` : `  - ${tool.signature} // ${description}`
+}
+
+const toSearchEntry = <R>(path: string, definition: Definition<R>, description: ToolDescription): SearchEntry => ({
+  description,
+  signature: `${toolExpression(path)}(input: ${inputTypeScript(definition, true)}): Promise<${outputTypeScript(definition, true)}>`,
+  namespace: path.split(".", 1)[0]!,
+  searchText: [
+    path,
+    definition.description,
+    ...inputProperties(definition).flatMap(({ name, description: property }) =>
+      property === undefined ? [name] : [name, property],
+    ),
+  ]
+    .join("\n")
+    .toLowerCase(),
+})
+
+/** The runtime search index over every described tool. Search is always registered. */
+export const searchIndex = <R>(tools: HostTools<R>): ReadonlyArray<SearchEntry> =>
+  visibleDefinitions(tools).map(({ path, definition, description }) => toSearchEntry(path, definition, description))
+
+export const assertValidTools = <R>(tools: HostTools<R>): void => {
+  if (Object.hasOwn(tools, reservedNamespace)) {
+    throw new Error(`Tool namespace '${reservedNamespace}' is reserved for CodeMode discovery tools.`)
+  }
+}
+
+/**
+ * Budgeted catalog: every namespace is always listed with its tool count; full call
+ * signatures are inlined against the `maxInlineCatalogTokens` budget (estimated tokens,
+ * chars/4) round-robin across namespaces - in each round (namespaces alphabetical), every
+ * namespace still holding un-inlined tools attempts to place its next-cheapest line, and
+ * a namespace whose next line does not fit is done while the others keep going - so every
+ * namespace gets some representation before any namespace gets everything. The section
+ * states exactly how comprehensive it is - overall (COMPLETE vs PARTIAL) and per
+ * namespace. Namespace stub lines are never budgeted: every namespace appears with its
+ * tool count even at budget 0.
+ */
+export const discoveryPlan = <R>(
+  tools: HostTools<R>,
+  maxInlineCatalogTokens = defaultMaxInlineCatalogTokens,
+): DiscoveryPlan => {
+  if (!Number.isSafeInteger(maxInlineCatalogTokens) || maxInlineCatalogTokens < 0) {
+    throw new RangeError("discovery.maxInlineCatalogTokens must be a non-negative safe integer")
+  }
+  const visible = visibleDefinitions(tools)
+  const described = visible.map(({ description }) => description)
+
+  const namespaces = new Map<string, Array<ToolDescription>>()
+  for (const tool of described) {
+    const [namespace = tool.path] = tool.path.split(".")
+    const group = namespaces.get(namespace) ?? []
+    group.push(tool)
+    namespaces.set(namespace, group)
+  }
+  const ordered = [...namespaces].sort(([left], [right]) => left.localeCompare(right))
+
+  // Select which signatures fit the budget before emitting, so the list can state
+  // exactly how comprehensive it is. Round-robin fairness: in each round (namespaces
+  // alphabetical), every namespace still holding un-inlined tools tries to place its
+  // next-cheapest line against the shared budget; a namespace whose next line does not
+  // fit is done - the others keep going - so every namespace gets some representation
+  // before any namespace gets everything.
+  const selections = ordered.map(([namespace, group]) => ({
+    namespace,
+    picked: new Set<ToolDescription>(),
+    queue: [...group].sort(
+      (left, right) =>
+        estimate(catalogLine(left)) - estimate(catalogLine(right)) || left.path.localeCompare(right.path),
+    ),
+  }))
+  let used = 0
+  let active = selections.filter((selection) => selection.queue.length > 0)
+  while (active.length > 0) {
+    const stillActive: typeof active = []
+    for (const selection of active) {
+      const tool = selection.queue[0]!
+      const cost = estimate(catalogLine(tool))
+      if (used + cost > maxInlineCatalogTokens) continue
+      selection.queue.shift()
+      selection.picked.add(tool)
+      used += cost
+      if (selection.queue.length > 0) stillActive.push(selection)
+    }
+    active = stillActive
+  }
+  const shown = new Map<string, ReadonlySet<ToolDescription>>(
+    selections.map(({ namespace, picked }) => [namespace, picked]),
+  )
+  const totalShown = selections.reduce((total, { picked }) => total + picked.size, 0)
+  const complete = totalShown === described.length
+
+  const empty = described.length === 0
+
+  // Section order is deliberate: workflow first (the top is the least likely part of a long
+  // description to be truncated or skimmed away), then rules, then syntax, with the budgeted
+  // catalog at the bottom. Example call forms use explicit `<namespace>.<tool>` placeholders -
+  // never a real or fabricated tool name.
+  const intro = [
+    "Write a CodeMode program to answer the request. Return code only.",
+    empty
+      ? "Execute JavaScript in a confined runtime."
+      : complete
+        ? "Execute JavaScript in a confined runtime. Inside this program, `tools` contains only the host-provided tools listed below; surrounding agent tools are not available unless listed here."
+        : "Execute JavaScript in a confined runtime. Inside this program, `tools` contains only the host-provided tools listed or searchable below; surrounding agent tools are not available unless listed here.",
+  ]
+
+  // The search step exists only when search is advertised (PARTIAL catalog); a COMPLETE
+  // catalog already shows every signature, so step 1 picks from the list instead.
+  const workflow = empty
+    ? []
+    : [
+        "",
+        "## Workflow",
+        "",
+        ...(complete
+          ? [
+              "1. Pick a tool from the list under `## Available tools` - each line is the exact call signature; use it as-is rather than guessing segments.",
+              "2. Call it using the exact signature shown: `const res = await tools.<namespace>.<tool>(input)` - bracket notation may appear for names that are not JavaScript identifiers.",
+              '3. Parse text results: `const data = typeof res === "string" ? JSON.parse(res) : res` - most tools return JSON as a string.',
+              "4. Return only the fields you need: `return { <field>: data.<field> }` - raw payloads get truncated and waste context.",
+            ]
+          : [
+              '1. Find a tool (skip when it is already listed below): `const { items } = await tools.$codemode.search({ query: "<intent + key nouns>" })` - short phrases like "list issues" work best.',
+              "2. Read the matches: each item is `{ path, description, signature }` - read the description before using an unfamiliar tool.",
+              "3. Call it with the result's `path` as-is (never guess segments): `const res = await tools.<namespace>.<tool>(input)` - bracket notation may appear for names that are not JavaScript identifiers.",
+              '4. Parse text results: `const data = typeof res === "string" ? JSON.parse(res) : res` - most tools return JSON as a string.',
+              "5. Return only the fields you need: `return { <field>: data.<field> }` - raw payloads get truncated and waste context.",
+            ]),
+      ]
+
+  const rules = empty
+    ? []
+    : [
+        "",
+        "## Rules",
+        "",
+        complete
+          ? "- Only tools listed here are available inside `tools`; tools from the surrounding agent/runtime are not implicitly exposed."
+          : "- Only tools listed here or returned by `tools.$codemode.search` are available inside `tools`; tools from the surrounding agent/runtime are not implicitly exposed.",
+        "- Filter, aggregate, and transform collections in code - never return them raw or call a tool per item across messages.",
+        "- A result typed `Promise<unknown>` has no guaranteed shape - verify what actually came back before relying on its fields.",
+        "- Run independent calls in parallel: `await Promise.all(items.map((item) => tools.<namespace>.<tool>(item)))`.",
+        "- `Object.keys(tools)` lists namespaces; `Object.keys(tools.<namespace>)` lists its tools; `for...in` works on both.",
+        ...(complete
+          ? []
+          : ['- Browse one namespace: `await tools.$codemode.search({ query: "", namespace: "<name>" })`.']),
+      ]
+
+  const syntax = [
+    "",
+    "## Syntax",
+    "",
+    "Standard modern JavaScript works: functions/closures, destructuring, template literals, loops, try/catch, spread, optional chaining, the usual Array/String/Object/Math/JSON methods, plus Date, RegExp, Map, Set, and Promise.all/allSettled/race/resolve/reject.",
+    "TypeScript type annotations are allowed and stripped before execution (decorators are not supported).",
+    "Not supported (each fails with a message naming the alternative): classes, generators, for await...of, .then/.catch/.finally (use await with try/catch).",
+    "Dates serialize to ISO strings at data boundaries; Map/Set/RegExp serialize to `{}`.",
+  ]
+
+  const toolSection: Array<string> = [""]
+  if (empty) {
+    toolSection.push("## Available tools", "", "No tools are currently available.")
+  } else {
+    toolSection.push(
+      complete
+        ? "## Available tools (COMPLETE list - every tool is shown below with its full call signature)"
+        : `## Available tools (PARTIAL - ${totalShown} of ${described.length} shown; find the rest with tools.$codemode.search)`,
+      "",
+    )
+    for (const [namespace, group] of ordered) {
+      const picked = shown.get(namespace)!
+      const count = `${group.length} tool${group.length === 1 ? "" : "s"}`
+      // Annotate only when a namespace is not fully shown, so a comprehensive
+      // namespace reads cleanly and a truncated one is unambiguous.
+      const label =
+        picked.size === group.length
+          ? count
+          : picked.size === 0
+            ? `${count}, none shown`
+            : `${count}, ${picked.size} shown`
+      toolSection.push(`- ${namespace} (${label})`)
+      for (const tool of group) if (picked.has(tool)) toolSection.push(catalogLine(tool))
+    }
+    if (!complete) {
+      toolSection.push("", "Search returns complete callable signatures:", `- ${searchSignature}`)
+    }
+  }
+
+  const lines = [...intro, ...workflow, ...rules, ...syntax, ...toolSection]
+  return {
+    catalog: described,
+    instructions: lines.join("\n"),
+    searchIndex: visible.map(({ path, definition, description }) => toSearchEntry(path, definition, description)),
+  }
+}
+
+/**
+ * The enumerable names at one node of the host tool tree - namespace names at the root,
+ * tool/namespace names below - powering `Object.keys(tools)` and `for...in` over tool
+ * references. A callable tool is a leaf and enumerates as `[]` (like `Object.keys` of a
+ * function in JS). An unknown path is an `UnknownTool` error pointing at the working
+ * discovery idioms, mirroring how calling an unknown tool fails.
+ */
+const namespaceKeys = <R>(
+  tools: HostTools<R>,
+  path: ReadonlyArray<string>,
+  searchEnabled: boolean,
+): ReadonlyArray<string> => {
+  // The reserved discovery namespace is virtual (never present in the host tree); enumerate
+  // it explicitly so `Object.keys(tools.$codemode)` matches the callable surface.
+  if (searchEnabled && path.length === 1 && path[0] === reservedNamespace) return ["search"]
+  let value: HostTool<R> | Definition<R> | HostTools<R> = tools
+  for (const segment of path) {
+    if (
+      isBlockedMember(segment) ||
+      typeof value === "function" ||
+      isDefinition(value) ||
+      !Object.hasOwn(value, segment)
+    ) {
+      throw new ToolRuntimeError(
+        "UnknownTool",
+        `Unknown tool namespace '${path.join(".")}'.`,
+        searchEnabled
+          ? [
+              "Object.keys(tools) lists the available namespaces; tools.$codemode.search({ query }) finds described tools.",
+            ]
+          : ["Object.keys(tools) lists the available namespaces."],
+      )
+    }
+    value = value[segment] as HostTool<R> | Definition<R> | HostTools<R>
+  }
+  if (typeof value === "function" || isDefinition(value)) return []
+  return Object.keys(value)
+}
+
+const resolve = <R>(
+  tools: HostTools<R>,
+  path: ReadonlyArray<string>,
+  searchEnabled: boolean,
+): HostTool<R> | Definition<R> => {
+  let value: HostTool<R> | Definition<R> | HostTools<R> = tools
+
+  for (const segment of path) {
+    if (
+      isBlockedMember(segment) ||
+      typeof value === "function" ||
+      isDefinition(value) ||
+      !Object.hasOwn(value, segment)
+    ) {
+      throw new ToolRuntimeError(
+        "UnknownTool",
+        `Unknown tool '${path.join(".")}'.`,
+        searchEnabled ? ["Use tools.$codemode.search({ query }) to find available described tools."] : [],
+      )
+    }
+    value = value[segment] as HostTool<R> | Definition<R> | HostTools<R>
+  }
+
+  if (typeof value !== "function" && !isDefinition(value)) {
+    throw new ToolRuntimeError("UnknownTool", `Tool '${path.join(".")}' is not callable.`)
+  }
+
+  return value
+}
+
+export type ToolRuntime<R = never> = {
+  readonly root: ToolReference
+  readonly calls: Array<ToolCall>
+  readonly invoke: (path: ReadonlyArray<string>, args: Array<unknown>) => Effect.Effect<unknown, unknown, R>
+  /** Enumerable namespace/tool names at one node of the host tool tree; see `namespaceKeys`. */
+  readonly keys: (path: ReadonlyArray<string>) => ReadonlyArray<string>
+}
+
+const failureMessage = (error: unknown): string =>
+  error instanceof ToolError || error instanceof ToolRuntimeError ? error.message : "Tool execution failed"
+
+export const make = <R>(
+  tools: HostTools<R>,
+  /** Undefined means unlimited tool calls. */
+  maxToolCalls: number | undefined,
+  hooks?: ToolCallHooks<R>,
+  searchIndex?: ReadonlyArray<SearchEntry>,
+): ToolRuntime<R> => {
+  const calls: Array<ToolCall> = []
+  const searchEnabled = searchIndex !== undefined
+
+  // Wraps the settling portion of a tool call so onToolCallEnd observes success and failure
+  // symmetrically. Interruption (e.g. the execution timeout) fires neither outcome.
+  const observeEnd = <A, E>(effect: Effect.Effect<A, E, R>, call: ToolCallStarted): Effect.Effect<A, E, R> => {
+    const onEnd = hooks?.onToolCallEnd
+    if (onEnd === undefined) return effect
+    const startedAt = Date.now()
+    return effect.pipe(
+      Effect.tap(() => onEnd({ ...call, durationMs: Date.now() - startedAt, outcome: "success" })),
+      Effect.tapError((error) =>
+        onEnd({ ...call, durationMs: Date.now() - startedAt, outcome: "failure", message: failureMessage(error) }),
+      ),
+    )
+  }
+
+  const decodeOutput = (value: unknown, name: string) =>
+    Effect.try({
+      try: () => copyIn(value, `Result from tool '${name}'`),
+      catch: () => new ToolRuntimeError("InvalidToolOutput", `Invalid output from tool '${name}'.`),
+    })
+
+  const recordCall = (call: ToolCall): void => {
+    if (maxToolCalls !== undefined && calls.length >= maxToolCalls) {
+      throw new ToolRuntimeError("ToolCallLimitExceeded", `Execution exceeded its tool-call limit of ${maxToolCalls}.`)
+    }
+    calls.push(call)
+  }
+
+  return {
+    root: new ToolReference([]),
+    calls,
+    keys: (path) => namespaceKeys(tools, path, searchEnabled),
+    invoke: (path, args) =>
+      Effect.gen(function* () {
+        const name = path.join(".")
+        const externalArgs = args.map((arg) => copyOut(copyIn(arg, `Arguments for tool '${name}'`)))
+        const call = { name }
+        const recordAndObserve = (input: unknown) =>
+          Effect.sync(() => {
+            recordCall(call)
+            return calls.length - 1
+          }).pipe(Effect.tap((index) => hooks?.onToolCallStart?.({ index, name, input }) ?? Effect.void))
+        if (name === "$codemode.search") {
+          if (!searchEnabled) throw new ToolRuntimeError("UnknownTool", `Unknown tool '${name}'.`)
+          const input = externalArgs[0]
+          if (externalArgs.length !== 1 || input === null || typeof input !== "object" || Array.isArray(input)) {
+            throw new ToolRuntimeError(
+              "InvalidToolInput",
+              "tools.$codemode.search expects { query?: string; namespace?: string; limit?: number }.",
+            )
+          }
+          const request = input as { query?: unknown; namespace?: unknown; limit?: unknown }
+          if (request.query !== undefined && typeof request.query !== "string") {
+            throw new ToolRuntimeError(
+              "InvalidToolInput",
+              "tools.$codemode.search query must be a string when provided.",
+            )
+          }
+          if (request.namespace !== undefined && typeof request.namespace !== "string") {
+            throw new ToolRuntimeError(
+              "InvalidToolInput",
+              "tools.$codemode.search namespace must be a string when provided.",
+            )
+          }
+          if (
+            request.limit !== undefined &&
+            (typeof request.limit !== "number" || !Number.isSafeInteger(request.limit) || request.limit <= 0)
+          ) {
+            throw new ToolRuntimeError(
+              "InvalidToolInput",
+              "tools.$codemode.search limit must be a positive safe integer when provided.",
+            )
+          }
+          const query = typeof request.query === "string" ? request.query : ""
+          const namespace = typeof request.namespace === "string" ? request.namespace : undefined
+          const index = yield* recordAndObserve(request)
+          return yield* observeEnd(
+            Effect.try({
+              try: () => {
+                const limit = typeof request.limit === "number" ? request.limit : defaultSearchLimit
+                const scoped =
+                  namespace === undefined ? searchIndex : searchIndex.filter((entry) => entry.namespace === namespace)
+                // A query that names one tool path exactly (canonical path or rendered
+                // JavaScript expression) is a lookup, not a search: return that tool alone.
+                const trimmed = query.trim()
+                const pathQuery = trimmed.startsWith("tools.") ? trimmed.slice("tools.".length) : trimmed
+                const exact =
+                  pathQuery === ""
+                    ? undefined
+                    : scoped.find(
+                        (entry) =>
+                          entry.description.path === pathQuery || toolExpression(entry.description.path) === trimmed,
+                      )
+                const terms = tokenize(query).map(termForms)
+                // Additive field-weighted scoring, summed across terms: exact path or path
+                // segment (20) > path substring (8) > description substring (4) > any
+                // searchable text, incl. input parameter names/descriptions (2). Each term
+                // matches a field when any of its forms (the term or a singular variant)
+                // does. An empty query browses everything, alphabetical by path.
+                const ranked =
+                  exact !== undefined
+                    ? [exact]
+                    : scoped
+                        .map((entry) => {
+                          const path = entry.description.path.toLowerCase()
+                          const description = entry.description.description.toLowerCase()
+                          const score = terms.reduce(
+                            (total, forms) =>
+                              total +
+                              (forms.some((form) => path === form || path.endsWith(`.${form}`)) ? 20 : 0) +
+                              (forms.some((form) => path.includes(form)) ? 8 : 0) +
+                              (forms.some((form) => description.includes(form)) ? 4 : 0) +
+                              (forms.some((form) => entry.searchText.includes(form)) ? 2 : 0),
+                            0,
+                          )
+                          return { entry, score }
+                        })
+                        .filter(({ score }) => terms.length === 0 || score > 0)
+                        .sort(
+                          (left, right) =>
+                            right.score - left.score ||
+                            left.entry.description.path.localeCompare(right.entry.description.path),
+                        )
+                        .map(({ entry }) => entry)
+                // Result paths are rendered as JavaScript expressions so each `path` is
+                // directly usable as the call site (`await tools.github.list({ ... })` or
+                // `await tools.ns["dashed-name"]({ ... })`). The signature is the pretty,
+                // JSDoc-annotated form (schema descriptions and constraints ride along as
+                // field comments).
+                const items = ranked.slice(0, limit).map(({ description, signature }) => ({
+                  ...description,
+                  path: toolExpression(description.path),
+                  signature,
+                }))
+                return copyIn({ items, total: ranked.length }, "Result from tool '$codemode.search'")
+              },
+              catch: (cause) => cause,
+            }),
+            { index, name, input: request },
+          )
+        }
+
+        const tool = resolve(tools, path, searchEnabled)
+        let describedInput: unknown
+        if (isDefinition(tool)) {
+          if (externalArgs.length !== 1)
+            throw new ToolRuntimeError("InvalidToolInput", `Tool '${name}' expects exactly one input object.`)
+          describedInput = yield* Effect.try({
+            try: () => decodeToolInput(tool, externalArgs[0]),
+            catch: (cause) =>
+              new ToolRuntimeError("InvalidToolInput", `Invalid input for tool '${name}': ${String(cause)}`),
+          })
+        }
+        const input = isDefinition(tool) ? describedInput : externalArgs
+        const index = yield* recordAndObserve(input)
+        const currentCall = { index, name, input }
+        if (isDefinition(tool)) {
+          return yield* observeEnd(
+            Effect.gen(function* () {
+              const raw = yield* runHost(Effect.suspend(() => tool.run(describedInput)))
+              const result = yield* Effect.try({
+                try: () => decodeToolOutput(tool, raw),
+                catch: () => new ToolRuntimeError("InvalidToolOutput", `Invalid output from tool '${name}'.`),
+              })
+              return yield* decodeOutput(result, name)
+            }),
+            currentCall,
+          )
+        }
+        return yield* observeEnd(
+          Effect.gen(function* () {
+            return yield* decodeOutput(yield* runHost(Effect.suspend(() => tool(...externalArgs))), name)
+          }),
+          currentCall,
+        )
+      }),
+  }
+}
+
+export * as ToolRuntime from "./tool-runtime.js"

packages/codemode/src/tool.ts

@@ -0,0 +1,348 @@
+import { Effect, Schema } from "effect"
+
+/**
+ * JSON Schema subset accepted for render-only tool schemas.
+ *
+ * A JSON-Schema-described side of a tool is used to generate the model-visible TypeScript
+ * signature only - CodeMode performs no validation against it. This is the natural shape for
+ * adapter-provided tools (e.g. MCP definitions) whose schemas arrive as JSON Schema documents.
+ */
+export type JsonSchema = {
+  readonly type?: string | ReadonlyArray<string>
+  readonly enum?: ReadonlyArray<unknown>
+  readonly const?: unknown
+  readonly anyOf?: ReadonlyArray<JsonSchema>
+  readonly oneOf?: ReadonlyArray<JsonSchema>
+  readonly properties?: Readonly<Record<string, JsonSchema>>
+  readonly required?: ReadonlyArray<string>
+  readonly items?: JsonSchema
+  readonly additionalProperties?: boolean | JsonSchema
+  readonly description?: string
+  readonly default?: unknown
+  readonly format?: string
+  readonly deprecated?: boolean
+  readonly minItems?: number
+  readonly maxItems?: number
+  readonly $ref?: string
+  readonly $defs?: Readonly<Record<string, JsonSchema>>
+  readonly definitions?: Readonly<Record<string, JsonSchema>>
+}
+
+/** Either a validating Effect Schema or a render-only JSON Schema document. */
+export type ToolSchema = Schema.Decoder<unknown> | JsonSchema
+
+/** Schema-backed tool definition consumed by a CodeMode tool tree. */
+export type Definition<R = never> = {
+  readonly _tag: "CodeModeTool"
+  readonly description: string
+  readonly input: ToolSchema
+  readonly output: ToolSchema | undefined
+  readonly run: (input: unknown) => Effect.Effect<unknown, unknown, R>
+}
+
+/** The value `run` receives: the decoded type for Effect Schemas, `unknown` for JSON Schemas. */
+export type InputType<S> = S extends Schema.Decoder<unknown> ? S["Type"] : unknown
+
+/** The value `run` returns: the encoded type for Effect Schemas, `unknown` otherwise. */
+export type ResultType<S> = S extends Schema.Decoder<unknown> ? S["Encoded"] : unknown
+
+/** Options for defining one CodeMode tool. */
+export type Options<I extends ToolSchema, O extends ToolSchema | undefined, R = never> = {
+  readonly description: string
+  readonly input: I
+  readonly output?: O
+  readonly run: (input: InputType<I>) => Effect.Effect<ResultType<O>, unknown, R>
+}
+
+export const isDefinition = <R = never>(value: unknown): value is Definition<R> =>
+  typeof value === "object" && value !== null && "_tag" in value && value._tag === "CodeModeTool"
+
+const isEffectSchema = (schema: ToolSchema): schema is Schema.Decoder<unknown> & Schema.Top => Schema.isSchema(schema)
+
+const renderLiteral = (value: unknown): string => JSON.stringify(value) ?? "unknown"
+
+/**
+ * Bare TypeScript identifier - usable unquoted as an object key (and, in the tool runtime,
+ * with dot access as a tool-path segment). Anything else must be quoted/bracketed.
+ */
+export const identifierSegment = /^[A-Za-z_$][A-Za-z0-9_$]*$/
+
+/** Renders a property name as a valid TS object key: bare when an identifier, quoted otherwise. */
+const renderKey = (name: string): string => (identifierSegment.test(name) ? name : JSON.stringify(name))
+
+const effectNumberSentinel = (schema: JsonSchema) =>
+  schema.type === "string" &&
+  Array.isArray(schema.enum) &&
+  schema.enum.length === 1 &&
+  (schema.enum[0] === "NaN" || schema.enum[0] === "Infinity" || schema.enum[0] === "-Infinity")
+
+/**
+ * Recursion ceiling for schema rendering. Object, array, and union recursion all increment
+ * depth, so this bounds every recursion path - pathological or structurally cyclic schemas
+ * degrade to `unknown` instead of overflowing the stack (rendering must never throw).
+ */
+const MAX_RENDER_DEPTH = 8
+
+type RenderContext = {
+  readonly definitions: Readonly<Record<string, JsonSchema>>
+  /** Indented, JSDoc-annotated multiline rendering (search results); compact single line otherwise. */
+  readonly pretty: boolean
+}
+
+/**
+ * Schema constraints a TypeScript type cannot express natively but a model benefits from,
+ * surfaced as JSDoc tags (`@deprecated`, `@default`, `@format`, `@minItems`, `@maxItems`).
+ */
+const docTags = (schema: JsonSchema): Array<string> => {
+  const tags: Array<string> = []
+  if (schema.deprecated === true) tags.push("@deprecated")
+  if (schema.default !== undefined) {
+    try {
+      const rendered = JSON.stringify(schema.default)
+      if (rendered !== undefined) tags.push(`@default ${rendered}`)
+    } catch {
+      // unserializable default: skip rather than emit a broken tag
+    }
+  }
+  if (typeof schema.format === "string") tags.push(`@format ${schema.format}`)
+  if (typeof schema.minItems === "number") tags.push(`@minItems ${schema.minItems}`)
+  if (typeof schema.maxItems === "number") tags.push(`@maxItems ${schema.maxItems}`)
+  return tags
+}
+
+/**
+ * Format a schema `description` plus `tags` as a JSDoc comment at the given indent,
+ * preserving multi-line text (a single line stays `/** ... *\/`; multiple lines become a
+ * `*`-prefixed block). `*\/` is neutralized so nothing can close the comment early, and
+ * blank leading/trailing lines are trimmed. Returns "" (else a trailing newline) so
+ * callers can prepend it directly to the field line.
+ */
+const jsdoc = (description: string | undefined, tags: ReadonlyArray<string>, pad: string): string => {
+  const lines = [...(description === undefined ? [] : description.split("\n")), ...tags].map((line) =>
+    line.replaceAll("*/", "* /").replace(/\s+$/, ""),
+  )
+  while (lines.length > 0 && lines[0]!.trim() === "") lines.shift()
+  while (lines.length > 0 && lines[lines.length - 1]!.trim() === "") lines.pop()
+  if (lines.length === 0) return ""
+  if (lines.length === 1) return `${pad}/** ${lines[0]} */\n`
+  const body = lines.map((line) => `${pad} *${line === "" ? "" : ` ${line}`}`).join("\n")
+  return `${pad}/**\n${body}\n${pad} */\n`
+}
+
+const renderSchema = (
+  schema: JsonSchema,
+  ctx: RenderContext,
+  depth = 0,
+  seen: ReadonlySet<string> = new Set(),
+): string => {
+  if (depth > MAX_RENDER_DEPTH) return "unknown"
+  if (schema.$ref) {
+    const name = schema.$ref.split("/").pop()
+    if (!name || !ctx.definitions[name]) return name ?? "unknown"
+    if (seen.has(name)) return name // recursive type: reference by name rather than loop
+    return renderSchema(ctx.definitions[name], ctx, depth, new Set([...seen, name]))
+  }
+  if (schema.const !== undefined) return renderLiteral(schema.const)
+  if (schema.enum) return schema.enum.map(renderLiteral).join(" | ")
+  const alternatives = schema.anyOf ?? schema.oneOf
+  if (alternatives) {
+    // Effect's number schema emits `anyOf: [{ type: "number" }, { const: "NaN" },
+    // { const: "Infinity" }, { const: "-Infinity" }]`. Collapse only that artifact;
+    // real JSON Schema unions such as `string | number` or `number | null` must keep
+    // every branch.
+    if (
+      alternatives.some((item) => item.type === "number") &&
+      alternatives.every((item) => item.type === "number" || effectNumberSentinel(item))
+    )
+      return "number"
+    // An empty Schema.Struct({}) emits `anyOf: [{ type: "object" }, { type: "array" }]`
+    // (no properties/items); render the bare shape as {} instead of `{} | Array<unknown>`.
+    if (
+      alternatives.length === 2 &&
+      alternatives[0]?.type === "object" &&
+      alternatives[0].properties === undefined &&
+      alternatives[1]?.type === "array" &&
+      alternatives[1].items === undefined
+    ) {
+      return "{}"
+    }
+    return alternatives.map((item) => renderSchema(item, ctx, depth + 1, seen)).join(" | ")
+  }
+  if (Array.isArray(schema.type)) {
+    return schema.type.map((item) => renderSchema({ type: item }, ctx, depth + 1, seen)).join(" | ")
+  }
+  if (schema.type === "string") return "string"
+  if (schema.type === "number" || schema.type === "integer") return "number"
+  if (schema.type === "boolean") return "boolean"
+  if (schema.type === "null") return "null"
+  if (schema.type === "array") return `Array<${renderSchema(schema.items ?? {}, ctx, depth + 1, seen)}>`
+  if (schema.type === "object" || schema.properties) {
+    const required = new Set(schema.required ?? [])
+    const properties = Object.entries(schema.properties ?? {})
+    const additional = schema.additionalProperties
+    const indexType =
+      additional && typeof additional === "object" ? renderSchema(additional, ctx, depth + 1, seen) : undefined
+    const field = ([name, value]: readonly [string, JsonSchema]) =>
+      `${renderKey(name)}${required.has(name) ? "" : "?"}: ${renderSchema(value, ctx, depth + 1, seen)}`
+
+    if (!ctx.pretty) {
+      const fields = properties.map(field)
+      if (indexType !== undefined) fields.push(`[key: string]: ${indexType}`)
+      return fields.length === 0 ? "{}" : `{ ${fields.join("; ")} }`
+    }
+
+    // Pretty: an indented block, each described field preceded by its JSDoc comment.
+    if (properties.length === 0 && indexType === undefined) return "{}"
+    const pad = "  ".repeat(depth + 1)
+    const lines = properties.map(
+      (entry) => `${jsdoc(entry[1].description, docTags(entry[1]), pad)}${pad}${field(entry)}`,
+    )
+    if (indexType !== undefined) lines.push(`${pad}[key: string]: ${indexType}`)
+    return `{\n${lines.join("\n")}\n${"  ".repeat(depth)}}`
+  }
+  return "unknown"
+}
+
+export const toTypeScript = (schema: Schema.Top, decoded = false, pretty = false): string => {
+  try {
+    const visible = decoded ? Schema.toType(schema) : schema
+    const document = Schema.toJsonSchemaDocument(visible) as {
+      readonly schema: JsonSchema
+      readonly definitions?: Readonly<Record<string, JsonSchema>>
+    }
+    return renderSchema(document.schema, { definitions: document.definitions ?? {}, pretty })
+  } catch {
+    return "unknown"
+  }
+}
+
+/** Renders a raw JSON Schema document as a TypeScript type string. */
+export const jsonSchemaToTypeScript = (schema: JsonSchema, pretty = false): string => {
+  try {
+    return renderSchema(schema, { definitions: { ...(schema.definitions ?? {}), ...(schema.$defs ?? {}) }, pretty })
+  } catch {
+    return "unknown"
+  }
+}
+
+/** One input property of a tool, extracted best-effort from its input schema. */
+export type InputProperty = {
+  readonly name: string
+  readonly description: string | undefined
+  readonly required: boolean
+}
+
+/**
+ * The property names, descriptions, and required flags of a tool's input schema - the raw
+ * material for search text. Best-effort: Effect Schemas go through their
+ * JSON Schema document (the same emission signature rendering uses); JSON Schemas are read
+ * directly, resolving a trivial top-level `$ref` into `$defs`/`definitions` when present.
+ * Anything unresolvable yields `[]` (search falls back to path + description).
+ */
+export const inputProperties = <R>(definition: Definition<R>): Array<InputProperty> => {
+  try {
+    const document = isEffectSchema(definition.input)
+      ? (Schema.toJsonSchemaDocument(definition.input) as {
+          readonly schema: JsonSchema
+          readonly definitions?: Readonly<Record<string, JsonSchema>>
+        })
+      : {
+          schema: definition.input,
+          definitions: { ...(definition.input.definitions ?? {}), ...(definition.input.$defs ?? {}) },
+        }
+    const definitions = document.definitions ?? {}
+    let schema = document.schema
+    if (schema.$ref !== undefined) {
+      const name = schema.$ref.split("/").pop()
+      const resolved = name === undefined ? undefined : definitions[name]
+      if (resolved === undefined) return []
+      schema = resolved
+    }
+    const required = new Set(schema.required ?? [])
+    return Object.entries(schema.properties ?? {}).map(([name, value]) => ({
+      name,
+      description: typeof value.description === "string" ? value.description : undefined,
+      required: required.has(name),
+    }))
+  } catch {
+    return []
+  }
+}
+
+/**
+ * The model-visible TypeScript type of a tool's input. `pretty` renders an indented
+ * multiline block with schema descriptions and constraints as JSDoc comments on the
+ * fields; the default stays the compact single-line form.
+ */
+export const inputTypeScript = <R>(definition: Definition<R>, pretty = false): string =>
+  isEffectSchema(definition.input)
+    ? toTypeScript(definition.input, false, pretty)
+    : jsonSchemaToTypeScript(definition.input, pretty)
+
+/**
+ * The model-visible TypeScript type of a tool's result; tools without an output schema
+ * return `unknown`. `pretty` renders the JSDoc-annotated multiline form, as for inputs.
+ */
+export const outputTypeScript = <R>(definition: Definition<R>, pretty = false): string =>
+  definition.output === undefined
+    ? "unknown"
+    : isEffectSchema(definition.output)
+      ? toTypeScript(definition.output, true, pretty)
+      : jsonSchemaToTypeScript(definition.output, pretty)
+
+/**
+ * Decodes tool input before `run` is invoked. Effect Schemas validate (throwing on failure);
+ * JSON-Schema-described inputs pass through unvalidated (render-only).
+ */
+export const decodeInput = <R>(definition: Definition<R>, value: unknown): unknown =>
+  isEffectSchema(definition.input) ? Schema.decodeUnknownSync(definition.input)(value) : value
+
+/**
+ * Decodes a tool result before it is exposed to the program. Effect Schemas validate and
+ * transform (throwing on failure); JSON Schema outputs and tools without an output schema pass
+ * the host value through unchanged.
+ */
+export const decodeOutput = <R>(definition: Definition<R>, value: unknown): unknown =>
+  definition.output !== undefined && isEffectSchema(definition.output)
+    ? Schema.decodeUnknownSync(definition.output)(value)
+    : value
+
+/**
+ * Defines one schema-described tool available to a CodeMode program through `tools.*`.
+ *
+ * `input` and `output` each accept a validating Effect Schema or a render-only JSON Schema
+ * document. Effect Schema input is decoded before `run` is invoked, and `run` returns the
+ * encoded representation of an Effect Schema `output`, which CodeMode decodes before returning
+ * it to the program. JSON Schemas only shape the model-visible signature; values pass through
+ * unvalidated. `output` is optional - without it the signature advertises `unknown` and the
+ * host result is exposed as-is. The host tool remains responsible for authorization and
+ * durable side-effect handling.
+ *
+ * @example
+ * ```ts
+ * const lookup = Tool.make({
+ *   description: "Look up an order",
+ *   input: Schema.Struct({ id: Schema.String }),
+ *   output: Schema.Struct({ status: Schema.String }),
+ *   run: ({ id }) => Effect.succeed({ status: "open" }),
+ * })
+ *
+ * const fromJsonSchema = Tool.make({
+ *   description: "Call an adapter-described tool",
+ *   input: { type: "object", properties: { id: { type: "string" } }, required: ["id"] },
+ *   run: (input) => callHost(input),
+ * })
+ * ```
+ */
+export const make = <I extends ToolSchema, const O extends ToolSchema | undefined = undefined, R = never>(
+  options: Options<I, O, R>,
+): Definition<R> => ({
+  _tag: "CodeModeTool",
+  description: options.description,
+  input: options.input,
+  output: options.output,
+  run: (input) => options.run(input as InputType<I>),
+})
+
+/** Constructors for schema-backed tools exposed inside CodeMode programs. */
+export const Tool = { make, isDefinition }

packages/codemode/src/values.ts

@@ -0,0 +1,34 @@
+import type { Effect, Fiber } from "effect"
+
+export class SandboxPromise {
+  interrupted = false
+  constructor(
+    readonly fiber: Fiber.Fiber<unknown, unknown> | undefined,
+    readonly immediate?: Effect.Effect<unknown, unknown>,
+  ) {}
+}
+
+export class SandboxDate {
+  constructor(readonly time: number) {}
+}
+
+export class SandboxRegExp {
+  readonly regex: RegExp
+  constructor(pattern: string, flags: string) {
+    this.regex = new RegExp(pattern, flags)
+  }
+}
+
+export class SandboxMap {
+  readonly map = new Map<unknown, unknown>()
+}
+
+export class SandboxSet {
+  readonly set = new Set<unknown>()
+}
+
+export const isSandboxValue = (value: unknown): value is SandboxDate | SandboxRegExp | SandboxMap | SandboxSet =>
+  value instanceof SandboxDate ||
+  value instanceof SandboxRegExp ||
+  value instanceof SandboxMap ||
+  value instanceof SandboxSet

packages/codemode/test/enumeration.test.ts

@@ -0,0 +1,159 @@
+import { describe, expect, test } from "bun:test"
+import { Effect, Schema } from "effect"
+import { CodeMode, Tool } from "../src/index.js"
+
+// Key enumeration: Object.keys and for...in share one surface over plain objects, arrays
+// (index strings), and tool references (namespace/tool names from the host tool tree), so a
+// model can discover what it may call instead of guessing names from the instructions. The
+// motivating transcript: `Object.keys(tools)` failed with the generic plain-objects-only
+// message and `for (const key in tools)` was unsupported syntax, forcing blind guesses.
+
+const echo = (description: string) =>
+  Tool.make({
+    description,
+    input: Schema.Struct({ value: Schema.String }),
+    output: Schema.String,
+    run: ({ value }) => Effect.succeed(value),
+  })
+
+const tools = {
+  github: { list_issues: echo("List issues"), get_issue: echo("Get one issue") },
+  memory: { search: echo("Search memory") },
+  playwright: { navigate: echo("Navigate somewhere") },
+}
+
+const run = (code: string) => Effect.runPromise(CodeMode.execute({ tools, code }))
+const value = async (code: string) => {
+  const result = await run(code)
+  if (!result.ok) throw new Error(`expected success, got ${result.error.kind}: ${result.error.message}`)
+  return result.value
+}
+const error = async (code: string) => {
+  const result = await run(code)
+  if (result.ok) throw new Error(`expected failure, got value ${JSON.stringify(result.value)}`)
+  return result.error
+}
+
+describe("Object.keys over tool references", () => {
+  test("enumerates top-level namespaces (the transcript program)", async () => {
+    expect(
+      await value(`
+      const namespaces = Object.keys(tools)
+      return { namespaces, count: namespaces.length }
+    `),
+    ).toEqual({ namespaces: ["github", "memory", "playwright"], count: 3 })
+  })
+
+  test("enumerates tool names at a nested namespace", async () => {
+    expect(await value(`return Object.keys(tools.github)`)).toEqual(["list_issues", "get_issue"])
+  })
+
+  test("a callable tool is a leaf and enumerates as []", async () => {
+    expect(await value(`return Object.keys(tools.github.list_issues)`)).toEqual([])
+  })
+
+  test("the virtual discovery namespace enumerates its callable surface", async () => {
+    expect(await value(`return Object.keys(tools.$codemode)`)).toEqual(["search"])
+  })
+
+  test("an unknown namespace is an UnknownTool error pointing at the discovery idioms", async () => {
+    const failure = await error(`return Object.keys(tools.nonexistent)`)
+    expect(failure.kind).toBe("UnknownTool")
+    expect(failure.message).toContain("Unknown tool namespace 'nonexistent'")
+    expect(failure.suggestions?.join(" ")).toContain("Object.keys(tools)")
+  })
+
+  test("Object.values/entries on a tool reference explain the working idioms", async () => {
+    for (const method of ["values", "entries"] as const) {
+      const failure = await error(`return Object.${method}(tools)`)
+      expect(failure.kind).toBe("InvalidDataValue")
+      expect(failure.message).toContain(
+        `Object.${method}(...) cannot read tool references: they are not plain data. Use Object.keys(tools) for names, or tools.$codemode.search({ query }) for signatures.`,
+      )
+    }
+    const nested = await error(`return Object.entries(tools.github)`)
+    expect(nested.message).toContain("Use Object.keys(tools) for names")
+  })
+})
+
+describe("Object.keys over arrays", () => {
+  test("returns index strings, like JS", async () => {
+    expect(await value(`return Object.keys(["a", "b", "c"])`)).toEqual(["0", "1", "2"])
+    expect(await value(`return Object.keys([])`)).toEqual([])
+  })
+
+  test("objects keep their own enumerable keys", async () => {
+    expect(await value(`return Object.keys({ a: 1, b: 2 })`)).toEqual(["a", "b"])
+  })
+
+  test("non-object inputs still fail clearly", async () => {
+    const failure = await error(`return Object.keys("nope")`)
+    expect(failure.message).toContain("Object.keys expects a data object or array")
+  })
+})
+
+describe("for...in", () => {
+  test("iterates own enumerable keys of a plain object with break/continue", async () => {
+    expect(
+      await value(`
+      const seen = []
+      for (const key in { a: 1, b: 2, c: 3, d: 4 }) {
+        if (key === "b") continue
+        if (key === "d") break
+        seen.push(key)
+      }
+      return seen
+    `),
+    ).toEqual(["a", "c"])
+  })
+
+  test("iterates index strings over arrays", async () => {
+    expect(
+      await value(`
+      const indexes = []
+      for (const i in ["x", "y", "z"]) {
+        if (i === "2") break
+        indexes.push(i)
+      }
+      return indexes
+    `),
+    ).toEqual(["0", "1"])
+  })
+
+  test("supports let declarations and bare identifiers", async () => {
+    expect(
+      await value(`
+      let last = ""
+      for (let key in { a: 1, b: 2 }) last = key
+      return last
+    `),
+    ).toBe("b")
+    expect(
+      await value(`
+      let key = "before"
+      for (key in { only: 1 }) {}
+      return key
+    `),
+    ).toBe("only")
+  })
+
+  test("enumerates namespaces and tools from the host tool tree", async () => {
+    expect(
+      await value(`
+      const names = []
+      for (const ns in tools) {
+        for (const name in tools[ns]) names.push(ns + "." + name)
+      }
+      return names
+    `),
+    ).toEqual(["github.list_issues", "github.get_issue", "memory.search", "playwright.navigate"])
+  })
+
+  test("unsupported values fail with a hint at for...of and Object.keys", async () => {
+    for (const expression of [`"text"`, "new Map([[1, 2]])", "new Set([1])", "42", "null"]) {
+      const failure = await error(`for (const key in ${expression}) {}; return "no"`)
+      expect(failure.message).toContain("for...in requires a plain object, array, or tools reference")
+      expect(failure.message).toContain("Use for...of for arrays/strings/Maps/Sets, or Object.keys(value)")
+    }
+  })
+})

packages/codemode/test/parity.test.ts

@@ -0,0 +1,425 @@
+import { describe, expect, test } from "bun:test"
+import { Effect } from "effect"
+import { CodeMode } from "../src/index.js"
+import { ToolRuntime } from "../src/tool-runtime.js"
+
+// Runs a CodeMode program with no host tools and returns the ExecuteResult. These tests pin the
+// JS-parity behaviors for the "99% of ordinary defensive JavaScript just works" goal: cases where
+// a strict interpreter would throw but idiomatic JS yields undefined / succeeds.
+//
+// Note on the result boundary: this package normalizes a bare `undefined` result to `null` when
+// it crosses out of the sandbox (results are JSON data), so tests asserting an in-sandbox
+// `undefined` read check `=== undefined` inside the program and `null` at the boundary.
+const run = (code: string) => Effect.runPromise(CodeMode.execute({ code, tools: {} }))
+const value = async (code: string) => {
+  const result = await run(code)
+  if (!result.ok) throw new Error(`expected success, got ${result.error.kind}: ${result.error.message}`)
+  return result.value
+}
+const error = async (code: string) => {
+  const result = await run(code)
+  if (result.ok) throw new Error(`expected failure, got value ${JSON.stringify(result.value)}`)
+  return result.error
+}
+
+describe("H2: string property access reads as undefined (not a throw)", () => {
+  test("unknown property on a string is undefined", async () => {
+    expect(await value(`const s = "hi"; return s.login === undefined`)).toBe(true)
+    expect(await value(`const s = "hi"; return s.login`)).toBeNull()
+  })
+
+  test("optional chaining + fallback on a string does not throw", async () => {
+    expect(await value(`const s = "hi"; return s?.login ?? "fallback"`)).toBe("fallback")
+  })
+
+  test("the real MCP pattern: result is a JSON string, defensive read falls through", async () => {
+    // me.result is a string; me.result?.login is undefined, so we fall back to the raw string.
+    expect(await value(`const me = { result: '{"login":"x"}' }; return me.result?.login ?? me.result`)).toBe(
+      '{"login":"x"}',
+    )
+  })
+
+  test("unknown property on a number is undefined", async () => {
+    expect(await value(`return (5).foo ?? "n"`)).toBe("n")
+  })
+
+  test("supported string methods still work", async () => {
+    expect(await value(`return "AB".toLowerCase()`)).toBe("ab")
+    expect(await value(`return "hello".length`)).toBe(5)
+  })
+})
+
+describe("H3: array property access reads as undefined (not a throw)", () => {
+  test("unknown property on an array is undefined", async () => {
+    expect(await value(`return [1,2,3].foo === undefined`)).toBe(true)
+    expect(await value(`return [1,2,3].foo`)).toBeNull()
+  })
+
+  test("optional chaining on an array does not throw", async () => {
+    expect(await value(`return [1,2,3]?.foo ?? "fb"`)).toBe("fb")
+  })
+
+  test("unknown property reads stay undefined for methods CodeMode does not implement", async () => {
+    expect(await value(`return [1,2,3].toSpliced === undefined`)).toBe(true)
+  })
+
+  test("supported array methods and indexing still work", async () => {
+    expect(await value(`return [1,2,3].map(x => x + 1)`)).toEqual([2, 3, 4])
+    expect(await value(`return [1,2,3][9] === undefined`)).toBe(true)
+    expect(await value(`return [1,2,3][9]`)).toBeNull()
+  })
+})
+
+describe("H6: object spread of null/undefined is a no-op", () => {
+  test("spreading null is a no-op", async () => {
+    expect(await value(`const o = null; return { ...o, a: 1 }`)).toEqual({ a: 1 })
+  })
+
+  test("spreading an absent argument merges cleanly", async () => {
+    expect(await value(`function f(opts){ return { ...opts, a: 1 } } return f(undefined)`)).toEqual({ a: 1 })
+  })
+
+  test("spreading a real object still works", async () => {
+    expect(await value(`const o = { a: 1 }; return { ...o, b: 2 }`)).toEqual({ a: 1, b: 2 })
+  })
+
+  test("spreading an array into an object still errors", async () => {
+    const err = await error(`return { ...[1,2], a: 1 }`)
+    expect(err.kind).toBe("InvalidDataValue")
+  })
+})
+
+describe("H4: typeof on an undeclared identifier is 'undefined'", () => {
+  test("feature-detection guard does not throw", async () => {
+    expect(await value(`return typeof foo === "undefined" ? "safe" : "no"`)).toBe("safe")
+  })
+
+  test("typeof of a declared binding is unaffected", async () => {
+    expect(await value(`const x = 5; return typeof x`)).toBe("number")
+    expect(await value(`const s = "a"; return typeof s`)).toBe("string")
+  })
+
+  test("referencing an undeclared identifier outside typeof still throws", async () => {
+    const err = await error(`return foo + 1`)
+    expect(err.message).toContain("foo")
+  })
+})
+
+describe("H1: NaN/Infinity flow as intermediates and normalize to null at the boundary", () => {
+  test("guards run instead of the program crashing on a transient NaN", async () => {
+    expect(await value(`return parseInt("abc") || 0`)).toBe(0)
+    expect(await value(`const x = Number("abc"); return Number.isNaN(x) ? 0 : x`)).toBe(0)
+    expect(await value(`const o = {}; o.count = (o.count || 0) + 1; return o.count`)).toBe(1)
+    // average of an empty list, guarded - the classic divide-by-zero that used to throw pre-guard
+    expect(await value(`const a = []; return a.length ? a.reduce((s,x)=>s+x,0)/a.length : 0`)).toBe(0)
+  })
+
+  test("a non-finite value becomes null when it leaves the sandbox", async () => {
+    expect(await value(`return 5/0`)).toBeNull()
+    expect(await value(`return 0/0`)).toBeNull()
+    expect(await value(`return Math.max()`)).toBeNull()
+    // nested, too - normalization walks the returned structure
+    expect(await value(`return { a: Number("x"), b: 2, c: [1/0] }`)).toEqual({ a: null, b: 2, c: [null] })
+  })
+
+  test("NaN and Infinity are usable identifiers and inspectable in-sandbox", async () => {
+    expect(await value(`return Number.isNaN(NaN)`)).toBe(true)
+    expect(await value(`return Infinity > 1e9`)).toBe(true)
+    expect(await value(`return Number.isFinite(1/0)`)).toBe(false)
+    expect(await value(`return [3,1,2].reduce((a,b)=>Math.max(a,b), -Infinity)`)).toBe(3)
+    // JSON.stringify inside the sandbox matches JS: non-finite serializes to null
+    expect(await value(`return JSON.stringify({ x: Number("z") })`)).toBe('{"x":null}')
+  })
+
+  test("copyOut normalizes non-finite numbers to null (the shared return + tool-arg boundary)", () => {
+    // Tool-call arguments funnel through copyOut too, so this one function pins both boundaries.
+    expect(ToolRuntime.copyOut(NaN)).toBeNull()
+    expect(ToolRuntime.copyOut(Infinity)).toBeNull()
+    expect(ToolRuntime.copyOut(-Infinity)).toBeNull()
+    expect(ToolRuntime.copyOut(42)).toBe(42)
+    expect(ToolRuntime.copyOut({ a: NaN, b: [Infinity, 1] })).toEqual({ a: null, b: [null, 1] })
+  })
+})
+
+describe("Error values and instanceof", () => {
+  test("new Error carries name/message and is instanceof Error", async () => {
+    expect(await value(`const e = new Error("boom"); return [e instanceof Error, e.name, e.message]`)).toEqual([
+      true,
+      "Error",
+      "boom",
+    ])
+  })
+
+  test("Error without new behaves like new Error", async () => {
+    expect(await value(`const e = Error("plain"); return [e instanceof Error, e.name, e.message]`)).toEqual([
+      true,
+      "Error",
+      "plain",
+    ])
+    expect(await value(`const e = new Error(); return [e.name, e.message, e instanceof Error]`)).toEqual([
+      "Error",
+      "",
+      true,
+    ])
+  })
+
+  test("specific error types are instanceof themselves and Error, not each other", async () => {
+    expect(
+      await value(
+        `const e = new TypeError("t"); return [e instanceof TypeError, e instanceof Error, e instanceof RangeError]`,
+      ),
+    ).toEqual([true, true, false])
+    expect(await value(`return new Error("e") instanceof TypeError`)).toBe(false)
+  })
+
+  test("thrown errors keep instanceof through try/catch", async () => {
+    expect(await value(`try { throw new Error("x") } catch (e) { return [e instanceof Error, e.message] }`)).toEqual([
+      true,
+      "x",
+    ])
+  })
+
+  test("interpreter runtime failures are caught as Error values", async () => {
+    expect(await value(`try { JSON.parse("nope") } catch (e) { return e instanceof Error }`)).toBe(true)
+    expect(await value(`try { undeclared() } catch (e) { return e instanceof Error }`)).toBe(true)
+  })
+
+  test("caught failures carry the constructor name the real-JS failure would have", async () => {
+    // JSON.parse throws SyntaxError: name and specific-instanceof both carry through, and the
+    // message keeps the engine's position detail.
+    expect(
+      await value(`
+      try { JSON.parse("{oops") } catch (e) {
+        return [e.name, e instanceof SyntaxError, e instanceof Error, e instanceof TypeError, e.message.includes("JSON")]
+      }
+    `),
+    ).toEqual(["SyntaxError", true, true, false, true])
+    expect(await value(`try { undeclared() } catch (e) { return [e.name, e instanceof ReferenceError] }`)).toEqual([
+      "ReferenceError",
+      true,
+    ])
+    expect(await value(`try { const c = 1; c = 2 } catch (e) { return [e.name, e instanceof TypeError] }`)).toEqual([
+      "TypeError",
+      true,
+    ])
+    expect(await value(`try { "a".normalize("NOPE") } catch (e) { return [e.name, e instanceof RangeError] }`)).toEqual(
+      ["RangeError", true],
+    )
+    expect(await value(`try { "a".match("(") } catch (e) { return [e.name, e instanceof SyntaxError] }`)).toEqual([
+      "SyntaxError",
+      true,
+    ])
+    expect(await value(`try { new RegExp("(") } catch (e) { return [e.name, e instanceof SyntaxError] }`)).toEqual([
+      "SyntaxError",
+      true,
+    ])
+  })
+
+  test("diagnostics without a specific real-JS analogue are named plain Error", async () => {
+    expect(await value(`try { JSON.parse(5) } catch (e) { return [e.name, e instanceof Error] }`)).toEqual([
+      "Error",
+      true,
+    ])
+  })
+
+  test("Promise.allSettled rejection reasons are Error values", async () => {
+    expect(
+      await value(`
+      const settled = await Promise.allSettled([Promise.reject(new Error("b"))])
+      return [settled[0].reason instanceof Error, settled[0].reason.message]
+    `),
+    ).toEqual([true, "b"])
+  })
+
+  test("non-error thrown values are not instanceof Error", async () => {
+    expect(await value(`try { throw "raw" } catch (e) { return e instanceof Error }`)).toBe(false)
+    expect(await value(`try { throw { message: "shaped" } } catch (e) { return e instanceof Error }`)).toBe(false)
+  })
+
+  test("plain data is never instanceof Error", async () => {
+    expect(await value(`return [({}) instanceof Error, "s" instanceof Error, null instanceof Error]`)).toEqual([
+      false,
+      false,
+      false,
+    ])
+  })
+
+  test("error values still serialize as plain { name, message } data", async () => {
+    expect(await value(`return new Error("m")`)).toEqual({ name: "Error", message: "m" })
+    expect(await value(`return JSON.stringify(new Error("m"))`)).toBe('{"name":"Error","message":"m"}')
+    expect(await value(`try { throw new Error("m") } catch (e) { return Object.keys(e) }`)).toEqual(["name", "message"])
+  })
+
+  test("spreading an error loses the brand, like losing the prototype in JS", async () => {
+    expect(await value(`const e = new Error("m"); return ({ ...e }) instanceof Error`)).toBe(false)
+    expect(await value(`const e = new Error("m"); return { ...e }`)).toEqual({ name: "Error", message: "m" })
+  })
+
+  test("typeof Error is function; an unknown instanceof right-hand side is a catchable error", async () => {
+    expect(await value(`return typeof Error`)).toBe("function")
+    expect(await value(`try { return 1 instanceof 5 } catch (e) { return "caught" }`)).toBe("caught")
+    const err = await error(`return 1 instanceof 5`)
+    expect(err.message).toContain("right-hand side of 'instanceof'")
+  })
+})
+
+describe("array methods: splice, fill, copyWithin, keys/values/entries", () => {
+  test("splice removes in place and returns the removed elements", async () => {
+    expect(await value(`const a = [1,2,3,4]; const removed = a.splice(1, 2); return { removed, a }`)).toEqual({
+      removed: [2, 3],
+      a: [1, 4],
+    })
+  })
+
+  test("splice inserts new elements at the cut", async () => {
+    expect(await value(`const a = ["a","d"]; a.splice(1, 0, "b", "c"); return a`)).toEqual(["a", "b", "c", "d"])
+    expect(await value(`const a = [1,2,3]; const removed = a.splice(1, 1, "x"); return { removed, a }`)).toEqual({
+      removed: [2],
+      a: [1, "x", 3],
+    })
+  })
+
+  test("splice with one argument removes to the end; negative start counts back", async () => {
+    expect(await value(`const a = [1,2,3]; const removed = a.splice(1); return { removed, a }`)).toEqual({
+      removed: [2, 3],
+      a: [1],
+    })
+    expect(await value(`const a = [1,2,3]; const removed = a.splice(-1); return { removed, a }`)).toEqual({
+      removed: [3],
+      a: [1, 2],
+    })
+  })
+
+  test("splice rejects inserting a container into itself", async () => {
+    const err = await error(`const a = [1]; a.splice(0, 0, [a]); return a`)
+    expect(err.kind).toBe("InvalidDataValue")
+    expect(err.message).toContain("circular")
+  })
+
+  test("fill overwrites a range and returns the mutated array", async () => {
+    expect(await value(`const a = [1,2,3,4]; return a.fill(0, 1, 3)`)).toEqual([1, 0, 0, 4])
+    expect(await value(`return [1,2,3].fill("z")`)).toEqual(["z", "z", "z"])
+  })
+
+  test("copyWithin copies a range in place", async () => {
+    expect(await value(`return [1,2,3,4,5].copyWithin(0, 3)`)).toEqual([4, 5, 3, 4, 5])
+  })
+
+  test("keys/values/entries return arrays usable with for...of and spread", async () => {
+    expect(await value(`return [...["x","y","z"].keys()]`)).toEqual([0, 1, 2])
+    expect(await value(`return ["x","y"].values()`)).toEqual(["x", "y"])
+    expect(
+      await value(`
+      const out = []
+      for (const [index, item] of ["a","b"].entries()) out.push(index + ":" + item)
+      return out
+    `),
+    ).toEqual(["0:a", "1:b"])
+    expect(await value(`return [...[7].entries()]`)).toEqual([[0, 7]])
+  })
+})
+
+describe("string methods: localeCompare, normalize, trim aliases", () => {
+  test("localeCompare orders strings for sorting", async () => {
+    expect(await value(`return ["b","a","c"].sort((x, y) => x.localeCompare(y))`)).toEqual(["a", "b", "c"])
+    expect(await value(`return "a".localeCompare("a")`)).toBe(0)
+  })
+
+  test("normalize applies unicode normalization forms", async () => {
+    expect(await value(`return "\\u0065\\u0301".normalize("NFC").length`)).toBe(1)
+    expect(await value(`return "\\u00e9".normalize("NFD").length`)).toBe(2)
+    expect(await value(`return "x".normalize() === "x"`)).toBe(true)
+  })
+
+  test("an invalid normalize form is a clear catchable error", async () => {
+    expect(await value(`try { "x".normalize("nope"); return "no" } catch (e) { return e.message }`)).toContain('"NFC"')
+  })
+
+  test("trimLeft/trimRight alias trimStart/trimEnd", async () => {
+    expect(await value(`return "  x ".trimLeft()`)).toBe("x ")
+    expect(await value(`return "  x ".trimRight()`)).toBe("  x")
+  })
+})
+
+describe("compound assignment matches its binary operator", () => {
+  // `x op= y` must behave exactly like `x = x op y`, sharing the binary operator's coercion
+  // semantics (Dates string-coerce for `+` and use their time value for arithmetic; data
+  // objects/arrays coerce to their JS string form).
+  const pair = async (compound: string, expanded: string) => {
+    const [a, b] = await Promise.all([value(compound), value(expanded)])
+    expect(a).toEqual(b)
+    return a
+  }
+
+  test("sandbox Date += concatenates its string form, like d = d + 1", async () => {
+    const result = await pair(`let d = new Date(1000); d += 1; return d`, `let d = new Date(1000); d = d + 1; return d`)
+    expect(result).toBe("1970-01-01T00:00:01.000Z1")
+  })
+
+  test("sandbox Date numeric compound ops use its time value", async () => {
+    expect(
+      await pair(`let d = new Date(1000); d -= 400; return d`, `let d = new Date(1000); d = d - 400; return d`),
+    ).toBe(600)
+    expect(await pair(`let d = new Date(1000); d /= 4; return d`, `let d = new Date(1000); d = d / 4; return d`)).toBe(
+      250,
+    )
+  })
+
+  test("string += object/array matches x = x + obj", async () => {
+    expect(await pair(`let x = "a"; x += { b: 1 }; return x`, `let x = "a"; x = x + { b: 1 }; return x`)).toBe(
+      "a[object Object]",
+    )
+    expect(await pair(`let x = "a"; x += [1, 2]; return x`, `let x = "a"; x = x + [1, 2]; return x`)).toBe("a1,2")
+  })
+
+  test("compound assignment through a member target coerces the same way", async () => {
+    expect(
+      await pair(
+        `const o = { s: "t" }; o.s += new Date(0); return o.s`,
+        `const o = { s: "t" }; o.s = o.s + new Date(0); return o.s`,
+      ),
+    ).toBe("t1970-01-01T00:00:00.000Z")
+  })
+
+  test("numeric and string compound operators sweep identically to their expansions", async () => {
+    const cases: Array<[string, number | string]> = [
+      [`let x = 7; x += 3; return x`, 7 + 3],
+      [`let x = 7; x -= 3; return x`, 7 - 3],
+      [`let x = 7; x *= 3; return x`, 7 * 3],
+      [`let x = 7; x /= 2; return x`, 7 / 2],
+      [`let x = 7; x %= 3; return x`, 7 % 3],
+      [`let x = 7; x **= 2; return x`, 7 ** 2],
+      [`let x = 7; x &= 3; return x`, 7 & 3],
+      [`let x = 7; x |= 8; return x`, 7 | 8],
+      [`let x = 7; x ^= 2; return x`, 7 ^ 2],
+      [`let x = 7; x <<= 2; return x`, 7 << 2],
+      [`let x = -7; x >>= 1; return x`, -7 >> 1],
+      [`let x = -7; x >>>= 1; return x`, -7 >>> 1],
+      [`let x = "a"; x += "b"; return x`, "ab"],
+    ]
+    for (const [compound, expected] of cases) {
+      expect(await value(compound)).toBe(expected)
+      expect(await value(compound.replace(/x (\S+)= /, (_, op) => `x = x ${op} `))).toBe(expected)
+    }
+  })
+})
+
+describe("H5: builtin coercion functions work as array callbacks", () => {
+  test("filter(Boolean) drops falsy values", async () => {
+    expect(await value(`return [0, 1, "", 2, null, 3].filter(Boolean)`)).toEqual([1, 2, 3])
+  })
+
+  test("map(String) coerces each element", async () => {
+    expect(await value(`return [1, 2, 3].map(String)`)).toEqual(["1", "2", "3"])
+  })
+
+  test("arrow callbacks still work (no regression)", async () => {
+    expect(await value(`return [1, 2, 3, 4].filter(x => x % 2 === 0)`)).toEqual([2, 4])
+    expect(await value(`return [1, 2, 3].reduce((a, b) => a + b, 0)`)).toBe(6)
+  })
+
+  test("a non-callable callback is still rejected", async () => {
+    const err = await error(`return [1,2,3].map(42)`)
+    expect(err.message).toContain("callback")
+  })
+})

packages/codemode/test/promise.test.ts

@@ -0,0 +1,453 @@
+import { describe, expect, test } from "bun:test"
+import { Effect, Schema } from "effect"
+import { CodeMode, Tool, toolError, type ExecuteResult, type ExecutionLimits } from "../src/index.js"
+
+// Wave 5 acceptance suite: first-class promise values. Un-awaited tool calls start eagerly on
+// supervised fibers, `await` settles them, and Promise.all/allSettled/race/resolve/reject are
+// ordinary functions over arbitrary arrays mixing promises and plain values.
+
+type Trace = {
+  starts: Array<number>
+  active: number
+  maxActive: number
+  completed: number
+  interrupted: number
+}
+
+const makeTrace = (): Trace => ({ starts: [], active: 0, maxActive: 0, completed: 0, interrupted: 0 })
+
+/** Echoes `id` after `ms` milliseconds, recording start order, live concurrency, and interruption. */
+const sleepyTool = (trace: Trace) =>
+  Tool.make({
+    description: "Echo an id after a delay",
+    input: Schema.Struct({ id: Schema.Number, ms: Schema.optionalKey(Schema.Number) }),
+    output: Schema.Number,
+    run: ({ id, ms }) =>
+      Effect.gen(function* () {
+        trace.starts.push(id)
+        trace.active += 1
+        trace.maxActive = Math.max(trace.maxActive, trace.active)
+        yield* Effect.sleep(ms ?? 20)
+        trace.active -= 1
+        trace.completed += 1
+        return id
+      }).pipe(
+        Effect.onInterrupt(() =>
+          Effect.sync(() => {
+            trace.active -= 1
+            trace.interrupted += 1
+          }),
+        ),
+      ),
+  })
+
+const failingTool = Tool.make({
+  description: "Always refuse",
+  input: Schema.Struct({}),
+  output: Schema.String,
+  run: () => Effect.fail(toolError("Lookup refused")),
+})
+
+const run = (code: string, options: { trace?: Trace; limits?: ExecutionLimits } = {}): Promise<ExecuteResult> => {
+  const trace = options.trace ?? makeTrace()
+  return Effect.runPromise(
+    CodeMode.execute({
+      tools: { host: { sleepy: sleepyTool(trace), fail: failingTool } },
+      code,
+      ...(options.limits ? { limits: options.limits } : {}),
+    }),
+  )
+}
+
+const value = async (code: string, options: { trace?: Trace; limits?: ExecutionLimits } = {}) => {
+  const result = await run(code, options)
+  if (!result.ok) throw new Error(`expected success, got ${result.error.kind}: ${result.error.message}`)
+  return result.value
+}
+
+const error = async (code: string, options: { trace?: Trace; limits?: ExecutionLimits } = {}) => {
+  const result = await run(code, options)
+  if (result.ok) throw new Error(`expected failure, got value ${JSON.stringify(result.value)}`)
+  return result.error
+}
+
+describe("first-class promise values", () => {
+  test("an un-awaited tool call starts eagerly, in call order, before any await", async () => {
+    const trace = makeTrace()
+    const result = await value(
+      `
+        const a = tools.host.sleepy({ id: 1, ms: 40 })
+        const b = tools.host.sleepy({ id: 2, ms: 40 })
+        const rb = await b
+        const ra = await a
+        return [ra, rb]
+      `,
+      { trace },
+    )
+    expect(result).toEqual([1, 2])
+    expect(trace.starts).toEqual([1, 2])
+    // Both calls overlapped even though they were awaited sequentially.
+    expect(trace.maxActive).toBeGreaterThan(1)
+  })
+
+  test("awaiting the same promise twice settles once and never re-runs the call", async () => {
+    const result = await run(`
+      const p = tools.host.sleepy({ id: 7 })
+      const x = await p
+      const y = await p
+      return [x, y]
+    `)
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.value).toEqual([7, 7])
+    expect(result.toolCalls).toStrictEqual([{ name: "host.sleepy" }])
+  })
+
+  test("await of a non-promise value is a passthrough no-op", async () => {
+    expect(await value(`return await 42`)).toBe(42)
+    expect(await value(`const x = await "s"; return x`)).toBe("s")
+    expect(await value(`return await null`)).toBeNull()
+    expect(await value(`return (await [1, 2]).length`)).toBe(2)
+  })
+
+  test("returning an un-awaited tool call resolves it (async-function return semantics)", async () => {
+    expect(await value(`return tools.host.sleepy({ id: 9 })`)).toBe(9)
+  })
+
+  test("typeof a promise is 'object', and console.log renders it sensibly", async () => {
+    const result = await run(`
+      const p = Promise.resolve(1)
+      console.log(p)
+      return typeof p
+    `)
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.value).toBe("object")
+    expect(result.logs).toStrictEqual(["[Promise (await it to get its value)]"])
+  })
+
+  test("an awaited failure is catchable exactly like a synchronous throw", async () => {
+    expect(
+      await value(`
+      const p = tools.host.fail({})
+      try {
+        await p
+        return "no"
+      } catch (e) {
+        return e.message
+      }
+    `),
+    ).toBe("Lookup refused")
+  })
+
+  test("a fire-and-forget call completes before the execution ends", async () => {
+    const trace = makeTrace()
+    const result = await value(
+      `
+        tools.host.sleepy({ id: 1, ms: 30 })
+        return "done"
+      `,
+      { trace },
+    )
+    expect(result).toBe("done")
+    expect(trace.completed).toBe(1)
+    expect(trace.interrupted).toBe(0)
+  })
+
+  test("a never-awaited failing call surfaces as an unhandled-rejection diagnostic", async () => {
+    const diagnostic = await error(`
+      tools.host.fail({})
+      return "done"
+    `)
+    expect(diagnostic.kind).toBe("ToolFailure")
+    expect(diagnostic.message).toContain("Unhandled rejection from an un-awaited tool call")
+    expect(diagnostic.message).toContain("Lookup refused")
+    expect(diagnostic.suggestions?.join(" ")).toContain("await tools.ns.tool(...)")
+  })
+})
+
+describe("promises at data boundaries", () => {
+  test("returning an un-awaited promise inside data is a clear await-hinting diagnostic", async () => {
+    const diagnostic = await error(`return { result: tools.host.sleepy({ id: 1 }) }`)
+    expect(diagnostic.kind).toBe("InvalidDataValue")
+    expect(diagnostic.message).toContain("un-awaited Promise")
+    expect(diagnostic.message).toContain("await tools.ns.tool(...)")
+  })
+
+  test("passing an un-awaited promise as a tool argument is a clear diagnostic", async () => {
+    const diagnostic = await error(`return await tools.host.sleepy({ id: tools.host.sleepy({ id: 1 }) })`)
+    expect(diagnostic.kind).toBe("InvalidDataValue")
+    expect(diagnostic.message).toContain("un-awaited Promise")
+  })
+
+  test("JSON.stringify of a promise is a diagnostic, not '{}'", async () => {
+    const diagnostic = await error(`return JSON.stringify(Promise.resolve(1))`)
+    expect(diagnostic.kind).toBe("InvalidDataValue")
+    expect(diagnostic.message).toContain("un-awaited Promise")
+  })
+
+  test("operators reject promise operands", async () => {
+    const diagnostic = await error(`return Promise.resolve(1) + 1`)
+    expect(diagnostic.kind).toBe("InvalidDataValue")
+  })
+})
+
+describe("Promise.all over arbitrary arrays", () => {
+  test("mixes promises and plain values, preserving order", async () => {
+    expect(
+      await value(`
+      return await Promise.all([tools.host.sleepy({ id: 1 }), "plain", tools.host.sleepy({ id: 2 }), 42])
+    `),
+    ).toEqual([1, "plain", 2, 42])
+  })
+
+  test("accepts arrays built beforehand, passed as identifiers, and spread elements", async () => {
+    expect(
+      await value(`
+      const calls = []
+      calls.push(tools.host.sleepy({ id: 1 }))
+      calls.push(7)
+      const more = [tools.host.sleepy({ id: 2 })]
+      const batch = [...calls, ...more, "x"]
+      return await Promise.all(batch)
+    `),
+    ).toEqual([1, 7, 2, "x"])
+  })
+
+  test("runs items.map tool calls in parallel", async () => {
+    const trace = makeTrace()
+    const result = await value(
+      `
+        const ids = [1, 2, 3, 4]
+        return await Promise.all(ids.map((id) => tools.host.sleepy({ id, ms: 40 })))
+      `,
+      { trace },
+    )
+    expect(result).toEqual([1, 2, 3, 4])
+    // maxActive counts truly-overlapping live executions, so > 1 proves real
+    // parallelism deterministically - no wall-clock assertion needed.
+    expect(trace.maxActive).toBeGreaterThan(1)
+  })
+
+  test("caps live tool-call concurrency at the fixed internal constant (8)", async () => {
+    const trace = makeTrace()
+    const result = await value(
+      `
+        const ids = []
+        for (let i = 0; i < 20; i += 1) ids.push(i)
+        const results = await Promise.all(ids.map((id) => tools.host.sleepy({ id, ms: 10 })))
+        return results.length
+      `,
+      { trace },
+    )
+    expect(result).toBe(20)
+    expect(trace.maxActive).toBeGreaterThan(1)
+    expect(trace.maxActive).toBeLessThanOrEqual(8)
+  })
+
+  test("resolves the empty array", async () => {
+    expect(await value(`return await Promise.all([])`)).toEqual([])
+  })
+
+  test("rejects with the first failure, catchable in-program", async () => {
+    expect(
+      await value(`
+      try {
+        await Promise.all([tools.host.sleepy({ id: 1 }), tools.host.fail({})])
+        return "no"
+      } catch (e) {
+        return e.message
+      }
+    `),
+    ).toBe("Lookup refused")
+  })
+
+  test("a non-collection argument is a clear error", async () => {
+    const diagnostic = await error(`return await Promise.all(42)`)
+    expect(diagnostic.message).toContain("Promise.all expects an array")
+  })
+
+  test("exceeding maxToolCalls inside Promise.all is a ToolCallLimitExceeded diagnostic", async () => {
+    const diagnostic = await error(
+      `return await Promise.all([tools.host.sleepy({ id: 1 }), tools.host.sleepy({ id: 2 }), tools.host.sleepy({ id: 3 })])`,
+      { limits: { maxToolCalls: 2 } },
+    )
+    expect(diagnostic.kind).toBe("ToolCallLimitExceeded")
+  })
+})
+
+describe("Promise.allSettled", () => {
+  test("reports fulfilled and rejected outcomes with catch-normalized reasons", async () => {
+    expect(
+      await value(`
+      return await Promise.allSettled([
+        tools.host.sleepy({ id: 5 }),
+        tools.host.fail({}),
+        "plain",
+        Promise.reject(new Error("boom")),
+      ])
+    `),
+    ).toEqual([
+      { status: "fulfilled", value: 5 },
+      { status: "rejected", reason: { name: "Error", message: "Lookup refused" } },
+      { status: "fulfilled", value: "plain" },
+      { status: "rejected", reason: { name: "Error", message: "boom" } },
+    ])
+  })
+
+  test("never rejects for program-level failures", async () => {
+    const result = await run(`
+      const settled = await Promise.allSettled([tools.host.fail({}), tools.host.fail({})])
+      return settled.filter((s) => s.status === "rejected").length
+    `)
+    expect(result.ok).toBe(true)
+    if (result.ok) expect(result.value).toBe(2)
+  })
+})
+
+describe("Promise.race", () => {
+  test("first settlement wins and losers are interrupted", async () => {
+    const trace = makeTrace()
+    const result = await value(
+      `
+        const fast = tools.host.sleepy({ id: 1, ms: 10 })
+        const slow = tools.host.sleepy({ id: 2, ms: 5000 })
+        return await Promise.race([fast, slow])
+      `,
+      { trace },
+    )
+    expect(result).toBe(1)
+    expect(trace.interrupted).toBe(1)
+    expect(trace.completed).toBe(1)
+  })
+
+  test("awaiting an interrupted loser afterwards is a catchable program failure", async () => {
+    expect(
+      await value(`
+      const fast = tools.host.sleepy({ id: 1, ms: 10 })
+      const slow = tools.host.sleepy({ id: 2, ms: 5000 })
+      const winner = await Promise.race([fast, slow])
+      try {
+        await slow
+        return "no"
+      } catch (e) {
+        return { winner, caught: e.message }
+      }
+    `),
+    ).toEqual({
+      winner: 1,
+      caught: "This tool call was interrupted because another value settled a Promise.race first.",
+    })
+  })
+
+  test("a rejection can win the race", async () => {
+    expect(
+      await value(`
+      try {
+        await Promise.race([tools.host.fail({}), tools.host.sleepy({ id: 1, ms: 5000 })])
+        return "no"
+      } catch (e) {
+        return e.message
+      }
+    `),
+    ).toBe("Lookup refused")
+  })
+
+  test("a plain value wins over pending promises", async () => {
+    const trace = makeTrace()
+    expect(
+      await value(`return await Promise.race([tools.host.sleepy({ id: 1, ms: 5000 }), "immediate"])`, { trace }),
+    ).toBe("immediate")
+    expect(trace.interrupted).toBe(1)
+  })
+
+  test("an empty race is a clear error instead of hanging", async () => {
+    const diagnostic = await error(`return await Promise.race([])`)
+    expect(diagnostic.message).toContain("never settle")
+  })
+})
+
+describe("Promise.resolve / Promise.reject", () => {
+  test("resolve wraps plain values and passes promises through", async () => {
+    expect(await value(`return await Promise.resolve(42)`)).toBe(42)
+    expect(await value(`return await Promise.resolve(Promise.resolve("nested"))`)).toBe("nested")
+    expect(await value(`return await Promise.resolve(tools.host.sleepy({ id: 3 }))`)).toBe(3)
+  })
+
+  test("reject produces a promise whose await throws the reason", async () => {
+    expect(
+      await value(`
+      try {
+        await Promise.reject("nope")
+        return "no"
+      } catch (e) {
+        return e
+      }
+    `),
+    ).toBe("nope")
+  })
+})
+
+describe("timeout interruption of forked calls", () => {
+  test("the execution timeout interrupts in-flight forked fibers", async () => {
+    const trace = makeTrace()
+    const result = await run(
+      `
+        const a = tools.host.sleepy({ id: 1, ms: 60000 })
+        const b = tools.host.sleepy({ id: 2, ms: 60000 })
+        return await a
+      `,
+      { trace, limits: { timeoutMs: 100 } },
+    )
+    expect(result.ok).toBe(false)
+    if (result.ok) return
+    expect(result.error.kind).toBe("TimeoutExceeded")
+    // Both calls started; neither escaped the timeout - the awaited one AND the abandoned one.
+    expect(trace.starts).toEqual([1, 2])
+    expect(trace.interrupted).toBe(2)
+    expect(trace.completed).toBe(0)
+  })
+
+  test("the timeout also interrupts calls inside Promise.all", async () => {
+    const trace = makeTrace()
+    const result = await run(
+      `return await Promise.all([tools.host.sleepy({ id: 1, ms: 60000 }), tools.host.sleepy({ id: 2, ms: 60000 })])`,
+      { trace, limits: { timeoutMs: 100 } },
+    )
+    expect(result.ok).toBe(false)
+    if (result.ok) return
+    expect(result.error.kind).toBe("TimeoutExceeded")
+    expect(trace.interrupted).toBe(2)
+  })
+})
+
+describe("unsupported promise surface", () => {
+  test(".then/.catch/.finally give a clear await-instead error", async () => {
+    for (const method of ["then", "catch", "finally"]) {
+      const diagnostic = await error(`return tools.host.sleepy({ id: 1 }).${method}((x) => x)`)
+      expect(diagnostic.kind).toBe("UnsupportedSyntax")
+      expect(diagnostic.message).toContain(`Promise.prototype.${method} is not supported`)
+      expect(diagnostic.message).toContain("await")
+    }
+  })
+
+  test("other property reads on a promise hint at the missing await", async () => {
+    const diagnostic = await error(`return tools.host.sleepy({ id: 1 }).value`)
+    expect(diagnostic.kind).toBe("InvalidDataValue")
+    expect(diagnostic.message).toContain("un-awaited Promise")
+    expect(diagnostic.message).toContain("await it first")
+  })
+
+  test("unknown Promise statics list what is available", async () => {
+    const diagnostic = await error(`return await Promise.any([tools.host.sleepy({ id: 1 })])`)
+    expect(diagnostic.message).toContain("Promise.any is not available")
+    expect(diagnostic.message).toContain("Promise.allSettled")
+  })
+
+  test("new Promise(...) points at tool calls instead", async () => {
+    const diagnostic = await error(`return new Promise((resolve) => resolve(1))`)
+    expect(diagnostic.kind).toBe("UnsupportedSyntax")
+    expect(diagnostic.message).toContain("new Promise(...) is not supported")
+    expect(diagnostic.message).toContain("already return promises")
+  })
+})

packages/codemode/test/signature.test.ts

@@ -0,0 +1,341 @@
+import { describe, expect, test } from "bun:test"
+import { Effect, Schema } from "effect"
+import { CodeMode } from "../src/index.js"
+import { Tool, inputTypeScript, jsonSchemaToTypeScript, outputTypeScript } from "../src/tool.js"
+
+// A raw JSON Schema tool in the shape an MCP adapter produces: render-only input schema
+// whose property descriptions and constraints must surface as JSDoc in pretty signatures.
+const listIssues = Tool.make({
+  description: "List issues in a repository",
+  input: {
+    type: "object",
+    properties: {
+      owner: { type: "string", description: "Repository owner" },
+      after: { type: "string", description: "Cursor from the previous response's pageInfo" },
+      perPage: { type: "number", description: "Results per page", default: 30 },
+      labels: { type: "array", items: { type: "string" }, description: "Filter by labels", minItems: 1, maxItems: 10 },
+      state: { type: "string", enum: ["open", "closed"] },
+    },
+    required: ["owner"],
+  },
+  run: () => Effect.succeed("[]"),
+})
+
+// An Effect Schema tool whose field annotations must flow through the emitted JSON Schema.
+const lookupOrder = Tool.make({
+  description: "Look up an order",
+  input: Schema.Struct({
+    id: Schema.String.annotate({ description: "Order identifier" }),
+    verbose: Schema.optionalKey(Schema.Boolean),
+  }),
+  output: Schema.Struct({
+    status: Schema.String.annotate({ description: "Current order status" }),
+  }),
+  run: () => Effect.succeed({ status: "open" }),
+})
+
+describe("pretty signature rendering", () => {
+  test("described fields get JSDoc comments; undescribed and untagged fields get none", () => {
+    expect(inputTypeScript(listIssues, true)).toBe(
+      [
+        "{",
+        "  /** Repository owner */",
+        "  owner: string",
+        "  /** Cursor from the previous response's pageInfo */",
+        "  after?: string",
+        "  /**",
+        "   * Results per page",
+        "   * @default 30",
+        "   */",
+        "  perPage?: number",
+        "  /**",
+        "   * Filter by labels",
+        "   * @minItems 1",
+        "   * @maxItems 10",
+        "   */",
+        "  labels?: Array<string>",
+        '  state?: "open" | "closed"',
+        "}",
+      ].join("\n"),
+    )
+  })
+
+  test("compact mode output is unchanged by the pretty machinery", () => {
+    expect(inputTypeScript(listIssues)).toBe(
+      '{ owner: string; after?: string; perPage?: number; labels?: Array<string>; state?: "open" | "closed" }',
+    )
+    expect(inputTypeScript(lookupOrder)).toBe("{ id: string; verbose?: boolean }")
+    expect(outputTypeScript(lookupOrder)).toBe("{ status: string }")
+  })
+
+  test("nested objects recurse with increasing indent and their own JSDoc", () => {
+    const pretty = jsonSchemaToTypeScript(
+      {
+        type: "object",
+        properties: {
+          filter: {
+            type: "object",
+            description: "Search filter",
+            properties: { state: { type: "string", description: "Issue state" } },
+          },
+        },
+      },
+      true,
+    )
+    expect(pretty).toBe(
+      ["{", "  /** Search filter */", "  filter?: {", "    /** Issue state */", "    state?: string", "  }", "}"].join(
+        "\n",
+      ),
+    )
+  })
+
+  test("Effect Schema annotations become JSDoc on input and output fields", () => {
+    expect(inputTypeScript(lookupOrder, true)).toBe(
+      ["{", "  /** Order identifier */", "  id: string", "  verbose?: boolean", "}"].join("\n"),
+    )
+    expect(outputTypeScript(lookupOrder, true)).toBe(
+      ["{", "  /** Current order status */", "  status: string", "}"].join("\n"),
+    )
+  })
+
+  test("constraints TypeScript cannot express surface as JSDoc tags", () => {
+    const pretty = jsonSchemaToTypeScript(
+      {
+        type: "object",
+        properties: {
+          legacy: { type: "string", deprecated: true },
+          homepage: { type: "string", format: "uri" },
+          tags: { type: "array", items: { type: "string" }, minItems: 2, maxItems: 5, default: ["a", "b"] },
+        },
+      },
+      true,
+    )
+    expect(pretty).toContain("  /** @deprecated */\n  legacy?: string")
+    expect(pretty).toContain("  /** @format uri */\n  homepage?: string")
+    expect(pretty).toContain(
+      [
+        "  /**",
+        '   * @default ["a","b"]',
+        "   * @minItems 2",
+        "   * @maxItems 5",
+        "   */",
+        "  tags?: Array<string>",
+      ].join("\n"),
+    )
+  })
+
+  test("skips an unserializable default rather than emitting a broken tag", () => {
+    const pretty = jsonSchemaToTypeScript(
+      { type: "object", properties: { size: { type: "number", default: 1n } } },
+      true,
+    )
+    expect(pretty).toBe(["{", "  size?: number", "}"].join("\n"))
+  })
+
+  test("neutralizes */ inside descriptions so nothing closes the comment early", () => {
+    const pretty = jsonSchemaToTypeScript(
+      { type: "object", properties: { note: { type: "string", description: "Ends */ early" } } },
+      true,
+    )
+    expect(pretty).toContain("  /** Ends * / early */")
+    expect(pretty).not.toContain("Ends */")
+  })
+
+  test("multiline descriptions become *-prefixed blocks with blank edges trimmed", () => {
+    const pretty = jsonSchemaToTypeScript(
+      {
+        type: "object",
+        properties: { query: { type: "string", description: "\nFirst line\n\nSecond line\n" } },
+      },
+      true,
+    )
+    expect(pretty).toBe(
+      ["{", "  /**", "   * First line", "   *", "   * Second line", "   */", "  query?: string", "}"].join("\n"),
+    )
+  })
+
+  test("stays total on cyclic $refs and pathological nesting in both modes", () => {
+    const cyclic = {
+      $ref: "#/$defs/Node",
+      $defs: { Node: { type: "object", properties: { child: { $ref: "#/$defs/Node" }, name: { type: "string" } } } },
+    } as const
+    expect(jsonSchemaToTypeScript(cyclic)).toBe("{ child?: Node; name?: string }")
+    expect(jsonSchemaToTypeScript(cyclic, true)).toContain("child?: Node")
+
+    let deep: Record<string, unknown> = { type: "string" }
+    for (let level = 0; level < 12; level += 1) deep = { type: "object", properties: { next: deep } }
+    for (const pretty of [false, true]) {
+      const rendered = jsonSchemaToTypeScript(deep, pretty)
+      expect(rendered).toContain("unknown")
+      expect(rendered).toContain("next?:")
+    }
+  })
+})
+
+describe("non-identifier property names render as quoted keys", () => {
+  // MCP-style schemas routinely carry property names that are not bare TS identifiers
+  // (`foo-bar`, `@type`, dotted names); the rendered signature must quote them so the
+  // model sees a valid TypeScript object type. Bare identifiers stay unquoted.
+  const rawSchema = {
+    type: "object",
+    properties: {
+      "foo-bar": { type: "string" },
+      "@type": { type: "string" },
+      "x.y": { type: "number", description: "Dotted name" },
+      "123": { type: "number" },
+      plain: { type: "boolean" },
+    },
+    required: ["@type"],
+  } as const
+
+  test("compact rendering quotes non-identifier keys and leaves identifiers bare", () => {
+    expect(jsonSchemaToTypeScript(rawSchema)).toBe(
+      '{ "123"?: number; "foo-bar"?: string; "@type": string; "x.y"?: number; plain?: boolean }',
+    )
+  })
+
+  test("pretty rendering quotes non-identifier keys and keeps their JSDoc", () => {
+    expect(jsonSchemaToTypeScript(rawSchema, true)).toBe(
+      [
+        "{",
+        '  "123"?: number',
+        '  "foo-bar"?: string',
+        '  "@type": string',
+        "  /** Dotted name */",
+        '  "x.y"?: number',
+        "  plain?: boolean",
+        "}",
+      ].join("\n"),
+    )
+  })
+
+  test("JSON Schema input and output signatures of a tool both quote", () => {
+    const tool = Tool.make({
+      description: "Adapter tool with awkward field names",
+      input: rawSchema,
+      output: {
+        type: "object",
+        properties: { "content-type": { type: "string" } },
+        required: ["content-type"],
+      } as const,
+      run: () => Effect.succeed({ "content-type": "text/plain" }),
+    })
+    expect(inputTypeScript(tool)).toContain('"foo-bar"?: string')
+    expect(outputTypeScript(tool)).toBe('{ "content-type": string }')
+    expect(outputTypeScript(tool, true)).toBe(["{", '  "content-type": string', "}"].join("\n"))
+  })
+
+  test("Effect Schema structs with non-identifier field names quote too", () => {
+    const tool = Tool.make({
+      description: "Schema tool with awkward field names",
+      input: Schema.Struct({ "foo-bar": Schema.String, plain: Schema.optionalKey(Schema.Number) }),
+      run: () => Effect.succeed(null),
+    })
+    expect(inputTypeScript(tool)).toBe('{ "foo-bar": string; plain?: number }')
+    expect(inputTypeScript(tool, true)).toBe(["{", '  "foo-bar": string', "  plain?: number", "}"].join("\n"))
+  })
+})
+
+describe("union schemas render every alternative", () => {
+  test("anyOf with a number branch keeps sibling alternatives", () => {
+    const schema = {
+      anyOf: [{ type: "string" }, { type: "number" }],
+    } as const
+    expect(jsonSchemaToTypeScript(schema)).toBe("string | number")
+    expect(jsonSchemaToTypeScript(schema, true)).toBe("string | number")
+  })
+
+  test("nullable numeric unions keep null", () => {
+    const schema = {
+      oneOf: [{ type: "number" }, { type: "null" }],
+    } as const
+    expect(jsonSchemaToTypeScript(schema)).toBe("number | null")
+    expect(jsonSchemaToTypeScript(schema, true)).toBe("number | null")
+  })
+
+  test("tool input and output signatures preserve numeric unions", () => {
+    const tool = Tool.make({
+      description: "Tool with numeric unions",
+      input: {
+        type: "object",
+        properties: {
+          value: { anyOf: [{ type: "string" }, { type: "number" }] },
+        },
+      } as const,
+      output: { anyOf: [{ type: "number" }, { type: "boolean" }] } as const,
+      run: () => Effect.succeed(1),
+    })
+    expect(inputTypeScript(tool)).toBe("{ value?: string | number }")
+    expect(outputTypeScript(tool)).toBe("number | boolean")
+  })
+})
+
+describe("pretty signatures in search results", () => {
+  const runtime = CodeMode.make({ tools: { github: { list_issues: listIssues }, orders: { lookup: lookupOrder } } })
+
+  const search = async (query: string) => {
+    const result = await Effect.runPromise(
+      runtime.execute(`return await tools.$codemode.search({ query: ${JSON.stringify(query)} })`),
+    )
+    expect(result.ok).toBe(true)
+    if (!result.ok) throw new Error("search failed")
+    return result.value as { items: Array<{ path: string; signature: string }>; total: number }
+  }
+
+  test("a raw JSON Schema (MCP-style) tool's result signature carries field JSDoc and tags", async () => {
+    const { items } = await search("list issues repository")
+    const item = items.find(({ path }) => path === "tools.github.list_issues")!
+    expect(item.signature).toBe(
+      [
+        "tools.github.list_issues(input: {",
+        "  /** Repository owner */",
+        "  owner: string",
+        "  /** Cursor from the previous response's pageInfo */",
+        "  after?: string",
+        "  /**",
+        "   * Results per page",
+        "   * @default 30",
+        "   */",
+        "  perPage?: number",
+        "  /**",
+        "   * Filter by labels",
+        "   * @minItems 1",
+        "   * @maxItems 10",
+        "   */",
+        "  labels?: Array<string>",
+        '  state?: "open" | "closed"',
+        "}): Promise<unknown>",
+      ].join("\n"),
+    )
+  })
+
+  test("an annotated Effect Schema tool's result signature carries field JSDoc (exact-path lookup too)", async () => {
+    for (const query of ["look up order", "tools.orders.lookup"]) {
+      const { items } = await search(query)
+      const item = items.find(({ path }) => path === "tools.orders.lookup")!
+      expect(item.signature).toBe(
+        [
+          "tools.orders.lookup(input: {",
+          "  /** Order identifier */",
+          "  id: string",
+          "  verbose?: boolean",
+          "}): Promise<{",
+          "  /** Current order status */",
+          "  status: string",
+          "}>",
+        ].join("\n"),
+      )
+    }
+  })
+
+  test("the inline catalog line for the same tool stays single-line compact", () => {
+    const instructions = runtime.instructions()
+    expect(instructions).toContain(
+      '  - tools.github.list_issues(input: { owner: string; after?: string; perPage?: number; labels?: Array<string>; state?: "open" | "closed" }): Promise<unknown> // List issues in a repository',
+    )
+    expect(instructions).toContain(
+      "  - tools.orders.lookup(input: { id: string; verbose?: boolean }): Promise<{ status: string }> // Look up an order",
+    )
+    expect(instructions).not.toContain("/**")
+  })
+})

packages/codemode/test/stdlib.test.ts

@@ -0,0 +1,495 @@
+import { describe, expect, test } from "bun:test"
+import { Effect } from "effect"
+import { CodeMode, Tool } from "../src/index.js"
+
+// Standard-library value types: Date, RegExp, Map, Set. Programs use them as ordinary JS;
+// intra-sandbox checkpoints (Object.* helpers, spread, coercion inputs) preserve the live
+// values, while at the host boundary (final result, tool arguments, JSON.stringify) they
+// serialize exactly as JSON.stringify would: Date -> ISO string (invalid -> null),
+// RegExp/Map/Set -> {}.
+const run = (code: string) => Effect.runPromise(CodeMode.execute({ code, tools: {} }))
+const value = async (code: string) => {
+  const result = await run(code)
+  if (!result.ok) throw new Error(`expected success, got ${result.error.kind}: ${result.error.message}`)
+  return result.value
+}
+const error = async (code: string) => {
+  const result = await run(code)
+  if (result.ok) throw new Error(`expected failure, got value ${JSON.stringify(result.value)}`)
+  return result.error
+}
+
+describe("Date", () => {
+  test("Date.now() returns a number", async () => {
+    expect(await value(`return typeof Date.now()`)).toBe("number")
+  })
+
+  test("epoch construction and ISO rendering", async () => {
+    expect(await value(`return new Date(0).toISOString()`)).toBe("1970-01-01T00:00:00.000Z")
+  })
+
+  test("string parsing round-trips", async () => {
+    expect(await value(`return new Date("2024-01-02T03:04:05.000Z").getTime()`)).toBe(1704164645000)
+    expect(await value(`return Date.parse("2024-01-02T03:04:05.000Z")`)).toBe(1704164645000)
+  })
+
+  test("date arithmetic and comparison use the time value", async () => {
+    expect(await value(`const a = new Date(1000); const b = new Date(3000); return b - a`)).toBe(2000)
+    expect(await value(`const a = new Date(1000); const b = new Date(3000); return a < b`)).toBe(true)
+    expect(await value(`return +new Date(42)`)).toBe(42)
+  })
+
+  test("UTC getters read calendar components", async () => {
+    expect(
+      await value(
+        `const d = new Date("2024-03-05T06:07:08.009Z"); return [d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds()]`,
+      ),
+    ).toEqual([2024, 2, 5, 6, 7, 8, 9])
+  })
+
+  test("invalid dates yield NaN times, guardable in-sandbox", async () => {
+    expect(await value(`return Number.isNaN(new Date("garbage").getTime())`)).toBe(true)
+    expect(await value(`return new Date("garbage").toJSON()`)).toBeNull()
+  })
+
+  test("toISOString on an invalid date is a catchable error", async () => {
+    expect(await value(`try { new Date("garbage").toISOString(); return "no" } catch { return "caught" }`)).toBe(
+      "caught",
+    )
+  })
+
+  test("template interpolation renders the ISO form", async () => {
+    expect(await value("return `at ${new Date(0)}`")).toBe("at 1970-01-01T00:00:00.000Z")
+  })
+
+  test("dates serialize to ISO strings at the boundary, direct and nested", async () => {
+    expect(await value(`return new Date(0)`)).toBe("1970-01-01T00:00:00.000Z")
+    expect(await value(`return { when: new Date(0), tags: [new Date(1000)] }`)).toEqual({
+      when: "1970-01-01T00:00:00.000Z",
+      tags: ["1970-01-01T00:00:01.000Z"],
+    })
+    expect(await value(`return JSON.stringify({ d: new Date(0) })`)).toBe('{"d":"1970-01-01T00:00:00.000Z"}')
+  })
+
+  test("coercions: Number is the time, String is ISO, Boolean is true", async () => {
+    expect(await value(`return Number(new Date(5))`)).toBe(5)
+    expect(await value(`return String(new Date(0))`)).toBe("1970-01-01T00:00:00.000Z")
+    expect(await value(`return Boolean(new Date(0))`)).toBe(true)
+  })
+
+  test("sorting dates with a numeric comparator", async () => {
+    expect(
+      await value(`
+      const dates = [new Date(3000), new Date(1000), new Date(2000)]
+      return dates.sort((a, b) => a - b).map((d) => d.getTime())
+    `),
+    ).toEqual([1000, 2000, 3000])
+  })
+
+  test("new Date(year, month, day) accepts component form", async () => {
+    expect(await value(`const d = new Date(2024, 0, 2); return [d.getFullYear(), d.getMonth(), d.getDate()]`)).toEqual([
+      2024, 0, 2,
+    ])
+  })
+
+  test("typeof and unknown properties are forgiving", async () => {
+    expect(await value(`return typeof new Date(0)`)).toBe("object")
+    expect(await value(`return new Date(0).nope === undefined`)).toBe(true)
+  })
+})
+
+describe("RegExp", () => {
+  test("literal test", async () => {
+    expect(await value(`return /ab+c/.test("xabbbc")`)).toBe(true)
+    expect(await value(`return /ab+c/.test("nope")`)).toBe(false)
+  })
+
+  test("exec exposes captures and index", async () => {
+    expect(await value(`const m = /a(b+)/.exec("xxabbc"); return { full: m[0], group: m[1], index: m.index }`)).toEqual(
+      {
+        full: "abb",
+        group: "bb",
+        index: 2,
+      },
+    )
+    expect(await value(`return /a/.exec("zzz")`)).toBeNull()
+  })
+
+  test("named groups read through", async () => {
+    expect(
+      await value(`const m = /(?<word>[a-z]+)-(?<num>\\d+)/.exec("id ab-42"); return m.groups.word + m.groups.num`),
+    ).toBe("ab42")
+  })
+
+  test("global exec advances lastIndex across calls", async () => {
+    expect(
+      await value(`
+      const r = /\\d+/g
+      const first = r.exec("a1b22c")
+      const second = r.exec("a1b22c")
+      return [first[0], second[0]]
+    `),
+    ).toEqual(["1", "22"])
+  })
+
+  test("string match: non-global carries index, global lists all matches", async () => {
+    expect(await value(`const m = "a1b22".match(/\\d+/); return [m[0], m.index]`)).toEqual(["1", 1])
+    expect(await value(`return "a1b22".match(/\\d+/g)`)).toEqual(["1", "22"])
+    expect(await value(`return "abc".match(/\\d/)`)).toBeNull()
+  })
+
+  test("matchAll materializes match arrays with captures", async () => {
+    expect(await value(`return "a1b22".matchAll(/(\\d+)/g).map((m) => m[1])`)).toEqual(["1", "22"])
+  })
+
+  test("replace and replaceAll with patterns and $1 substitution", async () => {
+    expect(await value(`return "a1b2".replace(/\\d/, "#")`)).toBe("a#b2")
+    expect(await value(`return "a1b2".replace(/\\d/g, "#")`)).toBe("a#b#")
+    expect(await value(`return "a1b2".replaceAll(/\\d/g, "#")`)).toBe("a#b#")
+    expect(await value(`return "hi bob".replace(/b(o)b/, "[$1]")`)).toBe("hi [o]")
+  })
+
+  test("replaceAll without the g flag is a catchable error", async () => {
+    expect(await value(`try { "a".replaceAll(/a/, "b"); return "no" } catch { return "caught" }`)).toBe("caught")
+  })
+
+  test("split and search accept patterns", async () => {
+    expect(await value(`return "a1b22c".split(/\\d+/)`)).toEqual(["a", "b", "c"])
+    expect(await value(`return "ab42".search(/\\d/)`)).toBe(2)
+    expect(await value(`return "ab".search(/\\d/)`)).toBe(-1)
+  })
+
+  test("new RegExp constructs from strings; invalid patterns are catchable", async () => {
+    expect(await value(`return new RegExp("a+", "i").test("AAA")`)).toBe(true)
+    expect(await value(`try { new RegExp("("); return "no" } catch { return "caught" }`)).toBe("caught")
+    expect(await value(`return [/a/ instanceof RegExp, /a/.source]`)).toEqual([true, "a"])
+  })
+
+  test("invalid patterns fail with actionable messages", async () => {
+    const fromString = await error(`return "abc".match("(")`)
+    expect(fromString.message).toContain('String.match received the string "("')
+    expect(fromString.message).toContain("escape them with a backslash")
+
+    const fromConstructor = await error(`return new RegExp("(")`)
+    expect(fromConstructor.message).toContain('new RegExp(...) received "("')
+    expect(fromConstructor.message).toContain("escape them with a backslash")
+
+    const fromFlags = await error(`return new RegExp("a", "xz")`)
+    expect(fromFlags.message).toContain('invalid flags "xz"')
+    expect(fromFlags.message).toContain("Valid flags are")
+  })
+
+  test("missing g-flag errors say how to fix the call", async () => {
+    expect((await error(`return "aa".replaceAll(/a/, "b")`)).message).toContain("write /a/g, or use String.replace")
+    expect((await error(`return "aa".matchAll(/a/)`)).message).toContain("write /a/g, or use String.match")
+  })
+
+  test("a non-pattern argument names the expected shapes", async () => {
+    const err = await error(`return "abc".match(42)`)
+    expect(err.message).toContain("expects a regular expression")
+    expect(err.message).toContain("not number")
+  })
+
+  test("source and flags properties read through", async () => {
+    expect(await value(`const r = /ab/gi; return { source: r.source, flags: r.flags, global: r.global }`)).toEqual({
+      source: "ab",
+      flags: "gi",
+      global: true,
+    })
+  })
+
+  test("regexes serialize to {} at the boundary, like JSON", async () => {
+    expect(await value(`return /a/`)).toEqual({})
+    expect(await value(`return JSON.stringify({ r: /a/g })`)).toBe('{"r":{}}')
+  })
+
+  test("template interpolation renders the literal form", async () => {
+    expect(await value("return `${/ab/g}`")).toBe("/ab/g")
+  })
+})
+
+describe("Map", () => {
+  test("get/set/has/size with chaining", async () => {
+    expect(
+      await value(`
+      const m = new Map()
+      m.set("a", 1).set("b", 2)
+      return { a: m.get("a"), b: m.get("b"), has: m.has("a"), miss: m.get("zz") === undefined, size: m.size }
+    `),
+    ).toEqual({ a: 1, b: 2, has: true, miss: true, size: 5 - 3 })
+  })
+
+  test("object keys use identity", async () => {
+    expect(
+      await value(`
+      const key = { id: 1 }
+      const m = new Map()
+      m.set(key, "hit")
+      return [m.get(key), m.get({ id: 1 }) === undefined]
+    `),
+    ).toEqual(["hit", true])
+  })
+
+  test("construction from entry pairs and another Map", async () => {
+    expect(await value(`const m = new Map([["a", 1], ["b", 2]]); return m.get("b")`)).toBe(2)
+    expect(
+      await value(
+        `const m = new Map([["a", 1]]); const n = new Map(m); n.set("b", 2); return [n.get("a"), n.get("b"), m.has("b")]`,
+      ),
+    ).toEqual([1, 2, false])
+    expect((await error(`return new Map("nope")`)).message).toMatch(/\[key, value\] pairs/)
+    expect((await error(`return new Map(["flat"])`)).message).toMatch(/\[key, value\] pairs/)
+  })
+
+  test("keys/values/entries return arrays", async () => {
+    expect(
+      await value(`
+      const m = new Map([["a", 1], ["b", 2]])
+      return { keys: m.keys(), values: m.values(), entries: m.entries() }
+    `),
+    ).toEqual({
+      keys: ["a", "b"],
+      values: [1, 2],
+      entries: [
+        ["a", 1],
+        ["b", 2],
+      ],
+    })
+  })
+
+  test("Object.fromEntries(map) and Array.from(map)", async () => {
+    expect(await value(`return Object.fromEntries(new Map([["a", 1], ["b", 2]]))`)).toEqual({ a: 1, b: 2 })
+    expect(await value(`return Array.from(new Map([["a", 1]]))`)).toEqual([["a", 1]])
+  })
+
+  test("for...of iterates [key, value] pairs with destructuring", async () => {
+    expect(
+      await value(`
+      const m = new Map([["a", 1], ["b", 2]])
+      let total = 0
+      let names = ""
+      for (const [key, count] of m) { names += key; total += count }
+      return names + total
+    `),
+    ).toBe("ab3")
+  })
+
+  test("spread produces entry pairs", async () => {
+    expect(await value(`return [...new Map([["a", 1]])]`)).toEqual([["a", 1]])
+  })
+
+  test("forEach passes (value, key)", async () => {
+    expect(
+      await value(`
+      const m = new Map([["a", 1], ["b", 2]])
+      const seen = []
+      m.forEach((count, key) => seen.push(key + count))
+      return seen
+    `),
+    ).toEqual(["a1", "b2"])
+  })
+
+  test("delete and clear", async () => {
+    expect(
+      await value(`
+      const m = new Map([["a", 1], ["b", 2]])
+      const removed = m.delete("a")
+      const missed = m.delete("zz")
+      const sizeAfterDelete = m.size
+      m.clear()
+      return [removed, missed, sizeAfterDelete, m.size]
+    `),
+    ).toEqual([true, false, 1, 0])
+  })
+
+  test("counting idiom: grouped tallies", async () => {
+    expect(
+      await value(`
+      const words = ["a", "b", "a", "c", "a"]
+      const counts = new Map()
+      for (const word of words) counts.set(word, (counts.get(word) ?? 0) + 1)
+      return Object.fromEntries(counts)
+    `),
+    ).toEqual({ a: 3, b: 1, c: 1 })
+  })
+
+  test("maps serialize to {} at the boundary, like JSON", async () => {
+    expect(await value(`return new Map([["a", 1]])`)).toEqual({})
+    expect(await value(`return JSON.stringify(new Map([["a", 1]]))`)).toBe("{}")
+  })
+
+  test("console.log renders map contents for debugging", async () => {
+    const result = await run(`console.log(new Map([["a", 1]])); return null`)
+    expect(result.ok).toBe(true)
+    expect(result.logs?.[0]).toBe(`Map(1) [["a",1]]`)
+  })
+})
+
+describe("Set", () => {
+  test("add/has/delete/size with chaining", async () => {
+    expect(
+      await value(`
+      const s = new Set()
+      s.add(1).add(2).add(1)
+      const removed = s.delete(2)
+      return [s.size, s.has(1), s.has(2), removed]
+    `),
+    ).toEqual([1, true, false, true])
+  })
+
+  test("dedupe idiom: [...new Set(items)]", async () => {
+    expect(await value(`return [...new Set([1, 2, 2, 3, 1])]`)).toEqual([1, 2, 3])
+  })
+
+  test("construction from strings and other Sets", async () => {
+    expect(await value(`return [...new Set("aba")]`)).toEqual(["a", "b"])
+    expect(await value(`return Array.from(new Set(new Set([1, 2])))`)).toEqual([1, 2])
+  })
+
+  test("SameValueZero: NaN is findable", async () => {
+    expect(await value(`const s = new Set([NaN]); return s.has(NaN)`)).toBe(true)
+  })
+
+  test("for...of iterates values", async () => {
+    expect(
+      await value(`
+      let total = 0
+      for (const n of new Set([1, 2, 3])) total += n
+      return total
+    `),
+    ).toBe(6)
+  })
+
+  test("sets serialize to {} at the boundary, like JSON", async () => {
+    expect(await value(`return { s: new Set([1]) }`)).toEqual({ s: {} })
+  })
+})
+
+describe("stdlib integration", () => {
+  test("typeof reports constructors as functions and never throws", async () => {
+    expect(await value(`return typeof Map`)).toBe("function")
+    expect(await value(`return typeof ((x) => x)`)).toBe("function")
+    expect(await value(`return typeof Math`)).toBe("object")
+    expect(await value(`return typeof tools`)).toBe("object")
+  })
+
+  test("negation works on any value", async () => {
+    expect(await value(`return !new Map()`)).toBe(false)
+    expect(await value(`const fn = () => 1; return !fn`)).toBe(false)
+  })
+
+  test("object spread of sandbox values is a no-op, like JS", async () => {
+    expect(await value(`return { ...new Map([["a", 1]]), kept: true }`)).toEqual({ kept: true })
+  })
+
+  test("dates inside Map values survive in-sandbox reads", async () => {
+    expect(
+      await value(`
+      const m = new Map([["start", new Date(1000)]])
+      return m.get("start").getTime()
+    `),
+    ).toBe(1000)
+  })
+
+  test("instanceof recognizes the stdlib value types", async () => {
+    expect(
+      await value(
+        `return [new Date(0) instanceof Date, /a/ instanceof RegExp, new Map() instanceof Map, new Set() instanceof Set]`,
+      ),
+    ).toEqual([true, true, true, true])
+    expect(
+      await value(`return [[1] instanceof Array, [1] instanceof Object, ({}) instanceof Object, 5 instanceof Object]`),
+    ).toEqual([true, true, true, false])
+    expect(await value(`return [new Map() instanceof Set, "s" instanceof Date]`)).toEqual([false, false])
+    expect(
+      await value(`const p = Promise.resolve(1); const isPromise = p instanceof Promise; await p; return isPromise`),
+    ).toBe(true)
+  })
+
+  test("realistic pipeline: parse, extract with regex, dedupe, count by day", async () => {
+    expect(
+      await value(`
+      const raw = '[{"at":"2024-01-01T05:00:00Z","tag":"a b"},{"at":"2024-01-01T09:00:00Z","tag":"b c"},{"at":"2024-01-02T01:00:00Z","tag":"a"}]'
+      const rows = JSON.parse(raw)
+      const tags = new Set()
+      const byDay = new Map()
+      for (const row of rows) {
+        for (const m of row.tag.matchAll(/[a-z]+/g)) tags.add(m[0])
+        const day = new Date(row.at).toISOString().slice(0, 10)
+        byDay.set(day, (byDay.get(day) ?? 0) + 1)
+      }
+      return { tags: [...tags].sort((a, b) => (a < b ? -1 : 1)), byDay: Object.fromEntries(byDay) }
+    `),
+    ).toEqual({ tags: ["a", "b", "c"], byDay: { "2024-01-01": 2, "2024-01-02": 1 } })
+  })
+})
+
+describe("sandbox values at intra-sandbox checkpoints", () => {
+  test("Object.values/entries keep Dates usable", async () => {
+    expect(await value(`return Object.values({ d: new Date(0) })[0].getTime()`)).toBe(0)
+    expect(await value(`const [key, d] = Object.entries({ d: new Date(0) })[0]; return key + ":" + d.getTime()`)).toBe(
+      "d:0",
+    )
+  })
+
+  test("Object.assign keeps Maps usable", async () => {
+    expect(await value(`const merged = Object.assign({}, { m: new Map([["a", 1]]) }); return merged.m.get("a")`)).toBe(
+      1,
+    )
+  })
+
+  test("object and array spread keep sandbox values usable", async () => {
+    expect(
+      await value(`
+      const src = { m: new Map([["a", 1]]) }
+      const copy = { ...src }
+      copy.m.set("b", 2)
+      return [copy.m.get("a"), src.m.get("b")]
+    `),
+    ).toEqual([1, 2])
+    expect(await value(`const list = [new Date(1000)]; const copy = [...list]; return copy[0].getTime()`)).toBe(1000)
+  })
+
+  test("Array.from over arrays keeps nested sandbox values usable", async () => {
+    expect(await value(`return Array.from([new Date(5)])[0].getTime()`)).toBe(5)
+  })
+
+  test("regexes stay callable through Object.values", async () => {
+    expect(await value(`return Object.values({ r: /ab+/ })[0].test("abb")`)).toBe(true)
+  })
+
+  test("Object.* helpers see sandbox values as empty objects, never internals", async () => {
+    expect(await value(`return Object.keys(new Map([["a", 1]]))`)).toEqual([])
+    expect(await value(`return Object.values(new Date(0))`)).toEqual([])
+    expect(await value(`return Object.entries(new Set([1]))`)).toEqual([])
+    expect(await value(`return Object.assign({}, new Map([["a", 1]]))`)).toEqual({})
+    expect(await value(`return Object.hasOwn(new Date(0), "time")`)).toBe(false)
+  })
+
+  test("the host boundary still serializes JSON forms: results, JSON.stringify, and tool arguments", async () => {
+    expect(await value(`return { d: new Date(0), m: new Map([["a", 1]]) }`)).toEqual({
+      d: "1970-01-01T00:00:00.000Z",
+      m: {},
+    })
+    expect(await value(`return JSON.stringify({ d: new Date(0) })`)).toBe('{"d":"1970-01-01T00:00:00.000Z"}')
+
+    const observed: Array<unknown> = []
+    const capture = Tool.make({
+      description: "Capture the exact input the host receives",
+      input: { type: "object" },
+      run: (input) =>
+        Effect.sync(() => {
+          observed.push(input)
+          return "ok"
+        }),
+    })
+    const result = await Effect.runPromise(
+      CodeMode.execute({
+        tools: { host: { capture } },
+        code: `return await tools.host.capture({ when: new Date(0), tags: new Map([["a", 1]]) })`,
+      }),
+    )
+    expect(result.ok).toBe(true)
+    expect(observed).toStrictEqual([{ when: "1970-01-01T00:00:00.000Z", tags: {} }])
+  })
+})

packages/codemode/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/bun/tsconfig.json",
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": false
+  }
+}

packages/console/app/src/routes/zen/util/handler.ts

@@ -179,6 +179,8 @@ export async function handler(
       logger.metric({
         provider: providerInfo.id,
         "provider.model": providerInfo.model,
+        shallowProvider: providerInfo.id,
+        "shallowProvider.model": providerInfo.model,
       })
 
       const startTimestamp = Date.now()
@@ -210,39 +212,44 @@ export async function handler(
       )
       logger.debug("REQUEST URL: " + reqUrl)
       logger.debug("REQUEST: " + reqBody.substring(0, 300) + "...")
-      const res = await fetchWith429Retry(reqUrl, {
-        method: "POST",
-        headers: (() => {
-          const headers = new Headers(input.request.headers)
-          providerInfo.modifyHeaders(headers, providerInfo.apiKey, stickyId)
-          Object.entries(providerInfo.headerModifier ?? {}).forEach(([k, v]) => {
-            if (v === "$ip") return headers.set(k, ip)
-            if (v === "$caller") return headers.set(k, stickyId)
-            if (v === "$session") return headers.set(k, sessionId)
-            if (v === "$model") return headers.set(k, model)
-            if (v === "$request") return headers.set(k, requestId)
-            if (v === "$project") return headers.set(k, projectId)
-            if (v === "$workspace") {
-              if (authInfo?.workspaceID) headers.set(k, authInfo.workspaceID)
-              return
-            }
-            headers.set(k, v)
-          })
-          headers.delete("host")
-          headers.delete("content-length")
-          headers.delete("x-opencode-request")
-          headers.delete("x-opencode-session")
-          headers.delete("x-opencode-project")
-          headers.delete("x-opencode-client")
-          return headers
-        })(),
-        body: reqBody,
-        // Propagate caller disconnects to the upstream provider request so
-        // abandoned Console requests do not leave orphaned inference work open.
-        signal: input.request.signal,
-      })
+      const isNewInference = providerInfo.id.startsWith("console.") || providerInfo.id.startsWith("console-go.")
+      const res = await fetchWith429Retry(
+        reqUrl,
+        {
+          method: "POST",
+          headers: (() => {
+            const headers = new Headers(input.request.headers)
+            providerInfo.modifyHeaders(headers, providerInfo.apiKey, stickyId)
+            Object.entries(providerInfo.headerModifier ?? {}).forEach(([k, v]) => {
+              if (v === "$ip") return headers.set(k, ip)
+              if (v === "$caller") return headers.set(k, stickyId)
+              if (v === "$session") return headers.set(k, sessionId)
+              if (v === "$model") return headers.set(k, model)
+              if (v === "$request") return headers.set(k, requestId)
+              if (v === "$project") return headers.set(k, projectId)
+              if (v === "$workspace") {
+                if (authInfo?.workspaceID) headers.set(k, authInfo.workspaceID)
+                return
+              }
+              headers.set(k, v)
+            })
+            headers.delete("host")
+            headers.delete("content-length")
+            headers.delete("x-opencode-request")
+            headers.delete("x-opencode-session")
+            headers.delete("x-opencode-project")
+            headers.delete("x-opencode-client")
+            return headers
+          })(),
+          body: reqBody,
+          // Propagate caller disconnects to the upstream provider request so
+          // abandoned Console requests do not leave orphaned inference work open.
+          signal: input.request.signal,
+        },
+        { count: isNewInference ? MAX_429_RETRIES : 0 },
+      )
 
-      if (providerInfo.id.startsWith("console.") || providerInfo.id.startsWith("console-go.")) {
+      if (isNewInference) {
         const resEndpointId = res.headers.get("x-opencode-endpoint-id")
         const resEndpointModelId = res.headers.get("x-opencode-upstream-model-id")
         if (resEndpointId && resEndpointModelId)
@@ -261,6 +268,7 @@ export async function handler(
 
       // Try another provider => stop retrying if using fallback provider
       if (
+        //!isNewInference &&
         res.status !== 200 &&
         // ie. 400 error is usually provider error like malformed request
         res.status !== 400 &&

packages/core/src/plugin/provider/github-copilot.ts

@@ -1,19 +1,11 @@
 import { Effect } from "effect"
 import { ModelV2 } from "../../model"
-import { define } from "../internal"
 import { ProviderV2 } from "../../provider"
+import type { PluginContext } from "@opencode-ai/plugin/v2/effect"
 
-function shouldUseResponses(modelID: string) {
-  // Copilot supports Responses for GPT-5 class models, except mini variants
-  // which still need the chat-completions endpoint.
-  const match = /^gpt-(\d+)/.exec(modelID)
-  if (!match) return false
-  return Number(match[1]) >= 5 && !modelID.startsWith("gpt-5-mini")
-}
-
-export const GithubCopilotPlugin = define({
+export const GithubCopilotPlugin = {
   id: "github-copilot",
-  effect: Effect.fn(function* (ctx) {
+  effect: Effect.fn(function* (ctx: PluginContext) {
     yield* ctx.catalog.transform(
       Effect.fn(function* (evt) {
         const item = evt.provider.get(ProviderV2.ID.githubCopilot)
@@ -39,10 +31,22 @@ export const GithubCopilotPlugin = define({
           evt.language = evt.sdk.languageModel(evt.model.api.id)
           return
         }
-        evt.language = shouldUseResponses(evt.model.api.id)
-          ? evt.sdk.responses(evt.model.api.id)
-          : evt.sdk.chat(evt.model.api.id)
+        if (evt.options.endpoint === "responses" && evt.sdk.responses) {
+          evt.language = evt.sdk.responses(evt.model.api.id)
+          return
+        }
+        if (evt.options.endpoint === "chat" && evt.sdk.chat) {
+          evt.language = evt.sdk.chat(evt.model.api.id)
+          return
+        }
+        const match = /^gpt-(\d+)/.exec(evt.model.api.id)
+        // Copilot supports Responses for GPT-5 class models, except mini variants
+        // which still need the chat-completions endpoint.
+        evt.language =
+          match && Number(match[1]) >= 5 && !evt.model.api.id.startsWith("gpt-5-mini") && evt.sdk.responses
+            ? evt.sdk.responses(evt.model.api.id)
+            : evt.sdk.chat(evt.model.api.id)
       }),
     )
   }),
-})
+}

packages/core/test/plugin/provider-github-copilot.test.ts

@@ -157,6 +157,42 @@ describe("GithubCopilotPlugin", () => {
     }),
   )
 
+  it.effect("uses advertised Copilot endpoint metadata before model ID fallbacks", () =>
+    Effect.gen(function* () {
+      const plugin = yield* PluginV2.Service
+      const aisdk = yield* AISDK.Service
+      const calls: string[] = []
+      yield* addPlugin()
+      yield* aisdk.runLanguage({
+        model: ModelV2.Info.make({
+          ...ModelV2.Info.empty(ProviderV2.ID.make("github-copilot"), ModelV2.ID.make("mai-code-1-flash-picker")),
+          api: {
+            id: ModelV2.ID.make("mai-code-1-flash-picker"),
+            type: "aisdk",
+            package: "test-provider",
+            settings: { endpoint: "responses" },
+          },
+        }),
+        sdk: fakeSelectorSdk(calls),
+        options: { endpoint: "responses" },
+      })
+      yield* aisdk.runLanguage({
+        model: ModelV2.Info.make({
+          ...ModelV2.Info.empty(ProviderV2.ID.make("github-copilot"), ModelV2.ID.make("gpt-5")),
+          api: {
+            id: ModelV2.ID.make("gpt-5"),
+            type: "aisdk",
+            package: "test-provider",
+            settings: { endpoint: "chat" },
+          },
+        }),
+        sdk: fakeSelectorSdk(calls),
+        options: { endpoint: "chat" },
+      })
+      expect(calls).toEqual(["responses:mai-code-1-flash-picker", "chat:gpt-5"])
+    }),
+  )
+
   it.effect("uses the API model ID when selecting responses or chat", () =>
     Effect.gen(function* () {
       const plugin = yield* PluginV2.Service

packages/llm/src/providers/github-copilot.ts

@@ -12,10 +12,12 @@ export const id = ProviderID.make("github-copilot")
 export type ModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
   ProviderAuthOption<"optional"> & {
     readonly baseURL: string
+    readonly endpoint?: "chat" | "responses"
     readonly providerOptions?: OpenAIProviderOptionsInput
   }
 
-export const shouldUseResponsesApi = (modelID: string | ModelID) => {
+export const shouldUseResponsesApi = (modelID: string | ModelID, endpoint?: ModelOptions["endpoint"]) => {
+  if (endpoint) return endpoint === "responses"
   const model = String(modelID)
   const match = /^gpt-(\d+)/.exec(model)
   if (!match) return false
@@ -28,7 +30,7 @@ const chatRoute = OpenAIChat.route.with({ provider: id })
 const responsesRoute = OpenAIResponses.route.with({ provider: id })
 
 const defaults = (options: ModelOptions) => {
-  const { apiKey: _, auth: _auth, baseURL: _baseURL, ...rest } = options
+  const { apiKey: _, auth: _auth, baseURL: _baseURL, endpoint: _endpoint, ...rest } = options
   return rest
 }
 
@@ -53,7 +55,8 @@ export const configure = (options: ModelOptions) => {
     chatRoute.with(withOpenAIOptions(modelID, defaults(options))).model({ id: modelID })
   return {
     id,
-    model: (modelID: string | ModelID) => (shouldUseResponsesApi(modelID) ? responses(modelID) : chat(modelID)),
+    model: (modelID: string | ModelID) =>
+      shouldUseResponsesApi(modelID, options.endpoint) ? responses(modelID) : chat(modelID),
     responses,
     chat,
     configure,

packages/llm/test/exports.test.ts

@@ -50,6 +50,20 @@ describe("public exports", () => {
     expect(
       GitHubCopilot.configure({ baseURL: "https://api.githubcopilot.test", apiKey: "fixture" }).model,
     ).toBeFunction()
+    expect(
+      GitHubCopilot.configure({
+        baseURL: "https://api.githubcopilot.test",
+        apiKey: "fixture",
+        endpoint: "responses",
+      }).model("mai-code-1-flash-picker").route.id,
+    ).toBe("openai-responses")
+    expect(
+      GitHubCopilot.configure({
+        baseURL: "https://api.githubcopilot.test",
+        apiKey: "fixture",
+        endpoint: "chat",
+      }).model("gpt-5").route.id,
+    ).toBe("openai-chat")
   })
 
   test("protocol barrels expose supported low-level routes", () => {

packages/opencode/package.json

@@ -84,6 +84,7 @@
     "@octokit/graphql": "9.0.2",
     "@octokit/rest": "catalog:",
     "@openauthjs/openauth": "catalog:",
+    "@opencode-ai/codemode": "workspace:*",
     "@opencode-ai/llm": "workspace:*",
     "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/protocol": "workspace:*",

packages/opencode/src/mcp/index.ts

@@ -1,7 +1,6 @@
 import path from "node:path"
 import { pathToFileURL } from "node:url"
 import { LayerNode } from "@opencode-ai/core/effect/layer-node"
-import { type Tool } from "ai"
 import { ConfigV1 } from "@opencode-ai/core/v1/config/config"
 import { serviceUse } from "@opencode-ai/core/effect/service-use"
 import { Client, type ClientOptions } from "@modelcontextprotocol/sdk/client/index.js"
@@ -154,11 +153,19 @@ export interface ServerInstructions {
   tools: string[]
 }
 
+/** An MCP tool in its native shape; consumers adapt it to their own tool format. */
+export interface McpTool {
+  /** Shared cached definition; consumers must copy rather than mutate it. */
+  readonly def: MCPToolDef
+  readonly client: MCPClient
+  readonly timeout?: number
+}
+
 export interface Interface {
   readonly status: () => Effect.Effect<Record<string, Status>>
   readonly clients: () => Effect.Effect<Record<string, MCPClient>>
   readonly instructions: () => Effect.Effect<ServerInstructions[]>
-  readonly tools: () => Effect.Effect<Record<string, Tool>>
+  readonly tools: () => Effect.Effect<Record<string, McpTool>>
   readonly prompts: () => Effect.Effect<Record<string, PromptInfo & { client: string }>>
   readonly resources: (clientName?: string) => Effect.Effect<Record<string, ResourceInfo & { client: string }>>
   readonly resourceTemplates: (
@@ -656,7 +663,7 @@ const layer = Layer.effect(
     }
 
     const tools = Effect.fn("MCP.tools")(function* () {
-      const result: Record<string, Tool> = {}
+      const result: Record<string, McpTool> = {}
       const s = yield* InstanceState.get(state)
 
       const cfg = yield* cfgSvc.get()
@@ -672,9 +679,8 @@ const layer = Layer.effect(
           continue
         }
         const timeout = requestTimeout(s, clientName, mcpConfig, defaultTimeout)
-        for (const mcpTool of listed) {
-          const key = McpCatalog.toolName(clientName, mcpTool.name)
-          result[key] = McpCatalog.convertTool(mcpTool, client, timeout)
+        for (const def of listed) {
+          result[McpCatalog.toolName(clientName, def.name)] = { def, client, timeout }
         }
       }
       return result

packages/opencode/src/permission/index.ts

@@ -213,6 +213,11 @@ export function disabled(tools: string[], ruleset: PermissionV1.Ruleset): Set<st
   )
 }
 
+export function visibleTools<T>(tools: Record<string, T>, ruleset: PermissionV1.Ruleset): Record<string, T> {
+  const hidden = disabled(Object.keys(tools), ruleset)
+  return Object.fromEntries(Object.entries(tools).filter(([name]) => !hidden.has(name)))
+}
+
 export const node = LayerNode.make({ service: Service, layer: layer, deps: [EventV2Bridge.node] })
 
 export * as Permission from "."

packages/opencode/src/plugin/github-copilot/models.ts

@@ -72,6 +72,10 @@ type SelectableItem = Item & {
     }
   }
 }
+type CopilotEndpoint = "chat" | "responses" | "messages"
+type CopilotModel = Omit<Model, "api"> & {
+  api: Model["api"] & { endpoint?: CopilotEndpoint }
+}
 const decodeModels = Schema.decodeUnknownSync(schema)
 const decodeItem = Schema.decodeUnknownOption(item)
 
@@ -86,17 +90,25 @@ function build(key: string, remote: SelectableItem, url: string, prev?: Model):
     (remote.capabilities.limits.vision?.supported_media_types ?? []).some((item) => item.startsWith("image/"))
 
   const isMsgApi = remote.supported_endpoints?.includes("/v1/messages")
+  const endpoint: CopilotEndpoint | undefined = isMsgApi
+    ? "messages"
+    : remote.supported_endpoints?.includes("/responses")
+      ? "responses"
+      : remote.supported_endpoints?.includes("/chat/completions")
+        ? "chat"
+        : undefined
   const prices = remote.billing?.token_prices
   // Copilot prices are AIC per billing batch; OpenCode stores USD per million tokens.
   const usdPerMillion = prices ? 10_000 / prices.batch_size : 0
 
-  const model: Model = {
+  const model: CopilotModel = {
     id: key,
     providerID: "github-copilot",
     api: {
       id: remote.id,
       url: isMsgApi ? `${url}/v1` : url,
       npm: isMsgApi ? "@ai-sdk/anthropic" : "@ai-sdk/github-copilot",
+      ...(endpoint ? { endpoint } : {}),
     },
     // API response wins
     status: "active",

packages/opencode/src/provider/provider.ts

@@ -218,8 +218,12 @@ function custom(dep: CustomDep): Record<string, CustomLoader> {
     "github-copilot": () =>
       Effect.succeed({
         autoload: false,
-        async getModel(sdk: any, modelID: string, _options?: Record<string, any>) {
+        async getModel(sdk: any, modelID: string, _options?: Record<string, any>, model?: Model) {
           if (sdk.responses === undefined && sdk.chat === undefined) return sdk.languageModel(modelID)
+          if (model && "endpoint" in model.api) {
+            if (model.api.endpoint === "responses" && sdk.responses) return sdk.responses(modelID)
+            if (model.api.endpoint === "chat" && sdk.chat) return sdk.chat(modelID)
+          }
           const match = /^gpt-(\d+)/.exec(modelID)
           if (match && Number(match[1]) >= 5 && !modelID.startsWith("gpt-5-mini")) return sdk.responses(modelID)
           return sdk.chat(modelID)

packages/opencode/src/session/tools.ts

@@ -3,6 +3,7 @@ import { SessionV1 } from "@opencode-ai/core/v1/session"
 import { Provider } from "@/provider/provider"
 import { ProviderTransform } from "@/provider/transform"
 import { MCP } from "@/mcp"
+import { McpCatalog } from "@/mcp/catalog"
 import { Permission } from "@/permission"
 import { Tool } from "@/tool/tool"
 import { ToolJsonSchema } from "@/tool/json-schema"
@@ -381,7 +382,8 @@ export const resolve = Effect.fn("SessionTools.resolve")(function* (input: {
     })
   }
 
-  for (const [key, item] of Object.entries(yield* mcp.tools())) {
+  for (const [key, entry] of Object.entries(yield* mcp.tools())) {
+    const item = McpCatalog.convertTool(entry.def, entry.client, entry.timeout)
     const execute = item.execute
     if (!execute) continue
 

packages/opencode/src/tool/code-mode.ts

@@ -0,0 +1,328 @@
+import * as Tool from "./tool"
+import { CallToolResultSchema, type CallToolResult } from "@modelcontextprotocol/sdk/types.js"
+import { Cause, Effect, Schema } from "effect"
+import {
+  CodeMode,
+  Tool as SandboxTool,
+  toolError,
+  type ExecuteResult,
+  type JsonSchema,
+  type ToolDefinition,
+} from "@opencode-ai/codemode"
+import { MCP } from "@/mcp"
+import { McpCatalog } from "@/mcp/catalog"
+import { Agent } from "@/agent/agent"
+import { Session } from "@/session/session"
+import { Permission } from "@/permission"
+import { Plugin } from "@/plugin"
+
+export const CODE_MODE_TOOL = "execute"
+
+const DESCRIPTION = [
+  "Execute a JavaScript/TypeScript program that orchestrates the connected MCP tools inside a confined runtime.",
+  "The full usage guide and the catalog of available tools follow below.",
+].join("\n")
+
+export const Parameters = Schema.Struct({
+  code: Schema.String.annotate({
+    description: [
+      "JavaScript source to execute.",
+      "Inside CodeMode, `tools` contains only the MCP/CodeMode tools listed in this execute tool's description; top-level opencode tools like bash, read, or lsp are not available unless listed there.",
+      "Call available tools using the exact signatures shown in this execute tool's description, compose the results, and `return` the final value.",
+    ].join(" "),
+  }),
+})
+
+type CallEntry = { tool: string; status: "running" | "completed" | "error"; input?: Record<string, unknown> }
+
+type Metadata = {
+  toolCalls: CallEntry[]
+  error?: boolean
+}
+
+type Attachment = NonNullable<Tool.ExecuteResult["attachments"]>[number]
+
+type CatalogEntry = {
+  path: string
+  key: string
+  server: string
+  local: string
+  tool: MCP.McpTool
+}
+
+function groupByServer(mcpTools: Record<string, MCP.McpTool>, servers: readonly string[]): Map<string, CatalogEntry[]> {
+  const byLongest = [...servers].sort((a, b) => b.length - a.length)
+  const groups = new Map<string, CatalogEntry[]>()
+  for (const key of Object.keys(mcpTools).sort((a, b) => a.localeCompare(b))) {
+    const server =
+      byLongest.find((name) => key.startsWith(name + "_")) ?? (key.includes("_") ? key.slice(0, key.indexOf("_")) : key)
+    const local = server && key.startsWith(server + "_") ? key.slice(server.length + 1) : key
+    const entry: CatalogEntry = {
+      path: `${server}.${local}`,
+      key,
+      server,
+      local,
+      tool: mcpTools[key]!,
+    }
+    groups.set(server, [...(groups.get(server) ?? []), entry])
+  }
+  return groups
+}
+
+export function describeCatalog(mcpTools: Record<string, MCP.McpTool>, servers: readonly string[]): string {
+  return CodeMode.make({
+    tools: toolTree(
+      [...groupByServer(mcpTools, servers).values()].flat(),
+      () => () => Effect.fail(toolError("Tool preview is not executable.")),
+    ),
+  }).instructions()
+}
+
+const lastSegment = (uri: string) => {
+  const trimmed = uri.split(/[?#]/, 1)[0]!.replace(/\/+$/, "")
+  const segment = trimmed.slice(trimmed.lastIndexOf("/") + 1)
+  return segment.length > 0 ? segment : undefined
+}
+
+const dataUrl = (mime: string, base64: string) => `data:${mime};base64,${base64}`
+
+function projectMcpResult(result: CallToolResult, collect: (attachment: Attachment) => void): unknown {
+  const text: string[] = []
+  let files = 0
+  let images = 0
+  const push = (attachment: Attachment) => {
+    files += 1
+    if (attachment.mime.startsWith("image/")) images += 1
+    collect(attachment)
+  }
+  for (const block of result.content) {
+    switch (block.type) {
+      case "text":
+        text.push(block.text)
+        break
+      case "image":
+      case "audio":
+        push({ type: "file", mime: block.mimeType, url: dataUrl(block.mimeType, block.data) })
+        break
+      case "resource": {
+        if ("text" in block.resource) {
+          text.push(block.resource.text)
+          break
+        }
+        const mime = block.resource.mimeType ?? "application/octet-stream"
+        push({ type: "file", mime, url: dataUrl(mime, block.resource.blob), filename: lastSegment(block.resource.uri) })
+        break
+      }
+      case "resource_link":
+        // A link is a reference, not fetchable media; hand it to the program instead of the attachment channel.
+        text.push(`${block.name}: ${block.uri}`)
+        break
+    }
+  }
+
+  if (result.structuredContent !== undefined && result.structuredContent !== null) return result.structuredContent
+  if (text.length > 0) return text.join("\n")
+  if (files > 0) {
+    const noun = files === images ? "image" : "file"
+    return `[${files} ${noun}${files === 1 ? "" : "s"} attached to the result]`
+  }
+  return null
+}
+
+type Run = (input: unknown) => Effect.Effect<unknown, unknown>
+
+function toolTree(catalog: readonly CatalogEntry[], run: (entry: CatalogEntry) => Run) {
+  const tree: Record<string, Record<string, ToolDefinition>> = {}
+  for (const entry of catalog) {
+    const namespace = (tree[entry.server] ??= {})
+    namespace[entry.local] = SandboxTool.make({
+      description: entry.tool.def.description ?? "",
+      input: entry.tool.def.inputSchema as JsonSchema,
+      output: entry.tool.def.outputSchema as JsonSchema | undefined,
+      run: run(entry),
+    })
+  }
+  return tree
+}
+
+const invokeChildTool = Effect.fn("CodeMode.invokeChildTool")(function* (input: {
+  plugin: Plugin.Interface
+  entry: CatalogEntry
+  args: Record<string, unknown>
+  callID: string
+  ctx: Tool.Context
+}) {
+  yield* input.plugin.trigger(
+    "tool.execute.before",
+    { tool: input.entry.key, sessionID: input.ctx.sessionID, callID: input.callID },
+    { args: input.args },
+  )
+  const result: CallToolResult = yield* Effect.gen(function* () {
+    yield* input.ctx.ask({ permission: input.entry.key, metadata: {}, patterns: ["*"], always: ["*"] })
+    // Deliberately mirrors McpCatalog.convertTool's transport call so the MCP service stays free of tool-loop concerns.
+    return yield* Effect.promise(async () => {
+      const raw = await input.entry.tool.client.callTool(
+        { name: input.entry.tool.def.name, arguments: input.args },
+        CallToolResultSchema,
+        {
+          resetTimeoutOnProgress: true,
+          signal: input.ctx.abort,
+          timeout: input.entry.tool.timeout,
+          // The MCP SDK only sends a progress token when this hook is present, enabling timeout resets.
+          onprogress: () => {},
+        },
+      )
+      if (raw.isError)
+        throw new Error(
+          raw.content
+            .flatMap((item) => (item.type === "text" ? [item.text] : []))
+            .filter((text) => text.trim())
+            .join("\n\n") || "MCP tool returned an error",
+        )
+      return raw
+    })
+  }).pipe(
+    Effect.withSpan("Tool.execute", {
+      attributes: {
+        "tool.name": input.entry.key,
+        "tool.call_id": input.callID,
+        "session.id": input.ctx.sessionID,
+        "message.id": input.ctx.messageID,
+      },
+    }),
+  )
+  yield* input.plugin.trigger(
+    "tool.execute.after",
+    { tool: input.entry.key, sessionID: input.ctx.sessionID, callID: input.callID, args: input.args },
+    result,
+  )
+  return result
+})
+
+export const CodeModeTool = Tool.define(
+  CODE_MODE_TOOL,
+  Effect.gen(function* () {
+    const mcp = yield* MCP.Service
+    const agents = yield* Agent.Service
+    const sessions = yield* Session.Service
+    const plugin = yield* Plugin.Service
+
+    const init: Tool.DefWithoutID<typeof Parameters, Metadata> = {
+      description: DESCRIPTION,
+      parameters: Parameters,
+      execute: Effect.fn("CodeMode.execute")(function* (params, ctx) {
+        if (ctx.abort.aborted) {
+          return {
+            title: CODE_MODE_TOOL,
+            metadata: { toolCalls: [], error: true },
+            output: "Execution cancelled.",
+          } satisfies Tool.ExecuteResult<Metadata>
+        }
+        const agent = yield* agents.get(ctx.agent)
+        const session = yield* sessions.get(ctx.sessionID).pipe(Effect.orDie)
+        const ruleset = Permission.merge(agent.permission, session.permission ?? [])
+        const mcpTools = Permission.visibleTools(yield* mcp.tools(), ruleset)
+        const servers = Object.keys(yield* mcp.clients()).map(McpCatalog.sanitize)
+        const catalog = [...groupByServer(mcpTools, servers).values()].flat()
+
+        const calls: CallEntry[] = []
+        const attachments: Attachment[] = []
+        const publish = () =>
+          ctx.metadata({ title: CODE_MODE_TOOL, metadata: { toolCalls: calls.map((c) => ({ ...c })) } })
+
+        let childCalls = 0
+        const callTool = (entry: CatalogEntry) => (input: unknown) =>
+          Effect.gen(function* () {
+            childCalls += 1
+            const result = yield* invokeChildTool({
+              plugin,
+              entry,
+              args: (input ?? {}) as Record<string, unknown>,
+              callID: `${ctx.callID ?? entry.key}/${childCalls}`,
+              ctx,
+            })
+            return projectMcpResult(result, (attachment: Attachment) => void attachments.push(attachment))
+          }).pipe(
+            Effect.catchCause((cause) => {
+              if (Cause.hasInterruptsOnly(cause)) return Effect.interrupt
+              const error = Cause.squash(cause)
+              return Effect.fail(toolError(error instanceof Error ? error.message : String(error), error))
+            }),
+          )
+
+        const runtime = CodeMode.make({
+          tools: toolTree(catalog, callTool),
+          onToolCallStart: ({ index, name, input }) =>
+            Effect.suspend(() => {
+              const shown = (() => {
+                if (input === null || input === undefined) return
+                if (typeof input === "object" && !Array.isArray(input)) {
+                  const value = input as Record<string, unknown>
+                  return Object.keys(value).length > 0 ? value : undefined
+                }
+                return { input }
+              })()
+              calls[index] = { tool: name, status: "running", ...(shown ? { input: shown } : {}) }
+              return publish()
+            }),
+          onToolCallEnd: ({ index, outcome }) =>
+            Effect.suspend(() => {
+              const current = calls[index]
+              if (current) calls[index] = { ...current, status: outcome === "success" ? "completed" : "error" }
+              return publish()
+            }),
+        })
+
+        const abort = Effect.callback<void>((resume) => {
+          if (ctx.abort.aborted) return resume(Effect.void)
+          const handler = () => resume(Effect.void)
+          ctx.abort.addEventListener("abort", handler, { once: true })
+          return Effect.sync(() => ctx.abort.removeEventListener("abort", handler))
+        })
+        const cancelled = (): ExecuteResult => ({
+          ok: false,
+          error: { kind: "ExecutionFailure", message: "Execution cancelled." },
+          toolCalls: calls.map((call) => ({ name: call.tool })),
+        })
+
+        const result = yield* Effect.raceFirst(runtime.execute(params.code), abort.pipe(Effect.map(cancelled)))
+        const logs = result.logs ?? []
+        const withLogs = (text: string) => {
+          if (logs.length === 0) return text
+          return text.length > 0 ? `${text}\n\nLogs:\n${logs.join("\n")}` : `Logs:\n${logs.join("\n")}`
+        }
+
+        if (!result.ok) {
+          if (ctx.abort.aborted) {
+            return {
+              title: CODE_MODE_TOOL,
+              metadata: { toolCalls: calls, error: true },
+              output: "Execution cancelled.",
+            } satisfies Tool.ExecuteResult<Metadata>
+          }
+          const hints = (result.error.suggestions ?? []).filter((hint) => !result.error.message.includes(hint))
+          return yield* Effect.fail(new Error(withLogs([result.error.message, ...hints].join("\n"))))
+        }
+
+        let output: string
+        if (typeof result.value === "string") output = result.value
+        else if (result.value === undefined) output = "undefined"
+        else {
+          try {
+            output = JSON.stringify(result.value, null, 2) ?? String(result.value)
+          } catch {
+            output = String(result.value)
+          }
+        }
+
+        return {
+          title: CODE_MODE_TOOL,
+          metadata: { toolCalls: calls },
+          output: withLogs(output),
+          ...(attachments.length > 0 ? { attachments } : {}),
+        } satisfies Tool.ExecuteResult<Metadata>
+      }, Effect.orDie),
+    }
+    return init
+  }),
+)

packages/opencode/test/plugin/github-copilot-models.test.ts

@@ -187,6 +187,44 @@ test("converts Copilot AIC token prices to USD per million tokens", async () =>
   expect(models["ignored-non-chat-record"]).toBeUndefined()
 })
 
+test("records Copilot advertised responses endpoint for non-GPT model IDs", async () => {
+  globalThis.fetch = mock(() =>
+    Promise.resolve(
+      new Response(
+        JSON.stringify({
+          data: [
+            {
+              model_picker_enabled: true,
+              id: "mai-code-1-flash-picker",
+              name: "MAI-Code-1-Flash",
+              version: "mai-code-1-flash-picker",
+              supported_endpoints: ["/responses"],
+              capabilities: {
+                family: "oswe-vscode-modelD",
+                limits: {
+                  max_context_window_tokens: 256000,
+                  max_output_tokens: 128000,
+                  max_prompt_tokens: 128000,
+                },
+                supports: {
+                  streaming: true,
+                  structured_outputs: true,
+                  tool_calls: true,
+                },
+              },
+            },
+          ],
+        }),
+        { status: 200 },
+      ),
+    ),
+  ) as unknown as typeof fetch
+
+  const model = (await CopilotModels.get("https://api.githubcopilot.com")).models["mai-code-1-flash-picker"]
+
+  expect("endpoint" in model.api ? model.api.endpoint : undefined).toBe("responses")
+})
+
 test("clears existing variants so refreshed models calculate provider-specific variants", async () => {
   globalThis.fetch = mock(() =>
     Promise.resolve(

packages/opencode/test/server/httpapi-session.test.ts

@@ -904,6 +904,54 @@ describe("session HttpApi", () => {
     { git: true, config: { formatter: false, lsp: false, share: "disabled" } },
   )
 
+  it.instance(
+    "lists Windows sessions for equivalent directory spellings",
+    () =>
+      Effect.gen(function* () {
+        if (process.platform !== "win32") return
+        const test = yield* TestInstance
+        const headers = { "x-opencode-directory": test.directory, "content-type": "application/json" }
+        const created = yield* requestJson<Session.Info>(SessionPaths.create, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ title: "windows spelling" }),
+        })
+
+        const forwardSlashes = test.directory.replaceAll("\\", "/")
+        const lowercaseDrive = test.directory.replace(/^[A-Z]:/, (drive) => drive.toLowerCase())
+        const trailingSeparator = `${test.directory}\\`
+        for (const spelling of [forwardSlashes, lowercaseDrive, trailingSeparator]) {
+          const query = new URLSearchParams({ directory: spelling, roots: "true" })
+          const listed = yield* requestJson<Session.Info[]>(`${SessionPaths.list}?${query}`, { headers })
+          expect({ spelling, ids: listed.map((item) => item.id) }).toEqual({ spelling, ids: [created.id] })
+        }
+      }),
+    { git: true, config: { formatter: false, lsp: false, share: "disabled" } },
+    { timeout: 15000 },
+  )
+
+  it.instance(
+    "lists Windows sessions created through the global worktree sentinel",
+    () =>
+      Effect.gen(function* () {
+        if (process.platform !== "win32") return
+        const globalWorktreeSentinel = "/"
+        const headers = { "x-opencode-directory": globalWorktreeSentinel, "content-type": "application/json" }
+        const driveRootSession = yield* requestJson<Session.Info>(SessionPaths.create, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ title: "created at drive root" }),
+        })
+        expect(driveRootSession.directory).toMatch(/^[A-Za-z]:\\$/)
+
+        const query = new URLSearchParams({ directory: globalWorktreeSentinel, roots: "true" })
+        const listed = yield* requestJson<Session.Info[]>(`${SessionPaths.list}?${query}`, { headers })
+        expect(listed.map((item) => item.id)).toContain(driveRootSession.id)
+      }),
+    { git: true, config: { formatter: false, lsp: false, share: "disabled" } },
+    { timeout: 15000 },
+  )
+
   it.instance(
     "serves paginated message link headers",
     () =>

packages/opencode/test/tool/code-mode-integration.test.ts

@@ -0,0 +1,331 @@
+import { beforeAll, describe, expect, test } from "bun:test"
+import { CodeModeTool, describeCatalog } from "@/tool/code-mode"
+import { McpCatalog } from "@/mcp/catalog"
+import { Agent } from "@/agent/agent"
+import { MCP } from "@/mcp"
+import { Plugin } from "@/plugin"
+import { Session } from "@/session/session"
+import { Tool } from "@/tool/tool"
+import * as Truncate from "@/tool/truncate"
+import { MessageID, SessionID } from "@/session/schema"
+import { Server } from "@modelcontextprotocol/sdk/server/index.js"
+import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js"
+import type { Client } from "@modelcontextprotocol/sdk/client/index.js"
+import {
+  CallToolRequestSchema,
+  LATEST_PROTOCOL_VERSION,
+  ListToolsRequestSchema,
+  type Tool as MCPToolDef,
+} from "@modelcontextprotocol/sdk/types.js"
+import { Cause, Effect, Exit, Layer } from "effect"
+
+const PNG =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
+
+const SERVER = "fixtures"
+
+const ctx: Tool.Context = {
+  sessionID: SessionID.make("ses_code-mode-int"),
+  messageID: MessageID.make("msg_code-mode-int"),
+  agent: "build",
+  abort: new AbortController().signal,
+  callID: "call_code_mode_int",
+  messages: [],
+  metadata: () => Effect.void,
+  ask: () => Effect.void,
+}
+
+// Avoid the SDK Client here; other MCP tests mock it process-globally.
+class RawJsonRpcClient {
+  private nextId = 1
+  private pending = new Map<number, { resolve: (value: any) => void; reject: (error: Error) => void }>()
+
+  constructor(private transport: InMemoryTransport) {}
+
+  async connect() {
+    this.transport.onmessage = (message) => {
+      const msg = message as { id?: number; result?: unknown; error?: { message: string } }
+      if (msg.id === undefined) return
+      const entry = this.pending.get(msg.id)
+      if (!entry) return
+      this.pending.delete(msg.id)
+      if (msg.error) entry.reject(new Error(msg.error.message))
+      else entry.resolve(msg.result)
+    }
+    await this.transport.start()
+    await this.request("initialize", {
+      protocolVersion: LATEST_PROTOCOL_VERSION,
+      capabilities: {},
+      clientInfo: { name: "test-client", version: "1.0.0" },
+    })
+    await this.transport.send({ jsonrpc: "2.0", method: "notifications/initialized" })
+  }
+
+  private request(method: string, params: unknown): Promise<any> {
+    const id = this.nextId++
+    const result = new Promise((resolve, reject) => this.pending.set(id, { resolve, reject }))
+    void this.transport.send({ jsonrpc: "2.0", id, method, params } as never)
+    return result
+  }
+
+  listTools() {
+    return this.request("tools/list", {})
+  }
+
+  callTool(params: { name: string; arguments?: Record<string, unknown> }, _schema?: unknown, _options?: unknown) {
+    return this.request("tools/call", params)
+  }
+}
+
+const TOOL_DEFS: MCPToolDef[] = [
+  {
+    name: "get_text",
+    description: "Greet someone and return the greeting as text",
+    inputSchema: { type: "object", properties: { name: { type: "string" } }, required: ["name"] },
+  },
+  {
+    name: "add",
+    description: "Add two numbers and return the structured sum",
+    inputSchema: { type: "object", properties: { a: { type: "number" }, b: { type: "number" } }, required: ["a", "b"] },
+    outputSchema: { type: "object", properties: { sum: { type: "number" } }, required: ["sum"] },
+  },
+  {
+    name: "screenshot",
+    description: "Capture a screenshot and return it as an image",
+    inputSchema: { type: "object", properties: {} },
+  },
+  {
+    name: "boom",
+    description: "A tool that always fails",
+    inputSchema: { type: "object", properties: {} },
+  },
+] as MCPToolDef[]
+
+function handleCall(name: string, args: Record<string, unknown>) {
+  switch (name) {
+    case "get_text":
+      return { content: [{ type: "text", text: `hello ${args.name}` }] }
+    case "add": {
+      const sum = (args.a as number) + (args.b as number)
+      return { content: [{ type: "text", text: String(sum) }], structuredContent: { sum } }
+    }
+    case "screenshot":
+      return { content: [{ type: "image", data: PNG, mimeType: "image/png" }] }
+    case "boom":
+      return { content: [{ type: "text", text: "kaboom" }], isError: true }
+    default:
+      return { content: [{ type: "text", text: `unknown tool ${name}` }], isError: true }
+  }
+}
+
+let tool: Awaited<ReturnType<typeof buildTool>>["tool"]
+let description: string
+
+async function buildTool() {
+  const server = new Server({ name: SERVER, version: "1.0.0" }, { capabilities: { tools: {} } })
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOL_DEFS }))
+  server.setRequestHandler(CallToolRequestSchema, async (req) =>
+    handleCall(req.params.name, (req.params.arguments ?? {}) as Record<string, unknown>),
+  )
+
+  const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair()
+  await server.connect(serverTransport)
+  const client = new RawJsonRpcClient(clientTransport)
+  await client.connect()
+
+  const listed = (await client.listTools()).tools as MCPToolDef[]
+  const mcpTools: Record<string, MCP.McpTool> = {}
+  for (const def of listed) {
+    mcpTools[McpCatalog.toolName(SERVER, def.name)] = { def, client: client as unknown as Client }
+  }
+
+  const layer = Layer.mergeAll(
+    Layer.mock(Plugin.Service, {
+      trigger: (((_name: unknown, _input: unknown, output: unknown) =>
+        Effect.succeed(output)) as Plugin.Interface["trigger"]),
+    }),
+    Layer.mock(Truncate.Service, {
+      output: (text: string) => Effect.succeed({ content: text, truncated: false as const }),
+    }),
+    Layer.mock(Agent.Service, { get: () => Effect.succeed({ name: "build", permission: [] } as any) }),
+    Layer.mock(Session.Service, { get: () => Effect.succeed({ permission: [] } as any) }),
+    Layer.mock(MCP.Service, {
+      tools: () => Effect.succeed(mcpTools),
+      clients: () => Effect.succeed({ [SERVER]: {} as any }),
+    }),
+  )
+  return {
+    tool: await Effect.runPromise(CodeModeTool.pipe(Effect.flatMap(Tool.init), Effect.provide(layer))),
+    description: describeCatalog(mcpTools, [SERVER]),
+  }
+}
+
+const run = (code: string) => Effect.runPromise(tool.execute({ code }, ctx))
+// Program failures die at the tool boundary; recover the defect for message assertions.
+const runFailed = async (code: string) => {
+  const exit = await Effect.runPromise(tool.execute({ code }, ctx).pipe(Effect.exit))
+  if (Exit.isSuccess(exit)) throw new Error("expected the tool to fail")
+  return Cause.squash(exit.cause) as Error
+}
+
+beforeAll(async () => {
+  const built = await buildTool()
+  tool = built.tool
+  description = built.description
+})
+
+describe("code mode integration (real MCP server)", () => {
+  test("the appended catalog inlines full signatures with real MCP schemas", () => {
+    expect(description).toContain("Available tools (COMPLETE list")
+    expect(description).toContain("- fixtures (4 tools)")
+    expect(description).toContain(
+      "tools.fixtures.add(input: { a: number; b: number }): Promise<{ sum: number }>",
+    )
+    expect(description).toContain("tools.fixtures.get_text(input: { name: string }): Promise<unknown>")
+    expect(description).toContain("// Add two numbers and return the structured sum")
+    expect(description).not.toContain("$codemode")
+    expect(description).toContain("## Workflow")
+    expect(description).toContain("`const res = await tools.<namespace>.<tool>(input)`")
+    expect(description).not.toContain("total_count")
+  })
+
+  test("calls a text tool and receives its text as the native result", async () => {
+    const out = await run("const r = await tools.fixtures.get_text({ name: 'world' }); return r")
+    expect(out.output).toBe("hello world")
+    expect(out.metadata.toolCalls).toEqual([
+      { tool: "fixtures.get_text", status: "completed", input: { name: "world" } },
+    ])
+    expect(out.attachments).toBeUndefined()
+  })
+
+  test("exposes structured data natively from a tool with an outputSchema", async () => {
+    const out = await run("const r = await tools.fixtures.add({ a: 2, b: 3 }); return r.sum")
+    expect(out.output).toBe("5")
+  })
+
+  test("composes multiple structured calls and returns a plain object", async () => {
+    const out = await run(`
+      const first = await tools.fixtures.add({ a: 1, b: 2 })
+      const second = await tools.fixtures.add({ a: first.sum, b: 10 })
+      return { total: second.sum }
+    `)
+    expect(JSON.parse(out.output)).toEqual({ total: 13 })
+    expect(out.metadata.toolCalls).toEqual([
+      { tool: "fixtures.add", status: "completed", input: { a: 1, b: 2 } },
+      { tool: "fixtures.add", status: "completed", input: { a: 3, b: 10 } },
+    ])
+  })
+
+  test("an image result becomes an execute attachment and a marker in the sandbox", async () => {
+    const out = await run("return await tools.fixtures.screenshot({})")
+    expect(out.output).toBe("[1 image attached to the result]")
+    expect(out.attachments).toEqual([{ type: "file", mime: "image/png", url: `data:image/png;base64,${PNG}` }])
+  })
+
+  test("image bytes never enter the sandbox or the model-facing output", async () => {
+    const out = await run(`
+      const shot = await tools.fixtures.screenshot({})
+      return { sawMarker: typeof shot === 'string' && shot.includes('attached'), value: shot }
+    `)
+    expect(JSON.parse(out.output)).toEqual({
+      sawMarker: true,
+      value: "[1 image attached to the result]",
+    })
+    expect(out.output).not.toContain(PNG)
+    expect(out.attachments).toHaveLength(1)
+  })
+
+  test("attachments accumulate even when the program returns something else", async () => {
+    const out = await run("await tools.fixtures.screenshot({}); return 'captured'")
+    expect(out.output).toBe("captured")
+    expect(out.attachments).toHaveLength(1)
+  })
+
+  test("runs calls in parallel and accumulates every attachment", async () => {
+    const out = await run(`
+      const both = await Promise.all([tools.fixtures.screenshot({}), tools.fixtures.screenshot({})])
+      return 'two shots: ' + both.length
+    `)
+    expect(out.output).toBe("two shots: 2")
+    expect(out.attachments).toHaveLength(2)
+    expect(out.metadata.toolCalls.map((c) => c.tool)).toEqual(["fixtures.screenshot", "fixtures.screenshot"])
+  })
+
+  test("propagates an MCP isError into the program as a catchable error", async () => {
+    const out = await run("try { await tools.fixtures.boom({}) } catch (e) { return 'caught: ' + e.message }")
+    expect(out.output).toBe("caught: kaboom")
+  })
+
+  test("an uncaught MCP error surfaces as a failed execution", async () => {
+    const error = await runFailed("await tools.fixtures.boom({}); return 'unreachable'")
+    expect(error.message).toContain("kaboom")
+  })
+
+  test("console output is captured and appended as a Logs section after the result", async () => {
+    const out = await run(`
+      console.log("looking up", { name: "world" })
+      const r = await tools.fixtures.get_text({ name: "world" })
+      console.warn("got", r)
+      return r
+    `)
+    expect(out.output).toBe('hello world\n\nLogs:\nlooking up {"name":"world"}\n[warn] got hello world')
+    expect(out.metadata.error).toBeUndefined()
+  })
+
+  test("console output is preserved on the error path", async () => {
+    const error = await runFailed(`
+      console.log("before the throw")
+      await tools.fixtures.boom({})
+      return "unreachable"
+    `)
+    expect(error.message).toContain("kaboom")
+    expect(error.message).toContain("Logs:\nbefore the throw")
+  })
+
+  test("a program that logs nothing gets no Logs section", async () => {
+    const out = await run("return 'quiet'")
+    expect(out.output).toBe("quiet")
+    expect(out.output).not.toContain("Logs:")
+  })
+
+  test("console does not consume the tool-call metadata (logging is not a tool call)", async () => {
+    const out = await run("console.log('hi'); console.error('bye'); return 'ok'")
+    expect(out.output).toBe("ok\n\nLogs:\nhi\n[error] bye")
+    expect(out.metadata.toolCalls).toEqual([])
+  })
+
+  test("asks permission for each MCP call, keyed by the flat catalog name", async () => {
+    const asked: string[] = []
+    const permCtx: Tool.Context = { ...ctx, ask: (req: any) => Effect.sync(() => void asked.push(req.permission)) }
+    await Effect.runPromise(
+      tool.execute(
+        {
+          code: `
+            await tools.fixtures.add({ a: 1, b: 1 })
+            await tools.fixtures.get_text({ name: 'x' })
+            return 'done'
+          `,
+        },
+        permCtx,
+      ),
+    )
+    expect(asked).toEqual(["fixtures_add", "fixtures_get_text"])
+  })
+
+  test("streams running/completed metadata for child calls over a real transport", async () => {
+    const snapshots: Array<{ toolCalls: { tool: string; status: string; input?: Record<string, unknown> }[] }> = []
+    const recordingCtx: Tool.Context = {
+      ...ctx,
+      metadata: (val: any) => Effect.sync(() => void snapshots.push(val.metadata)),
+    }
+    await Effect.runPromise(
+      tool.execute({ code: "await tools.fixtures.add({ a: 1, b: 2 }); return 'done'" }, recordingCtx),
+    )
+    expect(snapshots).toContainEqual({
+      toolCalls: [{ tool: "fixtures.add", status: "running", input: { a: 1, b: 2 } }],
+    })
+    expect(snapshots).toContainEqual({
+      toolCalls: [{ tool: "fixtures.add", status: "completed", input: { a: 1, b: 2 } }],
+    })
+  })
+})

packages/opencode/test/tool/code-mode.test.ts

@@ -0,0 +1,713 @@
+import { describe, expect, test } from "bun:test"
+import {
+  CODE_MODE_TOOL,
+  CodeModeTool,
+  Parameters,
+  describeCatalog,
+} from "@/tool/code-mode"
+import type { Tool as MCPToolDef } from "@modelcontextprotocol/sdk/types.js"
+import type { PermissionV1 } from "@opencode-ai/core/v1/permission"
+import { Agent } from "@/agent/agent"
+import { MCP } from "@/mcp"
+import { Permission } from "@/permission"
+import { Plugin } from "@/plugin"
+import { Session } from "@/session/session"
+import { Tool } from "@/tool/tool"
+import * as Truncate from "@/tool/truncate"
+import { MessageID, SessionID } from "@/session/schema"
+import { Cause, Effect, Exit, Layer, Schema } from "effect"
+
+const ctx: Tool.Context = {
+  sessionID: SessionID.make("ses_code-mode"),
+  messageID: MessageID.make("msg_code-mode"),
+  agent: "build",
+  abort: new AbortController().signal,
+  callID: "call_code_mode",
+  messages: [],
+  metadata: () => Effect.void,
+  ask: () => Effect.void,
+}
+
+function mcpTool(
+  name: string,
+  handler: (args: Record<string, unknown>) => unknown,
+  inputSchema: Record<string, unknown> = { type: "object", properties: {} },
+  outputSchema?: Record<string, unknown>,
+): MCP.McpTool {
+  return {
+    def: { name, description: name, inputSchema, ...(outputSchema ? { outputSchema } : {}) } as MCPToolDef,
+    client: {
+      callTool: async (params: { arguments?: Record<string, unknown> }) => handler(params.arguments ?? {}),
+    } as unknown as MCP.McpTool["client"],
+  }
+}
+
+function harness(input: {
+  mcpTools: Record<string, MCP.McpTool>
+  servers: string[]
+  permission?: PermissionV1.Rule[]
+  trigger?: Plugin.Interface["trigger"]
+}) {
+  return Layer.mergeAll(
+    Layer.mock(Plugin.Service, {
+      trigger: input.trigger ?? (((_name, _input, output) => Effect.succeed(output)) as Plugin.Interface["trigger"]),
+    }),
+    Layer.mock(Truncate.Service, {
+      output: (text: string) => Effect.succeed({ content: text, truncated: false as const }),
+    }),
+    Layer.mock(Agent.Service, {
+      get: () => Effect.succeed({ name: "build", permission: input.permission ?? [] } as any),
+    }),
+    Layer.mock(Session.Service, {
+      get: () => Effect.succeed({ permission: [] } as any),
+    }),
+    Layer.mock(MCP.Service, {
+      tools: () => Effect.succeed(input.mcpTools),
+      clients: () => Effect.succeed(Object.fromEntries(input.servers.map((name) => [name, {} as any]))),
+    }),
+  )
+}
+
+function serverNames(mcpTools: Record<string, MCP.McpTool>, servers?: string[]) {
+  return servers ?? [...new Set(Object.keys(mcpTools).map((key) => key.split("_")[0]!))]
+}
+
+function build(
+  mcpTools: Record<string, MCP.McpTool>,
+  servers?: string[],
+  permission?: PermissionV1.Rule[],
+  trigger?: Plugin.Interface["trigger"],
+) {
+  const names = serverNames(mcpTools, servers)
+  return Effect.runPromise(
+    CodeModeTool.pipe(
+      Effect.flatMap(Tool.init),
+      Effect.provide(harness({ mcpTools, servers: names, permission, trigger })),
+    ),
+  )
+}
+
+function describeFor(mcpTools: Record<string, MCP.McpTool>, servers?: string[], permission: PermissionV1.Rule[] = []) {
+  return describeCatalog(Permission.visibleTools(mcpTools, permission), serverNames(mcpTools, servers))
+}
+
+// Program failures die at the tool boundary; recover the defect for message assertions.
+async function failure(effect: Effect.Effect<unknown>) {
+  const exit = await Effect.runPromise(effect.pipe(Effect.exit))
+  if (Exit.isSuccess(exit)) throw new Error("expected the tool to fail")
+  return Cause.squash(exit.cause) as Error
+}
+
+describe("code mode execute", () => {
+  test("defines execute input with an Effect schema", async () => {
+    const decode = Schema.decodeUnknownEffect(Parameters)
+    await expect(Effect.runPromise(decode({ code: "return 1" }))).resolves.toEqual({ code: "return 1" })
+    await expect(Effect.runPromise(decode({}))).rejects.toThrow()
+  })
+
+  test("groups multi-underscore server names by longest matching prefix", () => {
+    const description = describeFor({ my_server_do_thing: mcpTool("do_thing", () => "") }, ["my_server"])
+    expect(description).toContain("- my_server (1 tool)")
+    expect(description).toContain("tools.my_server.do_thing(")
+  })
+
+  test("groupByServer uses the whole key as the server name when it has no underscore", () => {
+    const description = describeFor({ standalone: mcpTool("standalone", () => "") }, [])
+    expect(description).toContain("- standalone (1 tool)")
+    expect(description).toContain("tools.standalone.standalone(")
+  })
+
+  test("describeCatalog carries the raw MCP schemas for rendering", () => {
+    const description = describeFor(
+      {
+        weather_current: mcpTool(
+          "current",
+          () => "",
+          { type: "object", properties: { city: { type: "string" } }, required: ["city"] },
+          { type: "object", properties: { tempC: { type: "number" } }, required: ["tempC"] },
+        ),
+      },
+      ["weather"],
+    )
+    expect(description).toContain("tools.weather.current(input: { city: string }): Promise<{ tempC: number }>")
+  })
+
+  test("the static base description carries no catalog; the registry appends it", async () => {
+    const tool = await build({ github_list_issues: mcpTool("list_issues", () => "") })
+    expect(tool.id).toBe(CODE_MODE_TOOL)
+    expect(tool.description).toContain("confined runtime")
+    expect(tool.description).not.toContain("Available tools")
+    expect(tool.description).not.toContain("list_issues")
+  })
+
+  test("small catalogs inline every full signature in the appended catalog", () => {
+    const description = describeFor({
+      github_create_issue: mcpTool("create_issue", () => "", {
+        type: "object",
+        properties: { title: { type: "string" }, body: { type: "string" } },
+        required: ["title"],
+      }),
+      github_list_issues: mcpTool("list_issues", () => ""),
+      linear_search: mcpTool("search", () => ""),
+    })
+
+    expect(description).toContain("Available tools (COMPLETE list")
+    expect(description).toContain("- github (2 tools)")
+    expect(description).toContain("- linear (1 tool)")
+    expect(description).toContain(
+      "tools.github.create_issue(input: { title: string; body?: string }): Promise<unknown>",
+    )
+    expect(description).toContain("tools.github.list_issues(")
+    expect(description).toContain("tools.linear.search(")
+    expect(description).toContain("tools.linear.search(input: {}): Promise<unknown>")
+    expect(description).not.toContain("$codemode")
+    expect(description).not.toContain("Browse one namespace")
+    expect(description).toContain("## Workflow")
+    expect(description).toContain("1. Pick a tool from the list under `## Available tools`")
+    expect(description).toContain('`const data = typeof res === "string" ? JSON.parse(res) : res` - most tools return JSON as a string')
+    expect(description).toContain("Return only the fields you need")
+    expect(description).not.toContain("total_count")
+  })
+
+  test("signatures render the declared outputSchema as the return type", () => {
+    const description = describeFor({
+      weather_current: mcpTool(
+        "current",
+        () => "",
+        { type: "object", properties: { city: { type: "string" } }, required: ["city"] },
+        {
+          type: "object",
+          properties: { tempC: { type: "number" }, summary: { type: "string" } },
+          required: ["tempC"],
+        },
+      ),
+    })
+    expect(description).toContain(
+      "tools.weather.current(input: { city: string }): Promise<{ tempC: number; summary?: string }>",
+    )
+  })
+
+  test("large catalogs inline a budgeted PARTIAL list plus runtime search", async () => {
+    const tools: Record<string, MCP.McpTool> = {}
+    const filler = "a searchable description of this operation that consumes catalog budget ".repeat(3)
+    for (let i = 0; i < 150; i++) {
+      tools[`alpha_op_${i}`] = {
+        def: {
+          name: `op_${i}`,
+          description: `${filler}${i}`,
+          inputSchema: { type: "object", properties: { value: { type: "string" }, count: { type: "number" } } },
+        } as MCPToolDef,
+        client: { callTool: async () => ({ content: [] }) } as unknown as MCP.McpTool["client"],
+      }
+    }
+    tools["zeta_only_tool"] = mcpTool("only_tool", () => "", {
+      type: "object",
+      properties: { topic: { type: "string", description: "Subject to look up" } },
+      required: ["topic"],
+    })
+    const description = describeFor(tools, ["alpha", "zeta"])
+
+    expect(description).toContain("Available tools (PARTIAL - ")
+    expect(description).toMatch(/- alpha \(150 tools, \d+ shown\)/)
+    expect(description).toContain("- zeta (1 tool)\n")
+    expect(description).toContain("tools.zeta.only_tool(input: { topic: string }): Promise<unknown>")
+    expect(description).toContain("tools.$codemode.search(")
+    expect(description).toContain("1. Find a tool (skip when it is already listed below)")
+    expect(description).toContain('- Browse one namespace: `await tools.$codemode.search({ query: "", namespace: "<name>" })`.')
+    expect(description).not.toContain("total_count")
+    expect(description).toContain("tools.alpha.op_0(")
+    expect(description).not.toContain("tools.alpha.op_99(")
+
+    const tool = await build(tools, ["alpha", "zeta"])
+    const out = await Effect.runPromise(
+      tool.execute({ code: "return await tools.$codemode.search({ query: 'only tool', limit: 3 })" }, ctx),
+    )
+    const result = JSON.parse(out.output)
+    expect(result.items.map((i: any) => i.path)).toContain("tools.zeta.only_tool")
+    expect(result.items[0].signature).toContain("tools.")
+    const signature = result.items.find((i: any) => i.path === "tools.zeta.only_tool").signature
+    expect(signature).toContain("tools.zeta.only_tool(input: {\n")
+    expect(signature).toContain("  /** Subject to look up */\n  topic: string")
+    expect(description).not.toContain("/**")
+    expect(out.metadata.toolCalls).toEqual([
+      { tool: "$codemode.search", status: "completed", input: { query: "only tool", limit: 3 } },
+    ])
+  })
+
+  test("runs plain JavaScript and returns the value as text", async () => {
+    const tool = await build({})
+    const output = await Effect.runPromise(tool.execute({ code: "return 1 + 2" }, ctx))
+    expect(output.output).toBe("3")
+    expect(output.metadata.toolCalls).toEqual([])
+  })
+
+  test("Object.keys(tools) enumerates the MCP server namespaces", async () => {
+    const tool = await build({
+      github_list_issues: mcpTool("list_issues", () => ""),
+      linear_search: mcpTool("search", () => ""),
+    })
+    const output = await Effect.runPromise(
+      tool.execute({ code: "const namespaces = Object.keys(tools); return { namespaces, count: namespaces.length }" }, ctx),
+    )
+    expect(JSON.parse(output.output)).toEqual({ namespaces: ["github", "linear"], count: 2 })
+  })
+
+  test("calls a namespaced MCP tool and flows its text result back into the program", async () => {
+    const seen: Record<string, unknown>[] = []
+    const tool = await build({
+      greeter_hello: mcpTool("hello", (args) => {
+        seen.push(args)
+        return { content: [{ type: "text", text: `hello ${args.name}` }] }
+      }),
+    })
+
+    const output = await Effect.runPromise(
+      tool.execute({ code: "const r = await tools.greeter.hello({ name: 'world' }); return r.toUpperCase()" }, ctx),
+    )
+
+    expect(seen).toEqual([{ name: "world" }])
+    expect(output.output).toBe("HELLO WORLD")
+    expect(output.metadata.toolCalls).toEqual([
+      { tool: "greeter.hello", status: "completed", input: { name: "world" } },
+    ])
+  })
+
+  test("exposes structured content as native data and composes multiple calls", async () => {
+    const tool = await build({
+      math_add: mcpTool("add", (args) => ({
+        content: [],
+        structuredContent: { sum: (args.a as number) + (args.b as number) },
+      })),
+    })
+
+    const output = await Effect.runPromise(
+      tool.execute(
+        {
+          code: `
+            const first = await tools.math.add({ a: 1, b: 2 })
+            const second = await tools.math.add({ a: first.sum, b: 10 })
+            return { total: second.sum }
+          `,
+        },
+        ctx,
+      ),
+    )
+
+    expect(JSON.parse(output.output)).toEqual({ total: 13 })
+    expect(output.metadata.toolCalls).toEqual([
+      { tool: "math.add", status: "completed", input: { a: 1, b: 2 } },
+      { tool: "math.add", status: "completed", input: { a: 3, b: 10 } },
+    ])
+  })
+
+  test("runs tool calls in parallel with Promise.all", async () => {
+    const tool = await build({
+      echo_one: mcpTool("one", () => ({ content: [{ type: "text", text: "1" }] })),
+      echo_two: mcpTool("two", () => ({ content: [{ type: "text", text: "2" }] })),
+    })
+
+    const output = await Effect.runPromise(
+      tool.execute(
+        { code: "const [a, b] = await Promise.all([tools.echo.one({}), tools.echo.two({})]); return a + b" },
+        ctx,
+      ),
+    )
+
+    expect(output.output).toBe("12")
+    expect(output.metadata.toolCalls.map((c) => c.tool).sort()).toEqual(["echo.one", "echo.two"])
+    expect(output.metadata.toolCalls.every((c) => c.status === "completed")).toBe(true)
+  })
+
+  test("a program failure fails the tool with a readable error", async () => {
+    const tool = await build({})
+    const error = await failure(tool.execute({ code: "throw new Error('boom')" }, ctx))
+    expect(error.message).toBe("Uncaught: boom")
+  })
+
+  test("reports an unknown tool as a failed execution", async () => {
+    const tool = await build({ known_tool: mcpTool("tool", () => "ok") })
+    const error = await failure(tool.execute({ code: "return await tools.known.missing({})" }, ctx))
+    expect(error.message).toContain("Unknown tool 'known.missing'")
+  })
+
+  test("propagates an MCP tool error into the program as a catchable failure", async () => {
+    const tool = await build({
+      bad_tool: mcpTool("tool", () => ({ isError: true, content: [{ type: "text", text: "server exploded" }] })),
+    })
+    const output = await Effect.runPromise(
+      tool.execute({ code: "try { await tools.bad.tool({}) } catch (e) { return 'caught: ' + e.message }" }, ctx),
+    )
+    expect(output.output).toBe("caught: server exploded")
+  })
+
+  test("asks permission before each child tool call", async () => {
+    const asked: unknown[] = []
+    const permissionCtx: Tool.Context = { ...ctx, ask: (req) => Effect.sync(() => void asked.push(req)) }
+    const ok = () => ({ content: [{ type: "text", text: "ok" }] })
+    const tool = await build({ a_tool: mcpTool("a", ok), b_tool: mcpTool("b", ok) })
+
+    await Effect.runPromise(
+      tool.execute({ code: "await tools.a.tool({}); await tools.b.tool({}); return 'done'" }, permissionCtx),
+    )
+
+    expect(asked.map((req: any) => req.permission)).toEqual(["a_tool", "b_tool"])
+  })
+
+  test("a denied permission fails the child call with a catchable message, not the whole execute", async () => {
+    const denyCtx: Tool.Context = { ...ctx, ask: () => Effect.die(new Error("permission denied by user")) }
+    const called: string[] = []
+    const tool = await build({
+      a_tool: mcpTool("a", () => {
+        called.push("a")
+        return { content: [{ type: "text", text: "ok" }] }
+      }),
+    })
+
+    const output = await Effect.runPromise(
+      tool.execute({ code: "try { await tools.a.tool({}) } catch (e) { return 'denied: ' + e.message }" }, denyCtx),
+    )
+
+    expect(output.output).toBe("denied: permission denied by user")
+    expect(output.metadata.error).toBeUndefined()
+    expect(called).toEqual([])
+    expect(output.metadata.toolCalls).toEqual([{ tool: "a.tool", status: "error" }])
+  })
+
+  test("child calls fire plugin tool.execute hooks with the MCP key and synthetic parent/N call ids", async () => {
+    const events: { name: string; input: any; output: any }[] = []
+    const trigger = ((name: unknown, input: unknown, output: unknown) =>
+      Effect.sync(() => {
+        events.push({ name: name as string, input, output })
+        return output
+      })) as Plugin.Interface["trigger"]
+    const tool = await build(
+      {
+        a_tool: mcpTool("a", () => ({ content: [{ type: "text", text: "one" }] })),
+        b_tool: mcpTool("b", () => ({ content: [{ type: "text", text: "two" }] })),
+      },
+      undefined,
+      undefined,
+      trigger,
+    )
+
+    const out = await Effect.runPromise(
+      tool.execute({ code: "await tools.a.tool({ x: 1 }); await tools.b.tool({}); return 'done'" }, ctx),
+    )
+
+    expect(out.output).toBe("done")
+    expect(events.map((e) => [e.name, e.input.tool, e.input.callID])).toEqual([
+      ["tool.execute.before", "a_tool", "call_code_mode/1"],
+      ["tool.execute.after", "a_tool", "call_code_mode/1"],
+      ["tool.execute.before", "b_tool", "call_code_mode/2"],
+      ["tool.execute.after", "b_tool", "call_code_mode/2"],
+    ])
+    const [before, after] = events
+    expect(before!.input.sessionID).toBe(ctx.sessionID)
+    expect(before!.output).toEqual({ args: { x: 1 } })
+    expect(after!.input.args).toEqual({ x: 1 })
+    expect(after!.output).toEqual({ content: [{ type: "text", text: "one" }] })
+  })
+
+  test("a failing before hook fails only that child call as a catchable in-program error", async () => {
+    const trigger = ((name: unknown, input: any, output: unknown) => {
+      if (name === "tool.execute.before" && input.tool === "a_tool") return Effect.die(new Error("hook exploded"))
+      return Effect.succeed(output)
+    }) as Plugin.Interface["trigger"]
+    const called: string[] = []
+    const record = (name: string) => () => {
+      called.push(name)
+      return { content: [{ type: "text", text: "ok" }] }
+    }
+    const tool = await build(
+      { a_tool: mcpTool("a", record("a")), b_tool: mcpTool("b", record("b")) },
+      undefined,
+      undefined,
+      trigger,
+    )
+
+    const out = await Effect.runPromise(
+      tool.execute(
+        {
+          code: `
+            let caught
+            try { await tools.a.tool({}) } catch (e) { caught = e.message }
+            const r = await tools.b.tool({})
+            return caught + " / " + r
+          `,
+        },
+        ctx,
+      ),
+    )
+
+    expect(out.metadata.error).toBeUndefined()
+    expect(out.output).toBe("hook exploded / ok")
+    expect(called).toEqual(["b"])
+  })
+
+  test("streams live per-call metadata as a call starts and finishes", async () => {
+    const snapshots: Array<{ toolCalls: { tool: string; status: string; input?: Record<string, unknown> }[] }> = []
+    const recordingCtx: Tool.Context = {
+      ...ctx,
+      metadata: (val: any) => Effect.sync(() => void snapshots.push(val.metadata)),
+    }
+    const tool = await build({ greeter_hello: mcpTool("hello", () => ({ content: [{ type: "text", text: "hi" }] })) })
+
+    await Effect.runPromise(
+      tool.execute({ code: "await tools.greeter.hello({ name: 'Ada' }); return 'done'" }, recordingCtx),
+    )
+
+    expect(snapshots).toContainEqual({
+      toolCalls: [{ tool: "greeter.hello", status: "running", input: { name: "Ada" } }],
+    })
+    expect(snapshots).toContainEqual({
+      toolCalls: [{ tool: "greeter.hello", status: "completed", input: { name: "Ada" } }],
+    })
+  })
+
+  test("marks a failed child call as error in the live metadata", async () => {
+    const snapshots: Array<{ toolCalls: { tool: string; status: string; input?: Record<string, unknown> }[] }> = []
+    const recordingCtx: Tool.Context = {
+      ...ctx,
+      metadata: (val: any) => Effect.sync(() => void snapshots.push(val.metadata)),
+    }
+    const tool = await build({
+      bad_tool: mcpTool("tool", () => ({ isError: true, content: [{ type: "text", text: "boom" }] })),
+    })
+
+    await Effect.runPromise(
+      tool.execute(
+        { code: "try { await tools.bad.tool({ reason: 'test' }) } catch (e) { return 'caught' }" },
+        recordingCtx,
+      ),
+    )
+
+    expect(snapshots).toContainEqual({ toolCalls: [{ tool: "bad.tool", status: "error", input: { reason: "test" } }] })
+  })
+
+  test("accumulates stripped media as execute attachments the sandbox never sees", async () => {
+    const tool = await build({
+      shot_take: mcpTool("take", () => ({
+        content: [{ type: "image", data: "PNGDATA", mimeType: "image/png" }],
+        structuredContent: { name: "shot.png" },
+      })),
+    })
+
+    const out = await Effect.runPromise(tool.execute({ code: "return await tools.shot.take({})" }, ctx))
+    expect(JSON.parse(out.output)).toEqual({ name: "shot.png" })
+    expect(out.attachments).toEqual([{ type: "file", mime: "image/png", url: "data:image/png;base64,PNGDATA" }])
+    expect(out.output).not.toContain("PNGDATA")
+  })
+
+  test("a media-only result returns a text marker so the program knows it succeeded", async () => {
+    const tool = await build({
+      shot_take: mcpTool("take", () => ({ content: [{ type: "image", data: "PNGDATA", mimeType: "image/png" }] })),
+    })
+    const out = await Effect.runPromise(tool.execute({ code: "return await tools.shot.take({})" }, ctx))
+    expect(out.output).toBe("[1 image attached to the result]")
+    expect(out.attachments).toEqual([{ type: "file", mime: "image/png", url: "data:image/png;base64,PNGDATA" }])
+  })
+
+  test("media-only markers distinguish all-image from mixed attachments", async () => {
+    const tool = await build({
+      media_images: mcpTool("images", () => ({
+        content: [
+          { type: "image", data: "PNG1", mimeType: "image/png" },
+          { type: "image", data: "PNG2", mimeType: "image/png" },
+        ],
+      })),
+      media_mixed: mcpTool("mixed", () => ({
+        content: [
+          { type: "image", data: "PNG3", mimeType: "image/png" },
+          { type: "resource", resource: { uri: "file:///tmp/report.pdf", mimeType: "application/pdf", blob: "PDF1" } },
+        ],
+      })),
+    })
+    const out = await Effect.runPromise(
+      tool.execute(
+        {
+          code: `
+            const images = await tools.media.images({})
+            const mixed = await tools.media.mixed({})
+            return { images, mixed }
+          `,
+        },
+        ctx,
+      ),
+    )
+
+    expect(JSON.parse(out.output)).toEqual({
+      images: "[2 images attached to the result]",
+      mixed: "[2 files attached to the result]",
+    })
+    expect(out.output).not.toContain("PNG")
+    expect(out.attachments).toEqual([
+      { type: "file", mime: "image/png", url: "data:image/png;base64,PNG1" },
+      { type: "file", mime: "image/png", url: "data:image/png;base64,PNG2" },
+      { type: "file", mime: "image/png", url: "data:image/png;base64,PNG3" },
+      { type: "file", mime: "application/pdf", url: "data:application/pdf;base64,PDF1", filename: "report.pdf" },
+    ])
+  })
+
+  test("resource links flow to the program as text, never as attachments", async () => {
+    const tool = await build({
+      docs_find: mcpTool("find", () => ({
+        content: [
+          { type: "resource_link", uri: "https://example.com/guide.pdf", name: "guide.pdf", mimeType: "application/pdf" },
+          { type: "resource_link", uri: "file:///tmp/notes.md", name: "notes.md" },
+        ],
+      })),
+    })
+    const out = await Effect.runPromise(tool.execute({ code: "return await tools.docs.find({})" }, ctx))
+
+    expect(out.output).toBe("guide.pdf: https://example.com/guide.pdf\nnotes.md: file:///tmp/notes.md")
+    expect(out.attachments).toBeUndefined()
+  })
+
+  test("attachments still flow when the program returns something else entirely", async () => {
+    const tool = await build({
+      shot_take: mcpTool("take", () => ({ content: [{ type: "image", data: "PNGDATA", mimeType: "image/png" }] })),
+    })
+    const out = await Effect.runPromise(
+      tool.execute({ code: "await tools.shot.take({}); return 'captured'" }, ctx),
+    )
+    expect(out.output).toBe("captured")
+    expect(out.attachments).toHaveLength(1)
+  })
+
+  test("isolates the sandbox from host globals", async () => {
+    const tool = await build({})
+    const error = await failure(tool.execute({ code: "return process.env" }, ctx))
+    expect(error.message).toContain("process")
+  })
+
+  test("cancelling via ctx.abort interrupts the running program", async () => {
+    const controller = new AbortController()
+    const tool = await build({
+      host_trigger: mcpTool("trigger", () => {
+        controller.abort()
+        return new Promise(() => {})
+      }),
+    })
+    const output = await Effect.runPromise(
+      tool.execute(
+        { code: "try { await tools.host.trigger({}) } catch {} while (true) {}" },
+        { ...ctx, abort: controller.signal },
+      ),
+    )
+    expect(output.output).toBe("Execution cancelled.")
+    expect(output.metadata.error).toBe(true)
+    expect(output.metadata.toolCalls).toEqual([{ tool: "host.trigger", status: "running" }])
+  })
+
+  test("a pre-aborted signal cancels before the program runs", async () => {
+    const controller = new AbortController()
+    controller.abort()
+    const ran: string[] = []
+    const tool = await build({ host_touch: mcpTool("touch", () => (ran.push("called"), "ok")) })
+    const output = await Effect.runPromise(
+      tool.execute({ code: "return await tools.host.touch({})" }, { ...ctx, abort: controller.signal }),
+    )
+    expect(output.output).toBe("Execution cancelled.")
+    expect(ran).toEqual([])
+  })
+
+  test("leaves oversized results to OpenCode's native tool-output truncation", async () => {
+    const tool = await build({})
+    const output = await Effect.runPromise(tool.execute({ code: "return 'x'.repeat(40000)" }, ctx))
+    expect(output.metadata.error).toBeUndefined()
+    expect(output.output).not.toContain("[result truncated:")
+    expect(output.output.length).toBeGreaterThanOrEqual(40_000)
+  })
+
+  test("appends logs after the result on success and after the message on error", async () => {
+    const tool = await build({})
+
+    const ok = await Effect.runPromise(
+      tool.execute({ code: "console.log('step one'); console.warn('careful'); return 'done'" }, ctx),
+    )
+    expect(ok.output).toBe("done\n\nLogs:\nstep one\n[warn] careful")
+
+    const error = await failure(tool.execute({ code: "console.log('before the throw'); throw new Error('boom')" }, ctx))
+    expect(error.message).toContain("Uncaught: boom")
+    expect(error.message).toContain("Logs:\nbefore the throw")
+  })
+})
+
+describe("code mode permission visibility", () => {
+  const deny = (permission: string): PermissionV1.Rule => ({ permission, pattern: "*", action: "deny" })
+  const askRule = (permission: string): PermissionV1.Rule => ({ permission, pattern: "*", action: "ask" })
+  const ok = () => ({ content: [{ type: "text", text: "ok" }] })
+
+  test("a hard-denied tool never enters the catalog or its search index", () => {
+    const mcpTools = {
+      github_create_issue: mcpTool("create_issue", ok),
+      github_list_issues: mcpTool("list_issues", ok),
+    }
+    const description = describeFor(mcpTools, ["github"], [deny("github_create_issue")])
+    expect(description).toContain("tools.github.list_issues(")
+    expect(description).not.toContain("create_issue")
+    expect(description).toContain("- github (1 tool)")
+  })
+
+  test("an ask-level tool stays fully visible in the catalog", () => {
+    const mcpTools = {
+      github_create_issue: mcpTool("create_issue", ok),
+      github_list_issues: mcpTool("list_issues", ok),
+    }
+    const description = describeFor(mcpTools, ["github"], [askRule("github_create_issue")])
+    expect(description).toContain("tools.github.create_issue(")
+    expect(description).toContain("tools.github.list_issues(")
+    expect(description).toContain("- github (2 tools)")
+  })
+
+  test("a hard-denied tool is not dispatchable: the program gets the unknown-tool diagnostic", async () => {
+    const called: string[] = []
+    const tool = await build(
+      {
+        github_create_issue: mcpTool("create_issue", () => {
+          called.push("create_issue")
+          return ok()
+        }),
+        github_list_issues: mcpTool("list_issues", ok),
+      },
+      ["github"],
+      [deny("github_create_issue")],
+    )
+
+    const denied = await failure(tool.execute({ code: "return await tools.github.create_issue({ title: 'x' })" }, ctx))
+    expect(denied.message).toContain("Unknown tool 'github.create_issue'")
+    expect(denied.message).not.toContain("permission")
+    expect(called).toEqual([])
+
+    const allowed = await Effect.runPromise(
+      tool.execute({ code: "return await tools.github.list_issues({})" }, ctx),
+    )
+    expect(allowed.metadata.error).toBeUndefined()
+    expect(allowed.output).toBe("ok")
+  })
+
+  test("an ask-level tool remains callable and still prompts via ctx.ask", async () => {
+    const asked: string[] = []
+    const askCtx: Tool.Context = { ...ctx, ask: (req) => Effect.sync(() => void asked.push(req.permission)) }
+    const tool = await build(
+      { github_list_issues: mcpTool("list_issues", ok) },
+      ["github"],
+      [askRule("github_list_issues")],
+    )
+    const out = await Effect.runPromise(
+      tool.execute({ code: "return await tools.github.list_issues({})" }, askCtx),
+    )
+    expect(out.output).toBe("ok")
+    expect(asked).toEqual(["github_list_issues"])
+  })
+
+  test("Permission.visibleTools hides only hard denies, matching Permission.disabled", () => {
+    const tools = { a_tool: 1, b_tool: 2, c_tool: 3 }
+    const visible = Permission.visibleTools(tools, [
+      deny("a_tool"),
+      askRule("b_tool"),
+      { permission: "c_tool", pattern: "something", action: "deny" },
+    ])
+    expect(Object.keys(visible)).toEqual(["b_tool", "c_tool"])
+  })
+})

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

@@ -230,6 +230,7 @@
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
     text-transform: capitalize;
+    color: var(--task-agent-legacy-color, var(--text-strong));
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
@@ -247,6 +248,57 @@
   }
 }
 
+body[data-new-layout] {
+  [data-component="task-tool-card"] {
+    padding: 8px 12px 8px 10px;
+    border-radius: 8px;
+    border: 0;
+    border-color: transparent;
+    background: var(--task-agent-background, light-dark(#fafafa, rgba(250, 250, 250, 0.15)));
+    box-shadow: inset 0 0 0 0.5px var(--task-agent-border, var(--v2-border-border-base));
+
+    [data-component="task-tool-spinner"],
+    [data-component="task-tool-title"] {
+      color: var(--task-agent-color, var(--text-strong));
+    }
+
+    [data-component="task-tool-title"] {
+      height: 20px;
+      font-family: var(--v2-font-family-sans, "Inter", sans-serif);
+      font-style: normal;
+      font-weight: 530;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: -0.04px;
+      flex: none;
+      flex-grow: 0;
+    }
+
+    [data-slot="basic-tool-tool-subtitle"] {
+      font-family: var(--v2-font-family-sans, "Inter", sans-serif);
+      font-style: normal;
+      font-weight: 440;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: -0.04px;
+      color: light-dark(var(--v2-text-text-base), #fafafa);
+      font-variation-settings: "slnt" 0;
+      flex: none;
+      flex-grow: 0;
+    }
+
+    [data-component="session-progress-indicator-v2"] {
+      color: var(--task-agent-color, light-dark(var(--v2-text-text-base), #ffffff));
+    }
+
+    &:hover,
+    &:focus-visible {
+      border-color: transparent;
+      background: var(--task-agent-background, light-dark(#fafafa, rgba(250, 250, 250, 0.15)));
+    }
+  }
+}
+
 body:not([data-new-layout]) {
   [data-component="tool-trigger"] {
     [data-slot="basic-tool-tool-spinner"] {

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

@@ -1,5 +1,6 @@
 import type { FileContent } from "@opencode-ai/sdk/v2"
-import { createEffect, createMemo, createResource, Match, on, Show, Switch, type JSX } from "solid-js"
+import { createEffect, createMemo, Match, on, onCleanup, Show, Switch, untrack, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
 import {
   dataUrlFromMediaValue,
@@ -30,6 +31,13 @@ function mediaValue(cfg: FileMediaOptions, mode: "image" | "audio") {
 
 export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX.Element }) {
   const i18n = useI18n()
+  const [remote, setRemote] = createStore<{
+    key?: string
+    loading?: boolean
+    error?: boolean
+    src?: string
+    mime?: string
+  }>({})
   const cfg = () => props.media
   const kind = createMemo(() => {
     const media = cfg()
@@ -81,50 +89,66 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
     }
   })
 
-  const [loaded] = createResource(request, async (input) => {
-    return input.readFile(input.path).then(
+  createEffect(() => {
+    const input = request()
+    if (!input) {
+      setRemote({ key: undefined, loading: false, error: false, src: undefined, mime: undefined })
+      return
+    }
+
+    let active = true
+    // Keep the previous media visible while re-reading the same file (e.g. a vcs
+    // diff refresh); only a key change resets to the loading placeholder.
+    if (untrack(() => remote.key) === input.key) setRemote({ loading: true, error: false })
+    else setRemote({ key: input.key, loading: true, error: false, src: undefined, mime: undefined })
+    void input.readFile(input.path).then(
       (result) => {
+        if (!active) return
         const src = dataUrlFromMediaValue(result as any, input.kind)
         if (!src) {
           input.onError?.({ kind: input.kind })
-          return { key: input.key, error: true as const }
+          setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
+          return
         }
 
-        return {
+        setRemote({
           key: input.key,
+          loading: false,
+          error: false,
           src,
           mime: input.kind === "audio" ? normalizeMimeType(result?.mimeType) : undefined,
-        }
+        })
       },
       () => {
+        if (!active) return
         input.onError?.({ kind: input.kind })
-        return { key: input.key, error: true as const }
+        setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
       },
     )
-  })
 
-  const remote = createMemo(() => {
-    const input = request()
-    const value = loaded()
-    if (!input || !value || value.key !== input.key) return
-    return value
+    onCleanup(() => {
+      active = false
+    })
   })
 
   const src = createMemo(() => {
-    const value = remote()
-    return direct() ?? (value && "src" in value ? value.src : undefined)
+    const input = request()
+    if (!input || remote.key !== input.key || remote.error) return direct()
+    return direct() ?? remote.src
   })
   const status = createMemo(() => {
     if (direct()) return "ready" as const
-    if (!request()) return "idle" as const
-    if (loaded.loading) return "loading" as const
-    if (remote()?.error) return "error" as const
+    const input = request()
+    if (!input) return "idle" as const
+    if (remote.key !== input.key || remote.loading) return "loading" as const
+    if (remote.error) return "error" as const
     if (src()) return "ready" as const
     return "idle" as const
   })
   const audioMime = createMemo(() => {
-    const value = remote()
-    return value && "mime" in value ? value.mime : undefined
+    const input = request()
+    if (!input || remote.key !== input.key) return
+    return remote.mime
   })
 
   const svgSource = createMemo(() => {

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

@@ -456,11 +456,18 @@ function useAnnotationRerender<A>(opts: {
   current: () => AnnotationTarget<A> | undefined
   annotations: () => A[]
 }) {
+  const applied = new WeakSet<AnnotationTarget<A>>()
   createEffect(() => {
     opts.viewer.rendered()
     const active = opts.current()
     if (!active) return
-    active.setLineAnnotations(opts.annotations())
+    const annotations = opts.annotations()
+    // renderViewer always draws with empty annotations, so skip the extra rerender
+    // when this instance has nothing applied and nothing to apply.
+    if (annotations.length === 0 && !applied.has(active)) return
+    if (annotations.length === 0) applied.delete(active)
+    else applied.add(active)
+    active.setLineAnnotations(annotations)
     active.rerender()
     requestAnimationFrame(() => opts.viewer.find.refresh({ reset: true }))
   })

packages/session-ui/src/components/line-comment-annotations.tsx

@@ -34,7 +34,7 @@ type HoverCommentLine = {
   side?: "additions" | "deletions"
 }
 
-type LineCommentStateProps<T> = {
+export type LineCommentStateProps<T> = {
   opened: Accessor<T | null>
   setOpened: (id: T | null) => void
   selected: Accessor<SelectedLineRange | null>
@@ -45,7 +45,7 @@ type LineCommentStateProps<T> = {
   hoverSelected?: (range: SelectedLineRange) => void
 }
 
-type LineCommentShape = {
+export type LineCommentShape = {
   id: string
   selection: SelectedLineRange
   comment: string
@@ -95,9 +95,14 @@ type DraftProps = {
   submitLabel?: string
 }
 
-export function createLineCommentAnnotationRenderer<T>(props: {
-  renderComment: (comment: T) => CommentProps
-  renderDraft: (range: SelectedLineRange) => DraftProps
+// Generic host machinery shared by the v1 and v2 annotation renderers: each
+// annotation key gets a detached DOM host with its own Solid root, updated in
+// place through a signal so Pierre can reparent the host without re-rendering.
+export function createLineCommentAnnotationRenderer<T, C, D>(props: {
+  renderComment: (comment: T) => C
+  renderDraft: (range: SelectedLineRange) => D
+  commentElement: (view: Accessor<C>) => JSX.Element
+  draftElement: (view: Accessor<D>) => JSX.Element
 }) {
   const nodes = new Map<
     string,
@@ -123,37 +128,7 @@ export function createLineCommentAnnotationRenderer<T>(props: {
           if (next.kind !== "comment") return props.renderComment(active.comment)
           return props.renderComment(next.comment)
         })
-        return (
-          <Show
-            when={view().editor}
-            fallback={
-              <LineComment
-                inline
-                id={view().id}
-                open={view().open}
-                comment={view().comment}
-                selection={view().selection}
-                actions={view().actions}
-                onClick={view().onClick}
-                onMouseEnter={view().onMouseEnter}
-              />
-            }
-          >
-            <LineCommentEditor
-              inline
-              id={view().id}
-              value={view().editor!.value}
-              selection={view().editor!.selection}
-              onInput={view().editor!.onInput}
-              onCancel={view().editor!.onCancel}
-              onSubmit={view().editor!.onSubmit}
-              onPopoverFocusOut={view().editor!.onPopoverFocusOut}
-              cancelLabel={view().editor!.cancelLabel}
-              submitLabel={view().editor!.submitLabel}
-              mention={view().editor!.mention}
-            />
-          </Show>
-        )
+        return props.commentElement(view)
       }
 
       const view = createMemo(() => {
@@ -161,18 +136,7 @@ export function createLineCommentAnnotationRenderer<T>(props: {
         if (next.kind !== "draft") return props.renderDraft(active.range)
         return props.renderDraft(next.range)
       })
-      return (
-        <LineCommentEditor
-          inline
-          value={view().value}
-          selection={view().selection}
-          onInput={view().onInput}
-          onCancel={view().onCancel}
-          onSubmit={view().onSubmit}
-          onPopoverFocusOut={view().onPopoverFocusOut}
-          mention={view().mention}
-        />
-      )
+      return props.draftElement(view)
     }, host)
 
     const node = { host, dispose, setMeta: setCurrent }
@@ -205,6 +169,55 @@ export function createLineCommentAnnotationRenderer<T>(props: {
   return { render, reconcile, cleanup }
 }
 
+function lineCommentElement(view: Accessor<CommentProps>) {
+  return (
+    <Show
+      when={view().editor}
+      fallback={
+        <LineComment
+          inline
+          id={view().id}
+          open={view().open}
+          comment={view().comment}
+          selection={view().selection}
+          actions={view().actions}
+          onClick={view().onClick}
+          onMouseEnter={view().onMouseEnter}
+        />
+      }
+    >
+      <LineCommentEditor
+        inline
+        id={view().id}
+        value={view().editor!.value}
+        selection={view().editor!.selection}
+        onInput={view().editor!.onInput}
+        onCancel={view().editor!.onCancel}
+        onSubmit={view().editor!.onSubmit}
+        onPopoverFocusOut={view().editor!.onPopoverFocusOut}
+        cancelLabel={view().editor!.cancelLabel}
+        submitLabel={view().editor!.submitLabel}
+        mention={view().editor!.mention}
+      />
+    </Show>
+  )
+}
+
+function lineCommentDraftElement(view: Accessor<DraftProps>) {
+  return (
+    <LineCommentEditor
+      inline
+      value={view().value}
+      selection={view().selection}
+      onInput={view().onInput}
+      onCancel={view().onCancel}
+      onSubmit={view().onSubmit}
+      onPopoverFocusOut={view().onPopoverFocusOut}
+      mention={view().mention}
+    />
+  )
+}
+
 export function createLineCommentState<T>(props: LineCommentStateProps<T>) {
   const [state, setState] = createStore({
     draft: "",
@@ -314,7 +327,9 @@ export function createLineCommentController<T extends LineCommentShape>(
 ): {
   note: ReturnType<typeof createLineCommentState<string>>
   annotations: Accessor<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>
-  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRenderer<T>>["renderAnnotation"]
+  renderAnnotation: ReturnType<
+    typeof createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>
+  >["renderAnnotation"]
   renderGutterUtility: ReturnType<typeof createLineCommentGutterRenderer>
   onLineSelected: (range: SelectedLineRange | null) => void
   onLineSelectionEnd: (range: SelectedLineRange | null) => void
@@ -324,7 +339,9 @@ export function createLineCommentController<T extends LineCommentShape>(
 ): {
   note: ReturnType<typeof createLineCommentState<string>>
   annotations: Accessor<LineCommentAnnotation<T>[]>
-  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRenderer<T>>["renderAnnotation"]
+  renderAnnotation: ReturnType<
+    typeof createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>
+  >["renderAnnotation"]
   renderGutterUtility: ReturnType<typeof createLineCommentGutterRenderer>
   onLineSelected: (range: SelectedLineRange | null) => void
   onLineSelectionEnd: (range: SelectedLineRange | null) => void
@@ -353,8 +370,10 @@ export function createLineCommentController<T extends LineCommentShape>(
           draftKey: props.draftKey,
         })
 
-  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T>({
+  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>({
     annotations,
+    commentElement: lineCommentElement,
+    draftElement: lineCommentDraftElement,
     renderComment: (comment) => {
       const edit = () => note.openEditor(comment.id, comment.selection, comment.comment)
       const remove = () => {
@@ -471,77 +490,111 @@ export function createLineCommentAnnotations<T>(
   const line = (range: SelectedLineRange) => Math.max(range.start, range.end)
 
   if ("getSide" in props) {
-    return createMemo<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>(() => {
+    return createMemo<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>(
+      () => {
+        const list = props.comments().map((comment) => {
+          const range = props.getCommentSelection(comment)
+          return {
+            side: props.getSide(range),
+            lineNumber: line(range),
+            metadata: {
+              kind: "comment",
+              key: `comment:${props.getCommentId(comment)}`,
+              comment,
+            } satisfies LineCommentAnnotationMeta<T>,
+          }
+        })
+
+        const range = props.draftRange()
+        if (!range) return list
+
+        return [
+          ...list,
+          {
+            side: props.getSide(range),
+            lineNumber: line(range),
+            metadata: {
+              kind: "draft",
+              key: `draft:${props.draftKey()}`,
+              range,
+            } satisfies LineCommentAnnotationMeta<T>,
+          },
+        ]
+      },
+      [],
+      // Stable identity for unchanged annotations avoids no-op diff rerenders downstream.
+      { equals: sameAnnotationLists },
+    )
+  }
+
+  return createMemo<LineCommentAnnotation<T>[]>(
+    () => {
       const list = props.comments().map((comment) => {
         const range = props.getCommentSelection(comment)
-        return {
-          side: props.getSide(range),
+        const entry: LineCommentAnnotation<T> = {
           lineNumber: line(range),
           metadata: {
             kind: "comment",
             key: `comment:${props.getCommentId(comment)}`,
             comment,
-          } satisfies LineCommentAnnotationMeta<T>,
+          },
         }
+
+        return entry
       })
 
       const range = props.draftRange()
       if (!range) return list
 
-      return [
-        ...list,
-        {
-          side: props.getSide(range),
-          lineNumber: line(range),
-          metadata: {
-            kind: "draft",
-            key: `draft:${props.draftKey()}`,
-            range,
-          } satisfies LineCommentAnnotationMeta<T>,
-        },
-      ]
-    })
-  }
-
-  return createMemo<LineCommentAnnotation<T>[]>(() => {
-    const list = props.comments().map((comment) => {
-      const range = props.getCommentSelection(comment)
-      const entry: LineCommentAnnotation<T> = {
+      const draft: LineCommentAnnotation<T> = {
         lineNumber: line(range),
         metadata: {
-          kind: "comment",
-          key: `comment:${props.getCommentId(comment)}`,
-          comment,
+          kind: "draft",
+          key: `draft:${props.draftKey()}`,
+          range,
         },
       }
 
-      return entry
-    })
+      return [...list, draft]
+    },
+    [],
+    { equals: sameAnnotationLists },
+  )
+}
 
-    const range = props.draftRange()
-    if (!range) return list
+type AnnotationListItem = {
+  lineNumber: number
+  side?: unknown
+  metadata: { kind: string; key: string; comment?: unknown; range?: unknown }
+}
 
-    const draft: LineCommentAnnotation<T> = {
-      lineNumber: line(range),
-      metadata: {
-        kind: "draft",
-        key: `draft:${props.draftKey()}`,
-        range,
-      },
-    }
-
-    return [...list, draft]
+function sameAnnotationLists(previous: AnnotationListItem[], next: AnnotationListItem[]) {
+  if (previous.length !== next.length) return false
+  return previous.every((item, index) => {
+    const other = next[index]!
+    return (
+      item.lineNumber === other.lineNumber &&
+      item.side === other.side &&
+      item.metadata.kind === other.metadata.kind &&
+      item.metadata.key === other.metadata.key &&
+      item.metadata.comment === other.metadata.comment &&
+      item.metadata.range === other.metadata.range
+    )
   })
 }
 
-export function createManagedLineCommentAnnotationRenderer<T>(props: {
+export function createManagedLineCommentAnnotationRenderer<T, C, D>(props: {
   annotations: Accessor<LineCommentAnnotation<T>[]>
-  renderComment: (comment: T) => CommentProps
-  renderDraft: (range: SelectedLineRange) => DraftProps
+  renderComment: (comment: T) => C
+  renderDraft: (range: SelectedLineRange) => D
+  commentElement: (view: Accessor<C>) => JSX.Element
+  draftElement: (view: Accessor<D>) => JSX.Element
 }) {
-  const renderer = createLineCommentAnnotationRenderer<T>({
+  const renderer = createLineCommentAnnotationRenderer<T, C, D>({
     renderComment: props.renderComment,
     renderDraft: props.renderDraft,
+    commentElement: props.commentElement,
+    draftElement: props.draftElement,
   })
 
   createEffect(() => {

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

@@ -62,6 +62,7 @@ import { animate } from "motion"
 import { useLocation } from "@solidjs/router"
 import { attached, inline, kind } from "./message-file"
 import { readPartText } from "./message-part-text"
+import { SessionProgressIndicatorV2 } from "../v2/components/session-progress-indicator-v2"
 
 async function writeClipboard(text: string): Promise<boolean> {
   const body = typeof document === "undefined" ? undefined : document.body
@@ -370,6 +371,44 @@ const agentTones: Record<string, string> = {
   plan: "var(--icon-agent-plan-base)",
 }
 
+const v2AgentTones: Record<string, { color: string; border: string; background: string }> = {
+  build: {
+    color: "var(--v2-agent-build-solid)",
+    border: "var(--v2-agent-build-border)",
+    background: "var(--v2-agent-build-background)",
+  },
+  explore: {
+    color: "var(--v2-agent-explore-solid)",
+    border: "var(--v2-agent-explore-border)",
+    background: "var(--v2-agent-explore-background)",
+  },
+  plan: {
+    color: "var(--v2-agent-plan-solid)",
+    border: "var(--v2-agent-plan-border)",
+    background: "var(--v2-agent-plan-background)",
+  },
+}
+
+const agentThemeColors: Record<string, string> = {
+  primary: "var(--text-interactive-base)",
+  secondary: "var(--text-base)",
+  accent: "var(--icon-info-base)",
+  success: "var(--icon-success-base)",
+  warning: "var(--icon-warning-base)",
+  error: "var(--icon-critical-base)",
+  info: "var(--icon-info-base)",
+}
+
+const v2AgentThemeColors: Record<string, string> = {
+  primary: "var(--v2-text-text-accent)",
+  secondary: "var(--v2-text-text-muted)",
+  accent: "var(--v2-icon-icon-accent)",
+  success: "var(--v2-state-fg-success)",
+  warning: "var(--v2-state-fg-warning)",
+  error: "var(--v2-state-fg-danger)",
+  info: "var(--v2-state-fg-info)",
+}
+
 const agentPalette = [
   "var(--icon-agent-ask-base)",
   "var(--icon-agent-build-base)",
@@ -394,16 +433,31 @@ function tone(name: string) {
 function taskAgent(
   raw: unknown,
   list?: readonly { name: string; color?: string }[],
-): { name?: string; color?: string } {
+): { name?: string; color?: string; v2Color?: string; border?: string; background?: string } {
   if (typeof raw !== "string" || !raw) return {}
   const key = raw.toLowerCase()
   const item = list?.find((entry) => entry.name === raw || entry.name.toLowerCase() === key)
+  const v2Tone = item?.color ? undefined : v2AgentTones[key]
+  const color = agentColor(item?.color, agentThemeColors) ?? agentTones[key] ?? tone(key)
+  const v2Color = agentColor(item?.color, v2AgentThemeColors) ?? v2Tone?.color ?? color
   return {
     name: item?.name ?? `${raw[0]!.toUpperCase()}${raw.slice(1)}`,
-    color: item?.color ?? agentTones[key] ?? tone(key),
+    color,
+    v2Color,
+    border: v2Tone?.border ?? `color-mix(in srgb, ${v2Color} 48%, transparent)`,
+    background: v2Tone?.background ?? `color-mix(in srgb, ${v2Color} 12%, transparent)`,
   }
 }
 
+function agentColor(value: string | undefined, themeColors: Record<string, string>) {
+  if (!value) return
+  return themeColors[value] ?? value
+}
+
+function newLayout() {
+  return typeof document !== "undefined" && document.body.hasAttribute("data-new-layout")
+}
+
 function webSearchProviderLabel(provider: unknown) {
   if (provider === "parallel") return "Parallel Web Search"
   if (provider === "exa") return "Exa Web Search"
@@ -1882,6 +1936,9 @@ ToolRegistry.register({
     const agent = createMemo(() => taskAgent(props.input.subagent_type, data.store.agent))
     const title = createMemo(() => agent().name ?? i18n.t("ui.tool.agent.default"))
     const tone = createMemo(() => agent().color)
+    const v2Tone = createMemo(() => agent().v2Color)
+    const border = createMemo(() => agent().border)
+    const background = createMemo(() => agent().background)
     const subtitle = createMemo(() => {
       const value =
         typeof props.input.description === "string" && props.input.description
@@ -1921,17 +1978,27 @@ ToolRegistry.register({
     }
 
     const trigger = () => (
-      <div data-component="task-tool-card">
+      <div
+        data-component="task-tool-card"
+        style={{
+          "--task-agent-color": v2Tone(),
+          "--task-agent-legacy-color": tone(),
+          "--task-agent-border": border(),
+          "--task-agent-background": background(),
+        }}
+      >
         <div data-slot="basic-tool-tool-info-structured">
           <div data-slot="basic-tool-tool-info-main">
             <Show when={running()}>
               <span data-component="task-tool-spinner" style={{ color: tone() ?? "var(--icon-interactive-base)" }}>
-                <Spinner />
+                <Show when={newLayout()} fallback={<Spinner />}>
+                  <SessionProgressIndicatorV2
+                    style={{ color: v2Tone() ?? "light-dark(var(--v2-text-text-base), #ffffff)" }}
+                  />
+                </Show>
               </span>
             </Show>
-            <span data-component="task-tool-title" style={{ color: tone() ?? "var(--text-strong)" }}>
-              {title()}
-            </span>
+            <span data-component="task-tool-title">{title()}</span>
             <Show when={subtitle()}>
               <span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
             </Show>

packages/session-ui/src/pierre/comment-hover.ts

@@ -39,10 +39,18 @@ export function createHoverCommentUtility(props: {
     line = next
   }
 
-  const loop = () => {
-    if (!button.isConnected) return
+  // The hovered line changes when the pointer moves or when content scrolls under
+  // a stationary pointer, so track both with passive listeners instead of polling
+  // every animation frame. There is no teardown hook for this utility; like the
+  // rAF loop this replaced, the listeners self-detach on the first event after
+  // the button leaves the DOM.
+  const onHoverInvalidated = () => {
+    if (!button.isConnected) {
+      document.removeEventListener("pointermove", onHoverInvalidated)
+      document.removeEventListener("scroll", onHoverInvalidated, true)
+      return
+    }
     sync()
-    requestAnimationFrame(loop)
   }
 
   const open = () => {
@@ -51,7 +59,8 @@ export function createHoverCommentUtility(props: {
     props.onSelect(next)
   }
 
-  requestAnimationFrame(loop)
+  document.addEventListener("pointermove", onHoverInvalidated, { passive: true })
+  document.addEventListener("scroll", onHoverInvalidated, { passive: true, capture: true })
   button.addEventListener("mouseenter", sync)
   button.addEventListener("mousemove", sync)
   button.addEventListener("pointerdown", (event) => {

packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx

@@ -0,0 +1,212 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+import { Show, type Accessor, type JSX } from "solid-js"
+import {
+  createLineCommentAnnotations,
+  createLineCommentGutterRenderer,
+  createLineCommentState,
+  createManagedLineCommentAnnotationRenderer,
+  type LineCommentShape,
+  type LineCommentStateProps,
+} from "../../components/line-comment-annotations"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { cloneSelectedLineRange, formatSelectedLineLabel } from "../../pierre/selection-bridge"
+import { LineCommentEditorV2, LineCommentV2 } from "@opencode-ai/ui/v2/line-comment-v2"
+
+type LineCommentControllerV2Props<T extends LineCommentShape> = {
+  comments: Accessor<T[]>
+  draftKey: Accessor<string>
+  label: string
+  state: LineCommentStateProps<string>
+  getSide: (range: SelectedLineRange) => "additions" | "deletions"
+  onSubmit: (input: { comment: string; selection: SelectedLineRange }) => void
+  onUpdate?: (input: { id: string; comment: string; selection: SelectedLineRange }) => void
+  onDelete?: (comment: T) => void
+  renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element
+  editSubmitLabel?: string
+}
+
+type CommentProps = {
+  id?: string
+  comment: JSX.Element
+  selection: JSX.Element
+  actions?: JSX.Element
+  editor?: DraftProps
+  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+  onMouseEnter?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+}
+
+type DraftProps = {
+  value: string
+  selection: JSX.Element
+  onInput: (value: string) => void
+  onCancel: VoidFunction
+  onSubmit: (value: string) => void
+  cancelLabel?: string
+  submitLabel?: string
+}
+
+function lineCommentElementV2(view: Accessor<CommentProps>) {
+  return (
+    <Show
+      when={view().editor}
+      fallback={
+        <div
+          data-prevent-autofocus=""
+          data-comment-id={view().id}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={view().onClick}
+          onMouseEnter={view().onMouseEnter}
+        >
+          <LineCommentV2 comment={view().comment} selection={view().selection} actions={view().actions} />
+        </div>
+      }
+    >
+      <div data-prevent-autofocus="" data-comment-id={view().id} onMouseDown={(event) => event.stopPropagation()}>
+        <LineCommentEditorV2
+          value={view().editor!.value}
+          selection={view().editor!.selection}
+          onInput={view().editor!.onInput}
+          onCancel={view().editor!.onCancel}
+          onSubmit={view().editor!.onSubmit}
+          cancelLabel={view().editor!.cancelLabel}
+          submitLabel={view().editor!.submitLabel}
+        />
+      </div>
+    </Show>
+  )
+}
+
+function lineCommentDraftElementV2(view: Accessor<DraftProps>) {
+  return (
+    <div data-prevent-autofocus="" onMouseDown={(event) => event.stopPropagation()}>
+      <LineCommentEditorV2
+        value={view().value}
+        selection={view().selection}
+        onInput={view().onInput}
+        onCancel={view().onCancel}
+        onSubmit={view().onSubmit}
+        cancelLabel={view().cancelLabel}
+        submitLabel={view().submitLabel}
+      />
+    </div>
+  )
+}
+
+export function createLineCommentControllerV2<T extends LineCommentShape>(props: LineCommentControllerV2Props<T>) {
+  const i18n = useI18n()
+  const note = createLineCommentState<string>(props.state)
+
+  const annotations = createLineCommentAnnotations({
+    comments: props.comments,
+    getCommentId: (comment) => comment.id,
+    getCommentSelection: (comment) => comment.selection,
+    draftRange: note.commenting,
+    draftKey: props.draftKey,
+    getSide: props.getSide,
+  })
+
+  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>({
+    annotations,
+    commentElement: lineCommentElementV2,
+    draftElement: lineCommentDraftElementV2,
+    renderComment: (comment) => {
+      const edit = () => note.openEditor(comment.id, comment.selection, comment.comment)
+      const remove = () => {
+        note.reset()
+        props.onDelete?.(comment)
+      }
+
+      return {
+        id: comment.id,
+        comment: comment.comment,
+        selection: formatSelectedLineLabel(comment.selection, i18n.t),
+        get actions() {
+          return props.renderCommentActions?.(comment, { edit, remove })
+        },
+        get editor() {
+          return note.isEditing(comment.id)
+            ? {
+                get value() {
+                  return note.draft()
+                },
+                selection: formatSelectedLineLabel(comment.selection, i18n.t),
+                onInput: note.setDraft,
+                onCancel: note.cancelDraft,
+                onSubmit: (value: string) => {
+                  props.onUpdate?.({
+                    id: comment.id,
+                    comment: value,
+                    selection: cloneSelectedLineRange(comment.selection),
+                  })
+                  note.cancelDraft()
+                },
+                cancelLabel: i18n.t("ui.lineComment.cancel"),
+                submitLabel: props.editSubmitLabel,
+              }
+            : undefined
+        },
+        onMouseEnter: () => note.hoverComment(comment.selection),
+        onClick: () => {
+          if (note.isEditing(comment.id)) return
+          note.toggleComment(comment.id, comment.selection)
+        },
+      }
+    },
+    renderDraft: (range) => ({
+      get value() {
+        return note.draft()
+      },
+      selection: formatSelectedLineLabel(range, i18n.t),
+      onInput: note.setDraft,
+      onCancel: note.cancelDraft,
+      onSubmit: (comment) => {
+        props.onSubmit({ comment, selection: cloneSelectedLineRange(range) })
+        note.cancelDraft()
+      },
+      cancelLabel: i18n.t("ui.lineComment.cancel"),
+      submitLabel: i18n.t("ui.lineComment.submit"),
+    }),
+  })
+
+  const renderGutterUtility = createLineCommentGutterRenderer({
+    label: props.label,
+    getSelectedRange: () => {
+      if (note.opened()) return null
+      return note.selected()
+    },
+    onOpenDraft: note.openDraft,
+  })
+
+  const onLineSelected = (range: SelectedLineRange | null) => {
+    if (!range) {
+      note.select(null)
+      note.cancelDraft()
+      return
+    }
+
+    note.select(range)
+  }
+
+  const onLineSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) {
+      note.cancelDraft()
+      return
+    }
+
+    note.openDraft(range)
+  }
+
+  const onLineNumberSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) return
+    note.openDraft(range)
+  }
+
+  return {
+    annotations,
+    renderAnnotation,
+    renderGutterUtility,
+    onLineSelected,
+    onLineSelectionEnd,
+    onLineNumberSelectionEnd,
+  }
+}

packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx

@@ -0,0 +1,17 @@
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import "./session-review-v2.css"
+
+export function SessionReviewEmptyChangesV2() {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-changes">
+      <Icon name="review" size="large" />
+      <div data-slot="session-review-v2-empty-changes-title">{i18n.t("ui.sessionReviewV2.empty.changes.title")}</div>
+      <div data-slot="session-review-v2-empty-changes-description">
+        {i18n.t("ui.sessionReviewV2.empty.changes.description")}
+      </div>
+    </div>
+  )
+}

packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx

@@ -0,0 +1,28 @@
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import "./session-review-v2.css"
+
+export type SessionReviewEmptyNoGitV2Props = {
+  pending: boolean
+  onInitGit: () => void
+}
+
+export function SessionReviewEmptyNoGitV2(props: SessionReviewEmptyNoGitV2Props) {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-no-git">
+      <FileIcon node={{ path: ".gitignore", type: "file" }} mono />
+      <div data-slot="session-review-v2-empty-no-git-title">{i18n.t("ui.sessionReviewV2.empty.noGit.title")}</div>
+      <div data-slot="session-review-v2-empty-no-git-description">
+        {i18n.t("ui.sessionReviewV2.empty.noGit.description")}
+      </div>
+      <ButtonV2 variant="neutral" size="normal" disabled={props.pending} onClick={props.onInitGit}>
+        {props.pending
+          ? i18n.t("ui.sessionReviewV2.empty.noGit.actionLoading")
+          : i18n.t("ui.sessionReviewV2.empty.noGit.action")}
+      </ButtonV2>
+    </div>
+  )
+}

packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx

@@ -0,0 +1,282 @@
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import type { SelectedLineRange } from "@pierre/diffs"
+import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { useFileComponent } from "@opencode-ai/ui/context/file"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { mediaKindFromPath } from "../../pierre/media"
+import { cloneSelectedLineRange, previewSelectedLines } from "../../pierre/selection-bridge"
+import type { FileContent, SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import { createEffect, createMemo, onCleanup, Show, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+import { normalize, text, type ViewDiff } from "../../components/session-diff"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "../../components/session-review"
+import type { SessionReviewExpandMode } from "./session-review-v2"
+import { createLineCommentControllerV2 } from "./line-comment-annotations-v2"
+import { LineCommentV2OverflowIcon } from "@opencode-ai/ui/v2/line-comment-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import "./session-review-v2.css"
+
+type ReviewDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
+
+export type SessionReviewFilePreviewV2Props = {
+  file: string
+  diff: ReviewDiff
+  diffStyle: SessionReviewDiffStyle
+  expandMode?: SessionReviewExpandMode
+  readFile?: (path: string) => Promise<FileContent | undefined>
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+function statusLabel(status: ViewDiff["status"]) {
+  if (status === "added") return "A"
+  if (status === "deleted") return "D"
+  return "M"
+}
+
+function statusType(status: ViewDiff["status"]) {
+  if (status === "added") return "added"
+  if (status === "deleted") return "deleted"
+  return "modified"
+}
+
+function selectionSide(range: SelectedLineRange) {
+  return range.endSide ?? range.side ?? "additions"
+}
+
+function selectionPreview(diff: ViewDiff, range: SelectedLineRange) {
+  const side = selectionSide(range)
+  const contents = text(diff, side)
+  if (contents.length === 0) return undefined
+  return previewSelectedLines(contents, range)
+}
+
+function ReviewCommentMenuV2(props: {
+  labels: SessionReviewCommentActions
+  onEdit: VoidFunction
+  onDelete: VoidFunction
+}) {
+  return (
+    <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
+      <MenuV2 gutter={4}>
+        <MenuV2.Trigger
+          as="button"
+          type="button"
+          data-slot="line-comment-v2-overflow"
+          aria-label={props.labels.moreLabel}
+        >
+          <LineCommentV2OverflowIcon />
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onEdit}>{props.labels.editLabel}</MenuV2.Item>
+            <MenuV2.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
+    </div>
+  )
+}
+
+export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Props) {
+  const i18n = useI18n()
+  const fileComponent = useFileComponent()
+  let scrollRef: HTMLDivElement | undefined
+  let focusToken = 0
+
+  const [store, setStore] = createStore({
+    selection: null as SelectedLineRange | null,
+    commenting: null as SelectedLineRange | null,
+    opened: null as string | null,
+  })
+
+  const view = createMemo(() => ({
+    ...normalize(props.diff),
+    preloaded: "preloaded" in props.diff ? props.diff.preloaded : undefined,
+  }))
+  const diffCanRender = createMemo(() => view().additions !== 0 || view().deletions !== 0)
+  const mediaKind = createMemo(() => mediaKindFromPath(props.file))
+  const comments = createMemo(() => (props.comments ?? []).filter((comment) => comment.file === props.file))
+  const commentedLines = createMemo(() => comments().map((comment) => comment.selection))
+  const lineCommentsEnabled = () => props.onLineComment != null
+
+  const commentsUi = createLineCommentControllerV2<SessionReviewComment>({
+    comments,
+    label: i18n.t("ui.lineComment.submit"),
+    draftKey: () => props.file,
+    state: {
+      opened: () => store.opened,
+      setOpened: (id) => setStore("opened", id),
+      selected: () => store.selection,
+      setSelected: (range) => setStore("selection", range),
+      commenting: () => store.commenting,
+      setCommenting: (range) => setStore("commenting", range),
+    },
+    getSide: selectionSide,
+    onSubmit: ({ comment, selection }) => {
+      props.onLineComment?.({
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onUpdate: ({ id, comment, selection }) => {
+      props.onLineCommentUpdate?.({
+        id,
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onDelete: (comment) => {
+      props.onLineCommentDelete?.({
+        id: comment.id,
+        file: props.file,
+      })
+    },
+    editSubmitLabel: props.lineCommentActions?.saveLabel,
+    renderCommentActions: props.lineCommentActions
+      ? (comment, controls) => (
+          <ReviewCommentMenuV2 labels={props.lineCommentActions!} onEdit={controls.edit} onDelete={controls.remove} />
+        )
+      : undefined,
+  })
+
+  onCleanup(() => {
+    focusToken++
+  })
+
+  createEffect(() => {
+    const focus = props.focusedComment
+    if (!focus) return
+    if (focus.file !== props.file) {
+      // The focused file has no mounted preview (e.g. not in the current diff
+      // set); clear the focus anyway so it cannot hijack a later diff refresh.
+      // V1 clears unconditionally the same way.
+      untrack(() => {
+        const token = focusToken
+        requestAnimationFrame(() => {
+          if (token !== focusToken) return
+          props.onFocusedCommentChange?.(null)
+        })
+      })
+      return
+    }
+
+    untrack(() => {
+      setStore("opened", focus.id)
+
+      const comment = (props.comments ?? []).find((item) => item.file === focus.file && item.id === focus.id)
+      if (comment) setStore("selection", cloneSelectedLineRange(comment.selection))
+
+      // The diff renders asynchronously, so poll for the comment anchor before
+      // scrolling; clear the focus once handled so revisiting the file does not
+      // re-open a stale comment (mirrors the v1 review behavior).
+      focusToken++
+      const token = focusToken
+      const scrollTo = (attempt: number) => {
+        if (token !== focusToken) return
+        const anchor = scrollRef?.querySelector(`[data-comment-id="${focus.id}"]`)
+        if (anchor instanceof HTMLElement) {
+          anchor.scrollIntoView({ block: "center" })
+          return
+        }
+        if (attempt >= 120) return
+        requestAnimationFrame(() => scrollTo(attempt + 1))
+      }
+      requestAnimationFrame(() => scrollTo(0))
+      requestAnimationFrame(() => {
+        if (token !== focusToken) return
+        props.onFocusedCommentChange?.(null)
+      })
+    })
+  })
+
+  const expandUnchanged = () => props.expandMode === "expand"
+
+  const diffViewer = () => (
+    <Dynamic
+      component={fileComponent}
+      mode="diff"
+      fileDiff={view().fileDiff}
+      preloadedDiff={view().preloaded}
+      diffStyle={props.diffStyle}
+      expandUnchanged={expandUnchanged()}
+      hunkSeparators={view().fileDiff.isPartial ? "simple" : "line-info-basic"}
+      enableLineSelection={lineCommentsEnabled()}
+      enableGutterUtility={lineCommentsEnabled()}
+      onLineSelected={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelected(range)
+      }}
+      onLineSelectionEnd={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelectionEnd(range)
+      }}
+      onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
+      annotations={commentsUi.annotations()}
+      renderAnnotation={commentsUi.renderAnnotation}
+      renderGutterUtility={lineCommentsEnabled() ? commentsUi.renderGutterUtility : undefined}
+      selectedLines={store.selection}
+      commentedLines={commentedLines()}
+      media={{
+        mode: "auto",
+        path: props.file,
+        deleted: view().status === "deleted",
+        readFile: view().status === "deleted" ? undefined : props.readFile,
+      }}
+    />
+  )
+
+  return (
+    <>
+      <div data-slot="session-review-v2-file-header">
+        <div data-slot="session-review-v2-file-title">
+          <div data-slot="session-review-v2-file-status" data-type={statusType(view().status)}>
+            {statusLabel(view().status)}
+          </div>
+          <FileIcon node={{ path: props.file, type: "file" }} />
+          <span data-slot="session-review-v2-file-name">{getFilename(props.file)}</span>
+          <Show when={props.file.includes("/")}>
+            <span data-slot="session-review-v2-file-path">{getDirectory(props.file)}</span>
+          </Show>
+        </div>
+        <DiffChanges changes={view()} />
+      </div>
+      <div
+        ref={(el) => {
+          scrollRef = el
+        }}
+        data-slot="session-review-v2-diff-scroll"
+      >
+        <Show
+          when={diffCanRender() || mediaKind()}
+          fallback={
+            <div data-slot="session-review-v2-empty">
+              <span class="text-12-regular text-text-weak">{i18n.t("ui.fileMedia.binary.title")}</span>
+            </div>
+          }
+        >
+          {diffViewer()}
+        </Show>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,432 @@
+[data-component="session-review-v2"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-body"] {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-component="session-review-v2-sidebar-root"] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+  background: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"][aria-hidden="true"] {
+  border-right-width: 0;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"]:not([data-resizing]) {
+  transition:
+    width 200ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-right-width 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-resize"] {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 20;
+  width: 0;
+  overflow: visible;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-component="resize-handle"]::after {
+  background: var(--v2-border-border-muted, var(--border-weak-base));
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px 8px 8px;
+  flex-shrink: 0;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-title"] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-strong, var(--v2-text-text-base));
+}
+
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-title"]
+  [data-component="select-v2-root"] {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-filter"] {
+  padding: 0 8px 8px;
+  flex-shrink: 0;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-filter"]
+  [data-component="text-input-v2"] {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: 2px;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] {
+  flex: 1;
+  min-height: 0;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] .scroll-view__viewport {
+  padding: 0 8px 12px;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] .scroll-view__thumb {
+  width: 16px;
+}
+
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb::after {
+  width: 6px;
+  background-color: var(--v2-border-border-muted, var(--border-weak-base));
+}
+
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb:hover::after,
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb[data-dragging="true"]::after {
+  background-color: var(--v2-border-border-strong, var(--border-strong-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-preview"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  padding-left: 8px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-group"] {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--start {
+  min-width: 0;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-collapsed-meta"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding-right: 8px;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-title"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-strong, var(--v2-text-text-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-title"] [data-component="select-v2-root"] {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-position"] {
+  flex: none;
+  flex-grow: 0;
+  font-family: var(--v2-font-family-sans);
+  font-style: normal;
+  font-weight: 440;
+  font-size: 11px;
+  line-height: 100%;
+  letter-spacing: 0.05px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-grey-600);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] .session-review-v2-file-nav-button {
+  width: 36px;
+  height: 28px;
+  min-width: 36px;
+  min-height: 28px;
+  padding: 0;
+}
+
+[data-component="session-review-v2"]
+  [data-slot="session-review-v2-toolbar-group"]
+  [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+}
+
+[data-component="session-review-v2"] .session-review-v2-segmented-control [data-component="tooltip-v2-trigger"] {
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+[data-component="session-review-v2"]
+  .session-review-v2-segmented-control
+  [data-component="tooltip-v2-trigger"]
+  [data-slot="segmented-control-v2-item"] {
+  width: 100%;
+}
+
+[data-component="icon-button-v2"].session-review-v2-sidebar-toggle {
+  width: 36px;
+  height: 28px;
+  min-width: 36px;
+  min-height: 28px;
+  border-radius: 6px;
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"].session-review-v2-sidebar-toggle[aria-expanded="true"]:not(
+    :disabled
+  ),
+[data-component="icon-button-v2"][data-variant="ghost"].session-review-v2-sidebar-toggle[aria-expanded="true"]:is(
+    :hover,
+    [data-state="hover"],
+    :active,
+    [data-state="pressed"]
+  ):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-header"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-title"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-header"] [data-component="diff-changes"] {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="added"] {
+  color: var(--icon-diff-add-base, var(--v2-state-fg-success));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="deleted"] {
+  color: var(--icon-diff-delete-base, var(--v2-state-fg-danger));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="modified"] {
+  color: var(--v2-state-fg-info);
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-name"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums lining-nums;
+  color: var(--v2-text-text-base);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-path"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums lining-nums;
+  color: var(--v2-text-text-muted);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-diff-scroll"] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  --line-comment-z: 5;
+  --line-comment-popover-z: 30;
+  --line-comment-open-z: 6;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--segments {
+  gap: 12px;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--segments .session-review-v2-segmented-control {
+  width: auto;
+}
+
+[data-component="session-review-v2"]
+  .session-review-v2-toolbar-group--segments
+  .session-review-v2-segmented-control--icon
+  [data-slot="segmented-control-v2-item"] {
+  flex: 0 0 auto;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-empty"] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-bottom: 160px;
+}
+
+[data-slot="session-review-v2-empty-no-git"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  padding-bottom: 160px;
+  text-align: center;
+}
+
+[data-slot="session-review-v2-empty-no-git"] [data-component="file-icon"] {
+  width: 20px;
+  height: 20px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-slot="session-review-v2-empty-no-git-title"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+}
+
+[data-slot="session-review-v2-empty-no-git-description"] {
+  flex: none;
+  margin: 0 0 4px;
+  max-width: 360px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+}
+
+[data-slot="session-review-v2-empty-changes"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  padding-bottom: 160px;
+  text-align: center;
+}
+
+[data-slot="session-review-v2-empty-changes"] [data-slot="icon-svg"] {
+  flex: none;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-slot="session-review-v2-empty-changes-title"] {
+  flex: none;
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+}
+
+[data-slot="session-review-v2-empty-changes-description"] {
+  flex: none;
+  max-width: 282px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+}

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

@@ -0,0 +1,322 @@
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { SegmentedControlItemV2, SegmentedControlV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import type { SessionReviewDiffStyle } from "../../components/session-review"
+import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { Show, createEffect, createMemo, createSignal, type JSX } from "solid-js"
+import "./session-review-v2.css"
+
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT = 240
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN = 200
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX = 480
+
+export type SessionReviewExpandMode = "expand" | "collapse"
+
+export type SessionReviewV2Props = {
+  title?: JSX.Element
+  stats?: JSX.Element
+  empty?: JSX.Element
+  sidebarOpen?: boolean
+  sidebar?: JSX.Element
+  sidebarToggle?: JSX.Element
+  activeFile?: string
+  files: string[]
+  onSelectFile: (file: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  expandMode: SessionReviewExpandMode
+  onExpandModeChange: (mode: SessionReviewExpandMode) => void
+  preview?: JSX.Element
+  hasDiffs: boolean
+}
+
+export type SessionReviewV2SidebarProps = {
+  open: boolean
+  title?: JSX.Element
+  stats?: JSX.Element
+  filter: string
+  onFilterChange: (value: string) => void
+  onFilterKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>
+  width?: number
+  onWidthChange?: (width: number) => void
+  minWidth?: number
+  maxWidth?: number
+  children?: JSX.Element
+}
+
+export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
+  const i18n = useI18n()
+  const [resizing, setResizing] = createSignal(false)
+  const width = () => props.width ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT
+  const minWidth = () => props.minWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN
+  const maxWidth = () => props.maxWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX
+
+  createEffect(() => {
+    if (!resizing()) return
+    const stop = () => setResizing(false)
+    makeEventListener(document, "pointerup", stop)
+    makeEventListener(document, "pointercancel", stop)
+  })
+
+  return (
+    <div data-component="session-review-v2-sidebar-root">
+      <aside
+        data-slot="session-review-v2-sidebar"
+        data-resizing={resizing() ? "" : undefined}
+        aria-hidden={!props.open}
+        inert={!props.open}
+        style={{ width: props.open ? `${width()}px` : "0px" }}
+      >
+        <Show when={props.open}>
+          <div data-slot="session-review-v2-sidebar-header">
+            <div data-slot="session-review-v2-sidebar-title">{props.title}</div>
+            {props.stats}
+          </div>
+          <div data-slot="session-review-v2-sidebar-filter">
+            <TextInputV2
+              type="search"
+              value={props.filter}
+              onInput={(event) => props.onFilterChange(event.currentTarget.value)}
+              onKeyDown={props.onFilterKeyDown}
+              showClearButton={props.filter.length > 0}
+              clearLabel={i18n.t("ui.list.clearFilter")}
+              onClearClick={() => props.onFilterChange("")}
+              placeholder={i18n.t("ui.sessionReviewV2.filterFiles")}
+              aria-label={i18n.t("ui.sessionReviewV2.filterFiles")}
+              leadingIcon={
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M12.25 12.25L10.0625 10.0625M11.0833 6.41667C11.0833 8.994 8.994 11.0833 6.41667 11.0833C3.83934 11.0833 1.75 8.994 1.75 6.41667C1.75 3.83934 3.83934 1.75 6.41667 1.75C8.994 1.75 11.0833 3.83934 11.0833 6.41667Z"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              }
+            />
+          </div>
+          <ScrollView data-slot="session-review-v2-sidebar-tree" class="group/file-tree-v2" thumbVisibility="scroll">
+            {props.children}
+          </ScrollView>
+        </Show>
+      </aside>
+      <Show when={props.open && props.onWidthChange}>
+        <div data-slot="session-review-v2-sidebar-resize" onPointerDown={() => setResizing(true)}>
+          <ResizeHandle
+            direction="horizontal"
+            size={width()}
+            min={minWidth()}
+            max={maxWidth()}
+            onResize={(next) => props.onWidthChange?.(next)}
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export function SessionReviewV2(props: SessionReviewV2Props) {
+  const i18n = useI18n()
+
+  const fileIndex = () => {
+    const files = props.files
+    if (files.length === 0) return -1
+
+    const active = props.activeFile
+    const i = active ? files.indexOf(active) : -1
+    if (i >= 0) return i
+    return 0
+  }
+
+  const prev = () => {
+    const files = props.files
+    if (files.length === 0) return
+    return files[(fileIndex() - 1 + files.length) % files.length]
+  }
+
+  const next = () => {
+    const files = props.files
+    if (files.length === 0) return
+    return files[(fileIndex() + 1) % files.length]
+  }
+
+  const canCycle = () => props.files.length > 0
+  const showCollapsedMeta = () => props.sidebarOpen === false
+  // Memoize slot getters so Show conditions do not instantiate throwaway elements.
+  const title = createMemo(() => props.title)
+  const stats = createMemo(() => props.stats)
+
+  const cycle = (file: string | undefined) => {
+    if (!file) return
+    props.onSelectFile(file)
+  }
+
+  // The prev/next tooltips advertise < and >; keep the keys working while the
+  // pane is mounted, but never while typing in an input or comment editor.
+  makeEventListener(document, "keydown", (event) => {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return
+    if (event.key !== "<" && event.key !== ">") return
+    const target = event.target
+    if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select"))) return
+    if (!props.hasDiffs || !canCycle()) return
+    event.preventDefault()
+    cycle(event.key === "<" ? prev() : next())
+  })
+
+  return (
+    <div data-component="session-review-v2">
+      <div data-slot="session-review-v2-body">
+        {props.sidebar}
+
+        <div data-slot="session-review-v2-preview">
+          <Show when={props.hasDiffs} fallback={props.empty}>
+            <div data-slot="session-review-v2-toolbar">
+              <div data-slot="session-review-v2-toolbar-group" class="session-review-v2-toolbar-group--start">
+                {props.sidebarToggle}
+                <Show when={showCollapsedMeta()}>
+                  <div data-slot="session-review-v2-toolbar-collapsed-meta">
+                    <Show when={title()}>
+                      <div data-slot="session-review-v2-toolbar-title">{title()}</div>
+                    </Show>
+                    {stats()}
+                    <Show when={canCycle()}>
+                      <span data-slot="session-review-v2-file-position">
+                        {fileIndex() + 1}/{props.files.length}
+                      </span>
+                    </Show>
+                  </div>
+                </Show>
+                <div data-slot="session-review-v2-toolbar-group">
+                  <TooltipV2
+                    openDelay={2000}
+                    value={
+                      <>
+                        {i18n.t("ui.sessionReviewV2.previousFile")}
+                        <KeybindV2 keys={["<"]} variant="neutral" />
+                      </>
+                    }
+                  >
+                    <IconButton
+                      icon="arrow-left"
+                      variant="ghost"
+                      size="small"
+                      class="session-review-v2-file-nav-button"
+                      disabled={!canCycle()}
+                      onClick={() => {
+                        const file = prev()
+                        if (!file) return
+                        props.onSelectFile(file)
+                      }}
+                      aria-label={i18n.t("ui.sessionReviewV2.previousFile")}
+                    />
+                  </TooltipV2>
+                  <TooltipV2
+                    openDelay={2000}
+                    value={
+                      <>
+                        {i18n.t("ui.sessionReviewV2.nextFile")}
+                        <KeybindV2 keys={[">"]} variant="neutral" />
+                      </>
+                    }
+                  >
+                    <IconButton
+                      icon="arrow-right"
+                      variant="ghost"
+                      size="small"
+                      class="session-review-v2-file-nav-button"
+                      disabled={!canCycle()}
+                      onClick={() => {
+                        const file = next()
+                        if (!file) return
+                        props.onSelectFile(file)
+                      }}
+                      aria-label={i18n.t("ui.sessionReviewV2.nextFile")}
+                    />
+                  </TooltipV2>
+                </div>
+              </div>
+              <div data-slot="session-review-v2-toolbar-group" class="session-review-v2-toolbar-group--segments">
+                <SegmentedControlV2
+                  value={props.expandMode}
+                  onChange={(value) => {
+                    if (value !== "expand" && value !== "collapse") return
+                    props.onExpandModeChange(value)
+                  }}
+                  class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+                  aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
+                >
+                  <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+                    <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
+                      <Icon name="expand" />
+                    </SegmentedControlItemV2>
+                  </TooltipV2>
+                  <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+                    <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+                      <Icon name="collapse" />
+                    </SegmentedControlItemV2>
+                  </TooltipV2>
+                </SegmentedControlV2>
+                <Show when={props.onDiffStyleChange}>
+                  <SegmentedControlV2
+                    value={props.diffStyle}
+                    onChange={(value) => {
+                      if (value !== "unified" && value !== "split") return
+                      props.onDiffStyleChange?.(value)
+                    }}
+                    class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+                    aria-label={i18n.t("ui.sessionReviewV2.diffView")}
+                  >
+                    <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+                      <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+                        <Icon name="unified" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                    <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+                      <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
+                        <Icon name="split" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                  </SegmentedControlV2>
+                </Show>
+              </div>
+            </div>
+            <Show when={props.activeFile} fallback={<div data-slot="session-review-v2-empty">{props.empty}</div>}>
+              {props.preview}
+            </Show>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function SessionReviewV2SidebarToggle(props: { opened: boolean; onToggle: () => void }) {
+  const i18n = useI18n()
+
+  return (
+    <TooltipV2 value={i18n.t("ui.sessionReviewV2.toggleSidebar")}>
+      <IconButtonV2
+        variant="ghost"
+        size="small"
+        class="session-review-v2-sidebar-toggle"
+        aria-label={i18n.t("ui.sessionReviewV2.toggleSidebar")}
+        aria-expanded={props.opened}
+        onClick={props.onToggle}
+        icon={<Icon name="filetree" />}
+      />
+    </TooltipV2>
+  )
+}

packages/stats/app/src/routes/[lab]/[model].tsx

@@ -27,6 +27,7 @@ import {
   findModelCatalogEntry,
   formatCatalogLabName,
   getModelCatalog,
+  type ModelCatalog,
   type ModelCatalogCost,
   type ModelCatalogEntry,
 } from "../model-catalog"
@@ -174,7 +175,12 @@ export default function StatsModel() {
           <Show when={catalogEntry() || stats() !== undefined} fallback={<ModelLoading />}>
             <Show when={catalogEntry() || stats()} fallback={<ModelNotFound lab={labParam()} model={modelParam()} />}>
               <>
-                <ModelHero data={stats() ?? null} catalog={catalogEntry() ?? null} labName={labName()} />
+                <ModelHero
+                  data={stats() ?? null}
+                  catalog={catalogEntry() ?? null}
+                  catalogData={catalog() ?? null}
+                  labName={labName()}
+                />
                 <ModelOverview data={stats() ?? null} />
                 <ModelUsageSection data={stats()?.usage ?? []} />
                 <ModelUsersSection data={stats()?.usage ?? []} />
@@ -249,116 +255,171 @@ function ModelNotFound(props: { lab: string; model: string }) {
   )
 }
 
-function ModelHero(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null; labName: string }) {
+function ModelHero(props: {
+  data: StatsModelData | null
+  catalog: ModelCatalogEntry | null
+  catalogData: ModelCatalog | null
+  labName: string
+}) {
   const i18n = useI18n()
   const language = useLanguage()
   const labId = () => props.catalog?.lab ?? props.data?.provider ?? props.labName
-  const modelId = () => props.catalog?.id ?? props.data?.model ?? i18n.t("model.fallback")
+  const modelName = () => props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback")
   const weights = () => props.catalog?.weights[0]
+  const labs = () => props.catalogData?.labs ?? []
+  const labModels = () =>
+    props.catalogData?.labs.find((lab) => lab.id === providerSlug(labId()))?.models ??
+    (props.catalog ? [props.catalog] : [])
   return (
     <section id="overview" data-section="model-hero">
-      <a data-slot="model-back-link" href={language.route(import.meta.env.BASE_URL)}>
-        {i18n.t("footer.modelData")}
-      </a>
-      <div data-slot="model-hero-grid">
-        <div data-slot="model-hero-copy">
-          <div data-slot="model-hero-tags">
-            <a data-slot="hero-meta" href={language.route(`${import.meta.env.BASE_URL}${providerSlug(labId())}`)}>
-              <ProviderIcon aria-hidden="true" id={getProviderIconId(labId())} />
+      <nav data-component="model-hero-breadcrumb" aria-label="Data breadcrumb">
+        <a data-slot="model-hero-crumb" href={language.route(import.meta.env.BASE_URL)}>
+          Data
+        </a>
+        <span data-slot="model-hero-separator">/</span>
+        <Show
+          when={labs().length > 0}
+          fallback={
+            <span data-slot="model-hero-crumb" data-current="true">
               <span>{props.labName}</span>
-            </a>
-            <span data-slot="model-id-tag">{modelId()}</span>
-          </div>
-          <h1>
-            <a data-slot="heading-link" href="#overview">
-              {props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback")}
-            </a>
-          </h1>
-          <Show when={props.data} fallback={<p>{i18n.t("model.catalogFallback")}</p>}>
-            {(data) => (
-              <p>
-                {data().rank === null ? i18n.t("model.unranked") : i18n.t("model.ranked", { rank: data().rank ?? "" })}{" "}
-                {i18n.t("model.observedVolume", { share: formatPercent(data().tokenShare) })}
-              </p>
-            )}
-          </Show>
+              <ChevronDownIcon />
+            </span>
+          }
+        >
+          <details data-component="model-hero-menu">
+            <summary data-slot="model-hero-crumb" data-current="true">
+              <span>{props.labName}</span>
+              <ChevronDownIcon />
+            </summary>
+            <div data-slot="model-hero-options">
+              <For each={labs()}>
+                {(lab) => (
+                  <a
+                    data-slot="model-hero-option"
+                    data-current={lab.id === providerSlug(labId()) ? "true" : undefined}
+                    href={language.route(`${import.meta.env.BASE_URL}${lab.id}`)}
+                  >
+                    {lab.name}
+                  </a>
+                )}
+              </For>
+            </div>
+          </details>
+        </Show>
+        <span data-slot="model-hero-separator">/</span>
+        <Show
+          when={labModels().length > 0}
+          fallback={
+            <span data-slot="model-hero-crumb" data-current="true" aria-current="page">
+              <span>{modelName()}</span>
+              <ChevronDownIcon />
+            </span>
+          }
+        >
+          <details data-component="model-hero-menu">
+            <summary data-slot="model-hero-crumb" data-current="true" aria-current="page">
+              <span>{modelName()}</span>
+              <ChevronDownIcon />
+            </summary>
+            <div data-slot="model-hero-options">
+              <For each={labModels()}>
+                {(model) => (
+                  <a
+                    data-slot="model-hero-option"
+                    data-current={model.id === props.catalog?.id ? "true" : undefined}
+                    href={language.route(`${import.meta.env.BASE_URL}${model.id}`)}
+                  >
+                    {model.name}
+                  </a>
+                )}
+              </For>
+            </div>
+          </details>
+        </Show>
+      </nav>
+      <div data-slot="model-hero-title-row">
+        <span data-slot="model-hero-avatar">
+          <ProviderIcon aria-hidden="true" id={getProviderIconId(labId())} />
+        </span>
+        <h1>{modelName()}</h1>
+        <div data-slot="model-hero-actions">
           <Show when={props.catalog?.openWeights && weights()}>
             {(weight) => (
-              <a data-slot="model-weight-link" href={weight().url} target="_blank" rel="noopener noreferrer">
-                {i18n.t("model.weights", { label: weight().label })}
+              <a data-slot="model-hero-action" href={weight().url} target="_blank" rel="noopener noreferrer">
+                <ModelHeroActionIcon kind="weights" />
+                <span>Model weights</span>
               </a>
             )}
           </Show>
         </div>
-        <Show when={props.data} fallback={<ModelCatalogCallout catalog={props.catalog} />}>
-          {(data) => (
-            <div data-component="model-rank-panel">
-              <span>{i18n.t("model.rank")}</span>
-              <strong>{data().rank === null ? "—" : `#${data().rank}`}</strong>
-              <p>{formatModelRankMoveLabel(data(), i18n)}</p>
-            </div>
-          )}
-        </Show>
       </div>
       <div data-slot="model-hero-pattern" aria-hidden="true" />
-      <Show when={props.catalog}>{(catalog) => <ModelCatalogPanel data={catalog()} />}</Show>
+      <Show
+        when={props.data}
+        fallback={
+          <p data-slot="model-hero-state">
+            <span>Listed</span>
+            <span>across the shared model catalog.</span>
+          </p>
+        }
+      >
+        {(data) => (
+          <p data-slot="model-hero-rankline">
+            <span>Ranked</span>
+            <span data-slot="model-hero-rank-group">
+              <span data-slot="model-hero-pill">{formatHeroRank(data().rank)}</span>
+              <ModelHeroSparkline data={data()} />
+            </span>
+            <span>across last week's</span>
+            <span data-slot="model-hero-pill">OpenCode Go</span>
+            <span>usage with</span>
+            <span data-slot="model-hero-pill">{formatPercent(data().tokenShare)}</span>
+            <span>of observed</span>
+            <span data-slot="model-hero-pill">2M</span>
+            <span>volume.</span>
+          </p>
+        )}
+      </Show>
     </section>
   )
 }
 
-function ModelCatalogCallout(props: { catalog: ModelCatalogEntry | null }) {
-  const i18n = useI18n()
-  const language = useLanguage()
+function ModelHeroActionIcon(props: { kind: "weights" | "compare" }) {
+  if (props.kind === "weights")
+    return (
+      <svg data-slot="model-hero-action-icon" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+        <path d="M5.5 4.5H4.5V11.5H11.5V10.5" stroke="currentColor" stroke-linecap="square" />
+        <path d="M8.5 4.5H11.5V7.5" stroke="currentColor" stroke-linecap="square" />
+        <path d="M11.25 4.75L7.25 8.75" stroke="currentColor" stroke-linecap="square" />
+      </svg>
+    )
   return (
-    <div data-component="model-rank-panel">
-      <span>{i18n.t("model.profile")}</span>
-      <strong>
-        {props.catalog?.releaseDate
-          ? formatCatalogDate(props.catalog.releaseDate, language.tag(language.locale()), i18n.t("home.unknown"))
-          : i18n.t("model.listed")}
-      </strong>
-      <p>{i18n.t("model.noCurrentUsage")}</p>
-    </div>
+    <svg data-slot="model-hero-action-icon" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+      <rect x="3.5" y="3.5" width="3" height="3" stroke="currentColor" />
+      <rect x="9.5" y="3.5" width="3" height="3" stroke="currentColor" />
+      <rect x="3.5" y="9.5" width="3" height="3" stroke="currentColor" />
+      <rect x="9.5" y="9.5" width="3" height="3" stroke="currentColor" />
+    </svg>
   )
 }
 
-function ModelCatalogPanel(props: { data: ModelCatalogEntry }) {
-  const i18n = useI18n()
-  const language = useLanguage()
+function ModelHeroSparkline(props: { data: StatsModelData }) {
+  const values = () => props.data.usage.slice(-14).map((point) => point.tokens)
   return (
-    <aside data-component="model-catalog" aria-label={i18n.t("model.facts")}>
-      <div data-slot="model-catalog-grid">
-        <CatalogDatum
-          label={i18n.t("model.context")}
-          value={formatCatalogLimit(props.data.limit?.context, i18n.t("home.unknown"))}
-        />
-        <CatalogDatum
-          label={i18n.t("model.output")}
-          value={formatCatalogLimit(props.data.limit?.output, i18n.t("home.unknown"))}
-        />
-        <CatalogDatum
-          label={i18n.t("model.knowledge")}
-          value={formatCatalogDate(props.data.knowledge, language.tag(language.locale()), i18n.t("home.unknown"))}
-        />
-        <CatalogDatum
-          label={i18n.t("model.release")}
-          value={formatCatalogDate(props.data.releaseDate, language.tag(language.locale()), i18n.t("home.unknown"))}
-        />
-        <CatalogDatum
-          label={i18n.t("model.inputs")}
-          value={formatCatalogModalities(props.data.modalities.input, i18n)}
-        />
-      </div>
-    </aside>
+    <span data-slot="model-hero-sparkline" aria-hidden="true">
+      <svg viewBox="0 0 36 24" fill="none">
+        <path d={sparklineAreaPath(values())} fill="currentColor" opacity="0.14" />
+        <path d={sparklineLinePath(values())} stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+      </svg>
+    </span>
   )
 }
 
-function CatalogDatum(props: { label: string; value: string }) {
+function ChevronDownIcon() {
   return (
-    <article data-component="model-catalog-datum">
-      <span>{props.label}</span>
-      <strong>{props.value}</strong>
-    </article>
+    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+      <path d="M4.75 6.25L8 9.5L11.25 6.25" stroke="currentColor" stroke-width="1.5" />
+    </svg>
   )
 }
 
@@ -938,6 +999,40 @@ function formatRankMove(change: number) {
   return `${change}`
 }
 
+function formatHeroRank(rank: number | null) {
+  if (rank === null) return "--"
+  return String(rank).padStart(2, "0")
+}
+
+function sparklineLinePath(values: number[]) {
+  return sparklinePoints(values)
+    .map(
+      (point, index) => `${index === 0 ? "M" : "L"}${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`,
+    )
+    .join(" ")
+}
+
+function sparklineAreaPath(values: number[]) {
+  const points = sparklinePoints(values)
+  return `M${formatSparklinePoint(points[0].x)} 18 ${points
+    .map((point) => `L${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`)
+    .join(" ")} L${formatSparklinePoint(points[points.length - 1].x)} 18 Z`
+}
+
+function sparklinePoints(values: number[]) {
+  const normalized = values.length > 1 ? values : [values[0] ?? 0, values[0] ?? 0]
+  const min = Math.min(...normalized)
+  const max = Math.max(...normalized)
+  return normalized.map((value, index) => ({
+    x: 8 + (index / Math.max(1, normalized.length - 1)) * 20,
+    y: min === max ? 12 : 18 - ((value - min) / (max - min)) * 12,
+  }))
+}
+
+function formatSparklinePoint(value: number) {
+  return Number(value.toFixed(2)).toString()
+}
+
 function formatModelRankMoveLabel(data: StatsModelData, i18n: ReturnType<typeof useI18n>) {
   if (data.rank === null) return i18n.t("model.noUsageLastWeek")
   if (data.previousRank === null) return i18n.t("model.newThisWeek")
@@ -993,35 +1088,6 @@ function formatChange(value: number) {
   return `${value}%`
 }
 
-function formatCatalogLimit(value: number | undefined, unknown: string) {
-  return value === undefined ? unknown : formatTokens(value)
-}
-
-function formatCatalogModalities(value: string[], i18n: ReturnType<typeof useI18n>) {
-  if (value.length === 0) return i18n.t("home.unknown")
-  return value.map((item) => formatCatalogModality(item, i18n)).join(", ")
-}
-
-function formatCatalogModality(value: string, i18n: ReturnType<typeof useI18n>) {
-  if (value === "pdf") return i18n.t("model.pdf")
-  return value.charAt(0).toUpperCase() + value.slice(1)
-}
-
-function formatCatalogDate(value: string | undefined, locale: string, unknown: string) {
-  if (!value) return unknown
-  const match = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(value)
-  if (!match) return value
-  const year = Number(match[1])
-  const month = match[2] ? Number(match[2]) - 1 : 0
-  const day = match[3] ? Number(match[3]) : 1
-  return new Intl.DateTimeFormat(locale, {
-    month: match[2] ? "short" : undefined,
-    day: match[3] ? "numeric" : undefined,
-    year: "numeric",
-    timeZone: "UTC",
-  }).format(new Date(Date.UTC(year, month, day)))
-}
-
 function trimNumber(value: number, digits: number) {
   return Number(value.toFixed(digits)).toLocaleString("en")
 }

packages/stats/app/src/routes/[lab]/index.tsx

@@ -559,24 +559,28 @@ function LabModelRow(props: {
 }) {
   const i18n = useI18n()
   const language = useLanguage()
-  const showTooltip = (x: number, y: number) => {
+  const showTooltip = (target: HTMLAnchorElement) => {
+    const rect = target.getBoundingClientRect()
     const viewportWidth = typeof window === "undefined" ? 0 : window.innerWidth
     const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight
+    const anchorX = viewportWidth > 0 ? Math.min(Math.max(rect.left + 320, 24), viewportWidth - 24) : rect.left + 320
     props.onTooltipChange({
       model: props.model,
-      placement: viewportWidth > 0 && x > viewportWidth - 280 ? "left" : "right",
+      placement: viewportWidth > 0 && anchorX > viewportWidth - 280 ? "left" : "right",
       usage: props.usage,
-      x,
-      y: viewportHeight > 0 ? Math.min(Math.max(y, 96), viewportHeight - 128) : y,
+      x: anchorX,
+      y:
+        viewportHeight > 0
+          ? Math.min(Math.max(rect.top + rect.height / 2, 96), viewportHeight - 128)
+          : rect.top + rect.height / 2,
     })
   }
   const showPointerTooltip: JSX.EventHandler<HTMLAnchorElement, PointerEvent> = (event) => {
     if (event.pointerType === "touch") return
-    showTooltip(event.clientX, event.clientY)
+    showTooltip(event.currentTarget)
   }
   const showFocusTooltip: JSX.EventHandler<HTMLAnchorElement, FocusEvent> = (event) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    showTooltip(rect.left + rect.width * 0.58, rect.top + rect.height / 2)
+    showTooltip(event.currentTarget)
   }
   return (
     <a
@@ -587,11 +591,12 @@ function LabModelRow(props: {
       onBlur={() => props.onTooltipChange(undefined)}
       onFocus={showFocusTooltip}
       onPointerEnter={showPointerTooltip}
+      onPointerDown={() => props.onTooltipChange(undefined)}
       onPointerLeave={(event) => {
         if (event.pointerType === "touch") return
         props.onTooltipChange(undefined)
       }}
-      onPointerMove={showPointerTooltip}
+      onClick={() => props.onTooltipChange(undefined)}
     >
       <span data-slot="lab-model-cell" data-column="model" role="cell">
         <span data-slot="lab-model-avatar" aria-hidden="true">
@@ -851,7 +856,7 @@ function trimNumber(value: number, digits: number) {
 
 function usageStripHeight(value: number, max: number) {
   if (value <= 0 || max <= 0) return 0
-  return Math.max(1, (value / max) * 40)
+  return Math.max(2, (value / max) * 76)
 }
 
 function usageLineY(value: number, max: number) {

packages/stats/app/src/routes/index.css

@@ -2870,7 +2870,7 @@
   padding: 0 8px;
   overflow: hidden;
   background: var(--stats-layer-2);
-  color: var(--stats-hero-muted);
+  color: var(--stats-faint);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.1;
@@ -2878,6 +2878,10 @@
   white-space: nowrap;
 }
 
+[data-page="stats"] a[data-slot="lab-hero-crumb"] {
+  color: var(--stats-faint);
+}
+
 [data-page="stats"] [data-component="lab-hero-menu"] {
   position: relative;
   display: inline-block;
@@ -2894,6 +2898,7 @@
 
 [data-page="stats"] [data-slot="lab-hero-crumb"][data-current="true"] {
   padding-right: 4px;
+  color: var(--stats-text);
 }
 
 [data-page="stats"] a[data-slot="lab-hero-crumb"]:hover,
@@ -2915,7 +2920,7 @@
   flex: 0 0 auto;
   width: 16px;
   height: 16px;
-  color: var(--stats-faint);
+  color: currentColor;
 }
 
 [data-page="stats"] [data-component="lab-hero-menu"][open] [data-slot="lab-hero-crumb"] svg {
@@ -3048,6 +3053,288 @@
   line-height: 1.5;
 }
 
+[data-page="stats"] [data-section="model-hero"] {
+  align-content: start;
+  gap: 24px;
+  min-height: 372px;
+  padding: 128px 0 40px;
+  overflow: visible;
+  box-shadow: none;
+}
+
+@media (max-width: 80rem) and (min-width: 74.001rem) {
+  [data-page="stats"] [data-section="model-hero"] {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+
+[data-page="stats"] [data-component="model-hero-breadcrumb"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-hero-crumb"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: min(100%, 280px);
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  overflow: hidden;
+  background: var(--stats-layer-2);
+  color: var(--stats-hero-muted);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.1;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-slot="model-hero-crumb"][data-current="true"] {
+  padding-right: 4px;
+}
+
+[data-page="stats"] [data-component="model-hero-menu"] {
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-component="model-hero-menu"] summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+[data-page="stats"] [data-component="model-hero-menu"] summary::-webkit-details-marker {
+  display: none;
+}
+
+[data-page="stats"] a[data-slot="model-hero-crumb"]:hover,
+[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible,
+[data-page="stats"] summary[data-slot="model-hero-crumb"]:hover,
+[data-page="stats"] summary[data-slot="model-hero-crumb"]:focus-visible {
+  color: var(--stats-text);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="model-hero-crumb"] span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-page="stats"] [data-slot="model-hero-crumb"] svg {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: var(--stats-faint);
+}
+
+[data-page="stats"] [data-component="model-hero-menu"][open] [data-slot="model-hero-crumb"] svg {
+  transform: rotate(180deg);
+}
+
+[data-page="stats"] [data-slot="model-hero-options"] {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  z-index: 5;
+  display: grid;
+  width: max-content;
+  min-width: 180px;
+  max-width: min(360px, calc(100vw - 48px));
+  max-height: min(360px, calc(100vh - 160px));
+  padding: 6px;
+  overflow: auto;
+  border: 1px solid var(--stats-line);
+  background: var(--stats-bg);
+  box-shadow: 0 12px 32px #0000001a;
+  transform: translateX(-50%);
+}
+
+[data-page="stats"] [data-slot="model-hero-option"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 30px;
+  padding: 0 8px;
+  overflow: hidden;
+  color: var(--stats-muted);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-slot="model-hero-option"]:hover,
+[data-page="stats"] [data-slot="model-hero-option"]:focus-visible {
+  background: var(--stats-layer-2);
+  color: var(--stats-text);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="model-hero-option"][data-current="true"] {
+  background: var(--stats-layer-2);
+  color: var(--stats-text);
+}
+
+[data-page="stats"] [data-slot="model-hero-separator"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8px;
+  height: 24px;
+  color: var(--stats-faint);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+[data-page="stats"] [data-slot="model-hero-title-row"] {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  min-width: 0;
+  min-height: 60px;
+}
+
+[data-page="stats"] [data-slot="model-hero-avatar"] {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  background: var(--stats-accent-text);
+  box-shadow: inset 0 0 0 1px #0000001a;
+  color: #ffffff;
+}
+
+[data-page="stats"] [data-slot="model-hero-avatar"] svg {
+  width: 28px;
+  height: 28px;
+}
+
+[data-page="stats"] [data-section="model-hero"] h1 {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: none;
+  overflow: hidden;
+  color: var(--stats-text);
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 60px;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-slot="model-hero-actions"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+[data-page="stats"] [data-slot="model-hero-action"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  background: var(--stats-bg);
+  color: var(--stats-text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  box-shadow:
+    0 0 0 0 #00000024,
+    0 0 0 0.5px #00000024,
+    0 1px 1.5px 0 #0000001a;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-slot="model-hero-action"]:hover,
+[data-page="stats"] [data-slot="model-hero-action"]:focus-visible {
+  background: var(--stats-layer-2);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="model-hero-action-icon"] {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+[data-page="stats"] [data-section="model-hero"] [data-slot="model-hero-pattern"] {
+  width: 100%;
+  height: 16px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--stats-text) 10%, transparent);
+  mask-position: center top;
+  -webkit-mask-position: center top;
+}
+
+[data-page="stats"] [data-slot="model-hero-rankline"],
+[data-page="stats"] [data-slot="model-hero-state"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+  margin: 0;
+  color: var(--stats-muted);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+[data-page="stats"] [data-slot="model-hero-pill"],
+[data-page="stats"] [data-slot="model-hero-sparkline"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  background: var(--stats-layer-2);
+  color: var(--stats-hero-muted);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+[data-page="stats"] [data-slot="model-hero-rank-group"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+[data-page="stats"] [data-slot="model-hero-sparkline"] {
+  width: 36px;
+  padding: 0;
+  color: #198b43;
+}
+
+[data-page="stats"] [data-slot="model-hero-sparkline"] svg {
+  width: 36px;
+  height: 24px;
+}
+
 [data-page="stats"] [data-section="lab-overview"] {
   position: relative;
   box-sizing: border-box;
@@ -3117,7 +3404,7 @@
   box-sizing: border-box;
   min-width: 0;
   min-height: 192px;
-  padding: 40px 60px;
+  padding: 40px;
   position: relative;
 }
 
@@ -3147,9 +3434,9 @@
   min-width: 0;
   overflow: hidden;
   color: var(--stats-text);
-  font-size: 76px;
+  font-size: clamp(36px, 5.4vw, 76px);
   font-weight: 500;
-  line-height: 88px;
+  line-height: 1.15;
   letter-spacing: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4070,8 +4357,8 @@
 [data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] {
   --lab-usage-gap: 4px;
   --lab-usage-column-gutter: calc(var(--lab-usage-gap) / 2);
-  --lab-usage-bar-height: 40px;
-  --lab-usage-line-bottom: 80px;
+  --lab-usage-bar-height: 76px;
+  --lab-usage-line-bottom: 124px;
   --lab-usage-bar: #dbdbdb;
   --lab-usage-line: #808080;
   --lab-usage-active: #3b5cf6;
@@ -4688,6 +4975,11 @@
     padding: 104px 32px 40px;
   }
 
+  [data-page="stats"] [data-section="model-hero"] {
+    min-height: 340px;
+    padding: 104px 32px 40px;
+  }
+
   [data-page="stats"] [data-slot="lab-overview-copy"] {
     padding-right: 32px;
     padding-left: 32px;
@@ -4748,8 +5040,7 @@
 
   [data-page="stats"] [data-component="lab-overview-metric"] {
     min-height: 144px;
-    padding-top: 28px;
-    padding-bottom: 28px;
+    padding: 28px 40px;
     border-top: 1px solid var(--stats-line);
   }
 
@@ -4917,10 +5208,36 @@
 
   [data-page="stats"] [data-section="model-hero"] {
     gap: 20px;
+    min-height: 316px;
+    padding: 72px 24px 40px;
   }
 
-  [data-page="stats"] [data-slot="model-hero-grid"] {
-    gap: 24px;
+  [data-page="stats"] [data-component="model-hero-breadcrumb"] {
+    flex-wrap: wrap;
+    height: auto;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-crumb"] {
+    max-width: min(100%, 240px);
+  }
+
+  [data-page="stats"] [data-slot="model-hero-title-row"] {
+    flex-wrap: wrap;
+    gap: 16px;
+    min-height: 0;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-avatar"] {
+    display: none;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-actions"] {
+    flex: 1 1 100%;
+    margin-left: 0;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-action"] {
+    flex: 0 0 auto;
   }
 
   [data-page="stats"] [data-section="lab-hero"] {
@@ -4930,7 +5247,7 @@
   }
 
   [data-page="stats"] [data-section="lab-overview"] {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   [data-page="stats"] [data-slot="lab-overview-copy"] {
@@ -4958,12 +5275,16 @@
   }
 
   [data-page="stats"] [data-component="lab-overview-metric"]::before {
+    display: block;
+  }
+
+  [data-page="stats"] [data-component="lab-overview-metric"]:nth-of-type(1)::before {
     display: none;
   }
 
   [data-page="stats"] [data-component="lab-overview-metric"] strong {
-    font-size: 56px;
-    line-height: 64px;
+    font-size: clamp(36px, 10vw, 52px);
+    line-height: 1.08;
   }
 
   [data-page="stats"] [data-slot="lab-hero-title-row"] {
@@ -5012,12 +5333,22 @@
   }
 
   [data-page="stats"] [data-section="model-hero"] h1 {
+    flex-basis: 100%;
     font-size: 38px;
-    line-height: 1;
+    line-height: 44px;
+    overflow-wrap: anywhere;
+    white-space: normal;
   }
 
   [data-page="stats"] [data-slot="model-hero-pattern"] {
-    height: 14px;
+    height: 16px;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-rankline"],
+  [data-page="stats"] [data-slot="model-hero-state"] {
+    gap: 6px;
+    font-size: 14px;
+    line-height: 22px;
   }
 
   [data-page="stats"] [data-slot="model-catalog-grid"] {
@@ -5125,7 +5456,8 @@
     --model-usage-mobile-track-width: calc(
       var(--model-usage-count) * var(--model-usage-mobile-bar-width) + var(--model-usage-mobile-edge-space)
     );
-    --lab-usage-line-bottom: 64px;
+    --lab-usage-bar-height: 64px;
+    --lab-usage-line-bottom: 104px;
     grid-template-rows: minmax(0, 360px) 14px;
     gap: 24px;
     height: 398px;