refactor: use Bun.sleep instead of Promise setTimeout (#6620)

Co-authored-by: Github Action <action@github.com>
Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

.github/workflows/auto-label-tui.yml

@@ -1,63 +0,0 @@
-name: Auto-label TUI Issues
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  auto-label:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    permissions:
-      contents: read
-      issues: write
-    steps:
-      - name: Auto-label and assign issues
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const issue = context.payload.issue;
-            const title = issue.title;
-            const description = issue.body || '';
-
-            // Check for "opencode web" keyword
-            const webPattern = /(opencode web)/i;
-            const isWebRelated = webPattern.test(title) || webPattern.test(description);
-
-            // Check for version patterns like v1.0.x or 1.0.x
-            const versionPattern = /[v]?1\.0\./i;
-            const isVersionRelated = versionPattern.test(title) || versionPattern.test(description);
-
-            // Check for "nix" keyword
-            const nixPattern = /\bnix\b/i;
-            const isNixRelated = nixPattern.test(title) || nixPattern.test(description);
-
-            const labels = [];
-
-            if (isWebRelated) {
-              labels.push('web');
-              
-              // Assign to adamdotdevin
-              await github.rest.issues.addAssignees({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: issue.number,
-                assignees: ['adamdotdevin']
-              });
-            } else if (isVersionRelated) {
-              // Only add opentui if NOT web-related
-              labels.push('opentui');
-            }
-
-            if (isNixRelated) {
-              labels.push('nix');
-            }
-
-            if (labels.length > 0) {
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: issue.number,
-                labels: labels
-              });
-            }

.github/workflows/docs-update.yml

@@ -0,0 +1,72 @@
+name: Docs Update
+
+on:
+  schedule:
+    - cron: "0 */12 * * *"
+  workflow_dispatch:
+
+env:
+  LOOKBACK_HOURS: 4
+
+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="${{ env.LOOKBACK_HOURS }} hours ago" --pretty=format:"- %h %s" 2>/dev/null || echo "")
+          if [ -z "$COMMITS" ]; then
+            echo "No commits in the last ${{ env.LOOKBACK_HOURS }} 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 ${{ env.LOOKBACK_HOURS }} 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/duplicate-issues.yml

@@ -16,6 +16,8 @@ jobs:
         with:
           fetch-depth: 1
 
+      - uses: ./.github/actions/setup-bun
+
       - name: Install opencode
         run: curl -fsSL https://opencode.ai/install | bash
 

.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/notify-discord.yml

@@ -2,7 +2,7 @@ name: discord
 
 on:
   release:
-    types: [published] # fires only when a release is published
+    types: [released] # fires when a draft release is published
 
 jobs:
   notify:

.github/workflows/opencode.yml

@@ -31,4 +31,4 @@ jobs:
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
           OPENCODE_PERMISSION: '{"bash": "deny"}'
         with:
-          model: opencode/claude-haiku-4-5
+          model: opencode/claude-opus-4-5

.github/workflows/publish.yml

@@ -21,7 +21,7 @@ on:
         required: false
         type: string
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
+concurrency: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.version || inputs.bump }}
 
 permissions:
   id-token: write
@@ -31,7 +31,7 @@ permissions:
 jobs:
   publish:
     runs-on: blacksmith-4vcpu-ubuntu-2404
-    if: github.repository == 'sst/opencode' && github.ref == 'refs/heads/dev'
+    if: github.repository == 'sst/opencode'
     steps:
       - uses: actions/checkout@v3
         with:
@@ -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
@@ -64,14 +52,26 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
       - uses: actions/setup-node@v4
         with:
           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 }}
@@ -79,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
@@ -98,11 +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.tag }}
 
       - uses: apple-actions/import-codesign-certs@v2
         if: ${{ runner.os == 'macOS' }}
@@ -141,29 +151,33 @@ 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 }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
 
       # Fixes AppImage build issues, can be removed when https://github.com/tauri-apps/tauri/pull/12491 is released
-      - run: cargo install tauri-cli --git https://github.com/tauri-apps/tauri --branch feat/truly-portable-appimage
+      - name: Install tauri-cli from portable appimage branch
         if: contains(matrix.settings.host, 'ubuntu')
+        run: |
+          cargo install tauri-cli --git https://github.com/tauri-apps/tauri --branch feat/truly-portable-appimage --force
+          echo "Installed tauri-cli version:"
+          cargo tauri --version
 
       - name: Build and upload artifacts
+        timeout-minutes: 20
         uses: tauri-apps/tauri-action@390cbe447412ced1303d35abe75287949e43437a
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -177,11 +191,43 @@ 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 }}
+          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
+
+  publish-release:
+    needs:
+      - publish
+      - publish-tauri
+    if: needs.publish.outputs.tag
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ needs.publish.outputs.tag }}
+
+      - 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:
+          OPENCODE_VERSION: ${{ needs.publish.outputs.version  }}
+          AUR_KEY: ${{ secrets.AUR_KEY }}
+          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}

.github/workflows/release-github-action.yml

@@ -0,0 +1,29 @@
+name: release-github-action
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - "github/**"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - run: git fetch --force --tags
+
+      - name: Release
+        run: |
+          git config --global user.email "opencode@sst.dev"
+          git config --global user.name "opencode"
+          ./github/script/release

.github/workflows/review.yml

@@ -29,6 +29,8 @@ jobs:
         with:
           fetch-depth: 1
 
+      - uses: ./.github/actions/setup-bun
+
       - name: Install opencode
         run: curl -fsSL https://opencode.ai/install | bash
 
@@ -62,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,33 @@
+name: "Auto-close stale issues"
+
+on:
+  schedule:
+    - cron: "30 1 * * *" # Daily at 1:30 AM
+  workflow_dispatch:
+
+env:
+  DAYS_BEFORE_STALE: 90
+  DAYS_BEFORE_CLOSE: 7
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/stale@v10
+        with:
+          days-before-stale: ${{ env.DAYS_BEFORE_STALE }}
+          days-before-close: ${{ env.DAYS_BEFORE_CLOSE }}
+          stale-issue-label: "stale"
+          close-issue-message: |
+            [automated] Closing due to ${{ env.DAYS_BEFORE_STALE }}+ days of inactivity.
+
+            Feel free to reopen if you still need this!
+          stale-issue-message: |
+            [automated] This issue has had no activity for ${{ env.DAYS_BEFORE_STALE }} days.
+
+            It will be closed in ${{ env.DAYS_BEFORE_CLOSE }} 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,5 @@ 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 }}
+          ZED_PR_PAT: ${{ secrets.ZED_PR_PAT }}

.github/workflows/test.yml

@@ -2,11 +2,9 @@ name: test
 
 on:
   push:
-    branches-ignore:
-      - production
+    branches:
+      - dev
   pull_request:
-    branches-ignore:
-      - production
   workflow_dispatch:
 jobs:
   test:

.github/workflows/triage.yml

@@ -0,0 +1,37 @@
+name: Issue Triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  triage:
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    permissions:
+      contents: read
+      issues: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup Bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Install opencode
+        run: curl -fsSL https://opencode.ai/install | bash
+
+      - name: Triage issue
+        env:
+          OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_NUMBER: ${{ github.event.issue.number }}
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+          ISSUE_BODY: ${{ github.event.issue.body }}
+        run: |
+          opencode run --agent triage "The following issue was just opened, triage it:
+
+          Title: $ISSUE_TITLE
+
+          $ISSUE_BODY"

.gitignore

@@ -19,3 +19,8 @@ Session.vim
 opencode.json
 a.out
 target
+.scripts
+
+# Local dev files
+opencode-dev
+logs/

.opencode/agent/docs.md

@@ -1,11 +1,14 @@
 ---
 description: ALWAYS use this when writing docs
+color: "#38A3EE"
 ---
 
 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/git-committer.md

@@ -1,10 +0,0 @@
----
-description: Use this agent when you are asked to commit and push code changes to a git repository.
-mode: subagent
----
-
-You commit and push to git
-
-Commit messages should be brief since they are used to generate release notes.
-
-Messages should say WHY the change was made and not WHAT was changed.

.opencode/agent/triage.md

@@ -0,0 +1,78 @@
+---
+mode: primary
+hidden: true
+model: opencode/claude-haiku-4-5
+color: "#44BA81"
+tools:
+  "*": false
+  "github-triage": true
+---
+
+You are a triage agent responsible for triaging github issues.
+
+Use your github-triage tool to triage issues.
+
+## Labels
+
+### windows
+
+Use for any issue that mentions Windows (the OS). Be sure they are saying that they are on Windows.
+
+- Use if they mention WSL too
+
+#### perf
+
+Performance-related issues:
+
+- Slow performance
+- High RAM usage
+- High CPU usage
+
+**Only** add if it's likely a RAM or CPU issue. **Do not** add for LLM slowness.
+
+#### desktop
+
+Desktop app issues:
+
+- `opencode web` command
+- The desktop app itself
+
+**Only** add if it's specifically about the Desktop application or `opencode web` view. **Do not** add for terminal, TUI, or general opencode issues.
+
+#### nix
+
+**Only** add if the issue explicitly mentions nix.
+
+#### zen
+
+**Only** add if the issue mentions "zen" or "opencode zen". Zen is our gateway for coding models. **Do not** add for other gateways or inference providers.
+
+If the issue doesn't have "zen" in it then don't add zen label
+
+#### docs
+
+Add if the issue requests better documentation or docs updates.
+
+#### opentui
+
+TUI issues potentially caused by our underlying TUI library:
+
+- Keybindings not working
+- Scroll speed issues (too fast/slow/laggy)
+- Screen flickering
+- Crashes with opentui in the log
+
+**Do not** add for general TUI bugs.
+
+When assigning to people here are the following rules:
+
+adamdotdev:
+ONLY assign adam if the issue will have the "desktop" label.
+
+fwang:
+ONLY assign fwang if the issue will have the "zen" label.
+
+jayair:
+ONLY assign jayair if the issue will have the "docs" label.
+
+In all other cases use best judgment. Avoid assigning to kommander needlessly, when in doubt assign to rekram1-node.

.opencode/command/commit.md

@@ -1,6 +1,7 @@
 ---
 description: git commit and push
 model: opencode/glm-4.6
+subtask: true
 ---
 
 commit and push

.opencode/env.d.ts

@@ -0,0 +1,4 @@
+declare module "*.txt" {
+  const content: string
+  export default content
+}

.opencode/opencode.jsonc

@@ -10,4 +10,18 @@
       "options": {},
     },
   },
+  "permission": {
+    "bash": {
+      "ls foo": "ask",
+    },
+  },
+  "mcp": {
+    "context7": {
+      "type": "remote",
+      "url": "https://mcp.context7.com/mcp",
+    },
+  },
+  "tools": {
+    "github-triage": false,
+  },
 }

.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

@@ -0,0 +1,90 @@
+/// <reference path="../env.d.ts" />
+// import { Octokit } from "@octokit/rest"
+import { tool } from "@opencode-ai/plugin"
+import DESCRIPTION from "./github-triage.txt"
+
+function getIssueNumber(): number {
+  const issue = parseInt(process.env.ISSUE_NUMBER ?? "", 10)
+  if (!issue) throw new Error("ISSUE_NUMBER env var not set")
+  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: {
+    assignee: tool.schema
+      .enum(["thdxr", "adamdotdevin", "rekram1-node", "fwang", "jayair", "kommander"])
+      .describe("The username of the assignee")
+      .default("rekram1-node"),
+    labels: tool.schema
+      .array(tool.schema.enum(["nix", "opentui", "perf", "desktop", "zen", "docs", "windows"]))
+      .describe("The labels(s) to add to the issue")
+      .default([]),
+  },
+  async execute(args) {
+    const issue = getIssueNumber()
+    // const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN })
+    const owner = "sst"
+    const repo = "opencode"
+
+    const results: string[] = []
+
+    if (args.assignee === "adamdotdevin" && !args.labels.includes("desktop")) {
+      throw new Error("Only desktop issues should be assigned to adamdotdevin")
+    }
+
+    if (args.assignee === "fwang" && !args.labels.includes("zen")) {
+      throw new Error("Only zen issues should be assigned to fwang")
+    }
+
+    if (args.assignee === "kommander" && !args.labels.includes("opentui")) {
+      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 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 githubFetch(`/repos/${owner}/${repo}/issues/${issue}/labels`, {
+        method: "POST",
+        body: JSON.stringify({ labels }),
+      })
+      results.push(`Added labels: ${args.labels.join(", ")}`)
+    }
+
+    return results.join("\n")
+  },
+})

.opencode/tool/github-triage.txt

@@ -0,0 +1,88 @@
+Use this tool to assign and/or label a Github issue.
+
+You can assign the following users:
+- thdxr
+- adamdotdevin
+- fwang
+- jayair
+- kommander
+- rekram1-node
+
+
+You can use the following labels:
+- nix
+- opentui
+- perf
+- web
+- zen
+- docs
+
+Always try to assign an issue, if in doubt, assign rekram1-node to it.
+
+## Breakdown of responsibilities:
+
+### thdxr
+
+Dax is responsible for managing core parts of the application, for large feature requests, api changes, or things that require significant changes to the codebase assign him.
+
+This relates to OpenCode server primarily but has overlap with just about anything
+
+### adamdotdevin
+
+Adam is responsible for managing the Desktop/Web app. If there is an issue relating to the desktop app or `opencode web` command. Assign him.
+
+
+### fwang
+
+Frank is responsible for managing Zen, if you see complaints about OpenCode Zen, maybe it's the dashboard, the model quality, billing issues, etc. Assign him to the issue.
+
+### jayair
+
+Jay is responsible for documentation. If there is an issue relating to documentation assign him.
+
+### kommander
+
+Sebastian is responsible for managing an OpenTUI (a library for building terminal user interfaces). OpenCode's TUI is built with OpenTUI. If there are issues about:
+- random characters on screen
+- keybinds not working on different terminals
+- general terminal stuff
+Then assign the issue to Him.
+
+### rekram1-node
+
+ALL BUGS SHOULD BE assigned to rekram1-node unless they have the `opentui` label.
+
+Assign Aiden to an issue as a catch all, if you can't assign anyone else. Most of the time this will be bugs/polish things.
+If no one else makes sense to assign, assign rekram1-node to it.
+
+Always assign to aiden if the issue mentions "acp", "zed", or model performance issues
+
+## Breakdown of Labels:
+
+### nix
+
+Any issue that mentions nix, or nixos should have a nix label
+
+### opentui
+
+Anything relating to the TUI itself should have an opentui label
+
+### perf
+
+Anything related to slow performance, high ram, high cpu usage, or any other performance related issue should have a perf label
+
+### desktop
+
+Anything related to `opencode web` command or the desktop app should have a desktop label. Never add this label for anything terminal/tui related
+
+### zen
+
+Anything related to OpenCode Zen, billing, or model quality from Zen should have a zen label
+
+### docs
+
+Anything related to the documentation should have a docs label
+
+### windows
+
+Use for any issue that involves the windows OS

AGENTS.md

@@ -1,34 +1,4 @@
-## Debugging
-
 - To test opencode in the `packages/opencode` directory you can run `bun dev`
-
-## Tool Calling
-
-- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat 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"
-}
-}
-]
-}
-}
+- To regenerate the javascript SDK, run ./packages/sdk/js/script/build.ts
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.
+- the default branch in this repo is `dev`

CONTRIBUTING.md

@@ -34,13 +34,43 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
   bun dev
   ```
 
+### Running against a different directory
+
+By default, `bun dev` runs OpenCode in the `packages/opencode` directory. To run it against a different directory or repository:
+
+```bash
+bun dev <directory>
+```
+
+To run OpenCode in the root of the opencode repo itself:
+
+```bash
+bun dev .
+```
+
+### Building a "localcode"
+
+To compile a standalone executable:
+
+```bash
+./packages/opencode/script/build.ts --single
+```
+
+Then run it with:
+
+```bash
+./packages/opencode/dist/opencode-<platform>/bin/opencode
+```
+
+Replace `<platform>` with your platform (e.g., `darwin-arm64`, `linux-x64`).
+
 - Core pieces:
   - `packages/opencode`: OpenCode core business logic & server.
   - `packages/opencode/src/cli/cmd/tui/`: The TUI code, written in SolidJS with [opentui](https://github.com/sst/opentui)
   - `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 +83,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,13 +30,29 @@ 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 opencode               # Any OS
 nix run nixpkgs#opencode           # or github:sst/opencode for latest dev branch
 ```
 
 > [!TIP]
 > Remove versions older than 0.1.x before installing.
 
+### Desktop App (BETA)
+
+OpenCode is also available as a desktop application. Download directly from the [releases page](https://github.com/sst/opencode/releases) or [opencode.ai/download](https://opencode.ai/download).
+
+| Platform              | 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`, or AppImage           |
+
+```bash
+# macOS (Homebrew)
+brew install --cask opencode-desktop
+```
+
 #### Installation Directory
 
 The install script respects the following priority order for the installation path:
@@ -63,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).
@@ -78,11 +94,11 @@ If you're interested in contributing to OpenCode, please read our [contributing
 
 ### Building on OpenCode
 
-If you are working on a project that's related to OpenCode and is using "opencode" as a part of its name; for example, "opencode-dashboard" or "opencode-mobile", please add a note to your README to clarify that it is not built by the OpenCode team and is not affiliated with us in anyway.
+If you are working on a project that's related to OpenCode and is using "opencode" as a part of its name; for example, "opencode-dashboard" or "opencode-mobile", please add a note to your README to clarify that it is not built by the OpenCode team and is not affiliated with us in any way.
 
 ### 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

@@ -168,3 +168,24 @@
 | 2025-12-10 | 1,025,891 (+14,403) | 991,708 (+17,786)   | 2,017,599 (+32,189) |
 | 2025-12-11 | 1,045,110 (+19,219) | 1,010,559 (+18,851) | 2,055,669 (+38,070) |
 | 2025-12-12 | 1,061,340 (+16,230) | 1,030,838 (+20,279) | 2,092,178 (+36,509) |
