sync

Co-authored-by: Aiden Cline <aidenpcline@gmail.com>

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -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

.github/ISSUE_TEMPLATE/config.yml

@@ -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.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -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

.github/ISSUE_TEMPLATE/question.yml

@@ -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

.github/publish-python-sdk.yml

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

.github/workflows/publish-vscode.yml

@@ -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

CONTRIBUTING.md

@@ -0,0 +1,67 @@
+# 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)
+
+> [!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.

README.md

@@ -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
 

STATS.md

@@ -1,112 +1,124 @@
 # 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) |

github/README.md

@@ -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
 

infra/app.ts

@@ -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

install

@@ -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
 }
 

package.json

@@ -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",

packages/console/app/package.json

@@ -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.20"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

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

@@ -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", {
@@ -41,7 +39,7 @@ export function Header(props: { zen?: boolean }) {
           <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>
@@ -112,7 +110,7 @@ export function Header(props: { zen?: boolean }) {
                 <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>

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

@@ -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]),

packages/console/app/src/routes/auth/index.ts

@@ -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")
   }

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

@@ -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")

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

@@ -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;
+    }
   }
-}
+}

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

@@ -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>

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

@@ -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;
         }
       }
     }
   }
-}
+}

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

@@ -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">

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

@@ -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"

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

@@ -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"

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

@@ -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 {}

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

@@ -0,0 +1 @@
+export type Format = "anthropic" | "openai" | "oa-compat"

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

@@ -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,

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

@@ -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)
+  },
+}

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

@@ -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)
+}

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

@@ -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)}`
+}

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

@@ -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 ""
+}

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

@@ -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)
+  }
+}

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

@@ -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,
-    }),
   })
 }

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

@@ -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,
-    }),
   })
 }

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

@@ -0,0 +1,60 @@
+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: `opencode/${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
+  }
+}

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

@@ -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,
-      }
-    },
   })
 }

packages/console/core/migrations/0036_slimy_energizer.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `account` ADD PRIMARY KEY(`id`);--> statement-breakpoint
+ALTER TABLE `auth` ADD PRIMARY KEY(`id`);

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

@@ -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": {}
+  }
+}

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

@@ -253,6 +253,13 @@
       "when": 1760666253896,
       "tag": "0035_narrow_blindfold",
       "breakpoints": true
+    },
+    {
+      "idx": 36,
+      "version": "5",
+      "when": 1760668952329,
+      "tag": "0036_slimy_energizer",
+      "breakpoints": true
     }
   ]
 }

packages/console/core/package.json

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

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

@@ -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] })],
+)

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

@@ -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),
+  ],
 )

packages/console/function/package.json

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

packages/console/function/src/auth.ts

@@ -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

packages/console/mail/package.json

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

packages/css/.gitignore

@@ -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

packages/css/package.json

@@ -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:"
-  }
-}

packages/css/script/colors.txt

@@ -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;

packages/css/src/components/icon.css

@@ -1,6 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}

packages/css/src/index.css

@@ -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);

packages/css/src/tailwind.css

@@ -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";

packages/css/src/utilities.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 */
-  }
-}

packages/desktop/index.html

@@ -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>

packages/desktop/package.json

@@ -1,32 +1,34 @@
 {
   "name": "@opencode-ai/desktop",
-  "version": "0.15.7",
+  "version": "0.15.20",
   "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,

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

@@ -0,0 +1,435 @@
+import type { Part, AssistantMessage, ReasoningPart, TextPart, ToolPart } 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 AssistantMessage(props: { message: AssistantMessage; parts: Part[]; lastToolOnly?: boolean }) {
+  const filteredParts = createMemo(() => {
+    let tool = false
+    return props.parts?.filter((x) => {
+      if (x.type === "tool" && props.lastToolOnly && tool) return false
+      if (x.type === "tool") tool = true
+      return x.type !== "tool" || x.tool !== "todoread"
+    })
+  })
+  return (
+    <div class="w-full flex flex-col items-start gap-4">
+      <For each={filteredParts()}>
+        {(part) => {
+          const component = createMemo(() => PART_MAPPING[part.type as keyof typeof PART_MAPPING])
+          return (
+            <Show when={component()}>
+              <Dynamic component={component()} part={part as any} message={props.message} />
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}
+
+const PART_MAPPING = {
+  text: TextPart,
+  tool: ToolPart,
+  reasoning: ReasoningPart,
+}
+
+function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }) {
+  return null
+  // return (
+  //   <Show when={props.part.text.trim()}>
+  //     <div>{props.part.text}</div>
+  //   </Show>
+  // )
+}
+
+function TextPart(props: { part: TextPart; message: AssistantMessage }) {
+  return (
+    <Show when={props.part.text.trim()}>
+      <Markdown text={props.part.text.trim()} />
+    </Show>
+  )
+}
+
+function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
+  // const sync = useSync()
+
+  const component = createMemo(() => {
+    const render = ToolRegistry.render(props.part.tool) ?? GenericTool
+
+    const metadata = props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
+    const input = props.part.state.status === "completed" ? props.part.state.input : {}
+    // const permissions = sync.data.permission[props.message.sessionID] ?? []
+    // const permissionIndex = permissions.findIndex((x) => x.callID === props.part.callID)
+    // const permission = permissions[permissionIndex]
+
+    return (
+      <Dynamic
+        component={render}
+        input={input}
+        tool={props.part.tool}
+        metadata={metadata}
+        // permission={permission?.metadata ?? {}}
+        output={props.part.state.status === "completed" ? props.part.state.output : undefined}
+      />
+    )
+  })
+
+  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 }) {
+  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()}>
+            <Collapsible.Arrow />
+          </Show>
+        </div>
+      </Collapsible.Trigger>
+      <Show when={props.children}>
+        <Collapsible.Content>{props.children}</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 }} />
+}
+
+type ToolProps<T extends Tool.Info> = {
+  input: Partial<Tool.InferParameters<T>>
+  metadata: Partial<Tool.InferMetadata<T>>
+  // permission: Record<string, any>
+  tool: string
+  output?: string
+}
+
+const ToolRegistry = (() => {
+  const state: Record<
+    string,
+    {
+      name: string
+      render?: Component<ToolProps<any>>
+    }
+  > = {}
+  function register<T extends Tool.Info>(input: { name: string; render?: Component<ToolProps<T>> }) {
+    state[input.name] = input
+    return input
+  }
+  return {
+    register,
+    render(name: string) {
+      return state[name]?.render
+    },
+  }
+})()
+
+ToolRegistry.register<typeof ReadTool>({
+  name: "read",
+  render(props) {
+    return (
+      <BasicTool
+        icon="glasses"
+        trigger={{ title: "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>
+    )
+  },
+})

packages/desktop/src/components/code.tsx

@@ -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

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

@@ -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>
+  )
+}

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

