Minium server 0.12.3

Reconcile optimistic user messages by replacing the oldest synthetic pending message when the server-backed message arrives. Stop sending prompt part ids and rely on message-level replacement so v1.2.25 validation passes without duplicating optimistic content.

.github/workflows/build-and-upload.yml

@@ -3,6 +3,11 @@ name: Build and Upload Binaries
 on:
   workflow_call:
     inputs:
+      ref:
+        description: "Git ref (branch, tag, or SHA) to build from"
+        required: false
+        default: ""
+        type: string
       version:
         description: "Version to apply to workspace packages (release builds)"
         required: false
@@ -45,6 +50,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -54,7 +61,21 @@ jobs:
 
       - name: Set workspace versions
         if: ${{ inputs.set_versions && inputs.version != '' }}
-        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+        shell: bash
+        env:
+          NPM_CONFIG_FETCH_RETRIES: 5
+          NPM_CONFIG_FETCH_RETRY_MINTIMEOUT: 20000
+          NPM_CONFIG_FETCH_RETRY_MAXTIMEOUT: 120000
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if npm version "${VERSION}" --workspaces --include-workspace-root --no-git-tag-version --allow-same-version; then
+              exit 0
+            fi
+            echo "npm version failed (attempt $attempt/3); retrying..." >&2
+            sleep $((attempt * 10))
+          done
+          exit 1
 
       - name: Install dependencies
         run: npm ci --workspaces --include=optional
@@ -65,6 +86,112 @@ jobs:
       - name: Build macOS binaries (Electron)
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
+      - name: Ad-hoc sign Electron macOS app bundles (seal resources)
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          release_root="packages/electron-app/release"
+          apps=()
+          while IFS= read -r -d '' app; do
+            apps+=("$app")
+          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
+
+          if [ "${#apps[@]}" -eq 0 ]; then
+            echo "No CodeNomad.app found under $release_root" >&2
+            exit 1
+          fi
+
+          # GitHub macOS runners typically have no signing identity. Without any signature,
+          # the shipped .app can fail Gatekeeper with:
+          #   code has no resources but signature indicates they must be present
+          # Ad-hoc signing seals bundle resources and makes the signature internally consistent.
+          if security find-identity -p codesigning -v | grep -q "0 valid identities found"; then
+            echo "No valid macOS codesigning identity found; applying ad-hoc signature"
+            for app in "${apps[@]}"; do
+              echo "codesign (adhoc): $app"
+              codesign --force --deep --sign - "$app"
+              codesign --verify --deep --strict --verbose=2 "$app"
+            done
+          else
+            echo "macOS codesigning identity present; skipping ad-hoc signing"
+          fi
+
+      - name: Repackage Electron macOS zips (ditto)
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          # Prefer the workflow-provided version; fall back to package.json.
+          VERSION_TO_USE="${VERSION:-}"
+          if [ -z "$VERSION_TO_USE" ]; then
+            VERSION_TO_USE=$(node -p "require('./packages/electron-app/package.json').version")
+          fi
+
+          release_root="packages/electron-app/release"
+          # macOS GitHub runners ship /bin/bash 3.2 which doesn't support `shopt -s globstar`.
+          # Use find to locate built app bundles instead of ** globs.
+          apps=()
+          while IFS= read -r -d '' app; do
+            apps+=("$app")
+          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
+          if [ "${#apps[@]}" -eq 0 ]; then
+            echo "No CodeNomad.app found under $release_root" >&2
+            exit 1
+          fi
+
+          for app in "${apps[@]}"; do
+            bundle_dir=$(basename "$(dirname "$app")")
+            arch="x64"
+            if [[ "$bundle_dir" == *"arm64"* ]]; then
+              arch="arm64"
+            fi
+
+            out_zip="$release_root/CodeNomad-${VERSION_TO_USE}-mac-${arch}.zip"
+            rm -f "$out_zip"
+            echo "ditto -ck: $app -> $out_zip"
+            ditto -ck --sequesterRsrc --keepParent "$app" "$out_zip"
+          done
+
+      - name: Validate Electron macOS codesign (unzipped)
+        shell: bash
+        run: |
+          set -euo pipefail
+          shopt -s nullglob
+
+          tmp_dir=$(mktemp -d)
+          trap 'rm -rf "$tmp_dir"' EXIT
+
+          zips=(packages/electron-app/release/CodeNomad-*-mac-*.zip)
+          if [ "${#zips[@]}" -eq 0 ]; then
+            echo "No Electron macOS zip artifacts found to validate" >&2
+            exit 1
+          fi
+
+          for zip in "${zips[@]}"; do
+            echo "Validating codesign for: $zip"
+            extract_dir="$tmp_dir/$(basename "$zip" .zip)"
+            mkdir -p "$extract_dir"
+
+            # Use ditto for extraction as well to preserve bundle metadata.
+            ditto -x -k "$zip" "$extract_dir"
+
+            app_path=""
+            for candidate in "$extract_dir"/*.app "$extract_dir"/*/*.app; do
+              if [ -d "$candidate" ]; then
+                app_path="$candidate"
+                break
+              fi
+            done
+
+            if [ -z "$app_path" ]; then
+              echo "No .app found after extracting $zip" >&2
+              exit 1
+            fi
+
+            codesign --verify --deep --strict --verbose=2 "$app_path"
+          done
+
       - name: Upload release assets
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -85,6 +212,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -124,6 +253,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -164,6 +295,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -237,6 +370,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -310,6 +445,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -388,6 +525,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -490,6 +629,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup QEMU
         uses: docker/setup-qemu-action@v3
@@ -587,6 +728,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4

.github/workflows/dev-release.yml

@@ -1,12 +1,13 @@
 name: Develop Pre-Release
 
 on:
-  push:
-    branches:
-      - dev
+  schedule:
+    # Nightly build of dev (only if dev has new commits)
+    - cron: "0 1 * * *"
   workflow_dispatch:
 
 permissions:
+  actions: read
   id-token: write
   contents: write
 
@@ -15,25 +16,63 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  prepare:
+  gate:
     runs-on: ubuntu-latest
     outputs:
-      version_suffix: ${{ steps.vars.outputs.version_suffix }}
+      run: ${{ steps.gate.outputs.run }}
+      dev_sha: ${{ steps.gate.outputs.dev_sha }}
+      version_suffix: ${{ steps.gate.outputs.version_suffix }}
     steps:
-      - name: Compute version suffix
-        id: vars
+      - name: Decide whether to run
+        id: gate
         shell: bash
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           set -euo pipefail
-          SHA8="${GITHUB_SHA::8}"
+
+          api() {
+            curl -sS \
+              -H "Authorization: Bearer ${GH_TOKEN}" \
+              -H "Accept: application/vnd.github+json" \
+              -H "X-GitHub-Api-Version: 2022-11-28" \
+              "$1"
+          }
+
+          DEV_SHA=$(api "https://api.github.com/repos/${GITHUB_REPOSITORY}/git/ref/heads/dev" | jq -r '.object.sha')
+          if [ -z "$DEV_SHA" ] || [ "$DEV_SHA" = "null" ]; then
+            echo "Failed to resolve dev head SHA" >&2
+            exit 1
+          fi
+
           DATE=$(date -u +%Y%m%d)
-          echo "version_suffix=-dev-${DATE}-${SHA8}" >> "$GITHUB_OUTPUT"
+          SHA8="${DEV_SHA::8}"
+          VERSION_SUFFIX="-dev-${DATE}-${SHA8}"
+
+          SHOULD_RUN="false"
+          if [ "${GITHUB_EVENT_NAME}" = "workflow_dispatch" ]; then
+            SHOULD_RUN="true"
+          else
+            # Nightly: only run if dev has advanced since last successful dev-release build.
+            LAST_SHA=$(api "https://api.github.com/repos/${GITHUB_REPOSITORY}/actions/workflows/dev-release.yml/runs?branch=dev&status=success&per_page=1" | jq -r '.workflow_runs[0].head_sha // empty')
+            if [ -z "${LAST_SHA}" ]; then
+              SHOULD_RUN="true"
+            elif [ "${LAST_SHA}" != "${DEV_SHA}" ]; then
+              SHOULD_RUN="true"
+            fi
+          fi
+
+          echo "run=${SHOULD_RUN}" >> "$GITHUB_OUTPUT"
+          echo "dev_sha=${DEV_SHA}" >> "$GITHUB_OUTPUT"
+          echo "version_suffix=${VERSION_SUFFIX}" >> "$GITHUB_OUTPUT"
 
   prerelease:
-    needs: prepare
+    needs: gate
+    if: ${{ needs.gate.outputs.run == 'true' }}
     uses: ./.github/workflows/reusable-release.yml
     with:
-      version_suffix: ${{ needs.prepare.outputs.version_suffix }}
+      ref: ${{ needs.gate.outputs.dev_sha }}
+      version_suffix: ${{ needs.gate.outputs.version_suffix }}
       npm_package_name: "@neuralnomads/codenomad-dev"
       dist_tag: latest
       prerelease: true

.github/workflows/manual-npm-publish.yml

@@ -19,6 +19,10 @@ on:
         type: string
   workflow_call:
     inputs:
+      ref:
+        required: false
+        default: ""
+        type: string
       version:
         required: true
         type: string
@@ -46,6 +50,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4

.github/workflows/release-ui.yml

@@ -1,7 +1,13 @@
 name: Release UI
 
 on:
-  workflow_call: {}
+  workflow_call:
+    inputs:
+      ref:
+        description: "Git ref (branch, tag, or SHA) to build from"
+        required: false
+        default: ""
+        type: string
   workflow_dispatch: {}
 
 permissions:
@@ -18,6 +24,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4

.github/workflows/reusable-release.yml

@@ -3,6 +3,11 @@ name: Reusable Release
 on:
   workflow_call:
     inputs:
+      ref:
+        description: "Git ref (branch, tag, or SHA) to build from"
+        required: false
+        default: ""
+        type: string
       version_suffix:
         description: "Suffix appended to package.json version"
         required: false
@@ -46,6 +51,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -84,6 +91,7 @@ jobs:
     needs: prepare-release
     uses: ./.github/workflows/build-and-upload.yml
     with:
+      ref: ${{ inputs.ref || github.ref }}
       version: ${{ needs.prepare-release.outputs.version }}
       tag: ${{ needs.prepare-release.outputs.tag }}
       release_name: ${{ needs.prepare-release.outputs.release_name }}
@@ -95,6 +103,8 @@ jobs:
     permissions:
       contents: read
     uses: ./.github/workflows/release-ui.yml
+    with:
+      ref: ${{ inputs.ref || github.ref }}
     secrets: inherit
 
   publish-server:
@@ -103,6 +113,7 @@ jobs:
       - build-and-upload
     uses: ./.github/workflows/manual-npm-publish.yml
     with:
+      ref: ${{ inputs.ref || github.ref }}
       version: ${{ needs.prepare-release.outputs.version }}
       dist_tag: ${{ inputs.dist_tag }}
       package_name: ${{ inputs.npm_package_name }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -3305,6 +3305,23 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/cli-win32-x64-msvc": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.9.4.tgz",
+      "integrity": "sha512-EdYd4c9wGvtPB95kqtEyY+bUR+k4kRw3IA30mAQ1jPH6z57AftT8q84qwv0RDp6kkEqOBKxeInKfqi4BESYuqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tauri-apps/plugin-notification": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-notification/-/plugin-notification-2.3.3.tgz",
@@ -11985,7 +12002,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -11995,6 +12012,7 @@
       "devDependencies": {
         "7zip-bin": "^5.2.0",
         "app-builder-bin": "^4.2.0",
+        "cross-env": "^7.0.3",
         "electron": "39.0.0",
         "electron-builder": "^24.0.0",
         "electron-vite": "4.0.1",
@@ -12021,7 +12039,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12062,7 +12080,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12070,7 +12088,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
@@ -12092,7 +12110,8 @@
         "shiki": "^3.13.0",
         "solid-js": "^1.8.0",
         "solid-toast": "^0.5.0",
-        "tauri-plugin-keepawake-api": "^0.1.0"
+        "tauri-plugin-keepawake-api": "^0.1.0",
+        "yaml": "^2.4.2"
       },
       "devDependencies": {
         "@vite-pwa/assets-generator": "^1.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",

packages/cloudflare/release-config.json

@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.11.1",
+  "minServerVersion": "0.12.3",
   "latestServerUrl": "https://github.com/NeuralNomadsAI/CodeNomad/releases/latest"
 }

packages/electron-app/electron/main/ipc.ts

@@ -1,4 +1,5 @@
 import { BrowserWindow, Notification, dialog, ipcMain, powerSaveBlocker, type OpenDialogOptions } from "electron"
+import fs from "fs"
 import type { CliProcessManager, CliStatus } from "./process-manager"
 
 let wakeLockId: number | null = null
@@ -65,6 +66,24 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
     return { canceled: result.canceled, paths: result.filePaths }
   })
 
