release: v0.15.17

ignore: rm change
acp: slash commands, agents, permissions, @ references, code cleanup (#3403 )
2026-07-17 12:56:41 +02:00 · 2025-10-25 06:45:23 +00:00 · 2025-10-25 01:35:43 -05:00 · 2025-10-25 01:32:46 -05:00 · 2025-10-24 17:35:08 -05:00 · 2025-10-24 16:04:44 -05:00
192 changed files with 9803 additions and 4513 deletions
@@ -0,0 +1,59 @@
+name: Bug report
+description: Report an issue that should be fixed
+labels: ["bug"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Describe the bug you encountered
+      placeholder: What happened?
+    validations:
+      required: true
+
+  - type: input
+    id: opencode-version
+    attributes:
+      label: OpenCode version
+      description: What version of OpenCode are you using?
+    validations:
+      required: false
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: How can we reproduce this issue?
+      placeholder: |
+        1.
+        2.
+        3.
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshot-or-link
+    attributes:
+      label: Screenshot and/or share link
+      description: Run `/share` to get a share link, or attach a screenshot
+      placeholder: Paste link or drag and drop screenshot here
+    validations:
+      required: false
+
+  - type: input
+    id: os
+    attributes:
+      label: Operating System
+      description: what OS are you using?
+      placeholder: e.g., macOS 26.0.1, Ubuntu 22.04, Windows 11
+    validations:
+      required: false
+
+  - type: input
+    id: terminal
+    attributes:
+      label: Terminal
+      description: what terminal are you using?
+      placeholder: e.g., iTerm2, Ghostty, Alacritty, Windows Terminal
+    validations:
+      required: false
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 💬 Discord Community
+    url: https://discord.gg/opencode
+    about: For quick questions or real-time discussion. Note that issues are searchable and help others with the same question.
@@ -0,0 +1,20 @@
+name: 🚀 Feature Request
+description: Suggest an idea, feature, or enhancement
+labels: [discussion]
+title: "[FEATURE]:"
+
+body:
+  - type: checkboxes
+    id: verified
+    attributes:
+      label: Feature hasn't been suggested before.
+      options:
+        - label: I have verified this feature I'm about to request hasn't been suggested before.
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the enhancement you want to request
+      description: What do you want to change or add? What are the benefits of implementing this? Try to be detailed so we can understand your request better :)
+    validations:
+      required: true
@@ -0,0 +1,11 @@
+name: Question
+description: Ask a question
+labels: ["question"]
+body:
+  - type: textarea
+    id: question
+    attributes:
+      label: Question
+      description: What's your question?
+    validations:
+      required: true
@@ -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
@@ -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.
@@ -26,6 +26,8 @@ curl -fsSL https://opencode.ai/install | bash

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

 ### Contributing

-OpenCode is an opinionated tool so any fundamental feature needs to go through a
-design process with the core team.
-
-> [!IMPORTANT]
-> We do not accept PRs for core features.
-
-However we still merge a ton of PRs - you can contribute:
-
- Bug fixes
- Improvements to LLM performance
- Support for new providers
- Fixes for env specific quirks
- Missing standard behavior
- Documentation
-
-Take a look at the git history to see what kind of PRs we end up merging.
-
-> [!NOTE]
-> If you do not follow the above guidelines we might close your PR.
-
-To run OpenCode locally you need.
-
- Bun 1.3 or higher
- Golang 1.24.x
-
-And run.
-
-```bash
-$ bun install
-$ bun dev
-```
-
-#### Development Notes
-
-**API Client**: After making changes to the TypeScript API endpoints in `packages/opencode/src/server/server.ts`, you will need the OpenCode team to generate a new stainless sdk for the clients.
+If you're interested in contributing to OpenCode, please read our [contributing docs](./CONTRIBUTING.md) before submitting a pull request.

 ### FAQ

@@ -1,112 +1,120 @@
 # 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) |
@@ -3,6 +3,7 @@ import { domain } from "./stage"
 const GITHUB_APP_ID = new sst.Secret("GITHUB_APP_ID")
 const GITHUB_APP_PRIVATE_KEY = new sst.Secret("GITHUB_APP_PRIVATE_KEY")
 export const EMAILOCTOPUS_API_KEY = new sst.Secret("EMAILOCTOPUS_API_KEY")
+const ADMIN_SECRET = new sst.Secret("ADMIN_SECRET")
 const bucket = new sst.cloudflare.Bucket("Bucket")

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

@@ -25,6 +25,7 @@
      "@tsconfig/bun": "1.0.9",
      "@cloudflare/workers-types": "4.20251008.0",
      "@openauthjs/openauth": "0.0.0-20250322224806",
+      "@pierre/precision-diffs": "0.0.2-alpha.1-1",
      "@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"
    }
@@ -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.17"
  },
  "dependencies": {
    "@ibm/plex": "6.4.1",
@@ -4,11 +4,9 @@ import { A, createAsync } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { github } from "~/lib/github"
-import { queryIsLoggedIn } from "~/routes/workspace/common"

 export function Header(props: { zen?: boolean }) {
  const githubData = createAsync(() => github())
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
  const starCount = createMemo(() =>
    githubData()?.stars
      ? new Intl.NumberFormat("en-US", {
@@ -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>
@@ -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]),
@@ -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")
  }
@@ -23,7 +23,13 @@ const getWorkspaces = query(async () => {
        })
        .from(UserTable)
        .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
-        .where(and(eq(UserTable.accountID, Actor.account()), isNull(WorkspaceTable.timeDeleted))),
+        .where(
+          and(
+            eq(UserTable.accountID, Actor.account()),
+            isNull(WorkspaceTable.timeDeleted),
+            isNull(UserTable.timeDeleted),
+          ),
+        ),
    )
  })
 }, "workspaces")
@@ -16,38 +16,110 @@
  justify-content: flex-end;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

 export default function Home() {
-  const isLoggedIn = createAsync(() => queryIsLoggedIn())
+  createAsync(() => checkLoggedIn())
  return (
    <main data-page="zen">
      <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
@@ -105,7 +111,7 @@ export default function Home() {
                </div>
              </div>
              <a href="/auth">
-                <span>{isLoggedIn() ? "Go to workspace " : "Get started with Zen "}</span>
+                <span>Get started with Zen </span>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
@@ -47,11 +47,17 @@ export function POST(input: APIEvent) {
      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,
-    }),
+    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: outputTokens - (reasoningTokens ?? 0),
+        reasoningTokens,
+        cacheReadTokens,
+      }
+    },
  })
 }
