fix(desktop): align Electron package and runtime app ids (#342)

Follow-up from #334

## Summary
- align the Electron package `build.appId` with the runtime identifier
already used in `app.setAppUserModelId(...)`
- remove the mismatch between packaged desktop identity and runtime
desktop identity
- keep the change narrowly scoped to identifier consistency only

## Validation
- verified the previous mismatch in `packages/electron-app/package.json`
vs `packages/electron-app/electron/main/main.ts`
- updated the packaging id to match the runtime id exactly

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

@@ -212,7 +212,7 @@ jobs:
         run: |
           set -euo pipefail
           shopt -s nullglob
-          for file in packages/electron-app/release/*.zip; do
+          for file in packages/electron-app/release/*.zip packages/electron-app/release/*.AppImage; do
             [ -f "$file" ] || continue
             echo "Uploading $file"
             gh release upload "$TAG" "$file" --clobber
@@ -313,7 +313,7 @@ jobs:
         run: |
           set -euo pipefail
           shopt -s nullglob
-          for file in packages/electron-app/release/*.zip; do
+          for file in packages/electron-app/release/*.zip packages/electron-app/release/*.AppImage; do
             [ -f "$file" ] || continue
             echo "Uploading $file"
             gh release upload "$TAG" "$file" --clobber
@@ -324,7 +324,9 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: ${{ inputs.actions_artifacts_name_prefix }}electron-linux
-          path: packages/electron-app/release/*.zip
+          path: |
+            packages/electron-app/release/*.zip
+            packages/electron-app/release/*.AppImage
           retention-days: ${{ inputs.actions_artifacts_retention_days }}
           if-no-files-found: error
 

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

@@ -4,6 +4,7 @@ on:
   pull_request_target:
     types:
       - opened
+      - edited
       - synchronize
       - reopened
       - ready_for_review
@@ -19,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
       IS_DRAFT: ${{ github.event.pull_request.draft }}
       PR_NUMBER: ${{ github.event.pull_request.number }}
@@ -37,7 +38,7 @@ jobs:
           fi
 
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "allowed=true" >> "$GITHUB_OUTPUT"
           else
             echo "allowed=false" >> "$GITHUB_OUTPUT"

.github/workflows/pr-build.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     types:
       - opened
+      - edited
       - synchronize
       - reopened
       - ready_for_review
@@ -23,7 +24,7 @@ jobs:
       allowed: ${{ steps.auth.outputs.allowed }}
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
     steps:
       - name: Check PR authorization
@@ -37,11 +38,11 @@ jobs:
           fi
 
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "allowed=true" >> "$GITHUB_OUTPUT"
           else
             echo "allowed=false" >> "$GITHUB_OUTPUT"
-            echo "Skipping builds for unauthorized PR targeting $BASE_REF" >&2
+            echo "Skipping builds for PR by unauthorized author targeting $BASE_REF" >&2
           fi
 
   build:

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

@@ -4,6 +4,7 @@ on:
   pull_request_target:
     types:
       - opened
+      - edited
       - reopened
       - synchronize
 
@@ -17,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       PR_NUMBER: ${{ github.event.pull_request.number }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
     steps:
@@ -27,7 +28,7 @@ jobs:
         run: |
           set -euo pipefail
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "authorized=true" >> "$GITHUB_OUTPUT"
           else
             echo "authorized=false" >> "$GITHUB_OUTPUT"
@@ -50,5 +51,5 @@ jobs:
       - name: Fail unauthorized PR
         if: ${{ steps.auth.outputs.authorized != 'true' }}
         run: |
-          echo "Actor $ACTOR is not allowed to open PRs targeting $BASE_REF" >&2
+          echo "PR author $PR_AUTHOR is not allowed to open PRs targeting $BASE_REF" >&2
           exit 1

README.md

@@ -1,128 +1,182 @@
 # CodeNomad
 
-## A fast, multi-instance workspace for running OpenCode sessions.
+## The AI Coding Cockpit for OpenCode
 
-CodeNomad is built for people who live inside OpenCode for hours on end and need a cockpit, not a kiosk. It delivers a premium, low-latency workspace that favors speed, clarity, and direct control.
+CodeNomad transforms OpenCode from a terminal tool into a **premium desktop workspace** — built for developers who live inside AI coding sessions for hours and need control, speed, and clarity.
+
+> OpenCode gives you the engine. CodeNomad gives you the cockpit.
 
 ![Multi-instance workspace](docs/screenshots/newSession.png)
-_Manage multiple OpenCode sessions side-by-side._
 
-<details>
-<summary>📸 More Screenshots</summary>
+---
 
-![Command palette overlay](docs/screenshots/command-palette.png)
-_Global command palette for keyboard-first control._
+## Features
 
-![Image Previews](docs/screenshots/image-previews.png)
-_Rich media previews for images and assets._
+- **🚀 Multi-Instance Workspace**
+- **🌐 Remote Access**
+- **🧠 Session Management**
+- **🎙️ Voice Input & Speech**
+- **🌳 Git Worktrees**
+- **💬 Rich Message Experience**
+- **🧩 SideCars**
+- **⌨️ Command Palette**
+- **📁 File System Browser**
+- **🔐 Authentication & Security**
+- **🔔 Notifications**
+- **🎨 Theming**
+- **🌍 Internationalization**
 
-![Browser Support](docs/screenshots/browser-support.png)
-_Browser support via CodeNomad Server._
-
-</details>
+---
 
 ## Getting Started
 
-Choose the way that fits your workflow:
+### 🖥️ Desktop App
 
-### 🖥️ Desktop App (Recommended)
-The best experience. A native application (Electron-based) with global shortcuts, deeper system integration, and a dedicated window.
+Available as both Electron and Tauri builds — choose based on your preference.
 
-- **Download**: Grab the latest installer for macOS, Windows, or Linux from the [Releases Page](https://github.com/shantur/CodeNomad/releases).
-- **Run**: Install and launch like any other app.
+Download the latest installer for your platform from [Releases](https://github.com/shantur/CodeNomad/releases).
 
-### 🦀 Tauri App (Experimental)
-We are also working on a lightweight, high-performance version built with [Tauri](https://tauri.app). It is currently in active development.
-
-- **Download**: Experimental builds are available on the [Releases Page](https://github.com/shantur/CodeNomad/releases).
-- **Source**: Check out `packages/tauri-app` if you're interested in contributing.
+| Platform | Formats |
+|----------|---------|
+| macOS | DMG, ZIP (Universal: Intel + Apple Silicon) |
+| Windows | NSIS Installer, ZIP (x64, ARM64) |
+| Linux | AppImage, deb, tar.gz (x64, ARM64) |
 
 ### 💻 CodeNomad Server
-Run CodeNomad as a local server and access it via your web browser. Perfect for remote development (SSH/VPN) or running as a service.
+
+Run as a local server and access via browser. Perfect for remote development.
 
 ```bash
 npx @neuralnomads/codenomad --launch
 ```
 
-Full server/CLI documentation (flags + env vars, TLS, auth, remote access):
-- [packages/server/README.md](packages/server/README.md)
-
-To see all available options:
-
-```bash
-npx @neuralnomads/codenomad --help
-```
+See [Server Documentation](packages/server/README.md) for flags, TLS, auth, and remote access.
 
 ### 🧪 Dev Releases
-Bleeding-edge builds are published as GitHub pre-releases and are generated automatically from the `dev` branch.
+
+Bleeding-edge builds from the `dev` branch:
 
 ```bash
 npx @neuralnomads/codenomad-dev --launch
 ```
 
-## Highlights
+---
 
-- **Multi-Instance**: Juggle several OpenCode sessions side-by-side with tabs.
-- **Long-Session Native**: Scroll through massive transcripts without hitches.
-- **Command Palette**: A single global palette to jump tabs, launch tools, and control everything.
-- **Deep Task Awareness**: Monitor background tasks and child sessions without losing flow.
+## SideCars
+
+SideCars let you open local web tools inside CodeNomad as tabs.
+
+<details>
+<summary><strong>Configuration</strong></summary>
+
+- **Name**: Display name used in CodeNomad
+- **Port**: Local HTTP or HTTPS service running on `127.0.0.1:<port>`
+- **Base path**: Mounted under `/sidecars/:id`
+- **Prefix mode**:
+  - **Preserve prefix** forwards the full `/sidecars/:id/...` path upstream
+  - **Strip prefix** removes `/sidecars/:id` before forwarding the request upstream
+
+</details>
+
+<details>
+<summary><strong>VSCode (OpenVSCode Server)</strong></summary>
+
+Run with Docker:
+
+```bash
+docker run -it --init -p 8000:3000 -v "${HOME}:${HOME}:cached" -e HOME=${HOME} gitpod/openvscode-server --server-base-path /sidecars/vscode
+```
+
+Add SideCar as:
+
+- **Name**: `VSCode`
+- **Port**: `http://127.0.0.1:8000`
+- **Base path**: `/sidecars/vscode`
+- **Prefix mode**: `Preserve prefix`
+
+</details>
+
+<details>
+<summary><strong>Terminal (ttyd)</strong></summary>
+
+Run with:
+
+```bash
+ttyd --writable zsh
+```
+
+Add SideCar as:
+
+- **Name**: `Terminal`
+- **Port**: `http://127.0.0.1:7681`
+- **Base path**: `/sidecars/terminal`
+- **Prefix mode**: `Strip prefix`
+
+</details>
+
+---
 
 ## Requirements
 
-- **[OpenCode CLI](https://opencode.ai)**: Must be installed and available in your `PATH`.
-- **Node.js 18+**: Required if running the CLI server or building from source.
+- **[OpenCode CLI](https://opencode.ai)** — must be installed and in your `PATH`
+- **Node.js 18+** — for server mode or building from source
 
-## Troubleshooting
+---
 
-### macOS says the app is damaged
-If macOS reports that "CodeNomad.app is damaged and can't be opened," Gatekeeper flagged the download because the app is not yet notarized. You can clear the quarantine flag after moving CodeNomad into `/Applications`:
+## Development
 
-```bash
-xattr -l /Applications/CodeNomad.app
-xattr -dr com.apple.quarantine /Applications/CodeNomad.app
-```
-
-After removing the quarantine attribute, launch the app normally. On Intel Macs you may also need to approve CodeNomad from **System Settings → Privacy & Security** the first time you run it.
-
-### Linux (Wayland + NVIDIA): Tauri AppImage closes immediately
-On some Wayland compositor + NVIDIA driver setups, WebKitGTK can fail to initialize its DMA-BUF/GBM path and the Tauri build may exit right away.
-
-Try running with one of these environment variables:
-
-```bash
-# Most reliable workaround (can reduce rendering performance)
-WEBKIT_DISABLE_DMABUF_RENDERER=1 codenomad
-
-# Alternative for some Wayland setups
-__NV_DISABLE_EXPLICIT_SYNC=1 codenomad
-```
-
-If you're running the Tauri AppImage and want the workaround applied every time, create a tiny wrapper script on your `PATH`:
-
-```bash
-#!/bin/bash
-export WEBKIT_DISABLE_DMABUF_RENDERER=1
-exec ~/.local/share/bauh/appimage/installed/codenomad/CodeNomad-Tauri-0.4.0-linux-x64.AppImage "$@"
-```
-
-Upstream tracking: https://github.com/tauri-apps/tauri/issues/10702
-
-## Architecture & Development
-
-CodeNomad is a monorepo split into specialized packages. If you want to contribute or build from source, check out the individual package documentation:
+CodeNomad is a monorepo built with:
 
 | Package | Description |
 |---------|-------------|
-| **[packages/electron-app](packages/electron-app/README.md)** | The native desktop application shell. Wraps the UI and Server. |
-| **[packages/server](packages/server/README.md)** | The core logic and CLI. Manages workspaces, proxies OpenCode, and serves the API. |
-| **[packages/ui](packages/ui/README.md)** | The SolidJS-based frontend. Fast, reactive, and beautiful. |
+| **[packages/server](packages/server/README.md)** | Core logic & CLI — workspaces, OpenCode proxy, API, auth, speech |
+| **[packages/ui](packages/ui/README.md)** | SolidJS frontend — reactive, fast, beautiful |
+| **[packages/electron-app](packages/electron-app/README.md)** | Desktop shell — process management, IPC, native dialogs |
+| **[packages/tauri-app](packages/tauri-app)** | Tauri desktop shell (experimental) |
 
-### Quick Build
-To build the Desktop App from source:
+### Quick Start
 
-1.  Clone the repo.
-2.  Run `npm install` (requires pnpm or npm 7+ for workspaces).
-3.  Run `npm run build --workspace @neuralnomads/codenomad-electron-app`.
+```bash
+git clone https://github.com/NeuralNomadsAI/CodeNomad.git
+cd CodeNomad
+npm install
+npm run dev
+```
 
-[![Star History Chart](https://api.star-history.com/svg?repos=NeuralNomadsAI/CodeNomad&type=Date)](https://star-history.com/#NeuralNomadsAI/CodeNomad&Date)
+---
 
+## Troubleshooting
+
+<details>
+<summary><strong>macOS: "CodeNomad.app is damaged and can't be opened"</strong></summary>
+
+Gatekeeper flag due to missing notarization. Clear the quarantine attribute:
+
+```bash
+xattr -dr com.apple.quarantine /Applications/CodeNomad.app
+```
+
+On Intel Macs, also check **System Settings → Privacy & Security** on first launch.
+</details>
+
+<details>
+<summary><strong>Linux (Wayland + NVIDIA): Tauri App closes immediately</strong></summary>
+
+WebKitGTK DMA-BUF/GBM issue. Run with:
+
+```bash
+WEBKIT_DISABLE_DMABUF_RENDERER=1 codenomad
+```
+
+See full workaround in the original README.
+</details>
+
+---
+
+## Community
+
+[![Star History](https://api.star-history.com/svg?repos=NeuralNomadsAI/CodeNomad&type=Date)](https://star-history.com/#NeuralNomadsAI/CodeNomad&Date)
+
+---
+
+**Built with ♥ by [Neural Nomads](https://github.com/NeuralNomadsAI)** · [MIT License](LICENSE)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -64,7 +64,6 @@
       "version": "7.28.5",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -3381,7 +3380,6 @@
       "version": "7.20.5",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -3483,7 +3481,6 @@
       "version": "22.19.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3558,7 +3555,6 @@
       "integrity": "sha512-MCbrb508JZHqe7bUibmZj/lyojdhLRnfkmyXnkrCM2zVrjTgL89U8UEfInpKTvPeTnxsw2hmyZxnhsdNR6yhwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cac": "^6.7.14",
         "colorette": "^2.0.20",
@@ -3641,7 +3637,6 @@
       "version": "6.12.6",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3844,6 +3839,7 @@
       "version": "5.3.2",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "archiver-utils": "^2.1.0",
         "async": "^3.2.4",
@@ -3861,6 +3857,7 @@
       "version": "2.1.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.4",
         "graceful-fs": "^4.2.0",
@@ -3881,6 +3878,7 @@
       "version": "2.3.8",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -3894,12 +3892,14 @@
     "node_modules/archiver-utils/node_modules/safe-buffer": {
       "version": "5.1.2",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/archiver-utils/node_modules/string_decoder": {
       "version": "1.1.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -4213,6 +4213,7 @@
       "version": "4.1.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -4276,7 +4277,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4767,6 +4767,7 @@
       "version": "4.1.2",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-crc32": "^0.2.13",
         "crc32-stream": "^4.0.2",
@@ -4896,6 +4897,7 @@
       "version": "1.2.2",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "crc32": "bin/crc32.njs"
       },
@@ -4907,6 +4909,7 @@
       "version": "4.0.3",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "crc-32": "^1.2.0",
         "readable-stream": "^3.4.0"
@@ -5272,7 +5275,6 @@
       "version": "24.13.3",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "app-builder-lib": "24.13.3",
         "builder-util": "24.13.1",
@@ -5439,6 +5441,7 @@
       "version": "24.13.3",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "24.13.3",
         "archiver": "^5.3.1",
@@ -5450,6 +5453,7 @@
       "version": "10.1.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -5463,6 +5467,7 @@
       "version": "6.2.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -5474,6 +5479,7 @@
       "version": "2.0.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -6191,7 +6197,8 @@
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/fs-extra": {
       "version": "8.1.0",
@@ -7408,7 +7415,8 @@
     "node_modules/isarray": {
       "version": "1.0.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/isbinaryfile": {
       "version": "5.0.6",
@@ -7458,7 +7466,6 @@
       "version": "1.21.7",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -7590,6 +7597,7 @@
       "version": "1.0.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "readable-stream": "^2.0.5"
       },
@@ -7601,6 +7609,7 @@
       "version": "2.3.8",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -7614,12 +7623,14 @@
     "node_modules/lazystream/node_modules/safe-buffer": {
       "version": "5.1.2",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lazystream/node_modules/string_decoder": {
       "version": "1.1.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -7684,22 +7695,26 @@
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.difference": {
       "version": "4.5.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.flatten": {
       "version": "4.4.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
@@ -7711,7 +7726,8 @@
     "node_modules/lodash.union": {
       "version": "4.6.0",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lowercase-keys": {
       "version": "2.0.0",
@@ -8515,7 +8531,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8663,7 +8678,8 @@
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/process-warning": {
       "version": "3.0.0",
@@ -8912,6 +8928,7 @@
       "version": "3.6.2",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -8925,6 +8942,7 @@
       "version": "1.1.3",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "minimatch": "^5.1.0"
       }
@@ -9227,7 +9245,6 @@
       "version": "4.52.5",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -9451,7 +9468,6 @@
     "node_modules/seroval": {
       "version": "1.3.2",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -9775,7 +9791,6 @@
     "node_modules/solid-js": {
       "version": "1.9.10",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.1.0",
         "seroval": "~1.3.0",
@@ -9916,6 +9931,7 @@
       "version": "1.3.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -10249,6 +10265,7 @@
       "version": "2.2.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bl": "^4.0.3",
         "end-of-stream": "^1.4.1",
@@ -10441,7 +10458,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10691,7 +10707,6 @@
       "version": "5.9.3",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11039,7 +11054,6 @@
       "version": "5.4.21",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -11524,7 +11538,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -11719,7 +11732,6 @@
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -12008,6 +12020,7 @@
       "version": "4.1.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "archiver-utils": "^3.0.4",
         "compress-commons": "^4.1.2",
@@ -12021,6 +12034,7 @@
       "version": "3.0.4",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob": "^7.2.3",
         "graceful-fs": "^4.2.0",
@@ -12040,7 +12054,6 @@
     "node_modules/zod": {
       "version": "3.25.76",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -12055,7 +12068,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -12092,7 +12105,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12134,7 +12147,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12142,7 +12155,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "build:mac-x64": "npm run build:mac-x64 --workspace @neuralnomads/codenomad-electron-app",
     "build:binaries": "npm run build:binaries --workspace @neuralnomads/codenomad-electron-app",
     "typecheck": "npm run typecheck --workspace @codenomad/ui && npm run typecheck --workspace @neuralnomads/codenomad-electron-app",
-    "bumpVersion": "npm version --workspaces --include-workspace-root --no-git-tag-version"
+    "bumpVersion": "node ./scripts/bump-version.js"
   },
   "dependencies": {
     "7zip-bin": "^5.2.0",

packages/cloudflare/release-config.json

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

packages/cloudflare/src/index.ts

@@ -4,6 +4,23 @@ export interface Env {
 
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url)
+
+    if (url.pathname === "/version.json") {
+      const response = await env.ASSETS.fetch(request)
+
+      const newHeaders = new Headers(response.headers)
+      newHeaders.set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate")
+      newHeaders.set("Pragma", "no-cache")
+      newHeaders.set("Expires", "0")
+
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: newHeaders,
+      })
+    }
+
     return env.ASSETS.fetch(request)
   },
 }

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

@@ -117,6 +117,28 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
     async (): Promise<{ granted: boolean }> => ({ granted: await requestMicrophoneAccess() }),
   )
 
+  ipcMain.handle(
+    "remote:openWindow",
+    async (
+      _event,
+      payload: { id: string; name: string; baseUrl: string; skipTlsVerify: boolean },
+    ): Promise<{ ok: boolean }> => {
+      const opener = (mainWindow as BrowserWindow & {
+        __codenomadOpenRemoteWindow?: (payload: {
+          id: string
+          name: string
+          baseUrl: string
+          skipTlsVerify: boolean
+        }) => Promise<void>
+      }).__codenomadOpenRemoteWindow
+      if (!opener) {
+        throw new Error("Remote window opening is not available")
+      }
+      await opener(payload)
+      return { ok: true }
+    },
+  )
+
   ipcMain.handle(
     "notifications:show",
     async (_event, payload: { title?: unknown; body?: unknown }): Promise<{ ok: boolean; reason?: string }> => {

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

@@ -1,7 +1,7 @@
 import { app, BrowserView, BrowserWindow, nativeImage, session, shell } from "electron"
 import http from "node:http"
 import https from "node:https"
-import { existsSync } from "fs"
+import { existsSync, mkdirSync } from "fs"
 import { dirname, join } from "path"
 import { fileURLToPath } from "url"
 import { createApplicationMenu } from "./menu"
@@ -14,6 +14,31 @@ const mainDirname = dirname(mainFilename)
 
 const isMac = process.platform === "darwin"
 
+function configureDevStoragePaths() {
+  if (app.isPackaged) {
+    return
+  }
+
+  const appName = "CodeNomad"
+
+  try {
+    app.setName(appName)
+
+    const userDataPath = join(app.getPath("appData"), appName)
+    const sessionDataPath = join(userDataPath, "session-data")
+
+    mkdirSync(userDataPath, { recursive: true })
+    mkdirSync(sessionDataPath, { recursive: true })
+
+    app.setPath("userData", userDataPath)
+    app.setPath("sessionData", sessionDataPath)
+  } catch (error) {
+    console.warn("[cli] failed to configure dev storage paths", error)
+  }
+}
+
+configureDevStoragePaths()
+
 const cliManager = new CliProcessManager()
 let mainWindow: BrowserWindow | null = null
 let currentCliUrl: string | null = null
@@ -21,6 +46,8 @@ let pendingCliUrl: string | null = null
 let pendingBootstrapToken: string | null = null
 let showingLoadingScreen = false
 let preloadingView: BrowserView | null = null
+const remoteWindowOrigins = new Map<number, Set<string>>()
+const insecureWindowOrigins = new Map<number, Set<string>>()
 
 if (isMac) {
   app.commandLine.appendSwitch("disable-spell-checking")
@@ -93,8 +120,13 @@ function loadLoadingScreen(window: BrowserWindow) {
   })
 }
 
-function getAllowedRendererOrigins(): string[] {
+function getAllowedRendererOrigins(window?: BrowserWindow | null): string[] {
   const origins = new Set<string>()
+  if (window) {
+    for (const origin of remoteWindowOrigins.get(window.id) ?? []) {
+      origins.add(origin)
+    }
+  }
   const rendererCandidates = [currentCliUrl, process.env.VITE_DEV_SERVER_URL, process.env.ELECTRON_RENDERER_URL]
   for (const candidate of rendererCandidates) {
     if (!candidate) {
@@ -109,13 +141,13 @@ function getAllowedRendererOrigins(): string[] {
   return Array.from(origins)
 }
 
-function shouldOpenExternally(url: string): boolean {
+function shouldOpenExternally(url: string, window?: BrowserWindow | null): boolean {
   try {
     const parsed = new URL(url)
     if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
       return true
     }
-    const allowedOrigins = getAllowedRendererOrigins()
+    const allowedOrigins = getAllowedRendererOrigins(window)
     return !allowedOrigins.includes(parsed.origin)
   } catch {
     return false
@@ -128,7 +160,7 @@ function setupNavigationGuards(window: BrowserWindow) {
   }
 
   window.webContents.setWindowOpenHandler(({ url }) => {
-    if (shouldOpenExternally(url)) {
+    if (shouldOpenExternally(url, window)) {
       handleExternal(url)
       return { action: "deny" }
     }
@@ -136,13 +168,54 @@ function setupNavigationGuards(window: BrowserWindow) {
   })
 
   window.webContents.on("will-navigate", (event, url) => {
-    if (shouldOpenExternally(url)) {
+    if (shouldOpenExternally(url, window)) {
       event.preventDefault()
       handleExternal(url)
     }
   })
 }
 
+function setWindowAllowedOrigin(window: BrowserWindow, url: string) {
+  try {
+    const origin = new URL(url).origin
+    remoteWindowOrigins.set(window.id, new Set([origin]))
+  } catch (error) {
+    console.warn("[cli] failed to store allowed origin", url, error)
+  }
+}
+
+function clearWindowAllowedOrigin(window: BrowserWindow) {
+  remoteWindowOrigins.delete(window.id)
+}
+
+function addWindowInsecureOrigin(window: BrowserWindow, url: string) {
+  try {
+    const origin = new URL(url).origin
+    insecureWindowOrigins.set(window.id, new Set([origin]))
+  } catch (error) {
+    console.warn("[cli] failed to store insecure origin", url, error)
+  }
+}
+
+function clearWindowInsecureOrigin(window: BrowserWindow) {
+  insecureWindowOrigins.delete(window.id)
+}
+
+function isInsecureOriginAllowed(url: string) {
+  try {
+    const targetOrigin = new URL(url).origin
+    for (const origins of insecureWindowOrigins.values()) {
+      if (origins.has(targetOrigin)) {
+        return true
+      }
+    }
+  } catch {
+    return false
+  }
+
+  return false
+}
+
 let cachedPreloadPath: string | null = null
 function getPreloadPath() {
   if (cachedPreloadPath && existsSync(cachedPreloadPath)) {
@@ -207,25 +280,30 @@ function createWindow() {
     },
   })
 
-  setupNavigationGuards(mainWindow)
+  const window = mainWindow
+
+  setupNavigationGuards(window)
 
   if (isMac) {
-    mainWindow.webContents.session.setSpellCheckerEnabled(false)
+    window.webContents.session.setSpellCheckerEnabled(false)
   }
 
   showingLoadingScreen = true
   currentCliUrl = null
-  loadLoadingScreen(mainWindow)
+  clearWindowAllowedOrigin(window)
+  loadLoadingScreen(window)
 
   if (process.env.NODE_ENV === "development") {
-    mainWindow.webContents.openDevTools({ mode: "detach" })
+    window.webContents.openDevTools({ mode: "detach" })
   }
 
-  createApplicationMenu(mainWindow)
-  setupCliIPC(mainWindow, cliManager)
+  createApplicationMenu(window)
+  setupCliIPC(window, cliManager)
 
-  mainWindow.on("closed", () => {
+  window.on("closed", () => {
     destroyPreloadingView()
+    clearWindowAllowedOrigin(window)
+    clearWindowInsecureOrigin(window)
     mainWindow = null
     currentCliUrl = null
     pendingCliUrl = null
@@ -322,13 +400,68 @@ function finalizeCliSwap(url: string) {
     return
   }
 
+  const window = mainWindow
   showingLoadingScreen = false
   currentCliUrl = url
+  setWindowAllowedOrigin(window, url)
   pendingCliUrl = null
-  mainWindow.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
+  window.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
+}
+
+function buildRemoteWindowTitle(name: string, baseUrl: string) {
+  try {
+    const parsed = new URL(baseUrl)
+    return `${name} - ${parsed.host}`
+  } catch {
+    return `${name} - ${baseUrl}`
+  }
+}
+
+function buildRemoteErrorHtml(name: string, baseUrl: string, message: string) {
+  const escapedName = name.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  const escapedUrl = baseUrl.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  const escapedMessage = message.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  return `<!doctype html><html><head><meta charset="utf-8" /><title>${escapedName}</title><style>body{margin:0;background:#111827;color:#f9fafb;font-family:Inter,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}main{max-width:560px;width:100%;background:rgba(17,24,39,.88);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;box-shadow:0 25px 60px rgba(0,0,0,.45)}h1{margin:0 0 10px;font-size:1.5rem}p{margin:0 0 10px;color:#cbd5e1;line-height:1.5}code{display:block;margin-top:16px;padding:12px 14px;border-radius:12px;background:#0f172a;color:#bfdbfe;overflow:auto}</style></head><body><main><h1>${escapedName}</h1><p>Could not connect to the remote server.</p><p>${escapedMessage}</p><code>${escapedUrl}</code></main></body></html>`
+}
+
+async function openRemoteWindow(payload: { id: string; name: string; baseUrl: string; skipTlsVerify: boolean }) {
+  const targetUrl = new URL(payload.baseUrl)
+  const title = buildRemoteWindowTitle(payload.name, payload.baseUrl)
+  const window = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 800,
+    minHeight: 600,
+    backgroundColor: "#1a1a1a",
+    icon: getIconPath(),
+    title,
+    webPreferences: {
+      preload: getPreloadPath(),
+      contextIsolation: true,
+      nodeIntegration: false,
+      spellcheck: !isMac,
+    },
+  })
+
+  setWindowAllowedOrigin(window, targetUrl.toString())
+  if (payload.skipTlsVerify) {
+    addWindowInsecureOrigin(window, targetUrl.toString())
+  }
+
+  setupNavigationGuards(window)
+  window.on("closed", () => {
+    clearWindowAllowedOrigin(window)
+    clearWindowInsecureOrigin(window)
+  })
+
+  try {
+    await window.loadURL(targetUrl.toString())
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    await window.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(buildRemoteErrorHtml(payload.name, payload.baseUrl, message))}`)
+  }
 }
 
-const SESSION_COOKIE_NAME = "codenomad_session"
 let bootstrapExchangeInFlight = false
 
 function extractCookieValue(setCookieHeader: string | string[] | undefined, name: string): string | null {
@@ -351,6 +484,7 @@ function extractCookieValue(setCookieHeader: string | string[] | undefined, name
 }
 
 async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<boolean> {
+  const sessionCookieName = cliManager.getAuthCookieName()
   const target = new URL("/api/auth/token", baseUrl)
   const body = JSON.stringify({ token })
 
@@ -381,14 +515,14 @@ async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<b
     return false
   }
 
-  const sessionId = extractCookieValue(result.setCookie, SESSION_COOKIE_NAME)
+  const sessionId = extractCookieValue(result.setCookie, sessionCookieName)
   if (!sessionId) {
     return false
   }
 
   await session.defaultSession.cookies.set({
     url: baseUrl,
-    name: SESSION_COOKIE_NAME,
+    name: sessionCookieName,
     value: sessionId,
     httpOnly: true,
     path: "/",
@@ -504,6 +638,17 @@ app.whenReady().then(() => {
   }
 
   createWindow()
+  ;(mainWindow as BrowserWindow & { __codenomadOpenRemoteWindow?: typeof openRemoteWindow }).__codenomadOpenRemoteWindow = openRemoteWindow
+
+  app.on("certificate-error", (event, _webContents, url, error, _certificate, callback) => {
+    if (isInsecureOriginAllowed(url)) {
+      event.preventDefault()
+      console.warn("[cli] allowing insecure remote certificate for", url, error)
+      callback(true)
+      return
+    }
+    callback(false)
+  })
 
   app.on("activate", () => {
     if (BrowserWindow.getAllWindows().length === 0) {

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

@@ -14,6 +14,7 @@ const mainFilename = fileURLToPath(import.meta.url)
 const mainDirname = path.dirname(mainFilename)
 
 const BOOTSTRAP_TOKEN_PREFIX = "CODENOMAD_BOOTSTRAP_TOKEN:"
+const SESSION_COOKIE_NAME_PREFIX = "codenomad_session"
 
 type CliState = "starting" | "ready" | "error" | "stopped"
 type ListeningMode = "local" | "all"
@@ -129,6 +130,7 @@ export class CliProcessManager extends EventEmitter {
   private stdoutBuffer = ""
   private stderrBuffer = ""
   private bootstrapToken: string | null = null
+  private authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
   private requestedStop = false
 
   async start(options: StartOptions): Promise<CliStatus> {
@@ -139,6 +141,7 @@ export class CliProcessManager extends EventEmitter {
     this.stdoutBuffer = ""
     this.stderrBuffer = ""
     this.bootstrapToken = null
+    this.authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
     this.requestedStop = false
     this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })
 
@@ -436,6 +439,10 @@ export class CliProcessManager extends EventEmitter {
     return { ...this.status }
   }
 
+  getAuthCookieName(): string {
+    return this.authCookieName
+  }
+
   private resolveListeningMode(): ListeningMode {
     return readListeningModeFromConfig()
   }
@@ -532,7 +539,7 @@ export class CliProcessManager extends EventEmitter {
   }
 
   private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--generate-token"]
+    const args = ["serve", "--host", host, "--generate-token", "--auth-cookie-name", this.authCookieName, "--unrestricted-root"]
 
     if (options.dev) {
       // Dev: run plain HTTP + Vite dev server proxy.

packages/electron-app/electron/main/user-shell.ts

@@ -20,24 +20,10 @@ function getDefaultShellPath(): string {
   return "/bin/bash"
 }
 
-function wrapCommandForShell(command: string, shellPath: string): string {
-  const shellName = path.basename(shellPath)
-
-  if (shellName.includes("bash")) {
-    return 'if [ -f ~/.bashrc ]; then source ~/.bashrc >/dev/null 2>&1; fi; ' + command
-  }
-
-  if (shellName.includes("zsh")) {
-    return 'if [ -f ~/.zshrc ]; then source ~/.zshrc >/dev/null 2>&1; fi; ' + command
-  }
-
-  return command
-}
-
 function buildShellArgs(shellPath: string): string[] {
   const shellName = path.basename(shellPath)
-  if (shellName.includes("zsh")) {
-    return ["-l", "-i", "-c"]
+  if (shellName.includes("zsh") || shellName.includes("bash")) {
+    return ["-i", "-l", "-c"]
   }
   return ["-l", "-c"]
 }
@@ -59,12 +45,11 @@ export function buildUserShellCommand(userCommand: string): ShellCommand {
   }
 
   const shellPath = getDefaultShellPath()
-  const script = wrapCommandForShell(userCommand, shellPath)
   const args = buildShellArgs(shellPath)
 
   return {
     command: shellPath,
-    args: [...args, script],
+    args: [...args, userCommand],
   }
 }
 

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

@@ -23,6 +23,7 @@ const electronAPI = {
   requestMicrophoneAccess: () => ipcRenderer.invoke("media:requestMicrophoneAccess"),
   setWakeLock: (enabled) => ipcRenderer.invoke("power:setWakeLock", Boolean(enabled)),
   showNotification: (payload) => ipcRenderer.invoke("notifications:show", payload),
+  openRemoteWindow: (payload) => ipcRenderer.invoke("remote:openWindow", payload),
 }
 
 contextBridge.exposeInMainWorld("electronAPI", electronAPI)

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {
@@ -62,7 +62,7 @@
     "vite-plugin-solid": "^2.10.0"
   },
   "build": {
-    "appId": "ai.opencode.client",
+    "appId": "ai.neuralnomads.codenomad.client",
     "productName": "CodeNomad",
     "directories": {
       "output": "release",
@@ -147,6 +147,13 @@
             "x64",
             "arm64"
           ]
+        },
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
         }
       ],
       "artifactName": "CodeNomad-${version}-${os}-${arch}.${ext}",

packages/electron-app/scripts/prepare-resources.js

@@ -2,7 +2,7 @@
 
 import fs from "fs"
 import path, { join } from "path"
-import { execFileSync } from "child_process"
+import { spawnSync } from "child_process"
 import { fileURLToPath } from "url"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
@@ -11,7 +11,8 @@ const workspaceRoot = join(appDir, "..", "..")
 const serverRoot = join(appDir, "..", "server")
 const resourcesRoot = join(appDir, "electron", "resources")
 const serverDest = join(resourcesRoot, "server")
-const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm"
+const npmExecPath = process.env.npm_execpath
+const npmNodeExecPath = process.env.npm_node_execpath
 
 const serverSources = ["dist", "public", "node_modules", "package.json"]
 const serverDepsMarker = join(serverRoot, "node_modules", "fastify", "package.json")
@@ -34,27 +35,34 @@ function ensureServerDependencies() {
   }
 
   log("installing production server dependencies")
-  execFileSync(
-    npmCmd,
-    [
-      "install",
-      "--omit=dev",
-      "--ignore-scripts",
-      "--workspaces=false",
-      "--package-lock=false",
-      "--install-strategy=shallow",
-      "--fund=false",
-      "--audit=false",
-    ],
-    {
-      cwd: serverRoot,
-      stdio: "inherit",
-      env: {
-        ...process.env,
-        PATH: `${join(workspaceRoot, "node_modules", ".bin")}${path.delimiter}${process.env.PATH ?? ""}`,
-      },
-    },
-  )
+  const npmArgs = [
+    "install",
+    "--omit=dev",
+    "--ignore-scripts",
+    "--workspaces=false",
+    "--package-lock=false",
+    "--install-strategy=shallow",
+    "--fund=false",
+    "--audit=false",
+  ]
+
+  const env = {
+    ...process.env,
+    PATH: `${join(workspaceRoot, "node_modules", ".bin")}${path.delimiter}${process.env.PATH ?? ""}`,
+    npm_config_workspaces: "false",
+  }
+
+  const npmCli = npmExecPath && npmNodeExecPath ? [npmNodeExecPath, [npmExecPath, ...npmArgs]] : null
+  const result = npmCli
+    ? spawnSync(npmCli[0], npmCli[1], { cwd: serverRoot, stdio: "inherit", env })
+    : spawnSync("npm", npmArgs, { cwd: serverRoot, stdio: "inherit", env, shell: process.platform === "win32" })
+
+  if (result.status !== 0) {
+    if (result.error) {
+      throw result.error
+    }
+    throw new Error(`npm install exited with code ${result.status ?? 1}`)
+  }
 }
 
 function copyServerArtifacts() {

packages/opencode-config/package.json

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

packages/opencode-config/plugin/codenomad.ts

@@ -2,6 +2,8 @@ import type { PluginInput } from "@opencode-ai/plugin"
 import { createCodeNomadClient, getCodeNomadConfig } from "./lib/client"
 import { createBackgroundProcessTools } from "./lib/background-process"
 
+let voiceModeEnabled = false
+
 export async function CodeNomadPlugin(input: PluginInput) {
   const config = getCodeNomadConfig()
   const client = createCodeNomadClient(config)
@@ -16,6 +18,11 @@ export async function CodeNomadPlugin(input: PluginInput) {
           pingTs: (event.properties as any)?.ts,
         },
       }).catch(() => {})
+      return
+    }
+
+    if (event.type === "codenomad.voiceMode") {
+      voiceModeEnabled = Boolean((event.properties as { enabled?: unknown } | undefined)?.enabled)
     }
   })
 
@@ -23,6 +30,13 @@ export async function CodeNomadPlugin(input: PluginInput) {
     tool: {
       ...backgroundProcessTools,
     },
+    async "chat.message"(_input: { sessionID: string }, output: { message: { system?: string } }) {
+      if (!voiceModeEnabled) {
+        return
+      }
+
+      output.message.system = [output.message.system, buildVoiceModePrompt()].filter(Boolean).join("\n\n")
+    },
     async event(input: { event: any }) {
       const opencodeEvent = input?.event
       if (!opencodeEvent || typeof opencodeEvent !== "object") return
@@ -30,3 +44,19 @@ export async function CodeNomadPlugin(input: PluginInput) {
     },
   }
 }
+
+function buildVoiceModePrompt(): string {
+  return [
+    "Voice conversation mode is enabled.",
+    "Prepend your reply with a fenced code block using language `spoken`.",
+    "The `spoken` block should be the natural conversational reply you would say out loud to the user. It should be a concise spoken gist of the full response in 2 to 4 natural sentences.",
+    "In the spoken block, summarize the main outcome, recommendation, or next step. Sound conversational and natural, not like a document summary.",
+    "Do not include code, bullet lists, markdown formatting, or long technical detail in the spoken block.",
+    "Do not add generic phrases about whether the user should read more.",
+    "Only mention additional written detail when there is something specific that may matter for the user's next response, such as a tradeoff, caveat, risk, open question, exact diff, or test result.",
+    "When referring to that written detail, say `below` or `in the message` rather than `detailed section`.",
+    "After the `spoken` block, continue with your normal detailed response.",
+    "Example:",
+    "```spoken\nI implemented the relay-based voice-mode flow and it works with the current plugin bridge. The reconnect caveat is explained below.\n```",
+  ].join("\n\n")
+}

packages/opencode-config/plugin/lib/background-process.ts

@@ -13,6 +13,11 @@ type BackgroundProcess = {
   outputSizeBytes?: number
 }
 
+type BackgroundProcessNotificationRequest = {
+  sessionID: string
+  directory: string
+}
+
 type BackgroundProcessOptions = {
   baseDir: string
 }
@@ -36,12 +41,19 @@ export function createBackgroundProcessTools(config: CodeNomadConfig, options: B
       args: {
         title: tool.schema.string().describe("Short label for the process (e.g. Dev server, DB server)"),
         command: tool.schema.string().describe("Shell command to run in the workspace"),
+        notify: tool.schema.boolean().optional().describe("Notify the current session when the process ends"),
       },
-      async execute(args) {
+      async execute(args, context) {
         assertCommandWithinBase(args.command, options.baseDir)
+        const notification: BackgroundProcessNotificationRequest | undefined = args.notify
+          ? {
+              sessionID: context.sessionID,
+              directory: context.directory,
+            }
+          : undefined
         const process = await request<BackgroundProcess>("", {
           method: "POST",
-          body: JSON.stringify({ title: args.title, command: args.command }),
+          body: JSON.stringify({ title: args.title, command: args.command, notify: args.notify, notification }),
         })
 
         return `Started background process ${process.id} (${process.title})\nStatus: ${process.status}\nCommand: ${process.command}`

packages/server/package-lock.json

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

packages/server/src/api-types.ts

@@ -81,6 +81,55 @@ export interface WorktreeMap {
   parentSessionWorktreeSlug: Record<string, string>
 }
 
+export type GitChangeKind = "added" | "modified" | "deleted" | "renamed" | "copied" | "untracked" | "unmerged"
+
+export interface WorktreeGitStatusEntry {
+  path: string
+  originalPath?: string | null
+  stagedStatus: GitChangeKind | null
+  stagedAdditions: number
+  stagedDeletions: number
+  unstagedStatus: GitChangeKind | null
+  unstagedAdditions: number
+  unstagedDeletions: number
+}
+
+export type WorktreeGitStatusResponse = WorktreeGitStatusEntry[]
+
+export type WorktreeGitDiffScope = "staged" | "unstaged"
+
+export interface WorktreeGitPathsRequest {
+  paths: string[]
+}
+
+export interface WorktreeGitMutationResponse {
+  ok: true
+}
+
+export interface WorktreeGitCommitRequest {
+  message: string
+}
+
+export interface WorktreeGitCommitResponse {
+  ok: true
+  commitSha?: string
+}
+
+export interface WorktreeGitDiffResponse {
+  path: string
+  originalPath?: string | null
+  scope: WorktreeGitDiffScope
+  before: string
+  after: string
+  isBinary?: boolean
+}
+
+export interface WorktreeGitDiffRequest {
+  path: string
+  originalPath?: string | null
+  scope: WorktreeGitDiffScope
+}
+
 export type LogLevel = "debug" | "info" | "warn" | "error"
 
 export interface WorkspaceLogEntry {
@@ -170,6 +219,24 @@ export interface InstanceStreamEvent {
   [key: string]: unknown
 }
 
+export type SideCarKind = "port"
+
+export type SideCarPrefixMode = "strip" | "preserve"
+
+export type SideCarStatus = "running" | "stopped"
+
+export interface SideCar {
+  id: string
+  kind: SideCarKind
+  name: string
+  port: number
+  insecure: boolean
+  prefixMode: SideCarPrefixMode
+  status: SideCarStatus
+  createdAt: string
+  updatedAt: string
+}
+
 export interface BinaryRecord {
   id: string
   path: string
@@ -240,12 +307,44 @@ export interface SpeechSynthesisResponse {
   mimeType: string
 }
 
+export interface VoiceModeStateResponse {
+  enabled: boolean
+}
+
+export interface RemoteServerProfile {
+  id: string
+  name: string
+  baseUrl: string
+  skipTlsVerify: boolean
+  createdAt: string
+  updatedAt: string
+  lastConnectedAt?: string
+}
+
+export interface RemoteServerProbeRequest {
+  baseUrl: string
+  skipTlsVerify?: boolean
+}
+
+export interface RemoteServerProbeResponse {
+  ok: boolean
+  reachable: boolean
+  normalizedUrl: string
+  skipTlsVerify: boolean
+  requiresAuth: boolean
+  authenticated: boolean
+  error?: string
+  errorCode?: string
+}
+
 export type WorkspaceEventType =
   | "workspace.created"
   | "workspace.started"
   | "workspace.error"
   | "workspace.stopped"
   | "workspace.log"
+  | "sidecar.updated"
+  | "sidecar.removed"
   | "storage.configChanged"
   | "storage.stateChanged"
   | "instance.dataChanged"
@@ -258,6 +357,8 @@ export type WorkspaceEventPayload =
   | { type: "workspace.error"; workspace: WorkspaceDescriptor }
   | { type: "workspace.stopped"; workspaceId: string }
   | { type: "workspace.log"; entry: WorkspaceLogEntry }
+  | { type: "sidecar.updated"; sidecar: SideCar }
+  | { type: "sidecar.removed"; sidecarId: string }
   | { type: "storage.configChanged"; owner: SettingsOwner; value: SettingsBucket }
   | { type: "storage.stateChanged"; owner: SettingsOwner; value: SettingsBucket }
   | { type: "instance.dataChanged"; instanceId: string; data: InstanceData }
@@ -324,6 +425,8 @@ export interface ServerMeta {
 
 export type BackgroundProcessStatus = "running" | "stopped" | "error"
 
+export type BackgroundProcessTerminalReason = "finished" | "failed" | "user_stopped" | "user_terminated"
+
 export interface BackgroundProcess {
   id: string
   workspaceId: string
@@ -336,6 +439,8 @@ export interface BackgroundProcess {
   stoppedAt?: string
   exitCode?: number
   outputSizeBytes?: number
+  terminalReason?: BackgroundProcessTerminalReason
+  notifyEnabled?: boolean
 }
 
 export interface BackgroundProcessListResponse {

packages/server/src/auth/manager.ts

@@ -16,16 +16,18 @@ export interface AuthManagerInit {
   password?: string
   generateToken: boolean
   dangerouslySkipAuth?: boolean
+  cookieName?: string
 }
 
 export class AuthManager {
   private readonly authStore: AuthStore | null
   private readonly tokenManager: TokenManager | null
   private readonly sessionManager = new SessionManager()
-  private readonly cookieName = DEFAULT_AUTH_COOKIE_NAME
+  private readonly cookieName: string
   private readonly authEnabled: boolean
 
   constructor(private readonly init: AuthManagerInit, private readonly logger: Logger) {
+    this.cookieName = sanitizeCookieName(init.cookieName)
     this.authEnabled = !Boolean(init.dangerouslySkipAuth)
 
     if (!this.authEnabled) {
@@ -102,13 +104,18 @@ export class AuthManager {
   }
 
   getSessionFromRequest(request: FastifyRequest): { username: string; sessionId: string } | null {
+    return this.getSessionFromHeaders(request.headers)
+  }
+
+  getSessionFromHeaders(headers: { cookie?: string | string[] | undefined }): { username: string; sessionId: string } | null {
     if (!this.authEnabled) {
       // When auth is disabled, treat all requests as authenticated.
       // We still return a stable username so callers can display it.
       return { username: this.init.username, sessionId: "auth-disabled" }
     }
 
-    const cookies = parseCookies(request.headers.cookie)
+    const cookieHeader = Array.isArray(headers.cookie) ? headers.cookie.join("; ") : headers.cookie
+    const cookies = parseCookies(cookieHeader)
     const sessionId = cookies[this.cookieName]
     const session = this.sessionManager.getSession(sessionId)
     if (!session) return null
@@ -139,6 +146,16 @@ export class AuthManager {
   }
 }
 
+function sanitizeCookieName(value: string | undefined): string {
+  const trimmed = value?.trim()
+  if (!trimmed) {
+    return DEFAULT_AUTH_COOKIE_NAME
+  }
+
+  const sanitized = trimmed.replace(/[^A-Za-z0-9_-]/g, "_")
+  return sanitized.length > 0 ? sanitized : DEFAULT_AUTH_COOKIE_NAME
+}
+
 function resolveAuthFilePath(configPath: string) {
   const resolvedConfigPath = resolvePath(configPath)
   return path.join(path.dirname(resolvedConfigPath), "auth.json")

packages/server/src/background-processes/manager.ts

@@ -5,7 +5,7 @@ import { randomBytes } from "crypto"
 import type { EventBus } from "../events/bus"
 import type { WorkspaceManager } from "../workspaces/manager"
 import type { Logger } from "../logger"
-import type { BackgroundProcess, BackgroundProcessStatus } from "../api-types"
+import type { BackgroundProcess, BackgroundProcessStatus, BackgroundProcessTerminalReason } from "../api-types"
 
 const ROOT_DIR = ".codenomad/background_processes"
 const INDEX_FILE = "index.json"
@@ -27,6 +27,31 @@ interface RunningProcess {
   outputPath: string
   exitPromise: Promise<void>
   workspaceId: string
+  completion?: ProcessCompletion
+}
+
+interface ProcessCompletion {
+  reason: BackgroundProcessTerminalReason
+  endContext: "normal" | "workspace_cleanup"
+  removeAfterFinalize?: boolean
+}
+
+interface BackgroundProcessNotificationState {
+  sessionID: string
+  directory: string
+  sentAt?: string
+}
+
+interface PersistedBackgroundProcess extends BackgroundProcess {
+  notify?: BackgroundProcessNotificationState
+}
+
+interface StartOptions {
+  notify?: boolean
+  notification?: {
+    sessionID: string
+    directory: string
+  }
 }
 
 export class BackgroundProcessManager {
@@ -41,14 +66,14 @@ export class BackgroundProcessManager {
     const records = await this.readIndex(workspaceId)
     const enriched = await Promise.all(
       records.map(async (record) => ({
-        ...record,
+        ...this.toPublicProcess(record),
         outputSizeBytes: await this.getOutputSize(workspaceId, record.id),
       })),
     )
     return enriched
   }
 
-  async start(workspaceId: string, title: string, command: string): Promise<BackgroundProcess> {
+  async start(workspaceId: string, title: string, command: string, options: StartOptions = {}): Promise<BackgroundProcess> {
     const workspace = this.deps.workspaceManager.get(workspaceId)
     if (!workspace) {
       throw new Error("Workspace not found")
@@ -73,8 +98,7 @@ export class BackgroundProcessManager {
       this.killProcessTree(child, "SIGTERM")
     })
 
-    const record: BackgroundProcess = {
-
+    const record: PersistedBackgroundProcess = {
       id,
       workspaceId,
       title,
@@ -84,6 +108,20 @@ export class BackgroundProcessManager {
       pid: child.pid,
       startedAt: new Date().toISOString(),
       outputSizeBytes: 0,
+      notify: options.notify && options.notification
+        ? {
+            sessionID: options.notification.sessionID,
+            directory: options.notification.directory,
+          }
+        : undefined,
+    }
+
+    const runningState: RunningProcess = {
+      id,
+      child,
+      outputPath,
+      exitPromise: Promise.resolve(),
+      workspaceId,
     }
 
     const exitPromise = new Promise<void>((resolve) => {
@@ -91,18 +129,21 @@ export class BackgroundProcessManager {
         await new Promise<void>((resolve) => outputStream.end(resolve))
         this.running.delete(id)
 
-        record.status = this.statusFromExit(code)
+        const completion = runningState.completion ?? this.completionFromExit(code)
+
+        record.terminalReason = completion.reason
+        record.status = this.statusFromReason(completion.reason)
         record.exitCode = code === null ? undefined : code
         record.stoppedAt = new Date().toISOString()
 
-        await this.upsertIndex(workspaceId, record)
-        record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
-        this.publishUpdate(workspaceId, record)
+        await this.finalizeRecord(workspaceId, record, completion)
         resolve()
       })
     })
 
-    this.running.set(id, { id, child, outputPath, exitPromise, workspaceId })
+    runningState.exitPromise = exitPromise
+
+    this.running.set(id, runningState)
 
     let lastPublishAt = 0
     const maybePublishSize = () => {
@@ -128,7 +169,7 @@ export class BackgroundProcessManager {
     await this.upsertIndex(workspaceId, record)
     record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
     this.publishUpdate(workspaceId, record)
-    return record
+    return this.toPublicProcess(record)
   }
 
   async stop(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
@@ -139,19 +180,21 @@ export class BackgroundProcessManager {
 
     const running = this.running.get(processId)
     if (running?.child && !running.child.killed) {
+      running.completion = { reason: "user_stopped", endContext: "normal" }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
+      const updated = await this.findProcess(workspaceId, processId)
+      return updated ? this.toPublicProcess(updated) : this.toPublicProcess(record)
     }
 
     if (record.status === "running") {
       record.status = "stopped"
+      record.terminalReason = "user_stopped"
       record.stoppedAt = new Date().toISOString()
-      await this.upsertIndex(workspaceId, record)
-      record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
-      this.publishUpdate(workspaceId, record)
+      await this.finalizeRecord(workspaceId, record, { reason: "user_stopped", endContext: "normal" })
     }
 
-    return record
+    return this.toPublicProcess(record)
   }
 
   async terminate(workspaceId: string, processId: string): Promise<void> {
@@ -160,17 +203,19 @@ export class BackgroundProcessManager {
 
     const running = this.running.get(processId)
     if (running?.child && !running.child.killed) {
+      running.completion = { reason: "user_terminated", endContext: "normal", removeAfterFinalize: true }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
+      return
     }
 
-    await this.removeFromIndex(workspaceId, processId)
-    await this.removeProcessDir(workspaceId, processId)
-
-    this.deps.eventBus.publish({
-      type: "instance.event",
-      instanceId: workspaceId,
-      event: { type: "background.process.removed", properties: { processId } },
+    record.status = "stopped"
+    record.terminalReason = "user_terminated"
+    record.stoppedAt = new Date().toISOString()
+    await this.finalizeRecord(workspaceId, record, {
+      reason: "user_terminated",
+      endContext: "normal",
+      removeAfterFinalize: true,
     })
   }
 
@@ -266,6 +311,11 @@ export class BackgroundProcessManager {
   private async cleanupWorkspace(workspaceId: string) {
     for (const [, running] of this.running.entries()) {
       if (running.workspaceId !== workspaceId) continue
+      running.completion = {
+        reason: "user_terminated",
+        endContext: "workspace_cleanup",
+        removeAfterFinalize: true,
+      }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
     }
@@ -356,10 +406,17 @@ export class BackgroundProcessManager {
     return args
   }
 
-  private statusFromExit(code: number | null): BackgroundProcessStatus {
-    if (code === null) return "stopped"
-    if (code === 0) return "stopped"
-    return "error"
+  private completionFromExit(code: number | null): ProcessCompletion {
+    if (code === 0) {
+      return { reason: "finished", endContext: "normal" }
+    }
+
+    return { reason: "failed", endContext: "normal" }
+  }
+
+  private statusFromReason(reason: BackgroundProcessTerminalReason): BackgroundProcessStatus {
+    if (reason === "failed") return "error"
+    return "stopped"
   }
 
   private async readOutputBytes(outputPath: string, sizeBytes: number, maxBytes?: number): Promise<string> {
@@ -423,25 +480,25 @@ export class BackgroundProcessManager {
     return path.join(workspace.path, ROOT_DIR, workspaceId, processId, OUTPUT_FILE)
   }
 
-  private async findProcess(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
+  private async findProcess(workspaceId: string, processId: string): Promise<PersistedBackgroundProcess | null> {
     const records = await this.readIndex(workspaceId)
     return records.find((entry) => entry.id === processId) ?? null
   }
 
-  private async readIndex(workspaceId: string): Promise<BackgroundProcess[]> {
+  private async readIndex(workspaceId: string): Promise<PersistedBackgroundProcess[]> {
     const indexPath = await this.getIndexPath(workspaceId)
     if (!existsSync(indexPath)) return []
 
     try {
       const raw = await fs.readFile(indexPath, "utf-8")
       const parsed = JSON.parse(raw)
-      return Array.isArray(parsed) ? (parsed as BackgroundProcess[]) : []
+      return Array.isArray(parsed) ? (parsed as PersistedBackgroundProcess[]) : []
     } catch {
       return []
     }
   }
 
-  private async upsertIndex(workspaceId: string, record: BackgroundProcess) {
+  private async upsertIndex(workspaceId: string, record: PersistedBackgroundProcess) {
     const records = await this.readIndex(workspaceId)
     const index = records.findIndex((entry) => entry.id === record.id)
     if (index >= 0) {
@@ -458,7 +515,7 @@ export class BackgroundProcessManager {
     await this.writeIndex(workspaceId, next)
   }
 
-  private async writeIndex(workspaceId: string, records: BackgroundProcess[]) {
+  private async writeIndex(workspaceId: string, records: PersistedBackgroundProcess[]) {
     const indexPath = await this.getIndexPath(workspaceId)
     await fs.mkdir(path.dirname(indexPath), { recursive: true })
     await fs.writeFile(indexPath, JSON.stringify(records, null, 2))
@@ -503,14 +560,139 @@ export class BackgroundProcessManager {
     }
   }
 
-  private publishUpdate(workspaceId: string, record: BackgroundProcess) {
+  private publishUpdate(workspaceId: string, record: PersistedBackgroundProcess) {
     this.deps.eventBus.publish({
       type: "instance.event",
       instanceId: workspaceId,
-      event: { type: "background.process.updated", properties: { process: record } },
+      event: { type: "background.process.updated", properties: { process: this.toPublicProcess(record) } },
     })
   }
 
+  private toPublicProcess(record: PersistedBackgroundProcess): BackgroundProcess {
+    return {
+      id: record.id,
+      workspaceId: record.workspaceId,
+      title: record.title,
+      command: record.command,
+      cwd: record.cwd,
+      status: record.status,
+      pid: record.pid,
+      startedAt: record.startedAt,
+      stoppedAt: record.stoppedAt,
+      exitCode: record.exitCode,
+      outputSizeBytes: record.outputSizeBytes,
+      terminalReason: record.terminalReason,
+      notifyEnabled: Boolean(record.notify),
+    }
+  }
+
+  private async finalizeRecord(workspaceId: string, record: PersistedBackgroundProcess, completion: ProcessCompletion) {
+    if (this.shouldSendCompletionPrompt(record, completion)) {
+      try {
+        await this.sendCompletionPrompt(workspaceId, record)
+        if (record.notify) {
+          record.notify.sentAt = new Date().toISOString()
+        }
+      } catch (error) {
+        this.deps.logger.warn({ err: error, workspaceId, processId: record.id }, "Failed to send background process completion prompt")
+      }
+    }
+
+    if (completion.removeAfterFinalize) {
+      await this.removeFromIndex(workspaceId, record.id)
+      await this.removeProcessDir(workspaceId, record.id)
+
+      this.deps.eventBus.publish({
+        type: "instance.event",
+        instanceId: workspaceId,
+        event: { type: "background.process.removed", properties: { processId: record.id } },
+      })
+      return
+    }
+
+    await this.upsertIndex(workspaceId, record)
+    record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
+    this.publishUpdate(workspaceId, record)
+  }
+
+  private shouldSendCompletionPrompt(record: PersistedBackgroundProcess, completion: ProcessCompletion) {
+    if (completion.endContext === "workspace_cleanup") return false
+    if (!record.notify) return false
+    return !record.notify.sentAt
+  }
+
+  private async sendCompletionPrompt(workspaceId: string, record: PersistedBackgroundProcess) {
+    const notify = record.notify
+    if (!notify || !record.terminalReason) return
+
+    if (!this.deps.workspaceManager.get(workspaceId)) {
+      throw new Error("Workspace not found")
+    }
+
+    const port = this.deps.workspaceManager.getInstancePort(workspaceId)
+    if (!port) {
+      throw new Error("Workspace instance is not ready")
+    }
+
+    const targetUrl = `http://127.0.0.1:${port}/session/${encodeURIComponent(notify.sessionID)}/prompt_async`
+    const headers: Record<string, string> = {
+      "content-type": "application/json",
+      "x-opencode-directory": /[^\x00-\x7F]/.test(notify.directory) ? encodeURIComponent(notify.directory) : notify.directory,
+    }
+
+    const authorization = this.deps.workspaceManager.getInstanceAuthorizationHeader(workspaceId)
+    if (authorization) {
+      headers.authorization = authorization
+    }
+
+    const response = await fetch(targetUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        parts: [
+          {
+            type: "text",
+            text: this.buildSyntheticCompletionPrompt(record),
+            synthetic: true,
+          },
+        ],
+      }),
+    })
+
+    if (!response.ok) {
+      const message = await response.text().catch(() => "")
+      throw new Error(message || `Prompt request failed with ${response.status}`)
+    }
+  }
+
+  private buildCompletionPrompt(record: PersistedBackgroundProcess): string {
+    const ref = `Background process "${record.title}" (${record.id})`
+
+    switch (record.terminalReason) {
+      case "finished":
+        return `${ref} finished successfully.`
+      case "failed":
+        return record.exitCode === undefined ? `${ref} failed.` : `${ref} failed with exit code ${record.exitCode}.`
+      case "user_stopped":
+        return `${ref} was stopped by user.`
+      case "user_terminated":
+        return `${ref} was terminated by user.`
+    }
+
+    return `${ref} ended.`
+  }
+
+  private buildSyntheticCompletionPrompt(record: PersistedBackgroundProcess): string {
+    return `<system-message>${this.escapeTaggedText(this.buildCompletionPrompt(record))}</system-message>`
+  }
+
+  private escapeTaggedText(input: string): string {
+    return input
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+  }
+
   private generateId(): string {
     const timestamp = new Date().toISOString().replace(/[:.]/g, "").slice(0, 15)
     const random = randomBytes(3).toString("hex")

packages/server/src/clients/connection-manager.ts

@@ -0,0 +1,128 @@
+import type { Logger } from "../logger"
+
+const STALE_CONNECTION_TIMEOUT_MS = 45000
+const STALE_SWEEP_INTERVAL_MS = 5000
+
+export interface ClientConnectionRef {
+  clientId: string
+  connectionId: string
+}
+
+export interface ClientConnectionRecord extends ClientConnectionRef {
+  key: string
+  connectedAt: number
+  lastSeenAt: number
+}
+
+type ConnectionChangeEvent = {
+  type: "connected" | "disconnected"
+  connection: ClientConnectionRecord
+  reason?: string
+}
+
+interface RegisteredConnection extends ClientConnectionRecord {
+  close: () => void
+}
+
+export class ClientConnectionManager {
+  private readonly connections = new Map<string, RegisteredConnection>()
+  private readonly subscribers = new Set<(event: ConnectionChangeEvent) => void>()
+  private readonly sweepTimer: NodeJS.Timeout
+
+  constructor(private readonly logger: Logger) {
+    this.sweepTimer = setInterval(() => this.sweepStaleConnections(), STALE_SWEEP_INTERVAL_MS)
+    this.sweepTimer.unref?.()
+  }
+
+  shutdown(): void {
+    clearInterval(this.sweepTimer)
+    for (const connection of Array.from(this.connections.values())) {
+      this.disconnect(connection.key, "shutdown", false)
+    }
+  }
+
+  subscribe(listener: (event: ConnectionChangeEvent) => void): () => void {
+    this.subscribers.add(listener)
+    return () => this.subscribers.delete(listener)
+  }
+
+  register(input: ClientConnectionRef & { close: () => void }): () => void {
+    const key = getConnectionKey(input)
+    const now = Date.now()
+    const existing = this.connections.get(key)
+
+    if (existing) {
+      this.logger.debug({ clientId: input.clientId, connectionId: input.connectionId }, "Replacing existing client connection")
+      this.disconnect(key, "replaced")
+    }
+
+    const connection: RegisteredConnection = {
+      key,
+      clientId: input.clientId,
+      connectionId: input.connectionId,
+      connectedAt: now,
+      lastSeenAt: now,
+      close: input.close,
+    }
+    this.connections.set(key, connection)
+    this.logger.debug({ clientId: input.clientId, connectionId: input.connectionId }, "Client connected")
+    this.notify({ type: "connected", connection })
+    return () => this.disconnect(key, "closed")
+  }
+
+  pong(input: ClientConnectionRef): boolean {
+    const key = getConnectionKey(input)
+    const connection = this.connections.get(key)
+    if (!connection) {
+      this.logger.debug({ clientId: input.clientId, connectionId: input.connectionId }, "Ignoring pong for unknown client connection")
+      return false
+    }
+
+    connection.lastSeenAt = Date.now()
+    return true
+  }
+
+  isConnected(input: ClientConnectionRef): boolean {
+    return this.connections.has(getConnectionKey(input))
+  }
+
+  private sweepStaleConnections(): void {
+    const cutoff = Date.now() - STALE_CONNECTION_TIMEOUT_MS
+    for (const connection of Array.from(this.connections.values())) {
+      if (connection.lastSeenAt > cutoff) continue
+      this.logger.debug({ clientId: connection.clientId, connectionId: connection.connectionId }, "Client connection timed out")
+      this.disconnect(connection.key, "timeout")
+    }
+  }
+
+  private disconnect(key: string, reason: string, invokeClose = true): void {
+    const connection = this.connections.get(key)
+    if (!connection) return
+    this.connections.delete(key)
+    this.logger.debug({ clientId: connection.clientId, connectionId: connection.connectionId, reason }, "Client disconnected")
+
+    if (invokeClose) {
+      try {
+        connection.close()
+      } catch (error) {
+        this.logger.warn({ err: error, clientId: connection.clientId, connectionId: connection.connectionId }, "Failed to close stale client connection")
+      }
+    }
+
+    this.notify({ type: "disconnected", connection, reason })
+  }
+
+  private notify(event: ConnectionChangeEvent): void {
+    for (const subscriber of this.subscribers) {
+      try {
+        subscriber(event)
+      } catch (error) {
+        this.logger.warn({ err: error, eventType: event.type }, "Client connection subscriber failed")
+      }
+    }
+  }
+}
+
+function getConnectionKey(input: ClientConnectionRef): string {
+  return `${input.clientId}:${input.connectionId}`
+}

packages/server/src/config/schema.ts

@@ -26,6 +26,7 @@ const PreferencesSchema = z
   showUsageMetrics: z.boolean().default(true),
   autoCleanupBlankSessions: z.boolean().default(true),
   listeningMode: z.enum(["local", "all"]).default("local"),
+  logLevel: z.enum(["DEBUG", "INFO", "WARN", "ERROR"]).default("DEBUG"),
 
   // OS notifications
   osNotificationsEnabled: z.boolean().default(false),

packages/server/src/events/bus.ts

@@ -24,6 +24,8 @@ export class EventBus extends EventEmitter {
     this.on("workspace.error", handler)
     this.on("workspace.stopped", handler)
     this.on("workspace.log", handler)
+    this.on("sidecar.updated", handler)
+    this.on("sidecar.removed", handler)
     this.on("storage.configChanged", handler)
     this.on("storage.stateChanged", handler)
     this.on("instance.dataChanged", handler)
@@ -35,6 +37,8 @@ export class EventBus extends EventEmitter {
       this.off("workspace.error", handler)
       this.off("workspace.stopped", handler)
       this.off("workspace.log", handler)
+      this.off("sidecar.updated", handler)
+      this.off("sidecar.removed", handler)
       this.off("storage.configChanged", handler)
       this.off("storage.stateChanged", handler)
       this.off("instance.dataChanged", handler)

packages/server/src/filesystem/browser.ts

@@ -81,6 +81,14 @@ export class FileSystemBrowser {
     return { path: relativePath, absolutePath }
   }
 
+  writeFile(relativePath: string, contents: string): void {
+    if (this.unrestricted) {
+      throw new Error("writeFile is not available in unrestricted mode")
+    }
+    const resolved = this.toRestrictedAbsolute(relativePath)
+    fs.writeFileSync(resolved, contents, "utf-8")
+  }
+
   readFile(relativePath: string): string {
     if (this.unrestricted) {
       throw new Error("readFile is not available in unrestricted mode")

packages/server/src/index.ts

@@ -19,11 +19,15 @@ import { InstanceEventBridge } from "./workspaces/instance-events"
 import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 import { resolveUi } from "./ui/remote-ui"
-import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_USERNAME } from "./auth/manager"
+import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_COOKIE_NAME, DEFAULT_AUTH_USERNAME } from "./auth/manager"
 import { resolveHttpsOptions } from "./server/tls"
-import { resolveNetworkAddresses } from "./server/network-addresses"
+import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/network-addresses"
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"
+import { SideCarManager } from "./sidecars/manager"
+import { ClientConnectionManager } from "./clients/connection-manager"
+import { PluginChannelManager } from "./plugins/channel"
+import { VoiceModeManager } from "./plugins/voice-mode"
 
 const require = createRequire(import.meta.url)
 
@@ -55,6 +59,7 @@ interface CliOptions {
   launch: boolean
   authUsername: string
   authPassword?: string
+  authCookieName: string
   generateToken: boolean
   dangerouslySkipAuth: boolean
 }
@@ -100,6 +105,11 @@ function parseCliOptions(argv: string[]): CliOptions {
         .default(DEFAULT_AUTH_USERNAME),
     )
     .addOption(new Option("--password <password>", "Password for server authentication").env("CODENOMAD_SERVER_PASSWORD"))
+    .addOption(
+      new Option("--auth-cookie-name <name>", "Cookie name for server authentication")
+        .env("CODENOMAD_AUTH_COOKIE_NAME")
+        .default(DEFAULT_AUTH_COOKIE_NAME),
+    )
     .addOption(
       new Option("--generate-token", "Emit a one-time bootstrap token for desktop")
         .env("CODENOMAD_GENERATE_TOKEN")
@@ -139,6 +149,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     launch?: boolean
     username: string
     password?: string
+    authCookieName: string
     generateToken?: boolean
     dangerouslySkipAuth?: boolean
   }>()
@@ -185,6 +196,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     launch: Boolean(parsed.launch),
     authUsername: parsed.username,
     authPassword: parsed.password,
+    authCookieName: parsed.authCookieName,
     generateToken: Boolean(parsed.generateToken),
     dangerouslySkipAuth: Boolean(parsed.dangerouslySkipAuth),
   }
@@ -266,6 +278,7 @@ async function main() {
       configPath: configLocation.configYamlPath,
       username: options.authUsername,
       password: options.authPassword,
+      cookieName: options.authCookieName,
       generateToken: options.generateToken,
       dangerouslySkipAuth: options.dangerouslySkipAuth,
     },
@@ -306,6 +319,11 @@ async function main() {
   const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
   const instanceStore = new InstanceStore(configLocation.instancesDir)
   const speechService = new SpeechService(settings, logger.child({ component: "speech" }))
+  const sidecarManager = new SideCarManager({
+    settings,
+    eventBus,
+    logger: logger.child({ component: "sidecars" }),
+  })
   const instanceEventBridge = new InstanceEventBridge({
     workspaceManager,
     eventBus,
@@ -363,6 +381,14 @@ async function main() {
 
   const remoteAccessEnabled = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
 
+  const clientConnectionManager = new ClientConnectionManager(logger.child({ component: "client-connections" }))
+  const pluginChannel = new PluginChannelManager(logger.child({ component: "plugin-channel" }))
+  const voiceModeManager = new VoiceModeManager({
+    connections: clientConnectionManager,
+    channel: pluginChannel,
+    logger: logger.child({ component: "voice-mode" }),
+  })
+
   const httpsPortExplicit = programHasArg(process.argv.slice(2), "--https-port") || Boolean(process.env.CLI_HTTPS_PORT)
   const httpPortExplicit = programHasArg(process.argv.slice(2), "--http-port") || Boolean(process.env.CLI_HTTP_PORT)
 
@@ -391,7 +417,11 @@ async function main() {
         serverMeta,
         instanceStore,
         speechService,
+        sidecarManager,
         authManager,
+        clientConnectionManager,
+        pluginChannel,
+        voiceModeManager,
         uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
         uiDevServerUrl: uiResolution.uiDevServerUrl,
         logger,
@@ -412,7 +442,11 @@ async function main() {
         serverMeta,
         instanceStore,
         speechService,
+        sidecarManager,
         authManager,
+        clientConnectionManager,
+        pluginChannel,
+        voiceModeManager,
         uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
         uiDevServerUrl: undefined,
         logger,
@@ -442,18 +476,22 @@ async function main() {
   // which can lead clients to talk to the wrong process.
   const localUrl = `${localProtocol}://127.0.0.1:${localStart.port}`
   let remoteUrl: string | undefined
+  let remoteAddresses = [] as ReturnType<typeof resolveNetworkAddresses>
   if (remoteStart) {
     const wantsAll = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
     let remoteHost = options.host
     if (wantsAll) {
       if (options.host === "0.0.0.0") {
-        const candidates = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
-        remoteHost = candidates.find((addr) => addr.scope === "external")?.ip ?? "localhost"
+        const resolved = resolveRemoteAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
+        remoteAddresses = resolved.userVisible
+        remoteUrl = resolved.primaryRemoteUrl ?? `${remoteProtocol}://localhost:${remoteStart.port}`
       }
     } else {
       remoteHost = "localhost"
     }
-    remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    if (!remoteUrl) {
+      remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    }
   }
 
   serverMeta.localUrl = localUrl
@@ -464,7 +502,9 @@ async function main() {
   serverMeta.listeningMode = options.host === "0.0.0.0" || !isLoopbackHost(options.host) ? "all" : "local"
 
   if (serverMeta.remotePort && remoteUrl) {
-    serverMeta.addresses = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
+    serverMeta.addresses = remoteAddresses.length
+      ? remoteAddresses
+      : resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
   } else {
     serverMeta.addresses = []
   }
@@ -472,6 +512,16 @@ async function main() {
   console.log(`Local Connection URL : ${serverMeta.localUrl}`)
   if (serverMeta.remoteUrl) {
     console.log(`Remote Connection URL : ${serverMeta.remoteUrl}`)
+    const additionalRemoteUrls = serverMeta.addresses
+      .map((addr) => addr.remoteUrl)
+      .filter((url) => url !== serverMeta.remoteUrl)
+
+    if (additionalRemoteUrls.length > 0) {
+      console.log("Other Accessible URLs:")
+      for (const url of additionalRemoteUrls) {
+        console.log(`  - ${url}`)
+      }
+    }
   }
 
   if (options.launch) {
@@ -495,6 +545,18 @@ async function main() {
         logger.warn({ err: error }, "Instance event bridge shutdown failed")
       }
 
+      try {
+        await sidecarManager.shutdown()
+      } catch (error) {
+        logger.error({ err: error }, "SideCar manager shutdown failed")
+      }
+
+      try {
+        clientConnectionManager.shutdown()
+      } catch (error) {
+        logger.warn({ err: error }, "Client connection manager shutdown failed")
+      }
+
       try {
         await workspaceManager.shutdown()
         logger.info("Workspace manager shutdown complete")

packages/server/src/plugins/voice-mode.ts

@@ -0,0 +1,100 @@
+import type { Logger } from "../logger"
+import type { ClientConnectionManager, ClientConnectionRef } from "../clients/connection-manager"
+import type { PluginChannelManager } from "./channel"
+
+interface VoiceModeManagerOptions {
+  connections: ClientConnectionManager
+  channel: PluginChannelManager
+  logger: Logger
+}
+
+export class VoiceModeManager {
+  private readonly enabledConnectionsByInstance = new Map<string, Set<string>>()
+  private readonly aggregateByInstance = new Map<string, boolean>()
+
+  constructor(private readonly options: VoiceModeManagerOptions) {
+    this.options.connections.subscribe((event) => {
+      if (event.type !== "disconnected") return
+      this.clearConnection(event.connection)
+    })
+  }
+
+  setEnabled(instanceId: string, connection: ClientConnectionRef, enabled: boolean): boolean {
+    if (enabled && !this.options.connections.isConnected(connection)) {
+      this.options.logger.debug(
+        { instanceId, clientId: connection.clientId, connectionId: connection.connectionId },
+        "Ignoring voice mode enable for disconnected client connection",
+      )
+      return false
+    }
+
+    const key = getConnectionKey(connection)
+    const current = this.enabledConnectionsByInstance.get(instanceId) ?? new Set<string>()
+
+    if (enabled) {
+      current.add(key)
+      this.enabledConnectionsByInstance.set(instanceId, current)
+    } else if (current.delete(key)) {
+      if (current.size === 0) {
+        this.enabledConnectionsByInstance.delete(instanceId)
+      } else {
+        this.enabledConnectionsByInstance.set(instanceId, current)
+      }
+    }
+
+    this.options.logger.debug({ instanceId, clientId: connection.clientId, connectionId: connection.connectionId, enabled }, "Voice mode updated for client connection")
+    this.publishIfChanged(instanceId)
+    return true
+  }
+
+  syncInstance(instanceId: string): void {
+    this.options.channel.send(instanceId, buildVoiceModeEvent(this.isEnabled(instanceId)))
+  }
+
+  isEnabled(instanceId: string): boolean {
+    return this.aggregateByInstance.get(instanceId) === true
+  }
+
+  private clearConnection(connection: ClientConnectionRef): void {
+    const key = getConnectionKey(connection)
+    for (const [instanceId, enabledConnections] of Array.from(this.enabledConnectionsByInstance.entries())) {
+      if (!enabledConnections.delete(key)) continue
+      if (enabledConnections.size === 0) {
+        this.enabledConnectionsByInstance.delete(instanceId)
+      }
+      this.publishIfChanged(instanceId)
+    }
+  }
+
+  private publishIfChanged(instanceId: string): void {
+    const enabled = (this.enabledConnectionsByInstance.get(instanceId)?.size ?? 0) > 0
+    const previous = this.aggregateByInstance.get(instanceId) === true
+    if (enabled === previous) return
+
+    if (enabled) {
+      this.aggregateByInstance.set(instanceId, true)
+    } else {
+      this.aggregateByInstance.delete(instanceId)
+    }
+
+    this.options.logger.debug(
+      { instanceId, enabled },
+      "Broadcasting aggregate voice mode",
+    )
+    this.options.channel.send(instanceId, buildVoiceModeEvent(enabled))
+  }
+}
+
+function buildVoiceModeEvent(enabled: boolean) {
+  return {
+    type: "codenomad.voiceMode",
+    properties: {
+      enabled,
+      formatVersion: "v1",
+    },
+  }
+}
+
+function getConnectionKey(connection: ClientConnectionRef): string {
+  return `${connection.clientId}:${connection.connectionId}`
+}

packages/server/src/server/__tests__/network-addresses.test.ts

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict"
+import os from "node:os"
+import { describe, it } from "node:test"
+
+import { resolveNetworkAddresses, resolveRemoteAddresses } from "../network-addresses"
+
+describe("resolveNetworkAddresses", () => {
+  it("preserves interface order among external addresses", () => {
+    const addresses = [
+      { address: "172.24.0.1", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "10.0.0.8", family: 4, internal: false },
+      { address: "127.0.0.1", family: "IPv4", internal: true },
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveNetworkAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.map((entry) => entry.ip),
+        ["172.24.0.1", "192.168.1.128", "10.0.0.8", "169.254.10.20", "127.0.0.1"],
+      )
+    })
+  })
+})
+
+describe("resolveRemoteAddresses", () => {
+  it("keeps all external addresses user-visible while preferring non-link-local addresses for the primary URL", () => {
+    const addresses = [
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "172.24.0.1", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.userVisible.map((entry) => entry.ip),
+        ["192.168.1.128", "172.24.0.1", "169.254.10.20"],
+      )
+      assert.equal(result.primaryRemoteUrl, "https://192.168.1.128:9898")
+    })
+  })
+
+  it("prefers private LAN addresses over public addresses", () => {
+    const addresses = [
+      { address: "203.0.113.40", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "8.8.8.8", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.userVisible.map((entry) => entry.ip),
+        ["192.168.1.128", "203.0.113.40", "8.8.8.8"],
+      )
+      assert.equal(result.primaryRemoteUrl, "https://192.168.1.128:9898")
+    })
+  })
+
+  it("uses a public address when no private LAN address is available", () => {
+    const addresses = [
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+      { address: "203.0.113.40", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(result.userVisible.map((entry) => entry.ip), ["203.0.113.40", "169.254.10.20"])
+      assert.equal(result.primaryRemoteUrl, "https://203.0.113.40:9898")
+    })
+  })
+})
+
+function usingMockedNetworkInterfaces(
+  addresses: Array<{ address: string; family: string | number; internal: boolean }>,
+  callback: () => void,
+) {
+  const original = os.networkInterfaces
+  os.networkInterfaces = (() => ({
+    ethernet0: addresses as unknown as ReturnType<typeof os.networkInterfaces>[string],
+  })) as typeof os.networkInterfaces
+
+  try {
+    callback()
+  } finally {
+    os.networkInterfaces = original
+  }
+}

packages/server/src/server/http-server.ts

@@ -3,11 +3,14 @@ import cors from "@fastify/cors"
 import fastifyStatic from "@fastify/static"
 import replyFrom from "@fastify/reply-from"
 import fs from "fs"
+import { connect as connectTcp, type Socket } from "net"
 import path from "path"
+import { connect as connectTls, type TLSSocket } from "tls"
 import { fetch } from "undici"
 import type { Logger } from "../logger"
 import { WorkspaceManager } from "../workspaces/manager"
 import { isValidWorktreeSlug, listWorktrees, resolveRepoRoot } from "../workspaces/git-worktrees"
+import { resolveWorktreeDirectory } from "../workspaces/worktree-directory"
 
 import type { SettingsService } from "../settings/service"
 import { FileSystemBrowser } from "../filesystem/browser"
@@ -22,6 +25,8 @@ import { registerPluginRoutes } from "./routes/plugin"
 import { registerBackgroundProcessRoutes } from "./routes/background-processes"
 import { registerWorktreeRoutes } from "./routes/worktrees"
 import { registerSpeechRoutes } from "./routes/speech"
+import { registerRemoteServerRoutes } from "./routes/remote-servers"
+import { registerSideCarRoutes } from "./routes/sidecars"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
 import { BackgroundProcessManager } from "../background-processes/manager"
@@ -29,6 +34,10 @@ import type { AuthManager } from "../auth/manager"
 import { registerAuthRoutes } from "./routes/auth"
 import { sendUnauthorized, wantsHtml } from "../auth/http-auth"
 import type { SpeechService } from "../speech/service"
+import { ClientConnectionManager } from "../clients/connection-manager"
+import { PluginChannelManager } from "../plugins/channel"
+import { VoiceModeManager } from "../plugins/voice-mode"
+import type { SideCarManager } from "../sidecars/manager"
 
 interface HttpServerDeps {
   bindHost: string
@@ -44,7 +53,11 @@ interface HttpServerDeps {
   serverMeta: ServerMeta
   instanceStore: InstanceStore
   speechService: SpeechService
+  sidecarManager: SideCarManager
   authManager: AuthManager
+  clientConnectionManager: ClientConnectionManager
+  pluginChannel: PluginChannelManager
+  voiceModeManager: VoiceModeManager
   uiStaticDir: string
   uiDevServerUrl?: string
   logger: Logger
@@ -193,7 +206,7 @@ export function createHttpServer(deps: HttpServerDeps) {
 
     const session = deps.authManager.getSessionFromRequest(request)
 
-    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/")
+    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/") || pathname.startsWith("/sidecars/")
     if (requiresAuthForApi && !session) {
       // Allow OpenCode plugin -> CodeNomad calls with per-instance basic auth.
       const pluginMatch = pathname.match(/^\/workspaces\/([^/]+)\/plugin(?:\/|$)/)
@@ -248,15 +261,34 @@ export function createHttpServer(deps: HttpServerDeps) {
   registerSettingsRoutes(app, { settings: deps.settings, logger: apiLogger })
   registerFilesystemRoutes(app, { fileSystemBrowser: deps.fileSystemBrowser })
   registerMetaRoutes(app, { serverMeta: deps.serverMeta })
-  registerEventRoutes(app, { eventBus: deps.eventBus, registerClient: registerSseClient, logger: sseLogger })
+  registerEventRoutes(app, {
+    eventBus: deps.eventBus,
+    registerClient: registerSseClient,
+    logger: sseLogger,
+    connectionManager: deps.clientConnectionManager,
+  })
   registerWorktreeRoutes(app, { workspaceManager: deps.workspaceManager })
   registerStorageRoutes(app, {
     instanceStore: deps.instanceStore,
     eventBus: deps.eventBus,
     workspaceManager: deps.workspaceManager,
   })
+  registerRemoteServerRoutes(app, { logger: apiLogger })
   registerSpeechRoutes(app, { speechService: deps.speechService })
-  registerPluginRoutes(app, { workspaceManager: deps.workspaceManager, eventBus: deps.eventBus, logger: proxyLogger })
+  registerSideCarRoutes(app, { sidecarManager: deps.sidecarManager })
+  registerSideCarProxyRoutes(app, { sidecarManager: deps.sidecarManager, logger: proxyLogger })
+  setupSideCarWebSocketProxy(app, {
+    sidecarManager: deps.sidecarManager,
+    authManager: deps.authManager,
+    logger: proxyLogger,
+  })
+  registerPluginRoutes(app, {
+    workspaceManager: deps.workspaceManager,
+    eventBus: deps.eventBus,
+    logger: proxyLogger,
+    channel: deps.pluginChannel,
+    voiceModeManager: deps.voiceModeManager,
+  })
   registerBackgroundProcessRoutes(app, { backgroundProcessManager })
   registerInstanceProxyRoutes(app, { workspaceManager: deps.workspaceManager, logger: proxyLogger })
 
@@ -331,6 +363,68 @@ interface InstanceProxyDeps {
   logger: Logger
 }
 
+interface SideCarProxyDeps {
+  sidecarManager: SideCarManager
+  logger: Logger
+}
+
+interface SideCarWebSocketProxyDeps extends SideCarProxyDeps {
+  authManager: AuthManager
+}
+
+function registerSideCarProxyRoutes(app: FastifyInstance, deps: SideCarProxyDeps) {
+  const proxyBaseHandler = async (
+    request: FastifyRequest<{ Params: { id: string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxySideCarRequest({
+      request,
+      reply,
+      sidecarManager: deps.sidecarManager,
+      logger: deps.logger,
+      pathSuffix: "",
+    })
+  }
+
+  const proxyWildcardHandler = async (
+    request: FastifyRequest<{ Params: { id: string; "*": string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxySideCarRequest({
+      request,
+      reply,
+      sidecarManager: deps.sidecarManager,
+      logger: deps.logger,
+      pathSuffix: request.params["*"] ?? "",
+    })
+  }
+
+  app.all("/sidecars/:id", proxyBaseHandler)
+  app.all("/sidecars/:id/*", proxyWildcardHandler)
+}
+
+function setupSideCarWebSocketProxy(app: FastifyInstance, deps: SideCarWebSocketProxyDeps) {
+  app.server.on("upgrade", (request, socket, head) => {
+    const rawUrl = request.url ?? "/"
+    const parsed = parseSideCarUpgradePath(rawUrl)
+    if (!parsed) {
+      return
+    }
+
+    void proxySideCarWebSocketUpgrade({
+      request,
+      socket: socket as Socket,
+      head,
+      sidecarId: parsed.sidecarId,
+      incomingPath: parsed.pathname,
+      search: parsed.search,
+      sidecarManager: deps.sidecarManager,
+      authManager: deps.authManager,
+      logger: deps.logger,
+    })
+  })
+}
+
 function registerInstanceProxyRoutes(app: FastifyInstance, deps: InstanceProxyDeps) {
   app.register(async (instance) => {
     instance.removeAllContentTypeParsers()
@@ -667,52 +761,6 @@ function normalizeInstanceSuffix(pathSuffix: string | undefined) {
   return trimmed.length === 0 ? "/" : `/${trimmed}`
 }
 
-type WorktreeCacheEntry = {
-  expiresAt: number
-  repoRoot: string
-  worktrees: Array<{ slug: string; directory: string }>
-}
-
-const WORKTREE_CACHE_TTL_MS = 2000
-const worktreeCache = new Map<string, WorktreeCacheEntry>()
-
-async function getCachedWorktrees(params: { workspaceId: string; workspacePath: string; logger: Logger }) {
-  const cached = worktreeCache.get(params.workspaceId)
-  const now = Date.now()
-  if (cached && cached.expiresAt > now) {
-    return cached
-  }
-
-  const { repoRoot } = await resolveRepoRoot(params.workspacePath, params.logger)
-  const worktrees = await listWorktrees({ repoRoot, workspaceFolder: params.workspacePath, logger: params.logger })
-  const entry: WorktreeCacheEntry = {
-    expiresAt: now + WORKTREE_CACHE_TTL_MS,
-    repoRoot,
-    worktrees: worktrees.map((wt) => ({ slug: wt.slug, directory: wt.directory })),
-  }
-  worktreeCache.set(params.workspaceId, entry)
-  return entry
-}
-
-async function resolveWorktreeDirectory(params: {
-  workspaceId: string
-  workspacePath: string
-  worktreeSlug: string
-  logger: Logger
-}): Promise<string | null> {
-  const { worktreeSlug } = params
-  const cached = await getCachedWorktrees({ workspaceId: params.workspaceId, workspacePath: params.workspacePath, logger: params.logger })
-  const match = cached.worktrees.find((wt) => wt.slug === worktreeSlug)
-  if (match) {
-    return match.directory
-  }
-
-  // If the slug is new (e.g., created moments ago), refresh once.
-  worktreeCache.delete(params.workspaceId)
-  const refreshed = await getCachedWorktrees({ workspaceId: params.workspaceId, workspacePath: params.workspacePath, logger: params.logger })
-  return refreshed.worktrees.find((wt) => wt.slug === worktreeSlug)?.directory ?? null
-}
-
 function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthManager) {
   if (!uiDir) {
     app.log.warn("UI static directory not provided; API endpoints only")
@@ -815,3 +863,281 @@ function buildProxyHeaders(headers: FastifyRequest["headers"]): Record<string, s
   }
   return result
 }
+
+async function proxySideCarRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  sidecarManager: SideCarManager
+  logger: Logger
+  pathSuffix?: string
+}) {
+  const sidecarId = (args.request.params as { id?: string }).id ?? ""
+  const sidecar = await args.sidecarManager.get(sidecarId)
+  if (!sidecar) {
+    args.reply.code(404).send({ error: "SideCar not found" })
+    return
+  }
+
+  const pathname = (args.request.raw.url ?? args.request.url ?? "").split("?")[0] ?? ""
+  const queryIndex = (args.request.raw.url ?? args.request.url ?? "").indexOf("?")
+  const search = queryIndex >= 0 ? (args.request.raw.url ?? args.request.url ?? "").slice(queryIndex) : ""
+  const pathSuffix = args.pathSuffix ?? ""
+  const requestPath = pathSuffix ? `${args.sidecarManager.buildProxyBasePath(sidecarId)}/${pathSuffix.replace(/^\/+/, "")}` : args.sidecarManager.buildProxyBasePath(sidecarId)
+  const targetPath = args.sidecarManager.buildTargetPath(sidecarId, requestPath, search)
+  const targetOrigin = args.sidecarManager.buildTargetOrigin(sidecar)
+  const targetUrl = `${targetOrigin}${targetPath}`
+  args.logger.debug({ sidecarId: sidecar.id, targetUrl, pathname, prefixMode: sidecar.prefixMode }, "Proxying request to SideCar")
+
+  await args.reply.from(targetUrl, {
+    rewriteRequestHeaders: (_originalRequest, headers) =>
+      sanitizeSideCarProxyRequestHeaders(headers as Record<string, string | string[] | undefined>, targetOrigin),
+    rewriteHeaders: (headers) => rewriteSideCarResponseHeaders(headers, sidecarId, targetOrigin, sidecar.prefixMode),
+    onError: (reply, { error }) => {
+      args.logger.error({ sidecarId: sidecar.id, err: error, targetUrl }, "Failed to proxy SideCar request")
+      if (!reply.sent) {
+        reply.code(502).send({ error: "SideCar proxy failed" })
+      }
+    },
+  })
+}
+
+function parseSideCarUpgradePath(rawUrl: string): { sidecarId: string; pathname: string; search: string } | null {
+  let parsed: URL
+  try {
+    parsed = new URL(rawUrl, "http://localhost")
+  } catch {
+    return null
+  }
+
+  const match = parsed.pathname.match(/^\/sidecars\/([^/]+)(?:\/.*)?$/)
+  if (!match) {
+    return null
+  }
+
+  try {
+    return {
+      sidecarId: decodeURIComponent(match[1] ?? ""),
+      pathname: parsed.pathname,
+      search: parsed.search,
+    }
+  } catch {
+    return null
+  }
+}
+
+async function proxySideCarWebSocketUpgrade(args: {
+  request: import("http").IncomingMessage
+  socket: Socket
+  head: Buffer
+  sidecarId: string
+  incomingPath: string
+  search: string
+  sidecarManager: SideCarManager
+  authManager: AuthManager
+  logger: Logger
+}) {
+  const { request, socket, head, sidecarId, incomingPath, search, sidecarManager, authManager, logger } = args
+
+  if (!isWebSocketUpgradeRequest(request)) {
+    rejectUpgrade(socket, 400, "Bad Request")
+    return
+  }
+
+  const session = authManager.getSessionFromHeaders(request.headers)
+  if (!session) {
+    rejectUpgrade(socket, 401, "Unauthorized")
+    return
+  }
+
+  const sidecar = await sidecarManager.get(sidecarId)
+  if (!sidecar) {
+    rejectUpgrade(socket, 404, "Not Found")
+    return
+  }
+
+  const targetOrigin = sidecarManager.buildTargetOrigin(sidecar)
+  const targetPath = sidecarManager.buildTargetPath(sidecarId, incomingPath, search)
+  const targetUrl = new URL(`${targetOrigin}${targetPath}`)
+  logger.debug({ sidecarId, targetUrl: targetUrl.toString(), prefixMode: sidecar.prefixMode }, "Proxying websocket to SideCar")
+
+  const { socket: upstream, readyEvent } = createSideCarUpstreamSocket(targetUrl)
+
+  const closeBoth = () => {
+    if (!socket.destroyed) {
+      socket.destroy()
+    }
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  }
+
+  upstream.once("error", (error) => {
+    logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to proxy SideCar websocket")
+    rejectUpgrade(socket, 502, "Bad Gateway")
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  })
+
+  socket.once("error", (error) => {
+    logger.debug({ sidecarId, err: error }, "SideCar websocket client socket errored")
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  })
+
+  upstream.once(readyEvent, () => {
+    try {
+      upstream.write(buildSideCarWebSocketRequest(request, targetUrl))
+      if (head.length > 0) {
+        upstream.write(head)
+      }
+      upstream.pipe(socket)
+      socket.pipe(upstream)
+    } catch (error) {
+      logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to forward SideCar websocket upgrade")
+      closeBoth()
+    }
+  })
+
+  upstream.once("close", () => {
+    if (!socket.destroyed) {
+      socket.end()
+    }
+  })
+
+  socket.once("close", () => {
+    if (!upstream.destroyed) {
+      upstream.end()
+    }
+  })
+}
+
+function createSideCarUpstreamSocket(targetUrl: URL): { socket: Socket | TLSSocket; readyEvent: "connect" | "secureConnect" } {
+  const port = Number(targetUrl.port || (targetUrl.protocol === "https:" ? 443 : 80))
+  if (targetUrl.protocol === "https:") {
+    return {
+      socket: connectTls({
+        host: targetUrl.hostname,
+        port,
+        servername: targetUrl.hostname,
+      }),
+      readyEvent: "secureConnect",
+    }
+  }
+  return {
+    socket: connectTcp(port, targetUrl.hostname),
+    readyEvent: "connect",
+  }
+}
+
+function buildSideCarWebSocketRequest(request: import("http").IncomingMessage, targetUrl: URL): string {
+  const pathWithQuery = `${targetUrl.pathname}${targetUrl.search}`
+  const requestLine = `${request.method ?? "GET"} ${pathWithQuery} HTTP/${request.httpVersion}\r\n`
+  const headerLines: string[] = []
+  const rawHeaders = request.rawHeaders ?? []
+  const blockedHeaders = getBlockedSideCarRequestHeaders()
+
+  for (let index = 0; index < rawHeaders.length; index += 2) {
+    const key = rawHeaders[index]
+    const value = rawHeaders[index + 1]
+    if (!key || value === undefined) continue
+    const lower = key.toLowerCase()
+    if (blockedHeaders.has(lower)) continue
+    if (lower === "origin") {
+      headerLines.push(`Origin: ${targetUrl.origin}\r\n`)
+      continue
+    }
+    headerLines.push(`${key}: ${value}\r\n`)
+  }
+
+  const hostValue = targetUrl.port ? `${targetUrl.hostname}:${targetUrl.port}` : targetUrl.hostname
+  headerLines.push(`Host: ${hostValue}\r\n`)
+  headerLines.push("\r\n")
+
+  return requestLine + headerLines.join("")
+}
+
+function isWebSocketUpgradeRequest(request: import("http").IncomingMessage): boolean {
+  const upgrade = request.headers.upgrade
+  if (typeof upgrade !== "string" || upgrade.toLowerCase() !== "websocket") {
+    return false
+  }
+  const connection = request.headers.connection
+  const connectionValue = Array.isArray(connection) ? connection.join(",") : connection ?? ""
+  return connectionValue.toLowerCase().split(",").map((part) => part.trim()).includes("upgrade")
+}
+
+function rejectUpgrade(socket: Socket, statusCode: number, statusText: string) {
+  if (socket.destroyed) {
+    return
+  }
+  socket.write(`HTTP/1.1 ${statusCode} ${statusText}\r\nConnection: close\r\nContent-Length: 0\r\n\r\n`)
+  socket.destroy()
+}
+
+function rewriteSideCarResponseHeaders(
+  headers: Record<string, string | string[] | undefined>,
+  sidecarId: string,
+  targetOrigin: string,
+  prefixMode: "strip" | "preserve",
+) {
+  if (prefixMode === "preserve") {
+    return headers
+  }
+
+  const next = { ...headers }
+  const locationHeader = next.location
+  const location = Array.isArray(locationHeader) ? locationHeader[0] : locationHeader
+  if (!location) {
+    return next
+  }
+
+  const publicBase = `/sidecars/${encodeURIComponent(sidecarId)}`
+
+  if (location.startsWith("/")) {
+    next.location = `${publicBase}${location}`
+    return next
+  }
+
+  try {
+    const parsed = new URL(location)
+    if (parsed.origin === targetOrigin) {
+      next.location = `${publicBase}${parsed.pathname}${parsed.search}${parsed.hash}`
+    }
+  } catch {
+    // Relative redirects should continue to resolve against the public sidecar path.
+  }
+
+  return next
+}
+
+function sanitizeSideCarProxyRequestHeaders(
+  headers: Record<string, string | string[] | undefined>,
+  targetOrigin: string,
+): Record<string, string | string[] | undefined> {
+  const blockedHeaders = getBlockedSideCarRequestHeaders()
+  const next: Record<string, string | string[] | undefined> = {}
+
+  for (const [key, value] of Object.entries(headers)) {
+    if (!value) continue
+    if (blockedHeaders.has(key.toLowerCase())) continue
+    next[key] = value
+  }
+
+  next.origin = targetOrigin
+  return next
+}
+
+function getBlockedSideCarRequestHeaders(): Set<string> {
+  return new Set([
+    "host",
+    "authorization",
+    "proxy-authorization",
+    "forwarded",
+    "x-forwarded-for",
+    "x-forwarded-host",
+    "x-forwarded-port",
+    "x-forwarded-proto",
+  ])
+}

packages/server/src/server/network-addresses.ts

@@ -1,6 +1,12 @@
 import os from "os"
 import type { NetworkAddress } from "../api-types"
 
+export interface ResolvedRemoteAddresses {
+  all: NetworkAddress[]
+  userVisible: NetworkAddress[]
+  primaryRemoteUrl?: string
+}
+
 export function resolveNetworkAddresses(args: {
   host: string
   protocol: "http" | "https"
@@ -58,10 +64,57 @@ export function resolveNetworkAddresses(args: {
   return results.sort((a, b) => {
     const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
     if (scopeDelta !== 0) return scopeDelta
-    return a.ip.localeCompare(b.ip)
+
+    return 0
   })
 }
 
+export function resolveRemoteAddresses(args: {
+  host: string
+  protocol: "http" | "https"
+  port: number
+}): ResolvedRemoteAddresses {
+  const all = resolveNetworkAddresses(args)
+  const userVisible = sortUserVisibleAddresses(all.filter((address) => address.scope === "external"))
+  return {
+    all,
+    userVisible,
+    primaryRemoteUrl: userVisible[0]?.remoteUrl,
+  }
+}
+
+function sortUserVisibleAddresses(addresses: NetworkAddress[]): NetworkAddress[] {
+  return [...addresses].sort((left, right) => getUserVisiblePriority(left.ip) - getUserVisiblePriority(right.ip))
+}
+
+function getUserVisiblePriority(ip: string): number {
+  if (isPrivateIPv4(ip)) return 0
+  if (isLinkLocalIPv4(ip)) return 2
+  return 1
+}
+
+function isLinkLocalIPv4(ip: string): boolean {
+  const octets = parseIPv4(ip)
+  if (!octets) return false
+  const [first, second] = octets
+  return first === 169 && second === 254
+}
+
+function isPrivateIPv4(ip: string): boolean {
+  const octets = parseIPv4(ip)
+  if (!octets) return false
+  const [first, second] = octets
+
+  if (first === 10) return true
+  if (first === 192 && second === 168) return true
+  return first === 172 && second >= 16 && second <= 31
+}
+
+function parseIPv4(value: string): number[] | null {
+  if (!isIPv4Address(value)) return null
+  return value.split(".").map((part) => Number(part))
+}
+
 function isIPv4Address(value: string | undefined): value is string {
   if (!value) return false
   const parts = value.split(".")

packages/server/src/server/routes/background-processes.ts

@@ -9,6 +9,21 @@ interface RouteDeps {
 const StartSchema = z.object({
   title: z.string().trim().min(1),
   command: z.string().trim().min(1),
+  notify: z.boolean().optional(),
+  notification: z
+    .object({
+      sessionID: z.string().trim().min(1),
+      directory: z.string().trim().min(1),
+    })
+    .optional(),
+}).superRefine((value, ctx) => {
+  if (value.notify && !value.notification) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Notification metadata is required when notify is enabled",
+      path: ["notification"],
+    })
+  }
 })
 
 const OutputQuerySchema = z.object({
@@ -27,7 +42,10 @@ export function registerBackgroundProcessRoutes(app: FastifyInstance, deps: Rout
 
   app.post<{ Params: { id: string } }>("/workspaces/:id/plugin/background-processes", async (request, reply) => {
     const payload = StartSchema.parse(request.body ?? {})
-    const process = await deps.backgroundProcessManager.start(request.params.id, payload.title, payload.command)
+    const process = await deps.backgroundProcessManager.start(request.params.id, payload.title, payload.command, {
+      notify: payload.notify,
+      notification: payload.notification,
+    })
     reply.code(201)
     return process
   })

packages/server/src/server/routes/events.ts

@@ -1,19 +1,32 @@
 import { FastifyInstance } from "fastify"
+import { z } from "zod"
 import { EventBus } from "../../events/bus"
 import { WorkspaceEventPayload } from "../../api-types"
+import type { ClientConnectionManager } from "../../clients/connection-manager"
 import { Logger } from "../../logger"
 
 interface RouteDeps {
   eventBus: EventBus
   registerClient: (cleanup: () => void) => () => void
   logger: Logger
+  connectionManager: ClientConnectionManager
 }
 
 let nextClientId = 0
 
+const ConnectionQuerySchema = z.object({
+  clientId: z.string().trim().min(1),
+  connectionId: z.string().trim().min(1),
+})
+
+const PongBodySchema = ConnectionQuerySchema.extend({
+  pingTs: z.number().optional(),
+})
+
 export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get("/api/events", (request, reply) => {
     const clientId = ++nextClientId
+    const connection = ConnectionQuerySchema.parse(request.query ?? {})
     deps.logger.debug({ clientId }, "SSE client connected")
 
     const origin = request.headers.origin ?? "*"
@@ -35,7 +48,8 @@ export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
 
     const unsubscribe = deps.eventBus.onEvent(send)
     const heartbeat = setInterval(() => {
-      reply.raw.write(`:hb ${Date.now()}\n\n`)
+      const ping = { ts: Date.now() }
+      reply.raw.write(`event: codenomad.client.ping\ndata: ${JSON.stringify(ping)}\n\n`)
     }, 15000)
 
     let closed = false
@@ -49,13 +63,27 @@ export function registerEventRoutes(app: FastifyInstance, deps: RouteDeps) {
     }
 
     const unregister = deps.registerClient(close)
+    const unregisterConnection = deps.connectionManager.register({
+      ...connection,
+      close,
+    })
 
     const handleClose = () => {
       close()
       unregister()
+      unregisterConnection()
     }
 
     request.raw.on("close", handleClose)
     request.raw.on("error", handleClose)
   })
+
+  app.post("/api/client-connections/pong", (request, reply) => {
+    const body = PongBodySchema.parse(request.body ?? {})
+    if (!deps.connectionManager.pong(body)) {
+      reply.code(404).send({ error: "Client connection not found" })
+      return
+    }
+    reply.code(204).send()
+  })
 }

packages/server/src/server/routes/meta.ts

@@ -1,6 +1,6 @@
 import { FastifyInstance } from "fastify"
 import { ServerMeta } from "../../api-types"
-import { resolveNetworkAddresses } from "../network-addresses"
+ 
 
 interface RouteDeps {
   serverMeta: ServerMeta
@@ -13,14 +13,12 @@ export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
 function buildMetaResponse(meta: ServerMeta): ServerMeta {
   const localPort = resolveLocalPort(meta)
   const remote = resolveRemote(meta)
-  const addresses = remote && remote.port > 0 ? resolveNetworkAddresses({ host: meta.host, protocol: remote.protocol, port: remote.port }) : []
 
   return {
     ...meta,
     localPort,
     remotePort: remote?.port,
     listeningMode: meta.host === "0.0.0.0" || !isLoopbackHost(meta.host) ? "all" : "local",
-    addresses,
   }
 }
 

packages/server/src/server/routes/plugin.ts

@@ -1,15 +1,19 @@
 import { FastifyInstance } from "fastify"
 import { z } from "zod"
+import type { VoiceModeStateResponse } from "../../api-types"
 import type { WorkspaceManager } from "../../workspaces/manager"
 import type { EventBus } from "../../events/bus"
 import type { Logger } from "../../logger"
 import { PluginChannelManager } from "../../plugins/channel"
 import { buildPingEvent, handlePluginEvent } from "../../plugins/handlers"
+import { VoiceModeManager } from "../../plugins/voice-mode"
 
 interface RouteDeps {
   workspaceManager: WorkspaceManager
   eventBus: EventBus
   logger: Logger
+  channel: PluginChannelManager
+  voiceModeManager: VoiceModeManager
 }
 
 const PluginEventSchema = z.object({
@@ -17,9 +21,13 @@ const PluginEventSchema = z.object({
   properties: z.record(z.unknown()).optional(),
 })
 
-export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
-  const channel = new PluginChannelManager(deps.logger.child({ component: "plugin-channel" }))
+const VoiceModeStateSchema = z.object({
+  enabled: z.boolean(),
+  clientId: z.string().trim().min(1),
+  connectionId: z.string().trim().min(1),
+})
 
+export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get<{ Params: { id: string } }>("/workspaces/:id/plugin/events", (request, reply) => {
     const workspace = deps.workspaceManager.get(request.params.id)
     if (!workspace) {
@@ -33,10 +41,11 @@ export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
     reply.raw.flushHeaders?.()
     reply.hijack()
 
-    const registration = channel.register(request.params.id, reply)
+    const registration = deps.channel.register(request.params.id, reply)
+    deps.voiceModeManager.syncInstance(request.params.id)
 
     const heartbeat = setInterval(() => {
-      channel.send(request.params.id, buildPingEvent())
+      deps.channel.send(request.params.id, buildPingEvent())
     }, 15000)
 
     const close = () => {
@@ -49,6 +58,28 @@ export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
     request.raw.on("error", close)
   })
 
+  app.post<{ Params: { id: string }; Body: VoiceModeStateResponse }>("/workspaces/:id/plugin/voice-mode", (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404).send({ error: "Workspace not found" })
+      return
+    }
+
+    const payload = VoiceModeStateSchema.parse(request.body ?? {})
+    const applied = deps.voiceModeManager.setEnabled(
+      request.params.id,
+      { clientId: payload.clientId, connectionId: payload.connectionId },
+      payload.enabled,
+    )
+
+    if (payload.enabled && !applied) {
+      reply.code(409).send({ error: "Client connection not active for voice mode enable" })
+      return
+    }
+
+    return { enabled: payload.enabled }
+  })
+
   const handleWildcard = async (request: any, reply: any) => {
     const workspaceId = request.params.id as string
     const workspace = deps.workspaceManager.get(workspaceId)

packages/server/src/server/routes/remote-servers.ts

@@ -0,0 +1,166 @@
+import { Agent, fetch } from "undici"
+import type { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { Logger } from "../../logger"
+import type { RemoteServerProbeResponse } from "../../api-types"
+
+interface RouteDeps {
+  logger: Logger
+}
+
+const ProbeSchema = z.object({
+  baseUrl: z.string().min(1),
+  skipTlsVerify: z.boolean().optional(),
+})
+
+const PROBE_TIMEOUT_MS = 8_000
+
+export function registerRemoteServerRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.post("/api/remote-servers/probe", async (request, reply) => {
+    try {
+      const body = ProbeSchema.parse(request.body ?? {})
+      return await probeRemoteServer(body.baseUrl, Boolean(body.skipTlsVerify))
+    } catch (error) {
+      deps.logger.warn({ err: error }, "Failed to probe remote server")
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Invalid request" }
+    }
+  })
+}
+
+async function probeRemoteServer(baseUrl: string, skipTlsVerify: boolean): Promise<RemoteServerProbeResponse> {
+  const normalizedUrl = normalizeBaseUrl(baseUrl)
+  const probeUrl = new URL("./api/auth/status", `${normalizedUrl}/`)
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), PROBE_TIMEOUT_MS)
+  const dispatcher = skipTlsVerify ? new Agent({ connect: { rejectUnauthorized: false } }) : undefined
+
+  try {
+    const response = await fetch(probeUrl, {
+      method: "GET",
+      dispatcher,
+      signal: controller.signal,
+      headers: {
+        Accept: "application/json",
+      },
+    })
+
+    if (!response.ok) {
+      return {
+        ok: false,
+        reachable: true,
+        normalizedUrl,
+        skipTlsVerify,
+        requiresAuth: false,
+        authenticated: false,
+        error: `Remote server returned HTTP ${response.status}`,
+        errorCode: "http_error",
+      }
+    }
+
+    const payload = (await response.json()) as { authenticated?: unknown }
+    if (typeof payload?.authenticated !== "boolean") {
+      return {
+        ok: false,
+        reachable: true,
+        normalizedUrl,
+        skipTlsVerify,
+        requiresAuth: false,
+        authenticated: false,
+        error: "Remote server did not return a valid CodeNomad auth response",
+        errorCode: "invalid_server",
+      }
+    }
+
+    return {
+      ok: true,
+      reachable: true,
+      normalizedUrl,
+      skipTlsVerify,
+      requiresAuth: !payload.authenticated,
+      authenticated: payload.authenticated,
+    }
+  } catch (error) {
+    const message = describeProbeError(error)
+    return {
+      ok: false,
+      reachable: false,
+      normalizedUrl,
+      skipTlsVerify,
+      requiresAuth: false,
+      authenticated: false,
+      error: message.message,
+      errorCode: message.code,
+    }
+  } finally {
+    clearTimeout(timeout)
+    await dispatcher?.close().catch(() => {})
+  }
+}
+
+function normalizeBaseUrl(input: string): string {
+  const parsed = new URL(input.trim())
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error("Server URL must use http:// or https://")
+  }
+
+  parsed.hash = ""
+  parsed.search = ""
+  parsed.pathname = parsed.pathname === "/" ? "/" : parsed.pathname.replace(/\/+$/, "") || "/"
+  const value = parsed.toString()
+  return parsed.pathname === "/" ? value.replace(/\/$/, "") : value.replace(/\/$/, "")
+}
+
+function describeProbeError(error: unknown): { code: string; message: string } {
+  const chain = unwrapErrorChain(error)
+  const detailed =
+    chain.find((entry) => {
+      const code = (entry?.code ?? "").toString()
+      return Boolean(code) && code !== "UND_ERR_RESPONSE_STATUS_CODE"
+    }) ?? chain[0]
+
+  const code = (detailed?.code ?? "").toString()
+  const exactMessage = detailed?.message?.trim() || chain.find((entry) => entry.message?.trim())?.message?.trim()
+
+  if (code === "DEPTH_ZERO_SELF_SIGNED_CERT" || code === "SELF_SIGNED_CERT_IN_CHAIN" || code === "CERT_HAS_EXPIRED") {
+    return {
+      code: "tls_error",
+      message: "Certificate check failed while connecting to the remote server.",
+    }
+  }
+
+  return {
+    code:
+      code === "ERR_INVALID_URL"
+        ? "invalid_url"
+        : code === "ECONNREFUSED"
+          ? "connection_refused"
+          : code === "ENOTFOUND"
+            ? "dns_error"
+            : code === "UND_ERR_CONNECT_TIMEOUT" || code === "ABORT_ERR"
+              ? "timeout"
+              : code
+                ? code.toLowerCase()
+                : "probe_failed",
+    message: exactMessage || "Failed to connect to the remote server.",
+  }
+}
+
+function unwrapErrorChain(error: unknown): Array<{ code?: unknown; message?: string }> {
+  const results: Array<{ code?: unknown; message?: string }> = []
+  let current: unknown = error
+  const seen = new Set<unknown>()
+
+  while (current && typeof current === "object" && !seen.has(current)) {
+    seen.add(current)
+    const entry = current as { code?: unknown; message?: string; cause?: unknown }
+    results.push({ code: entry.code, message: entry.message })
+    current = entry.cause
+  }
+
+  if (results.length === 0 && error instanceof Error) {
+    results.push({ message: error.message })
+  }
+
+  return results
+}

packages/server/src/server/routes/sidecars.ts

@@ -0,0 +1,56 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { SideCarManager } from "../../sidecars/manager"
+
+interface RouteDeps {
+  sidecarManager: SideCarManager
+}
+
+const SideCarCreateSchema = z.object({
+  kind: z.literal("port").default("port"),
+  name: z.string().trim().min(1),
+  port: z.number().int().min(1).max(65535),
+  insecure: z.boolean().default(false),
+  prefixMode: z.enum(["strip", "preserve"]).default("strip"),
+})
+
+const SideCarUpdateSchema = SideCarCreateSchema.omit({ kind: true }).partial().refine((value) => Object.keys(value).length > 0, {
+  message: "At least one field is required",
+})
+
+export function registerSideCarRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/sidecars", async () => {
+    return { sidecars: await deps.sidecarManager.list() }
+  })
+
+  app.post("/api/sidecars", async (request, reply) => {
+    try {
+      const body = SideCarCreateSchema.parse(request.body ?? {})
+      const sidecar = await deps.sidecarManager.create(body)
+      reply.code(201)
+      return sidecar
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to create SideCar" }
+    }
+  })
+
+  app.put<{ Params: { id: string } }>("/api/sidecars/:id", async (request, reply) => {
+    try {
+      const body = SideCarUpdateSchema.parse(request.body ?? {})
+      return await deps.sidecarManager.update(request.params.id, body)
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to update SideCar" }
+    }
+  })
+
+  app.delete<{ Params: { id: string } }>("/api/sidecars/:id", async (request, reply) => {
+    const removed = await deps.sidecarManager.delete(request.params.id)
+    if (!removed) {
+      reply.code(404)
+      return { error: "SideCar not found" }
+    }
+    reply.code(204)
+  })
+}

packages/server/src/server/routes/workspaces.ts

@@ -1,6 +1,10 @@
 import { FastifyInstance, FastifyReply } from "fastify"
 import { z } from "zod"
 import { WorkspaceManager } from "../../workspaces/manager"
+import { getWorktreeGitDiff, getWorktreeGitStatus } from "../../workspaces/git-status"
+import { commitWorktreeChanges, isGitMutationError, stageWorktreePaths, unstageWorktreePaths } from "../../workspaces/git-mutations"
+import { isGitAvailable, resolveRepoRoot } from "../../workspaces/git-worktrees"
+import { resolveWorktreeDirectory } from "../../workspaces/worktree-directory"
 
 interface RouteDeps {
   workspaceManager: WorkspaceManager
@@ -19,6 +23,24 @@ const WorkspaceFileContentQuerySchema = z.object({
   path: z.string(),
 })
 
+const WorkspaceFileContentBodySchema = z.object({
+  contents: z.string(),
+})
+
+const WorktreeGitDiffQuerySchema = z.object({
+  path: z.string().trim().min(1, "Path is required"),
+  originalPath: z.string().trim().optional(),
+  scope: z.enum(["staged", "unstaged"]),
+})
+
+const WorktreeGitPathsBodySchema = z.object({
+  paths: z.array(z.string().trim().min(1, "Path is required")).min(1, "At least one path is required"),
+})
+
+const WorktreeGitCommitBodySchema = z.object({
+  message: z.string().trim().min(1, "Commit message is required"),
+})
+
 const WorkspaceFileSearchQuerySchema = z.object({
   q: z.string().trim().min(1, "Query is required"),
   limit: z.coerce.number().int().positive().max(200).optional(),
@@ -100,10 +122,152 @@ export function registerWorkspaceRoutes(app: FastifyInstance, deps: RouteDeps) {
       return handleWorkspaceError(error, reply)
     }
   })
+
+  app.put<{
+    Params: { id: string }
+    Querystring: { path?: string }
+  }>("/api/workspaces/:id/files/content", async (request, reply) => {
+    try {
+      const query = WorkspaceFileContentQuerySchema.parse(request.query ?? {})
+      const body = WorkspaceFileContentBodySchema.parse(request.body ?? {})
+      deps.workspaceManager.writeFile(request.params.id, query.path, body.contents)
+      reply.code(204)
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.get<{
+    Params: { id: string; slug: string }
+  }>("/api/workspaces/:id/worktrees/:slug/git-status", async (request, reply) => {
+    try {
+      const directory = await resolveGitWorktreeDirectory(deps.workspaceManager, request.params.id, request.params.slug, request.log, reply)
+      if (!directory) return
+
+      return await getWorktreeGitStatus({ workspaceFolder: directory, logger: request.log })
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.get<{
+    Params: { id: string; slug: string }
+    Querystring: { path: string; originalPath?: string; scope: "staged" | "unstaged" }
+  }>("/api/workspaces/:id/worktrees/:slug/git-diff", async (request, reply) => {
+    try {
+      const query = WorktreeGitDiffQuerySchema.parse(request.query ?? {})
+      const directory = await resolveGitWorktreeDirectory(deps.workspaceManager, request.params.id, request.params.slug, request.log, reply)
+      if (!directory) return
+
+      return await getWorktreeGitDiff({
+        workspaceFolder: directory,
+        path: query.path,
+        originalPath: query.originalPath,
+        scope: query.scope,
+      })
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.post<{
+    Params: { id: string; slug: string }
+    Body: { paths: string[] }
+  }>("/api/workspaces/:id/worktrees/:slug/git-stage", async (request, reply) => {
+    try {
+      const body = WorktreeGitPathsBodySchema.parse(request.body ?? {})
+      const directory = await resolveGitWorktreeDirectory(deps.workspaceManager, request.params.id, request.params.slug, request.log, reply)
+      if (!directory) return
+
+      await stageWorktreePaths({ workspaceFolder: directory, paths: body.paths })
+      return { ok: true as const }
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.post<{
+    Params: { id: string; slug: string }
+    Body: { paths: string[] }
+  }>("/api/workspaces/:id/worktrees/:slug/git-unstage", async (request, reply) => {
+    try {
+      const body = WorktreeGitPathsBodySchema.parse(request.body ?? {})
+      const directory = await resolveGitWorktreeDirectory(deps.workspaceManager, request.params.id, request.params.slug, request.log, reply)
+      if (!directory) return
+
+      await unstageWorktreePaths({ workspaceFolder: directory, paths: body.paths })
+      return { ok: true as const }
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+
+  app.post<{
+    Params: { id: string; slug: string }
+    Body: { message: string }
+  }>("/api/workspaces/:id/worktrees/:slug/git-commit", async (request, reply) => {
+    try {
+      const body = WorktreeGitCommitBodySchema.parse(request.body ?? {})
+      const directory = await resolveGitWorktreeDirectory(deps.workspaceManager, request.params.id, request.params.slug, request.log, reply)
+      if (!directory) return
+
+      const result = await commitWorktreeChanges({ workspaceFolder: directory, message: body.message })
+      return { ok: true as const, ...result }
+    } catch (error) {
+      return handleWorkspaceError(error, reply)
+    }
+  })
+}
+
+async function resolveGitWorktreeDirectory(
+  workspaceManager: WorkspaceManager,
+  workspaceId: string,
+  worktreeSlug: string,
+  logger: { debug?: (obj: any, msg?: string) => void; warn?: (obj: any, msg?: string) => void },
+  reply: FastifyReply,
+): Promise<string | null> {
+  const workspace = workspaceManager.get(workspaceId)
+  if (!workspace) {
+    reply.code(404)
+    reply.send({ error: "Workspace not found" })
+    return null
+  }
+
+  const gitAvailable = await isGitAvailable(workspace.path)
+  if (!gitAvailable) {
+    reply.code(503)
+    reply.send({ error: "Git is not installed or not available in PATH" })
+    return null
+  }
+
+  const { isGitRepo } = await resolveRepoRoot(workspace.path, logger)
+  if (!isGitRepo) {
+    reply.code(400)
+    reply.send({ error: "Workspace is not a Git repository" })
+    return null
+  }
+
+  const directory = await resolveWorktreeDirectory({
+    workspaceId: workspace.id,
+    workspacePath: workspace.path,
+    worktreeSlug,
+    logger,
+  })
+  if (!directory) {
+    reply.code(404)
+    reply.send({ error: "Worktree not found" })
+    return null
+  }
+
+  return directory
 }
 
 
 function handleWorkspaceError(error: unknown, reply: FastifyReply) {
+  if (isGitMutationError(error)) {
+    reply.code(error.statusCode)
+    return { error: error.message }
+  }
   if (error instanceof Error && error.message === "Workspace not found") {
     reply.code(404)
     return { error: "Workspace not found" }

packages/server/src/settings/migrate.ts

@@ -107,6 +107,10 @@ function mapLegacyToOwnerDocs(legacyConfig: unknown, legacyState: unknown): { co
     if (typeof listeningMode === "string") {
       serverConfig.listeningMode = listeningMode
     }
+    const logLevel = preferences.logLevel
+    if (typeof logLevel === "string") {
+      serverConfig.logLevel = logLevel
+    }
     const lastUsedBinary = preferences.lastUsedBinary
     if (typeof lastUsedBinary === "string") {
       serverConfig.opencodeBinary = lastUsedBinary
@@ -135,6 +139,7 @@ function mapLegacyToOwnerDocs(legacyConfig: unknown, legacyState: unknown): { co
     const moved = new Set([
       "environmentVariables",
       "listeningMode",
+      "logLevel",
       "lastUsedBinary",
       "modelRecents",
       "modelFavorites",

packages/server/src/settings/service.ts

@@ -1,6 +1,7 @@
 import type { Logger } from "../logger"
 import type { EventBus } from "../events/bus"
 import type { ConfigLocation } from "../config/location"
+import { z } from "zod"
 import { YamlDocStore, type SettingsDoc } from "./yaml-doc-store"
 import { migrateSettingsLayout } from "./migrate"
 import type { WorkspaceEventPayload } from "../api-types"
@@ -8,6 +9,54 @@ import { sanitizeConfigOwner } from "./public-config"
 
 export type DocKind = "config" | "state"
 
+const CanonicalLogLevelSchema = z.preprocess(
+  (value) => (typeof value === "string" ? value.trim().toUpperCase() : value),
+  z.enum(["DEBUG", "INFO", "WARN", "ERROR"]),
+)
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+function isDeepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  try {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } catch {
+    return false
+  }
+}
+
+function normalizeServerConfigOwner(value: SettingsDoc): SettingsDoc {
+  if (!isPlainObject(value)) {
+    return {}
+  }
+
+  const next: SettingsDoc = { ...value }
+  const parsedLogLevel = CanonicalLogLevelSchema.safeParse(next.logLevel)
+  if (parsedLogLevel.success) {
+    next.logLevel = parsedLogLevel.data
+  } else if (next.logLevel !== undefined) {
+    next.logLevel = "DEBUG"
+  }
+  return next
+}
+
+function normalizeConfigDoc(doc: SettingsDoc): SettingsDoc {
+  if (!isPlainObject(doc)) {
+    return {}
+  }
+
+  if (!isPlainObject(doc.server)) {
+    return doc
+  }
+
+  return {
+    ...doc,
+    server: normalizeServerConfigOwner(doc.server as SettingsDoc),
+  }
+}
+
 export class SettingsService {
   private readonly configStore: YamlDocStore
   private readonly stateStore: YamlDocStore
@@ -23,22 +72,44 @@ export class SettingsService {
   }
 
   getDoc(kind: DocKind): SettingsDoc {
-    return kind === "config" ? this.configStore.get() : this.stateStore.get()
+    if (kind !== "config") {
+      return this.stateStore.get()
+    }
+
+    const current = this.configStore.get()
+    const normalized = normalizeConfigDoc(current)
+    if (!isDeepEqual(current, normalized)) {
+      this.configStore.replace(normalized)
+    }
+    return normalized
   }
 
   mergePatchDoc(kind: DocKind, patch: unknown): SettingsDoc {
-    const updated = kind === "config" ? this.configStore.mergePatch(patch) : this.stateStore.mergePatch(patch)
+    const updated =
+      kind === "config"
+        ? this.configStore.replace(normalizeConfigDoc(this.configStore.mergePatch(patch)))
+        : this.stateStore.mergePatch(patch)
     this.publish(kind, "*")
     return updated
   }
 
   getOwner(kind: DocKind, owner: string): SettingsDoc {
-    return kind === "config" ? this.configStore.getOwner(owner) : this.stateStore.getOwner(owner)
+    if (kind !== "config") {
+      return this.stateStore.getOwner(owner)
+    }
+
+    return owner === "server"
+      ? normalizeServerConfigOwner(this.getDoc("config").server as SettingsDoc)
+      : this.getDoc("config")[owner] as SettingsDoc
   }
 
   mergePatchOwner(kind: DocKind, owner: string, patch: unknown): SettingsDoc {
     const updated =
-      kind === "config" ? this.configStore.mergePatchOwner(owner, patch) : this.stateStore.mergePatchOwner(owner, patch)
+      kind === "config"
+        ? owner === "server"
+          ? this.configStore.replaceOwner(owner, normalizeServerConfigOwner(this.configStore.mergePatchOwner(owner, patch)))
+          : this.configStore.mergePatchOwner(owner, patch)
+        : this.stateStore.mergePatchOwner(owner, patch)
     this.publish(kind, owner, updated)
     return updated
   }

packages/server/src/sidecars/manager.ts

@@ -0,0 +1,256 @@
+import { connect } from "net"
+import type { EventBus } from "../events/bus"
+import type { Logger } from "../logger"
+import type { SettingsService } from "../settings/service"
+import type { SideCar, SideCarKind, SideCarPrefixMode, SideCarStatus } from "../api-types"
+
+interface SideCarManagerOptions {
+  settings: SettingsService
+  eventBus: EventBus
+  logger: Logger
+}
+
+interface SideCarConfigRecord {
+  id: string
+  kind: SideCarKind
+  name: string
+  port: number
+  insecure: boolean
+  prefixMode: SideCarPrefixMode
+  createdAt: string
+  updatedAt: string
+}
+
+interface SideCarRuntimeRecord {
+  status: SideCarStatus
+}
+
+export class SideCarManager {
+  private readonly configs = new Map<string, SideCarConfigRecord>()
+  private readonly runtime = new Map<string, SideCarRuntimeRecord>()
+
+  constructor(private readonly options: SideCarManagerOptions) {
+    for (const record of this.loadConfiguredSideCars()) {
+      this.configs.set(record.id, record)
+      this.runtime.set(record.id, { status: "stopped" })
+    }
+
+    queueMicrotask(() => {
+      for (const record of this.configs.values()) {
+        void this.refreshPortSideCar(record.id).catch((error) => {
+          this.options.logger.warn({ sidecarId: record.id, err: error }, "Failed to probe sidecar port")
+        })
+      }
+    })
+  }
+
+  async list(): Promise<SideCar[]> {
+    await this.refreshPortStatuses()
+    return Array.from(this.configs.values()).map((record) => this.toSideCar(record))
+  }
+
+  async get(id: string): Promise<SideCar | undefined> {
+    if (!this.configs.has(id)) return undefined
+    await this.refreshPortSideCar(id)
+    return this.toSideCar(this.requireConfig(id))
+  }
+
+  async create(input: {
+    kind: SideCarKind
+    name: string
+    port: number
+    insecure: boolean
+    prefixMode: SideCarPrefixMode
+  }): Promise<SideCar> {
+    const normalizedName = input.name.trim()
+    const id = this.buildSideCarId(normalizedName)
+    if (this.configs.has(id)) {
+      throw new Error(`SideCar '${id}' already exists`)
+    }
+
+    const now = new Date().toISOString()
+    const record: SideCarConfigRecord = {
+      id,
+      kind: input.kind,
+      name: normalizedName,
+      port: input.port,
+      insecure: input.insecure,
+      prefixMode: input.prefixMode,
+      createdAt: now,
+      updatedAt: now,
+    }
+
+    this.configs.set(record.id, record)
+    this.runtime.set(record.id, { status: "stopped" })
+    this.persistConfigs()
+    await this.refreshPortSideCar(record.id)
+    return this.toSideCar(record)
+  }
+
+  async update(
+    id: string,
+    input: Partial<{
+      name: string
+      port: number
+      insecure: boolean
+      prefixMode: SideCarPrefixMode
+    }>,
+  ): Promise<SideCar> {
+    const record = this.requireConfig(id)
+
+    record.name = typeof input.name === "string" ? input.name.trim() : record.name
+    record.port = typeof input.port === "number" ? input.port : record.port
+    record.insecure = typeof input.insecure === "boolean" ? input.insecure : record.insecure
+    record.prefixMode = typeof input.prefixMode === "string" ? input.prefixMode : record.prefixMode
+    record.updatedAt = new Date().toISOString()
+
+    this.persistConfigs()
+    await this.refreshPortSideCar(id)
+    return this.toSideCar(record)
+  }
+
+  async delete(id: string): Promise<boolean> {
+    const record = this.configs.get(id)
+    if (!record) return false
+
+    this.configs.delete(id)
+    this.runtime.delete(id)
+    this.persistConfigs()
+    this.options.eventBus.publish({ type: "sidecar.removed", sidecarId: id })
+    return true
+  }
+
+  async shutdown() {
+    return
+  }
+
+  buildTargetOrigin(sidecar: Pick<SideCar, "port" | "insecure">): string {
+    const protocol = sidecar.insecure ? "http" : "https"
+    return `${protocol}://127.0.0.1:${sidecar.port}`
+  }
+
+  buildProxyBasePath(id: string): string {
+    return `/sidecars/${encodeURIComponent(id)}`
+  }
+
+  buildTargetPath(id: string, incomingPath: string, search = ""): string {
+    const record = this.requireConfig(id)
+    const publicBase = this.buildProxyBasePath(id)
+    const normalizedPath = incomingPath || publicBase
+
+    if (record.prefixMode === "preserve") {
+      return `${normalizedPath}${search}`
+    }
+
+    let stripped = normalizedPath.startsWith(publicBase) ? normalizedPath.slice(publicBase.length) : normalizedPath
+    if (!stripped || stripped === "/") {
+      stripped = "/"
+    } else if (!stripped.startsWith("/")) {
+      stripped = `/${stripped}`
+    }
+    return `${stripped}${search}`
+  }
+
+  private async refreshPortStatuses() {
+    await Promise.all(Array.from(this.configs.values()).map((record) => this.refreshPortSideCar(record.id)))
+  }
+
+  private async refreshPortSideCar(id: string) {
+    const record = this.configs.get(id)
+    if (!record) return
+    const isAvailable = await this.isPortAvailable(record.port)
+    const current = this.runtime.get(id)
+    const nextStatus: SideCarStatus = isAvailable ? "running" : "stopped"
+    if (current?.status === nextStatus) {
+      return
+    }
+
+    this.runtime.set(id, { status: nextStatus })
+    record.updatedAt = new Date().toISOString()
+    this.publish(id)
+  }
+
+  private publish(id: string) {
+    const record = this.configs.get(id)
+    if (!record) return
+    this.options.eventBus.publish({ type: "sidecar.updated", sidecar: this.toSideCar(record) })
+  }
+
+  private toSideCar(record: SideCarConfigRecord): SideCar {
+    const runtime = this.runtime.get(record.id)
+    return {
+      id: record.id,
+      kind: record.kind,
+      name: record.name,
+      port: record.port,
+      insecure: record.insecure,
+      prefixMode: record.prefixMode,
+      status: runtime?.status ?? "stopped",
+      createdAt: record.createdAt,
+      updatedAt: record.updatedAt,
+    }
+  }
+
+  private requireConfig(id: string): SideCarConfigRecord {
+    const record = this.configs.get(id)
+    if (!record) {
+      throw new Error("SideCar not found")
+    }
+    return record
+  }
+
+  private persistConfigs() {
+    const sidecars = Array.from(this.configs.values()).map((record) => ({ ...record }))
+    this.options.settings.mergePatchOwner("config", "server", { sidecars })
+  }
+
+  private loadConfiguredSideCars(): SideCarConfigRecord[] {
+    const serverConfig = this.options.settings.getOwner("config", "server") as { sidecars?: unknown }
+    const list = Array.isArray(serverConfig?.sidecars) ? serverConfig.sidecars : []
+    const records: SideCarConfigRecord[] = []
+    for (const item of list) {
+      if (!item || typeof item !== "object") continue
+      const record = item as Record<string, unknown>
+      const kind = record.kind === "port" ? "port" : null
+      const id = typeof record.id === "string" && record.id.trim() ? record.id.trim() : null
+      const name = typeof record.name === "string" && record.name.trim() ? record.name.trim() : null
+      const port = typeof record.port === "number" && Number.isInteger(record.port) ? record.port : null
+      if (!kind || !id || !name || !port) continue
+
+      const insecure = record.insecure === true
+      const prefixMode = record.prefixMode === "preserve" ? "preserve" : "strip"
+      const createdAt = typeof record.createdAt === "string" && record.createdAt ? record.createdAt : new Date().toISOString()
+      const updatedAt = typeof record.updatedAt === "string" && record.updatedAt ? record.updatedAt : createdAt
+      records.push({ id, kind, name, port, insecure, prefixMode, createdAt, updatedAt })
+    }
+    return records
+  }
+
+  private isPortAvailable(port: number): Promise<boolean> {
+    return new Promise((resolve) => {
+      const socket = connect({ port, host: "127.0.0.1" }, () => {
+        socket.end()
+        resolve(true)
+      })
+      socket.once("error", () => {
+        socket.destroy()
+        resolve(false)
+      })
+    })
+  }
+
+  private buildSideCarId(name: string): string {
+    const normalized = name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/-{2,}/g, "-")
+      .replace(/^-|-$/g, "")
+
+    if (!normalized) {
+      throw new Error("SideCar name must include letters or numbers")
+    }
+
+    return normalized
+  }
+}

packages/server/src/ui/__tests__/remote-ui.test.ts

@@ -55,4 +55,31 @@ describe("resolveUi local version preference", () => {
     assert.equal(result.uiStaticDir, bundledDir)
     assert.equal(result.uiVersion, "0.8.1")
   })
+
+  it("prefers bundled when bundled and downloaded versions are equal", async () => {
+    const bundledDir = path.join(tempRoot, "bundled")
+    const configDir = path.join(tempRoot, "config")
+    const currentDir = path.join(configDir, "ui", "current")
+
+    await mkdir(bundledDir, { recursive: true })
+    await mkdir(currentDir, { recursive: true })
+
+    writeFileSync(path.join(bundledDir, "index.html"), "<html>bundled</html>")
+    writeFileSync(path.join(bundledDir, "ui-version.json"), JSON.stringify({ uiVersion: "0.8.1" }))
+
+    writeFileSync(path.join(currentDir, "index.html"), "<html>current</html>")
+    writeFileSync(path.join(currentDir, "ui-version.json"), JSON.stringify({ uiVersion: "0.8.1" }))
+
+    const result = await resolveUi({
+      serverVersion: "0.8.1",
+      bundledUiDir: bundledDir,
+      autoUpdate: false,
+      configDir,
+      logger: noopLogger,
+    })
+
+    assert.equal(result.source, "bundled")
+    assert.equal(result.uiStaticDir, bundledDir)
+    assert.equal(result.uiVersion, "0.8.1")
+  })
 })

packages/server/src/ui/remote-ui.ts

@@ -250,7 +250,7 @@ async function pickBestLocalUi(args: {
       uiStaticDir: currentResolved,
       source: "downloaded",
       uiVersion: await readUiVersion(currentResolved),
-      priority: 2,
+      priority: 1,
     })
   }
 
@@ -260,7 +260,7 @@ async function pickBestLocalUi(args: {
       uiStaticDir: bundledResolved,
       source: "bundled",
       uiVersion: await readUiVersion(bundledResolved),
-      priority: 1,
+      priority: 2,
     })
   }
 

packages/server/src/workspaces/git-mutations.ts

@@ -0,0 +1,121 @@
+import { spawn } from "child_process"
+import path from "path"
+
+type GitResult = { ok: true; stdout: string } | { ok: false; error: Error; stdout?: string; stderr?: string }
+
+class GitMutationError extends Error {
+  statusCode: number
+
+  constructor(message: string, statusCode = 400) {
+    super(message)
+    this.name = "GitMutationError"
+    this.statusCode = statusCode
+  }
+}
+
+function runGit(args: string[], cwd: string): Promise<GitResult> {
+  return new Promise((resolve) => {
+    const child = spawn("git", args, { cwd, stdio: ["ignore", "pipe", "pipe"] })
+    let stdout = ""
+    let stderr = ""
+
+    child.stdout?.on("data", (chunk) => {
+      stdout += chunk.toString()
+    })
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString()
+    })
+    child.once("error", (error) => {
+      resolve({ ok: false, error, stdout, stderr })
+    })
+    child.once("close", (code) => {
+      if (code === 0) {
+        resolve({ ok: true, stdout })
+      } else {
+        const error = new Error(stderr.trim() || `git ${args.join(" ")} failed with code ${code}`)
+        resolve({ ok: false, error, stdout, stderr })
+      }
+    })
+  })
+}
+
+export function normalizeGitWorktreeRelativePath(input: string): string {
+  const normalized = input.trim().replace(/\\+/g, "/").replace(/^\.\//, "")
+  if (!normalized) {
+    throw new GitMutationError("Path is required", 400)
+  }
+  if (path.posix.isAbsolute(normalized) || path.win32.isAbsolute(normalized)) {
+    throw new GitMutationError(`Absolute paths are not allowed: ${input}`, 400)
+  }
+  if (normalized === "." || normalized === "..") {
+    throw new GitMutationError(`Invalid path: ${input}`, 400)
+  }
+  if (normalized.startsWith("../") || normalized.includes("/../") || normalized.endsWith("/..")) {
+    throw new GitMutationError(`Path traversal is not allowed: ${input}`, 400)
+  }
+  return normalized
+}
+
+function normalizeGitMutationPaths(paths: string[]): string[] {
+  const deduped = new Set<string>()
+  for (const rawPath of paths) {
+    deduped.add(normalizeGitWorktreeRelativePath(rawPath))
+  }
+  const normalized = Array.from(deduped)
+  if (normalized.length === 0) {
+    throw new GitMutationError("At least one path is required", 400)
+  }
+  return normalized
+}
+
+async function ensureGitCommandSucceeded(resultPromise: Promise<GitResult>, fallbackMessage: string): Promise<string> {
+  const result = await resultPromise
+  if (!result.ok) {
+    const message = result.stderr?.trim() || result.error.message || fallbackMessage
+    throw new GitMutationError(message, 409)
+  }
+  return result.stdout
+}
+
+export function isGitMutationError(error: unknown): error is GitMutationError {
+  return error instanceof GitMutationError
+}
+
+export async function stageWorktreePaths(params: { workspaceFolder: string; paths: string[] }): Promise<void> {
+  const paths = normalizeGitMutationPaths(params.paths)
+  await ensureGitCommandSucceeded(runGit(["add", "--", ...paths], params.workspaceFolder), "Failed to stage files")
+}
+
+export async function unstageWorktreePaths(params: { workspaceFolder: string; paths: string[] }): Promise<void> {
+  const paths = normalizeGitMutationPaths(params.paths)
+  const headResult = await runGit(["rev-parse", "--verify", "HEAD"], params.workspaceFolder)
+  if (headResult.ok) {
+    await ensureGitCommandSucceeded(
+      runGit(["restore", "--staged", "--", ...paths], params.workspaceFolder),
+      "Failed to unstage files",
+    )
+    return
+  }
+
+  await ensureGitCommandSucceeded(
+    runGit(["rm", "--cached", "--quiet", "--", ...paths], params.workspaceFolder),
+    "Failed to unstage files",
+  )
+}
+
+export async function commitWorktreeChanges(params: { workspaceFolder: string; message: string }): Promise<{ commitSha?: string }> {
+  const message = params.message.trim()
+  if (!message) {
+    throw new GitMutationError("Commit message is required", 400)
+  }
+
+  await ensureGitCommandSucceeded(runGit(["commit", "-m", message], params.workspaceFolder), "Failed to create commit")
+
+  const shaResult = await runGit(["rev-parse", "HEAD"], params.workspaceFolder)
+  if (!shaResult.ok) {
+    return {}
+  }
+
+  const commitSha = shaResult.stdout.trim()
+  return commitSha ? { commitSha } : {}
+}

packages/server/src/workspaces/git-status.ts

@@ -0,0 +1,385 @@
+import { spawn } from "child_process"
+import { readFile } from "fs/promises"
+import path from "path"
+
+import type { GitChangeKind, WorktreeGitDiffResponse, WorktreeGitDiffScope, WorktreeGitStatusEntry } from "../api-types"
+import type { LogLike } from "./git-worktrees"
+import { normalizeGitWorktreeRelativePath } from "./git-mutations"
+
+type GitResult = { ok: true; stdout: string } | { ok: false; error: Error; stdout?: string; stderr?: string }
+type GitSuccessResult = Extract<GitResult, { ok: true }>
+
+async function readFileAsDiffText(filePath: string): Promise<string> {
+  return readFile(filePath, "utf-8")
+}
+
+async function readGitBlobAsDiffText(resultPromise: Promise<GitResult>, missingOk = false): Promise<string> {
+  const result = await resultPromise
+  if (!result.ok) {
+    return decodeGitShowResult(result, missingOk)
+  }
+  return result.stdout
+}
+
+function runGit(args: string[], cwd: string, acceptedExitCodes: number[] = [0]): Promise<GitResult> {
+  return new Promise((resolve) => {
+    const child = spawn("git", args, { cwd, stdio: ["ignore", "pipe", "pipe"] })
+    let stdout = ""
+    let stderr = ""
+
+    child.stdout?.on("data", (chunk) => {
+      stdout += chunk.toString()
+    })
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString()
+    })
+    child.once("error", (error) => {
+      resolve({ ok: false, error, stdout, stderr })
+    })
+    child.once("close", (code) => {
+      if (acceptedExitCodes.includes(code ?? 0)) {
+        resolve({ ok: true, stdout })
+      } else {
+        const error = new Error(stderr.trim() || `git ${args.join(" ")} failed with code ${code}`)
+        resolve({ ok: false, error, stdout, stderr })
+      }
+    })
+  })
+}
+
+function ensureEntry(map: Map<string, WorktreeGitStatusEntry>, path: string): WorktreeGitStatusEntry {
+  const existing = map.get(path)
+  if (existing) return existing
+  const next: WorktreeGitStatusEntry = {
+    path,
+    originalPath: null,
+    stagedStatus: null,
+    stagedAdditions: 0,
+    stagedDeletions: 0,
+    unstagedStatus: null,
+    unstagedAdditions: 0,
+    unstagedDeletions: 0,
+  }
+  map.set(path, next)
+  return next
+}
+
+function normalizeGitStatusPath(value: string): string {
+  return value.trim().replace(/\\+/g, "/")
+}
+
+function parseGitChangeKind(code: string): GitChangeKind | null {
+  const normalized = code.trim().toUpperCase()
+  if (!normalized) return null
+  if (normalized === "A") return "added"
+  if (normalized === "M") return "modified"
+  if (normalized === "D") return "deleted"
+  if (normalized.startsWith("R")) return "renamed"
+  if (normalized.startsWith("C")) return "copied"
+  if (normalized === "U") return "unmerged"
+  return null
+}
+
+function applyNameStatusOutput(
+  map: Map<string, WorktreeGitStatusEntry>,
+  output: string,
+  target: "stagedStatus" | "unstagedStatus",
+) {
+  const tokens = output.split("\0")
+  let index = 0
+
+  while (index < tokens.length) {
+    const record = tokens[index++] ?? ""
+    if (!record) continue
+
+    const parts = record.split("\t")
+    const statusCode = parseGitChangeKind(parts[0] ?? "")
+    if (!statusCode) continue
+
+    const inlinePath = parts.slice(1).join("\t")
+    const firstPath = inlinePath || tokens[index++] || ""
+    const secondPath = statusCode === "renamed" || statusCode === "copied" ? tokens[index++] || "" : ""
+    const path = statusCode === "renamed" || statusCode === "copied" ? secondPath || firstPath : firstPath
+    const normalizedPath = normalizeGitStatusPath(path)
+    if (!normalizedPath) continue
+    const entry = ensureEntry(map, normalizedPath)
+    entry[target] = statusCode
+    if (statusCode === "renamed" || statusCode === "copied") {
+      const originalPath = normalizeGitStatusPath(firstPath)
+      entry.originalPath = originalPath || entry.originalPath || null
+    }
+  }
+}
+
+function applyUntrackedOutput(map: Map<string, WorktreeGitStatusEntry>, output: string) {
+  for (const rawLine of output.split(/\r?\n/)) {
+    const path = normalizeGitStatusPath(rawLine)
+    if (!path) continue
+    ensureEntry(map, path).unstagedStatus = "untracked"
+  }
+}
+
+function parseSingleNumstat(output: string): { additions: number; deletions: number; isBinary: boolean; found: boolean } {
+  for (const rawLine of output.split(/\r?\n/)) {
+    const line = rawLine.trim()
+    if (!line) continue
+    const parts = rawLine.split("\t")
+    const isBinary = parts[0] === "-" || parts[1] === "-"
+    return {
+      additions: isBinary ? 0 : Number.parseInt(parts[0] ?? "0", 10) || 0,
+      deletions: isBinary ? 0 : Number.parseInt(parts[1] ?? "0", 10) || 0,
+      isBinary,
+      found: true,
+    }
+  }
+
+  return { additions: 0, deletions: 0, isBinary: false, found: false }
+}
+
+async function getUntrackedFileNumstat(workspaceFolder: string, relativePath: string): Promise<{ additions: number; deletions: number }> {
+  const absolutePath = path.join(workspaceFolder, relativePath)
+  const result = await runGit(["diff", "--numstat", "--no-index", "--", "/dev/null", absolutePath], workspaceFolder, [0, 1])
+  if (!result.ok) {
+    throw result.error
+  }
+
+  const parsed = parseSingleNumstat(result.stdout)
+  return { additions: parsed.additions, deletions: parsed.deletions }
+}
+
+async function applyUntrackedFileStats(map: Map<string, WorktreeGitStatusEntry>, workspaceFolder: string) {
+  const pending = Array.from(map.values())
+    .filter((entry) => entry.unstagedStatus === "untracked")
+    .map(async (entry) => {
+      try {
+        const stats = await getUntrackedFileNumstat(workspaceFolder, entry.path)
+        entry.unstagedAdditions = stats.additions
+        entry.unstagedDeletions = stats.deletions
+      } catch {
+        entry.unstagedAdditions = 0
+        entry.unstagedDeletions = 0
+      }
+    })
+  await Promise.all(pending)
+}
+
+function applyNumstatOutput(
+  map: Map<string, WorktreeGitStatusEntry>,
+  output: string,
+  target: "staged" | "unstaged",
+) {
+  const tokens = output.split("\0")
+  let index = 0
+
+  while (index < tokens.length) {
+    const record = tokens[index++] ?? ""
+    if (!record) continue
+
+    const parts = record.split("\t")
+    if (parts.length < 3) continue
+
+    const additions = parts[0] === "-" ? 0 : Number.parseInt(parts[0] ?? "0", 10)
+    const deletions = parts[1] === "-" ? 0 : Number.parseInt(parts[1] ?? "0", 10)
+    const inlinePath = parts.slice(2).join("\t")
+    const isRenameLike = inlinePath === ""
+    const originalPath = isRenameLike ? normalizeGitStatusPath(tokens[index++] ?? "") : null
+    const normalizedPath = normalizeGitStatusPath(isRenameLike ? tokens[index++] ?? "" : inlinePath)
+    if (!normalizedPath) continue
+
+    const entry = ensureEntry(map, normalizedPath)
+    if (originalPath) {
+      entry.originalPath = originalPath
+    }
+
+    if (target === "staged") {
+      entry.stagedAdditions = Number.isFinite(additions) ? additions : 0
+      entry.stagedDeletions = Number.isFinite(deletions) ? deletions : 0
+    } else {
+      entry.unstagedAdditions = Number.isFinite(additions) ? additions : 0
+      entry.unstagedDeletions = Number.isFinite(deletions) ? deletions : 0
+    }
+  }
+}
+
+export async function getWorktreeGitStatus(params: {
+  workspaceFolder: string
+  logger?: LogLike
+}): Promise<WorktreeGitStatusEntry[]> {
+  const { workspaceFolder, logger } = params
+  const [stagedResult, unstagedResult, untrackedResult, stagedNumstatResult, unstagedNumstatResult] = await Promise.all([
+    runGit(["diff", "--name-status", "-z", "--cached", "--find-renames", "--find-copies"], workspaceFolder),
+    runGit(["diff", "--name-status", "-z", "--find-renames", "--find-copies"], workspaceFolder),
+    runGit(["ls-files", "--others", "--exclude-standard"], workspaceFolder),
+    runGit(["diff", "--numstat", "-z", "--cached", "--find-renames", "--find-copies"], workspaceFolder),
+    runGit(["diff", "--numstat", "-z", "--find-renames", "--find-copies"], workspaceFolder),
+  ])
+
+  for (const result of [stagedResult, unstagedResult, untrackedResult, stagedNumstatResult, unstagedNumstatResult]) {
+    if (!result.ok) {
+      logger?.warn?.({ workspaceFolder, err: result.error }, "Failed to read git status for worktree")
+      throw result.error
+    }
+  }
+
+  const stagedOutput = (stagedResult as GitSuccessResult).stdout
+  const unstagedOutput = (unstagedResult as GitSuccessResult).stdout
+  const untrackedOutput = (untrackedResult as GitSuccessResult).stdout
+  const stagedNumstatOutput = (stagedNumstatResult as GitSuccessResult).stdout
+  const unstagedNumstatOutput = (unstagedNumstatResult as GitSuccessResult).stdout
+
+  const entries = new Map<string, WorktreeGitStatusEntry>()
+  applyNameStatusOutput(entries, stagedOutput, "stagedStatus")
+  applyNameStatusOutput(entries, unstagedOutput, "unstagedStatus")
+  applyUntrackedOutput(entries, untrackedOutput)
+  applyNumstatOutput(entries, stagedNumstatOutput, "staged")
+  applyNumstatOutput(entries, unstagedNumstatOutput, "unstaged")
+  await applyUntrackedFileStats(entries, workspaceFolder)
+
+  return Array.from(entries.values()).sort((a, b) => a.path.localeCompare(b.path))
+}
+
+function decodeGitShowResult(result: GitResult, missingOk = false): string {
+  if (result.ok) return result.stdout
+  const message = result.stderr?.trim() || result.error.message || ""
+  if (
+    missingOk &&
+    (message.includes("exists on disk, but not in") ||
+      message.includes("Path '") ||
+      message.includes("does not exist") ||
+      message.includes("unknown revision or path not in the working tree"))
+  ) {
+    return ""
+  }
+  throw result.error
+}
+
+async function readGitIndexBlob(workspaceFolder: string, normalizedPath: string): Promise<GitResult> {
+  return runGit(["cat-file", "-p", `:${normalizedPath}`], workspaceFolder)
+}
+
+async function getTrackedDiffMetadata(params: {
+  workspaceFolder: string
+  scope: WorktreeGitDiffScope
+  normalizedPath: string
+  normalizedOriginalPath: string | null
+}): Promise<{ isBinary: boolean; found: boolean }> {
+  const args = ["diff", "--numstat"]
+  if (params.scope === "staged") {
+    args.push("--cached")
+  }
+  args.push("--find-renames", "--find-copies", "--")
+  args.push(params.normalizedPath)
+  if (params.normalizedOriginalPath && params.normalizedOriginalPath !== params.normalizedPath) {
+    args.push(params.normalizedOriginalPath)
+  }
+
+  const result = await runGit(args, params.workspaceFolder)
+  if (!result.ok) {
+    throw result.error
+  }
+
+  const parsed = parseSingleNumstat(result.stdout)
+  return { isBinary: parsed.isBinary, found: parsed.found }
+}
+
+async function getUntrackedDiffMetadata(params: {
+  workspaceFolder: string
+  normalizedPath: string
+}): Promise<{ isBinary: boolean }> {
+  const absolutePath = path.join(params.workspaceFolder, params.normalizedPath)
+  const result = await runGit(["diff", "--numstat", "--no-index", "--", "/dev/null", absolutePath], params.workspaceFolder, [0, 1])
+  if (!result.ok) {
+    throw result.error
+  }
+
+  return { isBinary: parseSingleNumstat(result.stdout).isBinary }
+}
+
+async function resolveUnstagedBeforePath(params: {
+  workspaceFolder: string
+  normalizedPath: string
+  normalizedOriginalPath: string | null
+}): Promise<GitResult> {
+  const currentPathResult = await readGitIndexBlob(params.workspaceFolder, params.normalizedPath)
+  if (currentPathResult.ok || !params.normalizedOriginalPath || params.normalizedOriginalPath === params.normalizedPath) {
+    return currentPathResult
+  }
+  return readGitIndexBlob(params.workspaceFolder, params.normalizedOriginalPath)
+}
+
+export async function getWorktreeGitDiff(params: {
+  workspaceFolder: string
+  path: string
+  originalPath?: string | null
+  scope: WorktreeGitDiffScope
+}): Promise<WorktreeGitDiffResponse> {
+  const normalizedPath = normalizeGitWorktreeRelativePath(params.path)
+  const normalizedOriginalPath = params.originalPath ? normalizeGitWorktreeRelativePath(params.originalPath) : null
+
+  const trackedMetadata = await getTrackedDiffMetadata({
+    workspaceFolder: params.workspaceFolder,
+    scope: params.scope,
+    normalizedPath,
+    normalizedOriginalPath,
+  })
+
+  const diffMetadata =
+    params.scope === "unstaged" && !trackedMetadata.found
+      ? await getUntrackedDiffMetadata({
+          workspaceFolder: params.workspaceFolder,
+          normalizedPath,
+        })
+      : trackedMetadata
+
+  if (diffMetadata.isBinary) {
+    return {
+      path: normalizedPath,
+      originalPath: normalizedOriginalPath,
+      scope: params.scope,
+      before: "",
+      after: "",
+      isBinary: true,
+    }
+  }
+
+  if (params.scope === "staged") {
+    const [beforeResult, afterResult] = await Promise.all([
+      readGitBlobAsDiffText(runGit(["show", `HEAD:${normalizedOriginalPath ?? normalizedPath}`], params.workspaceFolder), true),
+      readGitBlobAsDiffText(readGitIndexBlob(params.workspaceFolder, normalizedPath), true),
+    ])
+
+    return {
+      path: normalizedPath,
+      originalPath: normalizedOriginalPath,
+      scope: params.scope,
+      before: beforeResult,
+      after: afterResult,
+      isBinary: false,
+    }
+  }
+
+  const indexResult = await resolveUnstagedBeforePath({
+    workspaceFolder: params.workspaceFolder,
+    normalizedPath,
+    normalizedOriginalPath,
+  })
+
+  const beforeResult = await readGitBlobAsDiffText(Promise.resolve(indexResult), true)
+  let after = beforeResult
+
+  const fsPath = path.join(params.workspaceFolder, normalizedPath)
+  try {
+    after = await readFileAsDiffText(fsPath)
+  } catch {
+    after = ""
+  }
+
+  return {
+    path: normalizedPath,
+    originalPath: normalizedOriginalPath,
+    scope: params.scope,
+    before: beforeResult,
+    after,
+    isBinary: false,
+  }
+}

packages/server/src/workspaces/git-worktrees.ts

@@ -10,6 +10,10 @@ export interface LogLike {
 
 type GitResult = { ok: true; stdout: string } | { ok: false; error: Error; stdout?: string; stderr?: string }
 
+function isGitUnavailableResult(result: GitResult): boolean {
+  return !result.ok && (result.error as NodeJS.ErrnoException | undefined)?.code === "ENOENT"
+}
+
 function runGit(args: string[], cwd: string): Promise<GitResult> {
   return new Promise((resolve) => {
     const child = spawn("git", args, { cwd, stdio: ["ignore", "pipe", "pipe"] })
@@ -38,6 +42,9 @@ function runGit(args: string[], cwd: string): Promise<GitResult> {
 
 export async function resolveRepoRoot(folder: string, logger?: LogLike): Promise<{ repoRoot: string; isGitRepo: boolean }> {
   const result = await runGit(["rev-parse", "--show-toplevel"], folder)
+  if (isGitUnavailableResult(result)) {
+    throw new Error("Git is not installed or not available in PATH")
+  }
   if (!result.ok) {
     logger?.debug?.({ folder, err: result.error }, "Folder is not a Git repository; using workspace folder as root")
     return { repoRoot: folder, isGitRepo: false }
@@ -49,6 +56,11 @@ export async function resolveRepoRoot(folder: string, logger?: LogLike): Promise
   return { repoRoot, isGitRepo: true }
 }
 
+export async function isGitAvailable(folder: string): Promise<boolean> {
+  const result = await runGit(["--version"], folder)
+  return result.ok || !isGitUnavailableResult(result)
+}
+
 function parseWorktreePorcelain(output: string): Array<{ worktree: string; branch?: string; head?: string; detached?: boolean }> {
   const records: Array<{ worktree: string; branch?: string; head?: string; detached?: boolean }> = []
   const lines = output.split(/\r?\n/)
@@ -90,15 +102,22 @@ export async function listWorktrees(params: {
   logger?: LogLike
 }): Promise<WorktreeDescriptor[]> {
   const { repoRoot, workspaceFolder, logger } = params
-  const rootDescriptor: WorktreeDescriptor = { slug: "root", directory: repoRoot, kind: "root" }
 
   const result = await runGit(["worktree", "list", "--porcelain"], workspaceFolder)
   if (!result.ok) {
+    const rootDescriptor: WorktreeDescriptor = { slug: "root", directory: repoRoot, kind: "root" }
     logger?.debug?.({ repoRoot, err: result.error }, "Failed to list git worktrees; returning root only")
     return [rootDescriptor]
   }
 
   const records = parseWorktreePorcelain(result.stdout)
+  const rootRecord = records.find((record) => path.resolve(record.worktree) === path.resolve(repoRoot))
+  const rootDescriptor: WorktreeDescriptor = {
+    slug: "root",
+    directory: repoRoot,
+    kind: "root",
+    branch: rootRecord?.branch,
+  }
 
   const worktrees: WorktreeDescriptor[] = [rootDescriptor]
   const seen = new Set<string>(["root"])

packages/server/src/workspaces/manager.ts

@@ -83,6 +83,12 @@ export class WorkspaceManager {
     }
   }
 
+  writeFile(workspaceId: string, relativePath: string, contents: string): void {
+    const workspace = this.requireWorkspace(workspaceId)
+    const browser = new FileSystemBrowser({ rootDir: workspace.path })
+    browser.writeFile(relativePath, contents)
+  }
+
   async create(folder: string, name?: string): Promise<WorkspaceDescriptor> {
  
     const id = `${Date.now().toString(36)}`
@@ -136,12 +142,15 @@ export class WorkspaceManager {
       [OPENCODE_SERVER_PASSWORD_ENV]: opencodePassword,
     }
 
+    const logLevel = (serverConfig as any)?.logLevel
+
     try {
       const { pid, port, exitPromise, getLastOutput } = await this.runtime.launch({
         workspaceId: id,
         folder: workspacePath,
         binaryPath: resolvedBinaryPath,
         environment,
+        logLevel,
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
 

packages/server/src/workspaces/runtime.ts

@@ -116,6 +116,7 @@ interface LaunchOptions {
   folder: string
   binaryPath: string
   environment?: Record<string, string>
+  logLevel?: string
   onExit?: (info: ProcessExitInfo) => void
 }
 
@@ -139,7 +140,8 @@ export class WorkspaceRuntime {
   async launch(options: LaunchOptions): Promise<{ pid: number; port: number; exitPromise: Promise<ProcessExitInfo>; getLastOutput: () => string }> {
     this.validateFolder(options.folder)
 
-    const args = ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"]
+    const logLevel = typeof options.logLevel === "string" ? options.logLevel.toUpperCase() : "DEBUG"
+    const args = ["serve", "--port", "0", "--print-logs", "--log-level", logLevel]
     const env = { ...process.env, ...(options.environment ?? {}) }
 
     let exitResolve: ((info: ProcessExitInfo) => void) | null = null

packages/server/src/workspaces/worktree-directory.ts

@@ -0,0 +1,99 @@
+import { realpath } from "fs/promises"
+import type { LogLike } from "./git-worktrees"
+import { listWorktrees, resolveRepoRoot } from "./git-worktrees"
+
+type WorktreeCacheEntry = {
+  expiresAt: number
+  repoRoot: string
+  worktrees: Array<{ slug: string; directory: string; normalizedDirectory: string }>
+}
+
+const WORKTREE_CACHE_TTL_MS = 2000
+const worktreeCache = new Map<string, WorktreeCacheEntry>()
+
+async function normalizeDirectoryPath(directory: string): Promise<string> {
+  const trimmed = (directory ?? "").trim()
+  if (!trimmed) return ""
+  try {
+    return await realpath(trimmed)
+  } catch {
+    return trimmed
+  }
+}
+
+async function getCachedWorktrees(params: { workspaceId: string; workspacePath: string; logger?: LogLike }) {
+  const cached = worktreeCache.get(params.workspaceId)
+  const now = Date.now()
+  if (cached && cached.expiresAt > now) {
+    return cached
+  }
+
+  const { repoRoot } = await resolveRepoRoot(params.workspacePath, params.logger)
+  const worktrees = await listWorktrees({ repoRoot, workspaceFolder: params.workspacePath, logger: params.logger })
+  const entry: WorktreeCacheEntry = {
+    expiresAt: now + WORKTREE_CACHE_TTL_MS,
+    repoRoot,
+    worktrees: await Promise.all(
+      worktrees.map(async (wt) => ({
+        slug: wt.slug,
+        directory: wt.directory,
+        normalizedDirectory: await normalizeDirectoryPath(wt.directory),
+      })),
+    ),
+  }
+  worktreeCache.set(params.workspaceId, entry)
+  return entry
+}
+
+export async function resolveWorktreeDirectory(params: {
+  workspaceId: string
+  workspacePath: string
+  worktreeSlug: string
+  logger?: LogLike
+}): Promise<string | null> {
+  const cached = await getCachedWorktrees({
+    workspaceId: params.workspaceId,
+    workspacePath: params.workspacePath,
+    logger: params.logger,
+  })
+  const match = cached.worktrees.find((wt) => wt.slug === params.worktreeSlug)
+  if (match) {
+    return match.directory
+  }
+
+  worktreeCache.delete(params.workspaceId)
+  const refreshed = await getCachedWorktrees({
+    workspaceId: params.workspaceId,
+    workspacePath: params.workspacePath,
+    logger: params.logger,
+  })
+  return refreshed.worktrees.find((wt) => wt.slug === params.worktreeSlug)?.directory ?? null
+}
+
+export async function resolveWorktreeSlugForDirectory(params: {
+  workspaceId: string
+  workspacePath: string
+  directory: string
+  logger?: LogLike
+}): Promise<string | null> {
+  const target = await normalizeDirectoryPath(params.directory ?? "")
+  if (!target) return null
+
+  const cached = await getCachedWorktrees({
+    workspaceId: params.workspaceId,
+    workspacePath: params.workspacePath,
+    logger: params.logger,
+  })
+  const match = cached.worktrees.find((wt) => wt.normalizedDirectory === target)
+  if (match) {
+    return match.slug
+  }
+
+  worktreeCache.delete(params.workspaceId)
+  const refreshed = await getCachedWorktrees({
+    workspaceId: params.workspaceId,
+    workspacePath: params.workspacePath,
+    logger: params.logger,
+  })
+  return refreshed.worktrees.find((wt) => wt.normalizedDirectory === target)?.slug ?? null
+}

packages/tauri-app/Cargo.lock

@@ -458,7 +458,7 @@ dependencies = [
 
 [[package]]
 name = "codenomad-tauri"
-version = "0.12.3"
+version = "0.14.0"
 dependencies = [
  "anyhow",
  "dirs 5.0.1",

packages/tauri-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -8,6 +8,7 @@
     "dev:ui": "npm run dev --workspace @codenomad/ui",
     "dev:prep": "node ./scripts/dev-prep.js",
     "dev:bootstrap": "npm run dev:prep && npm run dev:ui",
+    "sync:version": "node ./scripts/sync-tauri-version.js",
     "prebuild": "node ./scripts/prebuild.js",
     "bundle:server": "npm run prebuild",
     "build": "tauri build"

packages/tauri-app/scripts/prebuild.js

@@ -56,11 +56,7 @@ async function ensureMonacoAssets() {
 function ensureServerBuild() {
   const distPath = path.join(serverRoot, "dist")
   const publicPath = path.join(serverRoot, "public")
-  if (fs.existsSync(distPath) && fs.existsSync(publicPath)) {
-    return
-  }
-
-  console.log("[prebuild] server build missing; running workspace build...")
+  console.log("[prebuild] rebuilding server workspace for desktop packaging...")
   execSync("npm --workspace @neuralnomads/codenomad run build", {
     cwd: workspaceRoot,
     stdio: "inherit",

packages/tauri-app/scripts/sync-tauri-version.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+const fs = require("fs")
+const path = require("path")
+
+const root = path.resolve(__dirname, "..")
+const packageJsonPath = path.join(root, "package.json")
+const cargoTomlPath = path.join(root, "src-tauri", "Cargo.toml")
+const cargoLockPath = path.join(root, "Cargo.lock")
+const tauriConfigPath = path.join(root, "src-tauri", "tauri.conf.json")
+
+function readPackageVersion() {
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"))
+  if (typeof packageJson.version !== "string" || packageJson.version.length === 0) {
+    throw new Error("Missing version in packages/tauri-app/package.json")
+  }
+  return packageJson.version
+}
+
+function syncCargoToml(version) {
+  const current = fs.readFileSync(cargoTomlPath, "utf8")
+  const packageVersionPattern = /(\[package\][\s\S]*?^version\s*=\s*")([^"]+)(")/m
+  const match = current.match(packageVersionPattern)
+
+  if (!match) {
+    throw new Error("Unable to find [package] version in packages/tauri-app/src-tauri/Cargo.toml")
+  }
+
+  if (match[2] === version) {
+    return false
+  }
+
+  const updated = current.replace(packageVersionPattern, (_, prefix, __, suffix) => `${prefix}${version}${suffix}`)
+  fs.writeFileSync(cargoTomlPath, updated)
+  return true
+}
+
+function syncCargoLock(version) {
+  if (!fs.existsSync(cargoLockPath)) {
+    return false
+  }
+
+  const current = fs.readFileSync(cargoLockPath, "utf8")
+  const packageVersionPattern = /(\[\[package\]\]\r?\nname = "codenomad-tauri"\r?\nversion = ")([^"]+)(")/
+  const match = current.match(packageVersionPattern)
+
+  if (!match) {
+    throw new Error("Unable to find codenomad-tauri version in packages/tauri-app/Cargo.lock")
+  }
+
+  if (match[2] === version) {
+    return false
+  }
+
+  const updated = current.replace(packageVersionPattern, (_, prefix, __, suffix) => `${prefix}${version}${suffix}`)
+  fs.writeFileSync(cargoLockPath, updated)
+  return true
+}
+
+function syncTauriConfig(version) {
+  const current = fs.readFileSync(tauriConfigPath, "utf8")
+  const config = JSON.parse(current)
+  if (config.version === version) {
+    return false
+  }
+
+  config.version = version
+  fs.writeFileSync(tauriConfigPath, `${JSON.stringify(config, null, 2)}\n`)
+  return true
+}
+
+function main() {
+  const version = readPackageVersion()
+  const changed = []
+
+  if (syncCargoToml(version)) {
+    changed.push(path.relative(root, cargoTomlPath))
+  }
+
+  if (syncCargoLock(version)) {
+    changed.push(path.relative(root, cargoLockPath))
+  }
+
+  if (syncTauriConfig(version)) {
+    changed.push(path.relative(root, tauriConfigPath))
+  }
+
+  if (changed.length === 0) {
+    console.log(`[sync-tauri-version] already aligned to ${version}`)
+    return
+  }
+
+  console.log(`[sync-tauri-version] synced ${version} -> ${changed.join(", ")}`)
+}
+
+try {
+  main()
+} catch (error) {
+  const message = error instanceof Error ? error.message : String(error)
+  console.error(`[sync-tauri-version] failed: ${message}`)
+  process.exit(1)
+}

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

@@ -1,6 +1,6 @@
 [package]
 name = "codenomad-tauri"
-version = "0.12.3"
+version = "0.14.0"
 edition = "2021"
 license = "MIT"
 
@@ -28,4 +28,4 @@ url = "2"
 tauri-plugin-notification = "2"
 
 [target.'cfg(windows)'.dependencies]
-windows-sys = { version = "0.59", features = ["Win32_UI_Shell"] }
+windows-sys = { version = "0.59", features = ["Win32_Foundation", "Win32_UI_Shell", "Win32_Security", "Win32_System_JobObjects"] }

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","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"]}}

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

@@ -2378,6 +2378,72 @@
           "const": "dialog:deny-save",
           "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",
+          "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"
+        },
+        {
+          "description": "Enables the is_registered 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."
+        },
+        {
+          "description": "Enables the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-register",
+          "markdownDescription": "Enables the register command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_all 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."
+        },
+        {
+          "description": "Enables the unregister 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."
+        },
         {
           "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/icons/linux/ai.neuralnomads.codenomad.client.desktop

@@ -0,0 +1,9 @@
+[Desktop Entry]
+Categories=
+Exec=codenomad-tauri
+StartupWMClass=codenomad-tauri
+Icon=codenomad-tauri
+Name=CodeNomad
+NoDisplay=true
+Terminal=false
+Type=Application

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

@@ -5,9 +5,13 @@ use serde::{Deserialize, Serialize};
 use serde_json::json;
 use std::collections::VecDeque;
 use std::env;
+#[cfg(windows)]
+use std::ffi::c_void;
 use std::ffi::OsStr;
 use std::fs;
 use std::io::{BufRead, BufReader, Read, Write};
+#[cfg(windows)]
+use std::mem::{size_of, zeroed};
 use std::net::TcpStream;
 #[cfg(unix)]
 use std::os::unix::process::CommandExt;
@@ -16,14 +20,98 @@ use std::process::{Child, Command, Stdio};
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
 use std::thread;
-use std::time::{Duration, Instant};
+use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};
 
+#[cfg(windows)]
+use std::os::windows::io::AsRawHandle;
 #[cfg(windows)]
 use std::os::windows::process::CommandExt;
+#[cfg(windows)]
+use windows_sys::Win32::Foundation::{CloseHandle, HANDLE};
+#[cfg(windows)]
+use windows_sys::Win32::System::JobObjects::{
+    AssignProcessToJobObject, CreateJobObjectW, JobObjectExtendedLimitInformation,
+    SetInformationJobObject, JOBOBJECT_EXTENDED_LIMIT_INFORMATION,
+    JOB_OBJECT_LIMIT_KILL_ON_JOB_CLOSE,
+};
 
 #[cfg(windows)]
 const CREATE_NO_WINDOW: u32 = 0x08000000;
+const MISSING_NODE_PREFIX: &str = "CODENOMAD_MISSING_NODE:";
+
+#[cfg(windows)]
+#[derive(Debug)]
+struct WindowsJobObject {
+    // The desktop wrapper may observe only a short-lived Node wrapper PID while the real
+    // server and workspace descendants continue running below it. KILL_ON_JOB_CLOSE gives
+    // Tauri an OS-owned handle for the whole subtree instead of relying on a single PID.
+    handle: HANDLE,
+}
+
+#[cfg(windows)]
+impl WindowsJobObject {
+    fn create() -> anyhow::Result<Self> {
+        let handle = unsafe { CreateJobObjectW(std::ptr::null_mut(), std::ptr::null()) };
+        if handle.is_null() {
+            return Err(anyhow::anyhow!(
+                "CreateJobObjectW failed: {}",
+                std::io::Error::last_os_error()
+            ));
+        }
+
+        let mut info: JOBOBJECT_EXTENDED_LIMIT_INFORMATION = unsafe { zeroed() };
+        info.BasicLimitInformation.LimitFlags = JOB_OBJECT_LIMIT_KILL_ON_JOB_CLOSE;
+
+        let ok = unsafe {
+            SetInformationJobObject(
+                handle,
+                JobObjectExtendedLimitInformation,
+                &mut info as *mut _ as *mut c_void,
+                size_of::<JOBOBJECT_EXTENDED_LIMIT_INFORMATION>() as u32,
+            )
+        };
+        if ok == 0 {
+            let err = std::io::Error::last_os_error();
+            unsafe {
+                CloseHandle(handle);
+            }
+            return Err(anyhow::anyhow!("SetInformationJobObject failed: {}", err));
+        }
+
+        Ok(Self { handle })
+    }
+
+    fn assign_child(&self, child: &Child) -> anyhow::Result<()> {
+        let process_handle = child.as_raw_handle() as HANDLE;
+        let ok = unsafe { AssignProcessToJobObject(self.handle, process_handle) };
+        if ok == 0 {
+            return Err(anyhow::anyhow!(
+                "AssignProcessToJobObject failed: {}",
+                std::io::Error::last_os_error()
+            ));
+        }
+
+        Ok(())
+    }
+}
+
+#[cfg(windows)]
+impl Drop for WindowsJobObject {
+    fn drop(&mut self) {
+        if !self.handle.is_null() {
+            unsafe {
+                CloseHandle(self.handle);
+            }
+        }
+    }
+}
+
+#[cfg(windows)]
+unsafe impl Send for WindowsJobObject {}
+
+#[cfg(windows)]
+unsafe impl Sync for WindowsJobObject {}
 
 fn log_line(message: &str) {
     println!("[tauri-cli] {message}");
@@ -48,7 +136,7 @@ fn workspace_root() -> Option<PathBuf> {
     })
 }
 
-const SESSION_COOKIE_NAME: &str = "codenomad_session";
+const SESSION_COOKIE_NAME_PREFIX: &str = "codenomad_session";
 
 const CLI_STOP_GRACE_SECS: u64 = 30;
 #[cfg(windows)]
@@ -124,7 +212,11 @@ fn extract_cookie_value(set_cookie: &str, name: &str) -> Option<String> {
     Some(value.to_string())
 }
 
-fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Option<String>> {
+fn exchange_bootstrap_token(
+    base_url: &str,
+    token: &str,
+    cookie_name: &str,
+) -> anyhow::Result<Option<String>> {
     let parsed = Url::parse(base_url)?;
     let host = parsed.host_str().unwrap_or("127.0.0.1");
     let port = parsed.port_or_known_default().unwrap_or(80);
@@ -159,11 +251,11 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
     for line in lines {
         // handle case-insensitive header name
         if let Some(value) = line.strip_prefix("Set-Cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                 return Ok(Some(session_id));
             }
         } else if let Some(value) = line.strip_prefix("set-cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                 return Ok(Some(session_id));
             }
         }
@@ -172,11 +264,16 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
     Ok(None)
 }
 
-fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyhow::Result<()> {
+fn set_session_cookie(
+    app: &AppHandle,
+    base_url: &str,
+    cookie_name: &str,
+    session_id: &str,
+) -> anyhow::Result<()> {
     let parsed = Url::parse(base_url)?;
     let domain = parsed.host_str().unwrap_or("127.0.0.1").to_string();
 
-    let cookie = Cookie::build((SESSION_COOKIE_NAME, session_id))
+    let cookie = Cookie::build((cookie_name.to_string(), session_id.to_string()))
         .domain(domain)
         .path("/")
         .http_only(true)
@@ -190,6 +287,16 @@ fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyh
     Ok(())
 }
 
+fn generate_auth_cookie_name() -> String {
+    let pid = std::process::id();
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|duration| duration.as_millis())
+        .unwrap_or(0);
+
+    format!("{SESSION_COOKIE_NAME_PREFIX}_{pid}_{timestamp}")
+}
+
 const DEFAULT_CONFIG_PATH: &str = "~/.config/codenomad/config.json";
 
 #[derive(Debug, Deserialize)]
@@ -344,6 +451,8 @@ impl Default for CliStatus {
 pub struct CliProcessManager {
     status: Arc<Mutex<CliStatus>>,
     child: Arc<Mutex<Option<Child>>>,
+    #[cfg(windows)]
+    job: Arc<Mutex<Option<WindowsJobObject>>>,
     ready: Arc<AtomicBool>,
     bootstrap_token: Arc<Mutex<Option<String>>>,
 }
@@ -353,6 +462,8 @@ impl CliProcessManager {
         Self {
             status: Arc::new(Mutex::new(CliStatus::default())),
             child: Arc::new(Mutex::new(None)),
+            #[cfg(windows)]
+            job: Arc::new(Mutex::new(None)),
             ready: Arc::new(AtomicBool::new(false)),
             bootstrap_token: Arc::new(Mutex::new(None)),
         }
@@ -375,6 +486,8 @@ impl CliProcessManager {
 
         let status_arc = self.status.clone();
         let child_arc = self.child.clone();
+        #[cfg(windows)]
+        let job_arc = self.job.clone();
         let ready_flag = self.ready.clone();
         let token_arc = self.bootstrap_token.clone();
         thread::spawn(move || {
@@ -382,6 +495,8 @@ impl CliProcessManager {
                 app.clone(),
                 status_arc.clone(),
                 child_arc,
+                #[cfg(windows)]
+                job_arc,
                 ready_flag,
                 token_arc,
                 dev,
@@ -401,11 +516,12 @@ impl CliProcessManager {
     }
 
     pub fn stop(&self) -> anyhow::Result<()> {
+        #[cfg(windows)]
+        let _job = self.job.lock().take();
+
         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;
@@ -427,18 +543,16 @@ impl CliProcessManager {
                     Ok(Some(_)) => break,
                     Ok(None) => {
                         #[cfg(windows)]
-                        if !forced_tree_shutdown
-                            && start.elapsed() > Duration::from_millis(CLI_WINDOWS_FORCE_GRACE_MS)
-                        {
+                        if 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();
                             }
+                            break;
                         }
 
                         if start.elapsed() > Duration::from_secs(CLI_STOP_GRACE_SECS) {
@@ -457,11 +571,7 @@ impl CliProcessManager {
                             }
                             #[cfg(windows)]
                             {
-                                if !forced_tree_shutdown
-                                    && !kill_process_tree_windows(child.id(), true)
-                                {
-                                    let _ = child.kill();
-                                } else if forced_tree_shutdown {
+                                if !kill_process_tree_windows(child.id(), true) {
                                     let _ = child.kill();
                                 }
                             }
@@ -472,6 +582,9 @@ impl CliProcessManager {
                     Err(_) => break,
                 }
             }
+        } else {
+            #[cfg(windows)]
+            log_line("tracked CLI process already exited; dropping Windows job object to reap descendants");
         }
 
         let mut status = self.status.lock();
@@ -492,6 +605,7 @@ impl CliProcessManager {
         app: AppHandle,
         status: Arc<Mutex<CliStatus>>,
         child_holder: Arc<Mutex<Option<Child>>>,
+        #[cfg(windows)] job_holder: Arc<Mutex<Option<WindowsJobObject>>>,
         ready: Arc<AtomicBool>,
         bootstrap_token: Arc<Mutex<Option<String>>>,
         dev: bool,
@@ -503,7 +617,8 @@ impl CliProcessManager {
             "resolved CLI entry runner={:?} entry={} host={}",
             resolution.runner, resolution.entry, host
         ));
-        let args = resolution.build_args(dev, &host);
+        let auth_cookie_name = Arc::new(generate_auth_cookie_name());
+        let args = resolution.build_args(dev, &host, auth_cookie_name.as_str());
         log_line(&format!("CLI args: {:?}", args));
         if dev {
             log_line("development mode: will prefer tsx + source if present");
@@ -514,7 +629,16 @@ impl CliProcessManager {
             log_line(&format!("using cwd={}", c.display()));
         }
 
-        let command_info = if supports_user_shell() {
+        let use_user_shell = supports_user_shell();
+
+        if !use_user_shell && which::which(&resolution.node_binary).is_err() {
+            return Err(anyhow::anyhow!(
+                "Node binary '{}' not found. CodeNomad desktop currently requires Node.js installed on the system, or set NODE_BINARY to a valid runtime path.",
+                resolution.node_binary
+            ));
+        }
+
+        let command_info = if use_user_shell {
             log_line("spawning via user shell");
             ShellCommandType::UserShell(build_shell_command_string(&resolution, &args)?)
         } else {
@@ -525,20 +649,14 @@ impl CliProcessManager {
             })
         };
 
-        if !supports_user_shell() {
-            if which::which(&resolution.node_binary).is_err() {
-                return Err(anyhow::anyhow!(
-                    "Node binary not found. Make sure Node.js is installed."
-                ));
-            }
-        }
-
         let child = match &command_info {
             ShellCommandType::UserShell(cmd) => {
                 log_line(&format!("spawn command: {} {:?}", cmd.shell, cmd.args));
                 let mut c = Command::new(&cmd.shell);
                 c.args(&cmd.args)
                     .env("ELECTRON_RUN_AS_NODE", "1")
+                    .env_remove("npm_config_prefix")
+                    .env_remove("NPM_CONFIG_PREFIX")
                     .stdout(Stdio::piped())
                     .stderr(Stdio::piped());
                 configure_spawn(&mut c);
@@ -568,6 +686,22 @@ impl CliProcessManager {
 
         let pid = child.id();
         log_line(&format!("spawned pid={pid}"));
+        #[cfg(windows)]
+        match WindowsJobObject::create().and_then(|job| {
+            job.assign_child(&child)?;
+            Ok(job)
+        }) {
+            Ok(job) => {
+                log_line(&format!("attached pid={pid} to Windows job object"));
+                *job_holder.lock() = Some(job);
+            }
+            Err(err) => {
+                log_line(&format!(
+                    "failed to attach pid={pid} to Windows job object; falling back to taskkill-only cleanup: {err}"
+                ));
+            }
+        }
+
         {
             let mut locked = status.lock();
             locked.pid = Some(pid);
@@ -584,6 +718,7 @@ impl CliProcessManager {
         let app_clone = app.clone();
         let ready_clone = ready.clone();
         let token_clone = bootstrap_token.clone();
+        let auth_cookie_name_clone = auth_cookie_name.clone();
 
         thread::spawn(move || {
             let stdout = child_clone
@@ -598,24 +733,41 @@ impl CliProcessManager {
                 .map(BufReader::new);
 
             if let Some(reader) = stdout {
-                Self::process_stream(
-                    reader,
-                    "stdout",
-                    &app_clone,
-                    &status_clone,
-                    &ready_clone,
-                    &token_clone,
-                );
+                let app = app_clone.clone();
+                let status = status_clone.clone();
+                let ready = ready_clone.clone();
+                let token = token_clone.clone();
+                let auth_cookie_name = auth_cookie_name_clone.clone();
+                thread::spawn(move || {
+                    Self::process_stream(
+                        reader,
+                        "stdout",
+                        &app,
+                        &status,
+                        &ready,
+                        &token,
+                        auth_cookie_name.as_str(),
+                    );
+                });
             }
+
             if let Some(reader) = stderr {
-                Self::process_stream(
-                    reader,
-                    "stderr",
-                    &app_clone,
-                    &status_clone,
-                    &ready_clone,
-                    &token_clone,
-                );
+                let app = app_clone.clone();
+                let status = status_clone.clone();
+                let ready = ready_clone.clone();
+                let token = token_clone.clone();
+                let auth_cookie_name = auth_cookie_name_clone.clone();
+                thread::spawn(move || {
+                    Self::process_stream(
+                        reader,
+                        "stderr",
+                        &app,
+                        &status,
+                        &ready,
+                        &token,
+                        auth_cookie_name.as_str(),
+                    );
+                });
             }
         });
 
@@ -623,6 +775,8 @@ impl CliProcessManager {
         let status_clone = status.clone();
         let ready_clone = ready.clone();
         let child_holder_clone = child_holder.clone();
+        #[cfg(windows)]
+        let job_holder_clone = job_holder.clone();
         thread::spawn(move || {
             let timeout = Duration::from_secs(60);
             thread::sleep(timeout);
@@ -677,6 +831,10 @@ impl CliProcessManager {
                             // Drop the handle after the process exits so other callers
                             // don't attempt to stop/kill a finished process.
                             *guard = None;
+                            #[cfg(windows)]
+                            {
+                                let _ = job_holder_clone.lock().take();
+                            }
                             Some(status)
                         }
                         None => None,
@@ -731,10 +889,11 @@ impl CliProcessManager {
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
         bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
     ) {
         let mut buffer = String::new();
-        let local_url_regex = Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)").ok();
-        let http_regex = Regex::new(r":(\d{2,5})(?!.*:\d)").ok();
+        let local_url_regex =
+            Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)\s*$").ok();
         let token_prefix = "CODENOMAD_BOOTSTRAP_TOKEN:";
 
         loop {
@@ -761,44 +920,32 @@ impl CliProcessManager {
                             continue;
                         }
 
+                        if let Some(node_binary) = line.strip_prefix(MISSING_NODE_PREFIX) {
+                            let mut locked = status.lock();
+                            if locked.error.is_none() {
+                                locked.error = Some(format!(
+                                    "Node binary '{}' not found in the desktop shell environment. CodeNomad desktop currently requires Node.js installed on the system, or set NODE_BINARY to a valid runtime path.",
+                                    node_binary.trim()
+                                ));
+                            }
+                            continue;
+                        }
+
                         if let Some(url) = local_url_regex
                             .as_ref()
                             .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
                             .map(|m| m.as_str().to_string())
                         {
-                            Self::mark_ready(app, status, ready, bootstrap_token, url);
+                            Self::mark_ready(
+                                app,
+                                status,
+                                ready,
+                                bootstrap_token,
+                                auth_cookie_name,
+                                url,
+                            );
                             continue;
                         }
-
-                        if line.to_lowercase().contains("http server listening") {
-                            if let Some(port) = http_regex
-                                .as_ref()
-                                .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
-                                .and_then(|m| m.as_str().parse::<u16>().ok())
-                            {
-                                Self::mark_ready(
-                                    app,
-                                    status,
-                                    ready,
-                                    bootstrap_token,
-                                    format!("http://localhost:{port}"),
-                                );
-                                continue;
-                            }
-
-                            if let Ok(value) = serde_json::from_str::<serde_json::Value>(line) {
-                                if let Some(port) = value.get("port").and_then(|p| p.as_u64()) {
-                                    Self::mark_ready(
-                                        app,
-                                        status,
-                                        ready,
-                                        bootstrap_token,
-                                        format!("http://localhost:{}", port),
-                                    );
-                                    continue;
-                                }
-                            }
-                        }
                     }
                 }
                 Err(_) => break,
@@ -811,6 +958,7 @@ impl CliProcessManager {
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
         bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
         base_url: String,
     ) {
         ready.store(true, Ordering::SeqCst);
@@ -834,9 +982,11 @@ impl CliProcessManager {
             if scheme.as_deref() != Some("http") {
                 navigate_main(app, &base_url);
             } else {
-                match exchange_bootstrap_token(&base_url, &token) {
+                match exchange_bootstrap_token(&base_url, &token, &auth_cookie_name) {
                     Ok(Some(session_id)) => {
-                        if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
+                        if let Err(err) =
+                            set_session_cookie(app, &base_url, &auth_cookie_name, &session_id)
+                        {
                             log_line(&format!("failed to set session cookie: {err}"));
                             navigate_main(app, &format!("{base_url}/login"));
                         } else {
@@ -932,12 +1082,15 @@ impl CliEntry {
         ))
     }
 
-    fn build_args(&self, dev: bool, host: &str) -> Vec<String> {
+    fn build_args(&self, dev: bool, host: &str, auth_cookie_name: &str) -> Vec<String> {
         let mut args = vec![
             "serve".to_string(),
             "--host".to_string(),
             host.to_string(),
+            "--auth-cookie-name".to_string(),
+            auth_cookie_name.to_string(),
             "--generate-token".to_string(),
+            "--unrestricted-root".to_string(),
         ];
 
         if dev {
@@ -993,27 +1146,58 @@ impl CliEntry {
 }
 
 fn resolve_tsx(_app: &AppHandle) -> Option<String> {
-    let candidates = vec![
-        std::env::current_dir()
-            .ok()
+    let cwd = std::env::current_dir().ok();
+    let workspace = workspace_root();
+    let mut candidates = vec![
+        cwd.as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.js")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.js")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.js")),
+        workspace
+            .as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
+        workspace
+            .as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
+        workspace
+            .as_ref()
             .map(|p| p.join("node_modules/tsx/dist/cli.js")),
-        std::env::current_exe().ok().and_then(|ex| {
-            ex.parent()
-                .map(|p| p.join("../node_modules/tsx/dist/cli.js"))
-        }),
     ];
 
+    if let Ok(exe) = std::env::current_exe() {
+        if let Some(dir) = exe.parent() {
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.mjs")));
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.cjs")));
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.js")));
+        }
+    }
+
     first_existing(candidates)
 }
 
 fn resolve_dev_entry(_app: &AppHandle) -> Option<String> {
+    let cwd = std::env::current_dir().ok();
+    let workspace = workspace_root();
     let candidates = vec![
-        std::env::current_dir()
-            .ok()
+        workspace
+            .as_ref()
             .map(|p| p.join("packages/server/src/index.ts")),
-        std::env::current_dir()
-            .ok()
-            .map(|p| p.join("../server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("packages/server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("../server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("../../server/src/index.ts")),
     ];
 
     first_existing(candidates)
@@ -1075,7 +1259,13 @@ fn build_shell_command_string(
     for arg in entry.runner_args(cli_args) {
         quoted.push(shell_escape(&arg));
     }
-    let command = format!("ELECTRON_RUN_AS_NODE=1 exec {}", quoted.join(" "));
+    let command = format!(
+        "if command -v {} >/dev/null 2>&1; then ELECTRON_RUN_AS_NODE=1 exec {}; else printf '%s%s\\n' '{}' {} >&2; exit 127; fi",
+        shell_escape(&entry.node_binary),
+        quoted.join(" "),
+        MISSING_NODE_PREFIX,
+        shell_escape(&entry.node_binary),
+    );
     let args = build_shell_args(&shell, &command);
     log_line(&format!("user shell command: {} {:?}", shell, args));
     Ok(ShellCommand { shell, args })
@@ -1115,8 +1305,8 @@ fn build_shell_args(shell: &str, command: &str) -> Vec<String> {
         .unwrap_or("")
         .to_lowercase();
 
-    if shell_name.contains("zsh") {
-        vec!["-l".into(), "-i".into(), "-c".into(), command.into()]
+    if shell_name.contains("zsh") || shell_name.contains("bash") {
+        vec!["-i".into(), "-l".into(), "-c".into(), command.into()]
     } else {
         vec!["-l".into(), "-c".into(), command.into()]
     }

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

@@ -6,13 +6,16 @@ use cli_manager::{CliProcessManager, CliStatus};
 use keepawake::KeepAwake;
 use serde::Deserialize;
 use serde_json::json;
+use std::collections::HashMap;
 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::{
+    AppHandle, Emitter, Manager, Runtime, WebviewUrl, WebviewWindowBuilder, WindowEvent, Wry,
+};
 use tauri_plugin_global_shortcut::{
     Code as ShortcutCode, GlobalShortcutExt, Shortcut, ShortcutState,
 };
@@ -30,7 +33,7 @@ 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 ZOOM_STEP: f64 = 0.1;
 const MIN_ZOOM_LEVEL: f64 = 0.2;
 const MAX_ZOOM_LEVEL: f64 = 5.0;
 
@@ -41,6 +44,16 @@ pub struct AppState {
     pub manager: CliProcessManager,
     pub wake_lock: Mutex<Option<KeepAwake>>,
     pub zoom_level: Mutex<f64>,
+    pub remote_origins: Mutex<HashMap<String, String>>,
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct RemoteWindowPayload {
+    id: String,
+    name: String,
+    base_url: String,
+    skip_tls_verify: bool,
 }
 
 #[derive(Debug, Default, Deserialize)]
@@ -118,11 +131,32 @@ fn should_allow_internal(url: &Url) -> bool {
     }
 }
 
-fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
+fn should_allow_window_origin<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    window_label: &str,
+    url: &Url,
+) -> bool {
     if should_allow_internal(url) {
         return true;
     }
 
+    let state = app_handle.state::<AppState>();
+    let Ok(allowed) = state.remote_origins.lock() else {
+        return false;
+    };
+    if let Some(origin) = allowed.get(window_label) {
+        return origin == &url.origin().ascii_serialization();
+    }
+
+    false
+}
+
+fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
+    let window_label = webview.label().to_string();
+    if should_allow_window_origin(&webview.app_handle(), &window_label, url) {
+        return true;
+    }
+
     if let Err(err) = webview
         .app_handle()
         .opener()
@@ -133,6 +167,58 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
     false
 }
 
+#[tauri::command]
+fn open_remote_window(app: AppHandle, payload: RemoteWindowPayload) -> Result<(), String> {
+    if payload.skip_tls_verify && payload.base_url.starts_with("https://") {
+        return Err(
+            "Tauri cannot bypass self-signed HTTPS certificates automatically yet. Trust the certificate in your OS first, then reconnect, or use the CodeNomad Electron app."
+                .to_string(),
+        );
+    }
+
+    let parsed = Url::parse(&payload.base_url).map_err(|err| err.to_string())?;
+    let label = format!("remote-{}", payload.id);
+    let title = format!(
+        "{} - {}",
+        payload.name,
+        parsed.host_str().unwrap_or(payload.base_url.as_str())
+    );
+
+    if let Some(existing) = app.get_webview_window(&label) {
+        let _ = existing.navigate(parsed.clone());
+        let _ = existing.set_title(&title);
+        let _ = existing.show();
+        let _ = existing.unminimize();
+        let _ = existing.set_focus();
+        return Ok(());
+    }
+
+    app.state::<AppState>()
+        .remote_origins
+        .lock()
+        .map_err(|err| err.to_string())?
+        .insert(label.clone(), parsed.origin().ascii_serialization());
+
+    let window =
+        WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::External(parsed.clone()))
+            .title(title)
+            .inner_size(1400.0, 900.0)
+            .min_inner_size(800.0, 600.0)
+            .build()
+            .map_err(|err| err.to_string())?;
+
+    let app_handle = app.clone();
+    window.on_window_event(move |event| {
+        if let WindowEvent::Destroyed = event {
+            if let Ok(mut origins) = app_handle.state::<AppState>().remote_origins.lock() {
+                origins.remove(&label);
+            }
+        }
+    });
+
+    Ok(())
+}
+
 fn collect_directory_paths(paths: &[std::path::PathBuf]) -> Vec<String> {
     paths
         .iter()
@@ -286,6 +372,7 @@ fn main() {
             manager: CliProcessManager::new(),
             wake_lock: Mutex::new(None),
             zoom_level: Mutex::new(DEFAULT_ZOOM_LEVEL),
+            remote_origins: Mutex::new(HashMap::new()),
         })
         .setup(|app| {
             set_windows_app_user_model_id();
@@ -323,7 +410,8 @@ fn main() {
             cli_get_status,
             cli_restart,
             wake_lock_start,
-            wake_lock_stop
+            wake_lock_stop,
+            open_remote_window
         ])
         .on_menu_event(|app_handle, event| {
             match event.id().0.as_str() {
@@ -455,11 +543,24 @@ fn main() {
                 event: tauri::WindowEvent::CloseRequested { api, .. },
                 ..
             } => {
-                // Ensure we have time to stop the CLI process before the app exits.
+                // Let windows close normally. App shutdown is handled only after the
+                // last window is actually gone so remote windows can outlive `main`.
+                let _ = api;
+            }
+            tauri::RunEvent::WindowEvent {
+                event: tauri::WindowEvent::Destroyed,
+                ..
+            } => {
+                if !app_handle.webview_windows().is_empty() {
+                    return;
+                }
+
+                // Stop the CLI only when the final window is gone and the app is
+                // truly exiting.
                 if QUIT_REQUESTED.swap(true, Ordering::SeqCst) {
                     return;
                 }
-                api.prevent_close();
+
                 let app = app_handle.clone();
                 std::thread::spawn(move || {
                     if let Some(state) = app.try_state::<AppState>() {

packages/tauri-app/src-tauri/tauri.conf.json

@@ -1,17 +1,15 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "CodeNomad",
-  "version": "0.12.3",
+  "version": "0.14.0",
   "identifier": "ai.neuralnomads.codenomad.client",
   "build": {
     "beforeDevCommand": "npm run dev:bootstrap",
     "beforeBuildCommand": "npm run bundle:server",
     "frontendDist": "resources/ui-loading"
   },
-
- 
-
   "app": {
+    "enableGTKAppId": true,
     "withGlobalTauri": true,
     "windows": [
       {
@@ -33,18 +31,61 @@
     ],
     "security": {
       "assetProtocol": {
-        "scope": ["**"]
+        "scope": [
+          "**"
+        ]
       },
-      "capabilities": ["main-window-native-dialogs"]
+      "capabilities": [
+        "main-window-native-dialogs"
+      ]
     }
   },
   "bundle": {
     "active": true,
+    "linux": {
+      "appimage": {
+        "files": {
+          "/usr/share/applications/ai.neuralnomads.codenomad.client.desktop": "icons/linux/ai.neuralnomads.codenomad.client.desktop"
+        }
+      },
+      "deb": {
+        "files": {
+          "/usr/share/applications/ai.neuralnomads.codenomad.client.desktop": "icons/linux/ai.neuralnomads.codenomad.client.desktop",
+          "/usr/share/icons/hicolor/32x32/apps/codenomad-tauri.png": "icons/linux/32x32.png",
+          "/usr/share/icons/hicolor/48x48/apps/codenomad-tauri.png": "icons/linux/48x48.png",
+          "/usr/share/icons/hicolor/64x64/apps/codenomad-tauri.png": "icons/linux/64x64.png",
+          "/usr/share/icons/hicolor/128x128/apps/codenomad-tauri.png": "icons/linux/128x128.png",
+          "/usr/share/icons/hicolor/256x256/apps/codenomad-tauri.png": "icons/linux/256x256.png",
+          "/usr/share/icons/hicolor/512x512/apps/codenomad-tauri.png": "icons/linux/512x512.png"
+        }
+      },
+      "rpm": {
+        "files": {
+          "/usr/share/applications/ai.neuralnomads.codenomad.client.desktop": "icons/linux/ai.neuralnomads.codenomad.client.desktop",
+          "/usr/share/icons/hicolor/32x32/apps/codenomad-tauri.png": "icons/linux/32x32.png",
+          "/usr/share/icons/hicolor/48x48/apps/codenomad-tauri.png": "icons/linux/48x48.png",
+          "/usr/share/icons/hicolor/64x64/apps/codenomad-tauri.png": "icons/linux/64x64.png",
+          "/usr/share/icons/hicolor/128x128/apps/codenomad-tauri.png": "icons/linux/128x128.png",
+          "/usr/share/icons/hicolor/256x256/apps/codenomad-tauri.png": "icons/linux/256x256.png",
+          "/usr/share/icons/hicolor/512x512/apps/codenomad-tauri.png": "icons/linux/512x512.png"
+        }
+      }
+    },
     "resources": [
       "resources/server",
       "resources/ui-loading"
     ],
-    "icon": ["icon.icns", "icon.ico", "icon.png"],
-    "targets": ["app", "appimage", "deb", "rpm", "nsis"]
+    "icon": [
+      "icon.icns",
+      "icon.ico",
+      "icon.png"
+    ],
+    "targets": [
+      "app",
+      "appimage",
+      "deb",
+      "rpm",
+      "nsis"
+    ]
   }
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "private": true,
   "license": "MIT",
   "type": "module",

packages/ui/src/App.tsx

@@ -10,7 +10,10 @@ 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 { SideCarPickerDialog } from "./components/sidecar-picker-dialog"
+import { SideCarView } from "./components/sidecar-view"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
+import { showAlertDialog } from "./stores/alerts"
 import { initGithubStars } from "./stores/github-stars"
 
 import { useCommands } from "./lib/hooks/use-commands"
@@ -23,7 +26,6 @@ import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
 import { setWakeLockDesired } from "./lib/native/wake-lock"
 import {
-  hasInstances,
   isSelectingFolder,
   setIsSelectingFolder,
   showFolderSelection,
@@ -33,10 +35,7 @@ import { useConfig } from "./stores/preferences"
 import {
   createInstance,
   instances,
-  activeInstanceId,
-  setActiveInstanceId,
   stopInstance,
-  getActiveInstance,
   disconnectedInstance,
   acknowledgeDisconnectedInstance,
 } from "./stores/instances"
@@ -53,6 +52,22 @@ import {
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
 import { openSettings } from "./stores/settings-screen"
+import {
+  closeSidecarTab,
+  ensureSidecarsLoaded,
+  openSidecarTab,
+} from "./stores/sidecars"
+import {
+  activeAppTab,
+  activeAppTabId,
+  appTabs,
+  ensureActiveAppTab,
+  getAdjacentAppTabId,
+  getAppTabById,
+  selectAppTab,
+  selectInstanceTab,
+  selectSidecarTab,
+} from "./stores/app-tabs"
 
 const log = getLogger("actions")
 
@@ -77,6 +92,7 @@ const App: Component = () => {
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
+  const [sidecarPickerOpen, setSidecarPickerOpen] = createSignal(false)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
   const isPhoneLayout = createMemo(() => phoneQuery())
@@ -206,8 +222,7 @@ const App: Component = () => {
   })
 
   createEffect(() => {
-    instances()
-    hasInstances()
+    appTabs()
     requestAnimationFrame(() => updateInstanceTabBarHeight())
   })
 
@@ -219,7 +234,15 @@ const App: Component = () => {
     onCleanup(() => window.removeEventListener("resize", handleResize))
   })
 
-  const activeInstance = createMemo(() => getActiveInstance())
+  createEffect(() => {
+    appTabs()
+    ensureActiveAppTab()
+  })
+
+  const activeInstance = createMemo(() => {
+    const tab = activeAppTab()
+    return tab?.kind === "instance" ? tab.instance : null
+  })
   const activeSessionIdForInstance = createMemo(() => {
     const instance = activeInstance()
     if (!instance) return null
@@ -244,6 +267,7 @@ const App: Component = () => {
       recordWorkspaceLaunch(folderPath, selectedBinary)
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
+      selectInstanceTab(instanceId)
       setShowFolderSelection(false)
 
       log.info("Created instance", {
@@ -270,8 +294,27 @@ const App: Component = () => {
   }
 
   function handleNewInstanceRequest() {
-    if (hasInstances()) {
-      setShowFolderSelection(true)
+    setShowFolderSelection(true)
+  }
+
+  function handleOpenSidecarPicker() {
+    setSidecarPickerOpen(true)
+    void ensureSidecarsLoaded()
+  }
+
+  async function handleOpenSidecar(sidecarId: string) {
+    try {
+      const tab = await openSidecarTab(sidecarId)
+      selectSidecarTab(tab.token)
+      setShowFolderSelection(false)
+      setSidecarPickerOpen(false)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      showAlertDialog(message, {
+        variant: "error",
+        title: t("sidecars.open.errorTitle"),
+      })
+      log.error("Failed to open SideCar", error)
     }
   }
 
@@ -332,6 +375,23 @@ const App: Component = () => {
     }
   }
 
+  async function handleCloseAppTab(tabId: string) {
+    const tab = getAppTabById(tabId)
+    if (!tab) return
+
+    const fallbackTabId = activeAppTabId() === tabId ? getAdjacentAppTabId(tabId) : activeAppTabId()
+
+    if (tab.kind === "instance") {
+      await handleCloseInstance(tab.instance.id)
+    } else {
+      closeSidecarTab(tab.sidecarTab.token)
+    }
+
+    if (!getAppTabById(tabId)) {
+      ensureActiveAppTab(fallbackTabId)
+    }
+  }
+
   const handleSidebarAgentChange = async (instanceId: string, sessionId: string, agent: string) => {
     if (!instanceId || !sessionId || sessionId === "info") return
     await updateSessionAgent(instanceId, sessionId, agent)
@@ -361,6 +421,7 @@ const App: Component = () => {
     setThinkingBlocksExpansion,
     setToolInputsVisibility,
     handleNewInstanceRequest,
+    handleCloseActiveTab: () => handleCloseAppTab(activeAppTabId() ?? ""),
     handleCloseInstance,
     handleNewSession,
     handleCloseSession,
@@ -371,6 +432,7 @@ const App: Component = () => {
   useAppLifecycle({
     setEscapeInDebounce,
     handleNewInstanceRequest,
+    handleCloseActiveTab: () => handleCloseAppTab(activeAppTabId() ?? ""),
     handleCloseInstance,
     handleNewSession,
     handleCloseSession,
@@ -470,52 +532,60 @@ const App: Component = () => {
           </div>
         </Show>
         <Show
-          when={!hasInstances()}
+          when={appTabs().length === 0}
           fallback={
             <>
               <Show when={!isPhoneLayout() || !mobileFullscreenMode()}>
                 <InstanceTabs
-                  instances={instances()}
-                  activeInstanceId={activeInstanceId()}
-                  onSelect={setActiveInstanceId}
-                  onClose={handleCloseInstance}
+                  tabs={appTabs()}
+                  activeTabId={activeAppTabId()}
+                  onSelect={selectAppTab}
+                  onClose={(tabId) => void handleCloseAppTab(tabId)}
                   onNew={handleNewInstanceRequest}
                 />
               </Show>
- 
-              <For each={Array.from(instances().values())}>
-                {(instance) => {
-                  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}
-                            tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
-                            mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
-                            onEnterMobileFullscreen={() => void enterMobileFullscreen()}
-                            onExitMobileFullscreen={() => void exitMobileFullscreen()}
-                          />
-                        </InstanceMetadataProvider>
-
-                      </div>
-                    )
 
+              <For each={appTabs()}>
+                {(tab) => {
+                  const isVisible = () => activeAppTabId() === tab.id && !showFolderSelection()
+                  return tab.kind === "instance" ? (
+                    <div
+                      class="flex-1 min-h-0 overflow-hidden"
+                      style={{ display: isVisible() ? "flex" : "none" }}
+                      data-instance-id={tab.instance.id}
+                      data-tab-id={tab.id}
+                      data-tab-kind={tab.kind}
+                      data-tab-visible={isVisible() ? "true" : "false"}
+                    >
+                      <InstanceMetadataProvider instance={tab.instance}>
+                        <InstanceShell
+                          instance={tab.instance}
+                          isActiveInstance={isVisible()}
+                          escapeInDebounce={escapeInDebounce()}
+                          paletteCommands={paletteCommands}
+                          onCloseSession={(sessionId) => handleCloseSession(tab.instance.id, sessionId)}
+                          onNewSession={() => handleNewSession(tab.instance.id)}
+                          handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(tab.instance.id, sessionId, agent)}
+                          handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(tab.instance.id, sessionId, model)}
+                          onExecuteCommand={executeCommand}
+                          tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
+                          mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
+                          onEnterMobileFullscreen={() => void enterMobileFullscreen()}
+                          onExitMobileFullscreen={() => void exitMobileFullscreen()}
+                        />
+                      </InstanceMetadataProvider>
+                    </div>
+                  ) : (
+                    <div
+                      class="flex-1 min-h-0 overflow-hidden"
+                      style={{ display: isVisible() ? "flex" : "none" }}
+                      data-tab-id={tab.id}
+                      data-tab-kind={tab.kind}
+                      data-tab-visible={isVisible() ? "true" : "false"}
+                    >
+                      <SideCarView tab={tab.sidecarTab} />
+                    </div>
+                  )
                 }}
               </For>
 
@@ -525,6 +595,7 @@ const App: Component = () => {
           <FolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
+            onOpenSidecar={handleOpenSidecarPicker}
           />
         </Show>
 
@@ -534,6 +605,7 @@ const App: Component = () => {
               <FolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
+                onOpenSidecar={handleOpenSidecarPicker}
                 onClose={() => {
                   setShowFolderSelection(false)
                   clearLaunchError()
@@ -544,6 +616,7 @@ const App: Component = () => {
         </Show>
  
         <SettingsScreen />
+        <SideCarPickerDialog open={sidecarPickerOpen()} onClose={() => setSidecarPickerOpen(false)} onOpenSidecar={handleOpenSidecar} />
  
         <AlertDialog />
 

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

@@ -108,15 +108,15 @@ const AlertDialog: Component = () => {
             open
             modal
             onOpenChange={(open) => {
-              if (!open) {
+              // Only handle dismiss if dialog is dismissible (default: true)
+              if (!open && payload.dismissible !== false) {
                 dismiss(false, payload)
               }
             }}
           >
             <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}>
+              <Dialog.Overlay class="modal-overlay z-[60]" />
+              <Dialog.Content class="modal-surface fixed left-1/2 top-1/2 z-[1310] w-full max-w-sm -translate-x-1/2 -translate-y-1/2 p-6 border border-base shadow-2xl" tabIndex={-1}>
                    <div class="flex items-start gap-3">
                      <div
                        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
@@ -140,10 +140,11 @@ const AlertDialog: Component = () => {
 
                     <Show when={isPrompt}>
                       <div class="mt-4">
-                        <label class="text-sm font-medium text-secondary">
+                        <label for="prompt-input" class="text-sm font-medium text-secondary">
                           {payload.inputLabel || t("alertDialog.prompt.inputLabel")}
                         </label>
                         <input
+                          id="prompt-input"
                           ref={(el) => {
                             promptInputRef = el
                           }}
@@ -184,11 +185,10 @@ const AlertDialog: Component = () => {
                      >
                        {confirmLabel}
                      </button>
-                   </div>
-                 </Dialog.Content>
-               </div>
-             </Dialog.Portal>
-           </Dialog>
+                    </div>
+                  </Dialog.Content>
+                </Dialog.Portal>
+              </Dialog>
          )
        }}
      </Show>

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

@@ -1,4 +1,4 @@
-import { createMemo, Show, createEffect, onCleanup } from "solid-js"
+import { createMemo, Show, createEffect } 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"
@@ -20,6 +20,7 @@ interface ToolCallDiffViewerProps {
   filePath?: string
   theme: "light" | "dark"
   mode: DiffViewMode
+  wrap?: boolean
   onRendered?: () => void
   cachedHtml?: string
   cacheEntryParams?: CacheEntryParams
@@ -31,11 +32,183 @@ type DiffData = {
   hunks: string[]
 }
 
-type CaptureContext = {
-  theme: ToolCallDiffViewerProps["theme"]
-  mode: DiffViewMode
-  diffText: string
-  cacheEntryParams?: CacheEntryParams
+function measureTextWidth(container: HTMLElement, text: string, source: HTMLElement) {
+  const computed = window.getComputedStyle(source)
+  const probe = document.createElement("span")
+  probe.textContent = text || ""
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.pointerEvents = "none"
+  probe.style.display = "inline-block"
+  probe.style.width = "auto"
+  probe.style.maxWidth = "none"
+  probe.style.whiteSpace = "nowrap"
+  probe.style.fontFamily = computed.fontFamily
+  probe.style.fontSize = computed.fontSize
+  probe.style.fontWeight = computed.fontWeight
+  probe.style.fontStyle = computed.fontStyle
+  probe.style.letterSpacing = computed.letterSpacing
+  probe.style.fontVariant = computed.fontVariant
+  probe.style.textTransform = computed.textTransform
+  probe.style.lineHeight = computed.lineHeight
+  container.appendChild(probe)
+  const width = Math.ceil(probe.getBoundingClientRect().width)
+  probe.remove()
+  return width
+}
+
+function computeCompactWidth(
+  container: HTMLElement,
+  entries: Array<{ text: string; source: HTMLElement }>,
+  maxWidthPx = 40,
+) {
+  const measuredLabelWidthPx = entries.reduce((max, entry) => {
+    return Math.max(max, measureTextWidth(container, entry.text, entry.source))
+  }, 0)
+  const fallbackTextLength = entries.reduce((max, entry) => Math.max(max, entry.text.length), 1)
+  const fallbackWidthPx = Math.round(fallbackTextLength * 7 + 4)
+  return Math.max(2, Math.min(maxWidthPx, measuredLabelWidthPx > 0 ? measuredLabelWidthPx + 2 : fallbackWidthPx))
+}
+
+function applyCompactUnifiedGutter(container: HTMLElement, wrap: boolean) {
+  const tableWrapper = container.querySelector<HTMLElement>(".unified-diff-table-wrapper")
+  const table = container.querySelector<HTMLTableElement>(".unified-diff-table")
+  const numberCol = container.querySelector<HTMLTableColElement>(".unified-diff-table-num-col")
+  const gutterRows = container.querySelectorAll<HTMLElement>(".diff-line-num")
+  const hunkGutters = container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper")
+  const entries: Array<{ gutter: HTMLElement; label: HTMLElement; text: string }> = []
+
+  if (table) {
+    if (wrap) {
+      table.classList.add("table-fixed")
+      table.style.tableLayout = "fixed"
+      table.style.width = "100%"
+      table.style.minWidth = "100%"
+    } else {
+      table.classList.remove("table-fixed")
+      table.style.tableLayout = "auto"
+      table.style.width = "max-content"
+      table.style.minWidth = "100%"
+    }
+  }
+
+  gutterRows.forEach((gutter) => {
+    const oldSpan = gutter.querySelector<HTMLElement>("[data-line-old-num]")
+    const newSpan = gutter.querySelector<HTMLElement>("[data-line-new-num]")
+    const spacer = gutter.querySelector<HTMLElement>(".shrink-0")
+    const flexWrapper = gutter.querySelector<HTMLElement>(":scope > .flex")
+    const currentLabel = gutter.querySelector<HTMLElement>(":scope > .tool-call-diff-compact-line-number")
+
+    const oldText = oldSpan?.textContent?.trim() ?? ""
+    const newText = newSpan?.textContent?.trim() ?? ""
+    const hasUsableNew = newText.length > 0 && newText !== "0"
+    const hasUsableOld = oldText.length > 0 && oldText !== "0"
+    const visibleText = hasUsableNew ? newText : hasUsableOld ? oldText : newText || oldText
+
+    if (flexWrapper) flexWrapper.style.display = "none"
+    if (spacer) spacer.style.display = "none"
+    if (oldSpan) { oldSpan.style.display = "none"; oldSpan.style.width = "auto" }
+    if (newSpan) { newSpan.style.display = "none"; newSpan.style.width = "auto" }
+
+    gutter.style.paddingLeft = "1px"
+    gutter.style.paddingRight = "1px"
+    gutter.style.textAlign = "left"
+
+    const label = currentLabel ?? document.createElement("span")
+    label.className = "tool-call-diff-compact-line-number"
+    label.textContent = visibleText
+    label.setAttribute("aria-hidden", visibleText ? "false" : "true")
+    if (!currentLabel) gutter.appendChild(label)
+
+    entries.push({ gutter, label, text: visibleText })
+  })
+
+  const gutterWidthPx = computeCompactWidth(container, entries.map((entry) => ({ text: entry.text, source: entry.label })))
+  const gutterWidth = `${gutterWidthPx}px`
+  const compactAsideWidth = `${Math.max(8, gutterWidthPx - 10)}px`
+
+  if (tableWrapper) {
+    tableWrapper.style.setProperty("--diff-aside-width", compactAsideWidth)
+    tableWrapper.style.setProperty("--diff-aside-width--", compactAsideWidth)
+  }
+  if (numberCol) {
+    numberCol.style.width = gutterWidth
+  }
+
+  entries.forEach(({ gutter, label }) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    label.style.width = "auto"
+    label.style.maxWidth = "none"
+  })
+
+  hunkGutters.forEach((gutter) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    gutter.style.paddingLeft = "0"
+    gutter.style.paddingRight = "0"
+  })
+}
+
+function applyCompactSplitGutter(container: HTMLElement) {
+  const oldWrapper = container.querySelector<HTMLElement>(".old-diff-table-wrapper")
+  const newWrapper = container.querySelector<HTMLElement>(".new-diff-table-wrapper")
+  const numberCells = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-old-num, .diff-line-new-num"))
+  const hunkActions = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper"))
+  const numberSpans = numberCells
+    .map((cell) => ({ cell, span: cell.querySelector<HTMLElement>("[data-line-num]") }))
+    .filter((entry): entry is { cell: HTMLElement; span: HTMLElement } => Boolean(entry.span))
+
+  const gutterWidthPx = computeCompactWidth(
+    container,
+    numberSpans.map(({ span }) => ({ text: span.textContent?.trim() ?? "", source: span })),
+    64,
+  )
+  const gutterWidth = `${gutterWidthPx}px`
+
+  ;[oldWrapper, newWrapper].forEach((wrapper) => {
+    if (wrapper) {
+      wrapper.style.setProperty("--diff-aside-width", gutterWidth)
+    }
+  })
+
+  numberCells.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "2px"
+    cell.style.paddingRight = "2px"
+    cell.style.textAlign = "left"
+    cell.style.whiteSpace = "nowrap"
+    cell.style.overflowWrap = "normal"
+    cell.style.wordBreak = "normal"
+  })
+
+  numberSpans.forEach(({ span }) => {
+    span.style.whiteSpace = "nowrap"
+    span.style.overflowWrap = "normal"
+    span.style.wordBreak = "normal"
+  })
+
+  hunkActions.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "0"
+    cell.style.paddingRight = "0"
+  })
+}
+
+function applyCompactDiffLayout(container: HTMLElement, mode: DiffViewMode, wrap = false) {
+  if (mode === "unified") {
+    applyCompactUnifiedGutter(container, wrap)
+    return
+  }
+  if (mode === "split") {
+    applyCompactSplitGutter(container)
+  }
 }
 
 export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
@@ -67,12 +240,15 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
   const contextKey = createMemo(() => {
     const data = diffData()
     if (!data) return ""
-    return `${props.theme}|${props.mode}|${props.diffText}`
+    return `${props.theme}|${props.mode}|${props.wrap ? "wrap" : "nowrap"}|${props.diffText}`
   })
  
   createEffect(() => {
     const cachedHtml = props.cachedHtml
     if (cachedHtml) {
+      if (diffContainerRef) {
+        applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
+      }
       // When we are given cached HTML, we rely on the caller's cache
       // and simply notify once rendered.
       props.onRendered?.()
@@ -83,9 +259,10 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
     if (!key) return
     if (!diffContainerRef) return
     if (lastCapturedKey === key) return
- 
+
     requestAnimationFrame(() => {
       if (!diffContainerRef) return
+      applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
       const markup = diffContainerRef.innerHTML
       if (!markup) return
       lastCapturedKey = key
@@ -95,6 +272,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
           html: markup,
           theme: props.theme,
           mode: props.mode,
+          wrap: props.wrap,
         })
       }
       props.onRendered?.()
@@ -122,7 +300,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
                     diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
                     diffViewTheme={props.theme}
                     diffViewHighlight
-                    diffViewWrap={false}
+                    diffViewWrap={Boolean(props.wrap)}
                     diffViewFontSize={13}
                   />
                 </ErrorBoundary>
@@ -131,7 +309,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
           </div>
         }
       >
-        <div innerHTML={props.cachedHtml} />
+        <div ref={diffContainerRef} innerHTML={props.cachedHtml} />
       </Show>
     </div>
   )

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

@@ -1,18 +1,69 @@
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 import { loadMonaco } from "../../lib/monaco/setup"
 import { getOrCreateTextModel } from "../../lib/monaco/model-cache"
 import { inferMonacoLanguageId } from "../../lib/monaco/language"
 import { ensureMonacoLanguageLoaded } from "../../lib/monaco/setup"
 import { useTheme } from "../../lib/theme"
+import { parsePatchToBeforeAfter } from "../../lib/diff-utils"
 
 interface MonacoDiffViewerProps {
   scopeKey: string
   path: string
-  before: string
-  after: string
+  patch?: string
+  before?: string
+  after?: string
   viewMode?: "split" | "unified"
   contextMode?: "expanded" | "collapsed"
   wordWrap?: "on" | "off"
+  onRequestInsertContext?: (selection: { startLine: number; endLine: number }) => void
+  insertContextLabel?: string
+}
+
+function getLineCount(value: string): number {
+  if (!value) return 1
+  return value.split("\n").length
+}
+
+function getDigitCount(value: number): number {
+  return String(Math.max(1, value)).length
+}
+
+function getUnifiedGutterSizing(options: { before: string; after: string }) {
+  const beforeLineCount = getLineCount(options.before)
+  const afterLineCount = getLineCount(options.after)
+  const beforeDigitCount = getDigitCount(beforeLineCount)
+  const afterDigitCount = getDigitCount(afterLineCount)
+  const maxDigitCount = Math.max(beforeDigitCount, afterDigitCount)
+  const extraDigits = Math.max(0, maxDigitCount - 2)
+  const beforeNumberChars = Math.max(2, beforeDigitCount)
+  const afterNumberChars = Math.max(2, afterDigitCount)
+  const fourDigitPenalty = Math.max(0, maxDigitCount - 3)
+
+  return {
+    diffEditorLineNumbersMinChars: Math.max(beforeNumberChars, afterNumberChars),
+    originalLineNumbersMinChars: beforeNumberChars,
+    modifiedLineNumbersMinChars: afterNumberChars,
+    lineDecorationsWidth: 6 + extraDigits * 2 + fourDigitPenalty * 2,
+  }
+}
+
+function getSplitGutterSizing(options: { before: string; after: string }) {
+  const beforeLineCount = getLineCount(options.before)
+  const afterLineCount = getLineCount(options.after)
+  const beforeDigitCount = getDigitCount(beforeLineCount)
+  const afterDigitCount = getDigitCount(afterLineCount)
+  const maxDigitCount = Math.max(beforeDigitCount, afterDigitCount)
+  const extraDigits = Math.max(0, maxDigitCount - 2)
+  const beforeNumberChars = Math.max(2, beforeDigitCount)
+  const afterNumberChars = Math.max(2, afterDigitCount)
+  const fourDigitPenalty = Math.max(0, maxDigitCount - 3)
+
+  return {
+    diffEditorLineNumbersMinChars: Math.max(beforeNumberChars, afterNumberChars),
+    originalLineNumbersMinChars: beforeNumberChars,
+    modifiedLineNumbersMinChars: afterNumberChars,
+    lineDecorationsWidth: 8 + extraDigits * 2 + fourDigitPenalty,
+  }
 }
 
 export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
@@ -21,7 +72,22 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
 
   let diffEditor: any = null
   let monaco: any = null
+  let splitLayoutFrame: number | null = null
   const [ready, setReady] = createSignal(false)
+  const [hoveredLine, setHoveredLine] = createSignal<number | null>(null)
+  const [selectedRange, setSelectedRange] = createSignal<{ startLine: number; endLine: number } | null>(null)
+  const [widgetHovered, setWidgetHovered] = createSignal(false)
+  const [widgetPosition, setWidgetPosition] = createSignal<{ top: number; left: number } | null>(null)
+
+  const resolvedContent = createMemo(() => {
+    if (props.patch !== undefined && props.patch !== null) {
+      return parsePatchToBeforeAfter(props.patch)
+    }
+    return {
+      before: props.before ?? "",
+      after: props.after ?? "",
+    }
+  })
 
   const disposeEditor = () => {
     try {
@@ -37,6 +103,90 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
     diffEditor = null
   }
 
+  const clearSplitLayoutVariables = () => {
+    if (!host) return
+    host.style.removeProperty("--split-original-line-number-width")
+    host.style.removeProperty("--split-original-delete-sign-left")
+    host.style.removeProperty("--split-original-gutter-width")
+  }
+
+  const syncSplitLayoutVariables = (options: {
+    viewMode: "split" | "unified"
+    originalLineNumbersMinChars: number
+    lineDecorationsWidth: number
+  }) => {
+    if (!host) return
+    if (splitLayoutFrame !== null && typeof window !== "undefined") {
+      window.cancelAnimationFrame(splitLayoutFrame)
+      splitLayoutFrame = null
+    }
+    if (options.viewMode !== "split" || typeof window === "undefined") {
+      clearSplitLayoutVariables()
+      return
+    }
+
+    splitLayoutFrame = window.requestAnimationFrame(() => {
+      splitLayoutFrame = null
+      if (!host) return
+      const originalLineNumbers = host.querySelector<HTMLElement>(".editor.original .line-numbers")
+      const measuredWidth = originalLineNumbers?.getBoundingClientRect().width ?? 0
+      const lineNumberWidth =
+        measuredWidth > 0 ? measuredWidth : Math.max(12, options.originalLineNumbersMinChars * 6)
+      host.style.setProperty("--split-original-line-number-width", `${lineNumberWidth}px`)
+      host.style.setProperty("--split-original-delete-sign-left", `${lineNumberWidth}px`)
+      host.style.setProperty(
+        "--split-original-gutter-width",
+        `${lineNumberWidth + options.lineDecorationsWidth}px`,
+      )
+    })
+  }
+
+  const getModifiedEditor = () => diffEditor?.getModifiedEditor?.() ?? null
+
+  const getActiveInsertRange = () => {
+    const selection = selectedRange()
+    if (selection) return selection
+    if (widgetHovered() && hoveredLine()) {
+      return { startLine: hoveredLine() as number, endLine: hoveredLine() as number }
+    }
+    const line = hoveredLine()
+    if (!line) return null
+    return { startLine: line, endLine: line }
+  }
+
+  const layoutInsertWidget = () => {
+    const modifiedEditor = getModifiedEditor()
+    const container = host
+    if (!modifiedEditor || !container) return
+    const activeRange = getActiveInsertRange()
+    if (!activeRange) {
+      setWidgetPosition(null)
+      return
+    }
+
+    try {
+      const modifiedDom = modifiedEditor.getDomNode?.() as HTMLElement | null
+      if (!modifiedDom) {
+        setWidgetPosition(null)
+        return
+      }
+
+      const margin = modifiedDom.querySelector<HTMLElement>(".margin")
+      const scrollable = modifiedDom.querySelector<HTMLElement>(".monaco-scrollable-element.editor-scrollable")
+      const lineTop = modifiedEditor.getTopForLineNumber?.(activeRange.startLine) ?? 0
+      const scrollTop = modifiedEditor.getScrollTop?.() ?? 0
+      const lineHeight = Number(modifiedEditor.getOption?.(monaco.editor.EditorOption.lineHeight) ?? 18)
+      const modifiedRect = modifiedDom.getBoundingClientRect()
+      const containerRect = container.getBoundingClientRect()
+      const seamLeft = modifiedRect.left - containerRect.left + (margin?.offsetWidth ?? scrollable?.offsetLeft ?? 0)
+      const centerTop = modifiedRect.top - containerRect.top + (lineTop - scrollTop) + lineHeight / 2
+
+      setWidgetPosition({ top: centerTop, left: seamLeft })
+    } catch {
+      setWidgetPosition(null)
+    }
+  }
+
   onMount(() => {
     let cancelled = false
     void (async () => {
@@ -69,10 +219,17 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
       })
 
       setReady(true)
+
+      layoutInsertWidget()
     })()
 
     onCleanup(() => {
       cancelled = true
+      if (splitLayoutFrame !== null && typeof window !== "undefined") {
+        window.cancelAnimationFrame(splitLayoutFrame)
+        splitLayoutFrame = null
+      }
+      clearSplitLayoutVariables()
       setReady(false)
       disposeEditor()
     })
@@ -83,15 +240,101 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
     monaco.editor.setTheme(isDark() ? "vs-dark" : "vs")
   })
 
+  createEffect(() => {
+    if (!host) return
+    host.dataset.viewMode = props.viewMode === "split" ? "split" : "unified"
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    const modifiedEditor = diffEditor.getModifiedEditor?.()
+    if (!modifiedEditor?.onDidChangeCursorSelection) return
+
+    const disposable = modifiedEditor.onDidChangeCursorSelection((event: any) => {
+      const selection = event?.selection
+      if (!selection || selection.isEmpty?.()) {
+        setSelectedRange(null)
+        layoutInsertWidget()
+        return
+      }
+      setSelectedRange({
+        startLine: Math.min(selection.startLineNumber, selection.endLineNumber),
+        endLine: Math.max(selection.startLineNumber, selection.endLineNumber),
+      })
+      layoutInsertWidget()
+    })
+
+    onCleanup(() => {
+      try {
+        disposable?.dispose?.()
+      } catch {
+        // ignore
+      }
+    })
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    const modifiedEditor = getModifiedEditor()
+    if (!modifiedEditor?.onMouseMove || !modifiedEditor?.onMouseLeave || !modifiedEditor?.onMouseDown) return
+
+    const moveDisposable = modifiedEditor.onMouseMove((event: any) => {
+      const lineNumber = event?.target?.position?.lineNumber
+      setHoveredLine(typeof lineNumber === "number" ? lineNumber : null)
+      layoutInsertWidget()
+    })
+
+    const leaveDisposable = modifiedEditor.onMouseLeave(() => {
+      if (!widgetHovered()) {
+        setHoveredLine(null)
+      }
+      layoutInsertWidget()
+    })
+
+    const scrollDisposable = modifiedEditor.onDidScrollChange?.(() => {
+      layoutInsertWidget()
+    })
+
+    onCleanup(() => {
+      try {
+        moveDisposable?.dispose?.()
+        leaveDisposable?.dispose?.()
+        scrollDisposable?.dispose?.()
+      } catch {
+        // ignore
+      }
+    })
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    const activeRange = getActiveInsertRange()
+    if (!activeRange) setWidgetPosition(null)
+    layoutInsertWidget()
+  })
+
   createEffect(() => {
     if (!ready() || !monaco || !diffEditor) return
     const viewMode = props.viewMode === "unified" ? "unified" : "split"
     const contextMode = props.contextMode === "collapsed" ? "collapsed" : "expanded"
     const wordWrap = props.wordWrap === "on" ? "on" : "off"
-
+    const { before, after } = resolvedContent()
+    const sizing =
+      viewMode === "unified"
+        ? getUnifiedGutterSizing({ before, after })
+        : getSplitGutterSizing({ before, after })
+    const {
+      diffEditorLineNumbersMinChars,
+      originalLineNumbersMinChars,
+      modifiedLineNumbersMinChars,
+      lineDecorationsWidth,
+    } = sizing
     diffEditor.updateOptions({
       renderSideBySide: viewMode === "split",
       renderSideBySideInlineBreakpoint: 0,
+      renderIndicators: true,
+      lineNumbersMinChars: diffEditorLineNumbersMinChars,
+      lineDecorationsWidth,
       hideUnchangedRegions:
         contextMode === "collapsed"
           ? { enabled: true }
@@ -100,26 +343,41 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
     })
 
     try {
-      diffEditor.getOriginalEditor?.()?.updateOptions?.({ wordWrap })
+      diffEditor.getOriginalEditor?.()?.updateOptions?.({
+        wordWrap,
+        lineNumbersMinChars: originalLineNumbersMinChars,
+        lineDecorationsWidth,
+      })
     } catch {
       // ignore
     }
 
     try {
-      diffEditor.getModifiedEditor?.()?.updateOptions?.({ wordWrap })
+      diffEditor.getModifiedEditor?.()?.updateOptions?.({
+        wordWrap,
+        lineNumbersMinChars: modifiedLineNumbersMinChars,
+        lineDecorationsWidth,
+      })
     } catch {
       // ignore
     }
+
+    syncSplitLayoutVariables({
+      viewMode,
+      originalLineNumbersMinChars,
+      lineDecorationsWidth,
+    })
   })
 
   createEffect(() => {
     if (!ready() || !monaco || !diffEditor) return
     const languageId = inferMonacoLanguageId(monaco, props.path)
+    const { before, after } = resolvedContent()
     const beforeKey = `${props.scopeKey}:diff:${props.path}:before`
     const afterKey = `${props.scopeKey}:diff:${props.path}:after`
 
-    const original = getOrCreateTextModel({ monaco, cacheKey: beforeKey, value: props.before, languageId })
-    const modified = getOrCreateTextModel({ monaco, cacheKey: afterKey, value: props.after, languageId })
+    const original = getOrCreateTextModel({ monaco, cacheKey: beforeKey, value: before, languageId })
+    const modified = getOrCreateTextModel({ monaco, cacheKey: afterKey, value: after, languageId })
     diffEditor.setModel({ original, modified })
 
     void ensureMonacoLanguageLoaded(languageId).then(() => {
@@ -132,5 +390,46 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
     })
   })
 
-  return <div class="monaco-viewer" ref={host} />
+  return (
+    <div class="monaco-viewer" ref={host}>
+      <div class="git-change-context-overlay">
+        <Show when={widgetPosition()}>
+          {(position: () => { top: number; left: number }) => (
+            <div
+              class="git-change-context-widget-host"
+              style={{ top: `${position().top}px`, left: `${position().left}px` }}
+              onMouseEnter={() => {
+                setWidgetHovered(true)
+                layoutInsertWidget()
+              }}
+              onMouseLeave={() => {
+                setWidgetHovered(false)
+                layoutInsertWidget()
+              }}
+            >
+              <button
+                type="button"
+                class="git-change-context-widget"
+                aria-label={props.insertContextLabel ?? "Add git change context to prompt"}
+                title={props.insertContextLabel ?? "Add git change context to prompt"}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  const activeRange = getActiveInsertRange()
+                  if (!activeRange) return
+                  props.onRequestInsertContext?.(activeRange)
+                }}
+              >
+                +
+              </button>
+            </div>
+          )}
+        </Show>
+      </div>
+    </div>
+  )
 }

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

@@ -9,6 +9,8 @@ interface MonacoFileViewerProps {
   scopeKey: string
   path: string
   content: string
+  onSave?: (content: string) => void
+  onContentChange?: (content: string) => void
 }
 
 export function MonacoFileViewer(props: MonacoFileViewerProps) {
@@ -33,6 +35,11 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
     editor = null
   }
 
+  const saveContent = () => {
+    if (!editor || !props.onSave) return
+    props.onSave(editor.getValue())
+  }
+
   onMount(() => {
     let cancelled = false
     void (async () => {
@@ -44,7 +51,7 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
       editor = monaco.editor.create(host, {
         value: "",
         language: "plaintext",
-        readOnly: true,
+        readOnly: false,
         automaticLayout: true,
         lineNumbers: "on",
         minimap: { enabled: false },
@@ -54,6 +61,14 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
         fontSize: 13,
       })
 
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, saveContent)
+
+      editor.onDidChangeModelContent(() => {
+        if (props.onContentChange) {
+          props.onContentChange(editor.getValue())
+        }
+      })
+
       setReady(true)
     })()
 

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

@@ -1,6 +1,7 @@
+import { Dialog } from "@kobalte/core/dialog"
 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 { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2 } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
@@ -14,25 +15,48 @@ 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"
+import { serverApi } from "../lib/api-client"
+import { openRemoteServerWindow } from "../lib/native/remote-window"
 
 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"
 
+type HomeTab = "local" | "servers"
+
 
 interface FolderSelectionViewProps {
   onSelectFolder: (folder: string, binaryPath?: string) => void
+  onOpenSidecar?: () => void
   isLoading?: boolean
   onClose?: () => void
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
-  const { recentFolders, removeRecentFolder, preferences, updatePreferences, serverSettings } = useConfig()
+  const {
+    recentFolders,
+    removeRecentFolder,
+    preferences,
+    updatePreferences,
+    serverSettings,
+    remoteServers,
+    saveRemoteServerProfile,
+    markRemoteServerConnected,
+    removeRemoteServerProfile,
+  } = useConfig()
   const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(serverSettings().opencodeBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
+  const [activeTab, setActiveTab] = createSignal<HomeTab>("local")
+  const [isServerDialogOpen, setIsServerDialogOpen] = createSignal(false)
+  const [serverName, setServerName] = createSignal("")
+  const [serverUrl, setServerUrl] = createSignal("")
+  const [skipTlsVerify, setSkipTlsVerify] = createSignal(false)
+  const [serverDialogError, setServerDialogError] = createSignal<string | null>(null)
+  const [isSavingServer, setIsSavingServer] = createSignal(false)
+  const [connectingServerId, setConnectingServerId] = createSignal<string | null>(null)
   const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
 
@@ -49,10 +73,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   ]
 
   const selectedLanguageOption = () => languageOptions.find((opt) => opt.value === locale()) ?? languageOptions[0]
- 
+  
   const folders = () => recentFolders()
+  const serverList = () => remoteServers()
   const isLoading = () => Boolean(props.isLoading)
 
+  function getActiveListLength() {
+    return activeTab() === "local" ? folders().length : serverList().length
+  }
+
   // Update selected binary when preferences change
   createEffect(() => {
     const lastUsed = serverSettings().opencodeBinary
@@ -64,7 +93,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   function scrollToIndex(index: number) {
     const container = recentListRef
     if (!container) return
-    const element = container.querySelector(`[data-folder-index="${index}"]`) as HTMLElement | null
+    const element = container.querySelector(`[data-list-index="${index}"]`) as HTMLElement | null
     if (!element) return
 
     const containerRect = container.getBoundingClientRect()
@@ -113,19 +142,18 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       return
     }
 
-    const folderList = folders()
-
     if (isBrowseShortcut) {
       e.preventDefault()
       void handleBrowse()
       return
     }
 
-    if (folderList.length === 0) return
+    const listLength = getActiveListLength()
+    if (listLength === 0) return
 
     if (e.key === "ArrowDown") {
       e.preventDefault()
-      const newIndex = Math.min(selectedIndex() + 1, folderList.length - 1)
+      const newIndex = Math.min(selectedIndex() + 1, listLength - 1)
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -138,7 +166,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     } else if (e.key === "PageDown") {
       e.preventDefault()
       const pageSize = 5
-      const newIndex = Math.min(selectedIndex() + pageSize, folderList.length - 1)
+      const newIndex = Math.min(selectedIndex() + pageSize, listLength - 1)
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -156,7 +184,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       scrollToIndex(0)
     } else if (e.key === "End") {
       e.preventDefault()
-      const newIndex = folderList.length - 1
+      const newIndex = listLength - 1
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -165,10 +193,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       handleEnterKey()
     } else if (e.key === "Backspace" || e.key === "Delete") {
       e.preventDefault()
-      if (folderList.length > 0 && focusMode() === "recent") {
-        const folder = folderList[selectedIndex()]
-        if (folder) {
-          handleRemove(folder.path)
+      if (listLength > 0 && focusMode() === "recent") {
+        if (activeTab() === "local") {
+          const folder = folders()[selectedIndex()]
+          if (folder) {
+            handleRemove(folder.path)
+          }
+        } else {
+          const server = serverList()[selectedIndex()]
+          if (server) {
+            removeRemoteServerProfile(server.id)
+          }
         }
       }
     }
@@ -177,15 +212,40 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
   function handleEnterKey() {
     if (isLoading()) return
-    const folderList = folders()
     const index = selectedIndex()
 
-    const folder = folderList[index]
-    if (folder) {
-      handleFolderSelect(folder.path)
+    if (activeTab() === "local") {
+      const folder = folders()[index]
+      if (folder) {
+        handleFolderSelect(folder.path)
+      }
+      return
+    }
+
+    const server = serverList()[index]
+    if (server) {
+      void handleConnectSavedServer(server.id)
     }
   }
 
+  createEffect(() => {
+    activeTab()
+    setSelectedIndex(0)
+    setFocusMode("recent")
+  })
+
+  createEffect(() => {
+    const length = getActiveListLength()
+    if (length === 0) {
+      setSelectedIndex(0)
+      return
+    }
+
+    if (selectedIndex() >= length) {
+      setSelectedIndex(length - 1)
+    }
+  })
+
 
   onMount(() => {
     window.addEventListener("keydown", handleKeyDown)
@@ -236,6 +296,87 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
 
+  function resetServerDialog() {
+    setServerName("")
+    setServerUrl("")
+    setSkipTlsVerify(false)
+    setServerDialogError(null)
+  }
+
+  function openServerDialog() {
+    resetServerDialog()
+    setIsServerDialogOpen(true)
+  }
+
+  async function probeAndOpenServer(input: { id?: string; name: string; baseUrl: string; skipTlsVerify: boolean }, openWindow: boolean) {
+    const trimmedName = input.name.trim()
+    const trimmedUrl = input.baseUrl.trim()
+    if (!trimmedName || !trimmedUrl) {
+      throw new Error(t("folderSelection.servers.dialog.errorRequired"))
+    }
+
+    const probe = await serverApi.probeRemoteServer({
+      baseUrl: trimmedUrl,
+      skipTlsVerify: input.skipTlsVerify,
+    })
+
+    if (!probe.ok) {
+      throw new Error(probe.error || t("folderSelection.servers.dialog.errorConnect"))
+    }
+
+    const profile = await saveRemoteServerProfile({
+      id: input.id,
+      name: trimmedName,
+      baseUrl: probe.normalizedUrl,
+      skipTlsVerify: input.skipTlsVerify,
+    })
+
+    if (openWindow) {
+      await openRemoteServerWindow(profile)
+      await markRemoteServerConnected(profile.id)
+    }
+
+    return profile
+  }
+
+  async function handleSaveServer(openWindow: boolean) {
+    if (isSavingServer()) return
+    setIsSavingServer(true)
+    setServerDialogError(null)
+    try {
+      await probeAndOpenServer(
+        {
+          name: serverName(),
+          baseUrl: serverUrl(),
+          skipTlsVerify: skipTlsVerify(),
+        },
+        openWindow,
+      )
+      setIsServerDialogOpen(false)
+      resetServerDialog()
+    } catch (error) {
+      setServerDialogError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setIsSavingServer(false)
+    }
+  }
+
+  async function handleConnectSavedServer(id: string) {
+    const target = remoteServers().find((entry) => entry.id === id)
+    if (!target || connectingServerId()) return
+    setConnectingServerId(id)
+    try {
+      await probeAndOpenServer(target, true)
+    } catch (error) {
+      showAlertDialog(error instanceof Error ? error.message : String(error), {
+        title: t("folderSelection.servers.errorTitle"),
+        variant: "warning",
+      })
+    } finally {
+      setConnectingServerId(null)
+    }
+  }
+
   async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
@@ -443,7 +584,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 rel="noreferrer"
                 class="selector-button selector-button-secondary w-auto px-3 py-1.5 inline-flex items-center justify-center gap-1.5"
                 aria-label={t("folderSelection.links.githubStars")}
-                title={t("folderSelection.links.githubStars")}
+                title={githubStars() !== null ? `${t("folderSelection.links.githubStars")}: ${githubStars()!.toLocaleString()}` : t("folderSelection.links.githubStars")}
                 onClick={(event) => {
                   event.preventDefault()
                   void openExternalUrl(GITHUB_URL, "folder-selection")
@@ -476,90 +617,223 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             <div class="flex-1 min-h-0 overflow-hidden flex flex-col lg:flex-row gap-4">
               {/* Right column: recent folders */}
               <div class="order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden">
-              <Show
-                when={folders().length > 0}
-                fallback={
-                  <div class="panel panel-empty-state flex-1">
-                    <div class="panel-empty-state-icon">
-                      <Clock class="w-12 h-12 mx-auto" />
-                    </div>
-                    <p class="panel-empty-state-title">{t("folderSelection.empty.title")}</p>
-                    <p class="panel-empty-state-description">{t("folderSelection.empty.description")}</p>
-                  </div>
-                }
-              >
                 <div class="panel flex flex-col flex-1 min-h-0">
-                  <div class="panel-header">
-                    <h2 class="panel-title">{t("folderSelection.recent.title")}</h2>
-                    <p class="panel-subtitle">
-                      {t(
-                        folders().length === 1
-                          ? "folderSelection.recent.subtitle.one"
-                          : "folderSelection.recent.subtitle.other",
-                        { count: folders().length },
-                      )}
-                    </p>
-                  </div>
-                  <div
-                    class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
-                    ref={(el) => (recentListRef = el)}
-                  >
-                    <For each={folders()}>
-                      {(folder, index) => (
+                  <div class="panel-header !gap-0 !p-0">
+                    <div class="grid grid-cols-2 gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none">
+                      <button
+                        type="button"
+                        class="border-r border-base px-4 py-3 text-left transition-colors"
+                        classList={{
+                          "text-primary": activeTab() === "local",
+                          "text-muted hover:text-secondary": activeTab() !== "local",
+                        }}
+                        style={{
+                          "background-color": "var(--surface-secondary)",
+                        }}
+                        onClick={() => setActiveTab("local")}
+                      >
                         <div
-                          class="panel-list-item"
-                          classList={{
-                            "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
-                            "panel-list-item-disabled": isLoading(),
+                          class="panel-title text-base"
+                          style={{
+                            color: activeTab() === "local" ? "var(--text-primary)" : "var(--text-secondary)",
                           }}
                         >
-                          <div class="flex items-center gap-2 w-full px-1">
+                          {t("folderSelection.recent.title")}
+                        </div>
+                        <p
+                          class="panel-subtitle mt-1"
+                          style={{
+                            color: activeTab() === "local" ? "var(--text-muted)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t(
+                            folders().length === 1
+                              ? "folderSelection.recent.subtitle.one"
+                              : "folderSelection.recent.subtitle.other",
+                            { count: folders().length },
+                          )}
+                        </p>
+                      </button>
+                      <button
+                        type="button"
+                        class="px-4 py-3 text-left transition-colors"
+                        classList={{
+                          "text-primary": activeTab() === "servers",
+                          "text-muted hover:text-secondary": activeTab() !== "servers",
+                        }}
+                        style={{
+                          "background-color": "var(--surface-secondary)",
+                        }}
+                        onClick={() => setActiveTab("servers")}
+                      >
+                        <div
+                          class="panel-title text-base"
+                          style={{
+                            color: activeTab() === "servers" ? "var(--text-primary)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t("folderSelection.tabs.servers")}
+                        </div>
+                        <p
+                          class="panel-subtitle mt-1"
+                          style={{
+                            color: activeTab() === "servers" ? "var(--text-muted)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t("folderSelection.servers.count", { count: remoteServers().length })}
+                        </p>
+                      </button>
+                    </div>
+                  </div>
+
+                  <Show
+                    when={activeTab() === "local"}
+                    fallback={
+                      <Show
+                        when={remoteServers().length > 0}
+                        fallback={
+                          <div class="panel-empty-state flex-1">
+                            <div class="panel-empty-state-icon">
+                              <Globe class="w-12 h-12 mx-auto" />
+                            </div>
+                            <p class="panel-empty-state-title">{t("folderSelection.servers.empty.title")}</p>
+                            <p class="panel-empty-state-description">{t("folderSelection.servers.empty.description")}</p>
                             <button
-                              data-folder-index={index()}
-                              class="panel-list-item-content flex-1"
-                              disabled={isLoading()}
-                              onClick={() => handleFolderSelect(folder.path)}
-                              onMouseEnter={() => {
-                                if (isLoading()) return
-                                setFocusMode("recent")
-                                setSelectedIndex(index())
-                              }}
+                              type="button"
+                              class="button-primary mt-4 w-auto self-center inline-flex items-center justify-center gap-2 px-4"
+                              onClick={openServerDialog}
                             >
-                              <div class="flex items-center justify-between gap-3 w-full">
-                                <div class="flex-1 min-w-0">
-                                  <div class="flex items-center gap-2 mb-1">
-                                    <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
-                                    <span class="text-sm font-medium truncate text-primary">
-                                      {splitFolderPath(folder.path).baseName}
-                                    </span>
-                                  </div>
-                                  <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
-                                    <span class="font-mono truncate-start flex-1 min-w-0">
-                                      {getDisplayPath(folder.path)}
-                                    </span>
-                                    <span class="flex-shrink-0">{formatRelativeTime(folder.lastAccessed)}</span>
-                                  </div>
-                                </div>
-                                <Show when={focusMode() === "recent" && selectedIndex() === index()}>
-                                  <kbd class="kbd">↵</kbd>
-                                </Show>
-                              </div>
-                            </button>
-                            <button
-                              onClick={(e) => handleRemove(folder.path, e)}
-                              disabled={isLoading()}
-                              class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
-                              title={t("folderSelection.recent.remove")}
-                            >
-                              <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                              <Globe class="w-4 h-4" />
+                              <span>{t("folderSelection.actions.connectButton")}</span>
                             </button>
                           </div>
+                        }
+                      >
+                        <div
+                          class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
+                          ref={(el) => (recentListRef = el)}
+                        >
+                          <For each={remoteServers()}>
+                            {(server, index) => (
+                              <div
+                                class="panel-list-item"
+                                classList={{
+                                  "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                                }}
+                              >
+                                <div class="flex items-center gap-2 w-full px-1">
+                                  <button
+                                    data-list-index={index()}
+                                    class="panel-list-item-content flex-1"
+                                    onClick={() => void handleConnectSavedServer(server.id)}
+                                    onMouseEnter={() => {
+                                      setFocusMode("recent")
+                                      setSelectedIndex(index())
+                                    }}
+                                  >
+                                    <div class="flex items-center justify-between gap-3 w-full">
+                                      <div class="flex-1 min-w-0 text-left">
+                                        <div class="flex items-center gap-2 mb-1">
+                                          <Globe class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                          <span class="text-sm font-medium truncate text-primary">{server.name}</span>
+                                        </div>
+                                        <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
+                                          <span class="font-mono truncate-start flex-1 min-w-0">{server.baseUrl}</span>
+                                        </div>
+                                      </div>
+                                      <Show when={connectingServerId() === server.id} fallback={<Show when={focusMode() === "recent" && selectedIndex() === index()}><kbd class="kbd">↵</kbd></Show>}>
+                                        <Loader2 class="w-4 h-4 animate-spin icon-muted" />
+                                      </Show>
+                                    </div>
+                                  </button>
+                                  <button
+                                    onClick={() => removeRemoteServerProfile(server.id)}
+                                    class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                    title={t("folderSelection.servers.remove")}
+                                  >
+                                    <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </For>
                         </div>
-                      )}
-                    </For>
-                  </div>
+                      </Show>
+                    }
+                  >
+                    <Show
+                      when={folders().length > 0}
+                      fallback={
+                        <div class="panel-empty-state flex-1">
+                          <div class="panel-empty-state-icon">
+                            <Clock class="w-12 h-12 mx-auto" />
+                          </div>
+                          <p class="panel-empty-state-title">{t("folderSelection.empty.title")}</p>
+                          <p class="panel-empty-state-description">{t("folderSelection.empty.description")}</p>
+                        </div>
+                      }
+                    >
+                      <div
+                        class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
+                        ref={(el) => (recentListRef = el)}
+                      >
+                        <For each={folders()}>
+                          {(folder, index) => (
+                            <div
+                              class="panel-list-item"
+                              classList={{
+                                "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                                "panel-list-item-disabled": isLoading(),
+                              }}
+                            >
+                              <div class="flex items-center gap-2 w-full px-1">
+                                <button
+                                  data-list-index={index()}
+                                  class="panel-list-item-content flex-1"
+                                  disabled={isLoading()}
+                                  onClick={() => handleFolderSelect(folder.path)}
+                                  onMouseEnter={() => {
+                                    if (isLoading()) return
+                                    setFocusMode("recent")
+                                    setSelectedIndex(index())
+                                  }}
+                                >
+                                  <div class="flex items-center justify-between gap-3 w-full">
+                                    <div class="flex-1 min-w-0">
+                                      <div class="flex items-center gap-2 mb-1">
+                                        <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                        <span class="text-sm font-medium truncate text-primary">
+                                          {splitFolderPath(folder.path).baseName}
+                                        </span>
+                                      </div>
+                                      <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
+                                        <span class="font-mono truncate-start flex-1 min-w-0">
+                                          {getDisplayPath(folder.path)}
+                                        </span>
+                                        <span class="flex-shrink-0">{formatRelativeTime(folder.lastAccessed)}</span>
+                                      </div>
+                                    </div>
+                                    <Show when={focusMode() === "recent" && selectedIndex() === index()}>
+                                      <kbd class="kbd">↵</kbd>
+                                    </Show>
+                                  </div>
+                                </button>
+                                <button
+                                  onClick={(e) => handleRemove(folder.path, e)}
+                                  disabled={isLoading()}
+                                  class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                  title={t("folderSelection.recent.remove")}
+                                >
+                                  <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+                  </Show>
                 </div>
-              </Show>
 
               </div>
 
@@ -567,11 +841,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <div class="order-2 lg:order-1 flex flex-col gap-4 flex-1 min-h-0">
               <div class="panel shrink-0">
                 <div class="panel-header hidden sm:block">
-                  <h2 class="panel-title">{t("folderSelection.browse.title")}</h2>
-                  <p class="panel-subtitle">{t("folderSelection.browse.subtitle")}</p>
+                  <h2 class="panel-title">{t("folderSelection.actions.title")}</h2>
+                  <p class="panel-subtitle">{t("folderSelection.actions.subtitle")}</p>
                 </div>
 
-                <div class="panel-body">
+                <div class="panel-body flex flex-col gap-3">
                   <button
                     onClick={() => void handleBrowse()}
                     disabled={props.isLoading}
@@ -588,6 +862,27 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     </div>
                     <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
+
+                  <button
+                    type="button"
+                    onClick={() => props.onOpenSidecar?.()}
+                    class="button-primary mt-3 w-full flex items-center justify-center text-sm"
+                  >
+                    <div class="flex items-center gap-2">
+                      <MonitorUp class="w-4 h-4" />
+                      <span>{t("folderSelection.sidecars.button")}</span>
+                    </div>
+                  </button>
+
+                  <button
+                    onClick={openServerDialog}
+                    class="button-primary w-full flex items-center justify-center text-sm"
+                  >
+                    <div class="flex items-center gap-2">
+                      <Globe class="w-4 h-4" />
+                      <span>{t("folderSelection.actions.connectButton")}</span>
+                    </div>
+                  </button>
                 </div>
 
                 {/* OpenCode settings section */}
@@ -663,6 +958,82 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         onClose={() => setIsFolderBrowserOpen(false)}
         onSelect={handleBrowserSelect}
       />
+
+      <Dialog open={isServerDialogOpen()} onOpenChange={(open) => !open && setIsServerDialogOpen(false)}>
+        <Dialog.Portal>
+          <Dialog.Overlay class="modal-overlay" />
+          <div class="fixed inset-0 z-[1300] flex items-center justify-center p-4">
+            <Dialog.Content class="modal-surface w-full max-w-lg p-6 flex flex-col gap-5" tabIndex={-1}>
+              <div>
+                <Dialog.Title class="text-xl font-semibold text-primary">
+                  {t("folderSelection.servers.dialog.title")}
+                </Dialog.Title>
+                <Dialog.Description class="text-sm text-secondary mt-2">
+                  {t("folderSelection.servers.dialog.description")}
+                </Dialog.Description>
+              </div>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.servers.dialog.name")}</span>
+                <input
+                  class="selector-input w-full"
+                  value={serverName()}
+                  onInput={(event) => setServerName(event.currentTarget.value)}
+                  placeholder={t("folderSelection.servers.dialog.namePlaceholder")}
+                />
+              </label>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.servers.dialog.url")}</span>
+                <input
+                  class="selector-input w-full"
+                  value={serverUrl()}
+                  onInput={(event) => setServerUrl(event.currentTarget.value)}
+                  placeholder={t("folderSelection.servers.dialog.urlPlaceholder")}
+                />
+              </label>
+
+              <label class="flex items-start gap-3 text-sm text-secondary">
+                <input
+                  type="checkbox"
+                  checked={skipTlsVerify()}
+                  onChange={(event) => setSkipTlsVerify(event.currentTarget.checked)}
+                />
+                <span>{t("folderSelection.servers.dialog.skipTls")}</span>
+              </label>
+
+              <Show when={serverDialogError()}>
+                {(message) => <p class="text-sm text-red-500 break-words">{message()}</p>}
+              </Show>
+
+              <div class="flex items-center justify-end gap-3">
+                <button class="selector-button selector-button-secondary w-auto px-4" onClick={() => setIsServerDialogOpen(false)}>
+                  {t("folderSelection.servers.dialog.cancel")}
+                </button>
+                <button
+                  class="selector-button selector-button-secondary w-auto px-4"
+                  disabled={isSavingServer()}
+                  onClick={() => void handleSaveServer(false)}
+                >
+                  {t("folderSelection.servers.dialog.save")}
+                </button>
+                <button
+                  class="selector-button selector-button-secondary w-auto px-4"
+                  disabled={isSavingServer()}
+                  onClick={() => void handleSaveServer(true)}
+                >
+                  <Show when={isSavingServer()} fallback={<span>{t("folderSelection.servers.dialog.connect")}</span>}>
+                    <span class="inline-flex items-center gap-2">
+                      <Loader2 class="w-4 h-4 animate-spin" />
+                      {t("folderSelection.servers.dialog.connecting")}
+                    </span>
+                  </Show>
+                </button>
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog>
     </>
   )
 }

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

@@ -44,6 +44,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
       variant: "warning",
       confirmLabel: t("infoView.dispose.confirm.confirmLabel"),
       cancelLabel: t("infoView.dispose.confirm.cancelLabel"),
+      dismissible: false,
     })
 
     if (!confirmed) return

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

@@ -1,6 +1,5 @@
 import { Component, For, Show, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { Instance } from "../types/instance"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
 import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
@@ -9,12 +8,13 @@ import { useI18n } from "../lib/i18n"
 import { isOsNotificationSupportedSync } from "../lib/os-notifications"
 import { useConfig } from "../stores/preferences"
 import { openSettings } from "../stores/settings-screen"
+import type { AppTabRecord } from "../stores/app-tabs"
 
 interface InstanceTabsProps {
-  instances: Map<string, Instance>
-  activeInstanceId: string | null
-  onSelect: (instanceId: string) => void
-  onClose: (instanceId: string) => void
+  tabs: AppTabRecord[]
+  activeTabId: string | null
+  onSelect: (tabId: string) => void
+  onClose: (tabId: string) => void
   onNew: () => void
 }
 
@@ -42,15 +42,25 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
         <div class="tab-scroll">
           <div class="tab-strip">
             <div class="tab-strip-tabs">
-              <For each={Array.from(props.instances.entries())}>
-                {([id, instance]) => (
-                  <InstanceTab
-                    instance={instance}
-                    active={id === props.activeInstanceId}
-                    onSelect={() => props.onSelect(id)}
-                    onClose={() => props.onClose(id)}
-                  />
-                )}
+              <For each={props.tabs}>
+                {(tab) =>
+                  tab.kind === "instance" ? (
+                    <InstanceTab
+                      instance={tab.instance}
+                      active={tab.id === props.activeTabId}
+                      onSelect={() => props.onSelect(tab.id)}
+                      onClose={() => props.onClose(tab.id)}
+                    />
+                  ) : (
+                    <div class={`tab-pill ${tab.id === props.activeTabId ? "tab-pill-active" : ""}`}>
+                      <button class="tab-pill-button" onClick={() => props.onSelect(tab.id)}>
+                        <span class="truncate max-w-[180px]">{tab.sidecarTab.name}</span>
+                      </button>
+                      <button class="tab-pill-close" onClick={() => props.onClose(tab.id)} aria-label={tab.sidecarTab.name}>
+                        ×
+                      </button>
+                    </div>
+                  )}
               </For>
               <button
                 class="new-tab-button"
@@ -62,7 +72,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               </button>
             </div>
             <div class="tab-strip-spacer" />
-            <Show when={Array.from(props.instances.entries()).length > 1}>
+            <Show when={props.tabs.length > 1}>
               <div class="tab-shortcuts">
                 <KeyboardHint
                   shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(

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

@@ -36,13 +36,14 @@ import { serverApi } from "../../lib/api-client"
 import { loadBackgroundProcesses } from "../../stores/background-processes"
 import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
 import { useI18n } from "../../lib/i18n"
-import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
+import { getPermissionQueue, getPermissionQueueLength, getQuestionQueueLength, sendPermissionResponse } from "../../stores/instances"
 import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
-import { getSessionStatus } from "../../stores/session-status"
+import { getRetrySeconds, getSessionRetry, getSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
+import type { PromptInputApi } from "../prompt-input/types"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -57,6 +58,13 @@ import { useDrawerHostMeasure } from "./shell/useDrawerHostMeasure"
 import { useDrawerResize } from "./shell/useDrawerResize"
 import { useSessionCache } from "./shell/useSessionCache"
 import { useInstanceSessionContext } from "./shell/useInstanceSessionContext"
+import { getPermissionSessionId } from "../../types/permission"
+import {
+  canAutoRespondPermission,
+  finishAutoRespondPermission,
+  getPermissionAutoAcceptInFlightVersion,
+  isPermissionAutoAcceptEnabled,
+} from "../../stores/permission-auto-accept"
 
 const log = getLogger("session")
 
@@ -97,6 +105,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [selectedBackgroundProcess, setSelectedBackgroundProcess] = createSignal<BackgroundProcess | null>(null)
   const [showBackgroundOutput, setShowBackgroundOutput] = createSignal(false)
   const [permissionModalOpen, setPermissionModalOpen] = createSignal(false)
+  const [now, setNow] = createSignal(Date.now())
+  const [sessionPromptApis, setSessionPromptApis] = createSignal<Record<string, PromptInputApi | null>>({})
 
   // Worktree selector manages its own dialogs.
   const [showSessionSearch, setShowSessionSearch] = createSignal(false)
@@ -230,6 +240,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     window.localStorage.setItem(RIGHT_DRAWER_STORAGE_KEY, rightDrawerWidth().toString())
   })
 
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const timer = window.setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => window.clearInterval(timer))
+  })
+
   const connectionStatus = () => sseManager.getStatus(props.instance.id)
   const connectionStatusClass = () => {
     const status = connectionStatus()
@@ -252,6 +268,46 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return permissions + questions > 0
   })
 
+  const permissionQueue = createMemo(() => getPermissionQueue(props.instance.id))
+
+  const activePromptInputApi = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return null
+    return sessionPromptApis()[sessionId] ?? null
+  })
+
+  const registerSessionPromptApi = (sessionId: string, api: PromptInputApi | null) => {
+    setSessionPromptApis((current) => ({
+      ...current,
+      [sessionId]: api,
+    }))
+  }
+
+  createEffect(() => {
+    getPermissionAutoAcceptInFlightVersion()
+
+    for (const permission of permissionQueue()) {
+      const sessionId = getPermissionSessionId(permission)
+      if (!sessionId) continue
+      if (!permission?.id) continue
+      if (!canAutoRespondPermission(props.instance.id, sessionId, permission.id)) continue
+
+      void sendPermissionResponse(props.instance.id, sessionId, permission.id, "once")
+        .catch((error) => {
+          log.error("Failed to auto-accept permission", error)
+        })
+        .finally(() => {
+          finishAutoRespondPermission(props.instance.id, sessionId, permission.id)
+        })
+    }
+  })
+
+  const yoloModeEnabled = createMemo(() => {
+    const session = activeSessionForInstance()
+    if (!session) return false
+    return isPermissionAutoAcceptEnabled(props.instance.id, session.id)
+  })
+
   const activeSessionStatusPill = createMemo(() => {
     const activeSessionId = activeSessionIdForInstance()
     if (!activeSessionId || activeSessionId === "info") return null
@@ -272,17 +328,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     }
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
-    const text =
-      status === "working"
+    const retry = getSessionRetry(props.instance.id, activeSessionId)
+    const text = retry
+      ? (() => {
+          const seconds = getRetrySeconds(retry.next, now())
+          return seconds > 0 ? t("sessionList.status.retryingIn", { seconds: String(seconds) }) : t("sessionList.status.retrying")
+        })()
+      : status === "working"
         ? t("sessionList.status.working")
         : status === "compacting"
           ? t("sessionList.status.compacting")
           : t("sessionList.status.idle")
 
     return {
-      className: `session-${status}`,
+      className: `session-${retry ? "retrying" : status}`,
       text,
       showAlertIcon: false,
+      title: retry
+        ? t("sessionList.status.retryTooltip", {
+            message: retry.message,
+            attempt: String(retry.attempt),
+          })
+        : undefined,
     }
   })
 
@@ -290,13 +357,43 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const pill = activeSessionStatusPill()
     if (!pill) return null
     return (
-      <span class={`status-indicator session-status session-status-list ${pill.className}`}>
+      <span
+        class={`status-indicator session-status session-status-list ${pill.className} notranslate`}
+        title={pill.title}
+        translate="no"
+      >
         {pill.showAlertIcon ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
         {pill.text}
       </span>
     )
   }
 
+  const renderYoloModePill = () => {
+    if (!yoloModeEnabled()) return null
+    return (
+      <span
+        class="status-indicator session-status session-status-list session-yolo-mode"
+        aria-label={t("instanceShell.yoloMode.badgeAriaLabel")}
+        title={t("instanceShell.yoloMode.badgeAriaLabel")}
+      >
+        <span class="status-dot" />
+        {t("instanceShell.yoloMode.badge")}
+      </span>
+    )
+  }
+
+  const renderSessionHeaderIndicators = () => (
+    <div class="flex items-center flex-wrap justify-center gap-2">
+      {renderYoloModePill()}
+      <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
+        <PermissionNotificationBanner
+          instanceId={props.instance.id}
+          onClick={() => setPermissionModalOpen(true)}
+        />
+      </Show>
+    </div>
+  )
+
   const handleCommandPaletteClick = () => {
     showCommandPalette(props.instance.id)
   }
@@ -420,6 +517,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         onClose={closeLeftDrawer}
         ModalProps={modalProps}
         sx={{
+          zIndex: 60,
           "& .MuiDrawer-paper": {
             width: isPhoneLayout() ? "100vw" : `${sessionSidebarWidth()}px`,
             boxSizing: "border-box",
@@ -515,6 +613,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             onCloseRightDrawer={closeRightDrawer}
             onPinRightDrawer={pinRightDrawer}
             onUnpinRightDrawer={unpinRightDrawer}
+            promptInputApi={activePromptInputApi}
             setContentEl={setRightDrawerContentEl}
           />
         </Box>
@@ -530,6 +629,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         onClose={closeRightDrawer}
         ModalProps={modalProps}
         sx={{
+          zIndex: 60,
           "& .MuiDrawer-paper": {
             width: isPhoneLayout() ? "100vw" : `${rightDrawerWidth()}px`,
             boxSizing: "border-box",
@@ -576,6 +676,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           onCloseRightDrawer={closeRightDrawer}
           onPinRightDrawer={pinRightDrawer}
           onUnpinRightDrawer={unpinRightDrawer}
+          promptInputApi={activePromptInputApi}
           setContentEl={setRightDrawerContentEl}
         />
       </Drawer>
@@ -620,12 +721,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     </Show>
 
                     <div class="flex-1 flex items-center justify-center min-w-0">
-                      <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
-                        <PermissionNotificationBanner
-                          instanceId={props.instance.id}
-                          onClick={() => setPermissionModalOpen(true)}
-                        />
-                      </Show>
+                      {renderSessionHeaderIndicators()}
                     </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-1">
@@ -717,12 +813,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 </Show>
 
                 <div class="ml-auto flex items-center session-header-hints">
-                  <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
-                    <PermissionNotificationBanner
-                      instanceId={props.instance.id}
-                      onClick={() => setPermissionModalOpen(true)}
-                    />
-                  </Show>
+                  {renderSessionHeaderIndicators()}
                 </div>
               </div>
 
@@ -822,6 +913,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                           escapeInDebounce={props.escapeInDebounce}
                           isPhoneLayout={isPhoneLayout()}
                           compactPromptLayout={compactPromptLayout()}
+                          registerSessionPromptApi={registerSessionPromptApi}
                           showSidebarToggle={showEmbeddedSidebarToggle()}
                           onSidebarToggle={() => setLeftOpen(true)}
                           forceCompactStatusLayout={showEmbeddedSidebarToggle()}

packages/ui/src/components/instance/shell/SessionSidebar.tsx

@@ -48,104 +48,103 @@ interface SessionSidebarProps {
 }
 
 const SessionSidebar: Component<SessionSidebarProps> = (props) => (
-  <div class="flex flex-col h-full min-h-0" ref={props.setContentEl}>
-    <div class="flex flex-col gap-2 px-4 py-3 border-b border-base">
-      <div class="flex items-center justify-between gap-2">
-        <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
-          {props.t("instanceShell.leftPanel.sessionsTitle")}
-        </span>
-        <div class="flex items-center gap-2 text-primary">
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("sessionList.actions.newSession.ariaLabel")}
-            title={props.t("sessionList.actions.newSession.title")}
-            onClick={() => {
-              const result = props.onNewSession()
-              if (result instanceof Promise) {
-                void result.catch((error) => log.error("Failed to create session:", error))
-              }
-            }}
-          >
-            <PlusSquare class="w-5 h-5" />
-          </IconButton>
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("sessionList.filter.ariaLabel")}
-            title={props.t("sessionList.filter.ariaLabel")}
-            aria-pressed={props.showSearch()}
-            onClick={props.onToggleSearch}
-            sx={{
-              color: props.showSearch() ? "var(--text-primary)" : "inherit",
-              backgroundColor: props.showSearch() ? "var(--surface-hover)" : "transparent",
-              "&:hover": {
-                backgroundColor: "var(--surface-hover)",
-              },
-            }}
-          >
-            <Search class="w-5 h-5" />
-          </IconButton>
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("instanceShell.leftPanel.instanceInfo")}
-            title={props.t("instanceShell.leftPanel.instanceInfo")}
-            onClick={() => props.onSelectSession("info")}
-          >
-            <InfoOutlinedIcon fontSize="small" />
-          </IconButton>
-          <Show when={!props.isPhoneLayout()}>
+    <div class="flex flex-col h-full min-h-0" ref={props.setContentEl}>
+      <div class="flex flex-col gap-2 px-4 py-3 border-b border-base">
+        <div class="flex items-center justify-between gap-2">
+          <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
+            {props.t("instanceShell.leftPanel.sessionsTitle")}
+          </span>
+          <div class="flex items-center gap-2 text-primary">
             <IconButton
               size="small"
               color="inherit"
-              aria-label={props.leftPinned() ? props.t("instanceShell.leftDrawer.unpin") : props.t("instanceShell.leftDrawer.pin")}
-              onClick={() => (props.leftPinned() ? props.onUnpinLeftDrawer() : props.onPinLeftDrawer())}
+              aria-label={props.t("sessionList.actions.newSession.ariaLabel")}
+              title={props.t("sessionList.actions.newSession.title")}
+              onClick={() => {
+                const result = props.onNewSession()
+                if (result instanceof Promise) {
+                  void result.catch((error) => log.error("Failed to create session:", error))
+                }
+              }}
             >
-              {props.leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              <PlusSquare class="w-5 h-5" />
             </IconButton>
-          </Show>
-          <Show when={props.drawerState() === "floating-open"}>
             <IconButton
               size="small"
               color="inherit"
-              aria-label={props.t("instanceShell.leftDrawer.toggle.close")}
-              title={props.t("instanceShell.leftDrawer.toggle.close")}
-              onClick={props.onCloseLeftDrawer}
+              aria-label={props.t("sessionList.filter.ariaLabel")}
+              title={props.t("sessionList.filter.ariaLabel")}
+              aria-pressed={props.showSearch()}
+              onClick={props.onToggleSearch}
+              sx={{
+                color: props.showSearch() ? "var(--text-primary)" : "inherit",
+                backgroundColor: props.showSearch() ? "var(--surface-hover)" : "transparent",
+                "&:hover": {
+                  backgroundColor: "var(--surface-hover)",
+                },
+              }}
             >
-              <MenuOpenIcon fontSize="small" />
+              <Search class="w-5 h-5" />
             </IconButton>
+            <IconButton
+              size="small"
+              color="inherit"
+              aria-label={props.t("instanceShell.leftPanel.instanceInfo")}
+              title={props.t("instanceShell.leftPanel.instanceInfo")}
+              onClick={() => props.onSelectSession("info")}
+            >
+              <InfoOutlinedIcon fontSize="small" />
+            </IconButton>
+            <Show when={!props.isPhoneLayout()}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.leftPinned() ? props.t("instanceShell.leftDrawer.unpin") : props.t("instanceShell.leftDrawer.pin")}
+                onClick={() => (props.leftPinned() ? props.onUnpinLeftDrawer() : props.onPinLeftDrawer())}
+              >
+                {props.leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              </IconButton>
+            </Show>
+            <Show when={props.drawerState() === "floating-open"}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.t("instanceShell.leftDrawer.toggle.close")}
+                title={props.t("instanceShell.leftDrawer.toggle.close")}
+                onClick={props.onCloseLeftDrawer}
+              >
+                <MenuOpenIcon fontSize="small" />
+              </IconButton>
+            </Show>
+          </div>
+        </div>
+        <div class="session-sidebar-shortcuts">
+          <Show when={props.keyboardShortcuts().length}>
+            <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
           </Show>
         </div>
       </div>
-      <div class="session-sidebar-shortcuts">
-        <Show when={props.keyboardShortcuts().length}>
-          <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
-        </Show>
-      </div>
-    </div>
 
-    <div class="session-sidebar flex flex-col flex-1 min-h-0">
-      <SessionList
-        instanceId={props.instanceId}
-        threads={props.threads()}
-        activeSessionId={props.activeSessionId()}
-        onSelect={props.onSelectSession}
-        onNew={() => {
-          const result = props.onNewSession()
-          if (result instanceof Promise) {
-            void result.catch((error) => log.error("Failed to create session:", error))
-          }
-        }}
-        enableFilterBar={props.showSearch()}
-        showHeader={false}
-        showFooter={false}
-      />
+      <div class="session-sidebar flex flex-col flex-1 min-h-0">
+        <SessionList
+          instanceId={props.instanceId}
+          threads={props.threads()}
+          activeSessionId={props.activeSessionId()}
+          onSelect={props.onSelectSession}
+          onNew={() => {
+            const result = props.onNewSession()
+            if (result instanceof Promise) {
+              void result.catch((error) => log.error("Failed to create session:", error))
+            }
+          }}
+          enableFilterBar={props.showSearch()}
+          showHeader={false}
+          showFooter={false}
+        />
 
-      <div class="session-sidebar-separator" />
-      <Show when={props.activeSession()}>
-        {(activeSession) => (
-          <>
+        <div class="session-sidebar-separator" />
+        <Show when={props.activeSession()}>
+          {(activeSession) => (
             <div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
               <WorktreeSelector instanceId={props.instanceId} sessionId={activeSession().id} />
 
@@ -177,11 +176,10 @@ const SessionSidebar: Component<SessionSidebarProps> = (props) => (
                 showDescription={false}
               />
             </div>
-          </>
-        )}
-      </Show>
+          )}
+        </Show>
+      </div>
     </div>
-  </div>
-)
+  )
 
 export default SessionSidebar

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

@@ -10,7 +10,7 @@ import {
   type Component,
 } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk/v2"
-import type { FileContent, FileNode, File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
+import type { FileContent, FileNode } from "@opencode-ai/sdk/v2/client"
 import IconButton from "@suid/material/IconButton"
 import MenuOpenIcon from "@suid/icons-material/MenuOpen"
 import PushPinIcon from "@suid/icons-material/PushPin"
@@ -19,13 +19,23 @@ import PushPinOutlinedIcon from "@suid/icons-material/PushPinOutlined"
 import type { Instance } from "../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../server/src/api-types"
 import type { Session } from "../../../../types/session"
+import type { PromptInputApi } from "../../../prompt-input/types"
 import type { DrawerViewState } from "../types"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, RightPanelTab } from "./types"
 
-import { getDefaultWorktreeSlug, getOrCreateWorktreeClient, getWorktreeSlugForSession } from "../../../../stores/worktrees"
+import {
+  getDefaultWorktreeSlug,
+  getGitRepoStatus,
+  getOrCreateWorktreeClient,
+  getWorktreeSlugForSession,
+  getWorktrees,
+} from "../../../../stores/worktrees"
 import { requestData } from "../../../../lib/opencode-api"
-import { buildUnifiedDiffFromSdkPatch, tryReverseApplyUnifiedDiff } from "../../../../lib/unified-diff-reverse"
+import { serverApi } from "../../../../lib/api-client"
+import { showConfirmDialog } from "../../../../stores/alerts"
+import { showToastNotification } from "../../../../lib/notifications"
 import { useGlobalPointerDrag } from "../useGlobalPointerDrag"
+import { useGitChanges } from "./useGitChanges"
 import {
   RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY,
   RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY,
@@ -38,7 +48,11 @@ import {
   RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY,
   RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY,
   RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY,
+  RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY,
+  RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY,
   RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY,
+  RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY,
+  RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY,
   RIGHT_PANEL_TAB_STORAGE_KEY,
   readStoredBool,
   readStoredEnum,
@@ -79,6 +93,7 @@ interface RightPanelProps {
   onCloseRightDrawer: () => void
   onPinRightDrawer: () => void
   onUnpinRightDrawer: () => void
+  promptInputApi: Accessor<PromptInputApi | null>
 
   setContentEl: (el: HTMLElement | null) => void
 }
@@ -86,6 +101,7 @@ interface RightPanelProps {
 const RightPanel: Component<RightPanelProps> = (props) => {
   const [rightPanelTab, setRightPanelTab] = createSignal<RightPanelTab>(readStoredRightPanelTab("changes"))
   const [rightPanelExpandedItems, setRightPanelExpandedItems] = createSignal<string[]>([
+    "yolo-mode",
     "plan",
     "background-processes",
     "mcp",
@@ -102,6 +118,9 @@ const RightPanel: Component<RightPanelProps> = (props) => {
   const [browserSelectedContent, setBrowserSelectedContent] = createSignal<string | null>(null)
   const [browserSelectedLoading, setBrowserSelectedLoading] = createSignal(false)
   const [browserSelectedError, setBrowserSelectedError] = createSignal<string | null>(null)
+  const [browserSelectedDirty, setBrowserSelectedDirty] = createSignal(false)
+  const [browserSelectedSaving, setBrowserSelectedSaving] = createSignal(false)
+  const [browserSelectedOriginalContent, setBrowserSelectedOriginalContent] = createSignal<string | null>(null)
 
   const [diffViewMode, setDiffViewMode] = createSignal<DiffViewMode>(
     readStoredEnum(RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY, ["split", "unified"] as const) ?? "unified",
@@ -126,6 +145,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
   const [changesListTouched, setChangesListTouched] = createSignal(false)
   const [gitChangesListOpen, setGitChangesListOpen] = createSignal(true)
   const [gitChangesListTouched, setGitChangesListTouched] = createSignal(false)
+  const [gitStagedOpen, setGitStagedOpen] = createSignal(true)
+  const [gitUnstagedOpen, setGitUnstagedOpen] = createSignal(true)
 
   const listLayoutKey = createMemo(() => (props.isPhoneLayout() ? "phone" : "nonphone"))
 
@@ -142,11 +163,28 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     return layout === "phone" ? RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY : RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY
   }
 
+  const gitSectionStorageKey = (section: "staged" | "unstaged") => {
+    const layout = listLayoutKey()
+    if (section === "staged") {
+      return layout === "phone"
+        ? RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY
+        : RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY
+    }
+    return layout === "phone"
+      ? RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY
+      : RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY
+  }
+
   const persistListOpen = (tab: "changes" | "git-changes" | "files", value: boolean) => {
     if (typeof window === "undefined") return
     window.localStorage.setItem(listOpenStorageKey(tab), value ? "true" : "false")
   }
 
+  const persistGitSectionOpen = (section: "staged" | "unstaged", value: boolean) => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(gitSectionStorageKey(section), value ? "true" : "false")
+  }
+
   createEffect(() => {
     // Refresh persisted visibility when layout changes (phone vs non-phone).
     const layout = listLayoutKey()
@@ -178,6 +216,12 @@ const RightPanel: Component<RightPanelProps> = (props) => {
       setGitChangesListOpen(true)
       setGitChangesListTouched(false)
     }
+
+    const stagedPersisted = readStoredBool(gitSectionStorageKey("staged"))
+    setGitStagedOpen(stagedPersisted ?? true)
+
+    const unstagedPersisted = readStoredBool(gitSectionStorageKey("unstaged"))
+    setGitUnstagedOpen(unstagedPersisted ?? true)
   })
 
   createEffect(() => {
@@ -332,34 +376,56 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     return getDefaultWorktreeSlug(props.instanceId)
   })
 
+  const gitChangesWorktreeSlug = createMemo(() => {
+    if (getGitRepoStatus(props.instanceId) === false) return null
+    const slug = worktreeSlugForViewer().trim()
+    return slug ? slug : null
+  })
+
+  const gitChangesWorktree = createMemo(() => {
+    const slug = gitChangesWorktreeSlug()
+    if (!slug) return null
+    return getWorktrees(props.instanceId).find((worktree) => worktree.slug === slug) ?? null
+  })
+
+  const gitChangesBranchLabel = createMemo(() => {
+    const branch = gitChangesWorktree()?.branch?.trim()
+    return branch || null
+  })
+
   const browserClient = createMemo(() => getOrCreateWorktreeClient(props.instanceId, worktreeSlugForViewer()))
 
-  const [gitStatusEntries, setGitStatusEntries] = createSignal<GitFileStatus[] | null>(null)
-  const [gitStatusLoading, setGitStatusLoading] = createSignal(false)
-  const [gitStatusError, setGitStatusError] = createSignal<string | null>(null)
-  const [gitSelectedPath, setGitSelectedPath] = createSignal<string | null>(null)
-  const [gitSelectedLoading, setGitSelectedLoading] = createSignal(false)
-  const [gitSelectedError, setGitSelectedError] = createSignal<string | null>(null)
-  const [gitSelectedBefore, setGitSelectedBefore] = createSignal<string | null>(null)
-  const [gitSelectedAfter, setGitSelectedAfter] = createSignal<string | null>(null)
-
-  const gitMostChangedPath = createMemo<string | null>(() => {
-    const entries = gitStatusEntries()
-    if (!Array.isArray(entries) || entries.length === 0) return null
-    const candidates = entries.filter((item) => item && item.status !== "deleted")
-    if (candidates.length === 0) return null
-    const best = candidates.reduce((currentBest, item) => {
-      const bestScore = (currentBest?.added ?? 0) + (currentBest?.removed ?? 0)
-      const score = (item?.added ?? 0) + (item?.removed ?? 0)
-      if (score > bestScore) return item
-      if (score < bestScore) return currentBest
-      return String(item.path || "").localeCompare(String(currentBest?.path || "")) < 0 ? item : currentBest
-    }, candidates[0])
-    return typeof best?.path === "string" ? best.path : null
+  const {
+    gitStatusEntries,
+    gitStatusLoading,
+    gitStatusError,
+    gitSelectedItemId,
+    gitBulkSelectedItemIds,
+    gitSelectedLoading,
+    gitSelectedError,
+    gitSelectedBefore,
+    gitSelectedAfter,
+    gitCommitMessage,
+    gitCommitSubmitting,
+    gitMostChangedItemId,
+    setGitCommitMessage,
+    handleGitRowClick,
+    refreshGitStatus,
+    insertGitChangeContext,
+    submitGitCommit,
+    stageGitFile,
+    unstageGitFile,
+  } = useGitChanges({
+    t: props.t,
+    instanceId: props.instanceId,
+    rightPanelTab,
+    worktreeSlug: worktreeSlugForViewer,
+    isPhoneLayout: props.isPhoneLayout,
+    promptInputApi: props.promptInputApi,
+    closeGitList: () => setGitChangesListOpen(false),
   })
 
   createEffect(() => {
-    // Reset tab state when worktree context changes.
     worktreeSlugForViewer()
     setBrowserPath(".")
     setBrowserEntries(null)
@@ -368,111 +434,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     setBrowserSelectedContent(null)
     setBrowserSelectedError(null)
     setBrowserSelectedLoading(false)
-
-    setGitStatusEntries(null)
-    setGitStatusError(null)
-    setGitStatusLoading(false)
-    setGitSelectedPath(null)
-    setGitSelectedLoading(false)
-    setGitSelectedError(null)
-    setGitSelectedBefore(null)
-    setGitSelectedAfter(null)
   })
 
-  const loadGitStatus = async (force = false) => {
-    if (!force && gitStatusEntries() !== null) return
-    setGitStatusLoading(true)
-    setGitStatusError(null)
-    try {
-      const list = await requestData<GitFileStatus[]>(browserClient().file.status(), "file.status")
-      setGitStatusEntries(Array.isArray(list) ? list : [])
-    } catch (error) {
-      setGitStatusError(error instanceof Error ? error.message : "Failed to load git status")
-      setGitStatusEntries([])
-    } finally {
-      setGitStatusLoading(false)
-    }
-  }
-
-  async function openGitFile(path: string) {
-    setGitSelectedPath(path)
-    setGitSelectedLoading(true)
-    setGitSelectedError(null)
-    setGitSelectedBefore(null)
-    setGitSelectedAfter(null)
-
-    const list = gitStatusEntries() || []
-    const entry = list.find((item) => item.path === path) || null
-    if (entry?.status === "deleted") {
-      setGitSelectedError("Deleted file diff is not available yet")
-      setGitSelectedLoading(false)
-      return
-    }
-
-    // Phone: treat file selection as a commit action and close the overlay.
-    if (props.isPhoneLayout()) {
-      setGitChangesListOpen(false)
-    }
-
-    try {
-      const content = await requestData<FileContent>(browserClient().file.read({ path }), "file.read")
-      const type = (content as any)?.type
-      const encoding = (content as any)?.encoding
-      if (type && type !== "text") {
-        throw new Error("Binary file cannot be displayed")
-      }
-      if (encoding === "base64") {
-        throw new Error("Binary file cannot be displayed")
-      }
-      const afterText = typeof (content as any)?.content === "string" ? ((content as any).content as string) : null
-      if (afterText === null) {
-        throw new Error("Unsupported file type")
-      }
-
-      setGitSelectedAfter(afterText)
-
-      if (entry?.status === "added") {
-        setGitSelectedBefore("")
-        return
-      }
-
-      const diffText =
-        typeof (content as any)?.diff === "string" && String((content as any).diff).trim().length > 0
-          ? String((content as any).diff)
-          : (content as any)?.patch
-            ? buildUnifiedDiffFromSdkPatch((content as any).patch)
-            : ""
-
-      const beforeText = tryReverseApplyUnifiedDiff(afterText, diffText)
-      if (beforeText === null) {
-        throw new Error("Unable to calculate diff for this file")
-      }
-      setGitSelectedBefore(beforeText)
-    } catch (error) {
-      setGitSelectedError(error instanceof Error ? error.message : "Failed to load file changes")
-    } finally {
-      setGitSelectedLoading(false)
-    }
-  }
-
-  createEffect(() => {
-    if (rightPanelTab() !== "git-changes") return
-    const entries = gitStatusEntries()
-    if (entries === null) return
-    if (gitSelectedPath()) return
-    const next = gitMostChangedPath()
-    if (!next) return
-    void openGitFile(next)
-  })
-
-  const refreshGitStatus = async () => {
-    await loadGitStatus(true)
-    const selected = gitSelectedPath()
-    if (selected) {
-      void openGitFile(selected)
-    }
-  }
-
   const bestDiffFile = createMemo<string | null>(() => {
     const diffs = props.activeSessionDiffs()
     if (!Array.isArray(diffs) || diffs.length === 0) return null
@@ -539,6 +502,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     setBrowserSelectedLoading(true)
     setBrowserSelectedError(null)
     setBrowserSelectedContent(null)
+    setBrowserSelectedDirty(false)
+    setBrowserSelectedOriginalContent(null)
 
     // Phone: treat file selection as a commit action and close the overlay.
     if (props.isPhoneLayout()) {
@@ -559,6 +524,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
         throw new Error("Unsupported file type")
       }
       setBrowserSelectedContent(text)
+      setBrowserSelectedOriginalContent(text) // Track original content for conflict detection
     } catch (error) {
       setBrowserSelectedError(error instanceof Error ? error.message : "Failed to read file")
     } finally {
@@ -566,6 +532,95 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     }
   }
 
+  const saveBrowserFile = async (content: string): Promise<boolean> => {
+    const path = browserSelectedPath()
+    if (!path) return false
+
+    // Check for conflict: agent edited file while user was editing
+    const originalContent = browserSelectedOriginalContent()
+    if (originalContent !== null) {
+      try {
+        const currentDiskContent = await requestData<FileContent>(
+          browserClient().file.read({ path }),
+          "file.read",
+        )
+        const diskContent = (currentDiskContent as any)?.content
+
+        // If disk content differs from what we originally loaded (agent edit)
+        // AND differs from user's current edits, we have a conflict
+        if (diskContent !== originalContent && diskContent !== content) {
+          const confirmed = await showConfirmDialog(
+            props.t("instanceShell.rightPanel.actions.conflict.message", { path }),
+            {
+              variant: "warning",
+              confirmLabel: props.t("instanceShell.rightPanel.actions.conflict.confirmLabel"),
+              cancelLabel: props.t("instanceShell.rightPanel.actions.conflict.cancelLabel"),
+              dismissible: false,
+            },
+          )
+          if (!confirmed) {
+            return false
+          }
+          // User chose to overwrite, proceed with save
+        }
+      } catch {
+        // If we can't check for conflict, proceed with save
+      }
+    }
+
+    setBrowserSelectedSaving(true)
+    try {
+      await serverApi.writeWorkspaceFile(props.instanceId, path, content)
+      setBrowserSelectedContent(content)
+      setBrowserSelectedOriginalContent(content) // Update original to match saved
+      setBrowserSelectedDirty(false)
+      showToastNotification({
+        message: props.t("instanceShell.rightPanel.toast.saveSuccess"),
+        variant: "success",
+      })
+      return true
+    } catch (error) {
+      setBrowserSelectedError(error instanceof Error ? error.message : "Failed to save file")
+      showToastNotification({
+        message: props.t("instanceShell.rightPanel.toast.saveError"),
+        variant: "error",
+      })
+      return false
+    } finally {
+      setBrowserSelectedSaving(false)
+    }
+  }
+
+  const handleBrowserFileChange = (content: string) => {
+    setBrowserSelectedContent(content)
+    setBrowserSelectedDirty(true)
+  }
+
+  const handleOpenBrowserFileRequest = async (path: string) => {
+    if (browserSelectedDirty()) {
+      const confirmed = await showConfirmDialog(
+        props.t("instanceShell.rightPanel.actions.saveConfirm.message", { path: browserSelectedPath() || "" }),
+        {
+          variant: "warning",
+          confirmLabel: props.t("instanceShell.rightPanel.actions.saveConfirm.confirmLabel"),
+          cancelLabel: props.t("instanceShell.rightPanel.actions.saveConfirm.cancelLabel"),
+          dismissible: false,
+        },
+      )
+      if (confirmed) {
+        const saveSuccess = await saveBrowserFile(browserSelectedContent() || "")
+        if (!saveSuccess) {
+          // Save failed - stay on current file, error toast already shown
+          return
+        }
+      } else {
+        // User chose not to save - clear dirty state and discard edits
+        setBrowserSelectedDirty(false)
+      }
+    }
+    await openBrowserFile(path)
+  }
+
   createEffect(() => {
     if (rightPanelTab() !== "files") return
     if (browserLoading()) return
@@ -578,21 +633,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     setBrowserSelectedContent(null)
     setBrowserSelectedLoading(false)
     setBrowserSelectedError(null)
-  })
-
-  createEffect(() => {
-    if (rightPanelTab() !== "git-changes") return
-    if (gitStatusLoading()) return
-    if (gitStatusEntries() !== null) return
-    void loadGitStatus()
-  })
-
-  createEffect(() => {
-    if (rightPanelTab() === "git-changes") return
-    setGitSelectedBefore(null)
-    setGitSelectedAfter(null)
-    setGitSelectedLoading(false)
-    setGitSelectedError(null)
+    setBrowserSelectedDirty(false)
   })
 
   const handleSelectChangesFile = (file: string, closeList: boolean) => {
@@ -630,6 +671,22 @@ const RightPanel: Component<RightPanelProps> = (props) => {
   }
 
   const refreshFilesTab = async () => {
+    // Prompt for confirmation if file has unsaved changes
+    if (browserSelectedDirty()) {
+      const confirmed = await showConfirmDialog(
+        props.t("instanceShell.rightPanel.actions.refreshDirty.message"),
+        {
+          variant: "warning",
+          confirmLabel: props.t("instanceShell.rightPanel.actions.refreshDirty.confirmLabel"),
+          cancelLabel: props.t("instanceShell.rightPanel.actions.refreshDirty.cancelLabel"),
+          dismissible: false,
+        },
+      )
+      if (!confirmed) {
+        return
+      }
+    }
+
     void loadBrowserEntries(browserPath())
     const selected = browserSelectedPath()
     if (selected) {
@@ -651,6 +708,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
           throw new Error("Unsupported file type")
         }
         setBrowserSelectedContent(text)
+        setBrowserSelectedOriginalContent(text) // Update original content after refresh
+        setBrowserSelectedDirty(false) // Clear dirty after refresh
       } catch (error) {
         setBrowserSelectedError(error instanceof Error ? error.message : "Failed to read file")
       } finally {
@@ -670,7 +729,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     setRightPanelTab("changes")
   }
 
-  const statusSectionIds = ["session-changes", "plan", "background-processes", "mcp", "lsp", "plugins"]
+  const statusSectionIds = ["yolo-mode", "session-changes", "plan", "background-processes", "mcp", "lsp", "plugins"]
 
   createEffect(() => {
     const currentExpanded = new Set(rightPanelExpandedItems())
@@ -793,12 +852,13 @@ const RightPanel: Component<RightPanelProps> = (props) => {
               entries={gitStatusEntries}
               statusLoading={gitStatusLoading}
               statusError={gitStatusError}
-              selectedPath={gitSelectedPath}
+              selectedItemId={gitSelectedItemId}
+              selectedBulkItemIds={gitBulkSelectedItemIds}
               selectedLoading={gitSelectedLoading}
               selectedError={gitSelectedError}
               selectedBefore={gitSelectedBefore}
               selectedAfter={gitSelectedAfter}
-              mostChangedPath={gitMostChangedPath}
+              mostChangedItemId={gitMostChangedItemId}
               scopeKey={gitScopeKey}
               diffViewMode={diffViewMode}
               diffContextMode={diffContextMode}
@@ -806,8 +866,28 @@ const RightPanel: Component<RightPanelProps> = (props) => {
               onViewModeChange={setDiffViewMode}
               onContextModeChange={setDiffContextMode}
               onWordWrapModeChange={setDiffWordWrapMode}
-              onOpenFile={(path: string) => void openGitFile(path)}
+              onRowClick={handleGitRowClick}
               onRefresh={() => void refreshGitStatus()}
+              onInsertContext={insertGitChangeContext}
+              onStageFile={stageGitFile}
+              onUnstageFile={unstageGitFile}
+              commitMessage={gitCommitMessage}
+              commitSubmitting={gitCommitSubmitting}
+              onCommitMessageInput={setGitCommitMessage}
+              onSubmitCommit={() => void submitGitCommit()}
+              branchLabel={gitChangesBranchLabel}
+              stagedOpen={gitStagedOpen}
+              unstagedOpen={gitUnstagedOpen}
+              onToggleStagedOpen={() => {
+                const next = !gitStagedOpen()
+                setGitStagedOpen(next)
+                persistGitSectionOpen("staged", next)
+              }}
+              onToggleUnstagedOpen={() => {
+                const next = !gitUnstagedOpen()
+                setGitUnstagedOpen(next)
+                persistGitSectionOpen("unstaged", next)
+              }}
               listOpen={gitChangesListOpen}
               onToggleList={toggleGitList}
               splitWidth={gitChangesSplitWidth}
@@ -830,11 +910,15 @@ const RightPanel: Component<RightPanelProps> = (props) => {
               browserSelectedContent={browserSelectedContent}
               browserSelectedLoading={browserSelectedLoading}
               browserSelectedError={browserSelectedError}
+              browserSelectedDirty={browserSelectedDirty}
+              browserSelectedSaving={browserSelectedSaving}
               parentPath={browserParentPath}
               scopeKey={browserScopeKey}
               onLoadEntries={(path: string) => void loadBrowserEntries(path)}
-              onOpenFile={(path: string) => void openBrowserFile(path)}
+              onRequestOpenFile={(path: string) => void handleOpenBrowserFileRequest(path)}
               onRefresh={() => void refreshFilesTab()}
+              onSave={(content: string) => void saveBrowserFile(content)}
+              onContentChange={(content: string) => handleBrowserFileChange(content)}
               listOpen={filesListOpen}
               onToggleList={toggleFilesList}
               splitWidth={filesSplitWidth}

packages/ui/src/components/instance/shell/right-panel/git-changes-model.ts

@@ -0,0 +1,148 @@
+import type { File as SdkGitFileStatus } from "@opencode-ai/sdk/v2/client"
+import type { WorktreeGitStatusEntry } from "../../../../../../server/src/api-types"
+
+import type { GitChangeEntry, GitChangeListItem, GitChangeSection, GitChangeStatus } from "./types"
+
+function normalizeGitChangePath(path: unknown): string {
+  if (typeof path !== "string") return ""
+  const normalized = path.replace(/\\+/g, "/").replace(/^\.\//, "").trim()
+  return normalized
+}
+
+export function normalizeGitChangeStatus(status: unknown): GitChangeStatus {
+  return typeof status === "string" && status.trim().length > 0 ? status : "modified"
+}
+
+export function adaptSdkGitStatusEntry(entry: SdkGitFileStatus): GitChangeEntry {
+  return {
+    path: normalizeGitChangePath(entry?.path),
+    originalPath: null,
+    additions: typeof entry?.added === "number" ? entry.added : 0,
+    deletions: typeof entry?.removed === "number" ? entry.removed : 0,
+    status: normalizeGitChangeStatus(entry?.status),
+  }
+}
+
+export function adaptSdkGitStatusEntries(
+  entries: SdkGitFileStatus[] | null | undefined,
+  details?: WorktreeGitStatusEntry[] | null,
+): GitChangeEntry[] {
+  const detailsByPath = new Map(
+    (details ?? [])
+      .map((entry) => {
+        const path = normalizeGitChangePath(entry.path)
+        return path ? [{ ...entry, path }, path] : null
+      })
+      .filter((entry): entry is [WorktreeGitStatusEntry, string] => Boolean(entry))
+      .map(([entry, path]) => [path, entry] as const),
+  )
+  const adaptedByPath = new Map<string, GitChangeEntry>()
+
+  for (const entry of entries ?? []) {
+    const adapted = adaptSdkGitStatusEntry(entry)
+    if (!adapted.path) continue
+    const detail = detailsByPath.get(adapted.path)
+      adaptedByPath.set(adapted.path, {
+        ...adapted,
+        originalPath: detail?.originalPath ? normalizeGitChangePath(detail.originalPath) : adapted.originalPath ?? null,
+        stagedStatus: detail?.stagedStatus ?? null,
+        unstagedStatus: detail?.unstagedStatus ?? null,
+        stagedAdditions: detail?.stagedAdditions ?? 0,
+      stagedDeletions: detail?.stagedDeletions ?? 0,
+      unstagedAdditions: detail?.unstagedAdditions ?? 0,
+      unstagedDeletions: detail?.unstagedDeletions ?? 0,
+    })
+  }
+
+  for (const detail of details ?? []) {
+    const normalizedPath = normalizeGitChangePath(detail.path)
+    if (!normalizedPath || adaptedByPath.has(normalizedPath)) continue
+      adaptedByPath.set(normalizedPath, {
+        path: normalizedPath,
+        originalPath: detail.originalPath ? normalizeGitChangePath(detail.originalPath) : null,
+        additions: 0,
+        deletions: 0,
+        status: detail.unstagedStatus ?? detail.stagedStatus ?? "modified",
+      stagedStatus: detail.stagedStatus,
+      unstagedStatus: detail.unstagedStatus,
+      stagedAdditions: detail.stagedAdditions,
+      stagedDeletions: detail.stagedDeletions,
+      unstagedAdditions: detail.unstagedAdditions,
+      unstagedDeletions: detail.unstagedDeletions,
+    })
+  }
+
+  return Array.from(adaptedByPath.values()).filter((entry) => entry.path.length > 0)
+}
+
+function buildGitChangeListItemId(section: GitChangeSection, path: string): string {
+  return `${section}:${path}`
+}
+
+function splitGitChangePath(path: string) {
+  const normalized = normalizeGitChangePath(path)
+  const lastSlash = normalized.lastIndexOf("/")
+  if (lastSlash === -1) {
+    return { displayName: normalized, parentPath: "" }
+  }
+  return {
+    displayName: normalized.slice(lastSlash + 1),
+    parentPath: normalized.slice(0, lastSlash),
+  }
+}
+
+export function buildGitChangeListItems(entries: GitChangeEntry[] | null | undefined): GitChangeListItem[] {
+  if (!Array.isArray(entries)) return []
+
+  const items: GitChangeListItem[] = []
+  for (const entry of entries) {
+    const pathParts = splitGitChangePath(entry.path)
+    if (entry.stagedStatus) {
+      items.push({
+        id: buildGitChangeListItemId("staged", entry.path),
+        path: entry.path,
+        originalPath: entry.originalPath ?? null,
+        section: "staged",
+        status: entry.stagedStatus,
+        additions: entry.stagedAdditions ?? 0,
+        deletions: entry.stagedDeletions ?? 0,
+        entry,
+        displayName: pathParts.displayName,
+        parentPath: pathParts.parentPath,
+      })
+    }
+    if (entry.unstagedStatus) {
+      items.push({
+        id: buildGitChangeListItemId("unstaged", entry.path),
+        path: entry.path,
+        originalPath: entry.originalPath ?? null,
+        section: "unstaged",
+        status: entry.unstagedStatus,
+        additions: entry.unstagedAdditions ?? entry.additions,
+        deletions: entry.unstagedDeletions ?? entry.deletions,
+        entry,
+        displayName: pathParts.displayName,
+        parentPath: pathParts.parentPath,
+      })
+    }
+    if (!entry.stagedStatus && !entry.unstagedStatus) {
+      items.push({
+        id: buildGitChangeListItemId("unstaged", entry.path),
+        path: entry.path,
+        originalPath: entry.originalPath ?? null,
+        section: "unstaged",
+        status: entry.status,
+        additions: entry.additions,
+        deletions: entry.deletions,
+        entry,
+        displayName: pathParts.displayName,
+        parentPath: pathParts.parentPath,
+      })
+    }
+  }
+
+  return items.sort((a, b) => {
+    if (a.section !== b.section) return a.section.localeCompare(b.section)
+    return a.path.localeCompare(b.path)
+  })
+}

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

@@ -115,23 +115,22 @@ 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>
+<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 || "")}
+                    patch={String((file() as any).patch || "")}
+                    viewMode={props.diffViewMode()}
+                    contextMode={props.diffContextMode()}
+                    wordWrap={props.diffWordWrapMode()}
+                  />
+                </Suspense>
             )}
           </Show>
         </div>

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

@@ -1,7 +1,7 @@
 import { For, Show, Suspense, lazy, type Accessor, type Component, type JSX } from "solid-js"
 import type { FileNode } from "@opencode-ai/sdk/v2/client"
 
-import { RefreshCw } from "lucide-solid"
+import { RefreshCw, Save } from "lucide-solid"
 
 import SplitFilePanel from "../components/SplitFilePanel"
 
@@ -21,13 +21,17 @@ interface FilesTabProps {
   browserSelectedContent: Accessor<string | null>
   browserSelectedLoading: Accessor<boolean>
   browserSelectedError: Accessor<string | null>
+  browserSelectedDirty: Accessor<boolean>
+  browserSelectedSaving: Accessor<boolean>
 
   parentPath: Accessor<string | null>
   scopeKey: Accessor<string>
 
   onLoadEntries: (path: string) => void
-  onOpenFile: (path: string) => void
+  onRequestOpenFile: (path: string) => void
   onRefresh: () => void
+  onSave: (content: string) => void
+  onContentChange: (content: string) => void
 
   listOpen: Accessor<boolean>
   onToggleList: () => void
@@ -38,6 +42,13 @@ interface FilesTabProps {
 }
 
 const FilesTab: Component<FilesTabProps> = (props) => {
+  const handleSave = () => {
+    const content = props.browserSelectedContent()
+    if (content !== undefined && content !== null) {
+      props.onSave(content)
+    }
+  }
+
   const renderContent = (): JSX.Element => {
     const entriesValue = props.browserEntries()
     const entries = entriesValue || []
@@ -86,7 +97,13 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                           </div>
                         }
                       >
-                        <LazyMonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                        <LazyMonacoFileViewer
+                          scopeKey={props.scopeKey()}
+                          path={payload().path}
+                          content={payload().content}
+                          onSave={props.onSave}
+                          onContentChange={props.onContentChange}
+                        />
                       </Suspense>
                     )}
                   </Show>
@@ -135,7 +152,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                   props.onLoadEntries(item.path)
                   return
                 }
-                props.onOpenFile(item.path)
+                props.onRequestOpenFile(item.path)
               }}
               title={item.path}
             >
@@ -168,14 +185,25 @@ const FilesTab: Component<FilesTabProps> = (props) => {
               </Show>
               <Show when={props.browserError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
-
+            <button
+              type="button"
+              class="files-header-icon-button"
+              title={props.t("instanceShell.rightPanel.actions.save") || "Save (Ctrl+S)"}
+              aria-label={props.t("instanceShell.rightPanel.actions.save") || "Save"}
+              disabled={props.browserSelectedSaving() || !props.browserSelectedDirty()}
+              style={{ "margin-inline-start": "auto" }}
+              onClick={handleSave}
+            >
+              <Show when={props.browserSelectedSaving()} fallback={<Save class="h-4 w-4" />}>
+                <RefreshCw class="h-4 w-4 animate-spin" />
+              </Show>
+            </button>
             <button
               type="button"
               class="files-header-icon-button"
               title={props.t("instanceShell.rightPanel.actions.refresh")}
               aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
               disabled={props.browserLoading()}
-              style={{ "margin-inline-start": "auto" }}
               onClick={() => props.onRefresh()}
             >
               <RefreshCw class={`h-4 w-4${props.browserLoading() ? " animate-spin" : ""}`} />
@@ -198,4 +226,4 @@ const FilesTab: Component<FilesTabProps> = (props) => {
   return <>{renderContent()}</>
 }
 
-export default FilesTab
+export default FilesTab

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

@@ -1,11 +1,20 @@
-import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
-import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
+import {
+  For,
+  Show,
+  Suspense,
+  createMemo,
+  lazy,
+  type Accessor,
+  type Component,
+  type JSX,
+} from "solid-js"
 
-import { RefreshCw } from "lucide-solid"
+import { ChevronDown, ChevronRight, GitBranch, RefreshCw } from "lucide-solid"
 
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
-import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
+import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, GitChangeEntry, GitChangeListItem } from "../types"
+import { buildGitChangeListItems } from "../git-changes-model"
 
 const LazyMonacoDiffViewer = lazy(() =>
   import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
@@ -16,16 +25,17 @@ interface GitChangesTabProps {
 
   activeSessionId: Accessor<string | null>
 
-  entries: Accessor<GitFileStatus[] | null>
+  entries: Accessor<GitChangeEntry[] | null>
   statusLoading: Accessor<boolean>
   statusError: Accessor<string | null>
 
-  selectedPath: Accessor<string | null>
+  selectedItemId: Accessor<string | null>
+  selectedBulkItemIds: Accessor<Set<string>>
   selectedLoading: Accessor<boolean>
   selectedError: Accessor<string | null>
   selectedBefore: Accessor<string | null>
   selectedAfter: Accessor<string | null>
-  mostChangedPath: Accessor<string | null>
+  mostChangedItemId: Accessor<string | null>
 
   scopeKey: Accessor<string>
 
@@ -36,8 +46,21 @@ interface GitChangesTabProps {
   onContextModeChange: (mode: DiffContextMode) => void
   onWordWrapModeChange: (mode: DiffWordWrapMode) => void
 
-  onOpenFile: (path: string) => void
+  onRowClick: (item: GitChangeListItem, event: MouseEvent) => void
   onRefresh: () => void
+  onInsertContext: (item: GitChangeListItem, selection: { startLine: number; endLine: number }) => void
+  onStageFile: (item: GitChangeListItem) => void
+  onUnstageFile: (item: GitChangeListItem) => void
+  commitMessage: Accessor<string>
+  commitSubmitting: Accessor<boolean>
+  onCommitMessageInput: (value: string) => void
+  onSubmitCommit: () => void
+  branchLabel: Accessor<string | null>
+
+  stagedOpen: Accessor<boolean>
+  unstagedOpen: Accessor<boolean>
+  onToggleStagedOpen: () => void
+  onToggleUnstagedOpen: () => void
 
   listOpen: Accessor<boolean>
   onToggleList: () => void
@@ -52,48 +75,54 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
   const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
   const entries = createMemo(() => (hasSession() ? props.entries() : null))
 
-  const sorted = createMemo<GitFileStatus[]>(() => {
+  const sorted = createMemo<GitChangeEntry[]>(() => {
     const list = entries()
     if (!Array.isArray(list)) return []
     return [...list].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
   })
 
+  const listItems = createMemo<GitChangeListItem[]>(() => buildGitChangeListItems(sorted()))
+
   const totals = createMemo(() => {
-    return sorted().reduce(
+    return listItems().reduce(
       (acc, item) => {
-        acc.additions += typeof item.added === "number" ? item.added : 0
-        acc.deletions += typeof item.removed === "number" ? item.removed : 0
+        acc.additions += typeof item.additions === "number" ? item.additions : 0
+        acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
         return acc
       },
       { additions: 0, deletions: 0 },
     )
   })
+  const stagedItems = createMemo(() => listItems().filter((item) => item.section === "staged"))
+  const unstagedItems = createMemo(() => listItems().filter((item) => item.section === "unstaged"))
+  const canCommit = createMemo(() => stagedItems().length > 0 && props.commitMessage().trim().length > 0 && !props.commitSubmitting())
 
-  const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
-
-  const selectedEntry = createMemo<GitFileStatus | null>(() => {
-    const list = sorted()
-    const selectedPath = props.selectedPath()
-    const fallbackPath = props.mostChangedPath()
+  const selectedEntry = createMemo<GitChangeEntry | null>(() => {
+    const list = listItems()
+    const selectedId = props.selectedItemId()
+    const fallbackId = props.mostChangedItemId()
     const found =
-      list.find((item) => item.path === selectedPath) ||
-      (fallbackPath ? list.find((item) => item.path === fallbackPath) : undefined)
-    return found ?? null
+      list.find((item) => item.id === selectedId) ||
+      (fallbackId ? list.find((item) => item.id === fallbackId) : undefined)
+    return found?.entry ?? 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")
+    if (listItems().length === 0) return props.t("instanceShell.gitChanges.empty")
     return props.t("instanceShell.filesShell.viewerEmpty")
   })
 
+  const binaryViewerActive = createMemo(() => props.selectedError() === props.t("instanceShell.gitChanges.binaryViewer"))
+
   const renderContent = (): JSX.Element => {
     const totalsValue = totals()
     const selected = selectedEntry()
-    const sortedList = sorted()
-    const nonDeletedList = nonDeleted()
+    const allItems = listItems()
+    const stagedList = stagedItems()
+    const unstagedList = unstagedItems()
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
@@ -109,7 +138,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                       selected &&
                       props.selectedBefore() !== null &&
                       props.selectedAfter() !== null &&
-                      selected.status !== "deleted"
+                      true
                         ? {
                             path: selected.path,
                             before: props.selectedBefore() as string,
@@ -139,6 +168,14 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                           viewMode={props.diffViewMode()}
                           contextMode={props.diffContextMode()}
                           wordWrap={props.diffWordWrapMode()}
+                          insertContextLabel={props.t("instanceShell.gitChanges.actions.insertContext")}
+                          onRequestInsertContext={binaryViewerActive() ? undefined : (selection) => {
+                            const selectedId = props.selectedItemId()
+                            if (!selectedId) return
+                            const item = listItems().find((entry) => entry.id === selectedId)
+                            if (!item) return
+                            props.onInsertContext(item, selection)
+                          }}
                         />
                       </Suspense>
                     )}
@@ -163,66 +200,149 @@ 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}>
-          {(item) => (
-            <div
-              class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
-              onClick={() => {
-                props.onOpenFile(item.path)
-              }}
-            >
-              <div class="file-list-item-content">
-                <div class="file-list-item-path" title={item.path}>
-                  <span class="file-path-text">{item.path}</span>
-                </div>
-                <div class="file-list-item-stats">
-                  <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
-                  </Show>
-                  <Show when={item.status !== "deleted"}>
-                    <>
-                      <span class="file-list-item-additions">+{item.added}</span>
-                      <span class="file-list-item-deletions">-{item.removed}</span>
-                    </>
-                  </Show>
-                </div>
+    const renderListItem = (item: GitChangeListItem) => {
+      const isBulkSelected = createMemo(() => props.selectedBulkItemIds().has(item.id))
+      const actionLabel =
+        item.section === "staged"
+          ? props.t("instanceShell.gitChanges.actions.unstage")
+          : props.t("instanceShell.gitChanges.actions.stage")
+
+      const triggerAction = () => {
+        if (item.section === "staged") props.onUnstageFile(item)
+        else props.onStageFile(item)
+      }
+
+      return (
+        <div
+          class={`file-list-item git-change-list-item ${props.selectedItemId() === item.id ? "file-list-item-active" : ""} ${isBulkSelected() ? "git-change-list-item-bulk-selected" : ""}`}
+          onMouseDown={(event) => {
+            if (event.shiftKey || event.ctrlKey || event.metaKey) {
+              event.preventDefault()
+            }
+          }}
+          onClick={(event) => props.onRowClick(item, event)}
+          title={item.path}
+        >
+          <div class="file-list-item-content" title={item.path}>
+            <div class="file-list-item-path" title={item.path}>
+              <span class="file-path-text">{item.path}</span>
+            </div>
+            <div class="git-change-list-item-right">
+              <div class="file-list-item-stats">
+                <span class="file-list-item-additions">+{item.additions}</span>
+                <span class="file-list-item-deletions">-{item.deletions}</span>
               </div>
             </div>
-          )}
-        </For>
-      </Show>
+          </div>
+          <div class="git-change-list-item-actions-zone">
+            <div class="git-change-list-item-actions">
+              <button
+                type="button"
+                class="git-change-row-action"
+                title={actionLabel}
+                aria-label={actionLabel}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  triggerAction()
+                }}
+              >
+                <span
+                  class={`git-change-row-action-glyph ${item.section === "staged" ? "git-change-row-action-glyph-minus" : "git-change-row-action-glyph-plus"}`}
+                  aria-hidden="true"
+                >
+                  <span class="git-change-row-action-bar git-change-row-action-bar-horizontal" />
+                  <Show when={item.section !== "staged"}>
+                    <span class="git-change-row-action-bar git-change-row-action-bar-vertical" />
+                  </Show>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    const renderSection = (
+      title: string,
+      items: GitChangeListItem[],
+      isOpen: boolean,
+      onToggle: () => void,
+    ) => (
+      <div class="git-change-section">
+        <button type="button" class="git-change-section-header" onClick={onToggle}>
+          <span class="git-change-section-header-main">
+            <span class="git-change-section-chevron">
+              {isOpen ? <ChevronDown class="h-3.5 w-3.5" /> : <ChevronRight class="h-3.5 w-3.5" />}
+            </span>
+            <span class="git-change-section-title">{title}</span>
+          </span>
+          <span class="git-change-section-count">{items.length}</span>
+        </button>
+        <Show when={isOpen}>
+          <div class="git-change-section-items">
+            <For each={items}>{(item) => renderListItem(item)}</For>
+          </div>
+        </Show>
+      </div>
     )
 
-    const renderListOverlay = () => (
-      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sortedList}>
-          {(item) => (
-            <div
-              class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
-              onClick={() => props.onOpenFile(item.path)}
-              title={item.path}
-            >
-              <div class="file-list-item-content">
-                <div class="file-list-item-path" title={item.path}>
-                  <span class="file-path-text">{item.path}</span>
-                </div>
-                <div class="file-list-item-stats">
-                  <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
-                  </Show>
-                  <Show when={item.status !== "deleted"}>
-                    <>
-                      <span class="file-list-item-additions">+{item.added}</span>
-                      <span class="file-list-item-deletions">-{item.removed}</span>
-                    </>
+    const renderGroupedList = () => (
+      <Show when={allItems.length > 0} fallback={renderEmptyList()}>
+        <div class="git-change-sections">
+          <div class="git-change-section">
+            <button type="button" class="git-change-section-header" onClick={props.onToggleStagedOpen}>
+              <span class="git-change-section-header-main">
+                <span class="git-change-section-chevron">
+                  {props.stagedOpen() ? <ChevronDown class="h-3.5 w-3.5" /> : <ChevronRight class="h-3.5 w-3.5" />}
+                </span>
+                <span class="git-change-section-title-row">
+                  <span class="git-change-section-title">{props.t("instanceShell.gitChanges.sections.staged")}</span>
+                  <Show when={props.branchLabel()}>
+                    {(label) => (
+                      <span class="status-indicator session-status-list worktree-indicator git-change-section-badge" title={`Branch: ${label()}`}>
+                        <GitBranch class="w-3.5 h-3.5" aria-hidden="true" />
+                        <span class="worktree-indicator-label">{label()}</span>
+                      </span>
+                    )}
                   </Show>
+                </span>
+              </span>
+              <span class="git-change-section-count">{stagedList.length}</span>
+            </button>
+            <Show when={props.stagedOpen()}>
+              <div class="git-change-section-items">
+                <div class="git-change-commit-box">
+                  <div class="git-change-commit-input-wrap">
+                    <textarea
+                      class="git-change-commit-input"
+                      value={props.commitMessage()}
+                      rows={1}
+                      placeholder={props.t("instanceShell.gitChanges.commit.placeholder")}
+                      onInput={(event) => props.onCommitMessageInput(event.currentTarget.value)}
+                    />
+                    <button
+                      type="button"
+                      class="git-change-commit-button git-change-commit-button-overlay"
+                      disabled={!canCommit()}
+                      onClick={() => props.onSubmitCommit()}
+                    >
+                      {props.commitSubmitting()
+                        ? props.t("instanceShell.gitChanges.commit.submitting")
+                        : props.t("instanceShell.gitChanges.commit.submit")}
+                    </button>
+                  </div>
                 </div>
+                <For each={stagedList}>{(item) => renderListItem(item)}</For>
               </div>
-            </div>
+            </Show>
+          </div>
+          {renderSection(
+            props.t("instanceShell.gitChanges.sections.unstaged"),
+            unstagedList,
+            props.unstagedOpen(),
+            props.onToggleUnstagedOpen,
           )}
-        </For>
+        </div>
       </Show>
     )
 
@@ -264,9 +384,10 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 onContextModeChange={props.onContextModeChange}
                 onWordWrapModeChange={props.onWordWrapModeChange}
               />
+
             </>
           }
-        list={{ panel: renderListPanel, overlay: renderListOverlay }}
+        list={{ panel: renderGroupedList, overlay: renderGroupedList }}
         viewer={renderViewer()}
         listOpen={props.listOpen()}
         onToggleList={props.onToggleList}

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

@@ -2,8 +2,9 @@ import { For, Show, type Accessor, type Component } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk/v2"
 import { Accordion } from "@kobalte/core"
 import { Tooltip } from "@kobalte/core/tooltip"
+import Switch from "@suid/material/Switch"
 
-import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+import { BellRing, ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
 
 import type { Instance } from "../../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../../server/src/api-types"
@@ -12,6 +13,7 @@ import type { Session } from "../../../../../types/session"
 import ContextUsagePanel from "../../../../session/context-usage-panel"
 import { TodoListView } from "../../../../tool-call/renderers/todo"
 import InstanceServiceStatus from "../../../../instance-service-status"
+import { isPermissionAutoAcceptEnabled, togglePermissionAutoAccept } from "../../../../../stores/permission-auto-accept"
 
 interface StatusTabProps {
   t: (key: string, vars?: Record<string, any>) => string
@@ -39,6 +41,35 @@ interface StatusTabProps {
 const StatusTab: Component<StatusTabProps> = (props) => {
   const isSectionExpanded = (id: string) => props.expandedItems().includes(id)
 
+  const renderYoloModeSection = () => {
+    const session = props.activeSession()
+    if (!session) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.yoloMode.noSessionSelected")}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div class="rounded-md border border-base bg-surface-secondary px-3 py-2">
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="text-sm font-medium text-primary">{props.t("instanceShell.yoloMode.title")}</div>
+            <p class="mt-1 text-xs text-secondary">{props.t("instanceShell.yoloMode.description")}</p>
+          </div>
+          <Switch
+            checked={isPermissionAutoAcceptEnabled(props.instanceId, session.id)}
+            color="warning"
+            size="small"
+            inputProps={{ "aria-label": props.t("instanceShell.yoloMode.title") }}
+            onChange={() => togglePermissionAutoAccept(props.instanceId, session.id)}
+          />
+        </div>
+      </div>
+    )
+  }
+
   const renderStatusSessionChanges = () => {
     const sessionId = props.activeSessionId()
     if (!sessionId || sessionId === "info") {
@@ -156,6 +187,24 @@ const StatusTab: Component<StatusTabProps> = (props) => {
               <div class="status-process-header">
                 <span class="status-process-title">{process.title}</span>
                 <div class="status-process-meta">
+                  <span
+                    classList={{
+                      "text-success": Boolean(process.notifyEnabled),
+                      "text-tertiary": !process.notifyEnabled,
+                    }}
+                    aria-label={props.t(
+                      process.notifyEnabled
+                        ? "instanceShell.backgroundProcesses.notify.enabled"
+                        : "instanceShell.backgroundProcesses.notify.disabled",
+                    )}
+                    title={props.t(
+                      process.notifyEnabled
+                        ? "instanceShell.backgroundProcesses.notify.enabled"
+                        : "instanceShell.backgroundProcesses.notify.disabled",
+                    )}
+                  >
+                    <BellRing class="h-3.5 w-3.5" />
+                  </span>
                   <span>{props.t("instanceShell.backgroundProcesses.status", { status: process.status })}</span>
                   <Show when={typeof process.outputSizeBytes === "number"}>
                     <span>
@@ -204,6 +253,12 @@ const StatusTab: Component<StatusTabProps> = (props) => {
   }
 
   const statusSections = [
+    {
+      id: "yolo-mode",
+      labelKey: "instanceShell.rightPanel.sections.yoloMode",
+      tooltipKey: "instanceShell.rightPanel.sections.yoloMode.tooltip",
+      render: renderYoloModeSection,
+    },
     {
       id: "session-changes",
       labelKey: "instanceShell.rightPanel.sections.sessionChanges",
@@ -281,29 +336,23 @@ const StatusTab: Component<StatusTabProps> = (props) => {
         <For each={statusSections}>
           {(section) => (
             <Accordion.Item value={section.id} class="right-panel-accordion-item">
-              <Accordion.Header>
+              <Accordion.Header class="right-panel-accordion-header-row">
                 <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>
                   <ChevronDown
                     class={`right-panel-accordion-chevron ${isSectionExpanded(section.id) ? "right-panel-accordion-chevron-expanded" : ""}`}
                   />
                 </Accordion.Trigger>
+                <Tooltip openDelay={200} gutter={4} placement="top">
+                  <Tooltip.Trigger as="button" type="button" class="section-info-trigger" aria-label={props.t(section.tooltipKey)}>
+                    <Info class="section-info-icon" />
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content class="section-info-tooltip">{props.t(section.tooltipKey)}</Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip>
               </Accordion.Header>
               <Accordion.Content class="right-panel-accordion-content">{section.render()}</Accordion.Content>
             </Accordion.Item>

packages/ui/src/components/instance/shell/right-panel/types.ts

@@ -5,3 +5,40 @@ export type DiffViewMode = "split" | "unified"
 export type DiffContextMode = "expanded" | "collapsed"
 
 export type DiffWordWrapMode = "on" | "off"
+
+export type GitChangeStatus = "added" | "modified" | "deleted" | "renamed" | "copied" | "untracked" | string
+
+export interface GitChangeEntry {
+  path: string
+  originalPath?: string | null
+  additions: number
+  deletions: number
+  status: GitChangeStatus
+  stagedStatus?: GitChangeStatus | null
+  unstagedStatus?: GitChangeStatus | null
+  stagedAdditions?: number
+  stagedDeletions?: number
+  unstagedAdditions?: number
+  unstagedDeletions?: number
+}
+
+export type GitChangeSection = "staged" | "unstaged"
+
+export interface GitChangeListItem {
+  id: string
+  path: string
+   originalPath?: string | null
+  section: GitChangeSection
+  status: GitChangeStatus
+  additions: number
+  deletions: number
+  entry: GitChangeEntry
+  displayName: string
+  parentPath: string
+}
+
+export interface GitSelectionDescriptor {
+  itemId: string | null
+  path: string | null
+  section: GitChangeSection | null
+}

packages/ui/src/components/instance/shell/right-panel/useGitChanges.ts

@@ -0,0 +1,470 @@
+import { createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
+import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
+import type { PromptInputApi } from "../../../prompt-input/types"
+import type { GitChangeEntry, GitChangeListItem, GitSelectionDescriptor, RightPanelTab } from "./types"
+
+import { getOrCreateWorktreeClient } from "../../../../stores/worktrees"
+import { requestData } from "../../../../lib/opencode-api"
+import { serverApi } from "../../../../lib/api-client"
+import { serverEvents } from "../../../../lib/server-events"
+import { showToastNotification } from "../../../../lib/notifications"
+import { adaptSdkGitStatusEntries, buildGitChangeListItems } from "./git-changes-model"
+
+type UseGitChangesOptions = {
+  t: (key: string, vars?: Record<string, any>) => string
+  instanceId: string
+  rightPanelTab: Accessor<RightPanelTab>
+  worktreeSlug: Accessor<string>
+  isPhoneLayout: Accessor<boolean>
+  promptInputApi: Accessor<PromptInputApi | null>
+  closeGitList: () => void
+}
+
+export function useGitChanges(options: UseGitChangesOptions) {
+  const [gitStatusEntries, setGitStatusEntries] = createSignal<GitChangeEntry[] | null>(null)
+  const [gitStatusLoading, setGitStatusLoading] = createSignal(false)
+  const [gitStatusError, setGitStatusError] = createSignal<string | null>(null)
+  const [gitSelectedItemId, setGitSelectedItemId] = createSignal<string | null>(null)
+  const [gitBulkSelectedItemIds, setGitBulkSelectedItemIds] = createSignal<Set<string>>(new Set())
+  const [gitBulkSelectionAnchorId, setGitBulkSelectionAnchorId] = createSignal<string | null>(null)
+  const [gitSelectedLoading, setGitSelectedLoading] = createSignal(false)
+  const [gitSelectedError, setGitSelectedError] = createSignal<string | null>(null)
+  const [gitSelectedBefore, setGitSelectedBefore] = createSignal<string | null>(null)
+  const [gitSelectedAfter, setGitSelectedAfter] = createSignal<string | null>(null)
+  const [gitCommitMessage, setGitCommitMessage] = createSignal("")
+  const [gitCommitSubmitting, setGitCommitSubmitting] = createSignal(false)
+  let gitStatusRequestVersion = 0
+  let gitDiffRequestVersion = 0
+  let passiveGitRefreshInFlight = false
+  let pendingGitPassiveRefreshOptions: { forceReloadSelectedDiff?: boolean } | null = null
+  let previousGitChangesActivationKey: string | null = null
+
+  const gitListItems = createMemo(() => buildGitChangeListItems(gitStatusEntries()))
+
+  const clearGitBulkSelection = () => {
+    setGitBulkSelectedItemIds((current) => (current.size === 0 ? current : new Set<string>()))
+    setGitBulkSelectionAnchorId(null)
+  }
+
+  const toggleGitBulkSelection = (itemId: string) => {
+    setGitBulkSelectedItemIds((current) => {
+      const next = new Set(current)
+      if (next.has(itemId)) next.delete(itemId)
+      else next.add(itemId)
+      return next
+    })
+  }
+
+  const addGitBulkRange = (anchorId: string, itemId: string) => {
+    const items = gitListItems()
+    const anchorIndex = items.findIndex((entry) => entry.id === anchorId)
+    const itemIndex = items.findIndex((entry) => entry.id === itemId)
+    if (anchorIndex < 0 || itemIndex < 0) {
+      setGitBulkSelectedItemIds((current) => {
+        const next = new Set(current)
+        next.add(itemId)
+        return next
+      })
+      return
+    }
+
+    const start = Math.min(anchorIndex, itemIndex)
+    const end = Math.max(anchorIndex, itemIndex)
+    const rangeIds = items.slice(start, end + 1).map((entry) => entry.id)
+    setGitBulkSelectedItemIds((current) => {
+      const next = new Set(current)
+      for (const rangeId of rangeIds) {
+        next.add(rangeId)
+      }
+      return next
+    })
+  }
+
+  const describeGitSelection = (itemId: string | null): GitSelectionDescriptor => {
+    if (!itemId) {
+      return { itemId: null, path: null, section: null }
+    }
+    const match = gitListItems().find((item) => item.id === itemId) ?? null
+    return {
+      itemId,
+      path: match?.path ?? null,
+      section: match?.section ?? null,
+    }
+  }
+
+  const gitMostChangedItemId = createMemo<string | null>(() => {
+    const items = gitListItems()
+    if (items.length === 0) return null
+    const candidates = items.filter((item) => item.status !== "deleted")
+    if (candidates.length === 0) return null
+    const best = candidates.reduce((currentBest, item) => {
+      const bestScore = (currentBest?.additions ?? 0) + (currentBest?.deletions ?? 0)
+      const score = (item.additions ?? 0) + (item.deletions ?? 0)
+      if (score > bestScore) return item
+      if (score < bestScore) return currentBest
+      return String(item.id || "").localeCompare(String(currentBest?.id || "")) < 0 ? item : currentBest
+    }, candidates[0])
+    return typeof best?.id === "string" ? best.id : null
+  })
+
+  const resolveValidGitSelection = (selection: GitSelectionDescriptor): string | null => {
+    const items = gitListItems()
+    if (items.length === 0) return null
+    if (selection.itemId && items.some((item) => item.id === selection.itemId)) return selection.itemId
+    if (selection.path && selection.section) {
+      const oppositeSection = selection.section === "staged" ? "unstaged" : "staged"
+      const moved = items.find((item) => item.path === selection.path && item.section === oppositeSection)
+      if (moved) return moved.id
+      const samePath = items.find((item) => item.path === selection.path)
+      if (samePath) return samePath.id
+    }
+    return gitMostChangedItemId()
+  }
+
+  const describeGitSelectionFingerprint = (itemId: string | null) => {
+    if (!itemId) return null
+    const item = gitListItems().find((entry) => entry.id === itemId) ?? null
+    if (!item) return null
+    return `${item.path}::${item.originalPath ?? ""}::${item.section}::${item.status}::${item.additions}::${item.deletions}`
+  }
+
+  const clearSelectedGitDiff = () => {
+    setGitSelectedError(null)
+    setGitSelectedBefore(null)
+    setGitSelectedAfter(null)
+  }
+
+  const clearSelectedGitDiffAndSelection = () => {
+    setGitSelectedItemId(null)
+    clearGitBulkSelection()
+    setGitSelectedLoading(false)
+    clearSelectedGitDiff()
+  }
+
+  const pruneGitBulkSelection = () => {
+    const validIds = new Set(gitListItems().map((item) => item.id))
+    setGitBulkSelectedItemIds((current) => {
+      if (current.size === 0) return current
+      const next = new Set<string>()
+      for (const itemId of current) {
+        if (validIds.has(itemId)) next.add(itemId)
+      }
+      return next.size === current.size ? current : next
+    })
+
+    const anchorId = gitBulkSelectionAnchorId()
+    if (anchorId && !validIds.has(anchorId)) {
+      setGitBulkSelectionAnchorId(null)
+    }
+  }
+
+  createEffect(() => {
+    gitListItems()
+    pruneGitBulkSelection()
+  })
+
+  const loadGitStatus = async (force = false) => {
+    if (!force && gitStatusEntries() !== null) return
+    const slug = options.worktreeSlug()
+    const client = getOrCreateWorktreeClient(options.instanceId, slug)
+    const requestVersion = ++gitStatusRequestVersion
+    setGitStatusLoading(true)
+    setGitStatusError(null)
+    try {
+      const sdkStatusPromise = requestData<GitFileStatus[]>(client.file.status(), "file.status")
+      const detailList = await serverApi.fetchWorktreeGitStatus(options.instanceId, slug)
+      if (requestVersion !== gitStatusRequestVersion) return
+      if (slug !== options.worktreeSlug()) return
+
+      const sdkResult = await Promise.race([
+        sdkStatusPromise.then((value) => ({ kind: "fulfilled" as const, value })),
+        new Promise<{ kind: "timeout" }>((resolve) => setTimeout(() => resolve({ kind: "timeout" }), 1500)),
+      ]).catch(() => null)
+
+      const sdkList = sdkResult && sdkResult.kind === "fulfilled" ? sdkResult.value : null
+      setGitStatusEntries(adaptSdkGitStatusEntries(sdkList, detailList))
+    } catch (error) {
+      if (requestVersion !== gitStatusRequestVersion) return
+      if (slug !== options.worktreeSlug()) return
+      setGitStatusError(error instanceof Error ? error.message : "Failed to load git status")
+      setGitStatusEntries([])
+    } finally {
+      if (requestVersion !== gitStatusRequestVersion) return
+      if (slug !== options.worktreeSlug()) return
+      setGitStatusLoading(false)
+    }
+  }
+
+  async function openGitFile(itemId: string) {
+    const requestVersion = ++gitDiffRequestVersion
+    setGitSelectedItemId(itemId)
+    setGitSelectedLoading(true)
+    clearSelectedGitDiff()
+
+    const item = gitListItems().find((entry) => entry.id === itemId) || null
+    if (!item) {
+      if (requestVersion !== gitDiffRequestVersion) return
+      clearSelectedGitDiffAndSelection()
+      return
+    }
+
+    if (options.isPhoneLayout()) {
+      options.closeGitList()
+    }
+
+    try {
+      const diff = await serverApi.fetchWorktreeGitDiff(options.instanceId, options.worktreeSlug(), {
+        path: item.path,
+        originalPath: item.originalPath ?? null,
+        scope: item.section,
+      })
+      if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
+      if (diff.isBinary) {
+        setGitSelectedError(options.t("instanceShell.gitChanges.binaryViewer"))
+        return
+      }
+      setGitSelectedBefore(diff.before)
+      setGitSelectedAfter(diff.after)
+    } catch (error) {
+      if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
+      setGitSelectedError(error instanceof Error ? error.message : "Failed to load file changes")
+    } finally {
+      if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
+      setGitSelectedLoading(false)
+    }
+  }
+
+  const passiveRefreshGitStatus = async (optionsArg?: { forceReloadSelectedDiff?: boolean }) => {
+    if (options.rightPanelTab() !== "git-changes") return
+    if (passiveGitRefreshInFlight) {
+      pendingGitPassiveRefreshOptions = {
+        forceReloadSelectedDiff:
+          pendingGitPassiveRefreshOptions?.forceReloadSelectedDiff || optionsArg?.forceReloadSelectedDiff || false,
+      }
+      return
+    }
+    if (gitCommitSubmitting()) return
+
+    passiveGitRefreshInFlight = true
+    const refreshSelectionId = gitSelectedItemId()
+    const previousSelection = describeGitSelection(gitSelectedItemId())
+    const previousFingerprint = describeGitSelectionFingerprint(previousSelection.itemId)
+    const hadSelectedDiff =
+      previousSelection.itemId !== null &&
+      (gitSelectedBefore() !== null || gitSelectedAfter() !== null || gitSelectedError() !== null)
+
+    try {
+      await loadGitStatus(true)
+      if (gitSelectedItemId() !== refreshSelectionId) return
+      const nextSelection = resolveValidGitSelection(previousSelection)
+      setGitSelectedItemId(nextSelection)
+
+      if (!nextSelection) {
+        clearSelectedGitDiff()
+        return
+      }
+
+      const nextFingerprint = describeGitSelectionFingerprint(nextSelection)
+      const shouldReloadSelectedDiff =
+        optionsArg?.forceReloadSelectedDiff ||
+        !hadSelectedDiff ||
+        previousFingerprint !== nextFingerprint ||
+        previousSelection.itemId === nextSelection
+
+      if (shouldReloadSelectedDiff) {
+        await openGitFile(nextSelection)
+      }
+    } finally {
+      passiveGitRefreshInFlight = false
+      if (pendingGitPassiveRefreshOptions) {
+        const nextOptions = pendingGitPassiveRefreshOptions
+        pendingGitPassiveRefreshOptions = null
+        void passiveRefreshGitStatus(nextOptions)
+      }
+    }
+  }
+
+  const mutateGitFile = async (item: GitChangeListItem, action: "stage" | "unstage") => {
+    const currentSelection = describeGitSelection(gitSelectedItemId())
+    const fallbackSelection = currentSelection.path === item.path ? currentSelection : describeGitSelection(item.id)
+    const selectedIds = gitBulkSelectedItemIds()
+    const selectedItems = gitListItems().filter((candidate) => selectedIds.has(candidate.id))
+    const bulkTargets = selectedItems.filter((candidate) => candidate.section === item.section)
+    const targetItems = bulkTargets.some((candidate) => candidate.id === item.id) ? bulkTargets : [item]
+    const targetPaths = Array.from(new Set(targetItems.map((candidate) => candidate.path)))
+    try {
+      if (action === "stage") {
+        await serverApi.stageWorktreeGitPaths(options.instanceId, options.worktreeSlug(), { paths: targetPaths })
+      } else {
+        await serverApi.unstageWorktreeGitPaths(options.instanceId, options.worktreeSlug(), { paths: targetPaths })
+      }
+
+      await loadGitStatus(true)
+      clearGitBulkSelection()
+      const nextSelection = resolveValidGitSelection(fallbackSelection)
+      setGitSelectedItemId(nextSelection)
+      if (nextSelection) {
+        await openGitFile(nextSelection)
+      } else {
+        clearSelectedGitDiff()
+      }
+    } catch (error) {
+      showToastNotification({
+        message: error instanceof Error ? error.message : `Failed to ${action} file`,
+        variant: "error",
+      })
+    }
+  }
+
+  const handleGitRowClick = (item: GitChangeListItem, event: MouseEvent) => {
+    if (event.shiftKey) {
+      event.preventDefault()
+      const anchorId = gitBulkSelectionAnchorId() ?? item.id
+      addGitBulkRange(anchorId, item.id)
+      return
+    }
+
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      toggleGitBulkSelection(item.id)
+      setGitBulkSelectionAnchorId(item.id)
+      return
+    }
+
+    clearGitBulkSelection()
+    setGitBulkSelectionAnchorId(item.id)
+    void openGitFile(item.id)
+  }
+
+  const submitGitCommit = async () => {
+    const message = gitCommitMessage().trim()
+    if (!message || gitCommitSubmitting()) return
+
+    setGitCommitSubmitting(true)
+    try {
+      await serverApi.commitWorktreeGitChanges(options.instanceId, options.worktreeSlug(), { message })
+      setGitCommitMessage("")
+      await loadGitStatus(true)
+      const nextSelection = resolveValidGitSelection(describeGitSelection(gitSelectedItemId()))
+      setGitSelectedItemId(nextSelection)
+      if (nextSelection) {
+        await openGitFile(nextSelection)
+      } else {
+        clearSelectedGitDiff()
+      }
+      showToastNotification({
+        message: options.t("instanceShell.gitChanges.commit.success"),
+        variant: "success",
+      })
+    } catch (error) {
+      showToastNotification({
+        message: error instanceof Error ? error.message : options.t("instanceShell.gitChanges.commit.error"),
+        variant: "error",
+      })
+    } finally {
+      setGitCommitSubmitting(false)
+    }
+  }
+
+  const refreshGitStatus = async () => {
+    await loadGitStatus(true)
+    const selected = resolveValidGitSelection(describeGitSelection(gitSelectedItemId()))
+    setGitSelectedItemId(selected)
+    if (selected) {
+      void openGitFile(selected)
+    } else {
+      clearSelectedGitDiff()
+    }
+  }
+
+  const insertGitChangeContext = (item: GitChangeListItem, selection: { startLine: number; endLine: number } | null) => {
+    const startLine = selection?.startLine ?? 1
+    const endLine = selection?.endLine ?? startLine
+    options.promptInputApi()?.insertComment(`Git Diff: File: ${item.path} : ${startLine}-${endLine}`)
+  }
+
+  createEffect(() => {
+    options.worktreeSlug()
+    gitStatusRequestVersion += 1
+    gitDiffRequestVersion += 1
+    passiveGitRefreshInFlight = false
+    pendingGitPassiveRefreshOptions = null
+    setGitStatusEntries(null)
+    setGitStatusError(null)
+    setGitStatusLoading(false)
+    setGitSelectedItemId(null)
+    clearGitBulkSelection()
+    setGitSelectedLoading(false)
+    clearSelectedGitDiff()
+    setGitCommitMessage("")
+    setGitCommitSubmitting(false)
+  })
+
+  createEffect(() => {
+    if (options.rightPanelTab() !== "git-changes") return
+    const items = gitListItems()
+    if (gitStatusEntries() === null) return
+    if (items.length === 0) return
+    if (gitSelectedItemId()) return
+    const next = gitMostChangedItemId()
+    if (!next) return
+    void openGitFile(next)
+  })
+
+  createEffect(() => {
+    const activationKey = options.rightPanelTab() === "git-changes" ? `${options.instanceId}:${options.worktreeSlug()}` : null
+    if (!activationKey) {
+      previousGitChangesActivationKey = null
+      return
+    }
+    if (previousGitChangesActivationKey === activationKey) return
+    previousGitChangesActivationKey = activationKey
+    void passiveRefreshGitStatus()
+  })
+
+  createEffect(() => {
+    if (options.rightPanelTab() !== "git-changes") return
+
+    const unsubscribe = serverEvents.on("instance.event", (event) => {
+      if (event.type !== "instance.event") return
+      if (event.instanceId !== options.instanceId) return
+      const eventType = (event.event as { type?: unknown } | undefined)?.type
+      if (eventType !== "session.updated" && eventType !== "session.diff") return
+      void passiveRefreshGitStatus({ forceReloadSelectedDiff: true })
+    })
+
+    onCleanup(() => {
+      unsubscribe()
+    })
+  })
+
+  createEffect(() => {
+    if (options.rightPanelTab() === "git-changes") return
+    setGitSelectedBefore(null)
+    setGitSelectedAfter(null)
+    setGitSelectedLoading(false)
+    setGitSelectedError(null)
+  })
+
+  return {
+    gitStatusEntries,
+    gitStatusLoading,
+    gitStatusError,
+    gitSelectedItemId,
+    gitBulkSelectedItemIds,
+    gitSelectedLoading,
+    gitSelectedError,
+    gitSelectedBefore,
+    gitSelectedAfter,
+    gitCommitMessage,
+    gitCommitSubmitting,
+    gitMostChangedItemId,
+    setGitCommitMessage,
+    handleGitRowClick,
+    refreshGitStatus,
+    insertGitChangeContext,
+    submitGitCommit,
+    stageGitFile: (item: GitChangeListItem) => void mutateGitFile(item, "stage"),
+    unstageGitFile: (item: GitChangeListItem) => void mutateGitFile(item, "unstage"),
+  }
+}

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

@@ -21,6 +21,10 @@ export const RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-
 export const RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-files-list-open-phone-v1"
 export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-list-open-nonphone-v1"
 export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-list-open-phone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-staged-open-nonphone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-staged-open-phone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-unstaged-open-nonphone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-unstaged-open-phone-v1"
 export const RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY = "opencode-session-right-panel-changes-diff-view-mode-v1"
 export const RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY = "opencode-session-right-panel-changes-diff-context-mode-v1"
 export const RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY = "opencode-session-right-panel-changes-diff-word-wrap-v1"

packages/ui/src/components/markdown.tsx

@@ -83,6 +83,7 @@ interface MarkdownProps {
   isDark?: boolean
   size?: "base" | "sm" | "tight"
   disableHighlight?: boolean
+  escapeRawHtml?: boolean
   onRendered?: () => void
 }
 
@@ -103,11 +104,12 @@ export function Markdown(props: MarkdownProps) {
     const text = decodeHtmlEntitiesLocally(rawText)
     const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
+    const escapeRawHtml = Boolean(props.escapeRawHtml)
     const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : undefined
     const cacheId = resolvePartCacheId(part, text)
     const version = resolvePartVersion(part, text)
-    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${version}`
-    return { part, text, themeKey, highlightEnabled, partId, cacheId, version, requestKey }
+    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${escapeRawHtml ? 1 : 0}:${version}`
+    return { part, text, themeKey, highlightEnabled, escapeRawHtml, partId, cacheId, version, requestKey }
   })
 
   const cacheHandle = useGlobalCache({
@@ -116,20 +118,26 @@ export function Markdown(props: MarkdownProps) {
     scope: "markdown",
     cacheId: () => {
       const { cacheId, themeKey, highlightEnabled } = resolved()
-      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}`
+      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${resolved().escapeRawHtml ? 1 : 0}`
     },
     version: () => resolved().version,
   })
 
-  const commitCacheEntry = (snapshot: ReturnType<typeof resolved>, renderedHtml: string) => {
+  const commitCacheEntry = (
+    snapshot: ReturnType<typeof resolved>,
+    renderedHtml: string,
+    options?: { cache?: boolean },
+  ) => {
     const cacheEntry: RenderCache = {
       text: snapshot.text,
       html: renderedHtml,
       theme: snapshot.themeKey,
-      mode: snapshot.version,
+      mode: `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}`,
     }
     setHtml(renderedHtml)
-    cacheHandle.set(cacheEntry)
+    if (options?.cache ?? true) {
+      cacheHandle.set(cacheEntry)
+    }
     notifyRendered()
   }
 
@@ -138,20 +146,23 @@ export function Markdown(props: MarkdownProps) {
     markdown.setMarkdownTheme(snapshot.themeKey === "dark")
     const rendered = await markdown.renderMarkdown(snapshot.text, {
       suppressHighlight: !snapshot.highlightEnabled,
+      escapeRawHtml: snapshot.escapeRawHtml,
     })
+    const shouldCache = !snapshot.highlightEnabled || !markdown.hasPendingCodeHighlight(snapshot.text)
 
     if (latestRequestKey === snapshot.requestKey) {
-      commitCacheEntry(snapshot, rendered)
+      commitCacheEntry(snapshot, rendered, { cache: shouldCache })
     }
   }
 
   createEffect(() => {
     const snapshot = resolved()
     latestRequestKey = snapshot.requestKey
+    const cacheMode = `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}`
 
     const cacheMatches = (cache: RenderCache | undefined) => {
       if (!cache) return false
-      return cache.theme === snapshot.themeKey && cache.mode === snapshot.version
+      return cache.theme === snapshot.themeKey && cache.mode === cacheMode
     }
 
     const localCache = snapshot.part.renderCache

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

@@ -1,21 +1,22 @@
-import { For, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack } from "solid-js"
+import { For, Index, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack, type Accessor } from "solid-js"
 import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
 import MessageItem from "./message-item"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
-import { partHasRenderableText } from "../types/message"
+import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
 import { buildRecordDisplayData, clearRecordDisplayCacheForInstance } from "../stores/message-v2/record-display-cache"
 import type { MessageRecord } from "../stores/message-v2/types"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { formatTokenTotal } from "../lib/formatters"
 import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
-import { setActiveInstanceId } from "../stores/instances"
+import { selectInstanceTab } from "../stores/app-tabs"
 import { showAlertDialog } from "../stores/alerts"
 import { deleteMessage } from "../stores/session-actions"
 import { useI18n } from "../lib/i18n"
 import type { DeleteHoverState } from "../types/delete-hover"
 import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
+import { createFollowScroll } from "../lib/follow-scroll"
 
 function DeleteUpToIcon() {
   return (
@@ -29,6 +30,7 @@ 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 REASONING_SCROLL_SENTINEL_MARGIN_PX = 48
 
 const LazyToolCall = lazy(() => import("./tool-call"))
 
@@ -130,7 +132,7 @@ function findTaskSessionLocation(sessionId: string, preferredInstanceId?: string
 }
 
 function navigateToTaskSession(location: TaskSessionLocation) {
-  setActiveInstanceId(location.instanceId)
+  selectInstanceTab(location.instanceId)
   const parentToActivate = location.parentId ?? location.sessionId
   setActiveParentSession(location.instanceId, parentToActivate)
   if (location.parentId) {
@@ -229,6 +231,12 @@ function isContentPartType(type: unknown): boolean {
   return type === "text" || type === "file"
 }
 
+function isVisibleContentPart(part: ClientPart): boolean {
+  if (!part || !isContentPartType((part as any).type)) return false
+  if (isHiddenSyntheticTextPart(part)) return false
+  return partHasRenderableText(part)
+}
+
 function MessageContentItem(props: MessageContentItemProps) {
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -262,13 +270,15 @@ function MessageContentItem(props: MessageContentItemProps) {
     return resolved
   })
 
+  const visibleParts = createMemo(() => parts().filter((part) => isVisibleContentPart(part)))
+
   const showAgentMeta = createMemo(() => {
     const current = record()
     if (!current) return false
     if (current.role !== "assistant") return false
 
     const currentParts = parts()
-    if (!currentParts.some((part) => partHasRenderableText(part))) {
+    if (visibleParts().length === 0) {
       return false
     }
 
@@ -284,10 +294,10 @@ function MessageContentItem(props: MessageContentItemProps) {
       if (!isSupportedPartType(part)) continue
 
       if (!isContentPartType((part as any).type)) continue
-      if (partHasRenderableText(part)) {
-        return false
+        if (isVisibleContentPart(part)) {
+          return false
+        }
       }
-    }
 
     return true
   })
@@ -298,7 +308,7 @@ function MessageContentItem(props: MessageContentItemProps) {
         <MessageItem
           record={resolvedRecord()}
           messageInfo={messageInfo()}
-          parts={parts()}
+          parts={visibleParts()}
           instanceId={props.instanceId}
           sessionId={props.sessionId}
           isQueued={isQueued()}
@@ -619,13 +629,12 @@ export default function MessageBlock(props: MessageBlockProps) {
     const lastAssistantIdx = props.lastAssistantIndex()
     const isQueued = current.role === "user" && (lastAssistantIdx === -1 || index > lastAssistantIdx)
 
-    // Intentionally untracked: messageInfoVersion updates should not trigger
-    // a full message block rebuild; record revision is the invalidation key.
-    const info = untrack(messageInfo)
+    const messageInfoVersion = props.store().state.messageInfoVersion[current.id] ?? 0
 
     const cacheSignature = [
       current.id,
       current.revision,
+      messageInfoVersion,
       isQueued ? 1 : 0,
       props.showThinking() ? 1 : 0,
       props.thinkingDefaultExpanded() ? 1 : 0,
@@ -637,6 +646,9 @@ export default function MessageBlock(props: MessageBlockProps) {
       return cachedBlock.block
     }
 
+    // Only capture info after cache check fails - ensures fresh data on version bump
+    const info = untrack(messageInfo)
+
     const { orderedParts } = buildRecordDisplayData(props.instanceId, current)
     const items: MessageBlockItem[] = []
     const blockContentKeys: string[] = []
@@ -803,19 +815,19 @@ export default function MessageBlock(props: MessageBlockProps) {
           data-message-id={resolvedBlock().record.id}
           data-delete-message-hover={isDeleteMessageHovered() ? "true" : undefined}
         >
-          <For each={resolvedBlock().items}>
+          <Index each={resolvedBlock().items}>
             {(item, index) => (
               <Switch>
-                <Match when={item.type === "content"}>
+                <Match when={item().type === "content"}>
                   <MessageContentItem
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     store={props.store}
-                    messageId={(item as ContentDisplayItem).messageId}
-                    startPartId={(item as ContentDisplayItem).startPartId}
+                    messageId={(item() as ContentDisplayItem).messageId}
+                    startPartId={(item() as ContentDisplayItem).startPartId}
                     messageIndex={props.messageIndex}
                     lastAssistantIndex={props.lastAssistantIndex}
-                    showDeleteMessage={index() === 0}
+                    showDeleteMessage={index === 0}
                     onDeleteHoverChange={props.onDeleteHoverChange}
                     onRevert={props.onRevert}
                     onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
@@ -825,18 +837,18 @@ export default function MessageBlock(props: MessageBlockProps) {
                     onContentRendered={props.onContentRendered}
                   />
                 </Match>
-                <Match when={item.type === "tool"}>
+                <Match when={item().type === "tool"}>
                   {(() => {
-                    const toolItem = item as ToolDisplayItem
+                    const toolItem = item() as ToolDisplayItem
                     return (
                       <div class="tool-call-message" data-key={toolItem.key}>
-                        <ToolCallItem
-                          instanceId={props.instanceId}
-                          sessionId={props.sessionId}
-                          store={props.store}
-                          messageId={toolItem.messageId}
-                          partId={toolItem.partId}
-                          showDeleteMessage={index() === 0}
+                          <ToolCallItem
+                            instanceId={props.instanceId}
+                            sessionId={props.sessionId}
+                            store={props.store}
+                            messageId={toolItem.messageId}
+                            partId={toolItem.partId}
+                            showDeleteMessage={index === 0}
                           deleteHover={props.deleteHover}
                           onDeleteHoverChange={props.onDeleteHoverChange}
                           onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
@@ -849,13 +861,13 @@ export default function MessageBlock(props: MessageBlockProps) {
                     )
                   })()}
                 </Match>
-                <Match when={item.type === "step-start"}>
+                <Match when={item().type === "step-start"}>
                   <StepCard
                     kind="start"
-                    part={(item as StepDisplayItem).part}
-                    messageInfo={(item as StepDisplayItem).messageInfo}
+                    part={(item() as StepDisplayItem).part}
+                    messageInfo={(item() as StepDisplayItem).messageInfo}
                     showAgentMeta
-                    showDeleteMessage={index() === 0}
+                    showDeleteMessage={index === 0}
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     messageId={props.messageId}
@@ -865,14 +877,14 @@ export default function MessageBlock(props: MessageBlockProps) {
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
-                <Match when={item.type === "step-finish"}>
+                <Match when={item().type === "step-finish"}>
                   <StepCard
                     kind="finish"
-                    part={(item as StepDisplayItem).part}
-                    messageInfo={(item as StepDisplayItem).messageInfo}
+                    part={(item() as StepDisplayItem).part}
+                    messageInfo={(item() as StepDisplayItem).messageInfo}
                     showUsage={props.showUsageMetrics()}
-                    borderColor={(item as StepDisplayItem).accentColor}
-                    showDeleteMessage={index() === 0}
+                    borderColor={(item() as StepDisplayItem).accentColor}
+                    showDeleteMessage={index === 0}
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
                     messageId={props.messageId}
@@ -882,31 +894,31 @@ export default function MessageBlock(props: MessageBlockProps) {
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
-                <Match when={item.type === "compaction"}>
+                <Match when={item().type === "compaction"}>
                   <CompactionCard
-                    part={(item as CompactionDisplayItem).part}
-                    messageInfo={(item as CompactionDisplayItem).messageInfo}
-                    borderColor={(item as CompactionDisplayItem).accentColor}
+                    part={(item() as CompactionDisplayItem).part}
+                    messageInfo={(item() as CompactionDisplayItem).messageInfo}
+                    borderColor={(item() as CompactionDisplayItem).accentColor}
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
-                    messageId={(item as CompactionDisplayItem).messageId}
-                    showDeleteMessage={index() === 0}
+                    messageId={(item() as CompactionDisplayItem).messageId}
+                    showDeleteMessage={index === 0}
                     onDeleteHoverChange={props.onDeleteHoverChange}
                     onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
                     selectedMessageIds={props.selectedMessageIds}
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
-                <Match when={item.type === "reasoning"}>
+                <Match when={item().type === "reasoning"}>
                   <ReasoningCard
-                    part={(item as ReasoningDisplayItem).part}
-                    messageInfo={(item as ReasoningDisplayItem).messageInfo}
+                    part={(item() as ReasoningDisplayItem).part}
+                    messageInfo={(item() as ReasoningDisplayItem).messageInfo}
                     instanceId={props.instanceId}
                     sessionId={props.sessionId}
-                    messageId={(item as ReasoningDisplayItem).messageId}
-                    showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
-                    defaultExpanded={(item as ReasoningDisplayItem).defaultExpanded}
-                    showDeleteMessage={index() === 0}
+                    messageId={(item() as ReasoningDisplayItem).messageId}
+                    showAgentMeta={(item() as ReasoningDisplayItem).showAgentMeta}
+                    defaultExpanded={(item() as ReasoningDisplayItem).defaultExpanded}
+                    showDeleteMessage={index === 0}
                     onDeleteHoverChange={props.onDeleteHoverChange}
                     onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
                     selectedMessageIds={props.selectedMessageIds}
@@ -916,7 +928,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                 </Match>
               </Switch>
             )}
-          </For>
+          </Index>
         </div>
       )}
     </Show>
@@ -1098,17 +1110,23 @@ function StepCard(props: StepCardProps) {
       return null
     }
     const info = props.messageInfo
-    if (!info || info.role !== "assistant" || !info.tokens) {
+    const part = props.part as any
+    
+    // step-finish parts have tokens embedded; also check messageInfo
+    const partTokens = part?.tokens
+    const infoTokens = info && info.role === "assistant" ? info.tokens : undefined
+    const tokens = partTokens ?? infoTokens
+    if (!tokens) {
       return null
     }
-    const tokens = info.tokens
+    
     return {
       input: tokens.input ?? 0,
       output: tokens.output ?? 0,
       reasoning: tokens.reasoning ?? 0,
       cacheRead: tokens.cache?.read ?? 0,
       cacheWrite: tokens.cache?.write ?? 0,
-      cost: info.cost ?? 0,
+      cost: (part?.cost ?? (info && info.role === "assistant" ? info.cost : 0)) ?? 0,
     }
   }
 
@@ -1293,14 +1311,23 @@ interface ReasoningCardProps {
   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))
+function ReasoningStreamOutput(props: {
+  text: Accessor<string>
+  scrollTopSnapshot: Accessor<number>
+  setScrollTopSnapshot: (next: number) => void
+  onContentRendered?: () => void
+  ariaLabel: string
+}) {
+  let preRef: HTMLPreElement | undefined
   let pendingRenderNotificationFrame: number | null = null
 
+  const followScroll = createFollowScroll({
+    getScrollTopSnapshot: props.scrollTopSnapshot,
+    setScrollTopSnapshot: props.setScrollTopSnapshot,
+    sentinelMarginPx: REASONING_SCROLL_SENTINEL_MARGIN_PX,
+    sentinelClassName: "reasoning-scroll-sentinel",
+  })
+
   const notifyContentRendered = () => {
     if (!props.onContentRendered || typeof requestAnimationFrame !== "function") return
     if (pendingRenderNotificationFrame !== null) {
@@ -1312,6 +1339,15 @@ function ReasoningCard(props: ReasoningCardProps) {
     })
   }
 
+  createEffect(() => {
+    const nextText = props.text()
+    if (preRef && preRef.textContent !== nextText) {
+      preRef.textContent = nextText
+    }
+    followScroll.restoreAfterRender()
+    notifyContentRendered()
+  })
+
   onCleanup(() => {
     if (pendingRenderNotificationFrame !== null) {
       cancelAnimationFrame(pendingRenderNotificationFrame)
@@ -1319,6 +1355,37 @@ function ReasoningCard(props: ReasoningCardProps) {
     }
   })
 
+  return (
+    <div
+      ref={followScroll.registerContainer}
+      class="message-reasoning-output"
+      role="region"
+      aria-label={props.ariaLabel}
+      onScroll={followScroll.handleScroll}
+    >
+      <pre
+        ref={(element) => {
+          preRef = element || undefined
+          if (preRef) {
+            preRef.textContent = props.text() || ""
+          }
+        }}
+        class="message-reasoning-text"
+        dir="auto"
+      />
+      {followScroll.renderSentinel()}
+    </div>
+  )
+}
+
+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 [scrollTopSnapshot, setScrollTopSnapshot] = createSignal(0)
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
   })
@@ -1393,12 +1460,6 @@ function ReasoningCard(props: ReasoningCardProps) {
 
   const canSpeakReasoning = () => reasoningText().trim().length > 0 && speech.canUseSpeech()
 
-  createEffect(() => {
-    if (!expanded()) return
-    reasoningText()
-    notifyContentRendered()
-  })
-
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
   const handleDeleteMessage = async (event: MouseEvent) => {
@@ -1553,9 +1614,13 @@ function ReasoningCard(props: ReasoningCardProps) {
       <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>
-            </div>
+            <ReasoningStreamOutput
+              text={reasoningText}
+              scrollTopSnapshot={scrollTopSnapshot}
+              setScrollTopSnapshot={setScrollTopSnapshot}
+              onContentRendered={props.onContentRendered}
+              ariaLabel={t("messageBlock.reasoning.detailsAriaLabel")}
+            />
           </div>
         </div>
       </Show>

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

@@ -2,7 +2,7 @@ import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { Portal } from "solid-js/web"
 import { Copy, ListStart, Split, Trash, Undo } from "lucide-solid"
 import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
-import { partHasRenderableText } from "../types/message"
+import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
@@ -290,9 +290,9 @@ export default function MessageItem(props: MessageItemProps) {
 
   const getRawContent = () => {
     return props.parts
-      .filter(part => part.type === "text")
-      .map(part => (part as { text?: string }).text || "")
-      .filter(text => text.trim().length > 0)
+      .filter((part) => part.type === "text" && !isHiddenSyntheticTextPart(part))
+      .map((part) => (part as { text?: string }).text || "")
+      .filter((text) => text.trim().length > 0)
       .join("\n\n")
   }
 
@@ -338,7 +338,7 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
-  if (!isUser() && !hasContent() && !isGenerating()) {
+  if (!hasContent() && !isGenerating()) {
     return null
   }
 

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

@@ -33,19 +33,7 @@ export default function MessagePart(props: MessagePartProps) {
   const shouldHideTextPart = () => {
     const part = props.part
     if (!part || part.type !== "text") return false
-
-    const isSynthetic = Boolean((part as any).synthetic)
-    if (!isSynthetic) return false
-
-    // Keep optimistic user prompts visible; hide other synthetic user helper parts.
-    if (props.messageType === "user") {
-      const primaryId = props.primaryUserTextPartId
-      if (!primaryId) return false
-      return part.id !== primaryId
-    }
-
-    // Hide synthetic assistant text.
-    return true
+    return Boolean((part as any).synthetic)
   }
 
 
@@ -146,6 +134,7 @@ export default function MessagePart(props: MessagePartProps) {
                 sessionId={props.sessionId}
                 isDark={isDark()}
                 size={isAssistantMessage() ? "tight" : "base"}
+                escapeRawHtml={props.messageType === "user"}
                 onRendered={props.onRendered}
               />
             </Show>

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

@@ -1,5 +1,5 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
-import { MoreHorizontal, Trash, X } from "lucide-solid"
+import { MoreHorizontal, Pause, Trash, X } from "lucide-solid"
 import Kbd from "./kbd"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
@@ -16,12 +16,14 @@ import { showAlertDialog } from "../stores/alerts"
 import { deleteMessage, deleteMessagePart } from "../stores/session-actions"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { DeleteHoverState } from "../types/delete-hover"
+import { partHasRenderableText } from "../types/message"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
 
 const SCROLL_SENTINEL_MARGIN_PX = 8
 const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
+const STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX = 8
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
 export interface MessageSectionProps {
@@ -40,12 +42,40 @@ export interface MessageSectionProps {
 }
 
 export default function MessageSection(props: MessageSectionProps) {
-  const { preferences } = useConfig()
+  const { preferences, updatePreferences } = useConfig()
   const { t } = useI18n()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
   const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
+  const holdLongAssistantRepliesEnabled = () => preferences().holdLongAssistantReplies ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
   const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
+  const visibleMessageIds = createMemo(() => {
+    const resolvedStore = store()
+    return messageIds().filter((messageId) => {
+      const record = resolvedStore.getMessage(messageId)
+      if (!record) return false
+
+      if (buildTimelineSegments(props.instanceId, record, t).length > 0) {
+        return true
+      }
+
+      if (record.role !== "assistant") {
+        return false
+      }
+
+      const info = resolvedStore.getMessageInfo(messageId)
+      if (!info || info.role !== "assistant") {
+        return false
+      }
+
+      if (info.error) {
+        return true
+      }
+
+      const timeInfo = info.time as { created: number; end?: number } | undefined
+      return Boolean(timeInfo && (timeInfo.end === undefined || timeInfo.end === 0))
+    })
+  })
 
   const scrollCache = useScrollCache({
     instanceId: props.instanceId,
@@ -129,6 +159,8 @@ export default function MessageSection(props: MessageSectionProps) {
     return map
   })
 
+  const lastAssistantMessageId = createMemo(() => store().getLastAssistantMessageId(props.sessionId))
+
   const lastCompactionIndex = createMemo(() => {
     // Depend on a single session revision signal (not every message/part read)
     // to keep reactive overhead small.
@@ -315,15 +347,9 @@ export default function MessageSection(props: MessageSectionProps) {
   }
 
   const lastAssistantIndex = createMemo(() => {
-    const ids = messageIds()
-    const resolvedStore = store()
-    for (let index = ids.length - 1; index >= 0; index--) {
-      const record = resolvedStore.getMessage(ids[index])
-      if (record?.role === "assistant") {
-        return index
-      }
-    }
-    return -1
+    const messageId = lastAssistantMessageId()
+    if (!messageId) return -1
+    return messageIndexById().get(messageId) ?? -1
   })
  
   const [timelineSegments, setTimelineSegments] = createSignal<TimelineSegment[]>([])
@@ -571,7 +597,10 @@ export default function MessageSection(props: MessageSectionProps) {
   const [streamElement, setStreamElement] = createSignal<HTMLDivElement | undefined>()
   const [streamShellElement, setStreamShellElement] = createSignal<HTMLDivElement | undefined>()
 
-  const followToken = createMemo(() => `${sessionRevision()}|${preferenceSignature()}`)
+  // Only preferences should force a follow-token re-anchor. Message/session
+  // revision churn at the end of a turn (message.updated, session.idle, etc.)
+  // should not trigger an immediate scroll-to-bottom.
+  const followToken = createMemo(() => preferenceSignature())
 
   const initialScrollSnapshot = createMemo(() => store().getScrollSnapshot(props.sessionId, MESSAGE_SCROLL_CACHE_SCOPE))
   const initialAutoScroll = createMemo(() => initialScrollSnapshot()?.atBottom ?? true)
@@ -601,6 +630,35 @@ export default function MessageSection(props: MessageSectionProps) {
 
   const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
 
+  const lastVisibleMessageId = createMemo(() => {
+    const ids = visibleMessageIds()
+    return ids[ids.length - 1] ?? null
+  })
+
+  const autoPinHoldTargetKey = createMemo(() => {
+    if (!holdLongAssistantRepliesEnabled()) return null
+    const messageId = lastVisibleMessageId()
+    return isAssistantTextMessage(messageId) ? messageId : null
+  })
+
+  function toggleHoldLongAssistantReplies() {
+    updatePreferences({ holdLongAssistantReplies: !holdLongAssistantRepliesEnabled() })
+  }
+
+  function isAssistantTextMessage(messageId: string | null | undefined) {
+    if (!messageId) return false
+    const resolvedStore = store()
+    const record = resolvedStore.getMessage(messageId)
+    if (!record || record.role !== "assistant") return false
+
+    const { orderedParts } = buildRecordDisplayData(props.instanceId, record)
+    return orderedParts.some((part) => {
+      if ((part as any)?.type !== "text") return false
+      if (partHasRenderableText(part)) return true
+      return typeof (part as { text?: unknown }).text === "string"
+    })
+  }
+
   createEffect(() => {
     const api = listApi()
     if (!api) return
@@ -615,7 +673,7 @@ export default function MessageSection(props: MessageSectionProps) {
     const api = listApi()
     if (!element || !api) return
     if (props.loading) return
-    if (messageIds().length === 0) return
+    if (visibleMessageIds().length === 0) return
     if (didRestoreScroll()) return
 
     scrollCache.restore(element, {
@@ -734,88 +792,93 @@ export default function MessageSection(props: MessageSectionProps) {
     const loading = Boolean(props.loading)
     const ids = messageIds()
 
-    if (loading) {
-      handleClearTimelineSelection()
-      previousTimelineIds = []
-      setTimelineSegments([])
-      seenTimelineMessageIds.clear()
-      seenTimelineSegmentKeys.clear()
-      timelinePartCountsByMessageId.clear()
-      pendingTimelineMessagePartUpdates.clear()
-      if (pendingTimelinePartUpdateFrame !== null) {
-        cancelAnimationFrame(pendingTimelinePartUpdateFrame)
-        pendingTimelinePartUpdateFrame = null
-      }
-      return
-    }
-
-    if (previousTimelineIds.length === 0 && ids.length > 0) {
-      seedTimeline()
-      previousTimelineIds = ids.slice()
-      return
-    }
-
-    if (ids.length < previousTimelineIds.length) {
-      seedTimeline()
-      previousTimelineIds = ids.slice()
-      return
-    }
-
-    if (ids.length === previousTimelineIds.length) {
-      let changedIndex = -1
-      let changeCount = 0
-      for (let index = 0; index < ids.length; index++) {
-        if (ids[index] !== previousTimelineIds[index]) {
-          changedIndex = index
-          changeCount += 1
-          if (changeCount > 1) break
+    // Wrap all iteration of the store-proxied `ids` array in untrack()
+    // to prevent O(n) per-element reactive subscriptions.  The effect
+    // only needs to re-run when `messageIds` (memo) changes.
+    untrack(() => {
+      if (loading) {
+        handleClearTimelineSelection()
+        previousTimelineIds = []
+        setTimelineSegments([])
+        seenTimelineMessageIds.clear()
+        seenTimelineSegmentKeys.clear()
+        timelinePartCountsByMessageId.clear()
+        pendingTimelineMessagePartUpdates.clear()
+        if (pendingTimelinePartUpdateFrame !== null) {
+          cancelAnimationFrame(pendingTimelinePartUpdateFrame)
+          pendingTimelinePartUpdateFrame = null
         }
+        return
       }
-      if (changeCount === 1 && changedIndex >= 0) {
-        const oldId = previousTimelineIds[changedIndex]
-        const newId = ids[changedIndex]
-        if (seenTimelineMessageIds.has(oldId) && !seenTimelineMessageIds.has(newId)) {
-          seenTimelineMessageIds.delete(oldId)
-          seenTimelineMessageIds.add(newId)
-          setTimelineSegments((prev) => {
-            const next = prev.map((segment) => {
-              if (segment.messageId !== oldId) return segment
-              const updatedId = segment.id.replace(oldId, newId)
-              return { ...segment, messageId: newId, id: updatedId }
-            })
-            seenTimelineSegmentKeys.clear()
-            next.forEach((segment) => seenTimelineSegmentKeys.add(makeTimelineKey(segment)))
-            return next
-          })
 
-          // Keep part count tracking in sync with id replacement.
-          const existingPartCount = timelinePartCountsByMessageId.get(oldId)
-          if (existingPartCount !== undefined) {
-            timelinePartCountsByMessageId.delete(oldId)
-            timelinePartCountsByMessageId.set(newId, existingPartCount)
+      if (previousTimelineIds.length === 0 && ids.length > 0) {
+        seedTimeline()
+        previousTimelineIds = [...ids]
+        return
+      }
+
+      if (ids.length < previousTimelineIds.length) {
+        seedTimeline()
+        previousTimelineIds = [...ids]
+        return
+      }
+
+      if (ids.length === previousTimelineIds.length) {
+        let changedIndex = -1
+        let changeCount = 0
+        for (let index = 0; index < ids.length; index++) {
+          if (ids[index] !== previousTimelineIds[index]) {
+            changedIndex = index
+            changeCount += 1
+            if (changeCount > 1) break
           }
+        }
+        if (changeCount === 1 && changedIndex >= 0) {
+          const oldId = previousTimelineIds[changedIndex]
+          const newId = ids[changedIndex]
+          if (seenTimelineMessageIds.has(oldId) && !seenTimelineMessageIds.has(newId)) {
+            seenTimelineMessageIds.delete(oldId)
+            seenTimelineMessageIds.add(newId)
+            setTimelineSegments((prev) => {
+              const next = prev.map((segment) => {
+                if (segment.messageId !== oldId) return segment
+                const updatedId = segment.id.replace(oldId, newId)
+                return { ...segment, messageId: newId, id: updatedId }
+              })
+              seenTimelineSegmentKeys.clear()
+              next.forEach((segment) => seenTimelineSegmentKeys.add(makeTimelineKey(segment)))
+              return next
+            })
 
-          previousTimelineIds = ids.slice()
-          return
+            // Keep part count tracking in sync with id replacement.
+            const existingPartCount = timelinePartCountsByMessageId.get(oldId)
+            if (existingPartCount !== undefined) {
+              timelinePartCountsByMessageId.delete(oldId)
+              timelinePartCountsByMessageId.set(newId, existingPartCount)
+            }
+
+            previousTimelineIds = [...ids]
+            return
+          }
         }
       }
-    }
 
-    const newIds: string[] = []
-    ids.forEach((id) => {
-      if (!seenTimelineMessageIds.has(id)) {
-        newIds.push(id)
-      }
-    })
-
-    if (newIds.length > 0) {
-      newIds.forEach((id) => {
-        seenTimelineMessageIds.add(id)
-        appendTimelineForMessage(id)
+      const newIds: string[] = []
+      ids.forEach((id) => {
+        if (!seenTimelineMessageIds.has(id)) {
+          newIds.push(id)
+        }
       })
-    }
 
-    previousTimelineIds = ids.slice()
+      if (newIds.length > 0) {
+        newIds.forEach((id) => {
+          seenTimelineMessageIds.add(id)
+          appendTimelineForMessage(id)
+        })
+      }
+
+      previousTimelineIds = [...ids]
+    })
   })
 
   function clearPendingTimelinePartUpdateFrame() {
@@ -886,36 +949,49 @@ export default function MessageSection(props: MessageSectionProps) {
   createEffect(() => {
     if (props.loading) return
     const ids = messageIds()
-    const resolvedStore = store()
+    // Also re-run when sessionRevision bumps (covers part additions within
+    // existing messages) but read individual records inside untrack() to
+    // avoid creating O(n) fine-grained subscriptions.
+    sessionRevision()
 
-    let hasChanges = false
-    for (const messageId of ids) {
-      const record = resolvedStore.getMessage(messageId)
-      const partCount = record?.partIds.length ?? 0
-      const previousCount = timelinePartCountsByMessageId.get(messageId)
+    // Wrap the iteration in untrack() so that accessing individual elements
+    // of the store-proxied `ids` array does not create O(n) per-element
+    // reactive subscriptions.  We only need to re-run when the memo
+    // (messageIds) or sessionRevision changes — not per-element.
+    untrack(() => {
+      const resolvedStore = store()
+      const idsSet = new Set(ids)
+      let hasChanges = false
 
-      if (previousCount === undefined) {
-        timelinePartCountsByMessageId.set(messageId, partCount)
-        continue
+      for (const messageId of ids) {
+        const record = resolvedStore.getMessage(messageId)
+        const partCount = record?.partIds.length ?? 0
+        const previousCount = timelinePartCountsByMessageId.get(messageId)
+
+        if (previousCount === undefined) {
+          timelinePartCountsByMessageId.set(messageId, partCount)
+          continue
+        }
+
+        if (previousCount !== partCount) {
+          timelinePartCountsByMessageId.set(messageId, partCount)
+          pendingTimelineMessagePartUpdates.add(messageId)
+          hasChanges = true
+        }
       }
 
-      if (previousCount !== partCount) {
-        timelinePartCountsByMessageId.set(messageId, partCount)
-        pendingTimelineMessagePartUpdates.add(messageId)
-        hasChanges = true
+      // Drop tracking for ids that are no longer present.
+      // Use the Set for O(1) lookups instead of ids.includes() which is O(n).
+      for (const trackedId of Array.from(timelinePartCountsByMessageId.keys())) {
+        if (!idsSet.has(trackedId)) {
+          timelinePartCountsByMessageId.delete(trackedId)
+        }
       }
-    }
 
-    // Drop tracking for ids that are no longer present.
-    for (const trackedId of Array.from(timelinePartCountsByMessageId.keys())) {
-      if (!ids.includes(trackedId)) {
-        timelinePartCountsByMessageId.delete(trackedId)
+      if (hasChanges) {
+        scheduleTimelinePartUpdateFlush()
       }
-    }
-
-    if (hasChanges) {
-      scheduleTimelinePartUpdateFlush()
-    }
+    })
   })
 
   createEffect(() => {
@@ -989,7 +1065,7 @@ export default function MessageSection(props: MessageSectionProps) {
         data-scroll-buttons={scrollButtonsCount()}
       >
         <VirtualFollowList
-          items={messageIds}
+          items={visibleMessageIds}
           getKey={(messageId) => messageId}
           getAnchorId={getMessageAnchorId}
           getKeyFromAnchorId={getMessageIdFromAnchorId}
@@ -1003,6 +1079,12 @@ export default function MessageSection(props: MessageSectionProps) {
           initialAutoScroll={initialAutoScroll}
           resetKey={() => props.sessionId}
           followToken={followToken}
+          autoPinHoldTargetKey={autoPinHoldTargetKey}
+          autoPinHoldTopThresholdPx={STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX}
+          resolveAutoPinHoldElement={(itemWrapper, key) => {
+            const candidates = Array.from(itemWrapper.querySelectorAll<HTMLElement>(`.message-item-base[data-message-id="${key}"][data-message-role="assistant"]`))
+            return candidates[candidates.length - 1] ?? null
+          }}
           onScroll={() => {
             clearQuoteSelection()
             scrollCache.persist(streamElement())
@@ -1033,9 +1115,55 @@ export default function MessageSection(props: MessageSectionProps) {
           scrollToBottomAriaLabel={() => t("messageSection.scroll.toLatestAriaLabel")}
           registerApi={(api) => setListApi(api)}
           registerState={(state) => setListState(state)}
+          renderControls={(state, api) => (
+            <div class="message-scroll-button-wrapper">
+              <button
+                type="button"
+                class="message-scroll-button"
+                data-active={holdLongAssistantRepliesEnabled() ? "true" : "false"}
+                onClick={toggleHoldLongAssistantReplies}
+                aria-label={
+                  holdLongAssistantRepliesEnabled()
+                    ? t("messageSection.scroll.disableHoldAriaLabel")
+                    : t("messageSection.scroll.enableHoldAriaLabel")
+                }
+                title={
+                  holdLongAssistantRepliesEnabled()
+                    ? t("messageSection.scroll.disableHoldAriaLabel")
+                    : t("messageSection.scroll.enableHoldAriaLabel")
+                }
+              >
+                <Pause class="message-scroll-icon message-scroll-icon--toggle w-4 h-4" aria-hidden="true" />
+              </button>
+              <Show when={state.showScrollTopButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => api.scrollToTop()}
+                  aria-label={t("messageSection.scroll.toFirstAriaLabel")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↑
+                  </span>
+                </button>
+              </Show>
+              <Show when={state.showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => api.scrollToBottom()}
+                  aria-label={t("messageSection.scroll.toLatestAriaLabel")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↓
+                  </span>
+                </button>
+              </Show>
+            </div>
+          )}
           renderBeforeItems={() => (
             <>
-              <Show when={!props.loading && messageIds().length === 0}>
+              <Show when={!props.loading && visibleMessageIds().length === 0}>
                 <div class="empty-state">
                   <div class="empty-state-content">
                     <div class="flex flex-col items-center gap-3 mb-6">

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

@@ -1,7 +1,10 @@
 import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
+import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
+import { Portal } from "solid-js/web"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
+import { isHiddenSyntheticTextPart } 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"
@@ -53,6 +56,7 @@ const MAX_TOOLTIP_LENGTH = 220
 const LONG_PRESS_MS = 500
 const JITTER_THRESHOLD = 10
 const ABSOLUTE_TOKEN_CAP = 10000
+const TIMELINE_VIRTUALIZER_BUFFER_PX = 240
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
@@ -65,6 +69,13 @@ interface PendingSegment {
   hasPrimaryText: boolean
 }
 
+interface TimelineSegmentState {
+  deleteHovered: boolean
+  deleteSelected: boolean
+  hasActivePermission: boolean
+  hidden: boolean
+}
+
 function truncateText(value: string): string {
   if (value.length <= MAX_TOOLTIP_LENGTH) {
     return value
@@ -105,6 +116,7 @@ function collectReasoningText(part: ClientPart): string {
 
 function collectTextFromPart(part: ClientPart, t: (key: string, params?: Record<string, unknown>) => string): string {
   if (!part) return ""
+  if (isHiddenSyntheticTextPart(part)) return ""
   if (typeof (part as any).text === "string") {
     return (part as any).text as string
   }
@@ -349,6 +361,13 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     }
   }
 
+  const clearHoverPreview = () => {
+    clearHoverTimer()
+    clearCloseTimer()
+    setHoveredSegment(null)
+    setHoverAnchorRect(null)
+  }
+
   const scheduleClose = () => {
     if (typeof window === "undefined") return
     clearHoverTimer()
@@ -356,8 +375,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     // Small delay so the pointer can travel from the segment to the tooltip.
     closeTimer = window.setTimeout(() => {
       closeTimer = null
-      setHoveredSegment(null)
-      setHoverAnchorRect(null)
+      clearHoverPreview()
     }, 160)
   }
 
@@ -397,8 +415,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   })
 
   onCleanup(() => {
-    clearHoverTimer()
-    clearCloseTimer()
+    clearHoverPreview()
   })
 
   // --- Selection & histogram rib state ---
@@ -416,6 +433,8 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   // 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)
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
+  const [virtualizerHandle, setVirtualizerHandle] = createSignal<VirtualizerHandle | undefined>()
   let scrollContainerRef: HTMLDivElement | undefined
   let xrayOverlayRef: HTMLDivElement | undefined
 
@@ -447,6 +466,12 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   }
 
   const handleScroll = () => {
+    if (renderVirtualizedTimeline()) {
+      if (hoveredSegment()) {
+        clearHoverPreview()
+      }
+      return
+    }
     if (!isSelectionActive()) return
     if (!scrollContainerRef || !xrayOverlayRef) return
     xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
@@ -475,6 +500,12 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     }
   })
 
+  const renderVirtualizedTimeline = createMemo(() => !isSelectionActive())
+
+  createEffect(on(renderVirtualizedTimeline, () => {
+    clearHoverPreview()
+  }))
+
   const maxRibWidth = createMemo(() => Math.round(windowWidth() * 0.5))
 
   // Compute fresh char counts from the store. segment.totalChars can be stale for
@@ -577,7 +608,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         wasLongPress = true
 
         // Scroll anchoring: preserve visual position of the pressed badge.
-        const btn = buttonRefs.get(segment.id)
+        const btn = renderVirtualizedTimeline() ? null : buttonRefs.get(segment.id)
         let anchorOffset: number | null = null
         if (btn && scrollContainerRef) {
           anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
@@ -629,9 +660,17 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
 
   createEffect(on(() => props.activeSegmentId, (activeId) => {
     if (!activeId) return
-    const element = buttonRefs.get(activeId)
-    if (!element) return
     const timer = typeof window !== "undefined" ? window.setTimeout(() => {
+      if (renderVirtualizedTimeline()) {
+        const index = segmentIndexById().get(activeId)
+        if (index !== undefined) {
+          virtualizerHandle()?.scrollToIndex(index, { align: "nearest", smooth: true })
+        }
+        return
+      }
+
+      const element = buttonRefs.get(activeId)
+      if (!element) return
       element.scrollIntoView({ block: "nearest", behavior: "smooth" })
     }, 120) : null
     onCleanup(() => {
@@ -682,60 +721,239 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     return map
   })
 
+  const segmentIndexById = createMemo(() => {
+    const map = new Map<string, number>()
+    for (let i = 0; i < props.segments.length; i++) map.set(props.segments[i].id, i)
+    return map
+  })
+
+  const segmentStates = createMemo(() => {
+    const hover = deleteHover()
+    const selectedMessages = props.selectedMessageIds?.()
+    const expandedMessages = props.expandedMessageIds?.()
+    const resolvedStore = store()
+    const indexMap = messageIdToSessionIndex()
+    const selectionActive = isSelectionActive()
+    const result = new Map<string, TimelineSegmentState>()
+
+    for (const segment of props.segments) {
+      let deleteHovered = false
+      if (hover.kind === "message") {
+        deleteHovered = hover.messageId === segment.messageId
+      } else if (hover.kind === "deleteUpTo") {
+        const targetIndex = indexMap.get(hover.messageId)
+        const segmentIndex = indexMap.get(segment.messageId)
+        deleteHovered = targetIndex !== undefined && segmentIndex !== undefined && segmentIndex >= targetIndex
+      }
+
+      const deleteSelected = selectedMessages?.has(segment.messageId) ?? false
+
+      let hasActivePermission = false
+      if (segment.type === "tool") {
+        const partIds = segment.toolPartIds ?? []
+        for (const partId of partIds) {
+          const permissionState = resolvedStore.getPermissionState(segment.messageId, partId)
+          if (permissionState?.active) {
+            hasActivePermission = true
+            break
+          }
+        }
+      }
+
+      const hidden = segment.type === "tool" && !(
+        showTools()
+        || expandedMessages?.has(segment.messageId)
+        || selectionActive
+        || props.activeSegmentId === segment.id
+        || hasActivePermission
+        || deleteHovered
+        || deleteSelected
+      )
+
+      result.set(segment.id, {
+        deleteHovered,
+        deleteSelected,
+        hasActivePermission,
+        hidden,
+      })
+    }
+
+    return result
+  })
+
+  const segmentStateFor = (segmentId: string): TimelineSegmentState => {
+    return segmentStates().get(segmentId) ?? {
+      deleteHovered: false,
+      deleteSelected: false,
+      hasActivePermission: false,
+      hidden: false,
+    }
+  }
+
+  const segmentSpacerHeights = createMemo(() => {
+    const states = segmentStates()
+    const result = new Map<string, string>()
+    let previousVisible: TimelineSegment | null = null
+
+    for (let index = 0; index < props.segments.length; index += 1) {
+      const segment = props.segments[index]
+      const state = states.get(segment.id)
+
+      if (state?.hidden) {
+        result.set(segment.id, "0")
+        continue
+      }
+
+      if (!previousVisible) {
+        result.set(segment.id, "0")
+        previousVisible = segment
+        continue
+      }
+
+      const previousRaw = index > 0 ? props.segments[index - 1] : null
+      const startsVisibleToolGroup = segment.type === "tool"
+        && (previousVisible.type !== "tool" || previousVisible.messageId !== segment.messageId)
+      const startsCollapsedToolGroup = segment.type === "assistant"
+        && previousVisible.messageId !== segment.messageId
+        && messagesWithTools().has(segment.messageId)
+        && previousRaw?.type === "tool"
+        && previousRaw.messageId === segment.messageId
+      const followsVisibleGroupParent = (segment.type === "user" || segment.type === "compaction")
+        && previousVisible.type === "assistant"
+        && messagesWithTools().has(previousVisible.messageId)
+
+      const gapUnits = 1 + (startsVisibleToolGroup || startsCollapsedToolGroup || followsVisibleGroupParent ? 1 : 0)
+      result.set(
+        segment.id,
+        gapUnits === 1
+          ? "var(--message-timeline-segment-gap)"
+          : "calc(var(--message-timeline-segment-gap) * 2)",
+      )
+
+      previousVisible = segment
+    }
+
+    return result
+  })
+
   return (
     <div class="message-timeline-container">
       <div
-        ref={scrollContainerRef}
+        ref={(element) => {
+          scrollContainerRef = element
+          setScrollElement(element)
+        }}
         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))
+        <Show
+          when={renderVirtualizedTimeline()}
+          fallback={(
+            <For each={props.segments}>
+              {(segment, segIndex) => {
+                onCleanup(() => buttonRefs.delete(segment.id))
+                const isActive = () => props.activeSegmentId === segment.id
+                const isSelected = () => props.selectedIds?.().has(segment.id)
+                const state = () => segmentStateFor(segment.id)
+                const isDeleteHovered = () => state().deleteHovered
+                const isDeleteSelected = () => state().deleteSelected
+                const hasActivePermission = () => state().hasActivePermission
+                const isHidden = () => state().hidden
+
+                const groupRole = (): "child" | "parent" | "none" => {
+                  if (segment.type === "tool") return "child"
+                  if (segment.type === "assistant" && messagesWithTools().has(segment.messageId)) return "parent"
+                  return "none"
+                }
+
+                const shortLabelContent = () => {
+                  if (segment.type === "tool") {
+                    if (hasActivePermission()) {
+                      return <ShieldAlert 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 (
+                  <div class="message-timeline-item">
+                    <div aria-hidden="true" class="message-timeline-item-spacer" style={{ height: segmentSpacerHeights().get(segment.id) ?? "0" }} />
+                    <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()}` : ""}`}
+                      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
+                        }
+
+                        const btn = buttonRefs.get(segment.id)
+                        const stableBtn = renderVirtualizedTimeline() ? null : btn
+                        let anchorOffset: number | null = null
+                        if (stableBtn && scrollContainerRef) {
+                          anchorOffset = stableBtn.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) {
+                          props.onSegmentClick?.(segment)
+                        } else {
+                          props.onSegmentClick?.(segment)
+                        }
+
+                        if (anchorOffset !== null && stableBtn && scrollContainerRef) {
+                          const desired = stableBtn.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>
+                  </div>
+                )
+              }}
+            </For>
+          )}
+        >
+          <Virtualizer ref={setVirtualizerHandle} data={props.segments} scrollRef={scrollElement()} bufferSize={TIMELINE_VIRTUALIZER_BUFFER_PX}>
+            {(segment, index) => {
+              const segIndex = () => index()
             const isActive = () => props.activeSegmentId === segment.id
             const isSelected = () => props.selectedIds?.().has(segment.id)
-
-            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 isDeleteSelected = () => {
-              const selected = props.selectedMessageIds?.()
-              if (!selected) return false
-              return selected.has(segment.messageId)
-            }
-
-            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())
+            const state = () => segmentStateFor(segment.id)
+            const isDeleteHovered = () => state().deleteHovered
+            const isDeleteSelected = () => state().deleteSelected
+            const hasActivePermission = () => state().hasActivePermission
+            const isHidden = () => state().hidden
 
             // Group visual indicators: tools belong to the same message as their
             // assistant.  Uses messageId for correctness (not positional adjacency).
@@ -744,18 +962,10 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
               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()) {
+                  if (hasActivePermission()) {
                    return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
                  }
                  return segment.shortLabel ?? getToolIcon("tool")
@@ -765,95 +975,92 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                }
                if (segment.type === "user") {
                  return <UserIcon class="message-timeline-icon" aria-hidden="true" />
-               }
-               return <BotIcon 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" : ""}`}
-
-                  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
+              return (
+               <div class="message-timeline-item">
+                  <div aria-hidden="true" class="message-timeline-item-spacer" style={{ height: segmentSpacerHeights().get(segment.id) ?? "0" }} />
+                  <button
+                    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()}` : ""}`}
+                   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
                      }
-                   }
-                 }}
-                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>
+
+                     const btn = buttonRefs.get(segment.id)
+                     const stableBtn = renderVirtualizedTimeline() ? null : btn
+                     let anchorOffset: number | null = null
+                     if (stableBtn && scrollContainerRef) {
+                       anchorOffset = stableBtn.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) {
+                       props.onSegmentClick?.(segment)
+                     } else {
+                       props.onSegmentClick?.(segment)
+                     }
+
+                     if (anchorOffset !== null && stableBtn && scrollContainerRef) {
+                       const desired = stableBtn.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>
+               </div>
+             )
+            }}
+          </Virtualizer>
+        </Show>
         <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>
+              <Portal>
+                <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>
+              </Portal>
             )
           }}
         </Show>

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

@@ -19,7 +19,12 @@ import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
 import { usePromptPicker } from "./prompt-input/usePromptPicker"
 import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
 import { usePromptVoiceInput } from "./prompt-input/usePromptVoiceInput"
-import { canUseConversationMode, isConversationModeEnabled, toggleConversationMode } from "../stores/conversation-speech"
+import {
+  canUseConversationMode,
+  clearConversationPlaybackForInstance,
+  isConversationModeEnabled,
+  toggleConversationMode,
+} from "../stores/conversation-speech"
 const log = getLogger("actions")
 const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
 
@@ -115,6 +120,11 @@ export default function PromptInput(props: PromptInputProps) {
           insertQuotedSelection(text)
         }
       },
+      insertComment: (text: string) => {
+        const normalized = (text ?? "").replace(/\r/g, "").trim()
+        if (!normalized) return
+        insertBlockContent(`${normalized}\n\n`)
+      },
       expandTextAttachment: (attachmentId: string) => {
         const attachment = attachments().find((a) => a.id === attachmentId)
         if (!attachment) return
@@ -492,6 +502,8 @@ export default function PromptInput(props: PromptInputProps) {
   const beginVoicePress = (event?: PointerEvent | KeyboardEvent) => {
     if (voiceButtonPressed || props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput()) return
     voiceButtonPressed = true
+    // Treat a mic press as barge-in: stop any active assistant speech before listening.
+    clearConversationPlaybackForInstance(props.instanceId)
 
     if (event instanceof PointerEvent) {
       const target = event.currentTarget
@@ -533,6 +545,10 @@ export default function PromptInput(props: PromptInputProps) {
               mode={pickerMode()}
               onClose={handlePickerClose}
               onSelect={handlePickerSelect}
+              onSubmitWithoutSelection={() => {
+                handlePickerClose()
+                void handleSend()
+              }}
               agents={instanceAgents()}
               commands={getCommands(props.instanceId)}
               instanceClient={instance()!.client}
@@ -565,113 +581,6 @@ export default function PromptInput(props: PromptInputProps) {
                 autoCapitalize="off"
                 autocomplete="off"
               />
-              <div class="prompt-nav-buttons">
-                <div class="prompt-nav-column prompt-nav-column-left">
-                  <Show when={showVoiceInput()}>
-                    <button
-                      type="button"
-                      class={`prompt-voice-button prompt-nav-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
-                      onPointerDown={(event) => {
-                        event.preventDefault()
-                        beginVoicePress(event)
-                      }}
-                      onPointerUp={(event) => {
-                        event.preventDefault()
-                        endVoicePress()
-                      }}
-                      onPointerCancel={() => endVoicePress()}
-                      onLostPointerCapture={() => endVoicePress()}
-                      onKeyDown={(event) => {
-                        if (event.repeat) return
-                        if (event.key !== " " && event.key !== "Enter") return
-                        event.preventDefault()
-                        beginVoicePress(event)
-                      }}
-                      onKeyUp={(event) => {
-                        if (event.key !== " " && event.key !== "Enter") return
-                        event.preventDefault()
-                        endVoicePress()
-                      }}
-                      onBlur={() => endVoicePress()}
-                      disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
-                      aria-label={voiceInput.buttonTitle()}
-                      title={voiceInput.buttonTitle()}
-                    >
-                      <Show
-                        when={voiceInput.isRecording()}
-                        fallback={
-                          <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
-                            <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
-                          </Show>
-                        }
-                      >
-                        <Mic class="h-4 w-4" aria-hidden="true" />
-                      </Show>
-                    </button>
-                  </Show>
-                  <Show when={showConversationToggle()}>
-                    <button
-                      type="button"
-                      class={`prompt-voice-button prompt-nav-voice-button prompt-conversation-button ${conversationModeEnabled() ? "is-active" : ""}`}
-                      onClick={() => toggleConversationMode(props.instanceId)}
-                      disabled={!conversationModeEnabled() && !canToggleConversationMode()}
-                      aria-pressed={conversationModeEnabled()}
-                      aria-label={conversationModeButtonTitle()}
-                      title={conversationModeButtonTitle()}
-                    >
-                      <Volume2 class="h-4 w-4" aria-hidden="true" />
-                    </button>
-                  </Show>
-                  <button
-                    type="button"
-                    class="prompt-clear-button"
-                    onClick={handleClearPrompt}
-                    disabled={!canClearPrompt()}
-                    aria-label={t("promptInput.clear.ariaLabel")}
-                    title={t("promptInput.clear.title")}
-                  >
-                    <X class="h-4 w-4" aria-hidden="true" />
-                  </button>
-                </div>
-                <div class="prompt-nav-column prompt-nav-column-right">
-                  <ExpandButton
-                    expandState={expandState}
-                    onToggleExpand={handleExpandToggle}
-                  />
-                  <Show when={hasHistory()}>
-                    <button
-                      type="button"
-                      class="prompt-history-button"
-                      onClick={() =>
-                        selectPreviousHistory({
-                          force: true,
-                          isPickerOpen: showPicker(),
-                          getTextarea: () => textareaRef,
-                        })
-                      }
-                      disabled={!canHistoryGoPrevious()}
-                      aria-label={t("promptInput.history.previousAriaLabel")}
-                    >
-                      <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
-                    </button>
-                    <button
-                      type="button"
-                      class="prompt-history-button"
-                      onClick={() =>
-                        selectNextHistory({
-                          force: true,
-                          isPickerOpen: showPicker(),
-                          getTextarea: () => textareaRef,
-                        })
-                      }
-                      disabled={!canHistoryGoNext()}
-                      aria-label={t("promptInput.history.nextAriaLabel")}
-                    >
-                      <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
-                    </button>
-                  </Show>
-                </div>
-              </div>
               <Show when={shouldShowOverlay()}>
                 <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
                   <Show
@@ -726,6 +635,116 @@ export default function PromptInput(props: PromptInputProps) {
         </div>
 
         <div class="prompt-input-actions">
+          <div class="prompt-nav-buttons">
+            <div class="prompt-nav-column prompt-nav-column-left">
+              <Show when={showVoiceInput()}>
+                <button
+                  type="button"
+                  class={`prompt-voice-button prompt-nav-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
+                  onPointerDown={(event) => {
+                    event.preventDefault()
+                    beginVoicePress(event)
+                  }}
+                  onPointerUp={(event) => {
+                    event.preventDefault()
+                    endVoicePress()
+                  }}
+                  onPointerCancel={() => endVoicePress()}
+                  onLostPointerCapture={() => endVoicePress()}
+                  onKeyDown={(event) => {
+                    if (event.repeat) return
+                    if (event.key !== " " && event.key !== "Enter") return
+                    event.preventDefault()
+                    beginVoicePress(event)
+                  }}
+                  onKeyUp={(event) => {
+                    if (event.key !== " " && event.key !== "Enter") return
+                    event.preventDefault()
+                    endVoicePress()
+                  }}
+                  onBlur={() => endVoicePress()}
+                  disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
+                  aria-label={voiceInput.buttonTitle()}
+                  title={voiceInput.buttonTitle()}
+                >
+                  <Show
+                    when={voiceInput.isRecording()}
+                    fallback={
+                      <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
+                        <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
+                      </Show>
+                    }
+                  >
+                    <Mic class="h-4 w-4" aria-hidden="true" />
+                  </Show>
+                </button>
+              </Show>
+              <Show when={showConversationToggle()}>
+                <button
+                  type="button"
+                  class={`prompt-voice-button prompt-nav-voice-button prompt-conversation-button ${conversationModeEnabled() ? "is-active" : ""}`}
+                  onClick={() => toggleConversationMode(props.instanceId)}
+                  disabled={!conversationModeEnabled() && !canToggleConversationMode()}
+                  aria-pressed={conversationModeEnabled()}
+                  aria-label={conversationModeButtonTitle()}
+                  title={conversationModeButtonTitle()}
+                >
+                  <Volume2 class="h-4 w-4" aria-hidden="true" />
+                </button>
+              </Show>
+              <button
+                type="button"
+                class="prompt-clear-button"
+                onClick={handleClearPrompt}
+                disabled={!canClearPrompt()}
+                aria-label={t("promptInput.clear.ariaLabel")}
+                title={t("promptInput.clear.title")}
+              >
+                <X class="h-4 w-4" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="prompt-nav-column prompt-nav-column-right">
+              <ExpandButton
+                expandState={expandState}
+                onToggleExpand={handleExpandToggle}
+              />
+              <Show when={hasHistory()}>
+                <button
+                  type="button"
+                  class="prompt-history-button"
+                  onClick={() =>
+                    selectPreviousHistory({
+                      force: true,
+                      isPickerOpen: showPicker(),
+                      getTextarea: () => textareaRef,
+                    })
+                  }
+                  disabled={!canHistoryGoPrevious()}
+                  aria-label={t("promptInput.history.previousAriaLabel")}
+                >
+                  <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
+                </button>
+                <button
+                  type="button"
+                  class="prompt-history-button"
+                  onClick={() =>
+                    selectNextHistory({
+                      force: true,
+                      isPickerOpen: showPicker(),
+                      getTextarea: () => textareaRef,
+                    })
+                  }
+                  disabled={!canHistoryGoNext()}
+                  aria-label={t("promptInput.history.nextAriaLabel")}
+                >
+                  <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </Show>
+            </div>
+          </div>
+        </div>
+
+        <div class="prompt-input-primary-actions">
           <button
             type="button"
             class="stop-button"

packages/ui/src/components/prompt-input/types.ts

@@ -7,6 +7,7 @@ export type PromptInsertMode = "quote" | "code"
 
 export interface PromptInputApi {
   insertSelection(text: string, mode: PromptInsertMode): void
+  insertComment(text: string): void
   expandTextAttachment(attachmentId: string): void
   removeAttachment(attachmentId: string): void
   setPromptText(text: string, opts?: { focus?: boolean }): void