release: v1.0.206

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

.github/workflows/docs-update.yml

@@ -0,0 +1,69 @@
+name: Docs Update
+
+on:
+  schedule:
+    - cron: "0 */12 * * *"
+  workflow_dispatch:
+
+jobs:
+  update-docs:
+    if: github.repository == 'sst/opencode'
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    permissions:
+      id-token: write
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Fetch full history to access commits
+
+      - name: Setup Bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Get recent commits
+        id: commits
+        run: |
+          COMMITS=$(git log --since="4 hours ago" --pretty=format:"- %h %s" 2>/dev/null || echo "")
+          if [ -z "$COMMITS" ]; then
+            echo "No commits in the last 4 hours"
+            echo "has_commits=false" >> $GITHUB_OUTPUT
+          else
+            echo "has_commits=true" >> $GITHUB_OUTPUT
+            {
+              echo "list<<EOF"
+              echo "$COMMITS"
+              echo "EOF"
+            } >> $GITHUB_OUTPUT
+          fi
+
+      - name: Run opencode
+        if: steps.commits.outputs.has_commits == 'true'
+        uses: sst/opencode/github@latest
+        env:
+          OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
+        with:
+          model: opencode/gpt-5.2
+          agent: docs
+          prompt: |
+            Review the following commits from the last 4 hours and identify any new features that may need documentation.
+
+            <recent_commits>
+            ${{ steps.commits.outputs.list }}
+            </recent_commits>
+
+            Steps:
+            1. For each commit that looks like a new feature or significant change:
+               - Read the changed files to understand what was added
+               - Check if the feature is already documented in packages/web/src/content/docs/*
+            2. If you find undocumented features:
+               - Update the relevant documentation files in packages/web/src/content/docs/*
+               - Follow the existing documentation style and structure
+               - Make sure to document the feature clearly with examples where appropriate
+            3. If all new features are already documented, report that no updates are needed
+            4. If you are creating a new documentation file be sure to update packages/web/astro.config.mjs too.
+
+            Focus on user-facing features and API changes. Skip internal refactors, bug fixes, and test updates unless they affect user-facing behavior.
+            Don't feel the need to document every little thing. It is perfectly okay to make 0 changes at all.
+            Try to keep documentation only for large features or changes that already have a good spot to be documented.

.github/workflows/generate.yml

@@ -2,11 +2,8 @@ name: generate
 
 on:
   push:
-    branches-ignore:
-      - production
-  pull_request:
-    branches-ignore:
-      - production
+    branches:
+      - dev
   workflow_dispatch:
 
 jobs:
@@ -14,6 +11,7 @@ jobs:
     runs-on: blacksmith-4vcpu-ubuntu-2404
     permissions:
       contents: write
+      pull-requests: write
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -25,14 +23,29 @@ jobs:
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
-      - name: Generate SDK
-        run: |
-          bun ./packages/sdk/js/script/build.ts
-          (cd packages/opencode && bun dev generate > ../sdk/openapi.json)
-          bun x prettier --write packages/sdk/openapi.json
+      - name: Generate
+        run: ./script/generate.ts
 
-      - name: Format
-        run: ./script/format.ts
-        env:
-          CI: true
-          PUSH_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
+      - name: Commit and push
+        run: |
+          if [ -z "$(git status --porcelain)" ]; then
+            echo "No changes to commit"
+            exit 0
+          fi
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add -A
+          git commit -m "chore: generate"
+          git push origin HEAD:${{ github.ref_name }} --no-verify
+          # if ! git push origin HEAD:${{ github.event.pull_request.head.ref || github.ref_name }} --no-verify; then
+          #   echo ""
+          #   echo "============================================"
+          #   echo "Failed to push generated code."
+          #   echo "Please run locally and push:"
+          #   echo ""
+          #   echo "  ./script/generate.ts"
+          #   echo "  git add -A && git commit -m \"chore: generate\" && git push"
+          #   echo ""
+          #   echo "============================================"
+          #   exit 1
+          # fi

.github/workflows/publish.yml

@@ -41,21 +41,9 @@ jobs:
 
       - uses: ./.github/actions/setup-bun
 
-      - name: Setup SSH for AUR
-        if: inputs.bump || inputs.version
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y pacman-package-manager
-          mkdir -p ~/.ssh
-          echo "${{ secrets.AUR_KEY }}" > ~/.ssh/id_rsa
-          chmod 600 ~/.ssh/id_rsa
-          git config --global user.email "opencode@sst.dev"
-          git config --global user.name "opencode"
-          ssh-keyscan -H aur.archlinux.org >> ~/.ssh/known_hosts || true
-
       - name: Install OpenCode
         if: inputs.bump || inputs.version
-        run: bun i -g opencode-ai@1.0.143
+        run: bun i -g opencode-ai@1.0.169
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
@@ -75,9 +63,15 @@ jobs:
           node-version: "24"
           registry-url: "https://registry.npmjs.org"
 
+      - name: Setup Git Identity
+        run: |
+          git config --global user.email "opencode@sst.dev"
+          git config --global user.name "opencode"
+          git remote set-url origin https://x-access-token:${{ secrets.SST_GITHUB_TOKEN }}@github.com/${{ github.repository }}
+
       - name: Publish
         id: publish
-        run: ./script/publish.ts
+        run: ./script/publish-start.ts
         env:
           OPENCODE_BUMP: ${{ inputs.bump }}
           OPENCODE_VERSION: ${{ inputs.version }}
@@ -85,9 +79,16 @@ jobs:
           AUR_KEY: ${{ secrets.AUR_KEY }}
           GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
           NPM_CONFIG_PROVENANCE: false
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: opencode-cli
+          path: packages/opencode/dist
+
     outputs:
-      releaseId: ${{ steps.publish.outputs.releaseId }}
-      tagName: ${{ steps.publish.outputs.tagName }}
+      release: ${{ steps.publish.outputs.release }}
+      tag: ${{ steps.publish.outputs.tag }}
+      version: ${{ steps.publish.outputs.version }}
 
   publish-tauri:
     needs: publish
@@ -104,12 +105,14 @@ jobs:
             target: x86_64-pc-windows-msvc
           - host: blacksmith-4vcpu-ubuntu-2404
             target: x86_64-unknown-linux-gnu
+          - host: blacksmith-4vcpu-ubuntu-2404-arm
+            target: aarch64-unknown-linux-gnu
     runs-on: ${{ matrix.settings.host }}
     steps:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-          ref: ${{ needs.publish.outputs.tagName }}
+          ref: ${{ needs.publish.outputs.tag }}
 
       - uses: apple-actions/import-codesign-certs@v2
         if: ${{ runner.os == 'macOS' }}
@@ -148,24 +151,22 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: packages/tauri/src-tauri
+          workspaces: packages/desktop/src-tauri
           shared-key: ${{ matrix.settings.target }}
 
       - name: Prepare
         run: |
-          cd packages/tauri
+          cd packages/desktop
           bun ./scripts/prepare.ts
         env:
-          OPENCODE_BUMP: ${{ inputs.bump }}
-          OPENCODE_VERSION: ${{ inputs.version }}
-          OPENCODE_CHANNEL: latest
+          OPENCODE_VERSION: ${{ needs.publish.outputs.version }}
           NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
           AUR_KEY: ${{ secrets.AUR_KEY }}
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
           RUST_TARGET: ${{ matrix.settings.target }}
           GH_TOKEN: ${{ github.token }}
-          OPENCODE_RELEASE_TAG: ${{ needs.publish.outputs.tagName }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
 
       # Fixes AppImage build issues, can be removed when https://github.com/tauri-apps/tauri/pull/12491 is released
       - name: Install tauri-cli from portable appimage branch
@@ -190,13 +191,13 @@ jobs:
           APPLE_API_KEY: ${{ secrets.APPLE_API_KEY }}
           APPLE_API_KEY_PATH: ${{ runner.temp }}/apple-api-key.p8
         with:
-          projectPath: packages/tauri
+          projectPath: packages/desktop
           uploadWorkflowArtifacts: true
           tauriScript: ${{ (contains(matrix.settings.host, 'ubuntu') && 'cargo tauri') || '' }}
-          args: --target ${{ matrix.settings.target }} --config src-tauri/tauri.prod.conf.json
+          args: --target ${{ matrix.settings.target }} --config ./src-tauri/tauri.prod.conf.json --verbose
           updaterJsonPreferNsis: true
-          releaseId: ${{ needs.publish.outputs.releaseId }}
-          tagName: ${{ needs.publish.outputs.tagName }}
+          releaseId: ${{ needs.publish.outputs.release }}
+          tagName: ${{ needs.publish.outputs.tag }}
           releaseAssetNamePattern: opencode-desktop-[platform]-[arch][ext]
           releaseDraft: true
 
@@ -204,14 +205,29 @@ jobs:
     needs:
       - publish
       - publish-tauri
-    if: needs.publish.outputs.tagName
+    if: needs.publish.outputs.tag
     runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-          ref: ${{ needs.publish.outputs.tagName }}
+          ref: ${{ needs.publish.outputs.tag }}
 
-      - run: gh release edit ${{ needs.publish.outputs.tagName }} --draft=false
+      - uses: ./.github/actions/setup-bun
+
+      - name: Setup SSH for AUR
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pacman-package-manager
+          mkdir -p ~/.ssh
+          echo "${{ secrets.AUR_KEY }}" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          git config --global user.email "opencode@sst.dev"
+          git config --global user.name "opencode"
+          ssh-keyscan -H aur.archlinux.org >> ~/.ssh/known_hosts || true
+
+      - run: ./script/publish-complete.ts
         env:
-          GH_TOKEN: ${{ github.token }}
+          OPENCODE_VERSION: ${{ needs.publish.outputs.version  }}
+          AUR_KEY: ${{ secrets.AUR_KEY }}
+          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}

.github/workflows/review.yml

@@ -64,9 +64,11 @@ jobs:
           Please check all the code changes in this pull request against the style guide, also look for any bugs if they exist. Diffs are important but make sure you read the entire file to get proper context. Make it clear the suggestions are merely suggestions and the human can decide what to do
 
           When critiquing code against the style guide, be sure that the code is ACTUALLY in violation, don't complain about else statements if they already use early returns there. You may complain about excessive nesting though, regardless of else statement usage.
-          When critiquing code style don't be a zealot, we don't like "let" statements but sometimes they are the simpliest option, if someone does a bunch of nesting with let, they should consider using iife (see packages/opencode/src/util.iife.ts)
+          When critiquing code style don't be a zealot, we don't like "let" statements but sometimes they are the simplest option, if someone does a bunch of nesting with let, they should consider using iife (see packages/opencode/src/util.iife.ts)
 
           Use the gh cli to create comments on the files for the violations. Try to leave the comment on the exact line number. If you have a suggested fix include it in a suggestion code block.
+          If you are writing suggested fixes, BE SURE THAT the change you are recommending is actually valid typescript, often I have seen missing closing "}" or other syntax errors.
+          Generally, write a comment instead of writing suggested change if you can help it.
 
           Command MUST be like this.
           \`\`\`

.github/workflows/stale-issues.yml

@@ -0,0 +1,29 @@
+name: "Auto-close stale issues"
+
+on:
+  schedule:
+    - cron: "30 1 * * *" # Daily at 1:30 AM
+  workflow_dispatch:
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/stale@v10
+        with:
+          days-before-stale: 90
+          days-before-close: 7
+          stale-issue-label: "stale"
+          close-issue-message: |
+            [automated] Closing due to 90+ days of inactivity.
+
+            Feel free to reopen if you still need this!
+          stale-issue-message: |
+            [automated] This issue has had no activity for 90 days.
+
+            It will be closed in 7 days if there's no new activity.
+          remove-stale-when-updated: true
+          exempt-issue-labels: "pinned,security,feature-request,on-hold"
+          start-date: "2025-12-27"

.github/workflows/stats.yml

@@ -5,8 +5,11 @@ on:
     - cron: "0 12 * * *" # Run daily at 12:00 UTC
   workflow_dispatch: # Allow manual trigger
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   stats:
+    if: github.repository == 'sst/opencode'
     runs-on: blacksmith-4vcpu-ubuntu-2404
     permissions:
       contents: write

.github/workflows/sync-zed-extension.yml

@@ -2,8 +2,8 @@ name: "sync-zed-extension"
 
 on:
   workflow_dispatch:
-  # release:
-  #   types: [published]
+  release:
+    types: [published]
 
 jobs:
   zed:
@@ -31,4 +31,4 @@ jobs:
         run: |
           ./script/sync-zed.ts ${{ steps.get_tag.outputs.tag }}
         env:
-          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
+          ZED_EXTENSIONS_PAT: ${{ secrets.ZED_EXTENSIONS_PAT }}

.opencode/agent/docs.md

@@ -6,6 +6,8 @@ You are an expert technical documentation writer
 
 You are not verbose
 
+Use a relaxed and friendly tone
+
 The title of the page should be a word or a 2-3 word phrase
 
 The description should be one short line, should not start with "The", should

.opencode/agent/triage.md

@@ -63,8 +63,6 @@ TUI issues potentially caused by our underlying TUI library:
 
 **Do not** add for general TUI bugs.
 
----
-
 When assigning to people here are the following rules:
 
 adamdotdev:

.opencode/skill/test-skill/SKILL.md

@@ -0,0 +1,6 @@
+---
+name: test-skill
+description: use this when asked to test skill
+---
+
+woah this is a test skill

.opencode/tool/github-triage.ts

@@ -1,5 +1,5 @@
 /// <reference path="../env.d.ts" />
-import { Octokit } from "@octokit/rest"
+// import { Octokit } from "@octokit/rest"
 import { tool } from "@opencode-ai/plugin"
 import DESCRIPTION from "./github-triage.txt"
 
@@ -9,6 +9,22 @@ function getIssueNumber(): number {
   return issue
 }
 
+async function githubFetch(endpoint: string, options: RequestInit = {}) {
+  const response = await fetch(`https://api.github.com${endpoint}`, {
+    ...options,
+    headers: {
+      Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+      Accept: "application/vnd.github+json",
+      "Content-Type": "application/json",
+      ...options.headers,
+    },
+  })
+  if (!response.ok) {
+    throw new Error(`GitHub API error: ${response.status} ${response.statusText}`)
+  }
+  return response.json()
+}
+
 export default tool({
   description: DESCRIPTION,
   args: {
@@ -23,7 +39,7 @@ export default tool({
   },
   async execute(args) {
     const issue = getIssueNumber()
-    const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN })
+    // const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN })
     const owner = "sst"
     const repo = "opencode"
 
@@ -41,22 +57,30 @@ export default tool({
       throw new Error("Only opentui issues should be assigned to kommander")
     }
 
-    await octokit.rest.issues.addAssignees({
-      owner,
-      repo,
-      issue_number: issue,
-      assignees: [args.assignee],
+    // await octokit.rest.issues.addAssignees({
+    //   owner,
+    //   repo,
+    //   issue_number: issue,
+    //   assignees: [args.assignee],
+    // })
+    await githubFetch(`/repos/${owner}/${repo}/issues/${issue}/assignees`, {
+      method: "POST",
+      body: JSON.stringify({ assignees: [args.assignee] }),
     })
     results.push(`Assigned @${args.assignee} to issue #${issue}`)
 
     const labels: string[] = args.labels.map((label) => (label === "desktop" ? "web" : label))
 
     if (labels.length > 0) {
-      await octokit.rest.issues.addLabels({
-        owner,
-        repo,
-        issue_number: issue,
-        labels,
+      // await octokit.rest.issues.addLabels({
+      //   owner,
+      //   repo,
+      //   issue_number: issue,
+      //   labels,
+      // })
+      await githubFetch(`/repos/${owner}/${repo}/issues/${issue}/labels`, {
+        method: "POST",
+        body: JSON.stringify({ labels }),
       })
       results.push(`Added labels: ${args.labels.join(", ")}`)
     }

AGENTS.md

@@ -4,31 +4,4 @@
 
 ## Tool Calling
 
-- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environment:
-
-json
-{
-"recipient_name": "multi_tool_use.parallel",
-"parameters": {
-"tool_uses": [
-{
-"recipient_name": "functions.read",
-"parameters": {
-"filePath": "path/to/file.tsx"
-}
-},
-{
-"recipient_name": "functions.read",
-"parameters": {
-"filePath": "path/to/file.ts"
-}
-},
-{
-"recipient_name": "functions.read",
-"parameters": {
-"filePath": "path/to/file.md"
-}
-}
-]
-}
-}
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.

CONTRIBUTING.md

@@ -40,7 +40,7 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
   - `packages/plugin`: Source for `@opencode-ai/plugin`
 
 > [!NOTE]
-> After touching `packages/opencode/src/server/server.ts`, run "./packages/sdk/js/script/build.ts" to regenerate the JS sdk.
+> If you make changes to the API or SDK (e.g. `packages/opencode/src/server/server.ts`), run `./script/generate.ts` to regenerate the SDK and related files.
 
 Please try to follow the [style guide](./STYLE_GUIDE.md)
 
@@ -53,12 +53,12 @@ your debugger via that URL. Other methods can result in breakpoints being mapped
 
 Caveats:
 
-- `*.tsx` files won't have their breakpoints correctly mapped. This seems due to Bun currently not supporting source maps on code transformed
-  via `BunPlugin`s (currently necessary due to our dependency on `@opentui/solid`). Currently, the best you can do in terms of debugging `*.tsx`
-  files is writing a `debugger;` statement. Debugging facilities like stepping won't work, but at least you will be informed if a specific code
-  is triggered.
 - If you want to run the OpenCode TUI and have breakpoints triggered in the server code, you might need to run `bun dev spawn` instead of
   the usual `bun dev`. This is because `bun dev` runs the server in a worker thread and breakpoints might not work there.
+- If `spawn` does not work for you, you can debug the server separately:
+  - Debug server: `bun run --inspect=ws://localhost:6499/ ./src/index.ts serve --port 4096`,
+    then attach TUI with `opencode attach http://localhost:4096`
+  - Debug TUI: `bun run --inspect=ws://localhost:6499/ --conditions=browser ./src/index.ts`
 
 Other tips and tricks:
 

README.md

@@ -30,7 +30,7 @@ scoop bucket add extras; scoop install extras/opencode  # Windows
 choco install opencode             # Windows
 brew install opencode              # macOS and Linux
 paru -S opencode-bin               # Arch Linux
-mise use -g ubi:sst/opencode # Any OS
+mise use -g github:sst/opencode # Any OS
 nix run nixpkgs#opencode           # or github:sst/opencode for latest dev branch
 ```
 
@@ -79,7 +79,7 @@ you can switch between these using the `Tab` key.
   - Asks permission before running bash commands
   - Ideal for exploring unfamiliar codebases or planning changes
 
-Also, included is a **general** subagent for complex searches and multi-step tasks.
+Also, included is a **general** subagent for complex searches and multistep tasks.
 This is used internally and can be invoked using `@general` in messages.
 
 Learn more about [agents](https://opencode.ai/docs/agents).
@@ -98,7 +98,7 @@ If you are working on a project that's related to OpenCode and is using "opencod
 
 ### FAQ
 
-#### How is this different than Claude Code?
+#### How is this different from Claude Code?
 
 It's very similar to Claude Code in terms of capability. Here are the key differences:
 

README.zh-TW.md

@@ -0,0 +1,115 @@
+<p align="center">
+  <a href="https://opencode.ai">
+    <picture>
+      <source srcset="packages/console/app/src/asset/logo-ornate-dark.svg" media="(prefers-color-scheme: dark)">
+      <source srcset="packages/console/app/src/asset/logo-ornate-light.svg" media="(prefers-color-scheme: light)">
+      <img src="packages/console/app/src/asset/logo-ornate-light.svg" alt="OpenCode logo">
+    </picture>
+  </a>
+</p>
+<p align="center">開源的 AI Coding Agent。</p>
+<p align="center">
+  <a href="https://opencode.ai/discord"><img alt="Discord" src="https://img.shields.io/discord/1391832426048651334?style=flat-square&label=discord" /></a>
+  <a href="https://www.npmjs.com/package/opencode-ai"><img alt="npm" src="https://img.shields.io/npm/v/opencode-ai?style=flat-square" /></a>
+  <a href="https://github.com/sst/opencode/actions/workflows/publish.yml"><img alt="Build status" src="https://img.shields.io/github/actions/workflow/status/sst/opencode/publish.yml?style=flat-square&branch=dev" /></a>
+</p>
+
+[![OpenCode Terminal UI](packages/web/src/assets/lander/screenshot.png)](https://opencode.ai)
+
+---
+
+### 安裝
+
+```bash
+# 直接安裝 (YOLO)
+curl -fsSL https://opencode.ai/install | bash
+
+# 套件管理員
+npm i -g opencode-ai@latest        # 也可使用 bun/pnpm/yarn
+scoop bucket add extras; scoop install extras/opencode  # Windows
+choco install opencode             # Windows
+brew install opencode              # macOS 與 Linux
+paru -S opencode-bin               # Arch Linux
+mise use -g github:sst/opencode    # 任何作業系統
+nix run nixpkgs#opencode           # 或使用 github:sst/opencode 以取得最新開發分支
+```
+
+> [!TIP]
+> 安裝前請先移除 0.1.x 以前的舊版本。
+
+### 桌面應用程式 (BETA)
+
+OpenCode 也提供桌面版應用程式。您可以直接從 [發佈頁面 (releases page)](https://github.com/sst/opencode/releases) 或 [opencode.ai/download](https://opencode.ai/download) 下載。
+
+| 平台                  | 下載連結                              |
+| --------------------- | ------------------------------------- |
+| macOS (Apple Silicon) | `opencode-desktop-darwin-aarch64.dmg` |
+| macOS (Intel)         | `opencode-desktop-darwin-x64.dmg`     |
+| Windows               | `opencode-desktop-windows-x64.exe`    |
+| Linux                 | `.deb`, `.rpm`, 或 AppImage           |
+
+```bash
+# macOS (Homebrew Cask)
+brew install --cask opencode-desktop
+```
+
+#### 安裝目錄
+
+安裝腳本會依據以下優先順序決定安裝路徑：
+
+1. `$OPENCODE_INSTALL_DIR` - 自定義安裝目錄
+2. `$XDG_BIN_DIR` - 符合 XDG 基礎目錄規範的路徑
+3. `$HOME/bin` - 標準使用者執行檔目錄 (若存在或可建立)
+4. `$HOME/.opencode/bin` - 預設備用路徑
+
+```bash
+# 範例
+OPENCODE_INSTALL_DIR=/usr/local/bin curl -fsSL https://opencode.ai/install | bash
+XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
+```
+
+### Agents
+
+OpenCode 內建了兩種 Agent，您可以使用 `Tab` 鍵快速切換。
+
+- **build** - 預設模式，具備完整權限的 Agent，適用於開發工作。
+- **plan** - 唯讀模式，適用於程式碼分析與探索。
+  - 預設禁止修改檔案。
+  - 執行 bash 指令前會詢問權限。
+  - 非常適合用來探索陌生的程式碼庫或規劃變更。
+
+此外，OpenCode 還包含一個 **general** 子 Agent，用於處理複雜搜尋與多步驟任務。此 Agent 供系統內部使用，亦可透過在訊息中輸入 `@general` 來呼叫。
+
+了解更多關於 [Agents](https://opencode.ai/docs/agents) 的資訊。
+
+### 線上文件
+
+關於如何設定 OpenCode 的詳細資訊，請參閱我們的 [**官方文件**](https://opencode.ai/docs)。
+
+### 參與貢獻
+
+如果您有興趣參與 OpenCode 的開發，請在提交 Pull Request 前先閱讀我們的 [貢獻指南 (Contributing Docs)](./CONTRIBUTING.md)。
+
+### 基於 OpenCode 進行開發
+
+如果您正在開發與 OpenCode 相關的專案，並在名稱中使用了 "opencode"（例如 "opencode-dashboard" 或 "opencode-mobile"），請在您的 README 中加入聲明，說明該專案並非由 OpenCode 團隊開發，且與我們沒有任何隸屬關係。
+
+### 常見問題 (FAQ)
+
+#### 這跟 Claude Code 有什麼不同？
+
+在功能面上與 Claude Code 非常相似。以下是關鍵差異：
+
+- 100% 開源。
+- 不綁定特定的服務提供商。雖然我們推薦使用透過 [OpenCode Zen](https://opencode.ai/zen) 提供的模型，但 OpenCode 也可搭配 Claude, OpenAI, Google 甚至本地模型使用。隨著模型不斷演進，彼此間的差距會縮小且價格會下降，因此具備「不限廠商 (provider-agnostic)」的特性至關重要。
+- 內建 LSP (語言伺服器協定) 支援。
+- 專注於終端機介面 (TUI)。OpenCode 由 Neovim 愛好者與 [terminal.shop](https://terminal.shop) 的創作者打造；我們將不斷挑戰終端機介面的極限。
+- 客戶端/伺服器架構 (Client/Server Architecture)。這讓 OpenCode 能夠在您的電腦上運行的同時，由行動裝置進行遠端操控。這意味著 TUI 前端只是眾多可能的客戶端之一。
+
+#### 另一個同名的 Repo 是什麼？
+
+另一個名稱相近的儲存庫與本專案無關。您可以點此[閱讀背後的故事](https://x.com/thdxr/status/1933561254481666466)。
+
+---
+
+**加入我們的社群** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

STATS.md

@@ -174,3 +174,13 @@
 | 2025-12-16 | 1,120,477 (+26,845) | 1,078,022 (+18,944) | 2,198,499 (+45,789) |
 | 2025-12-17 | 1,151,067 (+30,590) | 1,097,661 (+19,639) | 2,248,728 (+50,229) |
 | 2025-12-18 | 1,178,658 (+27,591) | 1,113,418 (+15,757) | 2,292,076 (+43,348) |
+| 2025-12-19 | 1,203,485 (+24,827) | 1,129,698 (+16,280) | 2,333,183 (+41,107) |
+| 2025-12-20 | 1,223,000 (+19,515) | 1,146,258 (+16,560) | 2,369,258 (+36,075) |
+| 2025-12-21 | 1,242,675 (+19,675) | 1,158,909 (+12,651) | 2,401,584 (+32,326) |
+| 2025-12-22 | 1,262,522 (+19,847) | 1,169,121 (+10,212) | 2,431,643 (+30,059) |
+| 2025-12-23 | 1,286,548 (+24,026) | 1,186,439 (+17,318) | 2,472,987 (+41,344) |
+| 2025-12-24 | 1,309,323 (+22,775) | 1,203,767 (+17,328) | 2,513,090 (+40,103) |
+| 2025-12-25 | 1,333,032 (+23,709) | 1,217,283 (+13,516) | 2,550,315 (+37,225) |
+| 2025-12-26 | 1,352,411 (+19,379) | 1,227,615 (+10,332) | 2,580,026 (+29,711) |
+| 2025-12-27 | 1,371,771 (+19,360) | 1,238,236 (+10,621) | 2,610,007 (+29,981) |
+| 2025-12-28 | 1,390,388 (+18,617) | 1,245,690 (+7,454)  | 2,636,078 (+26,071) |

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1765934234,
-        "narHash": "sha256-pJjWUzNnjbIAMIc5gRFUuKCDQ9S1cuh3b2hKgA7Mc4A=",
+        "lastModified": 1766840161,
+        "narHash": "sha256-Ss/LHpJJsng8vz1Pe33RSGIWUOcqM1fjrehjUkdrWio=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "af84f9d270d404c17699522fab95bbf928a2d92f",
+        "rev": "3edc4a30ed3903fdf6f90c837f961fa6b49582d1",
         "type": "github"
       },
       "original": {

github/action.yml

@@ -9,6 +9,10 @@ inputs:
     description: "Model to use"
     required: true
 
+  agent:
+    description: "Agent to use. Must be a primary agent. Falls back to default_agent from config or 'build' if not found."
+    required: false
+
   share:
     description: "Share the opencode session (defaults to true for public repos)"
     required: false
@@ -26,6 +30,10 @@ inputs:
     description: "Comma-separated list of trigger phrases (case-insensitive). Defaults to '/opencode,/oc'"
     required: false
 
+  oidc_base_url:
+    description: "Base URL for OIDC token exchange API. Only required when running a custom GitHub App install. Defaults to https://api.opencode.ai"
+    required: false
+
 runs:
   using: "composite"
   steps:
@@ -58,7 +66,9 @@ runs:
       run: opencode github run
       env:
         MODEL: ${{ inputs.model }}
+        AGENT: ${{ inputs.agent }}
         SHARE: ${{ inputs.share }}
         PROMPT: ${{ inputs.prompt }}
         USE_GITHUB_TOKEN: ${{ inputs.use_github_token }}
         MENTIONS: ${{ inputs.mentions }}
+        OIDC_BASE_URL: ${{ inputs.oidc_base_url }}

github/index.ts

@@ -318,6 +318,10 @@ function useEnvRunUrl() {
   return `/${repo.owner}/${repo.repo}/actions/runs/${runId}`
 }
 
+function useEnvAgent() {
+  return process.env["AGENT"] || undefined
+}
+
 function useEnvShare() {
   const value = process.env["SHARE"]
   if (!value) return undefined
@@ -570,24 +574,49 @@ async function subscribeSessionEvents() {
 }
 
 async function summarize(response: string) {
-  const payload = useContext().payload as IssueCommentEvent
   try {
     return await chat(`Summarize the following in less than 40 characters:\n\n${response}`)
   } catch (e) {
+    if (isScheduleEvent()) {
+      return "Scheduled task changes"
+    }
+    const payload = useContext().payload as IssueCommentEvent
     return `Fix issue: ${payload.issue.title}`
   }
 }
 
+async function resolveAgent(): Promise<string | undefined> {
+  const envAgent = useEnvAgent()
+  if (!envAgent) return undefined
+
+  // Validate the agent exists and is a primary agent
+  const agents = await client.agent.list<true>()
+  const agent = agents.data?.find((a) => a.name === envAgent)
+
+  if (!agent) {
+    console.warn(`agent "${envAgent}" not found. Falling back to default agent`)
+    return undefined
+  }
+
+  if (agent.mode === "subagent") {
+    console.warn(`agent "${envAgent}" is a subagent, not a primary agent. Falling back to default agent`)
+    return undefined
+  }
+
+  return envAgent
+}
+
 async function chat(text: string, files: PromptFiles = []) {
   console.log("Sending message to opencode...")
   const { providerID, modelID } = useEnvModel()
+  const agent = await resolveAgent()
 
   const chat = await client.session.chat<true>({
     path: session,
     body: {
       providerID,
       modelID,
-      agent: "build",
+      agent,
       parts: [
         {
           type: "text",

infra/app.ts

@@ -44,3 +44,12 @@ new sst.cloudflare.x.Astro("Web", {
     VITE_API_URL: api.url.apply((url) => url!),
   },
 })
+
+new sst.cloudflare.StaticSite("WebApp", {
+  domain: "app." + domain,
+  path: "packages/app",
+  build: {
+    command: "bun turbo build",
+    output: "./dist",
+  },
+})

infra/console.ts

@@ -103,6 +103,7 @@ const ZEN_MODELS = [
   new sst.Secret("ZEN_MODELS3"),
   new sst.Secret("ZEN_MODELS4"),
   new sst.Secret("ZEN_MODELS5"),
+  new sst.Secret("ZEN_MODELS6"),
 ]
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")
 const AUTH_API_URL = new sst.Linkable("AUTH_API_URL", {
@@ -118,6 +119,7 @@ const gatewayKv = new sst.cloudflare.Kv("GatewayKv")
 ////////////////
 
 const bucket = new sst.cloudflare.Bucket("ZenData")
+const bucketNew = new sst.cloudflare.Bucket("ZenDataNew")
 
 const AWS_SES_ACCESS_KEY_ID = new sst.Secret("AWS_SES_ACCESS_KEY_ID")
 const AWS_SES_SECRET_ACCESS_KEY = new sst.Secret("AWS_SES_SECRET_ACCESS_KEY")
@@ -136,6 +138,7 @@ new sst.cloudflare.x.SolidStart("Console", {
   path: "packages/console/app",
   link: [
     bucket,
+    bucketNew,
     database,
     AUTH_API_URL,
     STRIPE_WEBHOOK_SECRET,

infra/desktop.ts

@@ -1,10 +0,0 @@
-import { domain } from "./stage"
-
-new sst.cloudflare.StaticSite("Desktop", {
-  domain: "desktop." + domain,
-  path: "packages/desktop",
-  build: {
-    command: "bun turbo build",
-    output: "./dist",
-  },
-})

install

@@ -7,7 +7,51 @@ RED='\033[0;31m'
 ORANGE='\033[38;5;214m'
 NC='\033[0m' # No Color
 
+usage() {
+    cat <<EOF
+OpenCode Installer
+
+Usage: install.sh [options]
+
+Options:
+    -h, --help              Display this help message
+    -v, --version <version> Install a specific version (e.g., 1.0.180)
+        --no-modify-path    Don't modify shell config files (.zshrc, .bashrc, etc.)
+
+Examples:
+    curl -fsSL https://opencode.ai/install | bash
+    curl -fsSL https://opencode.ai/install | bash -s -- --version 1.0.180
+EOF
+}
+
 requested_version=${VERSION:-}
+no_modify_path=false
+
+while [[ $# -gt 0 ]]; do
+    case "$1" in
+        -h|--help)
+            usage
+            exit 0
+            ;;
+        -v|--version)
+            if [[ -n "${2:-}" ]]; then
+                requested_version="$2"
+                shift 2
+            else
+                echo -e "${RED}Error: --version requires a version argument${NC}"
+                exit 1
+            fi
+            ;;
+        --no-modify-path)
+            no_modify_path=true
+            shift
+            ;;
+        *)
+            echo -e "${ORANGE}Warning: Unknown option '$1'${NC}" >&2
+            shift
+            ;;
+    esac
+done
 
 raw_os=$(uname -s)
 os=$(echo "$raw_os" | tr '[:upper:]' '[:lower:]')
@@ -111,8 +155,18 @@ if [ -z "$requested_version" ]; then
         exit 1
     fi
 else
+    # Strip leading 'v' if present
+    requested_version="${requested_version#v}"
     url="https://github.com/sst/opencode/releases/download/v${requested_version}/$filename"
     specific_version=$requested_version
+    
+    # Verify the release exists before downloading
+    http_status=$(curl -sI -o /dev/null -w "%{http_code}" "https://github.com/sst/opencode/releases/tag/v${requested_version}")
+    if [ "$http_status" = "404" ]; then
+        echo -e "${RED}Error: Release v${requested_version} not found${NC}"
+        echo -e "${MUTED}Available releases: https://github.com/sst/opencode/releases${NC}"
+        exit 1
+    fi
 fi
 
 print_message() {
@@ -304,42 +358,42 @@ case $current_shell in
     ;;
 esac
 
-config_file=""
-for file in $config_files; do
-    if [[ -f $file ]]; then
-        config_file=$file
-        break
+if [[ "$no_modify_path" != "true" ]]; then
+    config_file=""
+    for file in $config_files; do
+        if [[ -f $file ]]; then
+            config_file=$file
+            break
+        fi
+    done
+
+    if [[ -z $config_file ]]; then
+        print_message warning "No config file found for $current_shell. You may need to manually add to PATH:"
+        print_message info "  export PATH=$INSTALL_DIR:\$PATH"
+    elif [[ ":$PATH:" != *":$INSTALL_DIR:"* ]]; then
+        case $current_shell in
+            fish)
+                add_to_path "$config_file" "fish_add_path $INSTALL_DIR"
+            ;;
+            zsh)
+                add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
+            ;;
+            bash)
+                add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
+            ;;
+            ash)
+                add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
+            ;;
+            sh)
+                add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
+            ;;
+            *)
+                export PATH=$INSTALL_DIR:$PATH
+                print_message warning "Manually add the directory to $config_file (or similar):"
+                print_message info "  export PATH=$INSTALL_DIR:\$PATH"
+            ;;
+        esac
     fi
-done
-
-if [[ -z $config_file ]]; then
-    print_message error "No config file found for $current_shell. Checked files: ${config_files[@]}"
-    exit 1
-fi
-
-if [[ ":$PATH:" != *":$INSTALL_DIR:"* ]]; then
-    case $current_shell in
-        fish)
-            add_to_path "$config_file" "fish_add_path $INSTALL_DIR"
-        ;;
-        zsh)
-            add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
-        ;;
-        bash)
-            add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
-        ;;
-        ash)
-            add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
-        ;;
-        sh)
-            add_to_path "$config_file" "export PATH=$INSTALL_DIR:\$PATH"
-        ;;
-        *)
-            export PATH=$INSTALL_DIR:$PATH
-            print_message warning "Manually add the directory to $config_file (or similar):"
-            print_message info "  export PATH=$INSTALL_DIR:\$PATH"
-        ;;
-    esac
 fi
 
 if [ -n "${GITHUB_ACTIONS-}" ] && [ "${GITHUB_ACTIONS}" == "true" ]; then

nix/hashes.json

@@ -1,3 +1,3 @@
 {
-  "nodeModules": "sha256-g6XHWk9IoDoeXbvENs+U2fqk185xKMLb0BRopCbXaIk="
+  "nodeModules": "sha256-lloUZt5mLyNWAcbQrJB4wGUKvKu24WFEhOLfZD5/FMg="
 }

package.json

@@ -31,7 +31,7 @@
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/diffs": "1.0.0-beta.3",
+      "@pierre/diffs": "1.0.2",
       "@solid-primitives/storage": "4.3.3",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
@@ -40,10 +40,13 @@
       "hono-openapi": "1.1.2",
       "fuzzysort": "3.1.0",
       "luxon": "3.6.1",
+      "marked": "17.0.1",
+      "marked-shiki": "1.2.1",
       "typescript": "5.8.2",
       "@typescript/native-preview": "7.0.0-dev.20251207.1",
       "zod": "4.1.8",
       "remeda": "2.26.0",
+      "shiki": "3.20.0",
       "solid-list": "0.3.0",
       "tailwindcss": "4.1.11",
       "virtua": "0.42.3",
@@ -56,6 +59,7 @@
     }
   },
   "devDependencies": {
+    "@actions/artifact": "5.0.1",
     "@tsconfig/bun": "catalog:",
     "husky": "9.1.7",
     "prettier": "3.6.2",
@@ -64,7 +68,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.933.0",
-    "@octokit/rest": "22.0.1",
+    "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/script": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
     "typescript": "catalog:"
@@ -81,7 +85,6 @@
   "trustedDependencies": [
     "esbuild",
     "protobufjs",
-    "sharp",
     "tree-sitter",
     "tree-sitter-bash",
     "web-tree-sitter"

packages/app/.gitignore

@@ -0,0 +1 @@
+src/assets/theme.css

packages/app/README.md

@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

packages/app/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en" style="background-color: var(--background-base)">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>OpenCode</title>
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="theme-color" content="#F8F7F7" />
+    <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
+    <meta property="og:image" content="/social-share.png" />
+    <meta property="twitter:image" content="/social-share.png" />
+    <!-- Theme preload script - applies cached theme to avoid FOUC -->
+    <script id="oc-theme-preload-script">
+      ;(function () {
+        var themeId = localStorage.getItem("opencode-theme-id")
+        if (!themeId) return
+
+        var scheme = localStorage.getItem("opencode-color-scheme") || "system"
+        var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
+        var mode = isDark ? "dark" : "light"
+
+        document.documentElement.dataset.theme = themeId
+        document.documentElement.dataset.colorScheme = mode
+
+        if (themeId === "oc-1") return
+
+        var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
+        if (css) {
+          var style = document.createElement("style")
+          style.id = "oc-theme-preload"
+          style.textContent =
+            ":root{color-scheme:" +
+            mode +
+            ";--text-mix-blend-mode:" +
+            (isDark ? "plus-lighter" : "multiply") +
+            ";" +
+            css +
+            "}"
+          document.head.appendChild(style)
+        }
+      })()
+    </script>
+  </head>
+  <body class="antialiased overscroll-none text-12-regular overflow-hidden">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="flex flex-col h-screen"></div>
+    <script src="/src/entry.tsx" type="module"></script>
+  </body>
+</html>

packages/app/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@opencode-ai/app",
+  "version": "1.0.206",
+  "description": "",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./vite": "./vite.js"
+  },
+  "scripts": {
+    "typecheck": "tsgo -b",
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.0.11",
+    "@tailwindcss/vite": "catalog:",
+    "@tsconfig/bun": "1.0.9",
+    "@types/bun": "catalog:",
+    "@types/luxon": "catalog:",
+    "@types/node": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-icons-spritesheet": "3.0.1",
+    "vite-plugin-solid": "catalog:"
+  },
+  "dependencies": {
+    "@kobalte/core": "catalog:",
+    "@opencode-ai/sdk": "workspace:*",
+    "@opencode-ai/ui": "workspace:*",
+    "@opencode-ai/util": "workspace:*",
+    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/active-element": "2.1.3",
+    "@solid-primitives/audio": "1.4.2",
+    "@solid-primitives/event-bus": "1.1.2",
+    "@solid-primitives/media": "2.3.3",
+    "@solid-primitives/resize-observer": "2.1.3",
+    "@solid-primitives/scroll": "2.1.3",
+    "@solid-primitives/storage": "catalog:",
+    "@solid-primitives/websocket": "1.3.1",
+    "@solidjs/meta": "catalog:",
+    "@solidjs/router": "catalog:",
+    "@thisbeyond/solid-dnd": "0.7.5",
+    "diff": "catalog:",
+    "fuzzysort": "catalog:",
+    "ghostty-web": "0.3.0",
+    "luxon": "catalog:",
+    "marked": "catalog:",
+    "marked-shiki": "catalog:",
+    "remeda": "catalog:",
+    "shiki": "catalog:",
+    "solid-js": "catalog:",
+    "solid-list": "catalog:",
+    "tailwindcss": "catalog:",
+    "virtua": "catalog:",
+    "zod": "catalog:"
+  }
+}

packages/app/public/_headers

@@ -0,0 +1,17 @@
+/assets/*.js
+  Content-Type: application/javascript
+
+/assets/*.mjs
+  Content-Type: application/javascript
+
+/assets/*.css
+  Content-Type: text/css
+
+/*.js
+  Content-Type: application/javascript
+
+/*.mjs
+  Content-Type: application/javascript
+
+/*.css
+  Content-Type: text/css

packages/app/src/app.tsx

@@ -0,0 +1,95 @@
+import "@/index.css"
+import { ErrorBoundary, Show } from "solid-js"
+import { Router, Route, Navigate } from "@solidjs/router"
+import { MetaProvider } from "@solidjs/meta"
+import { Font } from "@opencode-ai/ui/font"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
+import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
+import { Diff } from "@opencode-ai/ui/diff"
+import { Code } from "@opencode-ai/ui/code"
+import { ThemeProvider } from "@opencode-ai/ui/theme"
+import { GlobalSyncProvider } from "@/context/global-sync"
+import { LayoutProvider } from "@/context/layout"
+import { GlobalSDKProvider } from "@/context/global-sdk"
+import { TerminalProvider } from "@/context/terminal"
+import { PromptProvider } from "@/context/prompt"
+import { NotificationProvider } from "@/context/notification"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { CommandProvider } from "@/context/command"
+import Layout from "@/pages/layout"
+import Home from "@/pages/home"
+import DirectoryLayout from "@/pages/directory-layout"
+import Session from "@/pages/session"
+import { ErrorPage } from "./pages/error"
+import { iife } from "@opencode-ai/util/iife"
+
+declare global {
+  interface Window {
+    __OPENCODE__?: { updaterEnabled?: boolean; port?: number }
+  }
+}
+
+const url = iife(() => {
+  const param = new URLSearchParams(document.location.search).get("url")
+  if (param) return param
+
+  if (location.hostname.includes("opencode.ai")) return "http://localhost:4096"
+  if (window.__OPENCODE__) return `http://127.0.0.1:${window.__OPENCODE__.port}`
+  if (import.meta.env.DEV)
+    return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}`
+
+  return window.location.origin
+})
+
+export function App() {
+  return (
+    <MetaProvider>
+      <Font />
+      <ThemeProvider>
+        <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
+          <DialogProvider>
+            <MarkedProvider>
+              <DiffComponentProvider component={Diff}>
+                <CodeComponentProvider component={Code}>
+                  <GlobalSDKProvider url={url}>
+                    <GlobalSyncProvider>
+                      <LayoutProvider>
+                        <NotificationProvider>
+                          <Router
+                            root={(props) => (
+                              <CommandProvider>
+                                <Layout>{props.children}</Layout>
+                              </CommandProvider>
+                            )}
+                          >
+                            <Route path="/" component={Home} />
+                            <Route path="/:dir" component={DirectoryLayout}>
+                              <Route path="/" component={() => <Navigate href="session" />} />
+                              <Route
+                                path="/session/:id?"
+                                component={(p) => (
+                                  <Show when={p.params.id || true} keyed>
+                                    <TerminalProvider>
+                                      <PromptProvider>
+                                        <Session />
+                                      </PromptProvider>
+                                    </TerminalProvider>
+                                  </Show>
+                                )}
+                              />
+                            </Route>
+                          </Router>
+                        </NotificationProvider>
+                      </LayoutProvider>
+                    </GlobalSyncProvider>
+                  </GlobalSDKProvider>
+                </CodeComponentProvider>
+              </DiffComponentProvider>
+            </MarkedProvider>
+          </DialogProvider>
+        </ErrorBoundary>
+      </ThemeProvider>
+    </MetaProvider>
+  )
+}

packages/app/src/components/dialog-connect-provider.tsx

@@ -1,24 +1,24 @@
+import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import type { IconName } from "@opencode-ai/ui/icons/provider"
+import { List, type ListRef } from "@opencode-ai/ui/list"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { showToast } from "@opencode-ai/ui/toast"
+import { iife } from "@opencode-ai/util/iife"
 import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useGlobalSync } from "@/context/global-sync"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { usePlatform } from "@/context/platform"
-import { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List, ListRef } from "@opencode-ai/ui/list"
-import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TextField } from "@opencode-ai/ui/text-field"
-import { Spinner } from "@opencode-ai/ui/spinner"
-import { Icon } from "@opencode-ai/ui/icon"
-import { showToast } from "@opencode-ai/ui/toast"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { IconName } from "@opencode-ai/ui/icons/provider"
-import { iife } from "@opencode-ai/util/iife"
 import { Link } from "@/components/link"
-import { DialogSelectProvider } from "./dialog-select-provider"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
+import { usePlatform } from "@/context/platform"
 import { DialogSelectModel } from "./dialog-select-model"
+import { DialogSelectProvider } from "./dialog-select-provider"
 
 export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
@@ -154,7 +154,9 @@ export function DialogConnectProvider(props: { provider: string }) {
               <div class="text-14-regular text-text-base">Select login method for {provider().name}.</div>
               <div class="">
                 <List
-                  ref={(ref) => (listRef = ref)}
+                  ref={(ref) => {
+                    listRef = ref
+                  }}
                   items={methods}
                   key={(m) => m?.label}
                   onSelect={async (method, index) => {
@@ -163,7 +165,7 @@ export function DialogConnectProvider(props: { provider: string }) {
                   }}
                 >
                   {(i) => (
-                    <div class="w-full flex items-center gap-x-4">
+                    <div class="w-full flex items-center gap-x-2">
                       <div class="w-4 h-2 rounded-[1px] bg-input-base shadow-xs-border-base flex items-center justify-center">
                         <div class="w-2.5 h-0.5 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
                       </div>
@@ -175,7 +177,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             </Match>
             <Match when={store.state === "pending"}>
               <div class="text-14-regular text-text-base">
-                <div class="flex items-center gap-x-4">
+                <div class="flex items-center gap-x-2">
                   <Spinner />
                   <span>Authorization in progress...</span>
                 </div>
@@ -183,7 +185,7 @@ export function DialogConnectProvider(props: { provider: string }) {
             </Match>
             <Match when={store.state === "error"}>
               <div class="text-14-regular text-text-base">
-                <div class="flex items-center gap-x-4">
+                <div class="flex items-center gap-x-2">
                   <Icon name="circle-ban-sign" class="text-icon-critical-base" />
                   <span>Authorization failed: {store.error}</span>
                 </div>

packages/app/src/components/dialog-manage-models.tsx

@@ -1,16 +1,15 @@
-import { Component } from "solid-js"
-import { useLocal } from "@/context/local"
-import { popularProviders } from "@/hooks/use-providers"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
+import type { Component } from "solid-js"
+import { useLocal } from "@/context/local"
+import { popularProviders } from "@/hooks/use-providers"
 
 export const DialogManageModels: Component = () => {
   const local = useLocal()
   return (
     <Dialog title="Manage models" description="Customize which models appear in the model selector.">
       <List
-        class="px-2.5"
         search={{ placeholder: "Search models", autofocus: true }}
         emptyMessage="No model results"
         key={(x) => `${x?.provider?.id}:${x?.id}`}
@@ -27,16 +26,24 @@ export const DialogManageModels: Component = () => {
         }}
         onSelect={(x) => {
           if (!x) return
-          const visible = local.model.visible({ modelID: x.id, providerID: x.provider.id })
+          const visible = local.model.visible({
+            modelID: x.id,
+            providerID: x.provider.id,
+          })
           local.model.setVisibility({ modelID: x.id, providerID: x.provider.id }, !visible)
         }}
       >
         {(i) => (
-          <div class="w-full flex items-center justify-between gap-x-2.5">
+          <div class="w-full flex items-center justify-between gap-x-3">
             <span>{i.name}</span>
             <div onClick={(e) => e.stopPropagation()}>
               <Switch
-                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                checked={
+                  !!local.model.visible({
+                    modelID: i.id,
+                    providerID: i.provider.id,
+                  })
+                }
                 onChange={(checked) => {
                   local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
                 }}

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

@@ -1,12 +1,12 @@
-import { useLocal } from "@/context/local"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { useLayout } from "@/context/layout"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { List } from "@opencode-ai/ui/list"
+import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { useParams } from "@solidjs/router"
 import { createMemo } from "solid-js"
+import { useLayout } from "@/context/layout"
+import { useLocal } from "@/context/local"
 
 export function DialogSelectFile() {
   const layout = useLayout()
@@ -18,7 +18,6 @@ export function DialogSelectFile() {
   return (
     <Dialog title="Select file">
       <List
-        class="px-2.5"
         search={{ placeholder: "Search files", autofocus: true }}
         emptyMessage="No files found"
         items={local.file.searchFiles}
@@ -32,7 +31,7 @@ export function DialogSelectFile() {
       >
         {(i) => (
           <div class="w-full flex items-center justify-between rounded-md">
-            <div class="flex items-center gap-x-2 grow min-w-0">
+            <div class="flex items-center gap-x-3 grow min-w-0">
               <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
               <div class="flex items-center text-14-regular">
                 <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">

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

@@ -0,0 +1,91 @@
+import { Component, createMemo, createSignal, Show } from "solid-js"
+import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Switch } from "@opencode-ai/ui/switch"
+
+export const DialogSelectMcp: Component = () => {
+  const sync = useSync()
+  const sdk = useSDK()
+  const [loading, setLoading] = createSignal<string | null>(null)
+
+  const items = createMemo(() =>
+    Object.entries(sync.data.mcp ?? {})
+      .map(([name, status]) => ({ name, status: status.status }))
+      .sort((a, b) => a.name.localeCompare(b.name)),
+  )
+
+  const toggle = async (name: string) => {
+    if (loading()) return
+    setLoading(name)
+    const status = sync.data.mcp[name]
+    if (status?.status === "connected") {
+      await sdk.client.mcp.disconnect({ name })
+    } else {
+      await sdk.client.mcp.connect({ name })
+    }
+    const result = await sdk.client.mcp.status()
+    if (result.data) sync.set("mcp", result.data)
+    setLoading(null)
+  }
+
+  const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
+  const totalCount = createMemo(() => items().length)
+
+  return (
+    <Dialog title="MCPs" description={`${enabledCount()} of ${totalCount()} enabled`}>
+      <List
+        search={{ placeholder: "Search", autofocus: true }}
+        emptyMessage="No MCPs configured"
+        key={(x) => x?.name ?? ""}
+        items={items}
+        filterKeys={["name", "status"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        onSelect={(x) => {
+          if (x) toggle(x.name)
+        }}
+      >
+        {(i) => {
+          const mcpStatus = () => sync.data.mcp[i.name]
+          const status = () => mcpStatus()?.status
+          const error = () => {
+            const s = mcpStatus()
+            return s?.status === "failed" ? s.error : undefined
+          }
+          const enabled = () => status() === "connected"
+          return (
+            <div class="w-full flex items-center justify-between gap-x-3">
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="truncate">{i.name}</span>
+                  <Show when={status() === "connected"}>
+                    <span class="text-11-regular text-text-weaker">connected</span>
+                  </Show>
+                  <Show when={status() === "failed"}>
+                    <span class="text-11-regular text-text-weaker">failed</span>
+                  </Show>
+                  <Show when={status() === "needs_auth"}>
+                    <span class="text-11-regular text-text-weaker">needs auth</span>
+                  </Show>
+                  <Show when={status() === "disabled"}>
+                    <span class="text-11-regular text-text-weaker">disabled</span>
+                  </Show>
+                  <Show when={loading() === i.name}>
+                    <span class="text-11-regular text-text-weak">...</span>
+                  </Show>
+                </div>
+                <Show when={error()}>
+                  <span class="text-11-regular text-text-weaker truncate">{error()}</span>
+                </Show>
+              </div>
+              <div onClick={(e) => e.stopPropagation()}>
+                <Switch checked={enabled()} disabled={loading() === i.name} onChange={() => toggle(i.name)} />
+              </div>
+            </div>
+          )
+        }}
+      </List>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -1,15 +1,15 @@
-import { Component, onCleanup, onMount, Show } from "solid-js"
-import { useLocal } from "@/context/local"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { Button } from "@opencode-ai/ui/button"
-import { Tag } from "@opencode-ai/ui/tag"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
-import { List, ListRef } from "@opencode-ai/ui/list"
+import type { IconName } from "@opencode-ai/ui/icons/provider"
+import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { IconName } from "@opencode-ai/ui/icons/provider"
-import { DialogSelectProvider } from "./dialog-select-provider"
+import { Tag } from "@opencode-ai/ui/tag"
+import { type Component, onCleanup, onMount, Show } from "solid-js"
+import { useLocal } from "@/context/local"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { DialogConnectProvider } from "./dialog-connect-provider"
+import { DialogSelectProvider } from "./dialog-select-provider"
 
 export const DialogSelectModelUnpaid: Component = () => {
   const local = useLocal()
@@ -64,7 +64,7 @@ export const DialogSelectModelUnpaid: Component = () => {
             <div class="px-2 text-14-medium text-text-base">Add more models from popular providers</div>
             <div class="w-full">
               <List
-                class="w-full"
+                class="w-full px-0"
                 key={(x) => x?.id}
                 items={providers.popular}
                 activeIcon="plus-small"
@@ -79,17 +79,8 @@ export const DialogSelectModelUnpaid: Component = () => {
                 }}
               >
                 {(i) => (
-                  <div class="w-full flex items-center gap-x-4">
-                    <ProviderIcon
-                      data-slot="list-item-extra-icon"
-                      id={i.id as IconName}
-                      // TODO: clean this up after we update icon in models.dev
-                      classList={{
-                        "text-icon-weak-base": true,
-                        "size-4 mx-0.5": i.id === "opencode",
-                        "size-5": i.id !== "opencode",
-                      }}
-                    />
+                  <div class="w-full flex items-center gap-x-3">
+                    <ProviderIcon data-slot="list-item-extra-icon" id={i.id as IconName} />
                     <span>{i.name}</span>
                     <Show when={i.id === "opencode"}>
                       <Tag>Recommended</Tag>

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

@@ -35,7 +35,6 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
       }
     >
       <List
-        class="px-2.5"
         search={{ placeholder: "Search models", autofocus: true }}
         emptyMessage="No model results"
         key={(x) => `${x.provider.id}:${x.id}`}
@@ -61,7 +60,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
         }}
       >
         {(i) => (
-          <div class="w-full flex items-center gap-x-2.5">
+          <div class="w-full flex items-center gap-x-3">
             <span>{i.name}</span>
             <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
               <Tag>Free</Tag>

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

@@ -15,7 +15,6 @@ export const DialogSelectProvider: Component = () => {
   return (
     <Dialog title="Connect provider">
       <List
-        class="px-2.5"
         search={{ placeholder: "Search providers", autofocus: true }}
         activeIcon="plus-small"
         key={(x) => x?.id}
@@ -38,17 +37,8 @@ export const DialogSelectProvider: Component = () => {
         }}
       >
         {(i) => (
-          <div class="px-1.25 w-full flex items-center gap-x-4">
-            <ProviderIcon
-              data-slot="list-item-extra-icon"
-              id={i.id as IconName}
-              // TODO: clean this up after we update icon in models.dev
-              classList={{
-                "text-icon-weak-base": true,
-                "size-4 mx-0.5": i.id === "opencode",
-                "size-5": i.id !== "opencode",
-              }}
-            />
+          <div class="px-1.25 w-full flex items-center gap-x-3">
+            <ProviderIcon data-slot="list-item-extra-icon" id={i.id as IconName} />
             <span>{i.name}</span>
             <Show when={i.id === "opencode"}>
               <Tag>Recommended</Tag>

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

@@ -2,7 +2,7 @@ import { useLocal, type LocalFile } from "@/context/local"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
+import { For, Match, Switch, type ComponentProps, type ParentProps } from "solid-js"
 import { Dynamic } from "solid-js/web"
 
 export default function FileTree(props: {
@@ -57,14 +57,14 @@ export default function FileTree(props: {
           "text-text-muted/40": p.node.ignored,
           "text-text-muted/80": !p.node.ignored,
           // "!text-text": local.file.active()?.path === p.node.path,
-          "!text-primary": local.file.changed(p.node.path),
+          // "!text-primary": local.file.changed(p.node.path),
         }}
       >
         {p.node.name}
       </span>
-      <Show when={local.file.changed(p.node.path)}>
-        <span class="ml-auto mr-1 w-1.5 h-1.5 rounded-full bg-primary/50 shrink-0" />
-      </Show>
+      {/* <Show when={local.file.changed(p.node.path)}> */}
+      {/*   <span class="ml-auto mr-1 w-1.5 h-1.5 rounded-full bg-primary/50 shrink-0" /> */}
+      {/* </Show> */}
     </Dynamic>
   )
 