@@ -0,0 +1,2 @@
+ALTER TABLE `account` ADD PRIMARY KEY(`id`);--> statement-breakpoint
+ALTER TABLE `auth` ADD PRIMARY KEY(`id`);
@@ -0,0 +1,969 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "5470c8b4-296d-47bd-85a7-88cfd3b71434",
+  "prevId": "10169105-4545-4894-838b-004c0a42c584",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "account_id_pk": {
+          "name": "account_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "auth": {
+      "name": "auth",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "enum('email','github','google')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "provider": {
+          "name": "provider",
+          "columns": [
+            "provider",
+            "subject"
+          ],
+          "isUnique": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "auth_id_pk": {
+          "name": "auth_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_type": {
+          "name": "payment_method_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_id": {
+          "name": "key_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "model": {
+      "name": "model",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "model_workspace_model": {
+          "name": "model_workspace_model",
+          "columns": [
+            "workspace_id",
+            "model"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "model_workspace_id_id_pk": {
+          "name": "model_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "provider": {
+      "name": "provider",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentials": {
+          "name": "credentials",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "workspace_provider": {
+          "name": "workspace_provider",
+          "columns": [
+            "workspace_id",
+            "provider"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "provider_workspace_id_id_pk": {
+          "name": "provider_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_account_id": {
+          "name": "user_account_id",
+          "columns": [
+            "workspace_id",
+            "account_id"
+          ],
+          "isUnique": true
+        },
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        },
+        "global_account_id": {
+          "name": "global_account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        },
+        "global_email": {
+          "name": "global_email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
@@ -253,6 +253,13 @@
      "when": 1760666253896,
      "tag": "0035_narrow_blindfold",
      "breakpoints": true
+    },
+    {
+      "idx": 36,
+      "version": "5",
+      "when": 1760668952329,
+      "tag": "0036_slimy_energizer",
+      "breakpoints": true
    }
  ]
 }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "0.15.7",
+  "version": "0.15.17",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -1,7 +1,11 @@
-import { mysqlTable, uniqueIndex, varchar } from "drizzle-orm/mysql-core"
+import { mysqlTable, primaryKey } from "drizzle-orm/mysql-core"
 import { id, timestamps } from "../drizzle/types"

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

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

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

        // Get account
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "0.15.7",
+  "version": "0.15.17",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,34 +0,0 @@
-# dependencies (bun install)
-node_modules
-
-# output
-out
-dist
-*.tgz
-
-# code coverage
-coverage
-*.lcov
-
-# logs
-logs
-_.log
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# caches
-.eslintcache
-.cache
-*.tsbuildinfo
-
-# IntelliJ based IDEs
-.idea
-
-# Finder (MacOS) folder config
-.DS_Store
@@ -1,18 +0,0 @@
-{
-  "name": "@opencode-ai/css",
-  "version": "0.15.7",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.css",
-    "./*": "./src/*",
-    "./fonts/*": "./src/assets/fonts/*"
-  },
-  "scripts": {
-    "dev": "bun run dev.ts",
-    "generate:tailwind": "bun run script/colors.ts"
-  },
-  "dependencies": {
-    "tailwindcss": "catalog:",
-    "@tailwindcss/vite": "catalog:"
-  }
-}
@@ -1,6 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
@@ -1,14 +0,0 @@
-@layer theme, base, components, utilities;
-
-@import "./color.css" layer(theme);
-@import "./theme.css" layer(theme);
-
-@import "./base.css" layer(base);
-
-@import "./components/button.css" layer(components);
-@import "./components/icon.css" layer(components);
-@import "./components/select.css" layer(components);
-@import "./components/tabs.css" layer(components);
-@import "./components/tooltip.css" layer(components);
-
-@import "./utilities.css" layer(utilities);
@@ -1,12 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@import "./index.css";
-
-@theme {
-  --shadow-*: initial;
-  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
-}
-
-@import "./tailwind-colors.css";
@@ -1,37 +0,0 @@
-:root {
-  interpolate-size: allow-keywords;
-
-  [data-popper-positioner] {
-    pointer-events: none;
-  }
-
-  ::selection {
-    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
-    /* background-color: var(--color-primary); */
-    /* color: var(--color-background); */
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--theme-background-panel);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--theme-border-subtle);
-    border-radius: 6px;
-  }
-
-  * {
-    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
-  }
-}
-
-.no-scrollbar {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full bg-background-weak">
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,15 +7,15 @@
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
    <title>OpenCode</title>
  </head>
-  <body class="h-full overscroll-none select-none">
-    <script>
-      ;(function () {
-        const savedTheme = localStorage.getItem("theme") || "opencode"
-        const savedDarkMode = localStorage.getItem("darkMode") !== "false"
-        document.documentElement.setAttribute("data-theme", savedTheme)
-        document.documentElement.setAttribute("data-dark", savedDarkMode.toString())
-      })()
-    </script>
+  <body class="overscroll-none select-none text-12-regular">
+    <!-- <script> -->
+    <!--   ;(function () { -->
+    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
+    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
+    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
+    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
+    <!--   })() -->
+    <!-- </script> -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/desktop",
-  "version": "0.15.7",
+  "version": "0.15.17",
  "description": "",
  "type": "module",
  "scripts": {
@@ -24,9 +24,11 @@
  },
  "dependencies": {
    "@kobalte/core": "catalog:",
-    "@opencode-ai/css": "workspace:*",
    "@opencode-ai/sdk": "workspace:*",
+    "@opencode-ai/ui": "workspace:*",
+    "@pierre/precision-diffs": "catalog:",
    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/active-element": "2.1.3",
    "@solid-primitives/event-bus": "1.1.2",
    "@solid-primitives/resize-observer": "2.1.3",
    "@solid-primitives/scroll": "2.1.3",
@@ -34,17 +36,16 @@
    "@solidjs/router": "0.15.3",
    "@thisbeyond/solid-dnd": "0.7.5",
    "diff": "catalog:",
-    "@opencode-ai/ui": "workspace:*",
    "fuzzysort": "catalog:",
    "luxon": "catalog:",
    "marked": "16.2.0",
    "marked-shiki": "1.2.1",
    "remeda": "catalog:",
-    "solid-js": "catalog:",
    "shiki": "3.9.2",
-    "solid-list": "0.3.0",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:",
    "tailwindcss": "catalog:",
-    "virtua": "0.42.3"
+    "virtua": "catalog:"
  },
  "prettier": {
    "semi": false,
@@ -1,8 +1,8 @@
 import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "shiki"
 import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
-import { useLocal, useShiki } from "@/context"
-import type { TextSelection } from "@/context/local"
+import { useLocal, type TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
+import { useShiki } from "@/context/shiki"

 type DefinedSelection = Exclude<TextSelection, undefined>

@@ -394,7 +394,7 @@ export function Code(props: Props) {
          [&_.diff-blank_.diff-oldln]:bg-background-element
          [&_.diff-blank_.diff-newln]:bg-background-element
          [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative
-          [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none
+          [&_.diff-collapsed]:select-none
          [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40!
          [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info
          [&_.diff-collapsed]:text-xs
@@ -0,0 +1,159 @@
+import {
+  type FileContents,
+  FileDiff,
+  type DiffLineAnnotation,
+  DiffFileRendererOptions,
+  registerCustomTheme,
+} from "@pierre/precision-diffs"
+import { ComponentProps, createEffect, splitProps } from "solid-js"
+
+export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & {
+  before: FileContents
+  after: FileContents
+  annotations?: DiffLineAnnotation<T>[]
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+}
+
+// @ts-expect-error
+registerCustomTheme("opencode", () => import("./theme.json"))
+
+// interface ThreadMetadata {
+//   threadId: string
+// }
+
+export function Diff<T>(props: DiffProps<T>) {
+  let container!: HTMLDivElement
+  const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+
+  // const lineAnnotations: DiffLineAnnotation<ThreadMetadata>[] = [
+  //   {
+  //     side: "additions",
+  //     // The line number specified for an annotation is the visual line number
+  //     // you see in the number column of a diff
+  //     lineNumber: 16,
+  //     metadata: { threadId: "68b329da9893e34099c7d8ad5cb9c940" },
+  //   },
+  // ]
+
+  // If you ever want to update the options for an instance, simple call
+  // 'setOptions' with the new options. Bear in mind, this does NOT merge
+  // existing properties, it's a full replace
+  // instance.setOptions({
+  //   ...instance.options,
+  //   theme: "pierre-dark",
+  //   themes: undefined,
+  // })
+
+  // When ready to render, simply call .render with old/new file, optional
+  // annotations and a container element to hold the diff
+  createEffect(() => {
+    const instance = new FileDiff<T>({
+      theme: "opencode",
+      // Or can also provide a 'themes' prop, which allows the code to adapt
+      // to your OS light or dark theme
+      // themes: { dark: 'pierre-night', light: 'pierre-light' },
+      // When using the 'themes' prop, 'themeType' allows you to force 'dark'
+      // or 'light' theme, or inherit from the OS ('system') theme.
+      themeType: "system",
+      // Disable the line numbers for your diffs, generally not recommended
+      disableLineNumbers: false,
+      // Whether code should 'wrap' with long lines or 'scroll'.
+      overflow: "scroll",
+      // Normally you shouldn't need this prop, but if you don't provide a
+      // valid filename or your file doesn't have an extension you may want to
+      // override the automatic detection. You can specify that language here:
+      // https://shiki.style/languages
+      // lang?: SupportedLanguages;
+      // 'diffStyle' controls whether the diff is presented side by side or
+      // in a unified (single column) view
+      diffStyle: "unified",
+      // Line decorators to help highlight changes.
+      // 'bars' (default):
+      // Shows some red-ish or green-ish (theme dependent) bars on the left
+      // edge of relevant lines
+      //
+      // 'classic':
+      // shows '+' characters on additions and '-' characters on deletions
+      //
+      // 'none':
+      // No special diff indicators are shown
+      diffIndicators: "bars",
+      // By default green-ish or red-ish background are shown on added and
+      // deleted lines respectively. Disable that feature here
+      disableBackground: false,
+      // Diffs are split up into hunks, this setting customizes what to show
+      // between each hunk.
+      //
+      // 'line-info' (default):
+      // Shows a bar that tells you how many lines are collapsed. If you are
+      // using the oldFile/newFile API then you can click those bars to
+      // expand the content between them
+      //
+      // 'metadata':
+      // Shows the content you'd see in a normal patch file, usually in some
+      // format like '@@ -60,6 +60,22 @@'. You cannot use these to expand
+      // hidden content
+      //
+      // 'simple':
+      // Just a subtle bar separator between each hunk
+      hunkSeparators: "line-info",
+      // On lines that have both additions and deletions, we can run a
+      // separate diff check to mark parts of the lines that change.
+      // 'none':
+      // Do not show these secondary highlights
+      //
+      // 'char':
+      // Show changes at a per character granularity
+      //
+      // 'word':
+      // Show changes but rounded up to word boundaries
+      //
+      // 'word-alt' (default):
+      // Similar to 'word', however we attempt to minimize single character
+      // gaps between highlighted changes
+      lineDiffType: "word-alt",
+      // If lines exceed these character lengths then we won't perform the
+      // line lineDiffType check
+      maxLineDiffLength: 1000,
+      // If any line in the diff exceeds this value then we won't attempt to
+      // syntax highlight the diff
+      maxLineLengthForHighlighting: 1000,
+      // Enabling this property will hide the file header with file name and
+      // diff stats.
+      disableFileHeader: true,
+      // You can optionally pass a render function for rendering out line
+      // annotations.  Just return the dom node to render
+      // renderAnnotation(annotation: DiffLineAnnotation<T>): HTMLElement {
+      //   // Despite the diff itself being rendered in the shadow dom,
+      //   // annotations are inserted via the web components 'slots' api and you
+      //   // can use all your normal normal css and styling for them
+      //   const element = document.createElement("div")
+      //   element.innerText = annotation.metadata.threadId
+      //   return element
+      // },
+      ...others,
+    })
+
+    instance.render({
+      oldFile: local.before,
+      newFile: local.after,
+      lineAnnotations: local.annotations,
+      containerWrapper: container,
+    })
+  })
+
+  return (
+    <div
+      style={{
+        "--pjs-font-family": "var(--font-family-mono)",
+        "--pjs-font-size": "var(--font-size-small)",
+        "--pjs-line-height": "24px",
+        "--pjs-tab-size": 4,
+        "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
+        "--pjs-header-font-family": "var(--font-family-sans)",
+      }}
+      ref={container}
+    />
+  )
+}
@@ -1,265 +0,0 @@
-import { For, Match, Show, Switch, createSignal, splitProps } from "solid-js"
-import { Tabs, Tooltip } from "@opencode-ai/ui"
-import { Icon } from "@opencode-ai/ui"
-import { FileIcon, IconButton } from "@/ui"
-import {
-  DragDropProvider,
-  DragDropSensors,
-  DragOverlay,
-  SortableProvider,
-  closestCenter,
-  createSortable,
-  useDragDropContext,
-} from "@thisbeyond/solid-dnd"
-import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
-import type { LocalFile } from "@/context/local"
-import { Code } from "@/components/code"
-import { useLocal } from "@/context"
-import type { JSX } from "solid-js"
-
-interface EditorPaneProps {
-  onFileClick: (file: LocalFile) => void
-}
-
-export default function EditorPane(props: EditorPaneProps): JSX.Element {
-  const [localProps] = splitProps(props, ["onFileClick"])
-  const local = useLocal()
-  const [activeItem, setActiveItem] = createSignal<string | undefined>(undefined)
-
-  const navigateChange = (dir: 1 | -1) => {
-    const active = local.file.active()
-    if (!active) return
-    const current = local.file.changeIndex(active.path)
-    const next = current === undefined ? (dir === 1 ? 0 : -1) : current + dir
-    local.file.setChangeIndex(active.path, next)
-  }
-
-  const handleTabChange = (path: string) => {
-    local.file.open(path)
-  }
-
-  const handleTabClose = (file: LocalFile) => {
-    local.file.close(file.path)
-  }
-
-  const handleDragStart = (event: unknown) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    setActiveItem(id)
-  }
-
-  const handleDragOver = (event: DragEvent) => {
-    const { draggable, droppable } = event
-    if (draggable && droppable) {
-      const currentFiles = local.file.opened().map((file) => file.path)
-      const fromIndex = currentFiles.indexOf(draggable.id.toString())
-      const toIndex = currentFiles.indexOf(droppable.id.toString())
-      if (fromIndex !== toIndex) {
-        local.file.move(draggable.id.toString(), toIndex)
-      }
-    }
-  }
-
-  const handleDragEnd = () => {
-    setActiveItem(undefined)
-  }
-
-  return (
-    <DragDropProvider
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragOver={handleDragOver}
-      collisionDetector={closestCenter}
-    >
-      <DragDropSensors />
-      <ConstrainDragYAxis />
-      <Tabs value={local.file.active()?.path} onChange={handleTabChange}>
-        <div class="sticky top-0 shrink-0 flex">
-          <Tabs.List>
-            <SortableProvider ids={local.file.opened().map((file) => file.path)}>
-              <For each={local.file.opened()}>
-                {(file) => <SortableTab file={file} onTabClick={localProps.onFileClick} onTabClose={handleTabClose} />}
-              </For>
-            </SortableProvider>
-          </Tabs.List>
-          <div class="hidden shrink-0 h-full _flex items-center gap-1 px-2 border-b border-border-subtle/40">
-            <Show when={local.file.active() && local.file.active()!.content?.diff}>
-              {(() => {
-                const activeFile = local.file.active()!
-                const view = local.file.view(activeFile.path)
-                return (
-                  <div class="flex items-center gap-1">
-                    <Show when={view !== "raw"}>
-                      <div class="mr-1 flex items-center gap-1">
-                        <Tooltip value="Previous change" placement="bottom">
-                          <IconButton size="xs" variant="ghost" onClick={() => navigateChange(-1)}>
-                            <Icon name="arrow-up" size={14} />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip value="Next change" placement="bottom">
-                          <IconButton size="xs" variant="ghost" onClick={() => navigateChange(1)}>
-                            <Icon name="arrow-down" size={14} />
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    </Show>
-                    <Tooltip value="Raw" placement="bottom">
-                      <IconButton
-                        size="xs"
-                        variant="ghost"
-                        classList={{
-                          "text-text": view === "raw",
-                          "text-text-muted/70": view !== "raw",
-                          "bg-background-element": view === "raw",
-                        }}
-                        onClick={() => local.file.setView(activeFile.path, "raw")}
-                      >
-                        <Icon name="file-text" size={14} />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip value="Unified diff" placement="bottom">
-                      <IconButton
-                        size="xs"
-                        variant="ghost"
-                        classList={{
-                          "text-text": view === "diff-unified",
-                          "text-text-muted/70": view !== "diff-unified",
-                          "bg-background-element": view === "diff-unified",
-                        }}
-                        onClick={() => local.file.setView(activeFile.path, "diff-unified")}
-                      >
-                        <Icon name="checklist" size={14} />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip value="Split diff" placement="bottom">
-                      <IconButton
-                        size="xs"
-                        variant="ghost"
-                        classList={{
-                          "text-text": view === "diff-split",
-                          "text-text-muted/70": view !== "diff-split",
-                          "bg-background-element": view === "diff-split",
-                        }}
-                        onClick={() => local.file.setView(activeFile.path, "diff-split")}
-                      >
-                        <Icon name="columns" size={14} />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
-                )
-              })()}
-            </Show>
-          </div>
-        </div>
-        <For each={local.file.opened()}>
-          {(file) => (
-            <Tabs.Content value={file.path} class="select-text">
-              {(() => {
-                const view = local.file.view(file.path)
-                const showRaw = view === "raw" || !file.content?.diff
-                const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "")
-                return <Code path={file.path} code={code} class="[&_code]:pb-60" />
-              })()}
-            </Tabs.Content>
-          )}
-        </For>
-      </Tabs>
-      <DragOverlay>
-        {(() => {
-          const id = activeItem()
-          if (!id) return null
-          const draggedFile = local.file.node(id)
-          if (!draggedFile) return null
-          return (
-            <div class="relative px-3 h-8 flex items-center text-sm font-medium text-text whitespace-nowrap shrink-0 bg-background-panel border-x border-border-subtle/40 border-b border-b-transparent">
-              <TabVisual file={draggedFile} />
-            </div>
-          )
-        })()}
-      </DragOverlay>
-    </DragDropProvider>
-  )
-}
-
-function TabVisual(props: { file: LocalFile }): JSX.Element {
-  return (
-    <div class="flex items-center gap-x-1.5">
-      <FileIcon node={props.file} class="" />
-      <span classList={{ "text-xs": true, "text-primary": !!props.file.status?.status, italic: !props.file.pinned }}>
-        {props.file.name}
-      </span>
-      <span class="text-xs opacity-70">
-        <Switch>
-          <Match when={props.file.status?.status === "modified"}>
-            <span class="text-primary">M</span>
-          </Match>
-          <Match when={props.file.status?.status === "added"}>
-            <span class="text-success">A</span>
-          </Match>
-          <Match when={props.file.status?.status === "deleted"}>
-            <span class="text-error">D</span>
-          </Match>
-        </Switch>
-      </span>
-    </div>
-  )
-}
-
-function SortableTab(props: {
-  file: LocalFile
-  onTabClick: (file: LocalFile) => void
-  onTabClose: (file: LocalFile) => void
-}): JSX.Element {
-  const sortable = createSortable(props.file.path)
-
-  return (
-    // @ts-ignore
-    <div use:sortable classList={{ "opacity-0": sortable.isActiveDraggable }}>
-      <Tooltip value={props.file.path} placement="bottom">
-        <div class="relative">
-          <Tabs.Trigger value={props.file.path} class="peer/tab pr-7" onClick={() => props.onTabClick(props.file)}>
-            <TabVisual file={props.file} />
-          </Tabs.Trigger>
-          <IconButton
-            class="absolute right-1 top-1.5 opacity-0 text-text-muted/60 peer-data-[selected]/tab:opacity-100 peer-data-[selected]/tab:text-text peer-data-[selected]/tab:hover:bg-border-subtle hover:opacity-100 peer-hover/tab:opacity-100"
-            size="xs"
-            variant="ghost"
-            onClick={() => props.onTabClose(props.file)}
-          >
-            <Icon name="close" size={16} />
-          </IconButton>
-        </div>
-      </Tooltip>
-    </div>
-  )
-}
-
-function ConstrainDragYAxis(): JSX.Element {
-  const context = useDragDropContext()
-  if (!context) return <></>
-  const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
-  const transformer: Transformer = {
-    id: "constrain-y-axis",
-    order: 100,
-    callback: (transform) => ({ ...transform, y: 0 }),
-  }
-  onDragStart((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    addTransformer("draggables", id, transformer)
-  })
-  onDragEnd((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    removeTransformer("draggables", id, transformer.id)
-  })
-  return <></>
-}
-
-const getDraggableId = (event: unknown): string | undefined => {
-  if (typeof event !== "object" || event === null) return undefined
-  if (!("draggable" in event)) return undefined
-  const draggable = (event as { draggable?: { id?: unknown } }).draggable
-  if (!draggable) return undefined
-  return typeof draggable.id === "string" ? draggable.id : undefined
-}
@@ -1,5 +1,4 @@
-import { useLocal } from "@/context"
-import type { LocalFile } from "@/context/local"
+import { useLocal, type LocalFile } from "@/context/local"
 import { Tooltip } from "@opencode-ai/ui"
 import { Collapsible, FileIcon } from "@/ui"
 import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
@@ -19,7 +18,7 @@ export default function FileTree(props: {
    <Dynamic
      component={p.as ?? "div"}
      classList={{
-        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element cursor-pointer": true,
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element": true,
        "bg-background-element": local.file.active()?.path === p.node.path,
        [props.nodeClass ?? ""]: !!props.nodeClass,
      }}
@@ -83,7 +82,7 @@ export default function FileTree(props: {
                >
                  <Collapsible.Trigger>
                    <Node node={node}>
-                      <Collapsible.Arrow size={16} class="text-text-muted/60 ml-1" />
+                      <Collapsible.Arrow class="text-text-muted/60 ml-1" />
                      <FileIcon
                        node={node}
                        expanded={local.file.node(node.path).expanded}
@@ -1,4 +1,4 @@
-import { useMarked } from "@/context"
+import { useMarked } from "@/context/marked"
 import { createResource } from "solid-js"

 function strip(text: string): string {
@@ -16,7 +16,7 @@ export function Markdown(props: { text: string; class?: string }) {
  )
  return (
    <div
-      class={`min-w-0 max-w-full text-xs overflow-auto no-scrollbar prose ${props.class ?? ""}`}
+      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
      innerHTML={html()}
    />
  )
@@ -0,0 +1,48 @@
+import { Component, createMemo } from "solid-js"
+
+interface ProgressCircleProps {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export const ProgressCircle: Component<ProgressCircleProps> = (props) => {
+  // --- Set default values for props ---
+  const size = () => props.size || 16
+  const strokeWidth = () => props.strokeWidth || 3
+
+  // --- Constants for SVG calculation ---
+  const viewBoxSize = 16
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+
+  // --- Reactive Calculation for the progress offset ---
+  const offset = createMemo(() => {
+    const clampedPercentage = Math.max(0, Math.min(100, props.percentage || 0))
+    const progress = clampedPercentage / 100
+    return circumference() * (1 - progress)
+  })
+
+  return (
+    <svg
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      class="transform -rotate-90"
+    >
+      <circle cx={center} cy={center} r={radius()} class="stroke-border-weak-base" stroke-width={strokeWidth()} />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        class="stroke-border-active"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+        style={{ transition: "stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1)" }}
+      />
+    </svg>
+  )
+}
@@ -1,164 +0,0 @@
-import type { TextSelection } from "@/context/local"
-import { getFilename } from "@/utils"
-
-export interface PromptTextPart {
-  kind: "text"
-  value: string
-}
-
-export interface PromptAttachmentPart {
-  kind: "attachment"
-  token: string
-  display: string
-  path: string
-  selection?: TextSelection
-  origin: "context" | "active"
-}
-
-export interface PromptInterimPart {
-  kind: "interim"
-  value: string
-  leadingSpace: boolean
-}
-
-export type PromptContentPart = PromptTextPart | PromptAttachmentPart
-
-export type PromptDisplaySegment =
-  | { kind: "text"; value: string }
-  | { kind: "attachment"; part: PromptAttachmentPart; source: string }
-  | PromptInterimPart
-
-export interface AttachmentCandidate {
-  origin: "context" | "active"
-  path: string
-  selection?: TextSelection
-  display: string
-}
-
-export interface PromptSubmitValue {
-  text: string
-  parts: PromptContentPart[]
-}
-
-export const mentionPattern = /@([A-Za-z0-9_\-./]+)/g
-export const mentionTriggerPattern = /(^|\s)@([A-Za-z0-9_\-./]*)$/
-
-export type PromptSegment = (PromptTextPart | PromptAttachmentPart) & {
-  start: number
-  end: number
-}
-
-export type PromptAttachmentSegment = PromptAttachmentPart & {
-  start: number
-  end: number
-}
-
-function pushTextPart(parts: PromptContentPart[], value: string) {
-  if (!value) return
-  const last = parts[parts.length - 1]
-  if (last && last.kind === "text") {
-    last.value += value
-    return
-  }
-  parts.push({ kind: "text", value })
-}
-
-function addTextSegment(segments: PromptSegment[], start: number, value: string) {
-  if (!value) return
-  segments.push({ kind: "text", value, start, end: start + value.length })
-}
-
-export function createAttachmentDisplay(path: string, selection?: TextSelection) {
-  const base = getFilename(path)
-  if (!selection) return base
-  return `${base} (${selection.startLine}-${selection.endLine})`
-}
-
-export function registerCandidate(
-  map: Map<string, AttachmentCandidate>,
-  candidate: AttachmentCandidate,
-  tokens: (string | undefined)[],
-) {
-  for (const token of tokens) {
-    if (!token) continue
-    const normalized = token.toLowerCase()
-    if (map.has(normalized)) continue
-    map.set(normalized, candidate)
-  }
-}
-
-export function parsePrompt(value: string, lookup: Map<string, AttachmentCandidate>) {
-  const segments: PromptSegment[] = []
-  if (!value) return { parts: [] as PromptContentPart[], segments }
-
-  const pushTextRange = (rangeStart: number, rangeEnd: number) => {
-    if (rangeEnd <= rangeStart) return
-    const text = value.slice(rangeStart, rangeEnd)
-    let cursor = 0
-    for (const match of text.matchAll(mentionPattern)) {
-      const localIndex = match.index ?? 0
-      if (localIndex > cursor) {
-        addTextSegment(segments, rangeStart + cursor, text.slice(cursor, localIndex))
-      }
-      const token = match[1]
-      const candidate = lookup.get(token.toLowerCase())
-      if (candidate) {
-        const start = rangeStart + localIndex
-        const end = start + match[0].length
-        segments.push({
-          kind: "attachment",
-          token,
-          display: candidate.display,
-          path: candidate.path,
-          selection: candidate.selection,
-          origin: candidate.origin,
-          start,
-          end,
-        })
-      } else {
-        addTextSegment(segments, rangeStart + localIndex, match[0])
-      }
-      cursor = localIndex + match[0].length
-    }
-    if (cursor < text.length) {
-      addTextSegment(segments, rangeStart + cursor, text.slice(cursor))
-    }
-  }
-
-  pushTextRange(0, value.length)
-
-  const parts: PromptContentPart[] = []
-  for (const segment of segments) {
-    if (segment.kind === "text") {
-      pushTextPart(parts, segment.value)
-    } else {
-      const { start, end, ...attachment } = segment
-      parts.push(attachment as PromptAttachmentPart)
-    }
-  }
-  return { parts, segments }
-}
-
-export function composeDisplaySegments(
-  segments: PromptSegment[],
-  inputValue: string,
-  interim: string,
-): PromptDisplaySegment[] {
-  if (segments.length === 0 && !interim) return []
-
-  const display: PromptDisplaySegment[] = segments.map((segment) => {
-    if (segment.kind === "text") {
-      return { kind: "text", value: segment.value }
-    }
-    const { start, end, ...part } = segment
-    const placeholder = inputValue.slice(start, end)
-    return { kind: "attachment", part: part as PromptAttachmentPart, source: placeholder }
-  })
-
-  if (interim) {
-    const leadingSpace = !!(inputValue && !inputValue.endsWith(" ") && !interim.startsWith(" "))
-    display.push({ kind: "interim", value: interim, leadingSpace })
-  }
-
-  return display
-}
@@ -1,396 +0,0 @@
-import { createEffect, createMemo, createResource, type Accessor } from "solid-js"
-import type { SetStoreFunction } from "solid-js/store"
-import { getDirectory, getFilename } from "@/utils"
-import { createSpeechRecognition } from "@/utils/speech"
-import {
-  createAttachmentDisplay,
-  mentionPattern,
-  mentionTriggerPattern,
-  type PromptAttachmentPart,
-  type PromptAttachmentSegment,
-} from "./prompt-form-helpers"
-import type { LocalFile, TextSelection } from "@/context/local"
-
-export type MentionRange = {
-  start: number
-  end: number
-}
-
-export interface PromptFormState {
-  promptInput: string
-  isDragOver: boolean
-  mentionOpen: boolean
-  mentionQuery: string
-  mentionRange: MentionRange | undefined
-  mentionIndex: number
-  mentionAnchorOffset: { x: number; y: number }
-  inlineAliases: Map<string, PromptAttachmentPart>
-}
-
-interface MentionControllerOptions {
-  state: PromptFormState
-  setState: SetStoreFunction<PromptFormState>
-  attachmentSegments: Accessor<PromptAttachmentSegment[]>
-  getInputRef: () => HTMLTextAreaElement | undefined
-  getOverlayRef: () => HTMLDivElement | undefined
-  getMeasureRef: () => HTMLDivElement | undefined
-  searchFiles: (query: string) => Promise<string[]>
-  resolveFile: (path: string) => LocalFile | undefined
-  addContextFile: (path: string, selection?: TextSelection) => void
-  getActiveContext: () => { path: string; selection?: TextSelection } | undefined
-}
-
-interface MentionKeyDownOptions {
-  event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }
-  mentionItems: () => string[]
-  insertMention: (path: string) => void
-}
-
-interface ScrollSyncOptions {
-  state: PromptFormState
-  getInputRef: () => HTMLTextAreaElement | undefined
-  getOverlayRef: () => HTMLDivElement | undefined
-  interim: Accessor<string>
-  updateMentionPosition: (element: HTMLTextAreaElement, range?: MentionRange) => void
-}
-
-export function usePromptSpeech(updatePromptInput: (updater: (prev: string) => string) => void) {
-  return createSpeechRecognition({
-    onFinal: (text) => updatePromptInput((prev) => (prev && !prev.endsWith(" ") ? `${prev} ` : prev) + text),
-  })
-}
-
-export function useMentionController(options: MentionControllerOptions) {
-  const mentionSource = createMemo(() => (options.state.mentionOpen ? options.state.mentionQuery : undefined))
-  const [mentionResults, { mutate: mutateMentionResults }] = createResource(mentionSource, (query) => {
-    if (!options.state.mentionOpen) return []
-    return options.searchFiles(query ?? "")
-  })
-  const mentionItems = createMemo(() => mentionResults() ?? [])
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    options.state.mentionQuery
-    options.setState("mentionIndex", 0)
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      if (!input) return
-      if (document.activeElement === input) return
-      input.focus()
-    })
-  })
-
-  createEffect(() => {
-    const used = new Set<string>()
-    for (const match of options.state.promptInput.matchAll(mentionPattern)) {
-      const token = match[1]
-      if (token) used.add(token.toLowerCase())
-    }
-    options.setState("inlineAliases", (prev) => {
-      if (prev.size === 0) return prev
-      const next = new Map(prev)
-      let changed = false
-      for (const key of prev.keys()) {
-        if (!used.has(key.toLowerCase())) {
-          next.delete(key)
-          changed = true
-        }
-      }
-      return changed ? next : prev
-    })
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    const items = mentionItems()
-    if (items.length === 0) {
-      options.setState("mentionIndex", 0)
-      return
-    }
-    if (options.state.mentionIndex < items.length) return
-    options.setState("mentionIndex", items.length - 1)
-  })
-
-  createEffect(() => {
-    if (!options.state.mentionOpen) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) return
-    options.state.promptInput
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      if (!input) return
-      updateMentionPosition(input, rangeValue)
-    })
-  })
-
-  function closeMention() {
-    if (options.state.mentionOpen) options.setState("mentionOpen", false)
-    options.setState("mentionQuery", "")
-    options.setState("mentionRange", undefined)
-    options.setState("mentionIndex", 0)
-    mutateMentionResults(() => undefined)
-    options.setState("mentionAnchorOffset", { x: 0, y: 0 })
-  }
-
-  function updateMentionPosition(element: HTMLTextAreaElement, rangeValue = options.state.mentionRange) {
-    const measure = options.getMeasureRef()
-    if (!measure) return
-    if (!rangeValue) return
-    measure.style.width = `${element.clientWidth}px`
-    const measurement = element.value.slice(0, rangeValue.end)
-    measure.textContent = measurement
-    const caretSpan = document.createElement("span")
-    caretSpan.textContent = "\u200b"
-    measure.append(caretSpan)
-    const caretRect = caretSpan.getBoundingClientRect()
-    const containerRect = measure.getBoundingClientRect()
-    measure.removeChild(caretSpan)
-    const left = caretRect.left - containerRect.left
-    const top = caretRect.top - containerRect.top - element.scrollTop
-    options.setState("mentionAnchorOffset", { x: left, y: top < 0 ? 0 : top })
-  }
-
-  function isValidMentionQuery(value: string) {
-    return /^[A-Za-z0-9_\-./]*$/.test(value)
-  }
-
-  function syncMentionFromCaret(element: HTMLTextAreaElement) {
-    if (!options.state.mentionOpen) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) {
-      closeMention()
-      return
-    }
-    const caret = element.selectionEnd ?? element.selectionStart ?? element.value.length
-    if (rangeValue.start < 0 || rangeValue.start >= element.value.length) {
-      closeMention()
-      return
-    }
-    if (element.value[rangeValue.start] !== "@") {
-      closeMention()
-      return
-    }
-    if (caret <= rangeValue.start) {
-      closeMention()
-      return
-    }
-    const mentionValue = element.value.slice(rangeValue.start + 1, caret)
-    if (!isValidMentionQuery(mentionValue)) {
-      closeMention()
-      return
-    }
-    options.setState("mentionRange", { start: rangeValue.start, end: caret })
-    options.setState("mentionQuery", mentionValue)
-    updateMentionPosition(element, { start: rangeValue.start, end: caret })
-  }
-
-  function tryOpenMentionFromCaret(element: HTMLTextAreaElement) {
-    const selectionStart = element.selectionStart ?? element.value.length
-    const selectionEnd = element.selectionEnd ?? selectionStart
-    if (selectionStart !== selectionEnd) return false
-    const caret = selectionEnd
-    if (options.attachmentSegments().some((segment) => caret >= segment.start && caret <= segment.end)) {
-      return false
-    }
-    const before = element.value.slice(0, caret)
-    const match = before.match(mentionTriggerPattern)
-    if (!match) return false
-    const token = match[2] ?? ""
-    const start = caret - token.length - 1
-    if (start < 0) return false
-    options.setState("mentionOpen", true)
-    options.setState("mentionRange", { start, end: caret })
-    options.setState("mentionQuery", token)
-    options.setState("mentionIndex", 0)
-    queueMicrotask(() => {
-      updateMentionPosition(element, { start, end: caret })
-    })
-    return true
-  }
-
-  function handlePromptInput(event: InputEvent & { currentTarget: HTMLTextAreaElement }) {
-    const element = event.currentTarget
-    options.setState("promptInput", element.value)
-    if (options.state.mentionOpen) {
-      syncMentionFromCaret(element)
-      if (options.state.mentionOpen) return
-    }
-    const isDeletion = event.inputType ? event.inputType.startsWith("delete") : false
-    if (!isDeletion && tryOpenMentionFromCaret(element)) return
-    closeMention()
-  }
-
-  function handleMentionKeyDown({ event, mentionItems: items, insertMention }: MentionKeyDownOptions) {
-    if (!options.state.mentionOpen) return false
-    const list = items()
-    if (event.key === "ArrowDown") {
-      event.preventDefault()
-      if (list.length === 0) return true
-      const next = options.state.mentionIndex + 1 >= list.length ? 0 : options.state.mentionIndex + 1
-      options.setState("mentionIndex", next)
-      return true
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault()
-      if (list.length === 0) return true
-      const previous = options.state.mentionIndex - 1 < 0 ? list.length - 1 : options.state.mentionIndex - 1
-      options.setState("mentionIndex", previous)
-      return true
-    }
-    if (event.key === "Enter") {
-      event.preventDefault()
-      const targetItem = list[options.state.mentionIndex] ?? list[0]
-      if (targetItem) insertMention(targetItem)
-      return true
-    }
-    if (event.key === "Escape") {
-      event.preventDefault()
-      closeMention()
-      return true
-    }
-    return false
-  }
-
-  function generateMentionAlias(path: string) {
-    const existing = new Set<string>()
-    for (const key of options.state.inlineAliases.keys()) {
-      existing.add(key.toLowerCase())
-    }
-    for (const match of options.state.promptInput.matchAll(mentionPattern)) {
-      const token = match[1]
-      if (token) existing.add(token.toLowerCase())
-    }
-
-    const base = getFilename(path)
-    if (base) {
-      if (!existing.has(base.toLowerCase())) return base
-    }
-
-    const directory = getDirectory(path)
-    if (base && directory) {
-      const segments = directory.split("/").filter(Boolean)
-      for (let i = segments.length - 1; i >= 0; i -= 1) {
-        const candidate = `${segments.slice(i).join("/")}/${base}`
-        if (!existing.has(candidate.toLowerCase())) return candidate
-      }
-    }
-
-    if (!existing.has(path.toLowerCase())) return path
-
-    const fallback = base || path || "file"
-    let index = 2
-    let candidate = `${fallback}-${index}`
-    while (existing.has(candidate.toLowerCase())) {
-      index += 1
-      candidate = `${fallback}-${index}`
-    }
-    return candidate
-  }
-
-  function insertMention(path: string) {
-    const input = options.getInputRef()
-    if (!input) return
-    const rangeValue = options.state.mentionRange
-    if (!rangeValue) return
-    const node = options.resolveFile(path)
-    const alias = generateMentionAlias(path)
-    const mentionText = `@${alias}`
-    const value = options.state.promptInput
-    const before = value.slice(0, rangeValue.start)
-    const after = value.slice(rangeValue.end)
-    const needsLeadingSpace = before.length > 0 && !/\s$/.test(before)
-    const needsTrailingSpace = after.length > 0 && !/^\s/.test(after)
-    const leading = needsLeadingSpace ? `${before} ` : before
-    const trailingSpacer = needsTrailingSpace ? " " : ""
-    const nextValue = `${leading}${mentionText}${trailingSpacer}${after}`
-    const origin = options.getActiveContext()?.path === path ? "active" : "context"
-    const part: PromptAttachmentPart = {
-      kind: "attachment",
-      token: alias,
-      display: createAttachmentDisplay(path, node?.selection),
-      path,
-      selection: node?.selection,
-      origin,
-    }
-    options.setState("promptInput", nextValue)
-    if (input.value !== nextValue) {
-      input.value = nextValue
-    }
-    options.setState("inlineAliases", (prev) => {
-      const next = new Map(prev)
-      next.set(alias, part)
-      return next
-    })
-    options.addContextFile(path, node?.selection)
-    closeMention()
-    queueMicrotask(() => {
-      const caret = leading.length + mentionText.length + trailingSpacer.length
-      input.setSelectionRange(caret, caret)
-      syncMentionFromCaret(input)
-    })
-  }
-
-  return {
-    mentionResults,
-    mentionItems,
-    closeMention,
-    syncMentionFromCaret,
-    tryOpenMentionFromCaret,
-    updateMentionPosition,
-    handlePromptInput,
-    handleMentionKeyDown,
-    insertMention,
-  }
-}
-
-export function usePromptScrollSync(options: ScrollSyncOptions) {
-  let shouldAutoScroll = true
-
-  createEffect(() => {
-    options.state.promptInput
-    options.interim()
-    queueMicrotask(() => {
-      const input = options.getInputRef()
-      const overlay = options.getOverlayRef()
-      if (!input || !overlay) return
-      if (!shouldAutoScroll) {
-        overlay.scrollTop = input.scrollTop
-        if (options.state.mentionOpen) options.updateMentionPosition(input)
-        return
-      }
-      const maxInputScroll = input.scrollHeight - input.clientHeight
-      const next = maxInputScroll > 0 ? maxInputScroll : 0
-      input.scrollTop = next
-      overlay.scrollTop = next
-      if (options.state.mentionOpen) options.updateMentionPosition(input)
-    })
-  })
-
-  function handlePromptScroll(event: Event & { currentTarget: HTMLTextAreaElement }) {
-    const target = event.currentTarget
-    shouldAutoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 4
-    const overlay = options.getOverlayRef()
-    if (overlay) overlay.scrollTop = target.scrollTop
-    if (options.state.mentionOpen) options.updateMentionPosition(target)
-  }
-
-  function resetScrollPosition() {
-    shouldAutoScroll = true
-    const input = options.getInputRef()
-    const overlay = options.getOverlayRef()
-    if (input) input.scrollTop = 0
-    if (overlay) overlay.scrollTop = 0
-  }
-
-  return {
-    handlePromptScroll,
-    resetScrollPosition,
-    setAutoScroll: (value: boolean) => {
-      shouldAutoScroll = value
-    },
-  }
-}
@@ -1,581 +0,0 @@
-import { For, Show, createMemo, onCleanup, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Popover } from "@kobalte/core/popover"
-import { Tooltip, Button, Icon, Select } from "@opencode-ai/ui"
-import { FileIcon, IconButton } from "@/ui"
-import { useLocal } from "@/context"
-import type { FileContext, LocalFile } from "@/context/local"
-import { getDirectory, getFilename } from "@/utils"
-import { composeDisplaySegments, createAttachmentDisplay, parsePrompt, registerCandidate } from "./prompt-form-helpers"
-import type {
-  AttachmentCandidate,
-  PromptAttachmentPart,
-  PromptAttachmentSegment,
-  PromptDisplaySegment,
-  PromptSubmitValue,
-} from "./prompt-form-helpers"
-import { useMentionController, usePromptScrollSync, usePromptSpeech, type PromptFormState } from "./prompt-form-hooks"
-
-interface PromptFormProps {
-  class?: string
-  classList?: Record<string, boolean>
-  onSubmit: (prompt: PromptSubmitValue) => Promise<void> | void
-  onOpenModelSelect: () => void
-  onInputRefChange?: (element: HTMLTextAreaElement | undefined) => void
-}
-
-export default function PromptForm(props: PromptFormProps) {
-  const local = useLocal()
-
-  const [state, setState] = createStore<PromptFormState>({
-    promptInput: "",
-    isDragOver: false,
-    mentionOpen: false,
-    mentionQuery: "",
-    mentionRange: undefined,
-    mentionIndex: 0,
-    mentionAnchorOffset: { x: 0, y: 0 },
-    inlineAliases: new Map<string, PromptAttachmentPart>(),
-  })
-
-  const placeholderText = "Start typing or speaking..."
-
-  const {
-    isSupported,
-    isRecording,
-    interim: interimTranscript,
-    start: startSpeech,
-    stop: stopSpeech,
-  } = usePromptSpeech((updater) => setState("promptInput", updater))
-
-  let inputRef: HTMLTextAreaElement | undefined = undefined
-  let overlayContainerRef: HTMLDivElement | undefined = undefined
-  let mentionMeasureRef: HTMLDivElement | undefined = undefined
-
-  const attachmentLookup = createMemo(() => {
-    const map = new Map<string, AttachmentCandidate>()
-    const activeFile = local.context.active()
-    if (activeFile) {
-      registerCandidate(
-        map,
-        {
-          origin: "active",
-          path: activeFile.path,
-          selection: activeFile.selection,
-          display: createAttachmentDisplay(activeFile.path, activeFile.selection),
-        },
-        [activeFile.path, getFilename(activeFile.path)],
-      )
-    }
-    for (const item of local.context.all()) {
-      registerCandidate(
-        map,
-        {
-          origin: "context",
-          path: item.path,
-          selection: item.selection,
-          display: createAttachmentDisplay(item.path, item.selection),
-        },
-        [item.path, getFilename(item.path)],
-      )
-    }
-    for (const [alias, part] of state.inlineAliases) {
-      registerCandidate(
-        map,
-        {
-          origin: part.origin,
-          path: part.path,
-          selection: part.selection,
-          display: part.display ?? createAttachmentDisplay(part.path, part.selection),
-        },
-        [alias],
-      )
-    }
-    return map
-  })
-
-  const parsedPrompt = createMemo(() => parsePrompt(state.promptInput, attachmentLookup()))
-  const baseParts = createMemo(() => parsedPrompt().parts)
-  const attachmentSegments = createMemo<PromptAttachmentSegment[]>(() =>
-    parsedPrompt().segments.filter((segment): segment is PromptAttachmentSegment => segment.kind === "attachment"),
-  )
-
-  const {
-    mentionResults,
-    mentionItems,
-    closeMention,
-    syncMentionFromCaret,
-    updateMentionPosition,
-    handlePromptInput,
-    handleMentionKeyDown,
-    insertMention,
-  } = useMentionController({
-    state,
-    setState,
-    attachmentSegments,
-    getInputRef: () => inputRef,
-    getOverlayRef: () => overlayContainerRef,
-    getMeasureRef: () => mentionMeasureRef,
-    searchFiles: (query) => local.file.search(query),
-    resolveFile: (path) => local.file.node(path) ?? undefined,
-    addContextFile: (path, selection) =>
-      local.context.add({
-        type: "file",
-        path,
-        selection,
-      }),
-    getActiveContext: () => local.context.active() ?? undefined,
-  })
-
-  const { handlePromptScroll, resetScrollPosition } = usePromptScrollSync({
-    state,
-    getInputRef: () => inputRef,
-    getOverlayRef: () => overlayContainerRef,
-    interim: () => (isRecording() ? interimTranscript() : ""),
-    updateMentionPosition,
-  })
-
-  const displaySegments = createMemo<PromptDisplaySegment[]>(() => {
-    const value = state.promptInput
-    const segments = parsedPrompt().segments
-    const interim = isRecording() ? interimTranscript() : ""
-    return composeDisplaySegments(segments, value, interim)
-  })
-
-  const hasDisplaySegments = createMemo(() => displaySegments().length > 0)
-
-  function handleAttachmentNavigation(
-    event: KeyboardEvent & { currentTarget: HTMLTextAreaElement },
-    direction: "left" | "right",
-  ) {
-    const element = event.currentTarget
-    const caret = element.selectionStart ?? 0
-    const segments = attachmentSegments()
-    if (direction === "left") {
-      let match = segments.find((segment) => caret > segment.start && caret <= segment.end)
-      if (!match && element.selectionStart !== element.selectionEnd) {
-        match = segments.find(
-          (segment) => element.selectionStart === segment.start && element.selectionEnd === segment.end,
-        )
-      }
-      if (!match) return false
-      event.preventDefault()
-      if (element.selectionStart === match.start && element.selectionEnd === match.end) {
-        const next = Math.max(0, match.start)
-        element.setSelectionRange(next, next)
-        syncMentionFromCaret(element)
-        return true
-      }
-      element.setSelectionRange(match.start, match.end)
-      syncMentionFromCaret(element)
-      return true
-    }
-    if (direction === "right") {
-      let match = segments.find((segment) => caret >= segment.start && caret < segment.end)
-      if (!match && element.selectionStart !== element.selectionEnd) {
-        match = segments.find(
-          (segment) => element.selectionStart === segment.start && element.selectionEnd === segment.end,
-        )
-      }
-      if (!match) return false
-      event.preventDefault()
-      if (element.selectionStart === match.start && element.selectionEnd === match.end) {
-        const next = match.end
-        element.setSelectionRange(next, next)
-        syncMentionFromCaret(element)
-        return true
-      }
-      element.setSelectionRange(match.start, match.end)
-      syncMentionFromCaret(element)
-      return true
-    }
-    return false
-  }
-
-  function renderAttachmentChip(part: PromptAttachmentPart, _placeholder: string) {
-    const display = part.display ?? createAttachmentDisplay(part.path, part.selection)
-    return <span class="truncate max-w-[16ch] text-primary">@{display}</span>
-  }
-
-  function renderTextSegment(value: string) {
-    if (!value) return undefined
-    return <span class="text-text">{value}</span>
-  }
-
-  function handlePromptKeyDown(event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
-    if (event.isComposing) return
-    const target = event.currentTarget
-    const key = event.key
-
-    const handled = handleMentionKeyDown({
-      event,
-      mentionItems,
-      insertMention,
-    })
-    if (handled) return
-
-    if (!state.mentionOpen) {
-      if (key === "ArrowLeft") {
-        if (handleAttachmentNavigation(event, "left")) return
-      }
-      if (key === "ArrowRight") {
-        if (handleAttachmentNavigation(event, "right")) return
-      }
-    }
-
-    if (key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End") {
-      queueMicrotask(() => {
-        syncMentionFromCaret(target)
-      })
-    }
-
-    if (key === "Enter" && !event.shiftKey) {
-      event.preventDefault()
-      target.form?.requestSubmit()
-    }
-  }
-
-  const handleSubmit = async (event: SubmitEvent) => {
-    event.preventDefault()
-    const parts = baseParts()
-    const text = parts
-      .map((part) => {
-        if (part.kind === "text") return part.value
-        return `@${part.path}`
-      })
-      .join("")
-
-    const currentPrompt: PromptSubmitValue = {
-      text,
-      parts,
-    }
-    setState("promptInput", "")
-    resetScrollPosition()
-    if (inputRef) {
-      inputRef.blur()
-    }
-
-    await props.onSubmit(currentPrompt)
-  }
-
-  onCleanup(() => {
-    props.onInputRefChange?.(undefined)
-  })
-
-  return (
-    <form onSubmit={handleSubmit} class={props.class} classList={props.classList}>
-      <div
-        class="w-full min-w-0 p-2 mx-auto rounded-lg isolate backdrop-blur-xs
-               flex flex-col gap-1 bg-gradient-to-b from-background-panel/90 to-background/90
-               ring-1 ring-border-active/50 border border-transparent
-               focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
-               transition-all duration-200"
-        classList={{
-          "shadow-[0_0_33px_rgba(0,0,0,0.8)]": !!local.file.active(),
-          "ring-2 ring-primary/60 bg-primary/5": state.isDragOver,
-        }}
-        onDragEnter={(event) => {
-          const evt = event as unknown as globalThis.DragEvent
-          if (evt.dataTransfer?.types.includes("text/plain")) {
-            evt.preventDefault()
-            setState("isDragOver", true)
-          }
-        }}
-        onDragLeave={(event) => {
-          if (event.currentTarget === event.target) {
-            setState("isDragOver", false)
-          }
-        }}
-        onDragOver={(event) => {
-          const evt = event as unknown as globalThis.DragEvent
-          if (evt.dataTransfer?.types.includes("text/plain")) {
-            evt.preventDefault()
-            evt.dataTransfer.dropEffect = "copy"
-          }
-        }}
-        onDrop={(event) => {
-          const evt = event as unknown as globalThis.DragEvent
-          evt.preventDefault()
-          setState("isDragOver", false)
-
-          const data = evt.dataTransfer?.getData("text/plain")
-          if (data && data.startsWith("file:")) {
-            const filePath = data.slice(5)
-            const fileNode = local.file.node(filePath)
-            if (fileNode) {
-              local.context.add({
-                type: "file",
-                path: filePath,
-              })
-            }
-          }
-        }}
-      >
-        <Show when={local.context.all().length > 0 || local.context.active()}>
-          <div class="flex flex-wrap gap-1">
-            <Show when={local.context.active()}>
-              <ActiveTabContextTag file={local.context.active()!} onClose={() => local.context.removeActive()} />
-            </Show>
-            <For each={local.context.all()}>
-              {(file) => <FileTag file={file} onClose={() => local.context.remove(file.key)} />}
-            </For>
-          </div>
-        </Show>
-        <div class="relative">
-          <textarea
-            ref={(element) => {
-              inputRef = element ?? undefined
-              props.onInputRefChange?.(inputRef)
-            }}
-            value={state.promptInput}
-            onInput={handlePromptInput}
-            onKeyDown={handlePromptKeyDown}
-            onClick={(event) =>
-              queueMicrotask(() => {
-                syncMentionFromCaret(event.currentTarget)
-              })
-            }
-            onSelect={(event) =>
-              queueMicrotask(() => {
-                syncMentionFromCaret(event.currentTarget)
-              })
-            }
-            onBlur={(event) => {
-              const next = event.relatedTarget as HTMLElement | null
-              if (next && next.closest('[data-mention-popover="true"]')) return
-              closeMention()
-            }}
-            onScroll={handlePromptScroll}
-            placeholder={placeholderText}
-            autocapitalize="off"
-            autocomplete="off"
-            autocorrect="off"
-            spellcheck={false}
-            class="relative w-full h-20 rounded-md px-0.5 resize-none overflow-y-auto
-                   bg-transparent text-transparent caret-text font-light text-base
-                   leading-relaxed focus:outline-none selection:bg-primary/20"
-          ></textarea>
-          <div
-            ref={(element) => {
-              overlayContainerRef = element ?? undefined
-            }}
-            class="pointer-events-none absolute inset-0 overflow-hidden"
-          >
-            <PromptDisplayOverlay
-              hasDisplaySegments={hasDisplaySegments()}
-              displaySegments={displaySegments()}
-              placeholder={placeholderText}
-              renderAttachmentChip={renderAttachmentChip}
-              renderTextSegment={renderTextSegment}
-            />
-          </div>
-          <div
-            ref={(element) => {
-              mentionMeasureRef = element ?? undefined
-            }}
-            class="pointer-events-none invisible absolute inset-0 whitespace-pre-wrap text-base font-light leading-relaxed px-0.5"
-            aria-hidden="true"
-          ></div>
-          <MentionSuggestions
-            open={state.mentionOpen}
-            anchor={state.mentionAnchorOffset}
-            loading={mentionResults.loading}
-            items={mentionItems()}
-            activeIndex={state.mentionIndex}
-            onHover={(index) => setState("mentionIndex", index)}
-            onSelect={insertMention}
-          />
-        </div>
-        <div class="flex justify-between items-center text-xs text-text-muted">
-          <div class="flex gap-2 items-center">
-            <Select
-              options={local.agent.list().map((agent) => agent.name)}
-              current={local.agent.current().name}
-              onSelect={local.agent.set}
-              class="uppercase"
-            />
-            <Button onClick={() => props.onOpenModelSelect()}>
-              {local.model.current()?.name ?? "Select model"}
-              <Icon name="chevron-down" size={24} class="text-text-muted" />
-            </Button>
-            <span class="text-text-muted/70 whitespace-nowrap">{local.model.current()?.provider.name}</span>
-          </div>
-          <div class="flex gap-1 items-center">
-            <Show when={isSupported()}>
-              <Tooltip value={isRecording() ? "Stop voice input" : "Start voice input"} placement="top">
-                <IconButton
-                  onClick={async (event: MouseEvent) => {
-                    event.preventDefault()
-                    if (isRecording()) {
-                      stopSpeech()
-                    } else {
-                      startSpeech()
-                    }
-                    inputRef?.focus()
-                  }}
-                  classList={{
-                    "text-text-muted": !isRecording(),
-                    "text-error! animate-pulse": isRecording(),
-                  }}
-                  size="xs"
-                  variant="ghost"
-                >
-                  <Icon name="mic" size={16} />
-                </IconButton>
-              </Tooltip>
-            </Show>
-            <IconButton class="text-text-muted" size="xs" variant="ghost">
-              <Icon name="photo" size={16} />
-            </IconButton>
-            <IconButton
-              class="text-background-panel! bg-primary rounded-full! hover:bg-primary/90 ml-0.5"
-              size="xs"
-              variant="ghost"
-              type="submit"
-            >
-              <Icon name="arrow-up" size={14} />
-            </IconButton>
-          </div>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-const ActiveTabContextTag = (props: { file: LocalFile; onClose: () => void }) => (
-  <div
-    class="flex items-center bg-background group/tag
-           border border-border-subtle/60 border-dashed
-           rounded-md text-xs text-text-muted"
-  >
-    <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}>
-      <Icon name="file" class="group-hover/tag:hidden" size={12} />
-      <Icon name="close" class="hidden group-hover/tag:block" size={12} />
-    </IconButton>
-    <div class="pr-1 flex gap-1 items-center">
-      <span>{getFilename(props.file.path)}</span>
-    </div>
-  </div>
-)
-
-const FileTag = (props: { file: FileContext; onClose: () => void }) => (
-  <div
-    class="flex items-center bg-background group/tag
-           border border-border-subtle/60
-           rounded-md text-xs text-text-muted"
-  >
-    <IconButton class="text-text-muted" size="xs" variant="ghost" onClick={props.onClose}>
-      <FileIcon node={props.file} class="group-hover/tag:hidden size-3!" />
-      <Icon name="close" class="hidden group-hover/tag:block" size={12} />
-    </IconButton>
-    <div class="pr-1 flex gap-1 items-center">
-      <span>{getFilename(props.file.path)}</span>
-      <Show when={props.file.selection}>
-        <span>
-          ({props.file.selection!.startLine}-{props.file.selection!.endLine})
-        </span>
-      </Show>
-    </div>
-  </div>
-)
-
-function PromptDisplayOverlay(props: {
-  hasDisplaySegments: boolean
-  displaySegments: PromptDisplaySegment[]
-  placeholder: string
-  renderAttachmentChip: (part: PromptAttachmentPart, placeholder: string) => JSX.Element
-  renderTextSegment: (value: string) => JSX.Element | undefined
-}) {
-  return (
-    <div class="px-0.5 text-base font-light leading-relaxed whitespace-pre-wrap text-left">
-      <Show when={props.hasDisplaySegments} fallback={<span class="text-text-muted/70">{props.placeholder}</span>}>
-        <For each={props.displaySegments}>
-          {(segment) => {
-            if (segment.kind === "text") {
-              return props.renderTextSegment(segment.value)
-            }
-            if (segment.kind === "attachment") {
-              return props.renderAttachmentChip(segment.part, segment.source)
-            }
-            return (
-              <span class="text-text-muted/60 italic">
-                {segment.leadingSpace ? ` ${segment.value}` : segment.value}
-              </span>
-            )
-          }}
-        </For>
-      </Show>
-    </div>
-  )
-}
-
-function MentionSuggestions(props: {
-  open: boolean
-  anchor: { x: number; y: number }
-  loading: boolean
-  items: string[]
-  activeIndex: number
-  onHover: (index: number) => void
-  onSelect: (path: string) => void
-}) {
-  return (
-    <Popover open={props.open} modal={false} gutter={8} placement="bottom-start">
-      <Popover.Trigger class="hidden" />
-      <Popover.Anchor
-        class="pointer-events-none absolute top-0 left-0 w-0 h-0"
-        style={{ transform: `translate(${props.anchor.x}px, ${props.anchor.y}px)` }}
-      />
-      <Popover.Portal>
-        <Popover.Content
-          data-mention-popover="true"
-          class="z-50 w-72 max-h-60 overflow-y-auto rounded-md border border-border-subtle/40 bg-background-panel shadow-[0_10px_30px_rgba(0,0,0,0.35)] focus:outline-none"
-        >
-          <div class="py-1">
-            <Show when={props.loading}>
-              <div class="flex items-center gap-2 px-3 py-2 text-xs text-text-muted">
-                <Icon name="refresh" size={12} class="animate-spin" />
-                <span>Searching…</span>
-              </div>
-            </Show>
-            <Show when={!props.loading && props.items.length === 0}>
-              <div class="px-3 py-2 text-xs text-text-muted/80">No matching files</div>
-            </Show>
-            <For each={props.items}>
-              {(path, indexAccessor) => {
-                const index = indexAccessor()
-                const dir = getDirectory(path)
-                return (
-                  <button
-                    type="button"
-                    onMouseDown={(event) => event.preventDefault()}
-                    onMouseEnter={() => props.onHover(index)}
-                    onClick={() => props.onSelect(path)}
-                    class="w-full px-3 py-2 flex items-center gap-2 rounded-md text-left text-xs transition-colors"
-                    classList={{
-                      "bg-background-element text-text": index === props.activeIndex,
-                      "text-text-muted": index !== props.activeIndex,
-                    }}
-                  >
-                    <FileIcon node={{ path, type: "file" }} class="size-3 shrink-0" />
-                    <div class="flex flex-col min-w-0">
-                      <span class="truncate">{getFilename(path)}</span>
-                      {dir && <span class="truncate text-text-muted/70">{dir}</span>}
-                    </div>
-                  </button>
-                )
-              }}
-            </For>
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover>
-  )
-}
-
-export type {
-  PromptAttachmentPart,
-  PromptAttachmentSegment,
-  PromptContentPart,
-  PromptDisplaySegment,
-  PromptSubmitValue,
-} from "./prompt-form-helpers"
@@ -1,63 +1,88 @@
-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
 }

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

-export type ContentPart = TextPart | AttachmentPart
-
-export interface AttachmentToAdd {
-  id: string
-  name: string
+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 [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 })
+  }
+
+  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) })
+      setStore("popoverIsOpen", false)
+    },
+  })

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

@@ -70,14 +95,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 +115,23 @@ 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[] = []
    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),
