release: v0.14.1

Co-authored-by: David Hill <iamdavidhill@gmail.com>

.github/workflows/publish.yml

@@ -63,6 +63,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Install OpenCode
+        run: curl -fsSL https://opencode.ai/install | bash
+
       - name: Publish
         run: |
           ./script/publish.ts
@@ -71,3 +74,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
           AUR_KEY: ${{ secrets.AUR_KEY }}
           NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
+          OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: test
+
+on:
+  push:
+    branches-ignore:
+      - production
+  pull_request:
+    branches-ignore:
+      - production
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.2.21
+
+      - name: run
+        run: |
+          git config --global user.email "bot@opencode.ai"
+          git config --global user.name "opencode"
+          bun install
+          bun turbo test
+        env:
+          CI: true

.husky/pre-push

@@ -1,3 +1,2 @@
 #!/bin/sh
-bun prettier --write --ignore-unknown $(git diff --name-only HEAD~1 HEAD)
-bun run typecheck
+bun run typecheck

.opencode/command/commit.md

@@ -7,3 +7,6 @@ core:
 ci:
 ignore:
 wip:
+
+prefer to explain WHY something was done from an end user perspective instead of
+WHAT was done.

AGENTS.md

@@ -14,3 +14,34 @@
 ## Debugging
 
 - To test opencode in the `packages/opencode` directory you can run `bun dev`
+
+## Tool Calling
+
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environnement:
+
+json
+{
+    "recipient_name": "multi_tool_use.parallel",
+    "parameters": {
+        "tool_uses": [
+            {
+                "recipient_name": "functions.read",
+                "parameters": {
+                    "filePath": "path/to/file.tsx"
+                }
+            },
+            {
+                "recipient_name": "functions.read",
+                "parameters": {
+                    "filePath": "path/to/file.ts"
+                }
+            },
+            {
+                "recipient_name": "functions.read",
+                "parameters": {
+                    "filePath": "path/to/file.md"
+                }
+            }
+        ]
+    }
+}

README.md

@@ -1,20 +1,20 @@
 <p align="center">
   <a href="https://opencode.ai">
     <picture>
-      <source srcset="packages/web/src/assets/logo-ornate-dark.svg" media="(prefers-color-scheme: dark)">
-      <source srcset="packages/web/src/assets/logo-ornate-light.svg" media="(prefers-color-scheme: light)">
-      <img src="packages/web/src/assets/logo-ornate-light.svg" alt="opencode logo">
+      <source srcset="packages/console/app/src/asset/logo-ornate-dark.svg" media="(prefers-color-scheme: dark)">
+      <source srcset="packages/console/app/src/asset/logo-ornate-light.svg" media="(prefers-color-scheme: light)">
+      <img src="packages/console/app/src/asset/logo-ornate-light.svg" alt="OpenCode logo">
     </picture>
   </a>
 </p>
-<p align="center">AI coding agent, built for the terminal.</p>
+<p align="center">The AI coding agent built for the terminal.</p>
 <p align="center">
   <a href="https://opencode.ai/discord"><img alt="Discord" src="https://img.shields.io/discord/1391832426048651334?style=flat-square&label=discord" /></a>
   <a href="https://www.npmjs.com/package/opencode-ai"><img alt="npm" src="https://img.shields.io/npm/v/opencode-ai?style=flat-square" /></a>
   <a href="https://github.com/sst/opencode/actions/workflows/publish.yml"><img alt="Build status" src="https://img.shields.io/github/actions/workflow/status/sst/opencode/publish.yml?style=flat-square&branch=dev" /></a>
 </p>
 