packages/app/src/components/header.tsx

@@ -0,0 +1,215 @@
+import { useGlobalSync } from "@/context/global-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLayout } from "@/context/layout"
+import { Session } from "@opencode-ai/sdk/v2/client"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Mark } from "@opencode-ai/ui/logo"
+import { Popover } from "@opencode-ai/ui/popover"
+import { Select } from "@opencode-ai/ui/select"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { base64Decode } from "@opencode-ai/util/encode"
+import { useCommand } from "@/context/command"
+import { getFilename } from "@opencode-ai/util/path"
+import { A, useParams } from "@solidjs/router"
+import { createMemo, createResource, Show } from "solid-js"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { iife } from "@opencode-ai/util/iife"
+
+export function Header(props: {
+  navigateToProject: (directory: string) => void
+  navigateToSession: (session: Session | undefined) => void
+  onMobileMenuToggle?: () => void
+}) {
+  const globalSync = useGlobalSync()
+  const globalSDK = useGlobalSDK()
+  const layout = useLayout()
+  const params = useParams()
+  const command = useCommand()
+
+  return (
+    <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex" data-tauri-drag-region>
+      <button
+        type="button"
+        class="xl:hidden w-12 shrink-0 flex items-center justify-center border-r border-border-weak-base hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors"
+        onClick={props.onMobileMenuToggle}
+      >
+        <Icon name="menu" size="small" />
+      </button>
+      <A
+        href="/"
+        classList={{
+          "hidden xl:flex": true,
+          "w-12 shrink-0 px-4 py-3.5": true,
+          "items-center justify-start self-stretch": true,
+          "border-r border-border-weak-base": true,
+        }}
+        style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
+        data-tauri-drag-region
+      >
+        <Mark class="shrink-0" />
+      </A>
+      <div class="pl-4 px-6 flex items-center justify-between gap-4 w-full">
+        <Show when={layout.projects.list().length > 0 && params.dir}>
+          {(directory) => {
+            const currentDirectory = createMemo(() => base64Decode(directory()))
+            const store = createMemo(() => globalSync.child(currentDirectory())[0])
+            const sessions = createMemo(() => (store().session ?? []).filter((s) => !s.parentID))
+            const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
+            const shareEnabled = createMemo(() => store().config.share !== "disabled")
+            return (
+              <>
+                <div class="flex items-center gap-3 min-w-0">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <div class="hidden xl:flex items-center gap-2">
+                      <Select
+                        options={layout.projects.list().map((project) => project.worktree)}
+                        current={currentDirectory()}
+                        label={(x) => getFilename(x)}
+                        onSelect={(x) => (x ? props.navigateToProject(x) : undefined)}
+                        class="text-14-regular text-text-base"
+                        variant="ghost"
+                      >
+                        {/* @ts-ignore */}
+                        {(i) => (
+                          <div class="flex items-center gap-2">
+                            <Icon name="folder" size="small" />
+                            <div class="text-text-strong">{getFilename(i)}</div>
+                          </div>
+                        )}
+                      </Select>
+                      <div class="text-text-weaker">/</div>
+                    </div>
+                    <Select
+                      options={sessions()}
+                      current={currentSession()}
+                      placeholder="New session"
+                      label={(x) => x.title}
+                      value={(x) => x.id}
+                      onSelect={props.navigateToSession}
+                      class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
+                      variant="ghost"
+                    />
+                  </div>
+                  <Show when={currentSession()}>
+                    <Tooltip
+                      class="hidden xl:block"
+                      value={
+                        <div class="flex items-center gap-2">
+                          <span>New session</span>
+                          <span class="text-icon-base text-12-medium">{command.keybind("session.new")}</span>
+                        </div>
+                      }
+                    >
+                      <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
+                        New session
+                      </Button>
+                    </Tooltip>
+                  </Show>
+                </div>
+                <div class="flex items-center gap-4">
+                  <Show when={currentSession()?.summary?.files}>
+                    <Tooltip
+                      class="hidden md:block shrink-0"
+                      value={
+                        <div class="flex items-center gap-2">
+                          <span>Toggle review</span>
+                          <span class="text-icon-base text-12-medium">{command.keybind("review.toggle")}</span>
+                        </div>
+                      }
+                    >
+                      <Button variant="ghost" class="group/review-toggle size-6 p-0" onClick={layout.review.toggle}>
+                        <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                          <Icon
+                            name={layout.review.opened() ? "layout-right" : "layout-left"}
+                            size="small"
+                            class="group-hover/review-toggle:hidden"
+                          />
+                          <Icon
+                            name={layout.review.opened() ? "layout-right-partial" : "layout-left-partial"}
+                            size="small"
+                            class="hidden group-hover/review-toggle:inline-block"
+                          />
+                          <Icon
+                            name={layout.review.opened() ? "layout-right-full" : "layout-left-full"}
+                            size="small"
+                            class="hidden group-active/review-toggle:inline-block"
+                          />
+                        </div>
+                      </Button>
+                    </Tooltip>
+                  </Show>
+                  <Tooltip
+                    class="hidden md:block shrink-0"
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>Toggle terminal</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.toggle")}</span>
+                      </div>
+                    }
+                  >
+                    <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
+                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        <Icon
+                          size="small"
+                          name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
+                          class="group-hover/terminal-toggle:hidden"
+                        />
+                        <Icon
+                          size="small"
+                          name="layout-bottom-partial"
+                          class="hidden group-hover/terminal-toggle:inline-block"
+                        />
+                        <Icon
+                          size="small"
+                          name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
+                          class="hidden group-active/terminal-toggle:inline-block"
+                        />
+                      </div>
+                    </Button>
+                  </Tooltip>
+                  <Show when={shareEnabled() && currentSession()}>
+                    <Popover
+                      title="Share session"
+                      trigger={
+                        <Tooltip class="shrink-0" value="Share session">
+                          <IconButton icon="share" variant="ghost" class="" />
+                        </Tooltip>
+                      }
+                    >
+                      {iife(() => {
+                        const [url] = createResource(
+                          () => currentSession(),
+                          async (session) => {
+                            if (!session) return
+                            let shareURL = session.share?.url
+                            if (!shareURL) {
+                              shareURL = await globalSDK.client.session
+                                .share({ sessionID: session.id, directory: currentDirectory() })
+                                .then((r) => r.data?.share?.url)
+                                .catch((e) => {
+                                  console.error("Failed to share session", e)
+                                  return undefined
+                                })
+                            }
+                            return shareURL
+                          },
+                        )
+                        return (
+                          <Show when={url()}>
+                            {(url) => <TextField value={url()} readOnly copyable class="w-72" />}
+                          </Show>
+                        )
+                      })}
+                    </Popover>
+                  </Show>
+                </div>
+              </>
+            )
+          }}
+        </Show>
+      </div>
+    </header>
+  )
+}

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