-        })
+      } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type) {
+        switch ((node as HTMLElement).dataset.type) {
+          case "file":
+            newParts.push({
+              type: "file",
+              path: (node as HTMLElement).dataset.path!,
+              content: node.textContent!,
+            })
+            break
+          default:
+            break
+        }
      }
    })
    if (newParts.length === 0) newParts.push(...defaultParts)
@@ -120,96 +140,249 @@ 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[] }, 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,
+        }
+        return
+      }
+      acc.parts.push({ type: "text", content: value })
+    }

-    // 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)
+          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)
+          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)
+          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)

-    // 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)
+        }
+        if (part.type !== "text") {
+          acc.parts.push({ ...part })
+        }

-  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)
+
+        const baseCursor = startIndex + part.content.length
+        const cursorAddition = needsGap && rest.length > 0 ? 1 : 0
+        acc.cursorPositionAfter = baseCursor + cursorAddition
+
+        acc.inserted = true
+        acc.runningIndex = nextIndex
+        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 appendedAcc = { parts: [...baseParts] as ContentPart[] }
+      if (part.type === "text") pushText(appendedAcc, part.content)
+      if (part.type !== "text") appendedAcc.parts.push({ ...part })
+      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 +396,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 +414,48 @@ function getCursorPosition(parent: HTMLElement): number {
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  const sanitizer = createMemo(() => new RegExp(`${store.path.directory}/`, "g"))
-  const sanitize = (text: string) => text.replace(sanitizer(), "")
-  const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
+    const sanitizer = createMemo(() => new RegExp(`${store.path.directory}/`, "g"))
+    const sanitize = (text: string) => text.replace(sanitizer(), "")
+    const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")

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

+const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
+const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
+
+const url = new URLSearchParams(document.location.search).get("url") || `http://${host}:${port}`
+
 const root = document.getElementById("root")
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
@@ -18,19 +27,17 @@ render(
  () => (
    <ShikiProvider>
      <MarkedProvider>
-        <SDKProvider>
-          <EventProvider>
-            <SyncProvider>
-              <LocalProvider>
-                <MetaProvider>
-                  <Fonts />
-                  <Router>
-                    <Route path="/" component={Home} />
-                  </Router>
-                </MetaProvider>
-              </LocalProvider>
-            </SyncProvider>
-          </EventProvider>
+        <SDKProvider url={url}>
+          <SyncProvider>
+            <LocalProvider>
+              <MetaProvider>
+                <Fonts />
+                <Router>
+                  <Route path="/" component={Home} />
+                </Router>
+              </MetaProvider>
+            </LocalProvider>
+          </SyncProvider>
        </SDKProvider>
      </MarkedProvider>
    </ShikiProvider>
@@ -1,17 +1,27 @@
-import { Icon, Tooltip } from "@opencode-ai/ui"
-import { FileIcon, IconButton } from "@/ui"
+import { Button, List, SelectDialog, Tooltip, IconButton, Tabs, Icon, Accordion } 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, type TextSelection } 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 { Diff } from "@/components/diff"

 export default function Page() {
  const local = useLocal()
@@ -19,11 +29,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 +55,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 +66,7 @@ export default function Page() {
    const focused = document.activeElement === inputRef
    if (focused) {
      if (event.key === "Escape") {
-        // inputRef?.blur()
+        inputRef?.blur()
      }
      return
    }
@@ -77,7 +93,7 @@ export default function Page() {
    }

    if (event.key.length === 1 && event.key !== "Unidentified") {
-      // inputRef?.focus()
+      inputRef?.focus()
    }
  }

@@ -104,17 +120,67 @@ 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
@@ -134,6 +200,7 @@ export default function Page() {

    const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))

+    const text = parts.map((part) => part.content).join("")
    const attachments = new Map<string, SubmissionAttachment>()

    const registerAttachment = (path: string, selection: TextSelection | undefined, label?: string) => {
@@ -147,30 +214,27 @@ export default function Page() {
      })
    }

-    const promptAttachments = prompt.parts.filter(
-      (part): part is Extract<PromptContentPart, { kind: "attachment" }> => part.kind === "attachment",
-    )
-
+    const promptAttachments = parts.filter((part) => part.type === "file")
    for (const part of promptAttachments) {
-      registerAttachment(part.path, part.selection, part.display)
+      registerAttachment(part.path, part.selection, part.content)
    }

-    const activeFile = local.context.active()
-    if (activeFile) {
-      registerAttachment(
-        activeFile.path,
-        activeFile.selection,
-        activeFile.name ?? formatAttachmentLabel(activeFile.path, activeFile.selection),
-      )
-    }
+    // 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),
-      )
-    }
+    // 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 absolute = toAbsolutePath(attachment.path)
@@ -194,7 +258,7 @@ export default function Page() {
      }
    })

