merge dev

.github/workflows/guidelines-check.yml → .github/guidelines-check.yml

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

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

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

.github/workflows/duplicate-issues.yml

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

.github/workflows/snapshot.yml

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

.github/workflows/test.yml

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

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

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

.gitignore

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

.opencode/command/commit.md

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

.opencode/command/issues.md

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

.opencode/opencode.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "plugin": ["opencode-openai-codex-auth"]
-}

.opencode/opencode.jsonc

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

.vscode/launch.example.json

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

.vscode/settings.example.json

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

CONTRIBUTING.md

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

README.md

@@ -28,8 +28,10 @@ curl -fsSL https://opencode.ai/install | bash
 npm i -g opencode-ai@latest        # or bun/pnpm/yarn
 scoop bucket add extras; scoop install extras/opencode  # Windows
 choco install opencode             # Windows
-brew install opencode      # macOS and Linux
+brew install opencode              # macOS and Linux
 paru -S opencode-bin               # Arch Linux
+mise use --pin -g ubi:sst/opencode # Any OS
+nix run nixpkgs#opencode           # or github:sst/opencode for latest dev branch
 ```
 
 > [!TIP]
@@ -50,6 +52,22 @@ OPENCODE_INSTALL_DIR=/usr/local/bin curl -fsSL https://opencode.ai/install | bas
 XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 ```
 
+### Agents
+
+OpenCode includes two built-in agents you can switch between,
+you can switch between these using the `Tab` key.
+
+- **build** - Default, full access agent for development work
+- **plan** - Read-only agent for analysis and code exploration
+  - Denies file edits by default
+  - Asks permission before running bash commands
+  - Ideal for exploring unfamiliar codebases or planning changes
+
+Also, included is a **general** subagent for complex searches and multi-step tasks.
+This is used internally and can be invoked using `@general` in messages.
+
+Learn more about [agents](https://opencode.ai/docs/agents).
+
 ### Documentation
 
 For more info on how to configure OpenCode [**head over to our docs**](https://opencode.ai/docs).
@@ -58,6 +76,10 @@ For more info on how to configure OpenCode [**head over to our docs**](https://o
 
 If you're interested in contributing to OpenCode, please read our [contributing docs](./CONTRIBUTING.md) before submitting a pull request.
 
+### Building on OpenCode
+
+If you are working on a project that's related to OpenCode and is using "opencode" as a part of its name; for example, "opencode-dashboard" or "opencode-mobile", please add a note to your README to clarify that it is not built by the OpenCode team and is not affiliated with us in anyway.
+
 ### FAQ
 
 #### How is this different than Claude Code?
@@ -65,7 +87,7 @@ If you're interested in contributing to OpenCode, please read our [contributing
 It's very similar to Claude Code in terms of capability. Here are the key differences:
 
 - 100% open source
-- Not coupled to any provider. Although Anthropic is recommended, OpenCode can be used with OpenAI, Google or even local models. As models evolve the gaps between them will close and pricing will drop so being provider-agnostic is important.
+- Not coupled to any provider. Although we recommend the models we provide through [OpenCode Zen](https://opencode.ai/zen); OpenCode can be used with Claude, OpenAI, Google or even local models. As models evolve the gaps between them will close and pricing will drop so being provider-agnostic is important.
 - Out of the box LSP support
 - A focus on TUI. OpenCode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
 - A client/server architecture. This for example can allow OpenCode to run on your computer, while you can drive it remotely from a mobile app. Meaning that the TUI frontend is just one of the possible clients.

STATS.md

@@ -138,3 +138,11 @@
 | 2025-11-10 | 722,288 (+8,826)  | 668,225 (+7,766)  | 1,390,513 (+16,592) |
 | 2025-11-11 | 729,769 (+7,481)  | 677,501 (+9,276)  | 1,407,270 (+16,757) |
 | 2025-11-12 | 740,180 (+10,411) | 686,454 (+8,953)  | 1,426,634 (+19,364) |
+| 2025-11-13 | 749,905 (+9,725)  | 696,157 (+9,703)  | 1,446,062 (+19,428) |
+| 2025-11-14 | 759,928 (+10,023) | 705,237 (+9,080)  | 1,465,165 (+19,103) |
+| 2025-11-15 | 765,955 (+6,027)  | 712,870 (+7,633)  | 1,478,825 (+13,660) |
+| 2025-11-16 | 771,069 (+5,114)  | 716,596 (+3,726)  | 1,487,665 (+8,840)  |
+| 2025-11-17 | 780,161 (+9,092)  | 723,339 (+6,743)  | 1,503,500 (+15,835) |
+| 2025-11-18 | 791,563 (+11,402) | 732,544 (+9,205)  | 1,524,107 (+20,607) |
+| 2025-11-19 | 804,409 (+12,846) | 747,624 (+15,080) | 1,552,033 (+27,926) |
+| 2025-11-20 | 814,620 (+10,211) | 757,907 (+10,283) | 1,572,527 (+20,494) |

bun.lock

@@ -29,6 +29,7 @@
         "@solidjs/meta": "^0.29.4",
         "@solidjs/router": "^0.15.0",
         "@solidjs/start": "^1.1.0",
+        "chart.js": "4.5.1",
         "solid-js": "catalog:",
         "vinxi": "^0.5.7",
         "zod": "catalog:",
@@ -40,7 +41,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -67,7 +68,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -91,7 +92,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -115,7 +116,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -155,7 +156,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "22.0.0",
@@ -171,7 +172,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -179,6 +180,7 @@
         "@actions/core": "1.11.1",
         "@actions/github": "6.0.1",
         "@agentclientprotocol/sdk": "0.5.1",
+        "@ai-sdk/mcp": "0.0.8",
         "@clack/prompts": "1.0.0-alpha.1",
         "@hono/standard-validator": "0.1.5",
         "@hono/zod-validator": "catalog:",
@@ -189,8 +191,8 @@
         "@opencode-ai/plugin": "workspace:*",
         "@opencode-ai/script": "workspace:*",
         "@opencode-ai/sdk": "workspace:*",
-        "@opentui/core": "0.1.42",
-        "@opentui/solid": "0.1.42",
+        "@opentui/core": "0.1.47",
+        "@opentui/solid": "0.1.47",
         "@parcel/watcher": "2.5.1",
         "@pierre/precision-diffs": "catalog:",
         "@solid-primitives/event-bus": "1.1.2",
@@ -249,7 +251,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -269,7 +271,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.81.0",
         "@tsconfig/node22": "catalog:",
@@ -280,7 +282,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -293,7 +295,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -321,9 +323,19 @@
         "vite-plugin-solid": "catalog:",
       },
     },
+    "packages/util": {
+      "name": "@opencode-ai/util",
+      "version": "1.0.85",
+      "dependencies": {
+        "zod": "catalog:",
+      },
+      "devDependencies": {
+        "typescript": "catalog:",
+      },
+    },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.0.61",
+      "version": "1.0.85",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -377,7 +389,7 @@
     "@types/bun": "1.3.0",
     "@types/node": "22.13.9",
     "@typescript/native-preview": "7.0.0-dev.20251014.1",
-    "ai": "5.0.8",
+    "ai": "5.0.97",
     "diff": "8.0.2",
     "fuzzysort": "3.1.0",
     "hono": "4.7.10",
@@ -412,12 +424,14 @@
 
     "@ai-sdk/anthropic": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-uyyaO4KhxoIKZztREqLPh+6/K3ZJx/rp72JKoUEL9/kC+vfQTThUfPnY/bUryUpcnawx8IY/tSoYNOi/8PCv7w=="],
 
-    "@ai-sdk/gateway": ["@ai-sdk/gateway@1.0.4", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.1" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-1roLdgMbFU3Nr4MC97/te7w6OqxsWBkDUkpbCcvxF3jz/ku91WVaJldn/PKU8feMKNyI5W9wnqhbjb1BqbExOQ=="],
+    "@ai-sdk/gateway": ["@ai-sdk/gateway@2.0.12", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.17", "@vercel/oidc": "3.0.5" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-W+cB1sOWvPcz9qiIsNtD+HxUrBUva2vWv2K1EFukuImX+HA0uZx3EyyOjhYQ9gtf/teqEG80M6OvJ7xx/VLV2A=="],
 
     "@ai-sdk/google": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.7" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-dnVIgSz1DZD/0gVau6ifYN3HZFN15HZwC9VjevTFfvrfSfbEvpXj5x/k/zk/0XuQrlQ5g8JiwJtxc9bx24x2xw=="],
 
     "@ai-sdk/google-vertex": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/anthropic": "2.0.9", "@ai-sdk/google": "2.0.11", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.7", "google-auth-library": "^9.15.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-tStlnOCRGRqKKJSCOtXhijX4r9kYVK2v+Vs7miJnfvr3sZfO8nRS0xnNhfgu17xuNi5LMMufeCYURTz4lKxzUQ=="],
 
+    "@ai-sdk/mcp": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.17", "pkce-challenge": "^5.0.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-9y9GuGcZ9/+pMIHfpOCJgZVp+AZMv6TkjX2NVT17SQZvTF2N8LXuCXyoUPyi1PxIxzxl0n463LxxaB2O6olC+Q=="],
+
     "@ai-sdk/openai": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-D4zYz2uR90aooKQvX1XnS00Z7PkbrcY+snUvPfm5bCabTG7bzLrVtD56nJ5bSaZG8lmuOMfXpyiEEArYLyWPpw=="],
 
     "@ai-sdk/openai-compatible": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-luHVcU+yKzwv3ekKgbP3v+elUVxb2Rt+8c6w9qi7g2NYG2/pEL21oIrnaEnc6UtTZLLZX9EFBcpq2N1FQKDIMw=="],
@@ -870,6 +884,8 @@
 
     "@kobalte/utils": ["@kobalte/[email protected]", "", { "dependencies": { "@solid-primitives/event-listener": "^2.2.14", "@solid-primitives/keyed": "^1.2.0", "@solid-primitives/map": "^0.4.7", "@solid-primitives/media": "^2.2.4", "@solid-primitives/props": "^3.1.8", "@solid-primitives/refs": "^1.0.5", "@solid-primitives/utils": "^6.2.1" }, "peerDependencies": { "solid-js": "^1.8.8" } }, "sha512-eeU60A3kprIiBDAfv9gUJX1tXGLuZiKMajUfSQURAF2pk4ZoMYiqIzmrMBvzcxP39xnYttgTyQEVLwiTZnrV4w=="],
 