+  ipcMain.handle("filesystem:getDirectoryPaths", async (_event, paths: unknown): Promise<string[]> => {
+    if (!Array.isArray(paths)) {
+      return []
+    }
+
+    const directories = paths.filter((value): value is string => {
+      if (typeof value !== "string" || value.trim().length === 0) {
+        return false
+      }
+      try {
+        return fs.statSync(value).isDirectory()
+      } catch {
+        return false
+      }
+    })
+    return directories
+  })
+
   ipcMain.handle("power:setWakeLock", async (_event, enabled: boolean): Promise<{ enabled: boolean }> => {
     const next = Boolean(enabled)
     if (next) {

packages/electron-app/electron/main/process-manager.ts

@@ -431,7 +431,9 @@ export class CliProcessManager extends EventEmitter {
 
     if (options.dev) {
       const devServer = process.env.VITE_DEV_SERVER_URL || process.env.ELECTRON_RENDERER_URL || "http://localhost:3000"
-      args.push("--ui-dev-server", devServer, "--log-level", "debug")
+      const rawLogLevel = (process.env.CLI_LOG_LEVEL ?? "info").trim()
+      const logLevel = rawLogLevel.length > 0 ? rawLogLevel.toLowerCase() : "info"
+      args.push("--ui-dev-server", devServer, "--log-level", logLevel)
     }
 
     return args

packages/electron-app/electron/preload/index.cjs

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer } = require("electron")
+const { contextBridge, ipcRenderer, webUtils } = require("electron")
 
 const electronAPI = {
   onCliStatus: (callback) => {
@@ -12,6 +12,14 @@ const electronAPI = {
   getCliStatus: () => ipcRenderer.invoke("cli:getStatus"),
   restartCli: () => ipcRenderer.invoke("cli:restart"),
   openDialog: (options) => ipcRenderer.invoke("dialog:open", options),
+  getDirectoryPaths: (paths) => ipcRenderer.invoke("filesystem:getDirectoryPaths", paths),
+  getPathForFile: (file) => {
+    try {
+      return webUtils.getPathForFile(file)
+    } catch {
+      return null
+    }
+  },
   setWakeLock: (enabled) => ipcRenderer.invoke("power:setWakeLock", Boolean(enabled)),
   showNotification: (payload) => ipcRenderer.invoke("notifications:show", payload),
 }

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {
@@ -15,7 +15,10 @@
   },
   "homepage": "https://github.com/NeuralNomadsAI/CodeNomad",
   "scripts": {
-    "dev": "electron-vite dev",
+    "dev": "npm run dev:info",
+    "dev:info": "cross-env CLI_LOG_LEVEL=info electron-vite dev",
+    "dev:debug": "cross-env CLI_LOG_LEVEL=debug electron-vite dev",
+    "dev:trace": "cross-env CLI_LOG_LEVEL=trace electron-vite dev",
     "dev:electron": "NODE_ENV=development ELECTRON_ENABLE_LOGGING=1 NODE_OPTIONS=\"--import tsx\" electron electron/main/main.ts",
     "build": "electron-vite build",
     "typecheck": "tsc --noEmit -p tsconfig.json",
@@ -42,6 +45,7 @@
   "devDependencies": {
     "7zip-bin": "^5.2.0",
     "app-builder-bin": "^4.2.0",
+    "cross-env": "^7.0.3",
     "electron": "39.0.0",
     "electron-builder": "^24.0.0",
     "electron-vite": "4.0.1",

packages/opencode-config/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@opencode-ai/plugin": "1.2.6"
+    "@opencode-ai/plugin": "1.2.25"
   }
 }

packages/server/README.md

@@ -5,18 +5,21 @@
 ## Features & Capabilities
 
 ### 🌍 Deployment Freedom
+
 - **Remote Access**: Host CodeNomad on a powerful workstation and access it from your lightweight laptop.
 - **Code Anywhere**: Tunnel in via VPN or SSH to code securely from coffee shops or while traveling.
 - **Multi-Device**: The responsive web client works on tablets and iPads, turning any screen into a dev terminal.
 - **Always-On**: Run as a background service so your sessions are always ready when you connect.
 
 ### ⚡️ Workspace Power
+
 - **Multi-Instance**: Juggle multiple OpenCode sessions side-by-side with per-instance tabs.
 - **Long-Context Native**: Scroll through massive transcripts without hitches.
 - **Deep Task Awareness**: Monitor background tasks and child sessions without losing your flow.
 - **Command Palette**: A single, global palette to jump tabs, launch tools, and fire shortcuts.
 
 ## Prerequisites
+
 - **OpenCode**: `opencode` must be installed and configured on your system.
 - Node.js 18+ and npm (for running or building from source).
 - A workspace folder on disk you want to serve.
@@ -25,6 +28,7 @@
 ## Usage
 
 ### Run via npx (Recommended)
+
 You can run CodeNomad directly without installing it:
 
 ```sh
@@ -43,6 +47,7 @@ On startup, CodeNomad prints two URLs:
 - `Remote Connection URL : ...` (used by browsers/other machines when remote access is enabled)
 
 ### Install Globally
+
 Or install it globally to use the `codenomad` command:
 
 ```sh
@@ -51,6 +56,7 @@ codenomad --launch
 ```
 
 ### Install Locally (per-project)
+
 If you prefer to install CodeNomad into a project and run the local binary:
 
 ```sh
@@ -61,6 +67,7 @@ npx codenomad --launch
 (`npx codenomad ...` will use `./node_modules/.bin/codenomad` when present.)
 
 ### Common Flags
+
 You can configure the server using flags or environment variables:
 
 | Flag | Env Variable | Description |
@@ -74,7 +81,7 @@ You can configure the server using flags or environment variables:
 | `--tls-ca <path>` | `CLI_TLS_CA` | Optional CA chain/bundle (PEM) |
 | `--tlsSANs <list>` | `CLI_TLS_SANS` | Additional TLS SANs (comma-separated) |
 | `--host <addr>` | `CLI_HOST` | Interface to bind (default 127.0.0.1) |
-| `--workspace-root <path>` | `CLI_WORKSPACE_ROOT` | Default root for new workspaces |
+| `--workspace-root <path>` | `CLI_WORKSPACE_ROOT` | Restricts the root path where new workspaces can be opened. Git worktrees are created in `.codenomad/worktrees` inside the project folder. |
 | `--unrestricted-root` | `CLI_UNRESTRICTED_ROOT` | Allow full-filesystem browsing |
 | `--config <path>` | `CLI_CONFIG` | Config file location |
 | `--launch` | `CLI_LAUNCH` | Open the UI in a Chromium-based browser |
@@ -87,10 +94,11 @@ You can configure the server using flags or environment variables:
 | `--ui-dir <path>` | `CLI_UI_DIR` | Directory containing the built UI bundle |
 | `--ui-dev-server <url>` | `CLI_UI_DEV_SERVER` | Proxy UI requests to a running dev server (requires `--https=false --http=true`) |
 | `--ui-no-update` | `CLI_UI_NO_UPDATE` | Disable remote UI updates |
-| `--ui-auto-update <enabled>` | `CLI_UI_AUTO_UPDATE` | Enable remote UI updates (true|false) |
+| `--ui-auto-update <enabled>` | `CLI_UI_AUTO_UPDATE` | Enable remote UI updates (`true` |
 | `--ui-manifest-url <url>` | `CLI_UI_MANIFEST_URL` | Remote UI manifest URL |
 
 ### Dev Releases (Advanced)
+
 If you want the latest bleeding-edge builds (published as GitHub pre-releases), use the dev package:
 
 ```sh
@@ -141,12 +149,14 @@ codenomad --tlsSANs "localhost,127.0.0.1,my-hostname,192.168.1.10"
 ```
 
 ### Authentication
+
 - Default behavior: CodeNomad requires a login (username/password) and stores a session cookie in the browser.
 - `--dangerously-skip-auth` / `CODENOMAD_SKIP_AUTH=true` disables the login prompt and treats all requests as authenticated.
   Use this only when access is already protected by another layer (SSO proxy, VPN, Coder workspace auth, etc.).
   If you bind to `0.0.0.0` while skipping auth, anyone who can reach the port can access the API.
 
 ### Progressive Web App (PWA)
+
 When running as a server CodeNomad can also be installed as a PWA from any supported browser, giving you a native app experience just like the Electron installation but executing on the remote server instead.
 
 1. Open the CodeNomad UI in a Chromium-based browser (Chrome, Edge, Brave, etc.).
@@ -158,5 +168,6 @@ When running as a server CodeNomad can also be installed as a PWA from any suppo
 > If you host CodeNomad on a remote machine, use HTTPS. Self-signed certificates generally won't work unless they are explicitly trusted by the device/browser (e.g., via a custom CA).
 
 ### Data Storage
+
 - **Config**: `~/.config/codenomad/config.json`
 - **Instance Data**: `~/.config/codenomad/instances` (chat history, etc.)

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.3",
+      "version": "0.12.3",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {

packages/server/src/index.ts

@@ -78,7 +78,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     .addOption(new Option("--tls-ca <path>", "TLS CA chain (PEM)").env("CLI_TLS_CA"))
     .addOption(new Option("--tlsSANs <list>", "Additional TLS SANs (comma-separated)").env("CLI_TLS_SANS"))
     .addOption(
-      new Option("--workspace-root <path>", "Workspace root directory").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
+      new Option("--workspace-root <path>", "Restricts root path where workspaces can be opened").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
     )
     .addOption(new Option("--root <path>").env("CLI_ROOT").hideHelp(true))
     .addOption(new Option("--unrestricted-root", "Allow browsing the full filesystem").env("CLI_UNRESTRICTED_ROOT").default(false))

packages/server/src/workspaces/manager.ts

@@ -8,7 +8,7 @@ import { FileSystemBrowser } from "../filesystem/browser"
 import { searchWorkspaceFiles, WorkspaceFileSearchOptions } from "../filesystem/search"
 import { clearWorkspaceSearchCache } from "../filesystem/search-cache"
 import { WorkspaceDescriptor, WorkspaceFileResponse, FileSystemEntry } from "../api-types"
-import { WorkspaceRuntime, ProcessExitInfo, probeBinaryVersion } from "./runtime"
+import { WorkspaceRuntime, ProcessExitInfo } from "./runtime"
 import { Logger } from "../logger"
 import { getOpencodeConfigDir } from "../opencode-config.js"
 import {
@@ -109,10 +109,6 @@ export class WorkspaceManager {
       updatedAt: new Date().toISOString(),
     }
 
-    if (!descriptor.binaryVersion) {
-      descriptor.binaryVersion = this.detectBinaryVersion(resolvedBinaryPath)
-    }
-
     this.workspaces.set(id, descriptor)
 
 
@@ -149,7 +145,10 @@ export class WorkspaceManager {
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
 
-      await this.waitForWorkspaceReadiness({ workspaceId: id, port, exitPromise, getLastOutput })
+      const runtimeVersion = await this.waitForWorkspaceReadiness({ workspaceId: id, port, exitPromise, getLastOutput })
+      if (runtimeVersion) {
+        descriptor.binaryVersion = runtimeVersion
+      }
 
       descriptor.pid = pid
       descriptor.port = port
@@ -278,36 +277,12 @@ export class WorkspaceManager {
     return candidates[0] ?? ""
   }
 
-  private detectBinaryVersion(resolvedPath: string): string | undefined {
-    if (!resolvedPath) {
-      return undefined
-    }
-
-    const result = probeBinaryVersion(resolvedPath)
-    if (result.valid) {
-      if (result.version) {
-        this.options.logger.debug({ binary: resolvedPath, version: result.version }, "Detected binary version")
-        return result.version
-      }
-      if (result.reported) {
-        this.options.logger.debug({ binary: resolvedPath, reported: result.reported }, "Binary reported version string")
-        return result.reported
-      }
-      return undefined
-    }
-
-    if (result.error) {
-      this.options.logger.warn({ binary: resolvedPath, err: result.error }, "Failed to detect binary version")
-    }
-    return undefined
-  }
-
   private async waitForWorkspaceReadiness(params: {
     workspaceId: string
     port: number
     exitPromise: Promise<ProcessExitInfo>
     getLastOutput: () => string
-  }) {
+  }): Promise<string | undefined> {
 
     await Promise.race([
       this.waitForPortAvailability(params.port),
@@ -321,7 +296,7 @@ export class WorkspaceManager {
       }),
     ])
 
-    await this.waitForInstanceHealth(params)
+    const version = await this.waitForInstanceHealth(params)
 
     await Promise.race([
       this.delay(STARTUP_STABILITY_DELAY_MS),
@@ -334,6 +309,8 @@ export class WorkspaceManager {
         )
       }),
     ])
+
+    return version
   }
 
   private async waitForInstanceHealth(params: {
@@ -341,7 +318,7 @@ export class WorkspaceManager {
     port: number
     exitPromise: Promise<ProcessExitInfo>
     getLastOutput: () => string
-  }) {
+  }): Promise<string | undefined> {
     const probeResult = await Promise.race([
       this.probeInstance(params.workspaceId, params.port),
       params.exitPromise.then((info) => {
@@ -355,7 +332,7 @@ export class WorkspaceManager {
     ])
 
     if (probeResult.ok) {
-      return
+      return probeResult.version
     }
 
     const latestOutput = params.getLastOutput().trim()
@@ -366,8 +343,11 @@ export class WorkspaceManager {
     throw new Error(`Workspace ${params.workspaceId} failed health check: ${reason}.`)
   }
 
-  private async probeInstance(workspaceId: string, port: number): Promise<{ ok: boolean; reason?: string }> {
-    const url = `http://127.0.0.1:${port}/project/current`
+  private async probeInstance(
+    workspaceId: string,
+    port: number,
+  ): Promise<{ ok: boolean; reason?: string; version?: string }> {
+    const url = `http://127.0.0.1:${port}/global/health`
 
     try {
       const headers: Record<string, string> = {}
@@ -378,11 +358,22 @@ export class WorkspaceManager {
 
       const response = await fetch(url, { headers })
       if (!response.ok) {
-        const reason = `health probe returned HTTP ${response.status}`
+        const reason = `/global/health returned HTTP ${response.status}`
         this.options.logger.debug({ workspaceId, status: response.status }, "Health probe returned server error")
         return { ok: false, reason }
       }
-      return { ok: true }
+
+      const payload = (await response.json().catch(() => null)) as null | { healthy?: unknown; version?: unknown }
+      const healthy = payload?.healthy === true
+      const version = typeof payload?.version === "string" ? payload.version.trim() : undefined
+
+      if (!healthy) {
+        const reason = "Instance reported unhealthy"
+        this.options.logger.debug({ workspaceId, payload }, "Health probe returned unhealthy response")
+        return { ok: false, reason }
+      }
+
+      return { ok: true, version: version || undefined }
     } catch (error) {
       const reason = error instanceof Error ? error.message : String(error)
       this.options.logger.debug({ workspaceId, err: error }, "Health probe failed")

packages/tauri-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "private": true,
   "license": "MIT",
   "scripts": {

packages/tauri-app/src-tauri/src/cli_manager.rs

@@ -828,14 +828,31 @@ impl CliEntry {
 
         if dev {
             // Dev: plain HTTP + Vite dev server proxy.
+            let ui_dev_server = std::env::var("VITE_DEV_SERVER_URL")
+                .ok()
+                .filter(|value| !value.trim().is_empty())
+                .or_else(|| {
+                    std::env::var("ELECTRON_RENDERER_URL")
+                        .ok()
+                        .filter(|value| !value.trim().is_empty())
+                })
+                .unwrap_or_else(|| "http://localhost:3000".to_string());
+            let log_level = std::env::var("CLI_LOG_LEVEL")
+                .ok()
+                .map(|value| value.trim().to_lowercase())
+                .filter(|value| !value.is_empty())
+                .unwrap_or_else(|| "info".to_string());
+
             args.push("--https".to_string());
             args.push("false".to_string());
             args.push("--http".to_string());
             args.push("true".to_string());
+            args.push("--http-port".to_string());
+            args.push("0".to_string());
             args.push("--ui-dev-server".to_string());
-            args.push("http://localhost:3000".to_string());
+            args.push(ui_dev_server);
             args.push("--log-level".to_string());
-            args.push("debug".to_string());
+            args.push(log_level);
         } else {
             // Prod desktop: always keep loopback HTTP enabled.
             args.push("--https".to_string());
@@ -900,6 +917,11 @@ fn resolve_dist_entry(_app: &AppHandle) -> Option<String> {
 
     if let Ok(exe) = std::env::current_exe() {
         if let Some(dir) = exe.parent() {
+            candidates.push(Some(dir.join("resources/server/dist/bin.js")));
+            candidates.push(Some(dir.join("resources/server/dist/index.js")));
+            candidates.push(Some(dir.join("resources/server/dist/server/bin.js")));
+            candidates.push(Some(dir.join("resources/server/dist/server/index.js")));
+
             let resources = dir.join("../Resources");
             candidates.push(Some(resources.join("server/dist/bin.js")));
             candidates.push(Some(resources.join("server/dist/index.js")));
@@ -995,9 +1017,18 @@ fn first_existing(paths: Vec<Option<PathBuf>>) -> Option<String> {
 }
 
 fn normalize_path(path: PathBuf) -> String {
-    if let Ok(clean) = path.canonicalize() {
-        clean.to_string_lossy().to_string()
+    let resolved = if let Ok(clean) = path.canonicalize() {
+        clean
     } else {
-        path.to_string_lossy().to_string()
+        path
+    };
+
+    let rendered = resolved.to_string_lossy().to_string();
+    if let Some(stripped) = rendered.strip_prefix("\\\\?\\UNC\\") {
+        format!("\\\\{}", stripped)
+    } else if let Some(stripped) = rendered.strip_prefix("\\\\?\\") {
+        stripped.to_string()
+    } else {
+        rendered
     }
 }

packages/tauri-app/src-tauri/src/main.rs

@@ -35,7 +35,6 @@ fn cli_restart(app: AppHandle, state: tauri::State<AppState>) -> Result<CliStatu
     Ok(state.manager.status())
 }
 
-
 fn is_dev_mode() -> bool {
     cfg!(debug_assertions) || std::env::var("TAURI_DEV").is_ok()
 }
@@ -46,7 +45,10 @@ fn should_allow_internal(url: &Url) -> bool {
         // On Windows/WebView2, Tauri serves the app assets from `tauri.localhost`.
         // This must be treated as an internal origin or the navigation guard will
         // redirect it to the system browser and the app will appear blank.
-        "http" | "https" => matches!(url.host_str(), Some("127.0.0.1" | "localhost" | "tauri.localhost")),
+        "http" | "https" => matches!(
+            url.host_str(),
+            Some("127.0.0.1" | "localhost" | "tauri.localhost")
+        ),
         _ => false,
     }
 }
@@ -66,6 +68,39 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
     false
 }
 
+fn collect_directory_paths(paths: &[std::path::PathBuf]) -> Vec<String> {
+    paths
+        .iter()
+        .filter_map(|path| match std::fs::metadata(path) {
+            Ok(metadata) if metadata.is_dir() => Some(path.to_string_lossy().to_string()),
+            _ => None,
+        })
+        .collect()
+}
+
+fn emit_window_event(app_handle: &AppHandle, window_label: &str, event_name: &str) {
+    if let Some(window) = app_handle.get_webview_window(window_label) {
+        let _ = window.emit(event_name, ());
+    }
+}
+
+fn emit_folder_drop_event(
+    app_handle: &AppHandle,
+    window_label: &str,
+    event_name: &str,
+    paths: &[std::path::PathBuf],
+) {
+    let directories = collect_directory_paths(paths);
+
+    if directories.is_empty() {
+        return;
+    }
+
+    if let Some(window) = app_handle.get_webview_window(window_label) {
+        let _ = window.emit(event_name, json!({ "paths": directories }));
+    }
+}
+
 fn main() {
     let navigation_guard: TauriPlugin<Wry, ()> = PluginBuilder::new("external-link-guard")
         .on_navigation(|webview, url| intercept_navigation(webview, url))
@@ -187,6 +222,27 @@ fn main() {
                     app.exit(0);
                 });
             }
+            tauri::RunEvent::WindowEvent {
+                label,
+                event: tauri::WindowEvent::DragDrop(tauri::DragDropEvent::Enter { paths, .. }),
+                ..
+            } => {
+                emit_folder_drop_event(&app_handle, &label, "desktop:folder-drag-enter", &paths);
+            }
+            tauri::RunEvent::WindowEvent {
+                label,
+                event: tauri::WindowEvent::DragDrop(tauri::DragDropEvent::Drop { paths, .. }),
+                ..
+            } => {
+                emit_folder_drop_event(&app_handle, &label, "desktop:folder-drop", &paths);
+            }
+            tauri::RunEvent::WindowEvent {
+                label,
+                event: tauri::WindowEvent::DragDrop(tauri::DragDropEvent::Leave),
+                ..
+            } => {
+                emit_window_event(&app_handle, &label, "desktop:folder-drag-leave");
+            }
             tauri::RunEvent::WindowEvent {
                 event: tauri::WindowEvent::CloseRequested { api, .. },
                 ..
@@ -234,13 +290,16 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
         "new_instance",
         "New Instance",
         true,
-        Some("CmdOrCtrl+N")
+        Some("CmdOrCtrl+N"),
     )?;
-    
+
     let file_menu = SubmenuBuilder::new(app, "File")
         .item(&new_instance_item)
         .separator()
-        .text(if is_mac { "close" } else { "quit" }, if is_mac { "Close" } else { "Quit" })
+        .text(
+            if is_mac { "close" } else { "quit" },
+            if is_mac { "Close" } else { "Quit" },
+        )
         .build()?;
     submenus.push(file_menu);
 
@@ -263,7 +322,6 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
         .text("force_reload", "Force Reload")
         .text("toggle_devtools", "Toggle Developer Tools")
         .separator()
-
         .separator()
         .text("toggle_fullscreen", "Toggle Full Screen")
         .build()?;
@@ -277,9 +335,12 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
     submenus.push(window_menu);
 
     // Build the main menu with all submenus
-    let submenu_refs: Vec<&dyn tauri::menu::IsMenuItem<_>> = submenus.iter().map(|s| s as &dyn tauri::menu::IsMenuItem<_>).collect();
+    let submenu_refs: Vec<&dyn tauri::menu::IsMenuItem<_>> = submenus
+        .iter()
+        .map(|s| s as &dyn tauri::menu::IsMenuItem<_>)
+        .collect();
     let menu = MenuBuilder::new(app).items(&submenu_refs).build()?;
-    
+
     app.set_menu(menu)?;
     Ok(())
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.11.3",
+  "version": "0.12.3",
   "private": true,
   "license": "MIT",
   "type": "module",
@@ -30,7 +30,8 @@
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
     "solid-toast": "^0.5.0",
-    "tauri-plugin-keepawake-api": "^0.1.0"
+    "tauri-plugin-keepawake-api": "^0.1.0",
+    "yaml": "^2.4.2"
   },
   "devDependencies": {
     "@vite-pwa/assets-generator": "^1.0.2",

packages/ui/src/App.tsx

@@ -9,7 +9,7 @@ import { showConfirmDialog } from "./stores/alerts"
 import InstanceTabs from "./components/instance-tabs"
 import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
 import InstanceShell from "./components/instance/instance-shell2"
-import { RemoteAccessOverlay } from "./components/remote-access-overlay"
+import { SettingsScreen } from "./components/settings-screen"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
 import { initGithubStars } from "./stores/github-stars"
@@ -18,6 +18,8 @@ import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
+import { launchError, showLaunchError, clearLaunchError } from "./stores/launch-errors"
+import { formatLaunchErrorMessage, isMissingBinaryMessage } from "./lib/launch-errors"
 import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
@@ -52,6 +54,7 @@ import {
 } from "./stores/sessions"
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
+import { openSettings } from "./stores/settings-screen"
 
 const log = getLogger("actions")
 
@@ -72,16 +75,9 @@ const App: Component = () => {
     setToolOutputExpansion,
     setDiagnosticsExpansion,
     setThinkingBlocksExpansion,
+    setToolInputsVisibility,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
-  interface LaunchErrorState {
-    message: string
-    binaryPath: string
-    missingBinary: boolean
-  }
-  const [launchError, setLaunchError] = createSignal<LaunchErrorState | null>(null)
-  const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
-  const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
@@ -244,35 +240,6 @@ const App: Component = () => {
 
   const launchErrorMessage = () => launchError()?.message ?? ""
 
-  const formatLaunchErrorMessage = (error: unknown): string => {
-    if (!error) {
-      return t("app.launchError.fallbackMessage")
-    }
-    const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
-    try {
-      const parsed = JSON.parse(raw)
-      if (parsed && typeof parsed.error === "string") {
-        return parsed.error
-      }
-    } catch {
-      // ignore JSON parse errors
-    }
-    return raw
-  }
-
-  const isMissingBinaryMessage = (message: string): boolean => {
-    const normalized = message.toLowerCase()
-    return (
-      normalized.includes("opencode binary not found") ||
-      normalized.includes("binary not found") ||
-      normalized.includes("no such file or directory") ||
-      normalized.includes("binary is not executable") ||
-      normalized.includes("enoent")
-    )
-  }
-
-  const clearLaunchError = () => setLaunchError(null)
-
   async function handleSelectFolder(folderPath: string, binaryPath?: string) {
     if (!folderPath) {
       return
@@ -284,20 +251,15 @@ const App: Component = () => {
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
       setShowFolderSelection(false)
-      setIsAdvancedSettingsOpen(false)
 
       log.info("Created instance", {
         instanceId,
         port: instances().get(instanceId)?.port,
       })
     } catch (error) {
-      const message = formatLaunchErrorMessage(error)
+      const message = formatLaunchErrorMessage(error, t("app.launchError.fallbackMessage"))
       const missingBinary = isMissingBinaryMessage(message)
-      setLaunchError({
-        message,
-        binaryPath: selectedBinary,
-        missingBinary,
-      })
+      showLaunchError({ source: "create", message, binaryPath: selectedBinary, missingBinary })
       log.error("Failed to create instance", error)
     } finally {
       setIsSelectingFolder(false)
@@ -310,7 +272,7 @@ const App: Component = () => {
 
   function handleLaunchErrorAdvanced() {
     clearLaunchError()
-    setIsAdvancedSettingsOpen(true)
+    openSettings("opencode")
   }
 
   function handleNewInstanceRequest() {
@@ -402,6 +364,7 @@ const App: Component = () => {
     setToolOutputExpansion,
     setDiagnosticsExpansion,
     setThinkingBlocksExpansion,
+    setToolInputsVisibility,
     handleNewInstanceRequest,
     handleCloseInstance,
     handleNewSession,
@@ -522,7 +485,6 @@ const App: Component = () => {
                   onSelect={setActiveInstanceId}
                   onClose={handleCloseInstance}
                   onNew={handleNewInstanceRequest}
-                  onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
                 />
               </Show>
  
@@ -531,17 +493,24 @@ const App: Component = () => {
                   const isActiveInstance = () => activeInstanceId() === instance.id
                   const isVisible = () => isActiveInstance() && !showFolderSelection()
                     return (
-                      <div class="flex-1 min-h-0 overflow-hidden" style={{ display: isVisible() ? "flex" : "none" }}>
-                        <InstanceMetadataProvider instance={instance}>
-                          <InstanceShell
-                            instance={instance}
-                            escapeInDebounce={escapeInDebounce()}
-                            paletteCommands={paletteCommands}
-                            onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
-                            onNewSession={() => handleNewSession(instance.id)}
-                            handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
-                            handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
-                            onExecuteCommand={executeCommand}
+                       <div
+                         class="flex-1 min-h-0 overflow-hidden"
+                         style={{ display: isVisible() ? "flex" : "none" }}
+                         data-instance-id={instance.id}
+                         data-instance-active={isActiveInstance() ? "true" : "false"}
+                         data-instance-visible={isVisible() ? "true" : "false"}
+                       >
+                         <InstanceMetadataProvider instance={instance}>
+                           <InstanceShell
+                             instance={instance}
+                             isActiveInstance={isActiveInstance()}
+                             escapeInDebounce={escapeInDebounce()}
+                             paletteCommands={paletteCommands}
+                             onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                             onNewSession={() => handleNewSession(instance.id)}
+                             handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                             handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                             onExecuteCommand={executeCommand}
                             tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
                             mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
                             onEnterMobileFullscreen={() => void enterMobileFullscreen()}
@@ -561,10 +530,6 @@ const App: Component = () => {
           <FolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
-            advancedSettingsOpen={isAdvancedSettingsOpen()}
-            onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
-            onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
-            onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
           />
         </Show>
 
@@ -574,12 +539,8 @@ const App: Component = () => {
               <FolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
-                advancedSettingsOpen={isAdvancedSettingsOpen()}
-                onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
-                onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
                 onClose={() => {
                   setShowFolderSelection(false)
-                  setIsAdvancedSettingsOpen(false)
                   clearLaunchError()
                 }}
               />
@@ -587,7 +548,7 @@ const App: Component = () => {
           </div>
         </Show>
  
-        <RemoteAccessOverlay open={remoteAccessOpen()} onClose={() => setRemoteAccessOpen(false)} />
+        <SettingsScreen />
  
         <AlertDialog />
 

packages/ui/src/components/alert-dialog.tsx

@@ -116,11 +116,8 @@ const AlertDialog: Component = () => {
             <Dialog.Portal>
               <Dialog.Overlay class="modal-overlay" />
                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-                 <Dialog.Content
-                   class="modal-surface w-full max-w-xl md:max-w-2xl p-6 border border-base shadow-2xl max-h-[85vh] overflow-hidden flex flex-col"
-                   tabIndex={-1}
-                 >
-                   <div class="flex items-start gap-3 min-h-0">
+                 <Dialog.Content class="modal-surface w-full max-w-sm p-6 border border-base shadow-2xl" tabIndex={-1}>
+                   <div class="flex items-start gap-3">
                      <div
                        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
                        style={{
@@ -132,16 +129,11 @@ const AlertDialog: Component = () => {
                      >
                        {accent.symbol}
                      </div>
-                     <div class="flex-1 min-w-0 min-h-0">
+                     <div class="flex-1 min-w-0">
                        <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
-                       <Dialog.Description class="text-sm text-secondary mt-1">
-                         <div
-                           class="max-h-[60vh] overflow-auto pr-2 whitespace-pre-wrap break-words"
-                           style={{ "overflow-wrap": "anywhere" }}
-                         >
-                           {payload.message}
-                           {payload.detail && <div class="mt-3">{payload.detail}</div>}
-                         </div>
+                       <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words">
+                         {payload.message}
+                         {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
                        </Dialog.Description>
                      </div>
                    </div>

packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx

@@ -61,6 +61,11 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
         // Keep enough gutter space so unified diffs don't overlap `+`/`-` markers.
         lineNumbersMinChars: 4,
         lineDecorationsWidth: 12,
+        // Use legacy diff algorithm for better performance with large files
+        // See: https://github.com/microsoft/vscode/issues/184037
+        diffAlgorithm: "legacy",
+        // Limit computation time to avoid freezing on large files
+        maxComputationTime: 10000,
       })
 
       setReady(true)

packages/ui/src/components/folder-selection-view.tsx

@@ -2,16 +2,17 @@ import { Select } from "@kobalte/core/select"
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
 import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
-import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
-import { ThemeModeToggle } from "./theme-mode-toggle"
 import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
+import { useFolderDrop } from "../lib/hooks/use-folder-drop"
 import VersionPill from "./version-pill"
 import { DiscordSymbolIcon, GitHubMarkIcon } from "./brand-icons"
 import { githubStars } from "../stores/github-stars"
 import { formatCompactCount } from "../lib/formatters"
 import { useI18n, type Locale } from "../lib/i18n"
+import { showAlertDialog } from "../stores/alerts"
+import { openSettings, settingsOpen } from "../stores/settings-screen"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -19,15 +20,11 @@ const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).h
 interface FolderSelectionViewProps {
   onSelectFolder: (folder: string, binaryPath?: string) => void
   isLoading?: boolean
-  advancedSettingsOpen?: boolean
-  onAdvancedSettingsOpen?: () => void
-  onAdvancedSettingsClose?: () => void
-  onOpenRemoteAccess?: () => void
   onClose?: () => void
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
-  const { recentFolders, removeRecentFolder, preferences, updatePreferences, serverSettings, updateLastUsedBinary } = useConfig()
+  const { recentFolders, removeRecentFolder, preferences, updatePreferences, serverSettings } = useConfig()
   const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
@@ -193,6 +190,31 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     })
   })
 
+  function dropTargetBlocked() {
+    return isLoading() || isFolderBrowserOpen() || settingsOpen()
+  }
+
+  function showInvalidFolderDropAlert() {
+    showAlertDialog(t("folderSelection.drop.invalidMessage"), {
+      title: t("folderSelection.drop.invalidTitle"),
+      variant: "warning",
+    })
+  }
+
+
+  const folderDrop = useFolderDrop({
+    enabled: () => !dropTargetBlocked(),
+    onInvalidDrop: showInvalidFolderDropAlert,
+    onDrop: async (paths) => {
+      const firstPath = paths[0]
+      if (!firstPath) {
+        showInvalidFolderDropAlert()
+        return
+      }
+      handleFolderSelect(firstPath)
+    },
+  })
+
   function formatRelativeTime(timestamp: number): string {
     const seconds = Math.floor((Date.now() - timestamp) / 1000)
     const minutes = Math.floor(seconds / 60)
@@ -237,11 +259,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     handleFolderSelect(path)
   }
  
-  function handleBinaryChange(binary: string) {
-
-    setSelectedBinary(binary)
-  }
-
   function handleRemove(path: string, e?: Event) {
     if (isLoading()) return
     e?.stopPropagation()
@@ -317,6 +334,10 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       <div
         class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
         style="background-color: var(--surface-secondary)"
+        onDragEnter={folderDrop.bind.onDragEnter}
+        onDragOver={folderDrop.bind.onDragOver}
+        onDragLeave={folderDrop.bind.onDragLeave}
+        onDrop={folderDrop.bind.onDrop}
       >
         <div
           class="w-full max-w-5xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
@@ -367,16 +388,24 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </Select>
           </div>
           <div class="absolute top-4 right-6 flex items-center gap-2">
-            <ThemeModeToggle class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center" />
-            <Show when={props.onOpenRemoteAccess}>
-              <button
-                type="button"
-                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
-                onClick={() => props.onOpenRemoteAccess?.()}
-              >
-                  <MonitorUp class="w-4 h-4" />
-                </button>
-            </Show>
+            <button
+              type="button"
+              class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+              onClick={() => openSettings("appearance")}
+              aria-label={t("settings.open.title")}
+              title={t("settings.open.title")}
+            >
+              <Settings class="w-4 h-4" />
+            </button>
+            <button
+              type="button"
+              class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+              onClick={() => openSettings("remote")}
+              aria-label={t("instanceTabs.remote.ariaLabel")}
+              title={t("instanceTabs.remote.title")}
+            >
+              <MonitorUp class="w-4 h-4" />
+            </button>
             <Show when={props.onClose}>
               <button
                 type="button"
@@ -564,12 +593,12 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                   </button>
                 </div>
 
-                {/* Advanced settings section */}
+                {/* OpenCode settings section */}
                 <div class="panel-section w-full">
-                  <button onClick={() => props.onAdvancedSettingsOpen?.()} class="panel-section-header w-full justify-between">
+                  <button onClick={() => openSettings("opencode")} class="panel-section-header w-full justify-between">
                     <div class="flex items-center gap-2">
                       <Settings class="w-4 h-4 icon-muted" />
-                      <span class="text-sm font-medium text-secondary">{t("folderSelection.advancedSettings")}</span>
+                      <span class="text-sm font-medium text-secondary">{t("folderSelection.opencode")}</span>
                     </div>
                     <ChevronRight class="w-4 h-4 icon-muted" />
                   </button>
@@ -619,16 +648,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </div>
           </div>
         </Show>
+        <Show when={folderDrop.isSupported && folderDrop.isActive() && !dropTargetBlocked()}>
+          <div class="folder-drop-overlay" aria-hidden="true">
+            <div class="folder-drop-card">
+              <FolderPlus class="w-8 h-8 icon-muted" />
+              <p class="folder-drop-title">{t("folderSelection.drop.title")}</p>
+              <p class="folder-drop-subtext">{t("folderSelection.drop.subtitle")}</p>
+            </div>
+          </div>
+        </Show>
       </div>
 
-      <AdvancedSettingsModal
-        open={Boolean(props.advancedSettingsOpen)}
-        onClose={() => props.onAdvancedSettingsClose?.()}
-        selectedBinary={selectedBinary()}
-        onBinaryChange={handleBinaryChange}
-        isLoading={props.isLoading}
-      />
-
       <DirectoryBrowserDialog
         open={isFolderBrowserOpen()}
         title={t("folderSelection.dialog.title")}

packages/ui/src/components/instance-tabs.tsx

@@ -1,15 +1,14 @@
-import { Component, For, Show, createMemo, createSignal } from "solid-js"
+import { Component, For, Show, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import type { Instance } from "../types/instance"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
-import { Plus, MonitorUp, Bell, BellOff } from "lucide-solid"
+import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { useI18n } from "../lib/i18n"
-import { ThemeModeToggle } from "./theme-mode-toggle"
-import NotificationsSettingsModal from "./notifications-settings-modal"
 import { isOsNotificationSupportedSync } from "../lib/os-notifications"
 import { useConfig } from "../stores/preferences"
+import { openSettings } from "../stores/settings-screen"
 
 interface InstanceTabsProps {
   instances: Map<string, Instance>
@@ -17,13 +16,11 @@ interface InstanceTabsProps {
   onSelect: (instanceId: string) => void
   onClose: (instanceId: string) => void
   onNew: () => void
-  onOpenRemoteAccess?: () => void
 }
 
 const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   const { t } = useI18n()
   const { preferences } = useConfig()
-  const [notificationsOpen, setNotificationsOpen] = createSignal(false)
 
   const notificationsSupported = createMemo(() => isOsNotificationSupportedSync())
   const notificationsEnabled = createMemo(() => Boolean(preferences().osNotificationsEnabled))
@@ -33,8 +30,10 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   })
 
   const notificationTitle = createMemo(() => {
-    if (!notificationsSupported()) return "Notifications unsupported"
-    return notificationsEnabled() ? "Notifications enabled" : "Notifications disabled"
+    if (!notificationsSupported()) return t("settings.notifications.status.unsupported")
+    return notificationsEnabled()
+      ? t("settings.notifications.status.enabled")
+      : t("settings.notifications.status.disabled")
   })
 
   return (
@@ -72,32 +71,35 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
                 />
               </div>
             </Show>
-            <ThemeModeToggle class="new-tab-button" />
+             <button
+               class="new-tab-button"
+               onClick={() => openSettings("appearance")}
+               title={t("settings.open.title")}
+               aria-label={t("settings.open.ariaLabel")}
+             >
+               <Settings class="w-4 h-4" />
+             </button>
 
-            <button
-              class={`new-tab-button ${!notificationsSupported() ? "opacity-50" : ""}`}
-              onClick={() => setNotificationsOpen(true)}
-              title={notificationTitle()}
-              aria-label={notificationTitle()}
-            >
+             <button
+               class={`new-tab-button ${!notificationsSupported() ? "opacity-50" : ""}`}
+               onClick={() => openSettings("notifications")}
+               title={notificationTitle()}
+               aria-label={notificationTitle()}
+             >
               <Dynamic component={notificationIcon()} class="w-4 h-4" />
             </button>
 
-            <Show when={Boolean(props.onOpenRemoteAccess)}>
-              <button
-                class="new-tab-button tab-remote-button"
-                onClick={() => props.onOpenRemoteAccess?.()}
-                title={t("instanceTabs.remote.title")}
-                aria-label={t("instanceTabs.remote.ariaLabel")}
-              >
-                <MonitorUp class="w-4 h-4" />
-              </button>
-            </Show>
+             <button
+               class="new-tab-button tab-remote-button"
+               onClick={() => openSettings("remote")}
+               title={t("instanceTabs.remote.title")}
+               aria-label={t("instanceTabs.remote.ariaLabel")}
+             >
+               <MonitorUp class="w-4 h-4" />
+             </button>
           </div>
         </div>
       </div>
-
-      <NotificationsSettingsModal open={notificationsOpen()} onClose={() => setNotificationsOpen(false)} />
     </div>
 
   )

packages/ui/src/components/instance/instance-shell2.tsx

@@ -62,6 +62,9 @@ const log = getLogger("session")
 
 interface InstanceShellProps {
   instance: Instance
+  // Provided by App-level instance tabs; lets us pause heavy rendering
+  // work for inactive instances while keeping them mounted for fast switching.
+  isActiveInstance?: boolean
   escapeInDebounce: boolean
   paletteCommands: Accessor<Command[]>
   onCloseSession: (sessionId: string) => Promise<void> | void
@@ -115,6 +118,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const desktopQuery = useMediaQuery("(min-width: 1280px)")
 
   const tabletQuery = useMediaQuery("(min-width: 768px)")
+  const compactHeaderQuery = useMediaQuery("(max-width: 1024px)")
 
   const layoutMode = createMemo<LayoutMode>(() => {
     if (desktopQuery()) return "desktop"
@@ -123,6 +127,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   })
 
   const isPhoneLayout = createMemo(() => layoutMode() === "phone")
+  const compactHeaderLayout = createMemo(() => isPhoneLayout() || compactHeaderQuery())
   const mobileFullscreen = createMemo(() => props.mobileFullscreenMode && isPhoneLayout())
   const compactPromptLayout = createMemo(() => layoutMode() !== "desktop")
   const leftPinningSupported = createMemo(() => layoutMode() !== "phone")
@@ -596,7 +601,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
             <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
               <Show
-                when={!isPhoneLayout()}
+                when={!compactHeaderLayout()}
                 fallback={
                   <div class="flex flex-col w-full gap-1.5">
                     <div class="flex flex-wrap items-center justify-between gap-2 w-full">
@@ -625,7 +630,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     <div class="flex flex-wrap items-center justify-center gap-1">
                       <button
                         type="button"
-                        class="connection-status-button px-2 py-0.5 text-xs"
+                        class="connection-status-button command-palette-button"
                         onClick={handleCommandPaletteClick}
                         aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                         style={{ flex: "0 0 auto", width: "auto" }}
@@ -634,8 +639,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       </button>
                       <span class="connection-status-shortcut-hint kbd-hint">
                         <Kbd shortcut="cmd+shift+p" />
-                      </span>
-                    </div>
+                     </span>
+                     </div>
 
                     <div class="flex-1 flex items-center justify-center min-w-0">
                       <span
@@ -646,7 +651,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       </span>
                     </div>
 
-                    <Show when={!props.mobileFullscreenMode}>
+                    <Show when={isPhoneLayout() && !props.mobileFullscreenMode}>
                       <IconButton
                         color="inherit"
                         onClick={props.onEnterMobileFullscreen}
@@ -670,16 +675,18 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                         {rightAppBarButtonIcon()}
                       </IconButton>
                     </Show>
-                  </div>
+                    </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
-                      <ContextMeter
-                        usedTokens={tokenStats().used}
-                        availableTokens={tokenStats().avail}
-                        formatTokens={formatTokenTotal}
-                        usedLabel={t("instanceShell.metrics.usedLabel")}
-                        availableLabel={t("instanceShell.metrics.availableLabel")}
-                      />
+                      <Show when={!showingInfoView()}>
+                        <ContextMeter
+                          usedTokens={tokenStats().used}
+                          availableTokens={tokenStats().avail}
+                          formatTokens={formatTokenTotal}
+                          usedLabel={t("instanceShell.metrics.usedLabel")}
+                          availableLabel={t("instanceShell.metrics.availableLabel")}
+                        />
+                      </Show>
                     </div>
                 </div>
               }
@@ -721,7 +728,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               <div class="session-toolbar-center flex items-center justify-center gap-2 min-w-[160px]">
                 <button
                   type="button"
-                  class="connection-status-button px-2 py-0.5 text-xs"
+                  class="connection-status-button command-palette-button"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}
@@ -796,12 +803,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               >
                 <For each={cachedSessionIds()}>
                   {(sessionId) => {
-                    const isActive = () => activeSessionIdForInstance() === sessionId
+                    const isActive = () => Boolean(props.isActiveInstance) && activeSessionIdForInstance() === sessionId
                     return (
                       <div
                         class="session-cache-pane flex flex-col flex-1 min-h-0"
                         style={{ display: isActive() ? "flex" : "none" }}
                         data-session-id={sessionId}
+                        data-instance-id={props.instance.id}
+                        data-session-active={isActive() ? "true" : "false"}
                         aria-hidden={!isActive()}
                       >
                         <SessionView
@@ -837,7 +846,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   return (
     <>
-      <div class="instance-shell2 flex flex-col flex-1 min-h-0">
+      <div
+        class="instance-shell2 flex flex-col flex-1 min-h-0"
+        data-instance-id={props.instance.id}
+      >
         <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
           {sessionLayout}
         </Show>

packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx

@@ -7,7 +7,7 @@ import {
   type Accessor,
   type Component,
 } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { FileContent, FileNode, File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 import IconButton from "@suid/material/IconButton"
 import MenuOpenIcon from "@suid/icons-material/MenuOpen"

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -1,4 +1,4 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
 
 import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
 
@@ -32,14 +32,18 @@ interface ChangesTabProps {
 }
 
 const ChangesTab: Component<ChangesTabProps> = (props) => {
-  const renderContent = (): JSX.Element => {
-    const sessionId = props.activeSessionId()
+  const sessionId = createMemo(() => props.activeSessionId())
+  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+  const diffs = createMemo(() => (hasSession() ? props.activeSessionDiffs() : null))
 
-    const hasSession = Boolean(sessionId && sessionId !== "info")
-    const diffs = hasSession ? props.activeSessionDiffs() : null
+  const sorted = createMemo<any[]>(() => {
+    const list = diffs()
+    if (!Array.isArray(list)) return []
+    return [...list].sort((a, b) => String(a.file || "").localeCompare(String(b.file || "")))
+  })
 
-    const sorted = Array.isArray(diffs) ? [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || ""))) : []
-    const totals = sorted.reduce(
+  const totals = createMemo(() => {
+    return sorted().reduce(
       (acc, item) => {
         acc.additions += typeof item.additions === "number" ? item.additions : 0
         acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
@@ -47,41 +51,61 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
+  })
 
-    const mostChanged = sorted.length
-      ? sorted.reduce((best, item) => {
-          const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
-          const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
-          const bestScore = bestAdd + bestDel
+  const mostChanged = createMemo<any | null>(() => {
+    const items = sorted()
+    if (items.length === 0) return null
+    return items.reduce((best, item) => {
+      const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
+      const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
+      const bestScore = bestAdd + bestDel
 
-          const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
-          const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
-          const score = add + del
+      const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
+      const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
+      const score = add + del
 
-          if (score > bestScore) return item
-          if (score < bestScore) return best
-          return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
-        }, sorted[0])
-      : null
+      if (score > bestScore) return item
+      if (score < bestScore) return best
+      return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
+    }, items[0])
+  })
 
-    // Auto-select the most-changed file if none selected.
+  const selectedFileData = createMemo<any | null>(() => {
     const currentSelected = props.selectedFile()
-    const selectedFileData = sorted.find((f) => f.file === currentSelected) || mostChanged
-
-    const scopeKey = `${props.instanceId}:${hasSession ? sessionId : "no-session"}`
-
-    const emptyViewerMessage = () => {
-      if (!hasSession) return props.t("instanceShell.sessionChanges.noSessionSelected")
-      if (diffs === undefined) return props.t("instanceShell.sessionChanges.loading")
-      if (!Array.isArray(diffs) || diffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
-      return props.t("instanceShell.filesShell.viewerEmpty")
+    const items = sorted()
+    if (currentSelected) {
+      const match = items.find((f) => f.file === currentSelected)
+      if (match) return match
     }
+    return mostChanged()
+  })
+
+  const scopeKey = createMemo(() => `${props.instanceId}:${hasSession() ? sessionId() : "no-session"}`)
+
+  const emptyViewerMessage = createMemo(() => {
+    if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
+    const currentDiffs = diffs()
+    if (currentDiffs === undefined) return props.t("instanceShell.sessionChanges.loading")
+    if (!Array.isArray(currentDiffs) || currentDiffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
+    return props.t("instanceShell.filesShell.viewerEmpty")
+  })
+
+  const headerPath = createMemo(() => {
+    const file = selectedFileData()
+    return file?.file ? String(file.file) : props.t("instanceShell.rightPanel.tabs.changes")
+  })
+
+  const renderContent = (): JSX.Element => {
+    const sortedList = sorted()
+    const totalsValue = totals()
+    const selected = selectedFileData()
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
         <div class="file-viewer-content file-viewer-content--monaco">
           <Show
-            when={selectedFileData && hasSession && Array.isArray(diffs) && diffs.length > 0 ? selectedFileData : null}
+            when={selected && hasSession() && sortedList.length > 0 ? selected : null}
             fallback={
               <div class="file-viewer-empty">
                 <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
@@ -90,7 +114,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
           >
             {(file) => (
               <MonacoDiffViewer
-                scopeKey={scopeKey}
+                scopeKey={scopeKey()}
                 path={String(file().file || "")}
                 before={String((file() as any).before || "")}
                 after={String((file() as any).after || "")}
@@ -109,11 +133,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListPanel = () => (
-      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
+        <For each={sortedList}>
           {(item) => (
             <div
-              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, props.isPhoneLayout())
               }}
@@ -134,11 +158,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
+        <For each={sortedList}>
           {(item) => (
             <div
-              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, true)
               }}
@@ -159,8 +183,6 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       </Show>
     )
 
-    const headerPath = () => (selectedFileData?.file ? selectedFileData.file : props.t("instanceShell.rightPanel.tabs.changes"))
-
     return (
       <SplitFilePanel
         header={
@@ -171,10 +193,10 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
               <span class="files-tab-stat files-tab-stat-additions">
-                <span class="files-tab-stat-value">+{totals.additions}</span>
+                <span class="files-tab-stat-value">+{totalsValue.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totals.deletions}</span>
+                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
               </span>
             </div>
 

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -1,4 +1,4 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
 import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
@@ -46,17 +46,18 @@ interface GitChangesTabProps {
 }
 
 const GitChangesTab: Component<GitChangesTabProps> = (props) => {
-  const renderContent = (): JSX.Element => {
-    const sessionId = props.activeSessionId()
+  const sessionId = createMemo(() => props.activeSessionId())
+  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+  const entries = createMemo(() => (hasSession() ? props.entries() : null))
 
-    const hasSession = Boolean(sessionId && sessionId !== "info")
-    const entries = hasSession ? props.entries() : null
+  const sorted = createMemo<GitFileStatus[]>(() => {
+    const list = entries()
+    if (!Array.isArray(list)) return []
+    return [...list].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+  })
 
-    const sorted = Array.isArray(entries)
-      ? [...entries].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
-      : []
-
-    const totals = sorted.reduce(
+  const totals = createMemo(() => {
+    return sorted().reduce(
       (acc, item) => {
         acc.additions += typeof item.added === "number" ? item.added : 0
         acc.deletions += typeof item.removed === "number" ? item.removed : 0
@@ -64,21 +65,33 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
+  })
 
-    const nonDeleted = sorted.filter((item) => item && item.status !== "deleted")
-
-    const emptyViewerMessage = () => {
-      if (!hasSession) return "Select a session to view changes."
-      if (entries === null) return "Loading git changes…"
-      if (nonDeleted.length === 0) return "No git changes yet."
-      return "No file selected."
-    }
+  const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
 
+  const selectedEntry = createMemo<GitFileStatus | null>(() => {
+    const list = sorted()
     const selectedPath = props.selectedPath()
     const fallbackPath = props.mostChangedPath()
-    const selectedEntry =
-      sorted.find((item) => item.path === selectedPath) ||
-      (fallbackPath ? sorted.find((item) => item.path === fallbackPath) : null)
+    const found =
+      list.find((item) => item.path === selectedPath) ||
+      (fallbackPath ? list.find((item) => item.path === fallbackPath) : undefined)
+    return found ?? null
+  })
+
+  const emptyViewerMessage = createMemo(() => {
+    if (!hasSession()) return "Select a session to view changes."
+    const currentEntries = entries()
+    if (currentEntries === null) return "Loading git changes…"
+    if (nonDeleted().length === 0) return "No git changes yet."
+    return "No file selected."
+  })
+
+  const renderContent = (): JSX.Element => {
+    const totalsValue = totals()
+    const selected = selectedEntry()
+    const sortedList = sorted()
+    const nonDeletedList = nonDeleted()
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
@@ -91,12 +104,12 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 fallback={
                   <Show
                     when={
-                      selectedEntry &&
+                      selected &&
                       props.selectedBefore() !== null &&
                       props.selectedAfter() !== null &&
-                      selectedEntry.status !== "deleted"
+                      selected.status !== "deleted"
                         ? {
-                            path: selectedEntry.path,
+                            path: selected.path,
                             before: props.selectedBefore() as string,
                             after: props.selectedAfter() as string,
                           }
@@ -109,16 +122,16 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                     }
                   >
                     {(file) => (
-                      <MonacoDiffViewer
-                        scopeKey={props.scopeKey()}
-                        path={String(file().path || "")}
-                        before={String((file() as any).before || "")}
-                        after={String((file() as any).after || "")}
-                        viewMode={props.diffViewMode()}
-                        contextMode={props.diffContextMode()}
-                        wordWrap={props.diffWordWrapMode()}
-                      />
-                    )}
+                        <MonacoDiffViewer
+                          scopeKey={props.scopeKey()}
+                          path={String(file().path || "")}
+                          before={String((file() as any).before || "")}
+                          after={String((file() as any).after || "")}
+                          viewMode={props.diffViewMode()}
+                          contextMode={props.diffContextMode()}
+                          wordWrap={props.diffWordWrapMode()}
+                        />
+                      )}
                   </Show>
                 }
               >
@@ -141,8 +154,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     const renderEmptyList = () => <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
 
     const renderListPanel = () => (
-      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
+        <For each={sortedList}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -173,8 +186,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
+        <For each={sortedList}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -204,19 +217,19 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     return (
-      <SplitFilePanel
-        header={
-          <>
-            <span class="files-tab-selected-path" title={selectedEntry?.path || "Git Changes"}>
-              <span class="file-path-text">{selectedEntry?.path || "Git Changes"}</span>
-            </span>
+          <SplitFilePanel
+            header={
+              <>
+                <span class="files-tab-selected-path" title={selected?.path || "Git Changes"}>
+                  <span class="file-path-text">{selected?.path || "Git Changes"}</span>
+                </span>
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
               <span class="files-tab-stat files-tab-stat-additions">
-                <span class="files-tab-stat-value">+{totals.additions}</span>
+                <span class="files-tab-stat-value">+{totalsValue.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totals.deletions}</span>
+                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
               </span>
               <Show when={props.statusError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
@@ -226,23 +239,23 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
               class="files-header-icon-button"
               title={props.t("instanceShell.rightPanel.actions.refresh")}
               aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
-              disabled={!hasSession || props.statusLoading() || entries === null}
+              disabled={!hasSession() || props.statusLoading() || entries() === null}
               style={{ "margin-left": "auto" }}
               onClick={() => props.onRefresh()}
             >
               <RefreshCw class={`h-4 w-4${props.statusLoading() ? " animate-spin" : ""}`} />
             </button>
 
-            <DiffToolbar
-              viewMode={props.diffViewMode()}
-              contextMode={props.diffContextMode()}
-              wordWrapMode={props.diffWordWrapMode()}
-              onViewModeChange={props.onViewModeChange}
-              onContextModeChange={props.onContextModeChange}
-              onWordWrapModeChange={props.onWordWrapModeChange}
-            />
-          </>
-        }
+              <DiffToolbar
+                viewMode={props.diffViewMode()}
+                contextMode={props.diffContextMode()}
+                wordWrapMode={props.diffWordWrapMode()}
+                onViewModeChange={props.onViewModeChange}
+                onContextModeChange={props.onContextModeChange}
+                onWordWrapModeChange={props.onWordWrapModeChange}
+              />
+            </>
+          }
         list={{ panel: renderListPanel, overlay: renderListOverlay }}
         viewer={renderViewer()}
         listOpen={props.listOpen()}

packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx

@@ -1,8 +1,9 @@
 import { For, Show, type Accessor, type Component } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import { Accordion } from "@kobalte/core"
+import { Tooltip } from "@kobalte/core/tooltip"
 
-import { ChevronDown, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
 
 import type { Instance } from "../../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../../server/src/api-types"
@@ -206,21 +207,25 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "session-changes",
       labelKey: "instanceShell.rightPanel.sections.sessionChanges",
+      tooltipKey: "instanceShell.rightPanel.sections.sessionChanges.tooltip",
       render: renderStatusSessionChanges,
     },
     {
       id: "plan",
       labelKey: "instanceShell.rightPanel.sections.plan",
+      tooltipKey: "instanceShell.rightPanel.sections.plan.tooltip",
       render: renderPlanSectionContent,
     },
     {
       id: "background-processes",
       labelKey: "instanceShell.rightPanel.sections.backgroundProcesses",
+      tooltipKey: "instanceShell.rightPanel.sections.backgroundProcesses.tooltip",
       render: renderBackgroundProcesses,
     },
     {
       id: "mcp",
       labelKey: "instanceShell.rightPanel.sections.mcp",
+      tooltipKey: "instanceShell.rightPanel.sections.mcp.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -233,6 +238,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "lsp",
       labelKey: "instanceShell.rightPanel.sections.lsp",
+      tooltipKey: "instanceShell.rightPanel.sections.lsp.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -245,6 +251,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "plugins",
       labelKey: "instanceShell.rightPanel.sections.plugins",
+      tooltipKey: "instanceShell.rightPanel.sections.plugins.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -276,7 +283,23 @@ const StatusTab: Component<StatusTabProps> = (props) => {
             <Accordion.Item value={section.id} class="right-panel-accordion-item">
               <Accordion.Header>
                 <Accordion.Trigger class="right-panel-accordion-trigger">
-                  <span>{props.t(section.labelKey)}</span>
+                  <span class="section-left">
+                    <Tooltip openDelay={200} gutter={4} placement="top">
+                      <Tooltip.Trigger
+                        class="section-info-trigger"
+                        aria-label={props.t(section.tooltipKey)}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Info class="section-info-icon" />
+                      </Tooltip.Trigger>
+                      <Tooltip.Portal>
+                        <Tooltip.Content class="section-info-tooltip">
+                          {props.t(section.tooltipKey)}
+                        </Tooltip.Content>
+                      </Tooltip.Portal>
+                    </Tooltip>
+                    <span class="section-label">{props.t(section.labelKey)}</span>
+                  </span>
                   <ChevronDown
                     class={`right-panel-accordion-chevron ${isSectionExpanded(section.id) ? "right-panel-accordion-chevron-expanded" : ""}`}
                   />

packages/ui/src/components/instance/shell/useInstanceSessionContext.ts

@@ -1,5 +1,5 @@
 import { batch, createMemo, type Accessor } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { Session } from "../../../types/session"
 import {
   activeParentSessionId,

packages/ui/src/components/markdown.tsx

@@ -92,7 +92,6 @@ export function Markdown(props: MarkdownProps) {
     const globalCache = cacheHandle.get<RenderCache>()
     if (globalCache && cacheMatches(globalCache)) {
       setHtml(globalCache.html)
-      part.renderCache = globalCache
       notifyRendered()
       return
     }
@@ -100,14 +99,11 @@ export function Markdown(props: MarkdownProps) {
     const commitCacheEntry = (renderedHtml: string) => {
       const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
       setHtml(renderedHtml)
-      part.renderCache = cacheEntry
       cacheHandle.set(cacheEntry)
       notifyRendered()
     }
 
     if (!highlightEnabled) {
-      part.renderCache = undefined
-
       try {
         const rendered = await renderMarkdown(text, { suppressHighlight: true })
 
@@ -185,7 +181,6 @@ export function Markdown(props: MarkdownProps) {
         if (latestRequestedText === text) {
           const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
           setHtml(rendered)
-          part.renderCache = cacheEntry
           cacheHandle.set(cacheEntry)
           notifyRendered()
         }
@@ -202,5 +197,15 @@ export function Markdown(props: MarkdownProps) {
 
   const proseClass = () => "markdown-body"
 
-  return <div ref={containerRef} class={proseClass()} innerHTML={html()} />
+  return (
+    <div
+      ref={containerRef}
+      class={proseClass()}
+      data-view="markdown"
+      data-part-id={resolved().partId}
+      data-markdown-theme={resolved().themeKey}
+      data-markdown-highlight={resolved().highlightEnabled ? "true" : "false"}
+      innerHTML={html()}
+    />
+  )
 }

packages/ui/src/components/message-anchors.ts

@@ -0,0 +1,9 @@
+export const MESSAGE_ANCHOR_PREFIX = "message-anchor-"
+
+export function getMessageAnchorId(messageId: string) {
+  return `${MESSAGE_ANCHOR_PREFIX}${messageId}`
+}
+
+export function getMessageIdFromAnchorId(anchorId: string) {
+  return anchorId.startsWith(MESSAGE_ANCHOR_PREFIX) ? anchorId.slice(MESSAGE_ANCHOR_PREFIX.length) : anchorId
+}

packages/ui/src/components/message-block-list.tsx

@@ -1,64 +0,0 @@
-import { Index, type Accessor } from "solid-js"
-import VirtualItem from "./virtual-item"
-import MessageBlock from "./message-block"
-import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
-
-export function getMessageAnchorId(messageId: string) {
-  return `message-anchor-${messageId}`
-}
-
-const VIRTUAL_ITEM_MARGIN_PX = 800
-
-interface MessageBlockListProps {
-  instanceId: string
-  sessionId: string
-  store: () => InstanceMessageStore
-  messageIds: () => string[]
-  lastAssistantIndex: () => number
-  showThinking: () => boolean
-  thinkingDefaultExpanded: () => boolean
-  showUsageMetrics: () => boolean
-  scrollContainer: Accessor<HTMLDivElement | undefined>
-  loading?: boolean
-  onRevert?: (messageId: string) => void
-  onFork?: (messageId?: string) => void
-  onContentRendered?: () => void
-  setBottomSentinel: (element: HTMLDivElement | null) => void
-  suspendMeasurements?: () => boolean
-}
-
-export default function MessageBlockList(props: MessageBlockListProps) {
-  return (
-    <>
-      <Index each={props.messageIds()}>
-        {(messageId, index) => (
-          <VirtualItem
-            id={getMessageAnchorId(messageId())}
-            cacheKey={messageId()}
-            scrollContainer={props.scrollContainer}
-            threshold={VIRTUAL_ITEM_MARGIN_PX}
-            placeholderClass="message-stream-placeholder"
-            virtualizationEnabled={() => !props.loading}
-            suspendMeasurements={props.suspendMeasurements}
-          >
-            <MessageBlock
-              messageId={messageId()}
-              instanceId={props.instanceId}
-              sessionId={props.sessionId}
-              store={props.store}
-              messageIndex={index}
-              lastAssistantIndex={props.lastAssistantIndex}
-              showThinking={props.showThinking}
-              thinkingDefaultExpanded={props.thinkingDefaultExpanded}
-              showUsageMetrics={props.showUsageMetrics}
-              onRevert={props.onRevert}
-              onFork={props.onFork}
-              onContentRendered={props.onContentRendered}
-            />
-          </VirtualItem>
-        )}
-      </Index>
-      <div ref={props.setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
-    </>
-  )
-}

packages/ui/src/components/message-block.tsx

@@ -1,5 +1,5 @@
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, untrack } from "solid-js"
-import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, Trash2 } from "lucide-solid"
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
@@ -12,8 +12,17 @@ import { formatTokenTotal } from "../lib/formatters"
 import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
 import { setActiveInstanceId } from "../stores/instances"
 import { showAlertDialog } from "../stores/alerts"
-import { deleteMessagePart } from "../stores/session-actions"
+import { deleteMessage } from "../stores/session-actions"
 import { useI18n } from "../lib/i18n"
+import type { DeleteHoverState } from "../types/delete-hover"
+
+function DeleteUpToIcon() {
+  return (
+    <span class="relative inline-block w-3.5 h-3.5" aria-hidden="true">
+      <ListStart class="absolute inset-0 w-3.5 h-3.5" aria-hidden="true" />
+    </span>
+  )
+}
 
 const TOOL_ICON = "🔧"
 const USER_BORDER_COLOR = "var(--message-user-border)"
@@ -23,10 +32,10 @@ const TOOL_BORDER_COLOR = "var(--message-tool-border)"
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
 
-type ToolState = import("@opencode-ai/sdk").ToolState
-type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
-type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
-type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+type ToolState = import("@opencode-ai/sdk/v2").ToolState
+type ToolStateRunning = import("@opencode-ai/sdk/v2").ToolStateRunning
+type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
+type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
 
 function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
   return Boolean(state && state.status === "running")
@@ -194,8 +203,13 @@ interface MessageContentItemProps {
   messageIndex: number
   lastAssistantIndex: () => number
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function isSupportedPartType(part: unknown): boolean {
@@ -282,7 +296,12 @@ function MessageContentItem(props: MessageContentItemProps) {
           sessionId={props.sessionId}
           isQueued={isQueued()}
           showAgentMeta={showAgentMeta()}
+          showDeleteMessage={props.showDeleteMessage}
+          onDeleteHoverChange={props.onDeleteHoverChange}
+          selectedMessageIds={props.selectedMessageIds}
+          onToggleSelectedMessage={props.onToggleSelectedMessage}
           onRevert={props.onRevert}
+          onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
           onFork={props.onFork}
           onContentRendered={props.onContentRendered}
         />
@@ -298,11 +317,41 @@ interface ToolCallItemProps {
   messageId: string
   partId: string
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  selectedToolPartKeys?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function ToolCallItem(props: ToolCallItemProps) {
   const { t } = useI18n()
-  const [deleting, setDeleting] = createSignal(false)
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+
+  const isSelectedToolPartForDeletion = () => Boolean(props.selectedToolPartKeys?.().has(`${props.messageId}:${props.partId}`))
+
+  const isDeleteOverlayActive = () => {
+    if (isSelectedForDeletion()) return true
+    if (isSelectedToolPartForDeletion()) return true
+    const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+    if (hover.kind === "message") {
+      return hover.messageId === props.messageId
+    }
+    if (hover.kind === "deleteUpTo") {
+      const ids = props.store().getSessionMessageIds(props.sessionId)
+      const targetIndex = ids.indexOf(hover.messageId)
+      if (targetIndex === -1) return false
+      const currentIndex = ids.indexOf(props.messageId)
+      if (currentIndex === -1) return false
+      return currentIndex >= targetIndex
+    }
+    return false
+  }
 
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -319,14 +368,6 @@ function ToolCallItem(props: ToolCallItemProps) {
   const messageVersion = createMemo(() => record()?.revision ?? 0)
   const partVersion = createMemo(() => partEntry()?.revision ?? 0)
 
-  const deleteDisabled = createMemo(() => {
-    if (deleting()) return true
-    // Avoid deleting while a tool is actively running to prevent confusing UI states.
-    if (isToolStateRunning(toolState())) return true
-    // Avoid deleting permission prompts from here; those are interactive.
-    return Boolean(toolPart()?.pendingPermission)
-  })
-
   const taskSessionId = createMemo(() => {
     const state = toolState()
     if (!state) return ""
@@ -350,38 +391,72 @@ function ToolCallItem(props: ToolCallItemProps) {
     navigateToTaskSession(location)
   }
 
-  const handleDeleteToolPart = async (event: MouseEvent) => {
+  const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
 
-    if (deleteDisabled()) return
+    if (!props.showDeleteMessage) return
+    if (deletingMessage()) return
 
-    setDeleting(true)
+    setDeletingMessage(true)
     try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
     } catch (error) {
-      showAlertDialog(t("messageBlock.tool.deletePart.failed.message"), {
-        title: t("messageBlock.tool.deletePart.failed.title"),
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      setDeleting(false)
+      setDeletingMessage(false)
+    }
+  }
+
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.showDeleteMessage) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
     }
   }
 
   return (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
-        <>
+        <div class="delete-hover-scope" data-delete-part-hover={isDeleteOverlayActive() ? "true" : undefined}>
           <div class="tool-call-header-label">
             <div class="tool-call-header-meta">
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                  }}
+                  onChange={(event) => {
+                    event.stopPropagation()
+                    const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+                    props.onToggleSelectedMessage?.(props.messageId, next)
+                  }}
+                  aria-label={t("messageItem.selection.checkboxAriaLabel")}
+                  title={t("messageItem.selection.checkboxAriaLabel")}
+                />
+              </Show>
+
               <span class="tool-call-icon">{TOOL_ICON}</span>
               <span>{t("messageBlock.tool.header")}</span>
               <span class="tool-name">{toolName() || t("messageBlock.tool.unknown")}</span>
             </div>
 
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-0">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -395,16 +470,33 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
 
-              <button
-                class="tool-call-header-button"
-                type="button"
-                disabled={deleteDisabled()}
-                onClick={handleDeleteToolPart}
-                title={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
-                aria-label={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
-              >
-                <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
-              </button>
+              <Show when={props.showDeleteMessage}>
+                <button
+                  class="tool-call-header-button"
+                  type="button"
+                  disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                  onClick={handleDeleteUpTo}
+                  onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+                  onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                  title={t("messageItem.actions.deleteMessagesUpTo")}
+                  aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+                >
+                  <DeleteUpToIcon />
+                </button>
+
+                <button
+                  class="tool-call-header-button"
+                  type="button"
+                  disabled={deletingMessage()}
+                  onClick={handleDeleteMessage}
+                  onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
+                  onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                  title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                  aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                >
+                  <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </Show>
             </div>
           </div>
 
@@ -418,7 +510,7 @@ function ToolCallItem(props: ToolCallItemProps) {
             sessionId={props.sessionId}
             onContentRendered={props.onContentRendered}
           />
-        </>
+        </div>
       )}
     </Show>
   )
@@ -470,7 +562,13 @@ interface MessageBlockProps {
   showThinking: () => boolean
   thinkingDefaultExpanded: () => boolean
   showUsageMetrics: () => boolean
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  selectedMessageIds?: () => Set<string>
+  selectedToolPartKeys?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
 }
@@ -480,6 +578,29 @@ export default function MessageBlock(props: MessageBlockProps) {
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
+  const isDeleteMessageHovered = () => {
+    const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+
+    const selected = props.selectedMessageIds?.() ?? new Set<string>()
+    if (selected.has(props.messageId)) {
+      return true
+    }
+
+    if (hover.kind === "message") {
+      return hover.messageId === props.messageId
+    }
+
+    if (hover.kind === "deleteUpTo") {
+      const ids = props.store().getSessionMessageIds(props.sessionId)
+      const targetIndex = ids.indexOf(hover.messageId)
+      if (targetIndex === -1) return false
+      const currentIndex = ids.indexOf(props.messageId)
+      if (currentIndex === -1) return false
+      return currentIndex >= targetIndex
+    }
+
+    return false
+  }
 
   const block = createMemo<MessageDisplayBlock | null>(() => {
     const current = record()
@@ -668,9 +789,13 @@ export default function MessageBlock(props: MessageBlockProps) {
   return (
     <Show when={block()}>
       {(resolvedBlock) => (
-        <div class="message-stream-block" data-message-id={resolvedBlock().record.id}>
+        <div
+          class="message-stream-block"
+          data-message-id={resolvedBlock().record.id}
+          data-delete-message-hover={isDeleteMessageHovered() ? "true" : undefined}
+        >
           <For each={resolvedBlock().items}>
-            {(item) => (
+            {(item, index) => (
               <Switch>
                 <Match when={item.type === "content"}>
                   <MessageContentItem
@@ -681,7 +806,12 @@ export default function MessageBlock(props: MessageBlockProps) {
                     startPartId={(item as ContentDisplayItem).startPartId}
                     messageIndex={props.messageIndex}
                     lastAssistantIndex={props.lastAssistantIndex}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                     onRevert={props.onRevert}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                     onFork={props.onFork}
                     onContentRendered={props.onContentRendered}
                   />
@@ -697,6 +827,13 @@ export default function MessageBlock(props: MessageBlockProps) {
                           store={props.store}
                           messageId={toolItem.messageId}
                           partId={toolItem.partId}
+                          showDeleteMessage={index() === 0}
+                          deleteHover={props.deleteHover}
+                          onDeleteHoverChange={props.onDeleteHoverChange}
+                          onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                          selectedMessageIds={props.selectedMessageIds}
+                          selectedToolPartKeys={props.selectedToolPartKeys}
+                          onToggleSelectedMessage={props.onToggleSelectedMessage}
                           onContentRendered={props.onContentRendered}
                         />
                       </div>
@@ -709,6 +846,14 @@ export default function MessageBlock(props: MessageBlockProps) {
                     part={(item as StepDisplayItem).part}
                     messageInfo={(item as StepDisplayItem).messageInfo}
                     showAgentMeta
+                    showDeleteMessage={index() === 0}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    messageId={props.messageId}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
                 <Match when={item.type === "step-finish"}>
@@ -718,6 +863,14 @@ export default function MessageBlock(props: MessageBlockProps) {
                     messageInfo={(item as StepDisplayItem).messageInfo}
                     showUsage={props.showUsageMetrics()}
                     borderColor={(item as StepDisplayItem).accentColor}
+                    showDeleteMessage={index() === 0}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    messageId={props.messageId}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
                 <Match when={item.type === "compaction"}>
@@ -728,7 +881,11 @@ export default function MessageBlock(props: MessageBlockProps) {
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     messageId={(item as CompactionDisplayItem).messageId}
-                    partId={(item as CompactionDisplayItem).partId}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
                 <Match when={item.type === "reasoning"}>
@@ -738,9 +895,13 @@ export default function MessageBlock(props: MessageBlockProps) {
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     messageId={(item as ReasoningDisplayItem).messageId}
-                    partId={(item as ReasoningDisplayItem).partId}
                     showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
                     defaultExpanded={(item as ReasoningDisplayItem).defaultExpanded}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
               </Switch>
@@ -759,6 +920,14 @@ interface StepCardProps {
   showAgentMeta?: boolean
   showUsage?: boolean
   borderColor?: string
+  showDeleteMessage?: boolean
+  instanceId?: string
+  sessionId?: string
+  messageId?: string
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 interface CompactionCardProps {
@@ -768,12 +937,18 @@ interface CompactionCardProps {
   instanceId: string
   sessionId: string
   messageId: string
-  partId: string
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function CompactionCard(props: CompactionCardProps) {
   const { t } = useI18n()
-  const [deleting, setDeleting] = createSignal(false)
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
   const isAuto = () => Boolean((props.part as any)?.auto)
   const label = () => (isAuto() ? t("messageBlock.compaction.autoLabel") : t("messageBlock.compaction.manualLabel"))
   const borderColor = () => props.borderColor ?? (isAuto() ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR)
@@ -781,44 +956,98 @@ function CompactionCard(props: CompactionCardProps) {
   const containerClass = () =>
     `message-compaction-card ${isAuto() ? "message-compaction-card--auto" : "message-compaction-card--manual"}`
 
-  const canDelete = () => Boolean(props.partId) && !deleting()
+  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
-  const handleDelete = async (event: MouseEvent) => {
+  const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!canDelete()) return
-    setDeleting(true)
+    if (!props.showDeleteMessage) return
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
     try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
     } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      setDeleting(false)
+      setDeletingMessage(false)
+    }
+  }
+
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.showDeleteMessage) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
     }
   }
 
   return (
     <div
-      class={`${containerClass()} relative`}
+      class={`delete-hover-scope ${containerClass()} relative`}
       style={{ "border-left": `4px solid ${borderColor()}` }}
       role="status"
       aria-label={t("messageBlock.compaction.ariaLabel")}
     >
-      <button
-        type="button"
-        class="tool-call-header-button absolute right-2 top-1/2 -translate-y-1/2"
-        disabled={!canDelete()}
-        onClick={handleDelete}
-        title={t("messagePart.actions.deleteTitle")}
-      >
-        {deleting() ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-      </button>
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+        <Show when={props.showDeleteMessage}>
+          <button
+            type="button"
+            class="tool-call-header-button"
+            disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+            onClick={handleDeleteUpTo}
+            onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+            onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+            title={t("messageItem.actions.deleteMessagesUpTo")}
+            aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+          >
+            <DeleteUpToIcon />
+          </button>
+
+          <button
+            type="button"
+            class="tool-call-header-button"
+            disabled={!canDeleteMessage()}
+            onClick={handleDeleteMessage}
+            onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
+            onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+            title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+            aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+          >
+            <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+          </button>
+        </Show>
+      </div>
 
       <div class="message-compaction-row">
+        <Show when={props.showDeleteMessage}>
+          <input
+            class="message-select-checkbox"
+            type="checkbox"
+            checked={isSelectedForDeletion()}
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+            onChange={(event) => {
+              event.stopPropagation()
+              const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+              props.onToggleSelectedMessage?.(props.messageId, next)
+            }}
+            aria-label={t("messageItem.selection.checkboxAriaLabel")}
+            title={t("messageItem.selection.checkboxAriaLabel")}
+          />
+        </Show>
+
         <FoldVertical class="message-compaction-icon w-4 h-4" aria-hidden="true" />
         <span class="message-compaction-label">{label()}</span>
       </div>
@@ -828,6 +1057,9 @@ function CompactionCard(props: CompactionCardProps) {
 
 function StepCard(props: StepCardProps) {
   const { t } = useI18n()
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+  const isSelectedForDeletion = () => Boolean(props.messageId && props.selectedMessageIds?.().has(props.messageId))
   const timestamp = () => {
     const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
     const date = new Date(value)
@@ -872,6 +1104,42 @@ function StepCard(props: StepCardProps) {
 
   const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
 
+  const canDeleteMessage = () =>
+    Boolean(props.showDeleteMessage && props.instanceId && props.sessionId && props.messageId) && !deletingMessage()
+
+  const handleDeleteMessage = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId!, props.sessionId!, props.messageId!)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.messageId) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
+    }
+  }
+
 
   const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
     const entries = [
@@ -902,17 +1170,83 @@ function StepCard(props: StepCardProps) {
       return null
     }
     return (
-      <div class={`message-step-card message-step-finish message-step-finish-flush`} style={finishStyle()}>
+      <div class={`message-step-card message-step-finish message-step-finish-flush relative`} style={finishStyle()}>
+        <Show when={props.showDeleteMessage && props.messageId}>
+          <input
+            class="message-select-checkbox absolute left-2 top-1/2 -translate-y-1/2"
+            type="checkbox"
+            checked={isSelectedForDeletion()}
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+            onChange={(event) => {
+              event.stopPropagation()
+              const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+              props.onToggleSelectedMessage?.(props.messageId!, next)
+            }}
+            aria-label={t("messageItem.selection.checkboxAriaLabel")}
+            title={t("messageItem.selection.checkboxAriaLabel")}
+          />
+        </Show>
+
+        <Show when={props.showDeleteMessage}>
+          <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+            <button
+              type="button"
+              class="message-action-button"
+              disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+              onClick={handleDeleteUpTo}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId! })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              title={t("messageItem.actions.deleteMessagesUpTo")}
+              aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+            >
+              <DeleteUpToIcon />
+            </button>
+
+            <button
+              type="button"
+              class="message-action-button"
+              disabled={!canDeleteMessage()}
+              onClick={handleDeleteMessage}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId! })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+              aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+            >
+              <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+            </button>
+          </div>
+        </Show>
+
         {renderUsageChips(usage)}
       </div>
     )
   }
 
   return (
-    <div class={`message-step-card message-step-start`}>
+    <div class={`message-step-card message-step-start relative`}>
       <div class="message-step-heading">
         <div class="message-step-title">
           <div class="message-step-title-left">
+            <Show when={props.showDeleteMessage && props.messageId}>
+              <input
+                class="message-select-checkbox"
+                type="checkbox"
+                checked={isSelectedForDeletion()}
+                onClick={(event) => {
+                  event.stopPropagation()
+                }}
+                onChange={(event) => {
+                  event.stopPropagation()
+                  const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+                  props.onToggleSelectedMessage?.(props.messageId!, next)
+                }}
+                aria-label={t("messageItem.selection.checkboxAriaLabel")}
+                title={t("messageItem.selection.checkboxAriaLabel")}
+              />
+            </Show>
+
             <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
               <span class="message-step-meta-inline">
                 <Show when={agentIdentifier()}>{(value) => <span>{t("messageBlock.step.agentLabel", { agent: value() })}</span>}</Show>
@@ -939,15 +1273,21 @@ interface ReasoningCardProps {
   instanceId: string
   sessionId: string
   messageId: string
-  partId: string
   showAgentMeta?: boolean
   defaultExpanded?: boolean
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function ReasoningCard(props: ReasoningCardProps) {
   const { t } = useI18n()
   const [expanded, setExpanded] = createSignal(Boolean(props.defaultExpanded))
-  const [deleting, setDeleting] = createSignal(false)
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
 
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
@@ -974,6 +1314,8 @@ function ReasoningCard(props: ReasoningCardProps) {
     return modelID
   }
 
+  const hasMeta = () => Boolean(props.showAgentMeta && (agentIdentifier() || modelIdentifier()))
+
   const reasoningText = () => {
     const part = props.part as any
     if (!part) return ""
@@ -1014,29 +1356,44 @@ function ReasoningCard(props: ReasoningCardProps) {
   const viewHideLabel = () =>
     expanded() ? t("messageBlock.reasoning.indicator.hide") : t("messageBlock.reasoning.indicator.view")
 
-  const hasDeleteTarget = () => Boolean(props.partId)
-  const canDelete = () => hasDeleteTarget() && !deleting()
+  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
-  const handleDelete = async (event: MouseEvent) => {
+  const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!canDelete()) return
-    setDeleting(true)
+    if (!props.showDeleteMessage) return
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
     try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
     } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      setDeleting(false)
+      setDeletingMessage(false)
+    }
+  }
+
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.showDeleteMessage) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
     }
   }
 
   return (
-    <div class="message-reasoning-card">
+    <div class="delete-hover-scope message-reasoning-card">
       <div class="message-reasoning-header">
         <button
           type="button"
@@ -1045,22 +1402,28 @@ function ReasoningCard(props: ReasoningCardProps) {
           aria-expanded={expanded()}
           aria-label={expanded() ? t("messageBlock.reasoning.collapseAriaLabel") : t("messageBlock.reasoning.expandAriaLabel")}
         >
-          <span class="message-reasoning-label flex flex-wrap items-center gap-2">
-            <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
-            <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
-              <span class="message-step-meta-inline">
-                <Show when={agentIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
-                  )}
-                </Show>
-                <Show when={modelIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
-                  )}
-                </Show>
-              </span>
-            </Show>
+          <span class="message-reasoning-label">
+            <span class="message-reasoning-label-primary">
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                  }}
+                  onChange={(event) => {
+                    event.stopPropagation()
+                    const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+                    props.onToggleSelectedMessage?.(props.messageId, next)
+                  }}
+                  aria-label={t("messageItem.selection.checkboxAriaLabel")}
+                  title={t("messageItem.selection.checkboxAriaLabel")}
+                />
+              </Show>
+
+              <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
+            </span>
           </span>
         </button>
 
@@ -1081,16 +1444,31 @@ function ReasoningCard(props: ReasoningCardProps) {
             </Show>
           </button>
 
-          <Show when={hasDeleteTarget()}>
+          <Show when={props.showDeleteMessage}>
             <button
               type="button"
               class="message-action-button"
-              onClick={handleDelete}
-              disabled={!canDelete()}
-              aria-label={t("messagePart.actions.deleteTitle")}
-              title={t("messagePart.actions.deleteTitle")}
+              onClick={handleDeleteUpTo}
+              disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+              title={t("messageItem.actions.deleteMessagesUpTo")}
             >
-              <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
+              <DeleteUpToIcon />
+            </button>
+
+            <button
+              type="button"
+              class="message-action-button"
+              onClick={handleDeleteMessage}
+              disabled={!canDeleteMessage()}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+              title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+            >
+              <Trash class="w-3.5 h-3.5" aria-hidden="true" />
             </button>
           </Show>
 
@@ -1098,6 +1476,23 @@ function ReasoningCard(props: ReasoningCardProps) {
         </div>
       </div>
 
+      <Show when={hasMeta()}>
+        <div class="message-reasoning-meta-row">
+          <span class="message-step-meta-inline">
+            <Show when={agentIdentifier()}>
+              {(value) => (
+                <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
+              )}
+            </Show>
+            <Show when={modelIdentifier()}>
+              {(value) => (
+                <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
+              )}
+            </Show>
+          </span>
+        </div>
+      </Show>
+
       <Show when={expanded()}>
         <div class="message-reasoning-expanded">
           <div class="message-reasoning-body">

packages/ui/src/components/message-item.tsx

@@ -1,14 +1,24 @@
-import { For, Show, createSignal } from "solid-js"
-import { Copy, ExternalLink, Split, Trash2, Undo } from "lucide-solid"
-import type { MessageInfo, ClientPart } from "../types/message"
+import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
+import { Portal } from "solid-js/web"
+import { Copy, ListStart, Split, Trash, Undo } from "lucide-solid"
+import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 import { showAlertDialog } from "../stores/alerts"
-import { deleteMessagePart } from "../stores/session-actions"
+import { deleteMessage } from "../stores/session-actions"
 import { isTauriHost } from "../lib/runtime-env"
+import type { DeleteHoverState } from "../types/delete-hover"
+
+function DeleteUpToIcon() {
+  return (
+    <span class="relative inline-block w-3.5 h-3.5" aria-hidden="true">
+      <ListStart class="absolute inset-0 w-3.5 h-3.5" aria-hidden="true" />
+    </span>
+  )
+}
 
 interface MessageItemProps {
   record: MessageRecord
@@ -18,15 +28,112 @@ interface MessageItemProps {
   isQueued?: boolean
   parts: ClientPart[]
   onRevert?: (messageId: string) => void
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   showAgentMeta?: boolean
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 export default function MessageItem(props: MessageItemProps) {
   const { t } = useI18n()
   const [copied, setCopied] = createSignal(false)
-  const [deletingParts, setDeletingParts] = createSignal<Set<string>>(new Set())
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+  type ImagePreviewState = {
+    url: string
+    name: string
+    anchor: HTMLElement
+  }
+
+  const [imagePreview, setImagePreview] = createSignal<ImagePreviewState | null>(null)
+
+  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+  const getImagePreviewPosition = () => {
+    const state = imagePreview()
+    if (!state) return null
+
+    const rect = state.anchor.getBoundingClientRect()
+
+    // Outer box: 320px image + 8px padding on each side.
+    const padding = 8
+    const maxImage = 320
+    const gap = 8
+    const chrome = padding * 2
+    const outerWidth = maxImage + chrome
+    const outerHeight = maxImage + chrome
+
+    const viewportW = window.innerWidth
+    const viewportH = window.innerHeight
+
+    const left = clamp(rect.left, 8, Math.max(8, viewportW - outerWidth - 8))
+
+    const fitsAbove = rect.top >= outerHeight + gap + 8
+    const preferredTop = fitsAbove ? rect.top - outerHeight - gap : rect.bottom + gap
+    const top = clamp(preferredTop, 8, Math.max(8, viewportH - outerHeight - 8))
+
+    return { left, top }
+  }
+
+  createEffect(() => {
+    const active = imagePreview()
+    if (!active) return
+
+    // If the user scrolls (message stream scroll container) or resizes, the anchor moves.
+    // Hide the popover to avoid showing it in the wrong place.
+    const hide = () => setImagePreview(null)
+    window.addEventListener("scroll", hide, true)
+    window.addEventListener("resize", hide)
+    onCleanup(() => {
+      window.removeEventListener("scroll", hide, true)
+      window.removeEventListener("resize", hide)
+    })
+  })
+
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.record.id))
+
+  let topRowEl: HTMLDivElement | undefined
+  let actionsEl: HTMLDivElement | undefined
+  let speakerPrimaryEl: HTMLDivElement | undefined
+  let metaMeasureEl: HTMLSpanElement | undefined
+  const [showMetaInline, setShowMetaInline] = createSignal(true)
+
+  const metaText = () => agentMeta()
+
+  const updateMetaLayout = () => {
+    const text = metaText()
+    if (!text) return
+    if (!topRowEl || !actionsEl || !speakerPrimaryEl || !metaMeasureEl) return
+
+    const rowWidth = topRowEl.getBoundingClientRect().width
+    const actionsWidth = actionsEl.getBoundingClientRect().width
+    const primaryWidth = speakerPrimaryEl.getBoundingClientRect().width
+    const metaWidth = metaMeasureEl.getBoundingClientRect().width
+
+    // Allow for the flex gap between left and actions.
+    const availableLeft = Math.max(0, rowWidth - actionsWidth - 12)
+    setShowMetaInline(primaryWidth + metaWidth + 8 <= availableLeft)
+  }
+
+  createEffect(() => {
+    const text = metaText()
+    if (!text || typeof ResizeObserver === "undefined") {
+      setShowMetaInline(true)
+      return
+    }
+
+    updateMetaLayout()
+    const observer = new ResizeObserver(() => updateMetaLayout())
+    if (topRowEl) observer.observe(topRowEl)
+    if (actionsEl) observer.observe(actionsEl)
+    if (speakerPrimaryEl) observer.observe(speakerPrimaryEl)
+    onCleanup(() => observer.disconnect())
+  })
 
   const isUser = () => props.record.role === "user"
   const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
@@ -123,6 +230,11 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const showImagePreview = (anchor: HTMLElement, url: string, name: string) => {
+    if (!url) return
+    setImagePreview({ anchor, url, name })
+  }
+
   const errorMessage = () => {
     const info = props.messageInfo
     if (!info || info.role !== "assistant" || !info.error) return null
@@ -190,47 +302,30 @@ export default function MessageItem(props: MessageItemProps) {
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const deletableTextPartId = () => {
-    const part = props.parts.find((candidate) => {
-      if (!candidate || candidate.type !== "text") return false
-      const id = (candidate as any).id
-      if (typeof id !== "string" || id.length === 0) return false
-      return !Boolean((candidate as any).synthetic)
-    })
-    return (part as any)?.id as string | undefined
-  }
-
-  const isDeletingPart = (partId?: string) => {
-    if (!partId) return false
-    return deletingParts().has(partId)
-  }
-
-  const setPartDeleting = (partId: string, value: boolean) => {
-    setDeletingParts((prev) => {
-      const next = new Set(prev)
-      if (value) {
-        next.add(partId)
-      } else {
-        next.delete(partId)
-      }
-      return next
-    })
-  }
-
-  const handleDeletePart = async (partId?: string) => {
-    if (!partId) return
-    if (isDeletingPart(partId)) return
-    setPartDeleting(partId, true)
+  const handleDeleteMessage = async () => {
+    if (deletingMessage()) return
+    setDeletingMessage(true)
     try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.record.id, partId)
+      await deleteMessage(props.instanceId, props.sessionId, props.record.id)
     } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      setPartDeleting(partId, false)
+      setDeletingMessage(false)
+    }
+  }
+
+  const handleDeleteUpTo = async () => {
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.record.id)
+    } finally {
+      setDeletingUpTo(false)
     }
   }
 
@@ -258,8 +353,16 @@ export default function MessageItem(props: MessageItemProps) {
     if (!info || info.role !== "assistant") return ""
     const modelID = info.modelID || ""
     const providerID = info.providerID || ""
-    if (modelID && providerID) return `${providerID}/${modelID}`
-    return modelID
+
+    const base = modelID && providerID ? `${providerID}/${modelID}` : modelID
+    if (!base) return ""
+
+    const variant = (info as SDKAssistantMessageV2).variant
+    if (typeof variant === "string" && variant.trim().length > 0) {
+      return `${base} (${variant.trim()})`
+    }
+
+    return base
   }
 
   const agentMeta = () => {
@@ -278,28 +381,68 @@ export default function MessageItem(props: MessageItemProps) {
 
 
   return (
-    <div class={containerClass()}>
+    <div
+      class={containerClass()}
+      data-view="message-item"
+      data-instance-id={props.instanceId}
+      data-session-id={props.sessionId}
+      data-message-id={props.record.id}
+      data-message-role={isUser() ? "user" : "assistant"}
+      data-message-status={props.record.status}
+    >
       <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
-        <div class="message-item-header-row message-item-header-row--top">
-          <div class="message-speaker">
-            <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
-              {speakerLabel()}
-            </span>
+        <div class="message-item-header-row message-item-header-row--top" ref={(el) => (topRowEl = el)}>
+          <div class="message-header-left">
+            <div class="message-speaker-primary" ref={(el) => (speakerPrimaryEl = el)}>
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                  }}
+                  onChange={(event) => {
+                    event.stopPropagation()
+                    const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+                    props.onToggleSelectedMessage?.(props.record.id, next)
+                  }}
+                  aria-label={t("messageItem.selection.checkboxAriaLabel")}
+                  title={t("messageItem.selection.checkboxAriaLabel")}
+                />
+              </Show>
+
+              <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
+                {speakerLabel()}
+              </span>
+            </div>
+
+            <Show when={metaText() && showMetaInline()}>
+              <span class="message-agent-meta-inline">{metaText()}</span>
+            </Show>
+
+            <Show when={metaText()}>
+              <span
+                ref={(el) => (metaMeasureEl = el)}
+                class="message-agent-meta-inline message-agent-meta-inline--measure"
+              >
+                {metaText()}
+              </span>
+            </Show>
           </div>
 
-          <div class="message-item-actions">
+          <div class="message-item-actions" ref={(el) => (actionsEl = el)}>
             <Show when={isUser()}>
               <div class="message-action-group">
-                <Show when={props.onRevert}>
-                  <button
-                    class="message-action-button"
-                    onClick={handleRevert}
-                    title={t("messageItem.actions.revert")}
-                    aria-label={t("messageItem.actions.revert")}
-                  >
-                    <Undo class="w-3.5 h-3.5" aria-hidden="true" />
-                  </button>
-                </Show>
+                <button
+                  class="message-action-button"
+                  onClick={handleCopy}
+                  title={copyLabel()}
+                  aria-label={copyLabel()}
+                >
+                  <Copy class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+
                 <Show when={props.onFork}>
                   <button
                     class="message-action-button"
@@ -310,14 +453,43 @@ export default function MessageItem(props: MessageItemProps) {
                     <Split class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 </Show>
-                <button
-                  class="message-action-button"
-                  onClick={handleCopy}
-                  title={copyLabel()}
-                  aria-label={copyLabel()}
-                >
-                  <Copy class="w-3.5 h-3.5" aria-hidden="true" />
-                </button>
+
+                <Show when={props.onRevert}>
+                  <button
+                    class="message-action-button"
+                    onClick={handleRevert}
+                    title={t("messageItem.actions.revertTitle")}
+                    aria-label={t("messageItem.actions.revertTitle")}
+                  >
+                    <Undo class="w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
+                </Show>
+
+                <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={() => void handleDeleteUpTo()}
+                    disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={t("messageItem.actions.deleteMessagesUpTo")}
+                    aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+                  >
+                    <DeleteUpToIcon />
+                  </button>
+
+                  <button
+                    class="message-action-button"
+                    onClick={handleDeleteMessage}
+                    disabled={deletingMessage()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                    aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                  >
+                    <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
+                </Show>
               </div>
             </Show>
             <Show when={!isUser()}>
@@ -331,18 +503,30 @@ export default function MessageItem(props: MessageItemProps) {
                   <Copy class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
 
-                <Show when={deletableTextPartId()}>
-                  {(partId) => (
-                    <button
-                      class="message-action-button"
-                      onClick={() => void handleDeletePart(partId())}
-                      disabled={isDeletingPart(partId())}
-                      title={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-                      aria-label={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-                    >
-                      <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
-                    </button>
-                  )}
+                <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={() => void handleDeleteUpTo()}
+                    disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={t("messageItem.actions.deleteMessagesUpTo")}
+                    aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+                  >
+                    <DeleteUpToIcon />
+                  </button>
+
+                  <button
+                    class="message-action-button"
+                    onClick={handleDeleteMessage}
+                    disabled={deletingMessage()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                    aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                  >
+                    <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
                 </Show>
               </div>
             </Show>
@@ -350,12 +534,10 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </div>
 
-        <Show when={agentMeta()}>
-          {(meta) => (
-            <div class="message-item-header-row message-item-header-row--bottom">
-              <span class="message-agent-meta">{meta()}</span>
-            </div>
-          )}
+        <Show when={metaText() && !showMetaInline()}>
+          <div class="message-item-header-row message-item-header-row--meta">
+            <span class="message-agent-meta-block">{metaText()}</span>
+          </div>
         </Show>
 
       </header>
@@ -378,16 +560,20 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
 
         <For each={messageParts()}>
-          {(part) => (
-            <MessagePart
-              part={part}
-              messageType={props.record.role}
-              instanceId={props.instanceId}
-              sessionId={props.sessionId}
-              primaryUserTextPartId={primaryUserTextPartId()}
-              onRendered={props.onContentRendered}
-            />
-          )}
+          {(part) => {
+            return (
+              <div class="message-part-shell">
+                <MessagePart
+                  part={part}
+                  messageType={props.record.role}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                  primaryUserTextPartId={primaryUserTextPartId()}
+                  onRendered={props.onContentRendered}
+                />
+              </div>
+            )
+          }}
         </For>
 
         <Show when={fileAttachments().length > 0}>
@@ -397,7 +583,16 @@ export default function MessageItem(props: MessageItemProps) {
                 const name = getAttachmentName(attachment)
                 const isImage = isImageAttachment(attachment)
                 return (
-                  <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`} title={name}>
+                  <div
+                    class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
+                    title={name}
+                    onMouseEnter={(e) => {
+                      if (!isImage) return
+                      const el = e.currentTarget as HTMLElement
+                      showImagePreview(el, attachment.url || "", name)
+                    }}
+                    onMouseLeave={() => setImagePreview(null)}
+                  >
                     <Show when={isImage} fallback={
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path
@@ -425,24 +620,6 @@ export default function MessageItem(props: MessageItemProps) {
                         </svg>
                       </button>
                     </Show>
-
-                    <button
-                      type="button"
-                      onClick={() => void handleDeletePart(attachment.id)}
-                      class="attachment-remove"
-                      disabled={isDeletingPart(attachment.id)}
-                      aria-label={t("messagePart.actions.deleteTitle")}
-                      title={t("messagePart.actions.deleteTitle")}
-                    >
-                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                    <Show when={isImage}>
-                      <div class="attachment-chip-preview">
-                        <img src={attachment.url} alt={name} />
-                      </div>
-                    </Show>
                   </div>
                 )
               }}
@@ -450,6 +627,31 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
+        <Show when={imagePreview()}>
+          {(stateAccessor) => {
+            const state = stateAccessor()
+            const pos = () => getImagePreviewPosition()
+            return (
+              <Portal>
+                <Show when={pos()}>
+                  {(posAccessor) => {
+                    const coords = posAccessor()
+                    return (
+                      <div
+                        class="attachment-image-popover"
+                        style={{ left: `${coords.left}px`, top: `${coords.top}px` }}
+                        aria-hidden="true"
+                      >
+                        <img src={state.url} alt={state.name} />
+                      </div>
+                    )
+                  }}
+                </Show>
+              </Portal>
+            )
+          }}
+        </Show>
+
         <Show when={props.record.status === "sending"}>
           <div class="message-sending">
             <span class="generating-spinner">●</span> {t("messageItem.status.sending")}

packages/ui/src/components/message-list-header.tsx

@@ -51,7 +51,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
         <div class="connection-status-shortcut-action">
           <button
             type="button"
-            class="connection-status-button"
+            class="connection-status-button command-palette-button"
             onClick={props.onCommandPalette}
             aria-label={t("messageListHeader.commandPalette.ariaLabel")}
           >

packages/ui/src/components/message-part.tsx

@@ -131,7 +131,12 @@ export default function MessagePart(props: MessagePartProps) {
     <Switch>
       <Match when={partType() === "text"}>
         <Show when={!shouldHideTextPart() && partHasRenderableText(props.part)}>
-          <div class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()} data-role={textContainerRole()}>
+          <div
+            class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()}
+            data-role={textContainerRole()}
+            data-part-type="text"
+            data-part-id={typeof (props.part as any)?.id === "string" ? (props.part as any).id : undefined}
+          >
             <Show when={canRenderMarkdown()} fallback={<span class="text-primary">{plainTextContent()}</span>}>
               <Markdown
                 part={createTextPartForMarkdown()}

packages/ui/src/components/message-preview.tsx

@@ -1,12 +1,18 @@
 import type { Component } from "solid-js"
 import MessageBlock from "./message-block"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 interface MessagePreviewProps {
   instanceId: string
   sessionId: string
   messageId: string
   store: () => InstanceMessageStore
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 const MessagePreview: Component<MessagePreviewProps> = (props) => {
@@ -24,6 +30,11 @@ const MessagePreview: Component<MessagePreviewProps> = (props) => {
         showThinking={() => false}
         thinkingDefaultExpanded={() => false}
         showUsageMetrics={() => false}
+        deleteHover={props.deleteHover}
+        onDeleteHoverChange={props.onDeleteHoverChange}
+        onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+        selectedMessageIds={props.selectedMessageIds}
+        onToggleSelectedMessage={props.onToggleSelectedMessage}
       />
     </div>
   )

packages/ui/src/components/message-timeline.tsx

@@ -1,12 +1,14 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
+import { getPartCharCount } from "../lib/token-utils"
 import { getToolIcon } from "./tool-call/utils"
 import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
 
@@ -19,18 +21,38 @@ export interface TimelineSegment {
   shortLabel?: string
   variant?: "auto" | "manual"
   toolPartIds?: string[]
+  partIds?: string[]
+  partId?: string
+  totalChars: number
 }
 
 interface MessageTimelineProps {
   segments: TimelineSegment[]
   onSegmentClick?: (segment: TimelineSegment) => void
-  activeMessageId?: string | null
+  onToggleSelection?: (id: string) => void
+  onLongPressSelection?: (segment: TimelineSegment) => void
+  onSelectRange?: (id: string) => void
+  onClearSelection?: () => void
+  selectedIds?: Accessor<Set<string>>
+  expandedMessageIds?: Accessor<Set<string>>
+  // Optional: restrict histogram/xray overlay to only show for these message ids.
+  // Used to hide ribs for messages before the last compaction.
+  deletableMessageIds?: Accessor<Set<string>>
+  activeSegmentId?: string | null
   instanceId: string
   sessionId: string
   showToolSegments?: boolean
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 const MAX_TOOLTIP_LENGTH = 220
+const LONG_PRESS_MS = 500
+const JITTER_THRESHOLD = 10
+const ABSOLUTE_TOKEN_CAP = 10000
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
@@ -38,10 +60,8 @@ interface PendingSegment {
   type: TimelineSegmentType
   texts: string[]
   reasoningTexts: string[]
-  toolTitles: string[]
-  toolTypeLabels: string[]
-  toolIcons: string[]
-  toolPartIds: string[]
+  partIds: string[]
+  totalChars: number
   hasPrimaryText: boolean
 }
 
@@ -171,18 +191,13 @@ export function buildTimelineSegments(
       pending = null
       return
     }
-    const isToolSegment = pending.type === "tool"
-    const label = isToolSegment
-      ? pending.toolTypeLabels[0] || segmentLabel("tool")
-      : segmentLabel(pending.type)
-    const shortLabel = isToolSegment ? pending.toolIcons[0] || getToolIcon("tool") : undefined
-    const tooltip = isToolSegment
-      ? formatToolTooltip(pending.toolTitles, t)
-      : formatTextsTooltip(
-          [...pending.texts, ...pending.reasoningTexts],
-          pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
-        )
- 
+    const label = segmentLabel(pending.type)
+    const shortLabel = undefined
+    const tooltip = formatTextsTooltip(
+      [...pending.texts, ...pending.reasoningTexts],
+      pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
+    )
+
     result.push({
       id: `${record.id}:${segmentIndex}`,
       messageId: record.id,
@@ -190,16 +205,24 @@ export function buildTimelineSegments(
       label,
       tooltip,
       shortLabel,
-      toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
+      partIds: pending.partIds,
+      totalChars: pending.totalChars,
     })
     segmentIndex += 1
     pending = null
   }
- 
+
   const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
     if (!pending || pending.type !== type) {
       flushPending()
-      pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" }
+      pending = {
+        type,
+        texts: [],
+        reasoningTexts: [],
+        partIds: [],
+        totalChars: 0,
+        hasPrimaryText: type !== "assistant",
+      }
     }
     return pending!
   }
@@ -211,14 +234,21 @@ export function buildTimelineSegments(
     if (!part || typeof part !== "object") continue
 
     if (part.type === "tool") {
-      const target = ensureSegment("tool")
+      flushPending()
       const toolPart = part as ToolCallPart
-      target.toolTitles.push(getToolTitle(toolPart, t))
-      target.toolTypeLabels.push(getToolTypeLabel(toolPart, t))
-      target.toolIcons.push(getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"))
-      if (typeof toolPart.id === "string" && toolPart.id.length > 0) {
-        target.toolPartIds.push(toolPart.id)
-      }
+      const partId = typeof toolPart.id === "string" ? toolPart.id : ""
+      const title = getToolTitle(toolPart, t)
+      result.push({
+        id: `${record.id}:${segmentIndex}`,
+        messageId: record.id,
+        type: "tool",
+        label: getToolTypeLabel(toolPart, t) || segmentLabel("tool"),
+        tooltip: formatToolTooltip([title], t),
+        shortLabel: getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"),
+        toolPartIds: partId ? [partId] : undefined,
+        totalChars: getPartCharCount(part),
+      })
+      segmentIndex += 1
       continue
     }
 
@@ -228,13 +258,18 @@ export function buildTimelineSegments(
       const target = ensureSegment(defaultContentType)
       if (target) {
         target.reasoningTexts.push(text)
+        if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+          target.partIds.push((part as any).id)
+        }
+        target.totalChars += getPartCharCount(part)
       }
       continue
     }
- 
+
     if (part.type === "compaction") {
       flushPending()
       const isAuto = Boolean((part as any)?.auto)
+      const partId = typeof (part as any)?.id === "string" ? ((part as any).id as string) : ""
       result.push({
         id: `${record.id}:${segmentIndex}`,
         messageId: record.id,
@@ -242,6 +277,8 @@ export function buildTimelineSegments(
         label: segmentLabel("compaction"),
         tooltip: isAuto ? t("messageTimeline.tooltip.compaction.auto") : t("messageTimeline.tooltip.compaction.manual"),
         variant: isAuto ? "auto" : "manual",
+        partId,
+        totalChars: 0,
       })
       segmentIndex += 1
       continue
@@ -250,19 +287,23 @@ export function buildTimelineSegments(
     if (part.type === "step-start" || part.type === "step-finish") {
       continue
     }
- 
+
     const text = collectTextFromPart(part, t)
     if (text.trim().length === 0) continue
     const target = ensureSegment(defaultContentType)
     if (target) {
       target.texts.push(text)
       target.hasPrimaryText = true
+      if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+        target.partIds.push((part as any).id)
+      }
+      target.totalChars += getPartCharCount(part)
     }
   }
 
 
   flushPending()
- 
+
   return result
 }
 
@@ -278,7 +319,14 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   let hoverTimer: number | null = null
   let closeTimer: number | null = null
   const showTools = () => props.showToolSegments ?? true
- 
+  const deleteHover = () => props.deleteHover?.() ?? { kind: "none" as const }
+
+  const isHistogramEligible = (segment: TimelineSegment): boolean => {
+    const allowed = props.deletableMessageIds?.()
+    if (!allowed) return true
+    return allowed.has(segment.messageId)
+  }
+
   const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
     if (element) {
       buttonRefs.set(segmentId, element)
@@ -286,7 +334,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
       buttonRefs.delete(segmentId)
     }
   }
- 
+
   const clearHoverTimer = () => {
     if (hoverTimer !== null && typeof window !== "undefined") {
       window.clearTimeout(hoverTimer)
@@ -312,8 +360,11 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
       setHoverAnchorRect(null)
     }, 160)
   }
- 
+
   const handleMouseEnter = (segment: TimelineSegment, event: MouseEvent) => {
+    // Suppress previews during long-press selection gestures.
+    if (longPressTimer !== null) return
+
     if (typeof window === "undefined") return
     clearHoverTimer()
     clearCloseTimer()
@@ -328,7 +379,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   const handleMouseLeave = () => {
     scheduleClose()
   }
- 
+
   createEffect(() => {
     if (typeof window === "undefined") return
     const anchor = hoverAnchorRect()
@@ -350,13 +401,235 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     clearCloseTimer()
   })
 
-  createEffect(() => {
-    const activeId = props.activeMessageId
+  // --- Selection & histogram rib state ---
+  const isSelectionActive = createMemo(() => (props.selectedIds?.().size ?? 0) > 0)
 
+  // Segments eligible for xray ribs. We intentionally exclude messages before
+  // the last compaction (when provided by the parent) to avoid misleading token
+  // weights for content that's no longer in context.
+  const xraySegments = createMemo(() => {
+    if (!isSelectionActive()) return [] as TimelineSegment[]
+    return props.segments.filter((segment) => isHistogramEligible(segment))
+  })
+
+  // Stable layout offsets per badge (relative to scroll content), recomputed only
+  // on activation, resize, or expansion — NOT on every scroll frame.
+  const [badgeOffsets, setBadgeOffsets] = createSignal<Record<string, { layoutTop: number; height: number }>>({})
+  const [windowWidth, setWindowWidth] = createSignal(typeof window !== "undefined" ? window.innerWidth : 1200)
+  let scrollContainerRef: HTMLDivElement | undefined
+  let xrayOverlayRef: HTMLDivElement | undefined
+
+  // Full layout recomputation: reads every badge's getBoundingClientRect once,
+  // then stores offsets relative to the scroll content so they survive scrolling.
+  const computeBadgeLayout = () => {
+    if (!isSelectionActive() || !scrollContainerRef) return
+    const containerRect = scrollContainerRef.getBoundingClientRect()
+    const scrollTop = scrollContainerRef.scrollTop
+    const offsets: Record<string, { layoutTop: number; height: number }> = {}
+
+    for (const [id, element] of buttonRefs.entries()) {
+      if (!element) continue
+      const rect = element.getBoundingClientRect()
+      // Store position relative to scroll content (survives scrolling).
+      offsets[id] = {
+        layoutTop: rect.top - containerRect.top + scrollTop,
+        height: rect.height,
+      }
+    }
+    setBadgeOffsets(offsets)
+    if (xrayOverlayRef) {
+      xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollTop}px`)
+    }
+
+    if (typeof window !== "undefined") {
+      setWindowWidth(window.innerWidth)
+    }
+  }
+
+  const handleScroll = () => {
+    if (!isSelectionActive()) return
+    if (!scrollContainerRef || !xrayOverlayRef) return
+    xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
+  }
+
+  createEffect(() => {
+    if (isSelectionActive()) {
+      computeBadgeLayout()
+      if (typeof window !== "undefined") {
+        // Deferred pass: tool segments become visible when selection activates,
+        // but they may need a layout pass before getBoundingClientRect is accurate.
+        requestAnimationFrame(computeBadgeLayout)
+        window.addEventListener("resize", computeBadgeLayout)
+        onCleanup(() => {
+          window.removeEventListener("resize", computeBadgeLayout)
+        })
+      }
+    }
+  })
+
+  // Re-compute badge layout after expansion changes (tools become visible in DOM)
+  createEffect(() => {
+    props.expandedMessageIds?.()
+    if (isSelectionActive()) {
+      requestAnimationFrame(computeBadgeLayout)
+    }
+  })
+
+  const maxRibWidth = createMemo(() => Math.round(windowWidth() * 0.5))
+
+  // Compute fresh char counts from the store. segment.totalChars can be stale for
+  // tool parts whose output arrived after the timeline segment was first built.
+  const liveSegmentChars = createMemo(() => {
+    if (!isSelectionActive()) return {} as Record<string, number>
+    const result: Record<string, number> = {}
+    const resolvedStore = store()
+
+    // Compute live char counts by reading only the parts that the segment
+    // references (partIds/toolPartIds). This stays accurate for streamed tool
+    // outputs without scanning every part in the message.
+    for (const segment of xraySegments()) {
+      const record = resolvedStore.getMessage(segment.messageId)
+      if (!record) {
+        result[segment.id] = segment.totalChars
+        continue
+      }
+
+      const ids = [...(segment.partIds ?? []), ...(segment.toolPartIds ?? [])]
+      let chars = 0
+      for (const partId of ids) {
+        const part = record.parts?.[partId]?.data
+        if (!part) continue
+        chars += getPartCharCount(part)
+      }
+
+      result[segment.id] = chars > 0 ? chars : segment.totalChars
+    }
+
+    return result
+  })
+
+  // Pre-compute aggregate tokens per message: O(n) once, O(1) per lookup.
+  // Avoids the previous O(n²) pattern of iterating all segments inside each <For> item.
+  const aggregateTokensByMessageId = createMemo(() => {
+    const chars = liveSegmentChars()
+    const result: Record<string, number> = {}
+    for (const s of xraySegments()) {
+      result[s.messageId] = (result[s.messageId] ?? 0) + (chars[s.id] ?? s.totalChars)
+    }
+    for (const id of Object.keys(result)) {
+      result[id] = Math.max(Math.round(result[id] / 4), 1)
+    }
+    return result
+  })
+
+  const getSegmentTokens = (segment: TimelineSegment): number => {
+    const isExpanded = props.expandedMessageIds?.().has(segment.messageId) ?? false
+    // When tools are hidden (not expanded, not in selection mode), assistant/user
+    // bars show aggregate tokens for the whole message.  When tools are visible
+    // (expanded or selection mode active), each segment shows its own tokens to
+    // avoid double-counting.
+    if (!isExpanded && !isSelectionActive() && (segment.type === "assistant" || segment.type === "user")) {
+      return aggregateTokensByMessageId()[segment.messageId] ?? 1
+    }
+    const chars = liveSegmentChars()[segment.id] ?? segment.totalChars
+    return Math.max(Math.round(chars / 4), 1)
+  }
+
+  const getMessageAggregateTokens = (messageId: string): number => {
+    return aggregateTokensByMessageId()[messageId] ?? 1
+  }
+
+  const formatTokenLabel = (tokens: number): string => {
+    if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+    if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+    return String(tokens)
+  }
+
+  const maxTokens = createMemo(() => {
+    let max = 0
+    for (const s of xraySegments()) {
+      const tokens = getSegmentTokens(s)
+      if (tokens > max) max = tokens
+    }
+    return Math.max(max, 1)
+  })
+
+  // --- Long-press for mobile selection ---
+  let longPressTimer: number | null = null
+  let wasLongPress = false
+  let pressStartPos = { x: 0, y: 0 }
+
+  const handlePointerDown = (segment: TimelineSegment, event: PointerEvent) => {
+    if (event.button !== 0) return
+    wasLongPress = false
+    pressStartPos = { x: event.clientX, y: event.clientY }
+
+    clearHoverTimer()
+    clearCloseTimer()
+
+    if (longPressTimer !== null && typeof window !== "undefined") {
+      window.clearTimeout(longPressTimer)
+    }
+
+    if (typeof window !== "undefined") {
+      longPressTimer = window.setTimeout(() => {
+        longPressTimer = null
+        wasLongPress = true
+
+        // Scroll anchoring: preserve visual position of the pressed badge.
+        const btn = buttonRefs.get(segment.id)
+        let anchorOffset: number | null = null
+        if (btn && scrollContainerRef) {
+          anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
+        }
+
+        if (props.onLongPressSelection) {
+          props.onLongPressSelection(segment)
+        } else {
+          props.onToggleSelection?.(segment.id)
+        }
+
+        if (anchorOffset !== null && btn && scrollContainerRef) {
+          const desired = btn.offsetTop - anchorOffset
+          if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
+            scrollContainerRef.scrollTop = desired
+          }
+        }
+      }, LONG_PRESS_MS)
+    }
+  }
+
+  const handlePointerUp = () => {
+    if (longPressTimer !== null && typeof window !== "undefined") {
+      window.clearTimeout(longPressTimer)
+      longPressTimer = null
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (longPressTimer !== null) {
+      const dist = Math.sqrt(
+        Math.pow(event.clientX - pressStartPos.x, 2) +
+        Math.pow(event.clientY - pressStartPos.y, 2),
+      )
+      if (dist > JITTER_THRESHOLD) {
+        if (typeof window !== "undefined") {
+          window.clearTimeout(longPressTimer)
+        }
+        longPressTimer = null
+      }
+    }
+  }
+
+  const handleContextMenu = (event: MouseEvent) => {
+    if (wasLongPress) {
+      event.preventDefault()
+    }
+  }
+
+  createEffect(on(() => props.activeSegmentId, (activeId) => {
     if (!activeId) return
-    const targetSegment = props.segments.find((segment) => segment.messageId === activeId)
-    if (!targetSegment) return
-    const element = buttonRefs.get(targetSegment.id)
+    const element = buttonRefs.get(activeId)
     if (!element) return
     const timer = typeof window !== "undefined" ? window.setTimeout(() => {
       element.scrollIntoView({ block: "nearest", behavior: "smooth" })
@@ -366,7 +639,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         window.clearTimeout(timer)
       }
     })
-  })
+  }))
 
   createEffect(() => {
     const element = tooltipElement()
@@ -383,92 +656,265 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   })
 
   const previewData = createMemo(() => {
-
     const segment = hoveredSegment()
     if (!segment) return null
     const record = store().getMessage(segment.messageId)
     if (!record) return null
     return { messageId: segment.messageId }
   })
- 
+
+  // Pre-computed set of messageIds that have at least one tool segment.
+  // Used by groupRole() inside <For> to avoid O(n) .some() per segment → O(1) .has().
+  const messagesWithTools = createMemo(() => {
+    const set = new Set<string>()
+    for (const s of props.segments) {
+      if (s.type === "tool") set.add(s.messageId)
+    }
+    return set
+  })
+
+  // Pre-computed index map for session message ordering.
+  // Used by isDeleteHovered() to replace O(n) indexOf with O(1) Map.get().
+  const messageIdToSessionIndex = createMemo(() => {
+    const ids = store().getSessionMessageIds(props.sessionId)
+    const map = new Map<string, number>()
+    for (let i = 0; i < ids.length; i++) map.set(ids[i], i)
+    return map
+  })
+
   return (
-    <div class="message-timeline" role="navigation" aria-label={t("messageTimeline.ariaLabel")}>
-      <For each={props.segments}>
-        {(segment) => {
-          onCleanup(() => buttonRefs.delete(segment.id))
-          const isActive = () => props.activeMessageId === segment.messageId
+    <div class="message-timeline-container">
+      <div
+        ref={scrollContainerRef}
+        class={`message-timeline${isSelectionActive() ? " message-timeline--selection-active" : ""}`}
+        role="navigation"
+        aria-label={t("messageTimeline.ariaLabel")}
+        onScroll={handleScroll}
+      >
+        <For each={props.segments}>
+          {(segment, segIndex) => {
+            onCleanup(() => buttonRefs.delete(segment.id))
+            const isActive = () => props.activeSegmentId === segment.id
+            const isSelected = () => props.selectedIds?.().has(segment.id)
 
-          const hasActivePermission = () => {
-            if (segment.type !== "tool") return false
-            const partIds = segment.toolPartIds ?? []
-            if (partIds.length === 0) return false
-            for (const partId of partIds) {
-              const permissionState = store().getPermissionState(segment.messageId, partId)
-              if (permissionState?.active) return true
+            const isDeleteHovered = () => {
+              const hover = deleteHover() as DeleteHoverState
+              if (hover.kind === "message") {
+                return hover.messageId === segment.messageId
+              }
+
+              if (hover.kind === "deleteUpTo") {
+                const indexMap = messageIdToSessionIndex()
+                const targetIndex = indexMap.get(hover.messageId)
+                if (targetIndex === undefined) return false
+                const segmentIndex = indexMap.get(segment.messageId)
+                if (segmentIndex === undefined) return false
+                return segmentIndex >= targetIndex
+              }
+
+              return false
             }
-            return false
-          }
 
-          const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission())
+            const isDeleteSelected = () => {
+              const selected = props.selectedMessageIds?.()
+              if (!selected) return false
+              return selected.has(segment.messageId)
+            }
 
-           const shortLabelContent = () => {
-             if (segment.type === "tool") {
-               if (hasActivePermission()) {
-                 return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
+            const hasActivePermission = () => {
+              if (segment.type !== "tool") return false
+              const partIds = segment.toolPartIds ?? []
+              if (partIds.length === 0) return false
+              for (const partId of partIds) {
+                const permissionState = store().getPermissionState(segment.messageId, partId)
+                if (permissionState?.active) return true
+              }
+              return false
+            }
+
+            const isExpanded = () => props.expandedMessageIds?.().has(segment.messageId) ?? false
+            const isHidden = () =>
+              segment.type === "tool" &&
+              !(showTools() || isExpanded() || isSelectionActive() || isActive() || hasActivePermission() || isDeleteHovered() || isDeleteSelected())
+
+            // Group visual indicators: tools belong to the same message as their
+            // assistant.  Uses messageId for correctness (not positional adjacency).
+            const groupRole = (): "child" | "parent" | "none" => {
+              if (segment.type === "tool") return "child"
+              if (segment.type === "assistant" && messagesWithTools().has(segment.messageId)) return "parent"
+              return "none"
+            }
+            const isGroupStart = () => {
+              if (segment.type !== "tool") return false
+              const idx = segIndex()
+              const prev = idx > 0 ? props.segments[idx - 1] : null
+              // First tool in the message's run: either nothing before, or previous
+              // segment is from a different message or is not a tool.
+              return !prev || prev.type !== "tool" || prev.messageId !== segment.messageId
+            }
+
+             const shortLabelContent = () => {
+               if (segment.type === "tool") {
+                 if (hasActivePermission()) {
+                   return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
+                 }
+                 return segment.shortLabel ?? getToolIcon("tool")
                }
-               return segment.shortLabel ?? getToolIcon("tool")
+               if (segment.type === "compaction") {
+                 return <FoldVertical class="message-timeline-icon" aria-hidden="true" />
+               }
+               if (segment.type === "user") {
+                 return <UserIcon class="message-timeline-icon" aria-hidden="true" />
+               }
+               return <BotIcon class="message-timeline-icon" aria-hidden="true" />
              }
-             if (segment.type === "compaction") {
-               return <FoldVertical class="message-timeline-icon" aria-hidden="true" />
-             }
-             if (segment.type === "user") {
-               return <UserIcon class="message-timeline-icon" aria-hidden="true" />
-             }
-             return <BotIcon class="message-timeline-icon" aria-hidden="true" />
-           }
 
-          return (
-             <button
-               ref={(el) => registerButtonRef(segment.id, el)}
-               type="button"
-               data-variant={segment.variant}
-               class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""}`}
+            return (
+              <button
+                  ref={(el) => registerButtonRef(segment.id, el)}
+                  type="button"
+                  data-variant={segment.variant}
+                  class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""} ${isGroupStart() ? "message-timeline-group-start" : ""}`}
 
-              aria-current={isActive() ? "true" : undefined}
-              aria-hidden={isHidden() ? "true" : undefined}
-              onClick={() => props.onSegmentClick?.(segment)}
-              onMouseEnter={(event) => handleMouseEnter(segment, event)}
-              onMouseLeave={handleMouseLeave}
-            >
-              <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>
-              <span class="message-timeline-label message-timeline-label-short">{shortLabelContent()}</span>
-            </button>
-          )
-        }}
-      </For>
-      <Show when={previewData()}>
-        {(data) => {
-          onCleanup(() => setTooltipElement(null))
-          return (
-            <div
-              ref={(element) => setTooltipElement(element)}
-              class="message-timeline-tooltip"
-              style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
-              onMouseEnter={() => clearCloseTimer()}
-              onMouseLeave={() => scheduleClose()}
-            >
-              <MessagePreview
-                messageId={data().messageId}
-                instanceId={props.instanceId}
-                sessionId={props.sessionId}
-                store={store}
-              />
-            </div>
-          )
-        }}
+                  data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
+
+                 aria-current={isActive() ? "true" : undefined}
+                 aria-hidden={isHidden() ? "true" : undefined}
+                 onClick={(event) => {
+                   if (wasLongPress) {
+                     wasLongPress = false
+                     return
+                   }
+
+                   // Capture scroll anchor before selection changes may toggle
+                   // tool segment visibility, which shifts timeline layout.
+                   const btn = buttonRefs.get(segment.id)
+                   let anchorOffset: number | null = null
+                   if (btn && scrollContainerRef) {
+                     anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
+                   }
+
+                   const isMultiSelectActive = (props.selectedIds?.().size ?? 0) > 0
+
+                   if (event.shiftKey) {
+                     props.onSelectRange?.(segment.id)
+                   } else if (event.ctrlKey || event.metaKey) {
+                     props.onToggleSelection?.(segment.id)
+                   } else if (isMultiSelectActive) {
+                     // In selection mode, plain click scrolls to the message
+                     // instead of clearing. Selection is cleared by clicking
+                     // anywhere inside the chat container or pressing Esc.
+                     props.onSegmentClick?.(segment)
+                   } else {
+                     props.onSegmentClick?.(segment)
+                   }
+
+                   // Restore scroll anchor: keep the clicked badge at the same
+                   // visual position after hidden tools appear or disappear.
+                   if (anchorOffset !== null && btn && scrollContainerRef) {
+                     const desired = btn.offsetTop - anchorOffset
+                     if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
+                       scrollContainerRef.scrollTop = desired
+                     }
+                   }
+                 }}
+                onPointerDown={(e) => handlePointerDown(segment, e)}
+                 onPointerUp={handlePointerUp}
+                 onPointerCancel={handlePointerUp}
+                 onPointerMove={handlePointerMove}
+                 onContextMenu={handleContextMenu}
+                 onMouseEnter={(event) => handleMouseEnter(segment, event)}
+                 onMouseLeave={handleMouseLeave}
+              >
+                <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>
+                <span class="message-timeline-label message-timeline-label-short">{shortLabelContent()}</span>
+              </button>
+            )
+          }}
+        </For>
+        <Show when={previewData()}>
+          {(data) => {
+            onCleanup(() => setTooltipElement(null))
+            return (
+              <div
+                ref={(element) => setTooltipElement(element)}
+                class="message-timeline-tooltip"
+                style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
+                onMouseEnter={() => clearCloseTimer()}
+                onMouseLeave={() => scheduleClose()}
+              >
+                <MessagePreview
+                  messageId={data().messageId}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                  store={store}
+                  deleteHover={props.deleteHover}
+                  onDeleteHoverChange={props.onDeleteHoverChange}
+                  onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                  selectedMessageIds={props.selectedMessageIds}
+                />
+              </div>
+            )
+          }}
+        </Show>
+      </div>
+
+      <Show when={isSelectionActive()}>
+        <div
+          ref={(el) => {
+            xrayOverlayRef = el
+            if (xrayOverlayRef && scrollContainerRef) {
+              xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
+            }
+          }}
+          class="message-timeline-xray-overlay"
+          style={{ "--max-rib-width": `${maxRibWidth()}px` }}
+        >
+          <div class="message-timeline-xray-overlay-inner">
+          <For each={xraySegments()}>
+            {(segment) => {
+              const pos = () => {
+                const offset = badgeOffsets()[segment.id]
+                if (!offset) return null
+                return { top: offset.layoutTop + offset.height / 2 }
+              }
+              const tokens = () => getSegmentTokens(segment)
+              const relativeWeight = () => tokens() / maxTokens()
+              const absoluteWeight = () => Math.min(tokens() / ABSOLUTE_TOKEN_CAP, 1.0)
+              const isOverflow = () => tokens() > ABSOLUTE_TOKEN_CAP
+              const isParent = segment.type === "assistant" || segment.type === "user"
+              const displayTokens = () =>
+                isParent ? getMessageAggregateTokens(segment.messageId) : tokens()
+              return (
+                <Show when={pos()}>
+                  <div
+                    class="message-timeline-xray-rib"
+                    style={{
+                      top: `${pos()!.top}px`,
+                      left: "var(--xray-overhang)",
+                    }}
+                  >
+                    <span class="message-timeline-xray-token-label">
+                      {formatTokenLabel(displayTokens())}
+                    </span>
+                    <div
+                      class="message-timeline-relative-bar"
+                      style={{ "--segment-weight": relativeWeight() }}
+                    />
+                    <div
+                      class={`message-timeline-absolute-bar${isOverflow() ? " message-timeline-absolute-bar-overflow" : ""}`}
+                      style={{ "--segment-weight": absoluteWeight() }}
+                    />
+                  </div>
+                </Show>
+              )
+            }}
+          </For>
+          </div>
+        </div>
       </Show>
     </div>
   )
 }
- 
+
 export default MessageTimeline

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

@@ -351,7 +351,9 @@ export default function PromptInput(props: PromptInputProps) {
     const blockquote = lines.map((line) => `> ${line}`).join("\n")
     if (!blockquote) return
 
-    insertBlockContent(`${blockquote}\n`)
+    // End the blockquote with a blank line so the user's next line
+    // doesn't get parsed as a lazy continuation of the quote.
+    insertBlockContent(`${blockquote}\n\n`)
   }
 
   function insertCodeSelection(rawText: string) {

packages/ui/src/components/session/session-view.tsx

@@ -10,6 +10,7 @@ import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
 import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
 import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
+import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { requestData } from "../../lib/opencode-api"
@@ -55,12 +56,22 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   const attachments = createMemo(() => getAttachments(props.instanceId, props.sessionId))
 
+  const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
+
   let promptInputApi: PromptInputApi | null = null
   let pendingPromptText: string | null = null
   let pendingSelectionInsert: { text: string; mode: PromptInsertMode } | null = null
 
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
+
+  function shouldScrollToBottomOnActivate() {
+    const current = session()
+    if (!current) return true
+    const snapshot = messageStore().getScrollSnapshot(current.id, MESSAGE_SCROLL_CACHE_SCOPE)
+    return !snapshot || snapshot.atBottom
+  }
+
   function scheduleScrollToBottom() {
     if (!scrollToBottomHandle) return
     requestAnimationFrame(() => {
@@ -69,6 +80,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   }
   createEffect(() => {
     if (!props.isActive) return
+    if (!shouldScrollToBottomOnActivate()) return
     scheduleScrollToBottom()
   })
 
@@ -225,6 +237,35 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     }
   }
 
+  async function handleDeleteMessagesUpTo(messageId: string) {
+    const ids = messageStore().getSessionMessageIds(props.sessionId)
+    const index = ids.indexOf(messageId)
+    if (index === -1) return
+
+    const restoredText = getUserMessageText(messageId)
+    const toDelete = ids.slice(index)
+
+    try {
+      for (let idx = toDelete.length - 1; idx >= 0; idx -= 1) {
+        await deleteMessage(props.instanceId, props.sessionId, toDelete[idx])
+      }
+    } catch (error) {
+      log.error("Failed to delete messages up to", error)
+      showAlertDialog(t("sessionView.alerts.deleteUpToFailed.message"), {
+        title: t("sessionView.alerts.deleteUpToFailed.title"),
+        variant: "error",
+      })
+    } finally {
+      if (restoredText) {
+        if (promptInputApi) {
+          promptInputApi.setPromptText(restoredText, { focus: true })
+        } else {
+          pendingPromptText = restoredText
+        }
+      }
+    }
+  }
+
   async function handleFork(messageId?: string) {
     if (!messageId) {
       log.warn("Fork requires a user message id")
@@ -283,14 +324,17 @@ export const SessionView: Component<SessionViewProps> = (props) => {
             <MessageSection
                instanceId={props.instanceId}
                sessionId={activeSession.id}
-               loading={messagesLoading()}
-               onRevert={handleRevert}
-               onFork={handleFork}
-               isActive={props.isActive}
+                loading={messagesLoading()}
+                onRevert={handleRevert}
+                onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
+                onFork={handleFork}
+                isActive={props.isActive}
                 registerScrollToBottom={(fn) => {
                   scrollToBottomHandle = fn
                   if (props.isActive) {
-                    scheduleScrollToBottom()
+                    if (shouldScrollToBottomOnActivate()) {
+                      scheduleScrollToBottom()
+                    }
                   }
                 }}
 

packages/ui/src/components/settings-screen.tsx

@@ -0,0 +1,107 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { Settings, Bell, MonitorUp, Paintbrush, Terminal, X } from "lucide-solid"
+import { createMemo, For, type Component } from "solid-js"
+import { useI18n } from "../lib/i18n"
+import {
+  activeSettingsSection,
+  closeSettings,
+  settingsOpen,
+  setActiveSettingsSection,
+  type SettingsSectionId,
+} from "../stores/settings-screen"
+import { AppearanceSettingsSection } from "./settings/appearance-settings-section"
+import { NotificationsSettingsSection } from "./settings/notifications-settings-section"
+import { OpenCodeSettingsSection } from "./settings/opencode-settings-section"
+import { RemoteAccessSettingsSection } from "./settings/remote-access-settings-section"
+
+export const SettingsScreen: Component = () => {
+  const { t } = useI18n()
+
+  const sections = createMemo(() => [
+    { id: "appearance" as SettingsSectionId, icon: Paintbrush, label: t("settings.nav.appearance") },
+    { id: "notifications" as SettingsSectionId, icon: Bell, label: t("settings.nav.notifications") },
+    { id: "remote" as SettingsSectionId, icon: MonitorUp, label: t("settings.nav.remote") },
+    { id: "opencode" as SettingsSectionId, icon: Terminal, label: t("settings.nav.opencode") },
+  ])
+
+  const renderSection = () => {
+    switch (activeSettingsSection()) {
+      case "notifications":
+        return <NotificationsSettingsSection />
+      case "remote":
+        return <RemoteAccessSettingsSection />
+      case "opencode":
+        return <OpenCodeSettingsSection />
+      case "appearance":
+      default:
+        return <AppearanceSettingsSection />
+    }
+  }
+
+  return (
+    <Dialog open={settingsOpen()} onOpenChange={(open) => !open && closeSettings()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="settings-screen-frame">
+          <Dialog.Content class="modal-surface settings-screen-shell">
+            <Dialog.Title class="sr-only">{t("settings.title")}</Dialog.Title>
+
+            <aside class="settings-screen-nav">
+              <div class="settings-screen-nav-header">
+                <div class="settings-screen-nav-title-row">
+                  <span class="settings-screen-nav-icon-wrap">
+                    <Settings class="settings-screen-nav-icon" />
+                  </span>
+                  <div>
+                    <h2 class="settings-screen-title">{t("settings.title")}</h2>
+                  </div>
+                </div>
+              </div>
+
+              <nav class="settings-screen-nav-list" aria-label={t("settings.navigationAriaLabel")}>
+                <For each={sections()}>
+                  {(section) => {
+                    const Icon = section.icon
+                    return (
+                      <button
+                        type="button"
+                        class="settings-nav-button"
+                        data-selected={activeSettingsSection() === section.id ? "true" : "false"}
+                        onClick={() => setActiveSettingsSection(section.id)}
+                      >
+                        <Icon class="settings-nav-button-icon" />
+                        <span>{section.label}</span>
+                      </button>
+                    )
+                  }}
+                </For>
+              </nav>
+            </aside>
+
+            <div class="settings-screen-content">
+              <header class="settings-screen-content-header">
+                <div class="settings-screen-content-header-title-group">
+                  <p class="settings-screen-content-eyebrow">{t("settings.content.eyebrow")}</p>
+                  <h1 class="settings-screen-content-title">
+                    {sections().find((section) => section.id === activeSettingsSection())?.label}
+                  </h1>
+                </div>
+                <button
+                  type="button"
+                  class="selector-button selector-button-secondary settings-screen-close"
+                  onClick={closeSettings}
+                  aria-label={t("settings.close")}
+                  title={t("settings.close")}
+                >
+                  <X class="w-4 h-4" />
+                </button>
+              </header>
+
+              <div class="settings-screen-scroll">{renderSection()}</div>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

packages/ui/src/components/settings/appearance-settings-section.tsx

@@ -0,0 +1,270 @@
+import { Select } from "@kobalte/core/select"
+import { createEffect, createMemo, createSignal, For, type Component } from "solid-js"
+import { Check, ChevronDown, Laptop, Moon, Sun } from "lucide-solid"
+import { useI18n } from "../../lib/i18n"
+import { useTheme, type ThemeMode } from "../../lib/theme"
+import { useConfig } from "../../stores/preferences"
+import { getBehaviorSettings, type BehaviorSetting } from "../../lib/settings/behavior-registry"
+
+const themeModeOptions: Array<{ value: ThemeMode; icon: typeof Laptop }> = [
+  { value: "system", icon: Laptop },
+  { value: "light", icon: Sun },
+  { value: "dark", icon: Moon },
+]
+
+export const AppearanceSettingsSection: Component = () => {
+  const { t } = useI18n()
+  const { themeMode, setThemeMode } = useTheme()
+  const {
+    preferences,
+    updatePreferences,
+    toggleShowThinkingBlocks,
+    toggleKeyboardShortcutHints,
+    toggleShowTimelineTools,
+    toggleUsageMetrics,
+    toggleAutoCleanupBlankSessions,
+    togglePromptSubmitOnEnter,
+    setDiffViewMode,
+    setToolOutputExpansion,
+    setDiagnosticsExpansion,
+    setThinkingBlocksExpansion,
+    setToolInputsVisibility,
+  } = useConfig()
+
+  const behaviorSettings = createMemo(() =>
+    getBehaviorSettings({
+      preferences,
+      updatePreferences,
+      toggleShowThinkingBlocks,
+      toggleKeyboardShortcutHints,
+      toggleShowTimelineTools,
+      toggleUsageMetrics,
+      toggleAutoCleanupBlankSessions,
+      togglePromptSubmitOnEnter,
+      setDiffViewMode,
+      setToolOutputExpansion,
+      setDiagnosticsExpansion,
+      setThinkingBlocksExpansion,
+      setToolInputsVisibility,
+    }),
+  )
+
+  const [overrides, setOverrides] = createSignal<Map<string, unknown>>(new Map())
+
+  const setOverride = (id: string, value: unknown) => {
+    setOverrides((prev) => {
+      const next = new Map(prev)
+      next.set(id, value)
+      return next
+    })
+  }
+
+  createEffect(() => {
+    const current = overrides()
+    if (current.size === 0) return
+
+    const prefs = preferences()
+    const settings = behaviorSettings()
+
+    let changed = false
+    const next = new Map(current)
+    for (const setting of settings) {
+      if (!next.has(setting.id)) continue
+      const overrideValue = next.get(setting.id)
+      const actualValue = setting.get(prefs)
+      if (Object.is(actualValue, overrideValue)) {
+        next.delete(setting.id)
+        changed = true
+      }
+    }
+
+    if (changed) {
+      setOverrides(next)
+    }
+  })
+
+  const readSettingValue = (setting: BehaviorSetting) => {
+    const current = overrides()
+    if (current.has(setting.id)) return current.get(setting.id)
+    return setting.get(preferences())
+  }
+
+  type SelectOption = { value: string; label: string }
+
+  const BehaviorRow: Component<{ setting: BehaviorSetting }> = (props) => {
+    const setting = props.setting
+    const disabled = createMemo(() => (setting.disabled ? Boolean(setting.disabled()) : false))
+
+    if (setting.kind === "toggle") {
+      const options = createMemo<SelectOption[]>(() => [
+        { value: "true", label: t("settings.common.enabled") },
+        { value: "false", label: t("settings.common.disabled") },
+      ])
+      const currentValue = createMemo(() => String(Boolean(readSettingValue(setting))))
+      const selectedOption = createMemo(() => options().find((opt) => opt.value === currentValue()))
+
+      return (
+        <div class={`settings-toggle-row ${disabled() ? "opacity-60" : ""}`}>
+          <div>
+            <div class="settings-toggle-title">{t(setting.titleKey)}</div>
+            <div class="settings-toggle-caption">{t(setting.subtitleKey)}</div>
+          </div>
+          <Select<SelectOption>
+            value={selectedOption()}
+            onChange={(opt) => {
+              if (!opt) return
+              const next = opt.value === "true"
+              setOverride(setting.id, next)
+              setting.set(next)
+            }}
+            options={options()}
+            optionValue="value"
+            optionTextValue="label"
+            disabled={disabled()}
+            itemComponent={(itemProps) => (
+              <Select.Item item={itemProps.item} class="selector-option">
+                <Select.ItemLabel class="selector-option-label">{itemProps.item.rawValue.label}</Select.ItemLabel>
+              </Select.Item>
+            )}
+          >
+            <Select.Trigger class="selector-trigger" aria-label={t(setting.titleKey)}>
+              <div class="flex-1 min-w-0">
+                <Select.Value<SelectOption>>
+                  {(state) => (
+                    <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                      {state.selectedOption()?.label}
+                    </span>
+                  )}
+                </Select.Value>
+              </div>
+              <Select.Icon class="selector-trigger-icon">
+                <ChevronDown class="w-3 h-3" />
+              </Select.Icon>
+            </Select.Trigger>
+
+            <Select.Portal>
+              <Select.Content class="selector-popover">
+                <Select.Listbox class="selector-listbox" />
+              </Select.Content>
+            </Select.Portal>
+          </Select>
+        </div>
+      )
+    }
+
+    const enumSetting = setting as Extract<BehaviorSetting, { kind: "enum" }>
+    const options = createMemo<SelectOption[]>(() =>
+      enumSetting.options.map((opt: { value: string; labelKey: string }) => ({
+        value: String(opt.value),
+        label: t(opt.labelKey),
+      })),
+    )
+    const currentValue = createMemo(() => String(readSettingValue(setting) ?? ""))
+    const selectedOption = createMemo(() => options().find((opt) => opt.value === currentValue()))
+
+    return (
+      <div class={`settings-toggle-row ${disabled() ? "opacity-60" : ""}`}>
+        <div>
+          <div class="settings-toggle-title">{t(setting.titleKey)}</div>
+          <div class="settings-toggle-caption">{t(setting.subtitleKey)}</div>
+        </div>
+        <Select<SelectOption>
+          value={selectedOption()}
+          onChange={(opt) => {
+            if (!opt) return
+            setOverride(setting.id, opt.value)
+            enumSetting.set(opt.value as any)
+          }}
+          options={options()}
+          optionValue="value"
+          optionTextValue="label"
+          disabled={disabled()}
+          itemComponent={(itemProps) => (
+            <Select.Item item={itemProps.item} class="selector-option">
+              <Select.ItemLabel class="selector-option-label">{itemProps.item.rawValue.label}</Select.ItemLabel>
+            </Select.Item>
+          )}
+        >
+          <Select.Trigger class="selector-trigger" aria-label={t(setting.titleKey)}>
+            <div class="flex-1 min-w-0">
+              <Select.Value<SelectOption>>
+                {(state) => (
+                  <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                    {state.selectedOption()?.label}
+                  </span>
+                )}
+              </Select.Value>
+            </div>
+            <Select.Icon class="selector-trigger-icon">
+              <ChevronDown class="w-3 h-3" />
+            </Select.Icon>
+          </Select.Trigger>
+
+          <Select.Portal>
+            <Select.Content class="selector-popover">
+              <Select.Listbox class="selector-listbox" />
+            </Select.Content>
+          </Select.Portal>
+        </Select>
+      </div>
+    )
+  }
+
+  const modeLabel = (mode: ThemeMode) => {
+    if (mode === "system") return t("theme.mode.system")
+    if (mode === "light") return t("theme.mode.light")
+    return t("theme.mode.dark")
+  }
+
+  return (
+    <div class="settings-section-stack">
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("settings.appearance.theme.title")}</h3>
+            <p class="settings-card-subtitle">{t("settings.appearance.theme.subtitle")}</p>
+          </div>
+          <span class="settings-scope-badge">{t("settings.scope.device")}</span>
+        </div>
+        <div class="settings-choice-grid">
+          {themeModeOptions.map((option) => {
+            const Icon = option.icon
+            return (
+              <button
+                type="button"
+                class="settings-choice"
+                data-selected={themeMode() === option.value ? "true" : "false"}
+                onClick={() => setThemeMode(option.value)}
+              >
+                <span class="settings-choice-icon-wrap">
+                  <Icon class="settings-choice-icon" />
+                </span>
+                <span class="settings-choice-copy">
+                  <span class="settings-choice-label">{modeLabel(option.value)}</span>
+                  <span class="settings-choice-description">{t(`settings.appearance.theme.option.${option.value}`)}</span>
+                </span>
+                <span class="settings-choice-check" aria-hidden="true">
+                  <Check class="w-4 h-4" />
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("settings.appearance.behavior.title")}</h3>
+            <p class="settings-card-subtitle">{t("settings.appearance.behavior.subtitle")}</p>
+          </div>
+          <span class="settings-scope-badge">{t("settings.scope.device")}</span>
+        </div>
+
+        <div class="settings-stack">
+          <For each={behaviorSettings()}>{(setting) => <BehaviorRow setting={setting} />}</For>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/settings/notifications-settings-section.tsx

@@ -0,0 +1,227 @@
+import { Show, createEffect, createResource, type Component } from "solid-js"
+import { Bell } from "lucide-solid"
+import { showToastNotification } from "../../lib/notifications"
+import {
+  getOsNotificationCapability,
+  requestOsNotificationPermission,
+  type OsNotificationPermission,
+} from "../../lib/os-notifications"
+import { useConfig } from "../../stores/preferences"
+import { useI18n } from "../../lib/i18n"
+
+function formatPermissionLabel(permission: OsNotificationPermission, t: ReturnType<typeof useI18n>["t"]): string {
+  switch (permission) {
+    case "granted":
+      return t("settings.notifications.permission.granted")
+    case "denied":
+      return t("settings.notifications.permission.denied")
+    case "default":
+      return t("settings.notifications.permission.default")
+    case "unsupported":
+      return t("settings.notifications.permission.unsupported")
+    default:
+      return String(permission)
+  }
+}
+
+export const NotificationsSettingsSection: Component = () => {
+  const { t } = useI18n()
+  const { preferences, updatePreferences } = useConfig()
+  const [capability, { refetch }] = createResource(() => getOsNotificationCapability())
+
+  createEffect(() => {
+    void refetch()
+  })
+
+  const handleEnableToggle = async (enabled: boolean) => {
+    if (!enabled) {
+      updatePreferences({ osNotificationsEnabled: false })
+      return
+    }
+
+    const cap = capability()
+    if (cap && !cap.supported) {
+      showToastNotification({
+        title: t("settings.section.notifications.title"),
+        message: cap.info ?? t("settings.notifications.messages.unsupportedEnvironment"),
+        variant: "warning",
+      })
+      updatePreferences({ osNotificationsEnabled: false })
+      return
+    }
+
+    const permission = await requestOsNotificationPermission()
+    if (permission !== "granted") {
+      showToastNotification({
+        title: t("settings.section.notifications.title"),
+        message:
+          permission === "denied"
+            ? t("settings.notifications.messages.permissionDenied")
+            : t("settings.notifications.messages.permissionNotGranted"),
+        variant: "warning",
+      })
+      updatePreferences({ osNotificationsEnabled: false })
+      return
+    }
+
+    updatePreferences({ osNotificationsEnabled: true })
+    void refetch()
+  }
+
+  const handleRequestPermission = async () => {
+    const cap = capability()
+    if (cap && !cap.supported) {
+      showToastNotification({
+        title: t("settings.section.notifications.title"),
+        message: cap.info ?? t("settings.notifications.messages.unsupportedGeneral"),
+        variant: "warning",
+      })
+      return
+    }
+
+    const permission = await requestOsNotificationPermission()
+    if (permission === "granted") {
+      showToastNotification({
+        title: t("settings.section.notifications.title"),
+        message: t("settings.notifications.messages.permissionGranted"),
+        variant: "success",
+        duration: 6000,
+      })
+      void refetch()
+      return
+    }
+
+    showToastNotification({
+      title: t("settings.section.notifications.title"),
+      message:
+        permission === "denied"
+          ? t("settings.notifications.messages.permissionRequestDenied")
+          : t("settings.notifications.messages.permissionNotGranted"),
+      variant: "warning",
+    })
+    void refetch()
+  }
+
+  const supported = () => capability()?.supported ?? false
+  const permissionLabel = () => formatPermissionLabel(capability()?.permission ?? "unsupported", t)
+  const infoMessage = () => capability()?.info
+
+  return (
+    <div class="settings-section-stack">
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Bell class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("settings.notifications.sessionStatus.title")}</h3>
+              <p class="settings-card-subtitle">{t("settings.notifications.sessionStatus.subtitle")}</p>
+            </div>
+          </div>
+          <span class="settings-scope-badge">{t("settings.scope.device")}</span>
+        </div>
+
+        <div class="settings-stack">
+          <div class="settings-toggle-row">
+            <div>
+              <div class="settings-toggle-title">{t("settings.notifications.enable.title")}</div>
+              <div class="settings-toggle-caption">
+                {t("settings.notifications.enable.permission", { permission: permissionLabel() })}
+              </div>
+            </div>
+            <label class="settings-checkbox-toggle">
+              <input
+                type="checkbox"
+                checked={Boolean(preferences().osNotificationsEnabled)}
+                disabled={!supported() && capability.state === "ready"}
+                onChange={(event) => void handleEnableToggle(event.currentTarget.checked)}
+              />
+              <span>{t("settings.common.enabled")}</span>
+            </label>
+          </div>
+
+          <Show when={supported() && (capability()?.permission ?? "unsupported") !== "granted"}>
+            <div class="settings-toggle-row settings-toggle-row-compact">
+              <div>
+                <div class="settings-toggle-title">{t("settings.notifications.requestPermission.title")}</div>
+                <div class="settings-toggle-caption">{t("settings.notifications.requestPermission.subtitle")}</div>
+              </div>
+              <button
+                type="button"
+                class="selector-button selector-button-secondary w-auto whitespace-nowrap"
+                onClick={() => void handleRequestPermission()}
+              >
+                {t("settings.notifications.requestPermission.action")}
+              </button>
+            </div>
+          </Show>
+
+          <div class="settings-toggle-row">
+            <div>
+              <div class="settings-toggle-title">{t("settings.notifications.allowVisible.title")}</div>
+              <div class="settings-toggle-caption">{t("settings.notifications.allowVisible.subtitle")}</div>
+            </div>
+            <label class="settings-checkbox-toggle">
+              <input
+                type="checkbox"
+                checked={Boolean(preferences().osNotificationsAllowWhenVisible)}
+                disabled={!preferences().osNotificationsEnabled}
+                onChange={(event) => updatePreferences({ osNotificationsAllowWhenVisible: event.currentTarget.checked })}
+              />
+              <span>{t("settings.common.enabled")}</span>
+            </label>
+          </div>
+
+          <Show when={Boolean(infoMessage())}>
+            <div class="settings-inline-note">{infoMessage()}</div>
+          </Show>
+
+          <Show when={!supported() && capability.state === "ready"}>
+            <div class="settings-inline-note">{t("settings.notifications.unsupportedNote")}</div>
+          </Show>
+        </div>
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("settings.notifications.events.title")}</h3>
+            <p class="settings-card-subtitle">{t("settings.notifications.events.subtitle")}</p>
+          </div>
+          <span class="settings-scope-badge">{t("settings.scope.device")}</span>
+        </div>
+
+        <div class="settings-stack">
+          <div class="settings-toggle-row">
+            <div>
+              <div class="settings-toggle-title">{t("settings.notifications.events.needsInput")}</div>
+            </div>
+            <label class="settings-checkbox-toggle">
+              <input
+                type="checkbox"
+                checked={Boolean(preferences().notifyOnNeedsInput)}
+                disabled={!preferences().osNotificationsEnabled}
+                onChange={(event) => updatePreferences({ notifyOnNeedsInput: event.currentTarget.checked })}
+              />
+              <span>{t("settings.common.enabled")}</span>
+            </label>
+          </div>
+
+          <div class="settings-toggle-row">
+            <div>
+              <div class="settings-toggle-title">{t("settings.notifications.events.idle")}</div>
+            </div>
+            <label class="settings-checkbox-toggle">
+              <input
+                type="checkbox"
+                checked={Boolean(preferences().notifyOnIdle)}
+                disabled={!preferences().osNotificationsEnabled}
+                onChange={(event) => updatePreferences({ notifyOnIdle: event.currentTarget.checked })}
+              />
+              <span>{t("settings.common.enabled")}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/settings/opencode-settings-section.tsx

@@ -0,0 +1,52 @@
+import { createEffect, createSignal, type Component } from "solid-js"
+import { Terminal } from "lucide-solid"
+import OpenCodeBinarySelector from "../opencode-binary-selector"
+import EnvironmentVariablesEditor from "../environment-variables-editor"
+import { useConfig } from "../../stores/preferences"
+import { useI18n } from "../../lib/i18n"
+
+export const OpenCodeSettingsSection: Component = () => {
+  const { t } = useI18n()
+  const { serverSettings, updateLastUsedBinary } = useConfig()
+  const [selectedBinary, setSelectedBinary] = createSignal(serverSettings().opencodeBinary || "opencode")
+
+  createEffect(() => {
+    const binary = serverSettings().opencodeBinary || "opencode"
+    setSelectedBinary((current) => (current === binary ? current : binary))
+  })
+
+  const handleBinaryChange = (binary: string) => {
+    setSelectedBinary(binary)
+    updateLastUsedBinary(binary)
+  }
+
+  return (
+    <div class="settings-section-stack">
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Terminal class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("settings.opencode.runtime.title")}</h3>
+              <p class="settings-card-subtitle">{t("settings.opencode.runtime.subtitle")}</p>
+            </div>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+
+        <OpenCodeBinarySelector selectedBinary={selectedBinary()} onBinaryChange={handleBinaryChange} isVisible />
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("advancedSettings.environmentVariables.title")}</h3>
+            <p class="settings-card-subtitle">{t("advancedSettings.environmentVariables.subtitle")}</p>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+        <EnvironmentVariablesEditor />
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/settings/remote-access-settings-section.tsx

@@ -0,0 +1,401 @@
+import { Switch } from "@kobalte/core/switch"
+import { For, Show, createMemo, createSignal, type Component, onMount } from "solid-js"
+import { toDataURL } from "qrcode"
+import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import type { NetworkAddress, ServerMeta } from "../../../../server/src/api-types"
+import { serverApi } from "../../lib/api-client"
+import { restartCli } from "../../lib/native/cli"
+import { serverSettings, setListeningMode } from "../../stores/preferences"
+import { showConfirmDialog } from "../../stores/alerts"
+import { getLogger } from "../../lib/logger"
+import { useI18n } from "../../lib/i18n"
+
+const log = getLogger("actions")
+
+export const RemoteAccessSettingsSection: Component = () => {
+  const { t } = useI18n()
+  const [meta, setMeta] = createSignal<ServerMeta | null>(null)
+  const [authStatus, setAuthStatus] = createSignal<{
+    authenticated: boolean
+    username?: string
+    passwordUserProvided?: boolean
+  } | null>(null)
+  const [loading, setLoading] = createSignal(false)
+  const [applyingListeningMode, setApplyingListeningMode] = createSignal(false)
+  const [qrCodes, setQrCodes] = createSignal<Record<string, string>>({})
+  const [expandedUrl, setExpandedUrl] = createSignal<string | null>(null)
+  const [error, setError] = createSignal<string | null>(null)
+  const [passwordFormOpen, setPasswordFormOpen] = createSignal(false)
+  const [passwordValue, setPasswordValue] = createSignal("")
+  const [passwordConfirm, setPasswordConfirm] = createSignal("")
+  const [passwordError, setPasswordError] = createSignal<string | null>(null)
+  const [savingPassword, setSavingPassword] = createSignal(false)
+
+  const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
+  const currentMode = createMemo(() => meta()?.listeningMode ?? serverSettings().listeningMode)
+  const allowExternalConnections = createMemo(() => currentMode() === "all")
+  const displayAddresses = createMemo(() => {
+    const list = addresses()
+    if (!allowExternalConnections()) return []
+    return list.filter((address) => address.scope !== "loopback")
+  })
+
+  const refreshMeta = async () => {
+    setLoading(true)
+    setError(null)
+    setPasswordError(null)
+    try {
+      const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
+      setMeta(metaResult)
+      setAuthStatus(authResult)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  onMount(() => {
+    void refreshMeta()
+  })
+
+  const toggleExpanded = async (url: string) => {
+    if (expandedUrl() === url) {
+      setExpandedUrl(null)
+      return
+    }
+    setExpandedUrl(url)
+    if (!qrCodes()[url]) {
+      try {
+        const dataUrl = await toDataURL(url, { margin: 1, scale: 4 })
+        setQrCodes((prev) => ({ ...prev, [url]: dataUrl }))
+      } catch (err) {
+        log.error("Failed to generate QR code", err)
+      }
+    }
+  }
+
+  const handleAllowConnectionsChange = async (checked: boolean) => {
+    const targetMode: "local" | "all" = checked ? "all" : "local"
+    if (targetMode === currentMode() || applyingListeningMode()) return
+
+    const confirmed = await showConfirmDialog(t("remoteAccess.listeningMode.restartConfirm.message"), {
+      title: checked
+        ? t("remoteAccess.listeningMode.restartConfirm.title.all")
+        : t("remoteAccess.listeningMode.restartConfirm.title.local"),
+      variant: "warning",
+      confirmLabel: t("remoteAccess.listeningMode.restartConfirm.confirmLabel"),
+      cancelLabel: t("remoteAccess.listeningMode.restartConfirm.cancelLabel"),
+    })
+
+    if (!confirmed) return
+
+    setApplyingListeningMode(true)
+    setError(null)
+    try {
+      await setListeningMode(targetMode)
+      const restarted = await restartCli()
+      if (!restarted) {
+        setError(t("remoteAccess.restart.errorManual"))
+      } else {
+        setMeta((prev) => (prev ? { ...prev, listeningMode: targetMode } : prev))
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setApplyingListeningMode(false)
+    }
+
+    void refreshMeta()
+  }
+
+  const handleOpenUrl = (url: string) => {
+    try {
+      window.open(url, "_blank", "noopener,noreferrer")
+    } catch (err) {
+      log.error("Failed to open URL", err)
+    }
+  }
+
+  const handleSubmitPassword = async () => {
+    setPasswordError(null)
+
+    const next = passwordValue()
+    const confirm = passwordConfirm()
+    if (next.trim().length < 8) {
+      setPasswordError(t("remoteAccess.password.error.tooShort"))
+      return
+    }
+    if (next !== confirm) {
+      setPasswordError(t("remoteAccess.password.error.mismatch"))
+      return
+    }
+
+    setSavingPassword(true)
+    try {
+      const result = await serverApi.setServerPassword(next)
+      setAuthStatus({
+        authenticated: true,
+        username: result.username,
+        passwordUserProvided: result.passwordUserProvided,
+      })
+      setPasswordValue("")
+      setPasswordConfirm("")
+      setPasswordFormOpen(false)
+    } catch (err) {
+      setPasswordError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setSavingPassword(false)
+    }
+  }
+
+  return (
+    <div class="settings-section-stack">
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Shield class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("remoteAccess.sections.listeningMode.label")}</h3>
+              <p class="settings-card-subtitle">{t("remoteAccess.sections.listeningMode.help")}</p>
+            </div>
+          </div>
+          <div class="settings-toolbar-inline">
+            <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+            <button
+              class="selector-button selector-button-secondary w-auto"
+              type="button"
+              onClick={() => void refreshMeta()}
+              disabled={loading()}
+            >
+              <RefreshCw class={`w-4 h-4 ${loading() ? "remote-spin" : ""}`} />
+              <span>{t("remoteAccess.refresh")}</span>
+            </button>
+          </div>
+        </div>
+
+        <Switch
+          class="remote-toggle"
+          checked={allowExternalConnections()}
+          onChange={(nextChecked) => void handleAllowConnectionsChange(nextChecked)}
+          disabled={loading() || applyingListeningMode()}
+        >
+          <Switch.Input />
+          <Switch.Control class="remote-toggle-switch" data-checked={allowExternalConnections()}>
+            <span class="remote-toggle-state">
+              {allowExternalConnections() ? t("remoteAccess.toggle.on") : t("remoteAccess.toggle.off")}
+            </span>
+            <Switch.Thumb class="remote-toggle-thumb" />
+          </Switch.Control>
+          <div class="remote-toggle-copy">
+            <span class="remote-toggle-title">{t("remoteAccess.toggle.title")}</span>
+            <span class="remote-toggle-caption">
+              {allowExternalConnections()
+                ? t("remoteAccess.toggle.caption.all")
+                : t("remoteAccess.toggle.caption.local")}
+            </span>
+          </div>
+        </Switch>
+
+        <p class="remote-toggle-note">{t("remoteAccess.toggle.note")}</p>
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Shield class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("remoteAccess.sections.serverPassword.label")}</h3>
+              <p class="settings-card-subtitle">{t("remoteAccess.sections.serverPassword.help")}</p>
+            </div>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+
+        <Show
+          when={authStatus() && authStatus()!.authenticated}
+          fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
+        >
+          <div class="settings-card-content">
+                <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
+                <p class="settings-help-text">
+                  {authStatus()!.passwordUserProvided
+                    ? t("remoteAccess.password.status.set")
+                    : t("remoteAccess.password.status.unset")}
+                </p>
+
+                <div class="settings-password-actions">
+                  <button
+                    class="settings-pill-button"
+                    type="button"
+                    onClick={() => {
+                      setPasswordFormOpen(!passwordFormOpen())
+                      setPasswordError(null)
+                    }}
+                  >
+                    {passwordFormOpen()
+                      ? t("remoteAccess.password.actions.cancel")
+                      : authStatus()!.passwordUserProvided
+                        ? t("remoteAccess.password.actions.change")
+                        : t("remoteAccess.password.actions.set")}
+                  </button>
+                </div>
+
+                <Show when={passwordFormOpen()}>
+                  <div class="settings-form-group">
+                    <label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label>
+                    <input
+                      class="selector-input w-full"
+                      type="password"
+                      value={passwordValue()}
+                      onInput={(event) => setPasswordValue(event.currentTarget.value)}
+                      placeholder={t("remoteAccess.password.form.placeholder")}
+                    />
+                  </div>
+                  <div class="settings-form-group">
+                    <label class="settings-form-label">{t("remoteAccess.password.form.confirmPassword")}</label>
+                    <input
+                      class="selector-input w-full"
+                      type="password"
+                      value={passwordConfirm()}
+                      onInput={(event) => setPasswordConfirm(event.currentTarget.value)}
+                    />
+                  </div>
+
+                  <Show when={passwordError()}>
+                    {(message) => <div class="settings-error-message">{message()}</div>}
+                  </Show>
+
+                  <div class="settings-password-actions">
+                    <button class="settings-pill-button" type="button" disabled={savingPassword()} onClick={() => void handleSubmitPassword()}>
+                      {savingPassword() ? t("remoteAccess.password.save.saving") : t("remoteAccess.password.save.label")}
+                    </button>
+                  </div>
+                </Show>
+          </div>
+        </Show>
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Wifi class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("remoteAccess.sections.addresses.label")}</h3>
+              <p class="settings-card-subtitle">{t("remoteAccess.sections.addresses.help")}</p>
+            </div>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+
+        <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
+          <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
+            <Show
+              when={displayAddresses().length > 0 || meta()?.localUrl}
+              fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}
+            >
+              <div class="remote-address-list">
+                <Show when={meta()?.localUrl}>
+                  {(url) => {
+                    const value = () => url()
+                    const expandedState = () => expandedUrl() === value()
+                    const qr = () => qrCodes()[value()]
+                    return (
+                      <div class="remote-address">
+                        <div class="remote-address-main">
+                          <div>
+                            <p class="remote-address-url">{value()}</p>
+                            <p class="remote-address-meta">{t("remoteAccess.address.scope.loopback")}</p>
+                          </div>
+                          <div class="remote-actions">
+                            <button class="remote-pill" type="button" onClick={() => handleOpenUrl(value())}>
+                              <ExternalLink class="remote-icon" />
+                              {t("remoteAccess.address.open")}
+                            </button>
+                            <button
+                              class="remote-pill"
+                              type="button"
+                              onClick={() => void toggleExpanded(value())}
+                              aria-expanded={expandedState()}
+                            >
+                              <Link2 class="remote-icon" />
+                              {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                            </button>
+                          </div>
+                        </div>
+                        <Show when={expandedState()}>
+                          <div class="remote-qr">
+                            <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                              {(dataUrl) => (
+                                <img
+                                  src={dataUrl()}
+                                  alt={t("remoteAccess.address.qrAlt", { url: value() })}
+                                  class="remote-qr-img"
+                                />
+                              )}
+                            </Show>
+                          </div>
+                        </Show>
+                      </div>
+                    )
+                  }}
+                </Show>
+
+                <For each={displayAddresses()}>
+                  {(address) => {
+                    const url = address.remoteUrl
+                    const expandedState = () => expandedUrl() === url
+                    const qr = () => qrCodes()[url]
+                    const scopeLabel = () =>
+                      address.scope === "external"
+                        ? t("remoteAccess.address.scope.network")
+                        : address.scope === "loopback"
+                          ? t("remoteAccess.address.scope.loopback")
+                          : t("remoteAccess.address.scope.internal")
+
+                    return (
+                      <div class="remote-address">
+                        <div class="remote-address-main">
+                          <div>
+                            <p class="remote-address-url">{url}</p>
+                            <p class="remote-address-meta">
+                              {address.family.toUpperCase()} - {scopeLabel()} - {address.ip}
+                            </p>
+                          </div>
+                          <div class="remote-actions">
+                            <button class="remote-pill" type="button" onClick={() => handleOpenUrl(url)}>
+                              <ExternalLink class="remote-icon" />
+                              {t("remoteAccess.address.open")}
+                            </button>
+                            <button
+                              class="remote-pill"
+                              type="button"
+                              onClick={() => void toggleExpanded(url)}
+                              aria-expanded={expandedState()}
+                            >
+                              <Link2 class="remote-icon" />
+                              {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                            </button>
+                          </div>
+                        </div>
+                        <Show when={expandedState()}>
+                          <div class="remote-qr">
+                            <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                              {(dataUrl) => (
+                                <img src={dataUrl()} alt={t("remoteAccess.address.qrAlt", { url })} class="remote-qr-img" />
+                              )}
+                            </Show>
+                          </div>
+                        </Show>
+                      </div>
+                    )
+                  }}
+                </For>
+              </div>
+            </Show>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/tool-call/diagnostics.ts

@@ -1,4 +1,4 @@
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import { getRelativePath, isToolStateCompleted, isToolStateError, isToolStateRunning } from "./utils"
 import { tGlobal } from "../../lib/i18n"
 

packages/ui/src/components/tool-call/markdown-render.tsx

@@ -1,5 +1,5 @@
 import type { Accessor, JSXElement } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { TextPart } from "../../types/message"
 import { Markdown } from "../markdown"
 import type { MarkdownRenderOptions, ToolScrollHelpers } from "./types"

packages/ui/src/components/tool-call/question-block.tsx

@@ -1,5 +1,5 @@
 import { createMemo, Show, For, createEffect, type Accessor } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useI18n } from "../../lib/i18n"
 

packages/ui/src/components/tool-call/renderers/task.tsx

@@ -1,5 +1,5 @@
 import { For, Show, createEffect, createMemo, createSignal, untrack } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
 import { resolveTitleForTool } from "../tool-title"
@@ -178,28 +178,116 @@ export const taskRenderer: ToolRenderer = {
       void loadMessages(instanceId, id)
     })
 
-    const childToolKeys = createMemo(() => {
-      const id = childSessionId()
-      if (!id) return [] as string[]
-      if (!childSessionLoaded()) return [] as string[]
+    const [childToolKeys, setChildToolKeys] = createSignal<string[]>([])
 
-      // React to session changes, but do the scan untracked to avoid
-      // subscribing to every message/part node in the store.
+    let indexedSessionId = ""
+    let indexedMessageCount = 0
+    let indexedMessageTail = ""
+    const indexedPartCounts = new Map<string, number>()
+
+    function resetChildToolIndex(nextSessionId: string) {
+      indexedSessionId = nextSessionId
+      indexedMessageCount = 0
+      indexedMessageTail = ""
+      indexedPartCounts.clear()
+      setChildToolKeys([])
+    }
+
+    function scanMessageToolParts(messageId: string, startIndex: number) {
+      const record = store.getMessage(messageId)
+      if (!record) return [] as string[]
+
+      const partIds = record.partIds
+      const keys: string[] = []
+      for (let idx = startIndex; idx < partIds.length; idx += 1) {
+        const partId = partIds[idx]
+        const entry = record.parts?.[partId]
+        const data = entry?.data
+        if (!data || (data as any).type !== "tool") continue
+        keys.push(`${messageId}::${partId}`)
+      }
+      indexedPartCounts.set(messageId, partIds.length)
+      return keys
+    }
+
+    function fullRescanChildTools(sessionId: string, messageIds: string[]) {
+      indexedSessionId = sessionId
+      indexedMessageCount = messageIds.length
+      indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+      indexedPartCounts.clear()
+
+      const nextKeys: string[] = []
+      for (const messageId of messageIds) {
+        nextKeys.push(...scanMessageToolParts(messageId, 0))
+      }
+      setChildToolKeys(nextKeys)
+    }
+
+    createEffect(() => {
+      const id = childSessionId()
+      const loaded = childSessionLoaded()
+
+      if (!id || !loaded) {
+        if (indexedSessionId) {
+          resetChildToolIndex("")
+        }
+        return
+      }
+
+      // We use the session revision as the reactive change point, but avoid
+      // rescanning the entire session on every update.
       store.getSessionRevision(id)
-      return untrack(() => {
+
+      untrack(() => {
         const messageIds = store.getSessionMessageIds(id)
-        const keys: string[] = []
-        for (const messageId of messageIds) {
-          const record = store.getMessage(messageId)
-          if (!record) continue
-          for (const partId of record.partIds) {
-            const entry = record.parts?.[partId]
-            const data = entry?.data
-            if (!data || (data as any).type !== "tool") continue
-            keys.push(`${messageId}::${partId}`)
+
+        if (!indexedSessionId || indexedSessionId !== id) {
+          fullRescanChildTools(id, messageIds)
+          return
+        }
+
+        // Detect structural changes (reorder/shrink) and fall back to a full rescan.
+        if (messageIds.length < indexedMessageCount) {
+          fullRescanChildTools(id, messageIds)
+          return
+        }
+        if (indexedMessageCount > 0) {
+          const expectedTailIndex = indexedMessageCount - 1
+          if (expectedTailIndex >= 0 && messageIds[expectedTailIndex] !== indexedMessageTail) {
+            fullRescanChildTools(id, messageIds)
+            return
           }
         }
-        return keys
+
+        const appendedKeys: string[] = []
+
+        // Scan any new messages appended since last index.
+        for (let idx = indexedMessageCount; idx < messageIds.length; idx += 1) {
+          const messageId = messageIds[idx]
+          appendedKeys.push(...scanMessageToolParts(messageId, 0))
+        }
+
+        // Scan a small window of recent messages for newly appended parts.
+        // Deltas typically affect the most recent tool call, so this avoids
+        // iterating every message on every revision.
+        const existingCount = Math.min(indexedMessageCount, messageIds.length)
+        const windowStart = Math.max(0, existingCount - 3)
+        for (let idx = windowStart; idx < existingCount; idx += 1) {
+          const messageId = messageIds[idx]
+          const previousPartCount = indexedPartCounts.get(messageId) ?? 0
+          const record = store.getMessage(messageId)
+          const nextPartCount = record?.partIds.length ?? 0
+          if (nextPartCount > previousPartCount) {
+            appendedKeys.push(...scanMessageToolParts(messageId, previousPartCount))
+          }
+        }
+
+        indexedMessageCount = messageIds.length
+        indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+
+        if (appendedKeys.length > 0) {
+          setChildToolKeys((prev) => [...prev, ...appendedKeys])
+        }
       })
     })
     const promptContent = createMemo(() => {
@@ -287,7 +375,9 @@ export const taskRenderer: ToolRenderer = {
                 content: promptContent()!,
                 cacheKey: "task:prompt",
                 disableScrollTracking: true,
-                disableHighlight: true,
+                // Always use the normal markdown render path for prompt (even while running)
+                // so the prompt doesn't visually change between running/completed states.
+                disableHighlight: false,
               })}
             </div>
           </section>
@@ -352,7 +442,7 @@ export const taskRenderer: ToolRenderer = {
                     scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined
                   }
                 >
-                  <div class="tool-call-task-summary">
+                    <div class="tool-call-task-summary">
                     <For each={childToolKeys()}>
                       {(key) => (
                         <Show when={renderToolCall}>

packages/ui/src/components/tool-call/renderers/todo.tsx

@@ -1,5 +1,5 @@
 import { For, Show } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRenderer } from "../types"
 import { readToolStatePayload } from "../utils"
 import { useI18n, tGlobal } from "../../../lib/i18n"

packages/ui/src/components/tool-call/tool-title.ts

@@ -1,4 +1,4 @@
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRendererContext, ToolRenderer, ToolCallPart } from "./types"
 import { getDefaultToolAction, getToolName, isToolStateCompleted, isToolStateRunning } from "./utils"
 import { enMessages } from "../../lib/i18n/messages/en"

packages/ui/src/components/tool-call/types.ts

@@ -1,5 +1,5 @@
 import type { Accessor, JSXElement } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ClientPart } from "../../types/message"
 
 export type ToolCallPart = Extract<ClientPart, { type: "tool" }>

packages/ui/src/components/tool-call/utils.ts

@@ -1,15 +1,15 @@
 import { isRenderableDiffText } from "../../lib/diff-utils"
 import { getLanguageFromPath } from "../../lib/markdown"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { DiffPayload } from "./types"
 import { getLogger } from "../../lib/logger"
 import { tGlobal } from "../../lib/i18n"
 const log = getLogger("session")
 
 
-export type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
-export type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
-export type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+export type ToolStateRunning = import("@opencode-ai/sdk/v2").ToolStateRunning
+export type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
+export type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
 
 export const diffCapableTools = new Set(["edit", "patch"])
 

packages/ui/src/components/virtual-follow-list.tsx

@@ -0,0 +1,972 @@
+import { Index, Show, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX } from "solid-js"
+import VirtualItem, { type VirtualItemHeightChangeMeta } from "./virtual-item"
+
+const DEFAULT_SCROLL_SENTINEL_MARGIN_PX = 48
+const USER_SCROLL_INTENT_WINDOW_MS = 600
+const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+
+export interface VirtualFollowListApi {
+  scrollToTop: (opts?: { immediate?: boolean }) => void
+  scrollToBottom: (opts?: { immediate?: boolean; suppressAutoAnchor?: boolean }) => void
+  scrollToKey: (
+    key: string,
+    opts?: { behavior?: ScrollBehavior; block?: ScrollLogicalPosition; setAutoScroll?: boolean },
+  ) => void
+  notifyContentRendered: () => void
+  setAutoScroll: (enabled: boolean) => void
+  getAutoScroll: () => boolean
+  getScrollElement: () => HTMLDivElement | undefined
+  getShellElement: () => HTMLDivElement | undefined
+}
+
+export interface VirtualFollowListState {
+  autoScroll: Accessor<boolean>
+  showScrollTopButton: Accessor<boolean>
+  showScrollBottomButton: Accessor<boolean>
+  scrollButtonsCount: Accessor<number>
+  activeKey: Accessor<string | null>
+}
+
+export interface VirtualFollowListProps<T> {
+  items: Accessor<T[]>
+  getKey: (item: T, index: number) => string
+  renderItem: (item: T, index: number) => JSX.Element
+
+  /**
+   * Optional stable DOM id for the item wrapper.
+   * Defaults to the key itself.
+   */
+  getAnchorId?: (key: string) => string
+
+  /**
+   * Decode an item key from an observed wrapper element id.
+   * Defaults to identity.
+   */
+  getKeyFromAnchorId?: (anchorId: string) => string
+
+  overscanPx?: number
+  scrollSentinelMarginPx?: number
+  virtualizationEnabled?: Accessor<boolean>
+  suspendMeasurements?: Accessor<boolean>
+  loading?: Accessor<boolean>
+  isActive?: Accessor<boolean>
+
+  /**
+   * When switching back to an inactive (cached) pane, the list historically
+   * re-pinned to the bottom if autoScroll was enabled.
+   *
+   * Disable this to preserve the existing scroll position across pane switches.
+   */
+  scrollToBottomOnActivate?: Accessor<boolean>
+
+  /**
+   * Controls whether the list should scroll to bottom the first time items
+   * appear (default behavior for chat streams).
+   *
+   * Set to false when an outer component restores scroll from a cache.
+   */
+  initialScrollToBottom?: Accessor<boolean>
+
+  /**
+   * Initial value for the internal autoScroll signal.
+   * Useful when restoring scroll state (e.g. start in non-follow mode).
+   */
+  initialAutoScroll?: Accessor<boolean>
+
+  /**
+   * When this value changes, the list resets internal follow/anchor state.
+   * Useful when reusing the same list instance across different datasets.
+   */
+  resetKey?: Accessor<string | number>
+
+  /**
+   * If this value changes and autoScroll is enabled, the list will
+   * anchor-scroll to the bottom (unless suppressed).
+   */
+  followToken?: Accessor<string | number>
+
+  /**
+   * Optional hooks to render content inside the scroll container.
+   * Useful for empty/loading states that should scroll with the list.
+   */
+  renderBeforeItems?: Accessor<JSX.Element>
+
+  /**
+   * Render content inside the shell, above timeline/sidebar layers.
+   * (Quote popovers, etc.)
+   */
+  renderOverlay?: Accessor<JSX.Element>
+
+  /**
+   * Provide localized labels for built-in controls.
+   */
+  scrollToTopAriaLabel?: Accessor<string>
+  scrollToBottomAriaLabel?: Accessor<string>
+
+  /**
+   * Receive element refs for external logic (selection, geometry, etc.)
+   */
+  onScrollElementChange?: (element: HTMLDivElement | undefined) => void
+  onShellElementChange?: (element: HTMLDivElement | undefined) => void
+
+  /**
+   * Callbacks for consumers.
+   */
+  onScroll?: () => void
+  onMouseUp?: (event: MouseEvent) => void
+  onClick?: (event: MouseEvent) => void
+  onActiveKeyChange?: (key: string | null) => void
+  registerApi?: (api: VirtualFollowListApi) => void
+  registerState?: (state: VirtualFollowListState) => void
+  renderControls?: (state: VirtualFollowListState, api: VirtualFollowListApi) => JSX.Element
+}
+
+export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
+  const getAnchorId = (key: string) => (props.getAnchorId ? props.getAnchorId(key) : key)
+  const getKeyFromAnchorId = (anchorId: string) => (props.getKeyFromAnchorId ? props.getKeyFromAnchorId(anchorId) : anchorId)
+
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
+  const [shellElement, setShellElement] = createSignal<HTMLDivElement | undefined>()
+  const [topSentinel, setTopSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal<HTMLDivElement | null>(null)
+  const bottomSentinel = () => bottomSentinelSignal()
+
+  const isActive = () => (props.isActive ? props.isActive() : true)
+  const scrollToBottomOnActivate = () => (props.scrollToBottomOnActivate ? props.scrollToBottomOnActivate() : true)
+  const initialScrollToBottom = () => (props.initialScrollToBottom ? props.initialScrollToBottom() : true)
+  const initialAutoScroll = () => (props.initialAutoScroll ? props.initialAutoScroll() : true)
+  const isLoading = () => Boolean(props.loading?.())
+  const virtualizationEnabled = () => (props.virtualizationEnabled ? props.virtualizationEnabled() : true)
+  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+
+  const [autoScroll, setAutoScroll] = createSignal(Boolean(initialAutoScroll()))
+  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
+  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
+  const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
+  const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
+  const [activeKey, setActiveKey] = createSignal<string | null>(null)
+
+  const [anchorLock, setAnchorLock] = createSignal<{ key: string; block: ScrollLogicalPosition } | null>(null)
+
+  const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
+
+  let containerRef: HTMLDivElement | undefined
+  let shellRef: HTMLDivElement | undefined
+  let pendingScrollFrame: number | null = null
+  let pendingAnchorScroll: number | null = null
+  let pendingAnchorCorrectionFrame: number | null = null
+  let pendingScrollCompensationScheduled = false
+  let pendingScrollCompensations = new Map<string, number>()
+  let scrollCompensationGen = 0
+  let pendingActiveScroll = false
+  let suppressAutoScrollOnce = false
+  let pendingInitialScroll = true
+  let scrollToBottomFrame: number | null = null
+  let scrollToBottomDelayedFrame: number | null = null
+
+  let lastKnownScrollTop = 0
+  let lastUserScrollIntentDirection: "up" | "down" | null = null
+
+  let userScrollIntentUntil = 0
+  let detachScrollIntentListeners: (() => void) | undefined
+
+  let lastResetKey: string | number | undefined
+
+  const state: VirtualFollowListState = {
+    autoScroll,
+    showScrollTopButton,
+    showScrollBottomButton,
+    scrollButtonsCount,
+    activeKey,
+  }
+
+  function markUserScrollIntent(direction?: "up" | "down" | null) {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
+    if (direction) {
+      lastUserScrollIntentDirection = direction
+    }
+  }
+
+  function hasUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    return now <= userScrollIntentUntil
+  }
+
+  function attachScrollIntentListeners(element: HTMLDivElement | undefined) {
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+      detachScrollIntentListeners = undefined
+    }
+    if (!element) return
+    const handleWheelIntent = (event: WheelEvent) => {
+      const dir: "up" | "down" | null = event.deltaY < 0 ? "up" : event.deltaY > 0 ? "down" : null
+      markUserScrollIntent(dir)
+    }
+    const handlePointerIntent = () => markUserScrollIntent(null)
+    const handleKeyIntent = (event: KeyboardEvent) => {
+      if (!SCROLL_INTENT_KEYS.has(event.key)) return
+      const key = event.key
+      const dir: "up" | "down" | null =
+        key === "ArrowUp" || key === "PageUp" || key === "Home"
+          ? "up"
+          : key === "ArrowDown" || key === "PageDown" || key === "End"
+            ? "down"
+            : key === " " || key === "Spacebar"
+              ? event.shiftKey
+                ? "up"
+                : "down"
+              : null
+      markUserScrollIntent(dir)
+    }
+    element.addEventListener("wheel", handleWheelIntent, { passive: true })
+    element.addEventListener("pointerdown", handlePointerIntent)
+    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
+    element.addEventListener("keydown", handleKeyIntent)
+    detachScrollIntentListeners = () => {
+      element.removeEventListener("wheel", handleWheelIntent)
+      element.removeEventListener("pointerdown", handlePointerIntent)
+      element.removeEventListener("touchstart", handlePointerIntent)
+      element.removeEventListener("keydown", handleKeyIntent)
+    }
+  }
+
+  function updateScrollIndicatorsFromVisibility() {
+    const hasItems = props.items().length > 0
+    const bottomVisible = bottomSentinelVisible()
+    const topVisible = topSentinelVisible()
+    setShowScrollBottomButton(hasItems && !bottomVisible)
+    setShowScrollTopButton(hasItems && !topVisible)
+  }
+
+  function clearScrollToBottomFrames() {
+    if (scrollToBottomFrame !== null) {
+      cancelAnimationFrame(scrollToBottomFrame)
+      scrollToBottomFrame = null
+    }
+    if (scrollToBottomDelayedFrame !== null) {
+      cancelAnimationFrame(scrollToBottomDelayedFrame)
+      scrollToBottomDelayedFrame = null
+    }
+  }
+
+  function scrollToBottom(immediate = false, options?: { suppressAutoAnchor?: boolean }) {
+    if (!containerRef) return
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    const sentinel = bottomSentinel()
+    const behavior: ScrollBehavior = immediate ? "auto" : "smooth"
+    const suppressAutoAnchor = options?.suppressAutoAnchor ?? !immediate
+    if (suppressAutoAnchor) {
+      suppressAutoScrollOnce = true
+    }
+    sentinel?.scrollIntoView({ block: "end", inline: "nearest", behavior })
+    setAutoScroll(true)
+  }
+
+  function requestScrollToBottom(immediate = true) {
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    if (!containerRef || !bottomSentinel()) {
+      pendingActiveScroll = true
+      return
+    }
+    pendingActiveScroll = false
+    clearScrollToBottomFrames()
+    scrollToBottomFrame = requestAnimationFrame(() => {
+      scrollToBottomFrame = null
+      scrollToBottomDelayedFrame = requestAnimationFrame(() => {
+        scrollToBottomDelayedFrame = null
+        scrollToBottom(immediate)
+      })
+    })
+  }
+
+  function resolvePendingActiveScroll() {
+    if (!pendingActiveScroll) return
+    if (!isActive()) return
+    requestScrollToBottom(true)
+  }
+
+  function scrollToTop(immediate = false) {
+    if (!containerRef) return
+    const behavior: ScrollBehavior = immediate ? "auto" : "smooth"
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    setAutoScroll(false)
+    topSentinel()?.scrollIntoView({ block: "start", inline: "nearest", behavior })
+  }
+
+  function scheduleAnchorScroll(immediate = false) {
+    if (!autoScroll()) return
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    const sentinel = bottomSentinel()
+    if (!sentinel) {
+      pendingActiveScroll = true
+      return
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    pendingAnchorScroll = requestAnimationFrame(() => {
+      pendingAnchorScroll = null
+      sentinel.scrollIntoView({ block: "end", inline: "nearest", behavior: immediate ? "auto" : "smooth" })
+    })
+  }
+
+  function clearAnchorLock() {
+    setAnchorLock(null)
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+      pendingAnchorCorrectionFrame = null
+    }
+  }
+
+  function computeDesiredOffset(block: ScrollLogicalPosition, container: HTMLElement, anchorRect: DOMRect) {
+    if (block === "end") {
+      return Math.max(0, container.clientHeight - anchorRect.height)
+    }
+    if (block === "center") {
+      return Math.max(0, container.clientHeight / 2 - anchorRect.height / 2)
+    }
+    // Default to start.
+    return 0
+  }
+
+  function applyAnchorCorrection() {
+    const lock = anchorLock()
+    if (!lock) return
+    if (autoScroll()) return
+    if (!containerRef) return
+    if (typeof document === "undefined") return
+
+    const anchorId = getAnchorId(lock.key)
+    const anchor = document.getElementById(anchorId)
+    if (!anchor) return
+
+    const containerRect = containerRef.getBoundingClientRect()
+    const anchorRect = anchor.getBoundingClientRect()
+    const currentOffset = anchorRect.top - containerRect.top
+    const desiredOffset = computeDesiredOffset(lock.block, containerRef, anchorRect)
+    const delta = currentOffset - desiredOffset
+    if (!Number.isFinite(delta) || Math.abs(delta) < 0.5) {
+      return
+    }
+    const nextTop = containerRef.scrollTop + delta
+    const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+    containerRef.scrollTop = Math.min(maxScrollTop, Math.max(0, nextTop))
+  }
+
+  function scheduleAnchorCorrection() {
+    if (pendingAnchorCorrectionFrame !== null) return
+    pendingAnchorCorrectionFrame = requestAnimationFrame(() => {
+      pendingAnchorCorrectionFrame = null
+      applyAnchorCorrection()
+    })
+  }
+
+  function handleContentRendered() {
+    if (autoScroll() && !anchorLock()) {
+      scheduleAutoPinToBottom()
+      return
+    }
+    if (anchorLock() && !autoScroll()) {
+      scheduleAnchorCorrection()
+      return
+    }
+  }
+
+  function handleScroll() {
+    if (!containerRef) return
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    const isUserScroll = hasUserScrollIntent()
+    pendingScrollFrame = requestAnimationFrame(() => {
+      pendingScrollFrame = null
+      if (!containerRef) return
+      const previousScrollTop = lastKnownScrollTop
+      const currentScrollTop = containerRef.scrollTop
+      const deltaScrollTop = currentScrollTop - previousScrollTop
+      if (currentScrollTop !== lastKnownScrollTop) {
+        lastKnownScrollTop = currentScrollTop
+      }
+      const atBottom = bottomSentinelVisible()
+
+      const beforeAutoScroll = autoScroll()
+
+      const inferredDirection: "up" | "down" | null =
+        lastUserScrollIntentDirection ?? (deltaScrollTop < 0 ? "up" : deltaScrollTop > 0 ? "down" : null)
+
+      // If the user scrolls manually, exit key-anchored mode.
+      if (isUserScroll && anchorLock()) {
+        clearAnchorLock()
+      }
+
+      if (isUserScroll) {
+        // If the user is actively scrolling upward, exit follow-to-bottom mode
+        // immediately. The bottom sentinel can remain "visible" for a short
+        // distance due to its observer margin, which otherwise keeps autoScroll
+        // enabled and makes the list feel stuck.
+        if (inferredDirection === "up" && deltaScrollTop < -0.5 && autoScroll()) {
+          if (pendingAnchorScroll !== null) {
+            cancelAnimationFrame(pendingAnchorScroll)
+            pendingAnchorScroll = null
+          }
+          setAutoScroll(false)
+        }
+
+        // Do not re-enable follow mode while the user's current scroll intent
+        // is upward. This prevents transient anchor/pin scrolls from pulling
+        // the list back into autoScroll(true).
+        if (inferredDirection !== "up") {
+          if (atBottom) {
+            if (!autoScroll()) setAutoScroll(true)
+          } else if (autoScroll()) {
+            setAutoScroll(false)
+          }
+        } else if (!atBottom && autoScroll()) {
+          // If the user is scrolling up and we are no longer at the bottom,
+          // ensure follow mode is disabled.
+          setAutoScroll(false)
+        }
+      }
+
+      props.onScroll?.()
+    })
+  }
+
+  function setContainerRef(element: HTMLDivElement | null) {
+    containerRef = element || undefined
+    setScrollElement(containerRef)
+    props.onScrollElementChange?.(containerRef)
+    attachScrollIntentListeners(containerRef)
+    lastKnownScrollTop = containerRef?.scrollTop ?? 0
+    lastUserScrollIntentDirection = null
+    if (!containerRef) {
+      return
+    }
+    resolvePendingActiveScroll()
+  }
+
+  function scheduleScrollCompensation(key: string, delta: number) {
+    if (!containerRef) return
+    if (!delta || !Number.isFinite(delta)) return
+    if (typeof document === "undefined") return
+
+    // Only compensate while the user scrolls upward (testing default).
+    if (!hasUserScrollIntent() || lastUserScrollIntentDirection !== "up") return
+    if (autoScroll() || anchorLock()) return
+
+    const anchorId = getAnchorId(key)
+    const anchor = document.getElementById(anchorId)
+    if (!anchor) return
+    const containerRect = containerRef.getBoundingClientRect()
+    const rect = anchor.getBoundingClientRect()
+    // Determine whether the item was fully above the viewport *before* the
+    // height delta applied. Items can expand downward into the viewport; in that
+    // case we still need to compensate to keep existing visible content stable.
+    const bottomAfter = rect.bottom
+    const bottomBefore = bottomAfter - delta
+    const wasAboveViewport = bottomBefore < containerRect.top
+    if (!wasAboveViewport) return
+
+    const next = (pendingScrollCompensations.get(key) ?? 0) + delta
+    pendingScrollCompensations.set(key, next)
+
+    if (pendingScrollCompensationScheduled) return
+    pendingScrollCompensationScheduled = true
+    const gen = scrollCompensationGen
+
+    // Flush in a microtask so compensation lands before the next paint.
+    queueMicrotask(() => {
+      if (gen !== scrollCompensationGen) return
+      pendingScrollCompensationScheduled = false
+      if (!containerRef) return
+      if (!hasUserScrollIntent() || lastUserScrollIntentDirection !== "up") {
+        pendingScrollCompensations = new Map()
+        return
+      }
+      if (autoScroll() || anchorLock()) {
+        pendingScrollCompensations = new Map()
+        return
+      }
+
+      let applied = 0
+      let count = 0
+      for (const pendingDelta of pendingScrollCompensations.values()) {
+        if (!pendingDelta) continue
+        applied += pendingDelta
+        count += 1
+      }
+      pendingScrollCompensations = new Map()
+      if (!applied) return
+
+      const before = containerRef.scrollTop
+      const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+      const nextTop = Math.min(maxScrollTop, Math.max(0, before + applied))
+      if (nextTop !== before) {
+        containerRef.scrollTop = nextTop
+        lastKnownScrollTop = nextTop
+      }
+    })
+  }
+
+  let pendingAutoPin = false
+  let pendingAutoPinFrame: number | null = null
+
+  function clearPendingAutoPinFrame() {
+    if (pendingAutoPinFrame !== null) {
+      cancelAnimationFrame(pendingAutoPinFrame)
+      pendingAutoPinFrame = null
+    }
+  }
+
+  function applyAutoPinToBottom() {
+    if (!containerRef) return false
+    if (!autoScroll()) return false
+    if (anchorLock()) return false
+
+    const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+    if (containerRef.scrollTop !== maxScrollTop) {
+      containerRef.scrollTop = maxScrollTop
+      lastKnownScrollTop = maxScrollTop
+    }
+    return true
+  }
+
+  function scheduleAutoPinToBottom() {
+    if (!containerRef) return
+    if (pendingAutoPin) return
+    pendingAutoPin = true
+    clearPendingAutoPinFrame()
+    const gen = scrollCompensationGen
+
+    // Flush in a microtask so adjustments land before the next paint,
+    // then re-apply on the next two frames to catch deferred layout.
+    queueMicrotask(() => {
+      if (gen !== scrollCompensationGen) return
+      pendingAutoPin = false
+      if (!applyAutoPinToBottom()) return
+      pendingAutoPinFrame = requestAnimationFrame(() => {
+        pendingAutoPinFrame = null
+        if (gen !== scrollCompensationGen) return
+        if (!applyAutoPinToBottom()) return
+        pendingAutoPinFrame = requestAnimationFrame(() => {
+          pendingAutoPinFrame = null
+          if (gen !== scrollCompensationGen) return
+          applyAutoPinToBottom()
+        })
+      })
+    })
+  }
+
+  function setShellRef(element: HTMLDivElement | null) {
+    shellRef = element || undefined
+    setShellElement(shellRef)
+    props.onShellElementChange?.(shellRef)
+  }
+
+  function setBottomSentinel(element: HTMLDivElement | null) {
+    setBottomSentinelSignal(element)
+    resolvePendingActiveScroll()
+  }
+
+  const api: VirtualFollowListApi = {
+    scrollToTop: (opts) => scrollToTop(Boolean(opts?.immediate)),
+    scrollToBottom: (opts) => scrollToBottom(Boolean(opts?.immediate), { suppressAutoAnchor: opts?.suppressAutoAnchor }),
+    scrollToKey: (key, opts) => {
+      if (typeof document === "undefined") return
+      const anchorId = getAnchorId(key)
+      const behavior = opts?.behavior ?? "smooth"
+      const block = opts?.block ?? "start"
+      const nextAutoScroll = opts?.setAutoScroll ?? false
+      setAutoScroll(nextAutoScroll)
+      if (!nextAutoScroll) {
+        if (anchorLock()) {
+          clearAnchorLock()
+        }
+        setAnchorLock({ key, block })
+      } else {
+        if (anchorLock()) {
+          clearAnchorLock()
+        }
+      }
+      const first = document.getElementById(anchorId)
+      first?.scrollIntoView({ block, behavior })
+      // When using virtualization, the placeholder height can be stale until the
+      // item mounts/measures. Re-run scrollIntoView() on the next frame to
+      // stabilize the final position.
+      requestAnimationFrame(() => {
+        const second = document.getElementById(anchorId)
+        second?.scrollIntoView({ block, behavior })
+      })
+    },
+    notifyContentRendered: () => handleContentRendered(),
+    setAutoScroll: (enabled) => setAutoScroll(Boolean(enabled)),
+    getAutoScroll: () => autoScroll(),
+    getScrollElement: () => scrollElement(),
+    getShellElement: () => shellElement(),
+  }
+
+  createEffect(() => {
+    props.registerApi?.(api)
+  })
+
+  createEffect(() => {
+    props.registerState?.(state)
+  })
+
+  createEffect(() => {
+    const nextKey = props.resetKey?.()
+    if (nextKey === undefined) return
+    if (lastResetKey === undefined) {
+      lastResetKey = nextKey
+      return
+    }
+    if (nextKey === lastResetKey) return
+    lastResetKey = nextKey
+
+    // Reset internal state when consumers swap datasets (e.g. session switch).
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+      pendingScrollFrame = null
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+      pendingAnchorCorrectionFrame = null
+    }
+    clearScrollToBottomFrames()
+
+    scrollCompensationGen += 1
+    pendingScrollCompensationScheduled = false
+    pendingScrollCompensations = new Map()
+    pendingAutoPin = false
+    clearPendingAutoPinFrame()
+
+    suppressAutoScrollOnce = false
+    pendingActiveScroll = false
+    pendingInitialScroll = true
+
+    setAnchorLock(null)
+    setActiveKey(null)
+    setShowScrollTopButton(false)
+    setShowScrollBottomButton(false)
+    setTopSentinelVisible(true)
+    setBottomSentinelVisible(true)
+    setAutoScroll(Boolean(initialAutoScroll()))
+
+    lastKnownScrollTop = containerRef?.scrollTop ?? 0
+    lastUserScrollIntentDirection = null
+  })
+
+  let lastActiveState = false
+  createEffect(() => {
+    const active = isActive()
+    if (active) {
+      resolvePendingActiveScroll()
+      if (!lastActiveState && autoScroll() && scrollToBottomOnActivate()) {
+        requestScrollToBottom(true)
+
+        // When switching back to a cached session pane, items can mount/measure
+        // after the initial scroll jump. Re-pin once layout settles so the
+        // viewport stays at the bottom.
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scheduleAutoPinToBottom()
+          })
+        })
+      }
+    } else if (autoScroll() && scrollToBottomOnActivate()) {
+      pendingActiveScroll = true
+    }
+    lastActiveState = active
+  })
+
+  createEffect(() => {
+    const loading = isLoading()
+    if (loading) {
+      // Keep the initial scroll pending while loading so we can
+      // anchor to the bottom as soon as items appear.
+      pendingInitialScroll = true
+    }
+
+    if (!pendingInitialScroll) return
+
+    const container = scrollElement()
+    const sentinel = bottomSentinel()
+    if (!container || !sentinel || props.items().length === 0) return
+
+    if (!initialScrollToBottom()) {
+      // An outer component is responsible for restoring scroll.
+      pendingInitialScroll = false
+      return
+    }
+
+    // Ensure we're in follow-to-bottom mode for the initial position.
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    setAutoScroll(true)
+
+    pendingInitialScroll = false
+    // Scroll synchronously so the first paint prefers bottom content.
+    scrollToBottom(true)
+  })
+
+  let previousFollowToken: string | number | undefined
+  createEffect(() => {
+    const token = props.followToken?.()
+    if (token === undefined) {
+      previousFollowToken = token
+      return
+    }
+    if (previousFollowToken === undefined) {
+      previousFollowToken = token
+      return
+    }
+    if (token === previousFollowToken) {
+      return
+    }
+    previousFollowToken = token
+    if (suppressAutoScrollOnce) {
+      suppressAutoScrollOnce = false
+      return
+    }
+    if (autoScroll()) {
+      scheduleAutoPinToBottom()
+      return
+    }
+    if (anchorLock() && !autoScroll()) {
+      scheduleAnchorCorrection()
+    }
+  })
+
+  // Drop anchor lock if the anchored key is removed.
+  createEffect(() => {
+    const lock = anchorLock()
+    if (!lock) return
+    const keys = props.items().map((item, idx) => props.getKey(item, idx))
+    if (!keys.includes(lock.key)) {
+      clearAnchorLock()
+    }
+  })
+
+  createEffect(() => {
+    if (props.items().length === 0) {
+      setShowScrollTopButton(false)
+      setShowScrollBottomButton(false)
+      setAutoScroll(true)
+      return
+    }
+    updateScrollIndicatorsFromVisibility()
+  })
+
+  createEffect(() => {
+    const container = scrollElement()
+    const topTarget = topSentinel()
+    const bottomTarget = bottomSentinel()
+    if (!container || !topTarget || !bottomTarget) return
+    if (typeof IntersectionObserver === "undefined") return
+
+    const margin = props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibilityChanged = false
+        for (const entry of entries) {
+          if (entry.target === topTarget) {
+            setTopSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          } else if (entry.target === bottomTarget) {
+            setBottomSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          }
+        }
+        if (visibilityChanged) {
+          updateScrollIndicatorsFromVisibility()
+        }
+      },
+      { root: container, threshold: 0, rootMargin: `${margin}px 0px ${margin}px 0px` },
+    )
+    observer.observe(topTarget)
+    observer.observe(bottomTarget)
+    onCleanup(() => observer.disconnect())
+  })
+
+  createEffect(() => {
+    const container = scrollElement()
+    const items = props.items()
+    if (!container || items.length === 0) return
+    if (typeof document === "undefined") return
+    if (typeof IntersectionObserver === "undefined") return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let best: IntersectionObserverEntry | null = null
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
+            best = entry
+          }
+        }
+        if (best) {
+          const anchorId = (best.target as HTMLElement).id
+          const key = getKeyFromAnchorId(anchorId)
+          setActiveKey((current) => (current === key ? current : key))
+        }
+      },
+      { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 },
+    )
+
+    const anchorIds = items.map((item, idx) => getAnchorId(props.getKey(item, idx)))
+    anchorIds.forEach((anchorId) => {
+      const anchor = document.getElementById(anchorId)
+      if (anchor) observer.observe(anchor)
+    })
+
+    onCleanup(() => observer.disconnect())
+  })
+
+  createEffect(() => {
+    const key = activeKey()
+    props.onActiveKeyChange?.(key)
+  })
+
+  onCleanup(() => {
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+    }
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+    }
+    scrollCompensationGen += 1
+    pendingScrollCompensationScheduled = false
+    pendingScrollCompensations = new Map()
+    clearPendingAutoPinFrame()
+    clearScrollToBottomFrames()
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+    }
+  })
+
+  const controls = () => {
+    if (props.renderControls) {
+      return props.renderControls(state, api)
+    }
+
+    // Avoid hardcoded user-visible strings; require consumers to supply
+    // localized aria labels when using the default controls.
+    if (!props.scrollToTopAriaLabel || !props.scrollToBottomAriaLabel) {
+      return null
+    }
+
+    const labelTop = props.scrollToTopAriaLabel()
+    const labelBottom = props.scrollToBottomAriaLabel()
+    return (
+      <Show when={showScrollTopButton() || showScrollBottomButton()}>
+        <div class="message-scroll-button-wrapper">
+          <Show when={showScrollTopButton()}>
+            <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label={labelTop}>
+              <span class="message-scroll-icon" aria-hidden="true">
+                ↑
+              </span>
+            </button>
+          </Show>
+          <Show when={showScrollBottomButton()}>
+            <button
+              type="button"
+              class="message-scroll-button"
+              onClick={() => scrollToBottom(false, { suppressAutoAnchor: false })}
+              aria-label={labelBottom}
+            >
+              <span class="message-scroll-icon" aria-hidden="true">
+                ↓
+              </span>
+            </button>
+          </Show>
+        </div>
+      </Show>
+    )
+  }
+
+  return (
+    <div class="message-stream-shell" ref={setShellRef}>
+      <div
+        class="message-stream"
+        ref={setContainerRef}
+        onScroll={handleScroll}
+        onMouseUp={(event) => props.onMouseUp?.(event)}
+        onClick={(event) => props.onClick?.(event)}
+      >
+        <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
+        {props.renderBeforeItems?.()}
+        <Index each={props.items()}>
+          {(item, index) => {
+            const key = () => props.getKey(item(), index)
+            const anchorId = () => getAnchorId(key())
+            const overscanPx = props.overscanPx ?? 800
+            const suspendMeasurements = () => measurementsSuspended() || !isActive()
+            const itemVirtualizationEnabled = () => virtualizationEnabled() && !autoScroll()
+            return (
+              <VirtualItem
+                id={anchorId()}
+                cacheKey={key()}
+                scrollContainer={scrollElement}
+                threshold={overscanPx}
+                placeholderClass="message-stream-placeholder"
+                virtualizationEnabled={itemVirtualizationEnabled}
+                suspendMeasurements={suspendMeasurements}
+                onHeightChange={(nextHeight, previousHeight, meta: VirtualItemHeightChangeMeta) => {
+                  const delta = nextHeight - previousHeight
+
+                  // Follow mode: keep the viewport pinned to the bottom as
+                  // items mount/measure and change height.
+                  if (delta && autoScroll() && !anchorLock()) {
+                    scheduleAutoPinToBottom()
+                    return
+                  }
+
+                  // Key-anchored mode: keep the target key in view when
+                  // items above it mount/measure and shift layout.
+                  if (anchorLock() && !autoScroll()) {
+                    scheduleAnchorCorrection()
+                    return
+                  }
+
+                  // Free-scroll mode: if items above the viewport change height
+                  // while scrolling upward, compensate scrollTop so visible
+                  // content stays stable.
+                  if (delta) {
+                    if (meta.isStaleCacheCorrection) return
+                    scheduleScrollCompensation(key(), delta)
+                  }
+                }}
+              >{() => props.renderItem(item(), index)}</VirtualItem>
+            )
+          }}
+        </Index>
+        <div ref={setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
+      </div>
+
+      {controls()}
+
+      {props.renderOverlay?.()}
+    </div>
+  )
+}

packages/ui/src/components/virtual-item.tsx

@@ -1,9 +1,9 @@
-import { JSX, Accessor, children as resolveChildren, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { JSX, Accessor, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 
 const sizeCache = new Map<string, number>()
 const DEFAULT_MARGIN_PX = 600
-const MIN_PLACEHOLDER_HEIGHT = 32
-const VISIBILITY_BUFFER_PX = 48
+const MIN_PLACEHOLDER_HEIGHT = 400
+const VISIBILITY_BUFFER_PX = 0
 
 type ObserverRoot = Element | Document | null
 
@@ -54,11 +54,64 @@ function shouldRenderEntry(entry: IntersectionObserverEntry) {
   if (!rootBounds) {
     return entry.isIntersecting
   }
-  const distanceAbove = rootBounds.top - entry.boundingClientRect.bottom
-  const distanceBelow = entry.boundingClientRect.top - rootBounds.bottom
-  if (distanceAbove > VISIBILITY_BUFFER_PX || distanceBelow > VISIBILITY_BUFFER_PX) {
+
+  // Above the root: compare bottom edge to root top.
+  if (entry.boundingClientRect.bottom < rootBounds.top) {
+    const distance = rootBounds.top - entry.boundingClientRect.bottom
+    return distance <= VISIBILITY_BUFFER_PX
+  }
+
+  // Below the root: compare top edge to root bottom.
+  if (entry.boundingClientRect.top > rootBounds.bottom) {
+    const distance = entry.boundingClientRect.top - rootBounds.bottom
+    return distance <= VISIBILITY_BUFFER_PX
+  }
+
+  // Overlapping the root bounds.
+  return true
+}
+
+function getViewportRect(): { top: number; bottom: number } {
+  if (typeof window === "undefined") {
+    return { top: 0, bottom: 0 }
+  }
+  return { top: 0, bottom: window.innerHeight }
+}
+
+function isRenderableRoot(root: ObserverRoot): boolean {
+  if (!root) return true
+  if (root instanceof Document) return true
+  if (typeof window === "undefined") return false
+
+  const element = root as Element
+  const style = window.getComputedStyle(element as Element)
+  if (style.display === "none" || style.visibility === "hidden") {
     return false
   }
+  const rect = (element as Element).getBoundingClientRect()
+  return rect.width > 0 && rect.height > 0
+}
+
+function shouldRenderByRects(params: {
+  wrapperRect: DOMRect
+  rootRect: { top: number; bottom: number }
+  margin: number
+}): boolean {
+  const { wrapperRect, rootRect, margin } = params
+  const threshold = margin + VISIBILITY_BUFFER_PX
+
+  // Above the root: compare bottom edge to root top.
+  if (wrapperRect.bottom < rootRect.top) {
+    const distance = rootRect.top - wrapperRect.bottom
+    return distance <= threshold
+  }
+
+  // Below the root: compare top edge to root bottom.
+  if (wrapperRect.top > rootRect.bottom) {
+    const distance = wrapperRect.top - rootRect.bottom
+    return distance <= threshold
+  }
+
   return true
 }
 
@@ -103,7 +156,7 @@ function subscribeToSharedObserver(
 
 interface VirtualItemProps {
   cacheKey: string
-  children: JSX.Element
+  children: JSX.Element | (() => JSX.Element)
   scrollContainer?: Accessor<HTMLElement | undefined | null>
   threshold?: number
   minPlaceholderHeight?: number
@@ -114,18 +167,34 @@ interface VirtualItemProps {
   forceVisible?: Accessor<boolean>
   suspendMeasurements?: Accessor<boolean>
   onMeasured?: () => void
+  onHeightChange?: (nextHeight: number, previousHeight: number, meta: VirtualItemHeightChangeMeta) => void
   id?: string
 }
 
+export interface VirtualItemHeightChangeMeta {
+  source: "initial-visible-measure" | "resize"
+  previousCachedHeight: number | null
+  isStaleCacheCorrection: boolean
+  wasHidden: boolean
+}
+
 export default function VirtualItem(props: VirtualItemProps) {
-  const resolved = resolveChildren(() => props.children)
+  const resolveContent = () => (typeof props.children === "function" ? (props.children as () => JSX.Element)() : props.children)
   const cachedHeight = sizeCache.get(props.cacheKey)
-  const [isIntersecting, setIsIntersecting] = createSignal(true)
-  const [measuredHeight, setMeasuredHeight] = createSignal(cachedHeight ?? 0)
-  const [hasMeasured, setHasMeasured] = createSignal(cachedHeight !== undefined)
+  const fallbackPlaceholderHeight = () => props.minPlaceholderHeight ?? MIN_PLACEHOLDER_HEIGHT
+  // Default to hidden until we can determine visibility.
+  // This avoids keeping heavy DOM alive when IntersectionObserver
+  // doesn't fire (common for hidden/zero-sized scroll roots).
+  const [isIntersecting, setIsIntersecting] = createSignal(false)
+  // Keep measuredHeight aligned with the *effective layout height* while hidden.
+  // When content first mounts, onHeightChange deltas should reflect the DOM's
+  // placeholder height (not 0), otherwise scroll compensation can overshoot.
+  const [measuredHeight, setMeasuredHeight] = createSignal(cachedHeight ?? fallbackPlaceholderHeight())
   let hasReportedMeasurement = Boolean(cachedHeight && cachedHeight > 0)
   let pendingVisibility: boolean | null = null
   let visibilityFrame: number | null = null
+  let awaitingVisibleMeasurement = true
+  let lastMeasurementWhileHidden = true
   const flushVisibility = () => {
     if (visibilityFrame !== null) {
       cancelAnimationFrame(visibilityFrame)
@@ -148,15 +217,15 @@ export default function VirtualItem(props: VirtualItemProps) {
     })
   }
   const virtualizationEnabled = () => (props.virtualizationEnabled ? props.virtualizationEnabled() : true)
+  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+  const forceVisible = () => Boolean(props.forceVisible?.())
   const shouldHideContent = createMemo(() => {
-    if (props.forceVisible?.()) return false
+    if (forceVisible()) return false
     if (!virtualizationEnabled()) return false
     return !isIntersecting()
   })
-  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
- 
-   let wrapperRef: HTMLDivElement | undefined
- 
+
+  let wrapperRef: HTMLDivElement | undefined
   let contentRef: HTMLDivElement | undefined
 
   let resizeObserver: ResizeObserver | undefined
@@ -169,6 +238,17 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
   }
 
+  function scheduleVisibleMeasurements() {
+    if (shouldHideContent() || measurementsSuspended()) return
+    if (!contentRef) return
+    queueMicrotask(() => {
+      if (shouldHideContent() || measurementsSuspended()) return
+      if (!contentRef) return
+      updateMeasuredHeight()
+      setupResizeObserver()
+    })
+  }
+
   function cleanupIntersectionObserver() {
     if (intersectionCleanup) {
       intersectionCleanup()
@@ -176,41 +256,68 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
   }
 
-  function persistMeasurement(nextHeight: number) {
+  function persistMeasurement(nextHeight: number, meta?: { source: "initial-visible-measure" | "resize"; wasHidden: boolean }) {
     if (!Number.isFinite(nextHeight) || nextHeight < 0) {
       return
     }
+    const before = measuredHeight()
     const normalized = nextHeight
-    const previous = sizeCache.get(props.cacheKey) ?? measuredHeight()
-    const shouldKeepPrevious = previous > 0 && (normalized === 0 || (normalized > 0 && normalized < previous))
+    const previousCachedHeight = sizeCache.get(props.cacheKey) ?? null
+    const previous = previousCachedHeight ?? measuredHeight()
+    const measurementMeta: VirtualItemHeightChangeMeta = {
+      source: meta?.source ?? "resize",
+      previousCachedHeight,
+      isStaleCacheCorrection:
+        (meta?.source ?? "resize") === "initial-visible-measure" &&
+        previousCachedHeight !== null &&
+        normalized > 0 &&
+        Math.abs(normalized - previousCachedHeight) > 1,
+      wasHidden: meta?.wasHidden ?? shouldHideContent(),
+    }
+    // Only keep the previous measurement when the element reports 0 height.
+    // Allow shrinkage so placeholder height matches real content height;
+    // keeping the max height can cause mount/unmount jitter near the
+    // virtualization boundary.
+    const shouldKeepPrevious = previous > 0 && normalized === 0
     if (shouldKeepPrevious) {
       if (!hasReportedMeasurement) {
         hasReportedMeasurement = true
         props.onMeasured?.()
       }
-      setHasMeasured(true)
       sizeCache.set(props.cacheKey, previous)
       setMeasuredHeight(previous)
+      if (previous !== before) props.onHeightChange?.(previous, before, measurementMeta)
       return
     }
     if (normalized > 0) {
       sizeCache.set(props.cacheKey, normalized)
-      setHasMeasured(true)
       if (!hasReportedMeasurement) {
         hasReportedMeasurement = true
         props.onMeasured?.()
       }
     }
     setMeasuredHeight(normalized)
+    if (normalized !== before) props.onHeightChange?.(normalized, before, measurementMeta)
   }
 
   function updateMeasuredHeight() {
-    if (!contentRef || measurementsSuspended()) return
-    const next = contentRef.offsetHeight
-    if (next === measuredHeight()) return
-    persistMeasurement(next)
+    if (!contentRef) return
+    if (measurementsSuspended()) return
+    // Prefer subpixel-accurate height for scroll compensation.
+    // offsetHeight rounds to integers which can accumulate error.
+    const rect = contentRef.getBoundingClientRect()
+    const next = Math.max(0, Math.round(rect.height * 2) / 2)
+    const currentMeasured = measuredHeight()
+    const measurementSource: "initial-visible-measure" | "resize" = awaitingVisibleMeasurement ? "initial-visible-measure" : "resize"
+    const wasHidden = lastMeasurementWhileHidden
+    if (measurementSource === "initial-visible-measure") {
+      awaitingVisibleMeasurement = false
+      lastMeasurementWhileHidden = false
+    }
+    if (next === currentMeasured) return
+    persistMeasurement(next, { source: measurementSource, wasHidden })
   }
- 
+
   function setupResizeObserver() {
     if (!contentRef || measurementsSuspended()) return
     cleanupResizeObserver()
@@ -229,15 +336,60 @@ export default function VirtualItem(props: VirtualItemProps) {
   function refreshIntersectionObserver(targetRoot: Element | Document | null) {
     cleanupIntersectionObserver()
     if (!wrapperRef) {
-      setIsIntersecting(true)
+      setIsIntersecting(false)
       return
     }
     if (typeof IntersectionObserver === "undefined") {
       setIsIntersecting(true)
       return
     }
+
     const margin = props.threshold ?? DEFAULT_MARGIN_PX
-    intersectionCleanup = subscribeToSharedObserver(wrapperRef, targetRoot, margin, (entry) => {
+
+    // If the scroll root is hidden / 0x0, IntersectionObserver can report
+    // `isIntersecting` in unexpected ways (often "true" with null rootBounds),
+    // which keeps heavy DOM alive in background tabs.
+    //
+    // In that state, force-hide and skip attaching the observer. When the
+    // pane becomes visible again, VirtualItem will re-run this setup and
+    // re-attach the observer.
+    const renderable = isRenderableRoot(targetRoot)
+    if (!renderable) {
+      setIsIntersecting(false)
+      return
+    }
+
+    // Avoid doing an eager geometry read here.
+    // During large list hydration / initial layout, wrapper rects can be
+    // transiently 0/incorrect and cause many offscreen items to mount.
+    // Rely on the observer callback (which we harden below) to determine
+    // visibility.
+
+    const wrapperEl = wrapperRef
+    intersectionCleanup = subscribeToSharedObserver(wrapperEl, targetRoot, margin, (entry) => {
+      // IntersectionObserver can produce transient false-positives during pane
+      // activation/layout transitions (e.g. `isIntersecting: true` for items far
+      // outside the scroll root). For element roots, prefer explicit rect math.
+      if (targetRoot && !(targetRoot instanceof Document)) {
+        // When rootBounds is null we cannot trust the entry; treat as hidden.
+        if (entry.rootBounds === null) {
+          queueVisibility(false)
+          return
+        }
+        try {
+          const rootRect = (targetRoot as Element).getBoundingClientRect()
+          const visible = shouldRenderByRects({
+            wrapperRect: wrapperEl.getBoundingClientRect(),
+            rootRect: { top: rootRect.top, bottom: rootRect.bottom },
+            margin,
+          })
+          queueVisibility(visible)
+          return
+        } catch {
+          // Fall through to the entry-based heuristic.
+        }
+      }
+
       const nextVisible = shouldRenderEntry(entry)
       queueVisibility(nextVisible)
     })
@@ -261,30 +413,29 @@ export default function VirtualItem(props: VirtualItemProps) {
       cleanupResizeObserver()
     }
   }
- 
-  
   createEffect(() => {
-    if (shouldHideContent() || measurementsSuspended()) {
+    const hidden = shouldHideContent()
+    if (hidden) {
+      awaitingVisibleMeasurement = true
+      lastMeasurementWhileHidden = true
+    }
+    if (hidden || measurementsSuspended()) {
       cleanupResizeObserver()
-    } else if (contentRef) {
-      queueMicrotask(() => {
-        updateMeasuredHeight()
-        setupResizeObserver()
-      })
+    }
+    if (!hidden && !measurementsSuspended() && contentRef) {
+      scheduleVisibleMeasurements()
     }
   })
 
- 
+  
   createEffect(() => {
     const key = props.cacheKey
 
     const cached = sizeCache.get(key)
     if (cached !== undefined) {
       setMeasuredHeight(cached)
-      setHasMeasured(true)
     } else {
-      setMeasuredHeight(0)
-      setHasMeasured(false)
+      setMeasuredHeight(fallbackPlaceholderHeight())
     }
   })
 
@@ -302,7 +453,7 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
     return props.minPlaceholderHeight ?? MIN_PLACEHOLDER_HEIGHT
   })
- 
+
   onCleanup(() => {
     cleanupResizeObserver()
     cleanupIntersectionObserver()
@@ -320,10 +471,9 @@ export default function VirtualItem(props: VirtualItemProps) {
   const placeholderClass = () => ["virtual-item-placeholder", props.placeholderClass].filter(Boolean).join(" ")
   const lazyContent = createMemo<JSX.Element | null>(() => {
     if (shouldHideContent()) return null
-    return resolved()
+    return resolveContent()
   })
 
- 
   return (
     <div ref={setWrapperRef} id={props.id} class={wrapperClass()} style={{ width: "100%" }}>
       <div
@@ -340,4 +490,3 @@ export default function VirtualItem(props: VirtualItemProps) {
     </div>
   )
 }
-

packages/ui/src/lib/hooks/use-commands.ts

@@ -1,6 +1,6 @@
 import { createSignal, onMount } from "solid-js"
 import type { Accessor } from "solid-js"
-import type { Preferences, ExpansionPreference } from "../../stores/preferences"
+import type { Preferences, ExpansionPreference, ToolInputsVisibilityPreference } from "../../stores/preferences"
 import { createCommandRegistry, type Command } from "../commands"
 import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
 import type { ClientPart, MessageInfo } from "../../types/message"
@@ -14,7 +14,7 @@ import { getLogger } from "../logger"
 import { requestData } from "../opencode-api"
 import { emitSessionSidebarRequest } from "../session-sidebar-events"
 import { tGlobal } from "../i18n"
-import { runtimeEnv } from "../runtime-env"
+import { registerBehaviorCommands } from "../settings/behavior-registry"
 
 const log = getLogger("actions")
 
@@ -38,6 +38,7 @@ export interface UseCommandsOptions {
   setToolOutputExpansion: (mode: ExpansionPreference) => void
   setDiagnosticsExpansion: (mode: ExpansionPreference) => void
   setThinkingBlocksExpansion: (mode: ExpansionPreference) => void
+  setToolInputsVisibility: (mode: ToolInputsVisibilityPreference) => void
   handleNewInstanceRequest: () => void
   handleCloseInstance: (instanceId: string) => Promise<void>
   handleNewSession: (instanceId: string) => Promise<void>
@@ -426,155 +427,19 @@ export function useCommands(options: UseCommandsOptions) {
       },
     })
 
-    commandRegistry.register({
-      id: "prompt-submit-shortcut",
-      label: () =>
-        options.preferences().promptSubmitOnEnter
-          ? tGlobal("commands.promptSubmitShortcut.label.swapped")
-          : tGlobal("commands.promptSubmitShortcut.label.default"),
-      description: () => tGlobal("commands.promptSubmitShortcut.description"),
-      category: "Input & Focus",
-      keywords: () => splitKeywords("commands.promptSubmitShortcut.keywords"),
-      action: options.togglePromptSubmitOnEnter,
-    })
-
-    commandRegistry.register({
-      id: "thinking",
-      label: () => tGlobal(options.preferences().showThinkingBlocks ? "commands.thinkingBlocks.label.hide" : "commands.thinkingBlocks.label.show"),
-      description: () => tGlobal("commands.thinkingBlocks.description"),
-      category: "System",
-      keywords: () => ["/thinking", ...splitKeywords("commands.thinkingBlocks.keywords")],
-      action: options.toggleShowThinkingBlocks,
-    })
-
-    commandRegistry.register({
-      id: "timeline-tools",
-      label: () => tGlobal(options.preferences().showTimelineTools ? "commands.timelineToolCalls.label.hide" : "commands.timelineToolCalls.label.show"),
-      description: () => tGlobal("commands.timelineToolCalls.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.timelineToolCalls.keywords"),
-      action: options.toggleShowTimelineTools,
-    })
-
-    commandRegistry.register({
-      id: "keyboard-shortcut-hints",
-      label: () =>
-        tGlobal(
-          options.preferences().showKeyboardShortcutHints
-            ? "commands.keyboardShortcutHints.label.hide"
-            : "commands.keyboardShortcutHints.label.show",
-        ),
-      description: () =>
-        tGlobal(
-          runtimeEnv.host === "web"
-            ? "commands.keyboardShortcutHints.description.disabledWeb"
-            : "commands.keyboardShortcutHints.description",
-        ),
-      category: "System",
-      keywords: () => splitKeywords("commands.keyboardShortcutHints.keywords"),
-      disabled: () => runtimeEnv.host === "web",
-      action: options.toggleKeyboardShortcutHints,
-    })
-
-    commandRegistry.register({
-      id: "thinking-default-visibility",
-      label: () => {
-        const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
-        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
-        return tGlobal("commands.thinkingBlocksDefault.label", { state })
-      },
-      description: () => tGlobal("commands.thinkingBlocksDefault.description"),
-      category: "System",
-      keywords: () => ["/thinking", ...splitKeywords("commands.thinkingBlocksDefault.keywords")],
-      action: () => {
-        const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
-        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
-        options.setThinkingBlocksExpansion(next)
-      },
-    })
-
-    commandRegistry.register({
-      id: "diff-view-split",
-      label: () => {
-        const prefix = (options.preferences().diffViewMode || "split") === "split" ? "✓ " : ""
-        return `${prefix}${tGlobal("commands.diffViewSplit.label")}`
-      },
-      description: () => tGlobal("commands.diffViewSplit.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.diffViewSplit.keywords"),
-      action: () => options.setDiffViewMode("split"),
-    })
-
-    commandRegistry.register({
-      id: "diff-view-unified",
-      label: () => {
-        const prefix = (options.preferences().diffViewMode || "split") === "unified" ? "✓ " : ""
-        return `${prefix}${tGlobal("commands.diffViewUnified.label")}`
-      },
-      description: () => tGlobal("commands.diffViewUnified.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.diffViewUnified.keywords"),
-      action: () => options.setDiffViewMode("unified"),
-    })
-
-    commandRegistry.register({
-      id: "tool-output-default-visibility",
-      label: () => {
-        const mode = options.preferences().toolOutputExpansion || "expanded"
-        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
-        return tGlobal("commands.toolOutputsDefault.label", { state })
-      },
-      description: () => tGlobal("commands.toolOutputsDefault.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.toolOutputsDefault.keywords"),
-      action: () => {
-        const mode = options.preferences().toolOutputExpansion || "expanded"
-        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
-        options.setToolOutputExpansion(next)
-      },
-    })
-
-    commandRegistry.register({
-      id: "diagnostics-default-visibility",
-      label: () => {
-        const mode = options.preferences().diagnosticsExpansion || "expanded"
-        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
-        return tGlobal("commands.diagnosticsDefault.label", { state })
-      },
-      description: () => tGlobal("commands.diagnosticsDefault.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.diagnosticsDefault.keywords"),
-      action: () => {
-        const mode = options.preferences().diagnosticsExpansion || "expanded"
-        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
-        options.setDiagnosticsExpansion(next)
-      },
-    })
-
-    commandRegistry.register({
-      id: "token-usage-visibility",
-      label: () => {
-        const visible = options.preferences().showUsageMetrics ?? true
-        const state = visible ? tGlobal("commands.common.visible") : tGlobal("commands.common.hidden")
-        return tGlobal("commands.tokenUsageDisplay.label", { state })
-      },
-      description: () => tGlobal("commands.tokenUsageDisplay.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.tokenUsageDisplay.keywords"),
-      action: options.toggleUsageMetrics,
-    })
-
-    commandRegistry.register({
-      id: "auto-cleanup-blank-sessions",
-      label: () => {
-        const enabled = options.preferences().autoCleanupBlankSessions
-        const state = enabled ? tGlobal("commands.common.enabled") : tGlobal("commands.common.disabled")
-        return tGlobal("commands.autoCleanupBlankSessions.label", { state })
-      },
-      description: () => tGlobal("commands.autoCleanupBlankSessions.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.autoCleanupBlankSessions.keywords"),
-      action: options.toggleAutoCleanupBlankSessions,
+    registerBehaviorCommands((command) => commandRegistry.register(command), {
+      preferences: options.preferences,
+      toggleShowThinkingBlocks: options.toggleShowThinkingBlocks,
+      toggleKeyboardShortcutHints: options.toggleKeyboardShortcutHints,
+      toggleShowTimelineTools: options.toggleShowTimelineTools,
+      toggleUsageMetrics: options.toggleUsageMetrics,
+      toggleAutoCleanupBlankSessions: options.toggleAutoCleanupBlankSessions,
+      togglePromptSubmitOnEnter: options.togglePromptSubmitOnEnter,
+      setDiffViewMode: options.setDiffViewMode,
+      setToolOutputExpansion: options.setToolOutputExpansion,
+      setDiagnosticsExpansion: options.setDiagnosticsExpansion,
+      setThinkingBlocksExpansion: options.setThinkingBlocksExpansion,
+      setToolInputsVisibility: options.setToolInputsVisibility,
     })
  
     commandRegistry.register({

packages/ui/src/lib/hooks/use-folder-drop.ts

@@ -0,0 +1,158 @@
+import { Accessor, createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import {
+  containsFileDrop,
+  extractDroppedDirectoryPaths,
+  listenForNativeFolderDrops,
+  listenForNativeFolderDropState,
+  normalizeDroppedDirectoryPaths,
+  supportsDesktopFolderDrop,
+} from "../native/desktop-file-drop"
+import { runtimeEnv } from "../runtime-env"
+
+interface UseFolderDropOptions {
+  enabled: Accessor<boolean>
+  onDrop: (paths: string[]) => void | Promise<void>
+  onInvalidDrop?: () => void
+}
+
+interface FolderDropBindings {
+  onDragEnter: (event: DragEvent) => void
+  onDragOver: (event: DragEvent) => void
+  onDragLeave: (event: DragEvent) => void
+  onDrop: (event: DragEvent) => void
+}
+
+export function useFolderDrop(options: UseFolderDropOptions): {
+  isActive: Accessor<boolean>
+  isSupported: boolean
+  bind: FolderDropBindings
+} {
+  const [isActive, setIsActive] = createSignal(false)
+  const [dragDepth, setDragDepth] = createSignal(0)
+  const isSupported = supportsDesktopFolderDrop()
+
+  function reset() {
+    setDragDepth(0)
+    setIsActive(false)
+  }
+
+  async function handleResolvedPaths(paths: string[]) {
+    reset()
+    if (!options.enabled()) {
+      return
+    }
+    const directoryPaths = await normalizeDroppedDirectoryPaths(paths)
+    if (directoryPaths.length === 0) {
+      options.onInvalidDrop?.()
+      return
+    }
+    await options.onDrop(directoryPaths)
+  }
+
+  createEffect(() => {
+    if (!options.enabled()) {
+      reset()
+    }
+  })
+
+  onMount(() => {
+    if (!isSupported) {
+      return
+    }
+
+    let disposeNativeDrop = () => {}
+    let disposeNativeState = () => {}
+
+    void listenForNativeFolderDrops((paths) => {
+      if (!options.enabled()) {
+        return
+      }
+      void handleResolvedPaths(paths)
+    }).then((dispose) => {
+      disposeNativeDrop = dispose
+    })
+
+    void listenForNativeFolderDropState((state) => {
+      if (!options.enabled()) {
+        reset()
+        return
+      }
+      if (state === "enter") {
+        setIsActive(true)
+        return
+      }
+      reset()
+    }).then((dispose) => {
+      disposeNativeState = dispose
+    })
+
+    onCleanup(() => {
+      disposeNativeDrop()
+      disposeNativeState()
+    })
+  })
+
+  const bind: FolderDropBindings = {
+    onDragEnter(event) {
+      if (!isSupported || runtimeEnv.host === "tauri" || !options.enabled() || !containsFileDrop(event)) {
+        return
+      }
+      event.preventDefault()
+      setDragDepth((prev) => prev + 1)
+      setIsActive(true)
+    },
+    onDragOver(event) {
+      if (!isSupported || runtimeEnv.host === "tauri" || !options.enabled() || !containsFileDrop(event)) {
+        return
+      }
+      event.preventDefault()
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy"
+      }
+      setIsActive(true)
+    },
+    onDragLeave(event) {
+      if (!isSupported || runtimeEnv.host === "tauri" || !containsFileDrop(event)) {
+        return
+      }
+      event.preventDefault()
+      const nextDepth = Math.max(0, dragDepth() - 1)
+      setDragDepth(nextDepth)
+      if (nextDepth === 0) {
+        setIsActive(false)
+      }
+    },
+    onDrop(event) {
+      if (!isSupported) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (!options.enabled()) {
+        reset()
+        return
+      }
+
+      if (runtimeEnv.host === "tauri") {
+        reset()
+        return
+      }
+
+      const paths = extractDroppedDirectoryPaths(event)
+      if (paths.length === 0) {
+        reset()
+        options.onInvalidDrop?.()
+        return
+      }
+
+      void handleResolvedPaths(paths)
+    },
+  }
+
+  return {
+    isActive,
+    isSupported,
+    bind,
+  }
+}

packages/ui/src/lib/i18n/messages/en/app.ts

@@ -1,9 +1,9 @@
 export const appMessages = {
   "app.launchError.title": "Unable to launch OpenCode",
-  "app.launchError.description": "We couldn't start the selected OpenCode binary. Review the error output below or choose a different binary from Advanced Settings.",
+  "app.launchError.description": "We couldn't start the selected OpenCode binary. Review the error output below or choose a different binary from OpenCode settings.",
   "app.launchError.binaryPathLabel": "Binary path",
   "app.launchError.errorOutputLabel": "Error output",
-  "app.launchError.openAdvancedSettings": "Open Advanced Settings",
+  "app.launchError.openAdvancedSettings": "Open OpenCode Settings",
   "app.launchError.close": "Close",
   "app.launchError.closeTitle": "Close (Esc)",
   "app.launchError.fallbackMessage": "Failed to launch workspace",

packages/ui/src/lib/i18n/messages/en/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Toggle default expansion for diagnostics output",
   "commands.diagnosticsDefault.keywords": "diagnostics, expand, collapse",
 
+  "commands.toolInputsVisibility.label": "Tool Inputs Visibility · {state}",
+  "commands.toolInputsVisibility.description": "Set default visibility for tool call input arguments",
+  "commands.toolInputsVisibility.keywords": "tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "Token Usage Display · {state}",
   "commands.tokenUsageDisplay.description": "Show or hide token and cost stats for assistant messages",
   "commands.tokenUsageDisplay.keywords": "token, usage, cost, stats",

packages/ui/src/lib/i18n/messages/en/folderSelection.ts

@@ -22,6 +22,7 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "Opening...",
 
   "folderSelection.advancedSettings": "Advanced Settings",
+  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "Navigate",
   "folderSelection.hints.select": "Select",
@@ -31,6 +32,11 @@ export const folderSelectionMessages = {
   "folderSelection.loading.title": "Starting instance...",
   "folderSelection.loading.subtitle": "Hang tight while we prepare your workspace.",
 
+  "folderSelection.drop.title": "Drop a folder to open it",
+  "folderSelection.drop.subtitle": "Start a new instance in the dropped folder.",
+  "folderSelection.drop.invalidTitle": "Couldn't open dropped item",
+  "folderSelection.drop.invalidMessage": "Drop a folder to start a new instance.",
+
   "folderSelection.dialog.title": "Select Workspace",
   "folderSelection.dialog.description": "Select workspace to start coding.",
 } as const

packages/ui/src/lib/i18n/messages/en/instance.ts

@@ -96,11 +96,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.ariaLabel": "Right panel tabs",
   "instanceShell.rightPanel.actions.refresh": "Refresh",
   "instanceShell.rightPanel.sections.sessionChanges": "Session Changes",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Files modified in the current session. Shows additions and deletions for each file.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "The agent's roadmap for this session. Tracks tasks, subtasks, and their completion status.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Background Shells",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Long-running processes started by the agent. You can monitor their output, stop, or terminate them.",
   "instanceShell.rightPanel.sections.mcp": "MCP Servers",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol servers that extend the agent's capabilities with external tools and services.",
   "instanceShell.rightPanel.sections.lsp": "LSP Servers",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocol servers providing code intelligence, diagnostics, and language-specific features.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins that customize the UI and server behavior, adding features beyond MCP and LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Select a session to view changes.",
   "instanceShell.sessionChanges.loading": "Fetching session changes...",

packages/ui/src/lib/i18n/messages/en/messaging.ts

@@ -23,7 +23,6 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Copy",
   "messageSection.quote.copied": "Copied!",
   "messageSection.quote.copyFailed": "Copy failed",
-
   "messageTimeline.ariaLabel": "Message timeline",
   "messageTimeline.segment.user.label": "You",
   "messageTimeline.segment.assistant.label": "Asst",
@@ -35,13 +34,12 @@ export const messagingMessages = {
   "messageTimeline.tooltip.compaction.manual": "User Compaction",
   "messageTimeline.text.filePrefix": "[File] {filename}",
   "messageTimeline.text.attachment": "Attachment",
-
   "messageBlock.tool.header": "Tool Call",
   "messageBlock.tool.unknown": "unknown",
   "messageBlock.tool.goToSession.label": "Go to Session",
   "messageBlock.tool.goToSession.title": "Go to session",
   "messageBlock.tool.goToSession.unavailableTitle": "Session not available yet",
-  "messageBlock.tool.deletePart.label": "Delete",
+  "messageBlock.tool.deletePart.label": "Delete Part",
   "messageBlock.tool.deletePart.deleting": "Deleting...",
   "messageBlock.tool.deletePart.title": "Delete this tool call output",
   "messageBlock.tool.deletePart.failed.title": "Delete failed",
@@ -71,17 +69,38 @@ export const messagingMessages = {
   "messageItem.speaker.you": "You",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revert",
-  "messageItem.actions.revertTitle": "Revert to this message",
+  "messageItem.actions.revertTitle": "Undo changes up to here (deletes messages)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork from this message",
   "messageItem.actions.copy": "Copy",
   "messageItem.actions.copyTitle": "Copy message",
   "messageItem.actions.copied": "Copied!",
+  "messageItem.actions.deleteMessage": "Delete message (doesn't undo changes)",
+  "messageItem.actions.deleteMessagesUpTo": "Delete messages up to here (doesn't undo changes)",
+  "messageItem.actions.deletingMessage": "Deleting...",
+  "messageItem.actions.deleteMessageFailedTitle": "Delete failed",
+  "messageItem.actions.deleteMessageFailedMessage": "Failed to delete message",
+
+  "messageItem.selection.checkboxAriaLabel": "Select message for deletion",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Selected items ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Delete selected items",
+  "messageSection.bulkDelete.selectAllTitle": "Select all messages",
+  "messageSection.bulkDelete.moreOptionsTitle": "More options",
+  "messageSection.bulkDelete.selectionModeLabel": "Selection",
+  "messageSection.bulkDelete.selectionModeAll": "All",
+  "messageSection.bulkDelete.selectionModeTools": "Tools only",
+  "messageSection.bulkDelete.selectionHint.toggle": "Select item",
+  "messageSection.bulkDelete.selectionHint.range": "Select range",
+  "messageSection.bulkDelete.selectionHint.clear": "Clear Selection",
+  "messageSection.bulkDelete.cancelTitle": "Cancel selection",
+  "messageSection.bulkDelete.failedTitle": "Delete failed",
+  "messageSection.bulkDelete.failedMessage": "Failed to delete selected items",
   "messageItem.status.queued": "QUEUED",
   "messageItem.status.generating": "Generating...",
   "messageItem.status.sending": "Sending...",
   "messageItem.status.failedToSend": "Message failed to send",
-  "messagePart.actions.delete": "Delete",
+  "messagePart.actions.delete": "Delete Part",
   "messagePart.actions.deleting": "Deleting...",
   "messagePart.actions.deleteTitle": "Delete this item",
   "messagePart.actions.deleteFailedTitle": "Delete failed",

packages/ui/src/lib/i18n/messages/en/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "Stop failed",
   "sessionView.alerts.revertFailed.message": "Failed to revert to message",
   "sessionView.alerts.revertFailed.title": "Revert failed",
+  "sessionView.alerts.deleteUpToFailed.message": "Failed to delete messages",
+  "sessionView.alerts.deleteUpToFailed.title": "Delete failed",
   "sessionView.alerts.forkFailed.message": "Failed to fork session",
   "sessionView.alerts.forkFailed.title": "Fork failed",
   "sessionView.attachments.expandPastedTextAriaLabel": "Expand pasted text",

packages/ui/src/lib/i18n/messages/en/settings.ts

@@ -55,4 +55,88 @@ export const settingsMessages = {
   "contextUsagePanel.labels.used": "Used",
   "contextUsagePanel.labels.available": "Avail",
   "contextUsagePanel.unavailable": "--",
+
+  "settings.title": "Settings",
+  "settings.navigationAriaLabel": "Settings sections",
+  "settings.close": "Close settings",
+  "settings.content.eyebrow": "Workspace preferences",
+  "settings.open.title": "Open settings",
+  "settings.open.ariaLabel": "Open settings",
+  "settings.nav.appearance": "Appearance",
+  "settings.nav.notifications": "Notifications",
+  "settings.nav.remote": "Remote Access",
+  "settings.nav.opencode": "OpenCode",
+  "settings.scope.device": "This device",
+  "settings.scope.server": "Server setting",
+  "settings.common.enabled": "Enabled",
+  "settings.common.disabled": "Disabled",
+  "settings.section.appearance.title": "Appearance",
+  "settings.section.appearance.subtitle": "Adjust how the app looks on this device.",
+  "settings.appearance.theme.title": "Theme",
+  "settings.appearance.theme.subtitle": "Choose the color mode used throughout the app.",
+  "settings.appearance.theme.option.system": "Match your operating system setting",
+  "settings.appearance.theme.option.light": "Use the light appearance",
+  "settings.appearance.theme.option.dark": "Use the dark appearance",
+  "settings.section.notifications.title": "Notifications",
+  "settings.section.notifications.subtitle": "Control OS-level notifications for session activity.",
+  "settings.notifications.permission.granted": "Granted",
+  "settings.notifications.permission.denied": "Denied",
+  "settings.notifications.permission.default": "Not granted",
+  "settings.notifications.permission.unsupported": "Unsupported",
+  "settings.notifications.messages.unsupportedEnvironment": "OS notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionDenied": "Notification permission denied. Enable notifications in your system or browser settings.",
+  "settings.notifications.messages.permissionNotGranted": "Notification permission not granted.",
+  "settings.notifications.messages.unsupportedGeneral": "Notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionGranted": "Permission granted. You can now enable notifications.",
+  "settings.notifications.messages.permissionRequestDenied": "Permission denied. You may need to enable notifications in your system or browser settings.",
+  "settings.notifications.sessionStatus.title": "Session status notifications",
+  "settings.notifications.sessionStatus.subtitle": "Receive alerts when sessions need your attention.",
+  "settings.notifications.enable.title": "Enable notifications",
+  "settings.notifications.enable.permission": "Permission: {permission}",
+  "settings.notifications.requestPermission.title": "Request permission",
+  "settings.notifications.requestPermission.subtitle": "Allow the app to send notifications on this device.",
+  "settings.notifications.requestPermission.action": "Request",
+  "settings.notifications.allowVisible.title": "Notify when the app is focused",
+  "settings.notifications.allowVisible.subtitle": "Keep alerts enabled even while this window is visible.",
+  "settings.notifications.unsupportedNote": "Notifications are not supported in this environment. The notifications control stays disabled.",
+  "settings.notifications.events.title": "Notify me when",
+  "settings.notifications.events.subtitle": "Choose which session events should send alerts.",
+  "settings.notifications.events.needsInput": "Session needs input",
+  "settings.notifications.events.idle": "Session becomes idle",
+  "settings.notifications.status.enabled": "Notifications enabled",
+  "settings.notifications.status.disabled": "Notifications disabled",
+  "settings.notifications.status.unsupported": "Notifications unsupported",
+  "settings.section.remote.title": "Remote Access",
+  "settings.section.remote.subtitle": "Review how this server is exposed on your network and secure access credentials.",
+  "settings.section.opencode.title": "OpenCode",
+  "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
+  "settings.opencode.runtime.title": "Runtime",
+  "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+
+  "settings.appearance.behavior.title": "Interaction",
+  "settings.appearance.behavior.subtitle": "Message, diff, and input defaults.",
+  "settings.behavior.keyboardHints.title": "Keyboard shortcut hints",
+  "settings.behavior.keyboardHints.subtitle": "Show keyboard shortcut hints across the UI.",
+  "settings.behavior.thinking.title": "Thinking sections",
+  "settings.behavior.thinking.subtitle": "Show or hide AI thinking sections in messages.",
+  "settings.behavior.thinkingDefault.title": "Thinking default",
+  "settings.behavior.thinkingDefault.subtitle": "Choose whether thinking sections start expanded or collapsed.",
+  "settings.behavior.timelineTools.title": "Timeline tool calls",
+  "settings.behavior.timelineTools.subtitle": "Show or hide tool call entries in the message timeline.",
+  "settings.behavior.diffView.title": "Diff view",
+  "settings.behavior.diffView.subtitle": "Choose how tool-call diffs are displayed.",
+  "settings.behavior.diffView.option.split": "Split",
+  "settings.behavior.diffView.option.unified": "Unified",
+  "settings.behavior.toolOutputsDefault.title": "Tool outputs default",
+  "settings.behavior.toolOutputsDefault.subtitle": "Choose whether tool outputs start expanded or collapsed.",
+  "settings.behavior.diagnosticsDefault.title": "Diagnostics default",
+  "settings.behavior.diagnosticsDefault.subtitle": "Choose whether diagnostics output starts expanded or collapsed.",
+  "settings.behavior.toolInputsVisibility.title": "Tool inputs visibility",
+  "settings.behavior.toolInputsVisibility.subtitle": "Set default visibility for tool call input arguments.",
+  "settings.behavior.usageMetrics.title": "Token usage metrics",
+  "settings.behavior.usageMetrics.subtitle": "Show or hide token and cost stats for assistant messages.",
+  "settings.behavior.autoCleanup.title": "Auto-cleanup blank sessions",
+  "settings.behavior.autoCleanup.subtitle": "Automatically clean up blank sessions when creating new ones.",
+  "settings.behavior.promptSubmit.title": "Enter to submit",
+  "settings.behavior.promptSubmit.subtitle": "Use Enter to submit prompts; Cmd/Ctrl+Enter inserts a new line.",
 } as const

packages/ui/src/lib/i18n/messages/en/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Diff view mode",

packages/ui/src/lib/i18n/messages/es/app.ts

@@ -1,9 +1,9 @@
 export const appMessages = {
   "app.launchError.title": "No se pudo iniciar OpenCode",
-  "app.launchError.description": "No pudimos iniciar el binario de OpenCode seleccionado. Revisa la salida de error abajo o elige un binario distinto en Configuración avanzada.",
+  "app.launchError.description": "No pudimos iniciar el binario de OpenCode seleccionado. Revisa la salida de error abajo o elige un binario distinto en la configuración de OpenCode.",
   "app.launchError.binaryPathLabel": "Ruta del binario",
   "app.launchError.errorOutputLabel": "Salida de error",
-  "app.launchError.openAdvancedSettings": "Abrir Configuración avanzada",
+  "app.launchError.openAdvancedSettings": "Abrir Configuración de OpenCode",
   "app.launchError.close": "Cerrar",
   "app.launchError.closeTitle": "Cerrar (Esc)",
   "app.launchError.fallbackMessage": "No se pudo iniciar el workspace",

packages/ui/src/lib/i18n/messages/es/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Alternar la expansión por defecto de la salida de diagnósticos",
   "commands.diagnosticsDefault.keywords": "diagnósticos, expandir, colapsar",
 
+  "commands.toolInputsVisibility.label": "Visibilidad de entradas de herramientas · {state}",
+  "commands.toolInputsVisibility.description": "Configurar la visibilidad por defecto de los argumentos de entrada de llamadas de herramienta",
+  "commands.toolInputsVisibility.keywords": "herramienta, entradas, argumentos, visibilidad, ocultar, mostrar, expandir, colapsar",
+
   "commands.tokenUsageDisplay.label": "Mostrar uso de tokens · {state}",
   "commands.tokenUsageDisplay.description": "Mostrar u ocultar estadísticas de tokens y costo en los mensajes del asistente",
   "commands.tokenUsageDisplay.keywords": "token, uso, costo, estadísticas",

packages/ui/src/lib/i18n/messages/es/folderSelection.ts

@@ -22,6 +22,7 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "Abriendo...",
 
   "folderSelection.advancedSettings": "Configuración avanzada",
+  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "Navegar",
   "folderSelection.hints.select": "Seleccionar",
@@ -31,6 +32,11 @@ export const folderSelectionMessages = {
   "folderSelection.loading.title": "Iniciando instancia...",
   "folderSelection.loading.subtitle": "Espera un momento mientras preparamos tu workspace.",
 
+  "folderSelection.drop.title": "Suelta una carpeta para abrirla",
+  "folderSelection.drop.subtitle": "Inicia una nueva instancia en la carpeta soltada.",
+  "folderSelection.drop.invalidTitle": "No se pudo abrir el elemento soltado",
+  "folderSelection.drop.invalidMessage": "Suelta una carpeta para iniciar una nueva instancia.",
+
   "folderSelection.dialog.title": "Seleccionar workspace",
   "folderSelection.dialog.description": "Selecciona un workspace para empezar a programar.",
 } as const

packages/ui/src/lib/i18n/messages/es/instance.ts

@@ -48,7 +48,7 @@ export const instanceMessages = {
   "instanceShell.commandPalette.openAriaLabel": "Abrir paleta de comandos",
   "instanceShell.commandPalette.button": "Paleta de comandos",
 
-  "instanceShell.connection.ariaLabel": "Connection {status}",
+  "instanceShell.connection.ariaLabel": "Conexión {status}",
   "instanceShell.connection.connected": "Conectada",
   "instanceShell.connection.connecting": "Conectando...",
   "instanceShell.connection.disconnected": "Desconectada",
@@ -93,16 +93,22 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.files": "Archivos",
   "instanceShell.rightPanel.tabs.status": "Estado",
   "instanceShell.rightPanel.tabs.ariaLabel": "Pestañas del panel derecho",
-  "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesion",
+  "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesión",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Archivos modificados en la sesión actual. Muestra las adiciones y eliminaciones de cada archivo.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Hoja de ruta del agente para esta sesión. Realiza el seguimiento de tareas, subtareas y su estado de finalización.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en segundo plano",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Procesos de larga duración iniciados por el agente. Puedes supervisar su salida, detenerlos o terminarlos.",
   "instanceShell.rightPanel.sections.mcp": "Servidores MCP",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Servidores del Model Context Protocol (MCP) que amplían las capacidades del agente con herramientas y servicios externos.",
   "instanceShell.rightPanel.sections.lsp": "Servidores LSP",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Servidores del Language Server Protocol (LSP) que proporcionan inteligencia de código, diagnósticos y funciones específicas del lenguaje.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins que personalizan el comportamiento de la UI y del servidor, y añaden funciones más allá de MCP y LSP.",
 
-  "instanceShell.sessionChanges.noSessionSelected": "Selecciona una sesion para ver los cambios.",
-  "instanceShell.sessionChanges.loading": "Obteniendo cambios de la sesion...",
-  "instanceShell.sessionChanges.empty": "Aun no hay cambios.",
+  "instanceShell.sessionChanges.noSessionSelected": "Selecciona una sesión para ver los cambios.",
+  "instanceShell.sessionChanges.loading": "Obteniendo cambios de la sesión...",
+  "instanceShell.sessionChanges.empty": "Aún no hay cambios.",
   "instanceShell.sessionChanges.filesChanged": "{count} archivos cambiados",
   "instanceShell.sessionChanges.actions.show": "Mostrar cambios",
 

packages/ui/src/lib/i18n/messages/es/messaging.ts

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Ir a sesión",
   "messageBlock.tool.goToSession.title": "Ir a la sesión",
   "messageBlock.tool.goToSession.unavailableTitle": "La sesión aún no está disponible",
-  "messageBlock.tool.deletePart.label": "Eliminar",
+  "messageBlock.tool.deletePart.label": "Eliminar parte",
   "messageBlock.tool.deletePart.deleting": "Eliminando...",
   "messageBlock.tool.deletePart.title": "Eliminar esta salida de herramienta",
   "messageBlock.tool.deletePart.failed.title": "Error al eliminar",
@@ -71,17 +71,38 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Tú",
   "messageItem.speaker.assistant": "Asistente",
   "messageItem.actions.revert": "Revertir",
-  "messageItem.actions.revertTitle": "Revertir a este mensaje",
+  "messageItem.actions.revertTitle": "Deshacer cambios hasta aqui (elimina mensajes)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork desde este mensaje",
   "messageItem.actions.copy": "Copiar",
   "messageItem.actions.copyTitle": "Copiar mensaje",
   "messageItem.actions.copied": "¡Copiado!",
+  "messageItem.actions.deleteMessage": "Eliminar mensaje (no deshace cambios)",
+  "messageItem.actions.deleteMessagesUpTo": "Eliminar mensajes hasta aqui (no deshace cambios)",
+  "messageItem.actions.deletingMessage": "Eliminando...",
+  "messageItem.actions.deleteMessageFailedTitle": "Error al eliminar",
+  "messageItem.actions.deleteMessageFailedMessage": "No se pudo eliminar el mensaje",
+
+  "messageItem.selection.checkboxAriaLabel": "Seleccionar mensaje para eliminar",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Elementos seleccionados ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Eliminar elementos seleccionados",
+  "messageSection.bulkDelete.selectAllTitle": "Seleccionar todos los mensajes",
+  "messageSection.bulkDelete.moreOptionsTitle": "Más opciones",
+  "messageSection.bulkDelete.selectionModeLabel": "Selección",
+  "messageSection.bulkDelete.selectionModeAll": "Todo",
+  "messageSection.bulkDelete.selectionModeTools": "Solo herramientas",
+  "messageSection.bulkDelete.selectionHint.toggle": "Seleccionar elemento",
+  "messageSection.bulkDelete.selectionHint.range": "Seleccionar rango",
+  "messageSection.bulkDelete.selectionHint.clear": "Borrar selección",
+  "messageSection.bulkDelete.cancelTitle": "Cancelar selección",
+  "messageSection.bulkDelete.failedTitle": "Error al eliminar",
+  "messageSection.bulkDelete.failedMessage": "No se pudieron eliminar los elementos seleccionados",
   "messageItem.status.queued": "EN COLA",
   "messageItem.status.generating": "Generando...",
   "messageItem.status.sending": "Enviando...",
   "messageItem.status.failedToSend": "No se pudo enviar el mensaje",
-  "messagePart.actions.delete": "Eliminar",
+  "messagePart.actions.delete": "Eliminar parte",
   "messagePart.actions.deleting": "Eliminando...",
   "messagePart.actions.deleteTitle": "Eliminar este elemento",
   "messagePart.actions.deleteFailedTitle": "Error al eliminar",

packages/ui/src/lib/i18n/messages/es/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "No se pudo detener",
   "sessionView.alerts.revertFailed.message": "No se pudo revertir al mensaje",
   "sessionView.alerts.revertFailed.title": "No se pudo revertir",
+  "sessionView.alerts.deleteUpToFailed.message": "No se pudieron eliminar los mensajes",
+  "sessionView.alerts.deleteUpToFailed.title": "Error al eliminar",
   "sessionView.alerts.forkFailed.message": "No se pudo hacer fork de la sesión",
   "sessionView.alerts.forkFailed.title": "No se pudo hacer fork",
   "sessionView.attachments.expandPastedTextAriaLabel": "Expandir texto pegado",

packages/ui/src/lib/i18n/messages/es/settings.ts

@@ -55,4 +55,88 @@ export const settingsMessages = {
   "contextUsagePanel.labels.used": "Usado",
   "contextUsagePanel.labels.available": "Disp.",
   "contextUsagePanel.unavailable": "--",
+
+  "settings.title": "Settings",
+  "settings.navigationAriaLabel": "Settings sections",
+  "settings.close": "Close settings",
+  "settings.content.eyebrow": "Workspace preferences",
+  "settings.open.title": "Open settings",
+  "settings.open.ariaLabel": "Open settings",
+  "settings.nav.appearance": "Appearance",
+  "settings.nav.notifications": "Notifications",
+  "settings.nav.remote": "Remote Access",
+  "settings.nav.opencode": "OpenCode",
+  "settings.scope.device": "This device",
+  "settings.scope.server": "Server setting",
+  "settings.common.enabled": "Enabled",
+  "settings.common.disabled": "Desactivado",
+  "settings.section.appearance.title": "Appearance",
+  "settings.section.appearance.subtitle": "Adjust how the app looks on this device.",
+  "settings.appearance.theme.title": "Theme",
+  "settings.appearance.theme.subtitle": "Choose the color mode used throughout the app.",
+  "settings.appearance.theme.option.system": "Match your operating system setting",
+  "settings.appearance.theme.option.light": "Use the light appearance",
+  "settings.appearance.theme.option.dark": "Use the dark appearance",
+  "settings.section.notifications.title": "Notifications",
+  "settings.section.notifications.subtitle": "Control OS-level notifications for session activity.",
+  "settings.notifications.permission.granted": "Granted",
+  "settings.notifications.permission.denied": "Denied",
+  "settings.notifications.permission.default": "Not granted",
+  "settings.notifications.permission.unsupported": "Unsupported",
+  "settings.notifications.messages.unsupportedEnvironment": "OS notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionDenied": "Notification permission denied. Enable notifications in your system or browser settings.",
+  "settings.notifications.messages.permissionNotGranted": "Notification permission not granted.",
+  "settings.notifications.messages.unsupportedGeneral": "Notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionGranted": "Permission granted. You can now enable notifications.",
+  "settings.notifications.messages.permissionRequestDenied": "Permission denied. You may need to enable notifications in your system or browser settings.",
+  "settings.notifications.sessionStatus.title": "Session status notifications",
+  "settings.notifications.sessionStatus.subtitle": "Receive alerts when sessions need your attention.",
+  "settings.notifications.enable.title": "Enable notifications",
+  "settings.notifications.enable.permission": "Permission: {permission}",
+  "settings.notifications.requestPermission.title": "Request permission",
+  "settings.notifications.requestPermission.subtitle": "Allow the app to send notifications on this device.",
+  "settings.notifications.requestPermission.action": "Request",
+  "settings.notifications.allowVisible.title": "Notify when the app is focused",
+  "settings.notifications.allowVisible.subtitle": "Keep alerts enabled even while this window is visible.",
+  "settings.notifications.unsupportedNote": "Notifications are not supported in this environment. The notifications control stays disabled.",
+  "settings.notifications.events.title": "Notify me when",
+  "settings.notifications.events.subtitle": "Choose which session events should send alerts.",
+  "settings.notifications.events.needsInput": "Session needs input",
+  "settings.notifications.events.idle": "Session becomes idle",
+  "settings.notifications.status.enabled": "Notifications enabled",
+  "settings.notifications.status.disabled": "Notifications disabled",
+  "settings.notifications.status.unsupported": "Notifications unsupported",
+  "settings.section.remote.title": "Remote Access",
+  "settings.section.remote.subtitle": "Review how this server is exposed on your network and secure access credentials.",
+  "settings.section.opencode.title": "OpenCode",
+  "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
+  "settings.opencode.runtime.title": "Runtime",
+  "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+
+  "settings.appearance.behavior.title": "Interaccion",
+  "settings.appearance.behavior.subtitle": "Valores predeterminados de mensajes, diffs y entrada.",
+  "settings.behavior.keyboardHints.title": "Sugerencias de atajos de teclado",
+  "settings.behavior.keyboardHints.subtitle": "Muestra sugerencias de atajos de teclado en toda la interfaz.",
+  "settings.behavior.thinking.title": "Secciones de pensamiento",
+  "settings.behavior.thinking.subtitle": "Muestra u oculta las secciones de pensamiento de la IA en los mensajes.",
+  "settings.behavior.thinkingDefault.title": "Pensamiento por defecto",
+  "settings.behavior.thinkingDefault.subtitle": "Elige si las secciones de pensamiento comienzan expandidas o contraidas.",
+  "settings.behavior.timelineTools.title": "Llamadas de herramientas en la linea de tiempo",
+  "settings.behavior.timelineTools.subtitle": "Muestra u oculta entradas de llamadas de herramientas en la linea de tiempo de mensajes.",
+  "settings.behavior.diffView.title": "Vista de diferencias",
+  "settings.behavior.diffView.subtitle": "Elige como se muestran los diffs de llamadas de herramientas.",
+  "settings.behavior.diffView.option.split": "Dividida",
+  "settings.behavior.diffView.option.unified": "Unificada",
+  "settings.behavior.toolOutputsDefault.title": "Salidas de herramientas por defecto",
+  "settings.behavior.toolOutputsDefault.subtitle": "Elige si las salidas de herramientas comienzan expandidas o contraidas.",
+  "settings.behavior.diagnosticsDefault.title": "Diagnosticos por defecto",
+  "settings.behavior.diagnosticsDefault.subtitle": "Elige si la salida de diagnosticos comienza expandida o contraida.",
+  "settings.behavior.toolInputsVisibility.title": "Visibilidad de entradas de herramientas",
+  "settings.behavior.toolInputsVisibility.subtitle": "Establece la visibilidad por defecto de los argumentos de entrada de las llamadas de herramientas.",
+  "settings.behavior.usageMetrics.title": "Metricas de uso de tokens",
+  "settings.behavior.usageMetrics.subtitle": "Muestra u oculta estadisticas de tokens y costo en mensajes del asistente.",
+  "settings.behavior.autoCleanup.title": "Limpieza automatica de sesiones en blanco",
+  "settings.behavior.autoCleanup.subtitle": "Limpia automaticamente las sesiones en blanco al crear nuevas.",
+  "settings.behavior.promptSubmit.title": "Enter para enviar",
+  "settings.behavior.promptSubmit.subtitle": "Usa Enter para enviar; Cmd/Ctrl+Enter inserta una nueva linea.",
 } as const

packages/ui/src/lib/i18n/messages/es/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Modo de vista de diff",

packages/ui/src/lib/i18n/messages/fr/app.ts

@@ -1,9 +1,9 @@
 export const appMessages = {
   "app.launchError.title": "Impossible de lancer OpenCode",
-  "app.launchError.description": "Nous n'avons pas pu démarrer le binaire OpenCode sélectionné. Consultez la sortie d'erreur ci-dessous ou choisissez un autre binaire dans les Paramètres avancés.",
+  "app.launchError.description": "Nous n'avons pas pu démarrer le binaire OpenCode sélectionné. Consultez la sortie d'erreur ci-dessous ou choisissez un autre binaire dans les paramètres OpenCode.",
   "app.launchError.binaryPathLabel": "Chemin du binaire",
   "app.launchError.errorOutputLabel": "Sortie d'erreur",
-  "app.launchError.openAdvancedSettings": "Ouvrir les paramètres avancés",
+  "app.launchError.openAdvancedSettings": "Ouvrir les paramètres OpenCode",
   "app.launchError.close": "Fermer",
   "app.launchError.closeTitle": "Fermer (Esc)",
   "app.launchError.fallbackMessage": "Échec du lancement de l'espace de travail",

packages/ui/src/lib/i18n/messages/fr/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Choisir l'ouverture par défaut de la sortie des diagnostics",
   "commands.diagnosticsDefault.keywords": "diagnostics, développer, réduire",
 
+  "commands.toolInputsVisibility.label": "Visibilité des entrées d'outil · {state}",
+  "commands.toolInputsVisibility.description": "Définir la visibilité par défaut des arguments d'entrée des appels d'outil",
+  "commands.toolInputsVisibility.keywords": "outil, entrées, arguments, visibilité, masquer, afficher, développer, réduire",
+
   "commands.tokenUsageDisplay.label": "Affichage de l'usage des tokens · {state}",
   "commands.tokenUsageDisplay.description": "Afficher ou masquer les stats de tokens et de coût pour les messages de l'assistant",
   "commands.tokenUsageDisplay.keywords": "token, usage, coût, stats",

packages/ui/src/lib/i18n/messages/fr/folderSelection.ts

@@ -22,6 +22,7 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "Ouverture...",
 
   "folderSelection.advancedSettings": "Paramètres avancés",
+  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "Naviguer",
   "folderSelection.hints.select": "Sélectionner",
@@ -31,6 +32,11 @@ export const folderSelectionMessages = {
   "folderSelection.loading.title": "Démarrage de l'instance...",
   "folderSelection.loading.subtitle": "Patientez pendant que nous préparons votre espace de travail.",
 
+  "folderSelection.drop.title": "Déposez un dossier pour l'ouvrir",
+  "folderSelection.drop.subtitle": "Démarrez une nouvelle instance dans le dossier déposé.",
+  "folderSelection.drop.invalidTitle": "Impossible d'ouvrir l'élément déposé",
+  "folderSelection.drop.invalidMessage": "Déposez un dossier pour démarrer une nouvelle instance.",
+
   "folderSelection.dialog.title": "Sélectionner l'espace de travail",
   "folderSelection.dialog.description": "Sélectionnez un espace de travail pour commencer à coder.",
 } as const

packages/ui/src/lib/i18n/messages/fr/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "Statut",
   "instanceShell.rightPanel.tabs.ariaLabel": "Onglets du panneau droit",
   "instanceShell.rightPanel.sections.sessionChanges": "Changements de session",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Fichiers modifiés dans la session actuelle. Affiche les ajouts et suppressions pour chaque fichier.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Feuille de route de l'agent pour cette session. Suit les tâches et leur statut d'achèvement.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en arrière-plan",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Processus longs démarrés par l'agent. Vous pouvez surveiller leur sortie, les arrêter ou les terminer.",
   "instanceShell.rightPanel.sections.mcp": "Serveurs MCP",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Serveurs du protocole Model Context Protocol qui étendent les capacités de l'agent avec des outils externes.",
   "instanceShell.rightPanel.sections.lsp": "Serveurs LSP",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Serveurs du protocole Language Server Protocol fournissant l'intelligence de code et les diagnostics.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins qui personnalisent le comportement de l'UI et du serveur, ajoutant des fonctionnalités au-delà de MCP et LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Sélectionnez une session pour voir les changements.",
   "instanceShell.sessionChanges.loading": "Récupération des changements...",

packages/ui/src/lib/i18n/messages/fr/messaging.ts

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Aller à la session",
   "messageBlock.tool.goToSession.title": "Aller à la session",
   "messageBlock.tool.goToSession.unavailableTitle": "Session pas encore disponible",
-  "messageBlock.tool.deletePart.label": "Supprimer",
+  "messageBlock.tool.deletePart.label": "Supprimer la partie",
   "messageBlock.tool.deletePart.deleting": "Suppression...",
   "messageBlock.tool.deletePart.title": "Supprimer cette sortie d'outil",
   "messageBlock.tool.deletePart.failed.title": "Échec de suppression",
@@ -71,17 +71,38 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Vous",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revenir",
-  "messageItem.actions.revertTitle": "Revenir à ce message",
+  "messageItem.actions.revertTitle": "Annuler les changements jusqu'ici (supprime les messages)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork depuis ce message",
   "messageItem.actions.copy": "Copier",
   "messageItem.actions.copyTitle": "Copier le message",
   "messageItem.actions.copied": "Copié !",
+  "messageItem.actions.deleteMessage": "Supprimer le message (sans annuler les changements)",
+  "messageItem.actions.deleteMessagesUpTo": "Supprimer les messages jusqu'ici (sans annuler les changements)",
+  "messageItem.actions.deletingMessage": "Suppression...",
+  "messageItem.actions.deleteMessageFailedTitle": "Échec de suppression",
+  "messageItem.actions.deleteMessageFailedMessage": "Impossible de supprimer le message",
+
+  "messageItem.selection.checkboxAriaLabel": "Sélectionner le message pour suppression",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Éléments sélectionnés ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Supprimer les éléments sélectionnés",
+  "messageSection.bulkDelete.selectAllTitle": "Tout sélectionner",
+  "messageSection.bulkDelete.moreOptionsTitle": "Plus d'options",
+  "messageSection.bulkDelete.selectionModeLabel": "Sélection",
+  "messageSection.bulkDelete.selectionModeAll": "Tous",
+  "messageSection.bulkDelete.selectionModeTools": "Outils uniquement",
+  "messageSection.bulkDelete.selectionHint.toggle": "Selectionner un element",
+  "messageSection.bulkDelete.selectionHint.range": "Selectionner une plage",
+  "messageSection.bulkDelete.selectionHint.clear": "Effacer la selection",
+  "messageSection.bulkDelete.cancelTitle": "Annuler la sélection",
+  "messageSection.bulkDelete.failedTitle": "Échec de suppression",
+  "messageSection.bulkDelete.failedMessage": "Impossible de supprimer les éléments sélectionnés",
   "messageItem.status.queued": "EN FILE",
   "messageItem.status.generating": "Génération...",
   "messageItem.status.sending": "Envoi...",
   "messageItem.status.failedToSend": "Échec de l'envoi du message",
-  "messagePart.actions.delete": "Supprimer",
+  "messagePart.actions.delete": "Supprimer la partie",
   "messagePart.actions.deleting": "Suppression...",
   "messagePart.actions.deleteTitle": "Supprimer cet élément",
   "messagePart.actions.deleteFailedTitle": "Échec de suppression",

packages/ui/src/lib/i18n/messages/fr/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "Échec de l'arrêt",
   "sessionView.alerts.revertFailed.message": "Impossible de revenir au message",
   "sessionView.alerts.revertFailed.title": "Échec du retour",
+  "sessionView.alerts.deleteUpToFailed.message": "Impossible de supprimer les messages",
+  "sessionView.alerts.deleteUpToFailed.title": "Échec de suppression",
   "sessionView.alerts.forkFailed.message": "Impossible de forker la session",
   "sessionView.alerts.forkFailed.title": "Échec du fork",
   "sessionView.attachments.expandPastedTextAriaLabel": "Développer le texte collé",

packages/ui/src/lib/i18n/messages/fr/settings.ts

@@ -55,4 +55,88 @@ export const settingsMessages = {
   "contextUsagePanel.labels.used": "Utilisé",
   "contextUsagePanel.labels.available": "Dispo",
   "contextUsagePanel.unavailable": "--",
+
+  "settings.title": "Settings",
+  "settings.navigationAriaLabel": "Settings sections",
+  "settings.close": "Close settings",
+  "settings.content.eyebrow": "Workspace preferences",
+  "settings.open.title": "Open settings",
+  "settings.open.ariaLabel": "Open settings",
+  "settings.nav.appearance": "Appearance",
+  "settings.nav.notifications": "Notifications",
+  "settings.nav.remote": "Remote Access",
+  "settings.nav.opencode": "OpenCode",
+  "settings.scope.device": "This device",
+  "settings.scope.server": "Server setting",
+  "settings.common.enabled": "Enabled",
+  "settings.common.disabled": "Desactive",
+  "settings.section.appearance.title": "Appearance",
+  "settings.section.appearance.subtitle": "Adjust how the app looks on this device.",
+  "settings.appearance.theme.title": "Theme",
+  "settings.appearance.theme.subtitle": "Choose the color mode used throughout the app.",
+  "settings.appearance.theme.option.system": "Match your operating system setting",
+  "settings.appearance.theme.option.light": "Use the light appearance",
+  "settings.appearance.theme.option.dark": "Use the dark appearance",
+  "settings.section.notifications.title": "Notifications",
+  "settings.section.notifications.subtitle": "Control OS-level notifications for session activity.",
+  "settings.notifications.permission.granted": "Granted",
+  "settings.notifications.permission.denied": "Denied",
+  "settings.notifications.permission.default": "Not granted",
+  "settings.notifications.permission.unsupported": "Unsupported",
+  "settings.notifications.messages.unsupportedEnvironment": "OS notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionDenied": "Notification permission denied. Enable notifications in your system or browser settings.",
+  "settings.notifications.messages.permissionNotGranted": "Notification permission not granted.",
+  "settings.notifications.messages.unsupportedGeneral": "Notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionGranted": "Permission granted. You can now enable notifications.",
+  "settings.notifications.messages.permissionRequestDenied": "Permission denied. You may need to enable notifications in your system or browser settings.",
+  "settings.notifications.sessionStatus.title": "Session status notifications",
+  "settings.notifications.sessionStatus.subtitle": "Receive alerts when sessions need your attention.",
+  "settings.notifications.enable.title": "Enable notifications",
+  "settings.notifications.enable.permission": "Permission: {permission}",
+  "settings.notifications.requestPermission.title": "Request permission",
+  "settings.notifications.requestPermission.subtitle": "Allow the app to send notifications on this device.",
+  "settings.notifications.requestPermission.action": "Request",
+  "settings.notifications.allowVisible.title": "Notify when the app is focused",
+  "settings.notifications.allowVisible.subtitle": "Keep alerts enabled even while this window is visible.",
+  "settings.notifications.unsupportedNote": "Notifications are not supported in this environment. The notifications control stays disabled.",
+  "settings.notifications.events.title": "Notify me when",
+  "settings.notifications.events.subtitle": "Choose which session events should send alerts.",
+  "settings.notifications.events.needsInput": "Session needs input",
+  "settings.notifications.events.idle": "Session becomes idle",
+  "settings.notifications.status.enabled": "Notifications enabled",
+  "settings.notifications.status.disabled": "Notifications disabled",
+  "settings.notifications.status.unsupported": "Notifications unsupported",
+  "settings.section.remote.title": "Remote Access",
+  "settings.section.remote.subtitle": "Review how this server is exposed on your network and secure access credentials.",
+  "settings.section.opencode.title": "OpenCode",
+  "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
+  "settings.opencode.runtime.title": "Runtime",
+  "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+
+  "settings.appearance.behavior.title": "Interaction",
+  "settings.appearance.behavior.subtitle": "Parametres par defaut pour les messages, les diffs et la saisie.",
+  "settings.behavior.keyboardHints.title": "Indications de raccourcis clavier",
+  "settings.behavior.keyboardHints.subtitle": "Afficher des indications de raccourcis clavier dans toute l'interface.",
+  "settings.behavior.thinking.title": "Sections de reflexion",
+  "settings.behavior.thinking.subtitle": "Afficher ou masquer les sections de reflexion de l'IA dans les messages.",
+  "settings.behavior.thinkingDefault.title": "Etat initial de la reflexion",
+  "settings.behavior.thinkingDefault.subtitle": "Choisir si les sections de reflexion commencent developpees ou reduites.",
+  "settings.behavior.timelineTools.title": "Appels d'outils dans la chronologie",
+  "settings.behavior.timelineTools.subtitle": "Afficher ou masquer les entrees d'appels d'outils dans la chronologie des messages.",
+  "settings.behavior.diffView.title": "Vue du diff",
+  "settings.behavior.diffView.subtitle": "Choisir comment les diffs des appels d'outils sont affiches.",
+  "settings.behavior.diffView.option.split": "Scinde",
+  "settings.behavior.diffView.option.unified": "Unifie",
+  "settings.behavior.toolOutputsDefault.title": "Etat initial des sorties d'outils",
+  "settings.behavior.toolOutputsDefault.subtitle": "Choisir si les sorties d'outils commencent developpees ou reduites.",
+  "settings.behavior.diagnosticsDefault.title": "Etat initial des diagnostics",
+  "settings.behavior.diagnosticsDefault.subtitle": "Choisir si la sortie des diagnostics commence developpee ou reduite.",
+  "settings.behavior.toolInputsVisibility.title": "Visibilite des entrees d'outils",
+  "settings.behavior.toolInputsVisibility.subtitle": "Definir la visibilite par defaut des arguments d'entree des appels d'outils.",
+  "settings.behavior.usageMetrics.title": "Metriques d'utilisation des tokens",
+  "settings.behavior.usageMetrics.subtitle": "Afficher ou masquer les stats de tokens et de cout pour les messages de l'assistant.",
+  "settings.behavior.autoCleanup.title": "Nettoyage auto des sessions vides",
+  "settings.behavior.autoCleanup.subtitle": "Nettoyer automatiquement les sessions vides lors de la creation de nouvelles.",
+  "settings.behavior.promptSubmit.title": "Entrer pour envoyer",
+  "settings.behavior.promptSubmit.subtitle": "Utiliser Entrer pour envoyer; Cmd/Ctrl+Entrer insere une nouvelle ligne.",
 } as const

packages/ui/src/lib/i18n/messages/fr/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Mode d'affichage du diff",

packages/ui/src/lib/i18n/messages/ja/app.ts

@@ -1,9 +1,9 @@
 export const appMessages = {
   "app.launchError.title": "OpenCode を起動できません",
-  "app.launchError.description": "選択された OpenCode バイナリを起動できませんでした。下のエラー出力を確認するか、詳細設定から別のバイナリを選択してください。",
+  "app.launchError.description": "選択された OpenCode バイナリを起動できませんでした。下のエラー出力を確認するか、OpenCode 設定から別のバイナリを選択してください。",
   "app.launchError.binaryPathLabel": "バイナリのパス",
   "app.launchError.errorOutputLabel": "エラー出力",
-  "app.launchError.openAdvancedSettings": "詳細設定を開く",
+  "app.launchError.openAdvancedSettings": "OpenCode 設定を開く",
   "app.launchError.close": "閉じる",
   "app.launchError.closeTitle": "閉じる (Esc)",
   "app.launchError.fallbackMessage": "ワークスペースの起動に失敗しました",

packages/ui/src/lib/i18n/messages/ja/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "診断出力を既定で展開するか切り替え",
   "commands.diagnosticsDefault.keywords": "診断, 展開, 折りたたみ, diagnostics, expand, collapse",
 
+  "commands.toolInputsVisibility.label": "ツール入力の表示 · {state}",
+  "commands.toolInputsVisibility.description": "ツール呼び出しの入力引数の既定の表示状態を設定します",
+  "commands.toolInputsVisibility.keywords": "ツール, 入力, 引数, 表示, 非表示, 展開, 折りたたみ, tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "トークン使用量表示 · {state}",
   "commands.tokenUsageDisplay.description": "アシスタントメッセージのトークン/コスト統計を表示/非表示",
   "commands.tokenUsageDisplay.keywords": "トークン, 使用量, コスト, 統計, token, usage, cost, stats",

packages/ui/src/lib/i18n/messages/ja/folderSelection.ts

@@ -22,6 +22,7 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "開いています...",
 
   "folderSelection.advancedSettings": "詳細設定",
+  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "移動",
   "folderSelection.hints.select": "選択",
@@ -31,6 +32,11 @@ export const folderSelectionMessages = {
   "folderSelection.loading.title": "インスタンスを起動中...",
   "folderSelection.loading.subtitle": "ワークスペースを準備しています。しばらくお待ちください。",
 
+  "folderSelection.drop.title": "フォルダをドロップして開く",
+  "folderSelection.drop.subtitle": "ドロップしたフォルダで新しいインスタンスを開始します。",
+  "folderSelection.drop.invalidTitle": "ドロップした項目を開けませんでした",
+  "folderSelection.drop.invalidMessage": "新しいインスタンスを開始するにはフォルダをドロップしてください。",
+
   "folderSelection.dialog.title": "ワークスペースを選択",
   "folderSelection.dialog.description": "コーディングを開始するワークスペースを選択してください。",
 } as const

packages/ui/src/lib/i18n/messages/ja/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "ステータス",
   "instanceShell.rightPanel.tabs.ariaLabel": "右パネルのタブ",
   "instanceShell.rightPanel.sections.sessionChanges": "セッション変更",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "現在のセッションで変更されたファイル。各ファイルの追加と削除を表示します。",
   "instanceShell.rightPanel.sections.plan": "計画",
+  "instanceShell.rightPanel.sections.plan.tooltip": "このセッションにおけるエージェントのロードマップ。タスクやサブタスク、および完了状況を追跡します。",
   "instanceShell.rightPanel.sections.backgroundProcesses": "バックグラウンドシェル",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "エージェントが開始した長時間実行プロセス。出力を監視し、停止または終了できます。",
   "instanceShell.rightPanel.sections.mcp": "MCP サーバー",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol (MCP) サーバー。外部ツールやサービスでエージェントの機能を拡張します。",
   "instanceShell.rightPanel.sections.lsp": "LSP サーバー",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocolサーバーがコードインテリジェンス、診断、言語固有の機能を提供します。",
   "instanceShell.rightPanel.sections.plugins": "プラグイン",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "UI とサーバーの動作をカスタマイズし、MCP や LSP 以外の機能も追加できるプラグイン。",
 
   "instanceShell.sessionChanges.noSessionSelected": "変更を表示するにはセッションを選択してください。",
   "instanceShell.sessionChanges.loading": "変更を取得中...",

packages/ui/src/lib/i18n/messages/ja/messaging.ts

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "セッションへ移動",
   "messageBlock.tool.goToSession.title": "セッションへ移動",
   "messageBlock.tool.goToSession.unavailableTitle": "セッションはまだ利用できません",
-  "messageBlock.tool.deletePart.label": "削除",
+  "messageBlock.tool.deletePart.label": "パートを削除",
   "messageBlock.tool.deletePart.deleting": "削除中...",
   "messageBlock.tool.deletePart.title": "このツール出力を削除",
   "messageBlock.tool.deletePart.failed.title": "削除に失敗しました",
@@ -71,17 +71,38 @@ export const messagingMessages = {
   "messageItem.speaker.you": "あなた",
   "messageItem.speaker.assistant": "アシスタント",
   "messageItem.actions.revert": "戻す",
-  "messageItem.actions.revertTitle": "このメッセージまで戻す",
+  "messageItem.actions.revertTitle": "ここまでの変更を元に戻す（メッセージを削除）",
   "messageItem.actions.fork": "フォーク",
   "messageItem.actions.forkTitle": "このメッセージからフォーク",
   "messageItem.actions.copy": "コピー",
   "messageItem.actions.copyTitle": "メッセージをコピー",
   "messageItem.actions.copied": "コピーしました!",
+  "messageItem.actions.deleteMessage": "メッセージを削除（変更は元に戻さない）",
+  "messageItem.actions.deleteMessagesUpTo": "ここまでのメッセージを削除（変更は元に戻さない）",
+  "messageItem.actions.deletingMessage": "削除中...",
+  "messageItem.actions.deleteMessageFailedTitle": "削除に失敗しました",
+  "messageItem.actions.deleteMessageFailedMessage": "メッセージの削除に失敗しました",
+
+  "messageItem.selection.checkboxAriaLabel": "削除するメッセージを選択",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "選択した項目（{count}）",
+  "messageSection.bulkDelete.deleteSelectedTitle": "選択した項目を削除",
+  "messageSection.bulkDelete.selectAllTitle": "すべて選択",
+  "messageSection.bulkDelete.moreOptionsTitle": "その他のオプション",
+  "messageSection.bulkDelete.selectionModeLabel": "選択",
+  "messageSection.bulkDelete.selectionModeAll": "すべて",
+  "messageSection.bulkDelete.selectionModeTools": "ツールのみ",
+  "messageSection.bulkDelete.selectionHint.toggle": "項目を選択",
+  "messageSection.bulkDelete.selectionHint.range": "範囲を選択",
+  "messageSection.bulkDelete.selectionHint.clear": "選択を解除",
+  "messageSection.bulkDelete.cancelTitle": "選択をキャンセル",
+  "messageSection.bulkDelete.failedTitle": "削除に失敗しました",
+  "messageSection.bulkDelete.failedMessage": "選択した項目の削除に失敗しました",
   "messageItem.status.queued": "待機中",
   "messageItem.status.generating": "生成中...",
   "messageItem.status.sending": "送信中...",
   "messageItem.status.failedToSend": "メッセージの送信に失敗しました",
-  "messagePart.actions.delete": "削除",
+  "messagePart.actions.delete": "パートを削除",
   "messagePart.actions.deleting": "削除中...",
   "messagePart.actions.deleteTitle": "この項目を削除",
   "messagePart.actions.deleteFailedTitle": "削除に失敗しました",

packages/ui/src/lib/i18n/messages/ja/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "停止に失敗",
   "sessionView.alerts.revertFailed.message": "メッセージへ戻せませんでした",
   "sessionView.alerts.revertFailed.title": "復元に失敗",
+  "sessionView.alerts.deleteUpToFailed.message": "メッセージの削除に失敗しました",
+  "sessionView.alerts.deleteUpToFailed.title": "削除に失敗しました",
   "sessionView.alerts.forkFailed.message": "セッションのフォークに失敗しました",
   "sessionView.alerts.forkFailed.title": "フォークに失敗",
   "sessionView.attachments.expandPastedTextAriaLabel": "貼り付けたテキストを展開",

packages/ui/src/lib/i18n/messages/ja/settings.ts

@@ -55,4 +55,88 @@ export const settingsMessages = {
   "contextUsagePanel.labels.used": "使用",
   "contextUsagePanel.labels.available": "残り",
   "contextUsagePanel.unavailable": "--",
+
+  "settings.title": "Settings",
+  "settings.navigationAriaLabel": "Settings sections",
+  "settings.close": "Close settings",
+  "settings.content.eyebrow": "Workspace preferences",
+  "settings.open.title": "Open settings",
+  "settings.open.ariaLabel": "Open settings",
+  "settings.nav.appearance": "Appearance",
+  "settings.nav.notifications": "Notifications",
+  "settings.nav.remote": "Remote Access",
+  "settings.nav.opencode": "OpenCode",
+  "settings.scope.device": "This device",
+  "settings.scope.server": "Server setting",
+  "settings.common.enabled": "Enabled",
+  "settings.common.disabled": "無効",
+  "settings.section.appearance.title": "Appearance",
+  "settings.section.appearance.subtitle": "Adjust how the app looks on this device.",
+  "settings.appearance.theme.title": "Theme",
+  "settings.appearance.theme.subtitle": "Choose the color mode used throughout the app.",
+  "settings.appearance.theme.option.system": "Match your operating system setting",
+  "settings.appearance.theme.option.light": "Use the light appearance",
+  "settings.appearance.theme.option.dark": "Use the dark appearance",
+  "settings.section.notifications.title": "Notifications",
+  "settings.section.notifications.subtitle": "Control OS-level notifications for session activity.",
+  "settings.notifications.permission.granted": "Granted",
+  "settings.notifications.permission.denied": "Denied",
+  "settings.notifications.permission.default": "Not granted",
+  "settings.notifications.permission.unsupported": "Unsupported",
+  "settings.notifications.messages.unsupportedEnvironment": "OS notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionDenied": "Notification permission denied. Enable notifications in your system or browser settings.",
+  "settings.notifications.messages.permissionNotGranted": "Notification permission not granted.",
+  "settings.notifications.messages.unsupportedGeneral": "Notifications are not supported in this environment.",
+  "settings.notifications.messages.permissionGranted": "Permission granted. You can now enable notifications.",
+  "settings.notifications.messages.permissionRequestDenied": "Permission denied. You may need to enable notifications in your system or browser settings.",
+  "settings.notifications.sessionStatus.title": "Session status notifications",
+  "settings.notifications.sessionStatus.subtitle": "Receive alerts when sessions need your attention.",
+  "settings.notifications.enable.title": "Enable notifications",
+  "settings.notifications.enable.permission": "Permission: {permission}",
+  "settings.notifications.requestPermission.title": "Request permission",
+  "settings.notifications.requestPermission.subtitle": "Allow the app to send notifications on this device.",
+  "settings.notifications.requestPermission.action": "Request",
+  "settings.notifications.allowVisible.title": "Notify when the app is focused",
+  "settings.notifications.allowVisible.subtitle": "Keep alerts enabled even while this window is visible.",
+  "settings.notifications.unsupportedNote": "Notifications are not supported in this environment. The notifications control stays disabled.",
+  "settings.notifications.events.title": "Notify me when",
+  "settings.notifications.events.subtitle": "Choose which session events should send alerts.",
+  "settings.notifications.events.needsInput": "Session needs input",
+  "settings.notifications.events.idle": "Session becomes idle",
+  "settings.notifications.status.enabled": "Notifications enabled",
+  "settings.notifications.status.disabled": "Notifications disabled",
+  "settings.notifications.status.unsupported": "Notifications unsupported",
+  "settings.section.remote.title": "Remote Access",
+  "settings.section.remote.subtitle": "Review how this server is exposed on your network and secure access credentials.",
+  "settings.section.opencode.title": "OpenCode",
+  "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
+  "settings.opencode.runtime.title": "Runtime",
+  "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+
+  "settings.appearance.behavior.title": "操作",
+  "settings.appearance.behavior.subtitle": "メッセージ、差分、入力の既定値。",
+  "settings.behavior.keyboardHints.title": "キーボードショートカットのヒント",
+  "settings.behavior.keyboardHints.subtitle": "UI全体でキーボードショートカットのヒントを表示します。",
+  "settings.behavior.thinking.title": "思考セクション",
+  "settings.behavior.thinking.subtitle": "メッセージ内のAIの思考セクションを表示/非表示にします。",
+  "settings.behavior.thinkingDefault.title": "思考の既定",
+  "settings.behavior.thinkingDefault.subtitle": "思考セクションを最初に展開/折りたたみのどちらで表示するかを選びます。",
+  "settings.behavior.timelineTools.title": "タイムラインのツール呼び出し",
+  "settings.behavior.timelineTools.subtitle": "メッセージタイムラインでツール呼び出しを表示/非表示にします。",
+  "settings.behavior.diffView.title": "差分表示",
+  "settings.behavior.diffView.subtitle": "ツール呼び出しの差分の表示方法を選びます。",
+  "settings.behavior.diffView.option.split": "分割",
+  "settings.behavior.diffView.option.unified": "統合",
+  "settings.behavior.toolOutputsDefault.title": "ツール出力の既定",
+  "settings.behavior.toolOutputsDefault.subtitle": "ツール出力を最初に展開/折りたたみのどちらで表示するかを選びます。",
+  "settings.behavior.diagnosticsDefault.title": "診断の既定",
+  "settings.behavior.diagnosticsDefault.subtitle": "診断出力を最初に展開/折りたたみのどちらで表示するかを選びます。",
+  "settings.behavior.toolInputsVisibility.title": "ツール入力の表示",
+  "settings.behavior.toolInputsVisibility.subtitle": "ツール呼び出しの入力引数の既定の表示状態を設定します。",
+  "settings.behavior.usageMetrics.title": "トークン使用量メトリクス",
+  "settings.behavior.usageMetrics.subtitle": "アシスタントのメッセージにトークン数とコストの統計を表示/非表示にします。",
+  "settings.behavior.autoCleanup.title": "空のセッションを自動クリーンアップ",
+  "settings.behavior.autoCleanup.subtitle": "新しいセッション作成時に空のセッションを自動的にクリーンアップします。",
+  "settings.behavior.promptSubmit.title": "Enterで送信",
+  "settings.behavior.promptSubmit.subtitle": "Enterで送信し、Cmd/Ctrl+Enterで改行します。",
 } as const

packages/ui/src/lib/i18n/messages/ja/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "diff 表示モード",

packages/ui/src/lib/i18n/messages/ru/app.ts

@@ -1,9 +1,9 @@
 export const appMessages = {
   "app.launchError.title": "Не удалось запустить OpenCode",
-  "app.launchError.description": "Не удалось запустить выбранный бинарник OpenCode. Просмотрите вывод ошибки ниже или выберите другой бинарник в расширенных настройках.",
+  "app.launchError.description": "Не удалось запустить выбранный бинарник OpenCode. Просмотрите вывод ошибки ниже или выберите другой бинарник в настройках OpenCode.",
   "app.launchError.binaryPathLabel": "Путь к бинарнику",
   "app.launchError.errorOutputLabel": "Вывод ошибки",
-  "app.launchError.openAdvancedSettings": "Открыть расширенные настройки",
+  "app.launchError.openAdvancedSettings": "Открыть настройки OpenCode",
   "app.launchError.close": "Закрыть",
   "app.launchError.closeTitle": "Закрыть (Esc)",
   "app.launchError.fallbackMessage": "Не удалось запустить рабочее пространство",

packages/ui/src/lib/i18n/messages/ru/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Переключить, разворачивать ли вывод диагностики по умолчанию",
   "commands.diagnosticsDefault.keywords": "diagnostics, развернуть, свернуть",
 
+  "commands.toolInputsVisibility.label": "Видимость входных данных инструмента · {state}",
+  "commands.toolInputsVisibility.description": "Установить видимость аргументов входа вызовов инструментов по умолчанию",
+  "commands.toolInputsVisibility.keywords": "инструмент, вход, аргументы, видимость, скрыть, показать, раскрыть, свернуть, tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "Отображение token-статистики · {state}",
   "commands.tokenUsageDisplay.description": "Показать или скрыть статистику token и стоимости для сообщений ассистента",
   "commands.tokenUsageDisplay.keywords": "token, usage, cost, статистика",

packages/ui/src/lib/i18n/messages/ru/folderSelection.ts

@@ -22,6 +22,7 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "Открытие…",
 
   "folderSelection.advancedSettings": "Расширенные настройки",
+  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "Навигация",
   "folderSelection.hints.select": "Выбрать",
@@ -31,6 +32,11 @@ export const folderSelectionMessages = {
   "folderSelection.loading.title": "Запуск экземпляра…",
   "folderSelection.loading.subtitle": "Подождите, пока мы подготовим рабочее пространство.",
 
+  "folderSelection.drop.title": "Перетащите папку, чтобы открыть ее",
+  "folderSelection.drop.subtitle": "Запустите новый экземпляр в перетащенной папке.",
+  "folderSelection.drop.invalidTitle": "Не удалось открыть перетащенный элемент",
+  "folderSelection.drop.invalidMessage": "Перетащите папку, чтобы запустить новый экземпляр.",
+
   "folderSelection.dialog.title": "Выберите рабочее пространство",
   "folderSelection.dialog.description": "Выберите рабочее пространство, чтобы начать писать код.",
 } as const

packages/ui/src/lib/i18n/messages/ru/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "Статус",
   "instanceShell.rightPanel.tabs.ariaLabel": "Вкладки правой панели",
   "instanceShell.rightPanel.sections.sessionChanges": "Изменения сессии",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Файлы, измененные в текущей сессии. Показывает добавления и удаления для каждого файла.",
   "instanceShell.rightPanel.sections.plan": "План",
-  "instanceShell.rightPanel.sections.backgroundProcesses": "Фоновые Shell",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Дорожная карта агента для этой сессии. Отслеживает задачи и их статус выполнения.",
+  "instanceShell.rightPanel.sections.backgroundProcesses": "Фоновые оболочки",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Долгоработающие процессы, запущенные агентом. Вы можете следить за их выводом, останавливать или завершать их.",
   "instanceShell.rightPanel.sections.mcp": "MCP-серверы",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Серверы протокола Model Context Protocol, расширяющие возможности агента внешними инструментами.",
   "instanceShell.rightPanel.sections.lsp": "LSP-серверы",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Серверы протокола Language Server Protocol, обеспечивающие интеллектуальную поддержку кода и диагностику.",
   "instanceShell.rightPanel.sections.plugins": "Плагины",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Плагины, настраивающие поведение интерфейса и сервера, добавляющие функции поверх MCP и LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Выберите сессию, чтобы просмотреть изменения.",
   "instanceShell.sessionChanges.loading": "Загрузка изменений...",
@@ -128,7 +134,7 @@ export const instanceMessages = {
   "versionPill.uiWithVersion": "UI {version}",
   "versionPill.source": " ({source})",
 
-  "opencodeBinarySelector.title": "OpenCode Binary",
+  "opencodeBinarySelector.title": "Бинарник OpenCode",
   "opencodeBinarySelector.subtitle": "Выберите, какой исполняемый файл OpenCode запускать",
   "opencodeBinarySelector.customPath.placeholder": "Введите путь к бинарнику opencode…",
   "opencodeBinarySelector.actions.add": "Добавить",

packages/ui/src/lib/i18n/messages/ru/messaging.ts

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Перейти к сессии",
   "messageBlock.tool.goToSession.title": "Перейти к сессии",
   "messageBlock.tool.goToSession.unavailableTitle": "Сессия пока недоступна",
-  "messageBlock.tool.deletePart.label": "Удалить",
+  "messageBlock.tool.deletePart.label": "Удалить часть",
   "messageBlock.tool.deletePart.deleting": "Удаление...",
   "messageBlock.tool.deletePart.title": "Удалить этот вывод инструмента",
   "messageBlock.tool.deletePart.failed.title": "Ошибка удаления",
@@ -71,17 +71,38 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Вы",
   "messageItem.speaker.assistant": "Ассистент",
   "messageItem.actions.revert": "Откатить",
-  "messageItem.actions.revertTitle": "Откатиться к этому сообщению",
+  "messageItem.actions.revertTitle": "Отменить изменения до этого места (удалит сообщения)",
   "messageItem.actions.fork": "Форк",
   "messageItem.actions.forkTitle": "Форкнуть от этого сообщения",
   "messageItem.actions.copy": "Копировать",
   "messageItem.actions.copyTitle": "Копировать сообщение",
   "messageItem.actions.copied": "Скопировано!",
+  "messageItem.actions.deleteMessage": "Удалить сообщение (без отката изменений)",
+  "messageItem.actions.deleteMessagesUpTo": "Удалить сообщения до этого места (без отката изменений)",
+  "messageItem.actions.deletingMessage": "Удаление...",
+  "messageItem.actions.deleteMessageFailedTitle": "Ошибка удаления",
+  "messageItem.actions.deleteMessageFailedMessage": "Не удалось удалить сообщение",
+
+  "messageItem.selection.checkboxAriaLabel": "Выбрать сообщение для удаления",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Выбранные элементы ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Удалить выбранные элементы",
+  "messageSection.bulkDelete.selectAllTitle": "Выбрать все сообщения",
+  "messageSection.bulkDelete.moreOptionsTitle": "Больше настроек",
+  "messageSection.bulkDelete.selectionModeLabel": "Выбор",
+  "messageSection.bulkDelete.selectionModeAll": "Все",
+  "messageSection.bulkDelete.selectionModeTools": "Только инструменты",
+  "messageSection.bulkDelete.selectionHint.toggle": "Выбрать элемент",
+  "messageSection.bulkDelete.selectionHint.range": "Выбрать диапазон",
+  "messageSection.bulkDelete.selectionHint.clear": "Очистить выбор",
+  "messageSection.bulkDelete.cancelTitle": "Отменить выбор",
+  "messageSection.bulkDelete.failedTitle": "Ошибка удаления",
+  "messageSection.bulkDelete.failedMessage": "Не удалось удалить выбранные элементы",
   "messageItem.status.queued": "В ОЧЕРЕДИ",
   "messageItem.status.generating": "Генерация…",
   "messageItem.status.sending": "Отправка…",
   "messageItem.status.failedToSend": "Не удалось отправить сообщение",
-  "messagePart.actions.delete": "Удалить",
+  "messagePart.actions.delete": "Удалить часть",
   "messagePart.actions.deleting": "Удаление...",
   "messagePart.actions.deleteTitle": "Удалить этот элемент",
   "messagePart.actions.deleteFailedTitle": "Ошибка удаления",