release: v0.15.30

sync
fix: bash permission case
2025-10-31 06:12:16 +00:00 · 2025-10-31 02:00:11 -04:00 · 2025-10-31 00:52:46 -05:00 · 2025-10-30 23:57:58 -05:00 · 2025-10-30 23:35:26 -05:00 · 2025-10-30 20:24:29 -04:00
141 changed files with 4370 additions and 1817 deletions
@@ -5,6 +5,7 @@ on:
    branches:
      - dev
      - opentui
+      - v0

 concurrency: ${{ github.workflow }}-${{ github.ref }}

@@ -123,3 +123,5 @@
 | 2025-10-27 | 589,999 (+5,590)  | 526,001 (+4,822)  | 1,116,000 (+10,412) |
 | 2025-10-28 | 595,776 (+5,777)  | 532,438 (+6,437)  | 1,128,214 (+12,214) |
 | 2025-10-29 | 606,259 (+10,483) | 542,064 (+9,626)  | 1,148,323 (+20,109) |
+| 2025-10-30 | 613,746 (+7,487)  | 542,064 (+0)      | 1,155,810 (+7,487)  |
+| 2025-10-30 | 617,846 (+4,100)  | 555,026 (+12,962) | 1,172,872 (+17,062) |
@@ -37,7 +37,7 @@
    },
    "packages/console/core": {
      "name": "@opencode-ai/console-core",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@aws-sdk/client-sts": "3.782.0",
        "@jsx-email/render": "1.1.1",
@@ -64,7 +64,7 @@
    },
    "packages/console/function": {
      "name": "@opencode-ai/console-function",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@ai-sdk/anthropic": "2.0.0",
        "@ai-sdk/openai": "2.0.2",
@@ -88,7 +88,7 @@
    },
    "packages/console/mail": {
      "name": "@opencode-ai/console-mail",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@jsx-email/all": "2.2.3",
        "@jsx-email/cli": "1.4.3",
@@ -109,12 +109,11 @@
    },
    "packages/desktop": {
      "name": "@opencode-ai/desktop",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@opencode-ai/sdk": "workspace:*",
        "@opencode-ai/ui": "workspace:*",
-        "@pierre/precision-diffs": "catalog:",
        "@shikijs/transformers": "3.9.2",
        "@solid-primitives/active-element": "2.1.3",
        "@solid-primitives/event-bus": "1.1.2",
@@ -141,7 +140,6 @@
        "@types/luxon": "3.7.1",
        "@types/node": "catalog:",
        "@typescript/native-preview": "catalog:",
-        "opencode": "workspace:*",
        "typescript": "catalog:",
        "vite": "catalog:",
        "vite-plugin-icons-spritesheet": "3.0.1",
@@ -150,7 +148,7 @@
    },
    "packages/function": {
      "name": "@opencode-ai/function",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@octokit/auth-app": "8.0.1",
        "@octokit/rest": "22.0.0",
@@ -166,7 +164,7 @@
    },
    "packages/opencode": {
      "name": "opencode",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -234,7 +232,7 @@
    },
    "packages/plugin": {
      "name": "@opencode-ai/plugin",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@opencode-ai/sdk": "workspace:*",
        "zod": "catalog:",
@@ -254,7 +252,7 @@
    },
    "packages/sdk/js": {
      "name": "@opencode-ai/sdk",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "devDependencies": {
        "@hey-api/openapi-ts": "0.81.0",
        "@tsconfig/node22": "catalog:",
@@ -265,7 +263,7 @@
    },
    "packages/slack": {
      "name": "@opencode-ai/slack",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@opencode-ai/sdk": "workspace:*",
        "@slack/bolt": "^3.17.1",
@@ -278,20 +276,27 @@
    },
    "packages/ui": {
      "name": "@opencode-ai/ui",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@kobalte/core": "catalog:",
+        "@opencode-ai/sdk": "workspace:*",
        "@pierre/precision-diffs": "catalog:",
+        "@shikijs/transformers": "3.9.2",
        "@solidjs/meta": "catalog:",
+        "@typescript/native-preview": "catalog:",
        "fuzzysort": "catalog:",
        "luxon": "catalog:",
+        "marked": "16.2.0",
+        "marked-shiki": "1.2.1",
        "remeda": "catalog:",
+        "shiki": "3.9.2",
        "solid-js": "catalog:",
        "solid-list": "catalog:",
        "virtua": "catalog:",
      },
      "devDependencies": {
        "@tailwindcss/vite": "catalog:",
+        "@tsconfig/node22": "catalog:",
        "@types/bun": "catalog:",
        "tailwindcss": "catalog:",
        "typescript": "catalog:",
@@ -301,7 +306,7 @@
    },
    "packages/web": {
      "name": "@opencode-ai/web",
-      "version": "0.15.28",
+      "version": "0.15.30",
      "dependencies": {
        "@astrojs/cloudflare": "12.6.3",
        "@astrojs/markdown-remark": "6.3.1",
@@ -348,7 +353,7 @@
    "@hono/zod-validator": "0.4.2",
    "@kobalte/core": "0.13.11",
    "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@pierre/precision-diffs": "0.3.6",
+    "@pierre/precision-diffs": "0.4.1",
    "@solidjs/meta": "0.29.4",
    "@tailwindcss/vite": "4.1.11",
    "@tsconfig/bun": "1.0.9",
@@ -942,7 +947,7 @@

    "@petamoriken/float16": ["@petamoriken/float16@3.9.2", "", {}, "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="],

-    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.3.6", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/transformers": "3.13.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "shiki": "3.13.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-cKM3HcMmyr5wPFll0bHYcgHplcHgMlL6Dw4Pi4giL0jVt7ySlGwwVyXTRFW5Fva43stOL+EWB+9U5VBDSktBJA=="],
+    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.4.1", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/transformers": "3.13.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "shiki": "3.13.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-AoozHakINGyNJFgbYc/1PlDK0yunrAxbtXEMBe9fdu8RLkNjVtYRTLw7EF2mM/YuVoVRjj2HT/2VJ4a2rMyDOA=="],

    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],

@@ -1080,7 +1085,7 @@

    "@selderee/plugin-htmlparser2": ["@selderee/plugin-htmlparser2@0.11.0", "", { "dependencies": { "domhandler": "^5.0.3", "selderee": "^0.11.0" } }, "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ=="],

-    "@shikijs/core": ["@shikijs/core@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA=="],
+    "@shikijs/core": ["@shikijs/core@3.9.2", "", { "dependencies": { "@shikijs/types": "3.9.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA=="],

    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.9.2", "", { "dependencies": { "@shikijs/types": "3.9.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-kUTRVKPsB/28H5Ko6qEsyudBiWEDLst+Sfi+hwr59E0GLHV0h8RfgbQU7fdN5Lt9A8R1ulRiZyTvAizkROjwDA=="],

@@ -3518,6 +3523,8 @@

    "@parcel/watcher-wasm/napi-wasm": ["napi-wasm@1.1.3", "", { "bundled": true }, "sha512-h/4nMGsHjZDCYmQVNODIrYACVJ+I9KItbG+0si6W/jSjdA9JbWDoU4LLeMXVcEQGHjttI2tuXqDrbGF7qkUHHg=="],

+    "@pierre/precision-diffs/@shikijs/core": ["@shikijs/core@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA=="],
+
    "@pierre/precision-diffs/@shikijs/transformers": ["@shikijs/transformers@3.13.0", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/types": "3.13.0" } }, "sha512-833lcuVzcRiG+fXvgslWsM2f4gHpjEgui1ipIknSizRuTgMkNZupiXE5/TVJ6eSYfhNBFhBZKkReKWO2GgYmqA=="],

    "@pierre/precision-diffs/shiki": ["shiki@3.13.0", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/engine-javascript": "3.13.0", "@shikijs/engine-oniguruma": "3.13.0", "@shikijs/langs": "3.13.0", "@shikijs/themes": "3.13.0", "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g=="],
@@ -3530,10 +3537,6 @@

    "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],

-    "@shikijs/core/@shikijs/types": ["@shikijs/types@3.13.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw=="],
-
-    "@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.9.2", "", { "dependencies": { "@shikijs/types": "3.9.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA=="],
-
    "@slack/bolt/path-to-regexp": ["path-to-regexp@8.3.0", "", {}, "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA=="],

    "@slack/oauth/@slack/logger": ["@slack/logger@3.0.0", "", { "dependencies": { "@types/node": ">=12.0.0" } }, "sha512-DTuBFbqu4gGfajREEMrkq5jBhcnskinhr4+AnfJEk48zhVeEv3XnUKGIX98B74kxhYsIMfApGGySTn7V3b5yBA=="],
@@ -3798,8 +3801,6 @@

    "send/mime": ["mime@1.6.0", "", { "bin": { "mime": "cli.js" } }, "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="],

-    "shiki/@shikijs/core": ["@shikijs/core@3.9.2", "", { "dependencies": { "@shikijs/types": "3.9.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3q/mzmw09B2B6PgFNeiaN8pkNOixWS726IHmJEpjDAcneDPMQmUg2cweT9cWXY4XcyQS3i6mOOUgQz9RRUP6HA=="],
-
    "sitemap/sax": ["sax@1.4.1", "", {}, "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="],

    "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
@@ -3954,6 +3955,8 @@

    "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],

+    "@expressive-code/plugin-shiki/shiki/@shikijs/core": ["@shikijs/core@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA=="],
+
    "@expressive-code/plugin-shiki/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg=="],

    "@expressive-code/plugin-shiki/shiki/@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg=="],
@@ -4088,6 +4091,8 @@

    "@opencode-ai/web/shiki/@shikijs/types": ["@shikijs/types@3.4.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg=="],

+    "@pierre/precision-diffs/@shikijs/core/@shikijs/types": ["@shikijs/types@3.13.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw=="],
+
    "@pierre/precision-diffs/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.13.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw=="],

    "@pierre/precision-diffs/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg=="],
@@ -4350,6 +4355,8 @@

    "@actions/github/@octokit/request/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@24.2.0", "", {}, "sha512-9sIH3nSUttelJSXUrmGzl7QUBFul0/mB8HRYl3fOlgHbIWG+WnYDXU3v/2zMtAvuzZ/ed00Ei6on975FhBfzrg=="],

+    "@astrojs/mdx/@astrojs/markdown-remark/shiki/@shikijs/core": ["@shikijs/core@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA=="],
+
    "@astrojs/mdx/@astrojs/markdown-remark/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg=="],

    "@astrojs/mdx/@astrojs/markdown-remark/shiki/@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.13.0", "", { "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg=="],
@@ -25,7 +25,7 @@
      "@tsconfig/bun": "1.0.9",
      "@cloudflare/workers-types": "4.20251008.0",
      "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/precision-diffs": "0.3.6",
+      "@pierre/precision-diffs": "0.4.1",
      "@solidjs/meta": "0.29.4",
      "@tailwindcss/vite": "4.1.11",
      "diff": "8.0.2",
@@ -7,7 +7,7 @@
    "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
    "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
    "start": "vinxi start",
-    "version": "0.15.28"
+    "version": "0.15.30"
  },
  "dependencies": {
    "@ibm/plex": "6.4.1",
@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86283)">
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86283)">
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86283">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86274)">
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86274)">
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86274">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,30 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86292)">
+<mask id="mask0_1401_86292" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86292)">
+<path d="M49.2868 82.1433H16.4297V49.2861H49.2868V82.1433Z" fill="#4B4646"/>
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="#B7B1B1"/>
+<path d="M131.427 82.1433H98.5703V49.2861H131.427V82.1433Z" fill="#4B4646"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="#B7B1B1"/>
+<path d="M229.997 65.7139V82.1424H180.711V65.7139H229.997Z" fill="#4B4646"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="#B7B1B1"/>
+<path d="M295.717 98.5718H262.859V49.2861H295.717V98.5718Z" fill="#4B4646"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="#B7B1B1"/>
+<path d="M394.286 82.1433H345V49.2861H394.286V82.1433Z" fill="#4B4646"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="#F1ECEC"/>
+<path d="M459.998 82.1433H427.141V49.2861H459.998V82.1433Z" fill="#4B4646"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="#F1ECEC"/>
+<path d="M542.146 82.1433H509.289V49.2861H542.146V82.1433Z" fill="#4B4646"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="#F1ECEC"/>
+<path d="M640.715 65.7139V82.1424H591.43V65.7139H640.715Z" fill="#4B4646"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86292">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,30 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86330)">
+<mask id="mask0_1401_86330" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86330)">
+<path d="M49.2346 82.1433H16.4141V49.2861H49.2346V82.1433Z" fill="#CFCECD"/>
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="#656363"/>
+<path d="M131.281 82.1433H98.4609V49.2861H131.281V82.1433Z" fill="#CFCECD"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="#656363"/>
+<path d="M229.746 65.7139V82.1424H180.516V65.7139H229.746Z" fill="#CFCECD"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="#656363"/>
+<path d="M295.383 98.5718H262.562V49.2861H295.383V98.5718Z" fill="#CFCECD"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="#656363"/>
+<path d="M393.848 82.1433H344.617V49.2861H393.848V82.1433Z" fill="#CFCECD"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="#211E1E"/>
+<path d="M459.485 82.1433H426.664V49.2861H459.485V82.1433Z" fill="#CFCECD"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="#211E1E"/>
+<path d="M541.539 82.1433H508.719V49.2861H541.539V82.1433Z" fill="#CFCECD"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="#211E1E"/>
+<path d="M639.996 65.7139V82.1424H590.766V65.7139H639.996Z" fill="#CFCECD"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86330">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,22 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86315)">
+<mask id="mask0_1401_86315" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86315)">
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="white"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="white"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="white"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="white"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="white"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="white"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="white"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86315">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,22 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86353)">
+<mask id="mask0_1401_86353" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86353)">
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="black"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="black"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="black"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="black"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="black"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="black"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="black"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86353">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94922)" stroke="#F1ECEC"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#4B4646" stroke-opacity="0.4"/>
+<defs>
+<linearGradient id="paint0_linear_1311_94922" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1818"/>
+<stop offset="1" stop-color="#2D2828"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94913)" stroke="#8E8B8B"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#110000" stroke-opacity="0.121569"/>
+<defs>
+<linearGradient id="paint0_linear_1311_94913" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9F8F8"/>
+<stop offset="1" stop-color="#E9E8E8"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94916)">
+<path d="M15 19H7V11H15V19Z" fill="#4B4646"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94916">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94907)">
+<path d="M15 19H7V11H15V19Z" fill="#BCBBBB"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94907">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94973)">
+<path d="M24 32H8V16H24V32Z" fill="#4B4646"/>
+<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94973">
+<rect width="32" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94969)">
+<path d="M24 32H8V16H24V32Z" fill="#BCBBBB"/>
+<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94969">
+<rect width="32" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,25 @@
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_95032)">
+<path d="M18 30H6V18H18V30Z" fill="#4B4646"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/>
+<path d="M48 30H36V18H48V30Z" fill="#4B4646"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/>
+<path d="M84 24V30H66V24H84Z" fill="#4B4646"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/>
+<path d="M108 36H96V18H108V36Z" fill="#4B4646"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/>
+<path d="M144 30H126V18H144V30Z" fill="#4B4646"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/>
+<path d="M168 30H156V18H168V30Z" fill="#4B4646"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/>
+<path d="M198 30H186V18H198V30Z" fill="#4B4646"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/>
+<path d="M234 24V30H216V24H234Z" fill="#4B4646"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_95032">
+<rect width="234" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,25 @@
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_95049)">
+<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/>
+<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/>
+<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/>
+<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/>
+<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/>
+<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/>
+<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/>
+<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_95049">
+<rect width="234" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="#F1ECEC" stroke-width="2" stroke-linecap="square"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>
@@ -0,0 +1,63 @@
+.context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 160px;
+  border-radius: 8px;
+  background-color: var(--color-background);
+  box-shadow:
+    0 0 0 1px rgba(19, 16, 16, 0.08),
+    0 6px 8px -4px rgba(19, 16, 16, 0.12),
+    0 4px 3px -2px rgba(19, 16, 16, 0.12),
+    0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  padding: 6px;
+
+  @media (prefers-color-scheme: dark) {
+    box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1);
+  }
+}
+
+.context-menu-item {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 16px 8px 8px;
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+  align-items: center;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+
+  [data-slot="copy dark"] {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-slot="copy light"] {
+      display: none;
+    }
+    [data-slot="copy dark"] {
+      display: block;
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-background-weak-hover);
+    color: var(--color-text-strong);
+  }
+
+  img {
+    width: 22px;
+    height: 26px;
+  }
+}
+
+.context-menu-divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-1) 0;
+}
@@ -1,11 +1,40 @@
 import logoLight from "../asset/logo-ornate-light.svg"
 import logoDark from "../asset/logo-ornate-dark.svg"
-import { A, createAsync } from "@solidjs/router"
+import copyLogoLight from "../asset/lander/logo-light.svg"
+import copyLogoDark from "../asset/lander/logo-dark.svg"
+import copyWordmarkLight from "../asset/lander/wordmark-light.svg"
+import copyWordmarkDark from "../asset/lander/wordmark-dark.svg"
+import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg"
+import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg"
+
+// SVG files for copying (separate from button icons)
+// Replace these with your actual SVG files for copying
+import copyLogoSvgLight from "../asset/lander/opencode-logo-light.svg"
+import copyLogoSvgDark from "../asset/lander/opencode-logo-dark.svg"
+import copyWordmarkSvgLight from "../asset/lander/opencode-wordmark-light.svg"
+import copyWordmarkSvgDark from "../asset/lander/opencode-wordmark-dark.svg"
+import { A, createAsync, useNavigate } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { github } from "~/lib/github"
+import { createEffect, onCleanup } from "solid-js"
+import "./header-context-menu.css"
+
+const isDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches
+
+const fetchSvgContent = async (svgPath: string): Promise<string> => {
+  try {
+    const response = await fetch(svgPath)
+    const svgText = await response.text()
+    return svgText
+  } catch (err) {
+    console.error("Failed to fetch SVG content:", err)
+    throw err
+  }
+}

 export function Header(props: { zen?: boolean }) {
+  const navigate = useNavigate()
  const githubData = createAsync(() => github())
  const starCount = createMemo(() =>
    githubData()?.stars
@@ -13,19 +42,109 @@ export function Header(props: { zen?: boolean }) {
          notation: "compact",
          compactDisplay: "short",
        }).format(githubData()?.stars!)
-      : "25K",
+      : "29K",
  )

  const [store, setStore] = createStore({
    mobileMenuOpen: false,
+    contextMenuOpen: false,
+    contextMenuPosition: { x: 0, y: 0 },
  })