+    "@kurkle/color": ["@kurkle/[email protected]", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
+
     "@mapbox/node-pre-gyp": ["@mapbox/[email protected]", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="],
 
     "@mdx-js/mdx": ["@mdx-js/[email protected]", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdx": "^2.0.0", "acorn": "^8.0.0", "collapse-white-space": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "estree-util-scope": "^1.0.0", "estree-walker": "^3.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "markdown-extensions": "^2.0.0", "recma-build-jsx": "^1.0.0", "recma-jsx": "^1.0.0", "recma-stringify": "^1.0.0", "rehype-recma": "^1.0.0", "remark-mdx": "^3.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "source-map": "^0.7.0", "unified": "^11.0.0", "unist-util-position-from-estree": "^2.0.0", "unist-util-stringify-position": "^4.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ=="],
@@ -962,25 +978,27 @@
 
     "@opencode-ai/ui": ["@opencode-ai/ui@workspace:packages/ui"],
 
+    "@opencode-ai/util": ["@opencode-ai/util@workspace:packages/util"],
+
     "@opencode-ai/web": ["@opencode-ai/web@workspace:packages/web"],
 
     "@opentelemetry/api": ["@opentelemetry/[email protected]", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
-    "@opentui/core": ["@opentui/[email protected]2", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "jimp": "1.6.0", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.42", "@opentui/core-darwin-x64": "0.1.42", "@opentui/core-linux-arm64": "0.1.42", "@opentui/core-linux-x64": "0.1.42", "@opentui/core-win32-arm64": "0.1.42", "@opentui/core-win32-x64": "0.1.42", "bun-webgpu": "0.1.3", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-oV2xHBB2HaNiGvaV6R0C8GmniNJSsLKop4APq4FrLyCYberc6vZcATSHcA5YT9krdvHbBDOOn9RI2oaVJYRbUQ=="],
+    "@opentui/core": ["@opentui/[email protected]7", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "jimp": "1.6.0", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.47", "@opentui/core-darwin-x64": "0.1.47", "@opentui/core-linux-arm64": "0.1.47", "@opentui/core-linux-x64": "0.1.47", "@opentui/core-win32-arm64": "0.1.47", "@opentui/core-win32-x64": "0.1.47", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-gKcYX9EJ/e5VLEwBH2kalDr5xoI9MEanzQV7uV3Sb2Z9+ndwEUShKKna3odN8g4E20c4sX2VpwmB9hhl3Tsd9w=="],
 
-    "@opentui/core-darwin-arm64": ["@opentui/[email protected]2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Sk5b/kh/y8HUJ7stGA5ydkajJX/z2OiGqSm+wn6XIoqdDavxQaFoQOt1PCuCqaxqZWJcXZ6OmISDVagZPUsPuw=="],
+    "@opentui/core-darwin-arm64": ["@opentui/[email protected]7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0/u4VkJJPvW24cZzMaKf6Dm+VzeO1a94l6NV3AQ1Wb+pPTEyOmNWkRvj03ZrRLMCyQduaFVtlnor8DVCk6OHuQ=="],
 
-    "@opentui/core-darwin-x64": ["@opentui/[email protected]2", "", { "os": "darwin", "cpu": "x64" }, "sha512-b0FKTw+t/wlJg4u+wTurWzbQe47gExkjguaGSUua0m0vybrkkvbUvmrADr+yivCjxcPAhSZ3lOOVU3uZuWsNqw=="],
+    "@opentui/core-darwin-x64": ["@opentui/[email protected]7", "", { "os": "darwin", "cpu": "x64" }, "sha512-y1+c/e+IaZAj5N02GnD+oaubbb5JiW5eKgF0h58kw73iXDMfynuoGOpREz58i1rUFYOMYJGdrSjEHtXk2pD2XA=="],
 
-    "@opentui/core-linux-arm64": ["@opentui/[email protected]2", "", { "os": "linux", "cpu": "arm64" }, "sha512-Vy8BrjJpv2f56JAsYmv4PkC+2HsCv8Gh0ErrlIJQ8L4h29oWabS44m0uxFdvjuTDgKpCJzOScsxsy1VGzSd9rw=="],
+    "@opentui/core-linux-arm64": ["@opentui/[email protected]7", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZESHmqILtfb6FFEfi40JGKl8z0+LhOSoHgfOK1PPyuyRT9Mk8uXeQgPMF5W6Ac0pp4w+uWVC4TrFjijCCSiaUQ=="],
 
-    "@opentui/core-linux-x64": ["@opentui/[email protected]2", "", { "os": "linux", "cpu": "x64" }, "sha512-cO+13E1HIAPUdV/DRdKotHFAxsLc+ipbbFKGAuu/msfvywCnnNs86w22yeMg0cEqx7aBocWWT1XfJEHDJLFOqw=="],
+    "@opentui/core-linux-x64": ["@opentui/[email protected]7", "", { "os": "linux", "cpu": "x64" }, "sha512-qfvy1qshgnZMcAHQ3MS093IBjxM2pPx+kEnW7icsyud60zoJgoUugdN2kjgJiIJiYX3f3PgE68J6CVW2MCtYfQ=="],
 
-    "@opentui/core-win32-arm64": ["@opentui/[email protected]2", "", { "os": "win32", "cpu": "arm64" }, "sha512-xpLhODjOWh7gMOSrKIldb4v6hR0TGyz6kjckDKwcjUv3LGbLJuSly+3O/zuWWS60dt56G1X4A0OyjWwiGZjc0g=="],
+    "@opentui/core-win32-arm64": ["@opentui/[email protected]7", "", { "os": "win32", "cpu": "arm64" }, "sha512-f6OoPnaz303H6fudi8blS+iEcJtlFlcqdBoWnWnJQfN9rLmajW3Yf7RfpNOoLUlDcwxQLyTL/5EHwbcG8D4r7A=="],
 
-    "@opentui/core-win32-x64": ["@opentui/[email protected]2", "", { "os": "win32", "cpu": "x64" }, "sha512-pao5XdAln93WWPdsTF+V+HccZ5d1ijSmv0OoBbkjkVbP+tiN41yxNqg/7jzW9IiAakYsvmpKV+3ixi/dlBEvOQ=="],
+    "@opentui/core-win32-x64": ["@opentui/[email protected]7", "", { "os": "win32", "cpu": "x64" }, "sha512-lQnJg7FucyyTbN/ybTj5FZ7S8OAfT5KxXDR5l9Sla7R5MIDY6nBXYM3GWeF81jzDd4K4Z/0hxNFtWSopEXRFYg=="],
 
-    "@opentui/solid": ["@opentui/[email protected]2", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.42", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-4TNlEtatZ4n9TcKPWSF/EoaPaLmZuFVJ4hHh9wRggNaGrmDlmJ+9N/8oEKXETt+oRDX/1CdowAaTOVfaqb1t6g=="],
+    "@opentui/solid": ["@opentui/[email protected]7", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.47", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-azN2sf8X/6HiLkz8ip2lcY532ApNEkl+BHd+wml/HdwdgLE7nthgA6x8Pgvi7f4qkRmpeYATU+danIzB6K6B8A=="],
 
     "@oslojs/asn1": ["@oslojs/[email protected]", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],
 
@@ -1492,6 +1510,8 @@
 
     "@vercel/nft": ["@vercel/[email protected]", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^10.4.5", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-UEq+eF0ocEf9WQCV1gktxKhha36KDs7jln5qii6UpPf5clMqDc0p3E7d9l2Smx0i9Pm1qpq4S4lLfNl97bbv6w=="],
 
+    "@vercel/oidc": ["@vercel/[email protected]", "", {}, "sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw=="],
+
     "@vinxi/listhen": ["@vinxi/[email protected]", "", { "dependencies": { "@parcel/watcher": "^2.3.0", "@parcel/watcher-wasm": "2.3.0", "citty": "^0.1.5", "clipboardy": "^4.0.0", "consola": "^3.2.3", "defu": "^6.1.4", "get-port-please": "^3.1.2", "h3": "^1.10.0", "http-shutdown": "^1.2.2", "jiti": "^1.21.0", "mlly": "^1.5.0", "node-forge": "^1.3.1", "pathe": "^1.1.2", "std-env": "^3.7.0", "ufo": "^1.3.2", "untun": "^0.1.3", "uqr": "^0.1.2" }, "bin": { "listen": "bin/listhen.mjs", "listhen": "bin/listhen.mjs" } }, "sha512-WSN1z931BtasZJlgPp704zJFnQFRg7yzSjkm3MzAWQYe4uXFXlFr1hc5Ac2zae5/HDOz5x1/zDM5Cb54vTCnWw=="],
 
     "@vinxi/plugin-directives": ["@vinxi/[email protected]", "", { "dependencies": { "@babel/parser": "^7.23.5", "acorn": "^8.10.0", "acorn-jsx": "^5.3.2", "acorn-loose": "^8.3.0", "acorn-typescript": "^1.4.3", "astring": "^1.8.6", "magicast": "^0.2.10", "recast": "^0.23.4", "tslib": "^2.6.2" }, "peerDependencies": { "vinxi": "^0.5.5" } }, "sha512-pH/KIVBvBt7z7cXrUH/9uaqcdxjegFC7+zvkZkdOyWzs+kQD5KPf3cl8kC+5ayzXHT+OMlhGhyitytqN3cGmHg=="],
@@ -1526,7 +1546,7 @@
 
     "agentkeepalive": ["[email protected]", "", { "dependencies": { "humanize-ms": "^1.2.1" } }, "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ=="],
 
-    "ai": ["[email protected].8", "", { "dependencies": { "@ai-sdk/gateway": "1.0.4", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.1", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-qbnhj046UvG30V1S5WhjBn+RBGEAmi8PSZWqMhRsE3EPxvO5BcePXTZFA23e9MYyWS9zr4Vm8Mv3wQXwLmtIBw=="],
+    "ai": ["[email protected].97", "", { "dependencies": { "@ai-sdk/gateway": "2.0.12", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.17", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-8zBx0b/owis4eJI2tAlV8a1Rv0BANmLxontcAelkLNwEHhgfgXeKpDkhNB6OgV+BJSwboIUDkgd9312DdJnCOQ=="],
 
     "ajv": ["[email protected]", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
 
@@ -1684,15 +1704,15 @@
 
     "bun-types": ["[email protected]", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ=="],
 
-    "bun-webgpu": ["[email protected].3", "", { "dependencies": { "@webgpu/types": "^0.1.60" }, "optionalDependencies": { "bun-webgpu-darwin-arm64": "^0.1.3", "bun-webgpu-darwin-x64": "^0.1.3", "bun-webgpu-linux-x64": "^0.1.3", "bun-webgpu-win32-x64": "^0.1.3" } }, "sha512-IXFxaIi4rgsEEpl9n/QVDm5RajCK/0FcOXZeMb52YRjoiAR1YVYK5hLrXT8cm+KDi6LVahA9GJFqOR4yiloVCw=="],
+    "bun-webgpu": ["[email protected].4", "", { "dependencies": { "@webgpu/types": "^0.1.60" }, "optionalDependencies": { "bun-webgpu-darwin-arm64": "^0.1.4", "bun-webgpu-darwin-x64": "^0.1.4", "bun-webgpu-linux-x64": "^0.1.4", "bun-webgpu-win32-x64": "^0.1.4" } }, "sha512-Kw+HoXl1PMWJTh9wvh63SSRofTA8vYBFCw0XEP1V1fFdQEDhI8Sgf73sdndE/oDpN/7CMx0Yv/q8FCvO39ROMQ=="],
 
-    "bun-webgpu-darwin-arm64": ["[email protected].3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-KkNQ9gT7dxGDndQaHTTHss9miukqpczML3pO2nZJoT/nITwe9lw3ZGFJMujkW41BUQ1mDYKFgo5nBGf9xYHPAg=="],
+    "bun-webgpu-darwin-arm64": ["[email protected].4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eDgLN9teKTfmvrCqgwwmWNsNszxYs7IZdCqk0S1DCarvMhr4wcajoSBlA/nQA0/owwLduPTS8xxCnQp4/N/gDg=="],
 
-    "bun-webgpu-darwin-x64": ["[email protected].3", "", { "os": "darwin", "cpu": "x64" }, "sha512-TODWnMUbCoqD/wqzlB3oGOBIUWIFly0lqMeBFz/MBV+ndjbnkNrP9huaZJCTkCVEPKGtd1FCM3ExZUtBbnGziA=="],
+    "bun-webgpu-darwin-x64": ["[email protected].4", "", { "os": "darwin", "cpu": "x64" }, "sha512-X+PjwJUWenUmdQBP8EtdItMyieQ6Nlpn+BH518oaouDiSnWj5+b0Y7DNDZJq7Ezom4EaxmqL/uGYZK3aCQ7CXg=="],
 
-    "bun-webgpu-linux-x64": ["[email protected].3", "", { "os": "linux", "cpu": "x64" }, "sha512-lVHORoVu1G61XVM8CRRqUsqr6w8kMlpuSpbPGpKUpmvrsoay6ymXAhT5lRPKyrGNamHUQTknmWdI59aRDCfLtQ=="],
+    "bun-webgpu-linux-x64": ["[email protected].4", "", { "os": "linux", "cpu": "x64" }, "sha512-zMLs2YIGB+/jxrYFXaFhVKX/GBt05UTF45lc9srcHc9JXGjEj+12CIo1CHLTAWatXMTqt0Jsu6ukWEoWVT/ayA=="],
 
-    "bun-webgpu-win32-x64": ["[email protected].3", "", { "os": "win32", "cpu": "x64" }, "sha512-vlspsFffctJlBnFfs2lW3QgDD6LyFu8VT18ryID7Qka5poTj0clGVRxz7DFRi7yva3GovEGw/82z/WVc5US8Pw=="],
+    "bun-webgpu-win32-x64": ["[email protected].4", "", { "os": "win32", "cpu": "x64" }, "sha512-Z5yAK28xrcm8Wb5k7TZ8FJKpOI/r+aVCRdlHYAqI2SDJFN3nD4mJs900X6kNVmG/xFzb5yOuKVYWGg+6ZXWbyA=="],
 
     "bundle-name": ["[email protected]", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
@@ -1726,6 +1746,8 @@
 
     "character-reference-invalid": ["[email protected]", "", {}, "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="],
 
+    "chart.js": ["[email protected]", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw=="],
+
     "cheerio": ["[email protected]", "", { "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "htmlparser2": "^8.0.1", "parse5": "^7.0.0", "parse5-htmlparser2-tree-adapter": "^7.0.0" } }, "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q=="],
 
     "cheerio-select": ["[email protected]", "", { "dependencies": { "boolbase": "^1.0.0", "css-select": "^5.1.0", "css-what": "^6.1.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1" } }, "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g=="],
@@ -3598,7 +3620,7 @@
 
     "@ai-sdk/amazon-bedrock/zod": ["[email protected]", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
-    "@ai-sdk/gateway/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.3", "zod-to-json-schema": "^3.24.1" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-/iP1sKc6UdJgGH98OCly7sWJKv+J9G47PnTjIj40IJMUQKwDrUMyf7zOOfRtPwSuNifYhSoJQ4s1WltI65gJ/g=="],
+    "@ai-sdk/gateway/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]7", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.6" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw=="],
 
     "@ai-sdk/google/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.5" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-o3BS5/t8KnBL3ubP8k3w77AByOypLm+pkIL/DCw0qKkhDbvhCy+L3hRTGPikpdb8WHcylAeKsjgwOxhj4cqTUA=="],
 
@@ -3606,6 +3628,8 @@
 
     "@ai-sdk/google-vertex/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.5" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-o3BS5/t8KnBL3ubP8k3w77AByOypLm+pkIL/DCw0qKkhDbvhCy+L3hRTGPikpdb8WHcylAeKsjgwOxhj4cqTUA=="],
 
+    "@ai-sdk/mcp/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.6" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw=="],
+
     "@astrojs/cloudflare/vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
 
     "@astrojs/markdown-remark/@astrojs/internal-helpers": ["@astrojs/[email protected]", "", {}, "sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A=="],
@@ -3814,7 +3838,7 @@
 
     "accepts/mime-types": ["[email protected]", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
-    "ai/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.3", "zod-to-json-schema": "^3.24.1" }, "peerDependencies": { "zod": "^3.25.76 || ^4" } }, "sha512-/iP1sKc6UdJgGH98OCly7sWJKv+J9G47PnTjIj40IJMUQKwDrUMyf7zOOfRtPwSuNifYhSoJQ4s1WltI65gJ/g=="],
+    "ai/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]7", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.6" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw=="],
 
     "ansi-align/string-width": ["[email protected]", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 

flake.lock

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

flake.nix

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

nix/hashes.json

@@ -0,0 +1,3 @@
+{
+  "nodeModules": "sha256-bPiUpHGtgwVxHQHXBprpc6fFeJqW6/x7dwtQZBq29oU="
+}

nix/node-modules.nix

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

nix/opencode.nix

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

nix/scripts/bun-build.ts

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

nix/scripts/canonicalize-node-modules.ts

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

nix/scripts/normalize-bun-binaries.ts

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

nix/scripts/update-hashes.sh

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

package.json

@@ -32,7 +32,7 @@
       "@solidjs/meta": "0.29.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
-      "ai": "5.0.8",
+      "ai": "5.0.97",
       "hono": "4.7.10",
       "fuzzysort": "3.1.0",
       "luxon": "3.6.1",

packages/console/app/package.json

@@ -7,19 +7,20 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "./script/generate-sitemap.ts && vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "1.0.61"
+    "version": "1.0.85"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",
+    "@jsx-email/render": "1.1.1",
+    "@kobalte/core": "catalog:",
+    "@openauthjs/openauth": "catalog:",
     "@opencode-ai/console-core": "workspace:*",
     "@opencode-ai/console-mail": "workspace:*",
-    "@openauthjs/openauth": "catalog:",
-    "@kobalte/core": "catalog:",
-    "@jsx-email/render": "1.1.1",
     "@opencode-ai/console-resource": "workspace:*",
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "^1.1.0",
+    "chart.js": "4.5.1",
     "solid-js": "catalog:",
     "vinxi": "^0.5.7",
     "zod": "catalog:"

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

@@ -202,6 +202,14 @@ export function IconZai(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   )
 }
 
+export function IconGoogle(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 50 50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M49.04,24.001l-1.082-0.043h-0.001C36.134,23.492,26.508,13.866,26.042,2.043L25.999,0.96C25.978,0.424,25.537,0,25,0	s-0.978,0.424-0.999,0.96l-0.043,1.083C23.492,13.866,13.866,23.492,2.042,23.958L0.96,24.001C0.424,24.022,0,24.463,0,25	c0,0.537,0.424,0.978,0.961,0.999l1.082,0.042c11.823,0.467,21.449,10.093,21.915,21.916l0.043,1.083C24.022,49.576,24.463,50,25,50	s0.978-0.424,0.999-0.96l0.043-1.083c0.466-11.823,10.092-21.449,21.915-21.916l1.082-0.042C49.576,25.978,50,25.537,50,25	C50,24.463,49.576,24.022,49.04,24.001z"></path>
+    </svg>
+  )
+}
+
 export function IconStealth(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18" fill="none">
@@ -212,3 +220,30 @@ export function IconStealth(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function IconChevronLeft(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="none">
+      <path d="M12 15L7 10L12 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  )
+}
+
+export function IconChevronRight(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="none">
+      <path d="M8 5L13 10L8 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  )
+}
+
+export function IconBreakdown(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M2 12L2 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M6 12L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M10 12L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      <path d="M14 12L14 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+  )
+}

packages/console/app/src/config.ts

@@ -22,8 +22,8 @@ export const config = {
 
   // Static stats (used on landing page)
   stats: {
-    contributors: "250",
-    commits: "3,500",
+    contributors: "300",
+    commits: "4,000",
     monthlyUsers: "300,000",
   },
 } as const

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

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

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

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

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

@@ -5,6 +5,7 @@ import { NewUserSection } from "./new-user-section"
 import { UsageSection } from "./usage-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
+import { GraphSection } from "./graph-section"
 import { IconLogo } from "~/component/icon"
 import { querySessionInfo, queryBillingInfo, createCheckoutUrl, formatBalance } from "../common"
 
@@ -66,6 +67,9 @@ export default function () {
 
       <div data-slot="sections">
         <NewUserSection />
+        <Show when={userInfo()?.isAdmin}>
+          <GraphSection />
+        </Show>
         <ModelSection />
         <Show when={userInfo()?.isAdmin}>
           <ProviderSection />

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

@@ -5,11 +5,21 @@ import { withActor } from "~/context/auth.withActor"
 import { ZenData } from "@opencode-ai/console-core/model.js"
 import styles from "./model-section.module.css"
 import { querySessionInfo } from "../common"
-import { IconAlibaba, IconAnthropic, IconMoonshotAI, IconOpenAI, IconStealth, IconXai, IconZai } from "~/component/icon"
+import {
+  IconAlibaba,
+  IconAnthropic,
+  IconGoogle,
+  IconMoonshotAI,
+  IconOpenAI,
+  IconStealth,
+  IconXai,
+  IconZai,
+} from "~/component/icon"
 
 const getModelLab = (modelId: string) => {
   if (modelId.startsWith("claude")) return "Anthropic"
   if (modelId.startsWith("gpt")) return "OpenAI"
+  if (modelId.startsWith("gemini")) return "Google"
   if (modelId.startsWith("kimi")) return "Moonshot AI"
   if (modelId.startsWith("glm")) return "Z.ai"
   if (modelId.startsWith("qwen")) return "Alibaba"
@@ -22,9 +32,19 @@ const getModelsInfo = query(async (workspaceID: string) => {
   return withActor(async () => {
     return {
       all: Object.entries(ZenData.list().models)
-        .filter(([id, _model]) => !["claude-3-5-haiku", "minimax-m2"].includes(id))
-        .filter(([id, _model]) => !id.startsWith("an-"))
-        .sort(([_idA, modelA], [_idB, modelB]) => modelA.name.localeCompare(modelB.name))
+        .filter(([id, _model]) => !["claude-3-5-haiku"].includes(id))
+        .filter(([id, _model]) => !id.startsWith("alpha-"))
+        .sort(([idA, modelA], [idB, modelB]) => {
+          const priority = ["big-pickle", "grok", "claude", "gpt", "gemini"]
+          const getPriority = (id: string) => {
+            const index = priority.findIndex((p) => id.startsWith(p))
+            return index === -1 ? Infinity : index
+          }
+          const pA = getPriority(idA)
+          const pB = getPriority(idB)
+          if (pA !== pB) return pA - pB
+          return modelA.name.localeCompare(modelB.name)
+        })
         .map(([id, model]) => ({ id, name: model.name })),
       disabled: await Model.listDisabled(),
     }
@@ -96,6 +116,8 @@ export function ModelSection() {
                                   return <IconOpenAI width={16} height={16} />
                                 case "Anthropic":
                                   return <IconAnthropic width={16} height={16} />
+                                case "Google":
+                                  return <IconGoogle width={16} height={16} />
                                 case "Moonshot AI":
                                   return <IconMoonshotAI width={16} height={16} />
                                 case "Z.ai":

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

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

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

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

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

@@ -15,6 +15,7 @@ import { logger } from "./logger"
 import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError, RateLimitError } from "./error"
 import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
 import { anthropicHelper } from "./provider/anthropic"
+import { googleHelper } from "./provider/google"
 import { openaiHelper } from "./provider/openai"
 import { oaCompatHelper } from "./provider/openai-compatible"
 import { createRateLimiter } from "./rateLimiter"
@@ -30,6 +31,8 @@ export async function handler(
   opts: {
     format: ZenData.Format
     parseApiKey: (headers: Headers) => string | undefined
+    parseModel: (url: string, body: any) => string
+    parseIsStream: (url: string, body: any) => boolean
   },
 ) {
   type AuthInfo = Awaited<ReturnType<typeof authenticate>>
@@ -43,15 +46,18 @@ export async function handler(
   ]
 
   try {
+    const url = input.request.url
     const body = await input.request.json()
     const ip = input.request.headers.get("x-real-ip") ?? ""
+    const model = opts.parseModel(url, body)
+    const isStream = opts.parseIsStream(url, body)
     logger.metric({
-      is_tream: !!body.stream,
+      is_tream: isStream,
       session: input.request.headers.get("x-opencode-session"),
       request: input.request.headers.get("x-opencode-request"),
     })
     const zenData = ZenData.list()
-    const modelInfo = validateModel(zenData, body.model)
+    const modelInfo = validateModel(zenData, model)
     const rateLimiter = createRateLimiter(modelInfo.id, modelInfo.rateLimit, ip)
     await rateLimiter?.check()
 
@@ -64,7 +70,7 @@ export async function handler(
       logger.metric({ provider: providerInfo.id })
 
       const startTimestamp = Date.now()
-      const reqUrl = providerInfo.modifyUrl(providerInfo.api)
+      const reqUrl = providerInfo.modifyUrl(providerInfo.api, providerInfo.model, isStream)
       const reqBody = JSON.stringify(
         providerInfo.modifyBody({
           ...createBodyConverter(opts.format, providerInfo.format)(body),
@@ -114,7 +120,7 @@ export async function handler(
     logger.debug("STATUS: " + res.status + " " + res.statusText)
 
     // Handle non-streaming response
-    if (!body.stream) {
+    if (!isStream) {
       const responseConverter = createResponseConverter(providerInfo.format, opts.format)
       const json = await res.json()
       const body = JSON.stringify(responseConverter(json))
@@ -169,7 +175,7 @@ export async function handler(
               responseLength += value.length
               buffer += decoder.decode(value, { stream: true })
 
-              const parts = buffer.split("\n\n")
+              const parts = buffer.split(providerInfo.streamSeparator)
               buffer = parts.pop() ?? ""
 
               for (let part of parts) {
@@ -283,6 +289,7 @@ export async function handler(
       ...(() => {
         const format = zenData.providers[provider.id].format
         if (format === "anthropic") return anthropicHelper
+        if (format === "google") return googleHelper
         if (format === "openai") return openaiHelper
         return oaCompatHelper
       })(),
@@ -291,7 +298,7 @@ export async function handler(
 
   async function authenticate(modelInfo: ModelInfo, providerInfo: ProviderInfo) {
     const apiKey = opts.parseApiKey(input.request.headers)
-    if (!apiKey) {
+    if (!apiKey || apiKey === "public") {
       if (modelInfo.allowAnonymous) return
       throw new AuthError("Missing API key.")
     }

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

@@ -30,6 +30,7 @@ export const anthropicHelper = {
       service_tier: "standard_only",
     }
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 

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

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

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

@@ -33,6 +33,7 @@ export const oaCompatHelper = {
       ...(body.stream ? { stream_options: { include_usage: true } } : {}),
     }
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 

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

@@ -21,6 +21,7 @@ export const openaiHelper = {
   modifyBody: (body: Record<string, any>) => {
     return body
   },
+  streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
 

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

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

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

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

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

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

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

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

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

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

packages/console/core/package.json

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

packages/console/core/src/billing.ts

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

packages/console/core/src/model.ts

@@ -8,7 +8,7 @@ import { Actor } from "./actor"
 import { Resource } from "@opencode-ai/console-resource"
 
 export namespace ZenData {
-  const FormatSchema = z.enum(["anthropic", "openai", "oa-compat"])
+  const FormatSchema = z.enum(["anthropic", "google", "openai", "oa-compat"])
   export type Format = z.infer<typeof FormatSchema>
 
   const ModelCostSchema = z.object({

packages/console/function/package.json

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

packages/console/function/src/log-processor.ts

@@ -12,7 +12,8 @@ export default {
       if (
         url.pathname !== "/zen/v1/chat/completions" &&
         url.pathname !== "/zen/v1/messages" &&
-        url.pathname !== "/zen/v1/responses"
+        url.pathname !== "/zen/v1/responses" &&
+        !url.pathname.startsWith("/zen/v1/models/")
       )
         return
 

packages/console/mail/package.json

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

packages/desktop/index.html

@@ -8,14 +8,12 @@
     <title>OpenCode</title>
   </head>
   <body class="antialiased overscroll-none select-none text-12-regular">
-    <!-- <script> -->
-    <!--   ;(function () { -->
-    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
-    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
-    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
-    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
-    <!--   })() -->
-    <!-- </script> -->
+    <script>
+      ;(function () {
+        const savedTheme = localStorage.getItem("theme") || "oc-1"
+        document.documentElement.setAttribute("data-theme", savedTheme)
+      })()
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script src="/src/index.tsx" type="module"></script>

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "1.0.61",
+  "version": "1.0.85",
   "description": "",
   "type": "module",
   "scripts": {

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

@@ -266,7 +266,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!existing) {
       const created = await sdk.client.session.create()
       existing = created.data ?? undefined
-      if (existing) navigate(`/session/${existing.id}`)
+      if (existing) navigate(existing.id)
     }
     if (!existing) return
 
@@ -347,7 +347,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       <Show when={store.popoverIsOpen}>
         <div
           class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-[252px] min-h-10
-                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-2xl 
+                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-md
                  border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
         >
           <Show when={flat().length > 0} fallback={<div class="text-text-weak px-2">No matching files</div>}>
@@ -366,7 +366,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
                         {getDirectory(i)}
                       </span>
-                      <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+                      <Show when={!i.endsWith("/")}>
+                        <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+                      </Show>
                     </div>
                   </div>
                   <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
@@ -380,7 +382,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:border-transparent focus-within:shadow-xs-border-select": true,
+          "rounded-md overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
           [props.class ?? ""]: !!props.class,
         }}
       >
@@ -394,17 +396,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             classList={{
-              "w-full p-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
               "[&>[data-type=file]]:text-icon-info-active": true,
             }}
           />
           <Show when={!session.prompt.dirty()}>
-            <div class="absolute top-0 left-0 p-3 text-14-regular text-text-weak pointer-events-none">
+            <div class="absolute top-0 left-0 px-5 py-3 text-14-regular text-text-weak pointer-events-none">
               Plan and build anything
             </div>
           </Show>
         </div>
-        <div class="p-3 flex items-center justify-between">
+        <div class="relative p-3 flex items-center justify-between">
           <div class="flex items-center justify-start gap-1">
             <Select
               options={local.agent.list().map((agent) => agent.name)}
@@ -487,7 +489,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               disabled={!session.prompt.dirty() && !session.working()}
               icon={session.working() ? "stop" : "arrow-up"}
               variant="primary"
-              class="rounded-full"
+              class="h-10 w-8 absolute right-2 bottom-2"
             />
           </Tooltip>
         </div>

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

@@ -0,0 +1,104 @@
+import { useSession } from "@/context/session"
+import { FileIcon } from "@/ui"
+import { getDirectory, getFilename } from "@/utils"
+import { Accordion, Button, Diff, DiffChanges, Icon, IconButton, Tooltip } from "@opencode-ai/ui"
+import { For, Match, Show, Switch } from "solid-js"
+import { StickyAccordionHeader } from "./sticky-accordion-header"
+import { createStore } from "solid-js/store"
+import { useLayout } from "@/context/layout"
+
+export const SessionReview = (props: { split?: boolean; class?: string; hideExpand?: boolean }) => {
+  const layout = useLayout()
+  const session = useSession()
+  const [store, setStore] = createStore({
+    open: session.diffs().map((d) => d.file),
+  })
+
+  const handleChange = (open: string[]) => {
+    setStore("open", open)
+  }
+
+  const handleExpandOrCollapseAll = () => {
+    if (store.open.length > 0) {
+      setStore("open", [])
+    } else {
+      setStore(
+        "open",
+        session.diffs().map((d) => d.file),
+      )
+    }
+  }
+
+  return (
+    <div
+      classList={{
+        "flex flex-col gap-3 h-full overflow-y-auto no-scrollbar": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      <div class="sticky top-0 z-20 bg-background-stronger h-8 shrink-0 flex justify-between items-center self-stretch">
+        <div class="text-14-medium text-text-strong">Session changes</div>
+        <div class="flex items-center gap-x-4 pr-px">
+          <Button size="normal" icon="chevron-grabber-vertical" onClick={handleExpandOrCollapseAll}>
+            <Switch>
+              <Match when={store.open.length > 0}>Collapse all</Match>
+              <Match when={true}>Expand all</Match>
+            </Switch>
+          </Button>
+          <Show when={!props.hideExpand}>
+            <Tooltip value="Open in tab">
+              <IconButton
+                icon="expand"
+                variant="ghost"
+                onClick={() => {
+                  layout.review.tab()
+                  session.layout.setActiveTab("review")
+                }}
+              />
+            </Tooltip>
+          </Show>
+        </div>
+      </div>
+      <Accordion multiple value={store.open} onChange={handleChange}>
+        <For each={session.diffs()}>
+          {(diff) => (
+            <Accordion.Item value={diff.file}>
+              <StickyAccordionHeader class="top-11 data-expanded:before:-top-11">
+                <Accordion.Trigger class="bg-background-stronger">
+                  <div class="flex items-center justify-between w-full gap-5">
+                    <div class="grow flex items-center gap-5 min-w-0">
+                      <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                      <div class="flex grow min-w-0">
+                        <Show when={diff.file.includes("/")}>
+                          <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
+                        </Show>
+                        <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                      </div>
+                    </div>
+                    <div class="shrink-0 flex gap-4 items-center justify-end">
+                      <DiffChanges changes={diff} />
+                      <Icon name="chevron-grabber-vertical" size="small" />
+                    </div>
+                  </div>
+                </Accordion.Trigger>
+              </StickyAccordionHeader>
+              <Accordion.Content>
+                <Diff
+                  diffStyle={props.split ? "split" : "unified"}
+                  before={{
+                    name: diff.file!,
+                    contents: diff.before!,
+                  }}
+                  after={{
+                    name: diff.file!,
+                    contents: diff.after!,
+                  }}
+                />
+              </Accordion.Content>
+            </Accordion.Item>
+          )}
+        </For>
+      </Accordion>
+    </div>
+  )
+}

packages/desktop/src/components/sticky-accordion-header.tsx

@@ -0,0 +1,17 @@
+import { Accordion } from "@opencode-ai/ui"
+import { ParentProps } from "solid-js"
+
+export function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
+  return (
+    <Accordion.Header
+      classList={{
+        "sticky top-0 data-expanded:z-10": true,
+        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
+        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      {props.children}
+    </Accordion.Header>
+  )
+}

packages/desktop/src/context/global-sdk.tsx

@@ -0,0 +1,32 @@
+import { createOpencodeClient, type Event } from "@opencode-ai/sdk/client"
+import { createSimpleContext } from "./helper"
+import { createGlobalEmitter } from "@solid-primitives/event-bus"
+import { onCleanup } from "solid-js"
+
+export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
+  name: "GlobalSDK",
+  init: (props: { url: string }) => {
+    const abort = new AbortController()
+    const sdk = createOpencodeClient({
+      baseUrl: props.url,
+      signal: abort.signal,
+    })
+
+    const emitter = createGlobalEmitter<{
+      [key: string]: Event
+    }>()
+
+    sdk.global.event().then(async (events) => {
+      for await (const event of events.stream) {
+        // console.log("event", event)
+        emitter.emit(event.directory, event.payload)
+      }
+    })
+
+    onCleanup(() => {
+      abort.abort()
+    })
+
+    return { url: props.url, client: sdk, event: emitter }
+  },
+})

packages/desktop/src/context/global-sync.tsx

@@ -0,0 +1,183 @@
+import type {
+  Message,
+  Agent,
+  Provider,
+  Session,
+  Part,
+  Config,
+  Path,
+  File,
+  FileNode,
+  Project,
+  FileDiff,
+  Todo,
+  SessionStatus,
+} from "@opencode-ai/sdk"
+import { createStore, produce, reconcile } from "solid-js/store"
+import { Binary } from "@/utils/binary"
+import { createSimpleContext } from "./helper"
+import { useGlobalSDK } from "./global-sdk"
+
+type State = {
+  ready: boolean
+  provider: Provider[]
+  agent: Agent[]
+  project: Project
+  config: Config
+  path: Path
+  session: Session[]
+  session_status: {
+    [sessionID: string]: SessionStatus
+  }
+  session_diff: {
+    [sessionID: string]: FileDiff[]
+  }
+  todo: {
+    [sessionID: string]: Todo[]
+  }
+  limit: number
+  message: {
+    [sessionID: string]: Message[]
+  }
+  part: {
+    [messageID: string]: Part[]
+  }
+  node: FileNode[]
+  changes: File[]
+}
+
+export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimpleContext({
+  name: "GlobalSync",
+  init: () => {
+    const [globalStore, setGlobalStore] = createStore<{
+      ready: boolean
+      defaultProject?: Project // TODO: remove this when we can select projects
+      projects: Project[]
+      children: Record<string, State>
+    }>({
+      ready: false,
+      projects: [],
+      children: {},
+    })
+
+    const children: Record<string, ReturnType<typeof createStore<State>>> = {}
+
+    function child(directory: string) {
+      if (!children[directory]) {
+        setGlobalStore("children", directory, {
+          project: { id: "", worktree: "", time: { created: 0, initialized: 0 } },
+          config: {},
+          path: { state: "", config: "", worktree: "", directory: "" },
+          ready: false,
+          agent: [],
+          provider: [],
+          session: [],
+          session_status: {},
+          session_diff: {},
+          todo: {},
+          limit: 10,
+          message: {},
+          part: {},
+          node: [],
+          changes: [],
+        })
+        children[directory] = createStore(globalStore.children[directory])
+      }
+      return children[directory]
+    }
+
+    const sdk = useGlobalSDK()
+    sdk.event.listen((e) => {
+      const directory = e.name
+      const [store, setStore] = child(directory)
+
+      const event = e.details
+      switch (event.type) {
+        case "session.updated": {
+          const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
+          if (result.found) {
+            setStore("session", result.index, reconcile(event.properties.info))
+            break
+          }
+          setStore(
+            "session",
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties.info)
+            }),
+          )
+          break
+        }
+        case "session.diff":
+          setStore("session_diff", event.properties.sessionID, event.properties.diff)
+          break
+        case "todo.updated":
+          setStore("todo", event.properties.sessionID, event.properties.todos)
+          break
+        case "session.status": {
+          setStore("session_status", event.properties.sessionID, event.properties.status)
+          break
+        }
+        case "message.updated": {
+          const messages = store.message[event.properties.info.sessionID]
+          if (!messages) {
+            setStore("message", event.properties.info.sessionID, [event.properties.info])
+            break
+          }
+          const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
+          if (result.found) {
+            setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
+            break
+          }
+          setStore(
+            "message",
+            event.properties.info.sessionID,
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties.info)
+            }),
+          )
+          break
+        }
+        case "message.part.updated": {
+          const part = event.properties.part
+          const parts = store.part[part.messageID]
+          if (!parts) {
+            setStore("part", part.messageID, [part])
+            break
+          }
+          const result = Binary.search(parts, part.id, (p) => p.id)
+          if (result.found) {
+            setStore("part", part.messageID, result.index, reconcile(part))
+            break
+          }
+          setStore(
+            "part",
+            part.messageID,
+            produce((draft) => {
+              draft.splice(result.index, 0, part)
+            }),
+          )
+          break
+        }
+      }
+    })
+
+    Promise.all([
+      sdk.client.project.list().then((x) =>
+        setGlobalStore(
+          "projects",
+          x.data!.filter((x) => !x.worktree.includes("opencode-test")),
+        ),
+      ),
+      // TODO: remove this when we can select projects
+      sdk.client.project.current().then((x) => setGlobalStore("defaultProject", x.data)),
+    ]).then(() => setGlobalStore("ready", true))
+
+    return {
+      data: globalStore,
+      get ready() {
+        return globalStore.ready
+      },
+      child,
+    }
+  },
+})

packages/desktop/src/context/layout.tsx

@@ -0,0 +1,75 @@
+import { createStore } from "solid-js/store"
+import { createMemo } from "solid-js"
+import { createSimpleContext } from "./helper"
+import { makePersisted } from "@solid-primitives/storage"
+import { useGlobalSync } from "./global-sync"
+
+export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
+  name: "Layout",
+  init: () => {
+    const globalSync = useGlobalSync()
+    const [store, setStore] = makePersisted(
+      createStore({
+        projects: [] as { directory: string; expanded: boolean }[],
+        sidebar: {
+          opened: true,
+          width: 280,
+        },
+        review: {
+          state: "pane" as "pane" | "tab",
+        },
+      }),
+      {
+        name: "___default-layout",
+      },
+    )
+
+    return {
+      projects: {
+        list: createMemo(() =>
+          globalSync.data.defaultProject
+            ? [{ directory: globalSync.data.defaultProject!.worktree, expanded: true }, ...store.projects]
+            : store.projects,
+        ),
+        open(directory: string) {
+          if (store.projects.find((x) => x.directory === directory)) return
+          setStore("projects", (x) => [...x, { directory, expanded: true }])
+        },
+        close(directory: string) {
+          setStore("projects", (x) => x.filter((x) => x.directory !== directory))
+        },
+        expand(directory: string) {
+          setStore("projects", (x) => x.map((x) => (x.directory === directory ? { ...x, expanded: true } : x)))
+        },
+        collapse(directory: string) {
+          setStore("projects", (x) => x.map((x) => (x.directory === directory ? { ...x, expanded: false } : x)))
+        },
+      },
+      sidebar: {
+        opened: createMemo(() => store.sidebar.opened),
+        open() {
+          setStore("sidebar", "opened", true)
+        },
+        close() {
+          setStore("sidebar", "opened", false)
+        },
+        toggle() {
+          setStore("sidebar", "opened", (x) => !x)
+        },
+        width: createMemo(() => store.sidebar.width),
+        resize(width: number) {
+          setStore("sidebar", "width", width)
+        },
+      },
+      review: {
+        state: createMemo(() => store.review?.state ?? "closed"),
+        pane() {
+          setStore("review", "state", "pane")
+        },
+        tab() {
+          setStore("review", "state", "tab")
+        },
+      },
+    }
+  },
+})

packages/desktop/src/context/local.tsx

@@ -5,7 +5,7 @@ import type { FileContent, FileNode, Model, Provider, File as FileStatus } from
 import { createSimpleContext } from "./helper"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
-import { makePersisted } from "@solid-primitives/storage"
+import { base64Encode } from "@/utils"
 
 export type LocalFile = FileNode &
   Partial<{
@@ -457,60 +457,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     })()
 
-    const layout = (() => {
-      const [store, setStore] = makePersisted(
-        createStore({
-          sidebar: {
-            opened: true,
-            width: 240,
-          },
-          review: {
-            state: "closed" as "open" | "closed" | "tab",
-          },
-        }),
-        {
-          name: "default-layout",
-        },
-      )
-
-      return {
-        sidebar: {
-          opened: createMemo(() => store.sidebar.opened),
-          open() {
-            setStore("sidebar", "opened", true)
-          },
-          close() {
-            setStore("sidebar", "opened", false)
-          },
-          toggle() {
-            setStore("sidebar", "opened", (x) => !x)
-          },
-          width: createMemo(() => store.sidebar.width),
-          resize(width: number) {
-            setStore("sidebar", "width", width)
-          },
-        },
-        review: {
-          state: createMemo(() => store.review?.state ?? "closed"),
-          open() {
-            setStore("review", "state", "open")
-          },
-          close() {
-            setStore("review", "state", "closed")
-          },
-          tab() {
-            setStore("review", "state", "tab")
-          },
-        },
-      }
-    })()
-
     const result = {
+      slug: createMemo(() => base64Encode(sdk.directory)),
       model,
       agent,
       file,
       context,
-      layout,
     }
     return result
   },

packages/desktop/src/context/sdk.tsx

@@ -2,36 +2,31 @@ import { createOpencodeClient, type Event } from "@opencode-ai/sdk/client"
 import { createSimpleContext } from "./helper"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
 import { onCleanup } from "solid-js"
+import { useGlobalSDK } from "./global-sdk"
 
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
-  init: (props: { url: string }) => {
+  init: (props: { directory: string }) => {
+    const globalSDK = useGlobalSDK()
     const abort = new AbortController()
     const sdk = createOpencodeClient({
-      baseUrl: props.url,
+      baseUrl: globalSDK.url,
       signal: abort.signal,
-      fetch: (req) => {
-        // @ts-ignore
-        req.timeout = false
-        return fetch(req)
-      },
+      directory: props.directory,
     })
 
     const emitter = createGlobalEmitter<{
       [key in Event["type"]]: Extract<Event, { type: key }>
     }>()
 
-    sdk.event.subscribe().then(async (events) => {
-      for await (const event of events.stream) {
-        console.log("event", event.type)
-        emitter.emit(event.type, event)
-      }
+    globalSDK.event.on(props.directory, async (event) => {
+      emitter.emit(event.type, event)
     })
 
     onCleanup(() => {
       abort.abort()
     })
 
-    return { client: sdk, event: emitter }
+    return { directory: props.directory, client: sdk, event: emitter }
   },
 })

packages/desktop/src/context/session.tsx

@@ -3,15 +3,20 @@ import { createSimpleContext } from "./helper"
 import { batch, createEffect, createMemo } from "solid-js"
 import { useSync } from "./sync"
 import { makePersisted } from "@solid-primitives/storage"
-import { TextSelection, useLocal } from "./local"
+import { TextSelection } from "./local"
 import { pipe, sumBy } from "remeda"
 import { AssistantMessage } from "@opencode-ai/sdk"
+import { useParams } from "@solidjs/router"
+import { base64Encode } from "@/utils"
 
 export const { use: useSession, provider: SessionProvider } = createSimpleContext({
   name: "Session",
-  init: (props: { sessionId?: string }) => {
+  init: () => {
+    const params = useParams()
     const sync = useSync()
-    const local = useLocal()
+    const name = createMemo(
+      () => `___${base64Encode(sync.data.project.worktree)}/session${params.id ? "/" + params.id : ""}`,
+    )
 
     const [store, setStore] = makePersisted(
       createStore<{
@@ -30,17 +35,17 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
         cursor: undefined,
       }),
       {
-        name: props.sessionId ?? "new-session",
+        name: name(),
       },
     )
 
     createEffect(() => {
-      if (!props.sessionId) return
-      sync.session.sync(props.sessionId)
+      if (!params.id) return
+      sync.session.sync(params.id)
     })
 
-    const info = createMemo(() => (props.sessionId ? sync.session.get(props.sessionId) : undefined))
-    const messages = createMemo(() => (props.sessionId ? (sync.data.message[props.sessionId] ?? []) : []))
+    const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+    const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
     const userMessages = createMemo(() =>
       messages()
         .filter((m) => m.role === "user")
@@ -53,16 +58,13 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
       if (!store.messageId) return lastUserMessage()
       return userMessages()?.find((m) => m.id === store.messageId)
     })
-    const working = createMemo(() => {
-      if (!props.sessionId) return false
-      const last = lastUserMessage()
-      if (!last) return false
-      const assistantMessages = sync.data.message[props.sessionId]?.filter(
-        (m) => m.role === "assistant" && m.parentID == last?.id,
-      ) as AssistantMessage[]
-      const error = assistantMessages?.find((m) => m?.error)?.error
-      return !last?.summary?.body && !error
-    })
+    const status = createMemo(
+      () =>
+        sync.data.session_status[params.id] ?? {
+          type: "idle",
+        },
+    )
+    const working = createMemo(() => status()?.type !== "idle")
 
     const cost = createMemo(() => {
       const total = pipe(
@@ -81,7 +83,7 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
     const model = createMemo(() =>
       last() ? sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID] : undefined,
     )
-    const diffs = createMemo(() => (props.sessionId ? (sync.data.session_diff[props.sessionId] ?? []) : []))
+    const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
 
     const tokens = createMemo(() => {
       if (!last()) return
@@ -97,8 +99,11 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
     })
 
     return {
-      id: props.sessionId,
+      get id() {
+        return params.id
+      },
       info,
+      status,
       working,
       diffs,
       prompt: {
@@ -140,9 +145,6 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
             setStore("tabs", "active", undefined)
             return
           }
-          if (tab.startsWith("file://")) {
-            await local.file.open(tab.replace("file://", ""))
-          }
           if (tab !== "review") {
             if (!store.tabs.opened.includes(tab)) {
               setStore("tabs", "opened", [...store.tabs.opened, tab])

packages/desktop/src/context/sync.tsx

@@ -1,133 +1,17 @@
-import type {
-  Message,
-  Agent,
-  Provider,
-  Session,
-  Part,
-  Config,
-  Path,
-  File,
-  FileNode,
-  Project,
-  FileDiff,
-  Todo,
-} from "@opencode-ai/sdk"
-import { createStore, produce, reconcile } from "solid-js/store"
+import type { Part } from "@opencode-ai/sdk"
+import { produce } from "solid-js/store"
 import { createMemo } from "solid-js"
 import { Binary } from "@/utils/binary"
 import { createSimpleContext } from "./helper"
+import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 
 export const { use: useSync, provider: SyncProvider } = createSimpleContext({
   name: "Sync",
   init: () => {
-    const [store, setStore] = createStore<{
-      ready: boolean
-      provider: Provider[]
-      agent: Agent[]
-      project: Project
-      config: Config
-      path: Path
-      session: Session[]
-      session_diff: {
-        [sessionID: string]: FileDiff[]
-      }
-      todo: {
-        [sessionID: string]: Todo[]
-      }
-      limit: number
-      message: {
-        [sessionID: string]: Message[]
-      }
-      part: {
-        [messageID: string]: Part[]
-      }
-      node: FileNode[]
-      changes: File[]
-    }>({
-      project: { id: "", worktree: "", time: { created: 0, initialized: 0 } },
-      config: {},
-      path: { state: "", config: "", worktree: "", directory: "" },
-      ready: false,
-      agent: [],
-      provider: [],
-      session: [],
-      session_diff: {},
-      todo: {},
-      limit: 10,
-      message: {},
-      part: {},
-      node: [],
-      changes: [],
-    })
-
+    const globalSync = useGlobalSync()
     const sdk = useSDK()
-    sdk.event.listen((e) => {
-      const event = e.details
-      switch (event.type) {
-        case "session.updated": {
-          const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
-          if (result.found) {
-            setStore("session", result.index, reconcile(event.properties.info))
-            break
-          }
-          setStore(
-            "session",
-            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.info)
-            }),
-          )
-          break
-        }
-        case "session.diff":
-          setStore("session_diff", event.properties.sessionID, event.properties.diff)
-          break
-        case "todo.updated":
-          setStore("todo", event.properties.sessionID, event.properties.todos)
-          break
-        case "message.updated": {
-          const messages = store.message[event.properties.info.sessionID]
-          if (!messages) {
-            setStore("message", event.properties.info.sessionID, [event.properties.info])
-            break
-          }
-          const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
-          if (result.found) {
-            setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
-            break
-          }
-          setStore(
-            "message",
-            event.properties.info.sessionID,
-            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.info)
-            }),
-          )
-          break
-        }
-        case "message.part.updated": {
-          const part = sanitizePart(event.properties.part)
-          const parts = store.part[part.messageID]
-          if (!parts) {
-            setStore("part", part.messageID, [part])
-            break
-          }
-          const result = Binary.search(parts, part.id, (p) => p.id)
-          if (result.found) {
-            setStore("part", part.messageID, result.index, reconcile(part))
-            break
-          }
-          setStore(
-            "part",
-            part.messageID,
-            produce((draft) => {
-              draft.splice(result.index, 0, part)
-            }),
-          )
-          break
-        }
-      }
-    })
+    const [store, setStore] = globalSync.child(sdk.directory)
 
     const load = {
       project: () => sdk.client.project.current().then((x) => setStore("project", x.data!)),
@@ -142,6 +26,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             .slice(0, store.limit)
           setStore("session", sessions)
         }),
+      status: () => sdk.client.session.status().then((x) => setStore("session_status", x.data!)),
       config: () => sdk.client.config.get().then((x) => setStore("config", x.data!)),
       changes: () => sdk.client.file.status().then((x) => setStore("changes", x.data!)),
       node: () => sdk.client.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),

packages/desktop/src/hooks/create-session-seen.ts

@@ -0,0 +1,20 @@
+import { createSignal, onCleanup, onMount } from "solid-js"
+import { isServer } from "solid-js/web"
+
+export function createSessionSeen(key: string, delay = 1000) {
+  // 1. Initialize state based on storage (default to true on server to avoid flash)
+  const storageKey = `app:seen:${key}`
+  const [hasSeen] = createSignal(!isServer && sessionStorage.getItem(storageKey) === "true")
+
+  onMount(() => {
+    // 2. If we haven't seen it, mark it as seen for NEXT time
+    if (!hasSeen()) {
+      const timer = setTimeout(() => {
+        sessionStorage.setItem(storageKey, "true")
+      }, delay)
+      onCleanup(() => clearTimeout(timer))
+    }
+  })
+
+  return hasSeen
+}

packages/desktop/src/index.css

@@ -1 +1,7 @@
 @import "@opencode-ai/ui/styles/tailwind";
+
+:root {
+  a {
+    cursor: default;
+  }
+}

packages/desktop/src/index.tsx

@@ -1,15 +1,18 @@
 /* @refresh reload */
 import "@/index.css"
 import { render } from "solid-js/web"
-import { Router, Route } from "@solidjs/router"
+import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
 import { Fonts, MarkedProvider } from "@opencode-ai/ui"
-import { SDKProvider } from "./context/sdk"
-import { SyncProvider } from "./context/sync"
-import { LocalProvider } from "./context/local"
+import { GlobalSyncProvider, useGlobalSync } from "./context/global-sync"
 import Layout from "@/pages/layout"
-import SessionLayout from "@/pages/session-layout"
+import DirectoryLayout from "@/pages/directory-layout"
 import Session from "@/pages/session"
+import { LayoutProvider } from "./context/layout"
+import { GlobalSDKProvider } from "./context/global-sdk"
+import { SessionProvider } from "./context/session"
+import { base64Encode } from "./utils"
+import { createMemo, Show } from "solid-js"
 
 const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
 const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
@@ -30,20 +33,38 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 render(
   () => (
     <MarkedProvider>
-      <SDKProvider url={url}>
-        <SyncProvider>
-          <LocalProvider>
+      <GlobalSDKProvider url={url}>
+        <GlobalSyncProvider>
+          <LayoutProvider>
             <MetaProvider>
               <Fonts />
               <Router root={Layout}>
-                <Route path={["/", "/session"]} component={SessionLayout}>
-                  <Route path="/:id?" component={Session} />
+                <Route
+                  path="/"
+                  component={() => {
+                    const globalSync = useGlobalSync()
+                    const slug = createMemo(() => base64Encode(globalSync.data.defaultProject!.worktree))
+                    return <Navigate href={`${slug()}/session`} />
+                  }}
+                />
+                <Route path="/:dir" component={DirectoryLayout}>
+                  <Route path="/" component={() => <Navigate href="session" />} />
+                  <Route
+                    path="/session/:id?"
+                    component={(p) => (
+                      <Show when={p.params.id || true} keyed>
+                        <SessionProvider>
+                          <Session />
+                        </SessionProvider>
+                      </Show>
+                    )}
+                  />
                 </Route>
               </Router>
             </MetaProvider>
-          </LocalProvider>
-        </SyncProvider>
-      </SDKProvider>
+          </LayoutProvider>
+        </GlobalSyncProvider>
+      </GlobalSDKProvider>
     </MarkedProvider>
   ),
   root!,

packages/desktop/src/pages/directory-layout.tsx

@@ -0,0 +1,23 @@
+import { createMemo, type ParentProps } from "solid-js"
+import { useParams } from "@solidjs/router"
+import { SDKProvider } from "@/context/sdk"
+import { SyncProvider } from "@/context/sync"
+import { LocalProvider } from "@/context/local"
+import { useGlobalSync } from "@/context/global-sync"
+import { base64Decode } from "@/utils"
+
+export default function Layout(props: ParentProps) {
+  const params = useParams()
+  const sync = useGlobalSync()
+  const directory = createMemo(() => {
+    const decoded = base64Decode(params.dir)
+    return sync.data.projects.find((x) => x.worktree === decoded)?.worktree ?? "/"
+  })
+  return (
+    <SDKProvider directory={directory()}>
+      <SyncProvider>
+        <LocalProvider>{props.children}</LocalProvider>
+      </SyncProvider>
+    </SDKProvider>
+  )
+}

packages/desktop/src/pages/home.tsx

@@ -0,0 +1,20 @@
+import { useGlobalSync } from "@/context/global-sync"
+import { base64Encode, getFilename } from "@/utils"
+import { For } from "solid-js"
+import { A } from "@solidjs/router"
+import { Button } from "@opencode-ai/ui"
+
+export default function Home() {
+  const sync = useGlobalSync()
+  return (
+    <div class="flex flex-col gap-3">
+      <For each={sync.data.projects}>
+        {(project) => (
+          <Button as={A} href={base64Encode(project.worktree)}>
+            {getFilename(project.worktree)}
+          </Button>
+        )}
+      </For>
+    </div>
+  )
+}

packages/desktop/src/pages/layout.tsx

@@ -1,116 +1,192 @@
-import { Button, Tooltip, DiffChanges, IconButton } from "@opencode-ai/ui"
+import { Button, Tooltip, DiffChanges, IconButton, Mark, Icon, Collapsible } from "@opencode-ai/ui"
 import { createMemo, For, ParentProps, Show } from "solid-js"
 import { DateTime } from "luxon"
-import { useSync } from "@/context/sync"
 import { A, useParams } from "@solidjs/router"
-import { useLocal } from "@/context/local"
+import { useLayout } from "@/context/layout"
+import { useGlobalSync } from "@/context/global-sync"
+import { base64Encode, getFilename } from "@/utils"
 
 export default function Layout(props: ParentProps) {
   const params = useParams()
-  const sync = useSync()
-  const local = useLocal()
+  const globalSync = useGlobalSync()
+  const layout = useLayout()
+
+  const handleOpenProject = async () => {
+    // layout.projects.open(dir.)
+  }
 
   return (
     <div class="relative h-screen flex flex-col">
-      <header class="hidden h-12 shrink-0 bg-background-strong border-b border-border-weak-base"></header>
-      <div class="h-[calc(100vh-0rem)] flex">
+      <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base">
+        <A
+          href="/"
+          classList={{
+            "w-12 shrink-0 px-4 py-3.5": true,
+            "flex items-center justify-start self-stretch": true,
+            "border-r border-border-weak-base": true,
+          }}
+          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
+        >
+          <Mark class="shrink-0" />
+        </A>
+      </header>
+      <div class="h-[calc(100vh-3rem)] flex">
         <div
           classList={{
-            "@container w-14 pb-4 shrink-0 bg-background-weak": true,
-            "flex flex-col items-start self-stretch justify-between": true,
+            "@container w-12 pb-5 shrink-0 bg-background-base": true,
+            "flex flex-col gap-5.5 items-start self-stretch justify-between": true,
             "border-r border-border-weak-base": true,
-            "w-70": local.layout.sidebar.opened(),
           }}
+          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
         >
-          <div class="flex flex-col justify-center items-start gap-4 self-stretch py-2 overflow-hidden mx-auto @[4rem]:mx-0">
-            <div class="h-8 shrink-0 flex items-center self-stretch px-3">
-              <Tooltip placement="right" value="Collapse sidebar">
-                <IconButton icon="layout-left" variant="ghost" size="large" onClick={local.layout.sidebar.toggle} />
-              </Tooltip>
-            </div>
-            <div class="w-full px-3">
-              <Button as={A} href="/session" class="hidden @[4rem]:flex w-full" size="large" icon="edit-small-2">
-                New Session
+          <div class="grow flex flex-col items-start self-stretch gap-4 p-2 min-h-0">
+            <Tooltip class="shrink-0" placement="right" value="Toggle sidebar" inactive={layout.sidebar.opened()}>
+              <Button
+                variant="ghost"
+                size="large"
+                class="group/sidebar-toggle shrink-0 w-full text-left justify-start"
+                onClick={layout.sidebar.toggle}
+              >
+                <div class="relative -ml-px flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                  <Icon
+                    name={layout.sidebar.opened() ? "layout-left" : "layout-right"}
+                    size="small"
+                    class="group-hover/sidebar-toggle:hidden"
+                  />
+                  <Icon
+                    name={layout.sidebar.opened() ? "layout-left-partial" : "layout-right-partial"}
+                    size="small"
+                    class="hidden group-hover/sidebar-toggle:inline-block"
+                  />
+                  <Icon
+                    name={layout.sidebar.opened() ? "layout-left-full" : "layout-right-full"}
+                    size="small"
+                    class="hidden group-active/sidebar-toggle:inline-block"
+                  />
+                </div>
+                <Show when={layout.sidebar.opened()}>
+                  <div class="hidden group-hover/sidebar-toggle:block group-active/sidebar-toggle:block text-text-base">
+                    Toggle sidebar
+                  </div>
+                </Show>
               </Button>
-              <Tooltip placement="right" value="New session">
-                <IconButton as={A} href="/session" icon="edit-small-2" size="large" class="@[4rem]:hidden" />
-              </Tooltip>
-            </div>
-            <div class="hidden @[4rem]:flex size-full overflow-y-auto no-scrollbar flex-col flex-1 px-3">
-              <nav class="w-full">
-                <For each={sync.data.session}>
-                  {(session) => {
-                    const updated = createMemo(() => DateTime.fromMillis(session.time.updated))
+            </Tooltip>
+            <div class="flex flex-col justify-center items-start gap-4 self-stretch min-h-0">
+              <div class="hidden @[4rem]:flex size-full flex-col grow overflow-y-auto no-scrollbar">
+                <For each={layout.projects.list()}>
+                  {(project) => {
+                    const [store] = globalSync.child(project.directory)
+                    const slug = createMemo(() => base64Encode(project.directory))
                     return (
-                      <A
-                        data-active={session.id === params.id}
-                        href={`/session/${session.id}`}
-                        class="group/session focus:outline-none cursor-default"
-                      >
-                        <Tooltip placement="right" value={session.title}>
-                          <div
-                            class="w-full mb-1.5 px-3 py-1 rounded-md 
-                               group-data-[active=true]/session:bg-surface-raised-base-hover
-                               group-hover/session:bg-surface-raised-base-hover
-                               group-focus/session:bg-surface-raised-base-hover"
-                          >
-                            <div class="flex items-center self-stretch gap-6 justify-between">
-                              <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
-                                {session.title}
-                              </span>
-                              <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
-                                {Math.abs(updated().diffNow().as("seconds")) < 60
-                                  ? "Now"
-                                  : updated()
-                                      .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
-                                      ?.replace(" ago", "")
-                                      ?.replace(/ days?/, "d")
-                                      ?.replace(" min.", "m")
-                                      ?.replace(" hr.", "h")}
-                              </span>
-                            </div>
-                            <div class="flex justify-between items-center self-stretch">
-                              <span class="text-12-regular text-text-weak">{`${session.summary?.files || "No"} file${session.summary?.files !== 1 ? "s" : ""} changed`}</span>
-                              <Show when={session.summary}>{(summary) => <DiffChanges changes={summary()} />}</Show>
-                            </div>
-                          </div>
-                        </Tooltip>
-                      </A>
+                      <Collapsible variant="ghost" defaultOpen class="gap-2">
+                        <Button
+                          as={"div"}
+                          variant="ghost"
+                          class="flex items-center justify-between gap-3 w-full h-8 pl-2 pr-2.25 self-stretch"
+                        >
+                          <Collapsible.Trigger class="p-0 text-left text-14-medium text-text-strong grow min-w-0 truncate">
+                            {getFilename(project.directory)}
+                          </Collapsible.Trigger>
+                          <IconButton as={A} href={`${slug()}/session`} icon="plus-small" size="normal" />
+                        </Button>
+                        <Collapsible.Content>
+                          <nav class="w-full flex flex-col gap-1.5">
+                            <For each={store.session}>
+                              {(session) => {
+                                const updated = createMemo(() => DateTime.fromMillis(session.time.updated))
+                                return (
+                                  <A
+                                    data-active={session.id === params.id}
+                                    href={`${slug()}/session/${session.id}`}
+                                    class="group/session focus:outline-none cursor-default"
+                                  >
+                                    <Tooltip placement="right" value={session.title}>
+                                      <div
+                                        class="w-full px-2 py-1 rounded-md 
+                                               group-data-[active=true]/session:bg-surface-raised-base-hover
+                                               group-hover/session:bg-surface-raised-base-hover
+                                               group-focus/session:bg-surface-raised-base-hover"
+                                      >
+                                        <div class="flex items-center self-stretch gap-6 justify-between">
+                                          <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                                            {session.title}
+                                          </span>
+                                          <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
+                                            {Math.abs(updated().diffNow().as("seconds")) < 60
+                                              ? "Now"
+                                              : updated()
+                                                  .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
+                                                  ?.replace(" ago", "")
+                                                  ?.replace(/ days?/, "d")
+                                                  ?.replace(" min.", "m")
+                                                  ?.replace(" hr.", "h")}
+                                          </span>
+                                        </div>
+                                        <div class="hidden _flex justify-between items-center self-stretch">
+                                          <span class="text-12-regular text-text-weak">{`${session.summary?.files || "No"} file${session.summary?.files !== 1 ? "s" : ""} changed`}</span>
+                                          <Show when={session.summary}>
+                                            {(summary) => <DiffChanges changes={summary()} />}
+                                          </Show>
+                                        </div>
+                                      </div>
+                                    </Tooltip>
+                                  </A>
+                                )
+                              }}
+                            </For>
+                          </nav>
+                          {/* <Show when={sync.session.more()}> */}
+                          {/*   <button */}
+                          {/*     class="shrink-0 self-start p-3 text-12-medium text-text-weak hover:text-text-strong" */}
+                          {/*     onClick={() => sync.session.fetch()} */}
+                          {/*   > */}
+                          {/*     Show more */}
+                          {/*   </button> */}
+                          {/* </Show> */}
+                        </Collapsible.Content>
+                      </Collapsible>
                     )
                   }}
                 </For>
-              </nav>
-              <Show when={sync.session.more()}>
-                <button
-                  class="shrink-0 self-start p-3 text-12-medium text-text-weak hover:text-text-strong"
-                  onClick={() => sync.session.fetch()}
-                >
-                  Show more
-                </button>
-              </Show>
+              </div>
             </div>
           </div>
-          <div class="flex flex-col items-start shrink-0 px-3 py-1 mx-auto @[4rem]:mx-0">
-            <Button
-              as={"a"}
-              href="https://opencode.ai/desktop-feedback"
-              target="_blank"
-              class="hidden @[4rem]:flex w-full text-12-medium text-text-base stroke-[1.5px]"
-              variant="ghost"
-              icon="speech-bubble"
-            >
-              Share feedback
-            </Button>
-            <Tooltip placement="right" value="Share feedback">
-              <IconButton
+          <div class="flex flex-col gap-1.5 self-stretch items-start shrink-0 px-2 py-3">
+            <Tooltip placement="right" value="Open project" inactive={layout.sidebar.opened()}>
+              <Button
+                disabled
+                class="flex w-full text-left justify-start text-12-medium text-text-base stroke-[1.5px]"
+                variant="ghost"
+                size="large"
+                icon="folder-add-left"
+                onClick={handleOpenProject}
+              >
+                <Show when={layout.sidebar.opened()}>Open project</Show>
+              </Button>
+            </Tooltip>
+            <Tooltip placement="right" value="Settings" inactive={layout.sidebar.opened()}>
+              <Button
+                disabled
+                class="flex w-full text-left justify-start text-12-medium text-text-base stroke-[1.5px]"
+                variant="ghost"
+                size="large"
+                icon="settings-gear"
+              >
+                <Show when={layout.sidebar.opened()}>Settings</Show>
+              </Button>
+            </Tooltip>
+            <Tooltip placement="right" value="Share feedback" inactive={layout.sidebar.opened()}>
+              <Button
                 as={"a"}
                 href="https://opencode.ai/desktop-feedback"
                 target="_blank"
-                icon="speech-bubble"
+                class="flex w-full text-left justify-start text-12-medium text-text-base stroke-[1.5px]"
                 variant="ghost"
                 size="large"
-                class="@[4rem]:hidden stroke-[1.5px]"
-              />
+                icon="bubble-5"
+              >
+                <Show when={layout.sidebar.opened()}>Share feedback</Show>
+              </Button>
             </Tooltip>
           </div>
         </div>

packages/desktop/src/pages/session-layout.tsx

@@ -1,12 +0,0 @@
-import { Show, type ParentProps } from "solid-js"
-import { SessionProvider } from "@/context/session"
-import { useParams } from "@solidjs/router"
-
-export default function Layout(props: ParentProps) {
-  const params = useParams()
-  return (
-    <Show when={params.id || true} keyed>
-      <SessionProvider sessionId={params.id}>{props.children}</SessionProvider>
-    </Show>
-  )
-}

packages/desktop/src/pages/session.tsx

@@ -13,7 +13,6 @@ import {
   Code,
   Tooltip,
   ProgressCircle,
-  Button,
 } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import { MessageProgress } from "@/components/message-progress"
@@ -44,14 +43,19 @@ import {
   useDragDropContext,
 } from "@thisbeyond/solid-dnd"
 import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
-import type { JSX, ParentProps } from "solid-js"
+import type { JSX } from "solid-js"
 import { useSync } from "@/context/sync"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
 import { Markdown } from "@opencode-ai/ui"
 import { Spinner } from "@/components/spinner"
 import { useSession } from "@/context/session"
+import { StickyAccordionHeader } from "@/components/sticky-accordion-header"
+import { SessionReview } from "@/components/session-review"
+import { useLayout } from "@/context/layout"
+import { createSessionSeen } from "@/hooks/create-session-seen"
 
 export default function Page() {
+  const layout = useLayout()
   const local = useLocal()
   const sync = useSync()
   const session = useSession()
@@ -83,6 +87,15 @@ export default function Page() {
       setStore("fileSelectOpen", true)
       return
     }
+    if (event.ctrlKey && event.key.toLowerCase() === "t") {
+      event.preventDefault()
+      const currentTheme = localStorage.getItem("theme") ?? "oc-1"
+      const themes = ["oc-1", "oc-2-paper"]
+      const nextTheme = themes[(themes.indexOf(currentTheme) + 1) % themes.length]
+      localStorage.setItem("theme", nextTheme)
+      document.documentElement.setAttribute("data-theme", nextTheme)
+      return
+    }
 
     const focused = document.activeElement === inputRef
     if (focused) {
@@ -165,10 +178,16 @@ export default function Page() {
     setStore("activeDraggable", undefined)
   }
 
-  const FileVisual = (props: { file: LocalFile }): JSX.Element => {
+  const FileVisual = (props: { file: LocalFile; active?: boolean }): JSX.Element => {
     return (
       <div class="flex items-center gap-x-1.5">
-        <FileIcon node={props.file} class="grayscale-100 group-data-[selected]/tab:grayscale-0" />
+        <FileIcon
+          node={props.file}
+          classList={{
+            "grayscale-100 group-data-[selected]/tab:grayscale-0": !props.active,
+            "grayscale-0": props.active,
+          }}
+        />
         <span
           classList={{
             "text-14-medium": true,
@@ -216,18 +235,15 @@ export default function Page() {
       // @ts-ignore
       <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
         <div class="relative h-full">
-          <Tabs.Trigger value={props.tab} class="group/tab pl-3 pr-1" onClick={() => props.onTabClick(props.tab)}>
+          <Tabs.Trigger
+            value={props.tab}
+            closeButton={<IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} />}
+            hideCloseButton
+            onClick={() => props.onTabClick(props.tab)}
+          >
             <Switch>
               <Match when={file()}>{(f) => <FileVisual file={f()} />}</Match>
             </Switch>
-            <IconButton
-              icon="close"
-              class="mt-0.5 opacity-0 group-data-[selected]/tab:opacity-100
-                     hover:bg-transparent
-                     hover:opacity-100 group-hover/tab:opacity-100"
-              variant="ghost"
-              onClick={() => props.onTabClose(props.tab)}
-            />
           </Tabs.Trigger>
         </div>
       </div>
@@ -277,38 +293,40 @@ export default function Page() {
         <Tabs value={session.layout.tabs.active ?? "chat"} onChange={session.layout.openTab}>
           <div class="sticky top-0 shrink-0 flex">
             <Tabs.List>
-              <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
-                <div>Chat</div>
-                <Tooltip
-                  value={`${new Intl.NumberFormat("en-US", {
-                    notation: "compact",
-                    compactDisplay: "short",
-                  }).format(session.usage.tokens() ?? 0)} Tokens`}
-                  class="flex items-center gap-1.5"
-                >
-                  <ProgressCircle percentage={session.usage.context() ?? 0} />
-                  <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
-                </Tooltip>
+              <Tabs.Trigger value="chat">
+                <div class="flex gap-x-[17px] items-center">
+                  <div>Session</div>
+                  <Tooltip
+                    value={`${new Intl.NumberFormat("en-US", {
+                      notation: "compact",
+                      compactDisplay: "short",
+                    }).format(session.usage.tokens() ?? 0)} Tokens`}
+                    class="flex items-center gap-1.5"
+                  >
+                    <ProgressCircle percentage={session.usage.context() ?? 0} />
+                    <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
+                  </Tooltip>
+                </div>
               </Tabs.Trigger>
-              <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
-                <Tabs.Trigger value="review" class="flex gap-3 items-center group/tab pr-1">
-                  <Show when={session.diffs()}>
-                    <DiffChanges changes={session.diffs()} variant="bars" />
-                  </Show>
-                  <div class="flex items-center gap-1.5">
-                    <div>Review</div>
-                    <Show when={session.info()?.summary?.files}>
-                      <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
-                        {session.info()?.summary?.files ?? 0}
-                      </div>
+              <Show when={layout.review.state() === "tab" && session.diffs().length}>
+                <Tabs.Trigger
+                  value="review"
+                  closeButton={
+                    <IconButton icon="collapse" size="normal" variant="ghost" onClick={layout.review.pane} />
+                  }
+                >
+                  <div class="flex items-center gap-3">
+                    <Show when={session.diffs()}>
+                      <DiffChanges changes={session.diffs()} variant="bars" />
                     </Show>
-                    <IconButton
-                      icon="close"
-                      class="mt-0.5 -ml-1 opacity-0 group-data-[selected]/tab:opacity-100
-                             hover:bg-transparent hover:opacity-100 group-hover/tab:opacity-100"
-                      variant="ghost"
-                      onClick={local.layout.review.close}
-                    />
+                    <div class="flex items-center gap-1.5">
+                      <div>Review</div>
+                      <Show when={session.info()?.summary?.files}>
+                        <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                          {session.info()?.summary?.files ?? 0}
+                        </div>
+                      </Show>
+                    </div>
                   </div>
                 </Tabs.Trigger>
               </Show>
@@ -333,115 +351,110 @@ export default function Page() {
             <div
               classList={{
                 "w-full flex-1 min-h-0": true,
-                grid: local.layout.review.state() !== "open",
-                flex: local.layout.review.state() === "open",
+                grid: layout.review.state() === "tab",
+                flex: layout.review.state() === "pane",
               }}
             >
-              <div class="relative shrink-0 px-6 py-2 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
+              <div class="relative shrink-0 px-6 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
                 <Switch>
                   <Match when={session.id}>
-                    <div class="h-8 flex shrink-0 self-stretch items-center justify-end">
-                      <Show when={local.layout.review.state() === "closed" && session.diffs().length}>
-                        <Button icon="layout-right" onClick={local.layout.review.open}>
-                          Review
-                        </Button>
-                      </Show>
-                    </div>
                     <div
                       classList={{
                         "flex-1 min-h-0 pb-20": true,
-                        "flex items-start justify-start": local.layout.review.state() === "open",
+                        "flex items-start justify-start": layout.review.state() === "pane",
                       }}
                     >
                       <Show when={session.messages.user().length > 1}>
-                        <ul
-                          role="list"
-                          classList={{
-                            "mr-8 shrink-0 flex flex-col items-start": true,
-                            "absolute right-full w-60 @7xl:gap-2": local.layout.review.state() !== "open",
-                            "mt-1": local.layout.review.state() === "open",
-                          }}
-                        >
-                          <For each={session.messages.user()}>
-                            {(message) => {
-                              const assistantMessages = createMemo(() => {
-                                if (!session.id) return []
-                                return sync.data.message[session.id]?.filter(
-                                  (m) => m.role === "assistant" && m.parentID == message.id,
-                                ) as AssistantMessageType[]
-                              })
-                              const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
-                              const working = createMemo(() => !message.summary?.body && !error())
+                        {(_) => {
+                          const expanded = createMemo(() => layout.review.state() === "tab" || !session.diffs().length)
 
-                              const handleClick = () => session.messages.setActive(message.id)
+                          return (
+                            <ul
+                              role="list"
+                              classList={{
+                                "mr-8 shrink-0 flex flex-col items-start": true,
+                                "absolute right-full w-60 mt-3 @7xl:gap-2 @7xl:mt-1": expanded(),
+                                "mt-3": !expanded(),
+                              }}
+                            >
+                              <For each={session.messages.user()}>
+                                {(message) => {
+                                  const working = createMemo(
+                                    () => message.id === session.messages.last()?.id && session.working(),
+                                  )
+                                  const handleClick = () => session.messages.setActive(message.id)
 
-                              return (
-                                <li
-                                  classList={{
-                                    "group/li flex items-center self-stretch justify-end": true,
-                                    "@7xl:justify-start": local.layout.review.state() !== "open",
-                                  }}
-                                >
-                                  <Tooltip
-                                    placement="right"
-                                    gutter={8}
-                                    value={
-                                      <div class="flex items-center gap-2">
-                                        <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
-                                        {message.summary?.title}
-                                      </div>
-                                    }
-                                  >
-                                    <button
-                                      data-active={session.messages.active()?.id === message.id}
-                                      onClick={handleClick}
+                                  return (
+                                    <li
                                       classList={{
-                                        "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
-                                        "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
-                                        "@7xl:hidden": local.layout.review.state() !== "open",
+                                        "group/li flex items-center self-stretch justify-end": true,
+                                        "@7xl:justify-start": expanded(),
                                       }}
                                     >
-                                      <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
-                                    </button>
-                                  </Tooltip>
-                                  <button
-                                    classList={{
-                                      "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
-                                      "@7xl:flex": local.layout.review.state() !== "open",
-                                    }}
-                                    onClick={handleClick}
-                                  >
-                                    <Switch>
-                                      <Match when={working()}>
-                                        <Spinner class="text-text-base shrink-0 w-[18px] aspect-square" />
-                                      </Match>
-                                      <Match when={true}>
-                                        <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
-                                      </Match>
-                                    </Switch>
-                                    <div
-                                      data-active={session.messages.active()?.id === message.id}
-                                      classList={{
-                                        "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
-                                        "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
-                                      }}
-                                    >
-                                      <Show when={message.summary?.title} fallback="New message">
-                                        {message.summary?.title}
-                                      </Show>
-                                    </div>
-                                  </button>
-                                </li>
-                              )
-                            }}
-                          </For>
-                        </ul>
+                                      <Tooltip
+                                        placement="right"
+                                        gutter={8}
+                                        value={
+                                          <div class="flex items-center gap-2">
+                                            <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                                            {message.summary?.title}
+                                          </div>
+                                        }
+                                      >
+                                        <button
+                                          data-active={session.messages.active()?.id === message.id}
+                                          onClick={handleClick}
+                                          classList={{
+                                            "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
+                                            "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
+                                            "@7xl:hidden": expanded(),
+                                          }}
+                                        >
+                                          <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
+                                        </button>
+                                      </Tooltip>
+                                      <button
+                                        classList={{
+                                          "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
+                                          "@7xl:flex": expanded(),
+                                        }}
+                                        onClick={handleClick}
+                                      >
+                                        <Switch>
+                                          <Match when={working()}>
+                                            <Spinner class="text-text-base shrink-0 w-[18px] aspect-square" />
+                                          </Match>
+                                          <Match when={true}>
+                                            <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                                          </Match>
+                                        </Switch>
+                                        <div
+                                          data-active={session.messages.active()?.id === message.id}
+                                          classList={{
+                                            "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
+                                            "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
+                                          }}
+                                        >
+                                          <Show when={message.summary?.title} fallback="New message">
+                                            {message.summary?.title}
+                                          </Show>
+                                        </div>
+                                      </button>
+                                    </li>
+                                  )
+                                }}
+                              </For>
+                            </ul>
+                          )
+                        }}
                       </Show>
                       <div ref={messageScrollElement} class="grow size-full min-w-0 overflow-y-auto no-scrollbar">
                         <For each={session.messages.user()}>
                           {(message) => {
                             const isActive = createMemo(() => session.messages.active()?.id === message.id)
-                            const [titled, setTitled] = createSignal(!!message.summary?.title)
+                            const titleSeen = createSessionSeen(`message-title-${message.id}`)
+                            const contentSeen = createSessionSeen(`message-content-${message.id}`)
+                            const [titled, setTitled] = createSignal(titleSeen())
                             const assistantMessages = createMemo(() => {
                               if (!session.id) return []
                               return sync.data.message[session.id]?.filter(
@@ -449,7 +462,6 @@ export default function Page() {
                               ) as AssistantMessageType[]
                             })
                             const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
-                            const [completed, setCompleted] = createSignal(!!message.summary?.body || !!error())
                             const [detailsExpanded, setDetailsExpanded] = createSignal(false)
                             const parts = createMemo(() => sync.data.part[message.id])
                             const hasToolPart = createMemo(() =>
@@ -457,17 +469,21 @@ export default function Page() {
                                 ?.flatMap((m) => sync.data.part[m.id])
                                 .some((p) => p?.type === "tool"),
                             )
-                            const working = createMemo(() => !message.summary?.body && !error())
+                            const working = createMemo(
+                              () => message.id === session.messages.last()?.id && session.working(),
+                            )
+                            const initialCompleted = !(message.id === session.messages.last()?.id && session.working())
+                            const [completed, setCompleted] = createSignal(initialCompleted)
 
                             // allowing time for the animations to finish
                             createEffect(() => {
+                              if (titleSeen()) return
                               const title = message.summary?.title
-                              setTimeout(() => setTitled(!!title), 10_000)
+                              if (title) setTimeout(() => setTitled(true), 10_000)
                             })
                             createEffect(() => {
-                              const summary = message.summary?.body
-                              const complete = !!summary || !!error()
-                              setTimeout(() => setCompleted(complete), 1200)
+                              const completed = !working()
+                              setTimeout(() => setCompleted(completed), 1200)
                             })
 
                             return (
@@ -477,7 +493,7 @@ export default function Page() {
                                   class="flex flex-col items-start self-stretch gap-8 pb-20"
                                 >
                                   {/* Title */}
-                                  <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-20 pb-1">
+                                  <div class="flex items-center gap-2 self-stretch sticky top-0 bg-background-stronger z-20 h-8">
                                     <div class="w-full text-14-medium text-text-strong">
                                       <Show
                                         when={titled()}
@@ -495,9 +511,7 @@ export default function Page() {
                                       </Show>
                                     </div>
                                   </div>
-                                  <div class="-mt-9">
-                                    <Message message={message} parts={parts()} />
-                                  </div>
+                                  <Message message={message} parts={parts()} />
                                   {/* Summary */}
                                   <Show when={completed()}>
                                     <div class="w-full flex flex-col gap-6 items-start self-stretch">
@@ -513,7 +527,7 @@ export default function Page() {
                                             <Markdown
                                               classList={{
                                                 "text-14-regular": !!message.summary?.diffs?.length,
-                                                "[&>*]:fade-up-text": !message.summary?.diffs?.length,
+                                                "[&>*]:fade-up-text": !message.summary?.diffs?.length && !contentSeen(),
                                               }}
                                               text={summary()}
                                             />
@@ -524,7 +538,7 @@ export default function Page() {
                                         <For each={message.summary?.diffs ?? []}>
                                           {(diff) => (
                                             <Accordion.Item value={diff.file}>
-                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10 ">
+                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10">
                                                 <Accordion.Trigger>
                                                   <div class="flex items-center justify-between w-full gap-5">
                                                     <div class="grow flex items-center gap-5 min-w-0">
@@ -653,127 +667,25 @@ export default function Page() {
                   />
                 </div>
               </div>
-              <Show when={local.layout.review.state() === "open"}>
+              <Show when={layout.review.state() === "pane" && session.diffs().length}>
                 <div
                   classList={{
-                    "relative grow px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 border-l border-border-weak-base": true,
+                    "relative grow px-6 py-3 flex-1 min-h-0 border-l border-border-weak-base": true,
                   }}
                 >
-                  <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
-                    <div class="flex items-center gap-x-3">
-                      <Tooltip value="Close">
-                        <IconButton icon="align-right" variant="ghost" onClick={local.layout.review.close} />
-                      </Tooltip>
-                      <Tooltip value="Open in tab">
-                        <IconButton
-                          icon="expand"
-                          variant="ghost"
-                          onClick={() => {
-                            local.layout.review.tab()
-                            session.layout.setActiveTab("review")
-                          }}
-                        />
-                      </Tooltip>
-                    </div>
-                  </div>
-                  <div class="text-14-medium text-text-strong">All changes</div>
-                  <div class="h-full pb-40 overflow-y-auto no-scrollbar">
-                    <Accordion class="w-full" multiple>
-                      <For each={session.diffs()}>
-                        {(diff) => (
-                          <Accordion.Item value={diff.file} defaultOpen>
-                            <StickyAccordionHeader>
-                              <Accordion.Trigger>
-                                <div class="flex items-center justify-between w-full gap-5">
-                                  <div class="grow flex items-center gap-5 min-w-0">
-                                    <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
-                                    <div class="flex grow min-w-0">
-                                      <Show when={diff.file.includes("/")}>
-                                        <span class="text-text-base truncate-start">
-                                          {getDirectory(diff.file)}&lrm;
-                                        </span>
-                                      </Show>
-                                      <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
-                                    </div>
-                                  </div>
-                                  <div class="shrink-0 flex gap-4 items-center justify-end">
-                                    <DiffChanges changes={diff} />
-                                    <Icon name="chevron-grabber-vertical" size="small" />
-                                  </div>
-                                </div>
-                              </Accordion.Trigger>
-                            </StickyAccordionHeader>
-                            <Accordion.Content>
-                              <Diff
-                                before={{
-                                  name: diff.file!,
-                                  contents: diff.before!,
-                                }}
-                                after={{
-                                  name: diff.file!,
-                                  contents: diff.after!,
-                                }}
-                              />
-                            </Accordion.Content>
-                          </Accordion.Item>
-                        )}
-                      </For>
-                    </Accordion>
-                  </div>
+                  <SessionReview />
                 </div>
               </Show>
             </div>
           </Tabs.Content>
-          <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
-            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden mt-8">
+          <Show when={layout.review.state() === "tab" && session.diffs().length}>
+            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden">
               <div
                 classList={{
-                  "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 overflow-hidden": true,
+                  "relative px-6 py-3 flex-1 min-h-0 overflow-hidden": true,
                 }}
               >
-                <div class="text-14-medium text-text-strong shrink-0">All changes</div>
-                <div class="flex-1 min-h-0 pb-40 overflow-y-auto no-scrollbar">
-                  <Accordion class="w-full" multiple>
-                    <For each={session.diffs()}>
-                      {(diff) => (
-                        <Accordion.Item value={diff.file} defaultOpen>
-                          <StickyAccordionHeader>
-                            <Accordion.Trigger>
-                              <div class="flex items-center justify-between w-full gap-5">
-                                <div class="grow flex items-center gap-5 min-w-0">
-                                  <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
-                                  <div class="flex grow min-w-0">
-                                    <Show when={diff.file.includes("/")}>
-                                      <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
-                                    </Show>
-                                    <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
-                                  </div>
-                                </div>
-                                <div class="shrink-0 flex gap-4 items-center justify-end">
-                                  <DiffChanges changes={diff} />
-                                  <Icon name="chevron-grabber-vertical" size="small" />
-                                </div>
-                              </div>
-                            </Accordion.Trigger>
-                          </StickyAccordionHeader>
-                          <Accordion.Content>
-                            <Diff
-                              diffStyle="split"
-                              before={{
-                                name: diff.file!,
-                                contents: diff.before!,
-                              }}
-                              after={{
-                                name: diff.file!,
-                                contents: diff.after!,
-                              }}
-                            />
-                          </Accordion.Content>
-                        </Accordion.Item>
-                      )}
-                    </For>
-                  </Accordion>
-                </div>
+                <SessionReview split hideExpand class="pb-40" />
               </div>
             </Tabs.Content>
           </Show>
@@ -819,8 +731,8 @@ export default function Page() {
                 },
               )
               return (
-                <div class="relative px-3 h-10 flex items-center bg-background-base border-x border-border-weak-base border-b border-b-transparent">
-                  <Show when={file()}>{(f) => <FileVisual file={f()} />}</Show>
+                <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
+                  <Show when={file()}>{(f) => <FileVisual active file={f()} />}</Show>
                 </div>
               )
             }}
@@ -828,7 +740,7 @@ export default function Page() {
         </DragOverlay>
       </DragDropProvider>
       <Show when={session.layout.tabs.active}>
-        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-6">
           <PromptInput
             ref={(el) => {
               inputRef = el
@@ -870,7 +782,13 @@ export default function Page() {
           items={local.file.searchFiles}
           key={(x) => x}
           onOpenChange={(open) => setStore("fileSelectOpen", open)}
-          onSelect={(x) => (x ? session.layout.openTab("file://" + x) : undefined)}
+          onSelect={(x) => {
+            if (x) {
+              local.file.open(x)
+              return session.layout.openTab("file://" + x)
+            }
+            return undefined
+          }}
         >
           {(i) => (
             <div
@@ -895,18 +813,3 @@ export default function Page() {
     </div>
   )
 }
-
-function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
-  return (
-    <Accordion.Header
-      classList={{
-        "sticky top-0 data-expanded:z-10": true,
-        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
-        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      {props.children}
-    </Accordion.Header>
-  )
-}

packages/desktop/src/ui/file-icon.tsx

@@ -9,12 +9,13 @@ export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
 }
 
 export const FileIcon: Component<FileIconProps> = (props) => {
-  const [local, rest] = splitProps(props, ["node", "class", "expanded"])
+  const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded"])
   const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
   return (
     <svg
       {...rest}
       classList={{
+        ...(local.classList ?? {}),
         "shrink-0 size-4": true,
         [local.class ?? ""]: !!local.class,
       }}

packages/desktop/src/utils/encode.ts

@@ -0,0 +1,7 @@
+export function base64Encode(value: string) {
+  return btoa(value).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}
+
+export function base64Decode(value: string) {
+  return atob(value.replace(/-/g, "+").replace(/_/g, "/"))
+}

packages/desktop/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./path"
 export * from "./dom"
+export * from "./encode"

packages/extensions/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The AI coding agent built for the terminal"
-version = "1.0.61"
+version = "1.0.85"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/sst/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.61/opencode-darwin-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.85/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.61/opencode-darwin-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.85/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.61/opencode-linux-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.85/opencode-linux-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.61/opencode-linux-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.85/opencode-linux-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.61/opencode-windows-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.85/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]

packages/function/package.json

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

packages/opencode/bin/opencode

@@ -1,61 +1,84 @@
-#!/bin/sh
-set -e
-
-if [ -n "$OPENCODE_BIN_PATH" ]; then
-    resolved="$OPENCODE_BIN_PATH"
-else
-    # Get the real path of this script, resolving any symlinks
-    script_path="$0"
-    while [ -L "$script_path" ]; do
-        link_target="$(readlink "$script_path")"
-        case "$link_target" in
-            /*) script_path="$link_target" ;;
-            *) script_path="$(dirname "$script_path")/$link_target" ;;
-        esac
-    done
-    script_dir="$(dirname "$script_path")"
-    script_dir="$(cd "$script_dir" && pwd)"
-    
-    # Map platform names
-    case "$(uname -s)" in
-        Darwin) platform="darwin" ;;
-        Linux) platform="linux" ;;
-        MINGW*|CYGWIN*|MSYS*) platform="win32" ;;
-        *) platform="$(uname -s | tr '[:upper:]' '[:lower:]')" ;;
-    esac
-    
-    # Map architecture names  
-    case "$(uname -m)" in
-        x86_64|amd64) arch="x64" ;;
-        aarch64) arch="arm64" ;;
-        armv7l) arch="arm" ;;
-        *) arch="$(uname -m)" ;;
-    esac
-    
-    name="opencode-${platform}-${arch}"
-    binary="opencode"
-    [ "$platform" = "win32" ] && binary="opencode.exe"
-    
-    # Search for the binary starting from real script location
-    resolved=""
-    current_dir="$script_dir"
-    while [ "$current_dir" != "/" ]; do
-        candidate="$current_dir/node_modules/$name/bin/$binary"
-        if [ -f "$candidate" ]; then
-            resolved="$candidate"
-            break
-        fi
-        current_dir="$(dirname "$current_dir")"
-    done
-    
-    if [ -z "$resolved" ]; then
-        printf "It seems that your package manager failed to install the right version of the opencode CLI for your platform. You can try manually installing the \"%s\" package\n" "$name" >&2
-        exit 1
-    fi
-fi
-
-# Handle SIGINT gracefully
-trap '' INT
-
-# Execute the binary with all arguments
-exec "$resolved" "$@"
+#!/usr/bin/env node
+
+const childProcess = require("child_process")
+const fs = require("fs")
+const path = require("path")
+const os = require("os")
+
+function run(target) {
+  const result = childProcess.spawnSync(target, process.argv.slice(2), {
+    stdio: "inherit",
+  })
+  if (result.error) {
+    console.error(result.error.message)
+    process.exit(1)
+  }
+  const code = typeof result.status === "number" ? result.status : 0
+  process.exit(code)
+}
+
+const envPath = process.env.OPENCODE_BIN_PATH
+if (envPath) {
+  run(envPath)
+}
+
+const scriptPath = fs.realpathSync(__filename)
+const scriptDir = path.dirname(scriptPath)
+
+const platformMap = {
+  darwin: "darwin",
+  linux: "linux",
+  win32: "windows",
+}
+const archMap = {
+  x64: "x64",
+  arm64: "arm64",
+  arm: "arm",
+}
+
+let platform = platformMap[os.platform()]
+if (!platform) {
+  platform = os.platform()
+}
+let arch = archMap[os.arch()]
+if (!arch) {
+  arch = os.arch()
+}
+const base = "opencode-" + platform + "-" + arch
+const binary = platform === "windows" ? "opencode.exe" : "opencode"
+
+function findBinary(startDir) {
+  let current = startDir
+  for (;;) {
+    const modules = path.join(current, "node_modules")
+    if (fs.existsSync(modules)) {
+      const entries = fs.readdirSync(modules)
+      for (const entry of entries) {
+        if (!entry.startsWith(base)) {
+          continue
+        }
+        const candidate = path.join(modules, entry, "bin", binary)
+        if (fs.existsSync(candidate)) {
+          return candidate
+        }
+      }
+    }
+    const parent = path.dirname(current)
+    if (parent === current) {
+      return
+    }
+    current = parent
+  }
+}
+
+const resolved = findBinary(scriptDir)
+if (!resolved) {
+  console.error(
+    'It seems that your package manager failed to install the right version of the opencode CLI for your platform. You can try manually installing the "' +
+      base +
+      '" package',
+  )
+  process.exit(1)
+}
+
+run(resolved)

packages/opencode/bin/opencode.cmd

@@ -1,58 +0,0 @@
-@echo off
-setlocal enabledelayedexpansion
-
-if defined OPENCODE_BIN_PATH (
-    set "resolved=%OPENCODE_BIN_PATH%"
-    goto :execute
-)
-
-rem Get the directory of this script
-set "script_dir=%~dp0"
-set "script_dir=%script_dir:~0,-1%"
-
-rem Detect platform and architecture
-set "platform=windows"
-
-rem Detect architecture
-if "%PROCESSOR_ARCHITECTURE%"=="AMD64" (
-    set "arch=x64"
-) else if "%PROCESSOR_ARCHITECTURE%"=="ARM64" (
-    set "arch=arm64"
-) else if "%PROCESSOR_ARCHITECTURE%"=="x86" (
-    set "arch=x86"
-) else (
-    set "arch=x64"
-)
-
-set "name=opencode-!platform!-!arch!"
-set "binary=opencode.exe"
-
-rem Search for the binary starting from script location
-set "resolved="
-set "current_dir=%script_dir%"
-
-:search_loop
-set "candidate=%current_dir%\node_modules\%name%\bin\%binary%"
-if exist "%candidate%" (
-    set "resolved=%candidate%"
-    goto :execute
-)
-
-rem Move up one directory
-for %%i in ("%current_dir%") do set "parent_dir=%%~dpi"
-set "parent_dir=%parent_dir:~0,-1%"
-
-rem Check if we've reached the root
-if "%current_dir%"=="%parent_dir%" goto :not_found
-set "current_dir=%parent_dir%"
-goto :search_loop
-
-:not_found
-echo It seems that your package manager failed to install the right version of the opencode CLI for your platform. You can try manually installing the "%name%" package >&2
-exit /b 1
-
-:execute
-rem Execute the binary with all arguments in the same console window
-rem Use start /b /wait to ensure it runs in the current shell context for all shells
-start /b /wait "" "%resolved%" %*
-exit /b %ERRORLEVEL%

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.0.61",
+  "version": "1.0.85",
   "name": "opencode",
   "type": "module",
   "private": true,
@@ -44,6 +44,7 @@
     "@actions/core": "1.11.1",
     "@actions/github": "6.0.1",
     "@agentclientprotocol/sdk": "0.5.1",
+    "@ai-sdk/mcp": "0.0.8",
     "@clack/prompts": "1.0.0-alpha.1",
     "@hono/standard-validator": "0.1.5",
     "@hono/zod-validator": "catalog:",
@@ -54,8 +55,8 @@
     "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/script": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
-    "@opentui/core": "0.1.42",
-    "@opentui/solid": "0.1.42",
+    "@opentui/core": "0.1.47",
+    "@opentui/solid": "0.1.47",
     "@parcel/watcher": "2.5.1",
     "@pierre/precision-diffs": "catalog:",
     "@solid-primitives/event-bus": "1.1.2",

packages/opencode/parsers-config.ts

@@ -167,6 +167,15 @@ export default {
         ],
       },
     },
+    {
+      filetype: "yaml",
+      wasm: "https://github.com/tree-sitter-grammars/tree-sitter-yaml/releases/download/v0.7.2/tree-sitter-yaml.wasm",
+      queries: {
+        highlights: [
+          "https://raw.githubusercontent.com/nvim-treesitter/nvim-treesitter/refs/heads/master/queries/yaml/highlights.scm",
+        ],
+      },
+    },
     {
       filetype: "haskell",
       wasm: "https://github.com/tree-sitter/tree-sitter-haskell/releases/download/v0.23.1/tree-sitter-haskell.wasm",
@@ -212,5 +221,19 @@ export default {
         ],
       },
     },
+    {
+      filetype: "swift",
+      wasm: "https://github.com/alex-pinkus/tree-sitter-swift/releases/download/0.7.1/tree-sitter-swift.wasm",
+      queries: {
+        highlights: [
+          // NOTE: Using parser repo queries instead of nvim-treesitter due to incompatible #lua-match? predicates
+          // "https://raw.githubusercontent.com/nvim-treesitter/nvim-treesitter/refs/heads/master/queries/highlights.scm
+          "https://raw.githubusercontent.com/alex-pinkus/tree-sitter-swift/main/queries/highlights.scm",
+        ],
+        locals: [
+          "https://raw.githubusercontent.com/nvim-treesitter/nvim-treesitter/refs/heads/master/queries/swift/locals.scm",
+        ],
+      },
+    },
   ],
 }

packages/opencode/script/build.ts

@@ -66,11 +66,11 @@ const allTargets: {
     avx2: false,
   },
   {
-    os: "windows",
+    os: "win32",
     arch: "x64",
   },
   {
-    os: "windows",
+    os: "win32",
     arch: "x64",
     avx2: false,
   },
@@ -88,7 +88,8 @@ await $`bun install --os="*" --cpu="*" @parcel/watcher@${pkg.dependencies["@parc
 for (const item of targets) {
   const name = [
     pkg.name,
-    item.os,
+    // changing to win32 flags npm for some reason
+    item.os === "win32" ? "windows" : item.os,
     item.arch,
     item.avx2 === false ? "baseline" : undefined,
     item.abi === undefined ? undefined : item.abi,
@@ -115,7 +116,7 @@ for (const item of targets) {
     entrypoints: ["./src/index.ts", parserWorker, workerPath],
     define: {
       OPENCODE_VERSION: `'${Script.version}'`,
-      OTUI_TREE_SITTER_WORKER_PATH: "/$bunfs/root/" + path.relative(dir, parserWorker),
+      OTUI_TREE_SITTER_WORKER_PATH: "/$bunfs/root/" + path.relative(dir, parserWorker).replaceAll("\\", "/"),
       OPENCODE_WORKER_PATH: workerPath,
       OPENCODE_CHANNEL: `'${Script.channel}'`,
     },
@@ -127,7 +128,7 @@ for (const item of targets) {
       {
         name,
         version: Script.version,
-        os: [item.os === "windows" ? "win32" : item.os],
+        os: [item.os],
         cpu: [item.arch],
       },
       null,

packages/opencode/script/postinstall.mjs

@@ -50,79 +50,66 @@ function detectPlatformAndArch() {
 function findBinary() {
   const { platform, arch } = detectPlatformAndArch()
   const packageName = `opencode-${platform}-${arch}`
-  const binary = platform === "windows" ? "opencode.exe" : "opencode"
+  const binaryName = platform === "windows" ? "opencode.exe" : "opencode"
 
   try {
     // Use require.resolve to find the package
     const packageJsonPath = require.resolve(`${packageName}/package.json`)
     const packageDir = path.dirname(packageJsonPath)
-    const binaryPath = path.join(packageDir, "bin", binary)
+    const binaryPath = path.join(packageDir, "bin", binaryName)
 
     if (!fs.existsSync(binaryPath)) {
       throw new Error(`Binary not found at ${binaryPath}`)
     }
 
-    return binaryPath
+    return { binaryPath, binaryName }
   } catch (error) {
     throw new Error(`Could not find package ${packageName}: ${error.message}`)
   }
 }
 
-async function regenerateWindowsCmdWrappers() {
-  console.log("Windows + npm detected: Forcing npm to rebuild bin links")
+function prepareBinDirectory(binaryName) {
+  const binDir = path.join(__dirname, "bin")
+  const targetPath = path.join(binDir, binaryName)
 
-  try {
-    const { execSync } = require("child_process")
-    const pkgPath = path.join(__dirname, "..")
-
-    // npm_config_global is string | undefined
-    // if it exists, the value is true
-    const isGlobal = process.env.npm_config_global === "true" || pkgPath.includes(path.join("npm", "node_modules"))
-
-    // The npm rebuild command does 2 things - Execute lifecycle scripts and rebuild bin links
-    // We want to skip lifecycle scripts to avoid infinite loops, so we use --ignore-scripts
-    const cmd = `npm rebuild opencode-ai --ignore-scripts${isGlobal ? " -g" : ""}`
-    const opts = {
-      stdio: "inherit",
-      shell: true,
-      ...(isGlobal ? {} : { cwd: path.join(pkgPath, "..", "..") }), // For local, run from project root
-    }
+  // Ensure bin directory exists
+  if (!fs.existsSync(binDir)) {
+    fs.mkdirSync(binDir, { recursive: true })
+  }
 
-    console.log(`Running: ${cmd}`)
-    execSync(cmd, opts)
-    console.log("Successfully rebuilt npm bin links")
-  } catch (error) {
-    console.error("Error rebuilding npm links:", error.message)
-    console.error("npm rebuild failed. You may need to manually run: npm rebuild opencode-ai --ignore-scripts")
+  // Remove existing binary/symlink if it exists
+  if (fs.existsSync(targetPath)) {
+    fs.unlinkSync(targetPath)
+  }
+
+  return { binDir, targetPath }
+}
+
+function symlinkBinary(sourcePath, binaryName) {
+  const { targetPath } = prepareBinDirectory(binaryName)
+
+  fs.symlinkSync(sourcePath, targetPath)
+  console.log(`opencode binary symlinked: ${targetPath} -> ${sourcePath}`)
+
+  // Verify the file exists after operation
+  if (!fs.existsSync(targetPath)) {
+    throw new Error(`Failed to symlink binary to ${targetPath}`)
   }
 }
 
 async function main() {
   try {
     if (os.platform() === "win32") {
-      // NPM eg format - npm/11.4.2 node/v24.4.1 win32 x64
-      // Bun eg format - bun/1.2.19 npm/? node/v24.3.0 win32 x64
-      if (process.env.npm_config_user_agent.startsWith("npm")) {
-        await regenerateWindowsCmdWrappers()
-      } else {
-        console.log("Windows detected but not npm, skipping postinstall")
-      }
+      // On Windows, the .exe is already included in the package and bin field points to it
+      // No postinstall setup needed
+      console.log("Windows detected: binary setup not needed (using packaged .exe)")
       return
     }
 
-    const binaryPath = findBinary()
-    const binScript = path.join(__dirname, "bin", "opencode")
-
-    // Remove existing bin script if it exists
-    if (fs.existsSync(binScript)) {
-      fs.unlinkSync(binScript)
-    }
-
-    // Create symlink to the actual binary
-    fs.symlinkSync(binaryPath, binScript)
-    console.log(`opencode binary symlinked: ${binScript} -> ${binaryPath}`)
+    const { binaryPath, binaryName } = findBinary()
+    symlinkBinary(binaryPath, binaryName)
   } catch (error) {
-    console.error("Failed to create opencode binary symlink:", error.message)
+    console.error("Failed to setup opencode binary:", error.message)
     process.exit(1)
   }
 }

packages/opencode/script/preinstall.mjs

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "fs"
-import path from "path"
-import os from "os"
-import { fileURLToPath } from "url"
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-function main() {
-  if (os.platform() !== "win32") {
-    console.log("Non-Windows platform detected, skipping preinstall")
-    return
-  }
-
-  console.log("Windows detected: Modifying package.json bin entry")
-
-  // Read package.json
-  const packageJsonPath = path.join(__dirname, "package.json")
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"))
-
-  // Modify bin to point to .cmd file on Windows
-  packageJson.bin = {
-    opencode: "./bin/opencode.cmd",
-  }
-
-  // Write it back
-  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-  console.log("Updated package.json bin to use opencode.cmd")
-
-  // Now you can also remove the Unix script if you want
-  const unixScript = path.join(__dirname, "bin", "opencode")
-  if (fs.existsSync(unixScript)) {
-    console.log("Removing Unix shell script")
-    fs.unlinkSync(unixScript)
-  }
-}
-
-try {
-  main()
-} catch (error) {
-  console.error("Preinstall script error:", error.message)
-  process.exit(0)
-}

packages/opencode/script/publish.ts

@@ -2,8 +2,9 @@
 import { $ } from "bun"
 import pkg from "../package.json"
 import { Script } from "@opencode-ai/script"
+import { fileURLToPath } from "url"
 
-const dir = new URL("..", import.meta.url).pathname
+const dir = fileURLToPath(new URL("..", import.meta.url))
 process.chdir(dir)
 
 const { binaries } = await import("./build.ts")
@@ -15,8 +16,8 @@ const { binaries } = await import("./build.ts")
 
 await $`mkdir -p ./dist/${pkg.name}`
 await $`cp -r ./bin ./dist/${pkg.name}/bin`
-await $`cp ./script/preinstall.mjs ./dist/${pkg.name}/preinstall.mjs`
 await $`cp ./script/postinstall.mjs ./dist/${pkg.name}/postinstall.mjs`
+
 await Bun.file(`./dist/${pkg.name}/package.json`).write(
   JSON.stringify(
     {
@@ -25,7 +26,6 @@ await Bun.file(`./dist/${pkg.name}/package.json`).write(
         [pkg.name]: `./bin/${pkg.name}`,
       },
       scripts: {
-        preinstall: "bun ./preinstall.mjs || node ./preinstall.mjs",
         postinstall: "bun ./postinstall.mjs || node ./postinstall.mjs",
       },
       version: Script.version,
@@ -36,7 +36,15 @@ await Bun.file(`./dist/${pkg.name}/package.json`).write(
   ),
 )
 for (const [name] of Object.entries(binaries)) {
-  await $`cd dist/${name} && chmod 777 -R . && bun publish --access public --tag ${Script.channel}`
+  try {
+    process.chdir(`./dist/${name}`)
+    if (process.platform !== "win32") {
+      await $`chmod 755 -R .`
+    }
+    await $`bun publish --access public --tag ${Script.channel}`
+  } finally {
+    process.chdir(dir)
+  }
 }
 await $`cd ./dist/${pkg.name} && bun publish --access public --tag ${Script.channel}`
 
@@ -123,7 +131,34 @@ if (!Script.preview) {
     "",
     "package() {",
     `  cd "opencode-\${pkgver}/packages/opencode"`,
-    '  install -Dm755 $(find dist/*/bin/opencode) "${pkgdir}/usr/bin/opencode"',
+    '  mkdir -p "${pkgdir}/usr/bin"',
+    '  target_arch="x64"',
+    '  case "$CARCH" in',
+    '    x86_64) target_arch="x64" ;;',
+    '    aarch64) target_arch="arm64" ;;',
+    '    *) printf "unsupported architecture: %s\\n" "$CARCH" >&2 ; return 1 ;;',
+    "  esac",
+    '  libc=""',
+    "  if command -v ldd >/dev/null 2>&1; then",
+    "    if ldd --version 2>&1 | grep -qi musl; then",
+    '      libc="-musl"',
+    "    fi",
+    "  fi",
+    '  if [ -z "$libc" ] && ls /lib/ld-musl-* >/dev/null 2>&1; then',
+    '    libc="-musl"',
+    "  fi",
+    '  base=""',
+    '  if [ "$target_arch" = "x64" ]; then',
+    "    if ! grep -qi avx2 /proc/cpuinfo 2>/dev/null; then",
+    '      base="-baseline"',
+    "    fi",
+    "  fi",
+    '  bin="dist/opencode-linux-${target_arch}${base}${libc}/bin/opencode"',
+    '  if [ ! -f "$bin" ]; then',
+    '    printf "unable to find binary for %s%s%s\\n" "$target_arch" "$base" "$libc" >&2',
+    "    return 1",
+    "  fi",
+    '  install -Dm755 "$bin" "${pkgdir}/usr/bin/opencode"',
     "}",
     "",
   ].join("\n")

packages/opencode/src/agent/agent.ts

@@ -12,7 +12,7 @@ export namespace Agent {
     .object({
       name: z.string(),
       description: z.string().optional(),
-      mode: z.union([z.literal("subagent"), z.literal("primary"), z.literal("all")]),
+      mode: z.enum(["subagent", "primary", "all"]),
       builtIn: z.boolean(),
       topP: z.number().optional(),
       temperature: z.number().optional(),

packages/opencode/src/bun/index.ts

@@ -79,16 +79,48 @@ export namespace BunProc {
       version,
     })
 
-    await BunProc.run(args, {
-      cwd: Global.Path.cache,
-    }).catch((e) => {
-      throw new InstallFailedError(
-        { pkg, version },
-        {
-          cause: e,
-        },
-      )
-    })
+    const total = 3
+    const wait = 500
+
+    const runInstall = async (count: number = 1): Promise<void> => {
+      log.info("bun install attempt", {
+        pkg,
+        version,
+        attempt: count,
+        total,
+      })
+      await BunProc.run(args, {
+        cwd: Global.Path.cache,
+      }).catch(async (error) => {
+        log.warn("bun install failed", {
+          pkg,
+          version,
+          attempt: count,
+          total,
+          error,
+        })
+        if (count >= total) {
+          throw new InstallFailedError(
+            { pkg, version },
+            {
+              cause: error,
+            },
+          )
+        }
+        const delay = wait * count
+        log.info("bun install retrying", {
+          pkg,
+          version,
+          next: count + 1,
+          delay,
+        })
+        await Bun.sleep(delay)
+        return runInstall(count + 1)
+      })
+    }
+
+    await runInstall()
+
     parsed.dependencies[pkg] = version
     await Bun.write(pkgjson.name!, JSON.stringify(parsed, null, 2))
     return mod

packages/opencode/src/bus/global.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from "events"
+
+export const GlobalBus = new EventEmitter<{
+  event: [
+    {
+      directory: string
+      payload: any
+    },
+  ]
+}>()

packages/opencode/src/bus/index.ts

@@ -2,6 +2,7 @@ import z from "zod"
 import type { ZodType } from "zod"
 import { Log } from "../util/log"
 import { Instance } from "../project/instance"
+import { GlobalBus } from "./global"
 
 export namespace Bus {
   const log = Log.create({ service: "bus" })
@@ -29,22 +30,26 @@ export namespace Bus {
   }
 
   export function payloads() {
-    return z.discriminatedUnion(
-      "type",
-      registry
-        .entries()
-        .map(([type, def]) => {
-          return z
-            .object({
-              type: z.literal(type),
-              properties: def.properties,
-            })
-            .meta({
-              ref: "Event" + "." + def.type,
-            })
-        })
-        .toArray() as any,
-    )
+    return z
+      .discriminatedUnion(
+        "type",
+        registry
+          .entries()
+          .map(([type, def]) => {
+            return z
+              .object({
+                type: z.literal(type),
+                properties: def.properties,
+              })
+              .meta({
+                ref: "Event" + "." + def.type,
+              })
+          })
+          .toArray() as any,
+      )
+      .meta({
+        ref: "Event",
+      })
   }
 
   export async function publish<Definition extends EventDefinition>(
@@ -65,6 +70,10 @@ export namespace Bus {
         pending.push(sub(payload))
       }
     }
+    GlobalBus.emit("event", {
+      directory: Instance.directory,
+      payload,
+    })
     return Promise.all(pending)
   }
 

packages/opencode/src/cli/cmd/agent.ts

@@ -6,6 +6,7 @@ import { Agent } from "../../agent/agent"
 import path from "path"
 import matter from "gray-matter"
 import { Instance } from "../../project/instance"
+import { EOL } from "os"
 
 const AgentCreateCommand = cmd({
   command: "create",
@@ -133,9 +134,32 @@ const AgentCreateCommand = cmd({
   },
 })
 
+const AgentListCommand = cmd({
+  command: "list",
+  describe: "list all available agents",
+  async handler() {
+    await Instance.provide({
+      directory: process.cwd(),
+      async fn() {
+        const agents = await Agent.list()
+        const sortedAgents = agents.sort((a, b) => {
+          if (a.builtIn !== b.builtIn) {
+            return a.builtIn ? -1 : 1
+          }
+          return a.name.localeCompare(b.name)
+        })
+
+        for (const agent of sortedAgents) {
+          process.stdout.write(`${agent.name} (${agent.mode})${EOL}`)
+        }
+      },
+    })
+  },
+})
+
 export const AgentCommand = cmd({
   command: "agent",
   describe: "manage agents",
-  builder: (yargs) => yargs.command(AgentCreateCommand).demandCommand(),
+  builder: (yargs) => yargs.command(AgentCreateCommand).command(AgentListCommand).demandCommand(),
   async handler() {},
 })

packages/opencode/src/cli/cmd/debug/file.ts

@@ -2,6 +2,7 @@ import { EOL } from "os"
 import { File } from "../../../file"
 import { bootstrap } from "../../bootstrap"
 import { cmd } from "../cmd"
+import { Ripgrep } from "@/file/ripgrep"
 
 const FileSearchCommand = cmd({
   command: "search <query>",
@@ -62,6 +63,20 @@ const FileListCommand = cmd({
   },
 })
 
+const FileTreeCommand = cmd({
+  command: "tree [dir]",
+  builder: (yargs) =>
+    yargs.positional("dir", {
+      type: "string",
+      description: "Directory to tree",
+      default: process.cwd(),
+    }),
+  async handler(args) {
+    const files = await Ripgrep.tree({ cwd: args.dir, limit: 200 })
+    console.log(files)
+  },
+})
+
 export const FileCommand = cmd({
   command: "file",
   builder: (yargs) =>
@@ -70,6 +85,7 @@ export const FileCommand = cmd({
       .command(FileStatusCommand)
       .command(FileListCommand)
       .command(FileSearchCommand)
+      .command(FileTreeCommand)
       .demandCommand(),
   async handler() {},
 })

packages/opencode/src/cli/cmd/github.ts

@@ -439,11 +439,13 @@ export const GithubRunCommand = cmd({
           // Local PR
           if (prData.headRepository.nameWithOwner === prData.baseRepository.nameWithOwner) {
             await checkoutLocalBranch(prData)
+            const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
             const dataPrompt = buildPromptDataForPR(prData)
             const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
-            if (await branchIsDirty()) {
+            const { dirty, uncommittedChanges } = await branchIsDirty(head)
+            if (dirty) {
               const summary = await summarize(response)
-              await pushToLocalBranch(summary)
+              await pushToLocalBranch(summary, uncommittedChanges)
             }
             const hasShared = prData.comments.nodes.some((c) => c.body.includes(`${shareBaseUrl}/s/${shareId}`))
             await updateComment(`${response}${footer({ image: !hasShared })}`)
@@ -451,11 +453,13 @@ export const GithubRunCommand = cmd({
           // Fork PR
           else {
             await checkoutForkBranch(prData)
+            const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
             const dataPrompt = buildPromptDataForPR(prData)
             const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
-            if (await branchIsDirty()) {
+            const { dirty, uncommittedChanges } = await branchIsDirty(head)
+            if (dirty) {
               const summary = await summarize(response)
-              await pushToForkBranch(summary, prData)
+              await pushToForkBranch(summary, prData, uncommittedChanges)
             }
             const hasShared = prData.comments.nodes.some((c) => c.body.includes(`${shareBaseUrl}/s/${shareId}`))
             await updateComment(`${response}${footer({ image: !hasShared })}`)
@@ -464,12 +468,14 @@ export const GithubRunCommand = cmd({
         // Issue
         else {
           const branch = await checkoutNewBranch()
+          const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
           const issueData = await fetchIssue()
           const dataPrompt = buildPromptDataForIssue(issueData)
           const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
-          if (await branchIsDirty()) {
+          const { dirty, uncommittedChanges } = await branchIsDirty(head)
+          if (dirty) {
             const summary = await summarize(response)
-            await pushToNewBranch(summary, branch)
+            await pushToNewBranch(summary, branch, uncommittedChanges)
             const pr = await createPR(
               repoData.data.default_branch,
               branch,
@@ -802,40 +808,57 @@ export const GithubRunCommand = cmd({
         return `opencode/${type}${issueId}-${timestamp}`
       }
 
-      async function pushToNewBranch(summary: string, branch: string) {
+      async function pushToNewBranch(summary: string, branch: string, commit: boolean) {
         console.log("Pushing to new branch...")
-        await $`git add .`
-        await $`git commit -m "${summary}
+        if (commit) {
+          await $`git add .`
+          await $`git commit -m "${summary}
 
 Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
+        }
         await $`git push -u origin ${branch}`
       }
 
-      async function pushToLocalBranch(summary: string) {
+      async function pushToLocalBranch(summary: string, commit: boolean) {
         console.log("Pushing to local branch...")
-        await $`git add .`
-        await $`git commit -m "${summary}
+        if (commit) {
+          await $`git add .`
+          await $`git commit -m "${summary}
 
 Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
+        }
         await $`git push`
       }
 
-      async function pushToForkBranch(summary: string, pr: GitHubPullRequest) {
+      async function pushToForkBranch(summary: string, pr: GitHubPullRequest, commit: boolean) {
         console.log("Pushing to fork branch...")
 
         const remoteBranch = pr.headRefName
 
-        await $`git add .`
-        await $`git commit -m "${summary}
+        if (commit) {
+          await $`git add .`
+          await $`git commit -m "${summary}
 
 Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
+        }
         await $`git push fork HEAD:${remoteBranch}`
       }
 
-      async function branchIsDirty() {
+      async function branchIsDirty(originalHead: string) {
         console.log("Checking if branch is dirty...")
         const ret = await $`git status --porcelain`
-        return ret.stdout.toString().trim().length > 0
+        const status = ret.stdout.toString().trim()
+        if (status.length > 0) {
+          return {
+            dirty: true,
+            uncommittedChanges: true,
+          }
+        }
+        const head = await $`git rev-parse HEAD`
+        return {
+          dirty: head.stdout.toString().trim() !== originalHead,
+          uncommittedChanges: false,
+        }
       }
 
       async function assertPermissions() {

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -2,10 +2,11 @@ import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentu
 import { Clipboard } from "@tui/util/clipboard"
 import { TextAttributes } from "@opentui/core"
 import { RouteProvider, useRoute } from "@tui/context/route"
-import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch } from "solid-js"
+import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show } from "solid-js"
 import { Installation } from "@/installation"
 import { Global } from "@/global"
 import { DialogProvider, useDialog } from "@tui/ui/dialog"
+import { DialogProvider as DialogProviderList } from "@tui/component/dialog-provider"
 import { SDKProvider, useSDK } from "@tui/context/sdk"
 import { SyncProvider, useSync } from "@tui/context/sync"
 import { LocalProvider, useLocal } from "@tui/context/local"
@@ -293,6 +294,14 @@ function App() {
       },
       category: "System",
     },
+    {
+      title: "Connect provider",
+      value: "provider.connect",
+      onSelect: () => {
+        dialog.replace(() => <DialogProviderList />)
+      },
+      category: "System",
+    },
     {
       title: `Switch to ${mode() === "dark" ? "light" : "dark"} mode`,
       value: "theme.switch_mode",
@@ -312,7 +321,7 @@ function App() {
     {
       title: "Exit the app",
       value: "app.exit",
-      onSelect: exit,
+      onSelect: () => exit(),
       category: "System",
     },
     {
@@ -451,16 +460,18 @@ function App() {
             <text fg={theme.textMuted}>{process.cwd().replace(Global.Path.home, "~")}</text>
           </box>
         </box>
-        <box flexDirection="row" flexShrink={0}>
-          <text fg={theme.textMuted} paddingRight={1}>
-            tab
-          </text>
-          <text fg={local.agent.color(local.agent.current().name)}>{""}</text>
-          <text bg={local.agent.color(local.agent.current().name)} fg={theme.background} wrapMode={undefined}>
-            <span style={{ bold: true }}> {local.agent.current().name.toUpperCase()}</span>
-            <span> AGENT </span>
-          </text>
-        </box>
+        <Show when={false}>
+          <box flexDirection="row" flexShrink={0}>
+            <text fg={theme.textMuted} paddingRight={1}>
+              tab
+            </text>
+            <text fg={local.agent.color(local.agent.current().name)}>{""}</text>
+            <text bg={local.agent.color(local.agent.current().name)} fg={theme.background} wrapMode={undefined}>
+              <span style={{ bold: true }}> {local.agent.current().name.toUpperCase()}</span>
+              <span> AGENT </span>
+            </text>
+          </box>
+        </Show>
       </box>
     </box>
   )
@@ -488,6 +499,8 @@ function ErrorComponent(props: { error: Error; reset: () => void; onExit: () =>
     )
   }
 
+  issueURL.searchParams.set("opencode-version", Installation.VERSION)
+
   const copyIssueURL = () => {
     Clipboard.copy(issueURL.toString()).then(() => {
       setCopied(true)

packages/opencode/src/cli/cmd/tui/component/border.tsx

@@ -1,16 +1,21 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
 export const SplitBorder = {
   border: ["left" as const, "right" as const],
   customBorderChars: {
-    topLeft: "",
-    bottomLeft: "",
+    ...EmptyBorder,
     vertical: "┃",
-    topRight: "",
-    bottomRight: "",
-    horizontal: "",
-    bottomT: "",
-    topT: "",
-    cross: "",
-    leftT: "",
-    rightT: "",
   },
 }

packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx

@@ -1,26 +1,27 @@
 import { createMemo, createSignal } from "solid-js"
 import { useLocal } from "@tui/context/local"
 import { useSync } from "@tui/context/sync"
-import { map, pipe, flatMap, entries, filter, isDeepEqual, sortBy } from "remeda"
+import { map, pipe, flatMap, entries, filter, isDeepEqual, sortBy, take } from "remeda"
 import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
 import { useDialog } from "@tui/ui/dialog"
-import { useTheme } from "../context/theme"
-
-function Free() {
-  const { theme } = useTheme()
-  return <span style={{ fg: theme.secondary }}>Free</span>
-}
+import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
 
 export function DialogModel() {
   const local = useLocal()
   const sync = useSync()
   const dialog = useDialog()
   const [ref, setRef] = createSignal<DialogSelectRef<unknown>>()
-  const { theme } = useTheme()
+
+  const connected = createMemo(() =>
+    sync.data.provider.some((x) => x.id !== "opencode" || Object.values(x.models).some((y) => y.cost?.input !== 0)),
+  )
+
+  const showRecent = createMemo(() => !ref()?.filter && local.model.recent().length > 0 && connected())
+  const providers = createDialogProviderOptions()
 
   const options = createMemo(() => {
     return [
-      ...(!ref()?.filter
+      ...(showRecent()
         ? local.model.recent().flatMap((item) => {
             const provider = sync.data.provider.find((x) => x.id === item.providerID)!
             if (!provider) return []
@@ -36,7 +37,17 @@ export function DialogModel() {
                 title: model.name ?? item.modelID,
                 description: provider.name,
                 category: "Recent",
-                footer: model.cost?.input === 0 && provider.id === "opencode" ? <Free /> : undefined,
+                footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
+                onSelect: () => {
+                  dialog.clear()
+                  local.model.set(
+                    {
+                      providerID: provider.id,
+                      modelID: model.id,
+                    },
+                    { recent: true },
+                  )
+                },
               },
             ]
           })
@@ -57,27 +68,56 @@ export function DialogModel() {
                 modelID: model,
               },
               title: info.name ?? model,
-              description: provider.name,
-              category: provider.name,
-              footer: info.cost?.input === 0 && provider.id === "opencode" ? <Free /> : undefined,
+              description: connected() ? provider.name : undefined,
+              category: connected() ? provider.name : undefined,
+              disabled: provider.id === "opencode" && model.includes("-nano"),
+              footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
+              onSelect() {
+                dialog.clear()
+                local.model.set(
+                  {
+                    providerID: provider.id,
+                    modelID: model,
+                  },
+                  { recent: true },
+                )
+              },
             })),
-            filter((x) => Boolean(ref()?.filter) || !local.model.recent().find((y) => isDeepEqual(y, x.value))),
+            filter((x) => !showRecent() || !local.model.recent().find((y) => isDeepEqual(y, x.value))),
+            sortBy((x) => x.title),
           ),
         ),
       ),
+      ...(!connected()
+        ? pipe(
+            providers(),
+            map((option) => {
+              return {
+                ...option,
+                category: "Popular providers",
+              }
+            }),
+            take(6),
+          )
+        : []),
     ]
   })
 
   return (
     <DialogSelect
+      keybind={[
+        {
+          keybind: { ctrl: true, name: "a", meta: false, shift: false, leader: false },
+          title: connected() ? "Connect provider" : "More providers",
+          onTrigger() {
+            dialog.replace(() => <DialogProvider />)
+          },
+        },
+      ]}
       ref={setRef}
       title="Select model"
       current={local.model.current()}
       options={options()}
-      onSelect={(option) => {
-        dialog.clear()
-        local.model.set(option.value, { recent: true })
-      }}
     />
   )
 }

packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx

@@ -0,0 +1,222 @@
+import { createMemo, createSignal, onMount, Show } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { map, pipe, sortBy } from "remeda"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "../context/sdk"
+import { DialogPrompt } from "../ui/dialog-prompt"
+import { useTheme } from "../context/theme"
+import { TextAttributes } from "@opentui/core"
+import type { ProviderAuthAuthorization } from "@opencode-ai/sdk"
+import { DialogModel } from "./dialog-model"
+
+const PROVIDER_PRIORITY: Record<string, number> = {
+  opencode: 0,
+  anthropic: 1,
+  "github-copilot": 2,
+  openai: 3,
+  google: 4,
+  openrouter: 5,
+}
+
+export function createDialogProviderOptions() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const options = createMemo(() => {
+    return pipe(
+      sync.data.provider_next.all,
+      map((provider) => ({
+        title: provider.name,
+        value: provider.id,
+        footer: {
+          opencode: "Recommended",
+          anthropic: "Claude Max or API key",
+        }[provider.id],
+        async onSelect() {
+          const methods = sync.data.provider_auth[provider.id] ?? [
+            {
+              type: "api",
+              label: "API key",
+            },
+          ]
+          let index: number | null = 0
+          if (methods.length > 1) {
+            index = await new Promise<number | null>((resolve) => {
+              dialog.replace(
+                () => (
+                  <DialogSelect
+                    title="Select auth method"
+                    options={methods.map((x, index) => ({
+                      title: x.label,
+                      value: index,
+                    }))}
+                    onSelect={(option) => resolve(option.value)}
+                  />
+                ),
+                () => resolve(null),
+              )
+            })
+          }
+          if (index == null) return
+          const method = methods[index]
+          if (method.type === "oauth") {
+            const result = await sdk.client.provider.oauth.authorize({
+              path: {
+                id: provider.id,
+              },
+              body: {
+                method: index,
+              },
+            })
+            if (result.data?.method === "code") {
+              dialog.replace(() => (
+                <CodeMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} />
+              ))
+            }
+            if (result.data?.method === "auto") {
+              dialog.replace(() => (
+                <AutoMethod providerID={provider.id} title={method.label} index={index} authorization={result.data!} />
+              ))
+            }
+          }
+          if (method.type === "api") {
+            return dialog.replace(() => <ApiMethod providerID={provider.id} title={method.label} />)
+          }
+        },
+      })),
+      sortBy((x) => PROVIDER_PRIORITY[x.value] ?? 99),
+    )
+  })
+  return options
+}
+
+export function DialogProvider() {
+  const options = createDialogProviderOptions()
+  return <DialogSelect title="Connect a provider" options={options()} />
+}
+
+interface AutoMethodProps {
+  index: number
+  providerID: string
+  title: string
+  authorization: ProviderAuthAuthorization
+}
+function AutoMethod(props: AutoMethodProps) {
+  const { theme } = useTheme()
+  const sdk = useSDK()
+  const dialog = useDialog()
+  const sync = useSync()
+
+  onMount(async () => {
+    const result = await sdk.client.provider.oauth.callback({
+      path: {
+        id: props.providerID,
+      },
+      body: {
+        method: props.index,
+      },
+    })
+    if (result.error) {
+      dialog.clear()
+      return
+    }
+    await sdk.client.instance.dispose()
+    await sync.bootstrap()
+    dialog.replace(() => <DialogModel />)
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD}>{props.title}</text>
+        <text fg={theme.textMuted}>esc</text>
+      </box>
+      <box gap={1}>
+        <text fg={theme.primary}>{props.authorization.url}</text>
+        <text fg={theme.textMuted}>{props.authorization.instructions}</text>
+      </box>
+      <text fg={theme.textMuted}>Waiting for authorization...</text>
+    </box>
+  )
+}
+
+interface CodeMethodProps {
+  index: number
+  title: string
+  providerID: string
+  authorization: ProviderAuthAuthorization
+}
+function CodeMethod(props: CodeMethodProps) {
+  const { theme } = useTheme()
+  const sdk = useSDK()
+  const sync = useSync()
+  const dialog = useDialog()
+  const [error, setError] = createSignal(false)
+
+  return (
+    <DialogPrompt
+      title={props.title}
+      placeholder="Authorization code"
+      onConfirm={async (value) => {
+        const { error } = await sdk.client.provider.oauth.callback({
+          path: {
+            id: props.providerID,
+          },
+          body: {
+            method: props.index,
+            code: value,
+          },
+        })
+        if (!error) {
+          await sdk.client.instance.dispose()
+          await sync.bootstrap()
+          dialog.replace(() => <DialogModel />)
+          return
+        }
+        setError(true)
+      }}
+      description={() => (
+        <box gap={1}>
+          <text fg={theme.textMuted}>{props.authorization.instructions}</text>
+          <text fg={theme.primary}>{props.authorization.url}</text>
+          <Show when={error()}>
+            <text fg={theme.error}>Invalid code</text>
+          </Show>
+        </box>
+      )}
+    />
+  )
+}
+
+interface ApiMethodProps {
+  providerID: string
+  title: string
+}
+function ApiMethod(props: ApiMethodProps) {
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const sync = useSync()
+
+  return (
+    <DialogPrompt
+      title={props.title}
+      placeholder="API key"
+      onConfirm={async (value) => {
+        if (!value) return
+        sdk.client.auth.set({
+          path: {
+            id: props.providerID,
+          },
+          body: {
+            type: "api",
+            key: value,
+          },
+        })
+        await sdk.client.instance.dispose()
+        await sync.bootstrap()
+        dialog.replace(() => <DialogModel />)
+      }}
+    />
+  )
+}

packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx

@@ -53,15 +53,7 @@ export function Autocomplete(props: {
     // Track props.value to make memo reactive to text changes
     props.value // <- there surely is a better way to do this, like making .input() reactive
 
-    const val = props.input().getTextRange(store.index + 1, props.input().cursorOffset + 1)
-
-    // If the filter contains a space, hide the autocomplete
-    if (val.includes(" ")) {
-      hide()
-      return undefined
-    }
-
-    return val
+    return props.input().getTextRange(store.index + 1, props.input().cursorOffset)
   })
 
   function insertPart(text: string, part: PromptInfo["parts"][number]) {
@@ -245,6 +237,11 @@ export function Autocomplete(props: {
           description: "jump to message",
           onSelect: () => command.trigger("session.timeline"),
         },
+        {
+          display: "/thinking",
+          description: "toggle thinking blocks",
+          onSelect: () => command.trigger("session.toggle.thinking"),
+        },
       )
       if (sync.data.config.share !== "disabled") {
         results.push({
@@ -382,17 +379,19 @@ export function Autocomplete(props: {
       get visible() {
         return store.visible
       },
-      onInput() {
+      onInput(value) {
         if (store.visible) {
-          if (props.input().cursorOffset <= store.index) {
+          if (
+            // Typed text before the trigger
+            props.input().cursorOffset <= store.index ||
+            // There is a space between the trigger and the cursor
+            props.input().getTextRange(store.index, props.input().cursorOffset).match(/\s/) ||
+            // "/<command>" is not the sole content
+            (store.visible === "/" && value.match(/^\S+\s+\S+\s*$/))
+          ) {
             hide()
             return
           }
-          // Check if a space was typed after the trigger character
-          const currentText = props.input().getTextRange(store.index + 1, props.input().cursorOffset + 1)
-          if (currentText.includes(" ")) {
-            hide()
-          }
         }
       },
       onKeyDown(e: KeyEvent) {

packages/opencode/src/cli/cmd/tui/component/prompt/history.tsx

@@ -4,7 +4,7 @@ import { onMount } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { clone } from "remeda"
 import { createSimpleContext } from "../../context/helper"
-import { appendFile } from "fs/promises"
+import { appendFile, writeFile } from "fs/promises"
 import type { AgentPart, FilePart, TextPart } from "@opencode-ai/sdk"
 
 export type PromptInfo = {
@@ -24,6 +24,8 @@ export type PromptInfo = {
   )[]
 }
 
+const MAX_HISTORY_ENTRIES = 50
+
 export const { use: usePromptHistory, provider: PromptHistoryProvider } = createSimpleContext({
   name: "PromptHistory",
   init: () => {
@@ -33,8 +35,23 @@ export const { use: usePromptHistory, provider: PromptHistoryProvider } = create
       const lines = text
         .split("\n")
         .filter(Boolean)
-        .map((line) => JSON.parse(line))
-      setStore("history", lines as PromptInfo[])
+        .map((line) => {
+          try {
+            return JSON.parse(line)
+          } catch {
+            return null
+          }
+        })
+        .filter((line): line is PromptInfo => line !== null)
+        .slice(-MAX_HISTORY_ENTRIES)
+
+      setStore("history", lines)
+
+      // Rewrite file with only valid entries to self-heal corruption
+      if (lines.length > 0) {
+        const content = lines.map((line) => JSON.stringify(line)).join("\n") + "\n"
+        writeFile(historyFile.name!, content).catch(() => {})
+      }
     })
 
     const [store, setStore] = createStore({
@@ -64,14 +81,26 @@ export const { use: usePromptHistory, provider: PromptHistoryProvider } = create
         return store.history.at(store.index)
       },
       append(item: PromptInfo) {
-        item = clone(item)
-        appendFile(historyFile.name!, JSON.stringify(item) + "\n")
+        const entry = clone(item)
+        let trimmed = false
         setStore(
           produce((draft) => {
-            draft.history.push(item)
+            draft.history.push(entry)
+            if (draft.history.length > MAX_HISTORY_ENTRIES) {
+              draft.history = draft.history.slice(-MAX_HISTORY_ENTRIES)
+              trimmed = true
+            }
             draft.index = 0
           }),
         )
+
+        if (trimmed) {
+          const content = store.history.map((line) => JSON.stringify(line)).join("\n") + "\n"
+          writeFile(historyFile.name!, content).catch(() => {})
+          return
+        }
+
+        appendFile(historyFile.name!, JSON.stringify(entry) + "\n").catch(() => {})
       },
     }
   },

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -1,18 +1,8 @@
-import {
-  TextAttributes,
-  BoxRenderable,
-  TextareaRenderable,
-  MouseEvent,
-  PasteEvent,
-  t,
-  dim,
-  fg,
-  type KeyBinding,
-} from "@opentui/core"
-import { createEffect, createMemo, Match, Switch, type JSX, onMount, batch } from "solid-js"
+import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg, type KeyBinding } from "@opentui/core"
+import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, Show, Switch, Match } from "solid-js"
 import { useLocal } from "@tui/context/local"
 import { useTheme } from "@tui/context/theme"
-import { SplitBorder } from "@tui/component/border"
+import { EmptyBorder } from "@tui/component/border"
 import { useSDK } from "@tui/context/sdk"
 import { useRoute } from "@tui/context/route"
 import { useSync } from "@tui/context/sync"
@@ -29,6 +19,8 @@ import { Clipboard } from "../../util/clipboard"
 import type { FilePart } from "@opencode-ai/sdk"
 import { TuiEvent } from "../../event"
 import { iife } from "@/util/iife"
+import { Locale } from "@/util/locale"
+import { Shimmer } from "../../ui/shimmer"
 
 export type PromptProps = {
   sessionID?: string
@@ -57,7 +49,7 @@ export function Prompt(props: PromptProps) {
   const sdk = useSDK()
   const route = useRoute()
   const sync = useSync()
-  const status = createMemo(() => (props.sessionID ? sync.session.status(props.sessionID) : "idle"))
+  const status = createMemo(() => sync.data.session_status[props.sessionID ?? ""] ?? { type: "idle" })
   const history = usePromptHistory()
   const command = useCommandDialog()
   const renderer = useRenderer()
@@ -222,12 +214,17 @@ export function Prompt(props: PromptProps) {
         title: "Interrupt session",
         value: "session.interrupt",
         keybind: "session_interrupt",
-        disabled: status() !== "working",
+        disabled: status().type === "idle",
         category: "Session",
         onSelect: (dialog) => {
-          if (!props.sessionID) return
           if (autocomplete.visible) return
           if (!input.focused) return
+          // TODO: this should be its own command
+          if (store.mode === "shell") {
+            setStore("mode", "normal")
+            return
+          }
+          if (!props.sessionID) return
 
           setStore("interrupt", store.interrupt + 1)
 
@@ -425,6 +422,10 @@ export function Prompt(props: PromptProps) {
         },
         body: {
           agent: local.agent.current().name,
+          model: {
+            providerID: local.model.current().providerID,
+            modelID: local.model.current().modelID,
+          },
           command: inputText,
         },
       })
@@ -538,6 +539,16 @@ export function Prompt(props: PromptProps) {
     return
   }
 
+  const highlight = createMemo(() => {
+    if (keybind.leader) return theme.border
+    if (store.mode === "shell") return theme.primary
+    return local.agent.color(local.agent.current().name)
+  })
+
+  createEffect(() => {
+    renderer.setCursorColor(highlight())
+  })
+
   return (
     <>
       <Autocomplete
@@ -562,17 +573,22 @@ export function Prompt(props: PromptProps) {
       />
       <box ref={(r) => (anchor = r)}>
         <box
-          flexDirection="row"
-          {...SplitBorder}
-          borderColor={keybind.leader ? theme.accent : store.mode === "shell" ? theme.secondary : theme.border}
-          justifyContent="space-evenly"
+          border={["left"]}
+          borderColor={highlight()}
+          customBorderChars={{
+            ...EmptyBorder,
+            vertical: "┃",
+            bottomLeft: "╹",
+          }}
         >
-          <box backgroundColor={theme.backgroundElement} width={3} height="100%" alignItems="center" paddingTop={1}>
-            <text attributes={TextAttributes.BOLD} fg={theme.primary}>
-              {store.mode === "normal" ? ">" : "!"}
-            </text>
-          </box>
-          <box paddingTop={1} paddingBottom={1} backgroundColor={theme.backgroundElement} flexGrow={1}>
+          <box
+            paddingLeft={2}
+            paddingRight={1}
+            paddingTop={1}
+            flexShrink={0}
+            backgroundColor={theme.backgroundElement}
+            flexGrow={1}
+          >
             <textarea
               placeholder={
                 props.showPlaceholder
@@ -590,8 +606,7 @@ export function Prompt(props: PromptProps) {
                 syncExtmarksWithPromptParts()
               }}
               keyBindings={textareaKeybindings()}
-              // TODO: fix this any
-              onKeyDown={async (e: any) => {
+              onKeyDown={async (e) => {
                 if (props.disabled) {
                   e.preventDefault()
                   return
@@ -665,7 +680,11 @@ export function Prompt(props: PromptProps) {
                   return
                 }
 
-                const pastedContent = event.text.trim()
+                // Normalize line endings at the boundary
+                // Windows ConPTY/Terminal often sends CR-only newlines in bracketed paste
+                // Replace CRLF first, then any remaining CR
+                const normalizedText = event.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
+                const pastedContent = normalizedText.trim()
                 if (!pastedContent) {
                   command.trigger("prompt.paste")
                   return
@@ -744,37 +763,151 @@ export function Prompt(props: PromptProps) {
               cursorColor={theme.primary}
               syntaxStyle={syntax()}
             />
+            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
+              <text fg={highlight()}>
+                {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
+              </text>
+              <Show when={store.mode === "normal"}>
+                <box flexDirection="row" gap={1}>
+                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
+                  <text flexShrink={0} fg={theme.text}>
+                    {local.model.parsed().model}
+                  </text>
+                </box>
+              </Show>
+            </box>
           </box>
-          <box backgroundColor={theme.backgroundElement} width={1} justifyContent="center" alignItems="center"></box>
+        </box>
+        <box
+          height={1}
+          border={["left"]}
+          borderColor={highlight()}
+          customBorderChars={{
+            ...EmptyBorder,
+            vertical: "╹",
+          }}
+        >
+          <box
+            height={1}
+            border={["bottom"]}
+            borderColor={theme.backgroundElement}
+            customBorderChars={{
+              ...EmptyBorder,
+              horizontal: "▀",
+            }}
+          />
         </box>
         <box flexDirection="row" justifyContent="space-between">
-          <text flexShrink={0} wrapMode="none" fg={theme.text}>
-            <span style={{ fg: theme.textMuted }}>{local.model.parsed().provider}</span>{" "}
-            <span style={{ bold: true }}>{local.model.parsed().model}</span>
-          </text>
-          <Switch>
-            <Match when={status() === "compacting"}>
-              <text fg={theme.textMuted}>compacting...</text>
-            </Match>
-            <Match when={status() === "working"}>
-              <box flexDirection="row" gap={1}>
-                <text fg={store.interrupt > 0 ? theme.primary : theme.text}>
-                  esc{" "}
-                  <span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>
-                    {store.interrupt > 0 ? "again to interrupt" : "interrupt"}
-                  </span>
-                </text>
+          <Show when={status().type !== "idle"} fallback={<text />}>
+            <box
+              flexDirection="row"
+              gap={1}
+              flexGrow={1}
+              justifyContent={status().type === "retry" ? "space-between" : "flex-start"}
+            >
+              <box flexShrink={0} flexDirection="row" gap={1}>
+                <Loader />
+                <box flexDirection="row" gap={1} flexShrink={0}>
+                  {(() => {
+                    const retry = createMemo(() => {
+                      const s = status()
+                      if (s.type !== "retry") return
+                      return s
+                    })
+                    const message = createMemo(() => {
+                      const r = retry()
+                      if (!r) return
+                      if (r.message.includes("exceeded your current quota") && r.message.includes("gemini"))
+                        return "gemini 3 way too hot right now"
+                      if (r.message.length > 50) return r.message.slice(0, 50) + "..."
+                      return r.message
+                    })
+                    const [seconds, setSeconds] = createSignal(0)
+                    onMount(() => {
+                      const timer = setInterval(() => {
+                        const next = retry()?.next
+                        if (next) setSeconds(Math.round((next - Date.now()) / 1000))
+                      }, 1000)
+
+                      onCleanup(() => {
+                        clearInterval(timer)
+                      })
+                    })
+                    return (
+                      <Show when={retry()}>
+                        <text fg={theme.error}>
+                          {message()} [retrying {seconds() > 0 ? `in ${seconds()}s ` : ""}
+                          attempt #{retry()!.attempt}]
+                        </text>
+                      </Show>
+                    )
+                  })()}
+                </box>
               </box>
-            </Match>
-            <Match when={props.hint}>{props.hint!}</Match>
-            <Match when={true}>
-              <text fg={theme.text}>
-                {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
+              <text fg={store.interrupt > 0 ? theme.primary : theme.text}>
+                esc{" "}
+                <span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>
+                  {store.interrupt > 0 ? "again to interrupt" : "interrupt"}
+                </span>
               </text>
-            </Match>
-          </Switch>
+            </box>
+          </Show>
+          <Show when={status().type !== "retry"}>
+            <box gap={2} flexDirection="row">
+              <Switch>
+                <Match when={store.mode === "normal"}>
+                  <text fg={theme.text}>
+                    {keybind.print("agent_cycle")} <span style={{ fg: theme.textMuted }}>switch agent</span>
+                  </text>
+                  <text fg={theme.text}>
+                    {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
+                  </text>
+                </Match>
+                <Match when={store.mode === "shell"}>
+                  <text fg={theme.text}>
+                    esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
+                  </text>
+                </Match>
+              </Switch>
+            </box>
+          </Show>
         </box>
       </box>
     </>
   )
 }
+
+function Loader() {
+  const FRAMES = [
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+    "▰▱▱▱▱▱▱",
+    "▰▰▱▱▱▱▱",
+    "▰▰▰▱▱▱▱",
+    "▱▰▰▰▱▱▱",
+    "▱▱▰▰▰▱▱",
+    "▱▱▱▰▰▰▱",
+    "▱▱▱▱▰▰▰",
+    "▱▱▱▱▱▰▰",
+    "▱▱▱▱▱▱▰",
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+    "▱▱▱▱▱▱▱",
+  ]
+  const [frame, setFrame] = createSignal(0)
+
+  onMount(() => {
+    const timer = setInterval(() => {
+      setFrame((frame() + 1) % FRAMES.length)
+    }, 100)
+    onCleanup(() => {
+      clearInterval(timer)
+    })
+  })
+
+  const { theme } = useTheme()
+  return <text fg={theme.diffAdded}>{FRAMES[frame()]}</text>
+}

packages/opencode/src/cli/cmd/tui/context/exit.tsx

@@ -1,13 +1,18 @@
 import { useRenderer } from "@opentui/solid"
 import { createSimpleContext } from "./helper"
+import { FormatError } from "@/cli/error"
 
 export const { use: useExit, provider: ExitProvider } = createSimpleContext({
   name: "Exit",
   init: (input: { onExit?: () => Promise<void> }) => {
     const renderer = useRenderer()
-    return async () => {
+    return async (reason?: any) => {
       renderer.destroy()
       await input.onExit?.()
+      if (reason) {
+        const formatted = FormatError(reason) ?? JSON.stringify(reason)
+        process.stderr.write(formatted + "\n")
+      }
       process.exit(0)
     }
   },