fix(tui): style scrollbox for permission and sidebar (#12752)

Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>

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

@@ -4,6 +4,7 @@ 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/publish.yml

@@ -137,7 +137,7 @@ jobs:
         if: contains(matrix.settings.host, 'ubuntu')
         uses: actions/cache@v4
         with:
-          path: /var/cache/apt/archives
+          path: ~/apt-cache
           key: ${{ runner.os }}-${{ matrix.settings.target }}-apt-${{ hashFiles('.github/workflows/publish.yml') }}
           restore-keys: |
             ${{ runner.os }}-${{ matrix.settings.target }}-apt-
@@ -145,8 +145,10 @@ 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 libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+          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 chmod -R a+rw ~/apt-cache
 
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
@@ -169,13 +171,23 @@ 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')
-        run: |
-          cargo install tauri-cli --git https://github.com/tauri-apps/tauri --branch feat/truly-portable-appimage --force
-          echo "Installed tauri-cli version:"
-          cargo tauri --version
+        with:
+          tool: tauri-cli
+          git: https://github.com/tauri-apps/tauri
+          # branch: feat/truly-portable-appimage
+          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/translator.md

@@ -359,6 +359,7 @@ opencode serve --hostname 0.0.0.0 --port 4096
 opencode serve [--port <number>] [--hostname <string>] [--cors <origin>]
 opencode session [command]
 opencode session list
+opencode session delete <sessionID>
 opencode stats
 opencode uninstall
 opencode upgrade
@@ -598,6 +599,7 @@ OPENCODE_EXPERIMENTAL_MARKDOWN
 OPENCODE_EXPERIMENTAL_OUTPUT_TOKEN_MAX
 OPENCODE_EXPERIMENTAL_OXFMT
 OPENCODE_EXPERIMENTAL_PLAN_MODE
+OPENCODE_ENABLE_QUESTION_TOOL
 OPENCODE_FAKE_VCS
 OPENCODE_GIT_BASH_PATH
 OPENCODE_MODEL

.opencode/agent/triage.md

@@ -1,7 +1,7 @@
 ---
 mode: primary
 hidden: true
-model: opencode/claude-haiku-4-5
+model: opencode/minimax-m2.5
 color: "#44BA81"
 tools:
   "*": false
@@ -12,6 +12,8 @@ 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
@@ -43,12 +45,30 @@ 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
+
 #### docs
 
 Add if the issue requests better documentation or docs updates.
@@ -66,13 +86,47 @@ TUI issues potentially caused by our underlying TUI library:
 
 When assigning to people here are the following rules:
 
-adamdotdev:
-ONLY assign adam if the issue will have the "desktop" label.
+Desktop / Web:
+Use for desktop-labeled issues only.
 
-fwang:
-ONLY assign fwang if the issue will have the "zen" label.
+- adamdotdevin
+- iamdavidhill
+- Brendonovich
+- nexxeln
 
-jayair:
-ONLY assign jayair if the issue will have the "docs" label.
+Zen:
+ONLY assign if the issue will have the "zen" label.
 
-In all other cases use best judgment. Avoid assigning to kommander needlessly, when in doubt assign to rekram1-node.
+- fwang
+- 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.

.opencode/tool/github-triage.ts

@@ -1,8 +1,22 @@
 /// <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")
@@ -29,60 +43,69 @@ export default tool({
   description: DESCRIPTION,
   args: {
     assignee: tool.schema
-      .enum(["thdxr", "adamdotdevin", "rekram1-node", "fwang", "jayair", "kommander"])
+      .enum(ASSIGNEES as [string, ...string[]])
       .describe("The username of the assignee")
       .default("rekram1-node"),
     labels: tool.schema
-      .array(tool.schema.enum(["nix", "opentui", "perf", "desktop", "zen", "docs", "windows"]))
+      .array(tool.schema.enum(["nix", "opentui", "perf", "web", "desktop", "zen", "docs", "windows", "core"]))
       .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 (args.assignee === "adamdotdevin" && !args.labels.includes("desktop")) {
-      throw new Error("Only desktop issues should be assigned to adamdotdevin")
+    if (labels.includes("nix") && !nix) {
+      labels = labels.filter((x) => x !== "nix")
+      results.push("Dropped label: nix (issue does not mention nix)")
     }
 
-    if (args.assignee === "fwang" && !args.labels.includes("zen")) {
-      throw new Error("Only zen issues should be assigned to fwang")
+    const assignee = nix ? "rekram1-node" : web ? pick(TEAM.desktop) : args.assignee
+
+    if (labels.includes("zen") && !zen) {
+      throw new Error("Only add the zen label when issue title/body contains 'zen'")
     }
 
-    if (args.assignee === "kommander" && !args.labels.includes("opentui")) {
+    if (web && !nix && !(TEAM.desktop as readonly string[]).includes(assignee)) {
+      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: [args.assignee] }),
+      body: JSON.stringify({ assignees: [assignee] }),
     })
-    results.push(`Assigned @${args.assignee} to issue #${issue}`)
-
-    const labels: string[] = args.labels.map((label) => (label === "desktop" ? "web" : label))
+    results.push(`Assigned @${assignee} to issue #${issue}`)
 
     if (labels.length > 0) {
-      // await octokit.rest.issues.addLabels({
-      //   owner,
-      //   repo,
-      //   issue_number: issue,
-      //   labels,
-      // })
       await githubFetch(`/repos/${owner}/${repo}/issues/${issue}/labels`, {
         method: "POST",
         body: JSON.stringify({ labels }),
       })
-      results.push(`Added labels: ${args.labels.join(", ")}`)
+      results.push(`Added labels: ${labels.join(", ")}`)
     }
 
     return results.join("\n")

.opencode/tool/github-triage.txt

@@ -1,88 +1,6 @@
 Use this tool to assign and/or label a GitHub issue.
 
-You can assign the following users:
-- thdxr
-- adamdotdevin
-- fwang
-- jayair
-- kommander
-- rekram1-node
+Choose labels and assignee using the current triage policy and ownership rules.
+Pick the most fitting labels for the issue and assign one owner.
 
-
-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
+If unsure, choose the team/section with the most overlap with the issue and assign a member from that team at random.

infra/console.ts

@@ -145,6 +145,16 @@ 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")

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,32 @@
+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,7 +28,6 @@ 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)
@@ -37,6 +36,13 @@ test("smoke model selection updates prompt footer", async ({ page, gotoSession }
 
   await expect(dialog).toHaveCount(0)
 
-  const form = page.locator(promptSelector).locator("xpath=ancestor::form[1]")
-  await expect(form.locator('[data-component="button"]').filter({ hasText: name }).first()).toBeVisible()
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/model")
+  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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,23 @@
+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/components/dialog-select-model.tsx

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

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-warning-active)"
+  return "color: var(--icon-diff-modified-base)"
 }
 
 const kindDotColor = (kind: Kind) => {
   if (kind === "add") return "background-color: var(--icon-diff-add-base)"
   if (kind === "del") return "background-color: var(--icon-diff-delete-base)"
-  return "background-color: var(--icon-warning-active)"
+  return "background-color: var(--icon-diff-modified-base)"
 }
 
 const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
@@ -447,12 +447,13 @@ export default function FileTree(props: {
   })
 
   return (
-    <div class={`flex flex-col gap-0.5 ${props.class ?? ""}`}>
+    <div data-component="filetree" 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>
@@ -530,7 +531,30 @@ export default function FileTree(props: {
                     onClick={() => props.onFileClick?.(node)}
                   >
                     <div class="w-4 shrink-0" />
-                    <FileIcon node={node} class="text-icon-weak size-4" />
+                    <Switch>
+                      <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" />
+                          <FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" 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, For, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js"
+import { createEffect, on, Component, Show, 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,7 +94,6 @@ 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()
@@ -105,11 +104,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const language = useLanguage()
   const platform = usePlatform()
   let editorRef!: HTMLDivElement
-  let fileInputRef!: HTMLInputElement
+  let fileInputRef: HTMLInputElement | undefined
   let scrollRef!: HTMLDivElement
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
+  const inset = 44
 
   const scrollCursorIntoView = () => {
     const container = scrollRef
@@ -119,7 +119,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     const range = selection.getRangeAt(0)
     if (!editorRef.contains(range.startContainer)) return
 
-    const rect = range.getBoundingClientRect()
+    const cursor = getCursorPosition(editorRef)
+    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()
@@ -132,8 +139,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       return
     }
 
-    if (bottom > container.scrollTop + container.clientHeight - padding) {
-      container.scrollTop = bottom - container.clientHeight + padding
+    if (bottom > container.scrollTop + container.clientHeight - inset) {
+      container.scrollTop = bottom - container.clientHeight + inset
     }
   }
 
@@ -223,16 +230,26 @@ 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 MAX_HISTORY = 100
+  const commentCount = createMemo(() => {
+    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<{
@@ -250,6 +267,18 @@ 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)
@@ -280,6 +309,45 @@ 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)
 
@@ -325,6 +393,7 @@ 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)
@@ -815,6 +884,13 @@ 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) {
@@ -842,13 +918,39 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         return
       }
     }
-    if (store.mode === "shell") {
-      const { collapsed, cursorPosition, textLength } = getCaretState()
-      if (event.key === "Escape") {
-        setStore("mode", "normal")
+
+    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 === "Backspace" && collapsed && cursorPosition === 0 && textLength === 0) {
         setStore("mode", "normal")
         event.preventDefault()
@@ -927,17 +1029,12 @@ 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-3">
+    <div class="relative size-full _max-h-[320px] flex flex-col gap-0">
       <PromptPopover
         popover={store.popover}
         setSlashPopoverRef={(el) => (slashPopoverRef = el)}
@@ -957,8 +1054,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         onSubmit={handleSubmit}
         classList={{
           "group/prompt-input": true,
-          "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
-          "rounded-[14px] overflow-clip focus-within:shadow-xs-border": true,
+          "bg-surface-raised-stronger-non-alpha shadow-xs-border relative z-10": true,
+          "rounded-[12px] overflow-clip focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.draggingType !== null,
           [props.class ?? ""]: !!props.class,
         }}
@@ -968,7 +1065,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           label={language.t(store.draggingType === "@mention" ? "prompt.dropzone.file.label" : "prompt.dropzone.label")}
         />
         <PromptContextItems
-          items={prompt.context.items()}
+          items={contextItems()}
           active={(item) => {
             const active = comments.active()
             return !!item.commentID && item.commentID === active?.id && item.path === active?.file
@@ -988,162 +1085,59 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           onRemove={removeImageAttachment}
           removeLabel={language.t("prompt.attachment.remove")}
         />
-        <div class="relative max-h-[240px] overflow-y-auto" ref={(el) => (scrollRef = el)}>
-          <div
-            data-component="prompt-input"
-            ref={(el) => {
-              editorRef = el
-              props.ref?.(el)
-            }}
-            role="textbox"
-            aria-multiline="true"
-            aria-label={placeholder()}
-            contenteditable="true"
-            autocapitalize="off"
-            autocorrect="off"
-            spellcheck={false}
-            onInput={handleInput}
-            onPaste={handlePaste}
-            onCompositionStart={() => setComposing(true)}
-            onCompositionEnd={() => setComposing(false)}
-            onKeyDown={handleKeyDown}
-            classList={{
-              "select-text": true,
-              "w-full p-3 pr-12 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 p-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
-              {placeholder()}
-            </div>
-          </Show>
-        </div>
-        <div class="relative p-3 flex items-center justify-between gap-2">
-          <div class="flex items-center gap-2 min-w-0 flex-1">
-            <Switch>
-              <Match when={store.mode === "shell"}>
-                <div class="flex items-center gap-2 px-2 h-6">
-                  <Icon name="console" size="small" class="text-icon-primary" />
-                  <span class="text-12-regular text-text-primary">{language.t("prompt.mode.shell")}</span>
-                  <span class="text-12-regular text-text-weak">{language.t("prompt.mode.shell.exit")}</span>
-                </div>
-              </Match>
-              <Match when={store.mode === "normal"}>
-                <TooltipKeybind
-                  placement="top"
-                  gutter={8}
-                  title={language.t("command.agent.cycle")}
-                  keybind={command.keybind("agent.cycle")}
-                >
-                  <Select
-                    options={agentNames()}
-                    current={local.agent.current()?.name ?? ""}
-                    onSelect={local.agent.set}
-                    class={`capitalize ${local.model.variant.list().length > 0 ? "max-w-full" : "max-w-[120px]"}`}
-                    valueClass="truncate"
-                    variant="ghost"
-                  />
-                </TooltipKeybind>
-                <Show
-                  when={providers.paid().length > 0}
-                  fallback={
-                    <TooltipKeybind
-                      placement="top"
-                      gutter={8}
-                      title={language.t("command.model.choose")}
-                      keybind={command.keybind("model.choose")}
-                    >
-                      <Button
-                        as="div"
-                        variant="ghost"
-                        class="px-2 min-w-0 max-w-[240px]"
-                        onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
-                      >
-                        <Show when={local.model.current()?.provider?.id}>
-                          <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                        </Show>
-                        <span class="truncate">
-                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                        </span>
-                        <Icon name="chevron-down" size="small" class="shrink-0" />
-                      </Button>
-                    </TooltipKeybind>
-                  }
-                >
-                  <TooltipKeybind
-                    placement="top"
-                    gutter={8}
-                    title={language.t("command.model.choose")}
-                    keybind={command.keybind("model.choose")}
-                  >
-                    <ModelSelectorPopover
-                      triggerAs={Button}
-                      triggerProps={{ variant: "ghost", class: "min-w-0 max-w-[240px]" }}
-                    >
-                      <Show when={local.model.current()?.provider?.id}>
-                        <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                      </Show>
-                      <span class="truncate">
-                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                      </span>
-                      <Icon name="chevron-down" size="small" class="shrink-0" />
-                    </ModelSelectorPopover>
-                  </TooltipKeybind>
-                </Show>
-                <Show when={local.model.variant.list().length > 0}>
-                  <TooltipKeybind
-                    placement="top"
-                    gutter={8}
-                    title={language.t("command.model.variant.cycle")}
-                    keybind={command.keybind("model.variant.cycle")}
-                  >
-                    <Button
-                      data-action="model-variant-cycle"
-                      variant="ghost"
-                      class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
-                      onClick={() => local.model.variant.cycle()}
-                    >
-                      {local.model.variant.current() ?? language.t("common.default")}
-                    </Button>
-                  </TooltipKeybind>
-                </Show>
-                <Show when={permission.permissionsEnabled() && params.id}>
-                  <TooltipKeybind
-                    placement="top"
-                    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
+          class="relative"
+          onMouseDown={(e) => {
+            const target = e.target
+            if (!(target instanceof HTMLElement)) return
+            if (
+              target.closest(
+                '[data-action="prompt-attach"], [data-action="prompt-submit"], [data-action="prompt-permissions"]',
+              )
+            ) {
+              return
+            }
+            editorRef?.focus()
+          }}
+        >
+          <div class="relative max-h-[240px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
+            <div
+              data-component="prompt-input"
+              ref={(el) => {
+                editorRef = el
+                props.ref?.(el)
+              }}
+              role="textbox"
+              aria-multiline="true"
+              aria-label={placeholder()}
+              contenteditable="true"
+              autocapitalize="off"
+              autocorrect="off"
+              spellcheck={false}
+              onInput={handleInput}
+              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="flex items-center gap-1 shrink-0">
+
+          <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -1155,54 +1149,248 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 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>
-              }
+
+            <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",
+              }}
             >
-              <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>
+              <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>
+      <Show when={store.mode === "normal" || store.mode === "shell"}>
+        <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">
+          <div class="px-2 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
+            <div class="flex items-center gap-1.5 min-w-0 flex-1">
+              <Show when={store.mode === "shell"}>
+                <div class="h-7 flex items-center gap-1.5 max-w-[160px] min-w-0" style={{ padding: "0 4px 0 8px" }}>
+                  <span class="truncate text-13-medium text-text-strong">{language.t("prompt.mode.shell")}</span>
+                  <div class="size-4 shrink-0" />
+                </div>
+              </Show>
+
+              <Show when={store.mode === "normal"}>
+                <TooltipKeybind
+                  placement="top"
+                  gutter={4}
+                  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]"
+                    valueClass="truncate text-13-regular"
+                    triggerStyle={{ height: "28px" }}
+                    variant="ghost"
+                  />
+                </TooltipKeybind>
+                <Show
+                  when={providers.paid().length > 0}
+                  fallback={
+                    <TooltipKeybind
+                      placement="top"
+                      gutter={4}
+                      title={language.t("command.model.choose")}
+                      keybind={command.keybind("model.choose")}
+                    >
+                      <Button
+                        as="div"
+                        variant="ghost"
+                        size="normal"
+                        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
+                            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")}
+                        </span>
+                        <Icon name="chevron-down" size="small" class="shrink-0" />
+                      </Button>
+                    </TooltipKeybind>
+                  }
+                >
+                  <TooltipKeybind
+                    placement="top"
+                    gutter={4}
+                    title={language.t("command.model.choose")}
+                    keybind={command.keybind("model.choose")}
+                  >
+                    <ModelSelectorPopover
+                      triggerAs={Button}
+                      triggerProps={{
+                        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
+                          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")}
+                      </span>
+                      <Icon name="chevron-down" size="small" class="shrink-0" />
+                    </ModelSelectorPopover>
+                  </TooltipKeybind>
+                </Show>
+                <TooltipKeybind
+                  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}
+                    title={language.t(mode === "shell" ? "command.prompt.mode.shell" : "command.prompt.mode.normal")}
+                    keybind={command.keybind(mode === "shell" ? "prompt.mode.shell" : "prompt.mode.normal")}
+                    class="size-full flex items-center justify-center"
+                  >
+                    <Icon
+                      name={mode === "shell" ? "console" : "prompt"}
+                      class="size-[18px]"
+                      classList={{
+                        "text-icon-strong-base": mode === "shell" && store.mode === "shell",
+                        "text-icon-interactive-base": mode === "normal" && store.mode === "normal",
+                        "text-icon-weak": store.mode !== mode,
+                      }}
+                    />
+                  </TooltipKeybind>
+                )}
+                onSelect={(mode) => mode && setMode(mode)}
+                fill
+                pad="none"
+                class="w-[68px]"
+              />
+            </div>
+          </div>
+        </div>
+      </Show>
     </div>
   )
 }

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

@@ -41,10 +41,9 @@ 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 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
-                    "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !selected,
-                    "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
-                      selected,
+                    "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,
+                    "hover:bg-surface-interactive-weak": !!item.commentID && !selected,
+                    "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,27 +9,40 @@ 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", t })).toBe(
+    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", suggest: true, t })).toBe(
       "prompt.placeholder.summarizeComment",
     )
-    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", t })).toBe(
+    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", suggest: true, t })).toBe(
       "prompt.placeholder.summarizeComments",
     )
   })
 