+  createEffect(() => {
+    const handleClickOutside = () => {
+      setStore("contextMenuOpen", false)
+    }
+
+    const handleContextMenu = (event: MouseEvent) => {
+      event.preventDefault()
+      setStore("contextMenuOpen", false)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setStore("contextMenuOpen", false)
+      }
+    }
+
+    if (store.contextMenuOpen) {
+      document.addEventListener("click", handleClickOutside)
+      document.addEventListener("contextmenu", handleContextMenu)
+      document.addEventListener("keydown", handleKeyDown)
+      onCleanup(() => {
+        document.removeEventListener("click", handleClickOutside)
+        document.removeEventListener("contextmenu", handleContextMenu)
+        document.removeEventListener("keydown", handleKeyDown)
+      })
+    }
+  })
+
+  const handleLogoContextMenu = (event: MouseEvent) => {
+    event.preventDefault()
+    const logoElement = (event.currentTarget as HTMLElement).querySelector("a")
+    if (logoElement) {
+      const rect = logoElement.getBoundingClientRect()
+      setStore("contextMenuPosition", {
+        x: rect.left - 16,
+        y: rect.bottom + 8,
+      })
+    }
+    setStore("contextMenuOpen", true)
+  }
+
+  const copyWordmarkToClipboard = async () => {
+    try {
+      const isDark = isDarkMode()
+      const wordmarkSvgPath = isDark ? copyWordmarkSvgDark : copyWordmarkSvgLight
+      const wordmarkSvg = await fetchSvgContent(wordmarkSvgPath)
+      await navigator.clipboard.writeText(wordmarkSvg)
+    } catch (err) {
+      console.error("Failed to copy wordmark to clipboard:", err)
+    }
+  }
+
+  const copyLogoToClipboard = async () => {
+    try {
+      const isDark = isDarkMode()
+      const logoSvgPath = isDark ? copyLogoSvgDark : copyLogoSvgLight
+      const logoSvg = await fetchSvgContent(logoSvgPath)
+      await navigator.clipboard.writeText(logoSvg)
+    } catch (err) {
+      console.error("Failed to copy logo to clipboard:", err)
+    }
+  }
+
  return (
    <section data-component="top">
-      <A href="/">
-        <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
-        <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
-      </A>
+      <div onContextMenu={handleLogoContextMenu}>
+        <A href="/">
+          <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
+          <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
+        </A>
+      </div>
+
+      <Show when={store.contextMenuOpen}>
+        <div
+          class="context-menu"
+          style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
+        >
+          <button class="context-menu-item" onClick={copyLogoToClipboard}>
+            <img data-slot="copy light" src={copyLogoLight} alt="Logo" />
+            <img data-slot="copy dark" src={copyLogoDark} alt="Logo" />
+            Copy logo as SVG
+          </button>
+          <button class="context-menu-item" onClick={copyWordmarkToClipboard}>
+            <img data-slot="copy light" src={copyWordmarkLight} alt="Wordmark" />
+            <img data-slot="copy dark" src={copyWordmarkDark} alt="Wordmark" />
+            Copy wordmark as SVG
+          </button>
+          <button class="context-menu-item" onClick={() => navigate("/brand")}>
+            <img data-slot="copy light" src={copyBrandAssetsLight} alt="Brand Assets" />
+            <img data-slot="copy dark" src={copyBrandAssetsDark} alt="Brand Assets" />
+            Brand assets
+          </button>
+        </div>
+      </Show>
      <nav data-component="nav-desktop">
        <ul>
          <li>
@@ -1,9 +1,14 @@
+import { A } from "@solidjs/router"
+
 export function Legal() {
  return (
    <div data-component="legal">
      <span>
        ©{new Date().getFullYear()} <a href="https://anoma.ly">Anomaly</a>
      </span>
+      <span>
+        <A href="/brand">Brand</A>
+      </span>
    </div>
  )
 }
@@ -25,19 +25,15 @@ export async function POST(event: APIEvent) {

    // Create email content
    const emailContent = `
-New Enterprise Inquiry
-
-Name: ${body.name}
-Role: ${body.role}
-Email: ${body.email}
-
-Message:
-${body.message}
-    `.trim()
+${body.message}<br><br>
+--<br>
+${body.name}<br>
+${body.role}<br>
+${body.email}`.trim()

    // Send email using AWS SES
    await AWS.sendEmail({
-      to: "enterprise@opencode.ai",
+      to: "contact@anoma.ly",
      subject: `Enterprise Inquiry from ${body.name}`,
      body: emailContent,
    })
@@ -0,0 +1,529 @@
+::selection {
+  background: var(--color-background-interactive);
+  color: var(--color-text-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-background-interactive);
+    color: var(--color-text-inverted);
+  }
+}
+
+[data-page="enterprise"] {
+  --color-background: hsl(0, 20%, 99%);
+  --color-background-weak: hsl(0, 8%, 97%);
+  --color-background-weak-hover: hsl(0, 8%, 94%);
+  --color-background-strong: hsl(0, 5%, 12%);
+  --color-background-strong-hover: hsl(0, 5%, 18%);
+  --color-background-interactive: hsl(62, 84%, 88%);
+  --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+  --color-text: hsl(0, 1%, 39%);
+  --color-text-weak: hsl(0, 1%, 60%);
+  --color-text-weaker: hsl(30, 2%, 81%);
+  --color-text-strong: hsl(0, 5%, 12%);
+  --color-text-inverted: hsl(0, 20%, 99%);
+  --color-text-success: hsl(119, 100%, 35%);
+
+  --color-border: hsl(30, 2%, 81%);
+  --color-border-weak: hsl(0, 1%, 85%);
+
+  --color-icon: hsl(0, 1%, 55%);
+  --color-success: hsl(142, 76%, 36%);
+
+  background: var(--color-background);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  padding-bottom: 5rem;
+
+  @media (prefers-color-scheme: dark) {
+    --color-background: hsl(0, 9%, 7%);
+    --color-background-weak: hsl(0, 6%, 10%);
+    --color-background-weak-hover: hsl(0, 6%, 15%);
+    --color-background-strong: hsl(0, 15%, 94%);
+    --color-background-strong-hover: hsl(0, 15%, 97%);
+    --color-background-interactive: hsl(62, 100%, 90%);
+    --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+    --color-text: hsl(0, 4%, 71%);
+    --color-text-weak: hsl(0, 2%, 49%);
+    --color-text-weaker: hsl(0, 3%, 28%);
+    --color-text-strong: hsl(0, 15%, 94%);
+    --color-text-inverted: hsl(0, 9%, 7%);
+    --color-text-success: hsl(119, 60%, 72%);
+
+    --color-border: hsl(0, 3%, 28%);
+    --color-border-weak: hsl(0, 4%, 23%);
+
+    --color-icon: hsl(10, 3%, 43%);
+    --color-success: hsl(142, 76%, 46%);
+  }
+
+  /* Header and Footer styles - copied from index.css */
+  [data-component="top"] {
+    padding: 24px 5rem;
+    height: 80px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--color-background);
+    border-bottom: 1px solid var(--color-border-weak);
+    z-index: 10;
+
+    @media (max-width: 60rem) {
+      padding: 24px 1.5rem;
+    }
+
+    img {
+      height: 34px;
+      width: auto;
+    }
+
+    [data-component="nav-desktop"] {
+      ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 48px;
+        li {
+          display: inline-block;
+          a {
+            text-decoration: none;
+            span {
+              color: var(--color-text-weak);
+            }
+          }
+          a:hover {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+            text-decoration-thickness: 1px;
+          }
+        }
+      }
+
+      @media (max-width: 40rem) {
+        display: none;
+      }
+    }
+
+    [data-component="nav-mobile"] {
+      button > svg {
+        color: var(--color-icon);
+      }
+    }
+
+    [data-component="nav-mobile-toggle"] {
+      border: none;
+      background: none;
+      outline: none;
+      height: 40px;
+      width: 40px;
+      cursor: pointer;
+      margin-right: -8px;
+    }
+
+    [data-component="nav-mobile-toggle"]:hover {
+      background: var(--color-background-weak);
+    }
+
+    [data-component="nav-mobile"] {
+      display: none;
+
+      @media (max-width: 40rem) {
+        display: block;
+
+        [data-component="nav-mobile-icon"] {
+          cursor: pointer;
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-component="nav-mobile-menu-list"] {
+          position: fixed;
+          background: var(--color-background);
+          top: 80px;
+          left: 0;
+          right: 0;
+          height: 100vh;
+
+          ul {
+            list-style: none;
+            padding: 20px 0;
+
+            li {
+              a {
+                text-decoration: none;
+                padding: 20px;
+                display: block;
+
+                span {
+                  color: var(--color-text-weak);
+                }
+              }
+
+              a:hover {
+                background: var(--color-background-weak);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    [data-slot="logo dark"] {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="logo light"] {
+        display: none;
+      }
+      [data-slot="logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="footer"] {
+    border-top: 1px solid var(--color-border-weak);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 65rem) {
+      border-bottom: 1px solid var(--color-border-weak);
+    }
+
+    [data-slot="cell"] {
+      flex: 1;
+      text-align: center;
+
+      a {
+        text-decoration: none;
+        padding: 2rem 0;
+        width: 100%;
+        display: block;
+
+        span {
+          color: var(--color-text-weak);
+
+          @media (max-width: 40rem) {
+            display: none;
+          }
+        }
+      }
+
+      a:hover {
+        background: var(--color-background-weak);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-thickness: 1px;
+      }
+    }
+
+    [data-slot="cell"] + [data-slot="cell"] {
+      border-left: 1px solid var(--color-border-weak);
+
+      @media (max-width: 40rem) {
+        border-left: none;
+      }
+    }
+
+    /* Mobile: third column on its own row */
+    @media (max-width: 25rem) {
+      flex-wrap: wrap;
+
+      [data-slot="cell"] {
+        flex: 1 0 100%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-weak);
+      }
+
+      [data-slot="cell"]:nth-child(1) {
+        border-top: none;
+      }
+    }
+  }
+
+  [data-component="container"] {
+    max-width: 67.5rem;
+    margin: 0 auto;
+    border: 1px solid var(--color-border-weak);
+    border-top: none;
+
+    @media (max-width: 65rem) {
+      border: none;
+    }
+  }
+
+  [data-component="content"] {
+  }
+
+  [data-component="brand-content"] {
+    padding: 4rem 5rem;
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin: 2rem 0 1rem 0;
+    }
+
+    p {
+      line-height: 1.6;
+      margin-bottom: 2.5rem;
+      color: var(--color-text);
+    }
+
+    [data-component="download-button"] {
+      padding: 8px 12px 8px 20px;
+      background: var(--color-background-strong);
+      color: var(--color-text-inverted);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      width: fit-content;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      text-decoration: none;
+
+
+      &:hover:not(:disabled) {
+        background: var(--color-background-strong-hover);
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    [data-component="brand-grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-top: 4rem;
+      margin-bottom: 2rem;
+    }
+
+    [data-component="brand-grid"] img {
+      width: 100%;
+      height: auto;
+      display: block;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-weak);
+    }
+
+    [data-component="brand-grid"] > div {
+      position: relative;
+    }
+
+    [data-component="actions"] {
+      position: absolute;
+      background: rgba(4, 0, 0, 0.08);
+      border-radius: 4px;
+      bottom: 0;
+      right: 0;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      @media (max-width: 40rem) {
+        position: static;
+        opacity: 1;
+        background: none;
+        margin-top: 1rem;
+        justify-content: start;
+      }
+    }
+
+    [data-component="brand-grid"] > div:hover [data-component="actions"] {
+      opacity: 1;
+
+      @media (max-width: 40rem) {
+        opacity: 1;
+      }
+    }
+
+    [data-component="actions"] button {
+      padding: 6px 12px;
+      background: var(--color-background);
+      color: var(--color-text);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      cursor: pointer;
+      box-shadow:
+        0 0 0 1px rgba(19, 16, 16, 0.08),
+        0 6px 8px -4px rgba(19, 16, 16, 0.12),
+        0 4px 3px -2px rgba(19, 16, 16, 0.12),
+        0 1px 2px -1px rgba(19, 16, 16, 0.12);
+
+      @media (max-width: 40rem) {
+        box-shadow:
+          0 0 0 1px rgba(19, 16, 16, 0.16)
+      }
+
+
+      &:hover {
+        background: var(--color-background);
+      }
+
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -8px rgba(19, 16, 16, 0.50);
+      }
+    }
+
+
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+  }
+
+  [data-component="faq"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: 4rem 5rem;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    [data-slot="section-title"] {
+      margin-bottom: 24px;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 12px;
+      }
+
+      p {
+        margin-bottom: 12px;
+        color: var(--color-text);
+      }
+    }
+
+    ul {
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin-bottom: 24px;
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+    }
+
+    [data-slot="faq-question"] {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 8px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+
+      [data-slot="faq-icon-plus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: block;
+        }
+        [data-expanded] & {
+          display: none;
+        }
+      }
+      [data-slot="faq-icon-minus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: none;
+        }
+        [data-expanded] & {
+          display: block;
+        }
+      }
+      [data-slot="faq-question-text"] {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+
+    [data-slot="faq-answer"] {
+      margin-left: 40px;
+      margin-bottom: 32px;
+      color: var(--color-text);
+    }
+  }
+
+  [data-component="legal"] {
+    color: var(--color-text-weak);
+    text-align: center;
+    padding: 2rem 5rem;
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    a {
+      color: var(--color-text-weak);
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
+  }
+
+  a {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}
@@ -0,0 +1,352 @@
+import "./index.css"
+import { Title, Meta } from "@solidjs/meta"
+import { Header } from "~/component/header"
+import { Footer } from "~/component/footer"
+import { Legal } from "~/component/legal"
+import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
+import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
+import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
+import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
+import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
+import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
+import logoLightPng from "../../asset/brand/opencode-logo-light.png"
+import logoDarkPng from "../../asset/brand/opencode-logo-dark.png"
+import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png"
+import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png"
+import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png"
+import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png"
+import logoLightSvg from "../../asset/brand/opencode-logo-light.svg"
+import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg"
+import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
+import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
+import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
+import wordmarkSimpleDarkSvg from "../../asset/brand/opencode-wordmark-simple-dark.svg"
+const brandAssets = "/opencode-brand-assets.zip"
+
+export default function Brand() {
+  const downloadFile = async (url: string, filename: string) => {
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+
+      const link = document.createElement("a")
+      link.href = blobUrl
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+
+      window.URL.revokeObjectURL(blobUrl)
+    } catch (error) {
+      console.error("Download failed:", error)
+      const link = document.createElement("a")
+      link.href = url
+      link.target = "_blank"
+      link.rel = "noopener noreferrer"
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+
+  return (
+    <main data-page="enterprise">
+      <Title>OpenCode | Brand</Title>
+      <Meta name="description" content="OpenCode brand guidelines" />
+      <div data-component="container">
+        <Header />
+
+        <div data-component="content">
+          <section data-component="brand-content">
+            <h2>Brand guidelines</h2>
+            <p>Resources and assets to help you work with the OpenCode brand.</p>
+            <button
+              data-component="download-button"
+              onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")}
+            >
+              Download all assets
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="square"
+                />
+              </svg>
+            </button>
+
+            <div data-component="brand-grid">
+              <div>
+                <img src={previewLogoLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoLightPng, "opencode-logo-light.png")}>
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}>
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewLogoDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoDarkPng, "opencode-logo-dark.png")}>
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoDarkSvg, "opencode-logo-dark.svg")}>
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")
+                    }
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")
+                    }
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")
+                    }
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")
+                    }
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+        <Footer />
+      </div>
+      <Legal />
+    </main>
+  )
+}
@@ -8,7 +8,6 @@
  }
 }

-
 [data-page="enterprise"] {
  --color-background: hsl(0, 20%, 99%);
  --color-background-weak: hsl(0, 8%, 97%);
@@ -52,7 +51,6 @@
    --color-text-inverted: hsl(0, 9%, 7%);
    --color-text-success: hsl(119, 60%, 72%);

-
    --color-border: hsl(0, 3%, 28%);
    --color-border-weak: hsl(0, 4%, 23%);

@@ -390,7 +388,7 @@

            @media (prefers-color-scheme: dark) {
              box-shadow: none;
-              border: 1px solid var(--color-background-interactive)
+              border: 1px solid var(--color-background-interactive);
            }
          }
        }
@@ -520,6 +518,9 @@
    color: var(--color-text-weak);
    text-align: center;
    padding: 2rem 5rem;
+    display: flex;
+    gap: 32px;
+    justify-content: center;

    @media (max-width: 60rem) {
      padding: 2rem 1.5rem;
@@ -529,6 +530,11 @@
      color: var(--color-text-weak);
      text-decoration: none;
    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
  }

  a {
@@ -1,6 +1,6 @@
 import "./index.css"
 import { Title, Meta } from "@solidjs/meta"
-import { createSignal } from "solid-js"
+import { createSignal, Show } from "solid-js"
 import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
@@ -64,60 +64,97 @@ export default function Enterprise() {
              <div data-component="enterprise-column-1">
                <h2>Your code is yours</h2>
                <p>
-                  OpenCode operates securely inside your organization with no data or context stored and no licensing restrictions or ownership claims. Start a trial with your team today, then scale confidently with enterprise-grade features including SSO, private registries, and self-hosting.
-                </p>
-                <p>
-                  Let us know and how we can help.
+                  OpenCode operates securely inside your organization with no data or context stored
+                  and no licensing restrictions or ownership claims. Start a trial with your team,
+                  then deploy it across your organization by integrating it with your SSO and
+                  internal AI gateway.
                </p>
+                <p>Let us know and how we can help.</p>

-                <div data-component="testimonial">
-                  <div data-component="quotation">
-                    <svg width="20" height="17" viewBox="0 0 20 17" fill="none"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
-                        fill="currentColor" />
-                    </svg>
-
+                <Show when={false}>
+                  <div data-component="testimonial">
+                    <div data-component="quotation">
+                      <svg
+                        width="20"
+                        height="17"
+                        viewBox="0 0 20 17"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    Thanks to OpenCode, we found a way to create software to track all our assets —
+                    even the imaginary ones.
+                    <div data-component="testimonial-logo">
+                      <svg
+                        width="80"
+                        height="79"
+                        viewBox="0 0 80 79"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M0 39.3087L10.0579 29.251L15.6862 34.7868L13.7488 36.7248L10.3345 33.2186L8.48897 35.0639L11.8111 38.4781L9.96557 40.4156L6.55181 37.0018L4.06028 39.4928L7.56674 42.9991L5.62884 44.845L0 39.3087Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M17.7182 36.8164L20.2094 39.4003L16.6108 46.9666L22.2393 41.3374L24.3615 43.46L14.2118 53.5179L11.9047 51.1187L15.4112 43.3677L9.78254 49.0888L7.66016 46.9666L17.7182 36.8164Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M42.8139 61.915L45.3055 64.4064L41.6145 71.9731L47.243 66.3441L49.3652 68.4663L39.3077 78.5244L36.9088 76.1252L40.5072 68.374L34.7866 74.0953L32.6641 71.9731L42.8139 61.915Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M16.4258 55.7324L26.4833 45.582L28.6061 47.7042C31.0049 50.1034 32.3892 51.9497 30.1746 54.1642C28.7902 55.548 27.6831 56.0094 26.1145 54.9016L26.0222 54.994C27.2218 56.1941 26.9448 57.1162 25.4688 58.5931L23.9 60.1615C23.4383 60.6232 22.8847 61.2693 22.7927 62.0067L20.6705 59.8845C20.7625 59.146 21.3161 58.5008 21.778 58.1316L23.5307 56.3788C24.269 55.6403 23.715 54.2555 23.254 53.8872L22.8847 53.4256L18.548 57.7623L16.4258 55.7324ZM24.3611 51.9495C25.4689 53.0563 26.4833 53.3332 27.4984 52.3178C28.5134 51.3957 28.2367 50.3802 27.1295 49.1812L24.3611 51.9495Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M33.4952 66.9899C31.096 69.3891 28.8815 68.4659 27.4047 66.9899C26.021 65.6062 25.0978 63.3907 27.4972 60.9003L31.8336 56.6548C34.2333 54.2556 36.4478 55.0864 37.9241 56.5635C39.308 58.0396 40.2311 60.2541 37.8315 62.6531L33.4952 66.9899ZM29.0659 63.5752C28.6048 64.0369 28.6048 64.7753 29.1583 65.3292C29.6196 65.8821 30.4502 65.7897 30.8194 65.4215L36.2633 59.9769C36.7246 59.6076 36.7246 58.7779 36.171 58.3164C35.7097 57.7626 34.8791 57.7626 34.5101 58.2241L29.0659 63.5752Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M78.5267 39.308L68.2845 29.0654L47.5231 49.735L49.6453 51.8572L68.2845 33.2179L74.3746 39.308L47.2461 66.3435L49.3683 68.4657L78.5267 39.308Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M49.6443 51.8577L43.3695 45.4902L64.0386 24.8215L53.7969 14.4873L33.0352 35.2482L35.1574 37.3705L53.7969 18.7315L59.7947 24.8215L39.1251 45.4902L47.5221 53.9799L49.6443 51.8577Z"
+                          fill="#2D9C5C"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M35.1564 37.3706L28.7896 31.0038L49.5515 10.3347L39.3088 0L10.0586 29.2507L12.1804 31.2804L39.3088 4.24476L45.3066 10.3347L24.6377 31.0038L33.0342 39.4008L35.1564 37.3706Z"
+                          fill="#E92A35"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M77.2332 52.4105C76.0336 52.4105 75.111 51.4884 75.111 50.196C75.111 48.9046 76.0336 47.9814 77.2332 47.9814C78.3405 47.9814 79.263 48.9046 79.263 50.196C79.263 51.4884 78.3405 52.4105 77.2332 52.4105ZM77.2332 52.9643C78.7098 52.9643 80.0015 51.6729 80.0015 50.196C80.0015 48.6276 78.7096 47.4287 77.2332 47.4287C75.6644 47.4287 74.4648 48.6278 74.4648 50.196C74.4647 51.6731 75.6643 52.9643 77.2332 52.9643ZM76.1259 51.7653H76.6797V50.3804H77.0485L77.8788 51.7653H78.4332L77.6023 50.3804C78.1558 50.2881 78.4332 50.0122 78.4332 49.5507C78.4332 48.9046 78.0633 48.6276 77.3253 48.6276H76.1257V51.7653H76.1259ZM76.6797 49.0892H77.2332C77.5102 49.0892 77.8788 49.0892 77.8788 49.4586C77.8788 49.9202 77.6023 49.9202 77.2332 49.9202H76.6797V49.0892Z"
+                          fill="#0083C6"
+                        />
+                      </svg>
+                    </div>
                  </div>
-
-                  Thanks to OpenCode, we found a way to create software to track all our assets — even the imaginary ones.
-
-                  <div data-component="testimonial-logo">
-                    <svg width="80" height="79" viewBox="0 0 80 79" fill="none"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M0 39.3087L10.0579 29.251L15.6862 34.7868L13.7488 36.7248L10.3345 33.2186L8.48897 35.0639L11.8111 38.4781L9.96557 40.4156L6.55181 37.0018L4.06028 39.4928L7.56674 42.9991L5.62884 44.845L0 39.3087Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M17.7182 36.8164L20.2094 39.4003L16.6108 46.9666L22.2393 41.3374L24.3615 43.46L14.2118 53.5179L11.9047 51.1187L15.4112 43.3677L9.78254 49.0888L7.66016 46.9666L17.7182 36.8164Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M42.8139 61.915L45.3055 64.4064L41.6145 71.9731L47.243 66.3441L49.3652 68.4663L39.3077 78.5244L36.9088 76.1252L40.5072 68.374L34.7866 74.0953L32.6641 71.9731L42.8139 61.915Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M16.4258 55.7324L26.4833 45.582L28.6061 47.7042C31.0049 50.1034 32.3892 51.9497 30.1746 54.1642C28.7902 55.548 27.6831 56.0094 26.1145 54.9016L26.0222 54.994C27.2218 56.1941 26.9448 57.1162 25.4688 58.5931L23.9 60.1615C23.4383 60.6232 22.8847 61.2693 22.7927 62.0067L20.6705 59.8845C20.7625 59.146 21.3161 58.5008 21.778 58.1316L23.5307 56.3788C24.269 55.6403 23.715 54.2555 23.254 53.8872L22.8847 53.4256L18.548 57.7623L16.4258 55.7324ZM24.3611 51.9495C25.4689 53.0563 26.4833 53.3332 27.4984 52.3178C28.5134 51.3957 28.2367 50.3802 27.1295 49.1812L24.3611 51.9495Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M33.4952 66.9899C31.096 69.3891 28.8815 68.4659 27.4047 66.9899C26.021 65.6062 25.0978 63.3907 27.4972 60.9003L31.8336 56.6548C34.2333 54.2556 36.4478 55.0864 37.9241 56.5635C39.308 58.0396 40.2311 60.2541 37.8315 62.6531L33.4952 66.9899ZM29.0659 63.5752C28.6048 64.0369 28.6048 64.7753 29.1583 65.3292C29.6196 65.8821 30.4502 65.7897 30.8194 65.4215L36.2633 59.9769C36.7246 59.6076 36.7246 58.7779 36.171 58.3164C35.7097 57.7626 34.8791 57.7626 34.5101 58.2241L29.0659 63.5752Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M78.5267 39.308L68.2845 29.0654L47.5231 49.735L49.6453 51.8572L68.2845 33.2179L74.3746 39.308L47.2461 66.3435L49.3683 68.4657L78.5267 39.308Z"
-                            fill="#0083C6" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M49.6443 51.8577L43.3695 45.4902L64.0386 24.8215L53.7969 14.4873L33.0352 35.2482L35.1574 37.3705L53.7969 18.7315L59.7947 24.8215L39.1251 45.4902L47.5221 53.9799L49.6443 51.8577Z"
-                            fill="#2D9C5C" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M35.1564 37.3706L28.7896 31.0038L49.5515 10.3347L39.3088 0L10.0586 29.2507L12.1804 31.2804L39.3088 4.24476L45.3066 10.3347L24.6377 31.0038L33.0342 39.4008L35.1564 37.3706Z"
-                            fill="#E92A35" />
-                      <path fill-rule="evenodd" clip-rule="evenodd"
-                            d="M77.2332 52.4105C76.0336 52.4105 75.111 51.4884 75.111 50.196C75.111 48.9046 76.0336 47.9814 77.2332 47.9814C78.3405 47.9814 79.263 48.9046 79.263 50.196C79.263 51.4884 78.3405 52.4105 77.2332 52.4105ZM77.2332 52.9643C78.7098 52.9643 80.0015 51.6729 80.0015 50.196C80.0015 48.6276 78.7096 47.4287 77.2332 47.4287C75.6644 47.4287 74.4648 48.6278 74.4648 50.196C74.4647 51.6731 75.6643 52.9643 77.2332 52.9643ZM76.1259 51.7653H76.6797V50.3804H77.0485L77.8788 51.7653H78.4332L77.6023 50.3804C78.1558 50.2881 78.4332 50.0122 78.4332 49.5507C78.4332 48.9046 78.0633 48.6276 77.3253 48.6276H76.1257V51.7653H76.1259ZM76.6797 49.0892H77.2332C77.5102 49.0892 77.8788 49.0892 77.8788 49.4586C77.8788 49.9202 77.6023 49.9202 77.2332 49.9202H76.6797V49.0892Z"
-                            fill="#0083C6" />
-                    </svg>
-
-                  </div>
-
-                </div>
+                </Show>
              </div>

              <div data-component="enterprise-column-2">
@@ -130,7 +167,7 @@ export default function Enterprise() {
                        type="text"
                        required
                        value={formData().name}
-                        onInput={handleInputChange('name')}
+                        onInput={handleInputChange("name")}
                        placeholder="Jeff Bezos"
                      />
                    </div>
@@ -142,7 +179,7 @@ export default function Enterprise() {
                        type="text"
                        required
                        value={formData().role}
-                        onInput={handleInputChange('role')}
+                        onInput={handleInputChange("role")}
                        placeholder="Executive Chairman"
                      />
                    </div>
@@ -154,27 +191,25 @@ export default function Enterprise() {
                        type="email"
                        required
                        value={formData().email}
-                        onInput={handleInputChange('email')}
+                        onInput={handleInputChange("email")}
                        placeholder="jeff@amazon.com"
                      />
                    </div>

                    <div data-component="form-group">
-                      <label for="message">What problem are you trying to
-                        solve?</label>
+                      <label for="message">What problem are you trying to solve?</label>
                      <textarea
                        id="message"
                        required
                        rows={5}
                        value={formData().message}
-                        onInput={handleInputChange('message')}
+                        onInput={handleInputChange("message")}
                        placeholder="We need help with..."
                      />
                    </div>

-                    <button type="submit" disabled={isSubmitting()}
-                            data-component="submit-button">
-                      {isSubmitting() ? 'Sending...' : 'Send'}
+                    <button type="submit" disabled={isSubmitting()} data-component="submit-button">
+                      {isSubmitting() ? "Sending..." : "Send"}
                    </button>
                  </form>

@@ -194,53 +229,32 @@ export default function Enterprise() {
            </div>
            <ul>
              <li>
-                <Faq question="Does Opencode store our code or context data?">
-                  No. OpenCode never stores your code or context data. All
-                  processing happens locally or directly with your AI provider.
+                <Faq question="What is OpenCode Enterprise?">
+                  OpenCode Enterprise is for organizations that want to ensure that their code and
+                  data never leaves their infrastructure. It can do this by using a centralized
+                  config that integrates with your SSO and internal AI gateway.
                </Faq>
              </li>
              <li>
-                <Faq question="Who owns the code generated with OpenCode?">
-                  You do. All code produced is yours, with no licensing
-                  restrictions or ownership claims.
+                <Faq question="How do I get started with OpenCode Enterprise?">
+                  Simply start with an internal trial with your team. OpenCode by default does not
+                  store your code or context data, making it easy to get started. Then contact us to
+                  discuss pricing and implementation options.
                </Faq>
              </li>
              <li>
-                <Faq
-                  question="How can we trial OpenCode inside our organization?">
-                  Simply install and run an internal trial with your team. Since
-                  OpenCode doesn’t store any data, your developers can get
-                  started right away.
+                <Faq question="How does enterprise pricing work?">
+                  We offer per-seat enterprise pricing. If you have your own LLM gateway, we do not
+                  charge for tokens used. For further details, contact us for a custom quote based
+                  on your organization's needs.
                </Faq>
              </li>
              <li>
-                <Faq
-                  question="What happens if someone uses the `/share` feature?">
-                  By default, sharing is disabled. If enabled, conversations are
-                  sent to our share service and cached through our CDN. For
-                  enterprise use, we recommend disabling or self-hosting this
-                  feature.
-                </Faq>
-              </li>
-              <li>
-                <Faq question="Can OpenCode integrate with our company’s SSO?">
-                  Yes. Enterprise deployments can include SSO integration so all
-                  sessions and shared conversations are protected by your
-                  authentication system.
-                </Faq>
-              </li>
-              <li>
-                <Faq question="Can OpenCode be self-hosted?">
-                  Absolutely. You can fully self-host OpenCode, including the
-                  share feature, ensuring that data and pages are accessible
-                  only after authentication.
-                </Faq>
-              </li>
-              <li>
-                <Faq
-                  question="How do we get started with enterprise deployment?">
-                  Contact us to discuss pricing, implementation, and enterprise
-                  options like SSO, private registries, and self-hosting.
+                <Faq question="Is my data secure with OpenCode Enterprise?">
+                  Yes. OpenCode does not store your code or context data. All processing happens
+                  locally or through direct API calls to your AI provider. With central config and
+                  SSO integration, your data remains secure within your organization's
+                  infrastructure.
                </Faq>
              </li>
            </ul>
@@ -56,7 +56,6 @@ body {
  }
 }

-
@supports (background: -webkit-named-image(i)) {
  [data-page="opencode"] {
    border-top: 1px solid var(--color-border-weak);
@@ -118,7 +117,6 @@ body {
      display: none !important;
    }

-
    [data-component="growth-stat"] {
      display: flex;
      flex-direction: column;
@@ -149,14 +147,12 @@ body {
            display: none;
          }
        }
-
      }

-
      [data-component="stat-illustration"] {
-      width: 100%;
-      height: 100%;
-      display: block;
+        width: 100%;
+        height: 100%;
+        display: block;

        svg {
          margin: 0;
@@ -164,10 +160,9 @@ body {
          height: auto;
          display: block;
        }
+      }
    }
  }
-  }
-

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
@@ -184,7 +179,6 @@ body {
    -moz-text-fill-color: var(--color-text-strong) !important;
  }

-
  [data-component="container"] {
    max-width: 67.5rem;
    margin: 0 auto;
@@ -328,10 +322,10 @@ body {
    display: flex;
    flex-direction: column;
    max-width: 100%;
-    padding: calc(var(--vertical-padding)*2) var(--padding);
+    padding: calc(var(--vertical-padding) * 2) var(--padding);

    @media (max-width: 30rem) {
-      padding: var(--vertical-padding) var(--padding)
+      padding: var(--vertical-padding) var(--padding);
    }

    @media (prefers-color-scheme: dark) {
@@ -352,7 +346,6 @@ body {
    @media (max-width: 550px) {
      width: calc(100vw - 48px);
    }
-
  }

  [data-component="tabs"] {
@@ -368,7 +361,7 @@ body {
      padding: 0 20px;

      @media (max-width: 60rem) {
-        gap: 20px;
+        gap: 32px;
        overflow-x: auto;
        width: 100%;
      }
@@ -443,7 +436,6 @@ body {
          @media (max-width: 35rem) {
            width: calc(100% - 40px) !important;
          }
-
        }

        [data-slot="highlight"] {
@@ -496,7 +488,6 @@ body {
      @media (max-width: 60rem) {
        font-size: 22px;
      }
-
    }

    p {
@@ -579,7 +570,6 @@ body {
    margin-bottom: 24px;
    max-width: 100%;

-
    div {
      display: flex;
      gap: 12px;
@@ -832,7 +822,7 @@ body {

        @media (prefers-color-scheme: dark) {
          box-shadow: none;
-          border: 1px solid var(--color-background-interactive)
+          border: 1px solid var(--color-background-interactive);
        }
      }

@@ -892,7 +882,6 @@ body {
        margin-top: 2px;
      }

-
      [data-slot="faq-icon-plus"] {
        flex-shrink: 0;
        color: var(--color-text-weak);
@@ -1021,7 +1010,6 @@ body {
  }

  [data-component="copy-status"] {
-
    [data-slot="copy"] {
      display: block;
      width: var(--space-4);
@@ -1054,12 +1042,10 @@ body {
      border-bottom: 1px solid var(--color-border-weak);
    }

-
    [data-slot="cell"] {
      flex: 1;
      text-align: center;

-
      a {
        text-decoration: none;
        padding: 2rem 0;
@@ -1072,7 +1058,6 @@ body {
          @media (max-width: 40rem) {
            display: none;
          }
-
        }
      }

@@ -1111,10 +1096,18 @@ body {
  [data-component="legal"] {
    color: var(--color-text-weak);
    text-align: center;
+    display: flex;
+    gap: 32px;
+    justify-content: center;

    a {
      color: var(--color-text-weak);
      text-decoration: none;
    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
  }
 }
@@ -219,8 +219,8 @@ export default function Home() {
              <div>
                <span>[*]</span>
                <p>
-                  With over <strong>26,000</strong> GitHub stars, <strong>188</strong> contributors, and almost{" "}
-                  <strong>3,000</strong> commits, OpenCode is used and trusted by over <strong>200,000</strong>{" "}
+                  With over <strong>29,000</strong> GitHub stars, <strong>230</strong> contributors, and almost{" "}
+                  <strong>3,500</strong> commits, OpenCode is used and trusted by over <strong>250,000</strong>{" "}
                  developers every month.
                </p>
              </div>
@@ -274,7 +274,7 @@ export default function Home() {
                    </svg>
                  </div>
                  <span>
-                    <figure>Fig 1.</figure> <strong>26K</strong> GitHub Stars
+                    <figure>Fig 1.</figure> <strong>29K</strong> GitHub Stars
                  </span>
                </div>

@@ -577,7 +577,7 @@ export default function Home() {
                    </svg>
                  </div>
                  <span>
-                    <figure>Fig 2.</figure> <strong>188</strong> Contributors
+                    <figure>Fig 2.</figure> <strong>230</strong> Contributors
                  </span>
                </div>

@@ -619,7 +619,7 @@ export default function Home() {
                    </svg>
                  </div>
                  <span>
-                    <figure>Fig 3.</figure> <strong>200K</strong> Monthly Devs
+                    <figure>Fig 3.</figure> <strong>250K</strong> Monthly Devs
                  </span>
                </div>
              </div>
@@ -16,7 +16,7 @@ export function formatDateForTable(date: Date) {
    minute: "2-digit",
    hour12: true,
  }
-  return date.toLocaleDateString("en-GB", options).replace(",", ",")
+  return date.toLocaleDateString(undefined, options).replace(",", ",")
 }

 export function formatDateUTC(date: Date) {
@@ -60,7 +60,6 @@ body {
  }
 }

-
 [data-page="zen"] {
  background: var(--color-background);
  --padding: 5rem;
@@ -112,9 +111,6 @@ body {
    -moz-text-fill-color: var(--color-text-strong) !important;
  }

-
-
-
  [data-component="container"] {
    max-width: 67.5rem;
    margin: 0 auto;
@@ -179,8 +175,6 @@ body {
      }
    }

-
-
    [data-component="nav-mobile-toggle"] {
      border: none;
      background: none;
@@ -258,14 +252,14 @@ body {
  [data-component="hero"] {
    display: flex;
    flex-direction: column;
-    padding: calc(var(--vertical-padding)*2) var(--padding);
+    padding: calc(var(--vertical-padding) * 2) var(--padding);

    [data-slot="zen logo dark"] {
      display: none;
    }

    @media (max-width: 30rem) {
-      padding: var(--vertical-padding) var(--padding)
+      padding: var(--vertical-padding) var(--padding);
    }

    @media (prefers-color-scheme: dark) {
@@ -295,8 +289,6 @@ body {
      }
    }

-
-
    p {
      color: var(--color-text);
      margin-bottom: 24px;
@@ -778,12 +770,10 @@ body {
      border-bottom: 1px solid var(--color-border-weak);
    }

-
    [data-slot="cell"] {
      flex: 1;
      text-align: center;

-
      a {
        text-decoration: none;
        padding: 2rem 0;
@@ -796,7 +786,6 @@ body {
          @media (max-width: 40rem) {
            display: none;
          }
-
        }
      }

@@ -835,10 +824,18 @@ body {
  [data-component="legal"] {
    color: var(--color-text-weak);
    text-align: center;
+    display: flex;
+    gap: 32px;
+    justify-content: center;

    a {
      color: var(--color-text-weak);
      text-decoration: none;
    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
  }
 }
@@ -13,7 +13,11 @@ import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
 import { ProviderTable } from "@opencode-ai/console-core/schema/provider.sql.js"
 import { logger } from "./logger"
 import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError } from "./error"
-import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
+import {
+  createBodyConverter,
+  createStreamPartConverter,
+  createResponseConverter,
+} from "./provider/provider"
 import { Format } from "./format"
 import { anthropicHelper } from "./provider/anthropic"
 import { openaiHelper } from "./provider/openai"
@@ -43,7 +47,11 @@ export async function handler(
    })
    const zenData = ZenData.list()
    const modelInfo = validateModel(zenData, body.model)
-    const providerInfo = selectProvider(zenData, modelInfo, input.request.headers.get("x-real-ip") ?? "")
+    const providerInfo = selectProvider(
+      zenData,
+      modelInfo,
+      input.request.headers.get("x-real-ip") ?? "",
+    )
    const authInfo = await authenticate(modelInfo, providerInfo)
    validateBilling(modelInfo, authInfo)
    validateModelSettings(authInfo)
@@ -222,7 +230,11 @@ export async function handler(
    return { id: modelId, ...modelData }
  }

-  function selectProvider(zenData: ZenData, model: Awaited<ReturnType<typeof validateModel>>, ip: string) {
+  function selectProvider(
+    zenData: ZenData,
+    model: Awaited<ReturnType<typeof validateModel>>,
+    ip: string,
+  ) {
    const providers = model.providers
      .filter((provider) => !provider.disabled)
      .flatMap((provider) => Array<typeof provider>(provider.weight ?? 1).fill(provider))
@@ -239,7 +251,11 @@ export async function handler(
    return {
      ...provider,
      ...zenData.providers[provider.id],
-      ...(provider.id === "anthropic" ? anthropicHelper : provider.id === "openai" ? openaiHelper : oaCompatHelper),
+      ...(provider.id === "anthropic"
+        ? anthropicHelper
+        : provider.id === "openai"
+          ? openaiHelper
+          : oaCompatHelper),
    }
  }

@@ -279,11 +295,20 @@ export async function handler(
        .from(KeyTable)
        .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
        .innerJoin(BillingTable, eq(BillingTable.workspaceID, KeyTable.workspaceID))
-        .innerJoin(UserTable, and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)))
-        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)))
+        .innerJoin(
+          UserTable,
+          and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)),
+        )
+        .leftJoin(
+          ModelTable,
+          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)),
+        )
        .leftJoin(
          ProviderTable,
-          and(eq(ProviderTable.workspaceID, KeyTable.workspaceID), eq(ProviderTable.provider, providerInfo.id)),
+          and(
+            eq(ProviderTable.workspaceID, KeyTable.workspaceID),
+            eq(ProviderTable.provider, providerInfo.id),
+          ),
        )
        .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
        .then((rows) => rows[0]),
@@ -307,12 +332,20 @@ export async function handler(
  }

  function validateBilling(model: Model, authInfo: Awaited<ReturnType<typeof authenticate>>) {
-    if (!authInfo || authInfo.isFree) return
+    if (!authInfo) return
+    if (authInfo.provider?.credentials) return
+    if (authInfo.isFree) return
    if (model.allowAnonymous) return

    const billing = authInfo.billing
-    if (!billing.paymentMethodID) throw new CreditsError("No payment method")
-    if (billing.balance <= 0) throw new CreditsError("Insufficient balance")
+    if (!billing.paymentMethodID)
+      throw new CreditsError(
+        `No payment method. Add a payment method here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
+      )
+    if (billing.balance <= 0)
+      throw new CreditsError(
+        `Insufficient balance. Manage your billing here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
+      )

    const now = new Date()
    const currentYear = now.getUTCFullYear()
@@ -327,7 +360,7 @@ export async function handler(
      const dateMonth = billing.timeMonthlyUsageUpdated.getUTCMonth()
      if (currentYear === dateYear && currentMonth === dateMonth)
        throw new MonthlyLimitError(
-          `Your workspace has reached its monthly spending limit of $${billing.monthlyLimit}.`,
+          `Your workspace has reached its monthly spending limit of $${billing.monthlyLimit}. Manage your limits here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
        )
    }