@@ -19,8 +19,10 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectModel } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
-import { useCommand, formatKeybind } from "@/context/command"
+import { useCommand } from "@/context/command"
 import { persisted } from "@/utils/persist"
+import { Identifier } from "@/utils/id"
+import { SessionContextUsage } from "@/components/session-context-usage"
 
 const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
 const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
@@ -80,6 +82,37 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const command = useCommand()
   let editorRef!: HTMLDivElement
   let fileInputRef!: HTMLInputElement
+  let scrollRef!: HTMLDivElement
+
+  const scrollCursorIntoView = () => {
+    const container = scrollRef
+    const selection = window.getSelection()
+    if (!container || !selection || selection.rangeCount === 0) return
+
+    const range = selection.getRangeAt(0)
+    if (!editorRef.contains(range.startContainer)) return
+
+    const rect = range.getBoundingClientRect()
+    if (!rect.height) return
+
+    const containerRect = container.getBoundingClientRect()
+    const top = rect.top - containerRect.top + container.scrollTop
+    const bottom = rect.bottom - containerRect.top + container.scrollTop
+    const padding = 12
+
+    if (top < container.scrollTop + padding) {
+      container.scrollTop = Math.max(0, top - padding)
+      return
+    }
+
+    if (bottom > container.scrollTop + container.clientHeight - padding) {
+      container.scrollTop = bottom - container.clientHeight + padding
+    }
+  }
+
+  const queueScroll = () => {
+    requestAnimationFrame(scrollCursorIntoView)
+  }
 
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const tabs = createMemo(() => layout.tabs(sessionKey()))
@@ -99,6 +132,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     placeholder: number
     dragging: boolean
     imageAttachments: ImageAttachmentPart[]
+    mode: "normal" | "shell"
+    applyingHistory: boolean
   }>({
     popover: null,
     historyIndex: -1,
@@ -106,6 +141,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     placeholder: Math.floor(Math.random() * PLACEHOLDERS.length),
     dragging: false,
     imageAttachments: [],
+    mode: "normal",
+    applyingHistory: false,
   })
 
   const MAX_HISTORY = 100
@@ -117,6 +154,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       entries: [],
     }),
   )