-  test("returns default placeholder with example", () => {
+  test("returns default placeholder with example when suggestions enabled", () => {
     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,6 +2,7 @@ type PromptPlaceholderInput = {
   mode: "normal" | "shell"
   commentCount: number
   example: string
+  suggest: boolean
   t: (key: string, params?: Record<string, string>) => string
 }
 
@@ -9,5 +10,6 @@ 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-3 -translate-y-full origin-bottom-left max-h-80 min-h-10
-                 overflow-auto no-scrollbar flex flex-col p-2 rounded-md
-                 border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
+        class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
+                 overflow-auto no-scrollbar flex flex-col p-2 rounded-[12px]
+                 bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]"
         onMouseDown={(e) => e.preventDefault()}
       >
         <Switch>

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

@@ -80,6 +80,7 @@ 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
@@ -87,6 +88,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         sessionID,
       })
       .catch(() => {})
+      .finally(() => {
+        globalSync.todo.set(sessionID, undefined)
+      })
   }
 
   const restoreCommentItems = (items: CommentItem[]) => {

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

@@ -1,6 +1,7 @@
-import { For, Show, createMemo, type Component } from "solid-js"
+import { For, Show, createMemo, onCleanup, onMount, 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"
@@ -12,25 +13,98 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
   const language = useLanguage()
 
   const questions = createMemo(() => props.request.questions)
-  const single = createMemo(() => questions().length === 1 && questions()[0]?.multiple !== true)
+  const total = createMemo(() => questions().length)
 
   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 value = input()
-    if (!value) return false
-    return store.answers[store.tab]?.includes(value) ?? false
+
+  const summary = createMemo(() => {
+    const n = Math.min(store.tab + 1, total())
+    return `${n} of ${total()} questions`
+  })
+
+  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) => {
@@ -64,23 +138,13 @@ 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 (single()) {
-      void reply([[answer]])
-      return
-    }
-
-    setStore("tab", store.tab + 1)
+    if (custom) setStore("custom", store.tab, answer)
+    if (!custom) setStore("customOn", store.tab, false)
+    setStore("editing", false)
   }
 
   const toggle = (answer: string) => {
@@ -90,16 +154,41 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     })
   }
 
-  const selectTab = (index: number) => {
-    setStore("tab", index)
+  const customToggle = () => {
+    if (store.sending) return
+
+    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) {
-      setStore("editing", true)
+      customOpen()
       return
     }
 
@@ -112,176 +201,225 @@ export const QuestionDock: Component<{ request: QuestionRequest }> = (props) =>
     pick(opt.label)
   }
 
-  const handleCustomSubmit = (e: Event) => {
-    e.preventDefault()
+  const commitCustom = () => {
+    setStore("editing", false)
+    customUpdate(input())
+  }
+
+  const next = () => {
     if (store.sending) return
+    if (store.editing) commitCustom()
 
-    const value = input().trim()
-    if (!value) {
-      setStore("editing", false)
+    if (store.tab >= total() - 1) {
+      submit()
       return
     }
 
-    if (multi()) {
-      setStore("answers", store.tab, (current = []) => {
-        if (current.includes(value)) return current
-        return [...current, value]
-      })
-      setStore("editing", false)
-      return
-    }
+    setStore("tab", store.tab + 1)
+    setStore("editing", false)
+  }
 
-    pick(value, true)
+  const back = () => {
+    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 (
-    <div data-component="question-prompt">
-      <Show when={!single()}>
-        <div data-slot="question-tabs">
-          <For each={questions()}>
-            {(q, index) => {
-              const active = () => index() === store.tab
-              const answered = () => (store.answers[index()]?.length ?? 0) > 0
-              return (
+    <DockPrompt
+      kind="question"
+      ref={(el) => (root = el)}
+      header={
+        <>
+          <div data-slot="question-header-title">{summary()}</div>
+          <div data-slot="question-progress">
+            <For each={questions()}>
+              {(_, i) => (
                 <button
-                  data-slot="question-tab"
-                  data-active={active()}
-                  data-answered={answered()}
+                  type="button"
+                  data-slot="question-progress-segment"
+                  data-active={i() === store.tab}
+                  data-answered={
+                    (store.answers[i()]?.length ?? 0) > 0 ||
+                    (store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
+                  }
                   disabled={store.sending}
-                  onClick={() => selectTab(index())}
-                >
-                  {q.header}
-                </button>
-              )
-            }}
-          </For>
-          <button
-            data-slot="question-tab"
-            data-active={confirm()}
-            disabled={store.sending}
-            onClick={() => selectTab(questions().length)}
-          >
-            {language.t("ui.common.confirm")}
-          </button>
-        </div>
-      </Show>
-
-      <Show when={!confirm()}>
-        <div data-slot="question-content">
-          <div data-slot="question-text">
-            {question()?.question}
-            {multi() ? " " + language.t("ui.question.multiHint") : ""}
-          </div>
-          <div data-slot="question-options">
-            <For each={options()}>
-              {(opt, i) => {
-                const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false
-                return (
-                  <button
-                    data-slot="question-option"
-                    data-picked={picked()}
-                    disabled={store.sending}
-                    onClick={() => selectOption(i())}
-                  >
-                    <span data-slot="option-label">{opt.label}</span>
-                    <Show when={opt.description}>
-                      <span data-slot="option-description">{opt.description}</span>
-                    </Show>
-                    <Show when={picked()}>
-                      <Icon name="check-small" size="normal" />
-                    </Show>
-                  </button>
-                )
-              }}
+                  onClick={() => jump(i())}
+                  aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
+                />
+              )}
             </For>
+          </div>
+        </>
+      }
+      footer={
+        <>
+          <Button variant="ghost" size="large" disabled={store.sending} onClick={reject}>
+            {language.t("ui.common.dismiss")}
+          </Button>
+          <div data-slot="question-footer-actions">
+            <Show when={store.tab > 0}>
+              <Button variant="secondary" size="large" disabled={store.sending} onClick={back}>
+                {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
+          when={store.editing}
+          fallback={
             <button
               data-slot="question-option"
-              data-picked={customPicked()}
+              data-custom="true"
+              data-picked={on()}
+              role={multi() ? "checkbox" : "radio"}
+              aria-checked={on()}
               disabled={store.sending}
-              onClick={() => selectOption(options().length)}
+              onClick={customOpen}
             >
-              <span data-slot="option-label">{language.t("ui.messagePart.option.typeOwnAnswer")}</span>
-              <Show when={!store.editing && input()}>
-                <span data-slot="option-description">{input()}</span>
-              </Show>
-              <Show when={customPicked()}>
-                <Icon name="check-small" size="normal" />
-              </Show>
+              <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>
-            <Show when={store.editing}>
-              <form data-slot="custom-input-form" onSubmit={handleCustomSubmit}>
-                <input
-                  ref={(el) => setTimeout(() => el.focus(), 0)}
-                  type="text"
-                  data-slot="custom-input"
-                  placeholder={language.t("ui.question.custom.placeholder")}
-                  value={input()}
-                  disabled={store.sending}
-                  onInput={(e) => {
-                    setStore("custom", store.tab, e.currentTarget.value)
-                  }}
-                />
-                <Button type="submit" variant="primary" size="small" disabled={store.sending}>
-                  {multi() ? language.t("ui.common.add") : language.t("ui.common.submit")}
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="small"
-                  disabled={store.sending}
-                  onClick={() => setStore("editing", false)}
-                >
-                  {language.t("ui.common.cancel")}
-                </Button>
-              </form>
-            </Show>
-          </div>
-        </div>
-      </Show>
-
-      <Show when={confirm()}>
-        <div data-slot="question-review">
-          <div data-slot="review-title">{language.t("ui.messagePart.review.title")}</div>
-          <For each={questions()}>
-            {(q, index) => {
-              const value = () => store.answers[index()]?.join(", ") ?? ""
-              const answered = () => Boolean(value())
-              return (
-                <div data-slot="review-item">
-                  <span data-slot="review-label">{q.question}</span>
-                  <span data-slot="review-value" data-answered={answered()}>
-                    {answered() ? value() : language.t("ui.question.review.notAnswered")}
-                  </span>
-                </div>
-              )
+          }
+        >
+          <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()
             }}
-          </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}
+            onSubmit={(e) => {
+              e.preventDefault()
+              commitCustom()
+            }}
+          >
+            <span
+              data-slot="question-option-check"
+              aria-hidden="true"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                customToggle()
+              }}
             >
-              {language.t("ui.common.next")}
-            </Button>
-          </Show>
+              <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
+                ref={(el) =>
+                  setTimeout(() => {
+                    el.focus()
+                    el.style.height = "0px"
+                    el.style.height = `${el.scrollHeight}px`
+                  }, 0)
+                }
+                data-slot="question-custom-input"
+                placeholder={language.t("ui.question.custom.placeholder")}
+                value={input()}
+                rows={1}
+                disabled={store.sending}
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    e.preventDefault()
+                    setStore("editing", false)
+                    return
+                  }
+                  if (e.key !== "Enter" || e.shiftKey) return
+                  e.preventDefault()
+                  commitCustom()
+                }}
+                onInput={(e) => {
+                  customUpdate(e.currentTarget.value)
+                  e.currentTarget.style.height = "0px"
+                  e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+                }}
+              />
+            </span>
+          </form>
         </Show>
       </div>
-    </div>
+    </DockPrompt>
   )
 }

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

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

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

@@ -0,0 +1,208 @@
+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-header.tsx

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

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