+| 2025-12-13 | 1,073,561 (+12,221) | 1,044,608 (+13,770) | 2,118,169 (+25,991) |
+| 2025-12-14 | 1,082,042 (+8,481)  | 1,052,425 (+7,817)  | 2,134,467 (+16,298) |
+| 2025-12-15 | 1,093,632 (+11,590) | 1,059,078 (+6,653)  | 2,152,710 (+18,243) |
+| 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) |
+| 2025-12-29 | 1,415,560 (+25,172) | 1,257,101 (+11,411) | 2,672,661 (+36,583) |
+| 2025-12-30 | 1,445,450 (+29,890) | 1,272,689 (+15,588) | 2,718,139 (+45,478) |
+| 2025-12-31 | 1,479,598 (+34,148) | 1,293,235 (+20,546) | 2,772,833 (+54,694) |
+| 2026-01-01 | 1,508,883 (+29,285) | 1,309,874 (+16,639) | 2,818,757 (+45,924) |
+| 2026-01-02 | 1,563,474 (+54,591) | 1,320,959 (+11,085) | 2,884,433 (+65,676) |

bunfig.toml

@@ -1,2 +1,6 @@
 [install]
 exact = true
+
+[test]
+root = "./do-not-run-tests-from-root"
+

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1765425892,
-        "narHash": "sha256-jlQpSkg2sK6IJVzTQBDyRxQZgKADC2HKMRfGCSgNMHo=",
+        "lastModified": 1767242400,
+        "narHash": "sha256-knFaYjeg7swqG1dljj1hOxfg39zrIy8pfGuicjm9s+o=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "5d6bdbddb4695a62f0d00a3620b37a15275a5093",
+        "rev": "c04833a1e584401bb63c1a63ddc51a71e6aa457a",
         "type": "github"
       },
       "original": {

flake.nix

@@ -17,7 +17,7 @@
         "aarch64-darwin"
         "x86_64-darwin"
       ];
-      lib = nixpkgs.lib;
+      inherit (nixpkgs) lib;
       forEachSystem = lib.genAttrs systems;
       pkgsFor = system: nixpkgs.legacyPackages.${system};
       packageJson = builtins.fromJSON (builtins.readFile ./packages/opencode/package.json);
@@ -70,12 +70,12 @@
         in
         {
           default = mkPackage {
-            version = packageJson.version;
+            inherit (packageJson) version;
             src = ./.;
             scripts = ./nix/scripts;
             target = bunTarget.${system};
             modelsDev = "${modelsDev.${system}}/dist/_api.json";
-            mkNodeModules = mkNodeModules;
+            inherit mkNodeModules;
           };
         }
       );

github/README.md

@@ -6,7 +6,7 @@ Mention `/opencode` in your comment, and opencode will execute tasks within your
 
 ## Features
 
-#### Explain an issues
+#### Explain an issue
 
 Leave the following comment on a GitHub issue. `opencode` will read the entire thread, including all comments, and reply with a clear explanation.
 
@@ -14,7 +14,7 @@ Leave the following comment on a GitHub issue. `opencode` will read the entire t
 /opencode explain this issue
 ```
 
-#### Fix an issues
+#### Fix an issue
 
 Leave the following comment on a GitHub issue. opencode will create a new branch, implement the changes, and open a PR with the changes.
 

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
@@ -17,6 +21,19 @@ inputs:
     description: "Custom prompt to override the default prompt"
     required: false
 
+  use_github_token:
+    description: "Use GITHUB_TOKEN directly instead of OpenCode App token exchange. When true, skips OIDC and uses the GITHUB_TOKEN env var."
+    required: false
+    default: "false"
+
+  mentions:
+    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:
@@ -49,5 +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

@@ -281,7 +281,7 @@ async function assertOpencodeConnected() {
       connected = true
       break
     } catch (e) {}
-    await new Promise((resolve) => setTimeout(resolve, 300))
+    await Bun.sleep(300)
   } while (retry++ < 30)
 
   if (!connected) {
@@ -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",

github/package.json

@@ -13,7 +13,7 @@
     "@actions/core": "1.11.1",
     "@actions/github": "6.0.1",
     "@octokit/graphql": "9.0.1",
-    "@octokit/rest": "22.0.0",
+    "@octokit/rest": "catalog:",
     "@opencode-ai/sdk": "workspace:*"
   }
 }

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() {
@@ -240,22 +294,23 @@ download_with_progress() {
 
 download_and_install() {
     print_message info "\n${MUTED}Installing ${NC}opencode ${MUTED}version: ${NC}$specific_version"
-    mkdir -p opencodetmp && cd opencodetmp
+    local tmp_dir="${TMPDIR:-/tmp}/opencode_install_$$"
+    mkdir -p "$tmp_dir"
     
-    if [[ "$os" == "windows" ]] || ! download_with_progress "$url" "$filename"; then
-        # Fallback to standard curl on Windows or if custom progress fails
-        curl -# -L -o "$filename" "$url"
+    if [[ "$os" == "windows" ]] || ! [ -t 2 ] || ! download_with_progress "$url" "$tmp_dir/$filename"; then
+        # Fallback to standard curl on Windows, non-TTY environments, or if custom progress fails
+        curl -# -L -o "$tmp_dir/$filename" "$url"
     fi
 
     if [ "$os" = "linux" ]; then
-        tar -xzf "$filename"
+        tar -xzf "$tmp_dir/$filename" -C "$tmp_dir"
     else
-        unzip -q "$filename"
+        unzip -q "$tmp_dir/$filename" -d "$tmp_dir"
     fi
     
-    mv opencode "$INSTALL_DIR"
+    mv "$tmp_dir/opencode" "$INSTALL_DIR"
     chmod 755 "${INSTALL_DIR}/opencode"
-    cd .. && rm -rf opencodetmp
+    rm -rf "$tmp_dir"
 }
 
 check_version
@@ -303,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-nWSAnQEm/t1ESZe23dr4JnIOJQ0JLN0w4NVoMJajbVQ="
+  "nodeModules": "sha256-uJDhOieOdMQLORyuOWtgtjLoMnNEQPrDcyij9TX0aTw="
 }

nix/node-modules.nix

@@ -1,18 +1,26 @@
-{ hash, lib, stdenvNoCC, bun, cacert, curl }:
+{
+  hash,
+  lib,
+  stdenvNoCC,
+  bun,
+  cacert,
+  curl,
+}:
 args:
 stdenvNoCC.mkDerivation {
   pname = "opencode-node_modules";
-  version = args.version;
-  src = args.src;
+  inherit (args) version src;
 
-  impureEnvVars =
-    lib.fetchers.proxyImpureEnvVars
-    ++ [
-      "GIT_PROXY_COMMAND"
-      "SOCKS_SERVER"
-    ];
+  impureEnvVars = lib.fetchers.proxyImpureEnvVars ++ [
+    "GIT_PROXY_COMMAND"
+    "SOCKS_SERVER"
+  ];
 
-  nativeBuildInputs = [ bun cacert curl ];
+  nativeBuildInputs = [
+    bun
+    cacert
+    curl
+  ];
 
   dontConfigure = true;
 

nix/opencode.nix

@@ -1,7 +1,13 @@
-{ lib, stdenvNoCC, bun, ripgrep, makeBinaryWrapper }:
+{
+  lib,
+  stdenvNoCC,
+  bun,
+  ripgrep,
+  makeBinaryWrapper,
+}:
 args:
 let
-  scripts = args.scripts;
+  inherit (args) scripts;
   mkModules =
     attrs:
     args.mkNodeModules (
@@ -14,13 +20,10 @@ let
 in
 stdenvNoCC.mkDerivation (finalAttrs: {
   pname = "opencode";
-  version = args.version;
-
-  src = args.src;
+  inherit (args) version src;
 
   node_modules = mkModules {
-    version = finalAttrs.version;
-    src = finalAttrs.src;
+    inherit (finalAttrs) version src;
   };
 
   nativeBuildInputs = [

nix/scripts/patch-wasm.ts

@@ -31,9 +31,13 @@ for (const [name, wasmPath] of byName) {
 next = next.replaceAll("tree-sitter.wasm", mainWasm).replaceAll("web-tree-sitter/tree-sitter.wasm", mainWasm)
 
 // Collapse any relative prefixes before absolute store paths (e.g., "../../../..//nix/store/...")
+const nixStorePrefix = process.env.NIX_STORE || "/nix/store"
 next = next.replace(/(\.\/)+/g, "./")
-next = next.replace(/(\.\.\/)+\/?(\/nix\/store[^"']+)/g, "/$2")
-next = next.replace(/(["'])\/{2,}(\/nix\/store[^"']+)(["'])/g, "$1/$2$3")
-next = next.replace(/(["'])\/\/(nix\/store[^"']+)(["'])/g, "$1/$2$3")
+next = next.replace(
+  new RegExp(`(\\.\\.\\/)+\\/{1,2}(${nixStorePrefix.replace(/^\//, "").replace(/\//g, "\\/")}[^"']+)`, "g"),
+  "/$2",
+)
+next = next.replace(new RegExp(`(["'])\\/{2,}(\\/${nixStorePrefix.replace(/\//g, "\\/")}[^"']+)(["'])`, "g"), "$1$2$3")
+next = next.replace(new RegExp(`(["'])\\/\\/(${nixStorePrefix.replace(/\//g, "\\/")}[^"']+)(["'])`, "g"), "$1$2$3")
 
 if (next !== content) fs.writeFileSync(file, next)

package.json

@@ -4,13 +4,14 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.3",
+  "packageManager": "bun@1.3.5",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "typecheck": "bun turbo typecheck",
     "prepare": "husky",
     "random": "echo 'Random script'",
-    "hello": "echo 'Hello World!'"
+    "hello": "echo 'Hello World!'",
+    "test": "echo 'do not run tests from root' && exit 1"
   },
   "workspaces": {
     "packages": [
@@ -20,7 +21,8 @@
       "packages/slack"
     ],
     "catalog": {
-      "@types/bun": "1.3.3",
+      "@types/bun": "1.3.4",
+      "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
       "ulid": "3.0.1",
       "@kobalte/core": "0.13.11",
@@ -30,7 +32,8 @@
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/precision-diffs": "0.6.1",
+      "@pierre/diffs": "1.0.2",
+      "@solid-primitives/storage": "4.3.3",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
       "ai": "5.0.97",
@@ -38,10 +41,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",
@@ -54,6 +60,7 @@
     }
   },
   "devDependencies": {
+    "@actions/artifact": "5.0.1",
     "@tsconfig/bun": "catalog:",
     "husky": "9.1.7",
     "prettier": "3.6.2",
@@ -62,6 +69,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.933.0",
+    "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/script": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
     "typescript": "catalog:"
@@ -78,7 +86,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/AGENTS.md

@@ -0,0 +1,13 @@
+## Debugging
+
+- To test the opencode app, use the playwrite mcp server, the app is already
+  running at http://localhost:3000
+- NEVER try to restart the app, or the server process, EVER.
+
+## SolidJS
+
+- Always prefer `createStore` over multiple `createSignal` calls
+
+## Tool Calling
+
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.

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.224",
+  "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,115 @@
+import "@/index.css"
+import { ErrorBoundary, Show, type ParentProps } 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 { PermissionProvider } from "@/context/permission"
+import { LayoutProvider } from "@/context/layout"
+import { GlobalSDKProvider } from "@/context/global-sdk"
+import { ServerProvider, useServer } from "@/context/server"
+import { TerminalProvider } from "@/context/terminal"
+import { PromptProvider } from "@/context/prompt"
+import { FileProvider } from "@/context/file"
+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 defaultServerUrl = 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
+})
+
+function ServerKey(props: ParentProps) {
+  const server = useServer()
+  return (
+    <Show when={server.url} keyed>
+      {props.children}
+    </Show>
+  )
+}
+
+export function App() {
+  return (
+    <MetaProvider>
+      <Font />
+      <ThemeProvider>
+        <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
+          <DialogProvider>
+            <MarkedProvider>
+              <DiffComponentProvider component={Diff}>
+                <CodeComponentProvider component={Code}>
+                  <ServerProvider defaultUrl={defaultServerUrl}>
+                    <ServerKey>
+                      <GlobalSDKProvider>
+                        <GlobalSyncProvider>
+                          <Router
+                            root={(props) => (
+                              <PermissionProvider>
+                                <LayoutProvider>
+                                  <NotificationProvider>
+                                    <CommandProvider>
+                                      <Layout>{props.children}</Layout>
+                                    </CommandProvider>
+                                  </NotificationProvider>
+                                </LayoutProvider>
+                              </PermissionProvider>
+                            )}
+                          >
+                            <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 ?? "new"} keyed>
+                                    <TerminalProvider>
+                                      <FileProvider>
+                                        <PromptProvider>
+                                          <Session />
+                                        </PromptProvider>
+                                      </FileProvider>
+                                    </TerminalProvider>
+                                  </Show>
+                                )}
+                              />
+                            </Route>
+                          </Router>
+                        </GlobalSyncProvider>
+                      </GlobalSDKProvider>
+                    </ServerKey>
+                  </ServerProvider>
+                </CodeComponentProvider>
+              </DiffComponentProvider>
+            </MarkedProvider>
+          </DialogProvider>
+        </ErrorBoundary>
+      </ThemeProvider>
+    </MetaProvider>
+  )
+}

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

