ui: emphasize command palette button

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

@@ -3,11 +3,6 @@ name: Build and Upload Binaries
 on:
   workflow_call:
     inputs:
-      ref:
-        description: "Git ref (branch, tag, or SHA) to build from"
-        required: false
-        default: ""
-        type: string
       version:
         description: "Version to apply to workspace packages (release builds)"
         required: false
@@ -28,21 +23,6 @@ on:
         required: false
         default: true
         type: boolean
-      upload_actions_artifacts:
-        description: "Upload built artifacts to GitHub Actions run artifacts"
-        required: false
-        default: false
-        type: boolean
-      actions_artifacts_retention_days:
-        description: "Retention (days) for GitHub Actions artifacts"
-        required: false
-        default: 7
-        type: number
-      actions_artifacts_name_prefix:
-        description: "Optional prefix for Actions artifact names"
-        required: false
-        default: ""
-        type: string
       set_versions:
         description: "Run npm version to set workspace versions"
         required: false
@@ -65,8 +45,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -76,21 +54,7 @@ jobs:
 
       - name: Set workspace versions
         if: ${{ inputs.set_versions && inputs.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
+        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
         run: npm ci --workspaces --include=optional
@@ -101,112 +65,6 @@ jobs:
       - name: Build macOS binaries (Electron)
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
-      - name: Ad-hoc sign Electron macOS app bundles (seal resources)
-        shell: bash
-        run: |
-          set -euo pipefail
-
-          release_root="packages/electron-app/release"
-          apps=()
-          while IFS= read -r -d '' app; do
-            apps+=("$app")
-          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
-
-          if [ "${#apps[@]}" -eq 0 ]; then
-            echo "No CodeNomad.app found under $release_root" >&2
-            exit 1
-          fi
-
-          # GitHub macOS runners typically have no signing identity. Without any signature,
-          # the shipped .app can fail Gatekeeper with:
-          #   code has no resources but signature indicates they must be present
-          # Ad-hoc signing seals bundle resources and makes the signature internally consistent.
-          if security find-identity -p codesigning -v | grep -q "0 valid identities found"; then
-            echo "No valid macOS codesigning identity found; applying ad-hoc signature"
-            for app in "${apps[@]}"; do
-              echo "codesign (adhoc): $app"
-              codesign --force --deep --sign - "$app"
-              codesign --verify --deep --strict --verbose=2 "$app"
-            done
-          else
-            echo "macOS codesigning identity present; skipping ad-hoc signing"
-          fi
-
-      - name: Repackage Electron macOS zips (ditto)
-        shell: bash
-        run: |
-          set -euo pipefail
-
-          # Prefer the workflow-provided version; fall back to package.json.
-          VERSION_TO_USE="${VERSION:-}"
-          if [ -z "$VERSION_TO_USE" ]; then
-            VERSION_TO_USE=$(node -p "require('./packages/electron-app/package.json').version")
-          fi
-
-          release_root="packages/electron-app/release"
-          # macOS GitHub runners ship /bin/bash 3.2 which doesn't support `shopt -s globstar`.
-          # Use find to locate built app bundles instead of ** globs.
-          apps=()
-          while IFS= read -r -d '' app; do
-            apps+=("$app")
-          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
-          if [ "${#apps[@]}" -eq 0 ]; then
-            echo "No CodeNomad.app found under $release_root" >&2
-            exit 1
-          fi
-
-          for app in "${apps[@]}"; do
-            bundle_dir=$(basename "$(dirname "$app")")
-            arch="x64"
-            if [[ "$bundle_dir" == *"arm64"* ]]; then
-              arch="arm64"
-            fi
-
-            out_zip="$release_root/CodeNomad-${VERSION_TO_USE}-mac-${arch}.zip"
-            rm -f "$out_zip"
-            echo "ditto -ck: $app -> $out_zip"
-            ditto -ck --sequesterRsrc --keepParent "$app" "$out_zip"
-          done
-
-      - name: Validate Electron macOS codesign (unzipped)
-        shell: bash
-        run: |
-          set -euo pipefail
-          shopt -s nullglob
-
-          tmp_dir=$(mktemp -d)
-          trap 'rm -rf "$tmp_dir"' EXIT
-
-          zips=(packages/electron-app/release/CodeNomad-*-mac-*.zip)
-          if [ "${#zips[@]}" -eq 0 ]; then
-            echo "No Electron macOS zip artifacts found to validate" >&2
-            exit 1
-          fi
-
-          for zip in "${zips[@]}"; do
-            echo "Validating codesign for: $zip"
-            extract_dir="$tmp_dir/$(basename "$zip" .zip)"
-            mkdir -p "$extract_dir"
-
-            # Use ditto for extraction as well to preserve bundle metadata.
-            ditto -x -k "$zip" "$extract_dir"
-
-            app_path=""
-            for candidate in "$extract_dir"/*.app "$extract_dir"/*/*.app; do
-              if [ -d "$candidate" ]; then
-                app_path="$candidate"
-                break
-              fi
-            done
-
-            if [ -z "$app_path" ]; then
-              echo "No .app found after extracting $zip" >&2
-              exit 1
-            fi
-
-            codesign --verify --deep --strict --verbose=2 "$app_path"
-          done
-
       - name: Upload release assets
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -218,15 +76,6 @@ jobs:
             gh release upload "$TAG" "$file" --clobber
           done
 
-      - name: Upload Actions artifacts (Electron macOS)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}electron-macos
-          path: packages/electron-app/release/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: error
-
   build-windows:
     runs-on: windows-2025
     env:
@@ -236,8 +85,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -268,15 +115,6 @@ jobs:
             gh release upload $env:TAG $_.FullName --clobber
           }
 
-      - name: Upload Actions artifacts (Electron Windows)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}electron-windows
-          path: packages/electron-app/release/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: error
-
   build-linux:
     runs-on: ubuntu-24.04
     env:
@@ -286,8 +124,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -319,15 +155,6 @@ jobs:
             gh release upload "$TAG" "$file" --clobber
           done
 
-      - name: Upload Actions artifacts (Electron Linux)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}electron-linux
-          path: packages/electron-app/release/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: error
-
   build-tauri-macos:
     runs-on: macos-15-intel
     env:
@@ -337,8 +164,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -381,7 +206,7 @@ jobs:
         run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (macOS)
-        if: ${{ inputs.upload || inputs.upload_actions_artifacts }}
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
@@ -392,15 +217,6 @@ jobs:
             ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-macos-x64.zip"
           fi
 
-      - name: Upload Actions artifacts (Tauri macOS)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}tauri-macos
-          path: packages/tauri-app/release-tauri/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: warn
-
       - name: Upload Tauri release assets (macOS)
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -421,8 +237,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -465,7 +279,7 @@ jobs:
         run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (macOS arm64)
-        if: ${{ inputs.upload || inputs.upload_actions_artifacts }}
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
@@ -476,15 +290,6 @@ jobs:
             ditto -ck --sequesterRsrc --keepParent "$BUNDLE_ROOT/macos/CodeNomad.app" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-macos-arm64.zip"
           fi
 
-      - name: Upload Actions artifacts (Tauri macOS arm64)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}tauri-macos-arm64
-          path: packages/tauri-app/release-tauri/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: warn
-
       - name: Upload Tauri release assets (macOS arm64)
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -505,8 +310,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -552,7 +355,7 @@ jobs:
         run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (Windows)
-        if: ${{ inputs.upload || inputs.upload_actions_artifacts }}
+        if: ${{ inputs.upload }}
         shell: pwsh
         run: |
           $bundleRoot = "packages/tauri-app/target/release/bundle"
@@ -565,15 +368,6 @@ jobs:
             Compress-Archive -Path $exe.Directory.FullName -DestinationPath $dest -Force
           }
 