-    await sdk.session.prompt({
+    await sdk.client.session.prompt({
      path: { id: session.id },
      body: {
        agent: local.agent.current()!.name,
@@ -205,51 +269,457 @@ 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)
+                const additions = createMemo(() => diffs().reduce((acc, diff) => (acc ?? 0) + (diff.additions ?? 0), 0))
+                const deletions = createMemo(() => diffs().reduce((acc, diff) => (acc ?? 0) + (diff.deletions ?? 0), 0))
+
+                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>
+                        <Show when={additions() || deletions()}>
+                          <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>
+                      </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-1.5 items-center">
+                    <div>Chat</div>
+                    <Show when={local.session.active()}>
+                      <div class="flex flex-col h-4 px-2 -mr-2 justify-center items-center rounded-full bg-surface-base text-12-medium text-text-strong">
+                        {local.session.context()}%
+                      </div>
+                    </Show>
+                  </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">
+                <div class="p-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="py-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) => (
+                                  <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>
+                                          <rect x="0" width="2" height="12" rx="1" fill="#CFCECD" />
+                                          <rect x="4" width="2" height="12" rx="1" fill="#CFCECD" />
+                                          <rect x="8" width="2" height="12" rx="1" fill="#CFCECD" />
+                                          <rect x="12" width="2" height="12" rx="1" fill="#CFCECD" />
+                                          <rect x="16" width="2" height="12" rx="1" fill="#CFCECD" />
+                                        </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-[800px]">
+                              <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)
+
+                                  return (
+                                    <div
+                                      data-message={message.id}
+                                      class="flex flex-col items-start self-stretch gap-14 pt-1.5"
+                                    >
+                                      {/* Title */}
+                                      <div class="flex flex-col items-start gap-2 self-stretch">
+                                        <h1 class="text-14-medium text-text-strong overflow-hidden text-ellipsis min-w-0">
+                                          {title() ?? prompt()}
+                                        </h1>
+                                        <Show when={title}>
+                                          <div class="text-12-regular text-text-base">{prompt()}</div>
+                                        </Show>
+                                      </div>
+                                      {/* Summary */}
+                                      <div class="w-full flex flex-col gap-6 items-start self-stretch">
+                                        <Show when={summary}>
+                                          <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>
+                                        </Show>
+                                        <Show when={message.summary?.diffs.length}>
+                                          <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">
+                                                        <div class="flex items-center gap-5">
+                                                          <FileIcon
+                                                            node={{ path: diff.file, type: "file" }}
+                                                            class="shrink-0 size-4"
+                                                          />
+                                                          <div class="flex">
+                                                            <Show when={diff.file.includes("/")}>
+                                                              <span class="text-text-base">
+                                                                {getDirectory(diff.file)}/
+                                                              </span>
+                                                            </Show>
+                                                            <span class="text-text-strong">
+                                                              {getFilename(diff.file)}
+                                                            </span>
+                                                          </div>
+                                                        </div>
+                                                        <div class="flex gap-4 items-center justify-end">
+                                                          <div class="flex gap-2 justify-end items-center">
+                                                            <span class="text-12-mono text-right text-text-diff-add-base">{`+${diff.additions}`}</span>
+                                                            <span class="text-12-mono text-right text-text-diff-delete-base">{`-${diff.deletions}`}</span>
+                                                          </div>
+                                                          <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>
+                                        </Show>
+                                      </div>
+                                      {/* Response */}
+                                      <div data-todo="Response (Timeline)">
+                                        <div class="flex flex-col items-start gap-1 self-stretch">
+                                          <h2 class="text-12-medium text-text-weak">Response</h2>
+                                        </div>
+                                      </div>
+                                    </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 +735,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 +751,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>
  )
@@ -16,7 +16,7 @@ function CollapsibleTrigger(props: CollapsibleTriggerProps) {
  return (
    <KobalteCollapsible.Trigger
      classList={{
-        "w-full group/collapsible cursor-pointer": true,
+        "w-full group/collapsible": true,
        [local.class ?? ""]: !!local.class,
      }}
      {...others}
@@ -1,38 +0,0 @@
-import { Button as KobalteButton } from "@kobalte/core/button"
-import { splitProps } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-
-export interface IconButtonProps extends ComponentProps<typeof KobalteButton> {
-  variant?: "primary" | "secondary" | "outline" | "ghost"
-  size?: "xs" | "sm" | "md" | "lg"
-  children: JSX.Element
-}
-
-export function IconButton(props: IconButtonProps) {
-  const [local, others] = splitProps(props, ["variant", "size", "class", "classList"])
-  return (
-    <KobalteButton
-      classList={{
-        ...(local.classList || {}),
-        "inline-flex items-center justify-center rounded-md font-medium cursor-pointer": true,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2": true,
-        "disabled:pointer-events-none disabled:opacity-50": true,
-        "bg-primary text-background hover:bg-secondary focus-visible:ring-primary data-[disabled]:opacity-50":
-          (local.variant || "primary") === "primary",
-        "bg-background-panel text-text hover:bg-background-element focus-visible:ring-secondary data-[disabled]:opacity-50":
-          local.variant === "secondary",
-        "border border-border bg-transparent text-text hover:bg-background-panel": local.variant === "outline",
-        "focus-visible:ring-border-active data-[disabled]:border-border-subtle data-[disabled]:text-text-muted":
-          local.variant === "outline",
-        "text-text hover:bg-background-panel focus-visible:ring-border-active data-[disabled]:text-text-muted":
-          local.variant === "ghost",
-        "h-5 w-5 text-xs": local.size === "xs",
-        "h-8 w-8 text-sm": local.size === "sm",
-        "h-10 w-10 text-sm": (local.size || "md") === "md",
-        "h-12 w-12 text-base": local.size === "lg",
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    />
-  )
-}
@@ -5,4 +5,3 @@ export {
  type CollapsibleContentProps,
 } from "./collapsible"
 export { FileIcon, type FileIconProps } from "./file-icon"
-export { IconButton, type IconButtonProps } from "./icon-button"
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/function",
-  "version": "0.15.7",
+  "version": "0.15.17",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -137,7 +137,11 @@ export default new Hono<{ Bindings: Env }>()
    return c.json({})
  })
  .post("/share_delete_admin", async (c) => {
-    const id = c.env.SYNC_SERVER.idFromName("oVF8Rsiv")
+    const body = await c.req.json<{ sessionShortName: string; adminSecret: string }>()
+    const sessionShortName = body.sessionShortName
+    const adminSecret = body.adminSecret
+    if (adminSecret !== Resource.ADMIN_SECRET.value) throw new Error("Invalid admin secret")
+    const id = c.env.SYNC_SERVER.idFromName(sessionShortName)
    const stub = c.env.SYNC_SERVER.get(id)
    await stub.clear()
    return c.json({})
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.15.7",
+  "version": "0.15.17",
  "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"
  }
 }
@@ -40,6 +40,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`,
@@ -0,0 +1,164 @@
+# ACP (Agent Client Protocol) Implementation
+
+This directory contains a clean, protocol-compliant implementation of the [Agent Client Protocol](https://agentclientprotocol.com/) for opencode.
+
+## Architecture
+
+The implementation follows a clean separation of concerns:
+
+### Core Components
+
+- **`agent.ts`** - Implements the `Agent` interface from `@agentclientprotocol/sdk`
+  - Handles initialization and capability negotiation
+  - Manages session lifecycle (`session/new`, `session/load`)
+  - Processes prompts and returns responses
+  - Properly implements ACP protocol v1
+
+- **`client.ts`** - Implements the `Client` interface for client-side capabilities
+  - File operations (`readTextFile`, `writeTextFile`)
+  - Permission requests (auto-approves for now)
+  - Terminal support (stub implementation)
+
+- **`session.ts`** - Session state management
+  - Creates and tracks ACP sessions
+  - Maps ACP sessions to internal opencode sessions
+  - Maintains working directory context
+  - Handles MCP server configurations
+
+- **`server.ts`** - ACP server startup and lifecycle
+  - Sets up JSON-RPC over stdio using the official library
+  - Manages graceful shutdown on SIGTERM/SIGINT
+  - Provides Instance context for the agent
+
+- **`types.ts`** - Type definitions for internal use
+
+## Usage
+
+### Command Line
+
+```bash
+# Start the ACP server in the current directory
+opencode acp
+
+# Start in a specific directory
+opencode acp --cwd /path/to/project
+```
+
+### Programmatic
+
+```typescript
+import { ACPServer } from "./acp/server"
+
+await ACPServer.start()
+```
+
+### Integration with Zed
+
+Add to your Zed configuration (`~/.config/zed/settings.json`):
+
+```json
+{
+  "agent_servers": {
+    "OpenCode": {
+      "command": "opencode",
+      "args": ["acp"]
+    }
+  }
+}
+```
+
+## Protocol Compliance
+
+This implementation follows the ACP specification v1:
+
+✅ **Initialization**
+
+- Proper `initialize` request/response with protocol version negotiation
+- Capability advertisement (`agentCapabilities`)
+- Authentication support (stub)
+
+✅ **Session Management**
+
+- `session/new` - Create new conversation sessions
+- `session/load` - Resume existing sessions (basic support)
+- Working directory context (`cwd`)
+- MCP server configuration support
+
+✅ **Prompting**
+
+- `session/prompt` - Process user messages
+- Content block handling (text, resources)
+- Response with stop reasons
+
+✅ **Client Capabilities**
+
+- File read/write operations
+- Permission requests
+- Terminal support (stub for future)
+
+## Current Limitations
+
+### Not Yet Implemented
+
+1. **Streaming Responses** - Currently returns complete responses instead of streaming via `session/update` notifications
+2. **Tool Call Reporting** - Doesn't report tool execution progress
+3. **Session Modes** - No mode switching support yet
+4. **Authentication** - No actual auth implementation
+5. **Terminal Support** - Placeholder only
+6. **Session Persistence** - `session/load` doesn't restore actual conversation history
+
+### Future Enhancements
+
+- **Real-time Streaming**: Implement `session/update` notifications for progressive responses
+- **Tool Call Visibility**: Report tool executions as they happen
+- **Session Persistence**: Save and restore full conversation history
+- **Mode Support**: Implement different operational modes (ask, code, etc.)
+- **Enhanced Permissions**: More sophisticated permission handling
+- **Terminal Integration**: Full terminal support via opencode's bash tool
+
+## Testing
+
+```bash
+# Run ACP tests
+bun test test/acp.test.ts
+
+# Test manually with stdio
+echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":1}}' | opencode acp
+```
+
+## Design Decisions
+
+### Why the Official Library?
+
+We use `@agentclientprotocol/sdk` instead of implementing JSON-RPC ourselves because:
+
+- Ensures protocol compliance
+- Handles edge cases and future protocol versions
+- Reduces maintenance burden
+- Works with other ACP clients automatically
+
+### Clean Architecture
+
+Each component has a single responsibility:
+
+- **Agent** = Protocol interface
+- **Client** = Client-side operations
+- **Session** = State management
+- **Server** = Lifecycle and I/O
+
+This makes the codebase maintainable and testable.
+
+### Mapping to OpenCode
+
+ACP sessions map cleanly to opencode's internal session model:
+
+- ACP `session/new` → creates internal Session
+- ACP `session/prompt` → uses SessionPrompt.prompt()
+- Working directory context preserved per-session
+- Tool execution uses existing ToolRegistry
+
+## References
+
+- [ACP Specification](https://agentclientprotocol.com/)
+- [TypeScript Library](https://github.com/agentclientprotocol/typescript-sdk)
+- [Protocol Examples](https://github.com/agentclientprotocol/typescript-sdk/tree/main/src/examples)
@@ -0,0 +1,587 @@
+import type {
+  Agent as ACPAgent,
+  AgentSideConnection,
+  AuthenticateRequest,
+  CancelNotification,
+  InitializeRequest,
+  LoadSessionRequest,
+  NewSessionRequest,
+  PermissionOption,
+  PromptRequest,
+  SetSessionModelRequest,
+  SetSessionModeRequest,
+  SetSessionModeResponse,
+} 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"
+
+export namespace ACP {
+  const log = Log.create({ service: "acp-agent" })
+
+  // TODO: mcp servers?
+
+  type ToolKind =
+    | "read"
+    | "edit"
+    | "delete"
+    | "move"
+    | "search"
+    | "execute"
+    | "think"
+    | "fetch"
+    | "switch_mode"
+    | "other"
+
+  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":
+              await this.connection
+                .sessionUpdate({
+                  sessionId: acpSession.id,
+                  update: {
+                    sessionUpdate: "tool_call_update",
+                    toolCallId: part.callID,
+                    status: "completed",
+                    content: [
+                      {
+                        type: "content",
+                        content: {
+                          type: "text",
+                          text: part.state.output,
+                        },
+                      },
+                    ],
+                    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,
+          // TODO: map acp mcp
+          // mcpCapabilities: {
+          //   http: true,
+          //   sse: 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)
+
+      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 ?? "",
+      }))
+
+      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
+
+      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 = await (async () => {
+        const text = parts.filter((part) => part.type === "text").join("")
+        const match = text.match(/^\/(\w+)\s*(.*)$/)
+        if (!match) return
+
+        const [c, args] = match.slice(1)
+        const command = await Command.get(c)
+        if (!command) return
+        return { command, args }
+      })()
+
+      if (cmd) {
+        await SessionPrompt.command({
+          sessionID,
+          command: cmd.command.name,
+          arguments: cmd.args,
+          agent,
+        })
+      } else {
+        await SessionPrompt.prompt({
+          sessionID,
+          model: {
+            providerID: model.providerID,
+            modelID: model.modelID,
+          },
+          parts,
+          agent,
+        })
+      }
+
+      return {
+        stopReason: "end_turn" as const,
+        _meta: {},
+      }
+    }
+
+    async cancel(params: CancelNotification) {
+      SessionLock.abort(params.sessionId)
+    }
+  }
+
+  function toToolKind(toolName: string): ToolKind {
+    const tool = toolName.toLocaleLowerCase()
+    switch (tool) {
+      case "bash":
+        return "execute"
+      case "webfetch":
+        return "fetch"
+
+      case "edit":
+      case "patch":
+      case "write":
+        return "edit"
+
+      case "grep":
+      case "glob":
+      case "context7_resolve_library_id":
+      case "context7_get_library_docs":
+        return "search"
+
+      case "list":
+      case "read":
+        return "read"
+
+      default:
+        return "other"
+    }
+  }
+
+  function toLocations(toolName: string, input: Record<string, any>): { path: string }[] {
+    const tool = toolName.toLocaleLowerCase()
+    switch (tool) {
+      case "read":
+      case "edit":
+      case "write":
+        return input["filePath"] ? [{ path: input["filePath"] }] : []
+      case "glob":
+      case "grep":
+        return input["path"] ? [{ path: input["path"] }] : []
+      case "bash":
+        return []
+      case "list":
+        return input["path"] ? [{ path: input["path"] }] : []
+      default:
+        return []
+    }
+  }
+
+  async function defaultModel(config: ACPConfig) {
+    const configured = config.defaultModel
+    if (configured) return configured
+    return Provider.defaultModel()
+  }
+
+  function parseUri(
+    uri: string,
+  ): { type: "file"; url: string; filename: string; mime: string } | { type: "text"; text: string } {
+    try {
+      if (uri.startsWith("file://")) {
+        const path = uri.slice(7)
+        const name = path.split("/").pop() || path
+        return {
+          type: "file",
+          url: uri,
+          filename: name,
+          mime: "text/plain",
+        }
+      }
+      if (uri.startsWith("zed://")) {
+        const url = new URL(uri)
+        const path = url.searchParams.get("path")
+        if (path) {
+          const name = path.split("/").pop() || path
+          return {
+            type: "file",
+            url: `file://${path}`,
+            filename: name,
+            mime: "text/plain",
+          }
+        }
+      }
+      return {
+        type: "text",
+        text: uri,
+      }
+    } catch {
+      return {
+        type: "text",
+        text: uri,
+      }
+    }
+  }
+}
@@ -0,0 +1,64 @@
+import type { McpServer } from "@agentclientprotocol/sdk"
+import { Identifier } from "../id/id"
+import { Session } from "../session"
+import { Provider } from "../provider/provider"
+import type { ACPSessionState } from "./types"
+
+export class ACPSessionManager {
+  private sessions = new Map<string, ACPSessionState>()
+
+  async create(cwd: string, mcpServers: McpServer[], model?: ACPSessionState["model"]): Promise<ACPSessionState> {
+    const session = await Session.create({ title: `ACP Session ${crypto.randomUUID()}` })
+    const sessionId = session.id
+    const resolvedModel = model ?? (await Provider.defaultModel())
+
+    const state: ACPSessionState = {
+      id: sessionId,
+      cwd,
+      mcpServers,
+      createdAt: new Date(),
+      model: resolvedModel,
+    }
+
+    this.sessions.set(sessionId, state)
+    return state
+  }
+
+  get(sessionId: string) {
+    return this.sessions.get(sessionId)
+  }
+
+  async remove(sessionId: string) {
+    const state = this.sessions.get(sessionId)
+    if (!state) return
+
+    await Session.remove(sessionId).catch(() => {})
+    this.sessions.delete(sessionId)
+  }
+
+  has(sessionId: string) {
+    return this.sessions.has(sessionId)
+  }
+
+  getModel(sessionId: string) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    return session.model
+  }
+
+  setModel(sessionId: string, model: ACPSessionState["model"]) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    session.model = model
+    this.sessions.set(sessionId, session)
+    return session
+  }
+
+  setMode(sessionId: string, modeId: string) {
+    const session = this.sessions.get(sessionId)
+    if (!session) return
+    session.modeId = modeId
+    this.sessions.set(sessionId, session)
+    return session
+  }
+}
@@ -0,0 +1,20 @@
+import type { McpServer } from "@agentclientprotocol/sdk"
+
+export interface ACPSessionState {
+  id: string
+  cwd: string
+  mcpServers: McpServer[]
+  createdAt: Date
+  model: {
+    providerID: string
+    modelID: string
+  }
+  modeId?: string
+}
+
+export interface ACPConfig {
+  defaultModel?: {
+    providerID: string
+    modelID: string
+  }
+}
@@ -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,
      )
