release: v0.15.1

fix: disable workspace symbol lookup to prevent LSP performance issues
fix: pass options to compact (#3136 )
2026-08-04 01:06:16 -04:00 · 2025-10-13 18:14:52 +00:00 · 2025-10-13 14:05:54 -04:00 · 2025-10-13 10:42:39 -05:00 · 2025-10-12 21:35:31 -05:00 · 2025-10-12 16:48:03 -05:00
99 changed files with 2129 additions and 1298 deletions
@@ -0,0 +1,20 @@
+name: "Setup Bun"
+description: "Setup Bun with caching and install dependencies"
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v2
+
+    - name: Cache ~/.bun
+      id: cache-bun
+      uses: actions/cache@v4
+      with:
+        path: ~/.bun
+        key: ${{ runner.os }}-bun-${{ hashFiles('bun.lockb', 'bun.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-bun-
+
+    - name: Install dependencies
+      run: bun install
+      shell: bash
@@ -15,11 +15,7 @@ jobs:
    steps:
      - uses: actions/checkout@v3

-      - uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.2.21
-
-      - run: bun install
+      - uses: ./.github/actions/setup-bun

      - run: bun sst deploy --stage=${{ github.ref_name }}
        env:
@@ -20,13 +20,10 @@ jobs:
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.2.21
+        uses: ./.github/actions/setup-bun

      - name: run
        run: |
-          bun install
          ./script/format.ts
        env:
          CI: true
@@ -19,16 +19,13 @@ jobs:
        with:
          fetch-depth: 0

-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.2.21
+      - uses: ./.github/actions/setup-bun

      - run: git fetch --force --tags
      - run: bun install -g @vscode/vsce

      - name: Publish
        run: |
-          bun install
          ./script/publish
        working-directory: ./sdks/vscode
        env:
@@ -35,18 +35,7 @@ jobs:
          cache: true
          cache-dependency-path: go.sum

-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.2.21
-
-      - name: Cache ~/.bun
-        id: cache-bun
-        uses: actions/cache@v3
-        with:
-          path: ~/.bun
-          key: ${{ runner.os }}-bun-1-2-21-${{ hashFiles('bun.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-bun-1-2-21-
+      - uses: ./.github/actions/setup-bun

      - name: Install makepkg
        run: |
@@ -60,8 +49,6 @@ jobs:
          git config --global user.email "opencode@sst.dev"
          git config --global user.name "opencode"
          ssh-keyscan -H aur.archlinux.org >> ~/.ssh/known_hosts || true
-      - name: Install dependencies
-        run: bun install

      - name: Install OpenCode
        run: curl -fsSL https://opencode.ai/install | bash
@@ -24,21 +24,7 @@ jobs:
          cache: true
          cache-dependency-path: go.sum

-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.2.21
-
-      - name: Cache ~/.bun
-        id: cache-bun
-        uses: actions/cache@v3
-        with:
-          path: ~/.bun
-          key: ${{ runner.os }}-bun-1-2-21-${{ hashFiles('bun.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-bun-1-2-21-
-
-      - name: Install dependencies
-        run: bun install
+      - uses: ./.github/actions/setup-bun

      - name: Publish
        run: |
@@ -16,9 +16,7 @@ jobs:
        uses: actions/checkout@v4

      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
+        uses: ./.github/actions/setup-bun

      - name: Run stats script
        run: bun script/stats.ts
@@ -18,15 +18,12 @@ jobs:
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.2.21
+        uses: ./.github/actions/setup-bun

      - name: run
        run: |
          git config --global user.email "bot@opencode.ai"
          git config --global user.name "opencode"
-          bun install
          bun turbo test
        env:
          CI: true
@@ -13,12 +13,7 @@ jobs:
        uses: actions/checkout@v4

      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.2.21
-
-      - name: Install dependencies
-        run: bun install
+        uses: ./.github/actions/setup-bun

      - name: Run typecheck
        run: bun typecheck
@@ -98,6 +98,7 @@ It's very similar to Claude Code in terms of capability. Here are the key differ

 - 100% open source
 - Not coupled to any provider. Although Anthropic is recommended, OpenCode can be used with OpenAI, Google or even local models. As models evolve the gaps between them will close and pricing will drop so being provider-agnostic is important.
+- Out of the box LSP support
 - A focus on TUI. OpenCode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
 - A client/server architecture. This for example can allow OpenCode to run on your computer, while you can drive it remotely from a mobile app. Meaning that the TUI frontend is just one of the possible clients.

@@ -104,3 +104,6 @@
 | 2025-10-07 | 467,336 (+6,409) | 385,438 (+5,949)  | 852,774 (+12,358) |
 | 2025-10-08 | 474,643 (+7,307) | 394,139 (+8,701)  | 868,782 (+16,008) |
 | 2025-10-09 | 479,203 (+4,560) | 400,526 (+6,387)  | 879,729 (+10,947) |
+| 2025-10-10 | 484,374 (+5,171) | 406,015 (+5,489)  | 890,389 (+10,660) |
+| 2025-10-11 | 488,427 (+4,053) | 414,699 (+8,684)  | 903,126 (+12,737) |
+| 2025-10-12 | 492,125 (+3,698) | 418,745 (+4,046)  | 910,870 (+7,744)  |
@@ -3,10 +3,14 @@
  "workspaces": {
    "": {
      "name": "opencode",
+      "dependencies": {
+        "@opencode-ai/sdk": "workspace:*",
+      },
      "devDependencies": {
+        "@tsconfig/bun": "1.0.9",
        "husky": "9.1.7",
        "prettier": "3.6.2",
-        "sst": "3.17.13",
+        "sst": "3.17.19",
        "turbo": "2.5.6",
      },
    },
@@ -25,10 +29,13 @@
        "vinxi": "^0.5.7",
        "zod": "catalog:",
      },
+      "devDependencies": {
+        "typescript": "catalog:",
+      },
    },
    "packages/console/core": {
      "name": "@opencode-ai/console-core",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@aws-sdk/client-sts": "3.782.0",
        "@jsx-email/render": "1.1.1",
@@ -40,27 +47,36 @@
        "postgres": "3.4.7",
        "stripe": "18.0.0",
        "ulid": "3.0.0",
+        "zod": "catalog:",
      },
      "devDependencies": {
+        "@cloudflare/workers-types": "4.20251008.0",
+        "@tsconfig/node22": "22.0.2",
+        "@types/bun": "1.3.0",
+        "@types/node": "24.7.1",
        "drizzle-kit": "0.30.5",
        "mysql2": "3.14.4",
+        "typescript": "catalog:",
      },
    },
    "packages/console/function": {
      "name": "@opencode-ai/console-function",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@ai-sdk/anthropic": "2.0.0",
        "@ai-sdk/openai": "2.0.2",
        "@ai-sdk/openai-compatible": "1.0.1",
        "@hono/zod-validator": "catalog:",
        "@openauthjs/openauth": "0.0.0-20250322224806",
+        "@opencode-ai/console-core": "workspace:*",
+        "@opencode-ai/console-resource": "workspace:*",
        "ai": "catalog:",
        "hono": "catalog:",
        "zod": "catalog:",
      },
      "devDependencies": {
-        "@cloudflare/workers-types": "4.20250522.0",
+        "@cloudflare/workers-types": "4.20251008.0",
+        "@tsconfig/node22": "22.0.2",
        "@types/node": "catalog:",
        "openai": "5.11.0",
        "typescript": "catalog:",
@@ -68,12 +84,14 @@
    },
    "packages/console/mail": {
      "name": "@opencode-ai/console-mail",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@jsx-email/all": "2.2.3",
        "@jsx-email/cli": "1.4.3",
+        "@tsconfig/bun": "1.0.9",
        "@types/react": "18.0.25",
        "react": "18.2.0",
+        "solid-js": "catalog:",
      },
    },
    "packages/console/resource": {
@@ -81,17 +99,20 @@
      "dependencies": {
        "@cloudflare/workers-types": "^4.20250830.0",
      },
+      "devDependencies": {
+        "@tsconfig/node22": "22.0.2",
+      },
    },
    "packages/console/scripts": {
      "name": "@opencode-ai/console-scripts",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@opencode-ai/console-core": "workspace:*",
      },
    },
    "packages/desktop": {
      "name": "@opencode-ai/desktop",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@kobalte/core": "catalog:",
        "@opencode-ai/sdk": "workspace:*",
@@ -115,6 +136,7 @@
      },
      "devDependencies": {
        "@tailwindcss/vite": "4.1.11",
+        "@tsconfig/bun": "1.0.9",
        "@types/luxon": "3.7.1",
        "@types/node": "catalog:",
        "typescript": "catalog:",
@@ -125,7 +147,7 @@
    },
    "packages/function": {
      "name": "@opencode-ai/function",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@octokit/auth-app": "8.0.1",
        "@octokit/rest": "22.0.0",
@@ -140,7 +162,7 @@
    },
    "packages/opencode": {
      "name": "opencode",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -195,28 +217,30 @@
    },
    "packages/plugin": {
      "name": "@opencode-ai/plugin",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@opencode-ai/sdk": "workspace:*",
        "zod": "catalog:",
      },
      "devDependencies": {
        "@tsconfig/node22": "catalog:",
+        "@types/node": "24.7.1",
        "typescript": "catalog:",
      },
    },
    "packages/sdk/js": {
      "name": "@opencode-ai/sdk",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "devDependencies": {
        "@hey-api/openapi-ts": "0.81.0",
        "@tsconfig/node22": "catalog:",
+        "@types/node": "24.7.1",
        "typescript": "catalog:",
      },
    },
    "packages/web": {
      "name": "@opencode-ai/web",
-      "version": "0.14.7",
+      "version": "0.15.1",
      "dependencies": {
        "@astrojs/cloudflare": "12.6.3",
        "@astrojs/markdown-remark": "6.3.1",
@@ -254,11 +278,14 @@
    "web-tree-sitter",
    "tree-sitter-bash",
  ],
+  "overrides": {
+    "@types/bun": "catalog:",
+  },
  "catalog": {
    "@hono/zod-validator": "0.4.2",
    "@kobalte/core": "0.13.11",
    "@tsconfig/node22": "22.0.2",
-    "@types/bun": "1.2.21",
+    "@types/bun": "1.3.0",
    "@types/node": "22.13.9",
    "ai": "5.0.8",
    "fuzzysort": "3.1.0",
@@ -452,7 +479,7 @@

    "@cloudflare/workerd-windows-64": ["@cloudflare/workerd-windows-64@1.20250927.0", "", { "os": "win32", "cpu": "x64" }, "sha512-+m124IiM149QvvzAOrO766uTdILqXJZqzZjqTaMTaWXegjjsJwGSL6v9d71TSFntEwxeXnpJPBkVWyKZFjqrvg=="],

-    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20250522.0", "", {}, "sha512-9RIffHobc35JWeddzBguGgPa4wLDr5x5F94+0/qy7LiV6pTBQ/M5qGEN9VA16IDT3EUpYI0WKh6VpcmeVEtVtw=="],
+    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20251008.0", "", {}, "sha512-dZLkO4PbCL0qcCSKzuW7KE4GYe49lI12LCfQ5y9XeSwgYBoAUbwH4gmJ6A0qUIURiTJTkGkRkhVPqpq2XNgYRA=="],

    "@corvu/utils": ["@corvu/utils@0.4.2", "", { "dependencies": { "@floating-ui/dom": "^1.6.11" }, "peerDependencies": { "solid-js": "^1.8" } }, "sha512-Ox2kYyxy7NoXdKWdHeDEjZxClwzO4SKM8plAaVwmAJPxHMqA0rLOoAsa+hBDwRLpctf+ZRnAd/ykguuJidnaTA=="],

@@ -1140,7 +1167,7 @@

    "@thisbeyond/solid-dnd": ["@thisbeyond/solid-dnd@0.7.5", "", { "peerDependencies": { "solid-js": "^1.5" } }, "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw=="],

-    "@tsconfig/bun": ["@tsconfig/bun@1.0.7", "", {}, "sha512-udGrGJBNQdXGVulehc1aWT73wkR9wdaGBtB6yL70RJsqwW/yJhIg6ZbRlPOfIUiFNrnBuYLBi9CSmMKfDC7dvA=="],
+    "@tsconfig/bun": ["@tsconfig/bun@1.0.9", "", {}, "sha512-4M0/Ivfwcpz325z6CwSifOBZYji3DFOEpY6zEUt0+Xi2qRhzwvmqQN9XAHJh3OVvRJuAqVTLU2abdCplvp6mwQ=="],

    "@tsconfig/node22": ["@tsconfig/node22@22.0.2", "", {}, "sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA=="],

@@ -1154,7 +1181,7 @@

    "@types/braces": ["@types/braces@3.0.5", "", {}, "sha512-SQFof9H+LXeWNz8wDe7oN5zu7ket0qwMu5vZubW4GCJ8Kkeh6nBWUz87+KTz/G3Kqsrp0j/W253XJb3KMEeg3w=="],

-    "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
+    "@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="],

    "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],

@@ -1182,7 +1209,7 @@

    "@types/nlcst": ["@types/nlcst@2.0.3", "", { "dependencies": { "@types/unist": "*" } }, "sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA=="],

-    "@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+    "@types/node": ["@types/node@24.7.1", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-CmyhGZanP88uuC5GpWU9q+fI61j2SkhO3UGMUdfYRE6Bcy0ccyzn1Rqj9YAB/ZY4kOXmNf0ocah5GtphmLMP6Q=="],

    "@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],

@@ -1368,7 +1395,7 @@

    "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],

-    "bun-types": ["bun-types@1.2.21", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-sa2Tj77Ijc/NTLS0/Odjq/qngmEPZfbfnOERi0KRUYhT9R8M4VBioWVmMWE5GrYbKMc+5lVybXygLdibHaqVqw=="],
+    "bun-types": ["bun-types@1.3.0", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ=="],

    "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],

@@ -2690,23 +2717,21 @@

    "sqlstring": ["sqlstring@2.3.3", "", {}, "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg=="],

-    "sst": ["sst@3.17.13", "", { "dependencies": { "aws-sdk": "2.1692.0", "aws4fetch": "1.0.18", "jose": "5.2.3", "opencontrol": "0.0.6", "openid-client": "5.6.4" }, "optionalDependencies": { "sst-darwin-arm64": "3.17.13", "sst-darwin-x64": "3.17.13", "sst-linux-arm64": "3.17.13", "sst-linux-x64": "3.17.13", "sst-linux-x86": "3.17.13", "sst-win32-arm64": "3.17.13", "sst-win32-x64": "3.17.13", "sst-win32-x86": "3.17.13" }, "bin": { "sst": "bin/sst.mjs" } }, "sha512-NaNTZL7uk2AsXzPBySQy7aqXlStXorR+bA785NxvCbskwkc44nVSQcEsvX5tdsD6/jrWpw9tDy4sStv2ycLAng=="],
+    "sst": ["sst@3.17.19", "", { "dependencies": { "aws-sdk": "2.1692.0", "aws4fetch": "1.0.18", "jose": "5.2.3", "opencontrol": "0.0.6", "openid-client": "5.6.4" }, "optionalDependencies": { "sst-darwin-arm64": "3.17.19", "sst-darwin-x64": "3.17.19", "sst-linux-arm64": "3.17.19", "sst-linux-x64": "3.17.19", "sst-linux-x86": "3.17.19", "sst-win32-arm64": "3.17.19", "sst-win32-x64": "3.17.19", "sst-win32-x86": "3.17.19" }, "bin": { "sst": "bin/sst.mjs" } }, "sha512-j0FlQhFZW+QWCczzqfPr6fZAF0Um7lP1tbGdd7zkbjFlxdk9BUBI4CYXUnopC6KaTMtjvpfg3XRF7v0bDc9g+A=="],

-    "sst-darwin-arm64": ["sst-darwin-arm64@3.17.13", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HZaDReT/c+2CcEnFkYjMty63II2ckQrUniiSdoEH6eAWyU1Iy7UwKK4I2GYm+5dy9xeSBaOKga6FMdLqFxIiUg=="],
+    "sst-darwin-arm64": ["sst-darwin-arm64@3.17.19", "", { "os": "darwin", "cpu": "arm64" }, "sha512-6FeEgPqXkRT3o5qV0xktJ1eUiscJiPLBcGaxOxIEClpkVggZM83hO7Nizx/cAaAMhr1XQhbOZcKYueDHPdUY+Q=="],

-    "sst-darwin-x64": ["sst-darwin-x64@3.17.13", "", { "os": "darwin", "cpu": "x64" }, "sha512-1DlYMrmrI5RY3/Ob039JatgvDKZ5QNtyRkVu0WcnsOvcxFE4dzrCiYKYHg2A+FMDl+H1qcwy2gGA3BTwC9in1w=="],
+    "sst-darwin-x64": ["sst-darwin-x64@3.17.19", "", { "os": "darwin", "cpu": "x64" }, "sha512-/z78dxfLHG8FtOhpjMnYSpKSdQjfdyKbq+cL3eud2+g2BQr7IyQ8BWNGimk2oadh38V3r6dO1/5aVJh3x3l1rg=="],

-    "sst-linux-arm64": ["sst-linux-arm64@3.17.13", "", { "os": "linux", "cpu": "arm64" }, "sha512-A4+ZamchUdaX0pqvYWZ+r7OP1bruwEj9qgWT5kU7Q5pqaotIsEitYQi0q9nZFKH+5mXYesUwSy5FA+Q8T3X/Rg=="],
+    "sst-linux-arm64": ["sst-linux-arm64@3.17.19", "", { "os": "linux", "cpu": "arm64" }, "sha512-vbcMjiuLVxZ7352ajGlMqsS4J5AkAYvjLmsEALySUBVQhJUO9U7pk2P+Orfn702ZcO+6+NkGG9AL/g3K9EM1Tg=="],

-    "sst-linux-x64": ["sst-linux-x64@3.17.13", "", { "os": "linux", "cpu": "x64" }, "sha512-yhKZc5CojqjB2DnyeVka5jeRb4oc3lBx8Qf6or0w4cs47SBIqyvO0iR/3IeKvRRL1hiEUeUF8r/q83rQo9jZMw=="],
+    "sst-linux-x64": ["sst-linux-x64@3.17.19", "", { "os": "linux", "cpu": "x64" }, "sha512-gkNNmuHyvKjcb7RwMyoUH4wtgd7/bH7vUlMbcVsDzwt38y7+iTxyPMbcihucw42wDQRaDJtkDneSqj08U+MTFQ=="],

-    "sst-linux-x86": ["sst-linux-x86@3.17.13", "", { "os": "linux", "cpu": "none" }, "sha512-G1FIUmpUaECB/3CV5EO/y1QmV5mQ8RUkFeZq64oyILEEaMzSWWKz0glHzQ3+p316VE74MzbktiWRqsCKQy8GeA=="],
+    "sst-linux-x86": ["sst-linux-x86@3.17.19", "", { "os": "linux", "cpu": "none" }, "sha512-Bsvunkh4onZRVv4Rxq7bT/63qQOg2KJoQKhAQtFkJdbri/cOA2QWkzqH8+pC5Sv9rSvbcIJAEIhMXILC0pqCJw=="],

-    "sst-win32-arm64": ["sst-win32-arm64@3.17.13", "", { "os": "win32", "cpu": "arm64" }, "sha512-9uCiIXmsGoxGeNWgM81x/d6V/vecjoiHXhBUPDGlQ1Dct1SbtHAgaf/g2ec5XwSQb9B/tne4qk81eMlTl83Z1A=="],
+    "sst-win32-x64": ["sst-win32-x64@3.17.19", "", { "os": "win32", "cpu": "x64" }, "sha512-zgxSkGWZ1dewAr4R3slN/d3X9yumQDvAUOlJiX/6QE9Z67t/XNlow4+5i3L2oz4WHAFi59Un12YxbfM+RsBDmA=="],

-    "sst-win32-x64": ["sst-win32-x64@3.17.13", "", { "os": "win32", "cpu": "x64" }, "sha512-hTuj4rFSCI/9tX4NMUpNJ69Q9td/giekELDRNv03ys8TpJGoGvPT8D6VD1eX7j1CQnOZIgeEphfW9WmCXkLaIA=="],
-
-    "sst-win32-x86": ["sst-win32-x86@3.17.13", "", { "os": "win32", "cpu": "none" }, "sha512-AuMDGux+H1kPckKJ7Szgi04EpBoOKh/v5zFNAPjvWSkcWcGZ+hsBUx3h/FO/AkGK3RnlLMRj4CQQLoa10RSSIg=="],
+    "sst-win32-x86": ["sst-win32-x86@3.17.19", "", { "os": "win32", "cpu": "none" }, "sha512-z8S0kyb0ibz9Q3cNYDpcKYX47jys7j/mdebC8HUhtED1qKEAfqQ1vsR+zvWyN64Z9Ijj7aPi1KwNV6Et3d7F8g=="],

    "stackframe": ["stackframe@1.3.4", "", {}, "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="],

@@ -2856,7 +2881,7 @@

    "undici": ["undici@7.14.0", "", {}, "sha512-Vqs8HTzjpQXZeXdpsfChQTlafcMQaaIwnGwLam1wudSSjlJeQ3bw1j+TLPePgrCnCpUXx7Ba5Pdpf5OBih62NQ=="],

-    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+    "undici-types": ["undici-types@7.14.0", "", {}, "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA=="],

    "unenv": ["unenv@1.10.0", "", { "dependencies": { "consola": "^3.2.3", "defu": "^6.1.4", "mime": "^3.0.0", "node-fetch-native": "^1.6.4", "pathe": "^1.1.2" } }, "sha512-wY5bskBQFL9n3Eca5XnhH6KbUo/tfvkwm9OpcdCvLaeA7piBNbavbOKJySEwQ1V0RH6HvNlSAFRTpvTqgKRQXQ=="],

@@ -3124,12 +3149,20 @@

    "@openauthjs/openauth/jose": ["jose@5.9.6", "", {}, "sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ=="],

-    "@opencode-ai/console-resource/@cloudflare/workers-types": ["@cloudflare/workers-types@4.20251001.0", "", {}, "sha512-MXseDjmqL1hIdQCqwHDMG8SE60W4FdwqLsofZjo/KtLH9zFcoQfZkCYyQrdfEJINiSoNJjrup7WR6KsqiFUSsg=="],
+    "@opencode-ai/console-function/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
+    "@opencode-ai/desktop/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
+    "@opencode-ai/function/@cloudflare/workers-types": ["@cloudflare/workers-types@4.20250522.0", "", {}, "sha512-9RIffHobc35JWeddzBguGgPa4wLDr5x5F94+0/qy7LiV6pTBQ/M5qGEN9VA16IDT3EUpYI0WKh6VpcmeVEtVtw=="],
+
+    "@opencode-ai/function/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],

    "@opencode-ai/web/@shikijs/transformers": ["@shikijs/transformers@3.4.2", "", { "dependencies": { "@shikijs/core": "3.4.2", "@shikijs/types": "3.4.2" } }, "sha512-I5baLVi/ynLEOZoWSAMlACHNnG+yw5HDmse0oe+GW6U1u+ULdEB3UHiVWaHoJSSONV7tlcVxuaMy74sREDkSvg=="],

    "@opencode-ai/web/@types/luxon": ["@types/luxon@3.6.2", "", {}, "sha512-R/BdP7OxEMc44l2Ex5lSXHoIXTB2JLNa3y2QISIbr58U/YcsffyQrYW//hZSdrfxrjRZj3GcUoxMPGdO8gSYuw=="],

+    "@opencode-ai/web/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
    "@opencode-ai/web/marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],

    "@opencode-ai/web/shiki": ["shiki@3.4.2", "", { "dependencies": { "@shikijs/core": "3.4.2", "@shikijs/engine-javascript": "3.4.2", "@shikijs/engine-oniguruma": "3.4.2", "@shikijs/langs": "3.4.2", "@shikijs/themes": "3.4.2", "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-wuxzZzQG8kvZndD7nustrNFIKYJ1jJoWIPaBpVe2+KHSvtzMi4SBjOxrigs8qeqce/l3U0cwiC+VAkLKSunHQQ=="],
@@ -3166,6 +3199,10 @@

    "@tanstack/router-utils/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],

+    "@types/fontkit/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
+    "@types/sax/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
    "@vercel/nft/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],

    "@vercel/nft/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
@@ -3202,6 +3239,8 @@

    "boxen/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],

+    "bun-types/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
    "c12/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],

    "c12/ohash": ["ohash@1.1.6", "", {}, "sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg=="],
@@ -3306,10 +3345,14 @@

    "opencode/@openauthjs/openauth": ["@openauthjs/openauth@0.4.3", "", { "dependencies": { "@standard-schema/spec": "1.0.0-beta.3", "aws4fetch": "1.0.20", "jose": "5.9.6" }, "peerDependencies": { "arctic": "^2.2.2", "hono": "^4.0.0" } }, "sha512-RlnjqvHzqcbFVymEwhlUEuac4utA5h4nhSK/i2szZuQmxTIqbGUxZ+nM+avM+VV4Ing+/ZaNLKILoXS3yrkOOw=="],

+    "opencode/@tsconfig/bun": ["@tsconfig/bun@1.0.7", "", {}, "sha512-udGrGJBNQdXGVulehc1aWT73wkR9wdaGBtB6yL70RJsqwW/yJhIg6ZbRlPOfIUiFNrnBuYLBi9CSmMKfDC7dvA=="],
+
    "opencode/ulid": ["ulid@3.0.1", "", { "bin": { "ulid": "dist/cli.js" } }, "sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q=="],

    "opencontrol/@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.6.1", "", { "dependencies": { "content-type": "^1.0.5", "cors": "^2.8.5", "eventsource": "^3.0.2", "express": "^5.0.1", "express-rate-limit": "^7.5.0", "pkce-challenge": "^4.1.0", "raw-body": "^3.0.0", "zod": "^3.23.8", "zod-to-json-schema": "^3.24.1" } }, "sha512-oxzMzYCkZHMntzuyerehK3fV6A2Kwh5BD6CGEJSVDU2QNEhfLOptf2X7esQgaHZXHZY0oHmMsOtIDLP71UJXgA=="],

+    "opencontrol/@tsconfig/bun": ["@tsconfig/bun@1.0.7", "", {}, "sha512-udGrGJBNQdXGVulehc1aWT73wkR9wdaGBtB6yL70RJsqwW/yJhIg6ZbRlPOfIUiFNrnBuYLBi9CSmMKfDC7dvA=="],
+
    "opencontrol/hono": ["hono@4.7.4", "", {}, "sha512-Pst8FuGqz3L7tFF+u9Pu70eI0xa5S3LPUmrNd5Jm8nTHze9FxLTK9Kaj5g/k4UcwuJSXTP65SyHOPLrffpcAJg=="],

    "opencontrol/zod": ["zod@3.24.2", "", {}, "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ=="],
@@ -3380,6 +3423,8 @@

    "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="],

+    "stripe/@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
    "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],

    "sucrase/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
@@ -3586,10 +3631,18 @@

    "@octokit/request/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@26.0.0", "", {}, "sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA=="],

+    "@opencode-ai/console-function/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
+    "@opencode-ai/desktop/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
+    "@opencode-ai/function/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
    "@opencode-ai/web/@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.4.2", "", { "dependencies": { "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ=="],

    "@opencode-ai/web/@shikijs/transformers/@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=="],

+    "@opencode-ai/web/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
    "@opencode-ai/web/shiki/@shikijs/core": ["@shikijs/core@3.4.2", "", { "dependencies": { "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ=="],

    "@opencode-ai/web/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.4.2", "", { "dependencies": { "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-1/adJbSMBOkpScCE/SB6XkjJU17ANln3Wky7lOmrnpl+zBdQ1qXUJg2GXTYVHRq+2j3hd1DesmElTXYDgtfSOQ=="],
@@ -3616,6 +3669,10 @@

    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

+    "@types/fontkit/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
+    "@types/sax/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
    "@vercel/nft/glob/jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],

    "@vercel/nft/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -3634,6 +3691,8 @@

    "bl/buffer/ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],

+    "bun-types/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
    "c12/pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],

    "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
@@ -3754,6 +3813,8 @@

    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],

+    "stripe/@types/node/undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
    "sucrase/glob/jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],

    "sucrase/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -3,7 +3,7 @@
  "name": "opencode",
  "private": true,
  "type": "module",
-  "packageManager": "bun@1.2.21",
+  "packageManager": "bun@1.3.0",
  "scripts": {
    "dev": "bun run packages/opencode/src/index.ts",
    "typecheck": "bun turbo typecheck",
@@ -16,7 +16,7 @@
      "packages/sdk/js"
    ],
    "catalog": {
-      "@types/bun": "1.2.21",
+      "@types/bun": "1.3.0",
      "@hono/zod-validator": "0.4.2",
      "@kobalte/core": "0.13.11",
      "@types/node": "22.13.9",
@@ -32,11 +32,15 @@
    }
  },
  "devDependencies": {
+    "@tsconfig/bun": "1.0.9",
    "husky": "9.1.7",
    "prettier": "3.6.2",
-    "sst": "3.17.13",
+    "sst": "3.17.19",
    "turbo": "2.5.6"
  },
+  "dependencies": {
+    "@opencode-ai/sdk": "workspace:*"
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/sst/opencode"
@@ -56,5 +60,8 @@
  ],
  "patchedDependencies": {
    "@solidjs/start@1.1.7": "patches/@solidjs%2Fstart@1.1.7.patch"
+  },
+  "overrides": {
+    "@types/bun": "catalog:"
  }
 }
@@ -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.14.7"
+    "version": "0.15.1"
  },
  "dependencies": {
    "@ibm/plex": "6.4.1",
@@ -22,6 +22,9 @@
    "vinxi": "^0.5.7",
    "zod": "catalog:"
  },
+  "devDependencies": {
+    "typescript": "catalog:"
+  },
  "engines": {
    "node": ">=22"
  }
@@ -0,0 +1,80 @@
+[data-component="dropdown"] {
+  position: relative;
+
+  [data-slot="trigger"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border: none;
+    border-radius: var(--border-radius-sm);
+    background-color: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-surface-hover);
+    }
+
+    span {
+      flex: 1;
+      text-align: left;
+      font-weight: 500;
+    }
+  }
+
+  [data-slot="chevron"] {
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+  }
+
+  [data-slot="dropdown"] {
+    position: absolute;
+    top: 100%;
+    z-index: 1000;
+    margin-top: var(--space-1);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    min-width: 160px;
+
+    &[data-align="left"] {
+      left: 0;
+    }
+
+    &[data-align="right"] {
+      right: 0;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  [data-slot="item"] {
+    display: block;
+    width: 100%;
+    padding: var(--space-2-5) var(--space-3);
+    border: none;
+    background: none;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-surface);
+    }
+
+    &[data-selected="true"] {
+      background-color: var(--color-accent-alpha);
+    }
+  }
+}
@@ -0,0 +1,79 @@
+import { JSX, Show, createEffect, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { IconChevron } from "./icon"
+import "./dropdown.css"
+
+interface DropdownProps {
+  trigger: JSX.Element | string
+  children: JSX.Element
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  align?: "left" | "right"
+  class?: string
+}
+
+export function Dropdown(props: DropdownProps) {
+  const [store, setStore] = createStore({
+    isOpen: props.open ?? false,
+  })
+  let dropdownRef: HTMLDivElement | undefined
+
+  createEffect(() => {
+    if (props.open !== undefined) {
+      setStore("isOpen", props.open)
+    }
+  })
+
+  createEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+        setStore("isOpen", false)
+        props.onOpenChange?.(false)
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside)
+    onCleanup(() => document.removeEventListener("click", handleClickOutside))
+  })
+
+  const toggle = () => {
+    const newValue = !store.isOpen
+    setStore("isOpen", newValue)
+    props.onOpenChange?.(newValue)
+  }
+
+  return (
+    <div data-component="dropdown" class={props.class} ref={dropdownRef}>
+      <button data-slot="trigger" type="button" onClick={toggle}>
+        {typeof props.trigger === "string" ? <span>{props.trigger}</span> : props.trigger}
+        <IconChevron data-slot="chevron" />
+      </button>
+
+      <Show when={store.isOpen}>
+        <div data-slot="dropdown" data-align={props.align ?? "left"}>
+          {props.children}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+interface DropdownItemProps {
+  children: JSX.Element
+  selected?: boolean
+  onClick?: () => void
+  type?: "button" | "submit" | "reset"
+}
+
+export function DropdownItem(props: DropdownItemProps) {
+  return (
+    <button
+      data-slot="item"
+      data-selected={props.selected ?? false}
+      type={props.type ?? "button"}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  )
+}
@@ -2,26 +2,70 @@ import { JSX } from "solid-js"

 export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
  return (
-  <svg {...props} width="234" height="42" viewBox="0 0 234 42" fill="none"
-       xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M54 36H36V42H30V6H54V36ZM36 30H48V12H36V30Z" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M24 36H0V6H24V36ZM6 30H18V12H6V30Z" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="currentColor"/>
-    <path d="M108 12H96V36H90V6H108V12Z" fill="currentColor"/>
-    <path d="M114 36H108V12H114V36Z" fill="currentColor"/>
-    <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M174 36H150V6H174V36ZM156 30H168V12H156V30Z" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M204 36H180V6H198V0H204V36ZM186 30H198V12H186V30Z" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M234 24H216V30H234V36H210V6H234V24ZM216 18H228V12H216V18Z" fill="currentColor"/>
-  </svg>
-
-)
+    <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 9.14333V4.5719H4.57143V9.14333H0Z" fill="currentColor" />
+      <path d="M4.57178 9.14333V4.5719H9.14321V9.14333H4.57178Z" fill="currentColor" />
+      <path d="M9.1438 9.14333V4.5719H13.7152V9.14333H9.1438Z" fill="currentColor" />
+      <path d="M13.7124 9.14333V4.5719H18.2838V9.14333H13.7124Z" fill="currentColor" />
+      <path d="M13.7124 13.7136V9.14221H18.2838V13.7136H13.7124Z" fill="currentColor" />
+      <path d="M0 18.2857V13.7142H4.57143V18.2857H0Z" fill="currentColor" fill-opacity="0.2" />
+      <rect width="4.57143" height="4.57143" transform="translate(4.57178 13.7141)" fill="currentColor" />
+      <path d="M4.57178 18.2855V13.7141H9.14321V18.2855H4.57178Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M9.1438 18.2855V13.7141H13.7152V18.2855H9.1438Z" fill="currentColor" />
+      <path d="M13.7156 18.2855V13.7141H18.287V18.2855H13.7156Z" fill="currentColor" fill-opacity="0.2" />
+      <rect width="4.57143" height="4.57143" transform="translate(0 18.2859)" fill="currentColor" />
+      <path d="M0 22.8572V18.2858H4.57143V22.8572H0Z" fill="currentColor" fill-opacity="0.2" />
+      <rect
+        width="4.57143"
+        height="4.57143"
+        transform="translate(4.57178 18.2859)"
+        fill="currentColor"
+        fill-opacity="0.2"
+      />
+      <path d="M4.57178 22.8573V18.2859H9.14321V22.8573H4.57178Z" fill="currentColor" />
+      <path d="M9.1438 22.8573V18.2859H13.7152V22.8573H9.1438Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M13.7156 22.8573V18.2859H18.287V22.8573H13.7156Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M0 27.4292V22.8578H4.57143V27.4292H0Z" fill="currentColor" />
+      <path d="M4.57178 27.4292V22.8578H9.14321V27.4292H4.57178Z" fill="currentColor" />
+      <path d="M9.1438 27.4276V22.8562H13.7152V27.4276H9.1438Z" fill="currentColor" />
+      <path d="M13.7124 27.4292V22.8578H18.2838V27.4292H13.7124Z" fill="currentColor" />
+      <path d="M22.8572 9.14333V4.5719H27.4286V9.14333H22.8572Z" fill="currentColor" />
+      <path d="M27.426 9.14333V4.5719H31.9975V9.14333H27.426Z" fill="currentColor" />
+      <path d="M32.001 9.14333V4.5719H36.5724V9.14333H32.001Z" fill="currentColor" />
+      <path d="M36.5698 9.14333V4.5719H41.1413V9.14333H36.5698Z" fill="currentColor" />
+      <path d="M22.8572 13.7152V9.1438H27.4286V13.7152H22.8572Z" fill="currentColor" />
+      <path d="M36.5698 13.7152V9.1438H41.1413V13.7152H36.5698Z" fill="currentColor" />
+      <path d="M22.8572 18.2855V13.7141H27.4286V18.2855H22.8572Z" fill="currentColor" />
+      <path d="M27.4292 18.2855V13.7141H32.0006V18.2855H27.4292Z" fill="currentColor" />
+      <path d="M32.001 18.2855V13.7141H36.5724V18.2855H32.001Z" fill="currentColor" />
+      <path d="M36.5698 18.2855V13.7141H41.1413V18.2855H36.5698Z" fill="currentColor" />
+      <path d="M22.8572 22.8573V18.2859H27.4286V22.8573H22.8572Z" fill="currentColor" />
+      <path d="M27.4292 22.8573V18.2859H32.0006V22.8573H27.4292Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M32.001 22.8573V18.2859H36.5724V22.8573H32.001Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M36.5698 22.8573V18.2859H41.1413V22.8573H36.5698Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M22.8572 27.4292V22.8578H27.4286V27.4292H22.8572Z" fill="currentColor" />
+      <path d="M27.4292 27.4276V22.8562H32.0006V27.4276H27.4292Z" fill="currentColor" />
+      <path d="M32.001 27.4276V22.8562H36.5724V27.4276H32.001Z" fill="currentColor" />
+      <path d="M36.5698 27.4292V22.8578H41.1413V27.4292H36.5698Z" fill="currentColor" />
+      <path d="M45.7144 9.14333V4.5719H50.2858V9.14333H45.7144Z" fill="currentColor" />
+      <path d="M50.2861 9.14333V4.5719H54.8576V9.14333H50.2861Z" fill="currentColor" />
+      <path d="M54.855 9.14333V4.5719H59.4264V9.14333H54.855Z" fill="currentColor" />
+      <path d="M45.7144 13.7136V9.14221H50.2858V13.7136H45.7144Z" fill="currentColor" />
+      <path d="M59.4299 13.7152V9.1438H64.0014V13.7152H59.4299Z" fill="currentColor" />
+      <path d="M45.7144 18.2855V13.7141H50.2858V18.2855H45.7144Z" fill="currentColor" />
+      <path d="M50.2861 18.2857V13.7142H54.8576V18.2857H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M54.8579 18.2855V13.7141H59.4293V18.2855H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M59.4299 18.2855V13.7141H64.0014V18.2855H59.4299Z" fill="currentColor" />
+      <path d="M45.7144 22.8573V18.2859H50.2858V22.8573H45.7144Z" fill="currentColor" />
+      <path d="M50.2861 22.8572V18.2858H54.8576V22.8572H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M54.8579 22.8573V18.2859H59.4293V22.8573H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M59.4299 22.8573V18.2859H64.0014V22.8573H59.4299Z" fill="currentColor" />
+      <path d="M45.7144 27.4292V22.8578H50.2858V27.4292H45.7144Z" fill="currentColor" />
+      <path d="M50.2861 27.4286V22.8572H54.8576V27.4286H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M54.8579 27.4285V22.8571H59.4293V27.4285H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+      <path d="M59.4299 27.4292V22.8578H64.0014V27.4292H59.4299Z" fill="currentColor" />
+    </svg>
+  )
 }

 export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
@@ -29,7 +73,7 @@ export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M8.75 8.75V2.75H21.25V15.25H15.25M15.25 8.75H2.75V21.25H15.25V8.75Z"
-        stroke="#8E8B8B"
+        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="square"
      />
@@ -55,3 +99,22 @@ export function IconCreditCard(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
    </svg>
  )
 }
+
+export function IconChevron(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        d="M4.00024 5.04041L7.37401 1.66663L6.66691 0.959525L4.00024 3.62619L1.33357 0.959525L0.626465 1.66663L4.00024 5.04041Z"
+      />
+    </svg>
+  )
+}
+
+export function IconWorkspaceLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18 6H6V24H18V6ZM24 30H0V0H24V30Z" fill="currentColor" />
+    </svg>
+  )
+}
@@ -0,0 +1,66 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-component="modal"][data-slot="overlay"] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.2s ease;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  [data-slot="content"] {
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-md);
+    padding: var(--space-6);
+    min-width: 400px;
+    max-width: 90vw;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    animation: slideUp 0.2s ease;
+
+    @media (max-width: 30rem) {
+      min-width: 300px;
+      padding: var(--space-4);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  [data-slot="title"] {
+    margin: 0 0 var(--space-4) 0;
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--color-text);
+  }
+}
@@ -0,0 +1,24 @@
+import { JSX, Show } from "solid-js"
+import "./modal.css"
+
+interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  children: JSX.Element
+}
+
+export function Modal(props: ModalProps) {
+  return (
+    <Show when={props.open}>
+      <div data-component="modal" data-slot="overlay" onClick={props.onClose}>
+        <div data-slot="content" onClick={(e) => e.stopPropagation()}>
+          <Show when={props.title}>
+            <h2 data-slot="title">{props.title}</h2>
+          </Show>
+          {props.children}
+        </div>
+      </div>
+    </Show>
+  )
+}
@@ -1,7 +0,0 @@
-import { query } from "@solidjs/router"
-import { Resource } from "@opencode-ai/console-resource"
-
-export const beta = query(async (workspaceID?: string) => {
-  "use server"
-  return Resource.App.stage === "production" ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y" : true
-}, "beta")
@@ -0,0 +1,17 @@
+[data-component="user-menu"] {
+  [data-component="dropdown"] {
+    [data-slot="trigger"] span {
+      color: var(--color-text-muted);
+    }
+
+    [data-slot="dropdown"] {
+      form {
+        width: 100%;
+      }
+    }
+
+    [data-slot="item"] {
+      color: var(--color-danger);
+    }
+  }
+}
@@ -0,0 +1,35 @@
+import { action, redirect } from "@solidjs/router"
+import { getRequestEvent } from "solid-js/web"
+import { useAuthSession } from "~/context/auth.session"
+import { Dropdown } from "~/component/dropdown"
+import "./user-menu.css"
+
+const logout = action(async () => {
+  "use server"
+  const auth = await useAuthSession()
+  const event = getRequestEvent()
+  const current = auth.data.current
+  if (current)
+    await auth.update((val) => {
+      delete val.account?.[current]
+      const first = Object.keys(val.account ?? {})[0]
+      val.current = first
+      event!.locals.actor = undefined
+      return val
+    })
+  throw redirect("/zen")
+})
+
+export function UserMenu(props: { email: string | null | undefined }) {
+  return (
+    <div data-component="user-menu">
+      <Dropdown trigger={props.email ?? ""} align="right">
+        <form action={logout} method="post">
+          <button type="submit" formaction={logout} data-slot="item">
+            Logout
+          </button>
+        </form>
+      </Dropdown>
+    </div>
+  )
+}
@@ -1,71 +1,24 @@
 [data-component="workspace-picker"] {
-  position: relative;
-  /* Override blue accent colors with neutral colors */
-  --color-accent: var(--color-border);
-  --color-accent-hover: var(--color-border);
-  --color-accent-active: var(--color-border);
-  --color-primary: var(--color-border);
-  --color-primary-hover: var(--color-border);
-  --color-primary-active: var(--color-border);
-  --color-primary-alpha-20: transparent;
+  [data-component="dropdown"] {
+    [data-slot="trigger"] {
+      /* Override blue accent colors with neutral colors for dropdown trigger */
+      --color-accent: var(--color-border);
+      --color-accent-hover: var(--color-border);
+      --color-accent-active: var(--color-border);
+      --color-primary: var(--color-border);
+      --color-primary-hover: var(--color-border);
+      --color-primary-active: var(--color-border);
+      --color-primary-alpha-20: transparent;
+    }

-  [data-slot="trigger"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
-    font-family: var(--font-sans);
-    cursor: pointer;
-    min-width: 200px;
-
-    span {
-      flex: 1;
-      text-align: left;
-      font-weight: 500;
+    [data-slot="dropdown"] {
+      max-height: 240px;
+      overflow-y: auto;
+      min-width: 200px;
    }
  }

-  [data-slot="chevron"] {
-    flex-shrink: 0;
-    color: var(--color-text-secondary);
-  }
-
-  [data-slot="dropdown"] button {
-    text-decoration: none !important;
-  }
-
-  /* Ensure text inside buttons has no underline */
-  [data-slot="dropdown"] button * {
-    text-decoration: none !important;
-  }
-
-  [data-slot="dropdown"] {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    margin-top: var(--space-1);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--color-bg);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-height: 240px;
-    overflow-y: auto;
-
-    @media (prefers-color-scheme: dark) {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  [data-slot="option"],
-  [data-slot="create-option"] {
+  [data-slot="create-item"] {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: none;
@@ -75,59 +28,27 @@
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
-    text-decoration: none;
+    transition: background-color 0.15s ease;

    &:hover {
-      background-color: var(--color-surface);
-      text-decoration: none;
+      background-color: var(--color-bg-surface);
    }
-
-    &:focus {
-      text-decoration: none;
-    }
-
-    &:active {
-      text-decoration: none;
-    }
-
-    &:first-child {
-      border-top-left-radius: var(--border-radius-sm);
-      border-top-right-radius: var(--border-radius-sm);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: var(--border-radius-sm);
-      border-bottom-right-radius: var(--border-radius-sm);
-    }
-  }
-
-  [data-slot="option"][data-selected="true"] {
-    background-color: transparent;
-    color: var(--color-text);
-  }
-
-  [data-slot="create-option"] {
-    color: var(--color-text-secondary);
-    font-weight: 500;
  }

  [data-slot="create-form"] {
-    margin-top: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--color-surface);
+    width: 100%;
  }

  [data-slot="create-input-group"] {
    display: flex;
-    gap: var(--space-2);
-    align-items: center;
+    flex-direction: column;
+    gap: var(--space-3);
+  }

-    @media (max-width: 30rem) {
-      flex-direction: column;
-      align-items: stretch;
-    }
+  [data-slot="button-group"] {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: flex-end;
  }

  [data-slot="create-input"] {
@@ -150,35 +71,4 @@
      color: var(--color-text-muted);
    }
  }
-
-  button[type="submit"],
-  button[type="button"] {
-    padding: var(--space-2-5) var(--space-4);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
-    font-family: var(--font-sans);
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-
-    &[data-color="primary"] {
-      background-color: var(--color-text-secondary);
-      border-color: var(--color-text-secondary);
-      color: var(--color-bg);
-    }
-
-    @media (max-width: 30rem) {
-      flex: 1;
-    }
-  }
 }
@@ -1,5 +1,5 @@
-import { query, useParams, action, createAsync, redirect } from "@solidjs/router"
-import { For, Show, createEffect, onCleanup } from "solid-js"
+import { query, useParams, action, createAsync, redirect, useSubmission } from "@solidjs/router"
+import { For, Show, createEffect } from "solid-js"
 import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
 import { Actor } from "@opencode-ai/console-core/actor.js"
@@ -7,6 +7,8 @@ import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/ind
 import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
 import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { Workspace } from "@opencode-ai/console-core/workspace.js"
+import { Dropdown, DropdownItem } from "~/component/dropdown"
+import { Modal } from "~/component/modal"
 import "./workspace-picker.css"

 const getWorkspaces = query(async () => {
@@ -40,11 +42,11 @@ const createWorkspace = action(async (form: FormData) => {
 export function WorkspacePicker() {
  const params = useParams()
  const workspaces = createAsync(() => getWorkspaces())
+  const submission = useSubmission(createWorkspace)
  const [store, setStore] = createStore({
    showForm: false,
-    showDropdown: false,
  })
-  let dropdownRef: HTMLDivElement | undefined
+  let inputRef: HTMLInputElement | undefined

  const currentWorkspace = () => {
    const ws = workspaces()?.find((w) => w.id === params.id)
@@ -52,15 +54,17 @@ export function WorkspacePicker() {
  }

  const handleWorkspaceNew = () => {
-    setStore({ showForm: true, showDropdown: false })
+    setStore("showForm", true)
  }

-  const handleSelectWorkspace = (workspaceID: string) => {
-    if (workspaceID === params.id) {
-      setStore("showDropdown", false)
-      return
+  createEffect(() => {
+    if (store.showForm && inputRef) {
+      setTimeout(() => inputRef?.focus(), 0)
    }
+  })

+  const handleSelectWorkspace = (workspaceID: string) => {
+    if (workspaceID === params.id) return
    window.location.href = `/workspace/${workspaceID}`
  }

@@ -68,77 +72,45 @@ export function WorkspacePicker() {
  createEffect(() => {
    params.id
    setStore("showForm", false)
-    setStore("showDropdown", false)
-  })
-
-  createEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
-        setStore("showDropdown", false)
-      }
-    }
-
-    document.addEventListener("click", handleClickOutside)
-    onCleanup(() => document.removeEventListener("click", handleClickOutside))
  })

  return (
    <div data-component="workspace-picker">
-      <div ref={dropdownRef}>
-        <div data-slot="trigger" onClick={() => setStore("showDropdown", !store.showDropdown)}>
-          <span>{currentWorkspace()}</span>
-          <svg data-slot="chevron" width="12" height="8" viewBox="0 0 12 8" fill="none">
-            <path
-              d="M1 1L6 6L11 1"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
+      <Dropdown trigger={currentWorkspace()} align="left">
+        <For each={workspaces()}>
+          {(workspace) => (
+            <DropdownItem selected={workspace.id === params.id} onClick={() => handleSelectWorkspace(workspace.id)}>
+              {workspace.name || workspace.slug}
+            </DropdownItem>
+          )}
+        </For>
+        <button data-slot="create-item" type="button" onClick={() => handleWorkspaceNew()}>
+          + Create New Workspace
+        </button>
+      </Dropdown>

-        <Show when={store.showDropdown}>
-          <div data-slot="dropdown">
-            <For each={workspaces()}>
-              {(workspace) => (
-                <button
-                  data-slot="option"
-                  data-selected={workspace.id === params.id}
-                  type="button"
-                  onClick={() => handleSelectWorkspace(workspace.id)}
-                >
-                  {workspace.name || workspace.slug}
-                </button>
-              )}
-            </For>
-            <button data-slot="create-option" type="button" onClick={() => handleWorkspaceNew()}>
-              + Create New Workspace
-            </button>
-          </div>
-        </Show>
-      </div>
-
-      <Show when={store.showForm}>
+      <Modal open={store.showForm} onClose={() => setStore("showForm", false)} title="Create New Workspace">
        <form data-slot="create-form" action={createWorkspace} method="post">
          <div data-slot="create-input-group">
            <input
+              ref={inputRef}
              data-slot="create-input"
              type="text"
              name="workspaceName"
              placeholder="Enter workspace name"
              required
-              autofocus
            />
-            <button type="submit" data-color="primary">
-              Create
-            </button>
-            <button type="button" onClick={() => setStore("showForm", false)}>
-              Cancel
-            </button>
+            <div data-slot="button-group">
+              <button type="button" data-color="ghost" onClick={() => setStore("showForm", false)}>
+                Cancel
+              </button>
+              <button type="submit" data-color="primary" disabled={submission.pending}>
+                {submission.pending ? "Creating..." : "Create"}
+              </button>
+            </div>
          </div>
        </form>
-      </Show>
+      </Modal>
    </div>
  )
 }
@@ -11,7 +11,6 @@
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    font-weight: 500;
-    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;

@@ -55,9 +54,6 @@

  a {
    color: var(--color-text);
-    text-decoration: underline;
-    text-underline-offset: var(--space-0-75);
-    text-decoration-thickness: 1px;
  }

  /* Workspace Header */
@@ -80,16 +76,14 @@
  [data-slot="header-brand"] {
    flex: 0 0 auto;
    padding-top: 4px;
-
-    svg {
-      width: 138px;
-    }
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);

    [data-component="site-title"] {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-text);
-      text-decoration: none;
      letter-spacing: -0.02em;
    }
  }
@@ -109,19 +103,5 @@
        display: none;
      }
    }
-
-    a,
-    button {
-      appearance: none;
-      background: none;
-      border: none;
-      cursor: pointer;
-      padding: 0;
-      color: var(--color-text);
-      text-decoration: underline;
-      text-underline-offset: var(--space-0-75);
-      text-decoration-thickness: 1px;
-      text-transform: uppercase;
-    }
  }
-}
+}
@@ -1,62 +1,40 @@
 import { Show } from "solid-js"
