chore: update nix node_modules hashes

Co-authored-by: Kit Langton <kit.langton@gmail.com>

.dockerignore

@@ -0,0 +1,12 @@
+.git
+.opencode
+.sst
+.turbo
+.wrangler
+node_modules
+**/node_modules
+**/.output
+**/dist
+**/.turbo
+**/.vite
+**/coverage

.github/TEAM_MEMBERS

@@ -14,3 +14,4 @@ rekram1-node
 thdxr
 simonklee
 vimtor
+starptech

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

@@ -33,8 +33,9 @@ runs:
       shell: bash
       run: echo "dir=$(bun pm cache)" >> "$GITHUB_OUTPUT"
 
-    - name: Cache Bun dependencies
-      uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+    - name: Restore Bun dependencies
+      id: bun-cache
+      uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
       with:
         path: ${{ steps.cache.outputs.dir }}
         key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
@@ -56,3 +57,10 @@ runs:
           bun install ${{ inputs.install-flags }}
         fi
       shell: bash
+
+    - name: Save Bun dependencies
+      if: steps.bun-cache.outputs.cache-hit != 'true' && github.event_name != 'pull_request' && github.event_name != 'pull_request_target'
+      uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      with:
+        path: ${{ steps.cache.outputs.dir }}
+        key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}

.github/workflows/close-prs.yml

@@ -0,0 +1,50 @@
+name: close-prs
+
+on:
+  schedule:
+    - cron: "0 22 * * *" # Daily at 10:00 PM UTC
+  workflow_dispatch:
+    inputs:
+      dry-run:
+        description: "Log matching PRs without closing them"
+        type: boolean
+        default: true
+      max-close:
+        description: "Maximum matching PRs to close"
+        type: string
+        required: false
+        default: "50"
+
+jobs:
+  close:
+    runs-on: ubuntu-latest
+    timeout-minutes: 240
+    permissions:
+      contents: read
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: Close old PRs without enough positive reactions
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          max_close="${{ inputs['max-close'] }}"
+          if [ -z "$max_close" ]; then
+            max_close="50"
+          fi
+
+          args=("--threshold" "2" "--age-months" "1" "--sleep-ms" "20000" "--max-close" "$max_close")
+
+          if [ "${{ github.event_name }}" = "schedule" ]; then
+            args+=("--execute")
+          elif [ "${{ inputs['dry-run'] }}" = "false" ]; then
+            args+=("--execute")
+          fi
+
+          bun script/github/close-prs.ts "${args[@]}"

.github/workflows/close-stale-prs.yml

@@ -1,235 +0,0 @@
-name: close-stale-prs
-
-on:
-  workflow_dispatch:
-    inputs:
-      dryRun:
-        description: "Log actions without closing PRs"
-        type: boolean
-        default: false
-  schedule:
-    - cron: "0 6 * * *"
-
-permissions:
-  contents: read
-  issues: write
-  pull-requests: write
-
-jobs:
-  close-stale-prs:
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - name: Close inactive PRs
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const DAYS_INACTIVE = 60
-            const MAX_RETRIES = 3
-
-            // Adaptive delay: fast for small batches, slower for large to respect
-            // GitHub's 80 content-generating requests/minute limit
-            const SMALL_BATCH_THRESHOLD = 10
-            const SMALL_BATCH_DELAY_MS = 1000  // 1s for daily operations (≤10 PRs)
-            const LARGE_BATCH_DELAY_MS = 2000  // 2s for backlog (>10 PRs) = ~30 ops/min, well under 80 limit
-
-            const startTime = Date.now()
-            const cutoff = new Date(Date.now() - DAYS_INACTIVE * 24 * 60 * 60 * 1000)
-            const { owner, repo } = context.repo
-            const dryRun = context.payload.inputs?.dryRun === "true"
-
-            core.info(`Dry run mode: ${dryRun}`)
-            core.info(`Cutoff date: ${cutoff.toISOString()}`)
-
-            function sleep(ms) {
-              return new Promise(resolve => setTimeout(resolve, ms))
-            }
-
-            async function withRetry(fn, description = 'API call') {
-              let lastError
-              for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
-                try {
-                  const result = await fn()
-                  return result
-                } catch (error) {
-                  lastError = error
-                  const isRateLimited = error.status === 403 &&
-                    (error.message?.includes('rate limit') || error.message?.includes('secondary'))
-
-                  if (!isRateLimited) {
-                    throw error
-                  }
-
-                  // Parse retry-after header, default to 60 seconds
-                  const retryAfter = error.response?.headers?.['retry-after']
-                    ? parseInt(error.response.headers['retry-after'])
-                    : 60
-
-                  // Exponential backoff: retryAfter * 2^attempt
-                  const backoffMs = retryAfter * 1000 * Math.pow(2, attempt)
-
-                  core.warning(`${description}: Rate limited (attempt ${attempt + 1}/${MAX_RETRIES}). Waiting ${backoffMs / 1000}s before retry...`)
-
-                  await sleep(backoffMs)
-                }
-              }
-              core.error(`${description}: Max retries (${MAX_RETRIES}) exceeded`)
-              throw lastError
-            }
-
-            const query = `
-              query($owner: String!, $repo: String!, $cursor: String) {
-                repository(owner: $owner, name: $repo) {
-                  pullRequests(first: 100, states: OPEN, after: $cursor) {
-                    pageInfo {
-                      hasNextPage
-                      endCursor
-                    }
-                    nodes {
-                      number
-                      title
-                      author {
-                        login
-                      }
-                      createdAt
-                      commits(last: 1) {
-                        nodes {
-                          commit {
-                            committedDate
-                          }
-                        }
-                      }
-                      comments(last: 1) {
-                        nodes {
-                          createdAt
-                        }
-                      }
-                      reviews(last: 1) {
-                        nodes {
-                          createdAt
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            `
-
-            const allPrs = []
-            let cursor = null
-            let hasNextPage = true
-            let pageCount = 0
-
-            while (hasNextPage) {
-              pageCount++
-              core.info(`Fetching page ${pageCount} of open PRs...`)
-
-              const result = await withRetry(
-                () => github.graphql(query, { owner, repo, cursor }),
-                `GraphQL page ${pageCount}`
-              )
-
-              allPrs.push(...result.repository.pullRequests.nodes)
-              hasNextPage = result.repository.pullRequests.pageInfo.hasNextPage
-              cursor = result.repository.pullRequests.pageInfo.endCursor
-
-              core.info(`Page ${pageCount}: fetched ${result.repository.pullRequests.nodes.length} PRs (total: ${allPrs.length})`)
-
-              // Delay between pagination requests (use small batch delay for reads)
-              if (hasNextPage) {
-                await sleep(SMALL_BATCH_DELAY_MS)
-              }
-            }
-
-            core.info(`Found ${allPrs.length} open pull requests`)
-
-            const stalePrs = allPrs.filter((pr) => {
-              const dates = [
-                new Date(pr.createdAt),
-                pr.commits.nodes[0] ? new Date(pr.commits.nodes[0].commit.committedDate) : null,
-                pr.comments.nodes[0] ? new Date(pr.comments.nodes[0].createdAt) : null,
-                pr.reviews.nodes[0] ? new Date(pr.reviews.nodes[0].createdAt) : null,
-              ].filter((d) => d !== null)
-
-              const lastActivity = dates.sort((a, b) => b.getTime() - a.getTime())[0]
-
-              if (!lastActivity || lastActivity > cutoff) {
-                core.info(`PR #${pr.number} is fresh (last activity: ${lastActivity?.toISOString() || "unknown"})`)
-                return false
-              }
-
-              core.info(`PR #${pr.number} is STALE (last activity: ${lastActivity.toISOString()})`)
-              return true
-            })
-
-            if (!stalePrs.length) {
-              core.info("No stale pull requests found.")
-              return
-            }
-
-            core.info(`Found ${stalePrs.length} stale pull requests`)
-
-            // ============================================
-            // Close stale PRs
-            // ============================================
-            const requestDelayMs = stalePrs.length > SMALL_BATCH_THRESHOLD
-              ? LARGE_BATCH_DELAY_MS
-              : SMALL_BATCH_DELAY_MS
-
-            core.info(`Using ${requestDelayMs}ms delay between operations (${stalePrs.length > SMALL_BATCH_THRESHOLD ? 'large' : 'small'} batch mode)`)
-
-            let closedCount = 0
-            let skippedCount = 0
-
-            for (const pr of stalePrs) {
-              const issue_number = pr.number
-              const closeComment = `Closing this pull request because it has had no updates for more than ${DAYS_INACTIVE} days. If you plan to continue working on it, feel free to reopen or open a new PR.`
-
-              if (dryRun) {
-                core.info(`[dry-run] Would close PR #${issue_number} from ${pr.author?.login || 'unknown'}: ${pr.title}`)
-                continue
-              }
-
-              try {
-                // Add comment
-                await withRetry(
-                  () => github.rest.issues.createComment({
-                    owner,
-                    repo,
-                    issue_number,
-                    body: closeComment,
-                  }),
-                  `Comment on PR #${issue_number}`
-                )
-
-                // Close PR
-                await withRetry(
-                  () => github.rest.pulls.update({
-                    owner,
-                    repo,
-                    pull_number: issue_number,
-                    state: "closed",
-                  }),
-                  `Close PR #${issue_number}`
-                )
-
-                closedCount++
-                core.info(`Closed PR #${issue_number} from ${pr.author?.login || 'unknown'}: ${pr.title}`)
-
-                // Delay before processing next PR
-                await sleep(requestDelayMs)
-              } catch (error) {
-                skippedCount++
-                core.error(`Failed to close PR #${issue_number}: ${error.message}`)
-              }
-            }
-
-            const elapsed = Math.round((Date.now() - startTime) / 1000)
-            core.info(`\n========== Summary ==========`)
-            core.info(`Total open PRs found: ${allPrs.length}`)
-            core.info(`Stale PRs identified: ${stalePrs.length}`)
-            core.info(`PRs closed: ${closedCount}`)
-            core.info(`PRs skipped (errors): ${skippedCount}`)
-            core.info(`Elapsed time: ${elapsed}s`)
-            core.info(`=============================`)

.github/workflows/deploy.yml

@@ -9,9 +9,15 @@ on:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
+permissions:
+  contents: read
+  id-token: write
+
 jobs:
   deploy:
+    if: github.repository == 'anomalyco/opencode' && (github.ref_name == 'dev' || github.ref_name == 'production')
     runs-on: ubuntu-latest
+    environment: ${{ github.ref_name }}
     steps:
       - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
@@ -21,14 +27,11 @@ jobs:
         with:
           node-version: "24"
 
-      # Workaround for Pulumi version conflict:
-      # GitHub runners have Pulumi 3.212.0+ pre-installed, which removed the -root flag
-      # from pulumi-language-nodejs (see https://github.com/pulumi/pulumi/pull/21065).
-      # SST 3.17.x uses Pulumi SDK 3.210.0 which still passes -root, causing a conflict.
-      # Removing the system language plugin forces SST to use its bundled compatible version.
-      # TODO: Remove when sst supports Pulumi >3.210.0
-      - name: Fix Pulumi version conflict
-        run: sudo rm -f /usr/local/bin/pulumi-language-nodejs
+      - uses: aws-actions/configure-aws-credentials@7474bc4690e29a8392af63c5b98e7449536d5c3a # v4.3.1
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          role-session-name: opencode-${{ github.run_id }}
+          aws-region: us-east-1
 
       - run: bun sst deploy --stage=${{ github.ref_name }}
         env:

.github/workflows/publish.yml

@@ -7,6 +7,7 @@ on:
       - ci
       - dev
       - beta
+      - fix/npm-native-binary-install
       - snapshot-*
   workflow_dispatch:
     inputs:
@@ -244,9 +245,9 @@ jobs:
           - host: "blacksmith-4vcpu-ubuntu-2404"
             target: x86_64-unknown-linux-gnu
             platform_flag: --linux
-          - host: "blacksmith-4vcpu-ubuntu-2404"
+          - host: "blacksmith-4vcpu-ubuntu-2404-arm"
             target: aarch64-unknown-linux-gnu
-            platform_flag: --linux
+            platform_flag: --linux --arm64
     runs-on: ${{ matrix.settings.host }}
     steps:
       - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0

.opencode/tool/github-triage.ts

@@ -4,8 +4,8 @@ import { tool } from "@opencode-ai/plugin"
 const TEAM = {
   tui: ["kommander", "simonklee"],
   desktop_web: ["Hona", "Brendonovich"],
-  core: ["jlongster", "rekram1-node", "nexxeln", "kitlangton"],
-  inference: ["fwang", "MrMushrooooom"],
+  core: ["jlongster", "rekram1-node", "nexxeln", "kitlangton", "starptech"],
+  inference: ["fwang", "MrMushrooooom", "starptech"],
   windows: ["Hona"],
 } as const
 

AGENTS.md

@@ -1,8 +1,14 @@
 - 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.
+
+## Commits and PR Titles
+
+Use conventional commit-style messages and PR titles: `type(scope): summary`.
+
+Valid types are `feat`, `fix`, `docs`, `chore`, `refactor`, and `test`. Scopes are optional; use the affected package or area when helpful, e.g. `core`, `opencode`, `tui`, `app`, `desktop`, `sdk`, or `plugin`.
+
+Examples: `fix(tui): simplify thinking toggle styling`, `docs: update contributing guide`, `chore(sdk): regenerate types`.
 
 ## Style Guide
 
@@ -73,6 +79,29 @@ function foo() {
 }
 ```
 
+### Complex Logic
+
+When a function has several validation branches or supporting details, make the main function read as the happy path and move supporting details into small helpers below it.
+
+```ts
+// Good
+export function loadThing(input: unknown) {
+  const config = requireConfig(input)
+  const metadata = readMetadata(input)
+  return createThing({ config, metadata })
+}
+
+function requireConfig(input: unknown) {
+  ...
+}
+```
+
+- Keep helpers close to the code they support, below the main export when that improves readability.
+- Do not over-abstract simple expressions into many single-use helpers; extract only when it names a real concept like `requireConfig` or `readMetadata`.
+- Do not return `Effect` from helpers unless they actually perform effectful work. Synchronous parsing, validation, and option building should stay synchronous.
+- Prefer Effect schema helpers such as `Schema.UnknownFromJsonString` and `Schema.decodeUnknownOption` over manual `JSON.parse` wrapped in `Effect.try` when parsing untrusted JSON strings.
+- Add comments for non-obvious constraints and surprising behavior, not for obvious assignments or control flow.
+
 ### Schema Definitions (Drizzle)
 
 Use snake_case for field names so column names don't need to be redefined as strings.

README.ar.md

@@ -124,18 +124,6 @@ XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 
 اذا كنت تعمل على مشروع مرتبط بـ OpenCode ويستخدم "opencode" كجزء من اسمه (مثل "opencode-dashboard" او "opencode-mobile")، يرجى اضافة ملاحظة في README توضح انه ليس مبنيا بواسطة فريق OpenCode ولا يرتبط بنا بأي شكل.
 
-### FAQ
-
-#### ما الفرق عن Claude Code؟
-
-هو مشابه جدا لـ Claude Code من حيث القدرات. هذه هي الفروقات الاساسية:
-
-- 100% مفتوح المصدر
-- غير مقترن بمزود معين. نوصي بالنماذج التي نوفرها عبر [OpenCode Zen](https://opencode.ai/zen)؛ لكن يمكن استخدام OpenCode مع Claude او OpenAI او Google او حتى نماذج محلية. مع تطور النماذج ستتقلص الفجوات وستنخفض الاسعار، لذا من المهم ان يكون مستقلا عن المزود.
-- دعم LSP جاهز للاستخدام
-- تركيز على TUI. تم بناء OpenCode بواسطة مستخدمي neovim ومنشئي [terminal.shop](https://terminal.shop)؛ وسندفع حدود ما هو ممكن داخل الطرفية.
-- معمارية عميل/خادم. على سبيل المثال، يمكن تشغيل OpenCode على جهازك بينما تقوده عن بعد من تطبيق جوال. هذا يعني ان واجهة TUI هي واحدة فقط من العملاء الممكنين.
-
 ---
 
 **انضم الى مجتمعنا** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.bn.md

@@ -124,18 +124,6 @@ OpenCode এ দুটি বিল্ট-ইন এজেন্ট রয়ে
 
 আপনি যদি এমন প্রজেক্টে কাজ করেন যা OpenCode এর সাথে সম্পর্কিত এবং প্রজেক্টের নামের অংশ হিসেবে "opencode" ব্যবহার করেন, উদাহরণস্বরূপ "opencode-dashboard" বা "opencode-mobile", তবে দয়া করে আপনার README তে একটি নোট যোগ করে স্পষ্ট করুন যে এই প্রজেক্টটি OpenCode দল দ্বারা তৈরি হয়নি এবং আমাদের সাথে এর কোনো সরাসরি সম্পর্ক নেই।
 
-### সচরাচর জিজ্ঞাসিত প্রশ্নাবলী (FAQ)
-
-#### এটি ক্লড কোড (Claude Code) থেকে কীভাবে আলাদা?
-
-ক্যাপাবিলিটির দিক থেকে এটি ক্লড কোডের (Claude Code) মতই। এখানে মূল পার্থক্যগুলো দেওয়া হলো:
-
-- ১০০% ওপেন সোর্স
-- কোনো প্রোভাইডারের সাথে আবদ্ধ নয়। যদিও আমরা [OpenCode Zen](https://opencode.ai/zen) এর মাধ্যমে মডেলসমূহ ব্যবহারের পরামর্শ দিই, OpenCode ক্লড (Claude), ওপেনএআই (OpenAI), গুগল (Google), অথবা লোকাল মডেলগুলোর সাথেও ব্যবহার করা যেতে পারে। যেমন যেমন মডেলগুলো উন্নত হবে, তাদের মধ্যকার পার্থক্য কমে আসবে এবং দামও কমবে, তাই প্রোভাইডার-অজ্ঞাস্টিক হওয়া খুবই গুরুত্বপূর্ণ।
-- আউট-অফ-দ্য-বক্স LSP সাপোর্ট
-- TUI এর উপর ফোকাস। OpenCode নিওভিম (neovim) ব্যবহারকারী এবং [terminal.shop](https://terminal.shop) এর নির্মাতাদের দ্বারা তৈরি; আমরা টার্মিনালে কী কী সম্ভব তার সীমাবদ্ধতা ছাড়িয়ে যাওয়ার চেষ্টা করছি।
-- ক্লায়েন্ট/সার্ভার আর্কিটেকচার। এটি যেমন OpenCode কে আপনার কম্পিউটারে চালানোর সুযোগ দেয়, তেমনি আপনি মোবাইল অ্যাপ থেকে রিমোটলি এটি নিয়ন্ত্রণ করতে পারবেন, অর্থাৎ TUI ফ্রন্টএন্ড কেবল সম্ভাব্য ক্লায়েন্টগুলোর মধ্যে একটি।
-
 ---
 
 **আমাদের কমিউনিটিতে যুক্ত হোন** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.br.md

@@ -124,18 +124,6 @@ Se você tem interesse em contribuir com o OpenCode, leia os [contributing docs]
 
 Se você estiver trabalhando em um projeto relacionado ao OpenCode e estiver usando "opencode" como parte do nome (por exemplo, "opencode-dashboard" ou "opencode-mobile"), adicione uma nota no README para deixar claro que não foi construído pela equipe do OpenCode e não é afiliado a nós de nenhuma forma.
 
-### FAQ
-
-#### Como isso é diferente do Claude Code?
-
-É muito parecido com o Claude Code em termos de capacidade. Aqui estão as principais diferenças:
-
-- 100% open source
-- Não está acoplado a nenhum provedor. Embora recomendemos os modelos que oferecemos pelo [OpenCode Zen](https://opencode.ai/zen); o OpenCode pode ser usado com Claude, OpenAI, Google ou até modelos locais. À medida que os modelos evoluem, as diferenças diminuem e os preços caem, então ser provider-agnostic é importante.
-- Suporte a LSP pronto para uso
-- Foco em TUI. O OpenCode é construído por usuários de neovim e pelos criadores do [terminal.shop](https://terminal.shop); vamos levar ao limite o que é possível no terminal.
-- Arquitetura cliente/servidor. Isso, por exemplo, permite executar o OpenCode no seu computador enquanto você o controla remotamente por um aplicativo mobile. Isso significa que o frontend TUI é apenas um dos possíveis clientes.
-
 ---
 
 **Junte-se à nossa comunidade** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.bs.md

@@ -124,18 +124,6 @@ Ako želiš doprinositi OpenCode-u, pročitaj [upute za doprinošenje](./CONTRIB
 
 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.da.md

@@ -124,18 +124,6 @@ Hvis du vil bidrage til OpenCode, så læs vores [contributing docs](./CONTRIBUT
 
 Hvis du arbejder på et projekt der er relateret til OpenCode og bruger "opencode" som en del af navnet; f.eks. "opencode-dashboard" eller "opencode-mobile", så tilføj en note i din README, der tydeliggør at projektet ikke er bygget af OpenCode-teamet og ikke er tilknyttet os på nogen måde.
 
-### FAQ
-
-#### Hvordan adskiller dette sig fra Claude Code?
-
-Det minder meget om Claude Code i forhold til funktionalitet. Her er de vigtigste forskelle:
-
-- 100% open source
-- Ikke låst til en udbyder. Selvom vi anbefaler modellerne via [OpenCode Zen](https://opencode.ai/zen); kan OpenCode bruges med Claude, OpenAI, Google eller endda lokale modeller. Efterhånden som modeller udvikler sig vil forskellene mindskes og priserne falde, så det er vigtigt at være provider-agnostic.
-- LSP-support out of the box
-- Fokus på TUI. OpenCode er bygget af neovim-brugere og skaberne af [terminal.shop](https://terminal.shop); vi vil skubbe grænserne for hvad der er muligt i terminalen.
-- Klient/server-arkitektur. Det kan f.eks. lade OpenCode køre på din computer, mens du styrer den eksternt fra en mobilapp. Det betyder at TUI-frontend'en kun er en af de mulige clients.
-
 ---
 
 **Bliv en del af vores community** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.de.md

@@ -124,18 +124,6 @@ Wenn du zu OpenCode beitragen möchtest, lies bitte unsere [Contributing Docs](.
 
 Wenn du an einem Projekt arbeitest, das mit OpenCode zusammenhängt und "opencode" als Teil seines Namens verwendet (z.B. "opencode-dashboard" oder "opencode-mobile"), füge bitte einen Hinweis in deine README ein, dass es nicht vom OpenCode-Team gebaut wird und nicht in irgendeiner Weise mit uns verbunden ist.
 
-### FAQ
-
-#### Worin unterscheidet sich das von Claude Code?
-
-In Bezug auf die Fähigkeiten ist es Claude Code sehr ähnlich. Hier sind die wichtigsten Unterschiede:
-
-- 100% open source
-- Nicht an einen Anbieter gekoppelt. Wir empfehlen die Modelle aus [OpenCode Zen](https://opencode.ai/zen); OpenCode kann aber auch mit Claude, OpenAI, Google oder sogar lokalen Modellen genutzt werden. Mit der Weiterentwicklung der Modelle werden die Unterschiede kleiner und die Preise sinken, deshalb ist Provider-Unabhängigkeit wichtig.
-- LSP-Unterstützung direkt nach dem Start
-- Fokus auf TUI. OpenCode wird von Neovim-Nutzern und den Machern von [terminal.shop](https://terminal.shop) gebaut; wir treiben die Grenzen dessen, was im Terminal möglich ist.
-- Client/Server-Architektur. Das ermöglicht z.B., OpenCode auf deinem Computer laufen zu lassen, während du es von einer mobilen App aus fernsteuerst. Das TUI-Frontend ist nur einer der möglichen Clients.
-
 ---
 
 **Tritt unserer Community bei** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.es.md

@@ -97,20 +97,20 @@ OPENCODE_INSTALL_DIR=/usr/local/bin curl -fsSL https://opencode.ai/install | bas
 XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 ```
 
-### Agents
+### Agentes
 
-OpenCode incluye dos agents integrados que puedes alternar con la tecla `Tab`.
+OpenCode incluye dos agentes integrados que puedes alternar con la tecla `Tab`.
 
-- **build** - Por defecto, agent con acceso completo para trabajo de desarrollo
-- **plan** - Agent de solo lectura para análisis y exploración de código
-  - Niega ediciones de archivos por defecto
+- **build** - Por defecto, agente con acceso completo para tareas de desarrollo
+- **plan** - Agente de solo lectura para análisis y exploración de código
+  - Deniega ediciones de archivos por defecto
   - Pide permiso antes de ejecutar comandos bash
   - Ideal para explorar codebases desconocidas o planificar cambios
 
-Además, incluye un subagent **general** para búsquedas complejas y tareas de varios pasos.
+Además, incluye un subagente **general** para búsquedas complejas y tareas de varios pasos.
 Se usa internamente y se puede invocar con `@general` en los mensajes.
 