@@ -340,7 +373,9 @@ export async function handler(
      const dateYear = authInfo.user.timeMonthlyUsageUpdated.getUTCFullYear()
      const dateMonth = authInfo.user.timeMonthlyUsageUpdated.getUTCMonth()
      if (currentYear === dateYear && currentMonth === dateMonth)
-        throw new UserLimitError(`You have reached your monthly spending limit of $${authInfo.user.monthlyLimit}.`)
+        throw new UserLimitError(
+          `You have reached your monthly spending limit of $${authInfo.user.monthlyLimit}. Manage your limits here: https://opencode.ai/workspace/${authInfo.workspaceID}/members`,
+        )
    }
  }

@@ -364,12 +399,19 @@ export async function handler(
    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
    usage: any,
  ) {
-    const { inputTokens, outputTokens, reasoningTokens, cacheReadTokens, cacheWrite5mTokens, cacheWrite1hTokens } =
-      providerInfo.normalizeUsage(usage)
+    const {
+      inputTokens,
+      outputTokens,
+      reasoningTokens,
+      cacheReadTokens,
+      cacheWrite5mTokens,
+      cacheWrite1hTokens,
+    } = providerInfo.normalizeUsage(usage)

    const modelCost =
      modelInfo.cost200K &&
-      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) > 200_000
+      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) >
+        200_000
        ? modelInfo.cost200K
        : modelInfo.cost

