release: v1.0.98

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

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

@@ -13,9 +13,9 @@ runs:
       uses: actions/cache@v4
       with:
         path: ~/.bun
-        key: ${{ runner.os }}-bun-${{ hashFiles('bun.lockb', 'bun.lock') }}
+        key: ${{ runner.os }}-bun-${{ hashFiles('package.json') }}-${{ hashFiles('bun.lockb', 'bun.lock') }}
         restore-keys: |
-          ${{ runner.os }}-bun-
+          ${{ runner.os }}-bun-${{ hashFiles('package.json') }}-
 
     - name: Install dependencies
       run: bun install

.github/guidelines-check.yml

@@ -1,3 +1,7 @@
+#
+# This file is intentionally in the wrong dir, will move and add later....
+#
+
 name: Guidelines Check
 
 on:

.github/workflows/auto-label-tui.yml

@@ -28,14 +28,14 @@ jobs:
             const versionPattern = /[v]?1\.0\./i;
             const isVersionRelated = versionPattern.test(title) || versionPattern.test(description);
 
+            // Check for "nix" keyword
+            const nixPattern = /\bnix\b/i;
+            const isNixRelated = nixPattern.test(title) || nixPattern.test(description);
+
+            const labels = [];
+
             if (isWebRelated) {
-              // Add web label
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: issue.number,
-                labels: ['web']
-              });
+              labels.push('web');
               
               // Assign to adamdotdevin
               await github.rest.issues.addAssignees({
@@ -46,10 +46,18 @@ jobs:
               });
             } else if (isVersionRelated) {
               // Only add opentui if NOT web-related
+              labels.push('opentui');
+            }
+
+            if (isNixRelated) {
+              labels.push('nix');
+            }
+
+            if (labels.length > 0) {
               await github.rest.issues.addLabels({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 issue_number: issue.number,
-                labels: ['opentui']
+                labels: labels
               });
             }

.github/workflows/duplicate-issues.yml

@@ -27,12 +27,12 @@ jobs:
             {
               "bash": {
                 "gh issue*": "allow",
-                "*": "deny" 
-              }, 
+                "*": "deny"
+              },
               "webfetch": "deny"
             }
         run: |
-          opencode run -m anthropic/claude-sonnet-4-20250514 "A new issue has been created:'
+          opencode run -m opencode/claude-haiku-4-5 "A new issue has been created:'
 
           Issue number:
           ${{ github.event.issue.number }}

.github/workflows/publish.yml

@@ -12,6 +12,10 @@ on:
           - major
           - minor
           - patch
+      version:
+        description: "Override version (optional)"
+        required: false
+        type: string
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -57,11 +61,19 @@ jobs:
         run: |
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Publish
         run: |
           ./script/publish.ts
         env:
           OPENCODE_BUMP: ${{ inputs.bump }}
+          OPENCODE_VERSION: ${{ inputs.version }}
           OPENCODE_CHANNEL: latest
           NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}

.github/workflows/snapshot.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - dev
-      - opentui
+      - fix-snapshot-2
       - v0
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/sync-zed-extension.yml

@@ -0,0 +1,34 @@
+name: "sync-zed-extension"
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  zed:
+    name: Release Zed Extension
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: ./.github/actions/setup-bun
+
+      - name: Get version tag
+        id: get_tag
+        run: |
+          if [ "${{ github.event_name }}" = "release" ]; then
+            TAG="${{ github.event.release.tag_name }}"
+          else
+            TAG=$(git tag --list 'v[0-9]*.*' --sort=-version:refname | head -n 1)
+          fi
+          echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          echo "Using tag: ${TAG}"
+
+      - name: Sync Zed extension
+        run: |
+          ./script/sync-zed.ts ${{ steps.get_tag.outputs.tag }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -28,3 +28,9 @@ jobs:
           bun turbo test
         env:
           CI: true
+
+      - name: Check SDK is up to date
+        run: |
+          bun ./packages/sdk/js/script/build.ts
+          git diff --exit-code packages/sdk/js/src/gen packages/sdk/js/dist
+        continue-on-error: false

.github/workflows/update-nix-hashes.yml

@@ -0,0 +1,84 @@
+name: Update Nix Hashes
+
+permissions:
+  contents: write
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - "bun.lock"
+      - "package.json"
+      - "packages/*/package.json"
+  pull_request:
+    paths:
+      - "bun.lock"
+      - "package.json"
+      - "packages/*/package.json"
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    env:
+      SYSTEM: x86_64-linux
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+
+      - name: Setup Nix
+        uses: DeterminateSystems/nix-installer-action@v20
+
+      - name: Configure git
+        run: |
+          git config --global user.email "action@github.com"
+          git config --global user.name "Github Action"
+
+      - name: Update flake.lock
+        run: |
+          set -euo pipefail
+          nix flake update
+
+      - name: Update node_modules hash
+        run: |
+          set -euo pipefail
+          nix/scripts/update-hashes.sh
+
+      - name: Commit hash changes
+        env:
+          TARGET_BRANCH: ${{ github.head_ref || github.ref_name }}
+        run: |
+          set -euo pipefail
+
+          summarize() {
+            local status="$1"
+            {
+              echo "### Nix Hash Update"
+              echo ""
+              echo "- ref: ${GITHUB_REF_NAME}"
+              echo "- status: ${status}"
+            } >> "$GITHUB_STEP_SUMMARY"
+            if [ -n "${GITHUB_SERVER_URL:-}" ] && [ -n "${GITHUB_REPOSITORY:-}" ] && [ -n "${GITHUB_RUN_ID:-}" ]; then
+              echo "- run: ${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}" >> "$GITHUB_STEP_SUMMARY"
+            fi
+            echo "" >> "$GITHUB_STEP_SUMMARY"
+          }
+
+          FILES=(flake.lock flake.nix nix/node-modules.nix nix/hashes.json)
+          STATUS="$(git status --short -- "${FILES[@]}" || true)"
+          if [ -z "$STATUS" ]; then
+            summarize "no changes"
+            echo "No changes to tracked Nix files. Hashes are already up to date."
+            exit 0
+          fi
+
+          git add "${FILES[@]}"
+          git commit -m "Update Nix flake.lock and hashes"
+
+          BRANCH="${TARGET_BRANCH:-${GITHUB_REF_NAME}}"
+          git push origin HEAD:"$BRANCH"
+
+          summarize "committed $(git rev-parse --short HEAD)"

.gitignore

@@ -13,3 +13,8 @@ dist
 .turbo
 **/.serena
 .serena/
+/result
+refs
+Session.vim
+opencode.json
+a.out

.opencode/command/commit.md

@@ -1,5 +1,6 @@
 ---
 description: Git commit and push
+subtask: true
 ---
 
 commit and push

.opencode/command/issues.md

@@ -0,0 +1,23 @@
+---
+description: "Find issue(s) on github"
+model: opencode/claude-haiku-4-5
+---
+
+Search through existing issues in sst/opencode using the gh cli to find issues matching this query:
+
+$ARGUMENTS
+
+Consider:
+
+1. Similar titles or descriptions
+2. Same error messages or symptoms
+3. Related functionality or components
+4. Similar feature requests
+
+Please list any matching issues with:
+
+- Issue number and title
+- Brief explanation of why it matches the query
+- Link to the issue
+
+If no clear matches are found, say so.

.opencode/opencode.jsonc

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": ["opencode-openai-codex-auth"],
+  // "enterprise": {
+  //   "url": "http://localhost:3000",
+  // },
+  "provider": {
+    "opencode": {
+      "options": {
+        // "baseURL": "http://localhost:8080",
+      },
+    },
+  },
+}

.opencode/themes/mytheme.json

@@ -0,0 +1,223 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "nord0": "#2E3440",
+    "nord1": "#3B4252",
+    "nord2": "#434C5E",
+    "nord3": "#4C566A",
+    "nord4": "#D8DEE9",
+    "nord5": "#E5E9F0",
+    "nord6": "#ECEFF4",
+    "nord7": "#8FBCBB",
+    "nord8": "#88C0D0",
+    "nord9": "#81A1C1",
+    "nord10": "#5E81AC",
+    "nord11": "#BF616A",
+    "nord12": "#D08770",
+    "nord13": "#EBCB8B",
+    "nord14": "#A3BE8C",
+    "nord15": "#B48EAD"
+  },
+  "theme": {
+    "primary": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "secondary": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "accent": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "error": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "warning": {
+      "dark": "nord12",
+      "light": "nord12"
+    },
+    "success": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "info": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "text": {
+      "dark": "nord4",
+      "light": "nord0"
+    },
+    "textMuted": {
+      "dark": "nord3",
+      "light": "nord1"
+    },
+    "background": {
+      "dark": "nord0",
+      "light": "nord6"
+    },
+    "backgroundPanel": {
+      "dark": "nord1",
+      "light": "nord5"
+    },
+    "backgroundElement": {
+      "dark": "nord1",
+      "light": "nord4"
+    },
+    "border": {
+      "dark": "nord2",
+      "light": "nord3"
+    },
+    "borderActive": {
+      "dark": "nord3",
+      "light": "nord2"
+    },
+    "borderSubtle": {
+      "dark": "nord2",
+      "light": "nord3"
+    },
+    "diffAdded": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "diffRemoved": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "diffContext": {
+      "dark": "nord3",
+      "light": "nord3"
+    },
+    "diffHunkHeader": {
+      "dark": "nord3",
+      "light": "nord3"
+    },
+    "diffHighlightAdded": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "diffHighlightRemoved": {
+      "dark": "nord11",
+      "light": "nord11"
+    },
+    "diffAddedBg": {
+      "dark": "#3B4252",
+      "light": "#E5E9F0"
+    },
+    "diffRemovedBg": {
+      "dark": "#3B4252",
+      "light": "#E5E9F0"
+    },
+    "diffContextBg": {
+      "dark": "nord1",
+      "light": "nord5"
+    },
+    "diffLineNumber": {
+      "dark": "nord2",
+      "light": "nord4"
+    },
+    "diffAddedLineNumberBg": {
+      "dark": "#3B4252",
+      "light": "#E5E9F0"
+    },
+    "diffRemovedLineNumberBg": {
+      "dark": "#3B4252",
+      "light": "#E5E9F0"
+    },
+    "markdownText": {
+      "dark": "nord4",
+      "light": "nord0"
+    },
+    "markdownHeading": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "markdownLink": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "markdownLinkText": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownCode": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "markdownBlockQuote": {
+      "dark": "nord3",
+      "light": "nord3"
+    },
+    "markdownEmph": {
+      "dark": "nord12",
+      "light": "nord12"
+    },
+    "markdownStrong": {
+      "dark": "nord13",
+      "light": "nord13"
+    },
+    "markdownHorizontalRule": {
+      "dark": "nord3",
+      "light": "nord3"
+    },
+    "markdownListItem": {
+      "dark": "nord8",
+      "light": "nord10"
+    },
+    "markdownListEnumeration": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownImage": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "markdownImageText": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "markdownCodeBlock": {
+      "dark": "nord4",
+      "light": "nord0"
+    },
+    "syntaxComment": {
+      "dark": "nord3",
+      "light": "nord3"
+    },
+    "syntaxKeyword": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "syntaxFunction": {
+      "dark": "nord8",
+      "light": "nord8"
+    },
+    "syntaxVariable": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "syntaxString": {
+      "dark": "nord14",
+      "light": "nord14"
+    },
+    "syntaxNumber": {
+      "dark": "nord15",
+      "light": "nord15"
+    },
+    "syntaxType": {
+      "dark": "nord7",
+      "light": "nord7"
+    },
+    "syntaxOperator": {
+      "dark": "nord9",
+      "light": "nord9"
+    },
+    "syntaxPunctuation": {
+      "dark": "nord4",
+      "light": "nord0"
+    }
+  }
+}

.vscode/launch.example.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "bun",
+      "request": "attach",
+      "name": "opencode (attach)",
+      "url": "ws://localhost:6499/"
+    }
+  ]
+}

.vscode/settings.example.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "oven.bun-vscode"
+  ]
+}

CONTRIBUTING.md

@@ -42,6 +42,38 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
 > [!NOTE]
 > After touching `packages/opencode/src/server/server.ts`, run "./packages/sdk/js/script/build.ts" to regenerate the JS sdk.
 
+### Setting up a Debugger
+
+Bun debugging is currently rough around the edges. We hope this guide helps you get set up and avoid some pain points.
+
+The most reliable way to debug OpenCode is to run it manually in a terminal via `bun run --inspect=<url> dev ...` and attach
+your debugger via that URL. Other methods can result in breakpoints being mapped incorrectly, at least in VSCode (YMMV).
+
+Caveats:
+
+- `*.tsx` files won't have their breakpoints correctly mapped. This seems due to Bun currently not supporting source maps on code transformed
+  via `BunPlugin`s (currently necessary due to our dependency on `@opentui/solid`). Currently, the best you can do in terms of debugging `*.tsx`
+  files is writing a `debugger;` statement. Debugging facilities like stepping won't work, but at least you will be informed if a specific code
+  is triggered.
+- If you want to run the OpenCode TUI and have breakpoints triggered in the server code, you might need to run `bun dev spawn` instead of
+  the usual `bun dev`. This is because `bun dev` runs the server in a worker thread and breakpoints might not work there.
+
+Other tips and tricks:
+
+- You might want to use `--inspect-wait` or `--inspect-brk` instead of `--inspect`, depending on your workflow
+- Specifying `--inspect=ws://localhost:6499/` on every invocation can be tiresome, you may want to `export BUN_OPTIONS=--inspect=ws://localhost:6499/` instead
+
+#### VSCode Setup
+
+If you use VSCode, you can use our example configurations [.vscode/settings.example.json](.vscode/settings.example.json) and [.vscode/launch.example.json](.vscode/launch.example.json).
+
+Some debug methods that can be problematic:
+
+- Debug configurations with `"request": "launch"` can have breakpoints incorrectly mapped and thus unusable
+- The same problem arises when running OpenCode in the VSCode `JavaScript Debug Terminal`
+
+With that said, you may want to try these methods, as they might work for you.
+
 ## Pull Request Expectations
 
 - Try to keep pull requests small and focused.

README.md

@@ -28,8 +28,10 @@ curl -fsSL https://opencode.ai/install | bash
 npm i -g opencode-ai@latest        # or bun/pnpm/yarn
 scoop bucket add extras; scoop install extras/opencode  # Windows
 choco install opencode             # Windows
-brew install opencode      # macOS and Linux
+brew install opencode              # macOS and Linux
 paru -S opencode-bin               # Arch Linux
+mise use --pin -g ubi:sst/opencode # Any OS
+nix run nixpkgs#opencode           # or github:sst/opencode for latest dev branch
 ```
 
 > [!TIP]
@@ -50,6 +52,22 @@ OPENCODE_INSTALL_DIR=/usr/local/bin curl -fsSL https://opencode.ai/install | bas
 XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 ```
 
+### Agents
+
+OpenCode includes two built-in agents you can switch between,
+you can switch between these using the `Tab` key.
+
+- **build** - Default, full access agent for development work
+- **plan** - Read-only agent for analysis and code exploration
+  - Denies file edits by default
+  - Asks permission before running bash commands
+  - Ideal for exploring unfamiliar codebases or planning changes
+
+Also, included is a **general** subagent for complex searches and multi-step tasks.
+This is used internally and can be invoked using `@general` in messages.
+
+Learn more about [agents](https://opencode.ai/docs/agents).
+
 ### Documentation
 
 For more info on how to configure OpenCode [**head over to our docs**](https://opencode.ai/docs).
@@ -58,6 +76,10 @@ For more info on how to configure OpenCode [**head over to our docs**](https://o
 
 If you're interested in contributing to OpenCode, please read our [contributing docs](./CONTRIBUTING.md) before submitting a pull request.
 
+### Building on OpenCode
+
+If you are working on a project that's related to OpenCode and is using "opencode" as a part of its name; for example, "opencode-dashboard" or "opencode-mobile", please add a note to your README to clarify that it is not built by the OpenCode team and is not affiliated with us in anyway.
+
 ### FAQ
 
 #### How is this different than Claude Code?
@@ -65,7 +87,7 @@ If you're interested in contributing to OpenCode, please read our [contributing
 It's very similar to Claude Code in terms of capability. Here are the key differences:
 
 - 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.
+- Not coupled to any provider. Although we recommend the models we provide through [OpenCode Zen](https://opencode.ai/zen); OpenCode can be used with Claude, 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.

STATS.md

@@ -132,3 +132,18 @@
 | 2025-11-04 | 663,912 (+10,782) | 608,056 (+10,917) | 1,271,968 (+21,699) |
 | 2025-11-05 | 675,074 (+11,162) | 619,690 (+11,634) | 1,294,764 (+22,796) |
 | 2025-11-06 | 686,252 (+11,178) | 630,885 (+11,195) | 1,317,137 (+22,373) |
+| 2025-11-07 | 696,646 (+10,394) | 642,146 (+11,261) | 1,338,792 (+21,655) |
+| 2025-11-08 | 706,035 (+9,389)  | 653,489 (+11,343) | 1,359,524 (+20,732) |
+| 2025-11-09 | 713,462 (+7,427)  | 660,459 (+6,970)  | 1,373,921 (+14,397) |
+| 2025-11-10 | 722,288 (+8,826)  | 668,225 (+7,766)  | 1,390,513 (+16,592) |
+| 2025-11-11 | 729,769 (+7,481)  | 677,501 (+9,276)  | 1,407,270 (+16,757) |
+| 2025-11-12 | 740,180 (+10,411) | 686,454 (+8,953)  | 1,426,634 (+19,364) |
+| 2025-11-13 | 749,905 (+9,725)  | 696,157 (+9,703)  | 1,446,062 (+19,428) |
+| 2025-11-14 | 759,928 (+10,023) | 705,237 (+9,080)  | 1,465,165 (+19,103) |
+| 2025-11-15 | 765,955 (+6,027)  | 712,870 (+7,633)  | 1,478,825 (+13,660) |
+| 2025-11-16 | 771,069 (+5,114)  | 716,596 (+3,726)  | 1,487,665 (+8,840)  |
+| 2025-11-17 | 780,161 (+9,092)  | 723,339 (+6,743)  | 1,503,500 (+15,835) |
+| 2025-11-18 | 791,563 (+11,402) | 732,544 (+9,205)  | 1,524,107 (+20,607) |
+| 2025-11-19 | 804,409 (+12,846) | 747,624 (+15,080) | 1,552,033 (+27,926) |
+| 2025-11-20 | 814,620 (+10,211) | 757,907 (+10,283) | 1,572,527 (+20,494) |
+| 2025-11-21 | 826,309 (+11,689) | 769,307 (+11,400) | 1,595,616 (+23,089) |

bunfig.toml

@@ -1,2 +1,2 @@
 [install]
-exact = true
+exact = true

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1763618868,
+        "narHash": "sha256-v5afmLjn/uyD9EQuPBn7nZuaZVV9r+JerayK/4wvdWA=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a8d610af3f1a5fb71e23e08434d8d61a466fc942",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,107 @@
+{
+  description = "OpenCode development flake";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+  };
+
+  outputs =
+    {
+      nixpkgs,
+      ...
+    }:
+    let
+      systems = [
+        "aarch64-linux"
+        "x86_64-linux"
+        "aarch64-darwin"
+        "x86_64-darwin"
+      ];
+      lib = nixpkgs.lib;
+      forEachSystem = lib.genAttrs systems;
+      pkgsFor = system: nixpkgs.legacyPackages.${system};
+      packageJson = builtins.fromJSON (builtins.readFile ./packages/opencode/package.json);
+      bunTarget = {
+        "aarch64-linux" = "bun-linux-arm64";
+        "x86_64-linux" = "bun-linux-x64";
+        "aarch64-darwin" = "bun-darwin-arm64";
+        "x86_64-darwin" = "bun-darwin-x64";
+      };
+      defaultNodeModules = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
+      hashesFile = "${./nix}/hashes.json";
+      hashesData =
+        if builtins.pathExists hashesFile then builtins.fromJSON (builtins.readFile hashesFile) else { };
+      nodeModulesHash = hashesData.nodeModules or defaultNodeModules;
+      modelsDev = forEachSystem (
+        system:
+        let
+          pkgs = pkgsFor system;
+        in
+        pkgs."models-dev"
+      );
+    in
+    {
+      devShells = forEachSystem (
+        system:
+        let
+          pkgs = pkgsFor system;
+        in
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              bun
+              nodejs_20
+              pkg-config
+              openssl
+              git
+            ];
+          };
+        }
+      );
+
+      packages = forEachSystem (
+        system:
+        let
+          pkgs = pkgsFor system;
+          mkNodeModules = pkgs.callPackage ./nix/node-modules.nix {
+            hash = nodeModulesHash;
+          };
+          mkPackage = pkgs.callPackage ./nix/opencode.nix { };
+        in
+        {
+          default = mkPackage {
+            version = packageJson.version;
+            src = ./.;
+            scripts = ./nix/scripts;
+            target = bunTarget.${system};
+            modelsDev = "${modelsDev.${system}}/dist/_api.json";
+            mkNodeModules = mkNodeModules;
+          };
+        }
+      );
+
+      apps = forEachSystem (
+        system:
+        let
+          pkgs = pkgsFor system;
+        in
+        {
+          opencode-dev = {
+            type = "app";
+            meta = {
+              description = "Nix devshell shell for OpenCode";
+              runtimeInputs = [ pkgs.bun ];
+            };
+            program = "${
+              pkgs.writeShellApplication {
+                name = "opencode-dev";
+                text = ''
+                  exec bun run dev "$@"
+                '';
+              }
+            }/bin/opencode-dev";
+          };
+        }
+      );
+    };
+}

github/index.ts

@@ -171,9 +171,7 @@ try {
         const summary = await summarize(response)
         await pushToLocalBranch(summary)
       }
-      const hasShared = prData.comments.nodes.some((c) =>
-        c.body.includes(`${useShareUrl()}/s/${shareId}`),
-      )
+      const hasShared = prData.comments.nodes.some((c) => c.body.includes(`${useShareUrl()}/s/${shareId}`))
       await updateComment(`${response}${footer({ image: !hasShared })}`)
     }
     // Fork PR
@@ -185,9 +183,7 @@ try {
         const summary = await summarize(response)
         await pushToForkBranch(summary, prData)
       }
-      const hasShared = prData.comments.nodes.some((c) =>
-        c.body.includes(`${useShareUrl()}/s/${shareId}`),
-      )
+      const hasShared = prData.comments.nodes.some((c) => c.body.includes(`${useShareUrl()}/s/${shareId}`))
       await updateComment(`${response}${footer({ image: !hasShared })}`)
     }
   }
@@ -368,9 +364,7 @@ async function getAccessToken() {
 
   if (!response.ok) {
     const responseJson = (await response.json()) as { error?: string }
-    throw new Error(
-      `App token exchange failed: ${response.status} ${response.statusText} - ${responseJson.error}`,
-    )
+    throw new Error(`App token exchange failed: ${response.status} ${response.statusText} - ${responseJson.error}`)
   }
 
   const responseJson = (await response.json()) as { token: string }
@@ -411,12 +405,8 @@ async function getUserPrompt() {
   // ie. <img alt="Image" src="https://github.com/user-attachments/assets/xxxx" />
   // ie. [api.json](https://github.com/user-attachments/files/21433810/api.json)
   // ie. ![Image](https://github.com/user-attachments/assets/xxxx)
-  const mdMatches = prompt.matchAll(
-    /!?\[.*?\]\((https:\/\/github\.com\/user-attachments\/[^)]+)\)/gi,
-  )
-  const tagMatches = prompt.matchAll(
-    /<img .*?src="(https:\/\/github\.com\/user-attachments\/[^"]+)" \/>/gi,
-  )
+  const mdMatches = prompt.matchAll(/!?\[.*?\]\((https:\/\/github\.com\/user-attachments\/[^)]+)\)/gi)
+  const tagMatches = prompt.matchAll(/<img .*?src="(https:\/\/github\.com\/user-attachments\/[^"]+)" \/>/gi)
   const matches = [...mdMatches, ...tagMatches].sort((a, b) => a.index - b.index)
   console.log("Images", JSON.stringify(matches, null, 2))
 