@@ -0,0 +1,383 @@
+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 { Link } from "@/components/link"
+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()
+  const globalSync = useGlobalSync()
+  const globalSDK = useGlobalSDK()
+  const platform = usePlatform()
+  const provider = createMemo(() => globalSync.data.provider.all.find((x) => x.id === props.provider)!)
+  const methods = createMemo(
+    () =>
+      globalSync.data.provider_auth[props.provider] ?? [
+        {
+          type: "api",
+          label: "API key",
+        },
+      ],
+  )
+  const [store, setStore] = createStore({
+    methodIndex: undefined as undefined | number,
+    authorization: undefined as undefined | ProviderAuthAuthorization,
+    state: "pending" as undefined | "pending" | "complete" | "error",
+    error: undefined as string | undefined,
+  })
+
+  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
+
+  async function selectMethod(index: number) {
+    const method = methods()[index]
+    setStore(
+      produce((draft) => {
+        draft.methodIndex = index
+        draft.authorization = undefined
+        draft.state = undefined
+        draft.error = undefined
+      }),
+    )
+
+    if (method.type === "oauth") {
+      setStore("state", "pending")
+      const start = Date.now()
+      await globalSDK.client.provider.oauth
+        .authorize(
+          {
+            providerID: props.provider,
+            method: index,
+          },
+          { throwOnError: true },
+        )
+        .then((x) => {
+          const elapsed = Date.now() - start
+          const delay = 1000 - elapsed
+
+          if (delay > 0) {
+            setTimeout(() => {
+              setStore("state", "complete")
+              setStore("authorization", x.data!)
+            }, delay)
+            return
+          }
+          setStore("state", "complete")
+          setStore("authorization", x.data!)
+        })
+        .catch((e) => {
+          setStore("state", "error")
+          setStore("error", String(e))
+        })
+    }
+  }
+
+  let listRef: ListRef | undefined
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
+      return
+    }
+    if (e.key === "Escape") return
+    listRef?.onKeyDown(e)
+  }
+
+  onMount(() => {
+    if (methods().length === 1) {
+      selectMethod(0)
+    }
+    document.addEventListener("keydown", handleKey)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKey)
+    })
+  })
+
+  async function complete() {
+    await globalSDK.client.global.dispose()
+    dialog.close()
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: `${provider().name} connected`,
+      description: `${provider().name} models are now available to use.`,
+    })
+  }
+
+  function goBack() {
+    if (methods().length === 1) {
+      dialog.show(() => <DialogSelectProvider />)
+      return
+    }
+    if (store.authorization) {
+      setStore("authorization", undefined)
+      setStore("methodIndex", undefined)
+      return
+    }
+    if (store.methodIndex) {
+      setStore("methodIndex", undefined)
+      return
+    }
+    dialog.show(() => <DialogSelectProvider />)
+  }
+
+  return (
+    <Dialog title={<IconButton tabIndex={-1} icon="arrow-left" variant="ghost" onClick={goBack} />}>
+      <div class="flex flex-col gap-6 px-2.5 pb-3">
+        <div class="px-2.5 flex gap-4 items-center">
+          <ProviderIcon id={props.provider as IconName} class="size-5 shrink-0 icon-strong-base" />
+          <div class="text-16-medium text-text-strong">
+            <Switch>
+              <Match when={props.provider === "anthropic" && method()?.label?.toLowerCase().includes("max")}>
+                Login with Claude Pro/Max
+              </Match>
+              <Match when={true}>Connect {provider().name}</Match>
+            </Switch>
+          </div>
+        </div>
+        <div class="px-2.5 pb-10 flex flex-col gap-6">
+          <Switch>
+            <Match when={store.methodIndex === undefined}>
+              <div class="text-14-regular text-text-base">Select login method for {provider().name}.</div>
+              <div class="">
+                <List
+                  ref={(ref) => {
+                    listRef = ref
+                  }}
+                  items={methods}
+                  key={(m) => m?.label}
+                  onSelect={async (method, index) => {
+                    if (!method) return
+                    selectMethod(index)
+                  }}
+                >
+                  {(i) => (
+                    <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>
+                      <span>{i.label}</span>
+                    </div>
+                  )}
+                </List>
+              </div>
+            </Match>
+            <Match when={store.state === "pending"}>
+              <div class="text-14-regular text-text-base">
+                <div class="flex items-center gap-x-2">
+                  <Spinner />
+                  <span>Authorization in progress...</span>
+                </div>
+              </div>
+            </Match>
+            <Match when={store.state === "error"}>
+              <div class="text-14-regular text-text-base">
+                <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>
+              </div>
+            </Match>
+            <Match when={method()?.type === "api"}>
+              {iife(() => {
+                const [formStore, setFormStore] = createStore({
+                  value: "",
+                  error: undefined as string | undefined,
+                })
+
+                async function handleSubmit(e: SubmitEvent) {
+                  e.preventDefault()
+
+                  const form = e.currentTarget as HTMLFormElement
+                  const formData = new FormData(form)
+                  const apiKey = formData.get("apiKey") as string
+
+                  if (!apiKey?.trim()) {
+                    setFormStore("error", "API key is required")
+                    return
+                  }
+
+                  setFormStore("error", undefined)
+                  await globalSDK.client.auth.set({
+                    providerID: props.provider,
+                    auth: {
+                      type: "api",
+                      key: apiKey,
+                    },
+                  })
+                  await complete()
+                }
+
+                return (
+                  <div class="flex flex-col gap-6">
+                    <Switch>
+                      <Match when={provider().id === "opencode"}>
+                        <div class="flex flex-col gap-4">
+                          <div class="text-14-regular text-text-base">
+                            OpenCode Zen gives you access to a curated set of reliable optimized models for coding
+                            agents.
+                          </div>
+                          <div class="text-14-regular text-text-base">
+                            With a single API key you'll get access to models such as Claude, GPT, Gemini, GLM and more.
+                          </div>
+                          <div class="text-14-regular text-text-base">
+                            Visit{" "}
+                            <Link href="https://opencode.ai/zen" tabIndex={-1}>
+                              opencode.ai/zen
+                            </Link>{" "}
+                            to collect your API key.
+                          </div>
+                        </div>
+                      </Match>
+                      <Match when={true}>
+                        <div class="text-14-regular text-text-base">
+                          Enter your {provider().name} API key to connect your account and use {provider().name} models
+                          in OpenCode.
+                        </div>
+                      </Match>
+                    </Switch>
+                    <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+                      <TextField
+                        autofocus
+                        type="text"
+                        label={`${provider().name} API key`}
+                        placeholder="API key"
+                        name="apiKey"
+                        value={formStore.value}
+                        onChange={setFormStore.bind(null, "value")}
+                        validationState={formStore.error ? "invalid" : undefined}
+                        error={formStore.error}
+                      />
+                      <Button class="w-auto" type="submit" size="large" variant="primary">
+                        Submit
+                      </Button>
+                    </form>
+                  </div>
+                )
+              })}
+            </Match>
+            <Match when={method()?.type === "oauth"}>
+              <Switch>
+                <Match when={store.authorization?.method === "code"}>
+                  {iife(() => {
+                    const [formStore, setFormStore] = createStore({
+                      value: "",
+                      error: undefined as string | undefined,
+                    })
+
+                    onMount(() => {
+                      if (store.authorization?.method === "code" && store.authorization?.url) {
+                        platform.openLink(store.authorization.url)
+                      }
+                    })
+
+                    async function handleSubmit(e: SubmitEvent) {
+                      e.preventDefault()
+
+                      const form = e.currentTarget as HTMLFormElement
+                      const formData = new FormData(form)
+                      const code = formData.get("code") as string
+
+                      if (!code?.trim()) {
+                        setFormStore("error", "Authorization code is required")
+                        return
+                      }
+
+                      setFormStore("error", undefined)
+                      const { error } = await globalSDK.client.provider.oauth.callback({
+                        providerID: props.provider,
+                        method: store.methodIndex,
+                        code,
+                      })
+                      if (!error) {
+                        await complete()
+                        return
+                      }
+                      setFormStore("error", "Invalid authorization code")
+                    }
+
+                    return (
+                      <div class="flex flex-col gap-6">
+                        <div class="text-14-regular text-text-base">
+                          Visit <Link href={store.authorization!.url}>this link</Link> to collect your authorization
+                          code to connect your account and use {provider().name} models in OpenCode.
+                        </div>
+                        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+                          <TextField
+                            autofocus
+                            type="text"
+                            label={`${method()?.label} authorization code`}
+                            placeholder="Authorization code"
+                            name="code"
+                            value={formStore.value}
+                            onChange={setFormStore.bind(null, "value")}
+                            validationState={formStore.error ? "invalid" : undefined}
+                            error={formStore.error}
+                          />
+                          <Button class="w-auto" type="submit" size="large" variant="primary">
+                            Submit
+                          </Button>
+                        </form>
+                      </div>
+                    )
+                  })}
+                </Match>
+                <Match when={store.authorization?.method === "auto"}>
+                  {iife(() => {
+                    const code = createMemo(() => {
+                      const instructions = store.authorization?.instructions
+                      if (instructions?.includes(":")) {
+                        return instructions?.split(":")[1]?.trim()
+                      }
+                      return instructions
+                    })
+
+                    onMount(async () => {
+                      const result = await globalSDK.client.provider.oauth.callback({
+                        providerID: props.provider,
+                        method: store.methodIndex,
+                      })
+                      if (result.error) {
+                        // TODO: show error
+                        dialog.close()
+                        return
+                      }
+                      await complete()
+                    })
+
+                    return (
+                      <div class="flex flex-col gap-6">
+                        <div class="text-14-regular text-text-base">
+                          Visit <Link href={store.authorization!.url}>this link</Link> and enter the code below to
+                          connect your account and use {provider().name} models in OpenCode.
+                        </div>
+                        <TextField label="Confirmation code" class="font-mono" value={code()} readOnly copyable />
+                        <div class="text-14-regular text-text-base flex items-center gap-4">
+                          <Spinner />
+                          <span>Waiting for authorization...</span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </Match>
+              </Switch>
+            </Match>
+          </Switch>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-edit-project.tsx

@@ -0,0 +1,180 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Icon } from "@opencode-ai/ui/icon"
+import { createMemo, createSignal, For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { type LocalProject, getAvatarColors } from "@/context/layout"
+import { Avatar } from "@opencode-ai/ui/avatar"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+
+function getFilename(input: string) {
+  const parts = input.split("/")
+  return parts[parts.length - 1] || input
+}
+
+export function DialogEditProject(props: { project: LocalProject }) {
+  const dialog = useDialog()
+  const globalSDK = useGlobalSDK()
+
+  const folderName = createMemo(() => getFilename(props.project.worktree))
+  const defaultName = createMemo(() => props.project.name || folderName())
+
+  const [store, setStore] = createStore({
+    name: defaultName(),
+    color: props.project.icon?.color || "pink",
+    iconUrl: props.project.icon?.url || "",
+    saving: false,
+  })
+
+  const [dragOver, setDragOver] = createSignal(false)
+
+  function handleFileSelect(file: File) {
+    if (!file.type.startsWith("image/")) return
+    const reader = new FileReader()
+    reader.onload = (e) => setStore("iconUrl", e.target?.result as string)
+    reader.readAsDataURL(file)
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault()
+    setDragOver(false)
+    const file = e.dataTransfer?.files[0]
+    if (file) handleFileSelect(file)
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault()
+    setDragOver(true)
+  }
+
+  function handleDragLeave() {
+    setDragOver(false)
+  }
+
+  function handleInputChange(e: Event) {
+    const input = e.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) handleFileSelect(file)
+  }
+
+  function clearIcon() {
+    setStore("iconUrl", "")
+  }
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (!props.project.id) return
+
+    setStore("saving", true)
+    const name = store.name.trim() === folderName() ? "" : store.name.trim()
+    await globalSDK.client.project.update({
+      projectID: props.project.id,
+      name,
+      icon: { color: store.color, url: store.iconUrl },
+    })
+    setStore("saving", false)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title="Edit project">
+      <form onSubmit={handleSubmit} class="flex flex-col gap-6 px-2.5 pb-3">
+        <div class="flex flex-col gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label="Name"
+            placeholder={folderName()}
+            value={store.name}
+            onChange={(v) => setStore("name", v)}
+          />
+
+          <div class="flex flex-col gap-2">
+            <label class="text-12-medium text-text-weak">Icon</label>
+            <div class="flex gap-3 items-start">
+              <div class="relative">
+                <div
+                  class="size-16 rounded-lg overflow-hidden border border-dashed transition-colors cursor-pointer"
+                  classList={{
+                    "border-text-interactive-base bg-surface-info-base/20": dragOver(),
+                    "border-border-base hover:border-border-strong": !dragOver(),
+                  }}
+                  onDrop={handleDrop}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onClick={() => document.getElementById("icon-upload")?.click()}
+                >
+                  <Show
+                    when={store.iconUrl}
+                    fallback={
+                      <div class="size-full flex items-center justify-center">
+                        <Avatar
+                          fallback={store.name || defaultName()}
+                          {...getAvatarColors(store.color)}
+                          class="size-full"
+                        />
+                      </div>
+                    }
+                  >
+                    <img src={store.iconUrl} alt="Project icon" class="size-full object-cover" />
+                  </Show>
+                </div>
+                <Show when={store.iconUrl}>
+                  <button
+                    type="button"
+                    class="absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-base border border-border-base flex items-center justify-center hover:bg-surface-raised-base-hover"
+                    onClick={clearIcon}
+                  >
+                    <Icon name="close" class="size-3 text-icon-base" />
+                  </button>
+                </Show>
+              </div>
+              <input id="icon-upload" type="file" accept="image/*" class="hidden" onChange={handleInputChange} />
+              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak">
+                <span>Click or drag an image</span>
+                <span>Recommended: 128x128px</span>
+              </div>
+            </div>
+          </div>
+
+          <Show when={!store.iconUrl}>
+            <div class="flex flex-col gap-2">
+              <label class="text-12-medium text-text-weak">Color</label>
+              <div class="flex gap-2">
+                <For each={AVATAR_COLOR_KEYS}>
+                  {(color) => (
+                    <button
+                      type="button"
+                      class="relative size-8 rounded-md transition-all"
+                      classList={{
+                        "ring-2 ring-offset-2 ring-offset-surface-base ring-text-interactive-base":
+                          store.color === color,
+                      }}
+                      style={{ background: getAvatarColors(color).background }}
+                      onClick={() => setStore("color", color)}
+                    >
+                      <Avatar fallback={store.name || defaultName()} {...getAvatarColors(color)} class="size-full" />
+                    </button>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button type="button" variant="ghost" size="large" onClick={() => dialog.close()}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary" size="large" disabled={store.saving}>
+            {store.saving ? "Saving..." : "Save"}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,57 @@
+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
+        search={{ placeholder: "Search models", autofocus: true }}
+        emptyMessage="No model results"
+        key={(x) => `${x?.provider?.id}:${x?.id}`}
+        items={local.model.list()}
+        filterKeys={["provider.name", "name", "id"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        groupBy={(x) => x.provider.name}
+        sortGroupsBy={(a, b) => {
+          const aProvider = a.items[0].provider.id
+          const bProvider = b.items[0].provider.id
+          if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+          if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+          return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          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-3">
+            <span>{i.name}</span>
+            <div onClick={(e) => e.stopPropagation()}>
+              <Switch
+                checked={
+                  !!local.model.visible({
+                    modelID: i.id,
+                    providerID: i.provider.id,
+                  })
+                }
+                onChange={(checked) => {
+                  local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,114 @@
+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 { createMemo } from "solid-js"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
+
+interface DialogSelectDirectoryProps {
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+}
+
+export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
+  const sync = useGlobalSync()
+  const sdk = useGlobalSDK()
+  const dialog = useDialog()
+
+  const home = createMemo(() => sync.data.path.home)
+  const root = createMemo(() => sync.data.path.home || sync.data.path.directory)
+
+  function join(base: string | undefined, rel: string) {
+    const b = (base ?? "").replace(/[\\/]+$/, "")
+    const r = rel.replace(/^[\\/]+/, "").replace(/[\\/]+$/, "")
+    if (!b) return r
+    if (!r) return b
+    return b + "/" + r
+  }
+
+  function display(rel: string) {
+    const full = join(root(), rel)
+    const h = home()
+    if (!h) return full
+    if (full === h) return "~"
+    if (full.startsWith(h + "/") || full.startsWith(h + "\\")) {
+      return "~" + full.slice(h.length)
+    }
+    return full
+  }
+
+  function normalizeQuery(query: string) {
+    const h = home()
+
+    if (!query) return query
+    if (query.startsWith("~/")) return query.slice(2)
+
+    if (h) {
+      const lc = query.toLowerCase()
+      const hc = h.toLowerCase()
+      if (lc === hc || lc.startsWith(hc + "/") || lc.startsWith(hc + "\\")) {
+        return query.slice(h.length).replace(/^[\\/]+/, "")
+      }
+    }
+
+    return query
+  }
+
+  async function fetchDirs(query: string) {
+    const directory = root()
+    if (!directory) return [] as string[]
+
+    const results = await sdk.client.find
+      .files({ directory, query, type: "directory", limit: 50 })
+      .then((x) => x.data ?? [])
+      .catch(() => [])
+
+    return results.map((x) => x.replace(/[\\/]+$/, ""))
+  }
+
+  const directories = async (filter: string) => {
+    const query = normalizeQuery(filter.trim())
+    return fetchDirs(query)
+  }
+
+  function resolve(rel: string) {
+    const absolute = join(root(), rel)
+    props.onSelect(props.multiple ? [absolute] : absolute)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title={props.title ?? "Open project"}>
+      <List
+        search={{ placeholder: "Search folders", autofocus: true }}
+        emptyMessage="No folders found"
+        items={directories}
+        key={(x) => x}
+        onSelect={(path) => {
+          if (!path) return
+          resolve(path)
+        }}
+      >
+        {(rel) => {
+          const path = display(rel)
+          return (
+            <div class="w-full flex items-center justify-between rounded-md">
+              <div class="flex items-center gap-x-3 grow min-w-0">
+                <FileIcon node={{ path: rel, type: "directory" }} class="shrink-0 size-4" />
+                <div class="flex items-center text-14-regular min-w-0">
+                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                    {getDirectory(path)}
+                  </span>
+                  <span class="text-text-strong whitespace-nowrap">{getFilename(path)}</span>
+                </div>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,50 @@
+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 { useFile } from "@/context/file"
+
+export function DialogSelectFile() {
+  const layout = useLayout()
+  const file = useFile()
+  const dialog = useDialog()
+  const params = useParams()
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const tabs = createMemo(() => layout.tabs(sessionKey()))
+  return (
+    <Dialog title="Select file">
+      <List
+        search={{ placeholder: "Search files", autofocus: true }}
+        emptyMessage="No files found"
+        items={file.searchFiles}
+        key={(x) => x}
+        onSelect={(path) => {
+          if (path) {
+            const value = file.tab(path)
+            tabs().open(value)
+            file.load(path)
+          }
+          dialog.close()
+        }}
+      >
+        {(i) => (
+          <div class="w-full flex items-center justify-between rounded-md">
+            <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">
+                  {getDirectory(i)}
+                </span>
+                <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,110 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+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 { 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()
+  const dialog = useDialog()
+  const providers = useProviders()
+
+  let listRef: ListRef | undefined
+  const handleKey = (e: KeyboardEvent) => {
+    if (e.key === "Escape") return
+    listRef?.onKeyDown(e)
+  }
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKey)
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKey)
+    })
+  })
+
+  return (
+    <Dialog title="Select model">
+      <div class="flex flex-col gap-3 px-2.5">
+        <div class="text-14-medium text-text-base px-2.5">Free models provided by OpenCode</div>
+        <List
+          ref={(ref) => (listRef = ref)}
+          items={local.model.list}
+          current={local.model.current()}
+          key={(x) => `${x.provider.id}:${x.id}`}
+          onSelect={(x) => {
+            local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+              recent: true,
+            })
+            dialog.close()
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center gap-x-2.5">
+              <span>{i.name}</span>
+              <Tag>Free</Tag>
+              <Show when={i.latest}>
+                <Tag>Latest</Tag>
+              </Show>
+            </div>
+          )}
+        </List>
+        <div />
+        <div />
+      </div>
+      <div class="px-1.5 pb-1.5">
+        <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
+          <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
+            <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 px-0"
+                key={(x) => x?.id}
+                items={providers.popular}
+                activeIcon="plus-small"
+                sortBy={(a, b) => {
+                  if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+                    return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+                  return a.name.localeCompare(b.name)
+                }}
+                onSelect={(x) => {
+                  if (!x) return
+                  dialog.show(() => <DialogConnectProvider provider={x.id} />)
+                }}
+              >
+                {(i) => (
+                  <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>
+                    </Show>
+                    <Show when={i.id === "anthropic"}>
+                      <div class="text-14-regular text-text-weak">Connect with Claude Pro/Max or API key</div>
+                    </Show>
+                  </div>
+                )}
+              </List>
+              <Button
+                variant="ghost"
+                class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
+                icon="dot-grid"
+                onClick={() => {
+                  dialog.show(() => <DialogSelectProvider />)
+                }}
+              >
+                View all providers
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,115 @@
+import { Popover as Kobalte } from "@kobalte/core/popover"
+import { Component, createMemo, createSignal, JSX, Show } from "solid-js"
+import { useLocal } from "@/context/local"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { popularProviders } from "@/hooks/use-providers"
+import { Button } from "@opencode-ai/ui/button"
+import { Tag } from "@opencode-ai/ui/tag"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { DialogSelectProvider } from "./dialog-select-provider"
+import { DialogManageModels } from "./dialog-manage-models"
+
+const ModelList: Component<{
+  provider?: string
+  class?: string
+  onSelect: () => void
+}> = (props) => {
+  const local = useLocal()
+
+  const models = createMemo(() =>
+    local.model
+      .list()
+      .filter((m) => local.model.visible({ modelID: m.id, providerID: m.provider.id }))
+      .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
+  )
+
+  return (
+    <List
+      class={`flex-1 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
+      search={{ placeholder: "Search models", autofocus: true }}
+      emptyMessage="No model results"
+      key={(x) => `${x.provider.id}:${x.id}`}
+      items={models}
+      current={local.model.current()}
+      filterKeys={["provider.name", "name", "id"]}
+      sortBy={(a, b) => a.name.localeCompare(b.name)}
+      groupBy={(x) => x.provider.name}
+      sortGroupsBy={(a, b) => {
+        if (a.category === "Recent" && b.category !== "Recent") return -1
+        if (b.category === "Recent" && a.category !== "Recent") return 1
+        const aProvider = a.items[0].provider.id
+        const bProvider = b.items[0].provider.id
+        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+      }}
+      onSelect={(x) => {
+        local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+          recent: true,
+        })
+        props.onSelect()
+      }}
+    >
+      {(i) => (
+        <div class="w-full flex items-center gap-x-2 text-13-regular">
+          <span class="truncate">{i.name}</span>
+          <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
+            <Tag>Free</Tag>
+          </Show>
+          <Show when={i.latest}>
+            <Tag>Latest</Tag>
+          </Show>
+        </div>
+      )}
+    </List>
+  )
+}
+
+export const ModelSelectorPopover: Component<{
+  provider?: string
+  children: JSX.Element
+}> = (props) => {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <Kobalte open={open()} onOpenChange={setOpen} placement="top-start" gutter={8}>
+      <Kobalte.Trigger as="div">{props.children}</Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none">
+          <Kobalte.Title class="sr-only">Select model</Kobalte.Title>
+          <ModelList provider={props.provider} onSelect={() => setOpen(false)} class="p-1" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
+
+export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
+  const dialog = useDialog()
+
+  return (
+    <Dialog
+      title="Select model"
+      action={
+        <Button
+          class="h-7 -my-1 text-14-medium"
+          icon="plus-small"
+          tabIndex={-1}
+          onClick={() => dialog.show(() => <DialogSelectProvider />)}
+        >
+          Connect provider
+        </Button>
+      }
+    >
+      <ModelList provider={props.provider} onSelect={() => dialog.close()} />
+      <Button
+        variant="ghost"
+        class="ml-3 mt-5 mb-6 text-text-base self-start"
+        onClick={() => dialog.show(() => <DialogManageModels />)}
+      >
+        Manage models
+      </Button>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,54 @@
+import { Component, Show } from "solid-js"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { Tag } from "@opencode-ai/ui/tag"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { IconName } from "@opencode-ai/ui/icons/provider"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+
+export const DialogSelectProvider: Component = () => {
+  const dialog = useDialog()
+  const providers = useProviders()
+
+  return (
+    <Dialog title="Connect provider">
+      <List
+        search={{ placeholder: "Search providers", autofocus: true }}
+        activeIcon="plus-small"
+        key={(x) => x?.id}
+        items={providers.all}
+        filterKeys={["id", "name"]}
+        groupBy={(x) => (popularProviders.includes(x.id) ? "Popular" : "Other")}
+        sortBy={(a, b) => {
+          if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+            return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+          return a.name.localeCompare(b.name)
+        }}
+        sortGroupsBy={(a, b) => {
+          if (a.category === "Popular" && b.category !== "Popular") return -1
+          if (b.category === "Popular" && a.category !== "Popular") return 1
+          return 0
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          dialog.show(() => <DialogConnectProvider provider={x.id} />)
+        }}
+      >
+        {(i) => (
+          <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>
+            </Show>
+            <Show when={i.id === "anthropic"}>
+              <div class="text-14-regular text-text-weak">Connect with Claude Pro/Max or API key</div>
+            </Show>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,179 @@
+import { createEffect, createMemo, onCleanup } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Button } from "@opencode-ai/ui/button"
+import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
+import { useNavigate } from "@solidjs/router"
+
+type ServerStatus = { healthy: boolean; version?: string }
+
+async function checkHealth(url: string, fetch?: typeof globalThis.fetch): Promise<ServerStatus> {
+  const sdk = createOpencodeClient({
+    baseUrl: url,
+    fetch,
+    signal: AbortSignal.timeout(3000),
+  })
+  return sdk.global
+    .health()
+    .then((x) => ({ healthy: x.data?.healthy === true, version: x.data?.version }))
+    .catch(() => ({ healthy: false }))
+}
+
+export function DialogSelectServer() {
+  const navigate = useNavigate()
+  const dialog = useDialog()
+  const server = useServer()
+  const platform = usePlatform()
+  const [store, setStore] = createStore({
+    url: "",
+    adding: false,
+    error: "",
+    status: {} as Record<string, ServerStatus | undefined>,
+  })
+
+  const items = createMemo(() => {
+    const current = server.url
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((x) => x !== current)]
+  })
+
+  const current = createMemo(() => items().find((x) => x === server.url) ?? items()[0])
+
+  const sortedItems = createMemo(() => {
+    const list = items()
+    if (!list.length) return list
+    const active = current()
+    const order = new Map(list.map((url, index) => [url, index] as const))
+    const rank = (value?: ServerStatus) => {
+      if (value?.healthy === true) return 0
+      if (value?.healthy === false) return 2
+      return 1
+    }
+    return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
+      const diff = rank(store.status[a]) - rank(store.status[b])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  async function refreshHealth() {
+    const results: Record<string, ServerStatus> = {}
+    await Promise.all(
+      items().map(async (url) => {
+        results[url] = await checkHealth(url, platform.fetch)
+      }),
+    )
+    setStore("status", reconcile(results))
+  }
+
+  createEffect(() => {
+    items()
+    refreshHealth()
+    const interval = setInterval(refreshHealth, 10_000)
+    onCleanup(() => clearInterval(interval))
+  })
+
+  function select(value: string, persist?: boolean) {
+    if (!persist && store.status[value]?.healthy === false) return
+    dialog.close()
+    if (persist) {
+      server.add(value)
+      navigate("/")
+      return
+    }
+    server.setActive(value)
+    navigate("/")
+  }
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    const value = normalizeServerUrl(store.url)
+    if (!value) return
+
+    setStore("adding", true)
+    setStore("error", "")
+
+    const result = await checkHealth(value, platform.fetch)
+    setStore("adding", false)
+
+    if (!result.healthy) {
+      setStore("error", "Could not connect to server")
+      return
+    }
+
+    setStore("url", "")
+    select(value, true)
+  }
+
+  return (
+    <Dialog title="Servers" description="Switch which OpenCode server this app connects to.">
+      <div class="flex flex-col gap-4 pb-4">
+        <List
+          search={{ placeholder: "Search servers", autofocus: true }}
+          emptyMessage="No servers yet"
+          items={sortedItems}
+          key={(x) => x}
+          current={current()}
+          onSelect={(x) => {
+            if (x) select(x)
+          }}
+        >
+          {(i) => (
+            <div
+              class="flex items-center gap-2 min-w-0 flex-1"
+              classList={{ "opacity-50": store.status[i]?.healthy === false }}
+            >
+              <div
+                classList={{
+                  "size-1.5 rounded-full shrink-0": true,
+                  "bg-icon-success-base": store.status[i]?.healthy === true,
+                  "bg-icon-critical-base": store.status[i]?.healthy === false,
+                  "bg-border-weak-base": store.status[i] === undefined,
+                }}
+              />
+              <span class="truncate">{serverDisplayName(i)}</span>
+              <span class="text-text-weak">{store.status[i]?.version}</span>
+            </div>
+          )}
+        </List>
+
+        <div class="mt-6 px-3 flex flex-col gap-1.5">
+          <div class="px-3">
+            <h3 class="text-14-regular text-text-weak">Add a server</h3>
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div class="flex items-start gap-2">
+              <div class="flex-1 min-w-0 h-auto">
+                <TextField
+                  type="text"
+                  label="Server URL"
+                  hideLabel
+                  placeholder="http://localhost:4096"
+                  value={store.url}
+                  onChange={(v) => {
+                    setStore("url", v)
+                    setStore("error", "")
+                  }}
+                  validationState={store.error ? "invalid" : "valid"}
+                  error={store.error}
+                />
+              </div>
+              <Button type="submit" variant="secondary" icon="plus-small" size="large" disabled={store.adding}>
+                {store.adding ? "Checking..." : "Add"}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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/session-context-usage.tsx

@@ -0,0 +1,102 @@
+import { Match, Show, Switch, createMemo } from "solid-js"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
+import { Button } from "@opencode-ai/ui/button"
+import { useParams } from "@solidjs/router"
+import { AssistantMessage } from "@opencode-ai/sdk/v2/client"
+
+import { useLayout } from "@/context/layout"
+import { useSync } from "@/context/sync"
+
+interface SessionContextUsageProps {
+  variant?: "button" | "indicator"
+}
+
+export function SessionContextUsage(props: SessionContextUsageProps) {
+  const sync = useSync()
+  const params = useParams()
+  const layout = useLayout()
+
+  const variant = createMemo(() => props.variant ?? "button")
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const tabs = createMemo(() => layout.tabs(sessionKey()))
+  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) => {
+      if (x.role !== "assistant") return false
+      const total = x.tokens.input + x.tokens.output + x.tokens.reasoning + x.tokens.cache.read + x.tokens.cache.write
+      return total > 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,
+    }
+  })
+
+  const openContext = () => {
+    if (!params.id) return
+    layout.review.open()
+    tabs().open("context")
+    tabs().setActive("context")
+  }
+
+  const circle = () => (
+    <div class="p-1">
+      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
+    </div>
+  )
+
+  const tooltipValue = () => (
+    <div>
+      <Show when={context()}>
+        {(ctx) => (
+          <>
+            <div class="flex items-center gap-2">
+              <span class="text-text-invert-strong">{ctx().tokens}</span>
+              <span class="text-text-invert-base">Tokens</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
+              <span class="text-text-invert-base">Usage</span>
+            </div>
+          </>
+        )}
+      </Show>
+      <div class="flex items-center gap-2">
+        <span class="text-text-invert-strong">{cost()}</span>
+        <span class="text-text-invert-base">Cost</span>
+      </div>
+      <Show when={variant() === "button"}>
+        <div class="text-11-regular text-text-invert-base mt-1">Click to view context</div>
+      </Show>
+    </div>
+  )
+
+  return (
+    <Show when={params.id}>
+      <Tooltip value={tooltipValue()} placement="top">
+        <Switch>
+          <Match when={variant() === "indicator"}>{circle()}</Match>
+          <Match when={true}>
+            <Button type="button" variant="ghost" class="size-6" onClick={openContext}>
+              {circle()}
+            </Button>
+          </Match>
+        </Switch>
+      </Tooltip>
+    </Show>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { createMemo, Show } from "solid-js"
+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">
+          <div
+            classList={{
+              "size-1.5 rounded-full": true,
+              "bg-icon-critical-base": lspStats().hasError,
+              "bg-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,34 @@
+import { createMemo, Show } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+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 />)}>
+        <div
+          classList={{
+            "size-1.5 rounded-full": true,
+            "bg-icon-critical-base": mcpStats().failed,
+            "bg-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/session/index.ts

@@ -0,0 +1,5 @@
+export { SessionHeader } from "./session-header"
+export { SessionContextTab } from "./session-context-tab"
+export { SortableTab, FileVisual } from "./session-sortable-tab"
+export { SortableTerminalTab } from "./session-sortable-terminal-tab"
+export { NewSessionView } from "./session-new-view"

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

@@ -0,0 +1,419 @@
+import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { useParams } from "@solidjs/router"
+import { DateTime } from "luxon"
+import { useSync } from "@/context/sync"
+import { useLayout } from "@/context/layout"
+import { checksum } from "@opencode-ai/util/encode"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Accordion } from "@opencode-ai/ui/accordion"
+import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
+import { Code } from "@opencode-ai/ui/code"
+import { Markdown } from "@opencode-ai/ui/markdown"
+import type { AssistantMessage, Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
+
+interface SessionContextTabProps {
+  messages: () => Message[]
+  visibleUserMessages: () => UserMessage[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
+}
+
+export function SessionContextTab(props: SessionContextTabProps) {
+  const params = useParams()
+  const sync = useSync()
+
+  const ctx = createMemo(() => {
+    const last = props.messages().findLast((x) => {
+      if (x.role !== "assistant") return false
+      const total = x.tokens.input + x.tokens.output + x.tokens.reasoning + x.tokens.cache.read + x.tokens.cache.write
+      return total > 0
+    }) as AssistantMessage
+    if (!last) return
+
+    const provider = sync.data.provider.all.find((x) => x.id === last.providerID)
+    const model = provider?.models[last.modelID]
+    const limit = model?.limit.context
+
+    const input = last.tokens.input
+    const output = last.tokens.output
+    const reasoning = last.tokens.reasoning
+    const cacheRead = last.tokens.cache.read
+    const cacheWrite = last.tokens.cache.write
+    const total = input + output + reasoning + cacheRead + cacheWrite
+    const usage = limit ? Math.round((total / limit) * 100) : null
+
+    return {
+      message: last,
+      provider,
+      model,
+      limit,
+      input,
+      output,
+      reasoning,
+      cacheRead,
+      cacheWrite,
+      total,
+      usage,
+    }
+  })
+
+  const cost = createMemo(() => {
+    const total = props.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 counts = createMemo(() => {
+    const all = props.messages()
+    const user = all.reduce((count, x) => count + (x.role === "user" ? 1 : 0), 0)
+    const assistant = all.reduce((count, x) => count + (x.role === "assistant" ? 1 : 0), 0)
+    return {
+      all: all.length,
+      user,
+      assistant,
+    }
+  })
+
+  const systemPrompt = createMemo(() => {
+    const msg = props.visibleUserMessages().findLast((m) => !!m.system)
+    const system = msg?.system
+    if (!system) return
+    const trimmed = system.trim()
+    if (!trimmed) return
+    return trimmed
+  })
+
+  const number = (value: number | null | undefined) => {
+    if (value === undefined) return "—"
+    if (value === null) return "—"
+    return value.toLocaleString()
+  }
+
+  const percent = (value: number | null | undefined) => {
+    if (value === undefined) return "—"
+    if (value === null) return "—"
+    return value.toString() + "%"
+  }
+
+  const time = (value: number | undefined) => {
+    if (!value) return "—"
+    return DateTime.fromMillis(value).toLocaleString(DateTime.DATETIME_MED)
+  }
+
+  const providerLabel = createMemo(() => {
+    const c = ctx()
+    if (!c) return "—"
+    return c.provider?.name ?? c.message.providerID
+  })
+
+  const modelLabel = createMemo(() => {
+    const c = ctx()
+    if (!c) return "—"
+    if (c.model?.name) return c.model.name
+    return c.message.modelID
+  })
+
+  const breakdown = createMemo(
+    on(
+      () => [ctx()?.message.id, ctx()?.input, props.messages().length, systemPrompt()],
+      () => {
+        const c = ctx()
+        if (!c) return []
+        const input = c.input
+        if (!input) return []
+
+        const out = {
+          system: systemPrompt()?.length ?? 0,
+          user: 0,
+          assistant: 0,
+          tool: 0,
+        }
+
+        for (const msg of props.messages()) {
+          const parts = (sync.data.part[msg.id] ?? []) as Part[]
+
+          if (msg.role === "user") {
+            for (const part of parts) {
+              if (part.type === "text") out.user += part.text.length
+              if (part.type === "file") out.user += part.source?.text.value.length ?? 0
+              if (part.type === "agent") out.user += part.source?.value.length ?? 0
+            }
+            continue
+          }
+
+          if (msg.role === "assistant") {
+            for (const part of parts) {
+              if (part.type === "text") out.assistant += part.text.length
+              if (part.type === "reasoning") out.assistant += part.text.length
+              if (part.type === "tool") {
+                out.tool += Object.keys(part.state.input).length * 16
+                if (part.state.status === "pending") out.tool += part.state.raw.length
+                if (part.state.status === "completed") out.tool += part.state.output.length
+                if (part.state.status === "error") out.tool += part.state.error.length
+              }
+            }
+          }
+        }
+
+        const estimateTokens = (chars: number) => Math.ceil(chars / 4)
+        const system = estimateTokens(out.system)
+        const user = estimateTokens(out.user)
+        const assistant = estimateTokens(out.assistant)
+        const tool = estimateTokens(out.tool)
+        const estimated = system + user + assistant + tool
+
+        const pct = (tokens: number) => (tokens / input) * 100
+        const pctLabel = (tokens: number) => (Math.round(pct(tokens) * 10) / 10).toString() + "%"
+
+        const build = (tokens: { system: number; user: number; assistant: number; tool: number; other: number }) => {
+          return [
+            {
+              key: "system",
+              label: "System",
+              tokens: tokens.system,
+              width: pct(tokens.system),
+              percent: pctLabel(tokens.system),
+              color: "var(--syntax-info)",
+            },
+            {
+              key: "user",
+              label: "User",
+              tokens: tokens.user,
+              width: pct(tokens.user),
+              percent: pctLabel(tokens.user),
+              color: "var(--syntax-success)",
+            },
+            {
+              key: "assistant",
+              label: "Assistant",
+              tokens: tokens.assistant,
+              width: pct(tokens.assistant),
+              percent: pctLabel(tokens.assistant),
+              color: "var(--syntax-property)",
+            },
+            {
+              key: "tool",
+              label: "Tool Calls",
+              tokens: tokens.tool,
+              width: pct(tokens.tool),
+              percent: pctLabel(tokens.tool),
+              color: "var(--syntax-warning)",
+            },
+            {
+              key: "other",
+              label: "Other",
+              tokens: tokens.other,
+              width: pct(tokens.other),
+              percent: pctLabel(tokens.other),
+              color: "var(--syntax-comment)",
+            },
+          ].filter((x) => x.tokens > 0)
+        }
+
+        if (estimated <= input) {
+          return build({ system, user, assistant, tool, other: input - estimated })
+        }
+
+        const scale = input / estimated
+        const scaled = {
+          system: Math.floor(system * scale),
+          user: Math.floor(user * scale),
+          assistant: Math.floor(assistant * scale),
+          tool: Math.floor(tool * scale),
+        }
+        const scaledTotal = scaled.system + scaled.user + scaled.assistant + scaled.tool
+        return build({ ...scaled, other: Math.max(0, input - scaledTotal) })
+      },
+    ),
+  )
+
+  function Stat(statProps: { label: string; value: JSX.Element }) {
+    return (
+      <div class="flex flex-col gap-1">
+        <div class="text-12-regular text-text-weak">{statProps.label}</div>
+        <div class="text-12-medium text-text-strong">{statProps.value}</div>
+      </div>
+    )
+  }
+
+  const stats = createMemo(() => {
+    const c = ctx()
+    const count = counts()
+    return [
+      { label: "Session", value: props.info()?.title ?? params.id ?? "—" },
+      { label: "Messages", value: count.all.toLocaleString() },
+      { label: "Provider", value: providerLabel() },
+      { label: "Model", value: modelLabel() },
+      { label: "Context Limit", value: number(c?.limit) },
+      { label: "Total Tokens", value: number(c?.total) },
+      { label: "Usage", value: percent(c?.usage) },
+      { label: "Input Tokens", value: number(c?.input) },
+      { label: "Output Tokens", value: number(c?.output) },
+      { label: "Reasoning Tokens", value: number(c?.reasoning) },
+      { label: "Cache Tokens (read/write)", value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}` },
+      { label: "User Messages", value: count.user.toLocaleString() },
+      { label: "Assistant Messages", value: count.assistant.toLocaleString() },
+      { label: "Total Cost", value: cost() },
+      { label: "Session Created", value: time(props.info()?.time.created) },
+      { label: "Last Activity", value: time(c?.message.time.created) },
+    ] satisfies { label: string; value: JSX.Element }[]
+  })
+
+  function RawMessageContent(msgProps: { message: Message }) {
+    const file = createMemo(() => {
+      const parts = (sync.data.part[msgProps.message.id] ?? []) as Part[]
+      const contents = JSON.stringify({ message: msgProps.message, parts }, null, 2)
+      return {
+        name: `${msgProps.message.role}-${msgProps.message.id}.json`,
+        contents,
+        cacheKey: checksum(contents),
+      }
+    })
+
+    return <Code file={file()} overflow="wrap" class="select-text" />
+  }
+
+  function RawMessage(msgProps: { message: Message }) {
+    return (
+      <Accordion.Item value={msgProps.message.id}>
+        <StickyAccordionHeader>
+          <Accordion.Trigger>
+            <div class="flex items-center justify-between gap-2 w-full">
+              <div class="min-w-0 truncate">
+                {msgProps.message.role} <span class="text-text-base">• {msgProps.message.id}</span>
+              </div>
+              <div class="flex items-center gap-3">
+                <div class="shrink-0 text-12-regular text-text-weak">{time(msgProps.message.time.created)}</div>
+                <Icon name="chevron-grabber-vertical" size="small" class="shrink-0 text-text-weak" />
+              </div>
+            </div>
+          </Accordion.Trigger>
+        </StickyAccordionHeader>
+        <Accordion.Content class="bg-background-base">
+          <div class="p-3">
+            <RawMessageContent message={msgProps.message} />
+          </div>
+        </Accordion.Content>
+      </Accordion.Item>
+    )
+  }
+
+  let scroll: HTMLDivElement | undefined
+  let frame: number | undefined
+  let pending: { x: number; y: number } | undefined
+
+  const restoreScroll = () => {
+    const el = scroll
+    if (!el) return
+
+    const s = props.view()?.scroll("context")
+    if (!s) return
+
+    if (el.scrollTop !== s.y) el.scrollTop = s.y
+    if (el.scrollLeft !== s.x) el.scrollLeft = s.x
+  }
+
+  const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    pending = {
+      x: event.currentTarget.scrollLeft,
+      y: event.currentTarget.scrollTop,
+    }
+    if (frame !== undefined) return
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+
+      const next = pending
+      pending = undefined
+      if (!next) return
+
+      props.view().setScroll("context", next)
+    })
+  }
+
+  createEffect(
+    on(
+      () => props.messages().length,
+      () => {
+        requestAnimationFrame(restoreScroll)
+      },
+      { defer: true },
+    ),
+  )
+
+  onCleanup(() => {
+    if (frame === undefined) return
+    cancelAnimationFrame(frame)
+  })
+
+  return (
+    <div
+      class="@container h-full overflow-y-auto no-scrollbar pb-10"
+      ref={(el) => {
+        scroll = el
+        restoreScroll()
+      }}
+      onScroll={handleScroll}
+    >
+      <div class="px-6 pt-4 flex flex-col gap-10">
+        <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
+          <For each={stats()}>{(stat) => <Stat label={stat.label} value={stat.value} />}</For>
+        </div>
+
+        <Show when={breakdown().length > 0}>
+          <div class="flex flex-col gap-2">
+            <div class="text-12-regular text-text-weak">Context Breakdown</div>
+            <div class="h-2 w-full rounded-full bg-surface-base overflow-hidden flex">
+              <For each={breakdown()}>
+                {(segment) => (
+                  <div
+                    class="h-full"
+                    style={{
+                      width: `${segment.width}%`,
+                      "background-color": segment.color,
+                    }}
+                  />
+                )}
+              </For>
+            </div>
+            <div class="flex flex-wrap gap-x-3 gap-y-1">
+              <For each={breakdown()}>
+                {(segment) => (
+                  <div class="flex items-center gap-1 text-11-regular text-text-weak">
+                    <div class="size-2 rounded-sm" style={{ "background-color": segment.color }} />
+                    <div>{segment.label}</div>
+                    <div class="text-text-weaker">{segment.percent}</div>
+                  </div>
+                )}
+              </For>
+            </div>
+            <div class="hidden text-11-regular text-text-weaker">
+              Approximate breakdown of input tokens. "Other" includes tool definitions and overhead.
+            </div>
+          </div>
+        </Show>
+
+        <Show when={systemPrompt()}>
+          {(prompt) => (
+            <div class="flex flex-col gap-2">
+              <div class="text-12-regular text-text-weak">System Prompt</div>
+              <div class="border border-border-base rounded-md bg-surface-base px-3 py-2">
+                <Markdown text={prompt()} class="text-12-regular" />
+              </div>
+            </div>
+          )}
+        </Show>
+
+        <div class="flex flex-col gap-2">
+          <div class="text-12-regular text-text-weak">Raw messages</div>
+          <Accordion multiple>
+            <For each={props.messages()}>{(message) => <RawMessage message={message} />}</For>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,212 @@
+import { createMemo, createResource, Show } from "solid-js"
+import { A, useNavigate, useParams } from "@solidjs/router"
+import { useLayout } from "@/context/layout"
+import { useCommand } from "@/context/command"
+import { useServer } from "@/context/server"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useSync } from "@/context/sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { getFilename } from "@opencode-ai/util/path"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { iife } from "@opencode-ai/util/iife"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Button } from "@opencode-ai/ui/button"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { Select } from "@opencode-ai/ui/select"
+import { Popover } from "@opencode-ai/ui/popover"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { DialogSelectServer } from "@/components/dialog-select-server"
+import { SessionLspIndicator } from "@/components/session-lsp-indicator"
+import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
+import type { Session } from "@opencode-ai/sdk/v2/client"
+
+export function SessionHeader() {
+  const globalSDK = useGlobalSDK()
+  const layout = useLayout()
+  const params = useParams()
+  const navigate = useNavigate()
+  const command = useCommand()
+  const server = useServer()
+  const dialog = useDialog()
+  const sync = useSync()
+
+  const sessions = createMemo(() => (sync.data.session ?? []).filter((s) => !s.parentID))
+  const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
+  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+  const branch = createMemo(() => sync.data.vcs?.branch)
+
+  function navigateToProject(directory: string) {
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  function navigateToSession(session: Session | undefined) {
+    if (!session) return
+    navigate(`/${params.dir}/session/${session.id}`)
+  }
+
+  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={layout.mobileSidebar.toggle}
+      >
+        <Icon name="menu" size="small" />
+      </button>
+      <div class="px-4 flex items-center justify-between gap-4 w-full">
+        <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={sync.directory}
+                label={(x) => {
+                  const name = getFilename(x)
+                  const b = x === sync.directory ? branch() : undefined
+                  return b ? `${name}:${b}` : name
+                }}
+                onSelect={(x) => (x ? 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={navigateToSession}
+              class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
+              variant="ghost"
+            />
+          </div>
+          <Show when={currentSession()}>
+            <TooltipKeybind class="hidden xl:block" title="New session" keybind={command.keybind("session.new")}>
+              <IconButton as={A} href={`/${params.dir}/session`} icon="edit-small-2" variant="ghost" />
+            </TooltipKeybind>
+          </Show>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="hidden md:flex items-center gap-1">
+            <Button
+              size="small"
+              variant="ghost"
+              onClick={() => {
+                dialog.show(() => <DialogSelectServer />)
+              }}
+            >
+              <div
+                classList={{
+                  "size-1.5 rounded-full": true,
+                  "bg-icon-success-base": server.healthy() === true,
+                  "bg-icon-critical-base": server.healthy() === false,
+                  "bg-border-weak-base": server.healthy() === undefined,
+                }}
+              />
+              <Icon name="server" size="small" class="text-icon-weak" />
+              <span class="text-12-regular text-text-weak truncate max-w-[200px]">{server.name}</span>
+            </Button>
+            <SessionLspIndicator />
+            <SessionMcpIndicator />
+          </div>
+          <div class="flex items-center gap-1">
+            <Show when={currentSession()?.summary?.files}>
+              <TooltipKeybind
+                class="hidden md:block shrink-0"
+                title="Toggle review"
+                keybind={command.keybind("review.toggle")}
+              >
+                <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>
+              </TooltipKeybind>
+            </Show>
+            <TooltipKeybind
+              class="hidden md:block shrink-0"
+              title="Toggle terminal"
+              keybind={command.keybind("terminal.toggle")}
+            >
+              <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>
+            </TooltipKeybind>
+          </div>
+          <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: sync.directory })
+                        .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>
+      </div>
+    </header>
+  )
+}

packages/app/src/components/session/session-new-view.tsx

@@ -0,0 +1,35 @@
+import { Show } from "solid-js"
+import { DateTime } from "luxon"
+import { useSync } from "@/context/sync"
+import { Icon } from "@opencode-ai/ui/icon"
+import { getDirectory, getFilename } from "@opencode-ai/util/path"
+
+export function NewSessionView() {
+  const sync = useSync()
+
+  return (
+    <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>
+  )
+}

packages/app/src/components/session/session-sortable-tab.tsx

@@ -0,0 +1,48 @@
+import { createMemo, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { getFilename } from "@opencode-ai/util/path"
+import { useFile } from "@/context/file"
+
+export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
+  return (
+    <div class="flex items-center gap-x-1.5">
+      <FileIcon
+        node={{ path: props.path, type: "file" }}
+        classList={{
+          "grayscale-100 group-data-[selected]/tab:grayscale-0": !props.active,
+          "grayscale-0": props.active,
+        }}
+      />
+      <span class="text-14-medium">{getFilename(props.path)}</span>
+    </div>
+  )
+}
+
+export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
+  const file = useFile()
+  const sortable = createSortable(props.tab)
+  const path = createMemo(() => file.pathFromTab(props.tab))
+  return (
+    // @ts-ignore
+    <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
+      <div class="relative h-full">
+        <Tabs.Trigger
+          value={props.tab}
+          closeButton={
+            <Tooltip value="Close tab" placement="bottom">
+              <IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} />
+            </Tooltip>
+          }
+          hideCloseButton
+        >
+          <Show when={path()}>{(p) => <FileVisual path={p()} />}</Show>
+        </Tabs.Trigger>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/session/session-sortable-terminal-tab.tsx

@@ -0,0 +1,27 @@
+import type { JSX } from "solid-js"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+
+export function SortableTerminalTab(props: { terminal: LocalPTY }): JSX.Element {
+  const terminal = useTerminal()
+  const sortable = createSortable(props.terminal.id)
+  return (
+    // @ts-ignore
+    <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
+      <div class="relative h-full">
+        <Tabs.Trigger
+          value={props.terminal.id}
+          closeButton={
+            terminal.all().length > 1 && (
+              <IconButton icon="close" variant="ghost" onClick={() => terminal.close(props.terminal.id)} />
+            )
+          }
+        >
+          {props.terminal.title}
+        </Tabs.Trigger>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/terminal.tsx

@@ -0,0 +1,243 @@
+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 ?? {}),
+        "select-text": true,
+        "size-full px-6 py-3 font-mono": true,
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    />
+  )
+}

packages/app/src/context/command.tsx

@@ -0,0 +1,262 @@
+import { createMemo, createSignal, onCleanup, onMount, Show, type Accessor } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List } from "@opencode-ai/ui/list"
+
+const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
+
+export type KeybindConfig = string
+
+export interface Keybind {
+  key: string
+  ctrl: boolean
+  meta: boolean
+  shift: boolean
+  alt: boolean
+}
+
+export interface CommandOption {
+  id: string
+  title: string
+  description?: string
+  category?: string
+  keybind?: KeybindConfig
+  slash?: string
+  suggested?: boolean
+  disabled?: boolean
+  onSelect?: (source?: "palette" | "keybind" | "slash") => void
+  onHighlight?: () => (() => void) | void
+}
+
+export function parseKeybind(config: string): Keybind[] {
+  if (!config || config === "none") return []
+
+  return config.split(",").map((combo) => {
+    const parts = combo.trim().toLowerCase().split("+")
+    const keybind: Keybind = {
+      key: "",
+      ctrl: false,
+      meta: false,
+      shift: false,
+      alt: false,
+    }
+
+    for (const part of parts) {
+      switch (part) {
+        case "ctrl":
+        case "control":
+          keybind.ctrl = true
+          break
+        case "meta":
+        case "cmd":
+        case "command":
+          keybind.meta = true
+          break
+        case "mod":
+          if (IS_MAC) keybind.meta = true
+          else keybind.ctrl = true
+          break
+        case "alt":
+        case "option":
+          keybind.alt = true
+          break
+        case "shift":
+          keybind.shift = true
+          break
+        default:
+          keybind.key = part
+          break
+      }
+    }
+
+    return keybind
+  })
+}
+
+export function matchKeybind(keybinds: Keybind[], event: KeyboardEvent): boolean {
+  const eventKey = event.key.toLowerCase()
+
+  for (const kb of keybinds) {
+    const keyMatch = kb.key === eventKey
+    const ctrlMatch = kb.ctrl === (event.ctrlKey || false)
+    const metaMatch = kb.meta === (event.metaKey || false)
+    const shiftMatch = kb.shift === (event.shiftKey || false)
+    const altMatch = kb.alt === (event.altKey || false)
+
+    if (keyMatch && ctrlMatch && metaMatch && shiftMatch && altMatch) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export function formatKeybind(config: string): string {
+  if (!config || config === "none") return ""
+
+  const keybinds = parseKeybind(config)
+  if (keybinds.length === 0) return ""
+
+  const kb = keybinds[0]
+  const parts: string[] = []
+
+  if (kb.ctrl) parts.push(IS_MAC ? "⌃" : "Ctrl")
+  if (kb.alt) parts.push(IS_MAC ? "⌥" : "Alt")
+  if (kb.shift) parts.push(IS_MAC ? "⇧" : "Shift")
+  if (kb.meta) parts.push(IS_MAC ? "⌘" : "Meta")
+
+  if (kb.key) {
+    const displayKey = kb.key.length === 1 ? kb.key.toUpperCase() : kb.key.charAt(0).toUpperCase() + kb.key.slice(1)
+    parts.push(displayKey)
+  }
+
+  return IS_MAC ? parts.join("") : parts.join("+")
+}
+
+function DialogCommand(props: { options: CommandOption[] }) {
+  const dialog = useDialog()
+  let cleanup: (() => void) | void
+  let committed = false
+
+  const handleMove = (option: CommandOption | undefined) => {
+    cleanup?.()
+    cleanup = option?.onHighlight?.()
+  }
+
+  const handleSelect = (option: CommandOption | undefined) => {
+    if (option) {
+      committed = true
+      cleanup = undefined
+      dialog.close()
+      option.onSelect?.("palette")
+    }
+  }
+
+  onCleanup(() => {
+    if (!committed) {
+      cleanup?.()
+    }
+  })
+
+  return (
+    <Dialog title="Commands">
+      <List
+        search={{ placeholder: "Search commands", autofocus: true }}
+        emptyMessage="No commands found"
+        items={() => props.options.filter((x) => !x.id.startsWith("suggested.") || !x.disabled)}
+        key={(x) => x?.id}
+        filterKeys={["title", "description", "category"]}
+        groupBy={(x) => x.category ?? ""}
+        onMove={handleMove}
+        onSelect={handleSelect}
+      >
+        {(option) => (
+          <div class="w-full flex items-center justify-between gap-4">
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="text-14-regular text-text-strong whitespace-nowrap">{option.title}</span>
+              <Show when={option.description}>
+                <span class="text-14-regular text-text-weak truncate">{option.description}</span>
+              </Show>
+            </div>
+            <Show when={option.keybind}>
+              <span class="text-12-regular text-text-subtle shrink-0">{formatKeybind(option.keybind!)}</span>
+            </Show>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}
+
+export const { use: useCommand, provider: CommandProvider } = createSimpleContext({
+  name: "Command",
+  init: () => {
+    const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
+    const [suspendCount, setSuspendCount] = createSignal(0)
+    const dialog = useDialog()
+
+    const options = createMemo(() => {
+      const all = registrations().flatMap((x) => x())
+      const suggested = all.filter((x) => x.suggested && !x.disabled)
+      return [
+        ...suggested.map((x) => ({
+          ...x,
+          id: "suggested." + x.id,
+          category: "Suggested",
+        })),
+        ...all,
+      ]
+    })
+
+    const suspended = () => suspendCount() > 0
+
+    const showPalette = () => {
+      if (!dialog.active) {
+        dialog.show(() => <DialogCommand options={options().filter((x) => !x.disabled)} />)
+      }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (suspended()) return
+
+      const paletteKeybinds = parseKeybind("mod+shift+p")
+      if (matchKeybind(paletteKeybinds, event)) {
+        event.preventDefault()
+        showPalette()
+        return
+      }
+
+      for (const option of options()) {
+        if (option.disabled) continue
+        if (!option.keybind) continue
+
+        const keybinds = parseKeybind(option.keybind)
+        if (matchKeybind(keybinds, event)) {
+          event.preventDefault()
+          option.onSelect?.("keybind")
+          return
+        }
+      }
+    }
+
+    onMount(() => {
+      document.addEventListener("keydown", handleKeyDown)
+    })
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKeyDown)
+    })
+
+    return {
+      register(cb: () => CommandOption[]) {
+        const results = createMemo(cb)
+        setRegistrations((arr) => [results, ...arr])
+        onCleanup(() => {
+          setRegistrations((arr) => arr.filter((x) => x !== results))
+        })
+      },
+      trigger(id: string, source?: "palette" | "keybind" | "slash") {
+        for (const option of options()) {
+          if (option.id === id || option.id === "suggested." + id) {
+            option.onSelect?.(source)
+            return
+          }
+        }
+      },
+      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))
+      },
+      suspended,
+      get options() {
+        return options()
+      },
+    }
+  },
+})

packages/app/src/context/file.tsx

@@ -0,0 +1,282 @@
+import { createMemo, onCleanup } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import type { FileContent } from "@opencode-ai/sdk/v2"
+import { showToast } from "@opencode-ai/ui/toast"
+import { useParams } from "@solidjs/router"
+import { getFilename } from "@opencode-ai/util/path"
+import { useSDK } from "./sdk"
+import { useSync } from "./sync"
+import { persisted } from "@/utils/persist"
+
+export type FileSelection = {
+  startLine: number
+  startChar: number
+  endLine: number
+  endChar: number
+}
+
+export type SelectedLineRange = {
+  start: number
+  end: number
+  side?: "additions" | "deletions"
+  endSide?: "additions" | "deletions"
+}
+
+export type FileViewState = {
+  scrollTop?: number
+  scrollLeft?: number
+  selectedLines?: SelectedLineRange | null
+}
+
+export type FileState = {
+  path: string
+  name: string
+  loaded?: boolean
+  loading?: boolean
+  error?: string
+  content?: FileContent
+}
+
+function stripFileProtocol(input: string) {
+  if (!input.startsWith("file://")) return input
+  return input.slice("file://".length)
+}
+
+function stripQueryAndHash(input: string) {
+  const hashIndex = input.indexOf("#")
+  const queryIndex = input.indexOf("?")
+
+  if (hashIndex !== -1 && queryIndex !== -1) {
+    return input.slice(0, Math.min(hashIndex, queryIndex))
+  }
+
+  if (hashIndex !== -1) return input.slice(0, hashIndex)
+  if (queryIndex !== -1) return input.slice(0, queryIndex)
+  return input
+}
+
+export function selectionFromLines(range: SelectedLineRange): FileSelection {
+  const startLine = Math.min(range.start, range.end)
+  const endLine = Math.max(range.start, range.end)
+  return {
+    startLine,
+    endLine,
+    startChar: 0,
+    endChar: 0,
+  }
+}
+
+function normalizeSelectedLines(range: SelectedLineRange): SelectedLineRange {
+  if (range.start <= range.end) return range
+
+  const startSide = range.side
+  const endSide = range.endSide ?? startSide
+
+  return {
+    ...range,
+    start: range.end,
+    end: range.start,
+    side: endSide,
+    endSide: startSide !== endSide ? startSide : undefined,
+  }
+}
+
+export const { use: useFile, provider: FileProvider } = createSimpleContext({
+  name: "File",
+  init: () => {
+    const sdk = useSDK()
+    const sync = useSync()
+    const params = useParams()
+
+    const directory = createMemo(() => sync.data.path.directory)
+
+    function normalize(input: string) {
+      const root = directory()
+      const prefix = root.endsWith("/") ? root : root + "/"
+
+      let path = stripQueryAndHash(stripFileProtocol(input))
+
+      if (path.startsWith(prefix)) {
+        path = path.slice(prefix.length)
+      }
+
+      if (path.startsWith(root)) {
+        path = path.slice(root.length)
+      }
+
+      if (path.startsWith("./")) {
+        path = path.slice(2)
+      }
+
+      if (path.startsWith("/")) {
+        path = path.slice(1)
+      }
+
+      return path
+    }
+
+    function tab(input: string) {
+      const path = normalize(input)
+      return `file://${path}`
+    }
+
+    function pathFromTab(tabValue: string) {
+      if (!tabValue.startsWith("file://")) return
+      return normalize(tabValue)
+    }
+
+    const inflight = new Map<string, Promise<void>>()
+
+    const [store, setStore] = createStore<{
+      file: Record<string, FileState>
+    }>({
+      file: {},
+    })
+
+    const viewKey = createMemo(() => `${params.dir}/file${params.id ? "/" + params.id : ""}.v1`)
+
+    const [view, setView, _, ready] = persisted(
+      viewKey(),
+      createStore<{
+        file: Record<string, FileViewState>
+      }>({
+        file: {},
+      }),
+    )
+
+    function ensure(path: string) {
+      if (!path) return
+      if (store.file[path]) return
+      setStore("file", path, { path, name: getFilename(path) })
+    }
+
+    function load(input: string, options?: { force?: boolean }) {
+      const path = normalize(input)
+      if (!path) return Promise.resolve()
+
+      ensure(path)
+
+      const current = store.file[path]
+      if (!options?.force && current?.loaded) return Promise.resolve()
+
+      const pending = inflight.get(path)
+      if (pending) return pending
+
+      setStore(
+        "file",
+        path,
+        produce((draft) => {
+          draft.loading = true
+          draft.error = undefined
+        }),
+      )
+
+      const promise = sdk.client.file
+        .read({ path })
+        .then((x) => {
+          setStore(
+            "file",
+            path,
+            produce((draft) => {
+              draft.loaded = true
+              draft.loading = false
+              draft.content = x.data
+            }),
+          )
+        })
+        .catch((e) => {
+          setStore(
+            "file",
+            path,
+            produce((draft) => {
+              draft.loading = false
+              draft.error = e.message
+            }),
+          )
+          showToast({
+            variant: "error",
+            title: "Failed to load file",
+            description: e.message,
+          })
+        })
+        .finally(() => {
+          inflight.delete(path)
+        })
+
+      inflight.set(path, promise)
+      return promise
+    }
+
+    const stop = sdk.event.listen((e) => {
+      const event = e.details
+      if (event.type !== "file.watcher.updated") return
+      const path = normalize(event.properties.file)
+      if (!path) return
+      if (path.startsWith(".git/")) return
+      if (!store.file[path]) return
+      load(path, { force: true })
+    })
+
+    const get = (input: string) => store.file[normalize(input)]
+
+    const scrollTop = (input: string) => view.file[normalize(input)]?.scrollTop
+    const scrollLeft = (input: string) => view.file[normalize(input)]?.scrollLeft
+    const selectedLines = (input: string) => view.file[normalize(input)]?.selectedLines
+
+    const setScrollTop = (input: string, top: number) => {
+      const path = normalize(input)
+      setView("file", path, (current) => {
+        if (current?.scrollTop === top) return current
+        return {
+          ...(current ?? {}),
+          scrollTop: top,
+        }
+      })
+    }
+
+    const setScrollLeft = (input: string, left: number) => {
+      const path = normalize(input)
+      setView("file", path, (current) => {
+        if (current?.scrollLeft === left) return current
+        return {
+          ...(current ?? {}),
+          scrollLeft: left,
+        }
+      })
+    }
+
+    const setSelectedLines = (input: string, range: SelectedLineRange | null) => {
+      const path = normalize(input)
+      const next = range ? normalizeSelectedLines(range) : null
+      setView("file", path, (current) => {
+        if (current?.selectedLines === next) return current
+        return {
+          ...(current ?? {}),
+          selectedLines: next,
+        }
+      })
+    }
+
+    onCleanup(() => stop())
+
+    return {
+      ready,
+      normalize,
+      tab,
+      pathFromTab,
+      get,
+      load,
+      scrollTop,
+      scrollLeft,
+      setScrollTop,
+      setScrollLeft,
+      selectedLines,
+      setSelectedLines,
+      searchFiles: (query: string) =>
+        sdk.client.find.files({ query, dirs: "false" }).then((x) => (x.data ?? []).map(normalize)),
+      searchFilesAndDirectories: (query: string) =>
+        sdk.client.find.files({ query, dirs: "true" }).then((x) => (x.data ?? []).map(normalize)),
+    }
+  },
+})

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

@@ -2,31 +2,40 @@ 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"
+import { useServer } from "./server"
 
 export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
   name: "GlobalSDK",
-  init: (props: { url: string }) => {
+  init: () => {
+    const server = useServer()
     const abort = new AbortController()
-    const sdk = createOpencodeClient({
-      baseUrl: props.url,
+
+    const eventSdk = createOpencodeClient({
+      baseUrl: server.url,
       signal: abort.signal,
     })
-
     const emitter = createGlobalEmitter<{
       [key: string]: Event
     }>()
 
-    sdk.global.event().then(async (events) => {
+    void (async () => {
+      const events = await eventSdk.global.event()
       for await (const event of events.stream) {
-        // console.log("event", event)
         emitter.emit(event.directory ?? "global", event.payload)
       }
+    })().catch(() => undefined)
+
+    onCleanup(() => abort.abort())
+
+    const platform = usePlatform()
+    const sdk = createOpencodeClient({
+      baseUrl: server.url,
+      signal: AbortSignal.timeout(1000 * 60 * 10),
+      fetch: platform.fetch,
+      throwOnError: true,
     })
 
-    onCleanup(() => {
-      abort.abort()
-    })
-
-    return { url: props.url, client: sdk, event: emitter }
+    return { url: server.url, client: sdk, event: emitter }
   },
 })

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

@@ -0,0 +1,501 @@
+import {
+  type Message,
+  type Agent,
+  type Session,
+  type Part,
+  type Config,
+  type Path,
+  type Project,
+  type FileDiff,
+  type Todo,
+  type SessionStatus,
+  type ProviderListResponse,
+  type ProviderAuthResponse,
+  type Command,
+  type McpStatus,
+  type LspStatus,
+  type VcsInfo,
+  type PermissionRequest,
+  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 { batch, 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 = {
+  status: "loading" | "partial" | "complete"
+  agent: Agent[]
+  command: Command[]
+  project: string
+  provider: ProviderListResponse
+  config: Config
+  path: Path
+  session: Session[]
+  session_status: {
+    [sessionID: string]: SessionStatus
+  }
+  session_diff: {
+    [sessionID: string]: FileDiff[]
+  }
+  todo: {
+    [sessionID: string]: Todo[]
+  }
+  permission: {
+    [sessionID: string]: PermissionRequest[]
+  }
+  mcp: {
+    [name: string]: McpStatus
+  }
+  lsp: LspStatus[]
+  vcs: VcsInfo | undefined
+  limit: number
+  message: {
+    [sessionID: string]: Message[]
+  }
+  part: {
+    [messageID: string]: Part[]
+  }
+}
+
+function createGlobalSync() {
+  const globalSDK = useGlobalSDK()
+  const [globalStore, setGlobalStore] = createStore<{
+    ready: boolean
+    error?: InitError
+    path: Path
+    project: Project[]
+    provider: ProviderListResponse
+    provider_auth: ProviderAuthResponse
+  }>({
+    ready: false,
+    path: { state: "", config: "", worktree: "", directory: "", home: "" },
+    project: [],
+    provider: { all: [], connected: [], default: {} },
+    provider_auth: {},
+  })
+
+  const children: Record<string, ReturnType<typeof createStore<State>>> = {}
+  function child(directory: string) {
+    if (!directory) console.error("No directory provided")
+    if (!children[directory]) {
+      children[directory] = createStore<State>({
+        project: "",
+        provider: { all: [], connected: [], default: {} },
+        config: {},
+        path: { state: "", config: "", worktree: "", directory: "", home: "" },
+        status: "loading" as const,
+        agent: [],
+        command: [],
+        session: [],
+        session_status: {},
+        session_diff: {},
+        todo: {},
+        permission: {},
+        mcp: {},
+        lsp: [],
+        vcs: undefined,
+        limit: 5,
+        message: {},
+        part: {},
+      })
+      bootstrapInstance(directory)
+    }
+    return children[directory]
+  }
+
+  async function loadSessions(directory: string) {
+    const [store, setStore] = child(directory)
+    globalSDK.client.session
+      .list({ directory })
+      .then((x) => {
+        const fourHoursAgo = Date.now() - 4 * 60 * 60 * 1000
+        const nonArchived = (x.data ?? [])
+          .filter((s) => !!s?.id)
+          .filter((s) => !s.time?.archived)
+          .slice()
+          .sort((a, b) => a.id.localeCompare(b.id))
+        // 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 ?? s.time?.created).getTime()
+          return updated > fourHoursAgo
+        })
+        setStore("session", reconcile(sessions, { key: "id" }))
+      })
+      .catch((err) => {
+        console.error("Failed to load sessions", 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 [store, setStore] = child(directory)
+    const sdk = createOpencodeClient({
+      baseUrl: globalSDK.url,
+      directory,
+      throwOnError: true,
+    })
+
+    const blockingRequests = {
+      project: () => sdk.project.current().then((x) => setStore("project", x.data!.id)),
+      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"),
+              ),
+            })),
+          })
+        }),
+      agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
+      config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
+    }
+    await Promise.all(Object.values(blockingRequests).map((p) => retry(p).catch((e) => setGlobalStore("error", e))))
+      .then(() => {
+        if (store.status !== "complete") setStore("status", "partial")
+        // non-blocking
+        Promise.all([
+          sdk.path.get().then((x) => setStore("path", x.data!)),
+          sdk.command.list().then((x) => setStore("command", x.data ?? [])),
+          sdk.session.status().then((x) => setStore("session_status", x.data!)),
+          loadSessions(directory),
+          sdk.mcp.status().then((x) => setStore("mcp", x.data!)),
+          sdk.lsp.status().then((x) => setStore("lsp", x.data!)),
+          sdk.vcs.get().then((x) => setStore("vcs", x.data)),
+          sdk.permission.list().then((x) => {
+            const grouped: Record<string, PermissionRequest[]> = {}
+            for (const perm of x.data ?? []) {
+              if (!perm?.id || !perm.sessionID) continue
+              const existing = grouped[perm.sessionID]
+              if (existing) {
+                existing.push(perm)
+                continue
+              }
+              grouped[perm.sessionID] = [perm]
+            }
+
+            batch(() => {
+              for (const sessionID of Object.keys(store.permission)) {
+                if (grouped[sessionID]) continue
+                setStore("permission", sessionID, [])
+              }
+              for (const [sessionID, permissions] of Object.entries(grouped)) {
+                setStore(
+                  "permission",
+                  sessionID,
+                  reconcile(
+                    permissions
+                      .filter((p) => !!p?.id)
+                      .slice()
+                      .sort((a, b) => a.id.localeCompare(b.id)),
+                    { key: "id" },
+                  ),
+                )
+              }
+            })
+          }),
+        ]).then(() => {
+          setStore("status", "complete")
+        })
+      })
+      .catch((e) => setGlobalStore("error", e))
+  }
+
+  globalSDK.event.listen((e) => {
+    const directory = e.name
+    const event = e.details
+
+    if (directory === "global") {
+      switch (event?.type) {
+        case "global.disposed": {
+          bootstrap()
+          break
+        }
+        case "project.updated": {
+          const result = Binary.search(globalStore.project, event.properties.id, (s) => s.id)
+          if (result.found) {
+            setGlobalStore("project", result.index, reconcile(event.properties))
+            return
+          }
+          setGlobalStore(
+            "project",
+            produce((draft) => {
+              draft.splice(result.index, 0, event.properties)
+            }),
+          )
+          break
+        }
+      }
+      return
+    }
+
+    const [store, setStore] = child(directory)
+    switch (event.type) {
+      case "server.instance.disposed": {
+        bootstrapInstance(directory)
+        break
+      }
+      case "session.updated": {
+        const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
+        if (event.properties.info.time.archived) {
+          if (result.found) {
+            setStore(
+              "session",
+              produce((draft) => {
+                draft.splice(result.index, 1)
+              }),
+            )
+          }
+          break
+        }
+        if (result.found) {
+          setStore("session", result.index, reconcile(event.properties.info))
+          break
+        }
+        setStore(
+          "session",
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties.info)
+          }),
+        )
+        break
+      }
+      case "session.diff":
+        setStore("session_diff", event.properties.sessionID, reconcile(event.properties.diff, { key: "file" }))
+        break
+      case "todo.updated":
+        setStore("todo", event.properties.sessionID, reconcile(event.properties.todos, { key: "id" }))
+        break
+      case "session.status": {
+        setStore("session_status", event.properties.sessionID, reconcile(event.properties.status))
+        break
+      }
+      case "message.updated": {
+        const messages = store.message[event.properties.info.sessionID]
+        if (!messages) {
+          setStore("message", event.properties.info.sessionID, [event.properties.info])
+          break
+        }
+        const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
+        if (result.found) {
+          setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
+          break
+        }
+        setStore(
+          "message",
+          event.properties.info.sessionID,
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties.info)
+          }),
+        )
+        break
+      }
+      case "message.removed": {
+        const messages = store.message[event.properties.sessionID]
+        if (!messages) break
+        const result = Binary.search(messages, event.properties.messageID, (m) => m.id)
+        if (result.found) {
+          setStore(
+            "message",
+            event.properties.sessionID,
+            produce((draft) => {
+              draft.splice(result.index, 1)
+            }),
+          )
+        }
+        break
+      }
+      case "message.part.updated": {
+        const part = event.properties.part
+        const parts = store.part[part.messageID]
+        if (!parts) {
+          setStore("part", part.messageID, [part])
+          break
+        }
+        const result = Binary.search(parts, part.id, (p) => p.id)
+        if (result.found) {
+          setStore("part", part.messageID, result.index, reconcile(part))
+          break
+        }
+        setStore(
+          "part",
+          part.messageID,
+          produce((draft) => {
+            draft.splice(result.index, 0, part)
+          }),
+        )
+        break
+      }
+      case "message.part.removed": {
+        const parts = store.part[event.properties.messageID]
+        if (!parts) break
+        const result = Binary.search(parts, event.properties.partID, (p) => p.id)
+        if (result.found) {
+          setStore(
+            "part",
+            event.properties.messageID,
+            produce((draft) => {
+              draft.splice(result.index, 1)
+            }),
+          )
+        }
+        break
+      }
+      case "vcs.branch.updated": {
+        setStore("vcs", { branch: event.properties.branch })
+        break
+      }
+      case "permission.asked": {
+        const sessionID = event.properties.sessionID
+        const permissions = store.permission[sessionID]
+        if (!permissions) {
+          setStore("permission", sessionID, [event.properties])
+          break
+        }
+
+        const result = Binary.search(permissions, event.properties.id, (p) => p.id)
+        if (result.found) {
+          setStore("permission", sessionID, result.index, reconcile(event.properties))
+          break
+        }
+
+        setStore(
+          "permission",
+          sessionID,
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties)
+          }),
+        )
+        break
+      }
+      case "permission.replied": {
+        const permissions = store.permission[event.properties.sessionID]
+        if (!permissions) break
+        const result = Binary.search(permissions, event.properties.requestID, (p) => p.id)
+        if (!result.found) break
+        setStore(
+          "permission",
+          event.properties.sessionID,
+          produce((draft) => {
+            draft.splice(result.index, 1)
+          }),
+        )
+        break
+      }
+      case "lsp.updated": {
+        const sdk = createOpencodeClient({
+          baseUrl: globalSDK.url,
+          directory,
+          throwOnError: true,
+        })
+        sdk.lsp.status().then((x) => setStore("lsp", x.data ?? []))
+        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([
+      retry(() =>
+        globalSDK.client.path.get().then((x) => {
+          setGlobalStore("path", x.data!)
+        }),
+      ),
+      retry(() =>
+        globalSDK.client.project.list().then(async (x) => {
+          const projects = (x.data ?? [])
+            .filter((p) => !!p?.id)
+            .filter((p) => !!p.worktree && !p.worktree.includes("opencode-test"))
+            .slice()
+            .sort((a, b) => a.id.localeCompare(b.id))
+          setGlobalStore("project", projects)
+        }),
+      ),
+      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))
+  }
+
+  onMount(() => {
+    bootstrap()
+  })
+
+  return {
+    data: globalStore,
+    get ready() {
+      return globalStore.ready
+    },
+    get error() {
+      return globalStore.error
+    },
+    child,
+    bootstrap,
+    project: {
+      loadSessions,
+    },
+  }
+}
+
+const GlobalSyncContext = createContext<ReturnType<typeof createGlobalSync>>()
+
+export function GlobalSyncProvider(props: ParentProps) {
+  const value = createGlobalSync()
+  return (
+    <Switch>
+      <Match when={value.error}>
+        <ErrorPage error={value.error} />
+      </Match>
+      <Match when={value.ready}>
+        <GlobalSyncContext.Provider value={value}>{props.children}</GlobalSyncContext.Provider>
+      </Match>
+    </Switch>
+  )
+}
+
+export function useGlobalSync() {
+  const context = useContext(GlobalSyncContext)
+  if (!context) throw new Error("useGlobalSync must be used within GlobalSyncProvider")
+  return context
+}