-import { getRequestEvent } from "solid-js/web"
-import { query, action, redirect, createAsync, RouteSectionProps, useParams, A } from "@solidjs/router"
+import { query, createAsync, RouteSectionProps, useParams, A } from "@solidjs/router"
 import "./workspace.css"
-import { useAuthSession } from "~/context/auth.session"
-import { IconLogo } from "../component/icon"
+import { IconWorkspaceLogo } from "../component/icon"
 import { WorkspacePicker } from "./workspace-picker"
+import { UserMenu } from "./user-menu"
 import { withActor } from "~/context/auth.withActor"
 import { User } from "@opencode-ai/console-core/user.js"
 import { Actor } from "@opencode-ai/console-core/actor.js"
-import { beta } from "~/lib/beta"
+import { querySessionInfo } from "./workspace/common"

-const getUserInfo = query(async (workspaceID: string) => {
+const getUserEmail = query(async (workspaceID: string) => {
  "use server"
  return withActor(async () => {
    const actor = Actor.assert("user")
    const email = await User.getAccountEmail(actor.properties.userID)
-    return { email }
+    return email
  }, workspaceID)
-}, "userInfo")
-
-const logout = action(async () => {
-  "use server"
-  const auth = await useAuthSession()
-  const event = getRequestEvent()
-  const current = auth.data.current
-  if (current)
-    await auth.update((val) => {
-      delete val.account?.[current]
-      const first = Object.keys(val.account ?? {})[0]
-      val.current = first
-      event!.locals.actor = undefined
-      return val
-    })
-  throw redirect("/zen")
-})
+}, "userEmail")

 export default function WorkspaceLayout(props: RouteSectionProps) {
  const params = useParams()
-  const userInfo = createAsync(() => getUserInfo(params.id))
-  const isBeta = createAsync(() => beta(params.id))
+  const userEmail = createAsync(() => getUserEmail(params.id))
+  const sessionInfo = createAsync(() => querySessionInfo(params.id))
  return (
    <main data-page="workspace">
      <header data-component="workspace-header">
        <div data-slot="header-brand">
          <A href="/" data-component="site-title">
-            <IconLogo />
+            <IconWorkspaceLogo />
          </A>
-        </div>
-        <div data-slot="header-actions">
-          <Show when={isBeta()}>
+          <Show when={sessionInfo()?.isBeta}>
            <WorkspacePicker />
          </Show>
-          <span data-slot="user">{userInfo()?.email}</span>
-          <form action={logout} method="post">
-            <button type="submit" formaction={logout}>
-              Logout
-            </button>
-          </form>
+        </div>
+        <div data-slot="header-actions">
+          <UserMenu email={userEmail()} />
        </div>
      </header>
      <div>{props.children}</div>
@@ -1,7 +1,72 @@
+[data-page="workspace"] {
+  line-height: 1;
+}
+
+/* Workspace Layout */
+[data-component="workspace-container"] {
+  display: flex;
+  height: calc(100vh - 73px);
+}
+
+[data-component="workspace-nav"] {
+  width: 240px;
+  flex-shrink: 0;
+  padding: var(--space-6) var(--space-4);
+  display: flex;
+  justify-content: flex-end;
+}
+
+[data-component="workspace-nav-items"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  [data-nav-button] {
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    transition: all 0.15s ease;
+
+    &:hover {
+      color: var(--color-text);
+    }
+
+    &.active {
+      color: var(--color-text);
+      font-weight: 700;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: calc(-1 * var(--space-0-5));
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-color: var(--color-text);
+        border-radius: 0 2px 2px 0;
+      }
+    }
+  }
+}
+
+[data-component="workspace-content"] {
+  flex: 1;
+  padding: var(--space-6) var(--space-8);
+  overflow-y: auto;
+
+  @media (max-width: 48rem) {
+    padding: var(--space-6) var(--space-4);
+  }
+}
+
 [data-page="workspace-[id]"] {
  max-width: 64rem;
-  padding: var(--space-10) var(--space-4);
-  margin: 0 auto;
+  padding: var(--space-2) var(--space-4);
+  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
@@ -32,7 +97,6 @@
        gap: var(--space-6);
      }

-      /* Section titles */
      [data-slot="section-title"] {
        display: flex;
        flex-direction: column;
@@ -44,8 +108,7 @@
          line-height: 1.2;
          letter-spacing: -0.03125rem;
          margin: 0;
-          color: var(--color-text-secondary);
-          text-transform: uppercase;
+          color: var(--color-text);

          @media (max-width: 30rem) {
            font-size: var(--font-size-md);
@@ -66,7 +129,15 @@
          }
        }
      }