@@ -0,0 +1,62 @@
+import { Log } from "@/util/log"
+import { bootstrap } from "../bootstrap"
+import { cmd } from "./cmd"
+import { AgentSideConnection, ndJsonStream } from "@agentclientprotocol/sdk"
+import { ACP } from "@/acp/agent"
+
+const log = Log.create({ service: "acp-command" })
+
+process.on("unhandledRejection", (reason, promise) => {
+  log.error("Unhandled rejection", {
+    promise,
+    reason,
+  })
+})
+
+export const AcpCommand = cmd({
+  command: "acp",
+  describe: "Start ACP (Agent Client Protocol) server",
+  builder: (yargs) => {
+    return yargs.option("cwd", {
+      describe: "working directory",
+      type: "string",
+      default: process.cwd(),
+    })
+  },
+  handler: async (opts) => {
+    if (opts.cwd) process.chdir(opts["cwd"])
+    await bootstrap(process.cwd(), async () => {
+      const input = new WritableStream<Uint8Array>({
+        write(chunk) {
+          return new Promise<void>((resolve, reject) => {
+            process.stdout.write(Buffer.from(chunk), (err) => {
+              if (err) {
+                reject(err)
+              } else {
+                resolve()
+              }
+            })
+          })
+        },
+      })
+      const output = new ReadableStream<Uint8Array>({
+        start(controller) {
+          process.stdin.on("data", (chunk: Buffer) => {
+            controller.enqueue(new Uint8Array(chunk))
+          })
+          process.stdin.on("end", () => controller.close())
+          process.stdin.on("error", (err) => controller.error(err))
+        },
+      })
+
+      const stream = ndJsonStream(input, output)
+
+      new AgentSideConnection((conn) => {
+        return new ACP.Agent(conn)
+      }, stream)
+
+      log.info("setup connection")
+    })
+    process.stdin.resume()
+  },
+})
@@ -1,3 +1,4 @@
+import { EOL } from "os"
 import { File } from "../../../file"
 import { bootstrap } from "../../bootstrap"
 import { cmd } from "../cmd"
@@ -13,7 +14,7 @@ const FileSearchCommand = cmd({
  async handler(args) {
    await bootstrap(process.cwd(), async () => {
      const results = await File.search({ query: args.query })
-      console.log(results.join("\n"))
+      console.log(results.join(EOL))
    })
  },
 })
@@ -1,3 +1,4 @@
+import { EOL } from "os"
 import { Ripgrep } from "../../../file/ripgrep"
 import { Instance } from "../../../project/instance"
 import { bootstrap } from "../../bootstrap"
@@ -48,7 +49,7 @@ const FilesCommand = cmd({
        files.push(file)
        if (args.limit && files.length >= args.limit) break
      }
-      console.log(files.join("\n"))
+      console.log(files.join(EOL))
    })
  },
 })
@@ -4,6 +4,7 @@ import { cmd } from "./cmd"
 import { bootstrap } from "../bootstrap"
 import { UI } from "../ui"
 import * as prompts from "@clack/prompts"
