.gitignore

- Added uninstaller feature sprint (Issue #3900)
- Added maxSteps feature sprint (Issue #3631)
- These sprints will be used by feature-bench test suite

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

@@ -5,6 +5,8 @@ runs:
   steps:
     - name: Setup Bun
       uses: oven-sh/setup-bun@v2
+      with:
+        bun-version-file: package.json
 
     - name: Cache ~/.bun
       id: cache-bun

.github/publish-python-sdk.yml

@@ -0,0 +1,71 @@
+#
+# This file is intentionally in the wrong dir, will move and add later....
+#
+
+# name: publish-python-sdk
+
+# on:
+#   release:
+#     types: [published]
+#   workflow_dispatch:
+
+# jobs:
+#   publish:
+#     runs-on: ubuntu-latest
+#     permissions:
+#       contents: read
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v4
+
+#       - name: Setup Bun
+#         uses: oven-sh/setup-bun@v1
+#         with:
+#           bun-version: 1.2.21
+
+#       - name: Install dependencies (JS/Bun)
+#         run: bun install
+
+#       - name: Install uv
+#         shell: bash
+#         run: curl -LsSf https://astral.sh/uv/install.sh | sh
+
+#       - name: Generate Python SDK from OpenAPI (CLI)
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv run --project packages/sdk/python python packages/sdk/python/scripts/generate.py --source cli
+
+#       - name: Sync Python dependencies
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv sync --dev --project packages/sdk/python
+
+#       - name: Set version from release tag
+#         shell: bash
+#         run: |
+#           TAG="${GITHUB_REF_NAME:-}"
+#           if [ -z "$TAG" ]; then
+#             TAG="$(git describe --tags --abbrev=0 || echo 0.0.0)"
+#           fi
+#           echo "Using version: $TAG"
+#           VERSION="$TAG" ~/.local/bin/uv run --project packages/sdk/python python - <<'PY'
+# import os, re, pathlib
+# root = pathlib.Path('packages/sdk/python')
+# pt = (root / 'pyproject.toml').read_text()
+# version = os.environ.get('VERSION','0.0.0').lstrip('v')
+# pt = re.sub(r'(?m)^(version\s*=\s*")[^"]+("\s*)$', f"\\1{version}\\2", pt)
+# (root / 'pyproject.toml').write_text(pt)
+# # Also update generator config override for consistency
+# cfgp = root / 'openapi-python-client.yaml'
+# if cfgp.exists():
+#     cfg = cfgp.read_text()
+#     cfg = re.sub(r'(?m)^(package_version_override:\s*)\S+$', f"\\1{version}", cfg)
+#     cfgp.write_text(cfg)
+# PY
+
+#       - name: Build and publish to PyPI
+#         env:
+#           PYPI_TOKEN: ${{ secrets.PYPI_API_TOKEN }}
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv run --project packages/sdk/python python packages/sdk/python/scripts/publish.py

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

@@ -0,0 +1,33 @@
+name: Auto-label TUI Issues
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  auto-label:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      issues: write
+    steps:
+      - name: Add opentui label
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const issue = context.payload.issue;
+            const title = issue.title;
+            const description = issue.body || '';
+
+            // Check for version patterns like v1.0.x or 1.0.x
+            const versionPattern = /[v]?1\.0\./i;
+
+            if (versionPattern.test(title) || versionPattern.test(description)) {
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issue.number,
+                labels: ['opentui']
+              });
+            }

.github/workflows/opencode.yml

@@ -26,4 +26,4 @@ jobs:
         env:
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
         with:
-          model: opencode/kimi-k2
+          model: opencode/glm-4.6

.github/workflows/publish.yml

@@ -53,13 +53,17 @@ jobs:
       - name: Install OpenCode
         run: curl -fsSL https://opencode.ai/install | bash
 
+      - name: Setup npm auth
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+
       - name: Publish
         run: |
           ./script/publish.ts
         env:
           OPENCODE_BUMP: ${{ inputs.bump }}
           OPENCODE_CHANNEL: latest
+          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
           AUR_KEY: ${{ secrets.AUR_KEY }}
-          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}

.github/workflows/snapshot.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - dev
       - opentui
+      - v0
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.gitignore

@@ -5,8 +5,15 @@ node_modules
 .env
 .idea
 .vscode
+*~
 openapi.json
 playground
 tmp
 dist
 .turbo
+
+# Test suite artifacts
+opencode/.bun/
+opencode/.local/
+opencode/.cache/
+opencode/node_modules

.husky/pre-push

@@ -1,2 +1,2 @@
 #!/bin/sh
-bun run typecheck
+bun typecheck

.opencode/command/commit.md

@@ -18,3 +18,6 @@ For anything in the packages/app use the ignore: prefix.
 
 prefer to explain WHY something was done from an end user perspective instead of
 WHAT was done.
+
+do not do generic messages like "improved agent experience" be very specific
+about what user facing changes were made

.opencode/command/hello.md

@@ -1,5 +1,5 @@
 ---
-description: hello world
+description: hello world iaosd ioasjdoiasjd oisadjoisajd osiajd oisaj dosaij dsoajsajdaijdoisa jdoias jdoias jdoia jois jo jdois jdoias jdoias j djoasdj
 ---
 
 hey there $ARGUMENTS

AGENTS.md

@@ -17,7 +17,7 @@
 
 ## Tool Calling
 
-- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environnement:
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environment:
 
 json
 {

CONTRIBUTING.md

@@ -17,6 +17,7 @@ If you are unsure if a PR would be accepted, feel free to ask a maintainer or lo
 - [`help wanted`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3Ahelp-wanted)
 - [`good first issue`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22good%20first%20issue%22)
 - [`bug`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3Abug)
+- [`perf`](https://github.com/sst/opencode/issues?q=is%3Aopen%20is%3Aissue%20label%3A%22perf%22)
 
 > [!NOTE]
 > PRs that ignore these guardrails will likely be closed.
@@ -25,7 +26,7 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
 
 ## Developing OpenCode
 
-- Requirements: Bun 1.3+, Go 1.24.x.
+- Requirements: Bun 1.3+
 - Install dependencies and start the dev server from the repo root:
 
   ```bash
@@ -35,11 +36,11 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
 
 - Core pieces:
   - `packages/opencode`: OpenCode core business logic & server.
-  - `packages/tui`: The TUI code, written in Go (will be removed soon in favor of [opentui](https://github.com/sst/opentui))
+  - `packages/opencode/src/cli/cmd/tui/`: The TUI code, written in SolidJS with [opentui](https://github.com/sst/opentui)
   - `packages/plugin`: Source for `@opencode-ai/plugin`
 
 > [!NOTE]
-> After touching `packages/opencode/src/server/server.ts`, the OpenCode team must regenerate the Stainless SDK before any client updates merge.
+> After touching `packages/opencode/src/server/server.ts`, run "./packages/sdk/js/script/build.ts" to regenerate the JS sdk.
 
 ## Pull Request Expectations
 

README.md

@@ -28,7 +28,7 @@ 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 sst/tap/opencode      # macOS and Linux
+brew install opencode      # macOS and Linux
 paru -S opencode-bin               # Arch Linux
 ```
 

STATS.md

@@ -121,3 +121,20 @@
 | 2025-10-25 | 578,927 (+6,235)  | 516,129 (+9,224)  | 1,095,056 (+15,459) |
 | 2025-10-26 | 584,409 (+5,482)  | 521,179 (+5,050)  | 1,105,588 (+10,532) |
 | 2025-10-27 | 589,999 (+5,590)  | 526,001 (+4,822)  | 1,116,000 (+10,412) |
+| 2025-10-28 | 595,776 (+5,777)  | 532,438 (+6,437)  | 1,128,214 (+12,214) |
+| 2025-10-29 | 606,259 (+10,483) | 542,064 (+9,626)  | 1,148,323 (+20,109) |
+| 2025-10-30 | 613,746 (+7,487)  | 542,064 (+0)      | 1,155,810 (+7,487)  |
+| 2025-10-30 | 617,846 (+4,100)  | 555,026 (+12,962) | 1,172,872 (+17,062) |
+| 2025-10-31 | 626,612 (+8,766)  | 564,579 (+9,553)  | 1,191,191 (+18,319) |
+| 2025-11-01 | 636,100 (+9,488)  | 581,806 (+17,227) | 1,217,906 (+26,715) |
+| 2025-11-02 | 644,067 (+7,967)  | 590,004 (+8,198)  | 1,234,071 (+16,165) |
+| 2025-11-03 | 653,130 (+9,063)  | 597,139 (+7,135)  | 1,250,269 (+16,198) |
+| 2025-11-04 | 663,907 (+10,777) | 608,056 (+10,917) | 1,271,963 (+21,694) |
+| 2025-11-05 | 675,059 (+11,152) | 619,690 (+11,634) | 1,294,749 (+22,786) |
+| 2025-11-06 | 686,249 (+11,190) | 630,885 (+11,195) | 1,317,134 (+22,385) |
+| 2025-11-07 | 696,626 (+10,377) | 642,146 (+11,261) | 1,338,772 (+21,638) |
+| 2025-11-08 | 706,032 (+9,406)  | 653,489 (+11,343) | 1,359,521 (+20,749) |
+| 2025-11-09 | 713,462 (+7,430)  | 660,459 (+6,970)  | 1,373,921 (+14,400) |
+| 2025-11-10 | 722,280 (+8,818)  | 668,225 (+7,766)  | 1,390,505 (+16,584) |
+| 2025-11-11 | 729,769 (+7,489)  | 677,501 (+9,276)  | 1,407,270 (+16,765) |
+| 2025-11-12 | 740,168 (+10,399) | 686,454 (+8,953)  | 1,426,622 (+19,352) |

github/index.ts

@@ -152,6 +152,9 @@ try {
     return session.id.slice(-8)
   })()
   console.log("opencode session", session.id)
+  if (shareId) {
+    console.log("Share link:", `${useShareUrl()}/s/${shareId}`)
+  }
 
   // Handle 3 cases
   // 1. Issue
@@ -168,7 +171,9 @@ 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
@@ -180,7 +185,9 @@ 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 })}`)
     }
   }
@@ -361,7 +368,9 @@ 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 }
@@ -402,8 +411,12 @@ 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))
 
@@ -430,7 +443,8 @@ 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")
@@ -498,7 +512,12 @@ 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") {
@@ -710,7 +729,8 @@ 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) {
@@ -730,12 +750,13 @@ async function updateComment(body: string) {
 async function createPR(base: string, branch: string, title: string, body: string) {
   console.log("Creating pull request...")
   const { repo } = useContext()
+  const truncatedTitle = title.length > 256 ? title.slice(0, 253) + "..." : title
   const pr = await octoRest.rest.pulls.create({
     owner: repo.owner,
     repo: repo.repo,
     head: branch,
     base,
-    title,
+    title: truncatedTitle,
     body,
   })
   return pr.data.number
@@ -753,7 +774,9 @@ 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()})`
 }
 
