refactor(tauri): use imported event and dialog APIs

Restrict non-dev pull requests to an allowlisted set of actors and skip cross-platform PR builds unless that authorization check passes. Keep dev open for general contributions while guiding other PRs back to the dev branch.

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

@@ -61,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
@@ -72,6 +86,37 @@ 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: |
@@ -84,9 +129,12 @@ jobs:
           fi
 
           release_root="packages/electron-app/release"
-          shopt -s nullglob globstar
-
-          apps=("$release_root"/**/CodeNomad.app)
+          # 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

.github/workflows/pr-build.yml

@@ -0,0 +1,52 @@
+name: PR Build Validation
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+
+permissions:
+  contents: read
+
+concurrency:
+  group: pr-build-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  authorize:
+    runs-on: ubuntu-latest
+    outputs:
+      allowed: ${{ steps.auth.outputs.allowed }}
+    env:
+      ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
+      ACTOR: ${{ github.actor }}
+      BASE_REF: ${{ github.event.pull_request.base.ref }}
+    steps:
+      - name: Check PR authorization
+        id: auth
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [ "$BASE_REF" = "dev" ]; then
+            echo "allowed=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          normalized=",${ALLOWED_ACTORS},"
+          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+            echo "allowed=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "allowed=false" >> "$GITHUB_OUTPUT"
+            echo "Skipping builds for unauthorized PR targeting $BASE_REF" >&2
+          fi
+
+  build:
+    needs: authorize
+    if: ${{ needs.authorize.outputs.allowed == 'true' }}
+    uses: ./.github/workflows/build-and-upload.yml
+    with:
+      ref: ${{ github.event.pull_request.head.sha }}
+      upload: false
+      set_versions: false

.github/workflows/restrict-non-dev-prs.yml

@@ -0,0 +1,54 @@
+name: Restrict Non-Dev PRs
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  restrict-non-dev-prs:
+    if: ${{ github.event.pull_request.base.ref != 'dev' }}
+    runs-on: ubuntu-latest
+    env:
+      ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
+      ACTOR: ${{ github.actor }}
+      PR_NUMBER: ${{ github.event.pull_request.number }}
+      BASE_REF: ${{ github.event.pull_request.base.ref }}
+    steps:
+      - name: Check allowed actor
+        id: auth
+        shell: bash
+        run: |
+          set -euo pipefail
+          normalized=",${ALLOWED_ACTORS},"
+          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+            echo "authorized=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "authorized=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Comment on unauthorized PR
+        if: ${{ steps.auth.outputs.authorized != 'true' }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment "$PR_NUMBER" --body "Thanks for the contribution. PRs need to target \`dev\` branch. Please retarget this PR to the dev branch"
+
+      - name: Close unauthorized PR
+        if: ${{ steps.auth.outputs.authorized != 'true' }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr close "$PR_NUMBER"
+
+      - name: Fail unauthorized PR
+        if: ${{ steps.auth.outputs.authorized != 'true' }}
+        run: |
+          echo "Actor $ACTOR is not allowed to open PRs targeting $BASE_REF" >&2
+          exit 1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.4",
+  "version": "0.12.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.11.4",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -3253,9 +3253,9 @@
       }
     },
     "node_modules/@tauri-apps/api": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.9.1.tgz",
-      "integrity": "sha512-IGlhP6EivjXHepbBic618GOmiWe4URJiIeZFlB7x3czM0yDHHYviH1Xvoiv4FefdkQtn6v7TuwWCRfOGdnVUGw==",
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.10.1.tgz",
+      "integrity": "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw==",
       "license": "Apache-2.0 OR MIT",
       "funding": {
         "type": "opencollective",
@@ -3305,6 +3305,32 @@
         "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-dialog": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-dialog/-/plugin-dialog-2.6.0.tgz",
+      "integrity": "sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.8.0"
+      }
+    },
     "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",
@@ -10218,14 +10244,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/tauri-plugin-keepawake-api": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/tauri-plugin-keepawake-api/-/tauri-plugin-keepawake-api-0.1.0.tgz",
-      "integrity": "sha512-XPUl66zUYiB7kCRxsTdmCoNjFM/++NWCJ4kdTo2NUOgBUa8UVYfayDWnnTzGIQbhT7qNAHs+jgKSjhqSKs/QHA==",
-      "dependencies": {
-        "@tauri-apps/api": ">=2.0.0-beta.6"
-      }
-    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -11985,7 +12003,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.11.4",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -11995,6 +12013,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 +12040,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.4",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12062,7 +12081,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.11.4",
+      "version": "0.12.3",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12070,7 +12089,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.11.4",
+      "version": "0.12.3",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
@@ -12080,6 +12099,8 @@
         "@suid/icons-material": "^0.9.0",
         "@suid/material": "^0.19.0",
         "@suid/system": "^0.14.0",
+        "@tauri-apps/api": "^2.10.1",
+        "@tauri-apps/plugin-dialog": "^2.6.0",
         "@tauri-apps/plugin-notification": "^2.3.3",
         "@tauri-apps/plugin-opener": "^2.5.3",
         "ansi-sequence-parser": "^1.1.3",
@@ -12092,7 +12113,6 @@
         "shiki": "^3.13.0",
         "solid-js": "^1.8.0",
         "solid-toast": "^0.5.0",