+
+      [data-slot="section-content"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        margin-top: var(--space-8);
+      }
    }
+
    section:not(:last-child) {
      border-bottom: 1px solid var(--color-border);
      padding-bottom: var(--space-16);
@@ -78,7 +149,7 @@
  }

  /* Title section */
-  [data-component="title-section"] {
+  [data-component="header-section"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
@@ -105,11 +176,50 @@
    p {
      line-height: 1.5;
      font-size: var(--font-size-md);
-      color: var(--color-text-muted);
+      color: var(--color-text);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-4);
+
+      @media (max-width: 48rem) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-3);
+      }

      a {
        color: var(--color-text-muted);
      }
+
+      [data-slot="billing-info"] {
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+
+      [data-slot="balance"] {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+
+        b {
+          font-weight: 600;
+          color: var(--color-text);
+        }
+      }
    }
  }
 }
+
+@media (max-width: 48rem) {
+  [data-component="workspace-container"] {
+    flex-direction: column;
+  }
+
+  [data-component="workspace-nav"] {
+    width: 100%;
+    flex-direction: row;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--space-4);
+  }
+}
@@ -1,70 +1,37 @@
-import "./[id].css"
-import { MonthlyLimitSection } from "./monthly-limit-section"
-import { NewUserSection } from "./new-user-section"
-import { BillingSection } from "./billing-section"
-import { PaymentSection } from "./payment-section"
-import { UsageSection } from "./usage-section"
-import { KeySection } from "./key-section"
-import { MemberSection } from "./member-section"
-import { SettingsSection } from "./settings-section"
-import { ModelSection } from "./model-section"
-import { ProviderSection } from "./provider-section"
 import { Show } from "solid-js"