@@ -196,24 +196,26 @@ export function StatusPopover() {
       triggerProps={{
         variant: "ghost",
         class:
-          "rounded-md h-[24px] px-3 gap-2 border border-border-base bg-surface-panel shadow-none data-[expanded]:bg-surface-raised-base-active",
+          "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",
         style: { scale: 1 },
       }}
       trigger={
-        <div class="flex items-center gap-1.5">
-          <div
-            classList={{
-              "size-1.5 rounded-full": true,
-              "bg-icon-success-base": overallHealthy(),
-              "bg-icon-critical-base": !overallHealthy() && server.healthy() !== undefined,
-              "bg-border-weak-base": server.healthy() === undefined,
-            }}
-          />
+        <div class="flex items-center gap-0.5">
+          <div class="size-4 flex items-center justify-center">
+            <div
+              classList={{
+                "size-1.5 rounded-full": true,
+                "bg-icon-success-base": overallHealthy(),
+                "bg-icon-critical-base": !overallHealthy() && 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={6}
+      gutter={4}
       placement="bottom-end"
       shift={-136}
     >

packages/app/src/components/terminal.tsx

@@ -346,7 +346,7 @@ export const Terminal = (props: TerminalProps) => {
       }
       ghostty = g
       term = t
-      output = terminalWriter((data) => t.write(data))
+      output = terminalWriter((data, done) => t.write(data, done))
 
       t.attachCustomKeyEventHandler((event) => {
         const key = event.key.toLowerCase()
@@ -520,9 +520,19 @@ export const Terminal = (props: TerminalProps) => {
     disposed = true
     if (fitFrame !== undefined) cancelAnimationFrame(fitFrame)
     if (sizeTimer !== undefined) clearTimeout(sizeTimer)
-    output?.flush()
-    persistTerminal({ term, addon: serializeAddon, cursor, pty: local.pty, onCleanup: props.onCleanup })
-    cleanup()
+    if (ws && ws.readyState !== WebSocket.CLOSED && ws.readyState !== WebSocket.CLOSING) ws.close()
+
+    const finalize = () => {
+      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 } from "@solidjs/router"
+import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
@@ -43,6 +43,7 @@ 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")
@@ -171,9 +172,10 @@ export function Titlebar() {
             <IconButton
               icon="menu"
               variant="ghost"
-              class="size-8 rounded-md"
+              class="titlebar-icon rounded-md"
               onClick={layout.mobileSidebar.toggle}
               aria-label={language.t("sidebar.menu.toggle")}
+              aria-expanded={layout.mobileSidebar.opened()}
             />
           </div>
         </Show>
@@ -182,13 +184,14 @@ export function Titlebar() {
             <IconButton
               icon="menu"
               variant="ghost"
-              class="size-8 rounded-md"
+              class="titlebar-icon rounded-md"
               onClick={layout.mobileSidebar.toggle}
               aria-label={language.t("sidebar.menu.toggle")}
+              aria-expanded={layout.mobileSidebar.opened()}
             />
           </div>
         </Show>
-        <div class="flex items-center gap-3 shrink-0">
+        <div class="flex items-center gap-1 shrink-0">
           <TooltipKeybind
             class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
             placement="bottom"
@@ -197,7 +200,7 @@ export function Titlebar() {
           >
             <Button
               variant="ghost"
-              class="group/sidebar-toggle size-6 p-0"
+              class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
               onClick={layout.sidebar.toggle}
               aria-label={language.t("command.sidebar.toggle")}
               aria-expanded={layout.sidebar.opened()}
@@ -205,56 +208,77 @@ 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-full" : "layout-left"}
+                  name={layout.sidebar.opened() ? "layout-left-partial" : "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-full"}
+                  name={layout.sidebar.opened() ? "layout-left" : "layout-left-partial"}
                   class="hidden group-active/sidebar-toggle:inline-block"
                 />
               </div>
             </Button>
           </TooltipKeybind>
-          <div class="hidden xl:flex items-center gap-1 shrink-0">
-            <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-              <Button
-                variant="ghost"
-                icon="arrow-left"
-                class="size-6 p-0"
-                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="arrow-right"
-                class="size-6 p-0"
-                disabled={!canForward()}
-                onClick={forward}
-                aria-label={language.t("common.goForward")}
-              />
-            </Tooltip>
+          <div class="hidden xl:flex items-center shrink-0">
+            <Show when={params.dir}>
+              <TooltipKeybind
+                placement="bottom"
+                title={language.t("command.session.new")}
+                keybind={command.keybind("session.new")}
+                openDelay={2000}
+              >
+                <Button
+                  variant="ghost"
+                  icon="new-session"
+                  class="titlebar-icon w-8 h-6 p-0 box-border"
+                  onClick={() => {
+                    if (!params.dir) return
+                    navigate(`/${params.dir}/session`)
+                  }}
+                  aria-label={language.t("command.session.new")}
+                />
+              </TooltipKeybind>
+            </Show>
+            <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}>
+              <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 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center">
+      <div class="min-w-0 flex items-center justify-center pointer-events-none">
         <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-6": !windows(),
+          "pr-2": !windows(),
         }}
         onMouseDown={drag}
       >
-        <div id="opencode-titlebar-right" class="flex items-center gap-3 shrink-0 justify-end" />
+        <div id="opencode-titlebar-right" class="flex items-center gap-1 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"])
+const EDITABLE_KEYBIND_IDS = new Set(["terminal.toggle", "terminal.new", "file.attach"])
 
 function actionId(id: string) {
   if (!id.startsWith(SUGGESTED_PREFIX)) return id

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

@@ -2,9 +2,14 @@ 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 { 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: () => {
@@ -93,12 +98,38 @@ 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", {
@@ -109,7 +140,9 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
             },
           })
           let yielded = Date.now()
+          resetHeartbeat()
           for await (const event of events.stream) {
+            resetHeartbeat()
             streamErrorLogged = false
             const directory = event.directory ?? "global"
             const payload = event.payload
@@ -130,7 +163,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
             await wait(0)
           }
         } catch (error) {
-          if (!streamErrorLogged) {
+          if (!aborted(error) && !streamErrorLogged) {
             streamErrorLogged = true
             console.error("[global-sdk] event stream failed", {
               url: server.url,
@@ -138,6 +171,10 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
               error,
             })
           }
+        } finally {
+          abort.signal.removeEventListener("abort", onAbort)
+          attempt = undefined
+          clearHeartbeat()
         }
 
         if (abort.signal.aborted) return
@@ -145,7 +182,20 @@ 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()
     })

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

@@ -4,6 +4,7 @@ import {
   type Project,
   type ProviderAuthResponse,
   type ProviderListResponse,
+  type Todo,
   createOpencodeClient,
 } from "@opencode-ai/sdk/v2/client"
 import { createStore, produce, reconcile } from "solid-js/store"
@@ -41,6 +42,9 @@ type GlobalStore = {
   error?: InitError
   path: Path
   project: Project[]
+  session_todo: {
+    [sessionID: string]: Todo[]
+  }
   provider: ProviderListResponse
   provider_auth: ProviderAuthResponse
   config: Config
@@ -87,12 +91,27 @@ 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({
@@ -270,6 +289,11 @@ 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
     }
 
@@ -283,6 +307,7 @@ function createGlobalSync() {
       store,
       setStore,
       push: queue.push,
+      setSessionTodo,
       vcsCache: children.vcsCache.get(directory),
       loadLsp: () => {
         sdkFor(directory)
@@ -353,6 +378,9 @@ function createGlobalSync() {
     bootstrap,
     updateConfig,
     project: projectApi,
+    todo: {
+      set: setSessionTodo,
+    },
   }
 }
 

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

@@ -6,6 +6,7 @@ import {
   type ProviderAuthResponse,
   type ProviderListResponse,
   type QuestionRequest,
+  type Todo,
   createOpencodeClient,
 } from "@opencode-ai/sdk/v2/client"
 import { batch } from "solid-js"
@@ -20,6 +21,9 @@ type GlobalStore = {
   ready: boolean
   path: Path
   project: Project[]
+  session_todo: {
+    [sessionID: string]: Todo[]
+  }
   provider: ProviderListResponse
   provider_auth: ProviderAuthResponse
   config: Config
@@ -112,7 +116,7 @@ export async function bootstrapDirectory(input: {
   vcsCache: VcsCache
   loadSessions: (directory: string) => Promise<void> | void
 }) {
-  input.setStore("status", "loading")
+  if (input.store.status !== "complete") 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,6 +116,20 @@ 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") {
+  if (input.event.type === "global.disposed" || input.event.type === "server.connected") {
     input.refresh()
     return
   }
@@ -39,7 +39,12 @@ export function applyGlobalEvent(input: {
   })
 }
 
-function cleanupSessionCaches(store: Store<State>, setStore: SetStoreFunction<State>, sessionID: string) {
+function cleanupSessionCaches(
+  store: Store<State>,
+  setStore: SetStoreFunction<State>,
+  sessionID: string,
+  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
+) {
   if (!sessionID) return
   const hasAny =
     store.message[sessionID] !== undefined ||
@@ -48,6 +53,7 @@ function cleanupSessionCaches(store: Store<State>, setStore: SetStoreFunction<St
     store.permission[sessionID] !== undefined ||
     store.question[sessionID] !== undefined ||
     store.session_status[sessionID] !== undefined
+  setSessionTodo?.(sessionID, undefined)
   if (!hasAny) return
   setStore(
     produce((draft) => {
@@ -77,6 +83,7 @@ export function applyDirectoryEvent(input: {
   directory: string
   loadLsp: () => void
   vcsCache?: VcsCache
+  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void
 }) {
   const event = input.event
   switch (event.type) {
@@ -110,7 +117,7 @@ export function applyDirectoryEvent(input: {
             }),
           )
         }
-        cleanupSessionCaches(input.store, input.setStore, info.id)
+        cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
         if (info.parentID) break
         input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
         break
@@ -136,7 +143,7 @@ export function applyDirectoryEvent(input: {
           }),
         )
       }
-      cleanupSessionCaches(input.store, input.setStore, info.id)
+      cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
       if (info.parentID) break
       input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
       break
@@ -149,6 +156,7 @@ 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/sync.tsx

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

packages/app/src/i18n/ar.ts

@@ -63,6 +63,8 @@ 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": "تبديل مساحات العمل",
@@ -206,9 +208,11 @@ 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": "ما هو المكدس التقني لهذا المشروع؟",
@@ -447,6 +451,9 @@ 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,6 +63,8 @@ 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",
@@ -206,9 +208,11 @@ 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?",
@@ -450,6 +454,9 @@ 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,6 +69,8 @@ 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",
@@ -224,9 +226,11 @@ 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",
@@ -505,6 +509,9 @@ 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,6 +69,8 @@ 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",
@@ -222,9 +224,11 @@ 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",
@@ -500,6 +504,9 @@ 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,6 +67,8 @@ 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",
@@ -211,9 +213,11 @@ 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?",
@@ -458,6 +462,9 @@ 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,6 +69,8 @@ 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",
@@ -224,9 +226,11 @@ 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",
@@ -266,7 +270,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": "Attach file",
+  "prompt.action.attachFile": "Add file",
   "prompt.attachment.remove": "Remove attachment",
   "prompt.action.send": "Send",
   "prompt.action.stop": "Stop",
@@ -504,6 +508,9 @@ 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}})",
@@ -516,7 +523,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,6 +69,8 @@ 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",
@@ -223,9 +225,11 @@ 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",
@@ -506,6 +510,9 @@ 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,6 +63,8 @@ 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",
@@ -206,9 +208,11 @@ 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 ?",
@@ -456,6 +460,9 @@ 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,6 +63,8 @@ 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": "ワークスペースを切り替え",
@@ -205,9 +207,11 @@ 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": "このプロジェクトの技術スタックは何ですか？",
@@ -448,6 +452,9 @@ 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,6 +67,8 @@ 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": "작업 공간 전환",
@@ -209,9 +211,11 @@ 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": "이 프로젝트의 기술 스택이 무엇인가요?",
@@ -450,6 +454,9 @@ 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,6 +72,8 @@ 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",
@@ -226,9 +228,11 @@ 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",
@@ -506,6 +510,9 @@ 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,6 +63,8 @@ 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",
@@ -207,9 +209,11 @@ 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?",
@@ -449,6 +453,9 @@ 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,6 +69,8 @@ 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": "Переключить рабочие пространства",
@@ -223,9 +225,11 @@ 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 в коде",
@@ -504,6 +508,9 @@ 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,6 +69,8 @@ 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": "สลับพื้นที่ทำงาน",
@@ -223,9 +225,11 @@ 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 ในโค้ดเบส",
@@ -501,6 +505,9 @@ 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,6 +93,9 @@ 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": "停止自动接受编辑",
 
@@ -244,9 +247,11 @@ 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": "这个项目的技术栈是什么？",
@@ -500,6 +505,9 @@ 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,6 +73,8 @@ 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": "切換工作區",
@@ -223,9 +225,11 @@ 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",
@@ -497,6 +501,9 @@ 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/pages/directory-layout.tsx

@@ -30,7 +30,6 @@ 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-sm": true,
+          "flex flex-col min-h-0 bg-background-stronger border border-b-0 border-border-weak-base rounded-tl-[12px]": 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-16-medium text-text-strong truncate"
-                      displayClass="text-16-medium text-text-strong truncate"
+                      class="text-14-medium text-text-strong truncate"
+                      displayClass="text-14-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-sm": !layout.sidebar.opened(),
+            "xl:border-l xl:rounded-tl-[12px]": !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-2 overflow-y-auto no-scrollbar">
+            <div class="h-full w-full flex flex-col items-center gap-3 px-3 py-3 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-3 flex flex-col items-center gap-2">
+        <div class="shrink-0 w-full pt-3 pb-6 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

@@ -5,7 +5,6 @@ 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"
@@ -20,9 +19,11 @@ 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 { useGlobalSync } from "@/context/global-sync"
 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"
@@ -34,6 +35,7 @@ import { useSDK } from "@/context/sdk"
 import { usePrompt } from "@/context/prompt"
 import { useComments } from "@/context/comments"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
+import { usePermission } from "@/context/permission"
 import { showToast } from "@opencode-ai/ui/toast"
 import { SessionHeader, SessionContextTab, SortableTab, FileVisual, NewSessionView } from "@/components/session"
 import { navMark, navParams } from "@/utils/perf"
@@ -89,6 +91,7 @@ export default function Page() {
   const local = useLocal()
   const file = useFile()
   const sync = useSync()
+  const globalSync = useGlobalSync()
   const terminal = useTerminal()
   const dialog = useDialog()
   const codeComponent = useCodeComponent()
@@ -99,6 +102,7 @@ export default function Page() {
   const sdk = useSDK()
   const prompt = usePrompt()
   const comments = useComments()
+  const permission = usePermission()
 
   const permRequest = createMemo(() => {
     const sessionID = params.id
@@ -229,7 +233,7 @@ export default function Page() {
     })
   }
 
-  const isDesktop = createMediaQuery("(min-width: 1024px)")
+  const isDesktop = createMediaQuery("(min-width: 768px)")
   const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
   const desktopFileTreeOpen = createMemo(() => isDesktop() && layout.fileTree.opened())
   const desktopSidePanelOpen = createMemo(() => desktopReviewOpen() || desktopFileTreeOpen())
@@ -269,7 +273,6 @@ export default function Page() {
     if (!path) return
     file.load(path)
     openReviewPanel()
-    tabs().setActive(next)
   }
 
   createEffect(() => {
@@ -554,13 +557,11 @@ 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 ?? [])
@@ -651,6 +652,7 @@ 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
 
@@ -673,7 +675,8 @@ export default function Page() {
     sdk.directory
     const id = params.id
     if (!id) return
-    sync.session.sync(id)
+    void sync.session.sync(id)
+    void sync.session.todo(id)
   })
 
   createEffect(() => {
@@ -726,13 +729,17 @@ export default function Page() {
   )
 
   const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? idle)
+  const todos = createMemo(() => {
+    const id = params.id
+    if (!id) return []
+    return globalSync.data.session_todo[id] ?? []
+  })
 
   createEffect(
     on(
       sessionKey,
       () => {
         setStore("messageId", undefined)
-        setStore("expanded", {})
         setStore("changes", "session")
         setUi("autoCreated", false)
       },
@@ -751,12 +758,6 @@ 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
@@ -767,6 +768,11 @@ 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
@@ -806,8 +812,8 @@ export default function Page() {
       return
     }
 
-    // Don't autofocus chat if terminal panel is open
-    if (view().terminal.opened()) return
+    // Don't autofocus chat if desktop terminal panel is open
+    if (isDesktop() && 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") {
@@ -905,11 +911,29 @@ export default function Page() {
   const focusInput = () => inputRef?.focus()
 
   useSessionCommands({
-    activeMessage,
+    command,
+    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,
   })
 
@@ -933,7 +957,6 @@ export default function Page() {
       onSelect={(option) => option && setStore("changes", option)}
       variant="ghost"
       size="large"
-      triggerStyle={{ "font-size": "var(--font-size-large)" }}
     />
   )
 
@@ -1421,12 +1444,12 @@ export default function Page() {
     ({ height }) => {
       const next = Math.ceil(height)
 
-      if (next === store.promptHeight) return
+      if (next === dockHeight) return
 
       const el = scroller
       const stick = el ? el.scrollHeight - el.clientHeight - el.scrollTop < 10 : false
 
-      setStore("promptHeight", next)
+      dockHeight = next
 
       if (stick && el) {
         requestAnimationFrame(() => {
@@ -1524,13 +1547,7 @@ 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"
-        classList={{
-          "flex-col": !isDesktop(),
-          "flex-row": isDesktop(),
-        }}
-      >
+      <div class="flex-1 min-h-0 flex flex-col md:flex-row">
         <SessionMobileTabs
           open={!isDesktop() && !!params.id}
           mobileTab={store.mobileTab}
@@ -1545,12 +1562,11 @@ export default function Page() {
         <div
           classList={{
             "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger": true,
-            "flex-1 pt-2 md:pt-3": true,
+            "flex-1": 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">
@@ -1562,7 +1578,7 @@ export default function Page() {
                     mobileFallback={reviewContent({
                       diffStyle: "unified",
                       classes: {
-                        root: "pb-[calc(var(--prompt-height,8rem)+32px)]",
+                        root: "pb-8",
                         header: "px-4",
                         container: "px-4",
                       },
@@ -1627,8 +1643,6 @@ 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>
@@ -1659,6 +1673,7 @@ export default function Page() {
             questionRequest={questionRequest}
             permissionRequest={permRequest}
             blocked={blocked()}
+            todos={todos()}
             promptReady={prompt.ready()}
             handoffPrompt={handoff.session.get(sessionKey())?.prompt}
             t={language.t as (key: string, vars?: Record<string, string | number | boolean>) => string}
@@ -1731,7 +1746,7 @@ export default function Page() {
       </div>
 
       <TerminalPanel
-        open={view().terminal.opened()}
+        open={isDesktop() && view().terminal.opened()}
         height={layout.terminal.height()}
         resize={layout.terminal.resize}
         close={view().terminal.close}

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

@@ -4,10 +4,10 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 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 { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
+import { SessionContextUsage } from "@/components/session-context-usage"
 
 const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
   const current = target instanceof Element ? target : undefined
@@ -88,8 +88,6 @@ export function MessageTimeline(props: {
   onUnregisterMessage: (id: string) => void
   onFirstTurnMount?: () => void
   lastUserMessageID?: string
-  expanded: Record<string, boolean>
-  onToggleExpanded: (id: string) => void
 }) {
   let touchGesture: number | undefined
 
@@ -100,7 +98,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-[calc(var(--prompt-height,8rem)+32px)] z-[60] pointer-events-none transition-all duration-200 ease-out"
+          class="absolute left-1/2 -translate-x-1/2 bottom-6 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,
@@ -164,14 +162,15 @@ export function MessageTimeline(props: {
           <Show when={props.showHeader}>
             <div
               classList={{
-                "sticky top-0 z-30 bg-background-stronger": true,
+                "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
                 "w-full": true,
-                "px-4 md:px-6": true,
+                "pb-4": 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-10 w-full flex items-center justify-between gap-2">
-                <div class="flex items-center gap-1 min-w-0 flex-1">
+              <div class="h-12 w-full flex items-center justify-between gap-2">
+                <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
                   <Show when={props.parentID}>
                     <IconButton
                       tabIndex={-1}
@@ -185,7 +184,10 @@ export function MessageTimeline(props: {
                     <Show
                       when={props.titleState.editing}
                       fallback={
-                        <h1 class="text-16-medium text-text-strong truncate min-w-0" onDblClick={props.openTitleEditor}>
+                        <h1
+                          class="text-14-medium text-text-strong truncate grow-1 min-w-0 pl-2"
+                          onDblClick={props.openTitleEditor}
+                        >
                           {props.title}
                         </h1>
                       }
@@ -194,7 +196,8 @@ export function MessageTimeline(props: {
                         ref={props.titleRef}
                         value={props.titleState.draft}
                         disabled={props.titleState.saving}
-                        class="text-16-medium text-text-strong grow-1 min-w-0"
+                        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) => props.onTitleDraft(event.currentTarget.value)}
                         onKeyDown={(event) => {
                           event.stopPropagation()
@@ -215,19 +218,24 @@ export function MessageTimeline(props: {
                 </div>
                 <Show when={props.sessionID}>
                   {(id) => (
-                    <div class="shrink-0 flex items-center">
-                      <DropdownMenu open={props.titleState.menuOpen} onOpenChange={props.onTitleMenuOpen}>
-                        <Tooltip value={props.t("common.moreOptions")} placement="top">
-                          <DropdownMenu.Trigger
-                            as={IconButton}
-                            icon="dot-grid"
-                            variant="ghost"
-                            class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                            aria-label={props.t("common.moreOptions")}
-                          />
-                        </Tooltip>
+                    <div class="shrink-0 flex items-center gap-3">
+                      <SessionContextUsage placement="bottom" />
+                      <DropdownMenu
+                        gutter={4}
+                        placement="bottom-end"
+                        open={props.titleState.menuOpen}
+                        onOpenChange={props.onTitleMenuOpen}
+                      >
+                        <DropdownMenu.Trigger
+                          as={IconButton}
+                          icon="dot-grid"
+                          variant="ghost"
+                          class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                          aria-label={props.t("common.moreOptions")}
+                        />
                         <DropdownMenu.Portal>
                           <DropdownMenu.Content
+                            style={{ "min-width": "104px" }}
                             onCloseAutoFocus={(event) => {
                               if (!props.titleState.pendingRename) return
                               event.preventDefault()
@@ -263,7 +271,7 @@ export function MessageTimeline(props: {
           <div
             ref={props.setContentRef}
             role="log"
-            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]"
+            class="flex flex-col gap-12 items-start justify-start pb-16 transition-[margin]"
             classList={{
               "w-full": true,
               "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
@@ -316,8 +324,6 @@ export function MessageTimeline(props: {
                       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-prompt-dock.tsx

@@ -1,16 +1,18 @@
-import { For, Show } from "solid-js"
-import type { QuestionRequest } from "@opencode-ai/sdk/v2"
+import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
+import type { QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
 import { Button } from "@opencode-ai/ui/button"
-import { BasicTool } from "@opencode-ai/ui/basic-tool"
+import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
+import { Icon } from "@opencode-ai/ui/icon"
 import { PromptInput } from "@/components/prompt-input"
 import { QuestionDock } from "@/components/question-dock"
-import { questionSubtitle } from "@/pages/session/session-prompt-helpers"
+import { SessionTodoDock } from "@/components/session-todo-dock"
 
 export function SessionPromptDock(props: {
   centered: boolean
   questionRequest: () => QuestionRequest | undefined
   permissionRequest: () => { patterns: string[]; permission: string } | undefined
   blocked: boolean
+  todos: Todo[]
   promptReady: boolean
   handoffPrompt?: string
   t: (key: string, vars?: Record<string, string | number | boolean>) => string
@@ -22,10 +24,88 @@ export function SessionPromptDock(props: {
   onSubmit: () => void
   setPromptDockRef: (el: HTMLDivElement) => void
 }) {
+  const done = createMemo(
+    () =>
+      props.todos.length > 0 && props.todos.every((todo) => todo.status === "completed" || todo.status === "cancelled"),
+  )
+
+  const [dock, setDock] = createSignal(props.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(
+      () => [props.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}
-      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"
+      data-component="session-prompt-dock"
+      class="shrink-0 w-full pb-4 flex flex-col justify-center items-center bg-background-stronger pointer-events-none"
     >
       <div
         classList={{
@@ -35,18 +115,8 @@ export function SessionPromptDock(props: {
       >
         <Show when={props.questionRequest()} keyed>
           {(req) => {
-            const subtitle = questionSubtitle(req.questions.length, (key) => props.t(key))
             return (
-              <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,
-                  }}
-                />
+              <div>
                 <QuestionDock request={req} />
               </div>
             )
@@ -54,63 +124,79 @@ export function SessionPromptDock(props: {
         </Show>
 
         <Show when={props.permissionRequest()} keyed>
-          {(perm) => (
-            <div data-component="tool-part-wrapper" data-permission="true" class="mb-3">
-              <BasicTool
-                icon="checklist"
-                locked
-                defaultOpen
-                trigger={{
-                  title: props.t("notification.permission.title"),
-                  subtitle:
-                    perm.permission === "doom_loop"
-                      ? props.t("settings.permissions.tool.doom_loop.title")
-                      : perm.permission,
-                }}
-              >
-                <Show when={perm.patterns.length > 0}>
-                  <div class="flex flex-col gap-1 py-2 px-3 max-h-40 overflow-y-auto no-scrollbar">
-                    <For each={perm.patterns}>
-                      {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
-                    </For>
-                  </div>
-                </Show>
-                <Show when={perm.permission === "doom_loop"}>
-                  <div class="text-12-regular text-text-weak pb-2 px-3">
-                    {props.t("settings.permissions.tool.doom_loop.description")}
-                  </div>
-                </Show>
-              </BasicTool>
-              <div data-component="permission-prompt">
-                <div data-slot="permission-actions">
-                  <Button
-                    variant="ghost"
-                    size="small"
-                    onClick={() => props.onDecide("reject")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.deny")}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size="small"
-                    onClick={() => props.onDecide("always")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.allowAlways")}
-                  </Button>
-                  <Button
-                    variant="primary"
-                    size="small"
-                    onClick={() => props.onDecide("once")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.allowOnce")}
-                  </Button>
-                </div>
+          {(perm) => {
+            const toolDescription = () => {
+              const key = `settings.permissions.tool.${perm.permission}.description`
+              const value = props.t(key)
+              if (value === key) return ""
+              return value
+            }
+
+            return (
+              <div>
+                <DockPrompt
+                  kind="permission"
+                  header={
+                    <div data-slot="permission-row" data-variant="header">
+                      <span data-slot="permission-icon">
+                        <Icon name="warning" size="normal" />
+                      </span>
+                      <div data-slot="permission-header-title">{props.t("notification.permission.title")}</div>
+                    </div>
+                  }
+                  footer={
+                    <>
+                      <div />
+                      <div data-slot="permission-footer-actions">
+                        <Button
+                          variant="ghost"
+                          size="normal"
+                          onClick={() => props.onDecide("reject")}
+                          disabled={props.responding}
+                        >
+                          {props.t("ui.permission.deny")}
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          size="normal"
+                          onClick={() => props.onDecide("always")}
+                          disabled={props.responding}
+                        >
+                          {props.t("ui.permission.allowAlways")}
+                        </Button>
+                        <Button
+                          variant="primary"
+                          size="normal"
+                          onClick={() => props.onDecide("once")}
+                          disabled={props.responding}
+                        >
+                          {props.t("ui.permission.allowOnce")}
+                        </Button>
+                      </div>
+                    </>
+                  }
+                >
+                  <Show when={toolDescription()}>
+                    <div data-slot="permission-row">
+                      <span data-slot="permission-spacer" aria-hidden="true" />
+                      <div data-slot="permission-hint">{toolDescription()}</div>
+                    </div>
+                  </Show>
+
+                  <Show when={perm.patterns.length > 0}>
+                    <div data-slot="permission-row">
+                      <span data-slot="permission-spacer" aria-hidden="true" />
+                      <div data-slot="permission-patterns">
+                        <For each={perm.patterns}>
+                          {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
+                        </For>
+                      </div>
+                    </div>
+                  </Show>
+                </DockPrompt>
               </div>
-            </div>
-          )}
+            )
+          }}
         </Show>
 
         <Show when={!props.blocked}>
@@ -122,12 +208,39 @@ export function SessionPromptDock(props: {
               </div>
             }
           >
-            <PromptInput
-              ref={props.inputRef}
-              newSessionWorktree={props.newSessionWorktree}
-              onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
-              onSubmit={props.onSubmit}
-            />
+            <Show when={dock()}>
+              <div
+                classList={{
+                  "transition-[max-height,opacity,transform] duration-[400ms] ease-out overflow-hidden": true,
+                  "max-h-[320px]": !closing(),
+                  "max-h-0 pointer-events-none": closing(),
+                  "opacity-0 translate-y-9": closing() || opening(),
+                  "opacity-100 translate-y-0": !closing() && !opening(),
+                }}
+              >
+                <SessionTodoDock
+                  todos={props.todos}
+                  title={props.t("session.todo.title")}
+                  collapseLabel={props.t("session.todo.collapse")}
+                  expandLabel={props.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/use-session-commands.tsx

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

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

@@ -6,7 +6,10 @@ describe("terminalWriter", () => {
     const calls: string[] = []
     const scheduled: VoidFunction[] = []
     const writer = terminalWriter(
-      (data) => calls.push(data),
+      (data, done) => {
+        calls.push(data)
+        done?.()
+      },
       (flush) => scheduled.push(flush),
     )
 
@@ -24,10 +27,38 @@ describe("terminalWriter", () => {
   test("flush is a no-op when empty", () => {
     const calls: string[] = []
     const writer = terminalWriter(
-      (data) => calls.push(data),
+      (data, done) => {
+        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,16 +1,42 @@
 export function terminalWriter(
-  write: (data: string) => void,
+  write: (data: string, done?: VoidFunction) => void,
   schedule: (flush: VoidFunction) => void = queueMicrotask,
 ) {
   let chunks: string[] | undefined
+  let waits: VoidFunction[] | undefined
   let scheduled = false
+  let writing = false
 
-  const flush = () => {
+  const settle = () => {
+    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) return
+    if (!items?.length) {
+      settle()
+      return
+    }
     chunks = undefined
-    write(items.join(""))
+    writing = true
+    write(items.join(""), () => {
+      writing = false
+      if (chunks?.length) {
+        if (scheduled) return
+        scheduled = true
+        schedule(run)
+        return
+      }
+      settle()
+    })
   }
 
   const push = (data: string) => {
@@ -18,9 +44,21 @@ export function terminalWriter(
     if (chunks) chunks.push(data)
     else chunks = [data]
 
-    if (scheduled) return
+    if (scheduled || writing) return
     scheduled = true
-    schedule(flush)
+    schedule(run)
+  }
+
+  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/console/app/src/routes/index.css

@@ -174,21 +174,6 @@ body {
     }
   }
 
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    transition: background-color 5000000s ease-in-out 0s;
-  }
-
-  input:-webkit-autofill {
-    -webkit-text-fill-color: var(--color-text-strong) !important;
-  }
-
-  input:-moz-autofill {
-    -moz-text-fill-color: var(--color-text-strong) !important;
-  }
-
   [data-component="container"] {
     max-width: 67.5rem;
     margin: 0 auto;
@@ -683,6 +668,8 @@ body {
       max-width: none;
       max-height: none;
       display: block;
+      aspect-ratio: 16 / 9;
+      object-fit: cover;
     }
   }
 
@@ -1249,4 +1236,19 @@ body {
       text-decoration: underline;
     }
   }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: background-color 5000000s ease-in-out 0s;
+  }
+
+  input:-webkit-autofill {
+    -webkit-text-fill-color: var(--color-text-strong) !important;
+  }
+
+  input:-moz-autofill {
+    -moz-text-fill-color: var(--color-text-strong) !important;
+  }
 }

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 = 20
+const PARTS = 30
 
 // 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 = 20
+const PARTS = 30
 
 // read the line starting with "ZEN_MODELS"
 const lines = models.split("\n")

packages/console/core/src/model.ts

@@ -102,7 +102,17 @@ 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,10 +181,50 @@ 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,10 +181,50 @@ 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,10 +181,50 @@ 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,13 +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::io::{AsyncBufReadExt, BufReader};
-use tokio::process::Command;
-use tokio::sync::{mpsc, oneshot};
+use tokio::{
+    io::{AsyncBufRead, AsyncBufReadExt, BufReader},
+    process::Command,
+    sync::{mpsc, oneshot},
+    task::JoinHandle,
+};
 use tokio_stream::wrappers::ReceiverStream;
 use tracing::Instrument;
 
@@ -34,8 +38,8 @@ pub struct Config {
 
 #[derive(Clone, Debug)]
 pub enum CommandEvent {
-    Stdout(Vec<u8>),
-    Stderr(Vec<u8>),
+    Stdout(String),
+    Stderr(String),
     Error(String),
     Terminated(TerminatedPayload),
 }
@@ -64,10 +68,11 @@ pub async fn get_config(app: &AppHandle) -> Option<Config> {
 
     events
         .fold(String::new(), async |mut config_str, event| {
-            if let CommandEvent::Stdout(stdout) = event
-                && let Ok(s) = str::from_utf8(&stdout)
-            {
-                config_str += s
+            if let CommandEvent::Stdout(s) = &event {
+                config_str += s.as_str()
+            }
+            if let CommandEvent::Stderr(s) = &event {
+                config_str += s.as_str()
             }
 
             config_str
@@ -308,7 +313,7 @@ pub fn spawn_command(
         };
 
         let mut cmd = Command::new(shell);
-        cmd.args(["-il", "-c", &line]);
+        cmd.args(["-l", "-c", &line]);
 
         for (key, value) in envs {
             cmd.env(key, value);
@@ -317,9 +322,12 @@ pub fn spawn_command(
         cmd
     };
 
-    cmd.stdin(Stdio::null())
-        .stdout(Stdio::piped())
-        .stderr(Stdio::piped());
+    cmd.stdout(Stdio::piped());
+    cmd.stderr(Stdio::piped());
+    cmd.stdin(Stdio::null());
+
+    #[cfg(windows)]
+    cmd.creation_flags(0x0800_0000);
 
     let mut wrap = CommandWrap::from(cmd);
 
@@ -334,32 +342,25 @@ pub fn spawn_command(
     }
 
     let mut child = wrap.spawn()?;
-    let stdout = child.stdout().take();
-    let stderr = child.stderr().take();
+    let guard = Arc::new(tokio::sync::RwLock::new(()));
     let (tx, rx) = mpsc::channel(256);
     let (kill_tx, mut kill_rx) = mpsc::channel(1);
 
-    if let Some(stdout) = stdout {
-        let tx = tx.clone();
-        tokio::spawn(async move {
-            let mut lines = BufReader::new(stdout).lines();
-            while let Ok(Some(line)) = lines.next_line().await {
-                let _ = tx.send(CommandEvent::Stdout(line.into_bytes())).await;
-            }
-        });
-    }
+    let stdout = spawn_pipe_reader(
+        tx.clone(),
+        guard.clone(),
+        BufReader::new(child.stdout().take().unwrap()),
+        CommandEvent::Stdout,
+    );
+    let stderr = spawn_pipe_reader(
+        tx.clone(),
+        guard.clone(),
+        BufReader::new(child.stderr().take().unwrap()),
+        CommandEvent::Stderr,
+    );
 
-    if let Some(stderr) = stderr {
-        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 {
+    tokio::task::spawn(async move {
+        let mut kill_open = true;
         let status = loop {
             match child.try_wait() {
                 Ok(Some(status)) => break Ok(status),
@@ -368,8 +369,11 @@ pub fn spawn_command(
             }
 
             tokio::select! {
-                _ = kill_rx.recv() => {
-                    let _ = child.start_kill();
+                msg = kill_rx.recv(), if kill_open => {
+                    if msg.is_some() {
+                        let _ = child.start_kill();
+                    }
+                    kill_open = false;
                 }
                 _ = tokio::time::sleep(Duration::from_millis(100)) => {}
             }
@@ -387,6 +391,9 @@ pub fn spawn_command(
                 let _ = tx.send(CommandEvent::Error(err.to_string())).await;
             }
         }
+
+        stdout.abort();
+        stderr.abort();
     });
 
     let event_stream = ReceiverStream::new(rx);
@@ -397,9 +404,7 @@ 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))]
     {
@@ -435,12 +440,10 @@ pub fn serve(
         events
             .for_each(move |event| {
                 match event {
-                    CommandEvent::Stdout(line_bytes) => {
-                        let line = String::from_utf8_lossy(&line_bytes);
+                    CommandEvent::Stdout(line) => {
                         tracing::info!("{line}");
                     }
-                    CommandEvent::Stderr(line_bytes) => {
-                        let line = String::from_utf8_lossy(&line_bytes);
+                    CommandEvent::Stderr(line) => {
                         tracing::info!("{line}");
                     }
                     CommandEvent::Error(err) => {
@@ -492,11 +495,7 @@ pub mod sqlite_migration {
             }
 
             future::ready(match &event {
-                CommandEvent::Stdout(stdout) => {
-                    let Ok(s) = str::from_utf8(stdout) else {
-                        return future::ready(None);
-                    };
-
+                CommandEvent::Stdout(s) | CommandEvent::Stderr(s) => {
                     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);
@@ -515,3 +514,41 @@ 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/enterprise/src/routes/share/[shareID].tsx

@@ -224,7 +224,6 @@ export default function () {
                       {iife(() => {
                         const [store, setStore] = createStore({
                           messageId: undefined as string | undefined,
-                          expandedSteps: {} as Record<string, boolean>,
                         })
                         const messages = createMemo(() =>
                           data().sessionID
@@ -296,10 +295,7 @@ export default function () {
                                 {(message) => (
                                   <SessionTurn
                                     sessionID={data().sessionID}
-                                    sessionTitle={info().title}
                                     messageID={message.id}
-                                    stepsExpanded={store.expandedSteps[message.id] ?? false}
-                                    onStepsExpandedToggle={() => setStore("expandedSteps", message.id, (v) => !v)}
                                     classes={{
                                       root: "min-w-0 w-full relative",
                                       content: "flex flex-col justify-between !overflow-visible",
@@ -375,13 +371,6 @@ export default function () {
                                     <SessionTurn
                                       sessionID={data().sessionID}
                                       messageID={store.messageId ?? firstUserMessage()!.id!}
-                                      stepsExpanded={
-                                        store.expandedSteps[store.messageId ?? firstUserMessage()!.id!] ?? false
-                                      }
-                                      onStepsExpandedToggle={() => {
-                                        const id = store.messageId ?? firstUserMessage()!.id!
-                                        setStore("expandedSteps", id, (v) => !v)
-                                      }}
                                       classes={{
                                         root: "grow",
                                         content: "flex flex-col justify-between",

packages/enterprise/sst-env.d.ts

@@ -181,10 +181,50 @@ 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/function/sst-env.d.ts

@@ -181,10 +181,50 @@ 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/opencode/src/acp/README.md

@@ -44,6 +44,16 @@ opencode acp
 opencode acp --cwd /path/to/project
 ```
 
+### Question Tool Opt-In
+
+ACP excludes `QuestionTool` by default.
+
+```bash
+OPENCODE_ENABLE_QUESTION_TOOL=1 opencode acp
+```
+
+Enable this only for ACP clients that support interactive question prompts.
+
 ### Programmatic
 
 ```typescript

packages/opencode/src/acp/session.ts

@@ -21,7 +21,6 @@ export class ACPSessionManager {
     const session = await this.sdk.session
       .create(
         {
-          title: `ACP Session ${crypto.randomUUID()}`,
           directory: cwd,
         },
         { throwOnError: true },

packages/opencode/src/cli/cmd/auth.ts

@@ -159,6 +159,38 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string):
   return false
 }
 
+/**
+ * Build a deduplicated list of plugin-registered auth providers that are not
+ * already present in models.dev, respecting enabled/disabled provider lists.
+ * Pure function with no side effects; safe to test without mocking.
+ */
+export function resolvePluginProviders(input: {
+  hooks: Hooks[]
+  existingProviders: Record<string, unknown>
+  disabled: Set<string>
+  enabled?: Set<string>
+  providerNames: Record<string, string | undefined>
+}): Array<{ id: string; name: string }> {
+  const seen = new Set<string>()
+  const result: Array<{ id: string; name: string }> = []
+
+  for (const hook of input.hooks) {
+    if (!hook.auth) continue
+    const id = hook.auth.provider
+    if (seen.has(id)) continue
+    seen.add(id)
+    if (Object.hasOwn(input.existingProviders, id)) continue
+    if (input.disabled.has(id)) continue
+    if (input.enabled && !input.enabled.has(id)) continue
+    result.push({
+      id,
+      name: input.providerNames[id] ?? id,
+    })
+  }
+
+  return result
+}
+
 export const AuthCommand = cmd({
   command: "auth",
   describe: "manage credentials",
@@ -277,6 +309,13 @@ export const AuthLoginCommand = cmd({
           openrouter: 5,
           vercel: 6,
         }
+        const pluginProviders = resolvePluginProviders({
+          hooks: await Plugin.list(),
+          existingProviders: providers,
+          disabled,
+          enabled,
+          providerNames: Object.fromEntries(Object.entries(config.provider ?? {}).map(([id, p]) => [id, p.name])),
+        })
         let provider = await prompts.autocomplete({
           message: "Select provider",
           maxItems: 8,
@@ -298,6 +337,11 @@ export const AuthLoginCommand = cmd({
                 }[x.id],
               })),
             ),
+            ...pluginProviders.map((x) => ({
+              label: x.name,
+              value: x.id,
+              hint: "plugin",
+            })),
             {
               value: "other",
               label: "Other",

packages/opencode/src/cli/cmd/export.ts

@@ -18,7 +18,7 @@ export const ExportCommand = cmd({
   handler: async (args) => {
     await bootstrap(process.cwd(), async () => {
       let sessionID = args.sessionID
-      process.stderr.write(`Exporting session: ${sessionID ?? "latest"}`)
+      process.stderr.write(`Exporting session: ${sessionID ?? "latest"}\n`)
 
       if (!sessionID) {
         UI.empty()

packages/opencode/src/cli/cmd/session.ts

@@ -38,10 +38,34 @@ function pagerCmd(): string[] {
 export const SessionCommand = cmd({
   command: "session",
   describe: "manage sessions",
-  builder: (yargs: Argv) => yargs.command(SessionListCommand).demandCommand(),
+  builder: (yargs: Argv) => yargs.command(SessionListCommand).command(SessionDeleteCommand).demandCommand(),
   async handler() {},
 })
 
+export const SessionDeleteCommand = cmd({
+  command: "delete <sessionID>",
+  describe: "delete a session",
+  builder: (yargs: Argv) => {
+    return yargs.positional("sessionID", {
+      describe: "session ID to delete",
+      type: "string",
+      demandOption: true,
+    })
+  },
+  handler: async (args) => {
+    await bootstrap(process.cwd(), async () => {
+      try {
+        await Session.get(args.sessionID)
+      } catch {
+        UI.error(`Session not found: ${args.sessionID}`)
+        process.exit(1)
+      }
+      await Session.remove(args.sessionID)
+      UI.println(UI.Style.TEXT_SUCCESS_BOLD + `Session ${args.sessionID} deleted` + UI.Style.TEXT_NORMAL)
+    })
+  },
+})
+
 export const SessionListCommand = cmd({
   command: "list",
   describe: "list sessions",

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -227,12 +227,20 @@ export function Session() {
 
   createEffect(() => {
     const title = Locale.truncate(session()?.title ?? "", 50)
+    const pad = (text: string) => text.padEnd(10, " ")
+    const weak = (text: string) => UI.Style.TEXT_DIM + pad(text) + UI.Style.TEXT_NORMAL
+    const logo = UI.logo("  ").split(/\r?\n/)
     return exit.message.set(
       [
         ``,
-        `  █▀▀█  ${UI.Style.TEXT_DIM}${title}${UI.Style.TEXT_NORMAL}`,
-        `  █  █  ${UI.Style.TEXT_DIM}opencode -s ${session()?.id}${UI.Style.TEXT_NORMAL}`,
-        `  ▀▀▀▀  `,
+        `${logo[0] ?? ""}`,
+        `${logo[1] ?? ""}`,
+        `${logo[2] ?? ""}`,
+        `${logo[3] ?? ""}`,
+        ``,
+        `  ${weak("Session")}${UI.Style.TEXT_NORMAL_BOLD}${title}${UI.Style.TEXT_NORMAL}`,
+        `  ${weak("Continue")}${UI.Style.TEXT_NORMAL_BOLD}opencode -s ${session()?.id}${UI.Style.TEXT_NORMAL}`,
+        ``,
       ].join("\n"),
     )
   })

packages/opencode/src/cli/cmd/tui/routes/session/permission.tsx

@@ -64,12 +64,16 @@ function EditBody(props: { request: PermissionRequest }) {
 
   return (
     <box flexDirection="column" gap={1}>
-      <box flexDirection="row" gap={1} paddingLeft={1}>
-        <text fg={theme.textMuted}>{"→"}</text>
-        <text fg={theme.textMuted}>Edit {normalizePath(filepath())}</text>
-      </box>
       <Show when={diff()}>
-        <scrollbox height="100%">
+        <scrollbox
+          height="100%"
+          verticalScrollbarOptions={{
+            trackOptions: {
+              backgroundColor: theme.background,
+              foregroundColor: theme.borderActive,
+            },
+          }}
+        >
           <diff
             diff={diff()}
             view={view()}
@@ -91,6 +95,11 @@ function EditBody(props: { request: PermissionRequest }) {
           />
         </scrollbox>
       </Show>
+      <Show when={!diff()}>
+        <box paddingLeft={1}>
+          <text fg={theme.textMuted}>No diff provided</text>
+        </box>
+      </Show>
     </box>
   )
 }
@@ -194,76 +203,233 @@ export function PermissionPrompt(props: { request: PermissionRequest }) {
       </Match>
       <Match when={store.stage === "permission"}>
         {(() => {
+          const info = () => {
+            const permission = props.request.permission
+            const data = input()
+
+            if (permission === "edit") {
+              const raw = props.request.metadata?.filepath
+              const filepath = typeof raw === "string" ? raw : ""
+              return {
+                icon: "→",
+                title: `Edit ${normalizePath(filepath)}`,
+                body: <EditBody request={props.request} />,
+              }
+            }
+
+            if (permission === "read") {
+              const raw = data.filePath
+              const filePath = typeof raw === "string" ? raw : ""
+              return {
+                icon: "→",
+                title: `Read ${normalizePath(filePath)}`,
+                body: (
+                  <Show when={filePath}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Path: " + normalizePath(filePath)}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "glob") {
+              const pattern = typeof data.pattern === "string" ? data.pattern : ""
+              return {
+                icon: "✱",
+                title: `Glob "${pattern}"`,
+                body: (
+                  <Show when={pattern}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Pattern: " + pattern}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "grep") {
+              const pattern = typeof data.pattern === "string" ? data.pattern : ""
+              return {
+                icon: "✱",
+                title: `Grep "${pattern}"`,
+                body: (
+                  <Show when={pattern}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Pattern: " + pattern}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "list") {
+              const raw = data.path
+              const dir = typeof raw === "string" ? raw : ""
+              return {
+                icon: "→",
+                title: `List ${normalizePath(dir)}`,
+                body: (
+                  <Show when={dir}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Path: " + normalizePath(dir)}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "bash") {
+              const title =
+                typeof data.description === "string" && data.description ? data.description : "Shell command"
+              const command = typeof data.command === "string" ? data.command : ""
+              return {
+                icon: "#",
+                title,
+                body: (
+                  <Show when={command}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.text}>{"$ " + command}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "task") {
+              const type = typeof data.subagent_type === "string" ? data.subagent_type : "Unknown"
+              const desc = typeof data.description === "string" ? data.description : ""
+              return {
+                icon: "#",
+                title: `${Locale.titlecase(type)} Task`,
+                body: (
+                  <Show when={desc}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.text}>{"◉ " + desc}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "webfetch") {
+              const url = typeof data.url === "string" ? data.url : ""
+              return {
+                icon: "%",
+                title: `WebFetch ${url}`,
+                body: (
+                  <Show when={url}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"URL: " + url}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "websearch") {
+              const query = typeof data.query === "string" ? data.query : ""
+              return {
+                icon: "◈",
+                title: `Exa Web Search "${query}"`,
+                body: (
+                  <Show when={query}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Query: " + query}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "codesearch") {
+              const query = typeof data.query === "string" ? data.query : ""
+              return {
+                icon: "◇",
+                title: `Exa Code Search "${query}"`,
+                body: (
+                  <Show when={query}>
+                    <box paddingLeft={1}>
+                      <text fg={theme.textMuted}>{"Query: " + query}</text>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "external_directory") {
+              const meta = props.request.metadata ?? {}
+              const parent = typeof meta["parentDir"] === "string" ? meta["parentDir"] : undefined
+              const filepath = typeof meta["filepath"] === "string" ? meta["filepath"] : undefined
+              const pattern = props.request.patterns?.[0]
+              const derived =
+                typeof pattern === "string" ? (pattern.includes("*") ? path.dirname(pattern) : pattern) : undefined
+
+              const raw = parent ?? filepath ?? derived
+              const dir = normalizePath(raw)
+              const patterns = (props.request.patterns ?? []).filter((p): p is string => typeof p === "string")
+
+              return {
+                icon: "←",
+                title: `Access external directory ${dir}`,
+                body: (
+                  <Show when={patterns.length > 0}>
+                    <box paddingLeft={1} gap={1}>
+                      <text fg={theme.textMuted}>Patterns</text>
+                      <box>
+                        <For each={patterns}>{(p) => <text fg={theme.text}>{"- " + p}</text>}</For>
+                      </box>
+                    </box>
+                  </Show>
+                ),
+              }
+            }
+
+            if (permission === "doom_loop") {
+              return {
+                icon: "⟳",
+                title: "Continue after repeated failures",
+                body: (
+                  <box paddingLeft={1}>
+                    <text fg={theme.textMuted}>This keeps the session running despite repeated failures.</text>
+                  </box>
+                ),
+              }
+            }
+
+            return {
+              icon: "⚙",
+              title: `Call tool ${permission}`,
+              body: (
+                <box paddingLeft={1}>
+                  <text fg={theme.textMuted}>{"Tool: " + permission}</text>
+                </box>
+              ),
+            }
+          }
+
+          const current = info()
+
+          const header = () => (
+            <box flexDirection="column" gap={0}>
+              <box flexDirection="row" gap={1} flexShrink={0}>
+                <text fg={theme.warning}>{"△"}</text>
+                <text fg={theme.text}>Permission required</text>
+              </box>
+              <box flexDirection="row" gap={1} paddingLeft={2} flexShrink={0}>
+                <text fg={theme.textMuted} flexShrink={0}>
+                  {current.icon}
+                </text>
+                <text fg={theme.text}>{current.title}</text>
+              </box>
+            </box>
+          )
+
           const body = (
             <Prompt
               title="Permission required"
-              body={
-                <Switch>
-                  <Match when={props.request.permission === "edit"}>
-                    <EditBody request={props.request} />
-                  </Match>
-                  <Match when={props.request.permission === "read"}>
-                    <TextBody icon="→" title={`Read ` + normalizePath(input().filePath as string)} />
-                  </Match>
-                  <Match when={props.request.permission === "glob"}>
-                    <TextBody icon="✱" title={`Glob "` + (input().pattern ?? "") + `"`} />
-                  </Match>
-                  <Match when={props.request.permission === "grep"}>
-                    <TextBody icon="✱" title={`Grep "` + (input().pattern ?? "") + `"`} />
-                  </Match>
-                  <Match when={props.request.permission === "list"}>
-                    <TextBody icon="→" title={`List ` + normalizePath(input().path as string)} />
-                  </Match>
-                  <Match when={props.request.permission === "bash"}>
-                    <TextBody
-                      icon="#"
-                      title={(input().description as string) ?? ""}
-                      description={("$ " + input().command) as string}
-                    />
-                  </Match>
-                  <Match when={props.request.permission === "task"}>
-                    <TextBody
-                      icon="#"
-                      title={`${Locale.titlecase((input().subagent_type as string) ?? "Unknown")} Task`}
-                      description={"◉ " + input().description}
-                    />
-                  </Match>
-                  <Match when={props.request.permission === "webfetch"}>
-                    <TextBody icon="%" title={`WebFetch ` + (input().url ?? "")} />
-                  </Match>
-                  <Match when={props.request.permission === "websearch"}>
-                    <TextBody icon="◈" title={`Exa Web Search "` + (input().query ?? "") + `"`} />
-                  </Match>
-                  <Match when={props.request.permission === "codesearch"}>
-                    <TextBody icon="◇" title={`Exa Code Search "` + (input().query ?? "") + `"`} />
-                  </Match>
-                  <Match when={props.request.permission === "external_directory"}>
-                    {(() => {
-                      const meta = props.request.metadata ?? {}
-                      const parent = typeof meta["parentDir"] === "string" ? meta["parentDir"] : undefined
-                      const filepath = typeof meta["filepath"] === "string" ? meta["filepath"] : undefined
-                      const pattern = props.request.patterns?.[0]
-                      const derived =
-                        typeof pattern === "string"
-                          ? pattern.includes("*")
-                            ? path.dirname(pattern)
-                            : pattern
-                          : undefined
-
-                      const raw = parent ?? filepath ?? derived
-                      const dir = normalizePath(raw)
-
-                      return <TextBody icon="←" title={`Access external directory ` + dir} />
-                    })()}
-                  </Match>
-                  <Match when={props.request.permission === "doom_loop"}>
-                    <TextBody icon="⟳" title="Continue after repeated failures" />
-                  </Match>
-                  <Match when={true}>
-                    <TextBody icon="⚙" title={`Call tool ` + props.request.permission} />
-                  </Match>
-                </Switch>
-              }
+              header={header()}
+              body={current.body}
               options={{ once: "Allow once", always: "Allow always", reject: "Reject" }}
               escapeKey="reject"
               fullscreen
@@ -372,6 +538,7 @@ function RejectPrompt(props: { onConfirm: (message: string) => void; onCancel: (
 
 function Prompt<const T extends Record<string, string>>(props: {
   title: string
+  header?: JSX.Element
   body: JSX.Element
   options: T
   escapeKey?: keyof T
@@ -445,10 +612,19 @@ function Prompt<const T extends Record<string, string>>(props: {
           })}
     >
       <box gap={1} paddingLeft={1} paddingRight={3} paddingTop={1} paddingBottom={1} flexGrow={1}>
-        <box flexDirection="row" gap={1} paddingLeft={1} flexShrink={0}>
-          <text fg={theme.warning}>{"△"}</text>
-          <text fg={theme.text}>{props.title}</text>
-        </box>
+        <Show
+          when={props.header}
+          fallback={
+            <box flexDirection="row" gap={1} paddingLeft={1} flexShrink={0}>
+              <text fg={theme.warning}>{"△"}</text>
+              <text fg={theme.text}>{props.title}</text>
+            </box>
+          }
+        >
+          <box paddingLeft={1} flexShrink={0}>
+            {props.header}
+          </box>
+        </Show>
         {props.body}
       </box>
       <box

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -80,7 +80,15 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
         paddingRight={2}
         position={props.overlay ? "absolute" : "relative"}
       >
-        <scrollbox flexGrow={1}>
+        <scrollbox
+          flexGrow={1}
+          verticalScrollbarOptions={{
+            trackOptions: {
+              backgroundColor: theme.background,
+              foregroundColor: theme.borderActive,
+            },
+          }}
+        >
           <box flexShrink={0} gap={1} paddingRight={1}>
             <box paddingRight={1}>
               <text fg={theme.text}>

packages/opencode/src/flag/flag.ts

@@ -30,6 +30,7 @@ export namespace Flag {
   export declare const OPENCODE_CLIENT: string
   export const OPENCODE_SERVER_PASSWORD = process.env["OPENCODE_SERVER_PASSWORD"]
   export const OPENCODE_SERVER_USERNAME = process.env["OPENCODE_SERVER_USERNAME"]
+  export const OPENCODE_ENABLE_QUESTION_TOOL = truthy("OPENCODE_ENABLE_QUESTION_TOOL")
 
   // Experimental
   export const OPENCODE_EXPERIMENTAL = truthy("OPENCODE_EXPERIMENTAL")

packages/opencode/src/mcp/oauth-provider.ts

@@ -149,6 +149,28 @@ export class McpOAuthProvider implements OAuthClientProvider {
     }
     return entry.oauthState
   }
+
+  async invalidateCredentials(type: "all" | "client" | "tokens"): Promise<void> {
+    log.info("invalidating credentials", { mcpName: this.mcpName, type })
+    const entry = await McpAuth.get(this.mcpName)
+    if (!entry) {
+      return
+    }
+
+    switch (type) {
+      case "all":
+        await McpAuth.remove(this.mcpName)
+        break
+      case "client":
+        delete entry.clientInfo
+        await McpAuth.set(this.mcpName, entry)
+        break
+      case "tokens":
+        delete entry.tokens
+        await McpAuth.set(this.mcpName, entry)
+        break
+    }
+  }
 }
 
 export { OAUTH_CALLBACK_PORT, OAUTH_CALLBACK_PATH }

packages/opencode/src/provider/models.ts

@@ -122,7 +122,7 @@ export namespace ModelsDev {
   }
 }
 
-if (!Flag.OPENCODE_DISABLE_MODELS_FETCH) {
+if (!Flag.OPENCODE_DISABLE_MODELS_FETCH && !process.argv.includes("--get-yargs-completions")) {
   ModelsDev.refresh()
   setInterval(
     async () => {

packages/opencode/src/server/routes/global.ts

@@ -66,6 +66,8 @@ export const GlobalRoutes = lazy(() =>
       }),
       async (c) => {
         log.info("global event connected")
+        c.header("X-Accel-Buffering", "no")
+        c.header("X-Content-Type-Options", "nosniff")
         return streamSSE(c, async (stream) => {
           stream.writeSSE({
             data: JSON.stringify({
@@ -82,7 +84,7 @@ export const GlobalRoutes = lazy(() =>
           }
           GlobalBus.on("event", handler)
 
-          // Send heartbeat every 30s to prevent WKWebView timeout (60s default)
+          // Send heartbeat every 10s to prevent stalled proxy streams.
           const heartbeat = setInterval(() => {
             stream.writeSSE({
               data: JSON.stringify({
@@ -92,7 +94,7 @@ export const GlobalRoutes = lazy(() =>
                 },
               }),
             })
-          }, 30000)
+          }, 10_000)
 
           await new Promise<void>((resolve) => {
             stream.onAbort(() => {

packages/opencode/src/server/server.ts

@@ -501,6 +501,8 @@ export namespace Server {
           }),
           async (c) => {
             log.info("event connected")
+            c.header("X-Accel-Buffering", "no")
+            c.header("X-Content-Type-Options", "nosniff")
             return streamSSE(c, async (stream) => {
               stream.writeSSE({
                 data: JSON.stringify({
@@ -517,7 +519,7 @@ export namespace Server {
                 }
               })
 
-              // Send heartbeat every 30s to prevent WKWebView timeout (60s default)
+              // Send heartbeat every 10s to prevent stalled proxy streams.
               const heartbeat = setInterval(() => {
                 stream.writeSSE({
                   data: JSON.stringify({
@@ -525,7 +527,7 @@ export namespace Server {
                     properties: {},
                   }),
                 })
-              }, 30000)
+              }, 10_000)
 
               await new Promise<void>((resolve) => {
                 stream.onAbort(() => {

packages/opencode/src/session/prompt.ts

@@ -445,6 +445,12 @@ export namespace SessionPrompt {
           log.error("subtask execution failed", { error, agent: task.agent, description: task.description })
           return undefined
         })
+        const attachments = result?.attachments?.map((attachment) => ({
+          ...attachment,
+          id: Identifier.ascending("part"),
+          sessionID,
+          messageID: assistantMessage.id,
+        }))
         await Plugin.trigger(
           "tool.execute.after",
           {
@@ -467,7 +473,7 @@ export namespace SessionPrompt {
               title: result.title,
               metadata: result.metadata,
               output: result.output,
-              attachments: result.attachments,
+              attachments,
               time: {
                 ...part.state.time,
                 end: Date.now(),
@@ -797,6 +803,15 @@ export namespace SessionPrompt {
             },
           )
           const result = await item.execute(args, ctx)
+          const output = {
+            ...result,
+            attachments: result.attachments?.map((attachment) => ({
+              ...attachment,
+              id: Identifier.ascending("part"),
+              sessionID: ctx.sessionID,
+              messageID: input.processor.message.id,
+            })),
+          }
           await Plugin.trigger(
             "tool.execute.after",
             {
@@ -805,9 +820,9 @@ export namespace SessionPrompt {
               callID: ctx.callID,
               args,
             },
-            result,
+            output,
           )
-          return result
+          return output
         },
       })
     }
@@ -855,16 +870,13 @@ export namespace SessionPrompt {
         )
 
         const textParts: string[] = []
-        const attachments: MessageV2.FilePart[] = []
+        const attachments: Omit<MessageV2.FilePart, "id" | "sessionID" | "messageID">[] = []
 
         for (const contentItem of result.content) {
           if (contentItem.type === "text") {
             textParts.push(contentItem.text)
           } else if (contentItem.type === "image") {
             attachments.push({
-              id: Identifier.ascending("part"),
-              sessionID: input.session.id,
-              messageID: input.processor.message.id,
               type: "file",
               mime: contentItem.mimeType,
               url: `data:${contentItem.mimeType};base64,${contentItem.data}`,
@@ -876,9 +888,6 @@ export namespace SessionPrompt {
             }
             if (resource.blob) {
               attachments.push({
-                id: Identifier.ascending("part"),
-                sessionID: input.session.id,
-                messageID: input.processor.message.id,
                 type: "file",
                 mime: resource.mimeType ?? "application/octet-stream",
                 url: `data:${resource.mimeType ?? "application/octet-stream"};base64,${resource.blob}`,
@@ -965,17 +974,22 @@ export namespace SessionPrompt {
     }
     using _ = defer(() => InstructionPrompt.clear(info.id))
 
+    type Draft<T> = T extends MessageV2.Part ? Omit<T, "id"> & { id?: string } : never
+    const assign = (part: Draft<MessageV2.Part>): MessageV2.Part => ({
+      ...part,
+      id: part.id ?? Identifier.ascending("part"),
+    })
+
     const parts = await Promise.all(
-      input.parts.map(async (part): Promise<MessageV2.Part[]> => {
+      input.parts.map(async (part): Promise<Draft<MessageV2.Part>[]> => {
         if (part.type === "file") {
           // before checking the protocol we check if this is an mcp resource because it needs special handling
           if (part.source?.type === "resource") {
             const { clientName, uri } = part.source
             log.info("mcp resource", { clientName, uri, mime: part.mime })
 
-            const pieces: MessageV2.Part[] = [
+            const pieces: Draft<MessageV2.Part>[] = [
               {
-                id: Identifier.ascending("part"),
                 messageID: info.id,
                 sessionID: input.sessionID,
                 type: "text",
@@ -998,7 +1012,6 @@ export namespace SessionPrompt {
               for (const content of contents) {
                 if ("text" in content && content.text) {
                   pieces.push({
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1009,7 +1022,6 @@ export namespace SessionPrompt {
                   // Handle binary content if needed
                   const mimeType = "mimeType" in content ? content.mimeType : part.mime
                   pieces.push({
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1021,7 +1033,6 @@ export namespace SessionPrompt {
 
               pieces.push({
                 ...part,
-                id: part.id ?? Identifier.ascending("part"),
                 messageID: info.id,
                 sessionID: input.sessionID,
               })
@@ -1029,7 +1040,6 @@ export namespace SessionPrompt {
               log.error("failed to read MCP resource", { error, clientName, uri })
               const message = error instanceof Error ? error.message : String(error)
               pieces.push({
-                id: Identifier.ascending("part"),
                 messageID: info.id,
                 sessionID: input.sessionID,
                 type: "text",
@@ -1046,7 +1056,6 @@ export namespace SessionPrompt {
               if (part.mime === "text/plain") {
                 return [
                   {
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1054,7 +1063,6 @@ export namespace SessionPrompt {
                     text: `Called the Read tool with the following input: ${JSON.stringify({ filePath: part.filename })}`,
                   },
                   {
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1063,7 +1071,6 @@ export namespace SessionPrompt {
                   },
                   {
                     ...part,
-                    id: part.id ?? Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                   },
@@ -1120,9 +1127,8 @@ export namespace SessionPrompt {
                 }
                 const args = { filePath: filepath, offset, limit }
 
-                const pieces: MessageV2.Part[] = [
+                const pieces: Draft<MessageV2.Part>[] = [
                   {
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1146,7 +1152,6 @@ export namespace SessionPrompt {
                     }
                     const result = await t.execute(args, readCtx)
                     pieces.push({
-                      id: Identifier.ascending("part"),
                       messageID: info.id,
                       sessionID: input.sessionID,
                       type: "text",
@@ -1166,7 +1171,6 @@ export namespace SessionPrompt {
                     } else {
                       pieces.push({
                         ...part,
-                        id: part.id ?? Identifier.ascending("part"),
                         messageID: info.id,
                         sessionID: input.sessionID,
                       })
@@ -1182,7 +1186,6 @@ export namespace SessionPrompt {
                       }).toObject(),
                     })
                     pieces.push({
-                      id: Identifier.ascending("part"),
                       messageID: info.id,
                       sessionID: input.sessionID,
                       type: "text",
@@ -1209,7 +1212,6 @@ export namespace SessionPrompt {
                 const result = await ReadTool.init().then((t) => t.execute(args, listCtx))
                 return [
                   {
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1217,7 +1219,6 @@ export namespace SessionPrompt {
                     text: `Called the Read tool with the following input: ${JSON.stringify(args)}`,
                   },
                   {
-                    id: Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                     type: "text",
@@ -1226,7 +1227,6 @@ export namespace SessionPrompt {
                   },
                   {
                     ...part,
-                    id: part.id ?? Identifier.ascending("part"),
                     messageID: info.id,
                     sessionID: input.sessionID,
                   },
@@ -1237,7 +1237,6 @@ export namespace SessionPrompt {
               FileTime.read(input.sessionID, filepath)
               return [
                 {
-                  id: Identifier.ascending("part"),
                   messageID: info.id,
                   sessionID: input.sessionID,
                   type: "text",
@@ -1245,7 +1244,7 @@ export namespace SessionPrompt {
                   synthetic: true,
                 },
                 {
-                  id: part.id ?? Identifier.ascending("part"),
+                  id: part.id,
                   messageID: info.id,
                   sessionID: input.sessionID,
                   type: "file",
@@ -1264,13 +1263,11 @@ export namespace SessionPrompt {
           const hint = perm.action === "deny" ? " . Invoked by user; guaranteed to exist." : ""
           return [
             {
-              id: Identifier.ascending("part"),
               ...part,
               messageID: info.id,
               sessionID: input.sessionID,
             },
             {
-              id: Identifier.ascending("part"),
               messageID: info.id,
               sessionID: input.sessionID,
               type: "text",
@@ -1287,14 +1284,13 @@ export namespace SessionPrompt {
 
         return [
           {
-            id: Identifier.ascending("part"),
             ...part,
             messageID: info.id,
             sessionID: input.sessionID,
           },
         ]
       }),
-    ).then((x) => x.flat())
+    ).then((x) => x.flat().map(assign))
 
     await Plugin.trigger(
       "chat.message",

packages/opencode/src/tool/batch.ts

@@ -77,6 +77,12 @@ export const BatchTool = Tool.define("batch", async () => {
           })
 
           const result = await tool.execute(validatedParams, { ...ctx, callID: partID })
+          const attachments = result.attachments?.map((attachment) => ({
+            ...attachment,
+            id: Identifier.ascending("part"),
+            sessionID: ctx.sessionID,
+            messageID: ctx.messageID,
+          }))
 
           await Session.updatePart({
             id: partID,
@@ -91,7 +97,7 @@ export const BatchTool = Tool.define("batch", async () => {
               output: result.output,
               title: result.title,
               metadata: result.metadata,
-              attachments: result.attachments,
+              attachments,
               time: {
                 start: callStartTime,
                 end: Date.now(),

packages/opencode/src/tool/read.ts

@@ -1,18 +1,21 @@
 import z from "zod"
-import * as fs from "fs"
+import { createReadStream } from "fs"
+import * as fs from "fs/promises"
 import * as path from "path"
+import { createInterface } from "readline"
 import { Tool } from "./tool"
 import { LSP } from "../lsp"
 import { FileTime } from "../file/time"
 import DESCRIPTION from "./read.txt"
 import { Instance } from "../project/instance"
-import { Identifier } from "../id/id"
 import { assertExternalDirectory } from "./external-directory"
 import { InstructionPrompt } from "../session/instruction"
 
 const DEFAULT_READ_LIMIT = 2000
 const MAX_LINE_LENGTH = 2000
+const MAX_LINE_SUFFIX = `... (line truncated to ${MAX_LINE_LENGTH} chars)`
 const MAX_BYTES = 50 * 1024
+const MAX_BYTES_LABEL = `${MAX_BYTES / 1024} KB`
 
 export const ReadTool = Tool.define("read", {
   description: DESCRIPTION,
@@ -50,14 +53,18 @@ export const ReadTool = Tool.define("read", {
       const dir = path.dirname(filepath)
       const base = path.basename(filepath)
 
-      const dirEntries = fs.readdirSync(dir)
-      const suggestions = dirEntries
-        .filter(
-          (entry) =>
-            entry.toLowerCase().includes(base.toLowerCase()) || base.toLowerCase().includes(entry.toLowerCase()),
+      const suggestions = await fs
+        .readdir(dir)
+        .then((entries) =>
+          entries
+            .filter(
+              (entry) =>
+                entry.toLowerCase().includes(base.toLowerCase()) || base.toLowerCase().includes(entry.toLowerCase()),
+            )
+            .map((entry) => path.join(dir, entry))
+            .slice(0, 3),
         )
-        .map((entry) => path.join(dir, entry))
-        .slice(0, 3)
+        .catch(() => [])
 
       if (suggestions.length > 0) {
         throw new Error(`File not found: ${filepath}\n\nDid you mean one of these?\n${suggestions.join("\n")}`)
@@ -67,12 +74,12 @@ export const ReadTool = Tool.define("read", {
     }
 
     if (stat.isDirectory()) {
-      const dirents = await fs.promises.readdir(filepath, { withFileTypes: true })
+      const dirents = await fs.readdir(filepath, { withFileTypes: true })
       const entries = await Promise.all(
         dirents.map(async (dirent) => {
           if (dirent.isDirectory()) return dirent.name + "/"
           if (dirent.isSymbolicLink()) {
-            const target = await fs.promises.stat(path.join(filepath, dirent.name)).catch(() => undefined)
+            const target = await fs.stat(path.join(filepath, dirent.name)).catch(() => undefined)
             if (target?.isDirectory()) return dirent.name + "/"
           }
           return dirent.name
@@ -127,9 +134,6 @@ export const ReadTool = Tool.define("read", {
         },
         attachments: [
           {
-            id: Identifier.ascending("part"),
-            sessionID: ctx.sessionID,
-            messageID: ctx.messageID,
             type: "file",
             mime,
             url: `data:${mime};base64,${Buffer.from(await file.bytes()).toString("base64")}`,
@@ -138,27 +142,53 @@ export const ReadTool = Tool.define("read", {
       }
     }
 
-    const isBinary = await isBinaryFile(filepath, file)
+    const isBinary = await isBinaryFile(filepath, stat.size)
     if (isBinary) throw new Error(`Cannot read binary file: ${filepath}`)
 
+    const stream = createReadStream(filepath, { encoding: "utf8" })
+    const rl = createInterface({
+      input: stream,
+      // Note: we use the crlfDelay option to recognize all instances of CR LF
+      // ('\r\n') in file as a single line break.
+      crlfDelay: Infinity,
+    })
+
     const limit = params.limit ?? DEFAULT_READ_LIMIT
     const offset = params.offset ?? 1
     const start = offset - 1
-    const lines = await file.text().then((text) => text.split("\n"))
-    if (start >= lines.length) throw new Error(`Offset ${offset} is out of range for this file (${lines.length} lines)`)
-
     const raw: string[] = []
     let bytes = 0
+    let lines = 0
     let truncatedByBytes = false
-    for (let i = start; i < Math.min(lines.length, start + limit); i++) {
-      const line = lines[i].length > MAX_LINE_LENGTH ? lines[i].substring(0, MAX_LINE_LENGTH) + "..." : lines[i]
-      const size = Buffer.byteLength(line, "utf-8") + (raw.length > 0 ? 1 : 0)
-      if (bytes + size > MAX_BYTES) {
-        truncatedByBytes = true
-        break
+    let hasMoreLines = false
+    try {
+      for await (const text of rl) {
+        lines += 1
+        if (lines <= start) continue
+
+        if (raw.length >= limit) {
+          hasMoreLines = true
+          continue
+        }
+
+        const line = text.length > MAX_LINE_LENGTH ? text.substring(0, MAX_LINE_LENGTH) + MAX_LINE_SUFFIX : text
+        const size = Buffer.byteLength(line, "utf-8") + (raw.length > 0 ? 1 : 0)
+        if (bytes + size > MAX_BYTES) {
+          truncatedByBytes = true
+          hasMoreLines = true
+          break
+        }
+
+        raw.push(line)
+        bytes += size
       }
-      raw.push(line)
-      bytes += size
+    } finally {
+      rl.close()
+      stream.destroy()
+    }
+
+    if (lines < offset && !(lines === 0 && offset === 1)) {
+      throw new Error(`Offset ${offset} is out of range for this file (${lines} lines)`)
     }
 
     const content = raw.map((line, index) => {
@@ -169,15 +199,15 @@ export const ReadTool = Tool.define("read", {
     let output = [`<path>${filepath}</path>`, `<type>file</type>`, "<content>"].join("\n")
     output += content.join("\n")
 
-    const totalLines = lines.length
+    const totalLines = lines
     const lastReadLine = offset + raw.length - 1
-    const hasMoreLines = totalLines > lastReadLine
+    const nextOffset = lastReadLine + 1
     const truncated = hasMoreLines || truncatedByBytes
 
     if (truncatedByBytes) {
-      output += `\n\n(Output truncated at ${MAX_BYTES} bytes. Use 'offset' parameter to read beyond line ${lastReadLine})`
+      output += `\n\n(Output capped at ${MAX_BYTES_LABEL}. Showing lines ${offset}-${lastReadLine}. Use offset=${nextOffset} to continue.)`
     } else if (hasMoreLines) {
-      output += `\n\n(File has more lines. Use 'offset' parameter to read beyond line ${lastReadLine})`
+      output += `\n\n(Showing lines ${offset}-${lastReadLine} of ${totalLines}. Use offset=${nextOffset} to continue.)`
     } else {
       output += `\n\n(End of file - total ${totalLines} lines)`
     }
@@ -203,7 +233,7 @@ export const ReadTool = Tool.define("read", {
   },
 })
 
-async function isBinaryFile(filepath: string, file: Bun.BunFile): Promise<boolean> {
+async function isBinaryFile(filepath: string, fileSize: number): Promise<boolean> {
   const ext = path.extname(filepath).toLowerCase()
   // binary check for common non-text extensions
   switch (ext) {
@@ -240,22 +270,25 @@ async function isBinaryFile(filepath: string, file: Bun.BunFile): Promise<boolea
       break
   }
 
-  const stat = await file.stat()
-  const fileSize = stat.size
   if (fileSize === 0) return false
 
-  const bufferSize = Math.min(4096, fileSize)
-  const buffer = await file.arrayBuffer()
-  if (buffer.byteLength === 0) return false
-  const bytes = new Uint8Array(buffer.slice(0, bufferSize))
+  const fh = await fs.open(filepath, "r")
+  try {
+    const sampleSize = Math.min(4096, fileSize)
+    const bytes = Buffer.alloc(sampleSize)
+    const result = await fh.read(bytes, 0, sampleSize, 0)
+    if (result.bytesRead === 0) return false
 
-  let nonPrintableCount = 0
-  for (let i = 0; i < bytes.length; i++) {
-    if (bytes[i] === 0) return true
-    if (bytes[i] < 9 || (bytes[i] > 13 && bytes[i] < 32)) {
-      nonPrintableCount++
+    let nonPrintableCount = 0
+    for (let i = 0; i < result.bytesRead; i++) {
+      if (bytes[i] === 0) return true
+      if (bytes[i] < 9 || (bytes[i] > 13 && bytes[i] < 32)) {
+        nonPrintableCount++
+      }
     }
+    // If >30% non-printable characters, consider it binary
+    return nonPrintableCount / result.bytesRead > 0.3
+  } finally {
+    await fh.close()
   }
-  // If >30% non-printable characters, consider it binary
-  return nonPrintableCount / bytes.length > 0.3
 }

packages/opencode/src/tool/registry.ts

@@ -94,10 +94,11 @@ export namespace ToolRegistry {
   async function all(): Promise<Tool.Info[]> {
     const custom = await state().then((x) => x.custom)
     const config = await Config.get()
+    const question = ["app", "cli", "desktop"].includes(Flag.OPENCODE_CLIENT) || Flag.OPENCODE_ENABLE_QUESTION_TOOL
 
     return [
       InvalidTool,
-      ...(["app", "cli", "desktop"].includes(Flag.OPENCODE_CLIENT) ? [QuestionTool] : []),
+      ...(question ? [QuestionTool] : []),
       BashTool,
       ReadTool,
       GlobTool,

packages/opencode/src/tool/tool.ts

@@ -36,7 +36,7 @@ export namespace Tool {
         title: string
         metadata: M
         output: string
-        attachments?: MessageV2.FilePart[]
+        attachments?: Omit<MessageV2.FilePart, "id" | "sessionID" | "messageID">[]
       }>
       formatValidationError?(error: z.ZodError): string
     }>

packages/opencode/src/tool/webfetch.ts

@@ -3,7 +3,6 @@ import { Tool } from "./tool"
 import TurndownService from "turndown"
 import DESCRIPTION from "./webfetch.txt"
 import { abortAfterAny } from "../util/abort"
-import { Identifier } from "../id/id"
 
 const MAX_RESPONSE_SIZE = 5 * 1024 * 1024 // 5MB
 const DEFAULT_TIMEOUT = 30 * 1000 // 30 seconds
@@ -103,9 +102,6 @@ export const WebFetchTool = Tool.define("webfetch", {
         metadata: {},
         attachments: [
           {
-            id: Identifier.ascending("part"),
-            sessionID: ctx.sessionID,
-            messageID: ctx.messageID,
             type: "file",
             mime,
             url: `data:${mime};base64,${base64Content}`,

packages/opencode/test/cli/plugin-auth-picker.test.ts

@@ -0,0 +1,120 @@
+import { test, expect, describe } from "bun:test"
+import { resolvePluginProviders } from "../../src/cli/cmd/auth"
+import type { Hooks } from "@opencode-ai/plugin"
+
+function hookWithAuth(provider: string): Hooks {
+  return {
+    auth: {
+      provider,
+      methods: [],
+    },
+  }
+}
+
+function hookWithoutAuth(): Hooks {
+  return {}
+}
+
+describe("resolvePluginProviders", () => {
+  test("returns plugin providers not in models.dev", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([{ id: "portkey", name: "portkey" }])
+  })
+
+  test("skips providers already in models.dev", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("anthropic")],
+      existingProviders: { anthropic: {} },
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([])
+  })
+
+  test("deduplicates across plugins", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey"), hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([{ id: "portkey", name: "portkey" }])
+  })
+
+  test("respects disabled_providers", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(["portkey"]),
+      providerNames: {},
+    })
+    expect(result).toEqual([])
+  })
+
+  test("respects enabled_providers when provider is absent", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      enabled: new Set(["anthropic"]),
+      providerNames: {},
+    })
+    expect(result).toEqual([])
+  })
+
+  test("includes provider when in enabled set", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      enabled: new Set(["portkey"]),
+      providerNames: {},
+    })
+    expect(result).toEqual([{ id: "portkey", name: "portkey" }])
+  })
+
+  test("resolves name from providerNames", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: { portkey: "Portkey AI" },
+    })
+    expect(result).toEqual([{ id: "portkey", name: "Portkey AI" }])
+  })
+
+  test("falls back to id when no name configured", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithAuth("portkey")],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([{ id: "portkey", name: "portkey" }])
+  })
+
+  test("skips hooks without auth", () => {
+    const result = resolvePluginProviders({
+      hooks: [hookWithoutAuth(), hookWithAuth("portkey"), hookWithoutAuth()],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([{ id: "portkey", name: "portkey" }])
+  })
+
+  test("returns empty for no hooks", () => {
+    const result = resolvePluginProviders({
+      hooks: [],
+      existingProviders: {},
+      disabled: new Set(),
+      providerNames: {},
+    })
+    expect(result).toEqual([])
+  })
+})

packages/opencode/test/session/prompt-missing-file.test.ts

@@ -2,6 +2,7 @@ import path from "path"
 import { describe, expect, test } from "bun:test"
 import { Instance } from "../../src/project/instance"
 import { Session } from "../../src/session"
+import { MessageV2 } from "../../src/session/message-v2"
 import { SessionPrompt } from "../../src/session/prompt"
 import { tmpdir } from "../fixture/fixture"
 
@@ -50,4 +51,54 @@ describe("session.prompt missing file", () => {
       },
     })
   })
+
+  test("keeps stored part order stable when file resolution is async", async () => {
+    await using tmp = await tmpdir({
+      git: true,
+      config: {
+        agent: {
+          build: {
+            model: "openai/gpt-5.2",
+          },
+        },
+      },
+    })
+
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const session = await Session.create({})
+
+        const missing = path.join(tmp.path, "still-missing.ts")
+        const msg = await SessionPrompt.prompt({
+          sessionID: session.id,
+          agent: "build",
+          noReply: true,
+          parts: [
+            {
+              type: "file",
+              mime: "text/plain",
+              url: `file://${missing}`,
+              filename: "still-missing.ts",
+            },
+            { type: "text", text: "after-file" },
+          ],
+        })
+
+        if (msg.info.role !== "user") throw new Error("expected user message")
+
+        const stored = await MessageV2.get({
+          sessionID: session.id,
+          messageID: msg.info.id,
+        })
+        const text = stored.parts.filter((part) => part.type === "text").map((part) => part.text)
+
+        expect(text[0]?.startsWith("Called the Read tool with the following input:")).toBe(true)
+        expect(text[1]?.includes("Read tool failed to read")).toBe(true)
+        expect(text[2]).toBe("after-file")
+
+        await Session.remove(session.id)
+      },
+    })
+  })
 })

packages/opencode/test/tool/read.test.ts

@@ -211,8 +211,8 @@ describe("tool.read truncation", () => {
         const read = await ReadTool.init()
         const result = await read.execute({ filePath: path.join(tmp.path, "large.json") }, ctx)
         expect(result.metadata.truncated).toBe(true)
-        expect(result.output).toContain("Output truncated at")
-        expect(result.output).toContain("bytes")
+        expect(result.output).toContain("Output capped at")
+        expect(result.output).toContain("Use offset=")
       },
     })
   })
@@ -230,7 +230,8 @@ describe("tool.read truncation", () => {
         const read = await ReadTool.init()
         const result = await read.execute({ filePath: path.join(tmp.path, "many-lines.txt"), limit: 10 }, ctx)
         expect(result.metadata.truncated).toBe(true)
-        expect(result.output).toContain("File has more lines")
+        expect(result.output).toContain("Showing lines 1-10 of 100")
+        expect(result.output).toContain("Use offset=11")
         expect(result.output).toContain("line0")
         expect(result.output).toContain("line9")
         expect(result.output).not.toContain("line10")
@@ -267,6 +268,10 @@ describe("tool.read truncation", () => {
       fn: async () => {
         const read = await ReadTool.init()
         const result = await read.execute({ filePath: path.join(tmp.path, "offset.txt"), offset: 10, limit: 5 }, ctx)
+        expect(result.output).toContain("10: line10")
+        expect(result.output).toContain("14: line14")
+        expect(result.output).not.toContain("9: line10")
+        expect(result.output).not.toContain("15: line15")
         expect(result.output).toContain("line10")
         expect(result.output).toContain("line14")
         expect(result.output).not.toContain("line0")
@@ -293,6 +298,40 @@ describe("tool.read truncation", () => {
     })
   })
 
+  test("allows reading empty file at default offset", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(path.join(dir, "empty.txt"), "")
+      },
+    })
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const read = await ReadTool.init()
+        const result = await read.execute({ filePath: path.join(tmp.path, "empty.txt") }, ctx)
+        expect(result.metadata.truncated).toBe(false)
+        expect(result.output).toContain("End of file - total 0 lines")
+      },
+    })
+  })
+
+  test("throws when offset > 1 for empty file", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(path.join(dir, "empty.txt"), "")
+      },
+    })
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const read = await ReadTool.init()
+        await expect(read.execute({ filePath: path.join(tmp.path, "empty.txt"), offset: 2 }, ctx)).rejects.toThrow(
+          "Offset 2 is out of range for this file (0 lines)",
+        )
+      },
+    })
+  })
+
   test("does not mark final directory page as truncated", async () => {
     await using tmp = await tmpdir({
       init: async (dir) => {
@@ -324,7 +363,7 @@ describe("tool.read truncation", () => {
       fn: async () => {
         const read = await ReadTool.init()
         const result = await read.execute({ filePath: path.join(tmp.path, "long-line.txt") }, ctx)
-        expect(result.output).toContain("...")
+        expect(result.output).toContain("(line truncated to 2000 chars)")
         expect(result.output.length).toBeLessThan(3000)
       },
     })
@@ -349,6 +388,9 @@ describe("tool.read truncation", () => {
         expect(result.metadata.truncated).toBe(false)
         expect(result.attachments).toBeDefined()
         expect(result.attachments?.length).toBe(1)
+        expect(result.attachments?.[0]).not.toHaveProperty("id")
+        expect(result.attachments?.[0]).not.toHaveProperty("sessionID")
+        expect(result.attachments?.[0]).not.toHaveProperty("messageID")
       },
     })
   })
@@ -363,6 +405,9 @@ describe("tool.read truncation", () => {
         expect(result.attachments).toBeDefined()
         expect(result.attachments?.length).toBe(1)
         expect(result.attachments?.[0].type).toBe("file")
+        expect(result.attachments?.[0]).not.toHaveProperty("id")
+        expect(result.attachments?.[0]).not.toHaveProperty("sessionID")
+        expect(result.attachments?.[0]).not.toHaveProperty("messageID")
       },
     })
   })
@@ -419,3 +464,40 @@ describe("tool.read loaded instructions", () => {
     })
   })
 })
+
+describe("tool.read binary detection", () => {
+  test("rejects text extension files with null bytes", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        const bytes = Buffer.from([0x68, 0x65, 0x6c, 0x6c, 0x6f, 0x00, 0x77, 0x6f, 0x72, 0x6c, 0x64])
+        await Bun.write(path.join(dir, "null-byte.txt"), bytes)
+      },
+    })
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const read = await ReadTool.init()
+        await expect(read.execute({ filePath: path.join(tmp.path, "null-byte.txt") }, ctx)).rejects.toThrow(
+          "Cannot read binary file",
+        )
+      },
+    })
+  })
+
+  test("rejects known binary extensions", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(path.join(dir, "module.wasm"), "not really wasm")
+      },
+    })
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const read = await ReadTool.init()
+        await expect(read.execute({ filePath: path.join(tmp.path, "module.wasm") }, ctx)).rejects.toThrow(
+          "Cannot read binary file",
+        )
+      },
+    })
+  })
+})

packages/opencode/test/tool/webfetch.test.ts

@@ -46,6 +46,9 @@ describe("tool.webfetch", () => {
             expect(result.attachments?.[0].type).toBe("file")
             expect(result.attachments?.[0].mime).toBe("image/png")
             expect(result.attachments?.[0].url.startsWith("data:image/png;base64,")).toBe(true)
+            expect(result.attachments?.[0]).not.toHaveProperty("id")
+            expect(result.attachments?.[0]).not.toHaveProperty("sessionID")
+            expect(result.attachments?.[0]).not.toHaveProperty("messageID")
           },
         })
       },

packages/script/src/index.ts

@@ -54,8 +54,13 @@ const team = [
   "kommander",
   "jayair",
   "fwang",
+  "MrMushrooooom",
   "adamdotdevin",
   "iamdavidhill",
+  "Brendonovich",
+  "nexxeln",
+  "Hona",
+  "jlongster",
   "opencode-agent[bot]",
   "R44VC0RP",
 ]

packages/ui/src/components/basic-tool.css

@@ -4,15 +4,44 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  gap: 20px;
-  justify-content: space-between;
+  gap: 0px;
+  justify-content: flex-start;
 
   [data-slot="basic-tool-tool-trigger-content"] {
-    width: 100%;
+    width: auto;
     display: flex;
     align-items: center;
     align-self: stretch;
-    gap: 20px;
+    gap: 8px;
+  }
+
+  [data-slot="basic-tool-tool-indicator"] {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    [data-component="spinner"] {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  [data-slot="basic-tool-tool-spinner"] {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-weak);
+
+    [data-component="spinner"] {
+      width: 16px;
+      height: 16px;
+    }
   }
 
   [data-slot="icon-svg"] {
@@ -20,16 +49,17 @@
   }
 
   [data-slot="basic-tool-tool-info"] {
-    flex-grow: 1;
+    flex: 0 1 auto;
     min-width: 0;
+    font-size: 14px;
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
-    width: 100%;
+    width: auto;
     display: flex;
     align-items: center;
     gap: 8px;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
 
   [data-slot="basic-tool-tool-info-main"] {
@@ -43,16 +73,21 @@
   [data-slot="basic-tool-tool-title"] {
     flex-shrink: 0;
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-base);
+    color: var(--text-strong);
 
     &.capitalize {
       text-transform: capitalize;
     }
+
+    &.agent-title {
+      color: var(--text-strong);
+      font-weight: var(--font-weight-medium);
+    }
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
@@ -62,12 +97,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-weak);
+    color: var(--text-base);
 
     &.clickable {
       cursor: pointer;
@@ -78,6 +113,26 @@
         color: var(--text-base);
       }
     }
+
+    &.subagent-link {
+      color: var(--text-interactive-base);
+      text-decoration: none;
+      text-underline-offset: 2px;
+      font-weight: var(--font-weight-regular);
+
+      &:hover {
+        color: var(--text-interactive-base);
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: var(--text-interactive-base);
+      }
+
+      &:visited {
+        color: var(--text-interactive-base);
+      }
+    }
   }
 
   [data-slot="basic-tool-tool-arg"] {
@@ -87,11 +142,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-weak);
+    color: var(--text-base);
   }
 }

packages/ui/src/components/basic-tool.tsx

@@ -1,6 +1,7 @@
 import { createEffect, createSignal, For, Match, Show, Switch, type JSX } from "solid-js"
 import { Collapsible } from "./collapsible"
-import { Icon, IconProps } from "./icon"
+import type { IconProps } from "./icon"
+import { TextShimmer } from "./text-shimmer"
 
 export type TriggerTitle = {
   title: string
@@ -22,6 +23,7 @@ export interface BasicToolProps {
   icon: IconProps["name"]
   trigger: TriggerTitle | JSX.Element
   children?: JSX.Element
+  status?: string
   hideDetails?: boolean
   defaultOpen?: boolean
   forceOpen?: boolean
@@ -31,22 +33,23 @@ export interface BasicToolProps {
 
 export function BasicTool(props: BasicToolProps) {
   const [open, setOpen] = createSignal(props.defaultOpen ?? false)
+  const pending = () => props.status === "pending" || props.status === "running"
 
   createEffect(() => {
     if (props.forceOpen) setOpen(true)
   })
 
   const handleOpenChange = (value: boolean) => {
+    if (pending()) return
     if (props.locked && !value) return
     setOpen(value)
   }
 
   return (
-    <Collapsible open={open()} onOpenChange={handleOpenChange}>
+    <Collapsible open={open()} onOpenChange={handleOpenChange} class="tool-collapsible">
       <Collapsible.Trigger>
         <div data-component="tool-trigger">
           <div data-slot="basic-tool-tool-trigger-content">
-            <Icon name={props.icon} size="small" />
             <div data-slot="basic-tool-tool-info">
               <Switch>
                 <Match when={isTriggerTitle(props.trigger) && props.trigger}>
@@ -59,41 +62,45 @@ export function BasicTool(props: BasicToolProps) {
                             [trigger().titleClass ?? ""]: !!trigger().titleClass,
                           }}
                         >
-                          {trigger().title}
+                          <Show when={pending()} fallback={trigger().title}>
+                            <TextShimmer text={trigger().title} />
+                          </Show>
                         </span>
-                        <Show when={trigger().subtitle}>
-                          <span
-                            data-slot="basic-tool-tool-subtitle"
-                            classList={{
-                              [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
-                              clickable: !!props.onSubtitleClick,
-                            }}
-                            onClick={(e) => {
-                              if (props.onSubtitleClick) {
-                                e.stopPropagation()
-                                props.onSubtitleClick()
-                              }
-                            }}
-                          >
-                            {trigger().subtitle}
-                          </span>
-                        </Show>
-                        <Show when={trigger().args?.length}>
-                          <For each={trigger().args}>
-                            {(arg) => (
-                              <span
-                                data-slot="basic-tool-tool-arg"
-                                classList={{
-                                  [trigger().argsClass ?? ""]: !!trigger().argsClass,
-                                }}
-                              >
-                                {arg}
-                              </span>
-                            )}
-                          </For>
+                        <Show when={!pending()}>
+                          <Show when={trigger().subtitle}>
+                            <span
+                              data-slot="basic-tool-tool-subtitle"
+                              classList={{
+                                [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
+                                clickable: !!props.onSubtitleClick,
+                              }}
+                              onClick={(e) => {
+                                if (props.onSubtitleClick) {
+                                  e.stopPropagation()
+                                  props.onSubtitleClick()
+                                }
+                              }}
+                            >
+                              {trigger().subtitle}
+                            </span>
+                          </Show>
+                          <Show when={trigger().args?.length}>
+                            <For each={trigger().args}>
+                              {(arg) => (
+                                <span
+                                  data-slot="basic-tool-tool-arg"
+                                  classList={{
+                                    [trigger().argsClass ?? ""]: !!trigger().argsClass,
+                                  }}
+                                >
+                                  {arg}
+                                </span>
+                              )}
+                            </For>
+                          </Show>
                         </Show>
                       </div>
-                      <Show when={trigger().action}>{trigger().action}</Show>
+                      <Show when={!pending() && trigger().action}>{trigger().action}</Show>
                     </div>
                   )}
                 </Match>
@@ -101,7 +108,7 @@ export function BasicTool(props: BasicToolProps) {
               </Switch>
             </div>
           </div>
-          <Show when={props.children && !props.hideDetails && !props.locked}>
+          <Show when={props.children && !props.hideDetails && !props.locked && !pending()}>
             <Collapsible.Arrow />
           </Show>
         </div>
@@ -113,6 +120,6 @@ export function BasicTool(props: BasicToolProps) {
   )
 }
 
-export function GenericTool(props: { tool: string; hideDetails?: boolean }) {
-  return <BasicTool icon="mcp" trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
+export function GenericTool(props: { tool: string; status?: string; hideDetails?: boolean }) {
+  return <BasicTool icon="mcp" status={props.status} trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
 }