@@ -936,9 +959,13 @@ 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}`,
@@ -960,9 +987,15 @@ 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")
 }

install

@@ -10,10 +10,14 @@ NC='\033[0m' # No Color
 
 requested_version=${VERSION:-}
 
-os=$(uname -s | tr '[:upper:]' '[:lower:]')
-if [[ "$os" == "darwin" ]]; then
-    os="darwin"
-fi
+raw_os=$(uname -s)
+os=$(echo "$raw_os" | tr '[:upper:]' '[:lower:]')
+# Normalize various Unix-like identifiers
+case "$raw_os" in
+  Darwin*) os="darwin" ;;
+  Linux*) os="linux" ;;
+  MINGW*|MSYS*|CYGWIN*) os="windows" ;;
+ esac
 arch=$(uname -m)
 
 if [[ "$arch" == "aarch64" ]]; then

logs/.2c5480b3b2480f80fa29b850af461dce619c0b2f-audit.json

@@ -0,0 +1,15 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 14
+    },
+    "auditLog": "/home/thdxr/dev/projects/sst/opencode/logs/.2c5480b3b2480f80fa29b850af461dce619c0b2f-audit.json",
+    "files": [
+        {
+            "date": 1759827172859,
+            "name": "/home/thdxr/dev/projects/sst/opencode/logs/mcp-puppeteer-2025-10-07.log",
+            "hash": "a3d98b26edd793411b968a0d24cfeee8332138e282023c3b83ec169d55c67f16"
+        }
+    ],
+    "hashType": "sha256"
+}

logs/mcp-puppeteer-2025-10-07.log

@@ -0,0 +1,48 @@
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:52.879"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:52.880"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:56.191"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:56.192"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:59.267"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:52:59.268"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:20.276"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:20.277"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:30.838"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:30.839"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:42.452"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:42.452"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:46.499"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:53:46.500"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:54:02.295"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:54:02.295"}
+{"arguments":{"url":"https://google.com"},"level":"debug","message":"Tool call received","service":"mcp-puppeteer","timestamp":"2025-10-07 04:54:37.150","tool":"puppeteer_navigate"}
+{"0":"n","1":"p","2":"x","level":"info","message":"Launching browser with config:","service":"mcp-puppeteer","timestamp":"2025-10-07 04:54:37.150"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 04:55:08.488"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 04:55:08.489"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:11.815"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:11.816"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:21.934"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:21.935"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:32.544"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:32.544"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:41.154"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:41.155"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:55.426"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:23:55.427"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:15.715"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:15.716"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:25.063"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:25.064"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:48.567"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:24:48.568"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 05:25:08.937"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 05:25:08.938"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 22:38:37.120"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 22:38:37.121"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 22:38:52.490"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 22:38:52.491"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 22:39:25.524"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 22:39:25.525"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 22:40:57.126"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 22:40:57.127"}
+{"level":"info","message":"Starting MCP server","service":"mcp-puppeteer","timestamp":"2025-10-07 22:42:24.175"}
+{"level":"info","message":"MCP server started successfully","service":"mcp-puppeteer","timestamp":"2025-10-07 22:42:24.176"}

opencode.json

@@ -1,3 +1,17 @@
 {
-  "$schema": "https://opencode.ai/config.json"
+  "$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

@@ -1,13 +1,15 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode",
+  "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.0",
+  "packageManager": "bun@1.3.1",
   "scripts": {
-    "dev": "bun run packages/opencode/src/index.ts",
+    "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "typecheck": "bun turbo typecheck",
-    "prepare": "husky"
+    "prepare": "husky",
+    "random": "echo 'Random script'"
   },
   "workspaces": {
     "packages": [
@@ -19,13 +21,14 @@
     "catalog": {
       "@types/bun": "1.3.0",
       "@hono/zod-validator": "0.4.2",
+      "ulid": "3.0.1",
       "@kobalte/core": "0.13.11",
       "@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.3.2",
+      "@pierre/precision-diffs": "0.4.1",
       "@solidjs/meta": "0.29.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
@@ -63,7 +66,7 @@
   "license": "MIT",
   "prettier": {
     "semi": false,
-    "printWidth": 120
+    "printWidth": 100
   },
   "trustedDependencies": [
     "esbuild",

packages/console/app/package.json

@@ -7,13 +7,15 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "0.15.19"
+    "version": "1.0.15"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",
-    "@kobalte/core": "catalog:",
-    "@openauthjs/openauth": "0.0.0-20250322224806",
     "@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",

packages/console/app/src/asset/brand/opencode-logo-dark.svg

@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86283)">
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86283)">
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86283">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/brand/opencode-logo-light.svg

@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86274)">
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86274)">
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86274">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/brand/opencode-wordmark-dark.svg

@@ -0,0 +1,30 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86292)">
+<mask id="mask0_1401_86292" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86292)">
+<path d="M49.2868 82.1433H16.4297V49.2861H49.2868V82.1433Z" fill="#4B4646"/>
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="#B7B1B1"/>
+<path d="M131.427 82.1433H98.5703V49.2861H131.427V82.1433Z" fill="#4B4646"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="#B7B1B1"/>
+<path d="M229.997 65.7139V82.1424H180.711V65.7139H229.997Z" fill="#4B4646"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="#B7B1B1"/>
+<path d="M295.717 98.5718H262.859V49.2861H295.717V98.5718Z" fill="#4B4646"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="#B7B1B1"/>
+<path d="M394.286 82.1433H345V49.2861H394.286V82.1433Z" fill="#4B4646"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="#F1ECEC"/>
+<path d="M459.998 82.1433H427.141V49.2861H459.998V82.1433Z" fill="#4B4646"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="#F1ECEC"/>
+<path d="M542.146 82.1433H509.289V49.2861H542.146V82.1433Z" fill="#4B4646"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="#F1ECEC"/>
+<path d="M640.715 65.7139V82.1424H591.43V65.7139H640.715Z" fill="#4B4646"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86292">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/brand/opencode-wordmark-light.svg

@@ -0,0 +1,30 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86330)">
+<mask id="mask0_1401_86330" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86330)">
+<path d="M49.2346 82.1433H16.4141V49.2861H49.2346V82.1433Z" fill="#CFCECD"/>
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="#656363"/>
+<path d="M131.281 82.1433H98.4609V49.2861H131.281V82.1433Z" fill="#CFCECD"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="#656363"/>
+<path d="M229.746 65.7139V82.1424H180.516V65.7139H229.746Z" fill="#CFCECD"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="#656363"/>
+<path d="M295.383 98.5718H262.562V49.2861H295.383V98.5718Z" fill="#CFCECD"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="#656363"/>
+<path d="M393.848 82.1433H344.617V49.2861H393.848V82.1433Z" fill="#CFCECD"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="#211E1E"/>
+<path d="M459.485 82.1433H426.664V49.2861H459.485V82.1433Z" fill="#CFCECD"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="#211E1E"/>
+<path d="M541.539 82.1433H508.719V49.2861H541.539V82.1433Z" fill="#CFCECD"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="#211E1E"/>
+<path d="M639.996 65.7139V82.1424H590.766V65.7139H639.996Z" fill="#CFCECD"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86330">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg

@@ -0,0 +1,22 @@
+<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86315)">
+<mask id="mask0_1401_86315" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115">
+<path d="M640.714 0H0V115H640.714V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86315)">
+<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="white"/>
+<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="white"/>
+<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="white"/>
+<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="white"/>
+<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="white"/>
+<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="white"/>
+<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="white"/>
+<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86315">
+<rect width="640.714" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg

@@ -0,0 +1,22 @@
+<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86353)">
+<mask id="mask0_1401_86353" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115">
+<path d="M640 0H0V115H640V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86353)">
+<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="black"/>
+<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="black"/>
+<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="black"/>
+<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="black"/>
+<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="black"/>
+<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="black"/>
+<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="black"/>
+<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86353">
+<rect width="640" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/brand-assets-dark.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94922)" stroke="#F1ECEC"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#4B4646" stroke-opacity="0.4"/>
+<defs>
+<linearGradient id="paint0_linear_1311_94922" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1818"/>
+<stop offset="1" stop-color="#2D2828"/>
+</linearGradient>
+</defs>
+</svg>

packages/console/app/src/asset/lander/brand-assets-light.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94913)" stroke="#8E8B8B"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#110000" stroke-opacity="0.121569"/>
+<defs>
+<linearGradient id="paint0_linear_1311_94913" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9F8F8"/>
+<stop offset="1" stop-color="#E9E8E8"/>
+</linearGradient>
+</defs>
+</svg>

packages/console/app/src/asset/lander/logo-dark.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94916)">
+<path d="M15 19H7V11H15V19Z" fill="#4B4646"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94916">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/logo-light.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94907)">
+<path d="M15 19H7V11H15V19Z" fill="#BCBBBB"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94907">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/opencode-logo-dark.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94973)">
+<path d="M24 32H8V16H24V32Z" fill="#4B4646"/>
+<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94973">
+<rect width="32" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/opencode-logo-light.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_94969)">
+<path d="M24 32H8V16H24V32Z" fill="#BCBBBB"/>
+<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_94969">
+<rect width="32" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/opencode-wordmark-dark.svg

@@ -0,0 +1,25 @@
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_95032)">
+<path d="M18 30H6V18H18V30Z" fill="#4B4646"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/>
+<path d="M48 30H36V18H48V30Z" fill="#4B4646"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/>
+<path d="M84 24V30H66V24H84Z" fill="#4B4646"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/>
+<path d="M108 36H96V18H108V36Z" fill="#4B4646"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/>
+<path d="M144 30H126V18H144V30Z" fill="#4B4646"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/>
+<path d="M168 30H156V18H168V30Z" fill="#4B4646"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/>
+<path d="M198 30H186V18H198V30Z" fill="#4B4646"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/>
+<path d="M234 24V30H216V24H234Z" fill="#4B4646"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_95032">
+<rect width="234" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/opencode-wordmark-light.svg

@@ -0,0 +1,25 @@
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_95049)">
+<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/>
+<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/>
+<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/>
+<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/>
+<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/>
+<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/>
+<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/>
+<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_95049">
+<rect width="234" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/wordmark-dark.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="#F1ECEC" stroke-width="2" stroke-linecap="square"/>
+</svg>

packages/console/app/src/asset/lander/wordmark-light.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>

packages/console/app/src/component/header-context-menu.css

@@ -0,0 +1,63 @@
+.context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 160px;
+  border-radius: 8px;
+  background-color: var(--color-background);
+  box-shadow:
+    0 0 0 1px rgba(19, 16, 16, 0.08),
+    0 6px 8px -4px rgba(19, 16, 16, 0.12),
+    0 4px 3px -2px rgba(19, 16, 16, 0.12),
+    0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  padding: 6px;
+
+  @media (prefers-color-scheme: dark) {
+    box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1);
+  }
+}
+
+.context-menu-item {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 16px 8px 8px;
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+  align-items: center;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+
+  [data-slot="copy dark"] {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-slot="copy light"] {
+      display: none;
+    }
+    [data-slot="copy dark"] {
+      display: block;
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-background-weak-hover);
+    color: var(--color-text-strong);
+  }
+
+  img {
+    width: 22px;
+    height: 26px;
+  }
+}
+
+.context-menu-divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-1) 0;
+}

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

@@ -1,11 +1,40 @@
 import logoLight from "../asset/logo-ornate-light.svg"
 import logoDark from "../asset/logo-ornate-dark.svg"
-import { A, createAsync } from "@solidjs/router"
+import copyLogoLight from "../asset/lander/logo-light.svg"
+import copyLogoDark from "../asset/lander/logo-dark.svg"
+import copyWordmarkLight from "../asset/lander/wordmark-light.svg"
+import copyWordmarkDark from "../asset/lander/wordmark-dark.svg"
+import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg"
+import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg"
+
+// SVG files for copying (separate from button icons)
+// Replace these with your actual SVG files for copying
+import copyLogoSvgLight from "../asset/lander/opencode-logo-light.svg"
+import copyLogoSvgDark from "../asset/lander/opencode-logo-dark.svg"
+import copyWordmarkSvgLight from "../asset/lander/opencode-wordmark-light.svg"
+import copyWordmarkSvgDark from "../asset/lander/opencode-wordmark-dark.svg"
+import { A, createAsync, useNavigate } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { github } from "~/lib/github"
+import { createEffect, onCleanup } from "solid-js"
+import "./header-context-menu.css"
+
+const isDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches
+
+const fetchSvgContent = async (svgPath: string): Promise<string> => {
+  try {
+    const response = await fetch(svgPath)
+    const svgText = await response.text()
+    return svgText
+  } catch (err) {
+    console.error("Failed to fetch SVG content:", err)
+    throw err
+  }
+}
 
 export function Header(props: { zen?: boolean }) {
+  const navigate = useNavigate()
   const githubData = createAsync(() => github())
   const starCount = createMemo(() =>
     githubData()?.stars
@@ -13,19 +42,109 @@ export function Header(props: { zen?: boolean }) {
           notation: "compact",
           compactDisplay: "short",
         }).format(githubData()?.stars!)
-      : "25K",
+      : "29K",
   )
 
   const [store, setStore] = createStore({
     mobileMenuOpen: false,
+    contextMenuOpen: false,
+    contextMenuPosition: { x: 0, y: 0 },
   })
 
+  createEffect(() => {
+    const handleClickOutside = () => {
+      setStore("contextMenuOpen", false)
+    }
+
+    const handleContextMenu = (event: MouseEvent) => {
+      event.preventDefault()
+      setStore("contextMenuOpen", false)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setStore("contextMenuOpen", false)
+      }
+    }
+
+    if (store.contextMenuOpen) {
+      document.addEventListener("click", handleClickOutside)
+      document.addEventListener("contextmenu", handleContextMenu)
+      document.addEventListener("keydown", handleKeyDown)
+      onCleanup(() => {
+        document.removeEventListener("click", handleClickOutside)
+        document.removeEventListener("contextmenu", handleContextMenu)
+        document.removeEventListener("keydown", handleKeyDown)
+      })
+    }
+  })
+
+  const handleLogoContextMenu = (event: MouseEvent) => {
+    event.preventDefault()
+    const logoElement = (event.currentTarget as HTMLElement).querySelector("a")
+    if (logoElement) {
+      const rect = logoElement.getBoundingClientRect()
+      setStore("contextMenuPosition", {
+        x: rect.left - 16,
+        y: rect.bottom + 8,
+      })
+    }
+    setStore("contextMenuOpen", true)
+  }
+
+  const copyWordmarkToClipboard = async () => {
+    try {
+      const isDark = isDarkMode()
+      const wordmarkSvgPath = isDark ? copyWordmarkSvgDark : copyWordmarkSvgLight
+      const wordmarkSvg = await fetchSvgContent(wordmarkSvgPath)
+      await navigator.clipboard.writeText(wordmarkSvg)
+    } catch (err) {
+      console.error("Failed to copy wordmark to clipboard:", err)
+    }
+  }
+
+  const copyLogoToClipboard = async () => {
+    try {
+      const isDark = isDarkMode()
+      const logoSvgPath = isDark ? copyLogoSvgDark : copyLogoSvgLight
+      const logoSvg = await fetchSvgContent(logoSvgPath)
+      await navigator.clipboard.writeText(logoSvg)
+    } catch (err) {
+      console.error("Failed to copy logo to clipboard:", err)
+    }
+  }
+
   return (
     <section data-component="top">
-      <A href="/">
-        <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
-        <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
-      </A>
+      <div onContextMenu={handleLogoContextMenu}>
+        <A href="/">
+          <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
+          <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
+        </A>
+      </div>
+
+      <Show when={store.contextMenuOpen}>
+        <div
+          class="context-menu"
+          style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
+        >
+          <button class="context-menu-item" onClick={copyLogoToClipboard}>
+            <img data-slot="copy light" src={copyLogoLight} alt="Logo" />
+            <img data-slot="copy dark" src={copyLogoDark} alt="Logo" />
+            Copy logo as SVG
+          </button>
+          <button class="context-menu-item" onClick={copyWordmarkToClipboard}>
+            <img data-slot="copy light" src={copyWordmarkLight} alt="Wordmark" />
+            <img data-slot="copy dark" src={copyWordmarkDark} alt="Wordmark" />
+            Copy wordmark as SVG
+          </button>
+          <button class="context-menu-item" onClick={() => navigate("/brand")}>
+            <img data-slot="copy light" src={copyBrandAssetsLight} alt="Brand Assets" />
+            <img data-slot="copy dark" src={copyBrandAssetsDark} alt="Brand Assets" />
+            Brand assets
+          </button>
+        </div>
+      </Show>
       <nav data-component="nav-desktop">
         <ul>
           <li>
@@ -36,6 +155,9 @@ export function Header(props: { zen?: boolean }) {
           <li>
             <a href="/docs">Docs</a>
           </li>
+          <li>
+            <A href="/enterprise">Enterprise</A>
+          </li>
           <li>
             <Switch>
               <Match when={props.zen}>
@@ -107,6 +229,9 @@ export function Header(props: { zen?: boolean }) {
                 <li>
                   <a href="/docs">Docs</a>
                 </li>
+                <li>
+                  <A href="/enterprise">Enterprise</A>
+                </li>
                 <li>
                   <Switch>
                     <Match when={props.zen}>

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

@@ -1,9 +1,14 @@
+import { A } from "@solidjs/router"
+
 export function Legal() {
   return (
     <div data-component="legal">
       <span>
         ©{new Date().getFullYear()} <a href="https://anoma.ly">Anomaly</a>
       </span>
+      <span>
+        <A href="/brand">Brand</A>
+      </span>
     </div>
   )
 }

packages/console/app/src/routes/api/enterprise.ts

@@ -0,0 +1,46 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { AWS } from "@opencode-ai/console-core/aws.js"
+
+interface EnterpriseFormData {
+  name: string
+  role: string
+  email: string
+  message: string
+}
+
+export async function POST(event: APIEvent) {
+  try {
+    const body = (await event.request.json()) as EnterpriseFormData
+
+    // Validate required fields
+    if (!body.name || !body.role || !body.email || !body.message) {
+      return Response.json({ error: "All fields are required" }, { status: 400 })
+    }
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(body.email)) {
+      return Response.json({ error: "Invalid email format" }, { status: 400 })
+    }
+
+    // Create email content
+    const emailContent = `
+${body.message}<br><br>
+--<br>
+${body.name}<br>
+${body.role}<br>
+${body.email}`.trim()
+
+    // Send email using AWS SES
+    await AWS.sendEmail({
+      to: "contact@anoma.ly",
+      subject: `Enterprise Inquiry from ${body.name}`,
+      body: emailContent,
+    })
+
+    return Response.json({ success: true, message: "Form submitted successfully" }, { status: 200 })
+  } catch (error) {
+    console.error("Error processing enterprise form:", error)
+    return Response.json({ error: "Internal server error" }, { status: 500 })
+  }
+}

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

@@ -0,0 +1,529 @@
+::selection {
+  background: var(--color-background-interactive);
+  color: var(--color-text-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-background-interactive);
+    color: var(--color-text-inverted);
+  }
+}
+
+[data-page="enterprise"] {
+  --color-background: hsl(0, 20%, 99%);
+  --color-background-weak: hsl(0, 8%, 97%);
+  --color-background-weak-hover: hsl(0, 8%, 94%);
+  --color-background-strong: hsl(0, 5%, 12%);
+  --color-background-strong-hover: hsl(0, 5%, 18%);
+  --color-background-interactive: hsl(62, 84%, 88%);
+  --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+  --color-text: hsl(0, 1%, 39%);
+  --color-text-weak: hsl(0, 1%, 60%);
+  --color-text-weaker: hsl(30, 2%, 81%);
+  --color-text-strong: hsl(0, 5%, 12%);
+  --color-text-inverted: hsl(0, 20%, 99%);
+  --color-text-success: hsl(119, 100%, 35%);
+
+  --color-border: hsl(30, 2%, 81%);
+  --color-border-weak: hsl(0, 1%, 85%);
+
+  --color-icon: hsl(0, 1%, 55%);
+  --color-success: hsl(142, 76%, 36%);
+
+  background: var(--color-background);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  padding-bottom: 5rem;
+
+  @media (prefers-color-scheme: dark) {
+    --color-background: hsl(0, 9%, 7%);
+    --color-background-weak: hsl(0, 6%, 10%);
+    --color-background-weak-hover: hsl(0, 6%, 15%);
+    --color-background-strong: hsl(0, 15%, 94%);
+    --color-background-strong-hover: hsl(0, 15%, 97%);
+    --color-background-interactive: hsl(62, 100%, 90%);
+    --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+    --color-text: hsl(0, 4%, 71%);
+    --color-text-weak: hsl(0, 2%, 49%);
+    --color-text-weaker: hsl(0, 3%, 28%);
+    --color-text-strong: hsl(0, 15%, 94%);
+    --color-text-inverted: hsl(0, 9%, 7%);
+    --color-text-success: hsl(119, 60%, 72%);
+
+    --color-border: hsl(0, 3%, 28%);
+    --color-border-weak: hsl(0, 4%, 23%);
+
+    --color-icon: hsl(10, 3%, 43%);
+    --color-success: hsl(142, 76%, 46%);
+  }
+
+  /* Header and Footer styles - copied from index.css */
+  [data-component="top"] {
+    padding: 24px 5rem;
+    height: 80px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--color-background);
+    border-bottom: 1px solid var(--color-border-weak);
+    z-index: 10;
+
+    @media (max-width: 60rem) {
+      padding: 24px 1.5rem;
+    }
+
+    img {
+      height: 34px;
+      width: auto;
+    }
+
+    [data-component="nav-desktop"] {
+      ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 48px;
+        li {
+          display: inline-block;
+          a {
+            text-decoration: none;
+            span {
+              color: var(--color-text-weak);
+            }
+          }
+          a:hover {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+            text-decoration-thickness: 1px;
+          }
+        }
+      }
+
+      @media (max-width: 40rem) {
+        display: none;
+      }
+    }
+
+    [data-component="nav-mobile"] {
+      button > svg {
+        color: var(--color-icon);
+      }
+    }
+
+    [data-component="nav-mobile-toggle"] {
+      border: none;
+      background: none;
+      outline: none;
+      height: 40px;
+      width: 40px;
+      cursor: pointer;
+      margin-right: -8px;
+    }
+
+    [data-component="nav-mobile-toggle"]:hover {
+      background: var(--color-background-weak);
+    }
+
+    [data-component="nav-mobile"] {
+      display: none;
+
+      @media (max-width: 40rem) {
+        display: block;
+
+        [data-component="nav-mobile-icon"] {
+          cursor: pointer;
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-component="nav-mobile-menu-list"] {
+          position: fixed;
+          background: var(--color-background);
+          top: 80px;
+          left: 0;
+          right: 0;
+          height: 100vh;
+
+          ul {
+            list-style: none;
+            padding: 20px 0;
+
+            li {
+              a {
+                text-decoration: none;
+                padding: 20px;
+                display: block;
+
+                span {
+                  color: var(--color-text-weak);
+                }
+              }
+
+              a:hover {
+                background: var(--color-background-weak);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    [data-slot="logo dark"] {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="logo light"] {
+        display: none;
+      }
+      [data-slot="logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="footer"] {
+    border-top: 1px solid var(--color-border-weak);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 65rem) {
+      border-bottom: 1px solid var(--color-border-weak);
+    }
+
+    [data-slot="cell"] {
+      flex: 1;
+      text-align: center;
+
+      a {
+        text-decoration: none;
+        padding: 2rem 0;
+        width: 100%;
+        display: block;
+
+        span {
+          color: var(--color-text-weak);
+
+          @media (max-width: 40rem) {
+            display: none;
+          }
+        }
+      }
+
+      a:hover {
+        background: var(--color-background-weak);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-thickness: 1px;
+      }
+    }
+
+    [data-slot="cell"] + [data-slot="cell"] {
+      border-left: 1px solid var(--color-border-weak);
+
+      @media (max-width: 40rem) {
+        border-left: none;
+      }
+    }
+
+    /* Mobile: third column on its own row */
+    @media (max-width: 25rem) {
+      flex-wrap: wrap;
+
+      [data-slot="cell"] {
+        flex: 1 0 100%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-weak);
+      }
+
+      [data-slot="cell"]:nth-child(1) {
+        border-top: none;
+      }
+    }
+  }
+
+  [data-component="container"] {
+    max-width: 67.5rem;
+    margin: 0 auto;
+    border: 1px solid var(--color-border-weak);
+    border-top: none;
+
+    @media (max-width: 65rem) {
+      border: none;
+    }
+  }
+
+  [data-component="content"] {
+  }
+
+  [data-component="brand-content"] {
+    padding: 4rem 5rem;
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin: 2rem 0 1rem 0;
+    }
+
+    p {
+      line-height: 1.6;
+      margin-bottom: 2.5rem;
+      color: var(--color-text);
+    }
+
+    [data-component="download-button"] {
+      padding: 8px 12px 8px 20px;
+      background: var(--color-background-strong);
+      color: var(--color-text-inverted);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      width: fit-content;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      text-decoration: none;
+
+
+      &:hover:not(:disabled) {
+        background: var(--color-background-strong-hover);
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    [data-component="brand-grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-top: 4rem;
+      margin-bottom: 2rem;
+    }
+
+    [data-component="brand-grid"] img {
+      width: 100%;
+      height: auto;
+      display: block;
+      border-radius: 4px;
+      border: 1px solid var(--color-border-weak);
+    }
+
+    [data-component="brand-grid"] > div {
+      position: relative;
+    }
+
+    [data-component="actions"] {
+      position: absolute;
+      background: rgba(4, 0, 0, 0.08);
+      border-radius: 4px;
+      bottom: 0;
+      right: 0;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      @media (max-width: 40rem) {
+        position: static;
+        opacity: 1;
+        background: none;
+        margin-top: 1rem;
+        justify-content: start;
+      }
+    }
+
+    [data-component="brand-grid"] > div:hover [data-component="actions"] {
+      opacity: 1;
+
+      @media (max-width: 40rem) {
+        opacity: 1;
+      }
+    }
+
+    [data-component="actions"] button {
+      padding: 6px 12px;
+      background: var(--color-background);
+      color: var(--color-text);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      cursor: pointer;
+      box-shadow:
+        0 0 0 1px rgba(19, 16, 16, 0.08),
+        0 6px 8px -4px rgba(19, 16, 16, 0.12),
+        0 4px 3px -2px rgba(19, 16, 16, 0.12),
+        0 1px 2px -1px rgba(19, 16, 16, 0.12);
+
+      @media (max-width: 40rem) {
+        box-shadow:
+          0 0 0 1px rgba(19, 16, 16, 0.16)
+      }
+
+
+      &:hover {
+        background: var(--color-background);
+      }
+
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -8px rgba(19, 16, 16, 0.50);
+      }
+    }
+
+
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+  }
+
+  [data-component="faq"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: 4rem 5rem;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    [data-slot="section-title"] {
+      margin-bottom: 24px;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 12px;
+      }
+
+      p {
+        margin-bottom: 12px;
+        color: var(--color-text);
+      }
+    }
+
+    ul {
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin-bottom: 24px;
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+    }
+
+    [data-slot="faq-question"] {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 8px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+
+      [data-slot="faq-icon-plus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: block;
+        }
+        [data-expanded] & {
+          display: none;
+        }
+      }
+      [data-slot="faq-icon-minus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: none;
+        }
+        [data-expanded] & {
+          display: block;
+        }
+      }
+      [data-slot="faq-question-text"] {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+
+    [data-slot="faq-answer"] {
+      margin-left: 40px;
+      margin-bottom: 32px;
+      color: var(--color-text);
+    }
+  }
+
+  [data-component="legal"] {
+    color: var(--color-text-weak);
+    text-align: center;
+    padding: 2rem 5rem;
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    a {
+      color: var(--color-text-weak);
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
+  }
+
+  a {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,352 @@
+import "./index.css"
+import { Title, Meta } from "@solidjs/meta"
+import { Header } from "~/component/header"
+import { Footer } from "~/component/footer"
+import { Legal } from "~/component/legal"
+import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
+import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
+import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
+import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
+import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
+import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
+import logoLightPng from "../../asset/brand/opencode-logo-light.png"
+import logoDarkPng from "../../asset/brand/opencode-logo-dark.png"
+import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png"
+import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png"
+import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png"
+import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png"
+import logoLightSvg from "../../asset/brand/opencode-logo-light.svg"
+import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg"
+import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
+import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
+import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
+import wordmarkSimpleDarkSvg from "../../asset/brand/opencode-wordmark-simple-dark.svg"
+const brandAssets = "/opencode-brand-assets.zip"
+
+export default function Brand() {
+  const downloadFile = async (url: string, filename: string) => {
+    try {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+
+      const link = document.createElement("a")
+      link.href = blobUrl
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+
+      window.URL.revokeObjectURL(blobUrl)
+    } catch (error) {
+      console.error("Download failed:", error)
+      const link = document.createElement("a")
+      link.href = url
+      link.target = "_blank"
+      link.rel = "noopener noreferrer"
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+
+  return (
+    <main data-page="enterprise">
+      <Title>OpenCode | Brand</Title>
+      <Meta name="description" content="OpenCode brand guidelines" />
+      <div data-component="container">
+        <Header />
+
+        <div data-component="content">
+          <section data-component="brand-content">
+            <h2>Brand guidelines</h2>
+            <p>Resources and assets to help you work with the OpenCode brand.</p>
+            <button
+              data-component="download-button"
+              onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")}
+            >
+              Download all assets
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="square"
+                />
+              </svg>
+            </button>
+
+            <div data-component="brand-grid">
+              <div>
+                <img src={previewLogoLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoLightPng, "opencode-logo-light.png")}>
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}>
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewLogoDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoDarkPng, "opencode-logo-dark.png")}>
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoDarkSvg, "opencode-logo-dark.svg")}>
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")}
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")}
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")}
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")
+                    }
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg")
+                    }
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")
+                    }
+                  >
+                    PNG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() =>
+                      downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg")
+                    }
+                  >
+                    SVG
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+        <Footer />
+      </div>
+      <Legal />
+    </main>
+  )
+}

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

@@ -0,0 +1,550 @@
+::selection {
+  background: var(--color-background-interactive);
+  color: var(--color-text-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-background-interactive);
+    color: var(--color-text-inverted);
+  }
+}
+
+[data-page="enterprise"] {
+  --color-background: hsl(0, 20%, 99%);
+  --color-background-weak: hsl(0, 8%, 97%);
+  --color-background-weak-hover: hsl(0, 8%, 94%);
+  --color-background-strong: hsl(0, 5%, 12%);
+  --color-background-strong-hover: hsl(0, 5%, 18%);
+  --color-background-interactive: hsl(62, 84%, 88%);
+  --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+  --color-text: hsl(0, 1%, 39%);
+  --color-text-weak: hsl(0, 1%, 60%);
+  --color-text-weaker: hsl(30, 2%, 81%);
+  --color-text-strong: hsl(0, 5%, 12%);
+  --color-text-inverted: hsl(0, 20%, 99%);
+  --color-text-success: hsl(119, 100%, 35%);
+
+  --color-border: hsl(30, 2%, 81%);
+  --color-border-weak: hsl(0, 1%, 85%);
+
+  --color-icon: hsl(0, 1%, 55%);
+  --color-success: hsl(142, 76%, 36%);
+
+  background: var(--color-background);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  padding-bottom: 5rem;
+
+  @media (prefers-color-scheme: dark) {
+    --color-background: hsl(0, 9%, 7%);
+    --color-background-weak: hsl(0, 6%, 10%);
+    --color-background-weak-hover: hsl(0, 6%, 15%);
+    --color-background-strong: hsl(0, 15%, 94%);
+    --color-background-strong-hover: hsl(0, 15%, 97%);
+    --color-background-interactive: hsl(62, 100%, 90%);
+    --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+    --color-text: hsl(0, 4%, 71%);
+    --color-text-weak: hsl(0, 2%, 49%);
+    --color-text-weaker: hsl(0, 3%, 28%);
+    --color-text-strong: hsl(0, 15%, 94%);
+    --color-text-inverted: hsl(0, 9%, 7%);
+    --color-text-success: hsl(119, 60%, 72%);
+
+    --color-border: hsl(0, 3%, 28%);
+    --color-border-weak: hsl(0, 4%, 23%);
+
+    --color-icon: hsl(10, 3%, 43%);
+    --color-success: hsl(142, 76%, 46%);
+  }
+
+  /* Header and Footer styles - copied from index.css */
+  [data-component="top"] {
+    padding: 24px 5rem;
+    height: 80px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--color-background);
+    border-bottom: 1px solid var(--color-border-weak);
+    z-index: 10;
+
+    @media (max-width: 60rem) {
+      padding: 24px 1.5rem;
+    }
+
+    img {
+      height: 34px;
+      width: auto;
+    }
+
+    [data-component="nav-desktop"] {
+      ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 48px;
+        li {
+          display: inline-block;
+          a {
+            text-decoration: none;
+            span {
+              color: var(--color-text-weak);
+            }
+          }
+          a:hover {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+            text-decoration-thickness: 1px;
+          }
+        }
+      }
+
+      @media (max-width: 40rem) {
+        display: none;
+      }
+    }
+
+    [data-component="nav-mobile"] {
+      button > svg {
+        color: var(--color-icon);
+      }
+    }
+
+    [data-component="nav-mobile-toggle"] {
+      border: none;
+      background: none;
+      outline: none;
+      height: 40px;
+      width: 40px;
+      cursor: pointer;
+      margin-right: -8px;
+    }
+
+    [data-component="nav-mobile-toggle"]:hover {
+      background: var(--color-background-weak);
+    }
+
+    [data-component="nav-mobile"] {
+      display: none;
+
+      @media (max-width: 40rem) {
+        display: block;
+
+        [data-component="nav-mobile-icon"] {
+          cursor: pointer;
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-component="nav-mobile-menu-list"] {
+          position: fixed;
+          background: var(--color-background);
+          top: 80px;
+          left: 0;
+          right: 0;
+          height: 100vh;
+
+          ul {
+            list-style: none;
+            padding: 20px 0;
+
+            li {
+              a {
+                text-decoration: none;
+                padding: 20px;
+                display: block;
+
+                span {
+                  color: var(--color-text-weak);
+                }
+              }
+
+              a:hover {
+                background: var(--color-background-weak);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    [data-slot="logo dark"] {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="logo light"] {
+        display: none;
+      }
+      [data-slot="logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="footer"] {
+    border-top: 1px solid var(--color-border-weak);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 65rem) {
+      border-bottom: 1px solid var(--color-border-weak);
+    }
+
+    [data-slot="cell"] {
+      flex: 1;
+      text-align: center;
+
+      a {
+        text-decoration: none;
+        padding: 2rem 0;
+        width: 100%;
+        display: block;
+
+        span {
+          color: var(--color-text-weak);
+
+          @media (max-width: 40rem) {
+            display: none;
+          }
+        }
+      }
+
+      a:hover {
+        background: var(--color-background-weak);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-thickness: 1px;
+      }
+    }
+
+    [data-slot="cell"] + [data-slot="cell"] {
+      border-left: 1px solid var(--color-border-weak);
+
+      @media (max-width: 40rem) {
+        border-left: none;
+      }
+    }
+
+    /* Mobile: third column on its own row */
+    @media (max-width: 25rem) {
+      flex-wrap: wrap;
+
+      [data-slot="cell"] {
+        flex: 1 0 100%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-weak);
+      }
+
+      [data-slot="cell"]:nth-child(1) {
+        border-top: none;
+      }
+    }
+  }
+
+  [data-component="container"] {
+    max-width: 67.5rem;
+    margin: 0 auto;
+    border: 1px solid var(--color-border-weak);
+    border-top: none;
+
+    @media (max-width: 65rem) {
+      border: none;
+    }
+  }
+
+  [data-component="content"] {
+  }
+
+  [data-component="enterprise-content"] {
+    padding: 4rem 0;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 0;
+    }
+  }
+
+  [data-component="enterprise-columns"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    padding: 4rem 5rem;
+
+    @media (max-width: 80rem) {
+      gap: 3rem;
+    }
+
+    @media (max-width: 60rem) {
+      grid-template-columns: 1fr;
+      gap: 3rem;
+      padding: 2rem 1.5rem;
+    }
+  }
+
+  [data-component="enterprise-column-1"] {
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin: 2rem 0 1rem 0;
+    }
+
+    p {
+      line-height: 1.6;
+      margin-bottom: 1.5rem;
+      color: var(--color-text);
+    }
+
+    [data-component="testimonial"] {
+      margin-top: 4rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+
+      [data-component="quotation"] {
+        svg {
+          margin-bottom: 1rem;
+          opacity: 20%;
+        }
+      }
+
+      [data-component="testimonial-logo"] {
+        svg {
+          margin-top: 1.5rem;
+        }
+      }
+    }
+  }
+
+  [data-component="enterprise-column-2"] {
+    [data-component="enterprise-form"] {
+      padding: 0;
+
+      h2 {
+        font-size: 1.5rem;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 1.5rem;
+      }
+
+      [data-component="form-group"] {
+        margin-bottom: 1.5rem;
+
+        label {
+          display: block;
+          font-weight: 500;
+          color: var(--color-text-weak);
+          margin-bottom: 0.5rem;
+          font-size: 0.875rem;
+        }
+
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus,
+        input:-webkit-autofill:active {
+          transition: background-color 5000000s ease-in-out 0s;
+        }
+
+        input:-webkit-autofill {
+          -webkit-text-fill-color: var(--color-text-strong) !important;
+        }
+
+        input:-moz-autofill {
+          -moz-text-fill-color: var(--color-text-strong) !important;
+        }
+
+        input,
+        textarea {
+          width: 100%;
+          padding: 0.75rem;
+          border: 1px solid var(--color-border-weak);
+          border-radius: 4px;
+          background: var(--color-background-weak);
+          color: var(--color-text-strong);
+          font-family: inherit;
+
+          &::placeholder {
+            color: var(--color-text-weak);
+          }
+
+          &:focus {
+            background: var(--color-background-interactive-weaker);
+            outline: none;
+            border: none;
+            color: var(--color-text-strong);
+            border: 1px solid var(--color-background-strong);
+            box-shadow: 0 0 0 3px var(--color-background-interactive);
+
+            @media (prefers-color-scheme: dark) {
+              box-shadow: none;
+              border: 1px solid var(--color-background-interactive);
+            }
+          }
+        }
+
+        textarea {
+          resize: vertical;
+          min-height: 120px;
+        }
+      }
+
+      [data-component="submit-button"] {
+        padding: 0.5rem 1.5rem;
+        background: var(--color-background-strong);
+        color: var(--color-text-inverted);
+        border: none;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        &:hover:not(:disabled) {
+          background: var(--color-background-strong-hover);
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
+
+      [data-component="success-message"] {
+        margin-top: 1rem;
+        padding: 1rem 0;
+        color: var(--color-text-success);
+        text-align: left;
+      }
+    }
+  }
+
+  [data-component="faq"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: 4rem 5rem;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    [data-slot="section-title"] {
+      margin-bottom: 24px;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 12px;
+      }
+
+      p {
+        margin-bottom: 12px;
+        color: var(--color-text);
+      }
+    }
+
+    ul {
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin-bottom: 24px;
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+    }
+
+    [data-slot="faq-question"] {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 8px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+
+      [data-slot="faq-icon-plus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: block;
+        }
+        [data-expanded] & {
+          display: none;
+        }
+      }
+      [data-slot="faq-icon-minus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: none;
+        }
+        [data-expanded] & {
+          display: block;
+        }
+      }
+      [data-slot="faq-question-text"] {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+
+    [data-slot="faq-answer"] {
+      margin-left: 40px;
+      margin-bottom: 32px;
+      color: var(--color-text);
+    }
+  }
+
+  [data-component="legal"] {
+    color: var(--color-text-weak);
+    text-align: center;
+    padding: 2rem 5rem;
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    a {
+      color: var(--color-text-weak);
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
+  }
+
+  a {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,268 @@
+import "./index.css"
+import { Title, Meta } from "@solidjs/meta"
+import { createSignal, Show } from "solid-js"
+import { Header } from "~/component/header"
+import { Footer } from "~/component/footer"
+import { Legal } from "~/component/legal"
+import { Faq } from "~/component/faq"
+
+export default function Enterprise() {
+  const [formData, setFormData] = createSignal({
+    name: "",
+    role: "",
+    email: "",
+    message: "",
+  })
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [showSuccess, setShowSuccess] = createSignal(false)
+
+  const handleInputChange = (field: string) => (e: Event) => {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement
+    setFormData((prev) => ({ ...prev, [field]: target.value }))
+  }
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      const response = await fetch("/api/enterprise", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData()),
+      })
+
+      if (response.ok) {
+        setShowSuccess(true)
+        setFormData({
+          name: "",
+          role: "",
+          email: "",
+          message: "",
+        })
+        setTimeout(() => setShowSuccess(false), 5000)
+      }
+    } catch (error) {
+      console.error("Failed to submit form:", error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <main data-page="enterprise">
+      <Title>OpenCode | Enterprise solutions for your organisation</Title>
+      <Meta name="description" content="Contact OpenCode for enterprise solutions" />
+      <div data-component="container">
+        <Header />
+
+        <div data-component="content">
+          <section data-component="enterprise-content">
+            <div data-component="enterprise-columns">
+              <div data-component="enterprise-column-1">
+                <h2>Your code is yours</h2>
+                <p>
+                  OpenCode operates securely inside your organization with no data or context stored
+                  and no licensing restrictions or ownership claims. Start a trial with your team,
+                  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"
+                      >
+                        <path
+                          d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    Thanks to OpenCode, we found a way to create software to track all our assets —
+                    even the imaginary ones.
+                    <div data-component="testimonial-logo">
+                      <svg
+                        width="80"
+                        height="79"
+                        viewBox="0 0 80 79"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M0 39.3087L10.0579 29.251L15.6862 34.7868L13.7488 36.7248L10.3345 33.2186L8.48897 35.0639L11.8111 38.4781L9.96557 40.4156L6.55181 37.0018L4.06028 39.4928L7.56674 42.9991L5.62884 44.845L0 39.3087Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M17.7182 36.8164L20.2094 39.4003L16.6108 46.9666L22.2393 41.3374L24.3615 43.46L14.2118 53.5179L11.9047 51.1187L15.4112 43.3677L9.78254 49.0888L7.66016 46.9666L17.7182 36.8164Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M42.8139 61.915L45.3055 64.4064L41.6145 71.9731L47.243 66.3441L49.3652 68.4663L39.3077 78.5244L36.9088 76.1252L40.5072 68.374L34.7866 74.0953L32.6641 71.9731L42.8139 61.915Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M16.4258 55.7324L26.4833 45.582L28.6061 47.7042C31.0049 50.1034 32.3892 51.9497 30.1746 54.1642C28.7902 55.548 27.6831 56.0094 26.1145 54.9016L26.0222 54.994C27.2218 56.1941 26.9448 57.1162 25.4688 58.5931L23.9 60.1615C23.4383 60.6232 22.8847 61.2693 22.7927 62.0067L20.6705 59.8845C20.7625 59.146 21.3161 58.5008 21.778 58.1316L23.5307 56.3788C24.269 55.6403 23.715 54.2555 23.254 53.8872L22.8847 53.4256L18.548 57.7623L16.4258 55.7324ZM24.3611 51.9495C25.4689 53.0563 26.4833 53.3332 27.4984 52.3178C28.5134 51.3957 28.2367 50.3802 27.1295 49.1812L24.3611 51.9495Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M33.4952 66.9899C31.096 69.3891 28.8815 68.4659 27.4047 66.9899C26.021 65.6062 25.0978 63.3907 27.4972 60.9003L31.8336 56.6548C34.2333 54.2556 36.4478 55.0864 37.9241 56.5635C39.308 58.0396 40.2311 60.2541 37.8315 62.6531L33.4952 66.9899ZM29.0659 63.5752C28.6048 64.0369 28.6048 64.7753 29.1583 65.3292C29.6196 65.8821 30.4502 65.7897 30.8194 65.4215L36.2633 59.9769C36.7246 59.6076 36.7246 58.7779 36.171 58.3164C35.7097 57.7626 34.8791 57.7626 34.5101 58.2241L29.0659 63.5752Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M78.5267 39.308L68.2845 29.0654L47.5231 49.735L49.6453 51.8572L68.2845 33.2179L74.3746 39.308L47.2461 66.3435L49.3683 68.4657L78.5267 39.308Z"
+                          fill="#0083C6"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M49.6443 51.8577L43.3695 45.4902L64.0386 24.8215L53.7969 14.4873L33.0352 35.2482L35.1574 37.3705L53.7969 18.7315L59.7947 24.8215L39.1251 45.4902L47.5221 53.9799L49.6443 51.8577Z"
+                          fill="#2D9C5C"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M35.1564 37.3706L28.7896 31.0038L49.5515 10.3347L39.3088 0L10.0586 29.2507L12.1804 31.2804L39.3088 4.24476L45.3066 10.3347L24.6377 31.0038L33.0342 39.4008L35.1564 37.3706Z"
+                          fill="#E92A35"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M77.2332 52.4105C76.0336 52.4105 75.111 51.4884 75.111 50.196C75.111 48.9046 76.0336 47.9814 77.2332 47.9814C78.3405 47.9814 79.263 48.9046 79.263 50.196C79.263 51.4884 78.3405 52.4105 77.2332 52.4105ZM77.2332 52.9643C78.7098 52.9643 80.0015 51.6729 80.0015 50.196C80.0015 48.6276 78.7096 47.4287 77.2332 47.4287C75.6644 47.4287 74.4648 48.6278 74.4648 50.196C74.4647 51.6731 75.6643 52.9643 77.2332 52.9643ZM76.1259 51.7653H76.6797V50.3804H77.0485L77.8788 51.7653H78.4332L77.6023 50.3804C78.1558 50.2881 78.4332 50.0122 78.4332 49.5507C78.4332 48.9046 78.0633 48.6276 77.3253 48.6276H76.1257V51.7653H76.1259ZM76.6797 49.0892H77.2332C77.5102 49.0892 77.8788 49.0892 77.8788 49.4586C77.8788 49.9202 77.6023 49.9202 77.2332 49.9202H76.6797V49.0892Z"
+                          fill="#0083C6"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </Show>
+              </div>
+
+              <div data-component="enterprise-column-2">
+                <div data-component="enterprise-form">
+                  <form onSubmit={handleSubmit}>
+                    <div data-component="form-group">
+                      <label for="name">Full name</label>
+                      <input
+                        id="name"
+                        type="text"
+                        required
+                        value={formData().name}
+                        onInput={handleInputChange("name")}
+                        placeholder="Jeff Bezos"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="role">Role</label>
+                      <input
+                        id="role"
+                        type="text"
+                        required
+                        value={formData().role}
+                        onInput={handleInputChange("role")}
+                        placeholder="Executive Chairman"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="email">Company email</label>
+                      <input
+                        id="email"
+                        type="email"
+                        required
+                        value={formData().email}
+                        onInput={handleInputChange("email")}
+                        placeholder="jeff@amazon.com"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="message">What problem are you trying to solve?</label>
+                      <textarea
+                        id="message"
+                        required
+                        rows={5}
+                        value={formData().message}
+                        onInput={handleInputChange("message")}
+                        placeholder="We need help with..."
+                      />
+                    </div>
+
+                    <button type="submit" disabled={isSubmitting()} data-component="submit-button">
+                      {isSubmitting() ? "Sending..." : "Send"}
+                    </button>
+                  </form>
+
+                  {showSuccess() && (
+                    <div data-component="success-message">
+                      Message sent, we'll be in touch soon.
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="faq">
+            <div data-slot="section-title">
+              <h3>FAQ</h3>
+            </div>
+            <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.
+                </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.
+                </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.
+                </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.
+                </Faq>
+              </li>
+            </ul>
+          </section>
+        </div>
+        <Footer />
+      </div>
+      <Legal />
+    </main>
+  )
+}

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

@@ -56,7 +56,6 @@ body {
   }
 }
 
-
 @supports (background: -webkit-named-image(i)) {
   [data-page="opencode"] {
     border-top: 1px solid var(--color-border-weak);
@@ -118,7 +117,6 @@ body {
       display: none !important;
     }
 
-
     [data-component="growth-stat"] {
       display: flex;
       flex-direction: column;
@@ -149,14 +147,12 @@ body {
             display: none;
           }
         }
-
       }
 
-
       [data-component="stat-illustration"] {
-      width: 100%;
-      height: 100%;
-      display: block;
+        width: 100%;
+        height: 100%;
+        display: block;
 
         svg {
           margin: 0;
@@ -164,10 +160,9 @@ body {
           height: auto;
           display: block;
         }
+      }
     }
   }
-  }
-
 
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
@@ -184,7 +179,6 @@ body {
     -moz-text-fill-color: var(--color-text-strong) !important;
   }
 
-
   [data-component="container"] {
     max-width: 67.5rem;
     margin: 0 auto;
@@ -328,10 +322,10 @@ body {
     display: flex;
     flex-direction: column;
     max-width: 100%;
-    padding: calc(var(--vertical-padding)*2) var(--padding);
+    padding: calc(var(--vertical-padding) * 2) var(--padding);
 
     @media (max-width: 30rem) {
-      padding: var(--vertical-padding) var(--padding)
+      padding: var(--vertical-padding) var(--padding);
     }
 
     @media (prefers-color-scheme: dark) {
@@ -352,7 +346,6 @@ body {
     @media (max-width: 550px) {
       width: calc(100vw - 48px);
     }
-
   }
 
   [data-component="tabs"] {
@@ -368,7 +361,7 @@ body {
       padding: 0 20px;
 
       @media (max-width: 60rem) {
-        gap: 20px;
+        gap: 32px;
         overflow-x: auto;
         width: 100%;
       }
@@ -443,7 +436,6 @@ body {
           @media (max-width: 35rem) {
             width: calc(100% - 40px) !important;
           }
-
         }
 
         [data-slot="highlight"] {
@@ -496,7 +488,6 @@ body {
       @media (max-width: 60rem) {
         font-size: 22px;
       }
-
     }
 
     p {
@@ -579,7 +570,6 @@ body {
     margin-bottom: 24px;
     max-width: 100%;
 
-
     div {
       display: flex;
       gap: 12px;
@@ -827,16 +817,12 @@ body {
         outline: none;
         border: none;
         color: var(--color-text-strong);
-
-        border: 1px solid var(--color-background-strong); /* Tailwind blue-600 as example */
-
-        /* Tailwind-style ring */
+        border: 1px solid var(--color-background-strong);
         box-shadow: 0 0 0 3px var(--color-background-interactive);
-        /* mimics "ring-2 ring-blue-600/50" */
 
         @media (prefers-color-scheme: dark) {
           box-shadow: none;
-          border: 1px solid var(--color-background-interactive)
+          border: 1px solid var(--color-background-interactive);
         }
       }
 
@@ -896,7 +882,6 @@ body {
         margin-top: 2px;
       }
 
-
       [data-slot="faq-icon-plus"] {
         flex-shrink: 0;
         color: var(--color-text-weak);
@@ -1025,7 +1010,6 @@ body {
   }
 
   [data-component="copy-status"] {
-
     [data-slot="copy"] {
       display: block;
       width: var(--space-4);
@@ -1058,12 +1042,10 @@ body {
       border-bottom: 1px solid var(--color-border-weak);
     }
 
-
     [data-slot="cell"] {
       flex: 1;
       text-align: center;
 
-
       a {
         text-decoration: none;
         padding: 2rem 0;
@@ -1076,7 +1058,6 @@ body {
           @media (max-width: 40rem) {
             display: none;
           }
-
         }
       }
 
@@ -1115,10 +1096,18 @@ body {
   [data-component="legal"] {
     color: var(--color-text-weak);
     text-align: center;
+    display: flex;
+    gap: 32px;
+    justify-content: center;
 
     a {
       color: var(--color-text-weak);
       text-decoration: none;
     }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
   }
 }

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

@@ -219,8 +219,8 @@ export default function Home() {
               <div>
                 <span>[*]</span>
                 <p>
-                  With over <strong>26,000</strong> GitHub stars, <strong>188</strong> contributors, and almost{" "}
-                  <strong>3,000</strong> commits, OpenCode is used and trusted by over <strong>200,000</strong>{" "}
+                  With over <strong>29,000</strong> GitHub stars, <strong>230</strong> contributors, and almost{" "}
+                  <strong>3,500</strong> commits, OpenCode is used and trusted by over <strong>250,000</strong>{" "}
                   developers every month.
                 </p>
               </div>
@@ -274,7 +274,7 @@ export default function Home() {
                     </svg>
                   </div>
                   <span>
-                    <figure>Fig 1.</figure> <strong>26K</strong> GitHub Stars
+                    <figure>Fig 1.</figure> <strong>29K</strong> GitHub Stars
                   </span>
                 </div>
 
@@ -577,7 +577,7 @@ export default function Home() {
                     </svg>
                   </div>
                   <span>
-                    <figure>Fig 2.</figure> <strong>188</strong> Contributors
+                    <figure>Fig 2.</figure> <strong>230</strong> Contributors
                   </span>
                 </div>
 
@@ -619,7 +619,7 @@ export default function Home() {
                     </svg>
                   </div>
                   <span>
-                    <figure>Fig 3.</figure> <strong>200K</strong> Monthly Devs
+                    <figure>Fig 3.</figure> <strong>250K</strong> Monthly Devs
                   </span>
                 </div>
               </div>

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

@@ -53,7 +53,8 @@ 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) {
@@ -69,7 +70,18 @@ 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")
+
+      const oldBillingInfo = await Database.use((tx) =>
+        tx
+          .select({
+            customerID: BillingTable.customerID,
+          })
+          .from(BillingTable)
+          .where(eq(BillingTable.workspaceID, workspaceID))
+          .then((rows) => rows[0]),
+      )
 
       await Database.transaction(async (tx) => {
         await tx
@@ -80,9 +92,14 @@ export async function POST(input: APIEvent) {
             paymentMethodID: paymentMethod.id,
             paymentMethodLast4: paymentMethod.card?.last4 ?? null,
             paymentMethodType: paymentMethod.type,
-            reload: true,
-            reloadError: null,
-            timeReloadError: null,
+            // enable reload if first time enabling billing
+            ...(oldBillingInfo?.customerID
+              ? {}
+              : {
+                  reload: true,
+                  reloadError: null,
+                  timeReloadError: null,
+                }),
           })
           .where(eq(BillingTable.workspaceID, workspaceID))
         await tx.insert(PaymentTable).values({
@@ -119,7 +136,12 @@ 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/workspace/[id]/billing/billing-section.module.css

@@ -4,9 +4,6 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
 
     p {
       color: var(--color-danger);
@@ -24,27 +21,65 @@
     }
   }
 
-  [data-slot="payment"] {
+  [data-slot="section-content"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    min-width: 14.5rem;
-    width: fit-content;
+  }
+
+  [data-slot="balance-display"] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
 
     @media (max-width: 30rem) {
-      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+    }
+
+    [data-slot="balance-amount"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      background-color: var(--color-bg-surface);
+      align-self: stretch;
+
+      [data-slot="balance-label"] {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+        margin-top: var(--space-2);
+        font-weight: 400;
+      }
+
+      [data-slot="balance-value"] {
+        font-size: var(--font-size-2xl);
+        font-weight: 600;
+        color: var(--color-text);
+      }
+    }
+
+    [data-slot="balance-right-section"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      flex: 1;
     }
 
     [data-slot="credit-card"] {
-      padding: var(--space-3-5) var(--space-4);
+      padding: var(--space-2) var(--space-4);
       background-color: var(--color-bg-surface);
       border-radius: var(--border-radius-sm);
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      gap: var(--space-3);
+      min-width: 150px;
+      align-self: flex-start;
 
       [data-slot="card-icon"] {
         display: flex;
@@ -56,19 +91,19 @@
         display: flex;
         align-items: baseline;
         gap: var(--space-1);
+        flex: 1;
+        justify-content: flex-end;
 
         [data-slot="secret"] {
-          position: relative;
-          bottom: 2px;
-          font-size: var(--font-size-lg);
+          font-size: var(--font-size-sm);
           color: var(--color-text-muted);
           font-weight: 400;
         }
 
         [data-slot="number"] {
-          font-size: var(--font-size-3xl);
+          font-size: var(--font-size-sm);
           font-weight: 500;
-          color: var(--color-text);
+          color: var(--color-text-muted);
         }
 
         [data-slot="type"] {
@@ -77,41 +112,23 @@
           color: var(--color-text-muted);
         }
       }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
     }
 
-    [data-slot="button-row"] {
-      display: flex;
-      gap: var(--space-2);
-      align-items: center;
-
-      @media (max-width: 30rem) {
-        flex-direction: column;
-
-        >button {
-          width: 100%;
-        }
-      }
-
-      [data-slot="create-form"] {
-        margin: 0;
-      }
-
-      /* Make Enable Billing button full width when it's the only button */
-      >button {
-        flex: 1;
-      }
+    button {
+      align-self: flex-start;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
   }
 
-  [data-slot="usage"] {
-    p {
-      font-size: var(--font-size-sm);
-      line-height: 1.5;
-      color: var(--color-text-secondary);
-
-      b {
-        font-weight: 600;
-      }
-    }
+  [data-slot="enable-billing-button"] {
+    align-self: flex-start;
+    padding: var(--space-4);
+    min-width: 150px;
   }
 }

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

@@ -1,60 +1,24 @@
-import { json, query, action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
+import { action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { Billing } from "@opencode-ai/console-core/billing.js"
 import { withActor } from "~/context/auth.withActor"
 import { IconCreditCard, IconStripe } from "~/component/icon"
 import styles from "./billing-section.module.css"
-import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
-import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
-import { createCheckoutUrl } from "../../common"
-
-const reload = action(async (form: FormData) => {
-  "use server"
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  return json(await withActor(() => Billing.reload(), workspaceID), { revalidate: getBillingInfo.key })
-}, "billing.reload")
-
-const setReload = action(async (form: FormData) => {
-  "use server"
-  const workspaceID = form.get("workspaceID")?.toString()
-  if (!workspaceID) return { error: "Workspace ID is required" }
-  const reload = form.get("reload")?.toString() === "true"
-  return json(
-    await Database.use((tx) =>
-      tx
-        .update(BillingTable)
-        .set({
-          reload,
-        })
-        .where(eq(BillingTable.workspaceID, workspaceID)),
-    ),
-    { revalidate: getBillingInfo.key },
-  )
-}, "billing.setReload")
+import { createCheckoutUrl, queryBillingInfo } from "../../common"
 
 const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
   "use server"
   return withActor(() => Billing.generateSessionUrl({ returnUrl }), workspaceID)
 }, "sessionUrl")
 
-const getBillingInfo = query(async (workspaceID: string) => {
-  "use server"
-  return withActor(async () => {
-    return await Billing.get()
-  }, workspaceID)
-}, "billing.get")
-
 export function BillingSection() {
   const params = useParams()
   // ORIGINAL CODE - COMMENTED OUT FOR TESTING
-  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const balanceInfo = createAsync(() => queryBillingInfo(params.id))
   const createCheckoutUrlAction = useAction(createCheckoutUrl)
   const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
   const createSessionUrlAction = useAction(createSessionUrl)
   const createSessionUrlSubmission = useSubmission(createSessionUrl)
-  const setReloadSubmission = useSubmission(setReload)
-  const reloadSubmission = useSubmission(reload)
 
   // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
 
@@ -112,143 +76,95 @@ export function BillingSection() {
     return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
   })
 
-  const hasBalance = createMemo(() => {
-    return (balanceInfo()?.balance ?? 0) > 0 && balanceAmount() !== "0.00"
-  })
-
   return (
     <section class={styles.root}>
       <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">
-        <Show when={balanceInfo()?.reloadError}>
-          <div data-slot="reload-error">
-            <p>
-              Reload failed at{" "}
-              {balanceInfo()?.timeReloadError!.toLocaleString("en-US", {
-                month: "short",
-                day: "numeric",
-                hour: "numeric",
-                minute: "2-digit",
-                second: "2-digit",
-              })}
-              . Reason: {balanceInfo()?.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} />
-              <button data-color="primary" type="submit" disabled={reloadSubmission.pending}>
-                {reloadSubmission.pending ? "Reloading..." : "Reload"}
-              </button>
-            </form>
+        <div data-slot="balance-display">
+          <div data-slot="balance-amount">
+            <span data-slot="balance-value">
+              ${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}
+            </span>
+            <span data-slot="balance-label">Current Balance</span>
           </div>
-        </Show>
-        <div data-slot="payment">
-          <div data-slot="credit-card">
-            <div data-slot="card-icon">
-              <Switch fallback={<IconCreditCard style={{ width: "32px", height: "32px" }} />}>
-                <Match when={balanceInfo()?.paymentMethodType === "link"}>
-                  <IconStripe style={{ width: "32px", height: "32px" }} />
-                </Match>
-              </Switch>
-            </div>
-            <div data-slot="card-details">
-              <Switch
-                fallback={
-                  <Show when={balanceInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
-                    <span data-slot="secret">••••</span>
-                    <span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
-                  </Show>
-                }
-              >
-                <Match when={balanceInfo()?.paymentMethodType === "link"}>
-                  <span data-slot="type">Linked to Stripe</span>
-                </Match>
-              </Switch>
-            </div>
-          </div>
-          <div data-slot="button-row">
-            <Show
-              when={balanceInfo()?.reload}
-              fallback={
-                <Show
-                  when={hasBalance()}
-                  fallback={
-                    <button
-                      data-color="primary"
-                      disabled={createCheckoutUrlSubmission.pending}
-                      onClick={async () => {
-                        const baseUrl = window.location.href
-                        const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-                        if (checkoutUrl) {
-                          window.location.href = checkoutUrl
-                        }
-                      }}
-                    >
-                      {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
-                    </button>
-                  }
-                >
-                  <form action={setReload} method="post" data-slot="create-form">
-                    <input type="hidden" name="workspaceID" value={params.id} />
-                    <input type="hidden" name="reload" value="true" />
-                    <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
-                      {setReloadSubmission.pending ? "Enabling..." : "Enable Billing"}
-                    </button>
-                  </form>
-                </Show>
-              }
-            >
+          <Show when={balanceInfo()?.customerID}>
+            <div data-slot="balance-right-section">
               <button
                 data-color="primary"
-                disabled={createSessionUrlSubmission.pending}
+                disabled={createCheckoutUrlSubmission.pending}
                 onClick={async () => {
                   const baseUrl = window.location.href
-                  const sessionUrl = await createSessionUrlAction(params.id, baseUrl)
-                  if (sessionUrl) {
-                    window.location.href = sessionUrl
+                  const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+                  if (checkoutUrl) {
+                    window.location.href = checkoutUrl
                   }
                 }}
               >
-                {createSessionUrlSubmission.pending ? "Loading..." : "Manage Payment Methods"}
+                {createCheckoutUrlSubmission.pending ? "Loading..." : "Add Balance"}
               </button>
-              <form action={setReload} method="post" data-slot="create-form">
-                <input type="hidden" name="workspaceID" value={params.id} />
-                <input type="hidden" name="reload" value="false" />
-                <button data-color="ghost" type="submit" disabled={setReloadSubmission.pending}>
-                  {setReloadSubmission.pending ? "Disabling..." : "Disable"}
+              <div data-slot="credit-card">
+                <div data-slot="card-icon">
+                  <Switch fallback={<IconCreditCard style={{ width: "24px", height: "24px" }} />}>
+                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                      <IconStripe style={{ width: "24px", height: "24px" }} />
+                    </Match>
+                  </Switch>
+                </div>
+                <div data-slot="card-details">
+                  <Switch>
+                    <Match when={balanceInfo()?.paymentMethodType === "card"}>
+                      <Show
+                        when={balanceInfo()?.paymentMethodLast4}
+                        fallback={<span data-slot="number">----</span>}
+                      >
+                        <span data-slot="secret">••••</span>
+                        <span data-slot="number">{balanceInfo()?.paymentMethodLast4}</span>
+                      </Show>
+                    </Match>
+                    <Match when={balanceInfo()?.paymentMethodType === "link"}>
+                      <span data-slot="type">Linked to Stripe</span>
+                    </Match>
+                  </Switch>
+                </div>
+                <button
+                  data-color="ghost"
+                  disabled={createSessionUrlSubmission.pending}
+                  onClick={async () => {
+                    const baseUrl = window.location.href
+                    const sessionUrl = await createSessionUrlAction(params.id, baseUrl)
+                    if (sessionUrl) {
+                      window.location.href = sessionUrl
+                    }
+                  }}
+                >
+                  {createSessionUrlSubmission.pending ? "Loading..." : "Manage"}
                 </button>
-              </form>
-            </Show>
-          </div>
+              </div>
+            </div>
+          </Show>
         </div>
-        <div data-slot="usage">
-          <Show when={!balanceInfo()?.reload}>
-            <Show
-              when={hasBalance()}
-              fallback={
-                <p>
-                  We'll load <b>$20</b> (+$1.23 processing fee) and reload it when it reaches <b>$5</b>.
-                </p>
+        <Show when={!balanceInfo()?.customerID}>
+          <button
+            data-slot="enable-billing-button"
+            data-color="primary"
+            disabled={createCheckoutUrlSubmission.pending}
+            onClick={async () => {
+              const baseUrl = window.location.href
+              const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+              if (checkoutUrl) {
+                window.location.href = checkoutUrl
               }
-            >
-              <p>
-                You have <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b> remaining in
-                your account. You can continue using the API with your remaining balance.
-              </p>
-            </Show>
-          </Show>
-          <Show when={balanceInfo()?.reload && !balanceInfo()?.reloadError}>
-            <p>
-              Your current balance is <b data-slot="value">${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
-              . We'll automatically reload <b>$20</b> (+$1.23 processing fee) when it reaches <b>$5</b>.
-            </p>
-          </Show>
-        </div>
+            }}
+          >
+            {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
+          </button>
+        </Show>
       </div>
     </section>
   )

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

@@ -1,21 +1,26 @@
 import { MonthlyLimitSection } from "./monthly-limit-section"
 import { BillingSection } from "./billing-section"
+import { ReloadSection } from "./reload-section"
 import { PaymentSection } from "./payment-section"
 import { Show } from "solid-js"
 import { createAsync, useParams } from "@solidjs/router"
-import { querySessionInfo } from "../../common"
+import { queryBillingInfo, querySessionInfo } from "../../common"
 
 export default function () {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
 
   return (
     <div data-page="workspace-[id]">
       <div data-slot="sections">
         <Show when={userInfo()?.isAdmin}>
           <BillingSection />
-          <MonthlyLimitSection />
-          <PaymentSection />
+          <Show when={billingInfo()?.customerID}>
+            <ReloadSection />
+            <MonthlyLimitSection />
+            <PaymentSection />
+          </Show>
         </Show>
       </div>
     </div>

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

@@ -0,0 +1,60 @@
+.root {
+  [data-slot="title-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  [data-slot="section-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="setting-row"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+
+    p {
+      flex: 1;
+      font-size: var(--font-size-sm);
+      line-height: 1.5;
+      color: var(--color-text-secondary);
+      margin: 0;
+
+      b {
+        font-weight: 600;
+      }
+    }
+
+    [data-slot="create-form"] {
+      margin: 0;
+    }
+  }
+
+  [data-slot="reload-error"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-top: var(--space-4);
+
+    p {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin: 0;
+      flex: 1;
+    }
+
+    [data-slot="create-form"] {
+      display: flex;
+      gap: var(--space-2);
+      margin: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+

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

@@ -0,0 +1,111 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { Billing } from "@opencode-ai/console-core/billing.js"
+import { Database, eq } from "@opencode-ai/console-core/drizzle/index.js"
+import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js"
+import styles from "./reload-section.module.css"
+
+const reload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(await withActor(() => Billing.reload(), workspaceID), {
+    revalidate: getBillingInfo.key,
+  })
+}, "billing.reload")
+
+const setReload = action(async (form: FormData) => {
+  "use server"
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const reloadValue = form.get("reload")?.toString() === "true"
+  return json(
+    await Database.use((tx) =>
+      tx
+        .update(BillingTable)
+        .set({
+          reload: reloadValue,
+          ...(reloadValue
+            ? {
+                reloadError: null,
+                timeReloadError: null,
+              }
+            : {}),
+        })
+        .where(eq(BillingTable.workspaceID, workspaceID)),
+    ),
+    { revalidate: getBillingInfo.key },
+  )
+}, "billing.setReload")
+
+const getBillingInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return await Billing.get()
+  }, workspaceID)
+}, "billing.get")
+
+export function ReloadSection() {
+  const params = useParams()
+  const balanceInfo = createAsync(() => getBillingInfo(params.id))
+  const setReloadSubmission = useSubmission(setReload)
+  const reloadSubmission = useSubmission(reload)
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Auto Reload</h2>
+        <div data-slot="title-row">
+          <Show
+            when={balanceInfo()?.reload}
+            fallback={
+              <p>Auto reload is disabled. Enable to automatically reload when balance is low.</p>
+            }
+          >
+            <p>
+              We'll automatically reload <b>$20</b> (+$1.23 processing fee) when it reaches{" "}
+              <b>$5</b>.
+            </p>
+          </Show>
+          <form action={setReload} method="post" data-slot="create-form">
+            <input type="hidden" name="workspaceID" value={params.id} />
+            <input type="hidden" name="reload" value={balanceInfo()?.reload ? "false" : "true"} />
+            <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
+              <Show
+                when={balanceInfo()?.reload}
+                fallback={setReloadSubmission.pending ? "Enabling..." : "Enable"}
+              >
+                {setReloadSubmission.pending ? "Disabling..." : "Disable"}
+              </Show>
+            </button>
+          </form>
+        </div>
+      </div>
+      <div data-slot="section-content">
+        <Show when={balanceInfo()?.reload && balanceInfo()?.reloadError}>
+          <div data-slot="reload-error">
+            <p>
+              Reload failed at{" "}
+              {balanceInfo()?.timeReloadError!.toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
+              . Reason: {balanceInfo()?.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} />
+              <button data-color="ghost" type="submit" disabled={reloadSubmission.pending}>
+                {reloadSubmission.pending ? "Retrying..." : "Retry"}
+              </button>
+            </form>
+          </div>
+        </Show>
+      </div>
+    </section>
+  )
+}

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

@@ -16,7 +16,7 @@ export function formatDateForTable(date: Date) {
     minute: "2-digit",
     hour12: true,
   }
-  return date.toLocaleDateString("en-GB", options).replace(",", ",")
+  return date.toLocaleDateString(undefined, options).replace(",", ",")
 }
 
 export function formatDateUTC(date: Date) {
@@ -62,15 +62,21 @@ 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")
 
-export const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
-  "use server"
-  return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
-}, "checkoutUrl")
+export const createCheckoutUrl = action(
+  async (workspaceID: string, successUrl: string, cancelUrl: string) => {
+    "use server"
+    return withActor(() => Billing.generateCheckoutUrl({ successUrl, cancelUrl }), workspaceID)
+  },
+  "checkoutUrl",
+)
 
 export const queryBillingInfo = query(async (workspaceID: string) => {
   "use server"

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

@@ -60,7 +60,6 @@ body {
   }
 }
 
-
 [data-page="zen"] {
   background: var(--color-background);
   --padding: 5rem;
@@ -112,9 +111,6 @@ body {
     -moz-text-fill-color: var(--color-text-strong) !important;
   }
 
-
-
-
   [data-component="container"] {
     max-width: 67.5rem;
     margin: 0 auto;
@@ -179,8 +175,6 @@ body {
       }
     }
 
-
-
     [data-component="nav-mobile-toggle"] {
       border: none;
       background: none;
@@ -258,14 +252,14 @@ body {
   [data-component="hero"] {
     display: flex;
     flex-direction: column;
-    padding: calc(var(--vertical-padding)*2) var(--padding);
+    padding: calc(var(--vertical-padding) * 2) var(--padding);
 
     [data-slot="zen logo dark"] {
       display: none;
     }
 
     @media (max-width: 30rem) {
-      padding: var(--vertical-padding) var(--padding)
+      padding: var(--vertical-padding) var(--padding);
     }
 
     @media (prefers-color-scheme: dark) {
@@ -295,8 +289,6 @@ body {
       }
     }
 
-
-
     p {
       color: var(--color-text);
       margin-bottom: 24px;
@@ -778,12 +770,10 @@ body {
       border-bottom: 1px solid var(--color-border-weak);
     }
 
-
     [data-slot="cell"] {
       flex: 1;
       text-align: center;
 
-
       a {
         text-decoration: none;
         padding: 2rem 0;
@@ -796,7 +786,6 @@ body {
           @media (max-width: 40rem) {
             display: none;
           }
-
         }
       }
 
@@ -835,10 +824,18 @@ body {
   [data-component="legal"] {
     color: var(--color-text-weak);
     text-align: center;
+    display: flex;
+    gap: 32px;
+    justify-content: center;
 
     a {
       color: var(--color-text-weak);
       text-decoration: none;
     }
+
+    a:hover {
+      color: var(--color-text);
+      text-decoration: underline;
+    }
   }
 }

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

@@ -13,7 +13,11 @@ import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
 import { ProviderTable } from "@opencode-ai/console-core/schema/provider.sql.js"
 import { logger } from "./logger"
 import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError } from "./error"
-import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
+import {
+  createBodyConverter,
+  createStreamPartConverter,
+  createResponseConverter,
+} from "./provider/provider"
 import { Format } from "./format"
 import { anthropicHelper } from "./provider/anthropic"
 import { openaiHelper } from "./provider/openai"
@@ -43,7 +47,11 @@ export async function handler(
     })
     const zenData = ZenData.list()
     const modelInfo = validateModel(zenData, body.model)
-    const providerInfo = selectProvider(zenData, modelInfo)
+    const providerInfo = selectProvider(
+      zenData,
+      modelInfo,
+      input.request.headers.get("x-real-ip") ?? "",
+    )
     const authInfo = await authenticate(modelInfo, providerInfo)
     validateBilling(modelInfo, authInfo)
     validateModelSettings(authInfo)
@@ -222,11 +230,19 @@ export async function handler(
     return { id: modelId, ...modelData }
   }
 
-  function selectProvider(zenData: ZenData, model: Awaited<ReturnType<typeof validateModel>>) {
+  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))
-    const provider = providers[Math.floor(Math.random() * providers.length)]
+
+    // Use last character of IP address to select a provider
+    const lastChar = ip.charCodeAt(ip.length - 1) || 0
+    const index = lastChar % providers.length
+    const provider = providers[index]
 
     if (!(provider.id in zenData.providers)) {
       throw new ModelError(`Provider ${provider.id} not supported`)
@@ -235,7 +251,11 @@ export async function handler(
     return {
       ...provider,
       ...zenData.providers[provider.id],
-      ...(provider.id === "anthropic" ? anthropicHelper : provider.id === "openai" ? openaiHelper : oaCompatHelper),
+      ...(provider.id === "anthropic"
+        ? anthropicHelper
+        : provider.id === "openai"
+          ? openaiHelper
+          : oaCompatHelper),
     }
   }
 
@@ -275,11 +295,20 @@ export async function handler(
         .from(KeyTable)
         .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
         .innerJoin(BillingTable, eq(BillingTable.workspaceID, KeyTable.workspaceID))
-        .innerJoin(UserTable, and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)))
-        .leftJoin(ModelTable, and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)))
+        .innerJoin(
+          UserTable,
+          and(eq(UserTable.workspaceID, KeyTable.workspaceID), eq(UserTable.id, KeyTable.userID)),
+        )
+        .leftJoin(
+          ModelTable,
+          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), eq(ModelTable.model, model.id)),
+        )
         .leftJoin(
           ProviderTable,
-          and(eq(ProviderTable.workspaceID, KeyTable.workspaceID), eq(ProviderTable.provider, providerInfo.id)),
+          and(
+            eq(ProviderTable.workspaceID, KeyTable.workspaceID),
+            eq(ProviderTable.provider, providerInfo.id),
+          ),
         )
         .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
         .then((rows) => rows[0]),
@@ -303,12 +332,20 @@ export async function handler(
   }
 
   function validateBilling(model: Model, authInfo: Awaited<ReturnType<typeof authenticate>>) {
-    if (!authInfo || authInfo.isFree) return
+    if (!authInfo) return
+    if (authInfo.provider?.credentials) return
+    if (authInfo.isFree) return
     if (model.allowAnonymous) return
 
     const billing = authInfo.billing
-    if (!billing.paymentMethodID) throw new CreditsError("No payment method")
-    if (billing.balance <= 0) throw new CreditsError("Insufficient balance")
+    if (!billing.paymentMethodID)
+      throw new CreditsError(
+        `No payment method. Add a payment method here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
+      )
+    if (billing.balance <= 0)
+      throw new CreditsError(
+        `Insufficient balance. Manage your billing here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
+      )
 
     const now = new Date()
     const currentYear = now.getUTCFullYear()
@@ -323,7 +360,7 @@ export async function handler(
       const dateMonth = billing.timeMonthlyUsageUpdated.getUTCMonth()
       if (currentYear === dateYear && currentMonth === dateMonth)
         throw new MonthlyLimitError(
-          `Your workspace has reached its monthly spending limit of $${billing.monthlyLimit}.`,
+          `Your workspace has reached its monthly spending limit of $${billing.monthlyLimit}. Manage your limits here: https://opencode.ai/workspace/${authInfo.workspaceID}/billing`,
         )
     }
 