-import { createAsync, query, useParams } from "@solidjs/router"
-import { Actor } from "@opencode-ai/console-core/actor.js"
-import { withActor } from "~/context/auth.withActor"
-import { User } from "@opencode-ai/console-core/user.js"
-import { beta } from "~/lib/beta"
+import { createAsync, RouteSectionProps, useParams, A } from "@solidjs/router"
+import { querySessionInfo } from "./common"
+import "./[id].css"

-const getUserInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    const actor = Actor.assert("user")
-    const user = await User.fromID(actor.properties.userID)
-    return {
-      isAdmin: user?.role === "admin",
-    }
-  }, workspaceID)
-}, "user.get")
-
-export default function () {
+export default function WorkspaceLayout(props: RouteSectionProps) {
  const params = useParams()
-  const userInfo = createAsync(() => getUserInfo(params.id))
-  const isBeta = createAsync(() => beta(params.id))
-
+  const userInfo = createAsync(() => querySessionInfo(params.id))
  return (
-    <div data-page="workspace-[id]">
-      <section data-component="title-section">
-        <h1>Zen</h1>
-        <p>
-          Curated list of models provided by opencode.{" "}
-          <a target="_blank" href="/docs/zen">
-            Learn more
-          </a>
-          .
-        </p>
-      </section>
-
-      <div data-slot="sections">
-        <NewUserSection />
-        <KeySection />
-        <Show when={isBeta()}>
-          <MemberSection />
-        </Show>
-        <Show when={userInfo()?.isAdmin}>
-          <Show when={isBeta()}>
-            <SettingsSection />
-            <ModelSection />
-            <ProviderSection />
-          </Show>
-          <BillingSection />
-          <MonthlyLimitSection />
-        </Show>
-        <UsageSection />
-        <Show when={userInfo()?.isAdmin}>
-          <PaymentSection />
-        </Show>
+    <main data-page="workspace">
+      <div data-component="workspace-container">
+        <nav data-component="workspace-nav">
+          <div data-component="workspace-nav-items">
+            <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+              Zen
+            </A>
+            <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+              API Keys
+            </A>
+            <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+              Members
+            </A>
+            <Show when={userInfo()?.isAdmin}>
+              <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                Billing
+              </A>
+              <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                Settings
+              </A>
+            </Show>
+          </div>
+        </nav>
+        <div data-component="workspace-content">{props.children}</div>
      </div>
-    </div>
+    </main>
  )
 }
@@ -1,10 +1,4 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
  [data-slot="reload-error"] {
    display: flex;
    align-items: center;
@@ -29,6 +23,7 @@
      flex-shrink: 0;
    }
  }
+
  [data-slot="payment"] {
    display: flex;
    flex-direction: column;
@@ -86,7 +81,7 @@
      @media (max-width: 30rem) {
        flex-direction: column;

-        > button {
+        >button {
          width: 100%;
        }
      }
@@ -96,19 +91,21 @@
      }

      /* Make Enable Billing button full width when it's the only button */
-      > button {
+      >button {
        flex: 1;
      }
    }
  }
+
  [data-slot="usage"] {
    p {
      font-size: var(--font-size-sm);
      line-height: 1.5;
      color: var(--color-text-secondary);
+
      b {
        font-weight: 600;
      }
    }
  }
-}
+}
@@ -6,11 +6,7 @@ import { IconCreditCard } from "~/component/icon"
 import styles from "./billing-section.module.css"
 import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
 import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