@@ -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
-}

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

@@ -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}

packages/desktop/src/components/markdown.tsx

@@ -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()}
     />
   )

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

@@ -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>
+  )
+}

packages/desktop/src/components/prompt-form-helpers.ts

@@ -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
-}

packages/desktop/src/components/prompt-form-hooks.ts

@@ -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
-    },
-  }
-}

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

@@ -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"

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

@@ -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,263 @@ 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>
+                      <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>
+                    </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 +421,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 +439,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)
 }

packages/desktop/src/components/select-dialog.tsx

@@ -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>
-  )
-}

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

@@ -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>
-  )
-}

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

@@ -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>

packages/desktop/src/components/theme.json

@@ -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"
+}

packages/desktop/src/context/event.tsx

@@ -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
-}

packages/desktop/src/context/helper.tsx

@@ -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
+    },
+  }
+}

packages/desktop/src/context/index.ts

@@ -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"

packages/desktop/src/context/marked.tsx

@@ -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,
+          })
+        },
+      }),
+    )
+  },
+})

packages/desktop/src/context/sdk.tsx

@@ -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 }
+  },
+})

packages/desktop/src/context/shiki.tsx

@@ -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
+  },
+})

packages/desktop/src/context/sync.tsx

@@ -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,
+    }
+  },
+})

packages/desktop/src/index.css

@@ -1 +1 @@
-@import "@opencode-ai/css/tailwind.css";
+@import "@opencode-ai/ui/styles/tailwind";

packages/desktop/src/index.tsx

@@ -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>

packages/desktop/src/pages/index.tsx

@@ -1,17 +1,41 @@
-import { Icon, Tooltip } from "@opencode-ai/ui"
-import { FileIcon, IconButton } from "@/ui"
+import {
+  Button,
+  List,
+  SelectDialog,
+  Tooltip,
+  IconButton,
+  Tabs,
+  Icon,
+  Accordion,
+  Diff,
+  Collapsible,
+} from "@opencode-ai/ui"
+import { FileIcon } from "@/ui"
 import FileTree from "@/components/file-tree"