packages/app/src/context/layout.tsx

@@ -0,0 +1,346 @@
+import { createStore, produce } from "solid-js/store"
+import { batch, createMemo, onMount } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { useGlobalSync } from "./global-sync"
+import { useGlobalSDK } from "./global-sdk"
+import { useServer } from "./server"
+import { Project } from "@opencode-ai/sdk/v2"
+import { persisted } from "@/utils/persist"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+export type AvatarColorKey = (typeof AVATAR_COLOR_KEYS)[number]
+
+export function getAvatarColors(key?: string) {
+  if (key && AVATAR_COLOR_KEYS.includes(key as AvatarColorKey)) {
+    return {
+      background: `var(--avatar-background-${key})`,
+      foreground: `var(--avatar-text-${key})`,
+    }
+  }
+  return {
+    background: "var(--surface-info-base)",
+    foreground: "var(--text-base)",
+  }
+}
+
+function same<T>(a: readonly T[] | undefined, b: readonly T[] | undefined) {
+  if (a === b) return true
+  if (!a || !b) return false
+  if (a.length !== b.length) return false
+  return a.every((x, i) => x === b[i])
+}
+
+type SessionTabs = {
+  active?: string
+  all: string[]
+}
+
+type SessionScroll = {
+  x: number
+  y: number
+}
+
+type SessionView = {
+  scroll: Record<string, SessionScroll>
+  reviewOpen?: string[]
+}
+
+export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
+
+export type ReviewDiffStyle = "unified" | "split"
+
+export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
+  name: "Layout",
+  init: () => {
+    const globalSdk = useGlobalSDK()
+    const globalSync = useGlobalSync()
+    const server = useServer()
+    const [store, setStore, _, ready] = persisted(
+      "layout.v6",
+      createStore({
+        sidebar: {
+          opened: false,
+          width: 280,
+        },
+        terminal: {
+          opened: false,
+          height: 280,
+        },
+        review: {
+          opened: true,
+          diffStyle: "split" as ReviewDiffStyle,
+        },
+        session: {
+          width: 600,
+        },
+        mobileSidebar: {
+          opened: false,
+        },
+        sessionTabs: {} as Record<string, SessionTabs>,
+        sessionView: {} as Record<string, SessionView>,
+      }),
+    )
+
+    const usedColors = new Set<AvatarColorKey>()
+
+    function pickAvailableColor(): AvatarColorKey {
+      const available = AVATAR_COLOR_KEYS.filter((c) => !usedColors.has(c))
+      if (available.length === 0) return AVATAR_COLOR_KEYS[Math.floor(Math.random() * AVATAR_COLOR_KEYS.length)]
+      return available[Math.floor(Math.random() * available.length)]
+    }
+
+    function enrich(project: { worktree: string; expanded: boolean }) {
+      const metadata = globalSync.data.project.find((x) => x.worktree === project.worktree)
+      return [
+        {
+          ...project,
+          ...(metadata ?? {}),
+          icon: { url: metadata?.icon?.url, color: metadata?.icon?.color },
+        },
+      ]
+    }
+
+    function colorize(project: LocalProject) {
+      if (project.icon?.color) return project
+      const color = pickAvailableColor()
+      usedColors.add(color)
+      project.icon = { ...project.icon, color }
+      if (project.id) {
+        globalSdk.client.project.update({ projectID: project.id, icon: { color } })
+      }
+      return project
+    }
+
+    const enriched = createMemo(() => server.projects.list().flatMap(enrich))
+    const list = createMemo(() => enriched().flatMap(colorize))
+
+    onMount(() => {
+      Promise.all(
+        server.projects.list().map((project) => {
+          return globalSync.project.loadSessions(project.worktree)
+        }),
+      )
+    })
+
+    return {
+      ready,
+      projects: {
+        list,
+        open(directory: string) {
+          if (server.projects.list().find((x) => x.worktree === directory)) {
+            return
+          }
+          globalSync.project.loadSessions(directory)
+          server.projects.open(directory)
+        },
+        close(directory: string) {
+          server.projects.close(directory)
+        },
+        expand(directory: string) {
+          server.projects.expand(directory)
+        },
+        collapse(directory: string) {
+          server.projects.collapse(directory)
+        },
+        move(directory: string, toIndex: number) {
+          server.projects.move(directory, toIndex)
+        },
+      },
+      sidebar: {
+        opened: createMemo(() => store.sidebar.opened),
+        open() {
+          setStore("sidebar", "opened", true)
+        },
+        close() {
+          setStore("sidebar", "opened", false)
+        },
+        toggle() {
+          setStore("sidebar", "opened", (x) => !x)
+        },
+        width: createMemo(() => store.sidebar.width),
+        resize(width: number) {
+          setStore("sidebar", "width", width)
+        },
+      },
+      terminal: {
+        opened: createMemo(() => store.terminal.opened),
+        open() {
+          setStore("terminal", "opened", true)
+        },
+        close() {
+          setStore("terminal", "opened", false)
+        },
+        toggle() {
+          setStore("terminal", "opened", (x) => !x)
+        },
+        height: createMemo(() => store.terminal.height),
+        resize(height: number) {
+          setStore("terminal", "height", height)
+        },
+      },
+      review: {
+        opened: createMemo(() => store.review?.opened ?? true),
+        diffStyle: createMemo(() => store.review?.diffStyle ?? "split"),
+        setDiffStyle(diffStyle: ReviewDiffStyle) {
+          if (!store.review) {
+            setStore("review", { opened: true, diffStyle })
+            return
+          }
+          setStore("review", "diffStyle", diffStyle)
+        },
+        open() {
+          setStore("review", "opened", true)
+        },
+        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 })
+            return
+          }
+          setStore("session", "width", width)
+        },
+      },
+      mobileSidebar: {
+        opened: createMemo(() => store.mobileSidebar?.opened ?? false),
+        show() {
+          setStore("mobileSidebar", "opened", true)
+        },
+        hide() {
+          setStore("mobileSidebar", "opened", false)
+        },
+        toggle() {
+          setStore("mobileSidebar", "opened", (x) => !x)
+        },
+      },
+      view(sessionKey: string) {
+        const s = createMemo(() => store.sessionView[sessionKey] ?? { scroll: {} })
+        return {
+          scroll(tab: string) {
+            return s().scroll?.[tab]
+          },
+          setScroll(tab: string, pos: SessionScroll) {
+            const current = store.sessionView[sessionKey]
+            if (!current) {
+              setStore("sessionView", sessionKey, { scroll: { [tab]: pos } })
+              return
+            }
+
+            const prev = current.scroll?.[tab]
+            if (prev?.x === pos.x && prev?.y === pos.y) return
+            setStore("sessionView", sessionKey, "scroll", tab, pos)
+          },
+          review: {
+            open: createMemo(() => s().reviewOpen),
+            setOpen(open: string[]) {
+              const current = store.sessionView[sessionKey]
+              if (!current) {
+                setStore("sessionView", sessionKey, { scroll: {}, reviewOpen: open })
+                return
+              }
+
+              if (same(current.reviewOpen, open)) return
+              setStore("sessionView", sessionKey, "reviewOpen", open)
+            },
+          },
+        }
+      },
+      tabs(sessionKey: string) {
+        const tabs = createMemo(() => store.sessionTabs[sessionKey] ?? { all: [] })
+        return {
+          tabs,
+          active: createMemo(() => tabs().active),
+          all: createMemo(() => tabs().all),
+          setActive(tab: string | undefined) {
+            if (!store.sessionTabs[sessionKey]) {
+              setStore("sessionTabs", sessionKey, { all: [], active: tab })
+            } else {
+              setStore("sessionTabs", sessionKey, "active", tab)
+            }
+          },
+          setAll(all: string[]) {
+            if (!store.sessionTabs[sessionKey]) {
+              setStore("sessionTabs", sessionKey, { all, active: undefined })
+            } else {
+              setStore("sessionTabs", sessionKey, "all", all)
+            }
+          },
+          async open(tab: string) {
+            const current = store.sessionTabs[sessionKey] ?? { all: [] }
+
+            if (tab === "review") {
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all: [], active: tab })
+                return
+              }
+              setStore("sessionTabs", sessionKey, "active", tab)
+              return
+            }
+
+            if (tab === "context") {
+              const all = [tab, ...current.all.filter((x) => x !== tab)]
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all, active: tab })
+                return
+              }
+              setStore("sessionTabs", sessionKey, "all", all)
+              setStore("sessionTabs", sessionKey, "active", tab)
+              return
+            }
+
+            if (!current.all.includes(tab)) {
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all: [tab], active: tab })
+                return
+              }
+              setStore("sessionTabs", sessionKey, "all", [...current.all, tab])
+              setStore("sessionTabs", sessionKey, "active", tab)
+              return
+            }
+
+            if (!store.sessionTabs[sessionKey]) {
+              setStore("sessionTabs", sessionKey, { all: current.all, active: tab })
+              return
+            }
+            setStore("sessionTabs", sessionKey, "active", tab)
+          },
+          close(tab: string) {
+            const current = store.sessionTabs[sessionKey]
+            if (!current) return
+
+            const all = current.all.filter((x) => x !== tab)
+            batch(() => {
+              setStore("sessionTabs", sessionKey, "all", all)
+              if (current.active !== tab) return
+
+              const index = current.all.findIndex((f) => f === tab)
+              const next = all[index - 1] ?? all[0]
+              setStore("sessionTabs", sessionKey, "active", next)
+            })
+          },
+          move(tab: string, to: number) {
+            const current = store.sessionTabs[sessionKey]
+            if (!current) return
+            const index = current.all.findIndex((f) => f === tab)
+            if (index === -1) return
+            setStore(
+              "sessionTabs",
+              sessionKey,
+              "all",
+              produce((opened) => {
+                opened.splice(to, 0, opened.splice(index, 1)[0])
+              }),
+            )
+          },
+        }
+      },
+    }
+  },
+})

