Bump version to 0.7.1

feat: Implement expandable chat input with double-click detection and gradient tooltip

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,71 @@
+name: Bug Report
+description: Report a bug or regression in CodeNomad
+labels:
+  - bug
+title: "[Bug]: "
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for filing a bug report! Please review open issues before submitting a new one and provide as much detail as possible so we can reproduce the problem.
+  - type: dropdown
+    id: variant
+    attributes:
+      label: App Variant
+      description: Which build are you running when this issue appears?
+      multiple: false
+      options:
+        - Electron
+        - Tauri
+        - Server CLI
+    validations:
+      required: true
+  - type: input
+    id: os-version
+    attributes:
+      label: Operating System & Version
+      description: Include the OS family and version (e.g., macOS 15.0, Ubuntu 24.04, Windows 11 23H2).
+      placeholder: macOS 15.0
+    validations:
+      required: true
+  - type: input
+    id: summary
+    attributes:
+      label: Issue Summary
+      description: Briefly describe what is happening.
+      placeholder: A quick one sentence problem statement
+    validations:
+      required: true
+  - type: textarea
+    id: repro
+    attributes:
+      label: Steps to Reproduce
+      description: List the steps needed to reproduce the problem.
+      placeholder: |
+        1. Go to ...
+        2. Click ...
+        3. Observe ...
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Behavior
+      description: Describe what you expected to happen instead.
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs & Screenshots
+      description: Attach relevant logs, stack traces, or screenshots if available.
+      placeholder: Paste logs here or drag-and-drop files onto the issue.
+    validations:
+      required: false
+  - type: textarea
+    id: extra
+    attributes:
+      label: Additional Context
+      description: Add any other context about the problem here.
+    validations:
+      required: false

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

@@ -4,21 +4,33 @@ on:
   workflow_call:
     inputs:
       version:
-        description: "Version to apply to workspace packages"
-        required: true
+        description: "Version to apply to workspace packages (release builds)"
+        required: false
+        default: ""
         type: string
       tag:
-        description: "Git tag to upload assets to"
-        required: true
+        description: "Git tag to upload assets to (release builds)"
+        required: false
+        default: ""
         type: string
       release_name:
         description: "Release name (unused here, for context)"
-        required: true
+        required: false
+        default: ""
         type: string
+      upload:
+        description: "Upload built artifacts to the GitHub release"
+        required: false
+        default: true
+        type: boolean
+      set_versions:
+        description: "Run npm version to set workspace versions"
+        required: false
+        default: true
+        type: boolean
 
-permissions:
-  id-token: write
-  contents: write
+# Permissions are intentionally omitted here so callers can choose
+# least-privilege (e.g. dev CI uses read-only; releases grant write).
 
 env:
   NODE_VERSION: 20
@@ -41,10 +53,11 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-darwin-x64 --no-save
@@ -53,6 +66,7 @@ jobs:
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob
@@ -79,11 +93,12 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${{ env.VERSION }} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
         shell: bash
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-win32-x64-msvc --no-save
@@ -92,6 +107,7 @@ jobs:
         run: npm run build:win --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
+        if: ${{ inputs.upload && inputs.tag != '' }}
         shell: pwsh
         run: |
           Get-ChildItem -Path "packages/electron-app/release" -Filter *.zip -File | ForEach-Object {
@@ -116,10 +132,11 @@ jobs:
           cache: npm
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-linux-x64-gnu --no-save
@@ -128,6 +145,7 @@ jobs:
         run: npm run build:linux --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload release assets
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob
@@ -157,18 +175,38 @@ jobs:
         uses: dtolnay/rust-toolchain@stable
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-darwin-x64 --no-save
 
+      - name: Prebuild (Tauri)
+        run: npm run prebuild --workspace @codenomad/tauri-app
+
+      - name: Ensure tauri native binary
+        working-directory: packages/tauri-app
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if [ "$attempt" -gt 1 ]; then
+              echo "Retrying Tauri CLI install (attempt $attempt)..."
+            fi
+            npm install @tauri-apps/cli@2.9.4 @tauri-apps/cli-darwin-x64@2.9.4 --no-save --no-audit --no-fund --workspaces=false
+            node -e "require('@tauri-apps/cli'); console.log('Tauri CLI loaded')" && exit 0
+          done
+          echo "Tauri CLI failed to load after retries" >&2
+          exit 1
+
       - name: Build macOS bundle (Tauri)
-        run: npm run build --workspace @codenomad/tauri-app
+        working-directory: packages/tauri-app
+        run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (macOS)
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
@@ -180,6 +218,7 @@ jobs:
           fi
 
       - name: Upload Tauri release assets (macOS)
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob
@@ -209,18 +248,38 @@ jobs:
         uses: dtolnay/rust-toolchain@stable
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-darwin-arm64 --no-save
 
+      - name: Prebuild (Tauri)
+        run: npm run prebuild --workspace @codenomad/tauri-app
+
+      - name: Ensure tauri native binary
+        working-directory: packages/tauri-app
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if [ "$attempt" -gt 1 ]; then
+              echo "Retrying Tauri CLI install (attempt $attempt)..."
+            fi
+            npm install @tauri-apps/cli@2.9.4 @tauri-apps/cli-darwin-arm64@2.9.4 --no-save --no-audit --no-fund --workspaces=false
+            node -e "require('@tauri-apps/cli'); console.log('Tauri CLI loaded')" && exit 0
+          done
+          echo "Tauri CLI failed to load after retries" >&2
+          exit 1
+
       - name: Build macOS bundle (Tauri, arm64)
-        run: npm run build --workspace @codenomad/tauri-app
+        working-directory: packages/tauri-app
+        run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (macOS arm64)
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           BUNDLE_ROOT="packages/tauri-app/target/release/bundle"
@@ -232,6 +291,7 @@ jobs:
           fi
 
       - name: Upload Tauri release assets (macOS arm64)
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob
@@ -261,19 +321,41 @@ jobs:
         uses: dtolnay/rust-toolchain@stable
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${{ env.VERSION }} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
         shell: bash
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-win32-x64-msvc --no-save
 
+      - name: Prebuild (Tauri)
+        run: npm run prebuild --workspace @codenomad/tauri-app
+
+      - name: Ensure tauri native binary
+        shell: bash
+        working-directory: packages/tauri-app
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if [ "$attempt" -gt 1 ]; then
+              echo "Retrying Tauri CLI install (attempt $attempt)..."
+            fi
+            npm install @tauri-apps/cli@2.9.4 @tauri-apps/cli-win32-x64-msvc@2.9.4 --no-save --no-audit --no-fund --workspaces=false
+            node -e "require('@tauri-apps/cli'); console.log('Tauri CLI loaded')" && exit 0
+          done
+          echo "Tauri CLI failed to load after retries" >&2
+          exit 1
+
       - name: Build Windows bundle (Tauri)
-        run: npm run build --workspace @codenomad/tauri-app
+        shell: bash
+        working-directory: packages/tauri-app
+        run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (Windows)
+        if: ${{ inputs.upload }}
         shell: pwsh
         run: |
           $bundleRoot = "packages/tauri-app/target/release/bundle"
@@ -287,6 +369,7 @@ jobs:
           }
 
       - name: Upload Tauri release assets (Windows)
+        if: ${{ inputs.upload && inputs.tag != '' }}
         shell: pwsh
         run: |
           if (Test-Path "packages/tauri-app/release-tauri") {
@@ -329,18 +412,38 @@ jobs:
             librsvg2-dev
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-linux-x64-gnu --no-save
 
+      - name: Prebuild (Tauri)
+        run: npm run prebuild --workspace @codenomad/tauri-app
+
+      - name: Ensure tauri native binary
+        working-directory: packages/tauri-app
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if [ "$attempt" -gt 1 ]; then
+              echo "Retrying Tauri CLI install (attempt $attempt)..."
+            fi
+            npm install @tauri-apps/cli@2.9.4 @tauri-apps/cli-linux-x64-gnu@2.9.4 --no-save --no-audit --no-fund --workspaces=false
+            node -e "require('@tauri-apps/cli'); console.log('Tauri CLI loaded')" && exit 0
+          done
+          echo "Tauri CLI failed to load after retries" >&2
+          exit 1
+
       - name: Build Linux bundle (Tauri)
-        run: npm run build --workspace @codenomad/tauri-app
+        working-directory: packages/tauri-app
+        run: npm exec -- tauri build
 
       - name: Package Tauri artifacts (Linux)
+        if: ${{ inputs.upload }}
         run: |
           set -euo pipefail
           SEARCH_ROOT="packages/tauri-app/target"
@@ -367,6 +470,7 @@ jobs:
           cp "$rpm" "$ARTIFACT_DIR/CodeNomad-Tauri-${VERSION}-linux-x64.rpm"
 
       - name: Upload Tauri release assets (Linux)
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob
@@ -429,7 +533,7 @@ jobs:
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-linux-arm64-gnu --no-save
@@ -497,10 +601,11 @@ jobs:
           sudo gem install --no-document fpm
 
       - name: Set workspace versions
+        if: ${{ inputs.set_versions && inputs.version != '' }}
         run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
 
       - name: Install project dependencies
-        run: npm ci --workspaces
+        run: npm ci --workspaces --include=optional
 
       - name: Ensure rollup native binary
         run: npm install @rollup/rollup-linux-x64-gnu --no-save
@@ -509,6 +614,7 @@ jobs:
         run: npm run build:linux-rpm --workspace @neuralnomads/codenomad-electron-app
 
       - name: Upload RPM release assets
+        if: ${{ inputs.upload && inputs.tag != '' }}
         run: |
           set -euo pipefail
           shopt -s nullglob

.github/workflows/dev-release.yml

@@ -1,67 +1,18 @@
-name: Dev Release
+name: Dev CI
 
 on:
+  push:
+    branches:
+      - dev
   workflow_dispatch:
 
 permissions:
-  id-token: write
-  contents: write
-
-env:
-  NODE_VERSION: 20
+  contents: read
 
 jobs:
-  prepare-dev:
-    runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.versions.outputs.version }}
-      tag: ${{ steps.versions.outputs.tag }}
-      release_name: ${{ steps.versions.outputs.release_name }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Compute dev versions
-        id: versions
-        run: |
-          BASE_VERSION=$(node -p "require('./package.json').version")
-          DEV_VERSION="${BASE_VERSION}-dev"
-          TAG="v${DEV_VERSION}"
-          echo "version=$DEV_VERSION" >> "$GITHUB_OUTPUT"
-          echo "tag=$TAG" >> "$GITHUB_OUTPUT"
-          echo "release_name=$TAG" >> "$GITHUB_OUTPUT"
-
-      - name: Create GitHub release
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAG: ${{ steps.versions.outputs.tag }}
-        run: |
-          if gh release view "$TAG" >/dev/null 2>&1; then
-            echo "Release $TAG already exists"
-          else
-            gh release create "$TAG" --title "$TAG" --generate-notes
-          fi
-
-  build-and-upload:
-    needs: prepare-dev
+  dev-ci:
     uses: ./.github/workflows/build-and-upload.yml
     with:
-      version: ${{ needs.prepare-dev.outputs.version }}
-      tag: ${{ needs.prepare-dev.outputs.tag }}
-      release_name: ${{ needs.prepare-dev.outputs.release_name }}
-    secrets: inherit
-
-  publish-server:
-    needs:
-      - prepare-dev 
-      - build-and-upload
-    uses: ./.github/workflows/manual-npm-publish.yml
-    with:
-      version: ${{ needs.prepare-dev.outputs.version }}
-      dist_tag: dev
+      upload: false
+      set_versions: false
     secrets: inherit

.github/workflows/release.yml

@@ -9,77 +9,9 @@ permissions:
   id-token: write
   contents: write
 
-env:
-  NODE_VERSION: 20
-
 jobs:
-  prepare-release:
-    runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.get_version.outputs.version }}
-      tag: ${{ steps.ensure_tag.outputs.tag }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Read version
-        id: get_version
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Ensure git tag
-        id: ensure_tag
-        env:
-          VERSION: ${{ steps.get_version.outputs.version }}
-        run: |
-          TAG="v${VERSION}"
-          git fetch --tags
-          if git rev-parse "$TAG" >/dev/null 2>&1; then
-            echo "tag=$TAG" >> "$GITHUB_OUTPUT"
-            echo "Tag $TAG already exists"
-          else
-            git config user.name "github-actions[bot]"
-            git config user.email "github-actions[bot]@users.noreply.github.com"
-            git tag "$TAG"
-            git push origin "$TAG"
-            echo "tag=$TAG" >> "$GITHUB_OUTPUT"
-            echo "Created tag $TAG"
-          fi
-
-      - name: Ensure GitHub release
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAG: ${{ steps.ensure_tag.outputs.tag }}
-          VERSION: ${{ steps.get_version.outputs.version }}
-        run: |
-          if gh release view "$TAG" >/dev/null 2>&1; then
-            echo "Release $TAG already exists"
-          else
-            gh release create "$TAG" --title "CodeNomad v${VERSION}" --generate-notes
-          fi
-
-  build-and-upload:
-    needs: prepare-release
-    uses: ./.github/workflows/build-and-upload.yml
+  release:
+    uses: ./.github/workflows/reusable-release.yml
     with:
-      version: ${{ needs.prepare-release.outputs.version }}
-      tag: ${{ needs.prepare-release.outputs.tag }}
-      release_name: CodeNomad v${{ needs.prepare-release.outputs.version }}
-    secrets: inherit
-
-  publish-server:
-    needs:
-      - prepare-release
-      - build-and-upload
-    if: ${{ needs.build-and-upload.result == 'success' }}
-    uses: ./.github/workflows/manual-npm-publish.yml
-    with:
-      version: ${{ needs.prepare-release.outputs.version }}
       dist_tag: latest
     secrets: inherit

.github/workflows/reusable-release.yml

@@ -0,0 +1,80 @@
+name: Reusable Release
+
+on:
+  workflow_call:
+    inputs:
+      version_suffix:
+        description: "Suffix appended to package.json version"
+        required: false
+        default: ""
+        type: string
+      dist_tag:
+        description: "npm dist-tag to publish under"
+        required: false
+        default: dev
+        type: string
+
+permissions:
+  id-token: write
+  contents: write
+
+env:
+  NODE_VERSION: 20
+
+jobs:
+  prepare-release:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.versions.outputs.version }}
+      tag: ${{ steps.versions.outputs.tag }}
+      release_name: ${{ steps.versions.outputs.release_name }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Compute release versions
+        id: versions
+        env:
+          VERSION_SUFFIX: ${{ inputs.version_suffix }}
+        run: |
+          BASE_VERSION=$(node -p "require('./package.json').version")
+          VERSION="${BASE_VERSION}${VERSION_SUFFIX}"
+          TAG="v${VERSION}"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "tag=$TAG" >> "$GITHUB_OUTPUT"
+          echo "release_name=$TAG" >> "$GITHUB_OUTPUT"
+
+      - name: Create GitHub release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG: ${{ steps.versions.outputs.tag }}
+        run: |
+          if gh release view "$TAG" >/dev/null 2>&1; then
+            echo "Release $TAG already exists"
+          else
+            gh release create "$TAG" --title "$TAG" --generate-notes
+          fi
+
+  build-and-upload:
+    needs: prepare-release
+    uses: ./.github/workflows/build-and-upload.yml
+    with:
+      version: ${{ needs.prepare-release.outputs.version }}
+      tag: ${{ needs.prepare-release.outputs.tag }}
+      release_name: ${{ needs.prepare-release.outputs.release_name }}
+    secrets: inherit
+
+  publish-server:
+    needs:
+      - prepare-release
+      - build-and-upload
+    uses: ./.github/workflows/manual-npm-publish.yml
+    with:
+      version: ${{ needs.prepare-release.outputs.version }}
+      dist_tag: ${{ inputs.dist_tag }}
+    secrets: inherit

.gitignore

@@ -6,4 +6,5 @@ release/
 .vite/
 .electron-vite/
 out/
-.dir-locals.el
+.dir-locals.el
+.opencode/bashOutputs/

README.md

@@ -44,6 +44,12 @@ Run CodeNomad as a local server and access it via your web browser. Perfect for
 npx @neuralnomads/codenomad --launch
 ```
 
+For dev version
+
+```bash
+npx @neuralnomads/codenomad@dev --launch
+```
+
 This command starts the server and opens the web client in your default browser.
 
 ## Highlights
@@ -70,6 +76,29 @@ 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:

package.json

@@ -1,11 +1,14 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/server",
+      "packages/ui",
+      "packages/electron-app",
+      "packages/tauri-app"
     ]
   },
   "scripts": {
@@ -23,5 +26,8 @@
   "dependencies": {
     "7zip-bin": "^5.2.0",
     "google-auth-library": "^10.5.0"
+  },
+  "devDependencies": {
+    "baseline-browser-mapping": "^2.9.11"
   }
 }

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

@@ -1,4 +1,6 @@
 import { app, BrowserView, BrowserWindow, nativeImage, session, shell } from "electron"
+import http from "node:http"
+import https from "node:https"
 import { existsSync } from "fs"
 import { dirname, join } from "path"
 import { fileURLToPath } from "url"
@@ -15,6 +17,7 @@ const cliManager = new CliProcessManager()
 let mainWindow: BrowserWindow | null = null
 let currentCliUrl: string | null = null
 let pendingCliUrl: string | null = null
+let pendingBootstrapToken: string | null = null
 let showingLoadingScreen = false
 let preloadingView: BrowserView | null = null
 
@@ -251,6 +254,15 @@ function showLoadingScreen(force = false) {
   loadLoadingScreen(mainWindow)
 }
 
+function isBootstrapTokenUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    return parsed.pathname === "/auth/token" && parsed.hash.length > 1
+  } catch {
+    return false
+  }
+}
+
 function startCliPreload(url: string) {
   if (!mainWindow || mainWindow.isDestroyed()) {
     pendingCliUrl = url
@@ -268,6 +280,13 @@ function startCliPreload(url: string) {
     showLoadingScreen(true)
   }
 
+  // Important: /auth/token#... is one-time. Preloading + swapping would load it twice,
+  // consuming the token in the hidden view and then failing in the main window.
+  if (isBootstrapTokenUrl(url)) {
+    finalizeCliSwap(url)
+    return
+  }
+
   const view = new BrowserView({
     webPreferences: {
       contextIsolation: true,
@@ -308,6 +327,75 @@ function finalizeCliSwap(url: string) {
   mainWindow.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
 }
 
+const SESSION_COOKIE_NAME = "codenomad_session"
+let bootstrapExchangeInFlight = false
+
+function extractCookieValue(setCookieHeader: string | string[] | undefined, name: string): string | null {
+  const raw = Array.isArray(setCookieHeader) ? setCookieHeader[0] : setCookieHeader
+  if (!raw) return null
+
+  const first = raw.split(";")[0] ?? ""
+  const index = first.indexOf("=")
+  if (index < 0) return null
+
+  const key = first.slice(0, index).trim()
+  const value = first.slice(index + 1).trim()
+  if (key !== name || !value) return null
+
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<boolean> {
+  const target = new URL("/api/auth/token", baseUrl)
+  const body = JSON.stringify({ token })
+
+  const transport = target.protocol === "https:" ? https : http
+
+  const result = await new Promise<{ statusCode: number; setCookie: string | string[] | undefined }>((resolve, reject) => {
+    const req = transport.request(
+      target,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Content-Length": Buffer.byteLength(body),
+        },
+      },
+      (res) => {
+        res.resume()
+        resolve({ statusCode: res.statusCode ?? 0, setCookie: res.headers["set-cookie"] })
+      },
+    )
+
+    req.on("error", reject)
+    req.write(body)
+    req.end()
+  })
+
+  if (result.statusCode !== 200) {
+    return false
+  }
+
+  const sessionId = extractCookieValue(result.setCookie, SESSION_COOKIE_NAME)
+  if (!sessionId) {
+    return false
+  }
+
+  await session.defaultSession.cookies.set({
+    url: baseUrl,
+    name: SESSION_COOKIE_NAME,
+    value: sessionId,
+    httpOnly: true,
+    path: "/",
+    sameSite: "lax",
+  })
+
+  return true
+}
 
 async function startCli() {
   try {
@@ -323,11 +411,53 @@ async function startCli() {
   }
 }
 
+async function maybeExchangeAndNavigate(baseUrl: string) {
+  if (bootstrapExchangeInFlight) {
+    return
+  }
+
+  const token = pendingBootstrapToken
+  if (!token) {
+    startCliPreload(baseUrl)
+    return
+  }
+
+  bootstrapExchangeInFlight = true
+
+  try {
+    const ok = await exchangeBootstrapToken(baseUrl, token)
+    pendingBootstrapToken = null
+
+    if (!ok) {
+      startCliPreload(`${baseUrl}/login`)
+      return
+    }
+
+    startCliPreload(baseUrl)
+  } catch (error) {
+    console.error("[cli] bootstrap token exchange failed:", error)
+    pendingBootstrapToken = null
+    startCliPreload(`${baseUrl}/login`)
+  } finally {
+    bootstrapExchangeInFlight = false
+  }
+}
+
+cliManager.on("bootstrapToken", (token) => {
+  pendingBootstrapToken = token
+
+  const status = cliManager.getStatus()
+  if (status.url) {
+    void maybeExchangeAndNavigate(status.url)
+  }
+})
+
 cliManager.on("ready", (status) => {
   if (!status.url) {
     return
   }
-  startCliPreload(status.url)
+
+  void maybeExchangeAndNavigate(status.url)
 })
 
 cliManager.on("status", (status) => {

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

@@ -9,6 +9,7 @@ import { buildUserShellCommand, getUserShellEnv, supportsUserShell } from "./use
 
 const nodeRequire = createRequire(import.meta.url)
 
+const BOOTSTRAP_TOKEN_PREFIX = "CODENOMAD_BOOTSTRAP_TOKEN:"
 
 type CliState = "starting" | "ready" | "error" | "stopped"
 type ListeningMode = "local" | "all"
@@ -69,6 +70,7 @@ function readListeningModeFromConfig(): ListeningMode {
 export declare interface CliProcessManager {
   on(event: "status", listener: (status: CliStatus) => void): this
   on(event: "ready", listener: (status: CliStatus) => void): this
+  on(event: "bootstrapToken", listener: (token: string) => void): this
   on(event: "log", listener: (entry: CliLogEntry) => void): this
   on(event: "exit", listener: (status: CliStatus) => void): this
   on(event: "error", listener: (error: Error) => void): this
@@ -79,6 +81,7 @@ export class CliProcessManager extends EventEmitter {
   private status: CliStatus = { state: "stopped" }
   private stdoutBuffer = ""
   private stderrBuffer = ""
+  private bootstrapToken: string | null = null
 
   async start(options: StartOptions): Promise<CliStatus> {
     if (this.child) {
@@ -87,6 +90,7 @@ export class CliProcessManager extends EventEmitter {
 
     this.stdoutBuffer = ""
     this.stderrBuffer = ""
+    this.bootstrapToken = null
     this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })
 
     const cliEntry = this.resolveCliEntry(options)
@@ -227,11 +231,22 @@ export class CliProcessManager extends EventEmitter {
     }
 
     for (const line of lines) {
-      if (!line.trim()) continue
-      console.info(`[cli][${stream}] ${line}`)
-      this.emit("log", { stream, message: line })
+      const trimmed = line.trim()
+      if (!trimmed) continue
 
-      const port = this.extractPort(line)
+      if (trimmed.startsWith(BOOTSTRAP_TOKEN_PREFIX)) {
+        const token = trimmed.slice(BOOTSTRAP_TOKEN_PREFIX.length).trim()
+        if (token && !this.bootstrapToken) {
+          this.bootstrapToken = token
+          this.emit("bootstrapToken", token)
+        }
+        continue
+      }
+
+      console.info(`[cli][${stream}] ${trimmed}`)
+      this.emit("log", { stream, message: trimmed })
+
+      const port = this.extractPort(trimmed)
       if (port && this.status.state === "starting") {
         const url = `http://127.0.0.1:${port}`
         console.info(`[cli] ready on ${url}`)
@@ -271,7 +286,7 @@ export class CliProcessManager extends EventEmitter {
   }
 
   private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--port", "0"]
+    const args = ["serve", "--host", host, "--port", "0", "--generate-token"]
 
     if (options.dev) {
       args.push("--ui-dev-server", "http://localhost:3000", "--log-level", "debug")

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "description": "CodeNomad - AI coding assistant",
   "author": {
     "name": "Neural Nomads",
@@ -69,6 +69,10 @@
           "!icon.icns",
           "!icon.ico"
         ]
+      },
+      {
+        "from": "../server/dist/opencode-config",
+        "to": "opencode-config"
       }
     ],
     "mac": {

packages/electron-app/scripts/build.js

@@ -2,7 +2,7 @@
 
 import { spawn } from "child_process"
 import { existsSync } from "fs"
-import { join } from "path"
+import path, { join } from "path"
 import { fileURLToPath } from "url"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
@@ -55,12 +55,22 @@ const platforms = {
 
 function run(command, args, options = {}) {
   return new Promise((resolve, reject) => {
+    const env = { ...process.env, NODE_PATH: nodeModulesPath, ...(options.env || {}) }
+    const pathKey = Object.keys(env).find((key) => key.toLowerCase() === "path") ?? "PATH"
+
+    const binPaths = [
+      join(nodeModulesPath, ".bin"),
+      join(workspaceNodeModulesPath, ".bin"),
+    ]
+
+    env[pathKey] = `${binPaths.join(path.delimiter)}${path.delimiter}${env[pathKey] ?? ""}`
+
     const spawnOptions = {
       cwd: appDir,
       stdio: "inherit",
       shell: process.platform === "win32",
       ...options,
-      env: { ...process.env, NODE_PATH: nodeModulesPath, ...(options.env || {}) },
+      env,
     }
 
     const child = spawn(command, args, spawnOptions)

packages/opencode-config/README.md

@@ -0,0 +1,32 @@
+# opencode-config
+
+## TLDR
+Template config + plugins injected into every OpenCode instance that CodeNomad launches. It provides a CodeNomad bridge plugin for local event exchange between the CLI server and opencode.
+
+## What it is
+A packaged config directory that CodeNomad copies into `~/.config/codenomad/opencode-config` for production builds or uses directly in dev. OpenCode autoloads any `plugin/*.ts` or `plugin/*.js` from this directory.
+
+## How it works
+- CodeNomad sets `OPENCODE_CONFIG_DIR` when spawning each opencode instance (`packages/server/src/workspaces/manager.ts`).
+- This template is synced from `packages/opencode-config` (`packages/server/src/opencode-config.ts`, `packages/server/scripts/copy-opencode-config.mjs`).
+- OpenCode autoloads plugins from `plugin/` (`packages/opencode-config/plugin/codenomad.ts`).
+- The `CodeNomadPlugin` reads `CODENOMAD_INSTANCE_ID` + `CODENOMAD_BASE_URL`, connects to `GET /workspaces/:id/plugin/events`, and posts to `POST /workspaces/:id/plugin/event` (`packages/opencode-config/plugin/lib/client.ts`).
+- The server exposes the plugin routes and maps events into the UI SSE pipeline (`packages/server/src/server/routes/plugin.ts`, `packages/server/src/plugins/handlers.ts`).
+
+## Expectations
+- Local-only bridge (no auth/token yet).
+- Plugin must fail startup if it cannot connect after 3 retries.
+- Keep plugin entrypoints thin; put shared logic under `plugin/lib/` to avoid autoloaded helpers.
+- Keep event shapes small and explicit; use `type` + `properties` only.
+
+## Ideas
+- Add feature modules under `plugin/lib/features/` (tool lifecycle, permission prompts, custom commands).
+- Expand `/workspaces/:id/plugin/*` with dedicated endpoints as needed.
+- Promote stable event shapes and version tags once the protocol settles.
+
+## Pointers
+- Plugin entry: `packages/opencode-config/plugin/codenomad.ts`
+- Plugin client: `packages/opencode-config/plugin/lib/client.ts`
+- Plugin server routes: `packages/server/src/server/routes/plugin.ts`
+- Plugin event handling: `packages/server/src/plugins/handlers.ts`
+- Workspace env injection: `packages/server/src/workspaces/manager.ts`

packages/opencode-config/opencode.jsonc

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://opencode.ai/config.json"
+}

packages/opencode-config/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@codenomad/opencode-config",
+  "version": "0.5.0",
+  "private": true,
+  "dependencies": {
+    "@opencode-ai/plugin": "1.1.16"
+  }
+}

packages/opencode-config/plugin/codenomad.ts

@@ -0,0 +1,32 @@
+import type { PluginInput } from "@opencode-ai/plugin"
+import { createCodeNomadClient, getCodeNomadConfig } from "./lib/client"
+import { createBackgroundProcessTools } from "./lib/background-process"
+
+export async function CodeNomadPlugin(input: PluginInput) {
+  const config = getCodeNomadConfig()
+  const client = createCodeNomadClient(config)
+  const backgroundProcessTools = createBackgroundProcessTools(config, { baseDir: input.directory })
+
+  await client.startEvents((event) => {
+    if (event.type === "codenomad.ping") {
+      void client.postEvent({
+        type: "codenomad.pong",
+        properties: {
+          ts: Date.now(),
+          pingTs: (event.properties as any)?.ts,
+        },
+      }).catch(() => {})
+    }
+  })
+
+  return {
+    tool: {
+      ...backgroundProcessTools,
+    },
+    async event(input: { event: any }) {
+      const opencodeEvent = input?.event
+      if (!opencodeEvent || typeof opencodeEvent !== "object") return
+
+    },
+  }
+}

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

@@ -0,0 +1,253 @@
+import path from "path"
+import { tool } from "@opencode-ai/plugin/tool"
+import { createCodeNomadRequester, type CodeNomadConfig } from "./request"
+
+type BackgroundProcess = {
+  id: string
+  title: string
+  command: string
+  status: "running" | "stopped" | "error"
+  startedAt: string
+  stoppedAt?: string
+  exitCode?: number
+  outputSizeBytes?: number
+}
+
+type BackgroundProcessOptions = {
+  baseDir: string
+}
+
+type ParsedCommand = {
+  head: string
+  args: string[]
+}
+
+export function createBackgroundProcessTools(config: CodeNomadConfig, options: BackgroundProcessOptions) {
+  const requester = createCodeNomadRequester(config)
+
+  const request = async <T>(path: string, init?: RequestInit): Promise<T> => {
+    return requester.requestJson<T>(`/background-processes${path}`, init)
+  }
+
+  return {
+    run_background_process: tool({
+      description:
+        "Run a long-lived background process (dev servers, DBs, watchers) so it keeps running while you do other tasks. Use it for running processes that timeout otherwise or produce a lot of output.",
+      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"),
+      },
+      async execute(args) {
+        assertCommandWithinBase(args.command, options.baseDir)
+        const process = await request<BackgroundProcess>("", {
+          method: "POST",
+          body: JSON.stringify({ title: args.title, command: args.command }),
+        })
+
+        return `Started background process ${process.id} (${process.title})\nStatus: ${process.status}\nCommand: ${process.command}`
+      },
+    }),
+    list_background_processes: tool({
+      description: "List background processes running for this workspace.",
+      args: {},
+      async execute() {
+        const response = await request<{ processes: BackgroundProcess[] }>("")
+        if (response.processes.length === 0) {
+          return "No background processes running."
+        }
+
+        return response.processes
+          .map((process) => {
+            const status = process.status === "running" ? "running" : process.status
+            const exit = process.exitCode !== undefined ? ` (exit ${process.exitCode})` : ""
+            const size =
+              typeof process.outputSizeBytes === "number" ? ` | ${Math.round(process.outputSizeBytes / 1024)}KB` : ""
+            return `- ${process.id} | ${process.title} | ${status}${exit}${size}\n  ${process.command}`
+          })
+          .join("\n")
+      },
+    }),
+    read_background_process_output: tool({
+      description: "Read output from a background process. Use full, grep, head, or tail.",
+      args: {
+        id: tool.schema.string().describe("Background process ID"),
+        method: tool.schema
+          .enum(["full", "grep", "head", "tail"])
+          .default("full")
+          .describe("Method to read output"),
+        pattern: tool.schema.string().optional().describe("Pattern for grep method"),
+        lines: tool.schema.number().optional().describe("Number of lines for head/tail methods"),
+      },
+      async execute(args) {
+        if (args.method === "grep" && !args.pattern) {
+          return "Pattern is required for grep method."
+        }
+
+        const params = new URLSearchParams({ method: args.method })
+        if (args.pattern) {
+          params.set("pattern", args.pattern)
+        }
+        if (args.lines) {
+          params.set("lines", String(args.lines))
+        }
+
+        const response = await request<{ id: string; content: string; truncated: boolean; sizeBytes: number }>(
+          `/${args.id}/output?${params.toString()}`,
+        )
+
+        const header = response.truncated
+          ? `Output (truncated, ${Math.round(response.sizeBytes / 1024)}KB):`
+          : `Output (${Math.round(response.sizeBytes / 1024)}KB):`
+
+        return `${header}\n\n${response.content}`
+      },
+    }),
+    stop_background_process: tool({
+      description: "Stop a background process (SIGTERM) but keep its output and entry.",
+      args: {
+        id: tool.schema.string().describe("Background process ID"),
+      },
+      async execute(args) {
+        const process = await request<BackgroundProcess>(`/${args.id}/stop`, { method: "POST" })
+        return `Stopped background process ${process.id} (${process.title}). Status: ${process.status}`
+      },
+    }),
+    terminate_background_process: tool({
+      description: "Terminate a background process and delete its output + entry.",
+      args: {
+        id: tool.schema.string().describe("Background process ID"),
+      },
+      async execute(args) {
+        await request<void>(`/${args.id}/terminate`, { method: "POST" })
+        return `Terminated background process ${args.id} and removed its output.`
+      },
+    }),
+  }
+}
+
+const FILE_COMMANDS = new Set(["cd", "rm", "cp", "mv", "mkdir", "touch", "chmod", "chown"])
+const EXPANSION_CHARS = /[~*$?\[\]`$]/
+
+function assertCommandWithinBase(command: string, baseDir: string) {
+  const normalizedBase = path.resolve(baseDir)
+  const commands = splitCommands(command)
+
+  for (const item of commands) {
+    if (!FILE_COMMANDS.has(item.head)) {
+      continue
+    }
+
+    for (const arg of item.args) {
+      if (!arg) continue
+      if (arg.startsWith("-") || (item.head === "chmod" && arg.startsWith("+"))) continue
+
+      const literalArg = unquote(arg)
+      if (EXPANSION_CHARS.test(literalArg)) {
+        throw new Error(`Background process commands may only reference paths within ${normalizedBase}.`)
+      }
+
+      const resolved = path.isAbsolute(literalArg) ? path.normalize(literalArg) : path.resolve(normalizedBase, literalArg)
+      if (!isWithinBase(normalizedBase, resolved)) {
+        throw new Error(`Background process commands may only reference paths within ${normalizedBase}.`)
+      }
+    }
+  }
+}
+
+function splitCommands(command: string): ParsedCommand[] {
+  const tokens = tokenize(command)
+  const commands: ParsedCommand[] = []
+  let current: string[] = []
+
+  for (const token of tokens) {
+    if (isSeparator(token)) {
+      if (current.length > 0) {
+        commands.push({ head: current[0], args: current.slice(1) })
+        current = []
+      }
+      continue
+    }
+    current.push(token)
+  }
+
+  if (current.length > 0) {
+    commands.push({ head: current[0], args: current.slice(1) })
+  }
+
+  return commands
+}
+
+function tokenize(input: string): string[] {
+  const tokens: string[] = []
+  let current = ""
+  let quote: "'" | '"' | null = null
+  let escape = false
+
+  const flush = () => {
+    if (current.length > 0) {
+      tokens.push(current)
+      current = ""
+    }
+  }
+
+  for (let index = 0; index < input.length; index += 1) {
+    const char = input[index]
+
+    if (escape) {
+      current += char
+      escape = false
+      continue
+    }
+
+    if (char === "\\" && quote !== "'") {
+      escape = true
+      continue
+    }
+
+    if (quote) {
+      current += char
+      if (char === quote) {
+        quote = null
+      }
+      continue
+    }
+
+    if (char === "'" || char === '"') {
+      quote = char
+      current += char
+      continue
+    }
+
+    if (char === " " || char === "\n" || char === "\t") {
+      flush()
+      continue
+    }
+
+    if (char === "|" || char === "&" || char === ";") {
+      flush()
+      tokens.push(char)
+      continue
+    }
+
+    current += char
+  }
+
+  flush()
+  return tokens
+}
+
+function isSeparator(token: string): boolean {
+  return token === "|" || token === "&" || token === ";"
+}
+
+function unquote(token: string): string {
+  if ((token.startsWith('"') && token.endsWith('"')) || (token.startsWith("'") && token.endsWith("'"))) {
+    return token.slice(1, -1)
+  }
+  return token
+}
+
+function isWithinBase(base: string, candidate: string): boolean {
+  const relative = path.relative(base, candidate)
+  return relative === "" || (!relative.startsWith("..") && !path.isAbsolute(relative))
+}

packages/opencode-config/plugin/lib/client.ts

@@ -0,0 +1,133 @@
+import { createCodeNomadRequester, type CodeNomadConfig, type PluginEvent } from "./request"
+
+export { getCodeNomadConfig, type CodeNomadConfig, type PluginEvent } from "./request"
+
+export function createCodeNomadClient(config: CodeNomadConfig) {
+  const requester = createCodeNomadRequester(config)
+
+  return {
+    postEvent: (event: PluginEvent) =>
+      requester.requestVoid("/event", {
+        method: "POST",
+        body: JSON.stringify(event),
+      }),
+    startEvents: (onEvent: (event: PluginEvent) => void) => startPluginEvents(requester, onEvent),
+  }
+}
+
+function delay(ms: number) {
+  return new Promise<void>((resolve) => setTimeout(resolve, ms))
+}
+
+async function startPluginEvents(
+  requester: ReturnType<typeof createCodeNomadRequester>,
+  onEvent: (event: PluginEvent) => void,
+) {
+  // Fail plugin startup if we cannot establish the initial connection.
+  const initialBody = await connectWithRetries(requester, 3)
+
+  // After startup, keep reconnecting; throw after 3 consecutive failures.
+  void consumeWithReconnect(requester, onEvent, initialBody)
+}
+
+async function connectWithRetries(requester: ReturnType<typeof createCodeNomadRequester>, maxAttempts: number) {
+  let lastError: unknown
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    try {
+      return await requester.requestSseBody("/events")
+    } catch (error) {
+      lastError = error
+      await delay(500 * attempt)
+    }
+  }
+
+  const reason = lastError instanceof Error ? lastError.message : String(lastError)
+  const url = requester.buildUrl("/events")
+  throw new Error(`[CodeNomadPlugin] Failed to connect to CodeNomad at ${url} after ${maxAttempts} retries: ${reason}`)
+}
+
+async function consumeWithReconnect(
+  requester: ReturnType<typeof createCodeNomadRequester>,
+  onEvent: (event: PluginEvent) => void,
+  initialBody: ReadableStream<Uint8Array>,
+) {
+  let consecutiveFailures = 0
+  let body: ReadableStream<Uint8Array> | null = initialBody
+
+  while (true) {
+    try {
+      if (!body) {
+        body = await connectWithRetries(requester, 3)
+      }
+
+      await consumeSseBody(body, onEvent)
+      body = null
+      consecutiveFailures = 0
+    } catch (error) {
+      body = null
+      consecutiveFailures += 1
+      if (consecutiveFailures >= 3) {
+        const reason = error instanceof Error ? error.message : String(error)
+        throw new Error(`[CodeNomadPlugin] Plugin event stream failed after 3 retries: ${reason}`)
+      }
+      await delay(500 * consecutiveFailures)
+    }
+  }
+}
+
+async function consumeSseBody(body: ReadableStream<Uint8Array>, onEvent: (event: PluginEvent) => void) {
+  const reader = body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ""
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done || !value) {
+      break
+    }
+
+    buffer += decoder.decode(value, { stream: true })
+
+    let separatorIndex = buffer.indexOf("\n\n")
+    while (separatorIndex >= 0) {
+      const chunk = buffer.slice(0, separatorIndex)
+      buffer = buffer.slice(separatorIndex + 2)
+      separatorIndex = buffer.indexOf("\n\n")
+
+      const event = parseSseChunk(chunk)
+      if (event) {
+        onEvent(event)
+      }
+    }
+  }
+
+  throw new Error("SSE stream ended")
+}
+
+function parseSseChunk(chunk: string): PluginEvent | null {
+  const lines = chunk.split(/\r?\n/)
+  const dataLines: string[] = []
+
+  for (const line of lines) {
+    if (line.startsWith(":")) continue
+    if (line.startsWith("data:")) {
+      dataLines.push(line.slice(5).trimStart())
+    }
+  }
+
+  if (dataLines.length === 0) return null
+
+  const payload = dataLines.join("\n").trim()
+  if (!payload) return null
+
+  try {
+    const parsed = JSON.parse(payload)
+    if (!parsed || typeof parsed !== "object" || typeof (parsed as any).type !== "string") {
+      return null
+    }
+    return parsed as PluginEvent
+  } catch {
+    return null
+  }
+}

packages/opencode-config/plugin/lib/request.ts

@@ -0,0 +1,124 @@
+export type PluginEvent = {
+  type: string
+  properties?: Record<string, unknown>
+}
+
+export type CodeNomadConfig = {
+  instanceId: string
+  baseUrl: string
+}
+
+export function getCodeNomadConfig(): CodeNomadConfig {
+  return {
+    instanceId: requireEnv("CODENOMAD_INSTANCE_ID"),
+    baseUrl: requireEnv("CODENOMAD_BASE_URL"),
+  }
+}
+
+export function createCodeNomadRequester(config: CodeNomadConfig) {
+  const baseUrl = config.baseUrl.replace(/\/+$/, "")
+  const pluginBase = `${baseUrl}/workspaces/${encodeURIComponent(config.instanceId)}/plugin`
+  const authorization = buildInstanceAuthorizationHeader()
+
+  const buildUrl = (path: string) => {
+    if (path.startsWith("http://") || path.startsWith("https://")) {
+      return path
+    }
+    const normalized = path.startsWith("/") ? path : `/${path}`
+    return `${pluginBase}${normalized}`
+  }
+
+  const buildHeaders = (headers: HeadersInit | undefined, hasBody: boolean): Record<string, string> => {
+    const output: Record<string, string> = normalizeHeaders(headers)
+    output.Authorization = authorization
+    if (hasBody) {
+      output["Content-Type"] = output["Content-Type"] ?? "application/json"
+    }
+    return output
+  }
+
+  const fetchWithAuth = async (path: string, init?: RequestInit): Promise<Response> => {
+    const url = buildUrl(path)
+    const hasBody = init?.body !== undefined
+    const headers = buildHeaders(init?.headers, hasBody)
+
+    return fetch(url, {
+      ...init,
+      headers,
+    })
+  }
+
+  const requestJson = async <T>(path: string, init?: RequestInit): Promise<T> => {
+    const response = await fetchWithAuth(path, init)
+    if (!response.ok) {
+      const message = await response.text().catch(() => "")
+      throw new Error(message || `Request failed with ${response.status}`)
+    }
+
+    if (response.status === 204) {
+      return undefined as T
+    }
+
+    return (await response.json()) as T
+  }
+
+  const requestVoid = async (path: string, init?: RequestInit): Promise<void> => {
+    const response = await fetchWithAuth(path, init)
+    if (!response.ok) {
+      const message = await response.text().catch(() => "")
+      throw new Error(message || `Request failed with ${response.status}`)
+    }
+  }
+
+  const requestSseBody = async (path: string): Promise<ReadableStream<Uint8Array>> => {
+    const response = await fetchWithAuth(path, { headers: { Accept: "text/event-stream" } })
+    if (!response.ok || !response.body) {
+      throw new Error(`SSE unavailable (${response.status})`)
+    }
+    return response.body as ReadableStream<Uint8Array>
+  }
+
+  return {
+    buildUrl,
+    fetch: fetchWithAuth,
+    requestJson,
+    requestVoid,
+    requestSseBody,
+  }
+}
+
+function requireEnv(key: string): string {
+  const value = process.env[key]
+  if (!value || !value.trim()) {
+    throw new Error(`[CodeNomadPlugin] Missing required env var ${key}`)
+  }
+  return value
+}
+
+function buildInstanceAuthorizationHeader(): string {
+  const username = requireEnv("OPENCODE_SERVER_USERNAME")
+  const password = requireEnv("OPENCODE_SERVER_PASSWORD")
+  const token = Buffer.from(`${username}:${password}`, "utf8").toString("base64")
+  return `Basic ${token}`
+}
+
+function normalizeHeaders(headers: HeadersInit | undefined): Record<string, string> {
+  const output: Record<string, string> = {}
+  if (!headers) return output
+
+  if (headers instanceof Headers) {
+    headers.forEach((value, key) => {
+      output[key] = value
+    })
+    return output
+  }
+
+  if (Array.isArray(headers)) {
+    for (const [key, value] of headers) {
+      output[key] = value
+    }
+    return output
+  }
+
+  return { ...headers }
+}

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.2.8",
+      "version": "0.7.1",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "commander": "^12.1.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "description": "CodeNomad Server",
   "author": {
     "name": "Neural Nomads",
@@ -16,10 +16,11 @@
     "codenomad": "dist/bin.js"
   },
   "scripts": {
-    "build": "npm run build:ui && npm run prepare-ui && tsc -p tsconfig.json",
+    "build": "npm run build:ui && npm run prepare-ui && tsc -p tsconfig.json && node ./scripts/copy-auth-pages.mjs && npm run prepare-config",
     "build:ui": "npm run build --prefix ../ui",
     "prepare-ui": "node ./scripts/copy-ui-dist.mjs",
-    "dev": "cross-env CLI_UI_DEV_SERVER=http://localhost:3000 tsx src/index.ts",
+    "prepare-config": "node ./scripts/copy-opencode-config.mjs",
+    "dev": "cross-env CODENOMAD_DEV=1 CODENOMAD_SERVER_PASSWORD=codenomad-dev CLI_UI_DEV_SERVER=http://localhost:3000 tsx src/index.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {

packages/server/scripts/copy-auth-pages.mjs

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, mkdirSync, rmSync } from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const cliRoot = path.resolve(__dirname, "..")
+
+const sourceDir = path.resolve(cliRoot, "src/server/routes/auth-pages")
+const targetDir = path.resolve(cliRoot, "dist/server/routes/auth-pages")
+
+if (!existsSync(sourceDir)) {
+  console.error(`[copy-auth-pages] Missing auth pages at ${sourceDir}`)
+  process.exit(1)
+}
+
+rmSync(targetDir, { recursive: true, force: true })
+mkdirSync(targetDir, { recursive: true })
+cpSync(sourceDir, targetDir, { recursive: true })
+
+console.log(`[copy-auth-pages] Copied ${sourceDir} -> ${targetDir}`)

packages/server/scripts/copy-opencode-config.mjs

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+import { spawnSync } from "child_process"
+import { cpSync, existsSync, mkdirSync, rmSync } from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const cliRoot = path.resolve(__dirname, "..")
+const sourceDir = path.resolve(cliRoot, "../opencode-config")
+const targetDir = path.resolve(cliRoot, "dist/opencode-config")
+const nodeModulesDir = path.resolve(sourceDir, "node_modules")
+const selfLinkDir = path.resolve(nodeModulesDir, "@codenomad", "opencode-config")
+const npmExecPath = process.env.npm_execpath
+const npmNodeExecPath = process.env.npm_node_execpath
+
+if (!existsSync(sourceDir)) {
+  console.error(`[copy-opencode-config] Missing source directory at ${sourceDir}`)
+  process.exit(1)
+}
+
+if (!existsSync(nodeModulesDir)) {
+  console.log(`[copy-opencode-config] Installing opencode-config dependencies in ${sourceDir}`)
+
+  const npmArgs = [
+    "install",
+    "--prefix",
+    sourceDir,
+    "--omit=dev",
+    "--ignore-scripts",
+    "--fund=false",
+    "--audit=false",
+    "--package-lock=false",
+    "--workspaces=false",
+  ]
+
+  const env = { ...process.env, npm_config_workspaces: "false" }
+
+  const npmCli = npmExecPath && npmNodeExecPath ? [npmNodeExecPath, [npmExecPath, ...npmArgs]] : null
+  const result = npmCli
+    ? spawnSync(npmCli[0], npmCli[1], { cwd: sourceDir, stdio: "inherit", env })
+    : spawnSync("npm", npmArgs, { cwd: sourceDir, stdio: "inherit", env, shell: process.platform === "win32" })
+
+  if (result.status !== 0) {
+    if (result.error) {
+      console.error("[copy-opencode-config] npm install failed to start", result.error)
+    }
+    console.error("[copy-opencode-config] Failed to install opencode-config dependencies")
+    process.exit(result.status ?? 1)
+  }
+}
+
+// npm can create a self-referential link for scoped packages on Windows.
+// That link causes recursive copies (ELOOP) during bundling.
+rmSync(selfLinkDir, { recursive: true, force: true })
+
+rmSync(targetDir, { recursive: true, force: true })
+mkdirSync(path.dirname(targetDir), { recursive: true })
+cpSync(sourceDir, targetDir, { recursive: true })
+
+console.log(`[copy-opencode-config] Copied ${sourceDir} -> ${targetDir}`)

packages/server/src/api-types.ts

@@ -219,6 +219,33 @@ export interface ServerMeta {
   latestRelease?: LatestReleaseInfo
 }
 
+export type BackgroundProcessStatus = "running" | "stopped" | "error"
+
+export interface BackgroundProcess {
+  id: string
+  workspaceId: string
+  title: string
+  command: string
+  cwd: string
+  status: BackgroundProcessStatus
+  pid?: number
+  startedAt: string
+  stoppedAt?: string
+  exitCode?: number
+  outputSizeBytes?: number
+}
+
+export interface BackgroundProcessListResponse {
+  processes: BackgroundProcess[]
+}
+
+export interface BackgroundProcessOutputResponse {
+  id: string
+  content: string
+  truncated: boolean
+  sizeBytes: number
+}
+
 export type {
   Preferences,
   ModelPreference,

packages/server/src/auth/auth-store.ts

@@ -0,0 +1,175 @@
+import fs from "fs"
+import path from "path"
+import type { Logger } from "../logger"
+import { hashPassword, type PasswordHashRecord, verifyPassword } from "./password-hash"
+
+export interface AuthFile {
+  version: 1
+  username: string
+  password: PasswordHashRecord
+  userProvided: boolean
+  updatedAt: string
+}
+
+export interface AuthStatus {
+  username: string
+  passwordUserProvided: boolean
+}
+
+export class AuthStore {
+  private cachedFile: AuthFile | null = null
+  private overrideAuth: AuthFile | null = null
+  private bootstrapUsername: string | null = null
+
+  constructor(private readonly authFilePath: string, private readonly logger: Logger) {}
+
+  getAuthFilePath() {
+    return this.authFilePath
+  }
+
+  load(): AuthFile | null {
+    if (this.overrideAuth) {
+      return this.overrideAuth
+    }
+
+    if (this.cachedFile) {
+      return this.cachedFile
+    }
+
+    try {
+      if (!fs.existsSync(this.authFilePath)) {
+        return null
+      }
+      const raw = fs.readFileSync(this.authFilePath, "utf-8")
+      const parsed = JSON.parse(raw) as AuthFile
+      if (!parsed || parsed.version !== 1) {
+        this.logger.warn({ authFilePath: this.authFilePath }, "Auth file has unsupported version")
+        return null
+      }
+      this.cachedFile = parsed
+      return parsed
+    } catch (error) {
+      this.logger.warn({ err: error, authFilePath: this.authFilePath }, "Failed to load auth file")
+      return null
+    }
+  }
+
+  ensureInitialized(params: {
+    username: string
+    password?: string
+    allowBootstrapWithoutPassword: boolean
+  }): void {
+    const password = params.password?.trim()
+    if (password) {
+      const now = new Date().toISOString()
+      const runtime: AuthFile = {
+        version: 1,
+        username: params.username,
+        password: hashPassword(password),
+        userProvided: true,
+        updatedAt: now,
+      }
+      this.overrideAuth = runtime
+      this.cachedFile = null
+      this.bootstrapUsername = null
+      this.logger.debug({ authFilePath: this.authFilePath }, "Using runtime auth password override; ignoring auth file")
+      return
+    }
+
+    const existing = this.load()
+    if (existing) {
+      if (existing.username !== params.username) {
+        // Keep existing username unless explicitly overridden later.
+        this.logger.debug({ existing: existing.username, requested: params.username }, "Auth username differs from requested")
+      }
+      this.bootstrapUsername = null
+      return
+    }
+
+    if (params.allowBootstrapWithoutPassword) {
+      this.bootstrapUsername = params.username
+      this.logger.debug({ authFilePath: this.authFilePath }, "No auth file present; bootstrap-only mode enabled")
+      return
+    }
+
+    throw new Error(
+      `No server password configured. Create ${this.authFilePath} or start with --password / CODENOMAD_SERVER_PASSWORD.`,
+    )
+  }
+
+  validateCredentials(username: string, password: string): boolean {
+    const auth = this.load()
+    if (!auth) {
+      return false
+    }
+
+    if (username !== auth.username) {
+      return false
+    }
+
+    return verifyPassword(password, auth.password)
+  }
+
+  setPassword(params: { password: string; markUserProvided: boolean }): AuthStatus {
+    if (this.overrideAuth) {
+      throw new Error(
+        "Server password is provided via CLI/env and cannot be changed while running. Restart without --password / CODENOMAD_SERVER_PASSWORD to use auth.json.",
+      )
+    }
+
+    const current = this.load()
+
+    if (!current) {
+      if (!this.bootstrapUsername) {
+        throw new Error("Auth is not initialized")
+      }
+
+      const created: AuthFile = {
+        version: 1,
+        username: this.bootstrapUsername,
+        password: hashPassword(params.password),
+        userProvided: params.markUserProvided,
+        updatedAt: new Date().toISOString(),
+      }
+
+      this.persist(created)
+      this.bootstrapUsername = null
+      return { username: created.username, passwordUserProvided: created.userProvided }
+    }
+
+    const next: AuthFile = {
+      ...current,
+      password: hashPassword(params.password),
+      userProvided: params.markUserProvided,
+      updatedAt: new Date().toISOString(),
+    }
+
+    this.persist(next)
+    return { username: next.username, passwordUserProvided: next.userProvided }
+  }
+
+  getStatus(): AuthStatus {
+    const current = this.load()
+    if (current) {
+      return { username: current.username, passwordUserProvided: current.userProvided }
+    }
+
+    if (this.bootstrapUsername) {
+      return { username: this.bootstrapUsername, passwordUserProvided: false }
+    }
+
+    throw new Error("Auth is not initialized")
+  }
+
+  private persist(auth: AuthFile) {
+    try {
+      fs.mkdirSync(path.dirname(this.authFilePath), { recursive: true })
+      fs.writeFileSync(this.authFilePath, JSON.stringify(auth, null, 2), "utf-8")
+      this.cachedFile = auth
+      this.logger.debug({ authFilePath: this.authFilePath }, "Persisted auth file")
+    } catch (error) {
+      this.logger.error({ err: error, authFilePath: this.authFilePath }, "Failed to persist auth file")
+      throw error
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import type { FastifyReply, FastifyRequest } from "fastify"
+
+export function parseCookies(header: string | undefined): Record<string, string> {
+  const result: Record<string, string> = {}
+  if (!header) return result
+
+  const parts = header.split(";")
+  for (const part of parts) {
+    const index = part.indexOf("=")
+    if (index < 0) continue
+    const key = part.slice(0, index).trim()
+    const value = part.slice(index + 1).trim()
+    if (!key) continue
+    result[key] = decodeURIComponent(value)
+  }
+  return result
+}
+
+export function isLoopbackAddress(remoteAddress: string | undefined): boolean {
+  if (!remoteAddress) return false
+  if (remoteAddress === "127.0.0.1" || remoteAddress === "::1") return true
+  if (remoteAddress === "::ffff:127.0.0.1") return true
+  return false
+}
+
+export function wantsHtml(request: FastifyRequest): boolean {
+  const accept = (request.headers["accept"] ?? "").toString().toLowerCase()
+  return accept.includes("text/html") || accept.includes("application/xhtml")
+}
+
+export function sendUnauthorized(request: FastifyRequest, reply: FastifyReply) {
+  if (request.method === "GET" && !request.url.startsWith("/api/") && wantsHtml(request)) {
+    reply.redirect("/login")
+    return
+  }
+
+  reply.code(401).send({ error: "Unauthorized" })
+}

packages/server/src/auth/manager.ts

@@ -0,0 +1,113 @@
+import type { FastifyReply, FastifyRequest } from "fastify"
+import path from "path"
+import type { Logger } from "../logger"
+import { AuthStore } from "./auth-store"
+import { TokenManager } from "./token-manager"
+import { SessionManager } from "./session-manager"
+import { isLoopbackAddress, parseCookies } from "./http-auth"
+
+export const BOOTSTRAP_TOKEN_STDOUT_PREFIX = "CODENOMAD_BOOTSTRAP_TOKEN:" as const
+export const DEFAULT_AUTH_USERNAME = "codenomad" as const
+export const DEFAULT_AUTH_COOKIE_NAME = "codenomad_session" as const
+
+export interface AuthManagerInit {
+  configPath: string
+  username: string
+  password?: string
+  generateToken: boolean
+}
+
+export class AuthManager {
+  private readonly authStore: AuthStore
+  private readonly tokenManager: TokenManager | null
+  private readonly sessionManager = new SessionManager()
+  private readonly cookieName = DEFAULT_AUTH_COOKIE_NAME
+
+  constructor(private readonly init: AuthManagerInit, private readonly logger: Logger) {
+    const authFilePath = resolveAuthFilePath(init.configPath)
+    this.authStore = new AuthStore(authFilePath, logger.child({ component: "auth" }))
+
+    // Startup: password comes from CLI/env, auth.json, or bootstrap-only mode.
+    this.authStore.ensureInitialized({
+      username: init.username,
+      password: init.password,
+      allowBootstrapWithoutPassword: init.generateToken,
+    })
+
+    this.tokenManager = init.generateToken ? new TokenManager(60_000) : null
+  }
+
+  getCookieName(): string {
+    return this.cookieName
+  }
+
+  isTokenBootstrapEnabled(): boolean {
+    return Boolean(this.tokenManager)
+  }
+
+  issueBootstrapToken(): string | null {
+    if (!this.tokenManager) return null
+    return this.tokenManager.generate()
+  }
+
+  consumeBootstrapToken(token: string): boolean {
+    if (!this.tokenManager) return false
+    return this.tokenManager.consume(token)
+  }
+
+  validateLogin(username: string, password: string): boolean {
+    return this.authStore.validateCredentials(username, password)
+  }
+
+  createSession(username: string) {
+    return this.sessionManager.createSession(username)
+  }
+
+  getStatus() {
+    return this.authStore.getStatus()
+  }
+
+  setPassword(password: string) {
+    return this.authStore.setPassword({ password, markUserProvided: true })
+  }
+
+  isLoopbackRequest(request: FastifyRequest): boolean {
+    return isLoopbackAddress(request.socket.remoteAddress)
+  }
+
+  getSessionFromRequest(request: FastifyRequest): { username: string; sessionId: string } | null {
+    const cookies = parseCookies(request.headers.cookie)
+    const sessionId = cookies[this.cookieName]
+    const session = this.sessionManager.getSession(sessionId)
+    if (!session) return null
+    return { username: session.username, sessionId: session.id }
+  }
+
+  setSessionCookie(reply: FastifyReply, sessionId: string) {
+    reply.header("Set-Cookie", buildSessionCookie(this.cookieName, sessionId))
+  }
+
+  clearSessionCookie(reply: FastifyReply) {
+    reply.header("Set-Cookie", buildSessionCookie(this.cookieName, "", { maxAgeSeconds: 0 }))
+  }
+}
+
+function resolveAuthFilePath(configPath: string) {
+  const resolvedConfigPath = resolvePath(configPath)
+  return path.join(path.dirname(resolvedConfigPath), "auth.json")
+}
+
+function resolvePath(filePath: string) {
+  if (filePath.startsWith("~/")) {
+    return path.join(process.env.HOME ?? "", filePath.slice(2))
+  }
+  return path.resolve(filePath)
+}
+
+function buildSessionCookie(name: string, value: string, options?: { maxAgeSeconds?: number }) {
+  const parts = [`${name}=${encodeURIComponent(value)}`, "HttpOnly", "Path=/", "SameSite=Lax"]
+  if (options?.maxAgeSeconds !== undefined) {
+    parts.push(`Max-Age=${Math.max(0, Math.floor(options.maxAgeSeconds))}`)
+  }
+  return parts.join("; ")
+}

packages/server/src/auth/password-hash.ts

@@ -0,0 +1,49 @@
+import crypto from "crypto"
+
+export interface PasswordHashRecord {
+  algorithm: "scrypt"
+  saltBase64: string
+  hashBase64: string
+  keyLength: number
+  params: {
+    N: number
+    r: number
+    p: number
+    maxmem: number
+  }
+}
+
+const DEFAULT_SCRYPT_PARAMS = {
+  N: 16384,
+  r: 8,
+  p: 1,
+  maxmem: 32 * 1024 * 1024,
+}
+
+export function hashPassword(password: string): PasswordHashRecord {
+  const salt = crypto.randomBytes(16)
+  const params = DEFAULT_SCRYPT_PARAMS
+  const keyLength = 64
+  const derived = crypto.scryptSync(password, salt, keyLength, params)
+  return {
+    algorithm: "scrypt",
+    saltBase64: salt.toString("base64"),
+    hashBase64: Buffer.from(derived).toString("base64"),
+    keyLength,
+    params,
+  }
+}
+
+export function verifyPassword(password: string, record: PasswordHashRecord): boolean {
+  if (record.algorithm !== "scrypt") {
+    return false
+  }
+
+  const salt = Buffer.from(record.saltBase64, "base64")
+  const expected = Buffer.from(record.hashBase64, "base64")
+  const derived = crypto.scryptSync(password, salt, record.keyLength, record.params)
+  if (expected.length !== derived.length) {
+    return false
+  }
+  return crypto.timingSafeEqual(expected, Buffer.from(derived))
+}

packages/server/src/auth/session-manager.ts

@@ -0,0 +1,23 @@
+import crypto from "crypto"
+
+export interface SessionInfo {
+  id: string
+  createdAt: number
+  username: string
+}
+
+export class SessionManager {
+  private sessions = new Map<string, SessionInfo>()
+
+  createSession(username: string): SessionInfo {
+    const id = crypto.randomBytes(32).toString("base64url")
+    const info: SessionInfo = { id, createdAt: Date.now(), username }
+    this.sessions.set(id, info)
+    return info
+  }
+
+  getSession(id: string | undefined): SessionInfo | undefined {
+    if (!id) return undefined
+    return this.sessions.get(id)
+  }
+}

packages/server/src/auth/token-manager.ts

@@ -0,0 +1,32 @@
+import crypto from "crypto"
+
+export interface BootstrapToken {
+  token: string
+  createdAt: number
+  consumed: boolean
+}
+
+export class TokenManager {
+  private token: BootstrapToken | null = null
+
+  constructor(private readonly ttlMs: number) {}
+
+  generate(): string {
+    const token = crypto.randomBytes(32).toString("base64url")
+    this.token = { token, createdAt: Date.now(), consumed: false }
+    return token
+  }
+
+  consume(token: string): boolean {
+    if (!this.token) return false
+    if (this.token.consumed) return false
+    if (Date.now() - this.token.createdAt > this.ttlMs) return false
+    if (token !== this.token.token) return false
+    this.token.consumed = true
+    return true
+  }
+
+  peek(): string | null {
+    return this.token?.token ?? null
+  }
+}

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

@@ -0,0 +1,484 @@
+import { spawn, type ChildProcess } from "child_process"
+import { createWriteStream, existsSync, promises as fs } from "fs"
+import path from "path"
+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"
+
+const ROOT_DIR = ".codenomad/background_processes"
+const INDEX_FILE = "index.json"
+const OUTPUT_FILE = "output.txt"
+const STOP_TIMEOUT_MS = 2000
+const EXIT_WAIT_TIMEOUT_MS = 5000
+const MAX_OUTPUT_BYTES = 20 * 1024
+const OUTPUT_PUBLISH_INTERVAL_MS = 1000
+
+interface ManagerDeps {
+  workspaceManager: WorkspaceManager
+  eventBus: EventBus
+  logger: Logger
+}
+
+interface RunningProcess {
+  id: string
+  child: ChildProcess
+  outputPath: string
+  exitPromise: Promise<void>
+  workspaceId: string
+}
+
+export class BackgroundProcessManager {
+  private readonly running = new Map<string, RunningProcess>()
+
+  constructor(private readonly deps: ManagerDeps) {
+    this.deps.eventBus.on("workspace.stopped", (event) => this.cleanupWorkspace(event.workspaceId))
+    this.deps.eventBus.on("workspace.error", (event) => this.cleanupWorkspace(event.workspace.id))
+  }
+
+  async list(workspaceId: string): Promise<BackgroundProcess[]> {
+    const records = await this.readIndex(workspaceId)
+    const enriched = await Promise.all(
+      records.map(async (record) => ({
+        ...record,
+        outputSizeBytes: await this.getOutputSize(workspaceId, record.id),
+      })),
+    )
+    return enriched
+  }
+
+  async start(workspaceId: string, title: string, command: string): Promise<BackgroundProcess> {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      throw new Error("Workspace not found")
+    }
+
+    const id = this.generateId()
+    const processDir = await this.ensureProcessDir(workspaceId, id)
+    const outputPath = path.join(processDir, OUTPUT_FILE)
+
+    const outputStream = createWriteStream(outputPath, { flags: "a" })
+
+    const child = spawn("bash", ["-c", command], {
+      cwd: workspace.path,
+      stdio: ["ignore", "pipe", "pipe"],
+      detached: process.platform !== "win32",
+    })
+
+    child.on("exit", () => {
+      this.killProcessTree(child, "SIGTERM")
+    })
+
+    const record: BackgroundProcess = {
+
+      id,
+      workspaceId,
+      title,
+      command,
+      cwd: workspace.path,
+      status: "running",
+      pid: child.pid,
+      startedAt: new Date().toISOString(),
+      outputSizeBytes: 0,
+    }
+
+    const exitPromise = new Promise<void>((resolve) => {
+      child.on("close", async (code) => {
+        await new Promise<void>((resolve) => outputStream.end(resolve))
+        this.running.delete(id)
+
+        record.status = this.statusFromExit(code)
+        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)
+        resolve()
+      })
+    })
+
+    this.running.set(id, { id, child, outputPath, exitPromise, workspaceId })
+
+    let lastPublishAt = 0
+    const maybePublishSize = () => {
+      const now = Date.now()
+      if (now - lastPublishAt < OUTPUT_PUBLISH_INTERVAL_MS) {
+        return
+      }
+      lastPublishAt = now
+      this.publishUpdate(workspaceId, record)
+    }
+
+    child.stdout?.on("data", (data) => {
+      outputStream.write(data)
+      record.outputSizeBytes = (record.outputSizeBytes ?? 0) + data.length
+      maybePublishSize()
+    })
+    child.stderr?.on("data", (data) => {
+      outputStream.write(data)
+      record.outputSizeBytes = (record.outputSizeBytes ?? 0) + data.length
+      maybePublishSize()
+    })
+
+    await this.upsertIndex(workspaceId, record)
+    record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
+    this.publishUpdate(workspaceId, record)
+    return record
+  }
+
+  async stop(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
+    const record = await this.findProcess(workspaceId, processId)
+    if (!record) {
+      return null
+    }
+
+    const running = this.running.get(processId)
+    if (running?.child && !running.child.killed) {
+      this.killProcessTree(running.child, "SIGTERM")
+      await this.waitForExit(running)
+    }
+
+    if (record.status === "running") {
+      record.status = "stopped"
+      record.stoppedAt = new Date().toISOString()
+      await this.upsertIndex(workspaceId, record)
+      record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
+      this.publishUpdate(workspaceId, record)
+    }
+
+    return record
+  }
+
+  async terminate(workspaceId: string, processId: string): Promise<void> {
+    const record = await this.findProcess(workspaceId, processId)
+    if (!record) return
+
+    const running = this.running.get(processId)
+    if (running?.child && !running.child.killed) {
+      this.killProcessTree(running.child, "SIGTERM")
+      await this.waitForExit(running)
+    }
+
+    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 } },
+    })
+  }
+
+  async readOutput(
+    workspaceId: string,
+    processId: string,
+    options: { method?: "full" | "tail" | "head" | "grep"; pattern?: string; lines?: number; maxBytes?: number },
+  ) {
+    const outputPath = this.getOutputPath(workspaceId, processId)
+    if (!existsSync(outputPath)) {
+      return { id: processId, content: "", truncated: false, sizeBytes: 0 }
+    }
+
+    const stats = await fs.stat(outputPath)
+    const sizeBytes = stats.size
+    const method = options.method ?? "full"
+    const lineCount = options.lines ?? 10
+
+    const raw = await this.readOutputBytes(outputPath, sizeBytes, options.maxBytes)
+    let content = raw
+
+    switch (method) {
+      case "head":
+        content = this.headLines(raw, lineCount)
+        break
+      case "tail":
+        content = this.tailLines(raw, lineCount)
+        break
+      case "grep":
+        if (!options.pattern) {
+          throw new Error("Pattern is required for grep output")
+        }
+        content = this.grepLines(raw, options.pattern)
+        break
+      default:
+        content = raw
+    }
+
+    const effectiveMaxBytes = options.maxBytes
+    return {
+      id: processId,
+      content,
+      truncated: effectiveMaxBytes !== undefined && sizeBytes > effectiveMaxBytes,
+      sizeBytes,
+    }
+  }
+
+  async streamOutput(workspaceId: string, processId: string, reply: any) {
+    const outputPath = this.getOutputPath(workspaceId, processId)
+    if (!existsSync(outputPath)) {
+      reply.code(404).send({ error: "Output not found" })
+      return
+    }
+
+    reply.raw.setHeader("Content-Type", "text/event-stream")
+    reply.raw.setHeader("Cache-Control", "no-cache")
+    reply.raw.setHeader("Connection", "keep-alive")
+    reply.raw.flushHeaders?.()
+    reply.hijack()
+
+    const file = await fs.open(outputPath, "r")
+    let position = (await file.stat()).size
+
+    const tick = async () => {
+      const stats = await file.stat()
+      if (stats.size <= position) return
+
+      const length = stats.size - position
+      const buffer = Buffer.alloc(length)
+      await file.read(buffer, 0, length, position)
+      position = stats.size
+
+      const content = buffer.toString("utf-8")
+      reply.raw.write(`data: ${JSON.stringify({ type: "chunk", content })}\n\n`)
+    }
+
+    const interval = setInterval(() => {
+      tick().catch((error) => {
+        this.deps.logger.warn({ err: error }, "Failed to stream background process output")
+      })
+    }, 1000)
+
+    const close = () => {
+      clearInterval(interval)
+      file.close().catch(() => undefined)
+      reply.raw.end?.()
+    }
+
+    reply.raw.on("close", close)
+    reply.raw.on("error", close)
+  }
+
+  private async cleanupWorkspace(workspaceId: string) {
+    for (const [, running] of this.running.entries()) {
+      if (running.workspaceId !== workspaceId) continue
+      this.killProcessTree(running.child, "SIGTERM")
+      await this.waitForExit(running)
+    }
+
+    await this.removeWorkspaceDir(workspaceId)
+  }
+
+  private killProcessTree(child: ChildProcess, signal: NodeJS.Signals) {
+    const pid = child.pid
+    if (!pid) return
+
+    if (process.platform !== "win32") {
+      try {
+        process.kill(-pid, signal)
+        return
+      } catch {
+        // Fall back to killing the direct child.
+      }
+    }
+
+    try {
+      child.kill(signal)
+    } catch {
+      // ignore
+    }
+  }
+
+  private async waitForExit(running: RunningProcess) {
+    let exited = false
+    const exitPromise = running.exitPromise.finally(() => {
+      exited = true
+    })
+
+    const killTimeout = setTimeout(() => {
+      if (!exited) {
+        this.killProcessTree(running.child, "SIGKILL")
+      }
+    }, STOP_TIMEOUT_MS)
+
+    try {
+      await Promise.race([
+        exitPromise,
+        new Promise<void>((resolve) => {
+          setTimeout(resolve, EXIT_WAIT_TIMEOUT_MS)
+        }),
+      ])
+
+      if (!exited) {
+        this.killProcessTree(running.child, "SIGKILL")
+        this.running.delete(running.id)
+        this.deps.logger.warn({ pid: running.child.pid }, "Timed out waiting for background process to exit")
+      }
+    } finally {
+      clearTimeout(killTimeout)
+    }
+  }
+
+
+  private statusFromExit(code: number | null): BackgroundProcessStatus {
+    if (code === null) return "stopped"
+    if (code === 0) return "stopped"
+    return "error"
+  }
+
+  private async readOutputBytes(outputPath: string, sizeBytes: number, maxBytes?: number): Promise<string> {
+    if (maxBytes === undefined || sizeBytes <= maxBytes) {
+      return await fs.readFile(outputPath, "utf-8")
+    }
+
+    const start = Math.max(0, sizeBytes - maxBytes)
+    const file = await fs.open(outputPath, "r")
+    const buffer = Buffer.alloc(sizeBytes - start)
+    await file.read(buffer, 0, buffer.length, start)
+    await file.close()
+    return buffer.toString("utf-8")
+  }
+
+  private headLines(input: string, lines: number): string {
+    const parts = input.split(/\r?\n/)
+    return parts.slice(0, Math.max(0, lines)).join("\n")
+  }
+
+  private tailLines(input: string, lines: number): string {
+    const parts = input.split(/\r?\n/)
+    return parts.slice(Math.max(0, parts.length - lines)).join("\n")
+  }
+
+  private grepLines(input: string, pattern: string): string {
+    let matcher: RegExp
+    try {
+      matcher = new RegExp(pattern)
+    } catch {
+      throw new Error("Invalid grep pattern")
+    }
+    return input
+      .split(/\r?\n/)
+      .filter((line) => matcher.test(line))
+      .join("\n")
+  }
+
+  private async ensureProcessDir(workspaceId: string, processId: string) {
+    const root = await this.ensureWorkspaceDir(workspaceId)
+    const processDir = path.join(root, processId)
+    await fs.mkdir(processDir, { recursive: true })
+    return processDir
+  }
+
+  private async ensureWorkspaceDir(workspaceId: string) {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      throw new Error("Workspace not found")
+    }
+    const root = path.join(workspace.path, ROOT_DIR, workspaceId)
+    await fs.mkdir(root, { recursive: true })
+    return root
+  }
+
+  private getOutputPath(workspaceId: string, processId: string) {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      throw new Error("Workspace not found")
+    }
+    return path.join(workspace.path, ROOT_DIR, workspaceId, processId, OUTPUT_FILE)
+  }
+
+  private async findProcess(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
+    const records = await this.readIndex(workspaceId)
+    return records.find((entry) => entry.id === processId) ?? null
+  }
+
+  private async readIndex(workspaceId: string): Promise<BackgroundProcess[]> {
+    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[]) : []
+    } catch {
+      return []
+    }
+  }
+
+  private async upsertIndex(workspaceId: string, record: BackgroundProcess) {
+    const records = await this.readIndex(workspaceId)
+    const index = records.findIndex((entry) => entry.id === record.id)
+    if (index >= 0) {
+      records[index] = record
+    } else {
+      records.push(record)
+    }
+    await this.writeIndex(workspaceId, records)
+  }
+
+  private async removeFromIndex(workspaceId: string, processId: string) {
+    const records = await this.readIndex(workspaceId)
+    const next = records.filter((entry) => entry.id !== processId)
+    await this.writeIndex(workspaceId, next)
+  }
+
+  private async writeIndex(workspaceId: string, records: BackgroundProcess[]) {
+    const indexPath = await this.getIndexPath(workspaceId)
+    await fs.mkdir(path.dirname(indexPath), { recursive: true })
+    await fs.writeFile(indexPath, JSON.stringify(records, null, 2))
+  }
+
+  private async getIndexPath(workspaceId: string) {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      throw new Error("Workspace not found")
+    }
+    return path.join(workspace.path, ROOT_DIR, workspaceId, INDEX_FILE)
+  }
+
+  private async removeProcessDir(workspaceId: string, processId: string) {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      return
+    }
+    const processDir = path.join(workspace.path, ROOT_DIR, workspaceId, processId)
+    await fs.rm(processDir, { recursive: true, force: true })
+  }
+
+  private async removeWorkspaceDir(workspaceId: string) {
+    const workspace = this.deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      return
+    }
+    const workspaceDir = path.join(workspace.path, ROOT_DIR, workspaceId)
+    await fs.rm(workspaceDir, { recursive: true, force: true })
+  }
+
+  private async getOutputSize(workspaceId: string, processId: string): Promise<number> {
+    const outputPath = this.getOutputPath(workspaceId, processId)
+    if (!existsSync(outputPath)) {
+      return 0
+    }
+    try {
+      const stats = await fs.stat(outputPath)
+      return stats.size
+    } catch {
+      return 0
+    }
+  }
+
+  private publishUpdate(workspaceId: string, record: BackgroundProcess) {
+    this.deps.eventBus.publish({
+      type: "instance.event",
+      instanceId: workspaceId,
+      event: { type: "background.process.updated", properties: { process: record } },
+    })
+  }
+
+  private generateId(): string {
+    const timestamp = new Date().toISOString().replace(/[:.]/g, "").slice(0, 15)
+    const random = randomBytes(3).toString("hex")
+    return `proc_${timestamp}_${random}`
+  }
+}

packages/server/src/config/schema.ts

@@ -11,6 +11,7 @@ const AgentModelSelectionsSchema = z.record(z.string(), AgentModelSelectionSchem
 const PreferencesSchema = z.object({
   showThinkingBlocks: z.boolean().default(false),
   thinkingBlocksExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
+  showTimelineTools: z.boolean().default(true),
   lastUsedBinary: z.string().optional(),
   environmentVariables: z.record(z.string()).default({}),
   modelRecents: z.array(ModelPreferenceSchema).default([]),

packages/server/src/index.ts

@@ -18,6 +18,7 @@ import { InstanceEventBridge } from "./workspaces/instance-events"
 import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 import { startReleaseMonitor } from "./releases/release-monitor"
+import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_USERNAME } from "./auth/manager"
 
 const require = createRequire(import.meta.url)
 
@@ -37,6 +38,9 @@ interface CliOptions {
   uiStaticDir: string
   uiDevServer?: string
   launch: boolean
+  authUsername: string
+  authPassword?: string
+  generateToken: boolean
 }
 
 const DEFAULT_PORT = 9898
@@ -63,6 +67,17 @@ function parseCliOptions(argv: string[]): CliOptions {
     )
     .addOption(new Option("--ui-dev-server <url>", "Proxy UI requests to a running dev server").env("CLI_UI_DEV_SERVER"))
     .addOption(new Option("--launch", "Launch the UI in a browser after start").env("CLI_LAUNCH").default(false))
+    .addOption(
+      new Option("--username <username>", "Username for server authentication")
+        .env("CODENOMAD_SERVER_USERNAME")
+        .default(DEFAULT_AUTH_USERNAME),
+    )
+    .addOption(new Option("--password <password>", "Password for server authentication").env("CODENOMAD_SERVER_PASSWORD"))
+    .addOption(
+      new Option("--generate-token", "Emit a one-time bootstrap token for desktop")
+        .env("CODENOMAD_GENERATE_TOKEN")
+        .default(false),
+    )
 
   program.parse(argv, { from: "user" })
   const parsed = program.opts<{
@@ -77,6 +92,9 @@ function parseCliOptions(argv: string[]): CliOptions {
     uiDir: string
     uiDevServer?: string
     launch?: boolean
+    username: string
+    password?: string
+    generateToken?: boolean
   }>()
 
   const resolvedRoot = parsed.workspaceRoot ?? parsed.root ?? process.cwd()
@@ -94,6 +112,9 @@ function parseCliOptions(argv: string[]): CliOptions {
     uiStaticDir: parsed.uiDir,
     uiDevServer: parsed.uiDevServer,
     launch: Boolean(parsed.launch),
+    authUsername: parsed.username,
+    authPassword: parsed.password,
+    generateToken: Boolean(parsed.generateToken),
   }
 }
 
@@ -119,25 +140,14 @@ async function main() {
   const configLogger = logger.child({ component: "config" })
   const eventLogger = logger.child({ component: "events" })
 
-  logger.info({ options }, "Starting CodeNomad CLI server")
+  const logOptions = {
+    ...options,
+    authPassword: options.authPassword ? "[REDACTED]" : undefined,
+  }
+
+  logger.info({ options: logOptions }, "Starting CodeNomad CLI server")
 
   const eventBus = new EventBus(eventLogger)
-  const configStore = new ConfigStore(options.configPath, eventBus, configLogger)
-  const binaryRegistry = new BinaryRegistry(configStore, eventBus, configLogger)
-  const workspaceManager = new WorkspaceManager({
-    rootDir: options.rootDir,
-    configStore,
-    binaryRegistry,
-    eventBus,
-    logger: workspaceLogger,
-  })
-  const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
-  const instanceStore = new InstanceStore()
-  const instanceEventBridge = new InstanceEventBridge({
-    workspaceManager,
-    eventBus,
-    logger: logger.child({ component: "instance-events" }),
-  })
 
   const serverMeta: ServerMeta = {
     httpBaseUrl: `http://${options.host}:${options.port}`,
@@ -150,6 +160,41 @@ async function main() {
     addresses: [],
   }
 
+  const authManager = new AuthManager(
+    {
+      configPath: options.configPath,
+      username: options.authUsername,
+      password: options.authPassword,
+      generateToken: options.generateToken,
+    },
+    logger.child({ component: "auth" }),
+  )
+
+  if (options.generateToken) {
+    const token = authManager.issueBootstrapToken()
+    if (token) {
+      console.log(`${BOOTSTRAP_TOKEN_STDOUT_PREFIX}${token}`)
+    }
+  }
+
+  const configStore = new ConfigStore(options.configPath, eventBus, configLogger)
+  const binaryRegistry = new BinaryRegistry(configStore, eventBus, configLogger)
+  const workspaceManager = new WorkspaceManager({
+    rootDir: options.rootDir,
+    configStore,
+    binaryRegistry,
+    eventBus,
+    logger: workspaceLogger,
+    getServerBaseUrl: () => serverMeta.httpBaseUrl,
+  })
+  const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
+  const instanceStore = new InstanceStore()
+  const instanceEventBridge = new InstanceEventBridge({
+    workspaceManager,
+    eventBus,
+    logger: logger.child({ component: "instance-events" }),
+  })
+
   const releaseMonitor = startReleaseMonitor({
     currentVersion: packageJson.version,
     logger: logger.child({ component: "release-monitor" }),
@@ -173,6 +218,7 @@ async function main() {
     eventBus,
     serverMeta,
     instanceStore,
+    authManager,
     uiStaticDir: options.uiStaticDir,
     uiDevServerUrl: options.uiDevServer,
     logger,

packages/server/src/opencode-config.ts

@@ -0,0 +1,31 @@
+import { existsSync } from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+import { createLogger } from "./logger"
+
+const log = createLogger({ component: "opencode-config" })
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const devTemplateDir = path.resolve(__dirname, "../../opencode-config")
+const resourcesPath = (process as NodeJS.Process & { resourcesPath?: string }).resourcesPath
+const prodTemplateDirs = [
+  resourcesPath ? path.resolve(resourcesPath, "opencode-config") : undefined,
+  path.resolve(__dirname, "opencode-config"),
+].filter((dir): dir is string => Boolean(dir))
+
+const isDevBuild = Boolean(process.env.CODENOMAD_DEV ?? process.env.CLI_UI_DEV_SERVER) || existsSync(devTemplateDir)
+const templateDir = isDevBuild
+  ? devTemplateDir
+  : prodTemplateDirs.find((dir) => existsSync(dir)) ?? prodTemplateDirs[0]
+
+export function getOpencodeConfigDir(): string {
+  if (!existsSync(templateDir)) {
+    throw new Error(`CodeNomad Opencode config template missing at ${templateDir}`)
+  }
+
+  if (isDevBuild) {
+    log.debug({ templateDir }, "Using Opencode config template directly (dev mode)")
+  }
+
+  return templateDir
+}

packages/server/src/plugins/channel.ts

@@ -0,0 +1,55 @@
+import type { FastifyReply } from "fastify"
+import type { Logger } from "../logger"
+
+export interface PluginOutboundEvent {
+  type: string
+  properties?: Record<string, unknown>
+}
+
+interface ClientConnection {
+  reply: FastifyReply
+  workspaceId: string
+}
+
+export class PluginChannelManager {
+  private readonly clients = new Set<ClientConnection>()
+
+  constructor(private readonly logger: Logger) {}
+
+  register(workspaceId: string, reply: FastifyReply) {
+    const connection: ClientConnection = { workspaceId, reply }
+    this.clients.add(connection)
+    this.logger.debug({ workspaceId }, "Plugin SSE client connected")
+
+    let closed = false
+    const close = () => {
+      if (closed) return
+      closed = true
+      this.clients.delete(connection)
+      this.logger.debug({ workspaceId }, "Plugin SSE client disconnected")
+    }
+
+    return { close }
+  }
+
+  send(workspaceId: string, event: PluginOutboundEvent) {
+    for (const client of this.clients) {
+      if (client.workspaceId !== workspaceId) continue
+      this.write(client.reply, event)
+    }
+  }
+
+  broadcast(event: PluginOutboundEvent) {
+    for (const client of this.clients) {
+      this.write(client.reply, event)
+    }
+  }
+
+  private write(reply: FastifyReply, event: PluginOutboundEvent) {
+    try {
+      reply.raw.write(`data: ${JSON.stringify(event)}\n\n`)
+    } catch (error) {
+      this.logger.warn({ err: error }, "Failed to write plugin SSE event")
+    }
+  }
+}

packages/server/src/plugins/handlers.ts

@@ -0,0 +1,36 @@
+import type { EventBus } from "../events/bus"
+import type { WorkspaceManager } from "../workspaces/manager"
+import type { Logger } from "../logger"
+import type { PluginOutboundEvent } from "./channel"
+
+export interface PluginInboundEvent {
+  type: string
+  properties?: Record<string, unknown>
+}
+
+interface HandlerDeps {
+  workspaceManager: WorkspaceManager
+  eventBus: EventBus
+  logger: Logger
+}
+
+export function handlePluginEvent(workspaceId: string, event: PluginInboundEvent, deps: HandlerDeps) {
+  switch (event.type) {
+    case "codenomad.pong":
+      deps.logger.debug({ workspaceId, properties: event.properties }, "Plugin pong received")
+      return
+
+    default:
+      deps.logger.debug({ workspaceId, eventType: event.type }, "Unhandled plugin event")
+  }
+}
+
+export function buildPingEvent(): PluginOutboundEvent {
+
+  return {
+    type: "codenomad.ping",
+    properties: {
+      ts: Date.now(),
+    },
+  }
+}

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

@@ -18,8 +18,14 @@ import { registerFilesystemRoutes } from "./routes/filesystem"
 import { registerMetaRoutes } from "./routes/meta"
 import { registerEventRoutes } from "./routes/events"
 import { registerStorageRoutes } from "./routes/storage"
+import { registerPluginRoutes } from "./routes/plugin"
+import { registerBackgroundProcessRoutes } from "./routes/background-processes"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
+import { BackgroundProcessManager } from "../background-processes/manager"
+import type { AuthManager } from "../auth/manager"
+import { registerAuthRoutes } from "./routes/auth"
+import { sendUnauthorized, wantsHtml } from "../auth/http-auth"
 
 interface HttpServerDeps {
   host: string
@@ -31,6 +37,7 @@ interface HttpServerDeps {
   eventBus: EventBus
   serverMeta: ServerMeta
   instanceStore: InstanceStore
+  authManager: AuthManager
   uiStaticDir: string
   uiDevServerUrl?: string
   logger: Logger
@@ -85,8 +92,34 @@ export function createHttpServer(deps: HttpServerDeps) {
     done()
   })
 
+  const allowedDevOrigins = new Set(["http://localhost:3000", "http://127.0.0.1:3000"])
+
   app.register(cors, {
-    origin: true,
+    origin: (origin, cb) => {
+      if (!origin) {
+        cb(null, true)
+        return
+      }
+
+      let selfOrigin: string | null = null
+      try {
+        selfOrigin = new URL(deps.serverMeta.httpBaseUrl).origin
+      } catch {
+        selfOrigin = null
+      }
+
+      if (selfOrigin && origin === selfOrigin) {
+        cb(null, true)
+        return
+      }
+
+      if (allowedDevOrigins.has(origin)) {
+        cb(null, true)
+        return
+      }
+
+      cb(null, false)
+    },
     credentials: true,
   })
 
@@ -100,6 +133,82 @@ export function createHttpServer(deps: HttpServerDeps) {
     },
   })
 
+  const backgroundProcessManager = new BackgroundProcessManager({
+    workspaceManager: deps.workspaceManager,
+    eventBus: deps.eventBus,
+    logger: deps.logger.child({ component: "background-processes" }),
+  })
+
+  registerAuthRoutes(app, { authManager: deps.authManager })
+
+  app.addHook("preHandler", (request, reply, done) => {
+    const rawUrl = request.raw.url ?? request.url
+    const pathname = (rawUrl.split("?")[0] ?? "").trim()
+
+    const publicApiPaths = new Set(["/api/auth/login", "/api/auth/token", "/api/auth/status", "/api/auth/logout"])
+    const publicPagePaths = new Set(["/login"])
+    if (deps.authManager.isTokenBootstrapEnabled()) {
+      publicPagePaths.add("/auth/token")
+    }
+
+    if (publicApiPaths.has(pathname) || publicPagePaths.has(pathname)) {
+      done()
+      return
+    }
+
+    const session = deps.authManager.getSessionFromRequest(request)
+
+    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/")
+    if (requiresAuthForApi && !session) {
+      // Allow OpenCode plugin -> CodeNomad calls with per-instance basic auth.
+      const pluginMatch = pathname.match(/^\/workspaces\/([^/]+)\/plugin(?:\/|$)/)
+      if (pluginMatch) {
+        const workspaceId = pluginMatch[1]
+        const expected = deps.workspaceManager.getInstanceAuthorizationHeader(workspaceId)
+        const provided = Array.isArray(request.headers.authorization)
+          ? request.headers.authorization[0]
+          : request.headers.authorization
+
+        if (expected && provided && provided === expected) {
+          done()
+          return
+        }
+      }
+
+      sendUnauthorized(request, reply)
+      return
+    }
+
+    if (!session && wantsHtml(request)) {
+      reply.redirect("/login")
+      return
+    }
+
+    done()
+  })
+
+  app.get("/", async (request, reply) => {
+    const session = deps.authManager.getSessionFromRequest(request)
+    if (!session) {
+      reply.redirect("/login")
+      return
+    }
+
+    if (deps.uiDevServerUrl) {
+      await proxyToDevServer(request, reply, deps.uiDevServerUrl)
+      return
+    }
+
+    const uiDir = deps.uiStaticDir
+    const indexPath = path.join(uiDir, "index.html")
+    if (uiDir && fs.existsSync(indexPath)) {
+      reply.type("text/html").send(fs.readFileSync(indexPath, "utf-8"))
+      return
+    }
+
+    reply.code(404).send({ message: "UI bundle missing" })
+  })
+
   registerWorkspaceRoutes(app, { workspaceManager: deps.workspaceManager })
   registerConfigRoutes(app, { configStore: deps.configStore, binaryRegistry: deps.binaryRegistry })
   registerFilesystemRoutes(app, { fileSystemBrowser: deps.fileSystemBrowser })
@@ -110,13 +219,15 @@ export function createHttpServer(deps: HttpServerDeps) {
     eventBus: deps.eventBus,
     workspaceManager: deps.workspaceManager,
   })
+  registerPluginRoutes(app, { workspaceManager: deps.workspaceManager, eventBus: deps.eventBus, logger: proxyLogger })
+  registerBackgroundProcessRoutes(app, { backgroundProcessManager })
   registerInstanceProxyRoutes(app, { workspaceManager: deps.workspaceManager, logger: proxyLogger })
 
 
   if (deps.uiDevServerUrl) {
-    setupDevProxy(app, deps.uiDevServerUrl)
+    setupDevProxy(app, deps.uiDevServerUrl, deps.authManager)
   } else {
-    setupStaticUi(app, deps.uiStaticDir)
+    setupStaticUi(app, deps.uiStaticDir, deps.authManager)
   }
 
   return {
@@ -249,6 +360,7 @@ async function proxyWorkspaceRequest(args: {
   const queryIndex = (request.raw.url ?? "").indexOf("?")
   const search = queryIndex >= 0 ? (request.raw.url ?? "").slice(queryIndex) : ""
   const targetUrl = `http://${INSTANCE_PROXY_HOST}:${port}${normalizedSuffix}${search}`
+  const instanceAuthHeader = workspaceManager.getInstanceAuthorizationHeader(workspaceId)
 
   logger.debug({ workspaceId, method: request.method, targetUrl }, "Proxying request to instance")
   if (logger.isLevelEnabled("trace")) {
@@ -256,6 +368,12 @@ async function proxyWorkspaceRequest(args: {
   }
 
   return reply.from(targetUrl, {
+    rewriteRequestHeaders: (_originalRequest, headers) => {
+      if (instanceAuthHeader) {
+        headers.authorization = instanceAuthHeader
+      }
+      return headers
+    },
     onError: (proxyReply, { error }) => {
       logger.error({ err: error, workspaceId, targetUrl }, "Failed to proxy workspace request")
       if (!proxyReply.sent) {
@@ -273,7 +391,7 @@ function normalizeInstanceSuffix(pathSuffix: string | undefined) {
   return trimmed.length === 0 ? "/" : `/${trimmed}`
 }
 
-function setupStaticUi(app: FastifyInstance, uiDir: string) {
+function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthManager) {
   if (!uiDir) {
     app.log.warn("UI static directory not provided; API endpoints only")
     return
@@ -299,6 +417,12 @@ function setupStaticUi(app: FastifyInstance, uiDir: string) {
       return
     }
 
+    const session = authManager.getSessionFromRequest(request)
+    if (!session && wantsHtml(request)) {
+      reply.redirect("/login")
+      return
+    }
+
     if (fs.existsSync(indexPath)) {
       reply.type("text/html").send(fs.readFileSync(indexPath, "utf-8"))
     } else {
@@ -307,7 +431,7 @@ function setupStaticUi(app: FastifyInstance, uiDir: string) {
   })
 }
 
-function setupDevProxy(app: FastifyInstance, upstreamBase: string) {
+function setupDevProxy(app: FastifyInstance, upstreamBase: string, authManager: AuthManager) {
   app.log.info({ upstreamBase }, "Proxying UI requests to development server")
   app.setNotFoundHandler((request: FastifyRequest, reply: FastifyReply) => {
     const url = request.raw.url ?? ""
@@ -315,6 +439,13 @@ function setupDevProxy(app: FastifyInstance, upstreamBase: string) {
       reply.code(404).send({ message: "Not Found" })
       return
     }
+
+    const session = authManager.getSessionFromRequest(request)
+    if (!session && wantsHtml(request)) {
+      reply.redirect("/login")
+      return
+    }
+
     void proxyToDevServer(request, reply, upstreamBase)
   })
 }

packages/server/src/server/routes/auth-pages/login.html

@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CodeNomad Login</title>
+    <style>
+      body {
+        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+        background: #0b0b0f;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+      }
+      .card {
+        width: 420px;
+        max-width: calc(100vw - 32px);
+        background: #14141c;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 24px;
+      }
+      h1 {
+        font-size: 18px;
+        margin: 0 0 12px;
+      }
+      p {
+        margin: 0 0 18px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 13px;
+        line-height: 1.4;
+      }
+      label {
+        display: block;
+        font-size: 12px;
+        margin: 10px 0 6px;
+        color: rgba(255, 255, 255, 0.75);
+      }
+      input {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        background: #0f0f16;
+        color: #fff;
+      }
+      button {
+        width: 100%;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        border: 0;
+        background: #4c6fff;
+        color: #fff;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .error {
+        margin-top: 12px;
+        color: #ff6b6b;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>Sign in</h1>
+      <p>This CodeNomad server is protected. Enter your credentials to continue.</p>
+
+      <label for="username">Username</label>
+      <input id="username" autocomplete="username" placeholder="{{DEFAULT_USERNAME}}" value="" />
+
+      <label for="password">Password</label>
+      <input id="password" type="password" autocomplete="current-password" value="" />
+
+      <button id="submit" type="button">Continue</button>
+      <div id="error" class="error" style="display: none"></div>
+    </div>
+
+    <script>
+      const $ = (id) => document.getElementById(id)
+      const errorEl = $("error")
+      const showError = (msg) => {
+        errorEl.textContent = msg
+        errorEl.style.display = "block"
+      }
+      const hideError = () => {
+        errorEl.textContent = ""
+        errorEl.style.display = "none"
+      }
+
+      async function submit() {
+        hideError()
+        const username = $("username").value.trim()
+        const password = $("password").value
+        if (!username || !password) {
+          showError("Username and password are required.")
+          return
+        }
+        try {
+          const res = await fetch("/api/auth/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ username, password }),
+            credentials: "include",
+          })
+          if (!res.ok) {
+            let message = ""
+            try {
+              const json = await res.json()
+              message = json && json.error ? String(json.error) : ""
+            } catch {
+              message = ""
+            }
+            showError(message || `Login failed (${res.status})`)
+            return
+          }
+          window.location.href = "/"
+        } catch (e) {
+          showError(e && e.message ? e.message : String(e))
+        }
+      }
+
+      $("submit").addEventListener("click", submit)
+      $("password").addEventListener("keydown", (e) => {
+        if (e.key === "Enter") submit()
+      })
+    </script>
+  </body>
+</html>

packages/server/src/server/routes/auth-pages/token.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CodeNomad</title>
+    <style>
+      body {
+        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+        background: #0b0b0f;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+      }
+      .card {
+        width: 420px;
+        max-width: calc(100vw - 32px);
+        background: #14141c;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 24px;
+      }
+      h1 {
+        font-size: 18px;
+        margin: 0 0 12px;
+      }
+      p {
+        margin: 0;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 13px;
+        line-height: 1.4;
+      }
+      .error {
+        margin-top: 12px;
+        color: #ff6b6b;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>Connecting…</h1>
+      <p>Finalizing local authentication.</p>
+      <div id="error" class="error" style="display: none"></div>
+    </div>
+
+    <script>
+      const token = (location.hash || "").replace(/^#/, "").trim()
+      const errorEl = document.getElementById("error")
+      const showError = (msg) => {
+        errorEl.textContent = msg
+        errorEl.style.display = "block"
+      }
+
+      async function run() {
+        if (!token) {
+          showError("Missing bootstrap token.")
+          return
+        }
+
+        try {
+          const res = await fetch("/api/auth/token", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ token }),
+            credentials: "include",
+          })
+
+          if (!res.ok) {
+            let message = ""
+            try {
+              const json = await res.json()
+              message = json && json.error ? String(json.error) : ""
+            } catch {
+              message = ""
+            }
+            showError(message || `Token exchange failed (${res.status})`)
+            return
+          }
+
+          window.location.replace("/")
+        } catch (e) {
+          showError(e && e.message ? e.message : String(e))
+        }
+      }
+
+      run()
+    </script>
+  </body>
+</html>

packages/server/src/server/routes/auth.ts

@@ -0,0 +1,157 @@
+import type { FastifyInstance } from "fastify"
+import fs from "fs"
+import { z } from "zod"
+import type { AuthManager } from "../../auth/manager"
+import { isLoopbackAddress } from "../../auth/http-auth"
+
+interface RouteDeps {
+  authManager: AuthManager
+}
+
+const LoginSchema = z.object({
+  username: z.string().min(1),
+  password: z.string().min(1),
+})
+
+const TokenSchema = z.object({
+  token: z.string().min(1),
+})
+
+const PasswordSchema = z.object({
+  password: z.string().min(8),
+})
+
+const LOGIN_TEMPLATE_URL = new URL("./auth-pages/login.html", import.meta.url)
+const TOKEN_TEMPLATE_URL = new URL("./auth-pages/token.html", import.meta.url)
+
+let cachedLoginTemplate: string | null = null
+let cachedTokenTemplate: string | null = null
+
+function readTemplate(url: URL, cache: string | null): string {
+  if (cache) return cache
+  const content = fs.readFileSync(url, "utf-8")
+  return content
+}
+
+function getLoginHtml(defaultUsername: string): string {
+  if (!cachedLoginTemplate) {
+    cachedLoginTemplate = readTemplate(LOGIN_TEMPLATE_URL, null)
+  }
+
+  const escapedUsername = escapeHtml(defaultUsername)
+  return cachedLoginTemplate.replace(/\{\{DEFAULT_USERNAME\}\}/g, escapedUsername)
+}
+
+function getTokenHtml(): string {
+  if (!cachedTokenTemplate) {
+    cachedTokenTemplate = readTemplate(TOKEN_TEMPLATE_URL, null)
+  }
+
+  return cachedTokenTemplate
+}
+
+export function registerAuthRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/login", async (_request, reply) => {
+    const status = deps.authManager.getStatus()
+    reply.type("text/html").send(getLoginHtml(status.username))
+  })
+
+  app.get("/auth/token", async (request, reply) => {
+    if (!deps.authManager.isTokenBootstrapEnabled()) {
+      reply.code(404).send({ error: "Not found" })
+      return
+    }
+
+    if (!isLoopbackAddress(request.socket.remoteAddress)) {
+      reply.code(404).send({ error: "Not found" })
+      return
+    }
+
+    reply.type("text/html").send(getTokenHtml())
+  })
+
+  app.get("/api/auth/status", async (request, reply) => {
+    const session = deps.authManager.getSessionFromRequest(request)
+    if (!session) {
+      reply.send({ authenticated: false })
+      return
+    }
+    reply.send({ authenticated: true, ...deps.authManager.getStatus() })
+  })
+
+  app.post("/api/auth/login", async (request, reply) => {
+    const body = LoginSchema.parse(request.body ?? {})
+    const ok = deps.authManager.validateLogin(body.username, body.password)
+    if (!ok) {
+      reply.code(401).send({ error: "Invalid credentials" })
+      return
+    }
+
+    const session = deps.authManager.createSession(body.username)
+    deps.authManager.setSessionCookie(reply, session.id)
+    reply.send({ ok: true })
+  })
+
+  app.post("/api/auth/token", async (request, reply) => {
+    if (!deps.authManager.isTokenBootstrapEnabled()) {
+      reply.code(404).send({ error: "Not found" })
+      return
+    }
+
+    if (!isLoopbackAddress(request.socket.remoteAddress)) {
+      reply.code(404).send({ error: "Not found" })
+      return
+    }
+
+    const body = TokenSchema.parse(request.body ?? {})
+    const ok = deps.authManager.consumeBootstrapToken(body.token)
+    if (!ok) {
+      reply.code(401).send({ error: "Invalid token" })
+      return
+    }
+
+    const username = deps.authManager.getStatus().username
+    const session = deps.authManager.createSession(username)
+    deps.authManager.setSessionCookie(reply, session.id)
+    reply.send({ ok: true })
+  })
+
+  app.post("/api/auth/logout", async (_request, reply) => {
+    deps.authManager.clearSessionCookie(reply)
+    reply.send({ ok: true })
+  })
+
+  app.post("/api/auth/password", async (request, reply) => {
+    const session = deps.authManager.getSessionFromRequest(request)
+    if (!session) {
+      reply.code(401).send({ error: "Unauthorized" })
+      return
+    }
+
+    const body = PasswordSchema.parse(request.body ?? {})
+    try {
+      const status = deps.authManager.setPassword(body.password)
+      reply.send({ ok: true, ...status })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      reply.code(409).type("text/plain").send(message)
+    }
+  })
+}
+
+function escapeHtml(value: string) {
+  return value.replace(/[&<>"]/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;"
+      case "<":
+        return "&lt;"
+      case ">":
+        return "&gt;"
+      case '"':
+        return "&quot;"
+      default:
+        return char
+    }
+  })
+}

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

@@ -0,0 +1,85 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { BackgroundProcessManager } from "../../background-processes/manager"
+
+interface RouteDeps {
+  backgroundProcessManager: BackgroundProcessManager
+}
+
+const StartSchema = z.object({
+  title: z.string().trim().min(1),
+  command: z.string().trim().min(1),
+})
+
+const OutputQuerySchema = z.object({
+  method: z.enum(["full", "tail", "head", "grep"]).optional(),
+  mode: z.enum(["full", "tail", "head", "grep"]).optional(),
+  pattern: z.string().optional(),
+  lines: z.coerce.number().int().positive().max(2000).optional(),
+  maxBytes: z.coerce.number().int().positive().optional(),
+})
+
+export function registerBackgroundProcessRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get<{ Params: { id: string } }>("/workspaces/:id/plugin/background-processes", async (request) => {
+    const processes = await deps.backgroundProcessManager.list(request.params.id)
+    return { processes }
+  })
+
+  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)
+    reply.code(201)
+    return process
+  })
+
+  app.post<{ Params: { id: string; processId: string } }>(
+    "/workspaces/:id/plugin/background-processes/:processId/stop",
+    async (request, reply) => {
+      const process = await deps.backgroundProcessManager.stop(request.params.id, request.params.processId)
+      if (!process) {
+        reply.code(404)
+        return { error: "Process not found" }
+      }
+      return process
+    },
+  )
+
+  app.post<{ Params: { id: string; processId: string } }>(
+    "/workspaces/:id/plugin/background-processes/:processId/terminate",
+    async (request, reply) => {
+      await deps.backgroundProcessManager.terminate(request.params.id, request.params.processId)
+      reply.code(204)
+      return undefined
+    },
+  )
+
+  app.get<{ Params: { id: string; processId: string } }>(
+    "/workspaces/:id/plugin/background-processes/:processId/output",
+    async (request, reply) => {
+      const query = OutputQuerySchema.parse(request.query ?? {})
+      const method = query.method ?? query.mode
+      if (method === "grep" && !query.pattern) {
+        reply.code(400)
+        return { error: "Pattern is required for grep output" }
+      }
+      try {
+        return await deps.backgroundProcessManager.readOutput(request.params.id, request.params.processId, {
+          method,
+          pattern: query.pattern,
+          lines: query.lines,
+          maxBytes: query.maxBytes,
+        })
+      } catch (error) {
+        reply.code(400)
+        return { error: error instanceof Error ? error.message : "Invalid output request" }
+      }
+    },
+  )
+
+  app.get<{ Params: { id: string; processId: string } }>(
+    "/workspaces/:id/plugin/background-processes/:processId/stream",
+    async (request, reply) => {
+      await deps.backgroundProcessManager.streamOutput(request.params.id, request.params.processId, reply)
+    },
+  )
+}

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

@@ -0,0 +1,75 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+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"
+
+interface RouteDeps {
+  workspaceManager: WorkspaceManager
+  eventBus: EventBus
+  logger: Logger
+}
+
+const PluginEventSchema = z.object({
+  type: z.string().min(1),
+  properties: z.record(z.unknown()).optional(),
+})
+
+export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
+  const channel = new PluginChannelManager(deps.logger.child({ component: "plugin-channel" }))
+
+  app.get<{ Params: { id: string } }>("/workspaces/:id/plugin/events", (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404).send({ error: "Workspace not found" })
+      return
+    }
+
+    reply.raw.setHeader("Content-Type", "text/event-stream")
+    reply.raw.setHeader("Cache-Control", "no-cache")
+    reply.raw.setHeader("Connection", "keep-alive")
+    reply.raw.flushHeaders?.()
+    reply.hijack()
+
+    const registration = channel.register(request.params.id, reply)
+
+    const heartbeat = setInterval(() => {
+      channel.send(request.params.id, buildPingEvent())
+    }, 15000)
+
+    const close = () => {
+      clearInterval(heartbeat)
+      registration.close()
+      reply.raw.end?.()
+    }
+
+    request.raw.on("close", close)
+    request.raw.on("error", close)
+  })
+
+  const handleWildcard = async (request: any, reply: any) => {
+    const workspaceId = request.params.id as string
+    const workspace = deps.workspaceManager.get(workspaceId)
+    if (!workspace) {
+      reply.code(404).send({ error: "Workspace not found" })
+      return
+    }
+
+    const suffix = (request.params["*"] as string | undefined) ?? ""
+    const normalized = suffix.replace(/^\/+/, "")
+
+    if (normalized === "event" && request.method === "POST") {
+      const parsed = PluginEventSchema.parse(request.body ?? {})
+      handlePluginEvent(workspaceId, parsed, { workspaceManager: deps.workspaceManager, eventBus: deps.eventBus, logger: deps.logger })
+      reply.code(204).send()
+      return
+    }
+
+    reply.code(404).send({ error: "Unknown plugin endpoint" })
+  }
+
+  app.all("/workspaces/:id/plugin/*", handleWildcard)
+  app.all("/workspaces/:id/plugin", handleWildcard)
+}

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

@@ -35,10 +35,16 @@ export function registerWorkspaceRoutes(app: FastifyInstance, deps: RouteDeps) {
   })
 
   app.post("/api/workspaces", async (request, reply) => {
-    const body = WorkspaceCreateSchema.parse(request.body ?? {})
-    const workspace = await deps.workspaceManager.create(body.path, body.name)
-    reply.code(201)
-    return workspace
+    try {
+      const body = WorkspaceCreateSchema.parse(request.body ?? {})
+      const workspace = await deps.workspaceManager.create(body.path, body.name)
+      reply.code(201)
+      return workspace
+    } catch (error) {
+      request.log.error({ err: error }, "Failed to create workspace")
+      const message = error instanceof Error ? error.message : "Failed to create workspace"
+      reply.code(400).type("text/plain").send(message)
+    }
   })
 
   app.get<{ Params: { id: string } }>("/api/workspaces/:id", async (request, reply) => {

packages/server/src/workspaces/instance-events.ts

@@ -96,8 +96,15 @@ export class InstanceEventBridge {
 
   private async consumeStream(workspaceId: string, port: number, signal: AbortSignal) {
     const url = `http://${INSTANCE_HOST}:${port}/event`
+
+    const headers: Record<string, string> = { Accept: "text/event-stream" }
+    const authHeader = this.options.workspaceManager.getInstanceAuthorizationHeader(workspaceId)
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
     const response = await fetch(url, {
-      headers: { Accept: "text/event-stream" },
+      headers,
       signal,
       dispatcher: STREAM_AGENT,
     })

packages/server/src/workspaces/manager.ts

@@ -1,5 +1,6 @@
 import path from "path"
 import { spawnSync } from "child_process"
+import { connect } from "net"
 import { EventBus } from "../events/bus"
 import { ConfigStore } from "../config/store"
 import { BinaryRegistry } from "../config/binaries"
@@ -7,8 +8,18 @@ import { FileSystemBrowser } from "../filesystem/browser"
 import { searchWorkspaceFiles, WorkspaceFileSearchOptions } from "../filesystem/search"
 import { clearWorkspaceSearchCache } from "../filesystem/search-cache"
 import { WorkspaceDescriptor, WorkspaceFileResponse, FileSystemEntry } from "../api-types"
-import { WorkspaceRuntime } from "./runtime"
+import { WorkspaceRuntime, ProcessExitInfo } from "./runtime"
 import { Logger } from "../logger"
+import { getOpencodeConfigDir } from "../opencode-config.js"
+import {
+  buildOpencodeBasicAuthHeader,
+  DEFAULT_OPENCODE_USERNAME,
+  generateOpencodeServerPassword,
+  OPENCODE_SERVER_PASSWORD_ENV,
+  OPENCODE_SERVER_USERNAME_ENV,
+} from "./opencode-auth"
+
+const STARTUP_STABILITY_DELAY_MS = 1500
 
 interface WorkspaceManagerOptions {
   rootDir: string
@@ -16,6 +27,7 @@ interface WorkspaceManagerOptions {
   binaryRegistry: BinaryRegistry
   eventBus: EventBus
   logger: Logger
+  getServerBaseUrl: () => string
 }
 
 interface WorkspaceRecord extends WorkspaceDescriptor {}
@@ -23,9 +35,12 @@ interface WorkspaceRecord extends WorkspaceDescriptor {}
 export class WorkspaceManager {
   private readonly workspaces = new Map<string, WorkspaceRecord>()
   private readonly runtime: WorkspaceRuntime
+  private readonly opencodeConfigDir: string
+  private readonly opencodeAuth = new Map<string, { username: string; password: string; authorization: string }>()
 
   constructor(private readonly options: WorkspaceManagerOptions) {
     this.runtime = new WorkspaceRuntime(this.options.eventBus, this.options.logger)
+    this.opencodeConfigDir = getOpencodeConfigDir()
   }
 
   list(): WorkspaceDescriptor[] {
@@ -40,6 +55,10 @@ export class WorkspaceManager {
     return this.workspaces.get(id)?.port
   }
 
+  getInstanceAuthorizationHeader(id: string): string | undefined {
+    return this.opencodeAuth.get(id)?.authorization
+  }
+
   listFiles(workspaceId: string, relativePath = "."): FileSystemEntry[] {
     const workspace = this.requireWorkspace(workspaceId)
     const browser = new FileSystemBrowser({ rootDir: workspace.path })
@@ -97,10 +116,28 @@ export class WorkspaceManager {
 
     this.options.eventBus.publish({ type: "workspace.created", workspace: descriptor })
 
-    const environment = this.options.configStore.get().preferences.environmentVariables ?? {}
+    const preferences = this.options.configStore.get().preferences ?? {}
+    const userEnvironment = preferences.environmentVariables ?? {}
+
+    const opencodeUsername = DEFAULT_OPENCODE_USERNAME
+    const opencodePassword = generateOpencodeServerPassword()
+    const authorization = buildOpencodeBasicAuthHeader({ username: opencodeUsername, password: opencodePassword })
+    if (!authorization) {
+      throw new Error("Failed to build OpenCode auth header")
+    }
+    this.opencodeAuth.set(id, { username: opencodeUsername, password: opencodePassword, authorization })
+
+    const environment = {
+      ...userEnvironment,
+      OPENCODE_CONFIG_DIR: this.opencodeConfigDir,
+      CODENOMAD_INSTANCE_ID: id,
+      CODENOMAD_BASE_URL: this.options.getServerBaseUrl(),
+      [OPENCODE_SERVER_USERNAME_ENV]: opencodeUsername,
+      [OPENCODE_SERVER_PASSWORD_ENV]: opencodePassword,
+    }
 
     try {
-      const { pid, port } = await this.runtime.launch({
+      const { pid, port, exitPromise, getLastOutput } = await this.runtime.launch({
         workspaceId: id,
         folder: workspacePath,
         binaryPath: resolvedBinaryPath,
@@ -108,6 +145,8 @@ export class WorkspaceManager {
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
 
+      await this.waitForWorkspaceReadiness({ workspaceId: id, port, exitPromise, getLastOutput })
+
       descriptor.pid = pid
       descriptor.port = port
       descriptor.status = "ready"
@@ -138,6 +177,7 @@ export class WorkspaceManager {
     }
 
     this.workspaces.delete(id)
+    this.opencodeAuth.delete(id)
     clearWorkspaceSearchCache(workspace.path)
     if (!wasRunning) {
       this.options.eventBus.publish({ type: "workspace.stopped", workspaceId: id })
@@ -158,6 +198,7 @@ export class WorkspaceManager {
       }
     }
     this.workspaces.clear()
+    this.opencodeAuth.clear()
     this.options.logger.info("All workspaces cleared")
   }
 
@@ -233,10 +274,173 @@ export class WorkspaceManager {
     return undefined
   }
 
+  private async waitForWorkspaceReadiness(params: {
+    workspaceId: string
+    port: number
+    exitPromise: Promise<ProcessExitInfo>
+    getLastOutput: () => string
+  }) {
+
+    await Promise.race([
+      this.waitForPortAvailability(params.port),
+      params.exitPromise.then((info) => {
+        throw this.buildStartupError(
+          params.workspaceId,
+          "exited before becoming ready",
+          info,
+          params.getLastOutput(),
+        )
+      }),
+    ])
+
+    await this.waitForInstanceHealth(params)
+
+    await Promise.race([
+      this.delay(STARTUP_STABILITY_DELAY_MS),
+      params.exitPromise.then((info) => {
+        throw this.buildStartupError(
+          params.workspaceId,
+          "exited shortly after start",
+          info,
+          params.getLastOutput(),
+        )
+      }),
+    ])
+  }
+
+  private async waitForInstanceHealth(params: {
+    workspaceId: string
+    port: number
+    exitPromise: Promise<ProcessExitInfo>
+    getLastOutput: () => string
+  }) {
+    const probeResult = await Promise.race([
+      this.probeInstance(params.workspaceId, params.port),
+      params.exitPromise.then((info) => {
+        throw this.buildStartupError(
+          params.workspaceId,
+          "exited during health checks",
+          info,
+          params.getLastOutput(),
+        )
+      }),
+    ])
+
+    if (probeResult.ok) {
+      return
+    }
+
+    const latestOutput = params.getLastOutput().trim()
+    if (latestOutput) {
+      throw new Error(latestOutput)
+    }
+    const reason = probeResult.reason ?? "Health check failed"
+    throw new Error(`Workspace ${params.workspaceId} failed health check: ${reason}.`)
+  }
+
+  private async probeInstance(workspaceId: string, port: number): Promise<{ ok: boolean; reason?: string }> {
+    const url = `http://127.0.0.1:${port}/project/current`
+
+    try {
+      const headers: Record<string, string> = {}
+      const authHeader = this.opencodeAuth.get(workspaceId)?.authorization
+      if (authHeader) {
+        headers["Authorization"] = authHeader
+      }
+
+      const response = await fetch(url, { headers })
+      if (!response.ok) {
+        const reason = `health probe returned HTTP ${response.status}`
+        this.options.logger.debug({ workspaceId, status: response.status }, "Health probe returned server error")
+        return { ok: false, reason }
+      }
+      return { ok: true }
+    } catch (error) {
+      const reason = error instanceof Error ? error.message : String(error)
+      this.options.logger.debug({ workspaceId, err: error }, "Health probe failed")
+      return { ok: false, reason }
+    }
+  }
+
+  private buildStartupError(
+    workspaceId: string,
+    phase: string,
+    exitInfo: ProcessExitInfo,
+    lastOutput: string,
+  ): Error {
+    const exitDetails = this.describeExit(exitInfo)
+    const trimmedOutput = lastOutput.trim()
+    const outputDetails = trimmedOutput ? ` Last output: ${trimmedOutput}` : ""
+    return new Error(`Workspace ${workspaceId} ${phase} (${exitDetails}).${outputDetails}`)
+  }
+
+  private waitForPortAvailability(port: number, timeoutMs = 5000): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const deadline = Date.now() + timeoutMs
+      let settled = false
+      let retryTimer: NodeJS.Timeout | null = null
+
+      const cleanup = () => {
+        settled = true
+        if (retryTimer) {
+          clearTimeout(retryTimer)
+          retryTimer = null
+        }
+      }
+
+      const tryConnect = () => {
+        if (settled) {
+          return
+        }
+        const socket = connect({ port, host: "127.0.0.1" }, () => {
+          cleanup()
+          socket.end()
+          resolve()
+        })
+        socket.once("error", () => {
+          socket.destroy()
+          if (settled) {
+            return
+          }
+          if (Date.now() >= deadline) {
+            cleanup()
+            reject(new Error(`Workspace port ${port} did not become ready within ${timeoutMs}ms`))
+          } else {
+            retryTimer = setTimeout(() => {
+              retryTimer = null
+              tryConnect()
+            }, 100)
+          }
+        })
+      }
+
+      tryConnect()
+    })
+  }
+
+  private delay(durationMs: number): Promise<void> {
+    if (durationMs <= 0) {
+      return Promise.resolve()
+    }
+    return new Promise((resolve) => setTimeout(resolve, durationMs))
+  }
+
+  private describeExit(info: ProcessExitInfo): string {
+    if (info.signal) {
+      return `signal ${info.signal}`
+    }
+    if (info.code !== null) {
+      return `code ${info.code}`
+    }
+    return "unknown reason"
+  }
+
   private handleProcessExit(workspaceId: string, info: { code: number | null; requested: boolean }) {
     const workspace = this.workspaces.get(workspaceId)
     if (!workspace) return
 
+    this.opencodeAuth.delete(workspaceId)
+
     this.options.logger.info({ workspaceId, ...info }, "Workspace process exited")
 
     workspace.pid = undefined

packages/server/src/workspaces/opencode-auth.ts

@@ -0,0 +1,22 @@
+import crypto from "node:crypto"
+
+export const OPENCODE_SERVER_USERNAME_ENV = "OPENCODE_SERVER_USERNAME" as const
+export const OPENCODE_SERVER_PASSWORD_ENV = "OPENCODE_SERVER_PASSWORD" as const
+
+export const DEFAULT_OPENCODE_USERNAME = "codenomad" as const
+
+export function generateOpencodeServerPassword(): string {
+  return crypto.randomBytes(32).toString("base64url")
+}
+
+export function buildOpencodeBasicAuthHeader(params: { username?: string; password?: string }): string | undefined {
+  const username = params.username
+  const password = params.password
+
+  if (!username || !password) {
+    return undefined
+  }
+
+  const token = Buffer.from(`${username}:${password}`, "utf8").toString("base64")
+  return `Basic ${token}`
+}

packages/server/src/workspaces/runtime.ts

@@ -5,6 +5,20 @@ import { EventBus } from "../events/bus"
 import { LogLevel, WorkspaceLogEntry } from "../api-types"
 import { Logger } from "../logger"
 
+const SENSITIVE_ENV_KEY = /(PASSWORD|TOKEN|SECRET)/i
+
+function redactEnvironment(env: Record<string, string | undefined>): Record<string, string | undefined> {
+  const redacted: Record<string, string | undefined> = {}
+  for (const [key, value] of Object.entries(env)) {
+    if (value === undefined) {
+      redacted[key] = value
+      continue
+    }
+    redacted[key] = SENSITIVE_ENV_KEY.test(key) ? "[REDACTED]" : value
+  }
+  return redacted
+}
+
 interface LaunchOptions {
   workspaceId: string
   folder: string
@@ -13,7 +27,7 @@ interface LaunchOptions {
   onExit?: (info: ProcessExitInfo) => void
 }
 
-interface ProcessExitInfo {
+export interface ProcessExitInfo {
   workspaceId: string
   code: number | null
   signal: NodeJS.Signals | null
@@ -30,15 +44,45 @@ export class WorkspaceRuntime {
 
   constructor(private readonly eventBus: EventBus, private readonly logger: Logger) {}
 
-  async launch(options: LaunchOptions): Promise<{ pid: number; port: number }> {
+  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 env = { ...process.env, ...(options.environment ?? {}) }
 
+    let exitResolve: ((info: ProcessExitInfo) => void) | null = null
+    const exitPromise = new Promise<ProcessExitInfo>((resolveExit) => {
+      exitResolve = resolveExit
+    })
+
+    // Store recent output for debugging - keep last 50 lines from each stream
+    const MAX_OUTPUT_LINES = 50
+    const recentStdout: string[] = []
+    const recentStderr: string[] = []
+    const getLastOutput = () => {
+      const combined: string[] = []
+      if (recentStderr.length > 0) {
+        combined.push("Error Stream")
+        combined.push(...recentStderr.slice(-10))
+      }
+      if (recentStdout.length > 0) {
+        combined.push("Output Stream")
+        combined.push(...recentStdout.slice(-10))
+      }
+      return combined.join("\n")
+    }
+
     return new Promise((resolve, reject) => {
+      const commandLine = [options.binaryPath, ...args].join(" ")
       this.logger.info(
-        { workspaceId: options.workspaceId, folder: options.folder, binary: options.binaryPath },
+        {
+          workspaceId: options.workspaceId,
+          folder: options.folder,
+          binary: options.binaryPath,
+          args,
+          commandLine,
+          env: redactEnvironment(env),
+        },
         "Launching OpenCode process",
       )
       const child = spawn(options.binaryPath, args, {
@@ -83,11 +127,22 @@ export class WorkspaceRuntime {
         cleanupStreams()
         child.removeListener("error", handleError)
         child.removeListener("exit", handleExit)
+        const exitInfo: ProcessExitInfo = {
+          workspaceId: options.workspaceId,
+          code,
+          signal,
+          requested: managed.requestedStop,
+        }
+        if (exitResolve) {
+          exitResolve(exitInfo)
+          exitResolve = null
+        }
         if (!portFound) {
-          const reason = stderrBuffer || `Process exited with code ${code}`
+          const recentOutput = getLastOutput().trim()
+          const reason = recentOutput || stderrBuffer || `Process exited with code ${code}`
           reject(new Error(reason))
         } else {
-          options.onExit?.({ workspaceId: options.workspaceId, code, signal, requested: managed.requestedStop })
+          options.onExit?.(exitInfo)
         }
       }
 
@@ -96,6 +151,10 @@ export class WorkspaceRuntime {
         child.removeListener("exit", handleExit)
         this.processes.delete(options.workspaceId)
         this.logger.error({ workspaceId: options.workspaceId, err: error }, "Workspace runtime error")
+        if (exitResolve) {
+          exitResolve({ workspaceId: options.workspaceId, code: null, signal: null, requested: managed.requestedStop })
+          exitResolve = null
+        }
         reject(error)
       }
 
@@ -109,18 +168,25 @@ export class WorkspaceRuntime {
         stdoutBuffer = lines.pop() ?? ""
 
         for (const line of lines) {
-          if (!line.trim()) continue
+          const trimmed = line.trim()
+          if (!trimmed) continue
+
+          recentStdout.push(trimmed)
+          if (recentStdout.length > MAX_OUTPUT_LINES) {
+            recentStdout.shift()
+          }
+
           this.emitLog(options.workspaceId, "info", line)
 
           if (!portFound) {
             const portMatch = line.match(/opencode server listening on http:\/\/.+:(\d+)/i)
             if (portMatch) {
               portFound = true
-              cleanupStreams()
+              stopWarningTimer()
               child.removeListener("error", handleError)
               const port = parseInt(portMatch[1], 10)
               this.logger.info({ workspaceId: options.workspaceId, port }, "Workspace runtime allocated port")
-              resolve({ pid: child.pid!, port })
+              resolve({ pid: child.pid!, port, exitPromise, getLastOutput })
             }
           }
         }
@@ -133,7 +199,14 @@ export class WorkspaceRuntime {
         stderrBuffer = lines.pop() ?? ""
 
         for (const line of lines) {
-          if (!line.trim()) continue
+          const trimmed = line.trim()
+          if (!trimmed) continue
+
+          recentStderr.push(trimmed)
+          if (recentStderr.length > MAX_OUTPUT_LINES) {
+            recentStderr.shift()
+          }
+
           this.emitLog(options.workspaceId, "error", line)
         }
       })

packages/tauri-app/Cargo.lock

@@ -494,6 +494,7 @@ dependencies = [
  "tauri-plugin-dialog",
  "tauri-plugin-opener",
  "thiserror 1.0.69",
+ "url",
  "which",
 ]
 

packages/tauri-app/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "private": true,
   "scripts": {
-    "dev": "npx --yes @tauri-apps/cli@^2.9.4 dev",
+    "dev": "tauri dev",
     "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",
     "prebuild": "node ./scripts/prebuild.js",
     "bundle:server": "npm run prebuild",
-    "build": "npx --yes @tauri-apps/cli@^2.9.4 build"
+    "build": "tauri build"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2.9.4"

packages/tauri-app/scripts/prebuild.js

@@ -166,6 +166,44 @@ function copyServerArtifacts() {
   }
 }
 
+function stripNodeModuleBins() {
+  const root = path.join(serverDest, "node_modules")
+  if (!fs.existsSync(root)) {
+    return
+  }
+
+  const stack = [root]
+  let removed = 0
+
+  while (stack.length > 0) {
+    const current = stack.pop()
+    if (!current) break
+
+    let entries
+    try {
+      entries = fs.readdirSync(current, { withFileTypes: true })
+    } catch {
+      continue
+    }
+
+    for (const entry of entries) {
+      const full = path.join(current, entry.name)
+      if (entry.name === ".bin") {
+        fs.rmSync(full, { recursive: true, force: true })
+        removed += 1
+        continue
+      }
+      if (entry.isDirectory()) {
+        stack.push(full)
+      }
+    }
+  }
+
+  if (removed > 0) {
+    console.log(`[prebuild] removed ${removed} node_modules/.bin directories`)
+  }
+}
+
 function copyUiLoadingAssets() {
   const loadingSource = path.join(uiDist, "loading.html")
   const assetsSource = path.join(uiDist, "assets")
@@ -192,4 +230,5 @@ ensureServerDependencies()
 ensureServerBuild()
 ensureUiBuild()
 copyServerArtifacts()
+stripNodeModuleBins()
 copyUiLoadingAssets()

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

@@ -20,3 +20,4 @@ libc = "0.2"
 tauri-plugin-dialog = "2"
 dirs = "5"
 tauri-plugin-opener = "2"
+url = "2"

packages/tauri-app/src-tauri/capabilities/main-window.json

@@ -3,15 +3,14 @@
   "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:*"
-    ]
+    "urls": ["http://127.0.0.1:*", "http://localhost:*"]
   },
   "windows": ["main"],
   "permissions": [
     "core:default",
+    "core:menu:default",
     "dialog:allow-open",
-    "opener:allow-default-urls"
+    "opener:allow-default-urls",
+    "core:webview:allow-set-webview-zoom"
   ]
 }

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:*"]},"local":true,"windows":["main"],"permissions":["core:default","dialog:allow-open"]}}
+{"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:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","core:webview:allow-set-webview-zoom"]}}

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

@@ -134,6 +134,174 @@
           "description": "Reference a permission or permission set by identifier and extends its scope.",
           "type": "object",
           "allOf": [
+            {
+              "if": {
+                "properties": {
+                  "identifier": {
+                    "anyOf": [
+                      {
+                        "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
+                        "type": "string",
+                        "const": "opener:default",
+                        "markdownDescription": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`"
+                      },
+                      {
+                        "description": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application.",
+                        "type": "string",
+                        "const": "opener:allow-default-urls",
+                        "markdownDescription": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application."
+                      },
+                      {
+                        "description": "Enables the open_path command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-open-path",
+                        "markdownDescription": "Enables the open_path command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Enables the open_url command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-open-url",
+                        "markdownDescription": "Enables the open_url command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Enables the reveal_item_in_dir command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-reveal-item-in-dir",
+                        "markdownDescription": "Enables the reveal_item_in_dir command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the open_path command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-open-path",
+                        "markdownDescription": "Denies the open_path command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the open_url command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-open-url",
+                        "markdownDescription": "Denies the open_url command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the reveal_item_in_dir command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-reveal-item-in-dir",
+                        "markdownDescription": "Denies the reveal_item_in_dir command without any pre-configured scope."
+                      }
+                    ]
+                  }
+                }
+              },
+              "then": {
+                "properties": {
+                  "allow": {
+                    "items": {
+                      "title": "OpenerScopeEntry",
+                      "description": "Opener scope entry.",
+                      "anyOf": [
+                        {
+                          "type": "object",
+                          "required": [
+                            "url"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this url with, for example: firefox.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "url": {
+                              "description": "A URL that can be opened by the webview when using the Opener APIs.\n\nWildcards can be used following the UNIX glob pattern.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
+                              "type": "string"
+                            }
+                          }
+                        },
+                        {
+                          "type": "object",
+                          "required": [
+                            "path"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this path with, for example: xdg-open.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "path": {
+                              "description": "A path that can be opened by the webview when using the Opener APIs.\n\nThe pattern can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                              "type": "string"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  "deny": {
+                    "items": {
+                      "title": "OpenerScopeEntry",
+                      "description": "Opener scope entry.",
+                      "anyOf": [
+                        {
+                          "type": "object",
+                          "required": [
+                            "url"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this url with, for example: firefox.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "url": {
+                              "description": "A URL that can be opened by the webview when using the Opener APIs.\n\nWildcards can be used following the UNIX glob pattern.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
+                              "type": "string"
+                            }
+                          }
+                        },
+                        {
+                          "type": "object",
+                          "required": [
+                            "path"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this path with, for example: xdg-open.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "path": {
+                              "description": "A path that can be opened by the webview when using the Opener APIs.\n\nThe pattern can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                              "type": "string"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              },
+              "properties": {
+                "identifier": {
+                  "description": "Identifier of the permission or permission set.",
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/Identifier"
+                    }
+                  ]
+                }
+              }
+            },
             {
               "properties": {
                 "identifier": {
@@ -2209,6 +2377,54 @@
           "type": "string",
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
+        },
+        {
+          "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
+          "type": "string",
+          "const": "opener:default",
+          "markdownDescription": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`"
+        },
+        {
+          "description": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application.",
+          "type": "string",
+          "const": "opener:allow-default-urls",
+          "markdownDescription": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application."
+        },
+        {
+          "description": "Enables the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-open-path",
+          "markdownDescription": "Enables the open_path command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the open_url command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-open-url",
+          "markdownDescription": "Enables the open_url command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the reveal_item_in_dir command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-reveal-item-in-dir",
+          "markdownDescription": "Enables the reveal_item_in_dir command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-open-path",
+          "markdownDescription": "Denies the open_path command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the open_url command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-open-url",
+          "markdownDescription": "Denies the open_url command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the reveal_item_in_dir command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-reveal-item-in-dir",
+          "markdownDescription": "Denies the reveal_item_in_dir command without any pre-configured scope."
         }
       ]
     },
@@ -2305,6 +2521,23 @@
           ]
         }
       ]
+    },
+    "Application": {
+      "description": "Opener scope application.",
+      "anyOf": [
+        {
+          "description": "Open in default application.",
+          "type": "null"
+        },
+        {
+          "description": "If true, allow open with any application.",
+          "type": "boolean"
+        },
+        {
+          "description": "Allow specific application to open with.",
+          "type": "string"
+        }
+      ]
     }
   }
 }

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

@@ -134,6 +134,174 @@
           "description": "Reference a permission or permission set by identifier and extends its scope.",
           "type": "object",
           "allOf": [
+            {
+              "if": {
+                "properties": {
+                  "identifier": {
+                    "anyOf": [
+                      {
+                        "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
+                        "type": "string",
+                        "const": "opener:default",
+                        "markdownDescription": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`"
+                      },
+                      {
+                        "description": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application.",
+                        "type": "string",
+                        "const": "opener:allow-default-urls",
+                        "markdownDescription": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application."
+                      },
+                      {
+                        "description": "Enables the open_path command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-open-path",
+                        "markdownDescription": "Enables the open_path command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Enables the open_url command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-open-url",
+                        "markdownDescription": "Enables the open_url command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Enables the reveal_item_in_dir command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:allow-reveal-item-in-dir",
+                        "markdownDescription": "Enables the reveal_item_in_dir command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the open_path command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-open-path",
+                        "markdownDescription": "Denies the open_path command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the open_url command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-open-url",
+                        "markdownDescription": "Denies the open_url command without any pre-configured scope."
+                      },
+                      {
+                        "description": "Denies the reveal_item_in_dir command without any pre-configured scope.",
+                        "type": "string",
+                        "const": "opener:deny-reveal-item-in-dir",
+                        "markdownDescription": "Denies the reveal_item_in_dir command without any pre-configured scope."
+                      }
+                    ]
+                  }
+                }
+              },
+              "then": {
+                "properties": {
+                  "allow": {
+                    "items": {
+                      "title": "OpenerScopeEntry",
+                      "description": "Opener scope entry.",
+                      "anyOf": [
+                        {
+                          "type": "object",
+                          "required": [
+                            "url"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this url with, for example: firefox.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "url": {
+                              "description": "A URL that can be opened by the webview when using the Opener APIs.\n\nWildcards can be used following the UNIX glob pattern.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
+                              "type": "string"
+                            }
+                          }
+                        },
+                        {
+                          "type": "object",
+                          "required": [
+                            "path"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this path with, for example: xdg-open.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "path": {
+                              "description": "A path that can be opened by the webview when using the Opener APIs.\n\nThe pattern can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                              "type": "string"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  "deny": {
+                    "items": {
+                      "title": "OpenerScopeEntry",
+                      "description": "Opener scope entry.",
+                      "anyOf": [
+                        {
+                          "type": "object",
+                          "required": [
+                            "url"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this url with, for example: firefox.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "url": {
+                              "description": "A URL that can be opened by the webview when using the Opener APIs.\n\nWildcards can be used following the UNIX glob pattern.\n\nExamples:\n\n- \"https://*\" : allows all HTTPS origin\n\n- \"https://*.github.com/tauri-apps/tauri\": allows any subdomain of \"github.com\" with the \"tauri-apps/api\" path\n\n- \"https://myapi.service.com/users/*\": allows access to any URLs that begins with \"https://myapi.service.com/users/\"",
+                              "type": "string"
+                            }
+                          }
+                        },
+                        {
+                          "type": "object",
+                          "required": [
+                            "path"
+                          ],
+                          "properties": {
+                            "app": {
+                              "description": "An application to open this path with, for example: xdg-open.",
+                              "allOf": [
+                                {
+                                  "$ref": "#/definitions/Application"
+                                }
+                              ]
+                            },
+                            "path": {
+                              "description": "A path that can be opened by the webview when using the Opener APIs.\n\nThe pattern can start with a variable that resolves to a system base directory. The variables are: `$AUDIO`, `$CACHE`, `$CONFIG`, `$DATA`, `$LOCALDATA`, `$DESKTOP`, `$DOCUMENT`, `$DOWNLOAD`, `$EXE`, `$FONT`, `$HOME`, `$PICTURE`, `$PUBLIC`, `$RUNTIME`, `$TEMPLATE`, `$VIDEO`, `$RESOURCE`, `$APP`, `$LOG`, `$TEMP`, `$APPCONFIG`, `$APPDATA`, `$APPLOCALDATA`, `$APPCACHE`, `$APPLOG`.",
+                              "type": "string"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              },
+              "properties": {
+                "identifier": {
+                  "description": "Identifier of the permission or permission set.",
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/Identifier"
+                    }
+                  ]
+                }
+              }
+            },
             {
               "properties": {
                 "identifier": {
@@ -2209,6 +2377,54 @@
           "type": "string",
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
+        },
+        {
+          "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
+          "type": "string",
+          "const": "opener:default",
+          "markdownDescription": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`"
+        },
+        {
+          "description": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application.",
+          "type": "string",
+          "const": "opener:allow-default-urls",
+          "markdownDescription": "This enables opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application."
+        },
+        {
+          "description": "Enables the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-open-path",
+          "markdownDescription": "Enables the open_path command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the open_url command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-open-url",
+          "markdownDescription": "Enables the open_url command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the reveal_item_in_dir command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:allow-reveal-item-in-dir",
+          "markdownDescription": "Enables the reveal_item_in_dir command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the open_path command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-open-path",
+          "markdownDescription": "Denies the open_path command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the open_url command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-open-url",
+          "markdownDescription": "Denies the open_url command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the reveal_item_in_dir command without any pre-configured scope.",
+          "type": "string",
+          "const": "opener:deny-reveal-item-in-dir",
+          "markdownDescription": "Denies the reveal_item_in_dir command without any pre-configured scope."
         }
       ]
     },
@@ -2305,6 +2521,23 @@
           ]
         }
       ]
+    },
+    "Application": {
+      "description": "Opener scope application.",
+      "anyOf": [
+        {
+          "description": "Open in default application.",
+          "type": "null"
+        },
+        {
+          "description": "If true, allow open with any application.",
+          "type": "boolean"
+        },
+        {
+          "description": "Allow specific application to open with.",
+          "type": "string"
+        }
+      ]
     }
   }
 }

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

@@ -7,14 +7,15 @@ use std::collections::VecDeque;
 use std::env;
 use std::ffi::OsStr;
 use std::fs;
-use std::io::{BufRead, BufReader};
+use std::io::{BufRead, BufReader, Read, Write};
+use std::net::TcpStream;
 use std::path::PathBuf;
 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 tauri::{AppHandle, Emitter, Manager, Url};
+use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};
 
 fn log_line(message: &str) {
     println!("[tauri-cli] {message}");
@@ -31,9 +32,15 @@ fn workspace_root() -> Option<PathBuf> {
     })
 }
 
+const SESSION_COOKIE_NAME: &str = "codenomad_session";
+
 fn navigate_main(app: &AppHandle, url: &str) {
     if let Some(win) = app.webview_windows().get("main") {
-        log_line(&format!("navigating main to {url}"));
+        let mut display = url.to_string();
+        if let Some(hash_index) = display.find('#') {
+            display.replace_range(hash_index + 1.., "[REDACTED]");
+        }
+        log_line(&format!("navigating main to {display}"));
         if let Ok(parsed) = Url::parse(url) {
             let _ = win.navigate(parsed);
         } else {
@@ -44,6 +51,85 @@ fn navigate_main(app: &AppHandle, url: &str) {
     }
 }
 
+fn extract_cookie_value(set_cookie: &str, name: &str) -> Option<String> {
+    let prefix = format!("{name}=");
+    let cookie_kv = set_cookie.split(';').next()?.trim();
+    if !cookie_kv.starts_with(&prefix) {
+        return None;
+    }
+    let value = cookie_kv.trim_start_matches(&prefix).trim();
+    if value.is_empty() {
+        return None;
+    }
+    Some(value.to_string())
+}
+
+fn exchange_bootstrap_token(base_url: &str, token: &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);
+
+    // This is only used for local bootstrap; we assume plain HTTP.
+    let mut stream = TcpStream::connect((host, port))?;
+
+    let body = format!("{{\"token\":\"{}\"}}", token);
+    let request = format!(
+        "POST /api/auth/token HTTP/1.1\r\nHost: {host}:{port}\r\nContent-Type: application/json\r\nContent-Length: {}\r\nConnection: close\r\n\r\n{}",
+        body.as_bytes().len(),
+        body
+    );
+
+    stream.write_all(request.as_bytes())?;
+    stream.flush()?;
+
+    let mut response = String::new();
+    stream.read_to_string(&mut response)?;
+
+    let (raw_headers, _rest) = response
+        .split_once("\r\n\r\n")
+        .or_else(|| response.split_once("\n\n"))
+        .unwrap_or((response.as_str(), ""));
+
+    let mut lines = raw_headers.lines();
+    let status_line = lines.next().unwrap_or("");
+    if !status_line.contains(" 200 ") {
+        return Ok(None);
+    }
+
+    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) {
+                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) {
+                return Ok(Some(session_id));
+            }
+        }
+    }
+
+    Ok(None)
+}
+
+fn set_session_cookie(app: &AppHandle, base_url: &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))
+        .domain(domain)
+        .path("/")
+        .http_only(true)
+        .same_site(tauri::webview::cookie::SameSite::Lax)
+        .build();
+
+    if let Some(win) = app.webview_windows().get("main") {
+        win.set_cookie(cookie)?;
+    }
+
+    Ok(())
+}
+
 const DEFAULT_CONFIG_PATH: &str = "~/.config/codenomad/config.json";
 
 #[derive(Debug, Deserialize)]
@@ -139,6 +225,7 @@ pub struct CliProcessManager {
     status: Arc<Mutex<CliStatus>>,
     child: Arc<Mutex<Option<Child>>>,
     ready: Arc<AtomicBool>,
+    bootstrap_token: Arc<Mutex<Option<String>>>,
 }
 
 impl CliProcessManager {
@@ -147,6 +234,7 @@ impl CliProcessManager {
             status: Arc::new(Mutex::new(CliStatus::default())),
             child: Arc::new(Mutex::new(None)),
             ready: Arc::new(AtomicBool::new(false)),
+            bootstrap_token: Arc::new(Mutex::new(None)),
         }
     }
 
@@ -154,6 +242,7 @@ impl CliProcessManager {
         log_line(&format!("start requested (dev={dev})"));
         self.stop()?;
         self.ready.store(false, Ordering::SeqCst);
+        *self.bootstrap_token.lock() = None;
         {
             let mut status = self.status.lock();
             status.state = CliState::Starting;
@@ -167,8 +256,9 @@ impl CliProcessManager {
         let status_arc = self.status.clone();
         let child_arc = self.child.clone();
         let ready_flag = self.ready.clone();
+        let token_arc = self.bootstrap_token.clone();
         thread::spawn(move || {
-            if let Err(err) = Self::spawn_cli(app.clone(), status_arc.clone(), child_arc, ready_flag, dev) {
+            if let Err(err) = Self::spawn_cli(app.clone(), status_arc.clone(), child_arc, ready_flag, token_arc, dev) {
                 log_line(&format!("cli spawn failed: {err}"));
                 let mut locked = status_arc.lock();
                 locked.state = CliState::Error;
@@ -237,6 +327,7 @@ impl CliProcessManager {
         status: Arc<Mutex<CliStatus>>,
         child_holder: Arc<Mutex<Option<Child>>>,
         ready: Arc<AtomicBool>,
+        bootstrap_token: Arc<Mutex<Option<String>>>,
         dev: bool,
     ) -> anyhow::Result<()> {
         log_line("resolving CLI entry");
@@ -318,8 +409,10 @@ impl CliProcessManager {
         let status_clone = status.clone();
         let app_clone = app.clone();
         let ready_clone = ready.clone();
+        let token_clone = bootstrap_token.clone();
 
         thread::spawn(move || {
+
             let stdout = child_clone
                 .lock()
                 .as_mut()
@@ -332,10 +425,10 @@ impl CliProcessManager {
                 .map(BufReader::new);
 
             if let Some(reader) = stdout {
-                Self::process_stream(reader, "stdout", &app_clone, &status_clone, &ready_clone);
+                Self::process_stream(reader, "stdout", &app_clone, &status_clone, &ready_clone, &token_clone);
             }
             if let Some(reader) = stderr {
-                Self::process_stream(reader, "stderr", &app_clone, &status_clone, &ready_clone);
+                Self::process_stream(reader, "stderr", &app_clone, &status_clone, &ready_clone, &token_clone);
             }
         });
 
@@ -407,10 +500,12 @@ impl CliProcessManager {
         app: &AppHandle,
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
+        bootstrap_token: &Arc<Mutex<Option<String>>>,
     ) {
         let mut buffer = String::new();
         let port_regex = Regex::new(r"CodeNomad Server is ready at http://[^:]+:(\d+)").ok();
         let http_regex = Regex::new(r":(\d{2,5})(?!.*:\d)").ok();
+        let token_prefix = "CODENOMAD_BOOTSTRAP_TOKEN:";
 
         loop {
             buffer.clear();
@@ -419,6 +514,17 @@ impl CliProcessManager {
                 Ok(_) => {
                     let line = buffer.trim_end();
                     if !line.is_empty() {
+                        if line.starts_with(token_prefix) {
+                            let token = line.trim_start_matches(token_prefix).trim();
+                            if !token.is_empty() {
+                                let mut guard = bootstrap_token.lock();
+                                if guard.is_none() {
+                                    *guard = Some(token.to_string());
+                                }
+                            }
+                            continue;
+                        }
+
                         log_line(&format!("[cli][{}] {}", stream, line));
 
                         if ready.load(Ordering::SeqCst) {
@@ -430,7 +536,7 @@ impl CliProcessManager {
                             .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, port);
+                            Self::mark_ready(app, status, ready, bootstrap_token, port);
                             continue;
                         }
 
@@ -440,13 +546,13 @@ impl CliProcessManager {
                                 .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, port);
+                                Self::mark_ready(app, status, ready, bootstrap_token, 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, port as u16);
+                                    Self::mark_ready(app, status, ready, bootstrap_token, port as u16);
                                     continue;
                                 }
                             }
@@ -458,16 +564,46 @@ impl CliProcessManager {
         }
     }
 
-    fn mark_ready(app: &AppHandle, status: &Arc<Mutex<CliStatus>>, ready: &Arc<AtomicBool>, port: u16) {
+    fn mark_ready(
+        app: &AppHandle,
+        status: &Arc<Mutex<CliStatus>>,
+        ready: &Arc<AtomicBool>,
+        bootstrap_token: &Arc<Mutex<Option<String>>>,
+        port: u16,
+    ) {
         ready.store(true, Ordering::SeqCst);
+        let base_url = format!("http://127.0.0.1:{port}");
         let mut locked = status.lock();
-        let url = format!("http://127.0.0.1:{port}");
         locked.port = Some(port);
-        locked.url = Some(url.clone());
+        locked.url = Some(base_url.clone());
         locked.state = CliState::Ready;
         locked.error = None;
-        log_line(&format!("cli ready on {url}"));
-        navigate_main(app, &url);
+        log_line(&format!("cli ready on {base_url}"));
+
+        let token = bootstrap_token.lock().take();
+
+        if let Some(token) = token {
+            match exchange_bootstrap_token(&base_url, &token) {
+                Ok(Some(session_id)) => {
+                    if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
+                        log_line(&format!("failed to set session cookie: {err}"));
+                        navigate_main(app, &format!("{base_url}/login"));
+                    } else {
+                        navigate_main(app, &base_url);
+                    }
+                }
+                Ok(None) => {
+                    log_line("bootstrap token exchange failed (invalid token)");
+                    navigate_main(app, &format!("{base_url}/login"));
+                }
+                Err(err) => {
+                    log_line(&format!("bootstrap token exchange failed: {err}"));
+                    navigate_main(app, &format!("{base_url}/login"));
+                }
+            }
+        } else {
+            navigate_main(app, &base_url);
+        }
         let _ = app.emit("cli:ready", locked.clone());
         Self::emit_status(app, &locked);
     }
@@ -551,6 +687,7 @@ impl CliEntry {
             host.to_string(),
             "--port".to_string(),
             "0".to_string(),
+            "--generate-token".to_string(),
         ];
         if dev {
             args.push("--ui-dev-server".to_string());
@@ -622,6 +759,18 @@ fn resolve_dist_entry(_app: &AppHandle) -> Option<String> {
             candidates.push(Some(resources.join("resources/server/dist/index.js")));
             candidates.push(Some(resources.join("resources/server/dist/server/bin.js")));
             candidates.push(Some(resources.join("resources/server/dist/server/index.js")));
+
+            let linux_resource_roots = [dir.join("../lib/CodeNomad"), dir.join("../lib/codenomad")];
+            for root in linux_resource_roots {
+                candidates.push(Some(root.join("server/dist/bin.js")));
+                candidates.push(Some(root.join("server/dist/index.js")));
+                candidates.push(Some(root.join("server/dist/server/bin.js")));
+                candidates.push(Some(root.join("server/dist/server/index.js")));
+                candidates.push(Some(root.join("resources/server/dist/bin.js")));
+                candidates.push(Some(root.join("resources/server/dist/index.js")));
+                candidates.push(Some(root.join("resources/server/dist/server/bin.js")));
+                candidates.push(Some(root.join("resources/server/dist/server/index.js")));
+            }
         }
     }
 

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

@@ -4,10 +4,10 @@ mod cli_manager;
 
 use cli_manager::{CliProcessManager, CliStatus};
 use serde_json::json;
-use tauri::menu::Menu;
-use tauri::plugin::Builder as PluginBuilder;
+use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
+use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
-use tauri::{AppHandle, Emitter, Manager, Runtime};
+use tauri::{AppHandle, Emitter, Manager, Runtime, Wry};
 use tauri_plugin_opener::OpenerExt;
 use url::Url;
 
@@ -60,7 +60,7 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
 }
 
 fn main() {
-    let navigation_guard = PluginBuilder::new("external-link-guard")
+    let navigation_guard: TauriPlugin<Wry, ()> = PluginBuilder::new("external-link-guard")
         .on_navigation(|webview, url| intercept_navigation(webview, url))
         .build();
 
@@ -84,8 +84,81 @@ fn main() {
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![cli_get_status, cli_restart])
-        .on_menu_event(|_app_handle, _event| {
-            // No menu items defined currently
+        .on_menu_event(|app_handle, event| {
+            match event.id().0.as_str() {
+                // File menu
+                "new_instance" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.emit("menu:newInstance", ());
+                    }
+                }
+                "close" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.close();
+                    }
+                }
+                "quit" => {
+                    app_handle.exit(0);
+                }
+
+                // View menu
+                "reload" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload()");
+                    }
+                }
+                "force_reload" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.eval("window.location.reload(true)");
+                    }
+                }
+                "toggle_devtools" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        window.open_devtools();
+                    }
+                }
+
+                "toggle_fullscreen" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.set_fullscreen(!window.is_fullscreen().unwrap_or(false));
+                    }
+                }
+
+                // Window menu
+                "minimize" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.minimize();
+                    }
+                }
+                "zoom" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.maximize();
+                    }
+                }
+
+                // App menu (macOS)
+                "about" => {
+                    // TODO: Implement about dialog
+                    println!("About menu item clicked");
+                }
+                "hide" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.hide();
+                    }
+                }
+                "hide_others" => {
+                    // TODO: Hide other app windows
+                    println!("Hide Others menu item clicked");
+                }
+                "show_all" => {
+                    // TODO: Show all app windows
+                    println!("Show All menu item clicked");
+                }
+
+                _ => {
+                    println!("Unhandled menu event: {}", event.id().0);
+                }
+            }
         })
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
@@ -118,8 +191,77 @@ fn main() {
 }
 
 fn build_menu(app: &AppHandle) -> tauri::Result<()> {
-    // Minimal empty menu for now (Tauri v2 menu API differs from v1 roles).
-    let menu = Menu::new(app)?;
+    let is_mac = cfg!(target_os = "macos");
+
+    // Create submenus
+    let mut submenus = Vec::new();
+
+    // App menu (macOS only)
+    if is_mac {
+        let app_menu = SubmenuBuilder::new(app, "CodeNomad")
+            .text("about", "About CodeNomad")
+            .separator()
+            .text("hide", "Hide CodeNomad")
+            .text("hide_others", "Hide Others")
+            .text("show_all", "Show All")
+            .separator()
+            .text("quit", "Quit CodeNomad")
+            .build()?;
+        submenus.push(app_menu);
+    }
+
+    // File menu - create New Instance with accelerator
+    let new_instance_item = MenuItem::with_id(
+        app,
+        "new_instance",
+        "New Instance",
+        true,
+        Some("CmdOrCtrl+N")
+    )?;
+    
+    let file_menu = SubmenuBuilder::new(app, "File")
+        .item(&new_instance_item)
+        .separator()
+        .text(if is_mac { "close" } else { "quit" }, if is_mac { "Close" } else { "Quit" })
+        .build()?;
+    submenus.push(file_menu);
+
+    // Edit menu with predefined items for standard functionality
+    let edit_menu = SubmenuBuilder::new(app, "Edit")
+        .undo()
+        .redo()
+        .separator()
+        .cut()
+        .copy()
+        .paste()
+        .separator()
+        .select_all()
+        .build()?;
+    submenus.push(edit_menu);
+
+    // View menu
+    let view_menu = SubmenuBuilder::new(app, "View")
+        .text("reload", "Reload")
+        .text("force_reload", "Force Reload")
+        .text("toggle_devtools", "Toggle Developer Tools")
+        .separator()
+
+        .separator()
+        .text("toggle_fullscreen", "Toggle Full Screen")
+        .build()?;
+    submenus.push(view_menu);
+
+    // Window menu
+    let window_menu = SubmenuBuilder::new(app, "Window")
+        .text("minimize", "Minimize")
+        .text("zoom", "Zoom")
+        .build()?;
+    submenus.push(window_menu);
+
+    // Build the main menu with all submenus
+    let submenu_refs: Vec<&dyn tauri::menu::IsMenuItem<_>> = submenus.iter().map(|s| s as &dyn tauri::menu::IsMenuItem<_>).collect();
+    let menu = MenuBuilder::new(app).items(&submenu_refs).build()?;
+    
     app.set_menu(menu)?;
     Ok(())
 }

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

@@ -27,7 +27,8 @@
         "fullscreen": false,
         "decorations": true,
         "theme": "Dark",
-        "backgroundColor": "#1a1a1a"
+        "backgroundColor": "#1a1a1a",
+        "zoomHotkeysEnabled": true
       }
     ],
     "security": {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.2.8",
+  "version": "0.7.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,8 +12,12 @@
   "dependencies": {
     "@git-diff-view/solid": "^0.0.8",
     "@kobalte/core": "0.13.11",
-    "@opencode-ai/sdk": "^1.0.133",
+    "@opencode-ai/sdk": "1.1.11",
     "@solidjs/router": "^0.13.0",
+    "@suid/icons-material": "^0.9.0",
+    "@suid/material": "^0.19.0",
+    "@suid/system": "^0.14.0",
+    "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
     "lucide-solid": "^0.300.0",

packages/ui/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component, Show, createMemo, createEffect, createSignal } from "solid-js"
+import { Component, For, Show, createMemo, createEffect, createSignal, onMount, onCleanup } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import { Toaster } from "solid-toast"
 import AlertDialog from "./components/alert-dialog"
@@ -6,19 +6,21 @@ import FolderSelectionView from "./components/folder-selection-view"
 import { showConfirmDialog } from "./stores/alerts"
 import InstanceTabs from "./components/instance-tabs"
 import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
-import InstanceShell from "./components/instance/instance-shell"
+import InstanceShell from "./components/instance/instance-shell2"
 import { RemoteAccessOverlay } from "./components/remote-access-overlay"
+import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
+
 import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
 import { initReleaseNotifications } from "./stores/releases"
+import { runtimeEnv } from "./lib/runtime-env"
 import {
   hasInstances,
   isSelectingFolder,
   setIsSelectingFolder,
-  setHasInstances,
   showFolderSelection,
   setShowFolderSelection,
 } from "./stores/ui"
@@ -52,6 +54,7 @@ const App: Component = () => {
     preferences,
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
     toggleAutoCleanupBlankSessions,
     toggleUsageMetrics,
     setDiffViewMode,
@@ -60,9 +63,21 @@ const App: Component = () => {
     setThinkingBlocksExpansion,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
-  const [launchErrorBinary, setLaunchErrorBinary] = createSignal<string | null>(null)
+  interface LaunchErrorState {
+    message: string
+    binaryPath: string
+    missingBinary: boolean
+  }
+  const [launchError, setLaunchError] = createSignal<LaunchErrorState | null>(null)
   const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
   const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
+  const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
+
+  const updateInstanceTabBarHeight = () => {
+    if (typeof document === "undefined") return
+    const element = document.querySelector<HTMLElement>(".tab-bar-instance")
+    setInstanceTabBarHeight(element?.offsetHeight ?? 0)
+  }
 
   createEffect(() => {
     void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error))
@@ -72,6 +87,19 @@ const App: Component = () => {
     initReleaseNotifications()
   })
 
+  createEffect(() => {
+    instances()
+    hasInstances()
+    requestAnimationFrame(() => updateInstanceTabBarHeight())
+  })
+
+  onMount(() => {
+    updateInstanceTabBarHeight()
+    const handleResize = () => updateInstanceTabBarHeight()
+    window.addEventListener("resize", handleResize)
+    onCleanup(() => window.removeEventListener("resize", handleResize))
+  })
+
   const activeInstance = createMemo(() => getActiveInstance())
   const activeSessionIdForInstance = createMemo(() => {
     const instance = activeInstance()
@@ -80,14 +108,30 @@ const App: Component = () => {
   })
 
   const launchErrorPath = () => {
-    const value = launchErrorBinary()
+    const value = launchError()?.binaryPath
     if (!value) return "opencode"
     return value.trim() || "opencode"
   }
 
-  const isMissingBinaryError = (error: unknown): boolean => {
-    if (!error) return false
-    const message = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
+  const launchErrorMessage = () => launchError()?.message ?? ""
+
+  const formatLaunchErrorMessage = (error: unknown): string => {
+    if (!error) {
+      return "Failed to launch workspace"
+    }
+    const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
+    try {
+      const parsed = JSON.parse(raw)
+      if (parsed && typeof parsed.error === "string") {
+        return parsed.error
+      }
+    } catch {
+      // ignore JSON parse errors
+    }
+    return raw
+  }
+
+  const isMissingBinaryMessage = (message: string): boolean => {
     const normalized = message.toLowerCase()
     return (
       normalized.includes("opencode binary not found") ||
@@ -98,7 +142,7 @@ const App: Component = () => {
     )
   }
 
-  const clearLaunchError = () => setLaunchErrorBinary(null)
+  const clearLaunchError = () => setLaunchError(null)
 
   async function handleSelectFolder(folderPath: string, binaryPath?: string) {
     if (!folderPath) {
@@ -110,7 +154,6 @@ const App: Component = () => {
       recordWorkspaceLaunch(folderPath, selectedBinary)
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
-      setHasInstances(true)
       setShowFolderSelection(false)
       setIsAdvancedSettingsOpen(false)
 
@@ -119,10 +162,13 @@ const App: Component = () => {
         port: instances().get(instanceId)?.port,
       })
     } catch (error) {
-      clearLaunchError()
-      if (isMissingBinaryError(error)) {
-        setLaunchErrorBinary(selectedBinary)
-      }
+      const message = formatLaunchErrorMessage(error)
+      const missingBinary = isMissingBinaryMessage(message)
+      setLaunchError({
+        message,
+        binaryPath: selectedBinary,
+        missingBinary,
+      })
       log.error("Failed to create instance", error)
     } finally {
       setIsSelectingFolder(false)
@@ -166,9 +212,6 @@ const App: Component = () => {
     if (!confirmed) return
 
     await stopInstance(instanceId)
-    if (instances().size === 0) {
-      setHasInstances(false)
-    }
   }
 
   async function handleNewSession(instanceId: string) {
@@ -222,6 +265,7 @@ const App: Component = () => {
     preferences,
     toggleAutoCleanupBlankSessions,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
     toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,
@@ -247,6 +291,28 @@ const App: Component = () => {
     getActiveSessionIdForInstance: activeSessionIdForInstance,
   })
 
+  // Listen for Tauri menu events
+  onMount(() => {
+    if (runtimeEnv.host === "tauri") {
+      const tauriBridge = (window as { __TAURI__?: { event?: { listen: (event: string, handler: (event: { payload: unknown }) => void) => Promise<() => void> } } }).__TAURI__
+      if (tauriBridge?.event) {
+        let unlistenMenu: (() => void) | null = null
+        
+        tauriBridge.event.listen("menu:newInstance", () => {
+          handleNewInstanceRequest()
+        }).then((unlisten) => {
+          unlistenMenu = unlisten
+        }).catch((error) => {
+          log.error("Failed to listen for menu:newInstance event", error)
+        })
+
+        onCleanup(() => {
+          unlistenMenu?.()
+        })
+      }
+    }
+  })
+
   return (
     <>
       <InstanceDisconnectedModal
@@ -256,7 +322,7 @@ const App: Component = () => {
         onClose={handleDisconnectedInstanceClose}
       />
 
-      <Dialog open={Boolean(launchErrorBinary())} modal>
+      <Dialog open={Boolean(launchError())} modal>
         <Dialog.Portal>
           <Dialog.Overlay class="modal-overlay" />
           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
@@ -264,8 +330,8 @@ const App: Component = () => {
               <div>
                 <Dialog.Title class="text-xl font-semibold text-primary">Unable to launch OpenCode</Dialog.Title>
                 <Dialog.Description class="text-sm text-secondary mt-2 break-words">
-                  Install the OpenCode CLI and make sure it is available in your PATH, or pick a custom binary from
-                  Advanced Settings.
+                  We couldn't start the selected OpenCode binary. Review the error output below or choose a different
+                  binary from Advanced Settings.
                 </Dialog.Description>
               </div>
 
@@ -274,10 +340,23 @@ const App: Component = () => {
                 <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
               </div>
 
+              <Show when={launchErrorMessage()}>
+                <div class="rounded-lg border border-base bg-surface-secondary p-4">
+                  <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Error output</p>
+                  <pre class="text-sm font-mono text-primary whitespace-pre-wrap break-words max-h-48 overflow-y-auto">{launchErrorMessage()}</pre>
+                </div>
+              </Show>
+
               <div class="flex justify-end gap-2">
-                <button type="button" class="selector-button selector-button-secondary" onClick={handleLaunchErrorAdvanced}>
-                  Open Advanced Settings
-                </button>
+                <Show when={launchError()?.missingBinary}>
+                  <button
+                    type="button"
+                    class="selector-button selector-button-secondary"
+                    onClick={handleLaunchErrorAdvanced}
+                  >
+                    Open Advanced Settings
+                  </button>
+                </Show>
                 <button type="button" class="selector-button selector-button-primary" onClick={handleLaunchErrorClose}>
                   Close
                 </button>
@@ -299,21 +378,33 @@ const App: Component = () => {
                 onNew={handleNewInstanceRequest}
                 onOpenRemoteAccess={() => setRemoteAccessOpen(true)}
               />
+ 
+              <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" }}>
+                        <InstanceMetadataProvider instance={instance}>
+                          <InstanceShell
+                            instance={instance}
+                            escapeInDebounce={escapeInDebounce()}
+                            paletteCommands={paletteCommands}
+                            onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                            onNewSession={() => handleNewSession(instance.id)}
+                            handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                            handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                            onExecuteCommand={executeCommand}
+                            tabBarOffset={instanceTabBarHeight()}
+                          />
+                        </InstanceMetadataProvider>
+
+                      </div>
+                    )
+
+                }}
+              </For>
 
-              <Show when={activeInstance()} keyed>
-                {(instance) => (
-                  <InstanceShell
-                    instance={instance}
-                    escapeInDebounce={escapeInDebounce()}
-                    paletteCommands={paletteCommands}
-                    onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
-                    onNewSession={() => handleNewSession(instance.id)}
-                    handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
-                    handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
-                    onExecuteCommand={executeCommand}
-                  />
-                )}
-              </Show>
             </>
           }
         >

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

@@ -114,7 +114,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
         </Select.Trigger>
 
         <Select.Portal>
-          <Select.Content class="selector-popover max-h-80 overflow-auto p-1 z-50">
+          <Select.Content class="selector-popover max-h-80 overflow-auto p-1">
             <Select.Listbox class="selector-listbox" />
           </Select.Content>
         </Select.Portal>

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

@@ -1,5 +1,5 @@
 import { Dialog } from "@kobalte/core/dialog"
-import { Component, Show, createEffect } from "solid-js"
+import { Component, Show, createEffect, createSignal } from "solid-js"
 import { alertDialogState, dismissAlertDialog } from "../stores/alerts"
 import type { AlertVariant, AlertDialogState } from "../stores/alerts"
 
@@ -27,8 +27,9 @@ const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string
   },
 }
 
-function dismiss(confirmed: boolean, payload?: AlertDialogState | null) {
+function dismiss(confirmed: boolean, payload?: AlertDialogState | null, promptValue?: string) {
   const current = payload ?? alertDialogState()
+
   if (current?.type === "confirm") {
     if (confirmed) {
       current.onConfirm?.()
@@ -36,7 +37,23 @@ function dismiss(confirmed: boolean, payload?: AlertDialogState | null) {
       current.onCancel?.()
     }
     current.resolve?.(confirmed)
-  } else if (confirmed) {
+    dismissAlertDialog()
+    return
+  }
+
+  if (current?.type === "prompt") {
+    if (confirmed) {
+      current.onConfirm?.()
+      current.resolvePrompt?.(promptValue ?? "")
+    } else {
+      current.onCancel?.()
+      current.resolvePrompt?.(null)
+    }
+    dismissAlertDialog()
+    return
+  }
+
+  if (confirmed) {
     current?.onConfirm?.()
   }
   dismissAlertDialog()
@@ -60,9 +77,12 @@ const AlertDialog: Component = () => {
         const accent = variantAccent[variant]
         const title = payload.title || accent.fallbackTitle
         const isConfirm = payload.type === "confirm"
-        const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : "OK")
+        const isPrompt = payload.type === "prompt"
+        const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : isPrompt ? "Run" : "OK")
         const cancelLabel = payload.cancelLabel || "Cancel"
 
+        const [inputValue, setInputValue] = createSignal(payload.inputDefaultValue ?? "")
+
         return (
           <Dialog
             open
@@ -98,27 +118,47 @@ const AlertDialog: Component = () => {
                     </div>
                   </div>
 
-                  <div class="mt-6 flex justify-end gap-3">
-                    {isConfirm && (
-                      <button
-                        type="button"
-                        class="button-secondary"
-                        onClick={() => dismiss(false, payload)}
-                      >
-                        {cancelLabel}
-                      </button>
-                    )}
-                    <button
-                      type="button"
-                      class="button-primary"
-                      ref={(el) => {
-                        primaryButtonRef = el
-                      }}
-                      onClick={() => dismiss(true, payload)}
-                    >
-                      {confirmLabel}
-                    </button>
-                  </div>
+                   <Show when={isPrompt}>
+                     <div class="mt-4">
+                       <label class="text-xs font-medium text-muted uppercase tracking-wide">
+                         {payload.inputLabel || "Arguments"}
+                       </label>
+                       <input
+                         class="modal-search-input mt-2"
+                         value={inputValue()}
+                         placeholder={payload.inputPlaceholder || ""}
+                         onInput={(e) => setInputValue(e.currentTarget.value)}
+                         onKeyDown={(e) => {
+                           if (e.key === "Enter") {
+                             e.preventDefault()
+                             dismiss(true, payload, inputValue())
+                           }
+                         }}
+                       />
+                     </div>
+                   </Show>
+
+                   <div class="mt-6 flex justify-end gap-3">
+                     {(isConfirm || isPrompt) && (
+                       <button
+                         type="button"
+                         class="button-secondary"
+                         onClick={() => dismiss(false, payload)}
+                       >
+                         {cancelLabel}
+                       </button>
+                     )}
+                     <button
+                       type="button"
+                       class="button-primary"
+                       ref={(el) => {
+                         primaryButtonRef = el
+                       }}
+                       onClick={() => dismiss(true, payload, inputValue())}
+                     >
+                       {confirmLabel}
+                     </button>
+                   </div>
                 </Dialog.Content>
               </div>
             </Dialog.Portal>

packages/ui/src/components/background-process-output-dialog.tsx

@@ -0,0 +1,167 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
+import type { BackgroundProcess } from "../../../server/src/api-types"
+import { buildBackgroundProcessStreamUrl, serverApi } from "../lib/api-client"
+import { createAnsiStreamRenderer, hasAnsi } from "../lib/ansi"
+
+interface BackgroundProcessOutputDialogProps {
+  open: boolean
+  instanceId: string
+  process: BackgroundProcess | null
+  onClose: () => void
+}
+
+export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDialogProps) {
+  const [output, setOutput] = createSignal("")
+  const [outputHtml, setOutputHtml] = createSignal("")
+  const [ansiEnabled, setAnsiEnabled] = createSignal(false)
+  const [truncated, setTruncated] = createSignal(false)
+  const [loading, setLoading] = createSignal(false)
+  let ansiRenderer = createAnsiStreamRenderer()
+
+  createEffect(() => {
+    const process = props.process
+    if (!props.open || !process) {
+      return
+    }
+
+    let eventSource: EventSource | null = null
+    let active = true
+
+    let rawOutput = ""
+
+    const setRawOutput = (next: string) => {
+      rawOutput = next
+      setOutput(next)
+    }
+
+    const appendRawOutput = (chunk: string) => {
+      rawOutput += chunk
+      setOutput(rawOutput)
+    }
+
+    setAnsiEnabled(false)
+    setOutputHtml("")
+    setRawOutput("")
+    ansiRenderer.reset()
+
+    setLoading(true)
+    serverApi
+      .fetchBackgroundProcessOutput(props.instanceId, process.id, { method: "full", maxBytes: undefined })
+      .then((response) => {
+        if (!active) return
+
+        setRawOutput(response.content)
+        setTruncated(response.truncated)
+
+        const detectedAnsi = hasAnsi(response.content)
+        if (detectedAnsi) {
+          setAnsiEnabled(true)
+          ansiRenderer.reset()
+          setOutputHtml(ansiRenderer.render(response.content))
+        } else {
+          setAnsiEnabled(false)
+          setOutputHtml("")
+          ansiRenderer.reset()
+        }
+      })
+      .catch(() => {
+        if (!active) return
+        setRawOutput("Failed to load output.")
+        setAnsiEnabled(false)
+        setOutputHtml("")
+      })
+      .finally(() => {
+        if (!active) return
+        setLoading(false)
+      })
+
+    eventSource = new EventSource(buildBackgroundProcessStreamUrl(props.instanceId, process.id), { withCredentials: true } as any)
+    eventSource.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data) as { type?: string; content?: string }
+        if (payload?.type !== "chunk" || typeof payload.content !== "string") {
+          return
+        }
+
+        const chunk = payload.content
+        const wasAnsiEnabled = ansiEnabled()
+
+        if (!wasAnsiEnabled) {
+          appendRawOutput(chunk)
+
+          if (hasAnsi(chunk)) {
+            setAnsiEnabled(true)
+            ansiRenderer.reset()
+            setOutputHtml(ansiRenderer.render(rawOutput))
+          }
+
+          return
+        }
+
+        appendRawOutput(chunk)
+        const htmlChunk = ansiRenderer.render(chunk)
+        setOutputHtml((prev) => `${prev}${htmlChunk}`)
+      } catch {
+        // ignore parse errors
+      }
+    }
+
+    onCleanup(() => {
+      active = false
+      eventSource?.close()
+    })
+  })
+
+  return (
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()} modal>
+      <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-5xl max-h-[90vh] flex flex-col overflow-hidden">
+            <div class="flex items-start justify-between px-6 py-4 border-b border-base gap-4">
+              <div class="flex-1 min-w-0">
+                <Dialog.Title class="text-lg font-semibold text-primary">Background Output</Dialog.Title>
+                <Show when={props.process}>
+                  <span class="text-xs text-secondary block">
+                    {props.process?.title} · {props.process?.id}
+                  </span>
+                  <span class="text-xs text-secondary mt-1 block truncate" title={props.process?.command}>
+                    {props.process?.command}
+                  </span>
+                </Show>
+              </div>
+
+              <button type="button" class="button-tertiary flex-shrink-0" onClick={props.onClose}>
+                Close
+              </button>
+            </div>
+            <div class="flex-1 overflow-auto p-6">
+              <Show when={loading()}>
+                <p class="text-xs text-secondary">Loading output...</p>
+              </Show>
+              <Show when={!loading()}>
+                <Show when={truncated()}>
+                  <p class="text-xs text-secondary mb-2">Output truncated for display.</p>
+                </Show>
+                <Show
+                  when={ansiEnabled()}
+                  fallback={
+                    <pre class="text-xs whitespace-pre-wrap break-all text-primary bg-surface-secondary border border-base rounded-md p-4 font-mono">
+                      {output()}
+                    </pre>
+                  }
+                >
+                  <pre
+                    class="text-xs whitespace-pre-wrap break-all text-primary bg-surface-secondary border border-base rounded-md p-4 font-mono"
+                    innerHTML={outputHtml()}
+                  />
+                </Show>
+              </Show>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

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

@@ -2,6 +2,7 @@ import { createSignal, onMount, Show, createEffect } from "solid-js"
 import type { Highlighter } from "shiki/bundle/full"
 import { useTheme } from "../lib/theme"
 import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
+import { copyToClipboard } from "../lib/clipboard"
 
 const inlineLoadedLanguages = new Set<string>()
 
@@ -61,9 +62,11 @@ export function CodeBlockInline(props: CodeBlockInlineProps) {
   }
 
   const copyCode = async () => {
-    await navigator.clipboard.writeText(props.code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    const success = await copyToClipboard(props.code)
+    if (success) {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
   }
 
   return (

packages/ui/src/components/expand-button.tsx

@@ -0,0 +1,30 @@
+import { Show } from "solid-js"
+import { Maximize2, Minimize2 } from "lucide-solid"
+
+interface ExpandButtonProps {
+  expandState: () => "normal" | "expanded"
+  onToggleExpand: (nextState: "normal" | "expanded") => void
+}
+
+export default function ExpandButton(props: ExpandButtonProps) {
+  function handleClick() {
+    const current = props.expandState()
+    props.onToggleExpand(current === "normal" ? "expanded" : "normal")
+  }
+
+  return (
+    <button
+      type="button"
+      class="prompt-expand-button"
+      onClick={handleClick}
+      aria-label="Toggle chat input height"
+    >
+      <Show
+        when={props.expandState() === "normal"}
+        fallback={<Minimize2 class="h-4 w-4" aria-hidden="true" />}
+      >
+        <Maximize2 class="h-4 w-4" aria-hidden="true" />
+      </Show>
+    </button>
+  )
+}

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

@@ -224,11 +224,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   return (
     <>
       <div
-        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 relative"
+        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
         style="background-color: var(--surface-secondary)"
       >
         <div
-          class="w-full max-w-3xl h-full px-8 pb-2 flex flex-col overflow-hidden"
+          class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
           aria-busy={isLoading() ? "true" : "false"}
         >
           <Show when={props.onOpenRemoteAccess}>

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

@@ -1,134 +1,26 @@
-import { Component, Show, For, createSignal, createEffect, onCleanup } from "solid-js"
-import type { Instance, RawMcpStatus } from "../types/instance"
-import { fetchLspStatus, updateInstance } from "../stores/instances"
-import { getLogger } from "../lib/logger"
-
-const log = getLogger("session")
+import { Component, For, Show, createMemo } from "solid-js"
+import type { Instance } from "../types/instance"
+import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
+import InstanceServiceStatus from "./instance-service-status"
 
 interface InstanceInfoProps {
   instance: Instance
   compact?: boolean
 }
 
-type ParsedMcpStatus = {
-  name: string
-  status: "running" | "stopped" | "error"
-  error?: string
-}
-
-function parseMcpStatus(status: RawMcpStatus): ParsedMcpStatus[] {
-  if (!status || typeof status !== "object") return []
-
-  const result: ParsedMcpStatus[] = []
-
-  for (const [name, value] of Object.entries(status)) {
-    if (!value || typeof value !== "object") continue
-    const rawStatus = (value as { status?: string }).status
-    if (!rawStatus) continue
-
-    let mappedStatus: ParsedMcpStatus["status"]
-    if (rawStatus === "connected") {
-      mappedStatus = "running"
-    } else if (rawStatus === "failed") {
-      mappedStatus = "error"
-    } else {
-      mappedStatus = "stopped"
-    }
-
-    result.push({
-      name,
-      status: mappedStatus,
-      error: typeof (value as { error?: unknown }).error === "string" ? (value as { error?: string }).error : undefined,
-    })
-  }
-
-  return result
-}
-
-const pendingMetadataRequests = new Set<string>()
-
 const InstanceInfo: Component<InstanceInfoProps> = (props) => {
-  const [isLoadingMetadata, setIsLoadingMetadata] = createSignal(true)
+  const metadataContext = useOptionalInstanceMetadataContext()
+  const isLoadingMetadata = metadataContext?.isLoading ?? (() => false)
+  const instanceAccessor = metadataContext?.instance ?? (() => props.instance)
+  const metadataAccessor = metadataContext?.metadata ?? (() => props.instance.metadata)
 
-  const metadata = () => props.instance.metadata
-  const binaryVersion = () => props.instance.binaryVersion || metadata()?.version
-  const mcpServers = () => {
-    const status = metadata()?.mcpStatus
-    return status ? parseMcpStatus(status) : []
-  }
-  const lspServers = () => metadata()?.lspStatus ?? []
-
-  createEffect(() => {
-    const instance = props.instance
-    const instanceId = instance.id
-    const client = instance.client
-    const hasMetadata = Boolean(instance.metadata)
-
-    if (!client) {
-      setIsLoadingMetadata(false)
-      pendingMetadataRequests.delete(instanceId)
-      return
-    }
-
-    if (hasMetadata) {
-      setIsLoadingMetadata(false)
-      pendingMetadataRequests.delete(instanceId)
-      return
-    }
-
-    if (pendingMetadataRequests.has(instanceId)) {
-      setIsLoadingMetadata(true)
-      return
-    }
-
-    let cancelled = false
-    pendingMetadataRequests.add(instanceId)
-    setIsLoadingMetadata(true)
-
-    void (async () => {
-      try {
-        const [projectResult, mcpResult, lspResult] = await Promise.allSettled([
-          client.project.current(),
-          client.mcp.status(),
-          fetchLspStatus(instanceId),
-        ])
-
-        if (cancelled) {
-          return
-        }
-
-        const project = projectResult.status === "fulfilled" ? projectResult.value.data : undefined
-        const mcpStatus = mcpResult.status === "fulfilled" ? (mcpResult.value.data as RawMcpStatus) : undefined
-        const lspStatus = lspResult.status === "fulfilled" ? lspResult.value ?? [] : undefined
-
-        const nextMetadata = {
-          ...(instance.metadata ?? {}),
-          ...(project ? { project } : {}),
-          ...(mcpStatus ? { mcpStatus } : {}),
-          ...(lspStatus ? { lspStatus } : {}),
-        }
-
-        if (!nextMetadata.version && instance.binaryVersion) {
-          nextMetadata.version = instance.binaryVersion
-        }
-
-        updateInstance(instanceId, { metadata: nextMetadata })
-
-      } catch (error) {
-        if (!cancelled) {
-          log.error("Failed to load instance metadata", error)
-        }
-      } finally {
-        pendingMetadataRequests.delete(instanceId)
-        if (!cancelled) {
-          setIsLoadingMetadata(false)
-        }
-      }
-    })()
-
-    onCleanup(() => {
-      cancelled = true
-    })
+  const currentInstance = () => instanceAccessor()
+  const metadata = () => metadataAccessor()
+  const binaryVersion = () => currentInstance().binaryVersion || metadata()?.version
+  const environmentVariables = () => currentInstance().environmentVariables
+  const environmentEntries = createMemo(() => {
+    const env = environmentVariables()
+    return env ? Object.entries(env) : []
   })
 
   return (
@@ -140,7 +32,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <div>
           <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Folder</div>
           <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
-            {props.instance.folder}
+            {currentInstance().folder}
           </div>
         </div>
 
@@ -189,24 +81,24 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
           </div>
         </Show>
 
-        <Show when={props.instance.binaryPath}>
+        <Show when={currentInstance().binaryPath}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               Binary Path
             </div>
             <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
-              {props.instance.binaryPath}
+              {currentInstance().binaryPath}
             </div>
           </div>
         </Show>
 
-        <Show when={props.instance.environmentVariables && Object.keys(props.instance.environmentVariables).length > 0}>
+        <Show when={environmentEntries().length > 0}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
-              Environment Variables ({Object.keys(props.instance.environmentVariables!).length})
+              Environment Variables ({environmentEntries().length})
             </div>
             <div class="space-y-1">
-              <For each={Object.entries(props.instance.environmentVariables!)}>
+              <For each={environmentEntries()}>
                 {([key, value]) => (
                   <div class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
                     <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
@@ -222,79 +114,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
           </div>
         </Show>
 
-        <Show when={!isLoadingMetadata() && lspServers().length > 0}>
-          <div>
-            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
-              LSP Servers
-            </div>
-            <div class="space-y-1.5">
-              <For each={lspServers()}>
-                {(server) => (
-                  <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
-                    <div class="flex items-center justify-between gap-2">
-                      <div class="flex flex-col flex-1 min-w-0">
-                        <span class="text-xs text-primary font-medium truncate">{server.name ?? server.id}</span>
-                        <span class="text-[11px] text-secondary truncate" title={server.root}>
-                          {server.root}
-                        </span>
-                      </div>
-                      <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
-                        <div class={`status-dot ${server.status === "connected" ? "ready animate-pulse" : "error"}`} />
-                        <span>{server.status === "connected" ? "Connected" : "Error"}</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </For>
-            </div>
-          </div>
-        </Show>
-
-        <Show when={!isLoadingMetadata() && mcpServers().length > 0}>
-          <div>
-            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
-              MCP Servers
-            </div>
-            <div class="space-y-1.5">
-              <For each={mcpServers()}>
-                {(server) => (
-                  <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
-                    <div class="flex items-center justify-between gap-2">
-                      <span class="text-xs text-primary font-medium truncate">{server.name}</span>
-                      <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
-                        <div
-                          class={`status-dot ${
-                            server.status === "running"
-                              ? "ready animate-pulse"
-                              : server.status === "error"
-                                ? "error"
-                                : "stopped"
-                          }`}
-                        />
-                        <span>
-                          {
-                            server.status === "running"
-                              ? "Connected"
-                              : server.status === "error"
-                                ? "Error"
-                                : "Disabled"
-                          }
-                        </span>
-                      </div>
-                    </div>
-                    <Show when={server.error}>
-                      {(error) => (
-                        <div class="text-[11px] mt-1 break-words" style={{ color: "var(--status-error)" }}>
-                          {error()}
-                        </div>
-                      )}
-                    </Show>
-                  </div>
-                )}
-              </For>
-            </div>
-          </div>
-        </Show>
+        <InstanceServiceStatus initialInstance={props.instance} class="space-y-3" />
 
         <Show when={isLoadingMetadata()}>
           <div class="text-xs text-muted py-1">
@@ -317,21 +137,19 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
           <div class="space-y-1 text-xs">
             <div class="flex justify-between items-center">
               <span class="text-secondary">Port:</span>
-              <span class="text-primary font-mono">{props.instance.port}</span>
+              <span class="text-primary font-mono">{currentInstance().port}</span>
             </div>
             <div class="flex justify-between items-center">
               <span class="text-secondary">PID:</span>
-              <span class="text-primary font-mono">{props.instance.pid}</span>
+              <span class="text-primary font-mono">{currentInstance().pid}</span>
             </div>
             <div class="flex justify-between items-center">
               <span class="text-secondary">Status:</span>
-              <span
-                class={`status-badge ${props.instance.status}`}
-              >
+              <span class={`status-badge ${currentInstance().status}`}>
                 <div
-                  class={`status-dot ${props.instance.status === "ready" ? "ready" : props.instance.status === "starting" ? "starting" : props.instance.status === "error" ? "error" : "stopped"} ${props.instance.status === "ready" || props.instance.status === "starting" ? "animate-pulse" : ""}`}
+                  class={`status-dot ${currentInstance().status === "ready" ? "ready" : currentInstance().status === "starting" ? "starting" : currentInstance().status === "error" ? "error" : "stopped"} ${currentInstance().status === "ready" || currentInstance().status === "starting" ? "animate-pulse" : ""}`}
                 />
-                {props.instance.status}
+                {currentInstance().status}
               </span>
             </div>
           </div>

packages/ui/src/components/instance-service-status.tsx

@@ -0,0 +1,254 @@
+import { For, Show, createMemo, createSignal, type Component } from "solid-js"
+import Switch from "@suid/material/Switch"
+import type { Instance, RawMcpStatus } from "../types/instance"
+import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
+import { getLogger } from "../lib/logger"
+
+const log = getLogger("session")
+
+type ServiceSection = "lsp" | "mcp" | "plugins"
+
+interface InstanceServiceStatusProps {
+  sections?: ServiceSection[]
+  showSectionHeadings?: boolean
+  class?: string
+  initialInstance?: Instance
+}
+
+type ParsedMcpStatus = {
+  name: string
+  status: "running" | "stopped" | "error"
+  error?: string
+}
+
+function parseMcpStatus(status?: RawMcpStatus): ParsedMcpStatus[] {
+  if (!status || typeof status !== "object") return []
+  const result: ParsedMcpStatus[] = []
+  for (const [name, value] of Object.entries(status)) {
+    if (!value || typeof value !== "object") continue
+    const rawStatus = (value as { status?: string }).status
+    if (!rawStatus) continue
+    let mapped: ParsedMcpStatus["status"]
+    if (rawStatus === "connected") mapped = "running"
+    else if (rawStatus === "failed") mapped = "error"
+    else mapped = "stopped"
+    result.push({
+      name,
+      status: mapped,
+      error: typeof (value as { error?: unknown }).error === "string" ? (value as { error?: string }).error : undefined,
+    })
+  }
+  return result
+}
+
+const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) => {
+  const metadataContext = useOptionalInstanceMetadataContext()
+  const instance = metadataContext?.instance ?? (() => {
+    if (props.initialInstance) {
+      return props.initialInstance
+    }
+    throw new Error("InstanceServiceStatus requires InstanceMetadataProvider or initialInstance prop")
+  })
+  const isLoading = metadataContext?.isLoading ?? (() => false)
+  const refreshMetadata = metadataContext?.refreshMetadata ?? (async () => Promise.resolve())
+  const sections = createMemo<ServiceSection[]>(() => props.sections ?? ["lsp", "mcp", "plugins"])
+  const includeLsp = createMemo(() => sections().includes("lsp"))
+  const includeMcp = createMemo(() => sections().includes("mcp"))
+  const includePlugins = createMemo(() => sections().includes("plugins"))
+  const showHeadings = () => props.showSectionHeadings !== false
+
+  const metadataAccessor = metadataContext?.metadata ?? (() => instance().metadata)
+  const metadata = createMemo(() => metadataAccessor())
+  const hasLspMetadata = () => metadata()?.lspStatus !== undefined
+  const hasMcpMetadata = () => metadata()?.mcpStatus !== undefined
+  const hasPluginsMetadata = () => metadata()?.plugins !== undefined
+
+  const lspServers = createMemo(() => metadata()?.lspStatus ?? [])
+  const mcpServers = createMemo(() => parseMcpStatus(metadata()?.mcpStatus ?? undefined))
+  const plugins = createMemo(() => metadata()?.plugins ?? [])
+
+  const isLspLoading = () => isLoading() || !hasLspMetadata()
+  const isMcpLoading = () => isLoading() || !hasMcpMetadata()
+  const isPluginsLoading = () => isLoading() || !hasPluginsMetadata()
+
+
+  const [pendingMcpActions, setPendingMcpActions] = createSignal<Record<string, "connect" | "disconnect">>({})
+
+  const setPendingMcpAction = (name: string, action?: "connect" | "disconnect") => {
+    setPendingMcpActions((prev) => {
+      const next = { ...prev }
+      if (action) next[name] = action
+      else delete next[name]
+      return next
+    })
+  }
+
+  const toggleMcpServer = async (serverName: string, shouldEnable: boolean) => {
+    const client = instance().client
+    if (!client?.mcp) return
+    const action: "connect" | "disconnect" = shouldEnable ? "connect" : "disconnect"
+    setPendingMcpAction(serverName, action)
+    try {
+      if (shouldEnable) {
+        await client.mcp.connect({ name: serverName })
+      } else {
+        await client.mcp.disconnect({ name: serverName })
+      }
+      await refreshMetadata()
+    } catch (error) {
+      log.error("Failed to toggle MCP server", { serverName, action, error })
+    } finally {
+      setPendingMcpAction(serverName)
+    }
+  }
+
+  const renderEmptyState = (message: string) => (
+    <p class="text-[11px] text-secondary italic" role="status">
+      {message}
+    </p>
+  )
+
+  const renderLspSection = () => (
+    <section class="space-y-1.5">
+      <Show when={showHeadings()}>
+        <div class="text-xs font-medium text-muted uppercase tracking-wide">
+          LSP Servers
+        </div>
+      </Show>
+      <Show
+        when={!isLspLoading() && lspServers().length > 0}
+        fallback={renderEmptyState(isLspLoading() ? "Loading LSP servers..." : "No LSP servers detected.")}
+      >
+        <div class="space-y-1.5">
+          <For each={lspServers()}>
+            {(server) => (
+              <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                <div class="flex items-center justify-between gap-2">
+                  <div class="flex flex-col flex-1 min-w-0">
+                    <span class="text-xs text-primary font-medium truncate">{server.name ?? server.id}</span>
+                    <span class="text-[11px] text-secondary truncate" title={server.root}>
+                      {server.root}
+                    </span>
+                  </div>
+                  <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
+                    <div class={`status-dot ${server.status === "connected" ? "ready animate-pulse" : "error"}`} />
+                    <span>{server.status === "connected" ? "Connected" : "Error"}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </section>
+  )
+
+  const renderMcpSection = () => (
+    <section class="space-y-1.5">
+      <Show when={showHeadings()}>
+        <div class="text-xs font-medium text-muted uppercase tracking-wide">
+          MCP Servers
+        </div>
+      </Show>
+      <Show
+        when={!isMcpLoading() && mcpServers().length > 0}
+        fallback={renderEmptyState(isMcpLoading() ? "Loading MCP servers..." : "No MCP servers detected.")}
+      >
+        <div class="space-y-1.5">
+          <For each={mcpServers()}>
+            {(server) => {
+              const pendingAction = () => pendingMcpActions()[server.name]
+              const isPending = () => Boolean(pendingAction())
+              const isRunning = () => server.status === "running"
+              const switchDisabled = () => isPending() || !instance().client
+              const statusDotClass = () => {
+                if (isPending()) return "status-dot animate-pulse"
+                if (server.status === "running") return "status-dot ready animate-pulse"
+                if (server.status === "error") return "status-dot error"
+                return "status-dot stopped"
+              }
+              const statusDotStyle = () => (isPending() ? { background: "var(--status-warning)" } : undefined)
+              return (
+                <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                  <div class="flex items-center justify-between gap-2">
+                    <span class="text-xs text-primary font-medium truncate">{server.name}</span>
+                      <div class="flex items-center gap-3 flex-shrink-0">
+                        <div class="flex items-center gap-1.5 text-xs text-secondary">
+                          <Show when={isPending()}>
+                            <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
+                              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                              <path
+                                class="opacity-75"
+                                fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              />
+                            </svg>
+                          </Show>
+                          <div class={statusDotClass()} style={statusDotStyle()} />
+                        </div>
+                        <div class="flex items-center gap-1.5">
+                          <Switch
+                            checked={isRunning()}
+                            disabled={switchDisabled()}
+                            color="success"
+                            size="small"
+                            inputProps={{ "aria-label": `Toggle ${server.name} MCP server` }}
+                            onChange={(_, checked) => {
+                              if (switchDisabled()) return
+                              void toggleMcpServer(server.name, Boolean(checked))
+                            }}
+                          />
+                        </div>
+                      </div>
+
+                  </div>
+                  <Show when={server.error}>
+                    {(error) => (
+                      <div class="text-[11px] mt-1 break-words" style={{ color: "var(--status-error)" }}>
+                        {error()}
+                      </div>
+                    )}
+                  </Show>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+    </section>
+  )
+
+  const renderPluginsSection = () => (
+    <section class="space-y-1.5">
+      <Show when={showHeadings()}>
+        <div class="text-xs font-medium text-muted uppercase tracking-wide">
+          Plugins
+        </div>
+      </Show>
+      <Show
+        when={!isPluginsLoading() && plugins().length > 0}
+        fallback={renderEmptyState(isPluginsLoading() ? "Loading plugins..." : "No plugins configured.")}
+      >
+        <div class="space-y-1.5">
+          <For each={plugins()}>
+            {(plugin) => (
+              <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                <div class="text-xs text-primary font-medium break-words whitespace-normal">{plugin}</div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </section>
+  )
+
+  return (
+    <div class={props.class}>
+      <Show when={includeLsp()}>{renderLspSection()}</Show>
+      <Show when={includeMcp()}>{renderMcpSection()}</Show>
+      <Show when={includePlugins()}>{renderPluginsSection()}</Show>
+    </div>
+  )
+}
+
+export default InstanceServiceStatus

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

@@ -1,6 +1,7 @@
-import { Component } from "solid-js"
+import { Component, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
-import { FolderOpen, X } from "lucide-solid"
+import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
+import { FolderOpen, ShieldAlert, X } from "lucide-solid"
 
 interface InstanceTabProps {
   instance: Instance
@@ -26,6 +27,24 @@ function formatFolderName(path: string, instances: Instance[], currentInstance:
 }
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
+  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
+  const statusClassName = createMemo(() => {
+    const status = aggregatedStatus()
+    return status === "permission" ? "session-permission" : `session-${status}`
+  })
+  const statusTitle = createMemo(() => {
+    switch (aggregatedStatus()) {
+      case "permission":
+        return "Waiting on permission"
+      case "compacting":
+        return "Compacting"
+      case "working":
+        return "Working"
+      default:
+        return "Idle"
+    }
+  })
+
   return (
     <div class="group">
       <button
@@ -40,7 +59,18 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
           {props.instance.folder.split("/").pop() || props.instance.folder}
         </span>
         <span
-          class="tab-close ml-auto"
+          class={`status-indicator session-status ml-auto ${statusClassName()}`}
+          title={statusTitle()}
+          aria-label={`Instance status: ${statusTitle()}`}
+        >
+          {aggregatedStatus() === "permission" ? (
+            <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+          ) : (
+            <span class="status-dot" />
+          )}
+        </span>
+        <span
+          class="tab-close"
           onClick={(e) => {
             e.stopPropagation()
             props.onClose()

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

@@ -1,12 +1,14 @@
 import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js"
-import { Loader2, Trash2 } from "lucide-solid"
+import { Loader2, Pencil, Trash2 } from "lucide-solid"
 
 import type { Instance } from "../types/instance"
-import { getParentSessions, createSession, setActiveParentSession, deleteSession, loading } from "../stores/sessions"
+import { getParentSessions, createSession, setActiveParentSession, deleteSession, loading, renameSession } from "../stores/sessions"
 import InstanceInfo from "./instance-info"
 import Kbd from "./kbd"
+import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
 import { isMac } from "../lib/keyboard-utils"
+import { showToastNotification } from "../lib/notifications"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -24,6 +26,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
   const [isDesktopLayout, setIsDesktopLayout] = createSignal(
     typeof window !== "undefined" ? window.matchMedia("(min-width: 1024px)").matches : false,
   )
+  const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
+  const [isRenaming, setIsRenaming] = createSignal(false)
 
   const parentSessions = () => getParentSessions(props.instance.id)
   const isFetchingSessions = createMemo(() => Boolean(loading().fetchingSessions.get(props.instance.id)))
@@ -74,6 +78,25 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
   }
 
   function handleKeyDown(e: KeyboardEvent) {
+    let activeElement: HTMLElement | null = null
+    if (typeof document !== "undefined") {
+      activeElement = document.activeElement as HTMLElement | null
+    }
+    const insideModal = activeElement?.closest(".modal-surface") || activeElement?.closest("[role='dialog']")
+    const isEditingField =
+      activeElement &&
+      (["INPUT", "TEXTAREA", "SELECT"].includes(activeElement.tagName) ||
+        activeElement.isContentEditable ||
+        Boolean(insideModal))
+ 
+    if (isEditingField) {
+      if (insideModal && e.key === "Escape" && renameTarget()) {
+        e.preventDefault()
+        closeRenameDialog()
+      }
+      return
+    }
+ 
     if (showInstanceInfoOverlay()) {
       if (e.key === "Escape") {
         e.preventDefault()
@@ -81,53 +104,67 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
       }
       return
     }
-
+ 
     const sessions = parentSessions()
-
+ 
     if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") {
       e.preventDefault()
       handleNewSession()
       return
     }
-
+ 
     if (sessions.length === 0) return
-
+ 
+    const listFocused = focusMode() === "sessions"
+ 
     if (e.key === "ArrowDown") {
+      if (!listFocused) {
+        setFocusMode("sessions")
+        setSelectedIndex(0)
+      }
       e.preventDefault()
       const newIndex = Math.min(selectedIndex() + 1, sessions.length - 1)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
-    } else if (e.key === "ArrowUp") {
+      return
+    }
+ 
+    if (e.key === "ArrowUp") {
+      if (!listFocused) {
+        setFocusMode("sessions")
+        setSelectedIndex(Math.max(parentSessions().length - 1, 0))
+      }
       e.preventDefault()
       const newIndex = Math.max(selectedIndex() - 1, 0)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
-    } else if (e.key === "PageDown") {
+      return
+    }
+ 
+    if (!listFocused) {
+      return
+    }
+ 
+    if (e.key === "PageDown") {
       e.preventDefault()
       const pageSize = 5
       const newIndex = Math.min(selectedIndex() + pageSize, sessions.length - 1)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "PageUp") {
       e.preventDefault()
       const pageSize = 5
       const newIndex = Math.max(selectedIndex() - pageSize, 0)
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "Home") {
       e.preventDefault()
       setSelectedIndex(0)
-      setFocusMode("sessions")
       scrollToIndex(0)
     } else if (e.key === "End") {
       e.preventDefault()
       const newIndex = sessions.length - 1
       setSelectedIndex(newIndex)
-      setFocusMode("sessions")
       scrollToIndex(newIndex)
     } else if (e.key === "Enter") {
       e.preventDefault()
@@ -138,6 +175,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     }
   }
 
+
   async function handleEnterKey() {
     const sessions = parentSessions()
     const index = selectedIndex()
@@ -234,6 +272,31 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     }
   }
 
+  function openRenameDialogForSession(sessionId: string, title: string) {
+    const label = title && title.trim() ? title : sessionId
+    setRenameTarget({ id: sessionId, title: title ?? "", label })
+  }
+
+  function closeRenameDialog() {
+    setRenameTarget(null)
+  }
+
+  async function handleRenameSubmit(nextTitle: string) {
+    const target = renameTarget()
+    if (!target) return
+
+    setIsRenaming(true)
+    try {
+      await renameSession(props.instance.id, target.id, nextTitle)
+      setRenameTarget(null)
+    } catch (error) {
+      log.error("Failed to rename session:", error)
+      showToastNotification({ message: "Unable to rename session", variant: "error" })
+    } finally {
+      setIsRenaming(false)
+    }
+  }
+
   async function handleNewSession() {
     if (isCreating()) return
 
@@ -251,8 +314,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
   return (
     <div class="flex-1 flex flex-col overflow-hidden bg-surface-secondary">
-      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto">
-        <div class="flex-1 flex flex-col gap-4 min-h-0">
+      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto min-w-0">
+        <div class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
           <Show
             when={parentSessions().length > 0}
             fallback={
@@ -336,7 +399,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                               <div class="flex-1 min-w-0">
                                 <div class="flex items-center gap-2">
                                   <span
-                                    class="text-sm font-medium text-primary truncate transition-colors"
+                                    class="text-sm font-medium text-primary whitespace-normal break-words transition-colors"
                                     classList={{
                                       "text-accent": isFocused(),
                                     }}
@@ -355,6 +418,18 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                           <Show when={isFocused()}>
                             <div class="flex items-center gap-2 flex-shrink-0">
                               <kbd class="kbd flex-shrink-0">↵</kbd>
+                              <button
+                                type="button"
+                                class="p-1.5 rounded transition-colors text-muted hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                                title="Rename session"
+                                onClick={(event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  openRenameDialogForSession(session.id, session.title || "")
+                                }}
+                              >
+                                <Pencil class="w-4 h-4" />
+                              </button>
                               <button
                                 type="button"
                                 class="p-1.5 rounded transition-colors text-muted hover:text-red-500 dark:hover:text-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
@@ -431,7 +506,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
         </div>
 
         <div class="hidden lg:block lg:w-80 flex-shrink-0">
-          <div class="sticky top-0">
+          <div class="sticky top-0 max-h-full overflow-y-auto pr-1">
             <InstanceInfo instance={props.instance} />
           </div>
         </div>
@@ -488,10 +563,17 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
           </div>
         </div>
       </div>
+
+      <SessionRenameDialog
+        open={Boolean(renameTarget())}
+        currentTitle={renameTarget()?.title ?? ""}
+        sessionLabel={renameTarget()?.label}
+        isSubmitting={isRenaming()}
+        onRename={handleRenameSubmit}
+        onClose={closeRenameDialog}
+      />
     </div>
   )
 }
- 
- export default InstanceWelcomeView
-
 
+export default InstanceWelcomeView

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

@@ -1,266 +0,0 @@
-import { Show, createMemo, createSignal, onCleanup, onMount, type Component } from "solid-js"
-import type { Accessor } from "solid-js"
-import type { Instance } from "../../types/instance"
-import type { Command } from "../../lib/commands"
-import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
-import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
-import { buildCustomCommandEntries } from "../../lib/command-utils"
-import { getCommands as getInstanceCommands } from "../../stores/commands"
-import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
-import SessionList from "../session-list"
-import KeyboardHint from "../keyboard-hint"
-import InstanceWelcomeView from "../instance-welcome-view"
-import InfoView from "../info-view"
-import AgentSelector from "../agent-selector"
-import ModelSelector from "../model-selector"
-import CommandPalette from "../command-palette"
-import Kbd from "../kbd"
-import ContextUsagePanel from "../session/context-usage-panel"
-import SessionView from "../session/session-view"
-import { getLogger } from "../../lib/logger"
-const log = getLogger("session")
-
-
-interface InstanceShellProps {
-  instance: Instance
-  escapeInDebounce: boolean
-  paletteCommands: Accessor<Command[]>
-  onCloseSession: (sessionId: string) => Promise<void> | void
-  onNewSession: () => Promise<void> | void
-  handleSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
-  handleSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
-  onExecuteCommand: (command: Command) => void
-}
-
-const DEFAULT_SESSION_SIDEBAR_WIDTH = 350
-const MOBILE_SIDEBAR_BREAKPOINT = 1024
-
-const InstanceShell: Component<InstanceShellProps> = (props) => {
-  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
-  const [isCompactLayout, setIsCompactLayout] = createSignal(false)
-  const [isSidebarOpen, setIsSidebarOpen] = createSignal(true)
-  const sidebarId = `session-sidebar-${props.instance.id}`
-  let previousIsCompact = false
-
-  const shouldShowSidebarToggle = () => isCompactLayout() && !isSidebarOpen()
-
-  onMount(() => {
-    if (typeof window === "undefined") return
-
-    const handleResize = () => {
-      const compact = window.innerWidth < MOBILE_SIDEBAR_BREAKPOINT
-      setIsCompactLayout(compact)
-      if (!compact) {
-        setIsSidebarOpen(true)
-      } else if (!previousIsCompact && compact) {
-        setIsSidebarOpen(false)
-      }
-      previousIsCompact = compact
-    }
-
-    handleResize()
-    window.addEventListener("resize", handleResize)
-
-    onCleanup(() => {
-      window.removeEventListener("resize", handleResize)
-    })
-  })
-
-  const activeSessions = createMemo(() => {
-    const parentId = activeParentSessionId().get(props.instance.id)
-    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
-    const sessionFamily = getSessionFamily(props.instance.id, parentId)
-    return new Map(sessionFamily.map((s) => [s.id, s]))
-  })
-
-  const activeSessionIdForInstance = createMemo(() => {
-    return activeSessionMap().get(props.instance.id) || null
-  })
-
-  const activeSessionForInstance = createMemo(() => {
-    const sessionId = activeSessionIdForInstance()
-    if (!sessionId || sessionId === "info") return null
-    return activeSessions().get(sessionId) ?? null
-  })
-
-  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
-  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
-  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
-
-  const keyboardShortcuts = createMemo(() =>
-    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
-      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
-    ),
-  )
-
-  const handleSessionSelect = (sessionId: string) => {
-    setActiveSession(props.instance.id, sessionId)
-  }
-
-  return (
-    <>
-      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
-        <div
-          class="flex flex-1 min-h-0 relative"
-          classList={{ "session-layout-compact": isCompactLayout() }}
-        >
-          <div
-            id={sidebarId}
-            class="session-sidebar flex flex-col bg-surface-secondary"
-            classList={{
-              "session-sidebar-overlay": isCompactLayout(),
-              "session-sidebar-collapsed": isCompactLayout() && !isSidebarOpen(),
-            }}
-            style={!isCompactLayout() ? { width: `${sessionSidebarWidth()}px` } : undefined}
-            aria-hidden={isCompactLayout() && !isSidebarOpen()}
-          >
-            <SessionList
-              instanceId={props.instance.id}
-              sessions={activeSessions()}
-              activeSessionId={activeSessionIdForInstance()}
-              onSelect={handleSessionSelect}
-              onClose={(id) => {
-                const result = props.onCloseSession(id)
-                if (result instanceof Promise) {
-                  void result.catch((error) => log.error("Failed to close session:", error))
-                }
-              }}
-              onNew={() => {
-                const result = props.onNewSession()
-                if (result instanceof Promise) {
-                  void result.catch((error) => log.error("Failed to create session:", error))
-                }
-              }}
-              showHeader
-              showFooter={false}
-              headerContent={
-                <div class="session-sidebar-header">
-                  <div class="session-sidebar-header-row">
-                    <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
-                    <Show when={isCompactLayout()}>
-                      <button
-                        type="button"
-                        class="session-sidebar-close"
-                        onClick={() => setIsSidebarOpen(false)}
-                        aria-label="Close session sidebar"
-                      >
-                        Close
-                      </button>
-                    </Show>
-                  </div>
-                  <div class="session-sidebar-shortcuts">
-                    {keyboardShortcuts().length ? (
-                      <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
-                    ) : null}
-                  </div>
-                </div>
-              }
-              onWidthChange={setSessionSidebarWidth}
-            />
-
-            <div class="session-sidebar-separator border-t border-base" />
-            <Show when={activeSessionForInstance()}>
-              {(activeSession) => (
-                <>
-                  <ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
-                  <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
-                    <AgentSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentAgent={activeSession().agent}
-                      onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
-                    />
-
-                    <div class="sidebar-selector-hints" aria-hidden="true">
-                      <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
-                        <Kbd shortcut="cmd+shift+a" />
-                      </span>
-                      <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
-                        <Kbd shortcut="cmd+shift+m" />
-                      </span>
-                    </div>
-
-                    <ModelSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentModel={activeSession().model}
-                      onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
-                    />
-
-                  </div>
-                </>
-              )}
-            </Show>
-          </div>
-
-          <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
-            <Show
-              when={shouldShowSidebarToggle() && (!activeSessionIdForInstance() || activeSessionIdForInstance() === "info")}
-            >
-              <button
-                type="button"
-                class="session-sidebar-menu-button session-sidebar-menu-button--floating"
-                onClick={() => setIsSidebarOpen(true)}
-                aria-controls={sidebarId}
-                aria-expanded={isSidebarOpen()}
-                aria-label="Open session list"
-              >
-                <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
-              </button>
-            </Show>
-            <Show
-              when={activeSessionIdForInstance() === "info"}
-              fallback={
-                <Show
-                  when={activeSessionIdForInstance()}
-                  keyed
-                  fallback={
-                    <div class="flex items-center justify-center h-full">
-                      <div class="text-center text-gray-500 dark:text-gray-400">
-                        <p class="mb-2">No session selected</p>
-                        <p class="text-sm">Select a session to view messages</p>
-                      </div>
-                    </div>
-                  }
-                >
-                  {(sessionId) => (
-                    <SessionView
-                      sessionId={sessionId}
-                      activeSessions={activeSessions()}
-                      instanceId={props.instance.id}
-                      instanceFolder={props.instance.folder}
-                      escapeInDebounce={props.escapeInDebounce}
-                      showSidebarToggle={shouldShowSidebarToggle()}
-                      onSidebarToggle={() => setIsSidebarOpen(true)}
-                      forceCompactStatusLayout={shouldShowSidebarToggle()}
-                    />
-                  )}
-                </Show>
-              }
-            >
-              <InfoView instanceId={props.instance.id} />
-            </Show>
-          </div>
-
-          <Show when={isCompactLayout() && isSidebarOpen()}>
-            <button
-              type="button"
-              class="session-sidebar-backdrop"
-              aria-label="Close session sidebar"
-              onClick={() => setIsSidebarOpen(false)}
-            />
-          </Show>
-        </div>
-      </Show>
-
-      <CommandPalette
-        open={paletteOpen()}
-        onClose={() => hideCommandPalette(props.instance.id)}
-        commands={instancePaletteCommands()}
-        onExecute={props.onExecuteCommand}
-      />
-    </>
-  )
-}
-
-export default InstanceShell

packages/ui/src/components/markdown.tsx

@@ -1,12 +1,32 @@
-import { createEffect, createSignal, onMount, onCleanup } from "solid-js"
-import { renderMarkdown, onLanguagesLoaded, initMarkdown, decodeHtmlEntities } from "../lib/markdown"
-import type { TextPart } from "../types/message"
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { renderMarkdown, onLanguagesLoaded, decodeHtmlEntities } from "../lib/markdown"
+import { useGlobalCache } from "../lib/hooks/use-global-cache"
+import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
+import { copyToClipboard } from "../lib/clipboard"
+
 const log = getLogger("session")
 
+function hashText(value: string): string {
+  let hash = 2166136261
+  for (let index = 0; index < value.length; index++) {
+    hash ^= value.charCodeAt(index)
+    hash = Math.imul(hash, 16777619)
+  }
+  return (hash >>> 0).toString(16)
+}
+
+function resolvePartVersion(part: TextPart, text: string): string {
+  if (typeof part.version === "number") {
+    return String(part.version)
+  }
+  return `text-${hashText(text)}`
+}
 
 interface MarkdownProps {
   part: TextPart
+  instanceId?: string
+  sessionId?: string
   isDark?: boolean
   size?: "base" | "sm" | "tight"
   disableHighlight?: boolean
@@ -22,18 +42,63 @@ export function Markdown(props: MarkdownProps) {
     Promise.resolve().then(() => props.onRendered?.())
   }
 
-  createEffect(async () => {
+  const resolved = createMemo(() => {
     const part = props.part
     const rawText = typeof part.text === "string" ? part.text : ""
     const text = decodeHtmlEntities(rawText)
-    const dark = Boolean(props.isDark)
-    const themeKey = dark ? "dark" : "light"
+    const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
+    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
+    if (!partId) {
+      throw new Error("Markdown rendering requires a part id")
+    }
+    const version = resolvePartVersion(part, text)
+    return { part, text, themeKey, highlightEnabled, partId, version }
+  })
+
+  const cacheHandle = useGlobalCache({
+    instanceId: () => props.instanceId,
+    sessionId: () => props.sessionId,
+    scope: "markdown",
+    cacheId: () => {
+      const { partId, themeKey, highlightEnabled } = resolved()
+      return `${partId}:${themeKey}:${highlightEnabled ? 1 : 0}`
+    },
+    version: () => resolved().version,
+  })
+
+  createEffect(async () => {
+    const { part, text, themeKey, highlightEnabled, version } = resolved()
 
     latestRequestedText = text
 
-    // Markdown initialization is now handled globally in App.
-    // initMarkdown is idempotent but we avoid per-part calls here.
+    const cacheMatches = (cache: RenderCache | undefined) => {
+      if (!cache) return false
+      return cache.theme === themeKey && cache.mode === version
+    }
+
+    const localCache = part.renderCache
+    if (localCache && cacheMatches(localCache)) {
+      setHtml(localCache.html)
+      notifyRendered()
+      return
+    }
+
+    const globalCache = cacheHandle.get<RenderCache>()
+    if (globalCache && cacheMatches(globalCache)) {
+      setHtml(globalCache.html)
+      part.renderCache = globalCache
+      notifyRendered()
+      return
+    }
+
+    const commitCacheEntry = (renderedHtml: string) => {
+      const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
+      setHtml(renderedHtml)
+      part.renderCache = cacheEntry
+      cacheHandle.set(cacheEntry)
+      notifyRendered()
+    }
 
     if (!highlightEnabled) {
       part.renderCache = undefined
@@ -42,40 +107,26 @@ export function Markdown(props: MarkdownProps) {
         const rendered = await renderMarkdown(text, { suppressHighlight: true })
 
         if (latestRequestedText === text) {
-          setHtml(rendered)
-          notifyRendered()
+          commitCacheEntry(rendered)
         }
       } catch (error) {
         log.error("Failed to render markdown:", error)
         if (latestRequestedText === text) {
-          setHtml(text)
-          notifyRendered()
+          commitCacheEntry(text)
         }
       }
       return
     }
 
-    const cache = part.renderCache
-    if (cache && cache.text === text && cache.theme === themeKey) {
-      setHtml(cache.html)
-      notifyRendered()
-      return
-    }
-
     try {
       const rendered = await renderMarkdown(text)
-
       if (latestRequestedText === text) {
-        setHtml(rendered)
-        part.renderCache = { text, html: rendered, theme: themeKey }
-        notifyRendered()
+        commitCacheEntry(rendered)
       }
     } catch (error) {
       log.error("Failed to render markdown:", error)
       if (latestRequestedText === text) {
-        setHtml(text)
-        part.renderCache = { text, html: text, theme: themeKey }
-        notifyRendered()
+        commitCacheEntry(text)
       }
     }
   })
@@ -90,13 +141,20 @@ export function Markdown(props: MarkdownProps) {
         const code = copyButton.getAttribute("data-code")
         if (code) {
           const decodedCode = decodeURIComponent(code)
-          await navigator.clipboard.writeText(decodedCode)
+          const success = await copyToClipboard(decodedCode)
           const copyText = copyButton.querySelector(".copy-text")
           if (copyText) {
-            copyText.textContent = "Copied!"
-            setTimeout(() => {
-              copyText.textContent = "Copy"
-            }, 2000)
+            if (success) {
+              copyText.textContent = "Copied!"
+              setTimeout(() => {
+                copyText.textContent = "Copy"
+              }, 2000)
+            } else {
+              copyText.textContent = "Failed"
+              setTimeout(() => {
+                copyText.textContent = "Copy"
+              }, 2000)
+            }
           }
         }
       }
@@ -104,15 +162,12 @@ export function Markdown(props: MarkdownProps) {
 
     containerRef?.addEventListener("click", handleClick)
 
-    // Register listener for language loading completion
     const cleanupLanguageListener = onLanguagesLoaded(async () => {
       if (props.disableHighlight) {
         return
       }
 
-      const part = props.part
-      const rawText = typeof part.text === "string" ? part.text : ""
-      const text = decodeHtmlEntities(rawText)
+      const { part, text, themeKey, version } = resolved()
 
       if (latestRequestedText !== text) {
         return
@@ -121,9 +176,10 @@ export function Markdown(props: MarkdownProps) {
       try {
         const rendered = await renderMarkdown(text)
         if (latestRequestedText === text) {
+          const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
           setHtml(rendered)
-          const themeKey = Boolean(props.isDark) ? "dark" : "light"
-          part.renderCache = { text, html: rendered, theme: themeKey }
+          part.renderCache = cacheEntry
+          cacheHandle.set(cacheEntry)
           notifyRendered()
         }
       } catch (error) {

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

@@ -1,19 +1,19 @@
-import { Index, createEffect, createSignal, type Accessor } from "solid-js"
+import { Index, type Accessor } from "solid-js"
 import VirtualItem from "./virtual-item"
 import MessageBlock from "./message-block"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 
+export function getMessageAnchorId(messageId: string) {
+  return `message-anchor-${messageId}`
+}
+
 const VIRTUAL_ITEM_MARGIN_PX = 800
-const ESTIMATED_MESSAGE_HEIGHT = 320
-const INITIAL_FORCE_MIN_ITEMS = 12
-const INITIAL_FORCE_OVERSCAN = 6
 
 interface MessageBlockListProps {
   instanceId: string
   sessionId: string
   store: () => InstanceMessageStore
   messageIds: () => string[]
-  messageIndexMap: () => Map<string, number>
   lastAssistantIndex: () => number
   showThinking: () => boolean
   thinkingDefaultExpanded: () => boolean
@@ -24,80 +24,39 @@ interface MessageBlockListProps {
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
   setBottomSentinel: (element: HTMLDivElement | null) => void
+  suspendMeasurements?: () => boolean
 }
 
 export default function MessageBlockList(props: MessageBlockListProps) {
-  const [initialForceActive, setInitialForceActive] = createSignal(true)
-  const [initialForceInitialized, setInitialForceInitialized] = createSignal(false)
-  const [initialForceStartIndex, setInitialForceStartIndex] = createSignal(0)
-  const [, setInitialForceRemaining] = createSignal(0)
-
-  createEffect(() => {
-    props.instanceId
-    props.sessionId
-    setInitialForceActive(true)
-    setInitialForceInitialized(false)
-    setInitialForceStartIndex(0)
-    setInitialForceRemaining(0)
-  })
-
-  createEffect(() => {
-    if (!initialForceActive() || initialForceInitialized()) return
-    const ids = props.messageIds()
-    if (ids.length === 0) return
-    const viewportHeight = props.scrollContainer()?.clientHeight ?? (typeof window !== "undefined" ? window.innerHeight : 800)
-    const estimatedCount = Math.min(
-      ids.length,
-      Math.max(INITIAL_FORCE_MIN_ITEMS, Math.ceil(viewportHeight / ESTIMATED_MESSAGE_HEIGHT) + INITIAL_FORCE_OVERSCAN),
-    )
-    setInitialForceStartIndex(Math.max(0, ids.length - estimatedCount))
-    setInitialForceRemaining(estimatedCount)
-    setInitialForceInitialized(true)
-  })
-
   return (
     <>
       <Index each={props.messageIds()}>
-        {(messageId) => {
-          const messageIndex = () => props.messageIndexMap().get(messageId()) ?? 0
-          const forceVisible = () => initialForceActive() && messageIndex() >= initialForceStartIndex()
-          const handleMeasured = () => {
-            if (!forceVisible()) return
-            setInitialForceRemaining((value) => {
-              const next = value > 0 ? value - 1 : 0
-              if (next === 0) {
-                setInitialForceActive(false)
-              }
-              return next
-            })
-          }
-          return (
-            <VirtualItem
-              cacheKey={messageId()}
-              scrollContainer={props.scrollContainer}
-              threshold={VIRTUAL_ITEM_MARGIN_PX}
-              placeholderClass="message-stream-placeholder"
-              virtualizationEnabled={() => !props.loading}
-              forceVisible={forceVisible}
-              onMeasured={handleMeasured}
-            >
-              <MessageBlock
-                messageId={messageId()}
-                instanceId={props.instanceId}
-                sessionId={props.sessionId}
-                store={props.store}
-                messageIndexMap={props.messageIndexMap}
-                lastAssistantIndex={props.lastAssistantIndex}
-                showThinking={props.showThinking}
-                thinkingDefaultExpanded={props.thinkingDefaultExpanded}
-                showUsageMetrics={props.showUsageMetrics}
-                onRevert={props.onRevert}
-                onFork={props.onFork}
-                onContentRendered={props.onContentRendered}
-              />
-            </VirtualItem>
-          )
-        }}
+        {(messageId, index) => (
+          <VirtualItem
+            id={getMessageAnchorId(messageId())}
+            cacheKey={messageId()}
+            scrollContainer={props.scrollContainer}
+            threshold={VIRTUAL_ITEM_MARGIN_PX}
+            placeholderClass="message-stream-placeholder"
+            virtualizationEnabled={() => !props.loading}
+            suspendMeasurements={props.suspendMeasurements}
+          >
+            <MessageBlock
+              messageId={messageId()}
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              store={props.store}
+              messageIndex={index}
+              lastAssistantIndex={props.lastAssistantIndex}
+              showThinking={props.showThinking}
+              thinkingDefaultExpanded={props.thinkingDefaultExpanded}
+              showUsageMetrics={props.showUsageMetrics}
+              onRevert={props.onRevert}
+              onFork={props.onFork}
+              onContentRendered={props.onContentRendered}
+            />
+          </VirtualItem>
+        )}
       </Index>
       <div ref={props.setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
     </>

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

@@ -1,4 +1,5 @@
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal } from "solid-js"
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, untrack } from "solid-js"
+import { FoldVertical } from "lucide-solid"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
@@ -81,8 +82,20 @@ interface TaskSessionLocation {
   parentId: string | null
 }
 
-function findTaskSessionLocation(sessionId: string): TaskSessionLocation | null {
+function findTaskSessionLocation(sessionId: string, preferredInstanceId?: string): TaskSessionLocation | null {
   if (!sessionId) return null
+
+  if (preferredInstanceId) {
+    const session = sessions().get(preferredInstanceId)?.get(sessionId)
+    if (session) {
+      return {
+        sessionId: session.id,
+        instanceId: preferredInstanceId,
+        parentId: session.parentId ?? null,
+      }
+    }
+  }
+
   const allSessions = sessions()
   for (const [instanceId, sessionMap] of allSessions) {
     const session = sessionMap?.get(sessionId)
@@ -125,6 +138,10 @@ function makeSessionCacheKey(instanceId: string, sessionId: string) {
   return `${instanceId}:${sessionId}`
 }
 
+export function clearSessionRenderCache(instanceId: string, sessionId: string) {
+  renderCaches.delete(makeSessionCacheKey(instanceId, sessionId))
+}
+
 function getSessionRenderCache(instanceId: string, sessionId: string): SessionRenderCache {
   const key = makeSessionCacheKey(instanceId, sessionId)
   let cache = renderCaches.get(key)
@@ -188,7 +205,15 @@ type ReasoningDisplayItem = {
   defaultExpanded: boolean
 }
 
-type MessageBlockItem = ContentDisplayItem | ToolDisplayItem | StepDisplayItem | ReasoningDisplayItem
+type CompactionDisplayItem = {
+  type: "compaction"
+  key: string
+  part: ClientPart
+  messageInfo?: MessageInfo
+  accentColor?: string
+}
+
+type MessageBlockItem = ContentDisplayItem | ToolDisplayItem | StepDisplayItem | ReasoningDisplayItem | CompactionDisplayItem
 
 interface MessageDisplayBlock {
   record: MessageRecord
@@ -200,7 +225,7 @@ interface MessageBlockProps {
   instanceId: string
   sessionId: string
   store: () => InstanceMessageStore
-  messageIndexMap: () => Map<string, number>
+  messageIndex: number
   lastAssistantIndex: () => number
   showThinking: () => boolean
   thinkingDefaultExpanded: () => boolean
@@ -219,19 +244,14 @@ export default function MessageBlock(props: MessageBlockProps) {
     const current = record()
     if (!current) return null
 
-    const index = props.messageIndexMap().get(current.id) ?? 0
+    const index = props.messageIndex
     const lastAssistantIdx = props.lastAssistantIndex()
     const isQueued = current.role === "user" && (lastAssistantIdx === -1 || index > lastAssistantIdx)
-    const info = messageInfo()
-    const infoTime = (info?.time ?? {}) as { created?: number; updated?: number; completed?: number }
-    const infoTimestamp =
-      typeof infoTime.completed === "number"
-        ? infoTime.completed
-        : typeof infoTime.updated === "number"
-          ? infoTime.updated
-          : infoTime.created ?? 0
-    const infoError = (info as { error?: { name?: string } } | undefined)?.error
-    const infoErrorName = typeof infoError?.name === "string" ? infoError.name : ""
+
+    // Intentionally untracked: messageInfoVersion updates should not trigger
+    // a full message block rebuild; record revision is the invalidation key.
+    const info = untrack(messageInfo)
+
     const cacheSignature = [
       current.id,
       current.revision,
@@ -239,8 +259,6 @@ export default function MessageBlock(props: MessageBlockProps) {
       props.showThinking() ? 1 : 0,
       props.thinkingDefaultExpanded() ? 1 : 0,
       props.showUsageMetrics() ? 1 : 0,
-      infoTimestamp,
-      infoErrorName,
     ].join("|")
 
     const cachedBlock = sessionCache.messageBlocks.get(current.id)
@@ -326,6 +344,21 @@ export default function MessageBlock(props: MessageBlockProps) {
         return
       }
 
+      if (part.type === "compaction") {
+        flushContent()
+        const key = `${current.id}:${part.id ?? partIndex}:compaction`
+        const isAuto = Boolean((part as any)?.auto)
+        items.push({
+          type: "compaction",
+          key,
+          part,
+          messageInfo: info,
+          accentColor: isAuto ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR,
+        })
+        lastAccentColor = isAuto ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR
+        return
+      }
+
       if (part.type === "step-start") {
         flushContent()
         return
@@ -419,7 +452,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                     const hasToolState =
                       Boolean(toolState) && (isToolStateRunning(toolState) || isToolStateCompleted(toolState) || isToolStateError(toolState))
                     const taskSessionId = hasToolState ? extractTaskSessionId(toolState) : ""
-                    const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId) : null
+                    const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId, props.instanceId) : null
                     const handleGoToTaskSession = (event: MouseEvent) => {
                       event.preventDefault()
                       event.stopPropagation()
@@ -449,7 +482,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                         </div>
                         <ToolCall
                           toolCall={toolItem.toolPart}
-                          toolCallId={toolItem.key}
+                          toolCallId={toolItem.toolPart.id}
                           messageId={toolItem.messageId}
                           messageVersion={toolItem.messageVersion}
                           partVersion={toolItem.partVersion}
@@ -473,6 +506,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                     borderColor={(item as StepDisplayItem).accentColor}
                   />
                 </Match>
+                <Match when={item.type === "compaction"}>
+                  <CompactionCard part={(item as CompactionDisplayItem).part} messageInfo={(item as CompactionDisplayItem).messageInfo} borderColor={(item as CompactionDisplayItem).accentColor} />
+                </Match>
                 <Match when={item.type === "reasoning"}>
                   <ReasoningCard
                     part={(item as ReasoningDisplayItem).part}
@@ -501,6 +537,29 @@ interface StepCardProps {
   borderColor?: string
 }
 
+function CompactionCard(props: { part: ClientPart; messageInfo?: MessageInfo; borderColor?: string }) {
+  const isAuto = () => Boolean((props.part as any)?.auto)
+  const label = () => (isAuto() ? "Session auto-compacted" : "Session compacted by you")
+  const borderColor = () => props.borderColor ?? (isAuto() ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR)
+
+  const containerClass = () =>
+    `message-compaction-card ${isAuto() ? "message-compaction-card--auto" : "message-compaction-card--manual"}`
+
+  return (
+    <div
+      class={containerClass()}
+      style={{ "border-left": `4px solid ${borderColor()}` }}
+      role="status"
+      aria-label="Session compaction"
+    >
+      <div class="message-compaction-row">
+        <FoldVertical class="message-compaction-icon w-4 h-4" aria-hidden="true" />
+        <span class="message-compaction-label">{label()}</span>
+      </div>
+    </div>
+  )
+}
+
 function StepCard(props: StepCardProps) {
   const timestamp = () => {
     const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()

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

@@ -1,8 +1,9 @@
-import { For, Show } from "solid-js"
+import { For, Show, createSignal } from "solid-js"
 import type { MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
+import { copyToClipboard } from "../lib/clipboard"
 
 interface MessageItemProps {
   record: MessageRecord
@@ -15,9 +16,10 @@ interface MessageItemProps {
   onFork?: (messageId?: string) => void
   showAgentMeta?: boolean
   onContentRendered?: () => void
- }
- 
- export default function MessageItem(props: MessageItemProps) {
+}
+
+export default function MessageItem(props: MessageItemProps) {
+  const [copied, setCopied] = createSignal(false)
 
   const isUser = () => props.record.role === "user"
   const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
@@ -36,7 +38,7 @@ interface MessageItemProps {
   }
 
   const messageParts = () => props.parts
- 
+
   const fileAttachments = () =>
     messageParts().filter((part): part is FilePart => part?.type === "file" && typeof (part as FilePart).url === "string")
 
@@ -143,6 +145,22 @@ interface MessageItemProps {
     }
   }
 
+  const getRawContent = () => {
+    return props.parts
+      .filter(part => part.type === "text")
+      .map(part => (part as { text?: string }).text || "")
+      .filter(text => text.trim().length > 0)
+      .join("\n\n")
+  }
+
+  const handleCopy = async () => {
+    const content = getRawContent()
+    if (!content) return
+    const success = await copyToClipboard(content)
+    setCopied(success)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
   if (!isUser() && !hasContent()) {
     return null
   }
@@ -218,8 +236,30 @@ interface MessageItemProps {
                   Fork
                 </button>
               </Show>
+              <button
+                class="message-action-button"
+                onClick={handleCopy}
+                title="Copy message"
+                aria-label="Copy message"
+              >
+                <Show when={copied()} fallback="Copy">
+                  Copied!
+                </Show>
+              </button>
             </div>
           </Show>
+          <Show when={!isUser()}>
+            <button
+              class="message-action-button"
+              onClick={handleCopy}
+              title="Copy message"
+              aria-label="Copy message"
+            >
+              <Show when={copied()} fallback="Copy">
+                Copied!
+              </Show>
+            </button>
+          </Show>
           <time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time>
         </div>
 

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

@@ -102,6 +102,8 @@ interface MessagePartProps {
              >
               <Markdown
                 part={createTextPartForMarkdown()}
+                instanceId={props.instanceId}
+                sessionId={props.sessionId}
                 isDark={isDark()}
                 size={isAssistantMessage() ? "tight" : "base"}
                 onRendered={props.onRendered}

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

@@ -0,0 +1,32 @@
+import type { Component } from "solid-js"
+import MessageBlock from "./message-block"
+import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+
+interface MessagePreviewProps {
+  instanceId: string
+  sessionId: string
+  messageId: string
+  store: () => InstanceMessageStore
+}
+
+const MessagePreview: Component<MessagePreviewProps> = (props) => {
+  const lastAssistantIndex = () => 0
+
+  return (
+    <div class="message-preview message-stream">
+      <MessageBlock
+        messageId={props.messageId}
+        instanceId={props.instanceId}
+        sessionId={props.sessionId}
+        store={props.store}
+        messageIndex={0}
+        lastAssistantIndex={lastAssistantIndex}
+        showThinking={() => false}
+        thinkingDefaultExpanded={() => false}
+        showUsageMetrics={() => false}
+      />
+    </div>
+  )
+}
+
+export default MessagePreview

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

@@ -1,26 +1,20 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
 import Kbd from "./kbd"
-import MessageBlockList from "./message-block-list"
-import MessageListHeader from "./message-list-header"
+import MessageBlockList, { getMessageAnchorId } from "./message-block-list"
+import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
-import { showCommandPalette } from "../stores/command-palette"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useScrollCache } from "../lib/hooks/use-scroll-cache"
-import { sseManager } from "../lib/sse-manager"
-import { formatTokenTotal } from "../lib/formatters"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 
 const SCROLL_SCOPE = "session"
 const SCROLL_SENTINEL_MARGIN_PX = 48
 const USER_SCROLL_INTENT_WINDOW_MS = 600
 const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+const QUOTE_SELECTION_MAX_LENGTH = 2000
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
-function formatTokens(tokens: number): string {
-  return formatTokenTotal(tokens)
-}
-
 export interface MessageSectionProps {
   instanceId: string
   sessionId: string
@@ -31,11 +25,14 @@ export interface MessageSectionProps {
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
+  onQuoteSelection?: (text: string, mode: "quote" | "code") => void
+  isActive?: boolean
 }
 
 export default function MessageSection(props: MessageSectionProps) {
   const { preferences } = useConfig()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
+  const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
   const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
 
@@ -72,18 +69,12 @@ export default function MessageSection(props: MessageSectionProps) {
     return `${showThinking}|${thinkingExpansion}|${showUsage}`
   })
 
-  const connectionStatus = () => sseManager.getStatus(props.instanceId)
-  const handleCommandPaletteClick = () => {
-    showCommandPalette(props.instanceId)
+  const handleTimelineSegmentClick = (segment: TimelineSegment) => {
+    if (typeof document === "undefined") return
+    const anchor = document.getElementById(getMessageAnchorId(segment.messageId))
+    anchor?.scrollIntoView({ block: "start", behavior: "smooth" })
   }
-
-  const messageIndexMap = createMemo(() => {
-    const map = new Map<string, number>()
-    const ids = messageIds()
-    ids.forEach((id, index) => map.set(id, index))
-    return map
-  })
-
+ 
   const lastAssistantIndex = createMemo(() => {
     const ids = messageIds()
     const resolvedStore = store()
@@ -95,8 +86,59 @@ export default function MessageSection(props: MessageSectionProps) {
     }
     return -1
   })
+ 
+  const [timelineSegments, setTimelineSegments] = createSignal<TimelineSegment[]>([])
+  const hasTimelineSegments = () => timelineSegments().length > 0
 
+  const seenTimelineMessageIds = new Set<string>()
+  const seenTimelineSegmentKeys = new Set<string>()
+
+  function makeTimelineKey(segment: TimelineSegment) {
+    return `${segment.messageId}:${segment.id}:${segment.type}`
+  }
+
+  function seedTimeline() {
+    seenTimelineMessageIds.clear()
+    seenTimelineSegmentKeys.clear()
+    const ids = untrack(messageIds)
+    const resolvedStore = untrack(store)
+    const segments: TimelineSegment[] = []
+    ids.forEach((messageId) => {
+      const record = resolvedStore.getMessage(messageId)
+      if (!record) return
+      seenTimelineMessageIds.add(messageId)
+      const built = buildTimelineSegments(props.instanceId, record)
+      built.forEach((segment) => {
+        const key = makeTimelineKey(segment)
+        if (seenTimelineSegmentKeys.has(key)) return
+        seenTimelineSegmentKeys.add(key)
+        segments.push(segment)
+      })
+    })
+    setTimelineSegments(segments)
+  }
+
+  function appendTimelineForMessage(messageId: string) {
+    const record = untrack(() => store().getMessage(messageId))
+    if (!record) return
+    const built = buildTimelineSegments(props.instanceId, record)
+    if (built.length === 0) return
+    const newSegments: TimelineSegment[] = []
+    built.forEach((segment) => {
+      const key = makeTimelineKey(segment)
+      if (seenTimelineSegmentKeys.has(key)) return
+      seenTimelineSegmentKeys.add(key)
+      newSegments.push(segment)
+    })
+    if (newSegments.length > 0) {
+      setTimelineSegments((prev) => [...prev, ...newSegments])
+    }
+  }
+  const [activeMessageId, setActiveMessageId] = createSignal<string | null>(null)
+ 
   const changeToken = createMemo(() => String(sessionRevision()))
+  const isActive = createMemo(() => props.isActive !== false)
+
 
   const scrollCache = useScrollCache({
     instanceId: () => props.instanceId,
@@ -106,21 +148,34 @@ export default function MessageSection(props: MessageSectionProps) {
 
   const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
   const [topSentinel, setTopSentinel] = createSignal<HTMLDivElement | null>(null)
-  const [bottomSentinel, setBottomSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal<HTMLDivElement | null>(null)
+  const bottomSentinel = () => bottomSentinelSignal()
+  const setBottomSentinel = (element: HTMLDivElement | null) => {
+    setBottomSentinelSignal(element)
+    resolvePendingActiveScroll()
+  }
   const [autoScroll, setAutoScroll] = createSignal(true)
   const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
   const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
   const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
+  const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
 
   let containerRef: HTMLDivElement | undefined
+  let shellRef: HTMLDivElement | undefined
   let pendingScrollFrame: number | null = null
+
   let pendingAnchorScroll: number | null = null
+
   let pendingScrollPersist: number | null = null
   let userScrollIntentUntil = 0
   let detachScrollIntentListeners: (() => void) | undefined
   let hasRestoredScroll = false
   let suppressAutoScrollOnce = false
+  let pendingActiveScroll = false
+  let scrollToBottomFrame: number | null = null
+  let scrollToBottomDelayedFrame: number | null = null
+  let pendingInitialScroll = true
 
   function markUserScrollIntent() {
     const now = typeof performance !== "undefined" ? performance.now() : Date.now()
@@ -160,12 +215,27 @@ export default function MessageSection(props: MessageSectionProps) {
     containerRef = element || undefined
     setScrollElement(containerRef)
     attachScrollIntentListeners(containerRef)
+    if (!containerRef) {
+      clearQuoteSelection()
+      return
+    }
+    resolvePendingActiveScroll()
   }
 
+  function setShellElement(element: HTMLDivElement | null) {
+    shellRef = element || undefined
+    if (!shellRef) {
+      clearQuoteSelection()
+    }
+  }
+ 
   function updateScrollIndicatorsFromVisibility() {
+
     const hasItems = messageIds().length > 0
-    setShowScrollBottomButton(hasItems && !bottomSentinelVisible())
-    setShowScrollTopButton(hasItems && !topSentinelVisible())
+    const bottomVisible = bottomSentinelVisible()
+    const topVisible = topSentinelVisible()
+    setShowScrollBottomButton(hasItems && !bottomVisible)
+    setShowScrollTopButton(hasItems && !topVisible)
   }
 
   function scheduleScrollPersist() {
@@ -173,21 +243,59 @@ export default function MessageSection(props: MessageSectionProps) {
     pendingScrollPersist = requestAnimationFrame(() => {
       pendingScrollPersist = null
       if (!containerRef) return
-      scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
     })
   }
  
-  function scrollToBottom(immediate = false) {
+  function scrollToBottom(immediate = false, options?: { suppressAutoAnchor?: boolean }) {
     if (!containerRef) return
     const sentinel = bottomSentinel()
     const behavior = immediate ? "auto" : "smooth"
-    if (!immediate) {
+    const suppressAutoAnchor = options?.suppressAutoAnchor ?? !immediate
+    if (suppressAutoAnchor) {
       suppressAutoScrollOnce = true
     }
     sentinel?.scrollIntoView({ block: "end", inline: "nearest", behavior })
     setAutoScroll(true)
     scheduleScrollPersist()
   }
+
+  function clearScrollToBottomFrames() {
+    if (scrollToBottomFrame !== null) {
+      cancelAnimationFrame(scrollToBottomFrame)
+      scrollToBottomFrame = null
+    }
+    if (scrollToBottomDelayedFrame !== null) {
+      cancelAnimationFrame(scrollToBottomDelayedFrame)
+      scrollToBottomDelayedFrame = null
+    }
+  }
+
+  function requestScrollToBottom(immediate = true) {
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    if (!containerRef || !bottomSentinel()) {
+      pendingActiveScroll = true
+      return
+    }
+    pendingActiveScroll = false
+    clearScrollToBottomFrames()
+    scrollToBottomFrame = requestAnimationFrame(() => {
+      scrollToBottomFrame = null
+      scrollToBottomDelayedFrame = requestAnimationFrame(() => {
+        scrollToBottomDelayedFrame = null
+        scrollToBottom(immediate)
+      })
+    })
+  }
+
+  function resolvePendingActiveScroll() {
+    if (!pendingActiveScroll) return
+    if (!isActive()) return
+    requestScrollToBottom(true)
+  }
  
   function scrollToTop(immediate = false) {
     if (!containerRef) return
@@ -200,8 +308,15 @@ export default function MessageSection(props: MessageSectionProps) {
 
   function scheduleAnchorScroll(immediate = false) {
     if (!autoScroll()) return
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
     const sentinel = bottomSentinel()
-    if (!sentinel) return
+    if (!sentinel) {
+      pendingActiveScroll = true
+      return
+    }
     if (pendingAnchorScroll !== null) {
       cancelAnimationFrame(pendingAnchorScroll)
       pendingAnchorScroll = null
@@ -212,11 +327,81 @@ export default function MessageSection(props: MessageSectionProps) {
     })
   }
 
+  function clearQuoteSelection() {
+    setQuoteSelection(null)
+  }
+
+  function isSelectionWithinStream(range: Range | null) {
+    if (!range || !containerRef) return false
+    const node = range.commonAncestorContainer
+    if (!node) return false
+    return containerRef.contains(node)
+  }
+
+  function updateQuoteSelectionFromSelection() {
+    if (!props.onQuoteSelection || typeof window === "undefined") {
+      clearQuoteSelection()
+      return
+    }
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      clearQuoteSelection()
+      return
+    }
+    const range = selection.getRangeAt(0)
+    if (!isSelectionWithinStream(range)) {
+      clearQuoteSelection()
+      return
+    }
+    const shell = shellRef
+    if (!shell) {
+      clearQuoteSelection()
+      return
+    }
+    const rawText = selection.toString().trim()
+    if (!rawText) {
+      clearQuoteSelection()
+      return
+    }
+    const limited =
+      rawText.length > QUOTE_SELECTION_MAX_LENGTH ? rawText.slice(0, QUOTE_SELECTION_MAX_LENGTH).trimEnd() : rawText
+    if (!limited) {
+      clearQuoteSelection()
+      return
+    }
+    const rects = range.getClientRects()
+    const anchorRect = rects.length > 0 ? rects[0] : range.getBoundingClientRect()
+    const shellRect = shell.getBoundingClientRect()
+    const relativeTop = Math.max(anchorRect.top - shellRect.top - 40, 8)
+    const maxLeft = Math.max(shell.clientWidth - 180, 8)
+    const relativeLeft = Math.min(Math.max(anchorRect.left - shellRect.left, 8), maxLeft)
+    setQuoteSelection({ text: limited, top: relativeTop, left: relativeLeft })
+  }
+
+  function handleStreamMouseUp() {
+    updateQuoteSelectionFromSelection()
+  }
+
+  function handleQuoteSelectionRequest(mode: "quote" | "code") {
+    const info = quoteSelection()
+    if (!info || !props.onQuoteSelection) return
+    props.onQuoteSelection(info.text, mode)
+    clearQuoteSelection()
+    if (typeof window !== "undefined") {
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+    }
+  }
+ 
   function handleContentRendered() {
+    if (props.loading) {
+      return
+    }
     scheduleAnchorScroll()
   }
 
   function handleScroll() {
+
     if (!containerRef) return
     if (pendingScrollFrame !== null) {
       cancelAnimationFrame(pendingScrollFrame)
@@ -235,13 +420,184 @@ export default function MessageSection(props: MessageSectionProps) {
         }
       }
 
+      clearQuoteSelection()
       scheduleScrollPersist()
     })
+
   }
 
+
   createEffect(() => {
     if (props.registerScrollToBottom) {
-      props.registerScrollToBottom(() => scrollToBottom(true))
+      props.registerScrollToBottom(() => requestScrollToBottom(true))
+    }
+  })
+
+  let lastActiveState = false
+  createEffect(() => {
+    const active = isActive()
+    if (active) {
+      resolvePendingActiveScroll()
+      if (!lastActiveState && autoScroll()) {
+        requestScrollToBottom(true)
+      }
+    } else if (autoScroll()) {
+      pendingActiveScroll = true
+    }
+    lastActiveState = active
+  })
+
+  createEffect(() => {
+    const loading = Boolean(props.loading)
+    if (loading) {
+      pendingInitialScroll = true
+      return
+    }
+    if (!pendingInitialScroll) {
+      return
+    }
+    const container = scrollElement()
+    const sentinel = bottomSentinel()
+    if (!container || !sentinel || messageIds().length === 0) {
+      return
+    }
+    pendingInitialScroll = false
+    requestScrollToBottom(true)
+  })
+
+  let previousTimelineIds: string[] = []
+  let previousLastTimelineMessageId: string | null = null
+  let previousLastTimelinePartCount = 0
+
+  createEffect(() => {
+    const loading = Boolean(props.loading)
+    const ids = messageIds()
+
+    if (loading) {
+      previousTimelineIds = []
+      previousLastTimelineMessageId = null
+      previousLastTimelinePartCount = 0
+      setTimelineSegments([])
+      seenTimelineMessageIds.clear()
+      seenTimelineSegmentKeys.clear()
+      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
+        }
+      }
+      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
+        }
+      }
+    }
+
+    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)
+      })
+    }
+
+    previousTimelineIds = ids.slice()
+  })
+
+  createEffect(() => {
+    if (props.loading) return
+    const ids = messageIds()
+    if (ids.length === 0) return
+    const lastId = ids[ids.length - 1]
+    if (!lastId) return
+    const record = store().getMessage(lastId)
+    if (!record) return
+    const partCount = record.partIds.length
+    if (lastId === previousLastTimelineMessageId && partCount === previousLastTimelinePartCount) {
+      return
+    }
+    previousLastTimelineMessageId = lastId
+    previousLastTimelinePartCount = partCount
+    const built = buildTimelineSegments(props.instanceId, record)
+    const newSegments: TimelineSegment[] = []
+    built.forEach((segment) => {
+      const key = makeTimelineKey(segment)
+      if (seenTimelineSegmentKeys.has(key)) return
+      seenTimelineSegmentKeys.add(key)
+      newSegments.push(segment)
+    })
+    if (newSegments.length > 0) {
+      setTimelineSegments((prev) => [...prev, ...newSegments])
+    }
+  })
+
+  createEffect(() => {
+    if (!props.onQuoteSelection) {
+      clearQuoteSelection()
+    }
+  })
+
+
+  createEffect(() => {
+    if (typeof document === "undefined") return
+    const handleSelectionChange = () => updateQuoteSelectionFromSelection()
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!shellRef) return
+      if (!shellRef.contains(event.target as Node)) {
+        clearQuoteSelection()
+      }
+    }
+    document.addEventListener("selectionchange", handleSelectionChange)
+    document.addEventListener("pointerdown", handlePointerDown)
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", handleSelectionChange)
+      document.removeEventListener("pointerdown", handlePointerDown)
+    })
+  })
+ 
+  createEffect(() => {
+    if (props.loading) {
+      clearQuoteSelection()
     }
   })
 
@@ -250,16 +606,17 @@ export default function MessageSection(props: MessageSectionProps) {
     const loading = props.loading
     if (!target || loading || hasRestoredScroll) return
 
-    scrollCache.restore(target, {
-      onApplied: (snapshot) => {
-        if (snapshot) {
-          setAutoScroll(snapshot.atBottom)
-        } else {
-          setAutoScroll(bottomSentinelVisible())
-        }
-        updateScrollIndicatorsFromVisibility()
-      },
-    })
+
+    // scrollCache.restore(target, {
+    //   onApplied: (snapshot) => {
+    //     if (snapshot) {
+    //       setAutoScroll(snapshot.atBottom)
+    //     } else {
+    //       setAutoScroll(bottomSentinelVisible())
+    //     }
+    //     updateScrollIndicatorsFromVisibility()
+    //   },
+    // })
 
     hasRestoredScroll = true
   })
@@ -329,9 +686,44 @@ export default function MessageSection(props: MessageSectionProps) {
     observer.observe(bottomTarget)
     onCleanup(() => observer.disconnect())
   })
-
+ 
+  createEffect(() => {
+    const container = scrollElement()
+    const ids = messageIds()
+    if (!container || ids.length === 0) return
+    if (typeof document === "undefined") return
+ 
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let best: IntersectionObserverEntry | null = null
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
+            best = entry
+          }
+        }
+        if (best) {
+          const anchorId = (best.target as HTMLElement).id
+          const messageId = anchorId.startsWith("message-anchor-") ? anchorId.slice("message-anchor-".length) : anchorId
+          setActiveMessageId((current) => (current === messageId ? current : messageId))
+        }
+      },
+      { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 },
+    )
+ 
+    ids.forEach((messageId) => {
+      const anchor = document.getElementById(getMessageAnchorId(messageId))
+      if (anchor) {
+        observer.observe(anchor)
+      }
+    })
+ 
+    onCleanup(() => observer.disconnect())
+  })
+ 
   onCleanup(() => {
 
+
     if (pendingScrollFrame !== null) {
       cancelAnimationFrame(pendingScrollFrame)
     }
@@ -341,97 +733,126 @@ export default function MessageSection(props: MessageSectionProps) {
     if (pendingAnchorScroll !== null) {
       cancelAnimationFrame(pendingAnchorScroll)
     }
+    clearScrollToBottomFrames()
     if (detachScrollIntentListeners) {
       detachScrollIntentListeners()
     }
     if (containerRef) {
-      scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+      // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
     }
+    clearQuoteSelection()
   })
 
   return (
     <div class="message-stream-container">
-      <MessageListHeader
-        usedTokens={tokenStats().used}
-        availableTokens={tokenStats().avail}
-        connectionStatus={connectionStatus()}
-        onCommandPalette={handleCommandPaletteClick}
-        formatTokens={formatTokens}
-        showSidebarToggle={props.showSidebarToggle}
-        onSidebarToggle={props.onSidebarToggle}
-        forceCompactStatusLayout={props.forceCompactStatusLayout}
-      />
-
-      <div class="message-stream" ref={setContainerRef} onScroll={handleScroll}>
-        <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
-        <Show when={!props.loading && messageIds().length === 0}>
-          <div class="empty-state">
-            <div class="empty-state-content">
-              <div class="flex flex-col items-center gap-3 mb-6">
-                <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
-                <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
+      <div class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}>
+        <div class="message-stream-shell" ref={setShellElement}>
+          <div class="message-stream" ref={setContainerRef} onScroll={handleScroll} onMouseUp={handleStreamMouseUp}>
+            <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
+            <Show when={!props.loading && messageIds().length === 0}>
+              <div class="empty-state">
+                <div class="empty-state-content">
+                  <div class="flex flex-col items-center gap-3 mb-6">
+                    <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
+                    <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
+                  </div>
+                  <h3>Start a conversation</h3>
+                  <p>Type a message below or open the Command Palette:</p>
+                  <ul>
+                    <li>
+                      <span>Command Palette</span>
+                      <Kbd shortcut="cmd+shift+p" class="ml-2" />
+                    </li>
+                    <li>Ask about your codebase</li>
+                    <li>
+                      Attach files with <code>@</code>
+                    </li>
+                  </ul>
+                </div>
               </div>
-              <h3>Start a conversation</h3>
-              <p>Type a message below or open the Command Palette:</p>
-              <ul>
-                <li>
-                  <span>Command Palette</span>
-                  <Kbd shortcut="cmd+shift+p" class="ml-2" />
-                </li>
-                <li>Ask about your codebase</li>
-                <li>
-                  Attach files with <code>@</code>
-                </li>
-              </ul>
+            </Show>
+ 
+            <Show when={props.loading}>
+              <div class="loading-state">
+                <div class="spinner" />
+                <p>Loading messages...</p>
+              </div>
+            </Show>
+ 
+            <MessageBlockList
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              store={store}
+              messageIds={messageIds}
+              lastAssistantIndex={lastAssistantIndex}
+              showThinking={() => preferences().showThinkingBlocks}
+              thinkingDefaultExpanded={() => (preferences().thinkingBlocksExpansion ?? "expanded") === "expanded"}
+              showUsageMetrics={showUsagePreference}
+              scrollContainer={scrollElement}
+              loading={props.loading}
+              onRevert={props.onRevert}
+              onFork={props.onFork}
+              onContentRendered={handleContentRendered}
+              setBottomSentinel={setBottomSentinel}
+              suspendMeasurements={() => !isActive()}
+            />
+
+
+          </div>
+ 
+          <Show when={showScrollTopButton() || showScrollBottomButton()}>
+            <div class="message-scroll-button-wrapper">
+              <Show when={showScrollTopButton()}>
+                <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label="Scroll to first message">
+                  <span class="message-scroll-icon" aria-hidden="true">↑</span>
+                </button>
+              </Show>
+              <Show when={showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => scrollToBottom(false, { suppressAutoAnchor: false })}
+                  aria-label="Scroll to latest message"
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">↓</span>
+                </button>
+              </Show>
             </div>
-          </div>
-        </Show>
-
-        <Show when={props.loading}>
-          <div class="loading-state">
-            <div class="spinner" />
-            <p>Loading messages...</p>
-          </div>
-        </Show>
-
-        <MessageBlockList
-          instanceId={props.instanceId}
-          sessionId={props.sessionId}
-          store={store}
-          messageIds={messageIds}
-          messageIndexMap={messageIndexMap}
-          lastAssistantIndex={lastAssistantIndex}
-          showThinking={() => preferences().showThinkingBlocks}
-          thinkingDefaultExpanded={() => (preferences().thinkingBlocksExpansion ?? "expanded") === "expanded"}
-          showUsageMetrics={showUsagePreference}
-          scrollContainer={scrollElement}
-          loading={props.loading}
-          onRevert={props.onRevert}
-          onFork={props.onFork}
-          onContentRendered={handleContentRendered}
-          setBottomSentinel={setBottomSentinel}
-        />
-      </div>
-
-      <Show when={showScrollTopButton() || showScrollBottomButton()}>
-        <div class="message-scroll-button-wrapper">
-          <Show when={showScrollTopButton()}>
-            <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label="Scroll to first message">
-              <span class="message-scroll-icon" aria-hidden="true">↑</span>
-            </button>
           </Show>
-          <Show when={showScrollBottomButton()}>
-            <button
-              type="button"
-              class="message-scroll-button"
-              onClick={() => scrollToBottom()}
-              aria-label="Scroll to latest message"
-            >
-              <span class="message-scroll-icon" aria-hidden="true">↓</span>
-            </button>
+
+          <Show when={quoteSelection()}>
+            {(selection) => (
+              <div
+                class="message-quote-popover"
+                style={{ top: `${selection().top}px`, left: `${selection().left}px` }}
+              >
+                <div class="message-quote-button-group">
+                  <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("quote")}>
+                    Add as quote
+                  </button>
+                  <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("code")}>
+                    Add as code
+                  </button>
+                </div>
+              </div>
+            )}
           </Show>
         </div>
-      </Show>
+ 
+        <Show when={hasTimelineSegments()}>
+          <div class="message-timeline-sidebar">
+            <MessageTimeline
+              segments={timelineSegments()}
+              onSegmentClick={handleTimelineSegmentClick}
+              activeMessageId={activeMessageId()}
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              showToolSegments={showTimelineToolsPreference()}
+            />
+          </div>
+        </Show>
+      </div>
+
     </div>
   )
 }

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

@@ -0,0 +1,441 @@
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component } from "solid-js"
+import MessagePreview from "./message-preview"
+import { messageStoreBus } from "../stores/message-v2/bus"
+import type { ClientPart } from "../types/message"
+import type { MessageRecord } from "../stores/message-v2/types"
+import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
+import { getToolIcon } from "./tool-call/utils"
+import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
+
+export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
+
+export interface TimelineSegment {
+  id: string
+  messageId: string
+  type: TimelineSegmentType
+  label: string
+  tooltip: string
+  shortLabel?: string
+  variant?: "auto" | "manual"
+  toolPartIds?: string[]
+}
+
+interface MessageTimelineProps {
+  segments: TimelineSegment[]
+  onSegmentClick?: (segment: TimelineSegment) => void
+  activeMessageId?: string | null
+  instanceId: string
+  sessionId: string
+  showToolSegments?: boolean
+}
+
+const SEGMENT_LABELS: Record<TimelineSegmentType, string> = {
+  user: "You",
+  assistant: "Asst",
+  tool: "Tool",
+  compaction: "Compaction",
+}
+
+const TOOL_FALLBACK_LABEL = "Tool Call"
+const MAX_TOOLTIP_LENGTH = 220
+
+type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+interface PendingSegment {
+  type: TimelineSegmentType
+  texts: string[]
+  reasoningTexts: string[]
+  toolTitles: string[]
+  toolTypeLabels: string[]
+  toolIcons: string[]
+  toolPartIds: string[]
+  hasPrimaryText: boolean
+}
+
+function truncateText(value: string): string {
+  if (value.length <= MAX_TOOLTIP_LENGTH) {
+    return value
+  }
+  return `${value.slice(0, MAX_TOOLTIP_LENGTH - 1).trimEnd()}…`
+}
+
+function collectReasoningText(part: ClientPart): string {
+  const stringifySegment = (segment: unknown): string => {
+    if (typeof segment === "string") {
+      return segment
+    }
+    if (segment && typeof segment === "object") {
+      const obj = segment as { text?: unknown; value?: unknown; content?: unknown[] }
+      const parts: string[] = []
+      if (typeof obj.text === "string") {
+        parts.push(obj.text)
+      }
+      if (typeof obj.value === "string") {
+        parts.push(obj.value)
+      }
+      if (Array.isArray(obj.content)) {
+        parts.push(obj.content.map((entry) => stringifySegment(entry)).join("\n"))
+      }
+      return parts.filter(Boolean).join("\n")
+    }
+    return ""
+  }
+
+  if (typeof (part as any)?.text === "string") {
+    return (part as any).text
+  }
+  if (Array.isArray((part as any)?.content)) {
+    return (part as any).content.map((entry: unknown) => stringifySegment(entry)).join("\n")
+  }
+  return ""
+}
+
+function collectTextFromPart(part: ClientPart): string {
+  if (!part) return ""
+  if (typeof (part as any).text === "string") {
+    return (part as any).text as string
+  }
+  if (part.type === "reasoning") {
+    return collectReasoningText(part)
+  }
+  if (Array.isArray((part as any)?.content)) {
+    return ((part as any).content as unknown[])
+      .map((entry) => (typeof entry === "string" ? entry : ""))
+      .filter(Boolean)
+      .join("\n")
+  }
+  if (part.type === "file") {
+    const filename = (part as any)?.filename
+    return typeof filename === "string" && filename.length > 0 ? `[File] ${filename}` : "Attachment"
+  }
+  return ""
+}
+
+function getToolTitle(part: ToolCallPart): string {
+  const metadata = (((part as unknown as { state?: { metadata?: unknown } })?.state?.metadata) || {}) as { title?: unknown }
+  const title = typeof metadata.title === "string" && metadata.title.length > 0 ? metadata.title : undefined
+  if (title) return title
+  if (typeof part.tool === "string" && part.tool.length > 0) {
+    return part.tool
+  }
+  return TOOL_FALLBACK_LABEL
+}
+
+function getToolTypeLabel(part: ToolCallPart): string {
+  if (typeof part.tool === "string" && part.tool.trim().length > 0) {
+    return part.tool.trim().slice(0, 4)
+  }
+  return TOOL_FALLBACK_LABEL.slice(0, 4)
+}
+
+function formatTextsTooltip(texts: string[], fallback: string): string {
+  const combined = texts
+    .map((text) => text.trim())
+    .filter((text) => text.length > 0)
+    .join("\n\n")
+  if (combined.length > 0) {
+    return truncateText(combined)
+  }
+  return fallback
+}
+
+function formatToolTooltip(titles: string[]): string {
+  if (titles.length === 0) {
+    return TOOL_FALLBACK_LABEL
+  }
+  return truncateText(`${TOOL_FALLBACK_LABEL}: ${titles.join(", ")}`)
+}
+
+export function buildTimelineSegments(instanceId: string, record: MessageRecord): TimelineSegment[] {
+  if (!record) return []
+  const { orderedParts } = buildRecordDisplayData(instanceId, record)
+  if (!orderedParts || orderedParts.length === 0) {
+    return []
+  }
+
+  const result: TimelineSegment[] = []
+  let segmentIndex = 0
+  let pending: PendingSegment | null = null
+  const flushPending = () => {
+    if (!pending) return
+    if (pending.type === "assistant" && !pending.hasPrimaryText) {
+      pending = null
+      return
+    }
+    const isToolSegment = pending.type === "tool"
+    const label = isToolSegment
+      ? pending.toolTypeLabels[0] || TOOL_FALLBACK_LABEL.slice(0, 4)
+      : SEGMENT_LABELS[pending.type]
+    const shortLabel = isToolSegment ? pending.toolIcons[0] || getToolIcon("tool") : undefined
+    const tooltip = isToolSegment
+      ? formatToolTooltip(pending.toolTitles)
+      : formatTextsTooltip(
+          [...pending.texts, ...pending.reasoningTexts],
+          pending.type === "user" ? "User message" : "Assistant response",
+        )
+ 
+    result.push({
+      id: `${record.id}:${segmentIndex}`,
+      messageId: record.id,
+      type: pending.type,
+      label,
+      tooltip,
+      shortLabel,
+      toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
+    })
+    segmentIndex += 1
+    pending = null
+  }
+ 
+  const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
+    if (!pending || pending.type !== type) {
+      flushPending()
+      pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" }
+    }
+    return pending!
+  }
+
+
+  const defaultContentType: TimelineSegmentType = record.role === "user" ? "user" : "assistant"
+
+  for (const part of orderedParts) {
+    if (!part || typeof part !== "object") continue
+
+    if (part.type === "tool") {
+      const target = ensureSegment("tool")
+      const toolPart = part as ToolCallPart
+      target.toolTitles.push(getToolTitle(toolPart))
+      target.toolTypeLabels.push(getToolTypeLabel(toolPart))
+      target.toolIcons.push(getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"))
+      if (typeof toolPart.id === "string" && toolPart.id.length > 0) {
+        target.toolPartIds.push(toolPart.id)
+      }
+      continue
+    }
+
+    if (part.type === "reasoning") {
+      const text = collectReasoningText(part)
+      if (text.trim().length === 0) continue
+      const target = ensureSegment(defaultContentType)
+      if (target) {
+        target.reasoningTexts.push(text)
+      }
+      continue
+    }
+ 
+    if (part.type === "compaction") {
+      flushPending()
+      const isAuto = Boolean((part as any)?.auto)
+      result.push({
+        id: `${record.id}:${segmentIndex}`,
+        messageId: record.id,
+        type: "compaction",
+        label: SEGMENT_LABELS.compaction,
+        tooltip: isAuto ? "Auto Compaction" : "User Compaction",
+        variant: isAuto ? "auto" : "manual",
+      })
+      segmentIndex += 1
+      continue
+    }
+
+    if (part.type === "step-start" || part.type === "step-finish") {
+      continue
+    }
+ 
+    const text = collectTextFromPart(part)
+    if (text.trim().length === 0) continue
+    const target = ensureSegment(defaultContentType)
+    if (target) {
+      target.texts.push(text)
+      target.hasPrimaryText = true
+    }
+  }
+
+
+  flushPending()
+ 
+  return result
+}
+
+const MessageTimeline: Component<MessageTimelineProps> = (props) => {
+  const buttonRefs = new Map<string, HTMLButtonElement>()
+  const store = () => messageStoreBus.getOrCreate(props.instanceId)
+  const [hoveredSegment, setHoveredSegment] = createSignal<TimelineSegment | null>(null)
+  const [tooltipCoords, setTooltipCoords] = createSignal<{ top: number; left: number }>({ top: 0, left: 0 })
+  const [hoverAnchorRect, setHoverAnchorRect] = createSignal<{ top: number; left: number; width: number; height: number } | null>(null)
+  const [tooltipSize, setTooltipSize] = createSignal<{ width: number; height: number }>({ width: 360, height: 420 })
+  const [tooltipElement, setTooltipElement] = createSignal<HTMLDivElement | null>(null)
+  let hoverTimer: number | null = null
+  const showTools = () => props.showToolSegments ?? true
+ 
+  const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
+    if (element) {
+      buttonRefs.set(segmentId, element)
+    } else {
+      buttonRefs.delete(segmentId)
+    }
+  }
+ 
+  const clearHoverTimer = () => {
+    if (hoverTimer !== null && typeof window !== "undefined") {
+      window.clearTimeout(hoverTimer)
+      hoverTimer = null
+    }
+  }
+ 
+  const handleMouseEnter = (segment: TimelineSegment, event: MouseEvent) => {
+    if (typeof window === "undefined") return
+    clearHoverTimer()
+    const target = event.currentTarget as HTMLButtonElement
+    hoverTimer = window.setTimeout(() => {
+      const rect = target.getBoundingClientRect()
+      setHoverAnchorRect({ top: rect.top, left: rect.left, width: rect.width, height: rect.height })
+      setHoveredSegment(segment)
+    }, 200)
+  }
+
+  const handleMouseLeave = () => {
+    clearHoverTimer()
+    setHoveredSegment(null)
+    setHoverAnchorRect(null)
+  }
+ 
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const anchor = hoverAnchorRect()
+    const segment = hoveredSegment()
+    if (!anchor || !segment) return
+    const { width, height } = tooltipSize()
+    const verticalGap = 16
+    const horizontalGap = 16
+    const preferredTop = anchor.top + anchor.height / 2 - height / 2
+    const maxTop = window.innerHeight - height - verticalGap
+    const clampedTop = Math.min(maxTop, Math.max(verticalGap, preferredTop))
+    const preferredLeft = anchor.left - width - horizontalGap
+    const clampedLeft = Math.max(horizontalGap, preferredLeft)
+    setTooltipCoords({ top: clampedTop, left: clampedLeft })
+  })
+
+  onCleanup(() => clearHoverTimer())
+
+  createEffect(() => {
+    const activeId = props.activeMessageId
+
+    if (!activeId) return
+    const targetSegment = props.segments.find((segment) => segment.messageId === activeId)
+    if (!targetSegment) return
+    const element = buttonRefs.get(targetSegment.id)
+    if (!element) return
+    const timer = typeof window !== "undefined" ? window.setTimeout(() => {
+      element.scrollIntoView({ block: "nearest", behavior: "smooth" })
+    }, 120) : null
+    onCleanup(() => {
+      if (timer !== null && typeof window !== "undefined") {
+        window.clearTimeout(timer)
+      }
+    })
+  })
+
+  createEffect(() => {
+    const element = tooltipElement()
+    if (!element || typeof window === "undefined") return
+    const updateSize = () => {
+      const rect = element.getBoundingClientRect()
+      setTooltipSize({ width: rect.width, height: rect.height })
+    }
+    updateSize()
+    if (typeof ResizeObserver === "undefined") return
+    const observer = new ResizeObserver(() => updateSize())
+    observer.observe(element)
+    onCleanup(() => observer.disconnect())
+  })
+
+  const previewData = createMemo(() => {
+
+    const segment = hoveredSegment()
+    if (!segment) return null
+    const record = store().getMessage(segment.messageId)
+    if (!record) return null
+    return { messageId: segment.messageId }
+  })
+ 
+  return (
+    <div class="message-timeline" role="navigation" aria-label="Message timeline">
+      <For each={props.segments}>
+        {(segment) => {
+          onCleanup(() => buttonRefs.delete(segment.id))
+          const isActive = () => props.activeMessageId === 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 isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission())
+
+           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 (
+             <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" : ""}`}
+
+              aria-current={isActive() ? "true" : undefined}
+              aria-hidden={isHidden() ? "true" : undefined}
+              onClick={() => props.onSegmentClick?.(segment)}
+              onMouseEnter={(event) => handleMouseEnter(segment, event)}
+              onMouseLeave={handleMouseLeave}
+            >
+              <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>
+              <span class="message-timeline-label message-timeline-label-short">{shortLabelContent()}</span>
+            </button>
+          )
+        }}
+      </For>
+      <Show when={previewData()}>
+        {(data) => {
+          onCleanup(() => setTooltipElement(null))
+          return (
+            <div
+              ref={(element) => setTooltipElement(element)}
+              class="message-timeline-tooltip"
+              style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
+            >
+              <MessagePreview
+                messageId={data().messageId}
+                instanceId={props.instanceId}
+                sessionId={props.sessionId}
+                store={store}
+              />
+            </div>
+          )
+        }}
+      </Show>
+    </div>
+  )
+}
+ 
+export default MessageTimeline
+

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

@@ -0,0 +1,354 @@
+import { For, Show, createMemo, createSignal, createEffect, onCleanup, type Component } from "solid-js"
+import type { PermissionRequestLike } from "../types/permission"
+import { getPermissionCallId, getPermissionDisplayTitle, getPermissionKind, getPermissionMessageId, getPermissionSessionId } from "../types/permission"
+import { getQuestionCallId, getQuestionMessageId, getQuestionSessionId, type QuestionRequest } from "../types/question"
+import {
+  activeInterruption,
+  getPermissionQueue,
+  getQuestionQueue,
+  getQuestionEnqueuedAtForInstance,
+  setActivePermissionIdForInstance,
+  setActiveQuestionIdForInstance,
+} from "../stores/instances"
+import { ensureSessionParentExpanded, loadMessages, sessions as sessionStateSessions, setActiveSessionFromList } from "../stores/sessions"
+import { messageStoreBus } from "../stores/message-v2/bus"
+import ToolCall from "./tool-call"
+
+interface PermissionApprovalModalProps {
+  instanceId: string
+  isOpen: boolean
+  onClose: () => void
+}
+
+type ResolvedToolCall = {
+  messageId: string
+  sessionId: string
+  toolPart: Extract<import("../types/message").ClientPart, { type: "tool" }>
+  messageVersion: number
+  partVersion: number
+}
+
+function resolveToolCallFromPermission(
+  instanceId: string,
+  permission: PermissionRequestLike,
+): ResolvedToolCall | null {
+  const sessionId = getPermissionSessionId(permission)
+  const messageId = getPermissionMessageId(permission)
+  if (!sessionId || !messageId) return null
+
+  const store = messageStoreBus.getInstance(instanceId)
+  if (!store) return null
+
+  const record = store.getMessage(messageId)
+  if (!record) return null
+
+  const metadata = ((permission as any).metadata || {}) as Record<string, unknown>
+  const directPartId =
+    (permission as any).partID ??
+    (permission as any).partId ??
+    (metadata as any).partID ??
+    (metadata as any).partId ??
+    undefined
+
+  const callId = getPermissionCallId(permission)
+
+  const findToolPart = (partId: string) => {
+    const partRecord = record.parts?.[partId]
+    const part = partRecord?.data
+    if (!part || part.type !== "tool") return null
+    return {
+      toolPart: part as ResolvedToolCall["toolPart"],
+      partVersion: partRecord.revision ?? 0,
+    }
+  }
+
+  if (typeof directPartId === "string" && directPartId.length > 0) {
+    const resolved = findToolPart(directPartId)
+    if (resolved) {
+      return {
+        messageId,
+        sessionId,
+        toolPart: resolved.toolPart,
+        messageVersion: record.revision,
+        partVersion: resolved.partVersion,
+      }
+    }
+  }
+
+  if (callId) {
+    for (const partId of record.partIds) {
+      const partRecord = record.parts?.[partId]
+      const part = partRecord?.data as any
+      if (!part || part.type !== "tool") continue
+      const partCallId = part.callID ?? part.callId ?? part.toolCallID ?? part.toolCallId ?? undefined
+      if (partCallId === callId && typeof part.id === "string" && part.id.length > 0) {
+        return {
+          messageId,
+          sessionId,
+          toolPart: part as ResolvedToolCall["toolPart"],
+          messageVersion: record.revision,
+          partVersion: partRecord.revision ?? 0,
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+function resolveToolCallFromQuestion(instanceId: string, request: QuestionRequest): ResolvedToolCall | null {
+  const sessionId = getQuestionSessionId(request)
+  const messageId = getQuestionMessageId(request)
+  if (!sessionId || !messageId) return null
+
+  const store = messageStoreBus.getInstance(instanceId)
+  if (!store) return null
+
+  const record = store.getMessage(messageId)
+  if (!record) return null
+
+  const callId = getQuestionCallId(request)
+  if (!callId) return null
+
+  for (const partId of record.partIds) {
+    const partRecord = record.parts?.[partId]
+    const part = partRecord?.data as any
+    if (!part || part.type !== "tool") continue
+    const partCallId = part.callID ?? part.callId ?? part.toolCallID ?? part.toolCallId ?? undefined
+    if (partCallId !== callId) continue
+
+    if (typeof part.id !== "string" || part.id.length === 0) continue
+    return {
+      messageId,
+      sessionId,
+      toolPart: part as ResolvedToolCall["toolPart"],
+      messageVersion: record.revision,
+      partVersion: partRecord?.revision ?? 0,
+    }
+  }
+
+  return null
+}
+
+const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props) => {
+  const [loadingSession, setLoadingSession] = createSignal<string | null>(null)
+
+  const permissionQueue = createMemo(() => getPermissionQueue(props.instanceId))
+  const questionQueue = createMemo(() => getQuestionQueue(props.instanceId))
+  const active = createMemo(() => activeInterruption().get(props.instanceId) ?? null)
+
+  type InterruptionItem =
+    | { kind: "permission"; id: string; sessionId: string; createdAt: number; payload: PermissionRequestLike }
+    | { kind: "question"; id: string; sessionId: string; createdAt: number; payload: QuestionRequest }
+
+  const orderedQueue = createMemo<InterruptionItem[]>(() => {
+    const permissions = permissionQueue().map((permission) => ({
+      kind: "permission" as const,
+      id: permission.id,
+      sessionId: getPermissionSessionId(permission) || "",
+      createdAt: (permission as any)?.time?.created ?? Date.now(),
+      payload: permission,
+    }))
+
+    const questions = questionQueue().map((question) => ({
+      kind: "question" as const,
+      id: question.id,
+      sessionId: getQuestionSessionId(question) || "",
+      createdAt: getQuestionEnqueuedAtForInstance(props.instanceId, question.id),
+      payload: question,
+    }))
+
+    return [...permissions, ...questions].sort((a, b) => a.createdAt - b.createdAt)
+  })
+
+  const hasRequests = createMemo(() => orderedQueue().length > 0)
+
+  const closeOnEscape = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      props.onClose()
+    }
+  }
+
+  createEffect(() => {
+    if (!props.isOpen) return
+    document.addEventListener("keydown", closeOnEscape)
+    onCleanup(() => document.removeEventListener("keydown", closeOnEscape))
+  })
+
+  createEffect(() => {
+    if (!props.isOpen) return
+    if (orderedQueue().length === 0) {
+      props.onClose()
+    }
+  })
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      props.onClose()
+    }
+  }
+
+  async function handleLoadSession(sessionId: string) {
+    if (!sessionId) return
+    setLoadingSession(sessionId)
+    try {
+      await loadMessages(props.instanceId, sessionId)
+    } finally {
+      setLoadingSession((current) => (current === sessionId ? null : current))
+    }
+  }
+
+  function handleGoToSession(sessionId: string) {
+    if (!sessionId) return
+
+    const session = sessionStateSessions().get(props.instanceId)?.get(sessionId)
+    const parentId = session?.parentId ?? session?.id
+    if (parentId) {
+      ensureSessionParentExpanded(props.instanceId, parentId)
+    }
+
+    setActiveSessionFromList(props.instanceId, sessionId)
+    props.onClose()
+  }
+
+  return (
+    <Show when={props.isOpen}>
+      <div class="permission-center-modal-backdrop" onClick={handleBackdropClick}>
+        <div class="permission-center-modal" role="dialog" aria-modal="true" aria-labelledby="permission-center-title">
+          <div class="permission-center-modal-header">
+            <div class="permission-center-modal-title-row">
+              <h2 id="permission-center-title" class="permission-center-modal-title">
+                Requests
+              </h2>
+              <Show when={orderedQueue().length > 0}>
+                <span class="permission-center-modal-count">{orderedQueue().length}</span>
+              </Show>
+            </div>
+            <button type="button" class="permission-center-modal-close" onClick={props.onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+
+          <div class="permission-center-modal-body">
+            <Show when={hasRequests()} fallback={<div class="permission-center-empty">No pending requests.</div>}>
+              <div class="permission-center-list" role="list">
+                <For each={orderedQueue()}>
+                  {(item) => {
+                    const isActive = () => active()?.kind === item.kind && active()?.id === item.id
+                    const sessionId = () => item.sessionId
+
+                    const resolved = createMemo(() => {
+                      if (item.kind === "permission") {
+                        return resolveToolCallFromPermission(props.instanceId, item.payload)
+                      }
+                      return resolveToolCallFromQuestion(props.instanceId, item.payload)
+                    })
+
+                    const showFallback = () => !resolved()
+
+                    const kindLabel = () => (item.kind === "permission" ? "Permission" : "Question")
+
+                    const primaryTitle = () => {
+                      if (item.kind === "permission") {
+                        return getPermissionDisplayTitle(item.payload)
+                      }
+                      const first = item.payload.questions?.[0]?.question
+                      return typeof first === "string" && first.trim().length > 0 ? first : "Question"
+                    }
+
+                    const secondaryTitle = () => {
+                      if (item.kind === "permission") {
+                        return getPermissionKind(item.payload)
+                      }
+                      const count = item.payload.questions?.length ?? 0
+                      return count === 1 ? "1 question" : `${count} questions`
+                    }
+
+                    const handleActivate = () => {
+                      if (item.kind === "permission") {
+                        setActivePermissionIdForInstance(props.instanceId, item.id)
+                      } else {
+                        setActiveQuestionIdForInstance(props.instanceId, item.id)
+                      }
+                    }
+
+                    return (
+                      <div
+                        class={`permission-center-item${isActive() ? " permission-center-item-active" : ""}`}
+                        role="listitem"
+                        onClick={handleActivate}
+                      >
+                        <div class="permission-center-item-header">
+                          <div class="permission-center-item-heading">
+                            <span class={`permission-center-item-chip permission-center-item-chip-${item.kind}`}>{kindLabel()}</span>
+                            <span class="permission-center-item-kind">{secondaryTitle()}</span>
+                            <Show when={isActive()}>
+                              <span class="permission-center-item-chip">Active</span>
+                            </Show>
+                          </div>
+
+                          <div class="permission-center-item-actions">
+                            <button
+                              type="button"
+                              class="permission-center-item-action"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                handleGoToSession(sessionId())
+                              }}
+                            >
+                              Go to Session
+                            </button>
+                            <Show when={showFallback()}>
+                              <button
+                                type="button"
+                                class="permission-center-item-action"
+                                disabled={loadingSession() === sessionId()}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleLoadSession(sessionId())
+                                }}
+                              >
+                                {loadingSession() === sessionId() ? "Loading…" : "Load Session"}
+                              </button>
+                            </Show>
+                          </div>
+                        </div>
+
+                        <Show
+                          when={resolved()}
+                          fallback={
+                            <div class="permission-center-fallback">
+                              <div class="permission-center-fallback-title">
+                                <code>{primaryTitle()}</code>
+                              </div>
+                              <div class="permission-center-fallback-hint">Load session for more information.</div>
+                            </div>
+                          }
+                        >
+                          {(data) => (
+                            <ToolCall
+                              toolCall={data().toolPart}
+                              toolCallId={data().toolPart.id}
+                              messageId={data().messageId}
+                              messageVersion={data().messageVersion}
+                              partVersion={data().partVersion}
+                              instanceId={props.instanceId}
+                              sessionId={data().sessionId}
+                            />
+                          )}
+                        </Show>
+                      </div>
+                    )
+                  }}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default PermissionApprovalModal

packages/ui/src/components/permission-notification-banner.tsx

@@ -0,0 +1,42 @@
+import { Show, createMemo, type Component } from "solid-js"
+import { ShieldAlert } from "lucide-solid"
+import { getPermissionQueueLength, getQuestionQueueLength } from "../stores/instances"
+
+interface PermissionNotificationBannerProps {
+  instanceId: string
+  onClick: () => void
+}
+
+const PermissionNotificationBanner: Component<PermissionNotificationBannerProps> = (props) => {
+  const permissionCount = createMemo(() => getPermissionQueueLength(props.instanceId))
+  const questionCount = createMemo(() => getQuestionQueueLength(props.instanceId))
+  const queueLength = createMemo(() => permissionCount() + questionCount())
+  const hasRequests = createMemo(() => queueLength() > 0)
+  const label = createMemo(() => {
+    const total = queueLength()
+    const parts: string[] = []
+    if (permissionCount() > 0) parts.push(`${permissionCount()} permission${permissionCount() === 1 ? "" : "s"}`)
+    if (questionCount() > 0) parts.push(`${questionCount()} question${questionCount() === 1 ? "" : "s"}`)
+    const detail = parts.length ? ` (${parts.join(", ")})` : ""
+    return `${total} pending request${total === 1 ? "" : "s"}${detail}`
+  })
+
+  return (
+    <Show when={hasRequests()}>
+      <button
+        type="button"
+        class="permission-center-trigger"
+        onClick={props.onClick}
+        aria-label={label()}
+        title={label()}
+      >
+        <ShieldAlert class="permission-center-icon" aria-hidden="true" />
+        <span class="permission-center-count" aria-hidden="true">
+          {queueLength() > 9 ? "9+" : queueLength()}
+        </span>
+      </button>
+    </Show>
+  )
+}
+
+export default PermissionNotificationBanner

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

@@ -1,15 +1,18 @@
 import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
 import UnifiedPicker from "./unified-picker"
+import ExpandButton from "./expand-button"
 import { addToHistory, getHistory } from "../stores/message-history"
 import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments"
 import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
 import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment"
 import type { Attachment } from "../types/attachment"
 import type { Agent } from "../types/session"
+import type { Command as SDKCommand } from "@opencode-ai/sdk/v2"
 import Kbd from "./kbd"
 import { getActiveInstance } from "../stores/instances"
-import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt } from "../stores/sessions"
+import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt, executeCustomCommand } from "../stores/sessions"
+import { getCommands } from "../stores/commands"
 import { showAlertDialog } from "../stores/alerts"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
@@ -25,6 +28,7 @@ interface PromptInputProps {
   escapeInDebounce?: boolean
   isSessionBusy?: boolean
   onAbortSession?: () => Promise<void>
+  registerQuoteHandler?: (handler: (text: string, mode: "quote" | "code") => void) => void | (() => void)
 }
 
 export default function PromptInput(props: PromptInputProps) {
@@ -35,6 +39,7 @@ export default function PromptInput(props: PromptInputProps) {
   const [historyDraft, setHistoryDraft] = createSignal<string | null>(null)
   const [, setIsFocused] = createSignal(false)
   const [showPicker, setShowPicker] = createSignal(false)
+  const [pickerMode, setPickerMode] = createSignal<"mention" | "command">("mention")
   const [searchQuery, setSearchQuery] = createSignal("")
   const [atPosition, setAtPosition] = createSignal<number | null>(null)
   const [isDragging, setIsDragging] = createSignal(false)
@@ -42,8 +47,16 @@ export default function PromptInput(props: PromptInputProps) {
   const [pasteCount, setPasteCount] = createSignal(0)
   const [imageCount, setImageCount] = createSignal(0)
   const [mode, setMode] = createSignal<"normal" | "shell">("normal")
+  const [expandState, setExpandState] = createSignal<"normal" | "expanded">("normal")
+  const SELECTION_INSERT_MAX_LENGTH = 2000
   let textareaRef: HTMLTextAreaElement | undefined
-  let containerRef: HTMLDivElement | undefined
+
+  const getPlaceholder = () => {
+    if (mode() === "shell") {
+      return "Run a shell command (Esc to exit)..."
+    }
+    return "Type your message, @file, @agent, or paste images and text..."
+  }
 
 
 
@@ -51,6 +64,22 @@ export default function PromptInput(props: PromptInputProps) {
   const attachments = () => getAttachments(props.instanceId, props.sessionId)
   const instanceAgents = () => agents().get(props.instanceId) || []
 
+  createEffect(() => {
+    if (!props.registerQuoteHandler) return
+    const cleanup = props.registerQuoteHandler((text, mode) => {
+      if (mode === "code") {
+        insertCodeSelection(text)
+      } else {
+        insertQuotedSelection(text)
+      }
+    })
+    onCleanup(() => {
+      if (typeof cleanup === "function") {
+        cleanup()
+      }
+    })
+  })
+
   const setPrompt = (value: string) => {
     setPromptInternal(value)
     setSessionDraftPrompt(props.instanceId, props.sessionId, value)
@@ -542,14 +571,28 @@ export default function PromptInput(props: PromptInputProps) {
     const currentAttachments = attachments()
     if (props.disabled || (!text && currentAttachments.length === 0)) return
 
-    const resolvedPrompt = resolvePastedPlaceholders(text, currentAttachments)
     const isShellMode = mode() === "shell"
 
+    // Slash command routing (match OpenCode TUI): only run if the command exists.
+    const isSlashCandidate = !isShellMode && text.startsWith("/")
+    const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1
+    const commandToken = isSlashCandidate ? (firstSpace === -1 ? text : text.slice(0, firstSpace)) : ""
+    const commandName = isSlashCandidate ? commandToken.slice(1) : ""
+    const commandArgs = isSlashCandidate ? (firstSpace === -1 ? "" : text.slice(firstSpace + 1).trimStart()) : ""
+
+    const isKnownSlashCommand =
+      isSlashCandidate &&
+      commandName.length > 0 &&
+      getCommands(props.instanceId).some((cmd) => cmd.name === commandName)
+
+    const resolvedPrompt = isKnownSlashCommand ? text : resolvePastedPlaceholders(text, currentAttachments)
+    const historyEntry = resolvedPrompt
+
     const refreshHistory = async () => {
       try {
-        await addToHistory(props.instanceFolder, resolvedPrompt)
+        await addToHistory(props.instanceFolder, historyEntry)
         setHistory((prev) => {
-          const next = [resolvedPrompt, ...prev]
+          const next = [historyEntry, ...prev]
           if (next.length > HISTORY_LIMIT) {
             next.length = HISTORY_LIMIT
           }
@@ -562,12 +605,25 @@ export default function PromptInput(props: PromptInputProps) {
     }
 
     clearPrompt()
-    clearAttachments(props.instanceId, props.sessionId)
-    setIgnoredAtPositions(new Set<number>())
-    setPasteCount(0)
-    setImageCount(0)
+
+    // Ignore attachments for slash commands, but keep them for next prompt.
+    if (!isKnownSlashCommand) {
+      clearAttachments(props.instanceId, props.sessionId)
+      setPasteCount(0)
+      setImageCount(0)
+      setIgnoredAtPositions(new Set<number>())
+    } else {
+      syncAttachmentCounters("", currentAttachments)
+      setIgnoredAtPositions(new Set<number>())
+    }
+
     setHistoryDraft(null)
 
+    if (isKnownSlashCommand) {
+      // Record attempted slash commands even if execution fails.
+      void refreshHistory()
+    }
+
     try {
       if (isShellMode) {
         if (props.onRunShell) {
@@ -575,10 +631,14 @@ export default function PromptInput(props: PromptInputProps) {
         } else {
           await props.onSend(resolvedPrompt, [])
         }
+      } else if (isKnownSlashCommand) {
+        await executeCustomCommand(props.instanceId, props.sessionId, commandName, commandArgs)
       } else {
         await props.onSend(resolvedPrompt, currentAttachments)
       }
-      void refreshHistory()
+      if (!isKnownSlashCommand) {
+        void refreshHistory()
+      }
     } catch (error) {
       log.error("Failed to send message:", error)
       showAlertDialog("Failed to send message", {
@@ -590,7 +650,7 @@ export default function PromptInput(props: PromptInputProps) {
       textareaRef?.focus()
     }
   }
- 
+
   function focusTextareaEnd() {
     if (!textareaRef) return
     setTimeout(() => {
@@ -600,7 +660,7 @@ export default function PromptInput(props: PromptInputProps) {
       textareaRef.focus()
     }, 0)
   }
- 
+
   function canUseHistory(force = false) {
     if (force) return true
     if (showPicker()) return false
@@ -608,29 +668,29 @@ export default function PromptInput(props: PromptInputProps) {
     if (!textarea) return false
     return textarea.selectionStart === 0 && textarea.selectionEnd === 0
   }
- 
+
   function selectPreviousHistory(force = false) {
     const entries = history()
     if (entries.length === 0) return false
     if (!canUseHistory(force)) return false
- 
+
     if (historyIndex() === -1) {
       setHistoryDraft(prompt())
     }
- 
+
     const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, entries.length - 1)
     setHistoryIndex(newIndex)
     setPrompt(entries[newIndex])
     focusTextareaEnd()
     return true
   }
- 
+
   function selectNextHistory(force = false) {
     const entries = history()
     if (entries.length === 0) return false
     if (!canUseHistory(force)) return false
     if (historyIndex() === -1) return false
- 
+
     const newIndex = historyIndex() - 1
     if (newIndex >= 0) {
       setHistoryIndex(newIndex)
@@ -644,12 +704,18 @@ export default function PromptInput(props: PromptInputProps) {
     focusTextareaEnd()
     return true
   }
- 
+
   function handleAbort() {
     if (!props.onAbortSession || !props.isSessionBusy) return
     void props.onAbortSession()
   }
- 
+
+  function handleExpandToggle(nextState: "normal" | "expanded") {
+    setExpandState(nextState)
+    // Keep focus on textarea
+    textareaRef?.focus()
+  }
+
   function handleInput(e: Event) {
 
     const target = e.target as HTMLTextAreaElement
@@ -659,11 +725,27 @@ export default function PromptInput(props: PromptInputProps) {
     setHistoryDraft(null)
 
     const cursorPos = target.selectionStart
+
+    // Slash command picker (only when editing the command token: "/<query>")
+    if (value.startsWith("/") && cursorPos >= 1) {
+      const firstWhitespaceIndex = value.slice(1).search(/\s/)
+      const tokenEnd = firstWhitespaceIndex === -1 ? value.length : firstWhitespaceIndex + 1
+
+      if (cursorPos <= tokenEnd) {
+        setPickerMode("command")
+        setAtPosition(0)
+        setSearchQuery(value.substring(1, cursorPos))
+        setShowPicker(true)
+        return
+      }
+    }
+
     const textBeforeCursor = value.substring(0, cursorPos)
     const lastAtIndex = textBeforeCursor.lastIndexOf("@")
 
     const previousAtPosition = atPosition()
 
+
     if (lastAtIndex === -1) {
       setIgnoredAtPositions(new Set<number>())
     } else if (previousAtPosition !== null && lastAtIndex !== previousAtPosition) {
@@ -680,6 +762,7 @@ export default function PromptInput(props: PromptInputProps) {
 
       if (!hasSpace && cursorPos === lastAtIndex + textAfterAt.length + 1) {
         if (!ignoredAtPositions().has(lastAtIndex)) {
+          setPickerMode("mention")
           setAtPosition(lastAtIndex)
           setSearchQuery(textAfterAt)
           setShowPicker(true)
@@ -696,11 +779,32 @@ export default function PromptInput(props: PromptInputProps) {
     item:
       | { type: "agent"; agent: Agent }
       | {
-          type: "file"
-          file: { path: string; relativePath?: string; isGitFile: boolean; isDirectory?: boolean }
-        },
+        type: "file"
+        file: { path: string; relativePath?: string; isGitFile: boolean; isDirectory?: boolean }
+      }
+      | { type: "command"; command: SDKCommand },
   ) {
-    if (item.type === "agent") {
+    if (item.type === "command") {
+      const name = item.command.name
+      const currentPrompt = prompt()
+
+      const afterSlash = currentPrompt.slice(1)
+      const firstWhitespaceIndex = afterSlash.search(/\s/)
+      const tokenEnd = firstWhitespaceIndex === -1 ? currentPrompt.length : firstWhitespaceIndex + 1
+
+      const before = ""
+      const after = currentPrompt.substring(tokenEnd)
+      const newPrompt = before + `/${name} ` + after
+      setPrompt(newPrompt)
+
+      setTimeout(() => {
+        if (textareaRef) {
+          const newCursorPos = `/${name} `.length
+          textareaRef.setSelectionRange(newCursorPos, newCursorPos)
+          textareaRef.focus()
+        }
+      }, 0)
+    } else if (item.type === "agent") {
       const agentName = item.agent.name
       const existingAttachments = attachments()
       const alreadyAttached = existingAttachments.some(
@@ -804,7 +908,7 @@ export default function PromptInput(props: PromptInputProps) {
 
   function handlePickerClose() {
     const pos = atPosition()
-    if (pos !== null) {
+    if (pickerMode() === "mention" && pos !== null) {
       setIgnoredAtPositions((prev) => new Set(prev).add(pos))
     }
     setShowPicker(false)
@@ -869,20 +973,79 @@ export default function PromptInput(props: PromptInputProps) {
     textareaRef?.focus()
   }
 
+  function insertBlockContent(block: string) {
+    const textarea = textareaRef
+    const current = prompt()
+    const start = textarea ? textarea.selectionStart : current.length
+    const end = textarea ? textarea.selectionEnd : current.length
+    const before = current.substring(0, start)
+    const after = current.substring(end)
+    const needsLeading = before.length > 0 && !before.endsWith("\n") ? "\n" : ""
+    const insertion = `${needsLeading}${block}`
+    const nextValue = before + insertion + after
+
+    setPrompt(nextValue)
+    setHistoryIndex(-1)
+    setHistoryDraft(null)
+    setShowPicker(false)
+    setAtPosition(null)
+
+    if (textarea) {
+      setTimeout(() => {
+        const cursor = before.length + insertion.length
+        textarea.focus()
+        textarea.setSelectionRange(cursor, cursor)
+      }, 0)
+    }
+  }
+
+  function insertQuotedSelection(rawText: string) {
+    const normalized = (rawText ?? "").replace(/\r/g, "").trim()
+    if (!normalized) return
+    const limited =
+      normalized.length > SELECTION_INSERT_MAX_LENGTH
+        ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH).trimEnd()
+        : normalized
+    const lines = limited
+      .split(/\n/)
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0)
+    if (lines.length === 0) return
+
+    const blockquote = lines.map((line) => `> ${line}`).join("\n")
+    if (!blockquote) return
+
+    insertBlockContent(`${blockquote}\n\n`)
+  }
+
+  function insertCodeSelection(rawText: string) {
+    const normalized = (rawText ?? "").replace(/\r/g, "")
+    const limited =
+      normalized.length > SELECTION_INSERT_MAX_LENGTH
+        ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH)
+        : normalized
+    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "")
+    if (!trimmed) return
+
+    const block = "```\n" + trimmed + "\n```\n\n"
+    insertBlockContent(block)
+  }
+
   const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession)
- 
+
   const hasHistory = () => history().length > 0
   const canHistoryGoPrevious = () => hasHistory() && (historyIndex() === -1 || historyIndex() < history().length - 1)
   const canHistoryGoNext = () => historyIndex() >= 0
- 
+
   const canSend = () => {
     if (props.disabled) return false
     const hasText = prompt().trim().length > 0
     if (mode() === "shell") return hasText
     return hasText || attachments().length > 0
   }
- 
-  const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "for shell mode" })
+
+  const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "Shell mode" })
+  const commandHint = () => ({ key: "/", text: "Commands" })
 
   const shouldShowOverlay = () => prompt().length === 0
 
@@ -891,7 +1054,6 @@ export default function PromptInput(props: PromptInputProps) {
   return (
     <div class="prompt-input-container">
       <div
-        ref={containerRef}
         class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
         style={
           isDragging()
@@ -905,9 +1067,11 @@ export default function PromptInput(props: PromptInputProps) {
         <Show when={showPicker() && instance()}>
           <UnifiedPicker
             open={showPicker()}
+            mode={pickerMode()}
             onClose={handlePickerClose}
             onSelect={handlePickerSelect}
             agents={instanceAgents()}
+            commands={getCommands(props.instanceId)}
             instanceClient={instance()!.client}
             searchQuery={searchQuery()}
             textareaRef={textareaRef}
@@ -916,179 +1080,90 @@ export default function PromptInput(props: PromptInputProps) {
         </Show>
 
         <div class="flex flex-1 flex-col">
-          <Show when={attachments().length > 0}>
-            <div class="flex flex-wrap gap-1.5 border-b pb-2" style="border-color: var(--border-base);">
-              <For each={attachments()}>
-                {(attachment) => {
-                  const isImage = attachment.mediaType.startsWith("image/")
-                  const textValue = attachment.source.type === "text" ? attachment.source.value : undefined
-                  const isTextAttachment = typeof textValue === "string"
-                  return (
-                    <div
-                      class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
-                      title={textValue}
-                    >
-                      <Show
-                        when={isImage}
-                        fallback={
-                          <Show
-                            when={isTextAttachment}
-                            fallback={
-                              <Show
-                                when={attachment.source.type === "agent"}
-                                fallback={
-                                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path
-                                      stroke-linecap="round"
-                                      stroke-linejoin="round"
-                                      stroke-width="2"
-                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                                    />
-                                  </svg>
-                                }
-                              >
-                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                  <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                                  />
-                                </svg>
-                              </Show>
-                            }
-                          >
-                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                              />
-                            </svg>
-                          </Show>
-                        }
-                      >
-                        <img src={attachment.url} alt={attachment.filename} class="h-5 w-5 rounded object-cover" />
-                      </Show>
-                      <span>{isTextAttachment ? attachment.display : attachment.filename}</span>
-                      <Show when={isTextAttachment}>
-                        <button
-                          onClick={() => handleExpandTextAttachment(attachment)}
-                          class="attachment-expand"
-                          aria-label="Expand pasted text"
-                          title="Insert pasted text"
-                        >
-                          <svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h6v6H7z" />
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4h12v12" />
-                          </svg>
-                        </button>
-                      </Show>
-                      <button
-                        onClick={() => handleRemoveAttachment(attachment.id)}
-                        class="attachment-remove"
-                        aria-label="Remove attachment"
-                      >
-                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
-                      </button>
-                      <Show when={isImage}>
-                        <div class="attachment-chip-preview">
-                          <img src={attachment.url} alt={attachment.filename} />
-                        </div>
-                      </Show>
-                    </div>
-                  )
-                }}
-              </For>
-            </div>
-          </Show>
-          <div class="prompt-input-field">
-            <textarea
-              ref={textareaRef}
-              class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
-              placeholder={
-                mode() === "shell"
-                  ? "Run a shell command (Esc to exit)..."
-                  : "Type your message, @file, @agent, or paste images and text..."
-              }
-              value={prompt()}
-              onInput={handleInput}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePaste}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
-              disabled={props.disabled}
-              rows={4}
-              style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
-              spellcheck={false}
-              autocorrect="off"
-              autoCapitalize="off"
-              autocomplete="off"
-            />
-            <Show when={hasHistory()}>
-              <div class="prompt-history-top">
-                <button
-                  type="button"
-                  class="prompt-history-button"
-                  onClick={() => selectPreviousHistory(true)}
-                  disabled={!canHistoryGoPrevious()}
-                  aria-label="Previous prompt"
-                >
-                  <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
-                </button>
+          <div class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}>
+
+            <div class={`prompt-input-field ${expandState() === "expanded" ? "is-expanded" : ""}`}>
+              <textarea
+                ref={textareaRef}
+                class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""} ${expandState() === "expanded" ? "is-expanded" : ""}`}
+                placeholder={getPlaceholder()}
+                value={prompt()}
+                onInput={handleInput}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                disabled={props.disabled}
+                rows={expandState() === "expanded" ? 15 : 4}
+                spellcheck={false}
+                autocorrect="off"
+                autoCapitalize="off"
+                autocomplete="off"
+              />
+              <div class="prompt-nav-buttons">
+                <ExpandButton
+                  expandState={expandState}
+                  onToggleExpand={handleExpandToggle}
+                />
+                <Show when={hasHistory()}>
+                  <button
+                    type="button"
+                    class="prompt-history-button"
+                    onClick={() => selectPreviousHistory(true)}
+                    disabled={!canHistoryGoPrevious()}
+                    aria-label="Previous prompt"
+                  >
+                    <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
+                  </button>
+                  <button
+                    type="button"
+                    class="prompt-history-button"
+                    onClick={() => selectNextHistory(true)}
+                    disabled={!canHistoryGoNext()}
+                    aria-label="Next prompt"
+                  >
+                    <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
+                  </button>
+                </Show>
               </div>
-              <div class="prompt-history-bottom">
-                <button
-                  type="button"
-                  class="prompt-history-button"
-                  onClick={() => selectNextHistory(true)}
-                  disabled={!canHistoryGoNext()}
-                  aria-label="Next prompt"
-                >
-                  <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
-                </button>
-              </div>
-            </Show>
-            <Show when={shouldShowOverlay()}>
-              <div class={`prompt-input-overlay ${mode() === "shell" ? "shell-mode" : ""}`}>
-                <Show
-                  when={props.escapeInDebounce}
-                  fallback={
+              <Show when={shouldShowOverlay()}>
+                <div class={`prompt-input-overlay ${mode() === "shell" ? "shell-mode" : ""}`}>
+                  <Show
+                    when={props.escapeInDebounce}
+                    fallback={
+                      <>
+                        <span class="prompt-overlay-text">
+                          <Kbd>Enter</Kbd> New line • <Kbd shortcut="cmd+enter" /> Send • <Kbd>@</Kbd> Files/agents • <Kbd>↑↓</Kbd> History
+                        </span>
+                        <Show when={attachments().length > 0}>
+                          <span class="prompt-overlay-text prompt-overlay-muted">• {attachments().length} file(s) attached</span>
+                        </Show>
+                        <span class="prompt-overlay-text">
+                          • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
+                        </span>
+                        <Show when={mode() !== "shell"}>
+                          <span class="prompt-overlay-text">
+                            • <Kbd>{commandHint().key}</Kbd> {commandHint().text}
+                          </span>
+                        </Show>
+                        <Show when={mode() === "shell"}>
+                          <span class="prompt-overlay-shell-active">Shell mode active</span>
+                        </Show>
+                      </>
+                    }
+                  >
                     <>
-                      <span class="prompt-overlay-text">
-                        <Kbd>Enter</Kbd> for new line • <Kbd shortcut="cmd+enter" /> to send • <Kbd>@</Kbd> for files/agents • <Kbd>↑↓</Kbd> for history
-                      </span>
-                      <Show when={attachments().length > 0}>
-                        <span class="prompt-overlay-text prompt-overlay-muted">• {attachments().length} file(s) attached</span>
-                      </Show>
-                      <span class="prompt-overlay-text">
-                        • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
+                      <span class="prompt-overlay-text prompt-overlay-warning">
+                        Press <Kbd>Esc</Kbd> again to abort session
                       </span>
                       <Show when={mode() === "shell"}>
                         <span class="prompt-overlay-shell-active">Shell mode active</span>
                       </Show>
                     </>
-                  }
-                >
-                  <>
-                    <span class="prompt-overlay-text prompt-overlay-warning">
-                      Press <Kbd>Esc</Kbd> again to abort session
-                    </span>
-                    <Show when={mode() === "shell"}>
-                      <span class="prompt-overlay-shell-active">Shell mode active</span>
-                    </Show>
-                  </>
-                </Show>
-              </div>
-            </Show>
+                  </Show>
+                </div>
+              </Show>
+            </div>
           </div>
         </div>
 

packages/ui/src/components/remote-access-overlay.tsx

@@ -19,10 +19,16 @@ interface RemoteAccessOverlayProps {
 
 export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
   const [meta, setMeta] = createSignal<ServerMeta | null>(null)
+  const [authStatus, setAuthStatus] = createSignal<{ authenticated: boolean; username?: string; passwordUserProvided?: boolean } | null>(null)
   const [loading, setLoading] = createSignal(false)
   const [qrCodes, setQrCodes] = createSignal<Record<string, string>>({})
   const [expandedUrl, setExpandedUrl] = createSignal<string | null>(null)
   const [error, setError] = createSignal<string | null>(null)
+  const [passwordFormOpen, setPasswordFormOpen] = createSignal(false)
+  const [passwordValue, setPasswordValue] = createSignal("")
+  const [passwordConfirm, setPasswordConfirm] = createSignal("")
+  const [passwordError, setPasswordError] = createSignal<string | null>(null)
+  const [savingPassword, setSavingPassword] = createSignal(false)
 
   const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
   const currentMode = createMemo(() => meta()?.listeningMode ?? preferences().listeningMode)
@@ -38,9 +44,11 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
   const refreshMeta = async () => {
     setLoading(true)
     setError(null)
+    setPasswordError(null)
     try {
-      const result = await serverApi.fetchServerMeta()
-      setMeta(result)
+      const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
+      setMeta(metaResult)
+      setAuthStatus(authResult)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     } finally {
@@ -108,6 +116,36 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
     }
   }
 
+  const handleSubmitPassword = async () => {
+    setPasswordError(null)
+
+    const next = passwordValue()
+    const confirm = passwordConfirm()
+
+    if (next.trim().length < 8) {
+      setPasswordError("Password must be at least 8 characters.")
+      return
+    }
+
+    if (next !== confirm) {
+      setPasswordError("Passwords do not match.")
+      return
+    }
+
+    setSavingPassword(true)
+    try {
+      const result = await serverApi.setServerPassword(next)
+      setAuthStatus({ authenticated: true, username: result.username, passwordUserProvided: result.passwordUserProvided })
+      setPasswordValue("")
+      setPasswordConfirm("")
+      setPasswordFormOpen(false)
+    } catch (err) {
+      setPasswordError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setSavingPassword(false)
+    }
+  }
+
   return (
     <Dialog
       open={props.open}
@@ -175,6 +213,87 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
               </section>
 
               <section class="remote-section">
+                <div class="remote-section-heading">
+                  <div class="remote-section-title">
+                    <Shield class="remote-icon" />
+                    <div>
+                      <p class="remote-label">Server password</p>
+                      <p class="remote-help">Remote handovers require a password. Set a memorable one to enable logins from other devices.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <Show
+                  when={authStatus() && authStatus()!.authenticated}
+                  fallback={<div class="remote-card">Authentication status unavailable.</div>}
+                >
+                  <div class="remote-card">
+                    <p class="remote-help">Username: {authStatus()!.username ?? "codenomad"}</p>
+                    <p class="remote-help">
+                      {authStatus()!.passwordUserProvided
+                        ? "A password is set for remote access."
+                        : "No memorable password is set yet. Set one to allow remote handover logins."}
+                    </p>
+
+                    <div class="remote-actions" style={{ "justify-content": "flex-start", "margin-top": "12px" }}>
+                      <button
+                        class="remote-pill"
+                        type="button"
+                        onClick={() => {
+                          setPasswordFormOpen(!passwordFormOpen())
+                          setPasswordError(null)
+                        }}
+                      >
+                        {passwordFormOpen()
+                          ? "Cancel"
+                          : authStatus()!.passwordUserProvided
+                            ? "Change password"
+                            : "Set password"}
+                      </button>
+                    </div>
+
+                    <Show when={passwordFormOpen()}>
+                      <div class="selector-input-group" style={{ "margin-top": "12px" }}>
+                        <label class="text-sm font-medium text-secondary">New password</label>
+                        <input
+                          class="selector-input w-full"
+                          type="password"
+                          value={passwordValue()}
+                          onInput={(event) => setPasswordValue(event.currentTarget.value)}
+                          placeholder="At least 8 characters"
+                        />
+                      </div>
+                      <div class="selector-input-group" style={{ "margin-top": "10px" }}>
+                        <label class="text-sm font-medium text-secondary">Confirm password</label>
+                        <input
+                          class="selector-input w-full"
+                          type="password"
+                          value={passwordConfirm()}
+                          onInput={(event) => setPasswordConfirm(event.currentTarget.value)}
+                        />
+                      </div>
+
+                      <Show when={passwordError()}>
+                        {(message) => <div class="remote-error" style={{ "margin-top": "10px" }}>{message()}</div>}
+                      </Show>
+
+                      <div class="remote-actions" style={{ "justify-content": "flex-start", "margin-top": "12px" }}>
+                        <button
+                          class="remote-pill"
+                          type="button"
+                          disabled={savingPassword()}
+                          onClick={() => void handleSubmitPassword()}
+                        >
+                          {savingPassword() ? "Saving…" : "Save password"}
+                        </button>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
+              </section>
+
+              <section class="remote-section">
+
                 <div class="remote-section-heading">
                   <div class="remote-section-title">
                     <Wifi class="remote-icon" />

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

@@ -1,37 +1,41 @@
-import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js"
-import type { Session, SessionStatus } from "../types/session"
+import { Component, For, Show, createSignal, createMemo, createEffect, JSX, onCleanup } from "solid-js"
+import type { SessionStatus } from "../types/session"
+import type { SessionThread } from "../stores/session-state"
 import { getSessionStatus } from "../stores/session-status"
-import { MessageSquare, Info, X, Copy, Trash2 } from "lucide-solid"
+import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronDown } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
-import Kbd from "./kbd"
+import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry } from "../lib/keyboard-registry"
-import { formatShortcut } from "../lib/keyboard-utils"
 import { showToastNotification } from "../lib/notifications"
-import { deleteSession, loading } from "../stores/sessions"
+import {
+  deleteSession,
+  ensureSessionParentExpanded,
+  getVisibleSessionIds,
+  isSessionParentExpanded,
+  loading,
+  renameSession,
+  sessions as sessionStateSessions,
+  setActiveSessionFromList,
+  toggleSessionParentExpanded,
+} from "../stores/sessions"
 import { getLogger } from "../lib/logger"
+import { copyToClipboard } from "../lib/clipboard"
 const log = getLogger("session")
 
 
 
 interface SessionListProps {
   instanceId: string
-  sessions: Map<string, Session>
+  threads: SessionThread[]
   activeSessionId: string | null
   onSelect: (sessionId: string) => void
-  onClose: (sessionId: string) => void
   onNew: () => void
   showHeader?: boolean
   showFooter?: boolean
   headerContent?: JSX.Element
   footerContent?: JSX.Element
-  onWidthChange?: (width: number) => void
 }
 
-const MIN_WIDTH = 200
-const MAX_WIDTH = 520
-const DEFAULT_WIDTH = 360
-const STORAGE_KEY = "opencode-session-sidebar-width-v7"
-
 function formatSessionStatus(status: SessionStatus): string {
   switch (status) {
     case "working":
@@ -43,78 +47,36 @@ function formatSessionStatus(status: SessionStatus): string {
   }
 }
 
-function arraysEqual(prev: readonly string[] | undefined, next: readonly string[]): boolean {
-  if (!prev) {
-    return false
-  }
-
-  if (prev.length !== next.length) {
-    return false
-  }
-
-  for (let i = 0; i < prev.length; i++) {
-    if (prev[i] !== next[i]) {
-      return false
-    }
-  }
-
-  return true
-}
-
 const SessionList: Component<SessionListProps> = (props) => {
-  const [sidebarWidth, setSidebarWidth] = createSignal(DEFAULT_WIDTH)
-  const [isResizing, setIsResizing] = createSignal(false)
-  const [startX, setStartX] = createSignal(0)
-  const [startWidth, setStartWidth] = createSignal(DEFAULT_WIDTH)
-  const infoShortcut = keyboardRegistry.get("switch-to-info")
- 
+  const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
+  const [isRenaming, setIsRenaming] = createSignal(false)
+
   const isSessionDeleting = (sessionId: string) => {
     const deleting = loading().deletingSession.get(props.instanceId)
     return deleting ? deleting.has(sessionId) : false
   }
  
+
   const selectSession = (sessionId: string) => {
+    const session = sessionStateSessions().get(props.instanceId)?.get(sessionId)
+    const parentId = session?.parentId ?? session?.id
+    if (parentId) {
+      ensureSessionParentExpanded(props.instanceId, parentId)
+    }
+
     props.onSelect(sessionId)
   }
-
-
-  let mouseMoveHandler: ((event: MouseEvent) => void) | null = null
-  let mouseUpHandler: (() => void) | null = null
-  let touchMoveHandler: ((event: TouchEvent) => void) | null = null
-  let touchEndHandler: (() => void) | null = null
-
-  onMount(() => {
-    if (typeof window === "undefined") return
-    const saved = window.localStorage.getItem(STORAGE_KEY)
-    if (!saved) return
-
-    const width = Number.parseInt(saved, 10)
-    if (Number.isFinite(width) && width >= MIN_WIDTH && width <= MAX_WIDTH) {
-      setSidebarWidth(width)
-      setStartWidth(width)
-    }
-  })
-
-  createEffect(() => {
-    if (typeof window === "undefined") return
-    const width = sidebarWidth()
-    window.localStorage.setItem(STORAGE_KEY, width.toString())
-  })
-
-  createEffect(() => {
-    props.onWidthChange?.(sidebarWidth())
-  })
  
   const copySessionId = async (event: MouseEvent, sessionId: string) => {
     event.stopPropagation()
- 
+
     try {
-      if (typeof navigator === "undefined" || !navigator.clipboard) {
-        throw new Error("Clipboard API unavailable")
+      const success = await copyToClipboard(sessionId)
+      if (success) {
+        showToastNotification({ message: "Session ID copied", variant: "success" })
+      } else {
+        showToastNotification({ message: "Unable to copy session ID", variant: "error" })
       }
- 
-      await navigator.clipboard.writeText(sessionId)
-      showToastNotification({ message: "Session ID copied", variant: "success" })
     } catch (error) {
       log.error(`Failed to copy session ID ${sessionId}:`, error)
       showToastNotification({ message: "Unable to copy session ID", variant: "error" })
@@ -124,106 +86,88 @@ const SessionList: Component<SessionListProps> = (props) => {
   const handleDeleteSession = async (event: MouseEvent, sessionId: string) => {
     event.stopPropagation()
     if (isSessionDeleting(sessionId)) return
- 
+
+    const shouldSelectFallback = props.activeSessionId === sessionId
+    let fallbackSessionId: string | undefined
+
+    if (shouldSelectFallback) {
+      const visible = getVisibleSessionIds(props.instanceId)
+      const currentIndex = visible.indexOf(sessionId)
+      const remaining = visible.filter((id) => id !== sessionId)
+
+      if (remaining.length > 0) {
+        if (currentIndex !== -1) {
+          for (let i = currentIndex; i < visible.length; i++) {
+            const candidate = visible[i]
+            if (candidate && candidate !== sessionId) {
+              fallbackSessionId = candidate
+              break
+            }
+          }
+
+          if (!fallbackSessionId) {
+            for (let i = currentIndex - 1; i >= 0; i--) {
+              const candidate = visible[i]
+              if (candidate && candidate !== sessionId) {
+                fallbackSessionId = candidate
+                break
+              }
+            }
+          }
+        }
+
+        fallbackSessionId ??= remaining[0]
+      }
+    }
+
     try {
       await deleteSession(props.instanceId, sessionId)
+      if (fallbackSessionId) {
+        setActiveSessionFromList(props.instanceId, fallbackSessionId)
+      }
     } catch (error) {
       log.error(`Failed to delete session ${sessionId}:`, error)
       showToastNotification({ message: "Unable to delete session", variant: "error" })
     }
   }
- 
-  const clampWidth = (width: number) => Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width))
 
+  const openRenameDialog = (sessionId: string) => {
+    const session = sessionStateSessions().get(props.instanceId)?.get(sessionId)
+    if (!session) return
+    const label = session.title && session.title.trim() ? session.title : sessionId
+    setRenameTarget({ id: sessionId, title: session.title ?? "", label })
+  }
+
+  const closeRenameDialog = () => {
+    setRenameTarget(null)
+  }
+
+  const handleRenameSubmit = async (nextTitle: string) => {
+    const target = renameTarget()
+    if (!target) return
+ 
+    setIsRenaming(true)
+    try {
+      await renameSession(props.instanceId, target.id, nextTitle)
+      setRenameTarget(null)
+    } catch (error) {
+      log.error(`Failed to rename session ${target.id}:`, error)
+      showToastNotification({ message: "Unable to rename session", variant: "error" })
+    } finally {
+      setIsRenaming(false)
+    }
+  }
  
 
-  const removeMouseListeners = () => {
-    if (mouseMoveHandler) {
-      document.removeEventListener("mousemove", mouseMoveHandler)
-      mouseMoveHandler = null
-    }
-    if (mouseUpHandler) {
-      document.removeEventListener("mouseup", mouseUpHandler)
-      mouseUpHandler = null
-    }
-  }
- 
-  const removeTouchListeners = () => {
-    if (touchMoveHandler) {
-      document.removeEventListener("touchmove", touchMoveHandler)
-      touchMoveHandler = null
-    }
-    if (touchEndHandler) {
-      document.removeEventListener("touchend", touchEndHandler)
-      touchEndHandler = null
-    }
-  }
- 
-  const stopResizing = () => {
-    setIsResizing(false)
-    removeMouseListeners()
-    removeTouchListeners()
-  }
- 
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isResizing()) return
-    const diff = event.clientX - startX()
-    const newWidth = clampWidth(startWidth() + diff)
-    setSidebarWidth(newWidth)
-  }
- 
-  const handleMouseUp = () => {
-    stopResizing()
-  }
- 
-  const handleTouchMove = (event: TouchEvent) => {
-    if (!isResizing()) return
-    const touch = event.touches[0]
-    if (!touch) return
-    const diff = touch.clientX - startX()
-    const newWidth = clampWidth(startWidth() + diff)
-    setSidebarWidth(newWidth)
-  }
- 
-  const handleTouchEnd = () => {
-    stopResizing()
-  }
- 
-  const handleMouseDown = (event: MouseEvent) => {
-    event.preventDefault()
-    setIsResizing(true)
-    setStartX(event.clientX)
-    setStartWidth(sidebarWidth())
- 
-    mouseMoveHandler = handleMouseMove
-    mouseUpHandler = handleMouseUp
- 
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
- 
-  const handleTouchStart = (event: TouchEvent) => {
-    event.preventDefault()
-    const touch = event.touches[0]
-    if (!touch) return
-    setIsResizing(true)
-    setStartX(touch.clientX)
-    setStartWidth(sidebarWidth())
- 
-    touchMoveHandler = handleTouchMove
-    touchEndHandler = handleTouchEnd
- 
-    document.addEventListener("touchmove", handleTouchMove)
-    document.addEventListener("touchend", handleTouchEnd)
-  }
- 
-  onCleanup(() => {
-    removeMouseListeners()
-    removeTouchListeners()
-  })
- 
-  const SessionRow: Component<{ sessionId: string; canClose?: boolean }> = (rowProps) => {
-    const session = () => props.sessions.get(rowProps.sessionId)
+  const SessionRow: Component<{
+    sessionId: string
+    isChild?: boolean
+    isLastChild?: boolean
+    hasChildren?: boolean
+    expanded?: boolean
+    onToggleExpand?: () => void
+  }> = (rowProps) => {
+    const session = createMemo(() => sessionStateSessions().get(props.instanceId)?.get(rowProps.sessionId))
     if (!session()) {
       return <></>
     }
@@ -231,45 +175,65 @@ const SessionList: Component<SessionListProps> = (props) => {
     const title = () => session()?.title || "Untitled"
     const status = () => getSessionStatus(props.instanceId, rowProps.sessionId)
     const statusLabel = () => formatSessionStatus(status())
-    const pendingPermission = () => Boolean(session()?.pendingPermission)
-    const statusClassName = () => (pendingPermission() ? "session-permission" : `session-${status()}`)
-    const statusText = () => (pendingPermission() ? "Needs Permission" : statusLabel())
+    const needsPermission = () => Boolean(session()?.pendingPermission)
+    const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
+    const needsInput = () => needsPermission() || needsQuestion()
+    const statusClassName = () => (needsInput() ? "session-permission" : `session-${status()}`)
+    const statusText = () => (needsPermission() ? "Needs Permission" : needsQuestion() ? "Needs Input" : statusLabel())
  
     return (
        <div class="session-list-item group">
 
         <button
-          class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
+          class={`session-item-base ${rowProps.isChild ? `session-item-child${rowProps.isLastChild ? " session-item-child-last" : ""} session-item-border-assistant session-item-kind-assistant` : "session-item-border-user session-item-kind-user"} ${isActive() ? "session-item-active" : "session-item-inactive"}`}
+          data-session-id={rowProps.sessionId}
           onClick={() => selectSession(rowProps.sessionId)}
           title={title()}
           role="button"
           aria-selected={isActive()}
+          aria-expanded={rowProps.hasChildren ? Boolean(rowProps.expanded) : undefined}
         >
           <div class="session-item-row session-item-header">
             <div class="session-item-title-row">
-              <MessageSquare class="w-4 h-4 flex-shrink-0" />
-              <span class="session-item-title truncate">{title()}</span>
+              {rowProps.isChild ? (
+                <Bot class="w-4 h-4 flex-shrink-0" />
+              ) : (
+                <User class="w-4 h-4 flex-shrink-0" />
+              )}
+              <span class="session-item-title session-item-title--clamp">{title()}</span>
             </div>
-            <Show when={rowProps.canClose}>
-              <span
-                class="session-item-close opacity-80 hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
-                onClick={(event) => {
-                  event.stopPropagation()
-                  props.onClose(rowProps.sessionId)
-                }}
-                role="button"
-                tabIndex={0}
-                aria-label="Close session"
-              >
-                <X class="w-3 h-3" />
-              </span>
-            </Show>
           </div>
           <div class="session-item-row session-item-meta">
-            <span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
-              <span class="status-dot" />
-              {statusText()}
-            </span>
+            <div class="flex items-center gap-2 min-w-0">
+              <Show
+                when={rowProps.hasChildren && !rowProps.isChild}
+                fallback={
+                  rowProps.isChild ? null : <span class="session-item-expander session-item-expander--spacer" aria-hidden="true" />
+                }
+              >
+                <span
+                  class={`session-item-expander opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    rowProps.onToggleExpand?.()
+                  }}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={rowProps.expanded ? "Collapse session" : "Expand session"}
+                  title={rowProps.expanded ? "Collapse" : "Expand"}
+                >
+                  <ChevronDown class={`w-3.5 h-3.5 transition-transform ${rowProps.expanded ? "" : "-rotate-90"}`} />
+                </span>
+              </Show>
+              <span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
+                {needsInput() ? (
+                  <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+                ) : (
+                  <span class="status-dot" />
+                )}
+                {statusText()}
+              </span>
+            </div>
             <div class="session-item-actions">
               <span
                 class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
@@ -281,6 +245,19 @@ const SessionList: Component<SessionListProps> = (props) => {
               >
                 <Copy class="w-3 h-3" />
               </span>
+              <span
+                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  openRenameDialog(rowProps.sessionId)
+                }}
+                role="button"
+                tabIndex={0}
+                aria-label="Rename session"
+                title="Rename session"
+              >
+                <Pencil class="w-3 h-3" />
+              </span>
               <span
                 class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
                 onClick={(event) => handleDeleteSession(event, rowProps.sessionId)}
@@ -312,50 +289,73 @@ const SessionList: Component<SessionListProps> = (props) => {
     )
   }
  
-  const userSessionIds = createMemo(
-    () => {
-      const ids: string[] = []
-      for (const session of props.sessions.values()) {
-        if (session.parentId === null) {
-          ids.push(session.id)
-        }
-      }
-      return ids
-    },
-    undefined,
-    { equals: arraysEqual },
-  )
- 
-  const childSessionIds = createMemo(
-    () => {
-      const children: { id: string; updated: number }[] = []
-      for (const session of props.sessions.values()) {
-        if (session.parentId !== null) {
-          children.push({ id: session.id, updated: session.time.updated ?? 0 })
-        }
-      }
-      if (children.length <= 1) {
-        return children.map((entry) => entry.id)
-      }
-      children.sort((a, b) => b.updated - a.updated)
-      return children.map((entry) => entry.id)
-    },
-    undefined,
-    { equals: arraysEqual },
-  )
+  const activeParentId = createMemo(() => {
+    const activeId = props.activeSessionId
+    if (!activeId || activeId === "info") return null
+
+    const activeSession = sessionStateSessions().get(props.instanceId)?.get(activeId)
+    if (!activeSession) return null
+
+    return activeSession.parentId ?? activeSession.id
+  })
+
+  createEffect(() => {
+    const parentId = activeParentId()
+    if (!parentId) return
+    ensureSessionParentExpanded(props.instanceId, parentId)
+  })
  
+  const listEl = createSignal<HTMLElement | null>(null)
+
+  const escapeCss = (value: string) => {
+    if (typeof CSS !== "undefined" && typeof (CSS as any).escape === "function") {
+      return (CSS as any).escape(value)
+    }
+    return value.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")
+  }
+
+  const scrollActiveIntoView = (sessionId: string) => {
+    const root = listEl[0]()
+    if (!root) return
+
+    const selector = `[data-session-id="${escapeCss(sessionId)}"]`
+
+    const scrollNow = () => {
+      const target = root.querySelector(selector) as HTMLElement | null
+      if (!target) return
+      target.scrollIntoView({ block: "nearest", inline: "nearest" })
+    }
+
+    if (typeof requestAnimationFrame === "undefined") {
+      scrollNow()
+      return
+    }
+
+    // Wait a couple frames so expand/collapse DOM settles.
+    let raf1 = 0
+    let raf2 = 0
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        scrollNow()
+      })
+    })
+
+    onCleanup(() => {
+      if (raf1) cancelAnimationFrame(raf1)
+      if (raf2) cancelAnimationFrame(raf2)
+    })
+  }
+
+  createEffect(() => {
+    const activeId = props.activeSessionId
+    if (!activeId || activeId === "info") return
+    scrollActiveIntoView(activeId)
+  })
+
   return (
     <div
       class="session-list-container bg-surface-secondary border-r border-base flex flex-col w-full"
     >
-      <div
-        class="session-resize-handle"
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}
-        role="presentation"
-        aria-hidden="true"
-      />
-
       <Show when={props.showHeader !== false}>
         <div class="session-list-header p-3 border-b border-base">
           {props.headerContent ?? (
@@ -369,46 +369,34 @@ const SessionList: Component<SessionListProps> = (props) => {
         </div>
       </Show>
 
-      <div class="session-list flex-1 overflow-y-auto">
-          <div class="session-section">
-            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
-              Instance
-            </div>
-            <div class="session-list-item group">
-              <button
-                class={`session-item-base ${props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"}`}
-                onClick={() => selectSession("info")}
-                title="Instance Info"
-                role="button"
-                aria-selected={props.activeSessionId === "info"}
-              >
-                <div class="session-item-row session-item-header">
-                  <div class="session-item-title-row">
-                    <Info class="w-4 h-4 flex-shrink-0" />
-                    <span class="session-item-title truncate">Instance Info</span>
-                  </div>
-                  {infoShortcut && <Kbd shortcut={formatShortcut(infoShortcut)} class="ml-2 not-italic" />}
-                </div>
-              </button>
-            </div>
-          </div>
+      <div class="session-list flex-1 overflow-y-auto" ref={(el) => listEl[1](el)}>
 
+         <Show when={props.threads.length > 0}>
+           <div class="session-section">
+             <For each={props.threads}>
 
-        <Show when={userSessionIds().length > 0}>
-          <div class="session-section">
-            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
-              User Session
-            </div>
-            <For each={userSessionIds()}>{(id) => <SessionRow sessionId={id} canClose />}</For>
-          </div>
-        </Show>
+              {(thread) => {
+                const expanded = () => isSessionParentExpanded(props.instanceId, thread.parent.id)
+                return (
+                  <>
+                      <SessionRow
+                        sessionId={thread.parent.id}
+                        hasChildren={thread.children.length > 0}
+                        expanded={expanded()}
+                        onToggleExpand={() => toggleSessionParentExpanded(props.instanceId, thread.parent.id)}
+                      />
 
-        <Show when={childSessionIds().length > 0}>
-          <div class="session-section">
-            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
-              Agent Sessions
-            </div>
-            <For each={childSessionIds()}>{(id) => <SessionRow sessionId={id} />}</For>
+                    <Show when={expanded() && thread.children.length > 0}>
+                      <For each={thread.children}>
+                        {(child, index) => (
+                          <SessionRow sessionId={child.id} isChild isLastChild={index() === thread.children.length - 1} />
+                        )}
+                      </For>
+                    </Show>
+                  </>
+                )
+              }}
+            </For>
           </div>
         </Show>
       </div>
@@ -418,8 +406,18 @@ const SessionList: Component<SessionListProps> = (props) => {
           {props.footerContent ?? null}
         </div>
       </Show>
+
+      <SessionRenameDialog
+        open={Boolean(renameTarget())}
+        currentTitle={renameTarget()?.title ?? ""}
+        sessionLabel={renameTarget()?.label}
+        isSubmitting={isRenaming()}
+        onRename={handleRenameSubmit}
+        onClose={closeRenameDialog}
+      />
     </div>
   )
 }
 
 export default SessionList
+

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

@@ -0,0 +1,130 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { Component, Show, createEffect, createSignal } from "solid-js"
+
+interface SessionRenameDialogProps {
+  open: boolean
+  currentTitle: string
+  sessionLabel?: string
+  isSubmitting?: boolean
+  onRename: (nextTitle: string) => Promise<void> | void
+  onClose: () => void
+}
+
+const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
+  const [title, setTitle] = createSignal("")
+  const inputId = `session-rename-${Math.random().toString(36).slice(2)}`
+  let inputRef: HTMLInputElement | undefined
+
+  createEffect(() => {
+    if (!props.open) return
+    setTitle(props.currentTitle ?? "")
+  })
+
+  createEffect(() => {
+    if (!props.open) return
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") return
+    window.requestAnimationFrame(() => {
+      inputRef?.focus()
+      inputRef?.select()
+    })
+  })
+
+  const isSubmitting = () => Boolean(props.isSubmitting)
+  const isRenameDisabled = () => isSubmitting() || !title().trim()
+
+  async function handleRename(event?: Event) {
+    event?.preventDefault()
+    if (isRenameDisabled()) return
+    await props.onRename(title().trim())
+  }
+
+  const description = () => {
+    if (props.sessionLabel && props.sessionLabel.trim()) {
+      return `Update the title for "${props.sessionLabel}".`
+    }
+    return "Set a new title for this session."
+  }
+
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={(open) => {
+        if (!open && !isSubmitting()) {
+          props.onClose()
+        }
+      }}
+    >
+      <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" tabIndex={-1}>
+            <Dialog.Title class="text-lg font-semibold text-primary">Rename Session</Dialog.Title>
+            <Dialog.Description class="text-sm text-secondary mt-1">
+              {description()}
+            </Dialog.Description>
+
+            <form class="mt-4 space-y-4" onSubmit={handleRename}>
+              <div class="space-y-2">
+                <label class="text-sm font-medium text-secondary" for={inputId}>
+                  Session name
+                </label>
+                <input
+                  id={inputId}
+                  ref={(element) => {
+                    inputRef = element
+                  }}
+                  type="text"
+                  value={title()}
+                  onInput={(event) => setTitle(event.currentTarget.value)}
+                  placeholder="Enter a session name"
+                  class="w-full px-3 py-2 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent"
+                />
+              </div>
+
+              <div class="flex justify-end gap-3">
+                <button
+                  type="button"
+                  class="button-tertiary"
+                  onClick={() => {
+                    if (!isSubmitting()) {
+                      props.onClose()
+                    }
+                  }}
+                  disabled={isSubmitting()}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="button-primary flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+                  disabled={isRenameDisabled()}
+                >
+                  <Show
+                    when={!isSubmitting()}
+                    fallback={
+                      <>
+                        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                          <path
+                            class="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          />
+                        </svg>
+                        <span>Renaming…</span>
+                      </>
+                    }
+                  >
+                    Rename
+                  </Show>
+                </button>
+              </div>
+            </form>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export default SessionRenameDialog

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

@@ -1,15 +1,19 @@
-import { Show, createMemo, createEffect, type Component } from "solid-js"
+import { Show, For, createMemo, createEffect, type Component } from "solid-js"
+import { Expand } from "lucide-solid"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
 import MessageSection from "../message-section"
 import { messageStoreBus } from "../../stores/message-v2/bus"
 import PromptInput from "../prompt-input"
+import type { Attachment as PromptAttachment } from "../../types/attachment"
+import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
 import { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
 import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
+import { requestData } from "../../lib/opencode-api"
 
 const log = getLogger("session")
 
@@ -26,6 +30,7 @@ interface SessionViewProps {
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
+  isActive?: boolean
 }
 
 export const SessionView: Component<SessionViewProps> = (props) => {
@@ -37,7 +42,75 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     if (!currentSession) return false
     return getSessionBusyStatus(props.instanceId, currentSession.id)
   })
+
+  const sessionNeedsInput = createMemo(() => {
+    const currentSession = session()
+    if (!currentSession) return false
+    return Boolean(currentSession.pendingPermission || (currentSession as any).pendingQuestion)
+  })
+
+  const attachments = createMemo(() => getAttachments(props.instanceId, props.sessionId))
+
+  function handleExpandTextAttachment(attachment: PromptAttachment) {
+    if (attachment.source.type !== "text") return
+
+    const textarea = rootRef?.querySelector(".prompt-input") as HTMLTextAreaElement | null
+    const value = attachment.source.value
+    const match = attachment.display.match(/pasted #(\d+)/)
+    const placeholder = match ? `[pasted #${match[1]}]` : null
+
+    const currentText = textarea?.value ?? ""
+
+    let nextText = currentText
+    let selectionTarget: number | null = null
+
+    if (placeholder) {
+      const placeholderIndex = currentText.indexOf(placeholder)
+      if (placeholderIndex !== -1) {
+        nextText =
+          currentText.substring(0, placeholderIndex) +
+          value +
+          currentText.substring(placeholderIndex + placeholder.length)
+        selectionTarget = placeholderIndex + value.length
+      }
+    }
+
+    if (nextText === currentText) {
+      if (textarea) {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        nextText = currentText.substring(0, start) + value + currentText.substring(end)
+        selectionTarget = start + value.length
+      } else {
+        nextText = currentText + value
+      }
+    }
+
+    if (textarea) {
+      textarea.value = nextText
+      textarea.dispatchEvent(new Event("input", { bubbles: true }))
+      textarea.focus()
+      if (selectionTarget !== null) {
+        textarea.setSelectionRange(selectionTarget, selectionTarget)
+      }
+    }
+
+    removeAttachment(props.instanceId, props.sessionId, attachment.id)
+  }
+
   let scrollToBottomHandle: (() => void) | undefined
+  let rootRef: HTMLDivElement | undefined
+  function scheduleScrollToBottom() {
+    if (!scrollToBottomHandle) return
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => scrollToBottomHandle?.())
+    })
+  }
+  createEffect(() => {
+    if (!props.isActive) return
+    scheduleScrollToBottom()
+  })
+  let quoteHandler: ((text: string, mode: "quote" | "code") => void) | null = null
  
   createEffect(() => {
     const currentSession = session()
@@ -45,12 +118,24 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       loadMessages(props.instanceId, currentSession.id).catch((error) => log.error("Failed to load messages", error))
     }
   })
+
+  function registerQuoteHandler(handler: (text: string, mode: "quote" | "code") => void) {
+    quoteHandler = handler
+    return () => {
+      if (quoteHandler === handler) {
+        quoteHandler = null
+      }
+    }
+  }
+
+  function handleQuoteSelection(text: string, mode: "quote" | "code") {
+    if (quoteHandler) {
+      quoteHandler(text, mode)
+    }
+  }
  
   async function handleSendMessage(prompt: string, attachments: Attachment[]) {
-
-    if (scrollToBottomHandle) {
-      scrollToBottomHandle()
-    }
+    scheduleScrollToBottom()
     await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
   }
 
@@ -97,14 +182,17 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     if (!instance || !instance.client) return
 
     try {
-      await instance.client.session.revert({
-        path: { id: props.sessionId },
-        body: { messageID: messageId },
-      })
+      await requestData(
+        instance.client.session.revert({
+          sessionID: props.sessionId,
+          messageID: messageId,
+        }),
+        "session.revert",
+      )
 
       const restoredText = getUserMessageText(messageId)
       if (restoredText) {
-        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        const textarea = rootRef?.querySelector(".prompt-input") as HTMLTextAreaElement | undefined
         if (textarea) {
           textarea.value = restoredText
           textarea.dispatchEvent(new Event("input", { bubbles: true }))
@@ -140,7 +228,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       await loadMessages(props.instanceId, forkedSession.id).catch((error) => log.error("Failed to load forked session messages", error))
 
       if (restoredText) {
-        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        const textarea = rootRef?.querySelector(".prompt-input") as HTMLTextAreaElement | undefined
         if (textarea) {
           textarea.value = restoredText
           textarea.dispatchEvent(new Event("input", { bubbles: true }))
@@ -170,32 +258,77 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         const activeSession = sessionAccessor()
         if (!activeSession) return null
         return (
-          <div class="session-view">
+          <div ref={rootRef} class="session-view">
             <MessageSection
                instanceId={props.instanceId}
                sessionId={activeSession.id}
                loading={messagesLoading()}
                onRevert={handleRevert}
                onFork={handleFork}
-               registerScrollToBottom={(fn) => {
-                 scrollToBottomHandle = fn
-               }}
+               isActive={props.isActive}
+                registerScrollToBottom={(fn) => {
+                  scrollToBottomHandle = fn
+                  if (props.isActive) {
+                    scheduleScrollToBottom()
+                  }
+                }}
+
+
+
+
                showSidebarToggle={props.showSidebarToggle}
                onSidebarToggle={props.onSidebarToggle}
                forceCompactStatusLayout={props.forceCompactStatusLayout}
+               onQuoteSelection={handleQuoteSelection}
              />
 
 
-            <PromptInput
-              instanceId={props.instanceId}
-              instanceFolder={props.instanceFolder}
-              sessionId={activeSession.id}
-              onSend={handleSendMessage}
-              onRunShell={handleRunShell}
-              escapeInDebounce={props.escapeInDebounce}
-              isSessionBusy={sessionBusy()}
-              onAbortSession={handleAbortSession}
-            />
+              <Show when={attachments().length > 0}>
+                <div class="flex flex-wrap items-center gap-1.5 border-t px-3 py-2" style="border-color: var(--border-base);">
+                  <For each={attachments()}>
+                    {(attachment) => {
+                      const isText = attachment.source.type === "text"
+                      return (
+                        <div class="attachment-chip" title={attachment.source.type === "file" ? attachment.source.path : undefined}>
+                          <span class="font-mono">{attachment.display}</span>
+                          <Show when={isText}>
+                            <button
+                              type="button"
+                              class="attachment-expand"
+                              onClick={() => handleExpandTextAttachment(attachment)}
+                              aria-label="Expand pasted text"
+                              title="Insert pasted text"
+                            >
+                              <Expand class="h-3 w-3" aria-hidden="true" />
+                            </button>
+                          </Show>
+                          <button
+                            type="button"
+                            class="attachment-remove"
+                            onClick={() => removeAttachment(props.instanceId, props.sessionId, attachment.id)}
+                            aria-label="Remove attachment"
+                          >
+                            ×
+                          </button>
+                        </div>
+                      )
+                    }}
+                  </For>
+                </div>
+              </Show>
+
+              <PromptInput
+               instanceId={props.instanceId}
+               instanceFolder={props.instanceFolder}
+               sessionId={activeSession.id}
+               onSend={handleSendMessage}
+               onRunShell={handleRunShell}
+               escapeInDebounce={props.escapeInDebounce}
+               isSessionBusy={sessionBusy()}
+               disabled={sessionNeedsInput()}
+               onAbortSession={handleAbortSession}
+               registerQuoteHandler={registerQuoteHandler}
+             />
           </div>
         )
       }}

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

@@ -6,24 +6,32 @@ import { useTheme } from "../lib/theme"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import { useConfig } from "../stores/preferences"
 import type { DiffViewMode } from "../stores/preferences"
-import { sendPermissionResponse } from "../stores/instances"
+import { activeInterruption, sendPermissionResponse, sendQuestionReject, sendQuestionReply } from "../stores/instances"
+import { getPermissionDisplayTitle, getPermissionKind, getPermissionSessionId } from "../types/permission"
+import type { QuestionRequest } from "@opencode-ai/sdk/v2"
 import type { TextPart, RenderCache } from "../types/message"
 import { resolveToolRenderer } from "./tool-call/renderers"
 import type {
   DiffPayload,
   DiffRenderOptions,
   MarkdownRenderOptions,
+  AnsiRenderOptions,
   ToolCallPart,
   ToolRendererContext,
   ToolScrollHelpers,
 } from "./tool-call/types"
-import { getRelativePath, getToolIcon, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning } from "./tool-call/utils"
+import { getRelativePath, getToolIcon, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning, getDefaultToolAction } from "./tool-call/utils"
+import { resolveTitleForTool } from "./tool-call/tool-title"
 import { getLogger } from "../lib/logger"
+import { ansiToHtml, createAnsiStreamRenderer, hasAnsi } from "../lib/ansi"
+import { escapeHtml } from "../lib/markdown"
 
 const log = getLogger("session")
 
 type ToolState = import("@opencode-ai/sdk").ToolState
 
+type AnsiRenderCache = RenderCache & { hasAnsi: boolean }
+
 const TOOL_CALL_CACHE_SCOPE = "tool-call"
 const TOOL_SCROLL_SENTINEL_MARGIN_PX = 48
 const TOOL_SCROLL_INTENT_WINDOW_MS = 600
@@ -117,21 +125,16 @@ function extractDiagnostics(state: ToolState | undefined): DiagnosticEntry[] {
   ].find((value) => typeof value === "string" && value.length > 0) as string | undefined
 
   const normalizedPreferred = preferredPath ? normalizeDiagnosticPath(preferredPath) : undefined
+  if (!normalizedPreferred) return []
   const candidateEntries = Object.entries(diagnosticsMap).filter(([, items]) => Array.isArray(items) && items.length > 0)
   if (candidateEntries.length === 0) return []
 
-  const prioritizedEntries = (() => {
-    if (!normalizedPreferred) return candidateEntries
-    const matched = candidateEntries.filter(([path]) => {
-      const normalized = normalizeDiagnosticPath(path)
-      if (normalized === normalizedPreferred) return true
-      if (normalized.endsWith(`/${normalizedPreferred}`)) return true
-      const normalizedBase = normalized.split("/").pop()
-      const preferredBase = normalizedPreferred.split("/").pop()
-      return normalizedBase && preferredBase ? normalizedBase === preferredBase : false
-    })
-    return matched.length > 0 ? matched : candidateEntries
-  })()
+  const prioritizedEntries = candidateEntries.filter(([path]) => {
+    const normalized = normalizeDiagnosticPath(path)
+    return normalized === normalizedPreferred
+  })
+
+  if (prioritizedEntries.length === 0) return []
 
   const entries: DiagnosticEntry[] = []
   for (const [pathKey, list] of prioritizedEntries) {
@@ -221,7 +224,13 @@ export default function ToolCall(props: ToolCallProps) {
   const { isDark } = useTheme()
   const toolCallMemo = createMemo(() => props.toolCall)
   const toolName = createMemo(() => toolCallMemo()?.tool || "")
-  const toolCallIdentifier = createMemo(() => toolCallMemo()?.callID || props.toolCallId || toolCallMemo()?.id || "")
+  const toolCallIdentifier = createMemo(() => {
+    const partId = toolCallMemo()?.id
+    if (!partId) {
+      throw new Error("Tool call requires a part id")
+    }
+    return partId
+  })
   const toolState = createMemo(() => toolCallMemo()?.state)
 
   const cacheContext = createMemo(() => ({
@@ -231,22 +240,38 @@ export default function ToolCall(props: ToolCallProps) {
   }))
 
   const store = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
+  const activeRequest = createMemo(() => activeInterruption().get(props.instanceId) ?? null)
 
-  const createVariantCache = (variant: string) =>
+  const cacheVersion = createMemo(() => {
+    if (typeof props.partVersion === "number") {
+      return String(props.partVersion)
+    }
+    if (typeof props.messageVersion === "number") {
+      return String(props.messageVersion)
+    }
+    return "noversion"
+  })
 
+  const createVariantCache = (variant: string | (() => string), version?: () => string) =>
     useGlobalCache({
       instanceId: () => props.instanceId,
       sessionId: () => props.sessionId,
       scope: TOOL_CALL_CACHE_SCOPE,
-      key: () => {
+      cacheId: () => {
         const context = cacheContext()
-        return makeRenderCacheKey(context.toolCallId || undefined, context.messageId, context.partId, variant)
+        const resolvedVariant = typeof variant === "function" ? variant() : variant
+        return makeRenderCacheKey(context.toolCallId || undefined, context.messageId, context.partId, resolvedVariant)
       },
+      version: () => (version ? version() : cacheVersion()),
     })
 
   const diffCache = createVariantCache("diff")
   const permissionDiffCache = createVariantCache("permission-diff")
-  const markdownCache = createVariantCache("markdown")
+  const ansiRunningCache = createVariantCache("ansi-running", () => "running")
+  const ansiFinalCache = createVariantCache("ansi-final")
+  const runningAnsiRenderer = createAnsiStreamRenderer()
+  let runningAnsiSource = ""
+
   const permissionState = createMemo(() => store().getPermissionState(props.messageId, toolCallIdentifier()))
   const pendingPermission = createMemo(() => {
     const state = permissionState()
@@ -255,6 +280,16 @@ export default function ToolCall(props: ToolCallProps) {
     }
     return toolCallMemo()?.pendingPermission
   })
+
+  const questionState = createMemo(() => store().getQuestionState(props.messageId, toolCallIdentifier()))
+  const pendingQuestion = createMemo(() => {
+    const state = questionState()
+    if (state) {
+      return { request: state.entry.request as QuestionRequest, active: state.active }
+    }
+    return undefined
+  })
+
   const toolOutputDefaultExpanded = createMemo(() => (preferences().toolOutputExpansion || "expanded") === "expanded")
   const diagnosticsDefaultExpanded = createMemo(() => (preferences().diagnosticsExpansion || "expanded") === "expanded")
 
@@ -269,27 +304,45 @@ export default function ToolCall(props: ToolCallProps) {
 
   const [userExpanded, setUserExpanded] = createSignal<boolean | null>(null)
 
+  const isPermissionActive = createMemo(() => {
+    const pending = pendingPermission()
+    if (!pending?.permission) return false
+    const active = activeRequest()
+    return active?.kind === "permission" && active.id === pending.permission.id
+  })
+
+  const isQuestionActive = createMemo(() => {
+    const pending = pendingQuestion()
+    if (!pending?.request) return false
+    const active = activeRequest()
+    return active?.kind === "question" && active.id === pending.request.id
+  })
+
   const expanded = () => {
-    const permission = pendingPermission()
-    if (permission?.active) return true
+    if (isPermissionActive() || isQuestionActive()) return true
     const override = userExpanded()
     if (override !== null) return override
     return defaultExpandedForTool()
   }
 
   const permissionDetails = createMemo(() => pendingPermission()?.permission)
-  const isPermissionActive = createMemo(() => pendingPermission()?.active === true)
+  const questionDetails = createMemo(() => pendingQuestion()?.request)
+
   const activePermissionKey = createMemo(() => {
     const permission = permissionDetails()
     return permission && isPermissionActive() ? permission.id : ""
   })
+
+  const activeQuestionKey = createMemo(() => {
+    const request = questionDetails()
+    return request && isQuestionActive() ? request.id : ""
+  })
   const [permissionSubmitting, setPermissionSubmitting] = createSignal(false)
   const [permissionError, setPermissionError] = createSignal<string | null>(null)
   const [diagnosticsOverride, setDiagnosticsOverride] = createSignal<boolean | undefined>(undefined)
 
   const diagnosticsExpanded = () => {
-    const permission = pendingPermission()
-    if (permission?.active) return true
+    if (isPermissionActive() || isQuestionActive()) return true
     const override = diagnosticsOverride()
     if (override !== undefined) return override
     return diagnosticsDefaultExpanded()
@@ -490,7 +543,7 @@ export default function ToolCall(props: ToolCallProps) {
   })
 
   createEffect(() => {
-    const activeKey = activePermissionKey()
+    const activeKey = activePermissionKey() || activeQuestionKey()
     if (!activeKey) return
     requestAnimationFrame(() => {
       toolCallRootRef?.scrollIntoView({ block: "center", behavior: "smooth" })
@@ -516,6 +569,81 @@ export default function ToolCall(props: ToolCallProps) {
     onCleanup(() => document.removeEventListener("keydown", handler))
   })
 
+  const [questionSubmitting, setQuestionSubmitting] = createSignal(false)
+  const [questionError, setQuestionError] = createSignal<string | null>(null)
+
+  const [questionDraftAnswers, setQuestionDraftAnswers] = createSignal<Record<string, string[][]>>({})
+  const [questionCustomDraft, setQuestionCustomDraft] = createSignal<Record<string, string[]>>({})
+
+  function isTextInputFocused() {
+    const active = document.activeElement
+    return (
+      active?.tagName === "TEXTAREA" ||
+      active?.tagName === "INPUT" ||
+      (active?.hasAttribute("contenteditable") ?? false)
+    )
+  }
+
+  async function handleQuestionSubmit() {
+    const request = questionDetails()
+    if (!request || !isQuestionActive()) {
+      return
+    }
+    const answers = (questionDraftAnswers()[request.id] ?? []).map((x) => (Array.isArray(x) ? x : []))
+    const normalized = request.questions.map((_, index) => answers[index] ?? [])
+    if (normalized.some((item) => (item?.length ?? 0) === 0)) {
+      setQuestionError("Please answer all questions before submitting.")
+      return
+    }
+
+    setQuestionSubmitting(true)
+    setQuestionError(null)
+    try {
+      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
+      await sendQuestionReply(props.instanceId, sessionId, request.id, normalized)
+    } catch (error) {
+      log.error("Failed to send question reply", error)
+      setQuestionError(error instanceof Error ? error.message : "Unable to reply")
+    } finally {
+      setQuestionSubmitting(false)
+    }
+  }
+
+  async function handleQuestionDismiss() {
+    const request = questionDetails()
+    if (!request || !isQuestionActive()) {
+      return
+    }
+    setQuestionSubmitting(true)
+    setQuestionError(null)
+    try {
+      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
+      await sendQuestionReject(props.instanceId, sessionId, request.id)
+    } catch (error) {
+      log.error("Failed to reject question", error)
+      setQuestionError(error instanceof Error ? error.message : "Unable to dismiss")
+    } finally {
+      setQuestionSubmitting(false)
+    }
+  }
+
+  createEffect(() => {
+    const activeKey = activeQuestionKey()
+    if (!activeKey) return
+    const handler = (event: KeyboardEvent) => {
+      if (isTextInputFocused()) return
+      if (event.key === "Enter") {
+        event.preventDefault()
+        void handleQuestionSubmit()
+      } else if (event.key === "Escape") {
+        event.preventDefault()
+        void handleQuestionDismiss()
+      }
+    }
+    document.addEventListener("keydown", handler)
+    onCleanup(() => document.removeEventListener("keydown", handler))
+  })
+
 
   const statusIcon = () => {
     const status = toolState()?.status || ""
@@ -540,7 +668,7 @@ export default function ToolCall(props: ToolCallProps) {
 
   const combinedStatusClass = () => {
     const base = statusClass()
-    return pendingPermission() ? `${base} tool-call-awaiting-permission` : base
+    return pendingPermission() || pendingQuestion() ? `${base} tool-call-awaiting-permission` : base
   }
 
   function toggle() {
@@ -623,6 +751,75 @@ export default function ToolCall(props: ToolCallProps) {
     )
   }
 
+  function renderAnsiContent(options: AnsiRenderOptions) {
+    if (!options.content) {
+      return null
+    }
+
+    const size = options.size || "default"
+    const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}`
+    const cacheHandle = options.variant === "running" ? ansiRunningCache : ansiFinalCache
+    const cached = cacheHandle.get<AnsiRenderCache>()
+    const mode = typeof props.partVersion === "number" ? String(props.partVersion) : undefined
+    const isRunningVariant = options.variant === "running"
+
+    let nextCache: AnsiRenderCache
+
+    if (isRunningVariant) {
+      const content = options.content
+      const resetStreaming = !cached || !cached.text || !content.startsWith(cached.text) || cached.text !== runningAnsiSource
+
+      if (resetStreaming) {
+        const detectedAnsi = hasAnsi(content)
+        if (detectedAnsi) {
+          runningAnsiRenderer.reset()
+          const html = runningAnsiRenderer.render(content)
+          nextCache = { text: content, html, mode, hasAnsi: true }
+        } else {
+          runningAnsiRenderer.reset()
+          nextCache = { text: content, html: escapeHtml(content), mode, hasAnsi: false }
+        }
+      } else {
+        const delta = content.slice(cached.text.length)
+        if (delta.length === 0) {
+          nextCache = { ...cached, mode }
+        } else if (!cached.hasAnsi && hasAnsi(delta)) {
+          runningAnsiRenderer.reset()
+          const html = runningAnsiRenderer.render(content)
+          nextCache = { text: content, html, mode, hasAnsi: true }
+        } else if (cached.hasAnsi) {
+          const htmlChunk = runningAnsiRenderer.render(delta)
+          nextCache = { text: content, html: `${cached.html}${htmlChunk}`, mode, hasAnsi: true }
+        } else {
+          nextCache = { text: content, html: `${cached.html}${escapeHtml(delta)}`, mode, hasAnsi: false }
+        }
+      }
+
+      runningAnsiSource = nextCache.text
+      cacheHandle.set(nextCache)
+    } else {
+      if (cached && cached.text === options.content) {
+        nextCache = { ...cached, mode }
+      } else {
+        const detectedAnsi = hasAnsi(options.content)
+        const html = detectedAnsi ? ansiToHtml(options.content) : escapeHtml(options.content)
+        nextCache = { text: options.content, html, mode, hasAnsi: detectedAnsi }
+        cacheHandle.set(nextCache)
+      }
+    }
+
+    if (options.requireAnsi && !nextCache.hasAnsi) {
+      return null
+    }
+
+    return (
+      <div class={messageClass} ref={(element) => scrollHelpers.registerContainer(element)} onScroll={scrollHelpers.handleScroll}>
+        <pre class="tool-call-content tool-call-ansi" innerHTML={nextCache.html} />
+        {scrollHelpers.renderSentinel()}
+      </div>
+    )
+  }
+
   function renderMarkdownContent(options: MarkdownRenderOptions) {
     if (!options.content) {
       return null
@@ -632,14 +829,24 @@ export default function ToolCall(props: ToolCallProps) {
     const disableHighlight = options.disableHighlight || false
     const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}`
 
-    const markdownPart: TextPart = { type: "text", text: options.content }
-    const cached = markdownCache.get<RenderCache>()
-    if (cached) {
-      markdownPart.renderCache = cached
+    const state = toolState()
+    const shouldDeferMarkdown = Boolean(state && (state.status === "running" || state.status === "pending") && disableHighlight)
+    if (shouldDeferMarkdown) {
+      return (
+        <div class={messageClass} ref={(element) => scrollHelpers.registerContainer(element)} onScroll={scrollHelpers.handleScroll}>
+          <pre class="whitespace-pre-wrap break-words text-sm font-mono">{options.content}</pre>
+          {scrollHelpers.renderSentinel()}
+        </div>
+      )
     }
 
+    const partId = toolCallMemo()?.id
+    if (!partId) {
+      throw new Error("Tool call markdown requires a part id")
+    }
+    const markdownPart: TextPart = { id: partId, type: "text", text: options.content, version: props.partVersion }
+
     const handleMarkdownRendered = () => {
-      markdownCache.set(markdownPart.renderCache)
       handleScrollRendered()
       props.onContentRendered?.()
     }
@@ -648,6 +855,8 @@ export default function ToolCall(props: ToolCallProps) {
       <div class={messageClass} ref={(element) => scrollHelpers.registerContainer(element)} onScroll={scrollHelpers.handleScroll}>
         <Markdown
           part={markdownPart}
+          instanceId={props.instanceId}
+          sessionId={props.sessionId}
           isDark={isDark()}
           disableHighlight={disableHighlight}
           onRendered={handleMarkdownRendered}
@@ -668,6 +877,7 @@ export default function ToolCall(props: ToolCallProps) {
     messageVersion: messageVersionAccessor,
     partVersion: partVersionAccessor,
     renderMarkdown: renderMarkdownContent,
+    renderAnsi: renderAnsiContent,
     renderDiff: renderDiffContent,
     scrollHelpers,
   }
@@ -699,9 +909,18 @@ export default function ToolCall(props: ToolCallProps) {
 
   const renderToolTitle = () => {
     const state = toolState()
+    const currentTool = toolName()
+
+    if (currentTool !== "task") {
+      return resolveTitleForTool({ toolName: currentTool, state })
+    }
+
     if (!state) return getRendererAction()
     if (state.status === "pending") return getRendererAction()
 
+    const customTitle = renderer().getTitle?.(rendererContext)
+    if (customTitle) return customTitle
+
     if (isToolStateRunning(state) && state.title) {
       return state.title
     }
@@ -710,10 +929,7 @@ export default function ToolCall(props: ToolCallProps) {
       return state.title
     }
 
-    const customTitle = renderer().getTitle?.(rendererContext)
-    if (customTitle) return customTitle
-
-    return getToolName(toolName())
+    return getToolName(currentTool)
   }
 
   const renderToolBody = () => {
@@ -728,7 +944,7 @@ export default function ToolCall(props: ToolCallProps) {
     setPermissionSubmitting(true)
     setPermissionError(null)
     try {
-      const sessionId = permission.sessionID || props.sessionId
+      const sessionId = getPermissionSessionId(permission) || props.sessionId
       await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
     } catch (error) {
       log.error("Failed to send permission response", error)
@@ -773,11 +989,11 @@ export default function ToolCall(props: ToolCallProps) {
       <div class={`tool-call-permission ${active ? "tool-call-permission-active" : "tool-call-permission-queued"}`}>
         <div class="tool-call-permission-header">
           <span class="tool-call-permission-label">{active ? "Permission Required" : "Permission Queued"}</span>
-          <span class="tool-call-permission-type">{permission.type}</span>
+          <span class="tool-call-permission-type">{getPermissionKind(permission)}</span>
         </div>
         <div class="tool-call-permission-body">
           <div class="tool-call-permission-title">
-            <code>{permission.title}</code>
+            <code>{getPermissionDisplayTitle(permission)}</code>
           </div>
           <Show when={diffPayload}>
             {(payload) => (
@@ -839,6 +1055,218 @@ export default function ToolCall(props: ToolCallProps) {
     )
   }
 
+  const renderQuestionBlock = () => {
+    const state = toolState()
+    const request = questionDetails()
+    const isQuestionTool = toolName() === "question"
+
+    if (!request && !isQuestionTool) return null
+
+    const questionsSource = request?.questions ?? ((state as any)?.input?.questions as any[] | undefined) ?? []
+    const questions = Array.isArray(questionsSource) ? questionsSource : []
+    if (questions.length === 0) return null
+
+    const requestId = request?.id ?? (state as any)?.input?.requestID ?? `question-${toolCallMemo()?.id ?? "unknown"}`
+    const active = Boolean(request && isQuestionActive())
+
+    const completedAnswers = Array.isArray((state as any)?.metadata?.answers) ? ((state as any).metadata.answers as string[][]) : undefined
+    const answers = completedAnswers ?? questionDraftAnswers()[requestId] ?? []
+    const customInputs = questionCustomDraft()[requestId] ?? []
+
+    const updateAnswer = (questionIndex: number, next: string[]) => {
+      if (!active) return
+      setQuestionDraftAnswers((prev) => {
+        const current = prev[requestId] ?? []
+        const updated = [...current]
+        updated[questionIndex] = next
+        return { ...prev, [requestId]: updated }
+      })
+    }
+
+    const updateCustom = (questionIndex: number, value: string) => {
+      if (!active) return
+      setQuestionCustomDraft((prev) => {
+        const current = prev[requestId] ?? []
+        const updated = [...current]
+        updated[questionIndex] = value
+        return { ...prev, [requestId]: updated }
+      })
+    }
+
+    const toggleOption = (questionIndex: number, label: string) => {
+      const info = questions[questionIndex]
+      const multi = info?.multiple === true
+      const existing = answers[questionIndex] ?? []
+      if (multi) {
+        const next = existing.includes(label) ? existing.filter((x) => x !== label) : [...existing, label]
+        updateAnswer(questionIndex, next)
+        return
+      }
+      updateAnswer(questionIndex, [label])
+    }
+
+    const submitDisabled = () => {
+      if (!active) return true
+      if (questionSubmitting()) return true
+      return questions.some((_, index) => (answers[index]?.length ?? 0) === 0)
+    }
+
+    const showButtons = () => active
+
+    return (
+      <div class={`tool-call-permission ${active ? "tool-call-permission-active" : "tool-call-permission-queued"}`}>
+        <div class="tool-call-permission-header">
+          <span class="tool-call-permission-label">
+            {active ? "Question Required" : request ? "Question Queued" : "Questions"}
+          </span>
+          <span class="tool-call-permission-type">{questions.length === 1 ? "Question" : "Questions"}</span>
+        </div>
+
+        <div class="tool-call-permission-body">
+          <div class="flex flex-col gap-4">
+            <For each={questions}>
+              {(q, index) => {
+                const i = () => index()
+                const multi = () => q?.multiple === true
+                const selected = () => answers[i()] ?? []
+                const customValue = () => customInputs[i()] ?? ""
+                const inputType = () => (multi() ? "checkbox" : "radio")
+                const groupName = () => `question-${requestId}-${i()}`
+
+                return (
+                  <div class="rounded-md border border-base/60 bg-surface/30 p-3">
+                    <div class="flex items-baseline justify-between gap-2">
+                      <div class="text-xs">
+                        Q{i() + 1}: <span class="font-semibold">{q?.header}</span>
+                      </div>
+                      <Show when={multi()}>
+                        <div class="text-xs text-muted">Multiple</div>
+                      </Show>
+                    </div>
+
+                    <div class="mt-1 text-sm font-medium">{q?.question}</div>
+
+                      <div class="mt-3 flex flex-col gap-1">
+                        <For each={q?.options ?? []}>
+                          {(opt) => {
+                            const checked = () => selected().includes(opt.label)
+                            return (
+                              <label
+                                class={`flex items-start gap-2 py-1 ${active ? "cursor-pointer" : request ? "opacity-80" : ""}`}
+                                title={opt.description}
+                              >
+                                <input
+                                  type={inputType()}
+                                  name={groupName()}
+                                  checked={checked()}
+                                  disabled={!active || questionSubmitting()}
+                                  onChange={() => toggleOption(i(), opt.label)}
+                                />
+                                <div class="flex flex-col">
+                                  <div class="text-sm leading-tight">{opt.label}</div>
+                                  <div class="text-xs text-muted leading-tight">{opt.description}</div>
+                                </div>
+                              </label>
+                            )
+                          }}
+                        </For>
+
+                        <Show when={active}>
+                          <div class="mt-2 flex items-center gap-2">
+                            <input
+                              class="flex-1 rounded-md border border-base/50 bg-surface px-2 py-1 text-sm"
+                              type="text"
+                              placeholder="Type your own answer"
+                              value={customValue()}
+                              disabled={!active || questionSubmitting()}
+                              onInput={(e) => updateCustom(i(), e.currentTarget.value)}
+                            />
+                            <button
+                              type="button"
+                              class="tool-call-permission-button"
+                              disabled={!active || questionSubmitting() || !customValue().trim()}
+                              onClick={() => {
+                                const value = customValue().trim()
+                                if (!value) return
+                                updateCustom(i(), value)
+                                toggleOption(i(), value)
+                              }}
+                            >
+                              {multi() ? "Toggle" : "Select"}
+                            </button>
+                          </div>
+                        </Show>
+                      </div>
+
+                  </div>
+                )
+              }}
+            </For>
+
+            <Show when={showButtons()}>
+              <div class="tool-call-permission-actions">
+                <div class="tool-call-permission-buttons">
+                  <button
+                    type="button"
+                    class="tool-call-permission-button"
+                    disabled={submitDisabled()}
+                    onClick={() => handleQuestionSubmit()}
+                  >
+                    Submit
+                  </button>
+                  <button
+                    type="button"
+                    class="tool-call-permission-button"
+                    disabled={questionSubmitting()}
+                    onClick={() => handleQuestionDismiss()}
+                  >
+                    Dismiss
+                  </button>
+                </div>
+
+                <div class="tool-call-permission-shortcuts">
+                  <kbd class="kbd">Enter</kbd>
+                  <span>Submit</span>
+                  <kbd class="kbd">Esc</kbd>
+                  <span>Dismiss</span>
+                </div>
+
+                <Show when={questionError()}>
+                  <div class="tool-call-permission-error">{questionError()}</div>
+                </Show>
+              </div>
+            </Show>
+
+            <Show when={!active && request}>
+              <p class="tool-call-permission-queued-text">Waiting for earlier responses.</p>
+            </Show>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  createEffect(() => {
+    const request = questionDetails()
+    if (!request) {
+      setQuestionSubmitting(false)
+      setQuestionError(null)
+      return
+    }
+    setQuestionError(null)
+    const requestId = request.id
+    setQuestionDraftAnswers((prev) => {
+      if (prev[requestId]) return prev
+      const initial = request.questions.map(() => [])
+      return { ...prev, [requestId]: initial }
+    })
+    setQuestionCustomDraft((prev) => {
+      if (prev[requestId]) return prev
+      const initial = request.questions.map(() => "")
+      return { ...prev, [requestId]: initial }
+    })
+  })
+
   const status = () => toolState()?.status || ""
 
   onCleanup(() => {
@@ -882,11 +1310,12 @@ export default function ToolCall(props: ToolCallProps) {
           {renderError()}
  
           {renderPermissionBlock()}
+          {renderQuestionBlock()}
  
           <Show when={status() === "pending" && !pendingPermission()}>
             <div class="tool-call-pending-message">
               <span class="spinner-small"></span>
-              <span>Waiting for permission...</span>
+              <span>Waiting to run...</span>
             </div>
           </Show>
         </div>
@@ -907,33 +1336,3 @@ export default function ToolCall(props: ToolCallProps) {
     </div>
   )
 }
-
-function getDefaultToolAction(toolName: string) {
-  switch (toolName) {
-    case "task":
-      return "Delegating..."
-    case "bash":
-      return "Writing command..."
-    case "edit":
-      return "Preparing edit..."
-    case "webfetch":
-      return "Fetching from the web..."
-    case "glob":
-      return "Finding files..."
-    case "grep":
-      return "Searching content..."
-    case "list":
-      return "Listing directory..."
-    case "read":
-      return "Reading file..."
-    case "write":
-      return "Preparing write..."
-    case "todowrite":
-    case "todoread":
-      return "Planning..."
-    case "patch":
-      return "Preparing patch..."
-    default:
-      return "Working..."
-  }
-}

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

@@ -9,12 +9,18 @@ export const bashRenderer: ToolRenderer = {
     if (!state) return undefined
     const { input } = readToolStatePayload(state)
     const name = getToolName("bash")
-    if (typeof input.description === "string" && input.description.length > 0) {
-      return `${name} ${input.description}`
+    const description = typeof input.description === "string" && input.description.length > 0 ? input.description : ""
+    const timeout = typeof input.timeout === "number" && input.timeout > 0 ? input.timeout : undefined
+
+    const baseTitle = description ? `${name} ${description}` : name
+    if (!timeout) {
+      return baseTitle
     }
-    return name
+
+    const timeoutLabel = `${timeout}ms`
+    return `${baseTitle} · Timeout: ${timeoutLabel}`
   },
-  renderBody({ toolState, renderMarkdown }) {
+  renderBody({ toolState, renderMarkdown, renderAnsi }) {
     const state = toolState()
     if (!state || state.status === "pending") return null
 
@@ -30,9 +36,19 @@ export const bashRenderer: ToolRenderer = {
     const parts = [command, outputResult?.text].filter(Boolean)
     if (parts.length === 0) return null
 
-    const content = ensureMarkdownContent(parts.join("\n"), "bash", true)
+    const joined = parts.join("\n")
+    if (state.status === "running") {
+      return renderAnsi({ content: joined, variant: "running" })
+    }
+
+    const ansiBody = renderAnsi({ content: joined, requireAnsi: true, variant: "final" })
+    if (ansiBody) {
+      return ansiBody
+    }
+
+    const content = ensureMarkdownContent(joined, "bash", true)
     if (!content) return null
 
-    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+    return renderMarkdown({ content })
   },
 }

packages/ui/src/components/tool-call/renderers/index.ts

@@ -9,6 +9,7 @@ import { todoRenderer } from "./todo"
 import { webfetchRenderer } from "./webfetch"
 import { writeRenderer } from "./write"
 import { invalidRenderer } from "./invalid"
+import { questionRenderer } from "./question"
 
 const TOOL_RENDERERS: ToolRenderer[] = [
   bashRenderer,
@@ -19,6 +20,7 @@ const TOOL_RENDERERS: ToolRenderer[] = [
   webfetchRenderer,
   todoRenderer,
   taskRenderer,
+  questionRenderer,
   invalidRenderer,
 ]
 

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

@@ -0,0 +1,17 @@
+import type { ToolRenderer } from "../types"
+
+export const questionRenderer: ToolRenderer = {
+  tools: ["question"],
+  getAction: () => "Awaiting answers...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return "Questions"
+    if (state.status === "completed") return "Questions"
+    return "Asking questions"
+  },
+  renderBody() {
+    // The question tool UI is rendered by ToolCall itself so
+    // it can share the same layout for pending/completed.
+    return null
+  },
+}

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

@@ -9,8 +9,25 @@ export const readRenderer: ToolRenderer = {
     if (!state) return undefined
     const { input } = readToolStatePayload(state)
     const filePath = typeof input.filePath === "string" ? input.filePath : ""
-    if (!filePath) return getToolName("read")
-    return `${getToolName("read")} ${getRelativePath(filePath)}`
+    const offset = typeof input.offset === "number" ? input.offset : undefined
+    const limit = typeof input.limit === "number" ? input.limit : undefined
+    const relativePath = filePath ? getRelativePath(filePath) : ""
+    const detailParts: string[] = []
+
+    if (typeof offset === "number") {
+      detailParts.push(`Offset: ${offset}`)
+    }
+
+    if (typeof limit === "number") {
+      detailParts.push(`Limit: ${limit}`)
+    }
+
+    const baseTitle = relativePath ? `${getToolName("read")} ${relativePath}` : getToolName("read")
+    if (!detailParts.length) {
+      return baseTitle
+    }
+
+    return `${baseTitle} · ${detailParts.join(" · ")}`
   },
   renderBody({ toolState, renderMarkdown }) {
     const state = toolState()

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

@@ -1,25 +1,84 @@
-import { For, createMemo } from "solid-js"
+import { For, Show, createMemo } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRenderer } from "../types"
-import { getRelativePath, getToolIcon, getToolName, readToolStatePayload } from "../utils"
+import { getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
+import { getTodoTitle } from "./todo"
+import { resolveTitleForTool } from "../tool-title"
 
 interface TaskSummaryItem {
   id: string
   tool: string
   input: Record<string, any>
+  metadata: Record<string, any>
+  state?: ToolState
+  status?: ToolState["status"]
+  title?: string
 }
 
-function describeTaskItem(item: TaskSummaryItem): string {
-  const input = item.input || {}
-  switch (item.tool) {
-    case "bash":
-      return typeof input.description === "string" ? input.description : input.command || "bash"
-    case "edit":
-    case "read":
-    case "write":
-      return `${item.tool} ${getRelativePath(typeof input.filePath === "string" ? input.filePath : "")}`.trim()
-    default:
-      return item.tool
+function normalizeStatus(status?: string | null): ToolState["status"] | undefined {
+  if (status === "pending" || status === "running" || status === "completed" || status === "error") {
+    return status
   }
+  return undefined
+}
+
+function summarizeStatusIcon(status?: ToolState["status"]) {
+  switch (status) {
+    case "pending":
+      return "⏸"
+    case "running":
+      return "⏳"
+    case "completed":
+      return "✓"
+    case "error":
+      return "✗"
+    default:
+      return ""
+  }
+}
+
+function summarizeStatusLabel(status?: ToolState["status"]) {
+  switch (status) {
+    case "pending":
+      return "Pending"
+    case "running":
+      return "Running"
+    case "completed":
+      return "Completed"
+    case "error":
+      return "Error"
+    default:
+      return "Unknown"
+  }
+}
+
+function describeTaskTitle(input: Record<string, any>) {
+  const description = typeof input.description === "string" ? input.description : undefined
+  const subagent = typeof input.subagent_type === "string" ? input.subagent_type : undefined
+  const base = getToolName("task")
+  if (description && subagent) {
+    return `${base}[${subagent}] ${description}`
+  }
+  if (description) {
+    return `${base} ${description}`
+  }
+  return base
+}
+
+function describeToolTitle(item: TaskSummaryItem): string {
+  if (item.title && item.title.length > 0) {
+    return item.title
+  }
+
+  if (item.tool === "task") {
+    return describeTaskTitle({ ...item.metadata, ...item.input })
+  }
+
+  if (item.state) {
+    return resolveTitleForTool({ toolName: item.tool, state: item.state })
+  }
+
+  return getDefaultToolAction(item.tool)
 }
 
 export const taskRenderer: ToolRenderer = {
@@ -29,18 +88,9 @@ export const taskRenderer: ToolRenderer = {
     const state = toolState()
     if (!state) return undefined
     const { input } = readToolStatePayload(state)
-    const description = input.description
-    const subagent = input.subagent_type
-    const base = getToolName("task")
-    if (description && subagent) {
-      return `${base}[${subagent}] ${description}`
-    }
-    if (description) {
-      return `${base} ${description}`
-    }
-    return base
+    return describeTaskTitle(input)
   },
-  renderBody({ toolState, toolCall, messageVersion, partVersion, scrollHelpers }) {
+  renderBody({ toolState, messageVersion, partVersion, scrollHelpers }) {
     const items = createMemo(() => {
       // Track the reactive change points so we only recompute when the part/message changes
       messageVersion?.()
@@ -54,9 +104,13 @@ export const taskRenderer: ToolRenderer = {
 
       return summary.map((entry, index) => {
         const tool = typeof entry?.tool === "string" ? (entry.tool as string) : "unknown"
-        const input = typeof (entry as any)?.state?.input === "object" && entry.state?.input ? entry.state.input : {}
+        const stateValue = typeof entry?.state === "object" ? (entry.state as ToolState) : undefined
+        const metadataFromEntry = typeof entry?.metadata === "object" && entry.metadata ? entry.metadata : {}
+        const fallbackInput = typeof entry?.input === "object" && entry.input ? entry.input : {}
         const id = typeof entry?.id === "string" && entry.id.length > 0 ? entry.id : `${tool}-${index}`
-        return { id, tool, input }
+        const statusValue = normalizeStatus((entry?.status as string | undefined) ?? stateValue?.status)
+        const title = typeof entry?.title === "string" ? entry.title : undefined
+        return { id, tool, input: fallbackInput, metadata: metadataFromEntry, state: stateValue, status: statusValue, title }
       })
     })
 
@@ -72,11 +126,23 @@ export const taskRenderer: ToolRenderer = {
           <For each={items()}>
             {(item) => {
               const icon = getToolIcon(item.tool)
-              const description = describeTaskItem(item)
+              const description = describeToolTitle(item)
+              const toolLabel = getToolName(item.tool)
+              const status = normalizeStatus(item.status ?? item.state?.status)
+              const statusIcon = summarizeStatusIcon(status)
+              const statusLabel = summarizeStatusLabel(status)
+              const statusAttr = status ?? "pending"
               return (
-                <div class="tool-call-task-item" data-task-id={item.id}>
+                <div class="tool-call-task-item" data-task-id={item.id} data-task-status={statusAttr}>
                   <span class="tool-call-task-icon">{icon}</span>
+                  <span class="tool-call-task-label">{toolLabel}</span>
+                  <span class="tool-call-task-separator" aria-hidden="true">—</span>
                   <span class="tool-call-task-text">{description}</span>
+                  <Show when={statusIcon}>
+                    <span class="tool-call-task-status" aria-label={statusLabel} title={statusLabel}>
+                      {statusIcon}
+                    </span>
+                  </Show>
                 </div>
               )
             }}
@@ -87,4 +153,3 @@ export const taskRenderer: ToolRenderer = {
     )
   },
 }
-

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

@@ -1,11 +1,11 @@
-import { For } from "solid-js"
+import { For, Show } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRenderer } from "../types"
 import { readToolStatePayload } from "../utils"
 
 export type TodoViewStatus = "pending" | "in_progress" | "completed" | "cancelled"
 
-interface TodoViewItem {
+export interface TodoViewItem {
   id: string
   content: string
   status: TodoViewStatus
@@ -58,7 +58,56 @@ function getTodoStatusLabel(status: TodoViewStatus): string {
   }
 }
 
-function getTodoTitle(state?: ToolState): string {
+interface TodoListViewProps {
+  state?: ToolState
+  emptyLabel?: string
+  showStatusLabel?: boolean
+}
+
+export function TodoListView(props: TodoListViewProps) {
+  const todos = extractTodosFromState(props.state)
+  const counts = summarizeTodos(todos)
+
+  if (counts.total === 0) {
+    return <div class="tool-call-todo-empty">{props.emptyLabel ?? "No plan items yet."}</div>
+  }
+
+  return (
+    <div class="tool-call-todo-region">
+      <div class="tool-call-todos" role="list">
+        <For each={todos}>
+          {(todo) => {
+            const label = getTodoStatusLabel(todo.status)
+            return (
+              <div
+                class="tool-call-todo-item"
+                classList={{
+                  "tool-call-todo-item-completed": todo.status === "completed",
+                  "tool-call-todo-item-cancelled": todo.status === "cancelled",
+                  "tool-call-todo-item-active": todo.status === "in_progress",
+                }}
+                role="listitem"
+              >
+                <span class="tool-call-todo-checkbox" data-status={todo.status} aria-label={label}></span>
+                  <div class="tool-call-todo-body">
+                    <div class="tool-call-todo-heading">
+                      <span class="tool-call-todo-text">{todo.content}</span>
+                      <Show when={props.showStatusLabel !== false}>
+                        <span class={`tool-call-todo-status tool-call-todo-status-${todo.status}`}>{label}</span>
+                      </Show>
+                    </div>
+                  </div>
+
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export function getTodoTitle(state?: ToolState): string {
   if (!state) return "Plan"
 
   const todos = extractTodosFromState(state)
@@ -80,42 +129,6 @@ export const todoRenderer: ToolRenderer = {
     const state = toolState()
     if (!state) return null
 
-    const todos = extractTodosFromState(state)
-    const counts = summarizeTodos(todos)
-
-    if (counts.total === 0) {
-      return <div class="tool-call-todo-empty">No plan items yet.</div>
-    }
-
-    return (
-      <div class="tool-call-todo-region">
-        <div class="tool-call-todos" role="list">
-          <For each={todos}>
-            {(todo) => {
-              const label = getTodoStatusLabel(todo.status)
-              return (
-                <div
-                  class="tool-call-todo-item"
-                  classList={{
-                    "tool-call-todo-item-completed": todo.status === "completed",
-                    "tool-call-todo-item-cancelled": todo.status === "cancelled",
-                    "tool-call-todo-item-active": todo.status === "in_progress",
-                  }}
-                  role="listitem"
-                >
-                  <span class="tool-call-todo-checkbox" data-status={todo.status} aria-label={label}></span>
-                  <div class="tool-call-todo-body">
-                    <div class="tool-call-todo-heading">
-                      <span class="tool-call-todo-text">{todo.content}</span>
-                      <span class={`tool-call-todo-status tool-call-todo-status-${todo.status}`}>{label}</span>
-                    </div>
-                  </div>
-                </div>
-              )
-            }}
-          </For>
-        </div>
-      </div>
-    )
+    return <TodoListView state={state} />
   },
 }

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

@@ -0,0 +1,88 @@
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolRendererContext, ToolRenderer, ToolCallPart } from "./types"
+import { getDefaultToolAction, getToolName, isToolStateCompleted, isToolStateRunning } from "./utils"
+import { defaultRenderer } from "./renderers/default"
+import { bashRenderer } from "./renderers/bash"
+import { readRenderer } from "./renderers/read"
+import { writeRenderer } from "./renderers/write"
+import { editRenderer } from "./renderers/edit"
+import { patchRenderer } from "./renderers/patch"
+import { webfetchRenderer } from "./renderers/webfetch"
+import { todoRenderer } from "./renderers/todo"
+import { invalidRenderer } from "./renderers/invalid"
+
+const TITLE_RENDERERS: Record<string, ToolRenderer> = {
+  bash: bashRenderer,
+  read: readRenderer,
+  write: writeRenderer,
+  edit: editRenderer,
+  patch: patchRenderer,
+  webfetch: webfetchRenderer,
+  todowrite: todoRenderer,
+  todoread: todoRenderer,
+  invalid: invalidRenderer,
+}
+
+interface TitleSnapshot {
+  toolName: string
+  state?: ToolState
+}
+
+function lookupRenderer(toolName: string): ToolRenderer {
+  return TITLE_RENDERERS[toolName] ?? defaultRenderer
+}
+
+function createStaticToolPart(snapshot: TitleSnapshot): ToolCallPart {
+  return {
+    id: "",
+    type: "tool",
+    tool: snapshot.toolName,
+    state: snapshot.state,
+  } as ToolCallPart
+}
+
+function createStaticContext(snapshot: TitleSnapshot): ToolRendererContext {
+  const toolStateAccessor = () => snapshot.state
+  const toolNameAccessor = () => snapshot.toolName
+  const toolCallAccessor = () => createStaticToolPart(snapshot)
+  const messageVersionAccessor = () => undefined
+  const partVersionAccessor = () => undefined
+  const renderMarkdown: ToolRendererContext["renderMarkdown"] = () => null
+  const renderAnsi: ToolRendererContext["renderAnsi"] = () => null
+  const renderDiff: ToolRendererContext["renderDiff"] = () => null
+
+  return {
+    toolCall: toolCallAccessor,
+    toolState: toolStateAccessor,
+    toolName: toolNameAccessor,
+    messageVersion: messageVersionAccessor,
+    partVersion: partVersionAccessor,
+    renderMarkdown,
+    renderAnsi,
+    renderDiff,
+    scrollHelpers: undefined,
+  }
+}
+
+export function resolveTitleForTool(snapshot: TitleSnapshot): string {
+  const renderer = lookupRenderer(snapshot.toolName)
+  const context = createStaticContext(snapshot)
+  const state = snapshot.state
+  const defaultAction = renderer.getAction?.(context) ?? getDefaultToolAction(snapshot.toolName)
+
+  if (!state || state.status === "pending") {
+    return defaultAction
+  }
+
+  const stateTitle = typeof (state as { title?: string }).title === "string" ? (state as { title?: string }).title : undefined
+  if (stateTitle && stateTitle.length > 0) {
+    return stateTitle
+  }
+
+  const customTitle = renderer.getTitle?.(context)
+  if (customTitle) {
+    return customTitle
+  }
+
+  return getToolName(snapshot.toolName)
+}

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

@@ -15,6 +15,13 @@ export interface MarkdownRenderOptions {
   disableHighlight?: boolean
 }
 
+export interface AnsiRenderOptions {
+  content: string
+  size?: "default" | "large"
+  requireAnsi?: boolean
+  variant?: "running" | "final"
+}
+
 export interface DiffRenderOptions {
   variant?: string
   disableScrollTracking?: boolean
@@ -34,6 +41,7 @@ export interface ToolRendererContext {
   messageVersion?: Accessor<number | undefined>
   partVersion?: Accessor<number | undefined>
   renderMarkdown(options: MarkdownRenderOptions): JSXElement | null
+  renderAnsi(options: AnsiRenderOptions): JSXElement | null
   renderDiff(payload: DiffPayload, options?: DiffRenderOptions): JSXElement | null
   scrollHelpers?: ToolScrollHelpers
 }

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

@@ -45,6 +45,8 @@ export function getToolIcon(tool: string): string {
     case "todowrite":
     case "todoread":
       return "📋"
+    case "question":
+      return "❓"
     case "list":
       return "📁"
     case "patch":
@@ -192,3 +194,33 @@ export function readToolStatePayload(state?: ToolState): {
     output: isToolStateCompleted(state) ? state.output : undefined,
   }
 }
+
+export function getDefaultToolAction(toolName: string) {
+  switch (toolName) {
+    case "task":
+      return "Delegating..."
+    case "bash":
+      return "Writing command..."
+    case "edit":
+      return "Preparing edit..."
+    case "webfetch":
+      return "Fetching from the web..."
+    case "glob":
+      return "Finding files..."
+    case "grep":
+      return "Searching content..."
+    case "list":
+      return "Listing directory..."
+    case "read":
+      return "Reading file..."
+    case "write":
+      return "Preparing write..."
+    case "todowrite":
+    case "todoread":
+      return "Planning..."
+    case "patch":
+      return "Preparing patch..."
+    default:
+      return "Working..."
+  }
+}

packages/ui/src/components/unified-picker.tsx

@@ -1,6 +1,7 @@
-import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"
+import { Component, createSignal, createEffect, createMemo, For, Show, onCleanup } from "solid-js"
 import type { Agent } from "../types/session"
-import type { OpencodeClient } from "@opencode-ai/sdk/client"
+import type { Command as SDKCommand } from "@opencode-ai/sdk/v2"
+import type { OpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { serverApi } from "../lib/api-client"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
@@ -67,13 +68,18 @@ function mapEntriesToFileItems(entries: { path: string; type: "file" | "director
   })
 }
 
-type PickerItem = { type: "agent"; agent: Agent } | { type: "file"; file: FileItem }
+type PickerItem =
+  | { type: "agent"; agent: Agent }
+  | { type: "file"; file: FileItem }
+  | { type: "command"; command: SDKCommand }
 
 interface UnifiedPickerProps {
   open: boolean
+  mode?: "mention" | "command"
   onSelect: (item: PickerItem) => void
   onClose: () => void
   agents: Agent[]
+  commands?: SDKCommand[]
   instanceClient: OpencodeClient | null
   searchQuery: string
   textareaRef?: HTMLTextAreaElement
@@ -81,6 +87,8 @@ interface UnifiedPickerProps {
 }
 
 const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
+  const mode = () => props.mode ?? "mention"
+
   const [files, setFiles] = createSignal<FileItem[]>([])
   const [filteredAgents, setFilteredAgents] = createSignal<Agent[]>([])
   const [selectedIndex, setSelectedIndex] = createSignal(0)
@@ -246,6 +254,11 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
       return
     }
 
+    if (mode() !== "mention") {
+      // Command mode doesn't use file snapshots.
+      return
+    }
+
     const workspaceChanged = lastWorkspaceId !== props.workspaceId
     const queryChanged = lastQuery !== props.searchQuery
 
@@ -262,6 +275,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
   createEffect(() => {
     if (!props.open) return
+    if (mode() !== "mention") return
 
     const query = props.searchQuery.toLowerCase()
     const filtered = query
@@ -275,8 +289,25 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     setFilteredAgents(filtered)
   })
 
+  const filteredCommands = createMemo(() => {
+    if (mode() !== "command") return []
+    const q = props.searchQuery.trim().toLowerCase()
+    const source = props.commands ?? []
+    if (!q) return source
+    return source.filter((cmd) => {
+      const nameMatch = cmd.name.toLowerCase().includes(q)
+      const descMatch = (cmd.description ?? "").toLowerCase().includes(q)
+      return nameMatch || descMatch
+    })
+  })
+
   const allItems = (): PickerItem[] => {
     const items: PickerItem[] = []
+    if (mode() === "command") {
+      filteredCommands().forEach((command) => items.push({ type: "command", command }))
+      return items
+    }
+
     filteredAgents().forEach((agent) => items.push({ type: "agent", agent }))
     files().forEach((file) => items.push({ type: "file", file }))
     return items
@@ -329,9 +360,10 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     }
   })
 
+  const commandCount = () => filteredCommands().length
   const agentCount = () => filteredAgents().length
   const fileCount = () => files().length
-  const isLoading = () => loadingState() !== "idle"
+  const isLoading = () => mode() === "mention" && loadingState() !== "idle"
   const loadingMessage = () => {
     if (loadingState() === "search") {
       return "Searching..."
@@ -351,7 +383,9 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
       >
         <div class="dropdown-header">
           <div class="dropdown-header-title">
-            Select Agent or File
+            <Show when={mode() === "command"} fallback={"Select Agent or File"}>
+              Select Command
+            </Show>
             <Show when={isLoading()}>
               <span class="ml-2">{loadingMessage()}</span>
             </Show>
@@ -359,11 +393,41 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
         </div>
 
         <div ref={scrollContainerRef} class="dropdown-content max-h-60">
-          <Show when={agentCount() === 0 && fileCount() === 0}>
+          <Show when={(mode() === "command" ? commandCount() === 0 : agentCount() === 0 && fileCount() === 0)}>
             <div class="dropdown-empty">No results found</div>
           </Show>
 
-          <Show when={agentCount() > 0}>
+          <Show when={mode() === "command" && commandCount() > 0}>
+            <div class="dropdown-section-header">COMMANDS</div>
+            <For each={filteredCommands()}>
+              {(command) => {
+                const itemIndex = allItems().findIndex((item) => item.type === "command" && item.command.name === command.name)
+                return (
+                  <div
+                    class={`dropdown-item ${itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""}`}
+                    data-picker-selected={itemIndex === selectedIndex()}
+                    onClick={() => handleSelect({ type: "command", command })}
+                  >
+                    <div class="flex items-start gap-2">
+                      <svg class="dropdown-icon-accent h-4 w-4 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                      </svg>
+                      <div class="flex-1">
+                        <div class="text-sm font-medium">/{command.name}</div>
+                        <Show when={command.description}>
+                          <div class="mt-0.5 text-xs" style="color: var(--text-muted)">
+                            {(command.description ?? "").length > 80 ? (command.description ?? "").slice(0, 80) + "..." : command.description}
+                          </div>
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            </For>
+          </Show>
+
+          <Show when={mode() === "mention" && agentCount() > 0}>
             <div class="dropdown-section-header">
               AGENTS
             </div>
@@ -418,7 +482,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
             </For>
           </Show>
 
-          <Show when={fileCount() > 0}>
+          <Show when={mode() === "mention" && fileCount() > 0}>
             <div class="dropdown-section-header">
               FILES
             </div>