-      - name: Upload Actions artifacts (Tauri Windows)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}tauri-windows
-          path: packages/tauri-app/release-tauri/*.zip
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: warn
-
       - name: Upload Tauri release assets (Windows)
         if: ${{ inputs.upload && inputs.tag != '' }}
         shell: pwsh
@@ -594,8 +388,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -651,7 +443,7 @@ jobs:
         run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (Linux)
-        if: ${{ inputs.upload || inputs.upload_actions_artifacts }}
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           SEARCH_ROOT="packages/tauri-app/target"
@@ -677,15 +469,6 @@ jobs:
           cp "$deb" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.deb"
           cp "$rpm" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.rpm"
 
-      - name: Upload Actions artifacts (Tauri Linux)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}tauri-linux
-          path: packages/tauri-app/release-tauri/*
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: warn
-
       - name: Upload Tauri release assets (Linux)
         if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
@@ -707,8 +490,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup QEMU
         uses: docker/setup-qemu-action@v3
@@ -806,8 +587,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref || github.ref }}
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -844,12 +623,3 @@ jobs:
             echo "Uploading $file"
             gh release upload "$TAG" "$file" --clobber
           done
-
-      - name: Upload Actions artifacts (Electron Linux RPM)
-        if: ${{ inputs.upload_actions_artifacts }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{ inputs.actions_artifacts_name_prefix }}electron-linux-rpm
-          path: packages/electron-app/release/*.rpm
-          retention-days: ${{ inputs.actions_artifacts_retention_days }}
-          if-no-files-found: error

.github/workflows/comment-pr-artifacts.yml

@@ -1,121 +0,0 @@
-name: Comment PR Artifacts
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - ready_for_review
-
-permissions:
-  actions: read
-  contents: read
-  issues: write
-  pull-requests: write
-
-jobs:
-  comment:
-    runs-on: ubuntu-latest
-    env:
-      ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
-      BASE_REF: ${{ github.event.pull_request.base.ref }}
-      IS_DRAFT: ${{ github.event.pull_request.draft }}
-      PR_NUMBER: ${{ github.event.pull_request.number }}
-      HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-      RETENTION_DAYS: 7
-    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"
-          fi
-
-      - name: Wait for PR build and comment
-        if: ${{ steps.auth.outputs.allowed == 'true' && env.IS_DRAFT != 'true' }}
-        uses: actions/github-script@v8
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const owner = context.repo.owner;
-            const repo = context.repo.repo;
-            const prNumber = Number(process.env.PR_NUMBER);
-            const headSha = process.env.HEAD_SHA;
-            const retentionDays = Number(process.env.RETENTION_DAYS || '7');
-            const marker = '<!-- codenomad-pr-artifacts -->';
-
-            const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-            let matchedRun = null;
-            for (let attempt = 1; attempt <= 30; attempt += 1) {
-              const runs = await github.paginate(github.rest.actions.listWorkflowRuns, {
-                owner,
-                repo,
-                workflow_id: 'pr-build.yml',
-                event: 'pull_request',
-                per_page: 100,
-              });
-
-              const matchingRuns = runs
-                .filter((run) => run.head_sha === headSha)
-                .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-
-              matchedRun = matchingRuns[0] || null;
-              if (matchedRun && matchedRun.status === 'completed') {
-                break;
-              }
-
-              core.info(`Waiting for PR Build Validation run for ${headSha} (attempt ${attempt}/30)`);
-              await sleep(10000);
-            }
-
-            if (!matchedRun) {
-              core.setFailed(`Could not find PR Build Validation run for ${headSha}.`);
-              return;
-            }
-
-            if (matchedRun.status !== 'completed') {
-              core.setFailed(`PR Build Validation run ${matchedRun.id} did not complete in time.`);
-              return;
-            }
-
-            const artifacts = await github.paginate(
-              github.rest.actions.listWorkflowRunArtifacts,
-              { owner, repo, run_id: matchedRun.id, per_page: 100 }
-            );
-            const active = artifacts.filter((artifact) => !artifact.expired);
-
-            const runUrl = matchedRun.html_url;
-            const artifactsBlock = active.length
-              ? ['Artifacts:', ...active.map((artifact) => `- ${artifact.name}`)].join('\n')
-              : 'Artifacts: (none found on this run)';
-
-            const body = [
-              marker,
-              'PR builds are available as GitHub Actions artifacts:',
-              '',
-              runUrl,
-              '',
-              `Artifacts expire in ${retentionDays} days.`,
-              artifactsBlock,
-            ].join('\n');
-
-            const created = await github.rest.issues.createComment({
-              owner,
-              repo,
-              issue_number: prNumber,
-              body,
-            });
-            core.info(`Created artifacts comment: ${created.data.html_url}`);

.github/workflows/dev-release.yml

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

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

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

.github/workflows/pr-build.yml

@@ -1,57 +0,0 @@
-name: PR Build Validation
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - ready_for_review
-
-permissions:
-  contents: read
-  actions: write
-
-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' && !github.event.pull_request.draft }}
-    uses: ./.github/workflows/build-and-upload.yml
-    with:
-      ref: ${{ github.event.pull_request.head.sha }}
-      upload: false
-      upload_actions_artifacts: true
-      actions_artifacts_retention_days: 7
-      actions_artifacts_name_prefix: pr-${{ github.event.pull_request.number }}-${{ github.event.pull_request.head.sha }}-
-      set_versions: false

.github/workflows/release-ui.yml

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

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

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

.github/workflows/reusable-release.yml

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.12.3",
+  "version": "0.11.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.12.3",
+      "version": "0.11.3",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -3253,9 +3253,9 @@
       }
     },
     "node_modules/@tauri-apps/api": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.10.1.tgz",
-      "integrity": "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw==",
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.9.1.tgz",
+      "integrity": "sha512-IGlhP6EivjXHepbBic618GOmiWe4URJiIeZFlB7x3czM0yDHHYviH1Xvoiv4FefdkQtn6v7TuwWCRfOGdnVUGw==",
       "license": "Apache-2.0 OR MIT",
       "funding": {
         "type": "opencollective",
@@ -3305,32 +3305,6 @@
         "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",
@@ -10244,6 +10218,14 @@
       "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",
@@ -10984,36 +10966,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/virtua": {
-      "version": "0.48.8",
-      "resolved": "https://registry.npmjs.org/virtua/-/virtua-0.48.8.tgz",
-      "integrity": "sha512-jpsxOw5V4B6hg44JePRLo9DL0TV7N1lBEVtPjKpAJebXyhI2s9lfiXJESaLapNtr3vtiSk/pWHiLf7B2a6UcgQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0",
-        "solid-js": ">=1.0",
-        "svelte": ">=5.0",
-        "vue": ">=3.2"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        },
-        "solid-js": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vite": {
       "version": "5.4.21",
       "dev": true,
@@ -12033,7 +11985,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.12.3",
+      "version": "0.11.3",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -12043,7 +11995,6 @@
       "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",
@@ -12070,7 +12021,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.12.3",
+      "version": "0.11.3",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12111,7 +12062,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.12.3",
+      "version": "0.11.3",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12119,7 +12070,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.12.3",
+      "version": "0.11.3",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
@@ -12129,8 +12080,6 @@
         "@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",
@@ -12143,7 +12092,7 @@
         "shiki": "^3.13.0",
         "solid-js": "^1.8.0",
         "solid-toast": "^0.5.0",
-        "virtua": "^0.48.8",
+        "tauri-plugin-keepawake-api": "^0.1.0",
         "yaml": "^2.4.2"
       },
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.12.3",
+  "version": "0.11.3",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",
@@ -31,4 +31,4 @@
   "devDependencies": {
     "baseline-browser-mapping": "^2.9.11"
   }
-}
+}

packages/cloudflare/release-config.json

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

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

@@ -1,5 +1,4 @@
 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
@@ -66,24 +65,6 @@ 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,9 +431,7 @@ export class CliProcessManager extends EventEmitter {
 
     if (options.dev) {
       const devServer = process.env.VITE_DEV_SERVER_URL || process.env.ELECTRON_RENDERER_URL || "http://localhost:3000"
-      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)
+      args.push("--ui-dev-server", devServer, "--log-level", "debug")
     }
 
     return args

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

@@ -1,4 +1,4 @@
-const { contextBridge, ipcRenderer, webUtils } = require("electron")
+const { contextBridge, ipcRenderer } = require("electron")
 
 const electronAPI = {
   onCliStatus: (callback) => {
@@ -12,14 +12,6 @@ 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.12.3",
+  "version": "0.11.3",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {
@@ -15,10 +15,7 @@
   },
   "homepage": "https://github.com/NeuralNomadsAI/CodeNomad",
   "scripts": {
-    "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-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",
@@ -45,7 +42,6 @@
   "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.24"
+    "@opencode-ai/plugin": "1.2.6"
   }
 }

packages/server/README.md

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

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.12.3",
+  "version": "0.11.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.12.3",
+      "version": "0.11.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.12.3",
+  "version": "0.11.3",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {
@@ -46,4 +46,4 @@
     "tsx": "^4.20.6",
     "typescript": "^5.6.3"
   }
-}
+}

packages/server/src/index.ts

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

packages/server/src/workspaces/manager.ts

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

packages/tauri-app/package.json

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

packages/tauri-app/scripts/prebuild.js

@@ -20,7 +20,6 @@ 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,
@@ -92,15 +91,6 @@ 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
@@ -256,7 +246,6 @@ 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.12.3"
+version = "0.1.0"
 edition = "2021"
 license = "MIT"
 
@@ -19,13 +19,9 @@ thiserror = "1"
 anyhow = "1"
 which = "4"
 libc = "0.2"
-keepawake = "0.6"
 tauri-plugin-dialog = "2"
 dirs = "5"
 tauri-plugin-opener = "2"
-tauri-plugin-global-shortcut = "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/capabilities/main-window.json

@@ -11,7 +11,6 @@
     "core:menu:default",
     "dialog:allow-open",
     "opener:allow-default-urls",
-    "opener:allow-open-url",
     "notification:allow-is-permission-granted",
     "notification:allow-request-permission",
     "notification:allow-notify",

packages/tauri-app/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main-window-native-dialogs":{"identifier":"main-window-native-dialogs","description":"Grant the main window access to required core features and native dialog commands.","remote":{"urls":["http://127.0.0.1:*","http://localhost:*","http://tauri.localhost/*","https://tauri.localhost/*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","opener:allow-open-url","notification:allow-is-permission-granted","notification:allow-request-permission","notification:allow-notify","notification:allow-show","core:webview:allow-set-webview-zoom"]}}
+{"main-window-native-dialogs":{"identifier":"main-window-native-dialogs","description":"Grant the main window access to required core features and native dialog commands.","remote":{"urls":["http://127.0.0.1:*","http://localhost:*","http://tauri.localhost/*","https://tauri.localhost/*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","notification:allow-is-permission-granted","notification:allow-request-permission","notification:allow-notify","notification:allow-show","core:webview:allow-set-webview-zoom"]}}

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

@@ -2379,70 +2379,34 @@
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
         {
-          "description": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n",
+          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`",
           "type": "string",
-          "const": "global-shortcut:default",
-          "markdownDescription": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n"
+          "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 is_registered command without any pre-configured scope.",
+          "description": "Enables the start command without any pre-configured scope.",
           "type": "string",
-          "const": "global-shortcut:allow-is-registered",
-          "markdownDescription": "Enables the is_registered command without any pre-configured scope."
+          "const": "keepawake:allow-start",
+          "markdownDescription": "Enables the start command without any pre-configured scope."
         },
         {
-          "description": "Enables the register command without any pre-configured scope.",
+          "description": "Enables the stop command without any pre-configured scope.",
           "type": "string",
-          "const": "global-shortcut:allow-register",
-          "markdownDescription": "Enables the register command without any pre-configured scope."
+          "const": "keepawake:allow-stop",
+          "markdownDescription": "Enables the stop command without any pre-configured scope."
         },
         {
-          "description": "Enables the register_all command without any pre-configured scope.",
+          "description": "Denies the start command without any pre-configured scope.",
           "type": "string",
-          "const": "global-shortcut:allow-register-all",
-          "markdownDescription": "Enables the register_all command without any pre-configured scope."
+          "const": "keepawake:deny-start",
+          "markdownDescription": "Denies the start command without any pre-configured scope."
         },
         {
-          "description": "Enables the unregister command without any pre-configured scope.",
+          "description": "Denies the stop command without any pre-configured scope.",
           "type": "string",
-          "const": "global-shortcut:allow-unregister",
-          "markdownDescription": "Enables the unregister command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the unregister_all command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:allow-unregister-all",
-          "markdownDescription": "Enables the unregister_all command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the is_registered command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:deny-is-registered",
-          "markdownDescription": "Denies the is_registered command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:deny-register",
-          "markdownDescription": "Denies the register command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register_all command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:deny-register-all",
-          "markdownDescription": "Denies the register_all command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the unregister command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:deny-unregister",
-          "markdownDescription": "Denies the unregister command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the unregister_all command without any pre-configured scope.",
-          "type": "string",
-          "const": "global-shortcut:deny-unregister-all",
-          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
+          "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`",

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

@@ -2378,6 +2378,36 @@
           "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,8 +9,6 @@ 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};
@@ -19,24 +17,10 @@ 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 {
@@ -51,49 +35,7 @@ fn workspace_root() -> Option<PathBuf> {
 const SESSION_COOKIE_NAME: &str = "codenomad_session";
 
 const CLI_STOP_GRACE_SECS: u64 = 30;
-#[cfg(windows)]
-const CLI_WINDOWS_FORCE_GRACE_MS: u64 = 2_000;
 
-#[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();
@@ -404,21 +346,13 @@ impl CliProcessManager {
         let mut child_opt = self.child.lock();
         if let Some(mut child) = child_opt.take() {
             log_line(&format!("stopping CLI pid={}", child.id()));
-            #[cfg(windows)]
-            let mut forced_tree_shutdown = false;
             #[cfg(unix)]
             unsafe {
-                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);
-                }
+                libc::kill(child.id() as i32, libc::SIGTERM);
             }
             #[cfg(windows)]
             {
-                let _ = kill_process_tree_windows(child.id(), false);
+                let _ = child.kill();
             }
 
             let start = Instant::now();
@@ -426,21 +360,6 @@ impl CliProcessManager {
                 match child.try_wait() {
                     Ok(Some(_)) => break,
                     Ok(None) => {
-                        #[cfg(windows)]
-                        if !forced_tree_shutdown
-                            && start.elapsed() > Duration::from_millis(CLI_WINDOWS_FORCE_GRACE_MS)
-                        {
-                            log_line(&format!(
-                                "regular Windows shutdown still running after {}ms; escalating pid={}",
-                                CLI_WINDOWS_FORCE_GRACE_MS,
-                                child.id()
-                            ));
-                            forced_tree_shutdown = true;
-                            if !kill_process_tree_windows(child.id(), true) {
-                                let _ = child.kill();
-                            }
-                        }
-
                         if start.elapsed() > Duration::from_secs(CLI_STOP_GRACE_SECS) {
                             log_line(&format!(
                                 "stop timed out after {}s; sending SIGKILL pid={}",
@@ -449,21 +368,11 @@ impl CliProcessManager {
                             ));
                             #[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);
-                                }
+                                libc::kill(child.id() as i32, libc::SIGKILL);
                             }
                             #[cfg(windows)]
                             {
-                                if !forced_tree_shutdown
-                                    && !kill_process_tree_windows(child.id(), true)
-                                {
-                                    let _ = child.kill();
-                                } else if forced_tree_shutdown {
-                                    let _ = child.kill();
-                                }
+                                let _ = child.kill();
                             }
                             break;
                         }
@@ -541,12 +450,9 @@ 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) => {
@@ -556,12 +462,9 @@ 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()?
             }
         };
@@ -634,24 +537,7 @@ 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() {
-                #[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 _ = child.kill();
             }
             let _ = app_clone.emit("cli:error", json!({"message": "CLI did not start in time"}));
             Self::emit_status(&app_clone, &locked);
@@ -942,31 +828,14 @@ 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(ui_dev_server);
+            args.push("http://localhost:3000".to_string());
             args.push("--log-level".to_string());
-            args.push(log_level);
+            args.push("debug".to_string());
         } else {
             // Prod desktop: always keep loopback HTTP enabled.
             args.push("--https".to_string());
@@ -1031,11 +900,6 @@ 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")));
@@ -1131,18 +995,9 @@ fn first_existing(paths: Vec<Option<PathBuf>>) -> Option<String> {
 }
 
 fn normalize_path(path: PathBuf) -> String {
-    let resolved = if let Ok(clean) = path.canonicalize() {
-        clean
+    if let Ok(clean) = path.canonicalize() {
+        clean.to_string_lossy().to_string()
     } else {
-        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
+        path.to_string_lossy().to_string()
     }
 }

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

@@ -3,52 +3,20 @@
 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 std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
-use tauri::{AppHandle, Emitter, Manager, Runtime, WindowEvent, Wry};
-use tauri_plugin_global_shortcut::{
-    Code as ShortcutCode, GlobalShortcutExt, Shortcut, ShortcutState,
-};
+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);
-const DEFAULT_ZOOM_LEVEL: f64 = 1.0;
-const ZOOM_STEP: f64 = 0.2;
-const MIN_ZOOM_LEVEL: f64 = 0.2;
-const MAX_ZOOM_LEVEL: f64 = 5.0;
-
-#[cfg(windows)]
-const WINDOWS_APP_USER_MODEL_ID: &str = "ai.neuralnomads.codenomad.client";
 
+#[derive(Clone)]
 pub struct AppState {
     pub manager: CliProcessManager,
-    pub wake_lock: Mutex<Option<KeepAwake>>,
-    pub zoom_level: Mutex<f64>,
-}
-
-#[derive(Debug, Default, Deserialize)]
-#[serde(default, rename_all = "camelCase")]
-struct WakeLockConfig {
-    display: bool,
-    idle: bool,
-    sleep: bool,
 }
 
 #[tauri::command]
@@ -67,38 +35,6 @@ 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()
@@ -110,10 +46,7 @@ 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,
     }
 }
@@ -133,132 +66,6 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
     false
 }
 
-fn collect_directory_paths(paths: &[std::path::PathBuf]) -> Vec<String> {
-    paths
-        .iter()
-        .filter_map(|path| match std::fs::metadata(path) {
-            Ok(metadata) if metadata.is_dir() => Some(path.to_string_lossy().to_string()),
-            _ => None,
-        })
-        .collect()
-}
-
-fn emit_window_event(app_handle: &AppHandle, window_label: &str, event_name: &str) {
-    if let Some(window) = app_handle.get_webview_window(window_label) {
-        let _ = window.emit(event_name, ());
-    }
-}
-
-fn emit_folder_drop_event(
-    app_handle: &AppHandle,
-    window_label: &str,
-    event_name: &str,
-    paths: &[std::path::PathBuf],
-) {
-    let directories = collect_directory_paths(paths);
-
-    if directories.is_empty() {
-        return;
-    }
-
-    if let Some(window) = app_handle.get_webview_window(window_label) {
-        let _ = window.emit(event_name, json!({ "paths": directories }));
-    }
-}
-
-fn clamp_zoom_level(value: f64) -> f64 {
-    value.clamp(MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL)
-}
-
-fn set_main_window_zoom(app_handle: &AppHandle, next_zoom: f64) {
-    if let Some(window) = app_handle.get_webview_window("main") {
-        let normalized = clamp_zoom_level(next_zoom);
-        if window.set_zoom(normalized).is_ok() {
-            if let Ok(mut zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
-                *zoom_level = normalized;
-            }
-        }
-    }
-}
-
-fn reload_main_window(app_handle: &AppHandle) {
-    if let Some(window) = app_handle.get_webview_window("main") {
-        let _ = window.reload();
-    }
-}
-
-fn force_reload_main_window(app_handle: &AppHandle) {
-    if let Some(window) = app_handle.get_webview_window("main") {
-        if let Ok(mut url) = window.url() {
-            if should_allow_internal(&url) {
-                let reload_token = SystemTime::now()
-                    .duration_since(UNIX_EPOCH)
-                    .unwrap_or_default()
-                    .as_millis()
-                    .to_string();
-
-                let existing_pairs: Vec<(String, String)> = url
-                    .query_pairs()
-                    .into_owned()
-                    .filter(|(key, _)| key != "__codenomad_force_reload")
-                    .collect();
-
-                {
-                    let mut pairs = url.query_pairs_mut();
-                    pairs.clear();
-                    for (key, value) in existing_pairs {
-                        pairs.append_pair(&key, &value);
-                    }
-                    pairs.append_pair("__codenomad_force_reload", &reload_token);
-                }
-
-                let _ = window.navigate(url);
-                return;
-            }
-        }
-
-        let _ = window.reload();
-    }
-}
-
-fn toggle_fullscreen_window(app_handle: &AppHandle) {
-    if let Some(window) = app_handle.get_webview_window("main") {
-        let next_fullscreen = !window.is_fullscreen().unwrap_or(false);
-        let _ = window.set_fullscreen(next_fullscreen);
-        if cfg!(not(target_os = "macos")) {
-            if next_fullscreen {
-                let _ = window.hide_menu();
-            } else {
-                let _ = window.show_menu();
-            }
-        }
-    }
-}
-
-fn fullscreen_shortcut() -> Option<Shortcut> {
-    if cfg!(target_os = "macos") {
-        None
-    } else {
-        Some(Shortcut::new(None, ShortcutCode::F11))
-    }
-}
-
-#[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))
@@ -267,48 +74,14 @@ fn main() {
     tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_opener::init())
-        .plugin(
-            tauri_plugin_global_shortcut::Builder::new()
-                .with_handler(|app, shortcut, event| {
-                    if event.state() != ShortcutState::Pressed {
-                        return;
-                    }
-
-                    if fullscreen_shortcut().as_ref() == Some(shortcut) {
-                        toggle_fullscreen_window(app);
-                    }
-                })
-                .build(),
-        )
+        .plugin(tauri_plugin_keepawake::init())
         .plugin(tauri_plugin_notification::init())
         .plugin(navigation_guard)
         .manage(AppState {
             manager: CliProcessManager::new(),
-            wake_lock: Mutex::new(None),
-            zoom_level: Mutex::new(DEFAULT_ZOOM_LEVEL),
         })
         .setup(|app| {
-            set_windows_app_user_model_id();
             build_menu(&app.handle())?;
-            if let Some(shortcut) = fullscreen_shortcut() {
-                let shortcut_manager = app.handle().global_shortcut();
-                let _ = shortcut_manager.register(shortcut.clone());
-
-                if let Some(window) = app.get_webview_window("main") {
-                    let app_handle = app.handle().clone();
-                    window.on_window_event(move |event| {
-                        if let WindowEvent::Focused(focused) = event {
-                            let shortcut_manager = app_handle.global_shortcut();
-                            if *focused {
-                                let _ = shortcut_manager.register(shortcut.clone());
-                            } else {
-                                let _ = shortcut_manager.unregister(shortcut.clone());
-                            }
-                        }
-                    });
-                }
-            }
-
             let dev_mode = is_dev_mode();
             let app_handle = app.handle().clone();
             let manager = app.state::<AppState>().manager.clone();
@@ -319,12 +92,7 @@ fn main() {
             });
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![
-            cli_get_status,
-            cli_restart,
-            wake_lock_start,
-            wake_lock_stop
-        ])
+        .invoke_handler(tauri::generate_handler![cli_get_status, cli_restart])
         .on_menu_event(|app_handle, event| {
             match event.id().0.as_str() {
                 // File menu
@@ -333,42 +101,36 @@ fn main() {
                         let _ = window.emit("menu:newInstance", ());
                     }
                 }
+                "close" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.close();
+                    }
+                }
                 "quit" => {
                     app_handle.exit(0);
                 }
 
                 // View menu
                 "reload" => {
-                    reload_main_window(app_handle);
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload()");
+                    }
                 }
                 "force_reload" => {
-                    force_reload_main_window(app_handle);
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload(true)");
+                    }
                 }
                 "toggle_devtools" => {
                     if let Some(window) = app_handle.get_webview_window("main") {
-                        if window.is_devtools_open() {
-                            window.close_devtools();
-                        } else {
-                            window.open_devtools();
-                        }
-                    }
-                }
-                "reset_zoom" => {
-                    set_main_window_zoom(app_handle, DEFAULT_ZOOM_LEVEL);
-                }
-                "zoom_in" => {
-                    if let Ok(zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
-                        set_main_window_zoom(app_handle, *zoom_level + ZOOM_STEP);
-                    }
-                }
-                "zoom_out" => {
-                    if let Ok(zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
-                        set_main_window_zoom(app_handle, *zoom_level - ZOOM_STEP);
+                        window.open_devtools();
                     }
                 }
 
                 "toggle_fullscreen" => {
-                    toggle_fullscreen_window(app_handle);
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.set_fullscreen(!window.is_fullscreen().unwrap_or(false));
+                    }
                 }
 
                 // Window menu
@@ -382,11 +144,6 @@ fn main() {
                         let _ = window.maximize();
                     }
                 }
-                "close_window" => {
-                    if let Some(window) = app_handle.get_webview_window("main") {
-                        let _ = window.close();
-                    }
-                }
 
                 // App menu (macOS)
                 "about" => {
@@ -430,27 +187,6 @@ 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, .. },
                 ..
@@ -474,7 +210,6 @@ fn main() {
 
 fn build_menu(app: &AppHandle) -> tauri::Result<()> {
     let is_mac = cfg!(target_os = "macos");
-    let is_linux = cfg!(target_os = "linux");
 
     // Create submenus
     let mut submenus = Vec::new();
@@ -499,77 +234,16 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
         "new_instance",
         "New Instance",
         true,
-        Some("CmdOrCtrl+N"),
+        Some("CmdOrCtrl+N")
     )?;
-
-    let file_menu = if is_mac {
-        SubmenuBuilder::new(app, "File")
-            .item(&new_instance_item)
-            .separator()
-            .close_window()
-            .build()?
-    } else {
-        SubmenuBuilder::new(app, "File")
-            .item(&new_instance_item)
-            .separator()
-            .text("quit", "Quit")
-            .build()?
-    };
+    
+    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" })
+        .build()?;
     submenus.push(file_menu);
 
-    let reload_item = MenuItem::with_id(app, "reload", "Reload", true, Some("CmdOrCtrl+R"))?;
-    let force_reload_item = MenuItem::with_id(
-        app,
-        "force_reload",
-        "Force Reload",
-        true,
-        Some("CmdOrCtrl+Shift+R"),
-    )?;
-    let toggle_devtools_item = MenuItem::with_id(
-        app,
-        "toggle_devtools",
-        "Toggle Developer Tools",
-        true,
-        Some("Alt+CmdOrCtrl+I"),
-    )?;
-    let reset_zoom_item =
-        MenuItem::with_id(app, "reset_zoom", "Actual Size", true, Some("CmdOrCtrl+0"))?;
-    let zoom_in_item = MenuItem::with_id(
-        app,
-        "zoom_in",
-        if is_mac { "Zoom In" } else { "Zoom In\tCtrl++" },
-        true,
-        None::<&str>,
-    )?;
-    let zoom_out_item = MenuItem::with_id(
-        app,
-        "zoom_out",
-        if is_mac {
-            "Zoom Out"
-        } else {
-            "Zoom Out\tCtrl+-"
-        },
-        true,
-        None::<&str>,
-    )?;
-    let toggle_fullscreen_item = MenuItem::with_id(
-        app,
-        "toggle_fullscreen",
-        if is_mac {
-            "Toggle Full Screen"
-        } else {
-            "Toggle Full Screen\tF11"
-        },
-        true,
-        if is_mac {
-            Some("Ctrl+Cmd+F")
-        } else {
-            None::<&str>
-        },
-    )?;
-    let close_window_item =
-        MenuItem::with_id(app, "close_window", "Close", true, Some("CmdOrCtrl+W"))?;
-
     // Edit menu with predefined items for standard functionality
     let edit_menu = SubmenuBuilder::new(app, "Edit")
         .undo()
@@ -585,48 +259,27 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
 
     // View menu
     let view_menu = SubmenuBuilder::new(app, "View")
-        .item(&reload_item)
-        .item(&force_reload_item)
-        .item(&toggle_devtools_item)
+        .text("reload", "Reload")
+        .text("force_reload", "Force Reload")
+        .text("toggle_devtools", "Toggle Developer Tools")
         .separator()
-        .item(&reset_zoom_item)
-        .item(&zoom_in_item)
-        .item(&zoom_out_item)
+
         .separator()
-        .item(&toggle_fullscreen_item)
+        .text("toggle_fullscreen", "Toggle Full Screen")
         .build()?;
     submenus.push(view_menu);
 
     // Window menu
-    let window_menu = if is_linux {
-        SubmenuBuilder::new(app, "Window")
-            .text("minimize", "Minimize")
-            .text("zoom", "Zoom")
-            .separator()
-            .item(&close_window_item)
-            .build()?
-    } else if is_mac {
-        SubmenuBuilder::new(app, "Window")
-            .minimize()
-            .maximize()
-            .build()?
-    } else {
-        SubmenuBuilder::new(app, "Window")
-            .minimize()
-            .maximize()
-            .separator()
-            .close_window()
-            .build()?
-    };
+    let window_menu = SubmenuBuilder::new(app, "Window")
+        .text("minimize", "Minimize")
+        .text("zoom", "Zoom")
+        .build()?;
     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.12.3",
-  "identifier": "ai.neuralnomads.codenomad.client",
+  "version": "0.1.0",
+  "identifier": "ai.opencode.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.12.3",
+  "version": "0.11.3",
   "private": true,
   "license": "MIT",
   "type": "module",
@@ -18,10 +18,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",
+    "@tauri-apps/plugin-notification": "^2.3.3",
     "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
@@ -32,7 +30,7 @@
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
     "solid-toast": "^0.5.0",
-    "virtua": "^0.48.8",
+    "tauri-plugin-keepawake-api": "^0.1.0",
     "yaml": "^2.4.2"
   },
   "devDependencies": {
@@ -45,4 +43,4 @@
     "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-solid": "^2.10.0"
   }
-}
+}

packages/ui/src/App.tsx

@@ -9,15 +9,15 @@ 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 { SettingsScreen } from "./components/settings-screen"
+import { RemoteAccessOverlay } from "./components/remote-access-overlay"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
+import { initMarkdown } from "./lib/markdown"
 import { initGithubStars } from "./stores/github-stars"
 
+import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
-import { launchError, showLaunchError, clearLaunchError } from "./stores/launch-errors"
-import { formatLaunchErrorMessage, isMissingBinaryMessage } from "./lib/launch-errors"
 import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
@@ -52,11 +52,11 @@ import {
 } from "./stores/sessions"
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
-import { openSettings } from "./stores/settings-screen"
 
 const log = getLogger("actions")
 
 const App: Component = () => {
+  const { isDark } = useTheme()
   const { t } = useI18n()
   const {
     preferences,
@@ -75,6 +75,14 @@ const App: Component = () => {
     setToolInputsVisibility,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
+  interface LaunchErrorState {
+    message: string
+    binaryPath: string
+    missingBinary: boolean
+  }
+  const [launchError, setLaunchError] = createSignal<LaunchErrorState | null>(null)
+  const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
+  const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
@@ -180,6 +188,10 @@ const App: Component = () => {
     }
   })
 
+  createEffect(() => {
+    void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error))
+  })
+
   createEffect(() => {
     initReleaseNotifications()
   })
@@ -233,6 +245,35 @@ const App: Component = () => {
 
   const launchErrorMessage = () => launchError()?.message ?? ""
 
+  const formatLaunchErrorMessage = (error: unknown): string => {
+    if (!error) {
+      return t("app.launchError.fallbackMessage")
+    }
+    const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
+    try {
+      const parsed = JSON.parse(raw)
+      if (parsed && typeof parsed.error === "string") {
+        return parsed.error
+      }
+    } catch {
+      // ignore JSON parse errors
+    }
+    return raw
+  }
+
+  const isMissingBinaryMessage = (message: string): boolean => {
+    const normalized = message.toLowerCase()
+    return (
+      normalized.includes("opencode binary not found") ||
+      normalized.includes("binary not found") ||
+      normalized.includes("no such file or directory") ||
+      normalized.includes("binary is not executable") ||
+      normalized.includes("enoent")
+    )
+  }
+
+  const clearLaunchError = () => setLaunchError(null)
+
   async function handleSelectFolder(folderPath: string, binaryPath?: string) {
     if (!folderPath) {
       return
@@ -244,15 +285,20 @@ const App: Component = () => {
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
       setShowFolderSelection(false)
+      setIsAdvancedSettingsOpen(false)
 
       log.info("Created instance", {
         instanceId,
         port: instances().get(instanceId)?.port,
       })
     } catch (error) {
-      const message = formatLaunchErrorMessage(error, t("app.launchError.fallbackMessage"))
+      const message = formatLaunchErrorMessage(error)
       const missingBinary = isMissingBinaryMessage(message)
-      showLaunchError({ source: "create", message, binaryPath: selectedBinary, missingBinary })
+      setLaunchError({
+        message,
+        binaryPath: selectedBinary,
+        missingBinary,
+      })
       log.error("Failed to create instance", error)
     } finally {
       setIsSelectingFolder(false)
@@ -265,7 +311,7 @@ const App: Component = () => {
 
   function handleLaunchErrorAdvanced() {
     clearLaunchError()
-    openSettings("opencode")
+    setIsAdvancedSettingsOpen(true)
   }
 
   function handleNewInstanceRequest() {
@@ -478,6 +524,7 @@ const App: Component = () => {
                   onSelect={setActiveInstanceId}
                   onClose={handleCloseInstance}
                   onNew={handleNewInstanceRequest}
+                  onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
                 />
               </Show>
  
@@ -486,24 +533,17 @@ 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" }}
-                         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}
+                      <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}
                             tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
                             mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
                             onEnterMobileFullscreen={() => void enterMobileFullscreen()}
@@ -523,6 +563,10 @@ const App: Component = () => {
           <FolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
+            advancedSettingsOpen={isAdvancedSettingsOpen()}
+            onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
+            onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
+            onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
           />
         </Show>
 
@@ -532,8 +576,12 @@ const App: Component = () => {
               <FolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
+                advancedSettingsOpen={isAdvancedSettingsOpen()}
+                onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
+                onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
                 onClose={() => {
                   setShowFolderSelection(false)
+                  setIsAdvancedSettingsOpen(false)
                   clearLaunchError()
                 }}
               />
@@ -541,7 +589,7 @@ const App: Component = () => {
           </div>
         </Show>
  
-        <SettingsScreen />
+        <RemoteAccessOverlay open={remoteAccessOpen()} onClose={() => setRemoteAccessOpen(false)} />
  
         <AlertDialog />
 

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

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

packages/ui/src/components/code-block-inline.tsx

@@ -1,8 +1,7 @@
 import { createSignal, onMount, Show, createEffect } from "solid-js"
 import type { Highlighter } from "shiki/bundle/full"
 import { useTheme } from "../lib/theme"
-import { getSharedHighlighter } from "../lib/markdown"
-import { escapeHtml } from "../lib/text-render-utils"
+import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 

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

@@ -1,10 +1,9 @@
 import { createMemo, Show, createEffect, onCleanup } from "solid-js"
 import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
-import "@git-diff-view/solid/styles/diff-view-pure.css"
 import { disableCache } from "@git-diff-view/core"
 import type { DiffHighlighterLang } from "@git-diff-view/core"
 import { ErrorBoundary } from "solid-js"
-import { getLanguageFromPath } from "../lib/text-render-utils"
+import { getLanguageFromPath } from "../lib/markdown"
 import { normalizeDiffText } from "../lib/diff-utils"
 import { setCacheEntry } from "../lib/global-cache"
 import type { CacheEntryParams } from "../lib/global-cache"
@@ -135,4 +134,4 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
       </Show>
     </div>
   )
-}
+}

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

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

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

@@ -2,32 +2,32 @@ 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"
-import { openExternalUrl } from "../lib/external-url"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
-const GITHUB_URL = "https://github.com/NeuralNomadsAI/CodeNomad"
-const DISCORD_URL = "https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945"
 
 
 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 } = useConfig()
+  const { recentFolders, removeRecentFolder, preferences, updatePreferences, serverSettings, updateLastUsedBinary } = useConfig()
   const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
@@ -45,7 +45,6 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     { value: "ru", label: "Русский" },
     { value: "ja", label: "日本語" },
     { value: "zh-Hans", label: "简体中文" },
-    { value: "he", label: "עברית" },
   ]
 
   const selectedLanguageOption = () => languageOptions.find((opt) => opt.value === locale()) ?? languageOptions[0]
@@ -194,31 +193,6 @@ 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)
@@ -236,6 +210,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
 
+  const openExternalLink = (url: string) => {
+    if (typeof window === "undefined") return
+    window.open(url, "_blank", "noopener,noreferrer")
+  }
+ 
   async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
@@ -258,6 +237,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     handleFolderSelect(path)
   }
  
+  function handleBinaryChange(binary: string) {
+
+    setSelectedBinary(binary)
+  }
+
   function handleRemove(path: string, e?: Event) {
     if (isLoading()) return
     e?.stopPropagation()
@@ -333,16 +317,12 @@ 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"
           aria-busy={isLoading() ? "true" : "false"}
         >
-          <div class="absolute top-4" style="inset-inline-start: 1.5rem;">
+          <div class="absolute top-4 left-6">
             <Select<LanguageOption>
               value={selectedLanguageOption()}
               onChange={(value) => {
@@ -386,25 +366,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               </Select.Portal>
             </Select>
           </div>
-          <div class="absolute top-4 flex items-center gap-2" style="inset-inline-end: 1.5rem;">
-            <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>
+          <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>
             <Show when={props.onClose}>
               <button
                 type="button"
@@ -424,7 +396,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
             <div class="mt-3 flex justify-center gap-2">
               <a
-                href={GITHUB_URL}
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
                 target="_blank"
                 rel="noreferrer"
                 class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
@@ -432,13 +404,13 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 title={t("folderSelection.links.github")}
                 onClick={(event) => {
                   event.preventDefault()
-                  void openExternalUrl(GITHUB_URL, "folder-selection")
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
                 }}
               >
                 <GitHubMarkIcon class="w-4 h-4" />
               </a>
               <a
-                href={GITHUB_URL}
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
                 target="_blank"
                 rel="noreferrer"
                 class="selector-button selector-button-secondary w-auto px-3 py-1.5 inline-flex items-center justify-center gap-1.5"
@@ -446,7 +418,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 title={t("folderSelection.links.githubStars")}
                 onClick={(event) => {
                   event.preventDefault()
-                  void openExternalUrl(GITHUB_URL, "folder-selection")
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
                 }}
               >
                 <Star class="w-4 h-4" />
@@ -455,7 +427,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 </Show>
               </a>
               <a
-                href={DISCORD_URL}
+                href="https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945"
                 target="_blank"
                 rel="noreferrer"
                 class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
@@ -463,7 +435,9 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 title={t("folderSelection.links.discord")}
                 onClick={(event) => {
                   event.preventDefault()
-                  void openExternalUrl(DISCORD_URL, "folder-selection")
+                  openExternalLink(
+                    "https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945",
+                  )
                 }}
               >
                 <DiscordSymbolIcon class="w-4 h-4" />
@@ -590,12 +564,12 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                   </button>
                 </div>
 
-                {/* OpenCode settings section */}
+                {/* Advanced settings section */}
                 <div class="panel-section w-full">