-import EditorPane from "@/components/editor-pane"
-import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
-import { SelectDialog } from "@/components/select-dialog"
-import { useSync, useSDK, useLocal } from "@/context"
-import type { LocalFile, TextSelection } from "@/context/local"
-import SessionList from "@/components/session-list"
-import SessionTimeline from "@/components/session-timeline"
-import PromptForm, { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
+import { For, onCleanup, onMount, Show, Match, Switch, createSignal, createEffect, createMemo } from "solid-js"
+import { useLocal, type LocalFile } from "@/context/local"
 import { createStore } from "solid-js/store"
 import { getDirectory, getFilename } from "@/utils"
-import { PromptInput } from "@/components/prompt-input"
+import { ContentPart, PromptInput } from "@/components/prompt-input"
+import { DateTime } from "luxon"
+import {
+  DragDropProvider,
+  DragDropSensors,
+  DragOverlay,
+  SortableProvider,
+  closestCenter,
+  createSortable,
+  useDragDropContext,
+} from "@thisbeyond/solid-dnd"
+import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
+import type { JSX } from "solid-js"
+import { Code } from "@/components/code"
+import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
+import { ProgressCircle } from "@/components/progress-circle"
+import { AssistantMessage } from "@/components/assistant-message"
+import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
+import { DiffChanges } from "@/components/diff-changes"
 
 export default function Page() {
   const local = useLocal()
@@ -19,11 +43,18 @@ export default function Page() {
   const sdk = useSDK()
   const [store, setStore] = createStore({
     clickTimer: undefined as number | undefined,
-    modelSelectOpen: false,
     fileSelectOpen: false,
   })
+  let inputRef!: HTMLDivElement
+  let messageScrollElement!: HTMLDivElement
+  const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
 
-  let inputRef: HTMLTextAreaElement | undefined = undefined
+  createEffect(() => {
+    if (!local.session.activeMessage()) return
+    if (!messageScrollElement) return
+    const element = messageScrollElement.querySelector(`[data-message="${local.session.activeMessage()?.id}"]`)
+    element?.scrollIntoView({ block: "start", behavior: "instant" })
+  })
 
   const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
 
@@ -38,7 +69,6 @@ export default function Page() {
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") {
       event.preventDefault()
-      // TODO: command palette
       return
     }
     if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") {
@@ -50,7 +80,7 @@ export default function Page() {
     const focused = document.activeElement === inputRef
     if (focused) {
       if (event.key === "Escape") {
-        // inputRef?.blur()
+        inputRef?.blur()
       }
       return
     }
@@ -76,8 +106,8 @@ export default function Page() {
       }
     }
 
-    if (event.key.length === 1 && event.key !== "Unidentified") {
-      // inputRef?.focus()
+    if (event.key.length === 1 && event.key !== "Unidentified" && !(event.ctrlKey || event.metaKey)) {
+      inputRef?.focus()
     }
   }
 
@@ -104,75 +134,91 @@ export default function Page() {
     }
   }
 
-  const handlePromptSubmit2 = () => {}
+  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 handlePromptSubmit = async (prompt: PromptSubmitValue) => {
+  const handleTabChange = (path: string) => {
+    if (path === "chat" || path === "review") return
+    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)
+  }
+
+  const scrollDiffItem = (element: HTMLElement) => {
+    element.scrollIntoView({ block: "start", behavior: "instant" })
+  }
+
+  const handleDiffTriggerClick = (event: MouseEvent) => {
+    const target = event.currentTarget as HTMLElement
+    queueMicrotask(() => {
+      if (target.getAttribute("aria-expanded") !== "true") return
+      const item = target.closest('[data-slot="accordion-item"]') as HTMLElement | null
+      if (!item) return
+      scrollDiffItem(item)
+    })
+  }
+
+  const handlePromptSubmit = async (parts: ContentPart[]) => {
     const existingSession = local.session.active()
     let session = existingSession
     if (!session) {
-      const created = await sdk.session.create()
+      const created = await sdk.client.session.create()
       session = created.data ?? undefined
     }
     if (!session) return
-    local.session.setActive(session.id)
-
-    interface SubmissionAttachment {
-      path: string
-      selection?: TextSelection
-      label: string
-    }
-
-    const createAttachmentKey = (path: string, selection?: TextSelection) => {
-      if (!selection) return path
-      return `${path}:${selection.startLine}:${selection.startChar}:${selection.endLine}:${selection.endChar}`
-    }
-
-    const formatAttachmentLabel = (path: string, selection?: TextSelection) => {
-      if (!selection) return getFilename(path)
-      return `${getFilename(path)} (${selection.startLine}-${selection.endLine})`
-    }
 
     const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))
 
-    const attachments = new Map<string, SubmissionAttachment>()
+    const text = parts.map((part) => part.content).join("")
+    const attachments = parts.filter((part) => part.type === "file")
 
-    const registerAttachment = (path: string, selection: TextSelection | undefined, label?: string) => {
-      if (!path) return
-      const key = createAttachmentKey(path, selection)
-      if (attachments.has(key)) return
-      attachments.set(key, {
-        path,
-        selection,
-        label: label ?? formatAttachmentLabel(path, selection),
-      })
-    }
+    // const activeFile = local.context.active()
+    // if (activeFile) {
+    //   registerAttachment(
+    //     activeFile.path,
+    //     activeFile.selection,
+    //     activeFile.name ?? formatAttachmentLabel(activeFile.path, activeFile.selection),
+    //   )
+    // }
 
-    const promptAttachments = prompt.parts.filter(
-      (part): part is Extract<PromptContentPart, { kind: "attachment" }> => part.kind === "attachment",
-    )
+    // for (const contextFile of local.context.all()) {
+    //   registerAttachment(
+    //     contextFile.path,
+    //     contextFile.selection,
+    //     formatAttachmentLabel(contextFile.path, contextFile.selection),
+    //   )
+    // }
 
-    for (const part of promptAttachments) {
-      registerAttachment(part.path, part.selection, part.display)
-    }
-
-    const activeFile = local.context.active()
-    if (activeFile) {
-      registerAttachment(
-        activeFile.path,
-        activeFile.selection,
-        activeFile.name ?? formatAttachmentLabel(activeFile.path, activeFile.selection),
-      )
-    }
-
-    for (const contextFile of local.context.all()) {
-      registerAttachment(
-        contextFile.path,
-        contextFile.selection,
-        formatAttachmentLabel(contextFile.path, contextFile.selection),
-      )
-    }
-
-    const attachmentParts = Array.from(attachments.values()).map((attachment) => {
+    const attachmentParts = attachments.map((attachment) => {
       const absolute = toAbsolutePath(attachment.path)
       const query = attachment.selection
         ? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
@@ -185,16 +231,16 @@ export default function Page() {
         source: {
           type: "file" as const,
           text: {
-            value: `@${attachment.label}`,
-            start: 0,
-            end: 0,
+            value: attachment.content,
+            start: attachment.start,
+            end: attachment.end,
           },
           path: absolute,
         },
       }
     })
 
-    await sdk.session.prompt({
+    await sdk.client.session.prompt({
       path: { id: session.id },
       body: {
         agent: local.agent.current()!.name,
@@ -205,51 +251,560 @@ export default function Page() {
         parts: [
           {
             type: "text",
-            text: prompt.text,
+            text,
           },
           ...attachmentParts,
         ],
       },
     })
+    local.session.setActive(session.id)
   }
 
-  const plus = (
-    <IconButton
-      class="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="secondary"
-      onClick={() => setStore("fileSelectOpen", true)}
-    >
-      <Icon name="plus" size={12} />
-    </IconButton>
-  )
+  const handleNewSession = () => {
+    local.session.setActive(undefined)
+    inputRef?.focus()
+  }
+
+  const TabVisual = (props: { file: LocalFile }): JSX.Element => {
+    return (
+      <div class="flex items-center gap-x-1.5">
+        <FileIcon node={props.file} class="_grayscale-100" />
+        <span
+          classList={{
+            "text-14-medium": true,
+            "text-primary": !!props.file.status?.status,
+            italic: !props.file.pinned,
+          }}
+        >
+          {props.file.name}
+        </span>
+        <span class="hidden opacity-70">
+          <Switch>
+            <Match when={props.file.status?.status === "modified"}>
+              <span class="text-primary">M</span>
+            </Match>
+            <Match when={props.file.status?.status === "added"}>
+              <span class="text-success">A</span>
+            </Match>
+            <Match when={props.file.status?.status === "deleted"}>
+              <span class="text-error">D</span>
+            </Match>
+          </Switch>
+        </span>
+      </div>
+    )
+  }
+
+  const SortableTab = (props: {
+    file: LocalFile
+    onTabClick: (file: LocalFile) => void
+    onTabClose: (file: LocalFile) => void
+  }): JSX.Element => {
+    const sortable = createSortable(props.file.path)
+
+    return (
+      // @ts-ignore
+      <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
+        <Tooltip value={props.file.path} placement="bottom" class="h-full">
+          <div class="relative h-full">
+            <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}>
+              <TabVisual file={props.file} />
+            </Tabs.Trigger>
+            <IconButton
+              icon="close"
+              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"
+              variant="ghost"
+              onClick={() => props.onTabClose(props.file)}
+            />
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+
+  const 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
+  }
 
   return (
-    <div class="relative h-screen flex flex-col bg-background-weak">
-      <header class="hidden h-12 shrink-0 bg-background-base border-b border-border-weak-base"></header>
+    <div class="relative h-screen flex flex-col">
+      <header class="hidden h-12 shrink-0 bg-background-strong border-b border-border-weak-base"></header>
       <main class="h-[calc(100vh-0rem)] flex">
-        <div class="shrink-0 w-70">
-          <SessionList />
+        <div class="w-70 shrink-0 bg-background-weak border-r border-border-weak-base flex flex-col items-start">
+          <div class="h-10 flex items-center self-stretch px-5 border-b border-border-weak-base">
+            <span class="text-14-regular overflow-hidden text-ellipsis">{getFilename(sync.data.path.directory)}</span>
+          </div>
+          <div class="flex flex-col items-start gap-4 self-stretch flex-1 py-4 px-3">
+            <Button class="w-full" size="large" onClick={handleNewSession} icon="edit-small-2">
+              New Session
+            </Button>
+            <List
+              data={sync.data.session}
+              key={(x) => x.id}
+              current={local.session.active()}
+              onSelect={(s) => local.session.setActive(s?.id)}
+              onHover={(s) => (!!s ? sync.session.sync(s?.id) : undefined)}
+            >
+              {(session) => {
+                const diffs = createMemo(() => session.summary?.diffs ?? [])
+                const filesChanged = createMemo(() => diffs().length)
+                return (
+                  <Tooltip placement="right" value={session.title}>
+                    <div>
+                      <div class="flex items-center self-stretch gap-6 justify-between">
+                        <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                          {session.title}
+                        </span>
+                        <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
+                          {DateTime.fromMillis(session.time.updated).toRelative()}
+                        </span>
+                      </div>
+                      <div class="flex justify-between items-center self-stretch">
+                        <span class="text-12-regular text-text-weak">{`${filesChanged() || "No"} file${filesChanged() !== 1 ? "s" : ""} changed`}</span>
+                        <DiffChanges diff={diffs()} />
+                      </div>
+                    </div>
+                  </Tooltip>
+                )
+              }}
+            </List>
+          </div>
         </div>
-        <div class="relative grid grid-cols-2">
-          <div class="min-w-0 overflow-y-auto no-scrollbar flex justify-center">
-            <Show when={local.session.active()}>
-              {(activeSession) => <SessionTimeline session={activeSession().id} class="w-full" />}
-            </Show>
-          </div>
-          <div class="p-1.5 pl-px flex flex-col items-center justify-center overflow-y-auto no-scrollbar">
-            <EditorPane onFileClick={handleFileClick} />
-          </div>
-          <div class="absolute bottom-4 inset-x-0 p-2 flex flex-col justify-center items-center z-50">
-            <PromptInput onSubmit={handlePromptSubmit2} />
-            {/* <PromptForm */}
-            {/*   class="w-2xl" */}
-            {/*   onSubmit={handlePromptSubmit} */}
-            {/*   onOpenModelSelect={() => setStore("modelSelectOpen", true)} */}
-            {/*   onInputRefChange={(element: HTMLTextAreaElement | undefined) => { */}
-            {/*     inputRef = element ?? undefined */}
-            {/*   }} */}
-            {/* /> */}
+        <div class="relative bg-background-base w-full h-full overflow-x-hidden">
+          <DragDropProvider
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDragOver={handleDragOver}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+            <ConstrainDragYAxis />
+            <Tabs onChange={handleTabChange}>
+              <div class="sticky top-0 shrink-0 flex">
+                <Tabs.List>
+                  <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
+                    <div>Chat</div>
+                    <Tooltip value={`${local.session.tokens() ?? 0} Tokens`} class="flex items-center gap-1.5">
+                      <ProgressCircle percentage={local.session.context() ?? 0} />
+                      <div class="text-14-regular text-text-weak text-right">{local.session.context() ?? 0}%</div>
+                    </Tooltip>
+                  </Tabs.Trigger>
+                  {/* <Tabs.Trigger value="review">Review</Tabs.Trigger> */}
+                  <SortableProvider ids={local.file.opened().map((file) => file.path)}>
+                    <For each={local.file.opened()}>
+                      {(file) => <SortableTab file={file} onTabClick={handleFileClick} onTabClose={handleTabClose} />}
+                    </For>
+                  </SortableProvider>
+                  <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
+                    <IconButton
+                      icon="plus-small"
+                      variant="ghost"
+                      iconSize="large"
+                      onClick={() => setStore("fileSelectOpen", true)}
+                    />
+                  </div>
+                </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 icon="arrow-up" variant="ghost" onClick={() => navigateChange(-1)} />
+                              </Tooltip>
+                              <Tooltip value="Next change" placement="bottom">
+                                <IconButton icon="arrow-down" variant="ghost" onClick={() => navigateChange(1)} />
+                              </Tooltip>
+                            </div>
+                          </Show>
+                          <Tooltip value="Raw" placement="bottom">
+                            <IconButton
+                              icon="file-text"
+                              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")}
+                            />
+                          </Tooltip>
+                          <Tooltip value="Unified diff" placement="bottom">
+                            <IconButton
+                              icon="checklist"
+                              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")}
+                            />
+                          </Tooltip>
+                          <Tooltip value="Split diff" placement="bottom">
+                            <IconButton
+                              icon="columns"
+                              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")}
+                            />
+                          </Tooltip>
+                        </div>
+                      )
+                    })()}
+                  </Show>
+                </div>
+              </div>
+              <Tabs.Content value="chat" class="select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
+                <div class="px-6 pt-12 max-w-[904px] w-full mx-auto flex flex-col flex-1 min-h-0">
+                  <Show
+                    when={local.session.active()}
+                    fallback={
+                      <div class="flex flex-col pb-36 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
+                        <div class="text-20-medium text-text-weaker">New session</div>
+                        <div class="flex justify-center items-center gap-3">
+                          <Icon name="folder" size="small" />
+                          <div class="text-12-medium text-text-weak">
+                            {getDirectory(sync.data.path.directory)}
+                            <span class="text-text-strong">{getFilename(sync.data.path.directory)}</span>
+                          </div>
+                        </div>
+                        <div class="flex justify-center items-center gap-3">
+                          <Icon name="pencil-line" size="small" />
+                          <div class="text-12-medium text-text-weak">
+                            Last modified&nbsp;
+                            <span class="text-text-strong">
+                              {DateTime.fromMillis(sync.data.project.time.created).toRelative()}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    {(activeSession) => (
+                      <div class="pt-3 flex flex-col flex-1 min-h-0">
+                        <div class="flex items-start gap-8 flex-1 min-h-0">
+                          <Show when={local.session.userMessages().length > 1}>
+                            <ul role="list" class="w-60 shrink-0 flex flex-col items-start gap-1">
+                              <For each={local.session.userMessages()}>
+                                {(message) => {
+                                  const countLines = (text: string) => {
+                                    if (!text) return 0
+                                    return text.split("\n").length
+                                  }
+
+                                  const additions = createMemo(
+                                    () =>
+                                      message.summary?.diffs.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) ?? 0,
+                                  )
+
+                                  const deletions = createMemo(
+                                    () =>
+                                      message.summary?.diffs.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) ?? 0,
+                                  )
+
+                                  const totalBeforeLines = createMemo(
+                                    () =>
+                                      message.summary?.diffs.reduce((acc, diff) => acc + countLines(diff.before), 0) ??
+                                      0,
+                                  )
+
+                                  const blockCounts = createMemo(() => {
+                                    const TOTAL_BLOCKS = 5
+
+                                    const adds = additions()
+                                    const dels = deletions()
+                                    const unchanged = Math.max(0, totalBeforeLines() - dels)
+
+                                    const totalActivity = unchanged + adds + dels
+
+                                    if (totalActivity === 0) {
+                                      return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
+                                    }
+
+                                    const percentAdded = adds / totalActivity
+                                    const percentDeleted = dels / totalActivity
+                                    const added_raw = percentAdded * TOTAL_BLOCKS
+                                    const deleted_raw = percentDeleted * TOTAL_BLOCKS
+
+                                    let added = adds > 0 ? Math.ceil(added_raw) : 0
+                                    let deleted = dels > 0 ? Math.ceil(deleted_raw) : 0
+
+                                    let total_allocated = added + deleted
+                                    if (total_allocated > TOTAL_BLOCKS) {
+                                      if (added_raw < deleted_raw) {
+                                        added = Math.floor(added_raw)
+                                      } else {
+                                        deleted = Math.floor(deleted_raw)
+                                      }
+
+                                      total_allocated = added + deleted
+                                      if (total_allocated > TOTAL_BLOCKS) {
+                                        if (added_raw < deleted_raw) {
+                                          deleted = Math.floor(deleted_raw)
+                                        } else {
+                                          added = Math.floor(added_raw)
+                                        }
+                                      }
+                                    }
+
+                                    const neutral = Math.max(0, TOTAL_BLOCKS - added - deleted)
+
+                                    return { added, deleted, neutral }
+                                  })
+
+                                  const ADD_COLOR = "var(--icon-diff-add-base)"
+                                  const DELETE_COLOR = "var(--icon-diff-delete-base)"
+                                  const NEUTRAL_COLOR = "var(--icon-weak-base)"
+
+                                  const visibleBlocks = createMemo(() => {
+                                    const counts = blockCounts()
+                                    const blocks = [
+                                      ...Array(counts.added).fill(ADD_COLOR),
+                                      ...Array(counts.deleted).fill(DELETE_COLOR),
+                                      ...Array(counts.neutral).fill(NEUTRAL_COLOR),
+                                    ]
+                                    return blocks.slice(0, 5)
+                                  })
+
+                                  return (
+                                    <li
+                                      class="group/li flex items-center gap-x-2 py-1 self-stretch cursor-default"
+                                      onClick={() => local.session.setActiveMessage(message.id)}
+                                    >
+                                      <div class="w-[18px] shrink-0">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="none">
+                                          <g>
+                                            <For each={visibleBlocks()}>
+                                              {(color, i) => (
+                                                <rect x={i() * 4} width="2" height="12" rx="1" fill={color} />
+                                              )}
+                                            </For>
+                                          </g>
+                                        </svg>
+                                      </div>
+                                      <div
+                                        data-active={local.session.activeMessage()?.id === message.id}
+                                        classList={{
+                                          "text-14-regular text-text-weak whitespace-nowrap truncate min-w-0": true,
+                                          "text-text-weak data-[active=true]:text-text-strong group-hover/li:text-text-base": true,
+                                        }}
+                                      >
+                                        {message.summary?.title ?? local.session.getMessageText(message)}
+                                      </div>
+                                    </li>
+                                  )
+                                }}
+                              </For>
+                            </ul>
+                          </Show>
+                          <div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
+                            <div class="flex flex-col items-start gap-50 pb-50">
+                              <For each={local.session.userMessages()}>
+                                {(message) => {
+                                  const title = createMemo(() => message.summary?.title)
+                                  const prompt = createMemo(() => local.session.getMessageText(message))
+                                  const summary = createMemo(() => message.summary?.body)
+                                  const assistantMessages = createMemo(() => {
+                                    return sync.data.message[activeSession().id]?.filter(
+                                      (m) => m.role === "assistant" && m.parentID == message.id,
+                                    ) as AssistantMessageType[]
+                                  })
+                                  const working = createMemo(() => {
+                                    const last = assistantMessages()[assistantMessages().length - 1]
+                                    if (!last) return false
+                                    return !last.time.completed
+                                  })
+                                  const lastWithContent = createMemo(() =>
+                                    assistantMessages().findLast((m) => {
+                                      const parts = sync.data.part[m.id]
+                                      return parts?.find((p) => p.type === "text" || p.type === "tool")
+                                    }),
+                                  )
+
+                                  return (
+                                    <div data-message={message.id} class="flex flex-col items-start self-stretch gap-8">
+                                      {/* Title */}
+                                      <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger">
+                                        <h1 class="text-14-medium text-text-strong overflow-hidden text-ellipsis min-w-0">
+                                          {title() ?? prompt()}
+                                        </h1>
+                                      </div>
+                                      <Show when={title}>
+                                        <div class="-mt-5 text-12-regular text-text-base line-clamp-3">{prompt()}</div>
+                                      </Show>
+                                      {/* Response */}
+                                      <div class="w-full flex flex-col gap-2">
+                                        <Collapsible variant="ghost">
+                                          <Collapsible.Trigger class="text-text-weak hover:text-text-strong">
+                                            <div class="flex items-center gap-1 self-stretch">
+                                              <h2 class="text-12-medium">Show steps</h2>
+                                              <Collapsible.Arrow />
+                                            </div>
+                                          </Collapsible.Trigger>
+                                          <Collapsible.Content>
+                                            <div class="w-full flex flex-col items-start self-stretch gap-8">
+                                              <For each={assistantMessages()}>
+                                                {(assistantMessage) => {
+                                                  const parts = createMemo(() => sync.data.part[assistantMessage.id])
+                                                  return <AssistantMessage message={assistantMessage} parts={parts()} />
+                                                }}
+                                              </For>
+                                            </div>
+                                          </Collapsible.Content>
+                                        </Collapsible>
+                                        <Show when={working() && lastWithContent()}>
+                                          {(last) => {
+                                            const lastParts = createMemo(() => sync.data.part[last().id])
+                                            return (
+                                              <AssistantMessage lastToolOnly message={last()} parts={lastParts()} />
+                                            )
+                                          }}
+                                        </Show>
+                                      </div>
+                                      {/* Summary */}
+                                      <Show when={!working()}>
+                                        <div class="w-full flex flex-col gap-6 items-start self-stretch">
+                                          <div class="flex flex-col items-start gap-1 self-stretch">
+                                            <h2 class="text-12-medium text-text-weak">Summary</h2>
+                                            <div class="text-14-regular text-text-base self-stretch">{summary()}</div>
+                                          </div>
+                                          <Accordion class="w-full" multiple>
+                                            <For each={message.summary?.diffs || []}>
+                                              {(diff) => (
+                                                <Accordion.Item value={diff.file}>
+                                                  <Accordion.Header>
+                                                    <Accordion.Trigger onClick={handleDiffTriggerClick}>
+                                                      <div class="flex items-center justify-between w-full gap-5">
+                                                        <div class="grow flex items-center gap-5 min-w-0">
+                                                          <FileIcon
+                                                            node={{ path: diff.file, type: "file" }}
+                                                            class="shrink-0 size-4"
+                                                          />
+                                                          <div class="flex grow min-w-0">
+                                                            <Show when={diff.file.includes("/")}>
+                                                              <span class="text-text-base truncate-start">
+                                                                {getDirectory(diff.file)}&lrm;
+                                                              </span>
+                                                            </Show>
+                                                            <span class="text-text-strong shrink-0">
+                                                              {getFilename(diff.file)}
+                                                            </span>
+                                                          </div>
+                                                        </div>
+                                                        <div class="shrink-0 flex gap-4 items-center justify-end">
+                                                          <DiffChanges diff={diff} />
+                                                          <Icon name="chevron-grabber-vertical" size="small" />
+                                                        </div>
+                                                      </div>
+                                                    </Accordion.Trigger>
+                                                  </Accordion.Header>
+                                                  <Accordion.Content>
+                                                    <Diff
+                                                      before={{
+                                                        name: diff.file!,
+                                                        contents: diff.before!,
+                                                      }}
+                                                      after={{
+                                                        name: diff.file!,
+                                                        contents: diff.after!,
+                                                      }}
+                                                    />
+                                                  </Accordion.Content>
+                                                </Accordion.Item>
+                                              )}
+                                            </For>
+                                          </Accordion>
+                                        </div>
+                                      </Show>
+                                    </div>
+                                  )
+                                }}
+                              </For>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </Show>
+                </div>
+              </Tabs.Content>
+              {/* <Tabs.Content value="review" class="select-text"></Tabs.Content> */}
+              <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>
+          <div
+            classList={{
+              "absolute inset-x-0 px-6 max-w-[904px] flex flex-col justify-center items-center z-50 mx-auto": true,
+              "bottom-8": true,
+              // "bottom-8": !!local.session.active(),
+              // "bottom-1/2 translate-y-1/2": !local.session.active(),
+            }}
+          >
+            <PromptInput
+              ref={(el) => {
+                inputRef = el
+              }}
+              onSubmit={handlePromptSubmit}
+            />
           </div>
           <div class="hidden shrink-0 w-56 p-2 h-full overflow-y-auto">
             <FileTree path="" onFileClick={handleFileClick} />
@@ -265,7 +820,7 @@ export default function Page() {
                     <li>
                       <button
                         onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
-                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element"
+                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 hover:bg-background-element"
                       >
                         <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
                         <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
@@ -281,73 +836,36 @@ export default function Page() {
           </div>
         </div>
       </main>
-      <Show when={store.modelSelectOpen}>
-        <SelectDialog
-          key={(x) => `${x.provider.id}:${x.id}`}
-          items={local.model.list()}
-          current={local.model.current()}
-          render={(i) => (
-            <div class="w-full flex items-center justify-between">
-              <div class="flex items-center gap-x-2 text-text-muted grow min-w-0">
-                <img src={`https://models.dev/logos/${i.provider.id}.svg`} class="size-4 invert opacity-40" />
-                <span class="text-xs text-text whitespace-nowrap">{i.name}</span>
-                <span class="text-xs text-text-muted/80 whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                  {i.id}
-                </span>
-              </div>
-              <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0">
-                <Tooltip forceMount={false} value="Reasoning">
-                  <Icon name="brain" size={16} classList={{ "text-accent": i.reasoning }} />
-                </Tooltip>
-                <Tooltip forceMount={false} value="Tools">
-                  <Icon name="hammer" size={16} classList={{ "text-secondary": i.tool_call }} />
-                </Tooltip>
-                <Tooltip forceMount={false} value="Attachments">
-                  <Icon name="photo" size={16} classList={{ "text-success": i.attachment }} />
-                </Tooltip>
-                <div class="rounded-full bg-text-muted/20 text-text-muted/80 w-9 h-4 flex items-center justify-center text-[10px]">
-                  {new Intl.NumberFormat("en-US", {
-                    notation: "compact",
-                    compactDisplay: "short",
-                  }).format(i.limit.context)}
-                </div>
-                <Tooltip forceMount={false} value={`$${i.cost?.input}/1M input, $${i.cost?.output}/1M output`}>
-                  <div class="rounded-full bg-success/20 text-success/80 w-9 h-4 flex items-center justify-center text-[10px]">
-                    <Switch fallback="FREE">
-                      <Match when={i.cost?.input > 10}>$$$</Match>
-                      <Match when={i.cost?.input > 1}>$$</Match>
-                      <Match when={i.cost?.input > 0.1}>$</Match>
-                    </Switch>
-                  </div>
-                </Tooltip>
-              </div>
-            </div>
-          )}
-          filter={["provider.name", "name", "id"]}
-          groupBy={(x) => x.provider.name}
-          onClose={() => setStore("modelSelectOpen", false)}
-          onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
-        />
-      </Show>
       <Show when={store.fileSelectOpen}>
         <SelectDialog
+          defaultOpen
+          title="Select file"
+          placeholder="Search files"
+          emptyMessage="No files found"
           items={local.file.search}
           key={(x) => x}
-          render={(i) => (
-            <div class="w-full flex items-center justify-between">
-              <div class="flex items-center gap-x-2 text-text-muted grow min-w-0">
+          onOpenChange={(open) => setStore("fileSelectOpen", open)}
+          onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
+        >
+          {(i) => (
+            <div
+              classList={{
+                "w-full flex items-center justify-between rounded-md": true,
+              }}
+            >
+              <div class="flex items-center gap-x-2 grow min-w-0">
                 <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
-                <span class="text-xs text-text whitespace-nowrap">{getFilename(i)}</span>
-                <span class="text-xs text-text-muted/80 whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                  {getDirectory(i)}
-                </span>
+                <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>
           )}
-          onClose={() => setStore("fileSelectOpen", false)}
-          onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
-        />
+        </SelectDialog>
       </Show>
     </div>
   )

packages/desktop/src/ui/collapsible.tsx

@@ -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}

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

@@ -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}
-    />
-  )
-}

packages/desktop/src/ui/index.ts

@@ -5,4 +5,3 @@ export {
   type CollapsibleContentProps,
 } from "./collapsible"
 export { FileIcon, type FileIconProps } from "./file-icon"
-export { IconButton, type IconButtonProps } from "./icon-button"

packages/desktop/src/utils/path.ts

@@ -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) {

packages/function/package.json

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

packages/function/src/api.ts

@@ -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({})

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.15.7",
+  "version": "0.15.20",
   "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"
   }
 }