@@ -443,8 +433,7 @@ async function getUserPrompt() {
 
     // Replace img tag with file path, ie. @image.png
     const replacement = `@${filename}`
-    prompt =
-      prompt.slice(0, start + offset) + replacement + prompt.slice(start + offset + tag.length)
+    prompt = prompt.slice(0, start + offset) + replacement + prompt.slice(start + offset + tag.length)
     offset += replacement.length - tag.length
 
     const contentType = res.headers.get("content-type")
@@ -512,12 +501,7 @@ async function subscribeSessionEvents() {
                     ? JSON.stringify(part.state.input)
                     : "Unknown"
                 console.log()
-                console.log(
-                  color + `|`,
-                  "\x1b[0m\x1b[2m" + ` ${tool.padEnd(7, " ")}`,
-                  "",
-                  "\x1b[0m" + title,
-                )
+                console.log(color + `|`, "\x1b[0m\x1b[2m" + ` ${tool.padEnd(7, " ")}`, "", "\x1b[0m" + title)
               }
 
               if (part.type === "text") {
@@ -729,8 +713,7 @@ async function assertPermissions() {
     throw new Error(`Failed to check permissions for user ${actor}: ${error}`)
   }
 
-  if (!["admin", "write"].includes(permission))
-    throw new Error(`User ${actor} does not have write permissions`)
+  if (!["admin", "write"].includes(permission)) throw new Error(`User ${actor} does not have write permissions`)
 }
 
 async function updateComment(body: string) {
@@ -774,9 +757,7 @@ function footer(opts?: { image?: boolean }) {
 
     return `<a href="${useShareUrl()}/s/${shareId}"><img width="200" alt="${titleAlt}" src="https://social-cards.sst.dev/opencode-share/${title64}.png?model=${providerID}/${modelID}&version=${session.version}&id=${shareId}" /></a>\n`
   })()
-  const shareUrl = shareId
-    ? `[opencode session](${useShareUrl()}/s/${shareId})&nbsp;&nbsp;|&nbsp;&nbsp;`
-    : ""
+  const shareUrl = shareId ? `[opencode session](${useShareUrl()}/s/${shareId})&nbsp;&nbsp;|&nbsp;&nbsp;` : ""
   return `\n\n${image}${shareUrl}[github run](${useEnvRunUrl()})`
 }
 
@@ -959,13 +940,9 @@ function buildPromptDataForPR(pr: GitHubPullRequest) {
     })
     .map((c) => `- ${c.author.login} at ${c.createdAt}: ${c.body}`)
 
-  const files = (pr.files.nodes || []).map(
-    (f) => `- ${f.path} (${f.changeType}) +${f.additions}/-${f.deletions}`,
-  )
+  const files = (pr.files.nodes || []).map((f) => `- ${f.path} (${f.changeType}) +${f.additions}/-${f.deletions}`)
   const reviewData = (pr.reviews.nodes || []).map((r) => {
-    const comments = (r.comments.nodes || []).map(
-      (c) => `    - ${c.path}:${c.line ?? "?"}: ${c.body}`,
-    )
+    const comments = (r.comments.nodes || []).map((c) => `    - ${c.path}:${c.line ?? "?"}: ${c.body}`)
     return [
       `- ${r.author.login} at ${r.submittedAt}:`,
       `  - Review body: ${r.body}`,
@@ -987,15 +964,9 @@ function buildPromptDataForPR(pr: GitHubPullRequest) {
     `Deletions: ${pr.deletions}`,
     `Total Commits: ${pr.commits.totalCount}`,
     `Changed Files: ${pr.files.nodes.length} files`,
-    ...(comments.length > 0
-      ? ["<pull_request_comments>", ...comments, "</pull_request_comments>"]
-      : []),
-    ...(files.length > 0
-      ? ["<pull_request_changed_files>", ...files, "</pull_request_changed_files>"]
-      : []),
-    ...(reviewData.length > 0
-      ? ["<pull_request_reviews>", ...reviewData, "</pull_request_reviews>"]
-      : []),
+    ...(comments.length > 0 ? ["<pull_request_comments>", ...comments, "</pull_request_comments>"] : []),
+    ...(files.length > 0 ? ["<pull_request_changed_files>", ...files, "</pull_request_changed_files>"] : []),
+    ...(reviewData.length > 0 ? ["<pull_request_reviews>", ...reviewData, "</pull_request_reviews>"] : []),
     "</pull_request>",
   ].join("\n")
 }

infra/console.ts

@@ -61,13 +61,7 @@ export const auth = new sst.cloudflare.Worker("AuthApi", {
   domain: `auth.${domain}`,
   handler: "packages/console/function/src/auth.ts",
   url: true,
-  link: [
-    database,
-    authStorage,
-    GITHUB_CLIENT_ID_CONSOLE,
-    GITHUB_CLIENT_SECRET_CONSOLE,
-    GOOGLE_CLIENT_ID,
-  ],
+  link: [database, authStorage, GITHUB_CLIENT_ID_CONSOLE, GITHUB_CLIENT_SECRET_CONSOLE, GOOGLE_CLIENT_ID],
 })
 
 ////////////////
@@ -103,8 +97,12 @@ export const stripeWebhook = new stripe.WebhookEndpoint("StripeWebhookEndpoint",
   ],
 })
 