+import { EOL } from "os"

 export const ExportCommand = cmd({
  command: "export [sessionID]",
@@ -67,7 +68,7 @@ export const ExportCommand = cmd({
        }

        process.stdout.write(JSON.stringify(exportData, null, 2))
-        process.stdout.write("\n")
+        process.stdout.write(EOL)
      } catch (error) {
        UI.error(`Session not found: ${sessionID!}`)
        process.exit(1)
@@ -146,7 +146,12 @@ export const GithubInstallCommand = cmd({
          const app = await getAppInfo()
          await installGitHubApp()

-          const providers = await ModelsDev.get()
+          const providers = await ModelsDev.get().then((p) => {
+            // TODO: add guide for copilot, for now just hide it
+            delete p["github-copilot"]
+            return p
+          })
+
          const provider = await promptProvider()
          const model = await promptModel()
          //const key = await promptKey()
@@ -210,9 +215,8 @@ export const GithubInstallCommand = cmd({
            const priority: Record<string, number> = {
              opencode: 0,
              anthropic: 1,
-              "github-copilot": 2,
-              openai: 3,
-              google: 4,
+              openai: 2,
+              google: 3,
            }
            let provider = await prompts.select({
              message: "Select provider",
@@ -1,4 +1,5 @@
 import type { Argv } from "yargs"
+import path from "path"
 import { Bus } from "../../bus"
 import { Provider } from "../../provider/provider"
 import { Session } from "../../session"
@@ -12,6 +13,7 @@ import { Identifier } from "../../id/id"
 import { Agent } from "../../agent/agent"
 import { Command } from "../../command"
 import { SessionPrompt } from "../../session/prompt"
+import { EOL } from "os"

 const TOOL: Record<string, [string, string]> = {
  todowrite: ["Todo", UI.Style.TEXT_WARNING_BOLD],
@@ -70,10 +72,45 @@ export const RunCommand = cmd({
        default: "default",
        describe: "format: default (formatted) or json (raw JSON events)",
      })
+      .option("file", {
+        alias: ["f"],
+        type: "string",
+        array: true,
+        describe: "file(s) to attach to message",
+      })
  },
  handler: async (args) => {
    let message = args.message.join(" ")

+    let fileParts: any[] = []
+    if (args.file) {
+      const files = Array.isArray(args.file) ? args.file : [args.file]
+
+      for (const filePath of files) {
+        const resolvedPath = path.resolve(process.cwd(), filePath)
+        const file = Bun.file(resolvedPath)
+        const stats = await file.stat().catch(() => {})
+        if (!stats) {
+          UI.error(`File not found: ${filePath}`)
+          process.exit(1)
+        }
+        if (!(await file.exists())) {
+          UI.error(`File not found: ${filePath}`)
+          process.exit(1)
+        }
+
+        const stat = await file.stat()
+        const mime = stat.isDirectory() ? "application/x-directory" : "text/plain"
+
+        fileParts.push({
+          type: "file",
+          url: `file://${resolvedPath}`,
+          filename: path.basename(resolvedPath),
+          mime,
+        })
+      }
+    }
+
    if (!process.stdin.isTTY) message += "\n" + (await Bun.stdin.text())

    if (message.trim().length === 0 && !args.command) {
@@ -158,13 +195,12 @@ export const RunCommand = cmd({
            sessionID: session?.id,
            ...data,
          }
-          process.stdout.write(JSON.stringify(jsonEvent) + "\n")
+          process.stdout.write(JSON.stringify(jsonEvent) + EOL)
          return true
        }
        return false
      }

-      let text = ""
      const messageID = Identifier.ascending("message")

      Bus.subscribe(MessageV2.Event.PartUpdated, async (evt) => {
@@ -196,15 +232,14 @@ export const RunCommand = cmd({
        }

        if (part.type === "text") {
-          text = part.text
+          const text = part.text
+          const isPiped = !process.stdout.isTTY

          if (part.time?.end) {
            if (outputJsonEvent("text", { part })) return
-            UI.empty()
-            UI.println(UI.markdown(text))
-            UI.empty()
-            text = ""
-            return
+            if (!isPiped) UI.println()
+            process.stdout.write((isPiped ? text : UI.markdown(text)) + EOL)
+            if (!isPiped) UI.println()
          }
        }
      })
@@ -218,13 +253,13 @@ export const RunCommand = cmd({
        if ("data" in error && error.data && "message" in error.data) {
          err = error.data.message
        }
-        errorMsg = errorMsg ? errorMsg + "\n" + err : err
+        errorMsg = errorMsg ? errorMsg + EOL + err : err

        if (outputJsonEvent("error", { error })) return
        UI.error(err)
      })

-      const result = await (async () => {
+      await (async () => {
        if (args.command) {
          return await SessionPrompt.command({
            messageID,
@@ -244,6 +279,7 @@ export const RunCommand = cmd({
          },
          agent: agent.name,
          parts: [
+            ...fileParts,
            {
              id: Identifier.ascending("part"),
              type: "text",
@@ -252,15 +288,6 @@ export const RunCommand = cmd({
          ],
        })
      })()
-
-      const isPiped = !process.stdout.isTTY
-      if (isPiped) {
-        const match = result.parts.findLast((x: any) => x.type === "text") as any
-        if (outputJsonEvent("text", { text: match })) return
-        if (match) process.stdout.write(UI.markdown(match.text))
-        if (errorMsg) process.stdout.write(errorMsg)
-      }
-      UI.empty()
      if (errorMsg) process.exit(1)
    })
  },
@@ -157,7 +157,7 @@ export const TuiCommand = cmd({

        ;(async () => {
          // if (Installation.isLocal()) return
-          const config = await Config.global()
+          const config = await Config.get()
          if (config.autoupdate === false || Flag.OPENCODE_DISABLE_AUTOUPDATE) return
          const latest = await Installation.latest().catch(() => {})
          if (!latest) return
@@ -10,8 +10,9 @@ export function FormatError(input: unknown) {
      `Config file at ${input.data.path} is not valid JSON(C)` + (input.data.message ? `: ${input.data.message}` : "")
    )
  }
-  if (Config.DirectoryError.isInstance(input))
-    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Did you mean "${input.data.suggestion}"?`
+  if (Config.ConfigDirectoryTypoError.isInstance(input)) {
+    return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Use "${input.data.suggestion}" instead. This is a common typo.`
+  }
  if (Config.InvalidError.isInstance(input))
    return [
      `Config file at ${input.data.path} is invalid` + (input.data.message ? `: ${input.data.message}` : ""),
@@ -129,7 +129,7 @@ export namespace Config {
      }),
    )
    for (const item of invalid) {
-      throw new DirectoryError({
+      throw new ConfigDirectoryTypoError({
        path: dir,
        dir: item,
        suggestion: item.substring(0, item.length - 1),
@@ -721,8 +721,8 @@ export namespace Config {
    }),
  )

-  export const DirectoryError = NamedError.create(
-    "ConfigDirectoryError",
+  export const ConfigDirectoryTypoError = NamedError.create(
+    "ConfigDirectoryTypoError",
    z.object({
      path: z.string(),
      dir: z.string(),
@@ -1,6 +1,7 @@
 import z from "zod/v4"
 import { Bus } from "../bus"
 import { $ } from "bun"
+import type { BunFile } from "bun"
 import { formatPatch, structuredPatch } from "diff"
 import path from "path"
 import fs from "fs"
@@ -41,6 +42,7 @@ export namespace File {

  export const Content = z
    .object({
+      type: z.literal("text"),
      content: z.string(),
      diff: z.string().optional(),
      patch: z
@@ -61,12 +63,53 @@ export namespace File {
          index: z.string().optional(),
        })
        .optional(),
+      encoding: z.literal("base64").optional(),
+      mimeType: z.string().optional(),
    })
    .meta({
      ref: "FileContent",
    })
  export type Content = z.infer<typeof Content>

+  async function shouldEncode(file: BunFile): Promise<boolean> {
+    const type = file.type?.toLowerCase()
+    if (!type) return false
+
+    if (type.startsWith("text/")) return false
+    if (type.includes("charset=")) return false
+
+    const parts = type.split("/", 2)
+    const top = parts[0]
+    const rest = parts[1] ?? ""
+    const sub = rest.split(";", 1)[0]
+
+    const tops = ["image", "audio", "video", "font", "model", "multipart"]
+    if (tops.includes(top)) return true
+
+    if (type === "application/octet-stream") return true
+
+    const bins = [
+      "zip",
+      "gzip",
+      "bzip",
+      "compressed",
+      "binary",
+      "stream",
+      "pdf",
+      "msword",
+      "powerpoint",
+      "excel",
+      "ogg",
+      "exe",
+      "dmg",
+      "iso",
+      "rar",
+    ]
+    if (bins.some((mark) => sub.includes(mark))) return true
+
+    return false
+  }
+
  export const Event = {
    Edited: Bus.event(
      "file.edited",
@@ -188,14 +231,30 @@ export namespace File {
    }))
  }

-  export async function read(file: string) {
+  export async function read(file: string): Promise<Content> {
    using _ = log.time("read", { file })
    const project = Instance.project
    const full = path.join(Instance.directory, file)
-    const content = await Bun.file(full)
+    const bunFile = Bun.file(full)
+
+    if (!(await bunFile.exists())) {
+      return { type: "text", content: "" }
+    }
+
+    const encode = await shouldEncode(bunFile)
+
+    if (encode) {
+      const buffer = await bunFile.arrayBuffer().catch(() => new ArrayBuffer(0))
+      const content = Buffer.from(buffer).toString("base64")
+      const mimeType = bunFile.type || "application/octet-stream"
+      return { type: "text", content, mimeType, encoding: "base64" }
+    }
+
+    const content = await bunFile
      .text()
      .catch(() => "")
      .then((x) => x.trim())
+
    if (project.vcs === "git") {
      let diff = await $`git diff ${file}`.cwd(Instance.directory).quiet().nothrow().text()
      if (!diff.trim()) diff = await $`git diff --staged ${file}`.cwd(Instance.directory).quiet().nothrow().text()
@@ -206,10 +265,10 @@ export namespace File {
          ignoreWhitespace: true,
        })
        const diff = formatPatch(patch)
-        return { content, patch, diff }
+        return { type: "text", content, patch, diff }
      }
    }
-    return { content }
+    return { type: "text", content }
  }

  export async function list(dir?: string) {
@@ -211,6 +211,16 @@ export namespace Ripgrep {
      }
    }

+    // Bun.spawn should throw this, but it incorrectly reports that the executable does not exist.
+    // See https://github.com/oven-sh/bun/issues/24012
+    if (!(await fs.stat(input.cwd).catch(() => undefined))?.isDirectory()) {
+      throw Object.assign(new Error(`No such file or directory: '${input.cwd}'`), {
+        code: "ENOENT",
+        errno: -2,
+        path: input.cwd,
+      });
+    }
+
    const proc = Bun.spawn(args, {
      cwd: input.cwd,
      stdout: "pipe",
@@ -12,6 +12,7 @@ export namespace Flag {

  // Experimental
  export const OPENCODE_EXPERIMENTAL_WATCHER = truthy("OPENCODE_EXPERIMENTAL_WATCHER")
+  export const OPENCODE_EXPERIMENTAL_TURN_SUMMARY = truthy("OPENCODE_EXPERIMENTAL_TURN_SUMMARY")
  export const OPENCODE_EXPERIMENTAL_NO_BOOTSTRAP = truthy("OPENCODE_EXPERIMENTAL_NO_BOOTSTRAP")

  function truthy(key: string) {
@@ -19,6 +19,8 @@ import { McpCommand } from "./cli/cmd/mcp"
 import { GithubCommand } from "./cli/cmd/github"
 import { ExportCommand } from "./cli/cmd/export"
 import { AttachCommand } from "./cli/cmd/attach"
+import { AcpCommand } from "./cli/cmd/acp"
+import { EOL } from "os"

 const cancel = new AbortController()

@@ -67,6 +69,7 @@ const cli = yargs(hideBin(process.argv))
    })
  })
  .usage("\n" + UI.logo())
+  .command(AcpCommand)
  .command(McpCommand)
  .command(TuiCommand)
  .command(AttachCommand)
@@ -127,7 +130,10 @@ try {
  Log.Default.error("fatal", data)
  const formatted = FormatError(e)
  if (formatted) UI.error(formatted)
-  if (formatted === undefined) UI.error("Unexpected error, check log file at " + Log.file() + " for more details")
+  if (formatted === undefined) {
+    UI.error("Unexpected error, check log file at " + Log.file() + " for more details" + EOL)
+    console.error(e)
+  }
  process.exitCode = 1
 }

@@ -99,4 +99,5 @@ export const LANGUAGE_EXTENSIONS: Record<string, string> = {
  ".vue": "vue",
  ".zig": "zig",
  ".zon": "zig",
+  ".astro": "astro",
 } as const
@@ -701,6 +701,57 @@ export namespace LSPServer {
    },
  }

+  export const Astro: Info = {
+    id: "astro",
+    extensions: [".astro"],
+    root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+    async spawn(root) {
+      const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(() => {})
+      if (!tsserver) {
+        log.info("typescript not found, required for Astro language server")
+        return
+      }
+      const tsdk = path.dirname(tsserver)
+
+      let binary = Bun.which("astro-ls")
+      const args: string[] = []
+      if (!binary) {
+        const js = path.join(Global.Path.bin, "node_modules", "@astrojs", "language-server", "bin", "nodeServer.js")
+        if (!(await Bun.file(js).exists())) {
+          if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
+          await Bun.spawn([BunProc.which(), "install", "@astrojs/language-server"], {
+            cwd: Global.Path.bin,
+            env: {
+              ...process.env,
+              BUN_BE_BUN: "1",
+            },
+            stdout: "pipe",
+            stderr: "pipe",
+            stdin: "pipe",
+          }).exited
+        }
+        binary = BunProc.which()
+        args.push("run", js)
+      }
+      args.push("--stdio")
+      const proc = spawn(binary, args, {
+        cwd: root,
+        env: {
+          ...process.env,
+          BUN_BE_BUN: "1",
+        },
+      })
+      return {
+        process: proc,
+        initialization: {
+          typescript: {
+            tsdk,
+          },
+        },
+      }
+    },
+  }
+
  export const JDTLS: Info = {
    id: "jdtls",
    root: NearestRoot(["pom.xml", "build.gradle", "build.gradle.kts", ".project", ".classpath"]),
@@ -787,4 +838,126 @@ export namespace LSPServer {
      }
    },
  }
+
+  export const LuaLS: Info = {
+    id: "lua-ls",
+    root: NearestRoot([
+      ".luarc.json",
+      ".luarc.jsonc",
+      ".luacheckrc",
+      ".stylua.toml",
+      "stylua.toml",
+      "selene.toml",
+      "selene.yml",
+    ]),
+    extensions: [".lua"],
+    async spawn(root) {
+      let bin = Bun.which("lua-language-server", {
+        PATH: process.env["PATH"] + ":" + Global.Path.bin,
+      })
+
+      if (!bin) {
+        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
+        log.info("downloading lua-language-server from GitHub releases")
+
+        const releaseResponse = await fetch("https://api.github.com/repos/LuaLS/lua-language-server/releases/latest")
+        if (!releaseResponse.ok) {
+          log.error("Failed to fetch lua-language-server release info")
+          return
+        }
+
+        const release = await releaseResponse.json()
+
+        const platform = process.platform
+        const arch = process.arch
+        let assetName = ""
+
+        let lualsArch: string = arch
+        if (arch === "arm64") lualsArch = "arm64"
+        else if (arch === "x64") lualsArch = "x64"
+        else if (arch === "ia32") lualsArch = "ia32"
+
+        let lualsPlatform: string = platform
+        if (platform === "darwin") lualsPlatform = "darwin"
+        else if (platform === "linux") lualsPlatform = "linux"
+        else if (platform === "win32") lualsPlatform = "win32"
+
+        const ext = platform === "win32" ? "zip" : "tar.gz"
+
+        assetName = `lua-language-server-${release.tag_name}-${lualsPlatform}-${lualsArch}.${ext}`
+
+        const supportedCombos = [
+          "darwin-arm64.tar.gz",
+          "darwin-x64.tar.gz",
+          "linux-x64.tar.gz",
+          "linux-arm64.tar.gz",
+          "win32-x64.zip",
+          "win32-ia32.zip",
+        ]
+
+        const assetSuffix = `${lualsPlatform}-${lualsArch}.${ext}`
+        if (!supportedCombos.includes(assetSuffix)) {
+          log.error(`Platform ${platform} and architecture ${arch} is not supported by lua-language-server`)
+          return
+        }
+
+        const asset = release.assets.find((a: any) => a.name === assetName)
+        if (!asset) {
+          log.error(`Could not find asset ${assetName} in latest lua-language-server release`)
+          return
+        }
+
+        const downloadUrl = asset.browser_download_url
+        const downloadResponse = await fetch(downloadUrl)
+        if (!downloadResponse.ok) {
+          log.error("Failed to download lua-language-server")
+          return
+        }
+
+        const tempPath = path.join(Global.Path.bin, assetName)
+        await Bun.file(tempPath).write(downloadResponse)
+
+        // Unlike zls which is a single self-contained binary,
+        // lua-language-server needs supporting files (meta/, locale/, etc.)
+        // Extract entire archive to dedicated directory to preserve all files
+        const installDir = path.join(Global.Path.bin, `lua-language-server-${lualsArch}-${lualsPlatform}`)
+
+        // Remove old installation if exists
+        const stats = await fs.stat(installDir).catch(() => undefined)
+        if (stats) {
+          await fs.rm(installDir, { force: true, recursive: true })
+        }
+
+        await fs.mkdir(installDir, { recursive: true })
+
+        if (ext === "zip") {
+          await $`unzip -o -q ${tempPath} -d ${installDir}`.quiet().nothrow()
+        } else {
+          await $`tar -xzf ${tempPath} -C ${installDir}`.nothrow()
+        }
+
+        await fs.rm(tempPath, { force: true })
+
+        // Binary is located in bin/ subdirectory within the extracted archive
+        bin = path.join(installDir, "bin", "lua-language-server" + (platform === "win32" ? ".exe" : ""))
+
+        if (!(await Bun.file(bin).exists())) {
+          log.error("Failed to extract lua-language-server binary")
+          return
+        }
+
+        if (platform !== "win32") {
+          await $`chmod +x ${bin}`.nothrow()
+        }
+
+        log.info(`installed lua-language-server`, { bin })
+      }
+
+      return {
+        process: spawn(bin, {
+          cwd: root,
+        }),
+      }
+    },
+  }
 }
@@ -2,7 +2,6 @@ import { Plugin } from "../plugin"
 import { Share } from "../share/share"
 import { Format } from "../format"
 import { LSP } from "../lsp"
-import { Snapshot } from "../snapshot"
 import { FileWatcher } from "../file/watcher"
 import { File } from "../file"
 import { Flag } from "../flag/flag"
@@ -13,7 +12,6 @@ export async function InstanceBootstrap() {
  Share.init()
  Format.init()
  LSP.init()
-  Snapshot.init()
  FileWatcher.init()
  File.init()
 }
@@ -95,7 +95,14 @@ export namespace Provider {

          switch (regionPrefix) {
            case "us": {
-              const modelRequiresPrefix = ["claude", "deepseek"].some((m) => modelID.includes(m))
+              const modelRequiresPrefix = [
+                "nova-micro",
+                "nova-lite",
+                "nova-pro",
+                "nova-premier",
+                "claude",
+                "deepseek"
+              ].some((m) => modelID.includes(m))
              const isGovCloud = region.startsWith("us-gov")
              if (modelRequiresPrefix && !isGovCloud) {
                modelID = `${regionPrefix}.${modelID}`
@@ -121,8 +128,12 @@ export namespace Provider {
            }
            case "ap": {
              const isAustraliaRegion = ["ap-southeast-2", "ap-southeast-4"].includes(region)
-              if (isAustraliaRegion && modelID.startsWith("anthropic.claude-sonnet-4-5")) {
-                modelID = `au.${modelID}`
+              if (
+                isAustraliaRegion &&
+                ["anthropic.claude-sonnet-4-5", "anthropic.claude-haiku"].some((m) => modelID.includes(m))
+              ) {
+                regionPrefix = "au"
+                modelID = `${regionPrefix}.${modelID}`
              } else {
                const modelRequiresPrefix = ["claude", "nova-lite", "nova-micro", "nova-pro"].some((m) =>
                  modelID.includes(m),
@@ -506,7 +517,14 @@ export namespace Provider {

    const provider = await state().then((state) => state.providers[providerID])
    if (!provider) return
-    const priority = ["3-5-haiku", "3.5-haiku", "gemini-2.5-flash", "gpt-5-nano"]
+    const priority = [
+      "claude-haiku-4-5",
+      "claude-haiku-4.5",
+      "3-5-haiku",
+      "3.5-haiku",
+      "gemini-2.5-flash",
+      "gpt-5-nano",
+    ]
    for (const item of priority) {
      for (const model of Object.keys(provider.info.models)) {
        if (model.includes(item)) return getModel(providerID, model)
@@ -92,19 +92,43 @@ export namespace ProviderTransform {
    }

    if (modelID.includes("gpt-5") && !modelID.includes("gpt-5-chat")) {
-      result["reasoningEffort"] = "medium"
+      if (!modelID.includes("codex")) result["reasoningEffort"] = "medium"
+
      if (providerID !== "azure") {
        result["textVerbosity"] = modelID.includes("codex") ? "medium" : "low"
      }
+
      if (providerID === "opencode") {
        result["promptCacheKey"] = sessionID
        result["include"] = ["reasoning.encrypted_content"]
-        result["reasoningSummary"] = "detailed"
+        result["reasoningSummary"] = "auto"
      }
    }
    return result
  }

+  export function providerOptions(npm: string | undefined, providerID: string, options: { [x: string]: any }) {
+    switch (npm) {
+      case "@ai-sdk/openai":
+      case "@ai-sdk/azure":
+        return {
+          ["openai" as string]: options,
+        }
+      case "@ai-sdk/amazon-bedrock":
+        return {
+          ["bedrock" as string]: options,
+        }
+      case "@ai-sdk/anthropic":
+        return {
+          ["anthropic" as string]: options,
+        }
+      default:
+        return {
+          [providerID]: options,
+        }
+    }
+  }
+
  export function maxOutputTokens(
    providerID: string,
    options: Record<string, any>,
@@ -3,7 +3,7 @@ import { Bus } from "../bus"
 import { describeRoute, generateSpecs, validator, resolver, openAPIRouteHandler } from "hono-openapi"
 import { Hono } from "hono"
 import { cors } from "hono/cors"
-import { streamSSE } from "hono/streaming"
+import { stream, streamSSE } from "hono/streaming"
 import { Session } from "../session"
 import z from "zod/v4"
 import { Provider } from "../provider/provider"
@@ -35,6 +35,8 @@ import { InstanceBootstrap } from "../project/bootstrap"
 import { MCP } from "../mcp"
 import { Storage } from "../storage/storage"
 import type { ContentfulStatusCode } from "hono/utils/http-status"
+import { Snapshot } from "@/snapshot"
+import { SessionSummary } from "@/session/summary"

 const ERRORS = {
  400: {
@@ -59,9 +61,7 @@ const ERRORS = {
    description: "Not found",
    content: {
      "application/json": {
-        schema: resolver(
-          Storage.NotFoundError.Schema
-        )
+        schema: resolver(Storage.NotFoundError.Schema),
      },
    },
  },
@@ -87,12 +87,9 @@ export namespace Server {
        })
        if (err instanceof NamedError) {
          let status: ContentfulStatusCode
-          if (err instanceof Storage.NotFoundError)
-            status = 404
-          else if (err instanceof Provider.ModelNotFoundError)
-            status = 400
-          else
-            status = 500
+          if (err instanceof Storage.NotFoundError) status = 404
+          else if (err instanceof Provider.ModelNotFoundError) status = 400
+          else status = 500
          return c.json(err.toObject(), { status })
        }
        const message = err instanceof Error && err.stack ? err.stack : err.toString()
@@ -613,6 +610,44 @@ export namespace Server {
          return c.json(session)
        },
      )
+      .get(
+        "/session/:id/diff",
+        describeRoute({
+          description: "Get the diff that resulted from this user message",
+          operationId: "session.diff",
+          responses: {
+            200: {
+              description: "Successfully retrieved diff",
+              content: {
+                "application/json": {
+                  schema: resolver(Snapshot.FileDiff.array()),
+                },
+              },
+            },
+          },
+        }),
+        validator(
+          "param",
+          z.object({
+            id: SessionSummary.diff.schema.shape.sessionID,
+          }),
+        ),
+        validator(
+          "query",
+          z.object({
+            messageID: SessionSummary.diff.schema.shape.messageID,
+          }),
+        ),
+        async (c) => {
+          const query = c.req.valid("query")
+          const params = c.req.valid("param")
+          const result = await SessionSummary.diff({
+            sessionID: params.id,
+            messageID: query.messageID,
+          })
+          return c.json(result)
+        },
+      )
      .delete(
        "/session/:id/share",
        describeRoute({
@@ -739,7 +774,10 @@ export namespace Server {
        ),
        async (c) => {
          const params = c.req.valid("param")
-          const message = await Session.getMessage({ sessionID: params.id, messageID: params.messageID })
+          const message = await Session.getMessage({
+            sessionID: params.id,
+            messageID: params.messageID,
+          })
          return c.json(message)
        },
      )
@@ -773,10 +811,14 @@ export namespace Server {
        ),
        validator("json", SessionPrompt.PromptInput.omit({ sessionID: true })),
        async (c) => {
-          const sessionID = c.req.valid("param").id
-          const body = c.req.valid("json")
-          const msg = await SessionPrompt.prompt({ ...body, sessionID })
-          return c.json(msg)
+          c.status(200)
+          c.header("Content-Type", "application/json")
+          return stream(c, async (stream) => {
+            const sessionID = c.req.valid("param").id
+            const body = c.req.valid("json")
+            const msg = await SessionPrompt.prompt({ ...body, sessionID })
+            stream.write(JSON.stringify(msg))
+          })
        },
      )
      .post(
@@ -873,7 +915,10 @@ export namespace Server {
        async (c) => {
          const id = c.req.valid("param").id
          log.info("revert", c.req.valid("json"))
-          const session = await SessionRevert.revert({ sessionID: id, ...c.req.valid("json") })
+          const session = await SessionRevert.revert({
+            sessionID: id,
+            ...c.req.valid("json"),
+          })
          return c.json(session)
        },
      )
@@ -934,7 +979,11 @@ export namespace Server {
          const params = c.req.valid("param")
          const id = params.id
          const permissionID = params.permissionID
-          Permission.respond({ sessionID: id, permissionID, response: c.req.valid("json").response })
+          Permission.respond({
+            sessionID: id,
+            permissionID,
+            response: c.req.valid("json").response,
+          })
          return c.json(true)
        },
      )
@@ -1,4 +1,4 @@
-import { streamText, type ModelMessage } from "ai"
+import { streamText, type ModelMessage, LoadAPIKeyError, type StreamTextResult, type Tool as AITool } from "ai"
 import { Session } from "."
 import { Identifier } from "../id/id"
 import { Instance } from "../project/instance"
@@ -13,6 +13,9 @@ import { SessionPrompt } from "./prompt"
 import { Flag } from "../flag/flag"
 import { Token } from "../util/token"
 import { Log } from "../util/log"
+import { SessionLock } from "./lock"
+import { ProviderTransform } from "@/provider/transform"
+import { SessionRetry } from "./retry"

 export namespace SessionCompaction {
  const log = Log.create({ service: "session.compaction" })
@@ -38,6 +41,7 @@ export namespace SessionCompaction {

  export const PRUNE_MINIMUM = 20_000
  export const PRUNE_PROTECT = 40_000
+  const MAX_RETRIES = 10

  // goes backwards through parts until there are 40_000 tokens worth of tool
  // calls. then erases output of previous tool calls. idea is to throw away old
@@ -82,7 +86,11 @@ export namespace SessionCompaction {
    }
  }

-  export async function run(input: { sessionID: string; providerID: string; modelID: string }) {
+  export async function run(input: { sessionID: string; providerID: string; modelID: string; signal?: AbortSignal }) {
+    if (!input.signal) SessionLock.assertUnlocked(input.sessionID)
+    await using lock = input.signal === undefined ? SessionLock.acquire({ sessionID: input.sessionID }) : undefined
+    const signal = input.signal ?? lock!.signal
+
    await Session.update(input.sessionID, (draft) => {
      draft.time.compacting = Date.now()
    })
@@ -91,7 +99,7 @@ export namespace SessionCompaction {
        draft.time.compacting = undefined
      })
    })
-    const toSummarize = await Session.messages(input.sessionID).then(MessageV2.filterSummarized)
+    const toSummarize = await Session.messages(input.sessionID).then(MessageV2.filterCompacted)
    const model = await Provider.getModel(input.providerID, input.modelID)
    const system = [
      ...SystemPrompt.summarize(model.providerID),
@@ -102,6 +110,7 @@ export namespace SessionCompaction {
    const msg = (await Session.updateMessage({
      id: Identifier.ascending("message"),
      role: "assistant",
+      parentID: toSummarize.findLast((m) => m.info.role === "user")?.info.id!,
      sessionID: input.sessionID,
      system,
      mode: "build",
@@ -122,6 +131,7 @@ export namespace SessionCompaction {
        created: Date.now(),
      },
    })) as MessageV2.Assistant
+
    const part = (await Session.updatePart({
      type: "text",
      sessionID: input.sessionID,
@@ -133,69 +143,183 @@ export namespace SessionCompaction {
      },
    })) as MessageV2.TextPart

-    let summaryText = ""
-    const stream = streamText({
-      maxRetries: 10,
-      model: model.language,
-      providerOptions: {
-        [model.npm === "@ai-sdk/openai" ? "openai" : model.providerID]: model.info.options,
-      },
-      messages: [
-        ...system.map(
-          (x): ModelMessage => ({
-            role: "system",
-            content: x,
-          }),
-        ),
-        ...MessageV2.toModelMessage(toSummarize),
-        {
-          role: "user",
-          content: [
-            {
-              type: "text",
-              text: "Provide a detailed but concise summary of our conversation above. Focus on information that would be helpful for continuing the conversation, including what we did, what we're doing, which files we're working on, and what we're going to do next.",
-            },
-          ],
+    const doStream = () =>
+      streamText({
+        // set to 0, we handle loop
+        maxRetries: 0,
+        model: model.language,
+        providerOptions: ProviderTransform.providerOptions(model.npm, model.providerID, model.info.options),
+        abortSignal: signal,
+        onError(error) {
+          log.error("stream error", {
+            error,
+          })
        },
-      ],
-    })
+        messages: [
+          ...system.map(
+            (x): ModelMessage => ({
+              role: "system",
+              content: x,
+            }),
+          ),
+          ...MessageV2.toModelMessage(toSummarize),
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "Provide a detailed but concise summary of our conversation above. Focus on information that would be helpful for continuing the conversation, including what we did, what we're doing, which files we're working on, and what we're going to do next.",
+              },
+            ],
+          },
+        ],
+      })

-    for await (const value of stream.fullStream) {
-      switch (value.type) {
-        case "text-delta":
-          summaryText += value.text
+    // TODO: reduce duplication between compaction.ts & prompt.ts
+    const process = async (
+      stream: StreamTextResult<Record<string, AITool>, never>,
+      retries: { count: number; max: number },
+    ) => {
+      let shouldRetry = false
+      try {
+        for await (const value of stream.fullStream) {
+          signal.throwIfAborted()
+          switch (value.type) {
+            case "text-delta":
+              part.text += value.text
+              if (value.providerMetadata) part.metadata = value.providerMetadata
+              if (part.text) await Session.updatePart(part)
+              continue
+            case "text-end": {
+              part.text = part.text.trimEnd()
+              part.time = {
+                start: Date.now(),
+                end: Date.now(),
+              }
+              if (value.providerMetadata) part.metadata = value.providerMetadata
+              await Session.updatePart(part)
+              continue
+            }
+            case "finish-step": {
+              const usage = Session.getUsage({
+                model: model.info,
+                usage: value.usage,
+                metadata: value.providerMetadata,
+              })
+              msg.cost += usage.cost
+              msg.tokens = usage.tokens
+              await Session.updateMessage(msg)
+              continue
+            }
+            case "error":
+              throw value.error
+            default:
+              continue
+          }
+        }
+      } catch (e) {
+        log.error("compaction error", {
+          error: e,
+        })
+        const error = MessageV2.fromError(e, { providerID: input.providerID })
+        if (retries.count < retries.max && MessageV2.APIError.isInstance(error) && error.data.isRetryable) {
+          shouldRetry = true
          await Session.updatePart({
-            ...part,
-            text: summaryText,
+            id: Identifier.ascending("part"),
+            messageID: msg.id,
+            sessionID: msg.sessionID,
+            type: "retry",
+            attempt: retries.count + 1,
+            time: {
+              created: Date.now(),
+            },
+            error,
          })
-          break
-        case "text-end":
-          part.text = summaryText
-          await Session.updatePart({
-            ...part,
+        } else {
+          msg.error = error
+          Bus.publish(Session.Event.Error, {
+            sessionID: msg.sessionID,
+            error: msg.error,
          })
-          break
-        case "finish": {
-          const usage = Session.getUsage({ model: model.info, usage: value.totalUsage, metadata: undefined })
-          msg.cost += usage.cost
-          msg.tokens = usage.tokens
-          msg.summary = true
-          msg.time.completed = Date.now()
-          await Session.updateMessage(msg)
-          part.time!.end = Date.now()
-          await Session.updatePart(part)
+        }
+      }
+
+      const parts = await Session.getParts(msg.id)
+      return {
+        info: msg,
+        parts,
+        shouldRetry,
+      }
+    }
+
+    let stream = doStream()
+    let result = await process(stream, {
+      count: 0,
+      max: MAX_RETRIES,
+    })
+    if (result.shouldRetry) {
+      for (let retry = 1; retry < MAX_RETRIES; retry++) {
+        const lastRetryPart = result.parts.findLast((p) => p.type === "retry")
+
+        if (lastRetryPart) {
+          const delayMs = SessionRetry.getRetryDelayInMs(lastRetryPart.error, retry)
+
+          log.info("retrying with backoff", {
+            attempt: retry,
+            delayMs,
+          })
+
+          const stop = await SessionRetry.sleep(delayMs, signal)
+            .then(() => false)
+            .catch((error) => {
+              if (error instanceof DOMException && error.name === "AbortError") {
+                const err = new MessageV2.AbortedError(
+                  { message: error.message },
+                  {
+                    cause: error,
+                  },
+                ).toObject()
+                result.info.error = err
+                Bus.publish(Session.Event.Error, {
+                  sessionID: result.info.sessionID,
+                  error: result.info.error,
+                })
+                return true
+              }
+              throw error
+            })
+
+          if (stop) break
+        }
+
+        stream = doStream()
+        result = await process(stream, {
+          count: retry,
+          max: MAX_RETRIES,
+        })
+        if (!result.shouldRetry) {
          break
        }
      }
    }

-    Bus.publish(Event.Compacted, {
-      sessionID: input.sessionID,
-    })
+    msg.time.completed = Date.now()
+
+    if (
+      !msg.error ||
+      (MessageV2.AbortedError.isInstance(msg.error) &&
+        result.parts.some((part) => part.type === "text" && part.text.length > 0))
+    ) {
+      msg.summary = true
+      Bus.publish(Event.Compacted, {
+        sessionID: input.sessionID,
+      })
+    }
+    await Session.updateMessage(msg)

    return {
      info: msg,
-      parts: [part],
+      parts: result.parts,
    }
  }
 }
@@ -18,6 +18,7 @@ import { Project } from "../project/project"
 import { Instance } from "../project/instance"
 import { SessionPrompt } from "./prompt"
 import { fn } from "@/util/fn"
+import { Snapshot } from "@/snapshot"

 export namespace Session {
  const log = Log.create({ service: "session" })
@@ -35,6 +36,11 @@ export namespace Session {
      projectID: z.string(),
      directory: z.string(),
      parentID: Identifier.schema("session").optional(),
+      summary: z
+        .object({
+          diffs: Snapshot.FileDiff.array(),
+        })
+        .optional(),
      share: z
        .object({
          url: z.string(),
@@ -334,10 +340,25 @@ export namespace Session {
    },
  )

-  export const updatePart = fn(MessageV2.Part, async (part) => {
+  const UpdatePartInput = z.union([
+    MessageV2.Part,
+    z.object({
+      part: MessageV2.TextPart,
+      delta: z.string(),
+    }),
+    z.object({
+      part: MessageV2.ReasoningPart,
+      delta: z.string(),
+    }),
+  ])
+
+  export const updatePart = fn(UpdatePartInput, async (input) => {
+    const part = "delta" in input ? input.part : input
+    const delta = "delta" in input ? input.delta : undefined
    await Storage.write(["part", part.messageID, part.id], part)
    Bus.publish(MessageV2.Event.PartUpdated, {
      part,
+      delta,
    })
    return part
  })
@@ -2,9 +2,10 @@ import z from "zod/v4"
 import { Bus } from "../bus"
 import { NamedError } from "../util/error"
 import { Message } from "./message"
-import { convertToModelMessages, type ModelMessage, type UIMessage } from "ai"
+import { APICallError, convertToModelMessages, LoadAPIKeyError, type ModelMessage, type UIMessage } from "ai"
 import { Identifier } from "../id/id"
 import { LSP } from "../lsp"
+import { Snapshot } from "@/snapshot"

 export namespace MessageV2 {
  export const OutputLengthError = NamedError.create("MessageOutputLengthError", z.object({}))
@@ -16,6 +17,17 @@ export namespace MessageV2 {
      message: z.string(),
    }),
  )
+  export const APIError = NamedError.create(
+    "APIError",
+    z.object({
+      message: z.string(),
+      statusCode: z.number().optional(),
+      isRetryable: z.boolean(),
+      responseHeaders: z.record(z.string(), z.string()).optional(),
+      responseBody: z.string().optional(),
+    }),
+  )
+  export type APIError = z.infer<typeof APIError.Schema>

  const PartBase = z.object({
    id: z.string(),
@@ -128,8 +140,21 @@ export namespace MessageV2 {
  })
  export type AgentPart = z.infer<typeof AgentPart>

+  export const RetryPart = PartBase.extend({
+    type: z.literal("retry"),
+    attempt: z.number(),
+    error: APIError.Schema,
+    time: z.object({
+      created: z.number(),
+    }),
+  }).meta({
+    ref: "RetryPart",
+  })
+  export type RetryPart = z.infer<typeof RetryPart>
+
  export const StepStartPart = PartBase.extend({
    type: z.literal("step-start"),
+    snapshot: z.string().optional(),
  }).meta({
    ref: "StepStartPart",
  })
@@ -137,6 +162,8 @@ export namespace MessageV2 {

  export const StepFinishPart = PartBase.extend({
    type: z.literal("step-finish"),
+    reason: z.string(),
+    snapshot: z.string().optional(),
    cost: z.number(),
    tokens: z.object({
      input: z.number(),
@@ -239,6 +266,13 @@ export namespace MessageV2 {
    time: z.object({
      created: z.number(),
    }),
+    summary: z
+      .object({
+        title: z.string().optional(),
+        body: z.string().optional(),
+        diffs: Snapshot.FileDiff.array(),
+      })
+      .optional(),
  }).meta({
    ref: "UserMessage",
  })
@@ -255,6 +289,7 @@ export namespace MessageV2 {
      SnapshotPart,
      PatchPart,
      AgentPart,
+      RetryPart,
    ])
    .meta({
      ref: "Part",
@@ -273,9 +308,11 @@ export namespace MessageV2 {
        NamedError.Unknown.Schema,
        OutputLengthError.Schema,
        AbortedError.Schema,
+        APIError.Schema,
      ])
      .optional(),
    system: z.string().array(),
+    parentID: z.string(),
    modelID: z.string(),
    providerID: z.string(),
    mode: z.string(),
@@ -322,6 +359,7 @@ export namespace MessageV2 {
      "message.part.updated",
      z.object({
        part: Part,
+        delta: z.string().optional(),
      }),
    ),
    PartRemoved: Bus.event(
@@ -344,6 +382,7 @@ export namespace MessageV2 {
    if (v1.role === "assistant") {
      const info: Assistant = {
        id: v1.id,
+        parentID: "",
        sessionID: v1.metadata.sessionID,
        role: "assistant",
        time: {
@@ -593,9 +632,46 @@ export namespace MessageV2 {
    return convertToModelMessages(result)
  }

-  export function filterSummarized(msgs: { info: MessageV2.Info; parts: MessageV2.Part[] }[]) {
+  export function filterCompacted(msgs: { info: MessageV2.Info; parts: MessageV2.Part[] }[]) {
    const i = msgs.findLastIndex((m) => m.info.role === "assistant" && !!m.info.summary)
    if (i === -1) return msgs.slice()
    return msgs.slice(i)
  }
+
+  export function fromError(e: unknown, ctx: { providerID: string }) {
+    switch (true) {
+      case e instanceof DOMException && e.name === "AbortError":
+        return new MessageV2.AbortedError(
+          { message: e.message },
+          {
+            cause: e,
+          },
+        ).toObject()
+      case MessageV2.OutputLengthError.isInstance(e):
+        return e
+      case LoadAPIKeyError.isInstance(e):
+        return new MessageV2.AuthError(
+          {
+            providerID: ctx.providerID,
+            message: e.message,
+          },
+          { cause: e },
+        ).toObject()
+      case APICallError.isInstance(e):
+        return new MessageV2.APIError(
+          {
+            message: e.message,
+            statusCode: e.statusCode,
+            isRetryable: e.isRetryable,
+            responseHeaders: e.responseHeaders,
+            responseBody: e.responseBody,
+          },
+          { cause: e },
+        ).toObject()
+      case e instanceof Error:
+        return new NamedError.Unknown({ message: e.toString() }, { cause: e }).toObject()
+      default:
+        return new NamedError.Unknown({ message: JSON.stringify(e) }, { cause: e })
+    }
+  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
opencode	fc2afdc92f	release: v0.15.17	2025-10-25 06:45:23 +00:00
Aiden Cline	fe5e7cfd1b	ignore: rm change	2025-10-25 01:35:43 -05:00
Aiden Cline	98d51dde6a	acp: slash commands, agents, permissions, @ references, code cleanup (#3403 ) Co-authored-by: yetone <yetoneful@gmail.com>	2025-10-25 01:32:46 -05:00
Aiden Cline	5fec5ff424	fix: bedrock reasoning	2025-10-24 17:35:08 -05:00
Adam	fea6a357bc	wip: desktop work	2025-10-24 16:04:44 -05:00
Adam	6b82153263	wip: desktop work	2025-10-24 15:51:31 -05:00
Adam	fa8e714d69	wip: desktop work	2025-10-24 15:43:47 -05:00
Adam	90515bc8c3	wip: desktop work	2025-10-24 15:02:31 -05:00
Adam	e34042e17a	wip: accordion css not going to keep me down	2025-10-24 15:01:28 -05:00
Dax Raad	6ff0ce8bc5	ignore: improve session timeline debugging and message display functionality	2025-10-24 15:45:37 -04:00
Aiden Cline	e88b659545	make plan agent whitelist more conservative (#3424 )	2025-10-24 14:40:36 -05:00
Dax Raad	74048ece2d	ignore: fix new session message loading with retry logic to handle server processing delays	2025-10-24 15:35:53 -04:00
Dax Raad	6646f7264a	ignore: highlight active session in sidebar to improve visual feedback	2025-10-24 15:27:20 -04:00
Dax Raad	18e549a474	ignore: fix session activation after creation to ensure proper state management	2025-10-24 15:24:17 -04:00
Adam	82249754e7	fix: pierre dep	2025-10-24 13:51:24 -05:00
Aiden Cline	5a0228897b	ignore: reword	2025-10-24 13:46:47 -05:00
Adam	e2920c06a3	wip: desktop work	2025-10-24 13:01:22 -05:00
Dax Raad	4da3aa2eb2	add missing dep	2025-10-24 13:43:33 -04:00
Adam	efe7f01f41	wip: desktop work	2025-10-24 12:38:00 -05:00
Adam	9ae3d74adc	wip: desktop work	2025-10-24 12:32:02 -05:00
Adam	477b6c584d	wip: desktop work	2025-10-24 12:16:33 -05:00
Adam	86447b5764	wip: desktop work	2025-10-24 12:16:33 -05:00
Adam	fe8f6d7a3e	wip: desktop work	2025-10-24 12:16:33 -05:00
Adam	59b5f53509	wip: desktop work	2025-10-24 12:16:32 -05:00
Adam	3eb2db98ed	wip: desktop work	2025-10-24 12:16:32 -05:00
Adam	35dec0649d	wip: desktop work	2025-10-24 12:16:32 -05:00
Adam	78a7f79143	wip: ui package demo page	2025-10-24 12:16:32 -05:00
Aiden Cline	707ed72381	adjust edit tool multiple matches error wording (#3418 )	2025-10-24 12:14:49 -05:00
Dax Raad	21880e199d	mroe summary tweaks	2025-10-24 12:37:23 -04:00
Dax Raad	736a85d427	track finish reason	2025-10-24 12:23:24 -04:00
Dax Raad	fb40dc6b20	generate user message title and body	2025-10-24 11:50:42 -04:00
Hieu Nguyen	483fcdaddb	feat: support lua lsp (#3402 )	2025-10-24 10:37:11 -05:00
Andrew Pashynnyk	883b71ac36	fix: respect local config for autoupdate settings (#3408 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-10-24 09:50:09 -05:00
Dax Raad	3e574c71cb	potentially fix fetch failed timeout errors	2025-10-24 09:46:28 -04:00
Dax Raad	4cab66da6c	test cleanup	2025-10-24 09:29:38 -04:00
Dax Raad	7003efd2da	fix summary	2025-10-24 09:24:58 -04:00
Dax Raad	06fe87b361	fix failing migration	2025-10-24 09:20:15 -04:00
GitHub Action	944fda45e6	ignore: update download stats 2025-10-24	2025-10-24 12:05:02 +00:00
opencode	343471b98d	release: v0.15.16	2025-10-24 04:52:27 +00:00
Dax Raad	56528493dc	codex does not have reasoning effort set	2025-10-24 00:29:34 -04:00
opencode	e66156c86e	release: v0.15.15	2025-10-24 03:51:17 +00:00
Dax Raad	8b9b8ca15b	update codex prompt	2025-10-23 23:36:32 -04:00
Haris Gušić	50cc641288	fix: Opencode fails with ENOENT posix_spawn '/usr/bin/rg' (#3396 )	2025-10-23 18:05:01 -05:00
Bernat Pericàs	4c90bf3e07	refactor: whitelist some safe bash tools in Plan agent (#3288 ) Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-23 17:11:08 -05:00
Aiden Cline	4216c1c2a9	adjust changelog generation	2025-10-23 16:16:11 -05:00
Dax Raad	4bd7646ccb	regen sdk	2025-10-23 16:33:00 -04:00
Dax Raad	cee7106054	session summaries in data	2025-10-23 16:28:20 -04:00
Dax Raad	f4dfae0bb0	ignore: diff stuff	2025-10-23 16:04:58 -04:00
Aiden Cline	9b5fe10df6	add flag wildcard parsing support for bash tool (#3390 )	2025-10-23 13:35:09 -05:00
Aiden Cline	b5f336c0ea	test: rm flaky test	2025-10-23 12:52:08 -05:00
Aiden Cline	913c3ae799	tweak: split out title before newline	2025-10-23 12:44:43 -05:00
Thierry Delafontaine	a68111ca77	fix: move `zod-to-json-schema` to `dependencies` (#3387 )	2025-10-23 12:16:03 -05:00
Aiden Cline	5f8a3a574e	docs: fix numbers	2025-10-23 11:53:21 -05:00
Aiden Cline	d69e8e5528	docs: tweak google vertex	2025-10-23 11:49:53 -05:00
Yuku Kotani	e5df43f9b7	docs: Add Google Vertex AI provider documentation (#3349 )	2025-10-23 11:44:06 -05:00
Andrew Pashynnyk	3c7b229d8b	fix: allow `tool.execute.after` hook to modify MCP tool output (#3381 )	2025-10-23 10:38:55 -05:00
Mani Sundararajan	9ab4414aef	docs: rm winget as a recommended installation method under windows (#3382 ) Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com>	2025-10-23 09:25:42 -05:00
GitHub Action	c2cf6fb904	ignore: update download stats 2025-10-23	2025-10-23 12:04:55 +00:00
opencode	5e69bdbef4	release: v0.15.14	2025-10-23 05:55:28 +00:00
Yesh Yendamuri	f81e28c673	feat: add model management to ACP sessions (#3358 )	2025-10-23 00:43:28 -05:00
Aiden Cline	61899d4fa7	regen sdk	2025-10-22 23:00:03 -05:00
Aiden Cline	7c7ebb0a9d	feat: retry parts (#3369 )	2025-10-22 18:31:36 -05:00
Dax Raad	9def7cff2d	summary tweaks	2025-10-22 19:03:08 -04:00
geril07	c2ef930d2a	add option to allow agent switches to not change model (#3356 )	2025-10-22 17:51:46 -05:00
Adam	3c3d2f5a6e	wip: desktop work	2025-10-22 17:51:16 -05:00
Dax Raad	f435049d36	sync	2025-10-22 18:49:57 -04:00
Dax Raad	1f80de2fa6	core: add experimental turn summarization to compact conversation history	2025-10-22 18:33:46 -04:00
Adam	f194a784b0	wip: desktop work	2025-10-22 17:33:08 -05:00
Adam	89b703c387	wip: desktop work	2025-10-22 17:31:49 -05:00
Aiden Cline	eff12cb484	vscode: eslint fix	2025-10-22 17:17:47 -05:00
Aiden Cline	593e89b4f4	vscode: fix script	2025-10-22 17:11:51 -05:00
Aiden Cline	4d3f703715	vscode: adjust tsconfig	2025-10-22 16:43:06 -05:00
Aiden Cline	123dcc10cc	ignore: cleanup bun.lock w/ bun i	2025-10-22 15:34:41 -05:00
Dax Raad	28d8af48a0	add parent id to assistant messages	2025-10-22 15:01:13 -04:00
Kyle Galbraith	10ff6e9830	docs: fix typo in SDK documentation (#3355 )	2025-10-22 11:43:28 -05:00
theVinchi	a7b43d82ab	add Amazon Nova models to us-* prefix requirement list (#3357 )	2025-10-22 11:41:38 -05:00
Aiden Cline	9005fd31ed	tweak	2025-10-22 11:29:10 -05:00
Aiden Cline	d2bded23c3	tweak	2025-10-22 11:28:06 -05:00
Aiden Cline	c0cbc37f85	tweak: model priority	2025-10-22 11:12:32 -05:00
Aiden Cline	9df61055e2	change default title model	2025-10-22 10:41:08 -05:00
GitHub Action	074136b1e8	ignore: update download stats 2025-10-22	2025-10-22 12:04:58 +00:00
Affaan Mustafa	8db5951287	feat: Improve editor detection with auto-discovery and better error messages (#3155 ) Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com>	2025-10-21 20:49:42 -05:00
Haris Gušić	97c7e941eb	fix: opencode run shouldn't print to stderr (#3341 )	2025-10-21 19:53:09 -05:00
Aiden Cline	354f5c3281	ignore: fix acp test (#3339 )	2025-10-21 15:27:59 -05:00
opencode	833706cda4	release: v0.15.13	2025-10-21 20:24:20 +00:00
Aiden Cline	2a951cea38	ignore: reword	2025-10-21 14:43:34 -05:00
Dax Raad	d9a8d2032a	fix sourcemapping so errors show proper stack trace	2025-10-21 15:32:24 -04:00
Dax Raad	d7cdabe8b7	refactor acp args	2025-10-21 15:24:09 -04:00
Aiden Cline	e7c74d13cc	ignore: reword contributing.md	2025-10-21 14:12:33 -05:00
opencode	6ac5a447c2	release: v0.15.12	2025-10-21 17:31:56 +00:00
Aiden Cline	cb4670e6de	ignore: add label	2025-10-21 11:12:52 -05:00
Aiden Cline	ca0f3902b7	fix: provider option transforms (#3331 )	2025-10-21 11:08:21 -05:00
Dax Raad	e9996342a7	core: provide line-level statistics in file diffs to help users understand the scale of changes	2025-10-21 11:54:41 -04:00
opencode	a84826061d	release: v0.15.11	2025-10-21 15:04:22 +00:00
Dax Raad	7a20f77ebf	core: improve error handling with console output for debugging	2025-10-21 10:55:10 -04:00
Giuseppe Rota	731122bf99	fix(acp): use newer acp package (#3317 )	2025-10-21 09:35:09 -05:00
GitHub Action	f9036734eb	ignore: update download stats 2025-10-21	2025-10-21 12:06:20 +00:00
kcrommett	a99bd3aa2c	tweak: adjust file api to encode images (#3292 )	2025-10-21 00:52:39 -05:00
zWing	96efede846	fix: openai options when using @ai-sdk/azure (#3315 )	2025-10-20 23:30:13 -05:00
Cheol Kang	2f66055d25	feat: add -f/--file flag to opencode run command (#3295 ) Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com> Co-authored-by: Aiden Cline <aidenpcline@gmail.com>	2025-10-20 23:25:54 -05:00
opencode	6995dab1dc	release: v0.15.10	2025-10-20 22:21:03 +00:00
Dax Raad	a0a09f421c	core: add session diff API to show file changes between snapshots	2025-10-20 17:59:26 -04:00
Joe Schmitt	f3f21194ae	feat: Add ACP (Agent Client Protocol) support (#2947 ) Co-authored-by: opencode-bot <devnull@opencode.local> Co-authored-by: Dax Raad <d@ironbay.co> Co-authored-by: GitHub Action <action@github.com>	2025-10-20 16:55:22 -05:00
opencode	835fa9fb81	release: v0.15.9	2025-10-20 21:16:57 +00:00
Aiden Cline	96ae6d51aa	ignore: link labels	2025-10-20 16:02:23 -05:00
Frank	075ef0fa34	wip: share	2025-10-20 16:17:51 -04:00
Aiden Cline	89b72e4442	fix: bash tool permission merges (#3302 )	2025-10-20 15:15:14 -05:00
Frank	7a7b3c6315	wip: zen	2025-10-20 13:22:43 -04:00
Rui Ferrão	3d48c14d29	docs: clarify the effects of the subtask command option with primary … (#3299 )	2025-10-20 12:16:09 -05:00
GitHub Action	bfa79ed44b	ignore: update download stats 2025-10-20	2025-10-20 12:04:59 +00:00
Hieu Nguyen	4d8268c818	feat: support astro lsp (#3242 )	2025-10-19 22:49:06 -05:00
Squibid	95d413bec6	theme: add mellow theme (#3198 )	2025-10-19 22:34:04 -05:00
Joscha Götzer	1cb5a70382	feat(theme): Add Night Owl theme (#3269 )	2025-10-19 22:30:04 -05:00
Walter	6adc16ca8a	fix(tui): Allow modals to handle ESC key before force closing (#3279 )	2025-10-19 22:16:54 -05:00
Zeldris	10ebe9ae09	docs: add scoop & winget to readme (#3215 )	2025-10-19 21:50:51 -05:00
Aiden Cline	43a07c6aca	hide invalid option	2025-10-19 20:51:33 -05:00
Aiden Cline	5d3a88f34f	fix: snapshot undo bug (#3290 )	2025-10-19 18:42:34 -05:00
Ivan Uhalin	e47edfffe4	docs: fix Grep by Vercel link in documentation (#3280 )	2025-10-19 11:51:57 -05:00
GitHub Action	141097fc73	ignore: update download stats 2025-10-19	2025-10-19 12:04:24 +00:00
Aiden Cline	c8898463a7	ignore: adjust template	2025-10-18 23:45:01 -05:00
Aiden Cline	1c7bd6365e	replace all $ARGUMENTS (#3276 )	2025-10-18 23:37:17 -05:00
Aiden Cline	290d15a80f	ignore: add version to bug template	2025-10-18 14:56:06 -05:00
Aiden Cline	233a018fe5	docs: contributing.md (#3248 ) Co-authored-by: Jay <air@live.ca>	2025-10-18 14:10:14 -05:00
opencode	d69beec087	release: v0.15.8	2025-10-18 18:36:52 +00:00
Aiden Cline	1f869bccc1	make compact interruptable (#3251 )	2025-10-18 11:49:29 -05:00
GitHub Action	8da8c9e78c	ignore: update download stats 2025-10-18	2025-10-18 12:04:14 +00:00
Adam	335d833655	wip: desktop work	2025-10-17 15:22:11 -05:00
Haris Gušić	1dba01e057	Improve typo directory error (#3247 )	2025-10-17 14:34:37 -05:00
Jay V	a3de43f3de	ignore: clarify that workspaces are free for teams during beta	2025-10-17 15:19:19 -04:00
Jay V	22ad4f5365	ignore: help users discover that teams feature is free during beta	2025-10-17 14:33:21 -04:00
Jay V	5bfbec60b5	docs: clarify team collaboration features and pricing	2025-10-17 13:58:10 -04:00
Adam	cc18b58ff9	wip: desktop work	2025-10-17 12:07:58 -05:00
Adam	887a819f24	wip: desktop work	2025-10-17 12:06:36 -05:00
mgrachten	fe8b3a2515	set 755 permissions (#3237 )	2025-10-17 10:42:42 -05:00
GitHub Action	86079353ef	ignore: update download stats 2025-10-17	2025-10-17 12:04:43 +00:00
Frank	b7c8690414	wip: zen	2025-10-17 02:23:45 -04:00
Frank	c25b9bf65a	wip: zen	2025-10-17 01:15:25 -04:00
Matt Gillard	ddb2e6957c	added AU inference for bedrock haiku 4.5 (#3206 ) Co-authored-by: Matt Gillard <matt-github@gillard.biz>	2025-10-16 23:48:41 -05:00
Frank	a590b32a10	wip: zen	2025-10-17 00:26:00 -04:00
Frank	5f7bba11fd	wip: zen	2025-10-16 23:43:49 -04:00
Frank	4663ea5faa	wip: zen	2025-10-16 23:19:25 -04:00
Frank	dd581e8577	wip: zen	2025-10-17 03:17:07 +00:00