packages/opencode/script/build.ts

@@ -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`,

packages/opencode/script/publish.ts

@@ -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() {",

packages/opencode/script/schema.ts

@@ -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]

packages/opencode/src/acp/README.md

@@ -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)

packages/opencode/src/acp/agent.ts

@@ -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,
+      }
+    }
+  }
+}

packages/opencode/src/acp/session.ts

@@ -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
+  }
+}

packages/opencode/src/acp/types.ts

@@ -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
+  }
+}

packages/opencode/src/agent/agent.ts

@@ -1,5 +1,5 @@
 import { Config } from "../config/config"
-import z from "zod/v4"
+import z from "zod"
 import { Provider } from "../provider/provider"
 import { generateObject, type ModelMessage } from "ai"
 import PROMPT_GENERATE from "./generate.txt"
@@ -51,7 +51,44 @@ export namespace Agent {
     const planPermission = mergeAgentPermissions(
       {
         edit: "deny",
-        bash: "ask",
+        bash: {
+          "cut*": "allow",
+          "diff*": "allow",
+          "du*": "allow",
+          "file *": "allow",
+          "find * -delete*": "ask",
+          "find * -exec*": "ask",
+          "find * -fprint*": "ask",
+          "find * -fls*": "ask",
+          "find * -fprintf*": "ask",
+          "find * -ok*": "ask",
+          "find *": "allow",
+          "git diff*": "allow",
+          "git log*": "allow",
+          "git show*": "allow",
+          "git status*": "allow",
+          "git branch": "allow",
+          "git branch -v": "allow",
+          "grep*": "allow",
+          "head*": "allow",
+          "less*": "allow",
+          "ls*": "allow",
+          "more*": "allow",
+          "pwd*": "allow",
+          "rg*": "allow",
+          "sort --output=*": "ask",
+          "sort -o *": "ask",
+          "sort*": "allow",
+          "stat*": "allow",
+          "tail*": "allow",
+          "tree -o *": "ask",
+          "tree*": "allow",
+          "uniq*": "allow",
+          "wc*": "allow",
+          "whereis*": "allow",
+          "which*": "allow",
+          "*": "ask",
+        },
         webfetch: "allow",
       },
       cfg.permission ?? {},
@@ -176,6 +213,16 @@ export namespace Agent {
 }
 
 function mergeAgentPermissions(basePermission: any, overridePermission: any): Agent.Info["permission"] {
+  if (typeof basePermission.bash === "string") {
+    basePermission.bash = {
+      "*": basePermission.bash,
+    }
+  }
+  if (typeof overridePermission.bash === "string") {
+    overridePermission.bash = {
+      "*": overridePermission.bash,
+    }
+  }
   const merged = mergeDeep(basePermission ?? {}, overridePermission ?? {}) as any
   let mergedBash
   if (merged.bash) {
@@ -183,12 +230,10 @@ function mergeAgentPermissions(basePermission: any, overridePermission: any): Ag
       mergedBash = {
         "*": merged.bash,
       }
-    }
-    // if granular permissions are provided, default to "ask"
-    if (typeof merged.bash === "object") {
+    } else if (typeof merged.bash === "object") {
       mergedBash = mergeDeep(
         {
-          "*": "ask",
+          "*": "allow",
         },
         merged.bash,
       )

packages/opencode/src/auth/github-copilot.ts

@@ -1,147 +0,0 @@
-import z from "zod/v4"
-import { Auth } from "./index"
-import { NamedError } from "../util/error"
-
-export namespace AuthGithubCopilot {
-  const CLIENT_ID = "Iv1.b507a08c87ecfe98"
-  const DEVICE_CODE_URL = "https://github.com/login/device/code"
-  const ACCESS_TOKEN_URL = "https://github.com/login/oauth/access_token"
-  const COPILOT_API_KEY_URL = "https://api.github.com/copilot_internal/v2/token"
-
-  interface DeviceCodeResponse {
-    device_code: string
-    user_code: string
-    verification_uri: string
-    expires_in: number
-    interval: number
-  }
-
-  interface AccessTokenResponse {
-    access_token?: string
-    error?: string
-    error_description?: string
-  }
-
-  interface CopilotTokenResponse {
-    token: string
-    expires_at: number
-    refresh_in: number
-    endpoints: {
-      api: string
-    }
-  }
-
-  export async function authorize() {
-    const deviceResponse = await fetch(DEVICE_CODE_URL, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        "User-Agent": "GitHubCopilotChat/0.26.7",
-      },
-      body: JSON.stringify({
-        client_id: CLIENT_ID,
-        scope: "read:user",
-      }),
-    })
-    const deviceData: DeviceCodeResponse = await deviceResponse.json()
-    return {
-      device: deviceData.device_code,
-      user: deviceData.user_code,
-      verification: deviceData.verification_uri,
-      interval: deviceData.interval || 5,
-      expiry: deviceData.expires_in,
-    }
-  }
-
-  export async function poll(device_code: string) {
-    const response = await fetch(ACCESS_TOKEN_URL, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        "User-Agent": "GitHubCopilotChat/0.26.7",
-      },
-      body: JSON.stringify({
-        client_id: CLIENT_ID,
-        device_code,
-        grant_type: "urn:ietf:params:oauth:grant-type:device_code",
-      }),
-    })
-
-    if (!response.ok) return "failed"
-
-    const data: AccessTokenResponse = await response.json()
-
-    if (data.access_token) {
-      // Store the GitHub OAuth token
-      await Auth.set("github-copilot", {
-        type: "oauth",
-        refresh: data.access_token,
-        access: "",
-        expires: 0,
-      })
-      return "complete"
-    }
-
-    if (data.error === "authorization_pending") return "pending"
-
-    if (data.error) return "failed"
-
-    return "pending"
-  }
-
-  export async function access() {
-    const info = await Auth.get("github-copilot")
-    if (!info || info.type !== "oauth") return
-    if (info.access && info.expires > Date.now()) return info.access
-
-    // Get new Copilot API token
-    const response = await fetch(COPILOT_API_KEY_URL, {
-      headers: {
-        Accept: "application/json",
-        Authorization: `Bearer ${info.refresh}`,
-        "User-Agent": "GitHubCopilotChat/0.26.7",
-        "Editor-Version": "vscode/1.99.3",
-        "Editor-Plugin-Version": "copilot-chat/0.26.7",
-      },
-    })
-
-    if (!response.ok) return
-
-    const tokenData: CopilotTokenResponse = await response.json()
-
-    // Store the Copilot API token
-    await Auth.set("github-copilot", {
-      type: "oauth",
-      refresh: info.refresh,
-      access: tokenData.token,
-      expires: tokenData.expires_at * 1000,
-    })
-
-    return tokenData.token
-  }
-
-  export const DeviceCodeError = NamedError.create("DeviceCodeError", z.object({}))
-
-  export const TokenExchangeError = NamedError.create(
-    "TokenExchangeError",
-    z.object({
-      message: z.string(),
-    }),
-  )
-
-  export const AuthenticationError = NamedError.create(
-    "AuthenticationError",
-    z.object({
-      message: z.string(),
-    }),
-  )
-
-  export const CopilotTokenError = NamedError.create(
-    "CopilotTokenError",
-    z.object({
-      message: z.string(),
-    }),
-  )
-}

packages/opencode/src/auth/index.ts

@@ -1,7 +1,7 @@
 import path from "path"
 import { Global } from "../global"
 import fs from "fs/promises"
-import z from "zod/v4"
+import z from "zod"
 
 export namespace Auth {
   export const Oauth = z

packages/opencode/src/bun/index.ts

@@ -1,4 +1,4 @@
-import z from "zod/v4"
+import z from "zod"
 import { Global } from "../global"
 import { Log } from "../util/log"
 import path from "path"

packages/opencode/src/bus/index.ts

@@ -1,5 +1,5 @@
-import z from "zod/v4"
-import type { ZodType } from "zod/v4"
+import z from "zod"
+import type { ZodType } from "zod"
 import { Log } from "../util/log"
 import { Instance } from "../project/instance"