-const ZEN_MODELS1 = new sst.Secret("ZEN_MODELS1")
-const ZEN_MODELS2 = new sst.Secret("ZEN_MODELS2")
+const ZEN_MODELS = [
+  new sst.Secret("ZEN_MODELS1"),
+  new sst.Secret("ZEN_MODELS2"),
+  new sst.Secret("ZEN_MODELS3"),
+  new sst.Secret("ZEN_MODELS4"),
+]
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")
 const AUTH_API_URL = new sst.Linkable("AUTH_API_URL", {
   properties: { value: auth.url.apply((url) => url!) },
@@ -112,6 +110,7 @@ const AUTH_API_URL = new sst.Linkable("AUTH_API_URL", {
 const STRIPE_WEBHOOK_SECRET = new sst.Linkable("STRIPE_WEBHOOK_SECRET", {
   properties: { value: stripeWebhook.secret },
 })
+const gatewayKv = new sst.cloudflare.Kv("GatewayKv")
 
 ////////////////
 // CONSOLE
@@ -137,11 +136,17 @@ new sst.cloudflare.x.SolidStart("Console", {
     AUTH_API_URL,
     STRIPE_WEBHOOK_SECRET,
     STRIPE_SECRET_KEY,
-    ZEN_MODELS1,
-    ZEN_MODELS2,
     EMAILOCTOPUS_API_KEY,
     AWS_SES_ACCESS_KEY_ID,
     AWS_SES_SECRET_ACCESS_KEY,
+    ...ZEN_MODELS,
+    ...($dev
+      ? [
+          new sst.Secret("CLOUDFLARE_DEFAULT_ACCOUNT_ID", process.env.CLOUDFLARE_DEFAULT_ACCOUNT_ID!),
+          new sst.Secret("CLOUDFLARE_API_TOKEN", process.env.CLOUDFLARE_API_TOKEN!),
+        ]
+      : []),
+    gatewayKv,
   ],
   environment: {
     //VITE_DOCS_URL: web.url.apply((url) => url!),

install

@@ -2,9 +2,8 @@
 set -euo pipefail
 APP=opencode
 
+MUTED='\033[0;2m'
 RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
 ORANGE='\033[38;2;255;140;0m'
 NC='\033[0m' # No Color
 
@@ -26,7 +25,11 @@ elif [[ "$arch" == "x86_64" ]]; then
   arch="x64"
 fi
 
-filename="$APP-$os-$arch.zip"
+if [ "$os" = "linux" ]; then
+    filename="$APP-$os-$arch.tar.gz"
+else
+    filename="$APP-$os-$arch.zip"
+fi
 
 
 case "$filename" in
@@ -45,6 +48,18 @@ case "$filename" in
     ;;
 esac
 
+if [ "$os" = "linux" ]; then
+    if ! command -v tar >/dev/null 2>&1; then
+         echo -e "${RED}Error: 'tar' is required but not installed.${NC}"
+         exit 1
+    fi
+else
+    if ! command -v unzip >/dev/null 2>&1; then
+        echo -e "${RED}Error: 'unzip' is required but not installed.${NC}"
+        exit 1
+    fi
+fi
+
 INSTALL_DIR=$HOME/.opencode/bin
 mkdir -p "$INSTALL_DIR"
 
@@ -67,8 +82,8 @@ print_message() {
     local color=""
 
     case $level in
-        info) color="${GREEN}" ;;
-        warning) color="${YELLOW}" ;;
+        info) color="${NC}" ;;
+        warning) color="${NC}" ;;
         error) color="${RED}" ;;
     esac
 
@@ -86,19 +101,119 @@ check_version() {
         installed_version=$(echo $installed_version | awk '{print $2}')
 
         if [[ "$installed_version" != "$specific_version" ]]; then
-            print_message info "Installed version: ${YELLOW}$installed_version."
+            print_message info "${MUTED}Installed version: ${NC}$installed_version."
         else
-            print_message info "Version ${YELLOW}$specific_version${GREEN} already installed"
+            print_message info "${MUTED}Version ${NC}$specific_version${MUTED} already installed"
             exit 0
         fi
     fi
 }
 
+unbuffered_sed() {
+    if echo | sed -u -e "" >/dev/null 2>&1; then
+        sed -nu "$@"
+    elif echo | sed -l -e "" >/dev/null 2>&1; then
+        sed -nl "$@"
+    else
+        local pad="$(printf "\n%512s" "")"
+        sed -ne "s/$/\\${pad}/" "$@"
+    fi
+}
+
+print_progress() {
+    local bytes="$1"
+    local length="$2"
+    [ "$length" -gt 0 ] || return 0
+
+    local width=50
+    local percent=$(( bytes * 100 / length ))
+    [ "$percent" -gt 100 ] && percent=100
+    local on=$(( percent * width / 100 ))
+    local off=$(( width - on ))
+
+    local filled=$(printf "%*s" "$on" "")
+    filled=${filled// /■}
+    local empty=$(printf "%*s" "$off" "")
+    empty=${empty// /･}
+
+    printf "\r${ORANGE}%s%s %3d%%${NC}" "$filled" "$empty" "$percent" >&4
+}
+
+download_with_progress() {
+    local url="$1"
+    local output="$2"
+
+    if [ -t 2 ]; then
+        exec 4>&2
+    else
+        exec 4>/dev/null
+    fi
+
+    local tmp_dir=${TMPDIR:-/tmp}
+    local basename="${tmp_dir}/opencode_install_$$"
+    local tracefile="${basename}.trace"
+
+    rm -f "$tracefile"
+    mkfifo "$tracefile"
+
+    # Hide cursor
+    printf "\033[?25l" >&4
+
+    trap "trap - RETURN; rm -f \"$tracefile\"; printf '\033[?25h' >&4; exec 4>&-" RETURN
+
+    (
+        curl --trace-ascii "$tracefile" -s -L -o "$output" "$url"
+    ) &
+    local curl_pid=$!
+
+    unbuffered_sed \
+        -e 'y/ACDEGHLNORTV/acdeghlnortv/' \
+        -e '/^0000: content-length:/p' \
+        -e '/^<= recv data/p' \
+        "$tracefile" | \
+    {
+        local length=0
+        local bytes=0
+        
+        while IFS=" " read -r -a line; do
+            [ "${#line[@]}" -lt 2 ] && continue
+            local tag="${line[0]} ${line[1]}"
+            
+            if [ "$tag" = "0000: content-length:" ]; then
+                length="${line[2]}"
+                length=$(echo "$length" | tr -d '\r')
+                bytes=0
+            elif [ "$tag" = "<= recv" ]; then
+                local size="${line[3]}"
+                bytes=$(( bytes + size ))
+                if [ "$length" -gt 0 ]; then
+                    print_progress "$bytes" "$length"
+                fi
+            fi
+        done
+    }
+
+    wait $curl_pid
+    local ret=$?
+    echo "" >&4
+    return $ret
+}
+
 download_and_install() {
-    print_message info "Downloading ${ORANGE}opencode ${GREEN}version: ${YELLOW}$specific_version ${GREEN}..."
+    print_message info "\n${MUTED}Installing ${NC}opencode ${MUTED}version: ${NC}$specific_version"
     mkdir -p opencodetmp && cd opencodetmp
-    curl -# -L -o "$filename" "$url"
-    unzip -q "$filename"
+    
+    if [[ "$os" == "windows" ]] || ! download_with_progress "$url" "$filename"; then
+        # Fallback to standard curl on Windows or if custom progress fails
+        curl -# -L -o "$filename" "$url"
+    fi
+
+    if [ "$os" = "linux" ]; then
+        tar -xzf "$filename"
+    else
+        unzip -q "$filename"
+    fi
+    
     mv opencode "$INSTALL_DIR"
     chmod 755 "${INSTALL_DIR}/opencode"
     cd .. && rm -rf opencodetmp
@@ -117,7 +232,7 @@ add_to_path() {
     elif [[ -w $config_file ]]; then
         echo -e "\n# opencode" >> "$config_file"
         echo "$command" >> "$config_file"
-        print_message info "Successfully added ${ORANGE}opencode ${GREEN}to \$PATH in $config_file"
+        print_message info "${MUTED}Successfully added ${NC}opencode ${MUTED}to \$PATH in ${NC}$config_file"
     else
         print_message warning "Manually add the directory to $config_file (or similar):"
         print_message info "  $command"
@@ -191,3 +306,20 @@ if [ -n "${GITHUB_ACTIONS-}" ] && [ "${GITHUB_ACTIONS}" == "true" ]; then
     echo "$INSTALL_DIR" >> $GITHUB_PATH
     print_message info "Added $INSTALL_DIR to \$GITHUB_PATH"
 fi
+
+echo -e ""
+echo -e "${MUTED}                    ${NC}             ▄     "
+echo -e "${MUTED}█▀▀█ █▀▀█ █▀▀█ █▀▀▄ ${NC}█▀▀▀ █▀▀█ █▀▀█ █▀▀█"
+echo -e "${MUTED}█░░█ █░░█ █▀▀▀ █░░█ ${NC}█░░░ █░░█ █░░█ █▀▀▀"
+echo -e "${MUTED}▀▀▀▀ █▀▀▀ ▀▀▀▀ ▀  ▀ ${NC}▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀"
+echo -e ""
+echo -e ""
+echo -e "${MUTED}To get started, navigate to a project and run:${NC}"
+echo -e "opencode                   ${MUTED}Use free models${NC}"
+echo -e "opencode auth login        ${MUTED}Add paid provider API keys${NC}"
+echo -e "opencode help              ${MUTED}List commands and options${NC}"
+echo -e ""
+echo -e "${MUTED}For more information visit ${NC}https://opencode.ai/docs"
+echo -e ""
+echo -e ""
+

nix/hashes.json

@@ -0,0 +1,3 @@
+{
+  "nodeModules": "sha256-HILcNy8B0k++ObGwUrD9dM0n9MvASR4AiyxmKSv3LV8="
+}

nix/node-modules.nix

@@ -0,0 +1,52 @@
+{ hash, lib, stdenvNoCC, bun, cacert, curl }:
+args:
+stdenvNoCC.mkDerivation {
+  pname = "opencode-node_modules";
+  version = args.version;
+  src = args.src;
+
+  impureEnvVars =
+    lib.fetchers.proxyImpureEnvVars
+    ++ [
+      "GIT_PROXY_COMMAND"
+      "SOCKS_SERVER"
+    ];
+
+  nativeBuildInputs = [ bun cacert curl ];
+
+  dontConfigure = true;
+
+  buildPhase = ''
+    runHook preBuild
+    export HOME=$(mktemp -d)
+    export BUN_INSTALL_CACHE_DIR=$(mktemp -d)
+    bun install \
+      --cpu="*" \
+      --os="*" \
+      --frozen-lockfile \
+      --ignore-scripts \
+      --no-progress \
+      --linker=isolated
+    bun --bun ${args.canonicalizeScript}
+    bun --bun ${args.normalizeBinsScript}
+    runHook postBuild
+  '';
+
+  installPhase = ''
+    runHook preInstall
+    mkdir -p $out
+    while IFS= read -r dir; do
+      rel="''${dir#./}"
+      dest="$out/$rel"
+      mkdir -p "$(dirname "$dest")"
+      cp -R "$dir" "$dest"
+    done < <(find . -type d -name node_modules -prune | sort)
+    runHook postInstall
+  '';
+
+  dontFixup = true;
+
+  outputHashAlgo = "sha256";
+  outputHashMode = "recursive";
+  outputHash = hash;
+}

nix/opencode.nix

@@ -0,0 +1,108 @@
+{ lib, stdenv, stdenvNoCC, bun, fzf, ripgrep, makeBinaryWrapper }:
+args:
+let
+  scripts = args.scripts;
+  mkModules =
+    attrs:
+    args.mkNodeModules (
+      attrs
+      // {
+        canonicalizeScript = scripts + "/canonicalize-node-modules.ts";
+        normalizeBinsScript = scripts + "/normalize-bun-binaries.ts";
+      }
+    );
+in
+stdenvNoCC.mkDerivation (finalAttrs: {
+  pname = "opencode";
+  version = args.version;
+
+  src = args.src;
+
+  node_modules = mkModules {
+    version = finalAttrs.version;
+    src = finalAttrs.src;
+  };
+
+  nativeBuildInputs = [
+    bun
+    makeBinaryWrapper
+  ];
+
+  configurePhase = ''
+    runHook preConfigure
+    cp -R ${finalAttrs.node_modules}/. .
+    runHook postConfigure
+  '';
+
+  env.MODELS_DEV_API_JSON = args.modelsDev;
+  env.OPENCODE_VERSION = args.version;
+  env.OPENCODE_CHANNEL = "stable";
+
+  buildPhase = ''
+    runHook preBuild
+
+    cp ${scripts + "/bun-build.ts"} bun-build.ts
+
+    substituteInPlace bun-build.ts \
+      --replace '@VERSION@' "${finalAttrs.version}"
+
+    export BUN_COMPILE_TARGET=${args.target}
+    bun --bun bun-build.ts
+
+    runHook postBuild
+  '';
+
+  dontStrip = true;
+
+  installPhase = ''
+    runHook preInstall
+
+    cd packages/opencode
+    if [ ! -f opencode ]; then
+      echo "ERROR: opencode binary not found in $(pwd)"
+      ls -la
+      exit 1
+    fi
+    if [ ! -f opencode-worker.js ]; then
+      echo "ERROR: opencode worker bundle not found in $(pwd)"
+      ls -la
+      exit 1
+    fi
+
+    install -Dm755 opencode $out/bin/opencode
+    install -Dm644 opencode-worker.js $out/bin/opencode-worker.js
+    if [ -f opencode-assets.manifest ]; then
+      while IFS= read -r asset; do
+        [ -z "$asset" ] && continue
+        if [ ! -f "$asset" ]; then
+          echo "ERROR: referenced asset \"$asset\" missing"
+          exit 1
+        fi
+        install -Dm644 "$asset" "$out/bin/$(basename "$asset")"
+      done < opencode-assets.manifest
+    fi
+    runHook postInstall
+  '';
+
+  postFixup = ''
+    wrapProgram "$out/bin/opencode" --prefix PATH : ${lib.makeBinPath [ fzf ripgrep ]}
+  '';
+
+  meta = {
+    description = "AI coding agent built for the terminal";
+    longDescription = ''
+      OpenCode is a terminal-based agent that can build anything.
+      It combines a TypeScript/JavaScript core with a Go-based TUI
+      to provide an interactive AI coding experience.
+    '';
+    homepage = "https://github.com/sst/opencode";
+    license = lib.licenses.mit;
+    platforms = [
+      "aarch64-linux"
+      "x86_64-linux"
+      "aarch64-darwin"
+      "x86_64-darwin"
+    ];
+    mainProgram = "opencode";
+  };
+})

nix/scripts/bun-build.ts

@@ -0,0 +1,115 @@
+import solidPlugin from "./packages/opencode/node_modules/@opentui/solid/scripts/solid-plugin"
+import path from "path"
+import fs from "fs"
+
+const version = "@VERSION@"
+const pkg = path.join(process.cwd(), "packages/opencode")
+const parser = fs.realpathSync(path.join(pkg, "./node_modules/@opentui/core/parser.worker.js"))
+const worker = "./src/cli/cmd/tui/worker.ts"
+const target = process.env["BUN_COMPILE_TARGET"]
+
+if (!target) {
+  throw new Error("BUN_COMPILE_TARGET not set")
+}
+
+process.chdir(pkg)
+
+const manifestName = "opencode-assets.manifest"
+const manifestPath = path.join(pkg, manifestName)
+
+const readTrackedAssets = () => {
+  if (!fs.existsSync(manifestPath)) return []
+  return fs
+    .readFileSync(manifestPath, "utf8")
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+}
+
+const removeTrackedAssets = () => {
+  for (const file of readTrackedAssets()) {
+    const filePath = path.join(pkg, file)
+    if (fs.existsSync(filePath)) {
+      fs.rmSync(filePath, { force: true })
+    }
+  }
+}
+
+const assets = new Set<string>()
+
+const addAsset = async (p: string) => {
+  const file = path.basename(p)
+  const dest = path.join(pkg, file)
+  await Bun.write(dest, Bun.file(p))
+  assets.add(file)
+}
+
+removeTrackedAssets()
+
+const result = await Bun.build({
+  conditions: ["browser"],
+  tsconfig: "./tsconfig.json",
+  plugins: [solidPlugin],
+  sourcemap: "external",
+  entrypoints: ["./src/index.ts", parser, worker],
+  define: {
+    OPENCODE_VERSION: `'@VERSION@'`,
+    OTUI_TREE_SITTER_WORKER_PATH: "/$bunfs/root/" + path.relative(pkg, parser).replace(/\\/g, "/"),
+    OPENCODE_CHANNEL: "'latest'",
+  },
+  compile: {
+    target,
+    outfile: "opencode",
+    execArgv: ["--user-agent=opencode/" + version, '--env-file=""', "--"],
+    windows: {},
+  },
+})
+
+if (!result.success) {
+  console.error("Build failed!")
+  for (const log of result.logs) {
+    console.error(log)
+  }
+  throw new Error("Compilation failed")
+}
+
+const assetOutputs = result.outputs?.filter((x) => x.kind === "asset") ?? []
+for (const x of assetOutputs) {
+  await addAsset(x.path)
+}
+
+const bundle = await Bun.build({
+  entrypoints: [worker],
+  tsconfig: "./tsconfig.json",
+  plugins: [solidPlugin],
+  target: "bun",
+  outdir: "./.opencode-worker",
+  sourcemap: "none",
+})
+
+if (!bundle.success) {
+  console.error("Worker build failed!")
+  for (const log of bundle.logs) {
+    console.error(log)
+  }
+  throw new Error("Worker compilation failed")
+}
+
+const workerAssets = bundle.outputs?.filter((x) => x.kind === "asset") ?? []
+for (const x of workerAssets) {
+  await addAsset(x.path)
+}
+
+const output = bundle.outputs.find((x) => x.kind === "entry-point")
+if (!output) {
+  throw new Error("Worker build produced no entry-point output")
+}
+
+const dest = path.join(pkg, "opencode-worker.js")
+await Bun.write(dest, Bun.file(output.path))
+fs.rmSync(path.dirname(output.path), { recursive: true, force: true })
+
+const list = Array.from(assets)
+await Bun.write(manifestPath, list.length > 0 ? list.join("\n") + "\n" : "")
+
+console.log("Build successful!")

nix/scripts/canonicalize-node-modules.ts

@@ -0,0 +1,96 @@
+import { lstat, mkdir, readdir, rm, symlink } from "fs/promises"
+import { join, relative } from "path"
+
+type SemverLike = {
+  valid: (value: string) => string | null
+  rcompare: (left: string, right: string) => number
+}
+
+type Entry = {
+  dir: string
+  version: string
+  label: string
+}
+
+const root = process.cwd()
+const bunRoot = join(root, "node_modules/.bun")
+const linkRoot = join(bunRoot, "node_modules")
+const directories = (await readdir(bunRoot)).sort()
+const versions = new Map<string, Entry[]>()
+
+for (const entry of directories) {
+  const full = join(bunRoot, entry)
+  const info = await lstat(full)
+  if (!info.isDirectory()) {
+    continue
+  }
+  const marker = entry.lastIndexOf("@")
+  if (marker <= 0) {
+    continue
+  }
+  const slug = entry.slice(0, marker).replace(/\+/g, "/")
+  const version = entry.slice(marker + 1)
+  const list = versions.get(slug) ?? []
+  list.push({ dir: full, version, label: entry })
+  versions.set(slug, list)
+}
+
+const semverModule = (await import(join(bunRoot, "node_modules/semver"))) as
+  | SemverLike
+  | {
+      default: SemverLike
+    }
+const semver = "default" in semverModule ? semverModule.default : semverModule
+const selections = new Map<string, Entry>()
+
+for (const [slug, list] of versions) {
+  list.sort((a, b) => {
+    const left = semver.valid(a.version)
+    const right = semver.valid(b.version)
+    if (left && right) {
+      const delta = semver.rcompare(left, right)
+      if (delta !== 0) {
+        return delta
+      }
+    }
+    if (left && !right) {
+      return -1
+    }
+    if (!left && right) {
+      return 1
+    }
+    return b.version.localeCompare(a.version)
+  })
+  selections.set(slug, list[0])
+}
+
+await rm(linkRoot, { recursive: true, force: true })
+await mkdir(linkRoot, { recursive: true })
+
+const rewrites: string[] = []
+
+for (const [slug, entry] of Array.from(selections.entries()).sort((a, b) => a[0].localeCompare(b[0]))) {
+  const parts = slug.split("/")
+  const leaf = parts.pop()
+  if (!leaf) {
+    continue
+  }
+  const parent = join(linkRoot, ...parts)
+  await mkdir(parent, { recursive: true })
+  const linkPath = join(parent, leaf)
+  const desired = join(entry.dir, "node_modules", slug)
+  const relativeTarget = relative(parent, desired)
+  const resolved = relativeTarget.length === 0 ? "." : relativeTarget
+  await rm(linkPath, { recursive: true, force: true })
+  await symlink(resolved, linkPath)
+  rewrites.push(slug + " -> " + resolved)
+}
+
+rewrites.sort()
+console.log("[canonicalize-node-modules] rebuilt", rewrites.length, "links")
+for (const line of rewrites.slice(0, 20)) {
+  console.log("  ", line)
+}
+if (rewrites.length > 20) {
+  console.log("  ...")
+}

nix/scripts/normalize-bun-binaries.ts

@@ -0,0 +1,138 @@
+import { lstat, mkdir, readdir, rm, symlink } from "fs/promises"
+import { join, relative } from "path"
+
+type PackageManifest = {
+  name?: string
+  bin?: string | Record<string, string>
+}
+
+const root = process.cwd()
+const bunRoot = join(root, "node_modules/.bun")
+const bunEntries = (await safeReadDir(bunRoot)).sort()
+let rewritten = 0
+
+for (const entry of bunEntries) {
+  const modulesRoot = join(bunRoot, entry, "node_modules")
+  if (!(await exists(modulesRoot))) {
+    continue
+  }
+  const binRoot = join(modulesRoot, ".bin")
+  await rm(binRoot, { recursive: true, force: true })
+  await mkdir(binRoot, { recursive: true })
+
+  const packageDirs = await collectPackages(modulesRoot)
+  for (const packageDir of packageDirs) {
+    const manifest = await readManifest(packageDir)
+    if (!manifest) {
+      continue
+    }
+    const binField = manifest.bin
+    if (!binField) {
+      continue
+    }
+    const seen = new Set<string>()
+    if (typeof binField === "string") {
+      const fallback = manifest.name ?? packageDir.split("/").pop()
+      if (fallback) {
+        await linkBinary(binRoot, fallback, packageDir, binField, seen)
+      }
+    } else {
+      const entries = Object.entries(binField).sort((a, b) => a[0].localeCompare(b[0]))
+      for (const [name, target] of entries) {
+        await linkBinary(binRoot, name, packageDir, target, seen)
+      }
+    }
+  }
+}
+
+console.log(`[normalize-bun-binaries] rewrote ${rewritten} links`)
+
+async function collectPackages(modulesRoot: string) {
+  const found: string[] = []
+  const topLevel = (await safeReadDir(modulesRoot)).sort()
+  for (const name of topLevel) {
+    if (name === ".bin" || name === ".bun") {
+      continue
+    }
+    const full = join(modulesRoot, name)
+    if (!(await isDirectory(full))) {
+      continue
+    }
+    if (name.startsWith("@")) {
+      const scoped = (await safeReadDir(full)).sort()
+      for (const child of scoped) {
+        const scopedDir = join(full, child)
+        if (await isDirectory(scopedDir)) {
+          found.push(scopedDir)
+        }
+      }
+      continue
+    }
+    found.push(full)
+  }
+  return found.sort()
+}
+
+async function readManifest(dir: string) {
+  const file = Bun.file(join(dir, "package.json"))
+  if (!(await file.exists())) {
+    return null
+  }
+  const data = (await file.json()) as PackageManifest
+  return data
+}
+
+async function linkBinary(binRoot: string, name: string, packageDir: string, target: string, seen: Set<string>) {
+  if (!name || !target) {
+    return
+  }
+  const normalizedName = normalizeBinName(name)
+  if (seen.has(normalizedName)) {
+    return
+  }
+  const resolved = join(packageDir, target)
+  const script = Bun.file(resolved)
+  if (!(await script.exists())) {
+    return
+  }
+  seen.add(normalizedName)
+  const destination = join(binRoot, normalizedName)
+  const relativeTarget = relative(binRoot, resolved) || "."
+  await rm(destination, { force: true })
+  await symlink(relativeTarget, destination)
+  rewritten++
+}
+
+async function exists(path: string) {
+  try {
+    await lstat(path)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function isDirectory(path: string) {
+  try {
+    const info = await lstat(path)
+    return info.isDirectory()
+  } catch {
+    return false
+  }
+}
+
+async function safeReadDir(path: string) {
+  try {
+    return await readdir(path)
+  } catch {
+    return []
+  }
+}
+
+function normalizeBinName(name: string) {
+  const slash = name.lastIndexOf("/")
+  if (slash >= 0) {
+    return name.slice(slash + 1)
+  }
+  return name
+}

nix/scripts/update-hashes.sh

@@ -0,0 +1,112 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+DUMMY="sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
+SYSTEM=${SYSTEM:-x86_64-linux}
+DEFAULT_HASH_FILE=${MODULES_HASH_FILE:-nix/hashes.json}
+HASH_FILE=${HASH_FILE:-$DEFAULT_HASH_FILE}
+
+if [ ! -f "$HASH_FILE" ]; then
+  cat >"$HASH_FILE" <<EOF
+{
+  "nodeModules": "$DUMMY"
+}
+EOF
+fi
+
+if git rev-parse --is-inside-work-tree >/dev/null 2>&1; then
+  if ! git ls-files --error-unmatch "$HASH_FILE" >/dev/null 2>&1; then
+    git add -N "$HASH_FILE" >/dev/null 2>&1 || true
+  fi
+fi
+
+export DUMMY
+export NIX_KEEP_OUTPUTS=1
+export NIX_KEEP_DERIVATIONS=1
+
+cleanup() {
+  rm -f "${JSON_OUTPUT:-}" "${BUILD_LOG:-}" "${TMP_EXPR:-}"
+}
+
+trap cleanup EXIT
+
+write_node_modules_hash() {
+  local value="$1"
+  local temp
+  temp=$(mktemp)
+  jq --arg value "$value" '.nodeModules = $value' "$HASH_FILE" >"$temp"
+  mv "$temp" "$HASH_FILE"
+}
+
+TARGET="packages.${SYSTEM}.default"
+MODULES_ATTR=".#packages.${SYSTEM}.default.node_modules"
+CORRECT_HASH=""
+
+DRV_PATH="$(nix eval --raw "${MODULES_ATTR}.drvPath")"
+
+echo "Setting dummy node_modules outputHash for ${SYSTEM}..."
+write_node_modules_hash "$DUMMY"
+
+BUILD_LOG=$(mktemp)
+JSON_OUTPUT=$(mktemp)
+
+echo "Building node_modules for ${SYSTEM} to discover correct outputHash..."
+echo "Attempting to realize derivation: ${DRV_PATH}"
+REALISE_OUT=$(nix-store --realise "$DRV_PATH" --keep-failed 2>&1 | tee "$BUILD_LOG" || true)
+
+BUILD_PATH=$(echo "$REALISE_OUT" | grep "^/nix/store/" | head -n1 || true)
+if [ -n "$BUILD_PATH" ] && [ -d "$BUILD_PATH" ]; then
+  echo "Realized node_modules output: $BUILD_PATH"
+  CORRECT_HASH=$(nix hash path --sri "$BUILD_PATH" 2>/dev/null || true)
+fi
+
+if [ -z "$CORRECT_HASH" ]; then
+  CORRECT_HASH="$(grep -E 'got:\s+sha256-[A-Za-z0-9+/=]+' "$BUILD_LOG" | awk '{print $2}' | head -n1 || true)"
+
+  if [ -z "$CORRECT_HASH" ]; then
+    CORRECT_HASH="$(grep -A2 'hash mismatch' "$BUILD_LOG" | grep 'got:' | awk '{print $2}' | sed 's/sha256:/sha256-/' || true)"
+  fi
+
+  if [ -z "$CORRECT_HASH" ]; then
+    echo "Searching for kept failed build directory..."
+    KEPT_DIR=$(grep -oE "build directory.*'[^']+'" "$BUILD_LOG" | grep -oE "'/[^']+'" | tr -d "'" | head -n1)
+
+    if [ -z "$KEPT_DIR" ]; then
+      KEPT_DIR=$(grep -oE '/nix/var/nix/builds/[^ ]+' "$BUILD_LOG" | head -n1)
+    fi
+
+    if [ -n "$KEPT_DIR" ] && [ -d "$KEPT_DIR" ]; then
+      echo "Found kept build directory: $KEPT_DIR"
+      if [ -d "$KEPT_DIR/build" ]; then
+        HASH_PATH="$KEPT_DIR/build"
+      else
+        HASH_PATH="$KEPT_DIR"
+      fi
+
+      echo "Attempting to hash: $HASH_PATH"
+      ls -la "$HASH_PATH" || true
+
+      if [ -d "$HASH_PATH/node_modules" ]; then
+        CORRECT_HASH=$(nix hash path --sri "$HASH_PATH" 2>/dev/null || true)
+        echo "Computed hash from kept build: $CORRECT_HASH"
+      fi
+    fi
+  fi
+fi
+
+if [ -z "$CORRECT_HASH" ]; then
+  echo "Failed to determine correct node_modules hash for ${SYSTEM}."
+  echo "Build log:"
+  cat "$BUILD_LOG"
+  exit 1
+fi
+
+write_node_modules_hash "$CORRECT_HASH"
+
+jq -e --arg hash "$CORRECT_HASH" '.nodeModules == $hash' "$HASH_FILE" >/dev/null
+
+echo "node_modules hash updated for ${SYSTEM}: $CORRECT_HASH"
+
+rm -f "$BUILD_LOG"
+unset BUILD_LOG

opencode.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "plugin": ["opencode-openai-codex-auth"],
-  "mcp": {
-    "weather": {
-      "type": "local",
-      "command": ["bun", "x", "@h1deya/mcp-server-weather"]
-    },
-    "context7": {
-      "type": "remote",
-      "url": "https://mcp.context7.com/mcp",
-      "headers": {
-        "CONTEXT7_API_KEY": "{env:CONTEXT7_API_KEY}"
-      }
-    }
-  }
-}

package.json

@@ -4,12 +4,13 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.1",
+  "packageManager": "bun@1.3.3",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "typecheck": "bun turbo typecheck",
     "prepare": "husky",
-    "random": "echo 'Random script'"
+    "random": "echo 'Random script'",
+    "hello": "echo 'Hello World!'"
   },
   "workspaces": {
     "packages": [
@@ -19,43 +20,48 @@
       "packages/slack"
     ],
     "catalog": {
-      "@types/bun": "1.3.0",
+      "@types/bun": "1.3.3",
       "@hono/zod-validator": "0.4.2",
       "ulid": "3.0.1",
       "@kobalte/core": "0.13.11",
+      "@types/luxon": "3.7.1",
       "@types/node": "22.13.9",
       "@tsconfig/node22": "22.0.2",
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/precision-diffs": "0.4.2",
-      "@solidjs/meta": "0.29.4",
+      "@pierre/precision-diffs": "0.5.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
-      "ai": "5.0.8",
+      "ai": "5.0.97",
       "hono": "4.7.10",
+      "hono-openapi": "1.1.1",
       "fuzzysort": "3.1.0",
       "luxon": "3.6.1",
       "typescript": "5.8.2",
       "@typescript/native-preview": "7.0.0-dev.20251014.1",
       "zod": "4.1.8",
       "remeda": "2.26.0",
-      "solid-js": "1.9.9",
       "solid-list": "0.3.0",
       "tailwindcss": "4.1.11",
       "virtua": "0.42.3",
       "vite": "7.1.4",
-      "vite-plugin-solid": "2.11.8"
+      "@solidjs/meta": "0.29.4",
+      "@solidjs/router": "0.15.4",
+      "@solidjs/start": "1.2.0",
+      "solid-js": "1.9.10",
+      "vite-plugin-solid": "2.11.10"
     }
   },
   "devDependencies": {
     "@tsconfig/bun": "catalog:",
     "husky": "9.1.7",
     "prettier": "3.6.2",
-    "sst": "3.17.22",
+    "sst": "3.17.23",
     "turbo": "2.5.6"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "3.933.0",
     "@opencode-ai/script": "workspace:*",
     "@opencode-ai/sdk": "workspace:*"
   },
@@ -66,7 +72,7 @@
   "license": "MIT",
   "prettier": {
     "semi": false,
-    "printWidth": 100
+    "printWidth": 120
   },
   "trustedDependencies": [
     "esbuild",

packages/console/app/.gitignore

@@ -23,6 +23,9 @@ app.config.timestamp_*.js
 # Temp
 gitignore
 
+# Generated files
+public/sitemap.xml
+
 # System Files
 .DS_Store
 Thumbs.db

packages/console/app/package.json

@@ -1,25 +1,26 @@
 {
   "name": "@opencode-ai/console-app",
+  "version": "1.0.98",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
     "dev": "vinxi dev --host 0.0.0.0",
     "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": "1.0.36"
+    "build": "./script/generate-sitemap.ts && vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
+    "start": "vinxi start"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",
+    "@jsx-email/render": "1.1.1",
+    "@kobalte/core": "catalog:",
+    "@openauthjs/openauth": "catalog:",
     "@opencode-ai/console-core": "workspace:*",
     "@opencode-ai/console-mail": "workspace:*",
-    "@openauthjs/openauth": "catalog:",
-    "@kobalte/core": "catalog:",
-    "@jsx-email/render": "1.1.1",
     "@opencode-ai/console-resource": "workspace:*",
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.0",
-    "@solidjs/start": "^1.1.0",
+    "@solidjs/meta": "catalog:",
+    "@solidjs/router": "catalog:",
+    "@solidjs/start": "catalog:",
+    "chart.js": "4.5.1",
     "solid-js": "catalog:",
     "vinxi": "^0.5.7",
     "zod": "catalog:"

packages/console/app/script/generate-sitemap.ts

@@ -0,0 +1,103 @@
+#!/usr/bin/env bun
+import { readdir, writeFile } from "fs/promises"
+import { join, dirname } from "path"
+import { fileURLToPath } from "url"
+import { config } from "../src/config.js"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const BASE_URL = config.baseUrl
+const PUBLIC_DIR = join(__dirname, "../public")
+const ROUTES_DIR = join(__dirname, "../src/routes")
+const DOCS_DIR = join(__dirname, "../../../web/src/content/docs")
+
+interface SitemapEntry {
+  url: string
+  priority: number
+  changefreq: string
+}
+
+async function getMainRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  // Add main static routes
+  const staticRoutes = [
+    { path: "/", priority: 1.0, changefreq: "daily" },
+    { path: "/enterprise", priority: 0.8, changefreq: "weekly" },
+    { path: "/brand", priority: 0.6, changefreq: "monthly" },
+    { path: "/zen", priority: 0.8, changefreq: "weekly" },
+  ]
+
+  for (const route of staticRoutes) {
+    routes.push({
+      url: `${BASE_URL}${route.path}`,
+      priority: route.priority,
+      changefreq: route.changefreq,
+    })
+  }
+
+  return routes
+}
+
+async function getDocsRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  try {
+    const files = await readdir(DOCS_DIR)
+
+    for (const file of files) {
+      if (!file.endsWith(".mdx")) continue
+
+      const slug = file.replace(".mdx", "")
+      const path = slug === "index" ? "/docs/" : `/docs/${slug}`
+
+      routes.push({
+        url: `${BASE_URL}${path}`,
+        priority: slug === "index" ? 0.9 : 0.7,
+        changefreq: "weekly",
+      })
+    }
+  } catch (error) {
+    console.error("Error reading docs directory:", error)
+  }
+
+  return routes
+}
+
+function generateSitemapXML(entries: SitemapEntry[]): string {
+  const urls = entries
+    .map(
+      (entry) => `  <url>
+    <loc>${entry.url}</loc>
+    <changefreq>${entry.changefreq}</changefreq>
+    <priority>${entry.priority}</priority>
+  </url>`,
+    )
+    .join("\n")
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`
+}
+
+async function main() {
+  console.log("Generating sitemap...")
+
+  const mainRoutes = await getMainRoutes()
+  const docsRoutes = await getDocsRoutes()
+
+  const allRoutes = [...mainRoutes, ...docsRoutes]
+
+  console.log(`Found ${mainRoutes.length} main routes`)
+  console.log(`Found ${docsRoutes.length} docs routes`)
+  console.log(`Total: ${allRoutes.length} routes`)
+
+  const xml = generateSitemapXML(allRoutes)
+
+  const outputPath = join(PUBLIC_DIR, "sitemap.xml")
+  await writeFile(outputPath, xml, "utf-8")
+
+  console.log(`✓ Sitemap generated at ${outputPath}`)
+}
+
+main()

packages/console/app/src/app.tsx

@@ -12,10 +12,7 @@ export default function App() {
       root={(props) => (
         <MetaProvider>
           <Title>opencode</Title>
-          <Meta
-            name="description"
-            content="OpenCode - The AI coding agent built for the terminal."
-          />
+          <Meta name="description" content="OpenCode - The AI coding agent built for the terminal." />
           <Suspense>{props.children}</Suspense>
         </MetaProvider>
       )}

packages/console/app/src/component/faq.tsx

@@ -13,10 +13,7 @@ export function Faq(props: ParentProps & { question: string }) {
           fill="currentColor"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M12.5 11.5H19V12.5H12.5V19H11.5V12.5H5V11.5H11.5V5H12.5V11.5Z"
-            fill="currentColor"
-          />
+          <path d="M12.5 11.5H19V12.5H12.5V19H11.5V12.5H5V11.5H11.5V5H12.5V11.5Z" fill="currentColor" />
         </svg>
         <svg
           data-slot="faq-icon-minus"

packages/console/app/src/component/icon.tsx

@@ -9,23 +9,10 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
       <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"
-      />
+      <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"
-      />
+      <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
@@ -36,16 +23,8 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
         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="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" />
@@ -61,21 +40,9 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
       <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="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" />
@@ -86,40 +53,16 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
       <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="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="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="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>
   )
@@ -127,14 +70,7 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 
 export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <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="currentColor"
@@ -147,20 +83,8 @@ export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 
 export function IconCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2.75 15.0938L9 20.25L21.25 3.75"
-        stroke="#03B000"
-        stroke-width="2"
-        stroke-linecap="square"
-      />
+    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.75 15.0938L9 20.25L21.25 3.75" stroke="#03B000" stroke-width="2" stroke-linecap="square" />
     </svg>
   )
 }
@@ -189,14 +113,7 @@ export function IconStripe(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 
 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"
-    >
+    <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"
@@ -207,14 +124,7 @@ export function IconChevron(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 
 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"
-    >
+    <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>
   )
@@ -234,10 +144,7 @@ export function IconOpenAI(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
 export function IconAnthropic(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
     <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fill="currentColor"
-        d="M13.7891 3.93188L20.2223 20.068H23.7502L17.317 3.93188H13.7891Z"
-      />
+      <path fill="currentColor" d="M13.7891 3.93188L20.2223 20.068H23.7502L17.317 3.93188H13.7891Z" />
       <path
         fill="currentColor"
         d="M6.32538 13.6827L8.52662 8.01201L10.7279 13.6827H6.32538ZM6.68225 3.93188L0.25 20.068H3.84652L5.16202 16.6794H11.8914L13.2067 20.068H16.8033L10.371 3.93188H6.68225Z"
@@ -295,6 +202,14 @@ export function IconZai(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   )
 }
 
+export function IconGoogle(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 50 50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M49.04,24.001l-1.082-0.043h-0.001C36.134,23.492,26.508,13.866,26.042,2.043L25.999,0.96C25.978,0.424,25.537,0,25,0	s-0.978,0.424-0.999,0.96l-0.043,1.083C23.492,13.866,13.866,23.492,2.042,23.958L0.96,24.001C0.424,24.022,0,24.463,0,25	c0,0.537,0.424,0.978,0.961,0.999l1.082,0.042c11.823,0.467,21.449,10.093,21.915,21.916l0.043,1.083C24.022,49.576,24.463,50,25,50	s0.978-0.424,0.999-0.96l0.043-1.083c0.466-11.823,10.092-21.449,21.915-21.916l1.082-0.042C49.576,25.978,50,25.537,50,25	C50,24.463,49.576,24.022,49.04,24.001z"></path>
+    </svg>
+  )
+}
+
 export function IconStealth(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18" fill="none">
@@ -305,3 +220,30 @@ export function IconStealth(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function IconChevronLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="none">
+      <path d="M12 15L7 10L12 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  )
+}
+
+export function IconChevronRight(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="none">
+      <path d="M8 5L13 10L8 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  )
+}
+
+export function IconBreakdown(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M2 12L2 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M6 12L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M10 12L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M14 12L14 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+  )
+}

packages/console/app/src/config.ts

@@ -2,6 +2,9 @@
  * Application-wide constants and configuration
  */
 export const config = {
+  // Base URL
+  baseUrl: "https://opencode.ai",
+
   // GitHub
   github: {
     repoUrl: "https://github.com/sst/opencode",
@@ -19,8 +22,8 @@ export const config = {
 
   // Static stats (used on landing page)
   stats: {
-    contributors: "250",
-    commits: "3,500",
+    contributors: "300",
+    commits: "4,000",
     monthlyUsers: "300,000",
   },
 } as const

packages/console/app/src/lib/github.ts

@@ -7,10 +7,7 @@ export const github = query(async () => {
     "User-Agent":
       "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36",
   }
-  const apiBaseUrl = config.github.repoUrl.replace(
-    "https://github.com/",
-    "https://api.github.com/repos/",
-  )
+  const apiBaseUrl = config.github.repoUrl.replace("https://github.com/", "https://api.github.com/repos/")
   try {
     const [meta, releases, contributors] = await Promise.all([
       fetch(apiBaseUrl, { headers }).then((res) => res.json()),

packages/console/app/src/routes/auth/authorize.ts

@@ -2,9 +2,6 @@ import type { APIEvent } from "@solidjs/start/server"
 import { AuthClient } from "~/context/auth"
 
 export async function GET(input: APIEvent) {
-  const result = await AuthClient.authorize(
-    new URL("./callback", input.request.url).toString(),
-    "code",
-  )
+  const result = await AuthClient.authorize(new URL("./callback", input.request.url).toString(), "code")
   return Response.redirect(result.url, 302)
 }

packages/console/app/src/routes/brand/index.css

@@ -264,7 +264,7 @@
   [data-component="brand-content"] {
     padding: 4rem 5rem;
 
-    h2 {
+    h1 {
       font-size: 1.5rem;
       font-weight: 500;
       color: var(--color-text-strong);

packages/console/app/src/routes/brand/index.tsx

@@ -1,6 +1,7 @@
 import "./index.css"
-import { Title, Meta } from "@solidjs/meta"
+import { Title, Meta, Link } from "@solidjs/meta"
 import { Header } from "~/component/header"
+import { config } from "~/config"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
 import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
@@ -53,26 +54,21 @@ export default function Brand() {
   return (
     <main data-page="enterprise">
       <Title>OpenCode | Brand</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/brand`} />
       <Meta name="description" content="OpenCode brand guidelines" />
       <div data-component="container">
         <Header />
 
         <div data-component="content">
           <section data-component="brand-content">
-            <h2>Brand guidelines</h2>
+            <h1>Brand guidelines</h1>
             <p>Resources and assets to help you work with the OpenCode brand.</p>
             <button
               data-component="download-button"
               onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")}
             >
               Download all assets
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                   stroke="currentColor"
@@ -88,13 +84,7 @@ export default function Brand() {
                 <div data-component="actions">
                   <button onClick={() => downloadFile(logoLightPng, "opencode-logo-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -105,13 +95,7 @@ export default function Brand() {
                   </button>
                   <button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -127,13 +111,7 @@ export default function Brand() {
                 <div data-component="actions">
                   <button onClick={() => downloadFile(logoDarkPng, "opencode-logo-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -144,13 +122,7 @@ export default function Brand() {
                   </button>
                   <button onClick={() => downloadFile(logoDarkSvg, "opencode-logo-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -164,17 +136,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -183,17 +147,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -207,17 +163,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkDark} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -226,17 +174,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}
-                  >
+                  <button onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -250,19 +190,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -271,19 +201,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -297,19 +217,9 @@ export default function Brand() {
               <div>
                 <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")}>
                     PNG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"
@@ -318,19 +228,9 @@ export default function Brand() {
                       />
                     </svg>
                   </button>
-                  <button
-                    onClick={() =>
-                      downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")
-                    }
-                  >
+                  <button onClick={() => downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")}>
                     SVG
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
                         stroke="currentColor"

packages/console/app/src/routes/desktop-feedback.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@solidjs/router"
+
+export async function GET() {
+  return redirect("https://discord.gg/h5TNnkFVNy")
+}

packages/console/app/src/routes/enterprise/index.css

@@ -287,7 +287,7 @@
   }
 
   [data-component="enterprise-column-1"] {
-    h2 {
+    h1 {
       font-size: 1.5rem;
       font-weight: 500;
       color: var(--color-text-strong);

packages/console/app/src/routes/enterprise/index.tsx

@@ -1,6 +1,7 @@
 import "./index.css"
-import { Title, Meta } from "@solidjs/meta"
+import { Title, Meta, Link } from "@solidjs/meta"
 import { createSignal, Show } from "solid-js"
+import { config } from "~/config"
 import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
@@ -54,6 +55,7 @@ export default function Enterprise() {
   return (
     <main data-page="enterprise">
       <Title>OpenCode | Enterprise solutions for your organisation</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/enterprise`} />
       <Meta name="description" content="Contact OpenCode for enterprise solutions" />
       <div data-component="container">
         <Header />
@@ -62,41 +64,28 @@ export default function Enterprise() {
           <section data-component="enterprise-content">
             <div data-component="enterprise-columns">
               <div data-component="enterprise-column-1">
-                <h2>Your code is yours</h2>
+                <h1>Your code is yours</h1>
                 <p>
-                  OpenCode operates securely inside your organization with no data or context stored
-                  and no licensing restrictions or ownership claims. Start a trial with your team,
-                  then deploy it across your organization by integrating it with your SSO and
-                  internal AI gateway.
+                  OpenCode operates securely inside your organization with no data or context stored and no licensing
+                  restrictions or ownership claims. Start a trial with your team, then deploy it across your
+                  organization by integrating it with your SSO and internal AI gateway.
                 </p>
                 <p>Let us know and how we can help.</p>
 
                 <Show when={false}>
                   <div data-component="testimonial">
                     <div data-component="quotation">
-                      <svg
-                        width="20"
-                        height="17"
-                        viewBox="0 0 20 17"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
+                      <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                           d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
                           fill="currentColor"
                         />
                       </svg>
                     </div>
-                    Thanks to OpenCode, we found a way to create software to track all our assets —
-                    even the imaginary ones.
+                    Thanks to OpenCode, we found a way to create software to track all our assets — even the imaginary
+                    ones.
                     <div data-component="testimonial-logo">
-                      <svg
-                        width="80"
-                        height="79"
-                        viewBox="0 0 80 79"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
+                      <svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                           fill-rule="evenodd"
                           clip-rule="evenodd"
@@ -213,11 +202,7 @@ export default function Enterprise() {
                     </button>
                   </form>
 
-                  {showSuccess() && (
-                    <div data-component="success-message">
-                      Message sent, we'll be in touch soon.
-                    </div>
-                  )}
+                  {showSuccess() && <div data-component="success-message">Message sent, we'll be in touch soon.</div>}
                 </div>
               </div>
             </div>
@@ -230,31 +215,29 @@ export default function Enterprise() {
             <ul>
               <li>
                 <Faq question="What is OpenCode Enterprise?">
-                  OpenCode Enterprise is for organizations that want to ensure that their code and
-                  data never leaves their infrastructure. It can do this by using a centralized
-                  config that integrates with your SSO and internal AI gateway.
+                  OpenCode Enterprise is for organizations that want to ensure that their code and data never leaves
+                  their infrastructure. It can do this by using a centralized config that integrates with your SSO and
+                  internal AI gateway.
                 </Faq>
               </li>
               <li>
                 <Faq question="How do I get started with OpenCode Enterprise?">
-                  Simply start with an internal trial with your team. OpenCode by default does not
-                  store your code or context data, making it easy to get started. Then contact us to
-                  discuss pricing and implementation options.
+                  Simply start with an internal trial with your team. OpenCode by default does not store your code or
+                  context data, making it easy to get started. Then contact us to discuss pricing and implementation
+                  options.
                 </Faq>
               </li>
               <li>
                 <Faq question="How does enterprise pricing work?">
-                  We offer per-seat enterprise pricing. If you have your own LLM gateway, we do not
-                  charge for tokens used. For further details, contact us for a custom quote based
-                  on your organization's needs.
+                  We offer per-seat enterprise pricing. If you have your own LLM gateway, we do not charge for tokens
+                  used. For further details, contact us for a custom quote based on your organization's needs.
                 </Faq>
               </li>
               <li>
                 <Faq question="Is my data secure with OpenCode Enterprise?">
-                  Yes. OpenCode does not store your code or context data. All processing happens
-                  locally or through direct API calls to your AI provider. With central config and
-                  SSO integration, your data remains secure within your organization's
-                  infrastructure.
+                  Yes. OpenCode does not store your code or context data. All processing happens locally or through
+                  direct API calls to your AI provider. With central config and SSO integration, your data remains
+                  secure within your organization's infrastructure.
                 </Faq>
               </li>
             </ul>

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

@@ -479,7 +479,7 @@ body {
       border-bottom: 1px solid var(--color-border-weak);
     }
 
-    strong {
+    h1 {
       font-size: 28px;
       color: var(--color-text-strong);
       font-weight: 500;

packages/console/app/src/routes/stripe/webhook.ts

@@ -41,8 +41,7 @@ export async function POST(input: APIEvent) {
     }
     if (body.type === "checkout.session.completed") {
       const workspaceID = body.data.object.metadata?.workspaceID
-      const amountInCents =
-        body.data.object.metadata?.amount && parseInt(body.data.object.metadata?.amount)
+      const amountInCents = body.data.object.metadata?.amount && parseInt(body.data.object.metadata?.amount)
       const customerID = body.data.object.customer as string
       const paymentID = body.data.object.payment_intent as string
       const invoiceID = body.data.object.invoice as string
@@ -55,8 +54,7 @@ export async function POST(input: APIEvent) {
 
       await Actor.provide("system", { workspaceID }, async () => {
         const customer = await Billing.get()
-        if (customer?.customerID && customer.customerID !== customerID)
-          throw new Error("Customer ID mismatch")
+        if (customer?.customerID && customer.customerID !== customerID) throw new Error("Customer ID mismatch")
 
         // set customer metadata
         if (!customer?.customerID) {
@@ -72,8 +70,7 @@ export async function POST(input: APIEvent) {
           expand: ["payment_method"],
         })
         const paymentMethod = paymentIntent.payment_method
-        if (!paymentMethod || typeof paymentMethod === "string")
-          throw new Error("Payment method not expanded")
+        if (!paymentMethod || typeof paymentMethod === "string") throw new Error("Payment method not expanded")
 
         await Database.transaction(async (tx) => {
           await tx
@@ -128,12 +125,7 @@ export async function POST(input: APIEvent) {
             amount: PaymentTable.amount,
           })
           .from(PaymentTable)
-          .where(
-            and(
-              eq(PaymentTable.paymentID, paymentIntentID),
-              eq(PaymentTable.workspaceID, workspaceID),
-            ),
-          )
+          .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
           .then((rows) => rows[0]?.amount),
       )
       if (!amount) throw new Error("Payment not found")
@@ -144,12 +136,7 @@ export async function POST(input: APIEvent) {
           .set({
             timeRefunded: new Date(body.created * 1000),
           })
-          .where(
-            and(
-              eq(PaymentTable.paymentID, paymentIntentID),
-              eq(PaymentTable.workspaceID, workspaceID),
-            ),
-          )
+          .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
 
         await tx
           .update(BillingTable)

packages/console/app/src/routes/temp.tsx

@@ -79,19 +79,17 @@ export default function Home() {
               <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
             </li>
             <li>
-              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a>{" "}
-              provided by opencode <label>New</label>
+              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode{" "}
+              <label>New</label>
             </li>
             <li>
               <strong>Multi-session</strong> Start multiple agents in parallel on the same project
             </li>
             <li>
-              <strong>Shareable links</strong> Share a link to any sessions for reference or to
-              debug
+              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
             </li>
             <li>
-              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max
-              account
+              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
             </li>
             <li>
               <strong>Use any model</strong> Supports 75+ LLM providers through{" "}

packages/console/app/src/routes/workspace-picker.tsx

@@ -85,10 +85,7 @@ export function WorkspacePicker() {
       <Dropdown trigger={currentWorkspace()} align="left">
         <For each={workspaces()}>
           {(workspace) => (
-            <DropdownItem
-              selected={workspace.id === params.id}
-              onClick={() => handleSelectWorkspace(workspace.id)}
-            >
+            <DropdownItem selected={workspace.id === params.id} onClick={() => handleSelectWorkspace(workspace.id)}>
               {workspace.name || workspace.slug}
             </DropdownItem>
           )}
@@ -98,11 +95,7 @@ export function WorkspacePicker() {
         </button>
       </Dropdown>
 
-      <Modal
-        open={store.showForm}
-        onClose={() => setStore("showForm", false)}
-        title="Create New Workspace"
-      >
+      <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

packages/console/app/src/routes/workspace.tsx

@@ -19,7 +19,7 @@ const getUserEmail = query(async (workspaceID: string) => {
 
 export default function WorkspaceLayout(props: RouteSectionProps) {
   const params = useParams()
-  const userEmail = createAsync(() => getUserEmail(params.id))
+  const userEmail = createAsync(() => getUserEmail(params.id!))
   return (
     <main data-page="workspace">
       <Link rel="icon" type="image/svg+xml" href="/favicon-zen.svg" />

packages/console/app/src/routes/workspace/[id].tsx

@@ -5,7 +5,7 @@ import "./[id].css"
 
 export default function WorkspaceLayout(props: RouteSectionProps) {
   const params = useParams()
-  const userInfo = createAsync(() => querySessionInfo(params.id))
+  const userInfo = createAsync(() => querySessionInfo(params.id!))
 
   return (
     <main data-page="workspace">

packages/console/app/src/routes/workspace/[id]/billing/billing-section.tsx

@@ -27,24 +27,31 @@ const createSessionUrl = action(async (workspaceID: string, returnUrl: string) =
 export function BillingSection() {
   const params = useParams()
   // ORIGINAL CODE - COMMENTED OUT FOR TESTING
-  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
   const checkoutAction = useAction(createCheckoutUrl)
   const checkoutSubmission = useSubmission(createCheckoutUrl)
   const sessionAction = useAction(createSessionUrl)
   const sessionSubmission = useSubmission(createSessionUrl)
   const [store, setStore] = createStore({
     showAddBalanceForm: false,
-    addBalanceAmount: "",
+    addBalanceAmount: billingInfo()?.reloadAmount.toString() ?? "",
     checkoutRedirecting: false,
     sessionRedirecting: false,
   })
+
+  createEffect(() => {
+    const info = billingInfo()
+    if (info) {
+      setStore("addBalanceAmount", info.reloadAmount.toString())
+    }
+  })
   const balance = createMemo(() => formatBalance(billingInfo()?.balance ?? 0))
 
   async function onClickCheckout() {
     const amount = parseInt(store.addBalanceAmount)
     const baseUrl = window.location.href
 
-    const checkout = await checkoutAction(params.id, amount, baseUrl, baseUrl)
+    const checkout = await checkoutAction(params.id!, amount, baseUrl, baseUrl)
     if (checkout && checkout.data) {
       setStore("checkoutRedirecting", true)
       window.location.href = checkout.data
@@ -53,7 +60,7 @@ export function BillingSection() {
 
   async function onClickSession() {
     const baseUrl = window.location.href
-    const sessionUrl = await sessionAction(params.id, baseUrl)
+    const sessionUrl = await sessionAction(params.id!, baseUrl)
     if (sessionUrl && sessionUrl.data) {
       setStore("sessionRedirecting", true)
       window.location.href = sessionUrl.data
@@ -67,7 +74,6 @@ export function BillingSection() {
     }
     setStore({
       showAddBalanceForm: true,
-      addBalanceAmount: billingInfo()!.reloadAmount.toString(),
     })
   }
 
@@ -133,8 +139,7 @@ export function BillingSection() {
       <div data-slot="section-title">
         <h2>Billing</h2>
         <p>
-          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any
-          questions.
+          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any questions.
         </p>
       </div>
       <div data-slot="section-content">
@@ -164,32 +169,20 @@ export function BillingSection() {
                         placeholder="Enter amount"
                       />
                       <div data-slot="form-actions">
-                        <button
-                          data-color="ghost"
-                          type="button"
-                          onClick={() => hideAddBalanceForm()}
-                        >
+                        <button data-color="ghost" type="button" onClick={() => hideAddBalanceForm()}>
                           Cancel
                         </button>
                         <button
                           data-color="primary"
                           type="button"
-                          disabled={
-                            !store.addBalanceAmount ||
-                            checkoutSubmission.pending ||
-                            store.checkoutRedirecting
-                          }
+                          disabled={!store.addBalanceAmount || checkoutSubmission.pending || store.checkoutRedirecting}
                           onClick={onClickCheckout}
                         >
-                          {checkoutSubmission.pending || store.checkoutRedirecting
-                            ? "Loading..."
-                            : "Add"}
+                          {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Add"}
                         </button>
                       </div>
                     </div>
-                    <Show
-                      when={checkoutSubmission.result && (checkoutSubmission.result as any).error}
-                    >
+                    <Show when={checkoutSubmission.result && (checkoutSubmission.result as any).error}>
                       {(err: any) => <div data-slot="form-error">{err()}</div>}
                     </Show>
                   </div>
@@ -210,10 +203,7 @@ export function BillingSection() {
                 <div data-slot="card-details">
                   <Switch>
                     <Match when={billingInfo()?.paymentMethodType === "card"}>
-                      <Show
-                        when={billingInfo()?.paymentMethodLast4}
-                        fallback={<span data-slot="number">----</span>}
-                      >
+                      <Show when={billingInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
                         <span data-slot="secret">••••</span>
                         <span data-slot="number">{billingInfo()?.paymentMethodLast4}</span>
                       </Show>
@@ -241,9 +231,7 @@ export function BillingSection() {
             disabled={checkoutSubmission.pending || store.checkoutRedirecting}
             onClick={onClickCheckout}
           >
-            {checkoutSubmission.pending || store.checkoutRedirecting
-              ? "Loading..."
-              : "Enable Billing"}
+            {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Enable Billing"}
           </button>
         </Show>
       </div>

packages/console/app/src/routes/workspace/[id]/billing/index.tsx

@@ -8,8 +8,8 @@ import { queryBillingInfo, querySessionInfo } from "../../common"
 
 export default function () {
   const params = useParams()
-  const userInfo = createAsync(() => querySessionInfo(params.id))
-  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const userInfo = createAsync(() => querySessionInfo(params.id!))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
 
   return (
     <div data-page="workspace-[id]">

packages/console/app/src/routes/workspace/[id]/billing/monthly-limit-section.tsx

@@ -30,7 +30,7 @@ export function MonthlyLimitSection() {
   const params = useParams()
   const submission = useSubmission(setMonthlyLimit)
   const [store, setStore] = createStore({ show: false })
-  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
 
   let input: HTMLInputElement
 
@@ -104,13 +104,9 @@ export function MonthlyLimitSection() {
             </button>
           </Show>
         </div>
-        <Show
-          when={billingInfo()?.monthlyLimit}
-          fallback={<p data-slot="usage-status">No usage limit set.</p>}
-        >
+        <Show when={billingInfo()?.monthlyLimit} fallback={<p data-slot="usage-status">No usage limit set.</p>}>
           <p data-slot="usage-status">
-            Current usage for{" "}
-            {new Date().toLocaleDateString("en-US", { month: "long", timeZone: "UTC" })} is $
+            Current usage for {new Date().toLocaleDateString("en-US", { month: "long", timeZone: "UTC" })} is $
             {(() => {
               const dateLastUsed = billingInfo()?.timeMonthlyUsageUpdated
               if (!dateLastUsed) return "0"

packages/console/app/src/routes/workspace/[id]/billing/payment-section.tsx

@@ -19,7 +19,7 @@ const downloadReceipt = action(async (workspaceID: string, paymentID: string) =>
 
 export function PaymentSection() {
   const params = useParams()
-  const payments = createAsync(() => getPaymentsInfo(params.id))
+  const payments = createAsync(() => getPaymentsInfo(params.id!))
   const downloadReceiptAction = useAction(downloadReceipt)
 
   // DUMMY DATA FOR TESTING
@@ -89,10 +89,7 @@ export function PaymentSection() {
                       <td data-slot="payment-receipt">
                         <button
                           onClick={async () => {
-                            const receiptUrl = await downloadReceiptAction(
-                              params.id,
-                              payment.paymentID!,
-                            )
+                            const receiptUrl = await downloadReceiptAction(params.id!, payment.paymentID!)
                             if (receiptUrl) {
                               window.open(receiptUrl, "_blank")
                             }

packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx

@@ -58,7 +58,7 @@ const setReload = action(async (form: FormData) => {
 
 export function ReloadSection() {
   const params = useParams()
-  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
   const setReloadSubmission = useSubmission(setReload)
   const reloadSubmission = useSubmission(reload)
   const [store, setStore] = createStore({
@@ -69,11 +69,7 @@ export function ReloadSection() {
   })
 
   createEffect(() => {
-    if (
-      !setReloadSubmission.pending &&
-      setReloadSubmission.result &&
-      !(setReloadSubmission.result as any).error
-    ) {
+    if (!setReloadSubmission.pending && setReloadSubmission.result && !(setReloadSubmission.result as any).error) {
       setStore("show", false)
     }
   })
@@ -108,8 +104,8 @@ export function ReloadSection() {
             }
           >
             <p>
-              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b>{" "}
-              (+$1.23 processing fee) when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
+              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b> (+$1.23 processing fee)
+              when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
             </p>
           </Show>
           <button data-color="primary" type="button" onClick={() => show()}>
@@ -194,8 +190,8 @@ export function ReloadSection() {
                 minute: "2-digit",
                 second: "2-digit",
               })}
-              . Reason: {billingInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment
-              method and try again.
+              . Reason: {billingInfo()?.reloadError?.replace(/\.$/, "")}. Please update your payment method and try
+              again.
             </p>
             <form action={reload} method="post" data-slot="create-form">
               <input type="hidden" name="workspaceID" value={params.id} />

packages/console/app/src/routes/workspace/[id]/graph-section.module.css

@@ -0,0 +1,145 @@
+.root {
+  [data-component="empty-state"] {
+    padding: var(--space-20) var(--space-6);
+    text-align: center;
+    border: 1px dashed var(--color-border);
+    border-radius: var(--border-radius-sm);
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      font-size: var(--font-size-sm);
+      color: var(--color-text-muted);
+    }
+  }
+
+  [data-slot="filter-container"] {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+
+    [data-component="dropdown"] {
+      [data-slot="trigger"] {
+        border: 1px solid var(--color-border);
+        background-color: var(--color-bg);
+        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;
+
+        &:hover {
+          border-color: var(--color-accent);
+        }
+
+        &: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"] {
+        min-width: 200px;
+        max-height: 300px;
+        overflow-y: auto;
+        padding: var(--space-1);
+      }
+    }
+  }
+
+  [data-slot="month-picker"] {
+    display: flex;
+    align-items: center;
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    padding: 0;
+  }
+
+  [data-slot="month-button"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none !important;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+    line-height: 1;
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+    }
+
+    svg {
+      display: block;
+      width: 16px;
+      height: 16px;
+      stroke-width: 2;
+    }
+  }
+
+  [data-slot="month-label"] {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--color-text);
+    line-height: 1.5;
+    min-width: 140px;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  [data-slot="model-item"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    border: none !important;
+    background: none;
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--color-bg-hover);
+    }
+
+    span {
+      flex: 1;
+      user-select: none;
+    }
+  }
+
+  [data-slot="chart-container"] {
+    padding: var(--space-6);
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    height: 400px;
+  }
+
+  @media (max-width: 40rem) {
+    [data-slot="chart-container"] {
+      height: 300px;
+      padding: var(--space-4);
+    }
+
+    [data-component="empty-state"] {
+      height: 300px;
+    }
+  }
+}

packages/console/app/src/routes/workspace/[id]/graph-section.tsx

@@ -0,0 +1,423 @@
+import { and, Database, eq, gte, inArray, isNull, lte, or, sql, sum } from "@opencode-ai/console-core/drizzle/index.js"
+import { UsageTable } from "@opencode-ai/console-core/schema/billing.sql.js"
+import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js"
+import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
+import { AuthTable } from "@opencode-ai/console-core/schema/auth.sql.js"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createEffect, createMemo, onCleanup, Show, For } from "solid-js"
+import { createStore } from "solid-js/store"
+import { withActor } from "~/context/auth.withActor"
+import { Dropdown } from "~/component/dropdown"
+import { IconChevronLeft, IconChevronRight } from "~/component/icon"
+import styles from "./graph-section.module.css"
+import {
+  Chart,
+  BarController,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+  type ChartConfiguration,
+} from "chart.js"
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend)
+
+async function getCosts(workspaceID: string, year: number, month: number) {
+  "use server"
+  return withActor(async () => {
+    const startDate = new Date(year, month, 1)
+    const endDate = new Date(year, month + 1, 0)
+
+    // First query: get usage data without joining keys
+    const usageData = await Database.use((tx) =>
+      tx
+        .select({
+          date: sql<string>`DATE(${UsageTable.timeCreated})`,
+          model: UsageTable.model,
+          totalCost: sum(UsageTable.cost),
+          keyId: UsageTable.keyID,
+        })
+        .from(UsageTable)
+        .where(
+          and(
+            eq(UsageTable.workspaceID, workspaceID),
+            gte(UsageTable.timeCreated, startDate),
+            lte(UsageTable.timeCreated, endDate),
+          ),
+        )
+        .groupBy(sql`DATE(${UsageTable.timeCreated})`, UsageTable.model, UsageTable.keyID)
+        .then((x) =>
+          x.map((r) => ({
+            ...r,
+            totalCost: r.totalCost ? parseInt(r.totalCost) : 0,
+          })),
+        ),
+    )
+
+    // Get unique key IDs from usage
+    const usageKeyIds = new Set(usageData.map((r) => r.keyId).filter((id) => id !== null))
+
+    // Second query: get all existing keys plus any keys from usage
+    const keysData = await Database.use((tx) =>
+      tx
+        .select({
+          keyId: KeyTable.id,
+          keyName: KeyTable.name,
+          userEmail: AuthTable.subject,
+          timeDeleted: KeyTable.timeDeleted,
+        })
+        .from(KeyTable)
+        .innerJoin(UserTable, and(eq(KeyTable.userID, UserTable.id), eq(KeyTable.workspaceID, UserTable.workspaceID)))
+        .innerJoin(AuthTable, and(eq(UserTable.accountID, AuthTable.accountID), eq(AuthTable.provider, "email")))
+        .where(
+          and(
+            eq(KeyTable.workspaceID, workspaceID),
+            usageKeyIds.size > 0
+              ? or(inArray(KeyTable.id, Array.from(usageKeyIds)), isNull(KeyTable.timeDeleted))
+              : isNull(KeyTable.timeDeleted),
+          ),
+        )
+        .orderBy(AuthTable.subject, KeyTable.name),
+    )
+
+    return {
+      usage: usageData,
+      keys: keysData.map((key) => ({
+        id: key.keyId,
+        displayName:
+          key.timeDeleted !== null
+            ? `${key.userEmail} - ${key.keyName} (deleted)`
+            : `${key.userEmail} - ${key.keyName}`,
+      })),
+    }
+  }, workspaceID)
+}
+
+const queryCosts = query(getCosts, "costs.get")
+
+const MODEL_COLORS: Record<string, string> = {
+  "claude-sonnet-4-5": "#D4745C",
+  "claude-sonnet-4": "#E8B4A4",
+  "claude-opus-4": "#C8A098",
+  "claude-haiku-4-5": "#F0D8D0",
+  "claude-3-5-haiku": "#F8E8E0",
+  "gpt-5.1": "#4A90E2",
+  "gpt-5.1-codex": "#6BA8F0",
+  "gpt-5": "#7DB8F8",
+  "gpt-5-codex": "#9FCAFF",
+  "gpt-5-nano": "#B8D8FF",
+  "grok-code": "#8B5CF6",
+  "big-pickle": "#10B981",
+  "kimi-k2": "#F59E0B",
+  "qwen3-coder": "#EC4899",
+  "glm-4.6": "#14B8A6",
+}
+
+function getModelColor(model: string): string {
+  if (MODEL_COLORS[model]) return MODEL_COLORS[model]
+
+  const hash = model.split("").reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0)
+  const hue = Math.abs(hash) % 360
+  return `hsl(${hue}, 50%, 65%)`
+}
+
+function formatDateLabel(dateStr: string): string {
+  const date = new Date()
+  const [y, m, d] = dateStr.split("-").map(Number)
+  date.setFullYear(y)
+  date.setMonth(m - 1)
+  date.setDate(d)
+  date.setHours(0, 0, 0, 0)
+  const month = date.toLocaleDateString("en-US", { month: "short" })
+  const day = date.getUTCDate().toString().padStart(2, "0")
+  return `${month} ${day}`
+}
+
+function addOpacityToColor(color: string, opacity: number): string {
+  if (color.startsWith("#")) {
+    const r = parseInt(color.slice(1, 3), 16)
+    const g = parseInt(color.slice(3, 5), 16)
+    const b = parseInt(color.slice(5, 7), 16)
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`
+  }
+  if (color.startsWith("hsl")) return color.replace(")", `, ${opacity})`).replace("hsl", "hsla")
+  return color
+}
+
+export function GraphSection() {
+  let canvasRef: HTMLCanvasElement | undefined
+  let chartInstance: Chart | undefined
+  const params = useParams()
+  const now = new Date()
+  const [store, setStore] = createStore({
+    data: null as Awaited<ReturnType<typeof getCosts>> | null,
+    year: now.getFullYear(),
+    month: now.getMonth(),
+    key: null as string | null,
+    model: null as string | null,
+    modelDropdownOpen: false,
+    keyDropdownOpen: false,
+  })
+  const initialData = createAsync(() => queryCosts(params.id!, store.year, store.month))
+
+  const onPreviousMonth = async () => {
+    const month = store.month === 0 ? 11 : store.month - 1
+    const year = store.month === 0 ? store.year - 1 : store.year
+    const data = await getCosts(params.id!, year, month)
+    setStore({ month, year, data })
+  }
+
+  const onNextMonth = async () => {
+    const month = store.month === 11 ? 0 : store.month + 1
+    const year = store.month === 11 ? store.year + 1 : store.year
+    setStore({ month, year, data: await getCosts(params.id!, year, month) })
+  }
+
+  const onSelectModel = (model: string | null) => setStore({ model, modelDropdownOpen: false })
+
+  const onSelectKey = (keyID: string | null) => setStore({ key: keyID, keyDropdownOpen: false })
+
+  const getData = createMemo(() => store.data ?? initialData())
+
+  const getModels = createMemo(() => {
+    const data = getData()
+    if (!data?.usage) return []
+    return Array.from(new Set(data.usage.map((row) => row.model))).sort()
+  })
+
+  const getDates = createMemo(() => {
+    const daysInMonth = new Date(store.year, store.month + 1, 0).getDate()
+    return Array.from({ length: daysInMonth }, (_, i) => {
+      const date = new Date(store.year, store.month, i + 1)
+      return date.toISOString().split("T")[0]
+    })
+  })
+
+  const getKeyName = (keyID: string | null): string => {
+    if (!keyID || !store.data?.keys) return "All Keys"
+    const found = store.data.keys.find((k) => k.id === keyID)
+    return found?.displayName ?? "All Keys"
+  }
+
+  const formatMonthYear = () =>
+    new Date(store.year, store.month, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" })
+
+  const isCurrentMonth = () => store.year === now.getFullYear() && store.month === now.getMonth()
+
+  const chartConfig = createMemo((): ChartConfiguration | null => {
+    const data = getData()
+    const dates = getDates()
+    if (!data?.usage?.length) return null
+
+    const dailyData = new Map<string, Map<string, number>>()
+    for (const dateKey of dates) dailyData.set(dateKey, new Map())
+
+    data.usage
+      .filter((row) => (store.key ? row.keyId === store.key : true))
+      .forEach((row) => {
+        const dayMap = dailyData.get(row.date)
+        if (!dayMap) return
+        dayMap.set(row.model, (dayMap.get(row.model) ?? 0) + row.totalCost)
+      })
+
+    const filteredModels = store.model === null ? getModels() : [store.model]
+
+    const datasets = filteredModels.map((model) => {
+      const color = getModelColor(model)
+      return {
+        label: model,
+        data: dates.map((date) => (dailyData.get(date)?.get(model) || 0) / 100_000_000),
+        backgroundColor: color,
+        hoverBackgroundColor: color,
+        borderWidth: 0,
+      }
+    })
+
+    return {
+      type: "bar",
+      data: {
+        labels: dates.map(formatDateLabel),
+        datasets,
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false,
+            },
+            ticks: {
+              maxRotation: 0,
+              autoSkipPadding: 20,
+              color: "rgba(255, 255, 255, 0.5)",
+              font: {
+                family: "monospace",
+                size: 11,
+              },
+            },
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              color: "rgba(255, 255, 255, 0.1)",
+            },
+            ticks: {
+              color: "rgba(255, 255, 255, 0.5)",
+              font: {
+                family: "monospace",
+                size: 11,
+              },
+              callback: (value) => {
+                const num = Number(value)
+                return num >= 1000 ? `$${(num / 1000).toFixed(1)}k` : `$${num.toFixed(0)}`
+              },
+            },
+          },
+        },
+        plugins: {
+          tooltip: {
+            mode: "index",
+            intersect: false,
+            backgroundColor: "rgba(0, 0, 0, 0.9)",
+            titleColor: "rgba(255, 255, 255, 0.9)",
+            bodyColor: "rgba(255, 255, 255, 0.8)",
+            borderColor: "rgba(255, 255, 255, 0.1)",
+            borderWidth: 1,
+            padding: 12,
+            displayColors: true,
+            callbacks: {
+              label: (context) => {
+                const value = context.parsed.y
+                if (!value || value === 0) return
+                return `${context.dataset.label}: $${value.toFixed(2)}`
+              },
+            },
+          },
+          legend: {
+            display: true,
+            position: "bottom",
+            labels: {
+              color: "rgba(255, 255, 255, 0.7)",
+              font: {
+                size: 12,
+              },
+              padding: 16,
+              boxWidth: 16,
+              boxHeight: 16,
+              usePointStyle: false,
+            },
+            onHover: (event, legendItem, legend) => {
+              const chart = legend.chart
+              chart.data.datasets?.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i)
+                const baseColor = getModelColor(dataset.label || "")
+                const color = i === legendItem.datasetIndex ? baseColor : addOpacityToColor(baseColor, 0.3)
+                meta.data.forEach((bar: any) => {
+                  bar.options.backgroundColor = color
+                })
+              })
+              chart.update("none")
+            },
+            onLeave: (event, legendItem, legend) => {
+              const chart = legend.chart
+              chart.data.datasets?.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i)
+                const baseColor = getModelColor(dataset.label || "")
+                meta.data.forEach((bar: any) => {
+                  bar.options.backgroundColor = baseColor
+                })
+              })
+              chart.update("none")
+            },
+          },
+        },
+      },
+    }
+  })
+
+  createEffect(() => {
+    const config = chartConfig()
+    if (!config || !canvasRef) return
+
+    if (chartInstance) chartInstance.destroy()
+    chartInstance = new Chart(canvasRef, config)
+  })
+
+  onCleanup(() => chartInstance?.destroy())
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Cost</h2>
+        <p>Usage costs broken down by model.</p>
+      </div>
+
+      <Show when={getData()}>
+        <div data-slot="filter-container">
+          <div data-slot="month-picker">
+            <button data-slot="month-button" onClick={onPreviousMonth}>
+              <IconChevronLeft />
+            </button>
+            <span data-slot="month-label">{formatMonthYear()}</span>
+            <button data-slot="month-button" onClick={onNextMonth} disabled={isCurrentMonth()}>
+              <IconChevronRight />
+            </button>
+          </div>
+          <Dropdown
+            trigger={store.model === null ? "All Models" : store.model}
+            open={store.modelDropdownOpen}
+            onOpenChange={(open) => setStore({ modelDropdownOpen: open })}
+          >
+            <>
+              <button data-slot="model-item" onClick={() => onSelectModel(null)}>
+                <span>All Models</span>
+              </button>
+              <For each={getModels()}>
+                {(model) => (
+                  <button data-slot="model-item" onClick={() => onSelectModel(model)}>
+                    <span>{model}</span>
+                  </button>
+                )}
+              </For>
+            </>
+          </Dropdown>
+          <Dropdown
+            trigger={getKeyName(store.key)}
+            open={store.keyDropdownOpen}
+            onOpenChange={(open) => setStore({ keyDropdownOpen: open })}
+          >
+            <>
+              <button data-slot="model-item" onClick={() => onSelectKey(null)}>
+                <span>All Keys</span>
+              </button>
+              <For each={getData()?.keys || []}>
+                {(key) => (
+                  <button data-slot="model-item" onClick={() => onSelectKey(key.id)}>
+                    <span>{key.displayName}</span>
+                  </button>
+                )}
+              </For>
+            </>
+          </Dropdown>
+        </div>
+      </Show>
+
+      <Show
+        when={chartConfig()}
+        fallback={
+          <div data-component="empty-state">
+            <p>No usage data available for the selected period.</p>
+          </div>
+        }
+      >
+        <div data-slot="chart-container">
+          <canvas ref={canvasRef} />
+        </div>
+      </Show>
+    </section>
+  )
+}

packages/console/app/src/routes/workspace/[id]/index.tsx

@@ -5,13 +5,14 @@ import { NewUserSection } from "./new-user-section"
 import { UsageSection } from "./usage-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
+import { GraphSection } from "./graph-section"
 import { IconLogo } from "~/component/icon"
 import { querySessionInfo, queryBillingInfo, createCheckoutUrl, formatBalance } from "../common"
 
 export default function () {
   const params = useParams()
-  const userInfo = createAsync(() => querySessionInfo(params.id))
-  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const userInfo = createAsync(() => querySessionInfo(params.id!))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
   const checkoutAction = useAction(createCheckoutUrl)
   const checkoutSubmission = useSubmission(createCheckoutUrl)
   const [store, setStore] = createStore({
@@ -21,7 +22,7 @@ export default function () {
 
   async function onClickCheckout() {
     const baseUrl = window.location.href
-    const checkout = await checkoutAction(params.id, billingInfo()!.reloadAmount, baseUrl, baseUrl)
+    const checkout = await checkoutAction(params.id!, billingInfo()!.reloadAmount, baseUrl, baseUrl)
     if (checkout && checkout.data) {
       setStore("checkoutRedirecting", true)
       window.location.href = checkout.data
@@ -51,9 +52,7 @@ export default function () {
                     disabled={checkoutSubmission.pending || store.checkoutRedirecting}
                     onClick={onClickCheckout}
                   >
-                    {checkoutSubmission.pending || store.checkoutRedirecting
-                      ? "Loading..."
-                      : "Enable billing"}
+                    {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Enable billing"}
                   </button>
                 }
               >
@@ -68,6 +67,9 @@ export default function () {
 
       <div data-slot="sections">
         <NewUserSection />
+        <Show when={userInfo()?.isAdmin}>
+          <GraphSection />
+        </Show>
         <ModelSection />
         <Show when={userInfo()?.isAdmin}>
           <ProviderSection />

packages/console/app/src/routes/workspace/[id]/keys/key-section.tsx

@@ -45,7 +45,7 @@ const listKeys = query(async (workspaceID: string) => {
 
 export function KeySection() {
   const params = useParams()
-  const keys = createAsync(() => listKeys(params.id))
+  const keys = createAsync(() => listKeys(params.id!))
   const submission = useSubmission(createKey)
   const [store, setStore] = createStore({ show: false })
 
@@ -146,20 +146,14 @@ export function KeySection() {
                             title="Copy API key"
                           >
                             <span>{key.keyDisplay}</span>
-                            <Show
-                              when={copied()}
-                              fallback={<IconCopy style={{ width: "14px", height: "14px" }} />}
-                            >
+                            <Show when={copied()} fallback={<IconCopy style={{ width: "14px", height: "14px" }} />}>
                               <IconCheck style={{ width: "14px", height: "14px" }} />
                             </Show>
                           </button>
                         </Show>
                       </td>
                       <td data-slot="key-user-email">{key.email}</td>
-                      <td
-                        data-slot="key-last-used"
-                        title={key.timeUsed ? formatDateUTC(key.timeUsed) : undefined}
-                      >
+                      <td data-slot="key-last-used" title={key.timeUsed ? formatDateUTC(key.timeUsed) : undefined}>
                         {key.timeUsed ? formatDateForTable(key.timeUsed) : "-"}
                       </td>
                       <td data-slot="key-actions">

packages/console/app/src/routes/workspace/[id]/members/member-section.tsx

@@ -85,12 +85,7 @@ const updateMember = action(async (form: FormData) => {
   )
 }, "member.update")
 
-function MemberRow(props: {
-  member: any
-  workspaceID: string
-  actorID: string
-  actorRole: string
-}) {
+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"
@@ -214,7 +209,7 @@ const roleOptions = [
 
 export function MemberSection() {
   const params = useParams()
-  const data = createAsync(() => listMembers(params.id))
+  const data = createAsync(() => listMembers(params.id!))
   const submission = useSubmission(inviteMember)
   const [store, setStore] = createStore({
     show: false,
@@ -333,7 +328,7 @@ export function MemberSection() {
                 {(member) => (
                   <MemberRow
                     member={member}
-                    workspaceID={params.id}
+                    workspaceID={params.id!}
                     actorID={data()!.actorID}
                     actorRole={data()!.actorRole}
                   />

packages/console/app/src/routes/workspace/[id]/model-section.tsx

@@ -8,6 +8,7 @@ import { querySessionInfo } from "../common"
 import {
   IconAlibaba,
   IconAnthropic,
+  IconGoogle,
   IconMoonshotAI,
   IconOpenAI,
   IconStealth,
@@ -18,6 +19,7 @@ import {
 const getModelLab = (modelId: string) => {
   if (modelId.startsWith("claude")) return "Anthropic"
   if (modelId.startsWith("gpt")) return "OpenAI"
+  if (modelId.startsWith("gemini")) return "Google"
   if (modelId.startsWith("kimi")) return "Moonshot AI"
   if (modelId.startsWith("glm")) return "Z.ai"
   if (modelId.startsWith("qwen")) return "Alibaba"
@@ -30,9 +32,19 @@ const getModelsInfo = query(async (workspaceID: string) => {
   return withActor(async () => {
     return {
       all: Object.entries(ZenData.list().models)
-        .filter(([id, _model]) => !["claude-3-5-haiku", "minimax-m2"].includes(id))
-        .filter(([id, _model]) => !id.startsWith("an-"))
-        .sort(([_idA, modelA], [_idB, modelB]) => modelA.name.localeCompare(modelB.name))
+        .filter(([id, _model]) => !["claude-3-5-haiku"].includes(id))
+        .filter(([id, _model]) => !id.startsWith("alpha-"))
+        .sort(([idA, modelA], [idB, modelB]) => {
+          const priority = ["big-pickle", "grok", "claude", "gpt", "gemini"]
+          const getPriority = (id: string) => {
+            const index = priority.findIndex((p) => id.startsWith(p))
+            return index === -1 ? Infinity : index
+          }
+          const pA = getPriority(idA)
+          const pB = getPriority(idB)
+          if (pA !== pB) return pA - pB
+          return modelA.name.localeCompare(modelB.name)
+        })
         .map(([id, model]) => ({ id, name: model.name })),
       disabled: await Model.listDisabled(),
     }
@@ -60,8 +72,8 @@ const updateModel = action(async (form: FormData) => {
 
 export function ModelSection() {
   const params = useParams()
-  const modelsInfo = createAsync(() => getModelsInfo(params.id))
-  const userInfo = createAsync(() => querySessionInfo(params.id))
+  const modelsInfo = createAsync(() => getModelsInfo(params.id!))
+  const userInfo = createAsync(() => querySessionInfo(params.id!))
 
   const modelsWithLab = createMemo(() => {
     const info = modelsInfo()
@@ -76,8 +88,7 @@ export function ModelSection() {
       <div data-slot="section-title">
         <h2>Models</h2>
         <p>
-          Manage which models workspace members can access.{" "}
-          <a href="/docs/zen#pricing ">Learn more</a>.
+          Manage which models workspace members can access. <a href="/docs/zen#pricing ">Learn more</a>.
         </p>
       </div>
       <div data-slot="models-list">
@@ -105,6 +116,8 @@ export function ModelSection() {
                                   return <IconOpenAI width={16} height={16} />
                                 case "Anthropic":
                                   return <IconAnthropic width={16} height={16} />
+                                case "Google":
+                                  return <IconGoogle width={16} height={16} />
                                 case "Moonshot AI":
                                   return <IconMoonshotAI width={16} height={16} />
                                 case "Z.ai":

packages/console/app/src/routes/workspace/[id]/new-user-section.tsx

@@ -21,8 +21,8 @@ const listKeys = query(async (workspaceID: string) => {
 export function NewUserSection() {
   const params = useParams()
   const [copiedKey, setCopiedKey] = createSignal(false)
-  const keys = createAsync(() => listKeys(params.id))
-  const usage = createAsync(() => getUsageInfo(params.id))
+  const keys = createAsync(() => listKeys(params.id!))
+  const usage = createAsync(() => getUsageInfo(params.id!))
   const isNew = createMemo(() => {
     const keysList = keys()
     const usageList = usage()
@@ -43,24 +43,15 @@ export function NewUserSection() {
         <div data-component="feature-grid">
           <div data-slot="feature">
             <h3>Tested & Verified Models</h3>
-            <p>
-              We've benchmarked and tested models specifically for coding agents to ensure the best
-              performance.
-            </p>
+            <p>We've benchmarked and tested models specifically for coding agents to ensure the best performance.</p>
           </div>
           <div data-slot="feature">
             <h3>Highest Quality</h3>
-            <p>
-              Access models configured for optimal performance - no downgrades or routing to cheaper
-              providers.
-            </p>
+            <p>Access models configured for optimal performance - no downgrades or routing to cheaper providers.</p>
           </div>
           <div data-slot="feature">
             <h3>No Lock-in</h3>
-            <p>
-              Use Zen with any coding agent, and continue using other providers with opencode
-              whenever you want.
-            </p>
+            <p>Use Zen with any coding agent, and continue using other providers with opencode whenever you want.</p>
           </div>
         </div>
 

packages/console/app/src/routes/workspace/[id]/provider-section.tsx

@@ -54,11 +54,8 @@ const listProviders = query(async (workspaceID: string) => {
 
 function ProviderRow(props: { provider: Provider }) {
   const params = useParams()
-  const providers = createAsync(() => listProviders(params.id))
-  const saveSubmission = useSubmission(
-    saveProvider,
-    ([fd]) => fd.get("provider")?.toString() === props.provider.key,
-  )
+  const providers = createAsync(() => listProviders(params.id!))
+  const saveSubmission = useSubmission(saveProvider, ([fd]) => fd.get("provider")?.toString() === props.provider.key)
   const removeSubmission = useSubmission(
     removeProvider,
     ([fd]) => fd.get("provider")?.toString() === props.provider.key,
@@ -94,16 +91,9 @@ function ProviderRow(props: { provider: Provider }) {
       <td data-slot="provider-key">
         <Show
           when={store.editing}
-          fallback={
-            <span>{providerData() ? maskCredentials(providerData()!.credentials) : "-"}</span>
-          }
+          fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "-"}</span>}
         >
-          <form
-            id={`provider-form-${props.provider.key}`}
-            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)}

packages/console/app/src/routes/workspace/[id]/settings/settings-section.tsx

@@ -46,7 +46,7 @@ const updateWorkspace = action(async (form: FormData) => {
 
 export function SettingsSection() {
   const params = useParams()
-  const workspaceInfo = createAsync(() => getWorkspaceInfo(params.id))
+  const workspaceInfo = createAsync(() => getWorkspaceInfo(params.id!))
   const submission = useSubmission(updateWorkspace)
   const [store, setStore] = createStore({ show: false })
 

packages/console/app/src/routes/workspace/[id]/usage-section.module.css

@@ -1,24 +1,23 @@
 .root {
+  /* Empty state */
   [data-component="empty-state"] {
     padding: var(--space-20) var(--space-6);
     text-align: center;
     border: 1px dashed var(--color-border);
     border-radius: var(--border-radius-sm);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
 
     p {
-      line-height: 1.5;
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
     }
   }
 
+  /* Table container */
   [data-slot="usage-table"] {
     overflow-x: auto;
   }
 
+  /* Table element */
   [data-slot="usage-table-element"] {
     width: 100%;
     border-collapse: collapse;
@@ -48,7 +47,6 @@
 
       &[data-slot="usage-model"] {
         font-family: var(--font-sans);
-        font-weight: 400;
         color: var(--color-text-secondary);
         max-width: 200px;
         word-break: break-word;
@@ -56,33 +54,133 @@
 
       &[data-slot="usage-cost"] {
         color: var(--color-text);
+        font-weight: 500;
+      }
+
+      [data-slot="tokens-with-breakdown"] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      [data-slot="breakdown-button"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: transparent;
+        border: none;
+        color: var(--color-text-muted);
+        cursor: pointer;
+        transition: color 0.15s ease;
+
+        &:hover {
+          color: var(--color-text);
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      [data-slot="breakdown-popup"] {
+        position: absolute;
+        left: 0;
+        top: 100%;
+        margin-top: var(--space-2);
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        padding: var(--space-2);
+        z-index: 10;
+        min-width: 180px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        font-size: var(--font-size-xs);
+
+        @media (prefers-color-scheme: dark) {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
       }
     }
 
-    tbody tr {
-      &:last-child td {
-        border-bottom: none;
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  /* Pagination */
+  [data-slot="pagination"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-4) 0;
+    border-top: 1px solid var(--color-border-muted);
+    margin-top: var(--space-2);
+
+    button {
+      padding: var(--space-2) var(--space-4);
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text);
+      font-size: var(--font-size-sm);
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        stroke-width: 2;
+      }
+
+      &:hover:not(:disabled) {
+        background: var(--color-bg-tertiary);
+        border-color: var(--color-border-hover);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
       }
     }
+  }
 
-    @media (max-width: 40rem) {
+  /* Mobile responsive */
+  @media (max-width: 40rem) {
+    [data-slot="usage-table-element"] {
       th,
       td {
         padding: var(--space-2) var(--space-3);
         font-size: var(--font-size-xs);
       }
 
-      th {
-        &:nth-child(2) /* Model */ {
-          display: none;
-        }
-      }
-
-      td {
-        &:nth-child(2) /* Model */ {
-          display: none;
-        }
+      /* Hide Model column on mobile */
+      th:nth-child(2),
+      td:nth-child(2) {
+        display: none;
       }
     }
   }
+
+  /* Breakdown popup content */
+  [data-slot="breakdown-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-1) 0;
+  }
+
+  [data-slot="breakdown-label"] {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+
+  [data-slot="breakdown-value"] {
+    color: var(--color-text);
+    font-weight: 500;
+    font-size: var(--font-size-xs);
+  }
 }

packages/console/app/src/routes/workspace/[id]/usage-section.tsx

@@ -1,81 +1,69 @@
 import { Billing } from "@opencode-ai/console-core/billing.js"
-import { query, useParams, createAsync } from "@solidjs/router"
-import { createMemo, For, Show } from "solid-js"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createMemo, For, Show, createEffect, createSignal } from "solid-js"
 import { formatDateUTC, formatDateForTable } from "../common"
 import { withActor } from "~/context/auth.withActor"
+import { IconChevronLeft, IconChevronRight, IconBreakdown } from "~/component/icon"
 import styles from "./usage-section.module.css"
+import { createStore } from "solid-js/store"
 
-const getUsageInfo = query(async (workspaceID: string) => {
+const PAGE_SIZE = 50
+
+async function getUsageInfo(workspaceID: string, page: number) {
   "use server"
   return withActor(async () => {
-    return await Billing.usages()
+    return await Billing.usages(page, PAGE_SIZE)
   }, workspaceID)
-}, "usage.list")
+}
+
+const queryUsageInfo = query(getUsageInfo, "usage.list")
 
 export function UsageSection() {
   const params = useParams()
-  // ORIGINAL CODE - COMMENTED OUT FOR TESTING
-  const usage = createAsync(() => getUsageInfo(params.id))
+  const usage = createAsync(() => queryUsageInfo(params.id!, 0))
+  const [store, setStore] = createStore({ page: 0, usage: [] as Awaited<ReturnType<typeof getUsageInfo>> })
+  const [openBreakdownId, setOpenBreakdownId] = createSignal<string | null>(null)
 
-  // DUMMY DATA FOR TESTING
-  // const usage = () => [
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 0).toISOString(), // Today
-  //     model: "claude-3-5-sonnet-20241022",
-  //     inputTokens: 1247,
-  //     outputTokens: 423,
-  //     cost: 125400000, // $1.254
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 0.5).toISOString(), // 12 hours ago
-  //     model: "claude-3-haiku-20240307",
-  //     inputTokens: 892,
-  //     outputTokens: 156,
-  //     cost: 23500000, // $0.235
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 1).toISOString(), // Yesterday
-  //     model: "claude-3-5-sonnet-20241022",
-  //     inputTokens: 2134,
-  //     outputTokens: 687,
-  //     cost: 234700000, // $2.347
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 1.3).toISOString(), // 1.3 days ago
-  //     model: "gpt-4o-mini",
-  //     inputTokens: 567,
-  //     outputTokens: 234,
-  //     cost: 8900000, // $0.089
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 2).toISOString(), // 2 days ago
-  //     model: "claude-3-opus-20240229",
-  //     inputTokens: 1893,
-  //     outputTokens: 945,
-  //     cost: 445600000, // $4.456
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 2.7).toISOString(), // 2.7 days ago
-  //     model: "gpt-4o",
-  //     inputTokens: 1456,
-  //     outputTokens: 532,
-  //     cost: 156800000, // $1.568
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 3).toISOString(), // 3 days ago
-  //     model: "claude-3-haiku-20240307",
-  //     inputTokens: 634,
-  //     outputTokens: 89,
-  //     cost: 12300000, // $0.123
-  //   },
-  //   {
-  //     timeCreated: new Date(Date.now() - 86400000 * 4).toISOString(), // 4 days ago
-  //     model: "claude-3-5-sonnet-20241022",
-  //     inputTokens: 3245,
-  //     outputTokens: 1123,
-  //     cost: 387200000, // $3.872
-  //   },
-  // ]
+  createEffect(() => {
+    setStore({ usage: usage() })
+  }, [usage])
+
+  createEffect(() => {
+    if (!openBreakdownId()) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      if (!target.closest('[data-slot="tokens-with-breakdown"]')) {
+        setOpenBreakdownId(null)
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside)
+    return () => document.removeEventListener("click", handleClickOutside)
+  })
+
+  const hasResults = createMemo(() => store.usage && store.usage.length > 0)
+  const canGoPrev = createMemo(() => store.page > 0)
+  const canGoNext = createMemo(() => store.usage && store.usage.length === PAGE_SIZE)
+
+  const calculateTotalInputTokens = (u: Awaited<ReturnType<typeof getUsageInfo>>[0]) => {
+    return u.inputTokens + (u.cacheReadTokens ?? 0) + (u.cacheWrite5mTokens ?? 0) + (u.cacheWrite1hTokens ?? 0)
+  }
+
+  const goPrev = async () => {
+    const usage = await getUsageInfo(params.id!, store.page - 1)
+    setStore({
+      page: store.page - 1,
+      usage,
+    })
+  }
+  const goNext = async () => {
+    const usage = await getUsageInfo(params.id!, store.page + 1)
+    setStore({
+      page: store.page + 1,
+      usage,
+    })
+  }
 
   return (
     <section class={styles.root}>
@@ -85,7 +73,7 @@ export function UsageSection() {
       </div>
       <div data-slot="usage-table">
         <Show
-          when={usage() && usage()!.length > 0}
+          when={hasResults()}
           fallback={
             <div data-component="empty-state">
               <p>Make your first API call to get started.</p>
@@ -103,16 +91,51 @@ export function UsageSection() {
               </tr>
             </thead>
             <tbody>
-              <For each={usage()!}>
-                {(usage) => {
+              <For each={store.usage}>
+                {(usage, index) => {
                   const date = createMemo(() => new Date(usage.timeCreated))
+                  const totalInputTokens = createMemo(() => calculateTotalInputTokens(usage))
+                  const breakdownId = `breakdown-${index()}`
+                  const isOpen = createMemo(() => openBreakdownId() === breakdownId)
+                  const isClaude = usage.model.toLowerCase().includes("claude")
                   return (
                     <tr>
                       <td data-slot="usage-date" title={formatDateUTC(date())}>
                         {formatDateForTable(date())}
                       </td>
                       <td data-slot="usage-model">{usage.model}</td>
-                      <td data-slot="usage-tokens">{usage.inputTokens}</td>
+                      <td data-slot="usage-tokens">
+                        <div data-slot="tokens-with-breakdown" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            data-slot="breakdown-button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              setOpenBreakdownId(isOpen() ? null : breakdownId)
+                            }}
+                          >
+                            <IconBreakdown />
+                          </button>
+                          <span onClick={() => setOpenBreakdownId(null)}>{totalInputTokens()}</span>
+                          <Show when={isOpen()}>
+                            <div data-slot="breakdown-popup" onClick={(e) => e.stopPropagation()}>
+                              <div data-slot="breakdown-row">
+                                <span data-slot="breakdown-label">Input</span>
+                                <span data-slot="breakdown-value">{usage.inputTokens}</span>
+                              </div>
+                              <div data-slot="breakdown-row">
+                                <span data-slot="breakdown-label">Cache Read</span>
+                                <span data-slot="breakdown-value">{usage.cacheReadTokens ?? 0}</span>
+                              </div>
+                              <Show when={isClaude}>
+                                <div data-slot="breakdown-row">
+                                  <span data-slot="breakdown-label">Cache Write</span>
+                                  <span data-slot="breakdown-value">{usage.cacheWrite5mTokens ?? 0}</span>
+                                </div>
+                              </Show>
+                            </div>
+                          </Show>
+                        </div>
+                      </td>
                       <td data-slot="usage-tokens">{usage.outputTokens}</td>
                       <td data-slot="usage-cost">${((usage.cost ?? 0) / 100000000).toFixed(4)}</td>
                     </tr>
@@ -121,6 +144,16 @@ export function UsageSection() {
               </For>
             </tbody>
           </table>
+          <Show when={canGoPrev() || canGoNext()}>
+            <div data-slot="pagination">
+              <button disabled={!canGoPrev()} onClick={goPrev}>
+                <IconChevronLeft />
+              </button>
+              <button disabled={!canGoNext()} onClick={goNext}>
+                <IconChevronRight />
+              </button>
+            </div>
+          </Show>
         </Show>
       </div>
     </section>

packages/console/app/src/routes/workspace/common.tsx

@@ -67,10 +67,7 @@ export const querySessionInfo = query(async (workspaceID: string) => {
   return withActor(() => {
     return {
       isAdmin: Actor.userRole() === "admin",
-      isBeta:
-        Resource.App.stage === "production"
-          ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y"
-          : true,
+      isBeta: Resource.App.stage === "production" ? workspaceID === "wrk_01K46JDFR0E75SG2Q8K172KF3Y" : true,
     }
   }, workspaceID)
 }, "session.get")

packages/console/app/src/routes/zen/index.css

@@ -277,7 +277,7 @@ body {
       margin-bottom: 24px;
     }
 
-    strong {
+    h1 {
       font-size: 28px;
       color: var(--color-text-strong);
       font-weight: 500;

packages/console/app/src/routes/zen/index.tsx

@@ -3,6 +3,7 @@ import { createAsync, query, redirect } from "@solidjs/router"
 import { Title, Meta, Link } from "@solidjs/meta"
 import { HttpHeader } from "@solidjs/start"
 import zenLogoLight from "../../asset/zen-ornate-light.svg"
+import { config } from "~/config"
 import zenLogoDark from "../../asset/zen-ornate-dark.svg"
 import compareVideo from "../../asset/lander/opencode-comparison-min.mp4"
 import compareVideoPoster from "../../asset/lander/opencode-comparison-poster.png"
@@ -28,11 +29,9 @@ export default function Home() {
   createAsync(() => checkLoggedIn())
   return (
     <main data-page="zen">
-      <HttpHeader
-        name="Cache-Control"
-        value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400"
-      />
+      <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
       <Title>OpenCode Zen | A curated set of reliable optimized models for coding agents</Title>
+      <Link rel="canonical" href={`${config.baseUrl}/zen`} />
       <Link rel="icon" type="image/svg+xml" href="/favicon-zen.svg" />
       <Meta property="og:image" content="/social-share-zen.png" />
       <Meta name="twitter:image" content="/social-share-zen.png" />
@@ -45,21 +44,15 @@ export default function Home() {
             <div data-slot="hero-copy">
               <img data-slot="zen logo light" src={zenLogoLight} alt="zen logo light" />
               <img data-slot="zen logo dark" src={zenLogoDark} alt="zen logo dark" />
-              <strong>Reliable optimized models for coding agents</strong>
+              <h1>Reliable optimized models for coding agents</h1>
               <p>
-                Zen gives you access to a curated set of AI models that OpenCode has tested and
-                benchmarked specifically for coding agents. No need to worry about inconsistent
-                performance and quality, use validated models that work.
+                Zen gives you access to a curated set of AI models that OpenCode has tested and benchmarked specifically
+                for coding agents. No need to worry about inconsistent performance and quality, use validated models
+                that work.
               </p>
               <div data-slot="model-logos">
                 <div>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <mask
                       id="mask0_79_128586"
                       style="mask-type:luminance"
@@ -80,17 +73,8 @@ export default function Home() {
                   </svg>
                 </div>
                 <div>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z"
-                      fill="currentColor"
-                    />
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z" fill="currentColor" />
                     <path
                       d="M6.32538 13.6824L8.52662 8.01177L10.7279 13.6824H6.32538ZM6.68225 3.93164L0.25 20.0677H3.84652L5.16202 16.6791H11.8914L13.2067 20.0677H16.8033L10.371 3.93164H6.68225Z"
                       fill="currentColor"
@@ -98,13 +82,7 @@ export default function Home() {
                   </svg>
                 </div>
                 <div>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                       d="M9.16861 16.0529L17.2018 9.85156C17.5957 9.54755 18.1586 9.66612 18.3463 10.1384C19.3339 12.6288 18.8926 15.6217 16.9276 17.6766C14.9626 19.7314 12.2285 20.1821 9.72948 19.1557L6.9995 20.4775C10.9151 23.2763 15.6699 22.5841 18.6411 19.4749C20.9979 17.0103 21.7278 13.6508 21.0453 10.6214L21.0515 10.6278C20.0617 6.17736 21.2948 4.39847 23.8207 0.760904C23.8804 0.674655 23.9402 0.588405 24 0.5L20.6762 3.97585V3.96506L9.16658 16.0551"
                       fill="currentColor"
@@ -116,13 +94,7 @@ export default function Home() {
                   </svg>
                 </div>
                 <div>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
@@ -132,13 +104,7 @@ export default function Home() {
                   </svg>
                 </div>
                 <div>
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                       d="M12.6241 11.346L20.3848 3.44816C20.5309 3.29931 20.4487 3 20.2601 3H16.0842C16.0388 3 15.9949 3.01897 15.9594 3.05541L7.59764 11.5629C7.46721 11.6944 7.27446 11.5771 7.27446 11.3666V3.25183C7.27446 3.11242 7.18515 3 7.07594 3H4.19843C4.08932 3 4 3.11242 4 3.25183V20.7482C4 20.8876 4.08932 21 4.19843 21H7.07594C7.18515 21 7.27446 20.8876 7.27446 20.7482V17.1834C7.27446 17.1073 7.30136 17.0344 7.34815 16.987L9.94075 14.3486C10.0031 14.2853 10.0895 14.2757 10.159 14.3232L17.0934 19.5573C18.2289 20.3412 19.4975 20.8226 20.786 20.9652C20.9008 20.9778 21 20.8606 21 20.7133V17.3559C21 17.2276 20.9249 17.1232 20.8243 17.1073C20.0659 16.9853 19.326 16.6845 18.6569 16.222L12.6538 11.764C12.5291 11.6785 12.5135 11.4584 12.6241 11.346Z"
                       fill="currentColor"
@@ -148,13 +114,7 @@ export default function Home() {
               </div>
               <a href="/auth">
                 <span>Get started with Zen </span>
-                <svg
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
                     stroke="currentColor"
@@ -166,23 +126,14 @@ export default function Home() {
             </div>
             <div data-slot="pricing-copy">
               <p>
-                <strong>Add $20 Pay as you go balance</strong>{" "}
-                <span>(+$1.23 card processing fee)</span>
+                <strong>Add $20 Pay as you go balance</strong> <span>(+$1.23 card processing fee)</span>
               </p>
               <p>Use with any agent. Set monthly spend limits. Cancel any time.</p>
             </div>
           </section>
 
           <section data-component="comparison">
-            <video
-              src={compareVideo}
-              autoplay
-              playsinline
-              loop
-              muted
-              preload="auto"
-              poster={compareVideoPoster}
-            >
+            <video src={compareVideo} autoplay playsinline loop muted preload="auto" poster={compareVideoPoster}>
               Your browser does not support the video tag.
             </video>
           </section>
@@ -191,8 +142,8 @@ export default function Home() {
             <div data-slot="section-title">
               <h3>What problem is Zen solving?</h3>
               <p>
-                There are so many models available, but only a few work well with coding agents.
-                Most providers configure them differently with varying results.
+                There are so many models available, but only a few work well with coding agents. Most providers
+                configure them differently with varying results.
               </p>
             </div>
             <p>We're fixing this for everyone, not just OpenCode users.</p>
@@ -227,15 +178,14 @@ export default function Home() {
               <li>
                 <span>[2]</span>
                 <div>
-                  <strong>Use Zen with transparent pricing</strong> -{" "}
-                  <a href="/docs/zen/#pricing">pay per request</a> with zero markups
+                  <strong>Use Zen with transparent pricing</strong> - <a href="/docs/zen/#pricing">pay per request</a>{" "}
+                  with zero markups
                 </div>
               </li>
               <li>
                 <span>[3]</span>
                 <div>
-                  <strong>Auto-top up</strong> - when your balance reaches $5 we’ll automatically
-                  add $20
+                  <strong>Auto-top up</strong> - when your balance reaches $5 we’ll automatically add $20
                 </div>
               </li>
             </ul>
@@ -247,9 +197,8 @@ export default function Home() {
               <div>
                 <span>[*]</span>
                 <p>
-                  All Zen models are hosted in the US. Providers follow a zero-retention policy and
-                  do not use your data for model training, with the{" "}
-                  <a href="/docs/zen/#privacy">following exceptions</a>.
+                  All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+                  for model training, with the <a href="/docs/zen/#privacy">following exceptions</a>.
                 </p>
               </div>
             </div>
@@ -304,8 +253,7 @@ export default function Home() {
                   <span>ex-Head of Design, Laravel</span>
                 </div>
                 <div data-slot="quote">
-                  With <span>@OpenCode</span> Zen I know all the models are tested and perfect for
-                  coding agents.
+                  With <span>@OpenCode</span> Zen I know all the models are tested and perfect for coding agents.
                 </div>
               </div>
             </a>
@@ -329,44 +277,38 @@ export default function Home() {
             <ul>
               <li>
                 <Faq question="What is OpenCode Zen?">
-                  Zen is a curated set of AI models tested and benchmarked for coding agents created
-                  by the team behind OpenCode.
+                  Zen is a curated set of AI models tested and benchmarked for coding agents created by the team behind
+                  OpenCode.
                 </Faq>
               </li>
               <li>
                 <Faq question="What makes Zen more accurate?">
-                  Zen only provides models that have been specifically tested and benchmarked for
-                  coding agents. You wouldn’t use a butter knife to cut steak, don’t use poor models
-                  for coding.
+                  Zen only provides models that have been specifically tested and benchmarked for coding agents. You
+                  wouldn’t use a butter knife to cut steak, don’t use poor models for coding.
                 </Faq>
               </li>
               <li>
                 <Faq question="Is Zen cheaper?">
-                  Zen is not for profit. Zen passes through the costs from the model providers to
-                  you. The higher Zen’s usage the more OpenCode can negotiate better rates and pass
-                  those to you.
+                  Zen is not for profit. Zen passes through the costs from the model providers to you. The higher Zen’s
+                  usage the more OpenCode can negotiate better rates and pass those to you.
                 </Faq>
               </li>
               <li>
                 <Faq question="How much does Zen cost?">
-                  Zen <a href="/docs/zen/#pricing">charges per request</a> with zero markups, so you
-                  pay exactly what the model provider charges. Your total cost depends on usage, and
-                  you can set monthly spend limits in your <a href="/auth">account</a>. To cover
-                  costs, OpenCode adds only a small payment processing fee of $1.23 per $20 balance
-                  top-up.
+                  Zen <a href="/docs/zen/#pricing">charges per request</a> with zero markups, so you pay exactly what
+                  the model provider charges. Your total cost depends on usage, and you can set monthly spend limits in
+                  your <a href="/auth">account</a>. To cover costs, OpenCode adds only a small payment processing fee of
+                  $1.23 per $20 balance top-up.
                 </Faq>
               </li>
               <li>
                 <Faq question="What about data and privacy?">
-                  All Zen models are hosted in the US. Providers follow a zero-retention policy and
-                  do not use your data for model training, with the{" "}
-                  <a href="/docs/zen/#privacy">following exceptions</a>.
+                  All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+                  for model training, with the <a href="/docs/zen/#privacy">following exceptions</a>.
                 </Faq>
               </li>
               <li>
-                <Faq question="Can I set spend limits?">
-                  Yes, you can set monthly spending limits in your account.
-                </Faq>
+                <Faq question="Can I set spend limits?">Yes, you can set monthly spending limits in your account.</Faq>
               </li>
               <li>
                 <Faq question="Can I cancel?">
@@ -375,8 +317,8 @@ export default function Home() {
               </li>
               <li>
                 <Faq question="Can I use Zen with other coding agents?">
-                  While Zen works great with OpenCode, you can use Zen with any agent. Follow the
-                  setup instructions in your preferred coding agent.
+                  While Zen works great with OpenCode, you can use Zen with any agent. Follow the setup instructions in
+                  your preferred coding agent.
                 </Faq>
               </li>
             </ul>

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

@@ -3,3 +3,4 @@ export class CreditsError extends Error {}
 export class MonthlyLimitError extends Error {}
 export class UserLimitError extends Error {}
 export class ModelError extends Error {}
+export class RateLimitError extends Error {}

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

@@ -12,76 +12,102 @@ import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
 import { ProviderTable } from "@opencode-ai/console-core/schema/provider.sql.js"
 import { logger } from "./logger"
-import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError } from "./error"
-import {
-  createBodyConverter,
-  createStreamPartConverter,
-  createResponseConverter,
-} from "./provider/provider"
+import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError, RateLimitError } from "./error"
+import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
 import { anthropicHelper } from "./provider/anthropic"
+import { googleHelper } from "./provider/google"
 import { openaiHelper } from "./provider/openai"
 import { oaCompatHelper } from "./provider/openai-compatible"
+import { createRateLimiter } from "./rateLimiter"
 
 type ZenData = Awaited<ReturnType<typeof ZenData.list>>
-type Model = ZenData["models"][string]
+type RetryOptions = {
+  excludeProviders: string[]
+  retryCount: number
+}
 
 export async function handler(
   input: APIEvent,
   opts: {
     format: ZenData.Format
     parseApiKey: (headers: Headers) => string | undefined
+    parseModel: (url: string, body: any) => string
+    parseIsStream: (url: string, body: any) => boolean
   },
 ) {
+  type AuthInfo = Awaited<ReturnType<typeof authenticate>>
+  type ModelInfo = Awaited<ReturnType<typeof validateModel>>
+  type ProviderInfo = Awaited<ReturnType<typeof selectProvider>>
+
+  const MAX_RETRIES = 3
   const FREE_WORKSPACES = [
     "wrk_01K46JDFR0E75SG2Q8K172KF3Y", // frank
     "wrk_01K6W1A3VE0KMNVSCQT43BG2SX", // opencode bench
   ]
 
   try {
+    const url = input.request.url
     const body = await input.request.json()
+    const ip = input.request.headers.get("x-real-ip") ?? ""
+    const model = opts.parseModel(url, body)
+    const isStream = opts.parseIsStream(url, body)
     logger.metric({
-      is_tream: !!body.stream,
+      is_tream: isStream,
       session: input.request.headers.get("x-opencode-session"),
       request: input.request.headers.get("x-opencode-request"),
     })
     const zenData = ZenData.list()
-    const modelInfo = validateModel(zenData, body.model)
-    const providerInfo = selectProvider(
-      zenData,
-      modelInfo,
-      input.request.headers.get("x-real-ip") ?? "",
-    )
-    const authInfo = await authenticate(modelInfo, providerInfo)
-    validateBilling(modelInfo, authInfo)
-    validateModelSettings(authInfo)
-    updateProviderKey(authInfo, providerInfo)
-    logger.metric({ provider: providerInfo.id })
+    const modelInfo = validateModel(zenData, model)
+    const rateLimiter = createRateLimiter(modelInfo.id, modelInfo.rateLimit, ip)
+    await rateLimiter?.check()
 
-    // Request to model provider
-    const startTimestamp = Date.now()
-    const reqUrl = providerInfo.modifyUrl(providerInfo.api)
-    const reqBody = JSON.stringify(
-      providerInfo.modifyBody({
-        ...createBodyConverter(opts.format, providerInfo.format)(body),
-        model: providerInfo.model,
-      }),
-    )
-    logger.debug("REQUEST URL: " + reqUrl)
-    logger.debug("REQUEST: " + reqBody)
-    const res = await fetch(reqUrl, {
-      method: "POST",
-      headers: (() => {
-        const headers = input.request.headers
-        headers.delete("host")
-        headers.delete("content-length")
-        providerInfo.modifyHeaders(headers, body, providerInfo.apiKey)
-        Object.entries(providerInfo.headerMappings ?? {}).forEach(([k, v]) => {
-          headers.set(k, headers.get(v)!)
+    const retriableRequest = async (retry: RetryOptions = { excludeProviders: [], retryCount: 0 }) => {
+      const providerInfo = selectProvider(zenData, modelInfo, ip, retry)
+      const authInfo = await authenticate(modelInfo, providerInfo)
+      validateBilling(authInfo, modelInfo)
+      validateModelSettings(authInfo)
+      updateProviderKey(authInfo, providerInfo)
+      logger.metric({ provider: providerInfo.id })
+
+      const startTimestamp = Date.now()
+      const reqUrl = providerInfo.modifyUrl(providerInfo.api, providerInfo.model, isStream)
+      const reqBody = JSON.stringify(
+        providerInfo.modifyBody({
+          ...createBodyConverter(opts.format, providerInfo.format)(body),
+          model: providerInfo.model,
+        }),
+      )
+      logger.debug("REQUEST URL: " + reqUrl)
+      logger.debug("REQUEST: " + reqBody.substring(0, 300) + "...")
+      const res = await fetch(reqUrl, {
+        method: "POST",
+        headers: (() => {
+          const headers = new Headers(input.request.headers)
+          providerInfo.modifyHeaders(headers, body, providerInfo.apiKey)
+          Object.entries(providerInfo.headerMappings ?? {}).forEach(([k, v]) => {
+            headers.set(k, headers.get(v)!)
+          })
+          headers.delete("host")
+          headers.delete("content-length")
+          headers.delete("x-opencode-request")
+          headers.delete("x-opencode-session")
+          return headers
+        })(),
+        body: reqBody,
+      })
+
+      // Try another provider => stop retrying if using fallback provider
+      if (res.status !== 200 && modelInfo.fallbackProvider && providerInfo.id !== modelInfo.fallbackProvider) {
+        return retriableRequest({
+          excludeProviders: [...retry.excludeProviders, providerInfo.id],
+          retryCount: retry.retryCount + 1,
         })
-        return headers
-      })(),
-      body: reqBody,
-    })
+      }
+
+      return { providerInfo, authInfo, res, startTimestamp }
+    }
+
+    const { providerInfo, authInfo, res, startTimestamp } = await retriableRequest()
 
     // Scrub response headers
     const resHeaders = new Headers()
@@ -92,17 +118,15 @@ export async function handler(
       }
     }
     logger.debug("STATUS: " + res.status + " " + res.statusText)
-    if (res.status === 400 || res.status === 503) {
-      logger.debug("RESPONSE: " + (await res.text()))
-    }
 
     // Handle non-streaming response
-    if (!body.stream) {
+    if (!isStream) {
       const responseConverter = createResponseConverter(providerInfo.format, opts.format)
       const json = await res.json()
       const body = JSON.stringify(responseConverter(json))
       logger.metric({ response_length: body.length })
       logger.debug("RESPONSE: " + body)
+      await rateLimiter?.track()
       await trackUsage(authInfo, modelInfo, providerInfo, json.usage)
       await reload(authInfo)
       return new Response(body, {
@@ -131,6 +155,7 @@ export async function handler(
                   response_length: responseLength,
                   "timestamp.last_byte": Date.now(),
                 })
+                await rateLimiter?.track()
                 const usage = usageParser.retrieve()
                 if (usage) {
                   await trackUsage(authInfo, modelInfo, providerInfo, usage)
@@ -150,7 +175,7 @@ export async function handler(
               responseLength += value.length
               buffer += decoder.decode(value, { stream: true })
 
-              const parts = buffer.split("\n\n")
+              const parts = buffer.split(providerInfo.streamSeparator)
               buffer = parts.pop() ?? ""
 
               for (let part of parts) {
@@ -205,6 +230,15 @@ export async function handler(
         { status: 401 },
       )
 
+    if (error instanceof RateLimitError)
+      return new Response(
+        JSON.stringify({
+          type: "error",
+          error: { type: error.constructor.name, message: error.message },
+        }),
+        { status: 429 },
+      )
+
     return new Response(
       JSON.stringify({
         type: "error",
@@ -229,44 +263,43 @@ export async function handler(
     return { id: modelId, ...modelData }
   }
 
-  function selectProvider(
-    zenData: ZenData,
-    model: Awaited<ReturnType<typeof validateModel>>,
-    ip: string,
-  ) {
-    const providers = model.providers
-      .filter((provider) => !provider.disabled)
-      .flatMap((provider) => Array<typeof provider>(provider.weight ?? 1).fill(provider))
+  function selectProvider(zenData: ZenData, modelInfo: ModelInfo, ip: string, retry: RetryOptions) {
+    const provider = (() => {
+      if (retry.retryCount === MAX_RETRIES) {
+        return modelInfo.providers.find((provider) => provider.id === modelInfo.fallbackProvider)
+      }
 
-    // Use the last 2 characters of IP address to select a provider
-    const lastChars = ip.slice(-2)
-    const index = parseInt(lastChars, 16) % providers.length
-    const provider = providers[index || 0]
+      const providers = modelInfo.providers
+        .filter((provider) => !provider.disabled)
+        .filter((provider) => !retry.excludeProviders.includes(provider.id))
+        .flatMap((provider) => Array<typeof provider>(provider.weight ?? 1).fill(provider))
 
-    if (!(provider.id in zenData.providers)) {
-      throw new ModelError(`Provider ${provider.id} not supported`)
-    }
+      // Use the last 2 characters of IP address to select a provider
+      const lastChars = ip.slice(-2)
+      const index = parseInt(lastChars, 16) % providers.length
+      return providers[index || 0]
+    })()
 
-    const format = zenData.providers[provider.id].format
+    if (!provider) throw new ModelError("No provider available")
+    if (!(provider.id in zenData.providers)) throw new ModelError(`Provider ${provider.id} not supported`)
 
     return {
       ...provider,
       ...zenData.providers[provider.id],
-      ...(format === "anthropic"
-        ? anthropicHelper
-        : format === "openai"
-          ? openaiHelper
-          : oaCompatHelper),
+      ...(() => {
+        const format = zenData.providers[provider.id].format
+        if (format === "anthropic") return anthropicHelper
+        if (format === "google") return googleHelper
+        if (format === "openai") return openaiHelper
+        return oaCompatHelper
+      })(),
     }
   }
 
-  async function authenticate(
-    model: Awaited<ReturnType<typeof validateModel>>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-  ) {
+  async function authenticate(modelInfo: ModelInfo, providerInfo: ProviderInfo) {
     const apiKey = opts.parseApiKey(input.request.headers)
-    if (!apiKey) {
-      if (model.allowAnonymous) return
+    if (!apiKey || apiKey === "public") {
+      if (modelInfo.allowAnonymous) return
       throw new AuthError("Missing API key.")
     }
 
@@ -297,20 +330,11 @@ export async function handler(
         .from(KeyTable)
         .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
         .innerJoin(BillingTable, eq(BillingTable.workspaceID, KeyTable.workspaceID))
-        .innerJoin(
-          UserTable,
-          and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)),
-        )
-        .leftJoin(
-          ModelTable,
-          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)),
-        )
+        .innerJoin(UserTable, and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)))
+        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, modelInfo.id)))
         .leftJoin(
           ProviderTable,
-          and(
-            eq(ProviderTable.workspaceID, KeyTable.workspaceID),
-            eq(ProviderTable.provider, providerInfo.id),
-          ),
+          and(eq(ProviderTable.workspaceID, KeyTable.workspaceID), eq(ProviderTable.provider, providerInfo.id)),
         )
         .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
         .then((rows) => rows[0]),
@@ -333,11 +357,11 @@ export async function handler(
     }
   }
 
-  function validateBilling(model: Model, authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  function validateBilling(authInfo: AuthInfo, modelInfo: ModelInfo) {
     if (!authInfo) return
     if (authInfo.provider?.credentials) return
     if (authInfo.isFree) return
-    if (model.allowAnonymous) return
+    if (modelInfo.allowAnonymous) return
 
     const billing = authInfo.billing
     if (!billing.paymentMethodID)
@@ -381,39 +405,24 @@ export async function handler(
     }
   }
 
-  function validateModelSettings(authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  function validateModelSettings(authInfo: AuthInfo) {
     if (!authInfo) return
     if (authInfo.isDisabled) throw new ModelError("Model is disabled")
   }
 
-  function updateProviderKey(
-    authInfo: Awaited<ReturnType<typeof authenticate>>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-  ) {
+  function updateProviderKey(authInfo: AuthInfo, providerInfo: ProviderInfo) {
     if (!authInfo) return
     if (!authInfo.provider?.credentials) return
     providerInfo.apiKey = authInfo.provider.credentials
   }
 
-  async function trackUsage(
-    authInfo: Awaited<ReturnType<typeof authenticate>>,
-    modelInfo: ReturnType<typeof validateModel>,
-    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
-    usage: any,
-  ) {
-    const {
-      inputTokens,
-      outputTokens,
-      reasoningTokens,
-      cacheReadTokens,
-      cacheWrite5mTokens,
-      cacheWrite1hTokens,
-    } = providerInfo.normalizeUsage(usage)
+  async function trackUsage(authInfo: AuthInfo, modelInfo: ModelInfo, providerInfo: ProviderInfo, usage: any) {
+    const { inputTokens, outputTokens, reasoningTokens, cacheReadTokens, cacheWrite5mTokens, cacheWrite1hTokens } =
+      providerInfo.normalizeUsage(usage)
 
     const modelCost =
       modelInfo.cost200K &&
-      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) >
-        200_000
+      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) > 200_000
         ? modelInfo.cost200K
         : modelInfo.cost
 
@@ -464,8 +473,7 @@ export async function handler(
 
     if (!authInfo) return
 
-    const cost =
-      authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
+    const cost = authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
     await Database.transaction(async (tx) => {
       await tx.insert(UsageTable).values({
         workspaceID: authInfo.workspaceID,
@@ -505,9 +513,7 @@ export async function handler(
             `,
           timeMonthlyUsageUpdated: sql`now()`,
         })
-        .where(
-          and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)),
-        )
+        .where(and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)))
     })
 
     await Database.use((tx) =>
@@ -518,7 +524,7 @@ export async function handler(
     )
   }
 
-  async function reload(authInfo: Awaited<ReturnType<typeof authenticate>>) {
+  async function reload(authInfo: AuthInfo) {
     if (!authInfo) return
     if (authInfo.isFree) return
     if (authInfo.provider?.credentials) return
@@ -537,10 +543,7 @@ export async function handler(
               BillingTable.balance,
               centsToMicroCents((authInfo.billing.reloadTrigger ?? Billing.RELOAD_TRIGGER) * 100),
             ),
-            or(
-              isNull(BillingTable.timeReloadLockedTill),
-              lt(BillingTable.timeReloadLockedTill, sql`now()`),
-            ),
+            or(isNull(BillingTable.timeReloadLockedTill), lt(BillingTable.timeReloadLockedTill, sql`now()`)),
           ),
         ),
     )

packages/console/app/src/routes/zen/util/provider/anthropic.ts

@@ -30,6 +30,7 @@ export const anthropicHelper = {
       service_tier: "standard_only",
     }
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 
@@ -123,15 +124,12 @@ export function fromAnthropicRequest(body: any): CommonRequest {
         if ((p as any).type === "tool_result") {
           const id = (p as any).tool_use_id
           const content =
-            typeof (p as any).content === "string"
-              ? (p as any).content
-              : JSON.stringify((p as any).content)
+            typeof (p as any).content === "string" ? (p as any).content : JSON.stringify((p as any).content)
           msgs.push({ role: "tool", tool_call_id: id, content })
         }
       }
       if (partsOut.length > 0) {
-        if (partsOut.length === 1 && partsOut[0].type === "text")
-          msgs.push({ role: "user", content: partsOut[0].text })
+        if (partsOut.length === 1 && partsOut[0].type === "text") msgs.push({ role: "user", content: partsOut[0].text })
         else msgs.push({ role: "user", content: partsOut })
       }
       continue
@@ -143,8 +141,7 @@ export function fromAnthropicRequest(body: any): CommonRequest {
       const tcs: any[] = []
       for (const p of partsIn) {
         if (!p || !(p as any).type) continue
-        if ((p as any).type === "text" && typeof (p as any).text === "string")
-          texts.push((p as any).text)
+        if ((p as any).type === "text" && typeof (p as any).text === "string") texts.push((p as any).text)
         if ((p as any).type === "tool_use") {
           const name = (p as any).name
           const id = (p as any).id
@@ -214,9 +211,7 @@ export function fromAnthropicRequest(body: any): CommonRequest {
 export function toAnthropicRequest(body: CommonRequest) {
   if (!body || typeof body !== "object") return body
 
-  const sysIn = Array.isArray(body.messages)
-    ? body.messages.filter((m: any) => m && m.role === "system")
-    : []
+  const sysIn = Array.isArray(body.messages) ? body.messages.filter((m: any) => m && m.role === "system") : []
   let ccCount = 0
   const cc = () => {
     ccCount++
@@ -367,9 +362,7 @@ export function fromAnthropicResponse(resp: any): CommonResponse {
 
   const idIn = (resp as any).id
   const id =
-    typeof idIn === "string"
-      ? idIn.replace(/^msg_/, "chatcmpl_")
-      : `chatcmpl_${Math.random().toString(36).slice(2)}`
+    typeof idIn === "string" ? idIn.replace(/^msg_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
   const model = (resp as any).model
 
   const blocks: any[] = Array.isArray((resp as any).content) ? (resp as any).content : []
@@ -412,9 +405,7 @@ export function fromAnthropicResponse(resp: any): CommonResponse {
     const ct = typeof (u as any).output_tokens === "number" ? (u as any).output_tokens : undefined
     const total = pt != null && ct != null ? pt + ct : undefined
     const cached =
-      typeof (u as any).cache_read_input_tokens === "number"
-        ? (u as any).cache_read_input_tokens
-        : undefined
+      typeof (u as any).cache_read_input_tokens === "number" ? (u as any).cache_read_input_tokens : undefined
     const details = cached != null ? { cached_tokens: cached } : undefined
     return {
       prompt_tokens: pt,
@@ -591,9 +582,7 @@ export function fromAnthropicChunk(chunk: string): CommonChunk | string {
       prompt_tokens: u.input_tokens,
       completion_tokens: u.output_tokens,
       total_tokens: (u.input_tokens || 0) + (u.output_tokens || 0),
-      ...(u.cache_read_input_tokens
-        ? { prompt_tokens_details: { cached_tokens: u.cache_read_input_tokens } }
-        : {}),
+      ...(u.cache_read_input_tokens ? { prompt_tokens_details: { cached_tokens: u.cache_read_input_tokens } } : {}),
     }
   }
 

packages/console/app/src/routes/zen/util/provider/google.ts

@@ -0,0 +1,74 @@
+import { ProviderHelper } from "./provider"
+
+/*
+{
+  promptTokenCount: 11453,
+  candidatesTokenCount: 71,
+  totalTokenCount: 11625,
+  cachedContentTokenCount: 8100,
+  promptTokensDetails: [
+    {modality: "TEXT",tokenCount: 11453}
+  ],
+  cacheTokensDetails: [
+    {modality: "TEXT",tokenCount: 8100}
+  ],
+  thoughtsTokenCount: 101
+}
+*/
+
+type Usage = {
+  promptTokenCount?: number
+  candidatesTokenCount?: number
+  totalTokenCount?: number
+  cachedContentTokenCount?: number
+  promptTokensDetails?: { modality: string; tokenCount: number }[]
+  cacheTokensDetails?: { modality: string; tokenCount: number }[]
+  thoughtsTokenCount?: number
+}
+
+export const googleHelper = {
+  format: "google",
+  modifyUrl: (providerApi: string, model?: string, isStream?: boolean) =>
+    `${providerApi}/models/${model}:${isStream ? "streamGenerateContent?alt=sse" : "generateContent"}`,
+  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
+    headers.set("x-goog-api-key", apiKey)
+  },
+  modifyBody: (body: Record<string, any>) => {
+    return body
+  },
+  streamSeparator: "\r\n\r\n",
+  createUsageParser: () => {
+    let usage: Usage
+
+    return {
+      parse: (chunk: string) => {
+        if (!chunk.startsWith("data: ")) return
+
+        let json
+        try {
+          json = JSON.parse(chunk.slice(6)) as { usageMetadata?: Usage }
+        } catch (e) {
+          return
+        }
+
+        if (!json.usageMetadata) return
+        usage = json.usageMetadata
+      },
+      retrieve: () => usage,
+    }
+  },
+  normalizeUsage: (usage: Usage) => {
+    const inputTokens = usage.promptTokenCount ?? 0
+    const outputTokens = usage.candidatesTokenCount ?? 0
+    const reasoningTokens = usage.thoughtsTokenCount ?? 0
+    const cacheReadTokens = usage.cachedContentTokenCount ?? 0
+    return {
+      inputTokens: inputTokens - cacheReadTokens,
+      outputTokens,
+      reasoningTokens,
+      cacheReadTokens,
+      cacheWrite5mTokens: undefined,
+      cacheWrite1hTokens: undefined,
+    }
+  },
+} satisfies ProviderHelper

packages/console/app/src/routes/zen/util/provider/openai-compatible.ts

@@ -33,6 +33,7 @@ export const oaCompatHelper = {
       ...(body.stream ? { stream_options: { include_usage: true } } : {}),
     }
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 
@@ -57,8 +58,7 @@ export const oaCompatHelper = {
     const inputTokens = usage.prompt_tokens ?? 0
     const outputTokens = usage.completion_tokens ?? 0
     const reasoningTokens = usage.completion_tokens_details?.reasoning_tokens ?? undefined
-    const cacheReadTokens =
-      usage.cached_tokens ?? usage.prompt_tokens_details?.cached_tokens ?? undefined
+    const cacheReadTokens = usage.cached_tokens ?? usage.prompt_tokens_details?.cached_tokens ?? undefined
     return {
       inputTokens: inputTokens - (cacheReadTokens ?? 0),
       outputTokens,
@@ -80,8 +80,7 @@ export function fromOaCompatibleRequest(body: any): CommonRequest {
     if (!m || !m.role) continue
 
     if (m.role === "system") {
-      if (typeof m.content === "string" && m.content.length > 0)
-        msgsOut.push({ role: "system", content: m.content })
+      if (typeof m.content === "string" && m.content.length > 0) msgsOut.push({ role: "system", content: m.content })
       continue
     }
 
@@ -92,12 +91,10 @@ export function fromOaCompatibleRequest(body: any): CommonRequest {
         const parts: any[] = []
         for (const p of m.content) {
           if (!p || !p.type) continue
-          if (p.type === "text" && typeof p.text === "string")
-            parts.push({ type: "text", text: p.text })
+          if (p.type === "text" && typeof p.text === "string") parts.push({ type: "text", text: p.text })
           if (p.type === "image_url") parts.push({ type: "image_url", image_url: p.image_url })
         }
-        if (parts.length === 1 && parts[0].type === "text")
-          msgsOut.push({ role: "user", content: parts[0].text })
+        if (parts.length === 1 && parts[0].type === "text") msgsOut.push({ role: "user", content: parts[0].text })
         else if (parts.length > 0) msgsOut.push({ role: "user", content: parts })
       }
       continue
@@ -141,8 +138,7 @@ export function toOaCompatibleRequest(body: CommonRequest) {
     if (p.type === "image_url" && p.image_url) return { type: "image_url", image_url: p.image_url }
     const s = (p as any).source
     if (!s || typeof s !== "object") return undefined
-    if (s.type === "url" && typeof s.url === "string")
-      return { type: "image_url", image_url: { url: s.url } }
+    if (s.type === "url" && typeof s.url === "string") return { type: "image_url", image_url: { url: s.url } }
     if (s.type === "base64" && typeof s.media_type === "string" && typeof s.data === "string")
       return { type: "image_url", image_url: { url: `data:${s.media_type};base64,${s.data}` } }
     return undefined
@@ -152,8 +148,7 @@ export function toOaCompatibleRequest(body: CommonRequest) {
     if (!m || !m.role) continue
 
     if (m.role === "system") {
-      if (typeof m.content === "string" && m.content.length > 0)
-        msgsOut.push({ role: "system", content: m.content })
+      if (typeof m.content === "string" && m.content.length > 0) msgsOut.push({ role: "system", content: m.content })
       continue
     }
 
@@ -166,13 +161,11 @@ export function toOaCompatibleRequest(body: CommonRequest) {
         const parts: any[] = []
         for (const p of m.content) {
           if (!p || !p.type) continue
-          if (p.type === "text" && typeof p.text === "string")
-            parts.push({ type: "text", text: p.text })
+          if (p.type === "text" && typeof p.text === "string") parts.push({ type: "text", text: p.text })
           const ip = toImg(p)
           if (ip) parts.push(ip)
         }
-        if (parts.length === 1 && parts[0].type === "text")
-          msgsOut.push({ role: "user", content: parts[0].text })
+        if (parts.length === 1 && parts[0].type === "text") msgsOut.push({ role: "user", content: parts[0].text })
         else if (parts.length > 0) msgsOut.push({ role: "user", content: parts })
       }
       continue
@@ -325,9 +318,7 @@ export function toOaCompatibleResponse(resp: CommonResponse) {
 
   const idIn = (resp as any).id
   const id =
-    typeof idIn === "string"
-      ? idIn.replace(/^msg_/, "chatcmpl_")
-      : `chatcmpl_${Math.random().toString(36).slice(2)}`
+    typeof idIn === "string" ? idIn.replace(/^msg_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
   const model = (resp as any).model
 
   const blocks: any[] = Array.isArray((resp as any).content) ? (resp as any).content : []
@@ -369,8 +360,7 @@ export function toOaCompatibleResponse(resp: CommonResponse) {
     const pt = typeof u.input_tokens === "number" ? u.input_tokens : undefined
     const ct = typeof u.output_tokens === "number" ? u.output_tokens : undefined
     const total = pt != null && ct != null ? pt + ct : undefined
-    const cached =
-      typeof u.cache_read_input_tokens === "number" ? u.cache_read_input_tokens : undefined
+    const cached = typeof u.cache_read_input_tokens === "number" ? u.cache_read_input_tokens : undefined
     const details = cached != null ? { cached_tokens: cached } : undefined
     return {
       prompt_tokens: pt,

packages/console/app/src/routes/zen/util/provider/openai.ts

@@ -21,6 +21,7 @@ export const openaiHelper = {
   modifyBody: (body: Record<string, any>) => {
     return body
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 
@@ -86,11 +87,7 @@ export function fromOpenaiRequest(body: any): CommonRequest {
 
   const msgs: any[] = []
 
-  const inMsgs = Array.isArray(body.input)
-    ? body.input
-    : Array.isArray(body.messages)
-      ? body.messages
-      : []
+  const inMsgs = Array.isArray(body.input) ? body.input : Array.isArray(body.messages) ? body.messages : []
 
   for (const m of inMsgs) {
     if (!m) continue
@@ -103,9 +100,7 @@ export function fromOpenaiRequest(body: any): CommonRequest {
         const args = typeof a === "string" ? a : JSON.stringify(a ?? {})
         msgs.push({
           role: "assistant",
-          tool_calls: [
-            { id: (m as any).id, type: "function", function: { name, arguments: args } },
-          ],
+          tool_calls: [{ id: (m as any).id, type: "function", function: { name, arguments: args } }],
         })
       }
       if ((m as any).type === "function_call_output") {
@@ -122,8 +117,7 @@ export function fromOpenaiRequest(body: any): CommonRequest {
       if (typeof c === "string" && c.length > 0) msgs.push({ role: "system", content: c })
       if (Array.isArray(c)) {
         const t = c.find((p: any) => p && typeof p.text === "string")
-        if (t && typeof t.text === "string" && t.text.length > 0)
-          msgs.push({ role: "system", content: t.text })
+        if (t && typeof t.text === "string" && t.text.length > 0) msgs.push({ role: "system", content: t.text })
       }
       continue
     }
@@ -136,24 +130,18 @@ export function fromOpenaiRequest(body: any): CommonRequest {
         const parts: any[] = []
         for (const p of c) {
           if (!p || !(p as any).type) continue
-          if (
-            ((p as any).type === "text" || (p as any).type === "input_text") &&
-            typeof (p as any).text === "string"
-          )
+          if (((p as any).type === "text" || (p as any).type === "input_text") && typeof (p as any).text === "string")
             parts.push({ type: "text", text: (p as any).text })
           const ip = toImg(p)
           if (ip) parts.push(ip)
           if ((p as any).type === "tool_result") {
             const id = (p as any).tool_call_id
             const content =
-              typeof (p as any).content === "string"
-                ? (p as any).content
-                : JSON.stringify((p as any).content)
+              typeof (p as any).content === "string" ? (p as any).content : JSON.stringify((p as any).content)
             msgs.push({ role: "tool", tool_call_id: id, content })
           }
         }
-        if (parts.length === 1 && parts[0].type === "text")
-          msgs.push({ role: "user", content: parts[0].text })
+        if (parts.length === 1 && parts[0].type === "text") msgs.push({ role: "user", content: parts[0].text })
         else if (parts.length > 0) msgs.push({ role: "user", content: parts })
       }
       continue
@@ -280,10 +268,7 @@ export function toOpenaiRequest(body: CommonRequest) {
     }
 
     if ((m as any).role === "tool") {
-      const out =
-        typeof (m as any).content === "string"
-          ? (m as any).content
-          : JSON.stringify((m as any).content)
+      const out = typeof (m as any).content === "string" ? (m as any).content : JSON.stringify((m as any).content)
       input.push({ type: "function_call_output", call_id: (m as any).tool_call_id, output: out })
       continue
     }
@@ -351,9 +336,7 @@ export function fromOpenaiResponse(resp: any): CommonResponse {
 
   const idIn = (r as any).id
   const id =
-    typeof idIn === "string"
-      ? idIn.replace(/^resp_/, "chatcmpl_")
-      : `chatcmpl_${Math.random().toString(36).slice(2)}`
+    typeof idIn === "string" ? idIn.replace(/^resp_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
   const model = (r as any).model ?? (resp as any).model
 
   const out = Array.isArray((r as any).output) ? (r as any).output : []
@@ -480,9 +463,7 @@ export function toOpenaiResponse(resp: CommonResponse) {
   })()
 
   return {
-    id:
-      (resp as any).id?.replace(/^chatcmpl_/, "resp_") ??
-      `resp_${Math.random().toString(36).slice(2)}`,
+    id: (resp as any).id?.replace(/^chatcmpl_/, "resp_") ?? `resp_${Math.random().toString(36).slice(2)}`,
     object: "response",
     model: (resp as any).model,
     output: outputItems,

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

@@ -26,9 +26,10 @@ import {
 
 export type ProviderHelper = {
   format: ZenData.Format
-  modifyUrl: (providerApi: string) => string
+  modifyUrl: (providerApi: string, model?: string, isStream?: boolean) => string
   modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => void
   modifyBody: (body: Record<string, any>) => Record<string, any>
+  streamSeparator: string
   createUsageParser: () => {
     parse: (chunk: string) => void
     retrieve: () => any

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

@@ -0,0 +1,35 @@
+import { Resource } from "@opencode-ai/console-resource"
+import { RateLimitError } from "./error"
+import { logger } from "./logger"
+
+export function createRateLimiter(model: string, limit: number | undefined, ip: string) {
+  if (!limit) return
+
+  const now = Date.now()
+  const currKey = `usage:${ip}:${model}:${buildYYYYMMDDHH(now)}`
+  const prevKey = `usage:${ip}:${model}:${buildYYYYMMDDHH(now - 3_600_000)}`
+  let currRate: number
+  let prevRate: number
+
+  return {
+    track: async () => {
+      await Resource.GatewayKv.put(currKey, currRate + 1, { expirationTtl: 3600 })
+    },
+    check: async () => {
+      const values = await Resource.GatewayKv.get([currKey, prevKey])
+      const prevValue = values?.get(prevKey)
+      const currValue = values?.get(currKey)
+      prevRate = prevValue ? parseInt(prevValue) : 0
+      currRate = currValue ? parseInt(currValue) : 0
+      logger.debug(`rate limit ${model} prev/curr: ${prevRate}/${currRate}`)
+      if (prevRate + currRate >= limit) throw new RateLimitError(`Rate limit exceeded. Please try again later.`)
+    },
+  }
+}
+
+function buildYYYYMMDDHH(timestamp: number) {
+  return new Date(timestamp)
+    .toISOString()
+    .replace(/[^0-9]/g, "")
+    .substring(0, 10)
+}

packages/console/app/src/routes/zen/v1/chat/completions.ts

@@ -5,5 +5,7 @@ export function POST(input: APIEvent) {
   return handler(input, {
     format: "oa-compat",
     parseApiKey: (headers: Headers) => headers.get("authorization")?.split(" ")[1],
+    parseModel: (url: string, body: any) => body.model,
+    parseIsStream: (url: string, body: any) => !!body.stream,
   })
 }

packages/console/app/src/routes/zen/v1/messages.ts

@@ -5,5 +5,7 @@ export function POST(input: APIEvent) {
   return handler(input, {
     format: "anthropic",
     parseApiKey: (headers: Headers) => headers.get("x-api-key") ?? undefined,
+    parseModel: (url: string, body: any) => body.model,
+    parseIsStream: (url: string, body: any) => !!body.stream,
   })
 }

packages/console/app/src/routes/zen/v1/models.ts

@@ -50,10 +50,7 @@ export async function GET(input: APIEvent) {
         })
         .from(KeyTable)
         .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
-        .leftJoin(
-          ModelTable,
-          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), isNull(ModelTable.timeDeleted)),
-        )
+        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), isNull(ModelTable.timeDeleted)))
         .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
         .then((rows) => rows.map((row) => row.model)),
     )

packages/console/app/src/routes/zen/v1/models/[model].ts

@@ -0,0 +1,13 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { handler } from "~/routes/zen/util/handler"
+
+export function POST(input: APIEvent) {
+  return handler(input, {
+    format: "google",
+    parseApiKey: (headers: Headers) => headers.get("x-goog-api-key") ?? undefined,
+    parseModel: (url: string, body: any) => url.split("/").pop()?.split(":")?.[0] ?? "",
+    parseIsStream: (url: string, body: any) =>
+      // ie. url: https://opencode.ai/zen/v1/models/gemini-3-pro:streamGenerateContent?alt=sse'
+      url.split("/").pop()?.split(":")?.[1]?.startsWith("streamGenerateContent") ?? false,
+  })
+}

packages/console/app/src/routes/zen/v1/responses.ts

@@ -5,5 +5,7 @@ export function POST(input: APIEvent) {
   return handler(input, {
     format: "openai",
     parseApiKey: (headers: Headers) => headers.get("authorization")?.split(" ")[1],
+    parseModel: (url: string, body: any) => body.model,
+    parseIsStream: (url: string, body: any) => !!body.stream,
   })
 }

packages/console/app/src/style/token/font.css

@@ -15,7 +15,6 @@ body {
   --font-size-9xl: 8rem;
 
   --font-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-sans: var(--font-mono);
 }

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.0.36",
+  "version": "1.0.98",
   "private": true,
   "type": "module",
   "dependencies": {

packages/console/core/script/lookup-user.ts

@@ -8,22 +8,15 @@ if (!email) {
   process.exit(1)
 }
 
-const authData = await printTable("Auth", (tx) =>
-  tx.select().from(AuthTable).where(eq(AuthTable.subject, email)),
-)
+const authData = await printTable("Auth", (tx) => tx.select().from(AuthTable).where(eq(AuthTable.subject, email)))
 if (authData.length === 0) {
   console.error("User not found")
   process.exit(1)
 }
 
-await printTable("Auth", (tx) =>
-  tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)),
-)
+await printTable("Auth", (tx) => tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)))
 
-function printTable(
-  title: string,
-  callback: (tx: Database.TxOrDb) => Promise<any[]>,
-): Promise<any[]> {
+function printTable(title: string, callback: (tx: Database.TxOrDb) => Promise<any[]>): Promise<any[]> {
   return Database.use(async (tx) => {
     const data = await callback(tx)
     console.log(`== ${title} ==`)

packages/console/core/script/promote-models.ts

@@ -11,20 +11,21 @@ const root = path.resolve(process.cwd(), "..", "..", "..")
 
 // read the secret
 const ret = await $`bun sst secret list`.cwd(root).text()
-const value1 = ret
-  .split("\n")
-  .find((line) => line.startsWith("ZEN_MODELS1"))
-  ?.split("=")[1]
-const value2 = ret
-  .split("\n")
-  .find((line) => line.startsWith("ZEN_MODELS2"))
-  ?.split("=")[1]
+const lines = ret.split("\n")
+const value1 = lines.find((line) => line.startsWith("ZEN_MODELS1"))?.split("=")[1]
+const value2 = lines.find((line) => line.startsWith("ZEN_MODELS2"))?.split("=")[1]
+const value3 = lines.find((line) => line.startsWith("ZEN_MODELS3"))?.split("=")[1]
+const value4 = lines.find((line) => line.startsWith("ZEN_MODELS4"))?.split("=")[1]
 if (!value1) throw new Error("ZEN_MODELS1 not found")
 if (!value2) throw new Error("ZEN_MODELS2 not found")
+if (!value3) throw new Error("ZEN_MODELS3 not found")
+if (!value4) throw new Error("ZEN_MODELS4 not found")
 
 // validate value
-ZenData.validate(JSON.parse(value1 + value2))
+ZenData.validate(JSON.parse(value1 + value2 + value3 + value4))
 
 // update the secret
 await $`bun sst secret set ZEN_MODELS1 ${value1} --stage ${stage}`
 await $`bun sst secret set ZEN_MODELS2 ${value2} --stage ${stage}`
+await $`bun sst secret set ZEN_MODELS3 ${value3} --stage ${stage}`
+await $`bun sst secret set ZEN_MODELS4 ${value4} --stage ${stage}`

packages/console/core/script/reset-db.ts

@@ -8,14 +8,6 @@ import { KeyTable } from "../src/schema/key.sql.js"
 
 if (Resource.App.stage !== "frank") throw new Error("This script is only for frank")
 
-for (const table of [
-  AccountTable,
-  BillingTable,
-  KeyTable,
-  PaymentTable,
-  UsageTable,
-  UserTable,
-  WorkspaceTable,
-]) {
+for (const table of [AccountTable, BillingTable, KeyTable, PaymentTable, UsageTable, UserTable, WorkspaceTable]) {
   await Database.use((tx) => tx.delete(table))
 }

packages/console/core/script/update-models.ts

@@ -7,24 +7,22 @@ import { ZenData } from "../src/model"
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
 const models = await $`bun sst secret list`.cwd(root).text()
-console.log("models", models)
 
 // read the line starting with "ZEN_MODELS"
-const oldValue1 = models
-  .split("\n")
-  .find((line) => line.startsWith("ZEN_MODELS1"))
-  ?.split("=")[1]
-const oldValue2 = models
-  .split("\n")
-  .find((line) => line.startsWith("ZEN_MODELS2"))
-  ?.split("=")[1]
+const lines = models.split("\n")
+const oldValue1 = lines.find((line) => line.startsWith("ZEN_MODELS1"))?.split("=")[1]
+const oldValue2 = lines.find((line) => line.startsWith("ZEN_MODELS2"))?.split("=")[1]
+const oldValue3 = lines.find((line) => line.startsWith("ZEN_MODELS3"))?.split("=")[1]
+const oldValue4 = lines.find((line) => line.startsWith("ZEN_MODELS4"))?.split("=")[1]
 if (!oldValue1) throw new Error("ZEN_MODELS1 not found")
 if (!oldValue2) throw new Error("ZEN_MODELS2 not found")
+if (!oldValue3) throw new Error("ZEN_MODELS3 not found")
+if (!oldValue4) throw new Error("ZEN_MODELS4 not found")
 
 // store the prettified json to a temp file
 const filename = `models-${Date.now()}.json`
 const tempFile = Bun.file(path.join(os.tmpdir(), filename))
-await tempFile.write(JSON.stringify(JSON.parse(oldValue1 + oldValue2), null, 2))
+await tempFile.write(JSON.stringify(JSON.parse(oldValue1 + oldValue2 + oldValue3 + oldValue4), null, 2))
 console.log("tempFile", tempFile.name)
 
 // open temp file in vim and read the file on close
@@ -33,6 +31,12 @@ const newValue = JSON.stringify(JSON.parse(await tempFile.text()))
 ZenData.validate(JSON.parse(newValue))
 
 // update the secret
-const mid = Math.floor(newValue.length / 2)
-await $`bun sst secret set ZEN_MODELS1 ${newValue.slice(0, mid)}`
-await $`bun sst secret set ZEN_MODELS2 ${newValue.slice(mid)}`
+const chunk = Math.ceil(newValue.length / 4)
+const newValue1 = newValue.slice(0, chunk)
+const newValue2 = newValue.slice(chunk, chunk * 2)
+const newValue3 = newValue.slice(chunk * 2, chunk * 3)
+const newValue4 = newValue.slice(chunk * 3)
+await $`bun sst secret set ZEN_MODELS1 ${newValue1}`
+await $`bun sst secret set ZEN_MODELS2 ${newValue2}`
+await $`bun sst secret set ZEN_MODELS3 ${newValue3}`
+await $`bun sst secret set ZEN_MODELS4 ${newValue4}`

packages/console/core/src/aws.ts

@@ -24,40 +24,37 @@ export namespace AWS {
       body: z.string(),
     }),
     async (input) => {
-      const res = await createClient().fetch(
-        "https://email.us-east-1.amazonaws.com/v2/email/outbound-emails",
-        {
-          method: "POST",
-          headers: {
-            "X-Amz-Target": "SES.SendEmail",
-            "Content-Type": "application/json",
+      const res = await createClient().fetch("https://email.us-east-1.amazonaws.com/v2/email/outbound-emails", {
+        method: "POST",
+        headers: {
+          "X-Amz-Target": "SES.SendEmail",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          FromEmailAddress: `OpenCode Zen <contact@anoma.ly>`,
+          Destination: {
+            ToAddresses: [input.to],
           },
-          body: JSON.stringify({
-            FromEmailAddress: `OpenCode Zen <contact@anoma.ly>`,
-            Destination: {
-              ToAddresses: [input.to],
-            },
-            Content: {
-              Simple: {
-                Subject: {
+          Content: {
+            Simple: {
+              Subject: {
+                Charset: "UTF-8",
+                Data: input.subject,
+              },
+              Body: {
+                Text: {
                   Charset: "UTF-8",
-                  Data: input.subject,
+                  Data: input.body,
                 },
-                Body: {
-                  Text: {
-                    Charset: "UTF-8",
-                    Data: input.body,
-                  },
-                  Html: {
-                    Charset: "UTF-8",
-                    Data: input.body,
-                  },
+                Html: {
+                  Charset: "UTF-8",
+                  Data: input.body,
                 },
               },
             },
-          }),
-        },
-      )
+          },
+        }),
+      })
       if (!res.ok) {
         throw new Error(`Failed to send email: ${res.statusText}`)
       }

packages/console/core/src/billing.ts

@@ -57,14 +57,15 @@ export namespace Billing {
     )
   }
 
-  export const usages = async () => {
+  export const usages = async (page = 0, pageSize = 50) => {
     return await Database.use((tx) =>
       tx
         .select()
         .from(UsageTable)
         .where(eq(UsageTable.workspaceID, Actor.workspace()))
         .orderBy(sql`${UsageTable.timeCreated} DESC`)
-        .limit(100),
+        .limit(pageSize)
+        .offset(page * pageSize),
     )
   }
 

packages/console/core/src/drizzle/index.ts

@@ -5,10 +5,7 @@ import { Client } from "@planetscale/database"
 
 import { MySqlTransaction, type MySqlTransactionConfig } from "drizzle-orm/mysql-core"
 import type { ExtractTablesWithRelations } from "drizzle-orm"
-import type {
-  PlanetScalePreparedQueryHKT,
-  PlanetscaleQueryResultHKT,
-} from "drizzle-orm/planetscale-serverless"
+import type { PlanetScalePreparedQueryHKT, PlanetscaleQueryResultHKT } from "drizzle-orm/planetscale-serverless"
 import { Context } from "../context"
 import { memo } from "../util/memo"
 
@@ -70,10 +67,7 @@ export namespace Database {
     }
   }
 
-  export async function transaction<T>(
-    callback: (tx: TxOrDb) => Promise<T>,
-    config?: MySqlTransactionConfig,
-  ) {
+  export async function transaction<T>(callback: (tx: TxOrDb) => Promise<T>, config?: MySqlTransactionConfig) {
     try {
       const { tx } = TransactionContext.use()
       return callback(tx)

packages/console/core/src/key.ts

@@ -20,14 +20,8 @@ export namespace Key {
           email: AuthTable.subject,
         })
         .from(KeyTable)
-        .innerJoin(
-          UserTable,
-          and(eq(KeyTable.userID, UserTable.id), eq(KeyTable.workspaceID, UserTable.workspaceID)),
-        )
-        .innerJoin(
-          AuthTable,
-          and(eq(UserTable.accountID, AuthTable.accountID), eq(AuthTable.provider, "email")),
-        )
+        .innerJoin(UserTable, and(eq(KeyTable.userID, UserTable.id), eq(KeyTable.workspaceID, UserTable.workspaceID)))
+        .innerJoin(AuthTable, and(eq(UserTable.accountID, AuthTable.accountID), eq(AuthTable.provider, "email")))
         .where(
           and(
             ...[

packages/console/core/src/model.ts

@@ -8,7 +8,7 @@ import { Actor } from "./actor"
 import { Resource } from "@opencode-ai/console-resource"
 
 export namespace ZenData {
-  const FormatSchema = z.enum(["anthropic", "openai", "oa-compat"])
+  const FormatSchema = z.enum(["anthropic", "google", "openai", "oa-compat"])
   export type Format = z.infer<typeof FormatSchema>
 
   const ModelCostSchema = z.object({
@@ -24,6 +24,8 @@ export namespace ZenData {
     cost: ModelCostSchema,
     cost200K: ModelCostSchema.optional(),
     allowAnonymous: z.boolean().optional(),
+    rateLimit: z.number().optional(),
+    fallbackProvider: z.string().optional(),
     providers: z.array(
       z.object({
         id: z.string(),
@@ -51,7 +53,9 @@ export namespace ZenData {
   })
 
   export const list = fn(z.void(), () => {
-    const json = JSON.parse(Resource.ZEN_MODELS1.value + Resource.ZEN_MODELS2.value)
+    const json = JSON.parse(
+      Resource.ZEN_MODELS1.value + Resource.ZEN_MODELS2.value + Resource.ZEN_MODELS3.value + Resource.ZEN_MODELS4.value,
+    )
     return ModelsSchema.parse(json)
   })
 }
@@ -60,9 +64,7 @@ export namespace Model {
   export const enable = fn(z.object({ model: z.string() }), ({ model }) => {
     Actor.assertAdmin()
     return Database.use((db) =>
-      db
-        .delete(ModelTable)
-        .where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))),
+      db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))),
     )
   })
 

packages/console/core/src/provider.ts

@@ -11,9 +11,7 @@ export namespace Provider {
       tx
         .select()
         .from(ProviderTable)
-        .where(
-          and(eq(ProviderTable.workspaceID, Actor.workspace()), isNull(ProviderTable.timeDeleted)),
-        ),
+        .where(and(eq(ProviderTable.workspaceID, Actor.workspace()), isNull(ProviderTable.timeDeleted))),
     ),
   )
 
@@ -52,12 +50,7 @@ export namespace Provider {
       return Database.transaction((tx) =>
         tx
           .delete(ProviderTable)
-          .where(
-            and(
-              eq(ProviderTable.provider, provider),
-              eq(ProviderTable.workspaceID, Actor.workspace()),
-            ),
-          ),
+          .where(and(eq(ProviderTable.provider, provider), eq(ProviderTable.workspaceID, Actor.workspace()))),
       )
     },
   )