cleanup

Co-authored-by: Claude <noreply@anthropic.com>

.github/workflows/nix-desktop.yml

@@ -9,6 +9,7 @@ on:
       - "nix/**"
       - "packages/app/**"
       - "packages/desktop/**"
+      - ".github/workflows/nix-desktop.yml"
   pull_request:
     paths:
       - "flake.nix"
@@ -16,6 +17,7 @@ on:
       - "nix/**"
       - "packages/app/**"
       - "packages/desktop/**"
+      - ".github/workflows/nix-desktop.yml"
   workflow_dispatch:
 
 jobs:
@@ -25,6 +27,8 @@ jobs:
       matrix:
         os:
           - blacksmith-4vcpu-ubuntu-2404
+          - blacksmith-4vcpu-ubuntu-2404-arm
+          - macos-15-intel
           - macos-latest
     runs-on: ${{ matrix.os }}
     timeout-minutes: 60
@@ -33,7 +37,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup Nix
-        uses: DeterminateSystems/nix-installer-action@v21
+        uses: nixbuild/nix-quick-install-action@v34
 
       - name: Build desktop via flake
         run: |

.github/workflows/test.yml

@@ -18,6 +18,54 @@ jobs:
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
+      - name: Install Playwright browsers
+        working-directory: packages/app
+        run: bunx playwright install --with-deps
+
+      - name: Seed opencode data
+        working-directory: packages/opencode
+        run: bun script/seed-e2e.ts
+        env:
+          MODELS_DEV_API_JSON: ${{ github.workspace }}/packages/opencode/test/tool/fixtures/models-api.json
+          OPENCODE_DISABLE_MODELS_FETCH: "true"
+          OPENCODE_DISABLE_SHARE: "true"
+          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
+          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
+          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
+          OPENCODE_TEST_HOME: ${{ runner.temp }}/opencode-e2e/home
+          XDG_DATA_HOME: ${{ runner.temp }}/opencode-e2e/share
+          XDG_CACHE_HOME: ${{ runner.temp }}/opencode-e2e/cache
+          XDG_CONFIG_HOME: ${{ runner.temp }}/opencode-e2e/config
+          XDG_STATE_HOME: ${{ runner.temp }}/opencode-e2e/state
+          OPENCODE_E2E_PROJECT_DIR: ${{ github.workspace }}
+          OPENCODE_E2E_SESSION_TITLE: "E2E Session"
+          OPENCODE_E2E_MESSAGE: "Seeded for UI e2e"
+          OPENCODE_E2E_MODEL: "opencode/gpt-5-nano"
+
+      - name: Run opencode server
+        run: bun run dev -- --print-logs --log-level WARN serve --port 4096 --hostname 0.0.0.0 &
+        env:
+          MODELS_DEV_API_JSON: ${{ github.workspace }}/packages/opencode/test/tool/fixtures/models-api.json
+          OPENCODE_DISABLE_MODELS_FETCH: "true"
+          OPENCODE_DISABLE_SHARE: "true"
+          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
+          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
+          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
+          OPENCODE_TEST_HOME: ${{ runner.temp }}/opencode-e2e/home
+          XDG_DATA_HOME: ${{ runner.temp }}/opencode-e2e/share
+          XDG_CACHE_HOME: ${{ runner.temp }}/opencode-e2e/cache
+          XDG_CONFIG_HOME: ${{ runner.temp }}/opencode-e2e/config
+          XDG_STATE_HOME: ${{ runner.temp }}/opencode-e2e/state
+          OPENCODE_CLIENT: "app"
+
+      - name: Wait for opencode server
+        run: |
+          for i in {1..60}; do
+            curl -fsS "http://localhost:4096/global/health" > /dev/null && exit 0
+            sleep 1
+          done
+          exit 1
+
       - name: run
         run: |
           git config --global user.email "bot@opencode.ai"
@@ -26,3 +74,20 @@ jobs:
           bun turbo test
         env:
           CI: true
+          MODELS_DEV_API_JSON: ${{ github.workspace }}/packages/opencode/test/tool/fixtures/models-api.json
+          OPENCODE_DISABLE_MODELS_FETCH: "true"
+          OPENCODE_DISABLE_SHARE: "true"
+          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
+          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
+          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
+          OPENCODE_TEST_HOME: ${{ runner.temp }}/opencode-e2e/home
+          XDG_DATA_HOME: ${{ runner.temp }}/opencode-e2e/share
+          XDG_CACHE_HOME: ${{ runner.temp }}/opencode-e2e/cache
+          XDG_CONFIG_HOME: ${{ runner.temp }}/opencode-e2e/config
+          XDG_STATE_HOME: ${{ runner.temp }}/opencode-e2e/state
+          PLAYWRIGHT_SERVER_HOST: "localhost"
+          PLAYWRIGHT_SERVER_PORT: "4096"
+          VITE_OPENCODE_SERVER_HOST: "localhost"
+          VITE_OPENCODE_SERVER_PORT: "4096"
+          OPENCODE_CLIENT: "app"
+        timeout-minutes: 30

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

@@ -10,22 +10,26 @@ on:
       - "bun.lock"
       - "package.json"
       - "packages/*/package.json"
+      - "flake.lock"
+      - ".github/workflows/update-nix-hashes.yml"
   pull_request:
     paths:
       - "bun.lock"
       - "package.json"
       - "packages/*/package.json"
+      - "flake.lock"
+      - ".github/workflows/update-nix-hashes.yml"
 
 jobs:
-  update-linux:
+  update-node-modules-hashes:
     if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
     runs-on: blacksmith-4vcpu-ubuntu-2404
     env:
-      SYSTEM: x86_64-linux
+      TITLE: node_modules hashes
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           fetch-depth: 0
@@ -33,92 +37,7 @@ jobs:
           repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
 
       - name: Setup Nix
-        uses: DeterminateSystems/nix-installer-action@v20
-
-      - name: Configure git
-        run: |
-          git config --global user.email "action@github.com"
-          git config --global user.name "Github Action"
-
-      - name: Update flake.lock
-        run: |
-          set -euo pipefail
-          echo "📦 Updating flake.lock..."
-          nix flake update
-          echo "✅ flake.lock updated successfully"
-
-      - name: Update node_modules hash for x86_64-linux
-        run: |
-          set -euo pipefail
-          echo "🔄 Updating node_modules hash for x86_64-linux..."
-          nix/scripts/update-hashes.sh
-          echo "✅ node_modules hash for x86_64-linux updated successfully"
-
-      - name: Commit Linux hash changes
-        env:
-          TARGET_BRANCH: ${{ github.head_ref || github.ref_name }}
-        run: |
-          set -euo pipefail
-
-          echo "🔍 Checking for changes in tracked Nix files..."
-
-          summarize() {
-            local status="$1"
-            {
-              echo "### Nix Hash Update (x86_64-linux)"
-              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
-            echo "✅ No changes detected. Hashes are already up to date."
-            summarize "no changes"
-            exit 0
-          fi
-
-          echo "📝 Changes detected:"
-          echo "$STATUS"
-          echo "🔗 Staging files..."
-          git add "${FILES[@]}"
-          echo "💾 Committing changes..."
-          git commit -m "Update Nix flake.lock and x86_64-linux hash"
-          echo "✅ Changes committed"
-
-          BRANCH="${TARGET_BRANCH:-${GITHUB_REF_NAME}}"
-          echo "🌳 Pulling latest from branch: $BRANCH"
-          git pull --rebase origin "$BRANCH"
-          echo "🚀 Pushing changes to branch: $BRANCH"
-          git push origin HEAD:"$BRANCH"
-          echo "✅ Changes pushed successfully"
-
-          summarize "committed $(git rev-parse --short HEAD)"
-
-  update-macos:
-    needs: update-linux
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: macos-latest
-    env:
-      SYSTEM: aarch64-darwin
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
-          ref: ${{ github.head_ref || github.ref_name }}
-          repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
-
-      - name: Setup Nix
-        uses: DeterminateSystems/nix-installer-action@v20
+        uses: nixbuild/nix-quick-install-action@v34
 
       - name: Configure git
         run: |
@@ -130,27 +49,64 @@ jobs:
           TARGET_BRANCH: ${{ github.head_ref || github.ref_name }}
         run: |
           BRANCH="${TARGET_BRANCH:-${GITHUB_REF_NAME}}"
-          git pull origin "$BRANCH"
+          git pull --rebase --autostash origin "$BRANCH"
 
-      - name: Update node_modules hash for aarch64-darwin
+      - name: Compute all node_modules hashes
         run: |
           set -euo pipefail
-          echo "🔄 Updating node_modules hash for aarch64-darwin..."
-          nix/scripts/update-hashes.sh
-          echo "✅ node_modules hash for aarch64-darwin updated successfully"
 
-      - name: Commit macOS hash changes
+          HASH_FILE="nix/hashes.json"
+          SYSTEMS="x86_64-linux aarch64-linux x86_64-darwin aarch64-darwin"
+
+          if [ ! -f "$HASH_FILE" ]; then
+            mkdir -p "$(dirname "$HASH_FILE")"
+            echo '{"nodeModules":{}}' > "$HASH_FILE"
+          fi
+
+          for SYSTEM in $SYSTEMS; do
+            echo "Computing hash for ${SYSTEM}..."
+            BUILD_LOG=$(mktemp)
+            trap 'rm -f "$BUILD_LOG"' EXIT
+
+            # The updater derivations use fakeHash, so they will fail and reveal the correct hash
+            UPDATER_ATTR=".#packages.x86_64-linux.${SYSTEM}_node_modules"
+
+            nix build "$UPDATER_ATTR" --no-link 2>&1 | tee "$BUILD_LOG" || true
+
+            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 "Failed to determine correct node_modules hash for ${SYSTEM}."
+              cat "$BUILD_LOG"
+              exit 1
+            fi
+
+            echo "  ${SYSTEM}: ${CORRECT_HASH}"
+            jq --arg sys "$SYSTEM" --arg h "$CORRECT_HASH" \
+              '.nodeModules[$sys] = $h' "$HASH_FILE" > "${HASH_FILE}.tmp"
+            mv "${HASH_FILE}.tmp" "$HASH_FILE"
+          done
+
+          echo "All hashes computed:"
+          cat "$HASH_FILE"
+
+      - name: Commit ${{ env.TITLE }} changes
         env:
           TARGET_BRANCH: ${{ github.head_ref || github.ref_name }}
         run: |
           set -euo pipefail
 
-          echo "🔍 Checking for changes in tracked Nix files..."
+          HASH_FILE="nix/hashes.json"
+          echo "Checking for changes..."
 
           summarize() {
             local status="$1"
             {
-              echo "### Nix Hash Update (aarch64-darwin)"
+              echo "### Nix $TITLE"
               echo ""
               echo "- ref: ${GITHUB_REF_NAME}"
               echo "- status: ${status}"
@@ -161,27 +117,22 @@ jobs:
             echo "" >> "$GITHUB_STEP_SUMMARY"
           }
 
-          FILES=(nix/hashes.json)
+          FILES=("$HASH_FILE")
           STATUS="$(git status --short -- "${FILES[@]}" || true)"
           if [ -z "$STATUS" ]; then
-            echo "✅ No changes detected. Hash is already up to date."
+            echo "No changes detected."
             summarize "no changes"
             exit 0
           fi
 
-          echo "📝 Changes detected:"
+          echo "Changes detected:"
           echo "$STATUS"
-          echo "🔗 Staging files..."
           git add "${FILES[@]}"
-          echo "💾 Committing changes..."
-          git commit -m "Update aarch64-darwin hash"
-          echo "✅ Changes committed"
+          git commit -m "Update $TITLE"
 
           BRANCH="${TARGET_BRANCH:-${GITHUB_REF_NAME}}"
-          echo "🌳 Pulling latest from branch: $BRANCH"
-          git pull --rebase origin "$BRANCH"
-          echo "🚀 Pushing changes to branch: $BRANCH"
+          git pull --rebase --autostash origin "$BRANCH"
           git push origin HEAD:"$BRANCH"
-          echo "✅ Changes pushed successfully"
+          echo "Changes pushed successfully"
 
           summarize "committed $(git rev-parse --short HEAD)"

.gitignore

@@ -20,6 +20,7 @@ opencode.json
 a.out
 target
 .scripts
+.direnv/
 
 # Local dev files
 opencode-dev

README.md

@@ -26,7 +26,7 @@ curl -fsSL https://opencode.ai/install | bash
 
 # Package managers
 npm i -g opencode-ai@latest        # or bun/pnpm/yarn
-scoop bucket add extras; scoop install extras/opencode  # Windows
+scoop install opencode             # Windows
 choco install opencode             # Windows
 brew install anomalyco/tap/opencode # macOS and Linux (recommended, always up to date)
 brew install opencode              # macOS and Linux (official brew formula, updated less)
@@ -52,6 +52,8 @@ OpenCode is also available as a desktop application. Download directly from the
 ```bash
 # macOS (Homebrew)
 brew install --cask opencode-desktop
+# Windows (Scoop)
+scoop bucket add extras; scoop install extras/opencode-desktop
 ```
 
 #### Installation Directory

README.zh-CN.md

@@ -26,7 +26,7 @@ curl -fsSL https://opencode.ai/install | bash
 
 # 软件包管理器
 npm i -g opencode-ai@latest        # 也可使用 bun/pnpm/yarn
-scoop bucket add extras; scoop install extras/opencode  # Windows
+scoop install opencode             # Windows
 choco install opencode             # Windows
 brew install anomalyco/tap/opencode # macOS 和 Linux（推荐，始终保持最新）
 brew install opencode              # macOS 和 Linux（官方 brew formula，更新频率较低）
@@ -52,6 +52,8 @@ OpenCode 也提供桌面版应用。可直接从 [发布页 (releases page)](htt
 ```bash
 # macOS (Homebrew Cask)
 brew install --cask opencode-desktop
+# Windows (Scoop)
+scoop bucket add extras; scoop install extras/opencode-desktop
 ```
 
 #### 安装目录

README.zh-TW.md

@@ -26,7 +26,7 @@ curl -fsSL https://opencode.ai/install | bash
 
 # 套件管理員
 npm i -g opencode-ai@latest        # 也可使用 bun/pnpm/yarn
-scoop bucket add extras; scoop install extras/opencode  # Windows
+scoop install opencode             # Windows
 choco install opencode             # Windows
 brew install anomalyco/tap/opencode # macOS 與 Linux（推薦，始終保持最新）
 brew install opencode              # macOS 與 Linux（官方 brew formula，更新頻率較低）
@@ -52,6 +52,8 @@ OpenCode 也提供桌面版應用程式。您可以直接從 [發佈頁面 (rele
 ```bash
 # macOS (Homebrew Cask)
 brew install --cask opencode-desktop
+# Windows (Scoop)
+scoop bucket add extras; scoop install extras/opencode-desktop
 ```
 
 #### 安裝目錄

SECURITY.md

@@ -24,6 +24,7 @@ Server mode is opt-in only. When enabled, set `OPENCODE_SERVER_PASSWORD` to requ
 | **Sandbox escapes**             | The permission system is not a sandbox (see above)                      |
 | **LLM provider data handling**  | Data sent to your configured LLM provider is governed by their policies |
 | **MCP server behavior**         | External MCP servers you configure are outside our trust boundary       |
+| **Malicious config files**      | Users control their own config; modifying it is not an attack vector    |
 
 ---
 

STATS.md

@@ -1,203 +1,208 @@
 # Download Stats
 
-| Date       | GitHub Downloads     | npm Downloads       | Total                |
-| ---------- | -------------------- | ------------------- | -------------------- |
-| 2025-06-29 | 18,789 (+0)          | 39,420 (+0)         | 58,209 (+0)          |
-| 2025-06-30 | 20,127 (+1,338)      | 41,059 (+1,639)     | 61,186 (+2,977)      |
-| 2025-07-01 | 22,108 (+1,981)      | 43,745 (+2,686)     | 65,853 (+4,667)      |
-| 2025-07-02 | 24,814 (+2,706)      | 46,168 (+2,423)     | 70,982 (+5,129)      |
-| 2025-07-03 | 27,834 (+3,020)      | 49,955 (+3,787)     | 77,789 (+6,807)      |
-| 2025-07-04 | 30,608 (+2,774)      | 54,758 (+4,803)     | 85,366 (+7,577)      |
-| 2025-07-05 | 32,524 (+1,916)      | 58,371 (+3,613)     | 90,895 (+5,529)      |
-| 2025-07-06 | 33,766 (+1,242)      | 59,694 (+1,323)     | 93,460 (+2,565)      |
-| 2025-07-08 | 38,052 (+4,286)      | 64,468 (+4,774)     | 102,520 (+9,060)     |
-| 2025-07-09 | 40,924 (+2,872)      | 67,935 (+3,467)     | 108,859 (+6,339)     |
-| 2025-07-10 | 43,796 (+2,872)      | 71,402 (+3,467)     | 115,198 (+6,339)     |
-| 2025-07-11 | 46,982 (+3,186)      | 77,462 (+6,060)     | 124,444 (+9,246)     |
-| 2025-07-12 | 49,302 (+2,320)      | 82,177 (+4,715)     | 131,479 (+7,035)     |
-| 2025-07-13 | 50,803 (+1,501)      | 86,394 (+4,217)     | 137,197 (+5,718)     |
-| 2025-07-14 | 53,283 (+2,480)      | 87,860 (+1,466)     | 141,143 (+3,946)     |
-| 2025-07-15 | 57,590 (+4,307)      | 91,036 (+3,176)     | 148,626 (+7,483)     |
-| 2025-07-16 | 62,313 (+4,723)      | 95,258 (+4,222)     | 157,571 (+8,945)     |
-| 2025-07-17 | 66,684 (+4,371)      | 100,048 (+4,790)    | 166,732 (+9,161)     |
-| 2025-07-18 | 70,379 (+3,695)      | 102,587 (+2,539)    | 172,966 (+6,234)     |
-| 2025-07-19 | 73,497 (+3,117)      | 105,904 (+3,317)    | 179,401 (+6,434)     |
-| 2025-07-20 | 76,453 (+2,956)      | 109,044 (+3,140)    | 185,497 (+6,096)     |
-| 2025-07-21 | 80,197 (+3,744)      | 113,537 (+4,493)    | 193,734 (+8,237)     |
-| 2025-07-22 | 84,251 (+4,054)      | 118,073 (+4,536)    | 202,324 (+8,590)     |
-| 2025-07-23 | 88,589 (+4,338)      | 121,436 (+3,363)    | 210,025 (+7,701)     |
-| 2025-07-24 | 92,469 (+3,880)      | 124,091 (+2,655)    | 216,560 (+6,535)     |
-| 2025-07-25 | 96,417 (+3,948)      | 126,985 (+2,894)    | 223,402 (+6,842)     |
-| 2025-07-26 | 100,646 (+4,229)     | 131,411 (+4,426)    | 232,057 (+8,655)     |
-| 2025-07-27 | 102,644 (+1,998)     | 134,736 (+3,325)    | 237,380 (+5,323)     |
-| 2025-07-28 | 105,446 (+2,802)     | 136,016 (+1,280)    | 241,462 (+4,082)     |
-| 2025-07-29 | 108,998 (+3,552)     | 137,542 (+1,526)    | 246,540 (+5,078)     |
-| 2025-07-30 | 113,544 (+4,546)     | 140,317 (+2,775)    | 253,861 (+7,321)     |
-| 2025-07-31 | 118,339 (+4,795)     | 143,344 (+3,027)    | 261,683 (+7,822)     |
-| 2025-08-01 | 123,539 (+5,200)     | 146,680 (+3,336)    | 270,219 (+8,536)     |
-| 2025-08-02 | 127,864 (+4,325)     | 149,236 (+2,556)    | 277,100 (+6,881)     |
-| 2025-08-03 | 131,397 (+3,533)     | 150,451 (+1,215)    | 281,848 (+4,748)     |
-| 2025-08-04 | 136,266 (+4,869)     | 153,260 (+2,809)    | 289,526 (+7,678)     |
-| 2025-08-05 | 141,596 (+5,330)     | 155,752 (+2,492)    | 297,348 (+7,822)     |
-| 2025-08-06 | 147,067 (+5,471)     | 158,309 (+2,557)    | 305,376 (+8,028)     |
-| 2025-08-07 | 152,591 (+5,524)     | 160,889 (+2,580)    | 313,480 (+8,104)     |
-| 2025-08-08 | 158,187 (+5,596)     | 163,448 (+2,559)    | 321,635 (+8,155)     |
-| 2025-08-09 | 162,770 (+4,583)     | 165,721 (+2,273)    | 328,491 (+6,856)     |
-| 2025-08-10 | 165,695 (+2,925)     | 167,109 (+1,388)    | 332,804 (+4,313)     |
-| 2025-08-11 | 169,297 (+3,602)     | 167,953 (+844)      | 337,250 (+4,446)     |
-| 2025-08-12 | 176,307 (+7,010)     | 171,876 (+3,923)    | 348,183 (+10,933)    |
-| 2025-08-13 | 182,997 (+6,690)     | 177,182 (+5,306)    | 360,179 (+11,996)    |
-| 2025-08-14 | 189,063 (+6,066)     | 179,741 (+2,559)    | 368,804 (+8,625)     |
-| 2025-08-15 | 193,608 (+4,545)     | 181,792 (+2,051)    | 375,400 (+6,596)     |
-| 2025-08-16 | 198,118 (+4,510)     | 184,558 (+2,766)    | 382,676 (+7,276)     |
-| 2025-08-17 | 201,299 (+3,181)     | 186,269 (+1,711)    | 387,568 (+4,892)     |
-| 2025-08-18 | 204,559 (+3,260)     | 187,399 (+1,130)    | 391,958 (+4,390)     |
-| 2025-08-19 | 209,814 (+5,255)     | 189,668 (+2,269)    | 399,482 (+7,524)     |
-| 2025-08-20 | 214,497 (+4,683)     | 191,481 (+1,813)    | 405,978 (+6,496)     |
-| 2025-08-21 | 220,465 (+5,968)     | 194,784 (+3,303)    | 415,249 (+9,271)     |
-| 2025-08-22 | 225,899 (+5,434)     | 197,204 (+2,420)    | 423,103 (+7,854)     |
-| 2025-08-23 | 229,005 (+3,106)     | 199,238 (+2,034)    | 428,243 (+5,140)     |
-| 2025-08-24 | 232,098 (+3,093)     | 201,157 (+1,919)    | 433,255 (+5,012)     |
-| 2025-08-25 | 236,607 (+4,509)     | 202,650 (+1,493)    | 439,257 (+6,002)     |
-| 2025-08-26 | 242,783 (+6,176)     | 205,242 (+2,592)    | 448,025 (+8,768)     |
-| 2025-08-27 | 248,409 (+5,626)     | 205,242 (+0)        | 453,651 (+5,626)     |
-| 2025-08-28 | 252,796 (+4,387)     | 205,242 (+0)        | 458,038 (+4,387)     |
-| 2025-08-29 | 256,045 (+3,249)     | 211,075 (+5,833)    | 467,120 (+9,082)     |
-| 2025-08-30 | 258,863 (+2,818)     | 212,397 (+1,322)    | 471,260 (+4,140)     |
-| 2025-08-31 | 262,004 (+3,141)     | 213,944 (+1,547)    | 475,948 (+4,688)     |
-| 2025-09-01 | 265,359 (+3,355)     | 215,115 (+1,171)    | 480,474 (+4,526)     |
-| 2025-09-02 | 270,483 (+5,124)     | 217,075 (+1,960)    | 487,558 (+7,084)     |
-| 2025-09-03 | 274,793 (+4,310)     | 219,755 (+2,680)    | 494,548 (+6,990)     |
-| 2025-09-04 | 280,430 (+5,637)     | 222,103 (+2,348)    | 502,533 (+7,985)     |
-| 2025-09-05 | 283,769 (+3,339)     | 223,793 (+1,690)    | 507,562 (+5,029)     |
-| 2025-09-06 | 286,245 (+2,476)     | 225,036 (+1,243)    | 511,281 (+3,719)     |
-| 2025-09-07 | 288,623 (+2,378)     | 225,866 (+830)      | 514,489 (+3,208)     |
-| 2025-09-08 | 293,341 (+4,718)     | 227,073 (+1,207)    | 520,414 (+5,925)     |
-| 2025-09-09 | 300,036 (+6,695)     | 229,788 (+2,715)    | 529,824 (+9,410)     |
-| 2025-09-10 | 307,287 (+7,251)     | 233,435 (+3,647)    | 540,722 (+10,898)    |
-| 2025-09-11 | 314,083 (+6,796)     | 237,356 (+3,921)    | 551,439 (+10,717)    |
-| 2025-09-12 | 321,046 (+6,963)     | 240,728 (+3,372)    | 561,774 (+10,335)    |
-| 2025-09-13 | 324,894 (+3,848)     | 245,539 (+4,811)    | 570,433 (+8,659)     |
-| 2025-09-14 | 328,876 (+3,982)     | 248,245 (+2,706)    | 577,121 (+6,688)     |
-| 2025-09-15 | 334,201 (+5,325)     | 250,983 (+2,738)    | 585,184 (+8,063)     |
-| 2025-09-16 | 342,609 (+8,408)     | 255,264 (+4,281)    | 597,873 (+12,689)    |
-| 2025-09-17 | 351,117 (+8,508)     | 260,970 (+5,706)    | 612,087 (+14,214)    |
-| 2025-09-18 | 358,717 (+7,600)     | 266,922 (+5,952)    | 625,639 (+13,552)    |
-| 2025-09-19 | 365,401 (+6,684)     | 271,859 (+4,937)    | 637,260 (+11,621)    |
-| 2025-09-20 | 372,092 (+6,691)     | 276,917 (+5,058)    | 649,009 (+11,749)    |
-| 2025-09-21 | 377,079 (+4,987)     | 280,261 (+3,344)    | 657,340 (+8,331)     |
-| 2025-09-22 | 382,492 (+5,413)     | 284,009 (+3,748)    | 666,501 (+9,161)     |
-| 2025-09-23 | 387,008 (+4,516)     | 289,129 (+5,120)    | 676,137 (+9,636)     |
-| 2025-09-24 | 393,325 (+6,317)     | 294,927 (+5,798)    | 688,252 (+12,115)    |
-| 2025-09-25 | 398,879 (+5,554)     | 301,663 (+6,736)    | 700,542 (+12,290)    |
-| 2025-09-26 | 404,334 (+5,455)     | 306,713 (+5,050)    | 711,047 (+10,505)    |
-| 2025-09-27 | 411,618 (+7,284)     | 317,763 (+11,050)   | 729,381 (+18,334)    |
-| 2025-09-28 | 414,910 (+3,292)     | 322,522 (+4,759)    | 737,432 (+8,051)     |
-| 2025-09-29 | 419,919 (+5,009)     | 328,033 (+5,511)    | 747,952 (+10,520)    |
-| 2025-09-30 | 427,991 (+8,072)     | 336,472 (+8,439)    | 764,463 (+16,511)    |
-| 2025-10-01 | 433,591 (+5,600)     | 341,742 (+5,270)    | 775,333 (+10,870)    |
-| 2025-10-02 | 440,852 (+7,261)     | 348,099 (+6,357)    | 788,951 (+13,618)    |
-| 2025-10-03 | 446,829 (+5,977)     | 359,937 (+11,838)   | 806,766 (+17,815)    |
-| 2025-10-04 | 452,561 (+5,732)     | 370,386 (+10,449)   | 822,947 (+16,181)    |
-| 2025-10-05 | 455,559 (+2,998)     | 374,745 (+4,359)    | 830,304 (+7,357)     |
-| 2025-10-06 | 460,927 (+5,368)     | 379,489 (+4,744)    | 840,416 (+10,112)    |
-| 2025-10-07 | 467,336 (+6,409)     | 385,438 (+5,949)    | 852,774 (+12,358)    |
-| 2025-10-08 | 474,643 (+7,307)     | 394,139 (+8,701)    | 868,782 (+16,008)    |
-| 2025-10-09 | 479,203 (+4,560)     | 400,526 (+6,387)    | 879,729 (+10,947)    |
-| 2025-10-10 | 484,374 (+5,171)     | 406,015 (+5,489)    | 890,389 (+10,660)    |
-| 2025-10-11 | 488,427 (+4,053)     | 414,699 (+8,684)    | 903,126 (+12,737)    |
-| 2025-10-12 | 492,125 (+3,698)     | 418,745 (+4,046)    | 910,870 (+7,744)     |
-| 2025-10-14 | 505,130 (+13,005)    | 429,286 (+10,541)   | 934,416 (+23,546)    |
-| 2025-10-15 | 512,717 (+7,587)     | 439,290 (+10,004)   | 952,007 (+17,591)    |
-| 2025-10-16 | 517,719 (+5,002)     | 447,137 (+7,847)    | 964,856 (+12,849)    |
-| 2025-10-17 | 526,239 (+8,520)     | 457,467 (+10,330)   | 983,706 (+18,850)    |
-| 2025-10-18 | 531,564 (+5,325)     | 465,272 (+7,805)    | 996,836 (+13,130)    |
-| 2025-10-19 | 536,209 (+4,645)     | 469,078 (+3,806)    | 1,005,287 (+8,451)   |
-| 2025-10-20 | 541,264 (+5,055)     | 472,952 (+3,874)    | 1,014,216 (+8,929)   |
-| 2025-10-21 | 548,721 (+7,457)     | 479,703 (+6,751)    | 1,028,424 (+14,208)  |
-| 2025-10-22 | 557,949 (+9,228)     | 491,395 (+11,692)   | 1,049,344 (+20,920)  |
-| 2025-10-23 | 564,716 (+6,767)     | 498,736 (+7,341)    | 1,063,452 (+14,108)  |
-| 2025-10-24 | 572,692 (+7,976)     | 506,905 (+8,169)    | 1,079,597 (+16,145)  |
-| 2025-10-25 | 578,927 (+6,235)     | 516,129 (+9,224)    | 1,095,056 (+15,459)  |
-| 2025-10-26 | 584,409 (+5,482)     | 521,179 (+5,050)    | 1,105,588 (+10,532)  |
-| 2025-10-27 | 589,999 (+5,590)     | 526,001 (+4,822)    | 1,116,000 (+10,412)  |
-| 2025-10-28 | 595,776 (+5,777)     | 532,438 (+6,437)    | 1,128,214 (+12,214)  |
-| 2025-10-29 | 606,259 (+10,483)    | 542,064 (+9,626)    | 1,148,323 (+20,109)  |
-| 2025-10-30 | 613,746 (+7,487)     | 542,064 (+0)        | 1,155,810 (+7,487)   |
-| 2025-10-30 | 617,846 (+4,100)     | 555,026 (+12,962)   | 1,172,872 (+17,062)  |
-| 2025-10-31 | 626,612 (+8,766)     | 564,579 (+9,553)    | 1,191,191 (+18,319)  |
-| 2025-11-01 | 636,100 (+9,488)     | 581,806 (+17,227)   | 1,217,906 (+26,715)  |
-| 2025-11-02 | 644,067 (+7,967)     | 590,004 (+8,198)    | 1,234,071 (+16,165)  |
-| 2025-11-03 | 653,130 (+9,063)     | 597,139 (+7,135)    | 1,250,269 (+16,198)  |
-| 2025-11-04 | 663,912 (+10,782)    | 608,056 (+10,917)   | 1,271,968 (+21,699)  |
-| 2025-11-05 | 675,074 (+11,162)    | 619,690 (+11,634)   | 1,294,764 (+22,796)  |
-| 2025-11-06 | 686,252 (+11,178)    | 630,885 (+11,195)   | 1,317,137 (+22,373)  |
-| 2025-11-07 | 696,646 (+10,394)    | 642,146 (+11,261)   | 1,338,792 (+21,655)  |
-| 2025-11-08 | 706,035 (+9,389)     | 653,489 (+11,343)   | 1,359,524 (+20,732)  |
-| 2025-11-09 | 713,462 (+7,427)     | 660,459 (+6,970)    | 1,373,921 (+14,397)  |
-| 2025-11-10 | 722,288 (+8,826)     | 668,225 (+7,766)    | 1,390,513 (+16,592)  |
-| 2025-11-11 | 729,769 (+7,481)     | 677,501 (+9,276)    | 1,407,270 (+16,757)  |
-| 2025-11-12 | 740,180 (+10,411)    | 686,454 (+8,953)    | 1,426,634 (+19,364)  |
-| 2025-11-13 | 749,905 (+9,725)     | 696,157 (+9,703)    | 1,446,062 (+19,428)  |
-| 2025-11-14 | 759,928 (+10,023)    | 705,237 (+9,080)    | 1,465,165 (+19,103)  |
-| 2025-11-15 | 765,955 (+6,027)     | 712,870 (+7,633)    | 1,478,825 (+13,660)  |
-| 2025-11-16 | 771,069 (+5,114)     | 716,596 (+3,726)    | 1,487,665 (+8,840)   |
-| 2025-11-17 | 780,161 (+9,092)     | 723,339 (+6,743)    | 1,503,500 (+15,835)  |
-| 2025-11-18 | 791,563 (+11,402)    | 732,544 (+9,205)    | 1,524,107 (+20,607)  |
-| 2025-11-19 | 804,409 (+12,846)    | 747,624 (+15,080)   | 1,552,033 (+27,926)  |
-| 2025-11-20 | 814,620 (+10,211)    | 757,907 (+10,283)   | 1,572,527 (+20,494)  |
-| 2025-11-21 | 826,309 (+11,689)    | 769,307 (+11,400)   | 1,595,616 (+23,089)  |
-| 2025-11-22 | 837,269 (+10,960)    | 780,996 (+11,689)   | 1,618,265 (+22,649)  |
-| 2025-11-23 | 846,609 (+9,340)     | 795,069 (+14,073)   | 1,641,678 (+23,413)  |
-| 2025-11-24 | 856,733 (+10,124)    | 804,033 (+8,964)    | 1,660,766 (+19,088)  |
-| 2025-11-25 | 869,423 (+12,690)    | 817,339 (+13,306)   | 1,686,762 (+25,996)  |
-| 2025-11-26 | 881,414 (+11,991)    | 832,518 (+15,179)   | 1,713,932 (+27,170)  |
-| 2025-11-27 | 893,960 (+12,546)    | 846,180 (+13,662)   | 1,740,140 (+26,208)  |
-| 2025-11-28 | 901,741 (+7,781)     | 856,482 (+10,302)   | 1,758,223 (+18,083)  |
-| 2025-11-29 | 908,689 (+6,948)     | 863,361 (+6,879)    | 1,772,050 (+13,827)  |
-| 2025-11-30 | 916,116 (+7,427)     | 870,194 (+6,833)    | 1,786,310 (+14,260)  |
-| 2025-12-01 | 925,898 (+9,782)     | 876,500 (+6,306)    | 1,802,398 (+16,088)  |
-| 2025-12-02 | 939,250 (+13,352)    | 890,919 (+14,419)   | 1,830,169 (+27,771)  |
-| 2025-12-03 | 952,249 (+12,999)    | 903,713 (+12,794)   | 1,855,962 (+25,793)  |
-| 2025-12-04 | 965,611 (+13,362)    | 916,471 (+12,758)   | 1,882,082 (+26,120)  |
-| 2025-12-05 | 977,996 (+12,385)    | 930,616 (+14,145)   | 1,908,612 (+26,530)  |
-| 2025-12-06 | 987,884 (+9,888)     | 943,773 (+13,157)   | 1,931,657 (+23,045)  |
-| 2025-12-07 | 994,046 (+6,162)     | 951,425 (+7,652)    | 1,945,471 (+13,814)  |
-| 2025-12-08 | 1,000,898 (+6,852)   | 957,149 (+5,724)    | 1,958,047 (+12,576)  |
-| 2025-12-09 | 1,011,488 (+10,590)  | 973,922 (+16,773)   | 1,985,410 (+27,363)  |
-| 2025-12-10 | 1,025,891 (+14,403)  | 991,708 (+17,786)   | 2,017,599 (+32,189)  |
-| 2025-12-11 | 1,045,110 (+19,219)  | 1,010,559 (+18,851) | 2,055,669 (+38,070)  |
-| 2025-12-12 | 1,061,340 (+16,230)  | 1,030,838 (+20,279) | 2,092,178 (+36,509)  |
-| 2025-12-13 | 1,073,561 (+12,221)  | 1,044,608 (+13,770) | 2,118,169 (+25,991)  |
-| 2025-12-14 | 1,082,042 (+8,481)   | 1,052,425 (+7,817)  | 2,134,467 (+16,298)  |
-| 2025-12-15 | 1,093,632 (+11,590)  | 1,059,078 (+6,653)  | 2,152,710 (+18,243)  |
-| 2025-12-16 | 1,120,477 (+26,845)  | 1,078,022 (+18,944) | 2,198,499 (+45,789)  |
-| 2025-12-17 | 1,151,067 (+30,590)  | 1,097,661 (+19,639) | 2,248,728 (+50,229)  |
-| 2025-12-18 | 1,178,658 (+27,591)  | 1,113,418 (+15,757) | 2,292,076 (+43,348)  |
-| 2025-12-19 | 1,203,485 (+24,827)  | 1,129,698 (+16,280) | 2,333,183 (+41,107)  |
-| 2025-12-20 | 1,223,000 (+19,515)  | 1,146,258 (+16,560) | 2,369,258 (+36,075)  |
-| 2025-12-21 | 1,242,675 (+19,675)  | 1,158,909 (+12,651) | 2,401,584 (+32,326)  |
-| 2025-12-22 | 1,262,522 (+19,847)  | 1,169,121 (+10,212) | 2,431,643 (+30,059)  |
-| 2025-12-23 | 1,286,548 (+24,026)  | 1,186,439 (+17,318) | 2,472,987 (+41,344)  |
-| 2025-12-24 | 1,309,323 (+22,775)  | 1,203,767 (+17,328) | 2,513,090 (+40,103)  |
-| 2025-12-25 | 1,333,032 (+23,709)  | 1,217,283 (+13,516) | 2,550,315 (+37,225)  |
-| 2025-12-26 | 1,352,411 (+19,379)  | 1,227,615 (+10,332) | 2,580,026 (+29,711)  |
-| 2025-12-27 | 1,371,771 (+19,360)  | 1,238,236 (+10,621) | 2,610,007 (+29,981)  |
-| 2025-12-28 | 1,390,388 (+18,617)  | 1,245,690 (+7,454)  | 2,636,078 (+26,071)  |
-| 2025-12-29 | 1,415,560 (+25,172)  | 1,257,101 (+11,411) | 2,672,661 (+36,583)  |
-| 2025-12-30 | 1,445,450 (+29,890)  | 1,272,689 (+15,588) | 2,718,139 (+45,478)  |
-| 2025-12-31 | 1,479,598 (+34,148)  | 1,293,235 (+20,546) | 2,772,833 (+54,694)  |
-| 2026-01-01 | 1,508,883 (+29,285)  | 1,309,874 (+16,639) | 2,818,757 (+45,924)  |
-| 2026-01-02 | 1,563,474 (+54,591)  | 1,320,959 (+11,085) | 2,884,433 (+65,676)  |
-| 2026-01-03 | 1,618,065 (+54,591)  | 1,331,914 (+10,955) | 2,949,979 (+65,546)  |
-| 2026-01-04 | 1,672,656 (+39,702)  | 1,339,883 (+7,969)  | 3,012,539 (+62,560)  |
-| 2026-01-05 | 1,738,171 (+65,515)  | 1,353,043 (+13,160) | 3,091,214 (+78,675)  |
-| 2026-01-06 | 1,960,988 (+222,817) | 1,377,377 (+24,334) | 3,338,365 (+247,151) |
-| 2026-01-07 | 2,123,239 (+162,251) | 1,398,648 (+21,271) | 3,521,887 (+183,522) |
-| 2026-01-08 | 2,272,630 (+149,391) | 1,432,480 (+33,832) | 3,705,110 (+183,223) |
-| 2026-01-09 | 2,443,565 (+170,935) | 1,469,451 (+36,971) | 3,913,016 (+207,906) |
-| 2026-01-10 | 2,632,023 (+188,458) | 1,503,670 (+34,219) | 4,135,693 (+222,677) |
-| 2026-01-11 | 2,836,394 (+204,371) | 1,530,479 (+26,809) | 4,366,873 (+231,180) |
-| 2026-01-12 | 3,053,594 (+217,200) | 1,553,671 (+23,192) | 4,607,265 (+240,392) |
-| 2026-01-13 | 3,297,078 (+243,484) | 1,595,062 (+41,391) | 4,892,140 (+284,875) |
-| 2026-01-14 | 3,568,928 (+271,850) | 1,645,362 (+50,300) | 5,214,290 (+322,150) |
+| Date       | GitHub Downloads     | npm Downloads        | Total                |
+| ---------- | -------------------- | -------------------- | -------------------- |
+| 2025-06-29 | 18,789 (+0)          | 39,420 (+0)          | 58,209 (+0)          |
+| 2025-06-30 | 20,127 (+1,338)      | 41,059 (+1,639)      | 61,186 (+2,977)      |
+| 2025-07-01 | 22,108 (+1,981)      | 43,745 (+2,686)      | 65,853 (+4,667)      |
+| 2025-07-02 | 24,814 (+2,706)      | 46,168 (+2,423)      | 70,982 (+5,129)      |
+| 2025-07-03 | 27,834 (+3,020)      | 49,955 (+3,787)      | 77,789 (+6,807)      |
+| 2025-07-04 | 30,608 (+2,774)      | 54,758 (+4,803)      | 85,366 (+7,577)      |
+| 2025-07-05 | 32,524 (+1,916)      | 58,371 (+3,613)      | 90,895 (+5,529)      |
+| 2025-07-06 | 33,766 (+1,242)      | 59,694 (+1,323)      | 93,460 (+2,565)      |
+| 2025-07-08 | 38,052 (+4,286)      | 64,468 (+4,774)      | 102,520 (+9,060)     |
+| 2025-07-09 | 40,924 (+2,872)      | 67,935 (+3,467)      | 108,859 (+6,339)     |
+| 2025-07-10 | 43,796 (+2,872)      | 71,402 (+3,467)      | 115,198 (+6,339)     |
+| 2025-07-11 | 46,982 (+3,186)      | 77,462 (+6,060)      | 124,444 (+9,246)     |
+| 2025-07-12 | 49,302 (+2,320)      | 82,177 (+4,715)      | 131,479 (+7,035)     |
+| 2025-07-13 | 50,803 (+1,501)      | 86,394 (+4,217)      | 137,197 (+5,718)     |
+| 2025-07-14 | 53,283 (+2,480)      | 87,860 (+1,466)      | 141,143 (+3,946)     |
+| 2025-07-15 | 57,590 (+4,307)      | 91,036 (+3,176)      | 148,626 (+7,483)     |
+| 2025-07-16 | 62,313 (+4,723)      | 95,258 (+4,222)      | 157,571 (+8,945)     |
+| 2025-07-17 | 66,684 (+4,371)      | 100,048 (+4,790)     | 166,732 (+9,161)     |
+| 2025-07-18 | 70,379 (+3,695)      | 102,587 (+2,539)     | 172,966 (+6,234)     |
+| 2025-07-19 | 73,497 (+3,117)      | 105,904 (+3,317)     | 179,401 (+6,434)     |
+| 2025-07-20 | 76,453 (+2,956)      | 109,044 (+3,140)     | 185,497 (+6,096)     |
+| 2025-07-21 | 80,197 (+3,744)      | 113,537 (+4,493)     | 193,734 (+8,237)     |
+| 2025-07-22 | 84,251 (+4,054)      | 118,073 (+4,536)     | 202,324 (+8,590)     |
+| 2025-07-23 | 88,589 (+4,338)      | 121,436 (+3,363)     | 210,025 (+7,701)     |
+| 2025-07-24 | 92,469 (+3,880)      | 124,091 (+2,655)     | 216,560 (+6,535)     |
+| 2025-07-25 | 96,417 (+3,948)      | 126,985 (+2,894)     | 223,402 (+6,842)     |
+| 2025-07-26 | 100,646 (+4,229)     | 131,411 (+4,426)     | 232,057 (+8,655)     |
+| 2025-07-27 | 102,644 (+1,998)     | 134,736 (+3,325)     | 237,380 (+5,323)     |
+| 2025-07-28 | 105,446 (+2,802)     | 136,016 (+1,280)     | 241,462 (+4,082)     |
+| 2025-07-29 | 108,998 (+3,552)     | 137,542 (+1,526)     | 246,540 (+5,078)     |
+| 2025-07-30 | 113,544 (+4,546)     | 140,317 (+2,775)     | 253,861 (+7,321)     |
+| 2025-07-31 | 118,339 (+4,795)     | 143,344 (+3,027)     | 261,683 (+7,822)     |
+| 2025-08-01 | 123,539 (+5,200)     | 146,680 (+3,336)     | 270,219 (+8,536)     |
+| 2025-08-02 | 127,864 (+4,325)     | 149,236 (+2,556)     | 277,100 (+6,881)     |
+| 2025-08-03 | 131,397 (+3,533)     | 150,451 (+1,215)     | 281,848 (+4,748)     |
+| 2025-08-04 | 136,266 (+4,869)     | 153,260 (+2,809)     | 289,526 (+7,678)     |
+| 2025-08-05 | 141,596 (+5,330)     | 155,752 (+2,492)     | 297,348 (+7,822)     |
+| 2025-08-06 | 147,067 (+5,471)     | 158,309 (+2,557)     | 305,376 (+8,028)     |
+| 2025-08-07 | 152,591 (+5,524)     | 160,889 (+2,580)     | 313,480 (+8,104)     |
+| 2025-08-08 | 158,187 (+5,596)     | 163,448 (+2,559)     | 321,635 (+8,155)     |
+| 2025-08-09 | 162,770 (+4,583)     | 165,721 (+2,273)     | 328,491 (+6,856)     |
+| 2025-08-10 | 165,695 (+2,925)     | 167,109 (+1,388)     | 332,804 (+4,313)     |
+| 2025-08-11 | 169,297 (+3,602)     | 167,953 (+844)       | 337,250 (+4,446)     |
+| 2025-08-12 | 176,307 (+7,010)     | 171,876 (+3,923)     | 348,183 (+10,933)    |
+| 2025-08-13 | 182,997 (+6,690)     | 177,182 (+5,306)     | 360,179 (+11,996)    |
+| 2025-08-14 | 189,063 (+6,066)     | 179,741 (+2,559)     | 368,804 (+8,625)     |
+| 2025-08-15 | 193,608 (+4,545)     | 181,792 (+2,051)     | 375,400 (+6,596)     |
+| 2025-08-16 | 198,118 (+4,510)     | 184,558 (+2,766)     | 382,676 (+7,276)     |
+| 2025-08-17 | 201,299 (+3,181)     | 186,269 (+1,711)     | 387,568 (+4,892)     |
+| 2025-08-18 | 204,559 (+3,260)     | 187,399 (+1,130)     | 391,958 (+4,390)     |
+| 2025-08-19 | 209,814 (+5,255)     | 189,668 (+2,269)     | 399,482 (+7,524)     |
+| 2025-08-20 | 214,497 (+4,683)     | 191,481 (+1,813)     | 405,978 (+6,496)     |
+| 2025-08-21 | 220,465 (+5,968)     | 194,784 (+3,303)     | 415,249 (+9,271)     |
+| 2025-08-22 | 225,899 (+5,434)     | 197,204 (+2,420)     | 423,103 (+7,854)     |
+| 2025-08-23 | 229,005 (+3,106)     | 199,238 (+2,034)     | 428,243 (+5,140)     |
+| 2025-08-24 | 232,098 (+3,093)     | 201,157 (+1,919)     | 433,255 (+5,012)     |
+| 2025-08-25 | 236,607 (+4,509)     | 202,650 (+1,493)     | 439,257 (+6,002)     |
+| 2025-08-26 | 242,783 (+6,176)     | 205,242 (+2,592)     | 448,025 (+8,768)     |
+| 2025-08-27 | 248,409 (+5,626)     | 205,242 (+0)         | 453,651 (+5,626)     |
+| 2025-08-28 | 252,796 (+4,387)     | 205,242 (+0)         | 458,038 (+4,387)     |
+| 2025-08-29 | 256,045 (+3,249)     | 211,075 (+5,833)     | 467,120 (+9,082)     |
+| 2025-08-30 | 258,863 (+2,818)     | 212,397 (+1,322)     | 471,260 (+4,140)     |
+| 2025-08-31 | 262,004 (+3,141)     | 213,944 (+1,547)     | 475,948 (+4,688)     |
+| 2025-09-01 | 265,359 (+3,355)     | 215,115 (+1,171)     | 480,474 (+4,526)     |
+| 2025-09-02 | 270,483 (+5,124)     | 217,075 (+1,960)     | 487,558 (+7,084)     |
+| 2025-09-03 | 274,793 (+4,310)     | 219,755 (+2,680)     | 494,548 (+6,990)     |
+| 2025-09-04 | 280,430 (+5,637)     | 222,103 (+2,348)     | 502,533 (+7,985)     |
+| 2025-09-05 | 283,769 (+3,339)     | 223,793 (+1,690)     | 507,562 (+5,029)     |
+| 2025-09-06 | 286,245 (+2,476)     | 225,036 (+1,243)     | 511,281 (+3,719)     |
+| 2025-09-07 | 288,623 (+2,378)     | 225,866 (+830)       | 514,489 (+3,208)     |
+| 2025-09-08 | 293,341 (+4,718)     | 227,073 (+1,207)     | 520,414 (+5,925)     |
+| 2025-09-09 | 300,036 (+6,695)     | 229,788 (+2,715)     | 529,824 (+9,410)     |
+| 2025-09-10 | 307,287 (+7,251)     | 233,435 (+3,647)     | 540,722 (+10,898)    |
+| 2025-09-11 | 314,083 (+6,796)     | 237,356 (+3,921)     | 551,439 (+10,717)    |
+| 2025-09-12 | 321,046 (+6,963)     | 240,728 (+3,372)     | 561,774 (+10,335)    |
+| 2025-09-13 | 324,894 (+3,848)     | 245,539 (+4,811)     | 570,433 (+8,659)     |
+| 2025-09-14 | 328,876 (+3,982)     | 248,245 (+2,706)     | 577,121 (+6,688)     |
+| 2025-09-15 | 334,201 (+5,325)     | 250,983 (+2,738)     | 585,184 (+8,063)     |
+| 2025-09-16 | 342,609 (+8,408)     | 255,264 (+4,281)     | 597,873 (+12,689)    |
+| 2025-09-17 | 351,117 (+8,508)     | 260,970 (+5,706)     | 612,087 (+14,214)    |
+| 2025-09-18 | 358,717 (+7,600)     | 266,922 (+5,952)     | 625,639 (+13,552)    |
+| 2025-09-19 | 365,401 (+6,684)     | 271,859 (+4,937)     | 637,260 (+11,621)    |
+| 2025-09-20 | 372,092 (+6,691)     | 276,917 (+5,058)     | 649,009 (+11,749)    |
+| 2025-09-21 | 377,079 (+4,987)     | 280,261 (+3,344)     | 657,340 (+8,331)     |
+| 2025-09-22 | 382,492 (+5,413)     | 284,009 (+3,748)     | 666,501 (+9,161)     |
+| 2025-09-23 | 387,008 (+4,516)     | 289,129 (+5,120)     | 676,137 (+9,636)     |
+| 2025-09-24 | 393,325 (+6,317)     | 294,927 (+5,798)     | 688,252 (+12,115)    |
+| 2025-09-25 | 398,879 (+5,554)     | 301,663 (+6,736)     | 700,542 (+12,290)    |
+| 2025-09-26 | 404,334 (+5,455)     | 306,713 (+5,050)     | 711,047 (+10,505)    |
+| 2025-09-27 | 411,618 (+7,284)     | 317,763 (+11,050)    | 729,381 (+18,334)    |
+| 2025-09-28 | 414,910 (+3,292)     | 322,522 (+4,759)     | 737,432 (+8,051)     |
+| 2025-09-29 | 419,919 (+5,009)     | 328,033 (+5,511)     | 747,952 (+10,520)    |
+| 2025-09-30 | 427,991 (+8,072)     | 336,472 (+8,439)     | 764,463 (+16,511)    |
+| 2025-10-01 | 433,591 (+5,600)     | 341,742 (+5,270)     | 775,333 (+10,870)    |
+| 2025-10-02 | 440,852 (+7,261)     | 348,099 (+6,357)     | 788,951 (+13,618)    |
+| 2025-10-03 | 446,829 (+5,977)     | 359,937 (+11,838)    | 806,766 (+17,815)    |
+| 2025-10-04 | 452,561 (+5,732)     | 370,386 (+10,449)    | 822,947 (+16,181)    |
+| 2025-10-05 | 455,559 (+2,998)     | 374,745 (+4,359)     | 830,304 (+7,357)     |
+| 2025-10-06 | 460,927 (+5,368)     | 379,489 (+4,744)     | 840,416 (+10,112)    |
+| 2025-10-07 | 467,336 (+6,409)     | 385,438 (+5,949)     | 852,774 (+12,358)    |
+| 2025-10-08 | 474,643 (+7,307)     | 394,139 (+8,701)     | 868,782 (+16,008)    |
+| 2025-10-09 | 479,203 (+4,560)     | 400,526 (+6,387)     | 879,729 (+10,947)    |
+| 2025-10-10 | 484,374 (+5,171)     | 406,015 (+5,489)     | 890,389 (+10,660)    |
+| 2025-10-11 | 488,427 (+4,053)     | 414,699 (+8,684)     | 903,126 (+12,737)    |
+| 2025-10-12 | 492,125 (+3,698)     | 418,745 (+4,046)     | 910,870 (+7,744)     |
+| 2025-10-14 | 505,130 (+13,005)    | 429,286 (+10,541)    | 934,416 (+23,546)    |
+| 2025-10-15 | 512,717 (+7,587)     | 439,290 (+10,004)    | 952,007 (+17,591)    |
+| 2025-10-16 | 517,719 (+5,002)     | 447,137 (+7,847)     | 964,856 (+12,849)    |
+| 2025-10-17 | 526,239 (+8,520)     | 457,467 (+10,330)    | 983,706 (+18,850)    |
+| 2025-10-18 | 531,564 (+5,325)     | 465,272 (+7,805)     | 996,836 (+13,130)    |
+| 2025-10-19 | 536,209 (+4,645)     | 469,078 (+3,806)     | 1,005,287 (+8,451)   |
+| 2025-10-20 | 541,264 (+5,055)     | 472,952 (+3,874)     | 1,014,216 (+8,929)   |
+| 2025-10-21 | 548,721 (+7,457)     | 479,703 (+6,751)     | 1,028,424 (+14,208)  |
+| 2025-10-22 | 557,949 (+9,228)     | 491,395 (+11,692)    | 1,049,344 (+20,920)  |
+| 2025-10-23 | 564,716 (+6,767)     | 498,736 (+7,341)     | 1,063,452 (+14,108)  |
+| 2025-10-24 | 572,692 (+7,976)     | 506,905 (+8,169)     | 1,079,597 (+16,145)  |
+| 2025-10-25 | 578,927 (+6,235)     | 516,129 (+9,224)     | 1,095,056 (+15,459)  |
+| 2025-10-26 | 584,409 (+5,482)     | 521,179 (+5,050)     | 1,105,588 (+10,532)  |
+| 2025-10-27 | 589,999 (+5,590)     | 526,001 (+4,822)     | 1,116,000 (+10,412)  |
+| 2025-10-28 | 595,776 (+5,777)     | 532,438 (+6,437)     | 1,128,214 (+12,214)  |
+| 2025-10-29 | 606,259 (+10,483)    | 542,064 (+9,626)     | 1,148,323 (+20,109)  |
+| 2025-10-30 | 613,746 (+7,487)     | 542,064 (+0)         | 1,155,810 (+7,487)   |
+| 2025-10-30 | 617,846 (+4,100)     | 555,026 (+12,962)    | 1,172,872 (+17,062)  |
+| 2025-10-31 | 626,612 (+8,766)     | 564,579 (+9,553)     | 1,191,191 (+18,319)  |
+| 2025-11-01 | 636,100 (+9,488)     | 581,806 (+17,227)    | 1,217,906 (+26,715)  |
+| 2025-11-02 | 644,067 (+7,967)     | 590,004 (+8,198)     | 1,234,071 (+16,165)  |
+| 2025-11-03 | 653,130 (+9,063)     | 597,139 (+7,135)     | 1,250,269 (+16,198)  |
+| 2025-11-04 | 663,912 (+10,782)    | 608,056 (+10,917)    | 1,271,968 (+21,699)  |
+| 2025-11-05 | 675,074 (+11,162)    | 619,690 (+11,634)    | 1,294,764 (+22,796)  |
+| 2025-11-06 | 686,252 (+11,178)    | 630,885 (+11,195)    | 1,317,137 (+22,373)  |
+| 2025-11-07 | 696,646 (+10,394)    | 642,146 (+11,261)    | 1,338,792 (+21,655)  |
+| 2025-11-08 | 706,035 (+9,389)     | 653,489 (+11,343)    | 1,359,524 (+20,732)  |
+| 2025-11-09 | 713,462 (+7,427)     | 660,459 (+6,970)     | 1,373,921 (+14,397)  |
+| 2025-11-10 | 722,288 (+8,826)     | 668,225 (+7,766)     | 1,390,513 (+16,592)  |
+| 2025-11-11 | 729,769 (+7,481)     | 677,501 (+9,276)     | 1,407,270 (+16,757)  |
+| 2025-11-12 | 740,180 (+10,411)    | 686,454 (+8,953)     | 1,426,634 (+19,364)  |
+| 2025-11-13 | 749,905 (+9,725)     | 696,157 (+9,703)     | 1,446,062 (+19,428)  |
+| 2025-11-14 | 759,928 (+10,023)    | 705,237 (+9,080)     | 1,465,165 (+19,103)  |
+| 2025-11-15 | 765,955 (+6,027)     | 712,870 (+7,633)     | 1,478,825 (+13,660)  |
+| 2025-11-16 | 771,069 (+5,114)     | 716,596 (+3,726)     | 1,487,665 (+8,840)   |
+| 2025-11-17 | 780,161 (+9,092)     | 723,339 (+6,743)     | 1,503,500 (+15,835)  |
+| 2025-11-18 | 791,563 (+11,402)    | 732,544 (+9,205)     | 1,524,107 (+20,607)  |
+| 2025-11-19 | 804,409 (+12,846)    | 747,624 (+15,080)    | 1,552,033 (+27,926)  |
+| 2025-11-20 | 814,620 (+10,211)    | 757,907 (+10,283)    | 1,572,527 (+20,494)  |
+| 2025-11-21 | 826,309 (+11,689)    | 769,307 (+11,400)    | 1,595,616 (+23,089)  |
+| 2025-11-22 | 837,269 (+10,960)    | 780,996 (+11,689)    | 1,618,265 (+22,649)  |
+| 2025-11-23 | 846,609 (+9,340)     | 795,069 (+14,073)    | 1,641,678 (+23,413)  |
+| 2025-11-24 | 856,733 (+10,124)    | 804,033 (+8,964)     | 1,660,766 (+19,088)  |
+| 2025-11-25 | 869,423 (+12,690)    | 817,339 (+13,306)    | 1,686,762 (+25,996)  |
+| 2025-11-26 | 881,414 (+11,991)    | 832,518 (+15,179)    | 1,713,932 (+27,170)  |
+| 2025-11-27 | 893,960 (+12,546)    | 846,180 (+13,662)    | 1,740,140 (+26,208)  |
+| 2025-11-28 | 901,741 (+7,781)     | 856,482 (+10,302)    | 1,758,223 (+18,083)  |
+| 2025-11-29 | 908,689 (+6,948)     | 863,361 (+6,879)     | 1,772,050 (+13,827)  |
+| 2025-11-30 | 916,116 (+7,427)     | 870,194 (+6,833)     | 1,786,310 (+14,260)  |
+| 2025-12-01 | 925,898 (+9,782)     | 876,500 (+6,306)     | 1,802,398 (+16,088)  |
+| 2025-12-02 | 939,250 (+13,352)    | 890,919 (+14,419)    | 1,830,169 (+27,771)  |
+| 2025-12-03 | 952,249 (+12,999)    | 903,713 (+12,794)    | 1,855,962 (+25,793)  |
+| 2025-12-04 | 965,611 (+13,362)    | 916,471 (+12,758)    | 1,882,082 (+26,120)  |
+| 2025-12-05 | 977,996 (+12,385)    | 930,616 (+14,145)    | 1,908,612 (+26,530)  |
+| 2025-12-06 | 987,884 (+9,888)     | 943,773 (+13,157)    | 1,931,657 (+23,045)  |
+| 2025-12-07 | 994,046 (+6,162)     | 951,425 (+7,652)     | 1,945,471 (+13,814)  |
+| 2025-12-08 | 1,000,898 (+6,852)   | 957,149 (+5,724)     | 1,958,047 (+12,576)  |
+| 2025-12-09 | 1,011,488 (+10,590)  | 973,922 (+16,773)    | 1,985,410 (+27,363)  |
+| 2025-12-10 | 1,025,891 (+14,403)  | 991,708 (+17,786)    | 2,017,599 (+32,189)  |
+| 2025-12-11 | 1,045,110 (+19,219)  | 1,010,559 (+18,851)  | 2,055,669 (+38,070)  |
+| 2025-12-12 | 1,061,340 (+16,230)  | 1,030,838 (+20,279)  | 2,092,178 (+36,509)  |
+| 2025-12-13 | 1,073,561 (+12,221)  | 1,044,608 (+13,770)  | 2,118,169 (+25,991)  |
+| 2025-12-14 | 1,082,042 (+8,481)   | 1,052,425 (+7,817)   | 2,134,467 (+16,298)  |
+| 2025-12-15 | 1,093,632 (+11,590)  | 1,059,078 (+6,653)   | 2,152,710 (+18,243)  |
+| 2025-12-16 | 1,120,477 (+26,845)  | 1,078,022 (+18,944)  | 2,198,499 (+45,789)  |
+| 2025-12-17 | 1,151,067 (+30,590)  | 1,097,661 (+19,639)  | 2,248,728 (+50,229)  |
+| 2025-12-18 | 1,178,658 (+27,591)  | 1,113,418 (+15,757)  | 2,292,076 (+43,348)  |
+| 2025-12-19 | 1,203,485 (+24,827)  | 1,129,698 (+16,280)  | 2,333,183 (+41,107)  |
+| 2025-12-20 | 1,223,000 (+19,515)  | 1,146,258 (+16,560)  | 2,369,258 (+36,075)  |
+| 2025-12-21 | 1,242,675 (+19,675)  | 1,158,909 (+12,651)  | 2,401,584 (+32,326)  |
+| 2025-12-22 | 1,262,522 (+19,847)  | 1,169,121 (+10,212)  | 2,431,643 (+30,059)  |
+| 2025-12-23 | 1,286,548 (+24,026)  | 1,186,439 (+17,318)  | 2,472,987 (+41,344)  |
+| 2025-12-24 | 1,309,323 (+22,775)  | 1,203,767 (+17,328)  | 2,513,090 (+40,103)  |
+| 2025-12-25 | 1,333,032 (+23,709)  | 1,217,283 (+13,516)  | 2,550,315 (+37,225)  |
+| 2025-12-26 | 1,352,411 (+19,379)  | 1,227,615 (+10,332)  | 2,580,026 (+29,711)  |
+| 2025-12-27 | 1,371,771 (+19,360)  | 1,238,236 (+10,621)  | 2,610,007 (+29,981)  |
+| 2025-12-28 | 1,390,388 (+18,617)  | 1,245,690 (+7,454)   | 2,636,078 (+26,071)  |
+| 2025-12-29 | 1,415,560 (+25,172)  | 1,257,101 (+11,411)  | 2,672,661 (+36,583)  |
+| 2025-12-30 | 1,445,450 (+29,890)  | 1,272,689 (+15,588)  | 2,718,139 (+45,478)  |
+| 2025-12-31 | 1,479,598 (+34,148)  | 1,293,235 (+20,546)  | 2,772,833 (+54,694)  |
+| 2026-01-01 | 1,508,883 (+29,285)  | 1,309,874 (+16,639)  | 2,818,757 (+45,924)  |
+| 2026-01-02 | 1,563,474 (+54,591)  | 1,320,959 (+11,085)  | 2,884,433 (+65,676)  |
+| 2026-01-03 | 1,618,065 (+54,591)  | 1,331,914 (+10,955)  | 2,949,979 (+65,546)  |
+| 2026-01-04 | 1,672,656 (+39,702)  | 1,339,883 (+7,969)   | 3,012,539 (+62,560)  |
+| 2026-01-05 | 1,738,171 (+65,515)  | 1,353,043 (+13,160)  | 3,091,214 (+78,675)  |
+| 2026-01-06 | 1,960,988 (+222,817) | 1,377,377 (+24,334)  | 3,338,365 (+247,151) |
+| 2026-01-07 | 2,123,239 (+162,251) | 1,398,648 (+21,271)  | 3,521,887 (+183,522) |
+| 2026-01-08 | 2,272,630 (+149,391) | 1,432,480 (+33,832)  | 3,705,110 (+183,223) |
+| 2026-01-09 | 2,443,565 (+170,935) | 1,469,451 (+36,971)  | 3,913,016 (+207,906) |
+| 2026-01-10 | 2,632,023 (+188,458) | 1,503,670 (+34,219)  | 4,135,693 (+222,677) |
+| 2026-01-11 | 2,836,394 (+204,371) | 1,530,479 (+26,809)  | 4,366,873 (+231,180) |
+| 2026-01-12 | 3,053,594 (+217,200) | 1,553,671 (+23,192)  | 4,607,265 (+240,392) |
+| 2026-01-13 | 3,297,078 (+243,484) | 1,595,062 (+41,391)  | 4,892,140 (+284,875) |
+| 2026-01-14 | 3,568,928 (+271,850) | 1,645,362 (+50,300)  | 5,214,290 (+322,150) |
+| 2026-01-16 | 4,121,550 (+552,622) | 1,754,418 (+109,056) | 5,875,968 (+661,678) |
+| 2026-01-17 | 4,389,558 (+268,008) | 1,805,315 (+50,897)  | 6,194,873 (+318,905) |
+| 2026-01-18 | 4,627,623 (+238,065) | 1,839,171 (+33,856)  | 6,466,794 (+271,921) |
+| 2026-01-19 | 4,861,108 (+233,485) | 1,863,112 (+23,941)  | 6,724,220 (+257,426) |
+| 2026-01-20 | 5,128,999 (+267,891) | 1,903,665 (+40,553)  | 7,032,664 (+308,444) |

bun.lock

@@ -22,7 +22,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -56,6 +56,7 @@
       },
       "devDependencies": {
         "@happy-dom/global-registrator": "20.0.11",
+        "@playwright/test": "1.57.0",
         "@tailwindcss/vite": "catalog:",
         "@tsconfig/bun": "1.0.9",
         "@types/bun": "catalog:",
@@ -70,7 +71,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -81,6 +82,8 @@
         "@opencode-ai/console-mail": "workspace:*",
         "@opencode-ai/console-resource": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
+        "@smithy/eventstream-codec": "4.2.7",
+        "@smithy/util-utf8": "4.2.0",
         "@solidjs/meta": "catalog:",
         "@solidjs/router": "catalog:",
         "@solidjs/start": "catalog:",
@@ -102,7 +105,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -129,7 +132,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -153,7 +156,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -177,7 +180,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
@@ -206,7 +209,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -235,7 +238,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -251,7 +254,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -279,7 +282,7 @@
         "@ai-sdk/vercel": "1.0.31",
         "@ai-sdk/xai": "2.0.51",
         "@clack/prompts": "1.0.0-alpha.1",
-        "@gitlab/gitlab-ai-provider": "3.1.1",
+        "@gitlab/gitlab-ai-provider": "3.1.2",
         "@hono/standard-validator": "0.1.5",
         "@hono/zod-validator": "catalog:",
         "@modelcontextprotocol/sdk": "1.25.2",
@@ -291,8 +294,8 @@
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@openrouter/ai-sdk-provider": "1.5.2",
-        "@opentui/core": "0.1.73",
-        "@opentui/solid": "0.1.73",
+        "@opentui/core": "0.1.74",
+        "@opentui/solid": "0.1.74",
         "@parcel/watcher": "2.5.1",
         "@pierre/diffs": "catalog:",
         "@solid-primitives/event-bus": "1.1.2",
@@ -355,7 +358,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -375,9 +378,9 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "devDependencies": {
-        "@hey-api/openapi-ts": "0.88.1",
+        "@hey-api/openapi-ts": "0.90.4",
         "@tsconfig/node22": "catalog:",
         "@types/node": "catalog:",
         "@typescript/native-preview": "catalog:",
@@ -386,7 +389,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -399,7 +402,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -422,6 +425,7 @@
         "shiki": "catalog:",
         "solid-js": "catalog:",
         "solid-list": "catalog:",
+        "strip-ansi": "7.1.2",
         "virtua": "catalog:",
       },
       "devDependencies": {
@@ -439,7 +443,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -450,7 +454,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.1.21",
+      "version": "1.1.27",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -499,6 +503,7 @@
     "@octokit/rest": "22.0.0",
     "@openauthjs/openauth": "0.0.0-20250322224806",
     "@pierre/diffs": "1.0.2",
+    "@playwright/test": "1.51.0",
     "@solid-primitives/storage": "4.3.3",
     "@solidjs/meta": "0.29.4",
     "@solidjs/router": "0.15.4",
@@ -914,17 +919,17 @@
 
     "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
-    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.1.1", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-7AtFrCflq2NzC99bj7YaqbQDCZyaScM1+L4ujllV5syiRTFE239Uhnd/yEkPXa7sUAnNRfN3CWusCkQ2zK/q9g=="],
+    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.1.2", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-p0NZhZJSavWDX9r/Px/mOK2YIC803GZa8iRzcg3f1C6S0qfea/HBTe4/NWvT2+2kWIwhCePGuI4FN2UFiUWXUg=="],
 
     "@graphql-typed-document-node/core": ["@graphql-typed-document-node/core@3.2.0", "", { "peerDependencies": { "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ=="],
 
     "@happy-dom/global-registrator": ["@happy-dom/global-registrator@20.0.11", "", { "dependencies": { "@types/node": "^20.0.0", "happy-dom": "^20.0.11" } }, "sha512-GqNqiShBT/lzkHTMC/slKBrvN0DsD4Di8ssBk4aDaVgEn+2WMzE6DXxq701ndSXj7/0cJ8mNT71pM7Bnrr6JRw=="],
 
-    "@hey-api/codegen-core": ["@hey-api/codegen-core@0.3.3", "", { "peerDependencies": { "typescript": ">=5.5.3" } }, "sha512-vArVDtrvdzFewu1hnjUm4jX1NBITlSCeO81EdWq676MxQbyxsGcDPAgohaSA+Wvr4HjPSvsg2/1s2zYxUtXebg=="],
+    "@hey-api/codegen-core": ["@hey-api/codegen-core@0.5.2", "", { "dependencies": { "ansi-colors": "4.1.3", "color-support": "1.1.3" }, "peerDependencies": { "typescript": ">=5.5.3" } }, "sha512-88cqrrB2cLXN8nMOHidQTcVOnZsJ5kebEbBefjMCifaUCwTA30ouSSWvTZqrOX4O104zjJyu7M8Gcv/NNYQuaA=="],
 
     "@hey-api/json-schema-ref-parser": ["@hey-api/json-schema-ref-parser@1.2.2", "", { "dependencies": { "@jsdevtools/ono": "^7.1.3", "@types/json-schema": "^7.0.15", "js-yaml": "^4.1.1", "lodash": "^4.17.21" } }, "sha512-oS+5yAdwnK20lSeFO1d53Ku+yaGCsY8PcrmSq2GtSs3bsBfRnHAbpPKSVzQcaxAOrzj5NB+f34WhZglVrNayBA=="],
 
-    "@hey-api/openapi-ts": ["@hey-api/openapi-ts@0.88.1", "", { "dependencies": { "@hey-api/codegen-core": "^0.3.3", "@hey-api/json-schema-ref-parser": "1.2.2", "ansi-colors": "4.1.3", "c12": "3.3.2", "color-support": "1.1.3", "commander": "14.0.2", "open": "11.0.0", "semver": "7.7.2" }, "peerDependencies": { "typescript": ">=5.5.3" }, "bin": { "openapi-ts": "bin/run.js" } }, "sha512-x/nDTupOnV9VuSeNIiJpgIpc915GHduhyseJeMTnI0JMsXaObmpa0rgPr3ASVEYMLgpvqozIEG1RTOOnal6zLQ=="],
+    "@hey-api/openapi-ts": ["@hey-api/openapi-ts@0.90.4", "", { "dependencies": { "@hey-api/codegen-core": "^0.5.2", "@hey-api/json-schema-ref-parser": "1.2.2", "ansi-colors": "4.1.3", "c12": "3.3.3", "color-support": "1.1.3", "commander": "14.0.2", "open": "11.0.0", "semver": "7.7.3" }, "peerDependencies": { "typescript": ">=5.5.3" }, "bin": { "openapi-ts": "bin/run.js" } }, "sha512-9l++kjcb0ui4JqPlueZ6OZ9zKn6eK/8//Z2jHcIXb5MRwDRgubOOSpTU5llEv3uvWfT10VzcMp99dySWq0AASw=="],
 
     "@hono/node-server": ["@hono/node-server@1.19.7", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vUcD0uauS7EU2caukW8z5lJKtoGMokxNbJtBiwHgpqxEXokaHCBkQUmCHhjFB1VUTWdqj25QoMkMKzgjq+uhrw=="],
 
@@ -1216,21 +1221,21 @@
 
     "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
-    "@opentui/core": ["@opentui/core@0.1.73", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.73", "@opentui/core-darwin-x64": "0.1.73", "@opentui/core-linux-arm64": "0.1.73", "@opentui/core-linux-x64": "0.1.73", "@opentui/core-win32-arm64": "0.1.73", "@opentui/core-win32-x64": "0.1.73", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-1OqLlArzUh3QjrYXGro5WKNgoCcacGJaaFvwOHg5lAOoSigFQRiqEUEEJLbSo3pyV8u7XEdC3M0rOP6K+oThzw=="],
+    "@opentui/core": ["@opentui/core@0.1.74", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.74", "@opentui/core-darwin-x64": "0.1.74", "@opentui/core-linux-arm64": "0.1.74", "@opentui/core-linux-x64": "0.1.74", "@opentui/core-win32-arm64": "0.1.74", "@opentui/core-win32-x64": "0.1.74", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-g4W16ymv12JdgZ+9B4t7mpIICvzWy2+eHERfmDf80ALduOQCUedKQdULcBFhVCYUXIkDRtIy6CID5thMAah3FA=="],
 
-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.73", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Xnc8S6kGIVcdwqqTq6jk50UVe1QtOXp+B0v4iH85iNW1Ljf198OoA7RcVA+edFb6o01PVwnhIIPtpkB/A4710w=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.74", "", { "os": "darwin", "cpu": "arm64" }, "sha512-rfmlDLtm/u17CnuhJgCxPeYMvOST+A2MOdVOk46IurtHO849bdYqK6iudKNlFRs1FOrymgSKF9GlWBHAOKeRjg=="],
 
-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.73", "", { "os": "darwin", "cpu": "x64" }, "sha512-RlgxQxu+kxsCZzeXRnpYrqbrpxbG8M/lnDf4sTPWmhXUiuDvY5BdB4YiBY5bv8eNdJ1j9HiMLtx6ZxElEviidA=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.74", "", { "os": "darwin", "cpu": "x64" }, "sha512-WAD8orsDV0ZdW/5GwjOOB4FY96772xbkz+rcV7WRzEFUVaqoBaC04IuqYzS9d5s+cjkbT5Cpj47hrVYkkVQKng=="],
 
-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.73", "", { "os": "linux", "cpu": "arm64" }, "sha512-9I88BdZMB3qtDPtDzFTg1EEt6sAGFSpOEmIIMB3MhqZqoq9+WSEyJZxM0/kff5vt4RJnqG7vz4fKMVRwNrUPGA=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.74", "", { "os": "linux", "cpu": "arm64" }, "sha512-lgmHzrzLy4e+rgBS+lhtsMLLgIMLbtLNMm6EzVPyYVDlLDGjM7+ulXMem7AtpaRrWrUUl4REiG9BoQUsCFDwYA=="],
 
-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.73", "", { "os": "linux", "cpu": "x64" }, "sha512-50cGZkCh/i3nzijsjUnkmtWJtnJ6l9WpdIwSJsO2Id7nZdzupT1b6AkgGZdOgNl23MHXpAitmb+MhEAjAimCRA=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.74", "", { "os": "linux", "cpu": "x64" }, "sha512-8Mn2WbdBQ29xCThuPZezjDhd1N3+fXwKkGvCBOdTI0le6h2A/vCNbfUVjwfr/EGZSRXxCG+Yapol34BAULGpOA=="],
 
-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.73", "", { "os": "win32", "cpu": "arm64" }, "sha512-mFiEeoiim5cmi6qu8CDfeecl9ivuMilfby/GnqTsr9G8e52qfT6nWF2m9Nevh9ebhXK+D/VnVhJIbObc0WIchA=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.74", "", { "os": "win32", "cpu": "arm64" }, "sha512-dvYUXz03avnI6ZluyLp00HPmR0UT/IE/6QS97XBsgJlUTtpnbKkBtB5jD1NHwWkElaRj1Qv2QP36ngFoJqbl9g=="],
 
-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.73", "", { "os": "win32", "cpu": "x64" }, "sha512-vzWHUi2vgwImuyxl+hlmK0aeCbnwozeuicIcHJE0orPOwp2PAKyR9WO330szAvfIO5ZPbNkjWfh6xIYnASM0lQ=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.74", "", { "os": "win32", "cpu": "x64" }, "sha512-3wfWXaAKOIlDQz6ZZIESf2M+YGZ7uFHijjTEM8w/STRlLw8Y6+QyGYi1myHSM4d6RSO+/s2EMDxvjDf899W9vQ=="],
 
-    "@opentui/solid": ["@opentui/solid@0.1.73", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.73", "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-FBSTiuWl+hHqFxmrJfC93cbJ0PJ4QoFbvRFuD6Gzrea5rH+G7BidjyI8YZuCcNnriDuIYaXTJdvBqe15lgKR1A=="],
+    "@opentui/solid": ["@opentui/solid@0.1.74", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.74", "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-Vz82cI8T9YeJjGsVg4ULp6ral4N+xyt1j9A6Tbu3aaQgEKiB74LW03EXREehfjPr1irOFxtKfWPbx5NKH0Upag=="],
 
     "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],
 
@@ -1352,6 +1357,8 @@
 
     "@planetscale/database": ["@planetscale/database@1.19.0", "", {}, "sha512-Tv4jcFUFAFjOWrGSio49H6R2ijALv0ZzVBfJKIdm+kl9X046Fh4LLawrF9OMsglVbK6ukqMJsUCeucGAFTBcMA=="],
 
+    "@playwright/test": ["@playwright/test@1.57.0", "", { "dependencies": { "playwright": "1.57.0" }, "bin": { "playwright": "cli.js" } }, "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA=="],
+
     "@poppinss/colors": ["@poppinss/colors@4.1.5", "", { "dependencies": { "kleur": "^4.1.5" } }, "sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw=="],
 
     "@poppinss/dumper": ["@poppinss/dumper@0.6.5", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@sindresorhus/is": "^7.0.2", "supports-color": "^10.0.0" } }, "sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw=="],
@@ -1522,7 +1529,7 @@
 
     "@smithy/credential-provider-imds": ["@smithy/credential-provider-imds@4.2.5", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.5", "@smithy/property-provider": "^4.2.5", "@smithy/types": "^4.9.0", "@smithy/url-parser": "^4.2.5", "tslib": "^2.6.2" } }, "sha512-BZwotjoZWn9+36nimwm/OLIcVe+KYRwzMjfhd4QT7QxPm9WY0HiOV8t/Wlh+HVUif0SBVV7ksq8//hPaBC/okQ=="],
 
-    "@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.5", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.9.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Ogt4Zi9hEbIP17oQMd68qYOHUzmH47UkK7q7Gl55iIm9oKt27MUGrC5JfpMroeHjdkOliOA4Qt3NQ1xMq/nrlA=="],
+    "@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.7", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.11.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-DrpkEoM3j9cBBWhufqBwnbbn+3nf1N9FP6xuVJ+e220jbactKuQgaZwjwP5CP1t+O94brm2JgVMD2atMGX3xIQ=="],
 
     "@smithy/eventstream-serde-browser": ["@smithy/eventstream-serde-browser@4.2.5", "", { "dependencies": { "@smithy/eventstream-serde-universal": "^4.2.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-HohfmCQZjppVnKX2PnXlf47CW3j92Ki6T/vkAT2DhBR47e89pen3s4fIa7otGTtrVxmj7q+IhH0RnC5kpR8wtw=="],
 
@@ -2092,7 +2099,7 @@
 
     "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
 
-    "c12": ["c12@3.3.2", "", { "dependencies": { "chokidar": "^4.0.3", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^17.2.3", "exsolve": "^1.0.8", "giget": "^2.0.0", "jiti": "^2.6.1", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^2.0.0", "pkg-types": "^2.3.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "*" }, "optionalPeers": ["magicast"] }, "sha512-QkikB2X5voO1okL3QsES0N690Sn/K9WokXqUsDQsWy5SnYb+psYQFGA10iy1bZHj3fjISKsI67Q90gruvWWM3A=="],
+    "c12": ["c12@3.3.3", "", { "dependencies": { "chokidar": "^5.0.0", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^17.2.3", "exsolve": "^1.0.8", "giget": "^2.0.0", "jiti": "^2.6.1", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^2.0.0", "pkg-types": "^2.3.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "*" }, "optionalPeers": ["magicast"] }, "sha512-750hTRvgBy5kcMNPdh95Qo+XUBeGo8C7nsKSmedDmaQI+E0r82DwHeM6vBewDe4rGFbnxoa4V9pw+sPh5+Iz8Q=="],
 
     "call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
 
@@ -3288,6 +3295,10 @@
 
     "planck": ["planck@1.4.2", "", { "peerDependencies": { "stage-js": "^1.0.0-alpha.12" } }, "sha512-mNbhnV3g8X2rwGxzcesjmN8BDA6qfXgQxXVMkWau9MCRlQY0RLNEkyHlVp6yFy/X6qrzAXyNONCnZ1cGDLrNew=="],
 
+    "playwright": ["playwright@1.57.0", "", { "dependencies": { "playwright-core": "1.57.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw=="],
+
+    "playwright-core": ["playwright-core@1.57.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ=="],
+
     "pngjs": ["pngjs@7.0.0", "", {}, "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="],
 
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
@@ -3492,7 +3503,7 @@
 
     "selderee": ["selderee@0.11.0", "", { "dependencies": { "parseley": "^0.12.0" } }, "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA=="],
 
-    "semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+    "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
     "send": ["send@0.19.0", "", { "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "encodeurl": "~1.0.2", "escape-html": "~1.0.3", "etag": "~1.8.1", "fresh": "0.5.2", "http-errors": "2.0.0", "mime": "1.6.0", "ms": "2.1.3", "on-finished": "2.4.1", "range-parser": "~1.2.1", "statuses": "2.0.1" } }, "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw=="],
 
@@ -3966,6 +3977,8 @@
 
     "@ai-sdk/amazon-bedrock/@ai-sdk/anthropic": ["@ai-sdk/anthropic@2.0.57", "", { "dependencies": { "@ai-sdk/provider": "2.0.1", "@ai-sdk/provider-utils": "3.0.20" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-DREpYqW2pylgaj69gZ+K8u92bo9DaMgFdictYnY+IwYeY3bawQ4zI7l/o1VkDsBDljAx8iYz5lPURwVZNu+Xpg=="],
 
+    "@ai-sdk/amazon-bedrock/@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.5", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.9.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Ogt4Zi9hEbIP17oQMd68qYOHUzmH47UkK7q7Gl55iIm9oKt27MUGrC5JfpMroeHjdkOliOA4Qt3NQ1xMq/nrlA=="],
+
     "@ai-sdk/anthropic/@ai-sdk/provider": ["@ai-sdk/provider@2.0.0", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA=="],
 
     "@ai-sdk/anthropic/@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@3.0.0", "", { "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-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw=="],
@@ -4236,6 +4249,10 @@
 
     "@slack/web-api/p-queue": ["p-queue@6.6.2", "", { "dependencies": { "eventemitter3": "^4.0.4", "p-timeout": "^3.2.0" } }, "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ=="],
 
+    "@smithy/eventstream-codec/@smithy/types": ["@smithy/types@4.11.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-mlrmL0DRDVe3mNrjTcVcZEgkFmufITfUAPBEA+AHYiIeYyJebso/He1qLbP3PssRe22KUzLRpQSdBPbXdgZ2VA=="],
+
+    "@smithy/eventstream-serde-universal/@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.5", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.9.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Ogt4Zi9hEbIP17oQMd68qYOHUzmH47UkK7q7Gl55iIm9oKt27MUGrC5JfpMroeHjdkOliOA4Qt3NQ1xMq/nrlA=="],
+
     "@solidjs/start/esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
 
     "@solidjs/start/path-to-regexp": ["path-to-regexp@8.3.0", "", {}, "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA=="],
@@ -4272,6 +4289,8 @@
 
     "astro/diff": ["diff@5.2.0", "", {}, "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A=="],
 
+    "astro/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "astro/shiki": ["shiki@3.15.0", "", { "dependencies": { "@shikijs/core": "3.15.0", "@shikijs/engine-javascript": "3.15.0", "@shikijs/engine-oniguruma": "3.15.0", "@shikijs/langs": "3.15.0", "@shikijs/themes": "3.15.0", "@shikijs/types": "3.15.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-kLdkY6iV3dYbtPwS9KXU7mjfmDm25f5m0IPNFnaXO7TBPcvbUOY72PYXSuSqDzwp+vlH/d7MXpHlKO/x+QoLXw=="],
 
     "astro/unstorage": ["unstorage@1.17.3", "", { "dependencies": { "anymatch": "^3.1.3", "chokidar": "^4.0.3", "destr": "^2.0.5", "h3": "^1.15.4", "lru-cache": "^10.4.3", "node-fetch-native": "^1.6.7", "ofetch": "^1.5.1", "ufo": "^1.6.1" }, "peerDependencies": { "@azure/app-configuration": "^1.8.0", "@azure/cosmos": "^4.2.0", "@azure/data-tables": "^13.3.0", "@azure/identity": "^4.6.0", "@azure/keyvault-secrets": "^4.9.0", "@azure/storage-blob": "^12.26.0", "@capacitor/preferences": "^6.0.3 || ^7.0.0", "@deno/kv": ">=0.9.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.34.3", "@vercel/blob": ">=0.27.1", "@vercel/functions": "^2.2.12 || ^3.0.0", "@vercel/kv": "^1.0.1", "aws4fetch": "^1.0.20", "db0": ">=0.2.1", "idb-keyval": "^6.2.1", "ioredis": "^5.4.2", "uploadthing": "^7.4.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/functions", "@vercel/kv", "aws4fetch", "db0", "idb-keyval", "ioredis", "uploadthing"] }, "sha512-i+JYyy0DoKmQ3FximTHbGadmIYb8JEpq7lxUjnjeB702bCPum0vzo6oy5Mfu0lpqISw7hCyMW2yj4nWC8bqJ3Q=="],
@@ -4294,6 +4313,8 @@
 
     "bun-webgpu/@webgpu/types": ["@webgpu/types@0.1.66", "", {}, "sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA=="],
 
+    "c12/chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
+
     "clean-css/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "compress-commons/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
@@ -4310,6 +4331,8 @@
 
     "editorconfig/minimatch": ["minimatch@9.0.1", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w=="],
 
+    "editorconfig/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "engine.io-client/ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="],
 
     "es-get-iterator/isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
@@ -4336,6 +4359,8 @@
 
     "gaxios/node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
 
+    "gel/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "glob/minimatch": ["minimatch@10.1.1", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ=="],
 
     "globby/ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
@@ -4350,6 +4375,8 @@
 
     "jsonwebtoken/jws": ["jws@3.2.2", "", { "dependencies": { "jwa": "^1.4.1", "safe-buffer": "^5.0.1" } }, "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA=="],
 
+    "jsonwebtoken/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "lazystream/readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
@@ -4408,6 +4435,8 @@
 
     "pkg-up/find-up": ["find-up@3.0.0", "", { "dependencies": { "locate-path": "^3.0.0" } }, "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg=="],
 
+    "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
     "postcss-load-config/lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
 
     "prompts/kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],
@@ -4434,6 +4463,8 @@
 
     "sharp/detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
+    "sharp/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "shiki/@shikijs/core": ["@shikijs/core@3.20.0", "", { "dependencies": { "@shikijs/types": "3.20.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-f2ED7HYV4JEk827mtMDwe/yQ25pRiXZmtHjWF8uzZKuKiEsJR7Ce1nuQ+HhV9FzDcbIo4ObBCD9GPTzNuy9S1g=="],
 
     "shiki/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],
@@ -4912,6 +4943,8 @@
 
     "body-parser/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
+    "c12/chokidar/readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
+
     "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
     "drizzle-kit/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.19.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA=="],

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1768395095,
-        "narHash": "sha256-ZhuYJbwbZT32QA95tSkXd9zXHcdZj90EzHpEXBMabaw=",
+        "lastModified": 1768569498,
+        "narHash": "sha256-bB6Nt99Cj8Nu5nIUq0GLmpiErIT5KFshMQJGMZwgqUo=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "13868c071cc73a5e9f610c47d7bb08e5da64fdd5",
+        "rev": "be5afa0fcb31f0a96bf9ecba05a516c66fcd8114",
         "type": "github"
       },
       "original": {

flake.nix

@@ -6,10 +6,7 @@
   };
 
   outputs =
-    {
-      nixpkgs,
-      ...
-    }:
+    { self, nixpkgs, ... }:
     let
       systems = [
         "aarch64-linux"
@@ -17,123 +14,56 @@
         "aarch64-darwin"
         "x86_64-darwin"
       ];
-      inherit (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";
-      };
-
-      # Parse "bun-{os}-{cpu}" to {os, cpu}
-      parseBunTarget =
-        target:
-        let
-          parts = lib.splitString "-" target;
-        in
-        {
-          os = builtins.elemAt parts 1;
-          cpu = builtins.elemAt parts 2;
-        };
-
-      hashesFile = "${./nix}/hashes.json";
-      hashesData =
-        if builtins.pathExists hashesFile then builtins.fromJSON (builtins.readFile hashesFile) else { };
-      # Lookup hash: supports per-system ({system: hash}) or legacy single hash
-      nodeModulesHashFor =
-        system:
-        if builtins.isAttrs hashesData.nodeModules then
-          hashesData.nodeModules.${system}
-        else
-          hashesData.nodeModules;
-      modelsDev = forEachSystem (
-        system:
-        let
-          pkgs = pkgsFor system;
-        in
-        pkgs."models-dev"
-      );
+      forEachSystem = f: nixpkgs.lib.genAttrs systems (system: f nixpkgs.legacyPackages.${system});
+      rev = self.shortRev or self.dirtyShortRev or "dirty";
     in
     {
-      devShells = forEachSystem (
-        system:
-        let
-          pkgs = pkgsFor system;
-        in
-        {
-          default = pkgs.mkShell {
-            packages = with pkgs; [
-              bun
-              nodejs_20
-              pkg-config
-              openssl
-              git
-            ];
-          };
-        }
-      );
+      devShells = forEachSystem (pkgs: {
+        default = pkgs.mkShell {
+          packages = with pkgs; [
+            bun
+            nodejs_20
+            pkg-config
+            openssl
+            git
+          ];
+        };
+      });
 
       packages = forEachSystem (
-        system:
+        pkgs:
         let
-          pkgs = pkgsFor system;
-          bunPlatform = parseBunTarget bunTarget.${system};
-          mkNodeModules = pkgs.callPackage ./nix/node-modules.nix {
-            hash = nodeModulesHashFor system;
-            bunCpu = bunPlatform.cpu;
-            bunOs = bunPlatform.os;
+          node_modules = pkgs.callPackage ./nix/node_modules.nix {
+            inherit rev;
           };
-          mkOpencode = pkgs.callPackage ./nix/opencode.nix { };
-          mkDesktop = pkgs.callPackage ./nix/desktop.nix { };
-
-          opencodePkg = mkOpencode {
-            inherit (packageJson) version;
-            src = ./.;
-            scripts = ./nix/scripts;
-            target = bunTarget.${system};
-            modelsDev = "${modelsDev.${system}}/dist/_api.json";
-            inherit mkNodeModules;
+          opencode = pkgs.callPackage ./nix/opencode.nix {
+            inherit node_modules;
           };
-
-          desktopPkg = mkDesktop {
-            inherit (packageJson) version;
-            src = ./.;
-            scripts = ./nix/scripts;
-            mkNodeModules = mkNodeModules;
-            opencode = opencodePkg;
+          desktop = pkgs.callPackage ./nix/desktop.nix {
+            inherit opencode;
           };
+          # nixpkgs cpu naming to bun cpu naming
+          cpuMap = { x86_64 = "x64"; aarch64 = "arm64"; };
+          # matrix of node_modules builds - these will always fail due to fakeHash usage
+          # but allow computation of the correct hash from any build machine for any cpu/os
+          # see the update-nix-hashes workflow for usage
+          moduleUpdaters = pkgs.lib.listToAttrs (
+            pkgs.lib.concatMap (cpu:
+              map (os: {
+                name = "${cpu}-${os}_node_modules";
+                value = node_modules.override {
+                  bunCpu = cpuMap.${cpu};
+                  bunOs = os;
+                  hash = pkgs.lib.fakeHash;
+                };
+              }) [ "linux" "darwin" ]
+            ) [ "x86_64" "aarch64" ]
+          );
         in
         {
-          default = opencodePkg;
-          desktop = desktopPkg;
-        }
-      );
-
-      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";
-          };
-        }
+          default = opencode;
+          inherit opencode desktop;
+        } // moduleUpdaters
       );
     };
 }

github/README.md

@@ -91,8 +91,10 @@ This will walk you through installing the GitHub app, creating the workflow, and
            uses: anomalyco/opencode/github@latest
            env:
              ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
            with:
              model: anthropic/claude-sonnet-4-20250514
+             use_github_token: true
    ```
 
 3. Store the API keys in secrets. In your organization or project **settings**, expand **Secrets and variables** on the left and select **Actions**. Add the required API keys.

infra/console.ts

@@ -119,6 +119,7 @@ const ZEN_MODELS = [
   new sst.Secret("ZEN_MODELS5"),
   new sst.Secret("ZEN_MODELS6"),
   new sst.Secret("ZEN_MODELS7"),
+  new sst.Secret("ZEN_MODELS8"),
 ]
 const ZEN_BLACK = new sst.Secret("ZEN_BLACK")
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")

nix/bundle.ts

@@ -1,40 +0,0 @@
-#!/usr/bin/env bun
-
-import solidPlugin from "./node_modules/@opentui/solid/scripts/solid-plugin"
-import path from "path"
-import fs from "fs"
-
-const dir = process.cwd()
-const parser = fs.realpathSync(path.join(dir, "node_modules/@opentui/core/parser.worker.js"))
-const worker = "./src/cli/cmd/tui/worker.ts"
-const version = process.env.OPENCODE_VERSION ?? "local"
-const channel = process.env.OPENCODE_CHANNEL ?? "local"
-
-fs.rmSync(path.join(dir, "dist"), { recursive: true, force: true })
-
-const result = await Bun.build({
-  entrypoints: ["./src/index.ts", worker, parser],
-  outdir: "./dist",
-  target: "bun",
-  sourcemap: "none",
-  tsconfig: "./tsconfig.json",
-  plugins: [solidPlugin],
-  external: ["@opentui/core"],
-  define: {
-    OPENCODE_VERSION: `'${version}'`,
-    OPENCODE_CHANNEL: `'${channel}'`,
-    // Leave undefined so runtime picks bundled/dist worker or fallback in code.
-    OPENCODE_WORKER_PATH: "undefined",
-    OTUI_TREE_SITTER_WORKER_PATH: 'new URL("./cli/cmd/tui/parser.worker.js", import.meta.url).href',
-  },
-})
-
-if (!result.success) {
-  console.error("bundle failed")
-  for (const log of result.logs) console.error(log)
-  process.exit(1)
-}
-
-const parserOut = path.join(dir, "dist/src/cli/cmd/tui/parser.worker.js")
-fs.mkdirSync(path.dirname(parserOut), { recursive: true })
-await Bun.write(parserOut, Bun.file(parser))

nix/desktop.nix

@@ -2,144 +2,99 @@
   lib,
   stdenv,
   rustPlatform,
-  bun,
   pkg-config,
-  dbus ? null,
-  openssl,
-  glib ? null,
-  gtk3 ? null,
-  libsoup_3 ? null,
-  webkitgtk_4_1 ? null,
-  librsvg ? null,
-  libappindicator-gtk3 ? null,
+  cargo-tauri,
+  bun,
+  nodejs,
   cargo,
   rustc,
-  makeBinaryWrapper,
-  nodejs,
   jq,
+  wrapGAppsHook4,
+  makeWrapper,
+  dbus,
+  glib,
+  gtk4,
+  libsoup_3,
+  librsvg,
+  libappindicator,
+  glib-networking,
+  openssl,
+  webkitgtk_4_1,
+  gst_all_1,
+  opencode,
 }:
-args:
-let
-  scripts = args.scripts;
-  mkModules =
-    attrs:
-    args.mkNodeModules (
-      attrs
-      // {
-        canonicalizeScript = scripts + "/canonicalize-node-modules.ts";
-        normalizeBinsScript = scripts + "/normalize-bun-binaries.ts";
-      }
-    );
-in
-rustPlatform.buildRustPackage rec {
+rustPlatform.buildRustPackage (finalAttrs: {
   pname = "opencode-desktop";
-  version = args.version;
+  inherit (opencode)
+    version
+    src
+    node_modules
+    patches
+    ;
 
-  src = args.src;
-
-  # We need to set the root for cargo, but we also need access to the whole repo.
-  postUnpack = ''
-    # Update sourceRoot to point to the tauri app
-    sourceRoot+=/packages/desktop/src-tauri
-  '';
-
-  cargoLock = {
-    lockFile = ../packages/desktop/src-tauri/Cargo.lock;
-    allowBuiltinFetchGit = true;
-  };
-
-  node_modules = mkModules {
-    version = version;
-    src = src;
-  };
+  cargoRoot = "packages/desktop/src-tauri";
+  cargoLock.lockFile = ../packages/desktop/src-tauri/Cargo.lock;
+  buildAndTestSubdir = finalAttrs.cargoRoot;
 
   nativeBuildInputs = [
     pkg-config
+    cargo-tauri.hook
     bun
-    makeBinaryWrapper
+    nodejs # for patchShebangs node_modules
     cargo
     rustc
-    nodejs
     jq
-  ];
-
-  buildInputs = [
-    openssl
+    makeWrapper
   ]
-  ++ lib.optionals stdenv.isLinux [
+  ++ lib.optionals stdenv.hostPlatform.isLinux [ wrapGAppsHook4 ];
+
+  buildInputs = lib.optionals stdenv.isLinux [
     dbus
     glib
-    gtk3
+    gtk4
     libsoup_3
-    webkitgtk_4_1
     librsvg
-    libappindicator-gtk3
+    libappindicator
+    glib-networking
+    openssl
+    webkitgtk_4_1
+    gst_all_1.gstreamer
+    gst_all_1.gst-plugins-base
+    gst_all_1.gst-plugins-good
   ];
 
+  strictDeps = true;
+
   preBuild = ''
-    # Restore node_modules
-    pushd ../../..
-
-    # Copy node_modules from the fixed-output derivation
-    # We use cp -r --no-preserve=mode to ensure we can write to them if needed,
-    # though we usually just read.
-    cp -r ${node_modules}/node_modules .
-    cp -r ${node_modules}/packages .
-
-    # Ensure node_modules is writable so patchShebangs can update script headers
-    chmod -R u+w node_modules
-    # Ensure workspace packages are writable for tsgo incremental outputs (.tsbuildinfo)
-    chmod -R u+w packages
-    # Patch shebangs so scripts can run
+    cp -a ${finalAttrs.node_modules}/{node_modules,packages} .
+    chmod -R u+w node_modules packages
     patchShebangs node_modules
+    patchShebangs packages/desktop/node_modules
 
-    # Copy sidecar
     mkdir -p packages/desktop/src-tauri/sidecars
-    targetTriple=${stdenv.hostPlatform.rust.rustcTarget}
-    cp ${args.opencode}/bin/opencode packages/desktop/src-tauri/sidecars/opencode-cli-$targetTriple
-
-    # Merge prod config into tauri.conf.json
-    if ! jq -s '.[0] * .[1]' \
-      packages/desktop/src-tauri/tauri.conf.json \
-      packages/desktop/src-tauri/tauri.prod.conf.json \
-      > packages/desktop/src-tauri/tauri.conf.json.tmp; then
-      echo "Error: failed to merge tauri.conf.json with tauri.prod.conf.json" >&2
-      exit 1
-    fi
-    mv packages/desktop/src-tauri/tauri.conf.json.tmp packages/desktop/src-tauri/tauri.conf.json
-
-    # Build the frontend
-    cd packages/desktop
-
-    # The 'build' script runs 'bun run typecheck && vite build'.
-    bun run build
-
-    popd
+    cp ${opencode}/bin/opencode packages/desktop/src-tauri/sidecars/opencode-cli-${stdenv.hostPlatform.rust.rustcTarget}
   '';
 
-  # Tauri bundles the assets during the rust build phase (which happens after preBuild).
-  # It looks for them in the location specified in tauri.conf.json.
+  # see publish-tauri job in .github/workflows/publish.yml
+  tauriBuildFlags = [
+    "--config"
+    "tauri.prod.conf.json"
+    "--no-sign" # no code signing or auto updates
+  ];
 
-  postInstall = lib.optionalString stdenv.isLinux ''
-    # Wrap the binary to ensure it finds the libraries
-    wrapProgram $out/bin/opencode-desktop \
-      --prefix LD_LIBRARY_PATH : ${
-        lib.makeLibraryPath [
-          gtk3
-          webkitgtk_4_1
-          librsvg
-          glib
-          libsoup_3
-        ]
-      }
+  # FIXME: workaround for concerns about case insensitive filesystems
+  # should be removed once binary is renamed or decided otherwise
+  # darwin output is a .app bundle so no conflict
+  postFixup = lib.optionalString stdenv.hostPlatform.isLinux ''
+    mv $out/bin/OpenCode $out/bin/opencode-desktop
+    sed -i 's|^Exec=OpenCode$|Exec=opencode-desktop|' $out/share/applications/OpenCode.desktop
   '';
 
-  meta = with lib; {
+  meta = {
     description = "OpenCode Desktop App";
     homepage = "https://opencode.ai";
-    license = licenses.mit;
-    maintainers = with maintainers; [ ];
+    license = lib.licenses.mit;
     mainProgram = "opencode-desktop";
-    platforms = platforms.linux ++ platforms.darwin;
+    inherit (opencode.meta) platforms;
   };
-}
+})

nix/hashes.json

@@ -1,6 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-Fl1BdjNSg19LJVSgDMiBX8JuTaGlL2I5T+rqLfjSeO4=",
-    "aarch64-darwin": "sha256-7UajHu40n7JKqurU/+CGlitErsVFA2qDneUytI8+/zQ="
+    "x86_64-linux": "sha256-80+b7FwUy4mRWTzEjPrBWuR5Um67I1Rn4U/n/s/lBjs=",
+    "aarch64-linux": "sha256-xH/Grwh3b+HWsUkKN8LMcyMaMcmnIJYlgp38WJCat5E=",
+    "aarch64-darwin": "sha256-Izv6PE9gNaeYYfcqDwjTU/WYtD1y+j65annwvLzkMD8=",
+    "x86_64-darwin": "sha256-EG1Z0uAeyFiOeVsv0Sz1sa8/mdXuw/uvbYYrkFR3EAg="
   }
 }

nix/node-modules.nix

@@ -1,62 +0,0 @@
-{
-  hash,
-  lib,
-  stdenvNoCC,
-  bun,
-  cacert,
-  curl,
-  bunCpu,
-  bunOs,
-}:
-args:
-stdenvNoCC.mkDerivation {
-  pname = "opencode-node_modules";
-  inherit (args) version 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="${bunCpu}" \
-      --os="${bunOs}" \
-      --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/node_modules.nix

@@ -0,0 +1,85 @@
+{
+  lib,
+  stdenvNoCC,
+  bun,
+  bunCpu ? if stdenvNoCC.hostPlatform.isAarch64 then "arm64" else "x64",
+  bunOs ? if stdenvNoCC.hostPlatform.isLinux then "linux" else "darwin",
+  rev ? "dirty",
+  hash ?
+    (lib.pipe ./hashes.json [
+      builtins.readFile
+      builtins.fromJSON
+    ]).nodeModules.${stdenvNoCC.hostPlatform.system},
+}:
+let
+  packageJson = lib.pipe ../packages/opencode/package.json [
+    builtins.readFile
+    builtins.fromJSON
+  ];
+in
+stdenvNoCC.mkDerivation {
+  pname = "opencode-node_modules";
+  version = "${packageJson.version}-${rev}";
+
+  src = lib.fileset.toSource {
+    root = ../.;
+    fileset = lib.fileset.intersection (lib.fileset.fromSource (lib.sources.cleanSource ../.)) (
+      lib.fileset.unions [
+        ../packages
+        ../bun.lock
+        ../package.json
+        ../patches
+        ../install
+      ]
+    );
+  };
+
+  impureEnvVars = lib.fetchers.proxyImpureEnvVars ++ [
+    "GIT_PROXY_COMMAND"
+    "SOCKS_SERVER"
+  ];
+
+  nativeBuildInputs = [
+    bun
+  ];
+
+  dontConfigure = true;
+
+  buildPhase = ''
+    runHook preBuild
+    export HOME=$(mktemp -d)
+    export BUN_INSTALL_CACHE_DIR=$(mktemp -d)
+    bun install \
+      --cpu="${bunCpu}" \
+      --os="${bunOs}" \
+      --frozen-lockfile \
+      --ignore-scripts \
+      --no-progress \
+      --linker=isolated
+    bun --bun ${./scripts/canonicalize-node-modules.ts}
+    bun --bun ${./scripts/normalize-bun-binaries.ts}
+    runHook postBuild
+  '';
+
+  installPhase = ''
+    runHook preInstall
+
+    mkdir -p $out
+    find . -type d -name node_modules -exec cp -R --parents {} $out \;
+
+    runHook postInstall
+  '';
+
+  dontFixup = true;
+
+  outputHashAlgo = "sha256";
+  outputHashMode = "recursive";
+  outputHash = hash;
+
+  meta.platforms = [
+    "aarch64-linux"
+    "x86_64-linux"
+    "aarch64-darwin"
+    "x86_64-darwin"
+  ];
+}

nix/opencode.nix

@@ -1,61 +1,48 @@
 {
   lib,
   stdenvNoCC,
+  callPackage,
   bun,
-  ripgrep,
+  sysctl,
   makeBinaryWrapper,
+  models-dev,
+  ripgrep,
+  installShellFiles,
+  versionCheckHook,
+  writableTmpDirAsHomeHook,
+  node_modules ? callPackage ./node-modules.nix { },
 }:
-args:
-let
-  inherit (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";
-  inherit (args) version src;
-
-  node_modules = mkModules {
-    inherit (finalAttrs) version src;
-  };
+  inherit (node_modules) version src;
+  inherit node_modules;
 
   nativeBuildInputs = [
     bun
+    installShellFiles
     makeBinaryWrapper
+    models-dev
+    writableTmpDirAsHomeHook
   ];
 
-  env.MODELS_DEV_API_JSON = args.modelsDev;
-  env.OPENCODE_VERSION = args.version;
-  env.OPENCODE_CHANNEL = "stable";
-  dontConfigure = true;
+  configurePhase = ''
+    runHook preConfigure
+
+    cp -R ${finalAttrs.node_modules}/. .
+
+    runHook postConfigure
+  '';
+
+  env.MODELS_DEV_API_JSON = "${models-dev}/dist/_api.json";
+  env.OPENCODE_VERSION = finalAttrs.version;
+  env.OPENCODE_CHANNEL = "local";
 
   buildPhase = ''
     runHook preBuild
 
-    cp -r ${finalAttrs.node_modules}/node_modules .
-    cp -r ${finalAttrs.node_modules}/packages .
-
-    (
-      cd packages/opencode
-
-      chmod -R u+w ./node_modules
-      mkdir -p ./node_modules/@opencode-ai
-      rm -f ./node_modules/@opencode-ai/{script,sdk,plugin}
-      ln -s $(pwd)/../../packages/script ./node_modules/@opencode-ai/script
-      ln -s $(pwd)/../../packages/sdk/js ./node_modules/@opencode-ai/sdk
-      ln -s $(pwd)/../../packages/plugin ./node_modules/@opencode-ai/plugin
-
-      cp ${./bundle.ts} ./bundle.ts
-      chmod +x ./bundle.ts
-      bun run ./bundle.ts
-    )
+    cd ./packages/opencode
+    bun --bun ./script/build.ts --single --skip-install
+    bun --bun ./script/schema.ts schema.json
 
     runHook postBuild
   '';
@@ -63,76 +50,47 @@ stdenvNoCC.mkDerivation (finalAttrs: {
   installPhase = ''
     runHook preInstall
 
-    cd packages/opencode
-    if [ ! -d dist ]; then
-      echo "ERROR: dist directory missing after bundle step"
-      exit 1
-    fi
+    install -Dm755 dist/opencode-*/bin/opencode $out/bin/opencode
+    install -Dm644 schema.json $out/share/opencode/schema.json
 
-    mkdir -p $out/lib/opencode
-    cp -r dist $out/lib/opencode/
-    chmod -R u+w $out/lib/opencode/dist
-
-    # Select bundled worker assets deterministically (sorted find output)
-    worker_file=$(find "$out/lib/opencode/dist" -type f \( -path '*/tui/worker.*' -o -name 'worker.*' \) | sort | head -n1)
-    parser_worker_file=$(find "$out/lib/opencode/dist" -type f -name 'parser.worker.*' | sort | head -n1)
-    if [ -z "$worker_file" ]; then
-      echo "ERROR: bundled worker not found"
-      exit 1
-    fi
-
-    main_wasm=$(printf '%s\n' "$out"/lib/opencode/dist/tree-sitter-*.wasm | sort | head -n1)
-    wasm_list=$(find "$out/lib/opencode/dist" -maxdepth 1 -name 'tree-sitter-*.wasm' -print)
-    for patch_file in "$worker_file" "$parser_worker_file"; do
-      [ -z "$patch_file" ] && continue
-      [ ! -f "$patch_file" ] && continue
-      if [ -n "$wasm_list" ] && grep -q 'tree-sitter' "$patch_file"; then
-        # Rewrite wasm references to absolute store paths to avoid runtime resolve failures.
-        bun --bun ${scripts + "/patch-wasm.ts"} "$patch_file" "$main_wasm" $wasm_list
-      fi
-    done
-
-    mkdir -p $out/lib/opencode/node_modules
-    cp -r ../../node_modules/.bun $out/lib/opencode/node_modules/
-    mkdir -p $out/lib/opencode/node_modules/@opentui
-
-    mkdir -p $out/bin
-    makeWrapper ${bun}/bin/bun $out/bin/opencode \
-      --add-flags "run" \
-      --add-flags "$out/lib/opencode/dist/src/index.js" \
-      --prefix PATH : ${lib.makeBinPath [ ripgrep ]} \
-      --argv0 opencode
+    wrapProgram $out/bin/opencode \
+      --prefix PATH : ${
+        lib.makeBinPath (
+          [
+            ripgrep
+          ]
+          # bun runs sysctl to detect if dunning on rosetta2
+          ++ lib.optional stdenvNoCC.hostPlatform.isDarwin sysctl
+        )
+      }
 
     runHook postInstall
   '';
 
-  postInstall = ''
-    for pkg in $out/lib/opencode/node_modules/.bun/@opentui+core-* $out/lib/opencode/node_modules/.bun/@opentui+solid-* $out/lib/opencode/node_modules/.bun/@opentui+core@* $out/lib/opencode/node_modules/.bun/@opentui+solid@*; do
-      if [ -d "$pkg" ]; then
-        pkgName=$(basename "$pkg" | sed 's/@opentui+\([^@]*\)@.*/\1/')
-        ln -sf ../.bun/$(basename "$pkg")/node_modules/@opentui/$pkgName \
-          $out/lib/opencode/node_modules/@opentui/$pkgName
-      fi
-    done
+  postInstall = lib.optionalString (stdenvNoCC.buildPlatform.canExecute stdenvNoCC.hostPlatform) ''
+    # trick yargs into also generating zsh completions
+    installShellCompletion --cmd opencode \
+      --bash <($out/bin/opencode completion) \
+      --zsh <(SHELL=/bin/zsh $out/bin/opencode completion)
   '';
 
-  dontFixup = true;
+  nativeInstallCheckInputs = [
+    versionCheckHook
+    writableTmpDirAsHomeHook
+  ];
+  doInstallCheck = true;
+  versionCheckKeepEnvironment = [ "HOME" ];
+  versionCheckProgramArg = "--version";
+
+  passthru = {
+    jsonschema = "${placeholder "out"}/share/opencode/schema.json";
+  };
 
   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/anomalyco/opencode";
+    description = "The open source coding agent";
+    homepage = "https://opencode.ai/";
     license = lib.licenses.mit;
-    platforms = [
-      "aarch64-linux"
-      "x86_64-linux"
-      "aarch64-darwin"
-      "x86_64-darwin"
-    ];
     mainProgram = "opencode";
+    inherit (node_modules.meta) platforms;
   };
 })

nix/scripts/bun-build.ts

@@ -1,120 +0,0 @@
-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",
-    autoloadBunfig: false,
-    autoloadDotenv: false,
-    //@ts-ignore (bun types aren't up to date)
-    autoloadTsconfig: true,
-    autoloadPackageJson: true,
-    execArgv: ["--user-agent=opencode/" + version, "--use-system-ca", "--"],
-    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/patch-wasm.ts

@@ -1,43 +0,0 @@
-#!/usr/bin/env bun
-
-import fs from "fs"
-import path from "path"
-
-/**
- * Rewrite tree-sitter wasm references inside a JS file to absolute paths.
- * argv: [node, script, file, mainWasm, ...wasmPaths]
- */
-const [, , file, mainWasm, ...wasmPaths] = process.argv
-
-if (!file || !mainWasm) {
-  console.error("usage: patch-wasm <file> <mainWasm> [wasmPaths...]")
-  process.exit(1)
-}
-
-const content = fs.readFileSync(file, "utf8")
-const byName = new Map<string, string>()
-
-for (const wasm of wasmPaths) {
-  const name = path.basename(wasm)
-  byName.set(name, wasm)
-}
-
-let next = content
-
-for (const [name, wasmPath] of byName) {
-  next = next.replaceAll(name, wasmPath)
-}
-
-next = next.replaceAll("tree-sitter.wasm", mainWasm).replaceAll("web-tree-sitter/tree-sitter.wasm", mainWasm)
-
-// Collapse any relative prefixes before absolute store paths (e.g., "../../../..//nix/store/...")
-const nixStorePrefix = process.env.NIX_STORE || "/nix/store"
-next = next.replace(/(\.\/)+/g, "./")
-next = next.replace(
-  new RegExp(`(\\.\\.\\/)+\\/{1,2}(${nixStorePrefix.replace(/^\//, "").replace(/\//g, "\\/")}[^"']+)`, "g"),
-  "/$2",
-)
-next = next.replace(new RegExp(`(["'])\\/{2,}(\\/${nixStorePrefix.replace(/\//g, "\\/")}[^"']+)(["'])`, "g"), "$1$2$3")
-next = next.replace(new RegExp(`(["'])\\/\\/(${nixStorePrefix.replace(/\//g, "\\/")}[^"']+)(["'])`, "g"), "$1$2$3")
-
-if (next !== content) fs.writeFileSync(file, next)

nix/scripts/update-hashes.sh

@@ -1,119 +0,0 @@
-#!/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": {}
-}
-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 system="${2:-$SYSTEM}"
-  local temp
-  temp=$(mktemp)
-  
-  if jq -e '.nodeModules | type == "object"' "$HASH_FILE" >/dev/null 2>&1; then
-    jq --arg system "$system" --arg value "$value" '.nodeModules[$system] = $value' "$HASH_FILE" >"$temp"
-  else
-    jq --arg system "$system" --arg value "$value" '.nodeModules = {($system): $value}' "$HASH_FILE" >"$temp"
-  fi
-  
-  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 system "$SYSTEM" --arg hash "$CORRECT_HASH" '.nodeModules[$system] == $hash' "$HASH_FILE" >/dev/null
-
-echo "node_modules hash updated for ${SYSTEM}: $CORRECT_HASH"
-
-rm -f "$BUILD_LOG"
-unset BUILD_LOG

package.json

@@ -44,6 +44,7 @@
       "luxon": "3.6.1",
       "marked": "17.0.1",
       "marked-shiki": "1.2.1",
+      "@playwright/test": "1.51.0",
       "typescript": "5.8.2",
       "@typescript/native-preview": "7.0.0-dev.20251207.1",
       "zod": "4.1.8",

packages/app/.gitignore

@@ -1 +1,3 @@
 src/assets/theme.css
+e2e/test-results
+e2e/playwright-report

packages/app/README.md

@@ -29,6 +29,21 @@ It correctly bundles Solid in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
+## E2E Testing
+
+The Playwright runner expects the app already running at `http://localhost:3000`.
+
+```bash
+bun add -D @playwright/test
+bunx playwright install
+bun run test:e2e
+```
+
+Environment options:
+
+- `PLAYWRIGHT_BASE_URL` (default: `http://localhost:3000`)
+- `PLAYWRIGHT_PORT` (default: `3000`)
+
 ## Deployment
 
 You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

packages/app/e2e/context.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("context panel can be opened from the prompt", async ({ page, sdk, gotoSession }) => {
+  const title = `e2e smoke context ${Date.now()}`
+  const created = await sdk.session.create({ title }).then((r) => r.data)
+
+  if (!created?.id) throw new Error("Session create did not return an id")
+  const sessionID = created.id
+
+  try {
+    await sdk.session.promptAsync({
+      sessionID,
+      noReply: true,
+      parts: [
+        {
+          type: "text",
+          text: "seed context",
+        },
+      ],
+    })
+
+    await expect
+      .poll(async () => {
+        const messages = await sdk.session.messages({ sessionID, limit: 1 }).then((r) => r.data ?? [])
+        return messages.length
+      })
+      .toBeGreaterThan(0)
+
+    await gotoSession(sessionID)
+
+    const contextButton = page
+      .locator('[data-component="button"]')
+      .filter({ has: page.locator('[data-component="progress-circle"]').first() })
+      .first()
+
+    await expect(contextButton).toBeVisible()
+    await contextButton.click()
+
+    const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
+    await expect(tabs.getByRole("tab", { name: "Context" })).toBeVisible()
+  } finally {
+    await sdk.session.delete({ sessionID }).catch(() => undefined)
+  }
+})

packages/app/e2e/file-open.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.keyboard.press(`${modKey}+P`)
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+
+  const input = dialog.getByRole("textbox").first()
+  await input.fill("package.json")
+
+  const fileItem = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
+  await expect(fileItem).toBeVisible()
+  await fileItem.click()
+
+  await expect(dialog).toHaveCount(0)
+
+  const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
+  await expect(tabs.locator('[data-slot="tabs-trigger"]').first()).toBeVisible()
+})

packages/app/e2e/fixtures.ts

@@ -0,0 +1,40 @@
+import { test as base, expect } from "@playwright/test"
+import { createSdk, dirSlug, getWorktree, promptSelector, sessionPath } from "./utils"
+
+type TestFixtures = {
+  sdk: ReturnType<typeof createSdk>
+  gotoSession: (sessionID?: string) => Promise<void>
+}
+
+type WorkerFixtures = {
+  directory: string
+  slug: string
+}
+
+export const test = base.extend<TestFixtures, WorkerFixtures>({
+  directory: [
+    async ({}, use) => {
+      const directory = await getWorktree()
+      await use(directory)
+    },
+    { scope: "worker" },
+  ],
+  slug: [
+    async ({ directory }, use) => {
+      await use(dirSlug(directory))
+    },
+    { scope: "worker" },
+  ],
+  sdk: async ({ directory }, use) => {
+    await use(createSdk(directory))
+  },
+  gotoSession: async ({ page, directory }, use) => {
+    const gotoSession = async (sessionID?: string) => {
+      await page.goto(sessionPath(directory, sessionID))
+      await expect(page.locator(promptSelector)).toBeVisible()
+    }
+    await use(gotoSession)
+  },
+})
+
+export { expect }

packages/app/e2e/home.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { serverName } from "./utils"
+
+test("home renders and shows core entrypoints", async ({ page }) => {
+  await page.goto("/")
+
+  await expect(page.getByRole("button", { name: "Open project" }).first()).toBeVisible()
+  await expect(page.getByRole("button", { name: serverName })).toBeVisible()
+})
+
+test("server picker dialog opens from home", async ({ page }) => {
+  await page.goto("/")
+
+  const trigger = page.getByRole("button", { name: serverName })
+  await expect(trigger).toBeVisible()
+  await trigger.click()
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByRole("textbox").first()).toBeVisible()
+})

packages/app/e2e/navigation.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "./fixtures"
+import { dirPath, promptSelector } from "./utils"
+
+test("project route redirects to /session", async ({ page, directory, slug }) => {
+  await page.goto(dirPath(directory))
+
+  await expect(page).toHaveURL(new RegExp(`/${slug}/session`))
+  await expect(page.locator(promptSelector)).toBeVisible()
+})

packages/app/e2e/palette.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("search palette opens and closes", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.keyboard.press(`${modKey}+P`)
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByRole("textbox").first()).toBeVisible()
+
+  await page.keyboard.press("Escape")
+  await expect(dialog).toHaveCount(0)
+})

packages/app/e2e/session.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("can open an existing session and type into the prompt", async ({ page, sdk, gotoSession }) => {
+  const title = `e2e smoke ${Date.now()}`
+  const created = await sdk.session.create({ title }).then((r) => r.data)
+
+  if (!created?.id) throw new Error("Session create did not return an id")
+  const sessionID = created.id
+
+  try {
+    await gotoSession(sessionID)
+
+    const prompt = page.locator(promptSelector)
+    await prompt.click()
+    await page.keyboard.type("hello from e2e")
+    await expect(prompt).toContainText("hello from e2e")
+  } finally {
+    await sdk.session.delete({ sessionID }).catch(() => undefined)
+  }
+})

packages/app/e2e/sidebar.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("sidebar can be collapsed and expanded", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const main = page.locator("main")
+  const closedClass = /xl:border-l/
+  const isClosed = await main.evaluate((node) => node.className.includes("xl:border-l"))
+
+  if (isClosed) {
+    await page.keyboard.press(`${modKey}+B`)
+    await expect(main).not.toHaveClass(closedClass)
+  }
+
+  await page.keyboard.press(`${modKey}+B`)
+  await expect(main).toHaveClass(closedClass)
+
+  await page.keyboard.press(`${modKey}+B`)
+  await expect(main).not.toHaveClass(closedClass)
+})

packages/app/e2e/terminal.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "./fixtures"
+import { terminalSelector, terminalToggleKey } from "./utils"
+
+test("terminal panel can be toggled", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const terminal = page.locator(terminalSelector)
+  const initiallyOpen = await terminal.isVisible()
+  if (initiallyOpen) {
+    await page.keyboard.press(terminalToggleKey)
+    await expect(terminal).toHaveCount(0)
+  }
+
+  await page.keyboard.press(terminalToggleKey)
+  await expect(terminal).toBeVisible()
+})

packages/app/e2e/utils.ts

@@ -0,0 +1,38 @@
+import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
+import { base64Encode } from "@opencode-ai/util/encode"
+
+export const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "localhost"
+export const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+
+export const serverUrl = `http://${serverHost}:${serverPort}`
+export const serverName = `${serverHost}:${serverPort}`
+
+export const modKey = process.platform === "darwin" ? "Meta" : "Control"
+export const terminalToggleKey = "Control+Backquote"
+
+export const promptSelector = '[data-component="prompt-input"]'
+export const terminalSelector = '[data-component="terminal"]'
+
+export function createSdk(directory?: string) {
+  return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })
+}
+
+export async function getWorktree() {
+  const sdk = createSdk()
+  const result = await sdk.path.get()
+  const data = result.data
+  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${serverUrl}/path`)
+  return data.worktree
+}
+
+export function dirSlug(directory: string) {
+  return base64Encode(directory)
+}
+
+export function dirPath(directory: string) {
+  return `/${dirSlug(directory)}`
+}
+
+export function sessionPath(directory: string, sessionID?: string) {
+  return `${dirPath(directory)}/session${sessionID ? `/${sessionID}` : ""}`
+}

packages/app/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>OpenCode</title>
-    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="/favicon-96x96-v2.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-v2.svg" />
+    <link rel="shortcut icon" href="/favicon-v2.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v2.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="theme-color" content="#F8F7F7" />
     <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.1.21",
+  "version": "1.1.27",
   "description": "",
   "type": "module",
   "exports": {
@@ -12,11 +12,16 @@
     "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "test": "playwright test",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report e2e/playwright-report"
   },
   "license": "MIT",
   "devDependencies": {
     "@happy-dom/global-registrator": "20.0.11",
+    "@playwright/test": "1.57.0",
     "@tailwindcss/vite": "catalog:",
     "@tsconfig/bun": "1.0.9",
     "@types/bun": "catalog:",

packages/app/playwright.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig, devices } from "@playwright/test"
+
+const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://localhost:${port}`
+const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "localhost"
+const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
+const reuse = !process.env.CI
+
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "./e2e/test-results",
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
+  webServer: {
+    command,
+    url: baseURL,
+    reuseExistingServer: reuse,
+    timeout: 120_000,
+    env: {
+      VITE_OPENCODE_SERVER_HOST: serverHost,
+      VITE_OPENCODE_SERVER_PORT: serverPort,
+    },
+  },
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+})

packages/app/public/apple-touch-icon-v2.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon-v2.png

packages/app/public/favicon-96x96-v2.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96-v2.png

packages/app/public/favicon-v2.ico

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

packages/app/public/favicon-v2.svg

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

packages/app/src/app.tsx

@@ -14,6 +14,7 @@ import { PermissionProvider } from "@/context/permission"
 import { LayoutProvider } from "@/context/layout"
 import { GlobalSDKProvider } from "@/context/global-sdk"
 import { ServerProvider, useServer } from "@/context/server"
+import { SettingsProvider } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
 import { PromptProvider } from "@/context/prompt"
 import { FileProvider } from "@/context/file"
@@ -29,7 +30,7 @@ import { Suspense } from "solid-js"
 
 const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
-const Loading = () => <div class="size-full flex items-center justify-center text-text-weak">Loading...</div>
+const Loading = () => <div class="size-full" />
 
 declare global {
   interface Window {
@@ -82,15 +83,17 @@ export function AppInterface(props: { defaultUrl?: string }) {
           <GlobalSyncProvider>
             <Router
               root={(props) => (
-                <PermissionProvider>
-                  <LayoutProvider>
-                    <NotificationProvider>
-                      <CommandProvider>
-                        <Layout>{props.children}</Layout>
-                      </CommandProvider>
-                    </NotificationProvider>
-                  </LayoutProvider>
-                </PermissionProvider>
+                <SettingsProvider>
+                  <PermissionProvider>
+                    <LayoutProvider>
+                      <NotificationProvider>
+                        <CommandProvider>
+                          <Layout>{props.children}</Layout>
+                        </CommandProvider>
+                      </NotificationProvider>
+                    </LayoutProvider>
+                  </PermissionProvider>
+                </SettingsProvider>
               )}
             >
               <Route
@@ -105,16 +108,18 @@ export function AppInterface(props: { defaultUrl?: string }) {
                 <Route path="/" component={() => <Navigate href="session" />} />
                 <Route
                   path="/session/:id?"
-                  component={() => (
-                    <TerminalProvider>
-                      <FileProvider>
-                        <PromptProvider>
-                          <Suspense fallback={<Loading />}>
-                            <Session />
-                          </Suspense>
-                        </PromptProvider>
-                      </FileProvider>
-                    </TerminalProvider>
+                  component={(p) => (
+                    <Show when={p.params.id ?? "new"} keyed>
+                      <TerminalProvider>
+                        <FileProvider>
+                          <PromptProvider>
+                            <Suspense fallback={<Loading />}>
+                              <Session />
+                            </Suspense>
+                          </PromptProvider>
+                        </FileProvider>
+                      </TerminalProvider>
+                    </Show>
                   )}
                 />
               </Route>

packages/app/src/components/dialog-edit-project.tsx

@@ -22,16 +22,20 @@ export function DialogEditProject(props: { project: LocalProject }) {
   const [store, setStore] = createStore({
     name: defaultName(),
     color: props.project.icon?.color || "pink",
-    iconUrl: props.project.icon?.url || "",
+    iconUrl: props.project.icon?.override || "",
     saving: false,
   })
 
   const [dragOver, setDragOver] = createSignal(false)
+  const [iconHover, setIconHover] = createSignal(false)
 
   function handleFileSelect(file: File) {
     if (!file.type.startsWith("image/")) return
     const reader = new FileReader()
-    reader.onload = (e) => setStore("iconUrl", e.target?.result as string)
+    reader.onload = (e) => {
+      setStore("iconUrl", e.target?.result as string)
+      setIconHover(false)
+    }
     reader.readAsDataURL(file)
   }
 
@@ -70,15 +74,15 @@ export function DialogEditProject(props: { project: LocalProject }) {
     await globalSDK.client.project.update({
       projectID: props.project.id,
       name,
-      icon: { color: store.color, url: store.iconUrl },
+      icon: { color: store.color, override: store.iconUrl },
     })
     setStore("saving", false)
     dialog.close()
   }
 
   return (
-    <Dialog title="Edit project">
-      <form onSubmit={handleSubmit} class="flex flex-col gap-6 px-2.5 pb-3">
+    <Dialog title="Edit project" class="w-full max-w-[480px] mx-auto">
+      <form onSubmit={handleSubmit} class="flex flex-col gap-6 p-6 pt-0">
         <div class="flex flex-col gap-4">
           <TextField
             autofocus
@@ -92,17 +96,24 @@ export function DialogEditProject(props: { project: LocalProject }) {
           <div class="flex flex-col gap-2">
             <label class="text-12-medium text-text-weak">Icon</label>
             <div class="flex gap-3 items-start">
-              <div class="relative">
+              <div class="relative" onMouseEnter={() => setIconHover(true)} onMouseLeave={() => setIconHover(false)}>
                 <div
-                  class="size-16 rounded-lg overflow-hidden border border-dashed transition-colors cursor-pointer"
+                  class="relative size-16 rounded-md transition-colors cursor-pointer"
                   classList={{
                     "border-text-interactive-base bg-surface-info-base/20": dragOver(),
                     "border-border-base hover:border-border-strong": !dragOver(),
+                    "overflow-hidden": !!store.iconUrl,
                   }}
                   onDrop={handleDrop}
                   onDragOver={handleDragOver}
                   onDragLeave={handleDragLeave}
-                  onClick={() => document.getElementById("icon-upload")?.click()}
+                  onClick={() => {
+                    if (store.iconUrl && iconHover()) {
+                      clearIcon()
+                    } else {
+                      document.getElementById("icon-upload")?.click()
+                    }
+                  }}
                 >
                   <Show
                     when={store.iconUrl}
@@ -119,20 +130,48 @@ export function DialogEditProject(props: { project: LocalProject }) {
                     <img src={store.iconUrl} alt="Project icon" class="size-full object-cover" />
                   </Show>
                 </div>
-                <Show when={store.iconUrl}>
-                  <button
-                    type="button"
-                    class="absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-base border border-border-base flex items-center justify-center hover:bg-surface-raised-base-hover"
-                    onClick={clearIcon}
-                  >
-                    <Icon name="close" class="size-3 text-icon-base" />
-                  </button>
-                </Show>
+                <div
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "64px",
+                    height: "64px",
+                    background: "rgba(0,0,0,0.6)",
+                    "border-radius": "6px",
+                    "z-index": 10,
+                    "pointer-events": "none",
+                    opacity: iconHover() && !store.iconUrl ? 1 : 0,
+                    display: "flex",
+                    "align-items": "center",
+                    "justify-content": "center",
+                  }}
+                >
+                  <Icon name="cloud-upload" size="large" class="text-icon-invert-base" />
+                </div>
+                <div
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "64px",
+                    height: "64px",
+                    background: "rgba(0,0,0,0.6)",
+                    "border-radius": "6px",
+                    "z-index": 10,
+                    "pointer-events": "none",
+                    opacity: iconHover() && store.iconUrl ? 1 : 0,
+                    display: "flex",
+                    "align-items": "center",
+                    "justify-content": "center",
+                  }}
+                >
+                  <Icon name="trash" size="large" class="text-icon-invert-base" />
+                </div>
               </div>
               <input id="icon-upload" type="file" accept="image/*" class="hidden" onChange={handleInputChange} />
-              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak">
-                <span>Click or drag an image</span>
-                <span>Recommended: 128x128px</span>
+              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
+                <span>Recommended size 128x128px</span>
               </div>
             </div>
           </div>
@@ -140,20 +179,25 @@ export function DialogEditProject(props: { project: LocalProject }) {
           <Show when={!store.iconUrl}>
             <div class="flex flex-col gap-2">
               <label class="text-12-medium text-text-weak">Color</label>
-              <div class="flex gap-2">
+              <div class="flex gap-1.5">
                 <For each={AVATAR_COLOR_KEYS}>
                   {(color) => (
                     <button
                       type="button"
-                      class="relative size-8 rounded-md transition-all"
                       classList={{
-                        "ring-2 ring-offset-2 ring-offset-surface-base ring-text-interactive-base":
+                        "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
+                        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":
                           store.color === color,
+                        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+                          store.color !== color,
                       }}
-                      style={{ background: getAvatarColors(color).background }}
                       onClick={() => setStore("color", color)}
                     >
-                      <Avatar fallback={store.name || defaultName()} {...getAvatarColors(color)} class="size-full" />
+                      <Avatar
+                        fallback={store.name || defaultName()}
+                        {...getAvatarColors(color)}
+                        class="size-full rounded"
+                      />
                     </button>
                   )}
                 </For>

packages/app/src/components/dialog-select-file.tsx

@@ -1,14 +1,30 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
 import { List } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { useParams } from "@solidjs/router"
-import { createMemo } from "solid-js"
+import { createMemo, createSignal, onCleanup, Show } from "solid-js"
+import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
 import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 
+type EntryType = "command" | "file"
+
+type Entry = {
+  id: string
+  type: EntryType
+  title: string
+  description?: string
+  keybind?: string
+  category: "Commands" | "Files"
+  option?: CommandOption
+  path?: string
+}
+
 export function DialogSelectFile() {
+  const command = useCommand()
   const layout = useLayout()
   const file = useFile()
   const dialog = useDialog()
@@ -16,35 +32,155 @@ export function DialogSelectFile() {
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const tabs = createMemo(() => layout.tabs(sessionKey()))
   const view = createMemo(() => layout.view(sessionKey()))
+  const state = { cleanup: undefined as (() => void) | void, committed: false }
+  const [grouped, setGrouped] = createSignal(false)
+  const common = [
+    "session.new",
+    "workspace.new",
+    "session.previous",
+    "session.next",
+    "terminal.toggle",
+    "review.toggle",
+  ]
+  const limit = 5
+
+  const allowed = createMemo(() =>
+    command.options.filter(
+      (option) => !option.disabled && !option.id.startsWith("suggested.") && option.id !== "file.open",
+    ),
+  )
+
+  const commandItem = (option: CommandOption): Entry => ({
+    id: "command:" + option.id,
+    type: "command",
+    title: option.title,
+    description: option.description,
+    keybind: option.keybind,
+    category: "Commands",
+    option,
+  })
+
+  const fileItem = (path: string): Entry => ({
+    id: "file:" + path,
+    type: "file",
+    title: path,
+    category: "Files",
+    path,
+  })
+
+  const list = createMemo(() => allowed().map(commandItem))
+
+  const picks = createMemo(() => {
+    const all = allowed()
+    const order = new Map(common.map((id, index) => [id, index]))
+    const picked = all.filter((option) => order.has(option.id))
+    const base = picked.length ? picked : all.slice(0, limit)
+    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
+    return sorted.map(commandItem)
+  })
+
+  const recent = createMemo(() => {
+    const all = tabs().all()
+    const active = tabs().active()
+    const order = active ? [active, ...all.filter((item) => item !== active)] : all
+    const seen = new Set<string>()
+    const items: Entry[] = []
+
+    for (const item of order) {
+      const path = file.pathFromTab(item)
+      if (!path) continue
+      if (seen.has(path)) continue
+      seen.add(path)
+      items.push(fileItem(path))
+    }
+
+    return items.slice(0, limit)
+  })
+
+  const items = async (filter: string) => {
+    const query = filter.trim()
+    setGrouped(query.length > 0)
+    if (!query) return [...picks(), ...recent()]
+    const files = await file.searchFiles(query)
+    const entries = files.map(fileItem)
+    return [...list(), ...entries]
+  }
+
+  const handleMove = (item: Entry | undefined) => {
+    state.cleanup?.()
+    if (!item) return
+    if (item.type !== "command") return
+    state.cleanup = item.option?.onHighlight?.()
+  }
+
+  const open = (path: string) => {
+    const value = file.tab(path)
+    tabs().open(value)
+    file.load(path)
+    view().reviewPanel.open()
+  }
+
+  const handleSelect = (item: Entry | undefined) => {
+    if (!item) return
+    state.committed = true
+    state.cleanup = undefined
+    dialog.close()
+
+    if (item.type === "command") {
+      item.option?.onSelect?.("palette")
+      return
+    }
+
+    if (!item.path) return
+    open(item.path)
+  }
+
+  onCleanup(() => {
+    if (state.committed) return
+    state.cleanup?.()
+  })
+
   return (
-    <Dialog title="Select file">
+    <Dialog class="pt-3 pb-0 !max-h-[480px]">
       <List
-        search={{ placeholder: "Search files", autofocus: true }}
-        emptyMessage="No files found"
-        items={file.searchFiles}
-        key={(x) => x}
-        onSelect={(path) => {
-          if (path) {
-            const value = file.tab(path)
-            tabs().open(value)
-            file.load(path)
-            view().reviewPanel.open()
-          }
-          dialog.close()
-        }}
+        search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "pl-3 pr-2 !mb-0" }}
+        emptyMessage="No results found"
+        items={items}
+        key={(item) => item.id}
+        filterKeys={["title", "description", "category"]}
+        groupBy={(item) => item.category}
+        onMove={handleMove}
+        onSelect={handleSelect}
       >
-        {(i) => (
-          <div class="w-full flex items-center justify-between rounded-md">
-            <div class="flex items-center gap-x-3 grow min-w-0">
-              <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
-              <div class="flex items-center text-14-regular">
-                <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                  {getDirectory(i)}
-                </span>
-                <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+        {(item) => (
+          <Show
+            when={item.type === "command"}
+            fallback={
+              <div class="w-full flex items-center justify-between rounded-md pl-1">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <FileIcon node={{ path: item.path ?? "", type: "file" }} class="shrink-0 size-4" />
+                  <div class="flex items-center text-14-regular">
+                    <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                      {getDirectory(item.path ?? "")}
+                    </span>
+                    <span class="text-text-strong whitespace-nowrap">{getFilename(item.path ?? "")}</span>
+                  </div>
+                </div>
               </div>
+            }
+          >
+            <div class="w-full flex items-center justify-between gap-4 pl-1">
+              <div class="flex items-center gap-2 min-w-0">
+                <span class="text-14-regular text-text-strong whitespace-nowrap">{item.title}</span>
+                <Show when={item.description}>
+                  <span class="text-14-regular text-text-weak truncate">{item.description}</span>
+                </Show>
+              </div>
+              <Show when={item.keybind}>
+                <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "")}</Keybind>
+              </Show>
             </div>
-          </div>
+          </Show>
         )}
       </List>
     </Dialog>

packages/app/src/components/dialog-settings.tsx

@@ -0,0 +1,81 @@
+import { Component } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Icon } from "@opencode-ai/ui/icon"
+import { SettingsGeneral } from "./settings-general"
+import { SettingsKeybinds } from "./settings-keybinds"
+import { SettingsPermissions } from "./settings-permissions"
+import { SettingsProviders } from "./settings-providers"
+import { SettingsModels } from "./settings-models"
+import { SettingsAgents } from "./settings-agents"
+import { SettingsCommands } from "./settings-commands"
+import { SettingsMcp } from "./settings-mcp"
+
+export const DialogSettings: Component = () => {
+  return (
+    <Dialog size="large">
+      <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
+        <Tabs.List>
+          <Tabs.SectionTitle>Desktop</Tabs.SectionTitle>
+          <Tabs.Trigger value="general">
+            <Icon name="settings-gear" />
+            General
+          </Tabs.Trigger>
+          <Tabs.Trigger value="shortcuts">
+            <Icon name="console" />
+            Shortcuts
+          </Tabs.Trigger>
+          {/* <Tabs.SectionTitle>Server</Tabs.SectionTitle> */}
+          {/* <Tabs.Trigger value="permissions"> */}
+          {/*   <Icon name="checklist" /> */}
+          {/*   Permissions */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="providers"> */}
+          {/*   <Icon name="server" /> */}
+          {/*   Providers */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="models"> */}
+          {/*   <Icon name="brain" /> */}
+          {/*   Models */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="agents"> */}
+          {/*   <Icon name="task" /> */}
+          {/*   Agents */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="commands"> */}
+          {/*   <Icon name="console" /> */}
+          {/*   Commands */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="mcp"> */}
+          {/*   <Icon name="mcp" /> */}
+          {/*   MCP */}
+          {/* </Tabs.Trigger> */}
+        </Tabs.List>
+        <Tabs.Content value="general" class="no-scrollbar">
+          <SettingsGeneral />
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="no-scrollbar">
+          <SettingsKeybinds />
+        </Tabs.Content>
+        {/* <Tabs.Content value="permissions" class="no-scrollbar"> */}
+        {/*   <SettingsPermissions /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="providers" class="no-scrollbar"> */}
+        {/*   <SettingsProviders /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="models" class="no-scrollbar"> */}
+        {/*   <SettingsModels /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="agents" class="no-scrollbar"> */}
+        {/*   <SettingsAgents /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="commands" class="no-scrollbar"> */}
+        {/*   <SettingsCommands /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="mcp" class="no-scrollbar"> */}
+        {/*   <SettingsMcp /> */}
+        {/* </Tabs.Content> */}
+      </Tabs>
+    </Dialog>
+  )
+}

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

@@ -255,7 +255,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   createEffect(() => {
     params.id
-    editorRef.focus()
     if (params.id) return
     const interval = setInterval(() => {
       setStore("placeholder", (prev) => (prev + 1) % PLACEHOLDERS.length)
@@ -300,7 +299,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     event.stopPropagation()
 
     const items = Array.from(clipboardData.items)
-    const imageItems = items.filter((item) => ACCEPTED_FILE_TYPES.includes(item.type))
+    const fileItems = items.filter((item) => item.kind === "file")
+    const imageItems = fileItems.filter((item) => ACCEPTED_FILE_TYPES.includes(item.type))
 
     if (imageItems.length > 0) {
       for (const item of imageItems) {
@@ -310,7 +310,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       return
     }
 
+    if (fileItems.length > 0) {
+      showToast({
+        title: "Unsupported paste",
+        description: "Only images or PDFs can be pasted here.",
+      })
+      return
+    }
+
     const plainText = clipboardData.getData("text/plain") ?? ""
+    if (!plainText) return
     addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 
@@ -1056,7 +1065,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     let session = info()
     if (!session && isNewSession) {
-      session = await client.session.create().then((x) => x.data ?? undefined)
+      session = await client.session
+        .create()
+        .then((x) => x.data ?? undefined)
+        .catch((err) => {
+          showToast({
+            title: "Failed to create session",
+            description: errorMessage(err),
+          })
+          return undefined
+        })
       if (session) navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
     }
     if (!session) return

packages/app/src/components/session/session-header.tsx

@@ -1,21 +1,24 @@
-import { createMemo, createResource, Show } from "solid-js"
+import { createEffect, createMemo, onCleanup, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
 import { useParams } from "@solidjs/router"
 import { useLayout } from "@/context/layout"
 import { useCommand } from "@/context/command"
 // import { useServer } from "@/context/server"
 // import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { usePlatform } from "@/context/platform"
 import { useSync } from "@/context/sync"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { getFilename } from "@opencode-ai/util/path"
 import { base64Decode } from "@opencode-ai/util/encode"
-import { iife } from "@opencode-ai/util/iife"
+
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Popover } from "@opencode-ai/ui/popover"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { Keybind } from "@opencode-ai/ui/keybind"
 
 export function SessionHeader() {
   const globalSDK = useGlobalSDK()
@@ -25,6 +28,7 @@ export function SessionHeader() {
   // const server = useServer()
   // const dialog = useDialog()
   const sync = useSync()
+  const platform = usePlatform()
 
   const projectDirectory = createMemo(() => base64Decode(params.dir ?? ""))
   const project = createMemo(() => {
@@ -41,9 +45,83 @@ export function SessionHeader() {
 
   const currentSession = createMemo(() => sync.data.session.find((s) => s.id === params.id))
   const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+  const showReview = createMemo(() => !!currentSession()?.summary?.files)
+  const showShare = createMemo(() => shareEnabled() && !!currentSession())
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const view = createMemo(() => layout.view(sessionKey()))
 
+  const [state, setState] = createStore({
+    share: false,
+    unshare: false,
+    copied: false,
+    timer: undefined as number | undefined,
+  })
+  const shareUrl = createMemo(() => currentSession()?.share?.url)
+
+  createEffect(() => {
+    const url = shareUrl()
+    if (url) return
+    if (state.timer) window.clearTimeout(state.timer)
+    setState({ copied: false, timer: undefined })
+  })
+
+  onCleanup(() => {
+    if (state.timer) window.clearTimeout(state.timer)
+  })
+
+  function shareSession() {
+    const session = currentSession()
+    if (!session || state.share) return
+    setState("share", true)
+    globalSDK.client.session
+      .share({ sessionID: session.id, directory: projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to share session", error)
+      })
+      .finally(() => {
+        setState("share", false)
+      })
+  }
+
+  function unshareSession() {
+    const session = currentSession()
+    if (!session || state.unshare) return
+    setState("unshare", true)
+    globalSDK.client.session
+      .unshare({ sessionID: session.id, directory: projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to unshare session", error)
+      })
+      .finally(() => {
+        setState("unshare", false)
+      })
+  }
+
+  function copyLink() {
+    const url = shareUrl()
+    if (!url) return
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        if (state.timer) window.clearTimeout(state.timer)
+        setState("copied", true)
+        const timer = window.setTimeout(() => {
+          setState("copied", false)
+          setState("timer", undefined)
+        }, 3000)
+        setState("timer", timer)
+      })
+      .catch((error) => {
+        console.error("Failed to copy share link", error)
+      })
+  }
+
+  function viewShare() {
+    const url = shareUrl()
+    if (!url) return
+    platform.openLink(url)
+  }
+
   const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
@@ -54,21 +132,17 @@ export function SessionHeader() {
           <Portal mount={mount()}>
             <button
               type="button"
-              class="hidden md:flex w-[320px] h-8 p-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
             >
-              <div class="flex items-center gap-2">
-                <Icon name="magnifying-glass" size="normal" class="icon-base" />
-                <span class="flex-1 min-w-0 text-14-regular text-text-weak truncate">Search {name()}</span>
+              <div class="flex min-w-0 flex-1 items-center gap-2 overflow-visible">
+                <Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" />
+                <span class="flex-1 min-w-0 text-14-regular text-text-weak truncate h-4.5 flex items-center">
+                  Search {name()}
+                </span>
               </div>
 
-              <Show when={hotkey()}>
-                {(keybind) => (
-                  <span class="shrink-0 flex items-center justify-center h-5 px-2 rounded-[2px] border border-border-weak-base bg-surface-base text-12-medium text-text-weak">
-                    {keybind()}
-                  </span>
-                )}
-              </Show>
+              <Show when={hotkey()}>{(keybind) => <Keybind class="shrink-0">{keybind()}</Keybind>}</Show>
             </button>
           </Portal>
         )}
@@ -100,12 +174,14 @@ export function SessionHeader() {
               {/*   <SessionMcpIndicator /> */}
               {/* </div> */}
               <div class="flex items-center gap-1">
-                <Show when={currentSession()?.summary?.files}>
-                  <TooltipKeybind
-                    class="hidden md:block shrink-0"
-                    title="Toggle review"
-                    keybind={command.keybind("review.toggle")}
-                  >
+                <div
+                  class="hidden md:block shrink-0"
+                  classList={{
+                    "opacity-0 pointer-events-none": !showReview(),
+                  }}
+                  aria-hidden={!showReview()}
+                >
+                  <TooltipKeybind title="Toggle review" keybind={command.keybind("review.toggle")}>
                     <Button
                       variant="ghost"
                       class="group/review-toggle size-6 p-0"
@@ -130,7 +206,7 @@ export function SessionHeader() {
                       </div>
                     </Button>
                   </TooltipKeybind>
-                </Show>
+                </div>
                 <TooltipKeybind
                   class="hidden md:block shrink-0"
                   title="Toggle terminal"
@@ -161,42 +237,87 @@ export function SessionHeader() {
                   </Button>
                 </TooltipKeybind>
               </div>
-              <Show when={shareEnabled() && currentSession()}>
+              <div
+                class="flex items-center"
+                classList={{
+                  "opacity-0 pointer-events-none": !showShare(),
+                }}
+                aria-hidden={!showShare()}
+              >
                 <Popover
-                  title="Share session"
+                  title="Publish on web"
+                  description={
+                    shareUrl()
+                      ? "This session is public on the web. It is accessible to anyone with the link."
+                      : "Share session publicly on the web. It will be accessible to anyone with the link."
+                  }
                   trigger={
                     <Tooltip class="shrink-0" value="Share session">
-                      <IconButton icon="share" variant="ghost" class="" />
+                      <Button
+                        variant="secondary"
+                        classList={{ "rounded-r-none": shareUrl() !== undefined }}
+                        style={{ scale: 1 }}
+                      >
+                        Share
+                      </Button>
                     </Tooltip>
                   }
                 >
-                  {iife(() => {
-                    const [url] = createResource(
-                      () => currentSession(),
-                      async (session) => {
-                        if (!session) return
-                        let shareURL = session.share?.url
-                        if (!shareURL) {
-                          shareURL = await globalSDK.client.session
-                            .share({ sessionID: session.id, directory: projectDirectory() })
-                            .then((r) => r.data?.share?.url)
-                            .catch((e) => {
-                              console.error("Failed to share session", e)
-                              return undefined
-                            })
-                        }
-                        return shareURL
-                      },
-                      { initialValue: "" },
-                    )
-                    return (
-                      <Show when={url.latest}>
-                        {(shareUrl) => <TextField value={shareUrl()} readOnly copyable class="w-72" />}
-                      </Show>
-                    )
-                  })}
+                  <div class="flex flex-col gap-2">
+                    <Show
+                      when={shareUrl()}
+                      fallback={
+                        <div class="flex">
+                          <Button
+                            size="large"
+                            variant="primary"
+                            class="w-1/2"
+                            onClick={shareSession}
+                            disabled={state.share}
+                          >
+                            {state.share ? "Publishing..." : "Publish"}
+                          </Button>
+                        </div>
+                      }
+                    >
+                      <div class="flex flex-col gap-2 w-72">
+                        <TextField value={shareUrl() ?? ""} readOnly copyable class="w-full" />
+                        <div class="grid grid-cols-2 gap-2">
+                          <Button
+                            size="large"
+                            variant="secondary"
+                            class="w-full shadow-none border border-border-weak-base"
+                            onClick={unshareSession}
+                            disabled={state.unshare}
+                          >
+                            {state.unshare ? "Unpublishing..." : "Unpublish"}
+                          </Button>
+                          <Button
+                            size="large"
+                            variant="primary"
+                            class="w-full"
+                            onClick={viewShare}
+                            disabled={state.unshare}
+                          >
+                            View
+                          </Button>
+                        </div>
+                      </div>
+                    </Show>
+                  </div>
                 </Popover>
-              </Show>
+                <Show when={shareUrl()} fallback={<div class="size-6" aria-hidden="true" />}>
+                  <Tooltip value={state.copied ? "Copied" : "Copy link"} placement="top" gutter={8}>
+                    <IconButton
+                      icon={state.copied ? "check" : "copy"}
+                      variant="secondary"
+                      class="rounded-l-none"
+                      onClick={copyLink}
+                      disabled={state.unshare}
+                    />
+                  </Tooltip>
+                </Show>
+              </div>
             </div>
           </Portal>
         )}

packages/app/src/components/settings-agents.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js"
+
+export const SettingsAgents: Component = () => {
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">Agents</h2>
+        <p class="text-14-regular text-text-weak">Agent settings will be configurable here.</p>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-commands.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js"
+
+export const SettingsCommands: Component = () => {
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">Commands</h2>
+        <p class="text-14-regular text-text-weak">Command settings will be configurable here.</p>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-general.tsx

@@ -0,0 +1,221 @@
+import { Component, createMemo, type JSX } from "solid-js"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
+import { useSettings } from "@/context/settings"
+import { playSound, SOUND_OPTIONS } from "@/utils/sound"
+
+export const SettingsGeneral: Component = () => {
+  const theme = useTheme()
+  const settings = useSettings()
+
+  const themeOptions = createMemo(() =>
+    Object.entries(theme.themes()).map(([id, def]) => ({ id, name: def.name ?? id })),
+  )
+
+  const colorSchemeOptions: { value: ColorScheme; label: string }[] = [
+    { value: "system", label: "System setting" },
+    { value: "light", label: "Light" },
+    { value: "dark", label: "Dark" },
+  ]
+
+  const fontOptions = [
+    { value: "ibm-plex-mono", label: "IBM Plex Mono" },
+    { value: "cascadia-code", label: "Cascadia Code" },
+    { value: "fira-code", label: "Fira Code" },
+    { value: "hack", label: "Hack" },
+    { value: "inconsolata", label: "Inconsolata" },
+    { value: "intel-one-mono", label: "Intel One Mono" },
+    { value: "jetbrains-mono", label: "JetBrains Mono" },
+    { value: "meslo-lgs", label: "Meslo LGS" },
+    { value: "roboto-mono", label: "Roboto Mono" },
+    { value: "source-code-pro", label: "Source Code Pro" },
+    { value: "ubuntu-mono", label: "Ubuntu Mono" },
+  ]
+
+  const soundOptions = [...SOUND_OPTIONS]
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
+      <div class="sticky top-0 z-10 bg-background-base border-b border-border-weak-base">
+        <div class="flex flex-col gap-1 p-8 max-w-[720px]">
+          <h2 class="text-16-medium text-text-strong">General</h2>
+          <p class="text-14-regular text-text-weak">Appearance, notifications, and sound preferences.</p>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 p-8 pt-6 max-w-[720px]">
+        {/* Appearance Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">Appearance</h3>
+
+          <SettingsRow title="Appearance" description="Customise how OpenCode looks on your device">
+            <Select
+              options={colorSchemeOptions}
+              current={colorSchemeOptions.find((o) => o.value === theme.colorScheme())}
+              value={(o) => o.value}
+              label={(o) => o.label}
+              onSelect={(option) => option && theme.setColorScheme(option.value)}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow
+            title="Theme"
+            description={
+              <>
+                Customise how OpenCode is themed.{" "}
+                <a href="#" class="text-text-interactive-base">
+                  Learn more
+                </a>
+              </>
+            }
+          >
+            <Select
+              options={themeOptions()}
+              current={themeOptions().find((o) => o.id === theme.themeId())}
+              value={(o) => o.id}
+              label={(o) => o.name}
+              onSelect={(option) => {
+                if (!option) return
+                theme.setTheme(option.id)
+              }}
+              onHighlight={(option) => {
+                if (!option) return
+                theme.previewTheme(option.id)
+                return () => theme.cancelPreview()
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Font" description="Customise the mono font used in code blocks">
+            <Select
+              options={fontOptions}
+              current={fontOptions.find((o) => o.value === settings.appearance.font())}
+              value={(o) => o.value}
+              label={(o) => o.label}
+              onSelect={(option) => option && settings.appearance.setFont(option.value)}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+        </div>
+
+        {/* System notifications Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">System notifications</h3>
+
+          <SettingsRow
+            title="Agent"
+            description="Show system notification when the agent is complete or needs attention"
+          >
+            <Switch
+              checked={settings.notifications.agent()}
+              onChange={(checked) => settings.notifications.setAgent(checked)}
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Permissions" description="Show system notification when a permission is required">
+            <Switch
+              checked={settings.notifications.permissions()}
+              onChange={(checked) => settings.notifications.setPermissions(checked)}
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Errors" description="Show system notification when an error occurs">
+            <Switch
+              checked={settings.notifications.errors()}
+              onChange={(checked) => settings.notifications.setErrors(checked)}
+            />
+          </SettingsRow>
+        </div>
+
+        {/* Sound effects Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3>
+
+          <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.agent())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onHighlight={(option) => {
+                if (!option) return
+                playSound(option.src)
+              }}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setAgent(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Permissions" description="Play sound when a permission is required">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onHighlight={(option) => {
+                if (!option) return
+                playSound(option.src)
+              }}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setPermissions(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Errors" description="Play sound when an error occurs">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.errors())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onHighlight={(option) => {
+                if (!option) return
+                playSound(option.src)
+              }}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setErrors(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex-shrink-0">{props.children}</div>
+    </div>
+  )
+}

packages/app/src/components/settings-keybinds.tsx

@@ -0,0 +1,331 @@
+import { Component, For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { showToast } from "@opencode-ai/ui/toast"
+import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
+import { useSettings } from "@/context/settings"
+
+const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
+const PALETTE_ID = "command.palette"
+const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
+
+type KeybindGroup = "General" | "Session" | "Navigation" | "Model and agent" | "Terminal" | "Prompt"
+
+type KeybindMeta = {
+  title: string
+  group: KeybindGroup
+}
+
+const GROUPS: KeybindGroup[] = ["General", "Session", "Navigation", "Model and agent", "Terminal", "Prompt"]
+
+function groupFor(id: string): KeybindGroup {
+  if (id === PALETTE_ID) return "General"
+  if (id.startsWith("terminal.")) return "Terminal"
+  if (id.startsWith("model.") || id.startsWith("agent.") || id.startsWith("mcp.")) return "Model and agent"
+  if (id.startsWith("file.")) return "Navigation"
+  if (id.startsWith("prompt.")) return "Prompt"
+  if (
+    id.startsWith("session.") ||
+    id.startsWith("message.") ||
+    id.startsWith("permissions.") ||
+    id.startsWith("steps.") ||
+    id.startsWith("review.")
+  )
+    return "Session"
+
+  return "General"
+}
+
+function isModifier(key: string) {
+  return key === "Shift" || key === "Control" || key === "Alt" || key === "Meta"
+}
+
+function normalizeKey(key: string) {
+  if (key === ",") return "comma"
+  if (key === "+") return "plus"
+  if (key === " ") return "space"
+  return key.toLowerCase()
+}
+
+function recordKeybind(event: KeyboardEvent) {
+  if (isModifier(event.key)) return
+
+  const parts: string[] = []
+
+  const mod = IS_MAC ? event.metaKey : event.ctrlKey
+  if (mod) parts.push("mod")
+
+  if (IS_MAC && event.ctrlKey) parts.push("ctrl")
+  if (!IS_MAC && event.metaKey) parts.push("meta")
+  if (event.altKey) parts.push("alt")
+  if (event.shiftKey) parts.push("shift")
+
+  const key = normalizeKey(event.key)
+  if (!key) return
+  parts.push(key)
+
+  return parts.join("+")
+}
+
+function signatures(config: string | undefined) {
+  if (!config) return []
+  const sigs: string[] = []
+
+  for (const kb of parseKeybind(config)) {
+    const parts: string[] = []
+    if (kb.ctrl) parts.push("ctrl")
+    if (kb.alt) parts.push("alt")
+    if (kb.shift) parts.push("shift")
+    if (kb.meta) parts.push("meta")
+    if (kb.key) parts.push(kb.key)
+    if (parts.length === 0) continue
+    sigs.push(parts.join("+"))
+  }
+
+  return sigs
+}
+
+export const SettingsKeybinds: Component = () => {
+  const command = useCommand()
+  const settings = useSettings()
+
+  const [active, setActive] = createSignal<string | null>(null)
+
+  const stop = () => {
+    if (!active()) return
+    setActive(null)
+    command.keybinds(true)
+  }
+
+  const start = (id: string) => {
+    if (active() === id) {
+      stop()
+      return
+    }
+
+    if (active()) stop()
+
+    setActive(id)
+    command.keybinds(false)
+  }
+
+  const hasOverrides = createMemo(() => {
+    const keybinds = settings.current.keybinds as Record<string, string | undefined> | undefined
+    if (!keybinds) return false
+    return Object.values(keybinds).some((x) => typeof x === "string")
+  })
+
+  const resetAll = () => {
+    stop()
+    settings.keybinds.resetAll()
+    showToast({ title: "Shortcuts reset", description: "Keyboard shortcuts have been reset to defaults." })
+  }
+
+  const list = createMemo(() => {
+    const out = new Map<string, KeybindMeta>()
+    out.set(PALETTE_ID, { title: "Command palette", group: "General" })
+
+    for (const opt of command.catalog) {
+      if (opt.id.startsWith("suggested.")) continue
+      out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
+    }
+
+    for (const opt of command.options) {
+      if (opt.id.startsWith("suggested.")) continue
+      out.set(opt.id, { title: opt.title, group: groupFor(opt.id) })
+    }
+
+    const keybinds = settings.current.keybinds as Record<string, string | undefined> | undefined
+    if (keybinds) {
+      for (const [id, value] of Object.entries(keybinds)) {
+        if (typeof value !== "string") continue
+        if (out.has(id)) continue
+        out.set(id, { title: id, group: groupFor(id) })
+      }
+    }
+
+    return out
+  })
+
+  const title = (id: string) => list().get(id)?.title ?? ""
+
+  const grouped = createMemo(() => {
+    const map = list()
+    const out = new Map<KeybindGroup, string[]>()
+
+    for (const group of GROUPS) out.set(group, [])
+
+    for (const [id, item] of map) {
+      const ids = out.get(item.group)
+      if (!ids) continue
+      ids.push(id)
+    }
+
+    for (const group of GROUPS) {
+      const ids = out.get(group)
+      if (!ids) continue
+
+      ids.sort((a, b) => {
+        const at = map.get(a)?.title ?? ""
+        const bt = map.get(b)?.title ?? ""
+        return at.localeCompare(bt)
+      })
+    }
+
+    return out
+  })
+
+  const used = createMemo(() => {
+    const map = new Map<string, { id: string; title: string }[]>()
+
+    const add = (key: string, value: { id: string; title: string }) => {
+      const list = map.get(key)
+      if (!list) {
+        map.set(key, [value])
+        return
+      }
+      list.push(value)
+    }
+
+    const palette = settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND
+    for (const sig of signatures(palette)) {
+      add(sig, { id: PALETTE_ID, title: "Command palette" })
+    }
+
+    const valueFor = (id: string) => {
+      const custom = settings.keybinds.get(id)
+      if (typeof custom === "string") return custom
+
+      const live = command.options.find((x) => x.id === id)
+      if (live?.keybind) return live.keybind
+
+      const meta = command.catalog.find((x) => x.id === id)
+      return meta?.keybind
+    }
+
+    for (const id of list().keys()) {
+      if (id === PALETTE_ID) continue
+      for (const sig of signatures(valueFor(id))) {
+        add(sig, { id, title: title(id) })
+      }
+    }
+
+    return map
+  })
+
+  const setKeybind = (id: string, keybind: string) => {
+    settings.keybinds.set(id, keybind)
+  }
+
+  onMount(() => {
+    const handle = (event: KeyboardEvent) => {
+      const id = active()
+      if (!id) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+
+      if (event.key === "Escape") {
+        stop()
+        return
+      }
+
+      const clear =
+        (event.key === "Backspace" || event.key === "Delete") &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.shiftKey
+      if (clear) {
+        setKeybind(id, "none")
+        stop()
+        return
+      }
+
+      const next = recordKeybind(event)
+      if (!next) return
+
+      const map = used()
+      const conflicts = new Map<string, string>()
+
+      for (const sig of signatures(next)) {
+        const list = map.get(sig) ?? []
+        for (const item of list) {
+          if (item.id === id) continue
+          conflicts.set(item.id, item.title)
+        }
+      }
+
+      if (conflicts.size > 0) {
+        showToast({
+          title: "Shortcut already in use",
+          description: `${formatKeybind(next)} is already assigned to ${[...conflicts.values()].join(", ")}.`,
+        })
+        return
+      }
+
+      setKeybind(id, next)
+      stop()
+    }
+
+    document.addEventListener("keydown", handle, true)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handle, true)
+    })
+  })
+
+  onCleanup(() => {
+    if (active()) command.keybinds(true)
+  })
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
+      <div class="sticky top-0 z-10 bg-background-base border-b border-border-weak-base">
+        <div class="flex items-start justify-between gap-4 p-8 max-w-[720px]">
+          <div class="flex flex-col gap-1">
+            <h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>
+            <p class="text-14-regular text-text-weak">Click a shortcut to edit. Press Esc to cancel.</p>
+          </div>
+          <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
+            Reset to defaults
+          </Button>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]">
+        <For each={GROUPS}>
+          {(group) => (
+            <Show when={(grouped().get(group) ?? []).length > 0}>
+              <div class="flex flex-col gap-2">
+                <h3 class="text-14-medium text-text-strong">{group}</h3>
+                <div class="border border-border-weak-base rounded-lg overflow-hidden">
+                  <For each={grouped().get(group) ?? []}>
+                    {(id) => (
+                      <div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
+                        <span class="text-14-regular text-text-strong">{title(id)}</span>
+                        <button
+                          type="button"
+                          classList={{
+                            "h-8 px-3 rounded-md text-12-regular border border-border-base": true,
+                            "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
+                              active() !== id,
+                            "bg-surface-raised-stronger-non-alpha text-text-strong": active() === id,
+                          }}
+                          onClick={() => start(id)}
+                        >
+                          <Show when={active() === id} fallback={command.keybind(id) || "Unassigned"}>
+                            Press keys
+                          </Show>
+                        </button>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </Show>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-mcp.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js"
+
+export const SettingsMcp: Component = () => {
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">MCP</h2>
+        <p class="text-14-regular text-text-weak">MCP settings will be configurable here.</p>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-models.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js"
+
+export const SettingsModels: Component = () => {
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">Models</h2>
+        <p class="text-14-regular text-text-weak">Model settings will be configurable here.</p>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-permissions.tsx

@@ -0,0 +1,153 @@
+import { Select } from "@opencode-ai/ui/select"
+import { showToast } from "@opencode-ai/ui/toast"
+import { Component, For, createMemo, type JSX } from "solid-js"
+import { useGlobalSync } from "@/context/global-sync"
+
+type PermissionAction = "allow" | "ask" | "deny"
+
+type PermissionObject = Record<string, PermissionAction>
+type PermissionValue = PermissionAction | PermissionObject | string[] | undefined
+type PermissionMap = Record<string, PermissionValue>
+
+type PermissionItem = {
+  id: string
+  title: string
+  description: string
+}
+
+const ACTIONS: Array<{ value: PermissionAction; label: string }> = [
+  { value: "allow", label: "Allow" },
+  { value: "ask", label: "Ask" },
+  { value: "deny", label: "Deny" },
+]
+
+const ITEMS: PermissionItem[] = [
+  { id: "read", title: "Read", description: "Reading a file (matches the file path)" },
+  { id: "edit", title: "Edit", description: "Modify files, including edits, writes, patches, and multi-edits" },
+  { id: "glob", title: "Glob", description: "Match files using glob patterns" },
+  { id: "grep", title: "Grep", description: "Search file contents using regular expressions" },
+  { id: "list", title: "List", description: "List files within a directory" },
+  { id: "bash", title: "Bash", description: "Run shell commands" },
+  { id: "task", title: "Task", description: "Launch sub-agents" },
+  { id: "skill", title: "Skill", description: "Load a skill by name" },
+  { id: "lsp", title: "LSP", description: "Run language server queries" },
+  { id: "todoread", title: "Todo Read", description: "Read the todo list" },
+  { id: "todowrite", title: "Todo Write", description: "Update the todo list" },
+  { id: "webfetch", title: "Web Fetch", description: "Fetch content from a URL" },
+  { id: "websearch", title: "Web Search", description: "Search the web" },
+  { id: "codesearch", title: "Code Search", description: "Search code on the web" },
+  { id: "external_directory", title: "External Directory", description: "Access files outside the project directory" },
+  { id: "doom_loop", title: "Doom Loop", description: "Detect repeated tool calls with identical input" },
+]
+
+const VALID_ACTIONS = new Set<PermissionAction>(["allow", "ask", "deny"])
+
+function toMap(value: unknown): PermissionMap {
+  if (value && typeof value === "object" && !Array.isArray(value)) return value as PermissionMap
+
+  const action = getAction(value)
+  if (action) return { "*": action }
+
+  return {}
+}
+
+function getAction(value: unknown): PermissionAction | undefined {
+  if (typeof value === "string" && VALID_ACTIONS.has(value as PermissionAction)) return value as PermissionAction
+  return
+}
+
+function getRuleDefault(value: unknown): PermissionAction | undefined {
+  const action = getAction(value)
+  if (action) return action
+
+  if (!value || typeof value !== "object" || Array.isArray(value)) return
+
+  return getAction((value as Record<string, unknown>)["*"])
+}
+
+export const SettingsPermissions: Component = () => {
+  const globalSync = useGlobalSync()
+
+  const permission = createMemo(() => {
+    return toMap(globalSync.data.config.permission)
+  })
+
+  const actionFor = (id: string): PermissionAction => {
+    const value = permission()[id]
+    const direct = getRuleDefault(value)
+    if (direct) return direct
+
+    const wildcard = getRuleDefault(permission()["*"])
+    if (wildcard) return wildcard
+
+    return "allow"
+  }
+
+  const setPermission = async (id: string, action: PermissionAction) => {
+    const before = globalSync.data.config.permission
+    const map = toMap(before)
+    const existing = map[id]
+
+    const nextValue =
+      existing && typeof existing === "object" && !Array.isArray(existing) ? { ...existing, "*": action } : action
+
+    globalSync.set("config", "permission", { ...map, [id]: nextValue })
+    globalSync.updateConfig({ permission: { [id]: nextValue } }).catch((err: unknown) => {
+      globalSync.set("config", "permission", before)
+      const message = err instanceof Error ? err.message : String(err)
+      showToast({ title: "Failed to update permissions", description: message })
+    })
+  }
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
+      <div class="sticky top-0 z-10 bg-background-base border-b border-border-weak-base">
+        <div class="flex flex-col gap-1 p-8 max-w-[720px]">
+          <h2 class="text-16-medium text-text-strong">Permissions</h2>
+          <p class="text-14-regular text-text-weak">Control what tools the server can use by default.</p>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]">
+        <div class="flex flex-col gap-2">
+          <h3 class="text-14-medium text-text-strong">Appearance</h3>
+          <div class="border border-border-weak-base rounded-lg overflow-hidden">
+            <For each={ITEMS}>
+              {(item) => (
+                <SettingsRow title={item.title} description={item.description}>
+                  <Select
+                    options={ACTIONS}
+                    current={ACTIONS.find((o) => o.value === actionFor(item.id))}
+                    value={(o) => o.value}
+                    label={(o) => o.label}
+                    onSelect={(option) => option && setPermission(item.id, option.value)}
+                    variant="secondary"
+                    size="small"
+                  />
+                </SettingsRow>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string
+  description: string
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex-shrink-0">{props.children}</div>
+    </div>
+  )
+}

packages/app/src/components/settings-providers.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js"
+
+export const SettingsProviders: Component = () => {
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">Providers</h2>
+        <p class="text-14-regular text-text-weak">Provider settings will be configurable here.</p>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/terminal.tsx

@@ -1,6 +1,7 @@
 import type { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
 import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
 import { useSDK } from "@/context/sdk"
+import { monoFontFamily, useSettings } from "@/context/settings"
 import { SerializeAddon } from "@/addons/serialize"
 import { LocalPTY } from "@/context/terminal"
 import { resolveThemeVariant, useTheme, withAlpha, type HexColor } from "@opencode-ai/ui/theme"
@@ -36,6 +37,7 @@ const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
 
 export const Terminal = (props: TerminalProps) => {
   const sdk = useSDK()
+  const settings = useSettings()
   const theme = useTheme()
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnectError"])
@@ -82,6 +84,14 @@ export const Terminal = (props: TerminalProps) => {
     setOption("theme", colors)
   })
 
+  createEffect(() => {
+    const font = monoFontFamily(settings.appearance.font())
+    if (!term) return
+    const setOption = (term as unknown as { setOption?: (key: string, value: string) => void }).setOption
+    if (!setOption) return
+    setOption("fontFamily", font)
+  })
+
   const focusTerminal = () => {
     const t = term
     if (!t) return
@@ -112,7 +122,7 @@ export const Terminal = (props: TerminalProps) => {
       cursorBlink: true,
       cursorStyle: "bar",
       fontSize: 14,
-      fontFamily: "IBM Plex Mono, monospace",
+      fontFamily: monoFontFamily(settings.appearance.font()),
       allowTransparency: true,
       theme: terminalColors(),
       scrollback: 10_000,

packages/app/src/components/titlebar.tsx

@@ -17,6 +17,7 @@ export function Titlebar() {
   const reserve = createMemo(
     () => platform.platform === "desktop" && (platform.os === "windows" || platform.os === "linux"),
   )
+  const web = createMemo(() => platform.platform === "web")
 
   const getWin = () => {
     if (platform.platform !== "desktop") return
@@ -80,15 +81,17 @@ export function Titlebar() {
       >
         <Show when={mac()}>
           <div class="w-[72px] h-full shrink-0" data-tauri-drag-region />
+          <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} />
+          </div>
+        </Show>
+        <Show when={!mac()}>
+          <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+            <IconButton icon="menu" variant="ghost" class="size-8 rounded-md" onClick={layout.mobileSidebar.toggle} />
+          </div>
         </Show>
-        <IconButton
-          icon="menu"
-          variant="ghost"
-          class="xl:hidden size-8 rounded-md"
-          onClick={layout.mobileSidebar.toggle}
-        />
         <TooltipKeybind
-          class="hidden xl:flex shrink-0 ml-14"
+          class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0"}
           placement="bottom"
           title="Toggle sidebar"
           keybind={command.keybind("sidebar.toggle")}

packages/app/src/context/command.tsx

@@ -1,11 +1,28 @@
-import { createMemo, createSignal, onCleanup, onMount, Show, type Accessor } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup, onMount, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
+import { useSettings } from "@/context/settings"
+import { Persist, persisted } from "@/utils/persist"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 
+const PALETTE_ID = "command.palette"
+const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
+const SUGGESTED_PREFIX = "suggested."
+
+function actionId(id: string) {
+  if (!id.startsWith(SUGGESTED_PREFIX)) return id
+  return id.slice(SUGGESTED_PREFIX.length)
+}
+
+function normalizeKey(key: string) {
+  if (key === ",") return "comma"
+  if (key === "+") return "plus"
+  if (key === " ") return "space"
+  return key.toLowerCase()
+}
+
 export type KeybindConfig = string
 
 export interface Keybind {
@@ -29,6 +46,14 @@ export interface CommandOption {
   onHighlight?: () => (() => void) | void
 }
 
+export type CommandCatalogItem = {
+  title: string
+  description?: string
+  category?: string
+  keybind?: KeybindConfig
+  slash?: string
+}
+
 export function parseKeybind(config: string): Keybind[] {
   if (!config || config === "none") return []
 
@@ -75,7 +100,7 @@ export function parseKeybind(config: string): Keybind[] {
 }
 
 export function matchKeybind(keybinds: Keybind[], event: KeyboardEvent): boolean {
-  const eventKey = event.key.toLowerCase()
+  const eventKey = normalizeKey(event.key)
 
   for (const kb of keybinds) {
     const keyMatch = kb.key === eventKey
@@ -107,76 +132,44 @@ export function formatKeybind(config: string): string {
   if (kb.meta) parts.push(IS_MAC ? "⌘" : "Meta")
 
   if (kb.key) {
-    const displayKey = kb.key.length === 1 ? kb.key.toUpperCase() : kb.key.charAt(0).toUpperCase() + kb.key.slice(1)
+    const keys: Record<string, string> = {
+      arrowup: "↑",
+      arrowdown: "↓",
+      arrowleft: "←",
+      arrowright: "→",
+      comma: ",",
+      plus: "+",
+      space: "Space",
+    }
+    const key = kb.key.toLowerCase()
+    const displayKey = keys[key] ?? (key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1))
     parts.push(displayKey)
   }
 
   return IS_MAC ? parts.join("") : parts.join("+")
 }
 
-function DialogCommand(props: { options: CommandOption[] }) {
-  const dialog = useDialog()
-  let cleanup: (() => void) | void
-  let committed = false
-
-  const handleMove = (option: CommandOption | undefined) => {
-    cleanup?.()
-    cleanup = option?.onHighlight?.()
-  }
-
-  const handleSelect = (option: CommandOption | undefined) => {
-    if (option) {
-      committed = true
-      cleanup = undefined
-      dialog.close()
-      option.onSelect?.("palette")
-    }
-  }
-
-  onCleanup(() => {
-    if (!committed) {
-      cleanup?.()
-    }
-  })
-
-  return (
-    <Dialog title="Commands">
-      <List
-        search={{ placeholder: "Search commands", autofocus: true }}
-        emptyMessage="No commands found"
-        items={() => props.options.filter((x) => !x.id.startsWith("suggested.") || !x.disabled)}
-        key={(x) => x?.id}
-        filterKeys={["title", "description", "category"]}
-        groupBy={(x) => x.category ?? ""}
-        onMove={handleMove}
-        onSelect={handleSelect}
-      >
-        {(option) => (
-          <div class="w-full flex items-center justify-between gap-4">
-            <div class="flex items-center gap-2 min-w-0">
-              <span class="text-14-regular text-text-strong whitespace-nowrap">{option.title}</span>
-              <Show when={option.description}>
-                <span class="text-14-regular text-text-weak truncate">{option.description}</span>
-              </Show>
-            </div>
-            <Show when={option.keybind}>
-              <span class="text-12-regular text-text-subtle shrink-0">{formatKeybind(option.keybind!)}</span>
-            </Show>
-          </div>
-        )}
-      </List>
-    </Dialog>
-  )
-}
-
 export const { use: useCommand, provider: CommandProvider } = createSimpleContext({
   name: "Command",
   init: () => {
+    const dialog = useDialog()
+    const settings = useSettings()
     const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
     const [suspendCount, setSuspendCount] = createSignal(0)
-    const dialog = useDialog()
 
-    const options = createMemo(() => {
+    const [catalog, setCatalog, _, catalogReady] = persisted(
+      Persist.global("command.catalog.v1"),
+      createStore<Record<string, CommandCatalogItem>>({}),
+    )
+
+    const bind = (id: string, def: KeybindConfig | undefined) => {
+      const custom = settings.keybinds.get(actionId(id))
+      const config = custom ?? def
+      if (!config || config === "none") return
+      return config
+    }
+
+    const registered = createMemo(() => {
       const seen = new Set<string>()
       const all: CommandOption[] = []
 
@@ -188,30 +181,63 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
         }
       }
 
-      const suggested = all.filter((x) => x.suggested && !x.disabled)
+      return all
+    })
+
+    createEffect(() => {
+      if (!catalogReady()) return
+
+      for (const opt of registered()) {
+        const id = actionId(opt.id)
+        setCatalog(id, {
+          title: opt.title,
+          description: opt.description,
+          category: opt.category,
+          keybind: opt.keybind,
+          slash: opt.slash,
+        })
+      }
+    })
+
+    const catalogOptions = createMemo(() => Object.entries(catalog).map(([id, meta]) => ({ id, ...meta })))
+
+    const options = createMemo(() => {
+      const resolved = registered().map((opt) => ({
+        ...opt,
+        keybind: bind(opt.id, opt.keybind),
+      }))
+
+      const suggested = resolved.filter((x) => x.suggested && !x.disabled)
 
       return [
         ...suggested.map((x) => ({
           ...x,
-          id: "suggested." + x.id,
+          id: SUGGESTED_PREFIX + x.id,
           category: "Suggested",
         })),
-        ...all,
+        ...resolved,
       ]
     })
 
     const suspended = () => suspendCount() > 0
 
-    const showPalette = () => {
-      if (!dialog.active) {
-        dialog.show(() => <DialogCommand options={options().filter((x) => !x.disabled)} />)
+    const run = (id: string, source?: "palette" | "keybind" | "slash") => {
+      for (const option of options()) {
+        if (option.id === id || option.id === "suggested." + id) {
+          option.onSelect?.(source)
+          return
+        }
       }
     }
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (suspended()) return
+    const showPalette = () => {
+      run("file.open", "palette")
+    }
 
-      const paletteKeybinds = parseKeybind("mod+shift+p")
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (suspended() || dialog.active) return
+
+      const paletteKeybinds = parseKeybind(settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND)
       if (matchKeybind(paletteKeybinds, event)) {
         event.preventDefault()
         showPalette()
@@ -248,23 +274,30 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
         })
       },
       trigger(id: string, source?: "palette" | "keybind" | "slash") {
-        for (const option of options()) {
-          if (option.id === id || option.id === "suggested." + id) {
-            option.onSelect?.(source)
-            return
-          }
-        }
+        run(id, source)
       },
       keybind(id: string) {
-        const option = options().find((x) => x.id === id || x.id === "suggested." + id)
-        if (!option?.keybind) return ""
-        return formatKeybind(option.keybind)
+        if (id === PALETTE_ID) {
+          return formatKeybind(settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND)
+        }
+
+        const base = actionId(id)
+        const option = options().find((x) => actionId(x.id) === base)
+        if (option?.keybind) return formatKeybind(option.keybind)
+
+        const meta = catalog[base]
+        const config = bind(base, meta?.keybind)
+        if (!config) return ""
+        return formatKeybind(config)
       },
       show: showPalette,
       keybinds(enabled: boolean) {
         setSuspendCount((count) => count + (enabled ? -1 : 1))
       },
       suspended,
+      get catalog() {
+        return catalogOptions()
+      },
       get options() {
         return options()
       },

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

@@ -19,15 +19,29 @@ import {
   type QuestionRequest,
   createOpencodeClient,
 } from "@opencode-ai/sdk/v2/client"
-import { createStore, produce, reconcile } from "solid-js/store"
+import { createStore, produce, reconcile, type SetStoreFunction, type Store } from "solid-js/store"
 import { Binary } from "@opencode-ai/util/binary"
 import { retry } from "@opencode-ai/util/retry"
 import { useGlobalSDK } from "./global-sdk"
 import { ErrorPage, type InitError } from "../pages/error"
-import { batch, createContext, useContext, onCleanup, onMount, type ParentProps, Switch, Match } from "solid-js"
+import {
+  batch,
+  createContext,
+  createEffect,
+  getOwner,
+  runWithOwner,
+  useContext,
+  onCleanup,
+  onMount,
+  type Accessor,
+  type ParentProps,
+  Switch,
+  Match,
+} from "solid-js"
 import { showToast } from "@opencode-ai/ui/toast"
 import { getFilename } from "@opencode-ai/util/path"
 import { usePlatform } from "./platform"
+import { Persist, persisted } from "@/utils/persist"
 
 type State = {
   status: "loading" | "partial" | "complete"
@@ -68,9 +82,22 @@ type State = {
   }
 }
 
+type VcsCache = {
+  store: Store<{ value: VcsInfo | undefined }>
+  setStore: SetStoreFunction<{ value: VcsInfo | undefined }>
+  ready: Accessor<boolean>
+}
+
+type ChildOptions = {
+  bootstrap?: boolean
+}
+
 function createGlobalSync() {
   const globalSDK = useGlobalSDK()
   const platform = usePlatform()
+  const owner = getOwner()
+  if (!owner) throw new Error("GlobalSync must be created within owner")
+  const vcsCache = new Map<string, VcsCache>()
   const [globalStore, setGlobalStore] = createStore<{
     ready: boolean
     error?: InitError
@@ -78,50 +105,98 @@ function createGlobalSync() {
     project: Project[]
     provider: ProviderListResponse
     provider_auth: ProviderAuthResponse
+    config: Config
+    reload: undefined | "pending" | "complete"
   }>({
     ready: false,
     path: { state: "", config: "", worktree: "", directory: "", home: "" },
     project: [],
     provider: { all: [], connected: [], default: {} },
     provider_auth: {},
+    config: {},
+    reload: undefined,
+  })
+  let bootstrapQueue: string[] = []
+
+  createEffect(async () => {
+    if (globalStore.reload !== "complete") return
+    if (bootstrapQueue.length) {
+      for (const directory of bootstrapQueue) {
+        bootstrapInstance(directory)
+      }
+      bootstrap()
+    }
+    bootstrapQueue = []
+    setGlobalStore("reload", undefined)
   })
 
-  const children: Record<string, ReturnType<typeof createStore<State>>> = {}
-  function child(directory: string) {
+  const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
+  const booting = new Map<string, Promise<void>>()
+  const sessionLoads = new Map<string, Promise<void>>()
+  const sessionMeta = new Map<string, { limit: number }>()
+
+  function ensureChild(directory: string) {
     if (!directory) console.error("No directory provided")
     if (!children[directory]) {
-      children[directory] = createStore<State>({
-        project: "",
-        provider: { all: [], connected: [], default: {} },
-        config: {},
-        path: { state: "", config: "", worktree: "", directory: "", home: "" },
-        status: "loading" as const,
-        agent: [],
-        command: [],
-        session: [],
-        sessionTotal: 0,
-        session_status: {},
-        session_diff: {},
-        todo: {},
-        permission: {},
-        question: {},
-        mcp: {},
-        lsp: [],
-        vcs: undefined,
-        limit: 5,
-        message: {},
-        part: {},
-      })
-      bootstrapInstance(directory)
+      const cache = runWithOwner(owner, () =>
+        persisted(
+          Persist.workspace(directory, "vcs", ["vcs.v1"]),
+          createStore({ value: undefined as VcsInfo | undefined }),
+        ),
+      )
+      if (!cache) throw new Error("Failed to create persisted cache")
+      vcsCache.set(directory, { store: cache[0], setStore: cache[1], ready: cache[3] })
+
+      const init = () => {
+        children[directory] = createStore<State>({
+          project: "",
+          provider: { all: [], connected: [], default: {} },
+          config: {},
+          path: { state: "", config: "", worktree: "", directory: "", home: "" },
+          status: "loading" as const,
+          agent: [],
+          command: [],
+          session: [],
+          sessionTotal: 0,
+          session_status: {},
+          session_diff: {},
+          todo: {},
+          permission: {},
+          question: {},
+          mcp: {},
+          lsp: [],
+          vcs: cache[0].value,
+          limit: 5,
+          message: {},
+          part: {},
+        })
+      }
+
+      runWithOwner(owner, init)
     }
-    return children[directory]
+    const childStore = children[directory]
+    if (!childStore) throw new Error("Failed to create store")
+    return childStore
+  }
+
+  function child(directory: string, options: ChildOptions = {}) {
+    const childStore = ensureChild(directory)
+    const shouldBootstrap = options.bootstrap ?? true
+    if (shouldBootstrap && childStore[0].status === "loading") {
+      void bootstrapInstance(directory)
+    }
+    return childStore
   }
 
   async function loadSessions(directory: string) {
-    const [store, setStore] = child(directory)
-    const limit = store.limit
+    const pending = sessionLoads.get(directory)
+    if (pending) return pending
 
-    return globalSDK.client.session
+    const [store, setStore] = child(directory, { bootstrap: false })
+    const meta = sessionMeta.get(directory)
+    if (meta && meta.limit >= store.limit) return
+
+    const promise = globalSDK.client.session
       .list({ directory, roots: true })
       .then((x) => {
         const nonArchived = (x.data ?? [])
@@ -130,9 +205,15 @@ function createGlobalSync() {
           .slice()
           .sort((a, b) => a.id.localeCompare(b.id))
 
+        // Read the current limit at resolve-time so callers that bump the limit while
+        // a request is in-flight still get the expanded result.
+        const limit = store.limit
+
         const sandboxWorkspace = globalStore.project.some((p) => (p.sandboxes ?? []).includes(directory))
         if (sandboxWorkspace) {
+          setStore("sessionTotal", nonArchived.length)
           setStore("session", reconcile(nonArchived, { key: "id" }))
+          sessionMeta.set(directory, { limit })
           return
         }
 
@@ -146,123 +227,164 @@ function createGlobalSync() {
         // Store total session count (used for "load more" pagination)
         setStore("sessionTotal", nonArchived.length)
         setStore("session", reconcile(sessions, { key: "id" }))
+        sessionMeta.set(directory, { limit })
       })
       .catch((err) => {
         console.error("Failed to load sessions", err)
         const project = getFilename(directory)
         showToast({ title: `Failed to load sessions for ${project}`, description: err.message })
       })
+
+    sessionLoads.set(directory, promise)
+    promise.finally(() => {
+      sessionLoads.delete(directory)
+    })
+    return promise
   }
 
   async function bootstrapInstance(directory: string) {
     if (!directory) return
-    const [store, setStore] = child(directory)
-    const sdk = createOpencodeClient({
-      baseUrl: globalSDK.url,
-      fetch: platform.fetch,
-      directory,
-      throwOnError: true,
-    })
+    const pending = booting.get(directory)
+    if (pending) return pending
 
-    const blockingRequests = {
-      project: () => sdk.project.current().then((x) => setStore("project", x.data!.id)),
-      provider: () =>
-        sdk.provider.list().then((x) => {
-          const data = x.data!
-          setStore("provider", {
-            ...data,
-            all: data.all.map((provider) => ({
-              ...provider,
-              models: Object.fromEntries(
-                Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated"),
-              ),
-            })),
+    const promise = (async () => {
+      const [store, setStore] = ensureChild(directory)
+      const cache = vcsCache.get(directory)
+      if (!cache) return
+      const sdk = createOpencodeClient({
+        baseUrl: globalSDK.url,
+        fetch: platform.fetch,
+        directory,
+        throwOnError: true,
+      })
+
+      setStore("status", "loading")
+
+      createEffect(() => {
+        if (!cache.ready()) return
+        const cached = cache.store.value
+        if (!cached?.branch) return
+        setStore("vcs", (value) => value ?? cached)
+      })
+
+      const blockingRequests = {
+        project: () => sdk.project.current().then((x) => setStore("project", x.data!.id)),
+        provider: () =>
+          sdk.provider.list().then((x) => {
+            const data = x.data!
+            setStore("provider", {
+              ...data,
+              all: data.all.map((provider) => ({
+                ...provider,
+                models: Object.fromEntries(
+                  Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated"),
+                ),
+              })),
+            })
+          }),
+        agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
+        config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
+      }
+
+      try {
+        await Promise.all(Object.values(blockingRequests).map((p) => retry(p)))
+      } catch (err) {
+        console.error("Failed to bootstrap instance", err)
+        const project = getFilename(directory)
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: `Failed to reload ${project}`, description: message })
+        setStore("status", "partial")
+        return
+      }
+
+      if (store.status !== "complete") setStore("status", "partial")
+
+      Promise.all([
+        sdk.path.get().then((x) => setStore("path", x.data!)),
+        sdk.command.list().then((x) => setStore("command", x.data ?? [])),
+        sdk.session.status().then((x) => setStore("session_status", x.data!)),
+        loadSessions(directory),
+        sdk.mcp.status().then((x) => setStore("mcp", x.data!)),
+        sdk.lsp.status().then((x) => setStore("lsp", x.data!)),
+        sdk.vcs.get().then((x) => {
+          const next = x.data ?? store.vcs
+          setStore("vcs", next)
+          if (next?.branch) cache.setStore("value", next)
+        }),
+        sdk.permission.list().then((x) => {
+          const grouped: Record<string, PermissionRequest[]> = {}
+          for (const perm of x.data ?? []) {
+            if (!perm?.id || !perm.sessionID) continue
+            const existing = grouped[perm.sessionID]
+            if (existing) {
+              existing.push(perm)
+              continue
+            }
+            grouped[perm.sessionID] = [perm]
+          }
+
+          batch(() => {
+            for (const sessionID of Object.keys(store.permission)) {
+              if (grouped[sessionID]) continue
+              setStore("permission", sessionID, [])
+            }
+            for (const [sessionID, permissions] of Object.entries(grouped)) {
+              setStore(
+                "permission",
+                sessionID,
+                reconcile(
+                  permissions
+                    .filter((p) => !!p?.id)
+                    .slice()
+                    .sort((a, b) => a.id.localeCompare(b.id)),
+                  { key: "id" },
+                ),
+              )
+            }
           })
         }),
-      agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
-      config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
-    }
-    await Promise.all(Object.values(blockingRequests).map((p) => retry(p).catch((e) => setGlobalStore("error", e))))
-      .then(() => {
-        if (store.status !== "complete") setStore("status", "partial")
-        // non-blocking
-        Promise.all([
-          sdk.path.get().then((x) => setStore("path", x.data!)),
-          sdk.command.list().then((x) => setStore("command", x.data ?? [])),
-          sdk.session.status().then((x) => setStore("session_status", x.data!)),
-          loadSessions(directory),
-          sdk.mcp.status().then((x) => setStore("mcp", x.data!)),
-          sdk.lsp.status().then((x) => setStore("lsp", x.data!)),
-          sdk.vcs.get().then((x) => setStore("vcs", x.data)),
-          sdk.permission.list().then((x) => {
-            const grouped: Record<string, PermissionRequest[]> = {}
-            for (const perm of x.data ?? []) {
-              if (!perm?.id || !perm.sessionID) continue
-              const existing = grouped[perm.sessionID]
-              if (existing) {
-                existing.push(perm)
-                continue
-              }
-              grouped[perm.sessionID] = [perm]
+        sdk.question.list().then((x) => {
+          const grouped: Record<string, QuestionRequest[]> = {}
+          for (const question of x.data ?? []) {
+            if (!question?.id || !question.sessionID) continue
+            const existing = grouped[question.sessionID]
+            if (existing) {
+              existing.push(question)
+              continue
             }
+            grouped[question.sessionID] = [question]
+          }
 
-            batch(() => {
-              for (const sessionID of Object.keys(store.permission)) {
-                if (grouped[sessionID]) continue
-                setStore("permission", sessionID, [])
-              }
-              for (const [sessionID, permissions] of Object.entries(grouped)) {
-                setStore(
-                  "permission",
-                  sessionID,
-                  reconcile(
-                    permissions
-                      .filter((p) => !!p?.id)
-                      .slice()
-                      .sort((a, b) => a.id.localeCompare(b.id)),
-                    { key: "id" },
-                  ),
-                )
-              }
-            })
-          }),
-          sdk.question.list().then((x) => {
-            const grouped: Record<string, QuestionRequest[]> = {}
-            for (const question of x.data ?? []) {
-              if (!question?.id || !question.sessionID) continue
-              const existing = grouped[question.sessionID]
-              if (existing) {
-                existing.push(question)
-                continue
-              }
-              grouped[question.sessionID] = [question]
+          batch(() => {
+            for (const sessionID of Object.keys(store.question)) {
+              if (grouped[sessionID]) continue
+              setStore("question", sessionID, [])
             }
-
-            batch(() => {
-              for (const sessionID of Object.keys(store.question)) {
-                if (grouped[sessionID]) continue
-                setStore("question", sessionID, [])
-              }
-              for (const [sessionID, questions] of Object.entries(grouped)) {
-                setStore(
-                  "question",
-                  sessionID,
-                  reconcile(
-                    questions
-                      .filter((q) => !!q?.id)
-                      .slice()
-                      .sort((a, b) => a.id.localeCompare(b.id)),
-                    { key: "id" },
-                  ),
-                )
-              }
-            })
-          }),
-        ]).then(() => {
-          setStore("status", "complete")
-        })
+            for (const [sessionID, questions] of Object.entries(grouped)) {
+              setStore(
+                "question",
+                sessionID,
+                reconcile(
+                  questions
+                    .filter((q) => !!q?.id)
+                    .slice()
+                    .sort((a, b) => a.id.localeCompare(b.id)),
+                  { key: "id" },
+                ),
+              )
+            }
+          })
+        }),
+      ]).then(() => {
+        setStore("status", "complete")
       })
-      .catch((e) => setGlobalStore("error", e))
+    })()
+
+    booting.set(directory, promise)
+    promise.finally(() => {
+      booting.delete(directory)
+    })
+    return promise
   }
 
   const unsub = globalSDK.event.listen((e) => {
@@ -272,6 +394,7 @@ function createGlobalSync() {
     if (directory === "global") {
       switch (event?.type) {
         case "global.disposed": {
+          if (globalStore.reload) return
           bootstrap()
           break
         }
@@ -293,12 +416,36 @@ function createGlobalSync() {
       return
     }
 
-    const [store, setStore] = child(directory)
+    const existing = children[directory]
+    if (!existing) return
+
+    const [store, setStore] = existing
     switch (event.type) {
       case "server.instance.disposed": {
+        if (globalStore.reload) {
+          bootstrapQueue.push(directory)
+          return
+        }
         bootstrapInstance(directory)
         break
       }
+      case "session.created": {
+        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)
+          }),
+        )
+        if (!event.properties.info.parentID) {
+          setStore("sessionTotal", store.sessionTotal + 1)
+        }
+        break
+      }
       case "session.updated": {
         const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
         if (event.properties.info.time.archived) {
@@ -310,6 +457,8 @@ function createGlobalSync() {
               }),
             )
           }
+          if (event.properties.info.parentID) break
+          setStore("sessionTotal", (value) => Math.max(0, value - 1))
           break
         }
         if (result.found) {
@@ -406,7 +555,10 @@ function createGlobalSync() {
         break
       }
       case "vcs.branch.updated": {
-        setStore("vcs", { branch: event.properties.branch })
+        const next = { branch: event.properties.branch }
+        setStore("vcs", next)
+        const cache = vcsCache.get(directory)
+        if (cache) cache.setStore("value", next)
         break
       }
       case "permission.asked": {
@@ -517,6 +669,11 @@ function createGlobalSync() {
           setGlobalStore("path", x.data!)
         }),
       ),
+      retry(() =>
+        globalSDK.client.config.get().then((x) => {
+          setGlobalStore("config", x.data!)
+        }),
+      ),
       retry(() =>
         globalSDK.client.project.list().then(async (x) => {
           const projects = (x.data ?? [])
@@ -557,6 +714,7 @@ function createGlobalSync() {
 
   return {
     data: globalStore,
+    set: setGlobalStore,
     get ready() {
       return globalStore.ready
     },
@@ -565,6 +723,14 @@ function createGlobalSync() {
     },
     child,
     bootstrap,
+    updateConfig: async (config: Config) => {
+      setGlobalStore("reload", "pending")
+      const response = await globalSDK.client.config.update({ config })
+      setTimeout(() => {
+        setGlobalStore("reload", "complete")
+      }, 1000)
+      return response
+    },
     project: {
       loadSessions,
     },

packages/app/src/context/layout.tsx

@@ -33,8 +33,6 @@ type SessionTabs = {
 type SessionView = {
   scroll: Record<string, SessionScroll>
   reviewOpen?: string[]
-  terminalOpened?: boolean
-  reviewPanelOpened?: boolean
 }
 
 export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
@@ -72,15 +70,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       createStore({
         sidebar: {
           opened: false,
-          width: 280,
+          width: 344,
           workspaces: {} as Record<string, boolean>,
           workspacesDefault: false,
         },
         terminal: {
           height: 280,
+          opened: false,
         },
         review: {
           diffStyle: "split" as ReviewDiffStyle,
+          panelOpened: true,
         },
         session: {
           width: 600,
@@ -172,7 +172,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         const current = store.sessionView[sessionKey]
         const keep = meta.active ?? sessionKey
         if (!current) {
-          setStore("sessionView", sessionKey, { scroll: next, terminalOpened: false, reviewPanelOpened: true })
+          setStore("sessionView", sessionKey, { scroll: next })
           prune(keep)
           return
         }
@@ -208,10 +208,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       })
     })
 
-    const usedColors = new Set<AvatarColorKey>()
+    const [colors, setColors] = createStore<Record<string, AvatarColorKey>>({})
 
-    function pickAvailableColor(): AvatarColorKey {
-      const available = AVATAR_COLOR_KEYS.filter((c) => !usedColors.has(c))
+    function pickAvailableColor(used: Set<string>): AvatarColorKey {
+      const available = AVATAR_COLOR_KEYS.filter((c) => !used.has(c))
       if (available.length === 0) return AVATAR_COLOR_KEYS[Math.floor(Math.random() * AVATAR_COLOR_KEYS.length)]
       return available[Math.floor(Math.random() * available.length)]
     }
@@ -222,24 +222,15 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       const metadata = projectID
         ? globalSync.data.project.find((x) => x.id === projectID)
         : globalSync.data.project.find((x) => x.worktree === project.worktree)
-      return [
-        {
-          ...(metadata ?? {}),
-          ...project,
-          icon: { url: metadata?.icon?.url, color: metadata?.icon?.color },
+      return {
+        ...(metadata ?? {}),
+        ...project,
+        icon: {
+          url: metadata?.icon?.url,
+          override: metadata?.icon?.override,
+          color: metadata?.icon?.color,
         },
-      ]
-    }
-
-    function colorize(project: LocalProject) {
-      if (project.icon?.color) return project
-      const color = pickAvailableColor()
-      usedColors.add(color)
-      project.icon = { ...project.icon, color }
-      if (project.id) {
-        globalSdk.client.project.update({ projectID: project.id, icon: { color } })
       }
-      return project
     }
 
     const roots = createMemo(() => {
@@ -277,8 +268,37 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       })
     })
 
-    const enriched = createMemo(() => server.projects.list().flatMap(enrich))
-    const list = createMemo(() => enriched().flatMap(colorize))
+    const enriched = createMemo(() => server.projects.list().map(enrich))
+    const list = createMemo(() => {
+      const projects = enriched()
+      return projects.map((project) => {
+        const color = project.icon?.color ?? colors[project.worktree]
+        if (!color) return project
+        const icon = project.icon ? { ...project.icon, color } : { color }
+        return { ...project, icon }
+      })
+    })
+
+    createEffect(() => {
+      const projects = enriched()
+      if (projects.length === 0) return
+
+      const used = new Set<string>()
+      for (const project of projects) {
+        const color = project.icon?.color ?? colors[project.worktree]
+        if (color) used.add(color)
+      }
+
+      for (const project of projects) {
+        if (project.icon?.color) continue
+        if (colors[project.worktree]) continue
+        const color = pickAvailableColor(used)
+        used.add(color)
+        setColors(project.worktree, color)
+        if (!project.id) continue
+        void globalSdk.client.project.update({ projectID: project.id, icon: { color } })
+      }
+    })
 
     onMount(() => {
       Promise.all(
@@ -379,31 +399,31 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         touch(sessionKey)
         scroll.seed(sessionKey)
         const s = createMemo(() => store.sessionView[sessionKey] ?? { scroll: {} })
-        const terminalOpened = createMemo(() => s().terminalOpened ?? false)
-        const reviewPanelOpened = createMemo(() => s().reviewPanelOpened ?? true)
+        const terminalOpened = createMemo(() => store.terminal?.opened ?? false)
+        const reviewPanelOpened = createMemo(() => store.review?.panelOpened ?? true)
 
         function setTerminalOpened(next: boolean) {
-          const current = store.sessionView[sessionKey]
+          const current = store.terminal
           if (!current) {
-            setStore("sessionView", sessionKey, { scroll: {}, terminalOpened: next, reviewPanelOpened: true })
+            setStore("terminal", { height: 280, opened: next })
             return
           }
 
-          const value = current.terminalOpened ?? false
+          const value = current.opened ?? false
           if (value === next) return
-          setStore("sessionView", sessionKey, "terminalOpened", next)
+          setStore("terminal", "opened", next)
         }
 
         function setReviewPanelOpened(next: boolean) {
-          const current = store.sessionView[sessionKey]
+          const current = store.review
           if (!current) {
-            setStore("sessionView", sessionKey, { scroll: {}, terminalOpened: false, reviewPanelOpened: next })
+            setStore("review", { diffStyle: "split" as ReviewDiffStyle, panelOpened: next })
             return
           }
 
-          const value = current.reviewPanelOpened ?? true
+          const value = current.panelOpened ?? true
           if (value === next) return
-          setStore("sessionView", sessionKey, "reviewPanelOpened", next)
+          setStore("review", "panelOpened", next)
         }
 
         return {
@@ -444,8 +464,6 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
               if (!current) {
                 setStore("sessionView", sessionKey, {
                   scroll: {},
-                  terminalOpened: false,
-                  reviewPanelOpened: true,
                   reviewOpen: open,
                 })
                 return

packages/app/src/context/notification.tsx

@@ -4,13 +4,12 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useGlobalSDK } from "./global-sdk"
 import { useGlobalSync } from "./global-sync"
 import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
 import { Binary } from "@opencode-ai/util/binary"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { EventSessionError } from "@opencode-ai/sdk/v2"
-import { makeAudioPlayer } from "@solid-primitives/audio"
-import idleSound from "@opencode-ai/ui/audio/staplebops-01.aac"
-import errorSound from "@opencode-ai/ui/audio/nope-03.aac"
 import { Persist, persisted } from "@/utils/persist"
+import { playSound, soundSrc } from "@/utils/sound"
 
 type NotificationBase = {
   directory?: string
@@ -44,19 +43,10 @@ function pruneNotifications(list: Notification[]) {
 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
   name: "Notification",
   init: () => {
-    let idlePlayer: ReturnType<typeof makeAudioPlayer> | undefined
-    let errorPlayer: ReturnType<typeof makeAudioPlayer> | undefined
-
-    try {
-      idlePlayer = makeAudioPlayer(idleSound)
-      errorPlayer = makeAudioPlayer(errorSound)
-    } catch (err) {
-      console.log("Failed to load audio", err)
-    }
-
     const globalSDK = useGlobalSDK()
     const globalSync = useGlobalSync()
     const platform = usePlatform()
+    const settings = useSettings()
 
     const [store, setStore, _, ready] = persisted(
       Persist.global("notification", ["notification.v1"]),
@@ -93,16 +83,20 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
           const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
           const session = match.found ? syncStore.session[match.index] : undefined
           if (session?.parentID) break
-          try {
-            idlePlayer?.play()
-          } catch {}
+
+          playSound(soundSrc(settings.sounds.agent()))
+
           append({
             ...base,
             type: "turn-complete",
             session: sessionID,
           })
+
           const href = `/${base64Encode(directory)}/session/${sessionID}`
-          void platform.notify("Response ready", session?.title ?? sessionID, href)
+          if (settings.notifications.agent()) {
+            void platform.notify("Response ready", session?.title ?? sessionID, href)
+          }
+
           break
         }
         case "session.error": {
@@ -111,9 +105,9 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
           const match = sessionID ? Binary.search(syncStore.session, sessionID, (s) => s.id) : undefined
           const session = sessionID && match?.found ? syncStore.session[match.index] : undefined
           if (session?.parentID) break
-          try {
-            errorPlayer?.play()
-          } catch {}
+
+          playSound(soundSrc(settings.sounds.errors()))
+
           const error = "error" in event.properties ? event.properties.error : undefined
           append({
             ...base,
@@ -121,9 +115,13 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
             session: sessionID ?? "global",
             error,
           })
+
           const description = session?.title ?? (typeof error === "string" ? error : "An error occurred")
           const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
-          void platform.notify("Session error", description, href)
+          if (settings.notifications.errors()) {
+            void platform.notify("Session error", description, href)
+          }
+
           break
         }
       }

packages/app/src/context/server.tsx

@@ -36,6 +36,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       createStore({
         list: [] as string[],
         projects: {} as Record<string, StoredProject[]>,
+        lastProject: {} as Record<string, string>,
       }),
     )
 
@@ -197,6 +198,16 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
           result.splice(toIndex, 0, item)
           setStore("projects", key, result)
         },
+        last() {
+          const key = origin()
+          if (!key) return
+          return store.lastProject[key]
+        },
+        touch(directory: string) {
+          const key = origin()
+          if (!key) return
+          setStore("lastProject", key, directory)
+        },
       },
     }
   },

packages/app/src/context/settings.tsx

@@ -0,0 +1,158 @@
+import { createStore, reconcile } from "solid-js/store"
+import { createEffect, createMemo } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { persisted } from "@/utils/persist"
+
+export interface NotificationSettings {
+  agent: boolean
+  permissions: boolean
+  errors: boolean
+}
+
+export interface SoundSettings {
+  agent: string
+  permissions: string
+  errors: string
+}
+
+export interface Settings {
+  general: {
+    autoSave: boolean
+  }
+  appearance: {
+    fontSize: number
+    font: string
+  }
+  keybinds: Record<string, string>
+  permissions: {
+    autoApprove: boolean
+  }
+  notifications: NotificationSettings
+  sounds: SoundSettings
+}
+
+const defaultSettings: Settings = {
+  general: {
+    autoSave: true,
+  },
+  appearance: {
+    fontSize: 14,
+    font: "ibm-plex-mono",
+  },
+  keybinds: {},
+  permissions: {
+    autoApprove: false,
+  },
+  notifications: {
+    agent: true,
+    permissions: true,
+    errors: false,
+  },
+  sounds: {
+    agent: "staplebops-01",
+    permissions: "staplebops-02",
+    errors: "nope-03",
+  },
+}
+
+const monoFallback =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+
+const monoFonts: Record<string, string> = {
+  "ibm-plex-mono": `"IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "cascadia-code": `"Cascadia Code Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "fira-code": `"Fira Code Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  hack: `"Hack Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  inconsolata: `"Inconsolata Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "intel-one-mono": `"Intel One Mono Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "jetbrains-mono": `"JetBrains Mono Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "meslo-lgs": `"Meslo LGS Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "roboto-mono": `"Roboto Mono Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "source-code-pro": `"Source Code Pro Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+  "ubuntu-mono": `"Ubuntu Mono Nerd Font", "IBM Plex Mono", "IBM Plex Mono Fallback", ${monoFallback}`,
+}
+
+export function monoFontFamily(font: string | undefined) {
+  return monoFonts[font ?? defaultSettings.appearance.font] ?? monoFonts[defaultSettings.appearance.font]
+}
+
+export const { use: useSettings, provider: SettingsProvider } = createSimpleContext({
+  name: "Settings",
+  init: () => {
+    const [store, setStore, _, ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
+
+    createEffect(() => {
+      if (typeof document === "undefined") return
+      document.documentElement.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.font))
+    })
+
+    return {
+      ready,
+      get current() {
+        return store
+      },
+      general: {
+        autoSave: createMemo(() => store.general?.autoSave ?? defaultSettings.general.autoSave),
+        setAutoSave(value: boolean) {
+          setStore("general", "autoSave", value)
+        },
+      },
+      appearance: {
+        fontSize: createMemo(() => store.appearance?.fontSize ?? defaultSettings.appearance.fontSize),
+        setFontSize(value: number) {
+          setStore("appearance", "fontSize", value)
+        },
+        font: createMemo(() => store.appearance?.font ?? defaultSettings.appearance.font),
+        setFont(value: string) {
+          setStore("appearance", "font", value)
+        },
+      },
+      keybinds: {
+        get: (action: string) => store.keybinds?.[action],
+        set(action: string, keybind: string) {
+          setStore("keybinds", action, keybind)
+        },
+        reset(action: string) {
+          setStore("keybinds", action, undefined!)
+        },
+        resetAll() {
+          setStore("keybinds", reconcile({}))
+        },
+      },
+      permissions: {
+        autoApprove: createMemo(() => store.permissions?.autoApprove ?? defaultSettings.permissions.autoApprove),
+        setAutoApprove(value: boolean) {
+          setStore("permissions", "autoApprove", value)
+        },
+      },
+      notifications: {
+        agent: createMemo(() => store.notifications?.agent ?? defaultSettings.notifications.agent),
+        setAgent(value: boolean) {
+          setStore("notifications", "agent", value)
+        },
+        permissions: createMemo(() => store.notifications?.permissions ?? defaultSettings.notifications.permissions),
+        setPermissions(value: boolean) {
+          setStore("notifications", "permissions", value)
+        },
+        errors: createMemo(() => store.notifications?.errors ?? defaultSettings.notifications.errors),
+        setErrors(value: boolean) {
+          setStore("notifications", "errors", value)
+        },
+      },
+      sounds: {
+        agent: createMemo(() => store.sounds?.agent ?? defaultSettings.sounds.agent),
+        setAgent(value: string) {
+          setStore("sounds", "agent", value)
+        },
+        permissions: createMemo(() => store.sounds?.permissions ?? defaultSettings.sounds.permissions),
+        setPermissions(value: string) {
+          setStore("sounds", "permissions", value)
+        },
+        errors: createMemo(() => store.sounds?.errors ?? defaultSettings.sounds.errors),
+        setErrors(value: string) {
+          setStore("sounds", "errors", value)
+        },
+      },
+    }
+  },
+})

packages/app/src/context/terminal.tsx

@@ -25,11 +25,11 @@ type TerminalCacheEntry = {
   dispose: VoidFunction
 }
 
-function createTerminalSession(sdk: ReturnType<typeof useSDK>, dir: string, id: string | undefined) {
-  const legacy = `${dir}/terminal${id ? "/" + id : ""}.v1`
+function createTerminalSession(sdk: ReturnType<typeof useSDK>, dir: string, session?: string) {
+  const legacy = session ? [`${dir}/terminal/${session}.v1`, `${dir}/terminal.v1`] : [`${dir}/terminal.v1`]
 
   const [store, setStore, _, ready] = persisted(
-    Persist.scoped(dir, id, "terminal", [legacy]),
+    Persist.workspace(dir, "terminal", legacy),
     createStore<{
       active?: string
       all: LocalPTY[]
@@ -38,22 +38,48 @@ function createTerminalSession(sdk: ReturnType<typeof useSDK>, dir: string, id:
     }),
   )
 
+  sdk.event.on("pty.exited", (event) => {
+    const id = event.properties.id
+    if (!store.all.some((x) => x.id === id)) return
+    batch(() => {
+      setStore(
+        "all",
+        store.all.filter((x) => x.id !== id),
+      )
+      if (store.active === id) {
+        const remaining = store.all.filter((x) => x.id !== id)
+        setStore("active", remaining[0]?.id)
+      }
+    })
+  })
+
   return {
     ready,
     all: createMemo(() => Object.values(store.all)),
     active: createMemo(() => store.active),
     new() {
+      const parse = (title: string) => {
+        const match = title.match(/^Terminal (\d+)$/)
+        if (!match) return
+        const value = Number(match[1])
+        if (!Number.isFinite(value) || value <= 0) return
+        return value
+      }
+
       const existingTitleNumbers = new Set(
-        store.all.map((pty) => {
-          const match = pty.titleNumber
-          return match
+        store.all.flatMap((pty) => {
+          const direct = Number.isFinite(pty.titleNumber) && pty.titleNumber > 0 ? pty.titleNumber : undefined
+          if (direct !== undefined) return [direct]
+          const parsed = parse(pty.title)
+          if (parsed === undefined) return []
+          return [parsed]
         }),
       )
 
-      let nextNumber = 1
-      while (existingTitleNumbers.has(nextNumber)) {
-        nextNumber++
-      }
+      const nextNumber =
+        Array.from({ length: existingTitleNumbers.size + 1 }, (_, index) => index + 1).find(
+          (number) => !existingTitleNumbers.has(number),
+        ) ?? 1
 
       sdk.client.pty
         .create({ title: `Terminal ${nextNumber}` })
@@ -166,8 +192,8 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
       }
     }
 
-    const load = (dir: string, id: string | undefined) => {
-      const key = `${dir}:${id ?? WORKSPACE_KEY}`
+    const load = (dir: string, session?: string) => {
+      const key = `${dir}:${WORKSPACE_KEY}`
       const existing = cache.get(key)
       if (existing) {
         cache.delete(key)
@@ -176,7 +202,7 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
       }
 
       const entry = createRoot((dispose) => ({
-        value: createTerminalSession(sdk, dir, id),
+        value: createTerminalSession(sdk, dir, session),
         dispose,
       }))
 
@@ -185,18 +211,18 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
       return entry.value
     }
 
-    const session = createMemo(() => load(params.dir!, params.id))
+    const workspace = createMemo(() => load(params.dir!, params.id))
 
     return {
-      ready: () => session().ready(),
-      all: () => session().all(),
-      active: () => session().active(),
-      new: () => session().new(),
-      update: (pty: Partial<LocalPTY> & { id: string }) => session().update(pty),
-      clone: (id: string) => session().clone(id),
-      open: (id: string) => session().open(id),
-      close: (id: string) => session().close(id),
-      move: (id: string, to: number) => session().move(id, to),
+      ready: () => workspace().ready(),
+      all: () => workspace().all(),
+      active: () => workspace().active(),
+      new: () => workspace().new(),
+      update: (pty: Partial<LocalPTY> & { id: string }) => workspace().update(pty),
+      clone: (id: string) => workspace().clone(id),
+      open: (id: string) => workspace().open(id),
+      close: (id: string) => workspace().close(id),
+      move: (id: string, to: number) => workspace().move(id, to),
     }
   },
 })

packages/app/src/entry.tsx

@@ -37,7 +37,7 @@ const platform: Platform = {
       .then(() => {
         const notification = new Notification(title, {
           body: description ?? "",
-          icon: "https://opencode.ai/favicon-96x96.png",
+          icon: "https://opencode.ai/favicon-96x96-v2.png",
         })
         notification.onclick = () => {
           window.focus()

packages/app/src/pages/home.tsx

@@ -1,4 +1,3 @@
-import { useGlobalSync } from "@/context/global-sync"
 import { createMemo, For, Match, Show, Switch } from "solid-js"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
@@ -12,6 +11,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectDirectory } from "@/components/dialog-select-directory"
 import { DialogSelectServer } from "@/components/dialog-select-server"
 import { useServer } from "@/context/server"
+import { useGlobalSync } from "@/context/global-sync"
 
 export default function Home() {
   const sync = useGlobalSync()
@@ -24,6 +24,7 @@ export default function Home() {
 
   function openProject(directory: string) {
     layout.projects.open(directory)
+    server.projects.touch(directory)
     navigate(`/${base64Encode(directory)}`)
   }
 

packages/app/src/pages/session.tsx

@@ -1,4 +1,4 @@
-import { For, onCleanup, onMount, Show, Match, Switch, createMemo, createEffect, on } from "solid-js"
+import { For, onCleanup, onMount, Show, Match, Switch, createMemo, createEffect, on, createSignal } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { Dynamic } from "solid-js/web"
@@ -18,7 +18,7 @@ import { useCodeComponent } from "@opencode-ai/ui/context/code"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { SessionReview } from "@opencode-ai/ui/session-review"
-import { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
+import { Mark } from "@opencode-ai/ui/logo"
 
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
@@ -167,6 +167,7 @@ export default function Page() {
   const sdk = useSDK()
   const prompt = usePrompt()
   const permission = usePermission()
+  const [pendingMessage, setPendingMessage] = createSignal<string | undefined>(undefined)
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const tabs = createMemo(() => layout.tabs(sessionKey()))
   const view = createMemo(() => layout.view(sessionKey()))
@@ -384,6 +385,19 @@ export default function Page() {
     terminal.new()
   })
 
+  createEffect(
+    on(
+      () => terminal.all().length,
+      (count, prevCount) => {
+        if (prevCount !== undefined && prevCount > 0 && count === 0) {
+          if (view().terminal.opened()) {
+            view().terminal.toggle()
+          }
+        }
+      },
+    ),
+  )
+
   createEffect(
     on(
       () => visibleUserMessages().at(-1)?.id,
@@ -419,7 +433,6 @@ export default function Page() {
     {
       id: "session.new",
       title: "New session",
-      description: "Create a new session",
       category: "Session",
       keybind: "mod+shift+s",
       slash: "new",
@@ -428,7 +441,7 @@ export default function Page() {
     {
       id: "file.open",
       title: "Open file",
-      description: "Search and open a file",
+      description: "Search files and commands",
       category: "File",
       keybind: "mod+p",
       slash: "open",
@@ -437,7 +450,7 @@ export default function Page() {
     {
       id: "terminal.toggle",
       title: "Toggle terminal",
-      description: "Show or hide the terminal",
+      description: "",
       category: "View",
       keybind: "ctrl+`",
       slash: "terminal",
@@ -446,7 +459,7 @@ export default function Page() {
     {
       id: "review.toggle",
       title: "Toggle review",
-      description: "Show or hide the review panel",
+      description: "",
       category: "View",
       keybind: "mod+shift+r",
       onSelect: () => view().reviewPanel.toggle(),
@@ -531,13 +544,9 @@ export default function Page() {
       title: "Cycle thinking effort",
       description: "Switch to the next effort level",
       category: "Model",
-      keybind: "shift+mod+t",
+      keybind: "shift+mod+d",
       onSelect: () => {
         local.model.variant.cycle()
-        showToast({
-          title: "Thinking effort changed",
-          description: "The thinking effort has been changed to " + (local.model.variant.current() ?? "Default"),
-        })
       },
     },
     {
@@ -655,6 +664,72 @@ export default function Page() {
       disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: () => dialog.show(() => <DialogFork />),
     },
+    ...(sync.data.config.share !== "disabled"
+      ? [
+          {
+            id: "session.share",
+            title: "Share session",
+            description: "Share this session and copy the URL to clipboard",
+            category: "Session",
+            slash: "share",
+            disabled: !params.id || !!info()?.share?.url,
+            onSelect: async () => {
+              if (!params.id) return
+              await sdk.client.session
+                .share({ sessionID: params.id })
+                .then((res) => {
+                  navigator.clipboard.writeText(res.data!.share!.url).catch(() =>
+                    showToast({
+                      title: "Failed to copy URL to clipboard",
+                      variant: "error",
+                    }),
+                  )
+                })
+                .then(() =>
+                  showToast({
+                    title: "Session shared",
+                    description: "Share URL copied to clipboard!",
+                    variant: "success",
+                  }),
+                )
+                .catch(() =>
+                  showToast({
+                    title: "Failed to share session",
+                    description: "An error occurred while sharing the session",
+                    variant: "error",
+                  }),
+                )
+            },
+          },
+          {
+            id: "session.unshare",
+            title: "Unshare session",
+            description: "Stop sharing this session",
+            category: "Session",
+            slash: "unshare",
+            disabled: !params.id || !info()?.share?.url,
+            onSelect: async () => {
+              if (!params.id) return
+              await sdk.client.session
+                .unshare({ sessionID: params.id })
+                .then(() =>
+                  showToast({
+                    title: "Session unshared",
+                    description: "Session unshared successfully!",
+                    variant: "success",
+                  }),
+                )
+                .catch(() =>
+                  showToast({
+                    title: "Failed to unshare session",
+                    description: "An error occurred while unsharing the session",
+                    variant: "error",
+                  }),
+                )
+            },
+          },
+        ]
+      : []),
   ])
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -727,17 +802,14 @@ export default function Page() {
       .filter((tab) => tab !== "context"),
   )
 
-  const reviewTab = createMemo(() => hasReview() || tabs().active() === "review")
-  const mobileReview = createMemo(() => !isDesktop() && hasReview() && store.mobileTab === "review")
+  const mobileReview = createMemo(() => !isDesktop() && view().reviewPanel.opened() && store.mobileTab === "review")
 
-  const showTabs = createMemo(
-    () => view().reviewPanel.opened() && (hasReview() || tabs().all().length > 0 || contextOpen()),
-  )
+  const showTabs = createMemo(() => view().reviewPanel.opened())
 
   const activeTab = createMemo(() => {
     const active = tabs().active()
     if (active) return active
-    if (reviewTab()) return "review"
+    if (hasReview()) return "review"
 
     const first = openedTabs()[0]
     if (first) return first
@@ -765,10 +837,22 @@ export default function Page() {
   })
 
   const isWorking = createMemo(() => status().type !== "idle")
+
   const autoScroll = createAutoScroll({
-    working: isWorking,
+    working: () => true,
   })
 
+  createEffect(
+    on(
+      isWorking,
+      (working, prev) => {
+        if (!working || prev) return
+        autoScroll.forceScrollToBottom()
+      },
+      { defer: true },
+    ),
+  )
+
   let scrollSpyFrame: number | undefined
   let scrollSpyTarget: HTMLDivElement | undefined
 
@@ -885,17 +969,30 @@ export default function Page() {
     window.history.replaceState(null, "", `#${anchor(id)}`)
   }
 
+  createEffect(() => {
+    const sessionID = params.id
+    if (!sessionID) return
+    const raw = sessionStorage.getItem("opencode.pendingMessage")
+    if (!raw) return
+    const parts = raw.split("|")
+    const pendingSessionID = parts[0]
+    const messageID = parts[1]
+    if (!pendingSessionID || !messageID) return
+    if (pendingSessionID !== sessionID) return
+
+    sessionStorage.removeItem("opencode.pendingMessage")
+    setPendingMessage(messageID)
+  })
+
   const scrollToElement = (el: HTMLElement, behavior: ScrollBehavior) => {
     const root = scroller
-    if (!root) {
-      el.scrollIntoView({ behavior, block: "start" })
-      return
-    }
+    if (!root) return false
 
     const a = el.getBoundingClientRect()
     const b = root.getBoundingClientRect()
     const top = a.top - b.top + root.scrollTop
     root.scrollTo({ top, behavior })
+    return true
   }
 
   const scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => {
@@ -909,7 +1006,15 @@ export default function Page() {
 
       requestAnimationFrame(() => {
         const el = document.getElementById(anchor(message.id))
-        if (el) scrollToElement(el, behavior)
+        if (!el) {
+          requestAnimationFrame(() => {
+            const next = document.getElementById(anchor(message.id))
+            if (!next) return
+            scrollToElement(next, behavior)
+          })
+          return
+        }
+        scrollToElement(el, behavior)
       })
 
       updateHash(message.id)
@@ -917,10 +1022,57 @@ export default function Page() {
     }
 
     const el = document.getElementById(anchor(message.id))
-    if (el) scrollToElement(el, behavior)
+    if (!el) {
+      updateHash(message.id)
+      requestAnimationFrame(() => {
+        const next = document.getElementById(anchor(message.id))
+        if (!next) return
+        if (!scrollToElement(next, behavior)) return
+      })
+      return
+    }
+    if (scrollToElement(el, behavior)) {
+      updateHash(message.id)
+      return
+    }
+
+    requestAnimationFrame(() => {
+      const next = document.getElementById(anchor(message.id))
+      if (!next) return
+      if (!scrollToElement(next, behavior)) return
+    })
     updateHash(message.id)
   }
 
+  const applyHash = (behavior: ScrollBehavior) => {
+    const hash = window.location.hash.slice(1)
+    if (!hash) {
+      autoScroll.forceScrollToBottom()
+      return
+    }
+
+    const match = hash.match(/^message-(.+)$/)
+    if (match) {
+      const msg = visibleUserMessages().find((m) => m.id === match[1])
+      if (msg) {
+        scrollToMessage(msg, behavior)
+        return
+      }
+
+      // If we have a message hash but the message isn't loaded/rendered yet,
+      // don't fall back to "bottom". We'll retry once messages arrive.
+      return
+    }
+
+    const target = document.getElementById(hash)
+    if (target) {
+      scrollToElement(target, behavior)
+      return
+    }
+
+    autoScroll.forceScrollToBottom()
+  }
+
   const getActiveMessageId = (container: HTMLDivElement) => {
     const cutoff = container.scrollTop + 100
     const nodes = container.querySelectorAll<HTMLElement>("[data-message-id]")
@@ -961,31 +1113,47 @@ export default function Page() {
     if (!sessionID || !ready) return
 
     requestAnimationFrame(() => {
-      const hash = window.location.hash.slice(1)
-      if (!hash) {
-        autoScroll.forceScrollToBottom()
-        return
-      }
-
-      const hashTarget = document.getElementById(hash)
-      if (hashTarget) {
-        scrollToElement(hashTarget, "auto")
-        return
-      }
-
-      const match = hash.match(/^message-(.+)$/)
-      if (match) {
-        const msg = visibleUserMessages().find((m) => m.id === match[1])
-        if (msg) {
-          scrollToMessage(msg, "auto")
-          return
-        }
-      }
-
-      autoScroll.forceScrollToBottom()
+      applyHash("auto")
     })
   })
 
+  // Retry message navigation once the target message is actually loaded.
+  createEffect(() => {
+    const sessionID = params.id
+    const ready = messagesReady()
+    if (!sessionID || !ready) return
+
+    // dependencies
+    visibleUserMessages().length
+    store.turnStart
+
+    const targetId =
+      pendingMessage() ??
+      (() => {
+        const hash = window.location.hash.slice(1)
+        const match = hash.match(/^message-(.+)$/)
+        if (!match) return undefined
+        return match[1]
+      })()
+    if (!targetId) return
+    if (store.messageId === targetId) return
+
+    const msg = visibleUserMessages().find((m) => m.id === targetId)
+    if (!msg) return
+    if (pendingMessage() === targetId) setPendingMessage(undefined)
+    requestAnimationFrame(() => scrollToMessage(msg, "auto"))
+  })
+
+  createEffect(() => {
+    const sessionID = params.id
+    const ready = messagesReady()
+    if (!sessionID || !ready) return
+
+    const handler = () => requestAnimationFrame(() => applyHash("auto"))
+    window.addEventListener("hashchange", handler)
+    onCleanup(() => window.removeEventListener("hashchange", handler))
+  })
+
   createEffect(() => {
     document.addEventListener("keydown", handleKeyDown)
   })
@@ -1035,8 +1203,8 @@ export default function Page() {
     <div class="relative bg-background-base size-full overflow-hidden flex flex-col">
       <SessionHeader />
       <div class="flex-1 min-h-0 flex flex-col md:flex-row">
-        {/* Mobile tab bar - only shown on mobile when there are diffs */}
-        <Show when={!isDesktop() && hasReview()}>
+        {/* Mobile tab bar - only shown on mobile when user opened review */}
+        <Show when={!isDesktop() && view().reviewPanel.opened()}>
           <Tabs class="h-auto">
             <Tabs.List>
               <Tabs.Trigger
@@ -1053,7 +1221,10 @@ export default function Page() {
                 classes={{ button: "w-full" }}
                 onClick={() => setStore("mobileTab", "review")}
               >
-                {reviewCount()} Files Changed
+                <Switch>
+                  <Match when={hasReview()}>{reviewCount()} Files Changed</Match>
+                  <Match when={true}>Review</Match>
+                </Switch>
               </Tabs.Trigger>
             </Tabs.List>
           </Tabs>
@@ -1078,41 +1249,40 @@ export default function Page() {
                     when={!mobileReview()}
                     fallback={
                       <div class="relative h-full overflow-hidden">
-                        <Show
-                          when={diffsReady()}
-                          fallback={<div class="px-4 py-4 text-text-weak">Loading changes...</div>}
-                        >
-                          <SessionReviewTab
-                            diffs={diffs}
-                            view={view}
-                            diffStyle="unified"
-                            onViewFile={(path) => {
-                              const value = file.tab(path)
-                              tabs().open(value)
-                              file.load(path)
-                            }}
-                            classes={{
-                              root: "pb-[calc(var(--prompt-height,8rem)+32px)]",
-                              header: "px-4",
-                              container: "px-4",
-                            }}
-                          />
-                        </Show>
+                        <Switch>
+                          <Match when={hasReview()}>
+                            <Show
+                              when={diffsReady()}
+                              fallback={<div class="px-4 py-4 text-text-weak">Loading changes...</div>}
+                            >
+                              <SessionReviewTab
+                                diffs={diffs}
+                                view={view}
+                                diffStyle="unified"
+                                onViewFile={(path) => {
+                                  const value = file.tab(path)
+                                  tabs().open(value)
+                                  file.load(path)
+                                }}
+                                classes={{
+                                  root: "pb-[calc(var(--prompt-height,8rem)+32px)]",
+                                  header: "px-4",
+                                  container: "px-4",
+                                }}
+                              />
+                            </Show>
+                          </Match>
+                          <Match when={true}>
+                            <div class="h-full px-4 pb-30 flex flex-col items-center justify-center text-center gap-6">
+                              <Mark class="w-14 opacity-10" />
+                              <div class="text-13-regular text-text-weak max-w-56">No changes in this session yet</div>
+                            </div>
+                          </Match>
+                        </Switch>
                       </div>
                     }
                   >
                     <div class="relative w-full h-full min-w-0">
-                      <Show when={isDesktop()}>
-                        <div class="absolute inset-0 pointer-events-none z-10">
-                          <SessionMessageRail
-                            messages={visibleUserMessages()}
-                            current={activeMessage()}
-                            onMessageSelect={scrollToMessage}
-                            wide={!showTabs()}
-                            class="pointer-events-auto"
-                          />
-                        </div>
-                      </Show>
                       <div
                         ref={setScrollRef}
                         onScroll={(e) => {
@@ -1121,11 +1291,29 @@ export default function Page() {
                         }}
                         onClick={autoScroll.handleInteraction}
                         class="relative min-w-0 w-full h-full overflow-y-auto no-scrollbar"
+                        style={{ "--session-title-height": info()?.title ? "40px" : "0px" }}
                       >
+                        <Show when={info()?.title}>
+                          <div
+                            classList={{
+                              "sticky top-0 z-30 bg-background-stronger": true,
+                              "w-full": true,
+                              "px-4 md:px-6": true,
+                              "md:max-w-200 md:mx-auto": !showTabs(),
+                            }}
+                          >
+                            <div class="h-10 flex items-center">
+                              <h1 class="text-16-medium text-text-strong truncate">{info()?.title}</h1>
+                            </div>
+                          </div>
+                        </Show>
+
                         <div
                           ref={autoScroll.contentRef}
                           class="flex flex-col gap-32 items-start justify-start pb-[calc(var(--prompt-height,8rem)+64px)] md:pb-[calc(var(--prompt-height,10rem)+64px)] transition-[margin]"
                           classList={{
+                            "w-full": true,
+                            "md:max-w-200 md:mx-auto": !showTabs(),
                             "mt-0.5": !showTabs(),
                             "mt-0": showTabs(),
                           }}
@@ -1176,10 +1364,7 @@ export default function Page() {
                                   data-message-id={message.id}
                                   classList={{
                                     "min-w-0 w-full max-w-full": true,
-                                    "last:min-h-[calc(100vh-5.5rem-var(--prompt-height,8rem)-64px)] md:last:min-h-[calc(100vh-4.5rem-var(--prompt-height,10rem)-64px)]":
-                                      platform.platform !== "desktop",
-                                    "last:min-h-[calc(100vh-7rem-var(--prompt-height,8rem)-64px)] md:last:min-h-[calc(100vh-6rem-var(--prompt-height,10rem)-64px)]":
-                                      platform.platform === "desktop",
+                                    "md:max-w-200": !showTabs(),
                                   }}
                                 >
                                   <SessionTurn
@@ -1192,15 +1377,8 @@ export default function Page() {
                                     }
                                     classes={{
                                       root: "min-w-0 w-full relative",
-                                      content:
-                                        "flex flex-col justify-between !overflow-visible [&_[data-slot=session-turn-message-header]]:top-[-32px]",
-                                      container:
-                                        "px-4 md:px-6 " +
-                                        (!showTabs()
-                                          ? "md:max-w-200 md:mx-auto"
-                                          : visibleUserMessages().length > 1
-                                            ? "md:pr-6 md:pl-18"
-                                            : ""),
+                                      content: "flex flex-col justify-between !overflow-visible",
+                                      container: "w-full px-4 md:px-6",
                                     }}
                                   />
                                 </div>
@@ -1238,7 +1416,7 @@ export default function Page() {
           {/* Prompt input */}
           <div
             ref={(el) => (promptDock = el)}
-            class="absolute inset-x-0 bottom-0 pt-12 pb-4 md:pb-8 flex flex-col justify-center items-center z-50 px-4 md:px-0 bg-gradient-to-t from-background-stronger via-background-stronger to-transparent pointer-events-none"
+            class="absolute inset-x-0 bottom-0 pt-12 pb-4 md:pb-6 flex flex-col justify-center items-center z-50 px-4 md:px-0 bg-gradient-to-t from-background-stronger via-background-stronger to-transparent pointer-events-none"
           >
             <div
               classList={{
@@ -1290,7 +1468,7 @@ export default function Page() {
               <Tabs value={activeTab()} onChange={openTab}>
                 <div class="sticky top-0 shrink-0 flex">
                   <Tabs.List>
-                    <Show when={reviewTab()}>
+                    <Show when={true}>
                       <Tabs.Trigger value="review">
                         <div class="flex items-center gap-3">
                           <Show when={diffs()}>
@@ -1343,26 +1521,36 @@ export default function Page() {
                     </div>
                   </Tabs.List>
                 </div>
-                <Show when={reviewTab()}>
+                <Show when={true}>
                   <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
                     <Show when={activeTab() === "review"}>
                       <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
-                        <Show
-                          when={diffsReady()}
-                          fallback={<div class="px-6 py-4 text-text-weak">Loading changes...</div>}
-                        >
-                          <SessionReviewTab
-                            diffs={diffs}
-                            view={view}
-                            diffStyle={layout.review.diffStyle()}
-                            onDiffStyleChange={layout.review.setDiffStyle}
-                            onViewFile={(path) => {
-                              const value = file.tab(path)
-                              tabs().open(value)
-                              file.load(path)
-                            }}
-                          />
-                        </Show>
+                        <Switch>
+                          <Match when={hasReview()}>
+                            <Show
+                              when={diffsReady()}
+                              fallback={<div class="px-6 py-4 text-text-weak">Loading changes...</div>}
+                            >
+                              <SessionReviewTab
+                                diffs={diffs}
+                                view={view}
+                                diffStyle={layout.review.diffStyle()}
+                                onDiffStyleChange={layout.review.setDiffStyle}
+                                onViewFile={(path) => {
+                                  const value = file.tab(path)
+                                  tabs().open(value)
+                                  file.load(path)
+                                }}
+                              />
+                            </Show>
+                          </Match>
+                          <Match when={true}>
+                            <div class="h-full px-6 pb-30 flex flex-col items-center justify-center text-center gap-6">
+                              <Mark class="w-14 opacity-10" />
+                              <div class="text-13-regular text-text-weak max-w-56">No changes in this session yet</div>
+                            </div>
+                          </Match>
+                        </Switch>
                       </div>
                     </Show>
                   </Tabs.Content>

packages/app/src/utils/persist.ts

@@ -16,6 +16,83 @@ type PersistTarget = {
 
 const LEGACY_STORAGE = "default.dat"
 const GLOBAL_STORAGE = "opencode.global.dat"
+const LOCAL_PREFIX = "opencode."
+const fallback = { disabled: false }
+const cache = new Map<string, string>()
+
+function quota(error: unknown) {
+  if (error instanceof DOMException) {
+    if (error.name === "QuotaExceededError") return true
+    if (error.name === "NS_ERROR_DOM_QUOTA_REACHED") return true
+    if (error.name === "QUOTA_EXCEEDED_ERR") return true
+    if (error.code === 22 || error.code === 1014) return true
+    return false
+  }
+
+  if (!error || typeof error !== "object") return false
+  const name = (error as { name?: string }).name
+  if (name === "QuotaExceededError" || name === "NS_ERROR_DOM_QUOTA_REACHED") return true
+  if (name && /quota/i.test(name)) return true
+
+  const code = (error as { code?: number }).code
+  if (code === 22 || code === 1014) return true
+
+  const message = (error as { message?: string }).message
+  if (typeof message !== "string") return false
+  if (/quota/i.test(message)) return true
+  return false
+}
+
+type Evict = { key: string; size: number }
+
+function evict(storage: Storage, keep: string, value: string) {
+  const total = storage.length
+  const indexes = Array.from({ length: total }, (_, index) => index)
+  const items: Evict[] = []
+
+  for (const index of indexes) {
+    const name = storage.key(index)
+    if (!name) continue
+    if (!name.startsWith(LOCAL_PREFIX)) continue
+    if (name === keep) continue
+    const stored = storage.getItem(name)
+    items.push({ key: name, size: stored?.length ?? 0 })
+  }
+
+  items.sort((a, b) => b.size - a.size)
+
+  for (const item of items) {
+    storage.removeItem(item.key)
+
+    try {
+      storage.setItem(keep, value)
+      return true
+    } catch (error) {
+      if (!quota(error)) throw error
+    }
+  }
+
+  return false
+}
+
+function write(storage: Storage, key: string, value: string) {
+  try {
+    storage.setItem(key, value)
+    return true
+  } catch (error) {
+    if (!quota(error)) throw error
+  }
+
+  try {
+    storage.removeItem(key)
+    storage.setItem(key, value)
+    return true
+  } catch (error) {
+    if (!quota(error)) throw error
+  }
+
+  return evict(storage, key, value)
+}
 
 function snapshot(value: unknown) {
   return JSON.parse(JSON.stringify(value)) as unknown
@@ -67,10 +144,66 @@ function workspaceStorage(dir: string) {
 
 function localStorageWithPrefix(prefix: string): SyncStorage {
   const base = `${prefix}:`
+  const item = (key: string) => base + key
   return {
-    getItem: (key) => localStorage.getItem(base + key),
-    setItem: (key, value) => localStorage.setItem(base + key, value),
-    removeItem: (key) => localStorage.removeItem(base + key),
+    getItem: (key) => {
+      const name = item(key)
+      const cached = cache.get(name)
+      if (fallback.disabled && cached !== undefined) return cached
+
+      const stored = localStorage.getItem(name)
+      if (stored === null) return cached ?? null
+      cache.set(name, stored)
+      return stored
+    },
+    setItem: (key, value) => {
+      const name = item(key)
+      cache.set(name, value)
+      if (fallback.disabled) return
+      try {
+        if (write(localStorage, name, value)) return
+      } catch {
+        fallback.disabled = true
+        return
+      }
+      fallback.disabled = true
+    },
+    removeItem: (key) => {
+      const name = item(key)
+      cache.delete(name)
+      if (fallback.disabled) return
+      localStorage.removeItem(name)
+    },
+  }
+}
+
+function localStorageDirect(): SyncStorage {
+  return {
+    getItem: (key) => {
+      const cached = cache.get(key)
+      if (fallback.disabled && cached !== undefined) return cached
+
+      const stored = localStorage.getItem(key)
+      if (stored === null) return cached ?? null
+      cache.set(key, stored)
+      return stored
+    },
+    setItem: (key, value) => {
+      cache.set(key, value)
+      if (fallback.disabled) return
+      try {
+        if (write(localStorage, key, value)) return
+      } catch {
+        fallback.disabled = true
+        return
+      }
+      fallback.disabled = true
+    },
+    removeItem: (key) => {
+      cache.delete(key)
+      if (fallback.disabled) return
+      localStorage.removeItem(key)
+    },
   }
 }
 
@@ -99,7 +232,7 @@ export function removePersisted(target: { storage?: string; key: string }) {
   }
 
   if (!target.storage) {
-    localStorage.removeItem(target.key)
+    localStorageDirect().removeItem(target.key)
     return
   }
 
@@ -120,12 +253,12 @@ export function persisted<T>(
 
   const currentStorage = (() => {
     if (isDesktop) return platform.storage?.(config.storage)
-    if (!config.storage) return localStorage
+    if (!config.storage) return localStorageDirect()
     return localStorageWithPrefix(config.storage)
   })()
 
   const legacyStorage = (() => {
-    if (!isDesktop) return localStorage
+    if (!isDesktop) return localStorageDirect()
     if (!config.storage) return platform.storage?.()
     return platform.storage?.(LEGACY_STORAGE)
   })()

packages/app/src/utils/sound.ts

@@ -0,0 +1,44 @@
+import nope01 from "@opencode-ai/ui/audio/nope-01.aac"
+import nope02 from "@opencode-ai/ui/audio/nope-02.aac"
+import nope03 from "@opencode-ai/ui/audio/nope-03.aac"
+import nope04 from "@opencode-ai/ui/audio/nope-04.aac"
+import nope05 from "@opencode-ai/ui/audio/nope-05.aac"
+import staplebops01 from "@opencode-ai/ui/audio/staplebops-01.aac"
+import staplebops02 from "@opencode-ai/ui/audio/staplebops-02.aac"
+import staplebops03 from "@opencode-ai/ui/audio/staplebops-03.aac"
+import staplebops04 from "@opencode-ai/ui/audio/staplebops-04.aac"
+import staplebops05 from "@opencode-ai/ui/audio/staplebops-05.aac"
+import staplebops06 from "@opencode-ai/ui/audio/staplebops-06.aac"
+import staplebops07 from "@opencode-ai/ui/audio/staplebops-07.aac"
+
+export const SOUND_OPTIONS = [
+  { id: "staplebops-01", label: "Boopy", src: staplebops01 },
+  { id: "staplebops-02", label: "Beepy", src: staplebops02 },
+  { id: "staplebops-03", label: "Staplebops 03", src: staplebops03 },
+  { id: "staplebops-04", label: "Staplebops 04", src: staplebops04 },
+  { id: "staplebops-05", label: "Staplebops 05", src: staplebops05 },
+  { id: "staplebops-06", label: "Staplebops 06", src: staplebops06 },
+  { id: "staplebops-07", label: "Staplebops 07", src: staplebops07 },
+  { id: "nope-01", label: "Nope 01", src: nope01 },
+  { id: "nope-02", label: "Nope 02", src: nope02 },
+  { id: "nope-03", label: "Oopsie", src: nope03 },
+  { id: "nope-04", label: "Nope 04", src: nope04 },
+  { id: "nope-05", label: "Nope 05", src: nope05 },
+] as const
+
+export type SoundOption = (typeof SOUND_OPTIONS)[number]
+export type SoundID = SoundOption["id"]
+
+const soundById = Object.fromEntries(SOUND_OPTIONS.map((s) => [s.id, s.src])) as Record<SoundID, string>
+
+export function soundSrc(id: string | undefined) {
+  if (!id) return
+  if (!(id in soundById)) return
+  return soundById[id as SoundID]
+}
+
+export function playSound(src: string | undefined) {
+  if (typeof Audio === "undefined") return
+  if (!src) return
+  void new Audio(src).play().catch(() => undefined)
+}

packages/console/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.1.21",
+  "version": "1.1.27",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -20,6 +20,8 @@
     "@opencode-ai/console-mail": "workspace:*",
     "@opencode-ai/console-resource": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
+    "@smithy/eventstream-codec": "4.2.7",
+    "@smithy/util-utf8": "4.2.0",
     "@solidjs/meta": "catalog:",
     "@solidjs/router": "catalog:",
     "@solidjs/start": "catalog:",

packages/console/app/src/component/light-rays.css

@@ -1,186 +0,0 @@
-.light-rays-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.light-rays-container canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.light-rays-controls {
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  z-index: 9999;
-  font-family: var(--font-mono, monospace);
-  font-size: 12px;
-  color: #fff;
-}
-
-.light-rays-controls-toggle {
-  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 8px 12px;
-  color: #fff;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  width: 100%;
-  text-align: left;
-}
-
-.light-rays-controls-toggle:hover {
-  background: rgba(0, 0, 0, 0.9);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.light-rays-controls-panel {
-  background: rgba(0, 0, 0, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 12px;
-  margin-top: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 240px;
-  max-height: calc(100vh - 100px);
-  overflow-y: auto;
-  backdrop-filter: blur(8px);
-}
-
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.control-group label {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.control-group.checkbox {
-  flex-direction: row;
-  align-items: center;
-}
-
-.control-group.checkbox label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  text-transform: none;
-}
-
-.control-group input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 2px;
-  outline: none;
-}
-
-.control-group input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: transform 0.1s;
-}
-
-.control-group input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-.control-group input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-
-.control-group input[type="color"] {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 32px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  padding: 2px;
-}
-
-.control-group input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-.control-group input[type="color"]::-webkit-color-swatch {
-  border: none;
-  border-radius: 2px;
-}
-
-.control-group select {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 6px 8px;
-  color: #fff;
-  font-family: inherit;
-  font-size: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-.control-group select:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.control-group select option {
-  background: #1a1a1a;
-  color: #fff;
-}
-
-.control-group input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: #fff;
-  cursor: pointer;
-}
-
-.reset-button {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 8px 12px;
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  margin-top: 4px;
-  transition: all 0.15s;
-}
-
-.reset-button:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
-  color: #fff;
-}

packages/console/app/src/component/light-rays.tsx

@@ -1,924 +0,0 @@
-import { createSignal, createEffect, onMount, onCleanup, Show, For, Accessor, Setter } from "solid-js"
-import "./light-rays.css"
-
-export type RaysOrigin =
-  | "top-center"
-  | "top-left"
-  | "top-right"
-  | "right"
-  | "left"
-  | "bottom-center"
-  | "bottom-right"
-  | "bottom-left"
-
-export interface LightRaysConfig {
-  raysOrigin: RaysOrigin
-  raysColor: string
-  raysSpeed: number
-  lightSpread: number
-  rayLength: number
-  sourceWidth: number
-  pulsating: boolean
-  pulsatingMin: number
-  pulsatingMax: number
-  fadeDistance: number
-  saturation: number
-  followMouse: boolean
-  mouseInfluence: number
-  noiseAmount: number
-  distortion: number
-  opacity: number
-}
-
-export const defaultConfig: LightRaysConfig = {
-  raysOrigin: "top-center",
-  raysColor: "#ffffff",
-  raysSpeed: 1.0,
-  lightSpread: 1.15,
-  rayLength: 4.0,
-  sourceWidth: 0.1,
-  pulsating: true,
-  pulsatingMin: 0.9,
-  pulsatingMax: 1.0,
-  fadeDistance: 1.15,
-  saturation: 0.325,
-  followMouse: false,
-  mouseInfluence: 0.05,
-  noiseAmount: 0.5,
-  distortion: 0.0,
-  opacity: 0.35,
-}
-
-export interface LightRaysAnimationState {
-  time: number
-  intensity: number
-  pulseValue: number
-}
-
-interface LightRaysProps {
-  config: Accessor<LightRaysConfig>
-  class?: string
-  onAnimationFrame?: (state: LightRaysAnimationState) => void
-}
-
-const hexToRgb = (hex: string): [number, number, number] => {
-  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [1, 1, 1]
-}
-
-const getAnchorAndDir = (
-  origin: RaysOrigin,
-  w: number,
-  h: number,
-): { anchor: [number, number]; dir: [number, number] } => {
-  const outside = 0.2
-  switch (origin) {
-    case "top-left":
-      return { anchor: [0, -outside * h], dir: [0, 1] }
-    case "top-right":
-      return { anchor: [w, -outside * h], dir: [0, 1] }
-    case "left":
-      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] }
-    case "right":
-      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] }
-    case "bottom-left":
-      return { anchor: [0, (1 + outside) * h], dir: [0, -1] }
-    case "bottom-center":
-      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] }
-    case "bottom-right":
-      return { anchor: [w, (1 + outside) * h], dir: [0, -1] }
-    default: // "top-center"
-      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] }
-  }
-}
-
-interface UniformData {
-  iTime: number
-  iResolution: [number, number]
-  rayPos: [number, number]
-  rayDir: [number, number]
-  raysColor: [number, number, number]
-  raysSpeed: number
-  lightSpread: number
-  rayLength: number
-  sourceWidth: number
-  pulsating: number
-  pulsatingMin: number
-  pulsatingMax: number
-  fadeDistance: number
-  saturation: number
-  mousePos: [number, number]
-  mouseInfluence: number
-  noiseAmount: number
-  distortion: number
-}
-
-const WGSL_SHADER = `
-  struct Uniforms {
-    iTime: f32,
-    _pad0: f32,
-    iResolution: vec2<f32>,
-    rayPos: vec2<f32>,
-    rayDir: vec2<f32>,
-    raysColor: vec3<f32>,
-    raysSpeed: f32,
-    lightSpread: f32,
-    rayLength: f32,
-    sourceWidth: f32,
-    pulsating: f32,
-    pulsatingMin: f32,
-    pulsatingMax: f32,
-    fadeDistance: f32,
-    saturation: f32,
-    mousePos: vec2<f32>,
-    mouseInfluence: f32,
-    noiseAmount: f32,
-    distortion: f32,
-    _pad1: f32,
-    _pad2: f32,
-    _pad3: f32,
-  };
-
-  @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-  struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) vUv: vec2<f32>,
-  };
-
-  @vertex
-  fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-    var positions = array<vec2<f32>, 3>(
-      vec2<f32>(-1.0, -1.0),
-      vec2<f32>(3.0, -1.0),
-      vec2<f32>(-1.0, 3.0)
-    );
-    
-    var output: VertexOutput;
-    let pos = positions[vertexIndex];
-    output.position = vec4<f32>(pos, 0.0, 1.0);
-    output.vUv = pos * 0.5 + 0.5;
-    return output;
-  }
-
-  fn noise(st: vec2<f32>) -> f32 {
-    return fract(sin(dot(st, vec2<f32>(12.9898, 78.233))) * 43758.5453123);
-  }
-
-  fn rayStrength(raySource: vec2<f32>, rayRefDirection: vec2<f32>, coord: vec2<f32>,
-                seedA: f32, seedB: f32, speed: f32) -> f32 {
-    let sourceToCoord = coord - raySource;
-    let dirNorm = normalize(sourceToCoord);
-    let cosAngle = dot(dirNorm, rayRefDirection);
-
-    let distortedAngle = cosAngle + uniforms.distortion * sin(uniforms.iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
-    
-    let spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(uniforms.lightSpread, 0.001));
-
-    let distance = length(sourceToCoord);
-    let maxDistance = uniforms.iResolution.x * uniforms.rayLength;
-    let lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
-    
-    let fadeFalloff = clamp((uniforms.iResolution.x * uniforms.fadeDistance - distance) / (uniforms.iResolution.x * uniforms.fadeDistance), 0.5, 1.0);
-    let pulseCenter = (uniforms.pulsatingMin + uniforms.pulsatingMax) * 0.5;
-    let pulseAmplitude = (uniforms.pulsatingMax - uniforms.pulsatingMin) * 0.5;
-    var pulse: f32;
-    if (uniforms.pulsating > 0.5) {
-      pulse = pulseCenter + pulseAmplitude * sin(uniforms.iTime * speed * 3.0);
-    } else {
-      pulse = 1.0;
-    }
-
-    let baseStrength = clamp(
-      (0.45 + 0.15 * sin(distortedAngle * seedA + uniforms.iTime * speed)) +
-      (0.3 + 0.2 * cos(-distortedAngle * seedB + uniforms.iTime * speed)),
-      0.0, 1.0
-    );
-
-    return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
-  }
-
-  @fragment
-  fn fragmentMain(@builtin(position) fragCoord: vec4<f32>, @location(0) vUv: vec2<f32>) -> @location(0) vec4<f32> {
-    let coord = vec2<f32>(fragCoord.x, fragCoord.y);
-    
-    let normalizedX = (coord.x / uniforms.iResolution.x) - 0.5;
-    let widthOffset = -normalizedX * uniforms.sourceWidth * uniforms.iResolution.x;
-    
-    let perpDir = vec2<f32>(-uniforms.rayDir.y, uniforms.rayDir.x);
-    let adjustedRayPos = uniforms.rayPos + perpDir * widthOffset;
-    
-    var finalRayDir = uniforms.rayDir;
-    if (uniforms.mouseInfluence > 0.0) {
-      let mouseScreenPos = uniforms.mousePos * uniforms.iResolution;
-      let mouseDirection = normalize(mouseScreenPos - adjustedRayPos);
-      finalRayDir = normalize(mix(uniforms.rayDir, mouseDirection, uniforms.mouseInfluence));
-    }
-
-    let rays1 = vec4<f32>(1.0) *
-                rayStrength(adjustedRayPos, finalRayDir, coord, 36.2214, 21.11349,
-                            1.5 * uniforms.raysSpeed);
-    let rays2 = vec4<f32>(1.0) *
-                rayStrength(adjustedRayPos, finalRayDir, coord, 22.3991, 18.0234,
-                            1.1 * uniforms.raysSpeed);
-
-    var fragColor = rays1 * 0.5 + rays2 * 0.4;
-
-    if (uniforms.noiseAmount > 0.0) {
-      let n = noise(coord * 0.01 + uniforms.iTime * 0.1);
-      fragColor = vec4<f32>(fragColor.rgb * (1.0 - uniforms.noiseAmount + uniforms.noiseAmount * n), fragColor.a);
-    }
-
-    let brightness = 1.0 - (coord.y / uniforms.iResolution.y);
-    fragColor.x = fragColor.x * (0.1 + brightness * 0.8);
-    fragColor.y = fragColor.y * (0.3 + brightness * 0.6);
-    fragColor.z = fragColor.z * (0.5 + brightness * 0.5);
-
-    if (uniforms.saturation != 1.0) {
-      let gray = dot(fragColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
-      fragColor = vec4<f32>(mix(vec3<f32>(gray), fragColor.rgb, uniforms.saturation), fragColor.a);
-    }
-
-    fragColor = vec4<f32>(fragColor.rgb * uniforms.raysColor, fragColor.a);
-    
-    return fragColor;
-  }
-`
-
-const UNIFORM_BUFFER_SIZE = 96
-
-function createUniformBuffer(data: UniformData): Float32Array {
-  const buffer = new Float32Array(24)
-  buffer[0] = data.iTime
-  buffer[1] = 0
-  buffer[2] = data.iResolution[0]
-  buffer[3] = data.iResolution[1]
-  buffer[4] = data.rayPos[0]
-  buffer[5] = data.rayPos[1]
-  buffer[6] = data.rayDir[0]
-  buffer[7] = data.rayDir[1]
-  buffer[8] = data.raysColor[0]
-  buffer[9] = data.raysColor[1]
-  buffer[10] = data.raysColor[2]
-  buffer[11] = data.raysSpeed
-  buffer[12] = data.lightSpread
-  buffer[13] = data.rayLength
-  buffer[14] = data.sourceWidth
-  buffer[15] = data.pulsating
-  buffer[16] = data.pulsatingMin
-  buffer[17] = data.pulsatingMax
-  buffer[18] = data.fadeDistance
-  buffer[19] = data.saturation
-  buffer[20] = data.mousePos[0]
-  buffer[21] = data.mousePos[1]
-  buffer[22] = data.mouseInfluence
-  buffer[23] = data.noiseAmount
-  return buffer
-}
-
-const UNIFORM_BUFFER_SIZE_CORRECTED = 112
-
-function createUniformBufferCorrected(data: UniformData): Float32Array {
-  const buffer = new Float32Array(28)
-  buffer[0] = data.iTime
-  buffer[1] = 0
-  buffer[2] = data.iResolution[0]
-  buffer[3] = data.iResolution[1]
-  buffer[4] = data.rayPos[0]
-  buffer[5] = data.rayPos[1]
-  buffer[6] = data.rayDir[0]
-  buffer[7] = data.rayDir[1]
-  buffer[8] = data.raysColor[0]
-  buffer[9] = data.raysColor[1]
-  buffer[10] = data.raysColor[2]
-  buffer[11] = data.raysSpeed
-  buffer[12] = data.lightSpread
-  buffer[13] = data.rayLength
-  buffer[14] = data.sourceWidth
-  buffer[15] = data.pulsating
-  buffer[16] = data.pulsatingMin
-  buffer[17] = data.pulsatingMax
-  buffer[18] = data.fadeDistance
-  buffer[19] = data.saturation
-  buffer[20] = data.mousePos[0]
-  buffer[21] = data.mousePos[1]
-  buffer[22] = data.mouseInfluence
-  buffer[23] = data.noiseAmount
-  buffer[24] = data.distortion
-  buffer[25] = 0
-  buffer[26] = 0
-  buffer[27] = 0
-  return buffer
-}
-
-export default function LightRays(props: LightRaysProps) {
-  let containerRef: HTMLDivElement | undefined
-  let canvasRef: HTMLCanvasElement | null = null
-  let deviceRef: GPUDevice | null = null
-  let contextRef: GPUCanvasContext | null = null
-  let pipelineRef: GPURenderPipeline | null = null
-  let uniformBufferRef: GPUBuffer | null = null
-  let bindGroupRef: GPUBindGroup | null = null
-  let animationIdRef: number | null = null
-  let cleanupFunctionRef: (() => void) | null = null
-  let uniformDataRef: UniformData | null = null
-
-  const mouseRef = { x: 0.5, y: 0.5 }
-  const smoothMouseRef = { x: 0.5, y: 0.5 }
-
-  const [isVisible, setIsVisible] = createSignal(false)
-
-  onMount(() => {
-    if (!containerRef) return
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0]
-        setIsVisible(entry.isIntersecting)
-      },
-      { threshold: 0.1 },
-    )
-
-    observer.observe(containerRef)
-
-    onCleanup(() => {
-      observer.disconnect()
-    })
-  })
-
-  createEffect(() => {
-    const visible = isVisible()
-    const config = props.config()
-    if (!visible || !containerRef) {
-      return
-    }
-
-    if (cleanupFunctionRef) {
-      cleanupFunctionRef()
-      cleanupFunctionRef = null
-    }
-
-    const initializeWebGPU = async () => {
-      if (!containerRef) {
-        return
-      }
-
-      await new Promise((resolve) => setTimeout(resolve, 10))
-
-      if (!containerRef) {
-        return
-      }
-
-      if (!navigator.gpu) {
-        console.warn("WebGPU is not supported in this browser")
-        return
-      }
-
-      const adapter = await navigator.gpu.requestAdapter()
-      if (!adapter) {
-        console.warn("Failed to get WebGPU adapter")
-        return
-      }
-
-      const device = await adapter.requestDevice()
-      deviceRef = device
-
-      const canvas = document.createElement("canvas")
-      canvas.style.width = "100%"
-      canvas.style.height = "100%"
-      canvasRef = canvas
-
-      while (containerRef.firstChild) {
-        containerRef.removeChild(containerRef.firstChild)
-      }
-      containerRef.appendChild(canvas)
-
-      const context = canvas.getContext("webgpu")
-      if (!context) {
-        console.warn("Failed to get WebGPU context")
-        return
-      }
-      contextRef = context
-
-      const presentationFormat = navigator.gpu.getPreferredCanvasFormat()
-      context.configure({
-        device,
-        format: presentationFormat,
-        alphaMode: "premultiplied",
-      })
-
-      const shaderModule = device.createShaderModule({
-        code: WGSL_SHADER,
-      })
-
-      const uniformBuffer = device.createBuffer({
-        size: UNIFORM_BUFFER_SIZE_CORRECTED,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      })
-      uniformBufferRef = uniformBuffer
-
-      const bindGroupLayout = device.createBindGroupLayout({
-        entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            buffer: { type: "uniform" },
-          },
-        ],
-      })
-
-      const bindGroup = device.createBindGroup({
-        layout: bindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: { buffer: uniformBuffer },
-          },
-        ],
-      })
-      bindGroupRef = bindGroup
-
-      const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [bindGroupLayout],
-      })
-
-      const pipeline = device.createRenderPipeline({
-        layout: pipelineLayout,
-        vertex: {
-          module: shaderModule,
-          entryPoint: "vertexMain",
-        },
-        fragment: {
-          module: shaderModule,
-          entryPoint: "fragmentMain",
-          targets: [
-            {
-              format: presentationFormat,
-              blend: {
-                color: {
-                  srcFactor: "src-alpha",
-                  dstFactor: "one-minus-src-alpha",
-                  operation: "add",
-                },
-                alpha: {
-                  srcFactor: "one",
-                  dstFactor: "one-minus-src-alpha",
-                  operation: "add",
-                },
-              },
-            },
-          ],
-        },
-        primitive: {
-          topology: "triangle-list",
-        },
-      })
-      pipelineRef = pipeline
-
-      const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
-      const dpr = Math.min(window.devicePixelRatio, 2)
-      const w = wCSS * dpr
-      const h = hCSS * dpr
-      const { anchor, dir } = getAnchorAndDir(config.raysOrigin, w, h)
-
-      uniformDataRef = {
-        iTime: 0,
-        iResolution: [w, h],
-        rayPos: anchor,
-        rayDir: dir,
-        raysColor: hexToRgb(config.raysColor),
-        raysSpeed: config.raysSpeed,
-        lightSpread: config.lightSpread,
-        rayLength: config.rayLength,
-        sourceWidth: config.sourceWidth,
-        pulsating: config.pulsating ? 1.0 : 0.0,
-        pulsatingMin: config.pulsatingMin,
-        pulsatingMax: config.pulsatingMax,
-        fadeDistance: config.fadeDistance,
-        saturation: config.saturation,
-        mousePos: [0.5, 0.5],
-        mouseInfluence: config.mouseInfluence,
-        noiseAmount: config.noiseAmount,
-        distortion: config.distortion,
-      }
-
-      const updatePlacement = () => {
-        if (!containerRef || !canvasRef || !uniformDataRef) {
-          return
-        }
-
-        const dpr = Math.min(window.devicePixelRatio, 2)
-        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
-        const w = Math.floor(wCSS * dpr)
-        const h = Math.floor(hCSS * dpr)
-
-        canvasRef.width = w
-        canvasRef.height = h
-
-        uniformDataRef.iResolution = [w, h]
-
-        const currentConfig = props.config()
-        const { anchor, dir } = getAnchorAndDir(currentConfig.raysOrigin, w, h)
-        uniformDataRef.rayPos = anchor
-        uniformDataRef.rayDir = dir
-      }
-
-      const loop = (t: number) => {
-        if (!deviceRef || !contextRef || !pipelineRef || !uniformBufferRef || !bindGroupRef || !uniformDataRef) {
-          return
-        }
-
-        const currentConfig = props.config()
-        const timeSeconds = t * 0.001
-        uniformDataRef.iTime = timeSeconds
-
-        if (currentConfig.followMouse && currentConfig.mouseInfluence > 0.0) {
-          const smoothing = 0.92
-
-          smoothMouseRef.x = smoothMouseRef.x * smoothing + mouseRef.x * (1 - smoothing)
-          smoothMouseRef.y = smoothMouseRef.y * smoothing + mouseRef.y * (1 - smoothing)
-
-          uniformDataRef.mousePos = [smoothMouseRef.x, smoothMouseRef.y]
-        }
-
-        if (props.onAnimationFrame) {
-          const pulseCenter = (currentConfig.pulsatingMin + currentConfig.pulsatingMax) * 0.5
-          const pulseAmplitude = (currentConfig.pulsatingMax - currentConfig.pulsatingMin) * 0.5
-          const pulseValue = currentConfig.pulsating
-            ? pulseCenter + pulseAmplitude * Math.sin(timeSeconds * currentConfig.raysSpeed * 3.0)
-            : 1.0
-
-          const baseIntensity1 = 0.45 + 0.15 * Math.sin(timeSeconds * currentConfig.raysSpeed * 1.5)
-          const baseIntensity2 = 0.3 + 0.2 * Math.cos(timeSeconds * currentConfig.raysSpeed * 1.1)
-          const intensity = (baseIntensity1 + baseIntensity2) * pulseValue
-
-          props.onAnimationFrame({
-            time: timeSeconds,
-            intensity,
-            pulseValue,
-          })
-        }
-
-        try {
-          const uniformData = createUniformBufferCorrected(uniformDataRef)
-          deviceRef.queue.writeBuffer(uniformBufferRef, 0, uniformData.buffer)
-
-          const commandEncoder = deviceRef.createCommandEncoder()
-
-          const textureView = contextRef.getCurrentTexture().createView()
-
-          const renderPass = commandEncoder.beginRenderPass({
-            colorAttachments: [
-              {
-                view: textureView,
-                clearValue: { r: 0, g: 0, b: 0, a: 0 },
-                loadOp: "clear",
-                storeOp: "store",
-              },
-            ],
-          })
-
-          renderPass.setPipeline(pipelineRef)
-          renderPass.setBindGroup(0, bindGroupRef)
-          renderPass.draw(3)
-          renderPass.end()
-
-          deviceRef.queue.submit([commandEncoder.finish()])
-
-          animationIdRef = requestAnimationFrame(loop)
-        } catch (error) {
-          console.warn("WebGPU rendering error:", error)
-          return
-        }
-      }
-
-      window.addEventListener("resize", updatePlacement)
-      updatePlacement()
-      animationIdRef = requestAnimationFrame(loop)
-
-      cleanupFunctionRef = () => {
-        if (animationIdRef) {
-          cancelAnimationFrame(animationIdRef)
-          animationIdRef = null
-        }
-
-        window.removeEventListener("resize", updatePlacement)
-
-        if (uniformBufferRef) {
-          uniformBufferRef.destroy()
-          uniformBufferRef = null
-        }
-
-        if (deviceRef) {
-          deviceRef.destroy()
-          deviceRef = null
-        }
-
-        if (canvasRef && canvasRef.parentNode) {
-          canvasRef.parentNode.removeChild(canvasRef)
-        }
-
-        canvasRef = null
-        contextRef = null
-        pipelineRef = null
-        bindGroupRef = null
-        uniformDataRef = null
-      }
-    }
-
-    initializeWebGPU()
-
-    onCleanup(() => {
-      if (cleanupFunctionRef) {
-        cleanupFunctionRef()
-        cleanupFunctionRef = null
-      }
-    })
-  })
-
-  createEffect(() => {
-    if (!uniformDataRef || !containerRef) {
-      return
-    }
-
-    const config = props.config()
-
-    uniformDataRef.raysColor = hexToRgb(config.raysColor)
-    uniformDataRef.raysSpeed = config.raysSpeed
-    uniformDataRef.lightSpread = config.lightSpread
-    uniformDataRef.rayLength = config.rayLength
-    uniformDataRef.sourceWidth = config.sourceWidth
-    uniformDataRef.pulsating = config.pulsating ? 1.0 : 0.0
-    uniformDataRef.pulsatingMin = config.pulsatingMin
-    uniformDataRef.pulsatingMax = config.pulsatingMax
-    uniformDataRef.fadeDistance = config.fadeDistance
-    uniformDataRef.saturation = config.saturation
-    uniformDataRef.mouseInfluence = config.mouseInfluence
-    uniformDataRef.noiseAmount = config.noiseAmount
-    uniformDataRef.distortion = config.distortion
-
-    const dpr = Math.min(window.devicePixelRatio, 2)
-    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
-    const { anchor, dir } = getAnchorAndDir(config.raysOrigin, wCSS * dpr, hCSS * dpr)
-    uniformDataRef.rayPos = anchor
-    uniformDataRef.rayDir = dir
-  })
-
-  createEffect(() => {
-    const config = props.config()
-    if (!config.followMouse) {
-      return
-    }
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!containerRef) {
-        return
-      }
-      const rect = containerRef.getBoundingClientRect()
-      const x = (e.clientX - rect.left) / rect.width
-      const y = (e.clientY - rect.top) / rect.height
-      mouseRef.x = x
-      mouseRef.y = y
-    }
-
-    window.addEventListener("mousemove", handleMouseMove)
-
-    onCleanup(() => {
-      window.removeEventListener("mousemove", handleMouseMove)
-    })
-  })
-
-  return (
-    <div
-      ref={containerRef}
-      class={`light-rays-container ${props.class ?? ""}`.trim()}
-      style={{ opacity: props.config().opacity }}
-    />
-  )
-}
-
-interface LightRaysControlsProps {
-  config: Accessor<LightRaysConfig>
-  setConfig: Setter<LightRaysConfig>
-}
-
-export function LightRaysControls(props: LightRaysControlsProps) {
-  const [isOpen, setIsOpen] = createSignal(true)
-
-  const updateConfig = <K extends keyof LightRaysConfig>(key: K, value: LightRaysConfig[K]) => {
-    props.setConfig((prev) => ({ ...prev, [key]: value }))
-  }
-
-  const origins: RaysOrigin[] = [
-    "top-center",
-    "top-left",
-    "top-right",
-    "left",
-    "right",
-    "bottom-center",
-    "bottom-left",
-    "bottom-right",
-  ]
-
-  return (
-    <div class="light-rays-controls">
-      <button class="light-rays-controls-toggle" onClick={() => setIsOpen(!isOpen())}>
-        {isOpen() ? "▼" : "▶"} Light Rays
-      </button>
-      <Show when={isOpen()}>
-        <div class="light-rays-controls-panel">
-          <div class="control-group">
-            <label>Origin</label>
-            <select
-              value={props.config().raysOrigin}
-              onChange={(e) => updateConfig("raysOrigin", e.currentTarget.value as RaysOrigin)}
-            >
-              <For each={origins}>{(origin) => <option value={origin}>{origin}</option>}</For>
-            </select>
-          </div>
-
-          <div class="control-group">
-            <label>Color</label>
-            <input
-              type="color"
-              value={props.config().raysColor}
-              onInput={(e) => updateConfig("raysColor", e.currentTarget.value)}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Speed: {props.config().raysSpeed.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="3"
-              step="0.01"
-              value={props.config().raysSpeed}
-              onInput={(e) => updateConfig("raysSpeed", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Light Spread: {props.config().lightSpread.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0.1"
-              max="5"
-              step="0.01"
-              value={props.config().lightSpread}
-              onInput={(e) => updateConfig("lightSpread", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Ray Length: {props.config().rayLength.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0.1"
-              max="5"
-              step="0.01"
-              value={props.config().rayLength}
-              onInput={(e) => updateConfig("rayLength", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Source Width: {props.config().sourceWidth.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="2"
-              step="0.01"
-              value={props.config().sourceWidth}
-              onInput={(e) => updateConfig("sourceWidth", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Fade Distance: {props.config().fadeDistance.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0.1"
-              max="3"
-              step="0.01"
-              value={props.config().fadeDistance}
-              onInput={(e) => updateConfig("fadeDistance", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Saturation: {props.config().saturation.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="2"
-              step="0.01"
-              value={props.config().saturation}
-              onInput={(e) => updateConfig("saturation", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Mouse Influence: {props.config().mouseInfluence.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={props.config().mouseInfluence}
-              onInput={(e) => updateConfig("mouseInfluence", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Noise: {props.config().noiseAmount.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={props.config().noiseAmount}
-              onInput={(e) => updateConfig("noiseAmount", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Distortion: {props.config().distortion.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="2"
-              step="0.01"
-              value={props.config().distortion}
-              onInput={(e) => updateConfig("distortion", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group">
-            <label>Opacity: {props.config().opacity.toFixed(2)}</label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={props.config().opacity}
-              onInput={(e) => updateConfig("opacity", parseFloat(e.currentTarget.value))}
-            />
-          </div>
-
-          <div class="control-group checkbox">
-            <label>
-              <input
-                type="checkbox"
-                checked={props.config().pulsating}
-                onChange={(e) => updateConfig("pulsating", e.currentTarget.checked)}
-              />
-              Pulsating
-            </label>
-          </div>
-
-          <Show when={props.config().pulsating}>
-            <div class="control-group">
-              <label>Pulse Min: {props.config().pulsatingMin.toFixed(2)}</label>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.01"
-                value={props.config().pulsatingMin}
-                onInput={(e) => updateConfig("pulsatingMin", parseFloat(e.currentTarget.value))}
-              />
-            </div>
-
-            <div class="control-group">
-              <label>Pulse Max: {props.config().pulsatingMax.toFixed(2)}</label>
-              <input
-                type="range"
-                min="0"
-                max="2"
-                step="0.01"
-                value={props.config().pulsatingMax}
-                onInput={(e) => updateConfig("pulsatingMax", parseFloat(e.currentTarget.value))}
-              />
-            </div>
-          </Show>
-
-          <div class="control-group checkbox">
-            <label>
-              <input
-                type="checkbox"
-                checked={props.config().followMouse}
-                onChange={(e) => updateConfig("followMouse", e.currentTarget.checked)}
-              />
-              Follow Mouse
-            </label>
-          </div>
-
-          <button class="reset-button" onClick={() => props.setConfig(defaultConfig)}>
-            Reset to Defaults
-          </button>
-        </div>
-      </Show>
-    </div>
-  )
-}

packages/console/app/src/component/spotlight.css

@@ -0,0 +1,15 @@
+.spotlight-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50dvh;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.spotlight-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,820 @@
+import { createSignal, createEffect, onMount, onCleanup, Accessor } from "solid-js"
+import "./spotlight.css"
+
+export interface ParticlesConfig {
+  enabled: boolean
+  amount: number
+  size: [number, number]
+  speed: number
+  opacity: number
+  drift: number
+}
+
+export interface SpotlightConfig {
+  placement: [number, number]
+  color: string
+  speed: number
+  spread: number
+  length: number
+  width: number
+  pulsating: false | [number, number]
+  distance: number
+  saturation: number
+  noiseAmount: number
+  distortion: number
+  opacity: number
+  particles: ParticlesConfig
+}
+
+export const defaultConfig: SpotlightConfig = {
+  placement: [0.5, -0.15],
+  color: "#ffffff",
+  speed: 0.8,
+  spread: 0.5,
+  length: 4.0,
+  width: 0.15,
+  pulsating: [0.95, 1.1],
+  distance: 3.5,
+  saturation: 0.35,
+  noiseAmount: 0.15,
+  distortion: 0.05,
+  opacity: 0.325,
+  particles: {
+    enabled: true,
+    amount: 70,
+    size: [1.25, 1.5],
+    speed: 0.75,
+    opacity: 0.9,
+    drift: 1.5,
+  },
+}
+
+export interface SpotlightAnimationState {
+  time: number
+  intensity: number
+  pulseValue: number
+}
+
+interface SpotlightProps {
+  config: Accessor<SpotlightConfig>
+  class?: string
+  onAnimationFrame?: (state: SpotlightAnimationState) => void
+}
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [1, 1, 1]
+}
+
+const getAnchorAndDir = (
+  placement: [number, number],
+  w: number,
+  h: number,
+): { anchor: [number, number]; dir: [number, number] } => {
+  const [px, py] = placement
+  const outside = 0.2
+
+  let anchorX = px * w
+  let anchorY = py * h
+  let dirX = 0
+  let dirY = 0
+
+  const centerX = 0.5
+  const centerY = 0.5
+
+  if (py <= 0.25) {
+    anchorY = -outside * h + py * h
+    dirY = 1
+    dirX = (centerX - px) * 0.5
+  } else if (py >= 0.75) {
+    anchorY = (1 + outside) * h - (1 - py) * h
+    dirY = -1
+    dirX = (centerX - px) * 0.5
+  } else if (px <= 0.25) {
+    anchorX = -outside * w + px * w
+    dirX = 1
+    dirY = (centerY - py) * 0.5
+  } else if (px >= 0.75) {
+    anchorX = (1 + outside) * w - (1 - px) * w
+    dirX = -1
+    dirY = (centerY - py) * 0.5
+  } else {
+    dirY = 1
+  }
+
+  const len = Math.sqrt(dirX * dirX + dirY * dirY)
+  if (len > 0) {
+    dirX /= len
+    dirY /= len
+  }
+
+  return { anchor: [anchorX, anchorY], dir: [dirX, dirY] }
+}
+
+interface UniformData {
+  iTime: number
+  iResolution: [number, number]
+  lightPos: [number, number]
+  lightDir: [number, number]
+  color: [number, number, number]
+  speed: number
+  lightSpread: number
+  lightLength: number
+  sourceWidth: number
+  pulsating: number
+  pulsatingMin: number
+  pulsatingMax: number
+  fadeDistance: number
+  saturation: number
+  noiseAmount: number
+  distortion: number
+  particlesEnabled: number
+  particleAmount: number
+  particleSizeMin: number
+  particleSizeMax: number
+  particleSpeed: number
+  particleOpacity: number
+  particleDrift: number
+}
+
+const WGSL_SHADER = `
+  struct Uniforms {
+    iTime: f32,
+    _pad0: f32,
+    iResolution: vec2<f32>,
+    lightPos: vec2<f32>,
+    lightDir: vec2<f32>,
+    color: vec3<f32>, 
+    speed: f32,
+    lightSpread: f32,
+    lightLength: f32,
+    sourceWidth: f32,
+    pulsating: f32,
+    pulsatingMin: f32,
+    pulsatingMax: f32,
+    fadeDistance: f32,
+    saturation: f32,
+    noiseAmount: f32,
+    distortion: f32,
+    particlesEnabled: f32,
+    particleAmount: f32,
+    particleSizeMin: f32,
+    particleSizeMax: f32,
+    particleSpeed: f32,
+    particleOpacity: f32,
+    particleDrift: f32,
+    _pad1: f32,
+    _pad2: f32,
+  };
+
+  @group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+  struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) vUv: vec2<f32>,
+  };
+
+  @vertex
+  fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 3>(
+      vec2<f32>(-1.0, -1.0),
+      vec2<f32>(3.0, -1.0),
+      vec2<f32>(-1.0, 3.0)
+    );
+    
+    var output: VertexOutput;
+    let pos = positions[vertexIndex];
+    output.position = vec4<f32>(pos, 0.0, 1.0);
+    output.vUv = pos * 0.5 + 0.5;
+    return output;
+  }
+
+  fn hash(p: vec2<f32>) -> f32 {
+    let p3 = fract(p.xyx * 0.1031);
+    return fract((p3.x + p3.y) * p3.z + dot(p3, p3.yzx + 33.33));
+  }
+
+  fn hash2(p: vec2<f32>) -> vec2<f32> {
+    let n = sin(dot(p, vec2<f32>(41.0, 289.0)));
+    return fract(vec2<f32>(n * 262144.0, n * 32768.0));
+  }
+
+  fn fastNoise(st: vec2<f32>) -> f32 {
+    return fract(sin(dot(st, vec2<f32>(12.9898, 78.233))) * 43758.5453);
+  }
+
+  fn lightStrengthCombined(lightSource: vec2<f32>, lightRefDirection: vec2<f32>, coord: vec2<f32>) -> f32 {
+    let sourceToCoord = coord - lightSource;
+    let distSq = dot(sourceToCoord, sourceToCoord);
+    let distance = sqrt(distSq);
+    
+    let baseSize = min(uniforms.iResolution.x, uniforms.iResolution.y);
+    let maxDistance = max(baseSize * uniforms.lightLength, 0.001);
+    if (distance > maxDistance) {
+      return 0.0;
+    }
+    
+    let invDist = 1.0 / max(distance, 0.001);
+    let dirNorm = sourceToCoord * invDist;
+    let cosAngle = dot(dirNorm, lightRefDirection);
+    
+    if (cosAngle < 0.0) {
+      return 0.0;
+    }
+
+    let side = dot(dirNorm, vec2<f32>(-lightRefDirection.y, lightRefDirection.x));
+    let time = uniforms.iTime;
+    let speed = uniforms.speed;
+    
+    let asymNoise = fastNoise(vec2<f32>(side * 6.0 + time * 0.12, distance * 0.004 + cosAngle * 2.0));
+    let asymShift = (asymNoise - 0.5) * uniforms.distortion * 0.6;
+    
+    let distortPhase = time * 1.4 + distance * 0.006 + cosAngle * 4.5 + side * 1.7;
+    let distortedAngle = cosAngle + uniforms.distortion * sin(distortPhase) * 0.22 + asymShift;
+    
+    let flickerSeed = cosAngle * 9.0 + side * 4.0 + time * speed * 0.35;
+    let flicker = 0.86 + fastNoise(vec2<f32>(flickerSeed, distance * 0.01)) * 0.28;
+    
+    let asymSpread = max(uniforms.lightSpread * (0.9 + (asymNoise - 0.5) * 0.25), 0.001);
+    let spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / asymSpread);
+    let lengthFalloff = clamp(1.0 - distance / maxDistance, 0.0, 1.0);
+    
+    let fadeMaxDist = max(baseSize * uniforms.fadeDistance, 0.001);
+    let fadeFalloff = clamp((fadeMaxDist - distance) / fadeMaxDist, 0.0, 1.0);
+    
+    var pulse: f32 = 1.0;
+    if (uniforms.pulsating > 0.5) {
+      let pulseCenter = (uniforms.pulsatingMin + uniforms.pulsatingMax) * 0.5;
+      let pulseAmplitude = (uniforms.pulsatingMax - uniforms.pulsatingMin) * 0.5;
+      pulse = pulseCenter + pulseAmplitude * sin(time * speed * 3.0);
+    }
+
+    let timeSpeed = time * speed;
+    let wave = 0.5
+      + 0.25 * sin(cosAngle * 28.0 + side * 8.0 + timeSpeed * 1.2)
+      + 0.18 * cos(cosAngle * 22.0 - timeSpeed * 0.95 + side * 6.0)
+      + 0.12 * sin(cosAngle * 35.0 + timeSpeed * 1.6 + asymNoise * 3.0);
+    let minStrength = 0.14 + asymNoise * 0.06;
+    let baseStrength = max(clamp(wave * (0.85 + asymNoise * 0.3), 0.0, 1.0), minStrength);
+
+    let lightStrength = baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse * flicker;
+    let ambientLight = (0.06 + asymNoise * 0.04) * lengthFalloff * fadeFalloff * spreadFactor;
+
+    return max(lightStrength, ambientLight);
+  }
+
+  fn particle(coord: vec2<f32>, particlePos: vec2<f32>, size: f32) -> f32 {
+    let delta = coord - particlePos;
+    let distSq = dot(delta, delta);
+    let sizeSq = size * size;
+    
+    if (distSq > sizeSq * 9.0) {
+      return 0.0;
+    }
+    
+    let d = sqrt(distSq);
+    let core = smoothstep(size, size * 0.35, d);
+    let glow = smoothstep(size * 3.0, 0.0, d) * 0.55;
+    return core + glow;
+  }
+
+  fn renderParticles(coord: vec2<f32>, lightSource: vec2<f32>, lightDir: vec2<f32>) -> f32 {
+    if (uniforms.particlesEnabled < 0.5 || uniforms.particleAmount < 1.0) {
+      return 0.0;
+    }
+
+    var particleSum: f32 = 0.0;
+    let particleCount = i32(uniforms.particleAmount);
+    let time = uniforms.iTime * uniforms.particleSpeed;
+    let perpDir = vec2<f32>(-lightDir.y, lightDir.x);
+    let baseSize = min(uniforms.iResolution.x, uniforms.iResolution.y);
+    let maxDist = max(baseSize * uniforms.lightLength, 1.0);
+    let spreadScale = uniforms.lightSpread * baseSize * 0.65;
+    let coneHalfWidth = uniforms.lightSpread * baseSize * 0.55;
+    
+    for (var i: i32 = 0; i < particleCount; i = i + 1) {
+      let fi = f32(i);
+      let seed = vec2<f32>(fi * 127.1, fi * 311.7);
+      let rnd = hash2(seed);
+      
+      let lifeDuration = 2.0 + hash(seed + vec2<f32>(19.0, 73.0)) * 3.0;
+      let lifeOffset = hash(seed + vec2<f32>(91.0, 37.0)) * lifeDuration;
+      let lifeProgress = fract((time + lifeOffset) / lifeDuration);
+      
+      let fadeIn = smoothstep(0.0, 0.2, lifeProgress);
+      let fadeOut = 1.0 - smoothstep(0.8, 1.0, lifeProgress);
+      let lifeFade = fadeIn * fadeOut;
+      if (lifeFade < 0.01) {
+        continue;
+      }
+      
+      let alongLight = rnd.x * maxDist * 0.8;
+      let perpOffset = (rnd.y - 0.5) * spreadScale;
+      
+      let floatPhase = rnd.y * 6.28318 + fi * 0.37;
+      let floatSpeed = 0.35 + rnd.x * 0.9;
+      let drift = vec2<f32>(
+        sin(time * floatSpeed + floatPhase),
+        cos(time * floatSpeed * 0.85 + floatPhase * 1.3)
+      ) * uniforms.particleDrift * baseSize * 0.08;
+      
+      let wobble = vec2<f32>(
+        sin(time * 1.4 + floatPhase * 2.1),
+        cos(time * 1.1 + floatPhase * 1.6)
+      ) * uniforms.particleDrift * baseSize * 0.03;
+      
+      let flowOffset = (rnd.x - 0.5) * baseSize * 0.12 + fract(time * 0.06 + rnd.y) * baseSize * 0.1;
+      
+      let basePos = lightSource + lightDir * (alongLight + flowOffset) + perpDir * perpOffset + drift + wobble;
+      
+      let toParticle = basePos - lightSource;
+      let projLen = dot(toParticle, lightDir);
+      if (projLen < 0.0 || projLen > maxDist) {
+        continue;
+      }
+      
+      let sideDist = abs(dot(toParticle, perpDir));
+      if (sideDist > coneHalfWidth) {
+        continue;
+      }
+      
+      let size = mix(uniforms.particleSizeMin, uniforms.particleSizeMax, rnd.x);
+      let twinkle = 0.7 + 0.3 * sin(time * (1.5 + rnd.y * 2.0) + floatPhase);
+      let distFade = 1.0 - smoothstep(maxDist * 0.2, maxDist * 0.95, projLen);
+      if (distFade < 0.01) {
+        continue;
+      }
+      
+      let p = particle(coord, basePos, size);
+      if (p > 0.0) {
+        particleSum = particleSum + p * lifeFade * twinkle * distFade * uniforms.particleOpacity;
+        if (particleSum >= 1.0) {
+          break;
+        }
+      }
+    }
+    
+    return min(particleSum, 1.0);
+  }
+
+  @fragment
+  fn fragmentMain(@builtin(position) fragCoord: vec4<f32>, @location(0) vUv: vec2<f32>) -> @location(0) vec4<f32> {
+    let coord = vec2<f32>(fragCoord.x, fragCoord.y);
+    
+    let normalizedX = (coord.x / uniforms.iResolution.x) - 0.5;
+    let widthOffset = -normalizedX * uniforms.sourceWidth * uniforms.iResolution.x;
+    
+    let perpDir = vec2<f32>(-uniforms.lightDir.y, uniforms.lightDir.x);
+    let adjustedLightPos = uniforms.lightPos + perpDir * widthOffset;
+    
+    let lightValue = lightStrengthCombined(adjustedLightPos, uniforms.lightDir, coord);
+    
+    if (lightValue < 0.001) {
+      let particles = renderParticles(coord, adjustedLightPos, uniforms.lightDir);
+      if (particles < 0.001) {
+        return vec4<f32>(0.0, 0.0, 0.0, 0.0);
+      }
+      let particleBrightness = particles * 1.8;
+      return vec4<f32>(uniforms.color * particleBrightness, particles * 0.9);
+    }
+
+    var fragColor = vec4<f32>(lightValue, lightValue, lightValue, lightValue);
+
+    if (uniforms.noiseAmount > 0.01) {
+      let n = fastNoise(coord * 0.5 + uniforms.iTime * 0.5);
+      let grain = mix(1.0, n, uniforms.noiseAmount * 0.5);
+      fragColor = vec4<f32>(fragColor.rgb * grain, fragColor.a);
+    }
+
+    let brightness = 1.0 - (coord.y / uniforms.iResolution.y);
+    fragColor = vec4<f32>(
+      fragColor.x * (0.15 + brightness * 0.85),
+      fragColor.y * (0.35 + brightness * 0.65),
+      fragColor.z * (0.55 + brightness * 0.45),
+      fragColor.a
+    );
+
+    if (abs(uniforms.saturation - 1.0) > 0.01) {
+      let gray = dot(fragColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
+      fragColor = vec4<f32>(mix(vec3<f32>(gray), fragColor.rgb, uniforms.saturation), fragColor.a);
+    }
+
+    fragColor = vec4<f32>(fragColor.rgb * uniforms.color, fragColor.a);
+    
+    let particles = renderParticles(coord, adjustedLightPos, uniforms.lightDir);
+    if (particles > 0.001) {
+      let particleBrightness = particles * 1.8;
+      fragColor = vec4<f32>(fragColor.rgb + uniforms.color * particleBrightness, max(fragColor.a, particles * 0.9));
+    }
+    
+    return fragColor;
+  }
+`
+
+const UNIFORM_BUFFER_SIZE = 144
+
+function updateUniformBuffer(buffer: Float32Array, data: UniformData): void {
+  buffer[0] = data.iTime
+  buffer[2] = data.iResolution[0]
+  buffer[3] = data.iResolution[1]
+  buffer[4] = data.lightPos[0]
+  buffer[5] = data.lightPos[1]
+  buffer[6] = data.lightDir[0]
+  buffer[7] = data.lightDir[1]
+  buffer[8] = data.color[0]
+  buffer[9] = data.color[1]
+  buffer[10] = data.color[2]
+  buffer[11] = data.speed
+  buffer[12] = data.lightSpread
+  buffer[13] = data.lightLength
+  buffer[14] = data.sourceWidth
+  buffer[15] = data.pulsating
+  buffer[16] = data.pulsatingMin
+  buffer[17] = data.pulsatingMax
+  buffer[18] = data.fadeDistance
+  buffer[19] = data.saturation
+  buffer[20] = data.noiseAmount
+  buffer[21] = data.distortion
+  buffer[22] = data.particlesEnabled
+  buffer[23] = data.particleAmount
+  buffer[24] = data.particleSizeMin
+  buffer[25] = data.particleSizeMax
+  buffer[26] = data.particleSpeed
+  buffer[27] = data.particleOpacity
+  buffer[28] = data.particleDrift
+}
+
+export default function Spotlight(props: SpotlightProps) {
+  let containerRef: HTMLDivElement | undefined
+  let canvasRef: HTMLCanvasElement | null = null
+  let deviceRef: GPUDevice | null = null
+  let contextRef: GPUCanvasContext | null = null
+  let pipelineRef: GPURenderPipeline | null = null
+  let uniformBufferRef: GPUBuffer | null = null
+  let bindGroupRef: GPUBindGroup | null = null
+  let animationIdRef: number | null = null
+  let cleanupFunctionRef: (() => void) | null = null
+  let uniformDataRef: UniformData | null = null
+  let uniformArrayRef: Float32Array | null = null
+  let configRef: SpotlightConfig = props.config()
+  let frameCount = 0
+
+  const [isVisible, setIsVisible] = createSignal(false)
+
+  createEffect(() => {
+    configRef = props.config()
+  })
+
+  onMount(() => {
+    if (!containerRef) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        setIsVisible(entry.isIntersecting)
+      },
+      { threshold: 0.1 },
+    )
+
+    observer.observe(containerRef)
+
+    onCleanup(() => {
+      observer.disconnect()
+    })
+  })
+
+  createEffect(() => {
+    const visible = isVisible()
+    const config = props.config()
+    if (!visible || !containerRef) {
+      return
+    }
+
+    if (cleanupFunctionRef) {
+      cleanupFunctionRef()
+      cleanupFunctionRef = null
+    }
+
+    const initializeWebGPU = async () => {
+      if (!containerRef) {
+        return
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 10))
+
+      if (!containerRef) {
+        return
+      }
+
+      if (!navigator.gpu) {
+        console.warn("WebGPU is not supported in this browser")
+        return
+      }
+
+      const adapter = await navigator.gpu.requestAdapter({
+        powerPreference: "high-performance",
+      })
+      if (!adapter) {
+        console.warn("Failed to get WebGPU adapter")
+        return
+      }
+
+      const device = await adapter.requestDevice()
+      deviceRef = device
+
+      const canvas = document.createElement("canvas")
+      canvas.style.width = "100%"
+      canvas.style.height = "100%"
+      canvasRef = canvas
+
+      while (containerRef.firstChild) {
+        containerRef.removeChild(containerRef.firstChild)
+      }
+      containerRef.appendChild(canvas)
+
+      const context = canvas.getContext("webgpu")
+      if (!context) {
+        console.warn("Failed to get WebGPU context")
+        return
+      }
+      contextRef = context
+
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat()
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: "premultiplied",
+      })
+
+      const shaderModule = device.createShaderModule({
+        code: WGSL_SHADER,
+      })
+
+      const uniformBuffer = device.createBuffer({
+        size: UNIFORM_BUFFER_SIZE,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      })
+      uniformBufferRef = uniformBuffer
+
+      const bindGroupLayout = device.createBindGroupLayout({
+        entries: [
+          {
+            binding: 0,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            buffer: { type: "uniform" },
+          },
+        ],
+      })
+
+      const bindGroup = device.createBindGroup({
+        layout: bindGroupLayout,
+        entries: [
+          {
+            binding: 0,
+            resource: { buffer: uniformBuffer },
+          },
+        ],
+      })
+      bindGroupRef = bindGroup
+
+      const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout],
+      })
+
+      const pipeline = device.createRenderPipeline({
+        layout: pipelineLayout,
+        vertex: {
+          module: shaderModule,
+          entryPoint: "vertexMain",
+        },
+        fragment: {
+          module: shaderModule,
+          entryPoint: "fragmentMain",
+          targets: [
+            {
+              format: presentationFormat,
+              blend: {
+                color: {
+                  srcFactor: "src-alpha",
+                  dstFactor: "one-minus-src-alpha",
+                  operation: "add",
+                },
+                alpha: {
+                  srcFactor: "one",
+                  dstFactor: "one-minus-src-alpha",
+                  operation: "add",
+                },
+              },
+            },
+          ],
+        },
+        primitive: {
+          topology: "triangle-list",
+        },
+      })
+      pipelineRef = pipeline
+
+      const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
+      const dpr = Math.min(window.devicePixelRatio, 2)
+      const w = wCSS * dpr
+      const h = hCSS * dpr
+      const { anchor, dir } = getAnchorAndDir(config.placement, w, h)
+
+      uniformDataRef = {
+        iTime: 0,
+        iResolution: [w, h],
+        lightPos: anchor,
+        lightDir: dir,
+        color: hexToRgb(config.color),
+        speed: config.speed,
+        lightSpread: config.spread,
+        lightLength: config.length,
+        sourceWidth: config.width,
+        pulsating: config.pulsating !== false ? 1.0 : 0.0,
+        pulsatingMin: config.pulsating !== false ? config.pulsating[0] : 1.0,
+        pulsatingMax: config.pulsating !== false ? config.pulsating[1] : 1.0,
+        fadeDistance: config.distance,
+        saturation: config.saturation,
+        noiseAmount: config.noiseAmount,
+        distortion: config.distortion,
+        particlesEnabled: config.particles.enabled ? 1.0 : 0.0,
+        particleAmount: config.particles.amount,
+        particleSizeMin: config.particles.size[0],
+        particleSizeMax: config.particles.size[1],
+        particleSpeed: config.particles.speed,
+        particleOpacity: config.particles.opacity,
+        particleDrift: config.particles.drift,
+      }
+
+      const updatePlacement = () => {
+        if (!containerRef || !canvasRef || !uniformDataRef) {
+          return
+        }
+
+        const dpr = Math.min(window.devicePixelRatio, 2)
+        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
+        const w = Math.floor(wCSS * dpr)
+        const h = Math.floor(hCSS * dpr)
+
+        canvasRef.width = w
+        canvasRef.height = h
+
+        uniformDataRef.iResolution = [w, h]
+
+        const { anchor, dir } = getAnchorAndDir(configRef.placement, w, h)
+        uniformDataRef.lightPos = anchor
+        uniformDataRef.lightDir = dir
+      }
+
+      const loop = (t: number) => {
+        if (!deviceRef || !contextRef || !pipelineRef || !uniformBufferRef || !bindGroupRef || !uniformDataRef) {
+          return
+        }
+
+        const timeSeconds = t * 0.001
+        uniformDataRef.iTime = timeSeconds
+        frameCount++
+
+        if (props.onAnimationFrame && frameCount % 2 === 0) {
+          const pulsatingMin = configRef.pulsating !== false ? configRef.pulsating[0] : 1.0
+          const pulsatingMax = configRef.pulsating !== false ? configRef.pulsating[1] : 1.0
+          const pulseCenter = (pulsatingMin + pulsatingMax) * 0.5
+          const pulseAmplitude = (pulsatingMax - pulsatingMin) * 0.5
+          const pulseValue =
+            configRef.pulsating !== false
+              ? pulseCenter + pulseAmplitude * Math.sin(timeSeconds * configRef.speed * 3.0)
+              : 1.0
+
+          const baseIntensity1 = 0.45 + 0.15 * Math.sin(timeSeconds * configRef.speed * 1.5)
+          const baseIntensity2 = 0.3 + 0.2 * Math.cos(timeSeconds * configRef.speed * 1.1)
+          const intensity = Math.max((baseIntensity1 + baseIntensity2) * pulseValue, 0.55)
+
+          props.onAnimationFrame({
+            time: timeSeconds,
+            intensity,
+            pulseValue: Math.max(pulseValue, 0.9),
+          })
+        }
+
+        try {
+          if (!uniformArrayRef) {
+            uniformArrayRef = new Float32Array(36)
+          }
+          updateUniformBuffer(uniformArrayRef, uniformDataRef)
+          deviceRef.queue.writeBuffer(uniformBufferRef, 0, uniformArrayRef.buffer)
+
+          const commandEncoder = deviceRef.createCommandEncoder()
+
+          const textureView = contextRef.getCurrentTexture().createView()
+
+          const renderPass = commandEncoder.beginRenderPass({
+            colorAttachments: [
+              {
+                view: textureView,
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                loadOp: "clear",
+                storeOp: "store",
+              },
+            ],
+          })
+
+          renderPass.setPipeline(pipelineRef)
+          renderPass.setBindGroup(0, bindGroupRef)
+          renderPass.draw(3)
+          renderPass.end()
+
+          deviceRef.queue.submit([commandEncoder.finish()])
+
+          animationIdRef = requestAnimationFrame(loop)
+        } catch (error) {
+          console.warn("WebGPU rendering error:", error)
+          return
+        }
+      }
+
+      window.addEventListener("resize", updatePlacement)
+      updatePlacement()
+      animationIdRef = requestAnimationFrame(loop)
+
+      cleanupFunctionRef = () => {
+        if (animationIdRef) {
+          cancelAnimationFrame(animationIdRef)
+          animationIdRef = null
+        }
+
+        window.removeEventListener("resize", updatePlacement)
+
+        if (uniformBufferRef) {
+          uniformBufferRef.destroy()
+          uniformBufferRef = null
+        }
+
+        if (deviceRef) {
+          deviceRef.destroy()
+          deviceRef = null
+        }
+
+        if (canvasRef && canvasRef.parentNode) {
+          canvasRef.parentNode.removeChild(canvasRef)
+        }
+
+        canvasRef = null
+        contextRef = null
+        pipelineRef = null
+        bindGroupRef = null
+        uniformDataRef = null
+      }
+    }
+
+    initializeWebGPU()
+
+    onCleanup(() => {
+      if (cleanupFunctionRef) {
+        cleanupFunctionRef()
+        cleanupFunctionRef = null
+      }
+    })
+  })
+
+  createEffect(() => {
+    if (!uniformDataRef || !containerRef) {
+      return
+    }
+
+    const config = props.config()
+
+    uniformDataRef.color = hexToRgb(config.color)
+    uniformDataRef.speed = config.speed
+    uniformDataRef.lightSpread = config.spread
+    uniformDataRef.lightLength = config.length
+    uniformDataRef.sourceWidth = config.width
+    uniformDataRef.pulsating = config.pulsating !== false ? 1.0 : 0.0
+    uniformDataRef.pulsatingMin = config.pulsating !== false ? config.pulsating[0] : 1.0
+    uniformDataRef.pulsatingMax = config.pulsating !== false ? config.pulsating[1] : 1.0
+    uniformDataRef.fadeDistance = config.distance
+    uniformDataRef.saturation = config.saturation
+    uniformDataRef.noiseAmount = config.noiseAmount
+    uniformDataRef.distortion = config.distortion
+    uniformDataRef.particlesEnabled = config.particles.enabled ? 1.0 : 0.0
+    uniformDataRef.particleAmount = config.particles.amount
+    uniformDataRef.particleSizeMin = config.particles.size[0]
+    uniformDataRef.particleSizeMax = config.particles.size[1]
+    uniformDataRef.particleSpeed = config.particles.speed
+    uniformDataRef.particleOpacity = config.particles.opacity
+    uniformDataRef.particleDrift = config.particles.drift
+
+    const dpr = Math.min(window.devicePixelRatio, 2)
+    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
+    const { anchor, dir } = getAnchorAndDir(config.placement, wCSS * dpr, hCSS * dpr)
+    uniformDataRef.lightPos = anchor
+    uniformDataRef.lightDir = dir
+  })
+
+  return (
+    <div
+      ref={containerRef}
+      class={`spotlight-container ${props.class ?? ""}`.trim()}
+      style={{ opacity: props.config().opacity }}
+    />
+  )
+}

packages/console/app/src/config.ts

@@ -9,8 +9,8 @@ export const config = {
   github: {
     repoUrl: "https://github.com/anomalyco/opencode",
     starsFormatted: {
-      compact: "60K",
-      full: "60,000",
+      compact: "70K",
+      full: "70,000",
     },
   },
 
@@ -23,7 +23,7 @@ export const config = {
   // Static stats (used on landing page)
   stats: {
     contributors: "500",
-    commits: "6,500",
+    commits: "7,000",
     monthlyUsers: "650,000",
   },
 } as const

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

@@ -89,47 +89,26 @@
   animation: reveal-terms 300ms cubic-bezier(0.25, 0, 0.5, 1) 50ms forwards;
 }
 
-::view-transition-old(action-20),
-::view-transition-old(action-100),
-::view-transition-old(action-200) {
-  animation: fade-out 100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+::view-transition-old(actions-20),
+::view-transition-old(actions-100),
+::view-transition-old(actions-200) {
+  animation: fade-out 80ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-::view-transition-new(action-20),
-::view-transition-new(action-100),
-::view-transition-new(action-200) {
-  animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
+::view-transition-new(actions-20),
+::view-transition-new(actions-100),
+::view-transition-new(actions-200) {
+  animation: fade-in-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
   opacity: 0;
 }
 
-::view-transition-group(plan-card-20),
-::view-transition-group(plan-card-100),
-::view-transition-group(plan-card-200) {
-  animation-duration: 200ms;
+::view-transition-group(card-20),
+::view-transition-group(card-100),
+::view-transition-group(card-200) {
+  animation-duration: 250ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-::view-transition-image-pair(plan-card-20),
-::view-transition-image-pair(plan-card-100),
-::view-transition-image-pair(plan-card-200) {
-  isolation: isolate;
-}
-
-::view-transition-old(plan-card-20),
-::view-transition-old(plan-card-100),
-::view-transition-old(plan-card-200) {
-  animation: fade-out 120ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  mix-blend-mode: normal;
-}
-
-::view-transition-new(plan-card-20),
-::view-transition-new(plan-card-100),
-::view-transition-new(plan-card-200) {
-  animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) 50ms forwards;
-  opacity: 0;
-  mix-blend-mode: normal;
-}
-
 [data-page="black"] {
   background: #000;
   min-height: 100vh;
@@ -362,8 +341,7 @@
         gap: 12px;
         padding: 24px;
         border: 1px solid rgba(255, 255, 255, 0.17);
-        background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(4px);
+        background: black;
         background-clip: padding-box;
         border-radius: 4px;
         text-decoration: none;
@@ -421,7 +399,6 @@
         margin: 0 auto;
         position: relative;
         background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(4px);
         z-index: 1;
 
         @media (max-width: 480px) {
@@ -604,6 +581,8 @@
 
       [data-slot="icon"] {
         color: rgba(255, 255, 255, 0.59);
+        isolation: isolate;
+        transform: translateZ(0);
       }
 
       [data-slot="price"] {

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

@@ -3,7 +3,7 @@ import { Title, Meta, Link } from "@solidjs/meta"
 import { createMemo, createSignal } from "solid-js"
 import { github } from "~/lib/github"
 import { config } from "~/config"
-import LightRays, { defaultConfig, type LightRaysConfig, type LightRaysAnimationState } from "~/component/light-rays"
+import Spotlight, { defaultConfig, type SpotlightAnimationState } from "~/component/spotlight"
 import "./black.css"
 
 export default function BlackLayout(props: RouteSectionProps) {
@@ -17,15 +17,14 @@ export default function BlackLayout(props: RouteSectionProps) {
       : config.github.starsFormatted.compact,
   )
 
-  const [lightRaysConfig, setLightRaysConfig] = createSignal<LightRaysConfig>(defaultConfig)
-  const [rayAnimationState, setRayAnimationState] = createSignal<LightRaysAnimationState>({
+  const [spotlightAnimationState, setSpotlightAnimationState] = createSignal<SpotlightAnimationState>({
     time: 0,
     intensity: 0.5,
     pulseValue: 1,
   })
 
   const svgLightingValues = createMemo(() => {
-    const state = rayAnimationState()
+    const state = spotlightAnimationState()
     const t = state.time
 
     const wave1 = Math.sin(t * 1.5) * 0.5 + 0.5
@@ -33,11 +32,11 @@ export default function BlackLayout(props: RouteSectionProps) {
     const wave3 = Math.sin(t * 0.8 + 2.5) * 0.5 + 0.5
 
     const shimmerPos = Math.sin(t * 0.7) * 0.5 + 0.5
-    const glowIntensity = state.intensity * state.pulseValue * 0.35
-    const fillOpacity = 0.1 + wave1 * 0.08 * state.pulseValue
-    const strokeBrightness = 55 + wave2 * 25 * state.pulseValue
+    const glowIntensity = Math.max(state.intensity * state.pulseValue * 0.35, 0.15)
+    const fillOpacity = Math.max(0.1 + wave1 * 0.08 * state.pulseValue, 0.12)
+    const strokeBrightness = Math.max(55 + wave2 * 25 * state.pulseValue, 60)
 
-    const shimmerIntensity = wave3 * 0.15 * state.pulseValue
+    const shimmerIntensity = Math.max(wave3 * 0.15 * state.pulseValue, 0.08)
 
     return {
       glowIntensity,
@@ -56,10 +55,12 @@ export default function BlackLayout(props: RouteSectionProps) {
     } as Record<string, string>
   })
 
-  const handleAnimationFrame = (state: LightRaysAnimationState) => {
-    setRayAnimationState(state)
+  const handleAnimationFrame = (state: SpotlightAnimationState) => {
+    setSpotlightAnimationState(state)
   }
 
+  const spotlightConfig = () => defaultConfig
+
   return (
     <div data-page="black">
       <Title>OpenCode Black | Access all the world's best coding models</Title>
@@ -84,7 +85,7 @@ export default function BlackLayout(props: RouteSectionProps) {
       />
       <Meta name="twitter:image" content="/social-share-black.png" />
 
-      <LightRays config={lightRaysConfig} class="header-light-rays" onAnimationFrame={handleAnimationFrame} />
+      <Spotlight config={spotlightConfig} class="header-spotlight" onAnimationFrame={handleAnimationFrame} />
 
       <header data-component="header">
         <A href="/" data-component="header-logo">

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

@@ -49,10 +49,10 @@ export default function Black() {
                     data-slot="pricing-card"
                     style={{ "view-transition-name": `card-${plan.id}` }}
                   >
-                    <div data-slot="icon" style={{ "view-transition-name": `icon-${plan.id}` }}>
+                    <div data-slot="icon">
                       <PlanIcon plan={plan.id} />
                     </div>
-                    <p data-slot="price" style={{ "view-transition-name": `price-${plan.id}` }}>
+                    <p data-slot="price">
                       <span data-slot="amount">${plan.id}</span> <span data-slot="period">per month</span>
                       <Show when={plan.multiplier}>
                         <span data-slot="multiplier">{plan.multiplier}</span>
@@ -67,76 +67,6 @@ export default function Black() {
             {(plan) => (
               <div data-slot="selected-plan">
                 <div data-slot="selected-card" style={{ "view-transition-name": `card-${plan().id}` }}>
-                  <div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}>
-                    <PlanIcon plan={plan().id} />
-                  </div>
-                  <p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}>
-                    <span data-slot="amount">${plan().id}</span>{" "}
-                    <span data-slot="period">per person billed monthly</span>
-                    <Show when={plan().multiplier}>
-                      <span data-slot="multiplier">{plan().multiplier}</span>
-                    </Show>
-                  </p>
-                  <ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
-                    <li>Your subscription will not start immediately</li>
-                    <li>You will be added to the waitlist and activated soon</li>
-                    <li>Your card will be only charged when your subscription is activated</li>
-                    <li>Usage limits apply, heavily automated use may reach limits sooner</li>
-                    <li>Subscriptions for individuals, contact Enterprise for teams</li>
-                    <li>Limits may be adjusted and plans may be discontinued in the future</li>
-                    <li>Cancel your subscription at anytime</li>
-                  </ul>
-                  <div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
-                    <button type="button" onClick={() => cancel()} data-slot="cancel">
-                      Cancel
-                    </button>
-                    <a href={`/black/subscribe/${plan().id}`} data-slot="continue">
-                      Continue
-                    </a>
-                  </div>
-                </div>
-              </div>
-            )}
-          </Match>
-          <Match when={selectedPlan()}>
-            {(plan) => (
-              <div data-slot="selected-plan">
-                <div data-slot="selected-card">
-                  <div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}>
-                    <PlanIcon plan={plan().id} />
-                  </div>
-                  <p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}>
-                    <span data-slot="amount">${plan().id}</span>{" "}
-                    <span data-slot="period">per person billed monthly</span>
-                    <Show when={plan().multiplier}>
-                      <span data-slot="multiplier">{plan().multiplier}</span>
-                    </Show>
-                  </p>
-                  <ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
-                    <li>Your subscription will not start immediately</li>
-                    <li>You will be added to the waitlist and activated soon</li>
-                    <li>Your card will be only charged when your subscription is activated</li>
-                    <li>Usage limits apply, heavily automated use may reach limits sooner</li>
-                    <li>Subscriptions for individuals, contact Enterprise for teams</li>
-                    <li>Limits may be adjusted and plans may be discontinued in the future</li>
-                    <li>Cancel your subscription at anytime</li>
-                  </ul>
-                  <div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
-                    <button type="button" onClick={() => cancel()} data-slot="cancel">
-                      Cancel
-                    </button>
-                    <a href={`/black/subscribe/${plan().id}`} data-slot="continue">
-                      Continue
-                    </a>
-                  </div>
-                </div>
-              </div>
-            )}
-          </Match>
-          <Match when={selectedPlan()}>
-            {(plan) => (
-              <div data-slot="selected-plan" style={{ "view-transition-name": "selected-plan" }}>
-                <div data-slot="selected-card">
                   <div data-slot="icon">
                     <PlanIcon plan={plan().id} />
                   </div>

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

@@ -183,7 +183,12 @@ export async function POST(input: APIEvent) {
             .set({
               customerID,
               subscriptionID,
-              subscriptionCouponID: couponID,
+              subscription: {
+                status: "subscribed",
+                coupon: couponID,
+                seats: 1,
+                plan: "200",
+              },
               paymentMethodID: paymentMethod.id,
               paymentMethodLast4: paymentMethod.card?.last4 ?? null,
               paymentMethodType: paymentMethod.type,
@@ -408,7 +413,7 @@ export async function POST(input: APIEvent) {
       await Database.transaction(async (tx) => {
         await tx
           .update(BillingTable)
-          .set({ subscriptionID: null, subscriptionCouponID: null })
+          .set({ subscriptionID: null, subscription: null })
           .where(eq(BillingTable.workspaceID, workspaceID))
 
         await tx.delete(SubscriptionTable).where(eq(SubscriptionTable.workspaceID, workspaceID))

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

@@ -81,12 +81,13 @@ export async function handler(
     const isTrial = await trialLimiter?.isTrial()
     const rateLimiter = createRateLimiter(modelInfo.rateLimit, ip)
     await rateLimiter?.check()
-    const stickyTracker = createStickyTracker(modelInfo.stickyProvider ?? false, sessionId)
+    const stickyTracker = createStickyTracker(modelInfo.stickyProvider, sessionId)
     const stickyProvider = await stickyTracker?.get()
     const authInfo = await authenticate(modelInfo)
 
     const retriableRequest = async (retry: RetryOptions = { excludeProviders: [], retryCount: 0 }) => {
       const providerInfo = selectProvider(
+        model,
         zenData,
         authInfo,
         modelInfo,
@@ -101,7 +102,7 @@ export async function handler(
       logger.metric({ provider: providerInfo.id })
 
       const startTimestamp = Date.now()
-      const reqUrl = providerInfo.modifyUrl(providerInfo.api, providerInfo.model, isStream)
+      const reqUrl = providerInfo.modifyUrl(providerInfo.api, isStream)
       const reqBody = JSON.stringify(
         providerInfo.modifyBody({
           ...createBodyConverter(opts.format, providerInfo.format)(body),
@@ -135,7 +136,7 @@ export async function handler(
         // ie. openai 404 error: Item with id 'msg_0ead8b004a3b165d0069436a6b6834819896da85b63b196a3f' not found.
         res.status !== 404 &&
         // ie. cannot change codex model providers mid-session
-        !modelInfo.stickyProvider &&
+        modelInfo.stickyProvider !== "strict" &&
         modelInfo.fallbackProvider &&
         providerInfo.id !== modelInfo.fallbackProvider
       ) {
@@ -194,17 +195,19 @@ export async function handler(
     // Handle streaming response
     const streamConverter = createStreamPartConverter(providerInfo.format, opts.format)
     const usageParser = providerInfo.createUsageParser()
+    const binaryDecoder = providerInfo.createBinaryStreamDecoder()
     const stream = new ReadableStream({
       start(c) {
         const reader = res.body?.getReader()
         const decoder = new TextDecoder()
         const encoder = new TextEncoder()
+
         let buffer = ""
         let responseLength = 0
 
         function pump(): Promise<void> {
           return (
-            reader?.read().then(async ({ done, value }) => {
+            reader?.read().then(async ({ done, value: rawValue }) => {
               if (done) {
                 logger.metric({
                   response_length: responseLength,
@@ -230,6 +233,10 @@ export async function handler(
                   "timestamp.first_byte": now,
                 })
               }
+
+              const value = binaryDecoder ? binaryDecoder(rawValue) : rawValue
+              if (!value) return
+
               responseLength += value.length
               buffer += decoder.decode(value, { stream: true })
               dataDumper?.provideStream(buffer)
@@ -331,6 +338,7 @@ export async function handler(
   }
 
   function selectProvider(
+    reqModel: string,
     zenData: ZenData,
     authInfo: AuthInfo,
     modelInfo: ModelInfo,
@@ -339,7 +347,7 @@ export async function handler(
     retry: RetryOptions,
     stickyProvider: string | undefined,
   ) {
-    const provider = (() => {
+    const modelProvider = (() => {
       if (authInfo?.provider?.credentials) {
         return modelInfo.providers.find((provider) => provider.id === modelInfo.byokProvider)
       }
@@ -372,18 +380,19 @@ export async function handler(
       return providers[index || 0]
     })()
 
-    if (!provider) throw new ModelError("No provider available")
-    if (!(provider.id in zenData.providers)) throw new ModelError(`Provider ${provider.id} not supported`)
+    if (!modelProvider) throw new ModelError("No provider available")
+    if (!(modelProvider.id in zenData.providers)) throw new ModelError(`Provider ${modelProvider.id} not supported`)
 
     return {
-      ...provider,
-      ...zenData.providers[provider.id],
+      ...modelProvider,
+      ...zenData.providers[modelProvider.id],
       ...(() => {
-        const format = zenData.providers[provider.id].format
-        if (format === "anthropic") return anthropicHelper
-        if (format === "google") return googleHelper
-        if (format === "openai") return openaiHelper
-        return oaCompatHelper
+        const format = zenData.providers[modelProvider.id].format
+        const providerModel = modelProvider.model
+        if (format === "anthropic") return anthropicHelper({ reqModel, providerModel })
+        if (format === "google") return googleHelper({ reqModel, providerModel })
+        if (format === "openai") return openaiHelper({ reqModel, providerModel })
+        return oaCompatHelper({ reqModel, providerModel })
       })(),
     }
   }

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

@@ -1,4 +1,6 @@
+import { EventStreamCodec } from "@smithy/eventstream-codec"
 import { ProviderHelper, CommonRequest, CommonResponse, CommonChunk } from "./provider"
+import { fromUtf8, toUtf8 } from "@smithy/util-utf8"
 
 type Usage = {
   cache_creation?: {
@@ -14,65 +16,169 @@ type Usage = {
   }
 }
 
-export const anthropicHelper = {
-  format: "anthropic",
-  modifyUrl: (providerApi: string) => providerApi + "/messages",
-  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
-    headers.set("x-api-key", apiKey)
-    headers.set("anthropic-version", headers.get("anthropic-version") ?? "2023-06-01")
-    if (body.model.startsWith("claude-sonnet-")) {
-      headers.set("anthropic-beta", "context-1m-2025-08-07")
-    }
-  },
-  modifyBody: (body: Record<string, any>) => {
-    return {
+export const anthropicHelper: ProviderHelper = ({ reqModel, providerModel }) => {
+  const isBedrockModelArn = providerModel.startsWith("arn:aws:bedrock:")
+  const isBedrockModelID = providerModel.startsWith("global.anthropic.")
+  const isBedrock = isBedrockModelArn || isBedrockModelID
+  const isSonnet = reqModel.includes("sonnet")
+  return {
+    format: "anthropic",
+    modifyUrl: (providerApi: string, isStream?: boolean) =>
+      isBedrock
+        ? `${providerApi}/model/${isBedrockModelArn ? encodeURIComponent(providerModel) : providerModel}/${isStream ? "invoke-with-response-stream" : "invoke"}`
+        : providerApi + "/messages",
+    modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
+      if (isBedrock) {
+        headers.set("Authorization", `Bearer ${apiKey}`)
+      } else {
+        headers.set("x-api-key", apiKey)
+        headers.set("anthropic-version", headers.get("anthropic-version") ?? "2023-06-01")
+        if (body.model.startsWith("claude-sonnet-")) {
+          headers.set("anthropic-beta", "context-1m-2025-08-07")
+        }
+      }
+    },
+    modifyBody: (body: Record<string, any>) => ({
       ...body,
-      service_tier: "standard_only",
-    }
-  },
-  streamSeparator: "\n\n",
-  createUsageParser: () => {
-    let usage: Usage
+      ...(isBedrock
+        ? {
+            anthropic_version: "bedrock-2023-05-31",
+            anthropic_beta: isSonnet ? "context-1m-2025-08-07" : undefined,
+            model: undefined,
+            stream: undefined,
+          }
+        : {
+            service_tier: "standard_only",
+          }),
+    }),
+    createBinaryStreamDecoder: () => {
+      if (!isBedrock) return undefined
 
-    return {
-      parse: (chunk: string) => {
-        const data = chunk.split("\n")[1]
-        if (!data.startsWith("data: ")) return
+      const decoder = new TextDecoder()
+      const encoder = new TextEncoder()
+      const codec = new EventStreamCodec(toUtf8, fromUtf8)
+      let buffer = new Uint8Array(0)
+      return (value: Uint8Array) => {
+        const newBuffer = new Uint8Array(buffer.length + value.length)
+        newBuffer.set(buffer)
+        newBuffer.set(value, buffer.length)
+        buffer = newBuffer
 
-        let json
-        try {
-          json = JSON.parse(data.slice(6))
-        } catch (e) {
-          return
+        const messages = []
+        while (buffer.length >= 4) {
+          // first 4 bytes are the total length (big-endian)
+          const totalLength = new DataView(buffer.buffer, buffer.byteOffset, buffer.byteLength).getUint32(0, false)
+
+          // wait for more chunks
+          if (buffer.length < totalLength) break
+
+          try {
+            const subView = buffer.subarray(0, totalLength)
+            const decoded = codec.decode(subView)
+            buffer = buffer.slice(totalLength)
+
+            /* Example of Bedrock data
+      ```
+        {
+          bytes: 'eyJ0eXBlIjoibWVzc2FnZV9zdGFydCIsIm1lc3NhZ2UiOnsibW9kZWwiOiJjbGF1ZGUtb3B1cy00LTUtMjAyNTExMDEiLCJpZCI6Im1zZ19iZHJrXzAxMjVGdHRGb2lkNGlwWmZ4SzZMbktxeCIsInR5cGUiOiJtZXNzYWdlIiwicm9sZSI6ImFzc2lzdGFudCIsImNvbnRlbnQiOltdLCJzdG9wX3JlYXNvbiI6bnVsbCwic3RvcF9zZXF1ZW5jZSI6bnVsbCwidXNhZ2UiOnsiaW5wdXRfdG9rZW5zIjo0LCJjYWNoZV9jcmVhdGlvbl9pbnB1dF90b2tlbnMiOjEsImNhY2hlX3JlYWRfaW5wdXRfdG9rZW5zIjoxMTk2MywiY2FjaGVfY3JlYXRpb24iOnsiZXBoZW1lcmFsXzVtX2lucHV0X3Rva2VucyI6MSwiZXBoZW1lcmFsXzFoX2lucHV0X3Rva2VucyI6MH0sIm91dHB1dF90b2tlbnMiOjF9fX0=',
+          p: '...'
         }
+      ```
 
-        const usageUpdate = json.usage ?? json.message?.usage
-        if (!usageUpdate) return
-        usage = {
-          ...usage,
-          ...usageUpdate,
-          cache_creation: {
-            ...usage?.cache_creation,
-            ...usageUpdate.cache_creation,
-          },
-          server_tool_use: {
-            ...usage?.server_tool_use,
-            ...usageUpdate.server_tool_use,
-          },
+      Decoded bytes
+      ```
+        {
+          type: 'message_start',
+          message: {
+            model: 'claude-opus-4-5-20251101',
+            id: 'msg_bdrk_0125FttFoid4ipZfxK6LnKqx',
+            type: 'message',
+            role: 'assistant',
+            content: [],
+            stop_reason: null,
+            stop_sequence: null,
+            usage: {
+              input_tokens: 4,
+              cache_creation_input_tokens: 1,
+              cache_read_input_tokens: 11963,
+              cache_creation: [Object],
+              output_tokens: 1
+            }
+          }
         }
-      },
-      retrieve: () => usage,
-    }
-  },
-  normalizeUsage: (usage: Usage) => ({
-    inputTokens: usage.input_tokens ?? 0,
-    outputTokens: usage.output_tokens ?? 0,
-    reasoningTokens: undefined,
-    cacheReadTokens: usage.cache_read_input_tokens ?? undefined,
-    cacheWrite5mTokens: usage.cache_creation?.ephemeral_5m_input_tokens ?? undefined,
-    cacheWrite1hTokens: usage.cache_creation?.ephemeral_1h_input_tokens ?? undefined,
-  }),
-} satisfies ProviderHelper
+      ```
+      */
+
+            /* Example of Anthropic data
+      ```
+        event: message_delta
+        data: {"type":"message_start","message":{"model":"claude-opus-4-5-20251101","id":"msg_01ETvwVWSKULxzPdkQ1xAnk2","type":"message","role":"assistant","content":[],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":3,"cache_creation_input_tokens":11543,"cache_read_input_tokens":0,"cache_creation":{"ephemeral_5m_input_tokens":11543,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard"}}}
+      ```
+      */
+            if (decoded.headers[":message-type"]?.value === "event") {
+              const data = decoder.decode(decoded.body, { stream: true })
+
+              const parsedDataResult = JSON.parse(data)
+              delete parsedDataResult.p
+              const binary = atob(parsedDataResult.bytes)
+              const uint8 = Uint8Array.from(binary, (c) => c.charCodeAt(0))
+              const bytes = decoder.decode(uint8)
+              const eventName = JSON.parse(bytes).type
+              messages.push([`event: ${eventName}`, "\n", `data: ${bytes}`, "\n\n"].join(""))
+            }
+          } catch (e) {
+            console.log("@@@EE@@@")
+            console.log(e)
+            break
+          }
+        }
+        return encoder.encode(messages.join(""))
+      }
+    },
+    streamSeparator: "\n\n",
+    createUsageParser: () => {
+      let usage: Usage
+
+      return {
+        parse: (chunk: string) => {
+          const data = chunk.split("\n")[1]
+          if (!data.startsWith("data: ")) return
+
+          let json
+          try {
+            json = JSON.parse(data.slice(6))
+          } catch (e) {
+            return
+          }
+
+          const usageUpdate = json.usage ?? json.message?.usage
+          if (!usageUpdate) return
+          usage = {
+            ...usage,
+            ...usageUpdate,
+            cache_creation: {
+              ...usage?.cache_creation,
+              ...usageUpdate.cache_creation,
+            },
+            server_tool_use: {
+              ...usage?.server_tool_use,
+              ...usageUpdate.server_tool_use,
+            },
+          }
+        },
+        retrieve: () => usage,
+      }
+    },
+    normalizeUsage: (usage: Usage) => ({
+      inputTokens: usage.input_tokens ?? 0,
+      outputTokens: usage.output_tokens ?? 0,
+      reasoningTokens: undefined,
+      cacheReadTokens: usage.cache_read_input_tokens ?? undefined,
+      cacheWrite5mTokens: usage.cache_creation?.ephemeral_5m_input_tokens ?? undefined,
+      cacheWrite1hTokens: usage.cache_creation?.ephemeral_1h_input_tokens ?? undefined,
+    }),
+  }
+}
 
 export function fromAnthropicRequest(body: any): CommonRequest {
   if (!body || typeof body !== "object") return body

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

@@ -26,16 +26,17 @@ type Usage = {
   thoughtsTokenCount?: number
 }
 
-export const googleHelper = {
+export const googleHelper: ProviderHelper = ({ providerModel }) => ({
   format: "google",
-  modifyUrl: (providerApi: string, model?: string, isStream?: boolean) =>
-    `${providerApi}/models/${model}:${isStream ? "streamGenerateContent?alt=sse" : "generateContent"}`,
+  modifyUrl: (providerApi: string, isStream?: boolean) =>
+    `${providerApi}/models/${providerModel}:${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
   },
+  createBinaryStreamDecoder: () => undefined,
   streamSeparator: "\r\n\r\n",
   createUsageParser: () => {
     let usage: Usage
@@ -71,4 +72,4 @@ export const googleHelper = {
       cacheWrite1hTokens: undefined,
     }
   },
-} satisfies ProviderHelper
+})

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

@@ -21,7 +21,7 @@ type Usage = {
   }
 }
 
-export const oaCompatHelper = {
+export const oaCompatHelper: ProviderHelper = () => ({
   format: "oa-compat",
   modifyUrl: (providerApi: string) => providerApi + "/chat/completions",
   modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
@@ -33,6 +33,7 @@ export const oaCompatHelper = {
       ...(body.stream ? { stream_options: { include_usage: true } } : {}),
     }
   },
+  createBinaryStreamDecoder: () => undefined,
   streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
@@ -68,7 +69,7 @@ export const oaCompatHelper = {
       cacheWrite1hTokens: undefined,
     }
   },
-} satisfies ProviderHelper
+})
 
 export function fromOaCompatibleRequest(body: any): CommonRequest {
   if (!body || typeof body !== "object") return body

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

@@ -12,7 +12,7 @@ type Usage = {
   total_tokens?: number
 }
 
-export const openaiHelper = {
+export const openaiHelper: ProviderHelper = () => ({
   format: "openai",
   modifyUrl: (providerApi: string) => providerApi + "/responses",
   modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
@@ -21,6 +21,7 @@ export const openaiHelper = {
   modifyBody: (body: Record<string, any>) => {
     return body
   },
+  createBinaryStreamDecoder: () => undefined,
   streamSeparator: "\n\n",
   createUsageParser: () => {
     let usage: Usage
@@ -58,7 +59,7 @@ export const openaiHelper = {
       cacheWrite1hTokens: undefined,
     }
   },
-} satisfies ProviderHelper
+})
 
 export function fromOpenaiRequest(body: any): CommonRequest {
   if (!body || typeof body !== "object") return body

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

@@ -33,11 +33,12 @@ export type UsageInfo = {
   cacheWrite1hTokens?: number
 }
 
-export type ProviderHelper = {
+export type ProviderHelper = (input: { reqModel: string; providerModel: string }) => {
   format: ZenData.Format
-  modifyUrl: (providerApi: string, model?: string, isStream?: boolean) => string
+  modifyUrl: (providerApi: string, isStream?: boolean) => string
   modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => void
   modifyBody: (body: Record<string, any>) => Record<string, any>
+  createBinaryStreamDecoder: () => ((chunk: Uint8Array) => Uint8Array | undefined) | undefined
   streamSeparator: string
   createUsageParser: () => {
     parse: (chunk: string) => void

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

@@ -1,6 +1,6 @@
 import { Resource } from "@opencode-ai/console-resource"
 
-export function createStickyTracker(stickyProvider: boolean, session: string) {
+export function createStickyTracker(stickyProvider: "strict" | "prefer" | undefined, session: string) {
   if (!stickyProvider) return
   if (!session) return
   const key = `sticky:${session}`

packages/console/core/migrations/0053_gigantic_hardball.sql

@@ -0,0 +1 @@
+ALTER TABLE `billing` ADD `subscription` json;

packages/console/core/migrations/0054_numerous_annihilus.sql

@@ -0,0 +1 @@
+ALTER TABLE `billing` DROP COLUMN `subscription_coupon_id`;

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

@@ -372,6 +372,20 @@
       "when": 1768343920467,
       "tag": "0052_aromatic_agent_zero",
       "breakpoints": true
+    },
+    {
+      "idx": 53,
+      "version": "5",
+      "when": 1768599366758,
+      "tag": "0053_gigantic_hardball",
+      "breakpoints": true
+    },
+    {
+      "idx": 54,
+      "version": "5",
+      "when": 1768603665356,
+      "tag": "0054_numerous_annihilus",
+      "breakpoints": true
     }
   ]
 }

packages/console/core/package.json

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

packages/console/core/script/black-gift.ts

@@ -0,0 +1,112 @@
+import { Billing } from "../src/billing.js"
+import { and, Database, eq, isNull, sql } from "../src/drizzle/index.js"
+import { UserTable } from "../src/schema/user.sql.js"
+import { BillingTable, PaymentTable, SubscriptionTable } from "../src/schema/billing.sql.js"
+import { Identifier } from "../src/identifier.js"
+import { centsToMicroCents } from "../src/util/price.js"
+import { AuthTable } from "../src/schema/auth.sql.js"
+
+const plan = "200"
+const workspaceID = process.argv[2]
+const seats = parseInt(process.argv[3])
+
+console.log(`Gifting ${seats} seats of Black to workspace ${workspaceID}`)
+
+if (!workspaceID || !seats) throw new Error("Usage: bun foo.ts <workspaceID> <seats>")
+
+// Get workspace user
+const users = await Database.use((tx) =>
+  tx
+    .select({
+      id: UserTable.id,
+      role: UserTable.role,
+      email: AuthTable.subject,
+    })
+    .from(UserTable)
+    .leftJoin(AuthTable, and(eq(AuthTable.accountID, UserTable.accountID), eq(AuthTable.provider, "email")))
+    .where(and(eq(UserTable.workspaceID, workspaceID), isNull(UserTable.timeDeleted))),
+)
+if (users.length === 0) throw new Error(`Error: No users found in workspace ${workspaceID}`)
+if (users.length !== seats)
+  throw new Error(`Error: Workspace ${workspaceID} has ${users.length} users, expected ${seats}`)
+const adminUser = users.find((user) => user.role === "admin")
+if (!adminUser) throw new Error(`Error: No admin user found in workspace ${workspaceID}`)
+if (!adminUser.email) throw new Error(`Error: Admin user ${adminUser.id} has no email`)
+
+// Get Billing
+const billing = await Database.use((tx) =>
+  tx
+    .select({
+      customerID: BillingTable.customerID,
+      subscriptionID: BillingTable.subscriptionID,
+    })
+    .from(BillingTable)
+    .where(eq(BillingTable.workspaceID, workspaceID))
+    .then((rows) => rows[0]),
+)
+if (!billing) throw new Error(`Error: Workspace ${workspaceID} has no billing record`)
+if (billing.subscriptionID) throw new Error(`Error: Workspace ${workspaceID} already has a subscription`)
+
+// Look up the Stripe customer by email
+const customerID =
+  billing.customerID ??
+  (await (() =>
+    Billing.stripe()
+      .customers.create({
+        email: adminUser.email,
+        metadata: {
+          workspaceID,
+        },
+      })
+      .then((customer) => customer.id))())
+console.log(`Customer ID: ${customerID}`)
+
+const couponID = "JAIr0Pe1"
+const subscription = await Billing.stripe().subscriptions.create({
+  customer: customerID!,
+  items: [
+    {
+      price: `price_1SmfyI2StuRr0lbXovxJNeZn`,
+      discounts: [{ coupon: couponID }],
+      quantity: 2,
+    },
+  ],
+})
+console.log(`Subscription ID: ${subscription.id}`)
+
+await Database.transaction(async (tx) => {
+  // Set customer id, subscription id, and payment method on workspace billing
+  await tx
+    .update(BillingTable)
+    .set({
+      customerID,
+      subscriptionID: subscription.id,
+      subscription: { status: "subscribed", coupon: couponID, seats, plan },
+    })
+    .where(eq(BillingTable.workspaceID, workspaceID))
+
+  // Create a row in subscription table
+  for (const user of users) {
+    await tx.insert(SubscriptionTable).values({
+      workspaceID,
+      id: Identifier.create("subscription"),
+      userID: user.id,
+    })
+  }
+  //
+  //  // Create a row in payments table
+  //  await tx.insert(PaymentTable).values({
+  //    workspaceID,
+  //    id: Identifier.create("payment"),
+  //    amount: centsToMicroCents(amountInCents),
+  //    customerID,
+  //    invoiceID,
+  //    paymentID,
+  //    enrichment: {
+  //      type: "subscription",
+  //      couponID,
+  //    },
+  //  })
+})
+
+console.log(`done`)

packages/console/core/script/black-onboard.ts

@@ -12,7 +12,7 @@ const email = process.argv[3]
 console.log(`Onboarding workspace ${workspaceID} for email ${email}`)
 
 if (!workspaceID || !email) {
-  console.error("Usage: bun onboard-zen-black.ts <workspaceID> <email>")
+  console.error("Usage: bun foo.ts <workspaceID> <email>")
   process.exit(1)
 }
 
@@ -50,7 +50,7 @@ const existingSubscription = await Database.use((tx) =>
   tx
     .select({ workspaceID: BillingTable.workspaceID })
     .from(BillingTable)
-    .where(eq(BillingTable.subscriptionID, subscriptionID))
+    .where(sql`JSON_EXTRACT(${BillingTable.subscription}, '$.id') = ${subscriptionID}`)
     .then((rows) => rows[0]),
 )
 if (existingSubscription) {
@@ -128,10 +128,15 @@ await Database.transaction(async (tx) => {
     .set({
       customerID,
       subscriptionID,
-      subscriptionCouponID: couponID,
       paymentMethodID,
       paymentMethodLast4,
       paymentMethodType,
+      subscription: {
+        status: "subscribed",
+        coupon: couponID,
+        seats: 1,
+        plan: "200",
+      },
     })
     .where(eq(BillingTable.workspaceID, workspaceID))
 

packages/console/core/script/black-transfer.ts

@@ -0,0 +1,163 @@
+import { Billing } from "../src/billing.js"
+import { and, Database, desc, eq, isNotNull, lt, sql } from "../src/drizzle/index.js"
+import { BillingTable, PaymentTable, SubscriptionTable } from "../src/schema/billing.sql.js"
+
+const fromWrkID = process.argv[2]
+const toWrkID = process.argv[3]
+
+if (!fromWrkID || !toWrkID) {
+  console.error("Usage: bun foo.ts <fromWrkID> <toWrkID>")
+  process.exit(1)
+}
+
+console.log(`Transferring subscription from ${fromWrkID} to ${toWrkID}`)
+
+// Look up the FROM workspace billing
+const fromBilling = await Database.use((tx) =>
+  tx
+    .select({
+      customerID: BillingTable.customerID,
+      subscriptionID: BillingTable.subscriptionID,
+      subscription: BillingTable.subscription,
+      paymentMethodID: BillingTable.paymentMethodID,
+      paymentMethodType: BillingTable.paymentMethodType,
+      paymentMethodLast4: BillingTable.paymentMethodLast4,
+    })
+    .from(BillingTable)
+    .where(eq(BillingTable.workspaceID, fromWrkID))
+    .then((rows) => rows[0]),
+)
+if (!fromBilling) throw new Error(`Error: FROM workspace has no billing record`)
+if (!fromBilling.customerID) throw new Error(`Error: FROM workspace has no Stripe customer ID`)
+if (!fromBilling.subscriptionID) throw new Error(`Error: FROM workspace has no subscription`)
+
+const fromSubscription = await Database.use((tx) =>
+  tx
+    .select({ userID: SubscriptionTable.userID })
+    .from(SubscriptionTable)
+    .where(eq(SubscriptionTable.workspaceID, fromWrkID))
+    .then((rows) => rows[0]),
+)
+if (!fromSubscription) throw new Error(`Error: FROM workspace has no subscription`)
+
+// Look up the previous customer ID in FROM workspace
+const subscriptionPayment = await Database.use((tx) =>
+  tx
+    .select({
+      customerID: PaymentTable.customerID,
+      timeCreated: PaymentTable.timeCreated,
+    })
+    .from(PaymentTable)
+    .where(and(eq(PaymentTable.workspaceID, fromWrkID), sql`JSON_EXTRACT(enrichment, '$.type') = 'subscription'`))
+    .then((rows) => {
+      if (rows.length > 1) {
+        console.error(`Error: Multiple subscription payments found for workspace ${fromWrkID}`)
+        process.exit(1)
+      }
+      return rows[0]
+    }),
+)
+const fromPrevPayment = await Database.use((tx) =>
+  tx
+    .select({ customerID: PaymentTable.customerID })
+    .from(PaymentTable)
+    .where(
+      and(
+        eq(PaymentTable.workspaceID, fromWrkID),
+        isNotNull(PaymentTable.customerID),
+        lt(PaymentTable.timeCreated, subscriptionPayment.timeCreated),
+      ),
+    )
+    .orderBy(desc(PaymentTable.timeCreated))
+    .limit(1)
+    .then((rows) => rows[0]),
+)
+if (!fromPrevPayment?.customerID) throw new Error(`Error: FROM workspace has no previous Stripe customer to revert to`)
+if (fromPrevPayment.customerID === fromBilling.customerID)
+  throw new Error(`Error: FROM workspace has the same Stripe customer ID as the current one`)
+
+const fromPrevPaymentMethods = await Billing.stripe().customers.listPaymentMethods(fromPrevPayment.customerID, {})
+if (fromPrevPaymentMethods.data.length === 0)
+  throw new Error(`Error: FROM workspace has no previous Stripe payment methods`)
+
+// Look up the TO workspace billing
+const toBilling = await Database.use((tx) =>
+  tx
+    .select({
+      customerID: BillingTable.customerID,
+      subscriptionID: BillingTable.subscriptionID,
+    })
+    .from(BillingTable)
+    .where(eq(BillingTable.workspaceID, toWrkID))
+    .then((rows) => rows[0]),
+)
+if (!toBilling) throw new Error(`Error: TO workspace has no billing record`)
+if (toBilling.subscriptionID) throw new Error(`Error: TO workspace already has a subscription`)
+
+console.log(`FROM:`)
+console.log(`  Old Customer ID: ${fromBilling.customerID}`)
+console.log(`  New Customer ID: ${fromPrevPayment.customerID}`)
+console.log(`TO:`)
+console.log(`  Old Customer ID: ${toBilling.customerID}`)
+console.log(`  New Customer ID: ${fromBilling.customerID}`)
+
+// Clear workspaceID from Stripe customer metadata
+await Billing.stripe().customers.update(fromPrevPayment.customerID, {
+  metadata: {
+    workspaceID: fromWrkID,
+  },
+})
+await Billing.stripe().customers.update(fromBilling.customerID, {
+  metadata: {
+    workspaceID: toWrkID,
+  },
+})
+
+await Database.transaction(async (tx) => {
+  await tx
+    .update(BillingTable)
+    .set({
+      customerID: fromPrevPayment.customerID,
+      subscriptionID: null,
+      subscription: null,
+      paymentMethodID: fromPrevPaymentMethods.data[0].id,
+      paymentMethodLast4: fromPrevPaymentMethods.data[0].card?.last4 ?? null,
+      paymentMethodType: fromPrevPaymentMethods.data[0].type,
+    })
+    .where(eq(BillingTable.workspaceID, fromWrkID))
+
+  await tx
+    .update(BillingTable)
+    .set({
+      customerID: fromBilling.customerID,
+      subscriptionID: fromBilling.subscriptionID,
+      subscription: fromBilling.subscription,
+      paymentMethodID: fromBilling.paymentMethodID,
+      paymentMethodLast4: fromBilling.paymentMethodLast4,
+      paymentMethodType: fromBilling.paymentMethodType,
+    })
+    .where(eq(BillingTable.workspaceID, toWrkID))
+
+  await tx
+    .update(SubscriptionTable)
+    .set({
+      workspaceID: toWrkID,
+      userID: fromSubscription.userID,
+    })
+    .where(eq(SubscriptionTable.workspaceID, fromWrkID))
+
+  await tx
+    .update(PaymentTable)
+    .set({
+      workspaceID: toWrkID,
+    })
+    .where(
+      and(
+        eq(PaymentTable.workspaceID, fromWrkID),
+        sql`JSON_EXTRACT(enrichment, '$.type') = 'subscription'`,
+        eq(PaymentTable.amount, 20000000000),
+      ),
+    )
+})
+
+console.log(`done`)

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

@@ -55,8 +55,9 @@ if (identifier.startsWith("wrk_")) {
       ),
   )
 
-  // Get all payments for these workspaces
-  await Promise.all(users.map((u: { workspaceID: string }) => printWorkspace(u.workspaceID)))
+  for (const user of users) {
+    await printWorkspace(user.workspaceID)
+  }
 }
 
 async function printWorkspace(workspaceID: string) {
@@ -114,11 +115,11 @@ async function printWorkspace(workspaceID: string) {
         balance: BillingTable.balance,
         customerID: BillingTable.customerID,
         reload: BillingTable.reload,
+        subscriptionID: BillingTable.subscriptionID,
         subscription: {
-          id: BillingTable.subscriptionID,
-          couponID: BillingTable.subscriptionCouponID,
           plan: BillingTable.subscriptionPlan,
           booked: BillingTable.timeSubscriptionBooked,
+          enrichment: BillingTable.subscription,
         },
       })
       .from(BillingTable)
@@ -128,8 +129,13 @@ async function printWorkspace(workspaceID: string) {
           rows.map((row) => ({
             ...row,
             balance: `$${(row.balance / 100000000).toFixed(2)}`,
-            subscription: row.subscription.id
-              ? `Subscribed ${row.subscription.couponID ? `(coupon: ${row.subscription.couponID}) ` : ""}`
+            subscription: row.subscriptionID
+              ? [
+                  `Black ${row.subscription.enrichment!.plan}`,
+                  row.subscription.enrichment!.seats > 1 ? `X ${row.subscription.enrichment!.seats} seats` : "",
+                  row.subscription.enrichment!.coupon ? `(coupon: ${row.subscription.enrichment!.coupon})` : "",
+                  `(ref: ${row.subscriptionID})`,
+                ].join(" ")
               : row.subscription.booked
                 ? `Waitlist ${row.subscription.plan} plan`
                 : undefined,
@@ -143,6 +149,7 @@ async function printWorkspace(workspaceID: string) {
         amount: PaymentTable.amount,
         paymentID: PaymentTable.paymentID,
         invoiceID: PaymentTable.invoiceID,
+        customerID: PaymentTable.customerID,
         timeCreated: PaymentTable.timeCreated,
         timeRefunded: PaymentTable.timeRefunded,
       })

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

@@ -8,33 +8,25 @@ const stage = process.argv[2]
 if (!stage) throw new Error("Stage is required")
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
+const PARTS = 8
 
 // read the secret
 const ret = await $`bun sst secret list`.cwd(root).text()
 const lines = ret.split("\n")
-const value1 = lines.find((line) => line.startsWith("ZEN_MODELS1"))?.split("=")[1]
-const value2 = lines.find((line) => line.startsWith("ZEN_MODELS2"))?.split("=")[1]
-const value3 = lines.find((line) => line.startsWith("ZEN_MODELS3"))?.split("=")[1]
-const value4 = lines.find((line) => line.startsWith("ZEN_MODELS4"))?.split("=")[1]
-const value5 = lines.find((line) => line.startsWith("ZEN_MODELS5"))?.split("=")[1]
-const value6 = lines.find((line) => line.startsWith("ZEN_MODELS6"))?.split("=")[1]
-const value7 = lines.find((line) => line.startsWith("ZEN_MODELS7"))?.split("=")[1]
-if (!value1) throw new Error("ZEN_MODELS1 not found")
-if (!value2) throw new Error("ZEN_MODELS2 not found")
-if (!value3) throw new Error("ZEN_MODELS3 not found")
-if (!value4) throw new Error("ZEN_MODELS4 not found")
-if (!value5) throw new Error("ZEN_MODELS5 not found")
-if (!value6) throw new Error("ZEN_MODELS6 not found")
-if (!value7) throw new Error("ZEN_MODELS7 not found")
+const values = Array.from({ length: PARTS }, (_, i) => {
+  const value = lines
+    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}`))
+    ?.split("=")
+    .slice(1)
+    .join("=")
+  if (!value) throw new Error(`ZEN_MODELS${i + 1} not found`)
+  return value
+})
 
 // validate value
-ZenData.validate(JSON.parse(value1 + value2 + value3 + value4 + value5 + value6 + value7))
+ZenData.validate(JSON.parse(values.join("")))
 
 // update the secret
-await $`bun sst secret set ZEN_MODELS1 ${value1} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS2 ${value2} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS3 ${value3} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS4 ${value4} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS5 ${value5} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS6 ${value6} --stage ${stage}`
-await $`bun sst secret set ZEN_MODELS7 ${value7} --stage ${stage}`
+for (let i = 0; i < PARTS; i++) {
+  await $`bun sst secret set ZEN_MODELS${i + 1} --stage ${stage} -- ${values[i]}`
+}