feat: add test fields to package.json

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

@@ -4,7 +4,6 @@ runs:
   using: "composite"
   steps:
     - name: Mount Bun Cache
-      if: ${{ runner.os == 'Linux' }}
       uses: useblacksmith/stickydisk@v1
       with:
         key: ${{ github.repository }}-bun-cache-${{ runner.os }}

.github/workflows/nix-desktop.yml.disabled

@@ -0,0 +1,46 @@
+name: nix-desktop
+
+on:
+  push:
+    branches: [dev]
+    paths:
+      - "flake.nix"
+      - "flake.lock"
+      - "nix/**"
+      - "packages/app/**"
+      - "packages/desktop/**"
+      - ".github/workflows/nix-desktop.yml"
+  pull_request:
+    paths:
+      - "flake.nix"
+      - "flake.lock"
+      - "nix/**"
+      - "packages/app/**"
+      - "packages/desktop/**"
+      - ".github/workflows/nix-desktop.yml"
+  workflow_dispatch:
+
+jobs:
+  nix-desktop:
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - blacksmith-4vcpu-ubuntu-2404
+          - blacksmith-4vcpu-ubuntu-2404-arm
+          - macos-15-intel
+          - macos-latest
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup Nix
+        uses: nixbuild/nix-quick-install-action@v34
+
+      - name: Build desktop via flake
+        run: |
+          set -euo pipefail
+          nix --version
+          nix build .#desktop -L

.github/workflows/nix-eval.yml

@@ -1,95 +0,0 @@
-name: nix-eval
-
-on:
-  push:
-    branches: [dev]
-  pull_request:
-    branches: [dev]
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  nix-eval:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    timeout-minutes: 15
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup Nix
-        uses: nixbuild/nix-quick-install-action@v34
-
-      - name: Evaluate flake outputs (all systems)
-        run: |
-          set -euo pipefail
-          nix --version
-
-          echo "=== Flake metadata ==="
-          nix flake metadata
-
-          echo ""
-          echo "=== Flake structure ==="
-          nix flake show --all-systems
-
-          SYSTEMS="x86_64-linux aarch64-linux x86_64-darwin aarch64-darwin"
-          PACKAGES="opencode"
-          # TODO: move 'desktop' to PACKAGES when #11755 is fixed
-          OPTIONAL_PACKAGES="desktop"
-
-          echo ""
-          echo "=== Evaluating packages for all systems ==="
-          for system in $SYSTEMS; do
-            echo ""
-            echo "--- $system ---"
-            for pkg in $PACKAGES; do
-              printf "  %s: " "$pkg"
-              if output=$(nix eval ".#packages.$system.$pkg.drvPath" --raw 2>&1); then
-                echo "✓"
-              else
-                echo "✗"
-                echo "::error::Evaluation failed for packages.$system.$pkg"
-                echo "$output"
-                exit 1
-              fi
-            done
-          done
-
-          echo ""
-          echo "=== Evaluating optional packages ==="
-          for system in $SYSTEMS; do
-            echo ""
-            echo "--- $system ---"
-            for pkg in $OPTIONAL_PACKAGES; do
-              printf "  %s: " "$pkg"
-              if output=$(nix eval ".#packages.$system.$pkg.drvPath" --raw 2>&1); then
-                echo "✓"
-              else
-                echo "✗"
-                echo "::warning::Evaluation failed for packages.$system.$pkg"
-                echo "$output"
-              fi
-            done
-          done
-
-          echo ""
-          echo "=== Evaluating devShells for all systems ==="
-          for system in $SYSTEMS; do
-            printf "%s: " "$system"
-            if output=$(nix eval ".#devShells.$system.default.drvPath" --raw 2>&1); then
-              echo "✓"
-            else
-              echo "✗"
-              echo "::error::Evaluation failed for devShells.$system.default"
-              echo "$output"
-              exit 1
-            fi
-          done
-
-          echo ""
-          echo "=== All evaluations passed ==="

.github/workflows/nix-hashes.yml

@@ -6,7 +6,7 @@ permissions:
 on:
   workflow_dispatch:
   push:
-    branches: [dev, beta]
+    branches: [dev]
     paths:
       - "bun.lock"
       - "package.json"

.github/workflows/publish.yml

@@ -137,7 +137,7 @@ jobs:
         if: contains(matrix.settings.host, 'ubuntu')
         uses: actions/cache@v4
         with:
-          path: ~/apt-cache
+          path: /var/cache/apt/archives
           key: ${{ runner.os }}-${{ matrix.settings.target }}-apt-${{ hashFiles('.github/workflows/publish.yml') }}
           restore-keys: |
             ${{ runner.os }}-${{ matrix.settings.target }}-apt-
@@ -145,10 +145,8 @@ jobs:
       - name: install dependencies (ubuntu only)
         if: contains(matrix.settings.host, 'ubuntu')
         run: |
-          mkdir -p ~/apt-cache && chmod -R a+rw ~/apt-cache
           sudo apt-get update
-          sudo apt-get install -y --no-install-recommends -o dir::cache::archives="$HOME/apt-cache" libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
-          sudo chmod -R a+rw ~/apt-cache
 
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
@@ -171,23 +169,13 @@ jobs:
           GH_TOKEN: ${{ github.token }}
           GITHUB_RUN_ID: ${{ github.run_id }}
 
-      - name: Resolve tauri portable SHA
-        if: contains(matrix.settings.host, 'ubuntu')
-        run: echo "TAURI_PORTABLE_SHA=$(git ls-remote https://github.com/tauri-apps/tauri.git refs/heads/feat/truly-portable-appimage | cut -f1)" >> "$GITHUB_ENV"
-
       # Fixes AppImage build issues, can be removed when https://github.com/tauri-apps/tauri/pull/12491 is released
       - name: Install tauri-cli from portable appimage branch
-        uses: taiki-e/cache-cargo-install-action@v3
         if: contains(matrix.settings.host, 'ubuntu')
-        with:
+        run: |
-          tool: tauri-cli
+          cargo install tauri-cli --git https://github.com/tauri-apps/tauri --branch feat/truly-portable-appimage --force
-          git: https://github.com/tauri-apps/tauri
+          echo "Installed tauri-cli version:"
-          # branch: feat/truly-portable-appimage
+          cargo tauri --version
-          rev: ${{ env.TAURI_PORTABLE_SHA }}
-
-      - name: Show tauri-cli version
-        if: contains(matrix.settings.host, 'ubuntu')
-        run: cargo tauri --version
 
       - name: Build and upload artifacts
         uses: tauri-apps/tauri-action@390cbe447412ced1303d35abe75287949e43437a

.opencode/agent/triage.md

@@ -1,7 +1,7 @@
 ---
 mode: primary
 hidden: true
-model: opencode/minimax-m2.5
+model: opencode/claude-haiku-4-5
 color: "#44BA81"
 tools:
   "*": false
@@ -12,8 +12,6 @@ You are a triage agent responsible for triaging github issues.
 
 Use your github-triage tool to triage issues.
 
-This file is the source of truth for ownership/routing rules.
-
 ## Labels
 
 ### windows
@@ -45,34 +43,12 @@ Desktop app issues:
 
 **Only** add if the issue explicitly mentions nix.
 
-If the issue does not mention nix, do not add nix.
-
-If the issue mentions nix, assign to `rekram1-node`.
-
 #### zen
 
 **Only** add if the issue mentions "zen" or "opencode zen" or "opencode black".
 
 If the issue doesn't have "zen" or "opencode black" in it then don't add zen label
 
-#### core
-
-Use for core server issues in `packages/opencode/`, excluding `packages/opencode/src/cli/cmd/tui/`.
-
-Examples:
-
-- LSP server behavior
-- Harness behavior (agent + tools)
-- Feature requests for server behavior
-- Agent context construction
-- API endpoints
-- Provider integration issues
-- New, broken, or poor-quality models
-
-#### acp
-
-If the issue mentions acp support, assign acp label.
-
 #### docs
 
 Add if the issue requests better documentation or docs updates.
@@ -90,51 +66,13 @@ TUI issues potentially caused by our underlying TUI library:
 
 When assigning to people here are the following rules:
 
-Desktop / Web:
+adamdotdev:
-Use for desktop-labeled issues only.
+ONLY assign adam if the issue will have the "desktop" label.
 
-- adamdotdevin
+fwang:
-- iamdavidhill
+ONLY assign fwang if the issue will have the "zen" label.
-- Brendonovich
-- nexxeln
 
-Zen:
+jayair:
-ONLY assign if the issue will have the "zen" label.
+ONLY assign jayair if the issue will have the "docs" label.
 
-- fwang
+In all other cases use best judgment. Avoid assigning to kommander needlessly, when in doubt assign to rekram1-node.
-- MrMushrooooom
-
-TUI (`packages/opencode/src/cli/cmd/tui/...`):
-
-- thdxr for TUI UX/UI product decisions and interaction flow
-- kommander for OpenTUI engine issues: rendering artifacts, keybind handling, terminal compatibility, SSH behavior, and low-level perf bottlenecks
-- rekram1-node for TUI bugs that are not clearly OpenTUI engine issues
-
-Core (`packages/opencode/...`, excluding TUI subtree):
-
-- thdxr for sqlite/snapshot/memory bugs and larger architectural core features
-- jlongster for opencode server + API feature work (tool currently remaps jlongster -> thdxr until assignable)
-- rekram1-node for harness issues, provider issues, and other bug-squashing
-
-For core bugs that do not clearly map, either thdxr or rekram1-node is acceptable.
-
-Docs:
-
-- R44VC0RP
-
-Windows:
-
-- Hona (assign any issue that mentions Windows or is likely Windows-specific)
-
-Determinism rules:
-
-- If title + body does not contain "zen", do not add the "zen" label
-- If "nix" label is added but title + body does not mention nix/nixos, the tool will drop "nix"
-- If title + body mentions nix/nixos, assign to `rekram1-node`
-- If "desktop" label is added, the tool will override assignee and randomly pick one Desktop / Web owner
-
-In all other cases, choose the team/section with the most overlap with the issue and assign a member from that team at random.
-
-ACP:
-
-- rekram1-node (assign any acp issues to rekram1-node)

.opencode/tool/github-triage.ts

@@ -1,22 +1,8 @@
 /// <reference path="../env.d.ts" />
+// import { Octokit } from "@octokit/rest"
 import { tool } from "@opencode-ai/plugin"
 import DESCRIPTION from "./github-triage.txt"
 
-const TEAM = {
-  desktop: ["adamdotdevin", "iamdavidhill", "Brendonovich", "nexxeln"],
-  zen: ["fwang", "MrMushrooooom"],
-  tui: ["thdxr", "kommander", "rekram1-node"],
-  core: ["thdxr", "rekram1-node", "jlongster"],
-  docs: ["R44VC0RP"],
-  windows: ["Hona"],
-} as const
-
-const ASSIGNEES = [...new Set(Object.values(TEAM).flat())]
-
-function pick<T>(items: readonly T[]) {
-  return items[Math.floor(Math.random() * items.length)]!
-}
-
 function getIssueNumber(): number {
   const issue = parseInt(process.env.ISSUE_NUMBER ?? "", 10)
   if (!issue) throw new Error("ISSUE_NUMBER env var not set")
@@ -43,69 +29,60 @@ export default tool({
   description: DESCRIPTION,
   args: {
     assignee: tool.schema
-      .enum(ASSIGNEES as [string, ...string[]])
+      .enum(["thdxr", "adamdotdevin", "rekram1-node", "fwang", "jayair", "kommander"])
       .describe("The username of the assignee")
       .default("rekram1-node"),
     labels: tool.schema
-      .array(tool.schema.enum(["nix", "opentui", "perf", "web", "desktop", "zen", "docs", "windows", "core"]))
+      .array(tool.schema.enum(["nix", "opentui", "perf", "desktop", "zen", "docs", "windows"]))
       .describe("The labels(s) to add to the issue")
       .default([]),
   },
   async execute(args) {
     const issue = getIssueNumber()
+    // const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN })
     const owner = "anomalyco"
     const repo = "opencode"
 
     const results: string[] = []
-    let labels = [...new Set(args.labels.map((x) => (x === "desktop" ? "web" : x)))]
-    const web = labels.includes("web")
-    const text = `${process.env.ISSUE_TITLE ?? ""}\n${process.env.ISSUE_BODY ?? ""}`.toLowerCase()
-    const zen = /\bzen\b/.test(text) || text.includes("opencode black")
-    const nix = /\bnix(os)?\b/.test(text)
 
-    if (labels.includes("nix") && !nix) {
+    if (args.assignee === "adamdotdevin" && !args.labels.includes("desktop")) {
-      labels = labels.filter((x) => x !== "nix")
+      throw new Error("Only desktop issues should be assigned to adamdotdevin")
-      results.push("Dropped label: nix (issue does not mention nix)")
     }
 
-    const assignee = nix ? "rekram1-node" : web ? pick(TEAM.desktop) : args.assignee
+    if (args.assignee === "fwang" && !args.labels.includes("zen")) {
-
+      throw new Error("Only zen issues should be assigned to fwang")
-    if (labels.includes("zen") && !zen) {
-      throw new Error("Only add the zen label when issue title/body contains 'zen'")
     }
 
-    if (web && !nix && !(TEAM.desktop as readonly string[]).includes(assignee)) {
+    if (args.assignee === "kommander" && !args.labels.includes("opentui")) {
-      throw new Error("Web issues must be assigned to adamdotdevin, iamdavidhill, Brendonovich, or nexxeln")
-    }
-
-    if ((TEAM.zen as readonly string[]).includes(assignee) && !labels.includes("zen")) {
-      throw new Error("Only zen issues should be assigned to fwang or MrMushrooooom")
-    }
-
-    if (assignee === "Hona" && !labels.includes("windows")) {
-      throw new Error("Only windows issues should be assigned to Hona")
-    }
-
-    if (assignee === "R44VC0RP" && !labels.includes("docs")) {
-      throw new Error("Only docs issues should be assigned to R44VC0RP")
-    }
-
-    if (assignee === "kommander" && !labels.includes("opentui")) {
       throw new Error("Only opentui issues should be assigned to kommander")
     }
 
+    // await octokit.rest.issues.addAssignees({
+    //   owner,
+    //   repo,
+    //   issue_number: issue,
+    //   assignees: [args.assignee],
+    // })
     await githubFetch(`/repos/${owner}/${repo}/issues/${issue}/assignees`, {
       method: "POST",
-      body: JSON.stringify({ assignees: [assignee] }),
+      body: JSON.stringify({ assignees: [args.assignee] }),
     })
-    results.push(`Assigned @${assignee} to issue #${issue}`)
+    results.push(`Assigned @${args.assignee} to issue #${issue}`)
+
+    const labels: string[] = args.labels.map((label) => (label === "desktop" ? "web" : label))
 
     if (labels.length > 0) {
+      // await octokit.rest.issues.addLabels({
+      //   owner,
+      //   repo,
+      //   issue_number: issue,
+      //   labels,
+      // })
       await githubFetch(`/repos/${owner}/${repo}/issues/${issue}/labels`, {
         method: "POST",
         body: JSON.stringify({ labels }),
       })
-      results.push(`Added labels: ${labels.join(", ")}`)
+      results.push(`Added labels: ${args.labels.join(", ")}`)
     }
 
     return results.join("\n")

.opencode/tool/github-triage.txt

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

.zed/settings.json

@@ -1,9 +0,0 @@
-{
-  "format_on_save": "on",
-  "formatter": {
-    "external": {
-      "command": "bunx",
-      "arguments": ["prettier", "--stdin-filepath", "{buffer_path}"]
-    }
-  }
-}

CONTRIBUTING.md

@@ -24,11 +24,6 @@ If you are unsure if a PR would be accepted, feel free to ask a maintainer or lo
 
 Want to take on an issue? Leave a comment and a maintainer may assign it to you unless it is something we are already working on.
 
-## Adding New Providers
-
-New providers shouldn't require many if ANY code changes, but if you want to add support for a new provider first make a PR to:
-https://github.com/anomalyco/models.dev
-
 ## Developing OpenCode
 
 - Requirements: Bun 1.3+

SECURITY.md

@@ -1,11 +1,5 @@
 # Security
 
-## IMPORTANT
-
-We do not accept AI generated security reports. We receive a large number of
-these and we absolutely do not have the resources to review them all. If you
-submit one that will be an automatic ban from the project.
-
 ## Threat Model
 
 ### Overview

bun.lock

@@ -14,7 +14,6 @@
       "devDependencies": {
         "@actions/artifact": "5.0.1",
         "@tsconfig/bun": "catalog:",
-        "@types/mime-types": "3.0.1",
         "husky": "9.1.7",
         "prettier": "3.6.2",
         "semver": "^7.6.0",
@@ -289,7 +288,7 @@
         "@ai-sdk/vercel": "1.0.33",
         "@ai-sdk/xai": "2.0.51",
         "@clack/prompts": "1.0.0-alpha.1",
-        "@gitlab/gitlab-ai-provider": "3.6.0",
+        "@gitlab/gitlab-ai-provider": "3.5.1",
         "@gitlab/opencode-gitlab-auth": "1.3.3",
         "@hono/standard-validator": "0.1.5",
         "@hono/zod-validator": "catalog:",
@@ -325,7 +324,6 @@
         "hono-openapi": "catalog:",
         "ignore": "7.0.5",
         "jsonc-parser": "3.3.1",
-        "mime-types": "3.0.2",
         "minimatch": "10.0.3",
         "open": "10.1.2",
         "opentui-spinner": "0.0.6",
@@ -358,7 +356,6 @@
         "@tsconfig/bun": "catalog:",
         "@types/babel__core": "7.20.5",
         "@types/bun": "catalog:",
-        "@types/mime-types": "3.0.1",
         "@types/turndown": "5.0.5",
         "@types/yargs": "17.0.33",
         "@typescript/native-preview": "catalog:",
@@ -992,7 +989,7 @@
 
     "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
-    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.6.0", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-8LmcIQ86xkMtC7L4P1/QYVEC+yKMTRerfPeniaaQGalnzXKtX6iMHLjLPOL9Rxp55lOXi6ed0WrFuJzZx+fNRg=="],
+    "@gitlab/gitlab-ai-provider": ["@gitlab/gitlab-ai-provider@3.5.1", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=2.0.0", "@ai-sdk/provider-utils": ">=3.0.0" } }, "sha512-I8+EGdUeKmGJSjAdFobHtqpxM9Fm00w0j7NJbtln/D/XQ1SKEGoZIuqJko4v0pV2mkhGUIs7qezljH/2kbXovA=="],
 
     "@gitlab/opencode-gitlab-auth": ["@gitlab/opencode-gitlab-auth@1.3.3", "", { "dependencies": { "@fastify/rate-limit": "^10.2.0", "@opencode-ai/plugin": "*", "fastify": "^5.2.0", "open": "^10.0.0" } }, "sha512-FT+KsCmAJjtqWr1YAq0MywGgL9kaLQ4apmsoowAXrPqHtoYf2i/nY10/A+L06kNj22EATeEDRpbB1NWXMto/SA=="],
 
@@ -1920,8 +1917,6 @@
 
     "@types/mime": ["@types/mime@1.3.5", "", {}, "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="],
 
-    "@types/mime-types": ["@types/mime-types@3.0.1", "", {}, "sha512-xRMsfuQbnRq1Ef+C+RKaENOxXX87Ygl38W1vDfPHRku02TgQr+Qd8iivLtAMcR0KF5/29xlnFihkTlbqFrGOVQ=="],
-
     "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
 
     "@types/mssql": ["@types/mssql@9.1.9", "", { "dependencies": { "@types/node": "*", "tarn": "^3.0.1", "tedious": "*" } }, "sha512-P0nCgw6vzY23UxZMnbI4N7fnLGANt4LI4yvxze1paPj+LuN28cFv5EI+QidP8udnId/BKhkcRhm/BleNsjK65A=="],

infra/console.ts

@@ -145,16 +145,6 @@ const ZEN_MODELS = [
   new sst.Secret("ZEN_MODELS18"),
   new sst.Secret("ZEN_MODELS19"),
   new sst.Secret("ZEN_MODELS20"),
-  new sst.Secret("ZEN_MODELS21"),
-  new sst.Secret("ZEN_MODELS22"),
-  new sst.Secret("ZEN_MODELS23"),
-  new sst.Secret("ZEN_MODELS24"),
-  new sst.Secret("ZEN_MODELS25"),
-  new sst.Secret("ZEN_MODELS26"),
-  new sst.Secret("ZEN_MODELS27"),
-  new sst.Secret("ZEN_MODELS28"),
-  new sst.Secret("ZEN_MODELS29"),
-  new sst.Secret("ZEN_MODELS30"),
 ]
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")
 const STRIPE_PUBLISHABLE_KEY = new sst.Secret("STRIPE_PUBLISHABLE_KEY")

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-5sXHoHbRdXbqM/zRJZiXt26sm/yyyZN/4OOHUtdofhk=",
+    "x86_64-linux": "sha256-C3WIEER2XgzO85wk2sp3BzQ6dknW026zslD8nKZjo2U=",
-    "aarch64-linux": "sha256-JCMm5X7e27BBV4wyaknCMM4CBt4Lr72SSvaGxEeNsJE=",
+    "aarch64-linux": "sha256-+tTJHZMZ/+8fAjI/1fUTuca8J2MZfB+5vhBoZ7jgqcE=",
-    "aarch64-darwin": "sha256-DBQJURlTPqFt0OYUHSvZZ4H0NUf020aic4zNX5CXzDc=",
+    "aarch64-darwin": "sha256-vS82puFGBBToxyIBa8Zi0KLKdJYr64T6HZL2rL32mH8=",
-    "x86_64-darwin": "sha256-t2luVxqCcRSgq/WNWkm4ZpKXO22n2RnAWP6msoTOr+A="
+    "x86_64-darwin": "sha256-Tr8JMTCxV6WVt3dXV7iq3PNCm2Cn+RXAbU9+o7pKKV0="
   }
 }

package.json

@@ -69,7 +69,6 @@
   "devDependencies": {
     "@actions/artifact": "5.0.1",
     "@tsconfig/bun": "catalog:",
-    "@types/mime-types": "3.0.1",
     "husky": "9.1.7",
     "prettier": "3.6.2",
     "semver": "^7.6.0",
@@ -88,6 +87,8 @@
     "url": "https://github.com/anomalyco/opencode"
   },
   "license": "MIT",
+  "randomField": "hello-world-12345",
+  "anotherRandomField": "xyz-abc-789",
   "prettier": {
     "semi": false,
     "printWidth": 120

packages/app/e2e/commands/input-focus.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-
-test("ctrl+l focuses the prompt", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const prompt = page.locator(promptSelector)
-  await expect(prompt).toBeVisible()
-
-  await page.locator("main").click({ position: { x: 5, y: 5 } })
-  await expect(prompt).not.toBeFocused()
-
-  await page.keyboard.press("Control+L")
-  await expect(prompt).toBeFocused()
-})

packages/app/e2e/commands/panels.spec.ts

@@ -1,31 +0,0 @@
-import { test, expect } from "../fixtures"
-import { modKey } from "../utils"
-
-const expanded = async (el: { getAttribute: (name: string) => Promise<string | null> }) => {
-  const value = await el.getAttribute("aria-expanded")
-  if (value !== "true" && value !== "false") throw new Error(`Expected aria-expanded to be true|false, got: ${value}`)
-  return value === "true"
-}
-
-test("review panel can be toggled via keybind", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const treeToggle = page.getByRole("button", { name: "Toggle file tree" }).first()
-  await expect(treeToggle).toBeVisible()
-  if (await expanded(treeToggle)) await treeToggle.click()
-  await expect(treeToggle).toHaveAttribute("aria-expanded", "false")
-
-  const reviewToggle = page.getByRole("button", { name: "Toggle review" }).first()
-  await expect(reviewToggle).toBeVisible()
-  if (await expanded(reviewToggle)) await reviewToggle.click()
-  await expect(reviewToggle).toHaveAttribute("aria-expanded", "false")
-  await expect(page.locator("#review-panel")).toHaveCount(0)
-
-  await page.keyboard.press(`${modKey}+Shift+R`)
-  await expect(reviewToggle).toHaveAttribute("aria-expanded", "true")
-  await expect(page.locator("#review-panel")).toBeVisible()
-
-  await page.keyboard.press(`${modKey}+Shift+R`)
-  await expect(reviewToggle).toHaveAttribute("aria-expanded", "false")
-  await expect(page.locator("#review-panel")).toHaveCount(0)
-})

packages/app/e2e/commands/tab-close.spec.ts

@@ -1,32 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-import { modKey } from "../utils"
-
-test("mod+w closes the active file tab", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  await page.locator(promptSelector).click()
-  await page.keyboard.type("/open")
-  await expect(page.locator('[data-slash-id="file.open"]').first()).toBeVisible()
-  await page.keyboard.press("Enter")
-
-  const dialog = page
-    .getByRole("dialog")
-    .filter({ has: page.getByPlaceholder(/search files/i) })
-    .first()
-  await expect(dialog).toBeVisible()
-
-  await dialog.getByRole("textbox").first().fill("package.json")
-  const item = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
-  await expect(item).toBeVisible({ timeout: 30_000 })
-  await item.click()
-  await expect(dialog).toHaveCount(0)
-
-  const tab = page.getByRole("tab", { name: "package.json" }).first()
-  await expect(tab).toBeVisible()
-  await tab.click()
-  await expect(tab).toHaveAttribute("aria-selected", "true")
-
-  await page.keyboard.press(`${modKey}+W`)
-  await expect(page.getByRole("tab", { name: "package.json" })).toHaveCount(0)
-})

packages/app/e2e/models/model-picker.spec.ts

@@ -28,6 +28,7 @@ test("smoke model selection updates prompt footer", async ({ page, gotoSession }
   const key = await target.getAttribute("data-key")
   if (!key) throw new Error("Failed to resolve model key from list item")
 
+  const name = (await target.locator("span").first().innerText()).trim()
   const model = key.split(":").slice(1).join(":")
 
   await input.fill(model)
@@ -36,13 +37,6 @@ test("smoke model selection updates prompt footer", async ({ page, gotoSession }
 
   await expect(dialog).toHaveCount(0)
 
-  await page.locator(promptSelector).click()
+  const form = page.locator(promptSelector).locator("xpath=ancestor::form[1]")
-  await page.keyboard.type("/model")
+  await expect(form.locator('[data-component="button"]').filter({ hasText: name }).first()).toBeVisible()
-  await expect(command).toBeVisible()
-  await command.hover()
-  await page.keyboard.press("Enter")
-
-  const dialogAgain = page.getByRole("dialog")
-  await expect(dialogAgain).toBeVisible()
-  await expect(dialogAgain.locator(`[data-slot="list-item"][data-key="${key}"][data-selected="true"]`)).toBeVisible()
 })

packages/app/e2e/prompt/prompt-drop-file-uri.spec.ts

@@ -1,22 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-
-test("dropping text/plain file: uri inserts a file pill", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const prompt = page.locator(promptSelector)
-  await prompt.click()
-
-  const path = process.platform === "win32" ? "C:\\opencode-e2e-drop.txt" : "/tmp/opencode-e2e-drop.txt"
-  const dt = await page.evaluateHandle((text) => {
-    const dt = new DataTransfer()
-    dt.setData("text/plain", text)
-    return dt
-  }, `file:${path}`)
-
-  await page.dispatchEvent("body", "drop", { dataTransfer: dt })
-
-  const pill = page.locator(`${promptSelector} [data-type="file"]`).first()
-  await expect(pill).toBeVisible()
-  await expect(pill).toHaveAttribute("data-path", path)
-})

packages/app/e2e/prompt/prompt-drop-file.spec.ts

@@ -1,30 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-
-test("dropping an image file adds an attachment", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const prompt = page.locator(promptSelector)
-  await prompt.click()
-
-  const png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO3+4uQAAAAASUVORK5CYII="
-  const dt = await page.evaluateHandle((b64) => {
-    const dt = new DataTransfer()
-    const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))
-    const file = new File([bytes], "drop.png", { type: "image/png" })
-    dt.items.add(file)
-    return dt
-  }, png)
-
-  await page.dispatchEvent("body", "drop", { dataTransfer: dt })
-
-  const img = page.locator('img[alt="drop.png"]').first()
-  await expect(img).toBeVisible()
-
-  const remove = page.getByRole("button", { name: "Remove attachment" }).first()
-  await expect(remove).toBeVisible()
-
-  await img.hover()
-  await remove.click()
-  await expect(page.locator('img[alt="drop.png"]')).toHaveCount(0)
-})

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

@@ -1,18 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector } from "../selectors"
-
-test("shift+enter inserts a newline without submitting", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  await expect(page).toHaveURL(/\/session\/?$/)
-
-  const prompt = page.locator(promptSelector)
-  await prompt.click()
-  await page.keyboard.type("line one")
-  await page.keyboard.press("Shift+Enter")
-  await page.keyboard.type("line two")
-
-  await expect(page).toHaveURL(/\/session\/?$/)
-  await expect(prompt).toContainText("line one")
-  await expect(prompt).toContainText("line two")
-})

packages/app/e2e/prompt/prompt-slash-terminal.spec.ts

@@ -1,23 +0,0 @@
-import { test, expect } from "../fixtures"
-import { promptSelector, terminalSelector } from "../selectors"
-
-test("/terminal toggles the terminal panel", async ({ page, gotoSession }) => {
-  await gotoSession()
-
-  const prompt = page.locator(promptSelector)
-  const terminal = page.locator(terminalSelector)
-
-  await expect(terminal).not.toBeVisible()
-
-  await prompt.click()
-  await page.keyboard.type("/terminal")
-  await expect(page.locator('[data-slash-id="terminal.toggle"]').first()).toBeVisible()
-  await page.keyboard.press("Enter")
-  await expect(terminal).toBeVisible()
-
-  await prompt.click()
-  await page.keyboard.type("/terminal")
-  await expect(page.locator('[data-slash-id="terminal.toggle"]').first()).toBeVisible()
-  await page.keyboard.press("Enter")
-  await expect(terminal).not.toBeVisible()
-})

packages/app/src/app.tsx

@@ -1,36 +1,35 @@
 import "@/index.css"
-import { Code } from "@opencode-ai/ui/code"
+import { ErrorBoundary, Show, Suspense, lazy, type JSX, type ParentProps } from "solid-js"
-import { I18nProvider } from "@opencode-ai/ui/context"
+import { Router, Route, Navigate } from "@solidjs/router"
-import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
-import { DialogProvider } from "@opencode-ai/ui/context/dialog"
-import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
-import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import { Diff } from "@opencode-ai/ui/diff"
-import { Font } from "@opencode-ai/ui/font"
-import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { MetaProvider } from "@solidjs/meta"
-import { Navigate, Route, Router } from "@solidjs/router"
+import { Font } from "@opencode-ai/ui/font"
-import { ErrorBoundary, type JSX, lazy, type ParentProps, Show, Suspense } from "solid-js"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import { CommandProvider } from "@/context/command"
+import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
-import { CommentsProvider } from "@/context/comments"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
-import { FileProvider } from "@/context/file"
+import { I18nProvider } from "@opencode-ai/ui/context"
-import { GlobalSDKProvider } from "@/context/global-sdk"
+import { Diff } from "@opencode-ai/ui/diff"
+import { Code } from "@opencode-ai/ui/code"
+import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { GlobalSyncProvider } from "@/context/global-sync"
-import { HighlightsProvider } from "@/context/highlights"
-import { LanguageProvider, useLanguage } from "@/context/language"
-import { LayoutProvider } from "@/context/layout"
-import { ModelsProvider } from "@/context/models"
-import { NotificationProvider } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
-import { usePlatform } from "@/context/platform"
+import { LayoutProvider } from "@/context/layout"
-import { PromptProvider } from "@/context/prompt"
+import { GlobalSDKProvider } from "@/context/global-sdk"
-import { type ServerConnection, ServerProvider, useServer } from "@/context/server"
+import { normalizeServerUrl, ServerProvider, useServer } from "@/context/server"
 import { SettingsProvider } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
-import DirectoryLayout from "@/pages/directory-layout"
+import { PromptProvider } from "@/context/prompt"
+import { FileProvider } from "@/context/file"
+import { CommentsProvider } from "@/context/comments"
+import { NotificationProvider } from "@/context/notification"
+import { ModelsProvider } from "@/context/models"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { CommandProvider } from "@/context/command"
+import { LanguageProvider, useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { HighlightsProvider } from "@/context/highlights"
 import Layout from "@/pages/layout"
+import DirectoryLayout from "@/pages/directory-layout"
 import { ErrorPage } from "./pages/error"
-
 const Home = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
 const Loading = () => <div class="size-full" />
@@ -58,11 +57,7 @@ function UiI18nBridge(props: ParentProps) {
 
 declare global {
   interface Window {
-    __OPENCODE__?: {
+    __OPENCODE__?: { updaterEnabled?: boolean; serverPassword?: string; deepLinks?: string[]; wsl?: boolean }
-      updaterEnabled?: boolean
-      deepLinks?: string[]
-      wsl?: boolean
-    }
   }
 }
 
@@ -112,6 +107,30 @@ function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) {
   )
 }
 
+const getStoredDefaultServerUrl = (platform: ReturnType<typeof usePlatform>) => {
+  if (platform.platform !== "web") return
+  const result = platform.getDefaultServerUrl?.()
+  if (result instanceof Promise) return
+  if (!result) return
+  return normalizeServerUrl(result)
+}
+
+const resolveDefaultServerUrl = (props: {
+  defaultUrl?: string
+  storedDefaultServerUrl?: string
+  hostname: string
+  origin: string
+  isDev: boolean
+  devHost?: string
+  devPort?: string
+}) => {
+  if (props.defaultUrl) return props.defaultUrl
+  if (props.storedDefaultServerUrl) return props.storedDefaultServerUrl
+  if (props.hostname.includes("opencode.ai")) return "http://localhost:4096"
+  if (props.isDev) return `http://${props.devHost ?? "localhost"}:${props.devPort ?? "4096"}`
+  return props.origin
+}
+
 export function AppBaseProviders(props: ParentProps) {
   return (
     <MetaProvider>
@@ -138,19 +157,27 @@ export function AppBaseProviders(props: ParentProps) {
 function ServerKey(props: ParentProps) {
   const server = useServer()
   return (
-    <Show when={server.key} keyed>
+    <Show when={server.url} keyed>
       {props.children}
     </Show>
   )
 }
 
-export function AppInterface(props: {
+export function AppInterface(props: { defaultUrl?: string; children?: JSX.Element; isSidecar?: boolean }) {
-  children?: JSX.Element
+  const platform = usePlatform()
-  defaultServer: ServerConnection.Key
+  const storedDefaultServerUrl = getStoredDefaultServerUrl(platform)
-  servers?: Array<ServerConnection.Any>
+  const defaultServerUrl = resolveDefaultServerUrl({
-}) {
+    defaultUrl: props.defaultUrl,
+    storedDefaultServerUrl,
+    hostname: location.hostname,
+    origin: window.location.origin,
+    isDev: import.meta.env.DEV,
+    devHost: import.meta.env.VITE_OPENCODE_SERVER_HOST,
+    devPort: import.meta.env.VITE_OPENCODE_SERVER_PORT,
+  })
+
   return (
-    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
+    <ServerProvider defaultUrl={defaultServerUrl} isSidecar={props.isSidecar}>
       <ServerKey>
         <GlobalSDKProvider>
           <GlobalSyncProvider>

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

@@ -121,7 +121,7 @@ export function ModelSelectorPopover(props: {
       }}
       modal={false}
       placement="top-start"
-      gutter={4}
+      gutter={8}
     >
       <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
         {props.children}

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

@@ -1,18 +1,19 @@
-import { Button } from "@opencode-ai/ui/button"
+import { createResource, createEffect, createMemo, onCleanup, Show } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
+import { Button } from "@opencode-ai/ui/button"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@opencode-ai/ui/toast"
+import { normalizeServerUrl, useServer } from "@/context/server"
-import { useNavigate } from "@solidjs/router"
-import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
-import { ServerRow } from "@/components/server/server-row"
-import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { useNavigate } from "@solidjs/router"
+import { useLanguage } from "@/context/language"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { showToast } from "@opencode-ai/ui/toast"
+import { ServerRow } from "@/components/server/server-row"
 import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
 
 interface AddRowProps {
@@ -88,7 +89,7 @@ function useServerPreview(fetcher: typeof fetch) {
     if (!looksComplete(value)) return
     const normalized = normalizeServerUrl(value)
     if (!normalized) return
-    const result = await checkServerHealth({ url: normalized }, fetcher)
+    const result = await checkServerHealth(normalized, fetcher)
     setStatus(result.healthy)
   }
 
@@ -170,13 +171,14 @@ export function DialogSelectServer() {
   const dialog = useDialog()
   const server = useServer()
   const platform = usePlatform()
+  const globalSDK = useGlobalSDK()
   const language = useLanguage()
   const fetcher = platform.fetch ?? globalThis.fetch
   const { defaultUrl, canDefault, setDefault } = useDefaultServer(platform, language)
   const { previewStatus } = useServerPreview(fetcher)
   let listRoot: HTMLDivElement | undefined
   const [store, setStore] = createStore({
-    status: {} as Record<ServerConnection.Key, ServerHealth | undefined>,
+    status: {} as Record<string, ServerHealth | undefined>,
     addServer: {
       url: "",
       adding: false,
@@ -212,25 +214,24 @@ export function DialogSelectServer() {
     })
   }
 
-  const replaceServer = (original: ServerConnection.Http, next: string) => {
+  const replaceServer = (original: string, next: string) => {
-    const active = server.key
+    const active = server.url
-    const newConn = server.add(next)
+    const nextActive = active === original ? next : active
-    if (!newConn) return
 
-    const nextActive = active === ServerConnection.key(original) ? ServerConnection.key(newConn) : active
+    server.add(next)
     if (nextActive) server.setActive(nextActive)
-    server.remove(ServerConnection.key(original))
+    server.remove(original)
   }
 
   const items = createMemo(() => {
-    const current = server.current
+    const current = server.url
     const list = server.list
     if (!current) return list
     if (!list.includes(current)) return [current, ...list]
     return [current, ...list.filter((x) => x !== current)]
   })
 
-  const current = createMemo(() => items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0])
+  const current = createMemo(() => items().find((x) => x === server.url) ?? items()[0])
 
   const sortedItems = createMemo(() => {
     const list = items()
@@ -245,17 +246,17 @@ export function DialogSelectServer() {
     return list.slice().sort((a, b) => {
       if (a === active) return -1
       if (b === active) return 1
-      const diff = rank(store.status[ServerConnection.key(a)]) - rank(store.status[ServerConnection.key(b)])
+      const diff = rank(store.status[a]) - rank(store.status[b])
       if (diff !== 0) return diff
       return (order.get(a) ?? 0) - (order.get(b) ?? 0)
     })
   })
 
   async function refreshHealth() {
-    const results: Record<ServerConnection.Key, ServerHealth> = {}
+    const results: Record<string, ServerHealth> = {}
     await Promise.all(
-      items().map(async (conn) => {
+      items().map(async (url) => {
-        results[ServerConnection.key(conn)] = await checkServerHealth(conn.http, fetcher)
+        results[url] = await checkServerHealth(url, fetcher)
       }),
     )
     setStore("status", reconcile(results))
@@ -268,15 +269,15 @@ export function DialogSelectServer() {
     onCleanup(() => clearInterval(interval))
   })
 
-  async function select(conn: ServerConnection.Any, persist?: boolean) {
+  async function select(value: string, persist?: boolean) {
-    if (!persist && store.status[ServerConnection.key(conn)]?.healthy === false) return
+    if (!persist && store.status[value]?.healthy === false) return
     dialog.close()
     if (persist) {
-      server.add(conn.http.url)
+      server.add(value)
       navigate("/")
       return
     }
-    server.setActive(ServerConnection.key(conn))
+    server.setActive(value)
     navigate("/")
   }
 
@@ -310,7 +311,7 @@ export function DialogSelectServer() {
 
     setStore("addServer", { adding: true, error: "" })
 
-    const result = await checkServerHealth({ url: normalized }, fetcher)
+    const result = await checkServerHealth(normalized, fetcher)
     setStore("addServer", { adding: false })
 
     if (!result.healthy) {
@@ -319,25 +320,25 @@ export function DialogSelectServer() {
     }
 
     resetAdd()
-    await select({ type: "http", http: { url: normalized } }, true)
+    await select(normalized, true)
   }
 
-  async function handleEdit(original: ServerConnection.Any, value: string) {
+  async function handleEdit(original: string, value: string) {
-    if (store.editServer.busy || original.type !== "http") return
+    if (store.editServer.busy) return
     const normalized = normalizeServerUrl(value)
     if (!normalized) {
       resetEdit()
       return
     }
 
-    if (normalized === original.http.url) {
+    if (normalized === original) {
       resetEdit()
       return
     }
 
     setStore("editServer", { busy: true, error: "" })
 
-    const result = await checkServerHealth({ url: normalized }, fetcher)
+    const result = await checkServerHealth(normalized, fetcher)
     setStore("editServer", { busy: false })
 
     if (!result.healthy) {
@@ -365,7 +366,7 @@ export function DialogSelectServer() {
     handleAdd(store.addServer.url)
   }
 
-  const handleEditKey = (event: KeyboardEvent, original: ServerConnection.Any) => {
+  const handleEditKey = (event: KeyboardEvent, original: string) => {
     event.stopPropagation()
     if (event.key === "Escape") {
       event.preventDefault()
@@ -377,7 +378,7 @@ export function DialogSelectServer() {
     handleEdit(original, store.editServer.value)
   }
 
-  async function handleRemove(url: ServerConnection.Key) {
+  async function handleRemove(url: string) {
     server.remove(url)
     if ((await platform.getDefaultServerUrl?.()) === url) {
       platform.setDefaultServerUrl?.(null)
@@ -389,14 +390,11 @@ export function DialogSelectServer() {
       <div class="flex flex-col gap-2">
         <div ref={(el) => (listRoot = el)}>
           <List
-            search={{
+            search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
-              placeholder: language.t("dialog.server.search.placeholder"),
-              autofocus: false,
-            }}
             noInitialSelection
             emptyMessage={language.t("dialog.server.empty")}
             items={sortedItems}
-            key={(x) => x.http.url}
+            key={(x) => x}
             onSelect={(x) => {
               if (x) select(x)
             }}
@@ -430,7 +428,7 @@ export function DialogSelectServer() {
               return (
                 <div class="flex items-center gap-3 min-w-0 flex-1 group/item">
                   <Show
-                    when={store.editServer.id !== i.http.url}
+                    when={store.editServer.id !== i}
                     fallback={
                       <EditRow
                         value={store.editServer.value}
@@ -445,12 +443,12 @@ export function DialogSelectServer() {
                     }
                   >
                     <ServerRow
-                      conn={i}
+                      url={i}
-                      status={store.status[ServerConnection.key(i)]}
+                      status={store.status[i]}
-                      dimmed={store.status[ServerConnection.key(i)]?.healthy === false}
+                      dimmed={store.status[i]?.healthy === false}
                       class="flex items-center gap-3 px-4 min-w-0 flex-1"
                       badge={
-                        <Show when={defaultUrl() === i.http.url}>
+                        <Show when={defaultUrl() === i}>
                           <span class="text-text-weak bg-surface-base text-14-regular px-1.5 rounded-xs">
                             {language.t("dialog.server.status.default")}
                           </span>
@@ -458,63 +456,59 @@ export function DialogSelectServer() {
                       }
                     />
                   </Show>
-                  <Show when={store.editServer.id !== i.http.url}>
+                  <Show when={store.editServer.id !== i}>
                     <div class="flex items-center justify-center gap-5 pl-4">
                       <Show when={current() === i}>
                         <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
                       </Show>
 
-                      <Show when={i.type === "http"}>
+                      <DropdownMenu>
-                        <DropdownMenu>
+                        <DropdownMenu.Trigger
-                          <DropdownMenu.Trigger
+                          as={IconButton}
-                            as={IconButton}
+                          icon="dot-grid"
-                            icon="dot-grid"
+                          variant="ghost"
-                            variant="ghost"
+                          class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
-                            class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                          onClick={(e: MouseEvent) => e.stopPropagation()}
-                            onClick={(e: MouseEvent) => e.stopPropagation()}
+                          onPointerDown={(e: PointerEvent) => e.stopPropagation()}
-                            onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                        />
-                          />
+                        <DropdownMenu.Portal>
-                          <DropdownMenu.Portal>
+                          <DropdownMenu.Content class="mt-1">
-                            <DropdownMenu.Content class="mt-1">
+                            <DropdownMenu.Item
-                              <DropdownMenu.Item
+                              onSelect={() => {
-                                onSelect={() => {
+                                setStore("editServer", {
-                                  setStore("editServer", {
+                                  id: i,
-                                    id: i.http.url,
+                                  value: i,
-                                    value: i.http.url,
+                                  error: "",
-                                    error: "",
+                                  status: store.status[i]?.healthy,
-                                    status: store.status[ServerConnection.key(i)]?.healthy,
+                                })
-                                  })
+                              }}
-                                }}
+                            >
-                              >
+                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
-                                <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                            </DropdownMenu.Item>
-                              </DropdownMenu.Item>
+                            <Show when={canDefault() && defaultUrl() !== i}>
-                              <Show when={canDefault() && defaultUrl() !== i.http.url}>
+                              <DropdownMenu.Item onSelect={() => setDefault(i)}>
-                                <DropdownMenu.Item onSelect={() => setDefault(i.http.url)}>
-                                  <DropdownMenu.ItemLabel>
-                                    {language.t("dialog.server.menu.default")}
-                                  </DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                              </Show>
-                              <Show when={canDefault() && defaultUrl() === i.http.url}>
-                                <DropdownMenu.Item onSelect={() => setDefault(null)}>
-                                  <DropdownMenu.ItemLabel>
-                                    {language.t("dialog.server.menu.defaultRemove")}
-                                  </DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                              </Show>
-                              <DropdownMenu.Separator />
-                              <DropdownMenu.Item
-                                onSelect={() => handleRemove(ServerConnection.key(i))}
-                                class="text-text-on-critical-base hover:bg-surface-critical-weak"
-                              >
                                 <DropdownMenu.ItemLabel>
-                                  {language.t("dialog.server.menu.delete")}
+                                  {language.t("dialog.server.menu.default")}
                                 </DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
-                            </DropdownMenu.Content>
+                            </Show>
-                          </DropdownMenu.Portal>
+                            <Show when={canDefault() && defaultUrl() === i}>
-                        </DropdownMenu>
+                              <DropdownMenu.Item onSelect={() => setDefault(null)}>
-                      </Show>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("dialog.server.menu.defaultRemove")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </Show>
+                            <DropdownMenu.Separator />
+                            <DropdownMenu.Item
+                              onSelect={() => handleRemove(i)}
+                              class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                            >
+                              <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Content>
+                        </DropdownMenu.Portal>
+                      </DropdownMenu>
                     </div>
                   </Show>
                 </div>

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

@@ -71,13 +71,13 @@ const kindLabel = (kind: Kind) => {
 const kindTextColor = (kind: Kind) => {
   if (kind === "add") return "color: var(--icon-diff-add-base)"
   if (kind === "del") return "color: var(--icon-diff-delete-base)"
-  return "color: var(--icon-diff-modified-base)"
+  return "color: var(--icon-warning-active)"
 }
 
 const kindDotColor = (kind: Kind) => {
   if (kind === "add") return "background-color: var(--icon-diff-add-base)"
   if (kind === "del") return "background-color: var(--icon-diff-delete-base)"
-  return "background-color: var(--icon-diff-modified-base)"
+  return "background-color: var(--icon-warning-active)"
 }
 
 const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
@@ -447,13 +447,12 @@ export default function FileTree(props: {
   })
 
   return (
-    <div data-component="filetree" class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
+    <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
       <For each={nodes()}>
         {(node) => {
           const expanded = () => file.tree.state(node.path)?.expanded ?? false
           const deep = () => deeps().get(node.path) ?? -1
           const kind = () => visibleKind(node, kinds(), marks())
-          const active = () => !!kind() && !node.ignored
 
           return (
             <Switch>
@@ -531,37 +530,7 @@ export default function FileTree(props: {
                     onClick={() => props.onFileClick?.(node)}
                   >
                     <div class="w-4 shrink-0" />
-                    <Switch>
+                    <FileIcon node={node} class="text-icon-weak size-4" />
-                      <Match when={node.ignored}>
-                        <FileIcon
-                          node={node}
-                          class="size-4 filetree-icon filetree-icon--mono"
-                          style="color: var(--icon-weak-base)"
-                          mono
-                        />
-                      </Match>
-                      <Match when={active()}>
-                        <FileIcon
-                          node={node}
-                          class="size-4 filetree-icon filetree-icon--mono"
-                          style={kindTextColor(kind()!)}
-                          mono
-                        />
-                      </Match>
-                      <Match when={!node.ignored}>
-                        <span class="filetree-iconpair size-4">
-                          <FileIcon
-                            node={node}
-                            class="size-4 filetree-icon filetree-icon--color opacity-0 group-hover/filetree:opacity-100"
-                          />
-                          <FileIcon
-                            node={node}
-                            class="size-4 filetree-icon filetree-icon--mono group-hover/filetree:opacity-0"
-                            mono
-                          />
-                        </span>
-                      </Match>
-                    </Switch>
                   </FileTreeNode>
                 </FileTreeNodeTooltip>
               </Match>

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

@@ -1,5 +1,5 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { createEffect, on, Component, Show, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js"
+import { createEffect, on, Component, Show, For, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
@@ -26,13 +26,13 @@ import type { IconName } from "@opencode-ai/ui/icons/provider"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
-import { RadioGroup } from "@opencode-ai/ui/radio-group"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
 import { useCommand } from "@/context/command"
 import { Persist, persisted } from "@/utils/persist"
+import { SessionContextUsage } from "@/components/session-context-usage"
 import { usePermission } from "@/context/permission"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -94,6 +94,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const local = useLocal()
   const files = useFile()
   const prompt = usePrompt()
+  const commentCount = createMemo(() => prompt.context.items().filter((item) => !!item.comment?.trim()).length)
   const layout = useLayout()
   const comments = useComments()
   const params = useParams()
@@ -104,12 +105,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const language = useLanguage()
   const platform = usePlatform()
   let editorRef!: HTMLDivElement
-  let fileInputRef: HTMLInputElement | undefined
+  let fileInputRef!: HTMLInputElement
   let scrollRef!: HTMLDivElement
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
-  const inset = 44
 
   const scrollCursorIntoView = () => {
     const container = scrollRef
@@ -119,14 +119,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     const range = selection.getRangeAt(0)
     if (!editorRef.contains(range.startContainer)) return
 
-    const cursor = getCursorPosition(editorRef)
+    const rect = range.getBoundingClientRect()
-    const length = promptLength(prompt.current().filter((part) => part.type !== "image"))
-    if (cursor >= length) {
-      container.scrollTop = container.scrollHeight
-      return
-    }
-
-    const rect = range.getClientRects().item(0) ?? range.getBoundingClientRect()
     if (!rect.height) return
 
     const containerRect = container.getBoundingClientRect()
@@ -139,8 +132,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       return
     }
 
-    if (bottom > container.scrollTop + container.clientHeight - inset) {
+    if (bottom > container.scrollTop + container.clientHeight - padding) {
-      container.scrollTop = bottom - container.clientHeight + inset
+      container.scrollTop = bottom - container.clientHeight + padding
     }
   }
 
@@ -230,26 +223,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     mode: "normal",
     applyingHistory: false,
   })
+  const placeholder = createMemo(() =>
+    promptPlaceholder({
+      mode: store.mode,
+      commentCount: commentCount(),
+      example: language.t(EXAMPLES[store.placeholder]),
+      t: (key, params) => language.t(key as Parameters<typeof language.t>[0], params as never),
+    }),
+  )
 
-  const commentCount = createMemo(() => {
+  const MAX_HISTORY = 100
-    if (store.mode === "shell") return 0
-    return prompt.context.items().filter((item) => !!item.comment?.trim()).length
-  })
-
-  const contextItems = createMemo(() => {
-    const items = prompt.context.items()
-    if (store.mode !== "shell") return items
-    return items.filter((item) => !item.comment?.trim())
-  })
-
-  const hasUserPrompt = createMemo(() => {
-    const sessionID = params.id
-    if (!sessionID) return false
-    const messages = sync.data.message[sessionID]
-    if (!messages) return false
-    return messages.some((m) => m.role === "user")
-  })
-
   const [history, setHistory] = persisted(
     Persist.global("prompt-history", ["prompt-history.v1"]),
     createStore<{
@@ -267,18 +250,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }),
   )
 
-  const suggest = createMemo(() => !hasUserPrompt())
-
-  const placeholder = createMemo(() =>
-    promptPlaceholder({
-      mode: store.mode,
-      commentCount: commentCount(),
-      example: suggest() ? language.t(EXAMPLES[store.placeholder]) : "",
-      suggest: suggest(),
-      t: (key, params) => language.t(key as Parameters<typeof language.t>[0], params as never),
-    }),
-  )
-
   const applyHistoryPrompt = (p: Prompt, position: "start" | "end") => {
     const length = position === "start" ? 0 : promptLength(p)
     setStore("applyingHistory", true)
@@ -309,45 +280,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }
 
   const isFocused = createFocusSignal(() => editorRef)
-  const escBlur = () => platform.platform === "desktop" && platform.os === "macos"
-
-  const pick = () => fileInputRef?.click()
-
-  const setMode = (mode: "normal" | "shell") => {
-    setStore("mode", mode)
-    setStore("popover", null)
-    requestAnimationFrame(() => editorRef?.focus())
-  }
-
-  const shellModeKey = "mod+shift+x"
-  const normalModeKey = "mod+shift+e"
-
-  command.register("prompt-input", () => [
-    {
-      id: "file.attach",
-      title: language.t("prompt.action.attachFile"),
-      category: language.t("command.category.file"),
-      keybind: "mod+u",
-      disabled: store.mode !== "normal",
-      onSelect: pick,
-    },
-    {
-      id: "prompt.mode.shell",
-      title: language.t("command.prompt.mode.shell"),
-      category: language.t("command.category.session"),
-      keybind: shellModeKey,
-      disabled: store.mode === "shell",
-      onSelect: () => setMode("shell"),
-    },
-    {
-      id: "prompt.mode.normal",
-      title: language.t("command.prompt.mode.normal"),
-      category: language.t("command.category.session"),
-      keybind: normalModeKey,
-      disabled: store.mode === "normal",
-      onSelect: () => setMode("normal"),
-    },
-  ])
 
   const closePopover = () => setStore("popover", null)
 
@@ -393,7 +325,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   createEffect(() => {
     params.id
     if (params.id) return
-    if (!suggest()) return
     const interval = setInterval(() => {
       setStore("placeholder", (prev) => (prev + 1) % EXAMPLES.length)
     }, 6500)
@@ -884,13 +815,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   })
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "u") {
-      event.preventDefault()
-      if (store.mode !== "normal") return
-      pick()
-      return
-    }
-
     if (event.key === "Backspace") {
       const selection = window.getSelection()
       if (selection && selection.isCollapsed) {
@@ -918,39 +842,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         return
       }
     }
-
-    if (event.key === "Escape") {
-      if (store.popover) {
-        closePopover()
-        event.preventDefault()
-        event.stopPropagation()
-        return
-      }
-
-      if (store.mode === "shell") {
-        setStore("mode", "normal")
-        event.preventDefault()
-        event.stopPropagation()
-        return
-      }
-
-      if (working()) {
-        abort()
-        event.preventDefault()
-        event.stopPropagation()
-        return
-      }
-
-      if (escBlur()) {
-        editorRef.blur()
-        event.preventDefault()
-        event.stopPropagation()
-        return
-      }
-    }
-
     if (store.mode === "shell") {
       const { collapsed, cursorPosition, textLength } = getCaretState()
+      if (event.key === "Escape") {
+        setStore("mode", "normal")
+        event.preventDefault()
+        return
+      }
       if (event.key === "Backspace" && collapsed && cursorPosition === 0 && textLength === 0) {
         setStore("mode", "normal")
         event.preventDefault()
@@ -1029,12 +927,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (event.key === "Enter" && !event.shiftKey) {
       handleSubmit(event)
     }
+    if (event.key === "Escape") {
+      if (store.popover) {
+        closePopover()
+      } else if (working()) {
+        abort()
+      }
+    }
   }
 
-  const variants = createMemo(() => ["default", ...local.model.variant.list()])
-
   return (
-    <div class="relative size-full _max-h-[320px] flex flex-col gap-0">
+    <div class="relative size-full _max-h-[320px] flex flex-col gap-3">
       <PromptPopover
         popover={store.popover}
         setSlashPopoverRef={(el) => (slashPopoverRef = el)}
@@ -1054,8 +957,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         onSubmit={handleSubmit}
         classList={{
           "group/prompt-input": true,
-          "bg-surface-raised-stronger-non-alpha shadow-xs-border relative z-10": true,
+          "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
-          "rounded-[12px] overflow-clip focus-within:shadow-xs-border": true,
+          "rounded-[14px] overflow-clip focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.draggingType !== null,
           [props.class ?? ""]: !!props.class,
         }}
@@ -1065,7 +968,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           label={language.t(store.draggingType === "@mention" ? "prompt.dropzone.file.label" : "prompt.dropzone.label")}
         />
         <PromptContextItems
-          items={contextItems()}
+          items={prompt.context.items()}
           active={(item) => {
             const active = comments.active()
             return !!item.commentID && item.commentID === active?.id && item.path === active?.file
@@ -1085,195 +988,62 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           onRemove={removeImageAttachment}
           removeLabel={language.t("prompt.attachment.remove")}
         />
-        <div
+        <div class="relative max-h-[240px] overflow-y-auto" ref={(el) => (scrollRef = el)}>
-          class="relative"
+          <div
-          onMouseDown={(e) => {
+            data-component="prompt-input"
-            const target = e.target
+            ref={(el) => {
-            if (!(target instanceof HTMLElement)) return
+              editorRef = el
-            if (
+              props.ref?.(el)
-              target.closest(
+            }}
-                '[data-action="prompt-attach"], [data-action="prompt-submit"], [data-action="prompt-permissions"]',
+            role="textbox"
-              )
+            aria-multiline="true"
-            ) {
+            aria-label={placeholder()}
-              return
+            contenteditable="true"
-            }
+            autocapitalize="off"
-            editorRef?.focus()
+            autocorrect="off"
-          }}
+            spellcheck={false}
-        >
+            onInput={handleInput}
-          <div class="relative max-h-[240px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
+            onPaste={handlePaste}
-            <div
+            onCompositionStart={() => setComposing(true)}
-              data-component="prompt-input"
+            onCompositionEnd={() => setComposing(false)}
-              ref={(el) => {
+            onKeyDown={handleKeyDown}
-                editorRef = el
+            classList={{
-                props.ref?.(el)
+              "select-text": true,
-              }}
+              "w-full p-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
-              role="textbox"
+              "[&_[data-type=file]]:text-syntax-property": true,
-              aria-multiline="true"
+              "[&_[data-type=agent]]:text-syntax-type": true,
-              aria-label={placeholder()}
+              "font-mono!": store.mode === "shell",
-              contenteditable="true"
+            }}
-              autocapitalize="off"
+          />
-              autocorrect="off"
+          <Show when={!prompt.dirty()}>
-              spellcheck={false}
+            <div class="absolute top-0 inset-x-0 p-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
-              onInput={handleInput}
+              {placeholder()}
-              onPaste={handlePaste}
-              onCompositionStart={() => setComposing(true)}
-              onCompositionEnd={() => setComposing(false)}
-              onKeyDown={handleKeyDown}
-              classList={{
-                "select-text": true,
-                "w-full pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
-                "[&_[data-type=file]]:text-syntax-property": true,
-                "[&_[data-type=agent]]:text-syntax-type": true,
-                "font-mono!": store.mode === "shell",
-              }}
-            />
-            <Show when={!prompt.dirty()}>
-              <div
-                class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
-                classList={{ "font-mono!": store.mode === "shell" }}
-              >
-                {placeholder()}
-              </div>
-            </Show>
-          </div>
-
-          <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={ACCEPTED_FILE_TYPES.join(",")}
-              class="hidden"
-              onChange={(e) => {
-                const file = e.currentTarget.files?.[0]
-                if (file) addImageAttachment(file)
-                e.currentTarget.value = ""
-              }}
-            />
-
-            <div
-              aria-hidden={store.mode !== "normal"}
-              class="flex items-center gap-1 transition-all duration-200 ease-out"
-              classList={{
-                "opacity-100 translate-y-0 scale-100 pointer-events-auto": store.mode === "normal",
-                "opacity-0 translate-y-2 scale-95 pointer-events-none": store.mode !== "normal",
-              }}
-            >
-              <TooltipKeybind
-                placement="top"
-                title={language.t("prompt.action.attachFile")}
-                keybind={command.keybind("file.attach")}
-              >
-                <Button
-                  data-action="prompt-attach"
-                  type="button"
-                  variant="ghost"
-                  class="size-8 p-0"
-                  onClick={pick}
-                  disabled={store.mode !== "normal"}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  aria-label={language.t("prompt.action.attachFile")}
-                >
-                  <Icon name="plus" class="size-4.5" />
-                </Button>
-              </TooltipKeybind>
-
-              <Tooltip
-                placement="top"
-                inactive={!prompt.dirty() && !working()}
-                value={
-                  <Switch>
-                    <Match when={working()}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.stop")}</span>
-                        <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
-                      </div>
-                    </Match>
-                    <Match when={true}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.send")}</span>
-                        <Icon name="enter" size="small" class="text-icon-base" />
-                      </div>
-                    </Match>
-                  </Switch>
-                }
-              >
-                <IconButton
-                  data-action="prompt-submit"
-                  type="submit"
-                  disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  icon={working() ? "stop" : "arrow-up"}
-                  variant="primary"
-                  class="size-8"
-                  aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
-                />
-              </Tooltip>
-            </div>
-          </div>
-
-          <Show when={store.mode === "normal" && permission.permissionsEnabled() && params.id}>
-            <div class="pointer-events-none absolute bottom-2 left-2">
-              <div class="pointer-events-auto">
-                <TooltipKeybind
-                  placement="top"
-                  gutter={8}
-                  title={language.t("command.permissions.autoaccept.enable")}
-                  keybind={command.keybind("permissions.autoaccept")}
-                >
-                  <Button
-                    data-action="prompt-permissions"
-                    variant="ghost"
-                    onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
-                    classList={{
-                      "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
-                      "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
-                      "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
-                    }}
-                    aria-label={
-                      permission.isAutoAccepting(params.id!, sdk.directory)
-                        ? language.t("command.permissions.autoaccept.disable")
-                        : language.t("command.permissions.autoaccept.enable")
-                    }
-                    aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
-                  >
-                    <Icon
-                      name="chevron-double-right"
-                      size="small"
-                      classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!, sdk.directory) }}
-                    />
-                  </Button>
-                </TooltipKeybind>
-              </div>
             </div>
           </Show>
         </div>
-      </form>
+        <div class="relative p-3 flex items-center justify-between gap-2">
-      <Show when={store.mode === "normal" || store.mode === "shell"}>
+          <div class="flex items-center gap-2 min-w-0 flex-1">
-        <div class="-mt-3.5 bg-background-base border border-border-weak-base relative z-0 rounded-[12px] rounded-tl-0 rounded-tr-0 overflow-clip">
+            <Switch>
-          <div class="px-2 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
+              <Match when={store.mode === "shell"}>
-            <div class="flex items-center gap-1.5 min-w-0 flex-1">
+                <div class="flex items-center gap-2 px-2 h-6">
-              <Show when={store.mode === "shell"}>
+                  <Icon name="console" size="small" class="text-icon-primary" />
-                <div class="h-7 flex items-center gap-1.5 max-w-[160px] min-w-0" style={{ padding: "0 4px 0 8px" }}>
+                  <span class="text-12-regular text-text-primary">{language.t("prompt.mode.shell")}</span>
-                  <span class="truncate text-13-medium text-text-strong">{language.t("prompt.mode.shell")}</span>
+                  <span class="text-12-regular text-text-weak">{language.t("prompt.mode.shell.exit")}</span>
-                  <div class="size-4 shrink-0" />
                 </div>
-              </Show>
+              </Match>
-
+              <Match when={store.mode === "normal"}>
-              <Show when={store.mode === "normal"}>
                 <TooltipKeybind
                   placement="top"
-                  gutter={4}
+                  gutter={8}
                   title={language.t("command.agent.cycle")}
                   keybind={command.keybind("agent.cycle")}
                 >
                   <Select
-                    size="normal"
                     options={agentNames()}
                     current={local.agent.current()?.name ?? ""}
                     onSelect={local.agent.set}
-                    class="capitalize max-w-[160px]"
+                    class={`capitalize ${local.model.variant.list().length > 0 ? "max-w-full" : "max-w-[120px]"}`}
-                    valueClass="truncate text-13-regular"
+                    valueClass="truncate"
-                    triggerStyle={{ height: "28px" }}
                     variant="ghost"
                   />
                 </TooltipKeybind>
@@ -1282,24 +1052,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   fallback={
                     <TooltipKeybind
                       placement="top"
-                      gutter={4}
+                      gutter={8}
                       title={language.t("command.model.choose")}
                       keybind={command.keybind("model.choose")}
                     >
                       <Button
                         as="div"
                         variant="ghost"
-                        size="normal"
+                        class="px-2 min-w-0 max-w-[240px]"
-                        class="min-w-0 max-w-[320px] text-13-regular group"
-                        style={{ height: "28px" }}
                         onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
                       >
                         <Show when={local.model.current()?.provider?.id}>
-                          <ProviderIcon
+                          <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                            id={local.model.current()!.provider.id as IconName}
-                            class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                            style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                          />
                         </Show>
                         <span class="truncate">
                           {local.model.current()?.name ?? language.t("dialog.model.select.title")}
@@ -1311,25 +1075,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 >
                   <TooltipKeybind
                     placement="top"
-                    gutter={4}
+                    gutter={8}
                     title={language.t("command.model.choose")}
                     keybind={command.keybind("model.choose")}
                   >
                     <ModelSelectorPopover
                       triggerAs={Button}
-                      triggerProps={{
+                      triggerProps={{ variant: "ghost", class: "min-w-0 max-w-[240px]" }}
-                        variant: "ghost",
-                        size: "normal",
-                        style: { height: "28px" },
-                        class: "min-w-0 max-w-[320px] text-13-regular group",
-                      }}
                     >
                       <Show when={local.model.current()?.provider?.id}>
-                        <ProviderIcon
+                        <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                          id={local.model.current()!.provider.id as IconName}
-                          class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                          style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                        />
                       </Show>
                       <span class="truncate">
                         {local.model.current()?.name ?? language.t("dialog.model.select.title")}
@@ -1338,58 +1093,116 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     </ModelSelectorPopover>
                   </TooltipKeybind>
                 </Show>
-                <TooltipKeybind
+                <Show when={local.model.variant.list().length > 0}>
-                  placement="top"
-                  gutter={4}
-                  title={language.t("command.model.variant.cycle")}
-                  keybind={command.keybind("model.variant.cycle")}
-                >
-                  <Select
-                    size="normal"
-                    options={variants()}
-                    current={local.model.variant.current() ?? "default"}
-                    label={(x) => (x === "default" ? language.t("common.default") : x)}
-                    onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
-                    class="capitalize max-w-[160px]"
-                    valueClass="truncate text-13-regular"
-                    triggerStyle={{ height: "28px" }}
-                    variant="ghost"
-                  />
-                </TooltipKeybind>
-              </Show>
-            </div>
-            <div class="shrink-0" data-component="prompt-mode-toggle">
-              <RadioGroup
-                options={["shell", "normal"] as const}
-                current={store.mode}
-                value={(mode) => mode}
-                label={(mode) => (
                   <TooltipKeybind
                     placement="top"
-                    gutter={4}
+                    gutter={8}
-                    title={language.t(mode === "shell" ? "command.prompt.mode.shell" : "command.prompt.mode.normal")}
+                    title={language.t("command.model.variant.cycle")}
-                    keybind={command.keybind(mode === "shell" ? "prompt.mode.shell" : "prompt.mode.normal")}
+                    keybind={command.keybind("model.variant.cycle")}
-                    class="size-full flex items-center justify-center"
                   >
-                    <Icon
+                    <Button
-                      name={mode === "shell" ? "console" : "prompt"}
+                      data-action="model-variant-cycle"
-                      class="size-[18px]"
+                      variant="ghost"
-                      classList={{
+                      class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
-                        "text-icon-strong-base": store.mode === mode,
+                      onClick={() => local.model.variant.cycle()}
-                        "text-icon-weak": store.mode !== mode,
+                    >
-                      }}
+                      {local.model.variant.current() ?? language.t("common.default")}
-                    />
+                    </Button>
                   </TooltipKeybind>
-                )}
+                </Show>
-                onSelect={(mode) => mode && setMode(mode)}
+                <Show when={permission.permissionsEnabled() && params.id}>
-                fill
+                  <TooltipKeybind
-                pad="none"
+                    placement="top"
-                class="w-[68px]"
+                    gutter={8}
-              />
+                    title={language.t("command.permissions.autoaccept.enable")}
+                    keybind={command.keybind("permissions.autoaccept")}
+                  >
+                    <Button
+                      variant="ghost"
+                      onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
+                      classList={{
+                        "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
+                        "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
+                        "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
+                      }}
+                      aria-label={
+                        permission.isAutoAccepting(params.id!, sdk.directory)
+                          ? language.t("command.permissions.autoaccept.disable")
+                          : language.t("command.permissions.autoaccept.enable")
+                      }
+                      aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
+                    >
+                      <Icon
+                        name="chevron-double-right"
+                        size="small"
+                        classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!, sdk.directory) }}
+                      />
+                    </Button>
+                  </TooltipKeybind>
+                </Show>
+              </Match>
+            </Switch>
+          </div>
+          <div class="flex items-center gap-1 shrink-0">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPTED_FILE_TYPES.join(",")}
+              class="hidden"
+              onChange={(e) => {
+                const file = e.currentTarget.files?.[0]
+                if (file) addImageAttachment(file)
+                e.currentTarget.value = ""
+              }}
+            />
+            <div class="flex items-center gap-1 mr-1">
+              <SessionContextUsage />
+              <Show when={store.mode === "normal"}>
+                <Tooltip placement="top" value={language.t("prompt.action.attachFile")}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    class="size-6 px-1"
+                    onClick={() => fileInputRef.click()}
+                    aria-label={language.t("prompt.action.attachFile")}
+                  >
+                    <Icon name="photo" class="size-4.5" />
+                  </Button>
+                </Tooltip>
+              </Show>
             </div>
+            <Tooltip
+              placement="top"
+              inactive={!prompt.dirty() && !working()}
+              value={
+                <Switch>
+                  <Match when={working()}>
+                    <div class="flex items-center gap-2">
+                      <span>{language.t("prompt.action.stop")}</span>
+                      <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
+                    </div>
+                  </Match>
+                  <Match when={true}>
+                    <div class="flex items-center gap-2">
+                      <span>{language.t("prompt.action.send")}</span>
+                      <Icon name="enter" size="small" class="text-icon-base" />
+                    </div>
+                  </Match>
+                </Switch>
+              }
+            >
+              <IconButton
+                type="submit"
+                disabled={!prompt.dirty() && !working() && commentCount() === 0}
+                icon={working() ? "stop" : "arrow-up"}
+                variant="primary"
+                class="h-6 w-4.5"
+                aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+              />
+            </Tooltip>
           </div>
         </div>
-      </Show>
+      </form>
     </div>
   )
 }

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

@@ -41,9 +41,10 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
               >
                 <div
                   classList={{
-                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
-                    "hover:bg-surface-interactive-weak": !!item.commentID && !selected,
+                    "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !selected,
-                    "bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
+                    "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
+                      selected,
                     "bg-background-stronger": !selected,
                   }}
                   onClick={() => props.openComment(item)}

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

@@ -9,40 +9,27 @@ describe("promptPlaceholder", () => {
       mode: "shell",
       commentCount: 0,
       example: "example",
-      suggest: true,
       t,
     })
     expect(value).toBe("prompt.placeholder.shell")
   })
 
   test("returns summarize placeholders for comment context", () => {
-    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", suggest: true, t })).toBe(
+    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", t })).toBe(
       "prompt.placeholder.summarizeComment",
     )
-    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", suggest: true, t })).toBe(
+    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", t })).toBe(
       "prompt.placeholder.summarizeComments",
     )
   })
 
-  test("returns default placeholder with example when suggestions enabled", () => {
+  test("returns default placeholder with example", () => {
     const value = promptPlaceholder({
       mode: "normal",
       commentCount: 0,
       example: "translated-example",
-      suggest: true,
       t,
     })
     expect(value).toBe("prompt.placeholder.normal:translated-example")
   })
-
-  test("returns simple placeholder when suggestions disabled", () => {
-    const value = promptPlaceholder({
-      mode: "normal",
-      commentCount: 0,
-      example: "translated-example",
-      suggest: false,
-      t,
-    })
-    expect(value).toBe("prompt.placeholder.simple")
-  })
 })

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

@@ -2,7 +2,6 @@ type PromptPlaceholderInput = {
   mode: "normal" | "shell"
   commentCount: number
   example: string
-  suggest: boolean
   t: (key: string, params?: Record<string, string>) => string
 }
 
@@ -10,6 +9,5 @@ export function promptPlaceholder(input: PromptPlaceholderInput) {
   if (input.mode === "shell") return input.t("prompt.placeholder.shell")
   if (input.commentCount > 1) return input.t("prompt.placeholder.summarizeComments")
   if (input.commentCount === 1) return input.t("prompt.placeholder.summarizeComment")
-  if (!input.suggest) return input.t("prompt.placeholder.simple")
   return input.t("prompt.placeholder.normal", { example: input.example })
 }

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

@@ -40,9 +40,9 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
         ref={(el) => {
           if (props.popover === "slash") props.setSlashPopoverRef(el)
         }}
-        class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
+        class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-80 min-h-10
-                 overflow-auto no-scrollbar flex flex-col p-2 rounded-[12px]
+                 overflow-auto no-scrollbar flex flex-col p-2 rounded-md
-                 bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]"
+                 border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
         onMouseDown={(e) => e.preventDefault()}
       >
         <Switch>

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

@@ -12,27 +12,24 @@ let selected = "/repo/worktree-a"
 
 const promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
 
-const clientFor = (directory: string) => {
+const clientFor = (directory: string) => ({
-  createdClients.push(directory)
+  session: {
-  return {
+    create: async () => {
-    session: {
+      createdSessions.push(directory)
-      create: async () => {
+      return { data: { id: `session-${createdSessions.length}` } }
-        createdSessions.push(directory)
-        return { data: { id: `session-${createdSessions.length}` } }
-      },
-      shell: async () => {
-        sentShell.push(directory)
-        return { data: undefined }
-      },
-      prompt: async () => ({ data: undefined }),
-      command: async () => ({ data: undefined }),
-      abort: async () => ({ data: undefined }),
     },
-    worktree: {
+    shell: async () => {
-      create: async () => ({ data: { directory: `${directory}/new` } }),
+      sentShell.push(directory)
+      return { data: undefined }
     },
-  }
+    prompt: async () => ({ data: undefined }),
-}
+    command: async () => ({ data: undefined }),
+    abort: async () => ({ data: undefined }),
+  },
+  worktree: {
+    create: async () => ({ data: { directory: `${directory}/new` } }),
+  },
+})
 
 beforeAll(async () => {
   const rootClient = clientFor("/repo/main")
@@ -91,17 +88,11 @@ beforeAll(async () => {
   }))
 
   mock.module("@/context/sdk", () => ({
-    useSDK: () => {
+    useSDK: () => ({
-      const sdk = {
+      directory: "/repo/main",
-        directory: "/repo/main",
+      client: rootClient,
-        client: rootClient,
+      url: "http://localhost:4096",
-        url: "http://localhost:4096",
+    }),
-        createClient(opts: any) {
-          return clientFor(opts.directory)
-        },
-      }
-      return sdk
-    },
   }))
 
   mock.module("@/context/sync", () => ({

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

@@ -1,20 +1,21 @@
-import type { Message } from "@opencode-ai/sdk/v2/client"
+import { Accessor } from "solid-js"
+import { useNavigate, useParams } from "@solidjs/router"
+import { createOpencodeClient, type Message } from "@opencode-ai/sdk/v2/client"
 import { showToast } from "@opencode-ai/ui/toast"
 import { base64Encode } from "@opencode-ai/util/encode"
-import { useNavigate, useParams } from "@solidjs/router"
-import type { Accessor } from "solid-js"
-import type { FileSelection } from "@/context/file"
-import { useGlobalSync } from "@/context/global-sync"
-import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
-import { type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt"
+import { usePrompt, type ImageAttachmentPart, type Prompt } from "@/context/prompt"
+import { useLayout } from "@/context/layout"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
+import { useGlobalSync } from "@/context/global-sync"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
 import { Identifier } from "@/utils/id"
 import { Worktree as WorktreeState } from "@/utils/worktree"
-import { buildRequestParts } from "./build-request-parts"
+import type { FileSelection } from "@/context/file"
 import { setCursorPosition } from "./editor-dom"
+import { buildRequestParts } from "./build-request-parts"
 
 type PendingPrompt = {
   abort: AbortController
@@ -55,6 +56,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   const sdk = useSDK()
   const sync = useSync()
   const globalSync = useGlobalSync()
+  const platform = usePlatform()
   const local = useLocal()
   const prompt = usePrompt()
   const layout = useLayout()
@@ -78,7 +80,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       queued.abort.abort()
       queued.cleanup()
       pending.delete(sessionID)
-      globalSync.todo.set(sessionID, undefined)
       return Promise.resolve()
     }
     return sdk.client.session
@@ -86,9 +87,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         sessionID,
       })
       .catch(() => {})
-      .finally(() => {
-        globalSync.todo.set(sessionID, undefined)
-      })
   }
 
   const restoreCommentItems = (items: CommentItem[]) => {
@@ -173,7 +171,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       }
 
       if (sessionDirectory !== projectDirectory) {
-        client = sdk.createClient({
+        client = createOpencodeClient({
+          baseUrl: sdk.url,
+          fetch: platform.fetch,
           directory: sessionDirectory,
           throwOnError: true,
         })
@@ -368,10 +368,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       const timer = { id: undefined as number | undefined }
       const timeout = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
         timer.id = window.setTimeout(() => {
-          resolve({
+          resolve({ status: "failed", message: language.t("workspace.error.stillPreparing") })
-            status: "failed",
-            message: language.t("workspace.error.stillPreparing"),
-          })
         }, timeoutMs)
       })
 

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

@@ -1,7 +1,6 @@
-import { For, Show, createMemo, onCleanup, onMount, type Component } from "solid-js"
+import { For, Show, createMemo, type Component } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
-import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
 import { showToast } from "@opencode-ai/ui/toast"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
@@ -13,98 +12,25 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
   const language = useLanguage()
 
   const questions = createMemo(() => props.request.questions)
-  const total = createMemo(() => questions().length)
+  const single = createMemo(() => questions().length === 1 && questions()[0]?.multiple !== true)
 
   const [store, setStore] = createStore({
     tab: 0,
     answers: [] as QuestionAnswer[],
     custom: [] as string[],
-    customOn: [] as boolean[],
     editing: false,
     sending: false,
   })
 
-  let root: HTMLDivElement | undefined
-
   const question = createMemo(() => questions()[store.tab])
+  const confirm = createMemo(() => !single() && store.tab === questions().length)
   const options = createMemo(() => question()?.options ?? [])
   const input = createMemo(() => store.custom[store.tab] ?? "")
-  const on = createMemo(() => store.customOn[store.tab] === true)
   const multi = createMemo(() => question()?.multiple === true)
-
+  const customPicked = createMemo(() => {
-  const summary = createMemo(() => {
+    const value = input()
-    const n = Math.min(store.tab + 1, total())
+    if (!value) return false
-    return `${n} of ${total()} questions`
+    return store.answers[store.tab]?.includes(value) ?? false
-  })
-
-  const last = createMemo(() => store.tab >= total() - 1)
-
-  const customUpdate = (value: string, selected: boolean = on()) => {
-    const prev = input().trim()
-    const next = value.trim()
-
-    setStore("custom", store.tab, value)
-    if (!selected) return
-
-    if (multi()) {
-      setStore("answers", store.tab, (current = []) => {
-        const removed = prev ? current.filter((item) => item.trim() !== prev) : current
-        if (!next) return removed
-        if (removed.some((item) => item.trim() === next)) return removed
-        return [...removed, next]
-      })
-      return
-    }
-
-    setStore("answers", store.tab, next ? [next] : [])
-  }
-
-  const measure = () => {
-    if (!root) return
-
-    const scroller = document.querySelector(".session-scroller")
-    const head = scroller instanceof HTMLElement ? scroller.firstElementChild : undefined
-    const top =
-      head instanceof HTMLElement && head.classList.contains("sticky") ? head.getBoundingClientRect().bottom : 0
-    if (!top) {
-      root.style.removeProperty("--question-prompt-max-height")
-      return
-    }
-
-    const dock = root.closest('[data-component="session-prompt-dock"]')
-    if (!(dock instanceof HTMLElement)) return
-
-    const dockBottom = dock.getBoundingClientRect().bottom
-    const below = Math.max(0, dockBottom - root.getBoundingClientRect().bottom)
-    const gap = 8
-    const max = Math.max(240, Math.floor(dockBottom - top - gap - below))
-    root.style.setProperty("--question-prompt-max-height", `${max}px`)
-  }
-
-  onMount(() => {
-    let raf: number | undefined
-    const update = () => {
-      if (raf !== undefined) cancelAnimationFrame(raf)
-      raf = requestAnimationFrame(() => {
-        raf = undefined
-        measure()
-      })
-    }
-
-    update()
-    window.addEventListener("resize", update)
-
-    const dock = root?.closest('[data-component="session-prompt-dock"]')
-    const scroller = document.querySelector(".session-scroller")
-    const observer = new ResizeObserver(update)
-    if (dock instanceof HTMLElement) observer.observe(dock)
-    if (scroller instanceof HTMLElement) observer.observe(scroller)
-
-    onCleanup(() => {
-      window.removeEventListener("resize", update)
-      observer.disconnect()
-      if (raf !== undefined) cancelAnimationFrame(raf)
-    })
   })
 
   const fail = (err: unknown) => {
@@ -138,13 +64,23 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     }
   }
 
-  const submit = () => void reply(questions().map((_, i) => store.answers[i] ?? []))
+  const submit = () => {
+    void reply(questions().map((_, i) => store.answers[i] ?? []))
+  }
 
   const pick = (answer: string, custom: boolean = false) => {
     setStore("answers", store.tab, [answer])
-    if (custom) setStore("custom", store.tab, answer)
+
-    if (!custom) setStore("customOn", store.tab, false)
+    if (custom) {
-    setStore("editing", false)
+      setStore("custom", store.tab, answer)
+    }
+
+    if (single()) {
+      void reply([[answer]])
+      return
+    }
+
+    setStore("tab", store.tab + 1)
   }
 
   const toggle = (answer: string) => {
@@ -154,41 +90,16 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     })
   }
 
-  const customToggle = () => {
+  const selectTab = (index: number) => {
-    if (store.sending) return
+    setStore("tab", index)
-
-    if (!multi()) {
-      setStore("customOn", store.tab, true)
-      setStore("editing", true)
-      customUpdate(input(), true)
-      return
-    }
-
-    const next = !on()
-    setStore("customOn", store.tab, next)
-    if (next) {
-      setStore("editing", true)
-      customUpdate(input(), true)
-      return
-    }
-
-    const value = input().trim()
-    if (value) setStore("answers", store.tab, (current = []) => current.filter((item) => item.trim() !== value))
     setStore("editing", false)
   }
 
-  const customOpen = () => {
-    if (store.sending) return
-    if (!on()) setStore("customOn", store.tab, true)
-    setStore("editing", true)
-    customUpdate(input(), true)
-  }
-
   const selectOption = (optIndex: number) => {
     if (store.sending) return
 
     if (optIndex === options().length) {
-      customOpen()
+      setStore("editing", true)
       return
     }
 
@@ -201,225 +112,176 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     pick(opt.label)
   }
 
-  const commitCustom = () => {
+  const handleCustomSubmit = (e: Event) => {
-    setStore("editing", false)
+    e.preventDefault()
-    customUpdate(input())
-  }
-
-  const next = () => {
     if (store.sending) return
-    if (store.editing) commitCustom()
 
-    if (store.tab >= total() - 1) {
+    const value = input().trim()
-      submit()
+    if (!value) {
+      setStore("editing", false)
       return
     }
 
-    setStore("tab", store.tab + 1)
+    if (multi()) {
-    setStore("editing", false)
+      setStore("answers", store.tab, (current = []) => {
-  }
+        if (current.includes(value)) return current
+        return [...current, value]
+      })
+      setStore("editing", false)
+      return
+    }
 
-  const back = () => {
+    pick(value, true)
-    if (store.sending) return
-    if (store.tab <= 0) return
-    setStore("tab", store.tab - 1)
-    setStore("editing", false)
-  }
-
-  const jump = (tab: number) => {
-    if (store.sending) return
-    setStore("tab", tab)
     setStore("editing", false)
   }
 
   return (
-    <DockPrompt
+    <div data-component="question-prompt">
-      kind="question"
+      <Show when={!single()}>
-      ref={(el) => (root = el)}
+        <div data-slot="question-tabs">
-      header={
+          <For each={questions()}>
-        <>
+            {(q, index) => {
-          <div data-slot="question-header-title">{summary()}</div>
+              const active = () => index() === store.tab
-          <div data-slot="question-progress">
+              const answered = () => (store.answers[index()]?.length ?? 0) > 0
-            <For each={questions()}>
+              return (
-              {(_, i) => (
                 <button
-                  type="button"
+                  data-slot="question-tab"
-                  data-slot="question-progress-segment"
+                  data-active={active()}
-                  data-active={i() === store.tab}
+                  data-answered={answered()}
-                  data-answered={
-                    (store.answers[i()]?.length ?? 0) > 0 ||
-                    (store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
-                  }
                   disabled={store.sending}
-                  onClick={() => jump(i())}
+                  onClick={() => selectTab(index())}
-                  aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
+                >
-                />
+                  {q.header}
-              )}
+                </button>
-            </For>
+              )
-          </div>
+            }}
-        </>
+          </For>
-      }
+          <button
-      footer={
+            data-slot="question-tab"
-        <>
+            data-active={confirm()}
-          <Button variant="ghost" size="large" disabled={store.sending} onClick={reject}>
+            disabled={store.sending}
-            {language.t("ui.common.dismiss")}
+            onClick={() => selectTab(questions().length)}
-          </Button>
+          >
-          <div data-slot="question-footer-actions">
+            {language.t("ui.common.confirm")}
-            <Show when={store.tab > 0}>
+          </button>
-              <Button variant="secondary" size="large" disabled={store.sending} onClick={back}>
+        </div>
-                {language.t("ui.common.back")}
-              </Button>
-            </Show>
-            <Button variant={last() ? "primary" : "secondary"} size="large" disabled={store.sending} onClick={next}>
-              {last() ? language.t("ui.common.submit") : language.t("ui.common.next")}
-            </Button>
-          </div>
-        </>
-      }
-    >
-      <div data-slot="question-text">{question()?.question}</div>
-      <Show when={multi()} fallback={<div data-slot="question-hint">{language.t("ui.question.singleHint")}</div>}>
-        <div data-slot="question-hint">{language.t("ui.question.multiHint")}</div>
       </Show>
-      <div data-slot="question-options">
-        <For each={options()}>
-          {(opt, i) => {
-            const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
-            return (
-              <button
-                data-slot="question-option"
-                data-picked={picked()}
-                role={multi() ? "checkbox" : "radio"}
-                aria-checked={picked()}
-                disabled={store.sending}
-                onClick={() => selectOption(i())}
-              >
-                <span data-slot="question-option-check" aria-hidden="true">
-                  <span
-                    data-slot="question-option-box"
-                    data-type={multi() ? "checkbox" : "radio"}
-                    data-picked={picked()}
-                  >
-                    <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
-                      <Icon name="check-small" size="small" />
-                    </Show>
-                  </span>
-                </span>
-                <span data-slot="question-option-main">
-                  <span data-slot="option-label">{opt.label}</span>
-                  <Show when={opt.description}>
-                    <span data-slot="option-description">{opt.description}</span>
-                  </Show>
-                </span>
-              </button>
-            )
-          }}
-        </For>
 
-        <Show
+      <Show when={!confirm()}>
-          when={store.editing}
+        <div data-slot="question-content">
-          fallback={
+          <div data-slot="question-text">
+            {question()?.question}
+            {multi() ? " " + language.t("ui.question.multiHint") : ""}
+          </div>
+          <div data-slot="question-options">
+            <For each={options()}>
+              {(opt, i) => {
+                const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
+                return (
+                  <button
+                    data-slot="question-option"
+                    data-picked={picked()}
+                    disabled={store.sending}
+                    onClick={() => selectOption(i())}
+                  >
+                    <span data-slot="option-label">{opt.label}</span>
+                    <Show when={opt.description}>
+                      <span data-slot="option-description">{opt.description}</span>
+                    </Show>
+                    <Show when={picked()}>
+                      <Icon name="check-small" size="normal" />
+                    </Show>
+                  </button>
+                )
+              }}
+            </For>
             <button
               data-slot="question-option"
-              data-custom="true"
+              data-picked={customPicked()}
-              data-picked={on()}
-              role={multi() ? "checkbox" : "radio"}
-              aria-checked={on()}
               disabled={store.sending}
-              onClick={customOpen}
+              onClick={() => selectOption(options().length)}
             >
-              <span
-                data-slot="question-option-check"
-                aria-hidden="true"
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  customToggle()
-                }}
-              >
-                <span data-slot="question-option-box" data-type={multi() ? "checkbox" : "radio"} data-picked={on()}>
-                  <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
-                    <Icon name="check-small" size="small" />
-                  </Show>
-                </span>
-              </span>
-              <span data-slot="question-option-main">
-                <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
-                <span data-slot="option-description">{input() || language.t("ui.question.custom.placeholder")}</span>
-              </span>
-            </button>
-          }
-        >
-          <form
-            data-slot="question-option"
-            data-custom="true"
-            data-picked={on()}
-            role={multi() ? "checkbox" : "radio"}
-            aria-checked={on()}
-            onMouseDown={(e) => {
-              if (store.sending) {
-                e.preventDefault()
-                return
-              }
-              if (e.target instanceof HTMLTextAreaElement) return
-              const input = e.currentTarget.querySelector('[data-slot="question-custom-input"]')
-              if (input instanceof HTMLTextAreaElement) input.focus()
-            }}
-            onSubmit={(e) => {
-              e.preventDefault()
-              commitCustom()
-            }}
-          >
-            <span
-              data-slot="question-option-check"
-              aria-hidden="true"
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                customToggle()
-              }}
-            >
-              <span data-slot="question-option-box" data-type={multi() ? "checkbox" : "radio"} data-picked={on()}>
-                <Show when={multi()} fallback={<span data-slot="question-option-radio-dot" />}>
-                  <Icon name="check-small" size="small" />
-                </Show>
-              </span>
-            </span>
-            <span data-slot="question-option-main">
               <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
-              <textarea
+              <Show when={!store.editing && input()}>
-                ref={(el) =>
+                <span data-slot="option-description">{input()}</span>
-                  setTimeout(() => {
+              </Show>
-                    el.focus()
+              <Show when={customPicked()}>
-                    el.style.height = "0px"
+                <Icon name="check-small" size="normal" />
-                    el.style.height = `${el.scrollHeight}px`
+              </Show>
-                  }, 0)
+            </button>
-                }
+            <Show when={store.editing}>
-                data-slot="question-custom-input"
+              <form data-slot="custom-input-form" onSubmit={handleCustomSubmit}>
-                placeholder={language.t("ui.question.custom.placeholder")}
+                <input
-                value={input()}
+                  ref={(el) => setTimeout(() => el.focus(), 0)}
-                rows={1}
+                  type="text"
-                disabled={store.sending}
+                  data-slot="custom-input"
-                onKeyDown={(e) => {
+                  placeholder={language.t("ui.question.custom.placeholder")}
-                  if (e.key === "Escape") {
+                  value={input()}
-                    e.preventDefault()
+                  disabled={store.sending}
-                    setStore("editing", false)
+                  onInput={(e) => {
-                    return
+                    setStore("custom", store.tab, e.currentTarget.value)
-                  }
+                  }}
-                  if (e.key !== "Enter" || e.shiftKey) return
+                />
-                  e.preventDefault()
+                <Button type="submit" variant="primary" size="small" disabled={store.sending}>
-                  commitCustom()
+                  {multi() ? language.t("ui.common.add") : language.t("ui.common.submit")}
-                }}
+                </Button>
-                onInput={(e) => {
+                <Button
-                  customUpdate(e.currentTarget.value)
+                  type="button"
-                  e.currentTarget.style.height = "0px"
+                  variant="ghost"
-                  e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+                  size="small"
-                }}
+                  disabled={store.sending}
-              />
+                  onClick={() => setStore("editing", false)}
-            </span>
+                >
-          </form>
+                  {language.t("ui.common.cancel")}
+                </Button>
+              </form>
+            </Show>
+          </div>
+        </div>
+      </Show>
+
+      <Show when={confirm()}>
+        <div data-slot="question-review">
+          <div data-slot="review-title">{language.t("ui.messagePart.review.title")}</div>
+          <For each={questions()}>
+            {(q, index) => {
+              const value = () => store.answers[index()]?.join(", ") ?? ""
+              const answered = () => Boolean(value())
+              return (
+                <div data-slot="review-item">
+                  <span data-slot="review-label">{q.question}</span>
+                  <span data-slot="review-value" data-answered={answered()}>
+                    {answered() ? value() : language.t("ui.question.review.notAnswered")}
+                  </span>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+
+      <div data-slot="question-actions">
+        <Button variant="ghost" size="small" onClick={reject} disabled={store.sending}>
+          {language.t("ui.common.dismiss")}
+        </Button>
+        <Show when={!single()}>
+          <Show when={confirm()}>
+            <Button variant="primary" size="small" onClick={submit} disabled={store.sending}>
+              {language.t("ui.common.submit")}
+            </Button>
+          </Show>
+          <Show when={!confirm() && multi()}>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => selectTab(store.tab + 1)}
+              disabled={store.sending || (store.answers[store.tab]?.length ?? 0) === 0}
+            >
+              {language.t("ui.common.next")}
+            </Button>
+          </Show>
         </Show>
       </div>
-    </DockPrompt>
+    </div>
   )
 }

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

@@ -1,19 +1,10 @@
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import {
+import { JSXElement, ParentProps, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
-  createEffect,
+import { serverDisplayName } from "@/context/server"
-  createMemo,
-  createSignal,
-  type JSXElement,
-  onCleanup,
-  onMount,
-  type ParentProps,
-  Show,
-} from "solid-js"
-import { type ServerConnection, serverDisplayName } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
 
 interface ServerRowProps extends ParentProps {
-  conn: ServerConnection.Any
+  url: string
   status?: ServerHealth
   class?: string
   nameClass?: string
@@ -26,7 +17,7 @@ export function ServerRow(props: ServerRowProps) {
   const [truncated, setTruncated] = createSignal(false)
   let nameRef: HTMLSpanElement | undefined
   let versionRef: HTMLSpanElement | undefined
-  const name = createMemo(() => serverDisplayName(props.conn))
+  const name = createMemo(() => serverDisplayName(props.url))
 
   const check = () => {
     const nameTruncated = nameRef ? nameRef.scrollWidth > nameRef.clientWidth : false
@@ -36,7 +27,7 @@ export function ServerRow(props: ServerRowProps) {
 
   createEffect(() => {
     name()
-    props.conn.http.url
+    props.url
     props.status?.version
     queueMicrotask(check)
   })

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

@@ -1,5 +1,5 @@
 import { Match, Show, Switch, createMemo } from "solid-js"
-import { Tooltip, type TooltipProps } from "@opencode-ai/ui/tooltip"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { Button } from "@opencode-ai/ui/button"
 import { useParams } from "@solidjs/router"
@@ -11,7 +11,6 @@ import { getSessionContextMetrics } from "@/components/session/session-context-m
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
-  placement?: TooltipProps["placement"]
 }
 
 function openSessionContext(args: {
@@ -53,11 +52,6 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   const openContext = () => {
     if (!params.id) return
-
-    if (tabs().active() === "context") {
-      tabs().close("context")
-      return
-    }
     openSessionContext({
       view: view(),
       layout,
@@ -96,7 +90,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
+      <Tooltip value={tooltipValue()} placement="top">
         <Switch>
           <Match when={variant() === "indicator"}>{circle()}</Match>
           <Match when={true}>

packages/app/src/components/session-todo-dock.tsx

@@ -1,208 +0,0 @@
-import type { Todo } from "@opencode-ai/sdk/v2"
-import { Checkbox } from "@opencode-ai/ui/checkbox"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
-import { createStore } from "solid-js/store"
-
-function dot(status: Todo["status"]) {
-  if (status !== "in_progress") return undefined
-  return (
-    <svg
-      viewBox="0 0 12 12"
-      width="12"
-      height="12"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      class="block"
-    >
-      <circle
-        cx="6"
-        cy="6"
-        r="3"
-        style={{
-          animation: "var(--animate-pulse-scale)",
-          "transform-origin": "center",
-          "transform-box": "fill-box",
-        }}
-      />
-    </svg>
-  )
-}
-
-export function SessionTodoDock(props: { todos: Todo[]; title: string; collapseLabel: string; expandLabel: string }) {
-  const [store, setStore] = createStore({
-    collapsed: false,
-  })
-
-  const toggle = () => setStore("collapsed", (value) => !value)
-
-  const summary = createMemo(() => {
-    const total = props.todos.length
-    if (total === 0) return ""
-    const completed = props.todos.filter((todo) => todo.status === "completed").length
-    return `${completed} of ${total} ${props.title.toLowerCase()} completed`
-  })
-
-  const active = createMemo(
-    () =>
-      props.todos.find((todo) => todo.status === "in_progress") ??
-      props.todos.find((todo) => todo.status === "pending") ??
-      props.todos.filter((todo) => todo.status === "completed").at(-1) ??
-      props.todos[0],
-  )
-
-  const preview = createMemo(() => active()?.content ?? "")
-
-  return (
-    <div
-      classList={{
-        "bg-background-base border border-border-weak-base relative z-0 rounded-[12px] overflow-clip": true,
-        "h-[78px]": store.collapsed,
-      }}
-    >
-      <div
-        class="pl-3 pr-2 py-2 flex items-center gap-2"
-        role="button"
-        tabIndex={0}
-        onClick={toggle}
-        onKeyDown={(event) => {
-          if (event.key !== "Enter" && event.key !== " ") return
-          event.preventDefault()
-          toggle()
-        }}
-      >
-        <span class="text-14-regular text-text-strong cursor-default">{summary()}</span>
-        <Show when={store.collapsed}>
-          <div class="ml-1 flex-1 min-w-0">
-            <Show when={preview()}>
-              <div class="text-14-regular text-text-base truncate cursor-default">{preview()}</div>
-            </Show>
-          </div>
-        </Show>
-        <div classList={{ "ml-auto": !store.collapsed, "ml-1": store.collapsed }}>
-          <IconButton
-            icon="chevron-down"
-            size="normal"
-            variant="ghost"
-            classList={{ "rotate-180": !store.collapsed }}
-            onMouseDown={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-            }}
-            onClick={(event) => {
-              event.stopPropagation()
-              toggle()
-            }}
-            aria-label={store.collapsed ? props.expandLabel : props.collapseLabel}
-          />
-        </div>
-      </div>
-
-      <div hidden={store.collapsed}>
-        <TodoList todos={props.todos} open={!store.collapsed} />
-      </div>
-    </div>
-  )
-}
-
-function TodoList(props: { todos: Todo[]; open: boolean }) {
-  const [stuck, setStuck] = createSignal(false)
-  const [scrolling, setScrolling] = createSignal(false)
-  let scrollRef!: HTMLDivElement
-  let timer: number | undefined
-
-  const inProgress = createMemo(() => props.todos.findIndex((todo) => todo.status === "in_progress"))
-
-  const ensure = () => {
-    if (!props.open) return
-    if (scrolling()) return
-    if (!scrollRef || scrollRef.offsetParent === null) return
-
-    const el = scrollRef.querySelector("[data-in-progress]")
-    if (!(el instanceof HTMLElement)) return
-
-    const topFade = 16
-    const bottomFade = 44
-    const container = scrollRef.getBoundingClientRect()
-    const rect = el.getBoundingClientRect()
-    const top = rect.top - container.top + scrollRef.scrollTop
-    const bottom = rect.bottom - container.top + scrollRef.scrollTop
-    const viewTop = scrollRef.scrollTop + topFade
-    const viewBottom = scrollRef.scrollTop + scrollRef.clientHeight - bottomFade
-
-    if (top < viewTop) {
-      scrollRef.scrollTop = Math.max(0, top - topFade)
-    } else if (bottom > viewBottom) {
-      scrollRef.scrollTop = bottom - (scrollRef.clientHeight - bottomFade)
-    }
-
-    setStuck(scrollRef.scrollTop > 0)
-  }
-
-  createEffect(
-    on([() => props.open, inProgress], () => {
-      if (!props.open || inProgress() < 0) return
-      requestAnimationFrame(ensure)
-    }),
-  )
-
-  onCleanup(() => {
-    if (!timer) return
-    window.clearTimeout(timer)
-  })
-
-  return (
-    <div class="relative">
-      <div
-        class="px-3 pb-11 flex flex-col gap-1.5 max-h-42 overflow-y-auto no-scrollbar"
-        ref={scrollRef}
-        style={{ "overflow-anchor": "none" }}
-        onScroll={(e) => {
-          setStuck(e.currentTarget.scrollTop > 0)
-          setScrolling(true)
-          if (timer) window.clearTimeout(timer)
-          timer = window.setTimeout(() => {
-            setScrolling(false)
-            if (inProgress() < 0) return
-            requestAnimationFrame(ensure)
-          }, 250)
-        }}
-      >
-        <For each={props.todos}>
-          {(todo) => (
-            <Checkbox
-              readOnly
-              checked={todo.status === "completed"}
-              indeterminate={todo.status === "in_progress"}
-              data-in-progress={todo.status === "in_progress" ? "" : undefined}
-              icon={dot(todo.status)}
-              style={{ "--checkbox-align": "flex-start", "--checkbox-offset": "1px" }}
-            >
-              <span
-                class="text-14-regular min-w-0 break-words"
-                classList={{
-                  "text-text-weak": todo.status === "completed" || todo.status === "cancelled",
-                  "text-text-strong": todo.status !== "completed" && todo.status !== "cancelled",
-                }}
-                style={{
-                  "line-height": "var(--line-height-normal)",
-                  "text-decoration":
-                    todo.status === "completed" || todo.status === "cancelled" ? "line-through" : undefined,
-                }}
-              >
-                {todo.content}
-              </span>
-            </Checkbox>
-          )}
-        </For>
-      </div>
-      <div
-        class="pointer-events-none absolute top-0 left-0 right-0 h-4 transition-opacity duration-150"
-        style={{
-          background: "linear-gradient(to bottom, var(--background-base), transparent)",
-          opacity: stuck() ? 1 : 0,
-        }}
-      />
-    </div>
-  )
-}

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

@@ -5,7 +5,6 @@ import { useSync } from "@/context/sync"
 import { useLayout } from "@/context/layout"
 import { checksum } from "@opencode-ai/util/encode"
 import { findLast } from "@opencode-ai/util/array"
-import { same } from "@/utils/same"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
@@ -17,6 +16,13 @@ import { getSessionContextMetrics } from "./session-context-metrics"
 import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown"
 import { createSessionContextFormatter } from "./session-context-format"
 
+interface SessionContextTabProps {
+  messages: () => Message[]
+  visibleUserMessages: () => UserMessage[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
+}
+
 const BREAKDOWN_COLOR: Record<SessionContextBreakdownKey, string> = {
   system: "var(--syntax-info)",
   user: "var(--syntax-success)",
@@ -85,45 +91,11 @@ function RawMessage(props: {
   )
 }
 
-const emptyMessages: Message[] = []
+export function SessionContextTab(props: SessionContextTabProps) {
-const emptyUserMessages: UserMessage[] = []
-
-export function SessionContextTab() {
   const params = useParams()
   const sync = useSync()
-  const layout = useLayout()
   const language = useLanguage()
 
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-  const view = createMemo(() => layout.view(sessionKey))
-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
-
-  const messages = createMemo(
-    () => {
-      const id = params.id
-      if (!id) return emptyMessages
-      return (sync.data.message[id] ?? []) as Message[]
-    },
-    emptyMessages,
-    { equals: same },
-  )
-
-  const userMessages = createMemo(
-    () => messages().filter((m) => m.role === "user") as UserMessage[],
-    emptyUserMessages,
-    { equals: same },
-  )
-
-  const visibleUserMessages = createMemo(
-    () => {
-      const revert = info()?.revert?.messageID
-      if (!revert) return userMessages()
-      return userMessages().filter((m) => m.id < revert)
-    },
-    emptyUserMessages,
-    { equals: same },
-  )
-
   const usd = createMemo(
     () =>
       new Intl.NumberFormat(language.locale(), {
@@ -132,7 +104,7 @@ export function SessionContextTab() {
       }),
   )
 
-  const metrics = createMemo(() => getSessionContextMetrics(messages(), sync.data.provider.all))
+  const metrics = createMemo(() => getSessionContextMetrics(props.messages(), sync.data.provider.all))
   const ctx = createMemo(() => metrics().context)
   const formatter = createMemo(() => createSessionContextFormatter(language.locale()))
 
@@ -141,7 +113,7 @@ export function SessionContextTab() {
   })
 
   const counts = createMemo(() => {
-    const all = messages()
+    const all = props.messages()
     const user = all.reduce((count, x) => count + (x.role === "user" ? 1 : 0), 0)
     const assistant = all.reduce((count, x) => count + (x.role === "assistant" ? 1 : 0), 0)
     return {
@@ -152,7 +124,7 @@ export function SessionContextTab() {
   })
 
   const systemPrompt = createMemo(() => {
-    const msg = findLast(visibleUserMessages(), (m) => !!m.system)
+    const msg = findLast(props.visibleUserMessages(), (m) => !!m.system)
     const system = msg?.system
     if (!system) return
     const trimmed = system.trim()
@@ -174,12 +146,12 @@ export function SessionContextTab() {
 
   const breakdown = createMemo(
     on(
-      () => [ctx()?.message.id, ctx()?.input, messages().length, systemPrompt()],
+      () => [ctx()?.message.id, ctx()?.input, props.messages().length, systemPrompt()],
       () => {
         const c = ctx()
         if (!c?.input) return []
         return estimateSessionContextBreakdown({
-          messages: messages(),
+          messages: props.messages(),
           parts: sync.data.part as Record<string, Part[] | undefined>,
           input: c.input,
           systemPrompt: systemPrompt(),
@@ -197,7 +169,7 @@ export function SessionContextTab() {
   }
 
   const stats = [
-    { label: "context.stats.session", value: () => info()?.title ?? params.id ?? "—" },
+    { label: "context.stats.session", value: () => props.info()?.title ?? params.id ?? "—" },
     { label: "context.stats.messages", value: () => counts().all.toLocaleString(language.locale()) },
     { label: "context.stats.provider", value: providerLabel },
     { label: "context.stats.model", value: modelLabel },
@@ -214,7 +186,7 @@ export function SessionContextTab() {
     { label: "context.stats.userMessages", value: () => counts().user.toLocaleString(language.locale()) },
     { label: "context.stats.assistantMessages", value: () => counts().assistant.toLocaleString(language.locale()) },
     { label: "context.stats.totalCost", value: cost },
-    { label: "context.stats.sessionCreated", value: () => formatter().time(info()?.time.created) },
+    { label: "context.stats.sessionCreated", value: () => formatter().time(props.info()?.time.created) },
     { label: "context.stats.lastActivity", value: () => formatter().time(ctx()?.message.time.created) },
   ] satisfies { label: string; value: () => JSX.Element }[]
 
@@ -227,7 +199,7 @@ export function SessionContextTab() {
     const el = scroll
     if (!el) return
 
-    const s = view().scroll("context")
+    const s = props.view()?.scroll("context")
     if (!s) return
 
     if (el.scrollTop !== s.y) el.scrollTop = s.y
@@ -248,13 +220,13 @@ export function SessionContextTab() {
       pending = undefined
       if (!next) return
 
-      view().setScroll("context", next)
+      props.view().setScroll("context", next)
     })
   }
 
   createEffect(
     on(
-      () => messages().length,
+      () => props.messages().length,
       () => {
         requestAnimationFrame(restoreScroll)
       },
@@ -328,7 +300,7 @@ export function SessionContextTab() {
         <div class="flex flex-col gap-2">
           <div class="text-12-regular text-text-weak">{language.t("context.rawMessages.title")}</div>
           <Accordion multiple>
-            <For each={messages()}>
+            <For each={props.messages()}>
               {(message) => (
                 <RawMessage message={message} getParts={getParts} onRendered={restoreScroll} time={formatter().time} />
               )}

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

@@ -311,23 +311,25 @@ export function SessionHeader() {
     platform,
   })
 
-  const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
+  const leftMount = createMemo(
+    () => document.getElementById("opencode-titlebar-left") ?? document.getElementById("opencode-titlebar-center"),
+  )
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
   return (
     <>
-      <Show when={centerMount()}>
+      <Show when={leftMount()}>
         {(mount) => (
           <Portal mount={mount()}>
             <button
               type="button"
-              class="hidden md:flex w-[240px] max-w-full min-w-0 h-[24px] pl-0.5 pr-2 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[320px] max-w-full min-w-0 h-[24px] px-2 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
               aria-label={language.t("session.header.searchFiles")}
             >
-              <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-visible">
+              <div class="flex min-w-0 flex-1 items-center gap-2 overflow-visible">
-                <Icon name="magnifying-glass" size="small" class="icon-base shrink-0 size-4" />
+                <Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" />
-                <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate text-left">
+                <span class="flex-1 min-w-0 text-14-regular text-text-weak truncate h-4.5 flex items-center">
                   {language.t("session.header.search.placeholder", { project: name() })}
                 </span>
               </div>
@@ -344,17 +346,17 @@ export function SessionHeader() {
       <Show when={rightMount()}>
         {(mount) => (
           <Portal mount={mount()}>
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-3">
               <StatusPopover />
               <Show when={projectDirectory()}>
                 <div class="hidden xl:flex items-center">
                   <Show
                     when={canOpen()}
                     fallback={
-                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-base bg-surface-panel overflow-hidden">
                         <Button
                           variant="ghost"
-                          class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                          class="rounded-none h-full py-0 pr-3 pl-2 gap-2 border-none shadow-none"
                           onClick={copyPath}
                           aria-label={language.t("session.header.open.copyPath")}
                         >
@@ -367,10 +369,10 @@ export function SessionHeader() {
                     }
                   >
                     <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">
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-base bg-surface-panel overflow-hidden">
                         <Button
                           variant="ghost"
-                          class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                          class="rounded-none h-full py-0 pr-3 pl-2 gap-1.5 border-none shadow-none"
                           onClick={() => openDir(current().id)}
                           aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
                         >
@@ -379,9 +381,9 @@ export function SessionHeader() {
                           </div>
                           <span class="text-12-regular text-text-strong">Open</span>
                         </Button>
-                        <div class="self-stretch w-px bg-border-weak-base" />
+                        <div class="self-stretch w-px bg-border-base/70" />
                         <DropdownMenu
-                          gutter={4}
+                          gutter={6}
                           placement="bottom-end"
                           open={menu.open}
                           onOpenChange={(open) => setMenu("open", open)}
@@ -390,7 +392,7 @@ export function SessionHeader() {
                             as={IconButton}
                             icon="chevron-down"
                             variant="ghost"
-                            class="rounded-none h-full w-[24px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-hover"
+                            class="rounded-none h-full w-[24px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active"
                             aria-label={language.t("session.header.open.menu")}
                           />
                           <DropdownMenu.Portal>
@@ -456,7 +458,7 @@ export function SessionHeader() {
                         ? language.t("session.share.popover.description.shared")
                         : language.t("session.share.popover.description.unshared")
                     }
-                    gutter={4}
+                    gutter={6}
                     placement="bottom-end"
                     shift={-64}
                     class="rounded-xl [&_[data-slot=popover-close-button]]:hidden"
@@ -468,7 +470,7 @@ export function SessionHeader() {
                       classList: { "rounded-r-none": share.shareUrl() !== undefined },
                       style: { scale: 1 },
                     }}
-                    trigger={<span class="text-12-regular">{language.t("session.share.action.share")}</span>}
+                    trigger={language.t("session.share.action.share")}
                   >
                     <div class="flex flex-col gap-2">
                       <Show
@@ -550,97 +552,94 @@ export function SessionHeader() {
                   </Show>
                 </div>
               </Show>
-              <div class="flex items-center gap-1">
+              <div class="flex items-center gap-3 ml-2 shrink-0">
-                <div class="hidden md:flex items-center gap-1 shrink-0">
+                <TooltipKeybind
-                  <TooltipKeybind
+                  title={language.t("command.terminal.toggle")}
-                    title={language.t("command.terminal.toggle")}
+                  keybind={command.keybind("terminal.toggle")}
-                    keybind={command.keybind("terminal.toggle")}
+                >
+                  <Button
+                    variant="ghost"
+                    class="group/terminal-toggle size-6 p-0"
+                    onClick={() => view().terminal.toggle()}
+                    aria-label={language.t("command.terminal.toggle")}
+                    aria-expanded={view().terminal.opened()}
+                    aria-controls="terminal-panel"
                   >
-                    <Button
+                    <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                      variant="ghost"
+                      <Icon
-                      class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                        size="small"
-                      onClick={() => view().terminal.toggle()}
+                        name={view().terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
-                      aria-label={language.t("command.terminal.toggle")}
+                        class="group-hover/terminal-toggle:hidden"
-                      aria-expanded={view().terminal.opened()}
+                      />
-                      aria-controls="terminal-panel"
+                      <Icon
-                    >
+                        size="small"
-                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        name="layout-bottom-partial"
-                        <Icon
+                        class="hidden group-hover/terminal-toggle:inline-block"
-                          size="small"
+                      />
-                          name={view().terminal.opened() ? "layout-bottom-partial" : "layout-bottom"}
+                      <Icon
-                          class="group-hover/terminal-toggle:hidden"
+                        size="small"
-                        />
+                        name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
-                        <Icon
+                        class="hidden group-active/terminal-toggle:inline-block"
-                          size="small"
+                      />
-                          name="layout-bottom-partial"
+                    </div>
-                          class="hidden group-hover/terminal-toggle:inline-block"
+                  </Button>
-                        />
+                </TooltipKeybind>
-                        <Icon
+              </div>
-                          size="small"
+              <div class="hidden lg:block shrink-0">
-                          name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-partial"}
+                <TooltipKeybind title={language.t("command.review.toggle")} keybind={command.keybind("review.toggle")}>
-                          class="hidden group-active/terminal-toggle:inline-block"
+                  <Button
-                        />
+                    variant="ghost"
-                      </div>
+                    class="group/review-toggle size-6 p-0"
-                    </Button>
+                    onClick={() => view().reviewPanel.toggle()}
-                  </TooltipKeybind>
+                    aria-label={language.t("command.review.toggle")}
-
+                    aria-expanded={view().reviewPanel.opened()}
-                  <TooltipKeybind
+                    aria-controls="review-panel"
-                    title={language.t("command.review.toggle")}
-                    keybind={command.keybind("review.toggle")}
                   >
-                    <Button
+                    <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                      variant="ghost"
+                      <Icon
-                      class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                        size="small"
-                      onClick={() => view().reviewPanel.toggle()}
+                        name={view().reviewPanel.opened() ? "layout-right-full" : "layout-right"}
-                      aria-label={language.t("command.review.toggle")}
+                        class="group-hover/review-toggle:hidden"
-                      aria-expanded={view().reviewPanel.opened()}
+                      />
-                      aria-controls="review-panel"
+                      <Icon
-                    >
+                        size="small"
-                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        name="layout-right-partial"
-                        <Icon
+                        class="hidden group-hover/review-toggle:inline-block"
-                          size="small"
+                      />
-                          name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-right"}
+                      <Icon
-                          class="group-hover/review-toggle:hidden"
+                        size="small"
-                        />
+                        name={view().reviewPanel.opened() ? "layout-right" : "layout-right-full"}
-                        <Icon
+                        class="hidden group-active/review-toggle:inline-block"
-                          size="small"
+                      />
-                          name="layout-right-partial"
+                    </div>
-                          class="hidden group-hover/review-toggle:inline-block"
+                  </Button>
-                        />
+                </TooltipKeybind>
-                        <Icon
+              </div>
-                          size="small"
+              <div class="hidden lg:block shrink-0">
-                          name={view().reviewPanel.opened() ? "layout-right" : "layout-right-partial"}
+                <TooltipKeybind
-                          class="hidden group-active/review-toggle:inline-block"
+                  title={language.t("command.fileTree.toggle")}
-                        />
+                  keybind={command.keybind("fileTree.toggle")}
-                      </div>
+                >
-                    </Button>
+                  <Button
-                  </TooltipKeybind>
+                    variant="ghost"
-
+                    class="group/file-tree-toggle size-6 p-0"
-                  <TooltipKeybind
+                    onClick={() => layout.fileTree.toggle()}
-                    title={language.t("command.fileTree.toggle")}
+                    aria-label={language.t("command.fileTree.toggle")}
-                    keybind={command.keybind("fileTree.toggle")}
+                    aria-expanded={layout.fileTree.opened()}
+                    aria-controls="file-tree-panel"
                   >
-                    <Button
+                    <div class="relative flex items-center justify-center size-4">
-                      variant="ghost"
+                      <Icon
-                      class="titlebar-icon w-8 h-6 p-0 box-border"
+                        size="small"
-                      onClick={() => layout.fileTree.toggle()}
+                        name="bullet-list"
-                      aria-label={language.t("command.fileTree.toggle")}
+                        classList={{
-                      aria-expanded={layout.fileTree.opened()}
+                          "text-icon-strong": layout.fileTree.opened(),
-                      aria-controls="file-tree-panel"
+                          "text-icon-weak": !layout.fileTree.opened(),
-                    >
+                        }}
-                      <div class="relative flex items-center justify-center size-4">
+                      />
-                        <Icon
+                    </div>
-                          size="small"
+                  </Button>
-                          name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                </TooltipKeybind>
-                          classList={{
-                            "text-icon-strong": layout.fileTree.opened(),
-                            "text-icon-weak": !layout.fileTree.opened(),
-                          }}
-                        />
-                      </div>
-                    </Button>
-                  </TooltipKeybind>
-                </div>
               </div>
             </div>
           </Portal>

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

@@ -9,7 +9,7 @@ import { getDirectory, getFilename } from "@opencode-ai/util/path"
 const MAIN_WORKTREE = "main"
 const CREATE_WORKTREE = "create"
 const ROOT_CLASS =
-  "size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto 2xl:max-w-[1000px] px-6 pb-16"
+  "size-full flex flex-col justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto 2xl:max-w-[1000px] px-6 pb-[calc(var(--prompt-height,11.25rem)+64px)]"
 
 interface NewSessionViewProps {
   worktree: string

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

@@ -431,7 +431,7 @@ export const SettingsGeneral: Component = () => {
 
         <SoundsSection />
 
-        {/*<Show when={platform.platform === "desktop" && platform.os === "windows" && platform.getWslEnabled}>
+        <Show when={platform.platform === "desktop" && platform.os === "windows" && platform.getWslEnabled}>
           {(_) => {
             const [enabledResource, actions] = createResource(() => platform.getWslEnabled?.())
             const enabled = () => (enabledResource.state === "pending" ? undefined : enabledResource.latest)
@@ -457,7 +457,7 @@ export const SettingsGeneral: Component = () => {
               </div>
             )
           }}
-        </Show>*/}
+        </Show>
 
         <UpdatesSection />
 

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

@@ -1,21 +1,21 @@
-import { Button } from "@opencode-ai/ui/button"
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, type Accessor, type JSXElement } from "solid-js"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Popover } from "@opencode-ai/ui/popover"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { showToast } from "@opencode-ai/ui/toast"
-import { useNavigate } from "@solidjs/router"
-import { type Accessor, createEffect, createMemo, createSignal, For, type JSXElement, onCleanup, Show } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"
-import { ServerRow } from "@/components/server/server-row"
+import { useNavigate } from "@solidjs/router"
-import { useLanguage } from "@/context/language"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { usePlatform } from "@/context/platform"
+import { Popover } from "@opencode-ai/ui/popover"
-import { useSDK } from "@/context/sdk"
+import { Tabs } from "@opencode-ai/ui/tabs"
-import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { Button } from "@opencode-ai/ui/button"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Icon } from "@opencode-ai/ui/icon"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useSync } from "@/context/sync"
-import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
+import { useSDK } from "@/context/sdk"
+import { normalizeServerUrl, useServer } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
 import { DialogSelectServer } from "./dialog-select-server"
+import { ServerRow } from "@/components/server/server-row"
+import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
 
 const pollMs = 10_000
 
@@ -32,9 +32,9 @@ const pluginEmptyMessage = (value: string, file: string): JSXElement => {
 }
 
 const listServersByHealth = (
-  list: ServerConnection.Any[],
+  list: string[],
-  active: ServerConnection.Key | undefined,
+  active: string | undefined,
-  status: Record<ServerConnection.Key, ServerHealth | undefined>,
+  status: Record<string, ServerHealth | undefined>,
 ) => {
   if (!list.length) return list
   const order = new Map(list.map((url, index) => [url, index] as const))
@@ -45,16 +45,16 @@ const listServersByHealth = (
   }
 
   return list.slice().sort((a, b) => {
-    if (ServerConnection.key(a) === active) return -1
+    if (a === active) return -1
-    if (ServerConnection.key(b) === active) return 1
+    if (b === active) return 1
-    const diff = rank(status[ServerConnection.key(a)]) - rank(status[ServerConnection.key(b)])
+    const diff = rank(status[a]) - rank(status[b])
     if (diff !== 0) return diff
     return (order.get(a) ?? 0) - (order.get(b) ?? 0)
   })
 }
 
-const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, fetcher: typeof fetch) => {
+const useServerHealth = (servers: Accessor<string[]>, fetcher: typeof fetch) => {
-  const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
+  const [status, setStatus] = createStore({} as Record<string, ServerHealth | undefined>)
 
   createEffect(() => {
     const list = servers()
@@ -63,8 +63,8 @@ const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, fetcher: typ
     const refresh = async () => {
       const results: Record<string, ServerHealth> = {}
       await Promise.all(
-        list.map(async (conn) => {
+        list.map(async (url) => {
-          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http, fetcher)
+          results[url] = await checkServerHealth(url, fetcher)
         }),
       )
       if (dead) return
@@ -82,7 +82,7 @@ const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, fetcher: typ
   return status
 }
 
-const useDefaultServerKey = (
+const useDefaultServerUrl = (
   get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
 ) => {
   const [url, setUrl] = createSignal<string | undefined>()
@@ -117,14 +117,7 @@ const useDefaultServerKey = (
     })
   })
 
-  return {
+  return { url, refresh: () => setTick((value) => value + 1) }
-    key: () => {
-      const u = url()
-      if (!u) return
-      return ServerConnection.key({ type: "http", http: { url: u } })
-    },
-    refresh: () => setTick((value) => value + 1),
-  }
 }
 
 const useMcpToggle = (input: {
@@ -170,16 +163,16 @@ export function StatusPopover() {
 
   const fetcher = platform.fetch ?? globalThis.fetch
   const servers = createMemo(() => {
-    const current = server.current
+    const current = server.url
     const list = server.list
     if (!current) return list
-    if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
+    if (!list.includes(current)) return [current, ...list]
-    return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
+    return [current, ...list.filter((item) => item !== current)]
   })
   const health = useServerHealth(servers, fetcher)
-  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
+  const sortedServers = createMemo(() => listServersByHealth(servers(), server.url, health))
   const mcp = useMcpToggle({ sync, sdk, language })
-  const defaultServer = useDefaultServerKey(platform.getDefaultServerUrl)
+  const defaultServer = useDefaultServerUrl(platform.getDefaultServerUrl)
   const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
   const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
   const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
@@ -203,26 +196,24 @@ export function StatusPopover() {
       triggerProps={{
         variant: "ghost",
         class:
-          "rounded-md h-[24px] pr-3 pl-0.5 gap-2 border border-border-weak-base bg-surface-panel shadow-none data-[expanded]:bg-surface-raised-base-hover",
+          "rounded-md h-[24px] px-3 gap-2 border border-border-base bg-surface-panel shadow-none data-[expanded]:bg-surface-raised-base-active",
         style: { scale: 1 },
       }}
       trigger={
-        <div class="flex items-center gap-0.5">
+        <div class="flex items-center gap-1.5">
-          <div class="size-4 flex items-center justify-center">
+          <div
-            <div
+            classList={{
-              classList={{
+              "size-1.5 rounded-full": true,
-                "size-1.5 rounded-full": true,
+              "bg-icon-success-base": overallHealthy(),
-                "bg-icon-success-base": overallHealthy(),
+              "bg-icon-critical-base": !overallHealthy() && server.healthy() !== undefined,
-                "bg-icon-critical-base": !overallHealthy() && server.healthy() !== undefined,
+              "bg-border-weak-base": server.healthy() === undefined,
-                "bg-border-weak-base": server.healthy() === undefined,
+            }}
-              }}
+          />
-            />
-          </div>
           <span class="text-12-regular text-text-strong">{language.t("status.popover.trigger")}</span>
         </div>
       }
       class="[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl"
-      gutter={4}
+      gutter={6}
       placement="bottom-end"
       shift={-136}
     >
@@ -258,9 +249,8 @@ export function StatusPopover() {
             <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={sortedServers()}>
-                  {(s) => {
+                  {(url) => {
-                    const key = ServerConnection.key(s)
+                    const isBlocked = () => health[url]?.healthy === false
-                    const isBlocked = () => health[key]?.healthy === false
                     return (
                       <button
                         type="button"
@@ -272,19 +262,19 @@ export function StatusPopover() {
                         aria-disabled={isBlocked()}
                         onClick={() => {
                           if (isBlocked()) return
-                          server.setActive(key)
+                          server.setActive(url)
                           navigate("/")
                         }}
                       >
                         <ServerRow
-                          conn={s}
+                          url={url}
-                          status={health[key]}
+                          status={health[url]}
                           dimmed={isBlocked()}
                           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={key === defaultServer.key()}>
+                            <Show when={url === defaultServer.url()}>
                               <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
                                 {language.t("common.default")}
                               </span>
@@ -292,7 +282,7 @@ export function StatusPopover() {
                           }
                         >
                           <div class="flex-1" />
-                          <Show when={server.current && key === ServerConnection.key(server.current)}>
+                          <Show when={url === server.url}>
                             <Icon name="check" size="small" class="text-icon-weak shrink-0" />
                           </Show>
                         </ServerRow>

packages/app/src/components/terminal.tsx

@@ -1,15 +1,14 @@
-import { type HexColor, resolveThemeVariant, useTheme, withAlpha } from "@opencode-ai/ui/theme"
+import type { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
-import { showToast } from "@opencode-ai/ui/toast"
+import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
-import type { FitAddon, Ghostty, Terminal as Term } from "ghostty-web"
-import { type ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
-import { SerializeAddon } from "@/addons/serialize"
-import { matchKeybind, parseKeybind } from "@/context/command"
-import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
-import { useServer } from "@/context/server"
 import { monoFontFamily, useSettings } from "@/context/settings"
-import type { LocalPTY } from "@/context/terminal"
+import { parseKeybind, matchKeybind } from "@/context/command"
+import { SerializeAddon } from "@/addons/serialize"
+import { LocalPTY } from "@/context/terminal"
+import { resolveThemeVariant, useTheme, withAlpha, type HexColor } from "@opencode-ai/ui/theme"
+import { useLanguage } from "@/context/language"
+import { showToast } from "@opencode-ai/ui/toast"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
 import { terminalWriter } from "@/utils/terminal-writer"
 
@@ -107,14 +106,8 @@ const useTerminalUiBindings = (input: {
   input.container.addEventListener("pointerdown", input.handlePointerDown)
   input.cleanups.push(() => input.container.removeEventListener("pointerdown", input.handlePointerDown))
 
-  input.container.addEventListener("click", input.handleLinkClick, {
+  input.container.addEventListener("click", input.handleLinkClick, { capture: true })
-    capture: true,
+  input.cleanups.push(() => input.container.removeEventListener("click", input.handleLinkClick, { capture: true }))
-  })
-  input.cleanups.push(() =>
-    input.container.removeEventListener("click", input.handleLinkClick, {
-      capture: true,
-    }),
-  )
 
   input.term.textarea?.addEventListener("focus", handleTextareaFocus)
   input.term.textarea?.addEventListener("blur", handleTextareaBlur)
@@ -155,7 +148,6 @@ export const Terminal = (props: TerminalProps) => {
   const settings = useSettings()
   const theme = useTheme()
   const language = useLanguage()
-  const server = useServer()
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnect", "onConnectError"])
   let ws: WebSocket | undefined
@@ -354,7 +346,7 @@ export const Terminal = (props: TerminalProps) => {
       }
       ghostty = g
       term = t
-      output = terminalWriter((data, done) => t.write(data, done))
+      output = terminalWriter((data) => t.write(data))
 
       t.attachCustomKeyEventHandler((event) => {
         const key = event.key.toLowerCase()
@@ -380,13 +372,7 @@ export const Terminal = (props: TerminalProps) => {
       serializeAddon = serializer
 
       t.open(container)
-      useTerminalUiBindings({
+      useTerminalUiBindings({ container, term: t, cleanups, handlePointerDown, handleLinkClick })
-        container,
-        term: t,
-        cleanups,
-        handlePointerDown,
-        handleLinkClick,
-      })
 
       focusTerminal()
 
@@ -442,8 +428,10 @@ export const Terminal = (props: TerminalProps) => {
       url.searchParams.set("directory", sdk.directory)
       url.searchParams.set("cursor", String(start !== undefined ? start : local.pty.buffer ? -1 : 0))
       url.protocol = url.protocol === "https:" ? "wss:" : "ws:"
-      url.username = server.current?.http.username ?? ""
+      if (window.__OPENCODE__?.serverPassword) {
-      url.password = server.current?.http.password ?? ""
+        url.username = "opencode"
+        url.password = window.__OPENCODE__?.serverPassword
+      }
       const socket = new WebSocket(url)
       socket.binaryType = "arraybuffer"
       ws = socket
@@ -532,19 +520,9 @@ export const Terminal = (props: TerminalProps) => {
     disposed = true
     if (fitFrame !== undefined) cancelAnimationFrame(fitFrame)
     if (sizeTimer !== undefined) clearTimeout(sizeTimer)
-    if (ws && ws.readyState !== WebSocket.CLOSED && ws.readyState !== WebSocket.CLOSING) ws.close()
+    output?.flush()
-
+    persistTerminal({ term, addon: serializeAddon, cursor, pty: local.pty, onCleanup: props.onCleanup })
-    const finalize = () => {
+    cleanup()
-      persistTerminal({ term, addon: serializeAddon, cursor, pty: local.pty, onCleanup: props.onCleanup })
-      cleanup()
-    }
-
-    if (!output) {
-      finalize()
-      return
-    }
-
-    output.flush(finalize)
   })
 
   return (

packages/app/src/components/titlebar.tsx

@@ -1,6 +1,6 @@
 import { createEffect, createMemo, Show, untrack } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { useLocation, useNavigate } 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"
@@ -43,7 +43,6 @@ export function Titlebar() {
   const theme = useTheme()
   const navigate = useNavigate()
   const location = useLocation()
-  const params = useParams()
 
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
@@ -172,10 +171,9 @@ export function Titlebar() {
             <IconButton
               icon="menu"
               variant="ghost"
-              class="titlebar-icon rounded-md"
+              class="size-8 rounded-md"
               onClick={layout.mobileSidebar.toggle}
               aria-label={language.t("sidebar.menu.toggle")}
-              aria-expanded={layout.mobileSidebar.opened()}
             />
           </div>
         </Show>
@@ -184,14 +182,13 @@ export function Titlebar() {
             <IconButton
               icon="menu"
               variant="ghost"
-              class="titlebar-icon rounded-md"
+              class="size-8 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">
+        <div class="flex items-center gap-3 shrink-0">
           <TooltipKeybind
             class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
             placement="bottom"
@@ -200,7 +197,7 @@ export function Titlebar() {
           >
             <Button
               variant="ghost"
-              class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
+              class="group/sidebar-toggle size-6 p-0"
               onClick={layout.sidebar.toggle}
               aria-label={language.t("command.sidebar.toggle")}
               aria-expanded={layout.sidebar.opened()}
@@ -208,77 +205,56 @@ export function Titlebar() {
               <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
                 <Icon
                   size="small"
-                  name={layout.sidebar.opened() ? "layout-left-partial" : "layout-left"}
+                  name={layout.sidebar.opened() ? "layout-left-full" : "layout-left"}
                   class="group-hover/sidebar-toggle:hidden"
                 />
                 <Icon size="small" name="layout-left-partial" class="hidden group-hover/sidebar-toggle:inline-block" />
                 <Icon
                   size="small"
-                  name={layout.sidebar.opened() ? "layout-left" : "layout-left-partial"}
+                  name={layout.sidebar.opened() ? "layout-left" : "layout-left-full"}
                   class="hidden group-active/sidebar-toggle:inline-block"
                 />
               </div>
             </Button>
           </TooltipKeybind>
-          <div class="hidden xl:flex items-center shrink-0">
+          <div class="hidden xl:flex items-center gap-1 shrink-0">
-            <Show when={params.dir}>
+            <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-              <TooltipKeybind
+              <Button
-                placement="bottom"
+                variant="ghost"
-                title={language.t("command.session.new")}
+                icon="arrow-left"
-                keybind={command.keybind("session.new")}
+                class="size-6 p-0"
-                openDelay={2000}
+                disabled={!canBack()}
-              >
+                onClick={back}
-                <Button
+                aria-label={language.t("common.goBack")}
-                  variant="ghost"
+              />
-                  icon="new-session"
+            </Tooltip>
-                  class="titlebar-icon w-8 h-6 p-0 box-border"
+            <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
-                  onClick={() => {
+              <Button
-                    if (!params.dir) return
+                variant="ghost"
-                    navigate(`/${params.dir}/session`)
+                icon="arrow-right"
-                  }}
+                class="size-6 p-0"
-                  aria-label={language.t("command.session.new")}
+                disabled={!canForward()}
-                />
+                onClick={forward}
-              </TooltipKeybind>
+                aria-label={language.t("common.goForward")}
-            </Show>
+              />
-            <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}>
+            </Tooltip>
-              <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>
           </div>
         </div>
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
       </div>
 
-      <div class="min-w-0 flex items-center justify-center pointer-events-none">
+      <div class="min-w-0 flex items-center justify-center pointer-events-none lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center">
         <div id="opencode-titlebar-center" class="pointer-events-auto w-full min-w-0 flex justify-center lg:w-fit" />
       </div>
 
       <div
         classList={{
           "flex items-center min-w-0 justify-end": true,
-          "pr-2": !windows(),
+          "pr-6": !windows(),
         }}
         onMouseDown={drag}
       >
-        <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
+        <div id="opencode-titlebar-right" class="flex items-center gap-3 shrink-0 justify-end" />
         <Show when={windows()}>
           <div class="w-6 shrink-0" />
           <div data-tauri-decorum-tb class="flex flex-row" />

packages/app/src/context/command.tsx

@@ -11,7 +11,7 @@ const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(na
 const PALETTE_ID = "command.palette"
 const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
 const SUGGESTED_PREFIX = "suggested."
-const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new", "file.attach"])
+const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new"])
 
 function actionId(id: string) {
   if (!id.startsWith(SUGGESTED_PREFIX)) return id

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

@@ -1,16 +1,10 @@
-import type { Event } from "@opencode-ai/sdk/v2/client"
+import { createOpencodeClient, type Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
 import { batch, onCleanup } from "solid-js"
-import z from "zod"
-import { createSdkForServer } from "@/utils/server"
 import { usePlatform } from "./platform"
 import { useServer } from "./server"
 
-const abortError = z.object({
-  name: z.literal("AbortError"),
-})
-
 export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
   name: "GlobalSDK",
   init: () => {
@@ -18,10 +12,20 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     const platform = usePlatform()
     const abort = new AbortController()
 
+    const password = typeof window === "undefined" ? undefined : window.__OPENCODE__?.serverPassword
+
+    const auth = (() => {
+      if (!password) return
+      if (!server.isLocal()) return
+      return {
+        Authorization: `Basic ${btoa(`opencode:${password}`)}`,
+      }
+    })()
+
     const eventFetch = (() => {
-      if (!platform.fetch || !server.current) return
+      if (!platform.fetch) return
       try {
-        const url = new URL(server.current.http.url)
+        const url = new URL(server.url)
         const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
         if (url.protocol === "http:" && !loopback) return platform.fetch
       } catch {
@@ -29,13 +33,11 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       }
     })()
 
-    const currentServer = server.current
+    const eventSdk = createOpencodeClient({
-    if (!currentServer) throw new Error("No server available")
+      baseUrl: server.url,
-
-    const eventSdk = createSdkForServer({
       signal: abort.signal,
       fetch: eventFetch,
-      server: currentServer.http,
+      headers: eventFetch ? undefined : auth,
     })
     const emitter = createGlobalEmitter<{
       [key: string]: Event
@@ -91,51 +93,23 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
 
     let streamErrorLogged = false
     const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
-    const aborted = (error: unknown) => abortError.safeParse(error).success
-
-    let attempt: AbortController | undefined
-    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
-    }
 
     void (async () => {
       while (!abort.signal.aborted) {
-        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,
+                url: server.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"
             const payload = event.payload
@@ -156,18 +130,14 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
             await wait(0)
           }
         } catch (error) {
-          if (!aborted(error) && !streamErrorLogged) {
+          if (!streamErrorLogged) {
             streamErrorLogged = true
             console.error("[global-sdk] event stream failed", {
-              url: currentServer.http.url,
+              url: server.url,
               fetch: eventFetch ? "platform" : "webview",
               error,
             })
           }
-        } finally {
-          abort.signal.removeEventListener("abort", onAbort)
-          attempt = undefined
-          clearHeartbeat()
         }
 
         if (abort.signal.aborted) return
@@ -175,43 +145,17 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       }
     })().finally(flush)
 
-    const onVisibility = () => {
-      if (typeof document === "undefined") return
-      if (document.visibilityState !== "visible") return
-      if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
-      attempt?.abort()
-    }
-    if (typeof document !== "undefined") {
-      document.addEventListener("visibilitychange", onVisibility)
-    }
-
     onCleanup(() => {
-      if (typeof document !== "undefined") {
-        document.removeEventListener("visibilitychange", onVisibility)
-      }
       abort.abort()
       flush()
     })
 
-    const sdk = createSdkForServer({
+    const sdk = createOpencodeClient({
-      server: server.current.http,
+      baseUrl: server.url,
       fetch: platform.fetch,
       throwOnError: true,
     })
 
-    return {
+    return { url: server.url, client: sdk, event: emitter }
-      url: currentServer.http.url,
-      client: sdk,
-      event: emitter,
-      createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
-        const s = server.current
-        if (!s) throw new Error("Server not available")
-        return createSdkForServer({
-          server: s.http,
-          fetch: platform.fetch,
-          ...opts,
-        })
-      },
-    }
   },
 })

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

@@ -1,50 +1,46 @@
-import type {
+import {
-  Config,
+  type Config,
-  OpencodeClient,
+  type Path,
-  Path,
+  type Project,
-  Project,
+  type ProviderAuthResponse,
-  ProviderAuthResponse,
+  type ProviderListResponse,
-  ProviderListResponse,
+  createOpencodeClient,
-  Todo,
 } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@opencode-ai/ui/toast"
+import { createStore, produce, reconcile } from "solid-js/store"
-import { getFilename } from "@opencode-ai/util/path"
+import { useGlobalSDK } from "./global-sdk"
+import type { InitError } from "../pages/error"
 import {
   createContext,
   createEffect,
+  untrack,
   getOwner,
-  Match,
+  useContext,
   onCleanup,
   onMount,
   type ParentProps,
   Switch,
-  untrack,
+  Match,
-  useContext,
 } from "solid-js"
-import { createStore, produce, reconcile } from "solid-js/store"
+import { showToast } from "@opencode-ai/ui/toast"
+import { getFilename } from "@opencode-ai/util/path"
+import { usePlatform } from "./platform"
 import { useLanguage } from "@/context/language"
 import { Persist, persisted } from "@/utils/persist"
-import type { InitError } from "../pages/error"
-import { useGlobalSDK } from "./global-sdk"
-import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
-import { createChildStoreManager } from "./global-sync/child-store"
-import { applyDirectoryEvent, applyGlobalEvent } from "./global-sync/event-reducer"
 import { createRefreshQueue } from "./global-sync/queue"
-import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
+import { createChildStoreManager } from "./global-sync/child-store"
 import { trimSessions } from "./global-sync/session-trim"
+import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
+import { applyDirectoryEvent, applyGlobalEvent } from "./global-sync/event-reducer"
+import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
+import { sanitizeProject } from "./global-sync/utils"
 import type { ProjectMeta } from "./global-sync/types"
 import { SESSION_RECENT_LIMIT } from "./global-sync/types"
-import { sanitizeProject } from "./global-sync/utils"
-import { usePlatform } from "./platform"
 
 type GlobalStore = {
   ready: boolean
   error?: InitError
   path: Path
   project: Project[]
-  session_todo: {
-    [sessionID: string]: Todo[]
-  }
   provider: ProviderListResponse
   provider_auth: ProviderAuthResponse
   config: Config
@@ -77,7 +73,7 @@ function createGlobalSync() {
     loadSessionsFallback: 0,
   }
 
-  const sdkCache = new Map<string, OpencodeClient>()
+  const sdkCache = new Map<string, ReturnType<typeof createOpencodeClient>>()
   const booting = new Map<string, Promise<void>>()
   const sessionLoads = new Map<string, Promise<void>>()
   const sessionMeta = new Map<string, { limit: number }>()
@@ -91,27 +87,12 @@ function createGlobalSync() {
     ready: false,
     path: { state: "", config: "", worktree: "", directory: "", home: "" },
     project: projectCache.value,
-    session_todo: {},
     provider: { all: [], connected: [], default: {} },
     provider_auth: {},
     config: {},
     reload: undefined,
   })
 
-  const setSessionTodo = (sessionID: string, todos: Todo[] | undefined) => {
-    if (!sessionID) return
-    if (!todos) {
-      setGlobalStore(
-        "session_todo",
-        produce((draft) => {
-          delete draft[sessionID]
-        }),
-      )
-      return
-    }
-    setGlobalStore("session_todo", sessionID, reconcile(todos, { key: "id" }))
-  }
-
   const updateStats = (activeDirectoryStores: number) => {
     if (!import.meta.env.DEV) return
     setDevStats({
@@ -151,7 +132,9 @@ function createGlobalSync() {
   const sdkFor = (directory: string) => {
     const cached = sdkCache.get(directory)
     if (cached) return cached
-    const sdk = globalSDK.createClient({
+    const sdk = createOpencodeClient({
+      baseUrl: globalSDK.url,
+      fetch: platform.fetch,
       directory,
       throwOnError: true,
     })
@@ -191,10 +174,7 @@ function createGlobalSync() {
     const [store, setStore] = children.child(directory, { bootstrap: false })
     const meta = sessionMeta.get(directory)
     if (meta && meta.limit >= store.limit) {
-      const next = trimSessions(store.session, {
+      const next = trimSessions(store.session, { limit: store.limit, permission: store.permission })
-        limit: store.limit,
-        permission: store.permission,
-      })
       if (next.length !== store.session.length) {
         setStore("session", reconcile(next, { key: "id" }))
       }
@@ -219,17 +199,10 @@ function createGlobalSync() {
           .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
         const limit = store.limit
         const childSessions = store.session.filter((s) => !!s.parentID)
-        const sessions = trimSessions([...nonArchived, ...childSessions], {
+        const sessions = trimSessions([...nonArchived, ...childSessions], { limit, permission: store.permission })
-          limit,
-          permission: store.permission,
-        })
         setStore(
           "sessionTotal",
-          estimateRootSessionTotal({
+          estimateRootSessionTotal({ count: nonArchived.length, limit: x.limit, limited: x.limited }),
-            count: nonArchived.length,
-            limit: x.limit,
-            limited: x.limited,
-          }),
         )
         setStore("session", reconcile(sessions, { key: "id" }))
         sessionMeta.set(directory, { limit })
@@ -297,11 +270,6 @@ function createGlobalSync() {
           setGlobalStore("project", next)
         },
       })
-      if (event.type === "server.connected" || event.type === "global.disposed") {
-        for (const directory of Object.keys(children.children)) {
-          queue.push(directory)
-        }
-      }
       return
     }
 
@@ -315,7 +283,6 @@ function createGlobalSync() {
       store,
       setStore,
       push: queue.push,
-      setSessionTodo,
       vcsCache: children.vcsCache.get(directory),
       loadLsp: () => {
         sdkFor(directory)
@@ -339,9 +306,7 @@ function createGlobalSync() {
     await bootstrapGlobal({
       globalSDK: globalSDK.client,
       connectErrorTitle: language.t("dialog.server.add.error"),
-      connectErrorDescription: language.t("error.globalSync.connectFailed", {
+      connectErrorDescription: language.t("error.globalSync.connectFailed", { url: globalSDK.url }),
-        url: globalSDK.url,
-      }),
       requestFailedTitle: language.t("common.requestFailed"),
       setGlobalStore,
     })
@@ -388,9 +353,6 @@ function createGlobalSync() {
     bootstrap,
     updateConfig,
     project: projectApi,
-    todo: {
-      set: setSessionTodo,
-    },
   }
 }
 

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

@@ -1,29 +1,25 @@
-import type {
+import {
-  Config,
+  type Config,
-  OpencodeClient,
+  type Path,
-  Path,
+  type PermissionRequest,
-  PermissionRequest,
+  type Project,
-  Project,
+  type ProviderAuthResponse,
-  ProviderAuthResponse,
+  type ProviderListResponse,
-  ProviderListResponse,
+  type QuestionRequest,
-  QuestionRequest,
+  createOpencodeClient,
-  Todo,
 } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@opencode-ai/ui/toast"
-import { getFilename } from "@opencode-ai/util/path"
-import { retry } from "@opencode-ai/util/retry"
 import { batch } from "solid-js"
 import { reconcile, type SetStoreFunction, type Store } from "solid-js/store"
-import type { State, VcsCache } from "./types"
+import { retry } from "@opencode-ai/util/retry"
+import { getFilename } from "@opencode-ai/util/path"
+import { showToast } from "@opencode-ai/ui/toast"
 import { cmp, normalizeProviderList } from "./utils"
+import type { State, VcsCache } from "./types"
 
 type GlobalStore = {
   ready: boolean
   path: Path
   project: Project[]
-  session_todo: {
-    [sessionID: string]: Todo[]
-  }
   provider: ProviderListResponse
   provider_auth: ProviderAuthResponse
   config: Config
@@ -31,7 +27,7 @@ type GlobalStore = {
 }
 
 export async function bootstrapGlobal(input: {
-  globalSDK: OpencodeClient
+  globalSDK: ReturnType<typeof createOpencodeClient>
   connectErrorTitle: string
   connectErrorDescription: string
   requestFailedTitle: string
@@ -110,13 +106,13 @@ function groupBySession<T extends { id: string; sessionID: string }>(input: T[])
 
 export async function bootstrapDirectory(input: {
   directory: string
-  sdk: OpencodeClient
+  sdk: ReturnType<typeof createOpencodeClient>
   store: Store<State>
   setStore: SetStoreFunction<State>
   vcsCache: VcsCache
   loadSessions: (directory: string) => Promise<void> | void
 }) {
-  if (input.store.status !== "complete") input.setStore("status", "loading")
+  input.setStore("status", "loading")
 
   const blockingRequests = {
     project: () => input.sdk.project.current().then((x) => input.setStore("project", x.data!.id)),

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

@@ -116,20 +116,6 @@ describe("applyGlobalEvent", () => {
 
     expect(refreshCount).toBe(1)
   })
-
-  test("handles server.connected by triggering refresh", () => {
-    let refreshCount = 0
-    applyGlobalEvent({
-      event: { type: "server.connected" },
-      project: [],
-      refresh: () => {
-        refreshCount += 1
-      },
-      setGlobalProject() {},
-    })
-
-    expect(refreshCount).toBe(1)
-  })
 })
 
 describe("applyDirectoryEvent", () => {

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

@@ -20,7 +20,7 @@ export function applyGlobalEvent(input: {
   setGlobalProject: (next: Project[] | ((draft: Project[]) => void)) => void
   refresh: () => void
 }) {
-  if (input.event.type === "global.disposed" || input.event.type === "server.connected") {
+  if (input.event.type === "global.disposed") {
     input.refresh()
     return
   }
@@ -39,12 +39,7 @@ export function applyGlobalEvent(input: {
   })
 }
 
-function cleanupSessionCaches(
+function cleanupSessionCaches(store: Store<State>, setStore: SetStoreFunction<State>, sessionID: string) {
-  store: Store<State>,
-  setStore: SetStoreFunction<State>,
-  sessionID: string,
-  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
-) {
   if (!sessionID) return
   const hasAny =
     store.message[sessionID] !== undefined ||
@@ -53,7 +48,6 @@ function cleanupSessionCaches(
     store.permission[sessionID] !== undefined ||
     store.question[sessionID] !== undefined ||
     store.session_status[sessionID] !== undefined
-  setSessionTodo?.(sessionID, undefined)
   if (!hasAny) return
   setStore(
     produce((draft) => {
@@ -83,7 +77,6 @@ export function applyDirectoryEvent(input: {
   directory: string
   loadLsp: () => void
   vcsCache?: VcsCache
-  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void
 }) {
   const event = input.event
   switch (event.type) {
@@ -117,7 +110,7 @@ export function applyDirectoryEvent(input: {
             }),
           )
         }
-        cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+        cleanupSessionCaches(input.store, input.setStore, info.id)
         if (info.parentID) break
         input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
         break
@@ -143,7 +136,7 @@ export function applyDirectoryEvent(input: {
           }),
         )
       }
-      cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+      cleanupSessionCaches(input.store, input.setStore, info.id)
       if (info.parentID) break
       input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
       break
@@ -156,7 +149,6 @@ export function applyDirectoryEvent(input: {
     case "todo.updated": {
       const props = event.properties as { sessionID: string; todos: Todo[] }
       input.setStore("todo", props.sessionID, reconcile(props.todos, { key: "id" }))
-      input.setSessionTodo?.(props.sessionID, props.todos)
       break
     }
     case "session.status": {

packages/app/src/context/sdk.tsx

@@ -1,8 +1,9 @@
-import type { Event } from "@opencode-ai/sdk/v2/client"
+import { createOpencodeClient, type Event } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { type Accessor, createEffect, createMemo, onCleanup } from "solid-js"
+import { createEffect, createMemo, onCleanup, type Accessor } from "solid-js"
 import { useGlobalSDK } from "./global-sdk"
+import { usePlatform } from "./platform"
 
 type SDKEventMap = {
   [key in Event["type"]]: Extract<Event, { type: key }>
@@ -11,11 +12,14 @@ type SDKEventMap = {
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
   init: (props: { directory: Accessor<string> }) => {
+    const platform = usePlatform()
     const globalSDK = useGlobalSDK()
 
     const directory = createMemo(props.directory)
     const client = createMemo(() =>
-      globalSDK.createClient({
+      createOpencodeClient({
+        baseUrl: globalSDK.url,
+        fetch: platform.fetch,
         directory: directory(),
         throwOnError: true,
       }),
@@ -41,9 +45,6 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       get url() {
         return globalSDK.url
       },
-      createClient(opts: Parameters<typeof globalSDK.createClient>[0]) {
-        return globalSDK.createClient(opts)
-      },
     }
   },
 })

packages/app/src/context/server.tsx

@@ -1,5 +1,5 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { type Accessor, batch, createEffect, createMemo, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { usePlatform } from "@/context/platform"
 import { Persist, persisted } from "@/utils/persist"
@@ -15,118 +15,92 @@ export function normalizeServerUrl(input: string) {
   return withProtocol.replace(/\/+$/, "")
 }
 
-export function serverDisplayName(conn?: ServerConnection.Any) {
+export function serverDisplayName(url: string) {
-  if (!conn) return ""
+  if (!url) return ""
-  if (conn.displayName) return conn.displayName
+  return url.replace(/^https?:\/\//, "").replace(/\/+$/, "")
-  return conn.http.url.replace(/^https?:\/\//, "").replace(/\/+$/, "")
 }
 
-function projectsKey(key: ServerConnection.Key) {
+function projectsKey(url: string) {
-  if (!key) return ""
+  if (!url) return ""
-  if (key === "sidecar") return "local"
+  const host = url.replace(/^https?:\/\//, "").split(":")[0]
-  const host = key.replace(/^https?:\/\//, "").split(":")[0]
   if (host === "localhost" || host === "127.0.0.1") return "local"
-  return key
+  return url
-}
-
-export namespace ServerConnection {
-  type Base = { displayName?: string }
-
-  export type HttpBase = {
-    url: string
-    username?: string
-    password?: string
-  }
-
-  // Regular web connections
-  export type Http = {
-    type: "http"
-    http: HttpBase
-  } & Base
-
-  export type Sidecar = {
-    type: "sidecar"
-    http: HttpBase
-  } & (
-    | // Regular desktop server
-    { variant: "base" }
-    // WSL server (windows only)
-    | {
-        variant: "wsl"
-        distro: string
-      }
-  ) &
-    Base
-
-  // Remote server desktop can SSH into
-  export type Ssh = {
-    type: "ssh"
-    host: string
-    // SSH client exposes an HTTP server for the app to use as a proxy
-    http: HttpBase
-  } & Base
-
-  export type Any =
-    | Http
-    // All these are desktop-only
-    | (Sidecar | Ssh)
-
-  export const key = (conn: Any): Key => {
-    switch (conn.type) {
-      case "http":
-        return Key.make(conn.http.url)
-      case "sidecar": {
-        if (conn.variant === "wsl") return Key.make(`wsl:${conn.distro}`)
-        return Key.make("sidecar")
-      }
-      case "ssh":
-        return Key.make(`ssh:${conn.host}`)
-    }
-  }
-
-  export type Key = string & { _brand: "Key" }
-  export const Key = { make: (v: string) => v as Key }
 }
 
 export const { use: useServer, provider: ServerProvider } = createSimpleContext({
   name: "Server",
-  init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
+  init: (props: { defaultUrl: string; isSidecar?: boolean }) => {
     const platform = usePlatform()
 
     const [store, setStore, _, ready] = persisted(
       Persist.global("server", ["server.v3"]),
       createStore({
         list: [] as string[],
+        currentSidecarUrl: "",
         projects: {} as Record<string, StoredProject[]>,
         lastProject: {} as Record<string, string>,
       }),
     )
 
-    const allServers = createMemo(
-      (): Array<ServerConnection.Any> => [
-        ...(props.servers ?? []),
-        ...store.list.map((value) => ({
-          type: "http" as const,
-          http: typeof value === "string" ? { url: value } : value,
-        })),
-      ],
-    )
-
     const [state, setState] = createStore({
-      active: props.defaultServer,
+      active: "",
       healthy: undefined as boolean | undefined,
     })
 
     const healthy = () => state.healthy
 
-    function startHealthPolling(conn: ServerConnection.Any) {
+    const defaultUrl = () => normalizeServerUrl(props.defaultUrl)
+
+    function reconcileStartup() {
+      const fallback = defaultUrl()
+      if (!fallback) return
+
+      const previousSidecarUrl = normalizeServerUrl(store.currentSidecarUrl)
+      const list = previousSidecarUrl ? store.list.filter((url) => url !== previousSidecarUrl) : store.list
+      if (!props.isSidecar) {
+        batch(() => {
+          setStore("list", list)
+          if (store.currentSidecarUrl) setStore("currentSidecarUrl", "")
+          setState("active", fallback)
+        })
+        return
+      }
+
+      const nextList = list.includes(fallback) ? list : [...list, fallback]
+      batch(() => {
+        setStore("list", nextList)
+        setStore("currentSidecarUrl", fallback)
+        setState("active", fallback)
+      })
+    }
+
+    function updateServerList(url: string, remove = false) {
+      if (remove) {
+        const list = store.list.filter((x) => x !== url)
+        const next = state.active === url ? (list[0] ?? defaultUrl() ?? "") : state.active
+        batch(() => {
+          setStore("list", list)
+          setState("active", next)
+        })
+        return
+      }
+
+      batch(() => {
+        if (!store.list.includes(url)) {
+          setStore("list", store.list.length, url)
+        }
+        setState("active", url)
+      })
+    }
+
+    function startHealthPolling(url: string) {
       let alive = true
       let busy = false
 
       const run = () => {
         if (busy) return
         busy = true
-        void check(conn)
+        void check(url)
           .then((next) => {
             if (!alive) return
             setState("healthy", next)
@@ -144,73 +118,59 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
       }
     }
 
-    function setActive(input: ServerConnection.Key) {
+    function setActive(input: string) {
-      if (state.active !== input) setState("active", input)
+      const url = normalizeServerUrl(input)
+      if (!url) return
+      setState("active", url)
     }
 
     function add(input: string) {
       const url = normalizeServerUrl(input)
       if (!url) return
-      return batch(() => {
+      updateServerList(url)
-        const http: ServerConnection.HttpBase = { url }
-        if (!store.list.includes(url)) {
-          setStore("list", store.list.length, url)
-        }
-        const conn: ServerConnection.Http = { type: "http", http }
-        setState("active", ServerConnection.key(conn))
-        return conn
-      })
     }
 
-    function remove(key: ServerConnection.Key) {
+    function remove(input: string) {
-      const list = store.list.filter((x) => x !== key)
+      const url = normalizeServerUrl(input)
-      batch(() => {
+      if (!url) return
-        setStore("list", list)
+      updateServerList(url, true)
-        if (state.active === key) {
-          const next = list[0]
-          setState("active", next ? ServerConnection.key({ type: "http", http: { url: next } }) : props.defaultServer)
-        }
-      })
     }
 
+    createEffect(() => {
+      if (!ready()) return
+      if (state.active) return
+      reconcileStartup()
+    })
+
     const isReady = createMemo(() => ready() && !!state.active)
 
     const fetcher = platform.fetch ?? globalThis.fetch
-    const check = (conn: ServerConnection.Any) => checkServerHealth(conn.http, fetcher).then((x) => x.healthy)
+    const check = (url: string) => checkServerHealth(url, fetcher).then((x) => x.healthy)
 
     createEffect(() => {
-      const current_ = current()
+      const url = state.active
-      if (!current_) return
+      if (!url) return
 
       setState("healthy", undefined)
-      onCleanup(startHealthPolling(current_))
+      onCleanup(startHealthPolling(url))
     })
 
     const origin = createMemo(() => projectsKey(state.active))
     const projectsList = createMemo(() => store.projects[origin()] ?? [])
-    const current: Accessor<ServerConnection.Any | undefined> = createMemo(
+    const isLocal = createMemo(() => origin() === "local")
-      () => allServers().find((s) => ServerConnection.key(s) === state.active) ?? allServers()[0],
-    )
-    const isLocal = createMemo(() => {
-      const c = current()
-      return c?.type === "sidecar" && c.variant === "base"
-    })
 
     return {
       ready: isReady,
       healthy,
       isLocal,
-      get key() {
+      get url() {
         return state.active
       },
       get name() {
-        return serverDisplayName(current())
+        return serverDisplayName(state.active)
       },
       get list() {
-        return allServers()
+        return store.list
-      },
-      get current() {
-        return current()
       },
       setActive,
       add,

packages/app/src/context/sync.tsx

@@ -289,25 +289,12 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
-          const existing = store.todo[sessionID]
+          if (store.todo[sessionID] !== undefined) return
-          if (existing !== undefined) {
-            if (globalSync.data.session_todo[sessionID] === undefined) {
-              globalSync.todo.set(sessionID, existing)
-            }
-            return
-          }
-
-          const cached = globalSync.data.session_todo[sessionID]
-          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) => {
-              const list = todo.data ?? []
+              setStore("todo", sessionID, reconcile(todo.data ?? [], { key: "id" }))
-              setStore("todo", sessionID, reconcile(list, { key: "id" }))
-              globalSync.todo.set(sessionID, list)
             }),
           )
         },

packages/app/src/entry.tsx

@@ -1,14 +1,11 @@
 // @refresh reload
-
-import { iife } from "@opencode-ai/util/iife"
 import { render } from "solid-js/web"
 import { AppBaseProviders, AppInterface } from "@/app"
-import { type Platform, PlatformProvider } from "@/context/platform"
+import { Platform, PlatformProvider } from "@/context/platform"
 import { dict as en } from "@/i18n/en"
 import { dict as zh } from "@/i18n/zh"
 import { handleNotificationClick } from "@/utils/notification-click"
 import pkg from "../package.json"
-import { ServerConnection } from "./context/server"
 
 const DEFAULT_SERVER_URL_KEY = "opencode.settings.dat:defaultServerUrl"
 
@@ -110,22 +107,12 @@ const platform: Platform = {
   setDefaultServerUrl: writeDefaultServerUrl,
 }
 
-const defaultUrl = iife(() => {
-  const lsDefault = readDefaultServerUrl()
-  if (lsDefault) return lsDefault
-  if (location.hostname.includes("opencode.ai")) return "http://localhost:4096"
-  if (import.meta.env.DEV)
-    return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}`
-  return location.origin
-})
-
 if (root instanceof HTMLElement) {
-  const server: ServerConnection.Http = { type: "http", http: { url: defaultUrl } }
   render(
     () => (
       <PlatformProvider value={platform}>
         <AppBaseProviders>
-          <AppInterface defaultServer={ServerConnection.key(server)} servers={[server]} />
+          <AppInterface />
         </AppBaseProviders>
       </PlatformProvider>
     ),

packages/app/src/i18n/ar.ts

@@ -63,8 +63,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "التبديل إلى الوكيل السابق",
   "command.model.variant.cycle": "تغيير جهد التفكير",
   "command.model.variant.cycle.description": "التبديل إلى مستوى الجهد التالي",
-  "command.prompt.mode.shell": "التبديل إلى وضع Shell",
-  "command.prompt.mode.normal": "التبديل إلى وضع Prompt",
   "command.permissions.autoaccept.enable": "قبول التعديلات تلقائيًا",
   "command.permissions.autoaccept.disable": "إيقاف قبول التعديلات تلقائيًا",
   "command.workspace.toggle": "تبديل مساحات العمل",
@@ -208,11 +206,9 @@ export const dict = {
   "common.attachment": "مرفق",
   "prompt.placeholder.shell": "أدخل أمر shell...",
   "prompt.placeholder.normal": 'اسأل أي شيء... "{{example}}"',
-  "prompt.placeholder.simple": "اسأل أي شيء...",
   "prompt.placeholder.summarizeComments": "لخّص التعليقات…",
   "prompt.placeholder.summarizeComment": "لخّص التعليق…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc للخروج",
   "prompt.example.1": "إصلاح TODO في قاعدة التعليمات البرمجية",
   "prompt.example.2": "ما هو المكدس التقني لهذا المشروع؟",
@@ -451,9 +447,6 @@ export const dict = {
   "session.messages.loading": "جارٍ تحميل الرسائل...",
   "session.messages.jumpToLatest": "الانتقال إلى الأحدث",
   "session.context.addToContext": "إضافة {{selection}} إلى السياق",
-  "session.todo.title": "المهام",
-  "session.todo.collapse": "طي",
-  "session.todo.expand": "توسيع",
   "session.new.worktree.main": "الفرع الرئيسي",
   "session.new.worktree.mainWithBranch": "الفرع الرئيسي ({{branch}})",
   "session.new.worktree.create": "إنشاء شجرة عمل جديدة",

packages/app/src/i18n/br.ts

@@ -63,8 +63,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Mudar para o agente anterior",
   "command.model.variant.cycle": "Alternar nível de raciocínio",
   "command.model.variant.cycle.description": "Mudar para o próximo nível de esforço",
-  "command.prompt.mode.shell": "Alternar para o modo Shell",
-  "command.prompt.mode.normal": "Alternar para o modo Prompt",
   "command.permissions.autoaccept.enable": "Aceitar edições automaticamente",
   "command.permissions.autoaccept.disable": "Parar de aceitar edições automaticamente",
   "command.workspace.toggle": "Alternar espaços de trabalho",
@@ -208,11 +206,9 @@ export const dict = {
   "common.attachment": "anexo",
   "prompt.placeholder.shell": "Digite comando do shell...",
   "prompt.placeholder.normal": 'Pergunte qualquer coisa... "{{example}}"',
-  "prompt.placeholder.simple": "Pergunte qualquer coisa...",
   "prompt.placeholder.summarizeComments": "Resumir comentários…",
   "prompt.placeholder.summarizeComment": "Resumir comentário…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc para sair",
   "prompt.example.1": "Corrigir um TODO no código",
   "prompt.example.2": "Qual é a stack tecnológica deste projeto?",
@@ -454,9 +450,6 @@ export const dict = {
   "session.messages.loading": "Carregando mensagens...",
   "session.messages.jumpToLatest": "Ir para a mais recente",
   "session.context.addToContext": "Adicionar {{selection}} ao contexto",
-  "session.todo.title": "Tarefas",
-  "session.todo.collapse": "Recolher",
-  "session.todo.expand": "Expandir",
   "session.new.worktree.main": "Branch principal",
   "session.new.worktree.mainWithBranch": "Branch principal ({{branch}})",
   "session.new.worktree.create": "Criar novo worktree",

packages/app/src/i18n/bs.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Prebaci na prethodnog agenta",
   "command.model.variant.cycle": "Promijeni nivo razmišljanja",
   "command.model.variant.cycle.description": "Prebaci na sljedeći nivo",
-  "command.prompt.mode.shell": "Prebaci na Shell način",
-  "command.prompt.mode.normal": "Prebaci na Prompt način",
   "command.permissions.autoaccept.enable": "Automatski prihvataj izmjene",
   "command.permissions.autoaccept.disable": "Zaustavi automatsko prihvatanje izmjena",
   "command.workspace.toggle": "Prikaži/sakrij radne prostore",
@@ -226,11 +224,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Unesi shell naredbu...",
   "prompt.placeholder.normal": 'Pitaj bilo šta... "{{example}}"',
-  "prompt.placeholder.simple": "Pitaj bilo šta...",
   "prompt.placeholder.summarizeComments": "Sažmi komentare…",
   "prompt.placeholder.summarizeComment": "Sažmi komentar…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc za izlaz",
 
   "prompt.example.1": "Popravi TODO u bazi koda",
@@ -509,9 +505,6 @@ export const dict = {
   "session.messages.jumpToLatest": "Idi na najnovije",
 
   "session.context.addToContext": "Dodaj {{selection}} u kontekst",
-  "session.todo.title": "Zadaci",
-  "session.todo.collapse": "Sažmi",
-  "session.todo.expand": "Proširi",
 
   "session.new.worktree.main": "Glavna grana",
   "session.new.worktree.mainWithBranch": "Glavna grana ({{branch}})",

packages/app/src/i18n/da.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Skift til forrige agent",
   "command.model.variant.cycle": "Skift tænkeindsats",
   "command.model.variant.cycle.description": "Skift til næste indsatsniveau",
-  "command.prompt.mode.shell": "Skift til shell-tilstand",
-  "command.prompt.mode.normal": "Skift til prompt-tilstand",
   "command.permissions.autoaccept.enable": "Accepter ændringer automatisk",
   "command.permissions.autoaccept.disable": "Stop automatisk accept af ændringer",
   "command.workspace.toggle": "Skift arbejdsområder",
@@ -224,11 +222,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Indtast shell-kommando...",
   "prompt.placeholder.normal": 'Spørg om hvad som helst... "{{example}}"',
-  "prompt.placeholder.simple": "Spørg om hvad som helst...",
   "prompt.placeholder.summarizeComments": "Opsummér kommentarer…",
   "prompt.placeholder.summarizeComment": "Opsummér kommentar…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc for at afslutte",
 
   "prompt.example.1": "Ret en TODO i koden",
@@ -504,9 +500,6 @@ export const dict = {
 
   "session.messages.jumpToLatest": "Gå til seneste",
   "session.context.addToContext": "Tilføj {{selection}} til kontekst",
-  "session.todo.title": "Opgaver",
-  "session.todo.collapse": "Skjul",
-  "session.todo.expand": "Udvid",
 
   "session.new.worktree.main": "Hovedgren",
   "session.new.worktree.mainWithBranch": "Hovedgren ({{branch}})",

packages/app/src/i18n/de.ts

@@ -67,8 +67,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Zum vorherigen Agenten wechseln",
   "command.model.variant.cycle": "Denkaufwand wechseln",
   "command.model.variant.cycle.description": "Zum nächsten Aufwandslevel wechseln",
-  "command.prompt.mode.shell": "In den Shell-Modus wechseln",
-  "command.prompt.mode.normal": "In den Prompt-Modus wechseln",
   "command.permissions.autoaccept.enable": "Änderungen automatisch akzeptieren",
   "command.permissions.autoaccept.disable": "Automatische Annahme von Änderungen stoppen",
   "command.workspace.toggle": "Arbeitsbereiche umschalten",
@@ -213,11 +211,9 @@ export const dict = {
   "common.attachment": "Anhang",
   "prompt.placeholder.shell": "Shell-Befehl eingeben...",
   "prompt.placeholder.normal": 'Fragen Sie alles... "{{example}}"',
-  "prompt.placeholder.simple": "Fragen Sie alles...",
   "prompt.placeholder.summarizeComments": "Kommentare zusammenfassen…",
   "prompt.placeholder.summarizeComment": "Kommentar zusammenfassen…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc zum Verlassen",
   "prompt.example.1": "Ein TODO in der Codebasis beheben",
   "prompt.example.2": "Was ist der Tech-Stack dieses Projekts?",
@@ -462,9 +458,6 @@ export const dict = {
   "session.messages.loading": "Lade Nachrichten...",
   "session.messages.jumpToLatest": "Zum neuesten springen",
   "session.context.addToContext": "{{selection}} zum Kontext hinzufügen",
-  "session.todo.title": "Aufgaben",
-  "session.todo.collapse": "Einklappen",
-  "session.todo.expand": "Ausklappen",
   "session.new.worktree.main": "Haupt-Branch",
   "session.new.worktree.mainWithBranch": "Haupt-Branch ({{branch}})",
   "session.new.worktree.create": "Neuen Worktree erstellen",

packages/app/src/i18n/en.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Switch to the previous agent",
   "command.model.variant.cycle": "Cycle thinking effort",
   "command.model.variant.cycle.description": "Switch to the next effort level",
-  "command.prompt.mode.shell": "Switch to shell mode",
-  "command.prompt.mode.normal": "Switch to prompt mode",
   "command.permissions.autoaccept.enable": "Auto-accept edits",
   "command.permissions.autoaccept.disable": "Stop auto-accepting edits",
   "command.workspace.toggle": "Toggle workspaces",
@@ -226,11 +224,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Enter shell command...",
   "prompt.placeholder.normal": 'Ask anything... "{{example}}"',
-  "prompt.placeholder.simple": "Ask anything...",
   "prompt.placeholder.summarizeComments": "Summarize comments…",
   "prompt.placeholder.summarizeComment": "Summarize comment…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc to exit",
 
   "prompt.example.1": "Fix a TODO in the codebase",
@@ -270,7 +266,7 @@ export const dict = {
   "prompt.context.includeActiveFile": "Include active file",
   "prompt.context.removeActiveFile": "Remove active file from context",
   "prompt.context.removeFile": "Remove file from context",
-  "prompt.action.attachFile": "Add file",
+  "prompt.action.attachFile": "Attach file",
   "prompt.attachment.remove": "Remove attachment",
   "prompt.action.send": "Send",
   "prompt.action.stop": "Stop",
@@ -508,9 +504,6 @@ export const dict = {
   "session.messages.jumpToLatest": "Jump to latest",
 
   "session.context.addToContext": "Add {{selection}} to context",
-  "session.todo.title": "Todos",
-  "session.todo.collapse": "Collapse",
-  "session.todo.expand": "Expand",
 
   "session.new.worktree.main": "Main branch",
   "session.new.worktree.mainWithBranch": "Main branch ({{branch}})",
@@ -523,7 +516,7 @@ export const dict = {
   "session.header.open.action": "Open {{app}}",
   "session.header.open.ariaLabel": "Open in {{app}}",
   "session.header.open.menu": "Open options",
-  "session.header.open.copyPath": "Copy path",
+  "session.header.open.copyPath": "Copy Path",
 
   "status.popover.trigger": "Status",
   "status.popover.ariaLabel": "Server configurations",

packages/app/src/i18n/es.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Cambiar al agente anterior",
   "command.model.variant.cycle": "Alternar esfuerzo de pensamiento",
   "command.model.variant.cycle.description": "Cambiar al siguiente nivel de esfuerzo",
-  "command.prompt.mode.shell": "Cambiar al modo Shell",
-  "command.prompt.mode.normal": "Cambiar al modo Prompt",
   "command.permissions.autoaccept.enable": "Aceptar ediciones automáticamente",
   "command.permissions.autoaccept.disable": "Dejar de aceptar ediciones automáticamente",
   "command.workspace.toggle": "Alternar espacios de trabajo",
@@ -225,11 +223,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Introduce comando de shell...",
   "prompt.placeholder.normal": 'Pregunta cualquier cosa... "{{example}}"',
-  "prompt.placeholder.simple": "Pregunta cualquier cosa...",
   "prompt.placeholder.summarizeComments": "Resumir comentarios…",
   "prompt.placeholder.summarizeComment": "Resumir comentario…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc para salir",
 
   "prompt.example.1": "Arreglar un TODO en el código",
@@ -510,9 +506,6 @@ export const dict = {
   "session.messages.jumpToLatest": "Ir al último",
 
   "session.context.addToContext": "Añadir {{selection}} al contexto",
-  "session.todo.title": "Tareas",
-  "session.todo.collapse": "Contraer",
-  "session.todo.expand": "Expandir",
 
   "session.new.worktree.main": "Rama principal",
   "session.new.worktree.mainWithBranch": "Rama principal ({{branch}})",

packages/app/src/i18n/fr.ts

@@ -63,8 +63,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Passer à l'agent précédent",
   "command.model.variant.cycle": "Changer l'effort de réflexion",
   "command.model.variant.cycle.description": "Passer au niveau d'effort suivant",
-  "command.prompt.mode.shell": "Passer en mode Shell",
-  "command.prompt.mode.normal": "Passer en mode Prompt",
   "command.permissions.autoaccept.enable": "Accepter automatiquement les modifications",
   "command.permissions.autoaccept.disable": "Arrêter l'acceptation automatique des modifications",
   "command.workspace.toggle": "Basculer les espaces de travail",
@@ -208,11 +206,9 @@ export const dict = {
   "common.attachment": "pièce jointe",
   "prompt.placeholder.shell": "Entrez une commande shell...",
   "prompt.placeholder.normal": 'Demandez n\'importe quoi... "{{example}}"',
-  "prompt.placeholder.simple": "Demandez n'importe quoi...",
   "prompt.placeholder.summarizeComments": "Résumer les commentaires…",
   "prompt.placeholder.summarizeComment": "Résumer le commentaire…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc pour quitter",
   "prompt.example.1": "Corriger un TODO dans la base de code",
   "prompt.example.2": "Quelle est la pile technique de ce projet ?",
@@ -460,9 +456,6 @@ export const dict = {
   "session.messages.loading": "Chargement des messages...",
   "session.messages.jumpToLatest": "Aller au dernier",
   "session.context.addToContext": "Ajouter {{selection}} au contexte",
-  "session.todo.title": "Tâches",
-  "session.todo.collapse": "Réduire",
-  "session.todo.expand": "Développer",
   "session.new.worktree.main": "Branche principale",
   "session.new.worktree.mainWithBranch": "Branche principale ({{branch}})",
   "session.new.worktree.create": "Créer un nouvel arbre de travail",

packages/app/src/i18n/ja.ts

@@ -63,8 +63,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "前のエージェントに切り替え",
   "command.model.variant.cycle": "思考レベルの切り替え",
   "command.model.variant.cycle.description": "次の思考レベルに切り替え",
-  "command.prompt.mode.shell": "シェルモードに切り替える",
-  "command.prompt.mode.normal": "プロンプトモードに切り替える",
   "command.permissions.autoaccept.enable": "編集を自動承認",
   "command.permissions.autoaccept.disable": "編集の自動承認を停止",
   "command.workspace.toggle": "ワークスペースを切り替え",
@@ -207,11 +205,9 @@ export const dict = {
   "common.attachment": "添付ファイル",
   "prompt.placeholder.shell": "シェルコマンドを入力...",
   "prompt.placeholder.normal": '何でも聞いてください... "{{example}}"',
-  "prompt.placeholder.simple": "何でも聞いてください...",
   "prompt.placeholder.summarizeComments": "コメントを要約…",
   "prompt.placeholder.summarizeComment": "コメントを要約…",
   "prompt.mode.shell": "シェル",
-  "prompt.mode.normal": "プロンプト",
   "prompt.mode.shell.exit": "escで終了",
   "prompt.example.1": "コードベースのTODOを修正",
   "prompt.example.2": "このプロジェクトの技術スタックは何ですか？",
@@ -452,9 +448,6 @@ export const dict = {
   "session.messages.loading": "メッセージを読み込み中...",
   "session.messages.jumpToLatest": "最新へジャンプ",
   "session.context.addToContext": "{{selection}}をコンテキストに追加",
-  "session.todo.title": "ToDo",
-  "session.todo.collapse": "折りたたむ",
-  "session.todo.expand": "展開",
   "session.new.worktree.main": "メインブランチ",
   "session.new.worktree.mainWithBranch": "メインブランチ ({{branch}})",
   "session.new.worktree.create": "新しいワークツリーを作成",

packages/app/src/i18n/ko.ts

@@ -67,8 +67,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "이전 에이전트로 전환",
   "command.model.variant.cycle": "생각 수준 순환",
   "command.model.variant.cycle.description": "다음 생각 수준으로 전환",
-  "command.prompt.mode.shell": "셸 모드로 전환",
-  "command.prompt.mode.normal": "프롬프트 모드로 전환",
   "command.permissions.autoaccept.enable": "편집 자동 수락",
   "command.permissions.autoaccept.disable": "편집 자동 수락 중지",
   "command.workspace.toggle": "작업 공간 전환",
@@ -211,11 +209,9 @@ export const dict = {
   "common.attachment": "첨부 파일",
   "prompt.placeholder.shell": "셸 명령어 입력...",
   "prompt.placeholder.normal": '무엇이든 물어보세요... "{{example}}"',
-  "prompt.placeholder.simple": "무엇이든 물어보세요...",
   "prompt.placeholder.summarizeComments": "댓글 요약…",
   "prompt.placeholder.summarizeComment": "댓글 요약…",
   "prompt.mode.shell": "셸",
-  "prompt.mode.normal": "프롬프트",
   "prompt.mode.shell.exit": "종료하려면 esc",
   "prompt.example.1": "코드베이스의 TODO 수정",
   "prompt.example.2": "이 프로젝트의 기술 스택이 무엇인가요?",
@@ -454,9 +450,6 @@ export const dict = {
   "session.messages.loading": "메시지 로드 중...",
   "session.messages.jumpToLatest": "최신으로 이동",
   "session.context.addToContext": "컨텍스트에 {{selection}} 추가",
-  "session.todo.title": "할 일",
-  "session.todo.collapse": "접기",
-  "session.todo.expand": "펼치기",
   "session.new.worktree.main": "메인 브랜치",
   "session.new.worktree.mainWithBranch": "메인 브랜치 ({{branch}})",
   "session.new.worktree.create": "새 작업 트리 생성",

packages/app/src/i18n/no.ts

@@ -72,8 +72,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Bytt til forrige agent",
   "command.model.variant.cycle": "Bytt tenkeinnsats",
   "command.model.variant.cycle.description": "Bytt til neste innsatsnivå",
-  "command.prompt.mode.shell": "Bytt til Shell-modus",
-  "command.prompt.mode.normal": "Bytt til Prompt-modus",
   "command.permissions.autoaccept.enable": "Godta endringer automatisk",
   "command.permissions.autoaccept.disable": "Slutt å godta endringer automatisk",
   "command.workspace.toggle": "Veksle arbeidsområder",
@@ -228,11 +226,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Skriv inn shell-kommando...",
   "prompt.placeholder.normal": 'Spør om hva som helst... "{{example}}"',
-  "prompt.placeholder.simple": "Spør om hva som helst...",
   "prompt.placeholder.summarizeComments": "Oppsummer kommentarer…",
   "prompt.placeholder.summarizeComment": "Oppsummer kommentar…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "ESC for å avslutte",
 
   "prompt.example.1": "Fiks en TODO i kodebasen",
@@ -510,9 +506,6 @@ export const dict = {
   "session.messages.jumpToLatest": "Hopp til nyeste",
 
   "session.context.addToContext": "Legg til {{selection}} i kontekst",
-  "session.todo.title": "Oppgaver",
-  "session.todo.collapse": "Skjul",
-  "session.todo.expand": "Utvid",
 
   "session.new.worktree.main": "Hovedgren",
   "session.new.worktree.mainWithBranch": "Hovedgren ({{branch}})",

packages/app/src/i18n/pl.ts

@@ -63,8 +63,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Przełącz na poprzedniego agenta",
   "command.model.variant.cycle": "Przełącz wysiłek myślowy",
   "command.model.variant.cycle.description": "Przełącz na następny poziom wysiłku",
-  "command.prompt.mode.shell": "Przełącz na tryb terminala",
-  "command.prompt.mode.normal": "Przełącz na tryb Prompt",
   "command.permissions.autoaccept.enable": "Automatyczne akceptowanie edycji",
   "command.permissions.autoaccept.disable": "Zatrzymaj automatyczne akceptowanie edycji",
   "command.workspace.toggle": "Przełącz przestrzenie robocze",
@@ -209,11 +207,9 @@ export const dict = {
   "common.attachment": "załącznik",
   "prompt.placeholder.shell": "Wpisz polecenie terminala...",
   "prompt.placeholder.normal": 'Zapytaj o cokolwiek... "{{example}}"',
-  "prompt.placeholder.simple": "Zapytaj o cokolwiek...",
   "prompt.placeholder.summarizeComments": "Podsumuj komentarze…",
   "prompt.placeholder.summarizeComment": "Podsumuj komentarz…",
   "prompt.mode.shell": "Terminal",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "esc aby wyjść",
   "prompt.example.1": "Napraw TODO w bazie kodu",
   "prompt.example.2": "Jaki jest stos technologiczny tego projektu?",
@@ -453,9 +449,6 @@ export const dict = {
   "session.messages.loading": "Ładowanie wiadomości...",
   "session.messages.jumpToLatest": "Przejdź do najnowszych",
   "session.context.addToContext": "Dodaj {{selection}} do kontekstu",
-  "session.todo.title": "Zadania",
-  "session.todo.collapse": "Zwiń",
-  "session.todo.expand": "Rozwiń",
   "session.new.worktree.main": "Główna gałąź",
   "session.new.worktree.mainWithBranch": "Główna gałąź ({{branch}})",
   "session.new.worktree.create": "Utwórz nowe drzewo robocze",

packages/app/src/i18n/ru.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "Переключиться к предыдущему агенту",
   "command.model.variant.cycle": "Цикл режимов мышления",
   "command.model.variant.cycle.description": "Переключиться к следующему уровню усилий",
-  "command.prompt.mode.shell": "Переключиться в режим оболочки",
-  "command.prompt.mode.normal": "Переключиться в режим промпта",
   "command.permissions.autoaccept.enable": "Авто-принятие изменений",
   "command.permissions.autoaccept.disable": "Прекратить авто-принятие изменений",
   "command.workspace.toggle": "Переключить рабочие пространства",
@@ -225,11 +223,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "Введите команду оболочки...",
   "prompt.placeholder.normal": 'Спросите что угодно... "{{example}}"',
-  "prompt.placeholder.simple": "Спросите что угодно...",
   "prompt.placeholder.summarizeComments": "Суммировать комментарии…",
   "prompt.placeholder.summarizeComment": "Суммировать комментарий…",
   "prompt.mode.shell": "Оболочка",
-  "prompt.mode.normal": "Промпт",
   "prompt.mode.shell.exit": "esc для выхода",
 
   "prompt.example.1": "Исправить TODO в коде",
@@ -508,9 +504,6 @@ export const dict = {
   "session.messages.jumpToLatest": "Перейти к последнему",
 
   "session.context.addToContext": "Добавить {{selection}} в контекст",
-  "session.todo.title": "Задачи",
-  "session.todo.collapse": "Свернуть",
-  "session.todo.expand": "Развернуть",
 
   "session.new.worktree.main": "Основная ветка",
   "session.new.worktree.mainWithBranch": "Основная ветка ({{branch}})",

packages/app/src/i18n/th.ts

@@ -69,8 +69,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "สลับไปยังเอเจนต์ก่อนหน้า",
   "command.model.variant.cycle": "เปลี่ยนความพยายามในการคิด",
   "command.model.variant.cycle.description": "สลับไปยังระดับความพยายามถัดไป",
-  "command.prompt.mode.shell": "สลับไปยังโหมดเชลล์",
-  "command.prompt.mode.normal": "สลับไปยังโหมดพรอมต์",
   "command.permissions.autoaccept.enable": "ยอมรับการแก้ไขโดยอัตโนมัติ",
   "command.permissions.autoaccept.disable": "หยุดยอมรับการแก้ไขโดยอัตโนมัติ",
   "command.workspace.toggle": "สลับพื้นที่ทำงาน",
@@ -225,11 +223,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "ป้อนคำสั่งเชลล์...",
   "prompt.placeholder.normal": 'ถามอะไรก็ได้... "{{example}}"',
-  "prompt.placeholder.simple": "ถามอะไรก็ได้...",
   "prompt.placeholder.summarizeComments": "สรุปความคิดเห็น…",
   "prompt.placeholder.summarizeComment": "สรุปความคิดเห็น…",
   "prompt.mode.shell": "เชลล์",
-  "prompt.mode.normal": "พรอมต์",
   "prompt.mode.shell.exit": "กด esc เพื่อออก",
 
   "prompt.example.1": "แก้ไข TODO ในโค้ดเบส",
@@ -505,9 +501,6 @@ export const dict = {
   "session.messages.jumpToLatest": "ไปที่ล่าสุด",
 
   "session.context.addToContext": "เพิ่ม {{selection}} ไปยังบริบท",
-  "session.todo.title": "สิ่งที่ต้องทำ",
-  "session.todo.collapse": "ย่อ",
-  "session.todo.expand": "ขยาย",
 
   "session.new.worktree.main": "สาขาหลัก",
   "session.new.worktree.mainWithBranch": "สาขาหลัก ({{branch}})",

packages/app/src/i18n/zh.ts

@@ -93,9 +93,6 @@ export const dict = {
   "command.model.variant.cycle": "切换思考强度",
   "command.model.variant.cycle.description": "切换到下一个强度等级",
 
-  "command.prompt.mode.shell": "切换到 Shell 模式",
-  "command.prompt.mode.normal": "切换到 Prompt 模式",
-
   "command.permissions.autoaccept.enable": "自动接受编辑",
   "command.permissions.autoaccept.disable": "停止自动接受编辑",
 
@@ -247,11 +244,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "输入 shell 命令...",
   "prompt.placeholder.normal": '随便问点什么... "{{example}}"',
-  "prompt.placeholder.simple": "随便问点什么...",
   "prompt.placeholder.summarizeComments": "总结评论…",
   "prompt.placeholder.summarizeComment": "总结该评论…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "按 esc 退出",
   "prompt.example.1": "修复代码库中的一个 TODO",
   "prompt.example.2": "这个项目的技术栈是什么？",
@@ -505,9 +500,6 @@ export const dict = {
   "session.messages.loading": "正在加载消息...",
   "session.messages.jumpToLatest": "跳转到最新",
   "session.context.addToContext": "将 {{selection}} 添加到上下文",
-  "session.todo.title": "待办事项",
-  "session.todo.collapse": "折叠",
-  "session.todo.expand": "展开",
   "session.new.worktree.main": "主分支",
   "session.new.worktree.mainWithBranch": "主分支（{{branch}}）",
   "session.new.worktree.create": "创建新的 worktree",

packages/app/src/i18n/zht.ts

@@ -73,8 +73,6 @@ export const dict = {
   "command.agent.cycle.reverse.description": "切換到上一個代理程式",
   "command.model.variant.cycle": "循環思考強度",
   "command.model.variant.cycle.description": "切換到下一個強度等級",
-  "command.prompt.mode.shell": "切換到 Shell 模式",
-  "command.prompt.mode.normal": "切換到 Prompt 模式",
   "command.permissions.autoaccept.enable": "自動接受編輯",
   "command.permissions.autoaccept.disable": "停止自動接受編輯",
   "command.workspace.toggle": "切換工作區",
@@ -225,11 +223,9 @@ export const dict = {
 
   "prompt.placeholder.shell": "輸入 shell 命令...",
   "prompt.placeholder.normal": '隨便問點什麼... "{{example}}"',
-  "prompt.placeholder.simple": "隨便問點什麼...",
   "prompt.placeholder.summarizeComments": "摘要評論…",
   "prompt.placeholder.summarizeComment": "摘要這則評論…",
   "prompt.mode.shell": "Shell",
-  "prompt.mode.normal": "Prompt",
   "prompt.mode.shell.exit": "按 esc 退出",
 
   "prompt.example.1": "修復程式碼庫中的一個 TODO",
@@ -501,9 +497,6 @@ export const dict = {
 
   "session.messages.jumpToLatest": "跳到最新",
   "session.context.addToContext": "將 {{selection}} 新增到上下文",
-  "session.todo.title": "待辦事項",
-  "session.todo.collapse": "折疊",
-  "session.todo.expand": "展開",
 
   "session.new.worktree.main": "主分支",
   "session.new.worktree.mainWithBranch": "主分支 ({{branch}})",

packages/app/src/index.ts

@@ -1,5 +1,4 @@
+export { PlatformProvider, type Platform, type DisplayBackend } from "./context/platform"
 export { AppBaseProviders, AppInterface } from "./app"
 export { useCommand } from "./context/command"
-export { type DisplayBackend, type Platform, PlatformProvider } from "./context/platform"
-export { ServerConnection } from "./context/server"
 export { handleNotificationClick } from "./utils/notification-click"

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

@@ -30,6 +30,7 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
       onQuestionReject={(input: { requestID: string }) => sdk.client.question.reject(input)}
       onNavigateToSession={(sessionID: string) => navigate(`/${params.dir}/session/${sessionID}`)}
       onSessionHref={(sessionID: string) => `/${params.dir}/session/${sessionID}`}
+      onSyncSession={(sessionID: string) => sync.session.sync(sessionID)}
     >
       <LocalProvider>{props.children}</LocalProvider>
     </DataProvider>

packages/app/src/pages/layout.tsx

@@ -1710,7 +1710,7 @@ export default function Layout(props: ParentProps) {
     return (
       <div
         classList={{
-          "flex flex-col min-h-0 bg-background-stronger border border-b-0 border-border-weak-base rounded-tl-[12px]": true,
+          "flex flex-col min-h-0 bg-background-stronger border border-b-0 border-border-weak-base rounded-tl-sm": true,
           "flex-1 min-w-0": panelProps.mobile,
         }}
         style={{ width: panelProps.mobile ? undefined : `${Math.max(layout.sidebar.width() - 64, 0)}px` }}
@@ -1725,8 +1725,8 @@ export default function Layout(props: ParentProps) {
                       id={`project:${projectId()}`}
                       value={projectName}
                       onSave={(next) => renameProject(p(), next)}
-                      class="text-14-medium text-text-strong truncate"
+                      class="text-16-medium text-text-strong truncate"
-                      displayClass="text-14-medium text-text-strong truncate"
+                      displayClass="text-16-medium text-text-strong truncate"
                       stopPropagation
                     />
 
@@ -2042,7 +2042,7 @@ export default function Layout(props: ParentProps) {
         <main
           classList={{
             "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base": true,
-            "xl:border-l xl:rounded-tl-[12px]": !layout.sidebar.opened(),
+            "xl:border-l xl:rounded-tl-sm": !layout.sidebar.opened(),
           }}
         >
           <Show when={!autoselecting()} fallback={<div class="size-full" />}>

packages/app/src/pages/layout/sidebar-shell.tsx

@@ -51,7 +51,7 @@ export const SidebarContent = (props: {
           >
             <DragDropSensors />
             <ConstrainDragXAxis />
-            <div class="h-full w-full flex flex-col items-center gap-3 px-3 py-3 overflow-y-auto no-scrollbar">
+            <div class="h-full w-full flex flex-col items-center gap-3 px-3 py-2 overflow-y-auto no-scrollbar">
               <SortableProvider ids={props.projects().map((p) => p.worktree)}>
                 <For each={props.projects()}>{(project) => props.renderProject(project)}</For>
               </SortableProvider>
@@ -78,7 +78,7 @@ export const SidebarContent = (props: {
             <DragOverlay>{props.renderProjectOverlay()}</DragOverlay>
           </DragDropProvider>
         </div>
-        <div class="shrink-0 w-full pt-3 pb-6 flex flex-col items-center gap-2">
+        <div class="shrink-0 w-full pt-3 pb-3 flex flex-col items-center gap-2">
           <TooltipKeybind placement={placement()} title={props.settingsLabel()} keybind={props.settingsKeybind() ?? ""}>
             <IconButton
               icon="settings-gear"

packages/app/src/pages/session.tsx

@@ -1,23 +1,28 @@
 import { For, onCleanup, Show, Match, Switch, createMemo, createEffect, on } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { Dynamic } from "solid-js/web"
 import { useLocal } from "@/context/local"
 import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { createStore, produce } from "solid-js/store"
+import { SessionContextUsage } from "@/components/session-context-usage"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Select } from "@opencode-ai/ui/select"
+import { useCodeComponent } from "@opencode-ai/ui/context/code"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { Mark } from "@opencode-ai/ui/logo"
 
+import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
+import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useSync } from "@/context/sync"
-import { useTerminal } from "@/context/terminal"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { useLayout } from "@/context/layout"
 import { checksum, base64Encode } from "@opencode-ai/util/encode"
-import { findLast } from "@opencode-ai/util/array"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectFile } from "@/components/dialog-select-file"
 import FileTree from "@/components/file-tree"
@@ -28,14 +33,15 @@ import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSDK } from "@/context/sdk"
 import { usePrompt } from "@/context/prompt"
 import { useComments } from "@/context/comments"
-import { usePermission } from "@/context/permission"
+import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
 import { showToast } from "@opencode-ai/ui/toast"
-import { SessionHeader, NewSessionView } from "@/components/session"
+import { SessionHeader, SessionContextTab, SortableTab, FileVisual, NewSessionView } from "@/components/session"
 import { navMark, navParams } from "@/utils/perf"
 import { same } from "@/utils/same"
-import { createOpenReviewFile } from "@/pages/session/helpers"
+import { createOpenReviewFile, focusTerminalById, getTabReorderIndex } from "@/pages/session/helpers"
 import { createScrollSpy } from "@/pages/session/scroll-spy"
 import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import { FileTabContent } from "@/pages/session/file-tabs"
 import {
   SessionReviewTab,
   StickyAddButton,
@@ -43,6 +49,7 @@ import {
   type SessionReviewTabProps,
 } from "@/pages/session/review-tab"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
+import { terminalTabLabel } from "@/pages/session/terminal-label"
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { SessionPromptDock } from "@/pages/session/session-prompt-dock"
@@ -50,6 +57,33 @@ import { SessionMobileTabs } from "@/pages/session/session-mobile-tabs"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
 
+type HandoffSession = {
+  prompt: string
+  files: Record<string, SelectedLineRange | null>
+}
+
+const HANDOFF_MAX = 40
+
+const handoff = {
+  session: new Map<string, HandoffSession>(),
+  terminal: new Map<string, string[]>(),
+}
+
+const touch = <K, V>(map: Map<K, V>, key: K, value: V) => {
+  map.delete(key)
+  map.set(key, value)
+  while (map.size > HANDOFF_MAX) {
+    const first = map.keys().next().value
+    if (first === undefined) return
+    map.delete(first)
+  }
+}
+
+const setSessionHandoff = (key: string, patch: Partial<HandoffSession>) => {
+  const prev = handoff.session.get(key) ?? { prompt: "", files: {} }
+  touch(handoff.session, key, { ...prev, ...patch })
+}
+
 export default function Page() {
   const layout = useLayout()
   const local = useLocal()
@@ -57,6 +91,7 @@ export default function Page() {
   const sync = useSync()
   const terminal = useTerminal()
   const dialog = useDialog()
+  const codeComponent = useCodeComponent()
   const command = useCommand()
   const language = useLanguage()
   const params = useParams()
@@ -64,23 +99,54 @@ export default function Page() {
   const sdk = useSDK()
   const prompt = usePrompt()
   const comments = useComments()
-  const permission = usePermission()
+
+  const permRequest = createMemo(() => {
+    const sessionID = params.id
+    if (!sessionID) return
+    return sync.data.permission[sessionID]?.[0]
+  })
+
+  const questionRequest = createMemo(() => {
+    const sessionID = params.id
+    if (!sessionID) return
+    return sync.data.question[sessionID]?.[0]
+  })
+
+  const blocked = createMemo(() => !!permRequest() || !!questionRequest())
 
   const [ui, setUi] = createStore({
+    responding: false,
     pendingMessage: undefined as string | undefined,
     scrollGesture: 0,
+    autoCreated: false,
     scroll: {
       overflow: false,
       bottom: true,
     },
   })
 
-  const blocked = createMemo(() => {
+  createEffect(
-    const sessionID = params.id
+    on(
-    if (!sessionID) return false
+      () => permRequest()?.id,
-    return !!sync.data.permission[sessionID]?.[0] || !!sync.data.question[sessionID]?.[0]
+      () => setUi("responding", false),
-  })
+      { defer: true },
+    ),
+  )
 
+  const decide = (response: "once" | "always" | "reject") => {
+    const perm = permRequest()
+    if (!perm) return
+    if (ui.responding) return
+
+    setUi("responding", true)
+    sdk.client.permission
+      .respond({ sessionID: perm.sessionID, permissionID: perm.id, response })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+      .finally(() => setUi("responding", false))
+  }
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const workspaceKey = createMemo(() => params.dir ?? "")
   const workspaceTabs = createMemo(() => layout.tabs(workspaceKey))
@@ -163,7 +229,7 @@ export default function Page() {
     })
   }
 
-  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const isDesktop = createMediaQuery("(min-width: 1024px)")
   const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
   const desktopFileTreeOpen = createMemo(() => isDesktop() && layout.fileTree.opened())
   const desktopSidePanelOpen = createMemo(() => desktopReviewOpen() || desktopFileTreeOpen())
@@ -203,6 +269,7 @@ export default function Page() {
     if (!path) return
     file.load(path)
     openReviewPanel()
+    tabs().setActive(next)
   }
 
   createEffect(() => {
@@ -253,6 +320,206 @@ export default function Page() {
     return sync.session.history.loading(id)
   })
 
+  const [title, setTitle] = createStore({
+    draft: "",
+    editing: false,
+    saving: false,
+    menuOpen: false,
+    pendingRename: false,
+  })
+  let titleRef: HTMLInputElement | undefined
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  createEffect(
+    on(
+      sessionKey,
+      () => setTitle({ draft: "", editing: false, saving: false, menuOpen: false, pendingRename: false }),
+      { defer: true },
+    ),
+  )
+
+  const openTitleEditor = () => {
+    if (!params.id) return
+    setTitle({ editing: true, draft: info()?.title ?? "" })
+    requestAnimationFrame(() => {
+      titleRef?.focus()
+      titleRef?.select()
+    })
+  }
+
+  const closeTitleEditor = () => {
+    if (title.saving) return
+    setTitle({ editing: false, saving: false })
+  }
+
+  const saveTitleEditor = async () => {
+    const sessionID = params.id
+    if (!sessionID) return
+    if (title.saving) return
+
+    const next = title.draft.trim()
+    if (!next || next === (info()?.title ?? "")) {
+      setTitle({ editing: false, saving: false })
+      return
+    }
+
+    setTitle("saving", true)
+    await sdk.client.session
+      .update({ sessionID, title: next })
+      .then(() => {
+        sync.set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === sessionID)
+            if (index !== -1) draft.session[index].title = next
+          }),
+        )
+        setTitle({ editing: false, saving: false })
+      })
+      .catch((err) => {
+        setTitle("saving", false)
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
+    if (params.id !== sessionID) return
+    if (parentID) {
+      navigate(`/${params.dir}/session/${parentID}`)
+      return
+    }
+    if (nextSessionID) {
+      navigate(`/${params.dir}/session/${nextSessionID}`)
+      return
+    }
+    navigate(`/${params.dir}/session`)
+  }
+
+  async function archiveSession(sessionID: string) {
+    const session = sync.session.get(sessionID)
+    if (!session) return
+
+    const sessions = sync.data.session ?? []
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    await sdk.client.session
+      .update({ sessionID, time: { archived: Date.now() } })
+      .then(() => {
+        sync.set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === sessionID)
+            if (index !== -1) draft.session.splice(index, 1)
+          }),
+        )
+        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+      })
+      .catch((err) => {
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  async function deleteSession(sessionID: string) {
+    const session = sync.session.get(sessionID)
+    if (!session) return false
+
+    const sessions = (sync.data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    const result = await sdk.client.session
+      .delete({ sessionID })
+      .then((x) => x.data)
+      .catch((err) => {
+        showToast({
+          title: language.t("session.delete.failed.title"),
+          description: errorMessage(err),
+        })
+        return false
+      })
+
+    if (!result) return false
+
+    sync.set(
+      produce((draft) => {
+        const removed = new Set<string>([sessionID])
+
+        const byParent = new Map<string, string[]>()
+        for (const item of draft.session) {
+          const parentID = item.parentID
+          if (!parentID) continue
+          const existing = byParent.get(parentID)
+          if (existing) {
+            existing.push(item.id)
+            continue
+          }
+          byParent.set(parentID, [item.id])
+        }
+
+        const stack = [sessionID]
+        while (stack.length) {
+          const parentID = stack.pop()
+          if (!parentID) continue
+
+          const children = byParent.get(parentID)
+          if (!children) continue
+
+          for (const child of children) {
+            if (removed.has(child)) continue
+            removed.add(child)
+            stack.push(child)
+          }
+        }
+
+        draft.session = draft.session.filter((s) => !removed.has(s.id))
+      }),
+    )
+
+    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+    return true
+  }
+
+  function DialogDeleteSession(props: { sessionID: string }) {
+    const title = createMemo(() => sync.session.get(props.sessionID)?.title ?? language.t("command.session.new"))
+    const handleDelete = async () => {
+      await deleteSession(props.sessionID)
+      dialog.close()
+    }
+
+    return (
+      <Dialog title={language.t("session.delete.title")} fit>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-14-regular text-text-strong">
+              {language.t("session.delete.confirm", { name: title() })}
+            </span>
+          </div>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </Button>
+            <Button variant="primary" size="large" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    )
+  }
+
   const emptyUserMessages: UserMessage[] = []
   const userMessages = createMemo(
     () => messages().filter((m) => m.role === "user") as UserMessage[],
@@ -285,11 +552,15 @@ export default function Page() {
   )
 
   const [store, setStore] = createStore({
+    activeDraggable: undefined as string | undefined,
+    activeTerminalDraggable: undefined as string | undefined,
+    expanded: {} as Record<string, boolean>,
     messageId: undefined as string | undefined,
     turnStart: 0,
     mobileTab: "session" as "session" | "changes",
     changes: "session" as "session" | "turn",
     newSessionWorktree: "main",
+    promptHeight: 0,
   })
 
   const turnDiffs = createMemo(() => lastUserMessage()?.summary?.diffs ?? [])
@@ -380,7 +651,6 @@ export default function Page() {
   const idle = { type: "idle" as const }
   let inputRef!: HTMLDivElement
   let promptDock: HTMLDivElement | undefined
-  let dockHeight = 0
   let scroller: HTMLDivElement | undefined
   let content: HTMLDivElement | undefined
 
@@ -403,10 +673,46 @@ export default function Page() {
     sdk.directory
     const id = params.id
     if (!id) return
-    void sync.session.sync(id)
+    sync.session.sync(id)
-    void sync.session.todo(id)
   })
 
+  createEffect(() => {
+    if (!view().terminal.opened()) {
+      setUi("autoCreated", false)
+      return
+    }
+    if (!terminal.ready() || terminal.all().length !== 0 || ui.autoCreated) return
+    terminal.new()
+    setUi("autoCreated", true)
+  })
+
+  createEffect(
+    on(
+      () => terminal.all().length,
+      (count, prevCount) => {
+        if (prevCount !== undefined && prevCount > 0 && count === 0) {
+          if (view().terminal.opened()) {
+            view().terminal.toggle()
+          }
+        }
+      },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => terminal.active(),
+      (activeId) => {
+        if (!activeId || !view().terminal.opened()) return
+        // Immediately remove focus
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur()
+        }
+        focusTerminalById(activeId)
+      },
+    ),
+  )
+
   createEffect(
     on(
       () => visibleUserMessages().at(-1)?.id,
@@ -426,7 +732,9 @@ export default function Page() {
       sessionKey,
       () => {
         setStore("messageId", undefined)
+        setStore("expanded", {})
         setStore("changes", "session")
+        setUi("autoCreated", false)
       },
       { defer: true },
     ),
@@ -443,6 +751,12 @@ export default function Page() {
     ),
   )
 
+  createEffect(() => {
+    const id = lastUserMessage()?.id
+    if (!id) return
+    setStore("expanded", id, status().type !== "idle")
+  })
+
   const selectionPreview = (path: string, selection: FileSelection) => {
     const content = file.get(path)?.content?.content
     if (!content) return undefined
@@ -453,11 +767,6 @@ export default function Page() {
     return lines.slice(0, 2).join("\n")
   }
 
-  const addSelectionToContext = (path: string, selection: FileSelection) => {
-    const preview = selectionPreview(path, selection)
-    prompt.context.add({ type: "file", path, selection, preview })
-  }
-
   const addCommentToContext = (input: {
     file: string
     selection: SelectedLineRange
@@ -497,8 +806,8 @@ export default function Page() {
       return
     }
 
-    // Don't autofocus chat if desktop terminal panel is open
+    // Don't autofocus chat if terminal panel is open
-    if (isDesktop() && view().terminal.opened()) return
+    if (view().terminal.opened()) return
 
     // Only treat explicit scroll keys as potential "user scroll" gestures.
     if (event.key === "PageUp" || event.key === "PageDown" || event.key === "Home" || event.key === "End") {
@@ -512,6 +821,53 @@ export default function Page() {
     }
   }
 
+  const handleDragStart = (event: unknown) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    setStore("activeDraggable", id)
+  }
+
+  const handleDragOver = (event: DragEvent) => {
+    const { draggable, droppable } = event
+    if (draggable && droppable) {
+      const currentTabs = tabs().all()
+      const toIndex = getTabReorderIndex(currentTabs, draggable.id.toString(), droppable.id.toString())
+      if (toIndex === undefined) return
+      tabs().move(draggable.id.toString(), toIndex)
+    }
+  }
+
+  const handleDragEnd = () => {
+    setStore("activeDraggable", undefined)
+  }
+
+  const handleTerminalDragStart = (event: unknown) => {
+    const id = getDraggableId(event)
+    if (!id) return
+    setStore("activeTerminalDraggable", id)
+  }
+
+  const handleTerminalDragOver = (event: DragEvent) => {
+    const { draggable, droppable } = event
+    if (draggable && droppable) {
+      const terminals = terminal.all()
+      const fromIndex = terminals.findIndex((t: LocalPTY) => t.id === draggable.id.toString())
+      const toIndex = terminals.findIndex((t: LocalPTY) => t.id === droppable.id.toString())
+      if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+        terminal.move(draggable.id.toString(), toIndex)
+      }
+    }
+  }
+
+  const handleTerminalDragEnd = () => {
+    setStore("activeTerminalDraggable", undefined)
+    const activeId = terminal.active()
+    if (!activeId) return
+    setTimeout(() => {
+      focusTerminalById(activeId)
+    }, 0)
+  }
+
   const contextOpen = createMemo(() => tabs().active() === "context" || tabs().all().includes("context"))
   const openedTabs = createMemo(() =>
     tabs()
@@ -549,29 +905,11 @@ export default function Page() {
   const focusInput = () => inputRef?.focus()
 
   useSessionCommands({
-    command,
+    activeMessage,
-    dialog,
-    file,
-    language,
-    local,
-    permission,
-    prompt,
-    sdk,
-    sync,
-    terminal,
-    layout,
-    params,
-    navigate,
-    tabs,
-    view,
-    info,
-    status,
-    userMessages,
-    visibleUserMessages,
     showAllFiles,
     navigateMessageByOffset,
+    setExpanded: (id, fn) => setStore("expanded", id, fn),
     setActiveMessage,
-    addSelectionToContext,
     focusInput,
   })
 
@@ -595,6 +933,7 @@ export default function Page() {
       onSelect={(option) => option && setStore("changes", option)}
       variant="ghost"
       size="large"
+      triggerStyle={{ "font-size": "var(--font-size-large)" }}
     />
   )
 
@@ -1082,12 +1421,12 @@ export default function Page() {
     ({ height }) => {
       const next = Math.ceil(height)
 
-      if (next === dockHeight) return
+      if (next === store.promptHeight) return
 
       const el = scroller
       const stick = el ? el.scrollHeight - el.clientHeight - el.scrollTop < 10 : false
 
-      dockHeight = next
+      setStore("promptHeight", next)
 
       if (stick && el) {
         requestAnimationFrame(() => {
@@ -1123,6 +1462,58 @@ export default function Page() {
     document.addEventListener("keydown", handleKeyDown)
   })
 
+  const previewPrompt = () =>
+    prompt
+      .current()
+      .map((part) => {
+        if (part.type === "file") return `[file:${part.path}]`
+        if (part.type === "agent") return `@${part.name}`
+        if (part.type === "image") return `[image:${part.filename}]`
+        return part.content
+      })
+      .join("")
+      .trim()
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    setSessionHandoff(sessionKey(), { prompt: previewPrompt() })
+  })
+
+  createEffect(() => {
+    if (!terminal.ready()) return
+    language.locale()
+
+    touch(
+      handoff.terminal,
+      params.dir!,
+      terminal.all().map((pty) =>
+        terminalTabLabel({
+          title: pty.title,
+          titleNumber: pty.titleNumber,
+          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+        }),
+      ),
+    )
+  })
+
+  createEffect(() => {
+    if (!file.ready()) return
+    setSessionHandoff(sessionKey(), {
+      files: tabs()
+        .all()
+        .reduce<Record<string, SelectedLineRange | null>>((acc, tab) => {
+          const path = file.pathFromTab(tab)
+          if (!path) return acc
+          const selected = file.selectedLines(path)
+          acc[path] =
+            selected && typeof selected === "object" && "start" in selected && "end" in selected
+              ? (selected as SelectedLineRange)
+              : null
+          return acc
+        }, {}),
+    })
+  })
+
   onCleanup(() => {
     cancelTurnBackfill()
     document.removeEventListener("keydown", handleKeyDown)
@@ -1133,7 +1524,13 @@ export default function Page() {
   return (
     <div class="relative bg-background-base size-full overflow-hidden flex flex-col">
       <SessionHeader />
-      <div class="flex-1 min-h-0 flex flex-col md:flex-row">
+      <div
+        class="flex-1 min-h-0 flex"
+        classList={{
+          "flex-col": !isDesktop(),
+          "flex-row": isDesktop(),
+        }}
+      >
         <SessionMobileTabs
           open={!isDesktop() && !!params.id}
           mobileTab={store.mobileTab}
@@ -1141,17 +1538,19 @@ export default function Page() {
           reviewCount={reviewCount()}
           onSession={() => setStore("mobileTab", "session")}
           onChanges={() => setStore("mobileTab", "changes")}
+          t={language.t as (key: string, vars?: Record<string, string | number | boolean>) => string}
         />
 
         {/* Session panel */}
         <div
           classList={{
             "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger": true,
-            "flex-1": true,
+            "flex-1 pt-2 md:pt-3": true,
             "md:flex-none": desktopSidePanelOpen(),
           }}
           style={{
             width: sessionPanelWidth(),
+            "--prompt-height": store.promptHeight ? `${store.promptHeight}px` : undefined,
           }}
         >
           <div class="flex-1 min-h-0 overflow-hidden">
@@ -1163,7 +1562,7 @@ export default function Page() {
                     mobileFallback={reviewContent({
                       diffStyle: "unified",
                       classes: {
-                        root: "pb-8",
+                        root: "pb-[calc(var(--prompt-height,8rem)+32px)]",
                         header: "px-4",
                         container: "px-4",
                       },
@@ -1180,7 +1579,27 @@ export default function Page() {
                     isDesktop={isDesktop()}
                     onScrollSpyScroll={scrollSpy.onScroll}
                     onAutoScrollInteraction={autoScroll.handleInteraction}
+                    showHeader={!!(info()?.title || info()?.parentID)}
                     centered={centered()}
+                    title={info()?.title}
+                    parentID={info()?.parentID}
+                    openTitleEditor={openTitleEditor}
+                    closeTitleEditor={closeTitleEditor}
+                    saveTitleEditor={saveTitleEditor}
+                    titleRef={(el) => {
+                      titleRef = el
+                    }}
+                    titleState={title}
+                    onTitleDraft={(value) => setTitle("draft", value)}
+                    onTitleMenuOpen={(open) => setTitle("menuOpen", open)}
+                    onTitlePendingRename={(value) => setTitle("pendingRename", value)}
+                    onNavigateParent={() => {
+                      navigate(`/${params.dir}/session/${info()?.parentID}`)
+                    }}
+                    sessionID={params.id!}
+                    onArchiveSession={(sessionID) => void archiveSession(sessionID)}
+                    onDeleteSession={(sessionID) => dialog.show(() => <DialogDeleteSession sessionID={sessionID} />)}
+                    t={language.t as (key: string, vars?: Record<string, string | number | boolean>) => string}
                     setContentRef={(el) => {
                       content = el
                       autoScroll.contentRef(el)
@@ -1208,6 +1627,8 @@ export default function Page() {
                       navMark({ dir: params.dir, to: id, name: "session:first-turn-mounted" })
                     }}
                     lastUserMessageID={lastUserMessage()?.id}
+                    expanded={store.expanded}
+                    onToggleExpanded={(id) => setStore("expanded", id, (open: boolean | undefined) => !open)}
                   />
                 </Show>
               </Match>
@@ -1235,6 +1656,14 @@ export default function Page() {
 
           <SessionPromptDock
             centered={centered()}
+            questionRequest={questionRequest}
+            permissionRequest={permRequest}
+            blocked={blocked()}
+            promptReady={prompt.ready()}
+            handoffPrompt={handoff.session.get(sessionKey())?.prompt}
+            t={language.t as (key: string, vars?: Record<string, string | number | boolean>) => string}
+            responding={ui.responding}
+            onDecide={decide}
             inputRef={(el) => {
               inputRef = el
             }}
@@ -1244,9 +1673,7 @@ export default function Page() {
               comments.clear()
               resumeScroll()
             }}
-            setPromptDockRef={(el) => {
+            setPromptDockRef={(el) => (promptDock = el)}
-              promptDock = el
-            }}
           />
 
           <Show when={desktopReviewOpen()}>
@@ -1260,10 +1687,64 @@ export default function Page() {
           </Show>
         </div>
 
-        <SessionSidePanel reviewPanel={reviewPanel} activeDiff={tree.activeDiff} focusReviewDiff={focusReviewDiff} />
+        <SessionSidePanel
+          open={desktopSidePanelOpen()}
+          reviewOpen={desktopReviewOpen()}
+          language={language}
+          layout={layout}
+          command={command}
+          dialog={dialog}
+          file={file}
+          comments={comments}
+          hasReview={hasReview()}
+          reviewCount={reviewCount()}
+          reviewTab={reviewTab()}
+          contextOpen={contextOpen}
+          openedTabs={openedTabs}
+          activeTab={activeTab}
+          activeFileTab={activeFileTab}
+          tabs={tabs}
+          openTab={openTab}
+          showAllFiles={showAllFiles}
+          reviewPanel={reviewPanel}
+          vm={{
+            messages,
+            visibleUserMessages,
+            view,
+            info,
+          }}
+          handoffFiles={() => handoff.session.get(sessionKey())?.files}
+          codeComponent={codeComponent}
+          addCommentToContext={addCommentToContext}
+          activeDraggable={() => store.activeDraggable}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragOver={handleDragOver}
+          fileTreeTab={fileTreeTab}
+          setFileTreeTabValue={setFileTreeTabValue}
+          diffsReady={diffsReady()}
+          diffFiles={diffFiles()}
+          kinds={kinds()}
+          activeDiff={tree.activeDiff}
+          focusReviewDiff={focusReviewDiff}
+        />
       </div>
 
-      <TerminalPanel />
+      <TerminalPanel
+        open={view().terminal.opened()}
+        height={layout.terminal.height()}
+        resize={layout.terminal.resize}
+        close={view().terminal.close}
+        terminal={terminal}
+        language={language}
+        command={command}
+        handoff={() => handoff.terminal.get(params.dir!) ?? []}
+        activeTerminalDraggable={() => store.activeTerminalDraggable}
+        handleTerminalDragStart={handleTerminalDragStart}
+        handleTerminalDragOver={handleTerminalDragOver}
+        handleTerminalDragEnd={handleTerminalDragEnd}
+        onCloseTab={() => setUi("autoCreated", false)}
+      />
     </div>
   )
 }

packages/app/src/pages/session/file-tabs.tsx

@@ -1,8 +1,6 @@
-import { createEffect, createMemo, For, Match, on, onCleanup, Show, Switch } from "solid-js"
+import { type ValidComponent, createEffect, createMemo, For, Match, on, onCleanup, Show, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
-import { useParams } from "@solidjs/router"
-import { useCodeComponent } from "@opencode-ai/ui/context/code"
 import { sampledChecksum } from "@opencode-ai/util/encode"
 import { decode64 } from "@/utils/base64"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -10,11 +8,9 @@ import { LineComment as LineCommentView, LineCommentEditor } from "@opencode-ai/
 import { Mark } from "@opencode-ai/ui/logo"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { useLayout } from "@/context/layout"
-import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
+import { useFile, type SelectedLineRange } from "@/context/file"
 import { useComments } from "@/context/comments"
 import { useLanguage } from "@/context/language"
-import { usePrompt } from "@/context/prompt"
-import { getSessionHandoff } from "@/pages/session/handoff"
 
 const formatCommentLabel = (range: SelectedLineRange) => {
   const start = Math.min(range.start, range.end)
@@ -23,29 +19,34 @@ const formatCommentLabel = (range: SelectedLineRange) => {
   return `lines ${start}-${end}`
 }
 
-export function FileTabContent(props: { tab: string }) {
+export function FileTabContent(props: {
-  const params = useParams()
+  tab: string
-  const layout = useLayout()
+  activeTab: () => string
-  const file = useFile()
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
-  const comments = useComments()
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
-  const language = useLanguage()
+  handoffFiles: () => Record<string, SelectedLineRange | null> | undefined
-  const prompt = usePrompt()
+  file: ReturnType<typeof useFile>
-  const codeComponent = useCodeComponent()
+  comments: ReturnType<typeof useComments>
-
+  language: ReturnType<typeof useLanguage>
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  codeComponent: NonNullable<ValidComponent>
-  const tabs = createMemo(() => layout.tabs(sessionKey))
+  addCommentToContext: (input: {
-  const view = createMemo(() => layout.view(sessionKey))
+    file: string
-
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+    origin?: "review" | "file"
+  }) => void
+}) {
   let scroll: HTMLDivElement | undefined
   let scrollFrame: number | undefined
   let pending: { x: number; y: number } | undefined
   let codeScroll: HTMLElement[] = []
 
-  const path = createMemo(() => file.pathFromTab(props.tab))
+  const path = createMemo(() => props.file.pathFromTab(props.tab))
   const state = createMemo(() => {
     const p = path()
     if (!p) return
-    return file.get(p)
+    return props.file.get(p)
   })
   const contents = createMemo(() => state()?.content?.content ?? "")
   const cacheKey = createMemo(() => sampledChecksum(contents()))
@@ -81,7 +82,7 @@ export function FileTabContent(props: { tab: string }) {
     svgToast.shown = true
     showToast({
       variant: "error",
-      title: language.t("toast.file.loadFailed.title"),
+      title: props.language.t("toast.file.loadFailed.title"),
     })
   })
   const svgPreviewUrl = createMemo(() => {
@@ -99,57 +100,16 @@ export function FileTabContent(props: { tab: string }) {
   const selectedLines = createMemo(() => {
     const p = path()
     if (!p) return null
-    if (file.ready()) return file.selectedLines(p) ?? null
+    if (props.file.ready()) return props.file.selectedLines(p) ?? null
-    return getSessionHandoff(sessionKey())?.files[p] ?? null
+    return props.handoffFiles()?.[p] ?? null
   })
 
-  const selectionPreview = (source: string, selection: FileSelection) => {
-    const start = Math.max(1, Math.min(selection.startLine, selection.endLine))
-    const end = Math.max(selection.startLine, selection.endLine)
-    const lines = source.split("\n").slice(start - 1, end)
-    if (lines.length === 0) return undefined
-    return lines.slice(0, 2).join("\n")
-  }
-
-  const addCommentToContext = (input: {
-    file: string
-    selection: SelectedLineRange
-    comment: string
-    preview?: string
-    origin?: "review" | "file"
-  }) => {
-    const selection = selectionFromLines(input.selection)
-    const preview =
-      input.preview ??
-      (() => {
-        if (input.file === path()) return selectionPreview(contents(), selection)
-        const source = file.get(input.file)?.content?.content
-        if (!source) return undefined
-        return selectionPreview(source, selection)
-      })()
-
-    const saved = comments.add({
-      file: input.file,
-      selection: input.selection,
-      comment: input.comment,
-    })
-    prompt.context.add({
-      type: "file",
-      path: input.file,
-      selection,
-      comment: input.comment,
-      commentID: saved.id,
-      commentOrigin: input.origin,
-      preview,
-    })
-  }
-
   let wrap: HTMLDivElement | undefined
 
   const fileComments = createMemo(() => {
     const p = path()
     if (!p) return []
-    return comments.list(p)
+    return props.comments.list(p)
   })
 
   const commentLayout = createMemo(() => {
@@ -268,19 +228,19 @@ export function FileTabContent(props: { tab: string }) {
   })
 
   createEffect(() => {
-    const focus = comments.focus()
+    const focus = props.comments.focus()
     const p = path()
     if (!focus || !p) return
     if (focus.file !== p) return
-    if (tabs().active() !== props.tab) return
+    if (props.activeTab() !== props.tab) return
 
     const target = fileComments().find((comment) => comment.id === focus.id)
     if (!target) return
 
     setNote("openedComment", target.id)
     setNote("commenting", null)
-    file.setSelectedLines(p, target.selection)
+    props.file.setSelectedLines(p, target.selection)
-    requestAnimationFrame(() => comments.clearFocus())
+    requestAnimationFrame(() => props.comments.clearFocus())
   })
 
   const getCodeScroll = () => {
@@ -309,7 +269,7 @@ export function FileTabContent(props: { tab: string }) {
       pending = undefined
       if (!out) return
 
-      view().setScroll(props.tab, out)
+      props.view().setScroll(props.tab, out)
     })
   }
 
@@ -345,7 +305,7 @@ export function FileTabContent(props: { tab: string }) {
     const el = scroll
     if (!el) return
 
-    const s = view().scroll(props.tab)
+    const s = props.view()?.scroll(props.tab)
     if (!s) return
 
     syncCodeScroll()
@@ -383,7 +343,7 @@ export function FileTabContent(props: { tab: string }) {
 
   createEffect(
     on(
-      () => file.ready(),
+      () => props.file.ready(),
       (ready) => {
         if (!ready) return
         requestAnimationFrame(restoreScroll)
@@ -394,7 +354,7 @@ export function FileTabContent(props: { tab: string }) {
 
   createEffect(
     on(
-      () => tabs().active() === props.tab,
+      () => props.tabs().active() === props.tab,
       (active) => {
         if (!active) return
         if (!state()?.loaded) return
@@ -421,7 +381,7 @@ export function FileTabContent(props: { tab: string }) {
       class={`relative overflow-hidden ${wrapperClass}`}
     >
       <Dynamic
-        component={codeComponent}
+        component={props.codeComponent}
         file={{
           name: path() ?? "",
           contents: source,
@@ -437,7 +397,7 @@ export function FileTabContent(props: { tab: string }) {
         onLineSelected={(range: SelectedLineRange | null) => {
           const p = path()
           if (!p) return
-          file.setSelectedLines(p, range)
+          props.file.setSelectedLines(p, range)
           if (!range) setNote("commenting", null)
         }}
         onLineSelectionEnd={(range: SelectedLineRange | null) => {
@@ -463,14 +423,14 @@ export function FileTabContent(props: { tab: string }) {
             onMouseEnter={() => {
               const p = path()
               if (!p) return
-              file.setSelectedLines(p, comment.selection)
+              props.file.setSelectedLines(p, comment.selection)
             }}
             onClick={() => {
               const p = path()
               if (!p) return
               setNote("commenting", null)
               setNote("openedComment", (current) => (current === comment.id ? null : comment.id))
-              file.setSelectedLines(p, comment.selection)
+              props.file.setSelectedLines(p, comment.selection)
             }}
           />
         )}
@@ -487,7 +447,12 @@ export function FileTabContent(props: { tab: string }) {
               onSubmit={(value) => {
                 const p = path()
                 if (!p) return
-                addCommentToContext({ file: p, selection: range(), comment: value, origin: "file" })
+                props.addCommentToContext({
+                  file: p,
+                  selection: range(),
+                  comment: value,
+                  origin: "file",
+                })
                 setNote("commenting", null)
               }}
               onPopoverFocusOut={(e: FocusEvent) => {
@@ -544,13 +509,13 @@ export function FileTabContent(props: { tab: string }) {
             <Mark class="w-14 opacity-10" />
             <div class="flex flex-col gap-2 max-w-md">
               <div class="text-14-semibold text-text-strong truncate">{path()?.split("/").pop()}</div>
-              <div class="text-14-regular text-text-weak">{language.t("session.files.binaryContent")}</div>
+              <div class="text-14-regular text-text-weak">{props.language.t("session.files.binaryContent")}</div>
             </div>
           </div>
         </Match>
         <Match when={state()?.loaded}>{renderCode(contents(), "pb-40")}</Match>
         <Match when={state()?.loading}>
-          <div class="px-6 py-4 text-text-weak">{language.t("common.loading")}...</div>
+          <div class="px-6 py-4 text-text-weak">{props.language.t("common.loading")}...</div>
         </Match>
         <Match when={state()?.error}>{(err) => <div class="px-6 py-4 text-text-weak">{err()}</div>}</Match>
       </Switch>

packages/app/src/pages/session/handoff.ts

@@ -1,36 +0,0 @@
-import type { SelectedLineRange } from "@/context/file"
-
-type HandoffSession = {
-  prompt: string
-  files: Record<string, SelectedLineRange | null>
-}
-
-const MAX = 40
-
-const store = {
-  session: new Map<string, HandoffSession>(),
-  terminal: new Map<string, string[]>(),
-}
-
-const touch = <K, V>(map: Map<K, V>, key: K, value: V) => {
-  map.delete(key)
-  map.set(key, value)
-  while (map.size > MAX) {
-    const first = map.keys().next().value
-    if (first === undefined) return
-    map.delete(first)
-  }
-}
-
-export const setSessionHandoff = (key: string, patch: Partial<HandoffSession>) => {
-  const prev = store.session.get(key) ?? { prompt: "", files: {} }
-  touch(store.session, key, { ...prev, ...patch })
-}
-
-export const getSessionHandoff = (key: string) => store.session.get(key)
-
-export const setTerminalHandoff = (key: string, value: string[]) => {
-  touch(store.terminal, key, value)
-}
-
-export const getTerminalHandoff = (key: string) => store.terminal.get(key)

packages/app/src/pages/session/message-timeline.tsx

@@ -1,21 +1,13 @@
-import { For, createEffect, createMemo, on, onCleanup, onMount, Show, type JSX } from "solid-js"
+import { For, onCleanup, onMount, Show, type JSX } from "solid-js"
-import { createStore, produce } from "solid-js/store"
-import { useNavigate, useParams } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Dialog } from "@opencode-ai/ui/dialog"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import type { UserMessage } from "@opencode-ai/sdk/v2"
-import { showToast } from "@opencode-ai/ui/toast"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
-import { SessionContextUsage } from "@/components/session-context-usage"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/context/language"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
 
 const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
   const current = target instanceof Element ? target : undefined
@@ -61,7 +53,29 @@ export function MessageTimeline(props: {
   isDesktop: boolean
   onScrollSpyScroll: () => void
   onAutoScrollInteraction: (event: MouseEvent) => void
+  showHeader: boolean
   centered: boolean
+  title?: string
+  parentID?: string
+  openTitleEditor: () => void
+  closeTitleEditor: () => void
+  saveTitleEditor: () => void | Promise<void>
+  titleRef: (el: HTMLInputElement) => void
+  titleState: {
+    draft: string
+    editing: boolean
+    saving: boolean
+    menuOpen: boolean
+    pendingRename: boolean
+  }
+  onTitleDraft: (value: string) => void
+  onTitleMenuOpen: (open: boolean) => void
+  onTitlePendingRename: (value: boolean) => void
+  onNavigateParent: () => void
+  sessionID: string
+  onArchiveSession: (sessionID: string) => void
+  onDeleteSession: (sessionID: string) => void
+  t: (key: string, vars?: Record<string, string | number | boolean>) => string
   setContentRef: (el: HTMLDivElement) => void
   turnStart: number
   onRenderEarlier: () => void
@@ -74,233 +88,11 @@ export function MessageTimeline(props: {
   onUnregisterMessage: (id: string) => void
   onFirstTurnMount?: () => void
   lastUserMessageID?: string
+  expanded: Record<string, boolean>
+  onToggleExpanded: (id: string) => void
 }) {
   let touchGesture: number | undefined
 
-  const params = useParams()
-  const navigate = useNavigate()
-  const sdk = useSDK()
-  const sync = useSync()
-  const dialog = useDialog()
-  const language = useLanguage()
-
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-  const sessionID = createMemo(() => params.id)
-  const info = createMemo(() => {
-    const id = sessionID()
-    if (!id) return
-    return sync.session.get(id)
-  })
-  const titleValue = createMemo(() => info()?.title)
-  const parentID = createMemo(() => info()?.parentID)
-  const showHeader = createMemo(() => !!(titleValue() || parentID()))
-
-  const [title, setTitle] = createStore({
-    draft: "",
-    editing: false,
-    saving: false,
-    menuOpen: false,
-    pendingRename: false,
-  })
-  let titleRef: HTMLInputElement | undefined
-
-  const errorMessage = (err: unknown) => {
-    if (err && typeof err === "object" && "data" in err) {
-      const data = (err as { data?: { message?: string } }).data
-      if (data?.message) return data.message
-    }
-    if (err instanceof Error) return err.message
-    return language.t("common.requestFailed")
-  }
-
-  createEffect(
-    on(
-      sessionKey,
-      () => setTitle({ draft: "", editing: false, saving: false, menuOpen: false, pendingRename: false }),
-      { defer: true },
-    ),
-  )
-
-  const openTitleEditor = () => {
-    if (!sessionID()) return
-    setTitle({ editing: true, draft: titleValue() ?? "" })
-    requestAnimationFrame(() => {
-      titleRef?.focus()
-      titleRef?.select()
-    })
-  }
-
-  const closeTitleEditor = () => {
-    if (title.saving) return
-    setTitle({ editing: false, saving: false })
-  }
-
-  const saveTitleEditor = async () => {
-    const id = sessionID()
-    if (!id) return
-    if (title.saving) return
-
-    const next = title.draft.trim()
-    if (!next || next === (titleValue() ?? "")) {
-      setTitle({ editing: false, saving: false })
-      return
-    }
-
-    setTitle("saving", true)
-    await sdk.client.session
-      .update({ sessionID: id, title: next })
-      .then(() => {
-        sync.set(
-          produce((draft) => {
-            const index = draft.session.findIndex((s) => s.id === id)
-            if (index !== -1) draft.session[index].title = next
-          }),
-        )
-        setTitle({ editing: false, saving: false })
-      })
-      .catch((err) => {
-        setTitle("saving", false)
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: errorMessage(err),
-        })
-      })
-  }
-
-  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
-    if (params.id !== sessionID) return
-    if (parentID) {
-      navigate(`/${params.dir}/session/${parentID}`)
-      return
-    }
-    if (nextSessionID) {
-      navigate(`/${params.dir}/session/${nextSessionID}`)
-      return
-    }
-    navigate(`/${params.dir}/session`)
-  }
-
-  const archiveSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
-    if (!session) return
-
-    const sessions = sync.data.session ?? []
-    const index = sessions.findIndex((s) => s.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    await sdk.client.session
-      .update({ sessionID, time: { archived: Date.now() } })
-      .then(() => {
-        sync.set(
-          produce((draft) => {
-            const index = draft.session.findIndex((s) => s.id === sessionID)
-            if (index !== -1) draft.session.splice(index, 1)
-          }),
-        )
-        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-      })
-      .catch((err) => {
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: errorMessage(err),
-        })
-      })
-  }
-
-  const deleteSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
-    if (!session) return false
-
-    const sessions = (sync.data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
-    const index = sessions.findIndex((s) => s.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    const result = await sdk.client.session
-      .delete({ sessionID })
-      .then((x) => x.data)
-      .catch((err) => {
-        showToast({
-          title: language.t("session.delete.failed.title"),
-          description: errorMessage(err),
-        })
-        return false
-      })
-
-    if (!result) return false
-
-    sync.set(
-      produce((draft) => {
-        const removed = new Set<string>([sessionID])
-
-        const byParent = new Map<string, string[]>()
-        for (const item of draft.session) {
-          const parentID = item.parentID
-          if (!parentID) continue
-          const existing = byParent.get(parentID)
-          if (existing) {
-            existing.push(item.id)
-            continue
-          }
-          byParent.set(parentID, [item.id])
-        }
-
-        const stack = [sessionID]
-        while (stack.length) {
-          const parentID = stack.pop()
-          if (!parentID) continue
-
-          const children = byParent.get(parentID)
-          if (!children) continue
-
-          for (const child of children) {
-            if (removed.has(child)) continue
-            removed.add(child)
-            stack.push(child)
-          }
-        }
-
-        draft.session = draft.session.filter((s) => !removed.has(s.id))
-      }),
-    )
-
-    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-    return true
-  }
-
-  const navigateParent = () => {
-    const id = parentID()
-    if (!id) return
-    navigate(`/${params.dir}/session/${id}`)
-  }
-
-  function DialogDeleteSession(props: { sessionID: string }) {
-    const name = createMemo(() => sync.session.get(props.sessionID)?.title ?? language.t("command.session.new"))
-    const handleDelete = async () => {
-      await deleteSession(props.sessionID)
-      dialog.close()
-    }
-
-    return (
-      <Dialog title={language.t("session.delete.title")} fit>
-        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-          <div class="flex flex-col gap-1">
-            <span class="text-14-regular text-text-strong">
-              {language.t("session.delete.confirm", { name: name() })}
-            </span>
-          </div>
-          <div class="flex justify-end gap-2">
-            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </Button>
-            <Button variant="primary" size="large" onClick={handleDelete}>
-              {language.t("session.delete.button")}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    )
-  }
-
   return (
     <Show
       when={!props.mobileChanges}
@@ -308,7 +100,7 @@ export function MessageTimeline(props: {
     >
       <div class="relative w-full h-full min-w-0">
         <div
-          class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out"
+          class="absolute left-1/2 -translate-x-1/2 bottom-[calc(var(--prompt-height,8rem)+32px)] z-[60] pointer-events-none transition-all duration-200 ease-out"
           classList={{
             "opacity-100 translate-y-0 scale-100": props.scroll.overflow && !props.scroll.bottom,
             "opacity-0 translate-y-2 scale-95 pointer-events-none": !props.scroll.overflow || props.scroll.bottom,
@@ -367,110 +159,96 @@ export function MessageTimeline(props: {
           }}
           onClick={props.onAutoScrollInteraction}
           class="relative min-w-0 w-full h-full overflow-y-auto session-scroller"
-          style={{ "--session-title-height": showHeader() ? "40px" : "0px" }}
+          style={{ "--session-title-height": props.showHeader ? "40px" : "0px" }}
         >
-          <Show when={showHeader()}>
+          <Show when={props.showHeader}>
             <div
               classList={{
-                "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
+                "sticky top-0 z-30 bg-background-stronger": true,
                 "w-full": true,
-                "pb-4": true,
+                "px-4 md:px-6": true,
-                "pl-2 pr-3 md:pl-4 md:pr-3": true,
                 "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
               }}
             >
-              <div class="h-12 w-full flex items-center justify-between gap-2">
+              <div class="h-10 w-full flex items-center justify-between gap-2">
-                <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
+                <div class="flex items-center gap-1 min-w-0 flex-1">
-                  <Show when={parentID()}>
+                  <Show when={props.parentID}>
                     <IconButton
                       tabIndex={-1}
                       icon="arrow-left"
                       variant="ghost"
-                      onClick={navigateParent}
+                      onClick={props.onNavigateParent}
-                      aria-label={language.t("common.goBack")}
+                      aria-label={props.t("common.goBack")}
                     />
                   </Show>
-                  <Show when={titleValue() || title.editing}>
+                  <Show when={props.title || props.titleState.editing}>
                     <Show
-                      when={title.editing}
+                      when={props.titleState.editing}
                       fallback={
-                        <h1
+                        <h1 class="text-16-medium text-text-strong truncate min-w-0" onDblClick={props.openTitleEditor}>
-                          class="text-14-medium text-text-strong truncate grow-1 min-w-0 pl-2"
+                          {props.title}
-                          onDblClick={openTitleEditor}
-                        >
-                          {titleValue()}
                         </h1>
                       }
                     >
                       <InlineInput
-                        ref={(el) => {
+                        ref={props.titleRef}
-                          titleRef = el
+                        value={props.titleState.draft}
-                        }}
+                        disabled={props.titleState.saving}
-                        value={title.draft}
+                        class="text-16-medium text-text-strong grow-1 min-w-0"
-                        disabled={title.saving}
+                        onInput={(event) => props.onTitleDraft(event.currentTarget.value)}
-                        class="text-14-medium text-text-strong grow-1 min-w-0 pl-2 rounded-[6px]"
-                        style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
-                        onInput={(event) => setTitle("draft", event.currentTarget.value)}
                         onKeyDown={(event) => {
                           event.stopPropagation()
                           if (event.key === "Enter") {
                             event.preventDefault()
-                            void saveTitleEditor()
+                            void props.saveTitleEditor()
                             return
                           }
                           if (event.key === "Escape") {
                             event.preventDefault()
-                            closeTitleEditor()
+                            props.closeTitleEditor()
                           }
                         }}
-                        onBlur={closeTitleEditor}
+                        onBlur={props.closeTitleEditor}
                       />
                     </Show>
                   </Show>
                 </div>
-                <Show when={sessionID()}>
+                <Show when={props.sessionID}>
                   {(id) => (
-                    <div class="shrink-0 flex items-center gap-3">
+                    <div class="shrink-0 flex items-center">
-                      <SessionContextUsage placement="bottom" />
+                      <DropdownMenu open={props.titleState.menuOpen} onOpenChange={props.onTitleMenuOpen}>
-                      <DropdownMenu
+                        <Tooltip value={props.t("common.moreOptions")} placement="top">
-                        gutter={4}
+                          <DropdownMenu.Trigger
-                        placement="bottom-end"
+                            as={IconButton}
-                        open={title.menuOpen}
+                            icon="dot-grid"
-                        onOpenChange={(open) => setTitle("menuOpen", open)}
+                            variant="ghost"
-                      >
+                            class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                        <DropdownMenu.Trigger
+                            aria-label={props.t("common.moreOptions")}
-                          as={IconButton}
+                          />
-                          icon="dot-grid"
+                        </Tooltip>
-                          variant="ghost"
-                          class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                          aria-label={language.t("common.moreOptions")}
-                        />
                         <DropdownMenu.Portal>
                           <DropdownMenu.Content
-                            style={{ "min-width": "104px" }}
                             onCloseAutoFocus={(event) => {
-                              if (!title.pendingRename) return
+                              if (!props.titleState.pendingRename) return
                               event.preventDefault()
-                              setTitle("pendingRename", false)
+                              props.onTitlePendingRename(false)
-                              openTitleEditor()
+                              props.openTitleEditor()
                             }}
                           >
                             <DropdownMenu.Item
                               onSelect={() => {
-                                setTitle("pendingRename", true)
+                                props.onTitlePendingRename(true)
-                                setTitle("menuOpen", false)
+                                props.onTitleMenuOpen(false)
                               }}
                             >
-                              <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>{props.t("common.rename")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
-                            <DropdownMenu.Item onSelect={() => void archiveSession(id())}>
+                            <DropdownMenu.Item onSelect={() => props.onArchiveSession(id())}>
-                              <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                              <DropdownMenu.ItemLabel>{props.t("common.archive")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
                             <DropdownMenu.Separator />
-                            <DropdownMenu.Item
+                            <DropdownMenu.Item onSelect={() => props.onDeleteSession(id())}>
-                              onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id()} />)}
+                              <DropdownMenu.ItemLabel>{props.t("common.delete")}</DropdownMenu.ItemLabel>
-                            >
-                              <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                             </DropdownMenu.Item>
                           </DropdownMenu.Content>
                         </DropdownMenu.Portal>
@@ -485,7 +263,7 @@ export function MessageTimeline(props: {
           <div
             ref={props.setContentRef}
             role="log"
-            class="flex flex-col gap-12 items-start justify-start pb-16 transition-[margin]"
+            class="flex flex-col gap-12 items-start justify-start pb-[calc(var(--prompt-height,8rem)+64px)] md:pb-[calc(var(--prompt-height,10rem)+64px)] transition-[margin]"
             classList={{
               "w-full": true,
               "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
@@ -496,7 +274,7 @@ export function MessageTimeline(props: {
             <Show when={props.turnStart > 0}>
               <div class="w-full flex justify-center">
                 <Button variant="ghost" size="large" class="text-12-medium opacity-50" onClick={props.onRenderEarlier}>
-                  {language.t("session.messages.renderEarlier")}
+                  {props.t("session.messages.renderEarlier")}
                 </Button>
               </div>
             </Show>
@@ -510,8 +288,8 @@ export function MessageTimeline(props: {
                   onClick={props.onLoadEarlier}
                 >
                   {props.historyLoading
-                    ? language.t("session.messages.loadingEarlier")
+                    ? props.t("session.messages.loadingEarlier")
-                    : language.t("session.messages.loadEarlier")}
+                    : props.t("session.messages.loadEarlier")}
                 </Button>
               </div>
             </Show>
@@ -535,9 +313,11 @@ export function MessageTimeline(props: {
                     }}
                   >
                     <SessionTurn
-                      sessionID={sessionID() ?? ""}
+                      sessionID={props.sessionID}
                       messageID={message.id}
                       lastUserMessageID={props.lastUserMessageID}
+                      stepsExpanded={props.expanded[message.id] ?? false}
+                      onStepsExpandedToggle={() => props.onToggleExpanded(message.id)}
                       classes={{
                         root: "min-w-0 w-full relative",
                         content: "flex flex-col justify-between !overflow-visible",

packages/app/src/pages/session/session-mobile-tabs.tsx

@@ -1,6 +1,5 @@
 import { Show } from "solid-js"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { useLanguage } from "@/context/language"
 
 export function SessionMobileTabs(props: {
   open: boolean
@@ -9,9 +8,8 @@ export function SessionMobileTabs(props: {
   reviewCount: number
   onSession: () => void
   onChanges: () => void
+  t: (key: string, vars?: Record<string, string | number | boolean>) => string
 }) {
-  const language = useLanguage()
-
   return (
     <Show when={props.open}>
       <Tabs value={props.mobileTab} class="h-auto">
@@ -22,7 +20,7 @@ export function SessionMobileTabs(props: {
             classes={{ button: "w-full" }}
             onClick={props.onSession}
           >
-            {language.t("session.tab.session")}
+            {props.t("session.tab.session")}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="changes"
@@ -31,8 +29,8 @@ export function SessionMobileTabs(props: {
             onClick={props.onChanges}
           >
             {props.hasReview
-              ? language.t("session.review.filesChanged", { count: props.reviewCount })
+              ? props.t("session.review.filesChanged", { count: props.reviewCount })
-              : language.t("session.review.change.other")}
+              : props.t("session.review.change.other")}
           </Tabs.Trigger>
         </Tabs.List>
       </Tabs>

packages/app/src/pages/session/session-prompt-dock.tsx

@@ -1,181 +1,31 @@
-import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
+import { For, Show } from "solid-js"
-import type { PermissionRequest, QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
+import type { QuestionRequest } from "@opencode-ai/sdk/v2"
-import { useParams } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
-import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
+import { BasicTool } from "@opencode-ai/ui/basic-tool"
-import { Icon } from "@opencode-ai/ui/icon"
-import { showToast } from "@opencode-ai/ui/toast"
 import { PromptInput } from "@/components/prompt-input"
 import { QuestionDock } from "@/components/question-dock"
-import { SessionTodoDock } from "@/components/session-todo-dock"
+import { questionSubtitle } from "@/pages/session/session-prompt-helpers"
-import { useGlobalSync } from "@/context/global-sync"
-import { useLanguage } from "@/context/language"
-import { usePrompt } from "@/context/prompt"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
 
 export function SessionPromptDock(props: {
   centered: boolean
+  questionRequest: () => QuestionRequest | undefined
+  permissionRequest: () => { patterns: string[]; permission: string } | undefined
+  blocked: boolean
+  promptReady: boolean
+  handoffPrompt?: string
+  t: (key: string, vars?: Record<string, string | number | boolean>) => string
+  responding: boolean
+  onDecide: (response: "once" | "always" | "reject") => void
   inputRef: (el: HTMLDivElement) => void
   newSessionWorktree: string
   onNewSessionWorktreeReset: () => void
   onSubmit: () => void
   setPromptDockRef: (el: HTMLDivElement) => void
 }) {
-  const params = useParams()
-  const sdk = useSDK()
-  const sync = useSync()
-  const globalSync = useGlobalSync()
-  const prompt = usePrompt()
-  const language = useLanguage()
-
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-  const handoffPrompt = createMemo(() => getSessionHandoff(sessionKey())?.prompt)
-
-  const todos = createMemo((): Todo[] => {
-    const id = params.id
-    if (!id) return []
-    return globalSync.data.session_todo[id] ?? []
-  })
-
-  const questionRequest = createMemo((): QuestionRequest | undefined => {
-    const sessionID = params.id
-    if (!sessionID) return
-    return sync.data.question[sessionID]?.[0]
-  })
-
-  const permissionRequest = createMemo((): PermissionRequest | undefined => {
-    const sessionID = params.id
-    if (!sessionID) return
-    return sync.data.permission[sessionID]?.[0]
-  })
-
-  const blocked = createMemo(() => !!permissionRequest() || !!questionRequest())
-
-  const previewPrompt = () =>
-    prompt
-      .current()
-      .map((part) => {
-        if (part.type === "file") return `[file:${part.path}]`
-        if (part.type === "agent") return `@${part.name}`
-        if (part.type === "image") return `[image:${part.filename}]`
-        return part.content
-      })
-      .join("")
-      .trim()
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    setSessionHandoff(sessionKey(), { prompt: previewPrompt() })
-  })
-
-  const [responding, setResponding] = createSignal(false)
-
-  createEffect(
-    on(
-      () => permissionRequest()?.id,
-      () => setResponding(false),
-      { defer: true },
-    ),
-  )
-
-  const decide = (response: "once" | "always" | "reject") => {
-    const perm = permissionRequest()
-    if (!perm) return
-    if (responding()) return
-
-    setResponding(true)
-    sdk.client.permission
-      .respond({ sessionID: perm.sessionID, permissionID: perm.id, response })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => setResponding(false))
-  }
-
-  const done = createMemo(
-    () => todos().length > 0 && todos().every((todo) => todo.status === "completed" || todo.status === "cancelled"),
-  )
-
-  const [dock, setDock] = createSignal(todos().length > 0)
-  const [closing, setClosing] = createSignal(false)
-  const [opening, setOpening] = createSignal(false)
-  let timer: number | undefined
-  let raf: number | undefined
-
-  const scheduleClose = () => {
-    if (timer) window.clearTimeout(timer)
-    timer = window.setTimeout(() => {
-      setDock(false)
-      setClosing(false)
-      timer = undefined
-    }, 400)
-  }
-
-  createEffect(
-    on(
-      () => [todos().length, done()] as const,
-      ([count, complete], prev) => {
-        if (raf) cancelAnimationFrame(raf)
-        raf = undefined
-
-        if (count === 0) {
-          if (timer) window.clearTimeout(timer)
-          timer = undefined
-          setDock(false)
-          setClosing(false)
-          setOpening(false)
-          return
-        }
-
-        if (!complete) {
-          if (timer) window.clearTimeout(timer)
-          timer = undefined
-          const wasHidden = !dock() || closing()
-          setDock(true)
-          setClosing(false)
-          if (wasHidden) {
-            setOpening(true)
-            raf = requestAnimationFrame(() => {
-              setOpening(false)
-              raf = undefined
-            })
-            return
-          }
-          setOpening(false)
-          return
-        }
-
-        if (prev && prev[1]) {
-          if (closing() && !timer) scheduleClose()
-          return
-        }
-
-        setDock(true)
-        setOpening(false)
-        setClosing(true)
-        scheduleClose()
-      },
-    ),
-  )
-
-  onCleanup(() => {
-    if (!timer) return
-    window.clearTimeout(timer)
-  })
-
-  onCleanup(() => {
-    if (!raf) return
-    cancelAnimationFrame(raf)
-  })
-
   return (
     <div
       ref={props.setPromptDockRef}
-      data-component="session-prompt-dock"
+      class="absolute inset-x-0 bottom-0 pt-12 pb-4 flex flex-col justify-center items-center z-50 bg-gradient-to-t from-background-stronger via-background-stronger to-transparent pointer-events-none"
-      class="shrink-0 w-full pb-4 flex flex-col justify-center items-center bg-background-stronger pointer-events-none"
     >
       <div
         classList={{
@@ -183,124 +33,101 @@ export function SessionPromptDock(props: {
           "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
         }}
       >
-        <Show when={questionRequest()} keyed>
+        <Show when={props.questionRequest()} keyed>
           {(req) => {
+            const subtitle = questionSubtitle(req.questions.length, (key) => props.t(key))
             return (
-              <div>
+              <div data-component="tool-part-wrapper" data-question="true" class="mb-3">
+                <BasicTool
+                  icon="bubble-5"
+                  locked
+                  defaultOpen
+                  trigger={{
+                    title: props.t("ui.tool.questions"),
+                    subtitle,
+                  }}
+                />
                 <QuestionDock request={req} />
               </div>
             )
           }}
         </Show>
 
-        <Show when={permissionRequest()} keyed>
+        <Show when={props.permissionRequest()} keyed>
-          {(perm) => {
+          {(perm) => (
-            const toolDescription = () => {
+            <div data-component="tool-part-wrapper" data-permission="true" class="mb-3">
-              const key = `settings.permissions.tool.${perm.permission}.description`
+              <BasicTool
-              const value = language.t(key as Parameters<typeof language.t>[0])
+                icon="checklist"
-              if (value === key) return ""
+                locked
-              return value
+                defaultOpen
-            }
+                trigger={{
-
+                  title: props.t("notification.permission.title"),
-            return (
+                  subtitle:
-              <div>
+                    perm.permission === "doom_loop"
-                <DockPrompt
+                      ? props.t("settings.permissions.tool.doom_loop.title")
-                  kind="permission"
+                      : perm.permission,
-                  header={
+                }}
-                    <div data-slot="permission-row" data-variant="header">
+              >
-                      <span data-slot="permission-icon">
+                <Show when={perm.patterns.length > 0}>
-                        <Icon name="warning" size="normal" />
+                  <div class="flex flex-col gap-1 py-2 px-3 max-h-40 overflow-y-auto no-scrollbar">
-                      </span>
+                    <For each={perm.patterns}>
-                      <div data-slot="permission-header-title">{language.t("notification.permission.title")}</div>
+                      {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
-                    </div>
+                    </For>
-                  }
+                  </div>
-                  footer={
+                </Show>
-                    <>
+                <Show when={perm.permission === "doom_loop"}>
-                      <div />
+                  <div class="text-12-regular text-text-weak pb-2 px-3">
-                      <div data-slot="permission-footer-actions">
+                    {props.t("settings.permissions.tool.doom_loop.description")}
-                        <Button variant="ghost" size="normal" onClick={() => decide("reject")} disabled={responding()}>
+                  </div>
-                          {language.t("ui.permission.deny")}
+                </Show>
-                        </Button>
+              </BasicTool>
-                        <Button
+              <div data-component="permission-prompt">
-                          variant="secondary"
+                <div data-slot="permission-actions">
-                          size="normal"
+                  <Button
-                          onClick={() => decide("always")}
+                    variant="ghost"
-                          disabled={responding()}
+                    size="small"
-                        >
+                    onClick={() => props.onDecide("reject")}
-                          {language.t("ui.permission.allowAlways")}
+                    disabled={props.responding}
-                        </Button>
+                  >
-                        <Button variant="primary" size="normal" onClick={() => decide("once")} disabled={responding()}>
+                    {props.t("ui.permission.deny")}
-                          {language.t("ui.permission.allowOnce")}
+                  </Button>
-                        </Button>
+                  <Button
-                      </div>
+                    variant="secondary"
-                    </>
+                    size="small"
-                  }
+                    onClick={() => props.onDecide("always")}
-                >
+                    disabled={props.responding}
-                  <Show when={toolDescription()}>
+                  >
-                    <div data-slot="permission-row">
+                    {props.t("ui.permission.allowAlways")}
-                      <span data-slot="permission-spacer" aria-hidden="true" />
+                  </Button>
-                      <div data-slot="permission-hint">{toolDescription()}</div>
+                  <Button
-                    </div>
+                    variant="primary"
-                  </Show>
+                    size="small"
-
+                    onClick={() => props.onDecide("once")}
-                  <Show when={perm.patterns.length > 0}>
+                    disabled={props.responding}
-                    <div data-slot="permission-row">
+                  >
-                      <span data-slot="permission-spacer" aria-hidden="true" />
+                    {props.t("ui.permission.allowOnce")}
-                      <div data-slot="permission-patterns">
+                  </Button>
-                        <For each={perm.patterns}>
+                </div>
-                          {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
-                        </For>
-                      </div>
-                    </div>
-                  </Show>
-                </DockPrompt>
               </div>
-            )
+            </div>
-          }}
+          )}
         </Show>
 
-        <Show when={!blocked()}>
+        <Show when={!props.blocked}>
           <Show
-            when={prompt.ready()}
+            when={props.promptReady}
             fallback={
               <div class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak whitespace-pre-wrap pointer-events-none">
-                {handoffPrompt() || language.t("prompt.loading")}
+                {props.handoffPrompt || props.t("prompt.loading")}
               </div>
             }
           >
-            <Show when={dock()}>
+            <PromptInput
-              <div
+              ref={props.inputRef}
-                classList={{
+              newSessionWorktree={props.newSessionWorktree}
-                  "transition-[max-height,opacity,transform] duration-[400ms] ease-out overflow-hidden": true,
+              onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
-                  "max-h-[320px]": !closing(),
+              onSubmit={props.onSubmit}
-                  "max-h-0 pointer-events-none": closing(),
+            />
-                  "opacity-0 translate-y-9": closing() || opening(),
-                  "opacity-100 translate-y-0": !closing() && !opening(),
-                }}
-              >
-                <SessionTodoDock
-                  todos={todos()}
-                  title={language.t("session.todo.title")}
-                  collapseLabel={language.t("session.todo.collapse")}
-                  expandLabel={language.t("session.todo.expand")}
-                />
-              </div>
-            </Show>
-            <div
-              classList={{
-                "relative z-10": true,
-                "transition-[margin] duration-[400ms] ease-out": true,
-                "-mt-9": dock() && !closing(),
-                "mt-0": !dock() || closing(),
-              }}
-            >
-              <PromptInput
-                ref={props.inputRef}
-                newSessionWorktree={props.newSessionWorktree}
-                onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
-                onSubmit={props.onSubmit}
-              />
-            </div>
           </Show>
         </Show>
       </div>

packages/app/src/pages/session/session-side-panel.tsx

@@ -1,269 +1,156 @@
-import { For, Match, Show, Switch, createEffect, createMemo, onCleanup, type JSX } from "solid-js"
+import { For, Match, Show, Switch, createMemo, onCleanup, type JSX, type ValidComponent } from "solid-js"
-import { createStore } from "solid-js/store"
-import { createMediaQuery } from "@solid-primitives/media"
-import { useParams } from "@solidjs/router"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Mark } from "@opencode-ai/ui/logo"
-import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
-import type { DragEvent } from "@thisbeyond/solid-dnd"
-import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-
 import FileTree from "@/components/file-tree"
 import { SessionContextUsage } from "@/components/session-context-usage"
-import { DialogSelectFile } from "@/components/dialog-select-file"
 import { SessionContextTab, SortableTab, FileVisual } from "@/components/session"
+import { DialogSelectFile } from "@/components/dialog-select-file"
+import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import { FileTabContent } from "@/pages/session/file-tabs"
+import { StickyAddButton } from "@/pages/session/review-tab"
+import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
+import { ConstrainDragYAxis } from "@/utils/solid-dnd"
+import type { DragEvent } from "@thisbeyond/solid-dnd"
+import { useComments } from "@/context/comments"
 import { useCommand } from "@/context/command"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useFile, type SelectedLineRange } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useSync } from "@/context/sync"
-import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import type { Message, UserMessage } from "@opencode-ai/sdk/v2/client"
-import { FileTabContent } from "@/pages/session/file-tabs"
+
-import { getTabReorderIndex } from "@/pages/session/helpers"
+type SessionSidePanelViewModel = {
-import { StickyAddButton } from "@/pages/session/review-tab"
+  messages: () => Message[]
-import { setSessionHandoff } from "@/pages/session/handoff"
+  visibleUserMessages: () => UserMessage[]
+  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
+}
 
 export function SessionSidePanel(props: {
+  open: boolean
+  reviewOpen: boolean
+  language: ReturnType<typeof useLanguage>
+  layout: ReturnType<typeof useLayout>
+  command: ReturnType<typeof useCommand>
+  dialog: ReturnType<typeof useDialog>
+  file: ReturnType<typeof useFile>
+  comments: ReturnType<typeof useComments>
+  hasReview: boolean
+  reviewCount: number
+  reviewTab: boolean
+  contextOpen: () => boolean
+  openedTabs: () => string[]
+  activeTab: () => string
+  activeFileTab: () => string | undefined
+  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
+  openTab: (value: string) => void
+  showAllFiles: () => void
   reviewPanel: () => JSX.Element
+  vm: SessionSidePanelViewModel
+  handoffFiles: () => Record<string, SelectedLineRange | null> | undefined
+  codeComponent: NonNullable<ValidComponent>
+  addCommentToContext: (input: {
+    file: string
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+    origin?: "review" | "file"
+  }) => void
+  activeDraggable: () => string | undefined
+  onDragStart: (event: unknown) => void
+  onDragEnd: () => void
+  onDragOver: (event: DragEvent) => void
+  fileTreeTab: () => "changes" | "all"
+  setFileTreeTabValue: (value: string) => void
+  diffsReady: boolean
+  diffFiles: string[]
+  kinds: Map<string, "add" | "del" | "mix">
   activeDiff?: string
   focusReviewDiff: (path: string) => void
 }) {
-  const params = useParams()
+  const openedTabs = createMemo(() => props.openedTabs())
-  const layout = useLayout()
-  const sync = useSync()
-  const file = useFile()
-  const language = useLanguage()
-  const command = useCommand()
-  const dialog = useDialog()
-
-  const isDesktop = createMediaQuery("(min-width: 768px)")
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
-  const tabs = createMemo(() => layout.tabs(sessionKey))
-  const view = createMemo(() => layout.view(sessionKey))
-
-  const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
-  const open = createMemo(() => isDesktop() && (view().reviewPanel.opened() || layout.fileTree.opened()))
-  const reviewTab = createMemo(() => isDesktop() && !layout.fileTree.opened())
-
-  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
-  const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
-  const reviewCount = createMemo(() => Math.max(info()?.summary?.files ?? 0, diffs().length))
-  const hasReview = createMemo(() => reviewCount() > 0)
-  const diffsReady = createMemo(() => {
-    const id = params.id
-    if (!id) return true
-    if (!hasReview()) return true
-    return sync.data.session_diff[id] !== undefined
-  })
-
-  const diffFiles = createMemo(() => diffs().map((d) => d.file))
-  const kinds = createMemo(() => {
-    const merge = (a: "add" | "del" | "mix" | undefined, b: "add" | "del" | "mix") => {
-      if (!a) return b
-      if (a === b) return a
-      return "mix" as const
-    }
-
-    const normalize = (p: string) => p.replaceAll("\\\\", "/").replace(/\/+$/, "")
-
-    const out = new Map<string, "add" | "del" | "mix">()
-    for (const diff of diffs()) {
-      const file = normalize(diff.file)
-      const kind = diff.status === "added" ? "add" : diff.status === "deleted" ? "del" : "mix"
-
-      out.set(file, kind)
-
-      const parts = file.split("/")
-      for (const [idx] of parts.slice(0, -1).entries()) {
-        const dir = parts.slice(0, idx + 1).join("/")
-        if (!dir) continue
-        out.set(dir, merge(out.get(dir), kind))
-      }
-    }
-    return out
-  })
-
-  const normalizeTab = (tab: string) => {
-    if (!tab.startsWith("file://")) return tab
-    return file.tab(tab)
-  }
-
-  const openReviewPanel = () => {
-    if (!view().reviewPanel.opened()) view().reviewPanel.open()
-  }
-
-  const openTab = (value: string) => {
-    const next = normalizeTab(value)
-    tabs().open(next)
-
-    const path = file.pathFromTab(next)
-    if (!path) return
-    file.load(path)
-    openReviewPanel()
-  }
-
-  const contextOpen = createMemo(() => tabs().active() === "context" || tabs().all().includes("context"))
-  const openedTabs = createMemo(() =>
-    tabs()
-      .all()
-      .filter((tab) => tab !== "context" && tab !== "review"),
-  )
-
-  const activeTab = createMemo(() => {
-    const active = tabs().active()
-    if (active === "context") return "context"
-    if (active === "review" && reviewTab()) return "review"
-    if (active && file.pathFromTab(active)) return normalizeTab(active)
-
-    const first = openedTabs()[0]
-    if (first) return first
-    if (contextOpen()) return "context"
-    if (reviewTab() && hasReview()) return "review"
-    return "empty"
-  })
-
-  const activeFileTab = createMemo(() => {
-    const active = activeTab()
-    if (!openedTabs().includes(active)) return
-    return active
-  })
-
-  const fileTreeTab = () => layout.fileTree.tab()
-
-  const setFileTreeTabValue = (value: string) => {
-    if (value !== "changes" && value !== "all") return
-    layout.fileTree.setTab(value)
-  }
-
-  const showAllFiles = () => {
-    if (fileTreeTab() !== "changes") return
-    layout.fileTree.setTab("all")
-  }
-
-  const [store, setStore] = createStore({
-    activeDraggable: undefined as string | undefined,
-  })
-
-  const handleDragStart = (event: unknown) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    setStore("activeDraggable", id)
-  }
-
-  const handleDragOver = (event: DragEvent) => {
-    const { draggable, droppable } = event
-    if (!draggable || !droppable) return
-
-    const currentTabs = tabs().all()
-    const toIndex = getTabReorderIndex(currentTabs, draggable.id.toString(), droppable.id.toString())
-    if (toIndex === undefined) return
-    tabs().move(draggable.id.toString(), toIndex)
-  }
-
-  const handleDragEnd = () => {
-    setStore("activeDraggable", undefined)
-  }
-
-  createEffect(() => {
-    if (!file.ready()) return
-
-    setSessionHandoff(sessionKey(), {
-      files: tabs()
-        .all()
-        .reduce<Record<string, SelectedLineRange | null>>((acc, tab) => {
-          const path = file.pathFromTab(tab)
-          if (!path) return acc
-
-          const selected = file.selectedLines(path)
-          acc[path] =
-            selected && typeof selected === "object" && "start" in selected && "end" in selected
-              ? (selected as SelectedLineRange)
-              : null
-
-          return acc
-        }, {}),
-    })
-  })
 
   return (
-    <Show when={open()}>
+    <Show when={props.open}>
       <aside
         id="review-panel"
-        aria-label={language.t("session.panel.reviewAndFiles")}
+        aria-label={props.language.t("session.panel.reviewAndFiles")}
         class="relative min-w-0 h-full border-l border-border-weak-base flex"
         classList={{
-          "flex-1": reviewOpen(),
+          "flex-1": props.reviewOpen,
-          "shrink-0": !reviewOpen(),
+          "shrink-0": !props.reviewOpen,
         }}
-        style={{ width: reviewOpen() ? undefined : `${layout.fileTree.width()}px` }}
+        style={{ width: props.reviewOpen ? undefined : `${props.layout.fileTree.width()}px` }}
       >
-        <Show when={reviewOpen()}>
+        <Show when={props.reviewOpen}>
           <div class="flex-1 min-w-0 h-full">
             <Show
-              when={layout.fileTree.opened() && fileTreeTab() === "changes"}
+              when={props.layout.fileTree.opened() && props.fileTreeTab() === "changes"}
               fallback={
                 <DragDropProvider
-                  onDragStart={handleDragStart}
+                  onDragStart={props.onDragStart}
-                  onDragEnd={handleDragEnd}
+                  onDragEnd={props.onDragEnd}
-                  onDragOver={handleDragOver}
+                  onDragOver={props.onDragOver}
                   collisionDetector={closestCenter}
                 >
                   <DragDropSensors />
                   <ConstrainDragYAxis />
-                  <Tabs value={activeTab()} onChange={openTab}>
+                  <Tabs value={props.activeTab()} onChange={props.openTab}>
                     <div class="sticky top-0 shrink-0 flex">
                       <Tabs.List
                         ref={(el: HTMLDivElement) => {
-                          const stop = createFileTabListSync({ el, contextOpen })
+                          const stop = createFileTabListSync({ el, contextOpen: props.contextOpen })
                           onCleanup(stop)
                         }}
                       >
-                        <Show when={reviewTab()}>
+                        <Show when={props.reviewTab}>
                           <Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
                             <div class="flex items-center gap-1.5">
-                              <div>{language.t("session.tab.review")}</div>
+                              <div>{props.language.t("session.tab.review")}</div>
-                              <Show when={hasReview()}>
+                              <Show when={props.hasReview}>
                                 <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
-                                  {reviewCount()}
+                                  {props.reviewCount}
                                 </div>
                               </Show>
                             </div>
                           </Tabs.Trigger>
                         </Show>
-                        <Show when={contextOpen()}>
+                        <Show when={props.contextOpen()}>
                           <Tabs.Trigger
                             value="context"
                             closeButton={
-                              <Tooltip value={language.t("common.closeTab")} placement="bottom">
+                              <Tooltip value={props.language.t("common.closeTab")} placement="bottom">
                                 <IconButton
                                   icon="close-small"
                                   variant="ghost"
                                   class="h-5 w-5"
-                                  onClick={() => tabs().close("context")}
+                                  onClick={() => props.tabs().close("context")}
-                                  aria-label={language.t("common.closeTab")}
+                                  aria-label={props.language.t("common.closeTab")}
                                 />
                               </Tooltip>
                             }
                             hideCloseButton
-                            onMiddleClick={() => tabs().close("context")}
+                            onMiddleClick={() => props.tabs().close("context")}
                           >
                             <div class="flex items-center gap-2">
                               <SessionContextUsage variant="indicator" />
-                              <div>{language.t("session.tab.context")}</div>
+                              <div>{props.language.t("session.tab.context")}</div>
                             </div>
                           </Tabs.Trigger>
                         </Show>
                         <SortableProvider ids={openedTabs()}>
-                          <For each={openedTabs()}>{(tab) => <SortableTab tab={tab} onTabClose={tabs().close} />}</For>
+                          <For each={openedTabs()}>
+                            {(tab) => <SortableTab tab={tab} onTabClose={props.tabs().close} />}
+                          </For>
                         </SortableProvider>
                         <StickyAddButton>
                           <TooltipKeybind
-                            title={language.t("command.file.open")}
+                            title={props.language.t("command.file.open")}
-                            keybind={command.keybind("file.open")}
+                            keybind={props.command.keybind("file.open")}
                             class="flex items-center"
                           >
                             <IconButton
@@ -271,52 +158,72 @@ export function SessionSidePanel(props: {
                               variant="ghost"
                               iconSize="large"
                               onClick={() =>
-                                dialog.show(() => <DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
+                                props.dialog.show(() => (
+                                  <DialogSelectFile mode="files" onOpenFile={props.showAllFiles} />
+                                ))
                               }
-                              aria-label={language.t("command.file.open")}
+                              aria-label={props.language.t("command.file.open")}
                             />
                           </TooltipKeybind>
                         </StickyAddButton>
                       </Tabs.List>
                     </div>
 
-                    <Show when={reviewTab()}>
+                    <Show when={props.reviewTab}>
                       <Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
-                        <Show when={activeTab() === "review"}>{props.reviewPanel()}</Show>
+                        <Show when={props.activeTab() === "review"}>{props.reviewPanel()}</Show>
                       </Tabs.Content>
                     </Show>
 
                     <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
-                      <Show when={activeTab() === "empty"}>
+                      <Show when={props.activeTab() === "empty"}>
                         <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
                           <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
                             <Mark class="w-14 opacity-10" />
                             <div class="text-14-regular text-text-weak max-w-56">
-                              {language.t("session.files.selectToOpen")}
+                              {props.language.t("session.files.selectToOpen")}
                             </div>
                           </div>
                         </div>
                       </Show>
                     </Tabs.Content>
 
-                    <Show when={contextOpen()}>
+                    <Show when={props.contextOpen()}>
                       <Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
-                        <Show when={activeTab() === "context"}>
+                        <Show when={props.activeTab() === "context"}>
                           <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
-                            <SessionContextTab />
+                            <SessionContextTab
+                              messages={props.vm.messages}
+                              visibleUserMessages={props.vm.visibleUserMessages}
+                              view={props.vm.view}
+                              info={props.vm.info}
+                            />
                           </div>
                         </Show>
                       </Tabs.Content>
                     </Show>
 
-                    <Show when={activeFileTab()} keyed>
+                    <Show when={props.activeFileTab()} keyed>
-                      {(tab) => <FileTabContent tab={tab} />}
+                      {(tab) => (
+                        <FileTabContent
+                          tab={tab}
+                          activeTab={props.activeTab}
+                          tabs={props.tabs}
+                          view={props.vm.view}
+                          handoffFiles={props.handoffFiles}
+                          file={props.file}
+                          comments={props.comments}
+                          language={props.language}
+                          codeComponent={props.codeComponent}
+                          addCommentToContext={props.addCommentToContext}
+                        />
+                      )}
                     </Show>
                   </Tabs>
                   <DragOverlay>
-                    <Show when={store.activeDraggable} keyed>
+                    <Show when={props.activeDraggable()}>
                       {(tab) => {
-                        const path = createMemo(() => file.pathFromTab(tab))
+                        const path = createMemo(() => props.file.pathFromTab(tab()))
                         return (
                           <div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
                             <Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
@@ -333,44 +240,50 @@ export function SessionSidePanel(props: {
           </div>
         </Show>
 
-        <Show when={layout.fileTree.opened()}>
+        <Show when={props.layout.fileTree.opened()}>
-          <div id="file-tree-panel" class="relative shrink-0 h-full" style={{ width: `${layout.fileTree.width()}px` }}>
+          <div
+            id="file-tree-panel"
+            class="relative shrink-0 h-full"
+            style={{ width: `${props.layout.fileTree.width()}px` }}
+          >
             <div
               class="h-full flex flex-col overflow-hidden group/filetree"
-              classList={{ "border-l border-border-weak-base": reviewOpen() }}
+              classList={{ "border-l border-border-weak-base": props.reviewOpen }}
             >
               <Tabs
                 variant="pill"
-                value={fileTreeTab()}
+                value={props.fileTreeTab()}
-                onChange={setFileTreeTabValue}
+                onChange={props.setFileTreeTabValue}
                 class="h-full"
                 data-scope="filetree"
               >
                 <Tabs.List>
                   <Tabs.Trigger value="changes" class="flex-1" classes={{ button: "w-full" }}>
-                    {reviewCount()}{" "}
+                    {props.reviewCount}{" "}
-                    {language.t(reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other")}
+                    {props.language.t(
+                      props.reviewCount === 1 ? "session.review.change.one" : "session.review.change.other",
+                    )}
                   </Tabs.Trigger>
                   <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
-                    {language.t("session.files.all")}
+                    {props.language.t("session.files.all")}
                   </Tabs.Trigger>
                 </Tabs.List>
                 <Tabs.Content value="changes" class="bg-background-base px-3 py-0">
                   <Switch>
-                    <Match when={hasReview()}>
+                    <Match when={props.hasReview}>
                       <Show
-                        when={diffsReady()}
+                        when={props.diffsReady}
                         fallback={
                           <div class="px-2 py-2 text-12-regular text-text-weak">
-                            {language.t("common.loading")}
+                            {props.language.t("common.loading")}
-                            {language.t("common.loading.ellipsis")}
+                            {props.language.t("common.loading.ellipsis")}
                           </div>
                         }
                       >
                         <FileTree
                           path=""
-                          allowed={diffFiles()}
+                          allowed={props.diffFiles}
-                          kinds={kinds()}
+                          kinds={props.kinds}
                           draggable={false}
                           active={props.activeDiff}
                           onFileClick={(node) => props.focusReviewDiff(node.path)}
@@ -379,7 +292,7 @@ export function SessionSidePanel(props: {
                     </Match>
                     <Match when={true}>
                       <div class="mt-8 text-center text-12-regular text-text-weak">
-                        {language.t("session.review.noChanges")}
+                        {props.language.t("session.review.noChanges")}
                       </div>
                     </Match>
                   </Switch>
@@ -387,9 +300,9 @@ export function SessionSidePanel(props: {
                 <Tabs.Content value="all" class="bg-background-base px-3 py-0">
                   <FileTree
                     path=""
-                    modified={diffFiles()}
+                    modified={props.diffFiles}
-                    kinds={kinds()}
+                    kinds={props.kinds}
-                    onFileClick={(node) => openTab(file.tab(node.path))}
+                    onFileClick={(node) => props.openTab(props.file.tab(node.path))}
                   />
                 </Tabs.Content>
               </Tabs>
@@ -397,12 +310,12 @@ export function SessionSidePanel(props: {
             <ResizeHandle
               direction="horizontal"
               edge="start"
-              size={layout.fileTree.width()}
+              size={props.layout.fileTree.width()}
               min={200}
               max={480}
               collapseThreshold={160}
-              onResize={layout.fileTree.resize}
+              onResize={props.layout.fileTree.resize}
-              onCollapse={layout.fileTree.close}
+              onCollapse={props.layout.fileTree.close}
             />
           </div>
         </Show>

packages/app/src/pages/session/terminal-panel.tsx

@@ -1,161 +1,61 @@
-import { For, Show, createEffect, createMemo, on } from "solid-js"
+import { For, Show, createMemo } from "solid-js"
-import { createStore } from "solid-js/store"
-import { createMediaQuery } from "@solid-primitives/media"
-import { useParams } from "@solidjs/router"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
-import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
+import { ConstrainDragYAxis } from "@/utils/solid-dnd"
-
 import { SortableTerminalTab } from "@/components/session"
 import { Terminal } from "@/components/terminal"
-import { useCommand } from "@/context/command"
+import { useTerminal } from "@/context/terminal"
 import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
+import { useCommand } from "@/context/command"
-import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { terminalTabLabel } from "@/pages/session/terminal-label"
-import { focusTerminalById } from "@/pages/session/helpers"
-import { getTerminalHandoff, setTerminalHandoff } from "@/pages/session/handoff"
 
-export function TerminalPanel() {
+export function TerminalPanel(props: {
-  const params = useParams()
+  open: boolean
-  const layout = useLayout()
+  height: number
-  const terminal = useTerminal()
+  resize: (value: number) => void
-  const language = useLanguage()
+  close: () => void
-  const command = useCommand()
+  terminal: ReturnType<typeof useTerminal>
-
+  language: ReturnType<typeof useLanguage>
-  const isDesktop = createMediaQuery("(min-width: 768px)")
+  command: ReturnType<typeof useCommand>
-  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  handoff: () => string[]
-  const view = createMemo(() => layout.view(sessionKey))
+  activeTerminalDraggable: () => string | undefined
-
+  handleTerminalDragStart: (event: unknown) => void
-  const opened = createMemo(() => view().terminal.opened())
+  handleTerminalDragOver: (event: DragEvent) => void
-  const open = createMemo(() => isDesktop() && opened())
+  handleTerminalDragEnd: () => void
-  const height = createMemo(() => layout.terminal.height())
+  onCloseTab: () => void
-  const close = () => view().terminal.close()
+}) {
-
+  const all = createMemo(() => props.terminal.all())
-  const [store, setStore] = createStore({
-    autoCreated: false,
-    activeDraggable: undefined as string | undefined,
-  })
-
-  createEffect(() => {
-    if (!opened()) {
-      setStore("autoCreated", false)
-      return
-    }
-
-    if (!terminal.ready() || terminal.all().length !== 0 || store.autoCreated) return
-    terminal.new()
-    setStore("autoCreated", true)
-  })
-
-  createEffect(
-    on(
-      () => terminal.all().length,
-      (count, prevCount) => {
-        if (prevCount !== undefined && prevCount > 0 && count === 0) {
-          if (opened()) view().terminal.toggle()
-        }
-      },
-    ),
-  )
-
-  createEffect(
-    on(
-      () => terminal.active(),
-      (activeId) => {
-        if (!activeId || !opened()) return
-        if (document.activeElement instanceof HTMLElement) {
-          document.activeElement.blur()
-        }
-        focusTerminalById(activeId)
-      },
-    ),
-  )
-
-  createEffect(() => {
-    const dir = params.dir
-    if (!dir) return
-    if (!terminal.ready()) return
-    language.locale()
-
-    setTerminalHandoff(
-      dir,
-      terminal.all().map((pty) =>
-        terminalTabLabel({
-          title: pty.title,
-          titleNumber: pty.titleNumber,
-          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
-        }),
-      ),
-    )
-  })
-
-  const handoff = createMemo(() => {
-    const dir = params.dir
-    if (!dir) return []
-    return getTerminalHandoff(dir) ?? []
-  })
-
-  const all = createMemo(() => terminal.all())
   const ids = createMemo(() => all().map((pty) => pty.id))
   const byId = createMemo(() => new Map(all().map((pty) => [pty.id, pty])))
 
-  const handleTerminalDragStart = (event: unknown) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    setStore("activeDraggable", id)
-  }
-
-  const handleTerminalDragOver = (event: DragEvent) => {
-    const { draggable, droppable } = event
-    if (!draggable || !droppable) return
-
-    const terminals = terminal.all()
-    const fromIndex = terminals.findIndex((t: LocalPTY) => t.id === draggable.id.toString())
-    const toIndex = terminals.findIndex((t: LocalPTY) => t.id === droppable.id.toString())
-    if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
-      terminal.move(draggable.id.toString(), toIndex)
-    }
-  }
-
-  const handleTerminalDragEnd = () => {
-    setStore("activeDraggable", undefined)
-
-    const activeId = terminal.active()
-    if (!activeId) return
-    setTimeout(() => {
-      focusTerminalById(activeId)
-    }, 0)
-  }
-
   return (
-    <Show when={open()}>
+    <Show when={props.open}>
       <div
         id="terminal-panel"
         role="region"
-        aria-label={language.t("terminal.title")}
+        aria-label={props.language.t("terminal.title")}
         class="relative w-full flex flex-col shrink-0 border-t border-border-weak-base"
-        style={{ height: `${height()}px` }}
+        style={{ height: `${props.height}px` }}
       >
         <ResizeHandle
           direction="vertical"
-          size={height()}
+          size={props.height}
           min={100}
           max={typeof window === "undefined" ? 1000 : window.innerHeight * 0.6}
           collapseThreshold={50}
-          onResize={layout.terminal.resize}
+          onResize={props.resize}
-          onCollapse={close}
+          onCollapse={props.close}
         />
         <Show
-          when={terminal.ready()}
+          when={props.terminal.ready()}
           fallback={
             <div class="flex flex-col h-full pointer-events-none">
               <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weak-base bg-background-stronger overflow-hidden">
-                <For each={handoff()}>
+                <For each={props.handoff()}>
                   {(title) => (
                     <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
                       {title}
@@ -164,18 +64,20 @@ export function TerminalPanel() {
                 </For>
                 <div class="flex-1" />
                 <div class="text-text-weak pr-2">
-                  {language.t("common.loading")}
+                  {props.language.t("common.loading")}
-                  {language.t("common.loading.ellipsis")}
+                  {props.language.t("common.loading.ellipsis")}
                 </div>
               </div>
-              <div class="flex-1 flex items-center justify-center text-text-weak">{language.t("terminal.loading")}</div>
+              <div class="flex-1 flex items-center justify-center text-text-weak">
+                {props.language.t("terminal.loading")}
+              </div>
             </div>
           }
         >
           <DragDropProvider
-            onDragStart={handleTerminalDragStart}
+            onDragStart={props.handleTerminalDragStart}
-            onDragEnd={handleTerminalDragEnd}
+            onDragEnd={props.handleTerminalDragEnd}
-            onDragOver={handleTerminalDragOver}
+            onDragOver={props.handleTerminalDragOver}
             collisionDetector={closestCenter}
           >
             <DragDropSensors />
@@ -183,26 +85,36 @@ export function TerminalPanel() {
             <div class="flex flex-col h-full">
               <Tabs
                 variant="alt"
-                value={terminal.active()}
+                value={props.terminal.active()}
-                onChange={(id) => terminal.open(id)}
+                onChange={(id) => props.terminal.open(id)}
                 class="!h-auto !flex-none"
               >
                 <Tabs.List class="h-10">
                   <SortableProvider ids={ids()}>
-                    <For each={all()}>{(pty) => <SortableTerminalTab terminal={pty} onClose={close} />}</For>
+                    <For each={all()}>
+                      {(pty) => (
+                        <SortableTerminalTab
+                          terminal={pty}
+                          onClose={() => {
+                            props.close()
+                            props.onCloseTab()
+                          }}
+                        />
+                      )}
+                    </For>
                   </SortableProvider>
                   <div class="h-full flex items-center justify-center">
                     <TooltipKeybind
-                      title={language.t("command.terminal.new")}
+                      title={props.language.t("command.terminal.new")}
-                      keybind={command.keybind("terminal.new")}
+                      keybind={props.command.keybind("terminal.new")}
                       class="flex items-center"
                     >
                       <IconButton
                         icon="plus-small"
                         variant="ghost"
                         iconSize="large"
-                        onClick={terminal.new}
+                        onClick={props.terminal.new}
-                        aria-label={language.t("command.terminal.new")}
+                        aria-label={props.language.t("command.terminal.new")}
                       />
                     </TooltipKeybind>
                   </div>
@@ -215,11 +127,15 @@ export function TerminalPanel() {
                       id={`terminal-wrapper-${pty.id}`}
                       class="absolute inset-0"
                       style={{
-                        display: terminal.active() === pty.id ? "block" : "none",
+                        display: props.terminal.active() === pty.id ? "block" : "none",
                       }}
                     >
                       <Show when={pty.id} keyed>
-                        <Terminal pty={pty} onCleanup={terminal.update} onConnectError={() => terminal.clone(pty.id)} />
+                        <Terminal
+                          pty={pty}
+                          onCleanup={props.terminal.update}
+                          onConnectError={() => props.terminal.clone(pty.id)}
+                        />
                       </Show>
                     </div>
                   )}
@@ -227,20 +143,25 @@ export function TerminalPanel() {
               </div>
             </div>
             <DragOverlay>
-              <Show when={store.activeDraggable}>
+              <Show when={props.activeTerminalDraggable()}>
-                {(draggedId) => (
+                {(draggedId) => {
-                  <Show when={byId().get(draggedId())}>
+                  return (
-                    {(t) => (
+                    <Show when={byId().get(draggedId())}>
-                      <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
+                      {(t) => (
-                        {terminalTabLabel({
+                        <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
-                          title: t().title,
+                          {terminalTabLabel({
-                          titleNumber: t().titleNumber,
+                            title: t().title,
-                          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+                            titleNumber: t().titleNumber,
-                        })}
+                            t: props.language.t as (
-                      </div>
+                              key: string,
-                    )}
+                              vars?: Record<string, string | number | boolean>,
-                  </Show>
+                            ) => string,
-                )}
+                          })}
+                        </div>
+                      )}
+                    </Show>
+                  )
+                }}
               </Show>
             </DragOverlay>
           </DragDropProvider>

packages/app/src/pages/session/use-session-commands.tsx

@@ -22,29 +22,11 @@ import { UserMessage } from "@opencode-ai/sdk/v2"
 import { canAddSelectionContext } from "@/pages/session/session-command-helpers"
 
 export type SessionCommandContext = {
-  command: ReturnType<typeof useCommand>
+  activeMessage: () => UserMessage | undefined
-  dialog: ReturnType<typeof useDialog>
-  file: ReturnType<typeof useFile>
-  language: ReturnType<typeof useLanguage>
-  local: ReturnType<typeof useLocal>
-  permission: ReturnType<typeof usePermission>
-  prompt: ReturnType<typeof usePrompt>
-  sdk: ReturnType<typeof useSDK>
-  sync: ReturnType<typeof useSync>
-  terminal: ReturnType<typeof useTerminal>
-  layout: ReturnType<typeof useLayout>
-  params: ReturnType<typeof useParams>
-  navigate: ReturnType<typeof useNavigate>
-  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
-  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
-  info: () => { revert?: { messageID?: string }; share?: { url?: string } } | undefined
-  status: () => { type: string }
-  userMessages: () => UserMessage[]
-  visibleUserMessages: () => UserMessage[]
   showAllFiles: () => void
   navigateMessageByOffset: (offset: number) => void
+  setExpanded: (id: string, fn: (open: boolean | undefined) => boolean) => void
   setActiveMessage: (message: UserMessage | undefined) => void
-  addSelectionToContext: (path: string, selection: FileSelection) => void
   focusInput: () => void
 }
 
@@ -55,45 +37,88 @@ const withCategory = (category: string) => {
   })
 }
 
-export const useSessionCommands = (input: SessionCommandContext) => {
+export const useSessionCommands = (args: SessionCommandContext) => {
-  const sessionCommand = withCategory(input.language.t("command.category.session"))
+  const command = useCommand()
-  const fileCommand = withCategory(input.language.t("command.category.file"))
+  const dialog = useDialog()
-  const contextCommand = withCategory(input.language.t("command.category.context"))
+  const file = useFile()
-  const viewCommand = withCategory(input.language.t("command.category.view"))
+  const language = useLanguage()
-  const terminalCommand = withCategory(input.language.t("command.category.terminal"))
+  const local = useLocal()
-  const modelCommand = withCategory(input.language.t("command.category.model"))
+  const permission = usePermission()
-  const mcpCommand = withCategory(input.language.t("command.category.mcp"))
+  const prompt = usePrompt()
-  const agentCommand = withCategory(input.language.t("command.category.agent"))
+  const sdk = useSDK()
-  const permissionsCommand = withCategory(input.language.t("command.category.permissions"))
+  const sync = useSync()
+  const terminal = useTerminal()
+  const layout = useLayout()
+  const params = useParams()
+  const navigate = useNavigate()
+
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const tabs = createMemo(() => layout.tabs(sessionKey))
+  const view = createMemo(() => layout.view(sessionKey))
+  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
+  const idle = { type: "idle" as const }
+  const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? idle)
+  const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+  const userMessages = createMemo(() => messages().filter((m) => m.role === "user") as UserMessage[])
+  const visibleUserMessages = createMemo(() => {
+    const revert = info()?.revert?.messageID
+    if (!revert) return userMessages()
+    return userMessages().filter((m) => m.id < revert)
+  })
+
+  const selectionPreview = (path: string, selection: FileSelection) => {
+    const content = file.get(path)?.content?.content
+    if (!content) return undefined
+    const start = Math.max(1, Math.min(selection.startLine, selection.endLine))
+    const end = Math.max(selection.startLine, selection.endLine)
+    const lines = content.split("\n").slice(start - 1, end)
+    if (lines.length === 0) return undefined
+    return lines.slice(0, 2).join("\n")
+  }
+
+  const addSelectionToContext = (path: string, selection: FileSelection) => {
+    const preview = selectionPreview(path, selection)
+    prompt.context.add({ type: "file", path, selection, preview })
+  }
+
+  const sessionCommand = withCategory(language.t("command.category.session"))
+  const fileCommand = withCategory(language.t("command.category.file"))
+  const contextCommand = withCategory(language.t("command.category.context"))
+  const viewCommand = withCategory(language.t("command.category.view"))
+  const terminalCommand = withCategory(language.t("command.category.terminal"))
+  const modelCommand = withCategory(language.t("command.category.model"))
+  const mcpCommand = withCategory(language.t("command.category.mcp"))
+  const agentCommand = withCategory(language.t("command.category.agent"))
+  const permissionsCommand = withCategory(language.t("command.category.permissions"))
 
   const sessionCommands = createMemo(() => [
     sessionCommand({
       id: "session.new",
-      title: input.language.t("command.session.new"),
+      title: language.t("command.session.new"),
       keybind: "mod+shift+s",
       slash: "new",
-      onSelect: () => input.navigate(`/${input.params.dir}/session`),
+      onSelect: () => navigate(`/${params.dir}/session`),
     }),
   ])
 
   const fileCommands = createMemo(() => [
     fileCommand({
       id: "file.open",
-      title: input.language.t("command.file.open"),
+      title: language.t("command.file.open"),
-      description: input.language.t("palette.search.placeholder"),
+      description: language.t("palette.search.placeholder"),
       keybind: "mod+p",
       slash: "open",
-      onSelect: () => input.dialog.show(() => <DialogSelectFile onOpenFile={input.showAllFiles} />),
+      onSelect: () => dialog.show(() => <DialogSelectFile onOpenFile={args.showAllFiles} />),
     }),
     fileCommand({
       id: "tab.close",
-      title: input.language.t("command.tab.close"),
+      title: language.t("command.tab.close"),
       keybind: "mod+w",
-      disabled: !input.tabs().active(),
+      disabled: !tabs().active(),
       onSelect: () => {
-        const active = input.tabs().active()
+        const active = tabs().active()
         if (!active) return
-        input.tabs().close(active)
+        tabs().close(active)
       },
     }),
   ])
@@ -101,30 +126,30 @@ export const useSessionCommands = (input: SessionCommandContext) => {
   const contextCommands = createMemo(() => [
     contextCommand({
       id: "context.addSelection",
-      title: input.language.t("command.context.addSelection"),
+      title: language.t("command.context.addSelection"),
-      description: input.language.t("command.context.addSelection.description"),
+      description: language.t("command.context.addSelection.description"),
       keybind: "mod+shift+l",
       disabled: !canAddSelectionContext({
-        active: input.tabs().active(),
+        active: tabs().active(),
-        pathFromTab: input.file.pathFromTab,
+        pathFromTab: file.pathFromTab,
-        selectedLines: input.file.selectedLines,
+        selectedLines: file.selectedLines,
       }),
       onSelect: () => {
-        const active = input.tabs().active()
+        const active = tabs().active()
         if (!active) return
-        const path = input.file.pathFromTab(active)
+        const path = file.pathFromTab(active)
         if (!path) return
 
-        const range = input.file.selectedLines(path) as SelectedLineRange | null | undefined
+        const range = file.selectedLines(path) as SelectedLineRange | null | undefined
         if (!range) {
           showToast({
-            title: input.language.t("toast.context.noLineSelection.title"),
+            title: language.t("toast.context.noLineSelection.title"),
-            description: input.language.t("toast.context.noLineSelection.description"),
+            description: language.t("toast.context.noLineSelection.description"),
           })
           return
         }
 
-        input.addSelectionToContext(path, selectionFromLines(range))
+        addSelectionToContext(path, selectionFromLines(range))
       },
     }),
   ])
@@ -132,37 +157,50 @@ export const useSessionCommands = (input: SessionCommandContext) => {
   const viewCommands = createMemo(() => [
     viewCommand({
       id: "terminal.toggle",
-      title: input.language.t("command.terminal.toggle"),
+      title: language.t("command.terminal.toggle"),
       keybind: "ctrl+`",
       slash: "terminal",
-      onSelect: () => input.view().terminal.toggle(),
+      onSelect: () => view().terminal.toggle(),
     }),
     viewCommand({
       id: "review.toggle",
-      title: input.language.t("command.review.toggle"),
+      title: language.t("command.review.toggle"),
       keybind: "mod+shift+r",
-      onSelect: () => input.view().reviewPanel.toggle(),
+      onSelect: () => view().reviewPanel.toggle(),
     }),
     viewCommand({
       id: "fileTree.toggle",
-      title: input.language.t("command.fileTree.toggle"),
+      title: language.t("command.fileTree.toggle"),
       keybind: "mod+\\",
-      onSelect: () => input.layout.fileTree.toggle(),
+      onSelect: () => layout.fileTree.toggle(),
     }),
     viewCommand({
       id: "input.focus",
-      title: input.language.t("command.input.focus"),
+      title: language.t("command.input.focus"),
       keybind: "ctrl+l",
-      onSelect: () => input.focusInput(),
+      onSelect: () => args.focusInput(),
     }),
     terminalCommand({
       id: "terminal.new",
-      title: input.language.t("command.terminal.new"),
+      title: language.t("command.terminal.new"),
-      description: input.language.t("command.terminal.new.description"),
+      description: language.t("command.terminal.new.description"),
       keybind: "ctrl+alt+t",
       onSelect: () => {
-        if (input.terminal.all().length > 0) input.terminal.new()
+        if (terminal.all().length > 0) terminal.new()
-        input.view().terminal.open()
+        view().terminal.open()
+      },
+    }),
+    viewCommand({
+      id: "steps.toggle",
+      title: language.t("command.steps.toggle"),
+      description: language.t("command.steps.toggle.description"),
+      keybind: "mod+e",
+      slash: "steps",
+      disabled: !params.id,
+      onSelect: () => {
+        const msg = args.activeMessage()
+        if (!msg) return
+        args.setExpanded(msg.id, (open: boolean | undefined) => !open)
       },
     }),
   ])
@@ -170,61 +208,61 @@ export const useSessionCommands = (input: SessionCommandContext) => {
   const messageCommands = createMemo(() => [
     sessionCommand({
       id: "message.previous",
-      title: input.language.t("command.message.previous"),
+      title: language.t("command.message.previous"),
-      description: input.language.t("command.message.previous.description"),
+      description: language.t("command.message.previous.description"),
       keybind: "mod+arrowup",
-      disabled: !input.params.id,
+      disabled: !params.id,
-      onSelect: () => input.navigateMessageByOffset(-1),
+      onSelect: () => args.navigateMessageByOffset(-1),
     }),
     sessionCommand({
       id: "message.next",
-      title: input.language.t("command.message.next"),
+      title: language.t("command.message.next"),
-      description: input.language.t("command.message.next.description"),
+      description: language.t("command.message.next.description"),
       keybind: "mod+arrowdown",
-      disabled: !input.params.id,
+      disabled: !params.id,
-      onSelect: () => input.navigateMessageByOffset(1),
+      onSelect: () => args.navigateMessageByOffset(1),
     }),
   ])
 
   const agentCommands = createMemo(() => [
     modelCommand({
       id: "model.choose",
-      title: input.language.t("command.model.choose"),
+      title: language.t("command.model.choose"),
-      description: input.language.t("command.model.choose.description"),
+      description: language.t("command.model.choose.description"),
       keybind: "mod+'",
       slash: "model",
-      onSelect: () => input.dialog.show(() => <DialogSelectModel />),
+      onSelect: () => dialog.show(() => <DialogSelectModel />),
     }),
     mcpCommand({
       id: "mcp.toggle",
-      title: input.language.t("command.mcp.toggle"),
+      title: language.t("command.mcp.toggle"),
-      description: input.language.t("command.mcp.toggle.description"),
+      description: language.t("command.mcp.toggle.description"),
       keybind: "mod+;",
       slash: "mcp",
-      onSelect: () => input.dialog.show(() => <DialogSelectMcp />),
+      onSelect: () => dialog.show(() => <DialogSelectMcp />),
     }),
     agentCommand({
       id: "agent.cycle",
-      title: input.language.t("command.agent.cycle"),
+      title: language.t("command.agent.cycle"),
-      description: input.language.t("command.agent.cycle.description"),
+      description: language.t("command.agent.cycle.description"),
       keybind: "mod+.",
       slash: "agent",
-      onSelect: () => input.local.agent.move(1),
+      onSelect: () => local.agent.move(1),
     }),
     agentCommand({
       id: "agent.cycle.reverse",
-      title: input.language.t("command.agent.cycle.reverse"),
+      title: language.t("command.agent.cycle.reverse"),
-      description: input.language.t("command.agent.cycle.reverse.description"),
+      description: language.t("command.agent.cycle.reverse.description"),
       keybind: "shift+mod+.",
-      onSelect: () => input.local.agent.move(-1),
+      onSelect: () => local.agent.move(-1),
     }),
     modelCommand({
       id: "model.variant.cycle",
-      title: input.language.t("command.model.variant.cycle"),
+      title: language.t("command.model.variant.cycle"),
-      description: input.language.t("command.model.variant.cycle.description"),
+      description: language.t("command.model.variant.cycle.description"),
       keybind: "shift+mod+d",
       onSelect: () => {
-        input.local.model.variant.cycle()
+        local.model.variant.cycle()
       },
     }),
   ])
@@ -233,22 +271,22 @@ export const useSessionCommands = (input: SessionCommandContext) => {
     permissionsCommand({
       id: "permissions.autoaccept",
       title:
-        input.params.id && input.permission.isAutoAccepting(input.params.id, input.sdk.directory)
+        params.id && permission.isAutoAccepting(params.id, sdk.directory)
-          ? input.language.t("command.permissions.autoaccept.disable")
+          ? language.t("command.permissions.autoaccept.disable")
-          : input.language.t("command.permissions.autoaccept.enable"),
+          : language.t("command.permissions.autoaccept.enable"),
       keybind: "mod+shift+a",
-      disabled: !input.params.id || !input.permission.permissionsEnabled(),
+      disabled: !params.id || !permission.permissionsEnabled(),
       onSelect: () => {
-        const sessionID = input.params.id
+        const sessionID = params.id
         if (!sessionID) return
-        input.permission.toggleAutoAccept(sessionID, input.sdk.directory)
+        permission.toggleAutoAccept(sessionID, sdk.directory)
         showToast({
-          title: input.permission.isAutoAccepting(sessionID, input.sdk.directory)
+          title: permission.isAutoAccepting(sessionID, sdk.directory)
-            ? input.language.t("toast.permissions.autoaccept.on.title")
+            ? language.t("toast.permissions.autoaccept.on.title")
-            : input.language.t("toast.permissions.autoaccept.off.title"),
+            : language.t("toast.permissions.autoaccept.off.title"),
-          description: input.permission.isAutoAccepting(sessionID, input.sdk.directory)
+          description: permission.isAutoAccepting(sessionID, sdk.directory)
-            ? input.language.t("toast.permissions.autoaccept.on.description")
+            ? language.t("toast.permissions.autoaccept.on.description")
-            : input.language.t("toast.permissions.autoaccept.off.description"),
+            : language.t("toast.permissions.autoaccept.off.description"),
         })
       },
     }),
@@ -257,71 +295,71 @@ export const useSessionCommands = (input: SessionCommandContext) => {
   const sessionActionCommands = createMemo(() => [
     sessionCommand({
       id: "session.undo",
-      title: input.language.t("command.session.undo"),
+      title: language.t("command.session.undo"),
-      description: input.language.t("command.session.undo.description"),
+      description: language.t("command.session.undo.description"),
       slash: "undo",
-      disabled: !input.params.id || input.visibleUserMessages().length === 0,
+      disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: async () => {
-        const sessionID = input.params.id
+        const sessionID = params.id
         if (!sessionID) return
-        if (input.status()?.type !== "idle") {
+        if (status()?.type !== "idle") {
-          await input.sdk.client.session.abort({ sessionID }).catch(() => {})
+          await sdk.client.session.abort({ sessionID }).catch(() => {})
         }
-        const revert = input.info()?.revert?.messageID
+        const revert = info()?.revert?.messageID
-        const message = findLast(input.userMessages(), (x) => !revert || x.id < revert)
+        const message = findLast(userMessages(), (x) => !revert || x.id < revert)
         if (!message) return
-        await input.sdk.client.session.revert({ sessionID, messageID: message.id })
+        await sdk.client.session.revert({ sessionID, messageID: message.id })
-        const parts = input.sync.data.part[message.id]
+        const parts = sync.data.part[message.id]
         if (parts) {
-          const restored = extractPromptFromParts(parts, { directory: input.sdk.directory })
+          const restored = extractPromptFromParts(parts, { directory: sdk.directory })
-          input.prompt.set(restored)
+          prompt.set(restored)
         }
-        const priorMessage = findLast(input.userMessages(), (x) => x.id < message.id)
+        const priorMessage = findLast(userMessages(), (x) => x.id < message.id)
-        input.setActiveMessage(priorMessage)
+        args.setActiveMessage(priorMessage)
       },
     }),
     sessionCommand({
       id: "session.redo",
-      title: input.language.t("command.session.redo"),
+      title: language.t("command.session.redo"),
-      description: input.language.t("command.session.redo.description"),
+      description: language.t("command.session.redo.description"),
       slash: "redo",
-      disabled: !input.params.id || !input.info()?.revert?.messageID,
+      disabled: !params.id || !info()?.revert?.messageID,
       onSelect: async () => {
-        const sessionID = input.params.id
+        const sessionID = params.id
         if (!sessionID) return
-        const revertMessageID = input.info()?.revert?.messageID
+        const revertMessageID = info()?.revert?.messageID
         if (!revertMessageID) return
-        const nextMessage = input.userMessages().find((x) => x.id > revertMessageID)
+        const nextMessage = userMessages().find((x) => x.id > revertMessageID)
         if (!nextMessage) {
-          await input.sdk.client.session.unrevert({ sessionID })
+          await sdk.client.session.unrevert({ sessionID })
-          input.prompt.reset()
+          prompt.reset()
-          const lastMsg = findLast(input.userMessages(), (x) => x.id >= revertMessageID)
+          const lastMsg = findLast(userMessages(), (x) => x.id >= revertMessageID)
-          input.setActiveMessage(lastMsg)
+          args.setActiveMessage(lastMsg)
           return
         }
-        await input.sdk.client.session.revert({ sessionID, messageID: nextMessage.id })
+        await sdk.client.session.revert({ sessionID, messageID: nextMessage.id })
-        const priorMsg = findLast(input.userMessages(), (x) => x.id < nextMessage.id)
+        const priorMsg = findLast(userMessages(), (x) => x.id < nextMessage.id)
-        input.setActiveMessage(priorMsg)
+        args.setActiveMessage(priorMsg)
       },
     }),
     sessionCommand({
       id: "session.compact",
-      title: input.language.t("command.session.compact"),
+      title: language.t("command.session.compact"),
-      description: input.language.t("command.session.compact.description"),
+      description: language.t("command.session.compact.description"),
       slash: "compact",
-      disabled: !input.params.id || input.visibleUserMessages().length === 0,
+      disabled: !params.id || visibleUserMessages().length === 0,
       onSelect: async () => {
-        const sessionID = input.params.id
+        const sessionID = params.id
         if (!sessionID) return
-        const model = input.local.model.current()
+        const model = local.model.current()
         if (!model) {
           showToast({
-            title: input.language.t("toast.model.none.title"),
+            title: language.t("toast.model.none.title"),
-            description: input.language.t("toast.model.none.description"),
+            description: language.t("toast.model.none.description"),
           })
           return
         }
-        await input.sdk.client.session.summarize({
+        await sdk.client.session.summarize({
           sessionID,
           modelID: model.id,
           providerID: model.provider.id,
@@ -330,29 +368,27 @@ export const useSessionCommands = (input: SessionCommandContext) => {
     }),
     sessionCommand({
       id: "session.fork",
-      title: input.language.t("command.session.fork"),
+      title: language.t("command.session.fork"),
-      description: input.language.t("command.session.fork.description"),
+      description: language.t("command.session.fork.description"),
       slash: "fork",
-      disabled: !input.params.id || input.visibleUserMessages().length === 0,
+      disabled: !params.id || visibleUserMessages().length === 0,
-      onSelect: () => input.dialog.show(() => <DialogFork />),
+      onSelect: () => dialog.show(() => <DialogFork />),
     }),
   ])
 
   const shareCommands = createMemo(() => {
-    if (input.sync.data.config.share === "disabled") return []
+    if (sync.data.config.share === "disabled") return []
     return [
       sessionCommand({
         id: "session.share",
-        title: input.info()?.share?.url
+        title: info()?.share?.url ? language.t("session.share.copy.copyLink") : language.t("command.session.share"),
-          ? input.language.t("session.share.copy.copyLink")
+        description: info()?.share?.url
-          : input.language.t("command.session.share"),
+          ? language.t("toast.session.share.success.description")
-        description: input.info()?.share?.url
+          : language.t("command.session.share.description"),
-          ? input.language.t("toast.session.share.success.description")
-          : input.language.t("command.session.share.description"),
         slash: "share",
-        disabled: !input.params.id,
+        disabled: !params.id,
         onSelect: async () => {
-          if (!input.params.id) return
+          if (!params.id) return
 
           const write = (value: string) => {
             const body = typeof document === "undefined" ? undefined : document.body
@@ -382,7 +418,7 @@ export const useSessionCommands = (input: SessionCommandContext) => {
             const ok = await write(url)
             if (!ok) {
               showToast({
-                title: input.language.t("toast.session.share.copyFailed.title"),
+                title: language.t("toast.session.share.copyFailed.title"),
                 variant: "error",
               })
               return
@@ -390,27 +426,27 @@ export const useSessionCommands = (input: SessionCommandContext) => {
 
             showToast({
               title: existing
-                ? input.language.t("session.share.copy.copied")
+                ? language.t("session.share.copy.copied")
-                : input.language.t("toast.session.share.success.title"),
+                : language.t("toast.session.share.success.title"),
-              description: input.language.t("toast.session.share.success.description"),
+              description: language.t("toast.session.share.success.description"),
               variant: "success",
             })
           }
 
-          const existing = input.info()?.share?.url
+          const existing = info()?.share?.url
           if (existing) {
             await copy(existing, true)
             return
           }
 
-          const url = await input.sdk.client.session
+          const url = await sdk.client.session
-            .share({ sessionID: input.params.id })
+            .share({ sessionID: params.id })
             .then((res) => res.data?.share?.url)
             .catch(() => undefined)
           if (!url) {
             showToast({
-              title: input.language.t("toast.session.share.failed.title"),
+              title: language.t("toast.session.share.failed.title"),
-              description: input.language.t("toast.session.share.failed.description"),
+              description: language.t("toast.session.share.failed.description"),
               variant: "error",
             })
             return
@@ -421,25 +457,25 @@ export const useSessionCommands = (input: SessionCommandContext) => {
       }),
       sessionCommand({
         id: "session.unshare",
-        title: input.language.t("command.session.unshare"),
+        title: language.t("command.session.unshare"),
-        description: input.language.t("command.session.unshare.description"),
+        description: language.t("command.session.unshare.description"),
         slash: "unshare",
-        disabled: !input.params.id || !input.info()?.share?.url,
+        disabled: !params.id || !info()?.share?.url,
         onSelect: async () => {
-          if (!input.params.id) return
+          if (!params.id) return
-          await input.sdk.client.session
+          await sdk.client.session
-            .unshare({ sessionID: input.params.id })
+            .unshare({ sessionID: params.id })
             .then(() =>
               showToast({
-                title: input.language.t("toast.session.unshare.success.title"),
+                title: language.t("toast.session.unshare.success.title"),
-                description: input.language.t("toast.session.unshare.success.description"),
+                description: language.t("toast.session.unshare.success.description"),
                 variant: "success",
               }),
             )
             .catch(() =>
               showToast({
-                title: input.language.t("toast.session.unshare.failed.title"),
+                title: language.t("toast.session.unshare.failed.title"),
-                description: input.language.t("toast.session.unshare.failed.description"),
+                description: language.t("toast.session.unshare.failed.description"),
                 variant: "error",
               }),
             )
@@ -448,7 +484,7 @@ export const useSessionCommands = (input: SessionCommandContext) => {
     ]
   })
 
-  input.command.register("session", () =>
+  command.register("session", () =>
     [
       sessionCommands(),
       fileCommands(),
@@ -459,6 +495,6 @@ export const useSessionCommands = (input: SessionCommandContext) => {
       permissionCommands(),
       sessionActionCommands(),
       shareCommands(),
-    ].flatMap((x) => x),
+    ].flatMap((section) => section),
   )
 }

packages/app/src/utils/server-health.test.ts

@@ -1,11 +1,6 @@
 import { describe, expect, test } from "bun:test"
-import type { ServerConnection } from "@/context/server"
 import { checkServerHealth } from "./server-health"
 
-const server: ServerConnection.HttpBase = {
-  url: "http://localhost:4096",
-}
-
 function abortFromInput(input: RequestInfo | URL, init?: RequestInit) {
   if (init?.signal) return init.signal
   if (input instanceof Request) return input.signal
@@ -20,7 +15,7 @@ describe("checkServerHealth", () => {
         headers: { "content-type": "application/json" },
       })) as unknown as typeof globalThis.fetch
 
-    const result = await checkServerHealth(server, fetch)
+    const result = await checkServerHealth("http://localhost:4096", fetch)
 
     expect(result).toEqual({ healthy: true, version: "1.2.3" })
   })
@@ -30,7 +25,7 @@ describe("checkServerHealth", () => {
       throw new Error("network")
     }) as unknown as typeof globalThis.fetch
 
-    const result = await checkServerHealth(server, fetch)
+    const result = await checkServerHealth("http://localhost:4096", fetch)
 
     expect(result).toEqual({ healthy: false })
   })
@@ -56,9 +51,7 @@ describe("checkServerHealth", () => {
         )
       })) as unknown as typeof globalThis.fetch
 
-    const result = await checkServerHealth(server, fetch, {
+    const result = await checkServerHealth("http://localhost:4096", fetch, { timeoutMs: 10 }).finally(() => {
-      timeoutMs: 10,
-    }).finally(() => {
       if (timeout) Object.defineProperty(AbortSignal, "timeout", timeout)
       if (!timeout) Reflect.deleteProperty(AbortSignal, "timeout")
     })
@@ -78,9 +71,7 @@ describe("checkServerHealth", () => {
     }) as unknown as typeof globalThis.fetch
 
     const abort = new AbortController()
-    await checkServerHealth(server, fetch, {
+    await checkServerHealth("http://localhost:4096", fetch, { signal: abort.signal })
-      signal: abort.signal,
-    })
 
     expect(signal).toBe(abort.signal)
   })
@@ -96,7 +87,7 @@ describe("checkServerHealth", () => {
       })
     }) as unknown as typeof globalThis.fetch
 
-    const result = await checkServerHealth(server, fetch, {
+    const result = await checkServerHealth("http://localhost:4096", fetch, {
       retryCount: 2,
       retryDelayMs: 1,
     })
@@ -112,7 +103,7 @@ describe("checkServerHealth", () => {
       throw new TypeError("network")
     }) as unknown as typeof globalThis.fetch
 
-    const result = await checkServerHealth(server, fetch, {
+    const result = await checkServerHealth("http://localhost:4096", fetch, {
       retryCount: 2,
       retryDelayMs: 1,
     })

packages/app/src/utils/server-health.ts

@@ -1,5 +1,4 @@
-import type { ServerConnection } from "@/context/server"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
-import { createSdkForServer } from "./server"
 
 export type ServerHealth = { healthy: boolean; version?: string }
 
@@ -18,10 +17,7 @@ function timeoutSignal(timeoutMs: number) {
   const timeout = (AbortSignal as unknown as { timeout?: (ms: number) => AbortSignal }).timeout
   if (timeout) {
     try {
-      return {
+      return { signal: timeout.call(AbortSignal, timeoutMs), clear: undefined as (() => void) | undefined }
-        signal: timeout.call(AbortSignal, timeoutMs),
-        clear: undefined as (() => void) | undefined,
-      }
     } catch {}
   }
   const controller = new AbortController()
@@ -56,7 +52,7 @@ function retryable(error: unknown, signal?: AbortSignal) {
 }
 
 export async function checkServerHealth(
-  server: ServerConnection.HttpBase,
+  url: string,
   fetch: typeof globalThis.fetch,
   opts?: CheckServerHealthOptions,
 ): Promise<ServerHealth> {
@@ -71,8 +67,8 @@ export async function checkServerHealth(
       .catch(() => ({ healthy: false }))
   }
   const attempt = (count: number): Promise<ServerHealth> =>
-    createSdkForServer({
+    createOpencodeClient({
-      server,
+      baseUrl: url,
       fetch,
       signal,
     })

packages/app/src/utils/server.ts

@@ -1,22 +0,0 @@
-import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
-import type { ServerConnection } from "@/context/server"
-
-export function createSdkForServer({
-  server,
-  ...config
-}: Omit<NonNullable<Parameters<typeof createOpencodeClient>[0]>, "baseUrl"> & {
-  server: ServerConnection.HttpBase
-}) {
-  const auth = (() => {
-    if (!server.password) return
-    return {
-      Authorization: `Basic ${btoa(`${server.username ?? "opencode"}:${server.password}`)}`,
-    }
-  })()
-
-  return createOpencodeClient({
-    ...config,
-    headers: { ...config.headers, ...auth },
-    baseUrl: server.url,
-  })
-}

packages/app/src/utils/terminal-writer.test.ts

@@ -6,10 +6,7 @@ describe("terminalWriter", () => {
     const calls: string[] = []
     const scheduled: VoidFunction[] = []
     const writer = terminalWriter(
-      (data, done) => {
+      (data) => calls.push(data),
-        calls.push(data)
-        done?.()
-      },
       (flush) => scheduled.push(flush),
     )
 
@@ -27,38 +24,10 @@ describe("terminalWriter", () => {
   test("flush is a no-op when empty", () => {
     const calls: string[] = []
     const writer = terminalWriter(
-      (data, done) => {
+      (data) => calls.push(data),
-        calls.push(data)
-        done?.()
-      },
       (flush) => flush(),
     )
     writer.flush()
     expect(calls).toEqual([])
   })
-
-  test("flush waits for pending write completion", () => {
-    const calls: string[] = []
-    let done: VoidFunction | undefined
-    const writer = terminalWriter(
-      (data, finish) => {
-        calls.push(data)
-        done = finish
-      },
-      (flush) => flush(),
-    )
-
-    writer.push("a")
-
-    let settled = false
-    writer.flush(() => {
-      settled = true
-    })
-
-    expect(calls).toEqual(["a"])
-    expect(settled).toBe(false)
-
-    done?.()
-    expect(settled).toBe(true)
-  })
 })

packages/app/src/utils/terminal-writer.ts

@@ -1,42 +1,16 @@
 export function terminalWriter(
-  write: (data: string, done?: VoidFunction) => void,
+  write: (data: string) => void,
   schedule: (flush: VoidFunction) => void = queueMicrotask,
 ) {
   let chunks: string[] | undefined
-  let waits: VoidFunction[] | undefined
   let scheduled = false
-  let writing = false
 
-  const settle = () => {
+  const flush = () => {
-    if (scheduled || writing || chunks?.length) return
-    const list = waits
-    if (!list?.length) return
-    waits = undefined
-    for (const fn of list) {
-      fn()
-    }
-  }
-
-  const run = () => {
-    if (writing) return
     scheduled = false
     const items = chunks
-    if (!items?.length) {
+    if (!items?.length) return
-      settle()
-      return
-    }
     chunks = undefined
-    writing = true
+    write(items.join(""))
-    write(items.join(""), () => {
-      writing = false
-      if (chunks?.length) {
-        if (scheduled) return
-        scheduled = true
-        schedule(run)
-        return
-      }
-      settle()
-    })
   }
 
   const push = (data: string) => {
@@ -44,21 +18,9 @@ export function terminalWriter(
     if (chunks) chunks.push(data)
     else chunks = [data]
 
-    if (scheduled || writing) return
+    if (scheduled) return
     scheduled = true
-    schedule(run)
+    schedule(flush)
-  }
-
-  const flush = (done?: VoidFunction) => {
-    if (!scheduled && !writing && !chunks?.length) {
-      done?.()
-      return
-    }
-    if (done) {
-      if (waits) waits.push(done)
-      else waits = [done]
-    }
-    run()
   }
 
   return { push, flush }

packages/app/tsconfig.json

@@ -22,6 +22,5 @@
     }
   },
   "include": ["src", "package.json"],
-  "exclude": ["dist", "ts-dist"],
+  "exclude": ["dist", "ts-dist"]
-  "references": [{ "path": "../sdk/js" }]
 }

packages/console/app/src/routes/index.css

@@ -668,8 +668,6 @@ body {
       max-width: none;
       max-height: none;
       display: block;
-      aspect-ratio: 16 / 9;
-      object-fit: cover;
     }
   }
 

packages/console/core/script/promote-models.ts

@@ -9,7 +9,7 @@ const stage = process.argv[2]
 if (!stage) throw new Error("Stage is required")
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
-const PARTS = 30
+const PARTS = 20
 
 // read the secret
 const ret = await $`bun sst secret list`.cwd(root).text()

packages/console/core/script/update-models.ts

@@ -7,7 +7,7 @@ import { ZenData } from "../src/model"
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
 const models = await $`bun sst secret list`.cwd(root).text()
-const PARTS = 30
+const PARTS = 20
 
 // read the line starting with "ZEN_MODELS"
 const lines = models.split("\n")

packages/console/core/src/model.ts

@@ -102,17 +102,7 @@ export namespace ZenData {
         Resource.ZEN_MODELS17.value +
         Resource.ZEN_MODELS18.value +
         Resource.ZEN_MODELS19.value +
-        Resource.ZEN_MODELS20.value +
+        Resource.ZEN_MODELS20.value,
-        Resource.ZEN_MODELS21.value +
-        Resource.ZEN_MODELS22.value +
-        Resource.ZEN_MODELS23.value +
-        Resource.ZEN_MODELS24.value +
-        Resource.ZEN_MODELS25.value +
-        Resource.ZEN_MODELS26.value +
-        Resource.ZEN_MODELS27.value +
-        Resource.ZEN_MODELS28.value +
-        Resource.ZEN_MODELS29.value +
-        Resource.ZEN_MODELS30.value,
     )
     const { models, providers, providerFamilies } = ModelsSchema.parse(json)
     return {

packages/console/core/sst-env.d.ts

@@ -181,50 +181,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS21": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS22": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS23": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS24": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS25": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS26": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS27": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS28": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS29": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS3": {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS30": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS4": {
       "type": "sst.sst.Secret"
       "value": string

packages/console/function/sst-env.d.ts

@@ -181,50 +181,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS21": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS22": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS23": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS24": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS25": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS26": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS27": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS28": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS29": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS3": {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS30": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS4": {
       "type": "sst.sst.Secret"
       "value": string

packages/console/resource/sst-env.d.ts

@@ -181,50 +181,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS21": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS22": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS23": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS24": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS25": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS26": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS27": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS28": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
-    "ZEN_MODELS29": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS3": {
       "type": "sst.sst.Secret"
       "value": string
     }
-    "ZEN_MODELS30": {
-      "type": "sst.sst.Secret"
-      "value": string
-    }
     "ZEN_MODELS4": {
       "type": "sst.sst.Secret"
       "value": string

packages/desktop/src-tauri/src/cli.rs

@@ -6,21 +6,17 @@ use process_wrap::tokio::ProcessGroup;
 use process_wrap::tokio::{JobObject, KillOnDrop};
 #[cfg(unix)]
 use std::os::unix::process::ExitStatusExt;
-use std::sync::Arc;
 use std::{process::Stdio, time::Duration};
 use tauri::{AppHandle, Manager, path::BaseDirectory};
+use tauri_plugin_store::StoreExt;
 use tauri_specta::Event;
-use tokio::{
+use tokio::io::{AsyncBufReadExt, BufReader};
-    io::{AsyncBufRead, AsyncBufReadExt, BufReader},
+use tokio::process::Command;
-    process::Command,
+use tokio::sync::{mpsc, oneshot};
-    sync::{mpsc, oneshot},
-    task::JoinHandle,
-};
 use tokio_stream::wrappers::ReceiverStream;
 use tracing::Instrument;
 
-use crate::server::get_wsl_config;
+use crate::constants::{SETTINGS_STORE, WSL_ENABLED_KEY};
-
 
 const CLI_INSTALL_DIR: &str = ".opencode/bin";
 const CLI_BINARY_NAME: &str = "opencode";
@@ -38,8 +34,8 @@ pub struct Config {
 
 #[derive(Clone, Debug)]
 pub enum CommandEvent {
-    Stdout(String),
+    Stdout(Vec<u8>),
-    Stderr(String),
+    Stderr(Vec<u8>),
     Error(String),
     Terminated(TerminatedPayload),
 }
@@ -68,11 +64,10 @@ pub async fn get_config(app: &AppHandle) -> Option<Config> {
 
     events
         .fold(String::new(), async |mut config_str, event| {
-            if let CommandEvent::Stdout(s) = &event {
+            if let CommandEvent::Stdout(stdout) = event
-                config_str += s.as_str()
+                && let Ok(s) = str::from_utf8(&stdout)
-            }
+            {
-            if let CommandEvent::Stderr(s) = &event {
+                config_str += s
-                config_str += s.as_str()
             }
 
             config_str
@@ -202,8 +197,16 @@ fn get_user_shell() -> String {
     std::env::var("SHELL").unwrap_or_else(|_| "/bin/sh".to_string())
 }
 
-fn is_wsl_enabled(_app: &tauri::AppHandle) -> bool {
+fn is_wsl_enabled(app: &tauri::AppHandle) -> bool {
-  get_wsl_config(_app.clone()).is_ok_and(|v| v.enabled)
+    let Ok(store) = app.store(SETTINGS_STORE) else {
+        return false;
+    };
+
+    store
+        .get(WSL_ENABLED_KEY)
+        .as_ref()
+        .and_then(|value| value.as_bool())
+        .unwrap_or(false)
 }
 
 fn shell_escape(input: &str) -> String {
@@ -305,7 +308,7 @@ pub fn spawn_command(
         };
 
         let mut cmd = Command::new(shell);
-        cmd.args(["-l", "-c", &line]);
+        cmd.args(["-il", "-c", &line]);
 
         for (key, value) in envs {
             cmd.env(key, value);
@@ -314,12 +317,9 @@ pub fn spawn_command(
         cmd
     };
 
-    cmd.stdout(Stdio::piped());
+    cmd.stdin(Stdio::null())
-    cmd.stderr(Stdio::piped());
+        .stdout(Stdio::piped())
-    cmd.stdin(Stdio::null());
+        .stderr(Stdio::piped());
-
-    #[cfg(windows)]
-    cmd.creation_flags(0x0800_0000);
 
     let mut wrap = CommandWrap::from(cmd);
 
@@ -334,25 +334,32 @@ pub fn spawn_command(
     }
 
     let mut child = wrap.spawn()?;
-    let guard = Arc::new(tokio::sync::RwLock::new(()));
+    let stdout = child.stdout().take();
+    let stderr = child.stderr().take();
     let (tx, rx) = mpsc::channel(256);
     let (kill_tx, mut kill_rx) = mpsc::channel(1);
 
-    let stdout = spawn_pipe_reader(
+    if let Some(stdout) = stdout {
-        tx.clone(),
+        let tx = tx.clone();
-        guard.clone(),
+        tokio::spawn(async move {
-        BufReader::new(child.stdout().take().unwrap()),
+            let mut lines = BufReader::new(stdout).lines();
-        CommandEvent::Stdout,
+            while let Ok(Some(line)) = lines.next_line().await {
-    );
+                let _ = tx.send(CommandEvent::Stdout(line.into_bytes())).await;
-    let stderr = spawn_pipe_reader(
+            }
-        tx.clone(),
+        });
-        guard.clone(),
+    }
-        BufReader::new(child.stderr().take().unwrap()),
-        CommandEvent::Stderr,
-    );
 
-    tokio::task::spawn(async move {
+    if let Some(stderr) = stderr {
-        let mut kill_open = true;
+        let tx = tx.clone();
+        tokio::spawn(async move {
+            let mut lines = BufReader::new(stderr).lines();
+            while let Ok(Some(line)) = lines.next_line().await {
+                let _ = tx.send(CommandEvent::Stderr(line.into_bytes())).await;
+            }
+        });
+    }
+
+    tokio::spawn(async move {
         let status = loop {
             match child.try_wait() {
                 Ok(Some(status)) => break Ok(status),
@@ -361,11 +368,8 @@ pub fn spawn_command(
             }
 
             tokio::select! {
-                msg = kill_rx.recv(), if kill_open => {
+                _ = kill_rx.recv() => {
-                    if msg.is_some() {
+                    let _ = child.start_kill();
-                        let _ = child.start_kill();
-                    }
-                    kill_open = false;
                 }
                 _ = tokio::time::sleep(Duration::from_millis(100)) => {}
             }
@@ -383,9 +387,6 @@ pub fn spawn_command(
                 let _ = tx.send(CommandEvent::Error(err.to_string())).await;
             }
         }
-
-        stdout.abort();
-        stderr.abort();
     });
 
     let event_stream = ReceiverStream::new(rx);
@@ -396,7 +397,9 @@ pub fn spawn_command(
 
 fn signal_from_status(status: std::process::ExitStatus) -> Option<i32> {
     #[cfg(unix)]
-    return status.signal();
+    {
+        return status.signal();
+    }
 
     #[cfg(not(unix))]
     {
@@ -432,10 +435,12 @@ pub fn serve(
         events
             .for_each(move |event| {
                 match event {
-                    CommandEvent::Stdout(line) => {
+                    CommandEvent::Stdout(line_bytes) => {
+                        let line = String::from_utf8_lossy(&line_bytes);
                         tracing::info!("{line}");
                     }
-                    CommandEvent::Stderr(line) => {
+                    CommandEvent::Stderr(line_bytes) => {
+                        let line = String::from_utf8_lossy(&line_bytes);
                         tracing::info!("{line}");
                     }
                     CommandEvent::Error(err) => {
@@ -487,7 +492,11 @@ pub mod sqlite_migration {
             }
 
             future::ready(match &event {
-                CommandEvent::Stdout(s) | CommandEvent::Stderr(s) => {
+                CommandEvent::Stdout(stdout) => {
+                    let Ok(s) = str::from_utf8(stdout) else {
+                        return future::ready(None);
+                    };
+
                     if let Some(s) = s.strip_prefix("sqlite-migration:").map(|s| s.trim()) {
                         if let Ok(progress) = s.parse::<u8>() {
                             let _ = SqliteMigrationProgress::InProgress(progress).emit(&app);
@@ -506,41 +515,3 @@ pub mod sqlite_migration {
         })
     }
 }
-
-fn spawn_pipe_reader<F: Fn(String) -> CommandEvent + Send + Copy + 'static>(
-    tx: mpsc::Sender<CommandEvent>,
-    guard: Arc<tokio::sync::RwLock<()>>,
-    pipe_reader: impl AsyncBufRead + Send + Unpin + 'static,
-    wrapper: F,
-) -> JoinHandle<()> {
-    tokio::spawn(async move {
-        let _lock = guard.read().await;
-        let reader = BufReader::new(pipe_reader);
-
-        read_line(reader, tx, wrapper).await;
-    })
-}
-
-async fn read_line<F: Fn(String) -> CommandEvent + Send + Copy + 'static>(
-    reader: BufReader<impl AsyncBufRead + Unpin>,
-    tx: mpsc::Sender<CommandEvent>,
-    wrapper: F,
-) {
-    let mut lines = reader.lines();
-    loop {
-        let line = lines.next_line().await;
-
-        match line {
-            Ok(s) => {
-                if let Some(s) = s {
-                    let _ = tx.clone().send(wrapper(s)).await;
-                }
-            }
-            Err(e) => {
-                let tx_ = tx.clone();
-                let _ = tx_.send(CommandEvent::Error(e.to_string())).await;
-                break;
-            }
-        }
-    }
-}

packages/desktop/src-tauri/src/server.rs

@@ -55,18 +55,18 @@ pub async fn set_default_server_url(app: AppHandle, url: Option<String>) -> Resu
 
 #[tauri::command]
 #[specta::specta]
-pub fn get_wsl_config(_app: AppHandle) -> Result<WslConfig, String> {
+pub fn get_wsl_config(app: AppHandle) -> Result<WslConfig, String> {
-    // let store = app
+    let store = app
-    //     .store(SETTINGS_STORE)
+        .store(SETTINGS_STORE)
-    //     .map_err(|e| format!("Failed to open settings store: {}", e))?;
+        .map_err(|e| format!("Failed to open settings store: {}", e))?;
 
-    // let enabled = store
+    let enabled = store
-    //     .get(WSL_ENABLED_KEY)
+        .get(WSL_ENABLED_KEY)
-    //     .as_ref()
+        .as_ref()
-    //     .and_then(|v| v.as_bool())
+        .and_then(|v| v.as_bool())
-    //     .unwrap_or(false);
+        .unwrap_or(false);
 
-    Ok(WslConfig { enabled: false })
+    Ok(WslConfig { enabled })
 }
 
 #[tauri::command]

packages/desktop/src/index.tsx

@@ -1,37 +1,36 @@
 // @refresh reload
-
+import { webviewZoom } from "./webview-zoom"
+import { render } from "solid-js/web"
 import {
   AppBaseProviders,
   AppInterface,
-  handleNotificationClick,
-  type Platform,
   PlatformProvider,
-  ServerConnection,
+  Platform,
   useCommand,
+  handleNotificationClick,
 } from "@opencode-ai/app"
-import { Splash } from "@opencode-ai/ui/logo"
-import type { AsyncStorage } from "@solid-primitives/storage"
-import { getCurrentWindow } from "@tauri-apps/api/window"
-import { readImage } from "@tauri-apps/plugin-clipboard-manager"
-import { getCurrent, onOpenUrl } from "@tauri-apps/plugin-deep-link"
 import { open, save } from "@tauri-apps/plugin-dialog"
-import { fetch as tauriFetch } from "@tauri-apps/plugin-http"
+import { getCurrent, onOpenUrl } from "@tauri-apps/plugin-deep-link"
-import { isPermissionGranted, requestPermission } from "@tauri-apps/plugin-notification"
 import { openPath as openerOpenPath } from "@tauri-apps/plugin-opener"
-import { type as ostype } from "@tauri-apps/plugin-os"
-import { relaunch } from "@tauri-apps/plugin-process"
 import { open as shellOpen } from "@tauri-apps/plugin-shell"
+import { type as ostype } from "@tauri-apps/plugin-os"
+import { check, Update } from "@tauri-apps/plugin-updater"
+import { getCurrentWindow } from "@tauri-apps/api/window"
+import { isPermissionGranted, requestPermission } from "@tauri-apps/plugin-notification"
+import { relaunch } from "@tauri-apps/plugin-process"
+import { AsyncStorage } from "@solid-primitives/storage"
+import { fetch as tauriFetch } from "@tauri-apps/plugin-http"
 import { Store } from "@tauri-apps/plugin-store"
-import { check, type Update } from "@tauri-apps/plugin-updater"
+import { Splash } from "@opencode-ai/ui/logo"
-import { type Accessor, createResource, type JSX, onCleanup, onMount, Show } from "solid-js"
+import { createSignal, Show, Accessor, JSX, createResource, onMount, onCleanup } from "solid-js"
-import { render } from "solid-js/web"
+import { readImage } from "@tauri-apps/plugin-clipboard-manager"
-import pkg from "../package.json"
+
-import { initI18n, t } from "./i18n"
 import { UPDATER_ENABLED } from "./updater"
-import { webviewZoom } from "./webview-zoom"
+import { initI18n, t } from "./i18n"
+import pkg from "../package.json"
 import "./styles.css"
+import { commands, InitStep } from "./bindings"
 import { Channel } from "@tauri-apps/api/core"
-import { commands, type InitStep } from "./bindings"
 import { createMenu } from "./menu"
 
 const root = document.getElementById("root")
@@ -59,7 +58,7 @@ const listenForDeepLinks = async () => {
   await onOpenUrl((urls) => emitDeepLinks(urls)).catch(() => undefined)
 }
 
-const createPlatform = (): Platform => {
+const createPlatform = (password: Accessor<string | null>): Platform => {
   const os = (() => {
     const type = ostype()
     if (type === "macos" || type === "windows" || type === "linux") return type
@@ -345,10 +344,22 @@ const createPlatform = (): Platform => {
     },
 
     fetch: (input, init) => {
+      const pw = password()
+
+      const addHeader = (headers: Headers, password: string) => {
+        headers.append("Authorization", `Basic ${btoa(`opencode:${password}`)}`)
+      }
+
       if (input instanceof Request) {
+        if (pw) addHeader(input.headers, pw)
         return tauriFetch(input)
       } else {
-        return tauriFetch(input, init)
+        const headers = new Headers(init?.headers)
+        if (pw) addHeader(headers, pw)
+        return tauriFetch(input, {
+          ...(init as any),
+          headers: headers,
+        })
       }
     },
 
@@ -406,11 +417,7 @@ const createPlatform = (): Platform => {
       return new Promise<File | null>((resolve) => {
         canvas.toBlob((blob) => {
           if (!blob) return resolve(null)
-          resolve(
+          resolve(new File([blob], `pasted-image-${Date.now()}.png`, { type: "image/png" }))
-            new File([blob], `pasted-image-${Date.now()}.png`, {
-              type: "image/png",
-            }),
-          )
         }, "image/png")
       })
     },
@@ -424,7 +431,9 @@ createMenu((id) => {
 void listenForDeepLinks()
 
 render(() => {
-  const platform = createPlatform()
+  const [serverPassword, setServerPassword] = createSignal<string | null>(null)
+
+  const platform = createPlatform(() => serverPassword())
 
   function handleClick(e: MouseEvent) {
     const link = (e.target as HTMLElement).closest("a.external-link") as HTMLAnchorElement | null
@@ -446,16 +455,9 @@ render(() => {
       <AppBaseProviders>
         <ServerGate>
           {(data) => {
-            const server: ServerConnection.Sidecar = {
+            setServerPassword(data().password)
-              displayName: "Local Server",
+            window.__OPENCODE__ ??= {}
-              type: "sidecar",
+            window.__OPENCODE__.serverPassword = data().password ?? undefined
-              variant: "base",
-              http: {
-                url: data().url,
-                username: "opencode",
-                password: data().password ?? undefined,
-              },
-            }
 
             function Inner() {
               const cmd = useCommand()
@@ -466,7 +468,7 @@ render(() => {
             }
 
             return (
-              <AppInterface defaultServer={ServerConnection.key(server)} servers={[server]}>
+              <AppInterface defaultUrl={data().url} isSidecar>
                 <Inner />
               </AppInterface>
             )