@@ -336,7 +373,9 @@ export async function handler(
       const dateYear = authInfo.user.timeMonthlyUsageUpdated.getUTCFullYear()
       const dateMonth = authInfo.user.timeMonthlyUsageUpdated.getUTCMonth()
       if (currentYear === dateYear && currentMonth === dateMonth)
-        throw new UserLimitError(`You have reached your monthly spending limit of $${authInfo.user.monthlyLimit}.`)
+        throw new UserLimitError(
+          `You have reached your monthly spending limit of $${authInfo.user.monthlyLimit}. Manage your limits here: https://opencode.ai/workspace/${authInfo.workspaceID}/members`,
+        )
     }
   }
 
@@ -360,12 +399,19 @@ export async function handler(
     providerInfo: Awaited<ReturnType<typeof selectProvider>>,
     usage: any,
   ) {
-    const { inputTokens, outputTokens, reasoningTokens, cacheReadTokens, cacheWrite5mTokens, cacheWrite1hTokens } =
-      providerInfo.normalizeUsage(usage)
+    const {
+      inputTokens,
+      outputTokens,
+      reasoningTokens,
+      cacheReadTokens,
+      cacheWrite5mTokens,
+      cacheWrite1hTokens,
+    } = providerInfo.normalizeUsage(usage)
 
     const modelCost =
       modelInfo.cost200K &&
-      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) > 200_000
+      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) >
+        200_000
         ? modelInfo.cost200K
         : modelInfo.cost
 