-
-const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
-  "use server"
-  return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
-}, "checkoutUrl")
+import { createCheckoutUrl } from "../../common"

 const reload = action(async (form: FormData) => {
  "use server"
@@ -0,0 +1,23 @@
+import { MonthlyLimitSection } from "./monthly-limit-section"
+import { BillingSection } from "./billing-section"
+import { PaymentSection } from "./payment-section"
+import { Show } from "solid-js"
+import { createAsync, useParams } from "@solidjs/router"
+import { querySessionInfo } from "../../common"
+
+export default function () {
+  const params = useParams()
+  const userInfo = createAsync(() => querySessionInfo(params.id))
+
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <Show when={userInfo()?.isAdmin}>
+          <BillingSection />
+          <MonthlyLimitSection />
+          <PaymentSection />
+        </Show>
+      </div>
+    </div>
+  )
+}
@@ -1,10 +1,4 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
  [data-slot="balance"] {
    display: flex;
    flex-direction: column;
@@ -99,4 +93,4 @@
    margin: 0;
    line-height: 1.4;
  }
-}
+}
@@ -1,8 +1,8 @@
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { query, action, useParams, createAsync, useAction } from "@solidjs/router"
-import { For } from "solid-js"
+import { For, Show } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
-import { formatDateUTC, formatDateForTable } from "./common"
+import { formatDateUTC, formatDateForTable } from "../../common"
 import styles from "./payment-section.module.css"

 const getPaymentsInfo = query(async (workspaceID: string) => {
@@ -19,7 +19,6 @@ const downloadReceipt = action(async (workspaceID: string, paymentID: string) =>

 export function PaymentSection() {
  const params = useParams()
-  // ORIGINAL CODE - COMMENTED OUT FOR TESTING
  const payments = createAsync(() => getPaymentsInfo(params.id))
  const downloadReceiptAction = useAction(downloadReceipt)

@@ -58,8 +57,7 @@ export function PaymentSection() {
  // ]

  return (
-    payments() &&
-    payments()!.length > 0 && (
+    <Show when={payments() && payments()!.length > 0}>
      <section class={styles.root}>
        <div data-slot="section-title">
          <h2>Payments History</h2>
@@ -109,6 +107,6 @@ export function PaymentSection() {
          </table>
        </div>
      </section>
-    )
+    </Show>
  )
 }
@@ -0,0 +1,73 @@
+import { NewUserSection } from "./new-user-section"
+import { UsageSection } from "./usage-section"
+import { ModelSection } from "./model-section"
+import { ProviderSection } from "./provider-section"
+import { IconLogo } from "~/component/icon"
+import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
+import { querySessionInfo, queryBillingInfo, createCheckoutUrl } from "../common"
+import { Show, createMemo } from "solid-js"
+
+export default function () {
+  const params = useParams()
+  const userInfo = createAsync(() => querySessionInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const createCheckoutUrlAction = useAction(createCheckoutUrl)
+  const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
+
+  const balanceAmount = createMemo(() => {
+    return ((billingInfo()?.balance ?? 0) / 100000000).toFixed(2)
+  })
+
+  return (
+    <div data-page="workspace-[id]">
+      <section data-component="header-section">
+        <IconLogo />
+        <p>
+          <span>
+            Reliable optimized models for coding agents.{" "}
+            <a target="_blank" href="/docs/zen">
+              Learn more
+            </a>
+            .
+          </span>
+          <Show when={userInfo()?.isAdmin}>
+            <span data-slot="billing-info">
+              <Show
+                when={billingInfo()?.reload}
+                fallback={
+                  <button
+                    data-color="primary"
+                    data-size="sm"
+                    disabled={createCheckoutUrlSubmission.pending}
+                    onClick={async () => {
+                      const baseUrl = window.location.href
+                      const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+                      if (checkoutUrl) {
+                        window.location.href = checkoutUrl
+                      }
+                    }}
+                  >
+                    {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable billing"}
+                  </button>
+                }
+              >
+                <span data-slot="balance">
+                  Current balance: <b>${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
+                </span>
+              </Show>
+            </span>
+          </Show>
+        </p>
+      </section>
+
+      <div data-slot="sections">
+        <NewUserSection />
+        <ModelSection />
+        <Show when={userInfo()?.isAdmin}>
+          <ProviderSection />
+        </Show>
+        <UsageSection />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,11 @@
+import { KeySection } from "./key-section"
+
+export default function () {
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <KeySection />
+      </div>
+    </div>
+  )
+}
@@ -1,4 +1,11 @@
 .root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
  [data-component="empty-state"] {
    padding: var(--space-20) var(--space-6);
    text-align: center;
@@ -107,6 +114,7 @@
          align-items: center;
          gap: var(--space-2);
          padding: var(--space-2) var(--space-3);
+          margin-left: calc(-1 * var(--space-3));
          font-size: var(--font-size-sm);
          font-weight: 400;
          border: none;
@@ -140,16 +148,30 @@

      &[data-slot="key-actions"] {
        font-family: var(--font-sans);
+
+        button {
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.15s ease;
+        }
      }
    }

    tbody tr {
+      &:hover {
+        [data-slot="key-actions"] button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
      &:last-child td {
        border-bottom: none;
      }
    }

    @media (max-width: 40rem) {
+
      th,
      td {
        padding: var(--space-2) var(--space-3);
@@ -157,16 +179,22 @@
      }

      th {
-        &:nth-child(3) /* Date */ {
+        &:nth-child(3)
+
+        /* Date */
+          {
          display: none;
        }
      }

      td {
-        &:nth-child(3) /* Date */ {
+        &:nth-child(3)
+
+        /* Date */
+          {
          display: none;
        }
      }
    }
  }
-}
+}
@@ -4,7 +4,7 @@ import { IconCopy, IconCheck } from "~/component/icon"
 import { Key } from "@opencode-ai/console-core/key.js"
 import { withActor } from "~/context/auth.withActor"
 import { createStore } from "solid-js/store"
-import { formatDateUTC, formatDateForTable } from "./common"
+import { formatDateUTC, formatDateForTable } from "../../common"
 import styles from "./key-section.module.css"
 import { Actor } from "@opencode-ai/console-core/actor.js"

@@ -43,8 +43,9 @@ const listKeys = query(async (workspaceID: string) => {
  return withActor(() => Key.list(), workspaceID)
 }, "key.list")

-export function KeyCreateForm() {
+export function KeySection() {
  const params = useParams()
+  const keys = createAsync(() => listKeys(params.id))
  const submission = useSubmission(createKey)
  const [store, setStore] = createStore({ show: false })

@@ -52,69 +53,59 @@ export function KeyCreateForm() {

  createEffect(() => {
    if (!submission.pending && submission.result && !submission.result.error) {
-      hide()
+      setStore("show", false)
    }
  })

  function show() {
-    // submission.clear() does not clear the result in some cases, ie.
-    //  1. Create key with empty name => error shows
-    //  2. Put in a key name and creates the key => form hides
-    //  3. Click add key button again => form shows with the same error if
-    //     submission.clear() is called only once
    while (true) {
      submission.clear()
      if (!submission.result) break
    }
    setStore("show", true)
-    input.focus()
+    setTimeout(() => input?.focus(), 0)
  }

  function hide() {
    setStore("show", false)
  }

-  return (
-    <Show
-      when={store.show}
-      fallback={
-        <button data-color="primary" onClick={() => show()}>
-          Create API Key
-        </button>
-      }
-    >
-      <form action={createKey} method="post" data-slot="create-form">
-        <div data-slot="input-container">
-          <input ref={(r) => (input = r)} data-component="input" name="name" type="text" placeholder="Enter key name" />
-          <Show when={submission.result && submission.result.error}>
-            {(err) => <div data-slot="form-error">{err()}</div>}
-          </Show>
-        </div>
-        <input type="hidden" name="workspaceID" value={params.id} />
-        <div data-slot="form-actions">
-          <button type="reset" data-color="ghost" onClick={() => hide()}>
-            Cancel
-          </button>
-          <button type="submit" data-color="primary" disabled={submission.pending}>
-            {submission.pending ? "Creating..." : "Create"}
-          </button>
-        </div>
-      </form>
-    </Show>
-  )
-}
-
-export function KeySection() {
-  const params = useParams()
-  const keys = createAsync(() => listKeys(params.id))
-
  return (
    <section class={styles.root}>
      <div data-slot="section-title">
        <h2>API Keys</h2>
-        <p>Manage your API keys for accessing opencode services.</p>
+        <div data-slot="title-row">
+          <p>Manage your API keys for accessing opencode services.</p>
+          <button data-color="primary" onClick={() => show()}>
+            Create API Key
+          </button>
+        </div>
      </div>
-      <KeyCreateForm />
+      <Show when={store.show}>
+        <form action={createKey} method="post" data-slot="create-form">
+          <div data-slot="input-container">
+            <input
+              ref={(r) => (input = r)}
+              data-component="input"
+              name="name"
+              type="text"
+              placeholder="Enter key name"
+            />
+            <Show when={submission.result && submission.result.error}>
+              {(err) => <div data-slot="form-error">{err()}</div>}
+            </Show>
+          </div>
+          <input type="hidden" name="workspaceID" value={params.id} />
+          <div data-slot="form-actions">
+            <button type="reset" data-color="ghost" onClick={() => hide()}>
+              Cancel
+            </button>
+            <button type="submit" data-color="primary" disabled={submission.pending}>
+              {submission.pending ? "Creating..." : "Create"}
+            </button>
+          </div>
+        </form>
+      </Show>
      <div data-slot="api-keys-table">
        <Show
          when={keys()?.length}
@@ -0,0 +1,11 @@
+import { MemberSection } from "./member-section"
+
+export default function () {
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <MemberSection />
+      </div>
+    </div>
+  )
+}
@@ -1,4 +1,11 @@
 .root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
  [data-component="empty-state"] {
    padding: var(--space-20) var(--space-6);
    text-align: center;
@@ -23,51 +30,74 @@
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);

-    [data-slot="input-container"] {
+    [data-slot="input-row"] {
+      display: flex;
+      flex-direction: row;
+      gap: var(--space-3);
+
+      @media (max-width: 40rem) {
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="input-field"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
-    }
-
-    @media (max-width: 30rem) {
-      gap: var(--space-2);
-    }
-
-    input {
      flex: 1;
-      padding: var(--space-2) var(--space-3);
-      border: 1px solid var(--color-border);
-      border-radius: var(--border-radius-sm);
-      background-color: var(--color-bg);
-      color: var(--color-text);
-      font-size: var(--font-size-sm);
-      font-family: var(--font-mono);

-      &:focus {
-        outline: none;
-        border-color: var(--color-accent);
+      p {
+        line-height: 1.2;
+        margin: 0;
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
      }

-      &::placeholder {
-        color: var(--color-text-disabled);
+      input {
+        flex: 1;
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+        min-width: 0;
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
      }
    }

    [data-slot="form-actions"] {
      display: flex;
      gap: var(--space-2);
+
+      >button[type="reset"] {
+        align-self: flex-start;
+      }
    }

    [data-slot="form-error"] {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
-      margin-top: var(--space-1);
      line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
    }
  }

  [data-slot="members-table"] {
    overflow-x: auto;
+    padding-bottom: 200px;
+    margin-bottom: -200px;
  }

  [data-slot="members-table-element"] {
@@ -85,6 +115,14 @@
      font-weight: normal;
      color: var(--color-text-muted);
      text-transform: uppercase;
+
+      &:nth-child(2) {
+        width: 180px;
+      }
+
+      &:nth-child(3) {
+        width: 200px;
+      }
    }

    td {
@@ -101,35 +139,29 @@

      &[data-slot="member-role"] {
        font-family: var(--font-mono);
+        text-transform: capitalize;
+      }

-        button {
-          display: flex;
-          align-items: center;
-          gap: var(--space-2);
+      &[data-slot="member-usage"] {
+        input {
+          width: 100%;
          padding: var(--space-2) var(--space-3);
-          font-size: var(--font-size-sm);
-          font-weight: 400;
-          border: none;
-          background-color: transparent;
-          color: var(--color-text-muted);
-          font-family: var(--font-mono);
+          border: 1px solid var(--color-border);
          border-radius: var(--border-radius-sm);
-          cursor: pointer;
-          transition: all 0.15s ease;
-          text-transform: none;
+          background-color: var(--color-bg);
+          color: var(--color-text);
+          font-size: var(--font-size-sm);
+          line-height: 1.5;
+          font-family: var(--font-mono);

-          &:hover:not(:disabled) {
-            background-color: var(--color-bg-surface);
-            color: var(--color-text);
+          &:focus {
+            outline: none;
+            border-color: var(--color-accent);
+            box-shadow: 0 0 0 3px var(--color-accent-alpha);
          }

-          &:disabled {
-            cursor: default;
-            color: var(--color-text);
-          }
-
-          span {
-            font-family: inherit;
+          &::placeholder {
+            color: var(--color-text-disabled);
          }
        }
      }
@@ -140,10 +172,35 @@

      &[data-slot="member-actions"] {
        font-family: var(--font-sans);
+        display: flex;
+        gap: var(--space-2);
+
+        [data-slot="inline-edit-form"] {
+          display: flex;
+          gap: var(--space-2);
+
+          button {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+
+        form:not([data-slot="inline-edit-form"]) button {
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.15s ease;
+        }
      }
    }

    tbody tr {
+      &:hover {
+        [data-slot="member-actions"] form:not([data-slot="inline-edit-form"]) button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
      &:last-child td {
        border-bottom: none;
      }
@@ -0,0 +1,336 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, For, Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { createStore } from "solid-js/store"
+import styles from "./member-section.module.css"
+import { UserRole } from "@opencode-ai/console-core/schema/user.sql.js"
+import { Actor } from "@opencode-ai/console-core/actor.js"
+import { User } from "@opencode-ai/console-core/user.js"
+import { RoleDropdown } from "./role-dropdown"
+
+const listMembers = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return {
+      members: await User.list(),
+      actorID: Actor.userID(),
+      actorRole: Actor.userRole(),
+    }
+  }, workspaceID)
+}, "member.list")
+
+const inviteMember = action(async (form: FormData) => {
+  "use server"
+  const email = form.get("email")?.toString().trim()
+  if (!email) return { error: "Email is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  const limit = form.get("limit")?.toString()
+  const monthlyLimit = limit && limit.trim() !== "" ? parseInt(limit) : null
+  if (monthlyLimit !== null && monthlyLimit < 0) return { error: "Set a valid monthly limit" }
+  return json(
+    await withActor(
+      () =>
+        User.invite({ email, role, monthlyLimit })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.create")
+
+const removeMember = action(async (form: FormData) => {
+  "use server"
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(
+    await withActor(
+      () =>
+        User.remove(id)
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.remove")
+
+const updateMember = action(async (form: FormData) => {
+  "use server"
+
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  const limit = form.get("limit")?.toString()
+  const monthlyLimit = limit && limit.trim() !== "" ? parseInt(limit) : null
+  if (monthlyLimit !== null && monthlyLimit < 0) return { error: "Set a valid monthly limit" }
+
+  return json(
+    await withActor(
+      () =>
+        User.update({ id, role, monthlyLimit })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.update")
+
+function MemberRow(props: { member: any; workspaceID: string; actorID: string; actorRole: string }) {
+  const submission = useSubmission(updateMember)
+  const isCurrentUser = () => props.actorID === props.member.id
+  const isAdmin = () => props.actorRole === "admin"
+  const [store, setStore] = createStore({
+    editing: false,
+    selectedRole: props.member.role as (typeof UserRole)[number],
+    limit: "",
+  })
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      setStore("editing", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("editing", true)
+    setStore("selectedRole", props.member.role)
+    setStore("limit", props.member.monthlyLimit?.toString() ?? "")
+  }
+
+  function hide() {
+    setStore("editing", false)
+  }
+
+  function getUsageDisplay() {
+    const currentUsage = (() => {
+      const dateLastUsed = props.member.timeMonthlyUsageUpdated
+      if (!dateLastUsed) return 0
+
+      const current = new Date().toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        timeZone: "UTC",
+      })
+      const lastUsed = dateLastUsed.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        timeZone: "UTC",
+      })
+      return current === lastUsed ? (props.member.monthlyUsage ?? 0) : 0
+    })()
+
+    const limit = props.member.monthlyLimit ? `$${props.member.monthlyLimit}` : "no limit"
+    return `$${(currentUsage / 100000000).toFixed(2)} / ${limit}`
+  }
+
+  return (
+    <tr>
+      <td data-slot="member-email">{props.member.accountEmail ?? props.member.email}</td>
+      <td data-slot="member-role">
+        <Show when={store.editing && !isCurrentUser()} fallback={<span>{props.member.role}</span>}>
+          <RoleDropdown
+            value={store.selectedRole}
+            options={roleOptions}
+            onChange={(value) => setStore("selectedRole", value as (typeof UserRole)[number])}
+          />
+        </Show>
+      </td>
+      <td data-slot="member-usage">
+        <Show when={store.editing} fallback={<span>{getUsageDisplay()}</span>}>
+          <input
+            data-component="input"
+            type="number"
+            value={store.limit}
+            onInput={(e) => setStore("limit", e.currentTarget.value)}
+            placeholder="No limit"
+            min="0"
+          />
+        </Show>
+      </td>
+      <td data-slot="member-joined">{props.member.timeSeen ? "" : "invited"}</td>
+      <Show when={isAdmin()}>
+        <td data-slot="member-actions">
+          <Show
+            when={store.editing}
+            fallback={
+              <>
+                <button data-color="ghost" onClick={() => show()}>
+                  Edit
+                </button>
+                <Show when={!isCurrentUser()}>
+                  <form action={removeMember} method="post">
+                    <input type="hidden" name="id" value={props.member.id} />
+                    <input type="hidden" name="workspaceID" value={props.workspaceID} />
+                    <button data-color="ghost">Delete</button>
+                  </form>
+                </Show>
+              </>
+            }
+          >
+            <form action={updateMember} method="post" data-slot="inline-edit-form">
+              <input type="hidden" name="id" value={props.member.id} />
+              <input type="hidden" name="workspaceID" value={props.workspaceID} />
+              <input type="hidden" name="role" value={store.selectedRole} />
+              <input type="hidden" name="limit" value={store.limit} />
+              <button type="submit" data-color="ghost" disabled={submission.pending}>
+                {submission.pending ? "Saving..." : "Save"}
+              </button>
+              <Show when={!submission.pending}>
+                <button type="button" data-color="ghost" onClick={() => hide()}>
+                  Cancel
+                </button>
+              </Show>
+            </form>
+          </Show>
+        </td>
+      </Show>
+    </tr>
+  )
+}
+
+const roleOptions = [
+  { value: "admin", description: "Can manage models, members, and billing" },
+  { value: "member", description: "Can only generate API keys for themselves" },
+]
+
+export function MemberSection() {
+  const params = useParams()
+  const data = createAsync(() => listMembers(params.id))
+  const submission = useSubmission(inviteMember)
+  const [store, setStore] = createStore({
+    show: false,
+    selectedRole: "member" as (typeof UserRole)[number],
+    limit: "",
+  })
+
+  let input: HTMLInputElement
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      setStore("show", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("show", true)
+    setStore("selectedRole", "member")
+    setStore("limit", "")
+    setTimeout(() => input?.focus(), 0)
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Members</h2>
+        <div data-slot="title-row">
+          <p>Manage workspace members and their permissions.</p>
+          <Show when={data()?.actorRole === "admin"}>
+            <button data-color="primary" onClick={() => show()}>
+              Invite Member
+            </button>
+          </Show>
+        </div>
+      </div>
+      <Show when={store.show}>
+        <form action={inviteMember} method="post" data-slot="create-form">
+          <div data-slot="input-row">
+            <div data-slot="input-field">
+              <p>Invitee</p>
+              <input
+                ref={(r) => (input = r)}
+                data-component="input"
+                name="email"
+                type="text"
+                placeholder="Enter email"
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>Role</p>
+              <RoleDropdown
+                value={store.selectedRole}
+                options={roleOptions}
+                onChange={(value) => setStore("selectedRole", value as (typeof UserRole)[number])}
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>Monthly spending limit</p>
+              <input
+                data-component="input"
+                name="limit"
+                type="number"
+                placeholder="No limit"
+                value={store.limit}
+                onInput={(e) => setStore("limit", e.currentTarget.value)}
+                min="0"
+              />
+            </div>
+          </div>
+          <Show when={submission.result && submission.result.error}>
+            {(err) => <div data-slot="form-error">{err()}</div>}
+          </Show>
+          <input type="hidden" name="role" value={store.selectedRole} />
+          <input type="hidden" name="workspaceID" value={params.id} />
+          <div data-slot="form-actions">
+            <button type="reset" data-color="ghost" onClick={() => hide()}>
+              Cancel
+            </button>
+            <button type="submit" data-color="primary" disabled={submission.pending}>
+              {submission.pending ? "Inviting..." : "Invite"}
+            </button>
+          </div>
+        </form>
+      </Show>
+      <div data-slot="members-table">
+        <table data-slot="members-table-element">
+          <thead>
+            <tr>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Month limit</th>
+              <th></th>
+              <Show when={data()?.actorRole === "admin"}>
+                <th></th>
+              </Show>
+            </tr>
+          </thead>
+          <tbody>
+            <Show when={data() && data()!.members.length > 0}>
+              <For each={data()!.members}>
+                {(member) => (
+                  <MemberRow
+                    member={member}
+                    workspaceID={params.id}
+                    actorID={data()!.actorID}
+                    actorRole={data()!.actorRole}
+                  />
+                )}
+              </For>
+            </Show>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,72 @@
+.role-dropdown {
+  [data-slot="trigger"] {
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg);
+    width: 100%;
+    text-transform: capitalize;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+    min-width: 0;
+
+    &:hover {
+      border-color: var(--color-accent);
+      background-color: var(--color-bg);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-accent);
+      box-shadow: 0 0 0 3px var(--color-accent-alpha);
+    }
+  }
+
+  [data-slot="chevron"] {
+    opacity: 0.6;
+  }
+
+  [data-slot="dropdown"] {
+    padding: var(--space-1);
+    min-width: 280px;
+    width: max-content;
+  }
+
+  [data-slot="role-item"] {
+    display: block;
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    text-align: left;
+    cursor: pointer;
+    border-radius: var(--border-radius-sm);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-surface);
+    }
+
+    &[data-selected="true"] {
+      background-color: var(--color-accent-alpha);
+    }
+
+    div {
+      strong {
+        display: block;
+        color: var(--color-text);
+        margin-bottom: var(--space-1);
+        text-transform: capitalize;
+      }
+
+      p {
+        font-size: var(--font-size-xs);
+        color: var(--color-text-muted);
+        margin: 0;
+      }
+    }
+  }
+}
@@ -0,0 +1,43 @@
+import { createSignal } from "solid-js"
+import { Dropdown } from "~/component/dropdown"
+import "./role-dropdown.css"
+
+interface RoleOption {
+  value: string
+  description: string
+}
+
+interface RoleDropdownProps {
+  value: string
+  options: RoleOption[]
+  onChange: (value: string) => void
+}
+
+export function RoleDropdown(props: RoleDropdownProps) {
+  const [open, setOpen] = createSignal(false)
+
+  const handleSelect = (value: string) => {
+    props.onChange(value)
+    setOpen(false)
+  }
+
+  return (
+    <Dropdown trigger={props.value} open={open()} onOpenChange={setOpen} class="role-dropdown">
+      <>
+        {props.options.map((option) => (
+          <button
+            data-slot="role-item"
+            data-selected={props.value === option.value}
+            type="button"
+            onClick={() => handleSelect(option.value)}
+          >
+            <div>
+              <strong>{option.value}</strong>
+              <p>{option.description}</p>
+            </div>
+          </button>
+        ))}
+      </>
+    </Dropdown>
+  )
+}
@@ -0,0 +1,170 @@
+[data-slot="models-list"] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-slot="models-table"] {
+  overflow-x: auto;
+}
+
+[data-slot="models-table-element"] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+
+  thead {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  th {
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    font-weight: normal;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+  }
+
+  td {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-muted);
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+
+    &[data-slot="model-name"] {
+      color: var(--color-text);
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    &[data-slot="training-data"] {
+      text-align: center;
+      color: var(--color-text);
+    }
+
+    &[data-slot="model-toggle"] {
+      text-align: left;
+      font-family: var(--font-sans);
+    }
+
+    [data-slot="model-toggle-label"] {
+      /* Toggle container */
+      position: relative;
+      display: inline-block;
+      width: 2.5rem;
+      height: 1.5rem;
+      cursor: pointer;
+
+      /* Hidden checkbox input */
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      /* Toggle track (background) */
+      span {
+        position: absolute;
+        inset: 0;
+        background-color: #ccc;
+        border: 1px solid #bbb;
+        border-radius: 1.5rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        /* Toggle handle (slider) */
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.125rem;
+          width: 1.25rem;
+          height: 1.25rem;
+          background-color: white;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          transform: translateY(-50%);
+          transition: all 0.3s ease;
+        }
+      }
+
+      /* Checked state - track */
+      input:checked+span {
+        background-color: #21AD0E;
+        border-color: #148605;
+
+        /* Checked state - handle */
+        &::before {
+          transform: translateX(1rem) translateY(-50%);
+        }
+      }
+
+      /* Hover states */
+      &:hover span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+      }
+
+      input:checked:hover+span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+      }
+
+      /* Disabled state */
+      &:has(input:disabled) {
+        cursor: not-allowed;
+      }
+
+      input:disabled+span {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      input:disabled:checked+span {
+        opacity: 0.5;
+      }
+
+      input:disabled~span:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  tbody tr {
+    &:last-child td {
+      border-bottom: none;
+    }
+
+    &[data-disabled="true"] {
+      td[data-slot="model-name"] {
+        color: var(--color-text-muted);
+      }
+    }
+  }
+}
+
+@media (max-width: 40rem) {
+  [data-slot="models-table-element"] {
+
+    th,
+    td {
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--font-size-xs);
+    }
+
+    th {
+      &:nth-child(2)
+
+      /* Training Data */
+        {
+        display: none;
+      }
+    }
+
+    td {
+      &:nth-child(2)
+
+      /* Training Data */
+        {
+        display: none;
+      }
+    }
+  }
+}
@@ -4,14 +4,16 @@ import { createMemo, For, Show } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
 import { ZenModel } from "@opencode-ai/console-core/model.js"
 import styles from "./model-section.module.css"
+import { querySessionInfo } from "../common"

 const getModelsInfo = query(async (workspaceID: string) => {
  "use server"
  return withActor(async () => {
    return {
-      all: Object.keys(ZenModel.list())
-        .filter((model) => !["claude-3-5-haiku", "glm-4.6", "qwen3-max"].includes(model))
-        .sort(([a], [b]) => a.localeCompare(b)),
+      all: Object.entries(ZenModel.list())
+        .filter(([id, _model]) => !["claude-3-5-haiku", "qwen3-max"].includes(id))
+        .sort(([_idA, modelA], [_idB, modelB]) => modelA.name.localeCompare(modelB.name))
+        .map(([id, model]) => ({ id, name: model.name })),
      disabled: await Model.listDisabled(),
    }
  }, workspaceID)
@@ -39,44 +41,50 @@ const updateModel = action(async (form: FormData) => {
 export function ModelSection() {
  const params = useParams()
  const modelsInfo = createAsync(() => getModelsInfo(params.id))
+  const userInfo = createAsync(() => querySessionInfo(params.id))
  return (
    <section class={styles.root}>
      <div data-slot="section-title">
        <h2>Models</h2>
-        <p>Manage models for your workspace.</p>
+        <p>
+          Manage which models workspace members can access. Requests will fail if a member tries to use a disabled
+          model.{userInfo()?.isAdmin ? "" : " To use a disabled model, contact your workspace’s admin."}
+        </p>
      </div>
      <div data-slot="models-list">
-        <Show
-          when={modelsInfo()}
-          fallback={
-            <div data-component="empty-state">
-              <p>Loading models...</p>
-            </div>
-          }
-        >
+        <Show when={modelsInfo()}>
          <div data-slot="models-table">
            <table data-slot="models-table-element">
              <thead>
                <tr>
                  <th>Model</th>
-                  <th>Status</th>
-                  <th>Action</th>
+                  <th>Enabled</th>
                </tr>
              </thead>
              <tbody>
                <For each={modelsInfo()!.all}>
-                  {(modelId) => {
-                    const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(modelId))
+                  {({ id, name }) => {
+                    const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(id))
                    return (
-                      <tr data-slot="model-row" data-enabled={isEnabled()}>
-                        <td data-slot="model-name">{modelId}</td>
-                        <td data-slot="model-status">{isEnabled() ? "Enabled" : "Disabled"}</td>
+                      <tr data-slot="model-row" data-disabled={!isEnabled()}>
+                        <td data-slot="model-name">{name}</td>
                        <td data-slot="model-toggle">
                          <form action={updateModel} method="post">
-                            <input type="hidden" name="model" value={modelId} />
+                            <input type="hidden" name="model" value={id} />
                            <input type="hidden" name="workspaceID" value={params.id} />
                            <input type="hidden" name="enabled" value={isEnabled().toString()} />
-                            <button data-color="ghost">{isEnabled() ? "Disable" : "Enable"}</button>
+                            <label data-slot="model-toggle-label">
+                              <input
+                                type="checkbox"
+                                checked={isEnabled()}
+                                disabled={!userInfo()?.isAdmin}
+                                onChange={(e) => {
+                                  const form = e.currentTarget.closest("form")
+                                  if (form) form.requestSubmit()
+                                }}
+                              />
+                              <span></span>
+                            </label>
                          </form>
                        </td>
                      </tr>
@@ -53,26 +53,6 @@
    flex-direction: column;
    gap: var(--space-6);

-    [data-slot="section-title"] {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
-
-      h2 {
-        font-size: var(--font-size-md);
-        font-weight: 600;
-        line-height: 1.2;
-        letter-spacing: -0.03125rem;
-        margin: 0;
-        color: var(--color-text-secondary);
-        text-transform: uppercase;
-
-        @media (max-width: 30rem) {
-          font-size: var(--font-size-md);
-        }
-      }
-    }
-
    [data-slot="key-display"] {
      display: flex;
      flex-direction: column;
@@ -160,4 +140,4 @@
      }
    }
  }
-}
+}
@@ -28,7 +28,14 @@ export function NewUserSection() {
    const usageList = usage()
    return keysList?.length === 1 && (!usageList || usageList.length === 0)
  })
-  const defaultKey = createMemo(() => keys()?.at(-1)?.key)
+  const defaultKey = createMemo(() => {
+    const key = keys()?.at(-1)?.key
+    if (!key) return undefined
+    return {
+      actual: key,
+      masked: key.slice(0, 8) + "*".repeat(key.length - 12) + key.slice(-4),
+    }
+  })

  return (
    <Show when={isNew()}>
@@ -52,12 +59,12 @@ export function NewUserSection() {
          <Show when={defaultKey()}>
            <div data-slot="key-display">
              <div data-slot="key-container">
-                <code data-slot="key-value">{defaultKey()}</code>
+                <code data-slot="key-value">{defaultKey()?.masked}</code>
                <button
                  data-color="primary"
                  disabled={copiedKey()}
                  onClick={async () => {
-                    await navigator.clipboard.writeText(defaultKey() ?? "")
+                    await navigator.clipboard.writeText(defaultKey()?.actual ?? "")
                    setCopiedKey(true)
                    setTimeout(() => setCopiedKey(false), 2000)
                  }}
@@ -18,6 +18,14 @@
      font-weight: normal;
      color: var(--color-text-muted);
      text-transform: uppercase;
+
+      &:nth-child(1) {
+        width: 180px;
+      }
+
+      &:nth-child(3) {
+        width: 200px;
+      }
    }

    td {
@@ -32,24 +40,21 @@
        font-weight: 500;
      }

-      &[data-slot="provider-status"] {
+      &[data-slot="provider-key"] {
        text-align: left;
-        color: var(--color-text);
-      }
-
-      &[data-slot="provider-toggle"] {
-        text-align: left;
-        font-family: var(--font-sans);
+        color: var(--color-text-secondary);

        [data-slot="edit-form"] {
          display: flex;
          flex-direction: column;
          gap: var(--space-3);
+          max-width: 100%;

          [data-slot="input-wrapper"] {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
+            max-width: 100%;

            input {
              padding: var(--space-2) var(--space-3);
@@ -59,6 +64,8 @@
              color: var(--color-text);
              font-size: var(--font-size-sm);
              font-family: var(--font-mono);
+              width: 100%;
+              box-sizing: border-box;

              &:focus {
                outline: none;
@@ -76,18 +83,43 @@
              line-height: 1.4;
            }
          }
+        }
+      }

-          [data-slot="form-actions"] {
-            display: flex;
-            gap: var(--space-2);
+      &[data-slot="provider-action"] {
+        text-align: left;
+        font-family: var(--font-sans);
+        white-space: nowrap;
+
+        [data-slot="configured-actions"] {
+          display: flex;
+          gap: var(--space-2);
+
+          [data-slot="delete-form"] {
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
          }
+
+          &:hover [data-slot="delete-form"] {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+
+        [data-slot="form-actions"] {
+          display: flex;
+          gap: var(--space-2);
        }
      }
    }

    tbody tr {
-      &[data-enabled="false"] {
-        opacity: 0.6;
+      &:hover {
+        [data-slot="provider-action"] [data-slot="delete-form"] {
+          opacity: 1;
+          pointer-events: auto;
+        }
      }

      &:last-child td {
@@ -12,6 +12,10 @@ const PROVIDERS = [

 type Provider = (typeof PROVIDERS)[number]

+function maskCredentials(credentials: string) {
+  return `${credentials.slice(0, 8)}...${credentials.slice(-8)}`
+}
+
 const removeProvider = action(async (form: FormData) => {
  "use server"
  const provider = form.get("provider")?.toString()
@@ -58,7 +62,7 @@ function ProviderRow(props: { provider: Provider }) {

  let input: HTMLInputElement

-  const isEnabled = () => providers()?.some((p) => p.provider === props.provider.key)
+  const providerData = () => providers()?.find((p) => p.provider === props.provider.key)

  createEffect(() => {
    if (!saveSubmission.pending && saveSubmission.result && !saveSubmission.result.error) {
@@ -80,32 +84,14 @@ function ProviderRow(props: { provider: Provider }) {
  }

  return (
-    <tr data-slot="provider-row" data-enabled={isEnabled()}>
+    <tr data-slot="provider-row">
      <td data-slot="provider-name">{props.provider.name}</td>
-      <td data-slot="provider-status">{isEnabled() ? "Configured" : "Not Configured"}</td>
-      <td data-slot="provider-toggle">
+      <td data-slot="provider-key">
        <Show
          when={store.editing}
-          fallback={
-            <Show
-              when={isEnabled()}
-              fallback={
-                <button data-color="ghost" onClick={() => show()}>
-                  Configure
-                </button>
-              }
-            >
-              <form action={removeProvider} method="post">
-                <input type="hidden" name="provider" value={props.provider.key} />
-                <input type="hidden" name="workspaceID" value={params.id} />
-                <button data-color="ghost" type="submit" disabled={removeSubmission.pending}>
-                  Disable
-                </button>
-              </form>
-            </Show>
-          }
+          fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "-"}</span>}
        >
-          <form action={saveProvider} method="post" data-slot="edit-form">
+          <form id={`provider-form-${props.provider.key}`} action={saveProvider} method="post" data-slot="edit-form">
            <div data-slot="input-wrapper">
              <input
                ref={(r) => (input = r)}
@@ -122,15 +108,51 @@ function ProviderRow(props: { provider: Provider }) {
            </div>
            <input type="hidden" name="provider" value={props.provider.key} />
            <input type="hidden" name="workspaceID" value={params.id} />
-            <div data-slot="form-actions">
+          </form>
+        </Show>
+      </td>
+      <td data-slot="provider-action">
+        <Show
+          when={store.editing}
+          fallback={
+            <Show
+              when={!!providerData()}
+              fallback={
+                <button data-color="ghost" onClick={() => show()}>
+                  Configure
+                </button>
+              }
+            >
+              <div data-slot="configured-actions">
+                <button data-color="ghost" onClick={() => show()}>
+                  Edit
+                </button>
+                <form action={removeProvider} method="post" data-slot="delete-form">
+                  <input type="hidden" name="provider" value={props.provider.key} />
+                  <input type="hidden" name="workspaceID" value={params.id} />
+                  <button data-color="ghost" type="submit" disabled={removeSubmission.pending}>
+                    Delete
+                  </button>
+                </form>
+              </div>
+            </Show>
+          }
+        >
+          <div data-slot="form-actions">
+            <button
+              type="submit"
+              data-color="ghost"
+              disabled={saveSubmission.pending}
+              form={`provider-form-${props.provider.key}`}
+            >
+              {saveSubmission.pending ? "Saving..." : "Save"}
+            </button>
+            <Show when={!saveSubmission.pending}>
              <button type="reset" data-color="ghost" onClick={() => hide()}>
                Cancel
              </button>
-              <button type="submit" data-color="ghost" disabled={saveSubmission.pending}>
-                {saveSubmission.pending ? "Saving..." : "Save"}
-              </button>
-            </div>
-          </form>
+            </Show>
+          </div>
        </Show>
      </td>
    </tr>
@@ -149,8 +171,8 @@ export function ProviderSection() {
          <thead>
            <tr>
              <th>Provider</th>
-              <th>Status</th>
-              <th>Action</th>
+              <th>API Key</th>
+              <th></th>
            </tr>
          </thead>
          <tbody>
@@ -0,0 +1,11 @@
+import { SettingsSection } from "./settings-section"
+
+export default function () {
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <SettingsSection />
+      </div>
+    </div>
+  )
+}
@@ -1,63 +1,61 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
+  max-width: 40rem;

  [data-slot="setting"] {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-
-    @media (max-width: 30rem) {
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-  }
-
-  [data-slot="setting-info"] {
-    flex: 1;
    display: flex;
    flex-direction: column;
-    gap: var(--space-1);
+    gap: var(--space-3);

-    h3 {
-      font-size: var(--font-size-md);
-      font-weight: 500;
+    p {
      line-height: 1.2;
      margin: 0;
-      color: var(--color-text);
+      color: var(--color-text-muted);
+    }
+
+    [data-slot="value-with-action"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-3);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-2);
+      }
    }

    [data-slot="current-value"] {
-      font-size: var(--font-size-sm);
-      color: var(--color-text-muted);
+      color: var(--color-text);
      line-height: 1.4;
      margin: 0;
    }
+
+    >button {
+      align-self: flex-start;
+    }
  }

  [data-slot="create-form"] {
    display: flex;
    flex-direction: column;
-    gap: var(--space-3);
-    min-width: 15rem;
-    width: fit-content;
-
-    @media (max-width: 30rem) {
-      width: 100%;
-      min-width: auto;
-    }
+    gap: var(--space-2);

    [data-slot="input-container"] {
      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-2);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
    }

    input {
@@ -68,11 +66,13 @@
      background-color: var(--color-bg);
      color: var(--color-text);
      font-size: var(--font-size-sm);
-      font-family: var(--font-mono);
+      line-height: 1.5;
+      min-width: 0;

      &:focus {
        outline: none;
        border-color: var(--color-accent);
+        box-shadow: 0 0 0 3px var(--color-accent-alpha);
      }

      &::placeholder {
@@ -80,16 +80,15 @@
      }
    }

-    [data-slot="form-actions"] {
-      display: flex;
-      gap: var(--space-2);
-      justify-content: flex-end;
+    >button[type="reset"] {
+      align-self: flex-start;
    }

    [data-slot="form-error"] {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
    }
  }
-}
+}
@@ -79,10 +79,7 @@ export function SettingsSection() {
      </div>
      <div data-slot="section-content">
        <div data-slot="setting">
-          <div data-slot="setting-info">
-            <h3>Workspace Name</h3>
-            <p data-slot="current-value">{workspaceInfo()?.name}</p>
-          </div>
+          <p>Workspace name</p>
          <Show
            when={!store.show}
            fallback={
@@ -97,25 +94,26 @@ export function SettingsSection() {
                    placeholder="Workspace name"
                    value={workspaceInfo()?.name ?? "Default"}
                  />
-                  <Show when={submission.result && submission.result.error}>
-                    {(err) => <div data-slot="form-error">{err()}</div>}
-                  </Show>
-                </div>
-                <input type="hidden" name="workspaceID" value={params.id} />
-                <div data-slot="form-actions">
+                  <input type="hidden" name="workspaceID" value={params.id} />
+                  <button type="submit" data-color="primary" disabled={submission.pending}>
+                    {submission.pending ? "Updating..." : "Save"}
+                  </button>
                  <button type="reset" data-color="ghost" onClick={() => hide()}>
                    Cancel
                  </button>
-                  <button type="submit" data-color="primary" disabled={submission.pending}>
-                    {submission.pending ? "Updating..." : "Update"}
-                  </button>
                </div>
+                <Show when={submission.result && submission.result.error}>
+                  {(err) => <div data-slot="form-error">{err()}</div>}
+                </Show>
              </form>
            }
          >
-            <button data-color="primary" onClick={() => show()}>
-              Edit Name
-            </button>
+            <div data-slot="value-with-action">
+              <p data-slot="current-value">{workspaceInfo()?.name}</p>
+              <button data-color="primary" onClick={() => show()}>
+                Edit
+              </button>
+            </div>
          </Show>
        </div>
      </div>
@@ -1,7 +1,7 @@
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { query, useParams, createAsync } from "@solidjs/router"
 import { createMemo, For, Show } from "solid-js"
-import { formatDateUTC, formatDateForTable } from "./common"
+import { formatDateUTC, formatDateForTable } from "../common"
 import { withActor } from "~/context/auth.withActor"
 import styles from "./usage-section.module.css"

@@ -1,3 +1,9 @@
+import { Resource } from "@opencode-ai/console-resource"
+import { Actor } from "@opencode-ai/console-core/actor.js"
+import { action, query } from "@solidjs/router"
+import { withActor } from "~/context/auth.withActor"
+import { Billing } from "@opencode-ai/console-core/billing.js"
+
 export function formatDateForTable(date: Date) {
  const options: Intl.DateTimeFormatOptions = {
    day: "numeric",
@@ -23,3 +29,23 @@ export function formatDateUTC(date: Date) {
  }
  return date.toLocaleDateString("en-US", options)
 }
+
+export const querySessionInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(() => {
+    return {
+      isAdmin: Actor.userRole() === "admin",
+      isBeta: Resource.App.stage === "production" ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y" : true,
+    }
+  }, workspaceID)
+}, "session.get")
+
+export const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
+  "use server"
+  return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
+}, "checkoutUrl")
+
+export const queryBillingInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(() => Billing.get(), workspaceID)
+}, "billing.get")
@@ -1,328 +0,0 @@
-import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
-import { createEffect, createSignal, For, Show } from "solid-js"
-import { withActor } from "~/context/auth.withActor"
-import { createStore } from "solid-js/store"
-import styles from "./member-section.module.css"
-import { UserRole } from "@opencode-ai/console-core/schema/user.sql.js"
-import { Actor } from "@opencode-ai/console-core/actor.js"
-import { User } from "@opencode-ai/console-core/user.js"
-
-const listMembers = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return {
-      members: await User.list(),
-      actorID: Actor.userID(),
-      actorRole: Actor.userRole(),
-    }
-  }, workspaceID)
-}, "member.list")
-
-const inviteMember = action(async (form: FormData) => {
-  "use server"
-  const email = form.get("email")?.toString().trim()
-  if (!email) return { error: "Email is required" }
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  const role = form.get("role")?.toString() as (typeof UserRole)[number]
-  if (!role) return { error: "Role is required" }
-  return json(
-    await withActor(
-      () =>
-        User.invite({ email, role })
-          .then((data) => ({ error: undefined, data }))
-          .catch((e) => ({ error: e.message as string })),
-      workspaceID,
-    ),
-    { revalidate: listMembers.key },
-  )
-}, "member.create")
-
-const removeMember = action(async (form: FormData) => {
-  "use server"
-  const id = form.get("id")?.toString()
-  if (!id) return { error: "ID is required" }
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  return json(
-    await withActor(
-      () =>
-        User.remove(id)
-          .then((data) => ({ error: undefined, data }))
-          .catch((e) => ({ error: e.message as string })),
-      workspaceID,
-    ),
-    { revalidate: listMembers.key },
-  )
-}, "member.remove")
-
-const updateMember = action(async (form: FormData) => {
-  "use server"
-
-  const id = form.get("id")?.toString()
-  if (!id) return { error: "ID is required" }
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  const role = form.get("role")?.toString() as (typeof UserRole)[number]
-  if (!role) return { error: "Role is required" }
-  const limit = form.get("limit")?.toString()
-  const monthlyLimit = limit && limit.trim() !== "" ? parseInt(limit) : null
-  if (monthlyLimit !== null && monthlyLimit < 0) return { error: "Set a valid monthly limit" }
-
-  return json(
-    await withActor(
-      () =>
-        User.update({ id, role, monthlyLimit })
-          .then((data) => ({ error: undefined, data }))
-          .catch((e) => ({ error: e.message as string })),
-      workspaceID,
-    ),
-    { revalidate: listMembers.key },
-  )
-}, "member.update")
-
-export function MemberCreateForm() {
-  const params = useParams()
-  const submission = useSubmission(inviteMember)
-  const [store, setStore] = createStore({ show: false })
-
-  let input: HTMLInputElement
-
-  createEffect(() => {
-    if (!submission.pending && submission.result && !submission.result.error) {
-      hide()
-    }
-  })
-
-  function show() {
-    // submission.clear() does not clear the result in some cases, ie.
-    //  1. Create key with empty name => error shows
-    //  2. Put in a key name and creates the key => form hides
-    //  3. Click add key button again => form shows with the same error if
-    //     submission.clear() is called only once
-    while (true) {
-      submission.clear()
-      if (!submission.result) break
-    }
-    setStore("show", true)
-    input.focus()
-  }
-
-  function hide() {
-    setStore("show", false)
-  }
-
-  return (
-    <Show
-      when={store.show}
-      fallback={
-        <button data-color="primary" onClick={() => show()}>
-          Invite Member
-        </button>
-      }
-    >
-      <form action={inviteMember} method="post" data-slot="create-form">
-        <div data-slot="input-container">
-          <input ref={(r) => (input = r)} data-component="input" name="email" type="text" placeholder="Enter email" />
-          <div data-slot="role-selector">
-            <label>
-              <input type="radio" name="role" value="admin" checked />
-              <div>
-                <strong>Admin</strong>
-                <p>Can manage models, members, and billing</p>
-              </div>
-            </label>
-            <label>
-              <input type="radio" name="role" value="member" />
-              <div>
-                <strong>Member</strong>
-                <p>Can only generate API keys for themselves</p>
-              </div>
-            </label>
-          </div>
-          <Show when={submission.result && submission.result.error}>
-            {(err) => <div data-slot="form-error">{err()}</div>}
-          </Show>
-        </div>
-        <input type="hidden" name="workspaceID" value={params.id} />
-        <div data-slot="form-actions">
-          <button type="reset" data-color="ghost" onClick={() => hide()}>
-            Cancel
-          </button>
-          <button type="submit" data-color="primary" disabled={submission.pending}>
-            {submission.pending ? "Inviting..." : "Invite"}
-          </button>
-        </div>
-      </form>
-    </Show>
-  )
-}
-
-function MemberRow(props: { member: any; workspaceID: string; actorID: string; actorRole: string }) {
-  const [editing, setEditing] = createSignal(false)
-  const submission = useSubmission(updateMember)
-  const isCurrentUser = () => props.actorID === props.member.id
-  const isAdmin = () => props.actorRole === "admin"
-
-  createEffect(() => {
-    if (!submission.pending && submission.result && !submission.result.error) {
-      setEditing(false)
-    }
-  })
-
-  function getUsageDisplay() {
-    const currentUsage = (() => {
-      const dateLastUsed = props.member.timeMonthlyUsageUpdated
-      if (!dateLastUsed) return 0
-
-      const current = new Date().toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        timeZone: "UTC",
-      })
-      const lastUsed = dateLastUsed.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        timeZone: "UTC",
-      })
-      if (current !== lastUsed) return 0
-      return ((props.member.monthlyUsage ?? 0) / 100000000).toFixed(2)
-    })()
-
-    const limit = props.member.monthlyLimit ? `$${props.member.monthlyLimit}` : "no limit"
-    return `$${currentUsage} / ${limit}`
-  }
-
-  return (
-    <Show
-      when={editing()}
-      fallback={
-        <tr>
-          <td data-slot="member-email">{props.member.accountEmail ?? props.member.email}</td>
-          <td data-slot="member-role">{props.member.role}</td>
-          <td data-slot="member-usage">{getUsageDisplay()}</td>
-          <td data-slot="member-joined">{props.member.timeSeen ? "" : "invited"}</td>
-          <td data-slot="member-actions">
-            <Show when={isAdmin()}>
-              <button data-color="ghost" onClick={() => setEditing(true)}>
-                Edit
-              </button>
-              <Show when={!isCurrentUser()}>
-                <form action={removeMember} method="post">
-                  <input type="hidden" name="id" value={props.member.id} />
-                  <input type="hidden" name="workspaceID" value={props.workspaceID} />
-                  <button data-color="ghost">Delete</button>
-                </form>
-              </Show>
-            </Show>
-          </td>
-        </tr>
-      }
-    >
-      <tr>
-        <td colspan="5">
-          <form action={updateMember} method="post">
-            <div data-slot="edit-member-email">{props.member.accountEmail ?? props.member.email}</div>
-            <input type="hidden" name="id" value={props.member.id} />
-            <input type="hidden" name="workspaceID" value={props.workspaceID} />
-
-            <Show
-              when={!isCurrentUser()}
-              fallback={
-                <>
-                  <div data-slot="current-user-role">Role: {props.member.role}</div>
-                  <input type="hidden" name="role" value={props.member.role} />
-                </>
-              }
-            >
-              <div data-slot="role-selector">
-                <label>
-                  <input type="radio" name="role" value="admin" checked={props.member.role === "admin"} />
-                  <div>
-                    <strong>Admin</strong>
-                    <p>Can manage models, members, and billing</p>
-                  </div>
-                </label>
-                <label>
-                  <input type="radio" name="role" value="member" checked={props.member.role === "member"} />
-                  <div>
-                    <strong>Member</strong>
-                    <p>Can only generate API keys for themselves</p>
-                  </div>
-                </label>
-              </div>
-            </Show>
-
-            <div data-slot="limit-selector">
-              <label>
-                <strong>Monthly Limit</strong>
-                <input
-                  type="number"
-                  name="limit"
-                  value={props.member.monthlyLimit ?? ""}
-                  placeholder="No limit"
-                  min="0"
-                />
-                <p>Set a monthly spending limit for this user</p>
-              </label>
-            </div>
-
-            <Show when={submission.result && submission.result.error}>
-              {(err) => <div data-slot="form-error">{err()}</div>}
-            </Show>
-
-            <div data-slot="form-actions">
-              <button type="button" data-color="ghost" onClick={() => setEditing(false)}>
-                Cancel
-              </button>
-              <button type="submit" data-color="primary" disabled={submission.pending}>
-                {submission.pending ? "Saving..." : "Save"}
-              </button>
-            </div>
-          </form>
-        </td>
-      </tr>
-    </Show>
-  )
-}
-
-export function MemberSection() {
-  const params = useParams()
-  const data = createAsync(() => listMembers(params.id))
-
-  return (
-    <section class={styles.root}>
-      <div data-slot="section-title">
-        <h2>Members</h2>
-      </div>
-      <Show when={data()?.actorRole === "admin"}>
-        <MemberCreateForm />
-      </Show>
-      <div data-slot="members-table">
-        <table data-slot="members-table-element">
-          <thead>
-            <tr>
-              <th>Email</th>
-              <th>Role</th>
-              <th>Usage</th>
-              <th></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={data()?.members || []}>
-              {(member) => (
-                <MemberRow
-                  member={member}
-                  workspaceID={params.id}
-                  actorID={data()!.actorID}
-                  actorRole={data()!.actorRole}
-                />
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  )
-}
@@ -1,122 +0,0 @@
-.root {}
-
-[data-slot="section-title"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-[data-slot="section-title"] h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-[data-slot="section-title"] p {
-  margin: 0;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-}
-
-[data-slot="models-list"] {
-  display: flex;
-  flex-direction: column;
-}
-
-[data-slot="models-table"] {
-  overflow-x: auto;
-}
-
-[data-slot="models-table-element"] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--font-size-sm);
-
-  thead {
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  th {
-    padding: var(--space-3) var(--space-4);
-    text-align: left;
-    font-weight: normal;
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-  }
-
-  td {
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--color-border-muted);
-    color: var(--color-text-muted);
-    font-family: var(--font-mono);
-
-    &[data-slot="model-name"] {
-      color: var(--color-text);
-      font-family: var(--font-mono);
-      font-weight: 500;
-    }
-
-    &[data-slot="training-data"] {
-      text-align: center;
-      color: var(--color-text);
-    }
-
-    &[data-slot="model-status"] {
-      text-align: left;
-      color: var(--color-text);
-    }
-
-    &[data-slot="model-toggle"] {
-      text-align: left;
-      font-family: var(--font-sans);
-    }
-  }
-
-  tbody tr {
-    &[data-enabled="false"] {
-      opacity: 0.6;
-    }
-
-    &:last-child td {
-      border-bottom: none;
-    }
-  }
-
-  @media (max-width: 40rem) {
-
-    th,
-    td {
-      padding: var(--space-2) var(--space-3);
-      font-size: var(--font-size-xs);
-    }
-
-    th {
-      &:nth-child(2)
-
-      /* Training Data */
-        {
-        display: none;
-      }
-    }
-
-    td {
-      &:nth-child(2)
-
-      /* Training Data */
-        {
-        display: none;
-      }
-    }
-  }
-}
-
-
-[data-component="empty-state"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-}
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -14,7 +14,8 @@
    "drizzle-orm": "0.41.0",
    "postgres": "3.4.7",
    "stripe": "18.0.0",
-    "ulid": "3.0.0"
+    "ulid": "3.0.0",
+    "zod": "catalog:"
  },
  "exports": {
    "./*": "./src/*"
@@ -29,7 +30,12 @@
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
+    "@cloudflare/workers-types": "4.20251008.0",
+    "@tsconfig/node22": "22.0.2",
+    "@types/bun": "1.3.0",
+    "@types/node": "24.7.1",
    "drizzle-kit": "0.30.5",
-    "mysql2": "3.14.4"
+    "mysql2": "3.14.4",
+    "typescript": "catalog:"
  }
 }
@@ -67,6 +67,11 @@ export namespace Actor {
    return actor as Extract<Info, { type: T }>
  }

+  export const assertAdmin = () => {
+    if (userRole() === "admin") return
+    throw new Error(`Action not allowed. Ask your workspace admin to perform this action.`)
+  }
+
  export function workspace() {
    const actor = use()
    if ("workspaceID" in actor.properties) {
@@ -18,6 +18,7 @@ export namespace Billing {
  export const stripe = () =>
    new Stripe(Resource.STRIPE_SECRET_KEY.value, {
      apiVersion: "2025-03-31.basil",
+      httpClient: Stripe.createFetchHttpClient(),
    })

  export const get = async () => {
@@ -14,7 +14,7 @@ export namespace Context {
        return result
      },
      provide<R>(value: T, fn: () => R) {
-        return storage.run<R>(value, fn)
+        return storage.run(value, fn)
      },
    }
  }
@@ -17,6 +17,7 @@ export namespace ZenModel {
  })

  export const ModelSchema = z.object({
+    name: z.string(),
    cost: ModelCostSchema,
    cost200K: ModelCostSchema.optional(),
    allowAnonymous: z.boolean().optional(),
@@ -40,13 +41,14 @@ export namespace ZenModel {

 export namespace Model {
  export const enable = fn(z.object({ model: z.string() }), ({ model }) => {
-    const workspaceID = Actor.workspace()
+    Actor.assertAdmin()
    return Database.use((db) =>
-      db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, workspaceID), eq(ModelTable.model, model))),
+      db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))),
    )
  })

  export const disable = fn(z.object({ model: z.string() }), ({ model }) => {
+    Actor.assertAdmin()
    return Database.use((db) =>
      db
        .insert(ModelTable)
@@ -20,8 +20,9 @@ export namespace Provider {
      provider: z.string().min(1).max(64),
      credentials: z.string(),
    }),
-    ({ provider, credentials }) =>
-      Database.use((tx) =>
+    async ({ provider, credentials }) => {
+      Actor.assertAdmin()
+      return Database.use((tx) =>
        tx
          .insert(ProviderTable)
          .values({
@@ -36,14 +37,21 @@ export namespace Provider {
              timeDeleted: null,
            },
          }),
-      ),
+      )
+    },
  )

-  export const remove = fn(z.object({ provider: z.string() }), ({ provider }) =>
-    Database.transaction((tx) =>
-      tx
-        .delete(ProviderTable)
-        .where(and(eq(ProviderTable.provider, provider), eq(ProviderTable.workspaceID, Actor.workspace()))),
-    ),
+  export const remove = fn(
+    z.object({
+      provider: z.string(),
+    }),
+    async ({ provider }) => {
+      Actor.assertAdmin()
+      return Database.transaction((tx) =>
+        tx
+          .delete(ProviderTable)
+          .where(and(eq(ProviderTable.provider, provider), eq(ProviderTable.workspaceID, Actor.workspace()))),
+      )
+    },
  )
 }
@@ -11,13 +11,9 @@ import { Account } from "./account"
 import { AccountTable } from "./schema/account.sql"
 import { Key } from "./key"
 import { KeyTable } from "./schema/key.sql"
+import { WorkspaceTable } from "./schema/workspace.sql"

 export namespace User {
-  const assertAdmin = () => {
-    if (Actor.userRole() === "admin") return
-    throw new Error(`Expected admin user, got ${Actor.userRole()}`)
-  }
-
  const assertNotSelf = (id: string) => {
    if (Actor.userID() !== id) return
    throw new Error(`Expected not self actor, got self actor`)
@@ -63,9 +59,10 @@ export namespace User {
    z.object({
      email: z.string(),
      role: z.enum(UserRole),
+      monthlyLimit: z.number().nullable().optional(),
    }),
-    async ({ email, role }) => {
-      assertAdmin()
+    async ({ email, role, monthlyLimit }) => {
+      Actor.assertAdmin()
      const workspaceID = Actor.workspace()

      // create user
@@ -85,10 +82,12 @@ export namespace User {
                }),
            workspaceID,
            role,
+            monthlyLimit,
          })
          .onDuplicateKeyUpdate({
            set: {
              role,
+              monthlyLimit,
              timeDeleted: null,
            },
          }),
@@ -117,15 +116,32 @@ export namespace User {

      // send email, ignore errors
      try {
+        const emailInfo = await Database.use((tx) =>
+          tx
+            .select({
+              email: AccountTable.email,
+              workspaceName: WorkspaceTable.name,
+            })
+            .from(UserTable)
+            .innerJoin(AccountTable, eq(UserTable.accountID, AccountTable.id))
+            .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, workspaceID))
+            .where(
+              and(eq(UserTable.workspaceID, workspaceID), eq(UserTable.id, Actor.assert("user").properties.userID)),
+            )
+            .then((rows) => rows[0]),
+        )
+
        const { InviteEmail } = await import("@opencode-ai/console-mail/InviteEmail.jsx")
        await AWS.sendEmail({
          to: email,
-          subject: `You've been invited to join the ${workspaceID} workspace on OpenCode Zen`,
+          subject: `You've been invited to join the ${emailInfo.workspaceName} workspace on OpenCode Console`,
          body: render(
            // @ts-ignore
            InviteEmail({
+              inviter: emailInfo.email,
              assetsUrl: `https://opencode.ai/email`,
-              workspace: workspaceID,
+              workspaceID: workspaceID,
+              workspaceName: emailInfo.workspaceName,
            }),
          ),
        })
@@ -176,7 +192,7 @@ export namespace User {
      monthlyLimit: z.number().nullable(),
    }),
    async ({ id, role, monthlyLimit }) => {
-      assertAdmin()
+      Actor.assertAdmin()
      if (role === "member") assertNotSelf(id)
      return await Database.use((tx) =>
        tx
@@ -188,7 +204,7 @@ export namespace User {
  )

  export const remove = fn(z.string(), async (id) => {
-    assertAdmin()
+    Actor.assertAdmin()
    assertNotSelf(id)

    return await Database.use((tx) =>
@@ -52,6 +52,7 @@ export namespace Workspace {
      name: z.string().min(1).max(255),
    }),
    async ({ name }) => {
+      Actor.assertAdmin()
      const workspaceID = Actor.workspace()
      return await Database.use((tx) =>
        tx
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -8,7 +8,8 @@
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
-    "@cloudflare/workers-types": "4.20250522.0",
+    "@cloudflare/workers-types": "4.20251008.0",
+    "@tsconfig/node22": "22.0.2",
    "@types/node": "catalog:",
    "openai": "5.11.0",
    "typescript": "catalog:"
@@ -18,6 +19,8 @@
    "@ai-sdk/openai": "2.0.2",
    "@ai-sdk/openai-compatible": "1.0.1",
    "@hono/zod-validator": "catalog:",
+    "@opencode-ai/console-core": "workspace:*",
+    "@opencode-ai/console-resource": "workspace:*",
    "@openauthjs/openauth": "0.0.0-20250322224806",
    "ai": "catalog:",
    "hono": "catalog:",
@@ -31,6 +31,10 @@ export function A({ children, ...props }: AProps) {
  return React.createElement("a", props, children)
 }

+export function B({ children, ...props }: AProps) {
+  return React.createElement("b", props, children)
+}
+
 export function Span({ children, ...props }: SpanProps) {
  return React.createElement("span", props, children)
 }
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from "react"
 import { Img, Row, Html, Link, Body, Head, Button, Column, Preview, Section, Container } from "@jsx-email/all"
-import { Hr, Text, Fonts, SplitString, Title, A, Span } from "../components"
+import { Hr, Text, Fonts, SplitString, Title, A, Span, B } from "../components"
 import {
  unit,
  body,
@@ -23,17 +23,24 @@ const CONSOLE_URL = "https://opencode.ai/"
 const DOC_URL = "https://opencode.ai/docs/zen"

 interface InviteEmailProps {
-  workspace: string
+  inviter: string
+  workspaceID: string
+  workspaceName: string
  assetsUrl: string
 }
-export const InviteEmail = ({ workspace, assetsUrl = LOCAL_ASSETS_URL }: InviteEmailProps) => {
-  const subject = `Join the ${workspace} workspace`
-  const messagePlain = `You've been invited to join the ${workspace} workspace in the OpenCode Zen Console.`
-  const url = `${CONSOLE_URL}workspace/${workspace}`
+export const InviteEmail = ({
+  inviter = "test@anoma.ly",
+  workspaceID = "wrk_01K6XFY7V53T8XN0A7X8G9BTN3",
+  workspaceName = "anomaly",
+  assetsUrl = LOCAL_ASSETS_URL,
+}: InviteEmailProps) => {
+  const subject = `You've been invited to join the ${workspaceName} workspace on OpenCode Console`
+  const messagePlain = `${inviter} invited you to join the ${workspaceName} workspace.`
+  const url = `${CONSOLE_URL}workspace/${workspaceID}`
  return (
    <Html lang="en">
      <Head>
-        <Title>{`OpenCode Zen — ${messagePlain}`}</Title>
+        <Title>{`OpenCode — ${messagePlain}`}</Title>
      </Head>
      <Fonts assetsUrl={assetsUrl} />
      <Preview>{messagePlain}</Preview>
@@ -42,15 +49,10 @@ export const InviteEmail = ({ workspace, assetsUrl = LOCAL_ASSETS_URL }: InviteE
          <Section style={frame}>
            <Row>
              <Column>
-                <A href={CONSOLE_URL}>
-                  <Img height="32" alt="OpenCode Zen Logo" src={`${assetsUrl}/zen-logo.png`} />
+                <A href={`${CONSOLE_URL}zen`}>
+                  <Img height="32" alt="OpenCode Logo" src={`${assetsUrl}/logo.png`} />
                </A>
              </Column>
-              <Column align="right">
-                <Button style={buttonPrimary} href={url}>
-                  <Span style={code}>Join Workspace</Span>
-                </Button>
-              </Column>
            </Row>

            <Row style={headingHr}>
@@ -59,32 +61,26 @@ export const InviteEmail = ({ workspace, assetsUrl = LOCAL_ASSETS_URL }: InviteE
              </Column>
            </Row>

-            <Section>
-              <Text style={{ ...compactText, ...breadcrumb }}>
-                <Span>OpenCode Zen</Span>
-                <Span style={{ ...code, ...breadcrumbColonSeparator }}>:</Span>
-                <Span>{workspace}</Span>
-              </Text>
-              <Text style={{ ...heading, ...compactText }}>
-                <Link href={url}>
-                  <SplitString text={subject} split={40} />
-                </Link>
-              </Text>
-            </Section>
            <Section style={{ padding: `${unit}px 0 0 0` }}>
              <Text style={{ ...compactText }}>
-                You've been invited to join the{" "}
+                <B>{inviter}</B> invited you to join the{" "}
                <Link style={medium} href={url}>
-                  {workspace}
+                  <B>{workspaceName}</B>
                </Link>{" "}
                workspace in the{" "}
-                <Link style={medium} href={CONSOLE_URL}>
-                  OpenCode Zen Console
+                <Link style={medium} href={`${CONSOLE_URL}zen`}>
+                  OpenCode Console
                </Link>
                .
              </Text>
            </Section>

+            <Section style={{ padding: `${unit}px 0 0 0` }}>
+              <Button style={buttonPrimary} href={url}>
+                <Span style={code}>Join Workspace</Span>
+              </Button>
+            </Section>
+
            <Row style={headingHr}>
              <Column>
                <Hr />
@@ -93,7 +89,7 @@ export const InviteEmail = ({ workspace, assetsUrl = LOCAL_ASSETS_URL }: InviteE

            <Row>
              <Column>
-                <Link href={CONSOLE_URL} style={footerLink}>
+                <Link href={`${CONSOLE_URL}zen`} style={footerLink}>
                  Console
                </Link>
              </Column>
@@ -1,19 +1,21 @@
 {
-  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-mail",
-  "version": "0.14.7",
-  "private": true,
-  "type": "module",
+  "version": "0.15.1",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
+    "@tsconfig/bun": "1.0.9",
    "@types/react": "18.0.25",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "solid-js": "catalog:"
  },
  "exports": {
    "./*": "./emails/templates/*"
  },
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
  "scripts": {
    "dev": "email preview emails/templates"
-  }
+  },
+  "type": "module"
 }
@@ -11,5 +11,8 @@
      },
      "import": "./resource.node.ts"
    }
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "22.0.2"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-scripts",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/desktop",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "description": "",
  "type": "module",
  "scripts": {
@@ -13,6 +13,7 @@
  "license": "MIT",
  "devDependencies": {
    "@tailwindcss/vite": "4.1.11",
+    "@tsconfig/bun": "1.0.9",
    "@types/luxon": "3.7.1",
    "@types/node": "catalog:",
    "typescript": "catalog:",
@@ -35,8 +36,8 @@
    "marked": "16.2.0",
    "marked-shiki": "1.2.1",
    "remeda": "catalog:",
-    "shiki": "3.9.2",
    "solid-js": "catalog:",
+    "shiki": "3.9.2",
    "solid-list": "0.3.0",
    "tailwindcss": "4.1.11",
    "virtua": "0.42.3"
@@ -1,11 +1,18 @@
 {
  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@tsconfig/bun/tsconfig.json",
  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
-    "types": ["vite/client"],
-    "lib": ["DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
    "paths": {
      "@/*": ["./src/*"]
    }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/function",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "name": "opencode",
  "type": "module",
  "private": true,
@@ -62,7 +62,6 @@ if (!snapshot) {
  const macArm64Sha = await $`sha256sum ./dist/opencode-darwin-arm64.zip | cut -d' ' -f1`.text().then((x) => x.trim())

  // arch
-  /*
  const binaryPkgbuild = [
    "# Maintainer: dax",
    "# Maintainer: adam",
@@ -132,23 +131,22 @@ if (!snapshot) {
    ["opencode-bin", binaryPkgbuild],
    ["opencode", sourcePkgbuild],
  ]) {
-    await $`rm -rf ./dist/aur-${pkg}`
-    while (true) {
+    for (let i = 0; i < 30; i++) {
      try {
+        await $`rm -rf ./dist/aur-${pkg}`
        await $`git clone ssh://aur@aur.archlinux.org/${pkg}.git ./dist/aur-${pkg}`
+        await $`cd ./dist/aur-${pkg} && git checkout master`
+        await Bun.file(`./dist/aur-${pkg}/PKGBUILD`).write(pkgbuild)
+        await $`cd ./dist/aur-${pkg} && makepkg --printsrcinfo > .SRCINFO`
+        await $`cd ./dist/aur-${pkg} && git add PKGBUILD .SRCINFO`
+        await $`cd ./dist/aur-${pkg} && git commit -m "Update to v${version}"`
+        await $`cd ./dist/aur-${pkg} && git push`
        break
      } catch (e) {
        continue
      }
    }
-    await $`cd ./dist/aur-${pkg} && git checkout master`
-    await Bun.file(`./dist/aur-${pkg}/PKGBUILD`).write(pkgbuild)
-    await $`cd ./dist/aur-${pkg} && makepkg --printsrcinfo > .SRCINFO`
-    await $`cd ./dist/aur-${pkg} && git add PKGBUILD .SRCINFO`
-    await $`cd ./dist/aur-${pkg} && git commit -m "Update to v${version}"`
-    await $`cd ./dist/aur-${pkg} && git push`
  }
-  */

  // Homebrew formula
  const homebrewFormula = [
@@ -10,6 +10,8 @@ export function FormatError(input: unknown) {
      `Config file at ${input.data.path} is not valid JSON(C)` + (input.data.message ? `: ${input.data.message}` : "")
    )
  }
+  if (Config.DirectoryError.isInstance(input))
+    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Did you mean "${input.data.suggestion}"?`
  if (Config.InvalidError.isInstance(input))
    return [
      `Config file at ${input.data.path} is invalid` + (input.data.message ? `: ${input.data.message}` : ""),
@@ -15,6 +15,8 @@ import { Auth } from "../auth"
 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"

 export namespace Config {
  const log = Log.create({ service: "config" })
@@ -60,7 +62,8 @@ export namespace Config {
    ]

    for (const dir of directories) {
-      await assertValid(dir).catch(() => {})
+      await assertValid(dir)
+      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))
@@ -117,26 +120,35 @@ export namespace Config {
    }
  })

+  const INVALID_DIRS = new Bun.Glob(`{${["agents", "commands", "plugins", "tools"].join(",")}}/`)
  async function assertValid(dir: string) {
-    const ALLOWED_DIRS = new Set(["agent", "command", "mode", "plugin", "tool", "themes"])
-    const UNEXPECTED_DIR_GLOB = new Bun.Glob("*/")
-    for await (const item of UNEXPECTED_DIR_GLOB.scan({
-      absolute: true,
-      followSymlinks: true,
-      dot: true,
-      cwd: dir,
-      onlyFiles: false,
-    })) {
-      const dirname = path.basename(item)
-      if (!ALLOWED_DIRS.has(dirname)) {
-        throw new InvalidError({
-          path: dir,
-          message: `Unexpected directory "${dirname}" found in "${dir}". Only ${ALLOWED_DIRS.values().toArray().join(", ")} directories are allowed.`,
-        })
-      }
+    const invalid = await Array.fromAsync(
+      INVALID_DIRS.scan({
+        onlyFiles: false,
+        cwd: dir,
+      }),
+    )
+    for (const item of invalid) {
+      throw new DirectoryError({
+        path: dir,
+        dir: item,
+        suggestion: item.substring(0, item.length - 1),
+      })
    }
  }

+  async function installDependencies(dir: string) {
+    if (Installation.isDev()) return
+    await Bun.write(path.join(dir, "package.json"), "{}")
+    await Bun.write(path.join(dir, ".gitignore"), ["node_modules", "package.json", "bun.lock", ".gitignore"].join("\n"))
+    await BunProc.run(
+      ["add", "@opencode-ai/plugin@" + (Installation.isDev() ? "latest" : Installation.VERSION), "--exact"],
+      {
+        cwd: dir,
+      },
+    )
+  }
+
  const COMMAND_GLOB = new Bun.Glob("command/**/*.md")
  async function loadCommand(dir: string) {
    const result: Record<string, Command> = {}
@@ -680,10 +692,10 @@ export namespace Config {
      }
      const data = parsed.data
      if (data.plugin) {
-        for (let i = 0; i < data.plugin?.length; i++) {
+        for (let i = 0; i < data.plugin.length; i++) {
          const plugin = data.plugin[i]
          try {
-            data.plugin[i] = import.meta.resolve(plugin, configFilepath)
+            data.plugin[i] = import.meta.resolve!(plugin, configFilepath)
          } catch (err) {}
        }
      }
@@ -700,6 +712,15 @@ export namespace Config {
    }),
  )

+  export const DirectoryError = NamedError.create(
+    "ConfigDirectoryError",
+    z.object({
+      path: z.string(),
+      dir: z.string(),
+      suggestion: z.string(),
+    }),
+  )
+
  export const InvalidError = NamedError.create(
    "ConfigInvalidError",
    z.object({
@@ -39,8 +39,8 @@ export namespace LSPClient {
    l.info("starting client")

    const connection = createMessageConnection(
-      new StreamMessageReader(input.server.process.stdout),
-      new StreamMessageWriter(input.server.process.stdin),
+      new StreamMessageReader(input.server.process.stdout as any),
+      new StreamMessageWriter(input.server.process.stdin as any),
    )

    const diagnostics = new Map<string, Diagnostic[]>()
@@ -52,7 +52,8 @@ export const LANGUAGE_EXTENSIONS: Record<string, string> = {
  ".m": "objective-c",
  ".mm": "objective-cpp",
  ".pl": "perl",
-  ".pm": "perl6",
+  ".pm": "perl",
+  ".pm6": "perl6",
  ".php": "php",
  ".ps1": "powershell",
  ".psm1": "powershell",
@@ -76,6 +76,7 @@ export namespace ModelsDev {
      headers: {
        "User-Agent": Installation.USER_AGENT,
      },
+      signal: AbortSignal.timeout(10 * 1000),
    }).catch((e) => {
      log.error("Failed to fetch models.dev", {
        error: e,
@@ -1031,9 +1031,12 @@ export namespace Server {
          }),
        ),
        async (c) => {
+          /*
          const query = c.req.valid("query").query
          const result = await LSP.workspaceSymbol(query)
          return c.json(result)
+          */
+          return c.json([])
        },
      )
      .get(
@@ -125,6 +125,9 @@ export namespace SessionCompaction {
    const generated = await generateText({
      maxRetries: 10,
      model: model.language,
+      providerOptions: {
+        [model.npm === "@ai-sdk/openai" ? "openai" : model.providerID]: model.info.options,
+      },
      messages: [
        ...system.map(
          (x): ModelMessage => ({
@@ -124,6 +124,7 @@ export namespace Snapshot {

  export async function diff(hash: string) {
    const git = gitdir()
+    await $`git --git-dir ${git} add .`.quiet().cwd(Instance.directory).nothrow()
    const result = await $`git --git-dir=${git} diff ${hash} -- .`.quiet().cwd(Instance.worktree).nothrow()

    if (result.exitCode !== 0) {
@@ -1,6 +1,5 @@
 import z from "zod/v4"
-import { exec } from "child_process"
-
+import { spawn } from "child_process"
 import { Tool } from "./tool"
 import DESCRIPTION from "./bash.txt"
 import { Permission } from "../permission"
@@ -146,9 +145,11 @@ export const BashTool = Tool.define("bash", {
      })
    }

-    const process = exec(params.command, {
+    const process = spawn(params.command, {
+      shell: true,
      cwd: Instance.directory,
      signal: ctx.abort,
+      stdio: ["ignore", "pipe", "pipe"],
      timeout,
    })

@@ -1 +1 @@
-Lists files and directories in a given path. The path parameter must be an absolute path, not a relative path. You can optionally provide an array of glob patterns to ignore with the ignore parameter. You should generally prefer the Glob and Grep tools, if you know which directories to search.
+Lists files and directories in a given path. The path parameter must be absolute; omit it to use the current workspace directory. You can optionally provide an array of glob patterns to ignore with the ignore parameter. You should generally prefer the Glob and Grep tools, if you know which directories to search.
@@ -18,7 +18,7 @@ export namespace Context {
        return result
      },
      provide<R>(value: T, fn: () => R) {
-        return storage.run<R>(value, fn)
+        return storage.run(value, fn)
      },
    }
  }
@@ -123,7 +123,7 @@ test("binary file handling", async () => {
      const before = await Snapshot.track()
      expect(before).toBeTruthy()

-      await Bun.write(`${tmp.path}/image.png`, Buffer.from([0x89, 0x50, 0x4e, 0x47]))
+      await Bun.write(`${tmp.path}/image.png`, new Uint8Array([0x89, 0x50, 0x4e, 0x47]))

      const patch = await Snapshot.patch(before!)
      expect(patch.files).toContain(`${tmp.path}/image.png`)
@@ -502,9 +502,9 @@ test("diff function with various changes", async () => {
      await Bun.write(`${tmp.path}/b.txt`, "modified content")

      const diff = await Snapshot.diff(before!)
-      expect(diff).toContain("deleted")
-      expect(diff).toContain("modified")
-      // Note: git diff only shows changes to tracked files, not untracked files like new.txt
+      expect(diff).toContain("a.txt")
+      expect(diff).toContain("b.txt")
+      expect(diff).toContain("new.txt")
    },
  })
 })
@@ -5,6 +5,7 @@
    "jsx": "preserve",
    "jsxImportSource": "@opentui/solid",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": [],
    "customConditions": ["browser"],
    "baseUrl": ".",
    "paths": {
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/plugin",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "type": "module",
  "scripts": {
    "typecheck": "tsc --noEmit",
@@ -20,6 +20,7 @@
  },
  "devDependencies": {
    "@tsconfig/node22": "catalog:",
+    "@types/node": "24.7.1",
    "typescript": "catalog:"
  }
 }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/sdk",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "type": "module",
  "scripts": {
    "typecheck": "tsc --noEmit",
@@ -16,9 +16,10 @@
    "dist"
  ],
  "devDependencies": {
-    "typescript": "catalog:",
    "@hey-api/openapi-ts": "0.81.0",
-    "@tsconfig/node22": "catalog:"
+    "@tsconfig/node22": "catalog:",
+    "@types/node": "24.7.1",
+    "typescript": "catalog:"
  },
  "dependencies": {},
  "publishConfig": {
@@ -1,7 +1,7 @@
 {
  "name": "@opencode-ai/web",
  "type": "module",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "scripts": {
    "dev": "astro dev",
    "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
@@ -33,11 +33,14 @@ There are a lot of models out there, with new models coming out every week.
 Consider using one of the models we recommend.
 :::

-However, there are a only a few of them that are good at both generating code and tool calling.
+However, there are only a few of them that are good at both generating code and tool calling.

-Here are the ones we recommend with OpenCode:
+Here are several models, in no particular order, that work well with OpenCode (to name a few):

+- GPT 5
+- GPT 5 Codex
 - Claude Sonnet 4.5
+- Claude Sonnet 4
 - Claude Opus 4.1
 - Kimi K2
 - Qwen3 Coder
@@ -100,7 +103,7 @@ You can globally configure a model's options through the config.
 }
 ```

-Here we're configuring global settings for two built-in models: `gpt-5` when accessed via the `openai` provider, and `claude-sonnet-4-20250514` when accessed via the `anthropic` provider.  
+Here we're configuring global settings for two built-in models: `gpt-5` when accessed via the `openai` provider, and `claude-sonnet-4-20250514` when accessed via the `anthropic` provider.
 The built-in provider and model names can be found on [Models.dev](https://models.dev).

 You can also configure these options for any agents that you are using. The agent config overrides any global options here. [Learn more](/docs/agents/#additional).
@@ -118,20 +121,20 @@ You can also define custom models that extend built-in ones and can optionally u
          "options": {
            "reasoningEffort": "high",
            "textVerbosity": "low",
-            "reasoningSummary": "auto"
-          }
+            "reasoningSummary": "auto",
+          },
        },
        "gpt-5-low": {
          "id": "gpt-5",
          "options": {
            "reasoningEffort": "low",
            "textVerbosity": "low",
-            "reasoningSummary": "auto"
-          }
-        }
-      }
-    }
-  }
+            "reasoningSummary": "auto",
+          },
+        },
+      },
+    },
+  },
 }
 ```

@@ -526,6 +526,10 @@ In this example:
 - `options.baseURL` is the endpoint for the local server.
 - `models` is a map of model IDs to their configurations. The model name will be displayed in the model selection list.

+:::tip
+If tool calls aren't working, try increasing `num_ctx` in Ollama. Start around 16k - 32k.
+:::
+
 ---

 ### OpenAI
@@ -2,8 +2,8 @@

 import { $ } from "bun"
 import { createOpencode } from "@opencode-ai/sdk"
-if (process.versions.bun !== "1.2.21") {
-  throw new Error("This script requires bun@1.2.21")
+if (process.versions.bun !== "1.3.0") {
+  throw new Error("This script requires bun@1.3.0")
 }

 const notes = [] as string[]
@@ -2,7 +2,7 @@
  "name": "opencode",
  "displayName": "opencode",
  "description": "opencode for VS Code",
-  "version": "0.14.7",
+  "version": "0.15.1",
  "publisher": "sst-dev",
  "repository": {
    "type": "git",
Author	SHA1	Message	Date
opencode	f81c469f17	release: v0.15.1	2025-10-13 18:14:52 +00:00
Dax Raad	a398013ecb	fix: disable workspace symbol lookup to prevent LSP performance issues	2025-10-13 14:05:54 -04:00
Aiden Cline	53d9717d90	fix: pass options to compact (#3136 )	2025-10-13 10:42:39 -05:00
Aiden Cline	5885b691b9	docs: update recommended models list (#3121 )	2025-10-12 21:35:31 -05:00
Aiden Cline	fd70b9b057	fix: adjust list tool prompt to handle cwd better (#3115 )	2025-10-12 16:48:03 -05:00
Ravshan Samandarov	de13ccb757	docs: Update README.md (#3100 )	2025-10-12 16:23:25 -04:00
Jay	7e1abb7bbf	docs: Fix formatting of num_ctx in providers.mdx	2025-10-12 16:01:32 -04:00
Aiden Cline	83afcb9c42	docs: ollama num_ctx (#3111 )	2025-10-12 10:40:51 -05:00
GitHub Action	afb406c5ff	ignore: update download stats 2025-10-12	2025-10-12 12:04:09 +00:00
OpeOginni	36cf9b9922	fix: add timeout to fetch models.dev refresh request (#3059 )	2025-10-12 00:20:22 -05:00
opencode	0d21164255	release: v0.15.0	2025-10-12 05:12:15 +00:00
Dax Raad	3ad6f84adb	ci: centralize bun setup to reduce duplication and improve caching	2025-10-12 00:46:37 -04:00
Dax Raad	24a5b16af8	ci: tweak	2025-10-12 00:40:59 -04:00
Tommy D. Rossi	b4171aa8e8	fix: `rg` hanging forever when run in bash, waiting for stdin (#3103 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-11 23:24:48 -05:00
Dax Raad	d7a79733ea	ci: re-enable aur	2025-10-12 00:22:16 -04:00
Frank	34e5b9bdb0	wip: zen	2025-10-11 16:17:39 -04:00
Frank	d32ec9bd52	ci: fix	2025-10-11 15:08:45 -04:00
Frank	89fcfcc50b	wip: zen	2025-10-11 15:07:06 -04:00
Frank	9a6fd6a5ee	wip: zen	2025-10-11 14:48:34 -04:00
Frank	f144a0384d	ci: fix	2025-10-11 14:41:52 -04:00
Frank	a67920a25e	wip: zen	2025-10-11 14:38:53 -04:00
Frank	67f894e5d0	Bump sst to latest	2025-10-11 14:38:45 -04:00
Frank	fc1eda5c77	wip: zen	2025-10-11 10:51:17 -04:00
Frank	371fddc820	wip: zen	2025-10-11 09:29:26 -04:00
Frank	8e89c38480	wip: zen	2025-10-11 08:27:32 -04:00
Frank	b732b4caeb	wip: zen	2025-10-11 08:27:32 -04:00
Frank	1940d1cf87	wip: zen	2025-10-11 08:27:32 -04:00
GitHub Action	1f0ed24402	ignore: update download stats 2025-10-11	2025-10-11 12:04:02 +00:00
Frank	133da0f448	wip: zen refactor selector	2025-10-11 07:54:57 -04:00
Frank	f93e1e5c92	wip: zen fix drop down style	2025-10-11 07:15:19 -04:00
Frank	ae4af54c7d	wip: zen fix template	2025-10-11 06:33:47 -04:00
Dax Raad	9d30bc692c	ci: fixes	2025-10-11 00:24:35 -04:00
Dax Raad	44b63dc259	ci: stuff	2025-10-11 00:06:46 -04:00
Dax Raad	de2b4f6538	ci: fix	2025-10-10 23:43:32 -04:00
Frank	b6b82aa847	wip: zen	2025-10-10 21:26:16 -04:00
Frank	2d35b78333	Merge branch 'console-workspaces' into dev	2025-10-10 21:24:05 -04:00
Frank	c7dfbbeed0	wip: zen	2025-10-10 21:21:55 -04:00
Frank	b946fd21b1	wip: zen	2025-10-10 20:32:28 -04:00
Frank	daa0ca40f2	wip: zen	2025-10-10 20:30:13 -04:00
Frank	5b27130d60	wip: zen	2025-10-10 20:16:44 -04:00
Frank	ee1eb35269	wip: zen	2025-10-10 20:02:17 -04:00
Frank	4dda7cc6a4	wip: zen	2025-10-10 19:56:40 -04:00
Frank	cc590364e9	wip: zen	2025-10-10 19:49:59 -04:00
Frank	f14cd4a3db	wip: zen	2025-10-10 19:39:01 -04:00
Dax Raad	07645e0705	ci: fixes	2025-10-10 18:17:10 -04:00
Dax Raad	f053862018	ci: fix	2025-10-10 18:11:19 -04:00
Dax Raad	69127aeaa0	ci: stuff	2025-10-10 18:04:08 -04:00
Dax Raad	847455383d	ci: stuff	2025-10-10 17:56:33 -04:00
Dax Raad	9da95cb805	upgrade to bun 1.3.0	2025-10-10 17:53:32 -04:00
Frank	48008f91ac	wip: zen	2025-10-10 16:42:27 -04:00
Frank	d8b3aa9382	wip: zen	2025-10-10 16:34:07 -04:00
Frank	ea9b5b8d76	wip: zen	2025-10-10 16:04:06 -04:00
Frank	4227b89ebc	wip: zen	2025-10-10 14:54:49 -04:00
Frank	ee846235f2	wip: zen	2025-10-10 14:19:06 -04:00
Frank	9463ce8006	wip: zen	2025-10-10 14:11:48 -04:00
Frank	756fb61691	wip: zen	2025-10-10 13:52:54 -04:00
Frank	94d0a3d888	wip: zen style members	2025-10-10 13:48:56 -04:00
Frank	d83af721a6	wip: zen style api keys	2025-10-10 13:45:06 -04:00
Frank	0bc00bef32	wip: zen	2025-10-10 13:26:39 -04:00
Frank	98c13a965b	wip: zen	2025-10-10 13:21:51 -04:00
Frank	310065bd0a	wip: zen	2025-10-10 12:46:42 -04:00
Rustafarian Dev	34ec6cc978	fix: perl6 file extension (#3066 )	2025-10-10 11:28:49 -05:00
Frank	5a90e5f9e2	wip: zen	2025-10-10 12:22:36 -04:00
Frank	5ee3063aab	wip: sync	2025-10-10 12:16:57 -04:00
Frank	920373d252	wip: zen settings	2025-10-10 12:04:02 -04:00
Frank	c9155c117a	wip: zen	2025-10-10 09:03:49 -04:00
GitHub Action	28d617d867	ignore: update download stats 2025-10-10	2025-10-10 12:04:18 +00:00
Frank	593d0737b5	wip: zen style byok	2025-10-10 03:15:55 -04:00
Frank	64409182ec	wip: zen style byok	2025-10-10 02:53:05 -04:00
Frank	8d4607ebd5	wip: zen style byok	2025-10-10 02:37:50 -04:00
Frank	250393978b	wip: style byok	2025-10-10 02:34:06 -04:00
Frank	fec70ae9c9	wip: zen	2025-10-10 01:36:15 -04:00
Frank	ad7b4b1fcd	wip: zen style nav bar	2025-10-10 00:56:16 -04:00
Frank	03d5089436	wip: zen style model	2025-10-10 00:02:04 -04:00
Dax Raad	9b52d33889	core: improve directory validation error messages to help users fix invalid directory names	2025-10-09 22:40:23 -04:00
Frank	bc0e00cbb7	wip: zen style header	2025-10-09 22:38:42 -04:00
Dax Raad	096710a8cc	ensure @opencode-ai/plugin is available in `.opencode` folder	2025-10-09 21:18:49 -04:00
Frank	60dd987efd	wip: zen	2025-10-09 17:18:55 -04:00
Frank	51e9979457	wip: zen nav bar	2025-10-09 16:01:52 -04:00