chore: refactor packages/app files

https://github.com/anomalyco/opencode/issues/13204#issuecomment-3887062726

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
   - name: 💬 Discord Community
     url: https://discord.gg/opencode

.github/VOUCHED.td

@@ -0,0 +1,20 @@
+# Vouched contributors for this project.
+#
+# See https://github.com/mitchellh/vouch for details.
+#
+# Syntax:
+#   - One handle per line (without @), sorted alphabetically.
+#   - Optional platform prefix: platform:username (e.g., github:user).
+#   - Denounce with minus prefix: -username or -platform:username.
+#   - Optional details after a space following the handle.
+adamdotdevin
+-florianleibert
+fwang
+iamdavidhill
+jayair
+kitlangton
+kommander
+r44vc0rp
+rekram1-node
+-spider-yamet clawdbot/llm psychosis, spam pinging the team
+thdxr

.github/actions/setup-bun/action.yml

@@ -6,7 +6,7 @@ runs:
     - name: Mount Bun Cache
       uses: useblacksmith/stickydisk@v1
       with:
-        key: ${{ github.repository }}-bun-cache
+        key: ${{ github.repository }}-bun-cache-${{ runner.os }}
         path: ~/.bun
 
     - name: Setup Bun

.github/pull_request_template.md

@@ -1,6 +1,6 @@
 ### What does this PR do?
 
-Please provide a description of the issue (if there is one), the changes you made to fix it, and why they work. It is expected that you understand why your changes work and if you do not understand why at least say as much so a maintainer knows how much to value the pr.
+Please provide a description of the issue (if there is one), the changes you made to fix it, and why they work. It is expected that you understand why your changes work and if you do not understand why at least say as much so a maintainer knows how much to value the PR.
 
 **If you paste a large clearly AI generated description here your PR may be IGNORED or CLOSED!**
 

.github/workflows/compliance-close.yml

@@ -0,0 +1,86 @@
+name: compliance-close
+
+on:
+  schedule:
+    # Run every 30 minutes to check for expired compliance windows
+    - cron: "*/30 * * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  close-non-compliant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close non-compliant issues and PRs after 2 hours
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: items } = await github.rest.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: 'needs:compliance',
+              state: 'open',
+              per_page: 100,
+            });
+
+            if (items.length === 0) {
+              core.info('No open issues/PRs with needs:compliance label');
+              return;
+            }
+
+            const now = Date.now();
+            const twoHours = 2 * 60 * 60 * 1000;
+
+            for (const item of items) {
+              const isPR = !!item.pull_request;
+              const kind = isPR ? 'PR' : 'issue';
+
+              const { data: comments } = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: item.number,
+              });
+
+              const complianceComment = comments.find(c => c.body.includes('<!-- issue-compliance -->'));
+              if (!complianceComment) continue;
+
+              const commentAge = now - new Date(complianceComment.created_at).getTime();
+              if (commentAge < twoHours) {
+                core.info(`${kind} #${item.number} still within 2-hour window (${Math.round(commentAge / 60000)}m elapsed)`);
+                continue;
+              }
+
+              const closeMessage = isPR
+                ? 'This pull request has been automatically closed because it was not updated to meet our [contributing guidelines](../blob/dev/CONTRIBUTING.md) within the 2-hour window.\n\nFeel free to open a new pull request that follows our guidelines.'
+                : 'This issue has been automatically closed because it was not updated to meet our [contributing guidelines](../blob/dev/CONTRIBUTING.md) within the 2-hour window.\n\nFeel free to open a new issue that follows our issue templates.';
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: item.number,
+                body: closeMessage,
+              });
+
+              if (isPR) {
+                await github.rest.pulls.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  pull_number: item.number,
+                  state: 'closed',
+                });
+              } else {
+                await github.rest.issues.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: item.number,
+                  state: 'closed',
+                  state_reason: 'not_planned',
+                });
+              }
+
+              core.info(`Closed non-compliant ${kind} #${item.number} after 2-hour window`);
+            }

.github/workflows/daily-issues-recap.yml

@@ -48,8 +48,12 @@ jobs:
           TODAY'S DATE: ${TODAY}
 
           STEP 1: Gather today's issues
-          Search for all issues created today (${TODAY}) using:
-          gh issue list --repo ${{ github.repository }} --state all --search \"created:${TODAY}\" --json number,title,body,labels,state,comments,createdAt,author --limit 500
+          Search for all OPEN issues created today (${TODAY}) using:
+          gh issue list --repo ${{ github.repository }} --state open --search \"created:${TODAY}\" --json number,title,body,labels,state,comments,createdAt,author --limit 500
+
+          IMPORTANT: EXCLUDE all issues authored by Anomaly team members. Filter out issues where the author login matches ANY of these:
+          adamdotdevin, Brendonovich, fwang, Hona, iamdavidhill, jayair, kitlangton, kommander, MrMushrooooom, R44VC0RP, rekram1-node, thdxr
+          This recap is specifically for COMMUNITY (external) issues only.
 
           STEP 2: Analyze and categorize
           For each issue created today, categorize it:

.github/workflows/daily-pr-recap.yml

@@ -47,14 +47,18 @@ jobs:
           TODAY'S DATE: ${TODAY}
 
           STEP 1: Gather PR data
-          Run these commands to gather PR information. ONLY include PRs created or updated TODAY (${TODAY}):
+          Run these commands to gather PR information. ONLY include OPEN PRs created or updated TODAY (${TODAY}):
 
-          # PRs created today
-          gh pr list --repo ${{ github.repository }} --state all --search \"created:${TODAY}\" --json number,title,author,labels,createdAt,updatedAt,reviewDecision,isDraft,additions,deletions --limit 100
+          # Open PRs created today
+          gh pr list --repo ${{ github.repository }} --state open --search \"created:${TODAY}\" --json number,title,author,labels,createdAt,updatedAt,reviewDecision,isDraft,additions,deletions --limit 100
 
-          # PRs with activity today (updated today)
+          # Open PRs with activity today (updated today)
           gh pr list --repo ${{ github.repository }} --state open --search \"updated:${TODAY}\" --json number,title,author,labels,createdAt,updatedAt,reviewDecision,isDraft,additions,deletions --limit 100
 
+          IMPORTANT: EXCLUDE all PRs authored by Anomaly team members. Filter out PRs where the author login matches ANY of these:
+          adamdotdevin, Brendonovich, fwang, Hona, iamdavidhill, jayair, kitlangton, kommander, MrMushrooooom, R44VC0RP, rekram1-node, thdxr
+          This recap is specifically for COMMUNITY (external) contributions only.
+
 
 
           STEP 2: For high-activity PRs, check comment counts

.github/workflows/docs-locale-sync.yml

@@ -0,0 +1,85 @@
+name: docs-locale-sync
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - packages/web/src/content/docs/*.mdx
+
+jobs:
+  sync-locales:
+    if: github.actor != 'opencode-agent[bot]'
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    permissions:
+      id-token: write
+      contents: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Setup git committer
+        id: committer
+        uses: ./.github/actions/setup-git-committer
+        with:
+          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
+          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
+
+      - name: Compute changed English docs
+        id: changes
+        run: |
+          FILES=$(git diff --name-only "${{ github.event.before }}" "${{ github.sha }}" -- 'packages/web/src/content/docs/*.mdx' || true)
+          if [ -z "$FILES" ]; then
+            echo "has_changes=false" >> "$GITHUB_OUTPUT"
+            echo "No English docs changed in push range"
+            exit 0
+          fi
+          echo "has_changes=true" >> "$GITHUB_OUTPUT"
+          {
+            echo "files<<EOF"
+            echo "$FILES"
+            echo "EOF"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: Sync locale docs with OpenCode
+        if: steps.changes.outputs.has_changes == 'true'
+        uses: sst/opencode/github@latest
+        env:
+          OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
+        with:
+          model: opencode/gpt-5.2
+          agent: docs
+          prompt: |
+            Update localized docs to match the latest English docs changes.
+
+            Changed English doc files:
+            <changed_english_docs>
+            ${{ steps.changes.outputs.files }}
+            </changed_english_docs>
+
+            Requirements:
+            1. Update all relevant locale docs under packages/web/src/content/docs/<locale>/ so they reflect these English page changes.
+            2. You MUST use the Task tool for translation work and launch subagents with subagent_type `translator` (defined in .opencode/agent/translator.md).
+            3. Do not translate directly in the primary agent. Use translator subagent output as the source for locale text updates.
+            4. Run translator subagent Task calls in parallel whenever file/locale translation work is independent.
+            5. Preserve frontmatter keys, internal links, code blocks, and existing locale-specific metadata unless the English change requires an update.
+            6. Keep locale docs structure aligned with their corresponding English pages.
+            7. Do not modify English source docs in packages/web/src/content/docs/*.mdx.
+            8. If no locale updates are needed, make no changes.
+
+      - name: Commit and push locale docs updates
+        if: steps.changes.outputs.has_changes == 'true'
+        run: |
+          if [ -z "$(git status --porcelain)" ]; then
+            echo "No locale docs changes to commit"
+            exit 0
+          fi
+          git add -A
+          git commit -m "docs(i18n): sync locale docs from english changes"
+          git pull --rebase --autostash origin "$GITHUB_REF_NAME"
+          git push origin HEAD:"$GITHUB_REF_NAME"

.github/workflows/duplicate-issues.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Install opencode
         run: curl -fsSL https://opencode.ai/install | bash
 
-      - name: Check for duplicate issues
+      - name: Check duplicates and compliance
         env:
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,30 +34,84 @@ jobs:
               "webfetch": "deny"
             }
         run: |
-          opencode run -m opencode/claude-haiku-4-5 "A new issue has been created:'
+          opencode run -m opencode/claude-haiku-4-5 "A new issue has been created:
 
-          Issue number:
-          ${{ github.event.issue.number }}
+          Issue number: ${{ github.event.issue.number }}
 
-          Lookup this issue and search through existing issues (excluding #${{ github.event.issue.number }}) in this repository to find any potential duplicates of this new issue.
+          Lookup this issue with gh issue view ${{ github.event.issue.number }}.
+
+          You have TWO tasks. Perform both, then post a SINGLE comment (if needed).
+
+          ---
+
+          TASK 1: CONTRIBUTING GUIDELINES COMPLIANCE CHECK
+
+          Check whether the issue follows our contributing guidelines and issue templates.
+
+          This project has three issue templates that every issue MUST use one of:
+
+          1. Bug Report - requires a Description field with real content
+          2. Feature Request - requires a verification checkbox and description, title should start with [FEATURE]:
+          3. Question - requires the Question field with real content
+
+          Additionally check:
+          - No AI-generated walls of text (long, AI-generated descriptions are not acceptable)
+          - The issue has real content, not just template placeholder text left unchanged
+          - Bug reports should include some context about how to reproduce
+          - Feature requests should explain the problem or need
+          - We want to push for having the user provide system description & information
+
+          Do NOT be nitpicky about optional fields. Only flag real problems like: no template used, required fields empty or placeholder text only, obviously AI-generated walls of text, or completely empty/nonsensical content.
+
+          ---
+
+          TASK 2: DUPLICATE CHECK
+
+          Search through existing issues (excluding #${{ github.event.issue.number }}) to find potential duplicates.
           Consider:
           1. Similar titles or descriptions
           2. Same error messages or symptoms
           3. Related functionality or components
           4. Similar feature requests
 
-          If you find any potential duplicates, please comment on the new issue with:
-          - A brief explanation of why it might be a duplicate
-          - Links to the potentially duplicate issues
-          - A suggestion to check those issues first
+          Additionally, if the issue mentions keybinds, keyboard shortcuts, or key bindings, note the pinned keybinds issue #4997.
+
+          ---
+
+          POSTING YOUR COMMENT:
+
+          Based on your findings, post a SINGLE comment on issue #${{ github.event.issue.number }}. Build the comment as follows:
+
+          If the issue is NOT compliant, start the comment with:
+          <!-- issue-compliance -->
+          Then explain what needs to be fixed and that they have 2 hours to edit the issue before it is automatically closed. Also add the label needs:compliance to the issue using: gh issue edit ${{ github.event.issue.number }} --add-label needs:compliance
+
+          If duplicates were found, include a section about potential duplicates with links.
+
+          If the issue mentions keybinds/keyboard shortcuts, include a note about #4997.
+
+          If the issue IS compliant AND no duplicates were found AND no keybind reference, do NOT comment at all.
 
           Use this format for the comment:
-          'This issue might be a duplicate of existing issues. Please check:
+
+          [If not compliant:]
+          <!-- issue-compliance -->
+          This issue doesn't fully meet our [contributing guidelines](../blob/dev/CONTRIBUTING.md).
+
+          **What needs to be fixed:**
+          - [specific reasons]
+
+          Please edit this issue to address the above within **2 hours**, or it will be automatically closed.
+
+          [If duplicates found, add:]
+          ---
+          This issue might be a duplicate of existing issues. Please check:
           - #[issue_number]: [brief description of similarity]
 
-          Feel free to ignore if none of these address your specific case.'
+          [If keybind-related, add:]
+          For keybind-related issues, please also check our pinned keybinds documentation: #4997
 
-          Additionally, if the issue mentions keybinds, keyboard shortcuts, or key bindings, please add a comment mentioning the pinned keybinds issue #4997:
-          'For keybind-related issues, please also check our pinned keybinds documentation: #4997'
+          [End with if not compliant:]
+          If you believe this was flagged incorrectly, please let a maintainer know.
 
-          If no clear duplicates are found, do not comment."
+          Remember: post at most ONE comment combining all findings. If everything is fine, post nothing."

.github/workflows/nix-hashes.yml

@@ -12,6 +12,9 @@ on:
       - "package.json"
       - "packages/*/package.json"
       - "flake.lock"
+      - "nix/node_modules.nix"
+      - "nix/scripts/**"
+      - "patches/**"
       - ".github/workflows/nix-hashes.yml"
 
 jobs:

.github/workflows/test.yml

@@ -7,8 +7,32 @@ on:
   pull_request:
   workflow_dispatch:
 jobs:
-  test:
-    name: test (${{ matrix.settings.name }})
+  unit:
+    name: unit (linux)
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Configure git identity
+        run: |
+          git config --global user.email "bot@opencode.ai"
+          git config --global user.name "opencode"
+
+      - name: Run unit tests
+        run: bun turbo test
+
+  e2e:
+    name: e2e (${{ matrix.settings.name }})
+    needs: unit
     strategy:
       fail-fast: false
       matrix:
@@ -16,17 +40,12 @@ jobs:
           - name: linux
             host: blacksmith-4vcpu-ubuntu-2404
             playwright: bunx playwright install --with-deps
-            workdir: .
-            command: |
-              git config --global user.email "bot@opencode.ai"
-              git config --global user.name "opencode"
-              bun turbo test
           - name: windows
-            host: windows-latest
+            host: blacksmith-4vcpu-windows-2025
             playwright: bunx playwright install
-            workdir: packages/app
-            command: bun test:e2e:local
     runs-on: ${{ matrix.settings.host }}
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: 0
     defaults:
       run:
         shell: bash
@@ -43,87 +62,10 @@ jobs:
         working-directory: packages/app
         run: ${{ matrix.settings.playwright }}
 
-      - name: Set OS-specific paths
-        run: |
-          if [ "${{ runner.os }}" = "Windows" ]; then
-            printf '%s\n' "OPENCODE_E2E_ROOT=${{ runner.temp }}\\opencode-e2e" >> "$GITHUB_ENV"
-            printf '%s\n' "OPENCODE_TEST_HOME=${{ runner.temp }}\\opencode-e2e\\home" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_DATA_HOME=${{ runner.temp }}\\opencode-e2e\\share" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_CACHE_HOME=${{ runner.temp }}\\opencode-e2e\\cache" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_CONFIG_HOME=${{ runner.temp }}\\opencode-e2e\\config" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_STATE_HOME=${{ runner.temp }}\\opencode-e2e\\state" >> "$GITHUB_ENV"
-          else
-            printf '%s\n' "OPENCODE_E2E_ROOT=${{ runner.temp }}/opencode-e2e" >> "$GITHUB_ENV"
-            printf '%s\n' "OPENCODE_TEST_HOME=${{ runner.temp }}/opencode-e2e/home" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_DATA_HOME=${{ runner.temp }}/opencode-e2e/share" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_CACHE_HOME=${{ runner.temp }}/opencode-e2e/cache" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_CONFIG_HOME=${{ runner.temp }}/opencode-e2e/config" >> "$GITHUB_ENV"
-            printf '%s\n' "XDG_STATE_HOME=${{ runner.temp }}/opencode-e2e/state" >> "$GITHUB_ENV"
-          fi
-
-      - name: Seed opencode data
-        if: matrix.settings.name != 'windows'
-        working-directory: packages/opencode
-        run: bun script/seed-e2e.ts
-        env:
-          OPENCODE_DISABLE_SHARE: "true"
-          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
-          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
-          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
-          OPENCODE_TEST_HOME: ${{ env.OPENCODE_TEST_HOME }}
-          XDG_DATA_HOME: ${{ env.XDG_DATA_HOME }}
-          XDG_CACHE_HOME: ${{ env.XDG_CACHE_HOME }}
-          XDG_CONFIG_HOME: ${{ env.XDG_CONFIG_HOME }}
-          XDG_STATE_HOME: ${{ env.XDG_STATE_HOME }}
-          OPENCODE_E2E_PROJECT_DIR: ${{ github.workspace }}
-          OPENCODE_E2E_SESSION_TITLE: "E2E Session"
-          OPENCODE_E2E_MESSAGE: "Seeded for UI e2e"
-          OPENCODE_E2E_MODEL: "opencode/gpt-5-nano"
-
-      - name: Run opencode server
-        if: matrix.settings.name != 'windows'
-        working-directory: packages/opencode
-        run: bun dev -- --print-logs --log-level WARN serve --port 4096 --hostname 127.0.0.1 &
-        env:
-          OPENCODE_DISABLE_SHARE: "true"
-          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
-          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
-          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
-          OPENCODE_TEST_HOME: ${{ env.OPENCODE_TEST_HOME }}
-          XDG_DATA_HOME: ${{ env.XDG_DATA_HOME }}
-          XDG_CACHE_HOME: ${{ env.XDG_CACHE_HOME }}
-          XDG_CONFIG_HOME: ${{ env.XDG_CONFIG_HOME }}
-          XDG_STATE_HOME: ${{ env.XDG_STATE_HOME }}
-          OPENCODE_CLIENT: "app"
-
-      - name: Wait for opencode server
-        if: matrix.settings.name != 'windows'
-        run: |
-          for i in {1..120}; do
-            curl -fsS "http://127.0.0.1:4096/global/health" > /dev/null && exit 0
-            sleep 1
-          done
-          exit 1
-
-      - name: run
-        working-directory: ${{ matrix.settings.workdir }}
-        run: ${{ matrix.settings.command }}
+      - name: Run app e2e tests
+        run: bun --cwd packages/app test:e2e:local
         env:
           CI: true
-          OPENCODE_DISABLE_SHARE: "true"
-          OPENCODE_DISABLE_LSP_DOWNLOAD: "true"
-          OPENCODE_DISABLE_DEFAULT_PLUGINS: "true"
-          OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER: "true"
-          OPENCODE_TEST_HOME: ${{ env.OPENCODE_TEST_HOME }}
-          XDG_DATA_HOME: ${{ env.XDG_DATA_HOME }}
-          XDG_CACHE_HOME: ${{ env.XDG_CACHE_HOME }}
-          XDG_CONFIG_HOME: ${{ env.XDG_CONFIG_HOME }}
-          XDG_STATE_HOME: ${{ env.XDG_STATE_HOME }}
-          PLAYWRIGHT_SERVER_HOST: "127.0.0.1"
-          PLAYWRIGHT_SERVER_PORT: "4096"
-          VITE_OPENCODE_SERVER_HOST: "127.0.0.1"
-          VITE_OPENCODE_SERVER_PORT: "4096"
-          OPENCODE_CLIENT: "app"
         timeout-minutes: 30
 
       - name: Upload Playwright artifacts
@@ -136,3 +78,18 @@ jobs:
           path: |
             packages/app/e2e/test-results
             packages/app/e2e/playwright-report
+
+  required:
+    name: test (linux)
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    needs:
+      - unit
+      - e2e
+    if: always()
+    steps:
+      - name: Verify upstream test jobs passed
+        run: |
+          echo "unit=${{ needs.unit.result }}"
+          echo "e2e=${{ needs.e2e.result }}"
+          test "${{ needs.unit.result }}" = "success"
+          test "${{ needs.e2e.result }}" = "success"

.github/workflows/vouch-check-issue.yml

@@ -0,0 +1,96 @@
+name: vouch-check-issue
+
+on:
+  issues:
+    types: [opened]
+
+permissions:
+  contents: read
+  issues: write
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if issue author is denounced
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const author = context.payload.issue.user.login;
+            const issueNumber = context.payload.issue.number;
+
+            // Skip bots
+            if (author.endsWith('[bot]')) {
+              core.info(`Skipping bot: ${author}`);
+              return;
+            }
+
+            // Read the VOUCHED.td file via API (no checkout needed)
+            let content;
+            try {
+              const response = await github.rest.repos.getContent({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                path: '.github/VOUCHED.td',
+              });
+              content = Buffer.from(response.data.content, 'base64').toString('utf-8');
+            } catch (error) {
+              if (error.status === 404) {
+                core.info('No .github/VOUCHED.td file found, skipping check.');
+                return;
+              }
+              throw error;
+            }
+
+            // Parse the .td file for denounced users
+            const denounced = new Map();
+            for (const line of content.split('\n')) {
+              const trimmed = line.trim();
+              if (!trimmed || trimmed.startsWith('#')) continue;
+              if (!trimmed.startsWith('-')) continue;
+
+              const rest = trimmed.slice(1).trim();
+              if (!rest) continue;
+              const spaceIdx = rest.indexOf(' ');
+              const handle = spaceIdx === -1 ? rest : rest.slice(0, spaceIdx);
+              const reason = spaceIdx === -1 ? null : rest.slice(spaceIdx + 1).trim();
+
+              // Handle platform:username or bare username
+              // Only match bare usernames or github: prefix (skip other platforms)
+              const colonIdx = handle.indexOf(':');
+              if (colonIdx !== -1) {
+                const platform = handle.slice(0, colonIdx).toLowerCase();
+                if (platform !== 'github') continue;
+              }
+              const username = colonIdx === -1 ? handle : handle.slice(colonIdx + 1);
+              if (!username) continue;
+
+              denounced.set(username.toLowerCase(), reason);
+            }
+
+            // Check if the author is denounced
+            const reason = denounced.get(author.toLowerCase());
+            if (reason === undefined) {
+              core.info(`User ${author} is not denounced. Allowing issue.`);
+              return;
+            }
+
+            // Author is denounced — close the issue
+            const body = 'This issue has been automatically closed.';
+
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              body,
+            });
+
+            await github.rest.issues.update({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              state: 'closed',
+              state_reason: 'not_planned',
+            });
+
+            core.info(`Closed issue #${issueNumber} from denounced user ${author}`);

.github/workflows/vouch-check-pr.yml

@@ -0,0 +1,93 @@
+name: vouch-check-pr
+
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if PR author is denounced
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const author = context.payload.pull_request.user.login;
+            const prNumber = context.payload.pull_request.number;
+
+            // Skip bots
+            if (author.endsWith('[bot]')) {
+              core.info(`Skipping bot: ${author}`);
+              return;
+            }
+
+            // Read the VOUCHED.td file via API (no checkout needed)
+            let content;
+            try {
+              const response = await github.rest.repos.getContent({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                path: '.github/VOUCHED.td',
+              });
+              content = Buffer.from(response.data.content, 'base64').toString('utf-8');
+            } catch (error) {
+              if (error.status === 404) {
+                core.info('No .github/VOUCHED.td file found, skipping check.');
+                return;
+              }
+              throw error;
+            }
+
+            // Parse the .td file for denounced users
+            const denounced = new Map();
+            for (const line of content.split('\n')) {
+              const trimmed = line.trim();
+              if (!trimmed || trimmed.startsWith('#')) continue;
+              if (!trimmed.startsWith('-')) continue;
+
+              const rest = trimmed.slice(1).trim();
+              if (!rest) continue;
+              const spaceIdx = rest.indexOf(' ');
+              const handle = spaceIdx === -1 ? rest : rest.slice(0, spaceIdx);
+              const reason = spaceIdx === -1 ? null : rest.slice(spaceIdx + 1).trim();
+
+              // Handle platform:username or bare username
+              // Only match bare usernames or github: prefix (skip other platforms)
+              const colonIdx = handle.indexOf(':');
+              if (colonIdx !== -1) {
+                const platform = handle.slice(0, colonIdx).toLowerCase();
+                if (platform !== 'github') continue;
+              }
+              const username = colonIdx === -1 ? handle : handle.slice(colonIdx + 1);
+              if (!username) continue;
+
+              denounced.set(username.toLowerCase(), reason);
+            }
+
+            // Check if the author is denounced
+            const reason = denounced.get(author.toLowerCase());
+            if (reason === undefined) {
+              core.info(`User ${author} is not denounced. Allowing PR.`);
+              return;
+            }
+
+            // Author is denounced — close the PR
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+              body: 'This pull request has been automatically closed.',
+            });
+
+            await github.rest.pulls.update({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: prNumber,
+              state: 'closed',
+            });
+
+            core.info(`Closed PR #${prNumber} from denounced user ${author}`);

.github/workflows/vouch-manage-by-issue.yml

@@ -0,0 +1,37 @@
+name: vouch-manage-by-issue
+
+on:
+  issue_comment:
+    types: [created]
+
+concurrency:
+  group: vouch-manage
+  cancel-in-progress: false
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: read
+
+jobs:
+  manage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+
+      - name: Setup git committer
+        id: committer
+        uses: ./.github/actions/setup-git-committer
+        with:
+          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
+          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
+
+      - uses: mitchellh/vouch/action/manage-by-issue@main
+        with:
+          issue-id: ${{ github.event.issue.number }}
+          comment-id: ${{ github.event.comment.id }}
+        env:
+          GITHUB_TOKEN: ${{ steps.committer.outputs.token }}

.opencode/agent/translator.md

@@ -0,0 +1,883 @@
+---
+description: Translate content for a specified locale while preserving technical terms
+mode: subagent
+model: opencode/gemini-3-pro
+---
+
+You are a professional translator and localization specialist.
+
+Translate the user's content into the requested target locale (language + region, e.g. fr-FR, de-DE).
+
+Requirements:
+
+- Preserve meaning, intent, tone, and formatting (including Markdown/MDX structure).
+- Preserve all technical terms and artifacts exactly: product/company names, API names, identifiers, code, commands/flags, file paths, URLs, versions, error messages, config keys/values, and anything inside inline code or code blocks.
+- Also preserve every term listed in the Do-Not-Translate glossary below.
+- Do not modify fenced code blocks.
+- Output ONLY the translation (no commentary).
+
+If the target locale is missing, ask the user to provide it.
+
+---
+
+# Do-Not-Translate Terms (OpenCode Docs)
+
+Generated from: `packages/web/src/content/docs/*.mdx` (default English docs)
+Generated on: 2026-02-10
+
+Use this as a translation QA checklist / glossary. Preserve listed terms exactly (spelling, casing, punctuation).
+
+General rules (verbatim, even if not listed below):
+
+- Anything inside inline code (single backticks) or fenced code blocks (triple backticks)
+- MDX/JS code in docs: `import ... from "..."`, component tags, identifiers
+- CLI commands, flags, config keys/values, file paths, URLs/domains, and env vars
+
+## Proper nouns and product names
+
+Additional (not reliably captured via link text):
+
+```text
+Astro
+Bun
+Chocolatey
+Cursor
+Docker
+Git
+GitHub Actions
+GitLab CI
+GNOME Terminal
+Homebrew
+Mise
+Neovim
+Node.js
+npm
+Obsidian
+opencode
+opencode-ai
+Paru
+pnpm
+ripgrep
+Scoop
+SST
+Starlight
+Visual Studio Code
+VS Code
+VSCodium
+Windsurf
+Windows Terminal
+Yarn
+Zellij
+Zed
+anomalyco
+```
+
+Extracted from link labels in the English docs (review and prune as desired):
+
+```text
+@openspoon/subtask2
+302.AI console
+ACP progress report
+Agent Client Protocol
+Agent Skills
+Agentic
+AGENTS.md
+AI SDK
+Alacritty
+Anthropic
+Anthropic's Data Policies
+Atom One
+Avante.nvim
+Ayu
+Azure AI Foundry
+Azure portal
+Baseten
+built-in GITHUB_TOKEN
+Bun.$
+Catppuccin
+Cerebras console
+ChatGPT Plus or Pro
+Cloudflare dashboard
+CodeCompanion.nvim
+CodeNomad
+Configuring Adapters: Environment Variables
+Context7 MCP server
+Cortecs console
+Deep Infra dashboard
+DeepSeek console
+Duo Agent Platform
+Everforest
+Fireworks AI console
+Firmware dashboard
+Ghostty
+GitLab CLI agents docs
+GitLab docs
+GitLab User Settings > Access Tokens
+Granular Rules (Object Syntax)
+Grep by Vercel
+Groq console
+Gruvbox
+Helicone
+Helicone documentation
+Helicone Header Directory
+Helicone's Model Directory
+Hugging Face Inference Providers
+Hugging Face settings
+install WSL
+IO.NET console
+JetBrains IDE
+Kanagawa
+Kitty
+MiniMax API Console
+Models.dev
+Moonshot AI console
+Nebius Token Factory console
+Nord
+OAuth
+Ollama integration docs
+OpenAI's Data Policies
+OpenChamber
+OpenCode
+OpenCode config
+OpenCode Config
+OpenCode TUI with the opencode theme
+OpenCode Web - Active Session
+OpenCode Web - New Session
+OpenCode Web - See Servers
+OpenCode Zen
+OpenCode-Obsidian
+OpenRouter dashboard
+OpenWork
+OVHcloud panel
+Pro+ subscription
+SAP BTP Cockpit
+Scaleway Console IAM settings
+Scaleway Generative APIs
+SDK documentation
+Sentry MCP server
+shell API
+Together AI console
+Tokyonight
+Unified Billing
+Venice AI console
+Vercel dashboard
+WezTerm
+Windows Subsystem for Linux (WSL)
+WSL
+WSL (Windows Subsystem for Linux)
+WSL extension
+xAI console
+Z.AI API console
+Zed
+ZenMux dashboard
+Zod
+```
+
+## Acronyms and initialisms
+
+```text
+ACP
+AGENTS
+AI
+AI21
+ANSI
+API
+AST
+AWS
+BTP
+CD
+CDN
+CI
+CLI
+CMD
+CORS
+DEBUG
+EKS
+ERROR
+FAQ
+GLM
+GNOME
+GPT
+HTML
+HTTP
+HTTPS
+IAM
+ID
+IDE
+INFO
+IO
+IP
+IRSA
+JS
+JSON
+JSONC
+K2
+LLM
+LM
+LSP
+M2
+MCP
+MR
+NET
+NPM
+NTLM
+OIDC
+OS
+PAT
+PATH
+PHP
+PR
+PTY
+README
+RFC
+RPC
+SAP
+SDK
+SKILL
+SSE
+SSO
+TS
+TTY
+TUI
+UI
+URL
+US
+UX
+VCS
+VPC
+VPN
+VS
+WARN
+WSL
+X11
+YAML
+```
+
+## Code identifiers used in prose (CamelCase, mixedCase)
+
+```text
+apiKey
+AppleScript
+AssistantMessage
+baseURL
+BurntSushi
+ChatGPT
+ClangFormat
+CodeCompanion
+CodeNomad
+DeepSeek
+DefaultV2
+FileContent
+FileDiff
+FileNode
+fineGrained
+FormatterStatus
+GitHub
+GitLab
+iTerm2
+JavaScript
+JetBrains
+macOS
+mDNS
+MiniMax
+NeuralNomadsAI
+NickvanDyke
+NoeFabris
+OpenAI
+OpenAPI
+OpenChamber
+OpenCode
+OpenRouter
+OpenTUI
+OpenWork
+ownUserPermissions
+PowerShell
+ProviderAuthAuthorization
+ProviderAuthMethod
+ProviderInitError
+SessionStatus
+TabItem
+tokenType
+ToolIDs
+ToolList
+TypeScript
+typesUrl
+UserMessage
+VcsInfo
+WebView2
+WezTerm
+xAI
+ZenMux
+```
+
+## OpenCode CLI commands (as shown in docs)
+
+```text
+opencode
+opencode [project]
+opencode /path/to/project
+opencode acp
+opencode agent [command]
+opencode agent create
+opencode agent list
+opencode attach [url]
+opencode attach http://10.20.30.40:4096
+opencode attach http://localhost:4096
+opencode auth [command]
+opencode auth list
+opencode auth login
+opencode auth logout
+opencode auth ls
+opencode export [sessionID]
+opencode github [command]
+opencode github install
+opencode github run
+opencode import <file>
+opencode import https://opncd.ai/s/abc123
+opencode import session.json
+opencode mcp [command]
+opencode mcp add
+opencode mcp auth [name]
+opencode mcp auth list
+opencode mcp auth ls
+opencode mcp auth my-oauth-server
+opencode mcp auth sentry
+opencode mcp debug <name>
+opencode mcp debug my-oauth-server
+opencode mcp list
+opencode mcp logout [name]
+opencode mcp logout my-oauth-server
+opencode mcp ls
+opencode models --refresh
+opencode models [provider]
+opencode models anthropic
+opencode run [message..]
+opencode run Explain the use of context in Go
+opencode serve
+opencode serve --cors http://localhost:5173 --cors https://app.example.com
+opencode serve --hostname 0.0.0.0 --port 4096
+opencode serve [--port <number>] [--hostname <string>] [--cors <origin>]
+opencode session [command]
+opencode session list
+opencode stats
+opencode uninstall
+opencode upgrade
+opencode upgrade [target]
+opencode upgrade v0.1.48
+opencode web
+opencode web --cors https://example.com
+opencode web --hostname 0.0.0.0
+opencode web --mdns
+opencode web --mdns --mdns-domain myproject.local
+opencode web --port 4096
+opencode web --port 4096 --hostname 0.0.0.0
+opencode.server.close()
+```
+
+## Slash commands and routes
+
+```text
+/agent
+/auth/:id
+/clear
+/command
+/config
+/config/providers
+/connect
+/continue
+/doc
+/editor
+/event
+/experimental/tool?provider=<p>&model=<m>
+/experimental/tool/ids
+/export
+/file?path=<path>
+/file/content?path=<p>
+/file/status
+/find?pattern=<pat>
+/find/file
+/find/file?query=<q>
+/find/symbol?query=<q>
+/formatter
+/global/event
+/global/health
+/help
+/init
+/instance/dispose
+/log
+/lsp
+/mcp
+/mnt/
+/mnt/c/
+/mnt/d/
+/models
+/oc
+/opencode
+/path
+/project
+/project/current
+/provider
+/provider/{id}/oauth/authorize
+/provider/{id}/oauth/callback
+/provider/auth
+/q
+/quit
+/redo
+/resume
+/session
+/session/:id
+/session/:id/abort
+/session/:id/children
+/session/:id/command
+/session/:id/diff
+/session/:id/fork
+/session/:id/init
+/session/:id/message
+/session/:id/message/:messageID
+/session/:id/permissions/:permissionID
+/session/:id/prompt_async
+/session/:id/revert
+/session/:id/share
+/session/:id/shell
+/session/:id/summarize
+/session/:id/todo
+/session/:id/unrevert
+/session/status
+/share
+/summarize
+/theme
+/tui
+/tui/append-prompt
+/tui/clear-prompt
+/tui/control/next
+/tui/control/response
+/tui/execute-command
+/tui/open-help
+/tui/open-models
+/tui/open-sessions
+/tui/open-themes
+/tui/show-toast
+/tui/submit-prompt
+/undo
+/Users/username
+/Users/username/projects/*
+/vcs
+```
+
+## CLI flags and short options
+
+```text
+--agent
+--attach
+--command
+--continue
+--cors
+--cwd
+--days
+--dir
+--dry-run
+--event
+--file
+--force
+--fork
+--format
+--help
+--hostname
+--hostname 0.0.0.0
+--keep-config
+--keep-data
+--log-level
+--max-count
+--mdns
+--mdns-domain
+--method
+--model
+--models
+--port
+--print-logs
+--project
+--prompt
+--refresh
+--session
+--share
+--title
+--token
+--tools
+--verbose
+--version
+--wait
+
+-c
+-d
+-f
+-h
+-m
+-n
+-s
+-v
+```
+
+## Environment variables
+
+```text
+AI_API_URL
+AI_FLOW_CONTEXT
+AI_FLOW_EVENT
+AI_FLOW_INPUT
+AICORE_DEPLOYMENT_ID
+AICORE_RESOURCE_GROUP
+AICORE_SERVICE_KEY
+ANTHROPIC_API_KEY
+AWS_ACCESS_KEY_ID
+AWS_BEARER_TOKEN_BEDROCK
+AWS_PROFILE
+AWS_REGION
+AWS_ROLE_ARN
+AWS_SECRET_ACCESS_KEY
+AWS_WEB_IDENTITY_TOKEN_FILE
+AZURE_COGNITIVE_SERVICES_RESOURCE_NAME
+AZURE_RESOURCE_NAME
+CI_PROJECT_DIR
+CI_SERVER_FQDN
+CI_WORKLOAD_REF
+CLOUDFLARE_ACCOUNT_ID
+CLOUDFLARE_API_TOKEN
+CLOUDFLARE_GATEWAY_ID
+CONTEXT7_API_KEY
+GITHUB_TOKEN
+GITLAB_AI_GATEWAY_URL
+GITLAB_HOST
+GITLAB_INSTANCE_URL
+GITLAB_OAUTH_CLIENT_ID
+GITLAB_TOKEN
+GITLAB_TOKEN_OPENCODE
+GOOGLE_APPLICATION_CREDENTIALS
+GOOGLE_CLOUD_PROJECT
+HTTP_PROXY
+HTTPS_PROXY
+K2_
+MY_API_KEY
+MY_ENV_VAR
+MY_MCP_CLIENT_ID
+MY_MCP_CLIENT_SECRET
+NO_PROXY
+NODE_ENV
+NODE_EXTRA_CA_CERTS
+NPM_AUTH_TOKEN
+OC_ALLOW_WAYLAND
+OPENCODE_API_KEY
+OPENCODE_AUTH_JSON
+OPENCODE_AUTO_SHARE
+OPENCODE_CLIENT
+OPENCODE_CONFIG
+OPENCODE_CONFIG_CONTENT
+OPENCODE_CONFIG_DIR
+OPENCODE_DISABLE_AUTOCOMPACT
+OPENCODE_DISABLE_AUTOUPDATE
+OPENCODE_DISABLE_CLAUDE_CODE
+OPENCODE_DISABLE_CLAUDE_CODE_PROMPT
+OPENCODE_DISABLE_CLAUDE_CODE_SKILLS
+OPENCODE_DISABLE_DEFAULT_PLUGINS
+OPENCODE_DISABLE_FILETIME_CHECK
+OPENCODE_DISABLE_LSP_DOWNLOAD
+OPENCODE_DISABLE_MODELS_FETCH
+OPENCODE_DISABLE_PRUNE
+OPENCODE_DISABLE_TERMINAL_TITLE
+OPENCODE_ENABLE_EXA
+OPENCODE_ENABLE_EXPERIMENTAL_MODELS
+OPENCODE_EXPERIMENTAL
+OPENCODE_EXPERIMENTAL_BASH_DEFAULT_TIMEOUT_MS
+OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT
+OPENCODE_EXPERIMENTAL_DISABLE_FILEWATCHER
+OPENCODE_EXPERIMENTAL_EXA
+OPENCODE_EXPERIMENTAL_FILEWATCHER
+OPENCODE_EXPERIMENTAL_ICON_DISCOVERY
+OPENCODE_EXPERIMENTAL_LSP_TOOL
+OPENCODE_EXPERIMENTAL_LSP_TY
+OPENCODE_EXPERIMENTAL_MARKDOWN
+OPENCODE_EXPERIMENTAL_OUTPUT_TOKEN_MAX
+OPENCODE_EXPERIMENTAL_OXFMT
+OPENCODE_EXPERIMENTAL_PLAN_MODE
+OPENCODE_FAKE_VCS
+OPENCODE_GIT_BASH_PATH
+OPENCODE_MODEL
+OPENCODE_MODELS_URL
+OPENCODE_PERMISSION
+OPENCODE_PORT
+OPENCODE_SERVER_PASSWORD
+OPENCODE_SERVER_USERNAME
+PROJECT_ROOT
+RESOURCE_NAME
+RUST_LOG
+VARIABLE_NAME
+VERTEX_LOCATION
+XDG_CONFIG_HOME
+```
+
+## Package/module identifiers
+
+```text
+../../../config.mjs
+@astrojs/starlight/components
+@opencode-ai/plugin
+@opencode-ai/sdk
+path
+shescape
+zod
+
+@
+@ai-sdk/anthropic
+@ai-sdk/cerebras
+@ai-sdk/google
+@ai-sdk/openai
+@ai-sdk/openai-compatible
+@File#L37-42
+@modelcontextprotocol/server-everything
+@opencode
+```
+
+## GitHub owner/repo slugs referenced in docs
+
+```text
+24601/opencode-zellij-namer
+angristan/opencode-wakatime
+anomalyco/opencode
+apps/opencode-agent
+athal7/opencode-devcontainers
+awesome-opencode/awesome-opencode
+backnotprop/plannotator
+ben-vargas/ai-sdk-provider-opencode-sdk
+btriapitsyn/openchamber
+BurntSushi/ripgrep
+Cluster444/agentic
+code-yeongyu/oh-my-opencode
+darrenhinde/opencode-agents
+different-ai/opencode-scheduler
+different-ai/openwork
+features/copilot
+folke/tokyonight.nvim
+franlol/opencode-md-table-formatter
+ggml-org/llama.cpp
+ghoulr/opencode-websearch-cited.git
+H2Shami/opencode-helicone-session
+hosenur/portal
+jamesmurdza/daytona
+jenslys/opencode-gemini-auth
+JRedeker/opencode-morph-fast-apply
+JRedeker/opencode-shell-strategy
+kdcokenny/ocx
+kdcokenny/opencode-background-agents
+kdcokenny/opencode-notify
+kdcokenny/opencode-workspace
+kdcokenny/opencode-worktree
+login/device
+mohak34/opencode-notifier
+morhetz/gruvbox
+mtymek/opencode-obsidian
+NeuralNomadsAI/CodeNomad
+nick-vi/opencode-type-inject
+NickvanDyke/opencode.nvim
+NoeFabris/opencode-antigravity-auth
+nordtheme/nord
+numman-ali/opencode-openai-codex-auth
+olimorris/codecompanion.nvim
+panta82/opencode-notificator
+rebelot/kanagawa.nvim
+remorses/kimaki
+sainnhe/everforest
+shekohex/opencode-google-antigravity-auth
+shekohex/opencode-pty.git
+spoons-and-mirrors/subtask2
+sudo-tee/opencode.nvim
+supermemoryai/opencode-supermemory
+Tarquinen/opencode-dynamic-context-pruning
+Th3Whit3Wolf/one-nvim
+upstash/context7
+vtemian/micode
+vtemian/octto
+yetone/avante.nvim
+zenobi-us/opencode-plugin-template
+zenobi-us/opencode-skillful
+```
+
+## Paths, filenames, globs, and URLs
+
+```text
+./.opencode/themes/*.json
+./<project-slug>/storage/
+./config/#custom-directory
+./global/storage/
+.agents/skills/*/SKILL.md
+.agents/skills/<name>/SKILL.md
+.clang-format
+.claude
+.claude/skills
+.claude/skills/*/SKILL.md
+.claude/skills/<name>/SKILL.md
+.env
+.github/workflows/opencode.yml
+.gitignore
+.gitlab-ci.yml
+.ignore
+.NET SDK
+.npmrc
+.ocamlformat
+.opencode
+.opencode/
+.opencode/agents/
+.opencode/commands/
+.opencode/commands/test.md
+.opencode/modes/
+.opencode/plans/*.md
+.opencode/plugins/
+.opencode/skills/<name>/SKILL.md
+.opencode/skills/git-release/SKILL.md
+.opencode/tools/
+.well-known/opencode
+{ type: "raw" \| "patch", content: string }
+{file:path/to/file}
+**/*.js
+%USERPROFILE%/intelephense/license.txt
+%USERPROFILE%\.cache\opencode
+%USERPROFILE%\.config\opencode\opencode.jsonc
+%USERPROFILE%\.config\opencode\plugins
+%USERPROFILE%\.local\share\opencode
+%USERPROFILE%\.local\share\opencode\log
+<project-root>/.opencode/themes/*.json
+<providerId>/<modelId>
+<your-project>/.opencode/plugins/
+~
+~/...
+~/.agents/skills/*/SKILL.md
+~/.agents/skills/<name>/SKILL.md
+~/.aws/credentials
+~/.bashrc
+~/.cache/opencode
+~/.cache/opencode/node_modules/
+~/.claude/CLAUDE.md
+~/.claude/skills/
+~/.claude/skills/*/SKILL.md
+~/.claude/skills/<name>/SKILL.md
+~/.config/opencode
+~/.config/opencode/AGENTS.md
+~/.config/opencode/agents/
+~/.config/opencode/commands/
+~/.config/opencode/modes/
+~/.config/opencode/opencode.json
+~/.config/opencode/opencode.jsonc
+~/.config/opencode/plugins/
+~/.config/opencode/skills/*/SKILL.md
+~/.config/opencode/skills/<name>/SKILL.md
+~/.config/opencode/themes/*.json
+~/.config/opencode/tools/
+~/.config/zed/settings.json
+~/.local/share
+~/.local/share/opencode/
+~/.local/share/opencode/auth.json
+~/.local/share/opencode/log/
+~/.local/share/opencode/mcp-auth.json
+~/.local/share/opencode/opencode.jsonc
+~/.npmrc
+~/.zshrc
+~/code/
+~/Library/Application Support
+~/projects/*
+~/projects/personal/
+${config.github}/blob/dev/packages/sdk/js/src/gen/types.gen.ts
+$HOME/intelephense/license.txt
+$HOME/projects/*
+$XDG_CONFIG_HOME/opencode/themes/*.json
+agent/
+agents/
+build/
+commands/
+dist/
+http://<wsl-ip>:4096
+http://127.0.0.1:8080/callback
+http://localhost:<port>
+http://localhost:4096
+http://localhost:4096/doc
+https://app.example.com
+https://AZURE_COGNITIVE_SERVICES_RESOURCE_NAME.cognitiveservices.azure.com/
+https://opencode.ai/zen/v1/chat/completions
+https://opencode.ai/zen/v1/messages
+https://opencode.ai/zen/v1/models/gemini-3-flash
+https://opencode.ai/zen/v1/models/gemini-3-pro
+https://opencode.ai/zen/v1/responses
+https://RESOURCE_NAME.openai.azure.com/
+laravel/pint
+log/
+model: "anthropic/claude-sonnet-4-5"
+modes/
+node_modules/
+openai/gpt-4.1
+opencode.ai/config.json
+opencode/<model-id>
+opencode/gpt-5.1-codex
+opencode/gpt-5.2-codex
+opencode/kimi-k2
+openrouter/google/gemini-2.5-flash
+opncd.ai/s/<share-id>
+packages/*/AGENTS.md
+plugins/
+project/
+provider_id/model_id
+provider/model
+provider/model-id
+rm -rf ~/.cache/opencode
+skills/
+skills/*/SKILL.md
+src/**/*.ts
+themes/
+tools/
+```
+
+## Keybind strings
+
+```text
+alt+b
+Alt+Ctrl+K
+alt+d
+alt+f
+Cmd+Esc
+Cmd+Option+K
+Cmd+Shift+Esc
+Cmd+Shift+G
+Cmd+Shift+P
+ctrl+a
+ctrl+b
+ctrl+d
+ctrl+e
+Ctrl+Esc
+ctrl+f
+ctrl+g
+ctrl+k
+Ctrl+Shift+Esc
+Ctrl+Shift+P
+ctrl+t
+ctrl+u
+ctrl+w
+ctrl+x
+DELETE
+Shift+Enter
+WIN+R
+```
+
+## Model ID strings referenced
+
+```text
+{env:OPENCODE_MODEL}
+anthropic/claude-3-5-sonnet-20241022
+anthropic/claude-haiku-4-20250514
+anthropic/claude-haiku-4-5
+anthropic/claude-sonnet-4-20250514
+anthropic/claude-sonnet-4-5
+gitlab/duo-chat-haiku-4-5
+lmstudio/google/gemma-3n-e4b
+openai/gpt-4.1
+openai/gpt-5
+opencode/gpt-5.1-codex
+opencode/gpt-5.2-codex
+opencode/kimi-k2
+openrouter/google/gemini-2.5-flash
+```

.opencode/skill/bun-file-io/SKILL.md

@@ -32,6 +32,9 @@ description: Use this when you are working on file operations like reading, writ
 - Decode tool stderr with `Bun.readableStreamToText`.
 - For large writes, use `Bun.write(Bun.file(path), text)`.
 
+NOTE: Bun.file(...).exists() will return `false` if the value is a directory.
+Use Filesystem.exists(...) instead if path can be file or directory
+
 ## Quick checklist
 
 - Use Bun APIs first.

.opencode/tool/github-triage.txt

@@ -1,4 +1,4 @@
-Use this tool to assign and/or label a Github issue.
+Use this tool to assign and/or label a GitHub issue.
 
 You can assign the following users:
 - thdxr

.prettierignore

@@ -1,2 +1,2 @@
 sst-env.d.ts
-desktop/src/bindings.ts
+packages/desktop/src/bindings.ts

AGENTS.md

@@ -1,6 +1,7 @@
 - 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`.
+- Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.
 - Prefer automation: execute requested actions without confirmation unless blocked by missing info or safety/irreversibility.
 
 ## Style Guide

CONTRIBUTING.md

@@ -258,3 +258,49 @@ These are not strictly enforced, they are just general guidelines:
 ## Feature Requests
 
 For net-new functionality, start with a design conversation. Open an issue describing the problem, your proposed approach (optional), and why it belongs in OpenCode. The core team will help decide whether it should move forward; please wait for that approval instead of opening a feature PR directly.
+
+## Trust & Vouch System
+
+This project uses [vouch](https://github.com/mitchellh/vouch) to manage contributor trust. The vouch list is maintained in [`.github/VOUCHED.td`](.github/VOUCHED.td).
+
+### How it works
+
+- **Vouched users** are explicitly trusted contributors.
+- **Denounced users** are explicitly blocked. Issues and pull requests from denounced users are automatically closed. If you have been denounced, you can request to be unvouched by reaching out to a maintainer on [Discord](https://opencode.ai/discord)
+- **Everyone else** can participate normally — you don't need to be vouched to open issues or PRs.
+
+### For maintainers
+
+Collaborators with write access can manage the vouch list by commenting on any issue:
+
+- `vouch` — vouch for the issue author
+- `vouch @username` — vouch for a specific user
+- `denounce` — denounce the issue author
+- `denounce @username` — denounce a specific user
+- `denounce @username <reason>` — denounce with a reason
+- `unvouch` / `unvouch @username` — remove someone from the list
+
+Changes are committed automatically to `.github/VOUCHED.td`.
+
+### Denouncement policy
+
+Denouncement is reserved for users who repeatedly submit low-quality AI-generated contributions, spam, or otherwise act in bad faith. It is not used for disagreements or honest mistakes.
+
+## Issue Requirements
+
+All issues **must** use one of our issue templates:
+
+- **Bug report** — for reporting bugs (requires a description)
+- **Feature request** — for suggesting enhancements (requires verification checkbox and description)
+- **Question** — for asking questions (requires the question)
+
+Blank issues are not allowed. When a new issue is opened, an automated check verifies that it follows a template and meets our contributing guidelines. If an issue doesn't meet the requirements, you'll receive a comment explaining what needs to be fixed and have **2 hours** to edit the issue. After that, it will be automatically closed.
+
+Issues may be flagged for:
+
+- Not using a template
+- Required fields left empty or filled with placeholder text
+- AI-generated walls of text
+- Missing meaningful content
+
+If you believe your issue was incorrectly flagged, let a maintainer know.

README.bs.md

@@ -0,0 +1,136 @@
+<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">OpenCode je open source AI agent za programiranje.</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/anomalyco/opencode/actions/workflows/publish.yml"><img alt="Build status" src="https://img.shields.io/github/actions/workflow/status/anomalyco/opencode/publish.yml?style=flat-square&branch=dev" /></a>
+</p>
+
+<p align="center">
+  <a href="README.md">English</a> |
+  <a href="README.zh.md">简体中文</a> |
+  <a href="README.zht.md">繁體中文</a> |
+  <a href="README.ko.md">한국어</a> |
+  <a href="README.de.md">Deutsch</a> |
+  <a href="README.es.md">Español</a> |
+  <a href="README.fr.md">Français</a> |
+  <a href="README.it.md">Italiano</a> |
+  <a href="README.da.md">Dansk</a> |
+  <a href="README.ja.md">日本語</a> |
+  <a href="README.pl.md">Polski</a> |
+  <a href="README.ru.md">Русский</a> |
+  <a href="README.bs.md">Bosanski</a> |
+  <a href="README.ar.md">العربية</a> |
+  <a href="README.no.md">Norsk</a> |
+  <a href="README.br.md">Português (Brasil)</a> |
+  <a href="README.th.md">ไทย</a> |
+  <a href="README.tr.md">Türkçe</a>
+</p>
+
+[![OpenCode Terminal UI](packages/web/src/assets/lander/screenshot.png)](https://opencode.ai)
+
+---
+
+### Instalacija
+
+```bash
+# YOLO
+curl -fsSL https://opencode.ai/install | bash
+
+# Package manageri
+npm i -g opencode-ai@latest        # ili bun/pnpm/yarn
+scoop install opencode             # Windows
+choco install opencode             # Windows
+brew install anomalyco/tap/opencode # macOS i Linux (preporučeno, uvijek ažurno)
+brew install opencode              # macOS i Linux (zvanična brew formula, rjeđe se ažurira)
+paru -S opencode-bin               # Arch Linux
+mise use -g opencode               # Bilo koji OS
+nix run nixpkgs#opencode           # ili github:anomalyco/opencode za najnoviji dev branch
+```
+
+> [!TIP]
+> Ukloni verzije starije od 0.1.x prije instalacije.
+
+### Desktop aplikacija (BETA)
+
+OpenCode je dostupan i kao desktop aplikacija. Preuzmi je direktno sa [stranice izdanja](https://github.com/anomalyco/opencode/releases) ili sa [opencode.ai/download](https://opencode.ai/download).
+
+| Platforma             | Preuzimanje                           |
+| --------------------- | ------------------------------------- |
+| macOS (Apple Silicon) | `opencode-desktop-darwin-aarch64.dmg` |
+| macOS (Intel)         | `opencode-desktop-darwin-x64.dmg`     |
+| Windows               | `opencode-desktop-windows-x64.exe`    |
+| Linux                 | `.deb`, `.rpm`, ili AppImage          |
+
+```bash
+# macOS (Homebrew)
+brew install --cask opencode-desktop
+# Windows (Scoop)
+scoop bucket add extras; scoop install extras/opencode-desktop
+```
+
+#### Instalacijski direktorij
+
+Instalacijska skripta koristi sljedeći redoslijed prioriteta za putanju instalacije:
+
+1. `$OPENCODE_INSTALL_DIR` - Prilagođeni instalacijski direktorij
+2. `$XDG_BIN_DIR` - Putanja usklađena sa XDG Base Directory specifikacijom
+3. `$HOME/bin` - Standardni korisnički bin direktorij (ako postoji ili se može kreirati)
+4. `$HOME/.opencode/bin` - Podrazumijevana rezervna lokacija
+
+```bash
+# Primjeri
+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
+```
+
+### Agenti
+
+OpenCode uključuje dva ugrađena agenta između kojih možeš prebacivati tasterom `Tab`.
+
+- **build** - Podrazumijevani agent sa punim pristupom za razvoj
+- **plan** - Agent samo za čitanje za analizu i istraživanje koda
+  - Podrazumijevano zabranjuje izmjene datoteka
+  - Traži dozvolu prije pokretanja bash komandi
+  - Idealan za istraživanje nepoznatih codebase-ova ili planiranje izmjena
+
+Uključen je i **general** pod-agent za složene pretrage i višekoračne zadatke.
+Koristi se interno i može se pozvati pomoću `@general` u porukama.
+
+Saznaj više o [agentima](https://opencode.ai/docs/agents).
+
+### Dokumentacija
+
+Za više informacija o konfiguraciji OpenCode-a, [**pogledaj dokumentaciju**](https://opencode.ai/docs).
+
+### Doprinosi
+
+Ako želiš doprinositi OpenCode-u, pročitaj [upute za doprinošenje](./CONTRIBUTING.md) prije slanja pull requesta.
+
+### Gradnja na OpenCode-u
+
+Ako radiš na projektu koji je povezan s OpenCode-om i koristi "opencode" kao dio naziva, npr. "opencode-dashboard" ili "opencode-mobile", dodaj napomenu u svoj README da projekat nije napravio OpenCode tim i da nije povezan s nama.
+
+### FAQ
+
+#### Po čemu se razlikuje od Claude Code-a?
+
+Po mogućnostima je vrlo sličan Claude Code-u. Ključne razlike su:
+
+- 100% open source
+- Nije vezan za jednog provajdera. Iako preporučujemo modele koje nudimo kroz [OpenCode Zen](https://opencode.ai/zen), OpenCode možeš koristiti s Claude, OpenAI, Google ili čak lokalnim modelima. Kako modeli napreduju, razlike među njima će se smanjivati, a cijene padati, zato je nezavisnost od provajdera važna.
+- LSP podrška odmah po instalaciji
+- Fokus na TUI. OpenCode grade neovim korisnici i kreatori [terminal.shop](https://terminal.shop); pomjeraćemo granice onoga što je moguće u terminalu.
+- Klijent/server arhitektura. To, recimo, omogućava da OpenCode radi na tvom računaru dok ga daljinski koristiš iz mobilne aplikacije, što znači da je TUI frontend samo jedan od mogućih klijenata.
+
+---
+
+**Pridruži se našoj zajednici** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.md

@@ -27,6 +27,7 @@
   <a href="README.ja.md">日本語</a> |
   <a href="README.pl.md">Polski</a> |
   <a href="README.ru.md">Русский</a> |
+  <a href="README.bs.md">Bosanski</a> |
   <a href="README.ar.md">العربية</a> |
   <a href="README.no.md">Norsk</a> |
   <a href="README.br.md">Português (Brasil)</a> |

bun.lock

@@ -23,7 +23,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -73,7 +73,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -107,7 +107,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -134,7 +134,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -158,7 +158,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -182,13 +182,15 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
         "@solid-primitives/i18n": "2.2.1",
         "@solid-primitives/storage": "catalog:",
+        "@solidjs/meta": "catalog:",
         "@tauri-apps/api": "^2",
+        "@tauri-apps/plugin-clipboard-manager": "~2",
         "@tauri-apps/plugin-deep-link": "~2",
         "@tauri-apps/plugin-dialog": "~2",
         "@tauri-apps/plugin-http": "~2",
@@ -213,7 +215,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -242,7 +244,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -258,7 +260,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -286,7 +288,7 @@
         "@ai-sdk/vercel": "1.0.33",
         "@ai-sdk/xai": "2.0.51",
         "@clack/prompts": "1.0.0-alpha.1",
-        "@gitlab/gitlab-ai-provider": "3.4.0",
+        "@gitlab/gitlab-ai-provider": "3.5.0",
         "@gitlab/opencode-gitlab-auth": "1.3.2",
         "@hono/standard-validator": "0.1.5",
         "@hono/zod-validator": "catalog:",
@@ -299,8 +301,8 @@
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@openrouter/ai-sdk-provider": "1.5.4",
-        "@opentui/core": "0.1.77",
-        "@opentui/solid": "0.1.77",
+        "@opentui/core": "0.1.79",
+        "@opentui/solid": "0.1.79",
         "@parcel/watcher": "2.5.1",
         "@pierre/diffs": "catalog:",
         "@solid-primitives/event-bus": "1.1.2",
@@ -364,7 +366,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -384,7 +386,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.90.10",
         "@tsconfig/node22": "catalog:",
@@ -395,7 +397,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -408,7 +410,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -450,7 +452,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -461,14 +463,14 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.1.52",
+      "version": "1.1.59",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
         "@astrojs/solid-js": "5.1.0",
         "@astrojs/starlight": "0.34.3",
         "@fontsource/ibm-plex-mono": "5.2.5",
-        "@shikijs/transformers": "3.4.2",
+        "@shikijs/transformers": "3.20.0",
         "@types/luxon": "catalog:",
         "ai": "catalog:",
         "astro": "5.7.13",
@@ -483,8 +485,10 @@
         "shiki": "catalog:",
         "solid-js": "catalog:",
         "toolbeam-docs-theme": "0.4.8",
+        "vscode-languageserver-types": "3.17.5",
       },
       "devDependencies": {
+        "@astrojs/check": "0.9.6",
         "@types/node": "catalog:",
         "opencode": "workspace:*",
         "typescript": "catalog:",
@@ -496,6 +500,9 @@
     "web-tree-sitter",
     "tree-sitter-bash",
   ],
+  "patchedDependencies": {
+    "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
+  },
   "overrides": {
     "@types/bun": "catalog:",
     "@types/node": "catalog:",
@@ -515,7 +522,7 @@
     "@tailwindcss/vite": "4.1.11",
     "@tsconfig/bun": "1.0.9",
     "@tsconfig/node22": "22.0.2",
-    "@types/bun": "1.3.5",
+    "@types/bun": "1.3.9",
     "@types/luxon": "3.7.1",
     "@types/node": "22.13.9",
     "@types/semver": "7.7.1",
@@ -612,12 +619,16 @@
 
     "@anycable/core": ["@anycable/core@0.9.2", "", { "dependencies": { "nanoevents": "^7.0.1" } }, "sha512-x5ZXDcW/N4cxWl93CnbHs/u7qq4793jS2kNPWm+duPrXlrva+ml2ZGT7X9tuOBKzyIHf60zWCdIK7TUgMPAwXA=="],
 
+    "@astrojs/check": ["@astrojs/check@0.9.6", "", { "dependencies": { "@astrojs/language-server": "^2.16.1", "chokidar": "^4.0.1", "kleur": "^4.1.5", "yargs": "^17.7.2" }, "peerDependencies": { "typescript": "^5.0.0" }, "bin": { "astro-check": "bin/astro-check.js" } }, "sha512-jlaEu5SxvSgmfGIFfNgcn5/f+29H61NJzEMfAZ82Xopr4XBchXB1GVlcJsE+elUlsYSbXlptZLX+JMG3b/wZEA=="],
+
     "@astrojs/cloudflare": ["@astrojs/cloudflare@12.6.3", "", { "dependencies": { "@astrojs/internal-helpers": "0.7.1", "@astrojs/underscore-redirects": "1.0.0", "@cloudflare/workers-types": "^4.20250507.0", "tinyglobby": "^0.2.13", "vite": "^6.3.5", "wrangler": "^4.14.1" }, "peerDependencies": { "astro": "^5.0.0" } }, "sha512-xhJptF5tU2k5eo70nIMyL1Udma0CqmUEnGSlGyFflLqSY82CRQI6nWZ/xZt0ZvmXuErUjIx0YYQNfZsz5CNjLQ=="],
 
     "@astrojs/compiler": ["@astrojs/compiler@2.13.0", "", {}, "sha512-mqVORhUJViA28fwHYaWmsXSzLO9osbdZ5ImUfxBarqsYdMlPbqAqGJCxsNzvppp1BEzc1mJNjOVvQqeDN8Vspw=="],
 
     "@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.7.1", "", {}, "sha512-7dwEVigz9vUWDw3nRwLQ/yH/xYovlUA0ZD86xoeKEBmkz9O6iELG1yri67PgAPW6VLL/xInA4t7H0CK6VmtkKQ=="],
 
+    "@astrojs/language-server": ["@astrojs/language-server@2.16.3", "", { "dependencies": { "@astrojs/compiler": "^2.13.0", "@astrojs/yaml2ts": "^0.2.2", "@jridgewell/sourcemap-codec": "^1.5.5", "@volar/kit": "~2.4.27", "@volar/language-core": "~2.4.27", "@volar/language-server": "~2.4.27", "@volar/language-service": "~2.4.27", "muggle-string": "^0.4.1", "tinyglobby": "^0.2.15", "volar-service-css": "0.0.68", "volar-service-emmet": "0.0.68", "volar-service-html": "0.0.68", "volar-service-prettier": "0.0.68", "volar-service-typescript": "0.0.68", "volar-service-typescript-twoslash-queries": "0.0.68", "volar-service-yaml": "0.0.68", "vscode-html-languageservice": "^5.6.1", "vscode-uri": "^3.1.0" }, "peerDependencies": { "prettier": "^3.0.0", "prettier-plugin-astro": ">=0.11.0" }, "optionalPeers": ["prettier", "prettier-plugin-astro"], "bin": { "astro-ls": "bin/nodeServer.js" } }, "sha512-yO5K7RYCMXUfeDlnU6UnmtnoXzpuQc0yhlaCNZ67k1C/MiwwwvMZz+LGa+H35c49w5QBfvtr4w4Zcf5PcH8uYA=="],
+
     "@astrojs/markdown-remark": ["@astrojs/markdown-remark@6.3.1", "", { "dependencies": { "@astrojs/internal-helpers": "0.6.1", "@astrojs/prism": "3.2.0", "github-slugger": "^2.0.0", "hast-util-from-html": "^2.0.3", "hast-util-to-text": "^4.0.2", "import-meta-resolve": "^4.1.0", "js-yaml": "^4.1.0", "mdast-util-definitions": "^6.0.0", "rehype-raw": "^7.0.0", "rehype-stringify": "^10.0.1", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.1", "remark-smartypants": "^3.0.2", "shiki": "^3.0.0", "smol-toml": "^1.3.1", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.1", "vfile": "^6.0.3" } }, "sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg=="],
 
     "@astrojs/mdx": ["@astrojs/mdx@4.3.13", "", { "dependencies": { "@astrojs/markdown-remark": "6.3.10", "@mdx-js/mdx": "^3.1.1", "acorn": "^8.15.0", "es-module-lexer": "^1.7.0", "estree-util-visit": "^2.0.0", "hast-util-to-html": "^9.0.5", "piccolore": "^0.1.3", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.1", "remark-smartypants": "^3.0.2", "source-map": "^0.7.6", "unist-util-visit": "^5.0.0", "vfile": "^6.0.3" }, "peerDependencies": { "astro": "^5.0.0" } }, "sha512-IHDHVKz0JfKBy3//52JSiyWv089b7GVSChIXLrlUOoTLWowG3wr2/8hkaEgEyd/vysvNQvGk+QhysXpJW5ve6Q=="],
@@ -634,6 +645,8 @@
 
     "@astrojs/underscore-redirects": ["@astrojs/underscore-redirects@1.0.0", "", {}, "sha512-qZxHwVnmb5FXuvRsaIGaqWgnftjCuMY+GSbaVZdBmE4j8AfgPqKPxYp8SUERyJcjpKCEmO4wD6ybuGH8A2kVRQ=="],
 
+    "@astrojs/yaml2ts": ["@astrojs/yaml2ts@0.2.2", "", { "dependencies": { "yaml": "^2.5.0" } }, "sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ=="],
+
     "@aws-crypto/crc32": ["@aws-crypto/crc32@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg=="],
 
     "@aws-crypto/crc32c": ["@aws-crypto/crc32c@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-+iWb8qaHLYKrNvGRbiYRHSdKRWhto5XlZUEBwDjYNf+ly5SVYG6zEoYIdxvf5R3zyeP16w4PLBn3rH1xc74Rag=="],
@@ -844,6 +857,20 @@
 
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],
 
+    "@emmetio/abbreviation": ["@emmetio/abbreviation@2.3.3", "", { "dependencies": { "@emmetio/scanner": "^1.0.4" } }, "sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA=="],
+
+    "@emmetio/css-abbreviation": ["@emmetio/css-abbreviation@2.1.8", "", { "dependencies": { "@emmetio/scanner": "^1.0.4" } }, "sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw=="],
+
+    "@emmetio/css-parser": ["@emmetio/css-parser@0.4.1", "", { "dependencies": { "@emmetio/stream-reader": "^2.2.0", "@emmetio/stream-reader-utils": "^0.1.0" } }, "sha512-2bC6m0MV/voF4CTZiAbG5MWKbq5EBmDPKu9Sb7s7nVcEzNQlrZP6mFFFlIaISM8X6514H9shWMme1fCm8cWAfQ=="],
+
+    "@emmetio/html-matcher": ["@emmetio/html-matcher@1.3.0", "", { "dependencies": { "@emmetio/scanner": "^1.0.0" } }, "sha512-NTbsvppE5eVyBMuyGfVu2CRrLvo7J4YHb6t9sBFLyY03WYhXET37qA4zOYUjBWFCRHO7pS1B9khERtY0f5JXPQ=="],
+
+    "@emmetio/scanner": ["@emmetio/scanner@1.0.4", "", {}, "sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA=="],
+
+    "@emmetio/stream-reader": ["@emmetio/stream-reader@2.2.0", "", {}, "sha512-fXVXEyFA5Yv3M3n8sUGT7+fvecGrZP4k6FnWWMSZVQf69kAq0LLpaBQLGcPR30m3zMmKYhECP4k/ZkzvhEW5kw=="],
+
+    "@emmetio/stream-reader-utils": ["@emmetio/stream-reader-utils@0.1.0", "", {}, "sha512-ZsZ2I9Vzso3Ho/pjZFsmmZ++FWeEd/txqybHTm4OgaZzdS8V9V/YYWQwg5TC38Z7uLWUV1vavpLLbjJtKubR1A=="],
+
     "@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -946,7 +973,7 @@
 
     "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
-    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.4.0", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-1fEZgqjSZ0WLesftw/J5UtFuJCYFDvCZCHhTH5PZAmpDEmCwllJBoe84L3+vIk38V2FGDMTW128iKTB2mVzr3A=="],
+    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.5.0", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-OoAwCz4fOci3h/2l+PRHMclclh3IaFq8w1es2wvBJ8ca7vtglKsBYT7dvmYpsXlu7pg9mopbjcexvmVCQEUTAQ=="],
 
     "@gitlab/opencode-gitlab-auth": ["@gitlab/opencode-gitlab-auth@1.3.2", "", { "dependencies": { "@fastify/rate-limit": "^10.2.0", "@opencode-ai/plugin": "*", "fastify": "^5.2.0", "open": "^10.0.0" } }, "sha512-pvGrC+aDVLY8bRCC/fZaG/Qihvt2r4by5xbTo5JTSz9O7yIcR6xG2d9Wkuu4bcXFz674z2C+i5bUk+J/RSdBpg=="],
 
@@ -1252,21 +1279,21 @@
 
     "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
-    "@opentui/core": ["@opentui/core@0.1.77", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.77", "@opentui/core-darwin-x64": "0.1.77", "@opentui/core-linux-arm64": "0.1.77", "@opentui/core-linux-x64": "0.1.77", "@opentui/core-win32-arm64": "0.1.77", "@opentui/core-win32-x64": "0.1.77", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-lE3kabm6jdqK3AuBq+O0zZrXdxt6ulmibTc57sf+AsPny6cmwYHnWI4wD6hcreFiYoQVNVvdiJchVgPtowMlEg=="],
+    "@opentui/core": ["@opentui/core@0.1.79", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.79", "@opentui/core-darwin-x64": "0.1.79", "@opentui/core-linux-arm64": "0.1.79", "@opentui/core-linux-x64": "0.1.79", "@opentui/core-win32-arm64": "0.1.79", "@opentui/core-win32-x64": "0.1.79", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-job/t09w8A/aHb/WuaVbimu5fIffyN+PCuVO5cYhXEg/NkOkC/WdFi80B8bwncR/DBPyLAh6oJ3EG86grOVo5g=="],
 
-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.77", "", { "os": "darwin", "cpu": "arm64" }, "sha512-SNqmygCMEsPCW7xWjzCZ5caBf36xaprwVdAnFijGDOuIzLA4iaDa6um8cj3TJh7awenN3NTRsuRc7OuH42UH+g=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.79", "", { "os": "darwin", "cpu": "arm64" }, "sha512-kgsGniV+DM5G1P3GideyJhvfnthNKcVCAm2mPTIr9InQ3L0gS/Feh7zgwOS/jxDvdlQbOWGKMk2Z3JApeC1MLw=="],
 
-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.77", "", { "os": "darwin", "cpu": "x64" }, "sha512-/8fsa03swEHTQt/9NrGm98kemlU+VuTURI/OFZiH53vPDRrOYIYoa4Jyga/H7ZMcG+iFhkq97zIe+0Kw95LGmA=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.79", "", { "os": "darwin", "cpu": "x64" }, "sha512-OpyAmFqAAKQ2CeFmf/oLWcNksmP6Ryx/3R5dbKXThOudMCeQvfvInJTRbc2jTn9VFpf+Qj4BgHkJg1h90tf/EA=="],
 
-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.77", "", { "os": "linux", "cpu": "arm64" }, "sha512-QfUXZJPc69OvqoMu+AlLgjqXrwu4IeqcBuUWYMuH8nPTeLsVUc3CBbXdV2lv9UDxWzxzrxdS4ALPaxvmEv9lsQ=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.79", "", { "os": "linux", "cpu": "arm64" }, "sha512-DCa5YaknS4bWhFt8TMEGH+qmTinyzuY8hoZbO4crtWXAxofPP7Pas76Cwxlvis/PyLffA+pPxAl1l5sUZpsvqw=="],
 
-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.77", "", { "os": "linux", "cpu": "x64" }, "sha512-Kmfx0yUKnPj67AoXYIgL7qQo0QVsUG5Iw8aRtv6XFzXqa5SzBPhaKkKZ9yHPjOmTalZquUs+9zcCRNKpYYuL7A=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.79", "", { "os": "linux", "cpu": "x64" }, "sha512-V6xjvFfHh3NGvsuuDae1KHPRZXHMEE8XL0A/GM6v4I4OCC23kDmkK60Vn6OptQwAzwwbz0X0IX+Ut/GQU9qGgA=="],
 
-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.77", "", { "os": "win32", "cpu": "arm64" }, "sha512-HGTscPXc7gdd23Nh1DbzUNjog1I+5IZp95XPtLftGTpjrWs60VcetXcyJqK2rQcXNxewJK5yDyaa5QyMjfEhCQ=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.79", "", { "os": "win32", "cpu": "arm64" }, "sha512-sPRKnVzOdT5szI59tte7pxwwkYA+07EQN+6miFAvkFuiLmRUngONUD8HVjL7nCnxcPFqxaU4Rvl1y40ST86g8g=="],
 
-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.77", "", { "os": "win32", "cpu": "x64" }, "sha512-c7GijsbvVgnlzd2murIbwuwrGbcv76KdUw6WlVv7a0vex50z6xJCpv1keGzpe0QfxrZ/6fFEFX7JnwGLno0wjA=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.79", "", { "os": "win32", "cpu": "x64" }, "sha512-vmQcFTvKf9fqajnDtgU6/uAsiTGwx8//khqHVBmiTEXUsiT792Ki9l8sgNughbuldqG5iZOiF6IaAWU1H67UpA=="],
 
-    "@opentui/solid": ["@opentui/solid@0.1.77", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.77", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-JY+hUbXVV+XCk6bC8dvcwawWCEmC3Gid6GDs23AJWBgHZ3TU2kRKrgwTdltm45DOq2cZXrYCt690/yE8bP+Gxg=="],
+    "@opentui/solid": ["@opentui/solid@0.1.79", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.79", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-c5+0jexKxb8GwRDDkQ/U6isZZqClAzHccXmYiLYmSnqdoQQp2lIGHLartL+K8lfIQrsKClzP2ZHumN6nexRfRg=="],
 
     "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],
 
@@ -1780,6 +1807,8 @@
 
     "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.9.6", "", { "os": "win32", "cpu": "x64" }, "sha512-ldWuWSSkWbKOPjQMJoYVj9wLHcOniv7diyI5UAJ4XsBdtaFB0pKHQsqw/ItUma0VXGC7vB4E9fZjivmxur60aw=="],
 
+    "@tauri-apps/plugin-clipboard-manager": ["@tauri-apps/plugin-clipboard-manager@2.3.2", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-CUlb5Hqi2oZbcZf4VUyUH53XWPPdtpw43EUpCza5HWZJwxEoDowFzNUDt1tRUXA8Uq+XPn17Ysfptip33sG4eQ=="],
+
     "@tauri-apps/plugin-deep-link": ["@tauri-apps/plugin-deep-link@2.4.6", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-UUOSt0U5juK20uhO2MoHZX/IPblkrhUh+VPtIeu3RwtzI0R9Em3Auzfg/PwcZ9Pv8mLne3cQ4p9CFXD6WxqCZA=="],
 
     "@tauri-apps/plugin-dialog": ["@tauri-apps/plugin-dialog@2.6.0", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg=="],
@@ -1824,7 +1853,7 @@
 
     "@types/braces": ["@types/braces@3.0.5", "", {}, "sha512-SQFof9H+LXeWNz8wDe7oN5zu7ket0qwMu5vZubW4GCJ8Kkeh6nBWUz87+KTz/G3Kqsrp0j/W253XJb3KMEeg3w=="],
 
-    "@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+    "@types/bun": ["@types/bun@1.3.9", "", { "dependencies": { "bun-types": "1.3.9" } }, "sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw=="],
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
 
@@ -1954,6 +1983,22 @@
 
     "@vitest/utils": ["@vitest/utils@4.0.18", "", { "dependencies": { "@vitest/pretty-format": "4.0.18", "tinyrainbow": "^3.0.3" } }, "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA=="],
 
+    "@volar/kit": ["@volar/kit@2.4.28", "", { "dependencies": { "@volar/language-service": "2.4.28", "@volar/typescript": "2.4.28", "typesafe-path": "^0.2.2", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" }, "peerDependencies": { "typescript": "*" } }, "sha512-cKX4vK9dtZvDRaAzeoUdaAJEew6IdxHNCRrdp5Kvcl6zZOqb6jTOfk3kXkIkG3T7oTFXguEMt5+9ptyqYR84Pg=="],
+
+    "@volar/language-core": ["@volar/language-core@2.4.28", "", { "dependencies": { "@volar/source-map": "2.4.28" } }, "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ=="],
+
+    "@volar/language-server": ["@volar/language-server@2.4.28", "", { "dependencies": { "@volar/language-core": "2.4.28", "@volar/language-service": "2.4.28", "@volar/typescript": "2.4.28", "path-browserify": "^1.0.1", "request-light": "^0.7.0", "vscode-languageserver": "^9.0.1", "vscode-languageserver-protocol": "^3.17.5", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" } }, "sha512-NqcLnE5gERKuS4PUFwlhMxf6vqYo7hXtbMFbViXcbVkbZ905AIVWhnSo0ZNBC2V127H1/2zP7RvVOVnyITFfBw=="],
+
+    "@volar/language-service": ["@volar/language-service@2.4.28", "", { "dependencies": { "@volar/language-core": "2.4.28", "vscode-languageserver-protocol": "^3.17.5", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" } }, "sha512-Rh/wYCZJrI5vCwMk9xyw/Z+MsWxlJY1rmMZPsxUoJKfzIRjS/NF1NmnuEcrMbEVGja00aVpCsInJfixQTMdvLw=="],
+
+    "@volar/source-map": ["@volar/source-map@2.4.28", "", {}, "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ=="],
+
+    "@volar/typescript": ["@volar/typescript@2.4.28", "", { "dependencies": { "@volar/language-core": "2.4.28", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw=="],
+
+    "@vscode/emmet-helper": ["@vscode/emmet-helper@2.11.0", "", { "dependencies": { "emmet": "^2.4.3", "jsonc-parser": "^2.3.0", "vscode-languageserver-textdocument": "^1.0.1", "vscode-languageserver-types": "^3.15.1", "vscode-uri": "^3.0.8" } }, "sha512-QLxjQR3imPZPQltfbWRnHU6JecWTF1QSWhx3GAKQpslx7y3Dp6sIIXhKjiUJ/BR9FX8PVthjr9PD6pNwOJfAzw=="],
+
+    "@vscode/l10n": ["@vscode/l10n@0.0.18", "", {}, "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ=="],
+
     "@webgpu/types": ["@webgpu/types@0.1.54", "", {}, "sha512-81oaalC8LFrXjhsczomEQ0u3jG+TqE6V9QHLA8GNZq/Rnot0KDugu3LhSYSlie8tSdooAN1Hov05asrUUp9qgg=="],
 
     "@zip.js/zip.js": ["@zip.js/zip.js@2.7.62", "", {}, "sha512-OaLvZ8j4gCkLn048ypkZu29KX30r8/OfFF2w4Jo5WXFr+J04J+lzJ5TKZBVgFXhlvSkqNFQdfnY1Q8TMTCyBVA=="],
@@ -1982,6 +2027,8 @@
 
     "ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],
 
+    "ajv-draft-04": ["ajv-draft-04@1.0.0", "", { "peerDependencies": { "ajv": "^8.5.0" }, "optionalPeers": ["ajv"] }, "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw=="],
+
     "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="],
 
     "ansi-align": ["ansi-align@3.0.1", "", { "dependencies": { "string-width": "^4.1.0" } }, "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w=="],
@@ -2134,7 +2181,7 @@
 
     "bun-pty": ["bun-pty@0.4.8", "", {}, "sha512-rO70Mrbr13+jxHHHu2YBkk2pNqrJE5cJn29WE++PUr+GFA0hq/VgtQPZANJ8dJo6d7XImvBk37Innt8GM7O28w=="],
 
-    "bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+    "bun-types": ["bun-types@1.3.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg=="],
 
     "bun-webgpu": ["bun-webgpu@0.1.4", "", { "dependencies": { "@webgpu/types": "^0.1.60" }, "optionalDependencies": { "bun-webgpu-darwin-arm64": "^0.1.4", "bun-webgpu-darwin-x64": "^0.1.4", "bun-webgpu-linux-x64": "^0.1.4", "bun-webgpu-win32-x64": "^0.1.4" } }, "sha512-Kw+HoXl1PMWJTh9wvh63SSRofTA8vYBFCw0XEP1V1fFdQEDhI8Sgf73sdndE/oDpN/7CMx0Yv/q8FCvO39ROMQ=="],
 
@@ -2384,6 +2431,8 @@
 
     "electron-to-chromium": ["electron-to-chromium@1.5.282", "", {}, "sha512-FCPkJtpst28UmFzd903iU7PdeVTfY0KAeJy+Lk0GLZRwgwYHn/irRcaCbQQOmr5Vytc/7rcavsYLvTM8RiHYhQ=="],
 
+    "emmet": ["emmet@2.4.11", "", { "dependencies": { "@emmetio/abbreviation": "^2.3.3", "@emmetio/css-abbreviation": "^2.1.8" } }, "sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ=="],
+
     "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
     "emoji-regex-xs": ["emoji-regex-xs@1.0.0", "", {}, "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg=="],
@@ -3162,6 +3211,8 @@
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
+
     "multicast-dns": ["multicast-dns@7.2.5", "", { "dependencies": { "dns-packet": "^5.2.2", "thunky": "^1.0.2" }, "bin": { "multicast-dns": "cli.js" } }, "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg=="],
 
     "mustache": ["mustache@4.2.0", "", { "bin": { "mustache": "bin/mustache" } }, "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ=="],
@@ -3314,6 +3365,8 @@
 
     "pascal-case": ["pascal-case@3.1.2", "", { "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g=="],
 
+    "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
+
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
@@ -3514,6 +3567,10 @@
 
     "remeda": ["remeda@2.26.0", "", { "dependencies": { "type-fest": "^4.41.0" } }, "sha512-lmNNwtaC6Co4m0WTTNoZ/JlpjEqAjPZO0+czC9YVRQUpkbS4x8Hmh+Mn9HPfJfiXqUQ5IXXgSXSOB2pBKAytdA=="],
 
+    "request-light": ["request-light@0.7.0", "", {}, "sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q=="],
+
+    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
+
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
     "reselect": ["reselect@4.1.8", "", {}, "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="],
@@ -3856,8 +3913,12 @@
 
     "typed-array-length": ["typed-array-length@1.0.7", "", { "dependencies": { "call-bind": "^1.0.7", "for-each": "^0.3.3", "gopd": "^1.0.1", "is-typed-array": "^1.1.13", "possible-typed-array-names": "^1.0.0", "reflect.getprototypeof": "^1.0.6" } }, "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg=="],
 
+    "typesafe-path": ["typesafe-path@0.2.2", "", {}, "sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA=="],
+
     "typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
 
+    "typescript-auto-import-cache": ["typescript-auto-import-cache@0.3.6", "", { "dependencies": { "semver": "^7.3.8" } }, "sha512-RpuHXrknHdVdK7wv/8ug3Fr0WNsNi5l5aB8MYYuXhq2UH5lnEB1htJ1smhtD5VeCsGr2p8mUDtd83LCQDFVgjQ=="],
+
     "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
 
     "ulid": ["ulid@3.0.1", "", { "bin": { "ulid": "dist/cli.js" } }, "sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q=="],
@@ -3954,10 +4015,40 @@
 
     "vitest": ["vitest@4.0.18", "", { "dependencies": { "@vitest/expect": "4.0.18", "@vitest/mocker": "4.0.18", "@vitest/pretty-format": "4.0.18", "@vitest/runner": "4.0.18", "@vitest/snapshot": "4.0.18", "@vitest/spy": "4.0.18", "@vitest/utils": "4.0.18", "es-module-lexer": "^1.7.0", "expect-type": "^1.2.2", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "std-env": "^3.10.0", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "tinyrainbow": "^3.0.3", "vite": "^6.0.0 || ^7.0.0", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/browser-playwright": "4.0.18", "@vitest/browser-preview": "4.0.18", "@vitest/browser-webdriverio": "4.0.18", "@vitest/ui": "4.0.18", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/browser-playwright", "@vitest/browser-preview", "@vitest/browser-webdriverio", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ=="],
 
+    "volar-service-css": ["volar-service-css@0.0.68", "", { "dependencies": { "vscode-css-languageservice": "^6.3.0", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-lJSMh6f3QzZ1tdLOZOzovLX0xzAadPhx8EKwraDLPxBndLCYfoTvnNuiFFV8FARrpAlW5C0WkH+TstPaCxr00Q=="],
+
+    "volar-service-emmet": ["volar-service-emmet@0.0.68", "", { "dependencies": { "@emmetio/css-parser": "^0.4.1", "@emmetio/html-matcher": "^1.3.0", "@vscode/emmet-helper": "^2.9.3", "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-nHvixrRQ83EzkQ4G/jFxu9Y4eSsXS/X2cltEPDM+K9qZmIv+Ey1w0tg1+6caSe8TU5Hgw4oSTwNMf/6cQb3LzQ=="],
+
+    "volar-service-html": ["volar-service-html@0.0.68", "", { "dependencies": { "vscode-html-languageservice": "^5.3.0", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-fru9gsLJxy33xAltXOh4TEdi312HP80hpuKhpYQD4O5hDnkNPEBdcQkpB+gcX0oK0VxRv1UOzcGQEUzWCVHLfA=="],
+
+    "volar-service-prettier": ["volar-service-prettier@0.0.68", "", { "dependencies": { "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0", "prettier": "^2.2 || ^3.0" }, "optionalPeers": ["@volar/language-service", "prettier"] }, "sha512-grUmWHkHlebMOd6V8vXs2eNQUw/bJGJMjekh/EPf/p2ZNTK0Uyz7hoBRngcvGfJHMsSXZH8w/dZTForIW/4ihw=="],
+
+    "volar-service-typescript": ["volar-service-typescript@0.0.68", "", { "dependencies": { "path-browserify": "^1.0.1", "semver": "^7.6.2", "typescript-auto-import-cache": "^0.3.5", "vscode-languageserver-textdocument": "^1.0.11", "vscode-nls": "^5.2.0", "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-z7B/7CnJ0+TWWFp/gh2r5/QwMObHNDiQiv4C9pTBNI2Wxuwymd4bjEORzrJ/hJ5Yd5+OzeYK+nFCKevoGEEeKw=="],
+
+    "volar-service-typescript-twoslash-queries": ["volar-service-typescript-twoslash-queries@0.0.68", "", { "dependencies": { "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-NugzXcM0iwuZFLCJg47vI93su5YhTIweQuLmZxvz5ZPTaman16JCvmDZexx2rd5T/75SNuvvZmrTOTNYUsfe5w=="],
+
+    "volar-service-yaml": ["volar-service-yaml@0.0.68", "", { "dependencies": { "vscode-uri": "^3.0.8", "yaml-language-server": "~1.19.2" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-84XgE02LV0OvTcwfqhcSwVg4of3MLNUWPMArO6Aj8YXqyEVnPu8xTEMY2btKSq37mVAPuaEVASI4e3ptObmqcA=="],
+
+    "vscode-css-languageservice": ["vscode-css-languageservice@6.3.9", "", { "dependencies": { "@vscode/l10n": "^0.0.18", "vscode-languageserver-textdocument": "^1.0.12", "vscode-languageserver-types": "3.17.5", "vscode-uri": "^3.1.0" } }, "sha512-1tLWfp+TDM5ZuVWht3jmaY5y7O6aZmpeXLoHl5bv1QtRsRKt4xYGRMmdJa5Pqx/FTkgRbsna9R+Gn2xE+evVuA=="],
+
+    "vscode-html-languageservice": ["vscode-html-languageservice@5.6.1", "", { "dependencies": { "@vscode/l10n": "^0.0.18", "vscode-languageserver-textdocument": "^1.0.12", "vscode-languageserver-types": "^3.17.5", "vscode-uri": "^3.1.0" } }, "sha512-5Mrqy5CLfFZUgkyhNZLA1Ye5g12Cb/v6VM7SxUzZUaRKWMDz4md+y26PrfRTSU0/eQAl3XpO9m2og+GGtDMuaA=="],
+
+    "vscode-json-languageservice": ["vscode-json-languageservice@4.1.8", "", { "dependencies": { "jsonc-parser": "^3.0.0", "vscode-languageserver-textdocument": "^1.0.1", "vscode-languageserver-types": "^3.16.0", "vscode-nls": "^5.0.0", "vscode-uri": "^3.0.2" } }, "sha512-0vSpg6Xd9hfV+eZAaYN63xVVMOTmJ4GgHxXnkLCh+9RsQBkWKIghzLhW2B9ebfG+LQQg8uLtsQ2aUKjTgE+QOg=="],
+
     "vscode-jsonrpc": ["vscode-jsonrpc@8.2.1", "", {}, "sha512-kdjOSJ2lLIn7r1rtrMbbNCHjyMPfRnowdKjBQ+mGq6NAW5QY2bEZC/khaC5OR8svbbjvLEaIXkOq45e2X9BIbQ=="],
 
+    "vscode-languageserver": ["vscode-languageserver@9.0.1", "", { "dependencies": { "vscode-languageserver-protocol": "3.17.5" }, "bin": { "installServerIntoExtension": "bin/installServerIntoExtension" } }, "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g=="],
+
+    "vscode-languageserver-protocol": ["vscode-languageserver-protocol@3.17.5", "", { "dependencies": { "vscode-jsonrpc": "8.2.0", "vscode-languageserver-types": "3.17.5" } }, "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg=="],
+
+    "vscode-languageserver-textdocument": ["vscode-languageserver-textdocument@1.0.12", "", {}, "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA=="],
+
     "vscode-languageserver-types": ["vscode-languageserver-types@3.17.5", "", {}, "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="],
 
+    "vscode-nls": ["vscode-nls@5.2.0", "", {}, "sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng=="],
+
+    "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
+
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
     "web-streams-polyfill": ["web-streams-polyfill@4.0.0-beta.3", "", {}, "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug=="],
@@ -4018,6 +4109,8 @@
 
     "yaml": ["yaml@2.8.2", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A=="],
 
+    "yaml-language-server": ["yaml-language-server@1.19.2", "", { "dependencies": { "@vscode/l10n": "^0.0.18", "ajv": "^8.17.1", "ajv-draft-04": "^1.0.0", "lodash": "4.17.21", "prettier": "^3.5.0", "request-light": "^0.5.7", "vscode-json-languageservice": "4.1.8", "vscode-languageserver": "^9.0.0", "vscode-languageserver-textdocument": "^1.0.1", "vscode-languageserver-types": "^3.16.0", "vscode-uri": "^3.0.2", "yaml": "2.7.1" }, "bin": { "yaml-language-server": "bin/yaml-language-server" } }, "sha512-9F3myNmJzUN/679jycdMxqtydPSDRAarSj3wPiF7pchEPnO9Dg07Oc+gIYLqXR4L+g+FSEVXXv2+mr54StLFOg=="],
+
     "yargs": ["yargs@18.0.0", "", { "dependencies": { "cliui": "^9.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "string-width": "^7.2.0", "y18n": "^5.0.5", "yargs-parser": "^22.0.0" } }, "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg=="],
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
@@ -4090,6 +4183,8 @@
 
     "@ai-sdk/xai/@ai-sdk/openai-compatible": ["@ai-sdk/openai-compatible@1.0.30", "", { "dependencies": { "@ai-sdk/provider": "2.0.1", "@ai-sdk/provider-utils": "3.0.20" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-thubwhRtv9uicAxSWwNpinM7hiL/0CkhL/ymPaHuKvI494J7HIzn8KQZQ2ymRz284WTIZnI7VMyyejxW4RMM6w=="],
 
+    "@astrojs/check/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
     "@astrojs/cloudflare/vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
 
     "@astrojs/markdown-remark/@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.6.1", "", {}, "sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A=="],
@@ -4284,7 +4379,7 @@
 
     "@opencode-ai/desktop/typescript": ["typescript@5.6.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="],
 
-    "@opencode-ai/web/@shikijs/transformers": ["@shikijs/transformers@3.4.2", "", { "dependencies": { "@shikijs/core": "3.4.2", "@shikijs/types": "3.4.2" } }, "sha512-I5baLVi/ynLEOZoWSAMlACHNnG+yw5HDmse0oe+GW6U1u+ULdEB3UHiVWaHoJSSONV7tlcVxuaMy74sREDkSvg=="],
+    "@opencode-ai/web/@shikijs/transformers": ["@shikijs/transformers@3.20.0", "", { "dependencies": { "@shikijs/core": "3.20.0", "@shikijs/types": "3.20.0" } }, "sha512-PrHHMRr3Q5W1qB/42kJW6laqFyWdhrPF2hNR9qjOm1xcSiAO3hAHo7HaVyHE6pMyevmy3i51O8kuGGXC78uK3g=="],
 
     "@opentui/solid/@babel/core": ["@babel/core@7.28.0", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.27.3", "@babel/helpers": "^7.27.6", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ=="],
 
@@ -4358,6 +4453,8 @@
 
     "@tanstack/server-functions-plugin/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
 
+    "@vscode/emmet-helper/jsonc-parser": ["jsonc-parser@2.3.1", "", {}, "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="],
+
     "accepts/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
     "ai-gateway-provider/@ai-sdk/anthropic": ["@ai-sdk/anthropic@2.0.58", "", { "dependencies": { "@ai-sdk/provider": "2.0.1", "@ai-sdk/provider-utils": "3.0.20" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-CkNW5L1Arv8gPtPlEmKd+yf/SG9ucJf0XQdpMG8OiYEtEMc2smuCA+tyCp8zI7IBVg/FE7nUfFHntQFaOjRwJQ=="],
@@ -4584,6 +4681,8 @@
 
     "vitest/why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
 
+    "vscode-languageserver-protocol/vscode-jsonrpc": ["vscode-jsonrpc@8.2.0", "", {}, "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA=="],
+
     "which-builtin-type/isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
 
     "wrangler/esbuild": ["esbuild@0.25.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.4", "@esbuild/android-arm": "0.25.4", "@esbuild/android-arm64": "0.25.4", "@esbuild/android-x64": "0.25.4", "@esbuild/darwin-arm64": "0.25.4", "@esbuild/darwin-x64": "0.25.4", "@esbuild/freebsd-arm64": "0.25.4", "@esbuild/freebsd-x64": "0.25.4", "@esbuild/linux-arm": "0.25.4", "@esbuild/linux-arm64": "0.25.4", "@esbuild/linux-ia32": "0.25.4", "@esbuild/linux-loong64": "0.25.4", "@esbuild/linux-mips64el": "0.25.4", "@esbuild/linux-ppc64": "0.25.4", "@esbuild/linux-riscv64": "0.25.4", "@esbuild/linux-s390x": "0.25.4", "@esbuild/linux-x64": "0.25.4", "@esbuild/netbsd-arm64": "0.25.4", "@esbuild/netbsd-x64": "0.25.4", "@esbuild/openbsd-arm64": "0.25.4", "@esbuild/openbsd-x64": "0.25.4", "@esbuild/sunos-x64": "0.25.4", "@esbuild/win32-arm64": "0.25.4", "@esbuild/win32-ia32": "0.25.4", "@esbuild/win32-x64": "0.25.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q=="],
@@ -4594,6 +4693,12 @@
 
     "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "yaml-language-server/lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
+    "yaml-language-server/request-light": ["request-light@0.5.8", "", {}, "sha512-3Zjgh+8b5fhRJBQZoy+zbVKpAQGLyka0MPgW3zruTF4dFFJ8Fqcfu9YsAvi/rvdcaTeWG3MkbZv4WKxAn/84Lg=="],
+
+    "yaml-language-server/yaml": ["yaml@2.7.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ=="],
+
     "yargs/yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
 
     "zod-to-json-schema/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
@@ -4614,6 +4719,10 @@
 
     "@ai-sdk/openai/@ai-sdk/provider-utils/zod-to-json-schema": ["zod-to-json-schema@3.25.1", "", { "peerDependencies": { "zod": "^3.25 || ^4" } }, "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA=="],
 
+    "@astrojs/check/yargs/cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
+    "@astrojs/check/yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
     "@astrojs/mdx/@astrojs/markdown-remark/@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.7.5", "", {}, "sha512-vreGnYSSKhAjFJCWAwe/CNhONvoc5lokxtRoZims+0wa3KbHBdPHSSthJsKxPd8d/aic6lWKpRTYGY/hsgK6EA=="],
 
     "@astrojs/mdx/@astrojs/markdown-remark/@astrojs/prism": ["@astrojs/prism@3.3.0", "", { "dependencies": { "prismjs": "^1.30.0" } }, "sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ=="],
@@ -4858,9 +4967,9 @@
 
     "@opencode-ai/desktop/@actions/artifact/@actions/http-client": ["@actions/http-client@2.2.3", "", { "dependencies": { "tunnel": "^0.0.6", "undici": "^5.25.4" } }, "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA=="],
 
-    "@opencode-ai/web/@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.4.2", "", { "dependencies": { "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ=="],
+    "@opencode-ai/web/@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.20.0", "", { "dependencies": { "@shikijs/types": "3.20.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-f2ED7HYV4JEk827mtMDwe/yQ25pRiXZmtHjWF8uzZKuKiEsJR7Ce1nuQ+HhV9FzDcbIo4ObBCD9GPTzNuy9S1g=="],
 
-    "@opencode-ai/web/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.4.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg=="],
+    "@opencode-ai/web/@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.20.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw=="],
 
     "@opentui/solid/@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
@@ -5104,6 +5213,14 @@
 
     "@actions/github/@octokit/plugin-rest-endpoint-methods/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@20.0.0", "", {}, "sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA=="],
 
+    "@astrojs/check/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "@astrojs/check/yargs/cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "@astrojs/check/yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "@astrojs/check/yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
     "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],
 
     "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],
@@ -5244,6 +5361,10 @@
 
     "tw-to-css/tailwindcss/chokidar/readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "@astrojs/check/yargs/cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "@astrojs/check/yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
     "@aws-sdk/client-sts/@aws-sdk/credential-provider-node/@aws-sdk/credential-provider-sso/@aws-sdk/token-providers/@aws-sdk/nested-clients": ["@aws-sdk/nested-clients@3.782.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.775.0", "@aws-sdk/middleware-host-header": "3.775.0", "@aws-sdk/middleware-logger": "3.775.0", "@aws-sdk/middleware-recursion-detection": "3.775.0", "@aws-sdk/middleware-user-agent": "3.782.0", "@aws-sdk/region-config-resolver": "3.775.0", "@aws-sdk/types": "3.775.0", "@aws-sdk/util-endpoints": "3.782.0", "@aws-sdk/util-user-agent-browser": "3.775.0", "@aws-sdk/util-user-agent-node": "3.782.0", "@smithy/config-resolver": "^4.1.0", "@smithy/core": "^3.2.0", "@smithy/fetch-http-handler": "^5.0.2", "@smithy/hash-node": "^4.0.2", "@smithy/invalid-dependency": "^4.0.2", "@smithy/middleware-content-length": "^4.0.2", "@smithy/middleware-endpoint": "^4.1.0", "@smithy/middleware-retry": "^4.1.0", "@smithy/middleware-serde": "^4.0.3", "@smithy/middleware-stack": "^4.0.2", "@smithy/node-config-provider": "^4.0.2", "@smithy/node-http-handler": "^4.0.4", "@smithy/protocol-http": "^5.1.0", "@smithy/smithy-client": "^4.2.0", "@smithy/types": "^4.2.0", "@smithy/url-parser": "^4.0.2", "@smithy/util-base64": "^4.0.0", "@smithy/util-body-length-browser": "^4.0.0", "@smithy/util-body-length-node": "^4.0.0", "@smithy/util-defaults-mode-browser": "^4.0.8", "@smithy/util-defaults-mode-node": "^4.0.8", "@smithy/util-endpoints": "^3.0.2", "@smithy/util-middleware": "^4.0.2", "@smithy/util-retry": "^4.0.2", "@smithy/util-utf8": "^4.0.0", "tslib": "^2.6.2" } }, "sha512-QOYC8q7luzHFXrP0xYAqBctoPkynjfV0r9dqntFu4/IWMTyC1vlo1UTxFAjIPyclYw92XJyEkVCVg9v/nQnsUA=="],
 
     "@jsx-email/cli/tailwindcss/chokidar/readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1768393167,
-        "narHash": "sha256-n2063BRjHde6DqAz2zavhOOiLUwA3qXt7jQYHyETjX8=",
+        "lastModified": 1770073757,
+        "narHash": "sha256-Vy+G+F+3E/Tl+GMNgiHl9Pah2DgShmIUBJXmbiQPHbI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "2f594d5af95d4fdac67fba60376ec11e482041cb",
+        "rev": "47472570b1e607482890801aeaf29bfb749884f6",
         "type": "github"
       },
       "original": {

flake.nix

@@ -30,6 +30,26 @@
         };
       });
 
+      overlays = {
+        default =
+          final: _prev:
+          let
+            node_modules = final.callPackage ./nix/node_modules.nix {
+              inherit rev;
+            };
+            opencode = final.callPackage ./nix/opencode.nix {
+              inherit node_modules;
+            };
+            desktop = final.callPackage ./nix/desktop.nix {
+              inherit opencode;
+            };
+          in
+          {
+            inherit opencode;
+            opencode-desktop = desktop;
+          };
+      };
+
       packages = forEachSystem (
         pkgs:
         let

github/index.ts

@@ -275,7 +275,7 @@ async function assertOpencodeConnected() {
         body: {
           service: "github-workflow",
           level: "info",
-          message: "Prepare to react to Github Workflow event",
+          message: "Prepare to react to GitHub Workflow event",
         },
       })
       connected = true

infra/console.ts

@@ -135,6 +135,16 @@ const ZEN_MODELS = [
   new sst.Secret("ZEN_MODELS8"),
   new sst.Secret("ZEN_MODELS9"),
   new sst.Secret("ZEN_MODELS10"),
+  new sst.Secret("ZEN_MODELS11"),
+  new sst.Secret("ZEN_MODELS12"),
+  new sst.Secret("ZEN_MODELS13"),
+  new sst.Secret("ZEN_MODELS14"),
+  new sst.Secret("ZEN_MODELS15"),
+  new sst.Secret("ZEN_MODELS16"),
+  new sst.Secret("ZEN_MODELS17"),
+  new sst.Secret("ZEN_MODELS18"),
+  new sst.Secret("ZEN_MODELS19"),
+  new sst.Secret("ZEN_MODELS20"),
 ]
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")
 const STRIPE_PUBLISHABLE_KEY = new sst.Secret("STRIPE_PUBLISHABLE_KEY")
@@ -156,14 +166,10 @@ 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")
 
-let logProcessor
-if ($app.stage === "production" || $app.stage === "frank") {
-  const HONEYCOMB_API_KEY = new sst.Secret("HONEYCOMB_API_KEY")
-  logProcessor = new sst.cloudflare.Worker("LogProcessor", {
-    handler: "packages/console/function/src/log-processor.ts",
-    link: [HONEYCOMB_API_KEY],
-  })
-}
+const logProcessor = new sst.cloudflare.Worker("LogProcessor", {
+  handler: "packages/console/function/src/log-processor.ts",
+  link: [new sst.Secret("HONEYCOMB_API_KEY")],
+})
 
 new sst.cloudflare.x.SolidStart("Console", {
   domain,
@@ -201,7 +207,7 @@ new sst.cloudflare.x.SolidStart("Console", {
       transform: {
         worker: {
           placement: { mode: "smart" },
-          tailConsumers: logProcessor ? [{ service: logProcessor.nodes.worker.scriptName }] : [],
+          tailConsumers: [{ service: logProcessor.nodes.worker.scriptName }],
         },
       },
     },

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-ufEpxjmlJeft9tI+WxxO+Zbh1pdAaLOURCDBpoQqR0w=",
-    "aarch64-linux": "sha256-z3K6W5oYZNUdV0rjoAZjvNQcifM5bXamLIrD+ZvJ4kA=",
-    "aarch64-darwin": "sha256-+QikplmNhxGF2Nd4L1BG/xyl+24GVhDYMTtK6xCKy/s=",
-    "x86_64-darwin": "sha256-hAcrCT2X02ymwgj/0BAmD2gF66ylGYzbfcqPta/LVEU="
+    "x86_64-linux": "sha256-pp2gb4nxiIT3VltB6Xli2wZPH32JfnMsI+BbihyU1+E=",
+    "aarch64-linux": "sha256-hJwxhBICZz/pbIxQsF/sIpZTlFIgLpcAyF44O8wxMdU=",
+    "aarch64-darwin": "sha256-DPONXP52XOg/ApdSnLp32a+K5XCOnDGhbTUto2Rme0g=",
+    "x86_64-darwin": "sha256-KX1h5LRJSgthpbOPqWlbM/sPf8cvQrdRJvxtrz/FzBQ="
   }
 }

nix/node_modules.nix

@@ -30,7 +30,7 @@ stdenvNoCC.mkDerivation {
         ../bun.lock
         ../package.json
         ../patches
-        ../install
+        ../install # required by desktop build (cli.rs include_str!)
       ]
     );
   };

nix/opencode.nix

@@ -34,6 +34,7 @@ stdenvNoCC.mkDerivation (finalAttrs: {
   '';
 
   env.MODELS_DEV_API_JSON = "${models-dev}/dist/_api.json";
+  env.OPENCODE_DISABLE_MODELS_FETCH = true;
   env.OPENCODE_VERSION = finalAttrs.version;
   env.OPENCODE_CHANNEL = "local";
 
@@ -79,7 +80,7 @@ stdenvNoCC.mkDerivation (finalAttrs: {
     writableTmpDirAsHomeHook
   ];
   doInstallCheck = true;
-  versionCheckKeepEnvironment = [ "HOME" ];
+  versionCheckKeepEnvironment = [ "HOME" "OPENCODE_DISABLE_MODELS_FETCH" ];
   versionCheckProgramArg = "--version";
 
   passthru = {

nix/scripts/canonicalize-node-modules.ts

@@ -1,27 +1,32 @@
 import { lstat, mkdir, readdir, rm, symlink } from "fs/promises"
 import { join, relative } from "path"
 
-type SemverLike = {
-  valid: (value: string) => string | null
-  rcompare: (left: string, right: string) => number
-}
-
 type Entry = {
   dir: string
   version: string
-  label: string
 }
 
+async function isDirectory(path: string) {
+  try {
+    const info = await lstat(path)
+    return info.isDirectory()
+  } catch {
+    return false
+  }
+}
+
+const isValidSemver = (v: string) => Bun.semver.satisfies(v, "x.x.x")
+
 const root = process.cwd()
 const bunRoot = join(root, "node_modules/.bun")
 const linkRoot = join(bunRoot, "node_modules")
 const directories = (await readdir(bunRoot)).sort()
+
 const versions = new Map<string, Entry[]>()
 
 for (const entry of directories) {
   const full = join(bunRoot, entry)
-  const info = await lstat(full)
-  if (!info.isDirectory()) {
+  if (!(await isDirectory(full))) {
     continue
   }
   const parsed = parseEntry(entry)
@@ -29,37 +34,23 @@ for (const entry of directories) {
     continue
   }
   const list = versions.get(parsed.name) ?? []
-  list.push({ dir: full, version: parsed.version, label: entry })
+  list.push({ dir: full, version: parsed.version })
   versions.set(parsed.name, list)
 }
 
-const semverModule = (await import(join(bunRoot, "node_modules/semver"))) as
-  | SemverLike
-  | {
-      default: SemverLike
-    }
-const semver = "default" in semverModule ? semverModule.default : semverModule
 const selections = new Map<string, Entry>()
 
 for (const [slug, list] of versions) {
   list.sort((a, b) => {
-    const left = semver.valid(a.version)
-    const right = semver.valid(b.version)
-    if (left && right) {
-      const delta = semver.rcompare(left, right)
-      if (delta !== 0) {
-        return delta
-      }
-    }
-    if (left && !right) {
-      return -1
-    }
-    if (!left && right) {
-      return 1
-    }
+    const aValid = isValidSemver(a.version)
+    const bValid = isValidSemver(b.version)
+    if (aValid && bValid) return -Bun.semver.order(a.version, b.version)
+    if (aValid) return -1
+    if (bValid) return 1
     return b.version.localeCompare(a.version)
   })
-  selections.set(slug, list[0])
+  const first = list[0]
+  if (first) selections.set(slug, first)
 }
 
 await rm(linkRoot, { recursive: true, force: true })
@@ -77,10 +68,7 @@ for (const [slug, entry] of Array.from(selections.entries()).sort((a, b) => a[0]
   await mkdir(parent, { recursive: true })
   const linkPath = join(parent, leaf)
   const desired = join(entry.dir, "node_modules", slug)
-  const exists = await lstat(desired)
-    .then((info) => info.isDirectory())
-    .catch(() => false)
-  if (!exists) {
+  if (!(await isDirectory(desired))) {
     continue
   }
   const relativeTarget = relative(parent, desired)

nix/scripts/normalize-bun-binaries.ts

@@ -8,7 +8,7 @@ type PackageManifest = {
 
 const root = process.cwd()
 const bunRoot = join(root, "node_modules/.bun")
-const bunEntries = (await safeReadDir(bunRoot)).sort()
+const bunEntries = (await readdir(bunRoot)).sort()
 let rewritten = 0
 
 for (const entry of bunEntries) {
@@ -45,11 +45,11 @@ for (const entry of bunEntries) {
   }
 }
 
-console.log(`[normalize-bun-binaries] rewrote ${rewritten} links`)
+console.log(`[normalize-bun-binaries] rebuilt ${rewritten} links`)
 
 async function collectPackages(modulesRoot: string) {
   const found: string[] = []
-  const topLevel = (await safeReadDir(modulesRoot)).sort()
+  const topLevel = (await readdir(modulesRoot)).sort()
   for (const name of topLevel) {
     if (name === ".bin" || name === ".bun") {
       continue
@@ -59,7 +59,7 @@ async function collectPackages(modulesRoot: string) {
       continue
     }
     if (name.startsWith("@")) {
-      const scoped = (await safeReadDir(full)).sort()
+      const scoped = (await readdir(full)).sort()
       for (const child of scoped) {
         const scopedDir = join(full, child)
         if (await isDirectory(scopedDir)) {
@@ -121,14 +121,6 @@ async function isDirectory(path: string) {
   }
 }
 
-async function safeReadDir(path: string) {
-  try {
-    return await readdir(path)
-  } catch {
-    return []
-  }
-}
-
 function normalizeBinName(name: string) {
   const slash = name.lastIndexOf("/")
   if (slash >= 0) {

package.json

@@ -4,7 +4,7 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.5",
+  "packageManager": "bun@1.3.9",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "dev:desktop": "bun --cwd packages/desktop tauri dev",
@@ -23,7 +23,7 @@
       "packages/slack"
     ],
     "catalog": {
-      "@types/bun": "1.3.5",
+      "@types/bun": "1.3.9",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
       "ulid": "3.0.1",
@@ -100,5 +100,7 @@
     "@types/bun": "catalog:",
     "@types/node": "catalog:"
   },
-  "patchedDependencies": {}
+  "patchedDependencies": {
+    "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch"
+  }
 }

packages/app/bunfig.toml

@@ -1,2 +1,3 @@
 [test]
+root = "./src"
 preload = ["./happydom.ts"]

packages/app/e2e/app/titlebar-history.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from "../fixtures"
-import { openSidebar, withSession } from "../actions"
+import { defocus, openSidebar, withSession } from "../actions"
 import { promptSelector } from "../selectors"
+import { modKey } from "../utils"
 
 test("titlebar back/forward navigates between sessions", async ({ page, slug, sdk, gotoSession }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
@@ -40,3 +41,84 @@ test("titlebar back/forward navigates between sessions", async ({ page, slug, sd
     })
   })
 })
+
+test("titlebar forward is cleared after branching history from sidebar", async ({ page, slug, sdk, gotoSession }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const stamp = Date.now()
+
+  await withSession(sdk, `e2e titlebar history a ${stamp}`, async (a) => {
+    await withSession(sdk, `e2e titlebar history b ${stamp}`, async (b) => {
+      await withSession(sdk, `e2e titlebar history c ${stamp}`, async (c) => {
+        await gotoSession(a.id)
+
+        await openSidebar(page)
+
+        const second = page.locator(`[data-session-id="${b.id}"] a`).first()
+        await expect(second).toBeVisible()
+        await second.scrollIntoViewIfNeeded()
+        await second.click()
+
+        await expect(page).toHaveURL(new RegExp(`/${slug}/session/${b.id}(?:\\?|#|$)`))
+        await expect(page.locator(promptSelector)).toBeVisible()
+
+        const back = page.getByRole("button", { name: "Back" })
+        const forward = page.getByRole("button", { name: "Forward" })
+
+        await expect(back).toBeVisible()
+        await expect(back).toBeEnabled()
+        await back.click()
+
+        await expect(page).toHaveURL(new RegExp(`/${slug}/session/${a.id}(?:\\?|#|$)`))
+        await expect(page.locator(promptSelector)).toBeVisible()
+
+        await openSidebar(page)
+
+        const third = page.locator(`[data-session-id="${c.id}"] a`).first()
+        await expect(third).toBeVisible()
+        await third.scrollIntoViewIfNeeded()
+        await third.click()
+
+        await expect(page).toHaveURL(new RegExp(`/${slug}/session/${c.id}(?:\\?|#|$)`))
+        await expect(page.locator(promptSelector)).toBeVisible()
+
+        await expect(forward).toBeVisible()
+        await expect(forward).toBeDisabled()
+      })
+    })
+  })
+})
+
+test("keyboard shortcuts navigate titlebar history", async ({ page, slug, sdk, gotoSession }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const stamp = Date.now()
+
+  await withSession(sdk, `e2e titlebar shortcuts 1 ${stamp}`, async (one) => {
+    await withSession(sdk, `e2e titlebar shortcuts 2 ${stamp}`, async (two) => {
+      await gotoSession(one.id)
+
+      await openSidebar(page)
+
+      const link = page.locator(`[data-session-id="${two.id}"] a`).first()
+      await expect(link).toBeVisible()
+      await link.scrollIntoViewIfNeeded()
+      await link.click()
+
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
+
+      await defocus(page)
+      await page.keyboard.press(`${modKey}+[`)
+
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${one.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
+
+      await defocus(page)
+      await page.keyboard.press(`${modKey}+]`)
+
+      await expect(page).toHaveURL(new RegExp(`/${slug}/session/${two.id}(?:\\?|#|$)`))
+      await expect(page.locator(promptSelector)).toBeVisible()
+    })
+  })
+})

packages/app/e2e/files/file-open.spec.ts

@@ -1,15 +1,28 @@
 import { test, expect } from "../fixtures"
-import { openPalette, clickListItem } from "../actions"
+import { promptSelector } from "../selectors"
 
 test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
   await gotoSession()
 
-  const dialog = await openPalette(page)
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/open")
+
+  const command = page.locator('[data-slash-id="file.open"]').first()
+  await expect(command).toBeVisible()
+  await page.keyboard.press("Enter")
+
+  const dialog = page
+    .getByRole("dialog")
+    .filter({ has: page.getByPlaceholder(/search files/i) })
+    .first()
+  await expect(dialog).toBeVisible()
 
   const input = dialog.getByRole("textbox").first()
   await input.fill("package.json")
 
-  await clickListItem(dialog, { keyStartsWith: "file:" })
+  const item = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
+  await expect(item).toBeVisible({ timeout: 30_000 })
+  await item.click()
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/files/file-tree.spec.ts

@@ -1,37 +1,49 @@
 import { test, expect } from "../fixtures"
 
-test.skip("file tree can expand folders and open a file", async ({ page, gotoSession }) => {
+test("file tree can expand folders and open a file", async ({ page, gotoSession }) => {
   await gotoSession()
 
   const toggle = page.getByRole("button", { name: "Toggle file tree" })
-  const treeTabs = page.locator('[data-component="tabs"][data-variant="pill"][data-scope="filetree"]')
+  const panel = page.locator("#file-tree-panel")
+  const treeTabs = panel.locator('[data-component="tabs"][data-variant="pill"][data-scope="filetree"]')
 
+  await expect(toggle).toBeVisible()
   if ((await toggle.getAttribute("aria-expanded")) !== "true") await toggle.click()
+  await expect(toggle).toHaveAttribute("aria-expanded", "true")
+  await expect(panel).toBeVisible()
   await expect(treeTabs).toBeVisible()
 
-  await treeTabs.locator('[data-slot="tabs-trigger"]').nth(1).click()
+  const allTab = treeTabs.getByRole("tab", { name: /^all files$/i })
+  await expect(allTab).toBeVisible()
+  await allTab.click()
+  await expect(allTab).toHaveAttribute("aria-selected", "true")
 
-  const node = (name: string) => treeTabs.getByRole("button", { name, exact: true })
+  const tree = treeTabs.locator('[data-slot="tabs-content"]:not([hidden])')
+  await expect(tree).toBeVisible()
 
-  await expect(node("packages")).toBeVisible()
-  await node("packages").click()
+  const expand = async (name: string) => {
+    const folder = tree.getByRole("button", { name, exact: true }).first()
+    await expect(folder).toBeVisible()
+    await expect(folder).toHaveAttribute("aria-expanded", /true|false/)
+    if ((await folder.getAttribute("aria-expanded")) === "false") await folder.click()
+    await expect(folder).toHaveAttribute("aria-expanded", "true")
+  }
 
-  await expect(node("app")).toBeVisible()
-  await node("app").click()
+  await expand("packages")
+  await expand("app")
+  await expand("src")
+  await expand("components")
 
-  await expect(node("src")).toBeVisible()
-  await node("src").click()
-
-  await expect(node("components")).toBeVisible()
-  await node("components").click()
-
-  await expect(node("file-tree.tsx")).toBeVisible()
-  await node("file-tree.tsx").click()
+  const file = tree.getByRole("button", { name: "file-tree.tsx", exact: true }).first()
+  await expect(file).toBeVisible()
+  await file.click()
 
   const tab = page.getByRole("tab", { name: "file-tree.tsx" })
   await expect(tab).toBeVisible()
   await tab.click()
+  await expect(tab).toHaveAttribute("aria-selected", "true")
 
   const code = page.locator('[data-component="code"]').first()
-  await expect(code.getByText("export default function FileTree")).toBeVisible()
+  await expect(code).toBeVisible()
+  await expect(code).toContainText("export default function FileTree")
 })

packages/app/e2e/files/file-viewer.spec.ts

@@ -1,18 +1,33 @@
 import { test, expect } from "../fixtures"
-import { openPalette, clickListItem } from "../actions"
+import { promptSelector } from "../selectors"
 
 test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
   await gotoSession()
 
-  const sep = process.platform === "win32" ? "\\" : "/"
-  const file = ["packages", "app", "package.json"].join(sep)
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/open")
 
-  const dialog = await openPalette(page)
+  const command = page.locator('[data-slash-id="file.open"]').first()
+  await expect(command).toBeVisible()
+  await page.keyboard.press("Enter")
+
+  const dialog = page
+    .getByRole("dialog")
+    .filter({ has: page.getByPlaceholder(/search files/i) })
+    .first()
+  await expect(dialog).toBeVisible()
+
+  const file = "packages/app/package.json"
 
   const input = dialog.getByRole("textbox").first()
   await input.fill(file)
 
-  await clickListItem(dialog, { text: /packages.*app.*package.json/ })
+  const item = dialog
+    .locator('[data-slot="list-item"]')
+    .filter({ hasText: /packages[\\/].*app[\\/].*package.json/ })
+    .first()
+  await expect(item).toBeVisible({ timeout: 30_000 })
+  await item.click()
 
   await expect(dialog).toHaveCount(0)
 

packages/app/e2e/projects/projects-close.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "../fixtures"
-import { createTestProject, cleanupTestProject, openSidebar, clickMenuItem } from "../actions"
-import { projectCloseHoverSelector, projectCloseMenuSelector, projectSwitchSelector } from "../selectors"
+import { createTestProject, cleanupTestProject, openSidebar, clickMenuItem, openProjectMenu } from "../actions"
+import { projectCloseHoverSelector, projectSwitchSelector } from "../selectors"
 import { dirSlug } from "../utils"
 
 test("can close a project via hover card close button", async ({ page, withProject }) => {
@@ -31,16 +31,15 @@ test("can close a project via hover card close button", async ({ page, withProje
   }
 })
 
-test("can close a project via project header more options menu", async ({ page, withProject }) => {
+test("closing active project navigates to another open project", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   const other = await createTestProject()
-  const otherName = other.split("/").pop() ?? other
   const otherSlug = dirSlug(other)
 
   try {
     await withProject(
-      async () => {
+      async ({ slug }) => {
         await openSidebar(page)
 
         const otherButton = page.locator(projectSwitchSelector(otherSlug)).first()
@@ -49,21 +48,20 @@ test("can close a project via project header more options menu", async ({ page,
 
         await expect(page).toHaveURL(new RegExp(`/${otherSlug}/session`))
 
-        const header = page
-          .locator(".group\\/project")
-          .filter({ has: page.locator(`[data-action="project-menu"][data-project="${otherSlug}"]`) })
-          .first()
-        await expect(header).toContainText(otherName)
-
-        const trigger = header.locator(`[data-action="project-menu"][data-project="${otherSlug}"]`).first()
-        await expect(trigger).toHaveCount(1)
-        await trigger.focus()
-        await page.keyboard.press("Enter")
-
-        const menu = page.locator('[data-component="dropdown-menu-content"]').first()
-        await expect(menu).toBeVisible({ timeout: 10_000 })
+        const menu = await openProjectMenu(page, otherSlug)
 
         await clickMenuItem(menu, /^Close$/i, { force: true })
+
+        await expect
+          .poll(() => {
+            const pathname = new URL(page.url()).pathname
+            if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
+            if (pathname === "/") return "home"
+            return ""
+          })
+          .toMatch(/^(project|home)$/)
+
+        await expect(page).not.toHaveURL(new RegExp(`/${otherSlug}/session(?:[/?#]|$)`))
         await expect(otherButton).toHaveCount(0)
       },
       { extra: [other] },

packages/app/e2e/projects/workspace-new-session.spec.ts

@@ -0,0 +1,144 @@
+import { base64Decode } from "@opencode-ai/util/encode"
+import type { Page } from "@playwright/test"
+import { test, expect } from "../fixtures"
+import { cleanupTestProject, openSidebar, sessionIDFromUrl, setWorkspacesEnabled } from "../actions"
+import { promptSelector, workspaceItemSelector, workspaceNewSessionSelector } from "../selectors"
+import { createSdk } from "../utils"
+
+function slugFromUrl(url: string) {
+  return /\/([^/]+)\/session(?:\/|$)/.exec(url)?.[1] ?? ""
+}
+
+async function waitWorkspaceReady(page: Page, slug: string) {
+  await openSidebar(page)
+  await expect
+    .poll(
+      async () => {
+        const item = page.locator(workspaceItemSelector(slug)).first()
+        try {
+          await item.hover({ timeout: 500 })
+          return true
+        } catch {
+          return false
+        }
+      },
+      { timeout: 60_000 },
+    )
+    .toBe(true)
+}
+
+async function createWorkspace(page: Page, root: string, seen: string[]) {
+  await openSidebar(page)
+  await page.getByRole("button", { name: "New workspace" }).first().click()
+
+  await expect
+    .poll(
+      () => {
+        const slug = slugFromUrl(page.url())
+        if (!slug) return ""
+        if (slug === root) return ""
+        if (seen.includes(slug)) return ""
+        return slug
+      },
+      { timeout: 45_000 },
+    )
+    .not.toBe("")
+
+  const slug = slugFromUrl(page.url())
+  const directory = base64Decode(slug)
+  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
+  return { slug, directory }
+}
+
+async function openWorkspaceNewSession(page: Page, slug: string) {
+  await waitWorkspaceReady(page, slug)
+
+  const item = page.locator(workspaceItemSelector(slug)).first()
+  await item.hover()
+
+  const button = page.locator(workspaceNewSessionSelector(slug)).first()
+  await expect(button).toBeVisible()
+  await button.click({ force: true })
+
+  await expect.poll(() => slugFromUrl(page.url())).toBe(slug)
+  await expect(page).toHaveURL(new RegExp(`/${slug}/session(?:[/?#]|$)`))
+}
+
+async function createSessionFromWorkspace(page: Page, slug: string, text: string) {
+  await openWorkspaceNewSession(page, slug)
+
+  const prompt = page.locator(promptSelector)
+  await expect(prompt).toBeVisible()
+  await expect(prompt).toBeEditable()
+  await prompt.click()
+  await expect(prompt).toBeFocused()
+  await prompt.fill(text)
+  await expect.poll(async () => ((await prompt.textContent()) ?? "").trim()).toContain(text)
+  await prompt.press("Enter")
+
+  await expect.poll(() => slugFromUrl(page.url())).toBe(slug)
+  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
+
+  const sessionID = sessionIDFromUrl(page.url())
+  if (!sessionID) throw new Error(`Failed to parse session id from url: ${page.url()}`)
+  await expect(page).toHaveURL(new RegExp(`/${slug}/session/${sessionID}(?:[/?#]|$)`))
+  return sessionID
+}
+
+async function sessionDirectory(directory: string, sessionID: string) {
+  const info = await createSdk(directory)
+    .session.get({ sessionID })
+    .then((x) => x.data)
+    .catch(() => undefined)
+  if (!info) return ""
+  return info.directory
+}
+
+test("new sessions from sidebar workspace actions stay in selected workspace", async ({ page, withProject }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  await withProject(async ({ directory, slug: root }) => {
+    const workspaces = [] as { slug: string; directory: string }[]
+    const sessions = [] as string[]
+
+    try {
+      await openSidebar(page)
+      await setWorkspacesEnabled(page, root, true)
+
+      const first = await createWorkspace(page, root, [])
+      workspaces.push(first)
+      await waitWorkspaceReady(page, first.slug)
+
+      const second = await createWorkspace(page, root, [first.slug])
+      workspaces.push(second)
+      await waitWorkspaceReady(page, second.slug)
+
+      const firstSession = await createSessionFromWorkspace(page, first.slug, `workspace one ${Date.now()}`)
+      sessions.push(firstSession)
+
+      const secondSession = await createSessionFromWorkspace(page, second.slug, `workspace two ${Date.now()}`)
+      sessions.push(secondSession)
+
+      const thirdSession = await createSessionFromWorkspace(page, first.slug, `workspace one again ${Date.now()}`)
+      sessions.push(thirdSession)
+
+      await expect.poll(() => sessionDirectory(first.directory, firstSession)).toBe(first.directory)
+      await expect.poll(() => sessionDirectory(second.directory, secondSession)).toBe(second.directory)
+      await expect.poll(() => sessionDirectory(first.directory, thirdSession)).toBe(first.directory)
+    } finally {
+      const dirs = [directory, ...workspaces.map((workspace) => workspace.directory)]
+      await Promise.all(
+        sessions.map((sessionID) =>
+          Promise.all(
+            dirs.map((dir) =>
+              createSdk(dir)
+                .session.delete({ sessionID })
+                .catch(() => undefined),
+            ),
+          ),
+        ),
+      )
+      await Promise.all(workspaces.map((workspace) => cleanupTestProject(workspace.directory)))
+    }
+  })
+})

packages/app/e2e/projects/workspaces.spec.ts

@@ -1,5 +1,6 @@
 import { base64Decode } from "@opencode-ai/util/encode"
 import fs from "node:fs/promises"
+import os from "node:os"
 import path from "node:path"
 import type { Page } from "@playwright/test"
 
@@ -10,11 +11,18 @@ import {
   cleanupTestProject,
   clickMenuItem,
   confirmDialog,
+  openProjectMenu,
   openSidebar,
   openWorkspaceMenu,
   setWorkspacesEnabled,
 } from "../actions"
-import { inlineInputSelector, workspaceItemSelector } from "../selectors"
+import {
+  inlineInputSelector,
+  projectSwitchSelector,
+  projectWorkspacesToggleSelector,
+  workspaceItemSelector,
+} from "../selectors"
+import { createSdk, dirSlug } from "../utils"
 
 function slugFromUrl(url: string) {
   return /\/([^/]+)\/session(?:\/|$)/.exec(url)?.[1] ?? ""
@@ -126,6 +134,40 @@ test("can create a workspace", async ({ page, withProject }) => {
   })
 })
 
+test("non-git projects keep workspace mode disabled", async ({ page, withProject }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const nonGit = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-project-nongit-"))
+  const nonGitSlug = dirSlug(nonGit)
+
+  await fs.writeFile(path.join(nonGit, "README.md"), "# e2e nongit\n")
+
+  try {
+    await withProject(
+      async () => {
+        await openSidebar(page)
+
+        const nonGitButton = page.locator(projectSwitchSelector(nonGitSlug)).first()
+        await expect(nonGitButton).toBeVisible()
+        await nonGitButton.click()
+        await expect(page).toHaveURL(new RegExp(`/${nonGitSlug}/session`))
+
+        const menu = await openProjectMenu(page, nonGitSlug)
+        const toggle = menu.locator(projectWorkspacesToggleSelector(nonGitSlug)).first()
+
+        await expect(toggle).toBeVisible()
+        await expect(toggle).toBeDisabled()
+
+        await expect(menu.getByRole("menuitem", { name: "New workspace" })).toHaveCount(0)
+        await expect(page.getByRole("button", { name: "New workspace" })).toHaveCount(0)
+      },
+      { extra: [nonGit] },
+    )
+  } finally {
+    await cleanupTestProject(nonGit)
+  }
+})
+
 test("can rename a workspace", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
@@ -214,14 +256,45 @@ test("can delete a workspace", async ({ page, withProject }) => {
   await page.setViewportSize({ width: 1400, height: 800 })
 
   await withProject(async (project) => {
-    const { rootSlug, slug } = await setupWorkspaceTest(page, project)
+    const sdk = createSdk(project.directory)
+    const { rootSlug, slug, directory } = await setupWorkspaceTest(page, project)
+
+    await expect
+      .poll(
+        async () => {
+          const worktrees = await sdk.worktree
+            .list()
+            .then((r) => r.data ?? [])
+            .catch(() => [] as string[])
+          return worktrees.includes(directory)
+        },
+        { timeout: 30_000 },
+      )
+      .toBe(true)
 
     const menu = await openWorkspaceMenu(page, slug)
     await clickMenuItem(menu, /^Delete$/i, { force: true })
     await confirmDialog(page, /^Delete workspace$/i)
 
     await expect(page).toHaveURL(new RegExp(`/${rootSlug}/session`))
-    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0)
+
+    await expect
+      .poll(
+        async () => {
+          const worktrees = await sdk.worktree
+            .list()
+            .then((r) => r.data ?? [])
+            .catch(() => [] as string[])
+          return worktrees.includes(directory)
+        },
+        { timeout: 60_000 },
+      )
+      .toBe(false)
+
+    await project.gotoSession()
+
+    await openSidebar(page)
+    await expect(page.locator(workspaceItemSelector(slug))).toHaveCount(0, { timeout: 60_000 })
     await expect(page.locator(workspaceItemSelector(rootSlug)).first()).toBeVisible()
   })
 })

packages/app/e2e/prompt/context.spec.ts

@@ -1,40 +1,95 @@
 import { test, expect } from "../fixtures"
+import type { Page } from "@playwright/test"
 import { promptSelector } from "../selectors"
 import { withSession } from "../actions"
 
+function contextButton(page: Page) {
+  return page
+    .locator('[data-component="button"]')
+    .filter({ has: page.locator('[data-component="progress-circle"]').first() })
+    .first()
+}
+
+async function seedContextSession(input: { sessionID: string; sdk: Parameters<typeof withSession>[0] }) {
+  await input.sdk.session.promptAsync({
+    sessionID: input.sessionID,
+    noReply: true,
+    parts: [
+      {
+        type: "text",
+        text: "seed context",
+      },
+    ],
+  })
+
+  await expect
+    .poll(async () => {
+      const messages = await input.sdk.session
+        .messages({ sessionID: input.sessionID, limit: 1 })
+        .then((r) => r.data ?? [])
+      return messages.length
+    })
+    .toBeGreaterThan(0)
+}
+
 test("context panel can be opened from the prompt", async ({ page, sdk, gotoSession }) => {
   const title = `e2e smoke context ${Date.now()}`
 
   await withSession(sdk, title, async (session) => {
-    await sdk.session.promptAsync({
-      sessionID: session.id,
-      noReply: true,
-      parts: [
-        {
-          type: "text",
-          text: "seed context",
-        },
-      ],
-    })
-
-    await expect
-      .poll(async () => {
-        const messages = await sdk.session.messages({ sessionID: session.id, limit: 1 }).then((r) => r.data ?? [])
-        return messages.length
-      })
-      .toBeGreaterThan(0)
+    await seedContextSession({ sessionID: session.id, sdk })
 
     await gotoSession(session.id)
 
-    const contextButton = page
-      .locator('[data-component="button"]')
-      .filter({ has: page.locator('[data-component="progress-circle"]').first() })
-      .first()
-
-    await expect(contextButton).toBeVisible()
-    await contextButton.click()
+    const trigger = contextButton(page)
+    await expect(trigger).toBeVisible()
+    await trigger.click()
 
     const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
     await expect(tabs.getByRole("tab", { name: "Context" })).toBeVisible()
   })
 })
+
+test("context panel can be closed from the context tab close action", async ({ page, sdk, gotoSession }) => {
+  await withSession(sdk, `e2e context toggle ${Date.now()}`, async (session) => {
+    await seedContextSession({ sessionID: session.id, sdk })
+    await gotoSession(session.id)
+
+    await page.locator(promptSelector).click()
+
+    const trigger = contextButton(page)
+    await expect(trigger).toBeVisible()
+    await trigger.click()
+
+    const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
+    const context = tabs.getByRole("tab", { name: "Context" })
+    await expect(context).toBeVisible()
+
+    await page.getByRole("button", { name: "Close tab" }).first().click()
+    await expect(context).toHaveCount(0)
+  })
+})
+
+test("context panel can open file picker from context actions", async ({ page, sdk, gotoSession }) => {
+  await withSession(sdk, `e2e context tabs ${Date.now()}`, async (session) => {
+    await seedContextSession({ sessionID: session.id, sdk })
+    await gotoSession(session.id)
+
+    await page.locator(promptSelector).click()
+
+    const trigger = contextButton(page)
+    await expect(trigger).toBeVisible()
+    await trigger.click()
+
+    await expect(page.getByRole("tab", { name: "Context" })).toBeVisible()
+    await page.getByRole("button", { name: "Open file" }).first().click()
+
+    const dialog = page
+      .getByRole("dialog")
+      .filter({ has: page.getByPlaceholder(/search files/i) })
+      .first()
+    await expect(dialog).toBeVisible()
+
+    await page.keyboard.press("Escape")
+    await expect(dialog).toHaveCount(0)
+  })
+})

packages/app/e2e/prompt/prompt.spec.ts

@@ -44,9 +44,6 @@ test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession })
       )
 
       .toContain(token)
-
-    const reply = page.locator('[data-slot="session-turn-summary-section"]').filter({ hasText: token }).first()
-    await expect(reply).toBeVisible({ timeout: 90_000 })
   } finally {
     page.off("pageerror", onPageError)
     await sdk.session.delete({ sessionID }).catch(() => undefined)

packages/app/e2e/selectors.ts

@@ -48,6 +48,9 @@ export const workspaceItemSelector = (slug: string) =>
 export const workspaceMenuTriggerSelector = (slug: string) =>
   `${sidebarNavSelector} [data-action="workspace-menu"][data-workspace="${slug}"]`
 
+export const workspaceNewSessionSelector = (slug: string) =>
+  `${sidebarNavSelector} [data-action="workspace-new-session"][data-workspace="${slug}"]`
+
 export const listItemSelector = '[data-slot="list-item"]'
 
 export const listItemKeyStartsWithSelector = (prefix: string) => `${listItemSelector}[data-key^="${prefix}"]`

packages/app/e2e/session/session-undo-redo.spec.ts

@@ -0,0 +1,233 @@
+import type { Page } from "@playwright/test"
+import { test, expect } from "../fixtures"
+import { withSession } from "../actions"
+import { createSdk, modKey } from "../utils"
+import { promptSelector } from "../selectors"
+
+async function seedConversation(input: {
+  page: Page
+  sdk: ReturnType<typeof createSdk>
+  sessionID: string
+  token: string
+}) {
+  const messages = async () =>
+    await input.sdk.session.messages({ sessionID: input.sessionID, limit: 100 }).then((r) => r.data ?? [])
+  const seeded = await messages()
+  const userIDs = new Set(seeded.filter((m) => m.info.role === "user").map((m) => m.info.id))
+
+  const prompt = input.page.locator(promptSelector)
+  await expect(prompt).toBeVisible()
+  await input.sdk.session.promptAsync({
+    sessionID: input.sessionID,
+    noReply: true,
+    parts: [{ type: "text", text: input.token }],
+  })
+
+  let userMessageID: string | undefined
+  await expect
+    .poll(
+      async () => {
+        const users = (await messages()).filter(
+          (m) =>
+            !userIDs.has(m.info.id) &&
+            m.info.role === "user" &&
+            m.parts.filter((p) => p.type === "text").some((p) => p.text.includes(input.token)),
+        )
+        if (users.length === 0) return false
+
+        const user = users[users.length - 1]
+        if (!user) return false
+        userMessageID = user.info.id
+        return true
+      },
+      { timeout: 90_000, intervals: [250, 500, 1_000] },
+    )
+    .toBe(true)
+
+  if (!userMessageID) throw new Error("Expected a user message id")
+  await expect(input.page.locator(`[data-message-id="${userMessageID}"]`).first()).toBeVisible({ timeout: 30_000 })
+  return { prompt, userMessageID }
+}
+
+test("slash undo sets revert and restores prior prompt", async ({ page, withProject }) => {
+  test.setTimeout(120_000)
+
+  const token = `undo_${Date.now()}`
+
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e undo ${Date.now()}`, async (session) => {
+      await project.gotoSession(session.id)
+
+      const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
+
+      await seeded.prompt.click()
+      await page.keyboard.type("/undo")
+
+      const undo = page.locator('[data-slash-id="session.undo"]').first()
+      await expect(undo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBe(seeded.userMessageID)
+
+      await expect(seeded.prompt).toContainText(token)
+      await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`)).toHaveCount(0)
+    })
+  })
+})
+
+test("slash redo clears revert and restores latest state", async ({ page, withProject }) => {
+  test.setTimeout(120_000)
+
+  const token = `redo_${Date.now()}`
+
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e redo ${Date.now()}`, async (session) => {
+      await project.gotoSession(session.id)
+
+      const seeded = await seedConversation({ page, sdk, sessionID: session.id, token })
+
+      await seeded.prompt.click()
+      await page.keyboard.type("/undo")
+
+      const undo = page.locator('[data-slash-id="session.undo"]').first()
+      await expect(undo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBe(seeded.userMessageID)
+
+      await seeded.prompt.click()
+      await page.keyboard.press(`${modKey}+A`)
+      await page.keyboard.press("Backspace")
+      await page.keyboard.type("/redo")
+
+      const redo = page.locator('[data-slash-id="session.redo"]').first()
+      await expect(redo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBeUndefined()
+
+      await expect(seeded.prompt).not.toContainText(token)
+      await expect(page.locator(`[data-message-id="${seeded.userMessageID}"]`).first()).toBeVisible()
+    })
+  })
+})
+
+test("slash undo/redo traverses multi-step revert stack", async ({ page, withProject }) => {
+  test.setTimeout(120_000)
+
+  const firstToken = `undo_redo_first_${Date.now()}`
+  const secondToken = `undo_redo_second_${Date.now()}`
+
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e undo redo stack ${Date.now()}`, async (session) => {
+      await project.gotoSession(session.id)
+
+      const first = await seedConversation({
+        page,
+        sdk,
+        sessionID: session.id,
+        token: firstToken,
+      })
+      const second = await seedConversation({
+        page,
+        sdk,
+        sessionID: session.id,
+        token: secondToken,
+      })
+
+      expect(first.userMessageID).not.toBe(second.userMessageID)
+
+      const firstMessage = page.locator(`[data-message-id="${first.userMessageID}"]`)
+      const secondMessage = page.locator(`[data-message-id="${second.userMessageID}"]`)
+
+      await expect(firstMessage.first()).toBeVisible()
+      await expect(secondMessage.first()).toBeVisible()
+
+      await second.prompt.click()
+      await page.keyboard.press(`${modKey}+A`)
+      await page.keyboard.press("Backspace")
+      await page.keyboard.type("/undo")
+
+      const undo = page.locator('[data-slash-id="session.undo"]').first()
+      await expect(undo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBe(second.userMessageID)
+
+      await expect(firstMessage.first()).toBeVisible()
+      await expect(secondMessage).toHaveCount(0)
+
+      await second.prompt.click()
+      await page.keyboard.press(`${modKey}+A`)
+      await page.keyboard.press("Backspace")
+      await page.keyboard.type("/undo")
+      await expect(undo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBe(first.userMessageID)
+
+      await expect(firstMessage).toHaveCount(0)
+      await expect(secondMessage).toHaveCount(0)
+
+      await second.prompt.click()
+      await page.keyboard.press(`${modKey}+A`)
+      await page.keyboard.press("Backspace")
+      await page.keyboard.type("/redo")
+
+      const redo = page.locator('[data-slash-id="session.redo"]').first()
+      await expect(redo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBe(second.userMessageID)
+
+      await expect(firstMessage.first()).toBeVisible()
+      await expect(secondMessage).toHaveCount(0)
+
+      await second.prompt.click()
+      await page.keyboard.press(`${modKey}+A`)
+      await page.keyboard.press("Backspace")
+      await page.keyboard.type("/redo")
+      await expect(redo).toBeVisible()
+      await page.keyboard.press("Enter")
+
+      await expect
+        .poll(async () => await sdk.session.get({ sessionID: session.id }).then((r) => r.data?.revert?.messageID), {
+          timeout: 30_000,
+        })
+        .toBeUndefined()
+
+      await expect(firstMessage.first()).toBeVisible()
+      await expect(secondMessage.first()).toBeVisible()
+    })
+  })
+})

packages/app/e2e/session/session.spec.ts

@@ -34,21 +34,34 @@ async function seedMessage(sdk: Sdk, sessionID: string) {
 test("session can be renamed via header menu", async ({ page, sdk, gotoSession }) => {
   const stamp = Date.now()
   const originalTitle = `e2e rename test ${stamp}`
-  const newTitle = `e2e renamed ${stamp}`
+  const renamedTitle = `e2e renamed ${stamp}`
 
   await withSession(sdk, originalTitle, async (session) => {
     await seedMessage(sdk, session.id)
     await gotoSession(session.id)
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(originalTitle)
 
     const menu = await openSessionMoreMenu(page, session.id)
     await clickMenuItem(menu, /rename/i)
 
     const input = page.locator(".session-scroller").locator(inlineInputSelector).first()
     await expect(input).toBeVisible()
-    await input.fill(newTitle)
+    await expect(input).toBeFocused()
+    await input.fill(renamedTitle)
+    await expect(input).toHaveValue(renamedTitle)
     await input.press("Enter")
 
-    await expect(page.getByRole("heading", { level: 1 }).first()).toContainText(newTitle)
+    await expect
+      .poll(
+        async () => {
+          const data = await sdk.session.get({ sessionID: session.id }).then((r) => r.data)
+          return data?.title
+        },
+        { timeout: 30_000 },
+      )
+      .toBe(renamedTitle)
+
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(renamedTitle)
   })
 })
 
@@ -116,8 +129,14 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
     await seedMessage(sdk, session.id)
     await gotoSession(session.id)
 
-    const { rightSection, popoverBody } = await openSharePopover(page)
-    await popoverBody.getByRole("button", { name: "Publish" }).first().click()
+    const shared = await openSharePopover(page)
+    const publish = shared.popoverBody.getByRole("button", { name: "Publish" }).first()
+    await expect(publish).toBeVisible({ timeout: 30_000 })
+    await publish.click()
+
+    await expect(shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()).toBeVisible({
+      timeout: 30_000,
+    })
 
     await expect
       .poll(
@@ -129,14 +148,14 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
       )
       .not.toBeUndefined()
 
-    const copyButton = rightSection.locator('button[aria-label="Copy link"]').first()
-    await expect(copyButton).toBeVisible({ timeout: 30_000 })
-
-    const sharedPopover = await openSharePopover(page)
-    const unpublish = sharedPopover.popoverBody.getByRole("button", { name: "Unpublish" }).first()
+    const unpublish = shared.popoverBody.getByRole("button", { name: "Unpublish" }).first()
     await expect(unpublish).toBeVisible({ timeout: 30_000 })
     await unpublish.click()
 
+    await expect(shared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
+      timeout: 30_000,
+    })
+
     await expect
       .poll(
         async () => {
@@ -147,10 +166,8 @@ test("session can be shared and unshared via header button", async ({ page, sdk,
       )
       .toBeUndefined()
 
-    await expect(copyButton).not.toBeVisible({ timeout: 30_000 })
-
-    const unsharedPopover = await openSharePopover(page)
-    await expect(unsharedPopover.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
+    const unshared = await openSharePopover(page)
+    await expect(unshared.popoverBody.getByRole("button", { name: "Publish" }).first()).toBeVisible({
       timeout: 30_000,
     })
   })

packages/app/e2e/settings/settings-keybinds.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "../fixtures"
 import { openSettings, closeDialog, withSession } from "../actions"
-import { keybindButtonSelector } from "../selectors"
+import { keybindButtonSelector, terminalSelector } from "../selectors"
 import { modKey } from "../utils"
 
 test("changing sidebar toggle keybind works", async ({ page, gotoSession }) => {
@@ -9,7 +9,7 @@ test("changing sidebar toggle keybind works", async ({ page, gotoSession }) => {
   const dialog = await openSettings(page)
   await dialog.getByRole("tab", { name: "Shortcuts" }).click()
 
-  const keybindButton = dialog.locator(keybindButtonSelector("sidebar.toggle"))
+  const keybindButton = dialog.locator(keybindButtonSelector("sidebar.toggle")).first()
   await expect(keybindButton).toBeVisible()
 
   const initialKeybind = await keybindButton.textContent()
@@ -51,6 +51,40 @@ test("changing sidebar toggle keybind works", async ({ page, gotoSession }) => {
   expect(finalClosed).toBe(initiallyClosed)
 })
 
+test("sidebar toggle keybind guards against shortcut conflicts", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  await dialog.getByRole("tab", { name: "Shortcuts" }).click()
+
+  const keybindButton = dialog.locator(keybindButtonSelector("sidebar.toggle"))
+  await expect(keybindButton).toBeVisible()
+
+  const initialKeybind = await keybindButton.textContent()
+  expect(initialKeybind).toContain("B")
+
+  await keybindButton.click()
+  await expect(keybindButton).toHaveText(/press/i)
+
+  await page.keyboard.press(`${modKey}+Shift+KeyP`)
+  await page.waitForTimeout(100)
+
+  const toast = page.locator('[data-component="toast"]').last()
+  await expect(toast).toBeVisible()
+  await expect(toast).toContainText(/already/i)
+
+  await keybindButton.click()
+  await expect(keybindButton).toContainText("B")
+
+  const stored = await page.evaluate(() => {
+    const raw = localStorage.getItem("settings.v3")
+    return raw ? JSON.parse(raw) : null
+  })
+  expect(stored?.keybinds?.["sidebar.toggle"]).toBeUndefined()
+
+  await closeDialog(page, dialog)
+})
+
 test("resetting all keybinds to defaults works", async ({ page, gotoSession }) => {
   await page.addInitScript(() => {
     localStorage.setItem("settings.v3", JSON.stringify({ keybinds: { "sidebar.toggle": "mod+shift+x" } }))
@@ -267,11 +301,52 @@ test("changing terminal toggle keybind works", async ({ page, gotoSession }) =>
 
   await closeDialog(page, dialog)
 
+  const terminal = page.locator(terminalSelector)
+  await expect(terminal).not.toBeVisible()
+
   await page.keyboard.press(`${modKey}+Y`)
+  await expect(terminal).toBeVisible()
+
+  await page.keyboard.press(`${modKey}+Y`)
+  await expect(terminal).not.toBeVisible()
+})
+
+test("terminal toggle keybind persists after reload", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  await dialog.getByRole("tab", { name: "Shortcuts" }).click()
+
+  const keybindButton = dialog.locator(keybindButtonSelector("terminal.toggle"))
+  await expect(keybindButton).toBeVisible()
+
+  await keybindButton.click()
+  await expect(keybindButton).toHaveText(/press/i)
+
+  await page.keyboard.press(`${modKey}+Shift+KeyY`)
   await page.waitForTimeout(100)
 
-  const pageStable = await page.evaluate(() => document.readyState === "complete")
-  expect(pageStable).toBe(true)
+  await expect(keybindButton).toContainText("Y")
+  await closeDialog(page, dialog)
+
+  await page.reload()
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        const raw = localStorage.getItem("settings.v3")
+        if (!raw) return
+        const parsed = JSON.parse(raw)
+        return parsed?.keybinds?.["terminal.toggle"]
+      })
+    })
+    .toBe("mod+shift+y")
+
+  const reloaded = await openSettings(page)
+  await reloaded.getByRole("tab", { name: "Shortcuts" }).click()
+  const reloadedKeybind = reloaded.locator(keybindButtonSelector("terminal.toggle")).first()
+  await expect(reloadedKeybind).toContainText("Y")
+  await closeDialog(page, reloaded)
 })
 
 test("changing command palette keybind works", async ({ page, gotoSession }) => {

packages/app/e2e/settings/settings.spec.ts

@@ -9,6 +9,8 @@ import {
   settingsNotificationsPermissionsSelector,
   settingsReleaseNotesSelector,
   settingsSoundsAgentSelector,
+  settingsSoundsErrorsSelector,
+  settingsSoundsPermissionsSelector,
   settingsThemeSelector,
   settingsUpdatesStartupSelector,
 } from "../selectors"
@@ -139,6 +141,105 @@ test("changing font persists in localStorage and updates CSS variable", async ({
   expect(newFontFamily).not.toBe(initialFontFamily)
 })
 
+test("color scheme and font rehydrate after reload", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+
+  const colorSchemeSelect = dialog.locator(settingsColorSchemeSelector)
+  await expect(colorSchemeSelect).toBeVisible()
+  await colorSchemeSelect.locator('[data-slot="select-select-trigger"]').click()
+  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "Dark" }).click()
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
+
+  const fontSelect = dialog.locator(settingsFontSelector)
+  await expect(fontSelect).toBeVisible()
+
+  const initialFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+
+  const initialSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const currentFont =
+    (await fontSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await fontSelect.locator('[data-slot="select-select-trigger"]').click()
+
+  const fontItems = page.locator('[data-slot="select-select-item"]')
+  expect(await fontItems.count()).toBeGreaterThan(1)
+
+  if (currentFont) {
+    await fontItems.filter({ hasNotText: currentFont }).first().click()
+  }
+  if (!currentFont) {
+    await fontItems.nth(1).click()
+  }
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        font: expect.any(String),
+      },
+    })
+
+  const updatedSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const updatedFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+  expect(updatedFontFamily).not.toBe(initialFontFamily)
+  expect(updatedSettings?.appearance?.font).not.toBe(initialSettings?.appearance?.font)
+
+  await closeDialog(page, dialog)
+  await page.reload()
+
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        font: updatedSettings?.appearance?.font,
+      },
+    })
+
+  const rehydratedSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+      })
+    })
+    .not.toBe(initialFontFamily)
+
+  const rehydratedFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+  expect(rehydratedFontFamily).not.toBe(initialFontFamily)
+  expect(rehydratedSettings?.appearance?.font).toBe(updatedSettings?.appearance?.font)
+})
+
 test("toggling notification agent switch updates localStorage", async ({ page, gotoSession }) => {
   await gotoSession()
 
@@ -234,6 +335,67 @@ test("changing sound agent selection persists in localStorage", async ({ page, g
   expect(stored?.sounds?.agent).not.toBe("staplebops-01")
 })
 
+test("changing permissions and errors sounds updates localStorage", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  const permissionsSelect = dialog.locator(settingsSoundsPermissionsSelector)
+  const errorsSelect = dialog.locator(settingsSoundsErrorsSelector)
+  await expect(permissionsSelect).toBeVisible()
+  await expect(errorsSelect).toBeVisible()
+
+  const initial = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const permissionsCurrent =
+    (await permissionsSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await permissionsSelect.locator('[data-slot="select-select-trigger"]').click()
+  const permissionItems = page.locator('[data-slot="select-select-item"]')
+  expect(await permissionItems.count()).toBeGreaterThan(1)
+  if (permissionsCurrent) {
+    await permissionItems.filter({ hasNotText: permissionsCurrent }).first().click()
+  }
+  if (!permissionsCurrent) {
+    await permissionItems.nth(1).click()
+  }
+
+  const errorsCurrent =
+    (await errorsSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await errorsSelect.locator('[data-slot="select-select-trigger"]').click()
+  const errorItems = page.locator('[data-slot="select-select-item"]')
+  expect(await errorItems.count()).toBeGreaterThan(1)
+  if (errorsCurrent) {
+    await errorItems.filter({ hasNotText: errorsCurrent }).first().click()
+  }
+  if (!errorsCurrent) {
+    await errorItems.nth(1).click()
+  }
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      sounds: {
+        permissions: expect.any(String),
+        errors: expect.any(String),
+      },
+    })
+
+  const stored = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  expect(stored?.sounds?.permissions).not.toBe(initial?.sounds?.permissions)
+  expect(stored?.sounds?.errors).not.toBe(initial?.sounds?.errors)
+})
+
 test("toggling updates startup switch updates localStorage", async ({ page, gotoSession }) => {
   await gotoSession()
 

packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "../fixtures"
+import { closeSidebar, hoverSessionItem } from "../actions"
+import { projectSwitchSelector, sessionItemSelector } from "../selectors"
+
+test("collapsed sidebar popover stays open when archiving a session", async ({ page, slug, sdk, gotoSession }) => {
+  const stamp = Date.now()
+
+  const one = await sdk.session.create({ title: `e2e sidebar popover archive 1 ${stamp}` }).then((r) => r.data)
+  const two = await sdk.session.create({ title: `e2e sidebar popover archive 2 ${stamp}` }).then((r) => r.data)
+
+  if (!one?.id) throw new Error("Session create did not return an id")
+  if (!two?.id) throw new Error("Session create did not return an id")
+
+  try {
+    await gotoSession(one.id)
+    await closeSidebar(page)
+
+    const project = page.locator(projectSwitchSelector(slug)).first()
+    await expect(project).toBeVisible()
+    await project.hover()
+
+    await expect(page.locator(sessionItemSelector(one.id)).first()).toBeVisible()
+    await expect(page.locator(sessionItemSelector(two.id)).first()).toBeVisible()
+
+    const item = await hoverSessionItem(page, one.id)
+    await item
+      .getByRole("button", { name: /archive/i })
+      .first()
+      .click()
+
+    await expect(page.locator(sessionItemSelector(two.id)).first()).toBeVisible()
+  } finally {
+    await sdk.session.delete({ sessionID: one.id }).catch(() => undefined)
+    await sdk.session.delete({ sessionID: two.id }).catch(() => undefined)
+  }
+})

packages/app/e2e/sidebar/sidebar.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "../fixtures"
-import { openSidebar, toggleSidebar } from "../actions"
+import { openSidebar, toggleSidebar, withSession } from "../actions"
 
 test("sidebar can be collapsed and expanded", async ({ page, gotoSession }) => {
   await gotoSession()
@@ -12,3 +12,26 @@ test("sidebar can be collapsed and expanded", async ({ page, gotoSession }) => {
   await toggleSidebar(page)
   await expect(page.locator("main")).not.toHaveClass(/xl:border-l/)
 })
+
+test("sidebar collapsed state persists across navigation and reload", async ({ page, sdk, gotoSession }) => {
+  await withSession(sdk, "sidebar persist session 1", async (session1) => {
+    await withSession(sdk, "sidebar persist session 2", async (session2) => {
+      await gotoSession(session1.id)
+
+      await openSidebar(page)
+      await toggleSidebar(page)
+      await expect(page.locator("main")).toHaveClass(/xl:border-l/)
+
+      await gotoSession(session2.id)
+      await expect(page.locator("main")).toHaveClass(/xl:border-l/)
+
+      await page.reload()
+      await expect(page.locator("main")).toHaveClass(/xl:border-l/)
+
+      const opened = await page.evaluate(
+        () => JSON.parse(localStorage.getItem("opencode.global.dat:layout") ?? "{}").sidebar?.opened,
+      )
+      await expect(opened).toBe(false)
+    })
+  })
+})

packages/app/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.1.52",
+  "version": "1.1.59",
   "description": "",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./vite": "./vite.js"
+    "./vite": "./vite.js",
+    "./index.css": "./src/index.css"
   },
   "scripts": {
     "typecheck": "tsgo -b",
@@ -13,7 +14,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "test": "playwright test",
+    "test": "bun run test:unit",
+    "test:unit": "bun test --preload ./happydom.ts ./src",
+    "test:unit:watch": "bun test --watch --preload ./happydom.ts ./src",
     "test:e2e": "playwright test",
     "test:e2e:local": "bun script/e2e-local.ts",
     "test:e2e:ui": "playwright test --ui",

packages/app/playwright.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   expect: {
     timeout: 10_000,
   },
-  fullyParallel: true,
+  fullyParallel: process.env.PLAYWRIGHT_FULLY_PARALLEL === "1",
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],

packages/app/script/e2e-local.ts

@@ -55,6 +55,7 @@ const extraArgs = (() => {
 const [serverPort, webPort] = await Promise.all([freePort(), freePort()])
 
 const sandbox = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-e2e-"))
+const keepSandbox = process.env.OPENCODE_E2E_KEEP_SANDBOX === "1"
 
 const serverEnv = {
   ...process.env,
@@ -83,58 +84,95 @@ const runnerEnv = {
   PLAYWRIGHT_PORT: String(webPort),
 } satisfies Record<string, string>
 
-const seed = Bun.spawn(["bun", "script/seed-e2e.ts"], {
-  cwd: opencodeDir,
-  env: serverEnv,
-  stdout: "inherit",
-  stderr: "inherit",
-})
+let seed: ReturnType<typeof Bun.spawn> | undefined
+let runner: ReturnType<typeof Bun.spawn> | undefined
+let server: { stop: () => Promise<void> | void } | undefined
+let inst: { Instance: { disposeAll: () => Promise<void> | void } } | undefined
+let cleaned = false
 
-const seedExit = await seed.exited
-if (seedExit !== 0) {
-  process.exit(seedExit)
+const cleanup = async () => {
+  if (cleaned) return
+  cleaned = true
+
+  if (seed && seed.exitCode === null) seed.kill("SIGTERM")
+  if (runner && runner.exitCode === null) runner.kill("SIGTERM")
+
+  const jobs = [
+    inst?.Instance.disposeAll(),
+    server?.stop(),
+    keepSandbox ? undefined : fs.rm(sandbox, { recursive: true, force: true }),
+  ].filter(Boolean)
+  await Promise.allSettled(jobs)
 }
 
-Object.assign(process.env, serverEnv)
-process.env.AGENT = "1"
-process.env.OPENCODE = "1"
+const shutdown = (code: number, reason: string) => {
+  process.exitCode = code
+  void cleanup().finally(() => {
+    console.error(`e2e-local shutdown: ${reason}`)
+    process.exit(code)
+  })
+}
 
-const log = await import("../../opencode/src/util/log")
-const install = await import("../../opencode/src/installation")
-await log.Log.init({
-  print: true,
-  dev: install.Installation.isLocal(),
-  level: "WARN",
+const reportInternalError = (reason: string, error: unknown) => {
+  console.warn(`e2e-local ignored server error: ${reason}`)
+  console.warn(error)
+}
+
+process.once("SIGINT", () => shutdown(130, "SIGINT"))
+process.once("SIGTERM", () => shutdown(143, "SIGTERM"))
+process.once("SIGHUP", () => shutdown(129, "SIGHUP"))
+process.once("uncaughtException", (error) => {
+  reportInternalError("uncaughtException", error)
+})
+process.once("unhandledRejection", (error) => {
+  reportInternalError("unhandledRejection", error)
 })
 
-const servermod = await import("../../opencode/src/server/server")
-const inst = await import("../../opencode/src/project/instance")
-const server = servermod.Server.listen({ port: serverPort, hostname: "127.0.0.1" })
-console.log(`opencode server listening on http://127.0.0.1:${serverPort}`)
+let code = 1
+
+try {
+  seed = Bun.spawn(["bun", "script/seed-e2e.ts"], {
+    cwd: opencodeDir,
+    env: serverEnv,
+    stdout: "inherit",
+    stderr: "inherit",
+  })
+
+  const seedExit = await seed.exited
+  if (seedExit !== 0) {
+    code = seedExit
+  } else {
+    Object.assign(process.env, serverEnv)
+    process.env.AGENT = "1"
+    process.env.OPENCODE = "1"
+
+    const log = await import("../../opencode/src/util/log")
+    const install = await import("../../opencode/src/installation")
+    await log.Log.init({
+      print: true,
+      dev: install.Installation.isLocal(),
+      level: "WARN",
+    })
+
+    const servermod = await import("../../opencode/src/server/server")
+    inst = await import("../../opencode/src/project/instance")
+    server = servermod.Server.listen({ port: serverPort, hostname: "127.0.0.1" })
+    console.log(`opencode server listening on http://127.0.0.1:${serverPort}`)
 
-const result = await (async () => {
-  try {
     await waitForHealth(`http://127.0.0.1:${serverPort}/global/health`)
-
-    const runner = Bun.spawn(["bun", "test:e2e", ...extraArgs], {
+    runner = Bun.spawn(["bun", "test:e2e", ...extraArgs], {
       cwd: appDir,
       env: runnerEnv,
       stdout: "inherit",
       stderr: "inherit",
     })
-
-    return { code: await runner.exited }
-  } catch (error) {
-    return { error }
-  } finally {
-    await inst.Instance.disposeAll()
-    await server.stop()
+    code = await runner.exited
   }
-})()
-
-if ("error" in result) {
-  console.error(result.error)
-  process.exit(1)
+} catch (error) {
+  console.error(error)
+  code = 1
+} finally {
+  await cleanup()
 }
 
-process.exit(result.code)
+process.exit(code)

packages/app/src/addons/serialize.test.ts

@@ -36,7 +36,7 @@ function writeAndWait(term: Terminal, data: string): Promise<void> {
   })
 }
 
-describe.skip("SerializeAddon", () => {
+describe("SerializeAddon", () => {
   describe("ANSI color preservation", () => {
     test("should preserve text attributes (bold, italic, underline)", async () => {
       const { term, addon } = createTerminal()

packages/app/src/addons/serialize.ts

@@ -56,6 +56,39 @@ interface IBufferCell {
   isDim(): boolean
 }
 
+type TerminalBuffers = {
+  active?: IBuffer
+  normal?: IBuffer
+  alternate?: IBuffer
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null
+}
+
+const isBuffer = (value: unknown): value is IBuffer => {
+  if (!isRecord(value)) return false
+  if (typeof value.length !== "number") return false
+  if (typeof value.cursorX !== "number") return false
+  if (typeof value.cursorY !== "number") return false
+  if (typeof value.baseY !== "number") return false
+  if (typeof value.viewportY !== "number") return false
+  if (typeof value.getLine !== "function") return false
+  if (typeof value.getNullCell !== "function") return false
+  return true
+}
+
+const getTerminalBuffers = (value: ITerminalCore): TerminalBuffers | undefined => {
+  if (!isRecord(value)) return
+  const raw = value.buffer
+  if (!isRecord(raw)) return
+  const active = isBuffer(raw.active) ? raw.active : undefined
+  const normal = isBuffer(raw.normal) ? raw.normal : undefined
+  const alternate = isBuffer(raw.alternate) ? raw.alternate : undefined
+  if (!active && !normal) return
+  return { active, normal, alternate }
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -498,14 +531,13 @@ export class SerializeAddon implements ITerminalAddon {
       throw new Error("Cannot use addon until it has been loaded")
     }
 
-    const terminal = this._terminal as any
-    const buffer = terminal.buffer
+    const buffer = getTerminalBuffers(this._terminal)
 
     if (!buffer) {
       return ""
     }
 
-    const normalBuffer = buffer.normal || buffer.active
+    const normalBuffer = buffer.normal ?? buffer.active
     const altBuffer = buffer.alternate
 
     if (!normalBuffer) {
@@ -533,14 +565,13 @@ export class SerializeAddon implements ITerminalAddon {
       throw new Error("Cannot use addon until it has been loaded")
     }
 
-    const terminal = this._terminal as any
-    const buffer = terminal.buffer
+    const buffer = getTerminalBuffers(this._terminal)
 
     if (!buffer) {
       return ""
     }
 
-    const activeBuffer = buffer.active || buffer.normal
+    const activeBuffer = buffer.active ?? buffer.normal
     if (!activeBuffer) {
       return ""
     }

packages/app/src/app.tsx

@@ -1,5 +1,5 @@
 import "@/index.css"
-import { ErrorBoundary, Show, lazy, type ParentProps } from "solid-js"
+import { ErrorBoundary, Suspense, lazy, type JSX, type ParentProps } from "solid-js"
 import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
@@ -30,12 +30,26 @@ import { HighlightsProvider } from "@/context/highlights"
 import Layout from "@/pages/layout"
 import DirectoryLayout from "@/pages/directory-layout"
 import { ErrorPage } from "./pages/error"
-import { Suspense } from "solid-js"
-
 const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
 const Loading = () => <div class="size-full" />
 
+const HomeRoute = () => (
+  <Suspense fallback={<Loading />}>
+    <Home />
+  </Suspense>
+)
+
+const SessionRoute = () => (
+  <SessionProviders>
+    <Suspense fallback={<Loading />}>
+      <Session />
+    </Suspense>
+  </SessionProviders>
+)
+
+const SessionIndexRoute = () => <Navigate href="session" />
+
 function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
   return <I18nProvider value={{ locale: language.locale, t: language.t }}>{props.children}</I18nProvider>
@@ -43,7 +57,7 @@ function UiI18nBridge(props: ParentProps) {
 
 declare global {
   interface Window {
-    __OPENCODE__?: { updaterEnabled?: boolean; serverPassword?: string; deepLinks?: string[] }
+    __OPENCODE__?: { updaterEnabled?: boolean; serverPassword?: string; deepLinks?: string[]; wsl?: boolean }
   }
 }
 
@@ -52,6 +66,71 @@ function MarkedProviderWithNativeParser(props: ParentProps) {
   return <MarkedProvider nativeParser={platform.parseMarkdown}>{props.children}</MarkedProvider>
 }
 
+function AppShellProviders(props: ParentProps) {
+  return (
+    <SettingsProvider>
+      <PermissionProvider>
+        <LayoutProvider>
+          <NotificationProvider>
+            <ModelsProvider>
+              <CommandProvider>
+                <HighlightsProvider>
+                  <Layout>{props.children}</Layout>
+                </HighlightsProvider>
+              </CommandProvider>
+            </ModelsProvider>
+          </NotificationProvider>
+        </LayoutProvider>
+      </PermissionProvider>
+    </SettingsProvider>
+  )
+}
+
+function SessionProviders(props: ParentProps) {
+  return (
+    <TerminalProvider>
+      <FileProvider>
+        <PromptProvider>
+          <CommentsProvider>{props.children}</CommentsProvider>
+        </PromptProvider>
+      </FileProvider>
+    </TerminalProvider>
+  )
+}
+
+function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
+  return (
+    <AppShellProviders>
+      {props.appChildren}
+      {props.children}
+    </AppShellProviders>
+  )
+}
+
+const getStoredDefaultServerUrl = (platform: ReturnType<typeof usePlatform>) => {
+  if (platform.platform !== "web") return
+  const result = platform.getDefaultServerUrl?.()
+  if (result instanceof Promise) return
+  if (!result) return
+  return normalizeServerUrl(result)
+}
+
+const resolveDefaultServerUrl = (props: {
+  defaultUrl?: string
+  storedDefaultServerUrl?: string
+  hostname: string
+  origin: string
+  isDev: boolean
+  devHost?: string
+  devPort?: string
+}) => {
+  if (props.defaultUrl) return props.defaultUrl
+  if (props.storedDefaultServerUrl) return props.storedDefaultServerUrl
+  if (props.hostname.includes("opencode.ai")) return "http://localhost:4096"
+  if (props.isDev) return `http://${props.devHost ?? "localhost"}:${props.devPort ?? "4096"}`
+  return props.origin
+}
+
 export function AppBaseProviders(props: ParentProps) {
   return (
     <MetaProvider>
@@ -77,86 +156,35 @@ export function AppBaseProviders(props: ParentProps) {
 
 function ServerKey(props: ParentProps) {
   const server = useServer()
-  return (
-    <Show when={server.url} keyed>
-      {props.children}
-    </Show>
-  )
+  if (!server.url) return null
+  return props.children
 }
 
-export function AppInterface(props: { defaultUrl?: string }) {
+export function AppInterface(props: { defaultUrl?: string; children?: JSX.Element; isSidecar?: boolean }) {
   const platform = usePlatform()
-
-  const stored = (() => {
-    if (platform.platform !== "web") return
-    const result = platform.getDefaultServerUrl?.()
-    if (result instanceof Promise) return
-    if (!result) return
-    return normalizeServerUrl(result)
-  })()
-
-  const defaultServerUrl = () => {
-    if (props.defaultUrl) return props.defaultUrl
-    if (stored) return stored
-    if (location.hostname.includes("opencode.ai")) return "http://localhost:4096"
-    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
-  }
+  const storedDefaultServerUrl = getStoredDefaultServerUrl(platform)
+  const defaultServerUrl = resolveDefaultServerUrl({
+    defaultUrl: props.defaultUrl,
+    storedDefaultServerUrl,
+    hostname: location.hostname,
+    origin: window.location.origin,
+    isDev: import.meta.env.DEV,
+    devHost: import.meta.env.VITE_OPENCODE_SERVER_HOST,
+    devPort: import.meta.env.VITE_OPENCODE_SERVER_PORT,
+  })
 
   return (
-    <ServerProvider defaultUrl={defaultServerUrl()}>
+    <ServerProvider defaultUrl={defaultServerUrl} isSidecar={props.isSidecar}>
       <ServerKey>
         <GlobalSDKProvider>
           <GlobalSyncProvider>
             <Router
-              root={(props) => (
-                <SettingsProvider>
-                  <PermissionProvider>
-                    <LayoutProvider>
-                      <NotificationProvider>
-                        <ModelsProvider>
-                          <CommandProvider>
-                            <HighlightsProvider>
-                              <Layout>{props.children}</Layout>
-                            </HighlightsProvider>
-                          </CommandProvider>
-                        </ModelsProvider>
-                      </NotificationProvider>
-                    </LayoutProvider>
-                  </PermissionProvider>
-                </SettingsProvider>
-              )}
+              root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
             >
-              <Route
-                path="/"
-                component={() => (
-                  <Suspense fallback={<Loading />}>
-                    <Home />
-                  </Suspense>
-                )}
-              />
+              <Route path="/" component={HomeRoute} />
               <Route path="/:dir" component={DirectoryLayout}>
-                <Route path="/" component={() => <Navigate href="session" />} />
-                <Route
-                  path="/session/:id?"
-                  component={(p) => (
-                    <Show when={p.params.id ?? "new"}>
-                      <TerminalProvider>
-                        <FileProvider>
-                          <PromptProvider>
-                            <CommentsProvider>
-                              <Suspense fallback={<Loading />}>
-                                <Session />
-                              </Suspense>
-                            </CommentsProvider>
-                          </PromptProvider>
-                        </FileProvider>
-                      </TerminalProvider>
-                    </Show>
-                  )}
-                />
+                <Route path="/" component={SessionIndexRoute} />
+                <Route path="/session/:id?" component={SessionRoute} />
               </Route>
             </Router>
           </GlobalSyncProvider>

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

@@ -10,7 +10,6 @@ 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"
@@ -55,6 +54,47 @@ export function DialogConnectProvider(props: { provider: string }) {
     error: undefined as string | undefined,
   })
 
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: ProviderAuthAuthorization }
+    | { type: "auth.error"; error: string }
+
+  function dispatch(action: Action) {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
   const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
 
   const methodLabel = (value?: { type?: string; label?: string }) => {
@@ -70,17 +110,10 @@ export function DialogConnectProvider(props: { provider: string }) {
     }
 
     const method = methods()[index]
-    setStore(
-      produce((draft) => {
-        draft.methodIndex = index
-        draft.authorization = undefined
-        draft.state = undefined
-        draft.error = undefined
-      }),
-    )
+    dispatch({ type: "method.select", index })
 
     if (method.type === "oauth") {
-      setStore("state", "pending")
+      dispatch({ type: "auth.pending" })
       const start = Date.now()
       await globalSDK.client.provider.oauth
         .authorize(
@@ -100,18 +133,15 @@ export function DialogConnectProvider(props: { provider: string }) {
             timer.current = setTimeout(() => {
               timer.current = undefined
               if (!alive.value) return
-              setStore("state", "complete")
-              setStore("authorization", x.data!)
+              dispatch({ type: "auth.complete", authorization: x.data! })
             }, delay)
             return
           }
-          setStore("state", "complete")
-          setStore("authorization", x.data!)
+          dispatch({ type: "auth.complete", authorization: x.data! })
         })
         .catch((e) => {
           if (!alive.value) return
-          setStore("state", "error")
-          setStore("error", String(e))
+          dispatch({ type: "auth.error", error: String(e) })
         })
     }
   }
@@ -129,10 +159,6 @@ export function DialogConnectProvider(props: { provider: string }) {
     if (methods().length === 1) {
       selectMethod(0)
     }
-    document.addEventListener("keydown", handleKey)
-    onCleanup(() => {
-      document.removeEventListener("keydown", handleKey)
-    })
   })
 
   async function complete() {
@@ -152,17 +178,244 @@ export function DialogConnectProvider(props: { provider: string }) {
       return
     }
     if (store.authorization) {
-      setStore("authorization", undefined)
-      setStore("methodIndex", undefined)
+      dispatch({ type: "method.reset" })
       return
     }
-    if (store.methodIndex) {
-      setStore("methodIndex", undefined)
+    if (store.methodIndex !== undefined) {
+      dispatch({ type: "method.reset" })
       return
     }
     dialog.show(() => <DialogSelectProvider />)
   }
 
+  function MethodSelection() {
+    return (
+      <>
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.selectMethod", { provider: provider().name })}
+        </div>
+        <div>
+          <List
+            ref={(ref) => {
+              listRef = ref
+            }}
+            items={methods}
+            key={(m) => m?.label}
+            onSelect={async (selected, index) => {
+              if (!selected) 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 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
+                </div>
+                <span>{methodLabel(i)}</span>
+              </div>
+            )}
+          </List>
+        </div>
+      </>
+    )
+  }
+
+  function ApiAuthView() {
+    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", language.t("provider.connect.apiKey.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">{language.t("provider.connect.opencodeZen.line1")}</div>
+              <div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line2")}</div>
+              <div class="text-14-regular text-text-base">
+                {language.t("provider.connect.opencodeZen.visit.prefix")}
+                <Link href="https://opencode.ai/zen" tabIndex={-1}>
+                  {language.t("provider.connect.opencodeZen.visit.link")}
+                </Link>
+                {language.t("provider.connect.opencodeZen.visit.suffix")}
+              </div>
+            </div>
+          </Match>
+          <Match when={true}>
+            <div class="text-14-regular text-text-base">
+              {language.t("provider.connect.apiKey.description", { provider: provider().name })}
+            </div>
+          </Match>
+        </Switch>
+        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
+            placeholder={language.t("provider.connect.apiKey.placeholder")}
+            name="apiKey"
+            value={formStore.value}
+            onChange={(v) => setFormStore("value", v)}
+            validationState={formStore.error ? "invalid" : undefined}
+            error={formStore.error}
+          />
+          <Button class="w-auto" type="submit" size="large" variant="primary">
+            {language.t("common.submit")}
+          </Button>
+        </form>
+      </div>
+    )
+  }
+
+  function OAuthCodeView() {
+    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", language.t("provider.connect.oauth.code.required"))
+        return
+      }
+
+      setFormStore("error", undefined)
+      const result = await globalSDK.client.provider.oauth
+        .callback({
+          providerID: props.provider,
+          method: store.methodIndex,
+          code,
+        })
+        .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+        .catch((error) => ({ ok: false as const, error }))
+      if (result.ok) {
+        await complete()
+        return
+      }
+      const message = result.error instanceof Error ? result.error.message : String(result.error)
+      setFormStore("error", message || language.t("provider.connect.oauth.code.invalid"))
+    }
+
+    return (
+      <div class="flex flex-col gap-6">
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.oauth.code.visit.prefix")}
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
+        </div>
+        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })}
+            placeholder={language.t("provider.connect.oauth.code.placeholder")}
+            name="code"
+            value={formStore.value}
+            onChange={(v) => setFormStore("value", v)}
+            validationState={formStore.error ? "invalid" : undefined}
+            error={formStore.error}
+          />
+          <Button class="w-auto" type="submit" size="large" variant="primary">
+            {language.t("common.submit")}
+          </Button>
+        </form>
+      </div>
+    )
+  }
+
+  function OAuthAutoView() {
+    const code = createMemo(() => {
+      const instructions = store.authorization?.instructions
+      if (instructions?.includes(":")) {
+        return instructions.split(":")[1]?.trim()
+      }
+      return instructions
+    })
+
+    onMount(() => {
+      void (async () => {
+        if (store.authorization?.url) {
+          platform.openLink(store.authorization.url)
+        }
+
+        const result = await globalSDK.client.provider.oauth
+          .callback({
+            providerID: props.provider,
+            method: store.methodIndex,
+          })
+          .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+          .catch((error) => ({ ok: false as const, error }))
+
+        if (!alive.value) return
+
+        if (!result.ok) {
+          const message = result.error instanceof Error ? result.error.message : String(result.error)
+          dispatch({ type: "auth.error", error: message })
+          return
+        }
+
+        await complete()
+      })()
+    })
+
+    return (
+      <div class="flex flex-col gap-6">
+        <div class="text-14-regular text-text-base">
+          {language.t("provider.connect.oauth.auto.visit.prefix")}
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
+        </div>
+        <TextField
+          label={language.t("provider.connect.oauth.auto.confirmationCode")}
+          class="font-mono"
+          value={code()}
+          readOnly
+          copyable
+        />
+        <div class="text-14-regular text-text-base flex items-center gap-4">
+          <Spinner />
+          <span>{language.t("provider.connect.status.waiting")}</span>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <Dialog
       title={
@@ -188,267 +441,42 @@ export function DialogConnectProvider(props: { provider: string }) {
           </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">
-                {language.t("provider.connect.selectMethod", { provider: 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 ml-0 bg-icon-strong-base hidden" data-slot="list-item-extra-icon" />
-                      </div>
-                      <span>{methodLabel(i)}</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>{language.t("provider.connect.status.inProgress")}</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>{language.t("provider.connect.status.failed", { error: 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", language.t("provider.connect.apiKey.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">
-                            {language.t("provider.connect.opencodeZen.line1")}
-                          </div>
-                          <div class="text-14-regular text-text-base">
-                            {language.t("provider.connect.opencodeZen.line2")}
-                          </div>
-                          <div class="text-14-regular text-text-base">
-                            {language.t("provider.connect.opencodeZen.visit.prefix")}
-                            <Link href="https://opencode.ai/zen" tabIndex={-1}>
-                              {language.t("provider.connect.opencodeZen.visit.link")}
-                            </Link>
-                            {language.t("provider.connect.opencodeZen.visit.suffix")}
-                          </div>
-                        </div>
-                      </Match>
-                      <Match when={true}>
-                        <div class="text-14-regular text-text-base">
-                          {language.t("provider.connect.apiKey.description", { provider: provider().name })}
-                        </div>
-                      </Match>
-                    </Switch>
-                    <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
-                      <TextField
-                        autofocus
-                        type="text"
-                        label={language.t("provider.connect.apiKey.label", { provider: provider().name })}
-                        placeholder={language.t("provider.connect.apiKey.placeholder")}
-                        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">
-                        {language.t("common.submit")}
-                      </Button>
-                    </form>
+          <div onKeyDown={handleKey} tabIndex={0} autofocus={store.methodIndex === undefined ? true : undefined}>
+            <Switch>
+              <Match when={store.methodIndex === undefined}>
+                <MethodSelection />
+              </Match>
+              <Match when={store.state === "pending"}>
+                <div class="text-14-regular text-text-base">
+                  <div class="flex items-center gap-x-2">
+                    <Spinner />
+                    <span>{language.t("provider.connect.status.inProgress")}</span>
                   </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", language.t("provider.connect.oauth.code.required"))
-                        return
-                      }
-
-                      setFormStore("error", undefined)
-                      const result = await globalSDK.client.provider.oauth
-                        .callback({
-                          providerID: props.provider,
-                          method: store.methodIndex,
-                          code,
-                        })
-                        .then((value) =>
-                          value.error ? { ok: false as const, error: value.error } : { ok: true as const },
-                        )
-                        .catch((error) => ({ ok: false as const, error }))
-                      if (result.ok) {
-                        await complete()
-                        return
-                      }
-                      const message = result.error instanceof Error ? result.error.message : String(result.error)
-                      setFormStore("error", message || language.t("provider.connect.oauth.code.invalid"))
-                    }
-
-                    return (
-                      <div class="flex flex-col gap-6">
-                        <div class="text-14-regular text-text-base">
-                          {language.t("provider.connect.oauth.code.visit.prefix")}
-                          <Link href={store.authorization!.url}>
-                            {language.t("provider.connect.oauth.code.visit.link")}
-                          </Link>
-                          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
-                        </div>
-                        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
-                          <TextField
-                            autofocus
-                            type="text"
-                            label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })}
-                            placeholder={language.t("provider.connect.oauth.code.placeholder")}
-                            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">
-                            {language.t("common.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(() => {
-                      void (async () => {
-                        if (store.authorization?.url) {
-                          platform.openLink(store.authorization.url)
-                        }
-
-                        const result = await globalSDK.client.provider.oauth
-                          .callback({
-                            providerID: props.provider,
-                            method: store.methodIndex,
-                          })
-                          .then((value) =>
-                            value.error ? { ok: false as const, error: value.error } : { ok: true as const },
-                          )
-                          .catch((error) => ({ ok: false as const, error }))
-
-                        if (!alive.value) return
-
-                        if (!result.ok) {
-                          const message = result.error instanceof Error ? result.error.message : String(result.error)
-                          setStore("state", "error")
-                          setStore("error", message)
-                          return
-                        }
-
-                        await complete()
-                      })()
-                    })
-
-                    return (
-                      <div class="flex flex-col gap-6">
-                        <div class="text-14-regular text-text-base">
-                          {language.t("provider.connect.oauth.auto.visit.prefix")}
-                          <Link href={store.authorization!.url}>
-                            {language.t("provider.connect.oauth.auto.visit.link")}
-                          </Link>
-                          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
-                        </div>
-                        <TextField
-                          label={language.t("provider.connect.oauth.auto.confirmationCode")}
-                          class="font-mono"
-                          value={code()}
-                          readOnly
-                          copyable
-                        />
-                        <div class="text-14-regular text-text-base flex items-center gap-4">
-                          <Spinner />
-                          <span>{language.t("provider.connect.status.waiting")}</span>
-                        </div>
-                      </div>
-                    )
-                  })}
-                </Match>
-              </Switch>
-            </Match>
-          </Switch>
+                </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>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
+                  </div>
+                </div>
+              </Match>
+              <Match when={method()?.type === "api"}>
+                <ApiAuthView />
+              </Match>
+              <Match when={method()?.type === "oauth"}>
+                <Switch>
+                  <Match when={store.authorization?.method === "code"}>
+                    <OAuthCodeView />
+                  </Match>
+                  <Match when={store.authorization?.method === "auto"}>
+                    <OAuthAutoView />
+                  </Match>
+                </Switch>
+              </Match>
+            </Switch>
+          </div>
         </div>
       </div>
     </Dialog>

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

@@ -6,7 +6,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
 import { For } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { createStore } from "solid-js/store"
 import { Link } from "@/components/link"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
@@ -16,6 +16,147 @@ import { DialogSelectProvider } from "./dialog-select-provider"
 const PROVIDER_ID = /^[a-z0-9][a-z0-9-_]*$/
 const OPENAI_COMPATIBLE = "@ai-sdk/openai-compatible"
 
+type Translator = ReturnType<typeof useLanguage>["t"]
+
+type ModelRow = {
+  id: string
+  name: string
+}
+
+type HeaderRow = {
+  key: string
+  value: string
+}
+
+type FormState = {
+  providerID: string
+  name: string
+  baseURL: string
+  apiKey: string
+  models: ModelRow[]
+  headers: HeaderRow[]
+  saving: boolean
+}
+
+type FormErrors = {
+  providerID: string | undefined
+  name: string | undefined
+  baseURL: string | undefined
+  models: Array<{ id?: string; name?: string }>
+  headers: Array<{ key?: string; value?: string }>
+}
+
+type ValidateArgs = {
+  form: FormState
+  t: Translator
+  disabledProviders: string[]
+  existingProviderIDs: Set<string>
+}
+
+function validateCustomProvider(input: ValidateArgs) {
+  const providerID = input.form.providerID.trim()
+  const name = input.form.name.trim()
+  const baseURL = input.form.baseURL.trim()
+  const apiKey = input.form.apiKey.trim()
+
+  const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
+  const key = apiKey && !env ? apiKey : undefined
+
+  const idError = !providerID
+    ? input.t("provider.custom.error.providerID.required")
+    : !PROVIDER_ID.test(providerID)
+      ? input.t("provider.custom.error.providerID.format")
+      : undefined
+
+  const nameError = !name ? input.t("provider.custom.error.name.required") : undefined
+  const urlError = !baseURL
+    ? input.t("provider.custom.error.baseURL.required")
+    : !/^https?:\/\//.test(baseURL)
+      ? input.t("provider.custom.error.baseURL.format")
+      : undefined
+
+  const disabled = input.disabledProviders.includes(providerID)
+  const existsError = idError
+    ? undefined
+    : input.existingProviderIDs.has(providerID) && !disabled
+      ? input.t("provider.custom.error.providerID.exists")
+      : undefined
+
+  const seenModels = new Set<string>()
+  const modelErrors = input.form.models.map((m) => {
+    const id = m.id.trim()
+    const modelIdError = !id
+      ? input.t("provider.custom.error.required")
+      : seenModels.has(id)
+        ? input.t("provider.custom.error.duplicate")
+        : (() => {
+            seenModels.add(id)
+            return undefined
+          })()
+    const modelNameError = !m.name.trim() ? input.t("provider.custom.error.required") : undefined
+    return { id: modelIdError, name: modelNameError }
+  })
+  const modelsValid = modelErrors.every((m) => !m.id && !m.name)
+  const models = Object.fromEntries(input.form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
+
+  const seenHeaders = new Set<string>()
+  const headerErrors = input.form.headers.map((h) => {
+    const key = h.key.trim()
+    const value = h.value.trim()
+
+    if (!key && !value) return {}
+    const keyError = !key
+      ? input.t("provider.custom.error.required")
+      : seenHeaders.has(key.toLowerCase())
+        ? input.t("provider.custom.error.duplicate")
+        : (() => {
+            seenHeaders.add(key.toLowerCase())
+            return undefined
+          })()
+    const valueError = !value ? input.t("provider.custom.error.required") : undefined
+    return { key: keyError, value: valueError }
+  })
+  const headersValid = headerErrors.every((h) => !h.key && !h.value)
+  const headers = Object.fromEntries(
+    input.form.headers
+      .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
+      .filter((h) => !!h.key && !!h.value)
+      .map((h) => [h.key, h.value]),
+  )
+
+  const errors: FormErrors = {
+    providerID: idError ?? existsError,
+    name: nameError,
+    baseURL: urlError,
+    models: modelErrors,
+    headers: headerErrors,
+  }
+
+  const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
+  if (!ok) return { errors }
+
+  const options = {
+    baseURL,
+    ...(Object.keys(headers).length ? { headers } : {}),
+  }
+
+  return {
+    errors,
+    result: {
+      providerID,
+      name,
+      key,
+      config: {
+        npm: OPENAI_COMPATIBLE,
+        name,
+        ...(env ? { env: [env] } : {}),
+        options,
+        models,
+      },
+    },
+  }
+}
+
 type Props = {
   back?: "providers" | "close"
 }
@@ -26,7 +167,7 @@ export function DialogCustomProvider(props: Props) {
   const globalSDK = useGlobalSDK()
   const language = useLanguage()
 
-  const [form, setForm] = createStore({
+  const [form, setForm] = createStore<FormState>({
     providerID: "",
     name: "",
     baseURL: "",
@@ -36,12 +177,12 @@ export function DialogCustomProvider(props: Props) {
     saving: false,
   })
 
-  const [errors, setErrors] = createStore({
-    providerID: undefined as string | undefined,
-    name: undefined as string | undefined,
-    baseURL: undefined as string | undefined,
-    models: [{} as { id?: string; name?: string }],
-    headers: [{} as { key?: string; value?: string }],
+  const [errors, setErrors] = createStore<FormErrors>({
+    providerID: undefined,
+    name: undefined,
+    baseURL: undefined,
+    models: [{}],
+    headers: [{}],
   })
 
   const goBack = () => {
@@ -53,169 +194,36 @@ export function DialogCustomProvider(props: Props) {
   }
 
   const addModel = () => {
-    setForm(
-      "models",
-      produce((draft) => {
-        draft.push({ id: "", name: "" })
-      }),
-    )
-    setErrors(
-      "models",
-      produce((draft) => {
-        draft.push({})
-      }),
-    )
+    setForm("models", (v) => [...v, { id: "", name: "" }])
+    setErrors("models", (v) => [...v, {}])
   }
 
   const removeModel = (index: number) => {
     if (form.models.length <= 1) return
-    setForm(
-      "models",
-      produce((draft) => {
-        draft.splice(index, 1)
-      }),
-    )
-    setErrors(
-      "models",
-      produce((draft) => {
-        draft.splice(index, 1)
-      }),
-    )
+    setForm("models", (v) => v.filter((_, i) => i !== index))
+    setErrors("models", (v) => v.filter((_, i) => i !== index))
   }
 
   const addHeader = () => {
-    setForm(
-      "headers",
-      produce((draft) => {
-        draft.push({ key: "", value: "" })
-      }),
-    )
-    setErrors(
-      "headers",
-      produce((draft) => {
-        draft.push({})
-      }),
-    )
+    setForm("headers", (v) => [...v, { key: "", value: "" }])
+    setErrors("headers", (v) => [...v, {}])
   }
 
   const removeHeader = (index: number) => {
     if (form.headers.length <= 1) return
-    setForm(
-      "headers",
-      produce((draft) => {
-        draft.splice(index, 1)
-      }),
-    )
-    setErrors(
-      "headers",
-      produce((draft) => {
-        draft.splice(index, 1)
-      }),
-    )
+    setForm("headers", (v) => v.filter((_, i) => i !== index))
+    setErrors("headers", (v) => v.filter((_, i) => i !== index))
   }
 
   const validate = () => {
-    const providerID = form.providerID.trim()
-    const name = form.name.trim()
-    const baseURL = form.baseURL.trim()
-    const apiKey = form.apiKey.trim()
-
-    const env = apiKey.match(/^\{env:([^}]+)\}$/)?.[1]?.trim()
-    const key = apiKey && !env ? apiKey : undefined
-
-    const idError = !providerID
-      ? "Provider ID is required"
-      : !PROVIDER_ID.test(providerID)
-        ? "Use lowercase letters, numbers, hyphens, or underscores"
-        : undefined
-
-    const nameError = !name ? "Display name is required" : undefined
-    const urlError = !baseURL
-      ? "Base URL is required"
-      : !/^https?:\/\//.test(baseURL)
-        ? "Must start with http:// or https://"
-        : undefined
-
-    const disabled = (globalSync.data.config.disabled_providers ?? []).includes(providerID)
-    const existingProvider = globalSync.data.provider.all.find((p) => p.id === providerID)
-    const existsError = idError
-      ? undefined
-      : existingProvider && !disabled
-        ? "That provider ID already exists"
-        : undefined
-
-    const seenModels = new Set<string>()
-    const modelErrors = form.models.map((m) => {
-      const id = m.id.trim()
-      const modelIdError = !id
-        ? "Required"
-        : seenModels.has(id)
-          ? "Duplicate"
-          : (() => {
-              seenModels.add(id)
-              return undefined
-            })()
-      const modelNameError = !m.name.trim() ? "Required" : undefined
-      return { id: modelIdError, name: modelNameError }
+    const output = validateCustomProvider({
+      form,
+      t: language.t,
+      disabledProviders: globalSync.data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(globalSync.data.provider.all.map((p) => p.id)),
     })
-    const modelsValid = modelErrors.every((m) => !m.id && !m.name)
-    const models = Object.fromEntries(form.models.map((m) => [m.id.trim(), { name: m.name.trim() }]))
-
-    const seenHeaders = new Set<string>()
-    const headerErrors = form.headers.map((h) => {
-      const key = h.key.trim()
-      const value = h.value.trim()
-
-      if (!key && !value) return {}
-      const keyError = !key
-        ? "Required"
-        : seenHeaders.has(key.toLowerCase())
-          ? "Duplicate"
-          : (() => {
-              seenHeaders.add(key.toLowerCase())
-              return undefined
-            })()
-      const valueError = !value ? "Required" : undefined
-      return { key: keyError, value: valueError }
-    })
-    const headersValid = headerErrors.every((h) => !h.key && !h.value)
-    const headers = Object.fromEntries(
-      form.headers
-        .map((h) => ({ key: h.key.trim(), value: h.value.trim() }))
-        .filter((h) => !!h.key && !!h.value)
-        .map((h) => [h.key, h.value]),
-    )
-
-    setErrors(
-      produce((draft) => {
-        draft.providerID = idError ?? existsError
-        draft.name = nameError
-        draft.baseURL = urlError
-        draft.models = modelErrors
-        draft.headers = headerErrors
-      }),
-    )
-
-    const ok = !idError && !existsError && !nameError && !urlError && modelsValid && headersValid
-    if (!ok) return
-
-    const options = {
-      baseURL,
-      ...(Object.keys(headers).length ? { headers } : {}),
-    }
-
-    return {
-      providerID,
-      name,
-      key,
-      config: {
-        npm: OPENAI_COMPATIBLE,
-        name,
-        ...(env ? { env: [env] } : {}),
-        options,
-        models,
-      },
-    }
+    setErrors(output.errors)
+    return output.result
   }
 
   const save = async (e: SubmitEvent) => {
@@ -278,64 +286,64 @@ export function DialogCustomProvider(props: Props) {
       <div class="flex flex-col gap-6 px-2.5 pb-3 overflow-y-auto max-h-[60vh]">
         <div class="px-2.5 flex gap-4 items-center">
           <ProviderIcon id="synthetic" class="size-5 shrink-0 icon-strong-base" />
-          <div class="text-16-medium text-text-strong">Custom provider</div>
+          <div class="text-16-medium text-text-strong">{language.t("provider.custom.title")}</div>
         </div>
 
         <form onSubmit={save} class="px-2.5 pb-6 flex flex-col gap-6">
           <p class="text-14-regular text-text-base">
-            Configure an OpenAI-compatible provider. See the{" "}
+            {language.t("provider.custom.description.prefix")}
             <Link href="https://opencode.ai/docs/providers/#custom-provider" tabIndex={-1}>
-              provider config docs
+              {language.t("provider.custom.description.link")}
             </Link>
-            .
+            {language.t("provider.custom.description.suffix")}
           </p>
 
           <div class="flex flex-col gap-4">
             <TextField
               autofocus
-              label="Provider ID"
-              placeholder="myprovider"
-              description="Lowercase letters, numbers, hyphens, or underscores"
+              label={language.t("provider.custom.field.providerID.label")}
+              placeholder={language.t("provider.custom.field.providerID.placeholder")}
+              description={language.t("provider.custom.field.providerID.description")}
               value={form.providerID}
-              onChange={setForm.bind(null, "providerID")}
+              onChange={(v) => setForm("providerID", v)}
               validationState={errors.providerID ? "invalid" : undefined}
               error={errors.providerID}
             />
             <TextField
-              label="Display name"
-              placeholder="My AI Provider"
+              label={language.t("provider.custom.field.name.label")}
+              placeholder={language.t("provider.custom.field.name.placeholder")}
               value={form.name}
-              onChange={setForm.bind(null, "name")}
+              onChange={(v) => setForm("name", v)}
               validationState={errors.name ? "invalid" : undefined}
               error={errors.name}
             />
             <TextField
-              label="Base URL"
-              placeholder="https://api.myprovider.com/v1"
+              label={language.t("provider.custom.field.baseURL.label")}
+              placeholder={language.t("provider.custom.field.baseURL.placeholder")}
               value={form.baseURL}
-              onChange={setForm.bind(null, "baseURL")}
+              onChange={(v) => setForm("baseURL", v)}
               validationState={errors.baseURL ? "invalid" : undefined}
               error={errors.baseURL}
             />
             <TextField
-              label="API key"
-              placeholder="API key"
-              description="Optional. Leave empty if you manage auth via headers."
+              label={language.t("provider.custom.field.apiKey.label")}
+              placeholder={language.t("provider.custom.field.apiKey.placeholder")}
+              description={language.t("provider.custom.field.apiKey.description")}
               value={form.apiKey}
-              onChange={setForm.bind(null, "apiKey")}
+              onChange={(v) => setForm("apiKey", v)}
             />
           </div>
 
           <div class="flex flex-col gap-3">
-            <label class="text-12-medium text-text-weak">Models</label>
+            <label class="text-12-medium text-text-weak">{language.t("provider.custom.models.label")}</label>
             <For each={form.models}>
               {(m, i) => (
                 <div class="flex gap-2 items-start">
                   <div class="flex-1">
                     <TextField
-                      label="ID"
+                      label={language.t("provider.custom.models.id.label")}
                       hideLabel
-                      placeholder="model-id"
+                      placeholder={language.t("provider.custom.models.id.placeholder")}
                       value={m.id}
                       onChange={(v) => setForm("models", i(), "id", v)}
                       validationState={errors.models[i()]?.id ? "invalid" : undefined}
@@ -344,9 +352,9 @@ export function DialogCustomProvider(props: Props) {
                   </div>
                   <div class="flex-1">
                     <TextField
-                      label="Name"
+                      label={language.t("provider.custom.models.name.label")}
                       hideLabel
-                      placeholder="Display Name"
+                      placeholder={language.t("provider.custom.models.name.placeholder")}
                       value={m.name}
                       onChange={(v) => setForm("models", i(), "name", v)}
                       validationState={errors.models[i()]?.name ? "invalid" : undefined}
@@ -360,26 +368,26 @@ export function DialogCustomProvider(props: Props) {
                     class="mt-1.5"
                     onClick={() => removeModel(i())}
                     disabled={form.models.length <= 1}
-                    aria-label="Remove model"
+                    aria-label={language.t("provider.custom.models.remove")}
                   />
                 </div>
               )}
             </For>
             <Button type="button" size="small" variant="ghost" icon="plus-small" onClick={addModel} class="self-start">
-              Add model
+              {language.t("provider.custom.models.add")}
             </Button>
           </div>
 
           <div class="flex flex-col gap-3">
-            <label class="text-12-medium text-text-weak">Headers (optional)</label>
+            <label class="text-12-medium text-text-weak">{language.t("provider.custom.headers.label")}</label>
             <For each={form.headers}>
               {(h, i) => (
                 <div class="flex gap-2 items-start">
                   <div class="flex-1">
                     <TextField
-                      label="Header"
+                      label={language.t("provider.custom.headers.key.label")}
                       hideLabel
-                      placeholder="Header-Name"
+                      placeholder={language.t("provider.custom.headers.key.placeholder")}
                       value={h.key}
                       onChange={(v) => setForm("headers", i(), "key", v)}
                       validationState={errors.headers[i()]?.key ? "invalid" : undefined}
@@ -388,9 +396,9 @@ export function DialogCustomProvider(props: Props) {
                   </div>
                   <div class="flex-1">
                     <TextField
-                      label="Value"
+                      label={language.t("provider.custom.headers.value.label")}
                       hideLabel
-                      placeholder="value"
+                      placeholder={language.t("provider.custom.headers.value.placeholder")}
                       value={h.value}
                       onChange={(v) => setForm("headers", i(), "value", v)}
                       validationState={errors.headers[i()]?.value ? "invalid" : undefined}
@@ -404,18 +412,18 @@ export function DialogCustomProvider(props: Props) {
                     class="mt-1.5"
                     onClick={() => removeHeader(i())}
                     disabled={form.headers.length <= 1}
-                    aria-label="Remove header"
+                    aria-label={language.t("provider.custom.headers.remove")}
                   />
                 </div>
               )}
             </For>
             <Button type="button" size="small" variant="ghost" icon="plus-small" onClick={addHeader} class="self-start">
-              Add header
+              {language.t("provider.custom.headers.add")}
             </Button>
           </div>
 
           <Button class="w-auto self-start" type="submit" size="large" variant="primary" disabled={form.saving}>
-            {form.saving ? "Saving..." : language.t("common.submit")}
+            {form.saving ? language.t("common.saving") : language.t("common.submit")}
           </Button>
         </form>
       </div>

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

@@ -33,6 +33,8 @@ export function DialogEditProject(props: { project: LocalProject }) {
     iconHover: false,
   })
 
+  let iconInput: HTMLInputElement | undefined
+
   function handleFileSelect(file: File) {
     if (!file.type.startsWith("image/")) return
     const reader = new FileReader()
@@ -72,31 +74,35 @@ export function DialogEditProject(props: { project: LocalProject }) {
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
 
-    setStore("saving", true)
-    const name = store.name.trim() === folderName() ? "" : store.name.trim()
-    const start = store.startup.trim()
+    await Promise.resolve()
+      .then(async () => {
+        setStore("saving", true)
+        const name = store.name.trim() === folderName() ? "" : store.name.trim()
+        const start = store.startup.trim()
 
-    if (props.project.id && props.project.id !== "global") {
-      await globalSDK.client.project.update({
-        projectID: props.project.id,
-        directory: props.project.worktree,
-        name,
-        icon: { color: store.color, override: store.iconUrl },
-        commands: { start },
+        if (props.project.id && props.project.id !== "global") {
+          await globalSDK.client.project.update({
+            projectID: props.project.id,
+            directory: props.project.worktree,
+            name,
+            icon: { color: store.color, override: store.iconUrl },
+            commands: { start },
+          })
+          globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
+          dialog.close()
+          return
+        }
+
+        globalSync.project.meta(props.project.worktree, {
+          name,
+          icon: { color: store.color, override: store.iconUrl || undefined },
+          commands: { start: start || undefined },
+        })
+        dialog.close()
+      })
+      .finally(() => {
+        setStore("saving", false)
       })
-      globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
-      setStore("saving", false)
-      dialog.close()
-      return
-    }
-
-    globalSync.project.meta(props.project.worktree, {
-      name,
-      icon: { color: store.color, override: store.iconUrl || undefined },
-      commands: { start: start || undefined },
-    })
-    setStore("saving", false)
-    dialog.close()
   }
 
   return (
@@ -134,7 +140,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                     if (store.iconUrl && store.iconHover) {
                       clearIcon()
                     } else {
-                      document.getElementById("icon-upload")?.click()
+                      iconInput?.click()
                     }
                   }}
                 >
@@ -176,7 +182,16 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   <Icon name="trash" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
                 </div>
               </div>
-              <input id="icon-upload" type="file" accept="image/*" class="hidden" onChange={handleInputChange} />
+              <input
+                id="icon-upload"
+                ref={(el) => {
+                  iconInput = el
+                }}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onChange={handleInputChange}
+              />
               <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
                 <span>{language.t("dialog.project.edit.icon.hint")}</span>
                 <span>{language.t("dialog.project.edit.icon.recommended")}</span>
@@ -223,7 +238,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
             value={store.startup}
             onChange={(v) => setStore("startup", v)}
             spellcheck={false}
-            class="max-h-40 w-full font-mono text-xs no-scrollbar"
+            class="max-h-14 w-full overflow-y-auto font-mono text-xs"
           />
         </div>
 

packages/app/src/components/dialog-fork.tsx

@@ -6,6 +6,7 @@ import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
+import { showToast } from "@opencode-ai/ui/toast"
 import { extractPromptFromParts } from "@/utils/prompt"
 import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client"
 import { base64Encode } from "@opencode-ai/util/encode"
@@ -66,15 +67,23 @@ export const DialogFork: Component = () => {
       attachmentName: language.t("common.attachment"),
     })
 
-    dialog.close()
-
-    sdk.client.session.fork({ sessionID, messageID: item.id }).then((forked) => {
-      if (!forked.data) return
-      navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
-      requestAnimationFrame(() => {
-        prompt.set(restored)
+    sdk.client.session
+      .fork({ sessionID, messageID: item.id })
+      .then((forked) => {
+        if (!forked.data) {
+          showToast({ title: language.t("common.requestFailed") })
+          return
+        }
+        dialog.close()
+        navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
+        requestAnimationFrame(() => {
+          prompt.set(restored)
+        })
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
       })
-    })
   }
 
   return (

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

@@ -17,6 +17,7 @@ export const DialogManageModels: Component = () => {
   const handleConnectProvider = () => {
     dialog.show(() => <DialogSelectProvider />)
   }
+  const providerRank = (id: string) => popularProviders.indexOf(id)
 
   return (
     <Dialog
@@ -37,19 +38,18 @@ export const DialogManageModels: Component = () => {
         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)
+          const aRank = providerRank(a.items[0].provider.id)
+          const bRank = providerRank(b.items[0].provider.id)
+          const aPopular = aRank >= 0
+          const bPopular = bRank >= 0
+          if (aPopular && !bPopular) return -1
+          if (!aPopular && bPopular) return 1
+          return aRank - bRank
         }}
         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)
+          const key = { modelID: x.id, providerID: x.provider.id }
+          local.model.setVisibility(key, !local.model.visible(key))
         }}
       >
         {(i) => (
@@ -57,12 +57,7 @@ export const DialogManageModels: Component = () => {
             <span>{i.name}</span>
             <div onClick={(e) => e.stopPropagation()}>
               <Switch
-                checked={
-                  !!local.model.visible({
-                    modelID: i.id,
-                    providerID: i.provider.id,
-                  })
-                }
+                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
                 onChange={(checked) => {
                   local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
                 }}

packages/app/src/components/dialog-release-notes.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, onMount, onCleanup } from "solid-js"
+import { createSignal } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -40,8 +40,6 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
     handleClose()
   }
 
-  let focusTrap: HTMLDivElement | undefined
-
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       e.preventDefault()
@@ -60,27 +58,13 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
     }
   }
 
-  onMount(() => {
-    focusTrap?.focus()
-    document.addEventListener("keydown", handleKeyDown)
-    onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
-  })
-
-  // Refocus the trap when index changes to ensure escape always works
-  createEffect(() => {
-    index() // track index
-    focusTrap?.focus()
-  })
-
   return (
     <Dialog
       size="large"
       fit
       class="w-[min(calc(100vw-40px),720px)] h-[min(calc(100vh-40px),400px)] -mt-20 min-h-0 overflow-hidden"
     >
-      {/* Hidden element to capture initial focus and handle escape */}
-      <div ref={focusTrap} tabindex="0" class="absolute opacity-0 pointer-events-none" />
-      <div class="flex flex-1 min-w-0 min-h-0">
+      <div class="flex flex-1 min-w-0 min-h-0" tabIndex={0} autofocus onKeyDown={handleKeyDown}>
         {/* Left side - Text content */}
         <div class="flex flex-col flex-1 min-w-0 p-8">
           {/* Top section - feature content (fixed position from top) */}

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

@@ -2,13 +2,13 @@ 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 type { ListRef } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import fuzzysort from "fuzzysort"
 import { createMemo, createResource, createSignal } from "solid-js"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
-import type { ListRef } from "@opencode-ai/ui/list"
 
 interface DialogSelectDirectoryProps {
   title?: string
@@ -21,157 +21,131 @@ type Row = {
   search: string
 }
 
-export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
-  const sync = useGlobalSync()
-  const sdk = useGlobalSDK()
-  const dialog = useDialog()
-  const language = useLanguage()
+function cleanInput(value: string) {
+  const first = (value ?? "").split(/\r?\n/)[0] ?? ""
+  return first.replace(/[\u0000-\u001F\u007F]/g, "").trim()
+}
 
-  const [filter, setFilter] = createSignal("")
+function normalizePath(input: string) {
+  const v = input.replaceAll("\\", "/")
+  if (v.startsWith("//") && !v.startsWith("///")) return "//" + v.slice(2).replace(/\/+/g, "/")
+  return v.replace(/\/+/g, "/")
+}
 
-  let list: ListRef | undefined
+function normalizeDriveRoot(input: string) {
+  const v = normalizePath(input)
+  if (/^[A-Za-z]:$/.test(v)) return v + "/"
+  return v
+}
 
-  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
+function trimTrailing(input: string) {
+  const v = normalizeDriveRoot(input)
+  if (v === "/") return v
+  if (v === "//") return v
+  if (/^[A-Za-z]:\/$/.test(v)) return v
+  return v.replace(/\/+$/, "")
+}
 
-  const [fallbackPath] = createResource(
-    () => (missingBase() ? true : undefined),
-    async () => {
-      return sdk.client.path
-        .get()
-        .then((x) => x.data)
-        .catch(() => undefined)
-    },
-    { initialValue: undefined },
-  )
+function joinPath(base: string | undefined, rel: string) {
+  const b = trimTrailing(base ?? "")
+  const r = trimTrailing(rel).replace(/^\/+/, "")
+  if (!b) return r
+  if (!r) return b
+  if (b.endsWith("/")) return b + r
+  return b + "/" + r
+}
 
-  const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
+function rootOf(input: string) {
+  const v = normalizeDriveRoot(input)
+  if (v.startsWith("//")) return "//"
+  if (v.startsWith("/")) return "/"
+  if (/^[A-Za-z]:\//.test(v)) return v.slice(0, 3)
+  return ""
+}
 
-  const start = createMemo(
-    () => sync.data.path.home || sync.data.path.directory || fallbackPath()?.home || fallbackPath()?.directory,
-  )
+function parentOf(input: string) {
+  const v = trimTrailing(input)
+  if (v === "/") return v
+  if (v === "//") return v
+  if (/^[A-Za-z]:\/$/.test(v)) return v
 
+  const i = v.lastIndexOf("/")
+  if (i <= 0) return "/"
+  if (i === 2 && /^[A-Za-z]:/.test(v)) return v.slice(0, 3)
+  return v.slice(0, i)
+}
+
+function modeOf(input: string) {
+  const raw = normalizeDriveRoot(input.trim())
+  if (!raw) return "relative" as const
+  if (raw.startsWith("~")) return "tilde" as const
+  if (rootOf(raw)) return "absolute" as const
+  return "relative" as const
+}
+
+function tildeOf(absolute: string, home: string) {
+  const full = trimTrailing(absolute)
+  if (!home) return ""
+
+  const hn = trimTrailing(home)
+  const lc = full.toLowerCase()
+  const hc = hn.toLowerCase()
+  if (lc === hc) return "~"
+  if (lc.startsWith(hc + "/")) return "~" + full.slice(hn.length)
+  return ""
+}
+
+function displayPath(path: string, input: string, home: string) {
+  const full = trimTrailing(path)
+  if (modeOf(input) === "absolute") return full
+  return tildeOf(full, home) || full
+}
+
+function toRow(absolute: string, home: string): Row {
+  const full = trimTrailing(absolute)
+  const tilde = tildeOf(full, home)
+  const withSlash = (value: string) => {
+    if (!value) return ""
+    if (value.endsWith("/")) return value
+    return value + "/"
+  }
+
+  const search = Array.from(
+    new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
+  ).join("\n")
+  return { absolute: full, search }
+}
+
+function useDirectorySearch(args: {
+  sdk: ReturnType<typeof useGlobalSDK>
+  start: () => string | undefined
+  home: () => string
+}) {
   const cache = new Map<string, Promise<Array<{ name: string; absolute: string }>>>()
+  let current = 0
 
-  const clean = (value: string) => {
-    const first = (value ?? "").split(/\r?\n/)[0] ?? ""
-    return first.replace(/[\u0000-\u001F\u007F]/g, "").trim()
-  }
-
-  function normalize(input: string) {
-    const v = input.replaceAll("\\", "/")
-    if (v.startsWith("//") && !v.startsWith("///")) return "//" + v.slice(2).replace(/\/+/g, "/")
-    return v.replace(/\/+/g, "/")
-  }
-
-  function normalizeDriveRoot(input: string) {
-    const v = normalize(input)
-    if (/^[A-Za-z]:$/.test(v)) return v + "/"
-    return v
-  }
-
-  function trimTrailing(input: string) {
-    const v = normalizeDriveRoot(input)
-    if (v === "/") return v
-    if (v === "//") return v
-    if (/^[A-Za-z]:\/$/.test(v)) return v
-    return v.replace(/\/+$/, "")
-  }
-
-  function join(base: string | undefined, rel: string) {
-    const b = trimTrailing(base ?? "")
-    const r = trimTrailing(rel).replace(/^\/+/, "")
-    if (!b) return r
-    if (!r) return b
-    if (b.endsWith("/")) return b + r
-    return b + "/" + r
-  }
-
-  function rootOf(input: string) {
-    const v = normalizeDriveRoot(input)
-    if (v.startsWith("//")) return "//"
-    if (v.startsWith("/")) return "/"
-    if (/^[A-Za-z]:\//.test(v)) return v.slice(0, 3)
-    return ""
-  }
-
-  function parentOf(input: string) {
-    const v = trimTrailing(input)
-    if (v === "/") return v
-    if (v === "//") return v
-    if (/^[A-Za-z]:\/$/.test(v)) return v
-
-    const i = v.lastIndexOf("/")
-    if (i <= 0) return "/"
-    if (i === 2 && /^[A-Za-z]:/.test(v)) return v.slice(0, 3)
-    return v.slice(0, i)
-  }
-
-  function modeOf(input: string) {
-    const raw = normalizeDriveRoot(input.trim())
-    if (!raw) return "relative" as const
-    if (raw.startsWith("~")) return "tilde" as const
-    if (rootOf(raw)) return "absolute" as const
-    return "relative" as const
-  }
-
-  function display(path: string, input: string) {
-    const full = trimTrailing(path)
-    if (modeOf(input) === "absolute") return full
-
-    return tildeOf(full) || full
-  }
-
-  function tildeOf(absolute: string) {
-    const full = trimTrailing(absolute)
-    const h = home()
-    if (!h) return ""
-
-    const hn = trimTrailing(h)
-    const lc = full.toLowerCase()
-    const hc = hn.toLowerCase()
-    if (lc === hc) return "~"
-    if (lc.startsWith(hc + "/")) return "~" + full.slice(hn.length)
-    return ""
-  }
-
-  function row(absolute: string): Row {
-    const full = trimTrailing(absolute)
-    const tilde = tildeOf(full)
-
-    const withSlash = (value: string) => {
-      if (!value) return ""
-      if (value.endsWith("/")) return value
-      return value + "/"
-    }
-
-    const search = Array.from(
-      new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
-    ).join("\n")
-    return { absolute: full, search }
-  }
-
-  function scoped(value: string) {
-    const base = start()
+  const scoped = (value: string) => {
+    const base = args.start()
     if (!base) return
 
     const raw = normalizeDriveRoot(value)
     if (!raw) return { directory: trimTrailing(base), path: "" }
 
-    const h = home()
-    if (raw === "~") return { directory: trimTrailing(h ?? base), path: "" }
-    if (raw.startsWith("~/")) return { directory: trimTrailing(h ?? base), path: raw.slice(2) }
+    const h = args.home()
+    if (raw === "~") return { directory: trimTrailing(h || base), path: "" }
+    if (raw.startsWith("~/")) return { directory: trimTrailing(h || base), path: raw.slice(2) }
 
     const root = rootOf(raw)
     if (root) return { directory: trimTrailing(root), path: raw.slice(root.length) }
     return { directory: trimTrailing(base), path: raw }
   }
 
-  async function dirs(dir: string) {
+  const dirs = async (dir: string) => {
     const key = trimTrailing(dir)
     const existing = cache.get(key)
     if (existing) return existing
 
-    const request = sdk.client.file
+    const request = args.sdk.client.file
       .list({ directory: key, path: "" })
       .then((x) => x.data ?? [])
       .catch(() => [])
@@ -188,32 +162,34 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
     return request
   }
 
-  async function match(dir: string, query: string, limit: number) {
+  const match = async (dir: string, query: string, limit: number) => {
     const items = await dirs(dir)
     if (!query) return items.slice(0, limit).map((x) => x.absolute)
     return fuzzysort.go(query, items, { key: "name", limit }).map((x) => x.obj.absolute)
   }
 
-  const directories = async (filter: string) => {
-    const value = clean(filter)
+  return async (filter: string) => {
+    const token = ++current
+    const active = () => token === current
+
+    const value = cleanInput(filter)
     const scopedInput = scoped(value)
     if (!scopedInput) return [] as string[]
 
     const raw = normalizeDriveRoot(value)
     const isPath = raw.startsWith("~") || !!rootOf(raw) || raw.includes("/")
-
     const query = normalizeDriveRoot(scopedInput.path)
 
     const find = () =>
-      sdk.client.find
+      args.sdk.client.find
         .files({ directory: scopedInput.directory, query, type: "directory", limit: 50 })
         .then((x) => x.data ?? [])
         .catch(() => [])
 
     if (!isPath) {
       const results = await find()
-
-      return results.map((rel) => join(scopedInput.directory, rel)).slice(0, 50)
+      if (!active()) return []
+      return results.map((rel) => joinPath(scopedInput.directory, rel)).slice(0, 50)
     }
 
     const segments = query.replace(/^\/+/, "").split("/")
@@ -224,17 +200,20 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
     const branch = 4
     let paths = [scopedInput.directory]
     for (const part of head) {
+      if (!active()) return []
       if (part === "..") {
         paths = paths.map(parentOf)
         continue
       }
 
       const next = (await Promise.all(paths.map((p) => match(p, part, branch)))).flat()
+      if (!active()) return []
       paths = Array.from(new Set(next)).slice(0, cap)
       if (paths.length === 0) return [] as string[]
     }
 
     const out = (await Promise.all(paths.map((p) => match(p, tail, 50)))).flat()
+    if (!active()) return []
     const deduped = Array.from(new Set(out))
     const base = raw.startsWith("~") ? trimTrailing(scopedInput.directory) : ""
     const expand = !raw.endsWith("/")
@@ -249,13 +228,47 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
     if (!target) return deduped.slice(0, 50)
 
     const children = await match(target, "", 30)
+    if (!active()) return []
     const items = Array.from(new Set([...deduped, ...children]))
     return (base ? Array.from(new Set([base, ...items])) : items).slice(0, 50)
   }
+}
+
+export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
+  const sync = useGlobalSync()
+  const sdk = useGlobalSDK()
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  const [filter, setFilter] = createSignal("")
+  let list: ListRef | undefined
+
+  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
+  const [fallbackPath] = createResource(
+    () => (missingBase() ? true : undefined),
+    async () => {
+      return sdk.client.path
+        .get()
+        .then((x) => x.data)
+        .catch(() => undefined)
+    },
+    { initialValue: undefined },
+  )
+
+  const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
+  const start = createMemo(
+    () => sync.data.path.home || sync.data.path.directory || fallbackPath()?.home || fallbackPath()?.directory,
+  )
+
+  const directories = useDirectorySearch({
+    sdk,
+    home,
+    start,
+  })
 
   const items = async (value: string) => {
     const results = await directories(value)
-    return results.map(row)
+    return results.map((absolute) => toRow(absolute, home()))
   }
 
   function resolve(absolute: string) {
@@ -273,7 +286,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
         key={(x) => x.absolute}
         filterKeys={["search"]}
         ref={(r) => (list = r)}
-        onFilter={(value) => setFilter(clean(value))}
+        onFilter={(value) => setFilter(cleanInput(value))}
         onKeyEvent={(e, item) => {
           if (e.key !== "Tab") return
           if (e.shiftKey) return
@@ -282,7 +295,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
           e.preventDefault()
           e.stopPropagation()
 
-          const value = display(item.absolute, filter())
+          const value = displayPath(item.absolute, filter(), home())
           list?.setFilter(value.endsWith("/") ? value : value + "/")
         }}
         onSelect={(path) => {
@@ -291,7 +304,7 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
         }}
       >
         {(item) => {
-          const path = display(item.absolute, filter())
+          const path = displayPath(item.absolute, filter(), home())
           if (path === "~") {
             return (
               <div class="w-full flex items-center justify-between rounded-md">

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

@@ -15,6 +15,7 @@ import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
+import { getRelativeTime } from "@/utils/time"
 
 type EntryType = "command" | "file" | "session"
 
@@ -30,10 +31,228 @@ type Entry = {
   directory?: string
   sessionID?: string
   archived?: number
+  updated?: number
 }
 
 type DialogSelectFileMode = "all" | "files"
 
+const ENTRY_LIMIT = 5
+const COMMON_COMMAND_IDS = [
+  "session.new",
+  "workspace.new",
+  "session.previous",
+  "session.next",
+  "terminal.toggle",
+  "review.toggle",
+] as const
+
+const uniqueEntries = (items: Entry[]) => {
+  const seen = new Set<string>()
+  const out: Entry[] = []
+  for (const item of items) {
+    if (seen.has(item.id)) continue
+    seen.add(item.id)
+    out.push(item)
+  }
+  return out
+}
+
+const createCommandEntry = (option: CommandOption, category: string): Entry => ({
+  id: "command:" + option.id,
+  type: "command",
+  title: option.title,
+  description: option.description,
+  keybind: option.keybind,
+  category,
+  option,
+})
+
+const createFileEntry = (path: string, category: string): Entry => ({
+  id: "file:" + path,
+  type: "file",
+  title: path,
+  category,
+  path,
+})
+
+const createSessionEntry = (
+  input: {
+    directory: string
+    id: string
+    title: string
+    description: string
+    archived?: number
+    updated?: number
+  },
+  category: string,
+): Entry => ({
+  id: `session:${input.directory}:${input.id}`,
+  type: "session",
+  title: input.title,
+  description: input.description,
+  category,
+  directory: input.directory,
+  sessionID: input.id,
+  archived: input.archived,
+  updated: input.updated,
+})
+
+function createCommandEntries(props: {
+  filesOnly: () => boolean
+  command: ReturnType<typeof useCommand>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const allowed = createMemo(() => {
+    if (props.filesOnly()) return []
+    return props.command.options.filter(
+      (option) => !option.disabled && !option.id.startsWith("suggested.") && option.id !== "file.open",
+    )
+  })
+
+  const list = createMemo(() => {
+    const category = props.language.t("palette.group.commands")
+    return allowed().map((option) => createCommandEntry(option, category))
+  })
+
+  const picks = createMemo(() => {
+    const all = allowed()
+    const order = new Map<string, number>(COMMON_COMMAND_IDS.map((id, index) => [id, index]))
+    const picked = all.filter((option) => order.has(option.id))
+    const base = picked.length ? picked : all.slice(0, ENTRY_LIMIT)
+    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
+    const category = props.language.t("palette.group.commands")
+    return sorted.map((option) => createCommandEntry(option, category))
+  })
+
+  return { allowed, list, picks }
+}
+
+function createFileEntries(props: {
+  file: ReturnType<typeof useFile>
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const recent = createMemo(() => {
+    const all = props.tabs().all()
+    const active = props.tabs().active()
+    const order = active ? [active, ...all.filter((item) => item !== active)] : all
+    const seen = new Set<string>()
+    const category = props.language.t("palette.group.files")
+    const items: Entry[] = []
+
+    for (const item of order) {
+      const path = props.file.pathFromTab(item)
+      if (!path) continue
+      if (seen.has(path)) continue
+      seen.add(path)
+      items.push(createFileEntry(path, category))
+    }
+
+    return items.slice(0, ENTRY_LIMIT)
+  })
+
+  const root = createMemo(() => {
+    const category = props.language.t("palette.group.files")
+    const nodes = props.file.tree.children("")
+    const paths = nodes
+      .filter((node) => node.type === "file")
+      .map((node) => node.path)
+      .sort((a, b) => a.localeCompare(b))
+    return paths.slice(0, ENTRY_LIMIT).map((path) => createFileEntry(path, category))
+  })
+
+  return { recent, root }
+}
+
+function createSessionEntries(props: {
+  workspaces: () => string[]
+  label: (directory: string) => string
+  globalSDK: ReturnType<typeof useGlobalSDK>
+  language: ReturnType<typeof useLanguage>
+}) {
+  const state: {
+    token: number
+    inflight: Promise<Entry[]> | undefined
+    cached: Entry[] | undefined
+  } = {
+    token: 0,
+    inflight: undefined,
+    cached: undefined,
+  }
+
+  const sessions = (text: string) => {
+    const query = text.trim()
+    if (!query) {
+      state.token += 1
+      state.inflight = undefined
+      state.cached = undefined
+      return [] as Entry[]
+    }
+
+    if (state.cached) return state.cached
+    if (state.inflight) return state.inflight
+
+    const current = state.token
+    const dirs = props.workspaces()
+    if (dirs.length === 0) return [] as Entry[]
+
+    state.inflight = Promise.all(
+      dirs.map((directory) => {
+        const description = props.label(directory)
+        return props.globalSDK.client.session
+          .list({ directory, roots: true })
+          .then((x) =>
+            (x.data ?? [])
+              .filter((s) => !!s?.id)
+              .map((s) => ({
+                id: s.id,
+                title: s.title ?? props.language.t("command.session.new"),
+                description,
+                directory,
+                archived: s.time?.archived,
+                updated: s.time?.updated,
+              })),
+          )
+          .catch(
+            () =>
+              [] as {
+                id: string
+                title: string
+                description: string
+                directory: string
+                archived?: number
+                updated?: number
+              }[],
+          )
+      }),
+    )
+      .then((results) => {
+        if (state.token !== current) return [] as Entry[]
+        const seen = new Set<string>()
+        const category = props.language.t("command.category.session")
+        const next = results
+          .flat()
+          .filter((item) => {
+            const key = `${item.directory}:${item.id}`
+            if (seen.has(key)) return false
+            seen.add(key)
+            return true
+          })
+          .map((item) => createSessionEntry(item, category))
+        state.cached = next
+        return next
+      })
+      .catch(() => [] as Entry[])
+      .finally(() => {
+        state.inflight = undefined
+      })
+
+    return state.inflight
+  }
+
+  return { sessions }
+}
+
 export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
   const command = useCommand()
   const language = useLanguage()
@@ -50,40 +269,8 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
   const view = createMemo(() => layout.view(sessionKey))
   const state = { cleanup: undefined as (() => void) | void, committed: false }
   const [grouped, setGrouped] = createSignal(false)
-  const common = [
-    "session.new",
-    "workspace.new",
-    "session.previous",
-    "session.next",
-    "terminal.toggle",
-    "review.toggle",
-  ]
-  const limit = 5
-
-  const allowed = createMemo(() => {
-    if (filesOnly()) return []
-    return command.options.filter(
-      (option) => !option.disabled && !option.id.startsWith("suggested.") && option.id !== "file.open",
-    )
-  })
-
-  const commandItem = (option: CommandOption): Entry => ({
-    id: "command:" + option.id,
-    type: "command",
-    title: option.title,
-    description: option.description,
-    keybind: option.keybind,
-    category: language.t("palette.group.commands"),
-    option,
-  })
-
-  const fileItem = (path: string): Entry => ({
-    id: "file:" + path,
-    type: "file",
-    title: path,
-    category: language.t("palette.group.files"),
-    path,
-  })
+  const commandEntries = createCommandEntries({ filesOnly, command, language })
+  const fileEntries = createFileEntries({ file, tabs, language })
 
   const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
   const project = createMemo(() => {
@@ -114,133 +301,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     return `${kind} : ${name || path}`
   }
 
-  const sessionItem = (input: {
-    directory: string
-    id: string
-    title: string
-    description: string
-    archived?: number
-  }): Entry => ({
-    id: `session:${input.directory}:${input.id}`,
-    type: "session",
-    title: input.title,
-    description: input.description,
-    category: language.t("command.category.session"),
-    directory: input.directory,
-    sessionID: input.id,
-    archived: input.archived,
-  })
-
-  const list = createMemo(() => allowed().map(commandItem))
-
-  const picks = createMemo(() => {
-    const all = allowed()
-    const order = new Map(common.map((id, index) => [id, index]))
-    const picked = all.filter((option) => order.has(option.id))
-    const base = picked.length ? picked : all.slice(0, limit)
-    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
-    return sorted.map(commandItem)
-  })
-
-  const recent = createMemo(() => {
-    const all = tabs().all()
-    const active = tabs().active()
-    const order = active ? [active, ...all.filter((item) => item !== active)] : all
-    const seen = new Set<string>()
-    const items: Entry[] = []
-
-    for (const item of order) {
-      const path = file.pathFromTab(item)
-      if (!path) continue
-      if (seen.has(path)) continue
-      seen.add(path)
-      items.push(fileItem(path))
-    }
-
-    return items.slice(0, limit)
-  })
-
-  const root = createMemo(() => {
-    const nodes = file.tree.children("")
-    const paths = nodes
-      .filter((node) => node.type === "file")
-      .map((node) => node.path)
-      .sort((a, b) => a.localeCompare(b))
-    return paths.slice(0, limit).map(fileItem)
-  })
-
-  const unique = (items: Entry[]) => {
-    const seen = new Set<string>()
-    const out: Entry[] = []
-    for (const item of items) {
-      if (seen.has(item.id)) continue
-      seen.add(item.id)
-      out.push(item)
-    }
-    return out
-  }
-
-  const sessionToken = { value: 0 }
-  let sessionInflight: Promise<Entry[]> | undefined
-  let sessionAll: Entry[] | undefined
-
-  const sessions = (text: string) => {
-    const query = text.trim()
-    if (!query) {
-      sessionToken.value += 1
-      sessionInflight = undefined
-      sessionAll = undefined
-      return [] as Entry[]
-    }
-
-    if (sessionAll) return sessionAll
-    if (sessionInflight) return sessionInflight
-
-    const current = sessionToken.value
-    const dirs = workspaces()
-    if (dirs.length === 0) return [] as Entry[]
-
-    sessionInflight = Promise.all(
-      dirs.map((directory) => {
-        const description = label(directory)
-        return globalSDK.client.session
-          .list({ directory, roots: true })
-          .then((x) =>
-            (x.data ?? [])
-              .filter((s) => !!s?.id)
-              .map((s) => ({
-                id: s.id,
-                title: s.title ?? language.t("command.session.new"),
-                description,
-                directory,
-                archived: s.time?.archived,
-              })),
-          )
-          .catch(() => [] as { id: string; title: string; description: string; directory: string; archived?: number }[])
-      }),
-    )
-      .then((results) => {
-        if (sessionToken.value !== current) return [] as Entry[]
-        const seen = new Set<string>()
-        const next = results
-          .flat()
-          .filter((item) => {
-            const key = `${item.directory}:${item.id}`
-            if (seen.has(key)) return false
-            seen.add(key)
-            return true
-          })
-          .map(sessionItem)
-        sessionAll = next
-        return next
-      })
-      .catch(() => [] as Entry[])
-      .finally(() => {
-        sessionInflight = undefined
-      })
-
-    return sessionInflight
-  }
+  const { sessions } = createSessionEntries({ workspaces, label, globalSDK, language })
 
   const items = async (text: string) => {
     const query = text.trim()
@@ -249,7 +310,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     if (!query && filesOnly()) {
       const loaded = file.tree.state("")?.loaded
       const pending = loaded ? Promise.resolve() : file.tree.list("")
-      const next = unique([...recent(), ...root()])
+      const next = uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
 
       if (loaded || next.length > 0) {
         void pending
@@ -257,19 +318,21 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
       }
 
       await pending
-      return unique([...recent(), ...root()])
+      return uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
     }
 
-    if (!query) return [...picks(), ...recent()]
+    if (!query) return [...commandEntries.picks(), ...fileEntries.recent()]
 
     if (filesOnly()) {
       const files = await file.searchFiles(query)
-      return files.map(fileItem)
+      const category = language.t("palette.group.files")
+      return files.map((path) => createFileEntry(path, category))
     }
 
     const [files, nextSessions] = await Promise.all([file.searchFiles(query), Promise.resolve(sessions(query))])
-    const entries = files.map(fileItem)
-    return [...list(), ...nextSessions, ...entries]
+    const category = language.t("palette.group.files")
+    const entries = files.map((path) => createFileEntry(path, category))
+    return [...commandEntries.list(), ...nextSessions, ...entries]
   }
 
   const handleMove = (item: Entry | undefined) => {
@@ -384,6 +447,11 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
                     </Show>
                   </div>
                 </div>
+                <Show when={item.updated}>
+                  <span class="text-12-regular text-text-weak whitespace-nowrap ml-2">
+                    {getRelativeTime(new Date(item.updated!).toISOString())}
+                  </span>
+                </Show>
               </div>
             </Match>
           </Switch>

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

@@ -6,6 +6,13 @@ import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
 
+const statusLabels = {
+  connected: "mcp.status.connected",
+  failed: "mcp.status.failed",
+  needs_auth: "mcp.status.needs_auth",
+  disabled: "mcp.status.disabled",
+} as const
+
 export const DialogSelectMcp: Component = () => {
   const sync = useSync()
   const sdk = useSDK()
@@ -21,15 +28,19 @@ export const DialogSelectMcp: Component = () => {
   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 })
+    try {
+      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)
+    } finally {
+      setLoading(null)
     }
-    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)
@@ -54,6 +65,11 @@ export const DialogSelectMcp: Component = () => {
         {(i) => {
           const mcpStatus = () => sync.data.mcp[i.name]
           const status = () => mcpStatus()?.status
+          const statusLabel = () => {
+            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
+            if (!key) return
+            return language.t(key)
+          }
           const error = () => {
             const s = mcpStatus()
             return s?.status === "failed" ? s.error : undefined
@@ -64,17 +80,8 @@ export const DialogSelectMcp: Component = () => {
               <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">{language.t("mcp.status.connected")}</span>
-                  </Show>
-                  <Show when={status() === "failed"}>
-                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.failed")}</span>
-                  </Show>
-                  <Show when={status() === "needs_auth"}>
-                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.needs_auth")}</span>
-                  </Show>
-                  <Show when={status() === "disabled"}>
-                    <span class="text-11-regular text-text-weaker">{language.t("mcp.status.disabled")}</span>
+                  <Show when={statusLabel()}>
+                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
                   </Show>
                   <Show when={loading() === i.name}>
                     <span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>

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

@@ -6,7 +6,7 @@ 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 { Tooltip } from "@opencode-ai/ui/tooltip"
-import { type Component, onCleanup, onMount, Show } from "solid-js"
+import { type Component, Show } from "solid-js"
 import { useLocal } from "@/context/local"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { DialogConnectProvider } from "./dialog-connect-provider"
@@ -21,24 +21,17 @@ export const DialogSelectModelUnpaid: Component = () => {
   const language = useLanguage()
 
   let listRef: ListRef | undefined
-  const handleKey = (e: KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Escape") return
     listRef?.onKeyDown(e)
   }
 
-  onMount(() => {
-    document.addEventListener("keydown", handleKey)
-    onCleanup(() => {
-      document.removeEventListener("keydown", handleKey)
-    })
-  })
-
   return (
     <Dialog
       title={language.t("dialog.model.select.title")}
       class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
     >
-      <div class="flex flex-col gap-3 px-2.5">
+      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
         <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
         <List
           class="[&_[data-slot=list-scroll]]:overflow-visible"

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

@@ -1,5 +1,5 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
-import { Component, ComponentProps, createEffect, createMemo, JSX, onCleanup, Show, ValidComponent } from "solid-js"
+import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -15,6 +15,9 @@ import { DialogManageModels } from "./dialog-manage-models"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
+const isFree = (provider: string, cost: { input: number } | undefined) =>
+  provider === "opencode" && (!cost || cost.input === 0)
+
 const ModelList: Component<{
   provider?: string
   class?: string
@@ -54,13 +57,7 @@ const ModelList: Component<{
           class="w-full"
           placement="right-start"
           gutter={12}
-          value={
-            <ModelTooltip
-              model={item}
-              latest={item.latest}
-              free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
-            />
-          }
+          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
         >
           {node}
         </Tooltip>
@@ -75,7 +72,7 @@ const ModelList: Component<{
       {(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)}>
+          <Show when={isFree(i.provider.id, i.cost)}>
             <Tag>{language.t("model.tag.free")}</Tag>
           </Show>
           <Show when={i.latest}>
@@ -87,22 +84,20 @@ const ModelList: Component<{
   )
 }
 
-export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
+type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+
+export function ModelSelectorPopover(props: {
   provider?: string
   children?: JSX.Element
-  triggerAs?: T
-  triggerProps?: ComponentProps<T>
+  triggerAs?: ValidComponent
+  triggerProps?: ModelSelectorTriggerProps
 }) {
   const [store, setStore] = createStore<{
     open: boolean
     dismiss: "escape" | "outside" | null
-    trigger?: HTMLElement
-    content?: HTMLElement
   }>({
     open: false,
     dismiss: null,
-    trigger: undefined,
-    content: undefined,
   })
   const dialog = useDialog()
 
@@ -117,54 +112,6 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
   }
   const language = useLanguage()
 
-  createEffect(() => {
-    if (!store.open) return
-
-    const inside = (node: Node | null | undefined) => {
-      if (!node) return false
-      const el = store.content
-      if (el && el.contains(node)) return true
-      const anchor = store.trigger
-      if (anchor && anchor.contains(node)) return true
-      return false
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return
-      setStore("dismiss", "escape")
-      setStore("open", false)
-      event.preventDefault()
-      event.stopPropagation()
-    }
-
-    const onPointerDown = (event: PointerEvent) => {
-      const target = event.target
-      if (!(target instanceof Node)) return
-      if (inside(target)) return
-      setStore("dismiss", "outside")
-      setStore("open", false)
-    }
-
-    const onFocusIn = (event: FocusEvent) => {
-      if (!store.content) return
-      const target = event.target
-      if (!(target instanceof Node)) return
-      if (inside(target)) return
-      setStore("dismiss", "outside")
-      setStore("open", false)
-    }
-
-    window.addEventListener("keydown", onKeyDown, true)
-    window.addEventListener("pointerdown", onPointerDown, true)
-    window.addEventListener("focusin", onFocusIn, true)
-
-    onCleanup(() => {
-      window.removeEventListener("keydown", onKeyDown, true)
-      window.removeEventListener("pointerdown", onPointerDown, true)
-      window.removeEventListener("focusin", onFocusIn, true)
-    })
-  })
-
   return (
     <Kobalte
       open={store.open}
@@ -176,16 +123,11 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
       placement="top-start"
       gutter={8}
     >
-      <Kobalte.Trigger
-        ref={(el) => setStore("trigger", el)}
-        as={props.triggerAs ?? "div"}
-        {...(props.triggerProps as any)}
-      >
+      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
         {props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
-          ref={(el) => setStore("content", el)}
           class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             setStore("dismiss", "escape")

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

@@ -24,6 +24,12 @@ export const DialogSelectProvider: Component = () => {
 
   const popularGroup = () => language.t("dialog.provider.group.popular")
   const otherGroup = () => language.t("dialog.provider.group.other")
+  const customLabel = () => language.t("settings.providers.tag.custom")
+  const note = (id: string) => {
+    if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
+    if (id === "openai") return language.t("dialog.provider.openai.note")
+    if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
+  }
 
   return (
     <Dialog title={language.t("command.provider.connect")} transition>
@@ -34,7 +40,7 @@ export const DialogSelectProvider: Component = () => {
         key={(x) => x?.id}
         items={() => {
           language.locale()
-          return [{ id: CUSTOM_ID, name: "Custom provider" }, ...providers.all()]
+          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all()]
         }}
         filterKeys={["id", "name"]}
         groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
@@ -70,15 +76,7 @@ export const DialogSelectProvider: Component = () => {
             <Show when={i.id === "opencode"}>
               <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
             </Show>
-            <Show when={i.id === "anthropic"}>
-              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
-            </Show>
-            <Show when={i.id === "openai"}>
-              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.openai.note")}</div>
-            </Show>
-            <Show when={i.id.startsWith("github-copilot")}>
-              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.copilot.note")}</div>
-            </Show>
+            <Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
           </div>
         )}
       </List>

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

@@ -1,4 +1,4 @@
-import { createResource, createEffect, createMemo, onCleanup, Show, createSignal } from "solid-js"
+import { createResource, createEffect, createMemo, onCleanup, Show } 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"
@@ -6,17 +6,15 @@ import { List } from "@opencode-ai/ui/list"
 import { Button } from "@opencode-ai/ui/button"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
+import { normalizeServerUrl, useServer } from "@/context/server"
 import { usePlatform } from "@/context/platform"
-import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { useNavigate } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { showToast } from "@opencode-ai/ui/toast"
-
-type ServerStatus = { healthy: boolean; version?: string }
+import { ServerRow } from "@/components/server/server-row"
+import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
 
 interface AddRowProps {
   value: string
@@ -40,17 +38,62 @@ interface EditRowProps {
   onBlur: () => void
 }
 
-async function checkHealth(url: string, platform: ReturnType<typeof usePlatform>): Promise<ServerStatus> {
-  const signal = (AbortSignal as unknown as { timeout?: (ms: number) => AbortSignal }).timeout?.(3000)
-  const sdk = createOpencodeClient({
-    baseUrl: url,
-    fetch: platform.fetch,
-    signal,
+function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
   })
-  return sdk.global
-    .health()
-    .then((x) => ({ healthy: x.data?.healthy === true, version: x.data?.version }))
-    .catch(() => ({ healthy: false }))
+}
+
+function useDefaultServer(platform: ReturnType<typeof usePlatform>, language: ReturnType<typeof useLanguage>) {
+  const [defaultUrl, defaultUrlActions] = createResource(
+    async () => {
+      try {
+        const url = await platform.getDefaultServerUrl?.()
+        if (!url) return null
+        return normalizeServerUrl(url) ?? null
+      } catch (err) {
+        showRequestError(language, err)
+        return null
+      }
+    },
+    { initialValue: null },
+  )
+
+  const canDefault = createMemo(() => !!platform.getDefaultServerUrl && !!platform.setDefaultServerUrl)
+  const setDefault = async (url: string | null) => {
+    try {
+      await platform.setDefaultServerUrl?.(url)
+      defaultUrlActions.mutate(url)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return { defaultUrl, canDefault, setDefault }
+}
+
+function useServerPreview(fetcher: typeof fetch) {
+  const looksComplete = (value: string) => {
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return false
+    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
+    if (!host) return false
+    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
+    return host.includes(".") || host.includes(":")
+  }
+
+  const previewStatus = async (value: string, setStatus: (value: boolean | undefined) => void) => {
+    setStatus(undefined)
+    if (!looksComplete(value)) return
+    const normalized = normalizeServerUrl(value)
+    if (!normalized) return
+    const result = await checkServerHealth(normalized, fetcher)
+    setStatus(result.healthy)
+  }
+
+  return { previewStatus }
 }
 
 function AddRow(props: AddRowProps) {
@@ -130,8 +173,12 @@ export function DialogSelectServer() {
   const platform = usePlatform()
   const globalSDK = useGlobalSDK()
   const language = useLanguage()
+  const fetcher = platform.fetch ?? globalThis.fetch
+  const { defaultUrl, canDefault, setDefault } = useDefaultServer(platform, language)
+  const { previewStatus } = useServerPreview(fetcher)
+  let listRoot: HTMLDivElement | undefined
   const [store, setStore] = createStore({
-    status: {} as Record<string, ServerStatus | undefined>,
+    status: {} as Record<string, ServerHealth | undefined>,
     addServer: {
       url: "",
       adding: false,
@@ -147,42 +194,6 @@ export function DialogSelectServer() {
       status: undefined as boolean | undefined,
     },
   })
-  const [defaultUrl, defaultUrlActions] = createResource(
-    async () => {
-      try {
-        const url = await platform.getDefaultServerUrl?.()
-        if (!url) return null
-        return normalizeServerUrl(url) ?? null
-      } catch (err) {
-        showToast({
-          variant: "error",
-          title: language.t("common.requestFailed"),
-          description: err instanceof Error ? err.message : String(err),
-        })
-        return null
-      }
-    },
-    { initialValue: null },
-  )
-  const canDefault = createMemo(() => !!platform.getDefaultServerUrl && !!platform.setDefaultServerUrl)
-
-  const looksComplete = (value: string) => {
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return false
-    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
-    if (!host) return false
-    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
-    return host.includes(".") || host.includes(":")
-  }
-
-  const previewStatus = async (value: string, setStatus: (value: boolean | undefined) => void) => {
-    setStatus(undefined)
-    if (!looksComplete(value)) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return
-    const result = await checkHealth(normalized, platform)
-    setStatus(result.healthy)
-  }
 
   const resetAdd = () => {
     setStore("addServer", {
@@ -227,7 +238,7 @@ export function DialogSelectServer() {
     if (!list.length) return list
     const active = current()
     const order = new Map(list.map((url, index) => [url, index] as const))
-    const rank = (value?: ServerStatus) => {
+    const rank = (value?: ServerHealth) => {
       if (value?.healthy === true) return 0
       if (value?.healthy === false) return 2
       return 1
@@ -242,10 +253,10 @@ export function DialogSelectServer() {
   })
 
   async function refreshHealth() {
-    const results: Record<string, ServerStatus> = {}
+    const results: Record<string, ServerHealth> = {}
     await Promise.all(
       items().map(async (url) => {
-        results[url] = await checkHealth(url, platform)
+        results[url] = await checkServerHealth(url, fetcher)
       }),
     )
     setStore("status", reconcile(results))
@@ -277,7 +288,7 @@ export function DialogSelectServer() {
   }
 
   const scrollListToBottom = () => {
-    const scroll = document.querySelector<HTMLDivElement>('[data-component="list"] [data-slot="list-scroll"]')
+    const scroll = listRoot?.querySelector<HTMLDivElement>('[data-slot="list-scroll"]')
     if (!scroll) return
     requestAnimationFrame(() => {
       scroll.scrollTop = scroll.scrollHeight
@@ -300,7 +311,7 @@ export function DialogSelectServer() {
 
     setStore("addServer", { adding: true, error: "" })
 
-    const result = await checkHealth(normalized, platform)
+    const result = await checkServerHealth(normalized, fetcher)
     setStore("addServer", { adding: false })
 
     if (!result.healthy) {
@@ -327,7 +338,7 @@ export function DialogSelectServer() {
 
     setStore("editServer", { busy: true, error: "" })
 
-    const result = await checkHealth(normalized, platform)
+    const result = await checkServerHealth(normalized, fetcher)
     setStore("editServer", { busy: false })
 
     if (!result.healthy) {
@@ -369,207 +380,142 @@ export function DialogSelectServer() {
 
   async function handleRemove(url: string) {
     server.remove(url)
+    if ((await platform.getDefaultServerUrl?.()) === url) {
+      platform.setDefaultServerUrl?.(null)
+    }
   }
 
   return (
     <Dialog title={language.t("dialog.server.title")}>
       <div class="flex flex-col gap-2">
-        <List
-          search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
-          noInitialSelection
-          emptyMessage={language.t("dialog.server.empty")}
-          items={sortedItems}
-          key={(x) => x}
-          onSelect={(x) => {
-            if (x) select(x)
-          }}
-          onFilter={(value) => {
-            if (value && store.addServer.showForm && !store.addServer.adding) {
-              resetAdd()
-            }
-          }}
-          divider={true}
-          class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:max-h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent [&_[data-slot=list-item-add]]:px-0"
-          add={
-            store.addServer.showForm
-              ? {
-                  render: () => (
-                    <AddRow
-                      value={store.addServer.url}
-                      placeholder={language.t("dialog.server.add.placeholder")}
-                      adding={store.addServer.adding}
-                      error={store.addServer.error}
-                      status={store.addServer.status}
-                      onChange={handleAddChange}
-                      onKeyDown={handleAddKey}
-                      onBlur={blurAdd}
-                    />
-                  ),
-                }
-              : undefined
-          }
-        >
-          {(i) => {
-            const [truncated, setTruncated] = createSignal(false)
-            let nameRef: HTMLSpanElement | undefined
-            let versionRef: HTMLSpanElement | undefined
-
-            const check = () => {
-              const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
-              const versionTruncated = versionRef ? versionRef.scrollWidth > versionRef.clientWidth : false
-              setTruncated(nameTruncated || versionTruncated)
-            }
-
-            createEffect(() => {
-              check()
-              window.addEventListener("resize", check)
-              onCleanup(() => window.removeEventListener("resize", check))
-            })
-
-            const tooltipValue = () => {
-              const name = serverDisplayName(i)
-              const version = store.status[i]?.version
-              return (
-                <span class="flex items-center gap-2">
-                  <span>{name}</span>
-                  <Show when={version}>
-                    <span class="text-text-invert-base">{version}</span>
-                  </Show>
-                </span>
-              )
-            }
-
-            return (
-              <div class="flex items-center gap-3 min-w-0 flex-1 group/item">
-                <Show
-                  when={store.editServer.id !== i}
-                  fallback={
-                    <EditRow
-                      value={store.editServer.value}
-                      placeholder={language.t("dialog.server.add.placeholder")}
-                      busy={store.editServer.busy}
-                      error={store.editServer.error}
-                      status={store.editServer.status}
-                      onChange={handleEditChange}
-                      onKeyDown={(event) => handleEditKey(event, i)}
-                      onBlur={() => handleEdit(i, store.editServer.value)}
-                    />
+        <div ref={(el) => (listRoot = el)}>
+          <List
+            search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
+            noInitialSelection
+            emptyMessage={language.t("dialog.server.empty")}
+            items={sortedItems}
+            key={(x) => x}
+            onSelect={(x) => {
+              if (x) select(x)
+            }}
+            onFilter={(value) => {
+              if (value && store.addServer.showForm && !store.addServer.adding) {
+                resetAdd()
+              }
+            }}
+            divider={true}
+            class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:max-h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent [&_[data-slot=list-item-add]]:px-0"
+            add={
+              store.addServer.showForm
+                ? {
+                    render: () => (
+                      <AddRow
+                        value={store.addServer.url}
+                        placeholder={language.t("dialog.server.add.placeholder")}
+                        adding={store.addServer.adding}
+                        error={store.addServer.error}
+                        status={store.addServer.status}
+                        onChange={handleAddChange}
+                        onKeyDown={handleAddKey}
+                        onBlur={blurAdd}
+                      />
+                    ),
                   }
-                >
-                  <Tooltip value={tooltipValue()} placement="top" inactive={!truncated()}>
-                    <div
+                : undefined
+            }
+          >
+            {(i) => {
+              return (
+                <div class="flex items-center gap-3 min-w-0 flex-1 group/item">
+                  <Show
+                    when={store.editServer.id !== i}
+                    fallback={
+                      <EditRow
+                        value={store.editServer.value}
+                        placeholder={language.t("dialog.server.add.placeholder")}
+                        busy={store.editServer.busy}
+                        error={store.editServer.error}
+                        status={store.editServer.status}
+                        onChange={handleEditChange}
+                        onKeyDown={(event) => handleEditKey(event, i)}
+                        onBlur={() => handleEdit(i, store.editServer.value)}
+                      />
+                    }
+                  >
+                    <ServerRow
+                      url={i}
+                      status={store.status[i]}
+                      dimmed={store.status[i]?.healthy === false}
                       class="flex items-center gap-3 px-4 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 ref={nameRef} class="truncate">
-                        {serverDisplayName(i)}
-                      </span>
-                      <Show when={store.status[i]?.version}>
-                        <span ref={versionRef} class="text-text-weak text-14-regular truncate">
-                          {store.status[i]?.version}
-                        </span>
+                      badge={
+                        <Show when={defaultUrl() === i}>
+                          <span class="text-text-weak bg-surface-base text-14-regular px-1.5 rounded-xs">
+                            {language.t("dialog.server.status.default")}
+                          </span>
+                        </Show>
+                      }
+                    />
+                  </Show>
+                  <Show when={store.editServer.id !== i}>
+                    <div class="flex items-center justify-center gap-5 pl-4">
+                      <Show when={current() === i}>
+                        <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
                       </Show>
-                      <Show when={defaultUrl() === i}>
-                        <span class="text-text-weak bg-surface-base text-14-regular px-1.5 rounded-xs">
-                          {language.t("dialog.server.status.default")}
-                        </span>
-                      </Show>
-                    </div>
-                  </Tooltip>
-                </Show>
-                <Show when={store.editServer.id !== i}>
-                  <div class="flex items-center justify-center gap-5 pl-4">
-                    <Show when={current() === i}>
-                      <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
-                    </Show>
 
-                    <DropdownMenu>
-                      <DropdownMenu.Trigger
-                        as={IconButton}
-                        icon="dot-grid"
-                        variant="ghost"
-                        class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
-                        onClick={(e: MouseEvent) => e.stopPropagation()}
-                        onPointerDown={(e: PointerEvent) => e.stopPropagation()}
-                      />
-                      <DropdownMenu.Portal>
-                        <DropdownMenu.Content class="mt-1">
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setStore("editServer", {
-                                id: i,
-                                value: i,
-                                error: "",
-                                status: store.status[i]?.healthy,
-                              })
-                            }}
-                          >
-                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
-                          <Show when={canDefault() && defaultUrl() !== i}>
+                      <DropdownMenu>
+                        <DropdownMenu.Trigger
+                          as={IconButton}
+                          icon="dot-grid"
+                          variant="ghost"
+                          class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                          onClick={(e: MouseEvent) => e.stopPropagation()}
+                          onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                        />
+                        <DropdownMenu.Portal>
+                          <DropdownMenu.Content class="mt-1">
                             <DropdownMenu.Item
-                              onSelect={async () => {
-                                try {
-                                  await platform.setDefaultServerUrl?.(i)
-                                  defaultUrlActions.mutate(i)
-                                } catch (err) {
-                                  showToast({
-                                    variant: "error",
-                                    title: language.t("common.requestFailed"),
-                                    description: err instanceof Error ? err.message : String(err),
-                                  })
-                                }
+                              onSelect={() => {
+                                setStore("editServer", {
+                                  id: i,
+                                  value: i,
+                                  error: "",
+                                  status: store.status[i]?.healthy,
+                                })
                               }}
                             >
-                              <DropdownMenu.ItemLabel>
-                                {language.t("dialog.server.menu.default")}
-                              </DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                          </Show>
-                          <Show when={canDefault() && defaultUrl() === i}>
+                            <Show when={canDefault() && defaultUrl() !== i}>
+                              <DropdownMenu.Item onSelect={() => setDefault(i)}>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("dialog.server.menu.default")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
+                            <Show when={canDefault() && defaultUrl() === i}>
+                              <DropdownMenu.Item onSelect={() => setDefault(null)}>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("dialog.server.menu.defaultRemove")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
+                            <DropdownMenu.Separator />
                             <DropdownMenu.Item
-                              onSelect={async () => {
-                                try {
-                                  await platform.setDefaultServerUrl?.(null)
-                                  defaultUrlActions.mutate(null)
-                                } catch (err) {
-                                  showToast({
-                                    variant: "error",
-                                    title: language.t("common.requestFailed"),
-                                    description: err instanceof Error ? err.message : String(err),
-                                  })
-                                }
-                              }}
+                              onSelect={() => handleRemove(i)}
+                              class="text-text-on-critical-base hover:bg-surface-critical-weak"
                             >
-                              <DropdownMenu.ItemLabel>
-                                {language.t("dialog.server.menu.defaultRemove")}
-                              </DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                          </Show>
-                          <DropdownMenu.Separator />
-                          <DropdownMenu.Item
-                            onSelect={() => handleRemove(i)}
-                            class="text-text-on-critical-base hover:bg-surface-critical-weak"
-                          >
-                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                      </DropdownMenu.Portal>
-                    </DropdownMenu>
-                  </div>
-                </Show>
-              </div>
-            )
-          }}
-        </List>
+                          </DropdownMenu.Content>
+                        </DropdownMenu.Portal>
+                      </DropdownMenu>
+                    </div>
+                  </Show>
+                </div>
+              )
+            }}
+          </List>
+        </div>
 
         <div class="px-5 pb-5">
           <Button

packages/app/src/components/dialog-settings.tsx

@@ -67,15 +67,6 @@ export const DialogSettings: Component = () => {
         <Tabs.Content value="models" class="no-scrollbar">
           <SettingsModels />
         </Tabs.Content>
-        {/* <Tabs.Content value="agents" class="no-scrollbar"> */}
-        {/*   <SettingsAgents /> */}
-        {/* </Tabs.Content> */}
-        {/* <Tabs.Content value="commands" class="no-scrollbar"> */}
-        {/*   <SettingsCommands /> */}
-        {/* </Tabs.Content> */}
-        {/* <Tabs.Content value="mcp" class="no-scrollbar"> */}
-        {/*   <SettingsMcp /> */}
-        {/* </Tabs.Content> */}
       </Tabs>
     </Dialog>
   )

packages/app/src/components/file-tree.test.ts

@@ -0,0 +1,78 @@
+import { beforeAll, describe, expect, mock, test } from "bun:test"
+
+let shouldListRoot: typeof import("./file-tree").shouldListRoot
+let shouldListExpanded: typeof import("./file-tree").shouldListExpanded
+let dirsToExpand: typeof import("./file-tree").dirsToExpand
+
+beforeAll(async () => {
+  mock.module("@solidjs/router", () => ({
+    useNavigate: () => () => undefined,
+    useParams: () => ({}),
+  }))
+  mock.module("@/context/file", () => ({
+    useFile: () => ({
+      tree: {
+        state: () => undefined,
+        list: () => Promise.resolve(),
+        children: () => [],
+        expand: () => {},
+        collapse: () => {},
+      },
+    }),
+  }))
+  mock.module("@opencode-ai/ui/collapsible", () => ({
+    Collapsible: {
+      Trigger: (props: { children?: unknown }) => props.children,
+      Content: (props: { children?: unknown }) => props.children,
+    },
+  }))
+  mock.module("@opencode-ai/ui/file-icon", () => ({ FileIcon: () => null }))
+  mock.module("@opencode-ai/ui/icon", () => ({ Icon: () => null }))
+  mock.module("@opencode-ai/ui/tooltip", () => ({ Tooltip: (props: { children?: unknown }) => props.children }))
+  const mod = await import("./file-tree")
+  shouldListRoot = mod.shouldListRoot
+  shouldListExpanded = mod.shouldListExpanded
+  dirsToExpand = mod.dirsToExpand
+})
+
+describe("file tree fetch discipline", () => {
+  test("root lists on mount unless already loaded or loading", () => {
+    expect(shouldListRoot({ level: 0 })).toBe(true)
+    expect(shouldListRoot({ level: 0, dir: { loaded: true } })).toBe(false)
+    expect(shouldListRoot({ level: 0, dir: { loading: true } })).toBe(false)
+    expect(shouldListRoot({ level: 1 })).toBe(false)
+  })
+
+  test("nested dirs list only when expanded and stale", () => {
+    expect(shouldListExpanded({ level: 1 })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: false } })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true } })).toBe(true)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true, loaded: true } })).toBe(false)
+    expect(shouldListExpanded({ level: 1, dir: { expanded: true, loading: true } })).toBe(false)
+    expect(shouldListExpanded({ level: 0, dir: { expanded: true } })).toBe(false)
+  })
+
+  test("allowed auto-expand picks only collapsed dirs", () => {
+    const expanded = new Set<string>()
+    const filter = { dirs: new Set(["src", "src/components"]) }
+
+    const first = dirsToExpand({
+      level: 0,
+      filter,
+      expanded: (dir) => expanded.has(dir),
+    })
+
+    expect(first).toEqual(["src", "src/components"])
+
+    for (const dir of first) expanded.add(dir)
+
+    const second = dirsToExpand({
+      level: 0,
+      filter,
+      expanded: (dir) => expanded.has(dir),
+    })
+
+    expect(second).toEqual([])
+    expect(dirsToExpand({ level: 1, filter, expanded: () => false })).toEqual([])
+  })
+})

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

@@ -1,4 +1,5 @@
 import { useFile } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -8,16 +9,22 @@ import {
   createMemo,
   For,
   Match,
+  on,
   Show,
   splitProps,
   Switch,
   untrack,
   type ComponentProps,
+  type JSXElement,
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import type { FileNode } from "@opencode-ai/sdk/v2"
 
+function pathToFileUrl(filepath: string): string {
+  return `file://${encodeFilePath(filepath)}`
+}
+
 type Kind = "add" | "del" | "mix"
 
 type Filter = {
@@ -25,6 +32,217 @@ type Filter = {
   dirs: Set<string>
 }
 
+export function shouldListRoot(input: { level: number; dir?: { loaded?: boolean; loading?: boolean } }) {
+  if (input.level !== 0) return false
+  if (input.dir?.loaded) return false
+  if (input.dir?.loading) return false
+  return true
+}
+
+export function shouldListExpanded(input: {
+  level: number
+  dir?: { expanded?: boolean; loaded?: boolean; loading?: boolean }
+}) {
+  if (input.level === 0) return false
+  if (!input.dir?.expanded) return false
+  if (input.dir.loaded) return false
+  if (input.dir.loading) return false
+  return true
+}
+
+export function dirsToExpand(input: {
+  level: number
+  filter?: { dirs: Set<string> }
+  expanded: (dir: string) => boolean
+}) {
+  if (input.level !== 0) return []
+  if (!input.filter) return []
+  return [...input.filter.dirs].filter((dir) => !input.expanded(dir))
+}
+
+const kindLabel = (kind: Kind) => {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  return "M"
+}
+
+const kindTextColor = (kind: Kind) => {
+  if (kind === "add") return "color: var(--icon-diff-add-base)"
+  if (kind === "del") return "color: var(--icon-diff-delete-base)"
+  return "color: var(--icon-warning-active)"
+}
+
+const kindDotColor = (kind: Kind) => {
+  if (kind === "add") return "background-color: var(--icon-diff-add-base)"
+  if (kind === "del") return "background-color: var(--icon-diff-delete-base)"
+  return "background-color: var(--icon-warning-active)"
+}
+
+const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
+  const kind = kinds?.get(node.path)
+  if (!kind) return
+  if (!marks?.has(node.path)) return
+  return kind
+}
+
+const buildDragImage = (target: HTMLElement) => {
+  const icon = target.querySelector('[data-component="file-icon"]') ?? target.querySelector("svg")
+  const text = target.querySelector("span")
+  if (!icon || !text) return
+
+  const image = document.createElement("div")
+  image.className =
+    "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
+  image.style.position = "absolute"
+  image.style.top = "-1000px"
+  image.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
+  return image
+}
+
+const withFileDragImage = (event: DragEvent) => {
+  const image = buildDragImage(event.currentTarget as HTMLElement)
+  if (!image) return
+  document.body.appendChild(image)
+  event.dataTransfer?.setDragImage(image, 0, 12)
+  setTimeout(() => document.body.removeChild(image), 0)
+}
+
+const FileTreeNode = (
+  p: ParentProps &
+    ComponentProps<"div"> &
+    ComponentProps<"button"> & {
+      node: FileNode
+      level: number
+      active?: string
+      nodeClass?: string
+      draggable: boolean
+      kinds?: ReadonlyMap<string, Kind>
+      marks?: Set<string>
+      as?: "div" | "button"
+    },
+) => {
+  const [local, rest] = splitProps(p, [
+    "node",
+    "level",
+    "active",
+    "nodeClass",
+    "draggable",
+    "kinds",
+    "marks",
+    "as",
+    "children",
+    "class",
+    "classList",
+  ])
+  const kind = () => visibleKind(local.node, local.kinds, local.marks)
+  const active = () => !!kind() && !local.node.ignored
+  const color = () => {
+    const value = kind()
+    if (!value) return
+    return kindTextColor(value)
+  }
+
+  return (
+    <Dynamic
+      component={local.as ?? "div"}
+      classList={{
+        "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
+        "bg-surface-base-active": local.node.path === local.active,
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+        [local.nodeClass ?? ""]: !!local.nodeClass,
+      }}
+      style={`padding-left: ${Math.max(0, 8 + local.level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
+      draggable={local.draggable}
+      onDragStart={(event: DragEvent) => {
+        if (!local.draggable) return
+        event.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+        event.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
+        if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy"
+        withFileDragImage(event)
+      }}
+      {...rest}
+    >
+      {local.children}
+      <span
+        classList={{
+          "flex-1 min-w-0 text-12-medium whitespace-nowrap truncate": true,
+          "text-text-weaker": local.node.ignored,
+          "text-text-weak": !local.node.ignored && !active(),
+        }}
+        style={active() ? color() : undefined}
+      >
+        {local.node.name}
+      </span>
+      {(() => {
+        const value = kind()
+        if (!value) return null
+        if (local.node.type === "file") {
+          return (
+            <span class="shrink-0 w-4 text-center text-12-medium" style={kindTextColor(value)}>
+              {kindLabel(value)}
+            </span>
+          )
+        }
+        return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={kindDotColor(value)} />
+      })()}
+    </Dynamic>
+  )
+}
+
+const FileTreeNodeTooltip = (props: { enabled: boolean; node: FileNode; kind?: Kind; children: JSXElement }) => {
+  if (!props.enabled) return props.children
+
+  const parts = props.node.path.split("/")
+  const leaf = parts[parts.length - 1] ?? props.node.path
+  const head = parts.slice(0, -1).join("/")
+  const prefix = head ? `${head}/` : ""
+  const label =
+    props.kind === "add"
+      ? "Additions"
+      : props.kind === "del"
+        ? "Deletions"
+        : props.kind === "mix"
+          ? "Modifications"
+          : undefined
+
+  return (
+    <Tooltip
+      openDelay={2000}
+      placement="bottom-start"
+      class="w-full"
+      contentStyle={{ "max-width": "480px", width: "fit-content" }}
+      value={
+        <div class="flex items-center min-w-0 whitespace-nowrap text-12-regular">
+          <span
+            class="min-w-0 truncate text-text-invert-base"
+            style={{ direction: "rtl", "unicode-bidi": "plaintext" }}
+          >
+            {prefix}
+          </span>
+          <span class="shrink-0 text-text-invert-strong">{leaf}</span>
+          <Show when={label}>
+            {(text) => (
+              <>
+                <span class="mx-1 font-bold text-text-invert-strong">•</span>
+                <span class="shrink-0 text-text-invert-strong">{text()}</span>
+              </>
+            )}
+          </Show>
+          <Show when={props.node.type === "directory" && props.node.ignored}>
+            <>
+              <span class="mx-1 font-bold text-text-invert-strong">•</span>
+              <span class="shrink-0 text-text-invert-strong">Ignored</span>
+            </>
+          </Show>
+        </div>
+      }
+    >
+      {props.children}
+    </Tooltip>
+  )
+}
+
 export default function FileTree(props: {
   path: string
   class?: string
@@ -111,19 +329,30 @@ export default function FileTree(props: {
 
   createEffect(() => {
     const current = filter()
-    if (!current) return
-    if (level !== 0) return
-
-    for (const dir of current.dirs) {
-      const expanded = untrack(() => file.tree.state(dir)?.expanded) ?? false
-      if (expanded) continue
-      file.tree.expand(dir)
-    }
+    const dirs = dirsToExpand({
+      level,
+      filter: current,
+      expanded: (dir) => untrack(() => file.tree.state(dir)?.expanded) ?? false,
+    })
+    for (const dir of dirs) file.tree.expand(dir)
   })
 
+  createEffect(
+    on(
+      () => props.path,
+      (path) => {
+        const dir = untrack(() => file.tree.state(path))
+        if (!shouldListRoot({ level, dir })) return
+        void file.tree.list(path)
+      },
+      { defer: false },
+    ),
+  )
+
   createEffect(() => {
-    const path = props.path
-    untrack(() => void file.tree.list(path))
+    const dir = file.tree.state(props.path)
+    if (!shouldListExpanded({ level, dir })) return
+    void file.tree.list(props.path)
   })
 
   const nodes = createMemo(() => {
@@ -175,186 +404,23 @@ export default function FileTree(props: {
       seen.add(item)
     }
 
-    return out.toSorted((a, b) => {
+    out.sort((a, b) => {
       if (a.type !== b.type) {
         return a.type === "directory" ? -1 : 1
       }
       return a.name.localeCompare(b.name)
     })
+
+    return out
   })
 
-  const Node = (
-    p: ParentProps &
-      ComponentProps<"div"> &
-      ComponentProps<"button"> & {
-        node: FileNode
-        as?: "div" | "button"
-      },
-  ) => {
-    const [local, rest] = splitProps(p, ["node", "as", "children", "class", "classList"])
-    return (
-      <Dynamic
-        component={local.as ?? "div"}
-        classList={{
-          "w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
-          "bg-surface-base-active": local.node.path === props.active,
-          ...(local.classList ?? {}),
-          [local.class ?? ""]: !!local.class,
-          [props.nodeClass ?? ""]: !!props.nodeClass,
-        }}
-        style={`padding-left: ${Math.max(0, 8 + level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
-        draggable={draggable()}
-        onDragStart={(e: DragEvent) => {
-          if (!draggable()) return
-          e.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
-          e.dataTransfer?.setData("text/uri-list", `file://${local.node.path}`)
-          if (e.dataTransfer) e.dataTransfer.effectAllowed = "copy"
-
-          const dragImage = document.createElement("div")
-          dragImage.className =
-            "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
-          dragImage.style.position = "absolute"
-          dragImage.style.top = "-1000px"
-
-          const icon =
-            (e.currentTarget as HTMLElement).querySelector('[data-component="file-icon"]') ??
-            (e.currentTarget as HTMLElement).querySelector("svg")
-          const text = (e.currentTarget as HTMLElement).querySelector("span")
-          if (icon && text) {
-            dragImage.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
-          }
-
-          document.body.appendChild(dragImage)
-          e.dataTransfer?.setDragImage(dragImage, 0, 12)
-          setTimeout(() => document.body.removeChild(dragImage), 0)
-        }}
-        {...rest}
-      >
-        {local.children}
-        {(() => {
-          const kind = kinds()?.get(local.node.path)
-          const marked = marks()?.has(local.node.path) ?? false
-          const active = !!kind && marked && !local.node.ignored
-          const color =
-            kind === "add"
-              ? "color: var(--icon-diff-add-base)"
-              : kind === "del"
-                ? "color: var(--icon-diff-delete-base)"
-                : kind === "mix"
-                  ? "color: var(--icon-warning-active)"
-                  : undefined
-          return (
-            <span
-              classList={{
-                "flex-1 min-w-0 text-12-medium whitespace-nowrap truncate": true,
-                "text-text-weaker": local.node.ignored,
-                "text-text-weak": !local.node.ignored && !active,
-              }}
-              style={active ? color : undefined}
-            >
-              {local.node.name}
-            </span>
-          )
-        })()}
-        {(() => {
-          const kind = kinds()?.get(local.node.path)
-          if (!kind) return null
-          if (!marks()?.has(local.node.path)) return null
-
-          if (local.node.type === "file") {
-            const text = kind === "add" ? "A" : kind === "del" ? "D" : "M"
-            const color =
-              kind === "add"
-                ? "color: var(--icon-diff-add-base)"
-                : kind === "del"
-                  ? "color: var(--icon-diff-delete-base)"
-                  : "color: var(--icon-warning-active)"
-
-            return (
-              <span class="shrink-0 w-4 text-center text-12-medium" style={color}>
-                {text}
-              </span>
-            )
-          }
-
-          if (local.node.type === "directory") {
-            const color =
-              kind === "add"
-                ? "background-color: var(--icon-diff-add-base)"
-                : kind === "del"
-                  ? "background-color: var(--icon-diff-delete-base)"
-                  : "background-color: var(--icon-warning-active)"
-
-            return <div class="shrink-0 size-1.5 mr-1.5 rounded-full" style={color} />
-          }
-
-          return null
-        })()}
-      </Dynamic>
-    )
-  }
-
   return (
     <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
       <For each={nodes()}>
         {(node) => {
           const expanded = () => file.tree.state(node.path)?.expanded ?? false
           const deep = () => deeps().get(node.path) ?? -1
-          const Wrapper = (p: ParentProps) => {
-            if (!tooltip()) return p.children
-
-            const parts = node.path.split("/")
-            const leaf = parts[parts.length - 1] ?? node.path
-            const head = parts.slice(0, -1).join("/")
-            const prefix = head ? `${head}/` : ""
-
-            const kind = () => kinds()?.get(node.path)
-            const label = () => {
-              const k = kind()
-              if (!k) return
-              if (k === "add") return "Additions"
-              if (k === "del") return "Deletions"
-              return "Modifications"
-            }
-
-            const ignored = () => node.type === "directory" && node.ignored
-
-            return (
-              <Tooltip
-                openDelay={2000}
-                placement="bottom-start"
-                class="w-full"
-                contentStyle={{ "max-width": "480px", width: "fit-content" }}
-                value={
-                  <div class="flex items-center min-w-0 whitespace-nowrap text-12-regular">
-                    <span
-                      class="min-w-0 truncate text-text-invert-base"
-                      style={{ direction: "rtl", "unicode-bidi": "plaintext" }}
-                    >
-                      {prefix}
-                    </span>
-                    <span class="shrink-0 text-text-invert-strong">{leaf}</span>
-                    <Show when={label()}>
-                      {(t: () => string) => (
-                        <>
-                          <span class="mx-1 font-bold text-text-invert-strong">•</span>
-                          <span class="shrink-0 text-text-invert-strong">{t()}</span>
-                        </>
-                      )}
-                    </Show>
-                    <Show when={ignored()}>
-                      <>
-                        <span class="mx-1 font-bold text-text-invert-strong">•</span>
-                        <span class="shrink-0 text-text-invert-strong">Ignored</span>
-                      </>
-                    </Show>
-                  </div>
-                }
-              >
-                {p.children}
-              </Tooltip>
-            )
-          }
+          const kind = () => visibleKind(node, kinds(), marks())
 
           return (
             <Switch>
@@ -368,13 +434,21 @@ export default function FileTree(props: {
                   onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
                 >
                   <Collapsible.Trigger>
-                    <Wrapper>
-                      <Node node={node}>
+                    <FileTreeNodeTooltip enabled={tooltip()} node={node} kind={kind()}>
+                      <FileTreeNode
+                        node={node}
+                        level={level}
+                        active={props.active}
+                        nodeClass={props.nodeClass}
+                        draggable={draggable()}
+                        kinds={kinds()}
+                        marks={marks()}
+                      >
                         <div class="size-4 flex items-center justify-center text-icon-weak">
                           <Icon name={expanded() ? "chevron-down" : "chevron-right"} size="small" />
                         </div>
-                      </Node>
-                    </Wrapper>
+                      </FileTreeNode>
+                    </FileTreeNodeTooltip>
                   </Collapsible.Trigger>
                   <Collapsible.Content class="relative pt-0.5">
                     <div
@@ -404,12 +478,23 @@ export default function FileTree(props: {
                 </Collapsible>
               </Match>
               <Match when={node.type === "file"}>
-                <Wrapper>
-                  <Node node={node} as="button" type="button" onClick={() => props.onFileClick?.(node)}>
+                <FileTreeNodeTooltip enabled={tooltip()} node={node} kind={kind()}>
+                  <FileTreeNode
+                    node={node}
+                    level={level}
+                    active={props.active}
+                    nodeClass={props.nodeClass}
+                    draggable={draggable()}
+                    kinds={kinds()}
+                    marks={marks()}
+                    as="button"
+                    type="button"
+                    onClick={() => props.onFileClick?.(node)}
+                  >
                     <div class="w-4 shrink-0" />
                     <FileIcon node={node} class="text-icon-weak size-4" />
-                  </Node>
-                </Wrapper>
+                  </FileTreeNode>
+                </FileTreeNodeTooltip>
               </Match>
             </Switch>
           )

packages/app/src/components/link.tsx

@@ -1,17 +1,26 @@
 import { ComponentProps, splitProps } from "solid-js"
 import { usePlatform } from "@/context/platform"
 
-export interface LinkProps extends ComponentProps<"button"> {
+export interface LinkProps extends Omit<ComponentProps<"a">, "href"> {
   href: string
 }
 
 export function Link(props: LinkProps) {
   const platform = usePlatform()
-  const [local, rest] = splitProps(props, ["href", "children"])
+  const [local, rest] = splitProps(props, ["href", "children", "class"])
 
   return (
-    <button class="text-text-strong underline" onClick={() => platform.openLink(local.href)} {...rest}>
+    <a
+      href={local.href}
+      class={`text-text-strong underline ${local.class ?? ""}`}
+      onClick={(event) => {
+        if (!local.href) return
+        event.preventDefault()
+        platform.openLink(local.href)
+      }}
+      {...rest}
+    >
       {local.children}
-    </button>
+    </a>
   )
 }

packages/app/src/components/prompt-input/attachments.ts

@@ -0,0 +1,156 @@
+import { onCleanup, onMount } from "solid-js"
+import { showToast } from "@opencode-ai/ui/toast"
+import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
+import { useLanguage } from "@/context/language"
+import { getCursorPosition } from "./editor-dom"
+
+export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
+export const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
+
+type PromptAttachmentsInput = {
+  editor: () => HTMLDivElement | undefined
+  isFocused: () => boolean
+  isDialogActive: () => boolean
+  setDraggingType: (type: "image" | "@mention" | null) => void
+  focusEditor: () => void
+  addPart: (part: ContentPart) => void
+  readClipboardImage?: () => Promise<File | null>
+}
+
+export function createPromptAttachments(input: PromptAttachmentsInput) {
+  const prompt = usePrompt()
+  const language = useLanguage()
+
+  const addImageAttachment = async (file: File) => {
+    if (!ACCEPTED_FILE_TYPES.includes(file.type)) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const editor = input.editor()
+      if (!editor) return
+      const dataUrl = reader.result as string
+      const attachment: ImageAttachmentPart = {
+        type: "image",
+        id: crypto.randomUUID?.() ?? Math.random().toString(16).slice(2),
+        filename: file.name,
+        mime: file.type,
+        dataUrl,
+      }
+      const cursorPosition = prompt.cursor() ?? getCursorPosition(editor)
+      prompt.set([...prompt.current(), attachment], cursorPosition)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const removeImageAttachment = (id: string) => {
+    const current = prompt.current()
+    const next = current.filter((part) => part.type !== "image" || part.id !== id)
+    prompt.set(next, prompt.cursor())
+  }
+
+  const handlePaste = async (event: ClipboardEvent) => {
+    if (!input.isFocused()) return
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const items = Array.from(clipboardData.items)
+    const fileItems = items.filter((item) => item.kind === "file")
+    const imageItems = fileItems.filter((item) => ACCEPTED_FILE_TYPES.includes(item.type))
+
+    if (imageItems.length > 0) {
+      for (const item of imageItems) {
+        const file = item.getAsFile()
+        if (file) await addImageAttachment(file)
+      }
+      return
+    }
+
+    if (fileItems.length > 0) {
+      showToast({
+        title: language.t("prompt.toast.pasteUnsupported.title"),
+        description: language.t("prompt.toast.pasteUnsupported.description"),
+      })
+      return
+    }
+
+    const plainText = clipboardData.getData("text/plain") ?? ""
+
+    // Desktop: Browser clipboard has no images and no text, try platform's native clipboard for images
+    if (input.readClipboardImage && !plainText) {
+      const file = await input.readClipboardImage()
+      if (file) {
+        await addImageAttachment(file)
+        return
+      }
+    }
+
+    if (!plainText) return
+    input.addPart({ type: "text", content: plainText, start: 0, end: 0 })
+  }
+
+  const handleGlobalDragOver = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    const hasFiles = event.dataTransfer?.types.includes("Files")
+    const hasText = event.dataTransfer?.types.includes("text/plain")
+    if (hasFiles) {
+      input.setDraggingType("image")
+    } else if (hasText) {
+      input.setDraggingType("@mention")
+    }
+  }
+
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+    if (!event.relatedTarget) {
+      input.setDraggingType(null)
+    }
+  }
+
+  const handleGlobalDrop = async (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    input.setDraggingType(null)
+
+    const plainText = event.dataTransfer?.getData("text/plain")
+    const filePrefix = "file:"
+    if (plainText?.startsWith(filePrefix)) {
+      const filePath = plainText.slice(filePrefix.length)
+      input.focusEditor()
+      input.addPart({ type: "file", path: filePath, content: "@" + filePath, start: 0, end: 0 })
+      return
+    }
+
+    const dropped = event.dataTransfer?.files
+    if (!dropped) return
+
+    for (const file of Array.from(dropped)) {
+      if (ACCEPTED_FILE_TYPES.includes(file.type)) {
+        await addImageAttachment(file)
+      }
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("dragover", handleGlobalDragOver)
+    document.addEventListener("dragleave", handleGlobalDragLeave)
+    document.addEventListener("drop", handleGlobalDrop)
+  })
+
+  onCleanup(() => {
+    document.removeEventListener("dragover", handleGlobalDragOver)
+    document.removeEventListener("dragleave", handleGlobalDragLeave)
+    document.removeEventListener("drop", handleGlobalDrop)
+  })
+
+  return {
+    addImageAttachment,
+    removeImageAttachment,
+    handlePaste,
+  }
+}

packages/app/src/components/prompt-input/build-request-parts.test.ts

@@ -0,0 +1,277 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import { buildRequestParts } from "./build-request-parts"
+
+describe("buildRequestParts", () => {
+  test("builds typed request and optimistic parts without cast path", () => {
+    const prompt: Prompt = [
+      { type: "text", content: "hello", start: 0, end: 5 },
+      {
+        type: "file",
+        path: "src/foo.ts",
+        content: "@src/foo.ts",
+        start: 5,
+        end: 16,
+        selection: { startLine: 4, startChar: 1, endLine: 6, endChar: 1 },
+      },
+      { type: "agent", name: "planner", content: "@planner", start: 16, end: 24 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [{ key: "ctx:1", type: "file", path: "src/bar.ts", comment: "check this" }],
+      images: [
+        { type: "image", id: "img_1", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
+      ],
+      text: "hello @src/foo.ts @planner",
+      messageID: "msg_1",
+      sessionID: "ses_1",
+      sessionDirectory: "/repo",
+    })
+
+    expect(result.requestParts[0]?.type).toBe("text")
+    expect(result.requestParts.some((part) => part.type === "agent")).toBe(true)
+    expect(
+      result.requestParts.some((part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts")),
+    ).toBe(true)
+    expect(result.requestParts.some((part) => part.type === "text" && part.synthetic)).toBe(true)
+
+    expect(result.optimisticParts).toHaveLength(result.requestParts.length)
+    expect(result.optimisticParts.every((part) => part.sessionID === "ses_1" && part.messageID === "msg_1")).toBe(true)
+  })
+
+  test("deduplicates context files when prompt already includes same path", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/foo.ts", content: "@src/foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:dup", type: "file", path: "src/foo.ts" },
+        { key: "ctx:comment", type: "file", path: "src/foo.ts", comment: "focus here" },
+      ],
+      images: [],
+      text: "@src/foo.ts",
+      messageID: "msg_2",
+      sessionID: "ses_2",
+      sessionDirectory: "/repo",
+    })
+
+    const fooFiles = result.requestParts.filter(
+      (part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts"),
+    )
+    const synthetic = result.requestParts.filter((part) => part.type === "text" && part.synthetic)
+
+    expect(fooFiles).toHaveLength(2)
+    expect(synthetic).toHaveLength(1)
+  })
+
+  test("handles Windows paths correctly (simulated on macOS)", () => {
+    const prompt: Prompt = [{ type: "file", path: "src\\foo.ts", content: "@src\\foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\foo.ts",
+      messageID: "msg_win_1",
+      sessionID: "ses_win_1",
+      sessionDirectory: "D:\\projects\\myapp", // Windows path
+    })
+
+    // Should create valid file URLs
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should not have encoded backslashes in wrong place
+      expect(filePart.url).not.toContain("%5C")
+      // Should have normalized to forward slashes
+      expect(filePart.url).toContain("/src/foo.ts")
+    }
+  })
+
+  test("handles Windows absolute path with special characters", () => {
+    const prompt: Prompt = [{ type: "file", path: "file#name.txt", content: "@file#name.txt", start: 0, end: 14 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@file#name.txt",
+      messageID: "msg_win_2",
+      sessionID: "ses_win_2",
+      sessionDirectory: "C:\\Users\\test\\Documents", // Windows path
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Special chars should be encoded
+      expect(filePart.url).toContain("file%23name.txt")
+      // Should have Windows drive letter properly encoded
+      expect(filePart.url).toMatch(/file:\/\/\/[A-Z]:/)
+    }
+  })
+
+  test("handles Linux absolute paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/app.ts", content: "@src/app.ts", start: 0, end: 10 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src/app.ts",
+      messageID: "msg_linux_1",
+      sessionID: "ses_linux_1",
+      sessionDirectory: "/home/user/project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///home/user/project/src/app.ts")
+    }
+  })
+
+  test("handles macOS paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "README.md", content: "@README.md", start: 0, end: 9 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@README.md",
+      messageID: "msg_mac_1",
+      sessionID: "ses_mac_1",
+      sessionDirectory: "/Users/kelvin/Projects/opencode",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///Users/kelvin/Projects/opencode/README.md")
+    }
+  })
+
+  test("handles context files with Windows paths", () => {
+    const prompt: Prompt = []
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:1", type: "file", path: "src\\utils\\helper.ts" },
+        { key: "ctx:2", type: "file", path: "test\\unit.test.ts", comment: "check tests" },
+      ],
+      images: [],
+      text: "test",
+      messageID: "msg_win_ctx",
+      sessionID: "ses_win_ctx",
+      sessionDirectory: "D:\\workspace\\app",
+    })
+
+    const fileParts = result.requestParts.filter((part) => part.type === "file")
+    expect(fileParts).toHaveLength(2)
+
+    // All file URLs should be valid
+    fileParts.forEach((part) => {
+      if (part.type === "file") {
+        expect(() => new URL(part.url)).not.toThrow()
+        expect(part.url).not.toContain("%5C") // No encoded backslashes
+      }
+    })
+  })
+
+  test("handles absolute Windows paths (user manually specifies full path)", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "D:\\other\\project\\file.ts", content: "@D:\\other\\project\\file.ts", start: 0, end: 25 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@D:\\other\\project\\file.ts",
+      messageID: "msg_abs",
+      sessionID: "ses_abs",
+      sessionDirectory: "C:\\current\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should handle absolute path that differs from sessionDirectory
+      expect(() => new URL(filePart.url)).not.toThrow()
+      expect(filePart.url).toContain("/D:/other/project/file.ts")
+    }
+  })
+
+  test("handles selection with query parameters on Windows", () => {
+    const prompt: Prompt = [
+      {
+        type: "file",
+        path: "src\\App.tsx",
+        content: "@src\\App.tsx",
+        start: 0,
+        end: 11,
+        selection: { startLine: 10, startChar: 0, endLine: 20, endChar: 5 },
+      },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\App.tsx",
+      messageID: "msg_sel",
+      sessionID: "ses_sel",
+      sessionDirectory: "C:\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should have query parameters
+      expect(filePart.url).toContain("?start=10&end=20")
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Query params should parse correctly
+      const url = new URL(filePart.url)
+      expect(url.searchParams.get("start")).toBe("10")
+      expect(url.searchParams.get("end")).toBe("20")
+    }
+  })
+
+  test("handles file paths with dots and special segments on Windows", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "..\\..\\shared\\util.ts", content: "@..\\..\\shared\\util.ts", start: 0, end: 21 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@..\\..\\shared\\util.ts",
+      messageID: "msg_dots",
+      sessionID: "ses_dots",
+      sessionDirectory: "C:\\projects\\myapp\\src",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should preserve .. segments (backend normalizes)
+      expect(filePart.url).toContain("/..")
+    }
+  })
+})

packages/app/src/components/prompt-input/build-request-parts.ts

@@ -0,0 +1,179 @@
+import { getFilename } from "@opencode-ai/util/path"
+import { type AgentPartInput, type FilePartInput, type Part, type TextPartInput } from "@opencode-ai/sdk/v2/client"
+import type { FileSelection } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
+import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
+import { Identifier } from "@/utils/id"
+
+type PromptRequestPart = (TextPartInput | FilePartInput | AgentPartInput) & { id: string }
+
+type ContextFile = {
+  key: string
+  type: "file"
+  path: string
+  selection?: FileSelection
+  comment?: string
+  commentID?: string
+  commentOrigin?: "review" | "file"
+  preview?: string
+}
+
+type BuildRequestPartsInput = {
+  prompt: Prompt
+  context: ContextFile[]
+  images: ImageAttachmentPart[]
+  text: string
+  messageID: string
+  sessionID: string
+  sessionDirectory: string
+}
+
+const absolute = (directory: string, path: string) => {
+  if (path.startsWith("/")) return path
+  if (/^[A-Za-z]:[\\/]/.test(path) || /^[A-Za-z]:$/.test(path)) return path
+  if (path.startsWith("\\\\") || path.startsWith("//")) return path
+  return `${directory.replace(/[\\/]+$/, "")}/${path}`
+}
+
+const fileQuery = (selection: FileSelection | undefined) =>
+  selection ? `?start=${selection.startLine}&end=${selection.endLine}` : ""
+
+const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
+const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"
+
+const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => {
+  const start = selection ? Math.min(selection.startLine, selection.endLine) : undefined
+  const end = selection ? Math.max(selection.startLine, selection.endLine) : undefined
+  const range =
+    start === undefined || end === undefined
+      ? "this file"
+      : start === end
+        ? `line ${start}`
+        : `lines ${start} through ${end}`
+  return `The user made the following comment regarding ${range} of ${path}: ${comment}`
+}
+
+const toOptimisticPart = (part: PromptRequestPart, sessionID: string, messageID: string): Part => {
+  if (part.type === "text") {
+    return {
+      id: part.id,
+      type: "text",
+      text: part.text,
+      synthetic: part.synthetic,
+      ignored: part.ignored,
+      time: part.time,
+      metadata: part.metadata,
+      sessionID,
+      messageID,
+    }
+  }
+  if (part.type === "file") {
+    return {
+      id: part.id,
+      type: "file",
+      mime: part.mime,
+      filename: part.filename,
+      url: part.url,
+      source: part.source,
+      sessionID,
+      messageID,
+    }
+  }
+  return {
+    id: part.id,
+    type: "agent",
+    name: part.name,
+    source: part.source,
+    sessionID,
+    messageID,
+  }
+}
+
+export function buildRequestParts(input: BuildRequestPartsInput) {
+  const requestParts: PromptRequestPart[] = [
+    {
+      id: Identifier.ascending("part"),
+      type: "text",
+      text: input.text,
+    },
+  ]
+
+  const files = input.prompt.filter(isFileAttachment).map((attachment) => {
+    const path = absolute(input.sessionDirectory, attachment.path)
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url: `file://${encodeFilePath(path)}${fileQuery(attachment.selection)}`,
+      filename: getFilename(attachment.path),
+      source: {
+        type: "file",
+        text: {
+          value: attachment.content,
+          start: attachment.start,
+          end: attachment.end,
+        },
+        path,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const agents = input.prompt.filter(isAgentAttachment).map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "agent",
+      name: attachment.name,
+      source: {
+        value: attachment.content,
+        start: attachment.start,
+        end: attachment.end,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const used = new Set(files.map((part) => part.url))
+  const context = input.context.flatMap((item) => {
+    const path = absolute(input.sessionDirectory, item.path)
+    const url = `file://${encodeFilePath(path)}${fileQuery(item.selection)}`
+    const comment = item.comment?.trim()
+    if (!comment && used.has(url)) return []
+    used.add(url)
+
+    const filePart = {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url,
+      filename: getFilename(item.path),
+    } satisfies PromptRequestPart
+
+    if (!comment) return [filePart]
+
+    return [
+      {
+        id: Identifier.ascending("part"),
+        type: "text",
+        text: commentNote(item.path, item.selection, comment),
+        synthetic: true,
+      } satisfies PromptRequestPart,
+      filePart,
+    ]
+  })
+
+  const images = input.images.map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: attachment.mime,
+      url: attachment.dataUrl,
+      filename: attachment.filename,
+    } satisfies PromptRequestPart
+  })
+
+  requestParts.push(...files, ...context, ...agents, ...images)
+
+  return {
+    requestParts,
+    optimisticParts: requestParts.map((part) => toOptimisticPart(part, input.sessionID, input.messageID)),
+  }
+}

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

@@ -0,0 +1,89 @@
+import { Component, For, Show } from "solid-js"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
+import type { ContextItem } from "@/context/prompt"
+
+type PromptContextItem = ContextItem & { key: string }
+
+type ContextItemsProps = {
+  items: PromptContextItem[]
+  active: (item: PromptContextItem) => boolean
+  openComment: (item: PromptContextItem) => void
+  remove: (item: PromptContextItem) => void
+  t: (key: string) => string
+}
+
+export const PromptContextItems: Component<ContextItemsProps> = (props) => {
+  return (
+    <Show when={props.items.length > 0}>
+      <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
+        <For each={props.items}>
+          {(item) => {
+            const directory = getDirectory(item.path)
+            const filename = getFilename(item.path)
+            const label = getFilenameTruncated(item.path, 14)
+            const selected = props.active(item)
+
+            return (
+              <Tooltip
+                value={
+                  <span class="flex max-w-[300px]">
+                    <span class="text-text-invert-base truncate-start [unicode-bidi:plaintext] min-w-0">
+                      {directory}
+                    </span>
+                    <span class="shrink-0">{filename}</span>
+                  </span>
+                }
+                placement="top"
+                openDelay={2000}
+              >
+                <div
+                  classList={{
+                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                    "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !selected,
+                    "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
+                      selected,
+                    "bg-background-stronger": !selected,
+                  }}
+                  onClick={() => props.openComment(item)}
+                >
+                  <div class="flex items-center gap-1.5">
+                    <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                    <div class="flex items-center text-11-regular min-w-0 font-medium">
+                      <span class="text-text-strong whitespace-nowrap">{label}</span>
+                      <Show when={item.selection}>
+                        {(sel) => (
+                          <span class="text-text-weak whitespace-nowrap shrink-0">
+                            {sel().startLine === sel().endLine
+                              ? `:${sel().startLine}`
+                              : `:${sel().startLine}-${sel().endLine}`}
+                          </span>
+                        )}
+                      </Show>
+                    </div>
+                    <IconButton
+                      type="button"
+                      icon="close-small"
+                      variant="ghost"
+                      class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        props.remove(item)
+                      }}
+                      aria-label={props.t("prompt.context.removeFile")}
+                    />
+                  </div>
+                  <Show when={item.comment}>
+                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                  </Show>
+                </div>
+              </Tooltip>
+            )
+          }}
+        </For>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { Component, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+
+type PromptDragOverlayProps = {
+  type: "image" | "@mention" | null
+  label: string
+}
+
+const kindToIcon = {
+  image: "photo",
+  "@mention": "link",
+} as const
+
+export const PromptDragOverlay: Component<PromptDragOverlayProps> = (props) => {
+  return (
+    <Show when={props.type !== null}>
+      <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 pointer-events-none">
+        <div class="flex flex-col items-center gap-2 text-text-weak">
+          <Icon name={props.type ? kindToIcon[props.type] : kindToIcon.image} class="size-8" />
+          <span class="text-14-regular">{props.label}</span>
+        </div>
+      </div>
+    </Show>
+  )
+}

packages/app/src/components/prompt-input/editor-dom.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "bun:test"
+import { createTextFragment, getCursorPosition, getNodeLength, getTextLength, setCursorPosition } from "./editor-dom"
+
+describe("prompt-input editor dom", () => {
+  test("createTextFragment preserves newlines with br and zero-width placeholders", () => {
+    const fragment = createTextFragment("foo\n\nbar")
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(5)
+    expect(container.childNodes[0]?.textContent).toBe("foo")
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+    expect(container.childNodes[2]?.textContent).toBe("\u200B")
+    expect((container.childNodes[3] as HTMLElement).tagName).toBe("BR")
+    expect(container.childNodes[4]?.textContent).toBe("bar")
+  })
+
+  test("length helpers treat breaks as one char and ignore zero-width chars", () => {
+    const container = document.createElement("div")
+    container.appendChild(document.createTextNode("ab\u200B"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+
+    expect(getNodeLength(container.childNodes[0]!)).toBe(2)
+    expect(getNodeLength(container.childNodes[1]!)).toBe(1)
+    expect(getTextLength(container)).toBe(5)
+  })
+
+  test("setCursorPosition and getCursorPosition round-trip with pills and breaks", () => {
+    const container = document.createElement("div")
+    const pill = document.createElement("span")
+    pill.dataset.type = "file"
+    pill.textContent = "@file"
+    container.appendChild(document.createTextNode("ab"))
+    container.appendChild(pill)
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+    document.body.appendChild(container)
+
+    setCursorPosition(container, 2)
+    expect(getCursorPosition(container)).toBe(2)
+
+    setCursorPosition(container, 7)
+    expect(getCursorPosition(container)).toBe(7)
+
+    setCursorPosition(container, 8)
+    expect(getCursorPosition(container)).toBe(8)
+
+    container.remove()
+  })
+})

packages/app/src/components/prompt-input/editor-dom.ts

@@ -0,0 +1,135 @@
+export function createTextFragment(content: string): DocumentFragment {
+  const fragment = document.createDocumentFragment()
+  const segments = content.split("\n")
+  segments.forEach((segment, index) => {
+    if (segment) {
+      fragment.appendChild(document.createTextNode(segment))
+    } else if (segments.length > 1) {
+      fragment.appendChild(document.createTextNode("\u200B"))
+    }
+    if (index < segments.length - 1) {
+      fragment.appendChild(document.createElement("br"))
+    }
+  })
+  return fragment
+}
+
+export function getNodeLength(node: Node): number {
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  return (node.textContent ?? "").replace(/\u200B/g, "").length
+}
+
+export function getTextLength(node: Node): number {
+  if (node.nodeType === Node.TEXT_NODE) return (node.textContent ?? "").replace(/\u200B/g, "").length
+  if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
+  let length = 0
+  for (const child of Array.from(node.childNodes)) {
+    length += getTextLength(child)
+  }
+  return length
+}
+
+export function getCursorPosition(parent: HTMLElement): number {
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return 0
+  const range = selection.getRangeAt(0)
+  if (!parent.contains(range.startContainer)) return 0
+  const preCaretRange = range.cloneRange()
+  preCaretRange.selectNodeContents(parent)
+  preCaretRange.setEnd(range.startContainer, range.startOffset)
+  return getTextLength(preCaretRange.cloneContents())
+}
+
+export function setCursorPosition(parent: HTMLElement, position: number) {
+  let remaining = position
+  let node = parent.firstChild
+  while (node) {
+    const length = getNodeLength(node)
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+    if (isText && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      range.setStart(node, remaining)
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+      return
+    }
+
+    if ((isPill || isBreak) && remaining <= length) {
+      const range = document.createRange()
+      const selection = window.getSelection()
+      if (remaining === 0) {
+        range.setStartBefore(node)
+      }
+      if (remaining > 0 && isPill) {
+        range.setStartAfter(node)
+      }
+      if (remaining > 0 && isBreak) {
+        const next = node.nextSibling
+        if (next && next.nodeType === Node.TEXT_NODE) {
+          range.setStart(next, 0)
+        }
+        if (!next || next.nodeType !== Node.TEXT_NODE) {
+          range.setStartAfter(node)
+        }
+      }
+      range.collapse(true)
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+      return
+    }
+
+    remaining -= length
+    node = node.nextSibling
+  }
+
+  const fallbackRange = document.createRange()
+  const fallbackSelection = window.getSelection()
+  const last = parent.lastChild
+  if (last && last.nodeType === Node.TEXT_NODE) {
+    const len = last.textContent ? last.textContent.length : 0
+    fallbackRange.setStart(last, len)
+  }
+  if (!last || last.nodeType !== Node.TEXT_NODE) {
+    fallbackRange.selectNodeContents(parent)
+  }
+  fallbackRange.collapse(false)
+  fallbackSelection?.removeAllRanges()
+  fallbackSelection?.addRange(fallbackRange)
+}
+
+export function setRangeEdge(parent: HTMLElement, range: Range, edge: "start" | "end", offset: number) {
+  let remaining = offset
+  const nodes = Array.from(parent.childNodes)
+
+  for (const node of nodes) {
+    const length = getNodeLength(node)
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+    if (isText && remaining <= length) {
+      if (edge === "start") range.setStart(node, remaining)
+      if (edge === "end") range.setEnd(node, remaining)
+      return
+    }
+
+    if ((isPill || isBreak) && remaining <= length) {
+      if (edge === "start" && remaining === 0) range.setStartBefore(node)
+      if (edge === "start" && remaining > 0) range.setStartAfter(node)
+      if (edge === "end" && remaining === 0) range.setEndBefore(node)
+      if (edge === "end" && remaining > 0) range.setEndAfter(node)
+      return
+    }
+
+    remaining -= length
+  }
+}

packages/app/src/components/prompt-input/history.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import { clonePromptParts, navigatePromptHistory, prependHistoryEntry, promptLength } from "./history"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+const text = (value: string): Prompt => [{ type: "text", content: value, start: 0, end: value.length }]
+
+describe("prompt-input history", () => {
+  test("prependHistoryEntry skips empty prompt and deduplicates consecutive entries", () => {
+    const first = prependHistoryEntry([], DEFAULT_PROMPT)
+    expect(first).toEqual([])
+
+    const withOne = prependHistoryEntry([], text("hello"))
+    expect(withOne).toHaveLength(1)
+
+    const deduped = prependHistoryEntry(withOne, text("hello"))
+    expect(deduped).toBe(withOne)
+  })
+
+  test("navigatePromptHistory restores saved prompt when moving down from newest", () => {
+    const entries = [text("third"), text("second"), text("first")]
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      savedPrompt: null,
+    })
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.historyIndex).toBe(0)
+    expect(up.cursor).toBe("start")
+
+    const down = navigatePromptHistory({
+      direction: "down",
+      entries,
+      historyIndex: up.historyIndex,
+      currentPrompt: text("ignored"),
+      savedPrompt: up.savedPrompt,
+    })
+    expect(down.handled).toBe(true)
+    if (!down.handled) throw new Error("expected handled")
+    expect(down.historyIndex).toBe(-1)
+    expect(down.prompt[0]?.type === "text" ? down.prompt[0].content : "").toBe("draft")
+  })
+
+  test("helpers clone prompt and count text content length", () => {
+    const original: Prompt = [
+      { type: "text", content: "one", start: 0, end: 3 },
+      {
+        type: "file",
+        path: "src/a.ts",
+        content: "@src/a.ts",
+        start: 3,
+        end: 12,
+        selection: { startLine: 1, startChar: 1, endLine: 2, endChar: 1 },
+      },
+      { type: "image", id: "1", filename: "img.png", mime: "image/png", dataUrl: "data:image/png;base64,abc" },
+    ]
+    const copy = clonePromptParts(original)
+    expect(copy).not.toBe(original)
+    expect(promptLength(copy)).toBe(12)
+    if (copy[1]?.type !== "file") throw new Error("expected file")
+    copy[1].selection!.startLine = 9
+    if (original[1]?.type !== "file") throw new Error("expected file")
+    expect(original[1].selection?.startLine).toBe(1)
+  })
+})

packages/app/src/components/prompt-input/history.ts

@@ -0,0 +1,160 @@
+import type { Prompt } from "@/context/prompt"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+export const MAX_HISTORY = 100
+
+export function clonePromptParts(prompt: Prompt): Prompt {
+  return prompt.map((part) => {
+    if (part.type === "text") return { ...part }
+    if (part.type === "image") return { ...part }
+    if (part.type === "agent") return { ...part }
+    return {
+      ...part,
+      selection: part.selection ? { ...part.selection } : undefined,
+    }
+  })
+}
+
+export function promptLength(prompt: Prompt) {
+  return prompt.reduce((len, part) => len + ("content" in part ? part.content.length : 0), 0)
+}
+
+export function prependHistoryEntry(entries: Prompt[], prompt: Prompt, max = MAX_HISTORY) {
+  const text = prompt
+    .map((part) => ("content" in part ? part.content : ""))
+    .join("")
+    .trim()
+  const hasImages = prompt.some((part) => part.type === "image")
+  if (!text && !hasImages) return entries
+
+  const entry = clonePromptParts(prompt)
+  const last = entries[0]
+  if (last && isPromptEqual(last, entry)) return entries
+  return [entry, ...entries].slice(0, max)
+}
+
+function isPromptEqual(promptA: Prompt, promptB: Prompt) {
+  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.type === "text" ? partB.content : "")) return false
+    if (partA.type === "file") {
+      if (partA.path !== (partB.type === "file" ? partB.path : "")) return false
+      const a = partA.selection
+      const b = partB.type === "file" ? partB.selection : undefined
+      const sameSelection =
+        (!a && !b) ||
+        (!!a &&
+          !!b &&
+          a.startLine === b.startLine &&
+          a.startChar === b.startChar &&
+          a.endLine === b.endLine &&
+          a.endChar === b.endChar)
+      if (!sameSelection) return false
+    }
+    if (partA.type === "agent" && partA.name !== (partB.type === "agent" ? partB.name : "")) return false
+    if (partA.type === "image" && partA.id !== (partB.type === "image" ? partB.id : "")) return false
+  }
+  return true
+}
+
+type HistoryNavInput = {
+  direction: "up" | "down"
+  entries: Prompt[]
+  historyIndex: number
+  currentPrompt: Prompt
+  savedPrompt: Prompt | null
+}
+
+type HistoryNavResult =
+  | {
+      handled: false
+      historyIndex: number
+      savedPrompt: Prompt | null
+    }
+  | {
+      handled: true
+      historyIndex: number
+      savedPrompt: Prompt | null
+      prompt: Prompt
+      cursor: "start" | "end"
+    }
+
+export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult {
+  if (input.direction === "up") {
+    if (input.entries.length === 0) {
+      return {
+        handled: false,
+        historyIndex: input.historyIndex,
+        savedPrompt: input.savedPrompt,
+      }
+    }
+
+    if (input.historyIndex === -1) {
+      return {
+        handled: true,
+        historyIndex: 0,
+        savedPrompt: clonePromptParts(input.currentPrompt),
+        prompt: input.entries[0],
+        cursor: "start",
+      }
+    }
+
+    if (input.historyIndex < input.entries.length - 1) {
+      const next = input.historyIndex + 1
+      return {
+        handled: true,
+        historyIndex: next,
+        savedPrompt: input.savedPrompt,
+        prompt: input.entries[next],
+        cursor: "start",
+      }
+    }
+
+    return {
+      handled: false,
+      historyIndex: input.historyIndex,
+      savedPrompt: input.savedPrompt,
+    }
+  }
+
+  if (input.historyIndex > 0) {
+    const next = input.historyIndex - 1
+    return {
+      handled: true,
+      historyIndex: next,
+      savedPrompt: input.savedPrompt,
+      prompt: input.entries[next],
+      cursor: "end",
+    }
+  }
+
+  if (input.historyIndex === 0) {
+    if (input.savedPrompt) {
+      return {
+        handled: true,
+        historyIndex: -1,
+        savedPrompt: null,
+        prompt: input.savedPrompt,
+        cursor: "end",
+      }
+    }
+
+    return {
+      handled: true,
+      historyIndex: -1,
+      savedPrompt: null,
+      prompt: DEFAULT_PROMPT,
+      cursor: "end",
+    }
+  }
+
+  return {
+    handled: false,
+    historyIndex: input.historyIndex,
+    savedPrompt: input.savedPrompt,
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Component, For, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import type { ImageAttachmentPart } from "@/context/prompt"
+
+type PromptImageAttachmentsProps = {
+  attachments: ImageAttachmentPart[]
+  onOpen: (attachment: ImageAttachmentPart) => void
+  onRemove: (id: string) => void
+  removeLabel: string
+}
+
+const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
+const imageClass =
+  "size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
+const removeClass =
+  "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
+const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
+
+export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
+  return (
+    <Show when={props.attachments.length > 0}>
+      <div class="flex flex-wrap gap-2 px-3 pt-3">
+        <For each={props.attachments}>
+          {(attachment) => (
+            <div class="relative group">
+              <Show
+                when={attachment.mime.startsWith("image/")}
+                fallback={
+                  <div class={fallbackClass}>
+                    <Icon name="folder" class="size-6 text-text-weak" />
+                  </div>
+                }
+              >
+                <img
+                  src={attachment.dataUrl}
+                  alt={attachment.filename}
+                  class={imageClass}
+                  onClick={() => props.onOpen(attachment)}
+                />
+              </Show>
+              <button
+                type="button"
+                onClick={() => props.onRemove(attachment.id)}
+                class={removeClass}
+                aria-label={props.removeLabel}
+              >
+                <Icon name="close" class="size-3 text-text-weak" />
+              </button>
+              <div class={nameClass}>
+                <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}

packages/app/src/components/prompt-input/placeholder.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test"
+import { promptPlaceholder } from "./placeholder"
+
+describe("promptPlaceholder", () => {
+  const t = (key: string, params?: Record<string, string>) => `${key}${params?.example ? `:${params.example}` : ""}`
+
+  test("returns shell placeholder in shell mode", () => {
+    const value = promptPlaceholder({
+      mode: "shell",
+      commentCount: 0,
+      example: "example",
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.shell")
+  })
+
+  test("returns summarize placeholders for comment context", () => {
+    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", t })).toBe(
+      "prompt.placeholder.summarizeComment",
+    )
+    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", t })).toBe(
+      "prompt.placeholder.summarizeComments",
+    )
+  })
+
+  test("returns default placeholder with example", () => {
+    const value = promptPlaceholder({
+      mode: "normal",
+      commentCount: 0,
+      example: "translated-example",
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.normal:translated-example")
+  })
+})

packages/app/src/components/prompt-input/placeholder.ts

@@ -0,0 +1,13 @@
+type PromptPlaceholderInput = {
+  mode: "normal" | "shell"
+  commentCount: number
+  example: string
+  t: (key: string, params?: Record<string, string>) => string
+}
+
+export function promptPlaceholder(input: PromptPlaceholderInput) {
+  if (input.mode === "shell") return input.t("prompt.placeholder.shell")
+  if (input.commentCount > 1) return input.t("prompt.placeholder.summarizeComments")
+  if (input.commentCount === 1) return input.t("prompt.placeholder.summarizeComment")
+  return input.t("prompt.placeholder.normal", { example: input.example })
+}

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

@@ -0,0 +1,143 @@
+import { Component, For, Match, Show, Switch } from "solid-js"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { getDirectory, getFilename } from "@opencode-ai/util/path"
+
+export type AtOption =
+  | { type: "agent"; name: string; display: string }
+  | { type: "file"; path: string; display: string; recent?: boolean }
+
+export interface SlashCommand {
+  id: string
+  trigger: string
+  title: string
+  description?: string
+  keybind?: string
+  type: "builtin" | "custom"
+  source?: "command" | "mcp" | "skill"
+}
+
+type PromptPopoverProps = {
+  popover: "at" | "slash" | null
+  setSlashPopoverRef: (el: HTMLDivElement) => void
+  atFlat: AtOption[]
+  atActive?: string
+  atKey: (item: AtOption) => string
+  setAtActive: (id: string) => void
+  onAtSelect: (item: AtOption) => void
+  slashFlat: SlashCommand[]
+  slashActive?: string
+  setSlashActive: (id: string) => void
+  onSlashSelect: (item: SlashCommand) => void
+  commandKeybind: (id: string) => string | undefined
+  t: (key: string) => string
+}
+
+export const PromptPopover: Component<PromptPopoverProps> = (props) => {
+  return (
+    <Show when={props.popover}>
+      <div
+        ref={(el) => {
+          if (props.popover === "slash") props.setSlashPopoverRef(el)
+        }}
+        class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-80 min-h-10
+                 overflow-auto no-scrollbar flex flex-col p-2 rounded-md
+                 border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <Switch>
+          <Match when={props.popover === "at"}>
+            <Show
+              when={props.atFlat.length > 0}
+              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyResults")}</div>}
+            >
+              <For each={props.atFlat.slice(0, 10)}>
+                {(item) => {
+                  const active = props.atActive === props.atKey(item)
+                  const shared = {
+                    "w-full flex items-center gap-x-2 rounded-md px-2 py-0.5": true,
+                    "bg-surface-raised-base-hover": active,
+                  }
+
+                  if (item.type === "agent") {
+                    return (
+                      <button
+                        classList={shared}
+                        onClick={() => props.onAtSelect(item)}
+                        onMouseEnter={() => props.setAtActive(props.atKey(item))}
+                      >
+                        <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
+                        <span class="text-14-regular text-text-strong whitespace-nowrap">@{item.name}</span>
+                      </button>
+                    )
+                  }
+
+                  const isDirectory = item.path.endsWith("/")
+                  const directory = isDirectory ? item.path : getDirectory(item.path)
+                  const filename = isDirectory ? "" : getFilename(item.path)
+
+                  return (
+                    <button
+                      classList={shared}
+                      onClick={() => props.onAtSelect(item)}
+                      onMouseEnter={() => props.setAtActive(props.atKey(item))}
+                    >
+                      <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
+                      <div class="flex items-center text-14-regular min-w-0">
+                        <span class="text-text-weak whitespace-nowrap truncate min-w-0">{directory}</span>
+                        <Show when={!isDirectory}>
+                          <span class="text-text-strong whitespace-nowrap">{filename}</span>
+                        </Show>
+                      </div>
+                    </button>
+                  )
+                }}
+              </For>
+            </Show>
+          </Match>
+          <Match when={props.popover === "slash"}>
+            <Show
+              when={props.slashFlat.length > 0}
+              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyCommands")}</div>}
+            >
+              <For each={props.slashFlat}>
+                {(cmd) => (
+                  <button
+                    data-slash-id={cmd.id}
+                    classList={{
+                      "w-full flex items-center justify-between gap-4 rounded-md px-2 py-1": true,
+                      "bg-surface-raised-base-hover": props.slashActive === cmd.id,
+                    }}
+                    onClick={() => props.onSlashSelect(cmd)}
+                    onMouseEnter={() => props.setSlashActive(cmd.id)}
+                  >
+                    <div class="flex items-center gap-2 min-w-0">
+                      <span class="text-14-regular text-text-strong whitespace-nowrap">/{cmd.trigger}</span>
+                      <Show when={cmd.description}>
+                        <span class="text-14-regular text-text-weak truncate">{cmd.description}</span>
+                      </Show>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                      <Show when={cmd.type === "custom" && cmd.source !== "command"}>
+                        <span class="text-11-regular text-text-subtle px-1.5 py-0.5 bg-surface-base rounded">
+                          {cmd.source === "skill"
+                            ? props.t("prompt.slash.badge.skill")
+                            : cmd.source === "mcp"
+                              ? props.t("prompt.slash.badge.mcp")
+                              : props.t("prompt.slash.badge.custom")}
+                        </span>
+                      </Show>
+                      <Show when={props.commandKeybind(cmd.id)}>
+                        <span class="text-12-regular text-text-subtle">{props.commandKeybind(cmd.id)}</span>
+                      </Show>
+                    </div>
+                  </button>
+                )}
+              </For>
+            </Show>
+          </Match>
+        </Switch>
+      </div>
+    </Show>
+  )
+}

packages/app/src/components/prompt-input/submit.test.ts

@@ -0,0 +1,175 @@
+import { beforeAll, beforeEach, describe, expect, mock, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+
+let createPromptSubmit: typeof import("./submit").createPromptSubmit
+
+const createdClients: string[] = []
+const createdSessions: string[] = []
+const sentShell: string[] = []
+const syncedDirectories: string[] = []
+
+let selected = "/repo/worktree-a"
+
+const promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
+
+const clientFor = (directory: string) => ({
+  session: {
+    create: async () => {
+      createdSessions.push(directory)
+      return { data: { id: `session-${createdSessions.length}` } }
+    },
+    shell: async () => {
+      sentShell.push(directory)
+      return { data: undefined }
+    },
+    prompt: async () => ({ data: undefined }),
+    command: async () => ({ data: undefined }),
+    abort: async () => ({ data: undefined }),
+  },
+  worktree: {
+    create: async () => ({ data: { directory: `${directory}/new` } }),
+  },
+})
+
+beforeAll(async () => {
+  const rootClient = clientFor("/repo/main")
+
+  mock.module("@solidjs/router", () => ({
+    useNavigate: () => () => undefined,
+    useParams: () => ({}),
+  }))
+
+  mock.module("@opencode-ai/sdk/v2/client", () => ({
+    createOpencodeClient: (input: { directory: string }) => {
+      createdClients.push(input.directory)
+      return clientFor(input.directory)
+    },
+  }))
+
+  mock.module("@opencode-ai/ui/toast", () => ({
+    showToast: () => 0,
+  }))
+
+  mock.module("@opencode-ai/util/encode", () => ({
+    base64Encode: (value: string) => value,
+  }))
+
+  mock.module("@/context/local", () => ({
+    useLocal: () => ({
+      model: {
+        current: () => ({ id: "model", provider: { id: "provider" } }),
+        variant: { current: () => undefined },
+      },
+      agent: {
+        current: () => ({ name: "agent" }),
+      },
+    }),
+  }))
+
+  mock.module("@/context/prompt", () => ({
+    usePrompt: () => ({
+      current: () => promptValue,
+      reset: () => undefined,
+      set: () => undefined,
+      context: {
+        add: () => undefined,
+        remove: () => undefined,
+        items: () => [],
+      },
+    }),
+  }))
+
+  mock.module("@/context/layout", () => ({
+    useLayout: () => ({
+      handoff: {
+        setTabs: () => undefined,
+      },
+    }),
+  }))
+
+  mock.module("@/context/sdk", () => ({
+    useSDK: () => ({
+      directory: "/repo/main",
+      client: rootClient,
+      url: "http://localhost:4096",
+    }),
+  }))
+
+  mock.module("@/context/sync", () => ({
+    useSync: () => ({
+      data: { command: [] },
+      session: {
+        optimistic: {
+          add: () => undefined,
+          remove: () => undefined,
+        },
+      },
+      set: () => undefined,
+    }),
+  }))
+
+  mock.module("@/context/global-sync", () => ({
+    useGlobalSync: () => ({
+      child: (directory: string) => {
+        syncedDirectories.push(directory)
+        return [{}, () => undefined]
+      },
+    }),
+  }))
+
+  mock.module("@/context/platform", () => ({
+    usePlatform: () => ({
+      fetch: fetch,
+    }),
+  }))
+
+  mock.module("@/context/language", () => ({
+    useLanguage: () => ({
+      t: (key: string) => key,
+    }),
+  }))
+
+  const mod = await import("./submit")
+  createPromptSubmit = mod.createPromptSubmit
+})
+
+beforeEach(() => {
+  createdClients.length = 0
+  createdSessions.length = 0
+  sentShell.length = 0
+  syncedDirectories.length = 0
+  selected = "/repo/worktree-a"
+})
+
+describe("prompt submit worktree selection", () => {
+  test("reads the latest worktree accessor value per submit", async () => {
+    const submit = createPromptSubmit({
+      info: () => undefined,
+      imageAttachments: () => [],
+      commentCount: () => 0,
+      mode: () => "shell",
+      working: () => false,
+      editor: () => undefined,
+      queueScroll: () => undefined,
+      promptLength: (value) => value.reduce((sum, part) => sum + ("content" in part ? part.content.length : 0), 0),
+      addToHistory: () => undefined,
+      resetHistoryNavigation: () => undefined,
+      setMode: () => undefined,
+      setPopover: () => undefined,
+      newSessionWorktree: () => selected,
+      onNewSessionWorktreeReset: () => undefined,
+      onSubmit: () => undefined,
+    })
+
+    const event = { preventDefault: () => undefined } as unknown as Event
+
+    await submit.handleSubmit(event)
+    selected = "/repo/worktree-b"
+    await submit.handleSubmit(event)
+
+    expect(createdClients).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(sentShell).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
+  })
+})

packages/app/src/components/prompt-input/submit.ts

@@ -0,0 +1,417 @@
+import { Accessor } from "solid-js"
+import { useNavigate, useParams } from "@solidjs/router"
+import { createOpencodeClient, type Message } from "@opencode-ai/sdk/v2/client"
+import { showToast } from "@opencode-ai/ui/toast"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { useLocal } from "@/context/local"
+import { usePrompt, type ImageAttachmentPart, type Prompt } from "@/context/prompt"
+import { useLayout } from "@/context/layout"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useGlobalSync } from "@/context/global-sync"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
+import { Identifier } from "@/utils/id"
+import { Worktree as WorktreeState } from "@/utils/worktree"
+import type { FileSelection } from "@/context/file"
+import { setCursorPosition } from "./editor-dom"
+import { buildRequestParts } from "./build-request-parts"
+
+type PendingPrompt = {
+  abort: AbortController
+  cleanup: VoidFunction
+}
+
+const pending = new Map<string, PendingPrompt>()
+
+type PromptSubmitInput = {
+  info: Accessor<{ id: string } | undefined>
+  imageAttachments: Accessor<ImageAttachmentPart[]>
+  commentCount: Accessor<number>
+  mode: Accessor<"normal" | "shell">
+  working: Accessor<boolean>
+  editor: () => HTMLDivElement | undefined
+  queueScroll: () => void
+  promptLength: (prompt: Prompt) => number
+  addToHistory: (prompt: Prompt, mode: "normal" | "shell") => void
+  resetHistoryNavigation: () => void
+  setMode: (mode: "normal" | "shell") => void
+  setPopover: (popover: "at" | "slash" | null) => void
+  newSessionWorktree?: Accessor<string | undefined>
+  onNewSessionWorktreeReset?: () => void
+  onSubmit?: () => void
+}
+
+type CommentItem = {
+  path: string
+  selection?: FileSelection
+  comment?: string
+  commentID?: string
+  commentOrigin?: "review" | "file"
+  preview?: string
+}
+
+export function createPromptSubmit(input: PromptSubmitInput) {
+  const navigate = useNavigate()
+  const sdk = useSDK()
+  const sync = useSync()
+  const globalSync = useGlobalSync()
+  const platform = usePlatform()
+  const local = useLocal()
+  const prompt = usePrompt()
+  const layout = useLayout()
+  const language = useLanguage()
+  const params = useParams()
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  const abort = async () => {
+    const sessionID = params.id
+    if (!sessionID) return Promise.resolve()
+    const queued = pending.get(sessionID)
+    if (queued) {
+      queued.abort.abort()
+      queued.cleanup()
+      pending.delete(sessionID)
+      return Promise.resolve()
+    }
+    return sdk.client.session
+      .abort({
+        sessionID,
+      })
+      .catch(() => {})
+  }
+
+  const restoreCommentItems = (items: CommentItem[]) => {
+    for (const item of items) {
+      prompt.context.add({
+        type: "file",
+        path: item.path,
+        selection: item.selection,
+        comment: item.comment,
+        commentID: item.commentID,
+        commentOrigin: item.commentOrigin,
+        preview: item.preview,
+      })
+    }
+  }
+
+  const removeCommentItems = (items: { key: string }[]) => {
+    for (const item of items) {
+      prompt.context.remove(item.key)
+    }
+  }
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault()
+
+    const currentPrompt = prompt.current()
+    const text = currentPrompt.map((part) => ("content" in part ? part.content : "")).join("")
+    const images = input.imageAttachments().slice()
+    const mode = input.mode()
+
+    if (text.trim().length === 0 && images.length === 0 && input.commentCount() === 0) {
+      if (input.working()) abort()
+      return
+    }
+
+    const currentModel = local.model.current()
+    const currentAgent = local.agent.current()
+    if (!currentModel || !currentAgent) {
+      showToast({
+        title: language.t("prompt.toast.modelAgentRequired.title"),
+        description: language.t("prompt.toast.modelAgentRequired.description"),
+      })
+      return
+    }
+
+    input.addToHistory(currentPrompt, mode)
+    input.resetHistoryNavigation()
+
+    const projectDirectory = sdk.directory
+    const isNewSession = !params.id
+    const worktreeSelection = input.newSessionWorktree?.() || "main"
+
+    let sessionDirectory = projectDirectory
+    let client = sdk.client
+
+    if (isNewSession) {
+      if (worktreeSelection === "create") {
+        const createdWorktree = await client.worktree
+          .create({ directory: projectDirectory })
+          .then((x) => x.data)
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.worktreeCreateFailed.title"),
+              description: errorMessage(err),
+            })
+            return undefined
+          })
+
+        if (!createdWorktree?.directory) {
+          showToast({
+            title: language.t("prompt.toast.worktreeCreateFailed.title"),
+            description: language.t("common.requestFailed"),
+          })
+          return
+        }
+        WorktreeState.pending(createdWorktree.directory)
+        sessionDirectory = createdWorktree.directory
+      }
+
+      if (worktreeSelection !== "main" && worktreeSelection !== "create") {
+        sessionDirectory = worktreeSelection
+      }
+
+      if (sessionDirectory !== projectDirectory) {
+        client = createOpencodeClient({
+          baseUrl: sdk.url,
+          fetch: platform.fetch,
+          directory: sessionDirectory,
+          throwOnError: true,
+        })
+        globalSync.child(sessionDirectory)
+      }
+
+      input.onNewSessionWorktreeReset?.()
+    }
+
+    let session = input.info()
+    if (!session && isNewSession) {
+      session = await client.session
+        .create()
+        .then((x) => x.data ?? undefined)
+        .catch((err) => {
+          showToast({
+            title: language.t("prompt.toast.sessionCreateFailed.title"),
+            description: errorMessage(err),
+          })
+          return undefined
+        })
+      if (session) {
+        layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
+        navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
+      }
+    }
+    if (!session) {
+      showToast({
+        title: language.t("prompt.toast.promptSendFailed.title"),
+        description: language.t("prompt.toast.promptSendFailed.description"),
+      })
+      return
+    }
+
+    input.onSubmit?.()
+
+    const model = {
+      modelID: currentModel.id,
+      providerID: currentModel.provider.id,
+    }
+    const agent = currentAgent.name
+    const variant = local.model.variant.current()
+
+    const clearInput = () => {
+      prompt.reset()
+      input.setMode("normal")
+      input.setPopover(null)
+    }
+
+    const restoreInput = () => {
+      prompt.set(currentPrompt, input.promptLength(currentPrompt))
+      input.setMode(mode)
+      input.setPopover(null)
+      requestAnimationFrame(() => {
+        const editor = input.editor()
+        if (!editor) return
+        editor.focus()
+        setCursorPosition(editor, input.promptLength(currentPrompt))
+        input.queueScroll()
+      })
+    }
+
+    if (mode === "shell") {
+      clearInput()
+      client.session
+        .shell({
+          sessionID: session.id,
+          agent,
+          model,
+          command: text,
+        })
+        .catch((err) => {
+          showToast({
+            title: language.t("prompt.toast.shellSendFailed.title"),
+            description: errorMessage(err),
+          })
+          restoreInput()
+        })
+      return
+    }
+
+    if (text.startsWith("/")) {
+      const [cmdName, ...args] = text.split(" ")
+      const commandName = cmdName.slice(1)
+      const customCommand = sync.data.command.find((c) => c.name === commandName)
+      if (customCommand) {
+        clearInput()
+        client.session
+          .command({
+            sessionID: session.id,
+            command: commandName,
+            arguments: args.join(" "),
+            agent,
+            model: `${model.providerID}/${model.modelID}`,
+            variant,
+            parts: images.map((attachment) => ({
+              id: Identifier.ascending("part"),
+              type: "file" as const,
+              mime: attachment.mime,
+              url: attachment.dataUrl,
+              filename: attachment.filename,
+            })),
+          })
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.commandSendFailed.title"),
+              description: errorMessage(err),
+            })
+            restoreInput()
+          })
+        return
+      }
+    }
+
+    const context = prompt.context.items().slice()
+    const commentItems = context.filter((item) => item.type === "file" && !!item.comment?.trim())
+
+    const messageID = Identifier.ascending("message")
+    const { requestParts, optimisticParts } = buildRequestParts({
+      prompt: currentPrompt,
+      context,
+      images,
+      text,
+      sessionID: session.id,
+      messageID,
+      sessionDirectory,
+    })
+
+    const optimisticMessage: Message = {
+      id: messageID,
+      sessionID: session.id,
+      role: "user",
+      time: { created: Date.now() },
+      agent,
+      model,
+    }
+
+    const addOptimisticMessage = () =>
+      sync.session.optimistic.add({
+        directory: sessionDirectory,
+        sessionID: session.id,
+        message: optimisticMessage,
+        parts: optimisticParts,
+      })
+
+    const removeOptimisticMessage = () =>
+      sync.session.optimistic.remove({
+        directory: sessionDirectory,
+        sessionID: session.id,
+        messageID,
+      })
+
+    removeCommentItems(commentItems)
+    clearInput()
+    addOptimisticMessage()
+
+    const waitForWorktree = async () => {
+      const worktree = WorktreeState.get(sessionDirectory)
+      if (!worktree || worktree.status !== "pending") return true
+
+      if (sessionDirectory === projectDirectory) {
+        sync.set("session_status", session.id, { type: "busy" })
+      }
+
+      const controller = new AbortController()
+      const cleanup = () => {
+        if (sessionDirectory === projectDirectory) {
+          sync.set("session_status", session.id, { type: "idle" })
+        }
+        removeOptimisticMessage()
+        restoreCommentItems(commentItems)
+        restoreInput()
+      }
+
+      pending.set(session.id, { abort: controller, cleanup })
+
+      const abortWait = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
+        if (controller.signal.aborted) {
+          resolve({ status: "failed", message: "aborted" })
+          return
+        }
+        controller.signal.addEventListener(
+          "abort",
+          () => {
+            resolve({ status: "failed", message: "aborted" })
+          },
+          { once: true },
+        )
+      })
+
+      const timeoutMs = 5 * 60 * 1000
+      const timer = { id: undefined as number | undefined }
+      const timeout = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
+        timer.id = window.setTimeout(() => {
+          resolve({ status: "failed", message: language.t("workspace.error.stillPreparing") })
+        }, timeoutMs)
+      })
+
+      const result = await Promise.race([WorktreeState.wait(sessionDirectory), abortWait, timeout]).finally(() => {
+        if (timer.id === undefined) return
+        clearTimeout(timer.id)
+      })
+      pending.delete(session.id)
+      if (controller.signal.aborted) return false
+      if (result.status === "failed") throw new Error(result.message)
+      return true
+    }
+
+    const send = async () => {
+      const ok = await waitForWorktree()
+      if (!ok) return
+      await client.session.prompt({
+        sessionID: session.id,
+        agent,
+        model,
+        messageID,
+        parts: requestParts,
+        variant,
+      })
+    }
+
+    void send().catch((err) => {
+      pending.delete(session.id)
+      if (sessionDirectory === projectDirectory) {
+        sync.set("session_status", session.id, { type: "idle" })
+      }
+      showToast({
+        title: language.t("prompt.toast.promptSendFailed.title"),
+        description: errorMessage(err),
+      })
+      removeOptimisticMessage()
+      restoreCommentItems(commentItems)
+      restoreInput()
+    })
+  }
+
+  return {
+    abort,
+    handleSubmit,
+  }
+}

packages/app/src/components/question-dock.tsx

@@ -0,0 +1,307 @@
+import { For, Show, createMemo, type Component } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { showToast } from "@opencode-ai/ui/toast"
+import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+
+const writeAt = <T,>(list: T[], index: number, value: T) => {
+  const next = [...list]
+  next[index] = value
+  return next
+}
+
+const pickAnswer = (list: QuestionAnswer[], index: number, value: string) => {
+  return writeAt(list, index, [value])
+}
+
+const toggleAnswer = (list: QuestionAnswer[], index: number, value: string) => {
+  const current = list[index] ?? []
+  const next = current.includes(value) ? current.filter((item) => item !== value) : [...current, value]
+  return writeAt(list, index, next)
+}
+
+const appendAnswer = (list: QuestionAnswer[], index: number, value: string) => {
+  const current = list[index] ?? []
+  if (current.includes(value)) return list
+  return writeAt(list, index, [...current, value])
+}
+
+const writeCustom = (list: string[], index: number, value: string) => {
+  return writeAt(list, index, value)
+}
+
+export const QuestionDock: Component<{ request: QuestionRequest }> = (props) => {
+  const sdk = useSDK()
+  const language = useLanguage()
+
+  const questions = createMemo(() => props.request.questions)
+  const single = createMemo(() => questions().length === 1 && questions()[0]?.multiple !== true)
+
+  const [store, setStore] = createStore({
+    tab: 0,
+    answers: [] as QuestionAnswer[],
+    custom: [] as string[],
+    editing: false,
+    sending: false,
+  })
+
+  const question = createMemo(() => questions()[store.tab])
+  const confirm = createMemo(() => !single() && store.tab === questions().length)
+  const options = createMemo(() => question()?.options ?? [])
+  const input = createMemo(() => store.custom[store.tab] ?? "")
+  const multi = createMemo(() => question()?.multiple === true)
+  const customPicked = createMemo(() => {
+    const value = input()
+    if (!value) return false
+    return store.answers[store.tab]?.includes(value) ?? false
+  })
+
+  const fail = (err: unknown) => {
+    const message = err instanceof Error ? err.message : String(err)
+    showToast({ title: language.t("common.requestFailed"), description: message })
+  }
+
+  const reply = async (answers: QuestionAnswer[]) => {
+    if (store.sending) return
+
+    setStore("sending", true)
+    try {
+      await sdk.client.question.reply({ requestID: props.request.id, answers })
+    } catch (err) {
+      fail(err)
+    } finally {
+      setStore("sending", false)
+    }
+  }
+
+  const reject = async () => {
+    if (store.sending) return
+
+    setStore("sending", true)
+    try {
+      await sdk.client.question.reject({ requestID: props.request.id })
+    } catch (err) {
+      fail(err)
+    } finally {
+      setStore("sending", false)
+    }
+  }
+
+  const submit = () => {
+    void reply(questions().map((_, i) => store.answers[i] ?? []))
+  }
+
+  const pick = (answer: string, custom: boolean = false) => {
+    setStore("answers", pickAnswer(store.answers, store.tab, answer))
+
+    if (custom) {
+      setStore("custom", writeCustom(store.custom, store.tab, answer))
+    }
+
+    if (single()) {
+      void reply([[answer]])
+      return
+    }
+
+    setStore("tab", store.tab + 1)
+  }
+
+  const toggle = (answer: string) => {
+    setStore("answers", toggleAnswer(store.answers, store.tab, answer))
+  }
+
+  const selectTab = (index: number) => {
+    setStore("tab", index)
+    setStore("editing", false)
+  }
+
+  const selectOption = (optIndex: number) => {
+    if (store.sending) return
+
+    if (optIndex === options().length) {
+      setStore("editing", true)
+      return
+    }
+
+    const opt = options()[optIndex]
+    if (!opt) return
+    if (multi()) {
+      toggle(opt.label)
+      return
+    }
+    pick(opt.label)
+  }
+
+  const handleCustomSubmit = (e: Event) => {
+    e.preventDefault()
+    if (store.sending) return
+
+    const value = input().trim()
+    if (!value) {
+      setStore("editing", false)
+      return
+    }
+
+    if (multi()) {
+      setStore("answers", appendAnswer(store.answers, store.tab, value))
+      setStore("editing", false)
+      return
+    }
+
+    pick(value, true)
+    setStore("editing", false)
+  }
+
+  return (
+    <div data-component="question-prompt">
+      <Show when={!single()}>
+        <div data-slot="question-tabs">
+          <For each={questions()}>
+            {(q, index) => {
+              const active = () => index() === store.tab
+              const answered = () => (store.answers[index()]?.length ?? 0) > 0
+              return (
+                <button
+                  data-slot="question-tab"
+                  data-active={active()}
+                  data-answered={answered()}
+                  disabled={store.sending}
+                  onClick={() => selectTab(index())}
+                >
+                  {q.header}
+                </button>
+              )
+            }}
+          </For>
+          <button
+            data-slot="question-tab"
+            data-active={confirm()}
+            disabled={store.sending}
+            onClick={() => selectTab(questions().length)}
+          >
+            {language.t("ui.common.confirm")}
+          </button>
+        </div>
+      </Show>
+
+      <Show when={!confirm()}>
+        <div data-slot="question-content">
+          <div data-slot="question-text">
+            {question()?.question}
+            {multi() ? " " + language.t("ui.question.multiHint") : ""}
+          </div>
+          <div data-slot="question-options">
+            <For each={options()}>
+              {(opt, i) => {
+                const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
+                return (
+                  <button
+                    data-slot="question-option"
+                    data-picked={picked()}
+                    disabled={store.sending}
+                    onClick={() => selectOption(i())}
+                  >
+                    <span data-slot="option-label">{opt.label}</span>
+                    <Show when={opt.description}>
+                      <span data-slot="option-description">{opt.description}</span>
+                    </Show>
+                    <Show when={picked()}>
+                      <Icon name="check-small" size="normal" />
+                    </Show>
+                  </button>
+                )
+              }}
+            </For>
+            <button
+              data-slot="question-option"
+              data-picked={customPicked()}
+              disabled={store.sending}
+              onClick={() => selectOption(options().length)}
+            >
+              <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
+              <Show when={!store.editing && input()}>
+                <span data-slot="option-description">{input()}</span>
+              </Show>
+              <Show when={customPicked()}>
+                <Icon name="check-small" size="normal" />
+              </Show>
+            </button>
+            <Show when={store.editing}>
+              <form data-slot="custom-input-form" onSubmit={handleCustomSubmit}>
+                <input
+                  ref={(el) => setTimeout(() => el.focus(), 0)}
+                  type="text"
+                  data-slot="custom-input"
+                  placeholder={language.t("ui.question.custom.placeholder")}
+                  value={input()}
+                  disabled={store.sending}
+                  onInput={(e) => {
+                    setStore("custom", writeCustom(store.custom, store.tab, e.currentTarget.value))
+                  }}
+                />
+                <Button type="submit" variant="primary" size="small" disabled={store.sending}>
+                  {multi() ? language.t("ui.common.add") : language.t("ui.common.submit")}
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="small"
+                  disabled={store.sending}
+                  onClick={() => setStore("editing", false)}
+                >
+                  {language.t("ui.common.cancel")}
+                </Button>
+              </form>
+            </Show>
+          </div>
+        </div>
+      </Show>
+
+      <Show when={confirm()}>
+        <div data-slot="question-review">
+          <div data-slot="review-title">{language.t("ui.messagePart.review.title")}</div>
+          <For each={questions()}>
+            {(q, index) => {
+              const value = () => store.answers[index()]?.join(", ") ?? ""
+              const answered = () => Boolean(value())
+              return (
+                <div data-slot="review-item">
+                  <span data-slot="review-label">{q.question}</span>
+                  <span data-slot="review-value" data-answered={answered()}>
+                    {answered() ? value() : language.t("ui.question.review.notAnswered")}
+                  </span>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+
+      <div data-slot="question-actions">
+        <Button variant="ghost" size="small" onClick={reject} disabled={store.sending}>
+          {language.t("ui.common.dismiss")}
+        </Button>
+        <Show when={!single()}>
+          <Show when={confirm()}>
+            <Button variant="primary" size="small" onClick={submit} disabled={store.sending}>
+              {language.t("ui.common.submit")}
+            </Button>
+          </Show>
+          <Show when={!confirm() && multi()}>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => selectTab(store.tab + 1)}
+              disabled={store.sending || (store.answers[store.tab]?.length ?? 0) === 0}
+            >
+              {language.t("ui.common.next")}
+            </Button>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/server/server-row.tsx

@@ -0,0 +1,77 @@
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { JSXElement, ParentProps, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { serverDisplayName } from "@/context/server"
+import type { ServerHealth } from "@/utils/server-health"
+
+interface ServerRowProps extends ParentProps {
+  url: string
+  status?: ServerHealth
+  class?: string
+  nameClass?: string
+  versionClass?: string
+  dimmed?: boolean
+  badge?: JSXElement
+}
+
+export function ServerRow(props: ServerRowProps) {
+  const [truncated, setTruncated] = createSignal(false)
+  let nameRef: HTMLSpanElement | undefined
+  let versionRef: HTMLSpanElement | undefined
+  const name = createMemo(() => serverDisplayName(props.url))
+
+  const check = () => {
+    const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
+    const versionTruncated = versionRef ? versionRef.scrollWidth > versionRef.clientWidth : false
+    setTruncated(nameTruncated || versionTruncated)
+  }
+
+  createEffect(() => {
+    name()
+    props.url
+    props.status?.version
+    queueMicrotask(check)
+  })
+
+  onMount(() => {
+    check()
+    if (typeof ResizeObserver !== "function") return
+    const observer = new ResizeObserver(check)
+    if (nameRef) observer.observe(nameRef)
+    if (versionRef) observer.observe(versionRef)
+    onCleanup(() => observer.disconnect())
+  })
+
+  const tooltipValue = () => (
+    <span class="flex items-center gap-2">
+      <span>{name()}</span>
+      <Show when={props.status?.version}>
+        <span class="text-text-invert-base">{props.status?.version}</span>
+      </Show>
+    </span>
+  )
+
+  return (
+    <Tooltip value={tooltipValue()} placement="top" inactive={!truncated()}>
+      <div class={props.class} classList={{ "opacity-50": props.dimmed }}>
+        <div
+          classList={{
+            "size-1.5 rounded-full shrink-0": true,
+            "bg-icon-success-base": props.status?.healthy === true,
+            "bg-icon-critical-base": props.status?.healthy === false,
+            "bg-border-weak-base": props.status === undefined,
+          }}
+        />
+        <span ref={nameRef} class={props.nameClass ?? "truncate"}>
+          {name()}
+        </span>
+        <Show when={props.status?.version}>
+          <span ref={versionRef} class={props.versionClass ?? "text-text-weak text-14-regular truncate"}>
+            {props.status?.version}
+          </span>
+        </Show>
+        {props.badge}
+        {props.children}
+      </div>
+    </Tooltip>
+  )
+}

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

@@ -3,17 +3,28 @@ 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 { findLast } from "@opencode-ai/util/array"
 
 import { useLayout } from "@/context/layout"
 import { useSync } from "@/context/sync"
 import { useLanguage } from "@/context/language"
+import { getSessionContextMetrics } from "@/components/session/session-context-metrics"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
 }
 
+function openSessionContext(args: {
+  view: ReturnType<ReturnType<typeof useLayout>["view"]>
+  layout: ReturnType<typeof useLayout>
+  tabs: ReturnType<ReturnType<typeof useLayout>["tabs"]>
+}) {
+  if (!args.view.reviewPanel.opened()) args.view.reviewPanel.open()
+  args.layout.fileTree.open()
+  args.layout.fileTree.setTab("all")
+  args.tabs.open("context")
+  args.tabs.setActive("context")
+}
+
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
   const params = useParams()
@@ -34,40 +45,24 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
       }),
   )
 
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), sync.data.provider.all))
+  const context = createMemo(() => metrics().context)
   const cost = createMemo(() => {
-    const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
-    return usd().format(total)
-  })
-
-  const context = createMemo(() => {
-    const locale = language.locale()
-    const last = findLast(messages(), (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(locale),
-      percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
-    }
+    return usd().format(metrics().totalCost)
   })
 
   const openContext = () => {
     if (!params.id) return
-    if (!view().reviewPanel.opened()) view().reviewPanel.open()
-    layout.fileTree.open()
-    layout.fileTree.setTab("all")
-    tabs().open("context")
-    tabs().setActive("context")
+    openSessionContext({
+      view: view(),
+      layout,
+      tabs: tabs(),
+    })
   }
 
   const circle = () => (
     <div class="flex items-center justify-center">
-      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
+      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.usage ?? 0} />
     </div>
   )
 
@@ -77,11 +72,11 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
         {(ctx) => (
           <>
             <div class="flex items-center gap-2">
-              <span class="text-text-invert-strong">{ctx().tokens}</span>
+              <span class="text-text-invert-strong">{ctx().total.toLocaleString(language.locale())}</span>
               <span class="text-text-invert-base">{language.t("context.usage.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-strong">{ctx().usage ?? 0}%</span>
               <span class="text-text-invert-base">{language.t("context.usage.usage")}</span>
             </div>
           </>

packages/app/src/components/session/session-context-breakdown.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test"
+import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { estimateSessionContextBreakdown } from "./session-context-breakdown"
+
+const user = (id: string) => {
+  return {
+    id,
+    role: "user",
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+const assistant = (id: string) => {
+  return {
+    id,
+    role: "assistant",
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+describe("estimateSessionContextBreakdown", () => {
+  test("estimates tokens and keeps remaining tokens as other", () => {
+    const messages = [user("u1"), assistant("a1")]
+    const parts = {
+      u1: [{ type: "text", text: "hello world" }] as unknown as Part[],
+      a1: [{ type: "text", text: "assistant response" }] as unknown as Part[],
+    }
+
+    const output = estimateSessionContextBreakdown({
+      messages,
+      parts,
+      input: 20,
+      systemPrompt: "system prompt",
+    })
+
+    const map = Object.fromEntries(output.map((segment) => [segment.key, segment.tokens]))
+    expect(map.system).toBe(4)
+    expect(map.user).toBe(3)
+    expect(map.assistant).toBe(5)
+    expect(map.other).toBe(8)
+  })
+
+  test("scales segments when estimates exceed input", () => {
+    const messages = [user("u1"), assistant("a1")]
+    const parts = {
+      u1: [{ type: "text", text: "x".repeat(400) }] as unknown as Part[],
+      a1: [{ type: "text", text: "y".repeat(400) }] as unknown as Part[],
+    }
+
+    const output = estimateSessionContextBreakdown({
+      messages,
+      parts,
+      input: 10,
+      systemPrompt: "z".repeat(200),
+    })
+
+    const total = output.reduce((sum, segment) => sum + segment.tokens, 0)
+    expect(total).toBeLessThanOrEqual(10)
+    expect(output.every((segment) => segment.width <= 100)).toBeTrue()
+  })
+})

packages/app/src/components/session/session-context-breakdown.ts

@@ -0,0 +1,132 @@
+import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+
+export type SessionContextBreakdownKey = "system" | "user" | "assistant" | "tool" | "other"
+
+export type SessionContextBreakdownSegment = {
+  key: SessionContextBreakdownKey
+  tokens: number
+  width: number
+  percent: number
+}
+
+const estimateTokens = (chars: number) => Math.ceil(chars / 4)
+const toPercent = (tokens: number, input: number) => (tokens / input) * 100
+const toPercentLabel = (tokens: number, input: number) => Math.round(toPercent(tokens, input) * 10) / 10
+
+const charsFromUserPart = (part: Part) => {
+  if (part.type === "text") return part.text.length
+  if (part.type === "file") return part.source?.text.value.length ?? 0
+  if (part.type === "agent") return part.source?.value.length ?? 0
+  return 0
+}
+
+const charsFromAssistantPart = (part: Part) => {
+  if (part.type === "text") return { assistant: part.text.length, tool: 0 }
+  if (part.type === "reasoning") return { assistant: part.text.length, tool: 0 }
+  if (part.type !== "tool") return { assistant: 0, tool: 0 }
+
+  const input = Object.keys(part.state.input).length * 16
+  if (part.state.status === "pending") return { assistant: 0, tool: input + part.state.raw.length }
+  if (part.state.status === "completed") return { assistant: 0, tool: input + part.state.output.length }
+  if (part.state.status === "error") return { assistant: 0, tool: input + part.state.error.length }
+  return { assistant: 0, tool: input }
+}
+
+const build = (
+  tokens: { system: number; user: number; assistant: number; tool: number; other: number },
+  input: number,
+) => {
+  return [
+    {
+      key: "system",
+      tokens: tokens.system,
+    },
+    {
+      key: "user",
+      tokens: tokens.user,
+    },
+    {
+      key: "assistant",
+      tokens: tokens.assistant,
+    },
+    {
+      key: "tool",
+      tokens: tokens.tool,
+    },
+    {
+      key: "other",
+      tokens: tokens.other,
+    },
+  ]
+    .filter((x) => x.tokens > 0)
+    .map((x) => ({
+      key: x.key,
+      tokens: x.tokens,
+      width: toPercent(x.tokens, input),
+      percent: toPercentLabel(x.tokens, input),
+    })) as SessionContextBreakdownSegment[]
+}
+
+export function estimateSessionContextBreakdown(args: {
+  messages: Message[]
+  parts: Record<string, Part[] | undefined>
+  input: number
+  systemPrompt?: string
+}) {
+  if (!args.input) return []
+
+  const counts = args.messages.reduce(
+    (acc, msg) => {
+      const parts = args.parts[msg.id] ?? []
+      if (msg.role === "user") {
+        const user = parts.reduce((sum, part) => sum + charsFromUserPart(part), 0)
+        return { ...acc, user: acc.user + user }
+      }
+
+      if (msg.role !== "assistant") return acc
+      const assistant = parts.reduce(
+        (sum, part) => {
+          const next = charsFromAssistantPart(part)
+          return {
+            assistant: sum.assistant + next.assistant,
+            tool: sum.tool + next.tool,
+          }
+        },
+        { assistant: 0, tool: 0 },
+      )
+      return {
+        ...acc,
+        assistant: acc.assistant + assistant.assistant,
+        tool: acc.tool + assistant.tool,
+      }
+    },
+    {
+      system: args.systemPrompt?.length ?? 0,
+      user: 0,
+      assistant: 0,
+      tool: 0,
+    },
+  )
+
+  const tokens = {
+    system: estimateTokens(counts.system),
+    user: estimateTokens(counts.user),
+    assistant: estimateTokens(counts.assistant),
+    tool: estimateTokens(counts.tool),
+  }
+  const estimated = tokens.system + tokens.user + tokens.assistant + tokens.tool
+
+  if (estimated <= args.input) {
+    return build({ ...tokens, other: args.input - estimated }, args.input)
+  }
+
+  const scale = args.input / estimated
+  const scaled = {
+    system: Math.floor(tokens.system * scale),
+    user: Math.floor(tokens.user * scale),
+    assistant: Math.floor(tokens.assistant * scale),
+    tool: Math.floor(tokens.tool * scale),
+  }
+  const total = scaled.system + scaled.user + scaled.assistant + scaled.tool
+  return build({ ...scaled, other: Math.max(0, args.input - total) }, args.input)
+}

packages/app/src/components/session/session-context-format.ts

@@ -0,0 +1,20 @@
+import { DateTime } from "luxon"
+
+export function createSessionContextFormatter(locale: string) {
+  return {
+    number(value: number | null | undefined) {
+      if (value === undefined) return "—"
+      if (value === null) return "—"
+      return value.toLocaleString(locale)
+    },
+    percent(value: number | null | undefined) {
+      if (value === undefined) return "—"
+      if (value === null) return "—"
+      return value.toLocaleString(locale) + "%"
+    },
+    time(value: number | undefined) {
+      if (!value) return "—"
+      return DateTime.fromMillis(value).setLocale(locale).toLocaleString(DateTime.DATETIME_MED)
+    },
+  }
+}

packages/app/src/components/session/session-context-metrics.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, test } from "bun:test"
+import type { Message } from "@opencode-ai/sdk/v2/client"
+import { getSessionContextMetrics } from "./session-context-metrics"
+
+const assistant = (
+  id: string,
+  tokens: { input: number; output: number; reasoning: number; read: number; write: number },
+  cost: number,
+  providerID = "openai",
+  modelID = "gpt-4.1",
+) => {
+  return {
+    id,
+    role: "assistant",
+    providerID,
+    modelID,
+    cost,
+    tokens: {
+      input: tokens.input,
+      output: tokens.output,
+      reasoning: tokens.reasoning,
+      cache: {
+        read: tokens.read,
+        write: tokens.write,
+      },
+    },
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+const user = (id: string) => {
+  return {
+    id,
+    role: "user",
+    cost: 0,
+    time: { created: 1 },
+  } as unknown as Message
+}
+
+describe("getSessionContextMetrics", () => {
+  test("computes totals and usage from latest assistant with tokens", () => {
+    const messages = [
+      user("u1"),
+      assistant("a1", { input: 0, output: 0, reasoning: 0, read: 0, write: 0 }, 0.5),
+      assistant("a2", { input: 300, output: 100, reasoning: 50, read: 25, write: 25 }, 1.25),
+    ]
+    const providers = [
+      {
+        id: "openai",
+        name: "OpenAI",
+        models: {
+          "gpt-4.1": {
+            name: "GPT-4.1",
+            limit: { context: 1000 },
+          },
+        },
+      },
+    ]
+
+    const metrics = getSessionContextMetrics(messages, providers)
+
+    expect(metrics.totalCost).toBe(1.75)
+    expect(metrics.context?.message.id).toBe("a2")
+    expect(metrics.context?.total).toBe(500)
+    expect(metrics.context?.usage).toBe(50)
+    expect(metrics.context?.providerLabel).toBe("OpenAI")
+    expect(metrics.context?.modelLabel).toBe("GPT-4.1")
+  })
+
+  test("preserves fallback labels and null usage when model metadata is missing", () => {
+    const messages = [assistant("a1", { input: 40, output: 10, reasoning: 0, read: 0, write: 0 }, 0.1, "p-1", "m-1")]
+    const providers = [{ id: "p-1", models: {} }]
+
+    const metrics = getSessionContextMetrics(messages, providers)
+
+    expect(metrics.context?.providerLabel).toBe("p-1")
+    expect(metrics.context?.modelLabel).toBe("m-1")
+    expect(metrics.context?.limit).toBeUndefined()
+    expect(metrics.context?.usage).toBeNull()
+  })
+
+  test("recomputes when message array is mutated in place", () => {
+    const messages = [assistant("a1", { input: 10, output: 10, reasoning: 10, read: 10, write: 10 }, 0.25)]
+    const providers = [{ id: "openai", models: {} }]
+
+    const one = getSessionContextMetrics(messages, providers)
+    messages.push(assistant("a2", { input: 100, output: 20, reasoning: 0, read: 0, write: 0 }, 0.75))
+    const two = getSessionContextMetrics(messages, providers)
+
+    expect(one.context?.message.id).toBe("a1")
+    expect(two.context?.message.id).toBe("a2")
+    expect(two.totalCost).toBe(1)
+  })
+})

packages/app/src/components/session/session-context-metrics.ts

@@ -0,0 +1,82 @@
+import type { AssistantMessage, Message } from "@opencode-ai/sdk/v2/client"
+
+type Provider = {
+  id: string
+  name?: string
+  models: Record<string, Model | undefined>
+}
+
+type Model = {
+  name?: string
+  limit: {
+    context: number
+  }
+}
+
+type Context = {
+  message: AssistantMessage
+  provider?: Provider
+  model?: Model
+  providerLabel: string
+  modelLabel: string
+  limit: number | undefined
+  input: number
+  output: number
+  reasoning: number
+  cacheRead: number
+  cacheWrite: number
+  total: number
+  usage: number | null
+}
+
+type Metrics = {
+  totalCost: number
+  context: Context | undefined
+}
+
+const tokenTotal = (msg: AssistantMessage) => {
+  return msg.tokens.input + msg.tokens.output + msg.tokens.reasoning + msg.tokens.cache.read + msg.tokens.cache.write
+}
+
+const lastAssistantWithTokens = (messages: Message[]) => {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]
+    if (msg.role !== "assistant") continue
+    if (tokenTotal(msg) <= 0) continue
+    return msg
+  }
+}
+
+const build = (messages: Message[], providers: Provider[]): Metrics => {
+  const totalCost = messages.reduce((sum, msg) => sum + (msg.role === "assistant" ? msg.cost : 0), 0)
+  const message = lastAssistantWithTokens(messages)
+  if (!message) return { totalCost, context: undefined }
+
+  const provider = providers.find((item) => item.id === message.providerID)
+  const model = provider?.models[message.modelID]
+  const limit = model?.limit.context
+  const total = tokenTotal(message)
+
+  return {
+    totalCost,
+    context: {
+      message,
+      provider,
+      model,
+      providerLabel: provider?.name ?? message.providerID,
+      modelLabel: model?.name ?? message.modelID,
+      limit,
+      input: message.tokens.input,
+      output: message.tokens.output,
+      reasoning: message.tokens.reasoning,
+      cacheRead: message.tokens.cache.read,
+      cacheWrite: message.tokens.cache.write,
+      total,
+      usage: limit ? Math.round((total / limit) * 100) : null,
+    },
+  }
+}
+
+export function getSessionContextMetrics(messages: Message[], providers: Provider[]) {
+  return build(messages, providers)
+}

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

@@ -1,7 +1,6 @@
 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"
@@ -11,8 +10,11 @@ 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"
+import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
+import { getSessionContextMetrics } from "./session-context-metrics"
+import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
+import { createSessionContextFormatter } from "./session-context-format"
 
 interface SessionContextTabProps {
   messages: () => Message[]
@@ -21,6 +23,74 @@ interface SessionContextTabProps {
   info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
 }
 
+const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
+  system: "var(--syntax-info)",
+  user: "var(--syntax-success)",
+  assistant: "var(--syntax-property)",
+  tool: "var(--syntax-warning)",
+  other: "var(--syntax-comment)",
+}
+
+function Stat(props: { label: string; value: JSX.Element }) {
+  return (
+    <div class="flex flex-col gap-1">
+      <div class="text-12-regular text-text-weak">{props.label}</div>
+      <div class="text-12-medium text-text-strong">{props.value}</div>
+    </div>
+  )
+}
+
+function RawMessageContent(props: { message: Message; getParts: (id: string) => Part[]; onRendered: () => void }) {
+  const file = createMemo(() => {
+    const parts = props.getParts(props.message.id)
+    const contents = JSON.stringify({ message: props.message, parts }, null, 2)
+    return {
+      name: `${props.message.role}-${props.message.id}.json`,
+      contents,
+      cacheKey: checksum(contents),
+    }
+  })
+
+  return (
+    <Code
+      file={file()}
+      overflow="wrap"
+      class="select-text"
+      onRendered={() => requestAnimationFrame(props.onRendered)}
+    />
+  )
+}
+
+function RawMessage(props: {
+  message: Message
+  getParts: (id: string) => Part[]
+  onRendered: () => void
+  time: (value: number | undefined) => string
+}) {
+  return (
+    <Accordion.Item value={props.message.id}>
+      <StickyAccordionHeader>
+        <Accordion.Trigger>
+          <div class="flex items-center justify-between gap-2 w-full">
+            <div class="min-w-0 truncate">
+              {props.message.role} <span class="text-text-base">• {props.message.id}</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="shrink-0 text-12-regular text-text-weak">{props.time(props.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={props.message} getParts={props.getParts} onRendered={props.onRendered} />
+        </div>
+      </Accordion.Content>
+    </Accordion.Item>
+  )
+}
+
 export function SessionContextTab(props: SessionContextTabProps) {
   const params = useParams()
   const sync = useSync()
@@ -34,44 +104,12 @@ export function SessionContextTab(props: SessionContextTabProps) {
       }),
   )
 
-  const ctx = createMemo(() => {
-    const last = findLast(props.messages(), (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 metrics = createMemo(() => getSessionContextMetrics(props.messages(), sync.data.provider.all))
+  const ctx = createMemo(() => metrics().context)
+  const formatter = createMemo(() => createSessionContextFormatter(language.locale()))
 
   const cost = createMemo(() => {
-    const total = props.messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
-    return usd().format(total)
+    return usd().format(metrics().totalCost)
   })
 
   const counts = createMemo(() => {
@@ -94,34 +132,16 @@ export function SessionContextTab(props: SessionContextTabProps) {
     return trimmed
   })
 
-  const number = (value: number | null | undefined) => {
-    if (value === undefined) return "—"
-    if (value === null) return "—"
-    return value.toLocaleString(language.locale())
-  }
-
-  const percent = (value: number | null | undefined) => {
-    if (value === undefined) return "—"
-    if (value === null) return "—"
-    return value.toLocaleString(language.locale()) + "%"
-  }
-
-  const time = (value: number | undefined) => {
-    if (!value) return "—"
-    return DateTime.fromMillis(value).setLocale(language.locale()).toLocaleString(DateTime.DATETIME_MED)
-  }
-
   const providerLabel = createMemo(() => {
     const c = ctx()
     if (!c) return "—"
-    return c.provider?.name ?? c.message.providerID
+    return c.providerLabel
   })
 
   const modelLabel = createMemo(() => {
     const c = ctx()
     if (!c) return "—"
-    if (c.model?.name) return c.model.name
-    return c.message.modelID
+    return c.modelLabel
   })
 
   const breakdown = createMemo(
@@ -129,122 +149,23 @@ export function SessionContextTab(props: SessionContextTabProps) {
       () => [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: language.t("context.breakdown.system"),
-              tokens: tokens.system,
-              width: pct(tokens.system),
-              percent: pctLabel(tokens.system),
-              color: "var(--syntax-info)",
-            },
-            {
-              key: "user",
-              label: language.t("context.breakdown.user"),
-              tokens: tokens.user,
-              width: pct(tokens.user),
-              percent: pctLabel(tokens.user),
-              color: "var(--syntax-success)",
-            },
-            {
-              key: "assistant",
-              label: language.t("context.breakdown.assistant"),
-              tokens: tokens.assistant,
-              width: pct(tokens.assistant),
-              percent: pctLabel(tokens.assistant),
-              color: "var(--syntax-property)",
-            },
-            {
-              key: "tool",
-              label: language.t("context.breakdown.tool"),
-              tokens: tokens.tool,
-              width: pct(tokens.tool),
-              percent: pctLabel(tokens.tool),
-              color: "var(--syntax-warning)",
-            },
-            {
-              key: "other",
-              label: language.t("context.breakdown.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) })
+        if (!c?.input) return []
+        return estimateSessionContextBreakdown({
+          messages: props.messages(),
+          parts: sync.data.part as Record<string, Part[] | undefined>,
+          input: c.input,
+          systemPrompt: systemPrompt(),
+        })
       },
     ),
   )
 
-  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 breakdownLabel = (key: SessionContextBreakdownKey) => {
+    if (key === "system") return language.t("context.breakdown.system")
+    if (key === "user") return language.t("context.breakdown.user")
+    if (key === "assistant") return language.t("context.breakdown.assistant")
+    if (key === "tool") return language.t("context.breakdown.tool")
+    return language.t("context.breakdown.other")
   }
 
   const stats = createMemo(() => {
@@ -255,15 +176,15 @@ export function SessionContextTab(props: SessionContextTabProps) {
       { label: language.t("context.stats.messages"), value: count.all.toLocaleString(language.locale()) },
       { label: language.t("context.stats.provider"), value: providerLabel() },
       { label: language.t("context.stats.model"), value: modelLabel() },
-      { label: language.t("context.stats.limit"), value: number(c?.limit) },
-      { label: language.t("context.stats.totalTokens"), value: number(c?.total) },
-      { label: language.t("context.stats.usage"), value: percent(c?.usage) },
-      { label: language.t("context.stats.inputTokens"), value: number(c?.input) },
-      { label: language.t("context.stats.outputTokens"), value: number(c?.output) },
-      { label: language.t("context.stats.reasoningTokens"), value: number(c?.reasoning) },
+      { label: language.t("context.stats.limit"), value: formatter().number(c?.limit) },
+      { label: language.t("context.stats.totalTokens"), value: formatter().number(c?.total) },
+      { label: language.t("context.stats.usage"), value: formatter().percent(c?.usage) },
+      { label: language.t("context.stats.inputTokens"), value: formatter().number(c?.input) },
+      { label: language.t("context.stats.outputTokens"), value: formatter().number(c?.output) },
+      { label: language.t("context.stats.reasoningTokens"), value: formatter().number(c?.reasoning) },
       {
         label: language.t("context.stats.cacheTokens"),
-        value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}`,
+        value: `${formatter().number(c?.cacheRead)} / ${formatter().number(c?.cacheWrite)}`,
       },
       { label: language.t("context.stats.userMessages"), value: count.user.toLocaleString(language.locale()) },
       {
@@ -271,55 +192,15 @@ export function SessionContextTab(props: SessionContextTabProps) {
         value: count.assistant.toLocaleString(language.locale()),
       },
       { label: language.t("context.stats.totalCost"), value: cost() },
-      { label: language.t("context.stats.sessionCreated"), value: time(props.info()?.time.created) },
-      { label: language.t("context.stats.lastActivity"), value: time(c?.message.time.created) },
+      { label: language.t("context.stats.sessionCreated"), value: formatter().time(props.info()?.time.created) },
+      { label: language.t("context.stats.lastActivity"), value: formatter().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" onRendered={() => requestAnimationFrame(restoreScroll)} />
-    )
-  }
-
-  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 getParts = (id: string) => (sync.data.part[id] ?? []) as Part[]
 
   const restoreScroll = () => {
     const el = scroll
@@ -389,7 +270,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
                     class="h-full"
                     style={{
                       width: `${segment.width}%`,
-                      "background-color": segment.color,
+                      "background-color": BREAKDOWN_COLOR[segment.key],
                     }}
                   />
                 )}
@@ -399,9 +280,9 @@ export function SessionContextTab(props: SessionContextTabProps) {
               <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 class="size-2 rounded-sm" style={{ "background-color": BREAKDOWN_COLOR[segment.key] }} />
+                    <div>{breakdownLabel(segment.key)}</div>
+                    <div class="text-text-weaker">{segment.percent.toLocaleString(language.locale())}%</div>
                   </div>
                 )}
               </For>
@@ -424,7 +305,11 @@ export function SessionContextTab(props: SessionContextTabProps) {
         <div class="flex flex-col gap-2">
           <div class="text-12-regular text-text-weak">{language.t("context.rawMessages.title")}</div>
           <Accordion multiple>
-            <For each={props.messages()}>{(message) => <RawMessage message={message} />}</For>
+            <For each={props.messages()}>
+              {(message) => (
+                <RawMessage message={message} getParts={getParts} onRendered={restoreScroll} time={formatter().time} />
+              )}
+            </For>
           </Accordion>
         </div>
       </div>

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

@@ -25,6 +25,164 @@ import { Keybind } from "@opencode-ai/ui/keybind"
 import { showToast } from "@opencode-ai/ui/toast"
 import { StatusPopover } from "../status-popover"
 
+const OPEN_APPS = [
+  "vscode",
+  "cursor",
+  "zed",
+  "textmate",
+  "antigravity",
+  "finder",
+  "terminal",
+  "iterm2",
+  "ghostty",
+  "xcode",
+  "android-studio",
+  "powershell",
+  "sublime-text",
+] as const
+
+type OpenApp = (typeof OPEN_APPS)[number]
+type OS = "macos" | "windows" | "linux" | "unknown"
+
+const MAC_APPS = [
+  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "Visual Studio Code" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "Cursor" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "Zed" },
+  { id: "textmate", label: "TextMate", icon: "textmate", openWith: "TextMate" },
+  { id: "antigravity", label: "Antigravity", icon: "antigravity", openWith: "Antigravity" },
+  { id: "terminal", label: "Terminal", icon: "terminal", openWith: "Terminal" },
+  { id: "iterm2", label: "iTerm2", icon: "iterm2", openWith: "iTerm" },
+  { id: "ghostty", label: "Ghostty", icon: "ghostty", openWith: "Ghostty" },
+  { id: "xcode", label: "Xcode", icon: "xcode", openWith: "Xcode" },
+  { id: "android-studio", label: "Android Studio", icon: "android-studio", openWith: "Android Studio" },
+  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+] as const
+
+const WINDOWS_APPS = [
+  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
+  { id: "powershell", label: "PowerShell", icon: "powershell", openWith: "powershell" },
+  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+] as const
+
+const LINUX_APPS = [
+  { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
+  { id: "sublime-text", label: "Sublime Text", icon: "sublime-text", openWith: "Sublime Text" },
+] as const
+
+type OpenOption = (typeof MAC_APPS)[number] | (typeof WINDOWS_APPS)[number] | (typeof LINUX_APPS)[number]
+type OpenIcon = OpenApp | "file-explorer"
+const OPEN_ICON_BASE = new Set<OpenIcon>(["finder", "vscode", "cursor", "zed"])
+
+const openIconSize = (id: OpenIcon) => (OPEN_ICON_BASE.has(id) ? "size-4" : "size-[19px]")
+
+const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
+  if (platform.platform === "desktop" && platform.os) return platform.os
+  if (typeof navigator !== "object") return "unknown"
+  const value = navigator.platform || navigator.userAgent
+  if (/Mac/i.test(value)) return "macos"
+  if (/Win/i.test(value)) return "windows"
+  if (/Linux/i.test(value)) return "linux"
+  return "unknown"
+}
+
+const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+function useSessionShare(args: {
+  globalSDK: ReturnType<typeof useGlobalSDK>
+  currentSession: () =>
+    | {
+        id: string
+        share?: {
+          url?: string
+        }
+      }
+    | undefined
+  projectDirectory: () => string
+  platform: ReturnType<typeof usePlatform>
+}) {
+  const [state, setState] = createStore({
+    share: false,
+    unshare: false,
+    copied: false,
+    timer: undefined as number | undefined,
+  })
+  const shareUrl = createMemo(() => args.currentSession()?.share?.url)
+
+  createEffect(() => {
+    const url = shareUrl()
+    if (url) return
+    if (state.timer) window.clearTimeout(state.timer)
+    setState({ copied: false, timer: undefined })
+  })
+
+  onCleanup(() => {
+    if (state.timer) window.clearTimeout(state.timer)
+  })
+
+  const shareSession = () => {
+    const session = args.currentSession()
+    if (!session || state.share) return
+    setState("share", true)
+    args.globalSDK.client.session
+      .share({ sessionID: session.id, directory: args.projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to share session", error)
+      })
+      .finally(() => {
+        setState("share", false)
+      })
+  }
+
+  const unshareSession = () => {
+    const session = args.currentSession()
+    if (!session || state.unshare) return
+    setState("unshare", true)
+    args.globalSDK.client.session
+      .unshare({ sessionID: session.id, directory: args.projectDirectory() })
+      .catch((error) => {
+        console.error("Failed to unshare session", error)
+      })
+      .finally(() => {
+        setState("unshare", false)
+      })
+  }
+
+  const copyLink = (onError: (error: unknown) => void) => {
+    const url = shareUrl()
+    if (!url) return
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        if (state.timer) window.clearTimeout(state.timer)
+        setState("copied", true)
+        const timer = window.setTimeout(() => {
+          setState("copied", false)
+          setState("timer", undefined)
+        }, 3000)
+        setState("timer", timer)
+      })
+      .catch(onError)
+  }
+
+  const viewShare = () => {
+    const url = shareUrl()
+    if (!url) return
+    args.platform.openLink(url)
+  }
+
+  return { state, shareUrl, shareSession, unshareSession, copyLink, viewShare }
+}
+
 export function SessionHeader() {
   const globalSDK = useGlobalSDK()
   const layout = useLayout()
@@ -53,75 +211,68 @@ export function SessionHeader() {
   const showShare = createMemo(() => shareEnabled() && !!currentSession())
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const view = createMemo(() => layout.view(sessionKey))
+  const os = createMemo(() => detectOS(platform))
 
-  const OPEN_APPS = [
-    "vscode",
-    "cursor",
-    "zed",
-    "textmate",
-    "antigravity",
-    "finder",
-    "terminal",
-    "iterm2",
-    "ghostty",
-    "xcode",
-    "android-studio",
-    "powershell",
-  ] as const
-  type OpenApp = (typeof OPEN_APPS)[number]
+  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({ finder: true })
 
-  const os = createMemo<"macos" | "windows" | "linux" | "unknown">(() => {
-    if (platform.platform === "desktop" && platform.os) return platform.os
-    if (typeof navigator !== "object") return "unknown"
-    const value = navigator.platform || navigator.userAgent
-    if (/Mac/i.test(value)) return "macos"
-    if (/Win/i.test(value)) return "windows"
-    if (/Linux/i.test(value)) return "linux"
-    return "unknown"
+  const apps = createMemo(() => {
+    if (os() === "macos") return MAC_APPS
+    if (os() === "windows") return WINDOWS_APPS
+    return LINUX_APPS
+  })
+
+  const fileManager = createMemo(() => {
+    if (os() === "macos") return { label: "Finder", icon: "finder" as const }
+    if (os() === "windows") return { label: "File Explorer", icon: "file-explorer" as const }
+    return { label: "File Manager", icon: "finder" as const }
+  })
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+    if (!platform.checkAppExists) return
+
+    const list = apps()
+
+    setExists(Object.fromEntries(list.map((app) => [app.id, undefined])) as Partial<Record<OpenApp, boolean>>)
+
+    void Promise.all(
+      list.map((app) =>
+        Promise.resolve(platform.checkAppExists?.(app.openWith))
+          .then((value) => Boolean(value))
+          .catch(() => false)
+          .then((ok) => {
+            console.debug(`[session-header] App "${app.label}" (${app.openWith}): ${ok ? "exists" : "does not exist"}`)
+            return [app.id, ok] as const
+          }),
+      ),
+    ).then((entries) => {
+      setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
+    })
   })
 
   const options = createMemo(() => {
-    if (os() === "macos") {
-      return [
-        { id: "vscode", label: "VS Code", icon: "vscode", openWith: "Visual Studio Code" },
-        { id: "cursor", label: "Cursor", icon: "cursor", openWith: "Cursor" },
-        { id: "zed", label: "Zed", icon: "zed", openWith: "Zed" },
-        { id: "textmate", label: "TextMate", icon: "textmate", openWith: "TextMate" },
-        { id: "antigravity", label: "Antigravity", icon: "antigravity", openWith: "Antigravity" },
-        { id: "finder", label: "Finder", icon: "finder" },
-        { id: "terminal", label: "Terminal", icon: "terminal", openWith: "Terminal" },
-        { id: "iterm2", label: "iTerm2", icon: "iterm2", openWith: "iTerm" },
-        { id: "ghostty", label: "Ghostty", icon: "ghostty", openWith: "Ghostty" },
-        { id: "xcode", label: "Xcode", icon: "xcode", openWith: "Xcode" },
-        { id: "android-studio", label: "Android Studio", icon: "android-studio", openWith: "Android Studio" },
-      ] as const
-    }
-
-    if (os() === "windows") {
-      return [
-        { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-        { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-        { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
-        { id: "finder", label: "File Explorer", icon: "finder" },
-        { id: "powershell", label: "PowerShell", icon: "powershell", openWith: "powershell" },
-      ] as const
-    }
-
     return [
-      { id: "vscode", label: "VS Code", icon: "vscode", openWith: "code" },
-      { id: "cursor", label: "Cursor", icon: "cursor", openWith: "cursor" },
-      { id: "zed", label: "Zed", icon: "zed", openWith: "zed" },
-      { id: "finder", label: "File Manager", icon: "finder" },
+      { id: "finder", label: fileManager().label, icon: fileManager().icon },
+      ...apps().filter((app) => exists[app.id]),
     ] as const
   })
 
+  const checksReady = createMemo(() => {
+    if (platform.platform !== "desktop") return true
+    if (!platform.checkAppExists) return true
+    const list = apps()
+    return list.every((app) => exists[app.id] !== undefined)
+  })
+
   const [prefs, setPrefs] = persisted(Persist.global("open.app"), createStore({ app: "finder" as OpenApp }))
+  const [menu, setMenu] = createStore({ open: false })
 
   const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
   const current = createMemo(() => options().find((o) => o.id === prefs.app) ?? options()[0])
 
   createEffect(() => {
     if (platform.platform !== "desktop") return
+    if (!checksReady()) return
     const value = prefs.app
     if (options().some((o) => o.id === value)) return
     setPrefs("app", options()[0]?.id ?? "finder")
@@ -134,13 +285,7 @@ export function SessionHeader() {
 
     const item = options().find((o) => o.id === app)
     const openWith = item && "openWith" in item ? item.openWith : undefined
-    Promise.resolve(platform.openPath?.(directory, openWith)).catch((err: unknown) => {
-      showToast({
-        variant: "error",
-        title: language.t("common.requestFailed"),
-        description: err instanceof Error ? err.message : String(err),
-      })
-    })
+    Promise.resolve(platform.openPath?.(directory, openWith)).catch((err: unknown) => showRequestError(language, err))
   }
 
   const copyPath = () => {
@@ -156,86 +301,15 @@ export function SessionHeader() {
           description: directory,
         })
       })
-      .catch((err: unknown) => {
-        showToast({
-          variant: "error",
-          title: language.t("common.requestFailed"),
-          description: err instanceof Error ? err.message : String(err),
-        })
-      })
+      .catch((err: unknown) => showRequestError(language, err))
   }
 
-  const [state, setState] = createStore({
-    share: false,
-    unshare: false,
-    copied: false,
-    timer: undefined as number | undefined,
+  const share = useSessionShare({
+    globalSDK,
+    currentSession,
+    projectDirectory,
+    platform,
   })
-  const shareUrl = createMemo(() => currentSession()?.share?.url)
-
-  createEffect(() => {
-    const url = shareUrl()
-    if (url) return
-    if (state.timer) window.clearTimeout(state.timer)
-    setState({ copied: false, timer: undefined })
-  })
-
-  onCleanup(() => {
-    if (state.timer) window.clearTimeout(state.timer)
-  })
-
-  function shareSession() {
-    const session = currentSession()
-    if (!session || state.share) return
-    setState("share", true)
-    globalSDK.client.session
-      .share({ sessionID: session.id, directory: projectDirectory() })
-      .catch((error) => {
-        console.error("Failed to share session", error)
-      })
-      .finally(() => {
-        setState("share", false)
-      })
-  }
-
-  function unshareSession() {
-    const session = currentSession()
-    if (!session || state.unshare) return
-    setState("unshare", true)
-    globalSDK.client.session
-      .unshare({ sessionID: session.id, directory: projectDirectory() })
-      .catch((error) => {
-        console.error("Failed to unshare session", error)
-      })
-      .finally(() => {
-        setState("unshare", false)
-      })
-  }
-
-  function copyLink() {
-    const url = shareUrl()
-    if (!url) return
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        if (state.timer) window.clearTimeout(state.timer)
-        setState("copied", true)
-        const timer = window.setTimeout(() => {
-          setState("copied", false)
-          setState("timer", undefined)
-        }, 3000)
-        setState("timer", timer)
-      })
-      .catch((error) => {
-        console.error("Failed to copy share link", error)
-      })
-  }
-
-  function viewShare() {
-    const url = shareUrl()
-    if (!url) return
-    platform.openLink(url)
-  }
 
   const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
@@ -247,7 +321,7 @@ export function SessionHeader() {
           <Portal mount={mount()}>
             <button
               type="button"
-              class="hidden md:flex w-[320px] max-w-full min-w-0 p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[320px] max-w-full min-w-0 h-[24px] px-2 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
               aria-label={language.t("session.header.searchFiles")}
             >
@@ -258,7 +332,11 @@ export function SessionHeader() {
                 </span>
               </div>
 
-              <Show when={hotkey()}>{(keybind) => <Keybind class="shrink-0">{keybind()}</Keybind>}</Show>
+              <Show when={hotkey()}>
+                {(keybind) => (
+                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0">{keybind()}</Keybind>
+                )}
+              </Show>
             </button>
           </Portal>
         )}
@@ -267,83 +345,112 @@ export function SessionHeader() {
         {(mount) => (
           <Portal mount={mount()}>
             <div class="flex items-center gap-3">
-              <Show when={projectDirectory()}>
-                <Show
-                  when={canOpen()}
-                  fallback={
-                    <Button
-                      variant="ghost"
-                      class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none"
-                      onClick={copyPath}
-                      aria-label={language.t("session.header.open.copyPath")}
-                    >
-                      <Icon name="copy" size="small" class="text-icon-base" />
-                      <span class="text-12-regular text-text-strong">{language.t("session.header.open.copyPath")}</span>
-                    </Button>
-                  }
-                >
-                  <div class="flex items-center">
-                    <Button
-                      variant="ghost"
-                      class="rounded-sm h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none rounded-r-none"
-                      onClick={() => openDir(current().id)}
-                      aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
-                    >
-                      <AppIcon id={current().icon} class="size-5" />
-                      <span class="text-12-regular text-text-strong">
-                        {language.t("session.header.open.action", { app: current().label })}
-                      </span>
-                    </Button>
-                    <DropdownMenu>
-                      <DropdownMenu.Trigger
-                        as={IconButton}
-                        icon="chevron-down"
-                        variant="ghost"
-                        class="rounded-sm h-[24px] w-auto px-1.5 border-none shadow-none rounded-l-none data-[expanded]:bg-surface-raised-base-active"
-                        aria-label={language.t("session.header.open.menu")}
-                      />
-                      <DropdownMenu.Portal>
-                        <DropdownMenu.Content placement="bottom-end" gutter={6}>
-                          <DropdownMenu.Group>
-                            <DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
-                            <DropdownMenu.RadioGroup
-                              value={prefs.app}
-                              onChange={(value) => {
-                                if (!OPEN_APPS.includes(value as OpenApp)) return
-                                setPrefs("app", value as OpenApp)
-                              }}
-                            >
-                              {options().map((o) => (
-                                <DropdownMenu.RadioItem value={o.id} onSelect={() => openDir(o.id)}>
-                                  <AppIcon id={o.icon} class="size-5" />
-                                  <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
-                                  <DropdownMenu.ItemIndicator>
-                                    <Icon name="check-small" size="small" class="text-icon-weak" />
-                                  </DropdownMenu.ItemIndicator>
-                                </DropdownMenu.RadioItem>
-                              ))}
-                            </DropdownMenu.RadioGroup>
-                          </DropdownMenu.Group>
-                          <DropdownMenu.Separator />
-                          <DropdownMenu.Item onSelect={copyPath}>
-                            <Icon name="copy" size="small" class="text-icon-weak" />
-                            <DropdownMenu.ItemLabel>
-                              {language.t("session.header.open.copyPath")}
-                            </DropdownMenu.ItemLabel>
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                      </DropdownMenu.Portal>
-                    </DropdownMenu>
-                  </div>
-                </Show>
-              </Show>
               <StatusPopover />
+              <Show when={projectDirectory()}>
+                <div class="hidden xl:flex items-center">
+                  <Show
+                    when={canOpen()}
+                    fallback={
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-base bg-surface-panel overflow-hidden">
+                        <Button
+                          variant="ghost"
+                          class="rounded-none h-full py-0 pr-3 pl-2 gap-2 border-none shadow-none"
+                          onClick={copyPath}
+                          aria-label={language.t("session.header.open.copyPath")}
+                        >
+                          <Icon name="copy" size="small" class="text-icon-base" />
+                          <span class="text-12-regular text-text-strong">
+                            {language.t("session.header.open.copyPath")}
+                          </span>
+                        </Button>
+                      </div>
+                    }
+                  >
+                    <div class="flex items-center">
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-base bg-surface-panel overflow-hidden">
+                        <Button
+                          variant="ghost"
+                          class="rounded-none h-full py-0 pr-3 pl-2 gap-1.5 border-none shadow-none"
+                          onClick={() => openDir(current().id)}
+                          aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                        >
+                          <div class="flex size-5 shrink-0 items-center justify-center">
+                            <AppIcon id={current().icon} class="size-4" />
+                          </div>
+                          <span class="text-12-regular text-text-strong">Open</span>
+                        </Button>
+                        <div class="self-stretch w-px bg-border-base/70" />
+                        <DropdownMenu
+                          gutter={6}
+                          placement="bottom-end"
+                          open={menu.open}
+                          onOpenChange={(open) => setMenu("open", open)}
+                        >
+                          <DropdownMenu.Trigger
+                            as={IconButton}
+                            icon="chevron-down"
+                            variant="ghost"
+                            class="rounded-none h-full w-[24px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active"
+                            aria-label={language.t("session.header.open.menu")}
+                          />
+                          <DropdownMenu.Portal>
+                            <DropdownMenu.Content>
+                              <DropdownMenu.Group>
+                                <DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
+                                <DropdownMenu.RadioGroup
+                                  value={prefs.app}
+                                  onChange={(value) => {
+                                    if (!OPEN_APPS.includes(value as OpenApp)) return
+                                    setPrefs("app", value as OpenApp)
+                                  }}
+                                >
+                                  {options().map((o) => (
+                                    <DropdownMenu.RadioItem
+                                      value={o.id}
+                                      onSelect={() => {
+                                        setMenu("open", false)
+                                        openDir(o.id)
+                                      }}
+                                    >
+                                      <div class="flex size-5 shrink-0 items-center justify-center">
+                                        <AppIcon id={o.icon} class={openIconSize(o.icon)} />
+                                      </div>
+                                      <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
+                                      <DropdownMenu.ItemIndicator>
+                                        <Icon name="check-small" size="small" class="text-icon-weak" />
+                                      </DropdownMenu.ItemIndicator>
+                                    </DropdownMenu.RadioItem>
+                                  ))}
+                                </DropdownMenu.RadioGroup>
+                              </DropdownMenu.Group>
+                              <DropdownMenu.Separator />
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  setMenu("open", false)
+                                  copyPath()
+                                }}
+                              >
+                                <div class="flex size-5 shrink-0 items-center justify-center">
+                                  <Icon name="copy" size="small" class="text-icon-weak" />
+                                </div>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("session.header.open.copyPath")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Portal>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+              </Show>
               <Show when={showShare()}>
                 <div class="flex items-center">
                   <Popover
                     title={language.t("session.share.popover.title")}
                     description={
-                      shareUrl()
+                      share.shareUrl()
                         ? language.t("session.share.popover.description.shared")
                         : language.t("session.share.popover.description.unshared")
                     }
@@ -353,26 +460,27 @@ export function SessionHeader() {
                     class="rounded-xl [&_[data-slot=popover-close-button]]:hidden"
                     triggerAs={Button}
                     triggerProps={{
-                      variant: "secondary",
-                      class: "rounded-sm h-[24px] px-3",
-                      classList: { "rounded-r-none": shareUrl() !== undefined },
+                      variant: "ghost",
+                      class:
+                        "rounded-md h-[24px] px-3 border border-border-base bg-surface-panel shadow-none data-[expanded]:bg-surface-raised-base-active",
+                      classList: { "rounded-r-none": share.shareUrl() !== undefined },
                       style: { scale: 1 },
                     }}
                     trigger={language.t("session.share.action.share")}
                   >
                     <div class="flex flex-col gap-2">
                       <Show
-                        when={shareUrl()}
+                        when={share.shareUrl()}
                         fallback={
                           <div class="flex">
                             <Button
                               size="large"
                               variant="primary"
                               class="w-1/2"
-                              onClick={shareSession}
-                              disabled={state.share}
+                              onClick={share.shareSession}
+                              disabled={share.state.share}
                             >
-                              {state.share
+                              {share.state.share
                                 ? language.t("session.share.action.publishing")
                                 : language.t("session.share.action.publish")}
                             </Button>
@@ -380,16 +488,23 @@ export function SessionHeader() {
                         }
                       >
                         <div class="flex flex-col gap-2">
-                          <TextField value={shareUrl() ?? ""} readOnly copyable tabIndex={-1} class="w-full" />
+                          <TextField
+                            value={share.shareUrl() ?? ""}
+                            readOnly
+                            copyable
+                            copyKind="link"
+                            tabIndex={-1}
+                            class="w-full"
+                          />
                           <div class="grid grid-cols-2 gap-2">
                             <Button
                               size="large"
                               variant="secondary"
                               class="w-full shadow-none border border-border-weak-base"
-                              onClick={unshareSession}
-                              disabled={state.unshare}
+                              onClick={share.unshareSession}
+                              disabled={share.state.unshare}
                             >
-                              {state.unshare
+                              {share.state.unshare
                                 ? language.t("session.share.action.unpublishing")
                                 : language.t("session.share.action.unpublish")}
                             </Button>
@@ -397,8 +512,8 @@ export function SessionHeader() {
                               size="large"
                               variant="primary"
                               class="w-full"
-                              onClick={viewShare}
-                              disabled={state.unshare}
+                              onClick={share.viewShare}
+                              disabled={share.state.unshare}
                             >
                               {language.t("session.share.action.view")}
                             </Button>
@@ -407,10 +522,10 @@ export function SessionHeader() {
                       </Show>
                     </div>
                   </Popover>
-                  <Show when={shareUrl()} fallback={<div aria-hidden="true" />}>
+                  <Show when={share.shareUrl()} fallback={<div aria-hidden="true" />}>
                     <Tooltip
                       value={
-                        state.copied
+                        share.state.copied
                           ? language.t("session.share.copy.copied")
                           : language.t("session.share.copy.copyLink")
                       }
@@ -418,13 +533,13 @@ export function SessionHeader() {
                       gutter={8}
                     >
                       <IconButton
-                        icon={state.copied ? "check" : "link"}
-                        variant="secondary"
-                        class="rounded-l-none"
-                        onClick={copyLink}
-                        disabled={state.unshare}
+                        icon={share.state.copied ? "check" : "link"}
+                        variant="ghost"
+                        class="rounded-l-none h-[24px] border border-border-base bg-surface-panel shadow-none"
+                        onClick={() => share.copyLink((error) => showRequestError(language, error))}
+                        disabled={share.state.unshare}
                         aria-label={
-                          state.copied
+                          share.state.copied
                             ? language.t("session.share.copy.copied")
                             : language.t("session.share.copy.copyLink")
                         }
@@ -504,11 +619,7 @@ export function SessionHeader() {
                   <Button
                     variant="ghost"
                     class="group/file-tree-toggle size-6 p-0"
-                    onClick={() => {
-                      const opening = !layout.fileTree.opened()
-                      if (opening && !view().reviewPanel.opened()) view().reviewPanel.open()
-                      layout.fileTree.toggle()
-                    }}
+                    onClick={() => layout.fileTree.toggle()}
                     aria-label={language.t("command.fileTree.toggle")}
                     aria-expanded={layout.fileTree.opened()}
                     aria-controls="file-tree-panel"

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

@@ -1,12 +1,15 @@
 import { Show, createMemo } from "solid-js"
 import { DateTime } from "luxon"
 import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
 import { useLanguage } from "@/context/language"
 import { Icon } from "@opencode-ai/ui/icon"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 
 const MAIN_WORKTREE = "main"
 const CREATE_WORKTREE = "create"
+const ROOT_CLASS =
+  "size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto 2xl:max-w-[1000px] px-6 pb-[calc(var(--prompt-height,11.25rem)+64px)]"
 
 interface NewSessionViewProps {
   worktree: string
@@ -15,6 +18,7 @@ interface NewSessionViewProps {
 
 export function NewSessionView(props: NewSessionViewProps) {
   const sync = useSync()
+  const sdk = useSDK()
   const language = useLanguage()
 
   const sandboxes = createMemo(() => sync.project?.sandboxes ?? [])
@@ -24,11 +28,11 @@ export function NewSessionView(props: NewSessionViewProps) {
     if (options().includes(selection)) return selection
     return MAIN_WORKTREE
   })
-  const projectRoot = createMemo(() => sync.project?.worktree ?? sync.data.path.directory)
+  const projectRoot = createMemo(() => sync.project?.worktree ?? sdk.directory)
   const isWorktree = createMemo(() => {
     const project = sync.project
     if (!project) return false
-    return sync.data.path.directory !== project.worktree
+    return sdk.directory !== project.worktree
   })
 
   const label = (value: string) => {
@@ -45,7 +49,7 @@ export function NewSessionView(props: NewSessionViewProps) {
   }
 
   return (
-    <div class="size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto px-6 pb-[calc(var(--prompt-height,11.25rem)+64px)]">
+    <div class={ROOT_CLASS}>
       <div class="text-20-medium text-text-weaker">{language.t("command.session.new")}</div>
       <div class="flex justify-center items-center gap-3">
         <Icon name="folder" size="small" />