-Más información sobre [agents](https://opencode.ai/docs/agents).
+Más información sobre [agentes](https://opencode.ai/docs/agents).
 
 ### Documentación
 
@@ -120,21 +120,9 @@ Para más información sobre cómo configurar OpenCode, [**ve a nuestra document
 
 Si te interesa contribuir a OpenCode, lee nuestras [docs de contribución](./CONTRIBUTING.md) antes de enviar un pull request.
 
-### Construyendo sobre OpenCode
+### Proyectos basados en OpenCode
 
-Si estás trabajando en un proyecto relacionado con OpenCode y usas "opencode" como parte del nombre; por ejemplo, "opencode-dashboard" u "opencode-mobile", agrega una nota en tu README para aclarar que no está construido por el equipo de OpenCode y que no está afiliado con nosotros de ninguna manera.
-
-### FAQ
-
-#### ¿En qué se diferencia de Claude Code?
-
-Es muy similar a Claude Code en cuanto a capacidades. Estas son las diferencias clave:
-
-- 100% open source
-- No está acoplado a ningún proveedor. Aunque recomendamos los modelos que ofrecemos a través de [OpenCode Zen](https://opencode.ai/zen); OpenCode se puede usar con Claude, OpenAI, Google o incluso modelos locales. A medida que evolucionan los modelos, las brechas se cerrarán y los precios bajarán, por lo que ser agnóstico al proveedor es importante.
-- Soporte LSP listo para usar
-- Un enfoque en la TUI. OpenCode está construido por usuarios de neovim y los creadores de [terminal.shop](https://terminal.shop); vamos a empujar los límites de lo que es posible en la terminal.
-- Arquitectura cliente/servidor. Esto, por ejemplo, permite ejecutar OpenCode en tu computadora mientras lo controlas de forma remota desde una app móvil. Esto significa que el frontend TUI es solo uno de los posibles clientes.
+Si estás trabajando en un proyecto basado en OpenCode y usas "opencode" como parte del nombre, por ejemplo, "opencode-dashboard" u "opencode-mobile", agrega una nota en tu README para aclarar que no está hecho por el equipo de OpenCode y que no está afiliado con nosotros de ninguna manera.
 
 ---
 

README.fr.md

@@ -124,18 +124,6 @@ Si vous souhaitez contribuer à OpenCode, lisez nos [docs de contribution](./CON
 
 Si vous travaillez sur un projet lié à OpenCode et que vous utilisez "opencode" dans le nom du projet (par exemple, "opencode-dashboard" ou "opencode-mobile"), ajoutez une note dans votre README pour préciser qu'il n'est pas construit par l'équipe OpenCode et qu'il n'est pas affilié à nous.
 
-### FAQ
-
-#### En quoi est-ce différent de Claude Code ?
-
-C'est très similaire à Claude Code en termes de capacités. Voici les principales différences :
-
-- 100% open source
-- Pas couplé à un fournisseur. Nous recommandons les modèles proposés via [OpenCode Zen](https://opencode.ai/zen) ; OpenCode peut être utilisé avec Claude, OpenAI, Google ou même des modèles locaux. Au fur et à mesure que les modèles évoluent, les écarts se réduiront et les prix baisseront, donc être agnostique au fournisseur est important.
-- Support LSP prêt à l'emploi
-- Un focus sur la TUI. OpenCode est construit par des utilisateurs de neovim et les créateurs de [terminal.shop](https://terminal.shop) ; nous allons repousser les limites de ce qui est possible dans le terminal.
-- Architecture client/serveur. Cela permet par exemple de faire tourner OpenCode sur votre ordinateur tout en le pilotant à distance depuis une application mobile. Cela signifie que la TUI n'est qu'un des clients possibles.
-
 ---
 
 **Rejoignez notre communauté** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.gr.md

@@ -124,18 +124,6 @@ XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 
 Εάν εργάζεσαι σε ένα έργο σχετικό με το OpenCode και χρησιμοποιείτε το "opencode" ως μέρος του ονόματός του, για παράδειγμα "opencode-dashboard" ή "opencode-mobile", πρόσθεσε μια σημείωση στο README σας για να διευκρινίσεις ότι δεν είναι κατασκευασμένο από την ομάδα του OpenCode και δεν έχει καμία σχέση με εμάς.
 
-### Συχνές Ερωτήσεις
-
-#### Πώς διαφέρει αυτό από το Claude Code;
-
-Είναι πολύ παρόμοιο με το Claude Code ως προς τις δυνατότητες. Ακολουθούν οι βασικές διαφορές:
-
-- 100% ανοιχτού κώδικα
-- Δεν είναι συνδεδεμένο με κανέναν πάροχο. Αν και συνιστούμε τα μοντέλα που παρέχουμε μέσω του [OpenCode Zen](https://opencode.ai/zen), το OpenCode μπορεί να χρησιμοποιηθεί με Claude, OpenAI, Google, ή ακόμα και τοπικά μοντέλα. Καθώς τα μοντέλα εξελίσσονται, τα κενά μεταξύ τους θα κλείσουν και οι τιμές θα μειωθούν, οπότε είναι σημαντικό να είσαι ανεξάρτητος από τον πάροχο.
-- Out-of-the-box υποστήριξη LSP
-- Εστίαση στο TUI. Το OpenCode είναι κατασκευασμένο από χρήστες που χρησιμοποιούν neovim και τους δημιουργούς του [terminal.shop](https://terminal.shop)· θα εξαντλήσουμε τα όρια του τι είναι δυνατό στο terminal.
-- Αρχιτεκτονική client/server. Αυτό, για παράδειγμα, μπορεί να επιτρέψει στο OpenCode να τρέχει στον υπολογιστή σου ενώ το χειρίζεσαι εξ αποστάσεως από μια εφαρμογή κινητού, που σημαίνει ότι το TUI frontend είναι μόνο ένας από τους πιθανούς clients.
-
 ---
 
 **Γίνε μέλος της κοινότητάς μας** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.it.md

@@ -124,18 +124,6 @@ Se sei interessato a contribuire a OpenCode, leggi la nostra [guida alla contrib
 
 Se stai lavorando a un progetto correlato a OpenCode e che utilizza “opencode” come parte del nome (ad esempio “opencode-dashboard” o “opencode-mobile”), aggiungi una nota nel tuo README per chiarire che non è sviluppato dal team OpenCode e che non è affiliato in alcun modo con noi.
 
-### FAQ
-
-#### In cosa è diverso da Claude Code?
-
-È molto simile a Claude Code in termini di funzionalità. Ecco le principali differenze:
-
-- 100% open source
-- Non è legato a nessun provider. Anche se consigliamo i modelli forniti tramite [OpenCode Zen](https://opencode.ai/zen), OpenCode può essere utilizzato con Claude, OpenAI, Google o persino modelli locali. Con l’evoluzione dei modelli, le differenze tra di essi si ridurranno e i prezzi scenderanno, quindi essere indipendenti dal provider è importante.
-- Supporto LSP pronto all’uso
-- Forte attenzione alla TUI. OpenCode è sviluppato da utenti neovim e dai creatori di [terminal.shop](https://terminal.shop); spingeremo al limite ciò che è possibile fare nel terminale.
-- Architettura client/server. Questo, ad esempio, permette a OpenCode di girare sul tuo computer mentre lo controlli da remoto tramite un’app mobile. La frontend TUI è quindi solo uno dei possibili client.
-
 ---
 
 **Unisciti alla nostra community** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.ja.md

@@ -124,18 +124,6 @@ OpenCode に貢献したい場合は、Pull Request を送る前に [contributin
 
 OpenCode に関連するプロジェクトで、名前に "opencode"（例: "opencode-dashboard" や "opencode-mobile"）を含める場合は、そのプロジェクトが OpenCode チームによって作られたものではなく、いかなる形でも関係がないことを README に明記してください。
 
-### FAQ
-
-#### Claude Code との違いは？
-
-機能面では Claude Code と非常に似ています。主な違いは次のとおりです。
-
-- 100% オープンソース
-- 特定のプロバイダーに依存しません。[OpenCode Zen](https://opencode.ai/zen) で提供しているモデルを推奨しますが、OpenCode は Claude、OpenAI、Google、またはローカルモデルでも利用できます。モデルが進化すると差は縮まり価格も下がるため、provider-agnostic であることが重要です。
-- そのまま使える LSP サポート
-- TUI にフォーカス。OpenCode は neovim ユーザーと [terminal.shop](https://terminal.shop) の制作者によって作られており、ターミナルで可能なことの限界を押し広げます。
-- クライアント/サーバー構成。例えば OpenCode をあなたのPCで動かし、モバイルアプリからリモート操作できます。TUI フロントエンドは複数あるクライアントの1つにすぎません。
-
 ---
 
 **コミュニティに参加** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.ko.md

@@ -124,18 +124,6 @@ OpenCode 에 기여하고 싶다면, Pull Request 를 제출하기 전에 [contr
 
 OpenCode 와 관련된 프로젝트를 진행하면서 이름에 "opencode"(예: "opencode-dashboard" 또는 "opencode-mobile") 를 포함한다면, README 에 해당 프로젝트가 OpenCode 팀이 만든 것이 아니며 어떤 방식으로도 우리와 제휴되어 있지 않다는 점을 명시해 주세요.
 
-### FAQ
-
-#### Claude Code 와는 무엇이 다른가요?
-
-기능 면에서는 Claude Code 와 매우 유사합니다. 주요 차이점은 다음과 같습니다.
-
-- 100% 오픈 소스
-- 특정 제공자에 묶여 있지 않습니다. [OpenCode Zen](https://opencode.ai/zen) 을 통해 제공하는 모델을 권장하지만, OpenCode 는 Claude, OpenAI, Google 또는 로컬 모델과도 사용할 수 있습니다. 모델이 발전하면서 격차는 줄고 가격은 내려가므로 provider-agnostic 인 것이 중요합니다.
-- 기본으로 제공되는 LSP 지원
-- TUI 에 집중. OpenCode 는 neovim 사용자와 [terminal.shop](https://terminal.shop) 제작자가 만들었으며, 터미널에서 가능한 것의 한계를 밀어붙입니다.
-- 클라이언트/서버 아키텍처. 예를 들어 OpenCode 를 내 컴퓨터에서 실행하면서 모바일 앱으로 원격 조작할 수 있습니다. 즉, TUI 프런트엔드는 가능한 여러 클라이언트 중 하나일 뿐입니다.
-
 ---
 
 **커뮤니티에 참여하기** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.md

@@ -124,18 +124,6 @@ If you're interested in contributing to OpenCode, please read our [contributing
 
 If you are working on a project that's related to OpenCode and is using "opencode" as part of its name, for example "opencode-dashboard" or "opencode-mobile", please add a note to your README to clarify that it is not built by the OpenCode team and is not affiliated with us in any way.
 
-### FAQ
-
-#### How is this different from Claude Code?
-
-It's very similar to Claude Code in terms of capability. Here are the key differences:
-
-- 100% open source
-- Not coupled to any provider. Although we recommend the models we provide through [OpenCode Zen](https://opencode.ai/zen), OpenCode can be used with Claude, OpenAI, Google, or even local models. As models evolve, the gaps between them will close and pricing will drop, so being provider-agnostic is important.
-- Built-in opt-in LSP support
-- A focus on TUI. OpenCode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
-- A client/server architecture. This, for example, can allow OpenCode to run on your computer while you drive it remotely from a mobile app, meaning that the TUI frontend is just one of the possible clients.
-
 ---
 
 **Join our community** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.no.md

@@ -124,18 +124,6 @@ Hvis du vil bidra til OpenCode, les [contributing docs](./CONTRIBUTING.md) før
 
 Hvis du jobber med et prosjekt som er relatert til OpenCode og bruker "opencode" som en del av navnet; for eksempel "opencode-dashboard" eller "opencode-mobile", legg inn en merknad i README som presiserer at det ikke er bygget av OpenCode-teamet og ikke er tilknyttet oss på noen måte.
 
-### FAQ
-
-#### Hvordan er dette forskjellig fra Claude Code?
-
-Det er veldig likt Claude Code når det gjelder funksjonalitet. Her er de viktigste forskjellene:
-
-- 100% open source
-- Ikke knyttet til en bestemt leverandør. Selv om vi anbefaler modellene vi tilbyr gjennom [OpenCode Zen](https://opencode.ai/zen); kan OpenCode brukes med Claude, OpenAI, Google eller til og med lokale modeller. Etter hvert som modellene utvikler seg vil gapene lukkes og prisene gå ned, så det er viktig å være provider-agnostic.
-- LSP-støtte rett ut av boksen
-- Fokus på TUI. OpenCode er bygget av neovim-brukere og skaperne av [terminal.shop](https://terminal.shop); vi kommer til å presse grensene for hva som er mulig i terminalen.
-- Klient/server-arkitektur. Dette kan for eksempel la OpenCode kjøre på maskinen din, mens du styrer den eksternt fra en mobilapp. Det betyr at TUI-frontend'en bare er en av de mulige klientene.
-
 ---
 
 **Bli med i fellesskapet** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.pl.md

@@ -124,18 +124,6 @@ Jeśli chcesz współtworzyć OpenCode, przeczytaj [contributing docs](./CONTRIB
 
 Jeśli pracujesz nad projektem związanym z OpenCode i używasz "opencode" jako części nazwy (na przykład "opencode-dashboard" lub "opencode-mobile"), dodaj proszę notatkę do swojego README, aby wyjaśnić, że projekt nie jest tworzony przez zespół OpenCode i nie jest z nami w żaden sposób powiązany.
 
-### FAQ
-
-#### Czym to się różni od Claude Code?
-
-Jest bardzo podobne do Claude Code pod względem możliwości. Oto kluczowe różnice:
-
-- 100% open source
-- Niezależne od dostawcy. Chociaż polecamy modele oferowane przez [OpenCode Zen](https://opencode.ai/zen); OpenCode może być używany z Claude, OpenAI, Google, a nawet z modelami lokalnymi. W miarę jak modele ewoluują, różnice będą się zmniejszać, a ceny spadać, więc ważna jest niezależność od dostawcy.
-- Wbudowane wsparcie LSP
-- Skupienie na TUI. OpenCode jest budowany przez użytkowników neovim i twórców [terminal.shop](https://terminal.shop); przesuwamy granice tego, co jest możliwe w terminalu.
-- Architektura klient/serwer. Pozwala np. uruchomić OpenCode na twoim komputerze, a sterować nim zdalnie z aplikacji mobilnej. To znaczy, że frontend TUI jest tylko jednym z możliwych klientów.
-
 ---
 
 **Dołącz do naszej społeczności** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.ru.md

@@ -124,18 +124,6 @@ XDG_BIN_DIR=$HOME/.local/bin curl -fsSL https://opencode.ai/install | bash
 
 Если вы делаете проект, связанный с OpenCode, и используете "opencode" как часть имени (например, "opencode-dashboard" или "opencode-mobile"), добавьте примечание в README, чтобы уточнить, что проект не создан командой OpenCode и не аффилирован с нами.
 
-### FAQ
-
-#### Чем это отличается от Claude Code?
-
-По возможностям это очень похоже на Claude Code. Вот ключевые отличия:
-
-- 100% open source
-- Не привязано к одному провайдеру. Мы рекомендуем модели из [OpenCode Zen](https://opencode.ai/zen); но OpenCode можно использовать с Claude, OpenAI, Google или даже локальными моделями. По мере развития моделей разрыв будет сокращаться, а цены падать, поэтому важна независимость от провайдера.
-- Поддержка LSP из коробки
-- Фокус на TUI. OpenCode построен пользователями neovim и создателями [terminal.shop](https://terminal.shop); мы будем раздвигать границы того, что возможно в терминале.
-- Архитектура клиент/сервер. Например, это позволяет запускать OpenCode на вашем компьютере, а управлять им удаленно из мобильного приложения. Это значит, что TUI-фронтенд - лишь один из возможных клиентов.
-
 ---
 
 **Присоединяйтесь к нашему сообществу** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.th.md

@@ -124,18 +124,6 @@ OpenCode รวมเอเจนต์ในตัวสองตัวที
 
 หากคุณทำงานในโปรเจกต์ที่เกี่ยวข้องกับ OpenCode และใช้ "opencode" เป็นส่วนหนึ่งของชื่อ เช่น "opencode-dashboard" หรือ "opencode-mobile" โปรดเพิ่มหมายเหตุใน README ของคุณเพื่อชี้แจงว่าไม่ได้สร้างโดยทีม OpenCode และไม่ได้เกี่ยวข้องกับเราในทางใด
 
-### คำถามที่พบบ่อย
-
-#### ต่างจาก Claude Code อย่างไร?
-
-คล้ายกับ Claude Code มากในแง่ความสามารถ นี่คือความแตกต่างหลัก:
-
-- โอเพนซอร์ส 100%
-- ไม่ผูกมัดกับผู้ให้บริการใดๆ แม้ว่าเราจะแนะนำโมเดลที่เราจัดหาให้ผ่าน [OpenCode Zen](https://opencode.ai/zen) OpenCode สามารถใช้กับ Claude, OpenAI, Google หรือแม้กระทั่งโมเดลในเครื่องได้ เมื่อโมเดลพัฒนาช่องว่างระหว่างพวกมันจะปิดลงและราคาจะลดลง ดังนั้นการไม่ผูกมัดกับผู้ให้บริการจึงสำคัญ
-- รองรับ LSP ใช้งานได้ทันทีหลังการติดตั้งโดยไม่ต้องปรับแต่งหรือเปลี่ยนแปลงฟังก์ชันการทำงานใด ๆ
-- เน้นที่ TUI OpenCode สร้างโดยผู้ใช้ neovim และผู้สร้าง [terminal.shop](https://terminal.shop) เราจะผลักดันขีดจำกัดของสิ่งที่เป็นไปได้ในเทอร์มินัล
-- สถาปัตยกรรมไคลเอนต์/เซิร์ฟเวอร์ ตัวอย่างเช่น อาจอนุญาตให้ OpenCode ทำงานบนคอมพิวเตอร์ของคุณ ในขณะที่คุณสามารถขับเคลื่อนจากระยะไกลผ่านแอปมือถือ หมายความว่า TUI frontend เป็นหนึ่งในไคลเอนต์ที่เป็นไปได้เท่านั้น
-
 ---
 
 **ร่วมชุมชนของเรา** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.tr.md

@@ -124,18 +124,6 @@ OpenCode'a katkıda bulunmak istiyorsanız, lütfen bir pull request göndermede
 
 OpenCode ile ilgili bir proje üzerinde çalışıyorsanız ve projenizin adının bir parçası olarak "opencode" kullanıyorsanız (örneğin, "opencode-dashboard" veya "opencode-mobile"), lütfen README dosyanıza projenin OpenCode ekibi tarafından geliştirilmediğini ve bizimle hiçbir şekilde bağlantılı olmadığını belirten bir not ekleyin.
 
-### SSS
-
-#### Bu Claude Code'dan nasıl farklı?
-
-Yetenekler açısından Claude Code'a çok benzer. İşte temel farklar:
-
-- %100 açık kaynak
-- Herhangi bir sağlayıcıya bağlı değil. [OpenCode Zen](https://opencode.ai/zen) üzerinden sunduğumuz modelleri önermekle birlikte; OpenCode, Claude, OpenAI, Google veya hatta yerel modellerle kullanılabilir. Modeller geliştikçe aralarındaki farklar kapanacak ve fiyatlar düşecek, bu nedenle sağlayıcıdan bağımsız olmak önemlidir.
-- Kurulum gerektirmeyen hazır LSP desteği
-- TUI odaklı yaklaşım. OpenCode, neovim kullanıcıları ve [terminal.shop](https://terminal.shop)'un geliştiricileri tarafından geliştirilmektedir; terminalde olabileceklerin sınırlarını zorlayacağız.
-- İstemci/sunucu (client/server) mimarisi. Bu, örneğin OpenCode'un bilgisayarınızda çalışması ve siz onu bir mobil uygulamadan uzaktan yönetmenizi sağlar. TUI arayüzü olası istemcilerden sadece biridir.
-
 ---
 
 **Topluluğumuza katılın** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.uk.md

@@ -125,18 +125,6 @@ OpenCode містить два вбудовані агенти, між яким
 Якщо ви працюєте над проєктом, пов'язаним з OpenCode, і використовуєте "opencode" у назві, наприклад "opencode-dashboard" або "opencode-mobile", додайте примітку до свого README.
 Уточніть, що цей проєкт не створений командою OpenCode і жодним чином не афілійований із нами.
 
-### FAQ
-
-#### Чим це відрізняється від Claude Code?
-
-За можливостями це дуже схоже на Claude Code. Ось ключові відмінності:
-
-- 100% open source
-- Немає прив'язки до конкретного провайдера. Ми рекомендуємо моделі, які надаємо через [OpenCode Zen](https://opencode.ai/zen), але OpenCode також працює з Claude, OpenAI, Google і навіть локальними моделями. З розвитком моделей різниця між ними зменшуватиметься, а ціни падатимуть, тому незалежність від провайдера має значення.
-- Підтримка LSP з коробки
-- Фокус на TUI. OpenCode створено користувачами neovim та авторами [terminal.shop](https://terminal.shop); ми й надалі розширюватимемо межі можливого в терміналі.
-- Клієнт-серверна архітектура. Наприклад, це дає змогу запускати OpenCode на вашому комп'ютері й керувати ним віддалено з мобільного застосунку, тобто TUI-фронтенд - лише один із можливих клієнтів.
-
 ---
 
 **Приєднуйтеся до нашої спільноти** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.vi.md

@@ -124,18 +124,6 @@ Nếu bạn muốn đóng góp cho OpenCode, vui lòng đọc [tài liệu hư
 
 Nếu bạn đang làm việc trên một dự án liên quan đến OpenCode và sử dụng "opencode" như một phần của tên dự án, ví dụ "opencode-dashboard" hoặc "opencode-mobile", vui lòng thêm một ghi chú vào README của bạn để làm rõ rằng dự án đó không được xây dựng bởi đội ngũ OpenCode và không liên kết với chúng tôi dưới bất kỳ hình thức nào.
 
-### Các câu hỏi thường gặp (FAQ)
-
-#### OpenCode khác biệt thế nào so với Claude Code?
-
-Về mặt tính năng, nó rất giống Claude Code. Dưới đây là những điểm khác biệt chính:
-
-- 100% mã nguồn mở
-- Không bị ràng buộc với bất kỳ nhà cung cấp nào. Mặc dù chúng tôi khuyên dùng các mô hình được cung cấp qua [OpenCode Zen](https://opencode.ai/zen), OpenCode có thể được sử dụng với Claude, OpenAI, Google, hoặc thậm chí các mô hình chạy cục bộ. Khi các mô hình phát triển, khoảng cách giữa chúng sẽ thu hẹp lại và giá cả sẽ giảm, vì vậy việc không phụ thuộc vào nhà cung cấp là rất quan trọng.
-- Hỗ trợ LSP ngay từ đầu
-- Tập trung vào TUI (Giao diện người dùng dòng lệnh). OpenCode được xây dựng bởi những người dùng neovim và đội ngũ tạo ra [terminal.shop](https://terminal.shop); chúng tôi sẽ đẩy giới hạn của những gì có thể làm được trên terminal lên mức tối đa.
-- Kiến trúc client/server. Chẳng hạn, điều này cho phép OpenCode chạy trên máy tính của bạn trong khi bạn điều khiển nó từ xa qua một ứng dụng di động, nghĩa là frontend TUI chỉ là một trong những client có thể dùng.
-
 ---
 
 **Tham gia cộng đồng của chúng tôi** [Discord](https://discord.gg/opencode) | [X.com](https://x.com/opencode)

README.zh.md

@@ -123,18 +123,6 @@ OpenCode 内置两种 Agent，可用 `Tab` 键快速切换：
 
 如果你在项目名中使用了 “opencode”（如 “opencode-dashboard” 或 “opencode-mobile”），请在 README 里注明该项目不是 OpenCode 团队官方开发，且不存在隶属关系。
 
-### 常见问题 (FAQ)
-
-#### 这和 Claude Code 有什么不同？
-
-功能上很相似，关键差异：
-
-- 100% 开源。
-- 不绑定特定提供商。推荐使用 [OpenCode Zen](https://opencode.ai/zen) 的模型，但也可搭配 Claude、OpenAI、Google 甚至本地模型。模型迭代会缩小差异、降低成本，因此保持 provider-agnostic 很重要。
-- 内置 LSP 支持。
-- 聚焦终端界面 (TUI)。OpenCode 由 Neovim 爱好者和 [terminal.shop](https://terminal.shop) 的创建者打造，会持续探索终端的极限。
-- 客户端/服务器架构。可在本机运行，同时用移动设备远程驱动。TUI 只是众多潜在客户端之一。
-
 ---
 
 **加入我们的社区** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=738j8655-cd59-4633-a30a-1124e0096789&qr_code=true) | [X.com](https://x.com/opencode)

README.zht.md

@@ -123,18 +123,6 @@ OpenCode 內建了兩種 Agent，您可以使用 `Tab` 鍵快速切換。
 
 如果您正在開發與 OpenCode 相關的專案，並在名稱中使用了 "opencode"（例如 "opencode-dashboard" 或 "opencode-mobile"），請在您的 README 中加入聲明，說明該專案並非由 OpenCode 團隊開發，且與我們沒有任何隸屬關係。
 
-### 常見問題 (FAQ)
-
-#### 這跟 Claude Code 有什麼不同？
-
-在功能面上與 Claude Code 非常相似。以下是關鍵差異：
-
-- 100% 開源。
-- 不綁定特定的服務提供商。雖然我們推薦使用透過 [OpenCode Zen](https://opencode.ai/zen) 提供的模型，但 OpenCode 也可搭配 Claude, OpenAI, Google 甚至本地模型使用。隨著模型不斷演進，彼此間的差距會縮小且價格會下降，因此具備「不限廠商 (provider-agnostic)」的特性至關重要。
-- 內建 LSP (語言伺服器協定) 支援。
-- 專注於終端機介面 (TUI)。OpenCode 由 Neovim 愛好者與 [terminal.shop](https://terminal.shop) 的創作者打造。我們將不斷挑戰終端機介面的極限。
-- 客戶端/伺服器架構 (Client/Server Architecture)。這讓 OpenCode 能夠在您的電腦上運行的同時，由行動裝置進行遠端操控。這意味著 TUI 前端只是眾多可能的客戶端之一。
-
 ---
 
 **加入我們的社群** [飞书](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=738j8655-cd59-4633-a30a-1124e0096789&qr_code=true) | [X.com](https://x.com/opencode)

bunfig.toml

@@ -2,6 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
+minimumReleaseAgeExcludes = ["@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-x64", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid"]
 
 [test]
 root = "./do-not-run-tests-from-root"

flake.nix

@@ -37,16 +37,14 @@
             node_modules = final.callPackage ./nix/node_modules.nix {
               inherit rev;
             };
+          in
+          rec {
             opencode = final.callPackage ./nix/opencode.nix {
               inherit node_modules;
             };
-            desktop = final.callPackage ./nix/desktop.nix {
+            opencode-desktop = final.callPackage ./nix/desktop.nix {
               inherit opencode;
             };
-          in
-          {
-            inherit opencode;
-            opencode-desktop = desktop;
           };
       };
 
@@ -56,16 +54,15 @@
           node_modules = pkgs.callPackage ./nix/node_modules.nix {
             inherit rev;
           };
+        in
+        rec {
+          default = opencode;
           opencode = pkgs.callPackage ./nix/opencode.nix {
             inherit node_modules;
           };
-          desktop = pkgs.callPackage ./nix/desktop.nix {
+          opencode-desktop = pkgs.callPackage ./nix/desktop.nix {
             inherit opencode;
           };
-        in
-        {
-          default = opencode;
-          inherit opencode desktop;
           # Updater derivation with fakeHash - build fails and reveals correct hash
           node_modules_updater = node_modules.override {
             hash = pkgs.lib.fakeHash;

infra/app.ts

@@ -30,7 +30,7 @@ export const api = new sst.cloudflare.Worker("Api", {
   transform: {
     worker: (args) => {
       args.logpush = true
-      if ($app.stage === "vimtor") return
+      if ($app.stage === "vimtor" || $app.stage === "adam") return
       args.bindings = $resolve(args.bindings).apply((bindings) => [
         ...bindings,
         {

infra/console.ts

@@ -1,7 +1,9 @@
-import { domain } from "./stage"
+import { deployAws, domain } from "./stage"
 import { EMAILOCTOPUS_API_KEY } from "./app"
 import { SECRET } from "./secret"
 
+const lake = deployAws ? await import("./lake") : undefined
+
 ////////////////
 // DATABASE
 ////////////////
@@ -223,8 +225,6 @@ const STRIPE_WEBHOOK_SECRET = new sst.Linkable("STRIPE_WEBHOOK_SECRET", {
   properties: { value: stripeWebhook.secret },
 })
 
-const gatewayKv = new sst.cloudflare.Kv("GatewayKv")
-
 ////////////////
 // CONSOLE
 ////////////////
@@ -242,7 +242,7 @@ const SALESFORCE_INSTANCE_URL = new sst.Secret("SALESFORCE_INSTANCE_URL")
 
 const logProcessor = new sst.cloudflare.Worker("LogProcessor", {
   handler: "packages/console/function/src/log-processor.ts",
-  link: [new sst.Secret("HONEYCOMB_API_KEY")],
+  link: [SECRET.HoneycombApiKey, ...(lake?.lakeIngest ? [lake.lakeIngest] : [])],
 })
 
 new sst.cloudflare.x.SolidStart("Console", {
@@ -252,6 +252,8 @@ new sst.cloudflare.x.SolidStart("Console", {
     bucket,
     bucketNew,
     database,
+    SECRET.UpstashRedisRestUrl,
+    SECRET.UpstashRedisRestToken,
     AUTH_API_URL,
     STRIPE_WEBHOOK_SECRET,
     DISCORD_INCIDENT_WEBHOOK_URL,
@@ -274,7 +276,6 @@ new sst.cloudflare.x.SolidStart("Console", {
           new sst.Secret("CLOUDFLARE_API_TOKEN", process.env.CLOUDFLARE_API_TOKEN!),
         ]
       : []),
-    gatewayKv,
   ],
   environment: {
     //VITE_DOCS_URL: web.url.apply((url) => url!),
@@ -284,7 +285,7 @@ new sst.cloudflare.x.SolidStart("Console", {
   },
   transform: {
     server: {
-      placement: { region: "aws:us-east-1" },
+      placement: { region: "aws:us-east-2" },
       transform: {
         worker: {
           tailConsumers: [{ service: logProcessor.nodes.worker.scriptName }],
@@ -293,3 +294,13 @@ new sst.cloudflare.x.SolidStart("Console", {
     },
   },
 })
+
+////////////////
+// HELPERS
+////////////////
+
+export const stat = new sst.cloudflare.Worker("Stat", {
+  handler: "packages/console/function/src/stat.ts",
+  link: [database],
+  url: true,
+})

infra/lake.ts

@@ -0,0 +1,322 @@
+import { domain } from "./stage"
+
+const current = aws.getCallerIdentityOutput({})
+const partition = aws.getPartitionOutput({})
+const region = aws.getRegionOutput({})
+
+const tableBucketName = `opencode-${$app.stage}-lake`
+const glueCatalogName = "s3tablescatalog"
+const glueCatalogArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:catalog`
+const glueS3TablesCatalogArn = $interpolate`${glueCatalogArn}/${glueCatalogName}`
+const glueS3TablesChildCatalogArn = $interpolate`${glueS3TablesCatalogArn}/${tableBucketName}`
+const glueS3TablesDatabaseWildcardArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/${glueCatalogName}/${tableBucketName}/*`
+const glueS3TablesTableWildcardArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/${tableBucketName}/*/*`
+const s3TablesBucketWildcardArn = $interpolate`arn:${partition.partition}:s3tables:${region.region}:${current.accountId}:bucket/*`
+
+export const tableBucket = new aws.s3tables.TableBucket("LakeTableBucket", {
+  name: tableBucketName,
+  forceDestroy: $app.stage !== "production",
+})
+
+const s3TablesCatalog = new aws.cloudcontrol.Resource(
+  "LakeS3TablesCatalog",
+  {
+    typeName: "AWS::Glue::Catalog",
+    desiredState: $jsonStringify({
+      Name: glueCatalogName,
+      Description: "Federated catalog for S3 Tables",
+      FederatedCatalog: {
+        Identifier: s3TablesBucketWildcardArn,
+        ConnectionName: "aws:s3tables",
+      },
+      CreateDatabaseDefaultPermissions: [
+        {
+          Principal: {
+            DataLakePrincipalIdentifier: "IAM_ALLOWED_PRINCIPALS",
+          },
+          Permissions: ["ALL"],
+        },
+      ],
+      CreateTableDefaultPermissions: [
+        {
+          Principal: {
+            DataLakePrincipalIdentifier: "IAM_ALLOWED_PRINCIPALS",
+          },
+          Permissions: ["ALL"],
+        },
+      ],
+      AllowFullTableExternalDataAccess: "True",
+    }),
+  },
+  { dependsOn: [tableBucket] },
+)
+
+const athenaResultsBucket = new aws.s3.Bucket("LakeAthenaResults", {
+  bucket: `opencode-${$app.stage}-lake-athena-results`,
+  forceDestroy: $app.stage !== "production",
+})
+
+const firehoseErrorBucket = new aws.s3.Bucket("LakeFirehoseErrors", {
+  bucket: `opencode-${$app.stage}-lake-firehose-errors`,
+  forceDestroy: $app.stage !== "production",
+})
+
+const athenaWorkgroup = new aws.athena.Workgroup("LakeAthenaWorkgroup", {
+  name: `opencode-${$app.stage}-lake-workgroup`,
+  forceDestroy: $app.stage !== "production",
+  configuration: {
+    enforceWorkgroupConfiguration: true,
+    publishCloudwatchMetricsEnabled: true,
+    resultConfiguration: {
+      outputLocation: $interpolate`s3://${athenaResultsBucket.bucket}/`,
+    },
+  },
+})
+
+const firehoseRole = new aws.iam.Role("LakeFirehoseRole", {
+  assumeRolePolicy: aws.iam.getPolicyDocumentOutput({
+    statements: [
+      {
+        effect: "Allow",
+        actions: ["sts:AssumeRole"],
+        principals: [
+          {
+            type: "Service",
+            identifiers: ["firehose.amazonaws.com"],
+          },
+        ],
+      },
+    ],
+  }).json,
+})
+
+const firehosePolicy = new aws.iam.RolePolicy("LakeFirehosePolicy", {
+  role: firehoseRole.id,
+  policy: aws.iam.getPolicyDocumentOutput({
+    statements: [
+      {
+        effect: "Allow",
+        actions: [
+          "s3tables:ListTableBuckets",
+          "s3tables:GetTableBucket",
+          "s3tables:GetNamespace",
+          "s3tables:GetTable",
+          "s3tables:GetTableData",
+          "s3tables:GetTableMetadataLocation",
+          "s3tables:ListNamespaces",
+          "s3tables:ListTables",
+          "s3tables:PutTableData",
+          "s3tables:UpdateTableMetadataLocation",
+        ],
+        resources: ["*"],
+      },
+      {
+        effect: "Allow",
+        actions: [
+          "glue:GetCatalog",
+          "glue:GetCatalogs",
+          "glue:GetDatabase",
+          "glue:GetDatabases",
+          "glue:GetTable",
+          "glue:GetTables",
+          "glue:UpdateTable",
+        ],
+        resources: [
+          glueCatalogArn,
+          glueS3TablesCatalogArn,
+          $interpolate`${glueS3TablesCatalogArn}/*`,
+          glueS3TablesDatabaseWildcardArn,
+          glueS3TablesTableWildcardArn,
+          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/*`,
+          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/*/*`,
+          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/*`,
+        ],
+      },
+      {
+        effect: "Allow",
+        actions: [
+          "s3:AbortMultipartUpload",
+          "s3:GetBucketLocation",
+          "s3:GetObject",
+          "s3:ListBucket",
+          "s3:ListBucketMultipartUploads",
+          "s3:PutObject",
+        ],
+        resources: [firehoseErrorBucket.arn, $interpolate`${firehoseErrorBucket.arn}/*`],
+      },
+      {
+        effect: "Allow",
+        actions: ["lakeformation:GetDataAccess"],
+        resources: ["*"],
+      },
+    ],
+  }).json,
+})
+
+const firehose = new aws.kinesis.FirehoseDeliveryStream(
+  "LakeFirehose",
+  {
+    name: `opencode-${$app.stage}-lake-ingest`,
+    destination: "iceberg",
+    icebergConfiguration: {
+      appendOnly: true,
+      bufferingInterval: 60,
+      bufferingSize: 1,
+      catalogArn: glueS3TablesChildCatalogArn,
+      processingConfiguration: {
+        enabled: true,
+        processors: [
+          {
+            type: "MetadataExtraction",
+            parameters: [
+              { parameterName: "JsonParsingEngine", parameterValue: "JQ-1.6" },
+              {
+                parameterName: "MetadataExtractionQuery",
+                parameterValue:
+                  '{destinationDatabaseName:._lake_database,destinationTableName:._lake_table,operation:(._lake_operation // "insert")}',
+              },
+            ],
+          },
+        ],
+      },
+      roleArn: firehoseRole.arn,
+      s3BackupMode: "FailedDataOnly",
+      s3Configuration: {
+        roleArn: firehoseRole.arn,
+        bucketArn: firehoseErrorBucket.arn,
+        errorOutputPrefix: "errors/!{firehose:error-output-type}/",
+      },
+    },
+  },
+  { dependsOn: [s3TablesCatalog, firehosePolicy] },
+)
+
+export const lakeVpc = new sst.aws.Vpc("LakeVpc")
+export const lakeCluster = new sst.aws.Cluster("LakeCluster", { vpc: lakeVpc })
+export const lakeRegion = region.region
+export const lakeCatalog = $interpolate`${glueCatalogName}/${tableBucket.name}`
+export const lakeAthenaWorkgroup = athenaWorkgroup
+
+const ingestSecret = new random.RandomPassword("LakeIngestSecret", { length: 32 })
+
+const ingestConfig = new sst.Linkable("LakeIngestConfig", {
+  properties: {
+    streamName: firehose.name,
+    secret: ingestSecret.result,
+  },
+})
+
+const ingestService = new sst.aws.Service("LakeIngestService", {
+  cluster: lakeCluster,
+  architecture: "arm64",
+  cpu: "1 vCPU",
+  memory: "4 GB",
+  image: {
+    context: ".",
+    dockerfile: "packages/stats/server/Dockerfile",
+  },
+  link: [ingestConfig],
+  permissions: [
+    {
+      actions: ["firehose:PutRecord", "firehose:PutRecordBatch"],
+      resources: [firehose.arn],
+    },
+  ],
+  scaling: {
+    min: $app.stage === "production" ? 2 : 1,
+    max: $app.stage === "production" ? 32 : 4,
+    cpuUtilization: 60,
+    memoryUtilization: 70,
+  },
+  loadBalancer: {
+    domain: {
+      name: `lake.${domain}`,
+      dns: sst.cloudflare.dns(),
+    },
+    rules: [
+      { listen: "80/http", redirect: "443/https" },
+      { listen: "443/https", forward: "3000/http" },
+    ],
+    health: {
+      "3000/http": {
+        path: "/ready",
+        successCodes: "200-299",
+      },
+    },
+  },
+  health: {
+    command: [
+      "CMD-SHELL",
+      "bun --eval \"fetch('http://localhost:3000/health').then((r) => process.exit(r.ok ? 0 : 1)).catch(() => process.exit(1))\"",
+    ],
+    interval: "30 seconds",
+    retries: 3,
+    startPeriod: "30 seconds",
+    timeout: "5 seconds",
+  },
+  dev: {
+    command: "bun run start",
+    directory: "packages/stats/server",
+    url: "http://localhost:3000",
+  },
+  wait: $app.stage === "production",
+})
+
+export const lakeIngest = new sst.Linkable("LakeIngest", {
+  properties: {
+    url: ingestService.url,
+    secret: ingestSecret.result,
+  },
+})
+
+export const lakeQueryPermissions = [
+  {
+    actions: ["athena:StartQueryExecution", "athena:GetQueryExecution", "athena:GetQueryResults"],
+    resources: [athenaWorkgroup.arn],
+  },
+  {
+    actions: [
+      "glue:GetCatalog",
+      "glue:GetCatalogs",
+      "glue:GetDatabase",
+      "glue:GetDatabases",
+      "glue:GetTable",
+      "glue:GetTables",
+      "glue:GetPartitions",
+    ],
+    resources: [
+      glueCatalogArn,
+      glueS3TablesCatalogArn,
+      $interpolate`${glueS3TablesCatalogArn}/*`,
+      glueS3TablesDatabaseWildcardArn,
+      glueS3TablesTableWildcardArn,
+      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/*`,
+      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/*/*`,
+      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/*`,
+    ],
+  },
+  {
+    actions: ["s3:GetBucketLocation", "s3:ListBucket"],
+    resources: [athenaResultsBucket.arn],
+  },
+  {
+    actions: ["s3:GetObject", "s3:PutObject", "s3:AbortMultipartUpload", "s3:ListBucketMultipartUploads"],
+    resources: [$interpolate`${athenaResultsBucket.arn}/*`],
+  },
+  {
+    actions: [
+      "s3tables:GetTableBucket",
+      "s3tables:GetNamespace",
+      "s3tables:GetTable",
+      "s3tables:GetTableData",
+      "s3tables:GetTableMetadataLocation",
+      "s3tables:ListNamespaces",
+      "s3tables:ListTables",
+    ],
+    resources: ["*"],
+  },
+  {
+    actions: ["lakeformation:GetDataAccess"],
+    resources: ["*"],
+  },
+]

infra/monitoring.ts

@@ -2,8 +2,9 @@ import { SECRET } from "./secret"
 import { domain } from "./stage"
 
 const description = "Managed by SST (Don't edit in Honeycomb UI)"
+const alertsDisabled = $app.stage !== "production"
 
-const webhookRecipient = new honeycomb.WebhookRecipient("DiscordAlerts", {
+const webhookRecipient = new honeycombio.WebhookRecipient("DiscordAlerts", {
   name: $app.stage === "production" ? "Discord Alerts" : `Discord Alerts (${$app.stage})`,
   url: `https://${domain}/honeycomb/webhook`,
   secret: SECRET.HoneycombWebhookSecret.result,
@@ -46,13 +47,27 @@ const modelHttpErrorsQuery = (product: "go" | "zen") => {
   ]
   const failedHttpStatus = calculatedField({
     name: "is_failed_http_status",
-    expression:
-      product === "go"
-        ? `IF(AND(GTE($status, "400"), NOT(EQUALS($status, "401")), NOT(EQUALS($status, "429"))), 1, 0)`
-        : `IF(AND(EQUALS($status, "429"), $isFreeTier), 0, AND(GTE($status, "400"), NOT(EQUALS($status, "401"))), 1, 0)`,
+    expression: `
+IF(
+  AND(
+    GTE($status, "400"),
+    NOT(EQUALS($status, "401")),
+    NOT(
+      AND(
+        EQUALS($status, "429"),
+        OR(
+          EQUALS($error.type, "GoUsageLimitError"),
+          EQUALS($error.type, "FreeUsageLimitError")
+        )
+      )
+    )
+  ),
+  1,
+  0
+)`,
   })
 
-  return honeycomb.getQuerySpecificationOutput({
+  return honeycombio.getQuerySpecificationOutput({
     breakdowns: ["model"],
     calculatedFields: [failedHttpStatus],
     calculations: [
@@ -65,16 +80,15 @@ const modelHttpErrorsQuery = (product: "go" | "zen") => {
         filters,
       },
     ],
-    formulas: [{ name: "ERROR", expression: "IF(GTE($TOTAL, 100), DIV($FAILED, $TOTAL), 0)" }],
+    formulas: [{ name: "ERROR", expression: "IF(GTE($TOTAL, 150), DIV($FAILED, $TOTAL), 0)" }],
     timeRange: 900,
   }).json
 }
 
-const providerHttpErrorsQuery = (product: "go" | "zen") => {
+const providerHttpErrorsQuery = () => {
   const filters = [
     { column: "provider", op: "exists" },
     { column: "user_agent", op: "contains", value: "opencode" },
-    { column: "isGoTier", op: "=", value: product === "go" ? "true" : "false" },
   ]
   const successHttpStatus = calculatedField({
     name: "is_success_http_status",
@@ -85,7 +99,7 @@ const providerHttpErrorsQuery = (product: "go" | "zen") => {
     expression: `IF(GT($llm.error.code, "400"), 1, 0)`,
   })
 
-  return honeycomb.getQuerySpecificationOutput({
+  return honeycombio.getQuerySpecificationOutput({
     breakdowns: ["provider"],
     calculatedFields: [successHttpStatus, failedProviderHttpStatus],
     calculations: [
@@ -101,19 +115,52 @@ const providerHttpErrorsQuery = (product: "go" | "zen") => {
         name: "FAILED",
         column: failedProviderHttpStatus.name,
         filterCombination: "AND",
-        filters: [...filters, { column: "event_type", op: "=", value: "llm.error" }],
+        filters: [
+          ...filters,
+          { column: "event_type", op: "=", value: "llm.error" },
+          { column: "llm.error.code", op: "!=", value: "404" },
+        ],
       },
     ],
     formulas: [
-      { name: "ERROR", expression: "IF(GTE(SUM($SUCCESS, $FAILED), 50), DIV($FAILED, SUM($SUCCESS, $FAILED)), 0)" },
+      { name: "ERROR", expression: "IF(GTE(SUM($SUCCESS, $FAILED), 150), DIV($FAILED, SUM($SUCCESS, $FAILED)), 0)" },
     ],
     timeRange: 900,
   }).json
 }
 
-new honeycomb.Trigger("IncreasedModelHttpErrorsGo", {
+const modelLowTpsQuery = (product: "go" | "zen") => {
+  const filters = [
+    { column: "model", op: "exists" },
+    { column: "event_type", op: "=", value: "completions" },
+    { column: "user_agent", op: "contains", value: "opencode" },
+    { column: "isGoTier", op: "=", value: product === "go" ? "true" : "false" },
+    { column: "status", op: ">=", value: "200" },
+    { column: "status", op: "<", value: "400" },
+    { column: "tps.output", op: "exists" },
+  ]
+
+  return honeycombio.getQuerySpecificationOutput({
+    breakdowns: ["model"],
+    calculations: [
+      { op: "COUNT", name: "TOTAL", filterCombination: "AND", filters },
+      {
+        op: "P50",
+        name: "TPS",
+        column: "tps.output",
+        filterCombination: "AND",
+        filters,
+      },
+    ],
+    formulas: [{ name: "LOW_TPS", expression: "IF(GTE($TOTAL, 100), $TPS, 999)" }],
+    timeRange: 1800,
+  }).json
+}
+
+new honeycombio.Trigger("IncreasedModelHttpErrorsGo", {
   name: "Increased Model HTTP Errors [Go]",
   description,
+  disabled: alertsDisabled,
   queryJson: modelHttpErrorsQuery("go"),
   alertType: "on_change",
   frequency: 300,
@@ -130,9 +177,10 @@ new honeycomb.Trigger("IncreasedModelHttpErrorsGo", {
   ],
 })
 
-new honeycomb.Trigger("IncreasedModelHttpErrorsZen", {
+new honeycombio.Trigger("IncreasedModelHttpErrorsZen", {
   name: "Increased Model HTTP Errors [Zen]",
   description,
+  disabled: alertsDisabled,
   queryJson: modelHttpErrorsQuery("zen"),
   alertType: "on_change",
   frequency: 300,
@@ -149,10 +197,51 @@ new honeycomb.Trigger("IncreasedModelHttpErrorsZen", {
   ],
 })
 
-new honeycomb.Trigger("IncreasedProviderHttpErrorsGo", {
-  name: "Increased Provider HTTP Errors [Go]",
+new honeycombio.Trigger("LowModelTpsGo", {
+  name: "Low Model TPS [Go]",
   description,
-  queryJson: providerHttpErrorsQuery("go"),
+  disabled: alertsDisabled,
+  queryJson: modelLowTpsQuery("go"),
+  alertType: "on_change",
+  frequency: 600,
+  thresholds: [{ op: "<=", value: 10, exceededLimit: 1 }],
+  recipients: [
+    {
+      id: webhookRecipient.id,
+      notificationDetails: [
+        {
+          variables: [{ name: "type", value: "model_low_tps" }],
+        },
+      ],
+    },
+  ],
+})
+
+new honeycombio.Trigger("LowModelTpsZen", {
+  name: "Low Model TPS [Zen]",
+  description,
+  disabled: alertsDisabled,
+  queryJson: modelLowTpsQuery("zen"),
+  alertType: "on_change",
+  frequency: 600,
+  thresholds: [{ op: "<=", value: 10, exceededLimit: 1 }],
+  recipients: [
+    {
+      id: webhookRecipient.id,
+      notificationDetails: [
+        {
+          variables: [{ name: "type", value: "model_low_tps" }],
+        },
+      ],
+    },
+  ],
+})
+
+new honeycombio.Trigger("IncreasedProviderHttpErrors", {
+  name: "Increased Provider HTTP Errors",
+  description,
+  disabled: alertsDisabled,
+  queryJson: providerHttpErrorsQuery(),
   alertType: "on_change",
   frequency: 300,
   thresholds: [{ op: ">=", value: 0.7, exceededLimit: 1 }],
@@ -168,29 +257,11 @@ new honeycomb.Trigger("IncreasedProviderHttpErrorsGo", {
   ],
 })
 
-new honeycomb.Trigger("IncreasedProviderHttpErrorsZen", {
-  name: "Increased Provider HTTP Errors [Zen]",
-  description,
-  queryJson: providerHttpErrorsQuery("zen"),
-  alertType: "on_change",
-  frequency: 300,
-  thresholds: [{ op: ">=", value: 0.7, exceededLimit: 1 }],
-  recipients: [
-    {
-      id: webhookRecipient.id,
-      notificationDetails: [
-        {
-          variables: [{ name: "type", value: "provider_http_errors" }],
-        },
-      ],
-    },
-  ],
-})
-
-new honeycomb.Trigger("IncreasedFreeTierRequests", {
+new honeycombio.Trigger("IncreasedFreeTierRequests", {
   name: "Increased Free Tier Requests",
   description,
-  queryJson: honeycomb.getQuerySpecificationOutput({
+  disabled: alertsDisabled,
+  queryJson: honeycombio.getQuerySpecificationOutput({
     calculations: [{ op: "COUNT" }],
     filters: [
       { column: "event_type", op: "=", value: "completions" },

infra/secret.ts

@@ -7,5 +7,8 @@ sst.Linkable.wrap(random.RandomPassword, (resource) => ({
 export const SECRET = {
   R2AccessKey: new sst.Secret("R2AccessKey", "unknown"),
   R2SecretKey: new sst.Secret("R2SecretKey", "unknown"),
+  HoneycombApiKey: new sst.Secret("HONEYCOMB_API_KEY"),
   HoneycombWebhookSecret: new random.RandomPassword("HoneycombWebhookSecret", { length: 24 }),
+  UpstashRedisRestUrl: new sst.Secret("UpstashRedisRestUrl"),
+  UpstashRedisRestToken: new sst.Secret("UpstashRedisRestToken"),
 }

infra/stage.ts

@@ -5,6 +5,8 @@ export const domain = (() => {
 })()
 
 export const zoneID = "430ba34c138cfb5360826c4909f99be8"
+export const awsStage = $app.stage === "production" ? "production" : "dev"
+export const deployAws = $app.stage === awsStage
 
 new cloudflare.RegionalHostname("RegionalHostname", {
   hostname: domain,

infra/stats.ts

@@ -0,0 +1,207 @@
+import { lakeAthenaWorkgroup, lakeCatalog, lakeCluster, lakeQueryPermissions, lakeRegion, tableBucket } from "./lake"
+
+const domain = (() => {
+  if ($app.stage === "production") return "stats.opencode.ai"
+  if ($app.stage === "dev") return "stats.dev.opencode.ai"
+  return `stats.${$app.stage}.dev.opencode.ai`
+})()
+
+////////////////
+// LAKE
+////////////////
+
+const inferenceNamespace = new aws.s3tables.Namespace("LakeInferenceNamespace", {
+  namespace: "inference",
+  tableBucketArn: tableBucket.arn,
+})
+
+const inferenceEventTable = new aws.s3tables.Table(
+  "LakeInferenceEventTable",
+  {
+    name: "event",
+    namespace: inferenceNamespace.namespace,
+    tableBucketArn: inferenceNamespace.tableBucketArn,
+    format: "ICEBERG",
+    metadata: {
+      iceberg: {
+        schema: {
+          fields: [
+            { name: "event_timestamp", type: "string", required: false },
+            { name: "event_date", type: "string", required: false },
+            { name: "event_type", type: "string", required: false },
+            { name: "dataset", type: "string", required: false },
+            { name: "cf_continent", type: "string", required: false },
+            { name: "cf_country", type: "string", required: false },
+            { name: "cf_city", type: "string", required: false },
+            { name: "cf_region", type: "string", required: false },
+            { name: "cf_latitude", type: "double", required: false },
+            { name: "cf_longitude", type: "double", required: false },
+            { name: "cf_timezone", type: "string", required: false },
+            { name: "duration", type: "double", required: false },
+            { name: "request_length", type: "long", required: false },
+            { name: "status", type: "int", required: false },
+            { name: "ip", type: "string", required: false },
+            { name: "is_stream", type: "boolean", required: false },
+            { name: "session", type: "string", required: false },
+            { name: "request", type: "string", required: false },
+            { name: "client", type: "string", required: false },
+            { name: "user_agent", type: "string", required: false },
+            { name: "model_variant", type: "string", required: false },
+            { name: "source", type: "string", required: false },
+            { name: "provider", type: "string", required: false },
+            { name: "provider_model", type: "string", required: false },
+            { name: "model", type: "string", required: false },
+            { name: "llm_error_code", type: "int", required: false },
+            { name: "llm_error_message", type: "string", required: false },
+            { name: "error_response", type: "string", required: false },
+            { name: "error_type", type: "string", required: false },
+            { name: "error_message", type: "string", required: false },
+            { name: "error_cause", type: "string", required: false },
+            { name: "error_cause2", type: "string", required: false },
+            { name: "api_key", type: "string", required: false },
+            { name: "workspace", type: "string", required: false },
+            { name: "is_subscription", type: "boolean", required: false },
+            { name: "subscription", type: "string", required: false },
+            { name: "response_length", type: "long", required: false },
+            { name: "time_to_first_byte", type: "long", required: false },
+            { name: "timestamp_first_byte", type: "long", required: false },
+            { name: "timestamp_last_byte", type: "long", required: false },
+            { name: "tokens_input", type: "long", required: false },
+            { name: "tokens_output", type: "long", required: false },
+            { name: "tokens_reasoning", type: "long", required: false },
+            { name: "tokens_cache_read", type: "long", required: false },
+            { name: "tokens_cache_write_5m", type: "long", required: false },
+            { name: "tokens_cache_write_1h", type: "long", required: false },
+            { name: "cost_input_microcents", type: "long", required: false },
+            { name: "cost_output_microcents", type: "long", required: false },
+            { name: "cost_cache_read_microcents", type: "long", required: false },
+            { name: "cost_cache_write_microcents", type: "long", required: false },
+            { name: "cost_total_microcents", type: "long", required: false },
+            { name: "cost_input", type: "long", required: false },
+            { name: "cost_output", type: "long", required: false },
+            { name: "cost_cache_read", type: "long", required: false },
+            { name: "cost_cache_write_5m", type: "long", required: false },
+            { name: "cost_cache_write_1h", type: "long", required: false },
+            { name: "cost_total", type: "long", required: false },
+          ],
+        },
+      },
+    },
+  },
+  { deleteBeforeReplace: $app.stage !== "production" },
+)
+
+export const inferenceEvent = new sst.Linkable("InferenceEvent", {
+  properties: {
+    region: lakeRegion,
+    catalog: lakeCatalog,
+    database: inferenceNamespace.namespace,
+    table: inferenceEventTable.name,
+    tableBucket: tableBucket.name,
+    workgroup: lakeAthenaWorkgroup.name,
+  },
+})
+
+////////////////
+// DATABASE
+////////////////
+
+const cluster = planetscale.getDatabaseOutput({
+  name: "opencode-stats",
+  organization: "anomalyco",
+})
+
+const branch =
+  $app.stage === "production"
+    ? planetscale.getBranchOutput({
+        name: "production",
+        organization: cluster.organization,
+        database: cluster.name,
+      })
+    : new planetscale.Branch("StatsDatabaseBranch", {
+        database: cluster.name,
+        organization: cluster.organization,
+        name: $app.stage,
+        parentBranch: "production",
+      })
+
+const password = new planetscale.Password("StatsDatabasePassword", {
+  name: $app.stage,
+  database: cluster.name,
+  organization: cluster.organization,
+  branch: branch.name,
+})
+
+const databaseUrl = $interpolate`mysql://${password.username.apply(encodeURIComponent)}:${password.plaintext.apply(
+  encodeURIComponent,
+)}@${password.accessHostUrl}/${cluster.name}`
+
+export const database = new sst.Linkable("StatsDatabase", {
+  properties: {
+    host: password.accessHostUrl,
+    database: cluster.name,
+    username: password.username,
+    password: password.plaintext,
+    port: 3306,
+    url: databaseUrl,
+  },
+})
+
+new sst.x.DevCommand("StatsStudio", {
+  link: [database],
+  environment: {
+    DATABASE_URL: databaseUrl,
+  },
+  dev: {
+    command: "bun db:studio",
+    directory: "packages/stats/core",
+    autostart: false,
+  },
+})
+
+////////////////
+// APP
+////////////////
+
+// export const app = new sst.cloudflare.x.SolidStart("Stats", {
+//   path: "packages/stats/app",
+//   buildCommand: "bun run build",
+//   domain,
+//   link: [database],
+//   environment: {
+//     PUBLIC_URL: `https://${domain}`,
+//   },
+// })
+
+////////////////
+// SERVICES
+////////////////
+
+const statsSyncConfig = new sst.Linkable("StatsSyncConfig", {
+  properties: {
+    dataset: "zen",
+  },
+})
+
+export const statSync = new sst.aws.Service("StatsSyncService", {
+  cluster: lakeCluster,
+  architecture: "arm64",
+  cpu: "0.25 vCPU",
+  memory: "0.5 GB",
+  image: {
+    context: ".",
+    dockerfile: "packages/stats/server/Dockerfile",
+  },
+  command: ["bun", "src/stat-sync.ts"],
+  link: [database, inferenceEvent, statsSyncConfig],
+  permissions: lakeQueryPermissions,
+  scaling: {
+    min: 1,
+    max: 1,
+  },
+  dev: {
+    command: "bun src/stat-sync.ts",
+    directory: "packages/stats/server",
+    autostart: false,
+  },
+})

nix/desktop.nix

@@ -1,29 +1,19 @@
 {
   lib,
   stdenv,
-  rustPlatform,
-  pkg-config,
-  cargo-tauri,
   bun,
   nodejs,
-  cargo,
-  rustc,
-  jq,
-  wrapGAppsHook4,
+  darwin,
+  electron_41,
   makeWrapper,
-  dbus,
-  glib,
-  gtk4,
-  libsoup_3,
-  librsvg,
-  libappindicator,
-  glib-networking,
-  openssl,
-  webkitgtk_4_1,
-  gst_all_1,
+  writableTmpDirAsHomeHook,
+  autoPatchelfHook,
   opencode,
 }:
-rustPlatform.buildRustPackage (finalAttrs: {
+let
+  electron = electron_41;
+in
+stdenv.mkDerivation (finalAttrs: {
   pname = "opencode-desktop";
   inherit (opencode)
     version
@@ -32,69 +22,89 @@ rustPlatform.buildRustPackage (finalAttrs: {
     patches
     ;
 
-  cargoRoot = "packages/desktop/src-tauri";
-  cargoLock.lockFile = ../packages/desktop/src-tauri/Cargo.lock;
-  buildAndTestSubdir = finalAttrs.cargoRoot;
-
   nativeBuildInputs = [
-    pkg-config
-    cargo-tauri.hook
     bun
-    nodejs # for patchShebangs node_modules
-    cargo
-    rustc
-    jq
+    nodejs
     makeWrapper
-  ] ++ lib.optionals stdenv.hostPlatform.isLinux [ wrapGAppsHook4 ];
-
-  buildInputs = lib.optionals stdenv.isLinux [
-    dbus
-    glib
-    gtk4
-    libsoup_3
-    librsvg
-    libappindicator
-    glib-networking
-    openssl
-    webkitgtk_4_1
-    gst_all_1.gstreamer
-    gst_all_1.gst-plugins-base
-    gst_all_1.gst-plugins-good
-    gst_all_1.gst-plugins-bad
+    writableTmpDirAsHomeHook
+  ] ++ lib.optionals stdenv.hostPlatform.isLinux [
+    autoPatchelfHook
+  ] ++ lib.optionals stdenv.hostPlatform.isDarwin [
+    # Ad-hoc sign the .app: --config.mac.identity=null below skips signing.
+    darwin.autoSignDarwinBinariesHook
   ];
 
-  strictDeps = true;
+  buildInputs = lib.optionals stdenv.hostPlatform.isLinux [
+    (lib.getLib stdenv.cc.cc)
+  ];
+
+  env = opencode.env // {
+    ELECTRON_SKIP_BINARY_DOWNLOAD = "1";
+  };
+
+  # https://github.com/electron/electron/issues/31121
+  # mac builds use a .app bundle which doesnt have this issue
+  postPatch = lib.optionalString stdenv.isLinux ''
+    BASE_PATH=packages/desktop
+    FILES=(src/main/windows.ts)
+    for file in "''${FILES[@]}"; do
+      substituteInPlace $BASE_PATH/$file \
+        --replace-fail "process.resourcesPath" "'$out/opt/opencode-desktop/resources'"
+    done
+  '';
 
   preBuild = ''
-    cp -a ${finalAttrs.node_modules}/{node_modules,packages} .
-    chmod -R u+w node_modules packages
+    cp -r "${electron.dist}" $HOME/.electron-dist
+    chmod -R u+w $HOME/.electron-dist
+
+    cp -R ${finalAttrs.node_modules}/. .
     patchShebangs node_modules
-    patchShebangs packages/desktop/node_modules
-
-    mkdir -p packages/desktop/src-tauri/sidecars
-    cp ${opencode}/bin/opencode packages/desktop/src-tauri/sidecars/opencode-cli-${stdenv.hostPlatform.rust.rustcTarget}
+    patchShebangs packages/*/node_modules
   '';
 
-  # see publish-tauri job in .github/workflows/publish.yml
-  tauriBuildFlags = [
-    "--config"
-    "tauri.prod.conf.json"
-    "--no-sign" # no code signing or auto updates
+  buildPhase = ''
+    runHook preBuild
+
+    cd packages/desktop
+
+    bun run build
+    npx electron-builder --dir \
+      --config electron-builder.config.ts \
+      --config.mac.identity=null \
+      --config.electronDist="$HOME/.electron-dist"
+
+    runHook postBuild
+  '';
+
+  installPhase =
+    ''
+      runHook preInstall
+    ''
+    + lib.optionalString stdenv.hostPlatform.isDarwin ''
+      mkdir -p $out/Applications
+      mv dist/mac*/*.app $out/Applications
+      makeWrapper "$out/Applications/OpenCode.app/Contents/MacOS/OpenCode" $out/bin/opencode-desktop
+    ''
+    + lib.optionalString stdenv.hostPlatform.isLinux ''
+      mkdir -p $out/opt/opencode-desktop
+      cp -r dist/linux*-unpacked/{resources,LICENSE*} $out/opt/opencode-desktop
+      makeWrapper ${lib.getExe electron} $out/bin/opencode-desktop \
+        --inherit-argv0 \
+        --set ELECTRON_FORCE_IS_PACKAGED 1 \
+        --add-flags $out/opt/opencode-desktop/resources/app.asar \
+        --add-flags "\''${NIXOS_OZONE_WL:+\''${WAYLAND_DISPLAY:+--ozone-platform-hint=auto --enable-features=WaylandWindowDecorations --enable-wayland-ime=true}}"
+    ''
+    + ''
+      runHook postInstall
+    '';
+
+  autoPatchelfIgnoreMissingDeps = [
+    "libc.musl-x86_64.so.1"
   ];
 
-  # FIXME: workaround for concerns about case insensitive filesystems
-  # should be removed once binary is renamed or decided otherwise
-  # darwin output is a .app bundle so no conflict
-  postFixup = lib.optionalString stdenv.hostPlatform.isLinux ''
-    mv $out/bin/OpenCode $out/bin/opencode-desktop
-    sed -i 's|^Exec=OpenCode$|Exec=opencode-desktop|' $out/share/applications/OpenCode.desktop
-  '';
-
   meta = {
     description = "OpenCode Desktop App";
-    homepage = "https://opencode.ai";
-    license = lib.licenses.mit;
     mainProgram = "opencode-desktop";
-    inherit (opencode.meta) platforms;
+    inherit (opencode.meta) homepage license platforms;
   };
 })

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-MUHog06sZEi6bXR1m8exdkjSNW9bHEv9bPQXACJ7SFw=",
-    "aarch64-linux": "sha256-3dwdZ3It++OsdGT8xMOQ10Arz8eeODp/LXOrI4DLEhY=",
-    "aarch64-darwin": "sha256-TmUPGDCewjsrT13npVH6B55J43NKKut67p/HgPJpQNM=",
-    "x86_64-darwin": "sha256-j8I7t3MZoUQUMFRWyaFO75TRbAw5TauSZAa4yKOHFMA="
+    "x86_64-linux": "sha256-70om2TEJYJJOcf9lqex+Sxs27c1SVVgN7FNkLbTXBR0=",
+    "aarch64-linux": "sha256-/xTsjAFl6TmydJFXETctBoRePIFAkMyxv0HLWHFymJg=",
+    "aarch64-darwin": "sha256-/xbFzrnScm1x4xuz2rEJyyjockDMIIyqJtxm3Axghbg=",
+    "x86_64-darwin": "sha256-ZbJDPhmcvBlY80CPmzygw4S8mjdR+d/UyL+3R3nhZtM="
   }
 }

nix/opencode.nix

@@ -40,7 +40,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";
+  env.OPENCODE_CHANNEL = "prod";
 
   buildPhase = ''
     runHook preBuild
@@ -89,11 +89,12 @@ stdenvNoCC.mkDerivation (finalAttrs: {
 
   passthru = {
     jsonschema = "${placeholder "out"}/share/opencode/schema.json";
+    env = finalAttrs.env;
   };
 
   meta = {
     description = "The open source coding agent";
-    homepage = "https://opencode.ai/";
+    homepage = "https://opencode.ai";
     license = lib.licenses.mit;
     mainProgram = "opencode";
     inherit (node_modules.meta) platforms;

package.json

@@ -4,12 +4,13 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.13",
+  "packageManager": "bun@1.3.14",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "dev:desktop": "bun --cwd packages/desktop dev",
     "dev:web": "bun --cwd packages/app dev",
     "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",
+    "dev:stats": "bun sst shell --stage=production -- bun run --cwd packages/stats/app dev",
     "dev:storybook": "bun --cwd packages/storybook storybook",
     "lint": "oxlint",
     "typecheck": "bun turbo typecheck",
@@ -17,27 +18,29 @@
     "postinstall": "bun run --cwd packages/opencode fix-node-pty",
     "prepare": "husky",
     "random": "echo 'Random script'",
-    "hello": "echo 'Hello World!'",
+    "sso": "aws sso login --sso-session=opencode --no-browser",
     "test": "echo 'do not run tests from root' && exit 1"
   },
   "workspaces": {
     "packages": [
       "packages/*",
       "packages/console/*",
+      "packages/stats/*",
       "packages/sdk/js",
       "packages/slack"
     ],
     "catalog": {
-      "@effect/opentelemetry": "4.0.0-beta.65",
-      "@effect/platform-node": "4.0.0-beta.65",
+      "@effect/opentelemetry": "4.0.0-beta.66",
+      "@effect/platform-node": "4.0.0-beta.66",
+      "@effect/sql-sqlite-bun": "4.0.0-beta.66",
       "@npmcli/arborist": "9.4.0",
-      "@types/bun": "1.3.12",
+      "@types/bun": "1.3.13",
       "@types/cross-spawn": "6.0.6",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.2.6",
-      "@opentui/keymap": "0.2.6",
-      "@opentui/solid": "0.2.6",
+      "@opentui/core": "0.2.16",
+      "@opentui/keymap": "0.2.16",
+      "@opentui/solid": "0.2.16",
       "ulid": "3.0.1",
       "@kobalte/core": "0.13.11",
       "@types/luxon": "3.7.1",
@@ -53,9 +56,9 @@
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
       "dompurify": "3.3.1",
-      "drizzle-kit": "1.0.0-beta.19-d95b7a4",
-      "drizzle-orm": "1.0.0-beta.19-d95b7a4",
-      "effect": "4.0.0-beta.65",
+      "drizzle-kit": "1.0.0-rc.2",
+      "drizzle-orm": "1.0.0-rc.2",
+      "effect": "4.0.0-beta.66",
       "ai": "6.0.168",
       "cross-spawn": "7.0.6",
       "hono": "4.10.7",
@@ -71,10 +74,11 @@
       "@typescript/native-preview": "7.0.0-dev.20251207.1",
       "zod": "4.1.8",
       "remeda": "2.26.0",
+      "sst": "4.13.1",
       "shiki": "3.20.0",
       "solid-list": "0.3.0",
       "tailwindcss": "4.1.11",
-      "virtua": "0.42.3",
+      "virtua": "0.49.1",
       "vite": "7.1.4",
       "@solidjs/meta": "0.29.4",
       "@solidjs/router": "0.15.4",
@@ -97,7 +101,7 @@
     "oxlint-tsgolint": "0.21.0",
     "prettier": "3.6.2",
     "semver": "^7.6.0",
-    "sst": "3.18.10",
+    "sst": "catalog:",
     "turbo": "2.8.13"
   },
   "dependencies": {
@@ -128,6 +132,9 @@
     "electron"
   ],
   "overrides": {
+    "@opentui/core": "catalog:",
+    "@opentui/keymap": "catalog:",
+    "@opentui/solid": "catalog:",
     "@types/bun": "catalog:",
     "@types/node": "catalog:"
   },
@@ -135,6 +142,9 @@
     "@npmcli/agent@4.0.0": "patches/@npmcli%2Fagent@4.0.0.patch",
     "@silvia-odwyer/photon-node@0.3.4": "patches/@silvia-odwyer%2Fphoton-node@0.3.4.patch",
     "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
-    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch"
+    "solid-js@1.9.10": "patches/solid-js@1.9.10.patch",
+    "virtua@0.49.1": "patches/virtua@0.49.1.patch",
+    "@ai-sdk/xai@3.0.82": "patches/@ai-sdk%2Fxai@3.0.82.patch",
+    "gcp-metadata@8.1.2": "patches/gcp-metadata@8.1.2.patch"
   }
 }

packages/app/e2e/regression/session-timeline-collapse-state.spec.ts

@@ -0,0 +1,352 @@
+import { expect, test, type Locator, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const directory = "C:/OpenCode/TimelineStateRegression"
+const projectID = "proj_timeline_state_regression"
+const sessionID = "ses_timeline_state_regression"
+const userMessageID = "msg_user_regression"
+const assistantMessageID = "msg_assistant_regression"
+const editPartID = "prt_0001_edit"
+const textPartID = "prt_9999_text"
+const title = "Timeline collapse state regression"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+
+type EventPayload = {
+  directory: string
+  payload: Record<string, unknown>
+}
+
+declare global {
+  interface Window {
+    __timelineDiffProbe: {
+      reset: () => void
+      shadowRoots: () => number
+    }
+  }
+}
+
+const userMessage = {
+  info: {
+    id: userMessageID,
+    sessionID,
+    role: "user",
+    time: { created: 1700000000000 },
+    summary: { diffs: [] },
+    agent: "build",
+    model,
+  },
+  parts: [
+    {
+      id: "prt_user_text",
+      sessionID,
+      messageID: userMessageID,
+      type: "text",
+      text: "Please edit the file.",
+    },
+  ],
+}
+
+const editPart = {
+  id: editPartID,
+  sessionID,
+  messageID: assistantMessageID,
+  type: "tool",
+  callID: "call_edit_regression",
+  tool: "edit",
+  state: {
+    status: "completed",
+    input: { filePath: "src/regression.ts" },
+    output: "Edited src/regression.ts",
+    title: "src/regression.ts",
+    metadata: {
+      filediff: {
+        file: "src/regression.ts",
+        additions: 1,
+        deletions: 1,
+        before: "export const value = 'before'\n",
+        after: "export const value = 'after'\n",
+      },
+      diff: "diff --git a/src/regression.ts b/src/regression.ts\n-export const value = 'before'\n+export const value = 'after'\n",
+    },
+    time: { start: 1700000001000, end: 1700000002000 },
+  },
+}
+
+const streamedTextPart = {
+  id: textPartID,
+  sessionID,
+  messageID: assistantMessageID,
+  type: "text",
+  text: "Streaming added a later assistant text part.",
+}
+
+const assistantMessage = {
+  info: {
+    id: assistantMessageID,
+    sessionID,
+    role: "assistant",
+    time: { created: 1700000001000 },
+    parentID: userMessageID,
+    modelID: model.modelID,
+    providerID: model.providerID,
+    mode: "build",
+    agent: "build",
+    path: { cwd: directory, root: directory },
+    cost: 0.01,
+    tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+    variant: "max",
+  },
+  parts: [editPart],
+}
+
+test.describe("regression: session timeline local row state", () => {
+  test("keeps a manually collapsed tool collapsed when later assistant content streams", async ({ page }) => {
+    const events: EventPayload[] = []
+    await mockServer(page, events)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expect(page.getByRole("heading", { name: title })).toBeVisible()
+
+    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
+    await expect(wrapper).toBeVisible()
+    await expectExpanded(wrapper, true)
+
+    await wrapper.evaluate((element) => {
+      ;(element as HTMLElement).dataset.regressionMarker = "before-stream"
+    })
+    await wrapper.locator('[data-slot="collapsible-trigger"]').first().click()
+    await expectExpanded(wrapper, false)
+
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: streamedTextPart },
+      },
+    })
+
+    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
+
+    expect(await readToolState(page)).toEqual({
+      expanded: false,
+      row: "AssistantPart",
+      streamedTextVisible: true,
+    })
+  })
+
+  test("does not remount an edit diff when sibling parts or diff counts update", async ({ page }) => {
+    const events: EventPayload[] = []
+    await installDiffProbe(page)
+    await mockServer(page, events)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expect(page.getByRole("heading", { name: title })).toBeVisible()
+
+    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
+    await expect(wrapper).toBeVisible()
+    await expect(wrapper.locator('[data-component="file"][data-mode="diff"]').first()).toBeVisible()
+    await markDiffProbe(page)
+
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: streamedTextPart },
+      },
+    })
+
+    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
+    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
+
+    await markDiffProbe(page)
+    events.push({
+      directory,
+      payload: {
+        type: "message.part.updated",
+        properties: { part: editPartWithAdditions(2) },
+      },
+    })
+
+    await expect(wrapper.locator('[data-slot="diff-changes-additions"]').filter({ hasText: "+2" }).first()).toBeVisible(
+      { timeout: 10_000 },
+    )
+    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
+  })
+})
+
+async function configurePage(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+}
+
+async function expectExpanded(locator: Locator, expected: boolean) {
+  await expect.poll(() => locator.evaluate(readExpanded)).toBe(expected)
+}
+
+async function readToolState(page: Page) {
+  return page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate(
+      (element, textPartID) => ({
+        expanded: (() => {
+          const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
+          const aria = trigger?.getAttribute("aria-expanded")
+          if (aria === "true") return true
+          if (aria === "false") return false
+
+          const root = element.querySelector('[data-component="collapsible"]')
+          if (root?.hasAttribute("data-expanded")) return true
+          if (root?.hasAttribute("data-closed")) return false
+
+          const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
+          return !!content && content.getBoundingClientRect().height > 0
+        })(),
+        row: element.closest("[data-timeline-row]")?.getAttribute("data-timeline-row"),
+        streamedTextVisible: !!document.querySelector(`[data-timeline-part-id="${textPartID}"]`),
+      }),
+      textPartID,
+    )
+}
+
+async function installDiffProbe(page: Page) {
+  await page.addInitScript(() => {
+    let shadowRootCount = 0
+    const attachShadow = Element.prototype.attachShadow
+    Element.prototype.attachShadow = function (init) {
+      shadowRootCount += 1
+      return attachShadow.call(this, init)
+    }
+    window.__timelineDiffProbe = {
+      reset: () => {
+        shadowRootCount = 0
+      },
+      shadowRoots: () => shadowRootCount,
+    }
+  })
+}
+
+async function markDiffProbe(page: Page) {
+  await page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate((element) => {
+      const tool = element as HTMLElement
+      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
+      if (!file) throw new Error("missing edit diff file")
+
+      tool.dataset.timelineProbe = "before"
+      file.dataset.timelineProbe = "before"
+      window.__timelineDiffProbe.reset()
+    })
+}
+
+async function readDiffProbe(page: Page) {
+  return page
+    .locator(`[data-timeline-part-id="${editPartID}"]`)
+    .first()
+    .evaluate((element) => {
+      const tool = element as HTMLElement
+      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
+      return {
+        fileMarker: file?.dataset.timelineProbe,
+        shadowRoots: window.__timelineDiffProbe.shadowRoots(),
+        toolMarker: tool.dataset.timelineProbe,
+      }
+    })
+}
+
+function editPartWithAdditions(additions: number) {
+  return {
+    ...editPart,
+    state: {
+      ...editPart.state,
+      metadata: {
+        ...editPart.state.metadata,
+        filediff: {
+          ...editPart.state.metadata.filediff,
+          additions,
+        },
+      },
+    },
+  }
+}
+
+function readExpanded(element: Element) {
+  const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
+  const aria = trigger?.getAttribute("aria-expanded")
+  if (aria === "true") return true
+  if (aria === "false") return false
+
+  const root = element.querySelector('[data-component="collapsible"]')
+  if (root?.hasAttribute("data-expanded")) return true
+  if (root?.hasAttribute("data-closed")) return false
+
+  const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
+  return !!content && content.getBoundingClientRect().height > 0
+}
+
+async function mockServer(page: Page, events: EventPayload[]) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: project(),
+    provider: provider(),
+    sessions: [session()],
+    pageMessages: () => ({ items: [userMessage, assistantMessage] }),
+    events: () => events.splice(0),
+  })
+}
+
+function project() {
+  return {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "timeline-state-regression",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  }
+}
+
+function session() {
+  return {
+    id: sessionID,
+    slug: "timeline-state-regression",
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created: 1700000000000, updated: 1700000000000 },
+  }
+}
+
+function provider() {
+  return {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  }
+}
+
+function base64Encode(value: string) {
+  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}

packages/app/e2e/regression/session-timeline-context-resize.spec.ts

@@ -0,0 +1,267 @@
+import { expect, test, type Page } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const directory = "C:/OpenCode/ContextResizeRegression"
+const projectID = "proj_context_resize_regression"
+const sessionID = "ses_context_resize_regression"
+const title = "Context resize regression"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+const contextIDs = ["prt_0100_read", "prt_0101_glob", "prt_0102_grep", "prt_0103_list"]
+const followingTextID = "prt_0104_text"
+
+type Message = {
+  info: Record<string, unknown> & { id: string; role: "user" | "assistant" }
+  parts: Record<string, unknown>[]
+}
+
+const messages = [...Array.from({ length: 8 }, (_, index) => turn(index, false)).flat(), ...turn(10, true)]
+
+test.describe("regression: session timeline context group resize", () => {
+  test("remeasures a recent explored context group before the next paint", async ({ page }) => {
+    await page.setViewportSize({ width: 1400, height: 900 })
+    await mockServer(page)
+    await configurePage(page)
+
+    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+    await expect(page.getByRole("heading", { name: title })).toBeVisible()
+    await expect(page.locator(`[data-timeline-part-ids="${contextIDs.join(",")}"]`).first()).toBeVisible()
+    await expect(page.locator(`[data-timeline-part-id="${followingTextID}"]`).first()).toBeVisible()
+    await settle(page)
+
+    const samples = await sampleExpansion(page)
+    const visibleOverlap = samples.filter((sample) => sample.frame >= 1 && sample.overlap > 0.5)
+
+    console.log("context resize samples", JSON.stringify(samples, null, 2))
+
+    expect(samples[0]?.overlap).toBe(0)
+    expect(visibleOverlap).toEqual([])
+    expect(samples.at(-1)?.expanded).toBe("true")
+  })
+})
+
+async function configurePage(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+}
+
+async function sampleExpansion(page: Page) {
+  return page.evaluate(
+    ({ contextIDs, followingTextID }) =>
+      new Promise<
+        {
+          frame: number
+          label: string
+          scrollTop: number
+          scrollHeight: number
+          contextBottom: number
+          textTop: number
+          overlap: number
+          gap: number
+          expanded: string | null
+        }[]
+      >((resolve) => {
+        const context = document.querySelector<HTMLElement>(`[data-timeline-part-ids="${contextIDs.join(",")}"]`)
+        const text = document.querySelector<HTMLElement>(`[data-timeline-part-id="${followingTextID}"]`)
+        const scroller = context?.closest<HTMLElement>(".scroll-view__viewport")
+        const trigger = context?.querySelector<HTMLElement>('[data-slot="collapsible-trigger"]')
+        const contextRow = context?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
+        const textRow = text?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
+        if (!context || !text || !scroller || !trigger || !contextRow || !textRow)
+          throw new Error("missing regression nodes")
+
+        scroller.scrollTop = scroller.scrollHeight
+        const samples: {
+          frame: number
+          label: string
+          scrollTop: number
+          scrollHeight: number
+          contextBottom: number
+          textTop: number
+          overlap: number
+          gap: number
+          expanded: string | null
+        }[] = []
+        const capture = (frame: number, label: string) => {
+          const contextRect = contextRow.getBoundingClientRect()
+          const textRect = textRow.getBoundingClientRect()
+          samples.push({
+            frame,
+            label,
+            scrollTop: Math.round(scroller.scrollTop * 10) / 10,
+            scrollHeight: Math.round(scroller.scrollHeight * 10) / 10,
+            contextBottom: Math.round(contextRect.bottom * 10) / 10,
+            textTop: Math.round(textRect.top * 10) / 10,
+            overlap: Math.max(0, Math.round((contextRect.bottom - textRect.top) * 10) / 10),
+            gap: Math.max(0, Math.round((textRect.top - contextRect.bottom) * 10) / 10),
+            expanded: trigger.getAttribute("aria-expanded"),
+          })
+        }
+
+        capture(-1, "before")
+        trigger.click()
+        capture(0, "sync-after-click")
+
+        let frame = 1
+        const tick = () => {
+          capture(frame, "raf")
+          frame += 1
+          if (frame > 8) {
+            resolve(samples)
+            return
+          }
+          requestAnimationFrame(tick)
+        }
+        requestAnimationFrame(tick)
+      }),
+    { contextIDs, followingTextID },
+  )
+}
+
+function turn(index: number, target: boolean): Message[] {
+  const userID = id("msg_user", index)
+  const assistantID = id("msg_assistant", index)
+  return [
+    {
+      info: {
+        id: userID,
+        sessionID,
+        role: "user",
+        time: { created: 1700000000000 + index * 10_000 },
+        summary: { diffs: [] },
+        agent: "build",
+        model,
+      },
+      parts: [{ id: id("prt_user", index), sessionID, messageID: userID, type: "text", text: `User message ${index}` }],
+    },
+    {
+      info: {
+        id: assistantID,
+        sessionID,
+        role: "assistant",
+        time: { created: 1700000000000 + index * 10_000 + 1_000, completed: 1700000000000 + index * 10_000 + 2_000 },
+        parentID: userID,
+        modelID: model.modelID,
+        providerID: model.providerID,
+        mode: "build",
+        agent: "build",
+        path: { cwd: directory, root: directory },
+        cost: 0.01,
+        tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+        variant: "max",
+        finish: "stop",
+      },
+      parts: target
+        ? [
+            contextTool(contextIDs[0]!, assistantID, "read", { filePath: "src/recent-a.ts", offset: 0, limit: 120 }),
+            contextTool(contextIDs[1]!, assistantID, "glob", { path: directory, pattern: "**/*.ts" }),
+            contextTool(contextIDs[2]!, assistantID, "grep", { path: directory, pattern: "Explored", include: "*.ts" }),
+            contextTool(contextIDs[3]!, assistantID, "list", { path: "src" }),
+            {
+              id: followingTextID,
+              sessionID,
+              messageID: assistantID,
+              type: "text",
+              text: "This assistant text is immediately after the explored context group.",
+            },
+          ]
+        : [
+            {
+              id: id("prt_text", index),
+              sessionID,
+              messageID: assistantID,
+              type: "text",
+              text: `Assistant filler ${index}. ${"filler ".repeat(60)}`,
+            },
+          ],
+    },
+  ]
+}
+
+function contextTool(partID: string, messageID: string, tool: string, input: Record<string, unknown>) {
+  return {
+    id: partID,
+    sessionID,
+    messageID,
+    type: "tool",
+    callID: `call_${partID}`,
+    tool,
+    state: {
+      status: "completed",
+      input,
+      output: `Completed ${tool}.\n${"detail line\n".repeat(8)}`,
+      title: input.filePath || input.path || input.pattern || "completed",
+      metadata: {},
+      time: { start: 1700000000000, end: 1700000000100 },
+    },
+  }
+}
+
+async function mockServer(page: Page) {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: project(),
+    provider: provider(),
+    sessions: [session()],
+    pageMessages: () => ({ items: messages }),
+  })
+}
+
+async function settle(page: Page) {
+  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))
+}
+
+function id(prefix: string, index: number) {
+  return `${prefix}_${String(index).padStart(4, "0")}`
+}
+
+function project() {
+  return {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "context-resize-regression",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  }
+}
+
+function session() {
+  return {
+    id: sessionID,
+    slug: "context-resize-regression",
+    projectID,
+    directory,
+    title,
+    version: "dev",
+    time: { created: 1700000000000, updated: 1700000000000 },
+  }
+}
+
+function provider() {
+  return {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  }
+}
+
+function base64Encode(value: string) {
+  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}

packages/app/e2e/smoke/session-timeline.fixture.ts

@@ -0,0 +1,314 @@
+const words = [
+  "alpha",
+  "bravo",
+  "charlie",
+  "delta",
+  "echo",
+  "foxtrot",
+  "golf",
+  "hotel",
+  "india",
+  "juliet",
+  "kilo",
+  "lima",
+  "metro",
+  "nova",
+  "orbit",
+  "pixel",
+  "quartz",
+  "river",
+  "signal",
+  "vector",
+]
+
+const sourceID = "ses_smoke_source"
+const targetID = "ses_smoke_target"
+const directory = "C:/OpenCode/SmokeProject"
+const projectID = "proj_smoke_timeline"
+const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
+
+type MessageInfo = Record<string, unknown> & { id: string; role: "user" | "assistant" }
+type MessagePart = Record<string, unknown> & { id: string; type: string; text?: string; tool?: string }
+type Message = { info: MessageInfo; parts: MessagePart[] }
+
+function lorem(seed: number, length: number) {
+  let out = ""
+  let i = seed
+  while (out.length < length) {
+    const word = words[i % words.length]
+    out += (out ? " " : "") + word
+    if (i % 17 === 0) out += ".\n\n"
+    i += 7
+  }
+  return out.slice(0, length)
+}
+
+function id(prefix: string, value: number) {
+  return `${prefix}_smoke_${String(value).padStart(4, "0")}`
+}
+
+function userMessage(sessionID: string, index: number, textLength: number, diffs: unknown[] = []): Message {
+  const messageID = id("msg_user", index)
+  return {
+    info: {
+      id: messageID,
+      sessionID,
+      role: "user",
+      time: { created: 1700000000000 + index * 10_000 },
+      summary: { diffs },
+      agent: "build",
+      model,
+    },
+    parts: [
+      {
+        id: id("prt_user_text", index),
+        sessionID,
+        messageID,
+        type: "text",
+        text: lorem(index, textLength),
+      },
+    ],
+  }
+}
+
+function assistantMessage(sessionID: string, index: number, parentID: string, parts: MessagePart[]): Message {
+  const messageID = id("msg_assistant", index)
+  return {
+    info: {
+      id: messageID,
+      sessionID,
+      role: "assistant",
+      time: { created: 1700000000000 + index * 10_000 + 1_000, completed: 1700000000000 + index * 10_000 + 8_000 },
+      parentID,
+      modelID: model.modelID,
+      providerID: model.providerID,
+      mode: "build",
+      agent: "build",
+      path: { cwd: directory, root: directory },
+      cost: 0.01,
+      tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
+      variant: "max",
+      finish: "stop",
+    },
+    parts: parts.map((part) => ({
+      ...part,
+      sessionID,
+      messageID,
+    })),
+  }
+}
+
+function textPart(index: number, partIndex: number, length: number): MessagePart {
+  return { id: id(`prt_text_${partIndex}`, index), type: "text", text: lorem(index * 13 + partIndex, length) }
+}
+
+function reasoningPart(index: number, partIndex: number, length: number): MessagePart {
+  return {
+    id: id(`prt_reasoning_${partIndex}`, index),
+    type: "reasoning",
+    text: lorem(index * 19 + partIndex, length),
+    time: { start: 1700000000000 + index * 10_000, end: 1700000000000 + index * 10_000 + 500 },
+  }
+}
+
+function toolPart(
+  index: number,
+  partIndex: number,
+  tool: string,
+  input: Record<string, unknown>,
+  outputLength = 160,
+): MessagePart {
+  const metadata =
+    tool === "apply_patch"
+      ? { files: [patchFile(index, "update"), patchFile(index + 1, index % 2 === 0 ? "add" : "delete")] }
+      : tool === "edit" || tool === "write"
+        ? {
+            filediff: fileDiff(String(input.filePath ?? `src/generated/file-${index}.ts`), index),
+            diff: patch(index, outputLength),
+            preview: patch(index + 1, 420),
+          }
+        : tool === "question"
+          ? { answers: [["Proceed"], ["Keep sample output"]] }
+          : {}
+  return {
+    id: id(`prt_tool_${tool}_${partIndex}`, index),
+    type: "tool",
+    callID: id("call", index * 10 + partIndex),
+    tool,
+    state: {
+      status: "completed",
+      input,
+      output: lorem(index * 23 + partIndex, outputLength),
+      title: tool === "bash" ? "Verify generated output" : input.filePath || input.path || input.pattern || "completed",
+      metadata,
+      time: { start: 1700000000000 + index * 10_000, end: 1700000000000 + index * 10_000 + 400 },
+    },
+  }
+}
+
+function patchFile(seed: number, type: "add" | "update" | "delete") {
+  return {
+    filePath: `src/generated/patch-${seed}.ts`,
+    relativePath: `src/generated/patch-${seed}.ts`,
+    type,
+    additions: (seed % 7) + 1,
+    deletions: type === "add" ? 0 : seed % 4,
+    patch: patch(seed, 520),
+    before: type === "add" ? undefined : code(seed, 18),
+    after: type === "delete" ? undefined : code(seed + 1, 24),
+  }
+}
+
+function fileDiff(file: string, seed: number) {
+  return {
+    file,
+    additions: (seed % 9) + 1,
+    deletions: seed % 4,
+    before: code(seed, 32),
+    after: code(seed + 1, 38),
+  }
+}
+
+function patch(seed: number, length: number) {
+  return `diff --git a/src/generated/file-${seed}.ts b/src/generated/file-${seed}.ts\n+${lorem(seed, length).replace(/\n/g, "\n+")}`
+}
+
+function code(seed: number, lines: number) {
+  return Array.from({ length: lines }, (_, index) => `export const value${index} = "${lorem(seed + index, 32)}"`).join(
+    "\n",
+  )
+}
+
+function turn(index: number): Message[] {
+  const diff = index % 9 === 0 ? [fileDiff(`src/generated/summary-${index}.ts`, index)] : []
+  const user = userMessage(targetID, index, 100 + (index % 4) * 80, diff)
+  const parts = [
+    ...(index % 5 === 0 ? [reasoningPart(index, 0, 420)] : []),
+    ...(index % 3 === 0
+      ? [
+          toolPart(index, 0, "read", { filePath: `src/generated/file-${index}.ts`, offset: 0, limit: 80 }, 220),
+          toolPart(index, 5, "glob", { path: directory, pattern: `**/*sample-${index}*.ts` }, 140),
+          toolPart(index, 1, "grep", { path: directory, pattern: `sample-${index}`, include: "*.ts" }, 180),
+          toolPart(index, 6, "list", { path: `src/generated/${index}` }, 120),
+        ]
+      : []),
+    textPart(index, 2, 160 + (index % 6) * 90),
+    ...(index % 4 === 0 ? [toolPart(index, 3, "edit", { filePath: `src/generated/file-${index}.ts` }, 700)] : []),
+    ...(index % 6 === 0
+      ? [toolPart(index, 7, "write", { filePath: `src/generated/write-${index}.ts`, content: code(index, 28) }, 560)]
+      : []),
+    ...(index % 8 === 0
+      ? [toolPart(index, 8, "apply_patch", { files: [`src/generated/patch-${index}.ts`] }, 620)]
+      : []),
+    ...(index % 7 === 0
+      ? [toolPart(index, 4, "bash", { command: "bun typecheck", description: "Verify generated output" }, 620)]
+      : []),
+    ...(index % 10 === 0 ? [toolPart(index, 9, "webfetch", { url: "https://example.com/docs/sample" }, 120)] : []),
+    ...(index % 11 === 0 ? [toolPart(index, 10, "websearch", { query: "sample movement notes" }, 240)] : []),
+    ...(index % 13 === 0
+      ? [
+          toolPart(
+            index,
+            11,
+            "question",
+            { questions: [{ question: "Use generated fixture?" }, { question: "Keep same row shape?" }] },
+            120,
+          ),
+        ]
+      : []),
+    ...(index % 17 === 0
+      ? [toolPart(index, 12, "task", { description: "Inspect generated fixture", subagent_type: "explore" }, 160)]
+      : []),
+  ]
+  return [user, assistantMessage(targetID, index, user.info.id, parts)]
+}
+
+const targetMessages = Array.from({ length: 72 }, (_, index) => turn(index)).flat()
+const sourceMessages = Array.from({ length: 12 }, (_, index) => [
+  userMessage(sourceID, index + 1000, 120),
+  assistantMessage(sourceID, index + 1000, id("msg_user", index + 1000), [textPart(index + 1000, 0, 240)]),
+]).flat()
+
+function renderable(part: MessagePart) {
+  if (part.type === "tool" && part.tool === "todowrite") return false
+  if (part.type === "text") return !!part.text.trim()
+  if (part.type === "reasoning") return !!part.text.trim()
+  return part.type !== "step-start" && part.type !== "step-finish" && part.type !== "patch"
+}
+
+function orderedParts(message: Message) {
+  return message.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
+}
+
+export const fixture = {
+  directory,
+  project: {
+    id: projectID,
+    worktree: directory,
+    vcs: "git",
+    name: "smoke-project",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  },
+  provider: {
+    all: [
+      {
+        id: "opencode",
+        name: "OpenCode",
+        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
+      },
+    ],
+    connected: ["opencode"],
+    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
+  },
+  sessions: [
+    {
+      id: sourceID,
+      slug: "source",
+      projectID,
+      directory,
+      title: "Uncommitted changes inquiry",
+      version: "dev",
+      time: { created: 1700000000000, updated: 1700000000000 },
+    },
+    {
+      id: targetID,
+      slug: "target",
+      projectID,
+      directory,
+      title: "Example Game: sample jump movement & sample physics analysis",
+      version: "dev",
+      time: { created: 1700000001000, updated: 1700000001000 },
+    },
+  ],
+  sourceID,
+  targetID,
+  messages: { [sourceID]: sourceMessages, [targetID]: targetMessages },
+  expected: {
+    sourceTitle: "Uncommitted changes inquiry",
+    targetTitle: "Example Game: sample jump movement & sample physics analysis",
+    targetMessageIDs: targetMessages
+      .filter((message) => message.info.role === "user")
+      .map((message) => message.info.id),
+    targetPartIDs: targetMessages.flatMap((message) =>
+      orderedParts(message)
+        .filter(renderable)
+        .map((part) => part.id),
+    ),
+  },
+}
+
+export function pageMessages(sessionID: string, limit: number, before?: string) {
+  const messages = fixture.messages[sessionID as keyof typeof fixture.messages] ?? []
+  const end = before
+    ? Math.max(
+        0,
+        messages.findIndex((message) => message.info.id === before),
+      )
+    : messages.length
+  const start = Math.max(0, end - limit)
+  return {
+    items: messages.slice(start, end),
+    cursor: start > 0 ? messages[start]!.info.id : undefined,
+  }
+}

packages/app/e2e/smoke/session-timeline.spec.ts

@@ -0,0 +1,428 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { fixture, pageMessages } from "./session-timeline.fixture"
+import { trackPageErrors, expectNoSmokeErrors } from "../utils/errors"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const forbiddenText = ["Load details", "Show earlier steps"]
+
+type SmokeState = {
+  ids: string[]
+  visibleIds: string[]
+  messageIds: string[]
+  visibleMessageIds: string[]
+  topVisibleId?: string
+  signature: string
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+  errorToasts: string[]
+  forbiddenText: string[]
+}
+
+type SmokeWindow = Window & {
+  __timelineSmokeState?: () => SmokeState
+  __timelineSmokeErrorToasts?: string[]
+  __timelineSmokeForbiddenText?: string[]
+}
+
+test.describe("smoke: session timeline", () => {
+  test.setTimeout(240_000)
+
+  test("renders seeded timeline in order while paging through history", async ({ page }) => {
+    const errors = trackPageErrors(page)
+    await mockOpenCodeServer(page, {
+      sessions: fixture.sessions,
+      provider: fixture.provider,
+      directory: fixture.directory,
+      project: fixture.project,
+      pageMessages,
+    })
+    await configureSmokePage(page, fixture.directory)
+
+    await selectHomeProject(page, fixture.project.name)
+    await navigateToSession(page, fixture.directory, fixture.sourceID, fixture.expected.sourceTitle)
+    await expectSessionReady(page)
+    await navigateToSession(page, fixture.directory, fixture.targetID, fixture.expected.targetTitle)
+    const expectedPartIDs = fixture.expected.targetPartIDs
+    const expectedMessageIDs = fixture.expected.targetMessageIDs
+    await expectSessionTimelineReady(page, expectedPartIDs, expectedMessageIDs, errors)
+    await expectCanScrollToStart(page, expectedPartIDs, expectedMessageIDs, errors)
+  })
+})
+
+async function configureSmokePage(page: Page, directory: string) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({
+        general: {
+          editToolPartsExpanded: true,
+          shellToolPartsExpanded: true,
+          showReasoningSummaries: true,
+          showSessionProgressBar: true,
+        },
+      }),
+    )
+  })
+
+  await page.addInitScript((directory) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({
+        projects: {
+          local: [{ worktree: directory, expanded: true }],
+        },
+        lastProject: {
+          local: directory,
+        },
+      }),
+    )
+  }, directory)
+
+  await page.addInitScript(() => {
+    const smoke = window as SmokeWindow
+    smoke.__timelineSmokeErrorToasts = []
+    smoke.__timelineSmokeForbiddenText = []
+    const partSelector = "[data-timeline-part-id], [data-timeline-part-ids]"
+    const idsOf = (el: HTMLElement) =>
+      [el.dataset.timelinePartId, ...(el.dataset.timelinePartIds?.split(",") ?? [])].filter((id): id is string => !!id)
+
+    smoke.__timelineSmokeState = () => {
+      const scroller = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((el) =>
+        el.querySelector("[data-timeline-row], [data-session-title]"),
+      )
+      if (!scroller) {
+        return {
+          ids: [],
+          visibleIds: [],
+          messageIds: [],
+          visibleMessageIds: [],
+          topVisibleId: undefined,
+          signature: "",
+          scrollTop: 0,
+          scrollHeight: 0,
+          clientHeight: 0,
+          errorToasts: smoke.__timelineSmokeErrorToasts ?? [],
+          forbiddenText: smoke.__timelineSmokeForbiddenText ?? [],
+        }
+      }
+
+      const ids: string[] = []
+      const visibleIds: string[] = []
+      const scrollerRect = scroller.getBoundingClientRect()
+      let topVisibleId: string | undefined
+      for (const el of scroller.querySelectorAll<HTMLElement>(partSelector)) {
+        const next = idsOf(el)
+        ids.push(...next)
+
+        const rect = el.getBoundingClientRect()
+        if (rect.bottom >= scrollerRect.top && rect.top <= scrollerRect.bottom) {
+          if (!topVisibleId) topVisibleId = next[0]
+          visibleIds.push(...next)
+        }
+      }
+
+      const messageIds: string[] = []
+      const visibleMessageIds: string[] = []
+      const rows = [...scroller.querySelectorAll<HTMLElement>("[data-message-id]")].map((el) => {
+        const rect = el.getBoundingClientRect()
+        const id = el.dataset.messageId
+        if (id) {
+          messageIds.push(id)
+          if (rect.bottom >= scrollerRect.top && rect.top <= scrollerRect.bottom) visibleMessageIds.push(id)
+        }
+        return {
+          id,
+          top: Math.round(rect.top),
+          bottom: Math.round(rect.bottom),
+        }
+      })
+      const signature = JSON.stringify({
+        top: Math.round(scroller.scrollTop),
+        height: Math.round(scroller.scrollHeight),
+        rows,
+        ids,
+      })
+
+      return {
+        ids,
+        visibleIds,
+        messageIds,
+        visibleMessageIds,
+        topVisibleId,
+        signature,
+        scrollTop: Math.round(scroller.scrollTop),
+        scrollHeight: Math.round(scroller.scrollHeight),
+        clientHeight: Math.round(scroller.clientHeight),
+        errorToasts: smoke.__timelineSmokeErrorToasts ?? [],
+        forbiddenText: smoke.__timelineSmokeForbiddenText ?? [],
+      }
+    }
+    let recordFrame: number | undefined
+    const record = () => {
+      for (const toast of document.querySelectorAll<HTMLElement>('[data-component="toast"][data-variant="error"]')) {
+        const text = toast.textContent?.trim()
+        if (text && !smoke.__timelineSmokeErrorToasts!.includes(text)) smoke.__timelineSmokeErrorToasts!.push(text)
+      }
+      const text = document.body?.textContent ?? ""
+      for (const value of ["Load details", "Show earlier steps"]) {
+        if (text.includes(value) && !smoke.__timelineSmokeForbiddenText!.includes(value)) {
+          smoke.__timelineSmokeForbiddenText!.push(value)
+        }
+      }
+    }
+    const start = () => {
+      const root = document.documentElement ?? document.body
+      if (!root) return
+      new MutationObserver(() => {
+        if (recordFrame) return
+        recordFrame = requestAnimationFrame(() => {
+          recordFrame = undefined
+          record()
+        })
+      }).observe(root, { childList: true, subtree: true })
+      record()
+    }
+    if (document.documentElement ?? document.body) start()
+    else document.addEventListener("DOMContentLoaded", start, { once: true })
+  })
+}
+
+async function expectCanScrollToStart(
+  page: Page,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  errors: string[],
+) {
+  await pointAtTimeline(page)
+  const seenParts = new Set<string>()
+  const seenMessages = new Set<string>()
+  const samples: TraversalSample[] = []
+  let current = await timelineState(page)
+  let unchangedAtTop = 0
+
+  for (let attempt = 0; attempt < 600; attempt++) {
+    collectSeen(current, seenParts, seenMessages)
+    samples.push(sampleTraversal(current, seenParts.size, seenMessages.size))
+    expectNoSmokeErrors(errors, current.errorToasts, current.forbiddenText)
+    expectOrderedIDs(expectedPartIDs, current.ids, "mounted part")
+    expectOrderedIDs(expectedPartIDs, current.visibleIds, "visible part")
+    expectOrderedIDs(expectedMessageIDs, unique(current.messageIds), "mounted message")
+    expectOrderedIDs(expectedMessageIDs, unique(current.visibleMessageIds), "visible message")
+
+    if (
+      current.scrollTop <= 1 &&
+      seenParts.size === expectedPartIDs.length &&
+      seenMessages.size === expectedMessageIDs.length
+    ) {
+      expectCompleteScroll(current, expectedPartIDs, expectedMessageIDs, seenParts, seenMessages, samples)
+      return
+    }
+
+    const before = current
+    const changed = await scrollTimelineUp(page, current)
+    current = await timelineState(page)
+    if (!changed && current.signature === before.signature && current.scrollTop <= 1) unchangedAtTop++
+    else unchangedAtTop = 0
+    if (unchangedAtTop >= 2) break
+  }
+
+  collectSeen(current, seenParts, seenMessages)
+  samples.push(sampleTraversal(current, seenParts.size, seenMessages.size))
+  expectCompleteScroll(current, expectedPartIDs, expectedMessageIDs, seenParts, seenMessages, samples)
+}
+
+async function timelineState(page: Page) {
+  return page.evaluate(
+    () =>
+      (window as SmokeWindow).__timelineSmokeState?.() ?? {
+        ids: [],
+        visibleIds: [],
+        messageIds: [],
+        visibleMessageIds: [],
+        topVisibleId: undefined,
+        signature: "",
+        scrollTop: 0,
+        scrollHeight: 0,
+        clientHeight: 0,
+        errorToasts: [],
+        forbiddenText: [],
+      },
+  )
+}
+
+function timelineScroller(page: Page) {
+  return page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+}
+
+async function pointAtTimeline(page: Page) {
+  const box = await timelineScroller(page).boundingBox()
+  if (!box) throw new Error("Timeline scroller is not visible")
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+}
+
+async function scrollTimelineUp(page: Page, before: SmokeState) {
+  return page.evaluate(
+    (prev) =>
+      new Promise<boolean>((resolve) => {
+        const scroller = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((el) =>
+          el.querySelector("[data-timeline-row], [data-session-title]"),
+        )
+        if (!scroller) {
+          resolve(false)
+          return
+        }
+
+        scroller.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1, deltaMode: 0 }))
+        scroller.scrollTop = Math.max(0, scroller.scrollTop - Math.max(80, Math.round(scroller.clientHeight * 0.45)))
+
+        const read = () => (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+        let frames = 0
+        let stableFrames = 0
+        let last = ""
+        let changed = false
+        const check = () => {
+          const current = read()
+          if (current !== prev) changed = true
+          if (current === last) stableFrames++
+          else {
+            stableFrames = 0
+            last = current
+          }
+          if (changed && stableFrames >= 2) {
+            resolve(true)
+            return
+          }
+          frames++
+          if (frames >= 30) {
+            resolve(changed)
+            return
+          }
+          requestAnimationFrame(check)
+        }
+        requestAnimationFrame(check)
+      }),
+    before.signature,
+  )
+}
+
+function expectOrderedIDs(expected: string[], actual: string[], label: string) {
+  expect(actual.length, `${label} ids should not be empty`).toBeGreaterThan(0)
+  const actualSet = new Set(actual)
+  expect(actual, `${label} ids`).toEqual(expected.filter((id) => actualSet.has(id)))
+}
+
+function unique(values: string[]) {
+  return values.filter((value, index) => values.indexOf(value) === index)
+}
+
+function collectSeen(state: SmokeState, seenParts: Set<string>, seenMessages: Set<string>) {
+  for (const id of state.ids) seenParts.add(id)
+  for (const id of state.visibleIds) seenParts.add(id)
+  for (const id of state.messageIds) seenMessages.add(id)
+  for (const id of state.visibleMessageIds) seenMessages.add(id)
+}
+
+type TraversalSample = ReturnType<typeof sampleTraversal>
+
+function sampleTraversal(state: SmokeState, seenParts: number, seenMessages: number) {
+  return {
+    seenParts,
+    seenMessages,
+    mounted: state.ids.length,
+    visible: state.visibleIds.length,
+    mountedMessages: unique(state.messageIds).length,
+    visibleMessages: unique(state.visibleMessageIds).length,
+    top: state.scrollTop,
+    height: state.scrollHeight,
+    first: state.ids[0],
+    last: state.ids.at(-1),
+    topVisible: state.topVisibleId,
+    visibleFirst: state.visibleIds[0],
+    visibleLast: state.visibleIds.at(-1),
+  }
+}
+
+function sampleSummary(samples: TraversalSample[]) {
+  return samples
+    .filter((_, index) => index % Math.max(1, Math.floor(samples.length / 8)) === 0 || index === samples.length - 1)
+    .map(
+      (sample, index) =>
+        `${index}: seenParts=${sample.seenParts} seenMessages=${sample.seenMessages} mounted=${sample.mounted}/${sample.mountedMessages} visible=${sample.visible}/${sample.visibleMessages} top=${sample.top}/${sample.height} first=${sample.first} last=${sample.last} topVisible=${sample.topVisible} visible=${sample.visibleFirst}..${sample.visibleLast}`,
+    )
+    .join("\n")
+}
+
+async function waitForTimelineStable(page: Page) {
+  await page.waitForFunction(
+    () =>
+      new Promise<boolean>((resolve) => {
+        requestAnimationFrame(() => {
+          const a = (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+          requestAnimationFrame(() => {
+            const b = (window as SmokeWindow).__timelineSmokeState?.().signature ?? ""
+            requestAnimationFrame(() =>
+              resolve(!!a && a === b && b === ((window as SmokeWindow).__timelineSmokeState?.().signature ?? "")),
+            )
+          })
+        })
+      }),
+  )
+}
+
+async function expectSessionTimelineReady(
+  page: Page,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  errors: string[],
+) {
+  await waitForTimelineStable(page)
+  for (const text of forbiddenText) await expect(page.getByText(text)).toHaveCount(0)
+  const currentState = await timelineState(page)
+  expectNoSmokeErrors(errors, currentState.errorToasts, currentState.forbiddenText)
+  expectOrderedIDs(expectedPartIDs, currentState.ids, "mounted part")
+  expectOrderedIDs(expectedPartIDs, currentState.visibleIds, "visible part")
+  expectOrderedIDs(expectedMessageIDs, unique(currentState.messageIds), "mounted message")
+  expectOrderedIDs(expectedMessageIDs, unique(currentState.visibleMessageIds), "visible message")
+}
+
+function expectCompleteScroll(
+  state: SmokeState,
+  expectedPartIDs: string[],
+  expectedMessageIDs: string[],
+  seenParts: Set<string>,
+  seenMessages: Set<string>,
+  samples: TraversalSample[],
+) {
+  expect(state.scrollTop, `timeline should reach the start\n${sampleSummary(samples)}`).toBeLessThanOrEqual(1)
+  expect(
+    expectedPartIDs.filter((id) => !seenParts.has(id)),
+    `missing visible timeline parts\n${sampleSummary(samples)}`,
+  ).toEqual([])
+  expect(
+    expectedMessageIDs.filter((id) => !seenMessages.has(id)),
+    `missing visible messages\n${sampleSummary(samples)}`,
+  ).toEqual([])
+  expect(new Set(expectedPartIDs).size).toBe(expectedPartIDs.length)
+  expect(new Set(expectedMessageIDs).size).toBe(expectedMessageIDs.length)
+  expect(expectedPartIDs.length).toBe(331)
+}
+
+async function selectHomeProject(page: Page, projectName: string) {
+  await page.goto("/")
+  await page
+    .locator('[data-component="home-project-row"]')
+    .filter({ hasText: new RegExp(projectName, "i") })
+    .click()
+  await expect(page).toHaveURL(/\/$/)
+}
+
+async function navigateToSession(page: Page, directory: string, sessionId: string, expectedTitle: string) {
+  await page.goto(`/${base64Encode(directory)}/session/${sessionId}`)
+  await expect(page.getByRole("heading", { name: expectedTitle })).toBeVisible()
+}
+
+async function expectSessionReady(page: Page) {
+  await expect(page.getByRole("textbox", { name: /Ask anything/i })).toBeVisible()
+}

packages/app/e2e/todo.spec.ts

@@ -1,11 +0,0 @@
-import { test } from "@playwright/test"
-
-test(
-  "test something cool",
-  {
-    annotation: { type: "todo" },
-  },
-  async () => {
-    test.fixme()
-  },
-)

packages/app/e2e/utils/errors.ts

@@ -0,0 +1,18 @@
+import { expect, type Page } from "@playwright/test"
+
+export function trackPageErrors(page: Page) {
+  const errors: string[] = []
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text())
+  })
+  page.on("pageerror", (error) => errors.push(error.stack ?? error.message))
+  return errors
+}
+
+export function expectNoSmokeErrors(consoleErrors: string[], toastErrors: string[], forbiddenText: string[]) {
+  expect({ consoleErrors, toastErrors, forbiddenText }).toEqual({
+    consoleErrors: [],
+    toastErrors: [],
+    forbiddenText: [],
+  })
+}

packages/app/e2e/utils/mock-server.ts

@@ -0,0 +1,92 @@
+import type { Page, Route } from "@playwright/test"
+
+const emptyList = new Set([
+  "/skill",
+  "/command",
+  "/lsp",
+  "/formatter",
+  "/permission",
+  "/question",
+  "/vcs/status",
+  "/vcs/diff",
+])
+const emptyObject = new Set(["/global/config", "/config", "/provider/auth", "/mcp", "/session/status"])
+
+export interface MockServerConfig {
+  provider: unknown
+  directory: string
+  project: unknown
+  sessions: ({ id: string } & Record<string, unknown>)[]
+  pageMessages: (sessionId: string, limit: number, before?: string) => { items: unknown[]; cursor?: string }
+  events?: () => unknown[]
+}
+
+export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
+  const staticRoutes: Record<string, unknown> = {
+    "/provider": config.provider,
+    "/path": {
+      state: config.directory,
+      config: config.directory,
+      worktree: config.directory,
+      directory: config.directory,
+      home: "C:/OpenCode",
+    },
+    "/project": [config.project],
+    "/project/current": config.project,
+    "/agent": [{ name: "build", mode: "primary" }],
+    "/vcs": { branch: "main", default_branch: "main" },
+    "/session": config.sessions,
+  }
+
+  await page.route("**/*", async (route) => {
+    const url = new URL(route.request().url())
+    const targetPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+    if (url.port !== targetPort) return route.fallback()
+
+    const path = url.pathname
+    if (path === "/global/event" || path === "/event") return sse(route, config.events?.())
+    if (path === "/global/health") return json(route, { healthy: true })
+    if (emptyObject.has(path)) return json(route, {})
+    if (emptyList.has(path)) return json(route, [])
+    if (path in staticRoutes) return json(route, staticRoutes[path])
+
+    const sessionMatch = path.match(/^\/session\/([^/]+)$/)
+    if (sessionMatch) {
+      const session = config.sessions.find((s) => s.id === sessionMatch[1])
+      return json(route, session ?? {})
+    }
+
+    if (/^\/session\/[^/]+\/(children|todo|diff)$/.test(path)) return json(route, [])
+
+    const messagesMatch = path.match(/^\/session\/([^/]+)\/message$/)
+    if (messagesMatch) {
+      const limit = Number(url.searchParams.get("limit") ?? 80)
+      const before = url.searchParams.get("before") ?? undefined
+      const pageData = config.pageMessages(messagesMatch[1], limit, before)
+      return json(route, pageData.items, pageData.cursor ? { "x-next-cursor": pageData.cursor } : undefined)
+    }
+
+    return json(route, {})
+  })
+}
+
+function json(route: Route, body: unknown, headers?: Record<string, string>) {
+  return route.fulfill({
+    status: 200,
+    contentType: "application/json",
+    headers: {
+      "access-control-allow-origin": "*",
+      "access-control-expose-headers": "x-next-cursor",
+      ...headers,
+    },
+    body: JSON.stringify(body ?? null),
+  })
+}
+
+function sse(route: Route, events?: unknown[]) {
+  return route.fulfill({
+    status: 200,
+    contentType: "text/event-stream",
+    body: events?.map((event) => `data: ${JSON.stringify(event)}\n\n`).join("") || ": ok\n\n",
+  })
+}

packages/app/index.html

@@ -10,7 +10,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="theme-color" content="#F8F7F7" />
-    <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
     <meta property="og:image" content="/social-share.png" />
     <meta property="twitter:image" content="/social-share.png" />
     <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>

packages/app/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.14.48",
+  "version": "1.15.11",
   "description": "",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
+    "./desktop-menu": "./src/desktop-menu.ts",
     "./vite": "./vite.js",
     "./index.css": "./src/index.css"
   },
@@ -41,10 +42,10 @@
   },
   "dependencies": {
     "@kobalte/core": "catalog:",
-    "@sentry/solid": "catalog:",
+    "@opencode-ai/core": "workspace:*",
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
-    "@opencode-ai/core": "workspace:*",
+    "@sentry/solid": "catalog:",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/active-element": "2.1.3",
     "@solid-primitives/audio": "1.4.2",
@@ -53,6 +54,7 @@
     "@solid-primitives/i18n": "2.2.1",
     "@solid-primitives/media": "2.3.3",
     "@solid-primitives/resize-observer": "2.1.5",
+    "@solid-primitives/scheduled": "1.5.3",
     "@solid-primitives/scroll": "2.1.3",
     "@solid-primitives/storage": "catalog:",
     "@solid-primitives/timer": "1.4.4",

packages/app/public/oc-theme-preload.js

@@ -16,6 +16,10 @@
   document.documentElement.dataset.theme = themeId
   document.documentElement.dataset.colorScheme = mode
 
+  // Update theme-color meta tag to match app color scheme
+  var metas = document.querySelectorAll("meta[name='theme-color']")
+  if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#131010" : "#F8F7F7")
+
   if (themeId === "oc-2") return
 
   var css = localStorage.getItem("opencode-theme-css-" + mode)

packages/app/src/app.tsx

@@ -14,6 +14,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
 import {
   type Component,
+  createEffect,
   createMemo,
   createResource,
   createSignal,
@@ -30,8 +31,8 @@ import { Dynamic } from "solid-js/web"
 import { CommandProvider } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
-import { GlobalSDKProvider } from "@/context/global-sdk"
-import { GlobalSyncProvider } from "@/context/global-sync"
+import { ServerSDKProvider } from "@/context/server-sdk"
+import { ServerSyncProvider } from "@/context/server-sync"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
 import { LayoutProvider } from "@/context/layout"
@@ -40,30 +41,26 @@ import { NotificationProvider } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
-import { SettingsProvider } from "@/context/settings"
+import { SettingsProvider, useSettings } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
+import { ServersProvider } from "./context/servers"
 
 const HomeRoute = lazy(() => import("@/pages/home"))
-const loadSession = () => import("@/pages/session")
-const Session = lazy(loadSession)
-const Loading = () => <div class="size-full" />
+const Session = lazy(() => import("@/pages/session"))
 
-if (typeof location === "object" && /\/session(?:\/|$)/.test(location.pathname)) {
-  void loadSession()
-}
-
-const SessionRoute = () => (
-  <SessionProviders>
-    <Session />
-  </SessionProviders>
+const SessionRoute = Object.assign(
+  () => (
+    <SessionProviders>
+      <Session />
+    </SessionProviders>
+  ),
+  { preload: Session.preload },
 )
 
-const SessionIndexRoute = () => <Navigate href="session" />
-
 function UiI18nBridge(props: ParentProps) {
   const language = useLanguage()
   return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
@@ -78,6 +75,7 @@ declare global {
     }
     api?: {
       setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
+      exportDebugLogs?: () => Promise<string>
     }
   }
 }
@@ -95,9 +93,26 @@ function QueryProvider(props: ParentProps) {
   return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
 }
 
+function BodyDesignClass() {
+  const settings = useSettings()
+
+  createEffect(() => {
+    if (typeof document === "undefined") return
+
+    const enabled = settings.general.newLayoutDesigns()
+    document.body.classList.toggle("text-12-regular", !enabled)
+    document.body.classList.toggle("font-(family-name:--font-family-text)", enabled)
+    document.body.classList.toggle("text-[13px]", enabled)
+    document.body.classList.toggle("font-[440]", enabled)
+  })
+
+  return null
+}
+
 function AppShellProviders(props: ParentProps) {
   return (
     <SettingsProvider>
+      <BodyDesignClass />
       <PermissionProvider>
         <LayoutProvider>
           <NotificationProvider>
@@ -300,31 +315,29 @@ export function AppInterface(props: {
   disableHealthCheck?: boolean
 }) {
   return (
-    <ServerProvider
-      defaultServer={props.defaultServer}
-      disableHealthCheck={props.disableHealthCheck}
-      servers={props.servers}
-    >
-      <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
-        <ServerKey>
-          <QueryProvider>
-            <GlobalSDKProvider>
-              <GlobalSyncProvider>
-                <Dynamic
-                  component={props.router ?? Router}
-                  root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                >
-                  <Route path="/" component={HomeRoute} />
-                  <Route path="/:dir" component={DirectoryLayout}>
-                    <Route path="/" component={SessionIndexRoute} />
-                    <Route path="/session/:id?" component={SessionRoute} />
-                  </Route>
-                </Dynamic>
-              </GlobalSyncProvider>
-            </GlobalSDKProvider>
-          </QueryProvider>
-        </ServerKey>
-      </ConnectionGate>
+    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
+      <ServersProvider>
+        <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
+          <ServerKey>
+            <QueryProvider>
+              <ServerSDKProvider>
+                <ServerSyncProvider>
+                  <Dynamic
+                    component={props.router ?? Router}
+                    root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+                  >
+                    <Route path="/" component={HomeRoute} />
+                    <Route path="/:dir" component={DirectoryLayout}>
+                      <Route path="/" component={() => <Navigate href="session" />} />
+                      <Route path="/session/:id?" component={SessionRoute} />
+                    </Route>
+                  </Dynamic>
+                </ServerSyncProvider>
+              </ServerSDKProvider>
+            </QueryProvider>
+          </ServerKey>
+        </ConnectionGate>
+      </ServersProvider>
     </ServerProvider>
   )
 }

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

@@ -12,15 +12,15 @@ import { showToast } from "@opencode-ai/ui/toast"
 import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useProviders } from "@/hooks/use-providers"
 
 export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
-  const globalSync = useGlobalSync()
-  const globalSDK = useGlobalSDK()
+  const serverSync = useServerSync()
+  const serverSDK = useServerSDK()
   const language = useLanguage()
   const providers = useProviders()
 
@@ -41,9 +41,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   })
 
   const provider = createMemo(
-    () =>
-      providers.all().find((x) => x.id === props.provider) ??
-      globalSync.data.provider.all.find((x) => x.id === props.provider)!,
+    () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!,
   )
   const fallback = createMemo<ProviderAuthMethod[]>(() => [
     {
@@ -54,16 +52,16 @@ export function DialogConnectProvider(props: { provider: string }) {
   const [auth] = createResource(
     () => props.provider,
     async () => {
-      const cached = globalSync.data.provider_auth[props.provider]
+      const cached = serverSync.data.provider_auth[props.provider]
       if (cached) return cached
-      const res = await globalSDK.client.provider.auth()
+      const res = await serverSDK.client.provider.auth()
       if (!alive.value) return fallback()
-      globalSync.set("provider_auth", res.data ?? {})
+      serverSync.set("provider_auth", res.data ?? {})
       return res.data?.[props.provider] ?? fallback()
     },
   )
-  const loading = createMemo(() => auth.loading && !globalSync.data.provider_auth[props.provider])
-  const methods = createMemo(() => auth.latest ?? globalSync.data.provider_auth[props.provider] ?? fallback())
+  const loading = createMemo(() => auth.loading && !serverSync.data.provider_auth[props.provider])
+  const methods = createMemo(() => auth.latest ?? serverSync.data.provider_auth[props.provider] ?? fallback())
   const [store, setStore] = createStore({
     methodIndex: undefined as undefined | number,
     authorization: undefined as undefined | ProviderAuthAuthorization,
@@ -160,7 +158,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
       dispatch({ type: "auth.pending" })
       const start = Date.now()
-      await globalSDK.client.provider.oauth
+      await serverSDK.client.provider.oauth
         .authorize(
           {
             providerID: props.provider,
@@ -332,7 +330,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   })
 
   async function complete() {
-    await globalSDK.client.global.dispose()
+    await serverSDK.client.global.dispose()
     dialog.close()
     showToast({
       variant: "success",
@@ -409,7 +407,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
 
       setFormStore("error", undefined)
-      await globalSDK.client.auth.set({
+      await serverSDK.client.auth.set({
         providerID: props.provider,
         auth: {
           type: "api",
@@ -480,7 +478,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
 
       setFormStore("error", undefined)
-      const result = await globalSDK.client.provider.oauth
+      const result = await serverSDK.client.provider.oauth
         .callback({
           providerID: props.provider,
           method: store.methodIndex,
@@ -526,14 +524,14 @@ export function DialogConnectProvider(props: { provider: string }) {
     const code = createMemo(() => {
       const instructions = store.authorization?.instructions
       if (instructions?.includes(":")) {
-        return instructions.split(":")[1]?.trim()
+        return instructions.split(":").pop()?.trim()
       }
       return instructions
     })
 
     onMount(() => {
       void (async () => {
-        const result = await globalSDK.client.provider.oauth
+        const result = await serverSDK.client.provider.oauth
           .callback({
             providerID: props.provider,
             method: store.methodIndex,

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

@@ -9,8 +9,8 @@ import { showToast } from "@opencode-ai/ui/toast"
 import { batch, For } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
 import { DialogSelectProvider } from "./dialog-select-provider"
@@ -21,8 +21,8 @@ type Props = {
 
 export function DialogCustomProvider(props: Props) {
   const dialog = useDialog()
-  const globalSync = useGlobalSync()
-  const globalSDK = useGlobalSDK()
+  const serverSync = useServerSync()
+  const serverSDK = useServerSDK()
   const language = useLanguage()
 
   const [form, setForm] = createStore<FormState>({
@@ -105,8 +105,8 @@ export function DialogCustomProvider(props: Props) {
     const output = validateCustomProvider({
       form,
       t: language.t,
-      disabledProviders: globalSync.data.config.disabled_providers ?? [],
-      existingProviderIDs: new Set(globalSync.data.provider.all.map((p) => p.id)),
+      disabledProviders: serverSync.data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
     })
     batch(() => {
       setForm("err", output.err)
@@ -118,11 +118,11 @@ export function DialogCustomProvider(props: Props) {
 
   const saveMutation = useMutation(() => ({
     mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
-      const disabledProviders = globalSync.data.config.disabled_providers ?? []
+      const disabledProviders = serverSync.data.config.disabled_providers ?? []
       const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
 
       if (result.key) {
-        await globalSDK.client.auth.set({
+        await serverSDK.client.auth.set({
           providerID: result.providerID,
           auth: {
             type: "api",
@@ -131,7 +131,7 @@ export function DialogCustomProvider(props: Props) {
         })
       }
 
-      await globalSync.updateConfig({
+      await serverSync.updateConfig({
         provider: { [result.providerID]: result.config },
         disabled_providers: nextDisabled,
       })

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

@@ -6,20 +6,20 @@ import { useMutation } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { type LocalProject, getAvatarColors } from "@/context/layout"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { useLanguage } from "@/context/language"
-import { getProjectAvatarSource } from "@/pages/layout/sidebar-items"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
 
 export function DialogEditProject(props: { project: LocalProject }) {
   const dialog = useDialog()
-  const globalSDK = useGlobalSDK()
-  const globalSync = useGlobalSync()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
   const language = useLanguage()
 
   const folderName = createMemo(() => getFilename(props.project.worktree))
@@ -78,19 +78,19 @@ export function DialogEditProject(props: { project: LocalProject }) {
       const start = store.startup.trim()
 
       if (props.project.id && props.project.id !== "global") {
-        await globalSDK.client.project.update({
+        await serverSDK.client.project.update({
           projectID: props.project.id,
           directory: props.project.worktree,
           name,
           icon: { color: store.color || "", override: store.iconOverride || "" },
           commands: { start },
         })
-        globalSync.project.icon(props.project.worktree, store.iconOverride || undefined)
+        serverSync.project.icon(props.project.worktree, store.iconOverride || undefined)
         dialog.close()
         return
       }
 
-      globalSync.project.meta(props.project.worktree, {
+      serverSync.project.meta(props.project.worktree, {
         name,
         icon: { color: store.color || undefined, override: store.iconOverride || undefined },
         commands: { start: start || undefined },

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

@@ -6,8 +6,8 @@ import type { ListRef } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/core/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 { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { useLayout } from "@/context/layout"
 import { useLanguage } from "@/context/language"
 
@@ -128,7 +128,7 @@ function uniqueRows(rows: Row[]) {
 }
 
 function useDirectorySearch(args: {
-  sdk: ReturnType<typeof useGlobalSDK>
+  sdk: ReturnType<typeof useServerSDK>
   start: () => string | undefined
   home: () => string
 }) {
@@ -246,8 +246,8 @@ function useDirectorySearch(args: {
 }
 
 export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
-  const sync = useGlobalSync()
-  const sdk = useGlobalSDK()
+  const sync = useServerSync()
+  const sdk = useServerSDK()
   const layout = useLayout()
   const dialog = useDialog()
   const language = useLanguage()

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

@@ -9,8 +9,8 @@ import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { useNavigate } from "@solidjs/router"
 import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
@@ -175,7 +175,7 @@ function createFileEntries(props: {
 function createSessionEntries(props: {
   workspaces: () => string[]
   label: (directory: string) => string
-  globalSDK: ReturnType<typeof useGlobalSDK>
+  serverSDK: ReturnType<typeof useServerSDK>
   language: ReturnType<typeof useLanguage>
 }) {
   const state: {
@@ -207,7 +207,7 @@ function createSessionEntries(props: {
     state.inflight = Promise.all(
       dirs.map((directory) => {
         const description = props.label(directory)
-        return props.globalSDK.client.session
+        return props.serverSDK.client.session
           .list({ directory, roots: true })
           .then((x) =>
             (x.data ?? [])
@@ -268,8 +268,8 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
   const file = useFile()
   const dialog = useDialog()
   const navigate = useNavigate()
-  const globalSDK = useGlobalSDK()
-  const globalSync = useGlobalSync()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
   const { params, tabs, view } = useSessionLayout()
   const filesOnly = () => props.mode === "files"
   const state = { cleanup: undefined as (() => void) | void, committed: false }
@@ -292,21 +292,21 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     if (directory && !dirs.includes(directory)) return [...dirs, directory]
     return dirs
   })
-  const homedir = createMemo(() => globalSync.data.path.home)
+  const homedir = createMemo(() => serverSync.data.path.home)
   const label = (directory: string) => {
     const current = project()
     const kind =
       current && directory === current.worktree
         ? language.t("workspace.type.local")
         : language.t("workspace.type.sandbox")
-    const [store] = globalSync.child(directory, { bootstrap: false })
+    const [store] = serverSync.child(directory, { bootstrap: false })
     const home = homedir()
     const path = home ? directory.replace(home, "~") : directory
     const name = store.vcs?.branch ?? getFilename(directory)
     return `${kind} : ${name || path}`
   }
 
-  const { sessions } = createSessionEntries({ workspaces, label, globalSDK, language })
+  const { sessions } = createSessionEntries({ workspaces, label, serverSDK, language })
 
   const items = async (text: string) => {
     const query = text.trim()

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

@@ -6,13 +6,14 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
-import { useQueryOptions } from "@/context/global-sync"
+import { useQueryOptions } from "@/context/server-sync"
 import { pathKey } from "@/utils/path-key"
 
 const statusLabels = {
   connected: "mcp.status.connected",
   failed: "mcp.status.failed",
   needs_auth: "mcp.status.needs_auth",
+  needs_client_registration: "mcp.status.needs_client_registration",
   disabled: "mcp.status.disabled",
 } as const
 
@@ -31,8 +32,16 @@ export const DialogSelectMcp: Component = () => {
 
   const toggle = useMutation(() => ({
     mutationFn: async (name: string) => {
-      if (sync.data.mcp[name]?.status === "connected") await sdk.client.mcp.disconnect({ name })
-      else await sdk.client.mcp.connect({ name })
+      const status = sync.data.mcp[name]
+      if (status?.status === "connected") {
+        await sdk.client.mcp.disconnect({ name })
+        return
+      }
+      if (status?.status === "needs_auth") {
+        await sdk.client.mcp.auth.authenticate({ name })
+        return
+      }
+      await sdk.client.mcp.connect({ name })
     },
     onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))),
   }))
@@ -67,7 +76,7 @@ export const DialogSelectMcp: Component = () => {
           }
           const error = () => {
             const s = mcpStatus()
-            return s?.status === "failed" ? s.error : undefined
+            if (s?.status === "failed" || s?.status === "needs_client_registration") return s.error
           }
           const enabled = () => status() === "connected"
           return (
@@ -78,9 +87,6 @@ export const DialogSelectMcp: Component = () => {
                   <Show when={statusLabel()}>
                     <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
                   </Show>
-                  <Show when={toggle.isPending && toggle.variables === i.name}>
-                    <span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>
-                  </Show>
                 </div>
                 <Show when={error()}>
                   <span class="text-11-regular text-text-weaker truncate">{error()}</span>

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

@@ -91,7 +91,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
             <div class="w-full">
               <List
                 class="w-full px-0"
-                key={(x) => x?.id}
+                key={(p) => p.id}
                 items={providers.popular}
                 activeIcon="plus-small"
                 sortBy={(a, b) => {

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

@@ -35,7 +35,7 @@ export const DialogSelectProvider: Component = () => {
         key={(x) => x?.id}
         items={() => {
           language.locale()
-          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all()]
+          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all().values()]
         }}
         filterKeys={["id", "name"]}
         groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}

packages/app/src/components/dialog-usage-exceeded.tsx

@@ -0,0 +1,44 @@
+import { usePlatform } from "@/context/platform"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { JSX } from "solid-js"
+
+export type DialogGoUpsellProps = {
+  title: string
+  description: JSX.Element
+  link?: string
+  actionLabel: string
+  onClose?: (dontShowAgain?: boolean) => void
+}
+
+export function DialogUsageExceeded(props: DialogGoUpsellProps) {
+  const dialog = useDialog()
+  const platform = usePlatform()
+
+  const runAction = () => {
+    if (props.link) platform.openLink(props.link)
+    props.onClose?.()
+    dialog.close()
+  }
+
+  const dismiss = () => {
+    props.onClose?.(true)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title={props.title} description={props.description} fit>
+      <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+        <div class="flex justify-end gap-2">
+          <Button variant="ghost" size="large" onClick={dismiss}>
+            Don't show again
+          </Button>
+          <Button variant="primary" size="large" onClick={runAction}>
+            {props.actionLabel}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -162,8 +162,8 @@ beforeAll(async () => {
     }),
   }))
 
-  mock.module("@/context/global-sync", () => ({
-    useGlobalSync: () => ({
+  mock.module("@/context/server-sync", () => ({
+    useServerSync: () => ({
       child: (directory: string) => {
         syncedDirectories.push(directory)
         storedSessions[directory] ??= []

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

@@ -5,7 +5,7 @@ import { Binary } from "@opencode-ai/core/util/binary"
 import { useNavigate, useParams } from "@solidjs/router"
 import { batch, type Accessor } from "solid-js"
 import type { FileSelection } from "@/context/file"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
@@ -38,7 +38,7 @@ export type FollowupDraft = {
 
 type FollowupSendInput = {
   client: ReturnType<typeof useSDK>["client"]
-  globalSync: ReturnType<typeof useGlobalSync>
+  serverSync: ReturnType<typeof useServerSync>
   sync: ReturnType<typeof useSync>
   draft: FollowupDraft
   messageID?: string
@@ -53,7 +53,7 @@ const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttac
 export async function sendFollowupDraft(input: FollowupSendInput) {
   const text = draftText(input.draft.prompt)
   const images = draftImages(input.draft.prompt)
-  const [, setStore] = input.globalSync.child(input.draft.sessionDirectory)
+  const [, setStore] = input.serverSync.child(input.draft.sessionDirectory)
 
   const setBusy = () => {
     if (!input.optimisticBusy) return
@@ -205,7 +205,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   const navigate = useNavigate()
   const sdk = useSDK()
   const sync = useSync()
-  const globalSync = useGlobalSync()
+  const serverSync = useServerSync()
   const local = useLocal()
   const permission = usePermission()
   const prompt = usePrompt()
@@ -226,8 +226,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     const sessionID = params.id
     if (!sessionID) return Promise.resolve()
 
-    globalSync.todo.set(sessionID, [])
-    const [, setStore] = globalSync.child(sdk.directory)
+    serverSync.todo.set(sessionID, [])
+    const [, setStore] = serverSync.child(sdk.directory)
     setStore("todo", sessionID, [])
 
     input.onAbort?.()
@@ -273,7 +273,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   }
 
   const seed = (dir: string, info: Session) => {
-    const [, setStore] = globalSync.child(dir)
+    const [, setStore] = serverSync.child(dir)
     setStore("session", (list: Session[]) => {
       const result = Binary.search(list, info.id, (item) => item.id)
       const next = [...list]
@@ -354,7 +354,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
           directory: sessionDirectory,
           throwOnError: true,
         })
-        globalSync.child(sessionDirectory)
+        serverSync.child(sessionDirectory)
       }
 
       input.onNewSessionWorktreeReset?.()
@@ -557,7 +557,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     void sendFollowupDraft({
       client,
       sync,
-      globalSync,
+      serverSync,
       draft,
       messageID,
       optimisticBusy: sessionDirectory === projectDirectory,

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

@@ -52,7 +52,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), providers.all()))
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), [...providers.all().values()]))
   const context = createMemo(() => metrics().context)
   const cost = createMemo(() => {
     return usd().format(metrics().totalCost)

packages/app/src/components/session/index.ts

@@ -3,3 +3,4 @@ export { SessionContextTab } from "./session-context-tab"
 export { SortableTab, FileVisual } from "./session-sortable-tab"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
 export { NewSessionView } from "./session-new-view"
+export { NewSessionDesignView } from "./session-new-design-view"

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

@@ -132,7 +132,7 @@ export function SessionContextTab() {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), providers.all()))
+  const metrics = createMemo(() => getSessionContextMetrics(messages(), [...providers.all().values()]))
   const ctx = createMemo(() => metrics().context)
   const formatter = createMemo(() => createSessionContextFormatter(language.intl()))
 

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

@@ -24,7 +24,9 @@ import { useSessionLayout } from "@/pages/session/session-layout"
 import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
-import { StatusPopover } from "../status-popover"
+import { StatusPopover, StatusPopoverV2 } from "../status-popover"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
 
 const OPEN_APPS = [
   "vscode",
@@ -153,11 +155,11 @@ export function SessionHeader() {
   })
   const hotkey = createMemo(() => command.keybind("file.open"))
   const os = createMemo(() => detectOS(platform))
-  const isDesktopBeta = platform.platform === "desktop" && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
-  const search = createMemo(() => !isDesktopBeta || settings.general.showSearch())
-  const tree = createMemo(() => !isDesktopBeta || settings.general.showFileTree())
-  const term = createMemo(() => !isDesktopBeta || settings.general.showTerminal())
-  const status = createMemo(() => !isDesktopBeta || settings.general.showStatus())
+  const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
+  const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
+  const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
+  const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
+  const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
 
   const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
     finder: true,
@@ -231,6 +233,14 @@ export function SessionHeader() {
   const tint = createMemo(() =>
     messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
   )
+  const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
+    statusVisible: status(),
+    statusLabel: language.t("status.popover.trigger"),
+    reviewLabel: language.t("command.review.toggle"),
+    reviewKeybind: command.keybind("review.toggle"),
+    reviewOpened: view().reviewPanel.opened(),
+    onReviewToggle: () => view().reviewPanel.toggle(),
+  }))
 
   const selectApp = (app: OpenApp) => {
     if (!options().some((item) => item.id === app)) return
@@ -311,193 +321,235 @@ export function SessionHeader() {
       <Show when={rightMount()}>
         {(mount) => (
           <Portal mount={mount()}>
-            <div class="flex items-center gap-2">
-              <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-weak-base bg-surface-panel overflow-hidden">
-                        <Button
-                          variant="ghost"
-                          class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 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-weak-base bg-surface-panel overflow-hidden">
-                        <Button
-                          variant="ghost"
-                          class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
-                          classList={{
-                            "bg-surface-raised-base-active": opening(),
-                          }}
-                          onClick={() => openDir(current().id)}
-                          disabled={opening()}
-                          aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
-                        >
-                          <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
-                            <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
-                              <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
-                            </Show>
+            <Show
+              when={isDesktopV2}
+              fallback={
+                <div class="flex items-center gap-2">
+                  <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-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 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>
-                        </Button>
-                        <DropdownMenu
-                          gutter={4}
-                          placement="bottom-end"
-                          open={menu.open}
-                          onOpenChange={(open) => setMenu("open", open)}
-                        >
-                          <DropdownMenu.Trigger
-                            as={IconButton}
-                            icon="chevron-down"
-                            variant="ghost"
-                            disabled={opening()}
-                            class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
-                            classList={{
-                              "bg-surface-raised-base-active": opening(),
-                            }}
-                            aria-label={language.t("session.header.open.menu")}
-                          />
-                          <DropdownMenu.Portal>
-                            <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
-                              <DropdownMenu.Group>
-                                <DropdownMenu.GroupLabel class="!px-1 !py-1">
-                                  {language.t("session.header.openIn")}
-                                </DropdownMenu.GroupLabel>
-                                <DropdownMenu.RadioGroup
-                                  class="mt-1"
-                                  value={current().id}
-                                  onChange={(value) => {
-                                    if (!OPEN_APPS.includes(value as OpenApp)) return
-                                    selectApp(value as OpenApp)
-                                  }}
-                                >
-                                  <For each={options()}>
-                                    {(o) => (
-                                      <DropdownMenu.RadioItem
-                                        value={o.id}
-                                        disabled={opening()}
-                                        onSelect={() => {
-                                          setMenu("open", false)
-                                          openDir(o.id)
-                                        }}
-                                      >
-                                        <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
-                                          <AppIcon id={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>
-                                    )}
-                                  </For>
-                                </DropdownMenu.RadioGroup>
-                              </DropdownMenu.Group>
-                              <DropdownMenu.Separator />
-                              <DropdownMenu.Item
-                                onSelect={() => {
-                                  setMenu("open", false)
-                                  copyPath()
+                        }
+                      >
+                        <div class="flex items-center">
+                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                            <Button
+                              variant="ghost"
+                              class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
+                              classList={{
+                                "bg-surface-raised-base-active": opening(),
+                              }}
+                              onClick={() => openDir(current().id)}
+                              disabled={opening()}
+                              aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                            >
+                              <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                                  <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                                </Show>
+                              </div>
+                            </Button>
+                            <DropdownMenu
+                              gutter={4}
+                              placement="bottom-end"
+                              open={menu.open}
+                              onOpenChange={(open) => setMenu("open", open)}
+                            >
+                              <DropdownMenu.Trigger
+                                as={IconButton}
+                                icon="chevron-down"
+                                variant="ghost"
+                                disabled={opening()}
+                                class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
+                                classList={{
+                                  "bg-surface-raised-base-active": opening(),
                                 }}
-                              >
-                                <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>
+                                aria-label={language.t("session.header.open.menu")}
+                              />
+                              <DropdownMenu.Portal>
+                                <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
+                                  <DropdownMenu.Group>
+                                    <DropdownMenu.GroupLabel class="!px-1 !py-1">
+                                      {language.t("session.header.openIn")}
+                                    </DropdownMenu.GroupLabel>
+                                    <DropdownMenu.RadioGroup
+                                      class="mt-1"
+                                      value={current().id}
+                                      onChange={(value) => {
+                                        if (!OPEN_APPS.includes(value as OpenApp)) return
+                                        selectApp(value as OpenApp)
+                                      }}
+                                    >
+                                      <For each={options()}>
+                                        {(o) => (
+                                          <DropdownMenu.RadioItem
+                                            value={o.id}
+                                            disabled={opening()}
+                                            onSelect={() => {
+                                              setMenu("open", false)
+                                              openDir(o.id)
+                                            }}
+                                          >
+                                            <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                              <AppIcon id={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>
+                                        )}
+                                      </For>
+                                    </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>
-                </div>
-              </Show>
-              <div class="flex items-center gap-1">
-                <Show when={status()}>
-                  <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
-                    <StatusPopover />
-                  </Tooltip>
-                </Show>
-                <Show when={term()}>
-                  <TooltipKeybind
-                    title={language.t("command.terminal.toggle")}
-                    keybind={command.keybind("terminal.toggle")}
-                  >
-                    <Button
-                      variant="ghost"
-                      class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
-                      onClick={toggleTerminal}
-                      aria-label={language.t("command.terminal.toggle")}
-                      aria-expanded={view().terminal.opened()}
-                      aria-controls="terminal-panel"
-                    >
-                      <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
-                    </Button>
-                  </TooltipKeybind>
-                </Show>
-
-                <div class="hidden md:flex items-center gap-1 shrink-0">
-                  <TooltipKeybind
-                    title={language.t("command.review.toggle")}
-                    keybind={command.keybind("review.toggle")}
-                  >
-                    <Button
-                      variant="ghost"
-                      class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
-                      onClick={() => view().reviewPanel.toggle()}
-                      aria-label={language.t("command.review.toggle")}
-                      aria-expanded={view().reviewPanel.opened()}
-                      aria-controls="review-panel"
-                    >
-                      <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
-                    </Button>
-                  </TooltipKeybind>
-
-                  <Show when={tree()}>
-                    <TooltipKeybind
-                      title={language.t("command.fileTree.toggle")}
-                      keybind={command.keybind("fileTree.toggle")}
-                    >
-                      <Button
-                        variant="ghost"
-                        class="titlebar-icon w-8 h-6 p-0 box-border"
-                        onClick={() => layout.fileTree.toggle()}
-                        aria-label={language.t("command.fileTree.toggle")}
-                        aria-expanded={layout.fileTree.opened()}
-                        aria-controls="file-tree-panel"
+                  <div class="flex items-center gap-1">
+                    <Show when={status()}>
+                      <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                        <StatusPopover />
+                      </Tooltip>
+                    </Show>
+                    <Show when={term()}>
+                      <TooltipKeybind
+                        title={language.t("command.terminal.toggle")}
+                        keybind={command.keybind("terminal.toggle")}
                       >
-                        <div class="relative flex items-center justify-center size-4">
-                          <Icon
-                            size="small"
-                            name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
-                            classList={{
-                              "text-icon-strong": layout.fileTree.opened(),
-                              "text-icon-weak": !layout.fileTree.opened(),
-                            }}
-                          />
-                        </div>
-                      </Button>
-                    </TooltipKeybind>
-                  </Show>
+                        <Button
+                          variant="ghost"
+                          class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                          onClick={toggleTerminal}
+                          aria-label={language.t("command.terminal.toggle")}
+                          aria-expanded={view().terminal.opened()}
+                          aria-controls="terminal-panel"
+                        >
+                          <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                        </Button>
+                      </TooltipKeybind>
+                    </Show>
+
+                    <div class="hidden md:flex items-center gap-1 shrink-0">
+                      <TooltipKeybind
+                        title={language.t("command.review.toggle")}
+                        keybind={command.keybind("review.toggle")}
+                      >
+                        <Button
+                          variant="ghost"
+                          class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                          onClick={() => view().reviewPanel.toggle()}
+                          aria-label={language.t("command.review.toggle")}
+                          aria-expanded={view().reviewPanel.opened()}
+                          aria-controls="review-panel"
+                        >
+                          <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
+                        </Button>
+                      </TooltipKeybind>
+
+                      <Show when={tree()}>
+                        <TooltipKeybind
+                          title={language.t("command.fileTree.toggle")}
+                          keybind={command.keybind("fileTree.toggle")}
+                        >
+                          <Button
+                            variant="ghost"
+                            class="titlebar-icon w-8 h-6 p-0 box-border"
+                            onClick={() => layout.fileTree.toggle()}
+                            aria-label={language.t("command.fileTree.toggle")}
+                            aria-expanded={layout.fileTree.opened()}
+                            aria-controls="file-tree-panel"
+                          >
+                            <div class="relative flex items-center justify-center size-4">
+                              <Icon
+                                size="small"
+                                name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                                classList={{
+                                  "text-icon-strong": layout.fileTree.opened(),
+                                  "text-icon-weak": !layout.fileTree.opened(),
+                                }}
+                              />
+                            </div>
+                          </Button>
+                        </TooltipKeybind>
+                      </Show>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
+              }
+            >
+              <SessionHeaderV2Actions state={v2ActionsState()} />
+            </Show>
           </Portal>
         )}
       </Show>
     </>
   )
 }
+
+type SessionHeaderV2ActionsState = {
+  statusVisible: boolean
+  statusLabel: string
+  reviewLabel: string
+  reviewKeybind: string
+  reviewOpened: boolean
+  onReviewToggle: () => void
+}
+
+function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
+  return (
+    <div class="flex items-center gap-0">
+      <Show when={props.state.statusVisible}>
+        <Tooltip placement="bottom" value={props.state.statusLabel}>
+          <StatusPopoverV2 />
+        </Tooltip>
+      </Show>
+      <TooltipKeybind title={props.state.reviewLabel} keybind={props.state.reviewKeybind}>
+        <IconButtonV2
+          type="button"
+          variant="ghost-muted"
+          size="large"
+          class="!w-9 shrink-0"
+          state={props.state.reviewOpened ? "pressed" : undefined}
+          onClick={props.state.onReviewToggle}
+          aria-label={props.state.reviewLabel}
+          aria-expanded={props.state.reviewOpened}
+          aria-controls="review-panel"
+          icon={<IconV2 name="sidebar-right" />}
+        />
+      </TooltipKeybind>
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import type { JSX } from "solid-js"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/components/wordmark-v2.jsx"
+
+export function NewSessionDesignView(props: { children: JSX.Element }) {
+  return (
+    <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep">
+      <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
+        <div class="w-full max-w-[720px]">
+          <WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
+          <div class="mt-8">{props.children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -12,8 +12,8 @@ import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { usePlatform, type DisplayBackend } from "@/context/platform"
-import { useGlobalSync } from "@/context/global-sync"
-import { useGlobalSDK } from "@/context/global-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useServerSDK } from "@/context/server-sdk"
 import {
   monoDefault,
   monoFontFamily,
@@ -175,8 +175,8 @@ export const SettingsGeneral: Component = () => {
 
   const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
 
-  const globalSync = useGlobalSync()
-  const globalSdk = useGlobalSDK()
+  const serverSync = useServerSync()
+  const globalSdk = useServerSDK()
 
   const [shells] = createResource(
     () =>
@@ -193,16 +193,22 @@ export const SettingsGeneral: Component = () => {
     { initialValue: null as DisplayBackend | null },
   )
 
+  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
+    { initialValue: false },
+  )
+
   onMount(() => {
     void theme.loadThemes()
   })
 
   const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => globalSync.data.config.shell ?? "")
+  const currentShell = createMemo(() => serverSync.data.config.shell ?? "")
 
   const shellOptions = createMemo<ShellSelectOption[]>(() => {
     const list = shells.latest
-    const current = globalSync.data.config.shell
+    const current = serverSync.data.config.shell
 
     const nameCounts = new Map<string, number>()
     for (const s of list) {
@@ -239,6 +245,13 @@ export const SettingsGeneral: Component = () => {
     })
   }
 
+  const onPinchZoomChange = (checked: boolean) => {
+    setPinchZoom(checked)
+    const update = platform.setPinchZoomEnabled?.(checked)
+    if (!update) return
+    void update.catch(() => setPinchZoom(!checked))
+  }
+
   const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
     { value: "system", label: language.t("theme.scheme.system") },
     { value: "light", label: language.t("theme.scheme.light") },
@@ -330,7 +343,7 @@ export const SettingsGeneral: Component = () => {
             onSelect={(option) => {
               if (!option) return
               if (option.value === currentShell()) return
-              globalSync.updateConfig({ shell: option.value })
+              serverSync.updateConfig({ shell: option.value })
             }}
             variant="secondary"
             size="small"
@@ -386,6 +399,18 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.newLayoutDesigns.title")}
+          description={language.t("settings.general.row.newLayoutDesigns.description")}
+        >
+          <div data-action="settings-new-layout-designs">
+            <Switch
+              checked={settings.general.newLayoutDesigns()}
+              onChange={(checked) => settings.general.setNewLayoutDesigns(checked)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )
@@ -431,18 +456,6 @@ export const SettingsGeneral: Component = () => {
           </div>
         </SettingsRow>
 
-        <SettingsRow
-          title={language.t("settings.general.row.showTerminal.title")}
-          description={language.t("settings.general.row.showTerminal.description")}
-        >
-          <div data-action="settings-show-terminal">
-            <Switch
-              checked={settings.general.showTerminal()}
-              onChange={(checked) => settings.general.setShowTerminal(checked)}
-            />
-          </div>
-        </SettingsRow>
-
         <SettingsRow
           title={language.t("settings.general.row.showStatus.title")}
           description={language.t("settings.general.row.showStatus.description")}
@@ -454,6 +467,18 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showCustomAgents.title")}
+          description={language.t("settings.general.row.showCustomAgents.description")}
+        >
+          <div data-action="settings-show-custom-agents">
+            <Switch
+              checked={settings.general.showCustomAgents()}
+              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )
@@ -729,7 +754,45 @@ export const SettingsGeneral: Component = () => {
     </div>
   )
 
-  console.log(import.meta.env)
+  const DisplaySection = () => (
+    <Show when={desktop()}>
+      <div class="flex flex-col gap-1">
+        <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
+
+        <SettingsList>
+          <SettingsRow
+            title={language.t("settings.general.row.pinchZoom.title")}
+            description={language.t("settings.general.row.pinchZoom.description")}
+          >
+            <div data-action="settings-pinch-zoom">
+              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
+            </div>
+          </SettingsRow>
+
+          <Show when={linux()}>
+            <SettingsRow
+              title={
+                <div class="flex items-center gap-2">
+                  <span>{language.t("settings.general.row.wayland.title")}</span>
+                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
+                    <span class="text-text-weak">
+                      <Icon name="help" size="small" />
+                    </span>
+                  </Tooltip>
+                </div>
+              }
+              description={language.t("settings.general.row.wayland.description")}
+            >
+              <div data-action="settings-wayland">
+                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
+              </div>
+            </SettingsRow>
+          </Show>
+        </SettingsList>
+      </div>
+    </Show>
+  )
+
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -749,33 +812,9 @@ export const SettingsGeneral: Component = () => {
 
         <UpdatesSection />
 
-        <Show when={linux()}>
-          <div class="flex flex-col gap-1">
-            <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
+        <DisplaySection />
 
-            <SettingsList>
-              <SettingsRow
-                title={
-                  <div class="flex items-center gap-2">
-                    <span>{language.t("settings.general.row.wayland.title")}</span>
-                    <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
-                      <span class="text-text-weak">
-                        <Icon name="help" size="small" />
-                      </span>
-                    </Tooltip>
-                  </div>
-                }
-                description={language.t("settings.general.row.wayland.description")}
-              >
-                <div data-action="settings-wayland">
-                  <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
-                </div>
-              </SettingsRow>
-            </SettingsList>
-          </div>
-        </Show>
-
-        <Show when={desktop() && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"}>
+        <Show when={desktop()}>
           <AdvancedSection />
         </Show>
       </div>

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

@@ -6,8 +6,8 @@ import { showToast } from "@opencode-ai/ui/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { createMemo, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "@/context/global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
 import { DialogConnectProvider } from "./dialog-connect-provider"
 import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogCustomProvider } from "./dialog-custom-provider"
@@ -30,8 +30,8 @@ const PROVIDER_NOTES = [
 export const SettingsProviders: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
-  const globalSDK = useGlobalSDK()
-  const globalSync = useGlobalSync()
+  const serverSDK = useServerSDK()
+  const serverSync = useServerSync()
   const providers = useProviders()
 
   const connected = createMemo(() => {
@@ -74,7 +74,7 @@ export const SettingsProviders: Component = () => {
   const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
 
   const isConfigCustom = (providerID: string) => {
-    const provider = globalSync.data.config.provider?.[providerID]
+    const provider = serverSync.data.config.provider?.[providerID]
     if (!provider) return false
     if (provider.npm !== "@ai-sdk/openai-compatible") return false
     if (!provider.models || Object.keys(provider.models).length === 0) return false
@@ -82,11 +82,11 @@ export const SettingsProviders: Component = () => {
   }
 
   const disableProvider = async (providerID: string, name: string) => {
-    const before = globalSync.data.config.disabled_providers ?? []
+    const before = serverSync.data.config.disabled_providers ?? []
     const next = before.includes(providerID) ? before : [...before, providerID]
-    globalSync.set("config", "disabled_providers", next)
+    serverSync.set("config", "disabled_providers", next)
 
-    await globalSync
+    await serverSync
       .updateConfig({ disabled_providers: next })
       .then(() => {
         showToast({
@@ -97,7 +97,7 @@ export const SettingsProviders: Component = () => {
         })
       })
       .catch((err: unknown) => {
-        globalSync.set("config", "disabled_providers", before)
+        serverSync.set("config", "disabled_providers", before)
         const message = err instanceof Error ? err.message : String(err)
         showToast({ title: language.t("common.requestFailed"), description: message })
       })
@@ -105,14 +105,14 @@ export const SettingsProviders: Component = () => {
 
   const disconnect = async (providerID: string, name: string) => {
     if (isConfigCustom(providerID)) {
-      await globalSDK.client.auth.remove({ providerID }).catch(() => undefined)
+      await serverSDK.client.auth.remove({ providerID }).catch(() => undefined)
       await disableProvider(providerID, name)
       return
     }
-    await globalSDK.client.auth
+    await serverSDK.client.auth
       .remove({ providerID })
       .then(async () => {
-        await globalSDK.client.global.dispose()
+        await serverSDK.client.global.dispose()
         showToast({
           variant: "success",
           icon: "circle-check",

packages/app/src/components/status-popover-body.tsx

@@ -7,16 +7,17 @@ import { useMutation, useQueryClient } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
+import { createStore } from "solid-js/store"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
-import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health"
-import { useQueryOptions } from "@/context/global-sync"
+import { type ServerHealth } from "@/utils/server-health"
+import { useQueryOptions } from "@/context/server-sync"
 import { pathKey } from "@/utils/path-key"
+import { useServers } from "@/context/servers"
 
 const pollMs = 10_000
 
@@ -54,40 +55,6 @@ const listServersByHealth = (
   })
 }
 
-const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, enabled: Accessor<boolean>) => {
-  const checkServerHealth = useCheckServerHealth()
-  const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
-
-  createEffect(() => {
-    if (!enabled()) {
-      setStatus(reconcile({}))
-      return
-    }
-    const list = servers()
-    let dead = false
-
-    const refresh = async () => {
-      const results: Record<string, ServerHealth> = {}
-      await Promise.all(
-        list.map(async (conn) => {
-          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
-        }),
-      )
-      if (dead) return
-      setStatus(reconcile(results))
-    }
-
-    void refresh()
-    const id = setInterval(() => void refresh(), pollMs)
-    onCleanup(() => {
-      dead = true
-      clearInterval(id)
-    })
-  })
-
-  return status
-}
-
 const useDefaultServerKey = (
   get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
 ) => {
@@ -145,7 +112,15 @@ const useMcpToggleMutation = () => {
   return useMutation(() => ({
     mutationFn: async (name: string) => {
       const status = sync.data.mcp[name]
-      await (status?.status === "connected" ? sdk.client.mcp.disconnect({ name }) : sdk.client.mcp.connect({ name }))
+      if (status?.status === "connected") {
+        await sdk.client.mcp.disconnect({ name })
+        return
+      }
+      if (status?.status === "needs_auth") {
+        await sdk.client.mcp.auth.authenticate({ name })
+        return
+      }
+      await sdk.client.mcp.connect({ name })
     },
     onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))),
     onError: (err) => {
@@ -158,8 +133,162 @@ const useMcpToggleMutation = () => {
   }))
 }
 
+type ServerStatusState = {
+  servers: () => ServerStatusItem[]
+  defaultKey: () => ServerConnection.Key | undefined
+  ariaLabel: string
+  serversLabel: string
+  defaultLabel: string
+  manageLabel: string
+  onManage: () => void
+}
+
+type ServerStatusItem = {
+  key: ServerConnection.Key
+  conn: ServerConnection.Any
+  health?: ServerHealth
+  blocked: boolean
+  active: boolean
+  onSelect: () => void
+}
+
+export function StatusPopoverServerBody() {
+  const servers = useServers()
+  const server = useServer()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const navigate = useNavigate()
+
+  let dialogRun = 0
+  let dialogDead = false
+  onCleanup(() => {
+    dialogDead = true
+    dialogRun += 1
+  })
+
+  const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health))
+  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
+  const serverItems = createMemo(() =>
+    sortedServers().map((conn) => {
+      const key = ServerConnection.key(conn)
+      return {
+        key,
+        conn,
+        health: servers.health[key],
+        blocked: servers.health[key]?.healthy === false,
+        active: !!server.current && key === ServerConnection.key(server.current),
+        onSelect: () => {
+          navigate("/")
+          queueMicrotask(() => server.setActive(key))
+        },
+      }
+    }),
+  )
+
+  return (
+    <ServerStatusPopoverView
+      state={{
+        servers: serverItems,
+        defaultKey: defaultServer.key,
+        ariaLabel: language.t("status.popover.ariaLabel"),
+        serversLabel: language.t("status.popover.tab.servers"),
+        defaultLabel: language.t("common.default"),
+        manageLabel: language.t("status.popover.action.manageServers"),
+        onManage: () => {
+          const run = ++dialogRun
+          void import("./dialog-select-server").then((x) => {
+            if (dialogDead || dialogRun !== run) return
+            dialog.show(() => <x.DialogSelectServer />, defaultServer.refresh)
+          })
+        },
+      }}
+    />
+  )
+}
+
+function ServerStatusPopoverView(props: { state: ServerStatusState }) {
+  return (
+    <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
+      <Tabs
+        aria-label={props.state.ariaLabel}
+        class="tabs bg-background-strong rounded-xl overflow-hidden"
+        data-component="tabs"
+        data-active="servers"
+        defaultValue="servers"
+        variant="alt"
+      >
+        <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
+          <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
+            {props.state.servers().length > 0 ? `${props.state.servers().length} ` : ""}
+            {props.state.serversLabel}
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="servers">
+          <ServerStatusList state={props.state} />
+        </Tabs.Content>
+      </Tabs>
+    </div>
+  )
+}
+
+function ServerStatusList(props: { state: ServerStatusState }) {
+  return (
+    <div class="flex flex-col px-2 pb-2">
+      <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+        <For each={props.state.servers()}>
+          {(item) => {
+            return (
+              <button
+                type="button"
+                class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
+                classList={{
+                  "hover:bg-surface-raised-base-hover": !item.blocked,
+                  "cursor-not-allowed": item.blocked,
+                }}
+                aria-disabled={item.blocked}
+                onClick={() => {
+                  if (item.blocked) return
+                  item.onSelect()
+                }}
+              >
+                <ServerHealthIndicator health={item.health} />
+                <ServerRow
+                  conn={item.conn}
+                  dimmed={item.blocked}
+                  status={item.health}
+                  class="flex items-center gap-2 w-full min-w-0"
+                  nameClass="text-14-regular text-text-base truncate"
+                  versionClass="text-12-regular text-text-weak truncate"
+                  badge={
+                    <Show when={item.key === props.state.defaultKey()}>
+                      <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
+                        {props.state.defaultLabel}
+                      </span>
+                    </Show>
+                  }
+                >
+                  <div class="flex-1" />
+                  <Show when={item.active}>
+                    <Icon name="check" size="small" class="text-icon-weak shrink-0" />
+                  </Show>
+                </ServerRow>
+              </button>
+            )
+          }}
+        </For>
+
+        <Button variant="secondary" class="mt-3 self-start h-8 px-3 py-1.5" onClick={props.state.onManage}>
+          {props.state.manageLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
 export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const sync = useSync()
+  const servers = useServers()
   const server = useServer()
   const platform = usePlatform()
   const dialog = useDialog()
@@ -184,15 +313,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
     dialogDead = true
     dialogRun += 1
   })
-  const servers = createMemo(() => {
-    const current = server.current
-    const list = server.list
-    if (!current) return list
-    if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
-    return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
-  })
-  const health = useServerHealth(servers, props.shown)
-  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
+  const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health))
   const toggleMcp = useMcpToggleMutation()
   const defaultServer = useDefaultServerKey(platform.getDefaultServer)
   const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
@@ -218,7 +339,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
       >
         <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
           <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
-            {sortedServers().length > 0 ? `${sortedServers().length} ` : ""}
+            {servers.list().length > 0 ? `${servers.list().length} ` : ""}
             {language.t("status.popover.tab.servers")}
           </Tabs.Trigger>
           <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
@@ -241,7 +362,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
               <For each={sortedServers()}>
                 {(s) => {
                   const key = ServerConnection.key(s)
-                  const blocked = () => health[key]?.healthy === false
+                  const blocked = () => servers.health[key]?.healthy === false
                   return (
                     <button
                       type="button"
@@ -257,11 +378,11 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                         queueMicrotask(() => server.setActive(key))
                       }}
                     >
-                      <ServerHealthIndicator health={health[key]} />
+                      <ServerHealthIndicator health={servers.health[key]} />
                       <ServerRow
                         conn={s}
                         dimmed={blocked()}
-                        status={health[key]}
+                        status={servers.health[key]}
                         class="flex items-center gap-2 w-full min-w-0"
                         nameClass="text-14-regular text-text-base truncate"
                         versionClass="text-12-regular text-text-weak truncate"
@@ -316,7 +437,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                     return (
                       <button
                         type="button"
-                        class="flex items-center gap-2 w-full h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
+                        class="flex items-center gap-2 w-full min-h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
                         onClick={() => {
                           if (toggleMcp.isPending) return
                           toggleMcp.mutate(name)
@@ -333,7 +454,16 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                               status() === "needs_auth" || status() === "needs_client_registration",
                           }}
                         />
-                        <span class="text-14-regular text-text-base truncate flex-1">{name}</span>
+                        <span class="flex flex-col min-w-0 flex-1">
+                          <span class="flex items-center gap-2 min-w-0">
+                            <span class="text-14-regular text-text-base truncate">{name}</span>
+                          </span>
+                          <Show when={status() === "needs_auth"}>
+                            <span class="text-11-regular text-text-weaker truncate">
+                              {language.t("mcp.auth.clickToAuthenticate")}
+                            </span>
+                          </Show>
+                        </span>
                         <div onClick={(event) => event.stopPropagation()}>
                           <Switch
                             checked={enabled()}

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

@@ -1,25 +1,33 @@
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
 import { Popover } from "@opencode-ai/ui/popover"
-import { Suspense, createMemo, createSignal, lazy, Show } from "solid-js"
+import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
+import { useServers } from "@/context/servers"
 
 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
+const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody })))
 
 export function StatusPopover() {
   const language = useLanguage()
   const server = useServer()
+  const servers = useServers()
   const sync = useSync()
   const [shown, setShown] = createSignal(false)
-  const ready = createMemo(() => server.healthy() === false || sync.data.mcp_ready)
-  const healthy = createMemo(() => {
-    const serverHealthy = server.healthy() === true
+  const ready = createMemo(() => servers.health[server.key]?.healthy === false || sync.data.mcp_ready)
+  const mcpIssue = createMemo(() => {
     const mcp = Object.values(sync.data.mcp ?? {})
-    const issue = mcp.some((item) => item.status !== "connected" && item.status !== "disabled")
-    return serverHealthy && !issue
+    const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
+    const warn = mcp.some((item) => item.status === "needs_auth")
+    if (failed) return "critical" as const
+    if (warn) return "warning" as const
   })
+  const serverHealthy = () => servers.health[server.key]?.healthy === true
+  const healthy = createMemo(() => servers.health[server.key]?.healthy === true && !mcpIssue())
 
   return (
     <Popover
@@ -41,8 +49,9 @@ export function StatusPopover() {
             classList={{
               "absolute -top-px -right-px size-1.5 rounded-full": true,
               "bg-icon-success-base": ready() && healthy(),
-              "bg-icon-critical-base": server.healthy() === false || (ready() && !healthy()),
-              "bg-border-weak-base": server.healthy() === undefined || !ready(),
+              "bg-icon-warning-base": ready() && serverHealthy() && mcpIssue() === "warning",
+              "bg-icon-critical-base": serverHealthy() || (ready() && serverHealthy() && mcpIssue() === "critical"),
+              "bg-border-weak-base": serverHealthy() || !ready(),
             }}
           />
         </div>
@@ -64,3 +73,135 @@ export function StatusPopover() {
     </Popover>
   )
 }
+
+export function StatusPopoverV2(props: { scope?: "server" }) {
+  if (props.scope === "server") return <ServerStatusPopover />
+  return <DirectoryStatusPopover />
+}
+
+function DirectoryStatusPopover() {
+  const language = useLanguage()
+  const server = useServer()
+  const servers = useServers()
+  const sync = useSync()
+  const [shown, setShown] = createSignal(false)
+  const serverHealth = () => servers.health[server.key]?.healthy
+  const ready = createMemo(() => serverHealth() === false || sync.data.mcp_ready)
+  const mcpIssue = createMemo(() => {
+    const mcp = Object.values(sync.data.mcp ?? {})
+    const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
+    const warn = mcp.some((item) => item.status === "needs_auth")
+    if (failed) return "critical" as const
+    if (warn) return "warning" as const
+  })
+  const healthy = createMemo(() => serverHealth() === true && !mcpIssue())
+  const state = createMemo<StatusPopoverState>(() => ({
+    shown: shown(),
+    ready: ready(),
+    healthy: healthy(),
+    serverHealth: serverHealth(),
+    issue: mcpIssue(),
+    label: language.t("status.popover.trigger"),
+    onOpenChange: setShown,
+    body: () => (
+      <StatusPopoverBody shown={shown()}>
+        <Body shown={shown} />
+      </StatusPopoverBody>
+    ),
+  }))
+
+  return <StatusPopoverView state={state()} />
+}
+
+function ServerStatusPopover() {
+  const language = useLanguage()
+  const server = useServer()
+  const servers = useServers()
+  const [shown, setShown] = createSignal(false)
+  const serverHealth = () => servers.health[server.key]?.healthy
+  const state = createMemo<StatusPopoverState>(() => ({
+    shown: shown(),
+    ready: serverHealth() !== undefined,
+    healthy: serverHealth() === true,
+    serverHealth: serverHealth(),
+    label: language.t("status.popover.trigger"),
+    onOpenChange: setShown,
+    body: () => (
+      <StatusPopoverBody shown={shown()}>
+        <ServerBody />
+      </StatusPopoverBody>
+    ),
+  }))
+
+  return <StatusPopoverView state={state()} />
+}
+
+type StatusPopoverState = {
+  shown: boolean
+  ready: boolean
+  healthy: boolean
+  serverHealth: boolean | undefined
+  issue?: "critical" | "warning"
+  label: string
+  onOpenChange: (value: boolean) => void
+  body: () => JSX.Element
+}
+
+function StatusPopoverBody(props: { shown: boolean; children: JSX.Element }) {
+  return (
+    <Show when={props.shown}>
+      <Suspense
+        fallback={<div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />}
+      >
+        {props.children}
+      </Suspense>
+    </Show>
+  )
+}
+
+function StatusPopoverView(props: { state: StatusPopoverState }) {
+  const statusDotClass = () => ({
+    "absolute rounded-full": true,
+    "bg-icon-success-base": props.state.ready && props.state.healthy,
+    "bg-icon-warning-base": props.state.ready && props.state.serverHealth === true && props.state.issue === "warning",
+    "bg-icon-critical-base":
+      props.state.serverHealth === false ||
+      (props.state.ready && props.state.serverHealth === true && props.state.issue === "critical"),
+    "bg-border-weak-base": props.state.serverHealth === undefined || !props.state.ready,
+  })
+
+  const popoverProps = {
+    class:
+      "[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl",
+    gutter: 4,
+    placement: "bottom-end" as const,
+    shift: -168,
+  }
+
+  return (
+    <Popover
+      open={props.state.shown}
+      onOpenChange={props.state.onOpenChange}
+      triggerAs={IconButtonV2}
+      triggerProps={{
+        variant: "ghost-muted",
+        size: "large",
+        class: "!w-9 shrink-0",
+        state: props.state.shown ? "pressed" : undefined,
+        "aria-label": props.state.label,
+      }}
+      trigger={
+        <div class="relative size-4">
+          <IconV2 name={props.state.shown ? "status-active" : "status"} />
+          <div
+            classList={statusDotClass()}
+            class="-top-1 -right-1 size-2 border border-[var(--v2-background-bg-deep)]"
+          />
+        </div>
+      }
+      {...popoverProps}
+    >
+      {props.state.body()}
+    </Popover>
+  )
+}

packages/app/src/components/titlebar-session-events.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "./titlebar-session-events"
+
+describe("titlebar session events", () => {
+  test("reads valid removed session tab details", () => {
+    expect(
+      readSessionTabsRemovedDetail(
+        new CustomEvent(SESSION_TABS_REMOVED_EVENT, {
+          detail: { directory: "/tmp/project", sessionIDs: ["ses_1", "ses_2", 1] },
+        }),
+      ),
+    ).toEqual({
+      directory: "/tmp/project",
+      sessionIDs: ["ses_1", "ses_2"],
+    })
+  })
+
+  test("ignores invalid removed session tab details", () => {
+    expect(readSessionTabsRemovedDetail(new Event(SESSION_TABS_REMOVED_EVENT))).toBeUndefined()
+    expect(
+      readSessionTabsRemovedDetail(
+        new CustomEvent(SESSION_TABS_REMOVED_EVENT, {
+          detail: { directory: "/tmp/project", sessionIDs: [] },
+        }),
+      ),
+    ).toBeUndefined()
+  })
+})

packages/app/src/components/titlebar-session-events.ts

@@ -0,0 +1,29 @@
+export const SESSION_TABS_REMOVED_EVENT = "opencode:session-tabs-removed"
+
+export type SessionTabsRemovedDetail = {
+  directory: string
+  sessionIDs: string[]
+}
+
+export function notifySessionTabsRemoved(input: SessionTabsRemovedDetail) {
+  window.dispatchEvent(new CustomEvent(SESSION_TABS_REMOVED_EVENT, { detail: input }))
+}
+
+export function readSessionTabsRemovedDetail(event: Event): SessionTabsRemovedDetail | undefined {
+  if (!(event instanceof CustomEvent)) return undefined
+
+  const detail: unknown = event.detail
+  if (!detail || typeof detail !== "object") return undefined
+  if (!("directory" in detail)) return undefined
+  if (!("sessionIDs" in detail)) return undefined
+  if (typeof detail.directory !== "string") return undefined
+  if (!Array.isArray(detail.sessionIDs)) return undefined
+
+  const sessionIDs = detail.sessionIDs.filter((id): id is string => typeof id === "string")
+  if (sessionIDs.length === 0) return undefined
+
+  return {
+    directory: detail.directory,
+    sessionIDs,
+  }
+}

packages/app/src/components/titlebar.tsx

@@ -1,18 +1,34 @@
-import { createEffect, createMemo, Show, untrack } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { createEffect, createMemo, For, mapArray, Match, Show, startTransition, Switch, untrack } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { useLocation, useMatch, useNavigate, useParams } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useTheme } from "@opencode-ai/ui/theme/context"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
 
-import { useLayout } from "@/context/layout"
+import { getAvatarColors, useLayout, type LocalProject } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
+import { WindowsAppMenu } from "./windows-app-menu"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
+import { useServerSync } from "@/context/server-sync"
+import { decodeDirectory } from "@/pages/directory-layout"
+import { iife } from "@opencode-ai/core/util/iife"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { Avatar as AvatarV2 } from "@opencode-ai/ui/v2/components/avatar-v2.jsx"
+import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import {
+  readSessionTabsRemovedDetail,
+  SESSION_TABS_REMOVED_EVENT,
+  type SessionTabsRemovedDetail,
+} from "@/components/titlebar-session-events"
 
 type TauriDesktopWindow = {
   startDragging?: () => Promise<void>
@@ -35,11 +51,20 @@ type TauriApi = {
 const tauriApi = () => (window as unknown as { __TAURI__?: TauriApi }).__TAURI__
 const currentDesktopWindow = () => tauriApi()?.window?.getCurrentWindow?.()
 const currentThemeWindow = () => tauriApi()?.webviewWindow?.getCurrentWebviewWindow?.()
-const titlebarHeight = 40
+const legacyTitlebarHeight = 40
+const v2TitlebarHeight = 44
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
 
-export function Titlebar() {
+const makeSessionHref = (b64Dir: string, sessionId: string) => `/${b64Dir}/session/${sessionId}`
+
+export type TitlebarUpdate = {
+  version: () => string | undefined
+  installing: () => boolean
+  install: () => void
+}
+
+export function Titlebar(props: { update?: TitlebarUpdate }) {
   const layout = useLayout()
   const platform = usePlatform()
   const command = useCommand()
@@ -49,16 +74,20 @@ export function Titlebar() {
   const navigate = useNavigate()
   const location = useLocation()
   const params = useParams()
+  const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
 
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
+  const electronWindows = createMemo(() => windows() && !tauriApi())
+  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
   const web = createMemo(() => platform.platform === "web")
   const zoom = () => platform.webviewZoom?.() ?? 1
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
   const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1)
   const minHeight = () => {
-    if (mac()) return `${titlebarHeight / zoom()}px`
-    if (windows()) return `${titlebarHeight / Math.min(titlebarZoom(), 1)}px`
+    const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
+    if (mac()) return `${height / zoom()}px`
+    if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px`
     return undefined
   }
   const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`
@@ -90,7 +119,23 @@ export function Titlebar() {
   const canBack = createMemo(() => history.index > 0)
   const canForward = createMemo(() => history.index < history.stack.length - 1)
   const hasProjects = createMemo(() => layout.projects.list().length > 0)
-  const nav = createMemo(() => import.meta.env.VITE_OPENCODE_CHANNEL !== "beta" || settings.general.showNavigation())
+  const nav = createMemo(() => (useV2Titlebar() ? settings.general.showNavigation() : true))
+  const updateState = createMemo<TitlebarUpdatePillState>(() => {
+    const version = props.update?.version()
+    return {
+      visible: version !== undefined,
+      installing: props.update?.installing() ?? false,
+      label: "Update",
+      ariaLabel: language.t("toast.update.action.installRestart"),
+      title: version ? `Update ${version}` : undefined,
+      onInstall: () => props.update?.install(),
+    }
+  })
+  const v2RightState = createMemo<TitlebarV2RightState>(() => ({
+    update: updateState(),
+    statusVisible: !params.dir && settings.general.showStatus(),
+    statusLabel: language.t("status.popover.trigger"),
+  }))
 
   const back = () => {
     const next = backPath(history)
@@ -175,162 +220,614 @@ export function Titlebar() {
 
   return (
     <header
-      class="h-10 shrink-0 bg-background-base relative overflow-hidden"
-      style={{ "min-height": minHeight() }}
+      classList={{
+        "shrink-0 relative overflow-hidden flex flex-row": true,
+        "h-11 bg-v2-background-bg-deep": useV2Titlebar(),
+        "h-10 bg-background-base": !useV2Titlebar(),
+      }}
+      style={{
+        "min-height": minHeight(),
+        "padding-left": mac() ? `${84 / zoom()}px` : 0,
+        width: electronWindows() ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))` : undefined,
+        "max-width": electronWindows()
+          ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))`
+          : undefined,
+        "align-self": electronWindows() ? "flex-start" : undefined,
+      }}
       data-tauri-drag-region
       onMouseDown={drag}
       onDblClick={maximize}
     >
-      <div
-        class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
-        style={{ zoom: counterZoom() }}
-      >
-        <div
-          classList={{
-            "flex items-center min-w-0": true,
-            "pl-2": !mac(),
-          }}
-        >
-          <Show when={mac()}>
-            <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
-            <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
-              <IconButton
-                icon="menu"
-                variant="ghost"
-                class="titlebar-icon rounded-md"
-                onClick={layout.mobileSidebar.toggle}
-                aria-label={language.t("sidebar.menu.toggle")}
-                aria-expanded={layout.mobileSidebar.opened()}
-              />
-            </div>
-          </Show>
-          <Show when={!mac()}>
-            <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
-              <IconButton
-                icon="menu"
-                variant="ghost"
-                class="titlebar-icon rounded-md"
-                onClick={layout.mobileSidebar.toggle}
-                aria-label={language.t("sidebar.menu.toggle")}
-                aria-expanded={layout.mobileSidebar.opened()}
-              />
-            </div>
-          </Show>
-          <div class="flex items-center gap-1 shrink-0">
-            <TooltipKeybind
-              class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
-              placement="bottom"
-              title={language.t("command.sidebar.toggle")}
-              keybind={command.keybind("sidebar.toggle")}
-            >
-              <Button
-                variant="ghost"
-                class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
-                onClick={layout.sidebar.toggle}
-                aria-label={language.t("command.sidebar.toggle")}
-                aria-expanded={layout.sidebar.opened()}
-              >
-                <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
-              </Button>
-            </TooltipKeybind>
-            <div class="hidden xl:flex items-center shrink-0">
-              <Show when={params.dir}>
-                <div
-                  class="flex items-center shrink-0 w-8 mr-1"
-                  aria-hidden={layout.sidebar.opened() ? "true" : undefined}
-                >
-                  <div
-                    class="transition-opacity"
-                    classList={{
-                      "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
-                      "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
-                    }}
-                  >
-                    <TooltipKeybind
-                      placement="bottom"
-                      title={language.t("command.session.new")}
-                      keybind={command.keybind("session.new")}
-                      openDelay={2000}
-                    >
-                      <Button
-                        variant="ghost"
-                        icon={creating() ? "new-session-active" : "new-session"}
-                        class="titlebar-icon w-8 h-6 p-0 box-border"
-                        disabled={layout.sidebar.opened()}
-                        tabIndex={layout.sidebar.opened() ? -1 : undefined}
-                        onClick={() => {
-                          if (!params.dir) return
-                          navigate(`/${params.dir}/session`)
-                        }}
-                        aria-label={language.t("command.session.new")}
-                        aria-current={creating() ? "page" : undefined}
-                      />
-                    </TooltipKeybind>
-                  </div>
-                </div>
-              </Show>
+      <Switch>
+        <Match when={useV2Titlebar()}>
+          {(_) => {
+            const serverSync = useServerSync()
+            const navigate = useNavigate()
+            const homeMatch = useMatch(() => "/")
+
+            const newSessionHref = () => {
+              if (params.dir) return `/${params.dir}/session`
+
+              const project = layout.projects.list()[0]
+              if (!project) return "/"
+
+              return `/${base64Encode(project.worktree)}/session`
+            }
+
+            type Tab = { dir: string; sessionId: string; href: string }
+
+            const [tabsStore, tabsStoreActions] = iife(() => {
+              const [store, setStore] = createStore<Tab[]>(
+                iife(() => {
+                  if (!params.dir || !params.id) return []
+                  return [
+                    {
+                      dir: decodeDirectory(params.dir) ?? "",
+                      sessionId: params.id,
+                      href: makeSessionHref(params.dir, params.id),
+                    },
+                  ]
+                }),
+              )
+
+              const actions = {
+                addTab: (tab: Tab) => {
+                  setStore(
+                    produce((tabs) => {
+                      if (tabs.some((t) => t.href === tab.href)) return
+
+                      tabs.push(tab)
+                    }),
+                  )
+                },
+                removeTab: (href: string) => {
+                  void startTransition(() => {
+                    setStore(
+                      produce((tabs) => {
+                        const index = tabs.findIndex((t) => t.href === href)
+                        if (index === -1) return
+                        tabs.splice(index, 1)
+                        const nextTab = tabs[index] ?? tabs[tabs.length - 1]
+                        if (nextTab) navigate(nextTab.href)
+                        else navigate("/")
+                      }),
+                    )
+                  })
+                },
+                removeSessions: (input: SessionTabsRemovedDetail) => {
+                  void startTransition(() => {
+                    setStore(
+                      produce((tabs) => {
+                        const sessionIDs = new Set(input.sessionIDs)
+                        const currentHref = params.dir && params.id ? makeSessionHref(params.dir, params.id) : undefined
+                        const currentIndex = currentHref ? tabs.findIndex((tab) => tab.href === currentHref) : -1
+                        const removedCurrent =
+                          currentIndex !== -1 &&
+                          tabs[currentIndex]?.dir === input.directory &&
+                          sessionIDs.has(tabs[currentIndex]?.sessionId ?? "")
+
+                        for (let i = tabs.length - 1; i >= 0; i--) {
+                          const tab = tabs[i]
+                          if (!tab) continue
+                          if (tab.dir !== input.directory) continue
+                          if (!sessionIDs.has(tab.sessionId)) continue
+                          tabs.splice(i, 1)
+                        }
+
+                        if (!removedCurrent) return
+                        const nextTab = tabs[currentIndex] ?? tabs[tabs.length - 1]
+                        if (nextTab) navigate(nextTab.href)
+                        else navigate("/")
+                      }),
+                    )
+                  })
+                },
+              }
+
+              return [store, actions]
+            })
+
+            makeEventListener(window, SESSION_TABS_REMOVED_EVENT, (event) => {
+              const detail = readSessionTabsRemovedDetail(event)
+              if (!detail) return
+              tabsStoreActions.removeSessions(detail)
+            })
+
+            createEffect(() => {
+              const params = useParams()
+              if (!(params.dir && params.id)) return
+
+              tabsStoreActions.addTab({
+                dir: decodeDirectory(params.dir) ?? "",
+                sessionId: params.id,
+                href: makeSessionHref(params.dir, params.id),
+              })
+            })
+
+            const projects = createMemo(() => layout.projects.list())
+            const projectByID = createMemo(
+              () => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
+            )
+
+            const currentSessionTab = () => {
+              if (!params.dir || !params.id) return
+              const href = makeSessionHref(params.dir, params.id)
+              return tabsStore.find((tab) => tab.href === href)
+            }
+
+            const closeCurrentSessionTab = () => {
+              const tab = currentSessionTab()
+              if (!tab) return false
+              tabsStoreActions.removeTab(tab.href)
+              return true
+            }
+
+            const closeNewSessionTab = () => {
+              if (!(params.dir && !params.id)) return false
+              const last = tabsStore[tabsStore.length - 1]
+              if (last) navigate(last.href)
+              else navigate("/")
+              return true
+            }
+
+            makeEventListener(
+              document,
+              "keydown",
+              (event) => {
+                if (!event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
+                if (event.key.toLowerCase() !== "w") return
+                if (!(closeCurrentSessionTab() || closeNewSessionTab())) return
+
+                event.preventDefault()
+                event.stopPropagation()
+              },
+              { capture: true },
+            )
+
+            command.register(() => {
+              const commands = [
+                {
+                  id: `tab.prev`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowLeft`,
+                  hidden: true,
+                  onSelect: () => {
+                    let index = tabsStore.findIndex((tab) => tab.href === currentSessionTab()?.href)
+                    if (index === -1) return
+
+                    index -= 1
+                    if (index === -1) index = tabsStore.length - 1
+
+                    const next = tabsStore[index]
+                    if (next) navigate(next.href)
+                  },
+                },
+                {
+                  id: `tab.next`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowRight`,
+                  hidden: true,
+                  onSelect: () => {
+                    let index = tabsStore.findIndex((tab) => tab.href === currentSessionTab()?.href)
+                    if (index === -1) return
+
+                    index += 1
+                    if (index === tabsStore.length) index = 0
+
+                    const next = tabsStore[index]
+                    if (next) navigate(next.href)
+                  },
+                },
+                ...Array.from({ length: 9 }, (_, i) => {
+                  const index = i
+                  const number = index + 1
+                  return {
+                    id: `tab.${number}`,
+                    category: "tab",
+                    title: "",
+                    keybind: `mod+${number}`,
+                    disabled: layout.projects.list().length <= index,
+                    hidden: true,
+                    onSelect: () => {
+                      const tab = tabsStore[index]
+                      if (tab) navigate(tab.href)
+                    },
+                  }
+                }),
+              ]
+
+              return commands
+            })
+
+            const tabsEnriched = iife(() => {
+              const base = mapArray(
+                () => tabsStore,
+                (tab) => {
+                  const sync = serverSync.createDirSyncContext(tab.dir)
+                  const session = sync.session.get(tab.sessionId)
+                  return session ? { ...tab, info: session } : null
+                },
+              )
+
+              return () => base().flatMap((s) => (s ? [s] : []))
+            })
+
+            return (
               <div
-                class="flex items-center shrink-0"
+                class="h-full flex-1 flex flex-row items-center gap-1.5 pr-3 py-2"
                 classList={{
-                  "-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
-                  "duration-180 ease-out": !layout.sidebar.opened(),
-                  "duration-180 ease-in": layout.sidebar.opened(),
+                  "pl-2": mac(),
+                  "pl-4": !mac(),
                 }}
               >
-                <Show when={hasProjects() && nav()}>
-                  <div class="flex items-center gap-0 transition-transform">
-                    <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-                      <Button
-                        variant="ghost"
-                        icon="chevron-left"
-                        class="titlebar-icon w-6 h-6 p-0 box-border"
-                        disabled={!canBack()}
-                        onClick={back}
-                        aria-label={language.t("common.goBack")}
-                      />
-                    </Tooltip>
-                    <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
-                      <Button
-                        variant="ghost"
-                        icon="chevron-right"
-                        class="titlebar-icon w-6 h-6 p-0 box-border"
-                        disabled={!canForward()}
-                        onClick={forward}
-                        aria-label={language.t("common.goForward")}
-                      />
-                    </Tooltip>
-                  </div>
+                <ChannelIndicator />
+                <Show when={windows() || linux()}>
+                  <WindowsAppMenu command={command} platform={platform} variant="v2" />
                 </Show>
-                <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
-                {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
-                  <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
-                    {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
+                <IconButtonV2
+                  variant="ghost-muted"
+                  size="large"
+                  as="a"
+                  href="/"
+                  class="!w-9"
+                  icon={<IconV2 name="grid-plus" />}
+                  state={!!homeMatch() ? "pressed" : undefined}
+                />
+
+                <div class="flex min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden">
+                  <div class="flex min-w-0 flex-row items-center gap-1.5 overflow-hidden">
+                    <For each={tabsEnriched()}>
+                      {(tab, i) => (
+                        <>
+                          {i() !== 0 && (
+                            <div class="w-[1.5px] h-3 shrink-0 rounded-full bg-[var(--v2-background-bg-layer-02)]" />
+                          )}
+                          <TabNavItem
+                            href={tab.href}
+                            title={tab.info.title}
+                            project={projectForSession(tab.info, projects(), projectByID())}
+                            directory={tab.dir}
+                            onClose={() => tabsStoreActions.removeTab(tab.href)}
+                          />
+                        </>
+                      )}
+                    </For>
                   </div>
-                )}
+                  <Show
+                    when={creating() && params.dir}
+                    fallback={
+                      <IconButtonV2
+                        type="button"
+                        variant="ghost-muted"
+                        size="large"
+                        class="shrink-0"
+                        icon={<IconV2 name="plus" />}
+                        as="a"
+                        href={newSessionHref()}
+                        aria-label={language.t("command.session.new")}
+                      />
+                    }
+                  >
+                    <NewSessionTabItem
+                      href={`/${params.dir}/session`}
+                      title={language.t("command.session.new")}
+                      onClose={() => navigate(tabsEnriched().at(-1)?.href ?? "/")}
+                    />
+                  </Show>
+                  <div class="min-w-0 flex-1" />
+                </div>
+                <TitlebarV2Right state={v2RightState()} />
+                <Show when={windows() && !electronWindows()}>
+                  <div data-tauri-decorum-tb class="flex flex-row" />
+                </Show>
+              </div>
+            )
+          }}
+        </Match>
+        <Match when>
+          <div
+            class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
+            style={{ zoom: counterZoom() }}
+          >
+            <div
+              classList={{
+                "flex items-center min-w-0": true,
+                "pl-2": !mac(),
+              }}
+            >
+              <Show when={windows() || linux()}>
+                <WindowsAppMenu command={command} platform={platform} />
+              </Show>
+              <Show when={mac()}>
+                {/*<div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />*/}
+                <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
+                </div>
+              </Show>
+              <Show when={!mac()}>
+                <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
+                </div>
+              </Show>
+              <div class="flex items-center gap-1 shrink-0">
+                <TooltipKeybind
+                  class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
+                  placement="bottom"
+                  title={language.t("command.sidebar.toggle")}
+                  keybind={command.keybind("sidebar.toggle")}
+                >
+                  <Button
+                    variant="ghost"
+                    class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                    onClick={layout.sidebar.toggle}
+                    aria-label={language.t("command.sidebar.toggle")}
+                    aria-expanded={layout.sidebar.opened()}
+                  >
+                    <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
+                  </Button>
+                </TooltipKeybind>
+                <div class="hidden xl:flex items-center shrink-0">
+                  <Show when={params.dir}>
+                    <div
+                      class="flex items-center shrink-0 w-8 mr-1"
+                      aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+                    >
+                      <div
+                        class="transition-opacity"
+                        classList={{
+                          "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
+                          "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                        }}
+                      >
+                        <TooltipKeybind
+                          placement="bottom"
+                          title={language.t("command.session.new")}
+                          keybind={command.keybind("session.new")}
+                          openDelay={2000}
+                        >
+                          <Button
+                            variant="ghost"
+                            icon={creating() ? "new-session-active" : "new-session"}
+                            class="titlebar-icon w-8 h-6 p-0 box-border"
+                            disabled={layout.sidebar.opened()}
+                            tabIndex={layout.sidebar.opened() ? -1 : undefined}
+                            onClick={() => {
+                              if (!params.dir) return
+                              navigate(`/${params.dir}/session`)
+                            }}
+                            aria-label={language.t("command.session.new")}
+                            aria-current={creating() ? "page" : undefined}
+                          />
+                        </TooltipKeybind>
+                      </div>
+                    </div>
+                  </Show>
+                  <div
+                    class="flex items-center shrink-0"
+                    classList={{
+                      "-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
+                      "duration-180 ease-out": !layout.sidebar.opened(),
+                      "duration-180 ease-in": layout.sidebar.opened(),
+                    }}
+                  >
+                    <Show when={hasProjects() && nav()}>
+                      <div class="flex items-center gap-0 transition-transform">
+                        <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-left"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canBack()}
+                            onClick={back}
+                            aria-label={language.t("common.goBack")}
+                          />
+                        </Tooltip>
+                        <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-right"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canForward()}
+                            onClick={forward}
+                            aria-label={language.t("common.goForward")}
+                          />
+                        </Tooltip>
+                      </div>
+                    </Show>
+                    <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+                    <ChannelIndicator />
+                  </div>
+                </div>
               </div>
             </div>
+
+            <div class="min-w-0 flex items-center justify-center pointer-events-none">
+              <div
+                id="opencode-titlebar-center"
+                class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full"
+              />
+            </div>
+
+            <div
+              classList={{
+                "flex items-center min-w-0 justify-end": true,
+                "pr-2": !windows(),
+              }}
+              data-tauri-drag-region
+              onMouseDown={drag}
+            >
+              <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
+              <Show when={windows()}>
+                {!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
+                <div data-tauri-decorum-tb class="flex flex-row" />
+              </Show>
+            </div>
           </div>
-        </div>
-
-        <div class="min-w-0 flex items-center justify-center pointer-events-none">
-          <div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
-        </div>
-
-        <div
-          classList={{
-            "flex items-center min-w-0 justify-end": true,
-            "pr-2": !windows(),
-          }}
-          data-tauri-drag-region
-          onMouseDown={drag}
-        >
-          <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
-          <Show when={windows()}>
-            {!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
-            <div data-tauri-decorum-tb class="flex flex-row" />
-          </Show>
-        </div>
-      </div>
+        </Match>
+      </Switch>
     </header>
   )
 }
+
+type TitlebarUpdatePillState = {
+  visible: boolean
+  installing: boolean
+  label: string
+  ariaLabel: string
+  title?: string
+  onInstall: () => void
+}
+
+type TitlebarV2RightState = {
+  update: TitlebarUpdatePillState
+  statusVisible: boolean
+  statusLabel: string
+}
+
+function TitlebarV2Right(props: { state: TitlebarV2RightState }) {
+  return (
+    <div class="flex shrink-0 items-center justify-end gap-0">
+      <TitlebarUpdatePill state={props.state.update} />
+      <Show when={props.state.statusVisible}>
+        <Tooltip placement="bottom" value={props.state.statusLabel}>
+          <StatusPopoverV2 scope="server" />
+        </Tooltip>
+      </Show>
+      <div id="opencode-titlebar-right" class="flex shrink-0 items-center justify-end gap-0" />
+    </div>
+  )
+}
+
+function TitlebarUpdatePill(props: { state: TitlebarUpdatePillState }) {
+  return (
+    <Show when={props.state.visible}>
+      <button
+        type="button"
+        class="h-5 shrink-0 rounded-[27px] bg-[var(--v2-background-bg-layer-03)] px-2.5 text-[11px] font-[530] leading-4 tracking-[0.05px] text-[var(--v2-text-text-base)] disabled:opacity-60"
+        onClick={props.state.onInstall}
+        disabled={props.state.installing}
+        aria-label={props.state.ariaLabel}
+        title={props.state.title}
+      >
+        {props.state.label}
+      </button>
+    </Show>
+  )
+}
+
+function TabNavItem(props: {
+  href: string
+  title: string
+  project?: LocalProject
+  directory: string
+  onClose: () => void
+}) {
+  const match = useMatch(() => props.href)
+  const isActive = () => !!match()
+  return (
+    <div
+      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      data-active={isActive()}
+    >
+      <a
+        href={props.href}
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
+      >
+        <ProjectTabAvatar project={props.project} directory={props.directory} />
+        <span class="text-clip leading-5">{props.title}</span>
+      </a>
+
+      <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+        <div
+          class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
+          style={{
+            "--inactive-bg": "linear-gradient(to right, transparent 0%, var(--tab-bg) 80%)",
+            "--active-bg": "linear-gradient(90deg, transparent 0%, var(--tab-bg) 25%)",
+          }}
+        />
+        <IconButtonV2
+          size="small"
+          variant="ghost-muted"
+          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100 z-10"
+          onClick={props.onClose}
+          icon={<IconV2 name="xmark-small" />}
+        />
+      </div>
+    </div>
+  )
+}
+
+function ProjectTabAvatar(props: { project?: LocalProject; directory: string }) {
+  return (
+    <AvatarV2
+      fallback={displayName(props.project ?? { worktree: props.directory })}
+      src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+      kind="org"
+      size="small"
+      {...getAvatarColors(props.project?.icon?.color)}
+      class="size-4 rounded"
+    />
+  )
+}
+
+function NewSessionTabItem(props: { href: string; title: string; onClose: () => void }) {
+  return (
+    <div class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]">
+      <a
+        href={props.href}
+        aria-current="page"
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-[var(--v2-text-text-base)]"
+      >
+        <span class="flex size-4 shrink-0 rotate-90 items-center justify-center">
+          <IconV2 name="edit" />
+        </span>
+        <span class="truncate leading-5">{props.title}</span>
+      </a>
+      <div class="absolute right-0 inset-y-0 flex w-7 items-center justify-center">
+        <IconButtonV2
+          size="small"
+          variant="ghost-muted"
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            props.onClose()
+          }}
+          icon={<IconV2 name="xmark-small" />}
+          aria-label="Close tab"
+        />
+      </div>
+    </div>
+  )
+}
+
+function ChannelIndicator() {
+  return (
+    <>
+      {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
+        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+          {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
+        </div>
+      )}
+    </>
+  )
+}

packages/app/src/components/windows-app-menu.tsx

@@ -0,0 +1,131 @@
+import { Show, type JSX } from "solid-js"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+
+import { useCommand } from "@/context/command"
+import { DESKTOP_MENU, desktopMenuVisible, type DesktopMenuAction, type DesktopMenuEntry } from "@/desktop-menu"
+import { usePlatform } from "@/context/platform"
+
+export function WindowsAppMenu(props: {
+  command: ReturnType<typeof useCommand>
+  platform: ReturnType<typeof usePlatform>
+  variant?: "legacy" | "v2"
+}) {
+  let lastFocused: HTMLElement | undefined
+
+  const rememberFocus = () => {
+    const active = document.activeElement
+    lastFocused = active instanceof HTMLElement ? active : undefined
+  }
+  const commandDisabled = (id: string) => {
+    const option = props.command.options.find((option) => option.id === id)
+    if (!option) return true
+    return option.disabled ?? false
+  }
+  const runCommand = (id: string) => {
+    if (commandDisabled(id)) return
+    props.command.trigger(id)
+  }
+  const runAction = (action: DesktopMenuAction) => {
+    if (action.startsWith("edit.") && lastFocused?.isConnected) lastFocused.focus({ preventScroll: true })
+    void props.platform.runDesktopMenuAction?.(action)
+  }
+  const runEntry = (entry: DesktopMenuEntry) => {
+    if (entry.type === "separator") return
+    if (entry.command) {
+      runCommand(entry.command)
+      return
+    }
+    if (entry.action) {
+      runAction(entry.action)
+      return
+    }
+    if (entry.href) props.platform.openLink(entry.href)
+  }
+
+  return (
+    <DropdownMenu gutter={4} modal={false} placement="bottom-start">
+      {props.variant === "v2" ? (
+        <div
+          data-component="desktop-icon-button"
+          class="flex h-7 w-9 shrink-0 items-center justify-center rounded-[6px] px-1"
+        >
+          <DropdownMenu.Trigger
+            as={IconButtonV2}
+            variant="ghost-muted"
+            size="large"
+            icon={<IconV2 name="menu" />}
+            aria-label="OpenCode menu"
+            onPointerDown={rememberFocus}
+            onKeyDown={rememberFocus}
+          />
+        </div>
+      ) : (
+        <DropdownMenu.Trigger
+          as={IconButton}
+          icon="menu"
+          variant="ghost"
+          class="titlebar-icon rounded-md shrink-0"
+          aria-label="OpenCode menu"
+          onPointerDown={rememberFocus}
+          onKeyDown={rememberFocus}
+        />
+      )}
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content class="desktop-app-menu">
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupLabel class="desktop-app-menu-heading">OpenCode</DropdownMenu.GroupLabel>
+            {DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows")).map((menu) => (
+              <DesktopMenuSubmenu label={menu.label}>
+                {menu.items
+                  ?.filter((entry) => desktopMenuVisible(entry, "windows"))
+                  .map((entry) =>
+                    entry.type === "separator" ? (
+                      <DropdownMenu.Separator />
+                    ) : (
+                      <DesktopMenuItem
+                        label={entry.label ?? ""}
+                        keybind={entry.command ? props.command.keybind(entry.command) : entry.accelerator?.windows}
+                        disabled={entry.command ? commandDisabled(entry.command) : false}
+                        onSelect={() => runEntry(entry)}
+                      />
+                    ),
+                  )}
+              </DesktopMenuSubmenu>
+            ))}
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}
+
+function DesktopMenuSubmenu(props: { label: string; children: JSX.Element }) {
+  return (
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>
+        <span data-slot="dropdown-menu-item-label">{props.label}</span>
+        <span data-slot="desktop-app-menu-chevron">
+          <Icon name="chevron-right" size="small" />
+        </span>
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.SubContent class="desktop-app-menu">{props.children}</DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Sub>
+  )
+}
+
+function DesktopMenuItem(props: { label: string; keybind?: string; disabled?: boolean; onSelect: () => void }) {
+  return (
+    <DropdownMenu.Item disabled={props.disabled} onSelect={props.onSelect}>
+      <DropdownMenu.ItemLabel>{props.label}</DropdownMenu.ItemLabel>
+      <Show when={props.keybind}>
+        <span data-slot="desktop-app-menu-keybind">{props.keybind}</span>
+      </Show>
+    </DropdownMenu.Item>
+  )
+}

packages/app/src/context/directory-sync.ts

@@ -0,0 +1,613 @@
+import { batch, createMemo } from "solid-js"
+import { createStore, produce, reconcile } from "solid-js/store"
+import { Binary } from "@opencode-ai/core/util/binary"
+import { retry } from "@opencode-ai/core/util/retry"
+import {
+  clearSessionPrefetch,
+  getSessionPrefetch,
+  getSessionPrefetchPromise,
+  setSessionPrefetch,
+} from "./global-sync/session-prefetch"
+import { createServerSyncContext } from "./server-sync"
+import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache"
+import { diffs as list, message as clean } from "@/utils/diffs"
+import { useServerSDK } from "./server-sdk"
+
+const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
+
+function sortParts(parts: Part[]) {
+  return parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id))
+}
+
+function runInflight(map: Map<string, Promise<void>>, key: string, task: () => Promise<void>) {
+  const pending = map.get(key)
+  if (pending) return pending
+  const promise = task().finally(() => {
+    map.delete(key)
+  })
+  map.set(key, promise)
+  return promise
+}
+
+const keyFor = (directory: string, id: string) => `${directory}\n${id}`
+
+const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
+
+const isNotFound = (error: unknown) =>
+  error instanceof Error &&
+  typeof error.cause === "object" &&
+  error.cause !== null &&
+  (error.cause as { status?: unknown }).status === 404
+
+function merge<T extends { id: string }>(a: readonly T[], b: readonly T[]) {
+  const map = new Map(a.map((item) => [item.id, item] as const))
+  for (const item of b) map.set(item.id, item)
+  return [...map.values()].sort((x, y) => cmp(x.id, y.id))
+}
+
+type OptimisticStore = {
+  message: Record<string, Message[] | undefined>
+  part: Record<string, Part[] | undefined>
+}
+
+type OptimisticAddInput = {
+  sessionID: string
+  message: Message
+  parts: Part[]
+}
+
+type OptimisticRemoveInput = {
+  sessionID: string
+  messageID: string
+}
+
+type OptimisticItem = {
+  message: Message
+  parts: Part[]
+}
+
+type MessagePage = {
+  session: Message[]
+  part: { id: string; part: Part[] }[]
+  cursor?: string
+  complete: boolean
+}
+
+const hasParts = (parts: Part[] | undefined, want: Part[]) => {
+  if (!parts) return want.length === 0
+  return want.every((part) => Binary.search(parts, part.id, (item) => item.id).found)
+}
+
+const mergeParts = (parts: Part[] | undefined, want: Part[]) => {
+  if (!parts) return sortParts(want)
+  const next = [...parts]
+  let changed = false
+  for (const part of want) {
+    const result = Binary.search(next, part.id, (item) => item.id)
+    if (result.found) continue
+    next.splice(result.index, 0, part)
+    changed = true
+  }
+  if (!changed) return parts
+  return next
+}
+
+export function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[]) {
+  if (items.length === 0) return { ...page, confirmed: [] as string[] }
+
+  const session = [...page.session]
+  const part = new Map(page.part.map((item) => [item.id, sortParts(item.part)]))
+  const confirmed: string[] = []
+
+  for (const item of items) {
+    const result = Binary.search(session, item.message.id, (message) => message.id)
+    const found = result.found
+    if (!found) session.splice(result.index, 0, item.message)
+
+    const current = part.get(item.message.id)
+    if (found && hasParts(current, item.parts)) {
+      confirmed.push(item.message.id)
+      continue
+    }
+
+    part.set(item.message.id, mergeParts(current, item.parts))
+  }
+
+  return {
+    cursor: page.cursor,
+    complete: page.complete,
+    session,
+    part: [...part.entries()].sort((a, b) => cmp(a[0], b[0])).map(([id, part]) => ({ id, part })),
+    confirmed,
+  }
+}
+
+export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddInput) {
+  const messages = draft.message[input.sessionID]
+  if (messages) {
+    const result = Binary.search(messages, input.message.id, (m) => m.id)
+    messages.splice(result.index, 0, input.message)
+  } else {
+    draft.message[input.sessionID] = [input.message]
+  }
+  draft.part[input.message.id] = sortParts(input.parts)
+}
+
+export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticRemoveInput) {
+  const messages = draft.message[input.sessionID]
+  if (messages) {
+    const result = Binary.search(messages, input.messageID, (m) => m.id)
+    if (result.found) messages.splice(result.index, 1)
+  }
+  delete draft.part[input.messageID]
+}
+
+function setOptimisticAdd(setStore: (...args: unknown[]) => void, input: OptimisticAddInput) {
+  setStore("message", input.sessionID, (messages: Message[] | undefined) => {
+    if (!messages) return [input.message]
+    const result = Binary.search(messages, input.message.id, (m) => m.id)
+    const next = [...messages]
+    next.splice(result.index, 0, input.message)
+    return next
+  })
+  setStore("part", input.message.id, sortParts(input.parts))
+}
+
+function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: OptimisticRemoveInput) {
+  setStore("message", input.sessionID, (messages: Message[] | undefined) => {
+    if (!messages) return messages
+    const result = Binary.search(messages, input.messageID, (m) => m.id)
+    if (!result.found) return messages
+    const next = [...messages]
+    next.splice(result.index, 1)
+    return next
+  })
+  setStore("part", (part: Record<string, Part[] | undefined>) => {
+    if (!(input.messageID in part)) return part
+    const next = { ...part }
+    delete next[input.messageID]
+    return next
+  })
+}
+
+export const createDirSyncContext = (directory: string, serverSync: ReturnType<typeof createServerSyncContext>) => {
+  const serverSDK = useServerSDK()
+  const client = serverSDK.createClient({ directory, throwOnError: true })
+
+  type Child = ReturnType<(typeof serverSync)["child"]>
+  type Setter = Child[1]
+
+  const current = createMemo(() => serverSync.child(directory))
+  const target = (directory?: string) => {
+    if (!directory || directory === directory) return current()
+    return serverSync.child(directory)
+  }
+  const absolute = (path: string) => (current()[0].path.directory + "/" + path).replace("//", "/")
+  const initialMessagePageSize = 80
+  const historyMessagePageSize = 200
+  const inflight = new Map<string, Promise<void>>()
+  const inflightDiff = new Map<string, Promise<void>>()
+  const inflightTodo = new Map<string, Promise<void>>()
+  const optimistic = new Map<string, Map<string, OptimisticItem>>()
+  const maxDirs = 30
+  const seen = new Map<string, Set<string>>()
+  const [meta, setMeta] = createStore({
+    limit: {} as Record<string, number>,
+    cursor: {} as Record<string, string | undefined>,
+    complete: {} as Record<string, boolean>,
+    loading: {} as Record<string, boolean>,
+  })
+
+  const getSession = (sessionID: string) => {
+    const store = current()[0]
+    const match = Binary.search(store.session, sessionID, (s) => s.id)
+    if (match.found) return store.session[match.index]
+    return undefined
+  }
+
+  const setOptimistic = (directory: string, sessionID: string, item: OptimisticItem) => {
+    const key = keyFor(directory, sessionID)
+    const list = optimistic.get(key)
+    if (list) {
+      list.set(item.message.id, { message: item.message, parts: sortParts(item.parts) })
+      return
+    }
+    optimistic.set(key, new Map([[item.message.id, { message: item.message, parts: sortParts(item.parts) }]]))
+  }
+
+  const clearOptimistic = (directory: string, sessionID: string, messageID?: string) => {
+    const key = keyFor(directory, sessionID)
+    if (!messageID) {
+      optimistic.delete(key)
+      return
+    }
+
+    const list = optimistic.get(key)
+    if (!list) return
+    list.delete(messageID)
+    if (list.size === 0) optimistic.delete(key)
+  }
+
+  const getOptimistic = (directory: string, sessionID: string) => [
+    ...(optimistic.get(keyFor(directory, sessionID))?.values() ?? []),
+  ]
+
+  const seenFor = (directory: string) => {
+    const existing = seen.get(directory)
+    if (existing) {
+      seen.delete(directory)
+      seen.set(directory, existing)
+      return existing
+    }
+    const created = new Set<string>()
+    seen.set(directory, created)
+    while (seen.size > maxDirs) {
+      const first = seen.keys().next().value
+      if (!first) break
+      const stale = [...(seen.get(first) ?? [])]
+      seen.delete(first)
+      const [, setStore] = serverSync.child(first, { bootstrap: false })
+      evict(first, setStore, stale)
+    }
+    return created
+  }
+
+  const clearMeta = (directory: string, sessionIDs: string[]) => {
+    if (sessionIDs.length === 0) return
+    for (const sessionID of sessionIDs) {
+      clearOptimistic(directory, sessionID)
+    }
+    setMeta(
+      produce((draft) => {
+        for (const sessionID of sessionIDs) {
+          const key = keyFor(directory, sessionID)
+          delete draft.limit[key]
+          delete draft.cursor[key]
+          delete draft.complete[key]
+          delete draft.loading[key]
+        }
+      }),
+    )
+  }
+
+  const evict = (directory: string, setStore: Setter, sessionIDs: string[]) => {
+    if (sessionIDs.length === 0) return
+    clearSessionPrefetch(directory, sessionIDs)
+    for (const sessionID of sessionIDs) {
+      serverSync.todo.set(sessionID, undefined)
+    }
+    setStore(
+      produce((draft) => {
+        dropSessionCaches(draft, sessionIDs)
+      }),
+    )
+    clearMeta(directory, sessionIDs)
+  }
+
+  const touch = (directory: string, setStore: Setter, sessionID: string) => {
+    const stale = pickSessionCacheEvictions({
+      seen: seenFor(directory),
+      keep: sessionID,
+      limit: SESSION_CACHE_LIMIT,
+    })
+    evict(directory, setStore, stale)
+  }
+
+  const fetchMessages = async (input: { client: typeof client; sessionID: string; limit: number; before?: string }) => {
+    const messages = await retry(() =>
+      input.client.session.messages({ sessionID: input.sessionID, limit: input.limit, before: input.before }),
+    )
+    const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
+    const session = items.map((x) => clean(x.info)).sort((a, b) => cmp(a.id, b.id))
+    const part = items.map((message) => ({ id: message.info.id, part: sortParts(message.parts) }))
+    const cursor = messages.response.headers.get("x-next-cursor") ?? undefined
+    return {
+      session,
+      part,
+      cursor,
+      complete: !cursor,
+    }
+  }
+
+  const tracked = (directory: string, sessionID: string) => seen.get(directory)?.has(sessionID) ?? false
+
+  const loadMessages = async (input: {
+    directory: string
+    client: typeof client
+    setStore: Setter
+    sessionID: string
+    limit: number
+    before?: string
+    mode?: "replace" | "prepend"
+  }) => {
+    const key = keyFor(input.directory, input.sessionID)
+    if (meta.loading[key]) return
+
+    setMeta("loading", key, true)
+    await fetchMessages(input)
+      .then((page) => {
+        if (!tracked(input.directory, input.sessionID)) return
+        const next = mergeOptimisticPage(page, getOptimistic(input.directory, input.sessionID))
+        for (const messageID of next.confirmed) {
+          clearOptimistic(input.directory, input.sessionID, messageID)
+        }
+        const [store] = serverSync.child(input.directory, { bootstrap: false })
+        const cached = input.mode === "prepend" ? (store.message[input.sessionID] ?? []) : []
+        const message = input.mode === "prepend" ? merge(cached, next.session) : next.session
+        batch(() => {
+          input.setStore("message", input.sessionID, reconcile(message, { key: "id" }))
+          for (const p of next.part) {
+            const filtered = p.part.filter((x) => !SKIP_PARTS.has(x.type))
+            if (filtered.length) input.setStore("part", p.id, filtered)
+          }
+          setMeta("limit", key, message.length)
+          setMeta("cursor", key, next.cursor)
+          setMeta("complete", key, next.complete)
+          setSessionPrefetch({
+            directory: input.directory,
+            sessionID: input.sessionID,
+            limit: message.length,
+            cursor: next.cursor,
+            complete: next.complete,
+          })
+        })
+      })
+      .catch((error) => {
+        if (isNotFound(error) && !tracked(input.directory, input.sessionID)) return
+        throw error
+      })
+      .finally(() => {
+        setMeta(
+          produce((draft) => {
+            if (!tracked(input.directory, input.sessionID)) {
+              delete draft.loading[key]
+              return
+            }
+            draft.loading[key] = false
+          }),
+        )
+      })
+  }
+
+  return {
+    get data() {
+      return current()[0]
+    },
+    get set(): Setter {
+      return current()[1]
+    },
+    get status() {
+      return current()[0].status
+    },
+    get ready() {
+      return current()[0].status !== "loading"
+    },
+    get project() {
+      const store = current()[0]
+      const match = Binary.search(serverSync.data.project, store.project, (p) => p.id)
+      if (match.found) return serverSync.data.project[match.index]
+      return undefined
+    },
+    session: {
+      get: getSession,
+      optimistic: {
+        add(input: { directory?: string; sessionID: string; message: Message; parts: Part[] }) {
+          const _directory = input.directory ?? directory
+          const [, setStore] = target(input.directory)
+          setOptimistic(_directory, input.sessionID, { message: input.message, parts: input.parts })
+          setOptimisticAdd(setStore as (...args: unknown[]) => void, input)
+        },
+        remove(input: { directory?: string; sessionID: string; messageID: string }) {
+          const _directory = input.directory ?? directory
+          const [, setStore] = target(input.directory)
+          clearOptimistic(_directory, input.sessionID, input.messageID)
+          setOptimisticRemove(setStore as (...args: unknown[]) => void, input)
+        },
+      },
+      addOptimisticMessage(input: {
+        sessionID: string
+        messageID: string
+        parts: Part[]
+        agent: string
+        model: { providerID: string; modelID: string }
+        variant?: string
+      }) {
+        const message: Message = {
+          id: input.messageID,
+          sessionID: input.sessionID,
+          role: "user",
+          time: { created: Date.now() },
+          agent: input.agent,
+          model: { ...input.model, variant: input.variant },
+        }
+        const [, setStore] = target()
+        setOptimistic(directory, input.sessionID, { message, parts: input.parts })
+        setOptimisticAdd(setStore as (...args: unknown[]) => void, {
+          sessionID: input.sessionID,
+          message,
+          parts: input.parts,
+        })
+      },
+      async sync(sessionID: string, opts?: { force?: boolean }) {
+        const [store, setStore] = serverSync.child(directory)
+        const key = keyFor(directory, sessionID)
+
+        touch(directory, setStore, sessionID)
+
+        const seeded = getSessionPrefetch(directory, sessionID)
+        if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
+          batch(() => {
+            setMeta("limit", key, seeded.limit)
+            setMeta("cursor", key, seeded.cursor)
+            setMeta("complete", key, seeded.complete)
+            setMeta("loading", key, false)
+          })
+        }
+
+        return runInflight(inflight, key, async () => {
+          const pending = getSessionPrefetchPromise(directory, sessionID)
+          if (pending) {
+            await pending
+            const seeded = getSessionPrefetch(directory, sessionID)
+            if (seeded && store.message[sessionID] !== undefined && meta.limit[key] === undefined) {
+              batch(() => {
+                setMeta("limit", key, seeded.limit)
+                setMeta("cursor", key, seeded.cursor)
+                setMeta("complete", key, seeded.complete)
+                setMeta("loading", key, false)
+              })
+            }
+          }
+
+          const hasSession = Binary.search(store.session, sessionID, (s) => s.id).found
+          const cached = store.message[sessionID] !== undefined && meta.limit[key] !== undefined
+          if (cached && hasSession && !opts?.force) return
+
+          const limit = meta.limit[key] ?? initialMessagePageSize
+          const sessionReq =
+            hasSession && !opts?.force
+              ? Promise.resolve()
+              : retry(() => client.session.get({ sessionID }))
+                  .then((session) => {
+                    if (!tracked(directory, sessionID)) return
+                    const data = session.data
+                    if (!data) return
+                    setStore(
+                      "session",
+                      produce((draft) => {
+                        const match = Binary.search(draft, sessionID, (s) => s.id)
+                        if (match.found) {
+                          draft[match.index] = data
+                          return
+                        }
+                        draft.splice(match.index, 0, data)
+                      }),
+                    )
+                  })
+                  .catch((error) => {
+                    if (isNotFound(error) && !tracked(directory, sessionID)) return
+                    throw error
+                  })
+
+          const messagesReq =
+            cached && !opts?.force
+              ? Promise.resolve()
+              : loadMessages({
+                  directory,
+                  client,
+                  setStore,
+                  sessionID,
+                  limit,
+                })
+
+          await Promise.all([sessionReq, messagesReq])
+        })
+      },
+      async diff(sessionID: string, opts?: { force?: boolean }) {
+        const [store, setStore] = serverSync.child(directory)
+        touch(directory, setStore, sessionID)
+        if (store.session_diff[sessionID] !== undefined && !opts?.force) return
+
+        const key = keyFor(directory, sessionID)
+        return runInflight(inflightDiff, key, () =>
+          retry(() => client.session.diff({ sessionID })).then((diff) => {
+            if (!tracked(directory, sessionID)) return
+            setStore("session_diff", sessionID, reconcile(list(diff.data), { key: "file" }))
+          }),
+        )
+      },
+      async todo(sessionID: string, opts?: { force?: boolean }) {
+        const [store, setStore] = serverSync.child(directory)
+        touch(directory, setStore, sessionID)
+        const existing = store.todo[sessionID]
+        const cached = serverSync.data.session_todo[sessionID]
+        if (existing !== undefined) {
+          if (cached === undefined) {
+            serverSync.todo.set(sessionID, existing)
+          }
+          if (!opts?.force) return
+        }
+
+        if (cached !== undefined) {
+          setStore("todo", sessionID, reconcile(cached, { key: "id" }))
+        }
+
+        const key = keyFor(directory, sessionID)
+        return runInflight(inflightTodo, key, () =>
+          retry(() => client.session.todo({ sessionID })).then((todo) => {
+            if (!tracked(directory, sessionID)) return
+            const list = todo.data ?? []
+            setStore("todo", sessionID, reconcile(list, { key: "id" }))
+            serverSync.todo.set(sessionID, list)
+          }),
+        )
+      },
+      history: {
+        more(sessionID: string) {
+          const store = current()[0]
+          const key = keyFor(directory, sessionID)
+          if (store.message[sessionID] === undefined) return false
+          if (meta.limit[key] === undefined) return false
+          if (meta.complete[key]) return false
+          return !!meta.cursor[key]
+        },
+        loading(sessionID: string) {
+          const key = keyFor(directory, sessionID)
+          return meta.loading[key] ?? false
+        },
+        async loadMore(sessionID: string, count?: number) {
+          const [, setStore] = serverSync.child(directory)
+          touch(directory, setStore, sessionID)
+          const key = keyFor(directory, sessionID)
+          const step = count ?? historyMessagePageSize
+          if (meta.loading[key]) return
+          if (meta.complete[key]) return
+          const before = meta.cursor[key]
+          if (!before) return
+
+          await loadMessages({
+            directory,
+            client,
+            setStore,
+            sessionID,
+            limit: step,
+            before,
+            mode: "prepend",
+          })
+        },
+      },
+      evict(sessionID: string, _directory = directory) {
+        const [, setStore] = serverSync.child(_directory)
+        seenFor(_directory).delete(sessionID)
+        evict(_directory, setStore, [sessionID])
+      },
+      fetch: async (count = 10) => {
+        const [store, setStore] = serverSync.child(directory)
+        setStore("limit", (x) => x + count)
+        await client.session.list().then((x) => {
+          const sessions = (x.data ?? [])
+            .filter((s) => !!s?.id)
+            .sort((a, b) => cmp(a.id, b.id))
+            .slice(0, store.limit)
+          setStore("session", reconcile(sessions, { key: "id" }))
+        })
+      },
+      more: createMemo(() => current()[0].session.length >= current()[0].limit),
+      archive: async (sessionID: string) => {
+        const [, setStore] = serverSync.child(directory)
+        await client.session.update({ sessionID, time: { archived: Date.now() } })
+        setStore(
+          produce((draft) => {
+            const match = Binary.search(draft.session, sessionID, (s) => s.id)
+            if (match.found) draft.session.splice(match.index, 1)
+          }),
+        )
+      },
+    },
+    absolute,
+    get directory() {
+      return current()[0].path.directory
+    },
+  }
+}

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

@@ -1,254 +0,0 @@
-import type { Event } from "@opencode-ai/sdk/v2/client"
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { batch, onCleanup, onMount } from "solid-js"
-import { createSdkForServer } from "@/utils/server"
-import { useLanguage } from "./language"
-import { usePlatform } from "./platform"
-import { useServer } from "./server"
-
-const isAbortError = (error: unknown) =>
-  error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
-
-export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
-  name: "GlobalSDK",
-  init: () => {
-    const language = useLanguage()
-    const server = useServer()
-    const platform = usePlatform()
-    const abort = new AbortController()
-
-    const eventFetch = (() => {
-      if (!platform.fetch || !server.current) return
-      try {
-        const url = new URL(server.current.http.url)
-        const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
-        if (url.protocol === "http:" && !loopback) return platform.fetch
-      } catch {
-        return
-      }
-    })()
-
-    const currentServer = server.current
-    if (!currentServer) throw new Error(language.t("error.globalSDK.noServerAvailable"))
-
-    const eventSdk = createSdkForServer({
-      signal: abort.signal,
-      fetch: eventFetch,
-      server: currentServer.http,
-    })
-    const emitter = createGlobalEmitter<{
-      [key: string]: Event
-    }>()
-
-    type Queued = { directory: string; payload: Event }
-    const FLUSH_FRAME_MS = 16
-    const STREAM_YIELD_MS = 8
-    const RECONNECT_DELAY_MS = 250
-
-    let queue: Queued[] = []
-    let buffer: Queued[] = []
-    const coalesced = new Map<string, number>()
-    const staleDeltas = new Set<string>()
-    let timer: ReturnType<typeof setTimeout> | undefined
-    let last = 0
-
-    const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
-
-    const key = (directory: string, payload: Event) => {
-      if (payload.type === "session.status") return `session.status:${directory}:${payload.properties.sessionID}`
-      if (payload.type === "lsp.updated") return `lsp.updated:${directory}`
-      if (payload.type === "message.part.updated") {
-        const part = payload.properties.part
-        return `message.part.updated:${directory}:${part.messageID}:${part.id}`
-      }
-    }
-
-    const flush = () => {
-      if (timer) clearTimeout(timer)
-      timer = undefined
-
-      if (queue.length === 0) return
-
-      const events = queue
-      const skip = staleDeltas.size > 0 ? new Set(staleDeltas) : undefined
-      queue = buffer
-      buffer = events
-      queue.length = 0
-      coalesced.clear()
-      staleDeltas.clear()
-
-      last = Date.now()
-      batch(() => {
-        for (const event of events) {
-          if (skip && event.payload.type === "message.part.delta") {
-            const props = event.payload.properties
-            if (skip.has(deltaKey(event.directory, props.messageID, props.partID))) continue
-          }
-          emitter.emit(event.directory, event.payload)
-        }
-      })
-
-      buffer.length = 0
-    }
-
-    const schedule = () => {
-      if (timer) return
-      const elapsed = Date.now() - last
-      timer = setTimeout(flush, Math.max(0, FLUSH_FRAME_MS - elapsed))
-    }
-
-    let streamErrorLogged = false
-    const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
-    const aborted = isAbortError
-
-    let attempt: AbortController | undefined
-    let run: Promise<void> | undefined
-    let started = false
-    const HEARTBEAT_TIMEOUT_MS = 15_000
-    let lastEventAt = Date.now()
-    let heartbeat: ReturnType<typeof setTimeout> | undefined
-    const resetHeartbeat = () => {
-      lastEventAt = Date.now()
-      if (heartbeat) clearTimeout(heartbeat)
-      heartbeat = setTimeout(() => {
-        attempt?.abort()
-      }, HEARTBEAT_TIMEOUT_MS)
-    }
-    const clearHeartbeat = () => {
-      if (!heartbeat) return
-      clearTimeout(heartbeat)
-      heartbeat = undefined
-    }
-
-    const start = () => {
-      if (started) return run
-      started = true
-      run = (async () => {
-        // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
-        while (!abort.signal.aborted && started) {
-          attempt = new AbortController()
-          lastEventAt = Date.now()
-          const onAbort = () => {
-            attempt?.abort()
-          }
-          abort.signal.addEventListener("abort", onAbort)
-          try {
-            const events = await eventSdk.global.event({
-              signal: attempt.signal,
-              onSseError: (error) => {
-                if (aborted(error)) return
-                if (streamErrorLogged) return
-                streamErrorLogged = true
-                console.error("[global-sdk] event stream error", {
-                  url: currentServer.http.url,
-                  fetch: eventFetch ? "platform" : "webview",
-                  error,
-                })
-              },
-            })
-            let yielded = Date.now()
-            resetHeartbeat()
-            for await (const event of events.stream) {
-              resetHeartbeat()
-              streamErrorLogged = false
-              const directory = event.directory ?? "global"
-              if (event.payload.type === "sync") {
-                continue
-              }
-
-              const payload = event.payload as Event
-
-              const k = key(directory, payload)
-              if (k) {
-                const i = coalesced.get(k)
-                if (i !== undefined) {
-                  queue[i] = { directory, payload }
-                  if (payload.type === "message.part.updated") {
-                    const part = payload.properties.part
-                    staleDeltas.add(deltaKey(directory, part.messageID, part.id))
-                  }
-                  continue
-                }
-                coalesced.set(k, queue.length)
-              }
-              queue.push({ directory, payload })
-              schedule()
-
-              if (Date.now() - yielded < STREAM_YIELD_MS) continue
-              yielded = Date.now()
-              await wait(0)
-            }
-          } catch (error) {
-            if (!aborted(error) && !streamErrorLogged) {
-              streamErrorLogged = true
-              console.error("[global-sdk] event stream failed", {
-                url: currentServer.http.url,
-                fetch: eventFetch ? "platform" : "webview",
-                error,
-              })
-            }
-          } finally {
-            abort.signal.removeEventListener("abort", onAbort)
-            attempt = undefined
-            clearHeartbeat()
-          }
-
-          if (abort.signal.aborted || !started) return
-          await wait(RECONNECT_DELAY_MS)
-        }
-      })().finally(() => {
-        run = undefined
-        flush()
-      })
-      return run
-    }
-
-    const stop = () => {
-      started = false
-      attempt?.abort()
-      clearHeartbeat()
-    }
-
-    onMount(() => {
-      makeEventListener(document, "visibilitychange", () => {
-        if (document.visibilityState !== "visible") return
-        if (!started) return
-        if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
-        attempt?.abort()
-      })
-    })
-
-    onCleanup(() => {
-      stop()
-      abort.abort()
-      flush()
-    })
-
-    const sdk = createSdkForServer({
-      server: server.current.http,
-      fetch: platform.fetch,
-      throwOnError: true,
-    })
-
-    return {
-      url: currentServer.http.url,
-      client: sdk,
-      event: {
-        on: emitter.on.bind(emitter),
-        listen: emitter.listen.bind(emitter),
-        start,
-      },
-      createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
-        const s = server.current
-        if (!s) throw new Error(language.t("error.globalSDK.serverNotAvailable"))
-        return createSdkForServer({
-          server: s.http,
-          fetch: platform.fetch,
-          ...opts,
-        })
-      },
-    }
-  },
-})

packages/app/src/context/global-sync/bootstrap.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, test } from "bun:test"
+import { createStore } from "solid-js/store"
+import { QueryClient } from "@tanstack/solid-query"
+import type { Config, OpencodeClient, Project } from "@opencode-ai/sdk/v2/client"
+import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { bootstrapDirectory } from "./bootstrap"
+import type { State, VcsCache } from "./types"
+
+const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
+
+describe("bootstrapDirectory", () => {
+  test("marks a loading directory partial during bootstrap and complete after success", async () => {
+    const [store, setStore] = createStore<State>({
+      status: "loading",
+      agent: [],
+      command: [],
+      project: "",
+      projectMeta: undefined,
+      icon: undefined,
+      provider_ready: true,
+      provider,
+      config: {},
+      path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+      session: [],
+      sessionTotal: 0,
+      session_status: {},
+      session_working(id: string) {
+        return this.session_status[id]?.type !== "idle"
+      },
+      session_diff: {},
+      todo: {},
+      permission: {},
+      question: {},
+      mcp_ready: true,
+      mcp: {},
+      lsp_ready: true,
+      lsp: [],
+      vcs: undefined,
+      limit: 5,
+      message: {},
+      part: {},
+      part_text_accum_delta: {},
+    })
+
+    await bootstrapDirectory({
+      directory: "/project",
+      global: {
+        config: {} satisfies Config,
+        path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+        project: [{ id: "project", worktree: "/project" } as Project],
+        provider,
+      },
+      sdk: {
+        app: { agents: async () => ({ data: [{ name: "build", mode: "primary" }] }) },
+        config: { get: async () => ({ data: {} }) },
+        session: { status: async () => ({ data: {} }) },
+        vcs: { get: async () => ({ data: undefined }) },
+        command: { list: async () => ({ data: [] }) },
+        permission: { list: async () => ({ data: [] }) },
+        question: { list: async () => ({ data: [] }) },
+        mcp: { status: async () => ({ data: {} }) },
+        provider: { list: async () => ({ data: { all: [], connected: [], default: {} } }) },
+      } as unknown as OpencodeClient,
+      store,
+      setStore,
+      vcsCache: { setStore() {} } as unknown as VcsCache,
+      loadSessions() {},
+      translate: (key) => key,
+      queryClient: new QueryClient(),
+    })
+
+    expect(store.status).toBe("partial")
+
+    await new Promise((resolve) => setTimeout(resolve, 80))
+
+    expect(store.status).toBe("complete")
+  })
+})

packages/app/src/context/global-sync/bootstrap.ts

@@ -5,7 +5,6 @@ import type {
   PermissionRequest,
   Project,
   ProviderAuthResponse,
-  ProviderListResponse,
   QuestionRequest,
   Session,
   Todo,
@@ -19,7 +18,8 @@ import type { State, VcsCache } from "./types"
 import { cmp, normalizeAgentList, normalizeProviderList } from "./utils"
 import { formatServerError } from "@/utils/server-errors"
 import { QueryClient, queryOptions } from "@tanstack/solid-query"
-import { loadMcpQuery } from "../global-sync"
+import { loadMcpQuery } from "../server-sync"
+import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 
 type GlobalStore = {
   ready: boolean
@@ -28,7 +28,7 @@ type GlobalStore = {
   session_todo: {
     [sessionID: string]: Todo[]
   }
-  provider: ProviderListResponse
+  provider: NormalizedProviderListResponse
   provider_auth: ProviderAuthResponse
   config: Config
   reload: undefined | "pending" | "complete"
@@ -105,7 +105,7 @@ export const loadProjectsQuery = (sdk: OpencodeClient) =>
   })
 
 export async function bootstrapGlobal(input: {
-  globalSDK: OpencodeClient
+  serverSDK: OpencodeClient
   requestFailedTitle: string
   translate: (key: string, vars?: Record<string, string | number>) => string
   formatMoreCount: (count: number) => string
@@ -113,12 +113,12 @@ export async function bootstrapGlobal(input: {
   queryClient: QueryClient
 }) {
   const slow = [
-    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.globalSDK)),
-    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.globalSDK)),
-    () => input.queryClient.fetchQuery(loadPathQuery(null, input.globalSDK)),
+    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadPathQuery(null, input.serverSDK)),
     () =>
       input.queryClient
-        .fetchQuery(loadProjectsQuery(input.globalSDK))
+        .fetchQuery(loadProjectsQuery(input.serverSDK))
         .then((data) => input.setGlobalStore("project", data)),
   ]
   await runAll(slow)
@@ -208,7 +208,7 @@ export async function bootstrapDirectory(input: {
     config: Config
     path: Path
     project: Project[]
-    provider: ProviderListResponse
+    provider: NormalizedProviderListResponse
   }
   queryClient: QueryClient
 }) {

packages/app/src/context/global-sync/child-store.test.ts

@@ -1,10 +1,63 @@
-import { describe, expect, test } from "bun:test"
-import { createRoot, getOwner } from "solid-js"
+import { beforeAll, describe, expect, mock, test } from "bun:test"
+import { createRoot, getOwner, type Owner } from "solid-js"
 import { createStore } from "solid-js/store"
+import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 import type { State } from "./types"
-import { createChildStoreManager } from "./child-store"
+import type { QueryOptionsApi } from "../server-sync"
+
+let createChildStoreManager: typeof import("./child-store").createChildStoreManager
 
 const child = () => createStore({} as State)
+const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
+
+const queryOptionsApi = {
+  globalConfig: () => ({ queryKey: ["globalConfig"], queryFn: async () => ({}) }),
+  projects: () => ({ queryKey: ["projects"], queryFn: async () => [] }),
+  providers: (directory: string | null) => ({ queryKey: [directory, "providers"], queryFn: async () => provider }),
+  path: (directory: string | null) => ({
+    queryKey: [directory, "path"],
+    queryFn: async () => ({
+      state: "",
+      config: "",
+      worktree: "",
+      directory: directory ?? "",
+      home: "",
+    }),
+  }),
+  agents: (directory: string) => ({ queryKey: [directory, "agents"], queryFn: async () => [] }),
+  mcp: (directory: string) => ({ queryKey: [directory, "mcp"], queryFn: async () => ({}) }),
+  lsp: (directory: string) => ({ queryKey: [directory, "lsp"], queryFn: async () => [] }),
+  sessions: (directory: string) => ({ queryKey: [directory, "loadSessions"] as const }),
+} as unknown as QueryOptionsApi
+
+function createOwner(callback: (owner: Owner) => void) {
+  return createRoot((dispose) => {
+    const owner = getOwner()
+    if (!owner) throw new Error("owner required")
+    callback(owner)
+
+    return dispose
+  })
+}
+
+beforeAll(async () => {
+  mock.module("@/utils/persist", () => ({
+    Persist: {
+      workspace: (...parts: string[]) => parts.join(":"),
+    },
+    persisted: (_target: string, store: unknown[]) => [store[0], store[1], null, () => true],
+  }))
+  mock.module("@tanstack/solid-query", () => ({
+    useQueries: () => [
+      { isLoading: false, data: { state: "", config: "", worktree: "", directory: "", home: "" } },
+      { isLoading: false, data: {} },
+      { isLoading: false, data: [] },
+      { isLoading: false, data: provider },
+    ],
+  }))
+
+  createChildStoreManager = (await import("./child-store")).createChildStoreManager
+})
 
 describe("createChildStoreManager", () => {
   test("does not evict the active directory during mark", () => {
@@ -22,8 +75,8 @@ describe("createChildStoreManager", () => {
       onBootstrap() {},
       onDispose() {},
       translate: (key) => key,
-      queryOptions: {} as any,
-      global: { provider: null! },
+      queryOptions: queryOptionsApi,
+      global: { provider },
     })
 
     Array.from({ length: 30 }, (_, index) => `/pinned-${index}`).forEach((directory) => {
@@ -37,4 +90,35 @@ describe("createChildStoreManager", () => {
 
     expect(manager.children[directory]).toBeDefined()
   })
+
+  test("starts new child stores as loading and bootstraps them on first access", () => {
+    const bootstraps: string[] = []
+    let manager: ReturnType<typeof createChildStoreManager> | undefined
+
+    const dispose = createOwner((owner) => {
+      manager = createChildStoreManager({
+        owner,
+        isBooting: () => false,
+        isLoadingSessions: () => false,
+        onBootstrap(directory) {
+          bootstraps.push(directory)
+        },
+        onDispose() {},
+        translate: (key) => key,
+        queryOptions: queryOptionsApi,
+        global: { provider },
+      })
+    })
+
+    try {
+      if (!manager) throw new Error("manager required")
+
+      const [store] = manager.child("/project")
+
+      expect(store.status).toBe("loading")
+      expect(bootstraps).toEqual(["/project"])
+    } finally {
+      dispose()
+    }
+  })
 })

packages/app/src/context/global-sync/child-store.ts

@@ -1,7 +1,7 @@
 import { createRoot, getOwner, onCleanup, runWithOwner, type Owner } from "solid-js"
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
-import type { ProviderListResponse, VcsInfo } from "@opencode-ai/sdk/v2/client"
+import type { VcsInfo } from "@opencode-ai/sdk/v2/client"
 import {
   DIR_IDLE_TTL_MS,
   MAX_DIR_STORES,
@@ -15,8 +15,9 @@ import {
 } from "./types"
 import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
 import { useQueries } from "@tanstack/solid-query"
-import { QueryOptionsApi } from "../global-sync"
+import { QueryOptionsApi } from "../server-sync"
 import { directoryKey, type DirectoryKey } from "./utils"
+import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 
 export function createChildStoreManager(input: {
   owner: Owner
@@ -27,7 +28,7 @@ export function createChildStoreManager(input: {
   translate: (key: string, vars?: Record<string, string | number>) => string
   queryOptions: QueryOptionsApi
   global: {
-    provider: ProviderListResponse
+    provider: NormalizedProviderListResponse
   }
 }) {
   const children: Record<string, [Store<State>, SetStoreFunction<State>]> = {}
@@ -190,10 +191,9 @@ export function createChildStoreManager(input: {
               return !providerQuery.isLoading
             },
             get provider() {
-              const EMPTY = { all: [], connected: [], default: {} }
+              const EMPTY = { all: new Map(), connected: [], default: {} }
               if (providerQuery.isLoading) return EMPTY
-              if (providerQuery.data?.all.length === 0 && input.global.provider.all.length > 0)
-                return input.global.provider
+              if (providerQuery.data?.all.size === 0 && input.global.provider.all.size > 0) return input.global.provider
               return providerQuery.data ?? EMPTY
             },
             config: {},
@@ -208,6 +208,10 @@ export function createChildStoreManager(input: {
             session: [],
             sessionTotal: 0,
             session_status: {},
+            session_working(id: string) {
+              const type = this.session_status[id]?.type
+              return (type ?? "idle") !== "idle"
+            },
             session_diff: {},
             todo: {},
             permission: {},

packages/app/src/context/global-sync/event-reducer.ts

@@ -125,6 +125,7 @@ export function applyDirectoryEvent(input: {
       const info = (event.properties as { info: Session }).info
       const result = Binary.search(input.store.session, info.id, (s) => s.id)
       if (info.time.archived) {
+        if (input.store.session[result.index]!.time.archived === info.time.archived) break
         if (result.found) {
           input.setStore(
             "session",

packages/app/src/context/global-sync/session-trim.ts

@@ -41,6 +41,7 @@ export function trimSessions(
     .filter((s) => !s.time?.archived)
     .sort((a, b) => cmp(a.id, b.id))
   const roots = all.filter((s) => !s.parentID)
+  roots.sort(compareSessionRecent)
   const children = all.filter((s) => !!s.parentID)
   const base = roots.slice(0, limit)
   const recent = takeRecentSessions(roots.slice(limit), SESSION_RECENT_LIMIT, cutoff)

packages/app/src/context/global-sync/types.ts

@@ -8,7 +8,6 @@ import type {
   Part,
   Path,
   PermissionRequest,
-  ProviderListResponse,
   QuestionRequest,
   Session,
   SessionStatus,
@@ -16,6 +15,7 @@ import type {
   Todo,
   VcsInfo,
 } from "@opencode-ai/sdk/v2/client"
+import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 import type { Accessor } from "solid-js"
 import type { SetStoreFunction, Store } from "solid-js/store"
 
@@ -38,7 +38,7 @@ export type State = {
   projectMeta: ProjectMeta | undefined
   icon: string | undefined
   provider_ready: boolean
-  provider: ProviderListResponse
+  provider: NormalizedProviderListResponse
   config: Config
   path: Path
   session: Session[]
@@ -46,6 +46,7 @@ export type State = {
   session_status: {
     [sessionID: string]: SessionStatus
   }
+  session_working(id: string): boolean
   session_diff: {
     [sessionID: string]: SnapshotFileDiff[]
   }

packages/app/src/context/global-sync/utils.ts

@@ -1,4 +1,5 @@
 import type { Agent, Project, ProviderListResponse } from "@opencode-ai/sdk/v2/client"
+import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 export { pathKey as directoryKey, type PathKey as DirectoryKey } from "@/utils/path-key"
 
 export const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
@@ -17,13 +18,23 @@ export function normalizeAgentList(input: unknown): Agent[] {
   return Object.values(input).filter(isAgent)
 }
 
-export function normalizeProviderList(input: ProviderListResponse): ProviderListResponse {
+export function normalizeProviderList(input: ProviderListResponse): NormalizedProviderListResponse {
   return {
     ...input,
-    all: input.all.map((provider) => ({
-      ...provider,
-      models: Object.fromEntries(Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated")),
-    })),
+    all: new Map(
+      input.all.map(
+        (provider) =>
+          [
+            provider.id,
+            {
+              ...provider,
+              models: Object.fromEntries(
+                Object.entries(provider.models).filter(([, info]) => info.status !== "deprecated"),
+              ),
+            },
+          ] as const,
+      ),
+    ),
   }
 }
 

packages/app/src/context/language.tsx

@@ -18,6 +18,7 @@ export type Locale =
   | "ja"
   | "pl"
   | "ru"
+  | "uk"
   | "ar"
   | "no"
   | "br"
@@ -45,6 +46,7 @@ const LOCALES: readonly Locale[] = [
   "ja",
   "pl",
   "ru",
+  "uk",
   "bs",
   "ar",
   "no",
@@ -65,6 +67,7 @@ const INTL: Record<Locale, string> = {
   ja: "ja",
   pl: "pl",
   ru: "ru",
+  uk: "uk",
   ar: "ar",
   no: "nb-NO",
   br: "pt-BR",
@@ -85,6 +88,7 @@ const LABEL_KEY: Record<Locale, keyof Dictionary> = {
   ja: "language.ja",
   pl: "language.pl",
   ru: "language.ru",
+  uk: "language.uk",
   ar: "language.ar",
   no: "language.no",
   br: "language.br",
@@ -110,6 +114,7 @@ const loaders: Record<Exclude<Locale, "en">, () => Promise<Dictionary>> = {
   ja: () => merge(import("@/i18n/ja"), import("@opencode-ai/ui/i18n/ja")),
   pl: () => merge(import("@/i18n/pl"), import("@opencode-ai/ui/i18n/pl")),
   ru: () => merge(import("@/i18n/ru"), import("@opencode-ai/ui/i18n/ru")),
+  uk: () => merge(import("@/i18n/uk"), import("@opencode-ai/ui/i18n/uk")),
   ar: () => merge(import("@/i18n/ar"), import("@opencode-ai/ui/i18n/ar")),
   no: () => merge(import("@/i18n/no"), import("@opencode-ai/ui/i18n/no")),
   br: () => merge(import("@/i18n/br"), import("@opencode-ai/ui/i18n/br")),
@@ -145,6 +150,7 @@ const localeMatchers: Array<{ locale: Locale; match: (language: string) => boole
   { locale: "ja", match: (language) => language.startsWith("ja") },
   { locale: "pl", match: (language) => language.startsWith("pl") },
   { locale: "ru", match: (language) => language.startsWith("ru") },
+  { locale: "uk", match: (language) => language.startsWith("uk") },
   { locale: "ar", match: (language) => language.startsWith("ar") },
   {
     locale: "no",

packages/app/src/context/layout.tsx

@@ -2,8 +2,8 @@ import { createStore, produce } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { useGlobalSync } from "./global-sync"
-import { useGlobalSDK } from "./global-sdk"
+import { useServerSync } from "./server-sync"
+import { useServerSDK } from "./server-sdk"
 import { useServer } from "./server"
 import { usePlatform } from "./platform"
 import { Project } from "@opencode-ai/sdk/v2"
@@ -136,8 +136,8 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => {
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   init: () => {
-    const globalSdk = useGlobalSDK()
-    const globalSync = useGlobalSync()
+    const globalSdk = useServerSDK()
+    const serverSync = useServerSync()
     const server = useServer()
     const platform = usePlatform()
 
@@ -386,11 +386,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
     }
 
     function enrich(project: { worktree: string; expanded: boolean }) {
-      const [childStore] = globalSync.child(project.worktree, { bootstrap: false })
+      const [childStore] = serverSync.child(project.worktree, { bootstrap: false })
       const projectID = childStore.project
       const metadata = projectID
-        ? globalSync.data.project.find((x) => x.id === projectID)
-        : globalSync.data.project.find((x) => x.worktree === project.worktree)
+        ? serverSync.data.project.find((x) => x.id === projectID)
+        : serverSync.data.project.find((x) => x.worktree === project.worktree)
 
       // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
       // Without this, different subdirectories of the same git repo would share the same
@@ -404,7 +404,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
     const roots = createMemo(() => {
       const map = new Map<string, string>()
-      for (const project of globalSync.data.project) {
+      for (const project of serverSync.data.project) {
         const sandboxes = project.sandboxes ?? []
         for (const sandbox of sandboxes) {
           map.set(sandbox, project.worktree)
@@ -470,12 +470,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
     createEffect(() => {
       const projects = enriched()
       if (projects.length === 0) return
-      if (!globalSync.ready) return
+      if (!serverSync.ready) return
 
       for (const project of projects) {
         if (!project.id) continue
         if (project.id === "global") continue
-        globalSync.project.icon(project.worktree, project.icon?.override)
+        serverSync.project.icon(project.worktree, project.icon?.override)
       }
     })
 
@@ -509,7 +509,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         colorRequested.set(worktree, color)
 
         if (project.id === "global") {
-          globalSync.project.meta(worktree, { icon: { color } })
+          serverSync.project.meta(worktree, { icon: { color } })
           continue
         }
 
@@ -531,7 +531,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           sessionTimer = undefined
           void Promise.all(
             server.projects.list().map((project) => {
-              return globalSync.project.loadSessions(project.worktree)
+              return serverSync.project.loadSessions(project.worktree)
             }),
           )
         }, 0)
@@ -560,7 +560,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         open(directory: string) {
           const root = rootFor(directory)
           if (server.projects.list().find((x) => x.worktree === root)) return
-          void globalSync.project.loadSessions(root)
+          void serverSync.project.loadSessions(root)
           server.projects.open(root)
         },
         close(directory: string) {

packages/app/src/context/local.tsx

@@ -90,7 +90,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     })
 
     const validModel = (model: ModelKey) => {
-      const provider = providers.all().find((item) => item.id === model.providerID)
+      const provider = providers.all().get(model.providerID)
       return !!provider?.models[model.modelID] && connected().has(model.providerID)
     }
 

packages/app/src/context/notification.tsx

@@ -2,8 +2,8 @@ import { createStore, reconcile } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useGlobalSDK } from "./global-sdk"
-import { useGlobalSync } from "./global-sync"
+import { useServerSDK } from "./server-sdk"
+import { useServerSync } from "./server-sync"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
@@ -109,8 +109,8 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
   name: "Notification",
   init: () => {
     const params = useParams()
-    const globalSDK = useGlobalSDK()
-    const globalSync = useGlobalSync()
+    const serverSDK = useServerSDK()
+    const serverSync = useServerSync()
     const platform = usePlatform()
     const settings = useSettings()
     const language = useLanguage()
@@ -207,10 +207,10 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
 
     const lookup = async (directory: string, sessionID?: string) => {
       if (!sessionID) return undefined
-      const [syncStore] = globalSync.child(directory, { bootstrap: false })
+      const [syncStore] = serverSync.child(directory, { bootstrap: false })
       const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
       if (match.found) return syncStore.session[match.index]
-      return globalSDK.client.session
+      return serverSDK.client.session
         .get({ directory, sessionID })
         .then((x) => x.data)
         .catch(() => undefined)
@@ -285,7 +285,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
       })
     }
 
-    const unsub = globalSDK.event.listen((e) => {
+    const unsub = serverSDK.event.listen((e) => {
       const event = e.details
       if (event.type !== "session.idle" && event.type !== "session.error") return
 

packages/app/src/context/permission.tsx

@@ -3,8 +3,8 @@ import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { PermissionRequest } from "@opencode-ai/sdk/v2/client"
 import { Persist, persisted } from "@/utils/persist"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useGlobalSync } from "./global-sync"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "./server-sync"
 import { useParams } from "@solidjs/router"
 import { decode64 } from "@/utils/base64"
 import {
@@ -48,13 +48,13 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
   name: "Permission",
   init: () => {
     const params = useParams()
-    const globalSDK = useGlobalSDK()
-    const globalSync = useGlobalSync()
+    const serverSDK = useServerSDK()
+    const serverSync = useServerSync()
 
     const permissionsEnabled = createMemo(() => {
       const directory = decode64(params.dir)
       if (!directory) return false
-      const [store] = globalSync.child(directory)
+      const [store] = serverSync.child(directory)
       return hasPermissionPromptRules(store.config.permission)
     })
 
@@ -86,7 +86,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       if (!ready()) return
       const directory = decode64(params.dir)
       if (!directory) return
-      const [childStore] = globalSync.child(directory)
+      const [childStore] = serverSync.child(directory)
       const perm = childStore.config.permission
       if (typeof perm === "string" && perm === "allow") {
         const key = directoryAcceptKey(directory)
@@ -118,7 +118,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     const respond: PermissionRespondFn = (input) => {
-      globalSDK.client.permission.respond(input).catch(() => {
+      serverSDK.client.permission.respond(input).catch(() => {
         responded.delete(input.permissionID)
       })
     }
@@ -139,7 +139,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     function isAutoAccepting(sessionID: string, directory?: string) {
-      const session = directory ? globalSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
       return autoRespondsPermission(store.autoAccept, session, { sessionID }, directory)
     }
 
@@ -148,7 +148,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     function shouldAutoRespond(permission: PermissionRequest, directory?: string) {
-      const session = directory ? globalSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
       return autoRespondsPermission(store.autoAccept, session, permission, directory)
     }
 
@@ -159,7 +159,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       return next
     }
 
-    const unsubscribe = globalSDK.event.listen((e) => {
+    const unsubscribe = serverSDK.event.listen((e) => {
       const event = e.details
       if (event?.type !== "permission.asked") return
 
@@ -178,7 +178,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
         }),
       )
 
-      globalSDK.client.permission
+      serverSDK.client.permission
         .list({ directory })
         .then((x) => {
           if (!isAutoAcceptingDirectory(directory)) return
@@ -210,7 +210,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
         }),
       )
 
-      globalSDK.client.permission
+      serverSDK.client.permission
         .list({ directory })
         .then((x) => {
           if (enableVersion.get(key) !== version) return
@@ -268,7 +268,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       },
       permissionsEnabled,
       isPermissionAllowAll(directory: string) {
-        const [childStore] = globalSync.child(directory)
+        const [childStore] = serverSync.child(directory)
         const perm = childStore.config.permission
         return typeof perm === "string" && perm === "allow"
       },

packages/app/src/context/platform.tsx

@@ -1,6 +1,7 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 import type { Accessor } from "solid-js"
+import type { DesktopMenuAction } from "../desktop-menu"
 import { ServerConnection } from "./server"
 
 type PickerPaths = string | string[] | null
@@ -8,13 +9,23 @@ type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
 type OpenFilePickerOptions = { title?: string; multiple?: boolean; accept?: string[]; extensions?: string[] }
 type SaveFilePickerOptions = { title?: string; defaultPath?: string }
 type UpdateInfo = { updateAvailable: boolean; version?: string }
+type PlatformName = "web" | "desktop"
+type DesktopOS = "macos" | "windows" | "linux"
+
+export type FatalRendererErrorLog = {
+  error: string
+  url: string
+  version?: string
+  platform: PlatformName
+  os?: DesktopOS
+}
 
 export type Platform = {
   /** Platform discriminator */
-  platform: "web" | "desktop"
+  platform: PlatformName
 
   /** Desktop OS (Tauri only) */
-  os?: "macos" | "windows" | "linux"
+  os?: DesktopOS
 
   /** App version */
   version?: string
@@ -82,11 +93,26 @@ export type Platform = {
   /** Webview zoom level (desktop only) */
   webviewZoom?: Accessor<number>
 
+  /** Get whether native pinch/Ctrl-scroll zoom gestures are enabled (desktop only) */
+  getPinchZoomEnabled?(): Promise<boolean> | boolean
+
+  /** Allow native pinch/Ctrl-scroll zoom gestures (desktop only) */
+  setPinchZoomEnabled?(enabled: boolean): Promise<void> | void
+
+  /** Run a desktop-only menu action from the app chrome */
+  runDesktopMenuAction?(action: DesktopMenuAction): Promise<void> | void
+
   /** Check if an editor app exists (desktop only) */
   checkAppExists?(appName: string): Promise<boolean>
 
   /** Read image from clipboard (desktop only) */
   readClipboardImage?(): Promise<File | null>
+
+  /** Export collected diagnostic logs (desktop only) */
+  exportDebugLogs?(): Promise<string>
+
+  /** Record a fatal renderer error in platform logs (desktop only) */
+  recordFatalRendererError?(error: FatalRendererErrorLog): Promise<void>
 }
 
 export type DisplayBackend = "auto" | "wayland"

packages/app/src/context/sdk.tsx

@@ -1,49 +1,11 @@
-import type { Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { type Accessor, createEffect, createMemo, onCleanup } from "solid-js"
-import { useGlobalSDK } from "./global-sdk"
-
-type SDKEventMap = {
-  [key in Event["type"]]: Extract<Event, { type: key }>
-}
+import { useServerSDK } from "./server-sdk"
 
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
-  init: (props: { directory: Accessor<string> }) => {
-    const globalSDK = useGlobalSDK()
+  init: (props: { directory: string }) => {
+    const serverSDK = useServerSDK()
 
-    const directory = createMemo(props.directory)
-    const client = createMemo(() =>
-      globalSDK.createClient({
-        directory: directory(),
-        throwOnError: true,
-      }),
-    )
-
-    const emitter = createGlobalEmitter<SDKEventMap>()
-
-    createEffect(() => {
-      const unsub = globalSDK.event.on(directory(), (event) => {
-        emitter.emit(event.type, event)
-      })
-      onCleanup(unsub)
-    })
-
-    return {
-      get directory() {
-        return directory()
-      },
-      get client() {
-        return client()
-      },
-      event: emitter,
-      get url() {
-        return globalSDK.url
-      },
-      createClient(opts: Parameters<typeof globalSDK.createClient>[0]) {
-        return globalSDK.createClient(opts)
-      },
-    }
+    return serverSDK.createDirSdkContext(props.directory)
   },
 })

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

@@ -0,0 +1,290 @@
+import type { Event } from "@opencode-ai/sdk/v2/client"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { createGlobalEmitter } from "@solid-primitives/event-bus"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { batch, onCleanup, onMount } from "solid-js"
+import { createSdkForServer } from "@/utils/server"
+import { useLanguage } from "./language"
+import { usePlatform } from "./platform"
+import { ServerConnection, useServer } from "./server"
+import { createRefCountMap } from "@/utils/refcount"
+
+const isAbortError = (error: unknown) =>
+  error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
+
+function createServerSdkContext(server: ServerConnection.Any) {
+  const platform = usePlatform()
+  const abort = new AbortController()
+
+  const eventFetch = (() => {
+    if (!platform.fetch || !server) return
+    try {
+      const url = new URL(server.http.url)
+      const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
+      if (url.protocol === "http:" && !loopback) return platform.fetch
+    } catch {
+      return
+    }
+  })()
+
+  const eventSdk = createSdkForServer({
+    signal: abort.signal,
+    fetch: eventFetch,
+    server: server.http,
+  })
+  const emitter = createGlobalEmitter<{
+    [key: string]: Event
+  }>()
+
+  type Queued = { directory: string; payload: Event }
+  const FLUSH_FRAME_MS = 16
+  const STREAM_YIELD_MS = 8
+  const RECONNECT_DELAY_MS = 250
+
+  let queue: Queued[] = []
+  let buffer: Queued[] = []
+  const coalesced = new Map<string, number>()
+  const staleDeltas = new Set<string>()
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let last = 0
+
+  const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
+
+  const key = (directory: string, payload: Event) => {
+    if (payload.type === "session.status") return `session.status:${directory}:${payload.properties.sessionID}`
+    if (payload.type === "lsp.updated") return `lsp.updated:${directory}`
+    if (payload.type === "message.part.updated") {
+      const part = payload.properties.part
+      return `message.part.updated:${directory}:${part.messageID}:${part.id}`
+    }
+  }
+
+  const flush = () => {
+    if (timer) clearTimeout(timer)
+    timer = undefined
+
+    if (queue.length === 0) return
+
+    const events = queue
+    const skip = staleDeltas.size > 0 ? new Set(staleDeltas) : undefined
+    queue = buffer
+    buffer = events
+    queue.length = 0
+    coalesced.clear()
+    staleDeltas.clear()
+
+    last = Date.now()
+    batch(() => {
+      for (const event of events) {
+        if (skip && event.payload.type === "message.part.delta") {
+          const props = event.payload.properties
+          if (skip.has(deltaKey(event.directory, props.messageID, props.partID))) continue
+        }
+        emitter.emit(event.directory, event.payload)
+      }
+    })
+
+    buffer.length = 0
+  }
+
+  const schedule = () => {
+    if (timer) return
+    const elapsed = Date.now() - last
+    timer = setTimeout(flush, Math.max(0, FLUSH_FRAME_MS - elapsed))
+  }
+
+  let streamErrorLogged = false
+  const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
+  const aborted = isAbortError
+
+  let attempt: AbortController | undefined
+  let run: Promise<void> | undefined
+  let started = false
+  const HEARTBEAT_TIMEOUT_MS = 15_000
+  let lastEventAt = Date.now()
+  let heartbeat: ReturnType<typeof setTimeout> | undefined
+  const resetHeartbeat = () => {
+    lastEventAt = Date.now()
+    if (heartbeat) clearTimeout(heartbeat)
+    heartbeat = setTimeout(() => {
+      attempt?.abort()
+    }, HEARTBEAT_TIMEOUT_MS)
+  }
+  const clearHeartbeat = () => {
+    if (!heartbeat) return
+    clearTimeout(heartbeat)
+    heartbeat = undefined
+  }
+
+  const start = () => {
+    if (started) return run
+    started = true
+    run = (async () => {
+      // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
+      while (!abort.signal.aborted && started) {
+        attempt = new AbortController()
+        lastEventAt = Date.now()
+        const onAbort = () => {
+          attempt?.abort()
+        }
+        abort.signal.addEventListener("abort", onAbort)
+        try {
+          const events = await eventSdk.global.event({
+            signal: attempt.signal,
+            onSseError: (error) => {
+              if (aborted(error)) return
+              if (streamErrorLogged) return
+              streamErrorLogged = true
+              console.error("[global-sdk] event stream error", {
+                url: server.http.url,
+                fetch: eventFetch ? "platform" : "webview",
+                error,
+              })
+            },
+          })
+          let yielded = Date.now()
+          resetHeartbeat()
+          for await (const event of events.stream) {
+            resetHeartbeat()
+            streamErrorLogged = false
+            const directory = event.directory ?? "global"
+            if (event.payload.type === "sync") {
+              continue
+            }
+
+            const payload = event.payload as Event
+
+            const k = key(directory, payload)
+            if (k) {
+              const i = coalesced.get(k)
+              if (i !== undefined) {
+                queue[i] = { directory, payload }
+                if (payload.type === "message.part.updated") {
+                  const part = payload.properties.part
+                  staleDeltas.add(deltaKey(directory, part.messageID, part.id))
+                }
+                continue
+              }
+              coalesced.set(k, queue.length)
+            }
+            queue.push({ directory, payload })
+            schedule()
+
+            if (Date.now() - yielded < STREAM_YIELD_MS) continue
+            yielded = Date.now()
+            await wait(0)
+          }
+        } catch (error) {
+          if (!aborted(error) && !streamErrorLogged) {
+            streamErrorLogged = true
+            console.error("[global-sdk] event stream failed", {
+              url: server.http.url,
+              fetch: eventFetch ? "platform" : "webview",
+              error,
+            })
+          }
+        } finally {
+          abort.signal.removeEventListener("abort", onAbort)
+          attempt = undefined
+          clearHeartbeat()
+        }
+
+        if (abort.signal.aborted || !started) return
+        await wait(RECONNECT_DELAY_MS)
+      }
+    })().finally(() => {
+      run = undefined
+      flush()
+    })
+    return run
+  }
+
+  const stop = () => {
+    started = false
+    attempt?.abort()
+    clearHeartbeat()
+  }
+
+  onMount(() => {
+    makeEventListener(document, "visibilitychange", () => {
+      if (document.visibilityState !== "visible") return
+      if (!started) return
+      if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
+      attempt?.abort()
+    })
+  })
+
+  onCleanup(() => {
+    stop()
+    abort.abort()
+    flush()
+  })
+
+  const sdk = createSdkForServer({
+    server: server.http,
+    fetch: platform.fetch,
+    throwOnError: true,
+  })
+
+  return {
+    url: server.http.url,
+    client: sdk,
+    event: {
+      on: emitter.on.bind(emitter),
+      listen: emitter.listen.bind(emitter),
+      start,
+    },
+    createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
+      return createSdkForServer({
+        server: server.http,
+        fetch: platform.fetch,
+        ...opts,
+      })
+    },
+  }
+}
+
+export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleContext({
+  name: "ServerSDK",
+  init: () => {
+    const language = useLanguage()
+    const server = useServer()
+
+    if (!server.current) throw new Error(language.t("error.serverSDK.noServerAvailable"))
+    const sdk = createServerSdkContext(server.current)
+    return {
+      ...sdk,
+      createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, sdk)),
+    }
+  },
+})
+
+type SDKEventMap = {
+  [key in Event["type"]]: Extract<Event, { type: key }>
+}
+
+function createDirSdkContext(directory: string, serverSDK: ReturnType<typeof createServerSdkContext>) {
+  const client = serverSDK.createClient({
+    directory,
+    throwOnError: true,
+  })
+
+  const emitter = createGlobalEmitter<SDKEventMap>()
+
+  const unsub = serverSDK.event.on(directory, (event) => {
+    emitter.emit(event.type, event)
+  })
+  onCleanup(unsub)
+
+  return {
+    directory,
+    client,
+    event: emitter,
+    get url() {
+      return serverSDK.url
+    },
+    createClient(opts: Parameters<typeof serverSDK.createClient>[0]) {
+      return serverSDK.createClient(opts)
+    },
+  }
+}