-                  <button onClick={() => openSettings("opencode")} class="panel-section-header w-full justify-between">
+                  <button onClick={() => props.onAdvancedSettingsOpen?.()} 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.opencode")}</span>
+                      <span class="text-sm font-medium text-secondary">{t("folderSelection.advancedSettings")}</span>
                     </div>
                     <ChevronRight class="w-4 h-4 icon-muted" />
                   </button>
@@ -645,17 +619,16 @@ 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-info.tsx

@@ -82,7 +82,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
       <div class="panel-body space-y-3">
         <div>
           <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("instanceInfo.labels.folder")}</div>
-          <div dir="ltr" class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
+          <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
             {currentInstance().folder}
           </div>
         </div>
@@ -94,7 +94,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                 <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
                   {t("instanceInfo.labels.project")}
                 </div>
-                <div dir="ltr" class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
+                <div class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
                   {project().id}
                 </div>
               </div>
@@ -137,7 +137,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               {t("instanceInfo.labels.binaryPath")}
             </div>
-            <div dir="ltr" class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+            <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               {currentInstance().binaryPath}
             </div>
           </div>
@@ -151,7 +151,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="space-y-1">
               <For each={environmentEntries()}>
                 {([key, value]) => (
-                  <div dir="ltr" class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                  <div class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
                     <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
                       {key}
                     </span>

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

@@ -1,14 +1,15 @@
-import { Component, For, Show, createMemo } from "solid-js"
+import { Component, For, Show, createMemo, createSignal } 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, Settings } from "lucide-solid"
+import { Plus, MonitorUp, Bell, BellOff } 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>
@@ -16,11 +17,13 @@ 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))
@@ -30,10 +33,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   })
 
   const notificationTitle = createMemo(() => {
-    if (!notificationsSupported()) return t("settings.notifications.status.unsupported")
-    return notificationsEnabled()
-      ? t("settings.notifications.status.enabled")
-      : t("settings.notifications.status.disabled")
+    if (!notificationsSupported()) return "Notifications unsupported"
+    return notificationsEnabled() ? "Notifications enabled" : "Notifications disabled"
   })
 
   return (
@@ -71,35 +72,32 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
                 />
               </div>
             </Show>
-             <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>
+            <ThemeModeToggle class="new-tab-button" />
 
-             <button
-               class={`new-tab-button ${!notificationsSupported() ? "opacity-50" : ""}`}
-               onClick={() => openSettings("notifications")}
-               title={notificationTitle()}
-               aria-label={notificationTitle()}
-             >
+            <button
+              class={`new-tab-button ${!notificationsSupported() ? "opacity-50" : ""}`}
+              onClick={() => setNotificationsOpen(true)}
+              title={notificationTitle()}
+              aria-label={notificationTitle()}
+            >
               <Dynamic component={notificationIcon()} class="w-4 h-4" />
             </button>
 
-             <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>
+            <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>
           </div>
         </div>
       </div>
+
+      <NotificationsSettingsModal open={notificationsOpen()} onClose={() => setNotificationsOpen(false)} />
     </div>
 
   )

packages/ui/src/components/instance-welcome-view.tsx

@@ -404,7 +404,6 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                                 <div class="flex items-center gap-2">
                                   <span
                                     class="text-sm font-medium text-primary whitespace-normal break-words transition-colors"
-                                    dir="auto"
                                     classList={{
                                       "text-accent": isFocused(),
                                     }}

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