packages/app/src/context/local.tsx

@@ -1,12 +1,15 @@
 import { createStore, produce, reconcile } from "solid-js/store"
-import { batch, createEffect, createMemo } from "solid-js"
-import { uniqueBy } from "remeda"
+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"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
 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<{
@@ -59,44 +62,43 @@ 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"))
+      const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
       const [store, setStore] = createStore<{
-        current: string
+        current?: string
       }>({
-        current: list()[0].name,
+        current: list()[0]?.name,
       })
       return {
         list,
         current() {
-          return list().find((x) => x.name === store.current)!
+          const available = list()
+          if (available.length === 0) return undefined
+          return available.find((x) => x.name === store.current) ?? available[0]
         },
         set(name: string | undefined) {
-          setStore("current", name ?? list()[0].name)
+          const available = list()
+          if (available.length === 0) {
+            setStore("current", undefined)
+            return
+          }
+          if (name && available.some((x) => x.name === name)) {
+            setStore("current", name)
+            return
+          }
+          setStore("current", available[0].name)
         },
         move(direction: 1 | -1) {
-          let next = list().findIndex((x) => x.name === store.current) + direction
-          if (next < 0) next = list().length - 1
-          if (next >= list().length) next = 0
-          const value = list()[next]
+          const available = list()
+          if (available.length === 0) {
+            setStore("current", undefined)
+            return
+          }
+          let next = available.findIndex((x) => x.name === store.current) + direction
+          if (next < 0) next = available.length - 1
+          if (next >= available.length) next = 0
+          const value = available[next]
+          if (!value) return
           setStore("current", value.name)
           if (value.model)
             model.set({
@@ -108,30 +110,64 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     })()
 
     const model = (() => {
-      const [store, setStore] = createStore<{
+      const [store, setStore, _, modelReady] = persisted(
+        "model.v1",
+        createStore<{
+          user: (ModelKey & { visibility: "show" | "hide"; favorite?: boolean })[]
+          recent: ModelKey[]
+          variant?: Record<string, string | undefined>
+        }>({
+          user: [],
+          recent: [],
+          variant: {},
+        }),
+      )
+
+      const [ephemeral, setEphemeral] = createStore<{
         model: Record<string, ModelKey>
-        recent: ModelKey[]
       }>({
         model: {},
-        recent: [],
       })
 
-      const value = localStorage.getItem("model")
-      setStore("recent", JSON.parse(value ?? "[]"))
-      createEffect(() => {
-        localStorage.setItem("model", JSON.stringify(store.recent))
-      })
-
-      const list = createMemo(() =>
+      const available = createMemo(() =>
         providers.connected().flatMap((p) =>
           Object.values(p.models).map((m) => ({
             ...m,
-            name: m.name.replace("(latest)", "").trim(),
             provider: p,
-            latest: m.name.includes("(latest)"),
           })),
         ),
       )
+
+      const latest = createMemo(() =>
+        pipe(
+          available(),
+          filter((x) => Math.abs(DateTime.fromISO(x.release_date).diffNow().as("months")) < 6),
+          groupBy((x) => x.provider.id),
+          mapValues((models) =>
+            pipe(
+              models,
+              groupBy((x) => x.family),
+              values(),
+              (groups) =>
+                groups.flatMap((g) => {
+                  const first = firstBy(g, [(x) => x.release_date, "desc"])
+                  return first ? [{ modelID: first.id, providerID: first.provider.id }] : []
+                }),
+            ),
+          ),
+          values(),
+          flat(),
+        ),
+      )
+
+      const list = createMemo(() =>
+        available().map((m) => ({
+          ...m,
+          name: m.name.replace("(latest)", "").trim(),
+          latest: m.name.includes("(latest)"),
+        })),
+      )
+
       const find = (key: ModelKey) => list().find((m) => m.id === key?.modelID && m.provider.id === key.providerID)
 
       const fallbackModel = createMemo(() => {
@@ -163,13 +199,15 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         throw new Error("No default model found")
       })
 
-      const currentModel = createMemo(() => {
+      const current = createMemo(() => {
         const a = agent.current()
+        if (!a) return undefined
         const key = getFirstValidModel(
-          () => store.model[a.name],
+          () => ephemeral.model[a.name],
           () => a.model,
           fallbackModel,
-        )!
+        )
+        if (!key) return undefined
         return find(key)
       })
 
@@ -177,10 +215,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
 
       const cycle = (direction: 1 | -1) => {
         const recentList = recent()
-        const current = currentModel()
-        if (!current) return
+        const currentModel = current()
+        if (!currentModel) return
 
-        const index = recentList.findIndex((x) => x?.provider.id === current.provider.id && x?.id === current.id)
+        const index = recentList.findIndex(
+          (x) => x?.provider.id === currentModel.provider.id && x?.id === currentModel.id,
+        )
         if (index === -1) return
 
         let next = index + direction
@@ -196,14 +236,26 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         })
       }
 
+      function updateVisibility(model: ModelKey, visibility: "show" | "hide") {
+        const index = store.user.findIndex((x) => x.modelID === model.modelID && x.providerID === model.providerID)
+        if (index >= 0) {
+          setStore("user", index, { visibility })
+        } else {
+          setStore("user", store.user.length, { ...model, visibility })
+        }
+      }
+
       return {
-        current: currentModel,
+        ready: modelReady,
+        current,
         recent,
         list,
         cycle,
         set(model: ModelKey | undefined, options?: { recent?: boolean }) {
           batch(() => {
-            setStore("model", agent.current().name, model ?? fallbackModel())
+            const currentAgent = agent.current()
+            if (currentAgent) setEphemeral("model", currentAgent.name, model ?? fallbackModel())
+            if (model) updateVisibility(model, "show")
             if (options?.recent && model) {
               const uniq = uniqueBy([model, ...store.recent], (x) => x.providerID + x.modelID)
               if (uniq.length > 5) uniq.pop()
@@ -211,6 +263,56 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
             }
           })
         },
+        visible(model: ModelKey) {
+          const user = store.user.find((x) => x.modelID === model.modelID && x.providerID === model.providerID)
+          return (
+            user?.visibility !== "hide" &&
+            (latest().find((x) => x.modelID === model.modelID && x.providerID === model.providerID) ||
+              user?.visibility === "show")
+          )
+        },
+        setVisibility(model: ModelKey, visible: boolean) {
+          updateVisibility(model, visible ? "show" : "hide")
+        },
+        variant: {
+          current() {
+            const m = current()
+            if (!m) return undefined
+            const key = `${m.provider.id}/${m.id}`
+            return store.variant?.[key]
+          },
+          list() {
+            const m = current()
+            if (!m) return []
+            if (!m.variants) return []
+            return Object.keys(m.variants)
+          },
+          set(value: string | undefined) {
+            const m = current()
+            if (!m) return
+            const key = `${m.provider.id}/${m.id}`
+            if (!store.variant) {
+              setStore("variant", { [key]: value })
+            } else {
+              setStore("variant", key, value)
+            }
+          },
+          cycle() {
+            const variants = this.list()
+            if (variants.length === 0) return
+            const currentVariant = this.current()
+            if (!currentVariant) {
+              this.set(variants[0])
+              return
+            }
+            const index = variants.indexOf(currentVariant)
+            if (index === -1 || index === variants.length - 1) {
+              this.set(undefined)
+              return
+            }
+            this.set(variants[index + 1])
+          },
+        },
       }
     })()
 
@@ -218,11 +320,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))
@@ -250,16 +352,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, {
@@ -278,16 +380,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) => {
@@ -301,7 +413,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)
       }
 
@@ -318,25 +430,28 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         //   ]
         // })
         // setStore("active", relativePath)
-        context.addActive()
+        // 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!)
@@ -349,7 +464,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           case "file.watcher.updated":
             const relativePath = relative(event.properties.file)
             if (relativePath.startsWith(".git/")) return
-            load(relativePath)
+            if (store.node[relativePath]) load(relativePath)
             break
         }
       })