@@ -420,7 +462,8 @@ export async function handler(

    if (!authInfo) return

-    const cost = authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
+    const cost =
+      authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
    await Database.transaction(async (tx) => {
      await tx.insert(UsageTable).values({
        workspaceID: authInfo.workspaceID,
@@ -460,7 +503,9 @@ export async function handler(
            `,
          timeMonthlyUsageUpdated: sql`now()`,
        })
-        .where(and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)))
+        .where(
+          and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)),
+        )
    })

    await Database.use((tx) =>
@@ -487,7 +532,10 @@ export async function handler(
            eq(BillingTable.workspaceID, authInfo.workspaceID),
            eq(BillingTable.reload, true),
            lt(BillingTable.balance, centsToMicroCents(Billing.CHARGE_THRESHOLD)),
-            or(isNull(BillingTable.timeReloadLockedTill), lt(BillingTable.timeReloadLockedTill, sql`now()`)),
+            or(
+              isNull(BillingTable.timeReloadLockedTill),
+              lt(BillingTable.timeReloadLockedTill, sql`now()`),
+            ),
          ),
        ),
    )
@@ -188,6 +188,7 @@ export function fromAnthropicRequest(body: any): CommonRequest {
  })()

  return {
+    model: body.model,
    max_tokens: body.max_tokens,
    temperature: body.temperature,
    top_p: body.top_p,
@@ -114,6 +114,7 @@ export function fromOaCompatibleRequest(body: any): CommonRequest {
  }

  return {
+    model: body.model,
    max_tokens: body.max_tokens,
    temperature: body.temperature,
    top_p: body.top_p,
@@ -177,6 +177,7 @@ export function fromOpenaiRequest(body: any): CommonRequest {
  })()

  return {
+    model: body.model,
    max_tokens: body.max_output_tokens ?? body.max_tokens,
    temperature: body.temperature,
    top_p: body.top_p,
@@ -310,7 +311,7 @@ export function toOpenaiRequest(body: CommonRequest) {
    metadata: (body as any).metadata,
    store: (body as any).store,
    user: (body as any).user,
-    text: { verbosity: "low" },
+    text: { verbosity: body.model === "gpt-5-codex" ? "medium" : "low" },
    reasoning: { effort: "medium" },
  }
 }
@@ -95,7 +95,7 @@ export interface CommonUsage {
 }

 export interface CommonRequest {
-  model?: string
+  model: string
  max_tokens?: number
  temperature?: number
  top_p?: number
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -0,0 +1,33 @@
+import { Database, eq } from "../src/drizzle/index.js"
+import { AuthTable } from "../src/schema/auth.sql"
+
+// get input from command line
+const email = process.argv[2]
+if (!email) {
+  console.error("Usage: bun lookup-user.ts <email>")
+  process.exit(1)
+}
+
+const authData = await printTable("Auth", (tx) =>
+  tx.select().from(AuthTable).where(eq(AuthTable.subject, email)),
+)
+if (authData.length === 0) {
+  console.error("User not found")
+  process.exit(1)
+}
+
+await printTable("Auth", (tx) =>
+  tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)),
+)
+
+function printTable(
+  title: string,
+  callback: (tx: Database.TxOrDb) => Promise<any[]>,
+): Promise<any[]> {
+  return Database.use(async (tx) => {
+    const data = await callback(tx)
+    console.log(`== ${title} ==`)
+    console.table(data)
+    return data
+  })
+}
@@ -1,13 +1,21 @@
 import { Resource } from "@opencode-ai/console-resource"
-import { Database } from "@opencode-ai/console-core/drizzle/index.js"
-import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
-import { AccountTable } from "@opencode-ai/console-core/schema/account.sql.js"
-import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
-import { BillingTable, PaymentTable, UsageTable } from "@opencode-ai/console-core/schema/billing.sql.js"
-import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js"
+import { Database } from "../src/drizzle/index.js"
+import { UserTable } from "../src/schema/user.sql.js"
+import { AccountTable } from "../src/schema/account.sql.js"
+import { WorkspaceTable } from "../src/schema/workspace.sql.js"
+import { BillingTable, PaymentTable, UsageTable } from "../src/schema/billing.sql.js"
+import { KeyTable } from "../src/schema/key.sql.js"

 if (Resource.App.stage !== "frank") throw new Error("This script is only for frank")

-for (const table of [AccountTable, BillingTable, KeyTable, PaymentTable, UsageTable, UserTable, WorkspaceTable]) {
+for (const table of [
+  AccountTable,
+  BillingTable,
+  KeyTable,
+  PaymentTable,
+  UsageTable,
+  UserTable,
+  WorkspaceTable,
+]) {
  await Database.use((tx) => tx.delete(table))
 }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,9 +1,10 @@
 {
  "name": "@opencode-ai/desktop",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "description": "",
  "type": "module",
  "scripts": {
+    "typecheck": "tsgo --noEmit",
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
@@ -11,7 +12,6 @@
  },
  "license": "MIT",
  "devDependencies": {
-    "opencode": "workspace:*",
    "@tailwindcss/vite": "catalog:",
    "@tsconfig/bun": "1.0.9",
    "@types/luxon": "3.7.1",
@@ -26,7 +26,6 @@
    "@kobalte/core": "catalog:",
    "@opencode-ai/sdk": "workspace:*",
    "@opencode-ai/ui": "workspace:*",
-    "@pierre/precision-diffs": "catalog:",
    "@shikijs/transformers": "3.9.2",
    "@solid-primitives/active-element": "2.1.3",
    "@solid-primitives/event-bus": "1.1.2",
@@ -2,7 +2,7 @@ import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "s
 import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
 import { useLocal, type TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
-import { useShiki } from "@/context/shiki"
+import { useShiki } from "@opencode-ai/ui"

 type DefinedSelection = Exclude<TextSelection, undefined>

@@ -1,20 +0,0 @@
-import { FileDiff } from "@opencode-ai/sdk"
-import { createMemo, Show } from "solid-js"
-
-export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
-  const additions = createMemo(() =>
-    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) : props.diff.additions,
-  )
-  const deletions = createMemo(() =>
-    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) : props.diff.deletions,
-  )
-  const total = createMemo(() => additions() + deletions())
-  return (
-    <Show when={total() > 0}>
-      <div class="flex gap-2 justify-end items-center">
-        <span class="text-12-mono text-right text-text-diff-add-base">{`+${additions()}`}</span>
-        <span class="text-12-mono text-right text-text-diff-delete-base">{`-${deletions()}`}</span>
-      </div>
-    </Show>
-  )
-}
@@ -1,23 +0,0 @@
-import { useMarked } from "@/context/marked"
-import { createResource } from "solid-js"
-
-function strip(text: string): string {
-  const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
-  const match = text.match(wrappedRe)
-  return match ? match[2] : text
-}
-export function Markdown(props: { text: string; class?: string }) {
-  const marked = useMarked()
-  const [html] = createResource(
-    () => strip(props.text),
-    async (markdown) => {
-      return marked.parse(markdown)
-    },
-  )
-  return (
-    <div
-      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
-      innerHTML={html()}
-    />
-  )
-}
@@ -1,459 +0,0 @@
-import type { Part, ReasoningPart, TextPart, ToolPart, Message, AssistantMessage, UserMessage } from "@opencode-ai/sdk"
-import { children, Component, createMemo, For, Match, Show, Switch, type JSX } from "solid-js"
-import { Dynamic } from "solid-js/web"
-import { Markdown } from "./markdown"
-import { Checkbox, Collapsible, Diff, Icon, IconProps } from "@opencode-ai/ui"
-import { getDirectory, getFilename } from "@/utils"
-import type { Tool } from "opencode/tool/tool"
-import type { ReadTool } from "opencode/tool/read"
-import type { ListTool } from "opencode/tool/ls"
-import type { GlobTool } from "opencode/tool/glob"
-import type { GrepTool } from "opencode/tool/grep"
-import type { WebFetchTool } from "opencode/tool/webfetch"
-import type { TaskTool } from "opencode/tool/task"
-import type { BashTool } from "opencode/tool/bash"
-import type { EditTool } from "opencode/tool/edit"
-import type { WriteTool } from "opencode/tool/write"
-import type { TodoWriteTool } from "opencode/tool/todo"
-import { DiffChanges } from "./diff-changes"
-
-export function Message(props: { message: Message; parts: Part[] }) {
-  return (
-    <Switch>
-      <Match when={props.message.role === "user" && props.message}>
-        {(userMessage) => <UserMessage message={userMessage()} parts={props.parts} />}
-      </Match>
-      <Match when={props.message.role === "assistant" && props.message}>
-        {(assistantMessage) => <AssistantMessage message={assistantMessage()} parts={props.parts} />}
-      </Match>
-    </Switch>
-  )
-}
-
-function AssistantMessage(props: { message: AssistantMessage; parts: Part[] }) {
-  const filteredParts = createMemo(() => {
-    return props.parts?.filter((x) => {
-      if (x.type === "reasoning") return false
-      return x.type !== "tool" || x.tool !== "todoread"
-    })
-  })
-  return (
-    <div class="w-full flex flex-col items-start gap-4">
-      <For each={filteredParts()}>{(part) => <Part part={part} message={props.message} />}</For>
-    </div>
-  )
-}
-
-function UserMessage(props: { message: UserMessage; parts: Part[] }) {
-  const text = createMemo(() =>
-    props.parts
-      ?.filter((p) => p.type === "text" && !p.synthetic)
-      ?.map((p) => (p as TextPart).text)
-      ?.join(""),
-  )
-  return <div class="text-12-regular text-text-base line-clamp-3">{text()}</div>
-}
-
-export function Part(props: { part: Part; message: Message; hideDetails?: boolean }) {
-  const component = createMemo(() => PART_MAPPING[props.part.type as keyof typeof PART_MAPPING])
-  return (
-    <Show when={component()}>
-      <Dynamic
-        component={component()}
-        part={props.part as any}
-        message={props.message}
-        hideDetails={props.hideDetails}
-      />
-    </Show>
-  )
-}
-
-const PART_MAPPING = {
-  text: TextPart,
-  tool: ToolPart,
-  reasoning: ReasoningPart,
-}
-
-function ReasoningPart(props: { part: ReasoningPart; message: Message }) {
-  return (
-    <Show when={props.part.text.trim()}>
-      <Markdown text={props.part.text.trim()} />
-    </Show>
-  )
-}
-
-function TextPart(props: { part: TextPart; message: Message }) {
-  return (
-    <Show when={props.part.text.trim()}>
-      <Markdown text={props.part.text.trim()} />
-    </Show>
-  )
-}
-
-function ToolPart(props: { part: ToolPart; message: Message; hideDetails?: boolean }) {
-  const component = createMemo(() => {
-    const render = ToolRegistry.render(props.part.tool) ?? GenericTool
-    const metadata = props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
-    const input = props.part.state.status === "completed" ? props.part.state.input : {}
-
-    return (
-      <Dynamic
-        component={render}
-        input={input}
-        tool={props.part.tool}
-        metadata={metadata}
-        output={props.part.state.status === "completed" ? props.part.state.output : undefined}
-        hideDetails={props.hideDetails}
-      />
-    )
-  })
-
-  return <Show when={component()}>{component()}</Show>
-}
-
-type TriggerTitle = {
-  title: string
-  titleClass?: string
-  subtitle?: string
-  subtitleClass?: string
-  args?: string[]
-  argsClass?: string
-  action?: JSX.Element
-}
-
-const isTriggerTitle = (val: any): val is TriggerTitle => {
-  return typeof val === "object" && val !== null && "title" in val && !(val instanceof Node)
-}
-
-function BasicTool(props: {
-  icon: IconProps["name"]
-  trigger: TriggerTitle | JSX.Element
-  children?: JSX.Element
-  hideDetails?: boolean
-}) {
-  const resolved = children(() => props.children)
-  return (
-    <Collapsible>
-      <Collapsible.Trigger>
-        <div class="w-full flex items-center self-stretch gap-5 justify-between">
-          <div class="w-full flex items-center self-stretch gap-5">
-            <Icon name={props.icon} size="small" class="shrink-0" />
-            <div class="grow min-w-0">
-              <Switch>
-                <Match when={isTriggerTitle(props.trigger) && props.trigger}>
-                  {(trigger) => (
-                    <div class="w-full flex items-center gap-2 justify-between">
-                      <div class="flex items-center gap-2 whitespace-nowrap truncate">
-                        <span
-                          classList={{
-                            "text-12-medium text-text-base": true,
-                            [trigger().titleClass ?? ""]: !!trigger().titleClass,
-                          }}
-                        >
-                          {trigger().title}
-                        </span>
-                        <Show when={trigger().subtitle}>
-                          <span
-                            classList={{
-                              "text-12-medium text-text-weak": true,
-                              [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
-                            }}
-                          >
-                            {trigger().subtitle}
-                          </span>
-                        </Show>
-                        <Show when={trigger().args?.length}>
-                          <For each={trigger().args}>
-                            {(arg) => (
-                              <span
-                                classList={{
-                                  "text-12-regular text-text-weak": true,
-                                  [trigger().argsClass ?? ""]: !!trigger().argsClass,
-                                }}
-                              >
-                                {arg}
-                              </span>
-                            )}
-                          </For>
-                        </Show>
-                      </div>
-                      <Show when={trigger().action}>{trigger().action}</Show>
-                    </div>
-                  )}
-                </Match>
-                <Match when={true}>{props.trigger as JSX.Element}</Match>
-              </Switch>
-            </div>
-          </div>
-          <Show when={resolved() && !props.hideDetails}>
-            <Collapsible.Arrow />
-          </Show>
-        </div>
-      </Collapsible.Trigger>
-      <Show when={resolved() && !props.hideDetails}>
-        <Collapsible.Content>{resolved()}</Collapsible.Content>
-      </Show>
-    </Collapsible>
-    // <>
-    //   <Show when={props.part.state.status === "error"}>{props.part.state.error.replace("Error: ", "")}</Show>
-    // </>
-  )
-}
-
-function GenericTool(props: ToolProps<any>) {
-  return <BasicTool icon="mcp" trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
-}
-
-type ToolProps<T extends Tool.Info> = {
-  input: Partial<Tool.InferParameters<T>>
-  metadata: Partial<Tool.InferMetadata<T>>
-  tool: string
-  output?: string
-  hideDetails?: boolean
-}
-
-const ToolRegistry = (() => {
-  const state: Record<
-    string,
-    {
-      name: string
-      render?: Component<ToolProps<any>>
-    }
-  > = {}
-  function register<T extends Tool.Info>(input: { name: string; render?: Component<ToolProps<T>> }) {
-    state[input.name] = input
-    return input
-  }
-  return {
-    register,
-    render(name: string) {
-      return state[name]?.render
-    },
-  }
-})()
-
-ToolRegistry.register<typeof ReadTool>({
-  name: "read",
-  render(props) {
-    return (
-      <BasicTool
-        icon="glasses"
-        trigger={{ title: "Read", subtitle: props.input.filePath ? getFilename(props.input.filePath) : "" }}
-      />
-    )
-  },
-})
-
-ToolRegistry.register<typeof ListTool>({
-  name: "list",
-  render(props) {
-    return (
-      <BasicTool icon="bullet-list" trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}>
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof GlobTool>({
-  name: "glob",
-  render(props) {
-    return (
-      <BasicTool
-        icon="magnifying-glass-menu"
-        trigger={{
-          title: "Glob",
-          subtitle: getDirectory(props.input.path || "/"),
-          args: props.input.pattern ? ["pattern=" + props.input.pattern] : [],
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof GrepTool>({
-  name: "grep",
-  render(props) {
-    const args = []
-    if (props.input.pattern) args.push("pattern=" + props.input.pattern)
-    if (props.input.include) args.push("include=" + props.input.include)
-    return (
-      <BasicTool
-        icon="magnifying-glass-menu"
-        trigger={{
-          title: "Grep",
-          subtitle: getDirectory(props.input.path || "/"),
-          args,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof WebFetchTool>({
-  name: "webfetch",
-  render(props) {
-    return (
-      <BasicTool
-        icon="window-cursor"
-        trigger={{
-          title: "Webfetch",
-          subtitle: props.input.url || "",
-          args: props.input.format ? ["format=" + props.input.format] : [],
-          action: (
-            <div class="size-6 flex items-center justify-center">
-              <Icon name="square-arrow-top-right" size="small" />
-            </div>
-          ),
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof TaskTool>({
-  name: "task",
-  render(props) {
-    return (
-      <BasicTool
-        icon="task"
-        trigger={{
-          title: `${props.input.subagent_type || props.tool} Agent`,
-          titleClass: "capitalize",
-          subtitle: props.input.description,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof BashTool>({
-  name: "bash",
-  render(props) {
-    return (
-      <BasicTool
-        icon="console"
-        trigger={{
-          title: "Shell",
-          subtitle: "Ran " + props.input.command,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof EditTool>({
-  name: "edit",
-  render(props) {
-    return (
-      <BasicTool
-        icon="code-lines"
-        trigger={
-          <div class="flex items-center justify-between w-full">
-            <div class="flex items-center gap-2">
-              <div class="text-12-medium text-text-base capitalize">Edit</div>
-              <div class="flex">
-                <Show when={props.input.filePath?.includes("/")}>
-                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}</span>
-                </Show>
-                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
-              </div>
-            </div>
-            <div class="flex gap-4 items-center justify-end">
-              <Show when={props.metadata.filediff}>
-                <DiffChanges diff={props.metadata.filediff} />
-              </Show>
-            </div>
-          </div>
-        }
-      >
-        <Show when={props.metadata.filediff}>
-          <div class="border-t border-border-weaker-base">
-            <Diff
-              before={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.before }}
-              after={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.after }}
-            />
-          </div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof WriteTool>({
-  name: "write",
-  render(props) {
-    return (
-      <BasicTool
-        icon="code-lines"
-        trigger={
-          <div class="flex items-center justify-between w-full">
-            <div class="flex items-center gap-2">
-              <div class="text-12-medium text-text-base capitalize">Write</div>
-              <div class="flex">
-                <Show when={props.input.filePath?.includes("/")}>
-                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}</span>
-                </Show>
-                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
-              </div>
-            </div>
-            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
-          </div>
-        }
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof TodoWriteTool>({
-  name: "todowrite",
-  render(props) {
-    return (
-      <BasicTool
-        icon="checklist"
-        trigger={{
-          title: "To-dos",
-          subtitle: `${props.input.todos?.filter((t) => t.status === "completed").length}/${props.input.todos?.length}`,
-        }}
-      >
-        <Show when={props.input.todos?.length}>
-          <div class="px-12 pt-2.5 pb-6 flex flex-col gap-2">
-            <For each={props.input.todos}>
-              {(todo) => (
-                <Checkbox readOnly checked={todo.status === "completed"}>
-                  <div classList={{ "line-through text-text-weaker": todo.status === "completed" }}>{todo.content}</div>
-                </Checkbox>
-              )}
-            </For>
-          </div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
@@ -1,48 +0,0 @@
-import { Component, createMemo } from "solid-js"
-
-interface ProgressCircleProps {
-  percentage: number
-  size?: number
-  strokeWidth?: number
-}
-
-export const ProgressCircle: Component<ProgressCircleProps> = (props) => {
-  // --- Set default values for props ---
-  const size = () => props.size || 16
-  const strokeWidth = () => props.strokeWidth || 3
-
-  // --- Constants for SVG calculation ---
-  const viewBoxSize = 16
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-
-  // --- Reactive Calculation for the progress offset ---
-  const offset = createMemo(() => {
-    const clampedPercentage = Math.max(0, Math.min(100, props.percentage || 0))
-    const progress = clampedPercentage / 100
-    return circumference() * (1 - progress)
-  })
-
-  return (
-    <svg
-      width={size()}
-      height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      fill="none"
-      class="transform -rotate-90"
-    >
-      <circle cx={center} cy={center} r={radius()} class="stroke-border-weak-base" stroke-width={strokeWidth()} />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        class="stroke-border-active"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
-        style={{ transition: "stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1)" }}
-      />
-    </svg>
-  )
-}
@@ -71,7 +71,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    }
  })

-  const { flat, active, onInput, onKeyDown } = useFilteredList<string>({
+  const { flat, active, onInput, onKeyDown, refetch } = useFilteredList<string>({
    items: local.file.search,
    key: (x) => x,
    onSelect: (path) => {
@@ -81,6 +81,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    },
  })

+  createEffect(() => {
+    local.model.recent()
+    refetch()
+  })
+
  createEffect(
    on(
      () => store.contentParts,
@@ -369,16 +374,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
              items={local.model.list()}
              current={local.model.current()}
              filterKeys={["provider.name", "name", "id"]}
-              groupBy={(x) => x.provider.name}
+              groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
              sortGroupsBy={(a, b) => {
                const order = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"]
+                if (a.category === "Recent" && b.category !== "Recent") return -1
+                if (b.category === "Recent" && a.category !== "Recent") return 1
                const aProvider = a.items[0].provider.id
                const bProvider = b.items[0].provider.id
                if (order.includes(aProvider) && !order.includes(bProvider)) return -1
                if (!order.includes(aProvider) && order.includes(bProvider)) return 1
                return order.indexOf(aProvider) - order.indexOf(bProvider)
              }}
-              onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
+              onSelect={(x) =>
+                local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true })
+              }
              trigger={
                <Button as="div" variant="ghost">
                  {local.model.current()?.name ?? "Select model"}
@@ -1,536 +0,0 @@
-import { Icon, Tooltip } from "@opencode-ai/ui"
-import { Collapsible } from "@/ui"
-import type { AssistantMessage, Message, Part, ToolPart } from "@opencode-ai/sdk"
-import { DateTime } from "luxon"
-import {
-  createSignal,
-  For,
-  Match,
-  splitProps,
-  Switch,
-  type ComponentProps,
-  type ParentProps,
-  createEffect,
-  createMemo,
-  Show,
-} from "solid-js"
-import { getFilename } from "@/utils"
-import { Markdown } from "./markdown"
-import { Code } from "./code"
-import { createElementSize } from "@solid-primitives/resize-observer"
-import { createScrollPosition } from "@solid-primitives/scroll"
-import { ProgressCircle } from "./progress-circle"
-import { pipe, sumBy } from "remeda"
-import { useSync } from "@/context/sync"
-import { useLocal } from "@/context/local"
-
-function Part(props: ParentProps & ComponentProps<"div">) {
-  const [local, others] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <div
-      classList={{
-        ...(local.classList ?? {}),
-        "h-6 flex items-center": true,
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    >
-      <p class="text-12-medium text-left">{local.children}</p>
-    </div>
-  )
-}
-
-function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps & ComponentProps<typeof Collapsible>) {
-  return (
-    <Collapsible {...props}>
-      <Collapsible.Trigger class="peer/collapsible">
-        <Part>{props.title}</Part>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <p class="flex-auto min-w-0 text-pretty">
-          <span class="text-12-medium text-text-weak break-words">{props.children}</span>
-        </p>
-      </Collapsible.Content>
-    </Collapsible>
-  )
-}
-
-function ReadToolPart(props: { part: ToolPart }) {
-  const sync = useSync()
-  const local = useLocal()
-  return (
-    <Switch>
-      <Match when={props.part.state.status === "pending"}>
-        <Part>Reading file...</Part>
-      </Match>
-      <Match when={props.part.state.status === "completed" && props.part.state}>
-        {(state) => {
-          const path = state().input["filePath"] as string
-          return (
-            <Part onClick={() => local.file.open(path)}>
-              <span class="">Read</span> {getFilename(path)}
-            </Part>
-          )
-        }}
-      </Match>
-      <Match when={props.part.state.status === "error" && props.part.state}>
-        {(state) => (
-          <div>
-            <Part>
-              <span class="">Read</span> {getFilename(state().input["filePath"] as string)}
-            </Part>
-            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
-          </div>
-        )}
-      </Match>
-    </Switch>
-  )
-}
-
-function EditToolPart(props: { part: ToolPart }) {
-  const sync = useSync()
-  return (
-    <Switch>
-      <Match when={props.part.state.status === "pending"}>
-        <Part>Preparing edit...</Part>
-      </Match>
-      <Match when={props.part.state.status === "completed" && props.part.state}>
-        {(state) => (
-          <CollapsiblePart
-            title={
-              <>
-                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
-              </>
-            }
-          >
-            <Code path={state().input["filePath"] as string} code={state().metadata["diff"] as string} />
-          </CollapsiblePart>
-        )}
-      </Match>
-      <Match when={props.part.state.status === "error" && props.part.state}>
-        {(state) => (
-          <CollapsiblePart
-            title={
-              <>
-                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
-              </>
-            }
-          >
-            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
-          </CollapsiblePart>
-        )}
-      </Match>
-    </Switch>
-  )
-}
-
-function WriteToolPart(props: { part: ToolPart }) {
-  const sync = useSync()
-  return (
-    <Switch>
-      <Match when={props.part.state.status === "pending"}>
-        <Part>Preparing write...</Part>
-      </Match>
-      <Match when={props.part.state.status === "completed" && props.part.state}>
-        {(state) => (
-          <CollapsiblePart
-            title={
-              <>
-                <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
-              </>
-            }
-          >
-            <div class="p-2 bg-background-panel rounded-md border border-border-subtle"></div>
-          </CollapsiblePart>
-        )}
-      </Match>
-      <Match when={props.part.state.status === "error" && props.part.state}>
-        {(state) => (
-          <div>
-            <Part>
-              <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
-            </Part>
-            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
-          </div>
-        )}
-      </Match>
-    </Switch>
-  )
-}
-
-function BashToolPart(props: { part: ToolPart }) {
-  const sync = useSync()
-  return (
-    <Switch>
-      <Match when={props.part.state.status === "pending"}>
-        <Part>Writing shell command...</Part>
-      </Match>
-      <Match when={props.part.state.status === "completed" && props.part.state}>
-        {(state) => (
-          <CollapsiblePart
-            defaultOpen
-            title={
-              <>
-                <span class="">Run command:</span> {state().input["command"]}
-              </>
-            }
-          >
-            <Markdown text={`\`\`\`command\n${state().input["command"]}\n${state().output}\`\`\``} />
-          </CollapsiblePart>
-        )}
-      </Match>
-      <Match when={props.part.state.status === "error" && props.part.state}>
-        {(state) => (
-          <CollapsiblePart
-            title={
-              <>
-                <span class="">Shell</span> {state().input["command"]}
-              </>
-            }
-          >
-            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
-          </CollapsiblePart>
-        )}
-      </Match>
-    </Switch>
-  )
-}
-
-function ToolPart(props: { part: ToolPart }) {
-  // read
-  // edit
-  // write
-  // bash
-  // ls
-  // glob
-  // grep
-  // todowrite
-  // todoread
-  // webfetch
-  // websearch
-  // patch
-  // task
-  return (
-    <div class="min-w-0 flex-auto text-12-medium">
-      <Switch
-        fallback={
-          <span>
-            {props.part.type}:{props.part.tool}
-          </span>
-        }
-      >
-        <Match when={props.part.tool === "read"}>
-          <ReadToolPart part={props.part} />
-        </Match>
-        <Match when={props.part.tool === "edit"}>
-          <EditToolPart part={props.part} />
-        </Match>
-        <Match when={props.part.tool === "write"}>
-          <WriteToolPart part={props.part} />
-        </Match>
-        <Match when={props.part.tool === "bash"}>
-          <BashToolPart part={props.part} />
-        </Match>
-      </Switch>
-    </div>
-  )
-}
-
-export default function SessionTimeline(props: { session: string; class?: string }) {
-  const sync = useSync()
-  const [scrollElement, setScrollElement] = createSignal<HTMLElement | undefined>(undefined)
-  const [root, setRoot] = createSignal<HTMLDivElement | undefined>(undefined)
-  const [tail, setTail] = createSignal(true)
-  const size = createElementSize(root)
-  const scroll = createScrollPosition(scrollElement)
-
-  const valid = (part: Part) => {
-    if (!part) return false
-    switch (part.type) {
-      case "step-start":
-      case "step-finish":
-      case "file":
-      case "patch":
-        return false
-      case "text":
-        return !part.synthetic && part.text.trim()
-      case "reasoning":
-        return part.text.trim()
-      case "tool":
-        switch (part.tool) {
-          case "todoread":
-          case "todowrite":
-          case "list":
-          case "grep":
-            return false
-        }
-        return true
-      default:
-        return true
-    }
-  }
-
-  const hasValidParts = (message: Message) => {
-    return sync.data.part[message.id]?.filter(valid).length > 0
-  }
-
-  const hasTextPart = (message: Message) => {
-    return !!sync.data.part[message.id]?.filter(valid).find((p) => p.type === "text")
-  }
-
-  const session = createMemo(() => sync.session.get(props.session))
-  const messages = createMemo(() => sync.data.message[props.session] ?? [])
-  const messagesWithValidParts = createMemo(() => sync.data.message[props.session]?.filter(hasValidParts) ?? [])
-  const working = createMemo(() => {
-    const last = messages()[messages().length - 1]
-    if (!last) return false
-    if (last.role === "user") return true
-    return !last.time.completed
-  })
-
-  const cost = createMemo(() => {
-    const total = pipe(
-      messages(),
-      sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
-    )
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(total)
-  })
-
-  const last = createMemo(() => {
-    return messages().findLast((x) => x.role === "assistant") as AssistantMessage
-  })
-
-  const model = createMemo(() => {
-    if (!last()) return
-    const model = sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID]
-    return model
-  })
-
-  const tokens = createMemo(() => {
-    if (!last()) return
-    const tokens = last().tokens
-    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
-    return new Intl.NumberFormat("en-US", {
-      notation: "compact",
-      compactDisplay: "short",
-    }).format(total)
-  })
-
-  const context = createMemo(() => {
-    if (!last()) return
-    if (!model()?.limit.context) return 0
-    const tokens = last().tokens
-    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
-    return Math.round((total / model()!.limit.context) * 100)
-  })
-
-  const getScrollParent = (el: HTMLElement | null): HTMLElement | undefined => {
-    let p = el?.parentElement
-    while (p && p !== document.body) {
-      const s = getComputedStyle(p)
-      if (s.overflowY === "auto" || s.overflowY === "scroll") return p
-      p = p.parentElement
-    }
-    return undefined
-  }
-
-  createEffect(() => {
-    if (!root()) return
-    setScrollElement(getScrollParent(root()!))
-  })
-
-  const scrollToBottom = () => {
-    const element = scrollElement()
-    if (!element) return
-    element.scrollTop = element.scrollHeight
-  }
-
-  createEffect(() => {
-    size.height
-    if (tail()) scrollToBottom()
-  })
-
-  createEffect(() => {
-    if (working()) {
-      setTail(true)
-      scrollToBottom()
-    }
-  })
-
-  let lastScrollY = 0
-  createEffect(() => {
-    if (scroll.y < lastScrollY) {
-      setTail(false)
-    }
-    lastScrollY = scroll.y
-  })
-
-  const duration = (part: Part) => {
-    switch (part.type) {
-      default:
-        if (
-          "time" in part &&
-          part.time &&
-          "start" in part.time &&
-          part.time.start &&
-          "end" in part.time &&
-          part.time.end
-        ) {
-          const start = DateTime.fromMillis(part.time.start)
-          const end = DateTime.fromMillis(part.time.end)
-          return end.diff(start).toFormat("s")
-        }
-        return ""
-    }
-  }
-
-  createEffect(() => {
-    console.log("WHAT")
-    console.log(JSON.stringify(messagesWithValidParts()))
-  })
-
-  return (
-    <div
-      ref={setRoot}
-      classList={{
-        "select-text flex flex-col text-text-weak": true,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      <div class="flex justify-end items-center self-stretch">
-        <div class="flex items-center gap-6">
-          <Tooltip value={`${tokens()} Tokens`} class="flex items-center gap-1.5">
-            <Show when={context()}>
-              <ProgressCircle percentage={context()!} />
-            </Show>
-            <div class="text-14-regular text-text-weak text-right">{context()}%</div>
-          </Tooltip>
-          <div class="text-14-regular text-text-strong text-right">{cost()}</div>
-        </div>
-      </div>
-      <ul role="list" class="flex flex-col items-start self-stretch">
-        <For each={messagesWithValidParts()}>
-          {(message) => (
-            <div
-              classList={{
-                "flex flex-col gap-1 justify-center items-start self-stretch": true,
-                "mt-6": hasTextPart(message),
-              }}
-            >
-              <For each={sync.data.part[message.id]?.filter(valid) ?? []}>
-                {(part) => (
-                  <li class="group/li">
-                    <Switch fallback={<div class="">{part.type}</div>}>
-                      <Match when={part.type === "text" && part}>
-                        {(part) => (
-                          <Switch>
-                            <Match when={message.role === "user"}>
-                              <div class="w-fit flex items-center px-3 py-1 rounded-md bg-surface-weak">
-                                <span class="text-14-regular text-text-strong whitespace-pre-wrap break-words">
-                                  {part().text}
-                                </span>
-                              </div>
-                            </Match>
-                            <Match when={message.role === "assistant"}>
-                              <Markdown text={sync.sanitize(part().text)} />
-                            </Match>
-                          </Switch>
-                        )}
-                      </Match>
-                      <Match when={part.type === "reasoning" && part}>
-                        {(part) => (
-                          <CollapsiblePart
-                            title={
-                              <Switch fallback={<span class="text-text-weak">Thinking</span>}>
-                                <Match when={part().time.end}>
-                                  <span class="text-12-medium text-text-weak">Thought</span> for {duration(part())}s
-                                </Match>
-                              </Switch>
-                            }
-                          >
-                            <Markdown text={part().text} />
-                          </CollapsiblePart>
-                        )}
-                      </Match>
-                      <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
-                    </Switch>
-                  </li>
-                )}
-              </For>
-            </div>
-          )}
-        </For>
-      </ul>
-      <Show when={false}>
-        <Collapsible defaultOpen={false}>
-          <Collapsible.Trigger>
-            <div class="mt-12 ml-1 flex items-center gap-x-2 text-xs text-text-muted">
-              <Icon name="file-code" />
-              <span>Raw Session Data</span>
-              <Collapsible.Arrow class="text-text-muted" />
-            </div>
-          </Collapsible.Trigger>
-          <Collapsible.Content class="mt-5">
-            <ul role="list" class="space-y-2">
-              <li>
-                <Collapsible>
-                  <Collapsible.Trigger>
-                    <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                      <Icon name="file-code" />
-                      <span>session</span>
-                      <Collapsible.Arrow class="text-text-muted" />
-                    </div>
-                  </Collapsible.Trigger>
-                  <Collapsible.Content>
-                    <Code path="session.json" code={JSON.stringify(session(), null, 2)} />
-                  </Collapsible.Content>
-                </Collapsible>
-              </li>
-              <For each={messages()}>
-                {(message) => (
-                  <>
-                    <li>
-                      <Collapsible>
-                        <Collapsible.Trigger>
-                          <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                            <Icon name="file-code" />
-                            <span>{message.role === "user" ? "user" : "assistant"}</span>
-                            <Collapsible.Arrow class="text-text-muted" />
-                          </div>
-                        </Collapsible.Trigger>
-                        <Collapsible.Content>
-                          <Code path={message.id + ".json"} code={JSON.stringify(message, null, 2)} />
-                        </Collapsible.Content>
-                      </Collapsible>
-                    </li>
-                    <For each={sync.data.part[message.id]}>
-                      {(part) => (
-                        <li>
-                          <Collapsible>
-                            <Collapsible.Trigger>
-                              <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                                <Icon name="file-code" />
-                                <span>{part.type}</span>
-                                <Collapsible.Arrow class="text-text-muted" />
-                              </div>
-                            </Collapsible.Trigger>
-                            <Collapsible.Content>
-                              <Code path={message.id + "." + part.id + ".json"} code={JSON.stringify(part, null, 2)} />
-                            </Collapsible.Content>
-                          </Collapsible>
-                        </li>
-                      )}
-                    </For>
-                  </>
-                )}
-              </For>
-            </ul>
-          </Collapsible.Content>
-        </Collapsible>
-      </Show>
-    </div>
-  )
-}
@@ -45,6 +45,37 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    const sdk = useSDK()
    const sync = useSync()

+    function isModelValid(model: ModelKey) {
+      const provider = sync.data.provider.find((x) => x.id === model.providerID)
+      return !!provider?.models[model.modelID]
+    }
+
+    function getFirstValidModel(...modelFns: (() => ModelKey | undefined)[]) {
+      for (const modelFn of modelFns) {
+        const model = modelFn()
+        if (!model) continue
+        if (isModelValid(model)) return model
+      }
+    }
+
+    // Automatically update model when agent changes
+    createEffect(() => {
+      const value = agent.current()
+      if (value.model) {
+        if (isModelValid(value.model))
+          model.set({
+            providerID: value.model.providerID,
+            modelID: value.model.modelID,
+          })
+        // else
+        //   toast.show({
+        //     type: "warning",
+        //     message: `Agent ${value.name}'s configured model ${value.model.providerID}/${value.model.modelID} is not valid`,
+        //     duration: 3000,
+        //   })
+      }
+    })
+
    const agent = (() => {
      const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent"))
      const [store, setStore] = createStore<{
@@ -76,11 +107,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    })()

    const model = (() => {
-      const list = createMemo(() =>
-        sync.data.provider.flatMap((p) => Object.values(p.models).map((m) => ({ ...m, provider: p }) as LocalModel)),
-      )
-      const find = (key: ModelKey) => list().find((m) => m.id === key?.modelID && m.provider.id === key.providerID)
-
      const [store, setStore] = createStore<{
        model: Record<string, ModelKey>
        recent: ModelKey[]
@@ -95,27 +121,54 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
        localStorage.setItem("model", JSON.stringify(store.recent))
      })

-      const fallback = createMemo(() => {
-        if (store.recent.length) return store.recent[0]
+      const list = createMemo(() =>
+        sync.data.provider.flatMap((p) => Object.values(p.models).map((m) => ({ ...m, provider: p }) as LocalModel)),
+      )
+      const find = (key: ModelKey) => list().find((m) => m.id === key?.modelID && m.provider.id === key.providerID)
+
+      const fallbackModel = createMemo(() => {
+        if (sync.data.config.model) {
+          const [providerID, modelID] = sync.data.config.model.split("/")
+          if (isModelValid({ providerID, modelID })) {
+            return {
+              providerID,
+              modelID,
+            }
+          }
+        }
+
+        for (const item of store.recent) {
+          if (isModelValid(item)) {
+            return item
+          }
+        }
        const provider = sync.data.provider[0]
        const model = Object.values(provider.models)[0]
-        return { modelID: model.id, providerID: provider.id }
+        return {
+          providerID: provider.id,
+          modelID: model.id,
+        }
      })

-      const current = createMemo(() => {
+      const currentModel = createMemo(() => {
        const a = agent.current()
-        return find(store.model[agent.current().name]) ?? find(a.model ?? fallback())
+        const key = getFirstValidModel(
+          () => store.model[a.name],
+          () => a.model,
+          fallbackModel,
+        )!
+        return find(key)
      })

      const recent = createMemo(() => store.recent.map(find).filter(Boolean))

      return {
-        list,
-        current,
+        current: currentModel,
        recent,
+        list,
        set(model: ModelKey | undefined, options?: { recent?: boolean }) {
          batch(() => {
-            setStore("model", agent.current().name, model ?? fallback())
+            setStore("model", agent.current().name, model ?? fallbackModel())
            if (options?.recent && model) {
              const uniq = uniqueBy([model, ...store.recent], (x) => x.providerID + x.modelID)
              if (uniq.length > 5) uniq.pop()
@@ -279,10 +332,10 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
            }
            break
          case "file.watcher.updated":
-            setTimeout(sync.load.changes, 1000)
-            const relativePath = relative(event.properties.file)
-            if (relativePath.startsWith(".git/")) return
-            load(relativePath)
+            // setTimeout(sync.load.changes, 1000)
+            // const relativePath = relative(event.properties.file)
+            // if (relativePath.startsWith(".git/")) return
+            // load(relativePath)
            break
        }
      })
@@ -480,8 +533,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
      const getMessageText = (message: Message | Message[] | undefined): string => {
        if (!message) return ""
        if (Array.isArray(message)) return message.map((m) => getMessageText(m)).join(" ")
-        const fileParts = sync.data.part[message.id]?.filter((p) => p.type === "file")
-
        return sync.data.part[message.id]
          ?.filter((p) => p.type === "text")
          ?.filter((p) => !p.synthetic)
@@ -77,21 +77,22 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
          break
        }
        case "message.part.updated": {
-          const parts = store.part[event.properties.part.messageID]
+          const part = sanitizePart(event.properties.part)
+          const parts = store.part[part.messageID]
          if (!parts) {
-            setStore("part", event.properties.part.messageID, [event.properties.part])
+            setStore("part", part.messageID, [part])
            break
          }
-          const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
+          const result = Binary.search(parts, part.id, (p) => p.id)
          if (result.found) {
-            setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
+            setStore("part", part.messageID, result.index, reconcile(part))
            break
          }
          setStore(
            "part",
-            event.properties.part.messageID,
+            part.messageID,
            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.part)
+              draft.splice(result.index, 0, part)
            }),
          )
          break
@@ -121,6 +122,23 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
    const sanitizer = createMemo(() => new RegExp(`${store.path.directory}/`, "g"))
    const sanitize = (text: string) => text.replace(sanitizer(), "")
    const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
+    const sanitizePart = (part: Part) => {
+      if (part.type === "tool") {
+        if (part.state.status === "completed") {
+          for (const key in part.state.metadata) {
+            if (typeof part.state.metadata[key] === "string") {
+              part.state.metadata[key] = sanitize(part.state.metadata[key] as string)
+            }
+          }
+          for (const key in part.state.input) {
+            if (typeof part.state.input[key] === "string") {
+              part.state.input[key] = sanitize(part.state.input[key] as string)
+            }
+          }
+        }
+      }
+      return part
+    }

    return {
      data: store,
@@ -155,7 +173,10 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
                .slice()
                .sort((a, b) => a.id.localeCompare(b.id))
              for (const message of messages.data!) {
-                draft.part[message.info.id] = message.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
+                draft.part[message.info.id] = message.parts
+                  .slice()
+                  .map(sanitizePart)
+                  .sort((a, b) => a.id.localeCompare(b.id))
              }
            }),
          )
@@ -3,9 +3,7 @@ import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
-import { Fonts } from "@opencode-ai/ui"
-import { ShikiProvider } from "./context/shiki"
-import { MarkedProvider } from "./context/marked"
+import { Fonts, ShikiProvider, MarkedProvider } from "@opencode-ai/ui"
 import { SDKProvider } from "./context/sdk"
 import { SyncProvider } from "./context/sync"
 import { LocalProvider } from "./context/local"
@@ -9,6 +9,10 @@ import {
  Accordion,
  Diff,
  Collapsible,
+  Part,
+  DiffChanges,
+  ProgressCircle,
+  Message,
 } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import FileTree from "@/components/file-tree"
@@ -32,10 +36,8 @@ import type { JSX } from "solid-js"
 import { Code } from "@/components/code"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
-import { ProgressCircle } from "@/components/progress-circle"
-import { Message, Part } from "@/components/message"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
-import { DiffChanges } from "@/components/diff-changes"
+import { Markdown } from "@opencode-ai/ui"

 export default function Page() {
  const local = useLocal()
@@ -270,7 +272,7 @@ export default function Page() {
  const TabVisual = (props: { file: LocalFile }): JSX.Element => {
    return (
      <div class="flex items-center gap-x-1.5">
-        <FileIcon node={props.file} class="_grayscale-100" />
+        <FileIcon node={props.file} class="grayscale-100 group-data-[selected]/tab:grayscale-0" />
        <span
          classList={{
            "text-14-medium": true,
@@ -309,15 +311,21 @@ export default function Page() {
      <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
        <Tooltip value={props.file.path} placement="bottom" class="h-full">
          <div class="relative h-full">
-            <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}>
+            <Tabs.Trigger
+              value={props.file.path}
+              class="group/tab pl-3 pr-1"
+              onClick={() => props.onTabClick(props.file)}
+            >
              <TabVisual file={props.file} />
+              <IconButton
+                icon="close"
+                class="mt-0.5 opacity-0 text-text-muted/60 group-data-[selected]/tab:opacity-100
+                       group-data-[selected]/tab:text-text group-data-[selected]/tab:hover:bg-border-subtle
+                       hover:opacity-100 group-hover/tab:opacity-100"
+                variant="ghost"
+                onClick={() => props.onTabClose(props.file)}
+              />
            </Tabs.Trigger>
-            <IconButton
-              icon="close"
-              class="absolute right-1 top-1.5 opacity-0 text-text-muted/60 peer-data-[selected]/tab:opacity-100 peer-data-[selected]/tab:text-text peer-data-[selected]/tab:hover:bg-border-subtle hover:opacity-100 peer-hover/tab:opacity-100"
-              variant="ghost"
-              onClick={() => props.onTabClose(props.file)}
-            />
          </div>
        </Tooltip>
      </div>
@@ -376,6 +384,7 @@ export default function Page() {
              {(session) => {
                const diffs = createMemo(() => session.summary?.diffs ?? [])
                const filesChanged = createMemo(() => diffs().length)
+                const updated = DateTime.fromMillis(session.time.updated)
                return (
                  <Tooltip placement="right" value={session.title}>
                    <div>
@@ -384,7 +393,14 @@ export default function Page() {
                          {session.title}
                        </span>
                        <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
-                          {DateTime.fromMillis(session.time.updated).toRelative()}
+                          {Math.abs(updated.diffNow().as("seconds")) < 60
+                            ? "Now"
+                            : updated
+                                .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
+                                ?.replace(" ago", "")
+                                ?.replace(/ days?/, "d")
+                                ?.replace(" min.", "m")
+                                ?.replace(" hr.", "h")}
                        </span>
                      </div>
                      <div class="flex justify-between items-center self-stretch">
@@ -491,12 +507,12 @@ export default function Page() {
                  </Show>
                </div>
              </div>
-              <Tabs.Content value="chat" class="select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
-                <div class="px-6 pt-12 max-w-[904px] w-full mx-auto flex flex-col flex-1 min-h-0">
+              <Tabs.Content value="chat" class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
+                <div class="relative px-6 pt-12 max-w-2xl w-full mx-auto flex flex-col flex-1 min-h-0">
                  <Show
                    when={local.session.active()}
                    fallback={
-                      <div class="flex flex-col pb-36 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
+                      <div class="flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
                        <div class="text-20-medium text-text-weaker">New session</div>
                        <div class="flex justify-center items-center gap-3">
                          <Icon name="folder" size="small" />
@@ -519,106 +535,22 @@ export default function Page() {
                  >
                    {(activeSession) => (
                      <div class="pt-3 flex flex-col flex-1 min-h-0">
-                        <div class="flex items-start gap-8 flex-1 min-h-0">
+                        <div class="flex-1 min-h-0">
                          <Show when={local.session.userMessages().length > 1}>
-                            <ul role="list" class="w-60 shrink-0 flex flex-col items-start gap-1">
+                            <ul
+                              role="list"
+                              class="absolute right-full mr-8 hidden w-60 shrink-0 @7xl:flex flex-col items-start gap-1"
+                            >
                              <For each={local.session.userMessages()}>
                                {(message) => {
-                                  const countLines = (text: string) => {
-                                    if (!text) return 0
-                                    return text.split("\n").length
-                                  }
-
-                                  const additions = createMemo(
-                                    () =>
-                                      message.summary?.diffs.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) ?? 0,
-                                  )
-
-                                  const deletions = createMemo(
-                                    () =>
-                                      message.summary?.diffs.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) ?? 0,
-                                  )
-
-                                  const totalBeforeLines = createMemo(
-                                    () =>
-                                      message.summary?.diffs.reduce((acc, diff) => acc + countLines(diff.before), 0) ??
-                                      0,
-                                  )
-
-                                  const blockCounts = createMemo(() => {
-                                    const TOTAL_BLOCKS = 5
-
-                                    const adds = additions()
-                                    const dels = deletions()
-                                    const unchanged = Math.max(0, totalBeforeLines() - dels)
-
-                                    const totalActivity = unchanged + adds + dels
-
-                                    if (totalActivity === 0) {
-                                      return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
-                                    }
-
-                                    const percentAdded = adds / totalActivity
-                                    const percentDeleted = dels / totalActivity
-                                    const added_raw = percentAdded * TOTAL_BLOCKS
-                                    const deleted_raw = percentDeleted * TOTAL_BLOCKS
-
-                                    let added = adds > 0 ? Math.ceil(added_raw) : 0
-                                    let deleted = dels > 0 ? Math.ceil(deleted_raw) : 0
-
-                                    let total_allocated = added + deleted
-                                    if (total_allocated > TOTAL_BLOCKS) {
-                                      if (added_raw < deleted_raw) {
-                                        added = Math.floor(added_raw)
-                                      } else {
-                                        deleted = Math.floor(deleted_raw)
-                                      }
-
-                                      total_allocated = added + deleted
-                                      if (total_allocated > TOTAL_BLOCKS) {
-                                        if (added_raw < deleted_raw) {
-                                          deleted = Math.floor(deleted_raw)
-                                        } else {
-                                          added = Math.floor(added_raw)
-                                        }
-                                      }
-                                    }
-
-                                    const neutral = Math.max(0, TOTAL_BLOCKS - added - deleted)
-
-                                    return { added, deleted, neutral }
-                                  })
-
-                                  const ADD_COLOR = "var(--icon-diff-add-base)"
-                                  const DELETE_COLOR = "var(--icon-diff-delete-base)"
-                                  const NEUTRAL_COLOR = "var(--icon-weak-base)"
-
-                                  const visibleBlocks = createMemo(() => {
-                                    const counts = blockCounts()
-                                    const blocks = [
-                                      ...Array(counts.added).fill(ADD_COLOR),
-                                      ...Array(counts.deleted).fill(DELETE_COLOR),
-                                      ...Array(counts.neutral).fill(NEUTRAL_COLOR),
-                                    ]
-                                    return blocks.slice(0, 5)
-                                  })
+                                  const diffs = createMemo(() => message.summary?.diffs ?? [])

                                  return (
                                    <li
                                      class="group/li flex items-center gap-x-2 py-1 self-stretch cursor-default"
                                      onClick={() => local.session.setActiveMessage(message.id)}
                                    >
-                                      <div class="w-[18px] shrink-0">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="none">
-                                          <g>
-                                            <For each={visibleBlocks()}>
-                                              {(color, i) => (
-                                                <rect x={i() * 4} width="2" height="12" rx="1" fill={color} />
-                                              )}
-                                            </For>
-                                          </g>
-                                        </svg>
-                                      </div>
+                                      <DiffChanges diff={diffs()} variant="bars" />
                                      <div
                                        data-active={local.session.activeMessage()?.id === message.id}
                                        classList={{
@@ -648,19 +580,15 @@ export default function Page() {
                                      (m) => m.role === "assistant" && m.parentID == message.id,
                                    ) as AssistantMessageType[]
                                  })
-                                  const working = createMemo(() => {
-                                    const last = assistantMessages()[assistantMessages().length - 1]
-                                    if (!last) return false
-                                    return !last.time.completed
-                                  })
+                                  const working = createMemo(() => !summary())

                                  return (
                                    <div
                                      data-message={message.id}
-                                      class="flex flex-col items-start self-stretch gap-8 min-h-[calc(100vh-15rem)]"
+                                      class="flex flex-col items-start self-stretch gap-8 min-h-screen"
                                    >
                                      {/* Title */}
-                                      <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger">
+                                      <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10">
                                        <h1 class="text-14-medium text-text-strong overflow-hidden text-ellipsis min-w-0">
                                          {title() ?? prompt()}
                                        </h1>
@@ -670,104 +598,14 @@ export default function Page() {
                                          <Message message={message} parts={parts()} />
                                        </div>
                                      </Show>
-                                      {/* Response */}
-                                      <div class="w-full flex flex-col gap-2">
-                                        <Collapsible variant="ghost" open={expanded()} onOpenChange={setExpanded}>
-                                          <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
-                                            <div class="flex items-center gap-1 self-stretch">
-                                              <h2 class="text-12-medium">
-                                                <Switch>
-                                                  <Match when={expanded()}>Hide steps</Match>
-                                                  <Match when={!expanded()}>Show steps</Match>
-                                                </Switch>
-                                              </h2>
-                                              <Collapsible.Arrow />
-                                            </div>
-                                          </Collapsible.Trigger>
-                                          <Collapsible.Content>
-                                            <div class="w-full flex flex-col items-start self-stretch gap-8">
-                                              <For each={assistantMessages()}>
-                                                {(assistantMessage) => {
-                                                  const parts = createMemo(() => sync.data.part[assistantMessage.id])
-                                                  return <Message message={assistantMessage} parts={parts()} />
-                                                }}
-                                              </For>
-                                            </div>
-                                          </Collapsible.Content>
-                                        </Collapsible>
-                                        <Show when={working() && !expanded()}>
-                                          {(_) => {
-                                            const lastMessageWithText = createMemo(() =>
-                                              assistantMessages().findLast((m) => {
-                                                const parts = sync.data.part[m.id]
-                                                return parts?.find((p) => p.type === "text")
-                                              }),
-                                            )
-                                            const lastMessageWithReasoning = createMemo(() =>
-                                              assistantMessages().findLast((m) => {
-                                                const parts = sync.data.part[m.id]
-                                                return parts?.find((p) => p.type === "reasoning")
-                                              }),
-                                            )
-                                            const lastMessageWithTool = createMemo(() =>
-                                              assistantMessages().findLast((m) => {
-                                                const parts = sync.data.part[m.id]
-                                                return parts?.find(
-                                                  (p) => p.type === "tool" && p.state.status === "completed",
-                                                )
-                                              }),
-                                            )
-                                            return (
-                                              <div class="w-full flex flex-col gap-2">
-                                                <Switch>
-                                                  <Match when={lastMessageWithText()}>
-                                                    {(last) => {
-                                                      const lastTextPart = createMemo(() =>
-                                                        sync.data.part[last().id].findLast((p) => p.type === "text"),
-                                                      )
-                                                      return (
-                                                        <Part message={last()} part={lastTextPart()!} hideDetails />
-                                                      )
-                                                    }}
-                                                  </Match>
-                                                  <Match when={lastMessageWithReasoning()}>
-                                                    {(last) => {
-                                                      const lastReasoningPart = createMemo(() =>
-                                                        sync.data.part[last().id].findLast(
-                                                          (p) => p.type === "reasoning",
-                                                        ),
-                                                      )
-                                                      return (
-                                                        <Part
-                                                          message={last()}
-                                                          part={lastReasoningPart()!}
-                                                          hideDetails
-                                                        />
-                                                      )
-                                                    }}
-                                                  </Match>
-                                                </Switch>
-                                                <Show when={lastMessageWithTool()}>
-                                                  {(last) => {
-                                                    const lastToolPart = createMemo(() =>
-                                                      sync.data.part[last().id].findLast(
-                                                        (p) => p.type === "tool" && p.state.status === "completed",
-                                                      ),
-                                                    )
-                                                    return <Part message={last()} part={lastToolPart()!} hideDetails />
-                                                  }}
-                                                </Show>
-                                              </div>
-                                            )
-                                          }}
-                                        </Show>
-                                      </div>
                                      {/* Summary */}
                                      <Show when={!working()}>
                                        <div class="w-full flex flex-col gap-6 items-start self-stretch">
                                          <div class="flex flex-col items-start gap-1 self-stretch">
                                            <h2 class="text-12-medium text-text-weak">Summary</h2>
-                                            <div class="text-14-regular text-text-base self-stretch">{summary()}</div>
+                                            <Show when={summary()}>
+                                              <Markdown text={summary()!} />
+                                            </Show>
                                          </div>
                                          <Accordion class="w-full" multiple>
                                            <For each={message.summary?.diffs || []}>
@@ -817,6 +655,119 @@ export default function Page() {
                                          </Accordion>
                                        </div>
                                      </Show>
+                                      {/* Response */}
+                                      <div class="w-full">
+                                        <Switch>
+                                          <Match when={working()}>
+                                            {(_) => {
+                                              const items = createMemo(() =>
+                                                assistantMessages().flatMap((m) => sync.data.part[m.id]),
+                                              )
+                                              const finishedItems = createMemo(() =>
+                                                items().filter(
+                                                  (p) =>
+                                                    (p?.type === "text" && p.time?.end) ||
+                                                    (p?.type === "reasoning" && p.time?.end) ||
+                                                    (p?.type === "tool" && p.state.status === "completed"),
+                                                ),
+                                              )
+
+                                              const MINIMUM_DELAY = 800
+                                              const [visibleCount, setVisibleCount] = createSignal(1)
+
+                                              createEffect(() => {
+                                                const total = finishedItems().length
+                                                if (total > visibleCount()) {
+                                                  const timer = setTimeout(() => {
+                                                    setVisibleCount((prev) => prev + 1)
+                                                  }, MINIMUM_DELAY)
+                                                  onCleanup(() => clearTimeout(timer))
+                                                } else if (total < visibleCount()) {
+                                                  setVisibleCount(total)
+                                                }
+                                              })
+
+                                              const translateY = createMemo(() => {
+                                                const total = visibleCount()
+                                                if (total < 2) return "0px"
+                                                return `-${(total - 2) * 48 - 8}px`
+                                              })
+
+                                              return (
+                                                <div class="flex flex-col gap-3">
+                                                  <div
+                                                    class="h-36 overflow-hidden pointer-events-none 
+                                                           mask-alpha mask-y-from-66% mask-y-from-background-base mask-y-to-transparent"
+                                                  >
+                                                    <div
+                                                      class="w-full flex flex-col items-start self-stretch gap-2 py-10
+                                                             transform transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                                                      style={{ transform: `translateY(${translateY()})` }}
+                                                    >
+                                                      <For each={finishedItems()}>
+                                                        {(part) => {
+                                                          const message = createMemo(() =>
+                                                            sync.data.message[part.sessionID].find(
+                                                              (m) => m.id === part.messageID,
+                                                            ),
+                                                          )
+                                                          return (
+                                                            <div class="h-10 flex items-center w-full">
+                                                              <Switch>
+                                                                <Match when={part.type === "text" && part}>
+                                                                  {(p) => (
+                                                                    <div
+                                                                      textContent={p().text}
+                                                                      class="text-12-regular text-text-base whitespace-nowrap truncate w-full"
+                                                                    />
+                                                                  )}
+                                                                </Match>
+                                                                <Match when={part.type === "reasoning" && part}>
+                                                                  {(p) => <Part message={message()!} part={p()} />}
+                                                                </Match>
+                                                                <Match when={part.type === "tool" && part}>
+                                                                  {(p) => <Part message={message()!} part={p()} />}
+                                                                </Match>
+                                                              </Switch>
+                                                            </div>
+                                                          )
+                                                        }}
+                                                      </For>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              )
+                                            }}
+                                          </Match>
+                                          <Match when={!working()}>
+                                            <Collapsible variant="ghost" open={expanded()} onOpenChange={setExpanded}>
+                                              <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
+                                                <div class="flex items-center gap-1 self-stretch">
+                                                  <div class="text-12-medium">
+                                                    <Switch>
+                                                      <Match when={expanded()}>Hide steps</Match>
+                                                      <Match when={!expanded()}>Show steps</Match>
+                                                    </Switch>
+                                                  </div>
+                                                  <Collapsible.Arrow />
+                                                </div>
+                                              </Collapsible.Trigger>
+                                              <Collapsible.Content>
+                                                <div class="w-full flex flex-col items-start self-stretch gap-3">
+                                                  <For each={assistantMessages()}>
+                                                    {(assistantMessage) => {
+                                                      const parts = createMemo(
+                                                        () => sync.data.part[assistantMessage.id],
+                                                      )
+                                                      return <Message message={assistantMessage} parts={parts()} />
+                                                    }}
+                                                  </For>
+                                                </div>
+                                              </Collapsible.Content>
+                                            </Collapsible>
+                                          </Match>
+                                        </Switch>
+                                      </div>
                                    </div>
                                  )
                                }}
@@ -850,21 +801,14 @@ export default function Page() {
                const draggedFile = local.file.node(id)
                if (!draggedFile) return null
                return (
-                  <div class="relative px-3 h-8 flex items-center text-sm font-medium text-text whitespace-nowrap shrink-0 bg-background-panel border-x border-border-subtle/40 border-b border-b-transparent">
+                  <div class="relative px-3 h-10 flex items-center bg-background-base border-x border-border-weak-base border-b border-b-transparent">
                    <TabVisual file={draggedFile} />
                  </div>
                )
              })()}
            </DragOverlay>
          </DragDropProvider>
-          <div
-            classList={{
-              "absolute inset-x-0 px-6 max-w-[904px] flex flex-col justify-center items-center z-50 mx-auto": true,
-              "bottom-8": true,
-              // "bottom-8": !!local.session.active(),
-              // "bottom-1/2 translate-y-1/2": !local.session.active(),
-            }}
-          >
+          <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
            <PromptInput
              ref={(el) => {
                inputRef = el
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/function",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "name": "opencode",
  "type": "module",
  "private": true,
@@ -1,5 +1,4 @@
 import type { McpServer } from "@agentclientprotocol/sdk"
-import { Identifier } from "../id/id"
 import { Session } from "../session"
 import { Provider } from "../provider/provider"
 import type { ACPSessionState } from "./types"
@@ -6,9 +6,12 @@ export async function bootstrap<T>(directory: string, cb: () => Promise<T>) {
    directory,
    init: InstanceBootstrap,
    fn: async () => {
-      const result = await cb()
-      await Instance.dispose()
-      return result
+      try {
+        const result = await cb()
+        return result
+      } finally {
+        await Instance.dispose()
+      }
    },
  })
 }
@@ -56,7 +56,11 @@ export const AcpCommand = cmd({
      }, stream)

      log.info("setup connection")
+      process.stdin.resume()
+      await new Promise((resolve, reject) => {
+        process.stdin.on("end", resolve)
+        process.stdin.on("error", reject)
+      })
    })
-    process.stdin.resume()
  },
 })
@@ -14,6 +14,8 @@ import { Agent } from "../../agent/agent"
 import { Command } from "../../command"
 import { SessionPrompt } from "../../session/prompt"
 import { EOL } from "os"
+import { Permission } from "@/permission"
+import { select } from "@clack/prompts"

 const TOOL: Record<string, [string, string]> = {
  todowrite: ["Todo", UI.Style.TEXT_WARNING_BOLD],
@@ -229,7 +231,9 @@ export const RunCommand = cmd({
          const [tool, color] = TOOL[part.tool] ?? [part.tool, UI.Style.TEXT_INFO_BOLD]
          const title =
            part.state.title ||
-            (Object.keys(part.state.input).length > 0 ? JSON.stringify(part.state.input) : "Unknown")
+            (Object.keys(part.state.input).length > 0
+              ? JSON.stringify(part.state.input)
+              : "Unknown")

          printEvent(color, tool, title)

@@ -275,6 +279,31 @@ export const RunCommand = cmd({
        UI.error(err)
      })

+      Bus.subscribe(Permission.Event.Updated, async (evt) => {
+        const permission = evt.properties
+        const message = `Permission required to run: ${permission.title}`
+
+        const result = await select({
+          message,
+          options: [
+            { value: "once", label: "Allow once" },
+            { value: "always", label: "Always allow" },
+            { value: "reject", label: "Reject" },
+          ],
+          initialValue: "once",
+        }).catch(() => "reject")
+        const response = (result.toString().includes("cancel") ? "reject" : result) as
+          | "once"
+          | "always"
+          | "reject"
+
+        Permission.respond({
+          sessionID: session.id,
+          permissionID: permission.id,
+          response,
+        })
+      })
+
      await (async () => {
        if (args.command) {
          return await SessionPrompt.command({
@@ -27,6 +27,6 @@ export const ServeCommand = cmd({
    })
    console.log(`opencode server listening on http://${server.hostname}:${server.port}`)
    await new Promise(() => {})
-    server.stop()
+    await server.stop()
  },
 })
@@ -1,3 +1,4 @@
+import { ConfigMarkdown } from "@/config/markdown"
 import { Config } from "../config/config"
 import { MCP } from "../mcp"
 import { UI } from "./ui"
@@ -7,16 +8,22 @@ export function FormatError(input: unknown) {
    return `MCP server "${input.data.name}" failed. Note, opencode does not support MCP authentication yet.`
  if (Config.JsonError.isInstance(input)) {
    return (
-      `Config file at ${input.data.path} is not valid JSON(C)` + (input.data.message ? `: ${input.data.message}` : "")
+      `Config file at ${input.data.path} is not valid JSON(C)` +
+      (input.data.message ? `: ${input.data.message}` : "")
    )
  }
  if (Config.ConfigDirectoryTypoError.isInstance(input)) {
    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Use "${input.data.suggestion}" instead. This is a common typo.`
  }
+  if (ConfigMarkdown.FrontmatterError.isInstance(input)) {
+    return `Failed to parse frontmatter in ${input.data.path}:\n${input.data.message}`
+  }
  if (Config.InvalidError.isInstance(input))
    return [
-      `Config file at ${input.data.path} is invalid` + (input.data.message ? `: ${input.data.message}` : ""),
-      ...(input.data.issues?.map((issue) => "↳ " + issue.message + " " + issue.path.join(".")) ?? []),
+      `Config file at ${input.data.path} is invalid` +
+        (input.data.message ? `: ${input.data.message}` : ""),
+      ...(input.data.issues?.map((issue) => "↳ " + issue.message + " " + issue.path.join(".")) ??
+        []),
    ].join("\n")

  if (UI.CancelledError.isInstance(input)) return ""
@@ -9,14 +9,18 @@ import { Global } from "../global"
 import fs from "fs/promises"
 import { lazy } from "../util/lazy"
 import { NamedError } from "../util/error"
-import matter from "gray-matter"
 import { Flag } from "../flag/flag"
 import { Auth } from "../auth"
-import { type ParseError as JsoncParseError, parse as parseJsonc, printParseErrorCode } from "jsonc-parser"
+import {
+  type ParseError as JsoncParseError,
+  parse as parseJsonc,
+  printParseErrorCode,
+} from "jsonc-parser"
 import { Instance } from "../project/instance"
 import { LSPServer } from "../lsp/server"
 import { BunProc } from "@/bun"
 import { Installation } from "@/installation"
+import { ConfigMarkdown } from "./markdown"

 export namespace Config {
  const log = Log.create({ service: "config" })
@@ -46,7 +50,10 @@ export namespace Config {
      if (value.type === "wellknown") {
        process.env[value.key] = value.token
        const wellknown = await fetch(`${key}/.well-known/opencode`).then((x) => x.json())
-        result = mergeDeep(result, await load(JSON.stringify(wellknown.config ?? {}), process.cwd()))
+        result = mergeDeep(
+          result,
+          await load(JSON.stringify(wellknown.config ?? {}), process.cwd()),
+        )
      }
    }

@@ -57,7 +64,11 @@ export namespace Config {
    const directories = [
      Global.Path.config,
      ...(await Array.fromAsync(
-        Filesystem.up({ targets: [".opencode"], start: Instance.directory, stop: Instance.worktree }),
+        Filesystem.up({
+          targets: [".opencode"],
+          start: Instance.directory,
+          stop: Instance.worktree,
+        }),
      )),
    ]

@@ -66,14 +77,16 @@ export namespace Config {
      log.debug("loading config from OPENCODE_CONFIG_DIR", { path: Flag.OPENCODE_CONFIG_DIR })
    }

+    const promises: Promise<void>[] = []
    for (const dir of directories) {
      await assertValid(dir)
-      installDependencies(dir)
+      promises.push(installDependencies(dir))
      result.command = mergeDeep(result.command ?? {}, await loadCommand(dir))
      result.agent = mergeDeep(result.agent, await loadAgent(dir))
      result.agent = mergeDeep(result.agent, await loadMode(dir))
      result.plugin.push(...(await loadPlugin(dir)))
    }
+    await Promise.all(promises)

    // Migrate deprecated mode field to agent field
    for (const [name, mode] of Object.entries(result.mode)) {
@@ -153,10 +166,18 @@ export namespace Config {

    const gitignore = path.join(dir, ".gitignore")
    const hasGitIgnore = await Bun.file(gitignore).exists()
-    if (!hasGitIgnore) await Bun.write(gitignore, ["node_modules", "package.json", "bun.lock", ".gitignore"].join("\n"))
+    if (!hasGitIgnore)
+      await Bun.write(
+        gitignore,
+        ["node_modules", "package.json", "bun.lock", ".gitignore"].join("\n"),
+      )

    await BunProc.run(
-      ["add", "@opencode-ai/plugin@" + (Installation.isLocal() ? "latest" : Installation.VERSION), "--exact"],
+      [
+        "add",
+        "@opencode-ai/plugin@" + (Installation.isLocal() ? "latest" : Installation.VERSION),
+        "--exact",
+      ],
      {
        cwd: dir,
      },
@@ -166,9 +187,13 @@ export namespace Config {
  const COMMAND_GLOB = new Bun.Glob("command/**/*.md")
  async function loadCommand(dir: string) {
    const result: Record<string, Command> = {}
-    for await (const item of COMMAND_GLOB.scan({ absolute: true, followSymlinks: true, dot: true, cwd: dir })) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
+    for await (const item of COMMAND_GLOB.scan({
+      absolute: true,
+      followSymlinks: true,
+      dot: true,
+      cwd: dir,
+    })) {
+      const md = await ConfigMarkdown.parse(item)
      if (!md.data) continue

      const name = (() => {
@@ -201,9 +226,13 @@ export namespace Config {
  async function loadAgent(dir: string) {
    const result: Record<string, Agent> = {}

-    for await (const item of AGENT_GLOB.scan({ absolute: true, followSymlinks: true, dot: true, cwd: dir })) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
+    for await (const item of AGENT_GLOB.scan({
+      absolute: true,
+      followSymlinks: true,
+      dot: true,
+      cwd: dir,
+    })) {
+      const md = await ConfigMarkdown.parse(item)
      if (!md.data) continue

      // Extract relative path from agent folder for nested agents
@@ -239,9 +268,13 @@ export namespace Config {
  const MODE_GLOB = new Bun.Glob("mode/*.md")
  async function loadMode(dir: string) {
    const result: Record<string, Agent> = {}
-    for await (const item of MODE_GLOB.scan({ absolute: true, followSymlinks: true, dot: true, cwd: dir })) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
+    for await (const item of MODE_GLOB.scan({
+      absolute: true,
+      followSymlinks: true,
+      dot: true,
+      cwd: dir,
+    })) {
+      const md = await ConfigMarkdown.parse(item)
      if (!md.data) continue

      const config = {
@@ -265,7 +298,12 @@ export namespace Config {
  async function loadPlugin(dir: string) {
    const plugins: string[] = []

-    for await (const item of PLUGIN_GLOB.scan({ absolute: true, followSymlinks: true, dot: true, cwd: dir })) {
+    for await (const item of PLUGIN_GLOB.scan({
+      absolute: true,
+      followSymlinks: true,
+      dot: true,
+      cwd: dir,
+    })) {
      plugins.push("file://" + item)
    }
    return plugins
@@ -280,6 +318,14 @@ export namespace Config {
        .optional()
        .describe("Environment variables to set when running the MCP server"),
      enabled: z.boolean().optional().describe("Enable or disable the MCP server on startup"),
+      timeout: z
+        .number()
+        .int()
+        .positive()
+        .optional()
+        .describe(
+          "Timeout in ms for fetching tools from the MCP server. Defaults to 5000 (5 seconds) if not specified.",
+        ),
    })
    .strict()
    .meta({
@@ -291,7 +337,18 @@ export namespace Config {
      type: z.literal("remote").describe("Type of MCP server connection"),
      url: z.string().describe("URL of the remote MCP server"),
      enabled: z.boolean().optional().describe("Enable or disable the MCP server on startup"),
-      headers: z.record(z.string(), z.string()).optional().describe("Headers to send with the request"),
+      headers: z
+        .record(z.string(), z.string())
+        .optional()
+        .describe("Headers to send with the request"),
+      timeout: z
+        .number()
+        .int()
+        .positive()
+        .optional()
+        .describe(
+          "Timeout in ms for fetching tools from the MCP server. Defaults to 5000 (5 seconds) if not specified.",
+        ),
    })
    .strict()
    .meta({
@@ -339,72 +396,148 @@ export namespace Config {

  export const Keybinds = z
    .object({
-      leader: z.string().optional().default("ctrl+x").describe("Leader key for keybind combinations"),
+      leader: z
+        .string()
+        .optional()
+        .default("ctrl+x")
+        .describe("Leader key for keybind combinations"),
      app_help: z.string().optional().default("<leader>h").describe("Show help dialog"),
      app_exit: z.string().optional().default("ctrl+c,<leader>q").describe("Exit the application"),
      editor_open: z.string().optional().default("<leader>e").describe("Open external editor"),
      theme_list: z.string().optional().default("<leader>t").describe("List available themes"),
      project_init: z.string().optional().default("<leader>i").describe("Create/update AGENTS.md"),
      tool_details: z.string().optional().default("<leader>d").describe("Toggle tool details"),
-      thinking_blocks: z.string().optional().default("<leader>b").describe("Toggle thinking blocks"),
-      session_export: z.string().optional().default("<leader>x").describe("Export session to editor"),
+      thinking_blocks: z
+        .string()
+        .optional()
+        .default("<leader>b")
+        .describe("Toggle thinking blocks"),
+      session_export: z
+        .string()
+        .optional()
+        .default("<leader>x")
+        .describe("Export session to editor"),
      session_new: z.string().optional().default("<leader>n").describe("Create a new session"),
      session_list: z.string().optional().default("<leader>l").describe("List all sessions"),
-      session_timeline: z.string().optional().default("<leader>g").describe("Show session timeline"),
+      session_timeline: z
+        .string()
+        .optional()
+        .default("<leader>g")
+        .describe("Show session timeline"),
      session_share: z.string().optional().default("<leader>s").describe("Share current session"),
      session_unshare: z.string().optional().default("none").describe("Unshare current session"),
      session_interrupt: z.string().optional().default("esc").describe("Interrupt current session"),
      session_compact: z.string().optional().default("<leader>c").describe("Compact the session"),
-      session_child_cycle: z.string().optional().default("ctrl+right").describe("Cycle to next child session"),
+      session_child_cycle: z
+        .string()
+        .optional()
+        .default("ctrl+right")
+        .describe("Cycle to next child session"),
      session_child_cycle_reverse: z
        .string()
        .optional()
        .default("ctrl+left")
        .describe("Cycle to previous child session"),
-      messages_page_up: z.string().optional().default("pgup").describe("Scroll messages up by one page"),
-      messages_page_down: z.string().optional().default("pgdown").describe("Scroll messages down by one page"),
-      messages_half_page_up: z.string().optional().default("ctrl+alt+u").describe("Scroll messages up by half page"),
+      messages_page_up: z
+        .string()
+        .optional()
+        .default("pgup")
+        .describe("Scroll messages up by one page"),
+      messages_page_down: z
+        .string()
+        .optional()
+        .default("pgdown")
+        .describe("Scroll messages down by one page"),
+      messages_half_page_up: z
+        .string()
+        .optional()
+        .default("ctrl+alt+u")
+        .describe("Scroll messages up by half page"),
      messages_half_page_down: z
        .string()
        .optional()
        .default("ctrl+alt+d")
        .describe("Scroll messages down by half page"),
      messages_first: z.string().optional().default("ctrl+g").describe("Navigate to first message"),
-      messages_last: z.string().optional().default("ctrl+alt+g").describe("Navigate to last message"),
+      messages_last: z
+        .string()
+        .optional()
+        .default("ctrl+alt+g")
+        .describe("Navigate to last message"),
      messages_copy: z.string().optional().default("<leader>y").describe("Copy message"),
      messages_undo: z.string().optional().default("<leader>u").describe("Undo message"),
      messages_redo: z.string().optional().default("<leader>r").describe("Redo message"),
      model_list: z.string().optional().default("<leader>m").describe("List available models"),
      model_cycle_recent: z.string().optional().default("f2").describe("Next recent model"),
-      model_cycle_recent_reverse: z.string().optional().default("shift+f2").describe("Previous recent model"),
+      model_cycle_recent_reverse: z
+        .string()
+        .optional()
+        .default("shift+f2")
+        .describe("Previous recent model"),
      agent_list: z.string().optional().default("<leader>a").describe("List agents"),
      agent_cycle: z.string().optional().default("tab").describe("Next agent"),
      agent_cycle_reverse: z.string().optional().default("shift+tab").describe("Previous agent"),
      input_clear: z.string().optional().default("ctrl+c").describe("Clear input field"),
      input_paste: z.string().optional().default("ctrl+v").describe("Paste from clipboard"),
      input_submit: z.string().optional().default("enter").describe("Submit input"),
-      input_newline: z.string().optional().default("shift+enter,ctrl+j").describe("Insert newline in input"),
+      input_newline: z
+        .string()
+        .optional()
+        .default("shift+enter,ctrl+j")
+        .describe("Insert newline in input"),
      // Deprecated commands
-      switch_mode: z.string().optional().default("none").describe("@deprecated use agent_cycle. Next mode"),
+      switch_mode: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated use agent_cycle. Next mode"),
      switch_mode_reverse: z
        .string()
        .optional()
        .default("none")
        .describe("@deprecated use agent_cycle_reverse. Previous mode"),
-      switch_agent: z.string().optional().default("tab").describe("@deprecated use agent_cycle. Next agent"),
+      switch_agent: z
+        .string()
+        .optional()
+        .default("tab")
+        .describe("@deprecated use agent_cycle. Next agent"),
      switch_agent_reverse: z
        .string()
        .optional()
        .default("shift+tab")
        .describe("@deprecated use agent_cycle_reverse. Previous agent"),
-      file_list: z.string().optional().default("none").describe("@deprecated Currently not available. List files"),
+      file_list: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated Currently not available. List files"),
      file_close: z.string().optional().default("none").describe("@deprecated Close file"),
      file_search: z.string().optional().default("none").describe("@deprecated Search file"),
-      file_diff_toggle: z.string().optional().default("none").describe("@deprecated Split/unified diff"),
-      messages_previous: z.string().optional().default("none").describe("@deprecated Navigate to previous message"),
-      messages_next: z.string().optional().default("none").describe("@deprecated Navigate to next message"),
-      messages_layout_toggle: z.string().optional().default("none").describe("@deprecated Toggle layout"),
-      messages_revert: z.string().optional().default("none").describe("@deprecated use messages_undo. Revert message"),
+      file_diff_toggle: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated Split/unified diff"),
+      messages_previous: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated Navigate to previous message"),
+      messages_next: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated Navigate to next message"),
+      messages_layout_toggle: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated Toggle layout"),
+      messages_revert: z
+        .string()
+        .optional()
+        .default("none")
+        .describe("@deprecated use messages_undo. Revert message"),
    })
    .strict()
    .meta({
@@ -446,13 +579,23 @@ export namespace Config {
      autoshare: z
        .boolean()
        .optional()
-        .describe("@deprecated Use 'share' field instead. Share newly created sessions automatically"),
+        .describe(
+          "@deprecated Use 'share' field instead. Share newly created sessions automatically",
+        ),
      autoupdate: z.boolean().optional().describe("Automatically update to the latest version"),
-      disabled_providers: z.array(z.string()).optional().describe("Disable providers that are loaded automatically"),
-      model: z.string().describe("Model to use in the format of provider/model, eg anthropic/claude-2").optional(),
+      disabled_providers: z
+        .array(z.string())
+        .optional()
+        .describe("Disable providers that are loaded automatically"),
+      model: z
+        .string()
+        .describe("Model to use in the format of provider/model, eg anthropic/claude-2")
+        .optional(),
      small_model: z
        .string()
-        .describe("Small model to use for tasks like title generation in the format of provider/model")
+        .describe(
+          "Small model to use for tasks like title generation in the format of provider/model",
+        )
        .optional(),
      username: z
        .string()
@@ -508,7 +651,10 @@ export namespace Config {
        )
        .optional()
        .describe("Custom provider configurations and model overrides"),
-      mcp: z.record(z.string(), Mcp).optional().describe("MCP (Model Context Protocol) server configurations"),
+      mcp: z
+        .record(z.string(), Mcp)
+        .optional()
+        .describe("MCP (Model Context Protocol) server configurations"),
      formatter: z
        .record(
          z.string(),
@@ -552,7 +698,10 @@ export namespace Config {
            error: "For custom LSP servers, 'extensions' array is required.",
          },
        ),
-      instructions: z.array(z.string()).optional().describe("Additional instruction files or patterns to include"),
+      instructions: z
+        .array(z.string())
+        .optional()
+        .describe("Additional instruction files or patterns to include"),
      layout: Layout.optional().describe("@deprecated Always uses stretch layout."),
      permission: z
        .object({
@@ -586,7 +735,10 @@ export namespace Config {
                .optional(),
            })
            .optional(),
-          chatMaxRetries: z.number().optional().describe("Number of retries for chat completions on failure"),
+          chatMaxRetries: z
+            .number()
+            .optional()
+            .describe("Number of retries for chat completions on failure"),
          disable_paste_summary: z.boolean().optional(),
        })
        .optional(),
@@ -616,7 +768,10 @@ export namespace Config {
        if (provider && model) result.model = `${provider}/${model}`
        result["$schema"] = "https://opencode.ai/config.json"
        result = mergeDeep(result, rest)
-        await Bun.write(path.join(Global.Path.config, "config.json"), JSON.stringify(result, null, 2))
+        await Bun.write(
+          path.join(Global.Path.config, "config.json"),
+          JSON.stringify(result, null, 2),
+        )
        await fs.unlink(path.join(Global.Path.config, "config"))
      })
      .catch(() => {})
@@ -655,7 +810,9 @@ export namespace Config {
        if (filePath.startsWith("~/")) {
          filePath = path.join(os.homedir(), filePath.slice(2))
        }
-        const resolvedPath = path.isAbsolute(filePath) ? filePath : path.resolve(configDir, filePath)
+        const resolvedPath = path.isAbsolute(filePath)
+          ? filePath
+          : path.resolve(configDir, filePath)
        const fileContent = (
          await Bun.file(resolvedPath)
            .text()
@@ -1,3 +1,7 @@
+import { NamedError } from "@/util/error"
+import matter from "gray-matter"
+import { z } from "zod"
+
 export namespace ConfigMarkdown {
  export const FILE_REGEX = /(?<![\w`])@(\.?[^\s`,.]*(?:\.[^\s`,.]+)*)/g
  export const SHELL_REGEX = /!`([^`]+)`/g
@@ -9,4 +13,29 @@ export namespace ConfigMarkdown {
  export function shell(template: string) {
    return Array.from(template.matchAll(SHELL_REGEX))
  }
+
+  export async function parse(filePath: string) {
+    const template = await Bun.file(filePath).text()
+
+    try {
+      const md = matter(template)
+      return md
+    } catch (err) {
+      throw new FrontmatterError(
+        {
+          path: filePath,
+          message: `Failed to parse YAML frontmatter: ${err instanceof Error ? err.message : String(err)}`,
+        },
+        { cause: err },
+      )
+    }
+  }
+
+  export const FrontmatterError = NamedError.create(
+    "ConfigFrontmatterError",
+    z.object({
+      path: z.string(),
+      message: z.string(),
+    }),
+  )
 }
@@ -63,7 +63,8 @@ export namespace FileWatcher {
      return { sub }
    },
    async (state) => {
-      state.sub?.unsubscribe()
+      if (!state.sub) return
+      await state.sub?.unsubscribe()
    },
  )

@@ -22,8 +22,6 @@ import { AttachCommand } from "./cli/cmd/attach"
 import { AcpCommand } from "./cli/cmd/acp"
 import { EOL } from "os"

-const cancel = new AbortController()
-
 process.on("unhandledRejection", (e) => {
  Log.Default.error("rejection", {
    e: e instanceof Error ? e.message : e,
@@ -135,6 +133,10 @@ try {
    console.error(e)
  }
  process.exitCode = 1
+} finally {
+  // Some subprocesses don't react properly to SIGTERM and similar signals.
+  // Most notably, some docker-container-based MCP servers don't handle such signals unless
+  // run using `docker run --init`.
+  // Explicitly exit to avoid any hanging subprocesses.
+  process.exit();
 }
-
-cancel.abort()
@@ -101,9 +101,7 @@ export namespace LSP {
      }
    },
    async (state) => {
-      for (const client of state.clients) {
-        await client.shutdown()
-      }
+      await Promise.all(state.clients.map((client) => client.shutdown()))
    },
  )

@@ -163,7 +161,10 @@ export namespace LSP {
    const clients = await getClients(input)
    await run(async (client) => {
      if (!clients.includes(client)) return
-      const wait = waitForDiagnostics ? client.waitForDiagnostics({ path: input }) : Promise.resolve()
+
+      const wait = waitForDiagnostics
+        ? client.waitForDiagnostics({ path: input })
+        : Promise.resolve()
      await client.notify.open({ path: input })
      return wait
    }).catch((err) => {
@@ -54,7 +54,17 @@ export namespace LSPServer {

  export const Deno: Info = {
    id: "deno",
-    root: NearestRoot(["deno.json", "deno.jsonc"]),
+    root: async (file) => {
+      const files = Filesystem.up({
+        targets: ["deno.json", "deno.jsonc"],
+        start: path.dirname(file),
+        stop: Instance.directory,
+      })
+      const first = await files.next()
+      await files.return()
+      if (!first.value) return undefined
+      return path.dirname(first.value)
+    },
    extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs"],
    async spawn(root) {
      const deno = Bun.which("deno")
@@ -78,7 +88,9 @@ export namespace LSPServer {
    ),
    extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".mts", ".cts"],
    async spawn(root) {
-      const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(() => {})
+      const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(
+        () => {},
+      )
      if (!tsserver) return
      const proc = spawn(BunProc.which(), ["x", "typescript-language-server", "--stdio"], {
        cwd: root,
@@ -101,7 +113,13 @@ export namespace LSPServer {
  export const Vue: Info = {
    id: "vue",
    extensions: [".vue"],
-    root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+    root: NearestRoot([
+      "package-lock.json",
+      "bun.lockb",
+      "bun.lock",
+      "pnpm-lock.yaml",
+      "yarn.lock",
+    ]),
    async spawn(root) {
      let binary = Bun.which("vue-language-server")
      const args: string[] = []
@@ -149,17 +167,31 @@ export namespace LSPServer {

  export const ESLint: Info = {
    id: "eslint",
-    root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+    root: NearestRoot([
+      "package-lock.json",
+      "bun.lockb",
+      "bun.lock",
+      "pnpm-lock.yaml",
+      "yarn.lock",
+    ]),
    extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".mts", ".cts", ".vue"],
    async spawn(root) {
      const eslint = await Bun.resolve("eslint", Instance.directory).catch(() => {})
      if (!eslint) return
      log.info("spawning eslint server")
-      const serverPath = path.join(Global.Path.bin, "vscode-eslint", "server", "out", "eslintServer.js")
+      const serverPath = path.join(
+        Global.Path.bin,
+        "vscode-eslint",
+        "server",
+        "out",
+        "eslintServer.js",
+      )
      if (!(await Bun.file(serverPath).exists())) {
        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
        log.info("downloading and building VS Code ESLint server")
-        const response = await fetch("https://github.com/microsoft/vscode-eslint/archive/refs/heads/main.zip")
+        const response = await fetch(
+          "https://github.com/microsoft/vscode-eslint/archive/refs/heads/main.zip",
+        )
        if (!response.ok) return

        const zipPath = path.join(Global.Path.bin, "vscode-eslint.zip")
@@ -284,12 +316,25 @@ export namespace LSPServer {
  export const Pyright: Info = {
    id: "pyright",
    extensions: [".py", ".pyi"],
-    root: NearestRoot(["pyproject.toml", "setup.py", "setup.cfg", "requirements.txt", "Pipfile", "pyrightconfig.json"]),
+    root: NearestRoot([
+      "pyproject.toml",
+      "setup.py",
+      "setup.cfg",
+      "requirements.txt",
+      "Pipfile",
+      "pyrightconfig.json",
+    ]),
    async spawn(root) {
      let binary = Bun.which("pyright-langserver")
      const args = []
      if (!binary) {
-        const js = path.join(Global.Path.bin, "node_modules", "pyright", "dist", "pyright-langserver.js")
+        const js = path.join(
+          Global.Path.bin,
+          "node_modules",
+          "pyright",
+          "dist",
+          "pyright-langserver.js",
+        )
        if (!(await Bun.file(js).exists())) {
          if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
          await Bun.spawn([BunProc.which(), "install", "pyright"], {
@@ -307,9 +352,11 @@ export namespace LSPServer {

      const initialization: Record<string, string> = {}

-      const potentialVenvPaths = [process.env["VIRTUAL_ENV"], path.join(root, ".venv"), path.join(root, "venv")].filter(
-        (p): p is string => p !== undefined,
-      )
+      const potentialVenvPaths = [
+        process.env["VIRTUAL_ENV"],
+        path.join(root, ".venv"),
+        path.join(root, "venv"),
+      ].filter((p): p is string => p !== undefined)
      for (const venvPath of potentialVenvPaths) {
        const isWindows = process.platform === "win32"
        const potentialPythonPath = isWindows
@@ -360,7 +407,9 @@ export namespace LSPServer {
          if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
          log.info("downloading elixir-ls from GitHub releases")

-          const response = await fetch("https://github.com/elixir-lsp/elixir-ls/archive/refs/heads/master.zip")
+          const response = await fetch(
+            "https://github.com/elixir-lsp/elixir-ls/archive/refs/heads/master.zip",
+          )
          if (!response.ok) return
          const zipPath = path.join(Global.Path.bin, "elixir-ls.zip")
          await Bun.file(zipPath).write(response)
@@ -410,7 +459,9 @@ export namespace LSPServer {
        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
        log.info("downloading zls from GitHub releases")

-        const releaseResponse = await fetch("https://api.github.com/repos/zigtools/zls/releases/latest")
+        const releaseResponse = await fetch(
+          "https://api.github.com/repos/zigtools/zls/releases/latest",
+        )
        if (!releaseResponse.ok) {
          log.error("Failed to fetch zls release info")
          return
@@ -585,7 +636,13 @@ export namespace LSPServer {

  export const Clangd: Info = {
    id: "clangd",
-    root: NearestRoot(["compile_commands.json", "compile_flags.txt", ".clangd", "CMakeLists.txt", "Makefile"]),
+    root: NearestRoot([
+      "compile_commands.json",
+      "compile_flags.txt",
+      ".clangd",
+      "CMakeLists.txt",
+      "Makefile",
+    ]),
    extensions: [".c", ".cpp", ".cc", ".cxx", ".c++", ".h", ".hpp", ".hh", ".hxx", ".h++"],
    async spawn(root) {
      let bin = Bun.which("clangd", {
@@ -595,7 +652,9 @@ export namespace LSPServer {
        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
        log.info("downloading clangd from GitHub releases")

-        const releaseResponse = await fetch("https://api.github.com/repos/clangd/clangd/releases/latest")
+        const releaseResponse = await fetch(
+          "https://api.github.com/repos/clangd/clangd/releases/latest",
+        )
        if (!releaseResponse.ok) {
          log.error("Failed to fetch clangd release info")
          return
@@ -664,12 +723,24 @@ export namespace LSPServer {
  export const Svelte: Info = {
    id: "svelte",
    extensions: [".svelte"],
-    root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+    root: NearestRoot([
+      "package-lock.json",
+      "bun.lockb",
+      "bun.lock",
+      "pnpm-lock.yaml",
+      "yarn.lock",
+    ]),
    async spawn(root) {
      let binary = Bun.which("svelteserver")
      const args: string[] = []
      if (!binary) {
-        const js = path.join(Global.Path.bin, "node_modules", "svelte-language-server", "bin", "server.js")
+        const js = path.join(
+          Global.Path.bin,
+          "node_modules",
+          "svelte-language-server",
+          "bin",
+          "server.js",
+        )
        if (!(await Bun.file(js).exists())) {
          if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
          await Bun.spawn([BunProc.which(), "install", "svelte-language-server"], {
@@ -704,9 +775,17 @@ export namespace LSPServer {
  export const Astro: Info = {
    id: "astro",
    extensions: [".astro"],
-    root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+    root: NearestRoot([
+      "package-lock.json",
+      "bun.lockb",
+      "bun.lock",
+      "pnpm-lock.yaml",
+      "yarn.lock",
+    ]),
    async spawn(root) {
-      const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(() => {})
+      const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(
+        () => {},
+      )
      if (!tsserver) {
        log.info("typescript not found, required for Astro language server")
        return
@@ -716,7 +795,14 @@ export namespace LSPServer {
      let binary = Bun.which("astro-ls")
      const args: string[] = []
      if (!binary) {
-        const js = path.join(Global.Path.bin, "node_modules", "@astrojs", "language-server", "bin", "nodeServer.js")
+        const js = path.join(
+          Global.Path.bin,
+          "node_modules",
+          "@astrojs",
+          "language-server",
+          "bin",
+          "nodeServer.js",
+        )
        if (!(await Bun.file(js).exists())) {
          if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
          await Bun.spawn([BunProc.which(), "install", "@astrojs/language-server"], {
@@ -794,7 +880,9 @@ export namespace LSPServer {
        .then(({ stdout }) => stdout.toString().trim())
      const launcherJar = path.join(launcherDir, jarFileName)
      if (!(await fs.exists(launcherJar))) {
-        log.error(`Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`)
+        log.error(
+          `Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`,
+        )
        return
      }
      const configFile = path.join(
@@ -860,7 +948,9 @@ export namespace LSPServer {
        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
        log.info("downloading lua-language-server from GitHub releases")

-        const releaseResponse = await fetch("https://api.github.com/repos/LuaLS/lua-language-server/releases/latest")
+        const releaseResponse = await fetch(
+          "https://api.github.com/repos/LuaLS/lua-language-server/releases/latest",
+        )
        if (!releaseResponse.ok) {
          log.error("Failed to fetch lua-language-server release info")
          return
@@ -897,7 +987,9 @@ export namespace LSPServer {

        const assetSuffix = `${lualsPlatform}-${lualsArch}.${ext}`
        if (!supportedCombos.includes(assetSuffix)) {
-          log.error(`Platform ${platform} and architecture ${arch} is not supported by lua-language-server`)
+          log.error(
+            `Platform ${platform} and architecture ${arch} is not supported by lua-language-server`,
+          )
          return
        }

@@ -920,7 +1012,10 @@ export namespace LSPServer {
        // Unlike zls which is a single self-contained binary,
        // lua-language-server needs supporting files (meta/, locale/, etc.)
        // Extract entire archive to dedicated directory to preserve all files
-        const installDir = path.join(Global.Path.bin, `lua-language-server-${lualsArch}-${lualsPlatform}`)
+        const installDir = path.join(
+          Global.Path.bin,
+          `lua-language-server-${lualsArch}-${lualsPlatform}`,
+        )

        // Remove old installation if exists
        const stats = await fs.stat(installDir).catch(() => undefined)
@@ -945,7 +1040,11 @@ export namespace LSPServer {
        await fs.rm(tempPath, { force: true })

        // Binary is located in bin/ subdirectory within the extracted archive
-        bin = path.join(installDir, "bin", "lua-language-server" + (platform === "win32" ? ".exe" : ""))
+        bin = path.join(
+          installDir,
+          "bin",
+          "lua-language-server" + (platform === "win32" ? ".exe" : ""),
+        )

        if (!(await Bun.file(bin).exists())) {
          log.error("Failed to extract lua-language-server binary")
@@ -954,7 +1053,9 @@ export namespace LSPServer {

        if (platform !== "win32") {
          const ok = await $`chmod +x ${bin}`.quiet().catch((error) => {
-            log.error("Failed to set executable permission for lua-language-server binary", { error })
+            log.error("Failed to set executable permission for lua-language-server binary", {
+              error,
+            })
          })
          if (!ok) return
        }
@@ -45,9 +45,7 @@ export namespace MCP {
      }
    },
    async (state) => {
-      for (const client of Object.values(state.clients)) {
-        client.close()
-      }
+      await Promise.all(Object.values(state.clients).map((client) => client.close()))
    },
  )

@@ -167,7 +165,7 @@ export namespace MCP {
      return
    }

-    const result = await withTimeout(mcpClient.tools(), 5000).catch(() => {})
+    const result = await withTimeout(mcpClient.tools(), mcp.timeout ?? 5000).catch(() => { })
    if (!result) {
      log.warn("mcp client verification failed, dropping client", { name })
      return
@@ -11,7 +11,7 @@ export async function InstanceBootstrap() {
  await Plugin.init()
  Share.init()
  Format.init()
-  LSP.init()
+  await LSP.init()
  FileWatcher.init()
  File.init()
 }
@@ -1,23 +1,26 @@
+import { Log } from "@/util/log"
+
 export namespace State {
  interface Entry {
    state: any
    dispose?: (state: any) => Promise<void>
  }

-  const entries = new Map<string, Map<any, Entry>>()
+  const log = Log.create({ service: "state" })
+  const recordsByKey = new Map<string, Map<any, Entry>>()

  export function create<S>(root: () => string, init: () => S, dispose?: (state: Awaited<S>) => Promise<void>) {
    return () => {
      const key = root()
-      let collection = entries.get(key)
-      if (!collection) {
-        collection = new Map<string, Entry>()
-        entries.set(key, collection)
+      let entries = recordsByKey.get(key)
+      if (!entries) {
+        entries = new Map<string, Entry>()
+        recordsByKey.set(key, entries)
      }
-      const exists = collection.get(init)
+      const exists = entries.get(init)
      if (exists) return exists.state as S
      const state = init()
-      collection.set(init, {
+      entries.set(init, {
        state,
        dispose,
      })
@@ -26,9 +29,38 @@ export namespace State {
  }

  export async function dispose(key: string) {
-    for (const [_, entry] of entries.get(key)?.entries() ?? []) {
+    const entries = recordsByKey.get(key)
+    if (!entries) return
+
+    log.info("waiting for state disposal to complete", { key })
+
+    let disposalFinished = false
+
+    setTimeout(() => {
+      if (!disposalFinished) {
+        log.warn(
+          "state disposal is taking an unusually long time - if it does not complete in a reasonable time, please report this as a bug",
+          { key },
+        )
+      }
+    }, 10000).unref()
+
+    const tasks: Promise<void>[] = []
+    for (const entry of entries.values()) {
      if (!entry.dispose) continue
-      await entry.dispose(await entry.state)
+
+      const task = Promise.resolve(entry.state)
+        .then((state) => entry.dispose!(state))
+        .catch((error) => {
+          log.error("Error while disposing state:", { error, key })
+        })
+
+      tasks.push(task)
    }
+
+    await Promise.all(tasks)
+
+    disposalFinished = true
+    log.info("state disposal completed", { key })
  }
 }
@@ -37,6 +37,7 @@ export namespace ModelsDev {
      experimental: z.boolean().optional(),
      status: z.enum(["alpha", "beta"]).optional(),
      options: z.record(z.string(), z.any()),
+      headers: z.record(z.string(), z.string()).optional(),
      provider: z.object({ npm: z.string() }).optional(),
    })
    .meta({
@@ -306,6 +306,7 @@ export namespace Provider {
              input: ["text"],
              output: ["text"],
            },
+          headers: model.headers,
          provider: model.provider ?? existing?.provider,
        }
        if (model.id && model.id !== modelID) {
@@ -150,6 +150,7 @@ export namespace SessionCompaction {
        maxRetries: 0,
        model: model.language,
        providerOptions: ProviderTransform.providerOptions(model.npm, model.providerID, model.info.options),
+        headers: model.info.headers,
        abortSignal: signal,
        onError(error) {
          log.error("stream error", {
@@ -56,6 +56,7 @@ export namespace SessionPrompt {
  const log = Log.create({ service: "session.prompt" })
  export const OUTPUT_TOKEN_MAX = 32_000
  const MAX_RETRIES = 10
+  const DOOM_LOOP_THRESHOLD = 3

  export const Event = {
    Idle: Bus.event(
@@ -75,13 +76,22 @@ export namespace SessionPrompt {
          callback: (input: MessageV2.WithParts) => void
        }[]
      >()
+      const pending = new Set<Promise<void>>()
+
+      const track = (promise: Promise<void>) => {
+        pending.add(promise)
+        promise.finally(() => pending.delete(promise))
+      }

      return {
        queued,
+        pending,
+        track,
      }
    },
    async (current) => {
      current.queued.clear()
+      await Promise.allSettled([...current.pending])
    },
  )

@@ -226,13 +236,15 @@ export namespace SessionPrompt {
      step++
      await processor.next(msgs.findLast((m) => m.info.role === "user")?.info.id!)
      if (step === 1) {
-        ensureTitle({
-          session,
-          history: msgs,
-          message: userMsg,
-          providerID: model.providerID,
-          modelID: model.info.id,
-        })
+        state().track(
+          ensureTitle({
+            session,
+            history: msgs,
+            message: userMsg,
+            providerID: model.providerID,
+            modelID: model.info.id,
+          }),
+        )
        SessionSummary.summarize({
          sessionID: input.sessionID,
          messageID: userMsg.info.id,
@@ -269,13 +281,15 @@ export namespace SessionPrompt {
              toolName: "invalid",
            }
          },
-          headers:
-            model.providerID === "opencode"
+          headers: {
+            ...(model.providerID === "opencode"
              ? {
                  "x-opencode-session": input.sessionID,
                  "x-opencode-request": userMsg.info.id,
                }
-              : undefined,
+              : undefined),
+            ...model.info.headers,
+          },
          // set to 0, we handle loop
          maxRetries: 0,
          activeTools: Object.keys(tools).filter((x) => x !== "invalid"),
@@ -360,21 +374,21 @@ export namespace SessionPrompt {
            const stop = await SessionRetry.sleep(delayMs, abort.signal)
              .then(() => false)
              .catch((error) => {
+                let err = error
                if (error instanceof DOMException && error.name === "AbortError") {
-                  const err = new MessageV2.AbortedError(
+                  err = new MessageV2.AbortedError(
                    { message: error.message },
                    {
                      cause: error,
                    },
                  ).toObject()
-                  result.info.error = err
-                  Bus.publish(Session.Event.Error, {
-                    sessionID: result.info.sessionID,
-                    error: result.info.error,
-                  })
-                  return true
                }
-                throw error
+                result.info.error = err
+                Bus.publish(Session.Event.Error, {
+                  sessionID: result.info.sessionID,
+                  error: result.info.error,
+                })
+                return true
              })

            if (stop) break
@@ -533,7 +547,6 @@ export namespace SessionPrompt {
              args,
            },
          )
-          item.parameters.parse(args)
          const result = await item.execute(args, {
            sessionID: input.sessionID,
            abort: options.abortSignal!,
@@ -617,7 +630,7 @@ export namespace SessionPrompt {

        return {
          title: "",
-          metadata: {},
+          metadata: result.metadata ?? {},
          output,
        }
      }
@@ -1068,6 +1081,32 @@ export namespace SessionPrompt {
                    metadata: value.providerMetadata,
                  })
                  toolcalls[value.toolCallId] = part as MessageV2.ToolPart
+
+                  const parts = await Session.getParts(assistantMsg.id)
+                  const lastThree = parts.slice(-DOOM_LOOP_THRESHOLD)
+                  if (
+                    lastThree.length === DOOM_LOOP_THRESHOLD &&
+                    lastThree.every(
+                      (p) =>
+                        p.type === "tool" &&
+                        p.tool === value.toolName &&
+                        p.state.status !== "pending" &&
+                        JSON.stringify(p.state.input) === JSON.stringify(value.input),
+                    )
+                  ) {
+                    await Permission.ask({
+                      type: "doom-loop",
+                      pattern: value.toolName,
+                      sessionID: assistantMsg.sessionID,
+                      messageID: assistantMsg.id,
+                      callID: value.toolCallId,
+                      title: `Possible doom loop: "${value.toolName}" called ${DOOM_LOOP_THRESHOLD} times with identical arguments`,
+                      metadata: {
+                        tool: value.toolName,
+                        input: value.input,
+                      },
+                    })
+                  }
                }
                break
              }
@@ -1504,6 +1543,9 @@ export namespace SessionPrompt {
  })
  export type CommandInput = z.infer<typeof CommandInput>
  const bashRegex = /!`([^`]+)`/g
+  const argsRegex = /(?:[^\s"']+|"[^"]*"|'[^']*')+/g
+  const placeholderRegex = /\$(\d+)/g
+  const quoteTrimRegex = /^["']|["']$/g
  /**
   * Regular expression to match @ file references in text
   * Matches @ followed by file paths, excluding commas, periods at end of sentences, and backticks
@@ -1515,7 +1557,25 @@ export namespace SessionPrompt {
    const command = await Command.get(input.command)
    const agentName = command.agent ?? input.agent ?? "build"

-    let template = command.template.replaceAll("$ARGUMENTS", input.arguments)
+    const raw = input.arguments.match(argsRegex) ?? []
+    const args = raw.map((arg) => arg.replace(quoteTrimRegex, ""))
+
+    const placeholders = command.template.match(placeholderRegex) ?? []
+    let last = 0
+    for (const item of placeholders) {
+      const value = Number(item.slice(1))
+      if (value > last) last = value
+    }
+
+    // Let the final placeholder swallow any extra arguments so prompts read naturally
+    const withArgs = command.template.replaceAll(placeholderRegex, (_, index) => {
+      const position = Number(index)
+      const argIndex = position - 1
+      if (argIndex >= args.length) return ""
+      if (position === last) return args.slice(argIndex).join(" ")
+      return args[argIndex]
+    })
+    let template = withArgs.replaceAll("$ARGUMENTS", input.arguments)

    const shell = ConfigMarkdown.shell(template)
    if (shell.length > 0) {
@@ -1745,7 +1805,7 @@ export namespace SessionPrompt {
        thinkingBudget: 0,
      }
    }
-    generateText({
+    await generateText({
      maxOutputTokens: small.info.reasoning ? 1500 : 20,
      providerOptions: ProviderTransform.providerOptions(small.npm, small.providerID, options),
      messages: [
@@ -1769,6 +1829,7 @@ export namespace SessionPrompt {
          },
        ]),
      ],
+      headers: small.info.headers,
      model: small.language,
    })
      .then((result) => {
@@ -84,6 +84,7 @@ export namespace SessionSummary {
            content: textPart?.text ?? "",
          },
        ],
+        headers:small.info.headers,
        model: small.language,
      })
      log.info("title", { title: result.text })
@@ -116,6 +117,7 @@ export namespace SessionSummary {
            `,
            },
          ],
+          headers: small.info.headers
        })
        summary = result.text
      }
@@ -115,22 +115,10 @@ export const BashTool = Tool.define("bash", {
        }
        if (action === "ask") {
          const pattern = (() => {
-            let head = ""
-            let sub: string | undefined
-            for (let i = 0; i < node.childCount; i++) {
-              const child = node.child(i)
-              if (!child) continue
-              if (child.type === "command_name") {
-                if (!head) {
-                  head = child.text
-                }
-                continue
-              }
-              if (!sub && child.type === "word") {
-                if (!child.text.startsWith("-")) sub = child.text
-              }
-            }
-            if (!head) return
+            if (command.length === 0) return
+            const head = command[0]
+            // Find first non-flag argument as subcommand
+            const sub = command.slice(1).find((arg) => !arg.startsWith("-"))
            return sub ? `${head} ${sub} *` : `${head} *`
          })()
          if (pattern) {
@@ -33,6 +33,14 @@ export const TaskTool = Tool.define("task", async () => {
      })
      const msg = await Session.getMessage({ sessionID: ctx.sessionID, messageID: ctx.messageID })
      if (msg.info.role !== "assistant") throw new Error("Not an assistant message")
+
+      ctx.metadata({
+        title: params.description,
+        metadata: {
+          sessionId: session.id,
+        },
+      })
+
      const messageID = Identifier.ascending("message")
      const parts: Record<string, MessageV2.ToolPart> = {}
      const unsub = Bus.subscribe(MessageV2.Event.PartUpdated, async (evt) => {
@@ -44,6 +52,7 @@ export const TaskTool = Tool.define("task", async () => {
          title: params.description,
          metadata: {
            summary: Object.values(parts).sort((a, b) => a.id?.localeCompare(b.id)),
+            sessionId: session.id,
          },
        })
      })
@@ -87,6 +96,7 @@ export const TaskTool = Tool.define("task", async () => {
        title: params.description,
        metadata: {
          summary: all,
+          sessionId: session.id,
        },
        output: (result.parts.findLast((x: any) => x.type === "text") as any)?.text ?? "",
      }
@@ -42,8 +42,13 @@ export namespace Tool {
    return {
      id,
      init: async () => {
-        if (init instanceof Function) return init()
-        return init
+        const toolInfo = init instanceof Function ? await init() : init
+        const execute = toolInfo.execute
+        toolInfo.execute = (args, ctx) => {
+          toolInfo.parameters.parse(args)
+          return execute(args, ctx)
+        }
+        return toolInfo
      },
    }
  }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/plugin",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "type": "module",
  "scripts": {
    "typecheck": "tsgo --noEmit",
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/sdk",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "type": "module",
  "scripts": {
    "typecheck": "tsgo --noEmit",
@@ -275,6 +275,10 @@ export type McpLocalConfig = {
   * Enable or disable the MCP server on startup
   */
  enabled?: boolean
+  /**
+   * Timeout in ms for fetching tools from the MCP server. Defaults to 5000 (5 seconds) if not specified.
+   */
+  timeout?: number
 }

 export type McpRemoteConfig = {
@@ -296,6 +300,10 @@ export type McpRemoteConfig = {
  headers?: {
    [key: string]: string
  }
+  /**
+   * Timeout in ms for fetching tools from the MCP server. Defaults to 5000 (5 seconds) if not specified.
+   */
+  timeout?: number
 }

 /**
@@ -422,6 +430,9 @@ export type Config = {
          options?: {
            [key: string]: unknown
          }
+          headers?: {
+            [key: string]: string
+          }
          provider?: {
            npm: string
          }
@@ -983,6 +994,9 @@ export type Model = {
  options: {
    [key: string]: unknown
  }
+  headers?: {
+    [key: string]: string
+  }
  provider?: {
    npm: string
  }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/slack",
-  "version": "0.15.28",
+  "version": "0.15.30",
  "type": "module",
  "scripts": {
    "dev": "bun run src/index.ts",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
opencode	504a599473	release: v0.15.30	2025-10-31 06:12:16 +00:00
Dax Raad	750b9f80a5	sync	2025-10-31 02:00:11 -04:00
Aiden Cline	dfdd009750	fix: bash permission case	2025-10-31 00:52:46 -05:00
Haris Gušić GitHub Aiden Cline	c1ada302f9	fix: Opencode hangs after exit (#3481 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-30 23:57:58 -05:00
FilipandGitHub	51e4c9fc4c	add optional headers field to model config (#3546 )	2025-10-30 23:35:26 -05:00
Jay V	43e272e6c4	ignore: refactor header context menu to use CSS styling and router navigation	2025-10-30 20:24:29 -04:00
David Hill	2f9f189f39	Merge branch 'dev' of https://github.com/sst/opencode into dev	2025-10-30 22:53:00 +00:00
David Hill	f3c70f4ea8	Asset updates	2025-10-30 22:52:56 +00:00
David Hill	5d4441cd2b	Fix download zip	2025-10-30 22:41:32 +00:00
David Hill	bf5f34ace7	Brand Assets Zip	2025-10-30 22:38:12 +00:00
David Hill	9589657d21	Configure png and svg downloads	2025-10-30 22:25:07 +00:00
David Hill	37baed99c1	Brand page	2025-10-30 22:13:48 +00:00
Ritoban Dutta GitHub Aiden Cline	a3ba740de4	fix: resolve hanging permission prompts in headless mode (#3522 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-30 15:37:41 -05:00
Adam	dc96664578	chore: sanitize tool parts locally	2025-10-30 14:57:38 -05:00
Jay V	4dafc532a8	ignore: update project stats to reflect current growth	2025-10-30 15:47:41 -04:00
Adam	984fe4b769	wip: desktop work	2025-10-30 14:46:38 -05:00
Adam	48f50cf55e	wip: desktop work	2025-10-30 14:41:15 -05:00
Frank	ba13f8da08	wip: fix	2025-10-30 15:15:46 -04:00
Frank	1a8b494055	wip: zen	2025-10-30 15:10:29 -04:00
Frank	4f02d7d424	zen: allow byok requests w/o a balance	2025-10-30 15:10:29 -04:00
Adam	4cebd69bf0	wip: desktop work	2025-10-30 13:54:52 -05:00
Adam	dc6e54503c	wip: desktop work	2025-10-30 13:49:29 -05:00
David Hill	f18847d739	Adding links to legal	2025-10-30 17:37:30 +00:00
Adam	2a0b67d84f	fix: lander space	2025-10-30 12:32:25 -05:00
Adam	89eac737a5	wip: desktop work	2025-10-30 12:30:45 -05:00
Brandon GitHub Brandon Wisnicki	c68607fb2b	feat: Adds session id to Agent context metadata (#3559 ) Co-authored-by: Brandon Wisnicki <bwisnicki@palantir.com>	2025-10-30 12:15:21 -05:00
Adam	e944ff0286	wip: desktop work	2025-10-30 12:13:02 -05:00
Adam	ee7612a31c	wip: desktop work	2025-10-30 12:02:51 -05:00
Adam	582ed7c363	wip: desktop work	2025-10-30 12:02:50 -05:00
Adam	dce287a42d	wip: desktop work	2025-10-30 12:02:50 -05:00
Adam	19974daa67	wip: desktop work	2025-10-30 12:02:50 -05:00
Adam	dcf865a889	wip: desktop work	2025-10-30 12:02:50 -05:00
Adam	3b20935959	wip: desktop work	2025-10-30 12:02:50 -05:00
Adam	30f4c2cf4c	wip: desktop work	2025-10-30 12:02:49 -05:00
Aiden ClineandGitHub	3541fdcb20	tweak: adjust deno lsp (#3581 )	2025-10-30 11:59:54 -05:00
David Hill	15de97c10f	Change position	2025-10-30 16:55:23 +00:00
Jay V	ee3fd3f7be	ignore:lander	2025-10-30 12:40:07 -04:00
Haris GušićandGitHub	dc87659791	tweak: move zod validation for tools to ensure it always runs (#3565 )	2025-10-30 11:31:44 -05:00
Andrew PashynnykandGitHub	149f5eaa2e	fix: preserve metadata from MCP tool results in `tool.execute.after` hook (#3573 )	2025-10-30 11:10:42 -05:00
Aiden Cline	42e0b47a7d	fix: better frontmatter errors	2025-10-30 10:56:40 -05:00
oribiandGitHub	2d5df3ad76	fix: agent model selection priority issue (#3572 )	2025-10-30 09:32:39 -05:00
David Hill	f202fa0d89	Theme aware svgs to be copied	2025-10-30 13:01:48 +00:00
David Hill	0abffdb8f8	Icon size update	2025-10-30 12:46:34 +00:00
David Hill	e533d48b51	New assets	2025-10-30 12:36:41 +00:00
David Hill	439372704d	Close content menu with escape	2025-10-30 12:19:26 +00:00
David Hill	d7277fd305	Merge branch 'dev' of https://github.com/sst/opencode into dev	2025-10-30 12:16:15 +00:00
GitHub Action	5ae73637d3	ignore: update download stats 2025-10-30	2025-10-30 12:04:36 +00:00
David Hill	bf0cbf2bfa	Adding polish	2025-10-30 11:37:00 +00:00
opencode	4b3a841dd9	release: v0.15.29	2025-10-30 06:49:34 +00:00
Aiden Cline	aca32eaa1c	fix: tui not showing some errors	2025-10-30 01:41:28 -05:00
Matt Gillard GitHub Matt Gillardopencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>rekram1-node	3ae75d7031	add optional timeout field to mcp config to allow users to use responding servers (#3558 ) Co-authored-by: Matt Gillard <matt-github@gillard.biz> Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com>	2025-10-30 01:25:24 -05:00
Khang Ha (Kelvin)andGitHub	4b5e447961	Fix "bufio.Scanner token too long" error by replacing Scanner with Reader in SSE (#3531 )	2025-10-30 01:04:06 -05:00
Aiden Cline	7a2b8eae76	tweak: catch err	2025-10-30 00:29:30 -05:00
ElecTwix GitHub Aiden Cline	d983b9485d	fix: add doom loop detection (#3445 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-30 00:13:18 -05:00
GitHub Action	14836de276	ignore: update download stats 2025-10-30	2025-10-30 02:28:13 +00:00
David Hill	e265efec09	Add right click menu to logo	2025-10-30 00:40:24 +00:00
David Hill	5ae00ba567	Brand page	2025-10-30 00:22:49 +00:00
Jay V	a0f032c9b9	ignore: fix email formatting to ensure proper line breaks between message and signature	2025-10-29 19:19:28 -04:00
Jay V	e6132fc6a4	docs: enterprise	2025-10-29 19:07:43 -04:00
Frank	950b608c4d	zen: show browser default time	2025-10-29 17:14:28 -04:00
Adam	3210df7428	wip: desktop work	2025-10-29 16:04:34 -05:00
Adam	cdeb82e9ca	wip: desktop work	2025-10-29 16:04:34 -05:00
rienkim GitHub Aiden Cline	a9cae7b335	feat: add positional argument support to slash commands (#3456 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-29 14:54:24 -05:00
Frank	972c0893dd	zen: fix unified endpoint for codex	2025-10-29 15:06:37 -04:00