@@ -62,9 +62,6 @@ 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
@@ -81,8 +78,7 @@ interface InstanceShellProps {
 }
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
-  const { t, locale } = useI18n()
-  const isRTL = () => locale() === "he"
+  const { t } = useI18n()
 
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
   const [rightDrawerWidth, setRightDrawerWidth] = createSignal(
@@ -119,7 +115,6 @@ 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"
@@ -128,7 +123,6 @@ 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")
@@ -372,7 +366,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           sx={{
             width: `${sessionSidebarWidth()}px`,
             flexShrink: 0,
-            borderInlineEnd: "1px solid var(--border-base)",
+            borderRight: "1px solid var(--border-base)",
             backgroundColor: "var(--surface-secondary)",
             height: "100%",
             minHeight: 0,
@@ -414,7 +408,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const modalProps = container ? { container: container as Element } : undefined
     return (
       <Drawer
-        anchor={isRTL() ? "right" : "left"}
+        anchor="left"
         variant="temporary"
         open={leftOpen()}
         onClose={closeLeftDrawer}
@@ -423,7 +417,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           "& .MuiDrawer-paper": {
             width: isPhoneLayout() ? "100vw" : `${sessionSidebarWidth()}px`,
             boxSizing: "border-box",
-            borderInlineEnd: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
+            borderRight: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
             backgroundColor: "var(--surface-secondary)",
             backgroundImage: "none",
             color: "var(--text-primary)",
@@ -481,7 +475,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           sx={{
             width: `${rightDrawerWidth()}px`,
             flexShrink: 0,
-            borderInlineStart: "1px solid var(--border-base)",
+            borderLeft: "1px solid var(--border-base)",
             backgroundColor: "var(--surface-secondary)",
             height: "100%",
             minHeight: 0,
@@ -524,7 +518,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const modalProps = container ? { container: container as Element } : undefined
     return (
       <Drawer
-        anchor={isRTL() ? "left" : "right"}
+        anchor="right"
         variant="temporary"
         open={rightOpen()}
         onClose={closeRightDrawer}
@@ -533,7 +527,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           "& .MuiDrawer-paper": {
             width: isPhoneLayout() ? "100vw" : `${rightDrawerWidth()}px`,
             boxSizing: "border-box",
-            borderInlineStart: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
+            borderLeft: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
             backgroundColor: "var(--surface-secondary)",
             backgroundImage: "none",
             color: "var(--text-primary)",
@@ -602,7 +596,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={!compactHeaderLayout()}
+                when={!isPhoneLayout()}
                 fallback={
                   <div class="flex flex-col w-full gap-1.5">
                     <div class="flex flex-wrap items-center justify-between gap-2 w-full">
@@ -631,7 +625,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     <div class="flex flex-wrap items-center justify-center gap-1">
                       <button
                         type="button"
-                        class="connection-status-button command-palette-button"
+                        class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
                         onClick={handleCommandPaletteClick}
                         aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                         style={{ flex: "0 0 auto", width: "auto" }}
@@ -640,8 +634,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
@@ -652,7 +646,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       </span>
                     </div>
 
-                    <Show when={isPhoneLayout() && !props.mobileFullscreenMode}>
+                    <Show when={!props.mobileFullscreenMode}>
                       <IconButton
                         color="inherit"
                         onClick={props.onEnterMobileFullscreen}
@@ -676,18 +670,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                         {rightAppBarButtonIcon()}
                       </IconButton>
                     </Show>
-                    </div>
+                  </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
-                      <Show when={!showingInfoView()}>
-                        <ContextMeter
-                          usedTokens={tokenStats().used}
-                          availableTokens={tokenStats().avail}
-                          formatTokens={formatTokenTotal}
-                          usedLabel={t("instanceShell.metrics.usedLabel")}
-                          availableLabel={t("instanceShell.metrics.availableLabel")}
-                        />
-                      </Show>
+                      <ContextMeter
+                        usedTokens={tokenStats().used}
+                        availableTokens={tokenStats().avail}
+                        formatTokens={formatTokenTotal}
+                        usedLabel={t("instanceShell.metrics.usedLabel")}
+                        availableLabel={t("instanceShell.metrics.availableLabel")}
+                      />
                     </div>
                 </div>
               }
@@ -729,7 +721,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               <div class="session-toolbar-center flex items-center justify-center gap-2 min-w-[160px]">
                 <button
                   type="button"
-                  class="connection-status-button command-palette-button"
+                  class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}
@@ -743,7 +735,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   <Kbd shortcut="cmd+shift+p" />
                 </span>
 
-                <div class="ms-auto flex items-center gap-3">
+                <div class="ml-auto flex items-center gap-3">
                   <div class="connection-status-meta flex items-center gap-3">
                     <Show when={connectionStatus() === "connected"}>
                       <span class="status-indicator connected">
@@ -804,14 +796,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               >
                 <For each={cachedSessionIds()}>
                   {(sessionId) => {
-                    const isActive = () => Boolean(props.isActiveInstance) && activeSessionIdForInstance() === sessionId
+                    const isActive = () => 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
@@ -847,10 +837,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   return (
     <>
-      <div
-        class="instance-shell2 flex flex-col flex-1 min-h-0"
-        data-instance-id={props.instance.id}
-      >
+      <div class="instance-shell2 flex flex-col flex-1 min-h-0">
         <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
           {sessionLayout}
         </Show>

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

@@ -1,15 +1,13 @@
 import {
   Show,
-  Suspense,
   createEffect,
   createMemo,
   createSignal,
-  lazy,
   onCleanup,
   type Accessor,
   type Component,
 } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 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"
@@ -22,6 +20,11 @@ import type { Session } from "../../../../types/session"
 import type { DrawerViewState } from "../types"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, RightPanelTab } from "./types"
 
+import ChangesTab from "./tabs/ChangesTab"
+import FilesTab from "./tabs/FilesTab"
+import GitChangesTab from "./tabs/GitChangesTab"
+import StatusTab from "./tabs/StatusTab"
+
 import { getDefaultWorktreeSlug, getOrCreateWorktreeClient, getWorktreeSlugForSession } from "../../../../stores/worktrees"
 import { requestData } from "../../../../lib/opencode-api"
 import { buildUnifiedDiffFromSdkPatch, tryReverseApplyUnifiedDiff } from "../../../../lib/unified-diff-reverse"
@@ -46,15 +49,6 @@ import {
   readStoredRightPanelTab,
 } from "../storage"
 
-const LazyChangesTab = lazy(() => import("./tabs/ChangesTab"))
-const LazyGitChangesTab = lazy(() => import("./tabs/GitChangesTab"))
-const LazyFilesTab = lazy(() => import("./tabs/FilesTab"))
-const LazyStatusTab = lazy(() => import("./tabs/StatusTab"))
-
-function RightPanelTabFallback() {
-  return <div class="flex-1 min-h-0" />
-}
-
 interface RightPanelProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -249,8 +243,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     const mode = activeSplitResize()
     if (!mode) return
     event.preventDefault()
-    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
-    const delta = (event.clientX - splitResizeStartX()) * (isRtl ? -1 : 1)
+    const delta = event.clientX - splitResizeStartX()
     const next = clampSplitWidth(splitResizeStartWidth() + delta)
     if (mode === "changes") setChangesSplitWidth(next)
     else if (mode === "git-changes") setGitChangesSplitWidth(next)
@@ -273,8 +266,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     const touch = event.touches[0]
     if (!touch) return
     event.preventDefault()
-    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
-    const delta = (touch.clientX - splitResizeStartX()) * (isRtl ? -1 : 1)
+    const delta = touch.clientX - splitResizeStartX()
     const next = clampSplitWidth(splitResizeStartWidth() + delta)
     if (mode === "changes") setChangesSplitWidth(next)
     else if (mode === "git-changes") setGitChangesSplitWidth(next)
@@ -573,13 +565,6 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     void loadBrowserEntries(browserPath())
   })
 
-  createEffect(() => {
-    if (rightPanelTab() === "files") return
-    setBrowserSelectedContent(null)
-    setBrowserSelectedLoading(false)
-    setBrowserSelectedError(null)
-  })
-
   createEffect(() => {
     if (rightPanelTab() !== "git-changes") return
     if (gitStatusLoading()) return
@@ -587,14 +572,6 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     void loadGitStatus()
   })
 
-  createEffect(() => {
-    if (rightPanelTab() === "git-changes") return
-    setGitSelectedBefore(null)
-    setGitSelectedAfter(null)
-    setGitSelectedLoading(false)
-    setGitSelectedError(null)
-  })
-
   const handleSelectChangesFile = (file: string, closeList: boolean) => {
     setSelectedFile(file)
     if (closeList) {
@@ -761,109 +738,101 @@ const RightPanel: Component<RightPanelProps> = (props) => {
 
       <div class="flex-1 overflow-y-auto">
         <Show when={rightPanelTab() === "changes"}>
-          <Suspense fallback={<RightPanelTabFallback />}>
-            <LazyChangesTab
-              t={props.t}
-              instanceId={props.instanceId}
-              activeSessionId={props.activeSessionId}
-              activeSessionDiffs={props.activeSessionDiffs}
-              selectedFile={selectedFile}
-              onSelectFile={handleSelectChangesFile}
-              diffViewMode={diffViewMode}
-              diffContextMode={diffContextMode}
-              diffWordWrapMode={diffWordWrapMode}
-              onViewModeChange={setDiffViewMode}
-              onContextModeChange={setDiffContextMode}
-              onWordWrapModeChange={setDiffWordWrapMode}
-              listOpen={changesListOpen}
-              onToggleList={toggleChangesList}
-              splitWidth={changesSplitWidth}
-              onResizeMouseDown={handleSplitResizeMouseDown("changes")}
-              onResizeTouchStart={handleSplitResizeTouchStart("changes")}
-              isPhoneLayout={props.isPhoneLayout}
-            />
-          </Suspense>
+          <ChangesTab
+            t={props.t}
+            instanceId={props.instanceId}
+            activeSessionId={props.activeSessionId}
+            activeSessionDiffs={props.activeSessionDiffs}
+            selectedFile={selectedFile}
+            onSelectFile={handleSelectChangesFile}
+            diffViewMode={diffViewMode}
+            diffContextMode={diffContextMode}
+            diffWordWrapMode={diffWordWrapMode}
+            onViewModeChange={setDiffViewMode}
+            onContextModeChange={setDiffContextMode}
+            onWordWrapModeChange={setDiffWordWrapMode}
+            listOpen={changesListOpen}
+            onToggleList={toggleChangesList}
+            splitWidth={changesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("changes")}
+            onResizeTouchStart={handleSplitResizeTouchStart("changes")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
         </Show>
 
         <Show when={rightPanelTab() === "git-changes"}>
-          <Suspense fallback={<RightPanelTabFallback />}>
-            <LazyGitChangesTab
-              t={props.t}
-              activeSessionId={props.activeSessionId}
-              entries={gitStatusEntries}
-              statusLoading={gitStatusLoading}
-              statusError={gitStatusError}
-              selectedPath={gitSelectedPath}
-              selectedLoading={gitSelectedLoading}
-              selectedError={gitSelectedError}
-              selectedBefore={gitSelectedBefore}
-              selectedAfter={gitSelectedAfter}
-              mostChangedPath={gitMostChangedPath}
-              scopeKey={gitScopeKey}
-              diffViewMode={diffViewMode}
-              diffContextMode={diffContextMode}
-              diffWordWrapMode={diffWordWrapMode}
-              onViewModeChange={setDiffViewMode}
-              onContextModeChange={setDiffContextMode}
-              onWordWrapModeChange={setDiffWordWrapMode}
-              onOpenFile={(path: string) => void openGitFile(path)}
-              onRefresh={() => void refreshGitStatus()}
-              listOpen={gitChangesListOpen}
-              onToggleList={toggleGitList}
-              splitWidth={gitChangesSplitWidth}
-              onResizeMouseDown={handleSplitResizeMouseDown("git-changes")}
-              onResizeTouchStart={handleSplitResizeTouchStart("git-changes")}
-              isPhoneLayout={props.isPhoneLayout}
-            />
-          </Suspense>
+          <GitChangesTab
+            t={props.t}
+            activeSessionId={props.activeSessionId}
+            entries={gitStatusEntries}
+            statusLoading={gitStatusLoading}
+            statusError={gitStatusError}
+            selectedPath={gitSelectedPath}
+            selectedLoading={gitSelectedLoading}
+            selectedError={gitSelectedError}
+            selectedBefore={gitSelectedBefore}
+            selectedAfter={gitSelectedAfter}
+            mostChangedPath={gitMostChangedPath}
+            scopeKey={gitScopeKey}
+            diffViewMode={diffViewMode}
+            diffContextMode={diffContextMode}
+            diffWordWrapMode={diffWordWrapMode}
+            onViewModeChange={setDiffViewMode}
+            onContextModeChange={setDiffContextMode}
+            onWordWrapModeChange={setDiffWordWrapMode}
+            onOpenFile={(path) => void openGitFile(path)}
+            onRefresh={() => void refreshGitStatus()}
+            listOpen={gitChangesListOpen}
+            onToggleList={toggleGitList}
+            splitWidth={gitChangesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("git-changes")}
+            onResizeTouchStart={handleSplitResizeTouchStart("git-changes")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
         </Show>
 
         <Show when={rightPanelTab() === "files"}>
-          <Suspense fallback={<RightPanelTabFallback />}>
-            <LazyFilesTab
-              t={props.t}
-              browserPath={browserPath}
-              browserEntries={browserEntries}
-              browserLoading={browserLoading}
-              browserError={browserError}
-              browserSelectedPath={browserSelectedPath}
-              browserSelectedContent={browserSelectedContent}
-              browserSelectedLoading={browserSelectedLoading}
-              browserSelectedError={browserSelectedError}
-              parentPath={browserParentPath}
-              scopeKey={browserScopeKey}
-              onLoadEntries={(path: string) => void loadBrowserEntries(path)}
-              onOpenFile={(path: string) => void openBrowserFile(path)}
-              onRefresh={() => void refreshFilesTab()}
-              listOpen={filesListOpen}
-              onToggleList={toggleFilesList}
-              splitWidth={filesSplitWidth}
-              onResizeMouseDown={handleSplitResizeMouseDown("files")}
-              onResizeTouchStart={handleSplitResizeTouchStart("files")}
-              isPhoneLayout={props.isPhoneLayout}
-            />
-          </Suspense>
+          <FilesTab
+            t={props.t}
+            browserPath={browserPath}
+            browserEntries={browserEntries}
+            browserLoading={browserLoading}
+            browserError={browserError}
+            browserSelectedPath={browserSelectedPath}
+            browserSelectedContent={browserSelectedContent}
+            browserSelectedLoading={browserSelectedLoading}
+            browserSelectedError={browserSelectedError}
+            parentPath={browserParentPath}
+            scopeKey={browserScopeKey}
+            onLoadEntries={(path) => void loadBrowserEntries(path)}
+            onOpenFile={(path) => void openBrowserFile(path)}
+            onRefresh={() => void refreshFilesTab()}
+            listOpen={filesListOpen}
+            onToggleList={toggleFilesList}
+            splitWidth={filesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("files")}
+            onResizeTouchStart={handleSplitResizeTouchStart("files")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
         </Show>
 
         <Show when={rightPanelTab() === "status"}>
-          <Suspense fallback={<RightPanelTabFallback />}>
-            <LazyStatusTab
-              t={props.t}
-              instanceId={props.instanceId}
-              instance={props.instance}
-              activeSessionId={props.activeSessionId}
-              activeSession={props.activeSession}
-              activeSessionDiffs={props.activeSessionDiffs}
-              latestTodoState={props.latestTodoState}
-              backgroundProcessList={props.backgroundProcessList}
-              onOpenBackgroundOutput={props.onOpenBackgroundOutput}
-              onStopBackgroundProcess={props.onStopBackgroundProcess}
-              onTerminateBackgroundProcess={props.onTerminateBackgroundProcess}
-              expandedItems={rightPanelExpandedItems}
-              onExpandedItemsChange={handleAccordionChange}
-              onOpenChangesTab={openChangesTabFromStatus}
-            />
-          </Suspense>
+          <StatusTab
+            t={props.t}
+            instanceId={props.instanceId}
+            instance={props.instance}
+            activeSessionId={props.activeSessionId}
+            activeSession={props.activeSession}
+            activeSessionDiffs={props.activeSessionDiffs}
+            latestTodoState={props.latestTodoState}
+            backgroundProcessList={props.backgroundProcessList}
+            onOpenBackgroundOutput={props.onOpenBackgroundOutput}
+            onStopBackgroundProcess={props.onStopBackgroundProcess}
+            onTerminateBackgroundProcess={props.onTerminateBackgroundProcess}
+            expandedItems={rightPanelExpandedItems}
+            onExpandedItemsChange={handleAccordionChange}
+            onOpenChangesTab={openChangesTabFromStatus}
+          />
         </Show>
       </div>
     </div>

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

@@ -2,7 +2,6 @@ import type { Component } from "solid-js"
 
 import { AlignJustify, FoldVertical, Split, UnfoldVertical, WrapText } from "lucide-solid"
 
-import { useI18n } from "../../../../../lib/i18n"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
 interface DiffToolbarProps {
@@ -15,15 +14,14 @@ interface DiffToolbarProps {
 }
 
 const DiffToolbar: Component<DiffToolbarProps> = (props) => {
-  const { t } = useI18n()
   const nextViewMode = (): DiffViewMode => (props.viewMode === "split" ? "unified" : "split")
   const nextContextMode = (): DiffContextMode => (props.contextMode === "collapsed" ? "expanded" : "collapsed")
   const nextWordWrapMode = (): DiffWordWrapMode => (props.wordWrapMode === "on" ? "off" : "on")
 
-  const viewModeTitle = () => (nextViewMode() === "split" ? t("instanceShell.diff.switchToSplit") : t("instanceShell.diff.switchToUnified"))
+  const viewModeTitle = () => (nextViewMode() === "split" ? "Switch to split view" : "Switch to unified view")
   const contextModeTitle = () =>
-    nextContextMode() === "collapsed" ? t("instanceShell.diff.hideUnchanged") : t("instanceShell.diff.showFull")
-  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? t("instanceShell.diff.enableWordWrap") : t("instanceShell.diff.disableWordWrap"))
+    nextContextMode() === "collapsed" ? "Hide unchanged regions" : "Show full file"
+  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? "Enable word wrap" : "Disable word wrap")
 
   return (
     <div class="file-viewer-toolbar">

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

@@ -1,6 +1,5 @@
 import { Show, type Component, type JSX } from "solid-js"
 
-import { useI18n } from "../../../../../lib/i18n"
 import OverlayList from "./OverlayList"
 
 type SplitFilePanelList = {
@@ -25,13 +24,12 @@ interface SplitFilePanelProps {
 }
 
 const SplitFilePanel: Component<SplitFilePanelProps> = (props) => {
-  const { t } = useI18n()
   return (
     <div class="files-tab-container">
       <div class="files-tab-header">
         <div class="files-tab-header-row">
           <button type="button" class="files-toggle-button" onClick={props.onToggleList}>
-            {props.listOpen ? t("instanceShell.filesShell.hideFiles") : t("instanceShell.filesShell.showFiles")}
+            {props.listOpen ? "Hide files" : "Show files"}
           </button>
 
           {props.header}

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

@@ -1,13 +1,11 @@
-import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+
+import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
 
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
-const LazyMonacoDiffViewer = lazy(() =>
-  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
-)
-
 interface ChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -34,18 +32,14 @@ interface ChangesTabProps {
 }
 
 const ChangesTab: Component<ChangesTabProps> = (props) => {
-  const sessionId = createMemo(() => props.activeSessionId())
-  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
-  const diffs = createMemo(() => (hasSession() ? props.activeSessionDiffs() : null))
+  const renderContent = (): JSX.Element => {
+    const sessionId = props.activeSessionId()
 
-  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 hasSession = Boolean(sessionId && sessionId !== "info")
+    const diffs = hasSession ? props.activeSessionDiffs() : null
 
-  const totals = createMemo(() => {
-    return sorted().reduce(
+    const sorted = Array.isArray(diffs) ? [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || ""))) : []
+    const totals = sorted.reduce(
       (acc, item) => {
         acc.additions += typeof item.additions === "number" ? item.additions : 0
         acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
@@ -53,61 +47,41 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
-  })
 
-  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 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 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
-    }, items[0])
-  })
+          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
 
-  const selectedFileData = createMemo<any | null>(() => {
+    // Auto-select the most-changed file if none selected.
     const currentSelected = props.selectedFile()
-    const items = sorted()
-    if (currentSelected) {
-      const match = items.find((f) => f.file === currentSelected)
-      if (match) return match
+    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")
     }
-    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={selected && hasSession() && sortedList.length > 0 ? selected : null}
+            when={selectedFileData && hasSession && Array.isArray(diffs) && diffs.length > 0 ? selectedFileData : null}
             fallback={
               <div class="file-viewer-empty">
                 <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
@@ -115,23 +89,15 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             }
           >
             {(file) => (
-              <Suspense
-                fallback={
-                  <div class="file-viewer-empty">
-                    <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
-                  </div>
-                }
-              >
-                <LazyMonacoDiffViewer
-                  scopeKey={scopeKey()}
-                  path={String(file().file || "")}
-                  before={String((file() as any).before || "")}
-                  after={String((file() as any).after || "")}
-                  viewMode={props.diffViewMode()}
-                  contextMode={props.diffContextMode()}
-                  wordWrap={props.diffWordWrapMode()}
-                />
-              </Suspense>
+              <MonacoDiffViewer
+                scopeKey={scopeKey}
+                path={String(file().file || "")}
+                before={String((file() as any).before || "")}
+                after={String((file() as any).after || "")}
+                viewMode={props.diffViewMode()}
+                contextMode={props.diffContextMode()}
+                wordWrap={props.diffWordWrapMode()}
+              />
             )}
           </Show>
         </div>
@@ -143,11 +109,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListPanel = () => (
-      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sortedList}>
+      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
           {(item) => (
             <div
-              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, props.isPhoneLayout())
               }}
@@ -168,11 +134,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sortedList}>
+      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
           {(item) => (
             <div
-              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, true)
               }}
@@ -193,6 +159,8 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       </Show>
     )
 
+    const headerPath = () => (selectedFileData?.file ? selectedFileData.file : props.t("instanceShell.rightPanel.tabs.changes"))
+
     return (
       <SplitFilePanel
         header={
@@ -203,10 +171,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">+{totalsValue.additions}</span>
+                <span class="files-tab-stat-value">+{totals.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
+                <span class="files-tab-stat-value">-{totals.deletions}</span>
               </span>
             </div>
 
@@ -230,7 +198,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.changes")}
+        overlayAriaLabel="Changes"
       />
     )
   }

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

@@ -1,13 +1,11 @@
-import { For, Show, Suspense, lazy, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
 import type { FileNode } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
 
-import SplitFilePanel from "../components/SplitFilePanel"
+import { MonacoFileViewer } from "../../../../file-viewer/monaco-file-viewer"
 
-const LazyMonacoFileViewer = lazy(() =>
-  import("../../../../file-viewer/monaco-file-viewer").then((module) => ({ default: module.MonacoFileViewer })),
-)
+import SplitFilePanel from "../components/SplitFilePanel"
 
 interface FilesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
@@ -53,8 +51,8 @@ const FilesTab: Component<FilesTabProps> = (props) => {
     const headerDisplayedPath = () => props.browserSelectedPath() || props.browserPath()
 
     const emptyViewerMessage = () => {
-      if (props.browserLoading() && entriesValue === null) return props.t("instanceInfo.loading")
-      return props.t("instanceShell.filesShell.viewerEmpty")
+      if (props.browserLoading() && entriesValue === null) return "Loading files..."
+      return "Select a file to preview"
     }
 
     const renderViewer = () => (
@@ -79,15 +77,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                     }
                   >
                     {(payload) => (
-                      <Suspense
-                        fallback={
-                          <div class="file-viewer-empty">
-                            <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
-                          </div>
-                        }
-                      >
-                        <LazyMonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
-                      </Suspense>
+                      <MonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
                     )}
                   </Show>
                 }
@@ -101,7 +91,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
             }
           >
             <div class="file-viewer-empty">
-              <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
+              <span class="file-viewer-empty-text">Loading…</span>
             </div>
           </Show>
         </div>
@@ -123,7 +113,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
         </Show>
 
         <Show when={props.browserLoading() && entriesValue === null}>
-          <div class="p-3 text-xs text-secondary">{props.t("instanceInfo.loading")}</div>
+          <div class="p-3 text-xs text-secondary">Loading files...</div>
         </Show>
 
         <For each={sorted}>
@@ -164,7 +154,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                 </span>
               </span>
               <Show when={props.browserLoading()}>
-                <span>{props.t("instanceInfo.loading")}</span>
+                <span>Loading…</span>
               </Show>
               <Show when={props.browserError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
@@ -175,7 +165,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
               title={props.t("instanceShell.rightPanel.actions.refresh")}
               aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
               disabled={props.browserLoading()}
-              style={{ "margin-inline-start": "auto" }}
+              style={{ "margin-left": "auto" }}
               onClick={() => props.onRefresh()}
             >
               <RefreshCw class={`h-4 w-4${props.browserLoading() ? " animate-spin" : ""}`} />
@@ -190,7 +180,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.files")}
+        overlayAriaLabel="Files"
       />
     )
   }

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

@@ -1,16 +1,14 @@
-import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, 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"
 
+import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
+
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
-const LazyMonacoDiffViewer = lazy(() =>
-  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
-)
-
 interface GitChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -48,18 +46,17 @@ interface GitChangesTabProps {
 }
 
 const GitChangesTab: Component<GitChangesTabProps> = (props) => {
-  const sessionId = createMemo(() => props.activeSessionId())
-  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
-  const entries = createMemo(() => (hasSession() ? props.entries() : null))
+  const renderContent = (): JSX.Element => {
+    const sessionId = props.activeSessionId()
 
-  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 hasSession = Boolean(sessionId && sessionId !== "info")
+    const entries = hasSession ? props.entries() : null
 
-  const totals = createMemo(() => {
-    return sorted().reduce(
+    const sorted = Array.isArray(entries)
+      ? [...entries].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+      : []
+
+    const totals = sorted.reduce(
       (acc, item) => {
         acc.additions += typeof item.added === "number" ? item.added : 0
         acc.deletions += typeof item.removed === "number" ? item.removed : 0
@@ -67,33 +64,21 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
-  })
 
-  const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
+    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 selectedEntry = createMemo<GitFileStatus | null>(() => {
-    const list = sorted()
     const selectedPath = props.selectedPath()
     const fallbackPath = props.mostChangedPath()
-    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 props.t("instanceShell.gitChanges.noSessionSelected")
-    const currentEntries = entries()
-    if (currentEntries === null) return props.t("instanceShell.gitChanges.loading")
-    if (nonDeleted().length === 0) return props.t("instanceShell.gitChanges.empty")
-    return props.t("instanceShell.filesShell.viewerEmpty")
-  })
-
-  const renderContent = (): JSX.Element => {
-    const totalsValue = totals()
-    const selected = selectedEntry()
-    const sortedList = sorted()
-    const nonDeletedList = nonDeleted()
+    const selectedEntry =
+      sorted.find((item) => item.path === selectedPath) ||
+      (fallbackPath ? sorted.find((item) => item.path === fallbackPath) : null)
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
@@ -106,12 +91,12 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 fallback={
                   <Show
                     when={
-                      selected &&
+                      selectedEntry &&
                       props.selectedBefore() !== null &&
                       props.selectedAfter() !== null &&
-                      selected.status !== "deleted"
+                      selectedEntry.status !== "deleted"
                         ? {
-                            path: selected.path,
+                            path: selectedEntry.path,
                             before: props.selectedBefore() as string,
                             after: props.selectedAfter() as string,
                           }
@@ -124,23 +109,15 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                     }
                   >
                     {(file) => (
-                      <Suspense
-                        fallback={
-                          <div class="file-viewer-empty">
-                            <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
-                          </div>
-                        }
-                      >
-                        <LazyMonacoDiffViewer
-                          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()}
-                        />
-                      </Suspense>
+                      <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>
                 }
@@ -154,7 +131,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
             }
           >
             <div class="file-viewer-empty">
-              <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
+              <span class="file-viewer-empty-text">Loading…</span>
             </div>
           </Show>
         </div>
@@ -164,8 +141,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     const renderEmptyList = () => <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
 
     const renderListPanel = () => (
-      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sortedList}>
+      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -179,7 +156,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
+                    <span class="text-[10px] text-secondary">deleted</span>
                   </Show>
                   <Show when={item.status !== "deleted"}>
                     <>
@@ -196,8 +173,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sortedList}>
+      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -210,7 +187,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
+                    <span class="text-[10px] text-secondary">deleted</span>
                   </Show>
                   <Show when={item.status !== "deleted"}>
                     <>
@@ -227,19 +204,19 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     return (
-          <SplitFilePanel
-            header={
-              <>
-                <span class="files-tab-selected-path" title={selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}>
-                  <span class="file-path-text">{selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}</span>
-                </span>
+      <SplitFilePanel
+        header={
+          <>
+            <span class="files-tab-selected-path" title={selectedEntry?.path || "Git Changes"}>
+              <span class="file-path-text">{selectedEntry?.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">+{totalsValue.additions}</span>
+                <span class="files-tab-stat-value">+{totals.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
+                <span class="files-tab-stat-value">-{totals.deletions}</span>
               </span>
               <Show when={props.statusError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
@@ -249,23 +226,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()}
@@ -274,7 +251,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.gitChanges")}
+        overlayAriaLabel="Git Changes"
       />
     )
   }

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

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

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

@@ -46,9 +46,7 @@ export function useDrawerResize(options: DrawerResizeOptions): DrawerResizeApi {
     if (!side) return
     const startWidth = resizeStartWidth()
     const clamp = side === "left" ? options.clampLeft : options.clampRight
-    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
-    const rawDelta = side === "left" ? clientX - resizeStartX() : resizeStartX() - clientX
-    const delta = isRtl ? -rawDelta : rawDelta
+    const delta = side === "left" ? clientX - resizeStartX() : resizeStartX() - clientX
     const nextWidth = clamp(startWidth + delta)
     applyDrawerWidth(side, nextWidth)
   }

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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 import type { Session } from "../../../types/session"
 import {
   activeParentSessionId,

packages/ui/src/components/markdown.tsx

@@ -1,4 +1,5 @@
 import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { renderMarkdown, onLanguagesLoaded, decodeHtmlEntities, setMarkdownTheme } from "../lib/markdown"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
@@ -7,20 +8,6 @@ import { useI18n } from "../lib/i18n"
 
 const log = getLogger("session")
 
-type MarkdownModule = typeof import("../lib/markdown")
-
-let markdownModulePromise: Promise<MarkdownModule> | null = null
-
-function loadMarkdownModule(): Promise<MarkdownModule> {
-  if (!markdownModulePromise) {
-    markdownModulePromise = import("../lib/markdown").catch((error) => {
-      markdownModulePromise = null
-      throw error
-    })
-  }
-  return markdownModulePromise
-}
-
 function hashText(value: string): string {
   let hash = 2166136261
   for (let index = 0; index < value.length; index++) {
@@ -37,45 +24,6 @@ function resolvePartVersion(part: TextPart, text: string): string {
   return `text-${hashText(text)}`
 }
 
-function resolvePartCacheId(part: TextPart, text: string): string {
-  const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
-  if (partId) {
-    return partId
-  }
-
-  return `anonymous:${hashText(text)}`
-}
-
-function decodeHtmlEntitiesLocally(content: string): string {
-  if (!content.includes("&") || typeof document === "undefined") {
-    return content
-  }
-
-  const textarea = document.createElement("textarea")
-  textarea.innerHTML = content
-  return textarea.value
-}
-
-function escapeHtml(content: string): string {
-  const map: Record<string, string> = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#039;",
-  }
-
-  return content.replace(/[&<>"']/g, (match) => map[match] ?? match)
-}
-
-function renderFallbackHtml(content: string): string {
-  if (!content) {
-    return ""
-  }
-
-  return escapeHtml(content).replace(/\n/g, "<br />")
-}
-
 interface MarkdownProps {
   part: TextPart
   instanceId?: string
@@ -90,8 +38,7 @@ export function Markdown(props: MarkdownProps) {
   const { t } = useI18n()
   const [html, setHtml] = createSignal("")
   let containerRef: HTMLDivElement | undefined
-  let latestRequestKey = ""
-  let cleanupLanguageListener: (() => void) | undefined
+  let latestRequestedText = ""
 
   const notifyRendered = () => {
     Promise.resolve().then(() => props.onRendered?.())
@@ -100,14 +47,15 @@ export function Markdown(props: MarkdownProps) {
   const resolved = createMemo(() => {
     const part = props.part
     const rawText = typeof part.text === "string" ? part.text : ""
-    const text = decodeHtmlEntitiesLocally(rawText)
+    const text = decodeHtmlEntities(rawText)
     const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
-    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : undefined
-    const cacheId = resolvePartCacheId(part, text)
+    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
+    if (!partId) {
+      throw new Error("Markdown rendering requires a part id")
+    }
     const version = resolvePartVersion(part, text)
-    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${version}`
-    return { part, text, themeKey, highlightEnabled, partId, cacheId, version, requestKey }
+    return { part, text, themeKey, highlightEnabled, partId, version }
   })
 
   const cacheHandle = useGlobalCache({
@@ -115,46 +63,26 @@ export function Markdown(props: MarkdownProps) {
     sessionId: () => props.sessionId,
     scope: "markdown",
     cacheId: () => {
-      const { cacheId, themeKey, highlightEnabled } = resolved()
-      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}`
+      const { partId, themeKey, highlightEnabled } = resolved()
+      return `${partId}:${themeKey}:${highlightEnabled ? 1 : 0}`
     },
     version: () => resolved().version,
   })
 
-  const commitCacheEntry = (snapshot: ReturnType<typeof resolved>, renderedHtml: string) => {
-    const cacheEntry: RenderCache = {
-      text: snapshot.text,
-      html: renderedHtml,
-      theme: snapshot.themeKey,
-      mode: snapshot.version,
-    }
-    setHtml(renderedHtml)
-    cacheHandle.set(cacheEntry)
-    notifyRendered()
-  }
+  createEffect(async () => {
+    const { part, text, themeKey, highlightEnabled, version } = resolved()
 
-  const renderSnapshot = async (snapshot: ReturnType<typeof resolved>) => {
-    const markdown = await loadMarkdownModule()
-    markdown.setMarkdownTheme(snapshot.themeKey === "dark")
-    const rendered = await markdown.renderMarkdown(snapshot.text, {
-      suppressHighlight: !snapshot.highlightEnabled,
-    })
+    // Ensure the markdown highlighter theme matches the active UI theme.
+    setMarkdownTheme(themeKey === "dark")
 
-    if (latestRequestKey === snapshot.requestKey) {
-      commitCacheEntry(snapshot, rendered)
-    }
-  }
-
-  createEffect(() => {
-    const snapshot = resolved()
-    latestRequestKey = snapshot.requestKey
+    latestRequestedText = text
 
     const cacheMatches = (cache: RenderCache | undefined) => {
       if (!cache) return false
-      return cache.theme === snapshot.themeKey && cache.mode === snapshot.version
+      return cache.theme === themeKey && cache.mode === version
     }
 
-    const localCache = snapshot.part.renderCache
+    const localCache = part.renderCache
     if (localCache && cacheMatches(localCache)) {
       setHtml(localCache.html)
       notifyRendered()
@@ -164,92 +92,115 @@ export function Markdown(props: MarkdownProps) {
     const globalCache = cacheHandle.get<RenderCache>()
     if (globalCache && cacheMatches(globalCache)) {
       setHtml(globalCache.html)
+      part.renderCache = globalCache
       notifyRendered()
       return
     }
 
-    setHtml(renderFallbackHtml(snapshot.text))
-    notifyRendered()
+    const commitCacheEntry = (renderedHtml: string) => {
+      const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
+      setHtml(renderedHtml)
+      part.renderCache = cacheEntry
+      cacheHandle.set(cacheEntry)
+      notifyRendered()
+    }
 
-    void renderSnapshot(snapshot).catch((error) => {
-      log.error("Failed to render markdown:", error)
-      if (latestRequestKey === snapshot.requestKey) {
-        commitCacheEntry(snapshot, renderFallbackHtml(snapshot.text))
+    if (!highlightEnabled) {
+      part.renderCache = undefined
+
+      try {
+        const rendered = await renderMarkdown(text, { suppressHighlight: true })
+
+        if (latestRequestedText === text) {
+          commitCacheEntry(rendered)
+        }
+      } catch (error) {
+        log.error("Failed to render markdown:", error)
+        if (latestRequestedText === text) {
+          commitCacheEntry(text)
+        }
       }
-    })
+      return
+    }
+
+    try {
+      const rendered = await renderMarkdown(text)
+      if (latestRequestedText === text) {
+        commitCacheEntry(rendered)
+      }
+    } catch (error) {
+      log.error("Failed to render markdown:", error)
+      if (latestRequestedText === text) {
+        commitCacheEntry(text)
+      }
+    }
   })
 
   onMount(() => {
-    const handleClick = async (event: Event) => {
-      const target = event.target as HTMLElement
+    const handleClick = async (e: Event) => {
+      const target = e.target as HTMLElement
       const copyButton = target.closest(".code-block-copy") as HTMLButtonElement
 
-      if (!copyButton) {
-        return
+      if (copyButton) {
+        e.preventDefault()
+        const code = copyButton.getAttribute("data-code")
+        if (code) {
+          const decodedCode = decodeURIComponent(code)
+          const success = await copyToClipboard(decodedCode)
+          const copyText = copyButton.querySelector(".copy-text")
+          if (copyText) {
+            if (success) {
+              copyText.textContent = t("markdown.codeBlock.copy.copied")
+              setTimeout(() => {
+                copyText.textContent = t("markdown.codeBlock.copy.label")
+              }, 2000)
+            } else {
+              copyText.textContent = t("markdown.codeBlock.copy.failed")
+              setTimeout(() => {
+                copyText.textContent = t("markdown.codeBlock.copy.label")
+              }, 2000)
+            }
+          }
+        }
       }
-
-      event.preventDefault()
-      const code = copyButton.getAttribute("data-code")
-      if (!code) {
-        return
-      }
-
-      const decodedCode = decodeURIComponent(code)
-      const success = await copyToClipboard(decodedCode)
-      const copyText = copyButton.querySelector(".copy-text")
-      if (!copyText) {
-        return
-      }
-
-      copyText.textContent = success ? t("markdown.codeBlock.copy.copied") : t("markdown.codeBlock.copy.failed")
-      setTimeout(() => {
-        copyText.textContent = t("markdown.codeBlock.copy.label")
-      }, 2000)
     }
 
     containerRef?.addEventListener("click", handleClick)
 
-    let disposed = false
-    void loadMarkdownModule()
-      .then((markdown) => {
-        if (disposed) {
-          return
+    const cleanupLanguageListener = onLanguagesLoaded(async () => {
+      if (props.disableHighlight) {
+        return
+      }
+
+      const { part, text, themeKey, version } = resolved()
+
+      setMarkdownTheme(themeKey === "dark")
+
+      if (latestRequestedText !== text) {
+        return
+      }
+
+      try {
+        const rendered = await renderMarkdown(text)
+        if (latestRequestedText === text) {
+          const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
+          setHtml(rendered)
+          part.renderCache = cacheEntry
+          cacheHandle.set(cacheEntry)
+          notifyRendered()
         }
-
-        cleanupLanguageListener = markdown.onLanguagesLoaded(() => {
-          const snapshot = resolved()
-          if (!snapshot.highlightEnabled) {
-            return
-          }
-
-          latestRequestKey = snapshot.requestKey
-          void renderSnapshot(snapshot).catch((error) => {
-            log.error("Failed to re-render markdown after language load:", error)
-          })
-        })
-      })
-      .catch((error) => {
-        log.error("Failed to load markdown module:", error)
-      })
+      } catch (error) {
+        log.error("Failed to re-render markdown after language load:", error)
+      }
+    })
 
     onCleanup(() => {
-      disposed = true
       containerRef?.removeEventListener("click", handleClick)
-      cleanupLanguageListener?.()
-      cleanupLanguageListener = undefined
+      cleanupLanguageListener()
     })
   })
 
-  return (
-    <div
-      ref={containerRef}
-      class="markdown-body"
-      dir="auto"
-      data-view="markdown"
-      data-part-id={resolved().partId}
-      data-markdown-theme={resolved().themeKey}
-      data-markdown-highlight={resolved().highlightEnabled ? "true" : "false"}
-      innerHTML={html()}
-    />
-  )
+  const proseClass = () => "markdown-body"
+
+  return <div ref={containerRef} class={proseClass()} innerHTML={html()} />
 }

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

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

@@ -0,0 +1,64 @@
+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,6 +1,7 @@
-import { For, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack } from "solid-js"
-import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, untrack } from "solid-js"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, Trash2 } from "lucide-solid"
 import MessageItem from "./message-item"
+import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
 import { partHasRenderableText } from "../types/message"
@@ -11,36 +12,21 @@ import { formatTokenTotal } from "../lib/formatters"
 import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
 import { setActiveInstanceId } from "../stores/instances"
 import { showAlertDialog } from "../stores/alerts"
-import { deleteMessage } from "../stores/session-actions"
+import { deleteMessagePart } 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)"
 const ASSISTANT_BORDER_COLOR = "var(--message-assistant-border)"
 const TOOL_BORDER_COLOR = "var(--message-tool-border)"
 
-const LazyToolCall = lazy(() => import("./tool-call"))
-
-function ToolCallFallback() {
-  return <div class="tool-call tool-call-loading" />
-}
-
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
 
-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
+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
 
 function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
   return Boolean(state && state.status === "running")
@@ -208,13 +194,8 @@ 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 {
@@ -301,12 +282,7 @@ 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}
         />
@@ -322,41 +298,11 @@ 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 [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 [deleting, setDeleting] = createSignal(false)
 
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -373,6 +319,14 @@ 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 ""
@@ -396,72 +350,38 @@ function ToolCallItem(props: ToolCallItemProps) {
     navigateToTaskSession(location)
   }
 
-  const handleDeleteMessage = async (event: MouseEvent) => {
+  const handleDeleteToolPart = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
 
-    if (!props.showDeleteMessage) return
-    if (deletingMessage()) return
+    if (deleteDisabled()) return
 
-    setDeletingMessage(true)
+    setDeleting(true)
     try {
-      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
     } catch (error) {
-      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
-        title: t("messageItem.actions.deleteMessageFailedTitle"),
+      showAlertDialog(t("messageBlock.tool.deletePart.failed.message"), {
+        title: t("messageBlock.tool.deletePart.failed.title"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      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)
+      setDeleting(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-0">
+            <div class="flex items-center gap-2">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -475,49 +395,30 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
 
-              <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>
+              <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>
             </div>
           </div>
 
-          <Suspense fallback={<ToolCallFallback />}>
-            <LazyToolCall
-              toolCall={resolvedToolPart()}
-              toolCallId={props.partId}
-              messageId={props.messageId}
-              messageVersion={messageVersion()}
-              partVersion={partVersion()}
-              instanceId={props.instanceId}
-              sessionId={props.sessionId}
-              onContentRendered={props.onContentRendered}
-            />
-          </Suspense>
-        </div>
+          <ToolCall
+            toolCall={resolvedToolPart()}
+            toolCallId={props.partId}
+            messageId={props.messageId}
+            messageVersion={messageVersion()}
+            partVersion={partVersion()}
+            instanceId={props.instanceId}
+            sessionId={props.sessionId}
+            onContentRendered={props.onContentRendered}
+          />
+        </>
       )}
     </Show>
   )
@@ -569,13 +470,7 @@ 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
 }
@@ -585,29 +480,6 @@ 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()
@@ -796,13 +668,9 @@ export default function MessageBlock(props: MessageBlockProps) {
   return (
     <Show when={block()}>
       {(resolvedBlock) => (
-        <div
-          class="message-stream-block"
-          data-message-id={resolvedBlock().record.id}
-          data-delete-message-hover={isDeleteMessageHovered() ? "true" : undefined}
-        >
+        <div class="message-stream-block" data-message-id={resolvedBlock().record.id}>
           <For each={resolvedBlock().items}>
-            {(item, index) => (
+            {(item) => (
               <Switch>
                 <Match when={item.type === "content"}>
                   <MessageContentItem
@@ -813,12 +681,7 @@ 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}
                   />
@@ -834,13 +697,6 @@ 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>
@@ -853,14 +709,6 @@ 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"}>
@@ -870,14 +718,6 @@ 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"}>
@@ -888,11 +728,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     messageId={(item as CompactionDisplayItem).messageId}
-                    showDeleteMessage={index() === 0}
-                    onDeleteHoverChange={props.onDeleteHoverChange}
-                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
-                    selectedMessageIds={props.selectedMessageIds}
-                    onToggleSelectedMessage={props.onToggleSelectedMessage}
+                    partId={(item as CompactionDisplayItem).partId}
                   />
                 </Match>
                 <Match when={item.type === "reasoning"}>
@@ -902,14 +738,9 @@ 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}
-                    onContentRendered={props.onContentRendered}
                   />
                 </Match>
               </Switch>
@@ -928,14 +759,6 @@ 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 {
@@ -945,18 +768,12 @@ interface CompactionCardProps {
   instanceId: string
   sessionId: string
   messageId: string
-  showDeleteMessage?: boolean
-  onDeleteHoverChange?: (state: DeleteHoverState) => void
-  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
-  selectedMessageIds?: () => Set<string>
-  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  partId: string
 }
 
 function CompactionCard(props: CompactionCardProps) {
   const { t } = useI18n()
-  const [deletingMessage, setDeletingMessage] = createSignal(false)
-  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
-  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+  const [deleting, setDeleting] = createSignal(false)
   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)
@@ -964,98 +781,44 @@ function CompactionCard(props: CompactionCardProps) {
   const containerClass = () =>
     `message-compaction-card ${isAuto() ? "message-compaction-card--auto" : "message-compaction-card--manual"}`
 
-  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
+  const canDelete = () => Boolean(props.partId) && !deleting()
 
-  const handleDeleteMessage = async (event: MouseEvent) => {
+  const handleDelete = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!props.showDeleteMessage) return
-    if (!canDeleteMessage()) return
-    setDeletingMessage(true)
+    if (!canDelete()) return
+    setDeleting(true)
     try {
-      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
     } catch (error) {
-      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
-        title: t("messageItem.actions.deleteMessageFailedTitle"),
+      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
+        title: t("messagePart.actions.deleteFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      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)
+      setDeleting(false)
     }
   }
 
   return (
     <div
-      class={`delete-hover-scope ${containerClass()} relative`}
+      class={`${containerClass()} relative`}
       style={{ "border-left": `4px solid ${borderColor()}` }}
       role="status"
       aria-label={t("messageBlock.compaction.ariaLabel")}
     >
-      <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>
+      <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="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>
@@ -1065,9 +828,6 @@ 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)
@@ -1112,42 +872,6 @@ 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 = [
@@ -1178,83 +902,17 @@ function StepCard(props: StepCardProps) {
       return null
     }
     return (
-      <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>
-
+      <div class={`message-step-card message-step-finish message-step-finish-flush`} style={finishStyle()}>
         {renderUsageChips(usage)}
       </div>
     )
   }
 
   return (
-    <div class={`message-step-card message-step-start relative`}>
+    <div class={`message-step-card message-step-start`}>
       <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>
@@ -1281,41 +939,15 @@ 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
-  onContentRendered?: () => void
 }
 
 function ReasoningCard(props: ReasoningCardProps) {
   const { t } = useI18n()
   const [expanded, setExpanded] = createSignal(Boolean(props.defaultExpanded))
-  const [deletingMessage, setDeletingMessage] = createSignal(false)
-  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
-  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
-  let pendingRenderNotificationFrame: number | null = null
-
-  const notifyContentRendered = () => {
-    if (!props.onContentRendered || typeof requestAnimationFrame !== "function") return
-    if (pendingRenderNotificationFrame !== null) {
-      cancelAnimationFrame(pendingRenderNotificationFrame)
-    }
-    pendingRenderNotificationFrame = requestAnimationFrame(() => {
-      pendingRenderNotificationFrame = null
-      props.onContentRendered?.()
-    })
-  }
-
-  onCleanup(() => {
-    if (pendingRenderNotificationFrame !== null) {
-      cancelAnimationFrame(pendingRenderNotificationFrame)
-      pendingRenderNotificationFrame = null
-    }
-  })
+  const [deleting, setDeleting] = createSignal(false)
 
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
@@ -1342,8 +974,6 @@ function ReasoningCard(props: ReasoningCardProps) {
     return modelID
   }
 
-  const hasMeta = () => Boolean(props.showAgentMeta && (agentIdentifier() || modelIdentifier()))
-
   const reasoningText = () => {
     const part = props.part as any
     if (!part) return ""
@@ -1384,50 +1014,29 @@ function ReasoningCard(props: ReasoningCardProps) {
   const viewHideLabel = () =>
     expanded() ? t("messageBlock.reasoning.indicator.hide") : t("messageBlock.reasoning.indicator.view")
 
-  createEffect(() => {
-    if (!expanded()) return
-    reasoningText()
-    notifyContentRendered()
-  })
+  const hasDeleteTarget = () => Boolean(props.partId)
+  const canDelete = () => hasDeleteTarget() && !deleting()
 
-  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
-
-  const handleDeleteMessage = async (event: MouseEvent) => {
+  const handleDelete = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!props.showDeleteMessage) return
-    if (!canDeleteMessage()) return
-    setDeletingMessage(true)
+    if (!canDelete()) return
+    setDeleting(true)
     try {
-      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
     } catch (error) {
-      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
-        title: t("messageItem.actions.deleteMessageFailedTitle"),
+      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
+        title: t("messagePart.actions.deleteFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      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)
+      setDeleting(false)
     }
   }
 
   return (
-    <div class="delete-hover-scope message-reasoning-card">
+    <div class="message-reasoning-card">
       <div class="message-reasoning-header">
         <button
           type="button"
@@ -1436,28 +1045,22 @@ function ReasoningCard(props: ReasoningCardProps) {
           aria-expanded={expanded()}
           aria-label={expanded() ? t("messageBlock.reasoning.collapseAriaLabel") : t("messageBlock.reasoning.expandAriaLabel")}
         >
-          <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 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>
         </button>
 
@@ -1478,31 +1081,16 @@ function ReasoningCard(props: ReasoningCardProps) {
             </Show>
           </button>
 
-          <Show when={props.showDeleteMessage}>
+          <Show when={hasDeleteTarget()}>
             <button
               type="button"
               class="message-action-button"
-              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")}
+              onClick={handleDelete}
+              disabled={!canDelete()}
+              aria-label={t("messagePart.actions.deleteTitle")}
+              title={t("messagePart.actions.deleteTitle")}
             >
-              <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" />
+              <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
             </button>
           </Show>
 
@@ -1510,28 +1098,11 @@ 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">
             <div class="message-reasoning-output" role="region" aria-label={t("messageBlock.reasoning.detailsAriaLabel")}>
-              <pre class="message-reasoning-text" dir="auto">{reasoningText() || ""}</pre>
+              <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
             </div>
           </div>
         </div>

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

@@ -1,24 +1,14 @@
-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 { For, Show, createSignal } from "solid-js"
+import { Copy, ExternalLink, Split, Trash2, Undo } from "lucide-solid"
+import type { MessageInfo, ClientPart } 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 { deleteMessage } from "../stores/session-actions"
+import { deleteMessagePart } 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
@@ -28,112 +18,15 @@ 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 [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 [deletingParts, setDeletingParts] = createSignal<Set<string>>(new Set())
 
   const isUser = () => props.record.role === "user"
   const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
@@ -230,11 +123,6 @@ 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
@@ -302,30 +190,47 @@ export default function MessageItem(props: MessageItemProps) {
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const handleDeleteMessage = async () => {
-    if (deletingMessage()) return
-    setDeletingMessage(true)
+  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)
     try {
-      await deleteMessage(props.instanceId, props.sessionId, props.record.id)
+      await deleteMessagePart(props.instanceId, props.sessionId, props.record.id, partId)
     } catch (error) {
-      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
-        title: t("messageItem.actions.deleteMessageFailedTitle"),
+      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
+        title: t("messagePart.actions.deleteFailedTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
     } finally {
-      setDeletingMessage(false)
-    }
-  }
-
-  const handleDeleteUpTo = async () => {
-    if (!props.onDeleteMessagesUpTo) return
-    if (deletingUpTo()) return
-    setDeletingUpTo(true)
-    try {
-      await props.onDeleteMessagesUpTo(props.record.id)
-    } finally {
-      setDeletingUpTo(false)
+      setPartDeleting(partId, false)
     }
   }
 
@@ -353,16 +258,8 @@ export default function MessageItem(props: MessageItemProps) {
     if (!info || info.role !== "assistant") return ""
     const modelID = info.modelID || ""
     const providerID = info.providerID || ""
-
-    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
+    if (modelID && providerID) return `${providerID}/${modelID}`
+    return modelID
   }
 
   const agentMeta = () => {
@@ -381,68 +278,28 @@ export default function MessageItem(props: MessageItemProps) {
 
 
   return (
-    <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}
-    >
+    <div class={containerClass()}>
       <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
-        <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 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>
 
-          <div class="message-item-actions" ref={(el) => (actionsEl = el)}>
+          <div class="message-item-actions">
             <Show when={isUser()}>
               <div class="message-action-group">
-                <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.revert")}
+                    aria-label={t("messageItem.actions.revert")}
+                  >
+                    <Undo class="w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
+                </Show>
                 <Show when={props.onFork}>
                   <button
                     class="message-action-button"
@@ -453,43 +310,14 @@ export default function MessageItem(props: MessageItemProps) {
                     <Split class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 </Show>
-
-                <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>
+                <button
+                  class="message-action-button"
+                  onClick={handleCopy}
+                  title={copyLabel()}
+                  aria-label={copyLabel()}
+                >
+                  <Copy class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
               </div>
             </Show>
             <Show when={!isUser()}>
@@ -503,30 +331,18 @@ export default function MessageItem(props: MessageItemProps) {
                   <Copy 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 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>
               </div>
             </Show>
@@ -534,15 +350,17 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </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 when={agentMeta()}>
+          {(meta) => (
+            <div class="message-item-header-row message-item-header-row--bottom">
+              <span class="message-agent-meta">{meta()}</span>
+            </div>
+          )}
         </Show>
 
       </header>
 
-      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]" dir="auto">
+      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
 
 
         <Show when={props.isQueued && isUser()}>
@@ -550,7 +368,7 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
 
         <Show when={errorMessage()}>
-          <div class="message-error-block" dir="auto">⚠️ {errorMessage()}</div>
+          <div class="message-error-block">⚠️ {errorMessage()}</div>
         </Show>
 
         <Show when={isGenerating()}>
@@ -560,20 +378,16 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
 
         <For each={messageParts()}>
-          {(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>
-            )
-          }}
+          {(part) => (
+            <MessagePart
+              part={part}
+              messageType={props.record.role}
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              primaryUserTextPartId={primaryUserTextPartId()}
+              onRendered={props.onContentRendered}
+            />
+          )}
         </For>
 
         <Show when={fileAttachments().length > 0}>
@@ -583,16 +397,7 @@ 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}
-                    onMouseEnter={(e) => {
-                      if (!isImage) return
-                      const el = e.currentTarget as HTMLElement
-                      showImagePreview(el, attachment.url || "", name)
-                    }}
-                    onMouseLeave={() => setImagePreview(null)}
-                  >
+                  <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`} title={name}>
                     <Show when={isImage} fallback={
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path
@@ -620,6 +425,24 @@ 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>
                 )
               }}
@@ -627,31 +450,6 @@ 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

@@ -1,4 +1,5 @@
-import { Match, Show, Suspense, Switch, lazy } from "solid-js"
+import { Show, Match, Switch } from "solid-js"
+import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
@@ -6,8 +7,6 @@ import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/m
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
-const LazyToolCall = lazy(() => import("./tool-call"))
-
 interface MessagePartProps {
   part: ClientPart
   messageType?: "user" | "assistant"
@@ -132,14 +131,8 @@ export default function MessagePart(props: MessagePartProps) {
     <Switch>
       <Match when={partType() === "text"}>
         <Show when={!shouldHideTextPart() && partHasRenderableText(props.part)}>
-          <div
-            class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()}
-            dir="auto"
-            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" dir="auto">{plainTextContent()}</span>}>
+          <div class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()} data-role={textContainerRole()}>
+            <Show when={canRenderMarkdown()} fallback={<span class="text-primary">{plainTextContent()}</span>}>
               <Markdown
                 part={createTextPartForMarkdown()}
                 instanceId={props.instanceId}
@@ -154,14 +147,12 @@ export default function MessagePart(props: MessagePartProps) {
       </Match>
 
       <Match when={partType() === "tool"}>
-        <Suspense fallback={<div class="tool-call tool-call-loading" />}>
-          <LazyToolCall
-            toolCall={props.part as ToolCallPart}
-            toolCallId={props.part?.id}
-            instanceId={props.instanceId}
-            sessionId={props.sessionId}
-          />
-        </Suspense>
+        <ToolCall
+          toolCall={props.part as ToolCallPart}
+          toolCallId={props.part?.id}
+          instanceId={props.instanceId}
+          sessionId={props.sessionId}
+        />
       </Match>
 
 

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

@@ -1,18 +1,12 @@
 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) => {
@@ -30,11 +24,6 @@ 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,14 +1,12 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component } 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"
 
@@ -21,38 +19,18 @@ export interface TimelineSegment {
   shortLabel?: string
   variant?: "auto" | "manual"
   toolPartIds?: string[]
-  partIds?: string[]
-  partId?: string
-  totalChars: number
 }
 
 interface MessageTimelineProps {
   segments: TimelineSegment[]
   onSegmentClick?: (segment: TimelineSegment) => void
-  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
+  activeMessageId?: 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" }>
 
@@ -60,8 +38,10 @@ interface PendingSegment {
   type: TimelineSegmentType
   texts: string[]
   reasoningTexts: string[]
-  partIds: string[]
-  totalChars: number
+  toolTitles: string[]
+  toolTypeLabels: string[]
+  toolIcons: string[]
+  toolPartIds: string[]
   hasPrimaryText: boolean
 }
 
@@ -191,13 +171,18 @@ export function buildTimelineSegments(
       pending = null
       return
     }
-    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"),
-    )
-
+    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"),
+        )
+ 
     result.push({
       id: `${record.id}:${segmentIndex}`,
       messageId: record.id,
@@ -205,24 +190,16 @@ export function buildTimelineSegments(
       label,
       tooltip,
       shortLabel,
-      partIds: pending.partIds,
-      totalChars: pending.totalChars,
+      toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
     })
     segmentIndex += 1
     pending = null
   }
-
+ 
   const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
     if (!pending || pending.type !== type) {
       flushPending()
-      pending = {
-        type,
-        texts: [],
-        reasoningTexts: [],
-        partIds: [],
-        totalChars: 0,
-        hasPrimaryText: type !== "assistant",
-      }
+      pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" }
     }
     return pending!
   }
@@ -234,21 +211,14 @@ export function buildTimelineSegments(
     if (!part || typeof part !== "object") continue
 
     if (part.type === "tool") {
-      flushPending()
+      const target = ensureSegment("tool")
       const toolPart = part as ToolCallPart
-      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
+      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)
+      }
       continue
     }
 
@@ -258,18 +228,13 @@ 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,
@@ -277,8 +242,6 @@ 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
@@ -287,23 +250,19 @@ 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
 }
 
@@ -319,14 +278,7 @@ 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)
@@ -334,7 +286,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
       buttonRefs.delete(segmentId)
     }
   }
-
+ 
   const clearHoverTimer = () => {
     if (hoverTimer !== null && typeof window !== "undefined") {
       window.clearTimeout(hoverTimer)
@@ -360,11 +312,8 @@ 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()
@@ -379,7 +328,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   const handleMouseLeave = () => {
     scheduleClose()
   }
-
+ 
   createEffect(() => {
     if (typeof window === "undefined") return
     const anchor = hoverAnchorRect()
@@ -401,235 +350,13 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     clearCloseTimer()
   })
 
-  // --- 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)
-        })
-      }
-    }
-  })
+    const activeId = props.activeMessageId
 
-  // 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 element = buttonRefs.get(activeId)
+    const targetSegment = props.segments.find((segment) => segment.messageId === activeId)
+    if (!targetSegment) return
+    const element = buttonRefs.get(targetSegment.id)
     if (!element) return
     const timer = typeof window !== "undefined" ? window.setTimeout(() => {
       element.scrollIntoView({ block: "nearest", behavior: "smooth" })
@@ -639,7 +366,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         window.clearTimeout(timer)
       }
     })
-  }))
+  })
 
   createEffect(() => {
     const element = tooltipElement()
@@ -656,265 +383,92 @@ 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-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)
+    <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
 
-            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
+          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 isDeleteSelected = () => {
-              const selected = props.selectedMessageIds?.()
-              if (!selected) return false
-              return selected.has(segment.messageId)
-            }
+          const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission())
 
-            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")
+           const shortLabelContent = () => {
+             if (segment.type === "tool") {
+               if (hasActivePermission()) {
+                 return <ShieldAlert 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 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" />
+           }
 
-            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" : ""}`}
+          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" : ""}`}
 
-                  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>
+              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>
+          )
+        }}
       </Show>
     </div>
   )
 }
-
+ 
 export default MessageTimeline

packages/ui/src/components/model-selector.tsx

@@ -295,7 +295,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
                 {t("modelSelector.trigger.primary", { model: currentModelValue()?.name ?? t("modelSelector.none") })}
               </span>
           {currentModelValue() && (
-                <span class="selector-trigger-secondary" dir="ltr">
+                <span class="selector-trigger-secondary">
                   {currentModelValue()!.providerId}/{currentModelValue()!.id}
                 </span>
               )}

packages/ui/src/components/permission-approval-modal.tsx

@@ -1,4 +1,4 @@
-import { For, Show, Suspense, createMemo, createSignal, createEffect, lazy, onCleanup, type Component } from "solid-js"
+import { For, Show, createMemo, createSignal, createEffect, onCleanup, type Component } from "solid-js"
 import type { PermissionRequestLike } from "../types/permission"
 import { getPermissionCallId, getPermissionDisplayTitle, getPermissionKind, getPermissionMessageId, getPermissionSessionId } from "../types/permission"
 import { getQuestionCallId, getQuestionMessageId, getQuestionSessionId, type QuestionRequest } from "../types/question"
@@ -12,8 +12,7 @@ import {
 } from "../stores/instances"
 import { ensureSessionParentExpanded, loadMessages, sessions as sessionStateSessions, setActiveSessionFromList } from "../stores/sessions"
 import { messageStoreBus } from "../stores/message-v2/bus"
-
-const LazyToolCall = lazy(() => import("./tool-call"))
+import ToolCall from "./tool-call"
 
 interface PermissionApprovalModalProps {
   instanceId: string
@@ -409,17 +408,15 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                             }
                           >
                           {(data) => (
-                            <Suspense fallback={<div class="tool-call tool-call-loading" />}>
-                              <LazyToolCall
-                                toolCall={data().toolPart}
-                                toolCallId={data().toolPart.id}
-                                messageId={data().messageId}
-                                messageVersion={data().messageVersion}
-                                partVersion={data().partVersion}
-                                instanceId={props.instanceId}
-                                sessionId={data().sessionId}
-                              />
-                            </Suspense>
+                            <ToolCall
+                              toolCall={data().toolPart}
+                              toolCallId={data().toolPart.id}
+                              messageId={data().messageId}
+                              messageVersion={data().messageVersion}
+                              partVersion={data().partVersion}
+                              instanceId={props.instanceId}
+                              sessionId={data().sessionId}
+                            />
                           )}
                         </Show>
                       </div>

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

@@ -1,9 +1,9 @@
-import { Suspense, createEffect, createSignal, lazy, on, onCleanup, onMount, Show } from "solid-js"
+import { createSignal, Show, onMount, onCleanup, createEffect, on } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
+import UnifiedPicker from "./unified-picker"
 import ExpandButton from "./expand-button"
 import { clearAttachments, removeAttachment } from "../stores/attachments"
 import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
-import { createPastedPlaceholderRegex, pastedDisplayCounterRegex } from "./prompt-input/attachmentPlaceholders"
 import Kbd from "./kbd"
 import { getActiveInstance } from "../stores/instances"
 import { agents, executeCustomCommand } from "../stores/sessions"
@@ -13,41 +13,11 @@ import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 import { preferences } from "../stores/preferences"
 import type { ExpandState, PromptInputApi, PromptInputProps, PromptInsertMode, PromptMode } from "./prompt-input/types"
-import type { Attachment } from "../types/attachment"
 import { usePromptState } from "./prompt-input/usePromptState"
 import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
 import { usePromptPicker } from "./prompt-input/usePromptPicker"
 import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
 const log = getLogger("actions")
-const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
-
-function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
-  if (!text || attachments.length === 0) return []
-
-  const usedCounters = new Set<string>()
-  for (const match of text.matchAll(createPastedPlaceholderRegex())) {
-    const counter = match?.[1]
-    if (counter) usedCounters.add(counter)
-  }
-
-  if (usedCounters.size === 0) return []
-
-  const consumed = new Set<string>()
-
-  for (const attachment of attachments) {
-    if (!attachment?.id) continue
-    if (attachment?.source?.type !== "text") continue
-    const display = attachment.display
-    if (typeof display !== "string") continue
-    const match = display.match(pastedDisplayCounterRegex)
-    if (!match?.[1]) continue
-    if (usedCounters.has(match[1])) {
-      consumed.add(attachment.id)
-    }
-  }
-
-  return Array.from(consumed)
-}
 
 export default function PromptInput(props: PromptInputProps) {
   const { t } = useI18n()
@@ -276,12 +246,7 @@ export default function PromptInput(props: PromptInputProps) {
       commandName.length > 0 &&
       getCommands(props.instanceId).some((cmd) => cmd.name === commandName)
 
-    const resolvedCommandArgs = isKnownSlashCommand ? resolvePastedPlaceholders(commandArgs, currentAttachments) : ""
-    const resolvedPrompt = isKnownSlashCommand
-      ? resolvedCommandArgs
-        ? `${commandToken} ${resolvedCommandArgs}`
-        : commandToken
-      : resolvePastedPlaceholders(text, currentAttachments)
+    const resolvedPrompt = isKnownSlashCommand ? text : resolvePastedPlaceholders(text, currentAttachments)
     const historyEntry = resolvedPrompt
 
     const refreshHistory = () => recordHistoryEntry(historyEntry)
@@ -297,10 +262,6 @@ export default function PromptInput(props: PromptInputProps) {
       syncAttachmentCounters("")
       setIgnoredAtPositions(new Set<number>())
     } else {
-      const consumedIds = getConsumedPastedTextAttachmentIds(commandArgs, currentAttachments)
-      for (const attachmentId of consumedIds) {
-        removeAttachment(props.instanceId, props.sessionId, attachmentId)
-      }
       syncAttachmentCounters("")
       setIgnoredAtPositions(new Set<number>())
     }
@@ -320,7 +281,7 @@ export default function PromptInput(props: PromptInputProps) {
           await props.onSend(resolvedPrompt, [])
         }
       } else if (isKnownSlashCommand) {
-        await executeCustomCommand(props.instanceId, props.sessionId, commandName, resolvedCommandArgs)
+        await executeCustomCommand(props.instanceId, props.sessionId, commandName, commandArgs)
       } else {
         await props.onSend(resolvedPrompt, currentAttachments)
       }
@@ -390,9 +351,7 @@ export default function PromptInput(props: PromptInputProps) {
     const blockquote = lines.map((line) => `> ${line}`).join("\n")
     if (!blockquote) return
 
-    // End the blockquote with a blank line so the user's next line
-    // doesn't get parsed as a lazy continuation of the quote.
-    insertBlockContent(`${blockquote}\n\n`)
+    insertBlockContent(`${blockquote}\n`)
   }
 
   function insertCodeSelection(rawText: string) {
@@ -467,20 +426,18 @@ export default function PromptInput(props: PromptInputProps) {
         onDrop={handleDrop}
       >
         <Show when={showPicker() && instance()}>
-          <Suspense fallback={null}>
-            <LazyUnifiedPicker
-              open={showPicker()}
-              mode={pickerMode()}
-              onClose={handlePickerClose}
-              onSelect={handlePickerSelect}
-              agents={instanceAgents()}
-              commands={getCommands(props.instanceId)}
-              instanceClient={instance()!.client}
-              searchQuery={searchQuery()}
-              textareaRef={textareaRef}
-              workspaceId={props.instanceId}
-            />
-          </Suspense>
+          <UnifiedPicker
+            open={showPicker()}
+            mode={pickerMode()}
+            onClose={handlePickerClose}
+            onSelect={handlePickerSelect}
+            agents={instanceAgents()}
+            commands={getCommands(props.instanceId)}
+            instanceClient={instance()!.client}
+            searchQuery={searchQuery()}
+            textareaRef={textareaRef}
+            workspaceId={props.instanceId}
+          />
         </Show>
 
         <div class="flex flex-1 flex-col">
@@ -490,7 +447,6 @@ export default function PromptInput(props: PromptInputProps) {
               <textarea
                 ref={textareaRef}
                 class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""} ${expandState() === "expanded" ? "is-expanded" : ""}`}
-                dir="auto"
                 placeholder={getPlaceholder()}
                 value={prompt()}
                 onInput={handleInput}

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

@@ -444,7 +444,7 @@ const SessionList: Component<SessionListProps> = (props) => {
               </Show>
 
               {rowProps.isChild ? <Bot class="w-4 h-4 flex-shrink-0" /> : <User class="w-4 h-4 flex-shrink-0" />}
-              <span class="session-item-title session-item-title--clamp" dir="auto">{title()}</span>
+              <span class="session-item-title session-item-title--clamp">{title()}</span>
             </div>
           </div>
           <div class="session-item-row session-item-meta">

packages/ui/src/components/session-rename-dialog.tsx

@@ -76,7 +76,6 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                     inputRef = element
                   }}
                   type="text"
-                  dir="auto"
                   value={title()}
                   onInput={(event) => setTitle(event.currentTarget.value)}
                   placeholder={t("sessionRenameDialog.input.placeholder")}

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

@@ -10,7 +10,6 @@ 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"
@@ -56,22 +55,12 @@ 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(() => {
@@ -80,7 +69,6 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   }
   createEffect(() => {
     if (!props.isActive) return
-    if (!shouldScrollToBottomOnActivate()) return
     scheduleScrollToBottom()
   })
 
@@ -237,35 +225,6 @@ 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")
@@ -324,17 +283,14 @@ export const SessionView: Component<SessionViewProps> = (props) => {
             <MessageSection
                instanceId={props.instanceId}
                sessionId={activeSession.id}
-                loading={messagesLoading()}
-                onRevert={handleRevert}
-                onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
-                onFork={handleFork}
-                isActive={props.isActive}
+               loading={messagesLoading()}
+               onRevert={handleRevert}
+               onFork={handleFork}
+               isActive={props.isActive}
                 registerScrollToBottom={(fn) => {
                   scrollToBottomHandle = fn
                   if (props.isActive) {
-                    if (shouldScrollToBottomOnActivate()) {
-                      scheduleScrollToBottom()
-                    }
+                    scheduleScrollToBottom()
                   }
                 }}
 

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

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

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

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

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

@@ -1,401 +0,0 @@
-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/ansi-render.tsx

@@ -1,7 +1,7 @@
 import type { Accessor, JSXElement } from "solid-js"
 import type { RenderCache } from "../../types/message"
 import { ansiToHtml, createAnsiStreamRenderer, hasAnsi } from "../../lib/ansi"
-import { escapeHtml } from "../../lib/text-render-utils"
+import { escapeHtml } from "../../lib/markdown"
 import type { AnsiRenderOptions, ToolScrollHelpers } from "./types"
 
 type AnsiRenderCache = RenderCache & { hasAnsi: boolean }
@@ -20,14 +20,6 @@ export function createAnsiContentRenderer(params: {
   const runningAnsiRenderer = createAnsiStreamRenderer()
   let runningAnsiSource = ""
 
-  const registerTracked = (element: HTMLDivElement | null) => {
-    params.scrollHelpers.registerContainer(element)
-  }
-
-  const registerUntracked = (element: HTMLDivElement | null) => {
-    params.scrollHelpers.registerContainer(element, { disableTracking: true })
-  }
-
   const getMode = () => {
     const version = params.partVersion?.()
     return typeof version === "number" ? String(version) : undefined
@@ -44,8 +36,6 @@ export function createAnsiContentRenderer(params: {
     const cached = cacheHandle.get<AnsiRenderCache>()
     const mode = getMode()
     const isRunningVariant = options.variant === "running"
-    const disableScrollTracking = !isRunningVariant
-    const registerRef = disableScrollTracking ? registerUntracked : registerTracked
 
     let nextCache: AnsiRenderCache
 
@@ -97,9 +87,9 @@ export function createAnsiContentRenderer(params: {
     }
 
     return (
-      <div class={messageClass} ref={registerRef} onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}>
-        <pre class="tool-call-content tool-call-ansi" dir="auto" innerHTML={nextCache.html} />
-        {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
+      <div class={messageClass} ref={params.scrollHelpers.registerContainer} onScroll={params.scrollHelpers.handleScroll}>
+        <pre class="tool-call-content tool-call-ansi" innerHTML={nextCache.html} />
+        {params.scrollHelpers.renderSentinel()}
       </div>
     )
   }

packages/ui/src/components/tool-call/diagnostics-section.tsx

@@ -42,7 +42,7 @@ export function renderDiagnosticsSection(
                     {entry.displayPath}
                     <span class="tool-call-diagnostic-coords">:L{entry.line || "-"}:C{entry.column || "-"}</span>
                   </span>
-                  <span class="tool-call-diagnostic-message" dir="auto">{entry.message}</span>
+                  <span class="tool-call-diagnostic-message">{entry.message}</span>
                 </div>
               )}
             </For>

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

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

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

@@ -1,27 +1,11 @@
-import { Suspense, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk/v2"
+import type { Accessor, JSXElement } from "solid-js"
 import type { RenderCache } from "../../types/message"
 import type { DiffViewMode } from "../../stores/preferences"
+import { ToolCallDiffViewer } from "../diff-viewer"
 import type { DiffPayload, DiffRenderOptions, ToolScrollHelpers } from "./types"
 import { getRelativePath } from "./utils"
 import { getCacheEntry } from "../../lib/global-cache"
 
-const LazyToolCallDiffViewer = lazy(() =>
-  import("../diff-viewer").then((module) => ({ default: module.ToolCallDiffViewer })),
-)
-
-function CachedDiffMarkup(props: { html: string; onRendered?: () => void }) {
-  onMount(() => {
-    props.onRendered?.()
-  })
-
-  return (
-    <div class="tool-call-diff-viewer">
-      <div innerHTML={props.html} />
-    </div>
-  )
-}
-
 type CacheHandle = {
   get<T>(): T | undefined
   params(): unknown
@@ -32,7 +16,6 @@ type DiffPrefs = {
 }
 
 export function createDiffContentRenderer(params: {
-  toolState: Accessor<ToolState | undefined>
   preferences: Accessor<DiffPrefs>
   setDiffViewMode: (mode: DiffViewMode) => void
   isDark: Accessor<boolean>
@@ -60,10 +43,7 @@ export function createDiffContentRenderer(params: {
     const cacheHandle = selectedVariant === "permission-diff" ? params.permissionDiffCache : params.diffCache
     const diffMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
     const themeKey = params.isDark() ? "dark" : "light"
-    const state = params.toolState()
-    const disableScrollTracking = Boolean(
-      options?.disableScrollTracking || (state?.status !== "running" && state?.status !== "pending"),
-    )
+    const disableScrollTracking = Boolean(options?.disableScrollTracking)
     const registerRef = disableScrollTracking ? registerUntracked : registerTracked
 
     const baseEntryParams = cacheHandle.params() as any
@@ -121,20 +101,15 @@ export function createDiffContentRenderer(params: {
             </button>
           </div>
         </div>
-        {cachedHtml ? (
-          <CachedDiffMarkup html={cachedHtml} onRendered={handleDiffRendered} />
-        ) : (
-          <Suspense fallback={<pre class="tool-call-diff-fallback">{payload.diffText}</pre>}>
-            <LazyToolCallDiffViewer
-              diffText={payload.diffText}
-              filePath={payload.filePath}
-              theme={themeKey}
-              mode={diffMode()}
-              cacheEntryParams={cacheEntryParams as any}
-              onRendered={handleDiffRendered}
-            />
-          </Suspense>
-        )}
+        <ToolCallDiffViewer
+          diffText={payload.diffText}
+          filePath={payload.filePath}
+          theme={themeKey}
+          mode={diffMode()}
+          cachedHtml={cachedHtml}
+          cacheEntryParams={cacheEntryParams as any}
+          onRendered={handleDiffRendered}
+        />
         {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
       </div>
     )

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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 import type { TextPart } from "../../types/message"
 import { Markdown } from "../markdown"
 import type { MarkdownRenderOptions, ToolScrollHelpers } from "./types"
@@ -31,9 +31,10 @@ export function createMarkdownContentRenderer(params: {
     const size = options.size || "default"
     const disableHighlight = options.disableHighlight || false
     const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}`
-    const state = params.toolState()
-    const disableScrollTracking = options.disableScrollTracking || (state?.status !== "running" && state?.status !== "pending")
+    const disableScrollTracking = options.disableScrollTracking || false
     const registerRef = disableScrollTracking ? registerUntracked : registerTracked
+
+    const state = params.toolState()
     const shouldDeferMarkdown = Boolean(state && (state.status === "running" || state.status === "pending") && disableHighlight)
     if (shouldDeferMarkdown) {
       return (
@@ -42,7 +43,7 @@ export function createMarkdownContentRenderer(params: {
           ref={registerRef}
           onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
         >
-          <pre class="whitespace-pre-wrap break-words text-sm font-mono" dir="auto">{options.content}</pre>
+          <pre class="whitespace-pre-wrap break-words text-sm font-mono">{options.content}</pre>
           {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
         </div>
       )

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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
 import { resolveTitleForTool } from "../tool-title"
@@ -178,116 +178,28 @@ export const taskRenderer: ToolRenderer = {
       void loadMessages(instanceId, id)
     })
 
-    const [childToolKeys, setChildToolKeys] = createSignal<string[]>([])
-
-    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 childToolKeys = createMemo(() => {
       const id = childSessionId()
-      const loaded = childSessionLoaded()
+      if (!id) return [] as string[]
+      if (!childSessionLoaded()) return [] as string[]
 
-      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.
+      // React to session changes, but do the scan untracked to avoid
+      // subscribing to every message/part node in the store.
       store.getSessionRevision(id)
-
-      untrack(() => {
+      return untrack(() => {
         const messageIds = store.getSessionMessageIds(id)
-
-        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
-          }
-        }
-
-        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 keys: string[] = []
+        for (const messageId of messageIds) {
           const record = store.getMessage(messageId)
-          const nextPartCount = record?.partIds.length ?? 0
-          if (nextPartCount > previousPartCount) {
-            appendedKeys.push(...scanMessageToolParts(messageId, previousPartCount))
+          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}`)
           }
         }
-
-        indexedMessageCount = messageIds.length
-        indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
-
-        if (appendedKeys.length > 0) {
-          setChildToolKeys((prev) => [...prev, ...appendedKeys])
-        }
+        return keys
       })
     })
     const promptContent = createMemo(() => {
@@ -375,9 +287,7 @@ export const taskRenderer: ToolRenderer = {
                 content: promptContent()!,
                 cacheKey: "task:prompt",
                 disableScrollTracking: true,
-                // Always use the normal markdown render path for prompt (even while running)
-                // so the prompt doesn't visually change between running/completed states.
-                disableHighlight: false,
+                disableHighlight: true,
               })}
             </div>
           </section>
@@ -442,7 +352,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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 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/v2"
+import type { ToolState } from "@opencode-ai/sdk"
 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/text-render-utils"
-import type { ToolState } from "@opencode-ai/sdk/v2"
+import { getLanguageFromPath } from "../../lib/markdown"
+import type { ToolState } from "@opencode-ai/sdk"
 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/v2").ToolStateRunning
-export type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
-export type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
+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 const diffCapableTools = new Set(["edit", "patch"])
 

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

@@ -1,398 +0,0 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX, on } from "solid-js"
-import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
-
-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 [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
-  const [shellElement, setShellElement] = createSignal<HTMLDivElement | undefined>()
-  const [virtuaHandle, setVirtuaHandle] = createSignal<VirtualizerHandle | undefined>()
-
-  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 [autoScroll, setAutoScroll] = createSignal(Boolean(initialAutoScroll()))
-  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
-  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
-  const [activeKey, setActiveKey] = createSignal<string | null>(null)
-
-  const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
-
-  let userScrollIntentUntil = 0
-  let lastUserScrollIntentDirection: "up" | "down" | null = null
-  let detachScrollIntentListeners: (() => void) | undefined
-  let lastResetKey: string | number | undefined
-  let suppressAutoScrollOnce = false
-  let pendingInitialScroll = true
-
-  const state: VirtualFollowListState = {
-    autoScroll,
-    showScrollTopButton,
-    showScrollBottomButton,
-    scrollButtonsCount,
-    activeKey,
-  }
-
-  function markUserScrollIntent(direction?: "up" | "down" | null) {
-    const now = performance.now()
-    userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
-    if (direction) {
-      lastUserScrollIntentDirection = direction
-    }
-  }
-
-  function hasUserScrollIntent() {
-    return performance.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 updateScrollButtons() {
-    const handle = virtuaHandle()
-    const element = scrollElement()
-    if (!handle || !element) return
-
-    const offset = handle.scrollOffset
-    const scrollHeight = handle.scrollSize
-    const clientHeight = element.clientHeight
-    const atBottom = scrollHeight - (offset + clientHeight) <= (props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX)
-    const atTop = offset <= (props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX)
-
-    const hasItems = props.items().length > 0
-    setShowScrollBottomButton(hasItems && !atBottom)
-    setShowScrollTopButton(hasItems && !atTop)
-
-    // Sync autoScroll state based on scroll position if it was a user scroll
-    if (hasUserScrollIntent()) {
-      if (atBottom && !autoScroll()) {
-        setAutoScroll(true)
-      } else if (!atBottom && autoScroll()) {
-        setAutoScroll(false)
-      }
-    }
-  }
-
-  function scrollToBottom(immediate = true, options?: { suppressAutoAnchor?: boolean }) {
-    const handle = virtuaHandle()
-    if (!handle) return
-    if (options?.suppressAutoAnchor ?? !immediate) {
-      suppressAutoScrollOnce = true
-    }
-    handle.scrollToIndex(props.items().length - 1, { align: "end", smooth: !immediate })
-    setAutoScroll(true)
-  }
-
-  function scrollToTop(immediate = true) {
-    const handle = virtuaHandle()
-    if (!handle) return
-    handle.scrollToIndex(0, { align: "start", smooth: !immediate })
-    setAutoScroll(false)
-  }
-
-  function handleScroll() {
-    const isUserScroll = hasUserScrollIntent()
-    if (isUserScroll) {
-      if (lastUserScrollIntentDirection === "up" && autoScroll()) {
-        setAutoScroll(false)
-      }
-    }
-    updateScrollButtons()
-    props.onScroll?.()
-
-    // Find active key (roughly the first visible item)
-    const handle = virtuaHandle()
-    if (handle) {
-      const start = handle.findItemIndex(handle.scrollOffset)
-      const items = props.items()
-      if (items[start]) {
-        const key = props.getKey(items[start], start)
-        if (key !== activeKey()) {
-          setActiveKey(key)
-          props.onActiveKeyChange?.(key)
-        }
-      }
-    }
-  }
-
-  const api: VirtualFollowListApi = {
-    scrollToTop: (opts) => scrollToTop(opts?.immediate ?? true),
-    scrollToBottom: (opts) => scrollToBottom(opts?.immediate ?? true, { suppressAutoAnchor: opts?.suppressAutoAnchor }),
-    scrollToKey: (key, opts) => {
-      const index = props.items().findIndex((item, i) => props.getKey(item, i) === key)
-      if (index === -1) return
-      const nextAutoScroll = opts?.setAutoScroll ?? false
-      setAutoScroll(nextAutoScroll)
-      virtuaHandle()?.scrollToIndex(index, { align: opts?.block ?? "start", smooth: opts?.behavior === "smooth" })
-    },
-    notifyContentRendered: () => {
-      if (autoScroll()) {
-        scrollToBottom(true)
-      }
-    },
-    setAutoScroll: (enabled) => setAutoScroll(Boolean(enabled)),
-    getAutoScroll: () => autoScroll(),
-    getScrollElement: () => scrollElement(),
-    getShellElement: () => shellElement(),
-  }
-
-  createEffect(() => props.registerApi?.(api))
-  createEffect(() => props.registerState?.(state))
-
-  // Handle autoScroll (Follow) on items change
-  createEffect(on(() => props.items().length, (len, prevLen) => {
-    if (len > (prevLen ?? 0) && autoScroll() && !suppressAutoScrollOnce) {
-      requestAnimationFrame(() => scrollToBottom(true))
-    }
-    suppressAutoScrollOnce = false
-  }, { defer: true }))
-
-  // Handle followToken change
-  createEffect(on(() => props.followToken?.(), () => {
-    if (autoScroll()) {
-      scrollToBottom(true)
-    }
-  }, { defer: true }))
-
-  // Reset state on resetKey change
-  createEffect(on(() => props.resetKey?.(), (nextKey) => {
-    if (nextKey === lastResetKey) return
-    lastResetKey = nextKey
-    setAutoScroll(initialAutoScroll())
-    pendingInitialScroll = true
-  }))
-
-  // Initial scroll and session activation
-  createEffect(() => {
-    const active = isActive()
-    if (!active) return
-    if (pendingInitialScroll && props.items().length > 0) {
-      pendingInitialScroll = false
-      if (initialScrollToBottom()) {
-        scrollToBottom(true)
-      }
-    } else if (autoScroll() && scrollToBottomOnActivate()) {
-      scrollToBottom(true)
-    }
-  })
-
-  return (
-    <div class="virtual-follow-list-shell" ref={shellElement => {
-      setShellElement(shellElement)
-      props.onShellElementChange?.(shellElement)
-    }}>
-      <div
-        class="message-stream"
-        ref={el => {
-          setScrollElement(el)
-          props.onScrollElementChange?.(el)
-          attachScrollIntentListeners(el)
-        }}
-        onMouseUp={props.onMouseUp}
-        onClick={props.onClick}
-      >
-        <Show when={props.renderBeforeItems}>
-          {props.renderBeforeItems!()}
-        </Show>
-        <Virtualizer
-          ref={setVirtuaHandle}
-          scrollRef={scrollElement()}
-          data={props.items()}
-          bufferSize={props.overscanPx ?? 400}
-          onScroll={handleScroll}
-        >
-          {(item, index) => props.renderItem(item, index())}
-        </Virtualizer>
-      </div>
-
-      <Show when={props.renderOverlay}>
-        <div class="virtual-follow-list-overlay">{props.renderOverlay!()}</div>
-      </Show>
-
-      <Show when={props.renderControls}>
-        <div class="virtual-follow-list-controls-container">{props.renderControls!(state, api)}</div>
-      </Show>
-
-      <Show
-        when={
-          !props.renderControls &&
-          (showScrollTopButton() || showScrollBottomButton()) &&
-          props.scrollToTopAriaLabel &&
-          props.scrollToBottomAriaLabel
-        }
-      >
-        <div class="message-scroll-button-wrapper">
-          <Show when={showScrollTopButton()}>
-            <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label={props.scrollToTopAriaLabel!()}>
-              <span class="message-scroll-icon" aria-hidden="true">
-                ↑
-              </span>
-            </button>
-          </Show>
-          <Show when={showScrollBottomButton()}>
-            <button type="button" class="message-scroll-button" onClick={() => scrollToBottom()} aria-label={props.scrollToBottomAriaLabel!()}>
-              <span class="message-scroll-icon" aria-hidden="true">
-                ↓
-              </span>
-            </button>
-          </Show>
-        </div>
-      </Show>
-    </div>
-  )
-}

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

@@ -0,0 +1,343 @@
+import { JSX, Accessor, children as resolveChildren, 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
+
+type ObserverRoot = Element | Document | null
+
+type IntersectionCallback = (entry: IntersectionObserverEntry) => void
+
+interface SharedObserver {
+  observer: IntersectionObserver
+  listeners: Map<Element, Set<IntersectionCallback>>
+}
+
+const NULL_ROOT_KEY = "__null__"
+const rootIds = new WeakMap<Element | Document, number>()
+let sharedRootId = 0
+const sharedObservers = new Map<string, SharedObserver>()
+
+function getRootKey(root: ObserverRoot, margin: number): string {
+  if (!root) {
+    return `${NULL_ROOT_KEY}:${margin}`
+  }
+  let id = rootIds.get(root)
+  if (id === undefined) {
+    id = ++sharedRootId
+    rootIds.set(root, id)
+  }
+  return `${id}:${margin}`
+}
+
+function createSharedObserver(root: ObserverRoot, margin: number): SharedObserver {
+  const listeners = new Map<Element, Set<IntersectionCallback>>()
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const callbacks = listeners.get(entry.target as Element)
+        if (!callbacks) return
+        callbacks.forEach((fn) => fn(entry))
+      })
+    },
+    {
+      root: root ?? undefined,
+      rootMargin: `${margin}px 0px ${margin}px 0px`,
+    },
+  )
+  return { observer, listeners }
+}
+
+function shouldRenderEntry(entry: IntersectionObserverEntry) {
+  const rootBounds = entry.rootBounds
+  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) {
+    return false
+  }
+  return true
+}
+
+function subscribeToSharedObserver(
+  target: Element,
+  root: ObserverRoot,
+  margin: number,
+  callback: IntersectionCallback,
+): () => void {
+  if (typeof IntersectionObserver === "undefined") {
+    callback({ isIntersecting: true } as IntersectionObserverEntry)
+    return () => {}
+  }
+  const key = getRootKey(root, margin)
+  let shared = sharedObservers.get(key)
+  if (!shared) {
+    shared = createSharedObserver(root, margin)
+    sharedObservers.set(key, shared)
+  }
+  let targetCallbacks = shared.listeners.get(target)
+  if (!targetCallbacks) {
+    targetCallbacks = new Set()
+    shared.listeners.set(target, targetCallbacks)
+    shared.observer.observe(target)
+  }
+  targetCallbacks.add(callback)
+  return () => {
+    const current = shared?.listeners.get(target)
+    if (current) {
+      current.delete(callback)
+      if (current.size === 0) {
+        shared?.listeners.delete(target)
+        shared?.observer.unobserve(target)
+      }
+    }
+    if (shared && shared.listeners.size === 0) {
+      shared.observer.disconnect()
+      sharedObservers.delete(key)
+    }
+  }
+}
+
+interface VirtualItemProps {
+  cacheKey: string
+  children: JSX.Element
+  scrollContainer?: Accessor<HTMLElement | undefined | null>
+  threshold?: number
+  minPlaceholderHeight?: number
+  class?: string
+  contentClass?: string
+  placeholderClass?: string
+  virtualizationEnabled?: Accessor<boolean>
+  forceVisible?: Accessor<boolean>
+  suspendMeasurements?: Accessor<boolean>
+  onMeasured?: () => void
+  id?: string
+}
+
+export default function VirtualItem(props: VirtualItemProps) {
+  const resolved = resolveChildren(() => 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)
+  let hasReportedMeasurement = Boolean(cachedHeight && cachedHeight > 0)
+  let pendingVisibility: boolean | null = null
+  let visibilityFrame: number | null = null
+  const flushVisibility = () => {
+    if (visibilityFrame !== null) {
+      cancelAnimationFrame(visibilityFrame)
+      visibilityFrame = null
+    }
+    if (pendingVisibility !== null) {
+      setIsIntersecting(pendingVisibility)
+      pendingVisibility = null
+    }
+  }
+  const queueVisibility = (nextValue: boolean) => {
+    pendingVisibility = nextValue
+    if (visibilityFrame !== null) return
+    visibilityFrame = requestAnimationFrame(() => {
+      visibilityFrame = null
+      if (pendingVisibility !== null) {
+        setIsIntersecting(pendingVisibility)
+        pendingVisibility = null
+      }
+    })
+  }
+  const virtualizationEnabled = () => (props.virtualizationEnabled ? props.virtualizationEnabled() : true)
+  const shouldHideContent = createMemo(() => {
+    if (props.forceVisible?.()) return false
+    if (!virtualizationEnabled()) return false
+    return !isIntersecting()
+  })
+  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+ 
+   let wrapperRef: HTMLDivElement | undefined
+ 
+  let contentRef: HTMLDivElement | undefined
+
+  let resizeObserver: ResizeObserver | undefined
+  let intersectionCleanup: (() => void) | undefined
+
+  function cleanupResizeObserver() {
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+      resizeObserver = undefined
+    }
+  }
+
+  function cleanupIntersectionObserver() {
+    if (intersectionCleanup) {
+      intersectionCleanup()
+      intersectionCleanup = undefined
+    }
+  }
+
+  function persistMeasurement(nextHeight: number) {
+    if (!Number.isFinite(nextHeight) || nextHeight < 0) {
+      return
+    }
+    const normalized = nextHeight
+    const previous = sizeCache.get(props.cacheKey) ?? measuredHeight()
+    const shouldKeepPrevious = previous > 0 && (normalized === 0 || (normalized > 0 && normalized < previous))
+    if (shouldKeepPrevious) {
+      if (!hasReportedMeasurement) {
+        hasReportedMeasurement = true
+        props.onMeasured?.()
+      }
+      setHasMeasured(true)
+      sizeCache.set(props.cacheKey, previous)
+      setMeasuredHeight(previous)
+      return
+    }
+    if (normalized > 0) {
+      sizeCache.set(props.cacheKey, normalized)
+      setHasMeasured(true)
+      if (!hasReportedMeasurement) {
+        hasReportedMeasurement = true
+        props.onMeasured?.()
+      }
+    }
+    setMeasuredHeight(normalized)
+  }
+
+  function updateMeasuredHeight() {
+    if (!contentRef || measurementsSuspended()) return
+    const next = contentRef.offsetHeight
+    if (next === measuredHeight()) return
+    persistMeasurement(next)
+  }
+ 
+  function setupResizeObserver() {
+    if (!contentRef || measurementsSuspended()) return
+    cleanupResizeObserver()
+    if (typeof ResizeObserver === "undefined") {
+      updateMeasuredHeight()
+      return
+    }
+    resizeObserver = new ResizeObserver(() => {
+      if (measurementsSuspended()) return
+      updateMeasuredHeight()
+    })
+    resizeObserver.observe(contentRef)
+  }
+
+
+  function refreshIntersectionObserver(targetRoot: Element | Document | null) {
+    cleanupIntersectionObserver()
+    if (!wrapperRef) {
+      setIsIntersecting(true)
+      return
+    }
+    if (typeof IntersectionObserver === "undefined") {
+      setIsIntersecting(true)
+      return
+    }
+    const margin = props.threshold ?? DEFAULT_MARGIN_PX
+    intersectionCleanup = subscribeToSharedObserver(wrapperRef, targetRoot, margin, (entry) => {
+      const nextVisible = shouldRenderEntry(entry)
+      queueVisibility(nextVisible)
+    })
+  }
+
+  function setWrapperRef(element: HTMLDivElement | null) {
+    wrapperRef = element ?? undefined
+    const root = props.scrollContainer ? props.scrollContainer() : null
+    refreshIntersectionObserver(root ?? null)
+  }
+
+  function setContentRef(element: HTMLDivElement | null) {
+    contentRef = element ?? undefined
+    if (contentRef) {
+      queueMicrotask(() => {
+        if (shouldHideContent() || measurementsSuspended()) return
+        updateMeasuredHeight()
+        setupResizeObserver()
+      })
+    } else {
+      cleanupResizeObserver()
+    }
+  }
+ 
+  
+  createEffect(() => {
+    if (shouldHideContent() || measurementsSuspended()) {
+      cleanupResizeObserver()
+    } else if (contentRef) {
+      queueMicrotask(() => {
+        updateMeasuredHeight()
+        setupResizeObserver()
+      })
+    }
+  })
+
+ 
+  createEffect(() => {
+    const key = props.cacheKey
+
+    const cached = sizeCache.get(key)
+    if (cached !== undefined) {
+      setMeasuredHeight(cached)
+      setHasMeasured(true)
+    } else {
+      setMeasuredHeight(0)
+      setHasMeasured(false)
+    }
+  })
+
+  createEffect(() => {
+    measurementsSuspended()
+    const root = props.scrollContainer ? props.scrollContainer() : null
+    refreshIntersectionObserver(root ?? null)
+  })
+
+  const placeholderHeight = createMemo(() => {
+
+    const seenHeight = measuredHeight()
+    if (seenHeight > 0) {
+      return seenHeight
+    }
+    return props.minPlaceholderHeight ?? MIN_PLACEHOLDER_HEIGHT
+  })
+ 
+  onCleanup(() => {
+    cleanupResizeObserver()
+    cleanupIntersectionObserver()
+    flushVisibility()
+  })
+ 
+  const wrapperClass = () => ["virtual-item-wrapper", props.class].filter(Boolean).join(" ")
+  const contentClass = () => {
+    const classes = ["virtual-item-content", props.contentClass]
+    if (shouldHideContent()) {
+      classes.push("virtual-item-content-hidden")
+    }
+    return classes.filter(Boolean).join(" ")
+  }
+  const placeholderClass = () => ["virtual-item-placeholder", props.placeholderClass].filter(Boolean).join(" ")
+  const lazyContent = createMemo<JSX.Element | null>(() => {
+    if (shouldHideContent()) return null
+    return resolved()
+  })
+
+ 
+  return (
+    <div ref={setWrapperRef} id={props.id} class={wrapperClass()} style={{ width: "100%" }}>
+      <div
+        class={placeholderClass()}
+        style={{
+          width: "100%",
+          height: shouldHideContent() ? `${placeholderHeight()}px` : undefined,
+        }}
+      >
+        <div ref={setContentRef} class={contentClass()}>
+          {lazyContent()}
+        </div>
+      </div>
+    </div>
+  )
+}
+

packages/ui/src/components/worktree-selector.tsx

@@ -18,7 +18,6 @@ import {
   setWorktreeSlugForParentSession,
 } from "../stores/worktrees"
 import { sessions } from "../stores/sessions"
-import { useI18n } from "../lib/i18n"
 
 const log = getLogger("session")
 
@@ -26,6 +25,8 @@ type WorktreeOption =
   | { kind: "action"; key: "__create__"; label: string }
   | { kind: "worktree"; key: string; slug: string; directory: string; raw: WorktreeDescriptor }
 
+const CREATE_OPTION: WorktreeOption = { kind: "action", key: "__create__", label: "+ Create worktree" }
+
 function preventSelectPress(event: PointerEvent | MouseEvent) {
   // Prevent Select.Item from treating this as a selection.
   // We intentionally prevent default to stop Kobalte's internal press handling.
@@ -70,7 +71,6 @@ interface WorktreeSelectorProps {
 }
 
 export default function WorktreeSelector(props: WorktreeSelectorProps) {
-  const { t } = useI18n()
   const [isOpen, setIsOpen] = createSignal(false)
   const [createOpen, setCreateOpen] = createSignal(false)
   const [createSlug, setCreateSlug] = createSignal("")
@@ -99,8 +99,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
       directory: wt.directory,
       raw: wt,
     }))
-    const createOption: WorktreeOption = { kind: "action", key: "__create__", label: t("instanceShell.worktree.create") }
-    return [createOption, ...mapped]
+    return [CREATE_OPTION, ...mapped]
   })
 
   const selectedOption = createMemo<WorktreeOption | undefined>(() => {

packages/ui/src/lib/external-url.ts

@@ -1,23 +0,0 @@
-import { isTauriHost } from "./runtime-env"
-
-export async function openExternalUrl(url: string, context = "ui"): Promise<void> {
-  if (typeof window === "undefined") {
-    return
-  }
-
-  if (isTauriHost()) {
-    try {
-      const { openUrl } = await import("@tauri-apps/plugin-opener")
-      await openUrl(url)
-      return
-    } catch (error) {
-      console.warn(`[${context}] unable to open via system opener`, error)
-    }
-  }
-
-  try {
-    window.open(url, "_blank", "noopener,noreferrer")
-  } catch (error) {
-    console.warn(`[${context}] unable to open external url`, error)
-  }
-}

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 { registerBehaviorCommands } from "../settings/behavior-registry"
+import { runtimeEnv } from "../runtime-env"
 
 const log = getLogger("actions")
 
@@ -427,19 +427,178 @@ export function useCommands(options: UseCommandsOptions) {
       },
     })
 
-    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({
+      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,
     })
  
     commandRegistry.register({

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

@@ -1,158 +0,0 @@
-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/index.tsx

@@ -2,32 +2,27 @@ import { createContext, createEffect, createMemo, createSignal, onCleanup, onMou
 import type { ParentComponent } from "solid-js"
 import { useConfig } from "../../stores/preferences"
 import { enMessages } from "./messages/en"
+import { esMessages } from "./messages/es"
+import { frMessages } from "./messages/fr"
+import { ruMessages } from "./messages/ru"
+import { jaMessages } from "./messages/ja"
+import { zhHansMessages } from "./messages/zh-Hans"
 
 type Messages = Record<string, string>
 
 export type TranslateParams = Record<string, unknown>
 
-export type Locale = "en" | "es" | "fr" | "ru" | "ja" | "zh-Hans" | "he"
+export type Locale = "en" | "es" | "fr" | "ru" | "ja" | "zh-Hans"
 
-const SUPPORTED_LOCALES: readonly Locale[] = ["en", "es", "fr", "ru", "ja", "zh-Hans", "he"] as const
-const SUPPORTED_LOCALES_BY_LOWER = new Map(SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale]))
-const RTL_LOCALES = new Set<Locale>(["he"])
+const SUPPORTED_LOCALES: readonly Locale[] = ["en", "es", "fr", "ru", "ja", "zh-Hans"] as const
 
-const localeMessagesCache = new Map<Locale, Messages>([["en", enMessages]])
-const localeMessagesPromises = new Map<Locale, Promise<Messages>>()
-
-const localeLoaders: Record<Locale, () => Promise<Messages>> = {
-  en: async () => enMessages,
-  es: async () => (await import("./messages/es")).esMessages,
-  fr: async () => (await import("./messages/fr")).frMessages,
-  ru: async () => (await import("./messages/ru")).ruMessages,
-  ja: async () => (await import("./messages/ja")).jaMessages,
-  "zh-Hans": async () => (await import("./messages/zh-Hans")).zhHansMessages,
-  he: async () => (await import("./messages/he")).heMessages,
-}
-
-function getLocaleDirection(locale: Locale): "ltr" | "rtl" {
-  return RTL_LOCALES.has(locale) ? "rtl" : "ltr"
+const messagesByLocale: Record<Locale, Messages> = {
+  en: enMessages,
+  es: esMessages,
+  fr: frMessages,
+  ru: ruMessages,
+  ja: jaMessages,
+  "zh-Hans": zhHansMessages,
 }
 
 function normalizeLocaleTag(value: string): string {
@@ -39,7 +34,8 @@ function matchSupportedLocale(value: string | undefined): Locale | null {
 
   const normalized = normalizeLocaleTag(value)
   const lower = normalized.toLowerCase()
-  const exact = SUPPORTED_LOCALES_BY_LOWER.get(lower)
+  const supportedLower = new Map(SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale]))
+  const exact = supportedLower.get(lower)
   if (exact) return exact
 
   const parts = lower.split("-")
@@ -47,11 +43,11 @@ function matchSupportedLocale(value: string | undefined): Locale | null {
   if (!base) return null
 
   if (base === "zh") {
-    const zhHans = SUPPORTED_LOCALES_BY_LOWER.get("zh-hans")
+    const zhHans = supportedLower.get("zh-hans")
     return zhHans ?? null
   }
 
-  const baseMatch = SUPPORTED_LOCALES_BY_LOWER.get(base)
+  const baseMatch = supportedLower.get(base)
   return baseMatch ?? null
 }
 
@@ -88,54 +84,8 @@ function translateFrom(messages: Messages, key: string, params?: TranslateParams
 }
 
 const [globalRevision, setGlobalRevision] = createSignal(0)
-let globalMessages: Messages = enMessages
-let globalLocale: Locale = "en"
-
-function getMessagesForLocale(locale: Locale): Messages {
-  return localeMessagesCache.get(locale) ?? enMessages
-}
-
-async function loadLocaleMessages(locale: Locale): Promise<Messages> {
-  const cached = localeMessagesCache.get(locale)
-  if (cached) {
-    return cached
-  }
-
-  const pending = localeMessagesPromises.get(locale)
-  if (pending) {
-    return pending
-  }
-
-  const loader = localeLoaders[locale]
-  const promise = loader()
-    .then((messages) => {
-      localeMessagesCache.set(locale, messages)
-      localeMessagesPromises.delete(locale)
-      return messages
-    })
-    .catch((error) => {
-      localeMessagesPromises.delete(locale)
-      throw error
-    })
-
-  localeMessagesPromises.set(locale, promise)
-  return promise
-}
-
-export async function preloadLocaleMessages(preferredLocale?: string | null): Promise<Locale> {
-  const resolvedLocale = matchSupportedLocale(preferredLocale ?? undefined) ?? detectNavigatorLocale() ?? "en"
-  try {
-    globalMessages = await loadLocaleMessages(resolvedLocale)
-    globalLocale = resolvedLocale
-    setGlobalRevision((value) => value + 1)
-    return resolvedLocale
-  } catch {
-    globalMessages = enMessages
-    globalLocale = "en"
-    setGlobalRevision((value) => value + 1)
-    return "en"
-  }
-}
+const initialGlobalLocale: Locale = detectNavigatorLocale() ?? "en"
+let globalMessages: Messages = messagesByLocale[initialGlobalLocale]
 
 export function tGlobal(key: string, params?: TranslateParams): string {
   globalRevision()
@@ -151,12 +101,9 @@ const I18nContext = createContext<I18nContextValue>()
 
 export const I18nProvider: ParentComponent = (props) => {
   const { preferences } = useConfig()
-  const [detectedLocale, setDetectedLocale] = createSignal<Locale>(globalLocale)
-  const [resolvedLocale, setResolvedLocale] = createSignal<Locale>(globalLocale)
-  const previousGlobalMessages = globalMessages
-  const previousGlobalLocale = globalLocale
-  const previousDocumentLanguage = typeof document !== "undefined" ? document.documentElement.lang : ""
-  const previousDocumentDirection = typeof document !== "undefined" ? document.documentElement.dir : ""
+  const [detectedLocale, setDetectedLocale] = createSignal<Locale>("en")
+
+  const previousMessages = globalMessages
 
   onMount(() => {
     const detected = detectNavigatorLocale()
@@ -168,56 +115,20 @@ export const I18nProvider: ParentComponent = (props) => {
     return configured ?? detectedLocale() ?? "en"
   })
 
-  const messages = createMemo<Messages>(() => getMessagesForLocale(resolvedLocale()))
+  const messages = createMemo<Messages>(() => messagesByLocale[locale()])
 
   function t(key: string, params?: TranslateParams): string {
     return translateFrom(messages(), key, params)
   }
 
   createEffect(() => {
-    const nextLocale = locale()
-    let cancelled = false
-
-    void loadLocaleMessages(nextLocale)
-      .then((loadedMessages) => {
-        if (cancelled) {
-          return
-        }
-        setResolvedLocale(nextLocale)
-        globalLocale = nextLocale
-        globalMessages = loadedMessages
-        setGlobalRevision((value) => value + 1)
-      })
-      .catch(() => {
-        if (cancelled) {
-          return
-        }
-        setResolvedLocale("en")
-        globalMessages = enMessages
-        globalLocale = "en"
-        setGlobalRevision((value) => value + 1)
-      })
-
-    onCleanup(() => {
-      cancelled = true
-    })
-  })
-
-  createEffect(() => {
-    if (typeof document === "undefined") return
-    const activeLocale = locale()
-    document.documentElement.dir = getLocaleDirection(activeLocale)
-    document.documentElement.lang = activeLocale
+    globalMessages = messages()
+    setGlobalRevision((value) => value + 1)
   })
 
   onCleanup(() => {
-    globalMessages = previousGlobalMessages
-    globalLocale = previousGlobalLocale
+    globalMessages = previousMessages
     setGlobalRevision((value) => value + 1)
-    if (typeof document !== "undefined") {
-      document.documentElement.lang = previousDocumentLanguage
-      document.documentElement.dir = previousDocumentDirection
-    }
   })
 
   const value: I18nContextValue = {

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

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

@@ -96,17 +96,11 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.ariaLabel": "Right panel tabs",
   "instanceShell.rightPanel.actions.refresh": "Refresh",
   "instanceShell.rightPanel.sections.sessionChanges": "Session Changes",
-  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Files modified in the current session. Shows additions and deletions for each file.",
   "instanceShell.rightPanel.sections.plan": "Plan",
-  "instanceShell.rightPanel.sections.plan.tooltip": "The agent's roadmap for this session. Tracks tasks, subtasks, and their completion status.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Background Shells",
-  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Long-running processes started by the agent. You can monitor their output, stop, or terminate them.",
   "instanceShell.rightPanel.sections.mcp": "MCP Servers",
-  "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol servers that extend the agent's capabilities with external tools and services.",
   "instanceShell.rightPanel.sections.lsp": "LSP Servers",
-  "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocol servers providing code intelligence, diagnostics, and language-specific features.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
-  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins that customize the UI and server behavior, adding features beyond MCP and LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Select a session to view changes.",
   "instanceShell.sessionChanges.loading": "Fetching session changes...",
@@ -114,26 +108,12 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "{count} files changed",
   "instanceShell.sessionChanges.actions.show": "Show changes",
 
-  "instanceShell.gitChanges.noSessionSelected": "Select a session to view git changes.",
-  "instanceShell.gitChanges.loading": "Loading git changes...",
-  "instanceShell.gitChanges.empty": "No git changes yet.",
-  "instanceShell.gitChanges.deleted": "Deleted",
-
   "instanceShell.filesShell.fileListTitle": "File list",
   "instanceShell.filesShell.mobileSelectorLabel": "Select file",
   "instanceShell.filesShell.mobileSelectorEmpty": "Select a file",
   "instanceShell.filesShell.viewerTitle": "Change viewer",
   "instanceShell.filesShell.viewerPlaceholder": "Detailed change rendering will be added in the next step.",
   "instanceShell.filesShell.viewerEmpty": "No file selected.",
-  "instanceShell.filesShell.hideFiles": "Hide files",
-  "instanceShell.filesShell.showFiles": "Show files",
-  "instanceShell.diff.hideUnchanged": "Hide unchanged regions",
-  "instanceShell.diff.showFull": "Show full file",
-  "instanceShell.diff.switchToSplit": "Switch to split view",
-  "instanceShell.diff.switchToUnified": "Switch to unified view",
-  "instanceShell.diff.enableWordWrap": "Enable word wrap",
-  "instanceShell.diff.disableWordWrap": "Disable word wrap",
-  "instanceShell.worktree.create": "+ Create worktree",
 
   "instanceShell.plan.noSessionSelected": "Select a session to view plan.",
   "instanceShell.plan.empty": "Nothing planned yet.",

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

@@ -23,6 +23,7 @@ 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",
@@ -34,12 +35,13 @@ 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 Part",
+  "messageBlock.tool.deletePart.label": "Delete",
   "messageBlock.tool.deletePart.deleting": "Deleting...",
   "messageBlock.tool.deletePart.title": "Delete this tool call output",
   "messageBlock.tool.deletePart.failed.title": "Delete failed",
@@ -69,38 +71,17 @@ export const messagingMessages = {
   "messageItem.speaker.you": "You",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revert",
-  "messageItem.actions.revertTitle": "Undo changes up to here (deletes messages)",
+  "messageItem.actions.revertTitle": "Revert to this message",
   "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 Part",
+  "messagePart.actions.delete": "Delete",
   "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,8 +67,6 @@ 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,88 +55,4 @@ 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 la configuración de 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.binaryPathLabel": "Ruta del binario",
   "app.launchError.errorOutputLabel": "Salida de error",
-  "app.launchError.openAdvancedSettings": "Abrir Configuración de OpenCode",
+  "app.launchError.openAdvancedSettings": "Abrir Configuración avanzada",
   "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,7 +22,6 @@ export const folderSelectionMessages = {
   "folderSelection.browse.buttonOpening": "Abriendo...",
 
   "folderSelection.advancedSettings": "Configuración avanzada",
-  "folderSelection.opencode": "OpenCode",
 
   "folderSelection.hints.navigate": "Navegar",
   "folderSelection.hints.select": "Seleccionar",
@@ -32,11 +31,6 @@ 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