@@ -367,7 +482,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)
         },
@@ -407,8 +522,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) =>
@@ -423,66 +538,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     })()
 
-    const context = (() => {
-      const [store, setStore] = createStore<{
-        activeTab: boolean
-        files: string[]
-        activeFile?: string
-        items: (ContextItem & { key: string })[]
-      }>({
-        activeTab: true,
-        files: [],
-        items: [],
-      })
-      const files = createMemo(() => store.files.map((x) => file.node(x)))
-      const activeFile = createMemo(() => (store.activeFile ? file.node(store.activeFile) : undefined))
-
-      return {
-        all() {
-          return store.items
-        },
-        // active() {
-        //   return store.activeTab ? file.active() : undefined
-        // },
-        addActive() {
-          setStore("activeTab", true)
-        },
-        removeActive() {
-          setStore("activeTab", false)
-        },
-        add(item: ContextItem) {
-          let key = item.type
-          switch (item.type) {
-            case "file":
-              key += `${item.path}:${item.selection?.startLine}:${item.selection?.endLine}`
-              break
-          }
-          if (store.items.find((x) => x.key === key)) return
-          setStore("items", (x) => [...x, { key, ...item }])
-        },
-        remove(key: string) {
-          setStore("items", (x) => x.filter((x) => x.key !== key))
-        },
-        files,
-        openFile(path: string) {
-          file.init(path).then(() => {
-            setStore("files", (x) => [...x, path])
-            setStore("activeFile", path)
-          })
-        },
-        activeFile,
-        setActiveFile(path: string | undefined) {
-          setStore("activeFile", path)
-        },
-      }
-    })()
-
     const result = {
       slug: createMemo(() => base64Encode(sdk.directory)),
       model,
       agent,
       file,
-      context,
     }
     return result
   },