@@ -416,7 +462,8 @@ export async function handler(
 
     if (!authInfo) return
 
-    const cost = authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
+    const cost =
+      authInfo.isFree || authInfo.provider?.credentials ? 0 : centsToMicroCents(totalCostInCent)
     await Database.transaction(async (tx) => {
       await tx.insert(UsageTable).values({
         workspaceID: authInfo.workspaceID,
@@ -456,7 +503,9 @@ export async function handler(
             `,
           timeMonthlyUsageUpdated: sql`now()`,
         })
-        .where(and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)))
+        .where(
+          and(eq(UserTable.workspaceID, authInfo.workspaceID), eq(UserTable.id, authInfo.user.id)),
+        )
     })
 
     await Database.use((tx) =>
@@ -483,7 +532,10 @@ export async function handler(
             eq(BillingTable.workspaceID, authInfo.workspaceID),
             eq(BillingTable.reload, true),
             lt(BillingTable.balance, centsToMicroCents(Billing.CHARGE_THRESHOLD)),
-            or(isNull(BillingTable.timeReloadLockedTill), lt(BillingTable.timeReloadLockedTill, sql`now()`)),
+            or(
+              isNull(BillingTable.timeReloadLockedTill),
+              lt(BillingTable.timeReloadLockedTill, sql`now()`),
+            ),
           ),
         ),
     )

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

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

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

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

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

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

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

@@ -95,7 +95,7 @@ export interface CommonUsage {
 }
 
 export interface CommonRequest {
-  model?: string
+  model: string
   max_tokens?: number
   temperature?: number
   top_p?: number

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

@@ -25,8 +25,8 @@ export async function GET(input: APIEvent) {
       object: "list",
       data: Object.entries(zenData.models)
         .filter(([id]) => !disabledModels.includes(id))
-        .map(([id, model]) => ({
-          id: `opencode/${id}`,
+        .map(([id, _model]) => ({
+          id,
           object: "model",
           created: Math.floor(Date.now() / 1000),
           owned_by: "opencode",
@@ -50,7 +50,10 @@ 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/core/migrations/0037_messy_jackal.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `billing` ADD `reload_trigger` int;--> statement-breakpoint
+ALTER TABLE `billing` ADD `reload_amount` int;

packages/console/core/migrations/meta/0037_snapshot.json

@@ -0,0 +1,983 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "8b7fa839-a088-408e-84a4-1a07325c0290",
+  "prevId": "5470c8b4-296d-47bd-85a7-88cfd3b71434",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "account_id_pk": {
+          "name": "account_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "auth": {
+      "name": "auth",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "enum('email','github','google')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "provider": {
+          "name": "provider",
+          "columns": [
+            "provider",
+            "subject"
+          ],
+          "isUnique": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "auth_id_pk": {
+          "name": "auth_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_type": {
+          "name": "payment_method_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_trigger": {
+          "name": "reload_trigger",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_amount": {
+          "name": "reload_amount",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_id": {
+          "name": "key_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "model": {
+      "name": "model",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "model_workspace_model": {
+          "name": "model_workspace_model",
+          "columns": [
+            "workspace_id",
+            "model"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "model_workspace_id_id_pk": {
+          "name": "model_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "provider": {
+      "name": "provider",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentials": {
+          "name": "credentials",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "workspace_provider": {
+          "name": "workspace_provider",
+          "columns": [
+            "workspace_id",
+            "provider"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "provider_workspace_id_id_pk": {
+          "name": "provider_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_account_id": {
+          "name": "user_account_id",
+          "columns": [
+            "workspace_id",
+            "account_id"
+          ],
+          "isUnique": true
+        },
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        },
+        "global_account_id": {
+          "name": "global_account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        },
+        "global_email": {
+          "name": "global_email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

packages/console/core/migrations/meta/_journal.json

@@ -260,6 +260,13 @@
       "when": 1760668952329,
       "tag": "0036_slimy_energizer",
       "breakpoints": true
+    },
+    {
+      "idx": 37,
+      "version": "5",
+      "when": 1761928273807,
+      "tag": "0037_messy_jackal",
+      "breakpoints": true
     }
   ]
 }

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "0.15.19",
+  "version": "1.0.15",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -14,7 +14,7 @@
     "drizzle-orm": "0.41.0",
     "postgres": "3.4.7",
     "stripe": "18.0.0",
-    "ulid": "3.0.0",
+    "ulid": "catalog:",
     "zod": "catalog:"
   },
   "exports": {

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

@@ -0,0 +1,33 @@
+import { Database, eq } from "../src/drizzle/index.js"
+import { AuthTable } from "../src/schema/auth.sql"
+
+// get input from command line
+const email = process.argv[2]
+if (!email) {
+  console.error("Usage: bun lookup-user.ts <email>")
+  process.exit(1)
+}
+
+const authData = await printTable("Auth", (tx) =>
+  tx.select().from(AuthTable).where(eq(AuthTable.subject, email)),
+)
+if (authData.length === 0) {
+  console.error("User not found")
+  process.exit(1)
+}
+
+await printTable("Auth", (tx) =>
+  tx.select().from(AuthTable).where(eq(AuthTable.accountID, authData[0].accountID)),
+)
+
+function printTable(
+  title: string,
+  callback: (tx: Database.TxOrDb) => Promise<any[]>,
+): Promise<any[]> {
+  return Database.use(async (tx) => {
+    const data = await callback(tx)
+    console.log(`== ${title} ==`)
+    console.table(data)
+    return data
+  })
+}

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

@@ -1,13 +1,21 @@
 import { Resource } from "@opencode-ai/console-resource"
-import { Database } from "@opencode-ai/console-core/drizzle/index.js"
-import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
-import { AccountTable } from "@opencode-ai/console-core/schema/account.sql.js"
-import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
-import { BillingTable, PaymentTable, UsageTable } from "@opencode-ai/console-core/schema/billing.sql.js"
-import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js"
+import { Database } from "../src/drizzle/index.js"
+import { UserTable } from "../src/schema/user.sql.js"
+import { AccountTable } from "../src/schema/account.sql.js"
+import { WorkspaceTable } from "../src/schema/workspace.sql.js"
+import { BillingTable, PaymentTable, UsageTable } from "../src/schema/billing.sql.js"
+import { KeyTable } from "../src/schema/key.sql.js"
 
 if (Resource.App.stage !== "frank") throw new Error("This script is only for frank")
 
-for (const table of [AccountTable, BillingTable, KeyTable, PaymentTable, UsageTable, UserTable, WorkspaceTable]) {
+for (const table of [
+  AccountTable,
+  BillingTable,
+  KeyTable,
+  PaymentTable,
+  UsageTable,
+  UserTable,
+  WorkspaceTable,
+]) {
   await Database.use((tx) => tx.delete(table))
 }

packages/console/core/src/billing.ts

@@ -13,7 +13,9 @@ export namespace Billing {
   export const CHARGE_NAME = "opencode credits"
   export const CHARGE_FEE_NAME = "processing fee"
   export const CHARGE_AMOUNT = 2000 // $20
+  export const CHARGE_AMOUNT_DOLLAR = 20
   export const CHARGE_FEE = 123 // Stripe fee 4.4% + $0.30
+  export const CHARGE_THRESHOLD_DOLLAR = 5
   export const CHARGE_THRESHOLD = 500 // $5
   export const stripe = () =>
     new Stripe(Resource.STRIPE_SECRET_KEY.value, {
@@ -142,17 +144,6 @@ export namespace Billing {
     })
   }
 
-  export const disableReload = async () => {
-    return await Database.use((tx) =>
-      tx
-        .update(BillingTable)
-        .set({
-          reload: false,
-        })
-        .where(eq(BillingTable.workspaceID, Actor.workspace())),
-    )
-  }
-
   export const setMonthlyLimit = fn(z.number(), async (input) => {
     return await Database.use((tx) =>
       tx

packages/console/core/src/schema/billing.sql.ts

@@ -16,6 +16,8 @@ export const BillingTable = mysqlTable(
     monthlyUsage: bigint("monthly_usage", { mode: "number" }),
     timeMonthlyUsageUpdated: utc("time_monthly_usage_updated"),
     reload: boolean("reload"),
+    reloadTrigger: int("reload_trigger"),
+    reloadAmount: int("reload_amount"),
     reloadError: varchar("reload_error", { length: 255 }),
     timeReloadError: utc("time_reload_error"),
     timeReloadLockedTill: utc("time_reload_locked_till"),

packages/console/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "0.15.19",
+  "version": "1.0.15",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/console/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "0.15.19",
+  "version": "1.0.15",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",

packages/desktop/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
     <title>OpenCode</title>
   </head>
-  <body class="overscroll-none select-none text-12-regular">
+  <body class="antialiased overscroll-none select-none text-12-regular">
     <!-- <script> -->
     <!--   ;(function () { -->
     <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->

packages/desktop/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "0.15.19",
+  "version": "1.0.15",
   "description": "",
   "type": "module",
   "scripts": {
+    "typecheck": "tsgo --noEmit",
     "start": "vite",
     "dev": "vite",
     "build": "vite build",
@@ -11,7 +12,6 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "opencode": "workspace:*",
     "@tailwindcss/vite": "catalog:",
     "@tsconfig/bun": "1.0.9",
     "@types/luxon": "3.7.1",
@@ -26,7 +26,6 @@
     "@kobalte/core": "catalog:",
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
-    "@pierre/precision-diffs": "0.3.5",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/active-element": "2.1.3",
     "@solid-primitives/event-bus": "1.1.2",

packages/desktop/public/favicon.svg

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg

packages/desktop/src/assets/favicon.svg

@@ -1,5 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="600" height="600" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M115 180H300V420H115V180ZM253.75 229.044H161.25V370.405H253.75V229.044Z" fill="white"/>
-<path d="M346.25 180H485V229.044H392.5V370.405H485V419.449H346.25V180Z" fill="white"/>
-</svg>

packages/desktop/src/components/assistant-message.tsx

@@ -1,362 +0,0 @@
-import type { Part, AssistantMessage, ReasoningPart, TextPart, ToolPart } from "@opencode-ai/sdk"
-import type { Tool } from "opencode/tool/tool"
-import type { ReadTool } from "opencode/tool/read"
-import { children, Component, createMemo, For, Match, Show, Switch, type JSX } from "solid-js"
-import { Dynamic } from "solid-js/web"
-import { Markdown } from "./markdown"
-import { Collapsible, Icon, IconProps } from "@opencode-ai/ui"
-import { getDirectory, getFilename } from "@/utils"
-import type { ListTool } from "opencode/tool/ls"
-import type { GlobTool } from "opencode/tool/glob"
-import type { GrepTool } from "opencode/tool/grep"
-import type { WebFetchTool } from "opencode/tool/webfetch"
-import type { TaskTool } from "opencode/tool/task"
-import type { BashTool } from "opencode/tool/bash"
-import type { EditTool } from "opencode/tool/edit"
-import type { WriteTool } from "opencode/tool/write"
-import { DiffChanges } from "./diff-changes"
-
-export function AssistantMessage(props: { message: AssistantMessage; parts: Part[] }) {
-  return (
-    <div class="w-full flex flex-col items-start gap-4">
-      <For each={props.parts}>
-        {(part) => {
-          const component = createMemo(() => PART_MAPPING[part.type as keyof typeof PART_MAPPING])
-          return (
-            <Show when={component()}>
-              <Dynamic component={component()} part={part as any} message={props.message} />
-            </Show>
-          )
-        }}
-      </For>
-    </div>
-  )
-}
-
-const PART_MAPPING = {
-  text: TextPart,
-  tool: ToolPart,
-  reasoning: ReasoningPart,
-}
-
-function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }) {
-  return null
-  // return (
-  //   <Show when={props.part.text.trim()}>
-  //     <div>{props.part.text}</div>
-  //   </Show>
-  // )
-}
-
-function TextPart(props: { part: TextPart; message: AssistantMessage }) {
-  return (
-    <Show when={props.part.text.trim()}>
-      <Markdown text={props.part.text.trim()} />
-    </Show>
-  )
-}
-
-function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
-  // const sync = useSync()
-
-  const component = createMemo(() => {
-    const render = ToolRegistry.render(props.part.tool) ?? GenericTool
-
-    const metadata = props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
-    const input = props.part.state.status === "completed" ? props.part.state.input : {}
-    // const permissions = sync.data.permission[props.message.sessionID] ?? []
-    // const permissionIndex = permissions.findIndex((x) => x.callID === props.part.callID)
-    // const permission = permissions[permissionIndex]
-
-    return (
-      <>
-        <Dynamic
-          component={render}
-          input={input}
-          tool={props.part.tool}
-          metadata={metadata}
-          // permission={permission?.metadata ?? {}}
-          output={props.part.state.status === "completed" ? props.part.state.output : undefined}
-        />
-        {/* <Show when={props.part.state.status === "error"}>{props.part.state.error.replace("Error: ", "")}</Show> */}
-      </>
-    )
-  })
-
-  return <Show when={component()}>{component()}</Show>
-}
-
-type TriggerTitle = {
-  title: string
-  subtitle?: string
-  args?: string[]
-  action?: JSX.Element
-}
-
-const isTriggerTitle = (val: any): val is TriggerTitle => {
-  return typeof val === "object" && val !== null && "title" in val && !(val instanceof Node)
-}
-
-function BasicTool(props: { icon: IconProps["name"]; trigger: TriggerTitle | JSX.Element; children?: JSX.Element }) {
-  const resolved = children(() => props.children)
-
-  return (
-    <Collapsible>
-      <Collapsible.Trigger>
-        <div class="w-full flex items-center self-stretch gap-5 justify-between">
-          <div class="w-full flex items-center self-stretch gap-5">
-            <Icon name={props.icon} size="small" />
-            <Switch>
-              <Match when={isTriggerTitle(props.trigger)}>
-                <div class="w-full flex items-center gap-2 justify-between">
-                  <div class="flex items-center gap-2">
-                    <span class="text-12-medium text-text-base capitalize">
-                      {(props.trigger as TriggerTitle).title}
-                    </span>
-                    <Show when={(props.trigger as TriggerTitle).subtitle}>
-                      <span class="text-12-medium text-text-weak">{(props.trigger as TriggerTitle).subtitle}</span>
-                    </Show>
-                    <Show when={(props.trigger as TriggerTitle).args?.length}>
-                      <For each={(props.trigger as TriggerTitle).args}>
-                        {(arg) => <span class="text-12-regular text-text-weaker">{arg}</span>}
-                      </For>
-                    </Show>
-                  </div>
-                  <Show when={(props.trigger as TriggerTitle).action}>{(props.trigger as TriggerTitle).action}</Show>
-                </div>
-              </Match>
-              <Match when={true}>{props.trigger as JSX.Element}</Match>
-            </Switch>
-          </div>
-          <Show when={resolved()}>
-            <Collapsible.Arrow />
-          </Show>
-        </div>
-      </Collapsible.Trigger>
-      <Show when={props.children}>
-        <Collapsible.Content>{props.children}</Collapsible.Content>
-      </Show>
-    </Collapsible>
-  )
-}
-
-function GenericTool(props: ToolProps<any>) {
-  return <BasicTool icon="mcp" trigger={{ title: props.tool }} />
-}
-
-type ToolProps<T extends Tool.Info> = {
-  input: Partial<Tool.InferParameters<T>>
-  metadata: Partial<Tool.InferMetadata<T>>
-  // permission: Record<string, any>
-  tool: string
-  output?: string
-}
-
-const ToolRegistry = (() => {
-  const state: Record<
-    string,
-    {
-      name: string
-      render?: Component<ToolProps<any>>
-    }
-  > = {}
-  function register<T extends Tool.Info>(input: { name: string; render?: Component<ToolProps<T>> }) {
-    state[input.name] = input
-    return input
-  }
-  return {
-    register,
-    render(name: string) {
-      return state[name]?.render
-    },
-  }
-})()
-
-ToolRegistry.register<typeof ReadTool>({
-  name: "read",
-  render(props) {
-    return (
-      <BasicTool
-        icon="glasses"
-        trigger={{ title: props.tool, subtitle: props.input.filePath ? getFilename(props.input.filePath) : "" }}
-      />
-    )
-  },
-})
-
-ToolRegistry.register<typeof ListTool>({
-  name: "list",
-  render(props) {
-    return (
-      <BasicTool icon="bullet-list" trigger={{ title: props.tool, subtitle: props.input.path || "/" }}>
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof GlobTool>({
-  name: "glob",
-  render(props) {
-    return (
-      <BasicTool
-        icon="magnifying-glass-menu"
-        trigger={{
-          title: props.tool,
-          subtitle: props.input.path || "/",
-          args: props.input.pattern ? ["pattern=" + props.input.pattern] : [],
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof GrepTool>({
-  name: "grep",
-  render(props) {
-    const args = []
-    if (props.input.pattern) args.push("pattern=" + props.input.pattern)
-    if (props.input.include) args.push("include=" + props.input.include)
-    return (
-      <BasicTool
-        icon="magnifying-glass-menu"
-        trigger={{
-          title: props.tool,
-          subtitle: props.input.path || "/",
-          args,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof WebFetchTool>({
-  name: "webfetch",
-  render(props) {
-    return (
-      <BasicTool
-        icon="window-cursor"
-        trigger={{
-          title: props.tool,
-          subtitle: props.input.url || "",
-          args: props.input.format ? ["format=" + props.input.format] : [],
-          action: (
-            <div class="size-6 flex items-center justify-center">
-              <Icon name="square-arrow-top-right" size="small" />
-            </div>
-          ),
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof TaskTool>({
-  name: "task",
-  render(props) {
-    return (
-      <BasicTool
-        icon="task"
-        trigger={{
-          title: `${props.input.subagent_type || props.tool} Agent`,
-          subtitle: props.input.description,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof BashTool>({
-  name: "bash",
-  render(props) {
-    return (
-      <BasicTool
-        icon="console"
-        trigger={{
-          title: "Shell",
-          subtitle: "Ran " + props.input.command,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof EditTool>({
-  name: "edit",
-  render(props) {
-    return (
-      <BasicTool
-        icon="code-lines"
-        trigger={
-          <div class="flex items-center justify-between w-full">
-            <div class="flex items-center gap-5">
-              <div class="text-12-medium text-text-base capitalize">Edit</div>
-              <div class="flex">
-                <Show when={props.input.filePath?.includes("/")}>
-                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}/</span>
-                </Show>
-                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
-              </div>
-            </div>
-            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
-          </div>
-        }
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register<typeof WriteTool>({
-  name: "write",
-  render(props) {
-    return (
-      <BasicTool
-        icon="code-lines"
-        trigger={
-          <div class="flex items-center justify-between w-full">
-            <div class="flex items-center gap-5">
-              <div class="text-12-medium text-text-base capitalize">Write</div>
-              <div class="flex">
-                <Show when={props.input.filePath?.includes("/")}>
-                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}/</span>
-                </Show>
-                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
-              </div>
-            </div>
-            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
-          </div>
-        }
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})

packages/desktop/src/components/code.tsx

@@ -2,7 +2,7 @@ import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "s
 import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
 import { useLocal, type TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
-import { useShiki } from "@/context/shiki"
+import { useShiki } from "@opencode-ai/ui"
 
 type DefinedSelection = Exclude<TextSelection, undefined>
 

packages/desktop/src/components/diff-changes.tsx

@@ -1,20 +0,0 @@
-import { FileDiff } from "@opencode-ai/sdk"
-import { createMemo, Show } from "solid-js"
-
-export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
-  const additions = createMemo(() =>
-    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) : props.diff.additions,
-  )
-  const deletions = createMemo(() =>
-    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) : props.diff.deletions,
-  )
-  const total = createMemo(() => additions() + deletions())
-  return (
-    <Show when={total() > 0}>
-      <div class="flex gap-2 justify-end items-center">
-        <span class="text-12-mono text-right text-text-diff-add-base">{`+${additions()}`}</span>
-        <span class="text-12-mono text-right text-text-diff-delete-base">{`-${deletions()}`}</span>
-      </div>
-    </Show>
-  )
-}

packages/desktop/src/components/markdown.tsx

@@ -1,23 +0,0 @@
-import { useMarked } from "@/context/marked"
-import { createResource } from "solid-js"
-
-function strip(text: string): string {
-  const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
-  const match = text.match(wrappedRe)
-  return match ? match[2] : text
-}
-export function Markdown(props: { text: string; class?: string }) {
-  const marked = useMarked()
-  const [html] = createResource(
-    () => strip(props.text),
-    async (markdown) => {
-      return marked.parse(markdown)
-    },
-  )
-  return (
-    <div
-      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
-      innerHTML={html()}
-    />
-  )
-}

packages/desktop/src/components/message-progress.tsx

@@ -0,0 +1,128 @@
+import { For, JSXElement, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Markdown, Part } from "@opencode-ai/ui"
+import { useSync } from "@/context/sync"
+import type { AssistantMessage as AssistantMessageType, Part as PartType, ToolPart } from "@opencode-ai/sdk"
+import { Spinner } from "./spinner"
+
+export function MessageProgress(props: { assistantMessages: () => AssistantMessageType[]; done?: boolean }) {
+  const sync = useSync()
+  const parts = createMemo(() => props.assistantMessages().flatMap((m) => sync.data.part[m.id]))
+  const done = createMemo(() => props.done ?? false)
+  const currentTask = createMemo(
+    () =>
+      parts().findLast(
+        (p) =>
+          p &&
+          p.type === "tool" &&
+          p.tool === "task" &&
+          p.state &&
+          "metadata" in p.state &&
+          p.state.metadata &&
+          p.state.metadata.sessionId &&
+          p.state.status === "running",
+      ) as ToolPart,
+  )
+
+  const resolvedParts = createMemo(() => {
+    let resolved = parts()
+    const task = currentTask()
+    if (task && task.state && "metadata" in task.state && task.state.metadata?.sessionId) {
+      const messages = sync.data.message[task.state.metadata.sessionId as string]?.filter((m) => m.role === "assistant")
+      resolved = messages?.flatMap((m) => sync.data.part[m.id]) ?? parts()
+    }
+    return resolved
+  })
+  const currentText = createMemo(
+    () =>
+      resolvedParts().findLast((p) => p?.type === "text")?.text ||
+      resolvedParts().findLast((p) => p?.type === "reasoning")?.text,
+  )
+  const eligibleItems = createMemo(() => {
+    return resolvedParts().filter((p) => p?.type === "tool" && p.state.status === "completed")
+  })
+  const finishedItems = createMemo<(JSXElement | PartType)[]>(() => [
+    <div class="h-8 w-full" />,
+    <div class="h-8 w-full" />,
+    <div class="flex items-center gap-x-5 pl-3 text-text-base">
+      <Spinner /> <span class="text-12-medium">Thinking...</span>
+    </div>,
+    ...eligibleItems(),
+    ...(done() ? [<div class="h-8 w-full" />, <div class="h-8 w-full" />, <div class="h-8 w-full" />] : []),
+  ])
+
+  const delay = createMemo(() => (done() ? 220 : 400))
+  const [visibleCount, setVisibleCount] = createSignal(eligibleItems().length)
+
+  createEffect(() => {
+    const total = finishedItems().length
+    if (total > visibleCount()) {
+      const timer = setTimeout(() => {
+        setVisibleCount((prev) => prev + 1)
+      }, delay())
+      onCleanup(() => clearTimeout(timer))
+    } else if (total < visibleCount()) {
+      setVisibleCount(total)
+    }
+  })
+
+  const translateY = createMemo(() => {
+    const total = visibleCount()
+    if (total < 2) return "0px"
+    return `-${(total - 2) * 40 - 8}px`
+  })
+
+  return (
+    <div class="flex flex-col gap-3">
+      <div
+        class="h-30 overflow-hidden pointer-events-none pb-1 
+               mask-alpha mask-t-from-33% mask-t-from-background-base mask-t-to-transparent
+               mask-b-from-95% mask-b-from-background-base mask-b-to-transparent"
+      >
+        <div
+          class="w-full flex flex-col items-start self-stretch gap-2 py-8
+                 transform transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
+          style={{ transform: `translateY(${translateY()})` }}
+        >
+          <For each={finishedItems()}>
+            {(part) => {
+              if (part && typeof part === "object" && "type" in part) {
+                const message = createMemo(() => sync.data.message[part.sessionID].find((m) => m.id === part.messageID))
+                return (
+                  <div class="h-8 flex items-center w-full">
+                    <Switch>
+                      <Match when={part.type === "text" && part}>
+                        {(p) => (
+                          <div
+                            textContent={p().text}
+                            class="text-12-regular text-text-base whitespace-nowrap truncate w-full"
+                          />
+                        )}
+                      </Match>
+                      <Match when={part.type === "reasoning" && part}>
+                        {(p) => <Part message={message()!} part={p()} />}
+                      </Match>
+                      <Match when={part.type === "tool" && part}>
+                        {(p) => <Part message={message()!} part={p()} />}
+                      </Match>
+                    </Switch>
+                  </div>
+                )
+              }
+              return <div class="h-8 flex items-center w-full">{part}</div>
+            }}
+          </For>
+        </div>
+      </div>
+      <Show when={currentText()}>
+        {(text) => (
+          <div
+            class="max-h-36 flex flex-col justify-end overflow-hidden py-3
+                   mask-alpha mask-t-from-80% mask-t-from-background-base mask-t-to-transparent"
+          >
+            <Markdown text={text()} class="w-full shrink-0 overflow-visible" />
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}

packages/desktop/src/components/progress-circle.tsx

@@ -1,48 +0,0 @@
-import { Component, createMemo } from "solid-js"
-
-interface ProgressCircleProps {
-  percentage: number
-  size?: number
-  strokeWidth?: number
-}
-
-export const ProgressCircle: Component<ProgressCircleProps> = (props) => {
-  // --- Set default values for props ---
-  const size = () => props.size || 16
-  const strokeWidth = () => props.strokeWidth || 3
-
-  // --- Constants for SVG calculation ---
-  const viewBoxSize = 16
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-
-  // --- Reactive Calculation for the progress offset ---
-  const offset = createMemo(() => {
-    const clampedPercentage = Math.max(0, Math.min(100, props.percentage || 0))
-    const progress = clampedPercentage / 100
-    return circumference() * (1 - progress)
-  })
-
-  return (
-    <svg
-      width={size()}
-      height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      fill="none"
-      class="transform -rotate-90"
-    >
-      <circle cx={center} cy={center} r={radius()} class="stroke-border-weak-base" stroke-width={strokeWidth()} />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        class="stroke-border-active"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
-        style={{ transition: "stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1)" }}
-      />
-    </svg>
-  )
-}

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

@@ -10,13 +10,15 @@ import { DateTime } from "luxon"
 
 interface PartBase {
   content: string
+  start: number
+  end: number
 }
 
-interface TextPart extends PartBase {
+export interface TextPart extends PartBase {
   type: "text"
 }
 
-interface FileAttachmentPart extends PartBase {
+export interface FileAttachmentPart extends PartBase {
   type: "file"
   path: string
   selection?: TextSelection
@@ -34,7 +36,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const local = useLocal()
   let editorRef!: HTMLDivElement
 
-  const defaultParts = [{ type: "text", content: "" } as const]
+  const defaultParts = [{ type: "text", content: "", start: 0, end: 0 } as const]
   const [store, setStore] = createStore<{
     contentParts: ContentPart[]
     popoverIsOpen: boolean
@@ -51,7 +53,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     event.stopPropagation()
     // @ts-expect-error
     const plainText = (event.clipboardData || window.clipboardData)?.getData("text/plain") ?? ""
-    addPart({ type: "text", content: plainText })
+    addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 
   onMount(() => {
@@ -69,16 +71,21 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   })
 
-  const { flat, active, onInput, onKeyDown } = useFilteredList<string>({
+  const { flat, active, onInput, onKeyDown, refetch } = useFilteredList<string>({
     items: local.file.search,
     key: (x) => x,
     onSelect: (path) => {
       if (!path) return
-      addPart({ type: "file", path, content: "@" + getFilename(path) })
+      addPart({ type: "file", path, content: "@" + getFilename(path), start: 0, end: 0 })
       setStore("popoverIsOpen", false)
     },
   })
 
+  createEffect(() => {
+    local.model.recent()
+    refetch()
+  })
+
   createEffect(
     on(
       () => store.contentParts,
@@ -117,17 +124,26 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const parseFromDOM = (): ContentPart[] => {
     const newParts: ContentPart[] = []
+    let position = 0
     editorRef.childNodes.forEach((node) => {
       if (node.nodeType === Node.TEXT_NODE) {
-        if (node.textContent) newParts.push({ type: "text", content: node.textContent })
+        if (node.textContent) {
+          const content = node.textContent
+          newParts.push({ type: "text", content, start: position, end: position + content.length })
+          position += content.length
+        }
       } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type) {
         switch ((node as HTMLElement).dataset.type) {
           case "file":
+            const content = node.textContent!
             newParts.push({
               type: "file",
               path: (node as HTMLElement).dataset.path!,
-              content: node.textContent!,
+              content,
+              start: position,
+              end: position + content.length,
             })
+            position += content.length
             break
           default:
             break
@@ -163,17 +179,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     const startIndex = atMatch ? atMatch.index! : cursorPosition
     const endIndex = atMatch ? cursorPosition : cursorPosition
 
-    const pushText = (acc: { parts: ContentPart[] }, value: string) => {
+    const pushText = (acc: { parts: ContentPart[]; runningIndex: number }, value: string) => {
       if (!value) return
       const last = acc.parts[acc.parts.length - 1]
       if (last && last.type === "text") {
         acc.parts[acc.parts.length - 1] = {
           type: "text",
           content: last.content + value,
+          start: last.start,
+          end: last.end + value.length,
         }
         return
       }
-      acc.parts.push({ type: "text", content: value })
+      acc.parts.push({ type: "text", content: value, start: acc.runningIndex, end: acc.runningIndex + value.length })
     }
 
     const {
@@ -183,20 +201,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     } = store.contentParts.reduce(
       (acc, item) => {
         if (acc.inserted) {
-          acc.parts.push(item)
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
           acc.runningIndex += item.content.length
           return acc
         }
 
         const nextIndex = acc.runningIndex + item.content.length
         if (nextIndex <= startIndex) {
-          acc.parts.push(item)
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
           acc.runningIndex = nextIndex
           return acc
         }
 
         if (item.type !== "text") {
-          acc.parts.push(item)
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
           acc.runningIndex = nextIndex
           return acc
         }
@@ -207,24 +225,27 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         const tail = item.content.slice(tailLength)
 
         pushText(acc, head)
+        acc.runningIndex += head.length
 
         if (part.type === "text") {
           pushText(acc, part.content)
+          acc.runningIndex += part.content.length
         }
         if (part.type !== "text") {
-          acc.parts.push({ ...part })
+          acc.parts.push({ ...part, start: acc.runningIndex, end: acc.runningIndex + part.content.length })
+          acc.runningIndex += part.content.length
         }
 
         const needsGap = Boolean(atMatch)
         const rest = needsGap ? (tail ? (/^\s/.test(tail) ? tail : ` ${tail}`) : " ") : tail
         pushText(acc, rest)
+        acc.runningIndex += rest.length
 
         const baseCursor = startIndex + part.content.length
         const cursorAddition = needsGap && rest.length > 0 ? 1 : 0
         acc.cursorPositionAfter = baseCursor + cursorAddition
 
         acc.inserted = true
-        acc.runningIndex = nextIndex
         return acc
       },
       {
@@ -237,9 +258,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     if (!inserted) {
       const baseParts = store.contentParts.filter((item) => !(item.type === "text" && item.content === ""))
-      const appendedAcc = { parts: [...baseParts] as ContentPart[] }
-      if (part.type === "text") pushText(appendedAcc, part.content)
-      if (part.type !== "text") appendedAcc.parts.push({ ...part })
+      const runningIndex = baseParts.reduce((sum, p) => sum + p.content.length, 0)
+      const appendedAcc = { parts: [...baseParts] as ContentPart[], runningIndex }
+      if (part.type === "text") {
+        pushText(appendedAcc, part.content)
+      }
+      if (part.type !== "text") {
+        appendedAcc.parts.push({
+          ...part,
+          start: appendedAcc.runningIndex,
+          end: appendedAcc.runningIndex + part.content.length,
+        })
+      }
       const next = appendedAcc.parts.length > 0 ? appendedAcc.parts : defaultParts
       setStore("contentParts", next)
       setStore("popoverIsOpen", false)
@@ -289,7 +319,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
                   <div class="flex items-center text-14-regular">
                     <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                      {getDirectory(i)}/
+                      {getDirectory(i)}
                     </span>
                     <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
                   </div>
@@ -304,7 +334,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         onSubmit={handleSubmit}
         classList={{
           "bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
-          "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
+          "rounded-2xl overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
           [props.class ?? ""]: !!props.class,
         }}
       >
@@ -335,6 +365,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               current={local.agent.current().name}
               onSelect={local.agent.set}
               class="capitalize"
+              variant="ghost"
             />
             <SelectDialog
               title="Select model"
@@ -344,16 +375,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               items={local.model.list()}
               current={local.model.current()}
               filterKeys={["provider.name", "name", "id"]}
-              groupBy={(x) => x.provider.name}
+              groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
               sortGroupsBy={(a, b) => {
                 const order = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"]
+                if (a.category === "Recent" && b.category !== "Recent") return -1
+                if (b.category === "Recent" && a.category !== "Recent") return 1
                 const aProvider = a.items[0].provider.id
                 const bProvider = b.items[0].provider.id
                 if (order.includes(aProvider) && !order.includes(bProvider)) return -1
                 if (!order.includes(aProvider) && order.includes(bProvider)) return 1
                 return order.indexOf(aProvider) - order.indexOf(bProvider)
               }}
-              onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
+              onSelect={(x) =>
+                local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true })
+              }
               trigger={
                 <Button as="div" variant="ghost">
                   {local.model.current()?.name ?? "Select model"}
@@ -368,9 +403,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     <img src={`https://models.dev/logos/${i.provider.id}.svg`} class="size-6 p-0.5 shrink-0 " />
                     <div class="flex gap-x-3 items-baseline flex-[1_0_0]">
                       <span class="text-14-medium text-text-strong overflow-hidden text-ellipsis">{i.name}</span>
-                      <span class="text-12-medium text-text-weak overflow-hidden text-ellipsis truncate min-w-0">
-                        {DateTime.fromFormat(i.release_date, "yyyy-MM-dd").toFormat("LLL yyyy")}
-                      </span>
+                      <Show when={i.release_date}>
+                        <span class="text-12-medium text-text-weak overflow-hidden text-ellipsis truncate min-w-0">
+                          {DateTime.fromFormat(i.release_date, "yyyy-MM-dd").toFormat("LLL yyyy")}
+                        </span>
+                      </Show>
                     </div>
                   </div>
                   <Show when={!i.cost || i.cost?.input === 0}>

packages/desktop/src/components/session-timeline.tsx

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