-[![opencode Terminal UI](packages/web/src/assets/lander/screenshot.png)](https://opencode.ai)
+[![OpenCode Terminal UI](packages/web/src/assets/lander/screenshot.png)](https://opencode.ai)
 
 ---
 
@@ -50,11 +50,11 @@ XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 
 ### Documentation
 
-For more info on how to configure opencode [**head over to our docs**](https://opencode.ai/docs).
+For more info on how to configure OpenCode [**head over to our docs**](https://opencode.ai/docs).
 
 ### Contributing
 
-opencode is an opinionated tool so any fundamental feature needs to go through a
+OpenCode is an opinionated tool so any fundamental feature needs to go through a
 design process with the core team.
 
 > [!IMPORTANT]
@@ -74,7 +74,7 @@ Take a look at the git history to see what kind of PRs we end up merging.
 > [!NOTE]
 > If you do not follow the above guidelines we might close your PR.
 
-To run opencode locally you need.
+To run OpenCode locally you need.
 
 - Bun
 - Golang 1.24.x
@@ -88,7 +88,7 @@ $ bun dev
 
 #### Development Notes
 
-**API Client**: After making changes to the TypeScript API endpoints in `packages/opencode/src/server/server.ts`, you will need the opencode team to generate a new stainless sdk for the clients.
+**API Client**: After making changes to the TypeScript API endpoints in `packages/opencode/src/server/server.ts`, you will need the OpenCode team to generate a new stainless sdk for the clients.
 
 ### FAQ
 
@@ -97,9 +97,9 @@ $ bun dev
 It's very similar to Claude Code in terms of capability. Here are the key differences:
 
 - 100% open source
-- Not coupled to any provider. Although Anthropic is recommended, opencode can be used with OpenAI, Google or even local models. As models evolve the gaps between them will close and pricing will drop so being provider-agnostic is important.
-- A focus on TUI. opencode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
-- A client/server architecture. This for example can allow opencode to run on your computer, while you can drive it remotely from a mobile app. Meaning that the TUI frontend is just one of the possible clients.
+- Not coupled to any provider. Although Anthropic is recommended, OpenCode can be used with OpenAI, Google or even local models. As models evolve the gaps between them will close and pricing will drop so being provider-agnostic is important.
+- A focus on TUI. OpenCode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
+- A client/server architecture. This for example can allow OpenCode to run on your computer, while you can drive it remotely from a mobile app. Meaning that the TUI frontend is just one of the possible clients.
 
 #### What's the other repo?
 

STATS.md

@@ -1,92 +1,99 @@
 # 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) |
+| 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) |

github/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

infra/app.ts

@@ -2,6 +2,7 @@ import { domain } from "./stage"
 
 const GITHUB_APP_ID = new sst.Secret("GITHUB_APP_ID")
 const GITHUB_APP_PRIVATE_KEY = new sst.Secret("GITHUB_APP_PRIVATE_KEY")
+export const EMAILOCTOPUS_API_KEY = new sst.Secret("EMAILOCTOPUS_API_KEY")
 const bucket = new sst.cloudflare.Bucket("Bucket")
 
 export const api = new sst.cloudflare.Worker("Api", {

infra/console.ts

@@ -1,5 +1,5 @@
-import { WebhookEndpoint } from "pulumi-stripe"
 import { domain } from "./stage"
+import { EMAILOCTOPUS_API_KEY } from "./app"
 
 ////////////////
 // DATABASE
@@ -68,7 +68,7 @@ export const auth = new sst.cloudflare.Worker("AuthApi", {
 // GATEWAY
 ////////////////
 
-export const stripeWebhook = new WebhookEndpoint("StripeWebhookEndpoint", {
+export const stripeWebhook = new stripe.WebhookEndpoint("StripeWebhookEndpoint", {
   url: $interpolate`https://${domain}/stripe/webhook`,
   enabledEvents: [
     "checkout.session.async_payment_failed",
@@ -110,6 +110,9 @@ const STRIPE_WEBHOOK_SECRET = new sst.Linkable("STRIPE_WEBHOOK_SECRET", {
 // CONSOLE
 ////////////////
 
+const AWS_SES_ACCESS_KEY_ID = new sst.Secret("AWS_SES_ACCESS_KEY_ID")
+const AWS_SES_SECRET_ACCESS_KEY = new sst.Secret("AWS_SES_SECRET_ACCESS_KEY")
+
 let logProcessor
 if ($app.stage === "production" || $app.stage === "frank") {
   const HONEYCOMB_API_KEY = new sst.Secret("HONEYCOMB_API_KEY")
@@ -122,7 +125,16 @@ if ($app.stage === "production" || $app.stage === "frank") {
 new sst.cloudflare.x.SolidStart("Console", {
   domain,
   path: "packages/console/app",
-  link: [database, AUTH_API_URL, STRIPE_WEBHOOK_SECRET, STRIPE_SECRET_KEY, ZEN_MODELS],
+  link: [
+    database,
+    AUTH_API_URL,
+    STRIPE_WEBHOOK_SECRET,
+    STRIPE_SECRET_KEY,
+    ZEN_MODELS,
+    EMAILOCTOPUS_API_KEY,
+    AWS_SES_ACCESS_KEY_ID,
+    AWS_SES_SECRET_ACCESS_KEY,
+  ],
   environment: {
     //VITE_DOCS_URL: web.url.apply((url) => url!),
     //VITE_API_URL: gateway.url.apply((url) => url!),

infra/stage.ts

@@ -3,3 +3,11 @@ export const domain = (() => {
   if ($app.stage === "dev") return "dev.opencode.ai"
   return `${$app.stage}.dev.opencode.ai`
 })()
+
+export const zoneID = "430ba34c138cfb5360826c4909f99be8"
+
+// new cloudflare.RegionalHostname("RegionalHostname", {
+//   hostname: domain,
+//   regionKey: "us",
+//   zoneId: zoneID,
+// })

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "packageManager": "bun@1.2.21",
   "scripts": {
-    "dev": "bun run --conditions=development packages/opencode/src/index.ts",
+    "dev": "bun run packages/opencode/src/index.ts",
     "typecheck": "bun turbo typecheck",
     "prepare": "husky"
   },
@@ -18,6 +18,7 @@
     "catalog": {
       "@types/bun": "1.2.21",
       "@hono/zod-validator": "0.4.2",
+      "@kobalte/core": "0.13.11",
       "@types/node": "22.13.9",
       "@tsconfig/node22": "22.0.2",
       "ai": "5.0.8",

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/app",
-  "version": "0.11.7",
+  "version": "0.14.1",
   "description": "",
   "type": "module",
   "scripts": {
@@ -21,7 +21,7 @@
     "vite-plugin-solid": "^2.11.6"
   },
   "dependencies": {
-    "@kobalte/core": "0.13.11",
+    "@kobalte/core": "catalog:",
     "@opencode-ai/sdk": "workspace:*",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/event-bus": "1.1.2",

packages/app/src/components/code.tsx

@@ -1,8 +1,11 @@
 import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "shiki"
 import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
 import { useLocal, useShiki } from "@/context"
+import type { TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
 
+type DefinedSelection = Exclude<TextSelection, undefined>
+
 interface Props extends ComponentProps<"div"> {
   code: string
   path: string
@@ -21,17 +24,66 @@ export function Code(props: Props) {
   let container: HTMLDivElement | undefined
   let isProgrammaticSelection = false
 
-  const [html] = createResource(async () => {
-    if (!highlighter.getLoadedLanguages().includes(lang())) {
-      await highlighter.loadLanguage(lang() as BundledLanguage)
+  const ranges = createMemo<DefinedSelection[]>(() => {
+    const items = ctx.context.all() as Array<{ type: "file"; path: string; selection?: DefinedSelection }>
+    const result: DefinedSelection[] = []
+    for (const item of items) {
+      if (item.path !== local.path) continue
+      const selection = item.selection
+      if (!selection) continue
+      result.push(selection)
     }
-    return highlighter.codeToHtml(local.code || "", {
-      lang: lang() && lang() in bundledLanguages ? lang() : "text",
-      theme: "opencode",
-      transformers: [transformerUnifiedDiff(), transformerDiffGroups()],
-    }) as string
+    return result
   })
 
+  const createLineNumberTransformer = (selections: DefinedSelection[]): ShikiTransformer => {
+    const highlighted = new Set<number>()
+    for (const selection of selections) {
+      const startLine = selection.startLine
+      const endLine = selection.endLine
+      const start = Math.max(1, Math.min(startLine, endLine))
+      const end = Math.max(start, Math.max(startLine, endLine))
+      const count = end - start + 1
+      if (count <= 0) continue
+      const values = Array.from({ length: count }, (_, index) => start + index)
+      for (const value of values) highlighted.add(value)
+    }
+    return {
+      name: "line-number-highlight",
+      line(node, index) {
+        if (!highlighted.has(index)) return
+        this.addClassToHast(node, "line-number-highlight")
+        const children = node.children
+        if (!Array.isArray(children)) return
+        for (const child of children) {
+          if (!child || typeof child !== "object") continue
+          const element = child as { type?: string; properties?: { className?: string[] } }
+          if (element.type !== "element") continue
+          const className = element.properties?.className
+          if (!Array.isArray(className)) continue
+          const matches = className.includes("diff-oldln") || className.includes("diff-newln")
+          if (!matches) continue
+          if (className.includes("line-number-highlight")) continue
+          className.push("line-number-highlight")
+        }
+      },
+    }
+  }
+
+  const [html] = createResource(
+    () => ranges(),
+    async (activeRanges) => {
+      if (!highlighter.getLoadedLanguages().includes(lang())) {
+        await highlighter.loadLanguage(lang() as BundledLanguage)
+      }
+      return highlighter.codeToHtml(local.code || "", {
+        lang: lang() && lang() in bundledLanguages ? lang() : "text",
+        theme: "opencode",
+        transformers: [transformerUnifiedDiff(), transformerDiffGroups(), createLineNumberTransformer(activeRanges)],
+      }) as string
+    },
+  )
+
   onMount(() => {
     if (!container) return
 
@@ -283,7 +335,7 @@ export function Code(props: Props) {
           [&]:[counter-reset:line]
           [&_pre]:focus-visible:outline-none
           [&_pre]:overflow-x-auto [&_pre]:no-scrollbar
-          [&_code]:min-w-full [&_code]:inline-block [&_code]:pb-40
+          [&_code]:min-w-full [&_code]:inline-block 
           [&_.tab]:relative
           [&_.tab::before]:content['⇥']
           [&_.tab::before]:absolute
@@ -303,6 +355,9 @@ export function Code(props: Props) {
           [&_.line::before]:select-none
           [&_.line::before]:[counter-increment:line]
           [&_.line::before]:content-[counter(line)]
+          [&_.line-number-highlight]:bg-accent/20
+          [&_.line-number-highlight::before]:bg-accent/40!
+          [&_.line-number-highlight::before]:text-background-panel!
           [&_code.code-diff_.line::before]:content-['']
           [&_code.code-diff_.line::before]:w-0
           [&_code.code-diff_.line::before]:pr-0

packages/app/src/components/editor-pane.tsx

@@ -0,0 +1,381 @@
+import { For, Match, Show, Switch, createSignal, splitProps } from "solid-js"
+import { Tabs } from "@/ui/tabs"
+import { FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui"
+import {
+  DragDropProvider,
+  DragDropSensors,
+  DragOverlay,
+  SortableProvider,
+  closestCenter,
+  createSortable,
+  useDragDropContext,
+} from "@thisbeyond/solid-dnd"
+import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
+import type { LocalFile } from "@/context/local"
+import { Code } from "@/components/code"
+import PromptForm from "@/components/prompt-form"
+import { useLocal, useSDK, useSync } from "@/context"
+import { getFilename } from "@/utils"
+import type { JSX } from "solid-js"
+
+interface EditorPaneProps {
+  layoutKey: string
+  timelinePane: string
+  onFileClick: (file: LocalFile) => void
+  onOpenModelSelect: () => void
+  onInputRefChange: (element: HTMLTextAreaElement | null) => void
+}
+
+export default function EditorPane(props: EditorPaneProps): JSX.Element {
+  const [localProps] = splitProps(props, [
+    "layoutKey",
+    "timelinePane",
+    "onFileClick",
+    "onOpenModelSelect",
+    "onInputRefChange",
+  ])
+  const local = useLocal()
+  const sdk = useSDK()
+  const sync = useSync()
+  const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
+
+  const navigateChange = (dir: 1 | -1) => {
+    const active = local.file.active()
+    if (!active) return
+    const current = local.file.changeIndex(active.path)
+    const next = current === undefined ? (dir === 1 ? 0 : -1) : current + dir
+    local.file.setChangeIndex(active.path, next)
+  }
+
+  const handleTabChange = (path: string) => {
+    local.file.open(path)
+  }
+
+  const handleTabClose = (file: LocalFile) => {
+    local.file.close(file.path)
+  }
+
+  const handlePromptSubmit = async (prompt: string) => {
+    const existingSession = local.layout.visible(localProps.layoutKey, localProps.timelinePane)
+      ? local.session.active()
+      : undefined
+    let session = existingSession
+    if (!session) {
+      const created = await sdk.session.create()
+      session = created.data ?? undefined
+    }
+    if (!session) return
+    local.session.setActive(session.id)
+    local.layout.show(localProps.layoutKey, localProps.timelinePane)
+
+    await sdk.session.prompt({
+      path: { id: session.id },
+      body: {
+        agent: local.agent.current()!.name,
+        model: {
+          modelID: local.model.current()!.id,
+          providerID: local.model.current()!.provider.id,
+        },
+        parts: [
+          {
+            type: "text",
+            text: prompt,
+          },
+          ...(local.context.active()
+            ? [
+                {
+                  type: "file" as const,
+                  mime: "text/plain",
+                  url: `file://${local.context.active()!.absolute}`,
+                  filename: local.context.active()!.name,
+                  source: {
+                    type: "file" as const,
+                    text: {
+                      value: "@" + local.context.active()!.name,
+                      start: 0,
+                      end: 0,
+                    },
+                    path: local.context.active()!.absolute,
+                  },
+                },
+              ]
+            : []),
+          ...local.context.all().flatMap((file) => [
+            {
+              type: "file" as const,
+              mime: "text/plain",
+              url: `file://${sync.absolute(file.path)}${file.selection ? `?start=${file.selection.startLine}&end=${file.selection.endLine}` : ""}`,
+              filename: getFilename(file.path),
+              source: {
+                type: "file" as const,
+                text: {
+                  value: "@" + getFilename(file.path),
+                  start: 0,
+                  end: 0,
+                },
+                path: sync.absolute(file.path),
+              },
+            },
+          ]),
+        ],
+      },
+    })
+  }
+
+  const handleDragStart = (event: unknown) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    setActiveItem(id)
+  }
+
+  const handleDragOver = (event: DragEvent) => {
+    const { draggable, droppable } = event
+    if (draggable && droppable) {
+      const currentFiles = local.file.opened().map((file) => file.path)
+      const fromIndex = currentFiles.indexOf(draggable.id.toString())
+      const toIndex = currentFiles.indexOf(droppable.id.toString())
+      if (fromIndex !== toIndex) {
+        local.file.move(draggable.id.toString(), toIndex)
+      }
+    }
+  }
+
+  const handleDragEnd = () => {
+    setActiveItem(undefined)
+  }
+
+  return (
+    <div class="relative flex h-full flex-col">
+      <Logo size={64} variant="ornate" class="absolute top-2/5 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+      <DragDropProvider
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver}
+        collisionDetector={closestCenter}
+      >
+        <DragDropSensors />
+        <ConstrainDragYAxis />
+        <Tabs
+          class="relative grow w-full flex flex-col h-full"
+          value={local.file.active()?.path}
+          onChange={handleTabChange}
+        >
+          <div class="sticky top-0 shrink-0 flex">
+            <Tabs.List class="grow">
+              <SortableProvider ids={local.file.opened().map((file) => file.path)}>
+                <For each={local.file.opened()}>
+                  {(file) => (
+                    <SortableTab file={file} onTabClick={localProps.onFileClick} onTabClose={handleTabClose} />
+                  )}
+                </For>
+              </SortableProvider>
+            </Tabs.List>
+            <div class="shrink-0 h-full flex items-center gap-1 px-2 border-b border-border-subtle/40">
+              <Show when={local.file.active() && local.file.active()!.content?.diff}>
+                {(() => {
+                  const activeFile = local.file.active()!
+                  const view = local.file.view(activeFile.path)
+                  return (
+                    <div class="flex items-center gap-1">
+                      <Show when={view !== "raw"}>
+                        <div class="mr-1 flex items-center gap-1">
+                          <Tooltip value="Previous change" placement="bottom">
+                            <IconButton size="xs" variant="ghost" onClick={() => navigateChange(-1)}>
+                              <Icon name="arrow-up" size={14} />
+                            </IconButton>
+                          </Tooltip>
+                          <Tooltip value="Next change" placement="bottom">
+                            <IconButton size="xs" variant="ghost" onClick={() => navigateChange(1)}>
+                              <Icon name="arrow-down" size={14} />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      </Show>
+                      <Tooltip value="Raw" placement="bottom">
+                        <IconButton
+                          size="xs"
+                          variant="ghost"
+                          classList={{
+                            "text-text": view === "raw",
+                            "text-text-muted/70": view !== "raw",
+                            "bg-background-element": view === "raw",
+                          }}
+                          onClick={() => local.file.setView(activeFile.path, "raw")}
+                        >
+                          <Icon name="file-text" size={14} />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip value="Unified diff" placement="bottom">
+                        <IconButton
+                          size="xs"
+                          variant="ghost"
+                          classList={{
+                            "text-text": view === "diff-unified",
+                            "text-text-muted/70": view !== "diff-unified",
+                            "bg-background-element": view === "diff-unified",
+                          }}
+                          onClick={() => local.file.setView(activeFile.path, "diff-unified")}
+                        >
+                          <Icon name="checklist" size={14} />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip value="Split diff" placement="bottom">
+                        <IconButton
+                          size="xs"
+                          variant="ghost"
+                          classList={{
+                            "text-text": view === "diff-split",
+                            "text-text-muted/70": view !== "diff-split",
+                            "bg-background-element": view === "diff-split",
+                          }}
+                          onClick={() => local.file.setView(activeFile.path, "diff-split")}
+                        >
+                          <Icon name="columns" size={14} />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  )
+                })()}
+              </Show>
+              <Tooltip
+                value={local.layout.visible(localProps.layoutKey, localProps.timelinePane) ? "Close pane" : "Open pane"}
+                placement="bottom"
+              >
+                <IconButton
+                  size="xs"
+                  variant="ghost"
+                  onClick={() => local.layout.toggle(localProps.layoutKey, localProps.timelinePane)}
+                >
+                  <Icon
+                    name={
+                      local.layout.visible(localProps.layoutKey, localProps.timelinePane) ? "close-pane" : "open-pane"
+                    }
+                    size={14}
+                  />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <For each={local.file.opened()}>
+            {(file) => (
+              <Tabs.Content value={file.path} class="grow h-full pt-1 select-text">
+                {(() => {
+                  const view = local.file.view(file.path)
+                  const showRaw = view === "raw" || !file.content?.diff
+                  const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "")
+                  return <Code path={file.path} code={code} class="[&_code]:pb-60" />
+                })()}
+              </Tabs.Content>
+            )}
+          </For>
+        </Tabs>
+        <DragOverlay>
+          {(() => {
+            const id = activeItem()
+            if (!id) return null
+            const draggedFile = local.file.node(id)
+            if (!draggedFile) return null
+            return (
+              <div class="relative px-3 h-8 flex items-center text-sm font-medium text-text whitespace-nowrap shrink-0 bg-background-panel border-x border-border-subtle/40 border-b border-b-transparent">
+                <TabVisual file={draggedFile} />
+              </div>
+            )
+          })()}
+        </DragOverlay>
+      </DragDropProvider>
+      <PromptForm
+        class="peer/editor absolute inset-x-4 z-50 flex items-center justify-center"
+        classList={{
+          "bottom-8": !!local.file.active(),
+          "bottom-3/8": local.file.active() === undefined,
+        }}
+        onSubmit={handlePromptSubmit}
+        onOpenModelSelect={localProps.onOpenModelSelect}
+        onInputRefChange={(element) => localProps.onInputRefChange(element ?? null)}
+      />
+    </div>
+  )
+}
+
+function TabVisual(props: { file: LocalFile }): JSX.Element {
+  return (
+    <div class="flex items-center gap-x-1.5">
+      <FileIcon node={props.file} class="" />
+      <span classList={{ "text-xs": true, "text-primary": !!props.file.status?.status, italic: !props.file.pinned }}>
+        {props.file.name}
+      </span>
+      <span class="text-xs opacity-70">
+        <Switch>
+          <Match when={props.file.status?.status === "modified"}>
+            <span class="text-primary">M</span>
+          </Match>
+          <Match when={props.file.status?.status === "added"}>
+            <span class="text-success">A</span>
+          </Match>
+          <Match when={props.file.status?.status === "deleted"}>
+            <span class="text-error">D</span>
+          </Match>
+        </Switch>
+      </span>
+    </div>
+  )
+}
+
+function SortableTab(props: {
+  file: LocalFile
+  onTabClick: (file: LocalFile) => void
+  onTabClose: (file: LocalFile) => void
+}): JSX.Element {
+  const sortable = createSortable(props.file.path)
+
+  return (
+    // @ts-ignore
+    <div use:sortable classList={{ "opacity-0": sortable.isActiveDraggable }}>
+      <Tooltip value={props.file.path} placement="bottom">
+        <div class="relative">
+          <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}>
+            <TabVisual file={props.file} />
+          </Tabs.Trigger>
+          <IconButton
+            class="absolute right-1 top-1.5 opacity-0 text-text-muted/60 peer-data-[selected]/tab:opacity-100 peer-data-[selected]/tab:text-text peer-data-[selected]/tab:hover:bg-border-subtle hover:opacity-100 peer-hover/tab:opacity-100"
+            size="xs"
+            variant="ghost"
+            onClick={() => props.onTabClose(props.file)}
+          >
+            <Icon name="close" size={16} />
+          </IconButton>
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+function ConstrainDragYAxis(): JSX.Element {
+  const context = useDragDropContext()
+  if (!context) return <></>
+  const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
+  const transformer: Transformer = {
+    id: "constrain-y-axis",
+    order: 100,
+    callback: (transform) => ({ ...transform, y: 0 }),
+  }
+  onDragStart((event) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    addTransformer("draggables", id, transformer)
+  })
+  onDragEnd((event) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    removeTransformer("draggables", id, transformer.id)
+  })
+  return <></>
+}
+
+const getDraggableId = (event: unknown): string | undefined => {
+  if (typeof event !== "object" || event === null) return undefined
+  if (!("draggable" in event)) return undefined
+  const draggable = (event as { draggable?: { id?: unknown } }).draggable
+  if (!draggable) return undefined
+  return typeof draggable.id === "string" ? draggable.id : undefined
+}

packages/app/src/components/file-tree.tsx

@@ -23,6 +23,30 @@ export default function FileTree(props: {
         [props.nodeClass ?? ""]: !!props.nodeClass,
       }}
       style={`padding-left: ${level * 10}px`}
+      draggable={true}
+      onDragStart={(e: any) => {
+        const evt = e as globalThis.DragEvent
+        evt.dataTransfer!.effectAllowed = "copy"
+        evt.dataTransfer!.setData("text/plain", `file:${p.node.path}`)
+
+        // Create custom drag image without margins
+        const dragImage = document.createElement("div")
+        dragImage.className =
+          "flex items-center gap-x-2 px-2 py-1 bg-background-element rounded-md border border-border-1"
+        dragImage.style.position = "absolute"
+        dragImage.style.top = "-1000px"
+
+        // Copy only the icon and text content without padding
+        const icon = e.currentTarget.querySelector("svg")
+        const text = e.currentTarget.querySelector("span")
+        if (icon && text) {
+          dragImage.innerHTML = icon.outerHTML + text.outerHTML
+        }
+
+        document.body.appendChild(dragImage)
+        evt.dataTransfer!.setDragImage(dragImage, 0, 12)
+        setTimeout(() => document.body.removeChild(dragImage), 0)
+      }}
       {...p}
     >
       {p.children}
@@ -51,6 +75,7 @@ export default function FileTree(props: {
             <Switch>
               <Match when={node.type === "directory"}>
                 <Collapsible
+                  class="w-full"
                   forceMount={false}
                   open={local.file.node(node.path)?.expanded}
                   onOpenChange={(open) => (open ? local.file.expand(node.path) : local.file.collapse(node.path))}

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

@@ -0,0 +1,295 @@
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Button, FileIcon, Icon, IconButton, Tooltip } from "@/ui"
+import { Select } from "@/components/select"
+import { useLocal } from "@/context"
+import type { FileContext, LocalFile } from "@/context/local"
+import { getFilename } from "@/utils"
+import { createSpeechRecognition } from "@/utils/speech"
+
+interface PromptFormProps {
+  class?: string
+  classList?: Record<string, boolean>
+  onSubmit: (prompt: string) => Promise<void> | void
+  onOpenModelSelect: () => void
+  onInputRefChange?: (element: HTMLTextAreaElement | undefined) => void
+}
+
+export default function PromptForm(props: PromptFormProps) {
+  const local = useLocal()
+
+  const [prompt, setPrompt] = createSignal("")
+  const [isDragOver, setIsDragOver] = createSignal(false)
+
+  const placeholderText = "Start typing or speaking..."
+
+  const {
+    isSupported,
+    isRecording,
+    interim: interimTranscript,
+    start: startSpeech,
+    stop: stopSpeech,
+  } = createSpeechRecognition({
+    onFinal: (text) => setPrompt((prev) => (prev && !prev.endsWith(" ") ? prev + " " : prev) + text),
+  })
+
+  let inputRef: HTMLTextAreaElement | undefined = undefined
+  let overlayContainerRef: HTMLDivElement | undefined = undefined
+  let shouldAutoScroll = true
+
+  const promptContent = createMemo(() => {
+    const base = prompt() || ""
+    const interim = isRecording() ? interimTranscript() : ""
+    if (!base && !interim) {
+      return <span class="text-text-muted/70">{placeholderText}</span>
+    }
+    const needsSpace = base && interim && !base.endsWith(" ") && !interim.startsWith(" ")
+    return (
+      <>
+        <span class="text-text">{base}</span>
+        {interim && (
+          <span class="text-text-muted/60 italic">
+            {needsSpace ? " " : ""}
+            {interim}
+          </span>
+        )}
+      </>
+    )
+  })
+
+  createEffect(() => {
+    prompt()
+    interimTranscript()
+    queueMicrotask(() => {
+      if (!inputRef) return
+      if (!overlayContainerRef) return
+      if (!shouldAutoScroll) {
+        overlayContainerRef.scrollTop = inputRef.scrollTop
+        return
+      }
+      scrollPromptToEnd()
+    })
+  })
+
+  const handlePromptKeyDown = (event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => {
+    if (event.isComposing) return
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault()
+      inputRef?.form?.requestSubmit()
+    }
+  }
+
+  const handlePromptScroll = (event: Event & { currentTarget: HTMLTextAreaElement }) => {
+    const target = event.currentTarget
+    shouldAutoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 4
+    if (overlayContainerRef) overlayContainerRef.scrollTop = target.scrollTop
+  }
+
+  const scrollPromptToEnd = () => {
+    if (!inputRef) return
+    const maxInputScroll = inputRef.scrollHeight - inputRef.clientHeight
+    const next = maxInputScroll > 0 ? maxInputScroll : 0
+    inputRef.scrollTop = next
+    if (overlayContainerRef) overlayContainerRef.scrollTop = next
+    shouldAutoScroll = true
+  }
+
+  const handleSubmit = async (event: SubmitEvent) => {
+    event.preventDefault()
+    const currentPrompt = prompt()
+    setPrompt("")
+    shouldAutoScroll = true
+    if (overlayContainerRef) overlayContainerRef.scrollTop = 0
+    if (inputRef) {
+      inputRef.scrollTop = 0
+      inputRef.blur()
+    }
+
+    await props.onSubmit(currentPrompt)
+  }
+
+  onCleanup(() => {
+    props.onInputRefChange?.(undefined)
+  })
+
+  return (
+    <form onSubmit={handleSubmit} class={props.class} classList={props.classList}>
+      <div
+        class="w-full max-w-xl min-w-0 p-2 mx-auto rounded-lg isolate backdrop-blur-xs
+               flex flex-col gap-1
+               bg-gradient-to-b from-background-panel/90 to-background/90
+               ring-1 ring-border-active/50 border border-transparent
+               focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
+               transition-all duration-200"
+        classList={{
+          "shadow-[0_0_33px_rgba(0,0,0,0.8)]": !!local.file.active(),
+          "ring-2 ring-primary/60 bg-primary/5": isDragOver(),
+        }}
+        onDragEnter={(event) => {
+          const evt = event as unknown as globalThis.DragEvent
+          if (evt.dataTransfer?.types.includes("text/plain")) {
+            evt.preventDefault()
+            setIsDragOver(true)
+          }
+        }}
+        onDragLeave={(event) => {
+          if (event.currentTarget === event.target) {
+            setIsDragOver(false)
+          }
+        }}
+        onDragOver={(event) => {
+          const evt = event as unknown as globalThis.DragEvent
+          if (evt.dataTransfer?.types.includes("text/plain")) {
+            evt.preventDefault()
+            evt.dataTransfer.dropEffect = "copy"
+          }
+        }}
+        onDrop={(event) => {
+          const evt = event as unknown as globalThis.DragEvent
+          evt.preventDefault()
+          setIsDragOver(false)
+
+          const data = evt.dataTransfer?.getData("text/plain")
+          if (data && data.startsWith("file:")) {
+            const filePath = data.slice(5)
+            const fileNode = local.file.node(filePath)
+            if (fileNode) {
+              local.context.add({
+                type: "file",
+                path: filePath,
+              })
+            }
+          }
+        }}
+      >
+        <Show when={local.context.all().length > 0 || local.context.active()}>
+          <div class="flex flex-wrap gap-1">
+            <Show when={local.context.active()}>
+              <ActiveTabContextTag file={local.context.active()!} onClose={() => local.context.removeActive()} />
+            </Show>
+            <For each={local.context.all()}>
+              {(file) => <FileTag file={file} onClose={() => local.context.remove(file.key)} />}
+            </For>
+          </div>
+        </Show>
+        <div class="relative">
+          <textarea
+            ref={(element) => {
+              inputRef = element ?? undefined
+              props.onInputRefChange?.(inputRef)
+            }}
+            value={prompt()}
+            onInput={(event) => setPrompt(event.currentTarget.value)}
+            onKeyDown={handlePromptKeyDown}
+            onScroll={handlePromptScroll}
+            placeholder={placeholderText}
+            autocapitalize="off"
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck={false}
+            class="relative w-full h-20 rounded-md px-0.5 resize-none overflow-y-auto
+                   bg-transparent text-transparent caret-text font-light text-base
+                   leading-relaxed focus:outline-none selection:bg-primary/20"
+          ></textarea>
+          <div
+            ref={(element) => {
+              overlayContainerRef = element ?? undefined
+            }}
+            class="pointer-events-none absolute inset-0 overflow-hidden"
+          >
+            <div class="px-0.5 text-base font-light leading-relaxed whitespace-pre-wrap text-left text-text">
+              {promptContent()}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-between items-center text-xs text-text-muted">
+          <div class="flex gap-2 items-center">
+            <Select
+              options={local.agent.list().map((agent) => agent.name)}
+              current={local.agent.current().name}
+              onSelect={local.agent.set}
+              class="uppercase"
+            />
+            <Button onClick={() => props.onOpenModelSelect()}>
+              {local.model.current()?.name ?? "Select model"}
+              <Icon name="chevron-down" size={24} class="text-text-muted" />
+            </Button>
+            <span class="text-text-muted/70 whitespace-nowrap">{local.model.current()?.provider.name}</span>
+          </div>
+          <div class="flex gap-1 items-center">
+            <Show when={isSupported()}>
+              <Tooltip value={isRecording() ? "Stop voice input" : "Start voice input"} placement="top">
+                <IconButton
+                  onClick={async (event: MouseEvent) => {
+                    event.preventDefault()
+                    if (isRecording()) {
+                      stopSpeech()
+                    } else {
+                      startSpeech()
+                    }
+                    inputRef?.focus()
+                  }}
+                  classList={{
+                    "text-text-muted": !isRecording(),
+                    "text-error! animate-pulse": isRecording(),
+                  }}
+                  size="xs"
+                  variant="ghost"
+                >
+                  <Icon name="mic" size={16} />
+                </IconButton>
+              </Tooltip>
+            </Show>
+            <IconButton class="text-text-muted" size="xs" variant="ghost">
+              <Icon name="photo" size={16} />
+            </IconButton>
+            <IconButton
+              class="text-background-panel! bg-primary rounded-full! hover:bg-primary/90 ml-0.5"
+              size="xs"
+              variant="ghost"
+              type="submit"
+            >
+              <Icon name="arrow-up" size={14} />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+const ActiveTabContextTag = (props: { file: LocalFile; onClose: () => void }) => (
+  <div
+    class="flex items-center bg-background group/tag
+           border border-border-subtle/60 border-dashed
+           rounded-md text-xs text-text-muted"
+  >
+    <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}>
+      <Icon name="file" class="group-hover/tag:hidden" size={12} />
+      <Icon name="close" class="hidden group-hover/tag:block" size={12} />
+    </IconButton>
+    <div class="pr-1 flex gap-1 items-center">
+      <span>{getFilename(props.file.path)}</span>
+    </div>
+  </div>
+)
+
+const FileTag = (props: { file: FileContext; onClose: () => void }) => (
+  <div
+    class="flex items-center bg-background group/tag
+           border border-border-subtle/60
+           rounded-md text-xs text-text-muted"
+  >
+    <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}>
+      <FileIcon node={props.file} class="group-hover/tag:hidden size-3!" />
+      <Icon name="close" class="hidden group-hover/tag:block" size={12} />
+    </IconButton>
+    <div class="pr-1 flex gap-1 items-center">
+      <span>{getFilename(props.file.path)}</span>
+      <Show when={props.file.selection}>
+        <span>
+          ({props.file.selection!.startLine}-{props.file.selection!.endLine})
+        </span>
+      </Show>
+    </div>
+  </div>
+)

packages/app/src/components/resizeable-pane.tsx

@@ -0,0 +1,217 @@
+import { batch, createContext, createMemo, createSignal, onCleanup, Show, useContext } from "solid-js"
+import type { ComponentProps, JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLocal } from "@/context"
+
+type PaneDefault = number | { size: number; visible?: boolean }
+
+type LayoutContextValue = {
+  id: string
+  register: (pane: string, options: { min?: number | string; max?: number | string }) => void
+  size: (pane: string) => number
+  visible: (pane: string) => boolean
+  percent: (pane: string) => number
+  next: (pane: string) => string | undefined
+  startDrag: (left: string, right: string | undefined, event: MouseEvent) => void
+  dragging: () => string | undefined
+}
+
+const LayoutContext = createContext<LayoutContextValue | undefined>(undefined)
+
+export interface ResizeableLayoutProps {
+  id: string
+  defaults: Record<string, PaneDefault>
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  children: JSX.Element
+}
+
+export interface ResizeablePaneProps {
+  id: string
+  minSize?: number | string
+  maxSize?: number | string
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  children: JSX.Element
+}
+
+export function ResizeableLayout(props: ResizeableLayoutProps) {
+  const local = useLocal()
+  const [meta, setMeta] = createStore<Record<string, { min: number; max: number; minPx?: number; maxPx?: number }>>({})
+  const [dragging, setDragging] = createSignal<string>()
+  let container: HTMLDivElement | undefined
+
+  local.layout.ensure(props.id, props.defaults)
+
+  const order = createMemo(() => local.layout.order(props.id))
+  const visibleOrder = createMemo(() => order().filter((pane) => local.layout.visible(props.id, pane)))
+  const totalVisible = createMemo(() => {
+    const panes = visibleOrder()
+    if (!panes.length) return 0
+    return panes.reduce((total, pane) => total + local.layout.size(props.id, pane), 0)
+  })
+
+  const percent = (pane: string) => {
+    const panes = visibleOrder()
+    if (!panes.length) return 0
+    const total = totalVisible()
+    if (!total) return 100 / panes.length
+    return (local.layout.size(props.id, pane) / total) * 100
+  }
+
+  const nextPane = (pane: string) => {
+    const panes = visibleOrder()
+    const index = panes.indexOf(pane)
+    if (index === -1) return undefined
+    return panes[index + 1]
+  }
+
+  const minMax = (pane: string) => meta[pane] ?? { min: 5, max: 95 }
+
+  const pxToPercent = (px: number, total: number) => (px / total) * 100
+
+  const boundsForPair = (left: string, right: string, total: number) => {
+    const leftMeta = minMax(left)
+    const rightMeta = minMax(right)
+    const containerWidth = container?.getBoundingClientRect().width ?? 0
+
+    let minLeft = leftMeta.min
+    let maxLeft = leftMeta.max
+    let minRight = rightMeta.min
+    let maxRight = rightMeta.max
+
+    if (containerWidth && leftMeta.minPx !== undefined) minLeft = pxToPercent(leftMeta.minPx, containerWidth)
+    if (containerWidth && leftMeta.maxPx !== undefined) maxLeft = pxToPercent(leftMeta.maxPx, containerWidth)
+    if (containerWidth && rightMeta.minPx !== undefined) minRight = pxToPercent(rightMeta.minPx, containerWidth)
+    if (containerWidth && rightMeta.maxPx !== undefined) maxRight = pxToPercent(rightMeta.maxPx, containerWidth)
+
+    const finalMinLeft = Math.max(minLeft, total - maxRight)
+    const finalMaxLeft = Math.min(maxLeft, total - minRight)
+    return {
+      min: Math.min(finalMinLeft, finalMaxLeft),
+      max: Math.max(finalMinLeft, finalMaxLeft),
+    }
+  }
+
+  const setPair = (left: string, right: string, leftSize: number, rightSize: number) => {
+    batch(() => {
+      local.layout.setSize(props.id, left, leftSize)
+      local.layout.setSize(props.id, right, rightSize)
+    })
+  }
+
+  const startDrag = (left: string, right: string | undefined, event: MouseEvent) => {
+    if (!right) return
+    if (!container) return
+    const rect = container.getBoundingClientRect()
+    if (!rect.width) return
+    event.preventDefault()
+    const startX = event.clientX
+    const startLeft = local.layout.size(props.id, left)
+    const startRight = local.layout.size(props.id, right)
+    const total = startLeft + startRight
+    const bounds = boundsForPair(left, right, total)
+    const move = (moveEvent: MouseEvent) => {
+      const delta = ((moveEvent.clientX - startX) / rect.width) * 100
+      const nextLeft = Math.max(bounds.min, Math.min(bounds.max, startLeft + delta))
+      const nextRight = total - nextLeft
+      setPair(left, right, nextLeft, nextRight)
+    }
+    const stop = () => {
+      setDragging()
+      document.removeEventListener("mousemove", move)
+      document.removeEventListener("mouseup", stop)
+    }
+    setDragging(left)
+    document.addEventListener("mousemove", move)
+    document.addEventListener("mouseup", stop)
+    onCleanup(() => stop())
+  }
+
+  const register = (pane: string, options: { min?: number | string; max?: number | string }) => {
+    let min = 5
+    let max = 95
+    let minPx: number | undefined
+    let maxPx: number | undefined
+
+    if (typeof options.min === "string" && options.min.endsWith("px")) {
+      minPx = parseInt(options.min)
+      min = 0
+    } else if (typeof options.min === "number") {
+      min = options.min
+    }
+
+    if (typeof options.max === "string" && options.max.endsWith("px")) {
+      maxPx = parseInt(options.max)
+      max = 100
+    } else if (typeof options.max === "number") {
+      max = options.max
+    }
+
+    setMeta(pane, () => ({ min, max, minPx, maxPx }))
+    const fallback = props.defaults[pane]
+    local.layout.ensurePane(props.id, pane, fallback ?? { size: min, visible: true })
+  }
+
+  const contextValue: LayoutContextValue = {
+    id: props.id,
+    register,
+    size: (pane) => local.layout.size(props.id, pane),
+    visible: (pane) => local.layout.visible(props.id, pane),
+    percent,
+    next: nextPane,
+    startDrag,
+    dragging,
+  }
+
+  return (
+    <LayoutContext.Provider value={contextValue}>
+      <div
+        ref={(node) => {
+          container = node ?? undefined
+        }}
+        class={props.class ? `relative flex h-full w-full ${props.class}` : "relative flex h-full w-full"}
+        classList={props.classList}
+      >
+        {props.children}
+      </div>
+    </LayoutContext.Provider>
+  )
+}
+
+export function ResizeablePane(props: ResizeablePaneProps) {
+  const context = useContext(LayoutContext)!
+  context.register(props.id, { min: props.minSize, max: props.maxSize })
+  const visible = () => context.visible(props.id)
+  const width = () => context.percent(props.id)
+  const next = () => context.next(props.id)
+  const dragging = () => context.dragging() === props.id
+
+  return (
+    <Show when={visible()}>
+      <div
+        class={props.class ? `relative flex h-full flex-col ${props.class}` : "relative flex h-full flex-col"}
+        classList={props.classList}
+        style={{
+          width: `${width()}%`,
+          flex: `0 0 ${width()}%`,
+        }}
+      >
+        {props.children}
+        <Show when={next()}>
+          <div
+            class="absolute top-0 -right-1 h-full w-1.5 cursor-col-resize z-50 group"
+            onMouseDown={(event) => context.startDrag(props.id, next(), event)}
+          >
+            <div
+              classList={{
+                "w-0.5 h-full bg-transparent transition-colors group-hover:bg-border-active": true,
+                "bg-border-active!": dragging(),
+              }}
+            />
+          </div>
+        </Show>
+      </div>
+    </Show>
+  )
+}

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

@@ -101,11 +101,7 @@ function EditToolPart(props: { part: ToolPart }) {
               </>
             }
           >
-            <Code
-              path={state().input["filePath"] as string}
-              code={state().metadata["diff"] as string}
-              class="[&_code]:pb-0!"
-            />
+            <Code path={state().input["filePath"] as string} code={state().metadata["diff"] as string} />
           </CollapsiblePart>
         )}
       </Match>
@@ -412,7 +408,7 @@ export default function SessionTimeline(props: { session: string; class?: string
                     </div>
                   </Collapsible.Trigger>
                   <Collapsible.Content>
-                    <Code path="session.json" code={JSON.stringify(session(), null, 2)} class="[&_code]:pb-0!" />
+                    <Code path="session.json" code={JSON.stringify(session(), null, 2)} />
                   </Collapsible.Content>
                 </Collapsible>
               </li>
@@ -429,15 +425,11 @@ export default function SessionTimeline(props: { session: string; class?: string
                           </div>
                         </Collapsible.Trigger>
                         <Collapsible.Content>
-                          <Code
-                            path={message.id + ".json"}
-                            code={JSON.stringify(message, null, 2)}
-                            class="[&_code]:pb-0!"
-                          />
+                          <Code path={message.id + ".json"} code={JSON.stringify(message, null, 2)} />
                         </Collapsible.Content>
                       </Collapsible>
                     </li>
-                    <For each={sync.data.part[message.id]?.filter(valid)}>
+                    <For each={sync.data.part[message.id]}>
                       {(part) => (
                         <li>
                           <Collapsible>
@@ -449,11 +441,7 @@ export default function SessionTimeline(props: { session: string; class?: string
                               </div>
                             </Collapsible.Trigger>
                             <Collapsible.Content>
-                              <Code
-                                path={message.id + "." + part.id + ".json"}
-                                code={JSON.stringify(part, null, 2)}
-                                class="[&_code]:pb-0!"
-                              />
+                              <Code path={message.id + "." + part.id + ".json"} code={JSON.stringify(part, null, 2)} />
                             </Collapsible.Content>
                           </Collapsible>
                         </li>

packages/app/src/context/local.tsx

@@ -25,6 +25,9 @@ export type LocalModel = Omit<Model, "provider"> & {
 }
 export type ModelKey = { providerID: string; modelID: string }
 
+export type FileContext = { type: "file"; path: string; selection?: TextSelection }
+export type ContextItem = FileContext
+
 function init() {
   const sdk = useSDK()
   const sync = useSync()
@@ -163,7 +166,16 @@ function init() {
     }
 
     const resetNode = (path: string) => {
-      setStore("node", path, undefined!)
+      setStore("node", path, {
+        loaded: undefined,
+        pinned: undefined,
+        content: undefined,
+        selection: undefined,
+        scrollTop: undefined,
+        folded: undefined,
+        view: undefined,
+        selectedChange: undefined,
+      })
     }
 
     const relative = (path: string) => path.replace(sync.data.path.directory + "/", "")
@@ -203,6 +215,7 @@ function init() {
         ]
       })
       setStore("active", relativePath)
+      context.addActive()
       if (options?.pinned) setStore("node", path, "pinned", true)
       if (options?.view && store.node[relativePath].view === undefined) setStore("node", path, "view", options.view)
       if (store.node[relativePath].loaded) return
@@ -336,52 +349,103 @@ function init() {
   })()
 
   const layout = (() => {
-    const [store, setStore] = createStore<{
-      rightPane: boolean
-      leftWidth: number
-      rightWidth: number
-    }>({
-      rightPane: false,
-      leftWidth: 200, // Default 50 * 4px (w-50 = 12.5rem = 200px)
-      rightWidth: 320, // Default 80 * 4px (w-80 = 20rem = 320px)
-    })
+    type PaneState = { size: number; visible: boolean }
+    type LayoutState = { panes: Record<string, PaneState>; order: string[] }
+    type PaneDefault = number | { size: number; visible?: boolean }
 
-    const value = localStorage.getItem("layout")
-    if (value) {
-      const v = JSON.parse(value)
-      if (typeof v?.rightPane === "boolean") setStore("rightPane", v.rightPane)
-      if (typeof v?.leftWidth === "number") setStore("leftWidth", Math.max(150, Math.min(400, v.leftWidth)))
-      if (typeof v?.rightWidth === "number") setStore("rightWidth", Math.max(200, Math.min(500, v.rightWidth)))
+    const [store, setStore] = createStore<Record<string, LayoutState>>({})
+
+    const raw = localStorage.getItem("layout")
+    if (raw) {
+      const data = JSON.parse(raw)
+      if (data && typeof data === "object" && !Array.isArray(data)) {
+        const first = Object.values(data)[0] as LayoutState
+        if (first && typeof first === "object" && "panes" in first) {
+          setStore(() => data as Record<string, LayoutState>)
+        }
+      }
     }
+
     createEffect(() => {
       localStorage.setItem("layout", JSON.stringify(store))
     })
 
+    const normalize = (value: PaneDefault): PaneState => {
+      if (typeof value === "number") return { size: value, visible: true }
+      return { size: value.size, visible: value.visible ?? true }
+    }
+
+    const ensure = (id: string, defaults: Record<string, PaneDefault>) => {
+      const entries = Object.entries(defaults)
+      if (!entries.length) return
+      setStore(id, (current) => {
+        if (current) return current
+        return {
+          panes: Object.fromEntries(entries.map(([pane, config]) => [pane, normalize(config)])),
+          order: entries.map(([pane]) => pane),
+        }
+      })
+      for (const [pane, config] of entries) {
+        if (!store[id]?.panes[pane]) {
+          setStore(id, "panes", pane, () => normalize(config))
+        }
+        if (!(store[id]?.order ?? []).includes(pane)) {
+          setStore(id, "order", (list) => [...list, pane])
+        }
+      }
+    }
+
+    const ensurePane = (id: string, pane: string, fallback?: PaneDefault) => {
+      if (!store[id]) {
+        const value = normalize(fallback ?? { size: 0, visible: true })
+        setStore(id, () => ({
+          panes: { [pane]: value },
+          order: [pane],
+        }))
+        return
+      }
+      if (!store[id].panes[pane]) {
+        const value = normalize(fallback ?? { size: 0, visible: true })
+        setStore(id, "panes", pane, () => value)
+      }
+      if (!store[id].order.includes(pane)) {
+        setStore(id, "order", (list) => [...list, pane])
+      }
+    }
+
+    const size = (id: string, pane: string) => store[id]?.panes[pane]?.size ?? 0
+    const visible = (id: string, pane: string) => store[id]?.panes[pane]?.visible ?? false
+
+    const setSize = (id: string, pane: string, value: number) => {
+      if (!store[id]?.panes[pane]) return
+      const next = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0
+      setStore(id, "panes", pane, "size", next)
+    }
+
+    const setVisible = (id: string, pane: string, value: boolean) => {
+      if (!store[id]?.panes[pane]) return
+      setStore(id, "panes", pane, "visible", value)
+    }
+
+    const toggle = (id: string, pane: string) => {
+      setVisible(id, pane, !visible(id, pane))
+    }
+
+    const show = (id: string, pane: string) => setVisible(id, pane, true)
+    const hide = (id: string, pane: string) => setVisible(id, pane, false)
+    const order = (id: string) => store[id]?.order ?? []
+
     return {
-      rightPane() {
-        return store.rightPane
-      },
-      leftWidth() {
-        return store.leftWidth
-      },
-      rightWidth() {
-        return store.rightWidth
-      },
-      toggleRightPane() {
-        setStore("rightPane", (x) => !x)
-      },
-      openRightPane() {
-        setStore("rightPane", true)
-      },
-      closeRightPane() {
-        setStore("rightPane", false)
-      },
-      setLeftWidth(width: number) {
-        setStore("leftWidth", Math.max(150, Math.min(400, width)))
-      },
-      setRightWidth(width: number) {
-        setStore("rightWidth", Math.max(200, Math.min(500, width)))
-      },
+      ensure,
+      ensurePane,
+      size,
+      visible,
+      setSize,
+      setVisible,
+      toggle,
+      show,
+      hide,
+      order,
     }
   })()
 
@@ -406,12 +470,51 @@ function init() {
     }
   })()
 
+  const context = (() => {
+    const [store, setStore] = createStore<{
+      activeTab: boolean
+      items: (ContextItem & { key: string })[]
+    }>({
+      activeTab: true,
+      items: [],
+    })
+
+    return {
+      all() {
+        return store.items
+      },
+      active() {
+        return store.activeTab ? file.active() : undefined
+      },
+      addActive() {
+        setStore("activeTab", true)
+      },
+      removeActive() {
+        setStore("activeTab", false)
+      },
+      add(item: ContextItem) {
+        let key = item.type
+        switch (item.type) {
+          case "file":
+            key += `${item.path}:${item.selection?.startLine}:${item.selection?.endLine}`
+            break
+        }
+        if (store.items.find((x) => x.key === key)) return
+        setStore("items", (x) => [...x, { key, ...item }])
+      },
+      remove(key: string) {
+        setStore("items", (x) => x.filter((x) => x.key !== key))
+      },
+    }
+  })()
+
   const result = {
     model,
     agent,
     file,
     layout,
     session,
+    context,
   }
   return result
 }

packages/app/src/context/sync.tsx

@@ -115,6 +115,7 @@ function init() {
 
   const sanitizer = createMemo(() => new RegExp(`${store.path.directory}/`, "g"))
   const sanitize = (text: string) => text.replace(sanitizer(), "")
+  const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
 
   return {
     data: store,
@@ -146,6 +147,7 @@ function init() {
       },
     },
     load,
+    absolute,
     sanitize,
   }
 }

packages/app/src/pages/index.tsx

@@ -1,21 +1,11 @@
-import { Button, FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui"
+import { FileIcon, Icon, IconButton, Tooltip } from "@/ui"
 import { Tabs } from "@/ui/tabs"
-import { Select } from "@/components/select"
 import FileTree from "@/components/file-tree"
+import EditorPane from "@/components/editor-pane"
 import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
 import { SelectDialog } from "@/components/select-dialog"
-import { useLocal, useSDK } from "@/context"
-import { Code } from "@/components/code"
-import {
-  DragDropProvider,
-  DragDropSensors,
-  DragOverlay,
-  SortableProvider,
-  createSortable,
-  closestCenter,
-  useDragDropContext,
-} from "@thisbeyond/solid-dnd"
-import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
+import { useLocal } from "@/context"
+import { ResizeableLayout, ResizeablePane } from "@/components/resizeable-pane"
 import type { LocalFile } from "@/context/local"
 import SessionList from "@/components/session-list"
 import SessionTimeline from "@/components/session-timeline"
@@ -23,18 +13,17 @@ import { createStore } from "solid-js/store"
 import { getDirectory, getFilename } from "@/utils"
 
 export default function Page() {
-  const sdk = useSDK()
   const local = useLocal()
   const [store, setStore] = createStore({
     clickTimer: undefined as number | undefined,
-    activeItem: undefined as string | undefined,
-    prompt: "",
-    dragging: undefined as "left" | "right" | undefined,
     modelSelectOpen: false,
     fileSelectOpen: false,
   })
 
-  let inputRef: HTMLInputElement | undefined = undefined
+  const layoutKey = "workspace"
+  const timelinePane = "timeline"
+
+  let inputRef: HTMLTextAreaElement | undefined = undefined
 
   const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
 
@@ -46,54 +35,52 @@ export default function Page() {
     document.removeEventListener("keydown", handleKeyDown)
   })
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.getModifierState(MOD) && e.shiftKey && e.key.toLowerCase() === "p") {
-      e.preventDefault()
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") {
+      event.preventDefault()
       // TODO: command palette
       return
     }
-    if (e.getModifierState(MOD) && e.key.toLowerCase() === "p") {
-      e.preventDefault()
+    if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") {
+      event.preventDefault()
       setStore("fileSelectOpen", true)
       return
     }
 
-    const inputFocused = document.activeElement === inputRef
-    if (inputFocused) {
-      if (e.key === "Escape") {
+    const focused = document.activeElement === inputRef
+    if (focused) {
+      if (event.key === "Escape") {
         inputRef?.blur()
       }
       return
     }
 
-    if (document.activeElement?.id === "select-filter") {
-      return
-    }
-
     if (local.file.active()) {
-      if (e.getModifierState(MOD)) {
-        if (e.key.toLowerCase() === "a") {
+      const active = local.file.active()!
+      if (event.key === "Enter" && active.selection) {
+        local.context.add({
+          type: "file",
+          path: active.path,
+          selection: { ...active.selection },
+        })
+        return
+      }
+
+      if (event.getModifierState(MOD)) {
+        if (event.key.toLowerCase() === "a") {
           return
         }
-        if (e.key.toLowerCase() === "c") {
+        if (event.key.toLowerCase() === "c") {
           return
         }
       }
     }
 
-    if (e.key.length === 1 && e.key !== "Unidentified") {
+    if (event.key.length === 1 && event.key !== "Unidentified") {
       inputRef?.focus()
     }
   }
 
-  const navigateChange = (dir: 1 | -1) => {
-    const active = local.file.active()
-    if (!active) return
-    const current = local.file.changeIndex(active.path)
-    const next = current == undefined ? (dir === 1 ? 0 : -1) : current + dir
-    local.file.setChangeIndex(active.path, next)
-  }
-
   const resetClickTimer = () => {
     if (!store.clickTimer) return
     clearTimeout(store.clickTimer)
@@ -117,190 +104,80 @@ export default function Page() {
     }
   }
 
-  const handleTabChange = (path: string) => {
-    local.file.open(path)
-  }
-
-  const handleTabClose = (file: LocalFile) => {
-    local.file.close(file.path)
-  }
-
-  const onDragStart = (event: any) => {
-    setStore("activeItem", event.draggable.id as string)
-  }
-
-  const onDragOver = (event: DragEvent) => {
-    const { draggable, droppable } = event
-    if (draggable && droppable) {
-      const currentFiles = local.file.opened().map((f) => f.path)
-      const fromIndex = currentFiles.indexOf(draggable.id.toString())
-      const toIndex = currentFiles.indexOf(droppable.id.toString())
-      if (fromIndex !== toIndex) {
-        local.file.move(draggable.id.toString(), toIndex)
-      }
-    }
-  }
-
-  const onDragEnd = () => {
-    setStore("activeItem", undefined)
-  }
-
-  const handleLeftDragStart = (e: MouseEvent) => {
-    e.preventDefault()
-    setStore("dragging", "left")
-    const startX = e.clientX
-    const startWidth = local.layout.leftWidth()
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - startX
-      const newWidth = startWidth + deltaX
-      local.layout.setLeftWidth(newWidth)
-    }
-
-    const handleMouseUp = () => {
-      setStore("dragging", undefined)
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
-
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
-
-  const handleRightDragStart = (e: MouseEvent) => {
-    e.preventDefault()
-    setStore("dragging", "right")
-    const startX = e.clientX
-    const startWidth = local.layout.rightWidth()
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = startX - e.clientX
-      const newWidth = startWidth + deltaX
-      local.layout.setRightWidth(newWidth)
-    }
-
-    const handleMouseUp = () => {
-      setStore("dragging", undefined)
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
-
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
-
-  const handleSubmit = async (e: SubmitEvent) => {
-    e.preventDefault()
-    const prompt = store.prompt
-    setStore("prompt", "")
-    inputRef?.blur()
-
-    const session =
-      (local.layout.rightPane() ? local.session.active() : undefined) ??
-      (await sdk.session.create().then((x) => x.data!))
-    local.session.setActive(session!.id)
-    local.layout.openRightPane()
-
-    const response = await sdk.session.prompt({
-      path: { id: session!.id },
-      body: {
-        agent: local.agent.current()!.name,
-        model: { modelID: local.model.current()!.id, providerID: local.model.current()!.provider.id },
-        parts: [
-          {
-            type: "text",
-            text: prompt,
-          },
-          ...local.file
-            .opened()
-            .filter((f) => f.selection || local.file.active()?.path === f.path)
-            .flatMap((f) => [
-              {
-                type: "file" as const,
-                mime: "text/plain",
-                url: `file://${f.absolute}${f.selection ? `?start=${f.selection.startLine}&end=${f.selection.endLine}` : ""}`,
-                filename: f.name,
-                source: {
-                  type: "file" as const,
-                  text: {
-                    value: "@" + f.name,
-                    start: 0, // f.start,
-                    end: 0, // f.end,
-                  },
-                  path: f.absolute,
-                },
-              },
-            ]),
-        ],
-      },
-    })
-
-    console.log("response", response)
-  }
-
   return (
     <div class="relative">
-      <div
-        class="fixed top-0 left-0 h-full border-r border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10"
-        style={`width: ${local.layout.leftWidth()}px`}
+      <ResizeableLayout
+        id={layoutKey}
+        defaults={{
+          explorer: { size: 24, visible: true },
+          editor: { size: 56, visible: true },
+          timeline: { size: 20, visible: false },
+        }}
+        class="h-screen"
       >
-        <Tabs class="relative flex flex-col h-full" defaultValue="files">
-          <div class="sticky top-0 shrink-0 flex">
-            <Tabs.List class="grow w-full after:hidden">
-              <Tabs.Trigger value="files" class="flex-1 justify-center text-xs">
-                Files
-              </Tabs.Trigger>
-              <Tabs.Trigger value="changes" class="flex-1 justify-center text-xs">
-                Changes
-              </Tabs.Trigger>
-            </Tabs.List>
-          </div>
-          <Tabs.Content value="files" class="grow min-h-0 py-2 bg-background">
-            <FileTree path="" onFileClick={handleFileClick} />
-          </Tabs.Content>
-          <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background">
-            <Show
-              when={local.file.changes().length}
-              fallback={<div class="px-2 text-xs text-text-muted">No changes</div>}
-            >
-              <ul class="">
-                <For each={local.file.changes()}>
-                  {(path) => (
-                    <li>
-                      <button
-                        onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
-                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element"
-                      >
-                        <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
-                        <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
-                        <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
-                          {getDirectory(path)}
-                        </span>
-                      </button>
-                    </li>
-                  )}
-                </For>
-              </ul>
-            </Show>
-          </Tabs.Content>
-        </Tabs>
-      </div>
-      <div
-        class="fixed top-0 h-full w-1.5 bg-transparent cursor-col-resize z-50 group"
-        style={`left: ${local.layout.leftWidth()}px`}
-        onMouseDown={(e) => handleLeftDragStart(e)}
-      >
-        <div
-          classList={{
-            "w-0.5 h-full bg-transparent group-hover:bg-border-active transition-colors": true,
-            "bg-border-active!": store.dragging === "left",
-          }}
-        />
-      </div>
-      <Show when={local.layout.rightPane()}>
-        <div
-          class="fixed top-0 right-0 h-full border-l border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10"
-          style={`width: ${local.layout.rightWidth()}px`}
+        <ResizeablePane
+          id="explorer"
+          minSize="150px"
+          maxSize="300px"
+          class="border-r border-border-subtle/30 bg-background z-10 overflow-hidden"
+        >
+          <Tabs class="relative flex flex-col h-full" defaultValue="files">
+            <div class="sticky top-0 shrink-0 flex">
+              <Tabs.List class="grow w-full after:hidden">
+                <Tabs.Trigger value="files" class="flex-1 justify-center text-xs">
+                  Files
+                </Tabs.Trigger>
+                <Tabs.Trigger value="changes" class="flex-1 justify-center text-xs">
+                  Changes
+                </Tabs.Trigger>
+              </Tabs.List>
+            </div>
+            <Tabs.Content value="files" class="grow min-h-0 py-2 bg-background">
+              <FileTree path="" onFileClick={handleFileClick} />
+            </Tabs.Content>
+            <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background">
+              <Show
+                when={local.file.changes().length}
+                fallback={<div class="px-2 text-xs text-text-muted">No changes</div>}
+              >
+                <ul class="">
+                  <For each={local.file.changes()}>
+                    {(path) => (
+                      <li>
+                        <button
+                          onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
+                          class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element"
+                        >
+                          <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
+                          <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
+                          <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
+                            {getDirectory(path)}
+                          </span>
+                        </button>
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              </Show>
+            </Tabs.Content>
+          </Tabs>
+        </ResizeablePane>
+        <ResizeablePane id="editor" minSize={30} maxSize={80} class="bg-background">
+          <EditorPane
+            layoutKey={layoutKey}
+            timelinePane={timelinePane}
+            onFileClick={handleFileClick}
+            onOpenModelSelect={() => setStore("modelSelectOpen", true)}
+            onInputRefChange={(element: HTMLTextAreaElement | null) => {
+              inputRef = element ?? undefined
+            }}
+          />
+        </ResizeablePane>
+        <ResizeablePane
+          id="timeline"
+          minSize={20}
+          maxSize={40}
+          class="border-l border-border-subtle/30 bg-background z-10 overflow-hidden"
         >
           <div class="relative flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
             <Show when={local.session.active()} fallback={<SessionList />}>
@@ -326,216 +203,8 @@ export default function Page() {
               )}
             </Show>
           </div>
-        </div>
-        <div
-          class="fixed top-0 h-full w-1.5 bg-transparent cursor-col-resize z-50 group flex justify-end"
-          style={`right: ${local.layout.rightWidth()}px`}
-          onMouseDown={(e) => handleRightDragStart(e)}
-        >
-          <div
-            classList={{
-              "w-0.5 h-full bg-transparent group-hover:bg-border-active transition-colors": true,
-              "bg-border-active!": store.dragging === "right",
-            }}
-          />
-        </div>
-      </Show>
-      <div
-        class="relative"
-        style={`margin-left: ${local.layout.leftWidth()}px; margin-right: ${local.layout.rightPane() ? local.layout.rightWidth() : 0}px`}
-      >
-        <Logo
-          size={64}
-          variant="ornate"
-          class="absolute top-2/5 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-        />
-        <DragDropProvider
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd}
-          onDragOver={onDragOver}
-          collisionDetector={closestCenter}
-        >
-          <DragDropSensors />
-          <ConstrainDragYAxis />
-          <Tabs
-            class="relative grow w-full flex flex-col h-screen"
-            value={local.file.active()?.path}
-            onChange={handleTabChange}
-          >
-            <div class="sticky top-0 shrink-0 flex">
-              <Tabs.List class="grow">
-                <SortableProvider ids={local.file.opened().map((f) => f.path)}>
-                  <For each={local.file.opened()}>
-                    {(file) => <SortableTab file={file} onTabClick={handleFileClick} onTabClose={handleTabClose} />}
-                  </For>
-                </SortableProvider>
-              </Tabs.List>
-              <div class="shrink-0 h-full flex items-center gap-1 px-2 border-b border-border-subtle/40">
-                <Show when={local.file.active() && local.file.active()!.content?.diff}>
-                  {(() => {
-                    const f = local.file.active()!
-                    const view = local.file.view(f.path)
-                    return (
-                      <div class="flex items-center gap-1">
-                        <Show when={view !== "raw"}>
-                          <div class="mr-1 flex items-center gap-1">
-                            <Tooltip value="Previous change" placement="bottom">
-                              <IconButton size="xs" variant="ghost" onClick={() => navigateChange(-1)}>
-                                <Icon name="arrow-up" size={14} />
-                              </IconButton>
-                            </Tooltip>
-                            <Tooltip value="Next change" placement="bottom">
-                              <IconButton size="xs" variant="ghost" onClick={() => navigateChange(1)}>
-                                <Icon name="arrow-down" size={14} />
-                              </IconButton>
-                            </Tooltip>
-                          </div>
-                        </Show>
-                        <Tooltip value="Raw" placement="bottom">
-                          <IconButton
-                            size="xs"
-                            variant="ghost"
-                            classList={{
-                              "text-text": view === "raw",
-                              "text-text-muted/70": view !== "raw",
-                              "bg-background-element": view === "raw",
-                            }}
-                            onClick={() => local.file.setView(f.path, "raw")}
-                          >
-                            <Icon name="file-text" size={14} />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip value="Unified diff" placement="bottom">
-                          <IconButton
-                            size="xs"
-                            variant="ghost"
-                            classList={{
-                              "text-text": view === "diff-unified",
-                              "text-text-muted/70": view !== "diff-unified",
-                              "bg-background-element": view === "diff-unified",
-                            }}
-                            onClick={() => local.file.setView(f.path, "diff-unified")}
-                          >
-                            <Icon name="checklist" size={14} />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip value="Split diff" placement="bottom">
-                          <IconButton
-                            size="xs"
-                            variant="ghost"
-                            classList={{
-                              "text-text": view === "diff-split",
-                              "text-text-muted/70": view !== "diff-split",
-                              "bg-background-element": view === "diff-split",
-                            }}
-                            onClick={() => local.file.setView(f.path, "diff-split")}
-                          >
-                            <Icon name="columns" size={14} />
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    )
-                  })()}
-                </Show>
-                <Tooltip value={local.layout.rightPane() ? "Close pane" : "Open pane"} placement="bottom">
-                  <IconButton size="xs" variant="ghost" onClick={() => local.layout.toggleRightPane()}>
-                    <Icon name={local.layout.rightPane() ? "close-pane" : "open-pane"} size={14} />
-                  </IconButton>
-                </Tooltip>
-              </div>
-            </div>
-            <For each={local.file.opened()}>
-              {(file) => (
-                <Tabs.Content value={file.path} class="grow h-full pt-1 select-text">
-                  {(() => {
-                    const view = local.file.view(file.path)
-                    const showRaw = view === "raw" || !file.content?.diff
-                    const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "")
-                    return <Code path={file.path} code={code} />
-                  })()}
-                </Tabs.Content>
-              )}
-            </For>
-          </Tabs>
-          <DragOverlay>
-            {store.activeItem &&
-              (() => {
-                const draggedFile = local.file.node(store.activeItem!)
-                return (
-                  <div
-                    class="relative px-3 h-8 flex items-center 
-                           text-sm font-medium text-text whitespace-nowrap
-                           shrink-0 bg-background-panel 
-                           border-x border-border-subtle/40 border-b border-b-transparent"
-                  >
-                    <TabVisual file={draggedFile} />
-                  </div>
-                )
-              })()}
-          </DragOverlay>
-        </DragDropProvider>
-        <form
-          onSubmit={handleSubmit}
-          class="peer/editor absolute inset-x-4 z-50 flex items-center justify-center"
-          classList={{
-            "bottom-8": !!local.file.active(),
-            "bottom-2/5": local.file.active() === undefined,
-          }}
-        >
-          <div
-            class="w-full max-w-xl min-w-0 p-2 mx-auto rounded-lg isolate backdrop-blur-xs
-                   flex flex-col gap-1
-                   bg-gradient-to-b from-background-panel/90 to-background/90
-                   ring-1 ring-border-active/50 border border-transparent
-                   shadow-[0_0_33px_rgba(0,0,0,0.8)]
-                   focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary"
-          >
-            <div class="flex flex-wrap gap-1">
-              <Show when={local.file.active()}>
-                <FileTag
-                  default
-                  file={local.file.active()!}
-                  onClose={() => local.file.close(local.file.active()?.path ?? "")}
-                />
-              </Show>
-              <For each={local.file.opened().filter((x) => x.selection)}>
-                {(file) => <FileTag file={file} onClose={() => local.file.select(file.path, undefined)} />}
-              </For>
-            </div>
-            <input
-              ref={(el) => (inputRef = el)}
-              type="text"
-              value={store.prompt}
-              onInput={(e) => setStore("prompt", e.currentTarget.value)}
-              placeholder="Placeholder text..."
-              class="w-full p-1 pb-4 text-text font-light placeholder-text-muted/70 text-sm focus:outline-none"
-            />
-            <div class="flex justify-between items-center text-xs text-text-muted">
-              <div class="flex gap-2 items-center">
-                <Select
-                  options={local.agent.list().map((a) => a.name)}
-                  current={local.agent.current().name}
-                  onSelect={local.agent.set}
-                  class="uppercase"
-                />
-                <Button onClick={() => setStore("modelSelectOpen", true)}>
-                  {local.model.current()?.name ?? "Select model"}
-                  <Icon name="chevron-down" size={24} class="text-text-muted" />
-                </Button>
-                <span class="text-text-muted/70 whitespace-nowrap">{local.model.current()?.provider.name}</span>
-              </div>
-              <div class="flex gap-1 items-center">
-                <IconButton class="text-text-muted" size="xs" variant="ghost">
-                  <Icon name="photo" size={16} />
-                </IconButton>
-                <IconButton class="text-background-panel! bg-primary rounded-full!" size="xs" variant="ghost">
-                  <Icon name="arrow-up" size={14} />
-                </IconButton>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
+        </ResizeablePane>
+      </ResizeableLayout>
       <Show when={store.modelSelectOpen}>
         <SelectDialog
           key={(x) => `${x.provider.id}:${x.id}`}
@@ -607,102 +276,3 @@ export default function Page() {
     </div>
   )
 }
-
-const TabVisual = (props: { file: LocalFile }) => {
-  return (
-    <div class="flex items-center gap-x-1.5">
-      <FileIcon node={props.file} class="" />
-      <span classList={{ "text-xs": true, "text-primary": !!props.file.status?.status, italic: !props.file.pinned }}>
-        {props.file.name}
-      </span>
-      <span class="text-xs opacity-70">
-        <Switch>
-          <Match when={props.file.status?.status === "modified"}>
-            <span class="text-primary">M</span>
-          </Match>
-          <Match when={props.file.status?.status === "added"}>
-            <span class="text-success">A</span>
-          </Match>
-          <Match when={props.file.status?.status === "deleted"}>
-            <span class="text-error">D</span>
-          </Match>
-        </Switch>
-      </span>
-    </div>
-  )
-}
-
-const SortableTab = (props: {
-  file: LocalFile
-  onTabClick: (file: LocalFile) => void
-  onTabClose: (file: LocalFile) => void
-}) => {
-  const sortable = createSortable(props.file.path)
-
-  return (
-    // @ts-ignore
-    <div use:sortable classList={{ "opacity-0": sortable.isActiveDraggable }}>
-      <Tooltip value={props.file.path} placement="bottom">
-        <div class="relative">
-          <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}>
-            <TabVisual file={props.file} />
-          </Tabs.Trigger>
-          <IconButton
-            class="absolute right-1 top-1.5 opacity-0 text-text-muted/60
-                   peer-data-[selected]/tab:opacity-100 peer-data-[selected]/tab:text-text
-                   peer-data-[selected]/tab:hover:bg-border-subtle
-                   hover:opacity-100 peer-hover/tab:opacity-100"
-            size="xs"
-            variant="ghost"
-            onClick={() => props.onTabClose(props.file)}
-          >
-            <Icon name="close" size={16} />
-          </IconButton>
-        </div>
-      </Tooltip>
-    </div>
-  )
-}
-
-const FileTag = (props: { file: LocalFile; default?: boolean; onClose: () => void }) => (
-  <div
-    class="flex items-center bg-background group/tag
-           border border-border-subtle/60 border-dashed
-           rounded-md text-xs text-text-muted"
-  >
-    <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}>
-      <Switch fallback={<FileIcon node={props.file} class="group-hover/tag:hidden size-3!" />}>
-        <Match when={props.default}>
-          <Icon name="file" class="group-hover/tag:hidden" size={12} />
-        </Match>
-      </Switch>
-      <Icon name="close" class="hidden group-hover/tag:block" size={12} />
-    </IconButton>
-    <div class="pr-1 flex gap-1 items-center">
-      <span>{props.file.name}</span>
-      <Show when={!props.default && props.file.selection}>
-        <span class="">
-          ({props.file.selection!.startLine}-{props.file.selection!.endLine})
-        </span>
-      </Show>
-    </div>
-  </div>
-)
-
-const ConstrainDragYAxis = () => {
-  const context = useDragDropContext()
-  if (!context) return <></>
-  const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
-  const transformer: Transformer = {
-    id: "constrain-y-axis",
-    order: 100,
-    callback: (transform) => ({ ...transform, y: 0 }),
-  }
-  onDragStart((event: any) => {
-    addTransformer("draggables", event.draggable.id, transformer)
-  })
-  onDragEnd((event: any) => {
-    removeTransformer("draggables", event.draggable.id, transformer.id)
-  })
-  return <></>
-}

packages/app/src/sst-env.d.ts

@@ -2,7 +2,9 @@
 /* tslint:disable */
 /* eslint-disable */
 /// <reference types="vite/client" />
-interface ImportMetaEnv {}
+interface ImportMetaEnv {
+
+}
 interface ImportMeta {
   readonly env: ImportMetaEnv
-}
+}

packages/app/src/ui/icon.tsx

@@ -118,18 +118,19 @@ const icons = {
   message: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18.25C15.5 18.25 19.25 16.5 19.25 12C19.25 7.5 15.5 5.75 12 5.75C8.5 5.75 4.75 7.5 4.75 12C4.75 13.0298 4.94639 13.9156 5.29123 14.6693C5.50618 15.1392 5.62675 15.6573 5.53154 16.1651L5.26934 17.5635C5.13974 18.2547 5.74527 18.8603 6.43651 18.7307L9.64388 18.1293C9.896 18.082 10.1545 18.0861 10.4078 18.1263C10.935 18.2099 11.4704 18.25 12 18.25Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.5 12C15.5 12.2761 15.2761 12.5 15 12.5C14.7239 12.5 14.5 12.2761 14.5 12C14.5 11.7239 14.7239 11.5 15 11.5C15.2761 11.5 15.5 11.7239 15.5 12Z"></path>',
   annotation: '<path d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V15.25C19.25 16.3546 18.3546 17.25 17.25 17.25H14.625L12 19.25L9.375 17.25H6.75C5.64543 17.25 4.75 16.3546 4.75 15.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
   square: '<path d="M17.2502 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.2502C18.3548 4.75 19.2502 5.64543 19.2502 6.75V17.25C19.2502 18.3546 18.3548 19.25 17.2502 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-   "pull-request": '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17C19.25 18.2426 18.2426 19.25 17 19.25C15.7574 19.25 14.75 18.2426 14.75 17C14.75 15.7574 15.7574 14.75 17 14.75C18.2426 14.75 19.25 15.7574 19.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25V10.4701C17.25 9.83943 17.0513 9.22483 16.682 8.71359L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.75 8.25V4.75H17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
+  "pull-request": '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17C19.25 18.2426 18.2426 19.25 17 19.25C15.7574 19.25 14.75 18.2426 14.75 17C14.75 15.7574 15.7574 14.75 17 14.75C18.2426 14.75 19.25 15.7574 19.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25V10.4701C17.25 9.83943 17.0513 9.22483 16.682 8.71359L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.75 8.25V4.75H17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
   pencil: '<path d="M4.75 19.25L9 18.25L18.9491 8.30083C19.3397 7.9103 19.3397 7.27714 18.9491 6.88661L17.1134 5.05083C16.7228 4.6603 16.0897 4.6603 15.6991 5.05083L5.75 15L4.75 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.0234 7.03906L17.0234 10.0391" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
   sparkles: '<path d="M17 4.75C17 5.89705 15.8971 7 14.75 7C15.8971 7 17 8.10295 17 9.25C17 8.10295 18.1029 7 19.25 7C18.1029 7 17 5.89705 17 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 14.75C17 15.8971 15.8971 17 14.75 17C15.8971 17 17 18.1029 17 19.25C17 18.1029 18.1029 17 19.25 17C18.1029 17 17 15.8971 17 14.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 7.75C9 9.91666 6.91666 12 4.75 12C6.91666 12 9 14.0833 9 16.25C9 14.0833 11.0833 12 13.25 12C11.0833 12 9 9.91666 9 7.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
   photo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16L7.49619 12.5067C8.2749 11.5161 9.76453 11.4837 10.5856 12.4395L13 15.25M10.915 12.823C11.9522 11.5037 13.3973 9.63455 13.4914 9.51294C13.4947 9.50859 13.4979 9.50448 13.5013 9.50017C14.2815 8.51598 15.7663 8.48581 16.5856 9.43947L19 12.25M6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25Z"></path>',
   columns: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5V19"></path>',
-    "open-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 4.75v14.5m-3-8.5L9.75 12l1.5 1.25m-4.5 6h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
-    "close-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75v14.5m3-8.5L14.25 12l-1.5 1.25M6.75 19.25h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
-   "file-search": '<path fill="currentColor" d="M17.25 9.25V10a.75.75 0 0 0 .53-1.28l-.53.53Zm-4.5-4.5.53-.53a.75.75 0 0 0-.53-.22v.75ZM10.25 20a.75.75 0 0 0 0-1.5V20Zm7.427-3.383a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm1.043 3.163a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-.94-11.06-4.5-4.5-1.06 1.06 4.5 4.5 1.06-1.06ZM12.75 4h-6v1.5h6V4ZM4 6.75v10.5h1.5V6.75H4ZM6.75 20h3.5v-1.5h-3.5V20ZM12 4.75v3.5h1.5v-3.5H12ZM13.75 10h3.5V8.5h-3.5V10ZM12 8.25c0 .966.784 1.75 1.75 1.75V8.5a.25.25 0 0 1-.25-.25H12Zm-8 9A2.75 2.75 0 0 0 6.75 20v-1.5c-.69 0-1.25-.56-1.25-1.25H4ZM6.75 4A2.75 2.75 0 0 0 4 6.75h1.5c0-.69.56-1.25 1.25-1.25V4Zm8.485 14.47a3.235 3.235 0 0 0 3.236-3.235h-1.5c0 .959-.777 1.736-1.736 1.736v1.5Zm0-4.97c.959 0 1.736.777 1.736 1.735h1.5A3.235 3.235 0 0 0 15.235 12v1.5Zm0-1.5A3.235 3.235 0 0 0 12 15.235h1.5c0-.958.777-1.735 1.735-1.735V12Zm0 4.97a1.735 1.735 0 0 1-1.735-1.735H12a3.235 3.235 0 0 0 3.235 3.236v-1.5Zm1.382.707 2.103 2.103 1.06-1.06-2.103-2.103-1.06 1.06Z"></path>',
-   "folder-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 19.25h-3.5a2 2 0 0 1-2-2v-9.5h12.5a2 2 0 0 1 2 2v.5m-5.75-2.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2V11m12.695 6.445 1.805 1.805m-3.75-1a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z"></path>',
-   search: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>',
-   "web-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8.25v-.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v.5m14.5 0H4.75m14.5 0v2m-14.5-2v8a2 2 0 0 0 2 2h2.5m7.743-1.257 2.257 2.257m-4.015-1.53a2.485 2.485 0 1 0 0-4.97 2.485 2.485 0 0 0 0 4.97Z"></path>',
-   loading: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.75v1.5m5.126.624L16 8m3.25 4h-1.5m-.624 5.126-1.768-1.768M12 16.75v2.5m-3.36-3.891-1.768 1.768M7.25 12h-2.5m3.891-3.358L6.874 6.874"></path>',
+  "open-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 4.75v14.5m-3-8.5L9.75 12l1.5 1.25m-4.5 6h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
+  "close-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75v14.5m3-8.5L14.25 12l-1.5 1.25M6.75 19.25h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
+  "file-search": '<path fill="currentColor" d="M17.25 9.25V10a.75.75 0 0 0 .53-1.28l-.53.53Zm-4.5-4.5.53-.53a.75.75 0 0 0-.53-.22v.75ZM10.25 20a.75.75 0 0 0 0-1.5V20Zm7.427-3.383a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm1.043 3.163a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-.94-11.06-4.5-4.5-1.06 1.06 4.5 4.5 1.06-1.06ZM12.75 4h-6v1.5h6V4ZM4 6.75v10.5h1.5V6.75H4ZM6.75 20h3.5v-1.5h-3.5V20ZM12 4.75v3.5h1.5v-3.5H12ZM13.75 10h3.5V8.5h-3.5V10ZM12 8.25c0 .966.784 1.75 1.75 1.75V8.5a.25.25 0 0 1-.25-.25H12Zm-8 9A2.75 2.75 0 0 0 6.75 20v-1.5c-.69 0-1.25-.56-1.25-1.25H4ZM6.75 4A2.75 2.75 0 0 0 4 6.75h1.5c0-.69.56-1.25 1.25-1.25V4Zm8.485 14.47a3.235 3.235 0 0 0 3.236-3.235h-1.5c0 .959-.777 1.736-1.736 1.736v1.5Zm0-4.97c.959 0 1.736.777 1.736 1.735h1.5A3.235 3.235 0 0 0 15.235 12v1.5Zm0-1.5A3.235 3.235 0 0 0 12 15.235h1.5c0-.958.777-1.735 1.735-1.735V12Zm0 4.97a1.735 1.735 0 0 1-1.735-1.735H12a3.235 3.235 0 0 0 3.235 3.236v-1.5Zm1.382.707 2.103 2.103 1.06-1.06-2.103-2.103-1.06 1.06Z"></path>',
+  "folder-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 19.25h-3.5a2 2 0 0 1-2-2v-9.5h12.5a2 2 0 0 1 2 2v.5m-5.75-2.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2V11m12.695 6.445 1.805 1.805m-3.75-1a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z"></path>',
+  search: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>',
+  "web-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8.25v-.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v.5m14.5 0H4.75m14.5 0v2m-14.5-2v8a2 2 0 0 0 2 2h2.5m7.743-1.257 2.257 2.257m-4.015-1.53a2.485 2.485 0 1 0 0-4.97 2.485 2.485 0 0 0 0 4.97Z"></path>',
+  loading: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.75v1.5m5.126.624L16 8m3.25 4h-1.5m-.624 5.126-1.768-1.768M12 16.75v2.5m-3.36-3.891-1.768 1.768M7.25 12h-2.5m3.891-3.358L6.874 6.874"></path>',
+  mic: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 8C8.75 6.20507 10.2051 4.75 12 4.75C13.7949 4.75 15.25 6.20507 15.25 8V11C15.25 12.7949 13.7949 14.25 12 14.25C10.2051 14.25 8.75 12.7949 8.75 11V8Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.75C5.75 12.75 6 17.25 12 17.25C18 17.25 18.25 12.75 18.25 12.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 17.75V19.25"></path>',
  } as const
 
 export function Icon(props: IconProps) {

packages/app/src/ui/tooltip.tsx

@@ -30,7 +30,9 @@ export function Tooltip(props: TooltipProps) {
 
   return (
     <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
-      <KobalteTooltip.Trigger as={"div"}>{c()}</KobalteTooltip.Trigger>
+      <KobalteTooltip.Trigger as={"div"} class="flex items-center">
+        {c()}
+      </KobalteTooltip.Trigger>
       <KobalteTooltip.Portal>
         <KobalteTooltip.Content
           classList={{

packages/app/src/utils/speech.ts

@@ -0,0 +1,302 @@
+import { createSignal, onCleanup } from "solid-js"
+
+// Minimal types to avoid relying on non-standard DOM typings
+type RecognitionResult = {
+  0: { transcript: string }
+  isFinal: boolean
+}
+
+type RecognitionEvent = {
+  results: RecognitionResult[]
+  resultIndex: number
+}
+
+interface Recognition {
+  continuous: boolean
+  interimResults: boolean
+  lang: string
+  start: () => void
+  stop: () => void
+  onresult: ((e: RecognitionEvent) => void) | null
+  onerror: ((e: { error: string }) => void) | null
+  onend: (() => void) | null
+  onstart: (() => void) | null
+}
+
+const COMMIT_DELAY = 250
+
+const appendSegment = (base: string, addition: string) => {
+  const trimmed = addition.trim()
+  if (!trimmed) return base
+  if (!base) return trimmed
+  const needsSpace = /\S$/.test(base) && !/^[,.;!?]/.test(trimmed)
+  return `${base}${needsSpace ? " " : ""}${trimmed}`
+}
+
+const extractSuffix = (committed: string, hypothesis: string) => {
+  const cleanHypothesis = hypothesis.trim()
+  if (!cleanHypothesis) return ""
+  const baseTokens = committed.trim() ? committed.trim().split(/\s+/) : []
+  const hypothesisTokens = cleanHypothesis.split(/\s+/)
+  let index = 0
+  while (
+    index < baseTokens.length &&
+    index < hypothesisTokens.length &&
+    baseTokens[index] === hypothesisTokens[index]
+  ) {
+    index += 1
+  }
+  if (index < baseTokens.length) return ""
+  return hypothesisTokens.slice(index).join(" ")
+}
+
+export function createSpeechRecognition(opts?: {
+  lang?: string
+  onFinal?: (text: string) => void
+  onInterim?: (text: string) => void
+}) {
+  const hasSupport =
+    typeof window !== "undefined" &&
+    Boolean((window as any).webkitSpeechRecognition || (window as any).SpeechRecognition)
+
+  const [isRecording, setIsRecording] = createSignal(false)
+  const [committed, setCommitted] = createSignal("")
+  const [interim, setInterim] = createSignal("")
+
+  let recognition: Recognition | undefined
+  let shouldContinue = false
+  let committedText = ""
+  let sessionCommitted = ""
+  let pendingHypothesis = ""
+  let lastInterimSuffix = ""
+  let shrinkCandidate: string | undefined
+  let commitTimer: number | undefined
+
+  const cancelPendingCommit = () => {
+    if (commitTimer === undefined) return
+    clearTimeout(commitTimer)
+    commitTimer = undefined
+  }
+
+  const commitSegment = (segment: string) => {
+    const nextCommitted = appendSegment(committedText, segment)
+    if (nextCommitted === committedText) return
+    committedText = nextCommitted
+    setCommitted(committedText)
+    if (opts?.onFinal) opts.onFinal(segment.trim())
+  }
+
+  const promotePending = () => {
+    if (!pendingHypothesis) return
+    const suffix = extractSuffix(sessionCommitted, pendingHypothesis)
+    if (!suffix) {
+      pendingHypothesis = ""
+      return
+    }
+    sessionCommitted = appendSegment(sessionCommitted, suffix)
+    commitSegment(suffix)
+    pendingHypothesis = ""
+    lastInterimSuffix = ""
+    shrinkCandidate = undefined
+    setInterim("")
+    if (opts?.onInterim) opts.onInterim("")
+  }
+
+  const applyInterim = (suffix: string, hypothesis: string) => {
+    cancelPendingCommit()
+    pendingHypothesis = hypothesis
+    lastInterimSuffix = suffix
+    shrinkCandidate = undefined
+    setInterim(suffix)
+    if (opts?.onInterim) {
+      opts.onInterim(suffix ? appendSegment(committedText, suffix) : "")
+    }
+    if (!suffix) return
+    const snapshot = hypothesis
+    commitTimer = window.setTimeout(() => {
+      if (pendingHypothesis !== snapshot) return
+      const currentSuffix = extractSuffix(sessionCommitted, pendingHypothesis)
+      if (!currentSuffix) return
+      sessionCommitted = appendSegment(sessionCommitted, currentSuffix)
+      commitSegment(currentSuffix)
+      pendingHypothesis = ""
+      lastInterimSuffix = ""
+      shrinkCandidate = undefined
+      setInterim("")
+      if (opts?.onInterim) opts.onInterim("")
+    }, COMMIT_DELAY)
+  }
+
+  if (hasSupport) {
+    const Ctor: new () => Recognition = (window as any).webkitSpeechRecognition || (window as any).SpeechRecognition
+
+    recognition = new Ctor()
+    recognition.continuous = false
+    recognition.interimResults = true
+    recognition.lang = opts?.lang || (typeof navigator !== "undefined" ? navigator.language : "en-US")
+
+    recognition.onresult = (event: RecognitionEvent) => {
+      if (!event.results.length) return
+
+      let aggregatedFinal = ""
+      let latestHypothesis = ""
+
+      for (let i = 0; i < event.results.length; i += 1) {
+        const result = event.results[i]
+        const transcript = (result[0]?.transcript || "").trim()
+        if (!transcript) continue
+        if (result.isFinal) {
+          aggregatedFinal = appendSegment(aggregatedFinal, transcript)
+        } else {
+          latestHypothesis = transcript
+        }
+      }
+
+      if (aggregatedFinal) {
+        cancelPendingCommit()
+        const finalSuffix = extractSuffix(sessionCommitted, aggregatedFinal)
+        if (finalSuffix) {
+          sessionCommitted = appendSegment(sessionCommitted, finalSuffix)
+          commitSegment(finalSuffix)
+        }
+        pendingHypothesis = ""
+        lastInterimSuffix = ""
+        shrinkCandidate = undefined
+        setInterim("")
+        if (opts?.onInterim) opts.onInterim("")
+        return
+      }
+
+      cancelPendingCommit()
+
+      if (!latestHypothesis) {
+        shrinkCandidate = undefined
+        applyInterim("", "")
+        return
+      }
+
+      const suffix = extractSuffix(sessionCommitted, latestHypothesis)
+
+      if (!suffix) {
+        if (!lastInterimSuffix) {
+          shrinkCandidate = undefined
+          applyInterim("", latestHypothesis)
+          return
+        }
+        if (shrinkCandidate === "") {
+          applyInterim("", latestHypothesis)
+          return
+        }
+        shrinkCandidate = ""
+        pendingHypothesis = latestHypothesis
+        return
+      }
+
+      if (lastInterimSuffix && suffix.length < lastInterimSuffix.length) {
+        if (shrinkCandidate === suffix) {
+          applyInterim(suffix, latestHypothesis)
+          return
+        }
+        shrinkCandidate = suffix
+        pendingHypothesis = latestHypothesis
+        return
+      }
+
+      shrinkCandidate = undefined
+      applyInterim(suffix, latestHypothesis)
+    }
+
+    recognition.onerror = (e: { error: string }) => {
+      cancelPendingCommit()
+      lastInterimSuffix = ""
+      shrinkCandidate = undefined
+      if (e.error === "no-speech" && shouldContinue) {
+        setInterim("")
+        if (opts?.onInterim) opts.onInterim("")
+        setTimeout(() => {
+          try {
+            recognition?.start()
+          } catch {}
+        }, 150)
+        return
+      }
+      shouldContinue = false
+      setIsRecording(false)
+    }
+
+    recognition.onstart = () => {
+      sessionCommitted = ""
+      pendingHypothesis = ""
+      cancelPendingCommit()
+      lastInterimSuffix = ""
+      shrinkCandidate = undefined
+      setInterim("")
+      if (opts?.onInterim) opts.onInterim("")
+      setIsRecording(true)
+    }
+
+    recognition.onend = () => {
+      cancelPendingCommit()
+      lastInterimSuffix = ""
+      shrinkCandidate = undefined
+      setIsRecording(false)
+      if (shouldContinue) {
+        setTimeout(() => {
+          try {
+            recognition?.start()
+          } catch {}
+        }, 150)
+      }
+    }
+  }
+
+  const start = () => {
+    if (!recognition) return
+    shouldContinue = true
+    sessionCommitted = ""
+    pendingHypothesis = ""
+    cancelPendingCommit()
+    lastInterimSuffix = ""
+    shrinkCandidate = undefined
+    setInterim("")
+    try {
+      recognition.start()
+    } catch {}
+  }
+
+  const stop = () => {
+    if (!recognition) return
+    shouldContinue = false
+    promotePending()
+    cancelPendingCommit()
+    lastInterimSuffix = ""
+    shrinkCandidate = undefined
+    setInterim("")
+    if (opts?.onInterim) opts.onInterim("")
+    try {
+      recognition.stop()
+    } catch {}
+  }
+
+  onCleanup(() => {
+    shouldContinue = false
+    promotePending()
+    cancelPendingCommit()
+    lastInterimSuffix = ""
+    shrinkCandidate = undefined
+    setInterim("")
+    if (opts?.onInterim) opts.onInterim("")
+    try {
+      recognition?.stop()
+    } catch {}
+  })
+
+  return {
+    isSupported: () => hasSupport,
+    isRecording,
+    committed,
+    interim,
+    start,
+    stop,
+  }
+}

packages/app/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

packages/app/tsconfig.json

@@ -6,7 +6,6 @@
     "jsxImportSource": "solid-js",
     "types": ["vite/client"],
     "lib": ["DOM", "DOM.Iterable"],
-    "customConditions": ["development"],
     "paths": {
       "@/*": ["./src/*"]
     }

packages/console/app/package.json

@@ -7,10 +7,11 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "0.11.7"
+    "version": "0.14.1"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",
+    "@kobalte/core": "catalog:",
     "@openauthjs/openauth": "0.0.0-20250322224806",
     "@opencode/console-core": "workspace:*",
     "@solidjs/meta": "^0.29.4",

packages/console/app/public/email

@@ -0,0 +1 @@
+../../mail/emails/templates/static

packages/console/app/public/favicon-zen.svg

@@ -0,0 +1,23 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#FDFCFC"/>
+<path d="M96 122.001V70.001H148V122.001H96Z" fill="#17181C"/>
+<path d="M148.004 122.001V70.001H200.004V122.001H148.004Z" fill="#17181C"/>
+<path d="M200.008 122.001V70.001H252.008V122.001H200.008Z" fill="#17181C"/>
+<path d="M251.996 122.001V70.001H303.996V122.001H251.996Z" fill="#17181C"/>
+<path d="M251.996 173.988V121.988H303.996V173.988H251.996Z" fill="#17181C"/>
+<path d="M96 225.998V173.998H148V225.998H96Z" fill="#CFCECD"/>
+<rect width="52" height="52" transform="translate(148.004 173.998)" fill="#17181C"/>
+<path d="M148.004 225.998V173.998H200.004V225.998H148.004Z" fill="#17181C" fill-opacity="0.1"/>
+<path d="M200.008 225.998V173.998H252.008V225.998H200.008Z" fill="#17181C"/>
+<path d="M252.016 225.998V173.998H304.016V225.998H252.016Z" fill="#CFCECD"/>
+<rect width="52" height="52" transform="translate(96 226.002)" fill="#17181C"/>
+<path d="M96 278.002V226.002H148V278.002H96Z" fill="#17181C" fill-opacity="0.1"/>
+<rect width="52" height="52" transform="translate(148.004 226.002)" fill="white"/>
+<path d="M148.004 278.002V226.002H200.004V278.002H148.004Z" fill="#CFCECD"/>
+<path d="M200.008 278.002V226.002H252.008V278.002H200.008Z" fill="#CFCECD"/>
+<path d="M252.016 278.002V226.002H304.016V278.002H252.016Z" fill="#CFCECD"/>
+<path d="M96 330.012V278.012H148V330.012H96Z" fill="#17181C"/>
+<path d="M148.004 330.012V278.012H200.004V330.012H148.004Z" fill="#17181C"/>
+<path d="M200.008 329.99V277.99H252.008V329.99H200.008Z" fill="#17181C"/>
+<path d="M251.996 330.012V278.012H303.996V330.012H251.996Z" fill="#17181C"/>
+</svg>

packages/console/app/public/favicon.svg

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

packages/console/app/src/asset/lander/check.svg

@@ -1,2 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"/></svg>
-
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14.3581L10.0541 17.7027L18 7" stroke="#8E8B8B" stroke-width="1.5" stroke-linecap="square"/>
+</svg>

packages/console/app/src/asset/lander/copy.svg

@@ -1,2 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><rect width="336" height="336" x="128" y="128" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="57" ry="57"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="m383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24"/></svg>
-
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75 8.75V2.75H21.25V15.25H15.25M15.25 8.75H2.75V21.25H15.25V8.75Z" stroke="#8E8B8B" stroke-width="1.5" stroke-linecap="square"/>
+</svg>

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

@@ -1,19 +1,18 @@
-<svg width="289" height="50" viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 16.5H24.5V33H8.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M48.5 16.5H64.5V33H48.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M120.5 16.5H136.5V33H120.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M160.5 16.5H176.5V33H160.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M192.5 16.5H208.5V33H192.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M232.5 16.5H248.5V33H232.5V16.5Z" fill="white" fill-opacity="0.2"/>
-<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="white" fill-opacity="0.95"/>
-<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="white" fill-opacity="0.95"/>
-<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="white" fill-opacity="0.95"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="white" fill-opacity="0.95"/>
-<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="white" fill-opacity="0.5"/>
-<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="white" fill-opacity="0.5"/>
-<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="white" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="white" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="white" fill-opacity="0.5"/>
-<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="white" fill-opacity="0.95"/>
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 30H6V18H18V30Z" fill="#4B4646"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/>
+<path d="M48 30H36V18H48V30Z" fill="#4B4646"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/>
+<path d="M84 24V30H66V24H84Z" fill="#4B4646"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/>
+<path d="M108 36H96V18H108V36Z" fill="#4B4646"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/>
+<path d="M144 30H126V18H144V30Z" fill="#4B4646"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/>
+<path d="M168 30H156V18H168V30Z" fill="#4B4646"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/>
+<path d="M198 30H186V18H198V30Z" fill="#4B4646"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/>
+<path d="M234 24V30H216V24H234Z" fill="#4B4646"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/>
 </svg>
-

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

@@ -1,18 +1,18 @@
-<svg width="288" height="50" viewBox="0 0 288 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16.5H24V33H8V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M48 16.5H64V33H48V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M120 16.5H136V33H120V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M160 16.5H176V33H160V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M192 16.5H208V33H192V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M232 16.5H248V33H232V16.5Z" fill="black" fill-opacity="0.15"/>
-<path d="M264 0H288V8.5H272V16.5H288V25H272V33H288V41.5H264V0Z" fill="black" fill-opacity="0.95"/>
-<path d="M248 0H224V41.5H248V33H232V8.5H248V0Z" fill="black" fill-opacity="0.95"/>
-<path d="M256 8.5H248V33H256V8.5Z" fill="black" fill-opacity="0.95"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184 0H216V41.5H184V0ZM208 8.5H192V33H208V8.5Z" fill="black" fill-opacity="0.95"/>
-<path d="M144 8.5H136V41.5H144V8.5Z" fill="black" fill-opacity="0.55"/>
-<path d="M136 0H112V41.5H120V8.5H136V0Z" fill="black" fill-opacity="0.55"/>
-<path d="M80 0H104V8.5H88V16.5H104V25H88V33H104V41.5H80V0Z" fill="black" fill-opacity="0.55"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40 0H72V41.5H48V49.5H40V0ZM64 8.5H48V33H64V8.5Z" fill="black" fill-opacity="0.55"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H32V41.5955H0V0ZM24 8.5H8V33H24V8.5Z" fill="black" fill-opacity="0.55"/>
-<path d="M152 0H176V8.5H160V33H176V41.5H152V0Z" fill="black" fill-opacity="0.95"/>
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/>
+<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/>
+<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/>
+<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/>
+<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/>
+<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/>
+<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/>
+<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/>
 </svg>

packages/console/app/src/asset/logo.svg

@@ -1,12 +1,18 @@
-<svg width="289" height="50" viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="black"/>
-<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="black"/>
-<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="black"/>
-<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="black"/>
-<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="black"/>
-<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="black"/>
-<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="black"/>
+<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/>
+<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/>
+<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/>
+<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/>
+<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/>
+<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/>
+<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/>
+<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/>
 </svg>

packages/console/app/src/asset/zen-ornate-dark.svg

@@ -0,0 +1,8 @@
+<svg width="84" height="30" viewBox="0 0 84 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 24H6V18H18V12H24V24ZM6 18H0V12H6V18Z" fill="#4B4646"/>
+<path d="M6 24H24V30H0V18H6V24ZM18 18H6V12H18V18ZM24 12H18V6H0V0H24V12Z" fill="#F1ECEC"/>
+<path d="M54 18V24H36V18H54Z" fill="#4B4646"/>
+<path d="M54 18H36V24H54V30H30V0H54V18ZM36 12H48V6H36V12Z" fill="#F1ECEC"/>
+<path d="M78 30H66V12H78V30Z" fill="#4B4646"/>
+<path d="M78 6H66V30H60V0H78V6ZM84 30H78V6H84V30Z" fill="#F1ECEC"/>
+</svg>

packages/console/app/src/asset/zen-ornate-light.svg

@@ -0,0 +1,8 @@
+<svg width="84" height="30" viewBox="0 0 84 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 24H6V18H18V12H24V24ZM6 18H0V12H6V18Z" fill="#CFCECD"/>
+<path d="M6 24H24V30H0V18H6V24ZM18 18H6V12H18V18ZM24 12H18V6H0V0H24V12Z" fill="#211E1E"/>
+<path d="M54 18V24H36V18H54Z" fill="#CFCECD"/>
+<path d="M54 18H36V24H54V30H30V0H54V18ZM36 12H48V6H36V12Z" fill="#211E1E"/>
+<path d="M78 30H66V12H78V30Z" fill="#CFCECD"/>
+<path d="M78 6H66V30H60V0H78V6ZM84 30H78V6H84V30Z" fill="#211E1E"/>
+</svg>

packages/console/app/src/component/email-signup.tsx

@@ -0,0 +1,51 @@
+import { action, useSubmission } from "@solidjs/router"
+import dock from "../asset/lander/dock.png"
+import { Resource } from "@opencode/console-resource"
+import { Show } from "solid-js"
+
+const emailSignup = action(async (formData: FormData) => {
+  "use server"
+  const emailAddress = formData.get("email")!
+  const listId = "8b9bb82c-9d5f-11f0-975f-0df6fd1e4945"
+  const response = await fetch(`https://api.emailoctopus.com/lists/${listId}/contacts`, {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${Resource.EMAILOCTOPUS_API_KEY.value}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email_address: emailAddress,
+    }),
+  })
+  console.log(response)
+  return true
+})
+
+export function EmailSignup() {
+  const submission = useSubmission(emailSignup)
+  return (
+    <section data-component="email">
+      <div data-slot="dock">
+        <img src={dock} alt="" />
+      </div>
+      <div data-slot="section-title">
+        <h3>OpenCode will be available on desktop soon</h3>
+        <p>Join the waitlist for early access.</p>
+      </div>
+      <form data-slot="form" action={emailSignup} method="post">
+        <input type="email" name="email" placeholder="Email address" required />
+        <button type="submit" disabled={submission.pending}>
+          Subscribe
+        </button>
+      </form>
+      <Show when={submission.result}>
+        <div style="color: #03B000; margin-top: 24px;">
+          Almost done, check your inbox and confirm your email address
+        </div>
+      </Show>
+      <Show when={submission.error}>
+        <div style="color: #FF408F; margin-top: 24px;">{submission.error}</div>
+      </Show>
+    </section>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { Collapsible } from "@kobalte/core/collapsible"
+import { ParentProps } from "solid-js"
+
+export function Faq(props: ParentProps & { question: string }) {
+  return (
+    <Collapsible data-slot="faq-item">
+      <Collapsible.Trigger data-slot="faq-question">
+        <svg
+          data-slot="faq-icon-plus"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12.5 11.5H19V12.5H12.5V19H11.5V12.5H5V11.5H11.5V5H12.5V11.5Z" fill="currentColor" />
+        </svg>
+        <svg
+          data-slot="faq-icon-minus"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5 11.5H19V12.5H5Z" fill="currentColor" />
+        </svg>
+        <div data-slot="faq-question-text">{props.question}</div>
+      </Collapsible.Trigger>
+      <Collapsible.Content data-slot="faq-answer">{props.children}</Collapsible.Content>
+    </Collapsible>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { createAsync } from "@solidjs/router"
+import { createMemo } from "solid-js"
+import { github } from "~/lib/github"
+
+export function Footer() {
+  const githubData = createAsync(() => github())
+  const starCount = createMemo(() =>
+    githubData()?.stars
+      ? new Intl.NumberFormat("en-US", {
+          notation: "compact",
+          compactDisplay: "short",
+        }).format(githubData()!.stars!)
+      : "25K",
+  )
+
+  return (
+    <footer data-component="footer">
+      <div data-slot="cell">
+        <a href="https://github.com/sst/opencode" target="_blank">
+          GitHub <span>[{starCount()}]</span>
+        </a>
+      </div>
+      <div data-slot="cell">
+        <a href="/docs">Docs</a>
+      </div>
+      <div data-slot="cell">
+        <a href="/discord">Discord</a>
+      </div>
+      <div data-slot="cell">
+        <a href="https://x.com/opencode">X</a>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,127 @@
+import logoLight from "../asset/logo-ornate-light.svg"
+import logoDark from "../asset/logo-ornate-dark.svg"
+import { A, createAsync } from "@solidjs/router"
+import { createMemo, Match, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { github } from "~/lib/github"
+
+export function Header(props: { zen?: boolean }) {
+  const githubData = createAsync(() => github())
+  const starCount = createMemo(() =>
+    githubData()?.stars
+      ? new Intl.NumberFormat("en-US", {
+          notation: "compact",
+          compactDisplay: "short",
+        }).format(githubData()?.stars!)
+      : "25K",
+  )
+
+  const [store, setStore] = createStore({
+    mobileMenuOpen: false,
+  })
+
+  return (
+    <section data-component="top">
+      <A href="/">
+        <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
+        <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
+      </A>
+      <nav data-component="nav-desktop">
+        <ul>
+          <li>
+            <a href="https://github.com/sst/opencode" target="_blank">
+              GitHub <span>[{starCount()}]</span>
+            </a>
+          </li>
+          <li>
+            <a href="/docs">Docs</a>
+          </li>
+          <li>
+            <Switch>
+              <Match when={props.zen}>
+                <a href="/auth">Login</a>
+              </Match>
+              <Match when={!props.zen}>
+                <A href="/zen">Zen</A>
+              </Match>
+            </Switch>
+          </li>
+        </ul>
+      </nav>
+      <nav data-component="nav-mobile">
+        <button
+          type="button"
+          data-component="nav-mobile-toggle"
+          aria-expanded="false"
+          aria-controls="nav-mobile-menu"
+          class="nav-toggle"
+          onClick={() => setStore("mobileMenuOpen", !store.mobileMenuOpen)}
+        >
+          <span class="sr-only">Open menu</span>
+          <Switch>
+            <Match when={store.mobileMenuOpen}>
+              <svg
+                class="icon icon-close"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.7071 11.9993L18.0104 17.3026L17.3033 18.0097L12 12.7064L6.6967 18.0097L5.98959 17.3026L11.2929 11.9993L5.98959 6.69595L6.6967 5.98885L12 11.2921L17.3033 5.98885L18.0104 6.69595L12.7071 11.9993Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </Match>
+            <Match when={!store.mobileMenuOpen}>
+              <svg
+                class="icon icon-hamburger"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M19 17H5V16H19V17Z" fill="currentColor" />
+                <path d="M19 8H5V7H19V8Z" fill="currentColor" />
+              </svg>
+            </Match>
+          </Switch>
+        </button>
+
+        <Show when={store.mobileMenuOpen}>
+          <div id="nav-mobile-menu" data-component="nav-mobile">
+            <nav data-component="nav-mobile-menu-list">
+              <ul>
+                <li>
+                  <A href="/">Home</A>
+                </li>
+                <li>
+                  <a href="https://github.com/sst/opencode" target="_blank">
+                    GitHub <span>[{starCount()}]</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="/docs">Docs</a>
+                </li>
+                <li>
+                  <Switch>
+                    <Match when={props.zen}>
+                      <a href="/auth">Login</a>
+                    </Match>
+                    <Match when={!props.zen}>
+                      <A href="/zen">Zen</A>
+                    </Match>
+                  </Switch>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </Show>
+      </nav>
+    </section>
+  )
+}

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

@@ -2,70 +2,45 @@ import { JSX } from "solid-js"
 
 export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="currentColor" />
-      <path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" />
-      <path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z"
-        fill="currentColor"
-      />
-      <path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" />
-      <path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" />
-      <path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="currentColor" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z"
-        fill="currentColor"
-      />
-      <path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" />
-    </svg>
-  )
+  <svg {...props} width="234" height="42" viewBox="0 0 234 42" fill="none"
+       xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M54 36H36V42H30V6H54V36ZM36 30H48V12H36V30Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M24 36H0V6H24V36ZM6 30H18V12H6V30Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="currentColor"/>
+    <path d="M108 12H96V36H90V6H108V12Z" fill="currentColor"/>
+    <path d="M114 36H108V12H114V36Z" fill="currentColor"/>
+    <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M174 36H150V6H174V36ZM156 30H168V12H156V30Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M204 36H180V6H198V0H204V36ZM186 30H198V12H186V30Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M234 24H216V30H234V36H210V6H234V24ZM216 18H228V12H216V18Z" fill="currentColor"/>
+  </svg>
+
+)
 }
 
 export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox="0 0 512 512">
-      <rect
-        width="336"
-        height="336"
-        x="128"
-        y="128"
-        fill="none"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-width="32"
-        rx="57"
-        ry="57"
-      ></rect>
+    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="32"
-        d="m383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24"
-      ></path>
+        d="M8.75 8.75V2.75H21.25V15.25H15.25M15.25 8.75H2.75V21.25H15.25V8.75Z"
+        stroke="#8E8B8B"
+        stroke-width="1.5"
+        stroke-linecap="square"
+      />
     </svg>
   )
 }
 
 export function IconCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"
-      ></path>
+    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.75 15.0938L9 20.25L21.25 3.75" stroke="#03B000" stroke-width="2" stroke-linecap="square" />
     </svg>
   )
 }

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

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

packages/console/app/src/context/auth.session.ts

@@ -15,6 +15,7 @@ export function useAuthSession() {
   return useSession<AuthSession>({
     password: "0".repeat(32),
     name: "auth",
+    maxAge: 60 * 60 * 24 * 365,
     cookie: {
       secure: false,
       httpOnly: true,

packages/console/app/src/context/auth.ts

@@ -1,9 +1,7 @@
 import { getRequestEvent } from "solid-js/web"
-import { and, Database, eq, inArray } from "@opencode/console-core/drizzle/index.js"
-import { WorkspaceTable } from "@opencode/console-core/schema/workspace.sql.js"
+import { and, Database, eq, inArray, sql } from "@opencode/console-core/drizzle/index.js"
 import { UserTable } from "@opencode/console-core/schema/user.sql.js"
 import { redirect } from "@solidjs/router"
-import { AccountTable } from "@opencode/console-core/schema/account.sql.js"
 import { Actor } from "@opencode/console-core/actor.js"
 
 import { createClient } from "@openauthjs/openauth/client"
@@ -54,25 +52,27 @@ export const getActor = async (workspace?: string): Promise<Actor.Info> => {
     }
     const accounts = Object.keys(auth.data.account ?? {})
     if (accounts.length) {
-      const result = await Database.transaction(async (tx) => {
-        return await tx
-          .select({
-            user: UserTable,
-          })
-          .from(AccountTable)
-          .innerJoin(UserTable, and(eq(UserTable.email, AccountTable.email)))
-          .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, UserTable.workspaceID))
-          .where(and(inArray(AccountTable.id, accounts), eq(WorkspaceTable.id, workspace)))
+      const user = await Database.use((tx) =>
+        tx
+          .select()
+          .from(UserTable)
+          .where(and(eq(UserTable.workspaceID, workspace), inArray(UserTable.accountID, accounts)))
           .limit(1)
           .execute()
-          .then((x) => x[0])
-      })
-      if (result) {
+          .then((x) => x[0]),
+      )
+      if (user) {
+        await Database.use((tx) =>
+          tx
+            .update(UserTable)
+            .set({ timeSeen: sql`now()` })
+            .where(and(eq(UserTable.workspaceID, workspace), eq(UserTable.id, user.id))),
+        )
         return {
           type: "user",
           properties: {
-            userID: result.user.id,
-            workspaceID: result.user.workspaceID,
+            userID: user.id,
+            workspaceID: user.workspaceID,
           },
         }
       }

packages/console/app/src/entry-server.tsx

@@ -9,7 +9,7 @@ export default createHandler(
           <head>
             <meta charset="utf-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <link rel="icon" href="/favicon.svg" />
+            <link rel="icon" href="/favicon-zen.svg" />
             <meta property="og:image" content="/social-share.png" />
             <meta property="twitter:image" content="/social-share.png" />
             {assets}

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

@@ -0,0 +1,28 @@
+import { query } from "@solidjs/router"
+
+export const github = query(async () => {
+  "use server"
+  try {
+    const [meta, releases, contributors] = await Promise.all([
+      fetch("https://api.github.com/repos/sst/opencode").then((res) => res.json()),
+      fetch("https://api.github.com/repos/sst/opencode/releases").then((res) => res.json()),
+      fetch("https://api.github.com/repos/sst/opencode/contributors?per_page=1"),
+    ])
+    const [release] = releases
+    const contributorCount = Number.parseInt(
+      contributors.headers
+        .get("Link")!
+        .match(/&page=(\d+)>; rel="last"/)!
+        .at(1)!,
+    )
+    return {
+      stars: meta.stargazers_count,
+      release: {
+        name: release.name,
+        url: release.html_url,
+      },
+      contributors: contributorCount,
+    }
+  } catch {}
+  return undefined
+}, "github")

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

@@ -1,14 +1,21 @@
 import "./index.css"
-import { Title } from "@solidjs/meta"
-import { onCleanup, onMount } from "solid-js"
-import logoLight from "../asset/logo-ornate-light.svg"
-import logoDark from "../asset/logo-ornate-dark.svg"
-import IMG_SPLASH from "../asset/lander/screenshot-splash.png"
+import { Title, Meta, Link } from "@solidjs/meta"
+import { HttpHeader } from "@solidjs/start"
+import video from "../asset/lander/opencode-min.mp4"
+import videoPoster from "../asset/lander/opencode-poster.png"
 import { IconCopy, IconCheck } from "../component/icon"
-import { createAsync, query } from "@solidjs/router"
+import { A, createAsync, query } from "@solidjs/router"
 import { getActor } from "~/context/auth"
 import { withActor } from "~/context/auth.withActor"
 import { Account } from "@opencode/console-core/account.js"
+import { EmailSignup } from "~/component/email-signup"
+import { Tabs } from "@kobalte/core/tabs"
+import { Faq } from "~/component/faq"
+import { Header } from "~/component/header"
+import { Footer } from "~/component/footer"
+import { Legal } from "~/component/legal"
+import { github } from "~/lib/github"
+import { createMemo } from "solid-js"
 
 function CopyStatus() {
   return (
@@ -29,155 +36,775 @@ const defaultWorkspace = query(async () => {
 }, "defaultWorkspace")
 
 export default function Home() {
+  const githubData = createAsync(() => github())
   const workspace = createAsync(() => defaultWorkspace())
-  onMount(() => {
-    const commands = document.querySelectorAll("[data-copy]")
-    for (const button of commands) {
-      const callback = () => {
-        const text = button.textContent
-        if (text) {
-          navigator.clipboard.writeText(text)
-          button.setAttribute("data-copied", "")
-          setTimeout(() => {
-            button.removeAttribute("data-copied")
-          }, 1500)
-        }
-      }
-      button.addEventListener("click", callback)
-      onCleanup(() => {
-        button.removeEventListener("click", callback)
-      })
+  const release = createMemo(() => githubData()?.release)
+
+  const handleCopyClick = (event: Event) => {
+    const button = event.currentTarget as HTMLButtonElement
+    const text = button.textContent
+    if (text) {
+      navigator.clipboard.writeText(text)
+      button.setAttribute("data-copied", "")
+      setTimeout(() => {
+        button.removeAttribute("data-copied")
+      }, 1500)
     }
-  })
+  }
 
   return (
-    <main data-page="home">
-      <Title>opencode | AI coding agent built for the terminal</Title>
+    <main data-page="opencode">
+      <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
+      <Title>OpenCode | The AI coding agent built for the terminal</Title>
+      <Link rel="icon" type="image/svg+xml" href="/favicon-zen.svg" />
+      <Meta property="og:image" content="/social-share.png" />
+      <Meta name="twitter:image" content="/social-share.png" />
+      <div data-component="container">
+        <Header />
 
-      <div data-component="content">
-        <section data-component="top">
-          <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
-          <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
-          <h1 data-slot="title">The AI coding agent built for the terminal</h1>
-          <div data-slot="login">
-            <a href="/auth">opencode zen</a>
-          </div>
-        </section>
+        <div data-component="content">
+          <section data-component="hero">
+            <div data-slot="hero-copy">
+              <a
+                data-slot="releases"
+                href={release()?.url ?? "https://github.com/sst/opencode/releases"}
+                target="_blank"
+              >
+                What’s new in {release()?.name ?? "the latest release"}
+              </a>
+              <strong>The AI coding agent built for the terminal</strong>
+              <p>
+                OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any
+                editor.
+              </p>
+              <a href="/docs">
+                <span>Read docs </span>
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div data-slot="installation">
+              <Tabs
+                as="section"
+                aria-label="Install options"
+                class="tabs"
+                data-component="tabs"
+                data-active="curl"
+                defaultValue="curl"
+              >
+                <Tabs.List data-slot="tablist">
+                  <Tabs.Trigger value="curl" data-slot="tab">
+                    curl
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="npm" data-slot="tab">
+                    npm
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="bun" data-slot="tab">
+                    bun
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="brew" data-slot="tab">
+                    brew
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="paru" data-slot="tab">
+                    paru
+                  </Tabs.Trigger>
+                  <Tabs.Indicator />
+                </Tabs.List>
+                <div data-slot="panels">
+                  <Tabs.Content as="pre" data-slot="panel" value="curl">
+                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                      <span data-slot="command-script">
+                        <span>curl -fsSL </span>
+                        <span data-slot="protocol">https://</span>
+                        <span data-slot="highlight">opencode.ai/install</span>
+                        <span> | bash</span>
+                      </span>
+                      <CopyStatus />
+                    </button>
+                  </Tabs.Content>
+                  <Tabs.Content as="pre" data-slot="panel" value="npm">
+                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                      <span>
+                        <span data-slot="protocol">npm i -g </span>
+                        <span data-slot="highlight">opencode-ai</span>
+                      </span>
+                      <CopyStatus />
+                    </button>
+                  </Tabs.Content>
+                  <Tabs.Content as="pre" data-slot="panel" value="bun">
+                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                      <span>
+                        <span data-slot="protocol">bun add -g </span>
+                        <span data-slot="highlight">opencode-ai</span>
+                      </span>
+                      <CopyStatus />
+                    </button>
+                  </Tabs.Content>
+                  <Tabs.Content as="pre" data-slot="panel" value="brew">
+                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                      <span>
+                        <span data-slot="protocol">brew install </span>
+                        <span data-slot="highlight">opencode</span>
+                      </span>
+                      <CopyStatus />
+                    </button>
+                  </Tabs.Content>
+                  <Tabs.Content as="pre" data-slot="panel" value="paru">
+                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                      <span>
+                        <span data-slot="protocol">paru -S </span>
+                        <span data-slot="highlight">opencode</span>
+                      </span>
+                      <CopyStatus />
+                    </button>
+                  </Tabs.Content>
+                </div>
+              </Tabs>
+            </div>
+          </section>
 
-        <section data-component="cta">
-          <div data-slot="left">
-            <a href="/docs">Get Started</a>
-          </div>
-          <div data-slot="center">
-            <a href="/auth">opencode zen</a>
-          </div>
-          <div data-slot="right">
-            <button data-copy data-slot="command">
-              <span>
-                <span>curl -fsSL </span>
-                <span data-slot="protocol">https://</span>
-                <span data-slot="highlight">opencode.ai/install</span>
-                <span> | bash</span>
-              </span>
-              <CopyStatus />
-            </button>
-          </div>
-        </section>
+          <section data-component="video">
+            <video src={video} autoplay playsinline loop muted preload="auto" poster={videoPoster}>
+              Your browser does not support the video tag.
+            </video>
+          </section>
 
-        <section data-component="features">
-          <ul data-slot="list">
-            <li>
-              <strong>Native TUI</strong> A responsive, native, themeable terminal UI
-            </li>
-            <li>
-              <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
-            </li>
-            <li>
-              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode{" "}
-              <label>New</label>
-            </li>
-            <li>
-              <strong>Multi-session</strong> Start multiple agents in parallel on the same project
-            </li>
-            <li>
-              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
-            </li>
-            <li>
-              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
-            </li>
-            <li>
-              <strong>Use any model</strong> Supports 75+ LLM providers through{" "}
-              <a href="https://models.dev">Models.dev</a>, including local models
-            </li>
-          </ul>
-        </section>
+          <section data-component="what">
+            <div data-slot="section-title">
+              <h3>What is OpenCode?</h3>
+              <p>OpenCode is an open source agent that helps you write and run code directly from the terminal.</p>
+            </div>
+            <ul>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Native TUI</strong> A responsive, native, themeable terminal UI
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Multi-session</strong> Start multiple agents in parallel on the same project
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Share links</strong> Share a link to any session for reference or to debug
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Any model</strong> 75+ LLM providers through Models.dev, including local models
+                </div>
+              </li>
+              <li>
+                <span>[*]</span>
+                <div>
+                  <strong>Any editor</strong> OpenCode runs in your terminal, pair it with any IDE
+                </div>
+              </li>
+            </ul>
+          </section>
 
-        <section data-component="install">
-          <div data-component="method">
-            <h3 data-component="title">npm</h3>
-            <button data-copy data-slot="button">
-              <span>
-                npm install -g <strong>opencode-ai</strong>
-              </span>
-              <CopyStatus />
-            </button>
-          </div>
-          <div data-component="method">
-            <h3 data-component="title">bun</h3>
-            <button data-copy data-slot="button">
-              <span>
-                bun install -g <strong>opencode-ai</strong>
-              </span>
-              <CopyStatus />
-            </button>
-          </div>
-          <div data-component="method">
-            <h3 data-component="title">homebrew</h3>
-            <button data-copy data-slot="button">
-              <span>
-                brew install <strong>sst/tap/opencode</strong>
-              </span>
-              <CopyStatus />
-            </button>
-          </div>
-          <div data-component="method">
-            <h3 data-component="title">paru</h3>
-            <button data-copy data-slot="button">
-              <span>
-                paru -S <strong>opencode-bin</strong>
-              </span>
-              <CopyStatus />
-            </button>
-          </div>
-        </section>
+          <section data-component="growth">
+            <div data-slot="section-title">
+              <h3>The open source AI coding agent</h3>
+              <div>
+                <span>[*]</span>
+                <p>
+                  With over <strong>26,000</strong> GitHub stars, <strong>188</strong> contributors, and almost{" "}
+                  <strong>3,000</strong> commits, OpenCode is used and trusted by over <strong>200,000</strong>{" "}
+                  developers every month.
+                </p>
+              </div>
 
-        <section data-component="screenshots">
-          <figure>
-            <figcaption>opencode TUI with the tokyonight theme</figcaption>
-            <a href="/docs/cli">
-              <img src={IMG_SPLASH} alt="opencode TUI with tokyonight theme" />
-            </a>
-          </figure>
-        </section>
+              <div data-component="growth-stats">
+                <div data-component="growth-stat">
+                  <div data-component="stat-illustration">
+                    <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <g opacity="0.5" clip-path="url(#clip0_236_15902)">
+                        <mask
+                          id="mask0_236_15902"
+                          style="mask-type:alpha"
+                          maskUnits="userSpaceOnUse"
+                          x="0"
+                          y="0"
+                          width="205"
+                          height="264"
+                        >
+                          <path
+                            d="M27.2119 253.122L0 264H205V0L192.109 17.8482L175.297 43.8089L152.877 59.95L137.902 77.6701L126.989 87.3251L118.603 106.449L103.114 123.643L93.359 141.714L84.2883 160.311L78.7262 177.329L67.773 193.997L62.8098 212.068L57.3332 231.191L42.5292 243.824L27.2119 253.122Z"
+                            fill="url(#paint0_linear_236_15902)"
+                          />
+                        </mask>
+                        <g mask="url(#mask0_236_15902)">
+                          <path
+                            d="M150.932 -135.014L-251.766 267.684M154.115 -131.832L-248.582 270.865M157.295 -128.65L-245.402 274.047M160.479 -125.469L-242.219 277.229M163.662 -122.287L-239.035 280.41M166.842 -119.105L-235.855 283.592M170.025 -115.924L-232.672 286.773M173.205 -112.742L-229.492 289.955M176.385 -109.561L-226.312 293.137M179.568 -106.377L-223.129 296.32M182.752 -103.193L-219.945 299.504M185.936 -100.012L-216.762 302.686M189.119 -96.8301L-213.578 305.867M192.295 -93.6484L-210.402 309.049M195.479 -90.4668L-207.219 312.23M198.662 -87.2852L-204.035 315.412M201.842 -84.1035L-200.855 318.594M205.025 -80.9219L-197.672 321.775M208.209 -77.7383L-194.488 324.959M211.389 -74.5586L-191.309 328.139M214.568 -71.375L-188.129 331.322M217.752 -68.1934L-184.945 334.504M220.936 -65.0117L-181.762 337.686M224.119 -61.8281L-178.578 340.869M227.303 -58.6465L-175.395 344.051M230.482 -55.4668L-172.215 347.23M233.662 -52.2832L-169.035 350.414M236.846 -49.0996L-165.852 353.598M240.025 -45.9199L-162.672 356.777M243.209 -42.7383L-159.488 359.959M246.393 -39.5547L-156.305 363.143M249.572 -36.375L-153.125 366.322M252.756 -33.1934L-149.941 369.504M255.936 -30.0098L-146.762 372.688M259.119 -26.8281L-143.578 375.869M262.303 -23.6465L-140.395 379.051M265.486 -20.4609L-137.211 382.236M268.666 -17.2812L-134.031 385.416M271.85 -14.0996L-130.848 388.598M275.029 -10.918L-127.668 391.779M278.209 -7.73633L-124.488 394.961M281.393 -4.55469L-121.305 398.143M284.576 -1.37305L-118.121 401.324M287.756 1.80859L-114.941 404.506M290.94 4.99023L-111.758 407.688M294.119 8.17383L-108.578 410.871M297.303 11.3574L-105.395 414.055M300.486 14.5391L-102.211 417.236M303.67 17.7207L-99.0273 420.418M306.85 20.9023L-95.8477 423.6M310.033 24.084L-92.6641 426.781M313.213 27.2656L-89.4844 429.963M316.393 30.4473L-86.3047 433.145M319.576 33.6289L-83.1211 436.326M322.76 36.8125L-79.9375 439.51M325.94 39.9941L-76.7578 442.691M329.123 43.1758L-73.5742 445.873M332.307 46.3574L-70.3906 449.055M335.486 49.541L-67.2109 452.238M338.67 52.7227L-64.0273 455.42M341.854 55.9043L-60.8438 458.602M345.033 59.0859L-57.6641 461.783M348.217 62.2676L-54.4805 464.965M351.397 65.4512L-51.3008 468.148M354.576 68.6328L-48.1211 471.33M357.76 71.8145L-44.9375 474.512M360.943 74.9961L-41.7539 477.693M364.123 78.1777L-38.5742 480.875M367.307 81.3594L-35.3906 484.057M370.49 84.541L-32.207 487.238M373.67 87.7246L-29.0273 490.422M376.854 90.9062L-25.8438 493.604M380.033 94.0859L-22.6641 496.783M383.217 97.2695L-19.4805 499.967M386.4 100.453L-16.2969 503.15M389.58 103.633L-13.1172 506.33M392.76 106.816L-9.9375 509.514"
+                            stroke="#8E8B8B"
+                          />
+                        </g>
+                        <path
+                          d="M0 264L27.2119 253.122L42.5292 243.824L57.3332 231.191L62.8098 212.068L67.773 193.997L78.7262 177.329L84.2883 160.311L93.359 141.714L103.114 123.643L118.603 106.449L126.989 87.3251L137.902 77.6701L152.877 59.95L175.297 43.8089L192.109 17.8482L205 0"
+                          stroke="#BCBBBB"
+                        />
+                      </g>
+                      <defs>
+                        <linearGradient
+                          id="paint0_linear_236_15902"
+                          x1="102.5"
+                          y1="-34.8571"
+                          x2="102.5"
+                          y2="264"
+                          gradientUnits="userSpaceOnUse"
+                        >
+                          <stop stop-color="#565656" />
+                          <stop offset="1" stop-color="#F1F0F0" stop-opacity="0" />
+                        </linearGradient>
+                        <clipPath id="clip0_236_15902">
+                          <rect width="205" height="264" fill="white" />
+                        </clipPath>
+                      </defs>
+                    </svg>
+                  </div>
+                  <span>
+                    <figure>Fig 1.</figure> <strong>26K</strong> GitHub Stars
+                  </span>
+                </div>
 
-        <footer data-component="footer">
-          <div data-slot="cell">
-            <a href="https://x.com/opencode">X.com</a>
-          </div>
-          <div data-slot="cell">
-            <a href="https://github.com/sst/opencode">GitHub</a>
-          </div>
-          <div data-slot="cell">
-            <a href="https://opencode.ai/discord">Discord</a>
-          </div>
-        </footer>
-      </div>
-
-      <div data-component="legal">
-        <span>
-          ©2025 <a href="https://anoma.ly">Anomaly</a>
-        </span>
+                <div data-component="growth-stat">
+                  <div data-component="stat-illustration">
+                    <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <g opacity="0.5" clip-path="url(#clip0_236_15557)">
+                        <g clip-path="url(#clip1_236_15557)">
+                          <rect opacity="0.81" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.46" x="14" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.86" x="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.08" x="42" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.23" x="56" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.9" x="70" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.59" x="84" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.8" x="98" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.21" x="112" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.22" x="126" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.62" x="140" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.41" x="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.22" x="168" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.25" x="182" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.34" x="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.84" y="14" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.79" x="14" y="14" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.49" x="28" y="14" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.49" x="42" y="14" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.05" x="56" y="14" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.59" x="70" y="14" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.44" x="84" y="14" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.21" x="98" y="14" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.53" x="112" y="14" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.81" x="126" y="14" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.24" x="140" y="14" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.61" x="154" y="14" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.14" x="168" y="14" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.26" x="182" y="14" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.8" x="196" y="14" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.02" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.69" x="14" y="28" width="6" height="6" fill="#CFCECD" />
+                          <rect x="28" y="28" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.4" x="42" y="28" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.88" x="56" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.38" x="70" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.38" x="84" y="28" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.78" x="98" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.49" x="112" y="28" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.13" x="126" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.76" x="140" y="28" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.35" x="154" y="28" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.59" x="168" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.34" x="182" y="28" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.3" x="196" y="28" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.6" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.3" x="14" y="42" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.65" x="28" y="42" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.41" x="42" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.84" x="56" y="42" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.33" x="70" y="42" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.81" x="84" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.78" x="98" y="42" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.72" x="112" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.71" x="126" y="42" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.46" x="140" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.06" x="154" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.05" x="168" y="42" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.44" x="182" y="42" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.09" x="196" y="42" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.03" y="56" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.58" x="14" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.24" x="28" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.1" x="42" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.09" x="56" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.3" x="70" y="56" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.6" x="84" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.39" x="98" y="56" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.53" x="112" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.83" x="126" y="56" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.25" x="140" y="56" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.87" x="154" y="56" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.38" x="168" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.19" x="182" y="56" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.89" x="196" y="56" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.98" y="70" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.26" x="14" y="70" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.79" x="28" y="70" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.67" x="56" y="70" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.48" x="70" y="70" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.76" x="84" y="70" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.72" x="98" y="70" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.01" x="112" y="70" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.46" x="126" y="70" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.27" x="140" y="70" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.78" x="154" y="70" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.16" x="168" y="70" width="6" height="6" fill="#CFCECD" />
+                          <rect x="182" y="70" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.86" x="196" y="70" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.18" y="84" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.04" x="14" y="84" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.61" x="28" y="84" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.47" x="42" y="84" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.81" x="56" y="84" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.98" x="70" y="84" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.3" x="84" y="84" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.1" x="98" y="84" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.42" x="112" y="84" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.66" x="126" y="84" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.68" x="140" y="84" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.35" x="154" y="84" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.6" x="168" y="84" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.95" x="182" y="84" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.05" x="196" y="84" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.77" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.06" x="14" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.45" x="28" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.73" x="42" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.21" x="70" y="98" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.18" x="84" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.92" x="98" y="98" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.26" x="112" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.21" x="126" y="98" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.27" x="140" y="98" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.84" x="154" y="98" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.74" x="168" y="98" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.53" x="182" y="98" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.9" x="196" y="98" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.32" y="112" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.75" x="14" y="112" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.69" x="28" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.66" x="42" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.93" x="56" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.32" x="70" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.52" x="84" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.02" x="98" y="112" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.88" x="126" y="112" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.12" x="140" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.93" x="154" y="112" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.79" x="168" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.24" x="182" y="112" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.64" x="196" y="112" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.57" y="126" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.6" x="14" y="126" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.05" x="28" y="126" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.28" x="42" y="126" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.21" x="56" y="126" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.93" x="70" y="126" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.63" x="84" y="126" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.58" x="98" y="126" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.64" x="112" y="126" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.74" x="126" y="126" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.74" x="140" y="126" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.1" x="154" y="126" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.93" x="168" y="126" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.43" x="182" y="126" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.45" x="196" y="126" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.77" y="140" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.78" x="14" y="140" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.18" x="28" y="140" width="6" height="6" fill="#DAD9D9" />
+                          <rect x="42" y="140" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.39" x="56" y="140" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.53" x="70" y="140" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.06" x="84" y="140" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.81" x="98" y="140" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.49" x="112" y="140" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.45" x="126" y="140" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.37" x="140" y="140" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.58" x="154" y="140" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.8" x="168" y="140" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.35" x="182" y="140" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.73" x="196" y="140" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.92" y="154" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.32" x="14" y="154" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.3" x="28" y="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.03" x="42" y="154" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.65" x="56" y="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.66" x="70" y="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.83" x="84" y="154" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.52" x="98" y="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.82" x="112" y="154" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.95" x="126" y="154" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.89" x="140" y="154" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.2" x="154" y="154" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.61" x="168" y="154" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.34" x="196" y="154" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.9" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.99" x="14" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.49" x="28" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.84" x="42" y="168" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.67" x="56" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.92" x="70" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.79" x="84" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.8" x="98" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.74" x="112" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.38" x="126" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.56" x="140" y="168" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.7" x="154" y="168" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.47" x="168" y="168" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.92" x="182" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.19" x="196" y="168" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.12" y="182" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.16" x="14" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.98" x="28" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.6" x="42" y="182" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.15" x="56" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.17" x="70" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.26" x="84" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.3" x="98" y="182" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.12" x="112" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.31" x="126" y="182" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.62" x="140" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.74" x="154" y="182" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.8" x="168" y="182" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.89" x="182" y="182" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.75" x="196" y="182" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.1" y="196" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.11" x="14" y="196" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.79" x="28" y="196" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.69" x="42" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.39" x="56" y="196" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.31" x="70" y="196" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.33" x="84" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.2" x="98" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.21" x="112" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.02" x="126" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.82" x="140" y="196" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.28" x="154" y="196" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.19" x="168" y="196" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.97" x="182" y="196" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.45" x="196" y="196" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.88" y="210" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.58" x="14" y="210" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.53" x="28" y="210" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.89" x="42" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.38" x="56" y="210" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.73" x="70" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.87" x="84" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.35" x="98" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.61" x="112" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.8" x="126" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.87" x="140" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.77" x="154" y="210" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.94" x="168" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.59" x="182" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.37" x="196" y="210" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.7" y="224" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.72" x="14" y="224" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.95" x="28" y="224" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.26" x="42" y="224" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.68" x="56" y="224" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.55" x="70" y="224" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.2" x="84" y="224" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.63" x="98" y="224" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.5" x="112" y="224" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.79" x="126" y="224" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.02" x="140" y="224" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.17" x="154" y="224" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.99" x="168" y="224" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.82" x="182" y="224" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.28" x="196" y="224" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.76" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.39" x="14" y="238" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.14" x="28" y="238" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.17" x="42" y="238" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.37" x="56" y="238" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.13" x="70" y="238" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.35" x="84" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.13" x="98" y="238" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.55" x="112" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.83" x="126" y="238" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.86" x="140" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.63" x="154" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.38" x="168" y="238" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.57" x="182" y="238" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.13" x="196" y="238" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.9" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.63" x="14" y="252" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.23" x="28" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.56" x="42" y="252" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.38" x="56" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.19" x="70" y="252" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.29" x="84" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.78" x="98" y="252" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.14" x="112" y="252" width="6" height="6" fill="#BCBBBB" />
+                          <rect opacity="0.64" x="126" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.27" x="140" y="252" width="6" height="6" fill="#CFCECD" />
+                          <rect opacity="0.85" x="154" y="252" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.02" x="168" y="252" width="6" height="6" fill="#DAD9D9" />
+                          <rect opacity="0.29" x="182" y="252" width="6" height="6" fill="#8E8B8B" />
+                          <rect opacity="0.4" x="196" y="252" width="6" height="6" fill="#8E8B8B" />
+                        </g>
+                      </g>
+                      <defs>
+                        <clipPath id="clip0_236_15557">
+                          <rect width="205" height="264" fill="white" />
+                        </clipPath>
+                        <clipPath id="clip1_236_15557">
+                          <rect width="236" height="264" fill="white" transform="translate(-0.164062)" />
+                        </clipPath>
+                      </defs>
+                    </svg>
+                  </div>
+                  <span>
+                    <figure>Fig 2.</figure> <strong>188</strong> Contributors
+                  </span>
+                </div>
+
+                <div data-component="growth-stat">
+                  <div data-component="stat-illustration">
+                    <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <g opacity="0.5">
+                        <path d="M205 0H203.985V264H205V0Z" fill="#8E8B8B" />
+                        <path d="M197.896 34H196.881V264H197.896V34Z" fill="#8E8B8B" />
+                        <path d="M189.777 26H188.762V264H189.777V26Z" fill="#8E8B8B" />
+                        <path d="M183.688 52H182.673V264H183.688V52Z" fill="#8E8B8B" />
+                        <path d="M176.584 0H175.569V264H176.584V0Z" fill="#8E8B8B" />
+                        <path d="M169.48 29H168.465V264H169.48V29Z" fill="#8E8B8B" />
+                        <path d="M162.376 44H161.361V264H162.376V44Z" fill="#8E8B8B" />
+                        <path d="M155.272 65H154.257V264H155.272V65Z" fill="#8E8B8B" />
+                        <path d="M149.183 29H148.168V264H149.183V29Z" fill="#8E8B8B" />
+                        <path d="M142.079 36H141.064V264H142.079V36Z" fill="#8E8B8B" />
+                        <path d="M134.975 48H133.96V264H134.975V48Z" fill="#8E8B8B" />
+                        <path d="M127.871 7H126.856V264H127.871V7Z" fill="#8E8B8B" />
+                        <path d="M120.767 0H119.752V264H120.767V0Z" fill="#8E8B8B" />
+                        <path d="M113.663 14H112.649V264H113.663V14Z" fill="#8E8B8B" />
+                        <path d="M106.559 27H105.545V264H106.559V27Z" fill="#8E8B8B" />
+                        <path d="M99.4554 70H98.4406V264H99.4554V70Z" fill="#8E8B8B" />
+                        <path d="M92.3515 32H91.3366V264H92.3515V32Z" fill="#8E8B8B" />
+                        <path d="M85.2475 35H84.2327V264H85.2475V35Z" fill="#8E8B8B" />
+                        <path d="M78.1436 36H77.1287V264H78.1436V36Z" fill="#8E8B8B" />
+                        <path d="M71.0396 10H70.0248V264H71.0396V10Z" fill="#8E8B8B" />
+                        <path d="M63.9356 42H62.9208V264H63.9356V42Z" fill="#8E8B8B" />
+                        <path d="M56.8317 43H55.8168V264H56.8317V43Z" fill="#8E8B8B" />
+                        <path d="M49.7277 38H48.7129V264H49.7277V38Z" fill="#8E8B8B" />
+                        <path d="M42.6238 56H41.6089V264H42.6238V56Z" fill="#8E8B8B" />
+                        <path d="M36.5347 36H35.5198V264H36.5347V36Z" fill="#8E8B8B" />
+                        <path d="M29.4307 8H28.4158V264H29.4307V8Z" fill="#8E8B8B" />
+                        <path d="M22.3267 20H21.3119V264H22.3267V20Z" fill="#8E8B8B" />
+                        <path d="M15.2228 1H14.2079V264H15.2228V1Z" fill="#8E8B8B" />
+                        <path d="M8.11881 9H7.10396V264H8.11881V9Z" fill="#8E8B8B" />
+                        <path d="M1.01485 31H0V264H1.01485V31Z" fill="#8E8B8B" />
+                      </g>
+                    </svg>
+                  </div>
+                  <span>
+                    <figure>Fig 3.</figure> <strong>200K</strong> Monthly Devs
+                  </span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="privacy">
+            <div data-slot="privacy-title">
+              <h3>Built for privacy first</h3>
+              <div>
+                <span>[*]</span>
+
+                <p>
+                  OpenCode does not store any of your code or context data, so that it can operate in privacy sensitive
+                  environments. Learn more about <a href="/docs/enterprise/ ">privacy</a>.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="faq">
+            <div data-slot="section-title">
+              <h3>FAQ</h3>
+            </div>
+            <ul>
+              <li>
+                <Faq question="What is OpenCode?">
+                  OpenCode is an open source agent that helps you write and run code directly from the terminal. You can
+                  pair OpenCode with any AI model, and because it’s terminal-based you can pair it with your preferred
+                  code editor.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="How do I use OpenCode?">
+                  The easiest way to get started is to read the <a href="/docs">intro</a>.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Do I need extra AI subscriptions to use OpenCode?">
+                  Not necessarily, but probably. You’ll need an AI subscription if you want to connect OpenCode to a
+                  paid provider, although you can work with{" "}
+                  <a href="/docs/providers/#lm-studio" target="_blank">
+                    local models
+                  </a>{" "}
+                  for free. While we encourage users to use <A href="/zen">Zen</A>, OpenCode works with all popular
+                  providers such as OpenAI, Anthropic, xAI etc.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Can I only use OpenCode in the terminal?">
+                  Yes, for now. We are actively working on a desktop app. Join the waitlist for early access.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="How much does OpenCode cost?">
+                  OpenCode is 100% free to use. Any additional costs will come from your subscription to a model
+                  provider. While OpenCode works with any model provider, we recommend using <A href="/zen">Zen</A>.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="What about data and privacy?">
+                  Your data and information is only stored when you create sharable links in OpenCode. Learn more about{" "}
+                  <a href="/docs/share/#privacy">share pages</a>.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Is OpenCode open source?">
+                  Yes, OpenCode is fully open source. The source code is public on{" "}
+                  <a href="https://github.com/sst/opencode" target="_blank">
+                    GitHub
+                  </a>{" "}
+                  under the{" "}
+                  <a href="https://github.com/sst/opencode?tab=MIT-1-ov-file#readme" target="_blank">
+                    MIT License
+                  </a>
+                  , meaning anyone can use, modify, or contribute to its development. Anyone from the community can file
+                  issues, submit pull requests, and extend functionality.
+                </Faq>
+              </li>
+            </ul>
+          </section>
+
+          <section data-component="zen-cta">
+            <div data-slot="zen-cta-copy">
+              <strong>Access reliable optimized models for coding agents</strong>
+              <p>
+                Zen gives you access to a handpicked set of AI models that OpenCode has tested and benchmarked
+                specifically for coding agents. No need to worry about inconsistent performance and quality across
+                providers, use validated models that work.
+              </p>
+              <div data-slot="model-logos">
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <mask
+                      id="mask0_79_128586"
+                      style="mask-type:luminance"
+                      maskUnits="userSpaceOnUse"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                    >
+                      <path d="M23 1.5H1V22.2952H23V1.5Z" fill="white" />
+                    </mask>
+                    <g mask="url(#mask0_79_128586)">
+                      <path
+                        d="M9.43799 9.06943V7.09387C9.43799 6.92749 9.50347 6.80267 9.65601 6.71959L13.8206 4.43211C14.3875 4.1202 15.0635 3.9747 15.7611 3.9747C18.3775 3.9747 20.0347 5.9087 20.0347 7.96734C20.0347 8.11288 20.0347 8.27926 20.0128 8.44564L15.6956 6.03335C15.434 5.88785 15.1723 5.88785 14.9107 6.03335L9.43799 9.06943ZM19.1624 16.7637V12.0431C19.1624 11.7519 19.0315 11.544 18.7699 11.3984L13.2972 8.36234L15.0851 7.3849C15.2377 7.30182 15.3686 7.30182 15.5212 7.3849L19.6858 9.67238C20.8851 10.3379 21.6917 11.7519 21.6917 13.1243C21.6917 14.7047 20.7106 16.1604 19.1624 16.7636V16.7637ZM8.15158 12.6047L6.36369 11.6066C6.21114 11.5235 6.14566 11.3986 6.14566 11.2323V6.65735C6.14566 4.43233 7.93355 2.7478 10.3538 2.7478C11.2697 2.7478 12.1199 3.039 12.8396 3.55886L8.54424 5.92959C8.28268 6.07508 8.15181 6.28303 8.15181 6.57427V12.6049L8.15158 12.6047ZM12 14.7258L9.43799 13.3533V10.4421L12 9.06965L14.5618 10.4421V13.3533L12 14.7258ZM13.6461 21.0476C12.7303 21.0476 11.8801 20.7564 11.1604 20.2366L15.4557 17.8658C15.7173 17.7203 15.8482 17.5124 15.8482 17.2211V11.1905L17.658 12.1886C17.8105 12.2717 17.876 12.3965 17.876 12.563V17.1379C17.876 19.3629 16.0662 21.0474 13.6461 21.0474V21.0476ZM8.47863 16.4103L4.314 14.1229C3.11471 13.4573 2.30808 12.0433 2.30808 10.6709C2.30808 9.06965 3.31106 7.6348 4.85903 7.03168V11.773C4.85903 12.0642 4.98995 12.2721 5.25151 12.4177L10.7025 15.4328L8.91464 16.4103C8.76209 16.4934 8.63117 16.4934 8.47863 16.4103ZM8.23892 19.8207C5.77508 19.8207 3.96533 18.0531 3.96533 15.8696C3.96533 15.7032 3.98719 15.5368 4.00886 15.3704L8.30418 17.7412C8.56574 17.8867 8.82752 17.8867 9.08909 17.7412L14.5618 14.726V16.7015C14.5618 16.8679 14.4964 16.9927 14.3438 17.0758L10.1792 19.3633C9.61225 19.6752 8.93631 19.8207 8.23869 19.8207H8.23892ZM13.6461 22.2952C16.2844 22.2952 18.4865 20.5069 18.9882 18.1362C21.4301 17.5331 23 15.3495 23 13.1245C23 11.6688 22.346 10.2548 21.1685 9.23581C21.2775 8.79908 21.343 8.36234 21.343 7.92582C21.343 4.95215 18.8137 2.72691 15.892 2.72691C15.3034 2.72691 14.7365 2.80999 14.1695 2.99726C13.1882 2.08223 11.8364 1.5 10.3538 1.5C7.71557 1.5 5.51352 3.28829 5.01185 5.65902C2.56987 6.26214 1 8.44564 1 10.6707C1 12.1264 1.65404 13.5404 2.83147 14.5594C2.72246 14.9961 2.65702 15.4328 2.65702 15.8694C2.65702 18.8431 5.1863 21.0683 8.108 21.0683C8.69661 21.0683 9.26354 20.9852 9.83046 20.7979C10.8115 21.713 12.1634 22.2952 13.6461 22.2952Z"
+                        fill="currentColor"
+                      />
+                    </g>
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z" fill="currentColor" />
+                    <path
+                      d="M6.32538 13.6824L8.52662 8.01177L10.7279 13.6824H6.32538ZM6.68225 3.93164L0.25 20.0677H3.84652L5.16202 16.6791H11.8914L13.2067 20.0677H16.8033L10.371 3.93164H6.68225Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M9.16861 16.0529L17.2018 9.85156C17.5957 9.54755 18.1586 9.66612 18.3463 10.1384C19.3339 12.6288 18.8926 15.6217 16.9276 17.6766C14.9626 19.7314 12.2285 20.1821 9.72948 19.1557L6.9995 20.4775C10.9151 23.2763 15.6699 22.5841 18.6411 19.4749C20.9979 17.0103 21.7278 13.6508 21.0453 10.6214L21.0515 10.6278C20.0617 6.17736 21.2948 4.39847 23.8207 0.760904C23.8804 0.674655 23.9402 0.588405 24 0.5L20.6762 3.97585V3.96506L9.16658 16.0551"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M7.37742 16.7017C4.67579 14.0395 5.14158 9.91963 7.44676 7.54383C9.15135 5.78544 11.9442 5.06779 14.3821 6.12281L17.0005 4.87559C16.5288 4.52392 15.9242 4.14566 15.2305 3.87986C12.0948 2.54882 8.34069 3.21127 5.79171 5.8386C3.33985 8.36779 2.56881 12.2567 3.89286 15.5751C4.88192 18.0552 3.26056 19.8094 1.62731 21.5801C1.04853 22.2078 0.467774 22.8355 0 23.5L7.3754 16.7037"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M12.6043 1.34016C12.9973 2.03016 13.3883 2.72215 13.7783 3.41514C13.7941 3.44286 13.8169 3.46589 13.8445 3.48187C13.8721 3.49786 13.9034 3.50624 13.9353 3.50614H19.4873C19.6612 3.50614 19.8092 3.61614 19.9332 3.83314L21.3872 6.40311C21.5772 6.74011 21.6272 6.88111 21.4112 7.24011C21.1512 7.6701 20.8982 8.1041 20.6512 8.54009L20.2842 9.19809C20.1782 9.39409 20.0612 9.47809 20.2442 9.71008L22.8962 14.347C23.0682 14.648 23.0072 14.841 22.8532 15.117C22.4162 15.902 21.9712 16.681 21.5182 17.457C21.3592 17.729 21.1662 17.832 20.8382 17.827C20.0612 17.811 19.2863 17.817 18.5113 17.843C18.4946 17.8439 18.4785 17.8489 18.4644 17.8576C18.4502 17.8664 18.4385 17.8785 18.4303 17.893C17.5361 19.4773 16.6344 21.0573 15.7253 22.633C15.5563 22.926 15.3453 22.996 15.0003 22.997C14.0033 23 12.9983 23.001 11.9833 22.999C11.8889 22.9987 11.7961 22.9735 11.7145 22.9259C11.6328 22.8783 11.5652 22.8101 11.5184 22.728L10.1834 20.405C10.1756 20.3898 10.1637 20.3771 10.149 20.3684C10.1343 20.3598 10.1174 20.3554 10.1004 20.356H4.98244C4.69744 20.386 4.42944 20.355 4.17745 20.264L2.57447 17.494C2.52706 17.412 2.50193 17.319 2.50158 17.2243C2.50123 17.1296 2.52567 17.0364 2.57247 16.954L3.77945 14.834C3.79665 14.8041 3.80569 14.7701 3.80569 14.7355C3.80569 14.701 3.79665 14.667 3.77945 14.637C3.15073 13.5485 2.52573 12.4579 1.90448 11.3651L1.11449 9.97008C0.954488 9.66008 0.941489 9.47409 1.20949 9.00509C1.67448 8.1921 2.13647 7.38011 2.59647 6.56911C2.72847 6.33512 2.90046 6.23512 3.18046 6.23412C4.04344 6.23048 4.90644 6.23015 5.76943 6.23312C5.79123 6.23295 5.81259 6.22704 5.83138 6.21597C5.85016 6.20491 5.8657 6.1891 5.87643 6.17012L8.68239 1.27516C8.72491 1.2007 8.78631 1.13875 8.86039 1.09556C8.93448 1.05238 9.01863 1.02948 9.10439 1.02917C9.62838 1.02817 10.1574 1.02917 10.6874 1.02317L11.7044 1.00017C12.0453 0.997165 12.4283 1.03217 12.6043 1.34016ZM9.17238 1.74316C9.16185 1.74315 9.15149 1.74592 9.14236 1.75119C9.13323 1.75645 9.12565 1.76403 9.12038 1.77316L6.25442 6.78811C6.24066 6.81174 6.22097 6.83137 6.19729 6.84505C6.17361 6.85873 6.14677 6.86599 6.11942 6.86611H3.25346C3.19746 6.86611 3.18346 6.89111 3.21246 6.94011L9.02239 17.096C9.04739 17.138 9.03539 17.158 8.98839 17.159L6.19342 17.174C6.15256 17.1727 6.11214 17.1828 6.07678 17.2033C6.04141 17.2238 6.01253 17.2539 5.99342 17.29L4.67344 19.6C4.62944 19.678 4.65244 19.718 4.74144 19.718L10.4574 19.726C10.5034 19.726 10.5374 19.746 10.5614 19.787L11.9643 22.241C12.0103 22.322 12.0563 22.323 12.1033 22.241L17.1093 13.481L17.8923 12.0991C17.897 12.0905 17.904 12.0834 17.9125 12.0785C17.9209 12.0735 17.9305 12.0709 17.9403 12.0709C17.9501 12.0709 17.9597 12.0735 17.9681 12.0785C17.9765 12.0834 17.9835 12.0905 17.9883 12.0991L19.4123 14.629C19.4229 14.648 19.4385 14.6637 19.4573 14.6746C19.4761 14.6855 19.4975 14.6912 19.5193 14.691L22.2822 14.671C22.2893 14.6711 22.2963 14.6693 22.3024 14.6658C22.3086 14.6623 22.3137 14.6572 22.3172 14.651C22.3206 14.6449 22.3224 14.638 22.3224 14.631C22.3224 14.624 22.3206 14.6172 22.3172 14.611L19.4173 9.52508C19.4068 9.50809 19.4013 9.48853 19.4013 9.46859C19.4013 9.44864 19.4068 9.42908 19.4173 9.41209L19.7102 8.90509L20.8302 6.92811C20.8542 6.88711 20.8422 6.86611 20.7952 6.86611H9.20038C9.14138 6.86611 9.12738 6.84011 9.15738 6.78911L10.5914 4.28413C10.6021 4.26706 10.6078 4.24731 10.6078 4.22714C10.6078 4.20697 10.6021 4.18721 10.5914 4.17014L9.22538 1.77416C9.22016 1.7647 9.21248 1.75682 9.20315 1.75137C9.19382 1.74591 9.18319 1.74307 9.17238 1.74316ZM15.4623 9.76308C15.5083 9.76308 15.5203 9.78308 15.4963 9.82308L14.6643 11.2881L12.0513 15.873C12.0464 15.8819 12.0392 15.8894 12.0304 15.8945C12.0216 15.8996 12.0115 15.9022 12.0013 15.902C11.9912 15.902 11.9813 15.8993 11.9725 15.8942C11.9637 15.8891 11.9564 15.8818 11.9513 15.873L8.49839 9.84108C8.47839 9.80708 8.48839 9.78908 8.52639 9.78708L8.74239 9.77508L15.4643 9.76308H15.4623Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M12.6241 11.346L20.3848 3.44816C20.5309 3.29931 20.4487 3 20.2601 3H16.0842C16.0388 3 15.9949 3.01897 15.9594 3.05541L7.59764 11.5629C7.46721 11.6944 7.27446 11.5771 7.27446 11.3666V3.25183C7.27446 3.11242 7.18515 3 7.07594 3H4.19843C4.08932 3 4 3.11242 4 3.25183V20.7482C4 20.8876 4.08932 21 4.19843 21H7.07594C7.18515 21 7.27446 20.8876 7.27446 20.7482V17.1834C7.27446 17.1073 7.30136 17.0344 7.34815 16.987L9.94075 14.3486C10.0031 14.2853 10.0895 14.2757 10.159 14.3232L17.0934 19.5573C18.2289 20.3412 19.4975 20.8226 20.786 20.9652C20.9008 20.9778 21 20.8606 21 20.7133V17.3559C21 17.2276 20.9249 17.1232 20.8243 17.1073C20.0659 16.9853 19.326 16.6845 18.6569 16.222L12.6538 11.764C12.5291 11.6785 12.5135 11.4584 12.6241 11.346Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <A href="/zen">
+                <span>Learn about Zen </span>
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              </A>
+            </div>
+          </section>
+
+          <EmailSignup />
+
+          <Footer />
+        </div>
       </div>
+      <Legal />
     </main>
   )
 }

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

@@ -0,0 +1,183 @@
+import "./index.css"
+import { Title } from "@solidjs/meta"
+import { onCleanup, onMount } from "solid-js"
+import logoLight from "../asset/logo-ornate-light.svg"
+import logoDark from "../asset/logo-ornate-dark.svg"
+import IMG_SPLASH from "../asset/lander/screenshot-splash.png"
+import { IconCopy, IconCheck } from "../component/icon"
+import { createAsync, query } from "@solidjs/router"
+import { getActor } from "~/context/auth"
+import { withActor } from "~/context/auth.withActor"
+import { Account } from "@opencode/console-core/account.js"
+
+function CopyStatus() {
+  return (
+    <div data-component="copy-status">
+      <IconCopy data-slot="copy" />
+      <IconCheck data-slot="check" />
+    </div>
+  )
+}
+
+const defaultWorkspace = query(async () => {
+  "use server"
+  const actor = await getActor()
+  if (actor.type === "account") {
+    const workspaces = await withActor(() => Account.workspaces())
+    return workspaces[0].id
+  }
+}, "defaultWorkspace")
+
+export default function Home() {
+  const workspace = createAsync(() => defaultWorkspace())
+  onMount(() => {
+    const commands = document.querySelectorAll("[data-copy]")
+    for (const button of commands) {
+      const callback = () => {
+        const text = button.textContent
+        if (text) {
+          navigator.clipboard.writeText(text)
+          button.setAttribute("data-copied", "")
+          setTimeout(() => {
+            button.removeAttribute("data-copied")
+          }, 1500)
+        }
+      }
+      button.addEventListener("click", callback)
+      onCleanup(() => {
+        button.removeEventListener("click", callback)
+      })
+    }
+  })
+
+  return (
+    <main data-page="home">
+      <Title>opencode | AI coding agent built for the terminal</Title>
+
+      <div data-component="content">
+        <section data-component="top">
+          <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
+          <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
+          <h1 data-slot="title">The AI coding agent built for the terminal</h1>
+          <div data-slot="login">
+            <a href="/auth">opencode zen</a>
+          </div>
+        </section>
+
+        <section data-component="cta">
+          <div data-slot="left">
+            <a href="/docs">Get Started</a>
+          </div>
+          <div data-slot="center">
+            <a href="/auth">opencode zen</a>
+          </div>
+          <div data-slot="right">
+            <button data-copy data-slot="command">
+              <span>
+                <span>curl -fsSL </span>
+                <span data-slot="protocol">https://</span>
+                <span data-slot="highlight">opencode.ai/install</span>
+                <span> | bash</span>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+        </section>
+
+        <section data-component="features">
+          <ul data-slot="list">
+            <li>
+              <strong>Native TUI</strong> A responsive, native, themeable terminal UI
+            </li>
+            <li>
+              <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
+            </li>
+            <li>
+              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode{" "}
+              <label>New</label>
+            </li>
+            <li>
+              <strong>Multi-session</strong> Start multiple agents in parallel on the same project
+            </li>
+            <li>
+              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
+            </li>
+            <li>
+              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
+            </li>
+            <li>
+              <strong>Use any model</strong> Supports 75+ LLM providers through{" "}
+              <a href="https://models.dev">Models.dev</a>, including local models
+            </li>
+          </ul>
+        </section>
+
+        <section data-component="install">
+          <div data-component="method">
+            <h3 data-component="title">npm</h3>
+            <button data-copy data-slot="button">
+              <span>
+                npm install -g <strong>opencode-ai</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">bun</h3>
+            <button data-copy data-slot="button">
+              <span>
+                bun install -g <strong>opencode-ai</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">homebrew</h3>
+            <button data-copy data-slot="button">
+              <span>
+                brew install <strong>sst/tap/opencode</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">paru</h3>
+            <button data-copy data-slot="button">
+              <span>
+                paru -S <strong>opencode-bin</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+        </section>
+
+        <section data-component="screenshots">
+          <figure>
+            <figcaption>opencode TUI with the tokyonight theme</figcaption>
+            <a href="/docs/cli">
+              <img src={IMG_SPLASH} alt="opencode TUI with tokyonight theme" />
+            </a>
+          </figure>
+        </section>
+
+        <footer data-component="footer">
+          <div data-slot="cell">
+            <a href="https://x.com/opencode">X.com</a>
+          </div>
+          <div data-slot="cell">
+            <a href="https://github.com/sst/opencode">GitHub</a>
+          </div>
+          <div data-slot="cell">
+            <a href="https://opencode.ai/discord">Discord</a>
+          </div>
+        </footer>
+      </div>
+
+      <div data-component="legal">
+        <span>
+          ©2025 <a href="https://anoma.ly">Anomaly</a>
+        </span>
+      </div>
+    </main>
+  )
+}

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

@@ -38,7 +38,7 @@ const logout = action(async () => {
       event!.locals.actor = undefined
       return val
     })
-  throw redirect("/")
+  throw redirect("/zen")
 })
 
 export default function WorkspaceLayout(props: RouteSectionProps) {

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

@@ -1,12 +1,29 @@
 import "./[id].css"
-import { MonthlyLimitSection } from "~/component/workspace/monthly-limit-section"
-import { NewUserSection } from "~/component/workspace/new-user-section"
-import { BillingSection } from "~/component/workspace/billing-section"
-import { PaymentSection } from "~/component/workspace/payment-section"
-import { UsageSection } from "~/component/workspace/usage-section"
-import { KeySection } from "~/component/workspace/key-section"
+import { MonthlyLimitSection } from "./monthly-limit-section"
+import { NewUserSection } from "./new-user-section"
+import { BillingSection } from "./billing-section"
+import { PaymentSection } from "./payment-section"
+import { UsageSection } from "./usage-section"
+import { KeySection } from "./key-section"
+import { MemberSection } from "./member-section"
+import { Show } from "solid-js"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { Actor } from "@opencode/console-core/actor.js"
+import { withActor } from "~/context/auth.withActor"
+import { User } from "@opencode/console-core/user.js"
+
+const getUser = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    const actor = Actor.assert("user")
+    const user = await User.fromID(actor.properties.userID)
+    return { isAdmin: user?.role === "admin" }
+  }, workspaceID)
+}, "user.get")
 
 export default function () {
+  const params = useParams()
+  const data = createAsync(() => getUser(params.id))
   return (
     <div data-page="workspace-[id]">
       <section data-component="title-section">
@@ -23,10 +40,17 @@ export default function () {
       <div data-slot="sections">
         <NewUserSection />
         <KeySection />
-        <BillingSection />
-        <MonthlyLimitSection />
+        <Show when={data()?.isAdmin}>
+          <Show when={isBeta(params.id)}>
+            <MemberSection />
+          </Show>
+          <BillingSection />
+          <MonthlyLimitSection />
+        </Show>
         <UsageSection />
-        <PaymentSection />
+        <Show when={data()?.isAdmin}>
+          <PaymentSection />
+        </Show>
       </div>
     </div>
   )
@@ -36,6 +60,6 @@ export function isBeta(workspaceID: string) {
   return [
     "wrk_01K46JDFR0E75SG2Q8K172KF3Y", // production
     "wrk_01K4NFRR5P7FSYWH88307B4DDS", // dev
-    "wrk_01K4PJRKJ2WPQZN3FFYRV4673F", // frank
+    "wrk_01K6G7HBZ7C046A4XK01CVD0NS", // frank
   ].includes(workspaceID)
 }

packages/console/app/src/routes/workspace/member-section.module.css

@@ -0,0 +1,179 @@
+.root {
+  [data-component="empty-state"] {
+    padding: var(--space-20) var(--space-6);
+    text-align: center;
+    border: 1px dashed var(--color-border);
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    p {
+      line-height: 1.5;
+      font-size: var(--font-size-sm);
+      color: var(--color-text-muted);
+    }
+  }
+
+  [data-slot="create-form"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+
+    [data-slot="input-container"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+    }
+
+    @media (max-width: 30rem) {
+      gap: var(--space-2);
+    }
+
+    input {
+      flex: 1;
+      padding: var(--space-2) var(--space-3);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      font-size: var(--font-size-sm);
+      font-family: var(--font-mono);
+
+      &:focus {
+        outline: none;
+        border-color: var(--color-accent);
+      }
+
+      &::placeholder {
+        color: var(--color-text-disabled);
+      }
+    }
+
+    [data-slot="form-actions"] {
+      display: flex;
+      gap: var(--space-2);
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      margin-top: var(--space-1);
+      line-height: 1.4;
+    }
+  }
+
+  [data-slot="members-table"] {
+    overflow-x: auto;
+  }
+
+  [data-slot="members-table-element"] {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+
+    thead {
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+      padding: var(--space-3) var(--space-4);
+      text-align: left;
+      font-weight: normal;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+    }
+
+    td {
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--color-border-muted);
+      color: var(--color-text-muted);
+      font-family: var(--font-mono);
+
+      &[data-slot="member-email"] {
+        color: var(--color-text);
+        font-family: var(--font-sans);
+        font-weight: 500;
+      }
+
+      &[data-slot="member-role"] {
+        font-family: var(--font-mono);
+
+        button {
+          display: flex;
+          align-items: center;
+          gap: var(--space-2);
+          padding: var(--space-2) var(--space-3);
+          font-size: var(--font-size-sm);
+          font-weight: 400;
+          border: none;
+          background-color: transparent;
+          color: var(--color-text-muted);
+          font-family: var(--font-mono);
+          border-radius: var(--border-radius-sm);
+          cursor: pointer;
+          transition: all 0.15s ease;
+          text-transform: none;
+
+          &:hover:not(:disabled) {
+            background-color: var(--color-bg-surface);
+            color: var(--color-text);
+          }
+
+          &:disabled {
+            cursor: default;
+            color: var(--color-text);
+          }
+
+          span {
+            font-family: inherit;
+          }
+        }
+      }
+
+      &[data-slot="member-date"] {
+        color: var(--color-text);
+      }
+
+      &[data-slot="member-actions"] {
+        font-family: var(--font-sans);
+      }
+    }
+
+    tbody tr {
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    @media (max-width: 40rem) {
+
+      th,
+      td {
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-size-xs);
+      }
+
+      th {
+        &:nth-child(3)
+
+        /* Date */
+          {
+          display: none;
+        }
+      }
+
+      td {
+        &:nth-child(3)
+
+        /* Date */
+          {
+          display: none;
+        }
+      }
+    }
+  }
+}

packages/console/app/src/routes/workspace/member-section.tsx

@@ -0,0 +1,277 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, createSignal, For, Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { createStore } from "solid-js/store"
+import styles from "./member-section.module.css"
+import { UserRole } from "@opencode/console-core/schema/user.sql.js"
+import { Actor } from "@opencode/console-core/actor.js"
+import { User } from "@opencode/console-core/user.js"
+
+const listMembers = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    const actor = Actor.assert("user")
+    return {
+      members: await User.list(),
+      currentUserID: actor.properties.userID,
+    }
+  }, workspaceID)
+}, "member.list")
+
+const inviteMember = action(async (form: FormData) => {
+  "use server"
+  const email = form.get("email")?.toString().trim()
+  if (!email) return { error: "Email is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  return json(
+    await withActor(
+      () =>
+        User.invite({ email, role })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.create")
+
+const removeMember = action(async (form: FormData) => {
+  "use server"
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(
+    await withActor(
+      () =>
+        User.remove(id)
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.remove")
+
+const updateMemberRole = action(async (form: FormData) => {
+  "use server"
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  return json(
+    await withActor(
+      () =>
+        User.updateRole({ id, role })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.updateRole")
+
+export function MemberCreateForm() {
+  const params = useParams()
+  const submission = useSubmission(inviteMember)
+  const [store, setStore] = createStore({ show: false })
+
+  let input: HTMLInputElement
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      hide()
+    }
+  })
+
+  function show() {
+    // submission.clear() does not clear the result in some cases, ie.
+    //  1. Create key with empty name => error shows
+    //  2. Put in a key name and creates the key => form hides
+    //  3. Click add key button again => form shows with the same error if
+    //     submission.clear() is called only once
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("show", true)
+    input.focus()
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <Show
+      when={store.show}
+      fallback={
+        <button data-color="primary" onClick={() => show()}>
+          Invite Member
+        </button>
+      }
+    >
+      <form action={inviteMember} method="post" data-slot="create-form">
+        <div data-slot="input-container">
+          <input ref={(r) => (input = r)} data-component="input" name="email" type="text" placeholder="Enter email" />
+          <div data-slot="role-selector">
+            <label>
+              <input type="radio" name="role" value="admin" checked />
+              <div>
+                <strong>Admin</strong>
+                <p>Can manage models, members, and billing</p>
+              </div>
+            </label>
+            <label>
+              <input type="radio" name="role" value="member" />
+              <div>
+                <strong>Member</strong>
+                <p>Can only generate API keys for themselves</p>
+              </div>
+            </label>
+          </div>
+          <Show when={submission.result && submission.result.error}>
+            {(err) => <div data-slot="form-error">{err()}</div>}
+          </Show>
+        </div>
+        <input type="hidden" name="workspaceID" value={params.id} />
+        <div data-slot="form-actions">
+          <button type="reset" data-color="ghost" onClick={() => hide()}>
+            Cancel
+          </button>
+          <button type="submit" data-color="primary" disabled={submission.pending}>
+            {submission.pending ? "Inviting..." : "Invite"}
+          </button>
+        </div>
+      </form>
+    </Show>
+  )
+}
+
+function MemberRow(props: { member: any; workspaceID: string; currentUserID: string | null }) {
+  const [editing, setEditing] = createSignal(false)
+  const submission = useSubmission(updateMemberRole)
+  const isCurrentUser = () => props.currentUserID === props.member.id
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      setEditing(false)
+    }
+  })
+
+  return (
+    <Show
+      when={editing()}
+      fallback={
+        <tr>
+          <td data-slot="member-email">{props.member.accountEmail ?? props.member.email}</td>
+          <td data-slot="member-role">{props.member.role}</td>
+          <Show when={!props.member.timeSeen} fallback={<td data-slot="member-joined"></td>}>
+            <td data-slot="member-joined">invited</td>
+          </Show>
+          <td data-slot="member-actions">
+            <button data-color="ghost" onClick={() => setEditing(true)}>
+              Edit
+            </button>
+            <Show when={!isCurrentUser()}>
+              <form action={removeMember} method="post">
+                <input type="hidden" name="id" value={props.member.id} />
+                <input type="hidden" name="workspaceID" value={props.workspaceID} />
+                <button data-color="ghost">Delete</button>
+              </form>
+            </Show>
+          </td>
+        </tr>
+      }
+    >
+      <tr>
+        <td colspan="4">
+          <form action={updateMemberRole} method="post">
+            <div data-slot="edit-member-email">{props.member.accountEmail ?? props.member.email}</div>
+            <input type="hidden" name="id" value={props.member.id} />
+            <input type="hidden" name="workspaceID" value={props.workspaceID} />
+            <Show when={!isCurrentUser()} fallback={<div data-slot="current-user-role">Role: {props.member.role}</div>}>
+              <div data-slot="role-selector">
+                <label>
+                  <input type="radio" name="role" value="admin" checked={props.member.role === "admin"} />
+                  <div>
+                    <strong>Admin</strong>
+                    <p>Can manage models, members, and billing</p>
+                  </div>
+                </label>
+                <label>
+                  <input type="radio" name="role" value="member" checked={props.member.role === "member"} />
+                  <div>
+                    <strong>Member</strong>
+                    <p>Can only generate API keys for themselves</p>
+                  </div>
+                </label>
+              </div>
+            </Show>
+            <Show when={submission.result && submission.result.error}>
+              {(err) => <div data-slot="form-error">{err()}</div>}
+            </Show>
+            <div data-slot="form-actions">
+              <button type="button" data-color="ghost" onClick={() => setEditing(false)}>
+                Cancel
+              </button>
+              <Show when={!isCurrentUser()}>
+                <button type="submit" data-color="primary" disabled={submission.pending}>
+                  {submission.pending ? "Saving..." : "Save"}
+                </button>
+              </Show>
+            </div>
+          </form>
+        </td>
+      </tr>
+    </Show>
+  )
+}
+
+export function MemberSection() {
+  const params = useParams()
+  const data = createAsync(() => listMembers(params.id))
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Members</h2>
+        <p>Manage your members for accessing opencode services.</p>
+      </div>
+      <MemberCreateForm />
+      <div data-slot="members-table">
+        <Show
+          when={data()?.members.length}
+          fallback={
+            <div data-component="empty-state">
+              <p>Invite a member to your workspace</p>
+            </div>
+          }
+        >
+          <table data-slot="members-table-element">
+            <thead>
+              <tr>
+                <th>Email</th>
+                <th>Role</th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={data()!.members}>
+                {(member) => (
+                  <MemberRow member={member} workspaceID={params.id} currentUserID={data()!.currentUserID} />
+                )}
+              </For>
+            </tbody>
+          </table>
+        </Show>
+      </div>
+    </section>
+  )
+}

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

@@ -10,6 +10,7 @@ import { Resource } from "@opencode/console-resource"
 import { Billing } from "../../../../core/src/billing"
 import { Actor } from "@opencode/console-core/actor.js"
 import { WorkspaceTable } from "@opencode/console-core/schema/workspace.sql.js"
+import { ZenModel } from "@opencode/console-core/model.js"
 
 export async function handler(
   input: APIEvent,
@@ -34,32 +35,7 @@ export async function handler(
   class MonthlyLimitError extends Error {}
   class ModelError extends Error {}
 
-  const ModelCostSchema = z.object({
-    input: z.number(),
-    output: z.number(),
-    cacheRead: z.number().optional(),
-    cacheWrite5m: z.number().optional(),
-    cacheWrite1h: z.number().optional(),
-  })
-
-  const ModelSchema = z.object({
-    cost: ModelCostSchema,
-    cost200K: ModelCostSchema.optional(),
-    allowAnonymous: z.boolean().optional(),
-    providers: z.array(
-      z.object({
-        id: z.string(),
-        api: z.string(),
-        apiKey: z.string(),
-        model: z.string(),
-        weight: z.number().optional(),
-        headerMappings: z.record(z.string(), z.string()).optional(),
-        disabled: z.boolean().optional(),
-      }),
-    ),
-  })
-
-  type Model = z.infer<typeof ModelSchema>
+  type Model = z.infer<typeof ZenModel.ModelSchema>
 
   const FREE_WORKSPACES = [
     "wrk_01K46JDFR0E75SG2Q8K172KF3Y", // frank
@@ -93,7 +69,7 @@ export async function handler(
 
     // Request to model provider
     const startTimestamp = Date.now()
-    const res = await fetch(path.posix.join(providerInfo.api, url.pathname.replace(/^\/zen/, "") + url.search), {
+    const res = await fetch(path.posix.join(providerInfo.api, url.pathname.replace(/^\/zen\/v1/, "") + url.search), {
       method: "POST",
       headers: (() => {
         const headers = input.request.headers
@@ -230,7 +206,7 @@ export async function handler(
   function validateModel(reqModel: string) {
     const json = JSON.parse(Resource.ZEN_MODELS.value)
 
-    const allModels = z.record(z.string(), ModelSchema).parse(json)
+    const allModels = ZenModel.ModelsSchema.parse(json)
 
     if (!(reqModel in allModels)) {
       throw new ModelError(`Model ${reqModel} not supported`)
@@ -331,7 +307,7 @@ export async function handler(
 
     const modelCost =
       modelInfo.cost200K &&
-      usage.inputTokens + usage.cacheReadTokens + usage.cacheWrite5mTokens + usage.cacheWrite1hTokens > 200_000
+      inputTokens + (cacheReadTokens ?? 0) + (cacheWrite5mTokens ?? 0) + (cacheWrite1hTokens ?? 0) > 200_000
         ? modelInfo.cost200K
         : modelInfo.cost
 

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

@@ -0,0 +1,844 @@
+::selection {
+  background: var(--color-background-interactive);
+  color: var(--color-text-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-background-interactive);
+    color: var(--color-text-inverted);
+  }
+}
+
+[data-page="zen"] {
+  --color-background: hsl(0, 20%, 99%);
+  --color-background-weak: hsl(0, 8%, 97%);
+  --color-background-strong: hsl(0, 5%, 12%);
+  --color-background-strong-hover: hsl(0, 5%, 18%);
+  --color-background-interactive: hsl(62, 84%, 88%);
+  --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+  --color-text: hsl(0, 1%, 39%);
+  --color-text-weak: hsl(0, 1%, 74%);
+  --color-text-weaker: hsl(30, 2%, 81%);
+  --color-text-strong: hsl(0, 5%, 12%);
+  --color-text-inverted: hsl(0, 20%, 99%);
+
+  --color-border: hsl(30, 2%, 81%);
+  --color-border-weak: hsl(0, 1%, 85%);
+
+  --color-icon: hsl(0, 1%, 55%);
+}
+
+[data-page="zen"] {
+  @media (prefers-color-scheme: dark) {
+    --color-background: hsl(0, 9%, 7%);
+    --color-background-weak: hsl(0, 6%, 10%);
+    --color-background-strong: hsl(0, 15%, 94%);
+    --color-background-strong-hover: hsl(0, 15%, 97%);
+    --color-background-interactive: hsl(62, 100%, 90%);
+    --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+    --color-text: hsl(0, 4%, 71%);
+    --color-text-weak: hsl(0, 2%, 49%);
+    --color-text-weaker: hsl(0, 3%, 28%);
+    --color-text-strong: hsl(0, 15%, 94%);
+    --color-text-inverted: hsl(0, 9%, 7%);
+
+    --color-border: hsl(0, 3%, 28%);
+    --color-border-weak: hsl(0, 4%, 23%);
+
+    --color-icon: hsl(10, 3%, 43%);
+  }
+}
+
+body {
+  background: var(--color-background);
+}
+
+@supports (background: -webkit-named-image(i)) {
+  [data-page="opencode"] {
+    border-top: 1px solid var(--color-border-weak);
+  }
+}
+
+
+[data-page="zen"] {
+  background: var(--color-background);
+  --padding: 5rem;
+  --vertical-padding: 4rem;
+
+  @media (max-width: 60rem) {
+    --padding: 1.5rem;
+    --vertical-padding: 3rem;
+  }
+
+  display: flex;
+  gap: var(--vertical-padding);
+  flex-direction: column;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  padding-bottom: 5rem;
+
+  a {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-underline-offset: var(--space-1);
+    text-decoration-thickness: 1px;
+  }
+
+  p {
+    line-height: 200%;
+
+    @media (max-width: 60rem) {
+      line-height: 180%;
+    }
+  }
+
+  @media (max-width: 60rem) {
+    font-size: 15px;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: background-color 5000000s ease-in-out 0s;
+  }
+
+  input:-webkit-autofill {
+    -webkit-text-fill-color: var(--color-text-strong) !important;
+  }
+
+  input:-moz-autofill {
+    -moz-text-fill-color: var(--color-text-strong) !important;
+  }
+
+
+
+
+  [data-component="container"] {
+    max-width: 67.5rem;
+    margin: 0 auto;
+    border: 1px solid var(--color-border-weak);
+    border-top: none;
+
+    @media (max-width: 65rem) {
+      border: none;
+    }
+  }
+
+  [data-component="content"] {
+  }
+
+  [data-component="top"] {
+    padding: 24px var(--padding);
+    height: 80px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--color-background);
+    border-bottom: 1px solid var(--color-border-weak);
+
+    z-index: 10;
+
+    img {
+      height: 34px;
+      width: auto;
+    }
+
+    [data-component="nav-desktop"] {
+      ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 48px;
+        li {
+          display: inline-block;
+          a {
+            text-decoration: none;
+            span {
+              color: var(--color-text-weak);
+            }
+          }
+          a:hover {
+            text-decoration: underline;
+            text-underline-offset: var(--space-1);
+            text-decoration-thickness: 1px;
+          }
+        }
+      }
+
+      @media (max-width: 40rem) {
+        display: none;
+      }
+    }
+
+    [data-component="nav-mobile"] {
+      button > svg {
+        color: var(--color-icon);
+      }
+    }
+
+
+
+    [data-component="nav-mobile-toggle"] {
+      border: none;
+      background: none;
+      outline: none;
+      height: 40px;
+      width: 40px;
+      cursor: pointer;
+    }
+
+    [data-component="nav-mobile-toggle"]:hover {
+      background: var(--color-background-weak);
+    }
+
+    [data-component="nav-mobile"] {
+      display: none;
+
+      @media (max-width: 40rem) {
+        display: block;
+
+        [data-component="nav-mobile-icon"] {
+          cursor: pointer;
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-component="nav-mobile-menu-list"] {
+          position: fixed;
+          background: var(--color-background);
+          top: 80px;
+          left: 0;
+          right: 0;
+          height: 100vh;
+
+          ul {
+            list-style: none;
+            padding: 20px 0;
+
+            li {
+              a {
+                text-decoration: none;
+                padding: 20px;
+                display: block;
+
+                span {
+                  color: var(--color-text-weak);
+                }
+              }
+
+              a:hover {
+                background: var(--color-background-weak);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    [data-slot="logo dark"] {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="logo light"] {
+        display: none;
+      }
+      [data-slot="logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="hero"] {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--vertical-padding)*2) var(--padding);
+
+    [data-slot="zen logo dark"] {
+      display: none;
+    }
+
+    @media (max-width: 30rem) {
+      padding: var(--vertical-padding) var(--padding)
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="zen logo light"] {
+        display: none;
+      }
+      [data-slot="zen logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-slot="hero-copy"] {
+    img {
+      margin-bottom: 24px;
+    }
+
+    strong {
+      font-size: 28px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      margin-bottom: 16px;
+      display: block;
+
+      @media (max-width: 60rem) {
+        font-size: 22px;
+      }
+    }
+
+
+
+    p {
+      color: var(--color-text);
+      margin-bottom: 24px;
+      max-width: 82%;
+
+      @media (max-width: 50rem) {
+        max-width: 100%;
+      }
+    }
+
+    a {
+      background: var(--color-background-strong);
+      padding: 8px 12px 8px 20px;
+      color: var(--color-text-inverted);
+      border: none;
+      border-radius: 4px;
+      font-weight: 500;
+      cursor: pointer;
+      margin-bottom: 56px;
+      display: flex;
+      width: fit-content;
+      gap: 12px;
+      text-decoration: none;
+    }
+
+    a:hover {
+      background: var(--color-background-strong-hover);
+    }
+  }
+  [data-slot="model-logos"] {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 56px;
+
+    svg {
+      color: var(--color-background-strong);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      svg {
+        color: var(--color-background-strong);
+      }
+    }
+  }
+
+  [data-slot="pricing-copy"] {
+    strong {
+      color: var(--color-text-strong);
+      font-weight: 500;
+    }
+
+    p:first-child {
+      margin-bottom: 24px;
+      color: var(--color-text);
+      display: flex;
+      gap: 8px;
+
+      @media (max-width: 40rem) {
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+
+  [data-component="comparison"] {
+    border-top: 1px solid var(--color-border-weak);
+    video {
+      width: 100%;
+      height: auto;
+      max-width: none;
+      max-height: none;
+      display: block;
+    }
+  }
+
+  [data-slot="section-title"] {
+    margin-bottom: 24px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin-bottom: 12px;
+    }
+
+    p {
+      margin-bottom: 12px;
+      color: var(--color-text);
+    }
+  }
+
+  [data-component="problem"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+    color: var(--color-text);
+
+    p {
+      margin-bottom: 24px;
+    }
+
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin-bottom: 16px;
+        display: flex;
+        gap: 12px;
+
+        span {
+          color: var(--color-icon);
+        }
+      }
+      li:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  [data-component="how"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+    color: var(--color-text);
+
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin-bottom: 16px;
+        display: flex;
+        gap: 12px;
+
+        span {
+          color: var(--color-icon);
+        }
+        strong {
+          font-weight: 500;
+          color: var(--color-text-strong);
+        }
+      }
+      li:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  [data-component="privacy"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+    color: var(--color-text);
+
+    [data-slot="privacy-title"] {
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text);
+        margin-bottom: 12px;
+      }
+
+      div {
+        display: flex;
+        gap: 12px;
+      }
+
+      p {
+      }
+
+      span {
+        color: var(--color-icon);
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+
+      div {
+        display: flex;
+        gap: 12px;
+      }
+    }
+  }
+
+  [data-component="email"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+    color: var(--color-text);
+
+    [data-slot="dock"] {
+      border-radius: 14px;
+      border: 0.5px solid rgba(176, 176, 176, 0.6);
+      background: #f2f1f0;
+      margin-bottom: 32px;
+      overflow: hidden;
+      height: 64px;
+      width: 185px;
+      box-shadow:
+        0 6px 80px 0 rgba(0, 0, 0, 0.05),
+        0 2.507px 33.422px 0 rgba(0, 0, 0, 0.04),
+        0 1.34px 17.869px 0 rgba(0, 0, 0, 0.03),
+        0 0.751px 10.017px 0 rgba(0, 0, 0, 0.03),
+        0 0.399px 5.32px 0 rgba(0, 0, 0, 0.02),
+        0 0.166px 2.214px 0 rgba(0, 0, 0, 0.01);
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        background: #312d2d;
+      }
+    }
+
+    [data-slot="form"] {
+      position: relative;
+
+      input {
+        background: var(--color-background-weak);
+        border-radius: 6px;
+        border: 1px solid var(--color-border-weak);
+        padding: 20px;
+        width: 100%;
+
+        /* Use color, not -moz-text-fill-color, for normal text */
+        color: var(--color-text-strong);
+
+        @media (max-width: 30rem) {
+          padding-bottom: 80px;
+        }
+
+        &:not(:focus) {
+          color: var(--color-text-strong);
+        }
+
+        &::placeholder {
+          color: var(--color-text-weak);
+          opacity: 1;
+        }
+
+        /* Optional legacy */
+        &::-moz-placeholder {
+          color: var(--color-text-weak);
+          opacity: 1;
+        }
+      }
+
+      input:focus {
+        background: var(--color-background-interactive-weaker);
+        outline: none;
+        border: none;
+        color: var(--color-text-strong);
+
+        border: 1px solid var(--color-background-strong); /* Tailwind blue-600 as example */
+
+        /* Tailwind-style ring */
+        box-shadow: 0 0 0 3px var(--color-background-interactive);
+        /* mimics "ring-2 ring-blue-600/50" */
+      }
+
+      button {
+        position: absolute;
+        height: 40px;
+        right: 12px;
+        background: var(--color-background-strong);
+        padding: 4px 20px;
+        color: var(--color-text-inverted);
+        border-radius: 4px;
+        font-weight: 500;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        top: 50%;
+        margin-top: -20px;
+
+        @media (max-width: 30rem) {
+          left: 20px;
+          right: 20px;
+          bottom: 20px;
+          top: auto;
+        }
+      }
+    }
+  }
+
+  [data-component="faq"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+
+    ul {
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin-bottom: 24px;
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+    }
+
+    [data-slot="faq-question"] {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 8px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+
+      [data-slot="faq-icon-plus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: block;
+        }
+        [data-expanded] & {
+          display: none;
+        }
+      }
+      [data-slot="faq-icon-minus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: none;
+        }
+        [data-expanded] & {
+          display: block;
+        }
+      }
+      [data-slot="faq-question-text"] {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+
+    [data-slot="faq-answer"] {
+      margin-left: 40px;
+      margin-bottom: 32px;
+    }
+  }
+
+  [data-component="testimonials"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: var(--vertical-padding) var(--padding);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    a {
+      text-decoration: none;
+    }
+
+    [data-slot="testimonial"] {
+      background: var(--color-background-weak);
+      border-radius: 6px;
+      border: 1px solid var(--color-border-weak);
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      @media (max-width: 30rem) {
+        flex-direction: column-reverse;
+        gap: 24px;
+      }
+
+      [data-slot="name"] {
+        display: flex;
+        gap: 16px;
+
+        strong {
+          font-weight: 500;
+          flex: 0 0 auto;
+        }
+
+        span {
+          color: var(--color-text);
+        }
+
+        @media (max-width: 30rem) {
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        span {
+          display: inline-block;
+        }
+
+        img {
+          height: 24px;
+          width: 24px;
+          border-radius: 24px;
+        }
+      }
+
+      [data-slot="quote"] {
+        margin-left: 40px;
+
+        @media (max-width: 30rem) {
+          margin-left: 0;
+        }
+        span {
+          color: var(--color-text);
+          text-decoration: none;
+        }
+      }
+    }
+
+    [data-slot="button"] {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: var(--color-text);
+      gap: var(--space-2-5);
+      font-size: 1rem;
+
+      @media (max-width: 24rem) {
+        font-size: 0.875rem;
+      }
+
+      strong {
+        color: var(--color-text-strong);
+        font-weight: 500;
+      }
+
+      @media (max-width: 40rem) {
+        justify-content: flex-start;
+      }
+
+      @media (max-width: 30rem) {
+        justify-content: center;
+      }
+    }
+  }
+
+  [data-component="copy-status"] {
+    @media (max-width: 38rem) {
+      display: none;
+    }
+
+    [data-slot="copy"] {
+      display: block;
+      width: var(--space-4);
+      height: var(--space-4);
+      color: var(--color-text-weaker);
+
+      [data-copied] & {
+        display: none;
+      }
+    }
+
+    [data-slot="check"] {
+      display: none;
+      width: var(--space-4);
+      height: var(--space-4);
+      color: var(--color-text-strong);
+
+      [data-copied] & {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="footer"] {
+    border-top: 1px solid var(--color-border-weak);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 65rem) {
+      border-bottom: 1px solid var(--color-border-weak);
+    }
+
+
+    [data-slot="cell"] {
+      flex: 1;
+      text-align: center;
+
+
+      a {
+        text-decoration: none;
+        padding: 2rem 0;
+        width: 100%;
+        display: block;
+
+        span {
+          color: var(--color-text-weak);
+
+          @media (max-width: 40rem) {
+            display: none;
+          }
+
+        }
+      }
+
+      a:hover {
+        background: var(--color-background-weak);
+        text-decoration: underline;
+        text-underline-offset: var(--space-1);
+        text-decoration-thickness: 1px;
+      }
+    }
+
+    [data-slot="cell"] + [data-slot="cell"] {
+      border-left: 1px solid var(--color-border-weak);
+
+      @media (max-width: 40rem) {
+        border-left: none;
+      }
+    }
+
+    /* Mobile: third column on its own row */
+    @media (max-width: 25rem) {
+      flex-wrap: wrap;
+
+      [data-slot="cell"] {
+        flex: 1 0 100%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-weak);
+      }
+
+      [data-slot="cell"]:nth-child(1) {
+        border-top: none;
+      }
+    }
+  }
+
+  [data-component="legal"] {
+    color: var(--color-text-weak);
+    text-align: center;
+
+    a {
+      color: var(--color-text-weak);
+      text-decoration: none;
+    }
+  }
+}

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

@@ -0,0 +1,339 @@
+import "./index.css"
+import { Title, Meta, Link } from "@solidjs/meta"
+import { HttpHeader } from "@solidjs/start"
+import zenLogoLight from "../../asset/zen-ornate-light.svg"
+import zenLogoDark from "../../asset/zen-ornate-dark.svg"
+import compareVideo from "../../asset/lander/opencode-comparison-min.mp4"
+import compareVideoPoster from "../../asset/lander/opencode-comparison-poster.png"
+import avatarDax from "../../asset/lander/avatar-dax.png"
+import avatarJay from "../../asset/lander/avatar-jay.png"
+import avatarFrank from "../../asset/lander/avatar-frank.png"
+import avatarAdam from "../../asset/lander/avatar-adam.png"
+import avatarDavid from "../../asset/lander/avatar-david.png"
+import { A, createAsync, query } from "@solidjs/router"
+import { getActor } from "~/context/auth"
+import { withActor } from "~/context/auth.withActor"
+import { Account } from "@opencode/console-core/account.js"
+import { EmailSignup } from "~/component/email-signup"
+import { Faq } from "~/component/faq"
+import { Legal } from "~/component/legal"
+import { Footer } from "~/component/footer"
+import { Header } from "~/component/header"
+
+const defaultWorkspace = query(async () => {
+  "use server"
+  const actor = await getActor()
+  if (actor.type === "account") {
+    const workspaces = await withActor(() => Account.workspaces())
+    return workspaces[0].id
+  }
+}, "defaultWorkspace")
+
+export default function Home() {
+  const workspace = createAsync(() => defaultWorkspace())
+
+  return (
+    <main data-page="zen">
+      <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
+      <Title>OpenCode Zen | A curated set of reliable optimized models for coding agents</Title>
+      <Link rel="icon" type="image/svg+xml" href="/favicon-zen.svg" />
+      <Meta property="og:image" content="/social-share-zen.png" />
+      <Meta name="twitter:image" content="/social-share-zen.png" />
+
+      <div data-component="container">
+        <Header zen />
+
+        <div data-component="content">
+          <section data-component="hero">
+            <div data-slot="hero-copy">
+              <img data-slot="zen logo light" src={zenLogoLight} alt="zen logo light" />
+              <img data-slot="zen logo dark" src={zenLogoDark} alt="zen logo dark" />
+              <strong>Reliable optimized models for coding agents</strong>
+              <p>
+                Zen gives you access to a curated set of AI models that OpenCode has tested and benchmarked specifically
+                for coding agents. No need to worry about inconsistent performance and quality, use validated models
+                that work.
+              </p>
+              <div data-slot="model-logos">
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <mask
+                      id="mask0_79_128586"
+                      style="mask-type:luminance"
+                      maskUnits="userSpaceOnUse"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                    >
+                      <path d="M23 1.5H1V22.2952H23V1.5Z" fill="white" />
+                    </mask>
+                    <g mask="url(#mask0_79_128586)">
+                      <path
+                        d="M9.43799 9.06943V7.09387C9.43799 6.92749 9.50347 6.80267 9.65601 6.71959L13.8206 4.43211C14.3875 4.1202 15.0635 3.9747 15.7611 3.9747C18.3775 3.9747 20.0347 5.9087 20.0347 7.96734C20.0347 8.11288 20.0347 8.27926 20.0128 8.44564L15.6956 6.03335C15.434 5.88785 15.1723 5.88785 14.9107 6.03335L9.43799 9.06943ZM19.1624 16.7637V12.0431C19.1624 11.7519 19.0315 11.544 18.7699 11.3984L13.2972 8.36234L15.0851 7.3849C15.2377 7.30182 15.3686 7.30182 15.5212 7.3849L19.6858 9.67238C20.8851 10.3379 21.6917 11.7519 21.6917 13.1243C21.6917 14.7047 20.7106 16.1604 19.1624 16.7636V16.7637ZM8.15158 12.6047L6.36369 11.6066C6.21114 11.5235 6.14566 11.3986 6.14566 11.2323V6.65735C6.14566 4.43233 7.93355 2.7478 10.3538 2.7478C11.2697 2.7478 12.1199 3.039 12.8396 3.55886L8.54424 5.92959C8.28268 6.07508 8.15181 6.28303 8.15181 6.57427V12.6049L8.15158 12.6047ZM12 14.7258L9.43799 13.3533V10.4421L12 9.06965L14.5618 10.4421V13.3533L12 14.7258ZM13.6461 21.0476C12.7303 21.0476 11.8801 20.7564 11.1604 20.2366L15.4557 17.8658C15.7173 17.7203 15.8482 17.5124 15.8482 17.2211V11.1905L17.658 12.1886C17.8105 12.2717 17.876 12.3965 17.876 12.563V17.1379C17.876 19.3629 16.0662 21.0474 13.6461 21.0474V21.0476ZM8.47863 16.4103L4.314 14.1229C3.11471 13.4573 2.30808 12.0433 2.30808 10.6709C2.30808 9.06965 3.31106 7.6348 4.85903 7.03168V11.773C4.85903 12.0642 4.98995 12.2721 5.25151 12.4177L10.7025 15.4328L8.91464 16.4103C8.76209 16.4934 8.63117 16.4934 8.47863 16.4103ZM8.23892 19.8207C5.77508 19.8207 3.96533 18.0531 3.96533 15.8696C3.96533 15.7032 3.98719 15.5368 4.00886 15.3704L8.30418 17.7412C8.56574 17.8867 8.82752 17.8867 9.08909 17.7412L14.5618 14.726V16.7015C14.5618 16.8679 14.4964 16.9927 14.3438 17.0758L10.1792 19.3633C9.61225 19.6752 8.93631 19.8207 8.23869 19.8207H8.23892ZM13.6461 22.2952C16.2844 22.2952 18.4865 20.5069 18.9882 18.1362C21.4301 17.5331 23 15.3495 23 13.1245C23 11.6688 22.346 10.2548 21.1685 9.23581C21.2775 8.79908 21.343 8.36234 21.343 7.92582C21.343 4.95215 18.8137 2.72691 15.892 2.72691C15.3034 2.72691 14.7365 2.80999 14.1695 2.99726C13.1882 2.08223 11.8364 1.5 10.3538 1.5C7.71557 1.5 5.51352 3.28829 5.01185 5.65902C2.56987 6.26214 1 8.44564 1 10.6707C1 12.1264 1.65404 13.5404 2.83147 14.5594C2.72246 14.9961 2.65702 15.4328 2.65702 15.8694C2.65702 18.8431 5.1863 21.0683 8.108 21.0683C8.69661 21.0683 9.26354 20.9852 9.83046 20.7979C10.8115 21.713 12.1634 22.2952 13.6461 22.2952Z"
+                        fill="currentColor"
+                      />
+                    </g>
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z" fill="currentColor" />
+                    <path
+                      d="M6.32538 13.6824L8.52662 8.01177L10.7279 13.6824H6.32538ZM6.68225 3.93164L0.25 20.0677H3.84652L5.16202 16.6791H11.8914L13.2067 20.0677H16.8033L10.371 3.93164H6.68225Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M9.16861 16.0529L17.2018 9.85156C17.5957 9.54755 18.1586 9.66612 18.3463 10.1384C19.3339 12.6288 18.8926 15.6217 16.9276 17.6766C14.9626 19.7314 12.2285 20.1821 9.72948 19.1557L6.9995 20.4775C10.9151 23.2763 15.6699 22.5841 18.6411 19.4749C20.9979 17.0103 21.7278 13.6508 21.0453 10.6214L21.0515 10.6278C20.0617 6.17736 21.2948 4.39847 23.8207 0.760904C23.8804 0.674655 23.9402 0.588405 24 0.5L20.6762 3.97585V3.96506L9.16658 16.0551"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M7.37742 16.7017C4.67579 14.0395 5.14158 9.91963 7.44676 7.54383C9.15135 5.78544 11.9442 5.06779 14.3821 6.12281L17.0005 4.87559C16.5288 4.52392 15.9242 4.14566 15.2305 3.87986C12.0948 2.54882 8.34069 3.21127 5.79171 5.8386C3.33985 8.36779 2.56881 12.2567 3.89286 15.5751C4.88192 18.0552 3.26056 19.8094 1.62731 21.5801C1.04853 22.2078 0.467774 22.8355 0 23.5L7.3754 16.7037"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M12.6043 1.34016C12.9973 2.03016 13.3883 2.72215 13.7783 3.41514C13.7941 3.44286 13.8169 3.46589 13.8445 3.48187C13.8721 3.49786 13.9034 3.50624 13.9353 3.50614H19.4873C19.6612 3.50614 19.8092 3.61614 19.9332 3.83314L21.3872 6.40311C21.5772 6.74011 21.6272 6.88111 21.4112 7.24011C21.1512 7.6701 20.8982 8.1041 20.6512 8.54009L20.2842 9.19809C20.1782 9.39409 20.0612 9.47809 20.2442 9.71008L22.8962 14.347C23.0682 14.648 23.0072 14.841 22.8532 15.117C22.4162 15.902 21.9712 16.681 21.5182 17.457C21.3592 17.729 21.1662 17.832 20.8382 17.827C20.0612 17.811 19.2863 17.817 18.5113 17.843C18.4946 17.8439 18.4785 17.8489 18.4644 17.8576C18.4502 17.8664 18.4385 17.8785 18.4303 17.893C17.5361 19.4773 16.6344 21.0573 15.7253 22.633C15.5563 22.926 15.3453 22.996 15.0003 22.997C14.0033 23 12.9983 23.001 11.9833 22.999C11.8889 22.9987 11.7961 22.9735 11.7145 22.9259C11.6328 22.8783 11.5652 22.8101 11.5184 22.728L10.1834 20.405C10.1756 20.3898 10.1637 20.3771 10.149 20.3684C10.1343 20.3598 10.1174 20.3554 10.1004 20.356H4.98244C4.69744 20.386 4.42944 20.355 4.17745 20.264L2.57447 17.494C2.52706 17.412 2.50193 17.319 2.50158 17.2243C2.50123 17.1296 2.52567 17.0364 2.57247 16.954L3.77945 14.834C3.79665 14.8041 3.80569 14.7701 3.80569 14.7355C3.80569 14.701 3.79665 14.667 3.77945 14.637C3.15073 13.5485 2.52573 12.4579 1.90448 11.3651L1.11449 9.97008C0.954488 9.66008 0.941489 9.47409 1.20949 9.00509C1.67448 8.1921 2.13647 7.38011 2.59647 6.56911C2.72847 6.33512 2.90046 6.23512 3.18046 6.23412C4.04344 6.23048 4.90644 6.23015 5.76943 6.23312C5.79123 6.23295 5.81259 6.22704 5.83138 6.21597C5.85016 6.20491 5.8657 6.1891 5.87643 6.17012L8.68239 1.27516C8.72491 1.2007 8.78631 1.13875 8.86039 1.09556C8.93448 1.05238 9.01863 1.02948 9.10439 1.02917C9.62838 1.02817 10.1574 1.02917 10.6874 1.02317L11.7044 1.00017C12.0453 0.997165 12.4283 1.03217 12.6043 1.34016ZM9.17238 1.74316C9.16185 1.74315 9.15149 1.74592 9.14236 1.75119C9.13323 1.75645 9.12565 1.76403 9.12038 1.77316L6.25442 6.78811C6.24066 6.81174 6.22097 6.83137 6.19729 6.84505C6.17361 6.85873 6.14677 6.86599 6.11942 6.86611H3.25346C3.19746 6.86611 3.18346 6.89111 3.21246 6.94011L9.02239 17.096C9.04739 17.138 9.03539 17.158 8.98839 17.159L6.19342 17.174C6.15256 17.1727 6.11214 17.1828 6.07678 17.2033C6.04141 17.2238 6.01253 17.2539 5.99342 17.29L4.67344 19.6C4.62944 19.678 4.65244 19.718 4.74144 19.718L10.4574 19.726C10.5034 19.726 10.5374 19.746 10.5614 19.787L11.9643 22.241C12.0103 22.322 12.0563 22.323 12.1033 22.241L17.1093 13.481L17.8923 12.0991C17.897 12.0905 17.904 12.0834 17.9125 12.0785C17.9209 12.0735 17.9305 12.0709 17.9403 12.0709C17.9501 12.0709 17.9597 12.0735 17.9681 12.0785C17.9765 12.0834 17.9835 12.0905 17.9883 12.0991L19.4123 14.629C19.4229 14.648 19.4385 14.6637 19.4573 14.6746C19.4761 14.6855 19.4975 14.6912 19.5193 14.691L22.2822 14.671C22.2893 14.6711 22.2963 14.6693 22.3024 14.6658C22.3086 14.6623 22.3137 14.6572 22.3172 14.651C22.3206 14.6449 22.3224 14.638 22.3224 14.631C22.3224 14.624 22.3206 14.6172 22.3172 14.611L19.4173 9.52508C19.4068 9.50809 19.4013 9.48853 19.4013 9.46859C19.4013 9.44864 19.4068 9.42908 19.4173 9.41209L19.7102 8.90509L20.8302 6.92811C20.8542 6.88711 20.8422 6.86611 20.7952 6.86611H9.20038C9.14138 6.86611 9.12738 6.84011 9.15738 6.78911L10.5914 4.28413C10.6021 4.26706 10.6078 4.24731 10.6078 4.22714C10.6078 4.20697 10.6021 4.18721 10.5914 4.17014L9.22538 1.77416C9.22016 1.7647 9.21248 1.75682 9.20315 1.75137C9.19382 1.74591 9.18319 1.74307 9.17238 1.74316ZM15.4623 9.76308C15.5083 9.76308 15.5203 9.78308 15.4963 9.82308L14.6643 11.2881L12.0513 15.873C12.0464 15.8819 12.0392 15.8894 12.0304 15.8945C12.0216 15.8996 12.0115 15.9022 12.0013 15.902C11.9912 15.902 11.9813 15.8993 11.9725 15.8942C11.9637 15.8891 11.9564 15.8818 11.9513 15.873L8.49839 9.84108C8.47839 9.80708 8.48839 9.78908 8.52639 9.78708L8.74239 9.77508L15.4643 9.76308H15.4623Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M12.6241 11.346L20.3848 3.44816C20.5309 3.29931 20.4487 3 20.2601 3H16.0842C16.0388 3 15.9949 3.01897 15.9594 3.05541L7.59764 11.5629C7.46721 11.6944 7.27446 11.5771 7.27446 11.3666V3.25183C7.27446 3.11242 7.18515 3 7.07594 3H4.19843C4.08932 3 4 3.11242 4 3.25183V20.7482C4 20.8876 4.08932 21 4.19843 21H7.07594C7.18515 21 7.27446 20.8876 7.27446 20.7482V17.1834C7.27446 17.1073 7.30136 17.0344 7.34815 16.987L9.94075 14.3486C10.0031 14.2853 10.0895 14.2757 10.159 14.3232L17.0934 19.5573C18.2289 20.3412 19.4975 20.8226 20.786 20.9652C20.9008 20.9778 21 20.8606 21 20.7133V17.3559C21 17.2276 20.9249 17.1232 20.8243 17.1073C20.0659 16.9853 19.326 16.6845 18.6569 16.222L12.6538 11.764C12.5291 11.6785 12.5135 11.4584 12.6241 11.346Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <a href="/auth">
+                <span>Get started with Zen </span>
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div data-slot="pricing-copy">
+              <p>
+                <strong>Add $20 Pay as you go balance</strong> <span>(+$1.23 card processing fee)</span>
+              </p>
+              <p>Use with any agent. Set monthly spend limits. Cancel any time.</p>
+            </div>
+          </section>
+
+          <section data-component="comparison">
+            <video src={compareVideo} autoplay playsinline loop muted preload="auto" poster={compareVideoPoster}>
+              Your browser does not support the video tag.
+            </video>
+          </section>
+
+          <section data-component="problem">
+            <div data-slot="section-title">
+              <h3>What problem is Zen solving?</h3>
+              <p>
+                There are so many models available, but only a few work well with coding agents.  Most providers configure them differently with varying results.
+              </p>
+            </div>
+            <p>We're fixing this for everyone, not just OpenCode users.</p>
+            <ul>
+              <li>
+                <span>[*]</span> Testing select models and consulting their teams
+              </li>
+              <li>
+                <span>[*]</span> Working with providers to ensure they’re delivered properly
+              </li>
+              <li>
+                <span>[*]</span> Benchmarking all model-provider combinations we recommend
+              </li>
+            </ul>
+          </section>
+
+          <section data-component="how">
+            <div data-slot="section-title">
+              <h3>How Zen works</h3>
+              <p>While we suggest you use Zen with OpenCode, you can use Zen with any agent.</p>
+            </div>
+            <ul>
+              <li>
+                <span>[1]</span>
+                <div>
+                  <strong>Sign up and add $20 balance</strong> - follow the{" "}
+                  <a href="/docs/zen/#how-it-works" title="setup instructions">
+                    setup instructions
+                  </a>
+                </div>
+              </li>
+              <li>
+                <span>[2]</span>
+                <div>
+                  <strong>Use Zen with transparent pricing</strong> - <a href="/docs/zen/#pricing">pay per request</a>{" "}
+                  with zero markups
+                </div>
+              </li>
+              <li>
+                <span>[3]</span>
+                <div>
+                  <strong>Auto-top up</strong> - when your balance reaches $5 we’ll automatically add $20
+                </div>
+              </li>
+            </ul>
+          </section>
+
+          <section data-component="privacy">
+            <div data-slot="privacy-title">
+              <h3>Your privacy is important to us</h3>
+              <div>
+                <span>[*]</span>
+                <p>
+                  All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+                  for model training, with the <a href="/docs/zen/#privacy">following exceptions</a>.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="testimonials">
+            {/*Dax*/}
+            <a href="https://x.com/thdxr/status/1973531687629017227">
+              <div data-slot="testimonial">
+                <div data-slot="name">
+                  <img src={avatarDax} alt="" />
+                  <strong>Dax Raad</strong>
+                  <span>ex-CEO, Terminal Products</span>
+                </div>
+                <div data-slot="quote"><span>@OpenCode</span> Zen has been life
+                  changing, it's truly a no-brainer.
+                </div>
+              </div>
+            </a>
+            {/*Jay*/}
+            <a href="https://x.com/jayair/status/1973530190870618456">
+              <div data-slot="testimonial">
+                <div data-slot="name">
+                  <img src={avatarJay} alt="" />
+                  <strong>Jay V</strong>
+                  <span>ex-Founder, SEED, PM, Melt, Pop, Dapt, Cadmus, and ViewPoint</span>
+                </div>
+                <div data-slot="quote">
+                  4 out of 5 people on our team love using <span>@OpenCode</span> Zen.
+                </div>
+              </div>
+            </a>
+            {/*Adam*/}
+            <a href="https://x.com/adamdotdev/status/1973732040718860563">
+              <div data-slot="testimonial">
+                <div data-slot="name">
+                  <img src={avatarAdam} alt="" />
+                  <strong>Adam Elmore</strong>
+                  <span>ex-Hero, AWS</span>
+                </div>
+                <div data-slot="quote">
+                  I can't recommend <span>@OpenCode</span> Zen enough. Seriously, it’s really good.
+                </div>
+              </div>
+            </a>
+            {/*David*/}
+            <a href="https://x.com/iamdavidhill/status/1973530568773214622">
+              <div data-slot="testimonial">
+                <div data-slot="name">
+                  <img src={avatarDavid} alt="" />
+                  <strong>David Hill</strong>
+                  <span>ex-Head of Design, Laravel</span>
+                </div>
+                <div data-slot="quote">
+                  With <span>@OpenCode</span> Zen I know all the models are tested and perfect for coding agents.
+                </div>
+              </div>
+            </a>
+            {/*Frank*/}
+            <a href="https://x.com/fanjiewang/status/1973530092736487756">
+              <div data-slot="testimonial">
+                <div data-slot="name">
+                  <img src={avatarFrank} alt="" />
+                  <strong>Frank Wang</strong>
+                  <span>ex-Intern, Nvidia (4 times)</span>
+                </div>
+                <div data-slot="quote">I wish I was still at Nvidia.</div>
+              </div>
+            </a>
+          </section>
+
+          <section data-component="faq">
+            <div data-slot="section-title">
+              <h3>FAQ</h3>
+            </div>
+            <ul>
+              <li>
+                <Faq question="What is OpenCode Zen?">
+                  Zen is a curated set of AI models tested and benchmarked for coding agents created by the team behind
+                  OpenCode.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="What makes Zen more accurate?">
+                  Zen only provides models that have been specifically tested and benchmarked for coding agents. You
+                  wouldn’t use a butter knife to cut steak, don’t use poor models for coding.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Is Zen cheaper?">
+                  Zen is not for profit. Zen passes through the costs from the model providers to you. The higher Zen’s
+                  usage the more OpenCode can negotiate better rates and pass those to you.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="How much does Zen cost?">
+                  Zen <a href="/docs/zen/#pricing">charges per request</a> with zero markups, so you pay exactly what
+                  the model provider charges. Your total cost depends on usage, and you can set monthly spend limits in
+                  your <a href="/auth">account</a>. To cover costs, OpenCode adds only a small payment processing fee of
+                  $1.23 per $20 balance top-up.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="What about data and privacy?">
+                  All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+                  for model training, with the <a href="/docs/zen/#privacy">following exceptions</a>.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Can I set spend limits?">Yes, you can set monthly spending limits in your account.</Faq>
+              </li>
+              <li>
+                <Faq question="Can I cancel?">
+                  Yes, you can disable billing at any time and use your remaining balance.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Can I use Zen with other coding agents?">
+                  While Zen works great with OpenCode, you can use Zen with any agent. Follow the setup instructions in
+                  your preferred coding agent.
+                </Faq>
+              </li>
+            </ul>
+          </section>
+
+          <EmailSignup />
+
+          <Footer />
+        </div>
+      </div>
+
+      <Legal />
+    </main>
+  )
+}

packages/console/app/src/style/base.css

@@ -7,3 +7,15 @@ html {
 body {
   font-family: var(--font-sans);
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

packages/console/app/sst-env.d.ts

@@ -6,4 +6,4 @@
 /// <reference path="../../../sst-env.d.ts" />
 
 import "sst"
-export {}
+export {}

packages/console/core/migrations/0018_nervous_iron_lad.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `user` ADD `time_joined` timestamp(3);--> statement-breakpoint
+ALTER TABLE `user` ADD `role` enum('admin','member');

packages/console/core/migrations/0019_dazzling_cable.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` MODIFY COLUMN `role` enum('admin','member') NOT NULL;

packages/console/core/migrations/0020_supreme_jack_power.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` DROP COLUMN `time_joined`;

packages/console/core/migrations/0021_flawless_clea.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `user` MODIFY COLUMN `email` varchar(255);--> statement-breakpoint
+ALTER TABLE `user` ADD `old_email` varchar(255);

packages/console/core/migrations/0022_nice_dreadnoughts.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `user` ADD `account_id` varchar(30);--> statement-breakpoint
+ALTER TABLE `user` ADD `old_account_id` varchar(30);--> statement-breakpoint
+ALTER TABLE `user` ADD CONSTRAINT `user_account_id` UNIQUE(`workspace_id`,`account_id`);

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

@@ -0,0 +1,702 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "e9c91c2d-787d-4234-b98d-1620e4ce80e1",
+  "prevId": "100a21cf-ff9c-476f-bf7d-100c1824b2b2",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "name": {
+          "name": "name",
+          "columns": [
+            "workspace_id",
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_joined": {
+          "name": "time_joined",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

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

@@ -0,0 +1,702 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "a2bb7222-561c-45f0-8939-8ef9b8e57bb3",
+  "prevId": "e9c91c2d-787d-4234-b98d-1620e4ce80e1",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "name": {
+          "name": "name",
+          "columns": [
+            "workspace_id",
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_joined": {
+          "name": "time_joined",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

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

@@ -0,0 +1,695 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "908437f9-54ed-4c83-b555-614926e326f8",
+  "prevId": "a2bb7222-561c-45f0-8939-8ef9b8e57bb3",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "name": {
+          "name": "name",
+          "columns": [
+            "workspace_id",
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}

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

@@ -0,0 +1,702 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "14616ba2-c21e-4787-a289-f2a3eb6de04f",
+  "prevId": "908437f9-54ed-4c83-b555-614926e326f8",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "name": {
+          "name": "name",
+          "columns": [
+            "workspace_id",
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "old_email": {
+          "name": "old_email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}