release: v0.15.27

only generate user message summary if no diffs
wip: desktop work
2026-07-17 12:56:41 +02:00 · 2025-10-29 18:41:24 +00:00 · 2025-10-29 14:28:43 -04:00 · 2025-10-29 16:59:45 +00:00 · 2025-10-29 16:59:45 +00:00 · 2025-10-29 16:16:56 +00:00
519 changed files with 38620 additions and 5758 deletions
@@ -0,0 +1,59 @@
+name: Bug report
+description: Report an issue that should be fixed
+labels: ["bug"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Describe the bug you encountered
+      placeholder: What happened?
+    validations:
+      required: true
+
+  - type: input
+    id: opencode-version
+    attributes:
+      label: OpenCode version
+      description: What version of OpenCode are you using?
+    validations:
+      required: false
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: How can we reproduce this issue?
+      placeholder: |
+        1.
+        2.
+        3.
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshot-or-link
+    attributes:
+      label: Screenshot and/or share link
+      description: Run `/share` to get a share link, or attach a screenshot
+      placeholder: Paste link or drag and drop screenshot here
+    validations:
+      required: false
+
+  - type: input
+    id: os
+    attributes:
+      label: Operating System
+      description: what OS are you using?
+      placeholder: e.g., macOS 26.0.1, Ubuntu 22.04, Windows 11
+    validations:
+      required: false
+
+  - type: input
+    id: terminal
+    attributes:
+      label: Terminal
+      description: what terminal are you using?
+      placeholder: e.g., iTerm2, Ghostty, Alacritty, Windows Terminal
+    validations:
+      required: false
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 💬 Discord Community
+    url: https://discord.gg/opencode
+    about: For quick questions or real-time discussion. Note that issues are searchable and help others with the same question.
@@ -0,0 +1,20 @@
+name: 🚀 Feature Request
+description: Suggest an idea, feature, or enhancement
+labels: [discussion]
+title: "[FEATURE]:"
+
+body:
+  - type: checkboxes
+    id: verified
+    attributes:
+      label: Feature hasn't been suggested before.
+      options:
+        - label: I have verified this feature I'm about to request hasn't been suggested before.
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the enhancement you want to request
+      description: What do you want to change or add? What are the benefits of implementing this? Try to be detailed so we can understand your request better :)
+    validations:
+      required: true
@@ -0,0 +1,11 @@
+name: Question
+description: Ask a question
+labels: ["question"]
+body:
+  - type: textarea
+    id: question
+    attributes:
+      label: Question
+      description: What's your question?
+    validations:
+      required: true
@@ -0,0 +1,71 @@
+#
+# This file is intentionally in the wrong dir, will move and add later....
+#
+
+# name: publish-python-sdk
+
+# on:
+#   release:
+#     types: [published]
+#   workflow_dispatch:
+
+# jobs:
+#   publish:
+#     runs-on: ubuntu-latest
+#     permissions:
+#       contents: read
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v4
+
+#       - name: Setup Bun
+#         uses: oven-sh/setup-bun@v1
+#         with:
+#           bun-version: 1.2.21
+
+#       - name: Install dependencies (JS/Bun)
+#         run: bun install
+
+#       - name: Install uv
+#         shell: bash
+#         run: curl -LsSf https://astral.sh/uv/install.sh | sh
+
+#       - name: Generate Python SDK from OpenAPI (CLI)
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv run --project packages/sdk/python python packages/sdk/python/scripts/generate.py --source cli
+
+#       - name: Sync Python dependencies
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv sync --dev --project packages/sdk/python
+
+#       - name: Set version from release tag
+#         shell: bash
+#         run: |
+#           TAG="${GITHUB_REF_NAME:-}"
+#           if [ -z "$TAG" ]; then
+#             TAG="$(git describe --tags --abbrev=0 || echo 0.0.0)"
+#           fi
+#           echo "Using version: $TAG"
+#           VERSION="$TAG" ~/.local/bin/uv run --project packages/sdk/python python - <<'PY'
+# import os, re, pathlib
+# root = pathlib.Path('packages/sdk/python')
+# pt = (root / 'pyproject.toml').read_text()
+# version = os.environ.get('VERSION','0.0.0').lstrip('v')
+# pt = re.sub(r'(?m)^(version\s*=\s*")[^"]+("\s*)$', f"\\1{version}\\2", pt)
+# (root / 'pyproject.toml').write_text(pt)
+# # Also update generator config override for consistency
+# cfgp = root / 'openapi-python-client.yaml'
+# if cfgp.exists():
+#     cfg = cfgp.read_text()
+#     cfg = re.sub(r'(?m)^(package_version_override:\s*)\S+$', f"\\1{version}", cfg)
+#     cfgp.write_text(cfg)
+# PY
+
+#       - name: Build and publish to PyPI
+#         env:
+#           PYPI_TOKEN: ${{ secrets.PYPI_API_TOKEN }}
+#         shell: bash
+#         run: |
+#           ~/.local/bin/uv run --project packages/sdk/python python packages/sdk/python/scripts/publish.py
@@ -24,6 +24,10 @@ jobs:
      - run: git fetch --force --tags
      - run: bun install -g @vscode/vsce

+      - name: Install extension dependencies
+        run: bun install
+        working-directory: ./sdks/vscode
+
      - name: Publish
        run: |
          ./script/publish
@@ -53,13 +53,17 @@ jobs:
      - name: Install OpenCode
        run: curl -fsSL https://opencode.ai/install | bash

+      - name: Setup npm auth
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+
      - name: Publish
        run: |
          ./script/publish.ts
        env:
          OPENCODE_BUMP: ${{ inputs.bump }}
          OPENCODE_CHANNEL: latest
+          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
          AUR_KEY: ${{ secrets.AUR_KEY }}
-          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
          OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
@@ -0,0 +1,68 @@
+# Contributing to OpenCode
+
+We want to make it easy for you to contribute to OpenCode. Here are the most common type of changes that get merged:
+
+- Bug fixes
+- Additional LSPs / Formatters
+- Improvements to LLM performance
+- Support for new providers
+- Fixes for environment-specific quirks
+- Missing standard behavior
+- Documentation improvements
+
+However, any UI or core product feature must go through a design review with the core team before implementation.
+
+If you are unsure if a PR would be accepted, feel free to ask a maintainer or look for issues with any of the following labels:
+
+- [`help wanted`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3Ahelp-wanted)
+- [`good first issue`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22good%20first%20issue%22)
+- [`bug`](https://github.com/sst/opencode/issues?q=is%3Aissue%20state%3Aopen%20label%3Abug)
+- [`perf`](https://github.com/sst/opencode/issues?q=is%3Aopen%20is%3Aissue%20label%3A%22perf%22)
+
+> [!NOTE]
+> PRs that ignore these guardrails will likely be closed.
+
+Want to take on an issue? Leave a comment and a maintainer may assign it to you unless it is something we are already working on.
+
+## Developing OpenCode
+
+- Requirements: Bun 1.3+, Go 1.24.x.
+- Install dependencies and start the dev server from the repo root:
+
+  ```bash
+  bun install
+  bun dev
+  ```
+
+- Core pieces:
+  - `packages/opencode`: OpenCode core business logic & server.
+  - `packages/tui`: The TUI code, written in Go (will be removed soon in favor of [opentui](https://github.com/sst/opentui))
+  - `packages/plugin`: Source for `@opencode-ai/plugin`
+
+> [!NOTE]
+> After touching `packages/opencode/src/server/server.ts`, the OpenCode team must regenerate the Stainless SDK before any client updates merge.
+
+## Pull Request Expectations
+
+- Try to keep pull requests small and focused.
+- Link relevant issue(s) in the description
+- Explain the issue and why your change fixes it
+- Avoid having verbose LLM generated PR descriptions
+- Before adding new functions or functionality, ensure that such behavior doesn't already exist elsewhere in the codebase.
+
+### Style Preferences
+
+These are not strictly enforced, they are just general guidelines:
+
+- **Functions:** Keep logic within a single function unless breaking it out adds clear reuse or composition benefits.
+- **Destructuring:** Do not do unnecessary destructuring of variables.
+- **Control flow:** Avoid `else` statements.
+- **Error handling:** Prefer `.catch(...)` instead of `try`/`catch` when possible.
+- **Types:** Reach for precise types and avoid `any`.
+- **Variables:** Stick to immutable patterns and avoid `let`.
+- **Naming:** Choose concise single-word identifiers when they remain descriptive.
+- **Runtime APIs:** Use Bun helpers such as `Bun.file()` when they fit the use case.
+
+## Feature Requests
+
+For net-new functionality, start with a design conversation. Open an issue describing the problem, your proposed approach (optional), and why it belongs in OpenCode. The core team will help decide whether it should move forward; please wait for that approval instead of opening a feature PR directly.
@@ -26,6 +26,8 @@ curl -fsSL https://opencode.ai/install | bash

 # Package managers
 npm i -g opencode-ai@latest        # or bun/pnpm/yarn
+scoop bucket add extras; scoop install extras/opencode  # Windows
+choco install opencode             # Windows
 brew install sst/tap/opencode      # macOS and Linux
 paru -S opencode-bin               # Arch Linux
 ```
@@ -54,41 +56,7 @@ For more info on how to configure OpenCode [**head over to our docs**](https://o

 ### Contributing

-OpenCode is an opinionated tool so any fundamental feature needs to go through a
-design process with the core team.
-
-> [!IMPORTANT]
-> We do not accept PRs for core features.
-
-However we still merge a ton of PRs - you can contribute:
-
- Bug fixes
- Improvements to LLM performance
- Support for new providers
- Fixes for env specific quirks
- Missing standard behavior
- Documentation
-
-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.
-
- Bun 1.3 or higher
- Golang 1.24.x
-
-And run.
-
-```bash
-$ bun install
-$ 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.
+If you're interested in contributing to OpenCode, please read our [contributing docs](./CONTRIBUTING.md) before submitting a pull request.

 ### FAQ

@@ -1,112 +1,125 @@
 # Download Stats

-| Date       | GitHub Downloads  | npm Downloads     | Total             |
-| ---------- | ----------------- | ----------------- | ----------------- |
-| 2025-06-29 | 18,789 (+0)       | 39,420 (+0)       | 58,209 (+0)       |
-| 2025-06-30 | 20,127 (+1,338)   | 41,059 (+1,639)   | 61,186 (+2,977)   |
-| 2025-07-01 | 22,108 (+1,981)   | 43,745 (+2,686)   | 65,853 (+4,667)   |
-| 2025-07-02 | 24,814 (+2,706)   | 46,168 (+2,423)   | 70,982 (+5,129)   |
-| 2025-07-03 | 27,834 (+3,020)   | 49,955 (+3,787)   | 77,789 (+6,807)   |
-| 2025-07-04 | 30,608 (+2,774)   | 54,758 (+4,803)   | 85,366 (+7,577)   |
-| 2025-07-05 | 32,524 (+1,916)   | 58,371 (+3,613)   | 90,895 (+5,529)   |
-| 2025-07-06 | 33,766 (+1,242)   | 59,694 (+1,323)   | 93,460 (+2,565)   |
-| 2025-07-08 | 38,052 (+4,286)   | 64,468 (+4,774)   | 102,520 (+9,060)  |
-| 2025-07-09 | 40,924 (+2,872)   | 67,935 (+3,467)   | 108,859 (+6,339)  |
-| 2025-07-10 | 43,796 (+2,872)   | 71,402 (+3,467)   | 115,198 (+6,339)  |
-| 2025-07-11 | 46,982 (+3,186)   | 77,462 (+6,060)   | 124,444 (+9,246)  |
-| 2025-07-12 | 49,302 (+2,320)   | 82,177 (+4,715)   | 131,479 (+7,035)  |
-| 2025-07-13 | 50,803 (+1,501)   | 86,394 (+4,217)   | 137,197 (+5,718)  |
-| 2025-07-14 | 53,283 (+2,480)   | 87,860 (+1,466)   | 141,143 (+3,946)  |
-| 2025-07-15 | 57,590 (+4,307)   | 91,036 (+3,176)   | 148,626 (+7,483)  |
-| 2025-07-16 | 62,313 (+4,723)   | 95,258 (+4,222)   | 157,571 (+8,945)  |
-| 2025-07-17 | 66,684 (+4,371)   | 100,048 (+4,790)  | 166,732 (+9,161)  |
-| 2025-07-18 | 70,379 (+3,695)   | 102,587 (+2,539)  | 172,966 (+6,234)  |
-| 2025-07-19 | 73,497 (+3,117)   | 105,904 (+3,317)  | 179,401 (+6,434)  |
-| 2025-07-20 | 76,453 (+2,956)   | 109,044 (+3,140)  | 185,497 (+6,096)  |
-| 2025-07-21 | 80,197 (+3,744)   | 113,537 (+4,493)  | 193,734 (+8,237)  |
-| 2025-07-22 | 84,251 (+4,054)   | 118,073 (+4,536)  | 202,324 (+8,590)  |
-| 2025-07-23 | 88,589 (+4,338)   | 121,436 (+3,363)  | 210,025 (+7,701)  |
-| 2025-07-24 | 92,469 (+3,880)   | 124,091 (+2,655)  | 216,560 (+6,535)  |
-| 2025-07-25 | 96,417 (+3,948)   | 126,985 (+2,894)  | 223,402 (+6,842)  |
-| 2025-07-26 | 100,646 (+4,229)  | 131,411 (+4,426)  | 232,057 (+8,655)  |
-| 2025-07-27 | 102,644 (+1,998)  | 134,736 (+3,325)  | 237,380 (+5,323)  |
-| 2025-07-28 | 105,446 (+2,802)  | 136,016 (+1,280)  | 241,462 (+4,082)  |
-| 2025-07-29 | 108,998 (+3,552)  | 137,542 (+1,526)  | 246,540 (+5,078)  |
-| 2025-07-30 | 113,544 (+4,546)  | 140,317 (+2,775)  | 253,861 (+7,321)  |
-| 2025-07-31 | 118,339 (+4,795)  | 143,344 (+3,027)  | 261,683 (+7,822)  |
-| 2025-08-01 | 123,539 (+5,200)  | 146,680 (+3,336)  | 270,219 (+8,536)  |
-| 2025-08-02 | 127,864 (+4,325)  | 149,236 (+2,556)  | 277,100 (+6,881)  |
-| 2025-08-03 | 131,397 (+3,533)  | 150,451 (+1,215)  | 281,848 (+4,748)  |
-| 2025-08-04 | 136,266 (+4,869)  | 153,260 (+2,809)  | 289,526 (+7,678)  |
-| 2025-08-05 | 141,596 (+5,330)  | 155,752 (+2,492)  | 297,348 (+7,822)  |
-| 2025-08-06 | 147,067 (+5,471)  | 158,309 (+2,557)  | 305,376 (+8,028)  |
-| 2025-08-07 | 152,591 (+5,524)  | 160,889 (+2,580)  | 313,480 (+8,104)  |
-| 2025-08-08 | 158,187 (+5,596)  | 163,448 (+2,559)  | 321,635 (+8,155)  |
-| 2025-08-09 | 162,770 (+4,583)  | 165,721 (+2,273)  | 328,491 (+6,856)  |
-| 2025-08-10 | 165,695 (+2,925)  | 167,109 (+1,388)  | 332,804 (+4,313)  |
-| 2025-08-11 | 169,297 (+3,602)  | 167,953 (+844)    | 337,250 (+4,446)  |
-| 2025-08-12 | 176,307 (+7,010)  | 171,876 (+3,923)  | 348,183 (+10,933) |
-| 2025-08-13 | 182,997 (+6,690)  | 177,182 (+5,306)  | 360,179 (+11,996) |
-| 2025-08-14 | 189,063 (+6,066)  | 179,741 (+2,559)  | 368,804 (+8,625)  |
-| 2025-08-15 | 193,608 (+4,545)  | 181,792 (+2,051)  | 375,400 (+6,596)  |
-| 2025-08-16 | 198,118 (+4,510)  | 184,558 (+2,766)  | 382,676 (+7,276)  |
-| 2025-08-17 | 201,299 (+3,181)  | 186,269 (+1,711)  | 387,568 (+4,892)  |
-| 2025-08-18 | 204,559 (+3,260)  | 187,399 (+1,130)  | 391,958 (+4,390)  |
-| 2025-08-19 | 209,814 (+5,255)  | 189,668 (+2,269)  | 399,482 (+7,524)  |
-| 2025-08-20 | 214,497 (+4,683)  | 191,481 (+1,813)  | 405,978 (+6,496)  |
-| 2025-08-21 | 220,465 (+5,968)  | 194,784 (+3,303)  | 415,249 (+9,271)  |
-| 2025-08-22 | 225,899 (+5,434)  | 197,204 (+2,420)  | 423,103 (+7,854)  |
-| 2025-08-23 | 229,005 (+3,106)  | 199,238 (+2,034)  | 428,243 (+5,140)  |
-| 2025-08-24 | 232,098 (+3,093)  | 201,157 (+1,919)  | 433,255 (+5,012)  |
-| 2025-08-25 | 236,607 (+4,509)  | 202,650 (+1,493)  | 439,257 (+6,002)  |
-| 2025-08-26 | 242,783 (+6,176)  | 205,242 (+2,592)  | 448,025 (+8,768)  |
-| 2025-08-27 | 248,409 (+5,626)  | 205,242 (+0)      | 453,651 (+5,626)  |
-| 2025-08-28 | 252,796 (+4,387)  | 205,242 (+0)      | 458,038 (+4,387)  |
-| 2025-08-29 | 256,045 (+3,249)  | 211,075 (+5,833)  | 467,120 (+9,082)  |
-| 2025-08-30 | 258,863 (+2,818)  | 212,397 (+1,322)  | 471,260 (+4,140)  |
-| 2025-08-31 | 262,004 (+3,141)  | 213,944 (+1,547)  | 475,948 (+4,688)  |
-| 2025-09-01 | 265,359 (+3,355)  | 215,115 (+1,171)  | 480,474 (+4,526)  |
-| 2025-09-02 | 270,483 (+5,124)  | 217,075 (+1,960)  | 487,558 (+7,084)  |
-| 2025-09-03 | 274,793 (+4,310)  | 219,755 (+2,680)  | 494,548 (+6,990)  |
-| 2025-09-04 | 280,430 (+5,637)  | 222,103 (+2,348)  | 502,533 (+7,985)  |
-| 2025-09-05 | 283,769 (+3,339)  | 223,793 (+1,690)  | 507,562 (+5,029)  |
-| 2025-09-06 | 286,245 (+2,476)  | 225,036 (+1,243)  | 511,281 (+3,719)  |
-| 2025-09-07 | 288,623 (+2,378)  | 225,866 (+830)    | 514,489 (+3,208)  |
-| 2025-09-08 | 293,341 (+4,718)  | 227,073 (+1,207)  | 520,414 (+5,925)  |
-| 2025-09-09 | 300,036 (+6,695)  | 229,788 (+2,715)  | 529,824 (+9,410)  |
-| 2025-09-10 | 307,287 (+7,251)  | 233,435 (+3,647)  | 540,722 (+10,898) |
-| 2025-09-11 | 314,083 (+6,796)  | 237,356 (+3,921)  | 551,439 (+10,717) |
-| 2025-09-12 | 321,046 (+6,963)  | 240,728 (+3,372)  | 561,774 (+10,335) |
-| 2025-09-13 | 324,894 (+3,848)  | 245,539 (+4,811)  | 570,433 (+8,659)  |
-| 2025-09-14 | 328,876 (+3,982)  | 248,245 (+2,706)  | 577,121 (+6,688)  |
-| 2025-09-15 | 334,201 (+5,325)  | 250,983 (+2,738)  | 585,184 (+8,063)  |
-| 2025-09-16 | 342,609 (+8,408)  | 255,264 (+4,281)  | 597,873 (+12,689) |
-| 2025-09-17 | 351,117 (+8,508)  | 260,970 (+5,706)  | 612,087 (+14,214) |
-| 2025-09-18 | 358,717 (+7,600)  | 266,922 (+5,952)  | 625,639 (+13,552) |
-| 2025-09-19 | 365,401 (+6,684)  | 271,859 (+4,937)  | 637,260 (+11,621) |
-| 2025-09-20 | 372,092 (+6,691)  | 276,917 (+5,058)  | 649,009 (+11,749) |
-| 2025-09-21 | 377,079 (+4,987)  | 280,261 (+3,344)  | 657,340 (+8,331)  |
-| 2025-09-22 | 382,492 (+5,413)  | 284,009 (+3,748)  | 666,501 (+9,161)  |
-| 2025-09-23 | 387,008 (+4,516)  | 289,129 (+5,120)  | 676,137 (+9,636)  |
-| 2025-09-24 | 393,325 (+6,317)  | 294,927 (+5,798)  | 688,252 (+12,115) |
-| 2025-09-25 | 398,879 (+5,554)  | 301,663 (+6,736)  | 700,542 (+12,290) |
-| 2025-09-26 | 404,334 (+5,455)  | 306,713 (+5,050)  | 711,047 (+10,505) |
-| 2025-09-27 | 411,618 (+7,284)  | 317,763 (+11,050) | 729,381 (+18,334) |
-| 2025-09-28 | 414,910 (+3,292)  | 322,522 (+4,759)  | 737,432 (+8,051)  |
-| 2025-09-29 | 419,919 (+5,009)  | 328,033 (+5,511)  | 747,952 (+10,520) |
-| 2025-09-30 | 427,991 (+8,072)  | 336,472 (+8,439)  | 764,463 (+16,511) |
-| 2025-10-01 | 433,591 (+5,600)  | 341,742 (+5,270)  | 775,333 (+10,870) |
-| 2025-10-02 | 440,852 (+7,261)  | 348,099 (+6,357)  | 788,951 (+13,618) |
-| 2025-10-03 | 446,829 (+5,977)  | 359,937 (+11,838) | 806,766 (+17,815) |
-| 2025-10-04 | 452,561 (+5,732)  | 370,386 (+10,449) | 822,947 (+16,181) |
-| 2025-10-05 | 455,559 (+2,998)  | 374,745 (+4,359)  | 830,304 (+7,357)  |
-| 2025-10-06 | 460,927 (+5,368)  | 379,489 (+4,744)  | 840,416 (+10,112) |
-| 2025-10-07 | 467,336 (+6,409)  | 385,438 (+5,949)  | 852,774 (+12,358) |
-| 2025-10-08 | 474,643 (+7,307)  | 394,139 (+8,701)  | 868,782 (+16,008) |
-| 2025-10-09 | 479,203 (+4,560)  | 400,526 (+6,387)  | 879,729 (+10,947) |
-| 2025-10-10 | 484,374 (+5,171)  | 406,015 (+5,489)  | 890,389 (+10,660) |
-| 2025-10-11 | 488,427 (+4,053)  | 414,699 (+8,684)  | 903,126 (+12,737) |
-| 2025-10-12 | 492,125 (+3,698)  | 418,745 (+4,046)  | 910,870 (+7,744)  |
-| 2025-10-14 | 505,130 (+13,005) | 429,286 (+10,541) | 934,416 (+23,546) |
-| 2025-10-15 | 512,717 (+7,587)  | 439,290 (+10,004) | 952,007 (+17,591) |
-| 2025-10-16 | 517,719 (+5,002)  | 447,137 (+7,847)  | 964,856 (+12,849) |
+| Date       | GitHub Downloads  | npm Downloads     | Total               |
+| ---------- | ----------------- | ----------------- | ------------------- |
+| 2025-06-29 | 18,789 (+0)       | 39,420 (+0)       | 58,209 (+0)         |
+| 2025-06-30 | 20,127 (+1,338)   | 41,059 (+1,639)   | 61,186 (+2,977)     |
+| 2025-07-01 | 22,108 (+1,981)   | 43,745 (+2,686)   | 65,853 (+4,667)     |
+| 2025-07-02 | 24,814 (+2,706)   | 46,168 (+2,423)   | 70,982 (+5,129)     |
+| 2025-07-03 | 27,834 (+3,020)   | 49,955 (+3,787)   | 77,789 (+6,807)     |
+| 2025-07-04 | 30,608 (+2,774)   | 54,758 (+4,803)   | 85,366 (+7,577)     |
+| 2025-07-05 | 32,524 (+1,916)   | 58,371 (+3,613)   | 90,895 (+5,529)     |
+| 2025-07-06 | 33,766 (+1,242)   | 59,694 (+1,323)   | 93,460 (+2,565)     |
+| 2025-07-08 | 38,052 (+4,286)   | 64,468 (+4,774)   | 102,520 (+9,060)    |
+| 2025-07-09 | 40,924 (+2,872)   | 67,935 (+3,467)   | 108,859 (+6,339)    |
+| 2025-07-10 | 43,796 (+2,872)   | 71,402 (+3,467)   | 115,198 (+6,339)    |
+| 2025-07-11 | 46,982 (+3,186)   | 77,462 (+6,060)   | 124,444 (+9,246)    |
+| 2025-07-12 | 49,302 (+2,320)   | 82,177 (+4,715)   | 131,479 (+7,035)    |
+| 2025-07-13 | 50,803 (+1,501)   | 86,394 (+4,217)   | 137,197 (+5,718)    |
+| 2025-07-14 | 53,283 (+2,480)   | 87,860 (+1,466)   | 141,143 (+3,946)    |
+| 2025-07-15 | 57,590 (+4,307)   | 91,036 (+3,176)   | 148,626 (+7,483)    |
+| 2025-07-16 | 62,313 (+4,723)   | 95,258 (+4,222)   | 157,571 (+8,945)    |
+| 2025-07-17 | 66,684 (+4,371)   | 100,048 (+4,790)  | 166,732 (+9,161)    |
+| 2025-07-18 | 70,379 (+3,695)   | 102,587 (+2,539)  | 172,966 (+6,234)    |
+| 2025-07-19 | 73,497 (+3,117)   | 105,904 (+3,317)  | 179,401 (+6,434)    |
+| 2025-07-20 | 76,453 (+2,956)   | 109,044 (+3,140)  | 185,497 (+6,096)    |
+| 2025-07-21 | 80,197 (+3,744)   | 113,537 (+4,493)  | 193,734 (+8,237)    |
+| 2025-07-22 | 84,251 (+4,054)   | 118,073 (+4,536)  | 202,324 (+8,590)    |
+| 2025-07-23 | 88,589 (+4,338)   | 121,436 (+3,363)  | 210,025 (+7,701)    |
+| 2025-07-24 | 92,469 (+3,880)   | 124,091 (+2,655)  | 216,560 (+6,535)    |
+| 2025-07-25 | 96,417 (+3,948)   | 126,985 (+2,894)  | 223,402 (+6,842)    |
+| 2025-07-26 | 100,646 (+4,229)  | 131,411 (+4,426)  | 232,057 (+8,655)    |
+| 2025-07-27 | 102,644 (+1,998)  | 134,736 (+3,325)  | 237,380 (+5,323)    |
+| 2025-07-28 | 105,446 (+2,802)  | 136,016 (+1,280)  | 241,462 (+4,082)    |
+| 2025-07-29 | 108,998 (+3,552)  | 137,542 (+1,526)  | 246,540 (+5,078)    |
+| 2025-07-30 | 113,544 (+4,546)  | 140,317 (+2,775)  | 253,861 (+7,321)    |
+| 2025-07-31 | 118,339 (+4,795)  | 143,344 (+3,027)  | 261,683 (+7,822)    |
+| 2025-08-01 | 123,539 (+5,200)  | 146,680 (+3,336)  | 270,219 (+8,536)    |
+| 2025-08-02 | 127,864 (+4,325)  | 149,236 (+2,556)  | 277,100 (+6,881)    |
+| 2025-08-03 | 131,397 (+3,533)  | 150,451 (+1,215)  | 281,848 (+4,748)    |
+| 2025-08-04 | 136,266 (+4,869)  | 153,260 (+2,809)  | 289,526 (+7,678)    |
+| 2025-08-05 | 141,596 (+5,330)  | 155,752 (+2,492)  | 297,348 (+7,822)    |
+| 2025-08-06 | 147,067 (+5,471)  | 158,309 (+2,557)  | 305,376 (+8,028)    |
+| 2025-08-07 | 152,591 (+5,524)  | 160,889 (+2,580)  | 313,480 (+8,104)    |
+| 2025-08-08 | 158,187 (+5,596)  | 163,448 (+2,559)  | 321,635 (+8,155)    |
+| 2025-08-09 | 162,770 (+4,583)  | 165,721 (+2,273)  | 328,491 (+6,856)    |
+| 2025-08-10 | 165,695 (+2,925)  | 167,109 (+1,388)  | 332,804 (+4,313)    |
+| 2025-08-11 | 169,297 (+3,602)  | 167,953 (+844)    | 337,250 (+4,446)    |
+| 2025-08-12 | 176,307 (+7,010)  | 171,876 (+3,923)  | 348,183 (+10,933)   |
+| 2025-08-13 | 182,997 (+6,690)  | 177,182 (+5,306)  | 360,179 (+11,996)   |
+| 2025-08-14 | 189,063 (+6,066)  | 179,741 (+2,559)  | 368,804 (+8,625)    |
+| 2025-08-15 | 193,608 (+4,545)  | 181,792 (+2,051)  | 375,400 (+6,596)    |
+| 2025-08-16 | 198,118 (+4,510)  | 184,558 (+2,766)  | 382,676 (+7,276)    |
+| 2025-08-17 | 201,299 (+3,181)  | 186,269 (+1,711)  | 387,568 (+4,892)    |
+| 2025-08-18 | 204,559 (+3,260)  | 187,399 (+1,130)  | 391,958 (+4,390)    |
+| 2025-08-19 | 209,814 (+5,255)  | 189,668 (+2,269)  | 399,482 (+7,524)    |
+| 2025-08-20 | 214,497 (+4,683)  | 191,481 (+1,813)  | 405,978 (+6,496)    |
+| 2025-08-21 | 220,465 (+5,968)  | 194,784 (+3,303)  | 415,249 (+9,271)    |
+| 2025-08-22 | 225,899 (+5,434)  | 197,204 (+2,420)  | 423,103 (+7,854)    |
+| 2025-08-23 | 229,005 (+3,106)  | 199,238 (+2,034)  | 428,243 (+5,140)    |
+| 2025-08-24 | 232,098 (+3,093)  | 201,157 (+1,919)  | 433,255 (+5,012)    |
+| 2025-08-25 | 236,607 (+4,509)  | 202,650 (+1,493)  | 439,257 (+6,002)    |
+| 2025-08-26 | 242,783 (+6,176)  | 205,242 (+2,592)  | 448,025 (+8,768)    |
+| 2025-08-27 | 248,409 (+5,626)  | 205,242 (+0)      | 453,651 (+5,626)    |
+| 2025-08-28 | 252,796 (+4,387)  | 205,242 (+0)      | 458,038 (+4,387)    |
+| 2025-08-29 | 256,045 (+3,249)  | 211,075 (+5,833)  | 467,120 (+9,082)    |
+| 2025-08-30 | 258,863 (+2,818)  | 212,397 (+1,322)  | 471,260 (+4,140)    |
+| 2025-08-31 | 262,004 (+3,141)  | 213,944 (+1,547)  | 475,948 (+4,688)    |
+| 2025-09-01 | 265,359 (+3,355)  | 215,115 (+1,171)  | 480,474 (+4,526)    |
+| 2025-09-02 | 270,483 (+5,124)  | 217,075 (+1,960)  | 487,558 (+7,084)    |
+| 2025-09-03 | 274,793 (+4,310)  | 219,755 (+2,680)  | 494,548 (+6,990)    |
+| 2025-09-04 | 280,430 (+5,637)  | 222,103 (+2,348)  | 502,533 (+7,985)    |
+| 2025-09-05 | 283,769 (+3,339)  | 223,793 (+1,690)  | 507,562 (+5,029)    |
+| 2025-09-06 | 286,245 (+2,476)  | 225,036 (+1,243)  | 511,281 (+3,719)    |
+| 2025-09-07 | 288,623 (+2,378)  | 225,866 (+830)    | 514,489 (+3,208)    |
+| 2025-09-08 | 293,341 (+4,718)  | 227,073 (+1,207)  | 520,414 (+5,925)    |
+| 2025-09-09 | 300,036 (+6,695)  | 229,788 (+2,715)  | 529,824 (+9,410)    |
+| 2025-09-10 | 307,287 (+7,251)  | 233,435 (+3,647)  | 540,722 (+10,898)   |
+| 2025-09-11 | 314,083 (+6,796)  | 237,356 (+3,921)  | 551,439 (+10,717)   |
+| 2025-09-12 | 321,046 (+6,963)  | 240,728 (+3,372)  | 561,774 (+10,335)   |
+| 2025-09-13 | 324,894 (+3,848)  | 245,539 (+4,811)  | 570,433 (+8,659)    |
+| 2025-09-14 | 328,876 (+3,982)  | 248,245 (+2,706)  | 577,121 (+6,688)    |
+| 2025-09-15 | 334,201 (+5,325)  | 250,983 (+2,738)  | 585,184 (+8,063)    |
+| 2025-09-16 | 342,609 (+8,408)  | 255,264 (+4,281)  | 597,873 (+12,689)   |
+| 2025-09-17 | 351,117 (+8,508)  | 260,970 (+5,706)  | 612,087 (+14,214)   |
+| 2025-09-18 | 358,717 (+7,600)  | 266,922 (+5,952)  | 625,639 (+13,552)   |
+| 2025-09-19 | 365,401 (+6,684)  | 271,859 (+4,937)  | 637,260 (+11,621)   |
+| 2025-09-20 | 372,092 (+6,691)  | 276,917 (+5,058)  | 649,009 (+11,749)   |
+| 2025-09-21 | 377,079 (+4,987)  | 280,261 (+3,344)  | 657,340 (+8,331)    |
+| 2025-09-22 | 382,492 (+5,413)  | 284,009 (+3,748)  | 666,501 (+9,161)    |
+| 2025-09-23 | 387,008 (+4,516)  | 289,129 (+5,120)  | 676,137 (+9,636)    |
+| 2025-09-24 | 393,325 (+6,317)  | 294,927 (+5,798)  | 688,252 (+12,115)   |
+| 2025-09-25 | 398,879 (+5,554)  | 301,663 (+6,736)  | 700,542 (+12,290)   |
+| 2025-09-26 | 404,334 (+5,455)  | 306,713 (+5,050)  | 711,047 (+10,505)   |
+| 2025-09-27 | 411,618 (+7,284)  | 317,763 (+11,050) | 729,381 (+18,334)   |
+| 2025-09-28 | 414,910 (+3,292)  | 322,522 (+4,759)  | 737,432 (+8,051)    |
+| 2025-09-29 | 419,919 (+5,009)  | 328,033 (+5,511)  | 747,952 (+10,520)   |
+| 2025-09-30 | 427,991 (+8,072)  | 336,472 (+8,439)  | 764,463 (+16,511)   |
+| 2025-10-01 | 433,591 (+5,600)  | 341,742 (+5,270)  | 775,333 (+10,870)   |
+| 2025-10-02 | 440,852 (+7,261)  | 348,099 (+6,357)  | 788,951 (+13,618)   |
+| 2025-10-03 | 446,829 (+5,977)  | 359,937 (+11,838) | 806,766 (+17,815)   |
+| 2025-10-04 | 452,561 (+5,732)  | 370,386 (+10,449) | 822,947 (+16,181)   |
+| 2025-10-05 | 455,559 (+2,998)  | 374,745 (+4,359)  | 830,304 (+7,357)    |
+| 2025-10-06 | 460,927 (+5,368)  | 379,489 (+4,744)  | 840,416 (+10,112)   |
+| 2025-10-07 | 467,336 (+6,409)  | 385,438 (+5,949)  | 852,774 (+12,358)   |
+| 2025-10-08 | 474,643 (+7,307)  | 394,139 (+8,701)  | 868,782 (+16,008)   |
+| 2025-10-09 | 479,203 (+4,560)  | 400,526 (+6,387)  | 879,729 (+10,947)   |
+| 2025-10-10 | 484,374 (+5,171)  | 406,015 (+5,489)  | 890,389 (+10,660)   |
+| 2025-10-11 | 488,427 (+4,053)  | 414,699 (+8,684)  | 903,126 (+12,737)   |
+| 2025-10-12 | 492,125 (+3,698)  | 418,745 (+4,046)  | 910,870 (+7,744)    |
+| 2025-10-14 | 505,130 (+13,005) | 429,286 (+10,541) | 934,416 (+23,546)   |
+| 2025-10-15 | 512,717 (+7,587)  | 439,290 (+10,004) | 952,007 (+17,591)   |
+| 2025-10-16 | 517,719 (+5,002)  | 447,137 (+7,847)  | 964,856 (+12,849)   |
+| 2025-10-17 | 526,239 (+8,520)  | 457,467 (+10,330) | 983,706 (+18,850)   |
+| 2025-10-18 | 531,564 (+5,325)  | 465,272 (+7,805)  | 996,836 (+13,130)   |
+| 2025-10-19 | 536,209 (+4,645)  | 469,078 (+3,806)  | 1,005,287 (+8,451)  |
+| 2025-10-20 | 541,264 (+5,055)  | 472,952 (+3,874)  | 1,014,216 (+8,929)  |
+| 2025-10-21 | 548,721 (+7,457)  | 479,703 (+6,751)  | 1,028,424 (+14,208) |
+| 2025-10-22 | 557,949 (+9,228)  | 491,395 (+11,692) | 1,049,344 (+20,920) |
+| 2025-10-23 | 564,716 (+6,767)  | 498,736 (+7,341)  | 1,063,452 (+14,108) |
+| 2025-10-24 | 572,692 (+7,976)  | 506,905 (+8,169)  | 1,079,597 (+16,145) |
+| 2025-10-25 | 578,927 (+6,235)  | 516,129 (+9,224)  | 1,095,056 (+15,459) |
+| 2025-10-26 | 584,409 (+5,482)  | 521,179 (+5,050)  | 1,105,588 (+10,532) |
+| 2025-10-27 | 589,999 (+5,590)  | 526,001 (+4,822)  | 1,116,000 (+10,412) |
+| 2025-10-28 | 595,776 (+5,777)  | 532,438 (+6,437)  | 1,128,214 (+12,214) |
+| 2025-10-29 | 606,259 (+10,483) | 542,064 (+9,626)  | 1,148,323 (+20,109) |
@@ -104,7 +104,7 @@ To test locally:
   - `MODEL`: The model used by opencode. Same as the `MODEL` defined in the GitHub workflow.
   - `ANTHROPIC_API_KEY`: Your model provider API key. Same as the keys defined in the GitHub workflow.
   - `GITHUB_RUN_ID`: Dummy value to emulate GitHub action environment.
-   - `MOCK_TOKEN`: A GitHub persontal access token. This token is used to verify you have `admin` or `write` access to the test repo. Generate a token [here](https://github.com/settings/personal-access-tokens).
+   - `MOCK_TOKEN`: A GitHub personal access token. This token is used to verify you have `admin` or `write` access to the test repo. Generate a token [here](https://github.com/settings/personal-access-tokens).
   - `MOCK_EVENT`: Mock GitHub event payload (see templates below).
   - `/path/to/opencode`: Path to your cloned opencode repo. `bun /path/to/opencode/github/index.ts` runs your local version of `opencode`.

@@ -118,7 +118,7 @@ Replace:

 - `"owner":"sst"` with repo owner
 - `"repo":"hello-world"` with repo name
- `"actor":"fwang"` with the GitHub username of commentor
+- `"actor":"fwang"` with the GitHub username of commenter
 - `"number":4` with the GitHub issue id
 - `"body":"hey opencode, summarize thread"` with comment body

@@ -3,6 +3,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 ADMIN_SECRET = new sst.Secret("ADMIN_SECRET")
 const bucket = new sst.cloudflare.Bucket("Bucket")

 export const api = new sst.cloudflare.Worker("Api", {
@@ -12,7 +13,7 @@ export const api = new sst.cloudflare.Worker("Api", {
    WEB_DOMAIN: domain,
  },
  url: true,
-  link: [bucket, GITHUB_APP_ID, GITHUB_APP_PRIVATE_KEY],
+  link: [bucket, GITHUB_APP_ID, GITHUB_APP_PRIVATE_KEY, ADMIN_SECRET],
  transform: {
    worker: (args) => {
      args.logpush = true
@@ -96,6 +96,7 @@ download_and_install() {
    curl -# -L -o "$filename" "$url"
    unzip -q "$filename"
    mv opencode "$INSTALL_DIR"
+    chmod 755 "${INSTALL_DIR}/opencode"
    cd .. && rm -rf opencodetmp
 }

@@ -25,6 +25,7 @@
      "@tsconfig/bun": "1.0.9",
      "@cloudflare/workers-types": "4.20251008.0",
      "@openauthjs/openauth": "0.0.0-20250322224806",
+      "@pierre/precision-diffs": "0.3.6",
      "@solidjs/meta": "0.29.4",
      "@tailwindcss/vite": "4.1.11",
      "diff": "8.0.2",
@@ -37,7 +38,9 @@
      "zod": "4.1.8",
      "remeda": "2.26.0",
      "solid-js": "1.9.9",
+      "solid-list": "0.3.0",
      "tailwindcss": "4.1.11",
+      "virtua": "0.42.3",
      "vite": "7.1.4",
      "vite-plugin-solid": "2.11.8"
    }
@@ -50,8 +53,8 @@
    "turbo": "2.5.6"
  },
  "dependencies": {
-    "@opencode-ai/sdk": "workspace:*",
-    "@opencode-ai/script": "workspace:*"
+    "@opencode-ai/script": "workspace:*",
+    "@opencode-ai/sdk": "workspace:*"
  },
  "repository": {
    "type": "git",
@@ -60,7 +63,7 @@
  "license": "MIT",
  "prettier": {
    "semi": false,
-    "printWidth": 120
+    "printWidth": 100
  },
  "trustedDependencies": [
    "esbuild",
@@ -7,7 +7,7 @@
    "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
    "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
    "start": "vinxi start",
-    "version": "0.15.7"
+    "version": "0.15.27"
  },
  "dependencies": {
    "@ibm/plex": "6.4.1",
@@ -4,11 +4,9 @@ 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"
-import { queryIsLoggedIn } from "~/routes/workspace/common"

 export function Header(props: { zen?: boolean }) {
  const githubData = createAsync(() => github())
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
  const starCount = createMemo(() =>
    githubData()?.stars
      ? new Intl.NumberFormat("en-US", {
@@ -38,10 +36,13 @@ export function Header(props: { zen?: boolean }) {
          <li>
            <a href="/docs">Docs</a>
          </li>
+          <li>
+            <A href="/enterprise">Enterprise</A>
+          </li>
          <li>
            <Switch>
              <Match when={props.zen}>
-                <a href="/auth">{isLoggedIn() ? "Workspace" : "Login"}</a>
+                <a href="/auth">Login</a>
              </Match>
              <Match when={!props.zen}>
                <A href="/zen">Zen</A>
@@ -109,10 +110,13 @@ export function Header(props: { zen?: boolean }) {
                <li>
                  <a href="/docs">Docs</a>
                </li>
+                <li>
+                  <A href="/enterprise">Enterprise</A>
+                </li>
                <li>
                  <Switch>
                    <Match when={props.zen}>
-                      <a href="/auth">{isLoggedIn() ? "Workspace" : "Login"}</a>
+                      <a href="/auth">Login</a>
                    </Match>
                    <Match when={!props.zen}>
                      <A href="/zen">Zen</A>
@@ -1,5 +1,5 @@
 import { getRequestEvent } from "solid-js/web"
-import { and, Database, eq, inArray, sql } from "@opencode-ai/console-core/drizzle/index.js"
+import { and, Database, eq, inArray, isNull, sql } from "@opencode-ai/console-core/drizzle/index.js"
 import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { redirect } from "@solidjs/router"
 import { Actor } from "@opencode-ai/console-core/actor.js"
@@ -56,7 +56,13 @@ export const getActor = async (workspace?: string): Promise<Actor.Info> => {
        tx
          .select()
          .from(UserTable)
-          .where(and(eq(UserTable.workspaceID, workspace), inArray(UserTable.accountID, accounts)))
+          .where(
+            and(
+              eq(UserTable.workspaceID, workspace),
+              isNull(UserTable.timeDeleted),
+              inArray(UserTable.accountID, accounts),
+            ),
+          )
          .limit(1)
          .execute()
          .then((x) => x[0]),
@@ -0,0 +1,50 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { AWS } from "@opencode-ai/console-core/aws.js"
+
+interface EnterpriseFormData {
+  name: string
+  role: string
+  email: string
+  message: string
+}
+
+export async function POST(event: APIEvent) {
+  try {
+    const body = (await event.request.json()) as EnterpriseFormData
+
+    // Validate required fields
+    if (!body.name || !body.role || !body.email || !body.message) {
+      return Response.json({ error: "All fields are required" }, { status: 400 })
+    }
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(body.email)) {
+      return Response.json({ error: "Invalid email format" }, { status: 400 })
+    }
+
+    // Create email content
+    const emailContent = `
+New Enterprise Inquiry
+
+Name: ${body.name}
+Role: ${body.role}
+Email: ${body.email}
+
+Message:
+${body.message}
+    `.trim()
+
+    // Send email using AWS SES
+    await AWS.sendEmail({
+      to: "enterprise@opencode.ai",
+      subject: `Enterprise Inquiry from ${body.name}`,
+      body: emailContent,
+    })
+
+    return Response.json({ success: true, message: "Form submitted successfully" }, { status: 200 })
+  } catch (error) {
+    console.error("Error processing enterprise form:", error)
+    return Response.json({ error: "Internal server error" }, { status: 500 })
+  }
+}
@@ -1,30 +1,11 @@
-import { Actor } from "@opencode-ai/console-core/actor.js"
-import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
-import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
-import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
 import { redirect } from "@solidjs/router"
 import type { APIEvent } from "@solidjs/start/server"
-import { withActor } from "~/context/auth.withActor"
+import { getLastSeenWorkspaceID } from "../workspace/common"

 export async function GET(input: APIEvent) {
  try {
-    const workspaces = await withActor(async () => {
-      const actor = Actor.assert("account")
-      return Database.transaction(async (tx) =>
-        tx
-          .select({ id: WorkspaceTable.id })
-          .from(UserTable)
-          .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
-          .where(
-            and(
-              eq(UserTable.accountID, actor.properties.accountID),
-              isNull(UserTable.timeDeleted),
-              isNull(WorkspaceTable.timeDeleted),
-            ),
-          ),
-      )
-    })
-    return redirect(`/workspace/${workspaces[0].id}`)
+    const workspaceID = await getLastSeenWorkspaceID()
+    return redirect(`/workspace/${workspaceID}`)
  } catch {
    return redirect("/auth/authorize")
  }
@@ -0,0 +1,544 @@
+::selection {
+  background: var(--color-background-interactive);
+  color: var(--color-text-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-background-interactive);
+    color: var(--color-text-inverted);
+  }
+}
+
+
+[data-page="enterprise"] {
+  --color-background: hsl(0, 20%, 99%);
+  --color-background-weak: hsl(0, 8%, 97%);
+  --color-background-weak-hover: hsl(0, 8%, 94%);
+  --color-background-strong: hsl(0, 5%, 12%);
+  --color-background-strong-hover: hsl(0, 5%, 18%);
+  --color-background-interactive: hsl(62, 84%, 88%);
+  --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+  --color-text: hsl(0, 1%, 39%);
+  --color-text-weak: hsl(0, 1%, 60%);
+  --color-text-weaker: hsl(30, 2%, 81%);
+  --color-text-strong: hsl(0, 5%, 12%);
+  --color-text-inverted: hsl(0, 20%, 99%);
+  --color-text-success: hsl(119, 100%, 35%);
+
+  --color-border: hsl(30, 2%, 81%);
+  --color-border-weak: hsl(0, 1%, 85%);
+
+  --color-icon: hsl(0, 1%, 55%);
+  --color-success: hsl(142, 76%, 36%);
+
+  background: var(--color-background);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  padding-bottom: 5rem;
+
+  @media (prefers-color-scheme: dark) {
+    --color-background: hsl(0, 9%, 7%);
+    --color-background-weak: hsl(0, 6%, 10%);
+    --color-background-weak-hover: hsl(0, 6%, 15%);
+    --color-background-strong: hsl(0, 15%, 94%);
+    --color-background-strong-hover: hsl(0, 15%, 97%);
+    --color-background-interactive: hsl(62, 100%, 90%);
+    --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+    --color-text: hsl(0, 4%, 71%);
+    --color-text-weak: hsl(0, 2%, 49%);
+    --color-text-weaker: hsl(0, 3%, 28%);
+    --color-text-strong: hsl(0, 15%, 94%);
+    --color-text-inverted: hsl(0, 9%, 7%);
+    --color-text-success: hsl(119, 60%, 72%);
+
+
+    --color-border: hsl(0, 3%, 28%);
+    --color-border-weak: hsl(0, 4%, 23%);
+
+    --color-icon: hsl(10, 3%, 43%);
+    --color-success: hsl(142, 76%, 46%);
+  }
+
+  /* Header and Footer styles - copied from index.css */
+  [data-component="top"] {
+    padding: 24px 5rem;
+    height: 80px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--color-background);
+    border-bottom: 1px solid var(--color-border-weak);
+    z-index: 10;
+
+    @media (max-width: 60rem) {
+      padding: 24px 1.5rem;
+    }
+
+    img {
+      height: 34px;
+      width: auto;
+    }
+
+    [data-component="nav-desktop"] {
+      ul {
+        display: flex;
+        justify-content: space-between;
+        gap: 48px;
+        li {
+          display: inline-block;
+          a {
+            text-decoration: none;
+            span {
+              color: var(--color-text-weak);
+            }
+          }
+          a:hover {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+            text-decoration-thickness: 1px;
+          }
+        }
+      }
+
+      @media (max-width: 40rem) {
+        display: none;
+      }
+    }
+
+    [data-component="nav-mobile"] {
+      button > svg {
+        color: var(--color-icon);
+      }
+    }
+
+    [data-component="nav-mobile-toggle"] {
+      border: none;
+      background: none;
+      outline: none;
+      height: 40px;
+      width: 40px;
+      cursor: pointer;
+      margin-right: -8px;
+    }
+
+    [data-component="nav-mobile-toggle"]:hover {
+      background: var(--color-background-weak);
+    }
+
+    [data-component="nav-mobile"] {
+      display: none;
+
+      @media (max-width: 40rem) {
+        display: block;
+
+        [data-component="nav-mobile-icon"] {
+          cursor: pointer;
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-component="nav-mobile-menu-list"] {
+          position: fixed;
+          background: var(--color-background);
+          top: 80px;
+          left: 0;
+          right: 0;
+          height: 100vh;
+
+          ul {
+            list-style: none;
+            padding: 20px 0;
+
+            li {
+              a {
+                text-decoration: none;
+                padding: 20px;
+                display: block;
+
+                span {
+                  color: var(--color-text-weak);
+                }
+              }
+
+              a:hover {
+                background: var(--color-background-weak);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    [data-slot="logo dark"] {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-slot="logo light"] {
+        display: none;
+      }
+      [data-slot="logo dark"] {
+        display: block;
+      }
+    }
+  }
+
+  [data-component="footer"] {
+    border-top: 1px solid var(--color-border-weak);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 65rem) {
+      border-bottom: 1px solid var(--color-border-weak);
+    }
+
+    [data-slot="cell"] {
+      flex: 1;
+      text-align: center;
+
+      a {
+        text-decoration: none;
+        padding: 2rem 0;
+        width: 100%;
+        display: block;
+
+        span {
+          color: var(--color-text-weak);
+
+          @media (max-width: 40rem) {
+            display: none;
+          }
+        }
+      }
+
+      a:hover {
+        background: var(--color-background-weak);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-thickness: 1px;
+      }
+    }
+
+    [data-slot="cell"] + [data-slot="cell"] {
+      border-left: 1px solid var(--color-border-weak);
+
+      @media (max-width: 40rem) {
+        border-left: none;
+      }
+    }
+
+    /* Mobile: third column on its own row */
+    @media (max-width: 25rem) {
+      flex-wrap: wrap;
+
+      [data-slot="cell"] {
+        flex: 1 0 100%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-weak);
+      }
+
+      [data-slot="cell"]:nth-child(1) {
+        border-top: none;
+      }
+    }
+  }
+
+  [data-component="container"] {
+    max-width: 67.5rem;
+    margin: 0 auto;
+    border: 1px solid var(--color-border-weak);
+    border-top: none;
+
+    @media (max-width: 65rem) {
+      border: none;
+    }
+  }
+
+  [data-component="content"] {
+  }
+
+  [data-component="enterprise-content"] {
+    padding: 4rem 0;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 0;
+    }
+  }
+
+  [data-component="enterprise-columns"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    padding: 4rem 5rem;
+
+    @media (max-width: 80rem) {
+      gap: 3rem;
+    }
+
+    @media (max-width: 60rem) {
+      grid-template-columns: 1fr;
+      gap: 3rem;
+      padding: 2rem 1.5rem;
+    }
+  }
+
+  [data-component="enterprise-column-1"] {
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+      margin: 2rem 0 1rem 0;
+    }
+
+    p {
+      line-height: 1.6;
+      margin-bottom: 1.5rem;
+      color: var(--color-text);
+    }
+
+    [data-component="testimonial"] {
+      margin-top: 4rem;
+      font-weight: 500;
+      color: var(--color-text-strong);
+
+      [data-component="quotation"] {
+        svg {
+          margin-bottom: 1rem;
+          opacity: 20%;
+        }
+      }
+
+      [data-component="testimonial-logo"] {
+        svg {
+          margin-top: 1.5rem;
+        }
+      }
+    }
+  }
+
+  [data-component="enterprise-column-2"] {
+    [data-component="enterprise-form"] {
+      padding: 0;
+
+      h2 {
+        font-size: 1.5rem;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 1.5rem;
+      }
+
+      [data-component="form-group"] {
+        margin-bottom: 1.5rem;
+
+        label {
+          display: block;
+          font-weight: 500;
+          color: var(--color-text-weak);
+          margin-bottom: 0.5rem;
+          font-size: 0.875rem;
+        }
+
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus,
+        input:-webkit-autofill:active {
+          transition: background-color 5000000s ease-in-out 0s;
+        }
+
+        input:-webkit-autofill {
+          -webkit-text-fill-color: var(--color-text-strong) !important;
+        }
+
+        input:-moz-autofill {
+          -moz-text-fill-color: var(--color-text-strong) !important;
+        }
+
+        input,
+        textarea {
+          width: 100%;
+          padding: 0.75rem;
+          border: 1px solid var(--color-border-weak);
+          border-radius: 4px;
+          background: var(--color-background-weak);
+          color: var(--color-text-strong);
+          font-family: inherit;
+
+          &::placeholder {
+            color: var(--color-text-weak);
+          }
+
+          &:focus {
+            background: var(--color-background-interactive-weaker);
+            outline: none;
+            border: none;
+            color: var(--color-text-strong);
+            border: 1px solid var(--color-background-strong);
+            box-shadow: 0 0 0 3px var(--color-background-interactive);
+
+            @media (prefers-color-scheme: dark) {
+              box-shadow: none;
+              border: 1px solid var(--color-background-interactive)
+            }
+          }
+        }
+
+        textarea {
+          resize: vertical;
+          min-height: 120px;
+        }
+      }
+
+      [data-component="submit-button"] {
+        padding: 0.5rem 1.5rem;
+        background: var(--color-background-strong);
+        color: var(--color-text-inverted);
+        border: none;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        &:hover:not(:disabled) {
+          background: var(--color-background-strong-hover);
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
+
+      [data-component="success-message"] {
+        margin-top: 1rem;
+        padding: 1rem 0;
+        color: var(--color-text-success);
+        text-align: left;
+      }
+    }
+  }
+
+  [data-component="faq"] {
+    border-top: 1px solid var(--color-border-weak);
+    padding: 4rem 5rem;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    [data-slot="section-title"] {
+      margin-bottom: 24px;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--color-text-strong);
+        margin-bottom: 12px;
+      }
+
+      p {
+        margin-bottom: 12px;
+        color: var(--color-text);
+      }
+    }
+
+    ul {
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin-bottom: 24px;
+        line-height: 200%;
+
+        @media (max-width: 60rem) {
+          line-height: 180%;
+        }
+      }
+    }
+
+    [data-slot="faq-question"] {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 8px;
+      color: var(--color-text-strong);
+      font-weight: 500;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+
+      [data-slot="faq-icon-plus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: block;
+        }
+        [data-expanded] & {
+          display: none;
+        }
+      }
+      [data-slot="faq-icon-minus"] {
+        flex-shrink: 0;
+        color: var(--color-text-weak);
+        margin-top: 2px;
+
+        [data-closed] & {
+          display: none;
+        }
+        [data-expanded] & {
+          display: block;
+        }
+      }
+      [data-slot="faq-question-text"] {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+
+    [data-slot="faq-answer"] {
+      margin-left: 40px;
+      margin-bottom: 32px;
+      color: var(--color-text);
+    }
+  }
+
+  [data-component="legal"] {
+    color: var(--color-text-weak);
+    text-align: center;
+    padding: 2rem 5rem;
+
+    @media (max-width: 60rem) {
+      padding: 2rem 1.5rem;
+    }
+
+    a {
+      color: var(--color-text-weak);
+      text-decoration: none;
+    }
+  }
+
+  a {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}
@@ -0,0 +1,254 @@
+import "./index.css"
+import { Title, Meta } from "@solidjs/meta"
+import { createSignal } from "solid-js"
+import { Header } from "~/component/header"
+import { Footer } from "~/component/footer"
+import { Legal } from "~/component/legal"
+import { Faq } from "~/component/faq"
+
+export default function Enterprise() {
+  const [formData, setFormData] = createSignal({
+    name: "",
+    role: "",
+    email: "",
+    message: "",
+  })
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [showSuccess, setShowSuccess] = createSignal(false)
+
+  const handleInputChange = (field: string) => (e: Event) => {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement
+    setFormData((prev) => ({ ...prev, [field]: target.value }))
+  }
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      const response = await fetch("/api/enterprise", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData()),
+      })
+
+      if (response.ok) {
+        setShowSuccess(true)
+        setFormData({
+          name: "",
+          role: "",
+          email: "",
+          message: "",
+        })
+        setTimeout(() => setShowSuccess(false), 5000)
+      }
+    } catch (error) {
+      console.error("Failed to submit form:", error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <main data-page="enterprise">
+      <Title>OpenCode | Enterprise solutions for your organisation</Title>
+      <Meta name="description" content="Contact OpenCode for enterprise solutions" />
+      <div data-component="container">
+        <Header />
+
+        <div data-component="content">
+          <section data-component="enterprise-content">
+            <div data-component="enterprise-columns">
+              <div data-component="enterprise-column-1">
+                <h2>Your code is yours</h2>
+                <p>
+                  OpenCode operates securely inside your organization with no data or context stored and no licensing restrictions or ownership claims. Start a trial with your team today, then scale confidently with enterprise-grade features including SSO, private registries, and self-hosting.
+                </p>
+                <p>
+                  Let us know and how we can help.
+                </p>
+
+                <div data-component="testimonial">
+                  <div data-component="quotation">
+                    <svg width="20" height="17" viewBox="0 0 20 17" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M19.4118 0L16.5882 9.20833H20V17H12.2353V10.0938L16 0H19.4118ZM7.17647 0L4.35294 9.20833H7.76471V17H0V10.0938L3.76471 0H7.17647Z"
+                        fill="currentColor" />
+                    </svg>
+
+                  </div>
+
+                  Thanks to OpenCode, we found a way to create software to track all our assets — even the imaginary ones.
+
+                  <div data-component="testimonial-logo">
+                    <svg width="80" height="79" viewBox="0 0 80 79" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M0 39.3087L10.0579 29.251L15.6862 34.7868L13.7488 36.7248L10.3345 33.2186L8.48897 35.0639L11.8111 38.4781L9.96557 40.4156L6.55181 37.0018L4.06028 39.4928L7.56674 42.9991L5.62884 44.845L0 39.3087Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M17.7182 36.8164L20.2094 39.4003L16.6108 46.9666L22.2393 41.3374L24.3615 43.46L14.2118 53.5179L11.9047 51.1187L15.4112 43.3677L9.78254 49.0888L7.66016 46.9666L17.7182 36.8164Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M42.8139 61.915L45.3055 64.4064L41.6145 71.9731L47.243 66.3441L49.3652 68.4663L39.3077 78.5244L36.9088 76.1252L40.5072 68.374L34.7866 74.0953L32.6641 71.9731L42.8139 61.915Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M16.4258 55.7324L26.4833 45.582L28.6061 47.7042C31.0049 50.1034 32.3892 51.9497 30.1746 54.1642C28.7902 55.548 27.6831 56.0094 26.1145 54.9016L26.0222 54.994C27.2218 56.1941 26.9448 57.1162 25.4688 58.5931L23.9 60.1615C23.4383 60.6232 22.8847 61.2693 22.7927 62.0067L20.6705 59.8845C20.7625 59.146 21.3161 58.5008 21.778 58.1316L23.5307 56.3788C24.269 55.6403 23.715 54.2555 23.254 53.8872L22.8847 53.4256L18.548 57.7623L16.4258 55.7324ZM24.3611 51.9495C25.4689 53.0563 26.4833 53.3332 27.4984 52.3178C28.5134 51.3957 28.2367 50.3802 27.1295 49.1812L24.3611 51.9495Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M33.4952 66.9899C31.096 69.3891 28.8815 68.4659 27.4047 66.9899C26.021 65.6062 25.0978 63.3907 27.4972 60.9003L31.8336 56.6548C34.2333 54.2556 36.4478 55.0864 37.9241 56.5635C39.308 58.0396 40.2311 60.2541 37.8315 62.6531L33.4952 66.9899ZM29.0659 63.5752C28.6048 64.0369 28.6048 64.7753 29.1583 65.3292C29.6196 65.8821 30.4502 65.7897 30.8194 65.4215L36.2633 59.9769C36.7246 59.6076 36.7246 58.7779 36.171 58.3164C35.7097 57.7626 34.8791 57.7626 34.5101 58.2241L29.0659 63.5752Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M78.5267 39.308L68.2845 29.0654L47.5231 49.735L49.6453 51.8572L68.2845 33.2179L74.3746 39.308L47.2461 66.3435L49.3683 68.4657L78.5267 39.308Z"
+                            fill="#0083C6" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M49.6443 51.8577L43.3695 45.4902L64.0386 24.8215L53.7969 14.4873L33.0352 35.2482L35.1574 37.3705L53.7969 18.7315L59.7947 24.8215L39.1251 45.4902L47.5221 53.9799L49.6443 51.8577Z"
+                            fill="#2D9C5C" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M35.1564 37.3706L28.7896 31.0038L49.5515 10.3347L39.3088 0L10.0586 29.2507L12.1804 31.2804L39.3088 4.24476L45.3066 10.3347L24.6377 31.0038L33.0342 39.4008L35.1564 37.3706Z"
+                            fill="#E92A35" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M77.2332 52.4105C76.0336 52.4105 75.111 51.4884 75.111 50.196C75.111 48.9046 76.0336 47.9814 77.2332 47.9814C78.3405 47.9814 79.263 48.9046 79.263 50.196C79.263 51.4884 78.3405 52.4105 77.2332 52.4105ZM77.2332 52.9643C78.7098 52.9643 80.0015 51.6729 80.0015 50.196C80.0015 48.6276 78.7096 47.4287 77.2332 47.4287C75.6644 47.4287 74.4648 48.6278 74.4648 50.196C74.4647 51.6731 75.6643 52.9643 77.2332 52.9643ZM76.1259 51.7653H76.6797V50.3804H77.0485L77.8788 51.7653H78.4332L77.6023 50.3804C78.1558 50.2881 78.4332 50.0122 78.4332 49.5507C78.4332 48.9046 78.0633 48.6276 77.3253 48.6276H76.1257V51.7653H76.1259ZM76.6797 49.0892H77.2332C77.5102 49.0892 77.8788 49.0892 77.8788 49.4586C77.8788 49.9202 77.6023 49.9202 77.2332 49.9202H76.6797V49.0892Z"
+                            fill="#0083C6" />
+                    </svg>
+
+                  </div>
+
+                </div>
+              </div>
+
+              <div data-component="enterprise-column-2">
+                <div data-component="enterprise-form">
+                  <form onSubmit={handleSubmit}>
+                    <div data-component="form-group">
+                      <label for="name">Full name</label>
+                      <input
+                        id="name"
+                        type="text"
+                        required
+                        value={formData().name}
+                        onInput={handleInputChange('name')}
+                        placeholder="Jeff Bezos"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="role">Role</label>
+                      <input
+                        id="role"
+                        type="text"
+                        required
+                        value={formData().role}
+                        onInput={handleInputChange('role')}
+                        placeholder="Executive Chairman"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="email">Company email</label>
+                      <input
+                        id="email"
+                        type="email"
+                        required
+                        value={formData().email}
+                        onInput={handleInputChange('email')}
+                        placeholder="jeff@amazon.com"
+                      />
+                    </div>
+
+                    <div data-component="form-group">
+                      <label for="message">What problem are you trying to
+                        solve?</label>
+                      <textarea
+                        id="message"
+                        required
+                        rows={5}
+                        value={formData().message}
+                        onInput={handleInputChange('message')}
+                        placeholder="We need help with..."
+                      />
+                    </div>
+
+                    <button type="submit" disabled={isSubmitting()}
+                            data-component="submit-button">
+                      {isSubmitting() ? 'Sending...' : 'Send'}
+                    </button>
+                  </form>
+
+                  {showSuccess() && (
+                    <div data-component="success-message">
+                      Message sent, we'll be in touch soon.
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="faq">
+            <div data-slot="section-title">
+              <h3>FAQ</h3>
+            </div>
+            <ul>
+              <li>
+                <Faq question="Does Opencode store our code or context data?">
+                  No. OpenCode never stores your code or context data. All
+                  processing happens locally or directly with your AI provider.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Who owns the code generated with OpenCode?">
+                  You do. All code produced is yours, with no licensing
+                  restrictions or ownership claims.
+                </Faq>
+              </li>
+              <li>
+                <Faq
+                  question="How can we trial OpenCode inside our organization?">
+                  Simply install and run an internal trial with your team. Since
+                  OpenCode doesn’t store any data, your developers can get
+                  started right away.
+                </Faq>
+              </li>
+              <li>
+                <Faq
+                  question="What happens if someone uses the `/share` feature?">
+                  By default, sharing is disabled. If enabled, conversations are
+                  sent to our share service and cached through our CDN. For
+                  enterprise use, we recommend disabling or self-hosting this
+                  feature.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Can OpenCode integrate with our company’s SSO?">
+                  Yes. Enterprise deployments can include SSO integration so all
+                  sessions and shared conversations are protected by your
+                  authentication system.
+                </Faq>
+              </li>
+              <li>
+                <Faq question="Can OpenCode be self-hosted?">
+                  Absolutely. You can fully self-host OpenCode, including the
+                  share feature, ensuring that data and pages are accessible
+                  only after authentication.
+                </Faq>
+              </li>
+              <li>
+                <Faq
+                  question="How do we get started with enterprise deployment?">
+                  Contact us to discuss pricing, implementation, and enterprise
+                  options like SSO, private registries, and self-hosting.
+                </Faq>
+              </li>
+            </ul>
+          </section>
+        </div>
+        <Footer />
+      </div>
+      <Legal />
+    </main>
+  )
+}
@@ -827,12 +827,8 @@ body {
        outline: none;
        border: none;
        color: var(--color-text-strong);
-
-        border: 1px solid var(--color-background-strong); /* Tailwind blue-600 as example */
-
-        /* Tailwind-style ring */
+        border: 1px solid var(--color-background-strong);
        box-shadow: 0 0 0 3px var(--color-background-interactive);
-        /* mimics "ring-2 ring-blue-600/50" */

        @media (prefers-color-scheme: dark) {
          box-shadow: none;
@@ -23,7 +23,13 @@ const getWorkspaces = query(async () => {
        })
        .from(UserTable)
        .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
-        .where(and(eq(UserTable.accountID, Actor.account()), isNull(WorkspaceTable.timeDeleted))),
+        .where(
+          and(
+            eq(UserTable.accountID, Actor.account()),
+            isNull(WorkspaceTable.timeDeleted),
+            isNull(UserTable.timeDeleted),
+          ),
+        ),
    )
  })
 }, "workspaces")
@@ -16,38 +16,110 @@
  justify-content: flex-end;
 }

-[data-component="workspace-nav-items"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
+/* Desktop Navigation */
+[data-component="nav-desktop"] {
+  display: block;

-  [data-nav-button] {
-    padding: var(--space-3) var(--space-4);
-    border-radius: var(--border-radius-sm);
-    color: var(--color-text-muted);
-    text-decoration: none;
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    transition: all 0.15s ease;
+  @media (max-width: 48rem) {
+    display: none;
+  }

-    &:hover {
-      color: var(--color-text);
+  [data-component="workspace-nav-items"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    [data-nav-button] {
+      padding: var(--space-3) var(--space-4);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &.active {
+        color: var(--color-text);
+        font-weight: 700;
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: calc(-1 * var(--space-0-5));
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background-color: var(--color-text);
+          border-radius: 0 2px 2px 0;
+        }
+      }
    }
+  }
+}

-    &.active {
-      color: var(--color-text);
-      font-weight: 700;
+/* Mobile Navigation */
+[data-component="nav-mobile"] {
+  display: none;
+
+  @media (max-width: 48rem) {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [data-component="workspace-nav-items"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: max-content;
+    height: 100%;
+
+    [data-nav-button] {
+      padding: var(--space-2) var(--space-3);
+      padding-bottom: calc(var(--space-2) + 4px);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+      flex-shrink: 0;
      position: relative;

-      &::before {
-        content: '';
-        position: absolute;
-        left: calc(-1 * var(--space-0-5));
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        background-color: var(--color-text);
-        border-radius: 0 2px 2px 0;
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &.active {
+        color: var(--color-text);
+        font-weight: 700;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: var(--color-text);
+          border-radius: 2px 2px 0 0;
+        }
      }
    }
  }
@@ -221,5 +293,16 @@
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+    min-height: fit-content;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
  }
-}
+}
@@ -6,29 +6,54 @@ import "./[id].css"
 export default function WorkspaceLayout(props: RouteSectionProps) {
  const params = useParams()
  const userInfo = createAsync(() => querySessionInfo(params.id))
+
  return (
    <main data-page="workspace">
      <div data-component="workspace-container">
        <nav data-component="workspace-nav">
-          <div data-component="workspace-nav-items">
-            <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
-              Zen
-            </A>
-            <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
-              API Keys
-            </A>
-            <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
-              Members
-            </A>
-            <Show when={userInfo()?.isAdmin}>
-              <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
-                Billing
+          <nav data-component="nav-desktop">
+            <div data-component="workspace-nav-items">
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+                Zen
              </A>
-              <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
-                Settings
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+                API Keys
              </A>
-            </Show>
-          </div>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
+
+          <nav data-component="nav-mobile">
+            <div data-component="workspace-nav-items">
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+                Zen
+              </A>
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+                API Keys
+              </A>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
        </nav>
        <div data-component="workspace-content">{props.children}</div>
      </div>
@@ -22,6 +22,22 @@
    }
  }

+  [data-slot="beta-notice"] {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg-surface);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+    margin-bottom: var(--space-3);
+
+    a {
+      color: var(--color-accent);
+      text-decoration: none;
+    }
+  }
+
  [data-slot="create-form"] {
    display: flex;
    flex-direction: column;
@@ -81,7 +97,7 @@
      display: flex;
      gap: var(--space-2);

-      >button[type="reset"] {
+      > button[type="reset"] {
        align-self: flex-start;
      }
    }
@@ -207,7 +223,6 @@
    }

    @media (max-width: 40rem) {
-
      th,
      td {
        padding: var(--space-2) var(--space-3);
@@ -217,8 +232,7 @@
      th {
        &:nth-child(3)

-        /* Date */
-          {
+        /* Date */ {
          display: none;
        }
      }
@@ -226,11 +240,10 @@
      td {
        &:nth-child(3)

-        /* Date */
-          {
+        /* Date */ {
          display: none;
        }
      }
    }
  }
-}
+}
@@ -253,6 +253,13 @@ export function MemberSection() {
          </Show>
        </div>
      </div>
+      <div data-slot="beta-notice">
+        Workspaces are free for teams during the beta.{" "}
+        <a href="/docs/zen/#for-teams" target="_blank" rel="noopener noreferrer">
+          Learn more
+        </a>
+        .
+      </div>
      <Show when={store.show}>
        <form action={inviteMember} method="post" data-slot="create-form">
          <div data-slot="input-row">
@@ -3,6 +3,10 @@ import { Actor } from "@opencode-ai/console-core/actor.js"
 import { action, query } from "@solidjs/router"
 import { withActor } from "~/context/auth.withActor"
 import { Billing } from "@opencode-ai/console-core/billing.js"
+import { User } from "@opencode-ai/console-core/user.js"
+import { and, Database, desc, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
+import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
+import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"

 export function formatDateForTable(date: Date) {
  const options: Intl.DateTimeFormatOptions = {
@@ -30,17 +34,28 @@ export function formatDateUTC(date: Date) {
  return date.toLocaleDateString("en-US", options)
 }

-export const queryIsLoggedIn = query(async () => {
+export async function getLastSeenWorkspaceID() {
  "use server"
-  return withActor(() => {
-    try {
-      Actor.assert("account")
-      return true
-    } catch {
-      return false
-    }
+  return withActor(async () => {
+    const actor = Actor.assert("account")
+    return Database.use(async (tx) =>
+      tx
+        .select({ id: WorkspaceTable.id })
+        .from(UserTable)
+        .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
+        .where(
+          and(
+            eq(UserTable.accountID, actor.properties.accountID),
+            isNull(UserTable.timeDeleted),
+            isNull(WorkspaceTable.timeDeleted),
+          ),
+        )
+        .orderBy(desc(UserTable.timeSeen))
+        .limit(1)
+        .then((x) => x[0]?.id),
+    )
  })
-}, "isLoggedIn.get")
+}

 export const querySessionInfo = query(async (workspaceID: string) => {
  "use server"
@@ -1,5 +1,5 @@
 import "./index.css"
-import { createAsync } from "@solidjs/router"
+import { createAsync, query, redirect } from "@solidjs/router"
 import { Title, Meta, Link } from "@solidjs/meta"
 import { HttpHeader } from "@solidjs/start"
 import zenLogoLight from "../../asset/zen-ornate-light.svg"
@@ -16,10 +16,16 @@ import { Faq } from "~/component/faq"
 import { Legal } from "~/component/legal"
 import { Footer } from "~/component/footer"
 import { Header } from "~/component/header"
-import { queryIsLoggedIn } from "~/routes/workspace/common"
+import { getLastSeenWorkspaceID } from "../workspace/common"
+
+const checkLoggedIn = query(async () => {
+  "use server"
+  const workspaceID = await getLastSeenWorkspaceID()
+  if (workspaceID) throw redirect(`/workspace/${workspaceID}`)
+}, "checkLoggedIn.get")

 export default function Home() {
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
+  createAsync(() => checkLoggedIn())
  return (
    <main data-page="zen">
      <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
@@ -105,7 +111,7 @@ export default function Home() {
                </div>
              </div>
              <a href="/auth">
-                <span>{isLoggedIn() ? "Go to workspace " : "Get started with Zen "}</span>
+                <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"
@@ -0,0 +1,5 @@
+export class AuthError extends Error {}
+export class CreditsError extends Error {}
+export class MonthlyLimitError extends Error {}
+export class UserLimitError extends Error {}
+export class ModelError extends Error {}
@@ -0,0 +1 @@
+export type Format = "anthropic" | "openai" | "oa-compat"
@@ -1,67 +1,41 @@
-import { z } from "zod"
 import type { APIEvent } from "@solidjs/start/server"
-import path from "node:path"
 import { and, Database, eq, isNull, lt, or, sql } from "@opencode-ai/console-core/drizzle/index.js"
 import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js"
 import { BillingTable, UsageTable } from "@opencode-ai/console-core/schema/billing.sql.js"
 import { centsToMicroCents } from "@opencode-ai/console-core/util/price.js"
 import { Identifier } from "@opencode-ai/console-core/identifier.js"
-import { Resource } from "@opencode-ai/console-resource"
-import { Billing } from "../../../../core/src/billing"
+import { Billing } from "@opencode-ai/console-core/billing.js"
 import { Actor } from "@opencode-ai/console-core/actor.js"
 import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
 import { ZenData } from "@opencode-ai/console-core/model.js"
 import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js"
 import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
 import { ProviderTable } from "@opencode-ai/console-core/schema/provider.sql.js"
+import { logger } from "./logger"
+import { AuthError, CreditsError, MonthlyLimitError, UserLimitError, ModelError } from "./error"
+import { createBodyConverter, createStreamPartConverter, createResponseConverter } from "./provider/provider"
+import { Format } from "./format"
+import { anthropicHelper } from "./provider/anthropic"
+import { openaiHelper } from "./provider/openai"
+import { oaCompatHelper } from "./provider/openai-compatible"
+
+type ZenData = Awaited<ReturnType<typeof ZenData.list>>
+type Model = ZenData["models"][string]

 export async function handler(
  input: APIEvent,
  opts: {
-    modifyBody?: (body: any) => any
-    setAuthHeader: (headers: Headers, apiKey: string) => void
+    format: Format
    parseApiKey: (headers: Headers) => string | undefined
-    onStreamPart: (chunk: string) => void
-    getStreamUsage: () => any
-    normalizeUsage: (body: any) => {
-      inputTokens: number
-      outputTokens: number
-      reasoningTokens?: number
-      cacheReadTokens?: number
-      cacheWrite5mTokens?: number
-      cacheWrite1hTokens?: number
-    }
  },
 ) {
-  class AuthError extends Error {}
-  class CreditsError extends Error {}
-  class MonthlyLimitError extends Error {}
-  class UserLimitError extends Error {}
-  class ModelError extends Error {}
-
-  type ZenData = Awaited<ReturnType<typeof ZenData.list>>
-  type Model = ZenData["models"][string]
-
  const FREE_WORKSPACES = [
    "wrk_01K46JDFR0E75SG2Q8K172KF3Y", // frank
    "wrk_01K6W1A3VE0KMNVSCQT43BG2SX", // opencode bench
  ]

-  const logger = {
-    metric: (values: Record<string, any>) => {
-      console.log(`_metric:${JSON.stringify(values)}`)
-    },
-    log: console.log,
-    debug: (message: string) => {
-      if (Resource.App.stage === "production") return
-      console.debug(message)
-    },
-  }
-
  try {
-    const url = new URL(input.request.url)
    const body = await input.request.json()
-    logger.debug(JSON.stringify(body))
    logger.metric({
      is_tream: !!body.stream,
      session: input.request.headers.get("x-opencode-session"),
@@ -69,7 +43,7 @@ export async function handler(
    })
    const zenData = ZenData.list()
    const modelInfo = validateModel(zenData, body.model)
-    const providerInfo = selectProvider(zenData, modelInfo)
+    const providerInfo = selectProvider(zenData, modelInfo, input.request.headers.get("x-real-ip") ?? "")
    const authInfo = await authenticate(modelInfo, providerInfo)
    validateBilling(modelInfo, authInfo)
    validateModelSettings(authInfo)
@@ -78,22 +52,28 @@ 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\/v1/, "") + url.search), {
+    const reqUrl = providerInfo.modifyUrl(providerInfo.api)
+    const reqBody = JSON.stringify(
+      providerInfo.modifyBody({
+        ...createBodyConverter(opts.format, providerInfo.format)(body),
+        model: providerInfo.model,
+      }),
+    )
+    logger.debug("REQUEST URL: " + reqUrl)
+    logger.debug("REQUEST: " + reqBody)
+    const res = await fetch(reqUrl, {
      method: "POST",
      headers: (() => {
        const headers = input.request.headers
        headers.delete("host")
        headers.delete("content-length")
-        opts.setAuthHeader(headers, providerInfo.apiKey)
+        providerInfo.modifyHeaders(headers, body, providerInfo.apiKey)
        Object.entries(providerInfo.headerMappings ?? {}).forEach(([k, v]) => {
          headers.set(k, headers.get(v)!)
        })
        return headers
      })(),
-      body: JSON.stringify({
-        ...(opts.modifyBody?.(body) ?? body),
-        model: providerInfo.model,
-      }),
+      body: reqBody,
    })

    // Scrub response headers
@@ -104,14 +84,19 @@ export async function handler(
        resHeaders.set(k, v)
      }
    }
+    logger.debug("STATUS: " + res.status + " " + res.statusText)
+    if (res.status === 400 || res.status === 503) {
+      logger.debug("RESPONSE: " + (await res.text()))
+    }

    // Handle non-streaming response
    if (!body.stream) {
+      const responseConverter = createResponseConverter(providerInfo.format, opts.format)
      const json = await res.json()
-      const body = JSON.stringify(json)
+      const body = JSON.stringify(responseConverter(json))
      logger.metric({ response_length: body.length })
-      logger.debug(body)
-      await trackUsage(authInfo, modelInfo, providerInfo.id, json.usage)
+      logger.debug("RESPONSE: " + body)
+      await trackUsage(authInfo, modelInfo, providerInfo, json.usage)
      await reload(authInfo)
      return new Response(body, {
        status: res.status,
@@ -121,10 +106,13 @@ export async function handler(
    }

    // Handle streaming response
+    const streamConverter = createStreamPartConverter(providerInfo.format, opts.format)
+    const usageParser = providerInfo.createUsageParser()
    const stream = new ReadableStream({
      start(c) {
        const reader = res.body?.getReader()
        const decoder = new TextDecoder()
+        const encoder = new TextEncoder()
        let buffer = ""
        let responseLength = 0

@@ -136,9 +124,9 @@ export async function handler(
                  response_length: responseLength,
                  "timestamp.last_byte": Date.now(),
                })
-                const usage = opts.getStreamUsage()
+                const usage = usageParser.retrieve()
                if (usage) {
-                  await trackUsage(authInfo, modelInfo, providerInfo.id, usage)
+                  await trackUsage(authInfo, modelInfo, providerInfo, usage)
                  await reload(authInfo)
                }
                c.close()
@@ -158,12 +146,21 @@ export async function handler(
              const parts = buffer.split("\n\n")
              buffer = parts.pop() ?? ""

-              for (const part of parts) {
-                logger.debug(part)
-                opts.onStreamPart(part.trim())
+              for (let part of parts) {
+                logger.debug("PART: " + part)
+
+                part = part.trim()
+                usageParser.parse(part)
+
+                if (providerInfo.format !== opts.format) {
+                  part = streamConverter(part)
+                  c.enqueue(encoder.encode(part + "\n\n"))
+                }
              }

-              c.enqueue(value)
+              if (providerInfo.format === opts.format) {
+                c.enqueue(value)
+              }

              return pump()
            }) || Promise.resolve()
@@ -225,17 +222,25 @@ export async function handler(
    return { id: modelId, ...modelData }
  }

-  function selectProvider(zenData: ZenData, model: Awaited<ReturnType<typeof validateModel>>) {
+  function selectProvider(zenData: ZenData, model: Awaited<ReturnType<typeof validateModel>>, ip: string) {
    const providers = model.providers
      .filter((provider) => !provider.disabled)
      .flatMap((provider) => Array<typeof provider>(provider.weight ?? 1).fill(provider))
-    const provider = providers[Math.floor(Math.random() * providers.length)]
+
+    // Use last character of IP address to select a provider
+    const lastChar = ip.charCodeAt(ip.length - 1) || 0
+    const index = lastChar % providers.length
+    const provider = providers[index]

    if (!(provider.id in zenData.providers)) {
      throw new ModelError(`Provider ${provider.id} not supported`)
    }

-    return { ...provider, ...zenData.providers[provider.id] }
+    return {
+      ...provider,
+      ...zenData.providers[provider.id],
+      ...(provider.id === "anthropic" ? anthropicHelper : provider.id === "openai" ? openaiHelper : oaCompatHelper),
+    }
  }

  async function authenticate(
@@ -356,11 +361,11 @@ export async function handler(
  async function trackUsage(
    authInfo: Awaited<ReturnType<typeof authenticate>>,
    modelInfo: ReturnType<typeof validateModel>,
-    providerId: string,
+    providerInfo: Awaited<ReturnType<typeof selectProvider>>,
    usage: any,
  ) {
    const { inputTokens, outputTokens, reasoningTokens, cacheReadTokens, cacheWrite5mTokens, cacheWrite1hTokens } =
-      opts.normalizeUsage(usage)
+      providerInfo.normalizeUsage(usage)

    const modelCost =
      modelInfo.cost200K &&
@@ -421,7 +426,7 @@ export async function handler(
        workspaceID: authInfo.workspaceID,
        id: Identifier.create("usage"),
        model: modelInfo.id,
-        provider: providerId,
+        provider: providerInfo.id,
        inputTokens,
        outputTokens,
        reasoningTokens,
@@ -0,0 +1,12 @@
+import { Resource } from "@opencode-ai/console-resource"
+
+export const logger = {
+  metric: (values: Record<string, any>) => {
+    console.log(`_metric:${JSON.stringify(values)}`)
+  },
+  log: console.log,
+  debug: (message: string) => {
+    if (Resource.App.stage === "production") return
+    console.debug(message)
+  },
+}
@@ -0,0 +1,621 @@
+import { ProviderHelper, CommonRequest, CommonResponse, CommonChunk } from "./provider"
+
+type Usage = {
+  cache_creation?: {
+    ephemeral_5m_input_tokens?: number
+    ephemeral_1h_input_tokens?: number
+  }
+  cache_creation_input_tokens?: number
+  cache_read_input_tokens?: number
+  input_tokens?: number
+  output_tokens?: number
+  server_tool_use?: {
+    web_search_requests?: number
+  }
+}
+
+export const anthropicHelper = {
+  format: "anthropic",
+  modifyUrl: (providerApi: string) => providerApi + "/messages",
+  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
+    headers.set("x-api-key", apiKey)
+    headers.set("anthropic-version", headers.get("anthropic-version") ?? "2023-06-01")
+    if (body.model.startsWith("claude-sonnet-")) {
+      headers.set("anthropic-beta", "context-1m-2025-08-07")
+    }
+  },
+  modifyBody: (body: Record<string, any>) => {
+    return {
+      ...body,
+      service_tier: "standard_only",
+    }
+  },
+  createUsageParser: () => {
+    let usage: Usage
+
+    return {
+      parse: (chunk: string) => {
+        const data = chunk.split("\n")[1]
+        if (!data.startsWith("data: ")) return
+
+        let json
+        try {
+          json = JSON.parse(data.slice(6))
+        } catch (e) {
+          return
+        }
+
+        const usageUpdate = json.usage ?? json.message?.usage
+        if (!usageUpdate) return
+        usage = {
+          ...usage,
+          ...usageUpdate,
+          cache_creation: {
+            ...usage?.cache_creation,
+            ...usageUpdate.cache_creation,
+          },
+          server_tool_use: {
+            ...usage?.server_tool_use,
+            ...usageUpdate.server_tool_use,
+          },
+        }
+      },
+      retrieve: () => usage,
+    }
+  },
+  normalizeUsage: (usage: Usage) => ({
+    inputTokens: usage.input_tokens ?? 0,
+    outputTokens: usage.output_tokens ?? 0,
+    reasoningTokens: undefined,
+    cacheReadTokens: usage.cache_read_input_tokens ?? undefined,
+    cacheWrite5mTokens: usage.cache_creation?.ephemeral_5m_input_tokens ?? undefined,
+    cacheWrite1hTokens: usage.cache_creation?.ephemeral_1h_input_tokens ?? undefined,
+  }),
+} satisfies ProviderHelper
+
+export function fromAnthropicRequest(body: any): CommonRequest {
+  if (!body || typeof body !== "object") return body
+
+  const msgs: any[] = []
+
+  const sys = Array.isArray(body.system) ? body.system : undefined
+  if (sys && sys.length > 0) {
+    for (const s of sys) {
+      if (!s) continue
+      if ((s as any).type !== "text") continue
+      if (typeof (s as any).text !== "string") continue
+      if ((s as any).text.length === 0) continue
+      msgs.push({ role: "system", content: (s as any).text })
+    }
+  }
+
+  const toImg = (src: any) => {
+    if (!src || typeof src !== "object") return undefined
+    if ((src as any).type === "url" && typeof (src as any).url === "string")
+      return { type: "image_url", image_url: { url: (src as any).url } }
+    if (
+      (src as any).type === "base64" &&
+      typeof (src as any).media_type === "string" &&
+      typeof (src as any).data === "string"
+    )
+      return { type: "image_url", image_url: { url: `data:${(src as any).media_type};base64,${(src as any).data}` } }
+    return undefined
+  }
+
+  const inMsgs = Array.isArray(body.messages) ? body.messages : []
+  for (const m of inMsgs) {
+    if (!m || !(m as any).role) continue
+
+    if ((m as any).role === "user") {
+      const partsIn = Array.isArray((m as any).content) ? (m as any).content : []
+      const partsOut: any[] = []
+      for (const p of partsIn) {
+        if (!p || !(p as any).type) continue
+        if ((p as any).type === "text" && typeof (p as any).text === "string")
+          partsOut.push({ type: "text", text: (p as any).text })
+        if ((p as any).type === "image") {
+          const ip = toImg((p as any).source)
+          if (ip) partsOut.push(ip)
+        }
+        if ((p as any).type === "tool_result") {
+          const id = (p as any).tool_use_id
+          const content =
+            typeof (p as any).content === "string" ? (p as any).content : JSON.stringify((p as any).content)
+          msgs.push({ role: "tool", tool_call_id: id, content })
+        }
+      }
+      if (partsOut.length > 0) {
+        if (partsOut.length === 1 && partsOut[0].type === "text") msgs.push({ role: "user", content: partsOut[0].text })
+        else msgs.push({ role: "user", content: partsOut })
+      }
+      continue
+    }
+
+    if ((m as any).role === "assistant") {
+      const partsIn = Array.isArray((m as any).content) ? (m as any).content : []
+      const texts: string[] = []
+      const tcs: any[] = []
+      for (const p of partsIn) {
+        if (!p || !(p as any).type) continue
+        if ((p as any).type === "text" && typeof (p as any).text === "string") texts.push((p as any).text)
+        if ((p as any).type === "tool_use") {
+          const name = (p as any).name
+          const id = (p as any).id
+          const inp = (p as any).input
+          const input = (() => {
+            if (typeof inp === "string") return inp
+            try {
+              return JSON.stringify(inp ?? {})
+            } catch {
+              return String(inp ?? "")
+            }
+          })()
+          tcs.push({ id, type: "function", function: { name, arguments: input } })
+        }
+      }
+      const out: any = { role: "assistant", content: texts.join("") }
+      if (tcs.length > 0) out.tool_calls = tcs
+      msgs.push(out)
+      continue
+    }
+  }
+
+  const tools = Array.isArray(body.tools)
+    ? body.tools
+        .filter((t: any) => t && typeof t === "object" && "input_schema" in t)
+        .map((t: any) => ({
+          type: "function",
+          function: { name: (t as any).name, description: (t as any).description, parameters: (t as any).input_schema },
+        }))
+    : undefined
+
+  const tcin = body.tool_choice
+  const tc = (() => {
+    if (!tcin) return undefined
+    if ((tcin as any).type === "auto") return "auto"
+    if ((tcin as any).type === "any") return "required"
+    if ((tcin as any).type === "tool" && typeof (tcin as any).name === "string")
+      return { type: "function" as const, function: { name: (tcin as any).name } }
+    return undefined
+  })()
+
+  const stop = (() => {
+    const v = body.stop_sequences
+    if (!v) return undefined
+    if (Array.isArray(v)) return v.length === 1 ? v[0] : v
+    if (typeof v === "string") return v
+    return undefined
+  })()
+
+  return {
+    max_tokens: body.max_tokens,
+    temperature: body.temperature,
+    top_p: body.top_p,
+    stop,
+    messages: msgs,
+    stream: !!body.stream,
+    tools,
+    tool_choice: tc,
+  }
+}
+
+export function toAnthropicRequest(body: CommonRequest) {
+  if (!body || typeof body !== "object") return body
+
+  const sysIn = Array.isArray(body.messages) ? body.messages.filter((m: any) => m && m.role === "system") : []
+  let ccCount = 0
+  const cc = () => {
+    ccCount++
+    return ccCount <= 4 ? { cache_control: { type: "ephemeral" } } : {}
+  }
+  const system = sysIn
+    .filter((m: any) => typeof m.content === "string" && m.content.length > 0)
+    .map((m: any) => ({ type: "text", text: m.content, ...cc() }))
+
+  const msgsIn = Array.isArray(body.messages) ? body.messages : []
+  const msgsOut: any[] = []
+
+  const toSrc = (p: any) => {
+    if (!p || typeof p !== "object") return undefined
+    if ((p as any).type === "image_url" && (p as any).image_url) {
+      const u = (p as any).image_url.url ?? (p as any).image_url
+      if (typeof u === "string" && u.startsWith("data:")) {
+        const m = u.match(/^data:([^;]+);base64,(.*)$/)
+        if (m) return { type: "base64", media_type: m[1], data: m[2] }
+      }
+      if (typeof u === "string") return { type: "url", url: u }
+    }
+    return undefined
+  }
+
+  for (const m of msgsIn) {
+    if (!m || !(m as any).role) continue
+
+    if ((m as any).role === "user") {
+      if (typeof (m as any).content === "string") {
+        msgsOut.push({
+          role: "user",
+          content: [{ type: "text", text: (m as any).content, ...cc() }],
+        })
+      } else if (Array.isArray((m as any).content)) {
+        const parts: any[] = []
+        for (const p of (m as any).content) {
+          if (!p || !(p as any).type) continue
+          if ((p as any).type === "text" && typeof (p as any).text === "string")
+            parts.push({ type: "text", text: (p as any).text, ...cc() })
+          if ((p as any).type === "image_url") {
+            const s = toSrc(p)
+            if (s) parts.push({ type: "image", source: s, ...cc() })
+          }
+        }
+        if (parts.length > 0) msgsOut.push({ role: "user", content: parts })
+      }
+      continue
+    }
+
+    if ((m as any).role === "assistant") {
+      const out: any = { role: "assistant", content: [] as any[] }
+      if (typeof (m as any).content === "string" && (m as any).content.length > 0) {
+        ;(out.content as any[]).push({ type: "text", text: (m as any).content, ...cc() })
+      }
+      if (Array.isArray((m as any).tool_calls)) {
+        for (const tc of (m as any).tool_calls) {
+          if ((tc as any).type === "function" && (tc as any).function) {
+            let input: any
+            const a = (tc as any).function.arguments
+            if (typeof a === "string") {
+              try {
+                input = JSON.parse(a)
+              } catch {
+                input = a
+              }
+            } else input = a
+            const id = (tc as any).id || `toolu_${Math.random().toString(36).slice(2)}`
+            ;(out.content as any[]).push({
+              type: "tool_use",
+              id,
+              name: (tc as any).function.name,
+              input,
+              ...cc(),
+            })
+          }
+        }
+      }
+      if ((out.content as any[]).length > 0) msgsOut.push(out)
+      continue
+    }
+
+    if ((m as any).role === "tool") {
+      msgsOut.push({
+        role: "user",
+        content: [
+          {
+            type: "tool_result",
+            tool_use_id: (m as any).tool_call_id,
+            content: (m as any).content,
+            ...cc(),
+          },
+        ],
+      })
+      continue
+    }
+  }
+
+  const tools = Array.isArray(body.tools)
+    ? body.tools
+        .filter((t: any) => t && typeof t === "object" && (t as any).type === "function")
+        .map((t: any) => ({
+          name: (t as any).function.name,
+          description: (t as any).function.description,
+          input_schema: (t as any).function.parameters,
+          ...cc(),
+        }))
+    : undefined
+
+  const tcIn = body.tool_choice
+  const tool_choice = (() => {
+    if (!tcIn) return undefined
+    if (tcIn === "auto") return { type: "auto" }
+    if (tcIn === "required") return { type: "any" }
+    if ((tcIn as any).type === "function" && (tcIn as any).function?.name)
+      return { type: "tool", name: (tcIn as any).function.name }
+    return undefined
+  })()
+
+  const stop_sequences = (() => {
+    const v = body.stop
+    if (!v) return undefined
+    if (Array.isArray(v)) return v
+    if (typeof v === "string") return [v]
+    return undefined
+  })()
+
+  return {
+    max_tokens: body.max_tokens ?? 32_000,
+    temperature: body.temperature,
+    top_p: body.top_p,
+    system: system.length > 0 ? system : undefined,
+    messages: msgsOut,
+    stream: !!body.stream,
+    tools,
+    tool_choice,
+    stop_sequences,
+  }
+}
+
+export function fromAnthropicResponse(resp: any): CommonResponse {
+  if (!resp || typeof resp !== "object") return resp
+
+  if (Array.isArray((resp as any).choices)) return resp
+
+  const isAnthropic = typeof (resp as any).type === "string" && (resp as any).type === "message"
+  if (!isAnthropic) return resp
+
+  const idIn = (resp as any).id
+  const id =
+    typeof idIn === "string" ? idIn.replace(/^msg_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
+  const model = (resp as any).model
+
+  const blocks: any[] = Array.isArray((resp as any).content) ? (resp as any).content : []
+  const text = blocks
+    .filter((b) => b && b.type === "text" && typeof (b as any).text === "string")
+    .map((b: any) => b.text)
+    .join("")
+  const tcs = blocks
+    .filter((b) => b && b.type === "tool_use")
+    .map((b: any) => {
+      const name = (b as any).name
+      const args = (() => {
+        const inp = (b as any).input
+        if (typeof inp === "string") return inp
+        try {
+          return JSON.stringify(inp ?? {})
+        } catch {
+          return String(inp ?? "")
+        }
+      })()
+      const tid =
+        typeof (b as any).id === "string" && (b as any).id.length > 0
+          ? (b as any).id
+          : `toolu_${Math.random().toString(36).slice(2)}`
+      return { id: tid, type: "function" as const, function: { name, arguments: args } }
+    })
+
+  const finish = (r: string | null) => {
+    if (r === "end_turn") return "stop"
+    if (r === "tool_use") return "tool_calls"
+    if (r === "max_tokens") return "length"
+    if (r === "content_filter") return "content_filter"
+    return null
+  }
+
+  const u = (resp as any).usage
+  const usage = (() => {
+    if (!u) return undefined as any
+    const pt = typeof (u as any).input_tokens === "number" ? (u as any).input_tokens : undefined
+    const ct = typeof (u as any).output_tokens === "number" ? (u as any).output_tokens : undefined
+    const total = pt != null && ct != null ? pt + ct : undefined
+    const cached =
+      typeof (u as any).cache_read_input_tokens === "number" ? (u as any).cache_read_input_tokens : undefined
+    const details = cached != null ? { cached_tokens: cached } : undefined
+    return {
+      prompt_tokens: pt,
+      completion_tokens: ct,
+      total_tokens: total,
+      ...(details ? { prompt_tokens_details: details } : {}),
+    }
+  })()
+
+  return {
+    id,
+    object: "chat.completion",
+    created: Math.floor(Date.now() / 1000),
+    model,
+    choices: [
+      {
+        index: 0,
+        message: {
+          role: "assistant",
+          ...(text && text.length > 0 ? { content: text } : {}),
+          ...(tcs.length > 0 ? { tool_calls: tcs } : {}),
+        },
+        finish_reason: finish((resp as any).stop_reason ?? null),
+      },
+    ],
+    ...(usage ? { usage } : {}),
+  }
+}
+
+export function toAnthropicResponse(resp: CommonResponse) {
+  if (!resp || typeof resp !== "object") return resp
+
+  if (!Array.isArray((resp as any).choices)) return resp
+
+  const choice = (resp as any).choices[0]
+  if (!choice) return resp
+
+  const message = choice.message
+  if (!message) return resp
+
+  const content: any[] = []
+
+  if (typeof message.content === "string" && message.content.length > 0)
+    content.push({ type: "text", text: message.content })
+
+  if (Array.isArray(message.tool_calls)) {
+    for (const tc of message.tool_calls) {
+      if ((tc as any).type === "function" && (tc as any).function) {
+        let input: any
+        try {
+          input = JSON.parse((tc as any).function.arguments)
+        } catch {
+          input = (tc as any).function.arguments
+        }
+        content.push({ type: "tool_use", id: (tc as any).id, name: (tc as any).function.name, input })
+      }
+    }
+  }
+
+  const stop_reason = (() => {
+    const r = choice.finish_reason
+    if (r === "stop") return "end_turn"
+    if (r === "tool_calls") return "tool_use"
+    if (r === "length") return "max_tokens"
+    if (r === "content_filter") return "content_filter"
+    return null
+  })()
+
+  const usage = (() => {
+    const u = (resp as any).usage
+    if (!u) return undefined
+    return {
+      input_tokens: u.prompt_tokens,
+      output_tokens: u.completion_tokens,
+      cache_read_input_tokens: u.prompt_tokens_details?.cached_tokens,
+    }
+  })()
+
+  return {
+    id: (resp as any).id,
+    type: "message",
+    role: "assistant",
+    content: content.length > 0 ? content : [{ type: "text", text: "" }],
+    model: (resp as any).model,
+    stop_reason,
+    usage,
+  }
+}
+
+export function fromAnthropicChunk(chunk: string): CommonChunk | string {
+  // Anthropic sends two lines per part: "event: <type>\n" + "data: <json>"
+  const lines = chunk.split("\n")
+  const dataLine = lines.find((l) => l.startsWith("data: "))
+  if (!dataLine) return chunk
+
+  let json
+  try {
+    json = JSON.parse(dataLine.slice(6))
+  } catch {
+    return chunk
+  }
+
+  const out: CommonChunk = {
+    id: json.id ?? json.message?.id ?? "",
+    object: "chat.completion.chunk",
+    created: Math.floor(Date.now() / 1000),
+    model: json.model ?? json.message?.model ?? "",
+    choices: [],
+  }
+
+  if (json.type === "content_block_start") {
+    const cb = json.content_block
+    if (cb?.type === "text") {
+      out.choices.push({ index: json.index ?? 0, delta: { role: "assistant", content: "" }, finish_reason: null })
+    } else if (cb?.type === "tool_use") {
+      out.choices.push({
+        index: json.index ?? 0,
+        delta: {
+          tool_calls: [
+            { index: json.index ?? 0, id: cb.id, type: "function", function: { name: cb.name, arguments: "" } },
+          ],
+        },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (json.type === "content_block_delta") {
+    const d = json.delta
+    if (d?.type === "text_delta") {
+      out.choices.push({ index: json.index ?? 0, delta: { content: d.text }, finish_reason: null })
+    } else if (d?.type === "input_json_delta") {
+      out.choices.push({
+        index: json.index ?? 0,
+        delta: { tool_calls: [{ index: json.index ?? 0, function: { arguments: d.partial_json } }] },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (json.type === "message_delta") {
+    const d = json.delta
+    const finish_reason = (() => {
+      const r = d?.stop_reason
+      if (r === "end_turn") return "stop"
+      if (r === "tool_use") return "tool_calls"
+      if (r === "max_tokens") return "length"
+      if (r === "content_filter") return "content_filter"
+      return null
+    })()
+
+    out.choices.push({ index: 0, delta: {}, finish_reason })
+  }
+
+  if (json.usage) {
+    const u = json.usage
+    out.usage = {
+      prompt_tokens: u.input_tokens,
+      completion_tokens: u.output_tokens,
+      total_tokens: (u.input_tokens || 0) + (u.output_tokens || 0),
+      ...(u.cache_read_input_tokens ? { prompt_tokens_details: { cached_tokens: u.cache_read_input_tokens } } : {}),
+    }
+  }
+
+  return out
+}
+
+export function toAnthropicChunk(chunk: CommonChunk): string {
+  if (!chunk.choices || !Array.isArray(chunk.choices) || chunk.choices.length === 0) {
+    return JSON.stringify({})
+  }
+
+  const choice = chunk.choices[0]
+  const delta = choice.delta
+  if (!delta) return JSON.stringify({})
+
+  const result: any = {}
+
+  if (delta.content) {
+    result.type = "content_block_delta"
+    result.index = 0
+    result.delta = { type: "text_delta", text: delta.content }
+  }
+
+  if (delta.tool_calls) {
+    for (const tc of delta.tool_calls) {
+      if (tc.function?.name) {
+        result.type = "content_block_start"
+        result.index = tc.index ?? 0
+        result.content_block = { type: "tool_use", id: tc.id, name: tc.function.name, input: {} }
+      } else if (tc.function?.arguments) {
+        result.type = "content_block_delta"
+        result.index = tc.index ?? 0
+        result.delta = { type: "input_json_delta", partial_json: tc.function.arguments }
+      }
+    }
+  }
+
+  if (choice.finish_reason) {
+    const stop_reason = (() => {
+      const r = choice.finish_reason
+      if (r === "stop") return "end_turn"
+      if (r === "tool_calls") return "tool_use"
+      if (r === "length") return "max_tokens"
+      if (r === "content_filter") return "content_filter"
+      return null
+    })()
+    result.type = "message_delta"
+    result.delta = { stop_reason, stop_sequence: null }
+  }
+
+  if (chunk.usage) {
+    const u = chunk.usage
+    result.usage = {
+      input_tokens: u.prompt_tokens,
+      output_tokens: u.completion_tokens,
+      cache_read_input_tokens: u.prompt_tokens_details?.cached_tokens,
+    }
+  }
+
+  return JSON.stringify(result)
+}
@@ -0,0 +1,541 @@
+import { ProviderHelper, CommonRequest, CommonResponse, CommonChunk } from "./provider"
+
+type Usage = {
+  prompt_tokens?: number
+  completion_tokens?: number
+  total_tokens?: number
+  // used by moonshot
+  cached_tokens?: number
+  // used by xai
+  prompt_tokens_details?: {
+    text_tokens?: number
+    audio_tokens?: number
+    image_tokens?: number
+    cached_tokens?: number
+  }
+  completion_tokens_details?: {
+    reasoning_tokens?: number
+    audio_tokens?: number
+    accepted_prediction_tokens?: number
+    rejected_prediction_tokens?: number
+  }
+}
+
+export const oaCompatHelper = {
+  format: "oa-compat",
+  modifyUrl: (providerApi: string) => providerApi + "/chat/completions",
+  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
+    headers.set("authorization", `Bearer ${apiKey}`)
+  },
+  modifyBody: (body: Record<string, any>) => {
+    return {
+      ...body,
+      ...(body.stream ? { stream_options: { include_usage: true } } : {}),
+    }
+  },
+  createUsageParser: () => {
+    let usage: Usage
+
+    return {
+      parse: (chunk: string) => {
+        if (!chunk.startsWith("data: ")) return
+
+        let json
+        try {
+          json = JSON.parse(chunk.slice(6)) as { usage?: Usage }
+        } catch (e) {
+          return
+        }
+
+        if (!json.usage) return
+        usage = json.usage
+      },
+      retrieve: () => usage,
+    }
+  },
+  normalizeUsage: (usage: Usage) => {
+    const inputTokens = usage.prompt_tokens ?? 0
+    const outputTokens = usage.completion_tokens ?? 0
+    const reasoningTokens = usage.completion_tokens_details?.reasoning_tokens ?? undefined
+    const cacheReadTokens = usage.cached_tokens ?? usage.prompt_tokens_details?.cached_tokens ?? undefined
+    return {
+      inputTokens: inputTokens - (cacheReadTokens ?? 0),
+      outputTokens,
+      reasoningTokens,
+      cacheReadTokens,
+      cacheWrite5mTokens: undefined,
+      cacheWrite1hTokens: undefined,
+    }
+  },
+} satisfies ProviderHelper
+
+export function fromOaCompatibleRequest(body: any): CommonRequest {
+  if (!body || typeof body !== "object") return body
+
+  const msgsIn = Array.isArray(body.messages) ? body.messages : []
+  const msgsOut: any[] = []
+
+  for (const m of msgsIn) {
+    if (!m || !m.role) continue
+
+    if (m.role === "system") {
+      if (typeof m.content === "string" && m.content.length > 0) msgsOut.push({ role: "system", content: m.content })
+      continue
+    }
+
+    if (m.role === "user") {
+      if (typeof m.content === "string") {
+        msgsOut.push({ role: "user", content: m.content })
+      } else if (Array.isArray(m.content)) {
+        const parts: any[] = []
+        for (const p of m.content) {
+          if (!p || !p.type) continue
+          if (p.type === "text" && typeof p.text === "string") parts.push({ type: "text", text: p.text })
+          if (p.type === "image_url") parts.push({ type: "image_url", image_url: p.image_url })
+        }
+        if (parts.length === 1 && parts[0].type === "text") msgsOut.push({ role: "user", content: parts[0].text })
+        else if (parts.length > 0) msgsOut.push({ role: "user", content: parts })
+      }
+      continue
+    }
+
+    if (m.role === "assistant") {
+      const out: any = { role: "assistant" }
+      if (typeof m.content === "string") out.content = m.content
+      if (Array.isArray(m.tool_calls)) out.tool_calls = m.tool_calls
+      msgsOut.push(out)
+      continue
+    }
+
+    if (m.role === "tool") {
+      msgsOut.push({ role: "tool", tool_call_id: m.tool_call_id, content: m.content })
+      continue
+    }
+  }
+
+  return {
+    max_tokens: body.max_tokens,
+    temperature: body.temperature,
+    top_p: body.top_p,
+    stop: body.stop,
+    messages: msgsOut,
+    stream: !!body.stream,
+    tools: Array.isArray(body.tools) ? body.tools : undefined,
+    tool_choice: body.tool_choice,
+  }
+}
+
+export function toOaCompatibleRequest(body: CommonRequest) {
+  if (!body || typeof body !== "object") return body
+
+  const msgsIn = Array.isArray(body.messages) ? body.messages : []
+  const msgsOut: any[] = []
+
+  const toImg = (p: any) => {
+    if (!p || typeof p !== "object") return undefined
+    if (p.type === "image_url" && p.image_url) return { type: "image_url", image_url: p.image_url }
+    const s = (p as any).source
+    if (!s || typeof s !== "object") return undefined
+    if (s.type === "url" && typeof s.url === "string") return { type: "image_url", image_url: { url: s.url } }
+    if (s.type === "base64" && typeof s.media_type === "string" && typeof s.data === "string")
+      return { type: "image_url", image_url: { url: `data:${s.media_type};base64,${s.data}` } }
+    return undefined
+  }
+
+  for (const m of msgsIn) {
+    if (!m || !m.role) continue
+
+    if (m.role === "system") {
+      if (typeof m.content === "string" && m.content.length > 0) msgsOut.push({ role: "system", content: m.content })
+      continue
+    }
+
+    if (m.role === "user") {
+      if (typeof m.content === "string") {
+        msgsOut.push({ role: "user", content: m.content })
+        continue
+      }
+      if (Array.isArray(m.content)) {
+        const parts: any[] = []
+        for (const p of m.content) {
+          if (!p || !p.type) continue
+          if (p.type === "text" && typeof p.text === "string") parts.push({ type: "text", text: p.text })
+          const ip = toImg(p)
+          if (ip) parts.push(ip)
+        }
+        if (parts.length === 1 && parts[0].type === "text") msgsOut.push({ role: "user", content: parts[0].text })
+        else if (parts.length > 0) msgsOut.push({ role: "user", content: parts })
+      }
+      continue
+    }
+
+    if (m.role === "assistant") {
+      const out: any = { role: "assistant" }
+      if (typeof m.content === "string") out.content = m.content
+      if (Array.isArray(m.tool_calls)) out.tool_calls = m.tool_calls
+      msgsOut.push(out)
+      continue
+    }
+
+    if (m.role === "tool") {
+      msgsOut.push({ role: "tool", tool_call_id: m.tool_call_id, content: m.content })
+      continue
+    }
+  }
+
+  const tools = Array.isArray(body.tools)
+    ? body.tools.map((tool: any) => ({
+        type: "function",
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: tool.parameters,
+        },
+      }))
+    : undefined
+
+  return {
+    model: body.model,
+    max_tokens: body.max_tokens,
+    temperature: body.temperature,
+    top_p: body.top_p,
+    stop: body.stop,
+    messages: msgsOut,
+    stream: !!body.stream,
+    tools,
+    tool_choice: body.tool_choice,
+    response_format: (body as any).response_format,
+  }
+}
+
+export function fromOaCompatibleResponse(resp: any): CommonResponse {
+  if (!resp || typeof resp !== "object") return resp
+
+  if (!Array.isArray((resp as any).choices)) return resp
+
+  const choice = (resp as any).choices[0]
+  if (!choice) return resp
+
+  const message = choice.message
+  if (!message) return resp
+
+  const content: any[] = []
+
+  if (typeof message.content === "string" && message.content.length > 0) {
+    content.push({ type: "text", text: message.content })
+  }
+
+  if (Array.isArray(message.tool_calls)) {
+    for (const toolCall of message.tool_calls) {
+      if (toolCall.type === "function" && toolCall.function) {
+        let input
+        try {
+          input = JSON.parse(toolCall.function.arguments)
+        } catch {
+          input = toolCall.function.arguments
+        }
+        content.push({
+          type: "tool_use",
+          id: toolCall.id,
+          name: toolCall.function.name,
+          input,
+        })
+      }
+    }
+  }
+
+  const stopReason = (() => {
+    const reason = choice.finish_reason
+    if (reason === "stop") return "stop"
+    if (reason === "tool_calls") return "tool_calls"
+    if (reason === "length") return "length"
+    if (reason === "content_filter") return "content_filter"
+    return null
+  })()
+
+  const usage = (() => {
+    const u = (resp as any).usage
+    if (!u) return undefined
+    return {
+      prompt_tokens: u.prompt_tokens,
+      completion_tokens: u.completion_tokens,
+      total_tokens: u.total_tokens,
+      ...(u.prompt_tokens_details?.cached_tokens
+        ? { prompt_tokens_details: { cached_tokens: u.prompt_tokens_details.cached_tokens } }
+        : {}),
+    }
+  })()
+
+  return {
+    id: (resp as any).id,
+    object: "chat.completion" as const,
+    created: Math.floor(Date.now() / 1000),
+    model: (resp as any).model,
+    choices: [
+      {
+        index: 0,
+        message: {
+          role: "assistant" as const,
+          ...(content.length > 0 && content.some((c) => c.type === "text")
+            ? {
+                content: content
+                  .filter((c) => c.type === "text")
+                  .map((c: any) => c.text)
+                  .join(""),
+              }
+            : {}),
+          ...(content.length > 0 && content.some((c) => c.type === "tool_use")
+            ? {
+                tool_calls: content
+                  .filter((c) => c.type === "tool_use")
+                  .map((c: any) => ({
+                    id: c.id,
+                    type: "function" as const,
+                    function: {
+                      name: c.name,
+                      arguments: typeof c.input === "string" ? c.input : JSON.stringify(c.input),
+                    },
+                  })),
+              }
+            : {}),
+        },
+        finish_reason: stopReason,
+      },
+    ],
+    ...(usage ? { usage } : {}),
+  }
+}
+
+export function toOaCompatibleResponse(resp: CommonResponse) {
+  if (!resp || typeof resp !== "object") return resp
+
+  if (Array.isArray((resp as any).choices)) return resp
+
+  const isAnthropic = typeof (resp as any).type === "string" && (resp as any).type === "message"
+  if (!isAnthropic) return resp
+
+  const idIn = (resp as any).id
+  const id =
+    typeof idIn === "string" ? idIn.replace(/^msg_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
+  const model = (resp as any).model
+
+  const blocks: any[] = Array.isArray((resp as any).content) ? (resp as any).content : []
+  const text = blocks
+    .filter((b) => b && b.type === "text" && typeof b.text === "string")
+    .map((b) => b.text)
+    .join("")
+  const tcs = blocks
+    .filter((b) => b && b.type === "tool_use")
+    .map((b) => {
+      const name = (b as any).name
+      const args = (() => {
+        const inp = (b as any).input
+        if (typeof inp === "string") return inp
+        try {
+          return JSON.stringify(inp ?? {})
+        } catch {
+          return String(inp ?? "")
+        }
+      })()
+      const tid =
+        typeof (b as any).id === "string" && (b as any).id.length > 0
+          ? (b as any).id
+          : `toolu_${Math.random().toString(36).slice(2)}`
+      return { id: tid, type: "function" as const, function: { name, arguments: args } }
+    })
+
+  const finish = (r: string | null) => {
+    if (r === "end_turn") return "stop"
+    if (r === "tool_use") return "tool_calls"
+    if (r === "max_tokens") return "length"
+    if (r === "content_filter") return "content_filter"
+    return null
+  }
+
+  const u = (resp as any).usage
+  const usage = (() => {
+    if (!u) return undefined as any
+    const pt = typeof u.input_tokens === "number" ? u.input_tokens : undefined
+    const ct = typeof u.output_tokens === "number" ? u.output_tokens : undefined
+    const total = pt != null && ct != null ? pt + ct : undefined
+    const cached = typeof u.cache_read_input_tokens === "number" ? u.cache_read_input_tokens : undefined
+    const details = cached != null ? { cached_tokens: cached } : undefined
+    return {
+      prompt_tokens: pt,
+      completion_tokens: ct,
+      total_tokens: total,
+      ...(details ? { prompt_tokens_details: details } : {}),
+    }
+  })()
+
+  return {
+    id,
+    object: "chat.completion",
+    created: Math.floor(Date.now() / 1000),
+    model,
+    choices: [
+      {
+        index: 0,
+        message: {
+          role: "assistant",
+          ...(text && text.length > 0 ? { content: text } : {}),
+          ...(tcs.length > 0 ? { tool_calls: tcs } : {}),
+        },
+        finish_reason: finish((resp as any).stop_reason ?? null),
+      },
+    ],
+    ...(usage ? { usage } : {}),
+  }
+}
+
+export function fromOaCompatibleChunk(chunk: string): CommonChunk | string {
+  if (!chunk.startsWith("data: ")) return chunk
+
+  let json
+  try {
+    json = JSON.parse(chunk.slice(6))
+  } catch {
+    return chunk
+  }
+
+  if (!json.choices || !Array.isArray(json.choices) || json.choices.length === 0) {
+    return chunk
+  }
+
+  const choice = json.choices[0]
+  const delta = choice.delta
+
+  if (!delta) return chunk
+
+  const result: CommonChunk = {
+    id: json.id ?? "",
+    object: "chat.completion.chunk",
+    created: json.created ?? Math.floor(Date.now() / 1000),
+    model: json.model ?? "",
+    choices: [],
+  }
+
+  if (delta.content) {
+    result.choices.push({
+      index: choice.index ?? 0,
+      delta: { content: delta.content },
+      finish_reason: null,
+    })
+  }
+
+  if (delta.tool_calls) {
+    for (const toolCall of delta.tool_calls) {
+      result.choices.push({
+        index: choice.index ?? 0,
+        delta: {
+          tool_calls: [
+            {
+              index: toolCall.index ?? 0,
+              id: toolCall.id,
+              type: toolCall.type ?? "function",
+              function: toolCall.function,
+            },
+          ],
+        },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (choice.finish_reason) {
+    result.choices.push({
+      index: choice.index ?? 0,
+      delta: {},
+      finish_reason: choice.finish_reason,
+    })
+  }
+
+  if (json.usage) {
+    const usage = json.usage
+    result.usage = {
+      prompt_tokens: usage.prompt_tokens,
+      completion_tokens: usage.completion_tokens,
+      total_tokens: usage.total_tokens,
+      ...(usage.prompt_tokens_details?.cached_tokens
+        ? { prompt_tokens_details: { cached_tokens: usage.prompt_tokens_details.cached_tokens } }
+        : {}),
+    }
+  }
+
+  return result
+}
+
+export function toOaCompatibleChunk(chunk: CommonChunk): string {
+  const result: any = {
+    id: chunk.id,
+    object: "chat.completion.chunk",
+    created: chunk.created,
+    model: chunk.model,
+    choices: [],
+  }
+
+  if (!chunk.choices || chunk.choices.length === 0) {
+    return `data: ${JSON.stringify(result)}`
+  }
+
+  const choice = chunk.choices[0]
+  const delta = choice.delta
+
+  if (delta?.role) {
+    result.choices.push({
+      index: choice.index,
+      delta: { role: delta.role },
+      finish_reason: null,
+    })
+  }
+
+  if (delta?.content) {
+    result.choices.push({
+      index: choice.index,
+      delta: { content: delta.content },
+      finish_reason: null,
+    })
+  }
+
+  if (delta?.tool_calls) {
+    for (const tc of delta.tool_calls) {
+      result.choices.push({
+        index: choice.index,
+        delta: {
+          tool_calls: [
+            {
+              index: tc.index,
+              id: tc.id,
+              type: tc.type,
+              function: tc.function,
+            },
+          ],
+        },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (choice.finish_reason) {
+    result.choices.push({
+      index: choice.index,
+      delta: {},
+      finish_reason: choice.finish_reason,
+    })
+  }
+
+  if (chunk.usage) {
+    result.usage = {
+      prompt_tokens: chunk.usage.prompt_tokens,
+      completion_tokens: chunk.usage.completion_tokens,
+      total_tokens: chunk.usage.total_tokens,
+      ...(chunk.usage.prompt_tokens_details?.cached_tokens
+        ? {
+            prompt_tokens_details: { cached_tokens: chunk.usage.prompt_tokens_details.cached_tokens },
+          }
+        : {}),
+    }
+  }
+
+  return `data: ${JSON.stringify(result)}`
+}
@@ -0,0 +1,600 @@
+import { ProviderHelper, CommonRequest, CommonResponse, CommonChunk } from "./provider"
+
+type Usage = {
+  input_tokens?: number
+  input_tokens_details?: {
+    cached_tokens?: number
+  }
+  output_tokens?: number
+  output_tokens_details?: {
+    reasoning_tokens?: number
+  }
+  total_tokens?: number
+}
+
+export const openaiHelper = {
+  format: "openai",
+  modifyUrl: (providerApi: string) => providerApi + "/responses",
+  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => {
+    headers.set("authorization", `Bearer ${apiKey}`)
+  },
+  modifyBody: (body: Record<string, any>) => {
+    return body
+  },
+  createUsageParser: () => {
+    let usage: Usage
+
+    return {
+      parse: (chunk: string) => {
+        const [event, data] = chunk.split("\n")
+        if (event !== "event: response.completed") return
+        if (!data.startsWith("data: ")) return
+
+        let json
+        try {
+          json = JSON.parse(data.slice(6)) as { response?: { usage?: Usage } }
+        } catch (e) {
+          return
+        }
+
+        if (!json.response?.usage) return
+        usage = json.response.usage
+      },
+      retrieve: () => usage,
+    }
+  },
+  normalizeUsage: (usage: Usage) => {
+    const inputTokens = usage.input_tokens ?? 0
+    const outputTokens = usage.output_tokens ?? 0
+    const reasoningTokens = usage.output_tokens_details?.reasoning_tokens ?? undefined
+    const cacheReadTokens = usage.input_tokens_details?.cached_tokens ?? undefined
+    return {
+      inputTokens: inputTokens - (cacheReadTokens ?? 0),
+      outputTokens: outputTokens - (reasoningTokens ?? 0),
+      reasoningTokens,
+      cacheReadTokens,
+      cacheWrite5mTokens: undefined,
+      cacheWrite1hTokens: undefined,
+    }
+  },
+} satisfies ProviderHelper
+
+export function fromOpenaiRequest(body: any): CommonRequest {
+  if (!body || typeof body !== "object") return body
+
+  const toImg = (p: any) => {
+    if (!p || typeof p !== "object") return undefined
+    if ((p as any).type === "image_url" && (p as any).image_url)
+      return { type: "image_url", image_url: (p as any).image_url }
+    if ((p as any).type === "input_image" && (p as any).image_url)
+      return { type: "image_url", image_url: (p as any).image_url }
+    const s = (p as any).source
+    if (!s || typeof s !== "object") return undefined
+    if ((s as any).type === "url" && typeof (s as any).url === "string")
+      return { type: "image_url", image_url: { url: (s as any).url } }
+    if (
+      (s as any).type === "base64" &&
+      typeof (s as any).media_type === "string" &&
+      typeof (s as any).data === "string"
+    )
+      return { type: "image_url", image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` } }
+    return undefined
+  }
+
+  const msgs: any[] = []
+
+  const inMsgs = Array.isArray(body.input) ? body.input : Array.isArray(body.messages) ? body.messages : []
+
+  for (const m of inMsgs) {
+    if (!m) continue
+
+    // Responses API items without role:
+    if (!(m as any).role && (m as any).type) {
+      if ((m as any).type === "function_call") {
+        const name = (m as any).name
+        const a = (m as any).arguments
+        const args = typeof a === "string" ? a : JSON.stringify(a ?? {})
+        msgs.push({
+          role: "assistant",
+          tool_calls: [{ id: (m as any).id, type: "function", function: { name, arguments: args } }],
+        })
+      }
+      if ((m as any).type === "function_call_output") {
+        const id = (m as any).call_id
+        const out = (m as any).output
+        const content = typeof out === "string" ? out : JSON.stringify(out)
+        msgs.push({ role: "tool", tool_call_id: id, content })
+      }
+      continue
+    }
+
+    if ((m as any).role === "system" || (m as any).role === "developer") {
+      const c = (m as any).content
+      if (typeof c === "string" && c.length > 0) msgs.push({ role: "system", content: c })
+      if (Array.isArray(c)) {
+        const t = c.find((p: any) => p && typeof p.text === "string")
+        if (t && typeof t.text === "string" && t.text.length > 0) msgs.push({ role: "system", content: t.text })
+      }
+      continue
+    }
+
+    if ((m as any).role === "user") {
+      const c = (m as any).content
+      if (typeof c === "string") {
+        msgs.push({ role: "user", content: c })
+      } else if (Array.isArray(c)) {
+        const parts: any[] = []
+        for (const p of c) {
+          if (!p || !(p as any).type) continue
+          if (((p as any).type === "text" || (p as any).type === "input_text") && typeof (p as any).text === "string")
+            parts.push({ type: "text", text: (p as any).text })
+          const ip = toImg(p)
+          if (ip) parts.push(ip)
+          if ((p as any).type === "tool_result") {
+            const id = (p as any).tool_call_id
+            const content =
+              typeof (p as any).content === "string" ? (p as any).content : JSON.stringify((p as any).content)
+            msgs.push({ role: "tool", tool_call_id: id, content })
+          }
+        }
+        if (parts.length === 1 && parts[0].type === "text") msgs.push({ role: "user", content: parts[0].text })
+        else if (parts.length > 0) msgs.push({ role: "user", content: parts })
+      }
+      continue
+    }
+
+    if ((m as any).role === "assistant") {
+      const c = (m as any).content
+      const out: any = { role: "assistant" }
+      if (typeof c === "string" && c.length > 0) out.content = c
+      if (Array.isArray((m as any).tool_calls)) out.tool_calls = (m as any).tool_calls
+      msgs.push(out)
+      continue
+    }
+
+    if ((m as any).role === "tool") {
+      msgs.push({ role: "tool", tool_call_id: (m as any).tool_call_id, content: (m as any).content })
+      continue
+    }
+  }
+
+  const tcIn = body.tool_choice
+  const tc = (() => {
+    if (!tcIn) return undefined
+    if (tcIn === "auto") return "auto"
+    if (tcIn === "required") return "required"
+    if ((tcIn as any).type === "function" && (tcIn as any).function?.name)
+      return { type: "function" as const, function: { name: (tcIn as any).function.name } }
+    return undefined
+  })()
+
+  const stop = (() => {
+    const v = body.stop_sequences ?? body.stop
+    if (!v) return undefined
+    if (Array.isArray(v)) return v.length === 1 ? v[0] : v
+    if (typeof v === "string") return v
+    return undefined
+  })()
+
+  return {
+    max_tokens: body.max_output_tokens ?? body.max_tokens,
+    temperature: body.temperature,
+    top_p: body.top_p,
+    stop,
+    messages: msgs,
+    stream: !!body.stream,
+    tools: Array.isArray(body.tools) ? body.tools : undefined,
+    tool_choice: tc,
+  }
+}
+
+export function toOpenaiRequest(body: CommonRequest) {
+  if (!body || typeof body !== "object") return body
+
+  const msgsIn = Array.isArray(body.messages) ? body.messages : []
+  const input: any[] = []
+
+  const toPart = (p: any) => {
+    if (!p || typeof p !== "object") return undefined
+    if ((p as any).type === "text" && typeof (p as any).text === "string")
+      return { type: "input_text", text: (p as any).text }
+    if ((p as any).type === "image_url" && (p as any).image_url)
+      return { type: "input_image", image_url: (p as any).image_url }
+    const s = (p as any).source
+    if (!s || typeof s !== "object") return undefined
+    if ((s as any).type === "url" && typeof (s as any).url === "string")
+      return { type: "input_image", image_url: { url: (s as any).url } }
+    if (
+      (s as any).type === "base64" &&
+      typeof (s as any).media_type === "string" &&
+      typeof (s as any).data === "string"
+    )
+      return { type: "input_image", image_url: { url: `data:${(s as any).media_type};base64,${(s as any).data}` } }
+    return undefined
+  }
+
+  for (const m of msgsIn) {
+    if (!m || !(m as any).role) continue
+
+    if ((m as any).role === "system") {
+      const c = (m as any).content
+      if (typeof c === "string") input.push({ role: "system", content: c })
+      continue
+    }
+
+    if ((m as any).role === "user") {
+      const c = (m as any).content
+      if (typeof c === "string") {
+        input.push({ role: "user", content: [{ type: "input_text", text: c }] })
+      } else if (Array.isArray(c)) {
+        const parts: any[] = []
+        for (const p of c) {
+          const op = toPart(p)
+          if (op) parts.push(op)
+        }
+        if (parts.length > 0) input.push({ role: "user", content: parts })
+      }
+      continue
+    }
+
+    if ((m as any).role === "assistant") {
+      const c = (m as any).content
+      if (typeof c === "string" && c.length > 0) {
+        input.push({ role: "assistant", content: [{ type: "output_text", text: c }] })
+      }
+      if (Array.isArray((m as any).tool_calls)) {
+        for (const tc of (m as any).tool_calls) {
+          if ((tc as any).type === "function" && (tc as any).function) {
+            const name = (tc as any).function.name
+            const a = (tc as any).function.arguments
+            const args = typeof a === "string" ? a : JSON.stringify(a)
+            input.push({ type: "function_call", call_id: (tc as any).id, name, arguments: args })
+          }
+        }
+      }
+      continue
+    }
+
+    if ((m as any).role === "tool") {
+      const out = typeof (m as any).content === "string" ? (m as any).content : JSON.stringify((m as any).content)
+      input.push({ type: "function_call_output", call_id: (m as any).tool_call_id, output: out })
+      continue
+    }
+  }
+
+  const stop_sequences = (() => {
+    const v = body.stop
+    if (!v) return undefined
+    if (Array.isArray(v)) return v
+    if (typeof v === "string") return [v]
+    return undefined
+  })()
+
+  const tcIn = body.tool_choice
+  const tool_choice = (() => {
+    if (!tcIn) return undefined
+    if (tcIn === "auto") return "auto"
+    if (tcIn === "required") return "required"
+    if ((tcIn as any).type === "function" && (tcIn as any).function?.name)
+      return { type: "function", function: { name: (tcIn as any).function.name } }
+    return undefined
+  })()
+
+  const tools = (() => {
+    if (!Array.isArray(body.tools)) return undefined
+    return body.tools.map((tool: any) => {
+      if (tool.type === "function") {
+        return {
+          type: "function",
+          name: tool.function?.name,
+          description: tool.function?.description,
+          parameters: tool.function?.parameters,
+          strict: tool.function?.strict,
+        }
+      }
+      return tool
+    })
+  })()
+
+  return {
+    model: body.model,
+    input,
+    max_output_tokens: body.max_tokens,
+    top_p: body.top_p,
+    stop_sequences,
+    stream: !!body.stream,
+    tools,
+    tool_choice,
+    include: Array.isArray((body as any).include) ? (body as any).include : undefined,
+    truncation: (body as any).truncation,
+    metadata: (body as any).metadata,
+    store: (body as any).store,
+    user: (body as any).user,
+    text: { verbosity: "low" },
+    reasoning: { effort: "medium" },
+  }
+}
+
+export function fromOpenaiResponse(resp: any): CommonResponse {
+  if (!resp || typeof resp !== "object") return resp
+  if (Array.isArray((resp as any).choices)) return resp
+
+  const r = (resp as any).response ?? resp
+  if (!r || typeof r !== "object") return resp
+
+  const idIn = (r as any).id
+  const id =
+    typeof idIn === "string" ? idIn.replace(/^resp_/, "chatcmpl_") : `chatcmpl_${Math.random().toString(36).slice(2)}`
+  const model = (r as any).model ?? (resp as any).model
+
+  const out = Array.isArray((r as any).output) ? (r as any).output : []
+  const text = out
+    .filter((o: any) => o && o.type === "message" && Array.isArray((o as any).content))
+    .flatMap((o: any) => (o as any).content)
+    .filter((p: any) => p && p.type === "output_text" && typeof p.text === "string")
+    .map((p: any) => p.text)
+    .join("")
+
+  const tcs = out
+    .filter((o: any) => o && o.type === "function_call")
+    .map((o: any) => {
+      const name = (o as any).name
+      const a = (o as any).arguments
+      const args = typeof a === "string" ? a : JSON.stringify(a ?? {})
+      const tid =
+        typeof (o as any).id === "string" && (o as any).id.length > 0
+          ? (o as any).id
+          : `toolu_${Math.random().toString(36).slice(2)}`
+      return { id: tid, type: "function" as const, function: { name, arguments: args } }
+    })
+
+  const finish = (r: string | null) => {
+    if (r === "stop") return "stop"
+    if (r === "tool_call" || r === "tool_calls") return "tool_calls"
+    if (r === "length" || r === "max_output_tokens") return "length"
+    if (r === "content_filter") return "content_filter"
+    return null
+  }
+
+  const u = (r as any).usage ?? (resp as any).usage
+  const usage = (() => {
+    if (!u) return undefined as any
+    const pt = typeof (u as any).input_tokens === "number" ? (u as any).input_tokens : undefined
+    const ct = typeof (u as any).output_tokens === "number" ? (u as any).output_tokens : undefined
+    const total = pt != null && ct != null ? pt + ct : undefined
+    const cached = (u as any).input_tokens_details?.cached_tokens
+    const details = typeof cached === "number" ? { cached_tokens: cached } : undefined
+    return {
+      prompt_tokens: pt,
+      completion_tokens: ct,
+      total_tokens: total,
+      ...(details ? { prompt_tokens_details: details } : {}),
+    }
+  })()
+
+  return {
+    id,
+    object: "chat.completion",
+    created: Math.floor(Date.now() / 1000),
+    model,
+    choices: [
+      {
+        index: 0,
+        message: {
+          role: "assistant",
+          ...(text && text.length > 0 ? { content: text } : {}),
+          ...(tcs.length > 0 ? { tool_calls: tcs } : {}),
+        },
+        finish_reason: finish((r as any).stop_reason ?? null),
+      },
+    ],
+    ...(usage ? { usage } : {}),
+  }
+}
+
+export function toOpenaiResponse(resp: CommonResponse) {
+  if (!resp || typeof resp !== "object") return resp
+  if (!Array.isArray((resp as any).choices)) return resp
+
+  const choice = (resp as any).choices[0]
+  if (!choice) return resp
+
+  const msg = choice.message
+  if (!msg) return resp
+
+  const outputItems: any[] = []
+
+  if (typeof msg.content === "string" && msg.content.length > 0) {
+    outputItems.push({
+      id: `msg_${Math.random().toString(36).slice(2)}`,
+      type: "message",
+      status: "completed",
+      role: "assistant",
+      content: [{ type: "output_text", text: msg.content, annotations: [], logprobs: [] }],
+    })
+  }
+
+  if (Array.isArray(msg.tool_calls)) {
+    for (const tc of msg.tool_calls) {
+      if ((tc as any).type === "function" && (tc as any).function) {
+        outputItems.push({
+          id: (tc as any).id,
+          type: "function_call",
+          name: (tc as any).function.name,
+          call_id: (tc as any).id,
+          arguments: (tc as any).function.arguments,
+        })
+      }
+    }
+  }
+
+  const stop_reason = (() => {
+    const r = choice.finish_reason
+    if (r === "stop") return "stop"
+    if (r === "tool_calls") return "tool_call"
+    if (r === "length") return "max_output_tokens"
+    if (r === "content_filter") return "content_filter"
+    return null
+  })()
+
+  const usage = (() => {
+    const u = (resp as any).usage
+    if (!u) return undefined
+    return {
+      input_tokens: u.prompt_tokens,
+      output_tokens: u.completion_tokens,
+      total_tokens: u.total_tokens,
+      ...(u.prompt_tokens_details?.cached_tokens
+        ? { input_tokens_details: { cached_tokens: u.prompt_tokens_details.cached_tokens } }
+        : {}),
+    }
+  })()
+
+  return {
+    id: (resp as any).id?.replace(/^chatcmpl_/, "resp_") ?? `resp_${Math.random().toString(36).slice(2)}`,
+    object: "response",
+    model: (resp as any).model,
+    output: outputItems,
+    stop_reason,
+    usage,
+  }
+}
+
+export function fromOpenaiChunk(chunk: string): CommonChunk | string {
+  const lines = chunk.split("\n")
+  const ev = lines[0]
+  const dl = lines[1]
+  if (!ev || !dl || !dl.startsWith("data: ")) return chunk
+
+  let json: any
+  try {
+    json = JSON.parse(dl.slice(6))
+  } catch {
+    return chunk
+  }
+
+  const respObj = json.response ?? {}
+
+  const out: CommonChunk = {
+    id: respObj.id ?? json.id ?? "",
+    object: "chat.completion.chunk",
+    created: Math.floor(Date.now() / 1000),
+    model: respObj.model ?? json.model ?? "",
+    choices: [],
+  }
+
+  const e = ev.replace("event: ", "").trim()
+
+  if (e === "response.output_text.delta") {
+    const d = (json as any).delta ?? (json as any).text ?? (json as any).output_text_delta
+    if (typeof d === "string" && d.length > 0)
+      out.choices.push({ index: 0, delta: { content: d }, finish_reason: null })
+  }
+
+  if (e === "response.output_item.added" && (json as any).item?.type === "function_call") {
+    const name = (json as any).item?.name
+    const id = (json as any).item?.id
+    if (typeof name === "string" && name.length > 0) {
+      out.choices.push({
+        index: 0,
+        delta: { tool_calls: [{ index: 0, id, type: "function", function: { name, arguments: "" } }] },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (e === "response.function_call_arguments.delta") {
+    const a = (json as any).delta ?? (json as any).arguments_delta
+    if (typeof a === "string" && a.length > 0) {
+      out.choices.push({
+        index: 0,
+        delta: { tool_calls: [{ index: 0, function: { arguments: a } }] },
+        finish_reason: null,
+      })
+    }
+  }
+
+  if (e === "response.completed") {
+    const fr = (() => {
+      const sr = (respObj as any).stop_reason ?? (json as any).stop_reason
+      if (sr === "stop") return "stop"
+      if (sr === "tool_call" || sr === "tool_calls") return "tool_calls"
+      if (sr === "length" || sr === "max_output_tokens") return "length"
+      if (sr === "content_filter") return "content_filter"
+      return null
+    })()
+    out.choices.push({ index: 0, delta: {}, finish_reason: fr })
+
+    const u = (respObj as any).usage ?? (json as any).response?.usage
+    if (u) {
+      out.usage = {
+        prompt_tokens: u.input_tokens,
+        completion_tokens: u.output_tokens,
+        total_tokens: (u.input_tokens || 0) + (u.output_tokens || 0),
+        ...(u.input_tokens_details?.cached_tokens
+          ? { prompt_tokens_details: { cached_tokens: u.input_tokens_details.cached_tokens } }
+          : {}),
+      }
+    }
+  }
+
+  return out
+}
+
+export function toOpenaiChunk(chunk: CommonChunk): string {
+  if (!chunk.choices || !Array.isArray(chunk.choices) || chunk.choices.length === 0) {
+    return ""
+  }
+
+  const choice = chunk.choices[0]
+  const d = choice.delta
+  if (!d) return ""
+
+  const id = chunk.id
+  const model = chunk.model
+
+  if (d.content) {
+    const data = { id, type: "response.output_text.delta", delta: d.content, response: { id, model } }
+    return `event: response.output_text.delta\ndata: ${JSON.stringify(data)}`
+  }
+
+  if (d.tool_calls) {
+    for (const tc of d.tool_calls) {
+      if (tc.function?.name) {
+        const data = {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: { id: tc.id, type: "function_call", name: tc.function.name, call_id: tc.id, arguments: "" },
+        }
+        return `event: response.output_item.added\ndata: ${JSON.stringify(data)}`
+      }
+      if (tc.function?.arguments) {
+        const data = {
+          type: "response.function_call_arguments.delta",
+          output_index: 0,
+          delta: tc.function.arguments,
+        }
+        return `event: response.function_call_arguments.delta\ndata: ${JSON.stringify(data)}`
+      }
+    }
+  }
+
+  if (choice.finish_reason) {
+    const u = chunk.usage
+    const usage = u
+      ? {
+          input_tokens: u.prompt_tokens,
+          output_tokens: u.completion_tokens,
+          total_tokens: u.total_tokens,
+          ...(u.prompt_tokens_details?.cached_tokens
+            ? { input_tokens_details: { cached_tokens: u.prompt_tokens_details.cached_tokens } }
+            : {}),
+        }
+      : undefined
+
+    const data: any = { id, type: "response.completed", response: { id, model, ...(usage ? { usage } : {}) } }
+    return `event: response.completed\ndata: ${JSON.stringify(data)}`
+  }
+
+  return ""
+}
@@ -0,0 +1,207 @@
+import { Format } from "../format"
+
+import {
+  fromAnthropicChunk,
+  fromAnthropicRequest,
+  fromAnthropicResponse,
+  toAnthropicChunk,
+  toAnthropicRequest,
+  toAnthropicResponse,
+} from "./anthropic"
+import {
+  fromOpenaiChunk,
+  fromOpenaiRequest,
+  fromOpenaiResponse,
+  toOpenaiChunk,
+  toOpenaiRequest,
+  toOpenaiResponse,
+} from "./openai"
+import {
+  fromOaCompatibleChunk,
+  fromOaCompatibleRequest,
+  fromOaCompatibleResponse,
+  toOaCompatibleChunk,
+  toOaCompatibleRequest,
+  toOaCompatibleResponse,
+} from "./openai-compatible"
+
+export type ProviderHelper = {
+  format: Format
+  modifyUrl: (providerApi: string) => string
+  modifyHeaders: (headers: Headers, body: Record<string, any>, apiKey: string) => void
+  modifyBody: (body: Record<string, any>) => Record<string, any>
+  createUsageParser: () => {
+    parse: (chunk: string) => void
+    retrieve: () => any
+  }
+  normalizeUsage: (usage: any) => {
+    inputTokens: number
+    outputTokens: number
+    reasoningTokens?: number
+    cacheReadTokens?: number
+    cacheWrite5mTokens?: number
+    cacheWrite1hTokens?: number
+  }
+}
+
+export interface CommonMessage {
+  role: "system" | "user" | "assistant" | "tool"
+  content?: string | Array<CommonContentPart>
+  tool_call_id?: string
+  tool_calls?: CommonToolCall[]
+}
+
+export interface CommonContentPart {
+  type: "text" | "image_url"
+  text?: string
+  image_url?: { url: string }
+}
+
+export interface CommonToolCall {
+  id: string
+  type: "function"
+  function: {
+    name: string
+    arguments: string
+  }
+}
+
+export interface CommonTool {
+  type: "function"
+  function: {
+    name: string
+    description?: string
+    parameters?: Record<string, any>
+  }
+}
+
+export interface CommonUsage {
+  input_tokens?: number
+  output_tokens?: number
+  total_tokens?: number
+  prompt_tokens?: number
+  completion_tokens?: number
+  cache_read_input_tokens?: number
+  cache_creation?: {
+    ephemeral_5m_input_tokens?: number
+    ephemeral_1h_input_tokens?: number
+  }
+  input_tokens_details?: {
+    cached_tokens?: number
+  }
+  output_tokens_details?: {
+    reasoning_tokens?: number
+  }
+}
+
+export interface CommonRequest {
+  model?: string
+  max_tokens?: number
+  temperature?: number
+  top_p?: number
+  stop?: string | string[]
+  messages: CommonMessage[]
+  stream?: boolean
+  tools?: CommonTool[]
+  tool_choice?: "auto" | "required" | { type: "function"; function: { name: string } }
+}
+
+export interface CommonResponse {
+  id: string
+  object: "chat.completion"
+  created: number
+  model: string
+  choices: Array<{
+    index: number
+    message: {
+      role: "assistant"
+      content?: string
+      tool_calls?: CommonToolCall[]
+    }
+    finish_reason: "stop" | "tool_calls" | "length" | "content_filter" | null
+  }>
+  usage?: {
+    prompt_tokens?: number
+    completion_tokens?: number
+    total_tokens?: number
+    prompt_tokens_details?: { cached_tokens?: number }
+  }
+}
+
+export interface CommonChunk {
+  id: string
+  object: "chat.completion.chunk"
+  created: number
+  model: string
+  choices: Array<{
+    index: number
+    delta: {
+      role?: "assistant"
+      content?: string
+      tool_calls?: Array<{
+        index: number
+        id?: string
+        type?: "function"
+        function?: {
+          name?: string
+          arguments?: string
+        }
+      }>
+    }
+    finish_reason: "stop" | "tool_calls" | "length" | "content_filter" | null
+  }>
+  usage?: {
+    prompt_tokens?: number
+    completion_tokens?: number
+    total_tokens?: number
+    prompt_tokens_details?: { cached_tokens?: number }
+  }
+}
+
+export function createBodyConverter(from: Format, to: Format) {
+  return (body: any): any => {
+    if (from === to) return body
+
+    let raw: CommonRequest
+    if (from === "anthropic") raw = fromAnthropicRequest(body)
+    else if (from === "openai") raw = fromOpenaiRequest(body)
+    else raw = fromOaCompatibleRequest(body)
+
+    if (to === "anthropic") return toAnthropicRequest(raw)
+    if (to === "openai") return toOpenaiRequest(raw)
+    if (to === "oa-compat") return toOaCompatibleRequest(raw)
+  }
+}
+
+export function createStreamPartConverter(from: Format, to: Format) {
+  return (part: any): any => {
+    if (from === to) return part
+
+    let raw: CommonChunk | string
+    if (from === "anthropic") raw = fromAnthropicChunk(part)
+    else if (from === "openai") raw = fromOpenaiChunk(part)
+    else raw = fromOaCompatibleChunk(part)
+
+    // If result is a string (error case), pass it through
+    if (typeof raw === "string") return raw
+
+    if (to === "anthropic") return toAnthropicChunk(raw)
+    if (to === "openai") return toOpenaiChunk(raw)
+    if (to === "oa-compat") return toOaCompatibleChunk(raw)
+  }
+}
+
+export function createResponseConverter(from: Format, to: Format) {
+  return (response: any): any => {
+    if (from === to) return response
+
+    let raw: CommonResponse
+    if (from === "anthropic") raw = fromAnthropicResponse(response)
+    else if (from === "openai") raw = fromOpenaiResponse(response)
+    else raw = fromOaCompatibleResponse(response)
+
+    if (to === "anthropic") return toAnthropicResponse(raw)
+    if (to === "openai") return toOpenaiResponse(raw)
+    if (to === "oa-compat") return toOaCompatibleResponse(raw)
+  }
+}
@@ -1,57 +1,9 @@
 import type { APIEvent } from "@solidjs/start/server"
-import { handler } from "~/routes/zen/handler"
-
-type Usage = {
-  prompt_tokens?: number
-  completion_tokens?: number
-  total_tokens?: number
-  // used by moonshot
-  cached_tokens?: number
-  // used by xai
-  prompt_tokens_details?: {
-    text_tokens?: number
-    audio_tokens?: number
-    image_tokens?: number
-    cached_tokens?: number
-  }
-  completion_tokens_details?: {
-    reasoning_tokens?: number
-    audio_tokens?: number
-    accepted_prediction_tokens?: number
-    rejected_prediction_tokens?: number
-  }
-}
+import { handler } from "~/routes/zen/util/handler"

 export function POST(input: APIEvent) {
-  let usage: Usage
  return handler(input, {
-    modifyBody: (body: any) => ({
-      ...body,
-      ...(body.stream ? { stream_options: { include_usage: true } } : {}),
-    }),
-    setAuthHeader: (headers: Headers, apiKey: string) => {
-      headers.set("authorization", `Bearer ${apiKey}`)
-    },
+    format: "oa-compat",
    parseApiKey: (headers: Headers) => headers.get("authorization")?.split(" ")[1],
-    onStreamPart: (chunk: string) => {
-      if (!chunk.startsWith("data: ")) return
-
-      let json
-      try {
-        json = JSON.parse(chunk.slice(6)) as { usage?: Usage }
-      } catch (e) {
-        return
-      }
-
-      if (!json.usage) return
-      usage = json.usage
-    },
-    getStreamUsage: () => usage,
-    normalizeUsage: (usage: Usage) => ({
-      inputTokens: usage.prompt_tokens ?? 0,
-      outputTokens: usage.completion_tokens ?? 0,
-      reasoningTokens: usage.completion_tokens_details?.reasoning_tokens ?? undefined,
-      cacheReadTokens: usage.cached_tokens ?? usage.prompt_tokens_details?.cached_tokens ?? undefined,
-    }),
  })
 }
@@ -1,64 +1,9 @@
 import type { APIEvent } from "@solidjs/start/server"
-import { handler } from "~/routes/zen/handler"
-
-type Usage = {
-  cache_creation?: {
-    ephemeral_5m_input_tokens?: number
-    ephemeral_1h_input_tokens?: number
-  }
-  cache_creation_input_tokens?: number
-  cache_read_input_tokens?: number
-  input_tokens?: number
-  output_tokens?: number
-  server_tool_use?: {
-    web_search_requests?: number
-  }
-}
+import { handler } from "~/routes/zen/util/handler"

 export function POST(input: APIEvent) {
-  let usage: Usage
  return handler(input, {
-    modifyBody: (body: any) => ({
-      ...body,
-      service_tier: "standard_only",
-    }),
-    setAuthHeader: (headers: Headers, apiKey: string) => headers.set("x-api-key", apiKey),
+    format: "anthropic",
    parseApiKey: (headers: Headers) => headers.get("x-api-key") ?? undefined,
-    onStreamPart: (chunk: string) => {
-      const data = chunk.split("\n")[1]
-      if (!data.startsWith("data: ")) return
-
-      let json
-      try {
-        json = JSON.parse(data.slice(6))
-      } catch (e) {
-        return
-      }
-
-      // ie. { type: "message_start"; message: { usage: Usage } }
-      // ie. { type: "message_delta"; usage: Usage }
-      const usageUpdate = json.usage ?? json.message?.usage
-      if (!usageUpdate) return
-      usage = {
-        ...usage,
-        ...usageUpdate,
-        cache_creation: {
-          ...usage?.cache_creation,
-          ...usageUpdate.cache_creation,
-        },
-        server_tool_use: {
-          ...usage?.server_tool_use,
-          ...usageUpdate.server_tool_use,
-        },
-      }
-    },
-    getStreamUsage: () => usage,
-    normalizeUsage: (usage: Usage) => ({
-      inputTokens: usage.input_tokens ?? 0,
-      outputTokens: usage.output_tokens ?? 0,
-      cacheReadTokens: usage.cache_read_input_tokens ?? undefined,
-      cacheWrite5mTokens: usage.cache_creation?.ephemeral_5m_input_tokens ?? undefined,
-      cacheWrite1hTokens: usage.cache_creation?.ephemeral_1h_input_tokens ?? undefined,
-    }),
  })
 }
@@ -0,0 +1,63 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js"
+import { KeyTable } from "@opencode-ai/console-core/schema/key.sql.js"
+import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js"
+import { ModelTable } from "@opencode-ai/console-core/schema/model.sql.js"
+import { ZenData } from "@opencode-ai/console-core/model.js"
+
+export async function OPTIONS(input: APIEvent) {
+  return new Response(null, {
+    status: 200,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    },
+  })
+}
+
+export async function GET(input: APIEvent) {
+  const zenData = ZenData.list()
+  const disabledModels = await authenticate()
+
+  return new Response(
+    JSON.stringify({
+      object: "list",
+      data: Object.entries(zenData.models)
+        .filter(([id]) => !disabledModels.includes(id))
+        .map(([id, _model]) => ({
+          id,
+          object: "model",
+          created: Math.floor(Date.now() / 1000),
+          owned_by: "opencode",
+        })),
+    }),
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  )
+
+  async function authenticate() {
+    const apiKey = input.request.headers.get("authorization")?.split(" ")[1]
+    if (!apiKey) return []
+
+    const disabledModels = await Database.use((tx) =>
+      tx
+        .select({
+          model: ModelTable.model,
+        })
+        .from(KeyTable)
+        .innerJoin(WorkspaceTable, eq(WorkspaceTable.id, KeyTable.workspaceID))
+        .leftJoin(
+          ModelTable,
+          and(eq(ModelTable.workspaceID, KeyTable.workspaceID), isNull(ModelTable.timeDeleted)),
+        )
+        .where(and(eq(KeyTable.key, apiKey), isNull(KeyTable.timeDeleted)))
+        .then((rows) => rows.map((row) => row.model)),
+    )
+
+    return disabledModels
+  }
+}
@@ -1,52 +1,9 @@
 import type { APIEvent } from "@solidjs/start/server"
-import { handler } from "~/routes/zen/handler"
-
-type Usage = {
-  input_tokens?: number
-  input_tokens_details?: {
-    cached_tokens?: number
-  }
-  output_tokens?: number
-  output_tokens_details?: {
-    reasoning_tokens?: number
-  }
-  total_tokens?: number
-}
+import { handler } from "~/routes/zen/util/handler"

 export function POST(input: APIEvent) {
-  let usage: Usage
  return handler(input, {
-    setAuthHeader: (headers: Headers, apiKey: string) => {
-      headers.set("authorization", `Bearer ${apiKey}`)
-    },
+    format: "openai",
    parseApiKey: (headers: Headers) => headers.get("authorization")?.split(" ")[1],
-    onStreamPart: (chunk: string) => {
-      const [event, data] = chunk.split("\n")
-      if (event !== "event: response.completed") return
-      if (!data.startsWith("data: ")) return
-
-      let json
-      try {
-        json = JSON.parse(data.slice(6)) as { response?: { usage?: Usage } }
-      } catch (e) {
-        return
-      }
-
-      if (!json.response?.usage) return
-      usage = json.response.usage
-    },
-    getStreamUsage: () => usage,
-    normalizeUsage: (usage: Usage) => {
-      const inputTokens = usage.input_tokens ?? 0
-      const outputTokens = usage.output_tokens ?? 0
-      const reasoningTokens = usage.output_tokens_details?.reasoning_tokens ?? undefined
-      const cacheReadTokens = usage.input_tokens_details?.cached_tokens ?? undefined
-      return {
-        inputTokens: inputTokens - (cacheReadTokens ?? 0),
-        outputTokens: outputTokens - (reasoningTokens ?? 0),
-        reasoningTokens,
-        cacheReadTokens,
-      }
-    },
  })
 }
@@ -0,0 +1,2 @@
+ALTER TABLE `account` ADD PRIMARY KEY(`id`);--> statement-breakpoint
+ALTER TABLE `auth` ADD PRIMARY KEY(`id`);
@@ -0,0 +1,969 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "5470c8b4-296d-47bd-85a7-88cfd3b71434",
+  "prevId": "10169105-4545-4894-838b-004c0a42c584",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "account_id_pk": {
+          "name": "account_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "auth": {
+      "name": "auth",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "enum('email','github','google')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "provider": {
+          "name": "provider",
+          "columns": [
+            "provider",
+            "subject"
+          ],
+          "isUnique": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "auth_id_pk": {
+          "name": "auth_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_type": {
+          "name": "payment_method_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_id": {
+          "name": "key_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "model": {
+      "name": "model",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "model_workspace_model": {
+          "name": "model_workspace_model",
+          "columns": [
+            "workspace_id",
+            "model"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "model_workspace_id_id_pk": {
+          "name": "model_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "provider": {
+      "name": "provider",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentials": {
+          "name": "credentials",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "workspace_provider": {
+          "name": "workspace_provider",
+          "columns": [
+            "workspace_id",
+            "provider"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "provider_workspace_id_id_pk": {
+          "name": "provider_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_account_id": {
+          "name": "user_account_id",
+          "columns": [
+            "workspace_id",
+            "account_id"
+          ],
+          "isUnique": true
+        },
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        },
+        "global_account_id": {
+          "name": "global_account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        },
+        "global_email": {
+          "name": "global_email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
@@ -253,6 +253,13 @@
      "when": 1760666253896,
      "tag": "0035_narrow_blindfold",
      "breakpoints": true
+    },
+    {
+      "idx": 36,
+      "version": "5",
+      "when": 1760668952329,
+      "tag": "0036_slimy_energizer",
+      "breakpoints": true
    }
  ]
 }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -1,7 +1,11 @@
-import { mysqlTable, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
+import { mysqlTable, primaryKey } from "drizzle-orm/mysql-core"
 import { id, timestamps } from "../drizzle/types"

-export const AccountTable = mysqlTable("account", {
-  id: id(),
-  ...timestamps,
-})
+export const AccountTable = mysqlTable(
+  "account",
+  {
+    id: id(),
+    ...timestamps,
+  },
+  (table) => [primaryKey({ columns: [table.id] })],
+)
@@ -1,4 +1,4 @@
-import { index, mysqlEnum, mysqlTable, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
+import { index, mysqlEnum, mysqlTable, primaryKey, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
 import { id, timestamps, ulid } from "../drizzle/types"

 export const AuthProvider = ["email", "github", "google"] as const
@@ -12,5 +12,9 @@ export const AuthTable = mysqlTable(
    subject: varchar("subject", { length: 255 }).notNull(),
    accountID: ulid("account_id").notNull(),
  },
-  (table) => [uniqueIndex("provider").on(table.provider, table.subject), index("account_id").on(table.accountID)],
+  (table) => [
+    primaryKey({ columns: [table.id] }),
+    uniqueIndex("provider").on(table.provider, table.subject),
+    index("account_id").on(table.accountID),
+  ],
 )
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -134,6 +134,7 @@ export default {
        if (!subject) throw new Error("No subject found")

        if (Resource.App.stage !== "production" && !email.endsWith("@anoma.ly")) {
+          throw new Error("Invalid email")
        }

        // Get account
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,34 +0,0 @@
-# dependencies (bun install)
-node_modules
-
-# output
-out
-dist
-*.tgz
-
-# code coverage
-coverage
-*.lcov
-
-# logs
-logs
-_.log
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# caches
-.eslintcache
-.cache
-*.tsbuildinfo
-
-# IntelliJ based IDEs
-.idea
-
-# Finder (MacOS) folder config
-.DS_Store
@@ -1,18 +0,0 @@
-{
-  "name": "@opencode-ai/css",
-  "version": "0.15.7",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.css",
-    "./*": "./src/*",
-    "./fonts/*": "./src/assets/fonts/*"
-  },
-  "scripts": {
-    "dev": "bun run dev.ts",
-    "generate:tailwind": "bun run script/colors.ts"
-  },
-  "dependencies": {
-    "tailwindcss": "catalog:",
-    "@tailwindcss/vite": "catalog:"
-  }
-}
@@ -1,214 +0,0 @@
-  --background-base: #f8f7f7;
-  --background-weak: var(--smoke-light-3);
-  --background-strong: var(--smoke-light-1);
-  --background-stronger: #fcfcfc;
-  --base: var(--smoke-light-alpha-2);
-  --surface-base: var(--smoke-light-alpha-2);
-  --base2: var(--smoke-light-alpha-2);
-  --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-3);
-  --surface-inset-base-hover: var(--smoke-light-alpha-3);
-  --surface-inset-strong: #1f000017;
-  --surface-inset-strong-hover: #1f000017;
-  --surface-raised-base: var(--smoke-light-alpha-1);
-  --surface-float-base: var(--smoke-dark-1);
-  --surface-float-base-hover: var(--smoke-dark-2);
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
-  --surface-raised-strong: var(--smoke-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--smoke-light-alpha-3);
-  --surface-weaker: var(--smoke-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-skip-base: var(--smoke-light-3);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: var(--mint-light-3);
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --text-base: var(--smoke-light-11);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --text-weak: var(--smoke-light-9);
-  --text-weaker: var(--smoke-light-8);
-  --text-strong: var(--smoke-light-12);
-  --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-1);
-  --text-on-success-base: var(--smoke-dark-alpha-11);
-  --text-on-warning-base: var(--smoke-dark-alpha-11);
-  --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-11);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--smoke-dark-alpha-9);
-  --text-on-info-strong: var(--smoke-dark-alpha-12);
-  --text-on-warning-weak: var(--smoke-dark-alpha-9);
-  --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
-  --text-on-brand-weak: var(--smoke-light-alpha-9);
-  --text-on-brand-weaker: var(--smoke-light-alpha-8);
-  --text-on-brand-strong: var(--smoke-light-alpha-12);
-  --button-secondary-base: #fdfcfc;
-  --border-base: var(--smoke-light-alpha-7);
-  --border-hover: var(--smoke-light-alpha-8);
-  --border-active: var(--smoke-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--smoke-light-alpha-8);
-  --border-focus: var(--smoke-light-alpha-9);
-  --border-weak-base: var(--smoke-light-alpha-5);
-  --border-strong-base: var(--smoke-light-alpha-7);
-  --border-strong-hover: var(--smoke-light-alpha-8);
-  --border-strong-active: var(--smoke-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--smoke-light-alpha-6);
-  --border-strong-focus: var(--smoke-light-alpha-7);
-  --border-weak-hover: var(--smoke-light-alpha-6);
-  --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-6);
-  --border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--smoke-light-9);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-invert-base: #ffffff;
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: var(--smoke-light-12);
-  --icon-strong-active: var(--smoke-light-12);
-  --icon-strong-selected: var(--smoke-light-12);
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: var(--smoke-light-12);
-  --icon-brand-base: var(--smoke-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-light-11);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--smoke-light-alpha-11);
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-alpha-9);
-  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-9);
-  --icon-diff-delete-hover: var(--ember-light-10);
-  --icon-diff-delete-active: var(--ember-light-11);
-  --syntax-comment: #ffffff;
-  --syntax-string: #ffffff;
-  --syntax-keyword: #ffffff;
-  --syntax-function: #ffffff;
-  --syntax-number: #ffffff;
-  --syntax-operator: #ffffff;
-  --syntax-variable: #ffffff;
-  --syntax-type: #ffffff;
-  --syntax-constant: #ffffff;
-  --syntax-punctuation: #ffffff;
-  --syntax-success: #ffffff;
-  --syntax-warning: #ffffff;
-  --syntax-critical: #ffffff;
-  --syntax-info: #ffffff;
-  --markdown-heading: #ffffff;
-  --markdown-text: #ffffff;
-  --markdown-link: #ffffff;
-  --markdown-link-text: #ffffff;
-  --markdown-code: #ffffff;
-  --markdown-block-quote: #ffffff;
-  --markdown-emph: #ffffff;
-  --markdown-strong: #ffffff;
-  --markdown-horizontal-rule: #ffffff;
-  --markdown-list-item: #ffffff;
-  --markdown-list-enumeration: #ffffff;
-  --markdown-image: #ffffff;
-  --markdown-image-text: #ffffff;
-  --markdown-code-block: #ffffff;
-  --border-color: #ffffff;
@@ -1,6 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
@@ -1,14 +0,0 @@
-@layer theme, base, components, utilities;
-
-@import "./color.css" layer(theme);
-@import "./theme.css" layer(theme);
-
-@import "./base.css" layer(base);
-
-@import "./components/button.css" layer(components);
-@import "./components/icon.css" layer(components);
-@import "./components/select.css" layer(components);
-@import "./components/tabs.css" layer(components);
-@import "./components/tooltip.css" layer(components);
-
-@import "./utilities.css" layer(utilities);
@@ -1,12 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@import "./index.css";
-
-@theme {
-  --shadow-*: initial;
-  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
-}
-
-@import "./tailwind-colors.css";
@@ -1,37 +0,0 @@
-:root {
-  interpolate-size: allow-keywords;
-
-  [data-popper-positioner] {
-    pointer-events: none;
-  }
-
-  ::selection {
-    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
-    /* background-color: var(--color-primary); */
-    /* color: var(--color-background); */
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--theme-background-panel);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--theme-border-subtle);
-    border-radius: 6px;
-  }
-
-  * {
-    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
-  }
-}
-
-.no-scrollbar {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full bg-background-weak">
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,15 +7,15 @@
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
    <title>OpenCode</title>
  </head>
-  <body class="h-full overscroll-none select-none">
-    <script>
-      ;(function () {
-        const savedTheme = localStorage.getItem("theme") || "opencode"
-        const savedDarkMode = localStorage.getItem("darkMode") !== "false"
-        document.documentElement.setAttribute("data-theme", savedTheme)
-        document.documentElement.setAttribute("data-dark", savedDarkMode.toString())
-      })()
-    </script>
+  <body class="antialiased overscroll-none select-none text-12-regular">
+    <!-- <script> -->
+    <!--   ;(function () { -->
+    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
+    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
+    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
+    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
+    <!--   })() -->
+    <!-- </script> -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
@@ -1,32 +1,34 @@
 {
  "name": "@opencode-ai/desktop",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
-    "serve": "vite preview",
-    "typecheck": "tsgo --noEmit"
+    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
+    "opencode": "workspace:*",
    "@tailwindcss/vite": "catalog:",
    "@tsconfig/bun": "1.0.9",
    "@types/luxon": "3.7.1",
    "@types/node": "catalog:",
-    "typescript": "catalog:",
    "@typescript/native-preview": "catalog:",
+    "typescript": "catalog:",
    "vite": "catalog:",
    "vite-plugin-icons-spritesheet": "3.0.1",
    "vite-plugin-solid": "catalog:"
  },
  "dependencies": {
    "@kobalte/core": "catalog:",
-    "@opencode-ai/css": "workspace:*",
    "@opencode-ai/sdk": "workspace:*",
+    "@opencode-ai/ui": "workspace:*",
+    "@pierre/precision-diffs": "catalog:",
    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/active-element": "2.1.3",
    "@solid-primitives/event-bus": "1.1.2",
    "@solid-primitives/resize-observer": "2.1.3",
    "@solid-primitives/scroll": "2.1.3",
@@ -34,17 +36,16 @@
    "@solidjs/router": "0.15.3",
    "@thisbeyond/solid-dnd": "0.7.5",
    "diff": "catalog:",
-    "@opencode-ai/ui": "workspace:*",
    "fuzzysort": "catalog:",
    "luxon": "catalog:",
    "marked": "16.2.0",
    "marked-shiki": "1.2.1",
    "remeda": "catalog:",
-    "solid-js": "catalog:",
    "shiki": "3.9.2",
-    "solid-list": "0.3.0",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:",
    "tailwindcss": "catalog:",
-    "virtua": "0.42.3"
+    "virtua": "catalog:"
  },
  "prettier": {
    "semi": false,
@@ -1,8 +1,8 @@
 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 { useLocal, type TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
+import { useShiki } from "@/context/shiki"

 type DefinedSelection = Exclude<TextSelection, undefined>

@@ -394,7 +394,7 @@ export function Code(props: Props) {
          [&_.diff-blank_.diff-oldln]:bg-background-element
          [&_.diff-blank_.diff-newln]:bg-background-element
          [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative
-          [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none
+          [&_.diff-collapsed]:select-none
          [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40!
          [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info
          [&_.diff-collapsed]:text-xs
@@ -0,0 +1,20 @@
+import { FileDiff } from "@opencode-ai/sdk"
+import { createMemo, Show } from "solid-js"
+
+export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
+  const additions = createMemo(() =>
+    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) : props.diff.additions,
+  )
+  const deletions = createMemo(() =>
+    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) : props.diff.deletions,
+  )
+  const total = createMemo(() => additions() + deletions())
+  return (
+    <Show when={total() > 0}>
+      <div class="flex gap-2 justify-end items-center">
+        <span class="text-12-mono text-right text-text-diff-add-base">{`+${additions()}`}</span>
+        <span class="text-12-mono text-right text-text-diff-delete-base">{`-${deletions()}`}</span>
+      </div>
+    </Show>
+  )
+}
@@ -1,265 +0,0 @@
-import { For, Match, Show, Switch, createSignal, splitProps } from "solid-js"
-import { Tabs, Tooltip } from "@opencode-ai/ui"
-import { Icon } from "@opencode-ai/ui"
-import { FileIcon, IconButton } 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 { useLocal } from "@/context"
-import type { JSX } from "solid-js"
-
-interface EditorPaneProps {
-  onFileClick: (file: LocalFile) => void
-}
-
-export default function EditorPane(props: EditorPaneProps): JSX.Element {
-  const [localProps] = splitProps(props, ["onFileClick"])
-  const local = useLocal()
-  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 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 (
-    <DragDropProvider
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragOver={handleDragOver}
-      collisionDetector={closestCenter}
-    >
-      <DragDropSensors />
-      <ConstrainDragYAxis />
-      <Tabs value={local.file.active()?.path} onChange={handleTabChange}>
-        <div class="sticky top-0 shrink-0 flex">
-          <Tabs.List>
-            <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="hidden 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>
-          </div>
-        </div>
-        <For each={local.file.opened()}>
-          {(file) => (
-            <Tabs.Content value={file.path} class="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>
-  )
-}
-
-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
-}
@@ -1,5 +1,4 @@
-import { useLocal } from "@/context"
-import type { LocalFile } from "@/context/local"
+import { useLocal, type LocalFile } from "@/context/local"
 import { Tooltip } from "@opencode-ai/ui"
 import { Collapsible, FileIcon } from "@/ui"
 import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
@@ -19,7 +18,7 @@ export default function FileTree(props: {
    <Dynamic
      component={p.as ?? "div"}
      classList={{
-        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element cursor-pointer": true,
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element": true,
        "bg-background-element": local.file.active()?.path === p.node.path,
        [props.nodeClass ?? ""]: !!props.nodeClass,
      }}
@@ -83,7 +82,7 @@ export default function FileTree(props: {
                >
                  <Collapsible.Trigger>
                    <Node node={node}>
-                      <Collapsible.Arrow size={16} class="text-text-muted/60 ml-1" />
+                      <Collapsible.Arrow class="text-text-muted/60 ml-1" />
                      <FileIcon
                        node={node}
                        expanded={local.file.node(node.path).expanded}
@@ -1,4 +1,4 @@
-import { useMarked } from "@/context"
+import { useMarked } from "@/context/marked"
 import { createResource } from "solid-js"

 function strip(text: string): string {
@@ -16,7 +16,7 @@ export function Markdown(props: { text: string; class?: string }) {
  )
  return (
    <div
-      class={`min-w-0 max-w-full text-xs overflow-auto no-scrollbar prose ${props.class ?? ""}`}
+      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
      innerHTML={html()}
    />
  )
@@ -0,0 +1,459 @@
+import type { Part, ReasoningPart, TextPart, ToolPart, Message, AssistantMessage, UserMessage } from "@opencode-ai/sdk"
+import { children, Component, createMemo, For, Match, Show, Switch, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import { Markdown } from "./markdown"
+import { Checkbox, Collapsible, Diff, Icon, IconProps } from "@opencode-ai/ui"
+import { getDirectory, getFilename } from "@/utils"
+import type { Tool } from "opencode/tool/tool"
+import type { ReadTool } from "opencode/tool/read"
+import type { ListTool } from "opencode/tool/ls"
+import type { GlobTool } from "opencode/tool/glob"
+import type { GrepTool } from "opencode/tool/grep"
+import type { WebFetchTool } from "opencode/tool/webfetch"
+import type { TaskTool } from "opencode/tool/task"
+import type { BashTool } from "opencode/tool/bash"
+import type { EditTool } from "opencode/tool/edit"
+import type { WriteTool } from "opencode/tool/write"
+import type { TodoWriteTool } from "opencode/tool/todo"
+import { DiffChanges } from "./diff-changes"
+
+export function Message(props: { message: Message; parts: Part[] }) {
+  return (
+    <Switch>
+      <Match when={props.message.role === "user" && props.message}>
+        {(userMessage) => <UserMessage message={userMessage()} parts={props.parts} />}
+      </Match>
+      <Match when={props.message.role === "assistant" && props.message}>
+        {(assistantMessage) => <AssistantMessage message={assistantMessage()} parts={props.parts} />}
+      </Match>
+    </Switch>
+  )
+}
+
+function AssistantMessage(props: { message: AssistantMessage; parts: Part[] }) {
+  const filteredParts = createMemo(() => {
+    return props.parts?.filter((x) => {
+      if (x.type === "reasoning") return false
+      return x.type !== "tool" || x.tool !== "todoread"
+    })
+  })
+  return (
+    <div class="w-full flex flex-col items-start gap-4">
+      <For each={filteredParts()}>{(part) => <Part part={part} message={props.message} />}</For>
+    </div>
+  )
+}
+
+function UserMessage(props: { message: UserMessage; parts: Part[] }) {
+  const text = createMemo(() =>
+    props.parts
+      ?.filter((p) => p.type === "text" && !p.synthetic)
+      ?.map((p) => (p as TextPart).text)
+      ?.join(""),
+  )
+  return <div class="text-12-regular text-text-base line-clamp-3">{text()}</div>
+}
+
+export function Part(props: { part: Part; message: Message; hideDetails?: boolean }) {
+  const component = createMemo(() => PART_MAPPING[props.part.type as keyof typeof PART_MAPPING])
+  return (
+    <Show when={component()}>
+      <Dynamic
+        component={component()}
+        part={props.part as any}
+        message={props.message}
+        hideDetails={props.hideDetails}
+      />
+    </Show>
+  )
+}
+
+const PART_MAPPING = {
+  text: TextPart,
+  tool: ToolPart,
+  reasoning: ReasoningPart,
+}
+
+function ReasoningPart(props: { part: ReasoningPart; message: Message }) {
+  return (
+    <Show when={props.part.text.trim()}>
+      <Markdown text={props.part.text.trim()} />
+    </Show>
+  )
+}
+
+function TextPart(props: { part: TextPart; message: Message }) {
+  return (
+    <Show when={props.part.text.trim()}>
+      <Markdown text={props.part.text.trim()} />
+    </Show>
+  )
+}
+
+function ToolPart(props: { part: ToolPart; message: Message; hideDetails?: boolean }) {
+  const component = createMemo(() => {
+    const render = ToolRegistry.render(props.part.tool) ?? GenericTool
+    const metadata = props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
+    const input = props.part.state.status === "completed" ? props.part.state.input : {}
+
+    return (
+      <Dynamic
+        component={render}
+        input={input}
+        tool={props.part.tool}
+        metadata={metadata}
+        output={props.part.state.status === "completed" ? props.part.state.output : undefined}
+        hideDetails={props.hideDetails}
+      />
+    )
+  })
+
+  return <Show when={component()}>{component()}</Show>
+}
+
+type TriggerTitle = {
+  title: string
+  titleClass?: string
+  subtitle?: string
+  subtitleClass?: string
+  args?: string[]
+  argsClass?: string
+  action?: JSX.Element
+}
+
+const isTriggerTitle = (val: any): val is TriggerTitle => {
+  return typeof val === "object" && val !== null && "title" in val && !(val instanceof Node)
+}
+
+function BasicTool(props: {
+  icon: IconProps["name"]
+  trigger: TriggerTitle | JSX.Element
+  children?: JSX.Element
+  hideDetails?: boolean
+}) {
+  const resolved = children(() => props.children)
+  return (
+    <Collapsible>
+      <Collapsible.Trigger>
+        <div class="w-full flex items-center self-stretch gap-5 justify-between">
+          <div class="w-full flex items-center self-stretch gap-5">
+            <Icon name={props.icon} size="small" class="shrink-0" />
+            <div class="grow min-w-0">
+              <Switch>
+                <Match when={isTriggerTitle(props.trigger) && props.trigger}>
+                  {(trigger) => (
+                    <div class="w-full flex items-center gap-2 justify-between">
+                      <div class="flex items-center gap-2 whitespace-nowrap truncate">
+                        <span
+                          classList={{
+                            "text-12-medium text-text-base": true,
+                            [trigger().titleClass ?? ""]: !!trigger().titleClass,
+                          }}
+                        >
+                          {trigger().title}
+                        </span>
+                        <Show when={trigger().subtitle}>
+                          <span
+                            classList={{
+                              "text-12-medium text-text-weak": true,
+                              [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
+                            }}
+                          >
+                            {trigger().subtitle}
+                          </span>
+                        </Show>
+                        <Show when={trigger().args?.length}>
+                          <For each={trigger().args}>
+                            {(arg) => (
+                              <span
+                                classList={{
+                                  "text-12-regular text-text-weak": true,
+                                  [trigger().argsClass ?? ""]: !!trigger().argsClass,
+                                }}
+                              >
+                                {arg}
+                              </span>
+                            )}
+                          </For>
+                        </Show>
+                      </div>
+                      <Show when={trigger().action}>{trigger().action}</Show>
+                    </div>
+                  )}
+                </Match>
+                <Match when={true}>{props.trigger as JSX.Element}</Match>
+              </Switch>
+            </div>
+          </div>
+          <Show when={resolved() && !props.hideDetails}>
+            <Collapsible.Arrow />
+          </Show>
+        </div>
+      </Collapsible.Trigger>
+      <Show when={resolved() && !props.hideDetails}>
+        <Collapsible.Content>{resolved()}</Collapsible.Content>
+      </Show>
+    </Collapsible>
+    // <>
+    //   <Show when={props.part.state.status === "error"}>{props.part.state.error.replace("Error: ", "")}</Show>
+    // </>
+  )
+}
+
+function GenericTool(props: ToolProps<any>) {
+  return <BasicTool icon="mcp" trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
+}
+
+type ToolProps<T extends Tool.Info> = {
+  input: Partial<Tool.InferParameters<T>>
+  metadata: Partial<Tool.InferMetadata<T>>
+  tool: string
+  output?: string
+  hideDetails?: boolean
+}
+
+const ToolRegistry = (() => {
+  const state: Record<
+    string,
+    {
+      name: string
+      render?: Component<ToolProps<any>>
+    }
+  > = {}
+  function register<T extends Tool.Info>(input: { name: string; render?: Component<ToolProps<T>> }) {
+    state[input.name] = input
+    return input
+  }
+  return {
+    register,
+    render(name: string) {
+      return state[name]?.render
+    },
+  }
+})()
+
+ToolRegistry.register<typeof ReadTool>({
+  name: "read",
+  render(props) {
+    return (
+      <BasicTool
+        icon="glasses"
+        trigger={{ title: "Read", subtitle: props.input.filePath ? getFilename(props.input.filePath) : "" }}
+      />
+    )
+  },
+})
+
+ToolRegistry.register<typeof ListTool>({
+  name: "list",
+  render(props) {
+    return (
+      <BasicTool icon="bullet-list" trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}>
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof GlobTool>({
+  name: "glob",
+  render(props) {
+    return (
+      <BasicTool
+        icon="magnifying-glass-menu"
+        trigger={{
+          title: "Glob",
+          subtitle: getDirectory(props.input.path || "/"),
+          args: props.input.pattern ? ["pattern=" + props.input.pattern] : [],
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof GrepTool>({
+  name: "grep",
+  render(props) {
+    const args = []
+    if (props.input.pattern) args.push("pattern=" + props.input.pattern)
+    if (props.input.include) args.push("include=" + props.input.include)
+    return (
+      <BasicTool
+        icon="magnifying-glass-menu"
+        trigger={{
+          title: "Grep",
+          subtitle: getDirectory(props.input.path || "/"),
+          args,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof WebFetchTool>({
+  name: "webfetch",
+  render(props) {
+    return (
+      <BasicTool
+        icon="window-cursor"
+        trigger={{
+          title: "Webfetch",
+          subtitle: props.input.url || "",
+          args: props.input.format ? ["format=" + props.input.format] : [],
+          action: (
+            <div class="size-6 flex items-center justify-center">
+              <Icon name="square-arrow-top-right" size="small" />
+            </div>
+          ),
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof TaskTool>({
+  name: "task",
+  render(props) {
+    return (
+      <BasicTool
+        icon="task"
+        trigger={{
+          title: `${props.input.subagent_type || props.tool} Agent`,
+          titleClass: "capitalize",
+          subtitle: props.input.description,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof BashTool>({
+  name: "bash",
+  render(props) {
+    return (
+      <BasicTool
+        icon="console"
+        trigger={{
+          title: "Shell",
+          subtitle: "Ran " + props.input.command,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof EditTool>({
+  name: "edit",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-2">
+              <div class="text-12-medium text-text-base capitalize">Edit</div>
+              <div class="flex">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}</span>
+                </Show>
+                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div class="flex gap-4 items-center justify-end">
+              <Show when={props.metadata.filediff}>
+                <DiffChanges diff={props.metadata.filediff} />
+              </Show>
+            </div>
+          </div>
+        }
+      >
+        <Show when={props.metadata.filediff}>
+          <div class="border-t border-border-weaker-base">
+            <Diff
+              before={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.before }}
+              after={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.after }}
+            />
+          </div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof WriteTool>({
+  name: "write",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-2">
+              <div class="text-12-medium text-text-base capitalize">Write</div>
+              <div class="flex">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}</span>
+                </Show>
+                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
+          </div>
+        }
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof TodoWriteTool>({
+  name: "todowrite",
+  render(props) {
+    return (
+      <BasicTool
+        icon="checklist"
+        trigger={{
+          title: "To-dos",
+          subtitle: `${props.input.todos?.filter((t) => t.status === "completed").length}/${props.input.todos?.length}`,
+        }}
+      >
+        <Show when={props.input.todos?.length}>
+          <div class="px-12 pt-2.5 pb-6 flex flex-col gap-2">
+            <For each={props.input.todos}>
+              {(todo) => (
+                <Checkbox readOnly checked={todo.status === "completed"}>
+                  <div classList={{ "line-through text-text-weaker": todo.status === "completed" }}>{todo.content}</div>
+                </Checkbox>
+              )}
+            </For>
+          </div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
@@ -0,0 +1,48 @@
+import { Component, createMemo } from "solid-js"
+
+interface ProgressCircleProps {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export const ProgressCircle: Component<ProgressCircleProps> = (props) => {
+  // --- Set default values for props ---
+  const size = () => props.size || 16
+  const strokeWidth = () => props.strokeWidth || 3
+
+  // --- Constants for SVG calculation ---
+  const viewBoxSize = 16
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+
+  // --- Reactive Calculation for the progress offset ---
+  const offset = createMemo(() => {
+    const clampedPercentage = Math.max(0, Math.min(100, props.percentage || 0))
+    const progress = clampedPercentage / 100
+    return circumference() * (1 - progress)
+  })
+
+  return (
+    <svg
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      class="transform -rotate-90"
+    >
+      <circle cx={center} cy={center} r={radius()} class="stroke-border-weak-base" stroke-width={strokeWidth()} />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        class="stroke-border-active"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+        style={{ transition: "stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1)" }}
+      />
+    </svg>
+  )
+}
@@ -1,164 +0,0 @@
-import type { TextSelection } from "@/context/local"
-import { getFilename } from "@/utils"
-
-export interface PromptTextPart {
-  kind: "text"
-  value: string
-}
-
-export interface PromptAttachmentPart {
-  kind: "attachment"
-  token: string
-  display: string
-  path: string
-  selection?: TextSelection
-  origin: "context" | "active"
-}
-
-export interface PromptInterimPart {
-  kind: "interim"
-  value: string
-  leadingSpace: boolean
-}
-
-export type PromptContentPart = PromptTextPart | PromptAttachmentPart
-
-export type PromptDisplaySegment =
-  | { kind: "text"; value: string }
-  | { kind: "attachment"; part: PromptAttachmentPart; source: string }
-  | PromptInterimPart
-
-export interface AttachmentCandidate {
-  origin: "context" | "active"
-  path: string
-  selection?: TextSelection
-  display: string
-}
-
-export interface PromptSubmitValue {
-  text: string
-  parts: PromptContentPart[]
-}
-
-export const mentionPattern = /@([A-Za-z0-9_\-./]+)/g
-export const mentionTriggerPattern = /(^|\s)@([A-Za-z0-9_\-./]*)$/
-
-export type PromptSegment = (PromptTextPart | PromptAttachmentPart) & {
-  start: number
-  end: number
-}
-
-export type PromptAttachmentSegment = PromptAttachmentPart & {
-  start: number
-  end: number
-}
-
-function pushTextPart(parts: PromptContentPart[], value: string) {
-  if (!value) return
-  const last = parts[parts.length - 1]
-  if (last && last.kind === "text") {
-    last.value += value
-    return
-  }
-  parts.push({ kind: "text", value })
-}
-
-function addTextSegment(segments: PromptSegment[], start: number, value: string) {
-  if (!value) return
-  segments.push({ kind: "text", value, start, end: start + value.length })
-}
-
-export function createAttachmentDisplay(path: string, selection?: TextSelection) {
-  const base = getFilename(path)
-  if (!selection) return base
-  return `${base} (${selection.startLine}-${selection.endLine})`
-}
-
-export function registerCandidate(
-  map: Map<string, AttachmentCandidate>,
-  candidate: AttachmentCandidate,
-  tokens: (string | undefined)[],
-) {
-  for (const token of tokens) {
-    if (!token) continue
-    const normalized = token.toLowerCase()
-    if (map.has(normalized)) continue
-    map.set(normalized, candidate)
-  }
-}
-
-export function parsePrompt(value: string, lookup: Map<string, AttachmentCandidate>) {
-  const segments: PromptSegment[] = []
-  if (!value) return { parts: [] as PromptContentPart[], segments }
-
-  const pushTextRange = (rangeStart: number, rangeEnd: number) => {
-    if (rangeEnd <= rangeStart) return
-    const text = value.slice(rangeStart, rangeEnd)
-    let cursor = 0
-    for (const match of text.matchAll(mentionPattern)) {
-      const localIndex = match.index ?? 0
-      if (localIndex > cursor) {
-        addTextSegment(segments, rangeStart + cursor, text.slice(cursor, localIndex))
-      }
-      const token = match[1]
-      const candidate = lookup.get(token.toLowerCase())
-      if (candidate) {
-        const start = rangeStart + localIndex
-        const end = start + match[0].length
-        segments.push({
-          kind: "attachment",
-          token,
-          display: candidate.display,
-          path: candidate.path,
-          selection: candidate.selection,
-          origin: candidate.origin,
-          start,
-          end,
-        })
-      } else {
-        addTextSegment(segments, rangeStart + localIndex, match[0])
-      }
-      cursor = localIndex + match[0].length
-    }
-    if (cursor < text.length) {
-      addTextSegment(segments, rangeStart + cursor, text.slice(cursor))
-    }
-  }
-
-  pushTextRange(0, value.length)
-
-  const parts: PromptContentPart[] = []
-  for (const segment of segments) {
-    if (segment.kind === "text") {
-      pushTextPart(parts, segment.value)
-    } else {
-      const { start, end, ...attachment } = segment
-      parts.push(attachment as PromptAttachmentPart)
-    }
-  }
-  return { parts, segments }
-}
-
-export function composeDisplaySegments(
-  segments: PromptSegment[],
-  inputValue: string,
-  interim: string,
-): PromptDisplaySegment[] {
-  if (segments.length === 0 && !interim) return []
-
-  const display: PromptDisplaySegment[] = segments.map((segment) => {
-    if (segment.kind === "text") {
-      return { kind: "text", value: segment.value }
-    }
-    const { start, end, ...part } = segment
-    const placeholder = inputValue.slice(start, end)
-    return { kind: "attachment", part: part as PromptAttachmentPart, source: placeholder }
-  })
-
-  if (interim) {
-    const leadingSpace = !!(inputValue && !inputValue.endsWith(" ") && !interim.startsWith(" "))
-    display.push({ kind: "interim", value: interim, leadingSpace })
-  }
-
-  return display
-}
@@ -1,396 +0,0 @@
-import { createEffect, createMemo, createResource, type Accessor } from "solid-js"
-import type { SetStoreFunction } from "solid-js/store"
-import { getDirectory, getFilename } from "@/utils"
-import { createSpeechRecognition } from "@/utils/speech"
-import {
-  createAttachmentDisplay,
-  mentionPattern,
-  mentionTriggerPattern,
-  type PromptAttachmentPart,
-  type PromptAttachmentSegment,
-} from "./prompt-form-helpers"
-import type { LocalFile, TextSelection } from "@/context/local"
-
-export type MentionRange = {
-  start: number
-  end: number
-}
-
-export interface PromptFormState {
-  promptInput: string
-  isDragOver: boolean
-  mentionOpen: boolean
-  mentionQuery: string
-  mentionRange: MentionRange | undefined
-  mentionIndex: number
-  mentionAnchorOffset: { x: number; y: number }
-  inlineAliases: Map<string, PromptAttachmentPart>
-}
-
-interface MentionControllerOptions {
-  state: PromptFormState
-  setState: SetStoreFunction<PromptFormState>
-  attachmentSegments: Accessor<PromptAttachmentSegment[]>
-  getInputRef: () => HTMLTextAreaElement | undefined
-  getOverlayRef: () => HTMLDivElement | undefined
-  getMeasureRef: () => HTMLDivElement | undefined
-  searchFiles: (query: string) => Promise<string[]>
-  resolveFile: (path: string) => LocalFile | undefined
-  addContextFile: (path: string, selection?: TextSelection) => void
-  getActiveContext: () => { path: string; selection?: TextSelection } | undefined
-}
-
-interface MentionKeyDownOptions {
-  event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }
-  mentionItems: () => string[]
-  insertMention: (path: string) => void
-}
-
-interface ScrollSyncOptions {
-  state: PromptFormState
-  getInputRef: () => HTMLTextAreaElement | undefined
-  getOverlayRef: () => HTMLDivElement | undefined
-  interim: Accessor<string>
-  updateMentionPosition: (element: HTMLTextAreaElement, range?: MentionRange) => void
-}
-
-export function usePromptSpeech(updatePromptInput: (updater: (prev: string) => string) => void) {
-  return createSpeechRecognition({
-    onFinal: (text) => updatePromptInput((prev) => (prev && !prev.endsWith(" ") ? `${prev} ` : prev) + text),
-  })
-}
-
-export function useMentionController(options: MentionControllerOptions) {
-  const mentionSource = createMemo(() => (options.state.mentionOpen ? options.state.mentionQuery : undefined))
-  const [mentionResults, { mutate: mutateMentionResults }] = createResource(mentionSource, (query) => {
-    if (!options.state.mentionOpen) return []
-    return options.searchFiles(query ?? "")
-  })
-  const mentionItems = createMemo(() => mentionResults() ?? [])
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    options.state.mentionQuery
-    options.setState("mentionIndex", 0)
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      if (!input) return
-      if (document.activeElement === input) return
-      input.focus()
-    })
-  })
-
-  createEffect(() => {
-    const used = new Set<string>()
-    for (const match of options.state.promptInput.matchAll(mentionPattern)) {
-      const token = match[1]
-      if (token) used.add(token.toLowerCase())
-    }
-    options.setState("inlineAliases", (prev) => {
-      if (prev.size === 0) return prev
-      const next = new Map(prev)
-      let changed = false
-      for (const key of prev.keys()) {
-        if (!used.has(key.toLowerCase())) {
-          next.delete(key)
-          changed = true
-        }
-      }
-      return changed ? next : prev
-    })
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    const items = mentionItems()
-    if (items.length === 0) {
-      options.setState("mentionIndex", 0)
-      return
-    }
-    if (options.state.mentionIndex < items.length) return
-    options.setState("mentionIndex", items.length - 1)
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) return
-    options.state.promptInput
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      if (!input) return
-      updateMentionPosition(input, rangeValue)
-    })
-  })
-
-  function closeMention() {
-    if (options.state.mentionOpen) options.setState("mentionOpen", false)
-    options.setState("mentionQuery", "")
-    options.setState("mentionRange", undefined)
-    options.setState("mentionIndex", 0)
-    mutateMentionResults(() => undefined)
-    options.setState("mentionAnchorOffset", { x: 0, y: 0 })
-  }
-
-  function updateMentionPosition(element: HTMLTextAreaElement, rangeValue = options.state.mentionRange) {
-    const measure = options.getMeasureRef()
-    if (!measure) return
-    if (!rangeValue) return
-    measure.style.width = `${element.clientWidth}px`
-    const measurement = element.value.slice(0, rangeValue.end)
-    measure.textContent = measurement
-    const caretSpan = document.createElement("span")
-    caretSpan.textContent = "\u200b"
-    measure.append(caretSpan)
-    const caretRect = caretSpan.getBoundingClientRect()
-    const containerRect = measure.getBoundingClientRect()
-    measure.removeChild(caretSpan)
-    const left = caretRect.left - containerRect.left
-    const top = caretRect.top - containerRect.top - element.scrollTop
-    options.setState("mentionAnchorOffset", { x: left, y: top < 0 ? 0 : top })
-  }
-
-  function isValidMentionQuery(value: string) {
-    return /^[A-Za-z0-9_\-./]*$/.test(value)
-  }
-
-  function syncMentionFromCaret(element: HTMLTextAreaElement) {
-    if (!options.state.mentionOpen) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) {
-      closeMention()
-      return
-    }
-    const caret = element.selectionEnd ?? element.selectionStart ?? element.value.length
-    if (rangeValue.start < 0 || rangeValue.start >= element.value.length) {
-      closeMention()
-      return
-    }
-    if (element.value[rangeValue.start] !== "@") {
-      closeMention()
-      return
-    }
-    if (caret <= rangeValue.start) {
-      closeMention()
-      return
-    }
-    const mentionValue = element.value.slice(rangeValue.start + 1, caret)
-    if (!isValidMentionQuery(mentionValue)) {
-      closeMention()
-      return
-    }
-    options.setState("mentionRange", { start: rangeValue.start, end: caret })
-    options.setState("mentionQuery", mentionValue)
-    updateMentionPosition(element, { start: rangeValue.start, end: caret })
-  }
-
-  function tryOpenMentionFromCaret(element: HTMLTextAreaElement) {
-    const selectionStart = element.selectionStart ?? element.value.length
-    const selectionEnd = element.selectionEnd ?? selectionStart
-    if (selectionStart !== selectionEnd) return false
-    const caret = selectionEnd
-    if (options.attachmentSegments().some((segment) => caret >= segment.start && caret <= segment.end)) {
-      return false
-    }
-    const before = element.value.slice(0, caret)
-    const match = before.match(mentionTriggerPattern)
-    if (!match) return false
-    const token = match[2] ?? ""
-    const start = caret - token.length - 1
-    if (start < 0) return false
-    options.setState("mentionOpen", true)
-    options.setState("mentionRange", { start, end: caret })
-    options.setState("mentionQuery", token)
-    options.setState("mentionIndex", 0)
-    queueMicrotask(() => {
-      updateMentionPosition(element, { start, end: caret })
-    })
-    return true
-  }
-
-  function handlePromptInput(event: InputEvent & { currentTarget: HTMLTextAreaElement }) {
-    const element = event.currentTarget
-    options.setState("promptInput", element.value)
-    if (options.state.mentionOpen) {
-      syncMentionFromCaret(element)
-      if (options.state.mentionOpen) return
-    }
-    const isDeletion = event.inputType ? event.inputType.startsWith("delete") : false
-    if (!isDeletion && tryOpenMentionFromCaret(element)) return
-    closeMention()
-  }
-
-  function handleMentionKeyDown({ event, mentionItems: items, insertMention }: MentionKeyDownOptions) {
-    if (!options.state.mentionOpen) return false
-    const list = items()
-    if (event.key === "ArrowDown") {
-      event.preventDefault()
-      if (list.length === 0) return true
-      const next = options.state.mentionIndex + 1 >= list.length ? 0 : options.state.mentionIndex + 1
-      options.setState("mentionIndex", next)
-      return true
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault()
-      if (list.length === 0) return true
-      const previous = options.state.mentionIndex - 1 < 0 ? list.length - 1 : options.state.mentionIndex - 1
-      options.setState("mentionIndex", previous)
-      return true
-    }
-    if (event.key === "Enter") {
-      event.preventDefault()
-      const targetItem = list[options.state.mentionIndex] ?? list[0]
-      if (targetItem) insertMention(targetItem)
-      return true
-    }
-    if (event.key === "Escape") {
-      event.preventDefault()
-      closeMention()
-      return true
-    }
-    return false
-  }
-
-  function generateMentionAlias(path: string) {
-    const existing = new Set<string>()
-    for (const key of options.state.inlineAliases.keys()) {
-      existing.add(key.toLowerCase())
-    }
-    for (const match of options.state.promptInput.matchAll(mentionPattern)) {
-      const token = match[1]
-      if (token) existing.add(token.toLowerCase())
-    }
-
-    const base = getFilename(path)
-    if (base) {
-      if (!existing.has(base.toLowerCase())) return base
-    }
-
-    const directory = getDirectory(path)
-    if (base && directory) {
-      const segments = directory.split("/").filter(Boolean)
-      for (let i = segments.length - 1; i >= 0; i -= 1) {
-        const candidate = `${segments.slice(i).join("/")}/${base}`
-        if (!existing.has(candidate.toLowerCase())) return candidate
-      }
-    }
-
-    if (!existing.has(path.toLowerCase())) return path
-
-    const fallback = base || path || "file"
-    let index = 2
-    let candidate = `${fallback}-${index}`
-    while (existing.has(candidate.toLowerCase())) {
-      index += 1
-      candidate = `${fallback}-${index}`
-    }
-    return candidate
-  }
-
-  function insertMention(path: string) {
-    const input = options.getInputRef()
-    if (!input) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) return
-    const node = options.resolveFile(path)
-    const alias = generateMentionAlias(path)
-    const mentionText = `@${alias}`
-    const value = options.state.promptInput
-    const before = value.slice(0, rangeValue.start)
-    const after = value.slice(rangeValue.end)
-    const needsLeadingSpace = before.length > 0 && !/\s$/.test(before)
-    const needsTrailingSpace = after.length > 0 && !/^\s/.test(after)
-    const leading = needsLeadingSpace ? `${before} ` : before
-    const trailingSpacer = needsTrailingSpace ? " " : ""
-    const nextValue = `${leading}${mentionText}${trailingSpacer}${after}`
-    const origin = options.getActiveContext()?.path === path ? "active" : "context"
-    const part: PromptAttachmentPart = {
-      kind: "attachment",
-      token: alias,
-      display: createAttachmentDisplay(path, node?.selection),
-      path,
-      selection: node?.selection,
-      origin,
-    }
-    options.setState("promptInput", nextValue)
-    if (input.value !== nextValue) {
-      input.value = nextValue
-    }
-    options.setState("inlineAliases", (prev) => {
-      const next = new Map(prev)
-      next.set(alias, part)
-      return next
-    })
-    options.addContextFile(path, node?.selection)
-    closeMention()
-    queueMicrotask(() => {
-      const caret = leading.length + mentionText.length + trailingSpacer.length
-      input.setSelectionRange(caret, caret)
-      syncMentionFromCaret(input)
-    })
-  }
-
-  return {
-    mentionResults,
-    mentionItems,
-    closeMention,
-    syncMentionFromCaret,
-    tryOpenMentionFromCaret,
-    updateMentionPosition,
-    handlePromptInput,
-    handleMentionKeyDown,
-    insertMention,
-  }
-}
-
-export function usePromptScrollSync(options: ScrollSyncOptions) {
-  let shouldAutoScroll = true
-
-  createEffect(() => {
-    options.state.promptInput
-    options.interim()
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      const overlay = options.getOverlayRef()
-      if (!input || !overlay) return
-      if (!shouldAutoScroll) {
-        overlay.scrollTop = input.scrollTop
-        if (options.state.mentionOpen) options.updateMentionPosition(input)
-        return
-      }
-      const maxInputScroll = input.scrollHeight - input.clientHeight
-      const next = maxInputScroll > 0 ? maxInputScroll : 0
-      input.scrollTop = next
-      overlay.scrollTop = next
-      if (options.state.mentionOpen) options.updateMentionPosition(input)
-    })
-  })
-
-  function handlePromptScroll(event: Event & { currentTarget: HTMLTextAreaElement }) {
-    const target = event.currentTarget
-    shouldAutoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 4
-    const overlay = options.getOverlayRef()
-    if (overlay) overlay.scrollTop = target.scrollTop
-    if (options.state.mentionOpen) options.updateMentionPosition(target)
-  }
-
-  function resetScrollPosition() {
-    shouldAutoScroll = true
-    const input = options.getInputRef()
-    const overlay = options.getOverlayRef()
-    if (input) input.scrollTop = 0
-    if (overlay) overlay.scrollTop = 0
-  }
-
-  return {
-    handlePromptScroll,
-    resetScrollPosition,
-    setAutoScroll: (value: boolean) => {
-      shouldAutoScroll = value
-    },
-  }
-}
@@ -1,581 +0,0 @@
-import { For, Show, createMemo, onCleanup, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Popover } from "@kobalte/core/popover"
-import { Tooltip, Button, Icon, Select } from "@opencode-ai/ui"
-import { FileIcon, IconButton } from "@/ui"
-import { useLocal } from "@/context"
-import type { FileContext, LocalFile } from "@/context/local"
-import { getDirectory, getFilename } from "@/utils"
-import { composeDisplaySegments, createAttachmentDisplay, parsePrompt, registerCandidate } from "./prompt-form-helpers"
-import type {
-  AttachmentCandidate,
-  PromptAttachmentPart,
-  PromptAttachmentSegment,
-  PromptDisplaySegment,
-  PromptSubmitValue,
-} from "./prompt-form-helpers"
-import { useMentionController, usePromptScrollSync, usePromptSpeech, type PromptFormState } from "./prompt-form-hooks"
-
-interface PromptFormProps {
-  class?: string
-  classList?: Record<string, boolean>
-  onSubmit: (prompt: PromptSubmitValue) => Promise<void> | void
-  onOpenModelSelect: () => void
-  onInputRefChange?: (element: HTMLTextAreaElement | undefined) => void
-}
-
-export default function PromptForm(props: PromptFormProps) {
-  const local = useLocal()
-
-  const [state, setState] = createStore<PromptFormState>({
-    promptInput: "",
-    isDragOver: false,
-    mentionOpen: false,
-    mentionQuery: "",
-    mentionRange: undefined,
-    mentionIndex: 0,
-    mentionAnchorOffset: { x: 0, y: 0 },
-    inlineAliases: new Map<string, PromptAttachmentPart>(),
-  })
-
-  const placeholderText = "Start typing or speaking..."
-
-  const {
-    isSupported,
-    isRecording,
-    interim: interimTranscript,
-    start: startSpeech,
-    stop: stopSpeech,
-  } = usePromptSpeech((updater) => setState("promptInput", updater))
-
-  let inputRef: HTMLTextAreaElement | undefined = undefined
-  let overlayContainerRef: HTMLDivElement | undefined = undefined
-  let mentionMeasureRef: HTMLDivElement | undefined = undefined
-
-  const attachmentLookup = createMemo(() => {
-    const map = new Map<string, AttachmentCandidate>()
-    const activeFile = local.context.active()
-    if (activeFile) {
-      registerCandidate(
-        map,
-        {
-          origin: "active",
-          path: activeFile.path,
-          selection: activeFile.selection,
-          display: createAttachmentDisplay(activeFile.path, activeFile.selection),
-        },
-        [activeFile.path, getFilename(activeFile.path)],
-      )
-    }
-    for (const item of local.context.all()) {
-      registerCandidate(
-        map,
-        {
-          origin: "context",
-          path: item.path,
-          selection: item.selection,
-          display: createAttachmentDisplay(item.path, item.selection),
-        },
-        [item.path, getFilename(item.path)],
-      )
-    }
-    for (const [alias, part] of state.inlineAliases) {
-      registerCandidate(
-        map,
-        {
-          origin: part.origin,
-          path: part.path,
-          selection: part.selection,
-          display: part.display ?? createAttachmentDisplay(part.path, part.selection),
-        },
-        [alias],
-      )
-    }
-    return map
-  })
-
-  const parsedPrompt = createMemo(() => parsePrompt(state.promptInput, attachmentLookup()))
-  const baseParts = createMemo(() => parsedPrompt().parts)
-  const attachmentSegments = createMemo<PromptAttachmentSegment[]>(() =>
-    parsedPrompt().segments.filter((segment): segment is PromptAttachmentSegment => segment.kind === "attachment"),
-  )
-
-  const {
-    mentionResults,
-    mentionItems,
-    closeMention,
-    syncMentionFromCaret,
-    updateMentionPosition,
-    handlePromptInput,
-    handleMentionKeyDown,
-    insertMention,
-  } = useMentionController({
-    state,
-    setState,
-    attachmentSegments,
-    getInputRef: () => inputRef,
-    getOverlayRef: () => overlayContainerRef,
-    getMeasureRef: () => mentionMeasureRef,
-    searchFiles: (query) => local.file.search(query),
-    resolveFile: (path) => local.file.node(path) ?? undefined,
-    addContextFile: (path, selection) =>
-      local.context.add({
-        type: "file",
-        path,
-        selection,
-      }),
-    getActiveContext: () => local.context.active() ?? undefined,
-  })
-
-  const { handlePromptScroll, resetScrollPosition } = usePromptScrollSync({
-    state,
-    getInputRef: () => inputRef,
-    getOverlayRef: () => overlayContainerRef,
-    interim: () => (isRecording() ? interimTranscript() : ""),
-    updateMentionPosition,
-  })
-
-  const displaySegments = createMemo<PromptDisplaySegment[]>(() => {
-    const value = state.promptInput
-    const segments = parsedPrompt().segments
-    const interim = isRecording() ? interimTranscript() : ""
-    return composeDisplaySegments(segments, value, interim)
-  })
-
-  const hasDisplaySegments = createMemo(() => displaySegments().length > 0)
-
-  function handleAttachmentNavigation(
-    event: KeyboardEvent & { currentTarget: HTMLTextAreaElement },
-    direction: "left" | "right",
-  ) {
-    const element = event.currentTarget
-    const caret = element.selectionStart ?? 0
-    const segments = attachmentSegments()
-    if (direction === "left") {
-      let match = segments.find((segment) => caret > segment.start && caret <= segment.end)
-      if (!match && element.selectionStart !== element.selectionEnd) {
-        match = segments.find(
-          (segment) => element.selectionStart === segment.start && element.selectionEnd === segment.end,
-        )
-      }
-      if (!match) return false
-      event.preventDefault()
-      if (element.selectionStart === match.start && element.selectionEnd === match.end) {
-        const next = Math.max(0, match.start)
-        element.setSelectionRange(next, next)
-        syncMentionFromCaret(element)
-        return true
-      }
-      element.setSelectionRange(match.start, match.end)
-      syncMentionFromCaret(element)
-      return true
-    }
-    if (direction === "right") {
-      let match = segments.find((segment) => caret >= segment.start && caret < segment.end)
-      if (!match && element.selectionStart !== element.selectionEnd) {
-        match = segments.find(
-          (segment) => element.selectionStart === segment.start && element.selectionEnd === segment.end,
-        )
-      }
-      if (!match) return false
-      event.preventDefault()
-      if (element.selectionStart === match.start && element.selectionEnd === match.end) {
-        const next = match.end
-        element.setSelectionRange(next, next)
-        syncMentionFromCaret(element)
-        return true
-      }
-      element.setSelectionRange(match.start, match.end)
-      syncMentionFromCaret(element)
-      return true
-    }
-    return false
-  }
-
-  function renderAttachmentChip(part: PromptAttachmentPart, _placeholder: string) {
-    const display = part.display ?? createAttachmentDisplay(part.path, part.selection)
-    return <span class="truncate max-w-[16ch] text-primary">@{display}</span>
-  }
-
-  function renderTextSegment(value: string) {
-    if (!value) return undefined
-    return <span class="text-text">{value}</span>
-  }
-
-  function handlePromptKeyDown(event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
-    if (event.isComposing) return
-    const target = event.currentTarget
-    const key = event.key
-
-    const handled = handleMentionKeyDown({
-      event,
-      mentionItems,
-      insertMention,
-    })
-    if (handled) return
-
-    if (!state.mentionOpen) {
-      if (key === "ArrowLeft") {
-        if (handleAttachmentNavigation(event, "left")) return
-      }
-      if (key === "ArrowRight") {
-        if (handleAttachmentNavigation(event, "right")) return
-      }
-    }
-
-    if (key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End") {
-      queueMicrotask(() => {
-        syncMentionFromCaret(target)
-      })
-    }
-
-    if (key === "Enter" && !event.shiftKey) {
-      event.preventDefault()
-      target.form?.requestSubmit()
-    }
-  }
-
-  const handleSubmit = async (event: SubmitEvent) => {
-    event.preventDefault()
-    const parts = baseParts()
-    const text = parts
-      .map((part) => {
-        if (part.kind === "text") return part.value
-        return `@${part.path}`
-      })
-      .join("")
-
-    const currentPrompt: PromptSubmitValue = {
-      text,
-      parts,
-    }
-    setState("promptInput", "")
-    resetScrollPosition()
-    if (inputRef) {
-      inputRef.blur()
-    }
-
-    await props.onSubmit(currentPrompt)
-  }
-
-  onCleanup(() => {
-    props.onInputRefChange?.(undefined)
-  })
-
-  return (
-    <form onSubmit={handleSubmit} class={props.class} classList={props.classList}>
-      <div
-        class="w-full 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": state.isDragOver,
-        }}
-        onDragEnter={(event) => {
-          const evt = event as unknown as globalThis.DragEvent
-          if (evt.dataTransfer?.types.includes("text/plain")) {
-            evt.preventDefault()
-            setState("isDragOver", true)
-          }
-        }}
-        onDragLeave={(event) => {
-          if (event.currentTarget === event.target) {
-            setState("isDragOver", 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()
-          setState("isDragOver", 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={state.promptInput}
-            onInput={handlePromptInput}
-            onKeyDown={handlePromptKeyDown}
-            onClick={(event) =>
-              queueMicrotask(() => {
-                syncMentionFromCaret(event.currentTarget)
-              })
-            }
-            onSelect={(event) =>
-              queueMicrotask(() => {
-                syncMentionFromCaret(event.currentTarget)
-              })
-            }
-            onBlur={(event) => {
-              const next = event.relatedTarget as HTMLElement | null
-              if (next && next.closest('[data-mention-popover="true"]')) return
-              closeMention()
-            }}
-            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"
-          >
-            <PromptDisplayOverlay
-              hasDisplaySegments={hasDisplaySegments()}
-              displaySegments={displaySegments()}
-              placeholder={placeholderText}
-              renderAttachmentChip={renderAttachmentChip}
-              renderTextSegment={renderTextSegment}
-            />
-          </div>
-          <div
-            ref={(element) => {
-              mentionMeasureRef = element ?? undefined
-            }}
-            class="pointer-events-none invisible absolute inset-0 whitespace-pre-wrap text-base font-light leading-relaxed px-0.5"
-            aria-hidden="true"
-          ></div>
-          <MentionSuggestions
-            open={state.mentionOpen}
-            anchor={state.mentionAnchorOffset}
-            loading={mentionResults.loading}
-            items={mentionItems()}
-            activeIndex={state.mentionIndex}
-            onHover={(index) => setState("mentionIndex", index)}
-            onSelect={insertMention}
-          />
-        </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>
-)
-
-function PromptDisplayOverlay(props: {
-  hasDisplaySegments: boolean
-  displaySegments: PromptDisplaySegment[]
-  placeholder: string
-  renderAttachmentChip: (part: PromptAttachmentPart, placeholder: string) => JSX.Element
-  renderTextSegment: (value: string) => JSX.Element | undefined
-}) {
-  return (
-    <div class="px-0.5 text-base font-light leading-relaxed whitespace-pre-wrap text-left">
-      <Show when={props.hasDisplaySegments} fallback={<span class="text-text-muted/70">{props.placeholder}</span>}>
-        <For each={props.displaySegments}>
-          {(segment) => {
-            if (segment.kind === "text") {
-              return props.renderTextSegment(segment.value)
-            }
-            if (segment.kind === "attachment") {
-              return props.renderAttachmentChip(segment.part, segment.source)
-            }
-            return (
-              <span class="text-text-muted/60 italic">
-                {segment.leadingSpace ? ` ${segment.value}` : segment.value}
-              </span>
-            )
-          }}
-        </For>
-      </Show>
-    </div>
-  )
-}
-
-function MentionSuggestions(props: {
-  open: boolean
-  anchor: { x: number; y: number }
-  loading: boolean
-  items: string[]
-  activeIndex: number
-  onHover: (index: number) => void
-  onSelect: (path: string) => void
-}) {
-  return (
-    <Popover open={props.open} modal={false} gutter={8} placement="bottom-start">
-      <Popover.Trigger class="hidden" />
-      <Popover.Anchor
-        class="pointer-events-none absolute top-0 left-0 w-0 h-0"
-        style={{ transform: `translate(${props.anchor.x}px, ${props.anchor.y}px)` }}
-      />
-      <Popover.Portal>
-        <Popover.Content
-          data-mention-popover="true"
-          class="z-50 w-72 max-h-60 overflow-y-auto rounded-md border border-border-subtle/40 bg-background-panel shadow-[0_10px_30px_rgba(0,0,0,0.35)] focus:outline-none"
-        >
-          <div class="py-1">
-            <Show when={props.loading}>
-              <div class="flex items-center gap-2 px-3 py-2 text-xs text-text-muted">
-                <Icon name="refresh" size={12} class="animate-spin" />
-                <span>Searching…</span>
-              </div>
-            </Show>
-            <Show when={!props.loading && props.items.length === 0}>
-              <div class="px-3 py-2 text-xs text-text-muted/80">No matching files</div>
-            </Show>
-            <For each={props.items}>
-              {(path, indexAccessor) => {
-                const index = indexAccessor()
-                const dir = getDirectory(path)
-                return (
-                  <button
-                    type="button"
-                    onMouseDown={(event) => event.preventDefault()}
-                    onMouseEnter={() => props.onHover(index)}
-                    onClick={() => props.onSelect(path)}
-                    class="w-full px-3 py-2 flex items-center gap-2 rounded-md text-left text-xs transition-colors"
-                    classList={{
-                      "bg-background-element text-text": index === props.activeIndex,
-                      "text-text-muted": index !== props.activeIndex,
-                    }}
-                  >
-                    <FileIcon node={{ path, type: "file" }} class="size-3 shrink-0" />
-                    <div class="flex flex-col min-w-0">
-                      <span class="truncate">{getFilename(path)}</span>
-                      {dir && <span class="truncate text-text-muted/70">{dir}</span>}
-                    </div>
-                  </button>
-                )
-              }}
-            </For>
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover>
-  )
-}
-
-export type {
-  PromptAttachmentPart,
-  PromptAttachmentSegment,
-  PromptContentPart,
-  PromptDisplaySegment,
-  PromptSubmitValue,
-} from "./prompt-form-helpers"
@@ -1,63 +1,90 @@
-import { createEffect, on, Component, createMemo, Show } from "solid-js"
+import { Button, Icon, IconButton, Select, SelectDialog } from "@opencode-ai/ui"
+import { useFilteredList } from "@opencode-ai/ui/hooks"
+import { createEffect, on, Component, createMemo, Show, For, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
+import { FileIcon } from "@/ui"
+import { getDirectory, getFilename } from "@/utils"
+import { createFocusSignal } from "@solid-primitives/active-element"
+import { TextSelection, useLocal } from "@/context/local"
+import { DateTime } from "luxon"

-interface TextPart {
-  type: "text"
+interface PartBase {
  content: string
+  start: number
+  end: number
 }

-interface AttachmentPart {
-  type: "attachment"
-  fileId: string
-  name: string
+export interface TextPart extends PartBase {
+  type: "text"
 }

-export type ContentPart = TextPart | AttachmentPart
-
-export interface AttachmentToAdd {
-  id: string
-  name: string
+export interface FileAttachmentPart extends PartBase {
+  type: "file"
+  path: string
+  selection?: TextSelection
 }

-type AddAttachmentCallback = (attachment: AttachmentToAdd) => void
-
-export interface PopoverState {
-  isOpen: boolean
-  searchQuery: string
-  addAttachment: AddAttachmentCallback
-}
+export type ContentPart = TextPart | FileAttachmentPart

 interface PromptInputProps {
  onSubmit: (parts: ContentPart[]) => void
-  onShowAttachments?: (state: PopoverState | null) => void
  class?: string
+  ref?: (el: HTMLDivElement) => void
 }

 export const PromptInput: Component<PromptInputProps> = (props) => {
-  let editorRef: HTMLDivElement | undefined
+  const local = useLocal()
+  let editorRef!: HTMLDivElement

-  const defaultParts = [{ type: "text", content: "" } as const]
+  const defaultParts = [{ type: "text", content: "", start: 0, end: 0 } as const]
  const [store, setStore] = createStore<{
    contentParts: ContentPart[]
-    popover: {
-      isOpen: boolean
-      searchQuery: string
-    }
+    popoverIsOpen: boolean
  }>({
    contentParts: defaultParts,
-    popover: {
-      isOpen: false,
-      searchQuery: "",
-    },
+    popoverIsOpen: false,
  })

  const isEmpty = createMemo(() => isEqual(store.contentParts, defaultParts))
+  const isFocused = createFocusSignal(() => editorRef)
+
+  const handlePaste = (event: ClipboardEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    // @ts-expect-error
+    const plainText = (event.clipboardData || window.clipboardData)?.getData("text/plain") ?? ""
+    addPart({ type: "text", content: plainText, start: 0, end: 0 })
+  }
+
+  onMount(() => {
+    editorRef.addEventListener("paste", handlePaste)
+  })
+  onCleanup(() => {
+    editorRef.removeEventListener("paste", handlePaste)
+  })
+
+  createEffect(() => {
+    if (isFocused()) {
+      handleInput()
+    } else {
+      setStore("popoverIsOpen", false)
+    }
+  })
+
+  const { flat, active, onInput, onKeyDown } = useFilteredList<string>({
+    items: local.file.search,
+    key: (x) => x,
+    onSelect: (path) => {
+      if (!path) return
+      addPart({ type: "file", path, content: "@" + getFilename(path), start: 0, end: 0 })
+      setStore("popoverIsOpen", false)
+    },
+  })

  createEffect(
    on(
      () => store.contentParts,
      (currentParts) => {
-        if (!editorRef) return
        const domParts = parseFromDOM()
        if (isEqual(currentParts, domParts)) return

@@ -70,14 +97,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
        editorRef.innerHTML = ""
        currentParts.forEach((part) => {
          if (part.type === "text") {
-            editorRef!.appendChild(document.createTextNode(part.content))
-          } else if (part.type === "attachment") {
+            editorRef.appendChild(document.createTextNode(part.content))
+          } else if (part.type === "file") {
            const pill = document.createElement("span")
-            pill.textContent = `@${part.name}`
-            pill.className = "attachment-pill"
-            pill.setAttribute("data-file-id", part.fileId)
+            pill.textContent = part.content
+            pill.setAttribute("data-type", "file")
+            pill.setAttribute("data-path", part.path)
            pill.setAttribute("contenteditable", "false")
-            editorRef!.appendChild(pill)
+            pill.style.userSelect = "text"
+            pill.style.cursor = "default"
+            editorRef.appendChild(pill)
          }
        })

@@ -88,30 +117,32 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
    ),
  )

-  createEffect(() => {
-    if (store.popover.isOpen) {
-      props.onShowAttachments?.({
-        isOpen: true,
-        searchQuery: store.popover.searchQuery,
-        addAttachment: addAttachment,
-      })
-    } else {
-      props.onShowAttachments?.(null)
-    }
-  })
-
  const parseFromDOM = (): ContentPart[] => {
-    if (!editorRef) return []
    const newParts: ContentPart[] = []
+    let position = 0
    editorRef.childNodes.forEach((node) => {
      if (node.nodeType === Node.TEXT_NODE) {
-        if (node.textContent) newParts.push({ type: "text", content: node.textContent })
-      } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.fileId) {
-        newParts.push({
-          type: "attachment",
-          fileId: (node as HTMLElement).dataset.fileId!,
-          name: node.textContent!.substring(1),
-        })
+        if (node.textContent) {
+          const content = node.textContent
+          newParts.push({ type: "text", content, start: position, end: position + content.length })
+          position += content.length
+        }
+      } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type) {
+        switch ((node as HTMLElement).dataset.type) {
+          case "file":
+            const content = node.textContent!
+            newParts.push({
+              type: "file",
+              path: (node as HTMLElement).dataset.path!,
+              content,
+              start: position,
+              end: position + content.length,
+            })
+            position += content.length
+            break
+          default:
+            break
+        }
      }
    })
    if (newParts.length === 0) newParts.push(...defaultParts)
@@ -120,96 +151,265 @@ export const PromptInput: Component<PromptInputProps> = (props) => {

  const handleInput = () => {
    const rawParts = parseFromDOM()
-    const cursorPosition = getCursorPosition(editorRef!)
-    const rawText = rawParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("")
+    const cursorPosition = getCursorPosition(editorRef)
+    const rawText = rawParts.map((p) => p.content).join("")

    const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
    if (atMatch) {
-      setStore("popover", { isOpen: true, searchQuery: atMatch[1] })
-    } else if (store.popover.isOpen) {
-      setStore("popover", "isOpen", false)
+      onInput(atMatch[1])
+      setStore("popoverIsOpen", true)
+    } else if (store.popoverIsOpen) {
+      setStore("popoverIsOpen", false)
    }

    setStore("contentParts", rawParts)
  }

-  const addAttachment: AddAttachmentCallback = (attachment) => {
-    const rawText = store.contentParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("")
-    const cursorPosition = getCursorPosition(editorRef!)
-
+  const addPart = (part: ContentPart) => {
+    const cursorPosition = getCursorPosition(editorRef)
+    const rawText = store.contentParts.map((p) => p.content).join("")
    const textBeforeCursor = rawText.substring(0, cursorPosition)
    const atMatch = textBeforeCursor.match(/@(\S*)$/)

-    if (!atMatch) return
+    const startIndex = atMatch ? atMatch.index! : cursorPosition
+    const endIndex = atMatch ? cursorPosition : cursorPosition

-    const startIndex = atMatch.index!
+    const pushText = (acc: { parts: ContentPart[]; runningIndex: number }, value: string) => {
+      if (!value) return
+      const last = acc.parts[acc.parts.length - 1]
+      if (last && last.type === "text") {
+        acc.parts[acc.parts.length - 1] = {
+          type: "text",
+          content: last.content + value,
+          start: last.start,
+          end: last.end + value.length,
+        }
+        return
+      }
+      acc.parts.push({ type: "text", content: value, start: acc.runningIndex, end: acc.runningIndex + value.length })
+    }

-    // Create new structured content
-    const newParts: ContentPart[] = []
-    const textBeforeTrigger = rawText.substring(0, startIndex)
-    if (textBeforeTrigger) newParts.push({ type: "text", content: textBeforeTrigger })
+    const {
+      parts: nextParts,
+      inserted,
+      cursorPositionAfter,
+    } = store.contentParts.reduce(
+      (acc, item) => {
+        if (acc.inserted) {
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
+          acc.runningIndex += item.content.length
+          return acc
+        }

-    newParts.push({ type: "attachment", fileId: attachment.id, name: attachment.name })
+        const nextIndex = acc.runningIndex + item.content.length
+        if (nextIndex <= startIndex) {
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
+          acc.runningIndex = nextIndex
+          return acc
+        }

-    // Add a space after the pill for better UX
-    newParts.push({ type: "text", content: " " })
+        if (item.type !== "text") {
+          acc.parts.push({ ...item, start: acc.runningIndex, end: acc.runningIndex + item.content.length })
+          acc.runningIndex = nextIndex
+          return acc
+        }

-    const textAfterCursor = rawText.substring(cursorPosition)
-    if (textAfterCursor) newParts.push({ type: "text", content: textAfterCursor })
+        const headLength = Math.max(0, startIndex - acc.runningIndex)
+        const tailLength = Math.max(0, endIndex - acc.runningIndex)
+        const head = item.content.slice(0, headLength)
+        const tail = item.content.slice(tailLength)

-    setStore("contentParts", newParts)
-    setStore("popover", "isOpen", false)
+        pushText(acc, head)
+        acc.runningIndex += head.length

-    // Set cursor position after the newly added pill + space
-    // We need to wait for the DOM to update
-    queueMicrotask(() => {
-      setCursorPosition(editorRef!, textBeforeTrigger.length + 1 + attachment.name.length + 1)
-    })
-  }
+        if (part.type === "text") {
+          pushText(acc, part.content)
+          acc.runningIndex += part.content.length
+        }
+        if (part.type !== "text") {
+          acc.parts.push({ ...part, start: acc.runningIndex, end: acc.runningIndex + part.content.length })
+          acc.runningIndex += part.content.length
+        }

-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (store.popover.isOpen && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
-      // In a real implementation, you'd prevent default and delegate this to the popover
-      console.log("Key press delegated to popover:", event.key)
-      event.preventDefault()
+        const needsGap = Boolean(atMatch)
+        const rest = needsGap ? (tail ? (/^\s/.test(tail) ? tail : ` ${tail}`) : " ") : tail
+        pushText(acc, rest)
+        acc.runningIndex += rest.length
+
+        const baseCursor = startIndex + part.content.length
+        const cursorAddition = needsGap && rest.length > 0 ? 1 : 0
+        acc.cursorPositionAfter = baseCursor + cursorAddition
+
+        acc.inserted = true
+        return acc
+      },
+      {
+        parts: [] as ContentPart[],
+        runningIndex: 0,
+        inserted: false,
+        cursorPositionAfter: cursorPosition + part.content.length,
+      },
+    )
+
+    if (!inserted) {
+      const baseParts = store.contentParts.filter((item) => !(item.type === "text" && item.content === ""))
+      const runningIndex = baseParts.reduce((sum, p) => sum + p.content.length, 0)
+      const appendedAcc = { parts: [...baseParts] as ContentPart[], runningIndex }
+      if (part.type === "text") {
+        pushText(appendedAcc, part.content)
+      }
+      if (part.type !== "text") {
+        appendedAcc.parts.push({
+          ...part,
+          start: appendedAcc.runningIndex,
+          end: appendedAcc.runningIndex + part.content.length,
+        })
+      }
+      const next = appendedAcc.parts.length > 0 ? appendedAcc.parts : defaultParts
+      setStore("contentParts", next)
+      setStore("popoverIsOpen", false)
+      const nextCursor = rawText.length + part.content.length
+      queueMicrotask(() => setCursorPosition(editorRef, nextCursor))
      return
    }

-    if (event.key === "Enter" && !event.shiftKey) {
+    setStore("contentParts", nextParts)
+    setStore("popoverIsOpen", false)
+
+    queueMicrotask(() => setCursorPosition(editorRef, cursorPositionAfter))
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (store.popoverIsOpen && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
+      onKeyDown(event)
      event.preventDefault()
-      if (store.contentParts.length > 0) {
-        props.onSubmit([...store.contentParts])
-        setStore("contentParts", defaultParts)
-      }
+      return
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      handleSubmit(event)
+    }
+  }
+
+  const handleSubmit = (event: Event) => {
+    event.preventDefault()
+    if (store.contentParts.length > 0) {
+      props.onSubmit([...store.contentParts])
+      setStore("contentParts", defaultParts)
    }
  }

  return (
-    <div
-      classList={{
-        "size-full max-w-xl bg-surface-base border border-border-base": true,
-        "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      <div class="p-3" />
-      <div class="relative">
-        <div
-          ref={editorRef}
-          contenteditable="true"
-          onInput={handleInput}
-          onKeyDown={handleKeyDown}
-          classList={{
-            "w-full p-3 text-sm focus:outline-none": true,
-          }}
-        />
-        <Show when={isEmpty()}>
-          <div class="absolute bottom-0 left-0 p-3 text-sm text-text-weak pointer-events-none">
-            Plan and build anything
+    <div class="relative size-full _max-h-[320px] flex flex-col gap-3">
+      <Show when={store.popoverIsOpen}>
+        <div class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-[252px] min-h-10 overflow-y-auto flex flex-col p-2 pb-0 rounded-2xl border border-border-base bg-surface-raised-stronger-non-alpha shadow-md">
+          <For each={flat()}>
+            {(i) => (
+              <div
+                classList={{
+                  "w-full flex items-center justify-between rounded-md": true,
+                  "bg-surface-raised-base-hover": active() === i,
+                }}
+              >
+                <div class="flex items-center gap-x-2 grow min-w-0">
+                  <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
+                  <div class="flex items-center text-14-regular">
+                    <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                      {getDirectory(i)}
+                    </span>
+                    <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+                  </div>
+                </div>
+                <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+      <form
+        onSubmit={handleSubmit}
+        classList={{
+          "bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
+          "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
+          [props.class ?? ""]: !!props.class,
+        }}
+      >
+        <div class="relative max-h-[240px] overflow-y-auto">
+          <div
+            ref={(el) => {
+              editorRef = el
+              props.ref?.(el)
+            }}
+            contenteditable="true"
+            onInput={handleInput}
+            onKeyDown={handleKeyDown}
+            classList={{
+              "w-full p-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "[&>[data-type=file]]:text-icon-info-active": true,
+            }}
+          />
+          <Show when={isEmpty()}>
+            <div class="absolute top-0 left-0 p-3 text-14-regular text-text-weak pointer-events-none">
+              Plan and build anything
+            </div>
+          </Show>
+        </div>
+        <div class="p-3 flex items-center justify-between">
+          <div class="flex items-center justify-start gap-1">
+            <Select
+              options={local.agent.list().map((agent) => agent.name)}
+              current={local.agent.current().name}
+              onSelect={local.agent.set}
+              class="capitalize"
+            />
+            <SelectDialog
+              title="Select model"
+              placeholder="Search models"
+              emptyMessage="No model results"
+              key={(x) => `${x.provider.id}:${x.id}`}
+              items={local.model.list()}
+              current={local.model.current()}
+              filterKeys={["provider.name", "name", "id"]}
+              groupBy={(x) => x.provider.name}
+              sortGroupsBy={(a, b) => {
+                const order = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"]
+                const aProvider = a.items[0].provider.id
+                const bProvider = b.items[0].provider.id
+                if (order.includes(aProvider) && !order.includes(bProvider)) return -1
+                if (!order.includes(aProvider) && order.includes(bProvider)) return 1
+                return order.indexOf(aProvider) - order.indexOf(bProvider)
+              }}
+              onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
+              trigger={
+                <Button as="div" variant="ghost">
+                  {local.model.current()?.name ?? "Select model"}
+                  <span class="ml-0.5 text-text-weak text-12-regular">{local.model.current()?.provider.name}</span>
+                  <Icon name="chevron-down" size="small" />
+                </Button>
+              }
+            >
+              {(i) => (
+                <div class="w-full flex items-center justify-between gap-x-3">
+                  <div class="flex items-center gap-x-2.5 text-text-muted grow min-w-0">
+                    <img src={`https://models.dev/logos/${i.provider.id}.svg`} class="size-6 p-0.5 shrink-0 " />
+                    <div class="flex gap-x-3 items-baseline flex-[1_0_0]">
+                      <span class="text-14-medium text-text-strong overflow-hidden text-ellipsis">{i.name}</span>
+                      <Show when={i.release_date}>
+                        <span class="text-12-medium text-text-weak overflow-hidden text-ellipsis truncate min-w-0">
+                          {DateTime.fromFormat(i.release_date, "yyyy-MM-dd").toFormat("LLL yyyy")}
+                        </span>
+                      </Show>
+                    </div>
+                  </div>
+                  <Show when={!i.cost || i.cost?.input === 0}>
+                    <div class="overflow-hidden text-12-medium text-text-strong">Free</div>
+                  </Show>
+                </div>
+              )}
+            </SelectDialog>
          </div>
-        </Show>
-      </div>
-      <div class="p-3" />
+          <IconButton type="submit" disabled={isEmpty()} icon="arrow-up" variant="primary" />
+        </div>
+      </form>
    </div>
  )
 }
@@ -223,7 +423,7 @@ function isEqual(arrA: ContentPart[], arrB: ContentPart[]): boolean {
    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
      return false
    }
-    if (partA.type === "attachment" && partA.fileId !== (partB as AttachmentPart).fileId) {
+    if (partA.type === "file" && partA.path !== (partB as FileAttachmentPart).path) {
      return false
    }
  }
@@ -241,24 +441,48 @@ function getCursorPosition(parent: HTMLElement): number {
 }

 function setCursorPosition(parent: HTMLElement, position: number) {
-  let child = parent.firstChild
-  let offset = position
-  while (child) {
-    if (offset > child.textContent!.length) {
-      offset -= child.textContent!.length
-      child = child.nextSibling
-    } else {
-      try {
-        const range = document.createRange()
-        const sel = window.getSelection()
-        range.setStart(child, offset)
-        range.collapse(true)
-        sel?.removeAllRanges()
-        sel?.addRange(range)
-      } catch (e) {
-        console.error("Failed to set cursor position.", e)
-      }
+  let remaining = position
+  let node = parent.firstChild
+  while (node) {
+    const length = node.textContent ? node.textContent.length : 0
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
+
+    if (isText && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      range.setStart(node, remaining)
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
      return
    }
+
+    if (isFile && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      range.setStartAfter(node)
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+      return
+    }
+
+    remaining -= length
+    node = node.nextSibling
  }
+
+  const fallbackRange = document.createRange()
+  const fallbackSelection = window.getSelection()
+  const last = parent.lastChild
+  if (last && last.nodeType === Node.TEXT_NODE) {
+    const len = last.textContent ? last.textContent.length : 0
+    fallbackRange.setStart(last, len)
+  }
+  if (!last || last.nodeType !== Node.TEXT_NODE) {
+    fallbackRange.selectNodeContents(parent)
+  }
+  fallbackRange.collapse(false)
+  fallbackSelection?.removeAllRanges()
+  fallbackSelection?.addRange(fallbackRange)
 }
@@ -1,226 +0,0 @@
-import { createEffect, Show, For, createMemo, type JSX, createResource } from "solid-js"
-import { Dialog } from "@kobalte/core/dialog"
-import { Icon } from "@opencode-ai/ui"
-import { IconButton } from "@/ui"
-import { createStore } from "solid-js/store"
-import { entries, flatMap, groupBy, map, pipe } from "remeda"
-import { createList } from "solid-list"
-import fuzzysort from "fuzzysort"
-
-interface SelectDialogProps<T> {
-  items: T[] | ((filter: string) => Promise<T[]>)
-  key: (item: T) => string
-  render: (item: T) => JSX.Element
-  filter?: string[]
-  current?: T
-  placeholder?: string
-  groupBy?: (x: T) => string
-  onSelect?: (value: T | undefined) => void
-  onClose?: () => void
-}
-
-export function SelectDialog<T>(props: SelectDialogProps<T>) {
-  let scrollRef: HTMLDivElement | undefined
-  const [store, setStore] = createStore({
-    filter: "",
-    mouseActive: false,
-  })
-
-  const [grouped] = createResource(
-    () => store.filter,
-    async (filter) => {
-      const needle = filter.toLowerCase()
-      const all = (typeof props.items === "function" ? await props.items(needle) : props.items) || []
-      const result = pipe(
-        all,
-        (x) => {
-          if (!needle) return x
-          if (!props.filter && Array.isArray(x) && x.every((e) => typeof e === "string")) {
-            return fuzzysort.go(needle, x).map((x) => x.target) as T[]
-          }
-          return fuzzysort.go(needle, x, { keys: props.filter! }).map((x) => x.obj)
-        },
-        groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
-        // mapValues((x) => x.sort((a, b) => props.key(a).localeCompare(props.key(b)))),
-        entries(),
-        map(([k, v]) => ({ category: k, items: v })),
-      )
-      return result
-    },
-  )
-  const flat = createMemo(() => {
-    return pipe(
-      grouped() || [],
-      flatMap((x) => x.items),
-    )
-  })
-  const list = createList({
-    items: () => flat().map(props.key),
-    initialActive: props.current ? props.key(props.current) : undefined,
-    loop: true,
-  })
-  const resetSelection = () => {
-    const all = flat()
-    if (all.length === 0) return
-    list.setActive(props.key(all[0]))
-  }
-
-  createEffect(() => {
-    store.filter
-    scrollRef?.scrollTo(0, 0)
-    resetSelection()
-  })
-
-  createEffect(() => {
-    const all = flat()
-    if (store.mouseActive || all.length === 0) return
-    if (list.active() === props.key(all[0])) {
-      scrollRef?.scrollTo(0, 0)
-      return
-    }
-    const element = scrollRef?.querySelector(`[data-key="${list.active()}"]`)
-    element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
-  })
-
-  const handleInput = (value: string) => {
-    setStore("filter", value)
-    resetSelection()
-  }
-
-  const handleSelect = (item: T) => {
-    props.onSelect?.(item)
-    props.onClose?.()
-  }
-
-  const handleKey = (e: KeyboardEvent) => {
-    setStore("mouseActive", false)
-
-    if (e.key === "Enter") {
-      e.preventDefault()
-      const selected = flat().find((x) => props.key(x) === list.active())
-      if (selected) handleSelect(selected)
-    } else if (e.key === "Escape") {
-      e.preventDefault()
-      props.onClose?.()
-    } else {
-      list.onKeyDown(e)
-    }
-  }
-
-  return (
-    <Dialog defaultOpen modal onOpenChange={(open) => open || props.onClose?.()}>
-      <Dialog.Portal>
-        <Dialog.Overlay class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100]" />
-        <Dialog.Content
-          class="fixed top-[20%] left-1/2 -translate-x-1/2 w-[90vw] max-w-2xl 
-                 shadow-[0_0_33px_rgba(0,0,0,0.8)]
-                 bg-background border border-border-subtle/30 rounded-lg  z-[101]
-                 max-h-[60vh] flex flex-col"
-        >
-          <div class="border-b border-border-subtle/30">
-            <div class="relative">
-              <Icon name="command" size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted/80" />
-              <input
-                type="text"
-                value={store.filter}
-                onInput={(e) => handleInput(e.currentTarget.value)}
-                onKeyDown={handleKey}
-                placeholder={props.placeholder}
-                class="w-full pl-10 pr-4 py-2 rounded-t-md
-                       text-sm text-text placeholder-text-muted/70
-                       focus:outline-none"
-                autofocus
-                spellcheck={false}
-                autocorrect="off"
-                autocomplete="off"
-                autocapitalize="off"
-              />
-              <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                {/* <Show when={fileResults.loading && mode() === "files"}>
-                  <div class="text-text-muted">
-                    <Icon name="refresh" size={14} class="animate-spin" />
-                  </div>
-                </Show> */}
-                <Show when={store.filter}>
-                  <IconButton
-                    size="xs"
-                    variant="ghost"
-                    class="text-text-muted hover:text-text"
-                    onClick={() => {
-                      setStore("filter", "")
-                      resetSelection()
-                    }}
-                  >
-                    <Icon name="close" size={14} />
-                  </IconButton>
-                </Show>
-              </div>
-            </div>
-          </div>
-          <div ref={(el) => (scrollRef = el)} class="relative flex-1 overflow-y-auto">
-            <Show
-              when={flat().length > 0}
-              fallback={<div class="text-center py-8 text-text-muted text-sm">No results</div>}
-            >
-              <For each={grouped()}>
-                {(group) => (
-                  <>
-                    <Show when={group.category}>
-                      <div class="top-0 sticky z-10 bg-background-panel p-2 text-xs text-text-muted/60 tracking-wider uppercase">
-                        {group.category}
-                      </div>
-                    </Show>
-                    <div class="p-2">
-                      <For each={group.items}>
-                        {(item) => (
-                          <button
-                            data-key={props.key(item)}
-                            onClick={() => handleSelect(item)}
-                            onMouseMove={() => {
-                              setStore("mouseActive", true)
-                              list.setActive(props.key(item))
-                            }}
-                            classList={{
-                              "w-full px-3 py-2 flex items-center gap-3": true,
-                              "rounded-md text-left transition-colors group": true,
-                              "bg-background-element": props.key(item) === list.active(),
-                            }}
-                          >
-                            {props.render(item)}
-                          </button>
-                        )}
-                      </For>
-                    </div>
-                  </>
-                )}
-              </For>
-            </Show>
-          </div>
-          <div class="p-3 border-t border-border-subtle/30 flex items-center justify-between text-xs text-text-muted">
-            <div class="flex items-center gap-5">
-              <span class="flex items-center gap-1.5">
-                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
-                  ↑↓
-                </kbd>
-                Navigate
-              </span>
-              <span class="flex items-center gap-1.5">
-                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
-                  ↵
-                </kbd>
-                Select
-              </span>
-              <span class="flex items-center gap-1.5">
-                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
-                  ESC
-                </kbd>
-                Close
-              </span>
-            </div>
-            <span>{`${flat().length} results`}</span>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog>
-  )
-}
@@ -1,38 +0,0 @@
-import { useSync, useLocal } from "@/context"
-import { Tooltip } from "@opencode-ai/ui"
-import { DateTime } from "luxon"
-import { VList } from "virtua/solid"
-
-export default function SessionList() {
-  const sync = useSync()
-  const local = useLocal()
-  return (
-    <VList data={sync.data.session} class="no-scrollbar p-3">
-      {(session) => (
-        <Tooltip placement="right" value={session.title} class="w-full min-w-0">
-          <button
-            data-active={local.session.active()?.id === session.id}
-            class="group w-full min-w-0 text-left truncate justify-start text-xs my-0.5 cursor-pointer
-                   flex flex-col gap-1 rounded-md p-2 border-[0.5px] border-transparent
-                   hover:not-data-[active=true]:bg-background-panel
-                   data-[active=true]:bg-background-element data-[active=true]:border-border-subtle"
-            onClick={() => local.session.setActive(session.id)}
-          >
-            <div class="flex gap-1 items-center">
-              <div
-                classList={{
-                  "text-text/80 min-w-0 grow truncate": true,
-                  "group-data-[active=true]:text-text!": true,
-                }}
-              >
-                {session.title}
-              </div>
-              <div class="shrink-0 text-text-muted/60">{DateTime.fromMillis(session.time.updated).toRelative()}</div>
-            </div>
-            <span class="text-text-muted truncate">{session.share?.url}</span>
-          </button>
-        </Tooltip>
-      )}
-    </VList>
-  )
-}
@@ -1,11 +1,9 @@
-import { useLocal, useSync } from "@/context"
-import { Icon } from "@opencode-ai/ui"
+import { Icon, Tooltip } from "@opencode-ai/ui"
 import { Collapsible } from "@/ui"
-import type { Part, ToolPart } from "@opencode-ai/sdk"
+import type { AssistantMessage, Message, Part, ToolPart } from "@opencode-ai/sdk"
 import { DateTime } from "luxon"
 import {
  createSignal,
-  onMount,
  For,
  Match,
  splitProps,
@@ -21,6 +19,10 @@ import { Markdown } from "./markdown"
 import { Code } from "./code"
 import { createElementSize } from "@solid-primitives/resize-observer"
 import { createScrollPosition } from "@solid-primitives/scroll"
+import { ProgressCircle } from "./progress-circle"
+import { pipe, sumBy } from "remeda"
+import { useSync } from "@/context/sync"
+import { useLocal } from "@/context/local"

 function Part(props: ParentProps & ComponentProps<"div">) {
  const [local, others] = splitProps(props, ["class", "classList", "children"])
@@ -33,7 +35,7 @@ function Part(props: ParentProps & ComponentProps<"div">) {
      }}
      {...others}
    >
-      <p class="text-xs leading-4 text-left text-text-muted/60 font-medium">{local.children}</p>
+      <p class="text-12-medium text-left">{local.children}</p>
    </div>
  )
 }
@@ -45,8 +47,8 @@ function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps
        <Part>{props.title}</Part>
      </Collapsible.Trigger>
      <Collapsible.Content>
-        <p class="flex-auto py-1 text-xs min-w-0 text-pretty">
-          <span class="text-text-muted/60 break-words">{props.children}</span>
+        <p class="flex-auto min-w-0 text-pretty">
+          <span class="text-12-medium text-text-weak break-words">{props.children}</span>
        </p>
      </Collapsible.Content>
    </Collapsible>
@@ -65,8 +67,8 @@ function ReadToolPart(props: { part: ToolPart }) {
        {(state) => {
          const path = state().input["filePath"] as string
          return (
-            <Part class="cursor-pointer" onClick={() => local.file.open(path)}>
-              <span class="text-text-muted">Read</span> {getFilename(path)}
+            <Part onClick={() => local.file.open(path)}>
+              <span class="">Read</span> {getFilename(path)}
            </Part>
          )
        }}
@@ -75,9 +77,9 @@ function ReadToolPart(props: { part: ToolPart }) {
        {(state) => (
          <div>
            <Part>
-              <span class="text-text-muted">Read</span> {getFilename(state().input["filePath"] as string)}
+              <span class="">Read</span> {getFilename(state().input["filePath"] as string)}
            </Part>
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
          </div>
        )}
      </Match>
@@ -95,10 +97,9 @@ function EditToolPart(props: { part: ToolPart }) {
      <Match when={props.part.state.status === "completed" && props.part.state}>
        {(state) => (
          <CollapsiblePart
-            defaultOpen
            title={
              <>
-                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
              </>
            }
          >
@@ -111,11 +112,11 @@ function EditToolPart(props: { part: ToolPart }) {
          <CollapsiblePart
            title={
              <>
-                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
              </>
            }
          >
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
          </CollapsiblePart>
        )}
      </Match>
@@ -135,7 +136,7 @@ function WriteToolPart(props: { part: ToolPart }) {
          <CollapsiblePart
            title={
              <>
-                <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+                <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
              </>
            }
          >
@@ -147,9 +148,9 @@ function WriteToolPart(props: { part: ToolPart }) {
        {(state) => (
          <div>
            <Part>
-              <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+              <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
            </Part>
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
          </div>
        )}
      </Match>
@@ -170,7 +171,7 @@ function BashToolPart(props: { part: ToolPart }) {
            defaultOpen
            title={
              <>
-                <span class="text-text-muted">Run command:</span> {state().input["command"]}
+                <span class="">Run command:</span> {state().input["command"]}
              </>
            }
          >
@@ -183,11 +184,11 @@ function BashToolPart(props: { part: ToolPart }) {
          <CollapsiblePart
            title={
              <>
-                <span class="text-text-muted">Shell</span> {state().input["command"]}
+                <span class="">Shell</span> {state().input["command"]}
              </>
            }
          >
-            <div class="text-error">{sync.sanitize(state().error)}</div>
+            <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
          </CollapsiblePart>
        )}
      </Match>
@@ -210,7 +211,7 @@ function ToolPart(props: { part: ToolPart }) {
  // patch
  // task
  return (
-    <div class="min-w-0 flex-auto text-xs">
+    <div class="min-w-0 flex-auto text-12-medium">
      <Switch
        fallback={
          <span>
@@ -243,9 +244,43 @@ export default function SessionTimeline(props: { session: string; class?: string
  const size = createElementSize(root)
  const scroll = createScrollPosition(scrollElement)

-  onMount(() => sync.session.sync(props.session))
+  const valid = (part: Part) => {
+    if (!part) return false
+    switch (part.type) {
+      case "step-start":
+      case "step-finish":
+      case "file":
+      case "patch":
+        return false
+      case "text":
+        return !part.synthetic && part.text.trim()
+      case "reasoning":
+        return part.text.trim()
+      case "tool":
+        switch (part.tool) {
+          case "todoread":
+          case "todowrite":
+          case "list":
+          case "grep":
+            return false
+        }
+        return true
+      default:
+        return true
+    }
+  }
+
+  const hasValidParts = (message: Message) => {
+    return sync.data.part[message.id]?.filter(valid).length > 0
+  }
+
+  const hasTextPart = (message: Message) => {
+    return !!sync.data.part[message.id]?.filter(valid).find((p) => p.type === "text")
+  }
+
  const session = createMemo(() => sync.session.get(props.session))
  const messages = createMemo(() => sync.data.message[props.session] ?? [])
+  const messagesWithValidParts = createMemo(() => sync.data.message[props.session]?.filter(hasValidParts) ?? [])
  const working = createMemo(() => {
    const last = messages()[messages().length - 1]
    if (!last) return false
@@ -253,6 +288,45 @@ export default function SessionTimeline(props: { session: string; class?: string
    return !last.time.completed
  })

+  const cost = createMemo(() => {
+    const total = pipe(
+      messages(),
+      sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
+    )
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(total)
+  })
+
+  const last = createMemo(() => {
+    return messages().findLast((x) => x.role === "assistant") as AssistantMessage
+  })
+
+  const model = createMemo(() => {
+    if (!last()) return
+    const model = sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID]
+    return model
+  })
+
+  const tokens = createMemo(() => {
+    if (!last()) return
+    const tokens = last().tokens
+    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+    return new Intl.NumberFormat("en-US", {
+      notation: "compact",
+      compactDisplay: "short",
+    }).format(total)
+  })
+
+  const context = createMemo(() => {
+    if (!last()) return
+    if (!model()?.limit.context) return 0
+    const tokens = last().tokens
+    const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
+    return Math.round((total / model()!.limit.context) * 100)
+  })
+
  const getScrollParent = (el: HTMLElement | null): HTMLElement | undefined => {
    let p = el?.parentElement
    while (p && p !== document.body) {
@@ -294,23 +368,6 @@ export default function SessionTimeline(props: { session: string; class?: string
    lastScrollY = scroll.y
  })

-  const valid = (part: Part) => {
-    if (!part) return false
-    switch (part.type) {
-      case "step-start":
-      case "step-finish":
-      case "file":
-      case "patch":
-        return false
-      case "text":
-        return !part.synthetic
-      case "reasoning":
-        return part.text.trim()
-      default:
-        return true
-    }
-  }
-
  const duration = (part: Part) => {
    switch (part.type) {
      default:
@@ -330,61 +387,80 @@ export default function SessionTimeline(props: { session: string; class?: string
    }
  }

+  createEffect(() => {
+    console.log("WHAT")
+    console.log(JSON.stringify(messagesWithValidParts()))
+  })
+
  return (
    <div
      ref={setRoot}
      classList={{
-        "p-4 select-text flex flex-col gap-y-1": true,
+        "select-text flex flex-col text-text-weak": true,
        [props.class ?? ""]: !!props.class,
      }}
    >
-      <ul role="list" class="flex flex-col gap-1">
-        <For each={messages()}>
+      <div class="flex justify-end items-center self-stretch">
+        <div class="flex items-center gap-6">
+          <Tooltip value={`${tokens()} Tokens`} class="flex items-center gap-1.5">
+            <Show when={context()}>
+              <ProgressCircle percentage={context()!} />
+            </Show>
+            <div class="text-14-regular text-text-weak text-right">{context()}%</div>
+          </Tooltip>
+          <div class="text-14-regular text-text-strong text-right">{cost()}</div>
+        </div>
+      </div>
+      <ul role="list" class="flex flex-col items-start self-stretch">
+        <For each={messagesWithValidParts()}>
          {(message) => (
-            <For each={sync.data.part[message.id]?.filter(valid)}>
-              {(part) => (
-                <li class="group/li">
-                  <Switch fallback={<div class="flex-auto min-w-0 text-xs mt-1 text-left">{part.type}</div>}>
-                    <Match when={part.type === "text" && part}>
-                      {(part) => (
-                        <Switch>
-                          <Match when={message.role === "user"}>
-                            <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0 mt-5 group-first/li:mt-0">
-                              <p class="w-full rounded-md p-3 ring-1 ring-text/15 ring-inset text-xs bg-background-panel">
-                                <span class="font-medium text-text whitespace-pre-wrap break-words">{part().text}</span>
-                              </p>
-                              <p class="text-xs text-text-muted">
-                                {DateTime.fromMillis(message.time.created).toRelative()} ·{" "}
-                                {sync.data.config.username ?? "user"}
-                              </p>
-                            </div>
-                          </Match>
-                          <Match when={message.role === "assistant"}>
-                            <Markdown text={sync.sanitize(part().text)} class="text-text mt-1" />
-                          </Match>
-                        </Switch>
-                      )}
-                    </Match>
-                    <Match when={part.type === "reasoning" && part}>
-                      {(part) => (
-                        <CollapsiblePart
-                          title={
-                            <Switch fallback={<span class="text-text-muted">Thinking</span>}>
-                              <Match when={part().time.end}>
-                                <span class="text-text-muted">Thought</span> for {duration(part())}s
-                              </Match>
-                            </Switch>
-                          }
-                        >
-                          <Markdown text={part().text} />
-                        </CollapsiblePart>
-                      )}
-                    </Match>
-                    <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
-                  </Switch>
-                </li>
-              )}
-            </For>
+            <div
+              classList={{
+                "flex flex-col gap-1 justify-center items-start self-stretch": true,
+                "mt-6": hasTextPart(message),
+              }}
+            >
+              <For each={sync.data.part[message.id]?.filter(valid) ?? []}>
+                {(part) => (
+                  <li class="group/li">
+                    <Switch fallback={<div class="">{part.type}</div>}>
+                      <Match when={part.type === "text" && part}>
+                        {(part) => (
+                          <Switch>
+                            <Match when={message.role === "user"}>
+                              <div class="w-fit flex items-center px-3 py-1 rounded-md bg-surface-weak">
+                                <span class="text-14-regular text-text-strong whitespace-pre-wrap break-words">
+                                  {part().text}
+                                </span>
+                              </div>
+                            </Match>
+                            <Match when={message.role === "assistant"}>
+                              <Markdown text={sync.sanitize(part().text)} />
+                            </Match>
+                          </Switch>
+                        )}
+                      </Match>
+                      <Match when={part.type === "reasoning" && part}>
+                        {(part) => (
+                          <CollapsiblePart
+                            title={
+                              <Switch fallback={<span class="text-text-weak">Thinking</span>}>
+                                <Match when={part().time.end}>
+                                  <span class="text-12-medium text-text-weak">Thought</span> for {duration(part())}s
+                                </Match>
+                              </Switch>
+                            }
+                          >
+                            <Markdown text={part().text} />
+                          </CollapsiblePart>
+                        )}
+                      </Match>
+                      <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
+                    </Switch>
+                  </li>
+                )}
+              </For>
+            </div>
          )}
        </For>
      </ul>
@@ -392,9 +468,9 @@ export default function SessionTimeline(props: { session: string; class?: string
        <Collapsible defaultOpen={false}>
          <Collapsible.Trigger>
            <div class="mt-12 ml-1 flex items-center gap-x-2 text-xs text-text-muted">
-              <Icon name="file-code" size={16} />
+              <Icon name="file-code" />
              <span>Raw Session Data</span>
-              <Collapsible.Arrow size={18} class="text-text-muted" />
+              <Collapsible.Arrow class="text-text-muted" />
            </div>
          </Collapsible.Trigger>
          <Collapsible.Content class="mt-5">
@@ -403,9 +479,9 @@ export default function SessionTimeline(props: { session: string; class?: string
                <Collapsible>
                  <Collapsible.Trigger>
                    <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                      <Icon name="file-code" size={16} />
+                      <Icon name="file-code" />
                      <span>session</span>
-                      <Collapsible.Arrow size={18} class="text-text-muted" />
+                      <Collapsible.Arrow class="text-text-muted" />
                    </div>
                  </Collapsible.Trigger>
                  <Collapsible.Content>
@@ -420,9 +496,9 @@ export default function SessionTimeline(props: { session: string; class?: string
                      <Collapsible>
                        <Collapsible.Trigger>
                          <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                            <Icon name="file-code" size={16} />
+                            <Icon name="file-code" />
                            <span>{message.role === "user" ? "user" : "assistant"}</span>
-                            <Collapsible.Arrow size={18} class="text-text-muted" />
+                            <Collapsible.Arrow class="text-text-muted" />
                          </div>
                        </Collapsible.Trigger>
                        <Collapsible.Content>
@@ -436,9 +512,9 @@ export default function SessionTimeline(props: { session: string; class?: string
                          <Collapsible>
                            <Collapsible.Trigger>
                              <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
-                                <Icon name="file-code" size={16} />
+                                <Icon name="file-code" />
                                <span>{part.type}</span>
-                                <Collapsible.Arrow size={18} class="text-text-muted" />
+                                <Collapsible.Arrow class="text-text-muted" />
                              </div>
                            </Collapsible.Trigger>
                            <Collapsible.Content>
@@ -0,0 +1,558 @@
+{
+  "colors": {
+    "actionBar.toggledBackground": "var(--surface-raised-base)",
+    "activityBarBadge.background": "var(--surface-brand-base)",
+    "checkbox.border": "var(--border-base)",
+    "editor.background": "transparent",
+    "editor.foreground": "var(--text-base)",
+    "editor.inactiveSelectionBackground": "var(--surface-raised-base)",
+    "editor.selectionHighlightBackground": "var(--border-active)",
+    "editorIndentGuide.activeBackground1": "var(--border-weak-base)",
+    "editorIndentGuide.background1": "var(--border-weak-base)",
+    "input.placeholderForeground": "var(--text-weak)",
+    "list.activeSelectionIconForeground": "var(--text-base)",
+    "list.dropBackground": "var(--surface-raised-base)",
+    "menu.background": "var(--surface-base)",
+    "menu.border": "var(--border-base)",
+    "menu.foreground": "var(--text-base)",
+    "menu.selectionBackground": "var(--surface-interactive-base)",
+    "menu.separatorBackground": "var(--border-base)",
+    "ports.iconRunningProcessForeground": "var(--icon-success-base)",
+    "sideBarSectionHeader.background": "transparent",
+    "sideBarSectionHeader.border": "var(--border-weak-base)",
+    "sideBarTitle.foreground": "var(--text-weak)",
+    "statusBarItem.remoteBackground": "var(--surface-success-base)",
+    "statusBarItem.remoteForeground": "var(--text-base)",
+    "tab.lastPinnedBorder": "var(--border-weak-base)",
+    "tab.selectedBackground": "var(--surface-raised-base)",
+    "tab.selectedForeground": "var(--text-weak)",
+    "terminal.inactiveSelectionBackground": "var(--surface-raised-base)",
+    "widget.border": "var(--border-base)"
+  },
+  "displayName": "opencode",
+  "name": "opencode",
+  "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "customLiteral": "var(--syntax-function)",
+    "newOperator": "var(--syntax-operator)",
+    "numberLiteral": "var(--syntax-number)",
+    "stringLiteral": "var(--syntax-string)"
+  },
+  "tokenColors": [
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "var(--text-base)"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "strong",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "header",
+      "settings": {
+        "foreground": "var(--markdown-heading)"
+      }
+    },
+    {
+      "scope": "comment",
+      "settings": {
+        "foreground": "var(--syntax-comment)"
+      }
+    },
+    {
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "variable.other.enummember",
+        "keyword.operator.plus.exponent",
+        "keyword.operator.minus.exponent"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-number)"
+      }
+    },
+    {
+      "scope": "constant.regexp",
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": ["entity.name.tag.css", "entity.name.tag.less"],
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": "invalid",
+      "settings": {
+        "foreground": "var(--syntax-critical)"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "var(--markdown-strong)"
+      }
+    },
+    {
+      "scope": "markup.heading",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "var(--theme-markdown-heading)"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "var(--text-diff-add-base)"
+      }
+    },
+    {
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "var(--text-diff-delete-base)"
+      }
+    },
+    {
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "var(--text-base)"
+      }
+    },
+    {
+      "scope": "punctuation.definition.quote.begin.markdown",
+      "settings": {
+        "foreground": "var(--markdown-block-quote)"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "var(--markdown-list-enumeration)"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "var(--markdown-code)"
+      }
+    },
+    {
+      "scope": "punctuation.definition.tag",
+      "settings": {
+        "foreground": "var(--syntax-punctuation)"
+      }
+    },
+    {
+      "scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.string",
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.numeric",
+      "settings": {
+        "foreground": "var(--syntax-number)"
+      }
+    },
+    {
+      "scope": "meta.structure.dictionary.key.python",
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "var(--text-weak)"
+      }
+    },
+    {
+      "scope": "storage",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": ["storage.modifier", "keyword.operator.noexcept"],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": ["string", "meta.embedded.assembly"],
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": "string.tag",
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": "string.value",
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "var(--text-base)"
+      }
+    },
+    {
+      "scope": [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.alignof",
+        "keyword.operator.typeid",
+        "keyword.operator.alignas",
+        "keyword.operator.instanceof",
+        "keyword.operator.logical.python",
+        "keyword.operator.wordlike"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "var(--syntax-number)"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "support.function.git-rebase",
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": "constant.sha.git-rebase",
+      "settings": {
+        "foreground": "var(--syntax-number)"
+      }
+    },
+    {
+      "scope": ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
+      "settings": {
+        "foreground": "var(--text-base)"
+      }
+    },
+    {
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member",
+        "entity.name.operator.custom-literal"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-function)"
+      }
+    },
+    {
+      "scope": [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.other.attribute",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.numeric.go",
+        "storage.type.byte.go",
+        "storage.type.boolean.go",
+        "storage.type.string.go",
+        "storage.type.uintptr.go",
+        "storage.type.error.go",
+        "storage.type.rune.go",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-type)"
+      }
+    },
+    {
+      "scope": [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-type)"
+      }
+    },
+    {
+      "scope": [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator",
+        "entity.name.operator"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": [
+        "variable",
+        "meta.definition.variable.name",
+        "support.variable",
+        "entity.name.variable",
+        "constant.other.placeholder"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": ["variable.other.constant", "variable.other.enummember"],
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "var(--syntax-variable)"
+      }
+    },
+    {
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.group.regexp",
+        "punctuation.definition.group.assertion.regexp",
+        "punctuation.definition.character-class.regexp",
+        "punctuation.character.set.begin.regexp",
+        "punctuation.character.set.end.regexp",
+        "keyword.operator.negation.regexp",
+        "support.other.parenthesis.regexp"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-string)"
+      }
+    },
+    {
+      "scope": [
+        "constant.character.character-class.regexp",
+        "constant.other.character-class.set.regexp",
+        "constant.other.character-class.regexp",
+        "constant.character.set.regexp"
+      ],
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": "keyword.operator.quantifier.regexp",
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": ["constant.character", "constant.other.option"],
+      "settings": {
+        "foreground": "var(--syntax-keyword)"
+      }
+    },
+    {
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "var(--syntax-operator)"
+      }
+    },
+    {
+      "scope": "entity.name.label",
+      "settings": {
+        "foreground": "var(--text-weak)"
+      }
+    }
+  ],
+  "type": "dark"
+}
@@ -1,34 +0,0 @@
-import { createContext, useContext, type ParentProps } from "solid-js"
-import { createEventBus } from "@solid-primitives/event-bus"
-import type { Event as SDKEvent } from "@opencode-ai/sdk"
-import { useSDK } from "@/context"
-
-export type Event = SDKEvent // can extend with custom events later
-
-function init() {
-  const sdk = useSDK()
-  const bus = createEventBus<Event>()
-  sdk.event.subscribe().then(async (events) => {
-    for await (const event of events.stream) {
-      bus.emit(event)
-    }
-  })
-  return bus
-}
-
-type EventContext = ReturnType<typeof init>
-
-const ctx = createContext<EventContext>()
-
-export function EventProvider(props: ParentProps) {
-  const value = init()
-  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
-}
-
-export function useEvent() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useEvent must be used within a EventProvider")
-  }
-  return value
-}
@@ -0,0 +1,25 @@
+import { createContext, Show, useContext, type ParentProps } from "solid-js"
+
+export function createSimpleContext<T, Props extends Record<string, any>>(input: {
+  name: string
+  init: ((input: Props) => T) | (() => T)
+}) {
+  const ctx = createContext<T>()
+
+  return {
+    provider: (props: ParentProps<Props>) => {
+      const init = input.init(props)
+      return (
+        // @ts-expect-error
+        <Show when={init.ready === undefined || init.ready === true}>
+          <ctx.Provider value={init}>{props.children}</ctx.Provider>
+        </Show>
+      )
+    },
+    use() {
+      const value = useContext(ctx)
+      if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+      return value
+    },
+  }
+}
@@ -1,6 +0,0 @@
-export { EventProvider, useEvent } from "./event"
-export { LocalProvider, useLocal } from "./local"
-export { MarkedProvider, useMarked } from "./marked"
-export { SDKProvider, useSDK } from "./sdk"
-export { ShikiProvider, useShiki } from "./shiki"
-export { SyncProvider, useSync } from "./sync"
@@ -1,43 +1,30 @@
-import { createContext, useContext, type ParentProps } from "solid-js"
-import { useShiki } from "@/context"
 import { marked } from "marked"
 import markedShiki from "marked-shiki"
 import { bundledLanguages, type BundledLanguage } from "shiki"

-function init(highlighter: ReturnType<typeof useShiki>) {
-  return marked.use(
-    markedShiki({
-      async highlight(code, lang) {
-        if (!(lang in bundledLanguages)) {
-          lang = "text"
-        }
-        if (!highlighter.getLoadedLanguages().includes(lang)) {
-          await highlighter.loadLanguage(lang as BundledLanguage)
-        }
-        return highlighter.codeToHtml(code, {
-          lang: lang || "text",
-          theme: "opencode",
-          tabindex: false,
-        })
-      },
-    }),
-  )
-}
+import { createSimpleContext } from "./helper"
+import { useShiki } from "./shiki"

-type MarkedContext = ReturnType<typeof init>
-
-const ctx = createContext<MarkedContext>()
-
-export function MarkedProvider(props: ParentProps) {
-  const highlighter = useShiki()
-  const value = init(highlighter)
-  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
-}
-
-export function useMarked() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useMarked must be used within a MarkedProvider")
-  }
-  return value
-}
+export const { use: useMarked, provider: MarkedProvider } = createSimpleContext({
+  name: "Marked",
+  init: () => {
+    const highlighter = useShiki()
+    return marked.use(
+      markedShiki({
+        async highlight(code, lang) {
+          if (!(lang in bundledLanguages)) {
+            lang = "text"
+          }
+          if (!highlighter.getLoadedLanguages().includes(lang)) {
+            await highlighter.loadLanguage(lang as BundledLanguage)
+          }
+          return highlighter.codeToHtml(code, {
+            lang: lang || "text",
+            theme: "opencode",
+            tabindex: false,
+          })
+        },
+      }),
+    )
+  },
+})
@@ -1,29 +1,37 @@
-import { createContext, useContext, type ParentProps } from "solid-js"
-import { createOpencodeClient } from "@opencode-ai/sdk/client"
+import { createOpencodeClient, type Event } from "@opencode-ai/sdk/client"
+import { createSimpleContext } from "./helper"
+import { createGlobalEmitter } from "@solid-primitives/event-bus"
+import { onCleanup } from "solid-js"

-const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
-const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
+export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
+  name: "SDK",
+  init: (props: { url: string }) => {
+    const abort = new AbortController()
+    const sdk = createOpencodeClient({
+      baseUrl: props.url,
+      signal: abort.signal,
+      fetch: (req) => {
+        // @ts-ignore
+        req.timeout = false
+        return fetch(req)
+      },
+    })

-function init() {
-  const client = createOpencodeClient({
-    baseUrl: `http://${host}:${port}`,
-  })
-  return client
-}
+    const emitter = createGlobalEmitter<{
+      [key in Event["type"]]: Extract<Event, { type: key }>
+    }>()

-type SDKContext = ReturnType<typeof init>
+    sdk.event.subscribe().then(async (events) => {
+      for await (const event of events.stream) {
+        console.log("event", event.type)
+        emitter.emit(event.type, event)
+      }
+    })

-const ctx = createContext<SDKContext>()
+    onCleanup(() => {
+      abort.abort()
+    })

-export function SDKProvider(props: ParentProps) {
-  const value = init()
-  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
-}
-
-export function useSDK() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useSDK must be used within a SDKProvider")
-  }
-  return value
-}
+    return { client: sdk, event: emitter }
+  },
+})
@@ -1,45 +1,45 @@
+import { createSimpleContext } from "./helper"
 import { createHighlighter, type ThemeInput } from "shiki"
-import { createContext, useContext, type ParentProps } from "solid-js"

 const theme: ThemeInput = {
  colors: {
-    "actionBar.toggledBackground": "var(--theme-background-element)",
-    "activityBarBadge.background": "var(--theme-accent)",
-    "checkbox.border": "var(--theme-border)",
+    "actionBar.toggledBackground": "var(--surface-raised-base)",
+    "activityBarBadge.background": "var(--surface-brand-base)",
+    "checkbox.border": "var(--border-base)",
    "editor.background": "transparent",
-    "editor.foreground": "var(--theme-text)",
-    "editor.inactiveSelectionBackground": "var(--theme-background-element)",
-    "editor.selectionHighlightBackground": "var(--theme-border-active)",
-    "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)",
-    "editorIndentGuide.background1": "var(--theme-border-subtle)",
-    "input.placeholderForeground": "var(--theme-text-muted)",
-    "list.activeSelectionIconForeground": "var(--theme-text)",
-    "list.dropBackground": "var(--theme-background-element)",
-    "menu.background": "var(--theme-background-panel)",
-    "menu.border": "var(--theme-border)",
-    "menu.foreground": "var(--theme-text)",
-    "menu.selectionBackground": "var(--theme-primary)",
-    "menu.separatorBackground": "var(--theme-border)",
-    "ports.iconRunningProcessForeground": "var(--theme-success)",
+    "editor.foreground": "var(--text-base)",
+    "editor.inactiveSelectionBackground": "var(--surface-raised-base)",
+    "editor.selectionHighlightBackground": "var(--border-active)",
+    "editorIndentGuide.activeBackground1": "var(--border-weak-base)",
+    "editorIndentGuide.background1": "var(--border-weak-base)",
+    "input.placeholderForeground": "var(--text-weak)",
+    "list.activeSelectionIconForeground": "var(--text-base)",
+    "list.dropBackground": "var(--surface-raised-base)",
+    "menu.background": "var(--surface-base)",
+    "menu.border": "var(--border-base)",
+    "menu.foreground": "var(--text-base)",
+    "menu.selectionBackground": "var(--surface-interactive-base)",
+    "menu.separatorBackground": "var(--border-base)",
+    "ports.iconRunningProcessForeground": "var(--icon-success-base)",
    "sideBarSectionHeader.background": "transparent",
-    "sideBarSectionHeader.border": "var(--theme-border-subtle)",
-    "sideBarTitle.foreground": "var(--theme-text-muted)",
-    "statusBarItem.remoteBackground": "var(--theme-success)",
-    "statusBarItem.remoteForeground": "var(--theme-text)",
-    "tab.lastPinnedBorder": "var(--theme-border-subtle)",
-    "tab.selectedBackground": "var(--theme-background-element)",
-    "tab.selectedForeground": "var(--theme-text-muted)",
-    "terminal.inactiveSelectionBackground": "var(--theme-background-element)",
-    "widget.border": "var(--theme-border)",
+    "sideBarSectionHeader.border": "var(--border-weak-base)",
+    "sideBarTitle.foreground": "var(--text-weak)",
+    "statusBarItem.remoteBackground": "var(--surface-success-base)",
+    "statusBarItem.remoteForeground": "var(--text-base)",
+    "tab.lastPinnedBorder": "var(--border-weak-base)",
+    "tab.selectedBackground": "var(--surface-raised-base)",
+    "tab.selectedForeground": "var(--text-weak)",
+    "terminal.inactiveSelectionBackground": "var(--surface-raised-base)",
+    "widget.border": "var(--border-base)",
  },
  displayName: "opencode",
  name: "opencode",
  semanticHighlighting: true,
  semanticTokenColors: {
-    customLiteral: "var(--theme-syntax-function)",
-    newOperator: "var(--theme-syntax-operator)",
-    numberLiteral: "var(--theme-syntax-number)",
-    stringLiteral: "var(--theme-syntax-string)",
+    customLiteral: "var(--syntax-function)",
+    newOperator: "var(--syntax-operator)",
+    numberLiteral: "var(--syntax-number)",
+    stringLiteral: "var(--syntax-string)",
  },
  tokenColors: [
    {
@@ -50,7 +50,7 @@ const theme: ThemeInput = {
        "variable.legacy.builtin.python",
      ],
      settings: {
-        foreground: "var(--theme-text)",
+        foreground: "var(--text-base)",
      },
    },
    {
@@ -68,19 +68,19 @@ const theme: ThemeInput = {
    {
      scope: "header",
      settings: {
-        foreground: "var(--theme-markdown-heading)",
+        foreground: "var(--markdown-heading)",
      },
    },
    {
      scope: "comment",
      settings: {
-        foreground: "var(--theme-syntax-comment)",
+        foreground: "var(--syntax-comment)",
      },
    },
    {
      scope: "constant.language",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
@@ -91,31 +91,31 @@ const theme: ThemeInput = {
        "keyword.operator.minus.exponent",
      ],
      settings: {
-        foreground: "var(--theme-syntax-number)",
+        foreground: "var(--syntax-number)",
      },
    },
    {
      scope: "constant.regexp",
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: "entity.name.tag",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: ["entity.name.tag.css", "entity.name.tag.less"],
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: "entity.other.attribute-name",
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
@@ -131,13 +131,13 @@ const theme: ThemeInput = {
        "entity.other.attribute-name.scss",
      ],
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: "invalid",
      settings: {
-        foreground: "var(--theme-error)",
+        foreground: "var(--syntax-critical)",
      },
    },
    {
@@ -150,7 +150,7 @@ const theme: ThemeInput = {
      scope: "markup.bold",
      settings: {
        fontStyle: "bold",
-        foreground: "var(--theme-markdown-strong)",
+        foreground: "var(--markdown-strong)",
      },
    },
    {
@@ -175,115 +175,115 @@ const theme: ThemeInput = {
    {
      scope: "markup.inserted",
      settings: {
-        foreground: "var(--theme-diff-added)",
+        foreground: "var(--text-diff-add-base)",
      },
    },
    {
      scope: "markup.deleted",
      settings: {
-        foreground: "var(--theme-diff-removed)",
+        foreground: "var(--text-diff-delete-base)",
      },
    },
    {
      scope: "markup.changed",
      settings: {
-        foreground: "var(--theme-diff-context)",
+        foreground: "var(--text-base)",
      },
    },
    {
      scope: "punctuation.definition.quote.begin.markdown",
      settings: {
-        foreground: "var(--theme-markdown-block-quote)",
+        foreground: "var(--markdown-block-quote)",
      },
    },
    {
      scope: "punctuation.definition.list.begin.markdown",
      settings: {
-        foreground: "var(--theme-markdown-list-enumeration)",
+        foreground: "var(--markdown-list-enumeration)",
      },
    },
    {
      scope: "markup.inline.raw",
      settings: {
-        foreground: "var(--theme-markdown-code)",
+        foreground: "var(--markdown-code)",
      },
    },
    {
      scope: "punctuation.definition.tag",
      settings: {
-        foreground: "var(--theme-syntax-punctuation)",
+        foreground: "var(--syntax-punctuation)",
      },
    },
    {
      scope: ["meta.preprocessor", "entity.name.function.preprocessor"],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "meta.preprocessor.string",
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
      scope: "meta.preprocessor.numeric",
      settings: {
-        foreground: "var(--theme-syntax-number)",
+        foreground: "var(--syntax-number)",
      },
    },
    {
      scope: "meta.structure.dictionary.key.python",
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
      scope: "meta.diff.header",
      settings: {
-        foreground: "var(--theme-diff-hunk-header)",
+        foreground: "var(--text-weak)",
      },
    },
    {
      scope: "storage",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "storage.type",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: ["storage.modifier", "keyword.operator.noexcept"],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: ["string", "meta.embedded.assembly"],
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
      scope: "string.tag",
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
      scope: "string.value",
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
      scope: "string.regexp",
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
@@ -293,13 +293,13 @@ const theme: ThemeInput = {
        "punctuation.section.embedded",
      ],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: ["meta.template.expression"],
      settings: {
-        foreground: "var(--theme-text)",
+        foreground: "var(--text-base)",
      },
    },
    {
@@ -310,25 +310,25 @@ const theme: ThemeInput = {
        "source.coffee.embedded",
      ],
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
      scope: "keyword",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "keyword.control",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "keyword.operator",
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
@@ -345,43 +345,43 @@ const theme: ThemeInput = {
        "keyword.operator.wordlike",
      ],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "keyword.other.unit",
      settings: {
-        foreground: "var(--theme-syntax-number)",
+        foreground: "var(--syntax-number)",
      },
    },
    {
      scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "support.function.git-rebase",
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
      scope: "constant.sha.git-rebase",
      settings: {
-        foreground: "var(--theme-syntax-number)",
+        foreground: "var(--syntax-number)",
      },
    },
    {
      scope: ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
      settings: {
-        foreground: "var(--theme-text)",
+        foreground: "var(--text-base)",
      },
    },
    {
      scope: "variable.language",
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
@@ -393,7 +393,7 @@ const theme: ThemeInput = {
        "entity.name.operator.custom-literal",
      ],
      settings: {
-        foreground: "var(--theme-syntax-function)",
+        foreground: "var(--syntax-function)",
      },
    },
    {
@@ -432,7 +432,7 @@ const theme: ThemeInput = {
        "storage.type.primitive.groovy",
      ],
      settings: {
-        foreground: "var(--theme-syntax-type)",
+        foreground: "var(--syntax-type)",
      },
    },
    {
@@ -446,7 +446,7 @@ const theme: ThemeInput = {
        "punctuation.separator.namespace.ruby",
      ],
      settings: {
-        foreground: "var(--theme-syntax-type)",
+        foreground: "var(--syntax-type)",
      },
    },
    {
@@ -460,7 +460,7 @@ const theme: ThemeInput = {
        "entity.name.operator",
      ],
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
@@ -472,19 +472,19 @@ const theme: ThemeInput = {
        "constant.other.placeholder",
      ],
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
      scope: ["variable.other.constant", "variable.other.enummember"],
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
      scope: ["meta.object-literal.key"],
      settings: {
-        foreground: "var(--theme-syntax-variable)",
+        foreground: "var(--syntax-variable)",
      },
    },
    {
@@ -498,7 +498,7 @@ const theme: ThemeInput = {
        "support.constant.color",
      ],
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
@@ -512,7 +512,7 @@ const theme: ThemeInput = {
        "support.other.parenthesis.regexp",
      ],
      settings: {
-        foreground: "var(--theme-syntax-string)",
+        foreground: "var(--syntax-string)",
      },
    },
    {
@@ -523,37 +523,37 @@ const theme: ThemeInput = {
        "constant.character.set.regexp",
      ],
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: "keyword.operator.quantifier.regexp",
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: ["constant.character", "constant.other.option"],
      settings: {
-        foreground: "var(--theme-syntax-keyword)",
+        foreground: "var(--syntax-keyword)",
      },
    },
    {
      scope: "constant.character.escape",
      settings: {
-        foreground: "var(--theme-syntax-operator)",
+        foreground: "var(--syntax-operator)",
      },
    },
    {
      scope: "entity.name.label",
      settings: {
-        foreground: "var(--theme-text-muted)",
+        foreground: "var(--text-weak)",
      },
    },
  ],
@@ -565,18 +565,9 @@ const highlighter = await createHighlighter({
  langs: [],
 })

-type ShikiContext = typeof highlighter
-
-const ctx = createContext<ShikiContext>()
-
-export function ShikiProvider(props: ParentProps) {
-  return <ctx.Provider value={highlighter}>{props.children}</ctx.Provider>
-}
-
-export function useShiki() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useShiki must be used within a ShikiProvider")
-  }
-  return value
-}
+export const { use: useShiki, provider: ShikiProvider } = createSimpleContext({
+  name: "Shiki",
+  init: () => {
+    return highlighter
+  },
+})
@@ -1,174 +1,169 @@
-import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode } from "@opencode-ai/sdk"
+import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode, Project } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
-import { createContext, createMemo, Show, useContext, type ParentProps } from "solid-js"
-import { useSDK, useEvent } from "@/context"
+import { createMemo } from "solid-js"
 import { Binary } from "@/utils/binary"
+import { createSimpleContext } from "./helper"
+import { useSDK } from "./sdk"

-function init() {
-  const [store, setStore] = createStore<{
-    ready: boolean
-    provider: Provider[]
-    agent: Agent[]
-    config: Config
-    path: Path
-    session: Session[]
-    message: {
-      [sessionID: string]: Message[]
-    }
-    part: {
-      [messageID: string]: Part[]
-    }
-    node: FileNode[]
-    changes: File[]
-  }>({
-    config: {},
-    path: { state: "", config: "", worktree: "", directory: "" },
-    ready: false,
-    agent: [],
-    provider: [],
-    session: [],
-    message: {},
-    part: {},
-    node: [],
-    changes: [],
-  })
-
-  const bus = useEvent()
-  bus.listen((event) => {
-    switch (event.type) {
-      case "session.updated": {
-        const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
-        if (result.found) {
-          setStore("session", result.index, reconcile(event.properties.info))
-          break
-        }
-        setStore(
-          "session",
-          produce((draft) => {
-            draft.splice(result.index, 0, event.properties.info)
-          }),
-        )
-        break
+export const { use: useSync, provider: SyncProvider } = createSimpleContext({
+  name: "Sync",
+  init: () => {
+    const [store, setStore] = createStore<{
+      ready: boolean
+      provider: Provider[]
+      agent: Agent[]
+      project: Project
+      config: Config
+      path: Path
+      session: Session[]
+      message: {
+        [sessionID: string]: Message[]
      }
-      case "message.updated": {
-        const messages = store.message[event.properties.info.sessionID]
-        if (!messages) {
-          setStore("message", event.properties.info.sessionID, [event.properties.info])
-          break
-        }
-        const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
-        if (result.found) {
-          setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
-          break
-        }
-        setStore(
-          "message",
-          event.properties.info.sessionID,
-          produce((draft) => {
-            draft.splice(result.index, 0, event.properties.info)
-          }),
-        )
-        break
+      part: {
+        [messageID: string]: Part[]
      }
-      case "message.part.updated": {
-        const parts = store.part[event.properties.part.messageID]
-        if (!parts) {
-          setStore("part", event.properties.part.messageID, [event.properties.part])
+      node: FileNode[]
+      changes: File[]
+    }>({
+      project: { id: "", worktree: "", time: { created: 0, initialized: 0 } },
+      config: {},
+      path: { state: "", config: "", worktree: "", directory: "" },
+      ready: false,
+      agent: [],
+      provider: [],
+      session: [],
+      message: {},
+      part: {},
+      node: [],
+      changes: [],
+    })
+
+    const sdk = useSDK()
+    sdk.event.listen((e) => {
+      const event = e.details
+      switch (event.type) {
+        case "session.updated": {
+          const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
+          if (result.found) {
+            setStore("session", result.index, reconcile(event.properties.info))
+            break
+          }
+          setStore(
+            "session",
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties.info)
+            }),
+          )
          break
        }
-        const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
-        if (result.found) {
-          setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
+        case "message.updated": {
+          const messages = store.message[event.properties.info.sessionID]
+          if (!messages) {
+            setStore("message", event.properties.info.sessionID, [event.properties.info])
+            break
+          }
+          const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
+          if (result.found) {
+            setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
+            break
+          }
+          setStore(
+            "message",
+            event.properties.info.sessionID,
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties.info)
+            }),
+          )
+          break
+        }
+        case "message.part.updated": {
+          const parts = store.part[event.properties.part.messageID]
+          if (!parts) {
+            setStore("part", event.properties.part.messageID, [event.properties.part])
+            break
+          }
+          const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
+          if (result.found) {
+            setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
+            break
+          }
+          setStore(
+            "part",
+            event.properties.part.messageID,
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties.part)
+            }),
+          )
          break
        }
-        setStore(
-          "part",
-          event.properties.part.messageID,
-          produce((draft) => {
-            draft.splice(result.index, 0, event.properties.part)
-          }),
-        )
-        break
      }
-    }
-  })
+    })

-  const sdk = useSDK()
-
-  const load = {
-    provider: () => sdk.config.providers().then((x) => setStore("provider", x.data!.providers)),
-    path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
-    agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
-    session: () =>
-      sdk.session.list().then((x) =>
-        setStore(
-          "session",
-          (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
+    const load = {
+      project: () => sdk.client.project.current().then((x) => setStore("project", x.data!)),
+      provider: () => sdk.client.config.providers().then((x) => setStore("provider", x.data!.providers)),
+      path: () => sdk.client.path.get().then((x) => setStore("path", x.data!)),
+      agent: () => sdk.client.app.agents().then((x) => setStore("agent", x.data ?? [])),
+      session: () =>
+        sdk.client.session.list().then((x) =>
+          setStore(
+            "session",
+            (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
+          ),
        ),
-      ),
-    config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
-    changes: () => sdk.file.status().then((x) => setStore("changes", x.data!)),
-    node: () => sdk.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
-  }
+      config: () => sdk.client.config.get().then((x) => setStore("config", x.data!)),
+      changes: () => sdk.client.file.status().then((x) => setStore("changes", x.data!)),
+      node: () => sdk.client.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
+    }

-  Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))
+    Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))

-  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("//", "/")
+    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,
-    set: setStore,
-    session: {
-      get(sessionID: string) {
-        const match = Binary.search(store.session, sessionID, (s) => s.id)
-        if (match.found) return store.session[match.index]
-        return undefined
+    return {
+      data: store,
+      set: setStore,
+      get ready() {
+        return store.ready
      },
-      async sync(sessionID: string) {
-        const [session, messages] = await Promise.all([
-          sdk.session.get({ path: { id: sessionID } }),
-          sdk.session.messages({ path: { id: sessionID } }),
-        ])
-        setStore(
-          produce((draft) => {
-            const match = Binary.search(draft.session, sessionID, (s) => s.id)
-            draft.session[match.index] = session.data!
-            draft.message[sessionID] = messages
-              .data!.map((x) => x.info)
-              .slice()
-              .sort((a, b) => a.id.localeCompare(b.id))
-            for (const message of messages.data!) {
-              draft.part[message.info.id] = message.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
-            }
-          }),
-        )
+      session: {
+        get(sessionID: string) {
+          const match = Binary.search(store.session, sessionID, (s) => s.id)
+          if (match.found) return store.session[match.index]
+          return undefined
+        },
+        async sync(sessionID: string, isRetry = false) {
+          const [session, messages] = await Promise.all([
+            sdk.client.session.get({ path: { id: sessionID } }),
+            sdk.client.session.messages({ path: { id: sessionID } }),
+          ])
+
+          // If no messages and this might be a new session, retry after a delay
+          if (!isRetry && messages.data!.length === 0) {
+            setTimeout(() => this.sync(sessionID, true), 500)
+            return
+          }
+
+          setStore(
+            produce((draft) => {
+              const match = Binary.search(draft.session, sessionID, (s) => s.id)
+              draft.session[match.index] = session.data!
+              draft.message[sessionID] = messages
+                .data!.map((x) => x.info)
+                .slice()
+                .sort((a, b) => a.id.localeCompare(b.id))
+              for (const message of messages.data!) {
+                draft.part[message.info.id] = message.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
+              }
+            }),
+          )
+        },
      },
-    },
-    load,
-    absolute,
-    sanitize,
-  }
-}
-
-type SyncContext = ReturnType<typeof init>
-
-const ctx = createContext<SyncContext>()
-
-export function SyncProvider(props: ParentProps) {
-  const value = init()
-  return (
-    <Show when={value.data.ready}>
-      <ctx.Provider value={value}>{props.children}</ctx.Provider>
-    </Show>
-  )
-}
-
-export function useSync() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useSync must be used within a SyncProvider")
-  }
-  return value
-}
+      load,
+      absolute,
+      sanitize,
+    }
+  },
+})
@@ -1 +1 @@
-@import "@opencode-ai/css/tailwind.css";
+@import "@opencode-ai/ui/styles/tailwind";
@@ -3,10 +3,19 @@ import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
-import { EventProvider, SDKProvider, SyncProvider, LocalProvider, ShikiProvider, MarkedProvider } from "@/context"
 import { Fonts } from "@opencode-ai/ui"
+import { ShikiProvider } from "./context/shiki"
+import { MarkedProvider } from "./context/marked"
+import { SDKProvider } from "./context/sdk"
+import { SyncProvider } from "./context/sync"
+import { LocalProvider } from "./context/local"
 import Home from "@/pages"

+const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
+const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
+
+const url = new URLSearchParams(document.location.search).get("url") || `http://${host}:${port}`
+
 const root = document.getElementById("root")
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
@@ -18,19 +27,17 @@ render(
  () => (
    <ShikiProvider>
      <MarkedProvider>
-        <SDKProvider>
-          <EventProvider>
-            <SyncProvider>
-              <LocalProvider>
-                <MetaProvider>
-                  <Fonts />
-                  <Router>
-                    <Route path="/" component={Home} />
-                  </Router>
-                </MetaProvider>
-              </LocalProvider>
-            </SyncProvider>
-          </EventProvider>
+        <SDKProvider url={url}>
+          <SyncProvider>
+            <LocalProvider>
+              <MetaProvider>
+                <Fonts />
+                <Router>
+                  <Route path="/" component={Home} />
+                </Router>
+              </MetaProvider>
+            </LocalProvider>
+          </SyncProvider>
        </SDKProvider>
      </MarkedProvider>
    </ShikiProvider>
@@ -16,7 +16,7 @@ function CollapsibleTrigger(props: CollapsibleTriggerProps) {
  return (
    <KobalteCollapsible.Trigger
      classList={{
-        "w-full group/collapsible cursor-pointer": true,
+        "w-full group/collapsible": true,
        [local.class ?? ""]: !!local.class,
      }}
      {...others}
@@ -1,38 +0,0 @@
-import { Button as KobalteButton } from "@kobalte/core/button"
-import { splitProps } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-
-export interface IconButtonProps extends ComponentProps<typeof KobalteButton> {
-  variant?: "primary" | "secondary" | "outline" | "ghost"
-  size?: "xs" | "sm" | "md" | "lg"
-  children: JSX.Element
-}
-
-export function IconButton(props: IconButtonProps) {
-  const [local, others] = splitProps(props, ["variant", "size", "class", "classList"])
-  return (
-    <KobalteButton
-      classList={{
-        ...(local.classList || {}),
-        "inline-flex items-center justify-center rounded-md font-medium cursor-pointer": true,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2": true,
-        "disabled:pointer-events-none disabled:opacity-50": true,
-        "bg-primary text-background hover:bg-secondary focus-visible:ring-primary data-[disabled]:opacity-50":
-          (local.variant || "primary") === "primary",
-        "bg-background-panel text-text hover:bg-background-element focus-visible:ring-secondary data-[disabled]:opacity-50":
-          local.variant === "secondary",
-        "border border-border bg-transparent text-text hover:bg-background-panel": local.variant === "outline",
-        "focus-visible:ring-border-active data-[disabled]:border-border-subtle data-[disabled]:text-text-muted":
-          local.variant === "outline",
-        "text-text hover:bg-background-panel focus-visible:ring-border-active data-[disabled]:text-text-muted":
-          local.variant === "ghost",
-        "h-5 w-5 text-xs": local.size === "xs",
-        "h-8 w-8 text-sm": local.size === "sm",
-        "h-10 w-10 text-sm": (local.size || "md") === "md",
-        "h-12 w-12 text-base": local.size === "lg",
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    />
-  )
-}
@@ -5,4 +5,3 @@ export {
  type CollapsibleContentProps,
 } from "./collapsible"
 export { FileIcon, type FileIconProps } from "./file-icon"
-export { IconButton, type IconButtonProps } from "./icon-button"
@@ -1,3 +1,5 @@
+import { useSync } from "@/context/sync"
+
 export function getFilename(path: string) {
  if (!path) return ""
  const trimmed = path.replace(/[\/]+$/, "")
@@ -6,8 +8,10 @@ export function getFilename(path: string) {
 }

 export function getDirectory(path: string) {
+  const sync = useSync()
  const parts = path.split("/")
-  return parts.slice(0, parts.length - 1).join("/")
+  const dir = parts.slice(0, parts.length - 1).join("/")
+  return dir ? sync.sanitize(dir + "/") : ""
 }

 export function getFileExtension(path: string) {
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/function",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -137,7 +137,11 @@ export default new Hono<{ Bindings: Env }>()
    return c.json({})
  })
  .post("/share_delete_admin", async (c) => {
-    const id = c.env.SYNC_SERVER.idFromName("oVF8Rsiv")
+    const body = await c.req.json<{ sessionShortName: string; adminSecret: string }>()
+    const sessionShortName = body.sessionShortName
+    const adminSecret = body.adminSecret
+    if (adminSecret !== Resource.ADMIN_SECRET.value) throw new Error("Invalid admin secret")
+    const id = c.env.SYNC_SERVER.idFromName(sessionShortName)
    const stub = c.env.SYNC_SERVER.get(id)
    await stub.clear()
    return c.json({})
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.15.7",
+  "version": "0.15.27",
  "name": "opencode",
  "type": "module",
  "private": true,
@@ -29,12 +29,12 @@
    "typescript": "catalog:",
    "@typescript/native-preview": "catalog:",
    "vscode-languageserver-types": "3.17.5",
-    "zod-to-json-schema": "3.24.5",
    "@opencode-ai/script": "workspace:*"
  },
  "dependencies": {
    "@actions/core": "1.11.1",
    "@actions/github": "6.0.1",
+    "@agentclientprotocol/sdk": "0.4.9",
    "@clack/prompts": "1.0.0-alpha.1",
    "@hono/standard-validator": "0.1.5",
    "@hono/zod-validator": "catalog:",
@@ -46,6 +46,7 @@
    "@opencode-ai/script": "workspace:*",
    "@opencode-ai/sdk": "workspace:*",
    "@parcel/watcher": "2.5.1",
+    "@pierre/precision-diffs": "catalog:",
    "@standard-schema/spec": "1.0.0",
    "@zip.js/zip.js": "2.7.62",
    "ai": "catalog:",
@@ -69,6 +70,7 @@
    "web-tree-sitter": "0.22.6",
    "xdg-basedir": "5.1.0",
    "yargs": "18.0.0",
-    "zod": "catalog:"
+    "zod": "catalog:",
+    "zod-to-json-schema": "3.24.5"
  }
 }
@@ -1,6 +1,11 @@
 #!/usr/bin/env bun
 import path from "path"
-const dir = new URL("..", import.meta.url).pathname
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const dir = path.resolve(__dirname, "..")
+
 process.chdir(dir)
 import { $ } from "bun"

@@ -40,6 +45,7 @@ for (const [os, arch] of targets) {
  await $`tar -xf ../../node_modules/${watcher.replace("@parcel/", "parcel-")}-*.tgz -C ../../node_modules/${watcher} --strip-components=1`

  await Bun.build({
+    sourcemap: "external",
    compile: {
      target: `bun-${os}-${arch}` as any,
      outfile: `dist/${name}/bin/opencode`,
@@ -40,16 +40,35 @@ for (const [name] of Object.entries(binaries)) {
 }
 await $`cd ./dist/${pkg.name} && bun publish --access public --tag ${Script.channel}`

+if (!Script.preview) {
+  const major = Script.version.split(".")[0]
+  const majorTag = `latest-${major}`
+  for (const [name] of Object.entries(binaries)) {
+    await $`cd dist/${name} && npm dist-tag add ${name}@${Script.version} ${majorTag}`
+  }
+  await $`cd ./dist/${pkg.name} && npm dist-tag add ${pkg.name}-ai@${Script.version} ${majorTag}`
+}
+
 if (!Script.preview) {
  for (const key of Object.keys(binaries)) {
    await $`cd dist/${key}/bin && zip -r ../../${key}.zip *`
  }

  // Calculate SHA values
-  const arm64Sha = await $`sha256sum ./dist/opencode-linux-arm64.zip | cut -d' ' -f1`.text().then((x) => x.trim())
-  const x64Sha = await $`sha256sum ./dist/opencode-linux-x64.zip | cut -d' ' -f1`.text().then((x) => x.trim())
-  const macX64Sha = await $`sha256sum ./dist/opencode-darwin-x64.zip | cut -d' ' -f1`.text().then((x) => x.trim())
-  const macArm64Sha = await $`sha256sum ./dist/opencode-darwin-arm64.zip | cut -d' ' -f1`.text().then((x) => x.trim())
+  const arm64Sha = await $`sha256sum ./dist/opencode-linux-arm64.zip | cut -d' ' -f1`
+    .text()
+    .then((x) => x.trim())
+  const x64Sha = await $`sha256sum ./dist/opencode-linux-x64.zip | cut -d' ' -f1`
+    .text()
+    .then((x) => x.trim())
+  const macX64Sha = await $`sha256sum ./dist/opencode-darwin-x64.zip | cut -d' ' -f1`
+    .text()
+    .then((x) => x.trim())
+  const macArm64Sha = await $`sha256sum ./dist/opencode-darwin-arm64.zip | cut -d' ' -f1`
+    .text()
+    .then((x) => x.trim())
+
+  const [pkgver, _subver = ""] = Script.version.split(/(-.*)/, 2)

  // arch
  const binaryPkgbuild = [
@@ -57,7 +76,8 @@ if (!Script.preview) {
    "# Maintainer: adam",
    "",
    "pkgname='opencode-bin'",
-    `pkgver=${Script.version.split("-")[0]}`,
+    `pkgver=${pkgver}`,
+    `_subver=${_subver}`,
    "options=('!debug' '!strip')",
    "pkgrel=1",
    "pkgdesc='The AI coding agent built for the terminal.'",
@@ -68,10 +88,10 @@ if (!Script.preview) {
    "conflicts=('opencode')",
    "depends=('fzf' 'ripgrep')",
    "",
-    `source_aarch64=("\${pkgname}_\${pkgver}_aarch64.zip::https://github.com/sst/opencode/releases/download/v${Script.version}/opencode-linux-arm64.zip")`,
+    `source_aarch64=("\${pkgname}_\${pkgver}_aarch64.zip::https://github.com/sst/opencode/releases/download/v\${pkgver}\${_subver}/opencode-linux-arm64.zip")`,
    `sha256sums_aarch64=('${arm64Sha}')`,
    "",
-    `source_x86_64=("\${pkgname}_\${pkgver}_x86_64.zip::https://github.com/sst/opencode/releases/download/v${Script.version}/opencode-linux-x64.zip")`,
+    `source_x86_64=("\${pkgname}_\${pkgver}_x86_64.zip::https://github.com/sst/opencode/releases/download/v\${pkgver}\${_subver}/opencode-linux-x64.zip")`,
    `sha256sums_x86_64=('${x64Sha}')`,
    "",
    "package() {",
@@ -86,7 +106,8 @@ if (!Script.preview) {
    "# Maintainer: adam",
    "",
    "pkgname='opencode'",
-    `pkgver=${Script.version.split("-")[0]}`,
+    `pkgver=${pkgver}`,
+    `_subver=${_subver}`,
    "options=('!debug' '!strip')",
    "pkgrel=1",
    "pkgdesc='The AI coding agent built for the terminal.'",
@@ -98,7 +119,7 @@ if (!Script.preview) {
    "depends=('fzf' 'ripgrep')",
    "makedepends=('git' 'bun-bin' 'go')",
    "",
-    `source=("opencode-\${pkgver}.tar.gz::https://github.com/sst/opencode/archive/v${Script.version}.tar.gz")`,
+    `source=("opencode-\${pkgver}.tar.gz::https://github.com/sst/opencode/archive/v\${pkgver}\${_subver}.tar.gz")`,
    `sha256sums=('SKIP')`,
    "",
    "build() {",
@@ -1,6 +1,6 @@
 #!/usr/bin/env bun

-import { z } from "zod/v4"
+import { z } from "zod"
 import { Config } from "../src/config/config"

 const file = process.argv[2]
@@ -0,0 +1,164 @@
+# ACP (Agent Client Protocol) Implementation
+
+This directory contains a clean, protocol-compliant implementation of the [Agent Client Protocol](https://agentclientprotocol.com/) for opencode.
+
+## Architecture
+
+The implementation follows a clean separation of concerns:
+
+### Core Components
+
+- **`agent.ts`** - Implements the `Agent` interface from `@agentclientprotocol/sdk`
+  - Handles initialization and capability negotiation
+  - Manages session lifecycle (`session/new`, `session/load`)
+  - Processes prompts and returns responses
+  - Properly implements ACP protocol v1
+
+- **`client.ts`** - Implements the `Client` interface for client-side capabilities
+  - File operations (`readTextFile`, `writeTextFile`)
+  - Permission requests (auto-approves for now)
+  - Terminal support (stub implementation)
+
+- **`session.ts`** - Session state management
+  - Creates and tracks ACP sessions
+  - Maps ACP sessions to internal opencode sessions
+  - Maintains working directory context
+  - Handles MCP server configurations
+
+- **`server.ts`** - ACP server startup and lifecycle
+  - Sets up JSON-RPC over stdio using the official library
+  - Manages graceful shutdown on SIGTERM/SIGINT
+  - Provides Instance context for the agent
+
+- **`types.ts`** - Type definitions for internal use
+
+## Usage
+
+### Command Line
+
+```bash
+# Start the ACP server in the current directory
+opencode acp
+
+# Start in a specific directory
+opencode acp --cwd /path/to/project
+```
+
+### Programmatic
+
+```typescript
+import { ACPServer } from "./acp/server"
+
+await ACPServer.start()
+```
+
+### Integration with Zed
+
+Add to your Zed configuration (`~/.config/zed/settings.json`):
+
+```json
+{
+  "agent_servers": {
+    "OpenCode": {
+      "command": "opencode",
+      "args": ["acp"]
+    }
+  }
+}
+```
+
+## Protocol Compliance
+
+This implementation follows the ACP specification v1:
+
+✅ **Initialization**
+
+- Proper `initialize` request/response with protocol version negotiation
+- Capability advertisement (`agentCapabilities`)
+- Authentication support (stub)
+
+✅ **Session Management**
+
+- `session/new` - Create new conversation sessions
+- `session/load` - Resume existing sessions (basic support)
+- Working directory context (`cwd`)
+- MCP server configuration support
+
+✅ **Prompting**
+
+- `session/prompt` - Process user messages
+- Content block handling (text, resources)
+- Response with stop reasons
+
+✅ **Client Capabilities**
+
+- File read/write operations
+- Permission requests
+- Terminal support (stub for future)
+
+## Current Limitations
+
+### Not Yet Implemented
+
+1. **Streaming Responses** - Currently returns complete responses instead of streaming via `session/update` notifications
+2. **Tool Call Reporting** - Doesn't report tool execution progress
+3. **Session Modes** - No mode switching support yet
+4. **Authentication** - No actual auth implementation
+5. **Terminal Support** - Placeholder only
+6. **Session Persistence** - `session/load` doesn't restore actual conversation history
+
+### Future Enhancements
+
+- **Real-time Streaming**: Implement `session/update` notifications for progressive responses
+- **Tool Call Visibility**: Report tool executions as they happen
+- **Session Persistence**: Save and restore full conversation history
+- **Mode Support**: Implement different operational modes (ask, code, etc.)
+- **Enhanced Permissions**: More sophisticated permission handling
+- **Terminal Integration**: Full terminal support via opencode's bash tool
+
+## Testing
+
+```bash
+# Run ACP tests
+bun test test/acp.test.ts
+
+# Test manually with stdio
+echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":1}}' | opencode acp
+```
+
+## Design Decisions
+
+### Why the Official Library?
+
+We use `@agentclientprotocol/sdk` instead of implementing JSON-RPC ourselves because:
+
+- Ensures protocol compliance
+- Handles edge cases and future protocol versions
+- Reduces maintenance burden
+- Works with other ACP clients automatically
+
+### Clean Architecture
+
+Each component has a single responsibility:
+
+- **Agent** = Protocol interface
+- **Client** = Client-side operations
+- **Session** = State management
+- **Server** = Lifecycle and I/O
+
+This makes the codebase maintainable and testable.
+
+### Mapping to OpenCode
+
+ACP sessions map cleanly to opencode's internal session model:
+
+- ACP `session/new` → creates internal Session
+- ACP `session/prompt` → uses SessionPrompt.prompt()
+- Working directory context preserved per-session
+- Tool execution uses existing ToolRegistry
+
+## References
+
+- [ACP Specification](https://agentclientprotocol.com/)
+- [TypeScript Library](https://github.com/agentclientprotocol/typescript-sdk)
+- [Protocol Examples](https://github.com/agentclientprotocol/typescript-sdk/tree/main/src/examples)
@@ -0,0 +1,704 @@
+import {
+  type Agent as ACPAgent,
+  type AgentSideConnection,
+  type AuthenticateRequest,
+  type CancelNotification,
+  type InitializeRequest,
+  type LoadSessionRequest,
+  type NewSessionRequest,
+  type PermissionOption,
+  type PlanEntry,
+  type PromptRequest,
+  type SetSessionModelRequest,
+  type SetSessionModeRequest,
+  type SetSessionModeResponse,
+  type ToolCallContent,
+  type ToolKind,
+} from "@agentclientprotocol/sdk"
+import { Log } from "../util/log"
+import { ACPSessionManager } from "./session"
+import type { ACPConfig } from "./types"
+import { Provider } from "../provider/provider"
+import { SessionPrompt } from "../session/prompt"
+import { Installation } from "@/installation"
+import { SessionLock } from "@/session/lock"
+import { Bus } from "@/bus"
+import { MessageV2 } from "@/session/message-v2"
+import { Storage } from "@/storage/storage"
+import { Command } from "@/command"
+import { Agent as Agents } from "@/agent/agent"
+import { Permission } from "@/permission"
+import { Session } from "@/session"
+import { Identifier } from "@/id/id"
+import { SessionCompaction } from "@/session/compaction"
+import type { Config } from "@/config/config"
+import { MCP } from "@/mcp"
+import { Todo } from "@/session/todo"
+import { z } from "zod"
+
+export namespace ACP {
+  const log = Log.create({ service: "acp-agent" })
+
+  export class Agent implements ACPAgent {
+    private sessionManager = new ACPSessionManager()
+    private connection: AgentSideConnection
+    private config: ACPConfig
+
+    constructor(connection: AgentSideConnection, config: ACPConfig = {}) {
+      this.connection = connection
+      this.config = config
+      this.setupEventSubscriptions()
+    }
+
+    private setupEventSubscriptions() {
+      const options: PermissionOption[] = [
+        { optionId: "once", kind: "allow_once", name: "Allow once" },
+        { optionId: "always", kind: "allow_always", name: "Always allow" },
+        { optionId: "reject", kind: "reject_once", name: "Reject" },
+      ]
+      Bus.subscribe(Permission.Event.Updated, async (event) => {
+        const acpSession = this.sessionManager.get(event.properties.sessionID)
+        if (!acpSession) return
+        try {
+          const permission = event.properties
+          const res = await this.connection
+            .requestPermission({
+              sessionId: acpSession.id,
+              toolCall: {
+                toolCallId: permission.callID ?? permission.id,
+                status: "pending",
+                title: permission.title,
+                rawInput: permission.metadata,
+                kind: toToolKind(permission.type),
+                locations: toLocations(permission.type, permission.metadata),
+              },
+              options,
+            })
+            .catch((error) => {
+              log.error("failed to request permission from ACP", {
+                error,
+                permissionID: permission.id,
+                sessionID: permission.sessionID,
+              })
+              Permission.respond({
+                sessionID: permission.sessionID,
+                permissionID: permission.id,
+                response: "reject",
+              })
+              return
+            })
+          if (!res) return
+          if (res.outcome.outcome !== "selected") {
+            Permission.respond({ sessionID: permission.sessionID, permissionID: permission.id, response: "reject" })
+            return
+          }
+          Permission.respond({
+            sessionID: permission.sessionID,
+            permissionID: permission.id,
+            response: res.outcome.optionId as "once" | "always" | "reject",
+          })
+        } catch (err) {
+          if (!(err instanceof Permission.RejectedError)) {
+            log.error("unexpected error when handling permission", { error: err })
+            throw err
+          }
+        }
+      })
+
+      Bus.subscribe(MessageV2.Event.PartUpdated, async (event) => {
+        const props = event.properties
+        const { part } = props
+        const acpSession = this.sessionManager.get(part.sessionID)
+        if (!acpSession) return
+
+        const message = await Storage.read<MessageV2.Info>(["message", part.sessionID, part.messageID]).catch(
+          () => undefined,
+        )
+        if (!message || message.role !== "assistant") return
+
+        if (part.type === "tool") {
+          switch (part.state.status) {
+            case "pending":
+              await this.connection
+                .sessionUpdate({
+                  sessionId: acpSession.id,
+                  update: {
+                    sessionUpdate: "tool_call",
+                    toolCallId: part.callID,
+                    title: part.tool,
+                    kind: toToolKind(part.tool),
+                    status: "pending",
+                    locations: [],
+                    rawInput: {},
+                  },
+                })
+                .catch((err) => {
+                  log.error("failed to send tool pending to ACP", { error: err })
+                })
+              break
+            case "running":
+              await this.connection
+                .sessionUpdate({
+                  sessionId: acpSession.id,
+                  update: {
+                    sessionUpdate: "tool_call_update",
+                    toolCallId: part.callID,
+                    status: "in_progress",
+                    locations: toLocations(part.tool, part.state.input),
+                    rawInput: part.state.input,
+                  },
+                })
+                .catch((err) => {
+                  log.error("failed to send tool in_progress to ACP", { error: err })
+                })
+              break
+            case "completed":
+              const kind = toToolKind(part.tool)
+              const content: ToolCallContent[] = [
+                {
+                  type: "content",
+                  content: {
+                    type: "text",
+                    text: part.state.output,
+                  },
+                },
+              ]
+
+              if (kind === "edit") {
+                const input = part.state.input
+                const filePath = typeof input["filePath"] === "string" ? input["filePath"] : ""
+                const oldText = typeof input["oldString"] === "string" ? input["oldString"] : ""
+                const newText =
+                  typeof input["newString"] === "string"
+                    ? input["newString"]
+                    : typeof input["content"] === "string"
+                      ? input["content"]
+                      : ""
+                content.push({
+                  type: "diff",
+                  path: filePath,
+                  oldText,
+                  newText,
+                })
+              }
+
+              if (part.tool === "todowrite") {
+                const parsedTodos = z.array(Todo.Info).safeParse(JSON.parse(part.state.output))
+                if (parsedTodos.success) {
+                  await this.connection
+                    .sessionUpdate({
+                      sessionId: acpSession.id,
+                      update: {
+                        sessionUpdate: "plan",
+                        entries: parsedTodos.data.map((todo) => {
+                          const status: PlanEntry["status"] =
+                            todo.status === "cancelled" ? "completed" : (todo.status as PlanEntry["status"])
+                          return {
+                            priority: "medium",
+                            status,
+                            content: todo.content,
+                          }
+                        }),
+                      },
+                    })
+                    .catch((err) => {
+                      log.error("failed to send session update for todo", { error: err })
+                    })
+                } else {
+                  log.error("failed to parse todo output", { error: parsedTodos.error })
+                }
+              }
+
+              await this.connection
+                .sessionUpdate({
+                  sessionId: acpSession.id,
+                  update: {
+                    sessionUpdate: "tool_call_update",
+                    toolCallId: part.callID,
+                    status: "completed",
+                    kind,
+                    content,
+                    title: part.state.title,
+                    rawOutput: {
+                      output: part.state.output,
+                      metadata: part.state.metadata,
+                    },
+                  },
+                })
+                .catch((err) => {
+                  log.error("failed to send tool completed to ACP", { error: err })
+                })
+              break
+            case "error":
+              await this.connection
+                .sessionUpdate({
+                  sessionId: acpSession.id,
+                  update: {
+                    sessionUpdate: "tool_call_update",
+                    toolCallId: part.callID,
+                    status: "failed",
+                    content: [
+                      {
+                        type: "content",
+                        content: {
+                          type: "text",
+                          text: part.state.error,
+                        },
+                      },
+                    ],
+                    rawOutput: {
+                      error: part.state.error,
+                    },
+                  },
+                })
+                .catch((err) => {
+                  log.error("failed to send tool error to ACP", { error: err })
+                })
+              break
+          }
+        } else if (part.type === "text") {
+          const delta = props.delta
+          if (delta && part.synthetic !== true) {
+            await this.connection
+              .sessionUpdate({
+                sessionId: acpSession.id,
+                update: {
+                  sessionUpdate: "agent_message_chunk",
+                  content: {
+                    type: "text",
+                    text: delta,
+                  },
+                },
+              })
+              .catch((err) => {
+                log.error("failed to send text to ACP", { error: err })
+              })
+          }
+        } else if (part.type === "reasoning") {
+          const delta = props.delta
+          if (delta) {
+            await this.connection
+              .sessionUpdate({
+                sessionId: acpSession.id,
+                update: {
+                  sessionUpdate: "agent_thought_chunk",
+                  content: {
+                    type: "text",
+                    text: delta,
+                  },
+                },
+              })
+              .catch((err) => {
+                log.error("failed to send reasoning to ACP", { error: err })
+              })
+          }
+        }
+      })
+    }
+
+    async initialize(params: InitializeRequest) {
+      log.info("initialize", { protocolVersion: params.protocolVersion })
+
+      return {
+        protocolVersion: 1,
+        agentCapabilities: {
+          loadSession: true,
+          mcpCapabilities: {
+            http: true,
+            sse: true,
+          },
+          promptCapabilities: {
+            embeddedContext: true,
+            image: true,
+          },
+        },
+        authMethods: [
+          {
+            description: "Run `opencode auth login` in the terminal",
+            name: "Login with opencode",
+            id: "opencode-login",
+          },
+        ],
+        _meta: {
+          opencode: {
+            version: Installation.VERSION,
+          },
+        },
+      }
+    }
+
+    async authenticate(_params: AuthenticateRequest) {
+      throw new Error("Authentication not implemented")
+    }
+
+    async newSession(params: NewSessionRequest) {
+      const model = await defaultModel(this.config)
+      const session = await this.sessionManager.create(params.cwd, params.mcpServers, model)
+
+      log.info("creating_session", { mcpServers: params.mcpServers.length })
+      const load = await this.loadSession({
+        cwd: params.cwd,
+        mcpServers: params.mcpServers,
+        sessionId: session.id,
+      })
+
+      return {
+        sessionId: session.id,
+        models: load.models,
+        modes: load.modes,
+        _meta: {},
+      }
+    }
+
+    async loadSession(params: LoadSessionRequest) {
+      const model = await defaultModel(this.config)
+      const sessionId = params.sessionId
+
+      const providers = await Provider.list()
+      const entries = Object.entries(providers).sort((a, b) => {
+        const nameA = a[1].info.name.toLowerCase()
+        const nameB = b[1].info.name.toLowerCase()
+        if (nameA < nameB) return -1
+        if (nameA > nameB) return 1
+        return 0
+      })
+      const availableModels = entries.flatMap(([providerID, provider]) => {
+        const models = Provider.sort(Object.values(provider.info.models))
+        return models.map((model) => ({
+          modelId: `${providerID}/${model.id}`,
+          name: `${provider.info.name}/${model.name}`,
+        }))
+      })
+
+      const availableCommands = (await Command.list()).map((command) => ({
+        name: command.name,
+        description: command.description ?? "",
+      }))
+      const names = new Set(availableCommands.map((c) => c.name))
+      if (!names.has("init"))
+        availableCommands.push({
+          name: "init",
+          description: "create/update a AGENTS.md",
+        })
+      if (!names.has("compact"))
+        availableCommands.push({
+          name: "compact",
+          description: "compact the session",
+        })
+
+      setTimeout(() => {
+        this.connection.sessionUpdate({
+          sessionId,
+          update: {
+            sessionUpdate: "available_commands_update",
+            availableCommands,
+          },
+        })
+      }, 0)
+
+      const availableModes = (await Agents.list())
+        .filter((agent) => agent.mode !== "subagent")
+        .map((agent) => ({
+          id: agent.name,
+          name: agent.name,
+          description: agent.description,
+        }))
+
+      const currentModeId = availableModes.find((m) => m.name === "build")?.id ?? availableModes[0].id
+
+      const mcpServers: Record<string, Config.Mcp> = {}
+      for (const server of params.mcpServers) {
+        if ("type" in server) {
+          mcpServers[server.name] = {
+            url: server.url,
+            headers: server.headers.reduce<Record<string, string>>((acc, { name, value }) => {
+              acc[name] = value
+              return acc
+            }, {}),
+            type: "remote",
+          }
+        } else {
+          mcpServers[server.name] = {
+            type: "local",
+            command: [server.command, ...server.args],
+            environment: server.env.reduce<Record<string, string>>((acc, { name, value }) => {
+              acc[name] = value
+              return acc
+            }, {}),
+          }
+        }
+      }
+
+      await Promise.all(
+        Object.entries(mcpServers).map(async ([key, mcp]) => {
+          await MCP.add(key, mcp)
+        }),
+      )
+
+      return {
+        sessionId,
+        models: {
+          currentModelId: `${model.providerID}/${model.modelID}`,
+          availableModels,
+        },
+        modes: {
+          availableModes,
+          currentModeId,
+        },
+        _meta: {},
+      }
+    }
+
+    async setSessionModel(params: SetSessionModelRequest) {
+      const session = this.sessionManager.get(params.sessionId)
+      if (!session) {
+        throw new Error(`Session not found: ${params.sessionId}`)
+      }
+
+      const parsed = Provider.parseModel(params.modelId)
+      const model = await Provider.getModel(parsed.providerID, parsed.modelID)
+
+      this.sessionManager.setModel(session.id, {
+        providerID: model.providerID,
+        modelID: model.modelID,
+      })
+
+      return {
+        _meta: {},
+      }
+    }
+
+    async setSessionMode(params: SetSessionModeRequest): Promise<SetSessionModeResponse | void> {
+      const session = this.sessionManager.get(params.sessionId)
+      if (!session) {
+        throw new Error(`Session not found: ${params.sessionId}`)
+      }
+      await Agents.get(params.modeId).then((agent) => {
+        if (!agent) throw new Error(`Agent not found: ${params.modeId}`)
+      })
+      this.sessionManager.setMode(params.sessionId, params.modeId)
+    }
+
+    async prompt(params: PromptRequest) {
+      const sessionID = params.sessionId
+      const acpSession = this.sessionManager.get(sessionID)
+      if (!acpSession) {
+        throw new Error(`Session not found: ${sessionID}`)
+      }
+
+      const current = acpSession.model
+      const model = current ?? (await defaultModel(this.config))
+      if (!current) {
+        this.sessionManager.setModel(acpSession.id, model)
+      }
+      const agent = acpSession.modeId ?? "build"
+
+      const parts: SessionPrompt.PromptInput["parts"] = []
+      for (const part of params.prompt) {
+        switch (part.type) {
+          case "text":
+            parts.push({
+              type: "text" as const,
+              text: part.text,
+            })
+            break
+          case "image":
+            if (part.data) {
+              parts.push({
+                type: "file",
+                url: `data:${part.mimeType};base64,${part.data}`,
+                mime: part.mimeType,
+              })
+            } else if (part.uri && part.uri.startsWith("http:")) {
+              parts.push({
+                type: "file",
+                url: part.uri,
+                mime: part.mimeType,
+              })
+            }
+            break
+
+          case "resource_link":
+            const parsed = parseUri(part.uri)
+            parts.push(parsed)
+
+            break
+
+          case "resource":
+            const resource = part.resource
+            if ("text" in resource) {
+              parts.push({
+                type: "text",
+                text: resource.text,
+              })
+            }
+            break
+
+          default:
+            break
+        }
+      }
+
+      log.info("parts", { parts })
+
+      const cmd = (() => {
+        const text = parts
+          .filter((p) => p.type === "text")
+          .map((p) => p.text)
+          .join("")
+          .trim()
+
+        if (!text.startsWith("/")) return
+
+        const [name, ...rest] = text.slice(1).split(/\s+/)
+        return { name, args: rest.join(" ").trim() }
+      })()
+
+      const done = {
+        stopReason: "end_turn" as const,
+        _meta: {},
+      }
+
+      if (!cmd) {
+        await SessionPrompt.prompt({
+          sessionID,
+          model: {
+            providerID: model.providerID,
+            modelID: model.modelID,
+          },
+          parts,
+          agent,
+        })
+        return done
+      }
+
+      const command = await Command.get(cmd.name)
+      if (command) {
+        await SessionPrompt.command({
+          sessionID,
+          command: command.name,
+          arguments: cmd.args,
+          model: model.providerID + "/" + model.modelID,
+          agent,
+        })
+        return done
+      }
+
+      switch (cmd.name) {
+        case "init":
+          await Session.initialize({
+            sessionID,
+            messageID: Identifier.ascending("message"),
+            providerID: model.providerID,
+            modelID: model.modelID,
+          })
+          break
+        case "compact":
+          await SessionCompaction.run({
+            sessionID,
+            providerID: model.providerID,
+            modelID: model.modelID,
+          })
+          break
+      }
+
+      return done
+    }
+
+    async cancel(params: CancelNotification) {
+      SessionLock.abort(params.sessionId)
+    }
+  }
+
+  function toToolKind(toolName: string): ToolKind {
+    const tool = toolName.toLocaleLowerCase()
+    switch (tool) {
+      case "bash":
+        return "execute"
+      case "webfetch":
+        return "fetch"
+
+      case "edit":
+      case "patch":
+      case "write":
+        return "edit"
+
+      case "grep":
+      case "glob":
+      case "context7_resolve_library_id":
+      case "context7_get_library_docs":
+        return "search"
+
+      case "list":
+      case "read":
+        return "read"
+
+      default:
+        return "other"
+    }
+  }
+
+  function toLocations(toolName: string, input: Record<string, any>): { path: string }[] {
+    const tool = toolName.toLocaleLowerCase()
+    switch (tool) {
+      case "read":
+      case "edit":
+      case "write":
+        return input["filePath"] ? [{ path: input["filePath"] }] : []
+      case "glob":
+      case "grep":
+        return input["path"] ? [{ path: input["path"] }] : []
+      case "bash":
+        return []
+      case "list":
+        return input["path"] ? [{ path: input["path"] }] : []
+      default:
+        return []
+    }
+  }
+
+  async function defaultModel(config: ACPConfig) {
+    const configured = config.defaultModel
+    if (configured) return configured
+    return Provider.defaultModel()
+  }
+
+  function parseUri(
+    uri: string,
+  ): { type: "file"; url: string; filename: string; mime: string } | { type: "text"; text: string } {
+    try {
+      if (uri.startsWith("file://")) {
+        const path = uri.slice(7)
+        const name = path.split("/").pop() || path
+        return {
+          type: "file",
+          url: uri,
+          filename: name,
+          mime: "text/plain",
+        }
+      }
+      if (uri.startsWith("zed://")) {
+        const url = new URL(uri)
+        const path = url.searchParams.get("path")
+        if (path) {
+          const name = path.split("/").pop() || path
+          return {
+            type: "file",
+            url: `file://${path}`,
+            filename: name,
+            mime: "text/plain",
+          }
+        }
+      }
+      return {
+        type: "text",
+        text: uri,
+      }
+    } catch {
+      return {
+        type: "text",
+        text: uri,
+      }
+    }
+  }
+}
@@ -0,0 +1,64 @@
+import type { McpServer } from "@agentclientprotocol/sdk"
+import { Identifier } from "../id/id"
+import { Session } from "../session"
+import { Provider } from "../provider/provider"
+import type { ACPSessionState } from "./types"
+
+export class ACPSessionManager {
+  private sessions = new Map<string, ACPSessionState>()
+
+  async create(cwd: string, mcpServers: McpServer[], model?: ACPSessionState["model"]): Promise<ACPSessionState> {
+    const session = await Session.create({ title: `ACP Session ${crypto.randomUUID()}` })
+    const sessionId = session.id
+    const resolvedModel = model ?? (await Provider.defaultModel())
+
+    const state: ACPSessionState = {
+      id: sessionId,
+      cwd,
+      mcpServers,
+      createdAt: new Date(),
+      model: resolvedModel,
+    }
+
+    this.sessions.set(sessionId, state)
+    return state
+  }
+
+  get(sessionId: string) {
+    return this.sessions.get(sessionId)
+  }
+
+  async remove(sessionId: string) {
+    const state = this.sessions.get(sessionId)
+    if (!state) return
+
+    await Session.remove(sessionId).catch(() => {})
+    this.sessions.delete(sessionId)
+  }
+
+  has(sessionId: string) {
+    return this.sessions.has(sessionId)
+  }
+
+  getModel(sessionId: string) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    return session.model
+  }
+
+  setModel(sessionId: string, model: ACPSessionState["model"]) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    session.model = model
+    this.sessions.set(sessionId, session)
+    return session
+  }
+
+  setMode(sessionId: string, modeId: string) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    session.modeId = modeId
+    this.sessions.set(sessionId, session)
+    return session
+  }
+}
@@ -0,0 +1,20 @@
+import type { McpServer } from "@agentclientprotocol/sdk"
+
+export interface ACPSessionState {
+  id: string
+  cwd: string
+  mcpServers: McpServer[]
+  createdAt: Date
+  model: {
+    providerID: string
+    modelID: string
+  }
+  modeId?: string
+}
+
+export interface ACPConfig {
+  defaultModel?: {
+    providerID: string
+    modelID: string
+  }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export type Format = "anthropic" \| "openai" \| "oa-compat"`