+  const [shellHistory, setShellHistory] = persisted(
+    "prompt-history-shell.v1",
+    createStore<{
+      entries: Prompt[]
+    }>({
+      entries: [],
+    }),
+  )
 
   const clonePromptParts = (prompt: Prompt): Prompt =>
     prompt.map((part) => {
@@ -133,10 +178,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const applyHistoryPrompt = (p: Prompt, position: "start" | "end") => {
     const length = position === "start" ? 0 : promptLength(p)
+    setStore("applyingHistory", true)
     prompt.set(p, length)
     requestAnimationFrame(() => {
       editorRef.focus()
       setCursorPosition(editorRef, length)
+      setStore("applyingHistory", false)
+      queueScroll()
     })
   }
 
@@ -200,6 +248,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }
 
   const handlePaste = async (event: ClipboardEvent) => {
+    if (!isFocused()) return
     const clipboardData = event.clipboardData
     if (!clipboardData) return
 
@@ -222,7 +271,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 
-  const handleDragOver = (event: DragEvent) => {
+  const handleGlobalDragOver = (event: DragEvent) => {
     event.preventDefault()
     const hasFiles = event.dataTransfer?.types.includes("Files")
     if (hasFiles) {
@@ -230,15 +279,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  const handleDragLeave = (event: DragEvent) => {
-    const related = event.relatedTarget as Node | null
-    const form = event.currentTarget as HTMLElement
-    if (!related || !form.contains(related)) {
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    // relatedTarget is null when leaving the document window
+    if (!event.relatedTarget) {
       setStore("dragging", false)
     }
   }
 
-  const handleDrop = async (event: DragEvent) => {
+  const handleGlobalDrop = async (event: DragEvent) => {
     event.preventDefault()
     setStore("dragging", false)
 
@@ -254,17 +302,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   onMount(() => {
     editorRef.addEventListener("paste", handlePaste)
+    document.addEventListener("dragover", handleGlobalDragOver)
+    document.addEventListener("dragleave", handleGlobalDragLeave)
+    document.addEventListener("drop", handleGlobalDrop)
   })
   onCleanup(() => {
     editorRef.removeEventListener("paste", handlePaste)
+    document.removeEventListener("dragover", handleGlobalDragOver)
+    document.removeEventListener("dragleave", handleGlobalDragLeave)
+    document.removeEventListener("drop", handleGlobalDrop)
   })
 
   createEffect(() => {
-    if (isFocused()) {
-      handleInput()
-    } else {
-      setStore("popover", null)
-    }
+    if (!isFocused()) setStore("popover", null)
   })
 
   const handleFileSelect = (path: string | undefined) => {
@@ -344,7 +394,26 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       () => prompt.current(),
       (currentParts) => {
         const domParts = parseFromDOM()
-        if (isPromptEqual(currentParts, domParts)) return
+        const normalized = Array.from(editorRef.childNodes).every((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent ?? ""
+            if (!text.includes("\u200B")) return true
+            if (text !== "\u200B") return false
+
+            const prev = node.previousSibling
+            const next = node.nextSibling
+            const prevIsBr = prev?.nodeType === Node.ELEMENT_NODE && (prev as HTMLElement).tagName === "BR"
+            const nextIsBr = next?.nodeType === Node.ELEMENT_NODE && (next as HTMLElement).tagName === "BR"
+            if (!prevIsBr && !nextIsBr) return false
+            if (nextIsBr && !prevIsBr && prev) return false
+            return true
+          }
+          if (node.nodeType !== Node.ELEMENT_NODE) return false
+          const el = node as HTMLElement
+          if (el.dataset.type === "file") return true
+          return el.tagName === "BR"
+        })
+        if (normalized && isPromptEqual(currentParts, domParts)) return
 
         const selection = window.getSelection()
         let cursorPosition: number | null = null
@@ -355,7 +424,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         editorRef.innerHTML = ""
         currentParts.forEach((part) => {
           if (part.type === "text") {
-            editorRef.appendChild(document.createTextNode(part.content))
+            editorRef.appendChild(createTextFragment(part.content))
           } else if (part.type === "file") {
             const pill = document.createElement("span")
             pill.textContent = part.content
@@ -376,34 +445,21 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   )
 
   const parseFromDOM = (): Prompt => {
-    const newParts: Prompt = []
+    const parts: Prompt = []
     let position = 0
+    let buffer = ""
 
-    const pushText = (content: string) => {
+    const flushText = () => {
+      const content = buffer.replace(/\r\n?/g, "\n").replace(/\u200B/g, "")
+      buffer = ""
       if (!content) return
-      newParts.push({ type: "text", content, start: position, end: position + content.length })
+      parts.push({ type: "text", content, start: position, end: position + content.length })
       position += content.length
     }
 
-    const rangeText = (range: Range) => {
-      const fragment = range.cloneContents()
-      const container = document.createElement("div")
-      container.append(fragment)
-      return container.innerText
-    }
-
-    const files = Array.from(editorRef.querySelectorAll<HTMLElement>("[data-type=file]"))
-    let last: HTMLElement | undefined
-
-    files.forEach((file) => {
-      const before = document.createRange()
-      before.selectNodeContents(editorRef)
-      if (last) before.setStartAfter(last)
-      before.setEndBefore(file)
-      pushText(rangeText(before))
-
+    const pushFile = (file: HTMLElement) => {
       const content = file.textContent ?? ""
-      newParts.push({
+      parts.push({
         type: "file",
         path: file.dataset.path!,
         content,
@@ -411,42 +467,93 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         end: position + content.length,
       })
       position += content.length
-      last = file
+    }
+
+    const visit = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        buffer += node.textContent ?? ""
+        return
+      }
+      if (node.nodeType !== Node.ELEMENT_NODE) return
+
+      const el = node as HTMLElement
+      if (el.dataset.type === "file") {
+        flushText()
+        pushFile(el)
+        return
+      }
+      if (el.tagName === "BR") {
+        buffer += "\n"
+        return
+      }
+
+      for (const child of Array.from(el.childNodes)) {
+        visit(child)
+      }
+    }
+
+    const children = Array.from(editorRef.childNodes)
+    children.forEach((child, index) => {
+      const isBlock = child.nodeType === Node.ELEMENT_NODE && ["DIV", "P"].includes((child as HTMLElement).tagName)
+      visit(child)
+      if (isBlock && index < children.length - 1) {
+        buffer += "\n"
+      }
     })
 
-    const after = document.createRange()
-    after.selectNodeContents(editorRef)
-    if (last) after.setStartAfter(last)
-    pushText(rangeText(after))
+    flushText()
 
-    if (newParts.length === 0) newParts.push(...DEFAULT_PROMPT)
-    return newParts
+    if (parts.length === 0) parts.push(...DEFAULT_PROMPT)
+    return parts
   }
 
   const handleInput = () => {
     const rawParts = parseFromDOM()
     const cursorPosition = getCursorPosition(editorRef)
     const rawText = rawParts.map((p) => ("content" in p ? p.content : "")).join("")
+    const trimmed = rawText.replace(/\u200B/g, "").trim()
+    const hasNonText = rawParts.some((part) => part.type !== "text")
+    const shouldReset = trimmed.length === 0 && !hasNonText
 
-    const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
-    const slashMatch = rawText.match(/^\/(\S*)$/)
+    if (shouldReset) {
+      setStore("popover", null)
+      if (store.historyIndex >= 0 && !store.applyingHistory) {
+        setStore("historyIndex", -1)
+        setStore("savedPrompt", null)
+      }
+      if (prompt.dirty()) {
+        prompt.set(DEFAULT_PROMPT, 0)
+      }
+      queueScroll()
+      return
+    }
 
-    if (atMatch) {
-      onInput(atMatch[1])
-      setStore("popover", "file")
-    } else if (slashMatch) {
-      slashOnInput(slashMatch[1])
-      setStore("popover", "slash")
+    const shellMode = store.mode === "shell"
+
+    if (!shellMode) {
+      const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
+      const slashMatch = rawText.match(/^\/(\S*)$/)
+
+      if (atMatch) {
+        onInput(atMatch[1])
+        setStore("popover", "file")
+      } else if (slashMatch) {
+        slashOnInput(slashMatch[1])
+        setStore("popover", "slash")
+      } else {
+        setStore("popover", null)
+      }
     } else {
       setStore("popover", null)
     }
 
-    if (store.historyIndex >= 0) {
+    if (store.historyIndex >= 0 && !store.applyingHistory) {
       setStore("historyIndex", -1)
       setStore("savedPrompt", null)
     }
 
     prompt.set(rawParts, cursorPosition)
+    queueScroll()
   }
 
   const addPart = (part: ContentPart) => {
@@ -471,27 +578,40 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const gap = document.createTextNode(" ")
       const range = selection.getRangeAt(0)
 
-      if (atMatch) {
-        let runningLength = 0
+      const setEdge = (edge: "start" | "end", offset: number) => {
+        let remaining = offset
+        const nodes = Array.from(editorRef.childNodes)
 
-        const walker = document.createTreeWalker(editorRef, NodeFilter.SHOW_TEXT, null)
-        let currentNode = walker.nextNode()
-        while (currentNode) {
-          const textContent = currentNode.textContent || ""
-          if (runningLength + textContent.length >= atMatch.index!) {
-            const localStart = atMatch.index! - runningLength
-            const localEnd = cursorPosition - runningLength
-            if (currentNode === range.startContainer || runningLength + textContent.length >= cursorPosition) {
-              range.setStart(currentNode, localStart)
-              range.setEnd(currentNode, Math.min(localEnd, textContent.length))
-              break
-            }
+        for (const node of nodes) {
+          const length = getNodeLength(node)
+          const isText = node.nodeType === Node.TEXT_NODE
+          const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
+          const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+          if (isText && remaining <= length) {
+            if (edge === "start") range.setStart(node, remaining)
+            if (edge === "end") range.setEnd(node, remaining)
+            return
           }
-          runningLength += textContent.length
-          currentNode = walker.nextNode()
+
+          if ((isFile || isBreak) && remaining <= length) {
+            if (edge === "start" && remaining === 0) range.setStartBefore(node)
+            if (edge === "start" && remaining > 0) range.setStartAfter(node)
+            if (edge === "end" && remaining === 0) range.setEndBefore(node)
+            if (edge === "end" && remaining > 0) range.setEndAfter(node)
+            return
+          }
+
+          remaining -= length
         }
       }
 
+      if (atMatch) {
+        const start = atMatch.index ?? cursorPosition - atMatch[0].length
+        setEdge("start", start)
+        setEdge("end", cursorPosition)
+      }
+
       range.deleteContents()
       range.insertNode(gap)
       range.insertNode(pill)
@@ -500,11 +620,25 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       selection.removeAllRanges()
       selection.addRange(range)
     } else if (part.type === "text") {
-      const textNode = document.createTextNode(part.content)
       const range = selection.getRangeAt(0)
+      const fragment = createTextFragment(part.content)
+      const last = fragment.lastChild
       range.deleteContents()
-      range.insertNode(textNode)
-      range.setStartAfter(textNode)
+      range.insertNode(fragment)
+      if (last) {
+        if (last.nodeType === Node.TEXT_NODE) {
+          const text = last.textContent ?? ""
+          if (text === "\u200B") {
+            range.setStart(last, 0)
+          }
+          if (text !== "\u200B") {
+            range.setStart(last, text.length)
+          }
+        }
+        if (last.nodeType !== Node.TEXT_NODE) {
+          range.setStartAfter(last)
+        }
+      }
       range.collapse(true)
       selection.removeAllRanges()
       selection.addRange(range)
@@ -515,11 +649,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }
 
   const abort = () =>
-    sdk.client.session.abort({
-      sessionID: params.id!,
-    })
+    sdk.client.session
+      .abort({
+        sessionID: params.id!,
+      })
+      .catch(() => {})
 
-  const addToHistory = (prompt: Prompt) => {
+  const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => {
     const text = prompt
       .map((p) => ("content" in p ? p.content : ""))
       .join("")
@@ -527,17 +663,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!text) return
 
     const entry = clonePromptParts(prompt)
-    const lastEntry = history.entries[0]
+    const currentHistory = mode === "shell" ? shellHistory : history
+    const setCurrentHistory = mode === "shell" ? setShellHistory : setHistory
+    const lastEntry = currentHistory.entries[0]
     if (lastEntry) {
       const lastText = lastEntry.map((p) => ("content" in p ? p.content : "")).join("")
       if (lastText === text) return
     }
 
-    setHistory("entries", (entries) => [entry, ...entries].slice(0, MAX_HISTORY))
+    setCurrentHistory("entries", (entries) => [entry, ...entries].slice(0, MAX_HISTORY))
   }
 
   const navigateHistory = (direction: "up" | "down") => {
-    const entries = history.entries
+    const entries = store.mode === "shell" ? shellHistory.entries : history.entries
     const current = store.historyIndex
 
     if (direction === "up") {
@@ -579,6 +717,47 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }
 
   const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Backspace") {
+      const selection = window.getSelection()
+      if (selection && selection.isCollapsed) {
+        const node = selection.anchorNode
+        const offset = selection.anchorOffset
+        if (node && node.nodeType === Node.TEXT_NODE) {
+          const text = node.textContent ?? ""
+          if (/^\u200B+$/.test(text) && offset > 0) {
+            const range = document.createRange()
+            range.setStart(node, 0)
+            range.collapse(true)
+            selection.removeAllRanges()
+            selection.addRange(range)
+          }
+        }
+      }
+    }
+
+    if (event.key === "!" && store.mode === "normal") {
+      const cursorPosition = getCursorPosition(editorRef)
+      if (cursorPosition === 0) {
+        setStore("mode", "shell")
+        setStore("popover", null)
+        event.preventDefault()
+        return
+      }
+    }
+    if (store.mode === "shell") {
+      const { collapsed, cursorPosition, textLength } = getCaretState()
+      if (event.key === "Escape") {
+        setStore("mode", "normal")
+        event.preventDefault()
+        return
+      }
+      if (event.key === "Backspace" && collapsed && cursorPosition === 0 && textLength === 0) {
+        setStore("mode", "normal")
+        event.preventDefault()
+        return
+      }
+    }
+
     if (store.popover && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
       if (store.popover === "file") {
         onKeyDown(event)
@@ -596,7 +775,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
       const cursorPosition = getCursorPosition(editorRef)
       const textLength = promptLength(prompt.current())
-      const textContent = editorRef.textContent ?? ""
+      const textContent = prompt
+        .current()
+        .map((part) => ("content" in part ? part.content : ""))
+        .join("")
       const isEmpty = textContent.trim() === "" || textLength <= 1
       const hasNewlines = textContent.includes("\n")
       const inHistory = store.historyIndex >= 0
@@ -620,6 +802,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       return
     }
 
+    if (event.key === "Enter" && event.shiftKey) {
+      addPart({ type: "text", content: "\n", start: 0, end: 0 })
+      event.preventDefault()
+      return
+    }
     if (event.key === "Enter" && !event.shiftKey) {
       handleSubmit(event)
     }
@@ -642,7 +829,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       return
     }
 
-    addToHistory(currentPrompt)
+    addToHistory(currentPrompt, store.mode)
     setStore("historyIndex", -1)
     setStore("savedPrompt", null)
 
@@ -665,6 +852,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         ? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
         : ""
       return {
+        id: Identifier.ascending("part"),
         type: "file" as const,
         mime: "text/plain",
         url: `file://${absolute}${query}`,
@@ -682,32 +870,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     })
 
     const imageAttachmentParts = store.imageAttachments.map((attachment) => ({
+      id: Identifier.ascending("part"),
       type: "file" as const,
       mime: attachment.mime,
       url: attachment.dataUrl,
       filename: attachment.filename,
     }))
 
+    const isShellMode = store.mode === "shell"
     tabs().setActive(undefined)
     editorRef.innerHTML = ""
     prompt.set([{ type: "text", content: "", start: 0, end: 0 }], 0)
     setStore("imageAttachments", [])
-
-    if (text.startsWith("/")) {
-      const [cmdName, ...args] = text.split(" ")
-      const commandName = cmdName.slice(1)
-      const customCommand = sync.data.command.find((c) => c.name === commandName)
-      if (customCommand) {
-        sdk.client.session.command({
-          sessionID: existing.id,
-          command: commandName,
-          arguments: args.join(" "),
-          agent: local.agent.current()!.name,
-          model: `${local.model.current()!.provider.id}/${local.model.current()!.id}`,
-        })
-        return
-      }
-    }
+    setStore("mode", "normal")
 
     const model = {
       modelID: local.model.current()!.id,
@@ -715,31 +890,72 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
     const agent = local.agent.current()!.name
 
+    if (isShellMode) {
+      sdk.client.session
+        .shell({
+          sessionID: existing.id,
+          agent,
+          model,
+          command: text,
+        })
+        .catch((e) => {
+          console.error("Failed to send shell command", e)
+        })
+      return
+    }
+
+    if (text.startsWith("/")) {
+      const [cmdName, ...args] = text.split(" ")
+      const commandName = cmdName.slice(1)
+      const customCommand = sync.data.command.find((c) => c.name === commandName)
+      if (customCommand) {
+        sdk.client.session
+          .command({
+            sessionID: existing.id,
+            command: commandName,
+            arguments: args.join(" "),
+            agent,
+            model: `${model.providerID}/${model.modelID}`,
+          })
+          .catch((e) => {
+            console.error("Failed to send command", e)
+          })
+        return
+      }
+    }
+
+    const messageID = Identifier.ascending("message")
+    const textPart = {
+      id: Identifier.ascending("part"),
+      type: "text" as const,
+      text,
+    }
+    const requestParts = [textPart, ...fileAttachmentParts, ...imageAttachmentParts]
+    const optimisticParts = requestParts.map((part) => ({
+      ...part,
+      sessionID: existing.id,
+      messageID,
+    }))
+
     sync.session.addOptimisticMessage({
       sessionID: existing.id,
-      text,
-      parts: [
-        { type: "text", text } as import("@opencode-ai/sdk/v2/client").Part,
-        ...(fileAttachmentParts as import("@opencode-ai/sdk/v2/client").Part[]),
-        ...(imageAttachmentParts as import("@opencode-ai/sdk/v2/client").Part[]),
-      ],
+      messageID,
+      parts: optimisticParts,
       agent,
       model,
     })
 
-    sdk.client.session.prompt({
-      sessionID: existing.id,
-      agent,
-      model,
-      parts: [
-        {
-          type: "text",
-          text,
-        },
-        ...fileAttachmentParts,
-        ...imageAttachmentParts,
-      ],
-    })
+    sdk.client.session
+      .prompt({
+        sessionID: existing.id,
+        agent,
+        model,
+        messageID,
+        parts: requestParts,
+      })
+      .catch((e) => {
+        console.error("Failed to send prompt", e)
+      })
   }
 
   return (
@@ -800,8 +1016,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                             custom
                           </span>
                         </Show>
-                        <Show when={cmd.keybind}>
-                          <span class="text-12-regular text-text-subtle">{formatKeybind(cmd.keybind!)}</span>
+                        <Show when={command.keybind(cmd.id)}>
+                          <span class="text-12-regular text-text-subtle">{command.keybind(cmd.id)}</span>
                         </Show>
                       </div>
                     </button>
@@ -814,9 +1030,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       </Show>
       <form
         onSubmit={handleSubmit}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
         classList={{
           "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
           "rounded-md overflow-clip focus-within:shadow-xs-border": true,
@@ -866,7 +1079,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </For>
           </div>
         </Show>
-        <div class="relative max-h-[240px] overflow-y-auto">
+        <div class="relative max-h-[240px] overflow-y-auto" ref={(el) => (scrollRef = el)}>
           <div
             data-component="prompt-input"
             ref={(el) => {
@@ -877,36 +1090,77 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             classList={{
-              "w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
-              "[&>[data-type=file]]:text-icon-info-active": true,
+              "w-full px-5 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "[&_[data-type=file]]:text-icon-info-active": true,
+              "font-mono!": store.mode === "shell",
             }}
           />
           <Show when={!prompt.dirty() && store.imageAttachments.length === 0}>
-            <div class="absolute top-0 left-0 px-5 py-3 text-14-regular text-text-weak pointer-events-none">
-              Ask anything... "{PLACEHOLDERS[store.placeholder]}"
+            <div class="absolute top-0 inset-x-0 px-5 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
+              {store.mode === "shell"
+                ? "Enter shell command..."
+                : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
             </div>
           </Show>
+          <div class="absolute top-4.5 right-4">
+            <SessionContextUsage />
+          </div>
         </div>
         <div class="relative 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"
-              variant="ghost"
-            />
-            <Button
-              as="div"
-              variant="ghost"
-              onClick={() =>
-                dialog.show(() => (providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />))
-              }
-            >
-              {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>
+            <Switch>
+              <Match when={store.mode === "shell"}>
+                <div class="flex items-center gap-2 px-2 h-6">
+                  <Icon name="console" size="small" class="text-icon-primary" />
+                  <span class="text-12-regular text-text-primary">Shell</span>
+                  <span class="text-12-regular text-text-weak">esc to exit</span>
+                </div>
+              </Match>
+              <Match when={store.mode === "normal"}>
+                <Tooltip
+                  placement="top"
+                  value={
+                    <div class="flex items-center gap-2">
+                      <span>Cycle agent</span>
+                      <span class="text-icon-base text-12-medium">{command.keybind("agent.cycle")}</span>
+                    </div>
+                  }
+                >
+                  <Select
+                    options={local.agent.list().map((agent) => agent.name)}
+                    current={local.agent.current().name}
+                    onSelect={local.agent.set}
+                    class="capitalize"
+                    variant="ghost"
+                  />
+                </Tooltip>
+                <Tooltip
+                  placement="top"
+                  value={
+                    <div class="flex items-center gap-2">
+                      <span>Choose model</span>
+                      <span class="text-icon-base text-12-medium">{command.keybind("model.choose")}</span>
+                    </div>
+                  }
+                >
+                  <Button
+                    as="div"
+                    variant="ghost"
+                    onClick={() =>
+                      dialog.show(() =>
+                        providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />,
+                      )
+                    }
+                  >
+                    {local.model.current()?.name ?? "Select model"}
+                    <span class="hidden md:block ml-0.5 text-text-weak text-12-regular">
+                      {local.model.current()?.provider.name}
+                    </span>
+                    <Icon name="chevron-down" size="small" />
+                  </Button>
+                </Tooltip>
+              </Match>
+            </Switch>
           </div>
           <div class="flex items-center gap-1 absolute right-2 bottom-2">
             <input
@@ -920,15 +1174,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 e.currentTarget.value = ""
               }}
             />
-            <Tooltip placement="top" value="Attach image">
-              <IconButton
-                type="button"
-                icon="photo"
-                variant="ghost"
-                class="h-10 w-8"
-                onClick={() => fileInputRef.click()}
-              />
-            </Tooltip>
+            <Show when={store.mode === "normal"}>
+              <Tooltip placement="top" value="Attach image">
+                <IconButton
+                  type="button"
+                  icon="photo"
+                  variant="ghost"
+                  class="h-10 w-8"
+                  onClick={() => fileInputRef.click()}
+                />
+              </Tooltip>
+            </Show>
             <Tooltip
               placement="top"
               inactive={!prompt.dirty() && !working()}
@@ -964,23 +1220,56 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   )
 }
 
+function createTextFragment(content: string): DocumentFragment {
+  const fragment = document.createDocumentFragment()
+  const segments = content.split("\n")
+  segments.forEach((segment, index) => {
+    if (segment) {
+      fragment.appendChild(document.createTextNode(segment))
+    } else if (segments.length > 1) {
+      fragment.appendChild(document.createTextNode("\u200B"))
+    }
+    if (index < segments.length - 1) {
+      fragment.appendChild(document.createElement("br"))
+    }
+  })
+  return fragment
+}
+
+function getNodeLength(node: Node): number {
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  return (node.textContent ?? "").replace(/\u200B/g, "").length
+}
+
+function getTextLength(node: Node): number {
+  if (node.nodeType === Node.TEXT_NODE) return (node.textContent ?? "").replace(/\u200B/g, "").length
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  let length = 0
+  for (const child of Array.from(node.childNodes)) {
+    length += getTextLength(child)
+  }
+  return length
+}
+
 function getCursorPosition(parent: HTMLElement): number {
   const selection = window.getSelection()
   if (!selection || selection.rangeCount === 0) return 0
   const range = selection.getRangeAt(0)
+  if (!parent.contains(range.startContainer)) return 0
   const preCaretRange = range.cloneRange()
   preCaretRange.selectNodeContents(parent)
   preCaretRange.setEnd(range.startContainer, range.startOffset)
-  return preCaretRange.toString().length
+  return getTextLength(preCaretRange.cloneContents())
 }
 
 function setCursorPosition(parent: HTMLElement, position: number) {
   let remaining = position
   let node = parent.firstChild
   while (node) {
-    const length = node.textContent ? node.textContent.length : 0
+    const length = getNodeLength(node)
     const isText = node.nodeType === Node.TEXT_NODE
     const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
 
     if (isText && remaining <= length) {
       const range = document.createRange()
@@ -992,10 +1281,24 @@ function setCursorPosition(parent: HTMLElement, position: number) {
       return
     }
 
-    if (isFile && remaining <= length) {
+    if ((isFile || isBreak) && remaining <= length) {
       const range = document.createRange()
       const selection = window.getSelection()
-      range.setStartAfter(node)
+      if (remaining === 0) {
+        range.setStartBefore(node)
+      }
+      if (remaining > 0 && isFile) {
+        range.setStartAfter(node)
+      }
+      if (remaining > 0 && isBreak) {
+        const next = node.nextSibling
+        if (next && next.nodeType === Node.TEXT_NODE) {
+          range.setStart(next, 0)
+        }
+        if (!next || next.nodeType !== Node.TEXT_NODE) {
+          range.setStartAfter(node)
+        }
+      }
       range.collapse(true)
       selection?.removeAllRanges()
       selection?.addRange(range)

packages/app/src/components/session-context-usage.tsx

@@ -0,0 +1,63 @@
+import { createMemo, Show } from "solid-js"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
+import { useSync } from "@/context/sync"
+import { useParams } from "@solidjs/router"
+import { AssistantMessage } from "@opencode-ai/sdk/v2"
+
+export function SessionContextUsage() {
+  const sync = useSync()
+  const params = useParams()
+  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+
+  const cost = createMemo(() => {
+    const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(total)
+  })
+
+  const context = createMemo(() => {
+    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
+    if (!last) return
+    const total =
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+    const model = sync.data.provider.all.find((x) => x.id === last.providerID)?.models[last.modelID]
+    return {
+      tokens: total.toLocaleString(),
+      percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
+    }
+  })
+
+  return (
+    <Show when={context?.()}>
+      {(ctx) => (
+        <Tooltip
+          value={
+            <div class="flex flex-col gap-1">
+              <div class="flex gap-3">
+                <span class="opacity-70 text-right flex-1">Tokens</span>
+                <span class="text-left flex-1">{ctx().tokens}</span>
+              </div>
+              <div class="flex gap-3">
+                <span class="opacity-70 text-right flex-1">Usage</span>
+                <span class="text-left flex-1">{ctx().percentage ?? 0}%</span>
+              </div>
+              <div class="flex gap-3">
+                <span class="opacity-70 text-right flex-1">Cost</span>
+                <span class="text-left flex-1">{cost()}</span>
+              </div>
+            </div>
+          }
+          placement="top"
+        >
+          <div class="flex items-center gap-1.5">
+            <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} />
+            {/* <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> */}
+          </div>
+        </Tooltip>
+      )}
+    </Show>
+  )
+}

packages/app/src/components/session-lsp-indicator.tsx

@@ -0,0 +1,40 @@
+import { createMemo, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useSync } from "@/context/sync"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+
+export function SessionLspIndicator() {
+  const sync = useSync()
+
+  const lspStats = createMemo(() => {
+    const lsp = sync.data.lsp ?? []
+    const connected = lsp.filter((s) => s.status === "connected").length
+    const hasError = lsp.some((s) => s.status === "error")
+    const total = lsp.length
+    return { connected, hasError, total }
+  })
+
+  const tooltipContent = createMemo(() => {
+    const lsp = sync.data.lsp ?? []
+    if (lsp.length === 0) return "No LSP servers"
+    return lsp.map((s) => s.name).join(", ")
+  })
+
+  return (
+    <Show when={lspStats().total > 0}>
+      <Tooltip placement="top" value={tooltipContent()}>
+        <div class="flex items-center gap-1 px-2 cursor-default select-none">
+          <Icon
+            name="code"
+            size="small"
+            classList={{
+              "text-icon-critical-base": lspStats().hasError,
+              "text-icon-success-base": !lspStats().hasError && lspStats().connected > 0,
+            }}
+          />
+          <span class="text-12-regular text-text-weak">{lspStats().connected} LSP</span>
+        </div>
+      </Tooltip>
+    </Show>
+  )
+}

packages/app/src/components/session-mcp-indicator.tsx

@@ -0,0 +1,36 @@
+import { createMemo, Show } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSync } from "@/context/sync"
+import { DialogSelectMcp } from "@/components/dialog-select-mcp"
+
+export function SessionMcpIndicator() {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  const mcpStats = createMemo(() => {
+    const mcp = sync.data.mcp ?? {}
+    const entries = Object.entries(mcp)
+    const enabled = entries.filter(([, status]) => status.status === "connected").length
+    const failed = entries.some(([, status]) => status.status === "failed")
+    const total = entries.length
+    return { enabled, failed, total }
+  })
+
+  return (
+    <Show when={mcpStats().total > 0}>
+      <Button variant="ghost" onClick={() => dialog.show(() => <DialogSelectMcp />)}>
+        <Icon
+          name="mcp"
+          size="small"
+          classList={{
+            "text-icon-critical-base": mcpStats().failed,
+            "text-icon-success-base": !mcpStats().failed && mcpStats().enabled > 0,
+          }}
+        />
+        <span class="text-12-regular text-text-weak">{mcpStats().enabled} MCP</span>
+      </Button>
+    </Show>
+  )
+}

packages/app/src/components/status-bar.tsx

@@ -0,0 +1,32 @@
+import { createMemo, Show, type ParentProps } from "solid-js"
+import { usePlatform } from "@/context/platform"
+import { useSync } from "@/context/sync"
+import { useGlobalSync } from "@/context/global-sync"
+
+export function StatusBar(props: ParentProps) {
+  const platform = usePlatform()
+  const sync = useSync()
+  const globalSync = useGlobalSync()
+
+  const directoryDisplay = createMemo(() => {
+    const directory = sync.data.path.directory || ""
+    const home = globalSync.data.path.home || ""
+    const short = home && directory.startsWith(home) ? directory.replace(home, "~") : directory
+    const branch = sync.data.vcs?.branch
+    return branch ? `${short}:${branch}` : short
+  })
+
+  return (
+    <div class="h-8 w-full shrink-0 flex items-center justify-between px-2 border-t border-border-weak-base bg-background-base">
+      <div class="flex items-center gap-3">
+        <Show when={platform.version}>
+          <span class="text-12-regular text-text-weak">v{platform.version}</span>
+        </Show>
+        <Show when={directoryDisplay()}>
+          <span class="text-12-regular text-text-weak">{directoryDisplay()}</span>
+        </Show>
+      </div>
+      <div class="flex items-center">{props.children}</div>
+    </div>
+  )
+}

packages/app/src/components/terminal.tsx

@@ -0,0 +1,242 @@
+import { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
+import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
+import { useSDK } from "@/context/sdk"
+import { SerializeAddon } from "@/addons/serialize"
+import { LocalPTY } from "@/context/terminal"
+import { resolveThemeVariant, useTheme } from "@opencode-ai/ui/theme"
+
+export interface TerminalProps extends ComponentProps<"div"> {
+  pty: LocalPTY
+  onSubmit?: () => void
+  onCleanup?: (pty: LocalPTY) => void
+  onConnectError?: (error: unknown) => void
+}
+
+type TerminalColors = {
+  background: string
+  foreground: string
+  cursor: string
+}
+
+const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
+  light: {
+    background: "#fcfcfc",
+    foreground: "#211e1e",
+    cursor: "#211e1e",
+  },
+  dark: {
+    background: "#191515",
+    foreground: "#d4d4d4",
+    cursor: "#d4d4d4",
+  },
+}
+
+export const Terminal = (props: TerminalProps) => {
+  const sdk = useSDK()
+  const theme = useTheme()
+  let container!: HTMLDivElement
+  const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnectError"])
+  let ws: WebSocket
+  let term: Term
+  let ghostty: Ghostty
+  let serializeAddon: SerializeAddon
+  let fitAddon: FitAddon
+  let handleResize: () => void
+
+  const getTerminalColors = (): TerminalColors => {
+    const mode = theme.mode()
+    const fallback = DEFAULT_TERMINAL_COLORS[mode]
+    const currentTheme = theme.themes()[theme.themeId()]
+    if (!currentTheme) return fallback
+    const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
+    if (!variant?.seeds) return fallback
+    const resolved = resolveThemeVariant(variant, mode === "dark")
+    const text = resolved["text-base"] ?? fallback.foreground
+    const background = resolved["background-stronger"] ?? fallback.background
+    return {
+      background,
+      foreground: text,
+      cursor: text,
+    }
+  }
+
+  const [terminalColors, setTerminalColors] = createSignal<TerminalColors>(getTerminalColors())
+
+  createEffect(() => {
+    const colors = getTerminalColors()
+    setTerminalColors(colors)
+    if (!term) return
+    const setOption = (term as unknown as { setOption?: (key: string, value: TerminalColors) => void }).setOption
+    if (!setOption) return
+    setOption("theme", colors)
+  })
+
+  const focusTerminal = () => term?.focus()
+  const copySelection = () => {
+    if (!term || !term.hasSelection()) return false
+    const selection = term.getSelection()
+    if (!selection) return false
+    const clipboard = navigator.clipboard
+    if (clipboard?.writeText) {
+      clipboard.writeText(selection).catch(() => {})
+      return true
+    }
+    if (!document.body) return false
+    const textarea = document.createElement("textarea")
+    textarea.value = selection
+    textarea.setAttribute("readonly", "")
+    textarea.style.position = "fixed"
+    textarea.style.opacity = "0"
+    document.body.appendChild(textarea)
+    textarea.select()
+    const copied = document.execCommand("copy")
+    document.body.removeChild(textarea)
+    return copied
+  }
+  const handlePointerDown = () => {
+    const activeElement = document.activeElement
+    if (activeElement instanceof HTMLElement && activeElement !== container) {
+      activeElement.blur()
+    }
+    focusTerminal()
+  }
+
+  onMount(async () => {
+    ghostty = await Ghostty.load()
+
+    ws = new WebSocket(sdk.url + `/pty/${local.pty.id}/connect?directory=${encodeURIComponent(sdk.directory)}`)
+    term = new Term({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: "IBM Plex Mono, monospace",
+      allowTransparency: true,
+      theme: terminalColors(),
+      scrollback: 10_000,
+      ghostty,
+    })
+    term.attachCustomKeyEventHandler((event) => {
+      const key = event.key.toLowerCase()
+      if (key === "c") {
+        const macCopy = event.metaKey && !event.ctrlKey && !event.altKey
+        const linuxCopy = event.ctrlKey && event.shiftKey && !event.metaKey
+        if ((macCopy || linuxCopy) && copySelection()) {
+          event.preventDefault()
+          return true
+        }
+      }
+      // allow for ctrl-` to toggle terminal in parent
+      if (event.ctrlKey && key === "`") {
+        event.preventDefault()
+        return true
+      }
+      return false
+    })
+
+    fitAddon = new FitAddon()
+    serializeAddon = new SerializeAddon()
+    term.loadAddon(serializeAddon)
+    term.loadAddon(fitAddon)
+
+    term.open(container)
+    container.addEventListener("pointerdown", handlePointerDown)
+    focusTerminal()
+
+    if (local.pty.buffer) {
+      if (local.pty.rows && local.pty.cols) {
+        term.resize(local.pty.cols, local.pty.rows)
+      }
+      term.reset()
+      term.write(local.pty.buffer)
+      if (local.pty.scrollY) {
+        term.scrollToLine(local.pty.scrollY)
+      }
+      fitAddon.fit()
+    }
+
+    fitAddon.observeResize()
+    handleResize = () => fitAddon.fit()
+    window.addEventListener("resize", handleResize)
+    term.onResize(async (size) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        await sdk.client.pty
+          .update({
+            ptyID: local.pty.id,
+            size: {
+              cols: size.cols,
+              rows: size.rows,
+            },
+          })
+          .catch(() => {})
+      }
+    })
+    term.onData((data) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(data)
+      }
+    })
+    term.onKey((key) => {
+      if (key.key == "Enter") {
+        props.onSubmit?.()
+      }
+    })
+    // term.onScroll((ydisp) => {
+    // console.log("Scroll position:", ydisp)
+    // })
+    ws.addEventListener("open", () => {
+      console.log("WebSocket connected")
+      sdk.client.pty
+        .update({
+          ptyID: local.pty.id,
+          size: {
+            cols: term.cols,
+            rows: term.rows,
+          },
+        })
+        .catch(() => {})
+    })
+    ws.addEventListener("message", (event) => {
+      term.write(event.data)
+    })
+    ws.addEventListener("error", (error) => {
+      console.error("WebSocket error:", error)
+      props.onConnectError?.(error)
+    })
+    ws.addEventListener("close", () => {
+      console.log("WebSocket disconnected")
+    })
+  })
+
+  onCleanup(() => {
+    if (handleResize) {
+      window.removeEventListener("resize", handleResize)
+    }
+    container.removeEventListener("pointerdown", handlePointerDown)
+    if (serializeAddon && props.onCleanup) {
+      const buffer = serializeAddon.serialize()
+      props.onCleanup({
+        ...local.pty,
+        buffer,
+        rows: term.rows,
+        cols: term.cols,
+        scrollY: term.getViewportY(),
+      })
+    }
+    ws?.close()
+    term?.dispose()
+  })
+
+  return (
+    <div
+      ref={container}
+      data-component="terminal"
+      data-prevent-autofocus
+      style={{ "background-color": terminalColors().background }}
+      classList={{
+        ...(local.classList ?? {}),
+        "size-full px-6 py-3 font-mono": true,
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    />
+  )
+}

packages/app/src/context/command.tsx

@@ -119,7 +119,6 @@ function DialogCommand(props: { options: CommandOption[] }) {
   return (
     <Dialog title="Commands">
       <List
-        class="px-2.5"
         search={{ placeholder: "Search commands", autofocus: true }}
         emptyMessage="No commands found"
         items={() => props.options.filter((x) => !x.id.startsWith("suggested.") || !x.disabled)}
@@ -226,6 +225,11 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
           }
         }
       },
+      keybind(id: string) {
+        const option = options().find((x) => x.id === id || x.id === "suggested." + id)
+        if (!option?.keybind) return ""
+        return formatKeybind(option.keybind)
+      },
       show: showPalette,
       keybinds(enabled: boolean) {
         setSuspendCount((count) => count + (enabled ? -1 : 1))

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

@@ -1,31 +1,32 @@
 import { createOpencodeClient, type Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { onCleanup } from "solid-js"
+import { usePlatform } from "./platform"
 
 export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
   name: "GlobalSDK",
   init: (props: { url: string }) => {
-    const abort = new AbortController()
-    const sdk = createOpencodeClient({
+    const eventSdk = createOpencodeClient({
       baseUrl: props.url,
-      signal: abort.signal,
-      throwOnError: true,
+      // signal: AbortSignal.timeout(1000 * 60 * 10),
     })
-
     const emitter = createGlobalEmitter<{
       [key: string]: Event
     }>()
 
-    sdk.global.event().then(async (events) => {
+    eventSdk.global.event().then(async (events) => {
       for await (const event of events.stream) {
         // console.log("event", event)
         emitter.emit(event.directory ?? "global", event.payload)
       }
     })
 
-    onCleanup(() => {
-      abort.abort()
+    const platform = usePlatform()
+    const sdk = createOpencodeClient({
+      baseUrl: props.url,
+      signal: AbortSignal.timeout(1000 * 60 * 10),
+      fetch: platform.fetch,
+      throwOnError: true,
     })
 
     return { url: props.url, client: sdk, event: emitter }

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

@@ -5,8 +5,6 @@ import {
   type Part,
   type Config,
   type Path,
-  type File,
-  type FileNode,
   type Project,
   type FileDiff,
   type Todo,
@@ -14,13 +12,20 @@ import {
   type ProviderListResponse,
   type ProviderAuthResponse,
   type Command,
+  type McpStatus,
+  type LspStatus,
+  type VcsInfo,
+  type Permission,
   createOpencodeClient,
 } from "@opencode-ai/sdk/v2/client"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { Binary } from "@opencode-ai/util/binary"
+import { retry } from "@opencode-ai/util/retry"
 import { useGlobalSDK } from "./global-sdk"
 import { ErrorPage, type InitError } from "../pages/error"
 import { createContext, useContext, onMount, type ParentProps, Switch, Match } from "solid-js"
+import { showToast } from "@opencode-ai/ui/toast"
+import { getFilename } from "@opencode-ai/util/path"
 
 type State = {
   ready: boolean
@@ -40,6 +45,14 @@ type State = {
   todo: {
     [sessionID: string]: Todo[]
   }
+  permission: {
+    [sessionID: string]: Permission[]
+  }
+  mcp: {
+    [name: string]: McpStatus
+  }
+  lsp: LspStatus[]
+  vcs: VcsInfo | undefined
   limit: number
   message: {
     [sessionID: string]: Message[]
@@ -47,8 +60,6 @@ type State = {
   part: {
     [messageID: string]: Part[]
   }
-  node: FileNode[]
-  changes: File[]
 }
 
 function createGlobalSync() {
@@ -72,6 +83,7 @@ function createGlobalSync() {
 
   const children: Record<string, ReturnType<typeof createStore<State>>> = {}
   function child(directory: string) {
+    if (!directory) console.error("No directory provided")
     if (!children[directory]) {
       setGlobalStore("children", directory, {
         project: "",
@@ -85,11 +97,13 @@ function createGlobalSync() {
         session_status: {},
         session_diff: {},
         todo: {},
+        permission: {},
+        mcp: {},
+        lsp: [],
+        vcs: undefined,
         limit: 5,
         message: {},
         part: {},
-        node: [],
-        changes: [],
       })
       children[directory] = createStore(globalStore.children[directory])
       bootstrapInstance(directory)
@@ -107,7 +121,7 @@ function createGlobalSync() {
           .slice()
           .filter((s) => !s.time.archived)
           .sort((a, b) => a.id.localeCompare(b.id))
-        // Include sessions up to the limit, plus any updated in the last hour
+        // Include up to the limit, plus any updated in the last 4 hours
         const sessions = nonArchived.filter((s, i) => {
           if (i < store.limit) return true
           const updated = new Date(s.time.updated).getTime()
@@ -117,11 +131,13 @@ function createGlobalSync() {
       })
       .catch((err) => {
         console.error("Failed to load sessions", err)
-        setGlobalStore("error", err)
+        const project = getFilename(directory)
+        showToast({ title: `Failed to load sessions for ${project}`, description: err.message })
       })
   }
 
   async function bootstrapInstance(directory: string) {
+    if (!directory) return
     const [, setStore] = child(directory)
     const sdk = createOpencodeClient({
       baseUrl: globalSDK.url,
@@ -130,17 +146,39 @@ function createGlobalSync() {
     })
     const load = {
       project: () => sdk.project.current().then((x) => setStore("project", x.data!.id)),
-      provider: () => sdk.provider.list().then((x) => setStore("provider", x.data!)),
+      provider: () =>
+        sdk.provider.list().then((x) => {
+          const data = x.data!
+          setStore("provider", {
+            ...data,
+            all: data.all.map((provider) => ({
+              ...provider,
+              models: Object.fromEntries(
+                Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated"),
+              ),
+            })),
+          })
+        }),
       path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
       agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
       command: () => sdk.command.list().then((x) => setStore("command", x.data ?? [])),
       session: () => loadSessions(directory),
       status: () => sdk.session.status().then((x) => setStore("session_status", x.data!)),
       config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
-      changes: () => sdk.file.status().then((x) => setStore("changes", x.data!)),
-      node: () => sdk.file.list({ path: "/" }).then((x) => setStore("node", x.data!)),
+      mcp: () => sdk.mcp.status().then((x) => setStore("mcp", x.data ?? {})),
+      lsp: () => sdk.lsp.status().then((x) => setStore("lsp", x.data ?? [])),
+      vcs: () => sdk.vcs.get().then((x) => setStore("vcs", x.data)),
+      permission: () =>
+        sdk.permission.list().then((x) => {
+          const grouped: Record<string, typeof x.data> = {}
+          for (const perm of x.data ?? []) {
+            grouped[perm.sessionID] = grouped[perm.sessionID] ?? []
+            grouped[perm.sessionID]!.push(perm)
+          }
+          setStore("permission", grouped)
+        }),
     }
-    await Promise.all(Object.values(load).map((p) => p().catch((e) => setGlobalStore("error", e))))
+    await Promise.all(Object.values(load).map((p) => retry(p).catch((e) => setGlobalStore("error", e))))
       .then(() => setStore("ready", true))
       .catch((e) => setGlobalStore("error", e))
   }
@@ -205,13 +243,13 @@ function createGlobalSync() {
         break
       }
       case "session.diff":
-        setStore("session_diff", event.properties.sessionID, event.properties.diff)
+        setStore("session_diff", event.properties.sessionID, reconcile(event.properties.diff, { key: "file" }))
         break
       case "todo.updated":
-        setStore("todo", event.properties.sessionID, event.properties.todos)
+        setStore("todo", event.properties.sessionID, reconcile(event.properties.todos))
         break
       case "session.status": {
-        setStore("session_status", event.properties.sessionID, event.properties.status)
+        setStore("session_status", event.properties.sessionID, reconcile(event.properties.status))
         break
       }
       case "message.updated": {
@@ -285,26 +323,93 @@ function createGlobalSync() {
         }
         break
       }
+      case "vcs.branch.updated": {
+        setStore("vcs", { branch: event.properties.branch })
+        break
+      }
+      case "permission.updated": {
+        const permissions = store.permission[event.properties.sessionID]
+        if (!permissions) {
+          setStore("permission", event.properties.sessionID, [event.properties])
+        } else {
+          const result = Binary.search(permissions, event.properties.id, (p) => p.id)
+          setStore(
+            "permission",
+            event.properties.sessionID,
+            produce((draft) => {
+              if (result.found) {
+                draft[result.index] = event.properties
+                return
+              }
+              draft.push(event.properties)
+            }),
+          )
+        }
+        break
+      }
+      case "permission.replied": {
+        const permissions = store.permission[event.properties.sessionID]
+        if (!permissions) break
+        const result = Binary.search(permissions, event.properties.permissionID, (p) => p.id)
+        if (!result.found) break
+        setStore(
+          "permission",
+          event.properties.sessionID,
+          produce((draft) => {
+            draft.splice(result.index, 1)
+          }),
+        )
+        break
+      }
     }
   })
 
   async function bootstrap() {
+    const health = await globalSDK.client.global
+      .health()
+      .then((x) => x.data)
+      .catch(() => undefined)
+    if (!health?.healthy) {
+      setGlobalStore(
+        "error",
+        new Error(`Could not connect to server. Is there a server running at \`${globalSDK.url}\`?`),
+      )
+      return
+    }
+
     return Promise.all([
-      globalSDK.client.path.get().then((x) => {
-        setGlobalStore("path", x.data!)
-      }),
-      globalSDK.client.project.list().then(async (x) => {
-        setGlobalStore(
-          "project",
-          x.data!.filter((p) => !p.worktree.includes("opencode-test")).sort((a, b) => a.id.localeCompare(b.id)),
-        )
-      }),
-      globalSDK.client.provider.list().then((x) => {
-        setGlobalStore("provider", x.data ?? {})
-      }),
-      globalSDK.client.provider.auth().then((x) => {
-        setGlobalStore("provider_auth", x.data ?? {})
-      }),
+      retry(() =>
+        globalSDK.client.path.get().then((x) => {
+          setGlobalStore("path", x.data!)
+        }),
+      ),
+      retry(() =>
+        globalSDK.client.project.list().then(async (x) => {
+          setGlobalStore(
+            "project",
+            x.data!.filter((p) => !p.worktree.includes("opencode-test")).sort((a, b) => a.id.localeCompare(b.id)),
+          )
+        }),
+      ),
+      retry(() =>
+        globalSDK.client.provider.list().then((x) => {
+          const data = x.data!
+          setGlobalStore("provider", {
+            ...data,
+            all: data.all.map((provider) => ({
+              ...provider,
+              models: Object.fromEntries(
+                Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated"),
+              ),
+            })),
+          })
+        }),
+      ),
+      retry(() =>
+        globalSDK.client.provider.auth().then((x) => {
+          setGlobalStore("provider_auth", x.data ?? {})
+        }),
+      ),
     ])
       .then(() => setGlobalStore("ready", true))
       .catch((e) => setGlobalStore("error", e))

packages/app/src/context/layout.tsx

@@ -27,6 +27,8 @@ type SessionTabs = {
   all: string[]
 }
 
+export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
+
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   init: () => {
@@ -45,7 +47,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           height: 280,
         },
         review: {
-          state: "pane" as "pane" | "tab",
+          opened: true,
+        },
+        session: {
+          width: 600,
         },
         sessionTabs: {} as Record<string, SessionTabs>,
       }),
@@ -61,21 +66,22 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
     function enrich(project: { worktree: string; expanded: boolean }) {
       const metadata = globalSync.data.project.find((x) => x.worktree === project.worktree)
-      if (!metadata) return []
       return [
         {
           ...project,
-          ...metadata,
+          ...(metadata ?? {}),
         },
       ]
     }
 
-    function colorize(project: Project & { expanded: boolean }) {
+    function colorize(project: LocalProject) {
       if (project.icon?.color) return project
       const color = pickAvailableColor()
       usedColors.add(color)
       project.icon = { ...project.icon, color }
-      globalSdk.client.project.update({ projectID: project.id, icon: { color } })
+      if (project.id) {
+        globalSdk.client.project.update({ projectID: project.id, icon: { color } })
+      }
       return project
     }
 
@@ -95,7 +101,9 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       projects: {
         list,
         open(directory: string) {
-          if (store.projects.find((x) => x.worktree === directory)) return
+          if (store.projects.find((x) => x.worktree === directory)) {
+            return
+          }
           globalSync.project.loadSessions(directory)
           setStore("projects", (x) => [{ worktree: directory, expanded: true }, ...x])
         },
@@ -103,10 +111,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           setStore("projects", (x) => x.filter((x) => x.worktree !== directory))
         },
         expand(directory: string) {
-          setStore("projects", (x) => x.map((x) => (x.worktree === directory ? { ...x, expanded: true } : x)))
+          const index = store.projects.findIndex((x) => x.worktree === directory)
+          if (index !== -1) setStore("projects", index, "expanded", true)
         },
         collapse(directory: string) {
-          setStore("projects", (x) => x.map((x) => (x.worktree === directory ? { ...x, expanded: false } : x)))
+          const index = store.projects.findIndex((x) => x.worktree === directory)
+          if (index !== -1) setStore("projects", index, "expanded", false)
         },
         move(directory: string, toIndex: number) {
           setStore("projects", (projects) => {
@@ -152,12 +162,25 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
       },
       review: {
-        state: createMemo(() => store.review?.state ?? "closed"),
-        pane() {
-          setStore("review", "state", "pane")
+        opened: createMemo(() => store.review?.opened ?? true),
+        open() {
+          setStore("review", "opened", true)
         },
-        tab() {
-          setStore("review", "state", "tab")
+        close() {
+          setStore("review", "opened", false)
+        },
+        toggle() {
+          setStore("review", "opened", (x) => !x)
+        },
+      },
+      session: {
+        width: createMemo(() => store.session?.width ?? 600),
+        resize(width: number) {
+          if (!store.session) {
+            setStore("session", { width })
+          } else {
+            setStore("session", "width", width)
+          }
         },
       },
       tabs(sessionKey: string) {
@@ -181,14 +204,6 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             }
           },
           async open(tab: string) {
-            if (tab === "chat") {
-              if (!store.sessionTabs[sessionKey]) {
-                setStore("sessionTabs", sessionKey, { all: [], active: undefined })
-              } else {
-                setStore("sessionTabs", sessionKey, "active", undefined)
-              }
-              return
-            }
             const current = store.sessionTabs[sessionKey] ?? { all: [] }
             if (tab !== "review") {
               if (!current.all.includes(tab)) {

packages/app/src/context/local.tsx

@@ -1,5 +1,5 @@
 import { createStore, produce, reconcile } from "solid-js/store"
-import { batch, createEffect, createMemo } from "solid-js"
+import { batch, createMemo } from "solid-js"
 import { filter, firstBy, flat, groupBy, mapValues, pipe, uniqueBy, values } from "remeda"
 import type { FileContent, FileNode, Model, Provider, File as FileStatus } from "@opencode-ai/sdk/v2"
 import { createSimpleContext } from "@opencode-ai/ui/context"
@@ -9,6 +9,7 @@ import { base64Encode } from "@opencode-ai/util/encode"
 import { useProviders } from "@/hooks/use-providers"
 import { DateTime } from "luxon"
 import { persisted } from "@/utils/persist"
+import { showToast } from "@opencode-ai/ui/toast"
 
 export type LocalFile = FileNode &
   Partial<{
@@ -61,24 +62,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     }
 
-    // Automatically update model when agent changes
-    createEffect(() => {
-      const value = agent.current()
-      if (value.model) {
-        if (isModelValid(value.model))
-          model.set({
-            providerID: value.model.providerID,
-            modelID: value.model.modelID,
-          })
-        // else
-        //   toast.show({
-        //     type: "warning",
-        //     message: `Agent ${value.name}'s configured model ${value.model.providerID}/${value.model.modelID} is not valid`,
-        //     duration: 3000,
-        //   })
-      }
-    })
-
     const agent = (() => {
       const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
       const [store, setStore] = createStore<{
@@ -276,11 +259,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       const [store, setStore] = createStore<{
         node: Record<string, LocalFile>
       }>({
-        node: Object.fromEntries(sync.data.node.map((x) => [x.path, x])),
+        node: {}, //  Object.fromEntries(sync.data.node.map((x) => [x.path, x])),
       })
 
-      const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
-      const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))
+      // const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
+      // const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))
 
       // createEffect((prev: FileStatus[]) => {
       //   const removed = prev.filter((p) => !sync.data.changes.find((c) => c.path === p.path))
@@ -308,16 +291,16 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       //   return sync.data.changes
       // }, sync.data.changes)
 
-      const changed = (path: string) => {
-        const node = store.node[path]
-        if (node?.status) return true
-        const set = changeset()
-        if (set.has(path)) return true
-        for (const p of set) {
-          if (p.startsWith(path ? path + "/" : "")) return true
-        }
-        return false
-      }
+      // const changed = (path: string) => {
+      //   const node = store.node[path]
+      //   if (node?.status) return true
+      //   const set = changeset()
+      //   if (set.has(path)) return true
+      //   for (const p of set) {
+      //     if (p.startsWith(path ? path + "/" : "")) return true
+      //   }
+      //   return false
+      // }
 
       // const resetNode = (path: string) => {
       //   setStore("node", path, {
@@ -336,16 +319,26 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
 
       const load = async (path: string) => {
         const relativePath = relative(path)
-        await sdk.client.file.read({ path: relativePath }).then((x) => {
-          setStore(
-            "node",
-            relativePath,
-            produce((draft) => {
-              draft.loaded = true
-              draft.content = x.data
-            }),
-          )
-        })
+        await sdk.client.file
+          .read({ path: relativePath })
+          .then((x) => {
+            if (!store.node[relativePath]) return
+            setStore(
+              "node",
+              relativePath,
+              produce((draft) => {
+                draft.loaded = true
+                draft.content = x.data
+              }),
+            )
+          })
+          .catch((e) => {
+            showToast({
+              variant: "error",
+              title: "Failed to load file",
+              description: e.message,
+            })
+          })
       }
 
       const fetch = async (path: string) => {
@@ -359,7 +352,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       const init = async (path: string) => {
         const relativePath = relative(path)
         if (!store.node[relativePath]) await fetch(path)
-        if (store.node[relativePath].loaded) return
+        if (store.node[relativePath]?.loaded) return
         return load(relativePath)
       }
 
@@ -379,22 +372,25 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         context.addActive()
         if (options?.pinned) setStore("node", path, "pinned", true)
         if (options?.view && store.node[relativePath].view === undefined) setStore("node", path, "view", options.view)
-        if (store.node[relativePath].loaded) return
+        if (store.node[relativePath]?.loaded) return
         return load(relativePath)
       }
 
       const list = async (path: string) => {
-        return sdk.client.file.list({ path: path + "/" }).then((x) => {
-          setStore(
-            "node",
-            produce((draft) => {
-              x.data!.forEach((node) => {
-                if (node.path in draft) return
-                draft[node.path] = node
-              })
-            }),
-          )
-        })
+        return sdk.client.file
+          .list({ path: path + "/" })
+          .then((x) => {
+            setStore(
+              "node",
+              produce((draft) => {
+                x.data!.forEach((node) => {
+                  if (node.path in draft) return
+                  draft[node.path] = node
+                })
+              }),
+            )
+          })
+          .catch(() => {})
       }
 
       const searchFiles = (query: string) => sdk.client.find.files({ query, dirs: "false" }).then((x) => x.data!)
@@ -425,7 +421,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         init,
         expand(path: string) {
           setStore("node", path, "expanded", true)
-          if (store.node[path].loaded) return
+          if (store.node[path]?.loaded) return
           setStore("node", path, "loaded", true)
           list(path)
         },
@@ -465,8 +461,8 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         setChangeIndex(path: string, index: number | undefined) {
           setStore("node", path, "selectedChange", index)
         },
-        changes,
-        changed,
+        // changes,
+        // changed,
         children(path: string) {
           return Object.values(store.node).filter(
             (x) =>

packages/app/src/context/platform.tsx

@@ -5,6 +5,15 @@ export type Platform = {
   /** Platform discriminator */
   platform: "web" | "tauri"
 
+  /** App version */
+  version?: string
+
+  /** Open a URL in the default browser */
+  openLink(url: string): void
+
+  /** Restart the app  */
+  restart(): Promise<void>
+
   /** Open native directory picker dialog (Tauri only) */
   openDirectoryPickerDialog?(opts?: { title?: string; multiple?: boolean }): Promise<string | string[] | null>
 
@@ -14,9 +23,6 @@ export type Platform = {
   /** Save file picker dialog (Tauri only) */
   saveFilePickerDialog?(opts?: { title?: string; defaultPath?: string }): Promise<string | null>
 
-  /** Open a URL in the default browser */
-  openLink(url: string): void
-
   /** Storage mechanism, defaults to localStorage */
   storage?: (name?: string) => SyncStorage | AsyncStorage
 
@@ -25,6 +31,9 @@ export type Platform = {
 
   /** Install updates (Tauri only) */
   update?(): Promise<void>
+
+  /** Fetch override */
+  fetch?: typeof fetch
 }
 
 export const { use: usePlatform, provider: PlatformProvider } = createSimpleContext({

packages/app/src/context/sdk.tsx

@@ -1,17 +1,18 @@
 import { createOpencodeClient, type Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { onCleanup } from "solid-js"
 import { useGlobalSDK } from "./global-sdk"
+import { usePlatform } from "./platform"
 
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
   init: (props: { directory: string }) => {
+    const platform = usePlatform()
     const globalSDK = useGlobalSDK()
-    const abort = new AbortController()
     const sdk = createOpencodeClient({
       baseUrl: globalSDK.url,
-      signal: abort.signal,
+      signal: AbortSignal.timeout(1000 * 60 * 10),
+      fetch: platform.fetch,
       directory: props.directory,
       throwOnError: true,
     })
@@ -24,10 +25,6 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       emitter.emit(event.type, event)
     })
 
-    onCleanup(() => {
-      abort.abort()
-    })
-
     return { directory: props.directory, client: sdk, event: emitter, url: globalSDK.url }
   },
 })

packages/app/src/context/sync.tsx

@@ -1,6 +1,7 @@
 import { produce } from "solid-js/store"
 import { createMemo } from "solid-js"
 import { Binary } from "@opencode-ai/util/binary"
+import { retry } from "@opencode-ai/util/retry"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
@@ -33,14 +34,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         },
         addOptimisticMessage(input: {
           sessionID: string
-          text: string
+          messageID: string
           parts: Part[]
           agent: string
           model: { providerID: string; modelID: string }
         }) {
-          const messageID = crypto.randomUUID()
           const message: Message = {
-            id: messageID,
+            id: input.messageID,
             sessionID: input.sessionID,
             role: "user",
             time: { created: Date.now() },
@@ -53,24 +53,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
               if (!messages) {
                 draft.message[input.sessionID] = [message]
               } else {
-                const result = Binary.search(messages, messageID, (m) => m.id)
+                const result = Binary.search(messages, input.messageID, (m) => m.id)
                 messages.splice(result.index, 0, message)
               }
-              draft.part[messageID] = input.parts.map((part, i) => ({
-                ...part,
-                id: `${messageID}-${i}`,
-                sessionID: input.sessionID,
-                messageID,
-              }))
+              draft.part[input.messageID] = input.parts.slice()
             }),
           )
         },
         async sync(sessionID: string, _isRetry = false) {
           const [session, messages, todo, diff] = await Promise.all([
-            sdk.client.session.get({ sessionID }, { throwOnError: true }),
-            sdk.client.session.messages({ sessionID, limit: 100 }),
-            sdk.client.session.todo({ sessionID }),
-            sdk.client.session.diff({ sessionID }),
+            retry(() => sdk.client.session.get({ sessionID })),
+            retry(() => sdk.client.session.messages({ sessionID, limit: 100 })),
+            retry(() => sdk.client.session.todo({ sessionID })),
+            retry(() => sdk.client.session.diff({ sessionID })),
           ])
           setStore(
             produce((draft) => {

packages/app/src/context/terminal.tsx

@@ -36,35 +36,49 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
       all: createMemo(() => Object.values(store.all)),
       active: createMemo(() => store.active),
       new() {
-        sdk.client.pty.create({ title: `Terminal ${store.all.length + 1}` }).then((pty) => {
-          const id = pty.data?.id
-          if (!id) return
-          setStore("all", [
-            ...store.all,
-            {
-              id,
-              title: pty.data?.title ?? "Terminal",
-            },
-          ])
-          setStore("active", id)
-        })
+        sdk.client.pty
+          .create({ title: `Terminal ${store.all.length + 1}` })
+          .then((pty) => {
+            const id = pty.data?.id
+            if (!id) return
+            setStore("all", [
+              ...store.all,
+              {
+                id,
+                title: pty.data?.title ?? "Terminal",
+              },
+            ])
+            setStore("active", id)
+          })
+          .catch((e) => {
+            console.error("Failed to create terminal", e)
+          })
       },
       update(pty: Partial<LocalPTY> & { id: string }) {
         setStore("all", (x) => x.map((x) => (x.id === pty.id ? { ...x, ...pty } : x)))
-        sdk.client.pty.update({
-          ptyID: pty.id,
-          title: pty.title,
-          size: pty.cols && pty.rows ? { rows: pty.rows, cols: pty.cols } : undefined,
-        })
+        sdk.client.pty
+          .update({
+            ptyID: pty.id,
+            title: pty.title,
+            size: pty.cols && pty.rows ? { rows: pty.rows, cols: pty.cols } : undefined,
+          })
+          .catch((e) => {
+            console.error("Failed to update terminal", e)
+          })
       },
       async clone(id: string) {
         const index = store.all.findIndex((x) => x.id === id)
         const pty = store.all[index]
         if (!pty) return
-        const clone = await sdk.client.pty.create({
-          title: pty.title,
-        })
-        if (!clone.data) return
+        const clone = await sdk.client.pty
+          .create({
+            title: pty.title,
+          })
+          .catch((e) => {
+            console.error("Failed to clone terminal", e)
+            return undefined
+          })
+        if (!clone?.data) return
         setStore("all", index, {
           ...pty,
           ...clone.data,
@@ -88,7 +102,9 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
             setStore("active", previous?.id)
           }
         })
-        await sdk.client.pty.remove({ ptyID: id })
+        await sdk.client.pty.remove({ ptyID: id }).catch((e) => {
+          console.error("Failed to close terminal", e)
+        })
       },
       move(id: string, to: number) {
         const index = store.all.findIndex((f) => f.id === id)

packages/app/src/entry.tsx

@@ -2,6 +2,7 @@
 import { render } from "solid-js/web"
 import { App } from "@/app"
 import { Platform, PlatformProvider } from "@/context/platform"
+import pkg from "../package.json"
 
 const root = document.getElementById("root")
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
@@ -12,9 +13,13 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 
 const platform: Platform = {
   platform: "web",
+  version: pkg.version,
   openLink(url: string) {
     window.open(url, "_blank")
   },
+  restart: async () => {
+    window.location.reload()
+  },
 }
 
 render(

packages/app/src/index.css

@@ -1,11 +1,6 @@
 @import "@opencode-ai/ui/styles/tailwind";
 
 :root {
-  html,
-  body {
-    touch-action: manipulation;
-  }
-
   a {
     cursor: default;
   }

packages/app/src/pages/directory-layout.tsx

@@ -1,6 +1,6 @@
 import { createMemo, Show, type ParentProps } from "solid-js"
 import { useParams } from "@solidjs/router"
-import { SDKProvider } from "@/context/sdk"
+import { SDKProvider, useSDK } from "@/context/sdk"
 import { SyncProvider, useSync } from "@/context/sync"
 import { LocalProvider } from "@/context/local"
 import { base64Decode } from "@opencode-ai/util/encode"
@@ -18,8 +18,15 @@ export default function Layout(props: ParentProps) {
         <SyncProvider>
           {iife(() => {
             const sync = useSync()
+            const sdk = useSDK()
             return (
-              <DataProvider data={sync.data} directory={directory()}>
+              <DataProvider
+                data={sync.data}
+                directory={directory()}
+                onPermissionRespond={(input) => {
+                  sdk.client.permission.respond(input)
+                }}
+              >
                 <LocalProvider>{props.children}</LocalProvider>
               </DataProvider>
             )

packages/app/src/pages/error.tsx

@@ -1,6 +1,7 @@
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Logo } from "@opencode-ai/ui/logo"
-import { Component } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Component, Show } from "solid-js"
 import { usePlatform } from "@/context/platform"
 import { Icon } from "@opencode-ai/ui/icon"
 
@@ -9,9 +10,17 @@ export type InitError = {
   data: Record<string, unknown>
 }
 
-function formatError(error: InitError | undefined): string {
-  if (!error) return "Unknown error"
+function isInitError(error: unknown): error is InitError {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    "data" in error &&
+    typeof (error as InitError).data === "object"
+  )
+}
 
+function formatInitError(error: InitError): string {
   const data = error.data
   switch (error.name) {
     case "MCPFailed":
@@ -53,16 +62,66 @@ function formatError(error: InitError | undefined): string {
   }
 }
 
+function formatErrorChain(error: unknown, depth = 0, parentMessage?: string): string {
+  if (!error) return "Unknown error"
+
+  if (isInitError(error)) {
+    const message = formatInitError(error)
+    if (depth > 0 && parentMessage === message) return ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\nCaused by:\n` : ""
+    return indent + message
+  }
+
+  if (error instanceof Error) {
+    const isDuplicate = depth > 0 && parentMessage === error.message
+    const parts: string[] = []
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\nCaused by:\n` : ""
+
+    if (!isDuplicate) {
+      // Stack already includes error name and message, so prefer it
+      parts.push(indent + (error.stack ?? `${error.name}: ${error.message}`))
+    } else if (error.stack) {
+      // Duplicate message - only show the stack trace lines (skip message)
+      const trace = error.stack.split("\n").slice(1).join("\n").trim()
+      if (trace) {
+        parts.push(trace)
+      }
+    }
+
+    if (error.cause) {
+      const causeResult = formatErrorChain(error.cause, depth + 1, error.message)
+      if (causeResult) {
+        parts.push(causeResult)
+      }
+    }
+
+    return parts.join("\n\n")
+  }
+
+  if (typeof error === "string") {
+    if (depth > 0 && parentMessage === error) return ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\nCaused by:\n` : ""
+    return indent + error
+  }
+
+  const indent = depth > 0 ? `\n${"─".repeat(40)}\nCaused by:\n` : ""
+  return indent + JSON.stringify(error, null, 2)
+}
+
+function formatError(error: unknown): string {
+  return formatErrorChain(error, 0)
+}
+
 interface ErrorPageProps {
-  error: InitError | undefined
+  error: unknown
 }
 
 export const ErrorPage: Component<ErrorPageProps> = (props) => {
   const platform = usePlatform()
   return (
-    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center">
+    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
       <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
-        <Logo class="h-8 w-auto text-text-strong" />
+        <Logo class="w-58.5 opacity-12 shrink-0" />
         <div class="flex flex-col items-center gap-2 text-center">
           <h1 class="text-lg font-medium text-text-strong">Something went wrong</h1>
           <p class="text-sm text-text-weak">An error occurred while loading the application.</p>
@@ -76,16 +135,24 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
           label="Error Details"
           hideLabel
         />
-        <div class="flex items-center justify-center gap-1">
-          Please report this error to the OpenCode team
-          <button
-            type="button"
-            class="flex items-center text-text-interactive-base gap-1"
-            onClick={() => platform.openLink("https://opencode.ai/desktop-feedback")}
-          >
-            <div>on Discord</div>
-            <Icon name="discord" class="text-text-interactive-base" />
-          </button>
+        <Button size="large" onClick={platform.restart}>
+          Restart
+        </Button>
+        <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-1">
+            Please report this error to the OpenCode team
+            <button
+              type="button"
+              class="flex items-center text-text-interactive-base gap-1"
+              onClick={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+            >
+              <div>on Discord</div>
+              <Icon name="discord" class="text-text-interactive-base" />
+            </button>
+          </div>
+          <Show when={platform.version}>
+            <p class="text-xs text-text-weak">Version: {platform.version}</p>
+          </Show>
         </div>
       </div>
     </div>

packages/app/src/pages/layout.tsx

@@ -4,15 +4,17 @@ import {
   createSignal,
   For,
   Match,
+  onCleanup,
   onMount,
   ParentProps,
   Show,
   Switch,
+  untrack,
   type JSX,
 } from "solid-js"
 import { DateTime } from "luxon"
 import { A, useNavigate, useParams } from "@solidjs/router"
-import { useLayout, getAvatarColors } from "@/context/layout"
+import { useLayout, getAvatarColors, LocalProject } from "@/context/layout"
 import { useGlobalSync } from "@/context/global-sync"
 import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
 import { Avatar } from "@opencode-ai/ui/avatar"
@@ -26,7 +28,7 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { getFilename } from "@opencode-ai/util/path"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Session, Project } from "@opencode-ai/sdk/v2/client"
+import { Session } from "@opencode-ai/sdk/v2/client"
 import { usePlatform } from "@/context/platform"
 import { createStore, produce } from "solid-js/store"
 import {
@@ -39,12 +41,13 @@ import {
 } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useProviders } from "@/hooks/use-providers"
-import { showToast, Toast } from "@opencode-ai/ui/toast"
+import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useNotification } from "@/context/notification"
 import { Binary } from "@opencode-ai/util/binary"
 import { Header } from "@/components/header"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
 import { useCommand } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
@@ -53,9 +56,29 @@ export default function Layout(props: ParentProps) {
   const [store, setStore] = createStore({
     lastSession: {} as { [directory: string]: string },
     activeDraggable: undefined as string | undefined,
+    mobileSidebarOpen: false,
+    mobileProjectsExpanded: {} as Record<string, boolean>,
   })
 
+  const mobileSidebar = {
+    open: () => store.mobileSidebarOpen,
+    show: () => setStore("mobileSidebarOpen", true),
+    hide: () => setStore("mobileSidebarOpen", false),
+    toggle: () => setStore("mobileSidebarOpen", (x) => !x),
+  }
+
+  const mobileProjects = {
+    expanded: (directory: string) => store.mobileProjectsExpanded[directory] ?? true,
+    expand: (directory: string) => setStore("mobileProjectsExpanded", directory, true),
+    collapse: (directory: string) => setStore("mobileProjectsExpanded", directory, false),
+  }
+
   let scrollContainerRef: HTMLDivElement | undefined
+  const xlQuery = window.matchMedia("(min-width: 1280px)")
+  const [isLargeViewport, setIsLargeViewport] = createSignal(xlQuery.matches)
+  const handleViewportChange = (e: MediaQueryListEvent) => setIsLargeViewport(e.matches)
+  xlQuery.addEventListener("change", handleViewportChange)
+  onCleanup(() => xlQuery.removeEventListener("change", handleViewportChange))
 
   const params = useParams()
   const globalSDK = useGlobalSDK()
@@ -67,9 +90,44 @@ export default function Layout(props: ParentProps) {
   const providers = useProviders()
   const dialog = useDialog()
   const command = useCommand()
+  const theme = useTheme()
+  const availableThemeEntries = createMemo(() => Object.entries(theme.themes()))
+  const colorSchemeOrder: ColorScheme[] = ["system", "light", "dark"]
+  const colorSchemeLabel: Record<ColorScheme, string> = {
+    system: "System",
+    light: "Light",
+    dark: "Dark",
+  }
+
+  function cycleTheme(direction = 1) {
+    const ids = availableThemeEntries().map(([id]) => id)
+    if (ids.length === 0) return
+    const currentIndex = ids.indexOf(theme.themeId())
+    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + ids.length) % ids.length
+    const nextThemeId = ids[nextIndex]
+    theme.setTheme(nextThemeId)
+    const nextTheme = theme.themes()[nextThemeId]
+    showToast({
+      title: "Theme switched",
+      description: nextTheme?.name ?? nextThemeId,
+    })
+  }
+
+  function cycleColorScheme(direction = 1) {
+    const current = theme.colorScheme()
+    const currentIndex = colorSchemeOrder.indexOf(current)
+    const nextIndex =
+      currentIndex === -1 ? 0 : (currentIndex + direction + colorSchemeOrder.length) % colorSchemeOrder.length
+    const next = colorSchemeOrder[nextIndex]
+    theme.setColorScheme(next)
+    showToast({
+      title: "Color scheme",
+      description: colorSchemeLabel[next],
+    })
+  }
 
   onMount(async () => {
-    if (platform.checkUpdate && platform.update) {
+    if (platform.checkUpdate && platform.update && platform.restart) {
       const { updateAvailable, version } = await platform.checkUpdate()
       if (updateAvailable) {
         showToast({
@@ -80,7 +138,10 @@ export default function Layout(props: ParentProps) {
           actions: [
             {
               label: "Install and restart",
-              onClick: () => platform!.update!(),
+              onClick: async () => {
+                await platform.update!()
+                await platform.restart!()
+              },
             },
             {
               label: "Not yet",
@@ -92,40 +153,102 @@ export default function Layout(props: ParentProps) {
     }
   })
 
-  function flattenSessions(sessions: Session[]): Session[] {
-    const childrenMap = new Map<string, Session[]>()
-    for (const session of sessions) {
-      if (session.parentID) {
-        const children = childrenMap.get(session.parentID) ?? []
-        children.push(session)
-        childrenMap.set(session.parentID, children)
+  onMount(() => {
+    const seenSessions = new Set<string>()
+    const toastBySession = new Map<string, number>()
+    const unsub = globalSDK.event.listen((e) => {
+      if (e.details?.type !== "permission.updated") return
+      const directory = e.name
+      const permission = e.details.properties
+      const sessionKey = `${directory}:${permission.sessionID}`
+      if (seenSessions.has(sessionKey)) return
+      seenSessions.add(sessionKey)
+      const currentDir = params.dir ? base64Decode(params.dir) : undefined
+      const currentSession = params.id
+      if (directory === currentDir && permission.sessionID === currentSession) return
+      const [store] = globalSync.child(directory)
+      const session = store.session.find((s) => s.id === permission.sessionID)
+      if (directory === currentDir && session?.parentID === currentSession) return
+      const sessionTitle = session?.title ?? "New session"
+      const projectName = getFilename(directory)
+      const toastId = showToast({
+        persistent: true,
+        icon: "checklist",
+        title: "Permission required",
+        description: `${sessionTitle} in ${projectName} needs permission`,
+        actions: [
+          {
+            label: "Go to session",
+            onClick: () => {
+              navigate(`/${base64Encode(directory)}/session/${permission.sessionID}`)
+            },
+          },
+          {
+            label: "Dismiss",
+            onClick: "dismiss",
+          },
+        ],
+      })
+      toastBySession.set(sessionKey, toastId)
+    })
+    onCleanup(unsub)
+
+    createEffect(() => {
+      const currentDir = params.dir ? base64Decode(params.dir) : undefined
+      const currentSession = params.id
+      if (!currentDir || !currentSession) return
+      const sessionKey = `${currentDir}:${currentSession}`
+      const toastId = toastBySession.get(sessionKey)
+      if (toastId !== undefined) {
+        toaster.dismiss(toastId)
+        toastBySession.delete(sessionKey)
+        seenSessions.delete(sessionKey)
       }
-    }
-    const result: Session[] = []
-    function visit(session: Session) {
-      result.push(session)
-      for (const child of childrenMap.get(session.id) ?? []) {
-        visit(child)
+      const [store] = globalSync.child(currentDir)
+      const childSessions = store.session.filter((s) => s.parentID === currentSession)
+      for (const child of childSessions) {
+        const childKey = `${currentDir}:${child.id}`
+        const childToastId = toastBySession.get(childKey)
+        if (childToastId !== undefined) {
+          toaster.dismiss(childToastId)
+          toastBySession.delete(childKey)
+          seenSessions.delete(childKey)
+        }
       }
-    }
-    for (const session of sessions) {
-      if (!session.parentID) visit(session)
-    }
-    return result
+    })
+  })
+
+  function sortSessions(a: Session, b: Session) {
+    const now = Date.now()
+    const oneMinuteAgo = now - 60 * 1000
+    const aUpdated = a.time.updated ?? a.time.created
+    const bUpdated = b.time.updated ?? b.time.created
+    const aRecent = aUpdated > oneMinuteAgo
+    const bRecent = bUpdated > oneMinuteAgo
+    if (aRecent && bRecent) return a.id.localeCompare(b.id)
+    if (aRecent && !bRecent) return -1
+    if (!aRecent && bRecent) return 1
+    return bUpdated - aUpdated
   }
 
   function scrollToSession(sessionId: string) {
     if (!scrollContainerRef) return
     const element = scrollContainerRef.querySelector(`[data-session-id="${sessionId}"]`)
     if (element) {
-      element.scrollIntoView({ block: "center", behavior: "smooth" })
+      element.scrollIntoView({ block: "nearest", behavior: "smooth" })
     }
   }
 
+  function projectSessions(directory: string) {
+    if (!directory) return []
+    const sessions = globalSync.child(directory)[0].session.toSorted(sortSessions)
+    return (sessions ?? []).filter((s) => !s.parentID)
+  }
+
   const currentSessions = createMemo(() => {
     if (!params.dir) return []
     const directory = base64Decode(params.dir)
-    return flattenSessions(globalSync.child(directory)[0].session ?? [])
+    return projectSessions(directory)
   })
 
   function navigateSessionByOffset(offset: number) {
@@ -162,7 +285,7 @@ export default function Layout(props: ParentProps) {
     const nextProject = projects[nextProjectIndex]
     if (!nextProject) return
 
-    const nextProjectSessions = flattenSessions(globalSync.child(nextProject.worktree)[0].session ?? [])
+    const nextProjectSessions = projectSessions(nextProject.worktree)
     if (nextProjectSessions.length === 0) {
       navigateToProject(nextProject.worktree)
       return
@@ -199,57 +322,94 @@ export default function Layout(props: ParentProps) {
     }
   }
 
-  command.register(() => [
-    {
-      id: "sidebar.toggle",
-      title: "Toggle sidebar",
-      category: "View",
-      keybind: "mod+b",
-      onSelect: () => layout.sidebar.toggle(),
-    },
-    ...(platform.openDirectoryPickerDialog
-      ? [
-          {
-            id: "project.open",
-            title: "Open project",
-            category: "Project",
-            keybind: "mod+o",
-            onSelect: () => chooseProject(),
-          },
-        ]
-      : []),
-    {
-      id: "provider.connect",
-      title: "Connect provider",
-      category: "Provider",
-      onSelect: () => connectProvider(),
-    },
-    {
-      id: "session.previous",
-      title: "Previous session",
-      category: "Session",
-      keybind: "alt+arrowup",
-      onSelect: () => navigateSessionByOffset(-1),
-    },
-    {
-      id: "session.next",
-      title: "Next session",
-      category: "Session",
-      keybind: "alt+arrowdown",
-      onSelect: () => navigateSessionByOffset(1),
-    },
-    {
-      id: "session.archive",
-      title: "Archive session",
-      category: "Session",
-      keybind: "mod+shift+backspace",
-      disabled: !params.dir || !params.id,
-      onSelect: () => {
-        const session = currentSessions().find((s) => s.id === params.id)
-        if (session) archiveSession(session)
+  command.register(() => {
+    const commands = [
+      {
+        id: "sidebar.toggle",
+        title: "Toggle sidebar",
+        category: "View",
+        keybind: "mod+b",
+        onSelect: () => layout.sidebar.toggle(),
       },
-    },
-  ])
+      ...(platform.openDirectoryPickerDialog
+        ? [
+            {
+              id: "project.open",
+              title: "Open project",
+              category: "Project",
+              keybind: "mod+o",
+              onSelect: () => chooseProject(),
+            },
+          ]
+        : []),
+      {
+        id: "provider.connect",
+        title: "Connect provider",
+        category: "Provider",
+        onSelect: () => connectProvider(),
+      },
+      {
+        id: "session.previous",
+        title: "Previous session",
+        category: "Session",
+        keybind: "alt+arrowup",
+        onSelect: () => navigateSessionByOffset(-1),
+      },
+      {
+        id: "session.next",
+        title: "Next session",
+        category: "Session",
+        keybind: "alt+arrowdown",
+        onSelect: () => navigateSessionByOffset(1),
+      },
+      {
+        id: "session.archive",
+        title: "Archive session",
+        category: "Session",
+        keybind: "mod+shift+backspace",
+        disabled: !params.dir || !params.id,
+        onSelect: () => {
+          const session = currentSessions().find((s) => s.id === params.id)
+          if (session) archiveSession(session)
+        },
+      },
+      {
+        id: "theme.cycle",
+        title: "Cycle theme",
+        category: "Theme",
+        keybind: "mod+shift+t",
+        onSelect: () => cycleTheme(1),
+      },
+    ]
+
+    for (const [id, definition] of availableThemeEntries()) {
+      commands.push({
+        id: `theme.set.${id}`,
+        title: `Use theme: ${definition.name ?? id}`,
+        category: "Theme",
+        onSelect: () => theme.setTheme(id),
+      })
+    }
+
+    commands.push({
+      id: "theme.scheme.cycle",
+      title: "Cycle color scheme",
+      category: "Theme",
+      keybind: "mod+shift+s",
+      onSelect: () => cycleColorScheme(1),
+    })
+
+    for (const scheme of colorSchemeOrder) {
+      commands.push({
+        id: `theme.scheme.${scheme}`,
+        title: `Use color scheme: ${colorSchemeLabel[scheme]}`,
+        category: "Theme",
+        onSelect: () => theme.setColorScheme(scheme),
+      })
+    }
+
+    return commands
+  })
 
   function connectProvider() {
     dialog.show(() => <DialogSelectProvider />)
@@ -259,11 +419,13 @@ export default function Layout(props: ParentProps) {
     if (!directory) return
     const lastSession = store.lastSession[directory]
     navigate(`/${base64Encode(directory)}${lastSession ? `/session/${lastSession}` : ""}`)
+    mobileSidebar.hide()
   }
 
   function navigateToSession(session: Session | undefined) {
     if (!session) return
     navigate(`/${params.dir}/session/${session?.id}`)
+    mobileSidebar.hide()
   }
 
   function openProject(directory: string, navigate = true) {
@@ -297,13 +459,20 @@ export default function Layout(props: ParentProps) {
   createEffect(() => {
     if (!params.dir || !params.id) return
     const directory = base64Decode(params.dir)
-    setStore("lastSession", directory, params.id)
-    notification.session.markViewed(params.id)
+    const id = params.id
+    setStore("lastSession", directory, id)
+    notification.session.markViewed(id)
+    untrack(() => layout.projects.expand(directory))
+    requestAnimationFrame(() => scrollToSession(id))
   })
 
   createEffect(() => {
-    const sidebarWidth = layout.sidebar.opened() ? layout.sidebar.width() : 48
-    document.documentElement.style.setProperty("--dialog-left-margin", `${sidebarWidth}px`)
+    if (isLargeViewport()) {
+      const sidebarWidth = layout.sidebar.opened() ? layout.sidebar.width() : 48
+      document.documentElement.style.setProperty("--dialog-left-margin", `${sidebarWidth}px`)
+    } else {
+      document.documentElement.style.setProperty("--dialog-left-margin", "0px")
+    }
   })
 
   function getDraggableId(event: unknown): string | undefined {
@@ -337,7 +506,7 @@ export default function Layout(props: ParentProps) {
   }
 
   const ProjectAvatar = (props: {
-    project: Project
+    project: LocalProject
     class?: string
     expandable?: boolean
     notify?: boolean
@@ -350,7 +519,7 @@ export default function Layout(props: ParentProps) {
     const opencode = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
 
     return (
-      <div class="relative size-5 shrink-0 rounded-sm overflow-hidden">
+      <div class="relative size-5 shrink-0 rounded-sm">
         <Avatar
           fallback={name()}
           src={props.project.id === opencode ? "https://opencode.ai/favicon.svg" : props.project.icon?.url}
@@ -380,7 +549,7 @@ export default function Layout(props: ParentProps) {
     )
   }
 
-  const ProjectVisual = (props: { project: Project & { expanded: boolean }; class?: string }): JSX.Element => {
+  const ProjectVisual = (props: { project: LocalProject; class?: string }): JSX.Element => {
     const name = createMemo(() => getFilename(props.project.worktree))
     const current = createMemo(() => base64Decode(params.dir ?? ""))
     return (
@@ -416,18 +585,27 @@ export default function Layout(props: ParentProps) {
   const SessionItem = (props: {
     session: Session
     slug: string
-    project: Project
-    depth?: number
-    childrenMap: Map<string, Session[]>
+    project: LocalProject
+    mobile?: boolean
   }): JSX.Element => {
     const notification = useNotification()
-    const depth = props.depth ?? 0
-    const children = createMemo(() => props.childrenMap.get(props.session.id) ?? [])
     const updated = createMemo(() => DateTime.fromMillis(props.session.time.updated))
     const notifications = createMemo(() => notification.session.unseen(props.session.id))
     const hasError = createMemo(() => notifications().some((n) => n.type === "error"))
+    const hasPermissions = createMemo(() => {
+      const store = globalSync.child(props.project.worktree)[0]
+      const permissions = store.permission?.[props.session.id] ?? []
+      if (permissions.length > 0) return true
+      const childSessions = store.session.filter((s) => s.parentID === props.session.id)
+      for (const child of childSessions) {
+        const childPermissions = store.permission?.[child.id] ?? []
+        if (childPermissions.length > 0) return true
+      }
+      return false
+    })
     const isWorking = createMemo(() => {
       if (props.session.id === params.id) return false
+      if (hasPermissions()) return false
       const status = globalSync.child(props.project.worktree)[0].session_status[props.session.id]
       return status?.type === "busy" || status?.type === "retry"
     })
@@ -437,15 +615,20 @@ export default function Layout(props: ParentProps) {
           data-session-id={props.session.id}
           class="group/session relative w-full pr-2 py-1 rounded-md cursor-default transition-colors
                  hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover"
-          style={{ "padding-left": `${16 + depth * 12}px` }}
+          style={{ "padding-left": "16px" }}
         >
-          <Tooltip placement="right" value={props.session.title} gutter={10}>
+          <Tooltip placement={props.mobile ? "bottom" : "right"} value={props.session.title} gutter={10}>
             <A
               href={`${props.slug}/session/${props.session.id}`}
               class="flex flex-col min-w-0 text-left w-full focus:outline-none"
             >
               <div class="flex items-center self-stretch gap-6 justify-between transition-[padding] group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7">
-                <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                <span
+                  classList={{
+                    "text-14-regular text-text-strong overflow-hidden text-ellipsis truncate": true,
+                    "animate-pulse": isWorking(),
+                  }}
+                >
                   {props.session.title}
                 </span>
                 <div class="shrink-0 group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
@@ -453,6 +636,9 @@ export default function Layout(props: ParentProps) {
                     <Match when={isWorking()}>
                       <Spinner class="size-2.5 mr-0.5" />
                     </Match>
+                    <Match when={hasPermissions()}>
+                      <div class="size-1.5 mr-1.5 rounded-full bg-surface-warning-strong" />
+                    </Match>
                     <Match when={hasError()}>
                       <div class="size-1.5 mr-1.5 rounded-full bg-text-diff-delete-base" />
                     </Match>
@@ -486,56 +672,54 @@ export default function Layout(props: ParentProps) {
             </A>
           </Tooltip>
           <div class="hidden group-hover/session:flex group-active/session:flex group-focus-within/session:flex text-text-base gap-1 items-center absolute top-1 right-1">
-            <Tooltip placement="right" value="Archive session">
+            <Tooltip
+              placement={props.mobile ? "bottom" : "right"}
+              value={
+                <div class="flex items-center gap-2">
+                  <span>Archive session</span>
+                  <span class="text-icon-base text-12-medium">{command.keybind("session.archive")}</span>
+                </div>
+              }
+            >
               <IconButton icon="archive" variant="ghost" onClick={() => archiveSession(props.session)} />
             </Tooltip>
           </div>
         </div>
-        <For each={children()}>
-          {(child) => (
-            <SessionItem
-              session={child}
-              slug={props.slug}
-              project={props.project}
-              depth={depth + 1}
-              childrenMap={props.childrenMap}
-            />
-          )}
-        </For>
       </>
     )
   }
 
-  const SortableProject = (props: { project: Project & { expanded: boolean } }): JSX.Element => {
+  const SortableProject = (props: { project: LocalProject; mobile?: boolean }): JSX.Element => {
     const sortable = createSortable(props.project.worktree)
+    const showExpanded = createMemo(() => props.mobile || layout.sidebar.opened())
     const slug = createMemo(() => base64Encode(props.project.worktree))
     const name = createMemo(() => getFilename(props.project.worktree))
     const [store, setProjectStore] = globalSync.child(props.project.worktree)
-    const sessions = createMemo(() => store.session ?? [])
+    const sessions = createMemo(() => store.session.toSorted(sortSessions))
     const rootSessions = createMemo(() => sessions().filter((s) => !s.parentID))
-    const childSessionsByParent = createMemo(() => {
-      const map = new Map<string, Session[]>()
-      for (const session of sessions()) {
-        if (session.parentID) {
-          const children = map.get(session.parentID) ?? []
-          children.push(session)
-          map.set(session.parentID, children)
-        }
-      }
-      return map
-    })
     const hasMoreSessions = createMemo(() => store.session.length >= store.limit)
     const loadMoreSessions = async () => {
-      setProjectStore("limit", (limit) => limit + 10)
+      setProjectStore("limit", (limit) => limit + 5)
       await globalSync.project.loadSessions(props.project.worktree)
     }
-    const [expanded, setExpanded] = createSignal(true)
+    const isExpanded = createMemo(() =>
+      props.mobile ? mobileProjects.expanded(props.project.worktree) : props.project.expanded,
+    )
+    const handleOpenChange = (open: boolean) => {
+      if (props.mobile) {
+        if (open) mobileProjects.expand(props.project.worktree)
+        else mobileProjects.collapse(props.project.worktree)
+      } else {
+        if (open) layout.projects.expand(props.project.worktree)
+        else layout.projects.collapse(props.project.worktree)
+      }
+    }
     return (
       // @ts-ignore
       <div use:sortable classList={{ "opacity-30": sortable.isActiveDraggable }}>
         <Switch>
-          <Match when={layout.sidebar.opened()}>
-            <Collapsible variant="ghost" defaultOpen class="gap-2 shrink-0" onOpenChange={setExpanded}>
+          <Match when={showExpanded()}>
+            <Collapsible variant="ghost" open={isExpanded()} class="gap-2 shrink-0" onOpenChange={handleOpenChange}>
               <Button
                 as={"div"}
                 variant="ghost"
@@ -546,7 +730,7 @@ export default function Layout(props: ParentProps) {
                     project={props.project}
                     class="group-hover/session:hidden"
                     expandable
-                    notify={!expanded()}
+                    notify={!isExpanded()}
                   />
                   <span class="truncate text-14-medium text-text-strong">{name()}</span>
                 </Collapsible.Trigger>
@@ -556,12 +740,20 @@ export default function Layout(props: ParentProps) {
                     <DropdownMenu.Portal>
                       <DropdownMenu.Content>
                         <DropdownMenu.Item onSelect={() => closeProject(props.project.worktree)}>
-                          <DropdownMenu.ItemLabel>Close Project</DropdownMenu.ItemLabel>
+                          <DropdownMenu.ItemLabel>Close project</DropdownMenu.ItemLabel>
                         </DropdownMenu.Item>
                       </DropdownMenu.Content>
                     </DropdownMenu.Portal>
                   </DropdownMenu>
-                  <Tooltip placement="top" value="New session">
+                  <Tooltip
+                    placement="top"
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>New session</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("session.new")}</span>
+                      </div>
+                    }
+                  >
                     <IconButton as={A} href={`${slug()}/session`} icon="plus-small" variant="ghost" />
                   </Tooltip>
                 </div>
@@ -570,12 +762,7 @@ export default function Layout(props: ParentProps) {
                 <nav class="hidden @[4rem]:flex w-full flex-col gap-1.5">
                   <For each={rootSessions()}>
                     {(session) => (
-                      <SessionItem
-                        session={session}
-                        slug={slug()}
-                        project={props.project}
-                        childrenMap={childSessionsByParent()}
-                      />
+                      <SessionItem session={session} slug={slug()} project={props.project} mobile={props.mobile} />
                     )}
                   </For>
                   <Show when={rootSessions().length === 0}>
@@ -585,7 +772,7 @@ export default function Layout(props: ParentProps) {
                     >
                       <div class="flex items-center self-stretch w-full">
                         <div class="flex-1 min-w-0">
-                          <Tooltip placement="right" value="New session">
+                          <Tooltip placement={props.mobile ? "bottom" : "right"} value="New session">
                             <A
                               href={`${slug()}/session`}
                               class="flex flex-col gap-1 min-w-0 text-left w-full focus:outline-none"
@@ -640,31 +827,23 @@ export default function Layout(props: ParentProps) {
     )
   }
 
-  return (
-    <div class="relative flex-1 min-h-0 flex flex-col">
-      <Header navigateToProject={navigateToProject} navigateToSession={navigateToSession} />
-      <div class="flex-1 min-h-0 flex">
-        <div
-          classList={{
-            "relative @container w-12 pb-5 shrink-0 bg-background-base": true,
-            "flex flex-col gap-5.5 items-start self-stretch justify-between": true,
-            "border-r border-border-weak-base contain-strict": true,
-          }}
-          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
-        >
-          <Show when={layout.sidebar.opened()}>
-            <ResizeHandle
-              direction="horizontal"
-              size={layout.sidebar.width()}
-              min={150}
-              max={window.innerWidth * 0.3}
-              collapseThreshold={80}
-              onResize={layout.sidebar.resize}
-              onCollapse={layout.sidebar.close}
-            />
-          </Show>
-          <div class="flex flex-col items-start self-stretch gap-4 p-2 min-h-0 overflow-hidden">
-            <Tooltip class="shrink-0" placement="right" value="Toggle sidebar" inactive={layout.sidebar.opened()}>
+  const SidebarContent = (sidebarProps: { mobile?: boolean }) => {
+    const expanded = () => sidebarProps.mobile || layout.sidebar.opened()
+    return (
+      <>
+        <div class="flex flex-col items-start self-stretch gap-4 p-2 min-h-0 overflow-hidden">
+          <Show when={!sidebarProps.mobile}>
+            <Tooltip
+              class="shrink-0"
+              placement="right"
+              value={
+                <div class="flex items-center gap-2">
+                  <span>Toggle sidebar</span>
+                  <span class="text-icon-base text-12-medium">{command.keybind("sidebar.toggle")}</span>
+                </div>
+              }
+              inactive={expanded()}
+            >
               <Button
                 variant="ghost"
                 size="large"
@@ -695,101 +874,162 @@ export default function Layout(props: ParentProps) {
                 </Show>
               </Button>
             </Tooltip>
-            <DragDropProvider
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-              onDragOver={handleDragOver}
-              collisionDetector={closestCenter}
+          </Show>
+          <DragDropProvider
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDragOver={handleDragOver}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+            <ConstrainDragXAxis />
+            <div
+              ref={(el) => {
+                if (!sidebarProps.mobile) scrollContainerRef = el
+              }}
+              class="w-full min-w-8 flex flex-col gap-2 min-h-0 overflow-y-auto no-scrollbar"
             >
-              <DragDropSensors />
-              <ConstrainDragXAxis />
-              <div
-                ref={scrollContainerRef}
-                class="w-full min-w-8 flex flex-col gap-2 min-h-0 overflow-y-auto no-scrollbar"
-              >
-                <SortableProvider ids={layout.projects.list().map((p) => p.worktree)}>
-                  <For each={layout.projects.list()}>{(project) => <SortableProject project={project} />}</For>
-                </SortableProvider>
-              </div>
-              <DragOverlay>
-                <ProjectDragOverlay />
-              </DragOverlay>
-            </DragDropProvider>
-          </div>
-          <div class="flex flex-col gap-1.5 self-stretch items-start shrink-0 px-2 py-3">
-            <Switch>
-              <Match when={!providers.paid().length && layout.sidebar.opened()}>
-                <div class="rounded-md bg-background-stronger shadow-xs-border-base">
-                  <div class="p-3 flex flex-col gap-2">
-                    <div class="text-12-medium text-text-strong">Getting started</div>
-                    <div class="text-text-base">OpenCode includes free models so you can start immediately.</div>
-                    <div class="text-text-base">Connect any provider to use models, inc. Claude, GPT, Gemini etc.</div>
-                  </div>
-                  <Tooltip placement="right" value="Connect provider" inactive={layout.sidebar.opened()}>
-                    <Button
-                      class="flex w-full text-left justify-start text-12-medium text-text-strong stroke-[1.5px] rounded-lg rounded-t-none shadow-none border-t border-border-weak-base pl-2.25 pb-px"
-                      size="large"
-                      icon="plus"
-                      onClick={connectProvider}
-                    >
-                      <Show when={layout.sidebar.opened()}>Connect provider</Show>
-                    </Button>
-                  </Tooltip>
+              <SortableProvider ids={layout.projects.list().map((p) => p.worktree)}>
+                <For each={layout.projects.list()}>
+                  {(project) => <SortableProject project={project} mobile={sidebarProps.mobile} />}
+                </For>
+              </SortableProvider>
+            </div>
+            <DragOverlay>
+              <ProjectDragOverlay />
+            </DragOverlay>
+          </DragDropProvider>
+        </div>
+        <div class="flex flex-col gap-1.5 self-stretch items-start shrink-0 px-2 py-3">
+          <Switch>
+            <Match when={!providers.paid().length && expanded()}>
+              <div class="rounded-md bg-background-stronger shadow-xs-border-base">
+                <div class="p-3 flex flex-col gap-2">
+                  <div class="text-12-medium text-text-strong">Getting started</div>
+                  <div class="text-text-base">OpenCode includes free models so you can start immediately.</div>
+                  <div class="text-text-base">Connect any provider to use models, inc. Claude, GPT, Gemini etc.</div>
                 </div>
-              </Match>
-              <Match when={true}>
-                <Tooltip placement="right" value="Connect provider" inactive={layout.sidebar.opened()}>
+                <Tooltip placement="right" value="Connect provider" inactive={expanded()}>
                   <Button
-                    class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
-                    variant="ghost"
+                    class="flex w-full text-left justify-start text-12-medium text-text-strong stroke-[1.5px] rounded-lg rounded-t-none shadow-none border-t border-border-weak-base pl-2.25 pb-px"
                     size="large"
                     icon="plus"
                     onClick={connectProvider}
                   >
-                    <Show when={layout.sidebar.opened()}>Connect provider</Show>
+                    Connect provider
                   </Button>
                 </Tooltip>
-              </Match>
-            </Switch>
-            <Show when={platform.openDirectoryPickerDialog}>
-              <Tooltip placement="right" value="Open project" inactive={layout.sidebar.opened()}>
+              </div>
+            </Match>
+            <Match when={true}>
+              <Tooltip placement="right" value="Connect provider" inactive={expanded()}>
                 <Button
                   class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
                   variant="ghost"
                   size="large"
-                  icon="folder-add-left"
-                  onClick={chooseProject}
+                  icon="plus"
+                  onClick={connectProvider}
                 >
-                  <Show when={layout.sidebar.opened()}>Open project</Show>
+                  <Show when={expanded()}>Connect provider</Show>
                 </Button>
               </Tooltip>
-            </Show>
-            {/* <Tooltip placement="right" value="Settings" inactive={layout.sidebar.opened()}> */}
-            {/*   <Button */}
-            {/*     disabled */}
-            {/*     class="flex w-full text-left justify-start text-12-medium text-text-base stroke-[1.5px] rounded-lg px-2" */}
-            {/*     variant="ghost" */}
-            {/*     size="large" */}
-            {/*     icon="settings-gear" */}
-            {/*   > */}
-            {/*     <Show when={layout.sidebar.opened()}>Settings</Show> */}
-            {/*   </Button> */}
-            {/* </Tooltip> */}
-            <Tooltip placement="right" value="Share feedback" inactive={layout.sidebar.opened()}>
+            </Match>
+          </Switch>
+          <Show when={platform.openDirectoryPickerDialog}>
+            <Tooltip
+              placement="right"
+              value={
+                <div class="flex items-center gap-2">
+                  <span>Open project</span>
+                  <Show when={!sidebarProps.mobile}>
+                    <span class="text-icon-base text-12-medium">{command.keybind("project.open")}</span>
+                  </Show>
+                </div>
+              }
+              inactive={expanded()}
+            >
               <Button
-                as={"a"}
-                href="https://opencode.ai/desktop-feedback"
-                target="_blank"
                 class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
                 variant="ghost"
                 size="large"
-                icon="bubble-5"
+                icon="folder-add-left"
+                onClick={chooseProject}
               >
-                <Show when={layout.sidebar.opened()}>Share feedback</Show>
+                <Show when={expanded()}>Open project</Show>
               </Button>
             </Tooltip>
+          </Show>
+          <Tooltip placement="right" value="Share feedback" inactive={expanded()}>
+            <Button
+              as={"a"}
+              href="https://opencode.ai/desktop-feedback"
+              target="_blank"
+              class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
+              variant="ghost"
+              size="large"
+              icon="bubble-5"
+            >
+              <Show when={expanded()}>Share feedback</Show>
+            </Button>
+          </Tooltip>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div class="relative flex-1 min-h-0 flex flex-col">
+      <Header
+        navigateToProject={navigateToProject}
+        navigateToSession={navigateToSession}
+        onMobileMenuToggle={mobileSidebar.toggle}
+      />
+      <div class="flex-1 min-h-0 flex">
+        <div
+          classList={{
+            "hidden xl:flex": true,
+            "relative @container w-12 pb-5 shrink-0 bg-background-base": true,
+            "flex-col gap-5.5 items-start self-stretch justify-between": true,
+            "border-r border-border-weak-base contain-strict": true,
+          }}
+          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
+        >
+          <Show when={layout.sidebar.opened()}>
+            <ResizeHandle
+              direction="horizontal"
+              size={layout.sidebar.width()}
+              min={150}
+              max={window.innerWidth * 0.3}
+              collapseThreshold={80}
+              onResize={layout.sidebar.resize}
+              onCollapse={layout.sidebar.close}
+            />
+          </Show>
+          <SidebarContent />
+        </div>
+        <div class="xl:hidden">
+          <div
+            classList={{
+              "fixed inset-0 bg-black/50 z-40 transition-opacity duration-200": true,
+              "opacity-100 pointer-events-auto": mobileSidebar.open(),
+              "opacity-0 pointer-events-none": !mobileSidebar.open(),
+            }}
+            onClick={(e) => {
+              if (e.target === e.currentTarget) mobileSidebar.hide()
+            }}
+          />
+          <div
+            classList={{
+              "@container fixed inset-y-0 left-0 z-50 w-72 bg-background-base border-r border-border-weak-base flex flex-col gap-5.5 items-start self-stretch justify-between pt-12 pb-5 transition-transform duration-200 ease-out": true,
+              "translate-x-0": mobileSidebar.open(),
+              "-translate-x-full": !mobileSidebar.open(),
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <SidebarContent mobile />
           </div>
         </div>
+
         <main class="size-full overflow-x-hidden flex flex-col items-start contain-strict">{props.children}</main>
       </div>
       <Toast.Region />

packages/app/src/pages/session.tsx

@@ -1,4 +1,18 @@
-import { For, onCleanup, onMount, Show, Match, Switch, createResource, createMemo, createEffect, on } from "solid-js"
+import {
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  Match,
+  Switch,
+  createResource,
+  createMemo,
+  createEffect,
+  on,
+  createRenderEffect,
+  batch,
+} from "solid-js"
+
 import { Dynamic } from "solid-js/web"
 import { useLocal, type LocalFile } from "@/context/local"
 import { createStore } from "solid-js/store"
@@ -9,11 +23,11 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
-import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { useCodeComponent } from "@opencode-ai/ui/context/code"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
+import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
 import { SessionReview } from "@opencode-ai/ui/session-review"
 import {
@@ -35,13 +49,17 @@ import { checksum } from "@opencode-ai/util/encode"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectFile } from "@/components/dialog-select-file"
 import { DialogSelectModel } from "@/components/dialog-select-model"
+import { DialogSelectMcp } from "@/components/dialog-select-mcp"
 import { useCommand } from "@/context/command"
 import { useNavigate, useParams } from "@solidjs/router"
-import { AssistantMessage, UserMessage } from "@opencode-ai/sdk/v2"
+import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSDK } from "@/context/sdk"
 import { usePrompt } from "@/context/prompt"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
+import { StatusBar } from "@/components/status-bar"
+import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
+import { SessionLspIndicator } from "@/components/session-lsp-indicator"
 
 export default function Page() {
   const layout = useLayout()
@@ -58,7 +76,6 @@ export default function Page() {
 
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const tabs = createMemo(() => layout.tabs(sessionKey()))
-
   const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
   const revertMessageID = createMemo(() => info()?.revert?.messageID)
   const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
@@ -67,7 +84,6 @@ export default function Page() {
       .filter((m) => m.role === "user")
       .sort((a, b) => a.id.localeCompare(b.id)),
   )
-  // Visible user messages excludes reverted messages (those >= revertMessageID)
   const visibleUserMessages = createMemo(() => {
     const revert = revertMessageID()
     if (!revert) return userMessages()
@@ -75,15 +91,24 @@ export default function Page() {
   })
   const lastUserMessage = createMemo(() => visibleUserMessages()?.at(-1))
 
-  const [messageStore, setMessageStore] = createStore<{ messageId?: string }>({})
+  const [store, setStore] = createStore({
+    clickTimer: undefined as number | undefined,
+    activeDraggable: undefined as string | undefined,
+    activeTerminalDraggable: undefined as string | undefined,
+    userInteracted: false,
+    stepsExpanded: true,
+    mobileStepsExpanded: {} as Record<string, boolean>,
+    messageId: undefined as string | undefined,
+  })
+
   const activeMessage = createMemo(() => {
-    if (!messageStore.messageId) return lastUserMessage()
+    if (!store.messageId) return lastUserMessage()
     // If the stored message is no longer visible (e.g., was reverted), fall back to last visible
-    const found = visibleUserMessages()?.find((m) => m.id === messageStore.messageId)
+    const found = visibleUserMessages()?.find((m) => m.id === store.messageId)
     return found ?? lastUserMessage()
   })
   const setActiveMessage = (message: UserMessage | undefined) => {
-    setMessageStore("messageId", message?.id)
+    setStore("messageId", message?.id)
   }
 
   function navigateMessageByOffset(offset: number) {
@@ -105,33 +130,8 @@ export default function Page() {
     setActiveMessage(msgs[targetIndex])
   }
 
-  const last = createMemo(
-    () => messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage,
-  )
-  const model = createMemo(() =>
-    last() ? sync.data.provider.all.find((x) => x.id === last().providerID)?.models[last().modelID] : undefined,
-  )
   const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
 
-  const tokens = createMemo(() => {
-    if (!last()) return
-    const t = last().tokens
-    return t.input + t.output + t.reasoning + t.cache.read + t.cache.write
-  })
-
-  const context = createMemo(() => {
-    const total = tokens()
-    const limit = model()?.limit.context
-    if (!total || !limit) return 0
-    return Math.round((total / limit) * 100)
-  })
-
-  const [store, setStore] = createStore({
-    clickTimer: undefined as number | undefined,
-    activeDraggable: undefined as string | undefined,
-    activeTerminalDraggable: undefined as string | undefined,
-    stepsExpanded: false,
-  })
   let inputRef!: HTMLDivElement
 
   createEffect(() => {
@@ -152,14 +152,35 @@ export default function Page() {
       () => visibleUserMessages().at(-1)?.id,
       (lastId, prevLastId) => {
         if (lastId && prevLastId && lastId > prevLastId) {
-          setMessageStore("messageId", undefined)
+          setStore("messageId", undefined)
         }
       },
       { defer: true },
     ),
   )
 
+  createEffect(() => {
+    params.id
+    const status = sync.data.session_status[params.id ?? ""] ?? { type: "idle" }
+    batch(() => {
+      setStore("userInteracted", false)
+      setStore("stepsExpanded", status.type !== "idle")
+    })
+  })
+
   const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? { type: "idle" })
+  const working = createMemo(() => status().type !== "idle" && activeMessage()?.id === lastUserMessage()?.id)
+
+  createRenderEffect((prev) => {
+    const isWorking = working()
+    if (!prev && isWorking) {
+      setStore("stepsExpanded", true)
+    }
+    if (prev && !isWorking && !store.userInteracted) {
+      setStore("stepsExpanded", false)
+    }
+    return isWorking
+  }, working())
 
   command.register(() => [
     {
@@ -204,6 +225,14 @@ export default function Page() {
       slash: "terminal",
       onSelect: () => layout.terminal.toggle(),
     },
+    {
+      id: "review.toggle",
+      title: "Toggle review",
+      description: "Show or hide the review panel",
+      category: "View",
+      keybind: "mod+shift+r",
+      onSelect: () => layout.review.toggle(),
+    },
     {
       id: "terminal.new",
       title: "New terminal",
@@ -249,6 +278,15 @@ export default function Page() {
       slash: "model",
       onSelect: () => dialog.show(() => <DialogSelectModel />),
     },
+    {
+      id: "mcp.toggle",
+      title: "Toggle MCPs",
+      description: "Toggle MCPs",
+      category: "MCP",
+      keybind: "mod+;",
+      slash: "mcp",
+      onSelect: () => dialog.show(() => <DialogSelectMcp />),
+    },
     {
       id: "agent.cycle",
       title: "Cycle agent",
@@ -327,11 +365,15 @@ export default function Page() {
   ])
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    if ((document.activeElement as HTMLElement)?.dataset?.component === "terminal") return
+    const activeElement = document.activeElement as HTMLElement | undefined
+    if (activeElement) {
+      const isProtected = activeElement.closest("[data-prevent-autofocus]")
+      const isInput = /^(INPUT|TEXTAREA|SELECT)$/.test(activeElement.tagName) || activeElement.isContentEditable
+      if (isProtected || isInput) return
+    }
     if (dialog.active) return
 
-    const focused = document.activeElement === inputRef
-    if (focused) {
+    if (activeElement === inputRef) {
       if (event.key === "Escape") inputRef?.blur()
       return
     }
@@ -512,278 +554,321 @@ export default function Page() {
     )
   }
 
-  const wide = createMemo(() => layout.review.state() === "tab" || !diffs().length)
+  const showTabs = createMemo(() => layout.review.opened() && (diffs().length > 0 || tabs().all().length > 0))
+
+  const mobileWorking = createMemo(() => status().type !== "idle")
+  const mobileAutoScroll = createAutoScroll({
+    working: mobileWorking,
+    onUserInteracted: () => setStore("userInteracted", true),
+  })
+
+  const MobileTurns = () => (
+    <div
+      ref={mobileAutoScroll.scrollRef}
+      onScroll={mobileAutoScroll.handleScroll}
+      onClick={mobileAutoScroll.handleInteraction}
+      class="relative mt-2 min-w-0 w-full h-full overflow-y-auto no-scrollbar pb-12"
+    >
+      <div ref={mobileAutoScroll.contentRef} class="flex flex-col gap-45 items-start justify-start mt-4">
+        <For each={visibleUserMessages()}>
+          {(message) => (
+            <SessionTurn
+              sessionID={params.id!}
+              messageID={message.id}
+              stepsExpanded={store.mobileStepsExpanded[message.id] ?? false}
+              onStepsExpandedToggle={() => setStore("mobileStepsExpanded", message.id, (x) => !x)}
+              onUserInteracted={() => setStore("userInteracted", true)}
+              classes={{
+                root: "min-w-0 w-full relative",
+                content:
+                  "flex flex-col justify-between !overflow-visible [&_[data-slot=session-turn-message-header]]:top-[-32px]",
+                container: "px-4",
+              }}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  )
+
+  const NewSessionView = () => (
+    <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto px-6">
+      <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>
+      <Show when={sync.project}>
+        {(project) => (
+          <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(project().time.updated ?? project().time.created).toRelative()}
+              </span>
+            </div>
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+
+  const DesktopSessionContent = () => (
+    <Switch>
+      <Match when={params.id}>
+        <div class="flex items-start justify-start h-full min-h-0">
+          <SessionMessageRail
+            messages={visibleUserMessages()}
+            current={activeMessage()}
+            onMessageSelect={setActiveMessage}
+            wide={!showTabs()}
+          />
+          <Show when={activeMessage()}>
+            <SessionTurn
+              sessionID={params.id!}
+              messageID={activeMessage()!.id}
+              stepsExpanded={store.stepsExpanded}
+              onStepsExpandedToggle={() => setStore("stepsExpanded", (x) => !x)}
+              onUserInteracted={() => setStore("userInteracted", true)}
+              classes={{
+                root: "pb-20 flex-1 min-w-0",
+                content: "pb-20",
+                container:
+                  "w-full " +
+                  (!showTabs() ? "max-w-200 mx-auto px-6" : visibleUserMessages().length > 1 ? "pr-6 pl-18" : "px-6"),
+              }}
+            />
+          </Show>
+        </div>
+      </Match>
+      <Match when={true}>
+        <NewSessionView />
+      </Match>
+    </Switch>
+  )
 
   return (
-    <div class="relative bg-background-base size-full overflow-x-hidden flex flex-col">
-      <div class="min-h-0 grow w-full">
-        <DragDropProvider
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-          onDragOver={handleDragOver}
-          collisionDetector={closestCenter}
-        >
-          <DragDropSensors />
-          <ConstrainDragYAxis />
-          <Tabs value={tabs().active() ?? "chat"} onChange={tabs().open}>
-            <div class="sticky top-0 shrink-0 flex">
-              <Tabs.List>
-                <Tabs.Trigger value="chat">
-                  <div class="flex gap-x-[17px] items-center">
-                    <div>Session</div>
-                    <Tooltip
-                      value={`${new Intl.NumberFormat("en-US", {
-                        notation: "compact",
-                        compactDisplay: "short",
-                      }).format(tokens() ?? 0)} Tokens`}
-                      class="flex items-center gap-1.5"
-                    >
-                      <ProgressCircle percentage={context() ?? 0} />
-                      <div class="text-14-regular text-text-weak text-left w-7">{context() ?? 0}%</div>
-                    </Tooltip>
-                  </div>
-                </Tabs.Trigger>
-                <Show when={layout.review.state() === "tab" && diffs().length}>
-                  <Tabs.Trigger
-                    value="review"
-                    closeButton={
-                      <Tooltip value="Close tab" placement="bottom">
-                        <IconButton icon="collapse" size="normal" variant="ghost" onClick={layout.review.pane} />
-                      </Tooltip>
-                    }
-                  >
-                    <div class="flex items-center gap-3">
-                      <Show when={diffs()}>
-                        <DiffChanges changes={diffs()} variant="bars" />
-                      </Show>
-                      <div class="flex items-center gap-1.5">
-                        <div>Review</div>
-                        <Show when={info()?.summary?.files}>
-                          <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
-                            {info()?.summary?.files ?? 0}
-                          </div>
-                        </Show>
-                      </div>
-                    </div>
-                  </Tabs.Trigger>
-                </Show>
-                <SortableProvider ids={tabs().all() ?? []}>
-                  <For each={tabs().all() ?? []}>
-                    {(tab) => <SortableTab tab={tab} onTabClick={handleTabClick} onTabClose={tabs().close} />}
-                  </For>
-                </SortableProvider>
-                <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
-                  <Tooltip value="Open file" class="flex items-center">
-                    <IconButton
-                      icon="plus-small"
-                      variant="ghost"
-                      iconSize="large"
-                      onClick={() => dialog.show(() => <DialogSelectFile />)}
-                    />
-                  </Tooltip>
-                </div>
-              </Tabs.List>
+    <div class="relative bg-background-base size-full overflow-hidden flex flex-col">
+      <div class="md:hidden flex-1 min-h-0 flex flex-col bg-background-stronger">
+        <Switch>
+          <Match when={!params.id}>
+            <div class="flex-1 min-h-0 overflow-hidden">
+              <NewSessionView />
             </div>
-            <Tabs.Content
-              value="chat"
-              class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden contain-strict"
-            >
-              <div
-                classList={{
-                  "w-full flex-1 min-h-0": true,
-                  grid: layout.review.state() === "tab",
-                  flex: layout.review.state() === "pane",
-                }}
-              >
-                <div
-                  classList={{
-                    "relative shrink-0 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full": true,
-                    "max-w-200 mx-auto": !wide(),
-                  }}
-                >
-                  <Switch>
-                    <Match when={params.id}>
-                      <div class="flex items-start justify-start h-full min-h-0">
-                        <SessionMessageRail
-                          messages={visibleUserMessages()}
-                          current={activeMessage()}
-                          onMessageSelect={setActiveMessage}
-                          wide={wide()}
-                        />
-                        <Show when={activeMessage()}>
-                          <SessionTurn
-                            sessionID={params.id!}
-                            messageID={activeMessage()!.id}
-                            stepsExpanded={store.stepsExpanded}
-                            onStepsExpandedChange={(expanded) => setStore("stepsExpanded", expanded)}
-                            classes={{
-                              root: "pb-20 flex-1 min-w-0",
-                              content: "pb-20",
-                              container:
-                                "w-full " +
-                                (wide()
-                                  ? "max-w-200 mx-auto px-6"
-                                  : visibleUserMessages().length > 1
-                                    ? "pr-6 pl-18"
-                                    : "px-6"),
-                            }}
-                          />
-                        </Show>
-                      </div>
-                    </Match>
-                    <Match when={true}>
-                      <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto px-6">
-                        <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>
-                        <Show when={sync.project}>
-                          {(project) => (
-                            <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(project().time.updated ?? project().time.created).toRelative()}
-                                </span>
-                              </div>
-                            </div>
-                          )}
-                        </Show>
-                      </div>
-                    </Match>
-                  </Switch>
-                  <div class="absolute inset-x-0 bottom-8 flex flex-col justify-center items-center z-50">
-                    <div class="w-full max-w-200 px-6">
-                      <PromptInput
-                        ref={(el) => {
-                          inputRef = el
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-                <Show when={layout.review.state() === "pane" && diffs().length}>
-                  <div
-                    classList={{
-                      "relative grow pt-3 flex-1 min-h-0 border-l border-border-weak-base contain-strict": true,
-                    }}
-                  >
-                    <SessionReview
-                      classes={{
-                        root: "pb-20",
-                        header: "px-6",
-                        container: "px-6",
-                      }}
-                      diffs={diffs()}
-                      actions={
-                        <Tooltip value="Open in tab">
-                          <IconButton
-                            icon="expand"
-                            variant="ghost"
-                            onClick={() => {
-                              layout.review.tab()
-                              tabs().setActive("review")
-                            }}
-                          />
-                        </Tooltip>
-                      }
-                    />
-                  </div>
-                </Show>
-              </div>
-            </Tabs.Content>
-            <Show when={layout.review.state() === "tab" && diffs().length}>
-              <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden contain-strict">
-                <div
-                  classList={{
-                    "relative pt-3 flex-1 min-h-0 overflow-hidden": true,
-                  }}
-                >
+          </Match>
+          <Match when={diffs().length > 0}>
+            <Tabs class="flex-1 min-h-0 flex flex-col pb-28">
+              <Tabs.List>
+                <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}>
+                  Session
+                </Tabs.Trigger>
+                <Tabs.Trigger value="review" class="w-1/2 !border-r-0" classes={{ button: "w-full" }}>
+                  {diffs().length} Files Changed
+                </Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="session" class="flex-1 !overflow-hidden">
+                <MobileTurns />
+              </Tabs.Content>
+              <Tabs.Content forceMount value="review" class="flex-1 !overflow-hidden hidden data-[selected]:block">
+                <div class="relative h-full mt-6 overflow-y-auto no-scrollbar">
                   <SessionReview
-                    classes={{
-                      root: "pb-40",
-                      header: "px-6",
-                      container: "px-6",
-                    }}
                     diffs={diffs()}
-                    split
+                    classes={{
+                      root: "pb-32",
+                      header: "px-4",
+                      container: "px-4",
+                    }}
                   />
                 </div>
               </Tabs.Content>
-            </Show>
-            <For each={tabs().all()}>
-              {(tab) => {
-                const [file] = createResource(
-                  () => tab,
-                  async (tab) => {
-                    if (tab.startsWith("file://")) {
-                      return local.file.node(tab.replace("file://", ""))
-                    }
-                    return undefined
-                  },
-                )
-                return (
-                  <Tabs.Content value={tab} class="select-text mt-3">
-                    <Switch>
-                      <Match when={file()}>
-                        {(f) => (
-                          <Dynamic
-                            component={codeComponent}
-                            file={{
-                              name: f().path,
-                              contents: f().content?.content ?? "",
-                              cacheKey: checksum(f().content?.content ?? ""),
-                            }}
-                            overflow="scroll"
-                            class="pb-40"
-                          />
-                        )}
-                      </Match>
-                    </Switch>
-                  </Tabs.Content>
-                )
-              }}
-            </For>
-          </Tabs>
-          <DragOverlay>
-            <Show when={store.activeDraggable}>
-              {(draggedFile) => {
-                const [file] = createResource(
-                  () => draggedFile(),
-                  async (tab) => {
-                    if (tab.startsWith("file://")) {
-                      return local.file.node(tab.replace("file://", ""))
-                    }
-                    return undefined
-                  },
-                )
-                return (
-                  <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
-                    <Show when={file()}>{(f) => <FileVisual active file={f()} />}</Show>
-                  </div>
-                )
-              }}
-            </Show>
-          </DragOverlay>
-        </DragDropProvider>
-        <Show when={tabs().active()}>
-          <div class="absolute inset-x-0 px-6 max-w-200 flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+            </Tabs>
+          </Match>
+          <Match when={true}>
+            <div class="flex-1 min-h-0 overflow-hidden">
+              <MobileTurns />
+            </div>
+          </Match>
+        </Switch>
+        <div class="absolute inset-x-0 bottom-4 flex flex-col justify-center items-center z-50 px-4">
+          <div class="w-full">
             <PromptInput
               ref={(el) => {
                 inputRef = el
               }}
             />
           </div>
+        </div>
+      </div>
+
+      <div class="hidden md:flex min-h-0 grow w-full">
+        <div
+          class="@container relative shrink-0 py-3 flex flex-col gap-6 min-h-0 h-full bg-background-stronger"
+          style={{ width: showTabs() ? `${layout.session.width()}px` : "100%" }}
+        >
+          <div class="flex-1 min-h-0 overflow-hidden">
+            <DesktopSessionContent />
+          </div>
+          <div class="absolute inset-x-0 bottom-8 flex flex-col justify-center items-center z-50">
+            <div
+              classList={{
+                "w-full px-6": true,
+                "max-w-200": !showTabs(),
+              }}
+            >
+              <PromptInput
+                ref={(el) => {
+                  inputRef = el
+                }}
+              />
+            </div>
+          </div>
+          <Show when={showTabs()}>
+            <ResizeHandle
+              direction="horizontal"
+              size={layout.session.width()}
+              min={450}
+              max={window.innerWidth * 0.45}
+              onResize={layout.session.resize}
+            />
+          </Show>
+        </div>
+
+        <Show when={showTabs()}>
+          <div class="relative flex-1 min-w-0 h-full border-l border-border-weak-base">
+            <DragDropProvider
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDragOver={handleDragOver}
+              collisionDetector={closestCenter}
+            >
+              <DragDropSensors />
+              <ConstrainDragYAxis />
+              <Tabs value={tabs().active() ?? "review"} onChange={tabs().open}>
+                <div class="sticky top-0 shrink-0 flex">
+                  <Tabs.List>
+                    <Show when={diffs().length}>
+                      <Tabs.Trigger value="review">
+                        <div class="flex items-center gap-3">
+                          <Show when={diffs()}>
+                            <DiffChanges changes={diffs()} variant="bars" />
+                          </Show>
+                          <div class="flex items-center gap-1.5">
+                            <div>Review</div>
+                            <Show when={info()?.summary?.files}>
+                              <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                                {info()?.summary?.files ?? 0}
+                              </div>
+                            </Show>
+                          </div>
+                        </div>
+                      </Tabs.Trigger>
+                    </Show>
+                    <SortableProvider ids={tabs().all() ?? []}>
+                      <For each={tabs().all() ?? []}>
+                        {(tab) => <SortableTab tab={tab} onTabClick={handleTabClick} onTabClose={tabs().close} />}
+                      </For>
+                    </SortableProvider>
+                    <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
+                      <Tooltip
+                        value={
+                          <div class="flex items-center gap-2">
+                            <span>Open file</span>
+                            <span class="text-icon-base text-12-medium">{command.keybind("file.open")}</span>
+                          </div>
+                        }
+                        class="flex items-center"
+                      >
+                        <IconButton
+                          icon="plus-small"
+                          variant="ghost"
+                          iconSize="large"
+                          onClick={() => dialog.show(() => <DialogSelectFile />)}
+                        />
+                      </Tooltip>
+                    </div>
+                  </Tabs.List>
+                </div>
+                <Show when={diffs().length}>
+                  <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden contain-strict">
+                    <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
+                      <SessionReview
+                        classes={{
+                          root: "pb-40",
+                          header: "px-6",
+                          container: "px-6",
+                        }}
+                        diffs={diffs()}
+                        split
+                      />
+                    </div>
+                  </Tabs.Content>
+                </Show>
+                <For each={tabs().all()}>
+                  {(tab) => {
+                    const [file] = createResource(
+                      () => tab,
+                      async (tab) => {
+                        if (tab.startsWith("file://")) {
+                          return local.file.node(tab.replace("file://", ""))
+                        }
+                        return undefined
+                      },
+                    )
+                    return (
+                      <Tabs.Content value={tab} class="select-text mt-3">
+                        <Switch>
+                          <Match when={file()}>
+                            {(f) => (
+                              <Dynamic
+                                component={codeComponent}
+                                file={{
+                                  name: f().path,
+                                  contents: f().content?.content ?? "",
+                                  cacheKey: checksum(f().content?.content ?? ""),
+                                }}
+                                overflow="scroll"
+                                class="pb-40"
+                              />
+                            )}
+                          </Match>
+                        </Switch>
+                      </Tabs.Content>
+                    )
+                  }}
+                </For>
+              </Tabs>
+              <DragOverlay>
+                <Show when={store.activeDraggable}>
+                  {(draggedFile) => {
+                    const [file] = createResource(
+                      () => draggedFile(),
+                      async (tab) => {
+                        if (tab.startsWith("file://")) {
+                          return local.file.node(tab.replace("file://", ""))
+                        }
+                        return undefined
+                      },
+                    )
+                    return (
+                      <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
+                        <Show when={file()}>{(f) => <FileVisual active file={f()} />}</Show>
+                      </div>
+                    )
+                  }}
+                </Show>
+              </DragOverlay>
+            </DragDropProvider>
+          </div>
         </Show>
       </div>
+
       <Show when={layout.terminal.opened()}>
         <div
-          class="relative w-full flex flex-col shrink-0 border-t border-border-weak-base"
+          class="hidden md:flex relative w-full flex-col shrink-0 border-t border-border-weak-base"
           style={{ height: `${layout.terminal.height()}px` }}
         >
           <ResizeHandle
@@ -809,7 +894,15 @@ export default function Page() {
                   <For each={terminal.all()}>{(pty) => <SortableTerminalTab terminal={pty} />}</For>
                 </SortableProvider>
                 <div class="h-full flex items-center justify-center">
-                  <Tooltip value="New Terminal" class="flex items-center">
+                  <Tooltip
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>New terminal</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.new")}</span>
+                      </div>
+                    }
+                    class="flex items-center"
+                  >
                     <IconButton icon="plus-small" variant="ghost" iconSize="large" onClick={terminal.new} />
                   </Tooltip>
                 </div>
@@ -841,6 +934,10 @@ export default function Page() {
           </DragDropProvider>
         </div>
       </Show>
+      <StatusBar>
+        <SessionLspIndicator />
+        <SessionMcpIndicator />
+      </StatusBar>
     </div>
   )
 }

packages/app/src/utils/id.ts

@@ -0,0 +1,99 @@
+import z from "zod"
+
+const prefixes = {
+  session: "ses",
+  message: "msg",
+  permission: "per",
+  user: "usr",
+  part: "prt",
+  pty: "pty",
+} as const
+
+const LENGTH = 26
+let lastTimestamp = 0
+let counter = 0
+
+type Prefix = keyof typeof prefixes
+export namespace Identifier {
+  export function schema(prefix: Prefix) {
+    return z.string().startsWith(prefixes[prefix])
+  }
+
+  export function ascending(prefix: Prefix, given?: string) {
+    return generateID(prefix, false, given)
+  }
+
+  export function descending(prefix: Prefix, given?: string) {
+    return generateID(prefix, true, given)
+  }
+}
+
+function generateID(prefix: Prefix, descending: boolean, given?: string): string {
+  if (!given) {
+    return create(prefix, descending)
+  }
+
+  if (!given.startsWith(prefixes[prefix])) {
+    throw new Error(`ID ${given} does not start with ${prefixes[prefix]}`)
+  }
+
+  return given
+}
+
+function create(prefix: Prefix, descending: boolean, timestamp?: number): string {
+  const currentTimestamp = timestamp ?? Date.now()
+
+  if (currentTimestamp !== lastTimestamp) {
+    lastTimestamp = currentTimestamp
+    counter = 0
+  }
+
+  counter += 1
+
+  let now = BigInt(currentTimestamp) * BigInt(0x1000) + BigInt(counter)
+
+  if (descending) {
+    now = ~now
+  }
+
+  const timeBytes = new Uint8Array(6)
+  for (let i = 0; i < 6; i += 1) {
+    timeBytes[i] = Number((now >> BigInt(40 - 8 * i)) & BigInt(0xff))
+  }
+
+  return prefixes[prefix] + "_" + bytesToHex(timeBytes) + randomBase62(LENGTH - 12)
+}
+
+function bytesToHex(bytes: Uint8Array): string {
+  let hex = ""
+  for (let i = 0; i < bytes.length; i += 1) {
+    hex += bytes[i].toString(16).padStart(2, "0")
+  }
+  return hex
+}
+
+function randomBase62(length: number): string {
+  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+  const bytes = getRandomBytes(length)
+  let result = ""
+  for (let i = 0; i < length; i += 1) {
+    result += chars[bytes[i] % 62]
+  }
+  return result
+}
+
+function getRandomBytes(length: number): Uint8Array {
+  const bytes = new Uint8Array(length)
+  const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : undefined
+
+  if (cryptoObj && typeof cryptoObj.getRandomValues === "function") {
+    cryptoObj.getRandomValues(bytes)
+    return bytes
+  }
+
+  for (let i = 0; i < length; i += 1) {
+    bytes[i] = Math.floor(Math.random() * 256)
+  }
+
+  return bytes
+}

packages/app/tsconfig.json

@@ -1,5 +1,7 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
+    "composite": true,
     "target": "ESNext",
     "module": "ESNext",
     "skipLibCheck": true,
@@ -9,12 +11,16 @@
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "allowJs": true,
+    "resolveJsonModule": true,
     "strict": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "node_modules/.ts-dist",
     "isolatedModules": true,
-    "noEmit": true,
-    "emitDeclarationOnly": false,
-    "outDir": "node_modules/.ts-dist"
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "references": [{ "path": "../desktop" }],
-  "include": ["src"]
+  "include": ["src", "package.json"],
+  "exclude": ["dist", "ts-dist"]
 }

packages/app/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite"
+import desktopPlugin from "./vite"
+
+export default defineConfig({
+  plugins: [desktopPlugin] as any,
+  server: {
+    host: "0.0.0.0",
+    allowedHosts: true,
+    port: 3000,
+  },
+  build: {
+    target: "esnext",
+    sourcemap: true,
+  },
+})

packages/console/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.0.167",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

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

@@ -202,6 +202,14 @@ export function IconZai(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   )
 }
 
+export function IconMiniMax(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z" />
+    </svg>
+  )
+}
+
 export function IconGemini(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
     <svg {...props} viewBox="0 0 50 50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

packages/console/app/src/config.ts

@@ -9,8 +9,8 @@ export const config = {
   github: {
     repoUrl: "https://github.com/sst/opencode",
     starsFormatted: {
-      compact: "38K",
-      full: "38,000",
+      compact: "41K",
+      full: "41,000",
     },
   },
 
@@ -22,8 +22,8 @@ export const config = {
 
   // Static stats (used on landing page)
   stats: {
-    contributors: "400",
-    commits: "5,000",
+    contributors: "450",
+    commits: "6,000",
     monthlyUsers: "400,000",
   },
 } as const

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

@@ -5,28 +5,36 @@ import { useAuthSession } from "~/context/auth.session"
 
 export async function GET(input: APIEvent) {
   const url = new URL(input.request.url)
-  const code = url.searchParams.get("code")
-  if (!code) throw new Error("No code found")
-  const result = await AuthClient.exchange(code, `${url.origin}${url.pathname}`)
-  if (result.err) {
-    throw new Error(result.err.message)
-  }
-  const decoded = AuthClient.decode(result.tokens.access, {} as any)
-  if (decoded.err) throw new Error(decoded.err.message)
-  const session = await useAuthSession()
-  const id = decoded.subject.properties.accountID
-  await session.update((value) => {
-    return {
-      ...value,
-      account: {
-        ...value.account,
-        [id]: {
-          id,
-          email: decoded.subject.properties.email,
+  try {
+    const code = url.searchParams.get("code")
+    if (!code) throw new Error("No code found")
+    const result = await AuthClient.exchange(code, `${url.origin}${url.pathname}`)
+    if (result.err) throw new Error(result.err.message)
+    const decoded = AuthClient.decode(result.tokens.access, {} as any)
+    if (decoded.err) throw new Error(decoded.err.message)
+    const session = await useAuthSession()
+    const id = decoded.subject.properties.accountID
+    await session.update((value) => {
+      return {
+        ...value,
+        account: {
+          ...value.account,
+          [id]: {
+            id,
+            email: decoded.subject.properties.email,
+          },
         },
-      },
-      current: id,
-    }
-  })
-  return redirect("/auth")
+        current: id,
+      }
+    })
+    return redirect("/auth")
+  } catch (e: any) {
+    return new Response(
+      JSON.stringify({
+        error: e.message,
+        cause: Object.fromEntries(url.searchParams.entries()),
+      }),
+      { status: 500 },
+    )
+  }
 }