-        "tauri-plugin-keepawake-api": "^0.1.0",
         "yaml": "^2.4.2"
       },
       "devDependencies": {

package.json

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

packages/cloudflare/release-config.json

@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.11.4",
+  "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.4",
+  "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.10"
+    "@opencode-ai/plugin": "1.2.25"
   }
 }

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.4",
+  "version": "0.12.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.4",
+      "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.4",
+  "version": "0.12.3",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {

packages/tauri-app/package.json

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

packages/tauri-app/scripts/prebuild.js

@@ -20,6 +20,7 @@ const serverDevInstallCommand =
   "npm install --workspace @neuralnomads/codenomad --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
 const uiDevInstallCommand =
   "npm install --workspace @codenomad/ui --include-workspace-root=false --install-strategy=nested --fund=false --audit=false"
+const serverPrepareUiCommand = "npm run prepare-ui --workspace @neuralnomads/codenomad"
 
 const envWithRootBin = {
   ...process.env,
@@ -91,6 +92,15 @@ function ensureUiBuild() {
   }
 }
 
+function syncServerUiBundle() {
+  console.log("[prebuild] syncing server public UI bundle...")
+  execSync(serverPrepareUiCommand, {
+    cwd: workspaceRoot,
+    stdio: "inherit",
+    env: envWithRootBin,
+  })
+}
+
 function ensureServerDevDependencies() {
   if (fs.existsSync(braceExpansionPath)) {
     return
@@ -246,6 +256,7 @@ function copyUiLoadingAssets() {
   ensureServerDependencies()
   ensureServerBuild()
   ensureUiBuild()
+  syncServerUiBundle()
   copyServerArtifacts()
   stripNodeModuleBins()
   copyUiLoadingAssets()

packages/tauri-app/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "codenomad-tauri"
-version = "0.1.0"
+version = "0.12.3"
 edition = "2021"
 license = "MIT"
 
@@ -19,9 +19,12 @@ thiserror = "1"
 anyhow = "1"
 which = "4"
 libc = "0.2"
+keepawake = "0.6"
 tauri-plugin-dialog = "2"
 dirs = "5"
 tauri-plugin-opener = "2"
 url = "2"
-tauri-plugin-keepawake = "0.1.1"
 tauri-plugin-notification = "2"
+
+[target.'cfg(windows)'.dependencies]
+windows-sys = { version = "0.59", features = ["Win32_UI_Shell"] }

packages/tauri-app/src-tauri/gen/schemas/desktop-schema.json

@@ -2378,36 +2378,6 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
-        {
-          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`",
-          "type": "string",
-          "const": "keepawake:default",
-          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`"
-        },
-        {
-          "description": "Enables the start command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:allow-start",
-          "markdownDescription": "Enables the start command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the stop command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:allow-stop",
-          "markdownDescription": "Enables the stop command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the start command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:deny-start",
-          "markdownDescription": "Denies the start command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the stop command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:deny-stop",
-          "markdownDescription": "Denies the stop command without any pre-configured scope."
-        },
         {
           "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
           "type": "string",

packages/tauri-app/src-tauri/gen/schemas/macOS-schema.json

@@ -2378,36 +2378,6 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
-        {
-          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`",
-          "type": "string",
-          "const": "keepawake:default",
-          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`"
-        },
-        {
-          "description": "Enables the start command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:allow-start",
-          "markdownDescription": "Enables the start command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the stop command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:allow-stop",
-          "markdownDescription": "Enables the stop command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the start command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:deny-start",
-          "markdownDescription": "Denies the start command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the stop command without any pre-configured scope.",
-          "type": "string",
-          "const": "keepawake:deny-stop",
-          "markdownDescription": "Denies the stop command without any pre-configured scope."
-        },
         {
           "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
           "type": "string",

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

@@ -9,6 +9,8 @@ use std::ffi::OsStr;
 use std::fs;
 use std::io::{BufRead, BufReader, Read, Write};
 use std::net::TcpStream;
+#[cfg(unix)]
+use std::os::unix::process::CommandExt;
 use std::path::PathBuf;
 use std::process::{Child, Command, Stdio};
 use std::sync::atomic::{AtomicBool, Ordering};
@@ -17,10 +19,24 @@ use std::thread;
 use std::time::{Duration, Instant};
 use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};
 
+#[cfg(windows)]
+use std::os::windows::process::CommandExt;
+
+#[cfg(windows)]
+const CREATE_NO_WINDOW: u32 = 0x08000000;
+
 fn log_line(message: &str) {
     println!("[tauri-cli] {message}");
 }
 
+#[cfg(windows)]
+fn configure_spawn(command: &mut Command) {
+    command.creation_flags(CREATE_NO_WINDOW);
+}
+
+#[cfg(not(windows))]
+fn configure_spawn(_command: &mut Command) {}
+
 fn workspace_root() -> Option<PathBuf> {
     std::env::current_dir().ok().and_then(|mut dir| {
         for _ in 0..3 {
@@ -36,6 +52,46 @@ const SESSION_COOKIE_NAME: &str = "codenomad_session";
 
 const CLI_STOP_GRACE_SECS: u64 = 30;
 
+#[cfg(unix)]
+fn configure_posix_process_group(command: &mut Command) {
+    // Ensure the CLI runs in its own process group so we can terminate wrapper
+    // processes (login shell/tsx) without leaving the server orphaned.
+    unsafe {
+        command.pre_exec(|| {
+            if libc::setpgid(0, 0) != 0 {
+                return Err(std::io::Error::last_os_error());
+            }
+            Ok(())
+        });
+    }
+}
+
+#[cfg(windows)]
+fn kill_process_tree_windows(pid: u32, force: bool) -> bool {
+    let mut args = vec!["/PID".to_string(), pid.to_string(), "/T".to_string()];
+    if force {
+        args.push("/F".to_string());
+    }
+
+    let mut command = Command::new("taskkill");
+    command.args(&args);
+    configure_spawn(&mut command);
+
+    match command.output() {
+        Ok(output) => {
+            if output.status.success() {
+                return true;
+            }
+
+            // If the PID is already gone, treat it as success.
+            let stdout = String::from_utf8_lossy(&output.stdout).to_lowercase();
+            let stderr = String::from_utf8_lossy(&output.stderr).to_lowercase();
+            let combined = format!("{stdout}\n{stderr}");
+            combined.contains("not found") || combined.contains("no running instance")
+        }
+        Err(_) => false,
+    }
+}
 fn navigate_main(app: &AppHandle, url: &str) {
     if let Some(win) = app.webview_windows().get("main") {
         let mut display = url.to_string();
@@ -348,11 +404,19 @@ impl CliProcessManager {
             log_line(&format!("stopping CLI pid={}", child.id()));
             #[cfg(unix)]
             unsafe {
-                libc::kill(child.id() as i32, libc::SIGTERM);
+                let pid = child.id() as i32;
+                // Prefer signaling the process group to avoid orphaning children
+                // when the CLI was launched via a wrapper shell.
+                let group_res = libc::kill(-pid, libc::SIGTERM);
+                if group_res != 0 {
+                    let _ = libc::kill(pid, libc::SIGTERM);
+                }
             }
             #[cfg(windows)]
             {
-                let _ = child.kill();
+                if !kill_process_tree_windows(child.id(), false) {
+                    let _ = child.kill();
+                }
             }
 
             let start = Instant::now();
@@ -368,11 +432,17 @@ impl CliProcessManager {
                             ));
                             #[cfg(unix)]
                             unsafe {
-                                libc::kill(child.id() as i32, libc::SIGKILL);
+                                let pid = child.id() as i32;
+                                let group_res = libc::kill(-pid, libc::SIGKILL);
+                                if group_res != 0 {
+                                    let _ = libc::kill(pid, libc::SIGKILL);
+                                }
                             }
                             #[cfg(windows)]
                             {
-                                let _ = child.kill();
+                                if !kill_process_tree_windows(child.id(), true) {
+                                    let _ = child.kill();
+                                }
                             }
                             break;
                         }
@@ -450,9 +520,12 @@ impl CliProcessManager {
                     .env("ELECTRON_RUN_AS_NODE", "1")
                     .stdout(Stdio::piped())
                     .stderr(Stdio::piped());
+                configure_spawn(&mut c);
                 if let Some(ref cwd) = cwd {
                     c.current_dir(cwd);
                 }
+                #[cfg(unix)]
+                configure_posix_process_group(&mut c);
                 c.spawn()?
             }
             ShellCommandType::Direct(cmd) => {
@@ -462,9 +535,12 @@ impl CliProcessManager {
                     .env("ELECTRON_RUN_AS_NODE", "1")
                     .stdout(Stdio::piped())
                     .stderr(Stdio::piped());
+                configure_spawn(&mut c);
                 if let Some(ref cwd) = cwd {
                     c.current_dir(cwd);
                 }
+                #[cfg(unix)]
+                configure_posix_process_group(&mut c);
                 c.spawn()?
             }
         };
@@ -537,7 +613,24 @@ impl CliProcessManager {
             locked.error = Some("CLI did not start in time".to_string());
             log_line("timeout waiting for CLI readiness");
             if let Some(child) = child_holder_clone.lock().as_mut() {
-                let _ = child.kill();
+                #[cfg(unix)]
+                unsafe {
+                    let pid = child.id() as i32;
+                    let group_res = libc::kill(-pid, libc::SIGKILL);
+                    if group_res != 0 {
+                        let _ = libc::kill(pid, libc::SIGKILL);
+                    }
+                }
+                #[cfg(windows)]
+                {
+                    if !kill_process_tree_windows(child.id(), true) {
+                        let _ = child.kill();
+                    }
+                }
+                #[cfg(not(any(unix, windows)))]
+                {
+                    let _ = child.kill();
+                }
             }
             let _ = app_clone.emit("cli:error", json!({"message": "CLI did not start in time"}));
             Self::emit_status(&app_clone, &locked);
@@ -828,14 +921,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 +1010,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 +1110,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

@@ -3,8 +3,11 @@
 mod cli_manager;
 
 use cli_manager::{CliProcessManager, CliStatus};
+use keepawake::KeepAwake;
+use serde::Deserialize;
 use serde_json::json;
 use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Mutex;
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
@@ -12,11 +15,31 @@ use tauri::{AppHandle, Emitter, Manager, Runtime, Wry};
 use tauri_plugin_opener::OpenerExt;
 use url::Url;
 
+#[cfg(windows)]
+use std::ffi::OsStr;
+#[cfg(windows)]
+use std::iter;
+#[cfg(windows)]
+use std::os::windows::ffi::OsStrExt;
+#[cfg(windows)]
+use windows_sys::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
+
 static QUIT_REQUESTED: AtomicBool = AtomicBool::new(false);
 
-#[derive(Clone)]
+#[cfg(windows)]
+const WINDOWS_APP_USER_MODEL_ID: &str = "ai.neuralnomads.codenomad.client";
+
 pub struct AppState {
     pub manager: CliProcessManager,
+    pub wake_lock: Mutex<Option<KeepAwake>>,
+}
+
+#[derive(Debug, Default, Deserialize)]
+#[serde(default, rename_all = "camelCase")]
+struct WakeLockConfig {
+    display: bool,
+    idle: bool,
+    sleep: bool,
 }
 
 #[tauri::command]
@@ -35,6 +58,38 @@ fn cli_restart(app: AppHandle, state: tauri::State<AppState>) -> Result<CliStatu
     Ok(state.manager.status())
 }
 
+#[tauri::command]
+fn wake_lock_start(
+    state: tauri::State<AppState>,
+    config: Option<WakeLockConfig>,
+) -> Result<(), String> {
+    let config = config.unwrap_or(WakeLockConfig {
+        display: true,
+        idle: false,
+        sleep: false,
+    });
+
+    let mut builder = keepawake::Builder::default();
+    builder
+        .display(config.display)
+        .idle(config.idle)
+        .sleep(config.sleep)
+        .reason("CodeNomad active session")
+        .app_name("CodeNomad")
+        .app_reverse_domain("ai.neuralnomads.codenomad.client");
+
+    let wake_lock = builder.create().map_err(|err| err.to_string())?;
+    let mut state_lock = state.wake_lock.lock().map_err(|err| err.to_string())?;
+    *state_lock = Some(wake_lock);
+    Ok(())
+}
+
+#[tauri::command]
+fn wake_lock_stop(state: tauri::State<AppState>) -> Result<(), String> {
+    let mut state_lock = state.wake_lock.lock().map_err(|err| err.to_string())?;
+    state_lock.take();
+    Ok(())
+}
 
 fn is_dev_mode() -> bool {
     cfg!(debug_assertions) || std::env::var("TAURI_DEV").is_ok()
@@ -46,7 +101,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 +124,55 @@ 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 }));
+    }
+}
+
+#[cfg(windows)]
+fn set_windows_app_user_model_id() {
+    let app_id: Vec<u16> = OsStr::new(WINDOWS_APP_USER_MODEL_ID)
+        .encode_wide()
+        .chain(iter::once(0))
+        .collect();
+
+    let result = unsafe { SetCurrentProcessExplicitAppUserModelID(app_id.as_ptr()) };
+    if result < 0 {
+        eprintln!("[tauri] failed to set AppUserModelID: {result}");
+    }
+}
+
+#[cfg(not(windows))]
+fn set_windows_app_user_model_id() {}
+
 fn main() {
     let navigation_guard: TauriPlugin<Wry, ()> = PluginBuilder::new("external-link-guard")
         .on_navigation(|webview, url| intercept_navigation(webview, url))
@@ -74,13 +181,14 @@ fn main() {
     tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_opener::init())
-        .plugin(tauri_plugin_keepawake::init())
         .plugin(tauri_plugin_notification::init())
         .plugin(navigation_guard)
         .manage(AppState {
             manager: CliProcessManager::new(),
+            wake_lock: Mutex::new(None),
         })
         .setup(|app| {
+            set_windows_app_user_model_id();
             build_menu(&app.handle())?;
             let dev_mode = is_dev_mode();
             let app_handle = app.handle().clone();
@@ -92,7 +200,12 @@ fn main() {
             });
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![cli_get_status, cli_restart])
+        .invoke_handler(tauri::generate_handler![
+            cli_get_status,
+            cli_restart,
+            wake_lock_start,
+            wake_lock_stop
+        ])
         .on_menu_event(|app_handle, event| {
             match event.id().0.as_str() {
                 // File menu
@@ -187,6 +300,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 +368,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 +400,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 +413,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/tauri-app/src-tauri/tauri.conf.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "CodeNomad",
-  "version": "0.1.0",
-  "identifier": "ai.opencode.client",
+  "version": "0.12.3",
+  "identifier": "ai.neuralnomads.codenomad.client",
   "build": {
     "beforeDevCommand": "npm run dev:bootstrap",
     "beforeBuildCommand": "npm run bundle:server",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.11.4",
+  "version": "0.12.3",
   "private": true,
   "license": "MIT",
   "type": "module",
@@ -18,8 +18,10 @@
     "@suid/icons-material": "^0.9.0",
     "@suid/material": "^0.19.0",
     "@suid/system": "^0.14.0",
-    "@tauri-apps/plugin-opener": "^2.5.3",
+    "@tauri-apps/api": "^2.10.1",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-notification": "^2.3.3",
+    "@tauri-apps/plugin-opener": "^2.5.3",
     "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
@@ -30,7 +32,6 @@
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
     "solid-toast": "^0.5.0",
-    "tauri-plugin-keepawake-api": "^0.1.0",
     "yaml": "^2.4.2"
   },
   "devDependencies": {

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"
@@ -54,6 +54,7 @@ import {
 } from "./stores/sessions"
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
+import { openSettings } from "./stores/settings-screen"
 
 const log = getLogger("actions")
 
@@ -77,8 +78,6 @@ const App: Component = () => {
     setToolInputsVisibility,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
-  const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
-  const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
@@ -252,7 +251,6 @@ const App: Component = () => {
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
       setShowFolderSelection(false)
-      setIsAdvancedSettingsOpen(false)
 
       log.info("Created instance", {
         instanceId,
@@ -274,7 +272,7 @@ const App: Component = () => {
 
   function handleLaunchErrorAdvanced() {
     clearLaunchError()
-    setIsAdvancedSettingsOpen(true)
+    openSettings("opencode")
   }
 
   function handleNewInstanceRequest() {
@@ -487,7 +485,6 @@ const App: Component = () => {
                   onSelect={setActiveInstanceId}
                   onClose={handleCloseInstance}
                   onNew={handleNewInstanceRequest}
-                  onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
                 />
               </Show>
  
@@ -496,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()}
@@ -526,10 +530,6 @@ const App: Component = () => {
           <FolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
-            advancedSettingsOpen={isAdvancedSettingsOpen()}
-            onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
-            onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
-            onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
           />
         </Show>
 
@@ -539,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()
                 }}
               />
@@ -552,7 +548,7 @@ const App: Component = () => {
           </div>
         </Show>
  
-        <RemoteAccessOverlay open={remoteAccessOpen()} onClose={() => setRemoteAccessOpen(false)} />
+        <SettingsScreen />
  
         <AlertDialog />
 

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">
@@ -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>
               }
@@ -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,5 +1,5 @@
 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"
 

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-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/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(() => {
@@ -354,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

@@ -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")
 
@@ -427,178 +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: "tool-inputs-visibility",
-      label: () => {
-        const mode = options.preferences().toolInputsVisibility || "hidden"
-        const state =
-          mode === "expanded"
-            ? tGlobal("commands.common.expanded")
-            : mode === "collapsed"
-              ? tGlobal("commands.common.collapsed")
-              : tGlobal("commands.common.hidden")
-        return tGlobal("commands.toolInputsVisibility.label", { state })
-      },
-      description: () => tGlobal("commands.toolInputsVisibility.description"),
-      category: "System",
-      keywords: () => splitKeywords("commands.toolInputsVisibility.keywords"),
-      action: () => {
-        const mode = options.preferences().toolInputsVisibility || "hidden"
-        const next: ToolInputsVisibilityPreference =
-          mode === "hidden" ? "collapsed" : mode === "collapsed" ? "expanded" : "hidden"
-        options.setToolInputsVisibility(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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/ru/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/ru/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": "Показывать подсказки сочетаний клавиш по всему интерфейсу.",
+  "settings.behavior.thinking.title": "Разделы размышлений",
+  "settings.behavior.thinking.subtitle": "Показывать или скрывать разделы размышлений ИИ в сообщениях.",
+  "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/zh-Hans/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/zh-Hans/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/zh-Hans/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/zh-Hans/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/zh-Hans/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": "在整个界面中显示键盘快捷键提示。",
+  "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": "回车发送",
+  "settings.behavior.promptSubmit.subtitle": "使用回车发送；Cmd/Ctrl+回车插入新行。",
 } as const

packages/ui/src/lib/markdown.ts

@@ -127,17 +127,23 @@ async function ensureLanguages(content: string) {
   if (highlightSuppressed) {
     return
   }
-  // Parse code fences to extract language tokens
-  // Updated regex to capture optional language tokens and handle trailing annotations
-  const codeBlockRegex = /```[ \t]*([A-Za-z0-9_.+#-]+)?[^`]*?```/g
-  const foundLanguages = new Set<string>()
-  let match
 
-  while ((match = codeBlockRegex.exec(content)) !== null) {
-    const langToken = match[1]
-    if (langToken && langToken.trim()) {
-      foundLanguages.add(langToken.trim())
-    }
+  // Extract code-fence language tokens via `marked` so we correctly handle code blocks
+  // that contain backticks (e.g. JS template literals). Regex-based fence scans tend
+  // to miss these and prevent languages from loading.
+  const foundLanguages = new Set<string>()
+  try {
+    const tokens = marked.lexer(content) as any
+    marked.walkTokens(tokens, (token: any) => {
+      if (token?.type !== "code") return
+      const langToken = typeof token.lang === "string" ? token.lang : ""
+      if (langToken.trim()) {
+        foundLanguages.add(langToken.trim())
+      }
+    })
+  } catch {
+    // If tokenization fails for any reason, skip language preloading.
+    return
   }
 
   // Queue language loading tasks

packages/ui/src/lib/native/cli.ts

@@ -1,3 +1,4 @@
+import { invoke } from "@tauri-apps/api/core"
 import { runtimeEnv } from "../runtime-env"
 import { getLogger } from "../logger"
 const log = getLogger("actions")
@@ -15,9 +16,8 @@ export async function restartCli(): Promise<boolean> {
     }
 
     if (runtimeEnv.host === "tauri") {
-      const tauri = (window as typeof window & { __TAURI__?: { invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T> } }).__TAURI__
-      if (tauri?.invoke) {
-        await tauri.invoke("cli_restart")
+      if (typeof window.__TAURI__?.core?.invoke === "function") {
+        await invoke("cli_restart")
         return true
       }
       return false

packages/ui/src/lib/native/desktop-file-drop.ts

@@ -0,0 +1,146 @@
+import { listen } from "@tauri-apps/api/event"
+import { getLogger } from "../logger"
+import { runtimeEnv } from "../runtime-env"
+
+const log = getLogger("actions")
+
+type NativeFolderDropState = "enter" | "leave"
+
+interface TauriFolderDropPayload {
+  paths?: unknown
+}
+
+function normalizePathList(input: unknown): string[] {
+  if (!Array.isArray(input)) {
+    return []
+  }
+  return input.filter((value): value is string => typeof value === "string" && value.trim().length > 0)
+}
+
+function getFilePath(file: File): string | null {
+  if (typeof file.path === "string" && file.path.trim().length > 0) {
+    return file.path
+  }
+  if (runtimeEnv.host === "electron") {
+    const electronPath = (window as Window & { electronAPI?: ElectronAPI }).electronAPI?.getPathForFile?.(file)
+    if (typeof electronPath === "string" && electronPath.trim().length > 0) {
+      return electronPath
+    }
+  }
+  return null
+}
+
+async function resolveElectronDirectoryPaths(paths: string[]): Promise<string[]> {
+  const api = (window as Window & { electronAPI?: ElectronAPI }).electronAPI
+  if (!api?.getDirectoryPaths || paths.length === 0) {
+    return []
+  }
+  try {
+    return await api.getDirectoryPaths(paths)
+  } catch (error) {
+    log.error("[native] failed to validate dropped directory paths", error)
+    return []
+  }
+}
+
+export function supportsDesktopFolderDrop(): boolean {
+  return runtimeEnv.platform === "desktop" && runtimeEnv.host !== "web"
+}
+
+export function containsFileDrop(event: DragEvent): boolean {
+  const types = event.dataTransfer?.types
+  if (!types) {
+    return false
+  }
+  return Array.from(types).includes("Files")
+}
+
+export function extractDroppedDirectoryPaths(event: DragEvent): string[] {
+  const dataTransfer = event.dataTransfer
+  if (!dataTransfer) {
+    return []
+  }
+
+  const directoryHints = new Set<string>()
+  for (const item of Array.from(dataTransfer.items ?? [])) {
+    if (item.kind !== "file") {
+      continue
+    }
+    const entry = item.webkitGetAsEntry?.()
+    if (!entry?.isDirectory) {
+      continue
+    }
+    const file = item.getAsFile()
+    const filePath = file ? getFilePath(file) : null
+    if (filePath) {
+      directoryHints.add(filePath)
+    }
+  }
+
+  const paths = new Set<string>()
+  for (const file of Array.from(dataTransfer.files ?? [])) {
+    const filePath = getFilePath(file)
+    if (!filePath) {
+      continue
+    }
+    if (directoryHints.size > 0 && !directoryHints.has(filePath)) {
+      continue
+    }
+    paths.add(filePath)
+  }
+
+  return Array.from(paths)
+}
+
+export async function normalizeDroppedDirectoryPaths(paths: string[]): Promise<string[]> {
+  const uniquePaths = Array.from(new Set(paths.filter((path) => typeof path === "string" && path.trim().length > 0)))
+  if (uniquePaths.length === 0) {
+    return []
+  }
+  if (runtimeEnv.host === "electron") {
+    return resolveElectronDirectoryPaths(uniquePaths)
+  }
+  return uniquePaths
+}
+
+export async function listenForNativeFolderDrops(onDrop: (paths: string[]) => void): Promise<() => void> {
+  if (runtimeEnv.host !== "tauri") {
+    return () => {}
+  }
+
+  try {
+    const unlisten = await listen("desktop:folder-drop", (event) => {
+      const payload = (event.payload ?? {}) as TauriFolderDropPayload
+      const paths = normalizePathList(payload.paths)
+      if (paths.length > 0) {
+        onDrop(paths)
+      }
+    })
+    return () => {
+      unlisten()
+    }
+  } catch (error) {
+    log.error("[native] failed to listen for folder-drop event", error)
+    return () => {}
+  }
+}
+
+export async function listenForNativeFolderDropState(onState: (state: NativeFolderDropState) => void): Promise<() => void> {
+  if (runtimeEnv.host !== "tauri") {
+    return () => {}
+  }
+
+  try {
+    const [unlistenEnter, unlistenLeave] = await Promise.all([
+      listen("desktop:folder-drag-enter", () => onState("enter")),
+      listen("desktop:folder-drag-leave", () => onState("leave")),
+    ])
+    return () => {
+      unlistenEnter()
+      unlistenLeave()
+    }
+  } catch (error) {
+    log.error("[native] failed to listen for folder-drop state", error)
+    return () => {}
+  }
+}

packages/ui/src/lib/native/tauri/functions.ts

@@ -1,43 +1,21 @@
+import { open } from "@tauri-apps/plugin-dialog"
 import type { NativeDialogOptions } from "../native-functions"
 import { getLogger } from "../../logger"
 const log = getLogger("actions")
 
-
-interface TauriDialogModule {
-  open?: (
-    options: {
-      title?: string
-      defaultPath?: string
-      filters?: { name?: string; extensions: string[] }[]
-      directory?: boolean
-      multiple?: boolean
-    },
-  ) => Promise<string | string[] | null>
-}
-
-interface TauriBridge {
-  dialog?: TauriDialogModule
-}
-
 export async function openTauriNativeDialog(options: NativeDialogOptions): Promise<string | null> {
   if (typeof window === "undefined") {
     return null
   }
 
-  const tauriBridge = (window as Window & { __TAURI__?: TauriBridge }).__TAURI__
-  const dialogApi = tauriBridge?.dialog
-  if (!dialogApi?.open) {
-    return null
-  }
-
   try {
-    const response = await dialogApi.open({
+    const response = await open({
       title: options.title,
       defaultPath: options.defaultPath,
       directory: options.mode === "directory",
       multiple: false,
       filters: options.filters?.map((filter) => ({
-        name: filter.name,
+        name: filter.name ?? "Files",
         extensions: filter.extensions,
       })),
     })

packages/ui/src/lib/native/wake-lock.ts

@@ -1,3 +1,4 @@
+import { invoke } from "@tauri-apps/api/core"
 import { runtimeEnv } from "../runtime-env"
 import { getLogger } from "../logger"
 
@@ -60,8 +61,7 @@ function hasAnyWakeLockSupport(): boolean {
     if (api?.setWakeLock) return true
   }
   if (runtimeEnv.host === "tauri") {
-    // We'll attempt dynamic import; treat as potentially supported.
-    return true
+    return typeof window.__TAURI__?.core?.invoke === "function"
   }
   return Boolean((navigator as any)?.wakeLock?.request)
 }
@@ -84,21 +84,18 @@ async function setElectronWakeLock(enabled: boolean): Promise<boolean> {
 
 async function setTauriWakeLock(enabled: boolean): Promise<boolean> {
   try {
-    const mod = await import("tauri-plugin-keepawake-api")
-    const start = (mod as any).start as ((config?: any) => Promise<void>) | undefined
-    const stop = (mod as any).stop as (() => Promise<void>) | undefined
-    if (!start || !stop) {
+    if (!hasAnyWakeLockSupport()) {
       return false
     }
 
     if (enabled) {
-      // Plugin config supports toggling display/idle/sleep. Use a conservative
-      // default to keep both system + display awake.
-      await start({ display: true, idle: true, sleep: true })
+      // Match Electron's prevent-display-sleep behavior by keeping the display
+      // awake without blocking explicit system sleep requests.
+      await invoke("wake_lock_start", { config: { display: true, idle: false, sleep: false } })
       return true
     }
 
-    await stop()
+    await invoke("wake_lock_stop")
     return false
   } catch (error) {
     log.log("[wake-lock] tauri wake lock failed", error)
@@ -137,13 +134,12 @@ export function setWakeLockDesired(nextDesired: boolean): Promise<boolean> {
   inFlight = (async () => {
     try {
       const ok = await applyWakeLock(target)
-      // Treat disable attempts as applied even if the underlying API doesn't exist.
-      applied = target
+      applied = target ? ok : false
       return ok
     } finally {
       inFlight = null
       // If desired changed while in-flight, re-apply once.
-      if (desired !== applied) {
+      if (desired !== target) {
         void setWakeLockDesired(desired)
       }
 

packages/ui/src/lib/runtime-env.ts

@@ -9,17 +9,14 @@ export interface RuntimeEnvironment {
 }
 
 declare global {
+  interface TauriCoreModule {
+    invoke: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
+  }
+
   interface Window {
     electronAPI?: unknown
     __TAURI__?: {
-      invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
-      event?: {
-        listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
-      }
-      dialog?: {
-        open?: (options: Record<string, unknown>) => Promise<string | string[] | null>
-        save?: (options: Record<string, unknown>) => Promise<string | null>
-      }
+      core?: TauriCoreModule
     }
   }
 }

packages/ui/src/lib/settings/behavior-registry.ts

@@ -0,0 +1,452 @@
+import type { Accessor } from "solid-js"
+import type {
+  Preferences,
+  ExpansionPreference,
+  ToolInputsVisibilityPreference,
+} from "../../stores/preferences"
+import type { Command } from "../commands"
+import { tGlobal } from "../i18n"
+import { runtimeEnv } from "../runtime-env"
+
+export type BehaviorSettingKind = "toggle" | "enum"
+
+export type BehaviorToggleSetting = {
+  kind: "toggle"
+  id: string
+  titleKey: string
+  subtitleKey: string
+  get: (preferences: Preferences) => boolean
+  set: (next: boolean) => void
+  disabled?: () => boolean
+}
+
+export type BehaviorEnumSetting<T extends string = string> = {
+  kind: "enum"
+  id: string
+  titleKey: string
+  subtitleKey: string
+  get: (preferences: Preferences) => T
+  set: (next: T) => void
+  options: Array<{ value: T; labelKey: string }>
+  disabled?: () => boolean
+}
+
+export type BehaviorSetting = BehaviorToggleSetting | BehaviorEnumSetting
+
+export type BehaviorRegistryActions = {
+  preferences: Accessor<Preferences>
+  updatePreferences?: (updates: Partial<Preferences>) => void
+  toggleShowThinkingBlocks: () => void
+  toggleKeyboardShortcutHints: () => void
+  toggleShowTimelineTools: () => void
+  toggleUsageMetrics: () => void
+  toggleAutoCleanupBlankSessions: () => void
+  togglePromptSubmitOnEnter: () => void
+  setDiffViewMode: (mode: "split" | "unified") => void
+  setToolOutputExpansion: (mode: ExpansionPreference) => void
+  setDiagnosticsExpansion: (mode: ExpansionPreference) => void
+  setThinkingBlocksExpansion: (mode: ExpansionPreference) => void
+  setToolInputsVisibility: (mode: ToolInputsVisibilityPreference) => void
+}
+
+function splitKeywords(key: string): string[] {
+  return tGlobal(key)
+    .split(",")
+    .map((value) => value.trim())
+    .filter(Boolean)
+}
+
+function setBooleanByToggle(getCurrent: () => boolean, toggle: () => void, next: boolean) {
+  if (getCurrent() === next) return
+  toggle()
+}
+
+export function getBehaviorSettings(actions: BehaviorRegistryActions): BehaviorSetting[] {
+  const prefs = actions.preferences
+  const updatePreferences = actions.updatePreferences
+
+  return [
+    {
+      kind: "toggle",
+      id: "behavior.keyboardShortcutHints",
+      titleKey: "settings.behavior.keyboardHints.title",
+      subtitleKey: "settings.behavior.keyboardHints.subtitle",
+      get: (p) => Boolean(p.showKeyboardShortcutHints ?? true),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ showKeyboardShortcutHints: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().showKeyboardShortcutHints ?? true),
+          actions.toggleKeyboardShortcutHints,
+          next,
+        )
+      },
+      disabled: () => runtimeEnv.host === "web",
+    },
+    {
+      kind: "toggle",
+      id: "behavior.thinkingBlocks",
+      titleKey: "settings.behavior.thinking.title",
+      subtitleKey: "settings.behavior.thinking.subtitle",
+      get: (p) => Boolean(p.showThinkingBlocks),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ showThinkingBlocks: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().showThinkingBlocks),
+          actions.toggleShowThinkingBlocks,
+          next,
+        )
+      },
+    },
+    {
+      kind: "enum",
+      id: "behavior.thinkingBlocksDefault",
+      titleKey: "settings.behavior.thinkingDefault.title",
+      subtitleKey: "settings.behavior.thinkingDefault.subtitle",
+      get: (p) => (p.thinkingBlocksExpansion ?? "expanded") as ExpansionPreference,
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ thinkingBlocksExpansion: next as ExpansionPreference })
+          return
+        }
+        actions.setThinkingBlocksExpansion(next as ExpansionPreference)
+      },
+      options: [
+        { value: "expanded", labelKey: "commands.common.expanded" },
+        { value: "collapsed", labelKey: "commands.common.collapsed" },
+      ],
+    },
+    {
+      kind: "toggle",
+      id: "behavior.timelineToolCalls",
+      titleKey: "settings.behavior.timelineTools.title",
+      subtitleKey: "settings.behavior.timelineTools.subtitle",
+      get: (p) => Boolean(p.showTimelineTools),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ showTimelineTools: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().showTimelineTools),
+          actions.toggleShowTimelineTools,
+          next,
+        )
+      },
+    },
+    {
+      kind: "enum",
+      id: "behavior.diffViewMode",
+      titleKey: "settings.behavior.diffView.title",
+      subtitleKey: "settings.behavior.diffView.subtitle",
+      get: (p) => (p.diffViewMode ?? "split") as "split" | "unified",
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ diffViewMode: next as "split" | "unified" })
+          return
+        }
+        actions.setDiffViewMode(next as "split" | "unified")
+      },
+      options: [
+        { value: "split", labelKey: "settings.behavior.diffView.option.split" },
+        { value: "unified", labelKey: "settings.behavior.diffView.option.unified" },
+      ],
+    },
+    {
+      kind: "enum",
+      id: "behavior.toolOutputsDefault",
+      titleKey: "settings.behavior.toolOutputsDefault.title",
+      subtitleKey: "settings.behavior.toolOutputsDefault.subtitle",
+      get: (p) => (p.toolOutputExpansion ?? "expanded") as ExpansionPreference,
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ toolOutputExpansion: next as ExpansionPreference })
+          return
+        }
+        actions.setToolOutputExpansion(next as ExpansionPreference)
+      },
+      options: [
+        { value: "expanded", labelKey: "commands.common.expanded" },
+        { value: "collapsed", labelKey: "commands.common.collapsed" },
+      ],
+    },
+    {
+      kind: "enum",
+      id: "behavior.diagnosticsDefault",
+      titleKey: "settings.behavior.diagnosticsDefault.title",
+      subtitleKey: "settings.behavior.diagnosticsDefault.subtitle",
+      get: (p) => (p.diagnosticsExpansion ?? "expanded") as ExpansionPreference,
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ diagnosticsExpansion: next as ExpansionPreference })
+          return
+        }
+        actions.setDiagnosticsExpansion(next as ExpansionPreference)
+      },
+      options: [
+        { value: "expanded", labelKey: "commands.common.expanded" },
+        { value: "collapsed", labelKey: "commands.common.collapsed" },
+      ],
+    },
+    {
+      kind: "enum",
+      id: "behavior.toolInputsVisibility",
+      titleKey: "settings.behavior.toolInputsVisibility.title",
+      subtitleKey: "settings.behavior.toolInputsVisibility.subtitle",
+      get: (p) => (p.toolInputsVisibility ?? "hidden") as ToolInputsVisibilityPreference,
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ toolInputsVisibility: next as ToolInputsVisibilityPreference })
+          return
+        }
+        actions.setToolInputsVisibility(next as ToolInputsVisibilityPreference)
+      },
+      options: [
+        { value: "hidden", labelKey: "commands.common.hidden" },
+        { value: "collapsed", labelKey: "commands.common.collapsed" },
+        { value: "expanded", labelKey: "commands.common.expanded" },
+      ],
+    },
+    {
+      kind: "toggle",
+      id: "behavior.usageMetrics",
+      titleKey: "settings.behavior.usageMetrics.title",
+      subtitleKey: "settings.behavior.usageMetrics.subtitle",
+      get: (p) => Boolean(p.showUsageMetrics ?? true),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ showUsageMetrics: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().showUsageMetrics ?? true),
+          actions.toggleUsageMetrics,
+          next,
+        )
+      },
+    },
+    {
+      kind: "toggle",
+      id: "behavior.autoCleanupBlankSessions",
+      titleKey: "settings.behavior.autoCleanup.title",
+      subtitleKey: "settings.behavior.autoCleanup.subtitle",
+      get: (p) => Boolean(p.autoCleanupBlankSessions),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ autoCleanupBlankSessions: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().autoCleanupBlankSessions),
+          actions.toggleAutoCleanupBlankSessions,
+          next,
+        )
+      },
+    },
+    {
+      kind: "toggle",
+      id: "behavior.promptSubmitOnEnter",
+      titleKey: "settings.behavior.promptSubmit.title",
+      subtitleKey: "settings.behavior.promptSubmit.subtitle",
+      get: (p) => Boolean(p.promptSubmitOnEnter),
+      set: (next) => {
+        if (updatePreferences) {
+          updatePreferences({ promptSubmitOnEnter: next })
+          return
+        }
+        setBooleanByToggle(
+          () => Boolean(prefs().promptSubmitOnEnter),
+          actions.togglePromptSubmitOnEnter,
+          next,
+        )
+      },
+    },
+  ]
+}
+
+export function getBehaviorCommands(actions: BehaviorRegistryActions): Command[] {
+  return [
+    {
+      id: "prompt-submit-shortcut",
+      label: () =>
+        actions.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: actions.togglePromptSubmitOnEnter,
+    },
+    {
+      id: "thinking",
+      label: () =>
+        tGlobal(
+          actions.preferences().showThinkingBlocks
+            ? "commands.thinkingBlocks.label.hide"
+            : "commands.thinkingBlocks.label.show",
+        ),
+      description: () => tGlobal("commands.thinkingBlocks.description"),
+      category: "System",
+      keywords: () => ["/thinking", ...splitKeywords("commands.thinkingBlocks.keywords")],
+      action: actions.toggleShowThinkingBlocks,
+    },
+    {
+      id: "timeline-tools",
+      label: () =>
+        tGlobal(
+          actions.preferences().showTimelineTools
+            ? "commands.timelineToolCalls.label.hide"
+            : "commands.timelineToolCalls.label.show",
+        ),
+      description: () => tGlobal("commands.timelineToolCalls.description"),
+      category: "System",
+      keywords: () => splitKeywords("commands.timelineToolCalls.keywords"),
+      action: actions.toggleShowTimelineTools,
+    },
+    {
+      id: "keyboard-shortcut-hints",
+      label: () =>
+        tGlobal(
+          actions.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: actions.toggleKeyboardShortcutHints,
+    },
+    {
+      id: "thinking-default-visibility",
+      label: () => {
+        const mode = actions.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 = actions.preferences().thinkingBlocksExpansion ?? "expanded"
+        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
+        actions.setThinkingBlocksExpansion(next)
+      },
+    },
+    {
+      id: "diff-view-split",
+      label: () => {
+        const prefix = (actions.preferences().diffViewMode || "split") === "split" ? "✓ " : ""
+        return `${prefix}${tGlobal("commands.diffViewSplit.label")}`
+      },
+      description: () => tGlobal("commands.diffViewSplit.description"),
+      category: "System",
+      keywords: () => splitKeywords("commands.diffViewSplit.keywords"),
+      action: () => actions.setDiffViewMode("split"),
+    },
+    {
+      id: "diff-view-unified",
+      label: () => {
+        const prefix = (actions.preferences().diffViewMode || "split") === "unified" ? "✓ " : ""
+        return `${prefix}${tGlobal("commands.diffViewUnified.label")}`
+      },
+      description: () => tGlobal("commands.diffViewUnified.description"),
+      category: "System",
+      keywords: () => splitKeywords("commands.diffViewUnified.keywords"),
+      action: () => actions.setDiffViewMode("unified"),
+    },
+    {
+      id: "tool-output-default-visibility",
+      label: () => {
+        const mode = actions.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 = actions.preferences().toolOutputExpansion || "expanded"
+        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
+        actions.setToolOutputExpansion(next)
+      },
+    },
+    {
+      id: "diagnostics-default-visibility",
+      label: () => {
+        const mode = actions.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 = actions.preferences().diagnosticsExpansion || "expanded"
+        const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
+        actions.setDiagnosticsExpansion(next)
+      },
+    },
+    {
+      id: "tool-inputs-visibility",
+      label: () => {
+        const mode = actions.preferences().toolInputsVisibility || "hidden"
+        const state =
+          mode === "expanded"
+            ? tGlobal("commands.common.expanded")
+            : mode === "collapsed"
+              ? tGlobal("commands.common.collapsed")
+              : tGlobal("commands.common.hidden")
+        return tGlobal("commands.toolInputsVisibility.label", { state })
+      },
+      description: () => tGlobal("commands.toolInputsVisibility.description"),
+      category: "System",
+      keywords: () => splitKeywords("commands.toolInputsVisibility.keywords"),
+      action: () => {
+        const mode = actions.preferences().toolInputsVisibility || "hidden"
+        const next: ToolInputsVisibilityPreference =
+          mode === "hidden" ? "collapsed" : mode === "collapsed" ? "expanded" : "hidden"
+        actions.setToolInputsVisibility(next)
+      },
+    },
+    {
+      id: "token-usage-visibility",
+      label: () => {
+        const visible = actions.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: actions.toggleUsageMetrics,
+    },
+    {
+      id: "auto-cleanup-blank-sessions",
+      label: () => {
+        const enabled = actions.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: actions.toggleAutoCleanupBlankSessions,
+    },
+  ]
+}
+
+export function registerBehaviorCommands(register: (command: Command) => void, actions: BehaviorRegistryActions) {
+  const commands = getBehaviorCommands(actions)
+  commands.forEach((command) => register(command))
+}

packages/ui/src/lib/token-utils.ts

@@ -0,0 +1,66 @@
+import type { ClientPart } from "../types/message"
+
+/**
+ * Count the total character content of a message part.
+ *
+ * Used by both the xray histogram overlay (message-timeline) and the
+ * bulk-delete toolbar token pills (message-section) so both surfaces
+ * derive token estimates from the same logic.
+ *
+ * Note: For tool parts we intentionally only count `state.input` and
+ * `state.output`. We exclude `state.metadata` from token estimation since
+ * metadata can contain large or verbose diagnostic payloads that are not
+ * representative of model context.
+ */
+export function getPartCharCount(part: ClientPart): number {
+  if (!part) return 0
+  let count = 0
+
+  if (typeof (part as any).text === "string") {
+    count += (part as any).text.length
+  }
+
+  if (part.type === "tool") {
+    const state = (part as any).state
+    // Tool calls may be compacted server-side. When that happens we treat the
+    // tool payload as effectively absent from context for token estimation.
+    const compacted = (state as any)?.time?.compacted
+    if (compacted !== undefined && compacted !== null) {
+      return 0
+    }
+    if (state) {
+      if (state.input) {
+        try {
+          count += JSON.stringify(state.input).length
+        } catch {}
+      }
+      if (state.output) {
+        if (typeof state.output === "string") {
+          count += state.output.length
+        } else {
+          try {
+            count += JSON.stringify(state.output).length
+          } catch {}
+        }
+      }
+    }
+  }
+
+  if (Array.isArray((part as any).content)) {
+    count += (part as any).content.reduce((acc: number, entry: unknown) => {
+      if (typeof entry === "string") return acc + entry.length
+      if (entry && typeof entry === "object") {
+        let entryCount = (String((entry as any).text || "")).length + (String((entry as any).value || "")).length
+        if (Array.isArray((entry as any).content)) {
+          entryCount += (entry as any).content.reduce((innerAcc: number, sub: unknown) => {
+            if (typeof sub === "string") return innerAcc + sub.length
+            return innerAcc + (String((sub as any)?.text || "")).length
+          }, 0)
+        }
+        return acc + entryCount
+      }
+      return acc
+    }, 0)
+  }
+  return count
+}

packages/ui/src/renderer/loading/main.tsx

@@ -1,3 +1,5 @@
+import { invoke } from "@tauri-apps/api/core"
+import { listen } from "@tauri-apps/api/event"
 import { Show, createSignal, onCleanup, onMount } from "solid-js"
 import { render } from "solid-js/web"
 import iconUrl from "../../images/CodeNomad-Icon.png"
@@ -27,13 +29,6 @@ interface CliStatus {
   error?: string | null
 }
 
-interface TauriBridge {
-  invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
-  event?: {
-    listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
-  }
-}
-
 function pickPhraseKey(previous?: PhraseKey) {
   const filtered = phraseKeys.filter((key) => key !== previous)
   const source = filtered.length > 0 ? filtered : phraseKeys
@@ -46,17 +41,6 @@ function navigateTo(url?: string | null) {
   window.location.replace(url)
 }
 
-function getTauriBridge(): TauriBridge | null {
-  if (typeof window === "undefined") {
-    return null
-  }
-  const bridge = (window as { __TAURI__?: TauriBridge }).__TAURI__
-  if (!bridge || !bridge.event || !bridge.invoke) {
-    return null
-  }
-  return bridge
-}
-
 function annotateDocument() {
   if (typeof document === "undefined") {
     return
@@ -77,25 +61,22 @@ function LoadingApp() {
     setPhraseKey(pickPhraseKey())
     const unsubscribers: Array<() => void> = []
 
-    async function bootstrapTauri(tauriBridge: TauriBridge | null) {
-      if (!tauriBridge || !tauriBridge.event || !tauriBridge.invoke) {
-        return
-      }
+    async function bootstrapTauri() {
       try {
-        const readyUnlisten = await tauriBridge.event.listen("cli:ready", (event) => {
+        const readyUnlisten = await listen("cli:ready", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           setError(null)
           setStatusKey(null)
           navigateTo(payload.url)
         })
-        const errorUnlisten = await tauriBridge.event.listen("cli:error", (event) => {
+        const errorUnlisten = await listen("cli:error", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           if (payload.error) {
             setError(payload.error)
             setStatusKey("loadingScreen.status.issue")
           }
         })
-        const statusUnlisten = await tauriBridge.event.listen("cli:status", (event) => {
+        const statusUnlisten = await listen("cli:status", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           if (payload.state === "error" && payload.error) {
             setError(payload.error)
@@ -109,7 +90,7 @@ function LoadingApp() {
         })
         unsubscribers.push(readyUnlisten, errorUnlisten, statusUnlisten)
 
-        const result = await tauriBridge.invoke<CliStatus>("cli_get_status")
+        const result = await invoke<CliStatus>("cli_get_status")
         if (result?.state === "ready" && result.url) {
           navigateTo(result.url)
         } else if (result?.state === "error" && result.error) {
@@ -123,7 +104,7 @@ function LoadingApp() {
     }
 
     if (isTauriHost()) {
-      void bootstrapTauri(getTauriBridge())
+      void bootstrapTauri()
     }
 
     onCleanup(() => {