packages/app/src/context/notification.tsx

@@ -1,10 +1,15 @@
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { makePersisted } from "@solid-primitives/storage"
 import { useGlobalSDK } from "./global-sdk"
+import { useGlobalSync } from "./global-sync"
+import { usePlatform } from "@/context/platform"
+import { Binary } from "@opencode-ai/util/binary"
+import { base64Encode } from "@opencode-ai/util/encode"
 import { EventSessionError } from "@opencode-ai/sdk/v2"
 import { makeAudioPlayer } from "@solid-primitives/audio"
 import idleSound from "@opencode-ai/ui/audio/staplebops-01.aac"
+import errorSound from "@opencode-ai/ui/audio/nope-03.aac"
+import { persisted } from "@/utils/persist"
 
 type NotificationBase = {
   directory?: string
@@ -28,23 +33,27 @@ export type Notification = TurnCompleteNotification | ErrorNotification
 export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({
   name: "Notification",
   init: () => {
-    const idlePlayer = makeAudioPlayer(idleSound)
-    const globalSDK = useGlobalSDK()
+    let idlePlayer: ReturnType<typeof makeAudioPlayer> | undefined
+    let errorPlayer: ReturnType<typeof makeAudioPlayer> | undefined
 
-    const [store, setStore] = makePersisted(
+    try {
+      idlePlayer = makeAudioPlayer(idleSound)
+      errorPlayer = makeAudioPlayer(errorSound)
+    } catch (err) {
+      console.log("Failed to load audio", err)
+    }
+
+    const globalSDK = useGlobalSDK()
+    const globalSync = useGlobalSync()
+    const platform = usePlatform()
+
+    const [store, setStore, _, ready] = persisted(
+      "notification.v1",
       createStore({
         list: [] as Notification[],
       }),
-      {
-        name: "notification.v1",
-      },
     )
 
-    // onMount(() => {
-    //   const daysToKeep = 7
-    //   // setStore("list", (n) => n.filter((n) => !n.viewed && n.time + 1000 * 60 * 60 * 24 * daysToKeep < Date.now()))
-    // })
-
     globalSDK.event.listen((e) => {
       const directory = e.name
       const event = e.details
@@ -55,30 +64,49 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
       }
       switch (event.type) {
         case "session.idle": {
-          idlePlayer.play()
-          const session = event.properties.sessionID
+          const sessionID = event.properties.sessionID
+          const [syncStore] = globalSync.child(directory)
+          const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
+          const session = match.found ? syncStore.session[match.index] : undefined
+          if (session?.parentID) break
+          try {
+            idlePlayer?.play()
+          } catch {}
           setStore("list", store.list.length, {
             ...base,
             type: "turn-complete",
-            session,
+            session: sessionID,
           })
+          const href = `/${base64Encode(directory)}/session/${sessionID}`
+          void platform.notify("Response ready", session?.title ?? sessionID, href)
           break
         }
         case "session.error": {
-          const session = event.properties.sessionID ?? "global"
-          // errorPlayer.play()
+          const sessionID = event.properties.sessionID
+          const [syncStore] = globalSync.child(directory)
+          const match = sessionID ? Binary.search(syncStore.session, sessionID, (s) => s.id) : undefined
+          const session = sessionID && match?.found ? syncStore.session[match.index] : undefined
+          if (session?.parentID) break
+          try {
+            errorPlayer?.play()
+          } catch {}
+          const error = "error" in event.properties ? event.properties.error : undefined
           setStore("list", store.list.length, {
             ...base,
             type: "error",
-            session,
-            error: "error" in event.properties ? event.properties.error : undefined,
+            session: sessionID ?? "global",
+            error,
           })
+          const description = session?.title ?? (typeof error === "string" ? error : "An error occurred")
+          const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}`
+          void platform.notify("Session error", description, href)
           break
         }
       }
     })
 
     return {
+      ready,
       session: {
         all(session: string) {
           return store.list.filter((n) => n.session === session)

packages/app/src/context/permission.tsx

@@ -0,0 +1,122 @@
+import { createMemo, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import type { PermissionRequest } from "@opencode-ai/sdk/v2/client"
+import { persisted } from "@/utils/persist"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "./global-sync"
+import { useParams } from "@solidjs/router"
+import { base64Decode } from "@opencode-ai/util/encode"
+
+type PermissionRespondFn = (input: {
+  sessionID: string
+  permissionID: string
+  response: "once" | "always" | "reject"
+  directory?: string
+}) => void
+
+function shouldAutoAccept(perm: PermissionRequest) {
+  return perm.permission === "edit"
+}
+
+export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
+  name: "Permission",
+  init: () => {
+    const params = useParams()
+    const globalSDK = useGlobalSDK()
+    const globalSync = useGlobalSync()
+
+    const permissionsEnabled = createMemo(() => {
+      if (!params.dir || !base64Decode(params.dir)) return false
+      const [store] = globalSync.child(base64Decode(params.dir))
+      return store.config.permission !== undefined
+    })
+
+    const [store, setStore, _, ready] = persisted(
+      "permission.v3",
+      createStore({
+        autoAcceptEdits: {} as Record<string, boolean>,
+      }),
+    )
+
+    const responded = new Set<string>()
+
+    const respond: PermissionRespondFn = (input) => {
+      globalSDK.client.permission.respond(input).catch(() => {
+        responded.delete(input.permissionID)
+      })
+    }
+
+    function respondOnce(permission: PermissionRequest, directory?: string) {
+      if (responded.has(permission.id)) return
+      responded.add(permission.id)
+      respond({
+        sessionID: permission.sessionID,
+        permissionID: permission.id,
+        response: "once",
+        directory,
+      })
+    }
+
+    function isAutoAccepting(sessionID: string) {
+      return store.autoAcceptEdits[sessionID] ?? false
+    }
+
+    const unsubscribe = globalSDK.event.listen((e) => {
+      const event = e.details
+      if (event?.type !== "permission.asked") return
+
+      const perm = event.properties
+      if (!isAutoAccepting(perm.sessionID)) return
+      if (!shouldAutoAccept(perm)) return
+
+      respondOnce(perm, e.name)
+    })
+    onCleanup(unsubscribe)
+
+    function enable(sessionID: string, directory: string) {
+      setStore("autoAcceptEdits", sessionID, true)
+
+      globalSDK.client.permission
+        .list({ directory })
+        .then((x) => {
+          for (const perm of x.data ?? []) {
+            if (!perm?.id) continue
+            if (perm.sessionID !== sessionID) continue
+            if (!shouldAutoAccept(perm)) continue
+            respondOnce(perm, directory)
+          }
+        })
+        .catch(() => undefined)
+    }
+
+    function disable(sessionID: string) {
+      setStore("autoAcceptEdits", sessionID, false)
+    }
+
+    return {
+      ready,
+      respond,
+      autoResponds(permission: PermissionRequest) {
+        return isAutoAccepting(permission.sessionID) && shouldAutoAccept(permission)
+      },
+      isAutoAccepting,
+      toggleAutoAccept(sessionID: string, directory: string) {
+        if (isAutoAccepting(sessionID)) {
+          disable(sessionID)
+          return
+        }
+
+        enable(sessionID, directory)
+      },
+      enableAutoAccept(sessionID: string, directory: string) {
+        if (isAutoAccepting(sessionID)) return
+        enable(sessionID, directory)
+      },
+      disableAutoAccept(sessionID: string) {
+        disable(sessionID)
+      },
+      permissionsEnabled,
+    }
+  },
+})

packages/app/src/context/platform.tsx

@@ -1,10 +1,23 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
+import { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 
 export type Platform = {
   /** Platform discriminator */
   platform: "web" | "tauri"
 
-  /** Open native directory picker dialog (Tauri only) */
+  /** App version */
+  version?: string
+
+  /** Open a URL in the default browser */
+  openLink(url: string): void
+
+  /** Restart the app  */
+  restart(): Promise<void>
+
+  /** Send a system notification (optional deep link) */
+  notify(title: string, description?: string, href?: string): Promise<void>
+
+  /** Open directory picker dialog (native on Tauri, server-backed on web) */
   openDirectoryPickerDialog?(opts?: { title?: string; multiple?: boolean }): Promise<string | string[] | null>
 
   /** Open native file picker dialog (Tauri only) */
@@ -13,8 +26,17 @@ 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
+
+  /** Check for updates (Tauri only) */
+  checkUpdate?(): Promise<{ updateAvailable: boolean; version?: string }>
+
+  /** Install updates (Tauri only) */
+  update?(): Promise<void>
+
+  /** Fetch override */
+  fetch?: typeof fetch
 }
 
 export const { use: usePlatform, provider: PlatformProvider } = createSimpleContext({

packages/app/src/context/prompt.tsx

@@ -0,0 +1,172 @@
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { batch, createMemo } from "solid-js"
+import { useParams } from "@solidjs/router"
+import type { FileSelection } from "@/context/file"
+import { persisted } from "@/utils/persist"
+
+interface PartBase {
+  content: string
+  start: number
+  end: number
+}
+
+export interface TextPart extends PartBase {
+  type: "text"
+}
+
+export interface FileAttachmentPart extends PartBase {
+  type: "file"
+  path: string
+  selection?: FileSelection
+}
+
+export interface AgentPart extends PartBase {
+  type: "agent"
+  name: string
+}
+
+export interface ImageAttachmentPart {
+  type: "image"
+  id: string
+  filename: string
+  mime: string
+  dataUrl: string
+}
+
+export type ContentPart = TextPart | FileAttachmentPart | AgentPart | ImageAttachmentPart
+export type Prompt = ContentPart[]
+
+export type FileContextItem = {
+  type: "file"
+  path: string
+  selection?: FileSelection
+}
+
+export type ContextItem = FileContextItem
+
+export const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+function isSelectionEqual(a?: FileSelection, b?: FileSelection) {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return (
+    a.startLine === b.startLine && a.startChar === b.startChar && a.endLine === b.endLine && a.endChar === b.endChar
+  )
+}
+
+export function isPromptEqual(promptA: Prompt, promptB: Prompt): boolean {
+  if (promptA.length !== promptB.length) return false
+  for (let i = 0; i < promptA.length; i++) {
+    const partA = promptA[i]
+    const partB = promptB[i]
+    if (partA.type !== partB.type) return false
+    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
+      return false
+    }
+    if (partA.type === "file") {
+      const fileA = partA as FileAttachmentPart
+      const fileB = partB as FileAttachmentPart
+      if (fileA.path !== fileB.path) return false
+      if (!isSelectionEqual(fileA.selection, fileB.selection)) return false
+    }
+    if (partA.type === "agent" && partA.name !== (partB as AgentPart).name) {
+      return false
+    }
+    if (partA.type === "image" && partA.id !== (partB as ImageAttachmentPart).id) {
+      return false
+    }
+  }
+  return true
+}
+
+function cloneSelection(selection?: FileSelection) {
+  if (!selection) return undefined
+  return { ...selection }
+}
+
+function clonePart(part: ContentPart): ContentPart {
+  if (part.type === "text") return { ...part }
+  if (part.type === "image") return { ...part }
+  if (part.type === "agent") return { ...part }
+  return {
+    ...part,
+    selection: cloneSelection(part.selection),
+  }
+}
+
+function clonePrompt(prompt: Prompt): Prompt {
+  return prompt.map(clonePart)
+}
+
+export const { use: usePrompt, provider: PromptProvider } = createSimpleContext({
+  name: "Prompt",
+  init: () => {
+    const params = useParams()
+    const name = createMemo(() => `${params.dir}/prompt${params.id ? "/" + params.id : ""}.v2`)
+
+    const [store, setStore, _, ready] = persisted(
+      name(),
+      createStore<{
+        prompt: Prompt
+        cursor?: number
+        context: {
+          activeTab: boolean
+          items: (ContextItem & { key: string })[]
+        }
+      }>({
+        prompt: clonePrompt(DEFAULT_PROMPT),
+        cursor: undefined,
+        context: {
+          activeTab: true,
+          items: [],
+        },
+      }),
+    )
+
+    function keyForItem(item: ContextItem) {
+      if (item.type !== "file") return item.type
+      const start = item.selection?.startLine
+      const end = item.selection?.endLine
+      return `${item.type}:${item.path}:${start}:${end}`
+    }
+
+    return {
+      ready,
+      current: createMemo(() => store.prompt),
+      cursor: createMemo(() => store.cursor),
+      dirty: createMemo(() => !isPromptEqual(store.prompt, DEFAULT_PROMPT)),
+      context: {
+        activeTab: createMemo(() => store.context.activeTab),
+        items: createMemo(() => store.context.items),
+        addActive() {
+          setStore("context", "activeTab", true)
+        },
+        removeActive() {
+          setStore("context", "activeTab", false)
+        },
+        add(item: ContextItem) {
+          const key = keyForItem(item)
+          if (store.context.items.find((x) => x.key === key)) return
+          setStore("context", "items", (items) => [...items, { key, ...item }])
+        },
+        remove(key: string) {
+          setStore("context", "items", (items) => items.filter((x) => x.key !== key))
+        },
+      },
+      set(prompt: Prompt, cursorPosition?: number) {
+        const next = clonePrompt(prompt)
+        batch(() => {
+          setStore("prompt", next)
+          if (cursorPosition !== undefined) setStore("cursor", cursorPosition)
+        })
+      },
+      reset() {
+        batch(() => {
+          setStore("prompt", clonePrompt(DEFAULT_PROMPT))
+          setStore("cursor", 0)
+        })
+      },
+    }
+  },
+})

packages/app/src/context/sdk.tsx

@@ -1,18 +1,20 @@
 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,
     })
 
     const emitter = createGlobalEmitter<{
@@ -23,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 }
   },
 })